first commit
This commit is contained in:
dwindown
149
vendor/wpcfto/metaboxes/general_components/js/select.js
vendored
Normal file
149
vendor/wpcfto/metaboxes/general_components/js/select.js
vendored
Normal file
@@ -0,0 +1,149 @@
|
||||
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
||||
"use strict";
|
||||
|
||||
Vue.component('wpcfto_select', {
|
||||
mixins: [window.validationMixin],
|
||||
props: ['fields', 'field_label', 'field_name', 'field_id', 'field_value'],
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
searchTerm: '',
|
||||
dropdownOpen: false,
|
||||
$refs: {
|
||||
nativeSelect: null,
|
||||
searchBox: null
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
filteredOptions() {
|
||||
const options = this.fields.options || {};
|
||||
const selectedValue = this.value;
|
||||
|
||||
// If not searchable, show all options
|
||||
if (!this.fields.searchable) {
|
||||
return options;
|
||||
}
|
||||
|
||||
// If searchTerm is empty or less than 3 chars
|
||||
if (!this.searchTerm || this.searchTerm.length < 3) {
|
||||
// Show only selected option if exists
|
||||
if (selectedValue && options[selectedValue]) {
|
||||
return { [selectedValue]: options[selectedValue] };
|
||||
}
|
||||
// Otherwise show nothing
|
||||
return {};
|
||||
}
|
||||
|
||||
// If searchTerm has 3 or more chars, filter options
|
||||
const term = this.searchTerm.toLowerCase();
|
||||
return Object.fromEntries(
|
||||
Object.entries(options).filter(([key, label]) =>
|
||||
label.toLowerCase().includes(term) || key.toLowerCase().includes(term)
|
||||
)
|
||||
);
|
||||
},
|
||||
selectedLabel() {
|
||||
return this.fields.options[this.value] || this.field_label || 'Select';
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.value = this.field_value;
|
||||
document.addEventListener('click', this.handleClickOutside);
|
||||
},
|
||||
beforeDestroy() {
|
||||
document.removeEventListener('click', this.handleClickOutside);
|
||||
},
|
||||
methods: {
|
||||
toggleDropdown() {
|
||||
this.dropdownOpen = !this.dropdownOpen;
|
||||
if (this.dropdownOpen) {
|
||||
this.searchTerm = '';
|
||||
}
|
||||
setTimeout(() => {
|
||||
const searchBox = this.$refs.searchBox;
|
||||
if (searchBox) {
|
||||
searchBox.focus()
|
||||
}
|
||||
}, 100);
|
||||
},
|
||||
selectOption(key) {
|
||||
this.value = key;
|
||||
this.$emit('wpcfto-get-value', key);
|
||||
this.dropdownOpen = false;
|
||||
// Manually trigger change event on hidden input
|
||||
const nativeSelect = this.$refs.nativeSelect;
|
||||
if (nativeSelect) {
|
||||
nativeSelect.value = key;
|
||||
const event = new Event('change', { bubbles: true });
|
||||
nativeSelect.dispatchEvent(event);
|
||||
}
|
||||
},
|
||||
handleClickOutside(event) {
|
||||
if (!this.$el.contains(event.target)) {
|
||||
this.dropdownOpen = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<div class="wpcfto_generic_field wpcfto_generic_field__select" :class="{ open: dropdownOpen }">
|
||||
|
||||
<wpcfto_fields_aside_before :fields="fields" :field_label="field_label" :required="fields.required === true"></wpcfto_fields_aside_before>
|
||||
|
||||
<div class="wpcfto-field-content">
|
||||
<!-- Render custom searchable select only if searchable -->
|
||||
<div v-if="fields.searchable" class="wpcfto-custom-select" :id="field_id" @click.stop="toggleDropdown">
|
||||
|
||||
<div class="wpcfto-selected-value">
|
||||
{{ selectedLabel }}
|
||||
<span class="wpcfto-arrow" :class="{ open: dropdownOpen }">▾</span>
|
||||
</div>
|
||||
|
||||
<div v-if="dropdownOpen" class="wpcfto-options-dropdown">
|
||||
<input ref="searchBox" type="text" class="wpcfto-select-search" v-model="searchTerm" placeholder="Search..." @click.stop />
|
||||
|
||||
<ul class="wpcfto-options-list" style="padding-left: 0;">
|
||||
<li v-for="(label, key) in filteredOptions" :key="key"
|
||||
:class="{ selected: key === value }"
|
||||
@click.stop="selectOption(key)">
|
||||
{{ label }}
|
||||
</li>
|
||||
<li v-if="Object.keys(filteredOptions).length === 0" class="no-options">No options found</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Render native select if not searchable -->
|
||||
<div v-else class="wpcfto-admin-select">
|
||||
<select
|
||||
v-bind:name="field_name"
|
||||
v-model="value"
|
||||
v-bind:id="field_id"
|
||||
:required="fields.required === true">
|
||||
<option v-for="(option, key) in fields.options" :value="key" :key="key">
|
||||
{{ option }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<wpcfto_fields_aside_after :fields="fields"></wpcfto_fields_aside_after>
|
||||
|
||||
<!-- Hidden input to submit form value for custom select -->
|
||||
<input ref="nativeSelect" v-if="fields.searchable" type="hidden" :name="field_name" v-model="value" :required="fields.required === true" />
|
||||
</div>
|
||||
`,
|
||||
watch: {
|
||||
value(newVal) {
|
||||
this.$emit('wpcfto-get-value', newVal);
|
||||
this.$nextTick(() => {
|
||||
if (typeof window.wpcftoDependency !== 'undefined') {
|
||||
window.wpcftoDependency.check(this.field_id);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZha2VfYzRiZDk3ZTMuanMiXSwibmFtZXMiOlsiVnVlIiwiY29tcG9uZW50IiwicHJvcHMiLCJkYXRhIiwidmFsdWUiLCJ0ZW1wbGF0ZSIsIm1vdW50ZWQiLCJmaWVsZF92YWx1ZSIsIm1ldGhvZHMiLCJ3YXRjaCIsIl92YWx1ZSIsIiRlbWl0Il0sIm1hcHBpbmdzIjoiQUFBQTs7QUFFQUEsR0FBRyxDQUFDQyxTQUFKLENBQWMsZUFBZCxFQUErQjtBQUM3QkMsRUFBQUEsS0FBSyxFQUFFLENBQUMsUUFBRCxFQUFXLGFBQVgsRUFBMEIsWUFBMUIsRUFBd0MsVUFBeEMsRUFBb0QsYUFBcEQsQ0FEc0I7QUFFN0JDLEVBQUFBLElBQUksRUFBRSxTQUFTQSxJQUFULEdBQWdCO0FBQ3BCLFdBQU87QUFDTEMsTUFBQUEsS0FBSyxFQUFFO0FBREYsS0FBUDtBQUdELEdBTjRCO0FBTzdCQyxFQUFBQSxRQUFRLEVBQUUsNndCQVBtQjtBQVE3QkMsRUFBQUEsT0FBTyxFQUFFLFNBQVNBLE9BQVQsR0FBbUI7QUFDMUIsU0FBS0YsS0FBTCxHQUFhLEtBQUtHLFdBQWxCO0FBQ0QsR0FWNEI7QUFXN0JDLEVBQUFBLE9BQU8sRUFBRSxFQVhvQjtBQVk3QkMsRUFBQUEsS0FBSyxFQUFFO0FBQ0xMLElBQUFBLEtBQUssRUFBRSxTQUFTQSxLQUFULENBQWVNLE1BQWYsRUFBdUI7QUFDNUIsV0FBS0MsS0FBTCxDQUFXLGtCQUFYLEVBQStCRCxNQUEvQjtBQUNEO0FBSEk7QUFac0IsQ0FBL0IiLCJzb3VyY2VzQ29udGVudCI6WyJcInVzZSBzdHJpY3RcIjtcblxuVnVlLmNvbXBvbmVudCgnd3BjZnRvX3NlbGVjdCcsIHtcbiAgcHJvcHM6IFsnZmllbGRzJywgJ2ZpZWxkX2xhYmVsJywgJ2ZpZWxkX25hbWUnLCAnZmllbGRfaWQnLCAnZmllbGRfdmFsdWUnXSxcbiAgZGF0YTogZnVuY3Rpb24gZGF0YSgpIHtcbiAgICByZXR1cm4ge1xuICAgICAgdmFsdWU6ICcnXG4gICAgfTtcbiAgfSxcbiAgdGVtcGxhdGU6IFwiXFxuICAgICAgICA8ZGl2IGNsYXNzPVxcXCJ3cGNmdG9fZ2VuZXJpY19maWVsZCB3cGNmdG9fZ2VuZXJpY19maWVsZF9fc2VsZWN0XFxcIj5cXG5cXG4gICAgICAgICAgICA8d3BjZnRvX2ZpZWxkc19hc2lkZV9iZWZvcmUgOmZpZWxkcz1cXFwiZmllbGRzXFxcIiA6ZmllbGRfbGFiZWw9XFxcImZpZWxkX2xhYmVsXFxcIj48L3dwY2Z0b19maWVsZHNfYXNpZGVfYmVmb3JlPlxcbiAgICAgICAgICAgIFxcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XFxcIndwY2Z0by1maWVsZC1jb250ZW50XFxcIj5cXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cXFwid3BjZnRvLWFkbWluLXNlbGVjdFxcXCI+XFxuICAgICAgICAgICAgICAgICAgICA8c2VsZWN0IHYtYmluZDpuYW1lPVxcXCJmaWVsZF9uYW1lXFxcIlxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB2LW1vZGVsPVxcXCJ2YWx1ZVxcXCJcXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgdi1iaW5kOmlkPVxcXCJmaWVsZF9pZFxcXCI+XFxuICAgICAgICAgICAgICAgICAgICAgICAgPG9wdGlvbiB2LWZvcj1cXFwiKG9wdGlvbiwga2V5KSBpbiBmaWVsZHNbJ29wdGlvbnMnXVxcXCIgdi1iaW5kOnZhbHVlPVxcXCJrZXlcXFwiPnt7IG9wdGlvbiB9fTwvb3B0aW9uPlxcbiAgICAgICAgICAgICAgICAgICAgPC9zZWxlY3Q+XFxuICAgICAgICAgICAgICAgIDwvZGl2PlxcbiAgICAgICAgICAgIDwvZGl2PlxcblxcbiAgICAgICAgICAgIDx3cGNmdG9fZmllbGRzX2FzaWRlX2FmdGVyIDpmaWVsZHM9XFxcImZpZWxkc1xcXCI+PC93cGNmdG9fZmllbGRzX2FzaWRlX2FmdGVyPlxcblxcbiAgICAgICAgPC9kaXY+XFxuICAgIFwiLFxuICBtb3VudGVkOiBmdW5jdGlvbiBtb3VudGVkKCkge1xuICAgIHRoaXMudmFsdWUgPSB0aGlzLmZpZWxkX3ZhbHVlO1xuICB9LFxuICBtZXRob2RzOiB7fSxcbiAgd2F0Y2g6IHtcbiAgICB2YWx1ZTogZnVuY3Rpb24gdmFsdWUoX3ZhbHVlKSB7XG4gICAgICB0aGlzLiRlbWl0KCd3cGNmdG8tZ2V0LXZhbHVlJywgX3ZhbHVlKTtcbiAgICB9XG4gIH1cbn0pOyJdfQ==
|
||||
},{}]},{},[1])
|
||||
Reference in New Issue
Block a user