149 lines
8.2 KiB
JavaScript
149 lines
8.2 KiB
JavaScript
(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]) |