258 lines
12 KiB
JavaScript
258 lines
12 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,
|
|
// local reactive copy so we don't mutate props
|
|
localOptions: {}, // {value: label}
|
|
localSearchable: false,
|
|
runtimeSubmenuClass: ''
|
|
};
|
|
},
|
|
computed: {
|
|
optionCount() {
|
|
return Object.keys(this.localOptions || {}).length;
|
|
},
|
|
filteredOptions() {
|
|
const options = this.localOptions || {};
|
|
const selectedValue = this.value;
|
|
|
|
// Not searchable → show all
|
|
if (!this.localSearchable) return options;
|
|
|
|
const count = Object.keys(options).length;
|
|
const hasSearch = this.searchTerm && this.searchTerm.length >= 3;
|
|
|
|
// If small list (≤10): show all when no search term, else filter
|
|
if (count <= 10) {
|
|
if (!this.searchTerm) return options;
|
|
const term = this.searchTerm.toLowerCase();
|
|
return Object.fromEntries(
|
|
Object.entries(options).filter(([key, label]) =>
|
|
String(label).toLowerCase().includes(term) ||
|
|
String(key).toLowerCase().includes(term)
|
|
)
|
|
);
|
|
}
|
|
|
|
// Large list (>10): keep the 3+ chars rule
|
|
if (!hasSearch) {
|
|
// Show only the selected option (if any)
|
|
if (selectedValue && options[selectedValue]) {
|
|
return { [selectedValue]: options[selectedValue] };
|
|
}
|
|
return {};
|
|
}
|
|
|
|
// Filter when 3+ chars
|
|
const term = this.searchTerm.toLowerCase();
|
|
return Object.fromEntries(
|
|
Object.entries(options).filter(([key, label]) =>
|
|
String(label).toLowerCase().includes(term) ||
|
|
String(key).toLowerCase().includes(term)
|
|
)
|
|
);
|
|
},
|
|
selectedLabel() {
|
|
return this.localOptions[this.value] || this.field_label || 'Select';
|
|
}
|
|
},
|
|
mounted() {
|
|
// make a local copy of props for reactivity and to avoid mutating props
|
|
this.localOptions = Object.assign({}, (this.fields && this.fields.options) || {});
|
|
this.localSearchable = !!(this.fields && this.fields.searchable);
|
|
this.value = this.field_value;
|
|
|
|
// Attach submenu section class expected by initSubmenu()
|
|
let submenuClass, slug;
|
|
try {
|
|
const tabEl = this.$el.closest('.wpcfto-tab');
|
|
const tabId = tabEl && tabEl.getAttribute ? tabEl.getAttribute('id') : null;
|
|
const raw = (this.fields && this.fields.submenu) ? String(this.fields.submenu) : '';
|
|
slug = raw.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '');
|
|
// initSubmenu() expects classes like `${tabId}_${slug}`
|
|
submenuClass = tabId ? (tabId + '_' + slug) : slug;
|
|
if (submenuClass) {
|
|
this.runtimeSubmenuClass = submenuClass;
|
|
}
|
|
} catch (e) {}
|
|
|
|
// Ensure submenu discovery works even if initSubmenu ran before this component mounted
|
|
try {
|
|
const active = document.querySelector('.wpcfto-submenus .active');
|
|
const activeKey = active ? active.getAttribute('data-submenu') : null;
|
|
if (submenuClass) {
|
|
// Also set data-submenu attr for selectors that rely on attributes
|
|
this.$el.setAttribute('data-submenu', submenuClass);
|
|
// if (activeKey && (activeKey === submenuClass || activeKey === slug)) {
|
|
// this.$el.style.removeProperty('display');
|
|
// this.$el.style.removeProperty('visibility');
|
|
// }
|
|
// no direct style changes; visibility is handled by initSubmenu()
|
|
}
|
|
} catch (e) {}
|
|
|
|
// Listen for submenu changes to unhide this field when needed
|
|
try {
|
|
this.__onSubmenuClick = (ev) => {
|
|
const btn = ev.target.closest('[data-submenu]');
|
|
if (!btn) return;
|
|
const key = btn.getAttribute('data-submenu');
|
|
if (key && submenuClass && (key === submenuClass || key === slug)) {
|
|
// nothing needed; class binding ensures we have the right class and initSubmenu will reveal us
|
|
}
|
|
};
|
|
document.addEventListener('click', this.__onSubmenuClick, true);
|
|
} catch (e) {}
|
|
|
|
// Register for external control (optional but handy)
|
|
try {
|
|
window.wpcftoSelectRegistry = window.wpcftoSelectRegistry || {};
|
|
window.wpcftoSelectRegistry[this.field_id] = this;
|
|
} catch (e) {}
|
|
|
|
document.addEventListener('click', this.handleClickOutside);
|
|
},
|
|
beforeDestroy() {
|
|
if (this.__onSubmenuClick) {
|
|
try { document.removeEventListener('click', this.__onSubmenuClick, true); } catch(e) {}
|
|
this.__onSubmenuClick = null;
|
|
}
|
|
document.removeEventListener('click', this.handleClickOutside);
|
|
if (window.wpcftoSelectRegistry) {
|
|
delete window.wpcftoSelectRegistry[this.field_id];
|
|
}
|
|
},
|
|
methods: {
|
|
// External API to replace options & pick the right value
|
|
// currencies: {value: label}
|
|
// multicurrencies: [{value, label}]
|
|
updateCurrencyScope(currencies, multicurrencies = [], savedDefault = null) {
|
|
let optionsToSet = {};
|
|
if (Array.isArray(multicurrencies) && multicurrencies.length > 0) {
|
|
// standardize array -> object
|
|
multicurrencies.forEach(obj => {
|
|
if (obj && obj.value != null) optionsToSet[obj.value] = obj.label || obj.value;
|
|
});
|
|
} else {
|
|
optionsToSet = currencies || {};
|
|
}
|
|
|
|
// replace options reactively
|
|
this.localOptions = Object.assign({}, optionsToSet);
|
|
|
|
// decide the selected value
|
|
const want = savedDefault != null ? savedDefault : this.value;
|
|
if (want && Object.prototype.hasOwnProperty.call(this.localOptions, want)) {
|
|
this.value = want;
|
|
} else {
|
|
// pick first option or empty
|
|
const firstKey = Object.keys(this.localOptions)[0] || '';
|
|
this.value = firstKey || '';
|
|
}
|
|
|
|
// notify & sync hidden input
|
|
this.$nextTick(() => {
|
|
this.emitAndSync();
|
|
});
|
|
},
|
|
|
|
toggleDropdown() {
|
|
this.dropdownOpen = !this.dropdownOpen;
|
|
if (this.dropdownOpen) this.searchTerm = '';
|
|
this.$nextTick(() => {
|
|
const el = this.$refs.searchBox;
|
|
if (el) el.focus();
|
|
});
|
|
},
|
|
|
|
selectOption(key) {
|
|
this.value = key;
|
|
this.emitAndSync();
|
|
this.dropdownOpen = false;
|
|
},
|
|
|
|
emitAndSync() {
|
|
this.$emit('wpcfto-get-value', this.value);
|
|
const native = this.$refs.nativeSelect;
|
|
if (native) {
|
|
native.value = this.value;
|
|
// ensure form listeners like WPCFTO dependency see it
|
|
native.dispatchEvent(new Event('change', { bubbles: true }));
|
|
}
|
|
this.$nextTick(() => {
|
|
if (typeof window.wpcftoDependency !== 'undefined') {
|
|
window.wpcftoDependency.check(this.field_id);
|
|
}
|
|
});
|
|
},
|
|
|
|
handleClickOutside(event) {
|
|
if (!this.$el.contains(event.target)) {
|
|
this.dropdownOpen = false;
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
// if parent updates field_value prop (rare), keep in sync
|
|
field_value(nv) {
|
|
if (nv !== this.value) {
|
|
this.value = nv;
|
|
this.$nextTick(this.emitAndSync);
|
|
}
|
|
}
|
|
},
|
|
template: `
|
|
<div
|
|
class="wpcfto_generic_field wpcfto_generic_field_select"
|
|
:class="['columns-' + (fields && fields.columns ? fields.columns : 1), runtimeSubmenuClass, { open: dropdownOpen }]"
|
|
:data-field="field_id">
|
|
|
|
<wpcfto_fields_aside_before :fields="fields" :field_label="field_label" :required="fields.required === true"></wpcfto_fields_aside_before>
|
|
|
|
<div class="wpcfto-field-content">
|
|
|
|
<!-- Custom searchable -->
|
|
<div v-if="localSearchable" 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>
|
|
|
|
<!-- Native select -->
|
|
<div v-else class="wpcfto-admin-select">
|
|
<select :name="field_name" v-model="value" :id="field_id" :required="fields.required === true">
|
|
<option v-for="(option, key) in localOptions" :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="localSearchable" type="hidden" :name="field_name" v-model="value" :required="fields.required === true" />
|
|
</div>
|
|
`
|
|
});
|
|
|
|
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZha2VfYzRiZDk3ZTMuanMiXSwibmFtZXMiOlsiVnVlIiwiY29tcG9uZW50IiwicHJvcHMiLCJkYXRhIiwidmFsdWUiLCJ0ZW1wbGF0ZSIsIm1vdW50ZWQiLCJmaWVsZF92YWx1ZSIsIm1ldGhvZHMiLCJ3YXRjaCIsIl92YWx1ZSIsIiRlbWl0Il0sIm1hcHBpbmdzIjoiQUFBQTs7QUFFQUEsR0FBRyxDQUFDQyxTQUFKLENBQWMsZUFBZCxFQUErQjtBQUM3QkMsRUFBQUEsS0FBSyxFQUFFLENBQUMsUUFBRCxFQUFXLGFBQVgsRUFBMEIsWUFBMUIsRUFBd0MsVUFBeEMsRUFBb0QsYUFBcEQsQ0FEc0I7QUFFN0JDLEVBQUFBLElBQUksRUFBRSxTQUFTQSxJQUFULEdBQWdCO0FBQ3BCLFdBQU87QUFDTEMsTUFBQUEsS0FBSyxFQUFFO0FBREYsS0FBUDtBQUdELEdBTjRCO0FBTzdCQyxFQUFBQSxRQUFRLEVBQUUsNndCQVBtQjtBQVE3QkMsRUFBQUEsT0FBTyxFQUFFLFNBQVNBLE9BQVQsR0FBbUI7QUFDMUIsU0FBS0YsS0FBTCxHQUFhLEtBQUtHLFdBQWxCO0FBQ0QsR0FWNEI7QUFXN0JDLEVBQUFBLE9BQU8sRUFBRSxFQVhvQjtBQVk3QkMsRUFBQUEsS0FBSyxFQUFFO0FBQ0xMLElBQUFBLEtBQUssRUFBRSxTQUFTQSxLQUFULENBQWVNLE1BQWYsRUFBdUI7QUFDNUIsV0FBS0MsS0FBTCxDQUFXLGtCQUFYLEVBQStCRCxNQUEvQjtBQUNEO0FBSEk7QUFac0IsQ0FBL0IiLCJzb3VyY2VzQ29udGVudCI6WyJcInVzZSBzdHJpY3RcIjtcblxuVnVlLmNvbXBvbmVudCgnd3BjZnRvX3NlbGVjdCcsIHtcbiAgcHJvcHM6IFsnZmllbGRzJywgJ2ZpZWxkX2xhYmVsJywgJ2ZpZWxkX25hbWUnLCAnZmllbGRfaWQnLCAnZmllbGRfdmFsdWUnXSxcbiAgZGF0YTogZnVuY3Rpb24gZGF0YSgpIHtcbiAgICByZXR1cm4ge1xuICAgICAgdmFsdWU6ICcnXG4gICAgfTtcbiAgfSxcbiAgdGVtcGxhdGU6IFwiXFxuICAgICAgICA8ZGl2IGNsYXNzPVxcXCJ3cGNmdG9fZ2VuZXJpY19maWVsZCB3cGNmdG9fZ2VuZXJpY19maWVsZF9fc2VsZWN0XFxcIj5cXG5cXG4gICAgICAgICAgICA8d3BjZnRvX2ZpZWxkc19hc2lkZV9iZWZvcmUgOmZpZWxkcz1cXFwiZmllbGRzXFxcIiA6ZmllbGRfbGFiZWw9XFxcImZpZWxkX2xhYmVsXFxcIj48L3dwY2Z0b19maWVsZHNfYXNpZGVfYmVmb3JlPlxcbiAgICAgICAgICAgIFxcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XFxcIndwY2Z0by1maWVsZC1jb250ZW50XFxcIj5cXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cXFwid3BjZnRvLWFkbWluLXNlbGVjdFxcXCI+XFxuICAgICAgICAgICAgICAgICAgICA8c2VsZWN0IHYtYmluZDpuYW1lPVxcXCJmaWVsZF9uYW1lXFxcIlxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB2LW1vZGVsPVxcXCJ2YWx1ZVxcXCJcXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgdi1iaW5kOmlkPVxcXCJmaWVsZF9pZFxcXCI+XFxuICAgICAgICAgICAgICAgICAgICAgICAgPG9wdGlvbiB2LWZvcj1cXFwiKG9wdGlvbiwga2V5KSBpbiBmaWVsZHNbJ29wdGlvbnMnXVxcXCIgdi1iaW5kOnZhbHVlPVxcXCJrZXlcXFwiPnt7IG9wdGlvbiB9fTwvb3B0aW9uPlxcbiAgICAgICAgICAgICAgICAgICAgPC9zZWxlY3Q+XFxuICAgICAgICAgICAgICAgIDwvZGl2PlxcbiAgICAgICAgICAgIDwvZGl2PlxcblxcbiAgICAgICAgICAgIDx3cGNmdG9fZmllbGRzX2FzaWRlX2FmdGVyIDpmaWVsZHM9XFxcImZpZWxkc1xcXCI+PC93cGNmdG9fZmllbGRzX2FzaWRlX2FmdGVyPlxcblxcbiAgICAgICAgPC9kaXY+XFxuICAgIFwiLFxuICBtb3VudGVkOiBmdW5jdGlvbiBtb3VudGVkKCkge1xuICAgIHRoaXMudmFsdWUgPSB0aGlzLmZpZWxkX3ZhbHVlO1xuICB9LFxuICBtZXRob2RzOiB7fSxcbiAgd2F0Y2g6IHtcbiAgICB2YWx1ZTogZnVuY3Rpb24gdmFsdWUoX3ZhbHVlKSB7XG4gICAgICB0aGlzLiRlbWl0KCd3cGNmdG8tZ2V0LXZhbHVlJywgX3ZhbHVlKTtcbiAgICB9XG4gIH1cbn0pOyJdfQ==
|
|
},{}]},{},[1]) |