876 lines
31 KiB
JavaScript
876 lines
31 KiB
JavaScript
this.VueNextSelect = (function (vue) {
|
|
'use strict';
|
|
|
|
var script$2 = {
|
|
inheritAttrs: false,
|
|
name: 'vue-input',
|
|
props: {
|
|
modelValue: {
|
|
required: true,
|
|
type: String,
|
|
},
|
|
placeholder: {
|
|
required: true,
|
|
type: String,
|
|
},
|
|
disabled: {
|
|
required: true,
|
|
type: Boolean,
|
|
},
|
|
tabindex: {
|
|
required: true,
|
|
type: Number,
|
|
},
|
|
autofocus: {
|
|
required: true,
|
|
type: Boolean,
|
|
},
|
|
},
|
|
emits: ['update:modelValue', 'input', 'change', 'focus', 'blur', 'escape'],
|
|
setup(props, context) {
|
|
const handleInput = event => {
|
|
context.emit('input', event);
|
|
context.emit('update:modelValue', event.target.value);
|
|
};
|
|
const handleChange = event => {
|
|
context.emit('change', event);
|
|
context.emit('update:modelValue', event.target.value);
|
|
};
|
|
const handleFocus = event => {
|
|
context.emit('focus', event);
|
|
};
|
|
const handleBlur = event => {
|
|
context.emit('blur', event);
|
|
};
|
|
|
|
const input = vue.ref(null);
|
|
const handleEscape = event => {
|
|
input.value.blur();
|
|
context.emit('escape', event);
|
|
};
|
|
vue.onMounted(() => {
|
|
if (props.autofocus) input.value.focus();
|
|
});
|
|
vue.onUpdated(() => {
|
|
if (props.autofocus) input.value.focus();
|
|
});
|
|
|
|
return {
|
|
handleInput,
|
|
handleChange,
|
|
handleFocus,
|
|
handleBlur,
|
|
|
|
input,
|
|
handleEscape,
|
|
}
|
|
},
|
|
};
|
|
|
|
const _hoisted_1$1 = { class: "vue-input" };
|
|
|
|
function render$3(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return (vue.openBlock(), vue.createBlock("div", _hoisted_1$1, [
|
|
vue.renderSlot(_ctx.$slots, "prepend"),
|
|
vue.createVNode("input", {
|
|
ref: "input",
|
|
modelValue: $props.modelValue,
|
|
placeholder: $props.placeholder,
|
|
disabled: $props.disabled,
|
|
onInput: _cache[1] || (_cache[1] = (...args) => ($setup.handleInput && $setup.handleInput(...args))),
|
|
onChange: _cache[2] || (_cache[2] = (...args) => ($setup.handleChange && $setup.handleChange(...args))),
|
|
onFocus: _cache[3] || (_cache[3] = (...args) => ($setup.handleFocus && $setup.handleFocus(...args))),
|
|
onBlur: _cache[4] || (_cache[4] = (...args) => ($setup.handleBlur && $setup.handleBlur(...args))),
|
|
onKeyup: _cache[5] || (_cache[5] = vue.withKeys(vue.withModifiers((...args) => ($setup.handleEscape && $setup.handleEscape(...args)), ["exact"]), ["esc"])),
|
|
tabindex: $props.tabindex,
|
|
autofocus: $props.autofocus
|
|
}, null, 40 /* PROPS, HYDRATE_EVENTS */, ["modelValue", "placeholder", "disabled", "tabindex", "autofocus"]),
|
|
vue.renderSlot(_ctx.$slots, "append")
|
|
]))
|
|
}
|
|
|
|
script$2.render = render$3;
|
|
script$2.__file = "src/components/input.vue";
|
|
|
|
var script$1 = {
|
|
inheritAttrs: false,
|
|
name: 'vue-tags',
|
|
props: {
|
|
modelValue: {
|
|
required: true,
|
|
type: Array,
|
|
validator(modelValue) {
|
|
return modelValue.every(option => {
|
|
return typeof option.key !== undefined && option.label !== undefined && typeof option.selected === 'boolean'
|
|
})
|
|
},
|
|
},
|
|
collapseTags: {
|
|
type: Boolean,
|
|
},
|
|
},
|
|
emits: ['click'],
|
|
setup(props, context) {
|
|
const dataAttrs = vue.inject('dataAttrs');
|
|
|
|
const handleClick = event => {
|
|
context.emit('click', event);
|
|
};
|
|
|
|
return {
|
|
dataAttrs,
|
|
handleClick,
|
|
}
|
|
},
|
|
};
|
|
|
|
function render$2(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return (vue.openBlock(), vue.createBlock("ul", vue.mergeProps({
|
|
class: ["vue-tags", { collapsed: $props.collapseTags }],
|
|
onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => {}, ["prevent"])),
|
|
tabindex: "-1",
|
|
onClick: _cache[2] || (_cache[2] = (...args) => ($setup.handleClick && $setup.handleClick(...args)))
|
|
}, $setup.dataAttrs), [
|
|
(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($props.modelValue, (option) => {
|
|
return (vue.openBlock(), vue.createBlock("li", {
|
|
key: option.key,
|
|
class: ["vue-tag", { selected: option.selected }]
|
|
}, [
|
|
vue.renderSlot(_ctx.$slots, "default", { option: option }, () => [
|
|
vue.createVNode("span", null, vue.toDisplayString(option.label), 1 /* TEXT */)
|
|
])
|
|
], 2 /* CLASS */))
|
|
}), 128 /* KEYED_FRAGMENT */))
|
|
], 16 /* FULL_PROPS */))
|
|
}
|
|
|
|
script$1.render = render$2;
|
|
script$1.__file = "src/components/tags.vue";
|
|
|
|
var script = {
|
|
inheritAttrs: false,
|
|
name: 'vue-dropdown',
|
|
props: {
|
|
modelValue: {
|
|
required: true,
|
|
type: Array,
|
|
validator(modelValue) {
|
|
return modelValue.every(option => {
|
|
return typeof option.key !== undefined && option.label !== undefined && typeof option.selected === 'boolean'
|
|
})
|
|
},
|
|
},
|
|
headerHeight: {
|
|
required: true,
|
|
type: String,
|
|
},
|
|
},
|
|
emits: ['click', 'mousemove'],
|
|
setup(props, context) {
|
|
const dataAttrs = vue.inject('dataAttrs');
|
|
|
|
const handleClick = (event, option) => {
|
|
if (option.disabled) return
|
|
context.emit('click', event, option);
|
|
};
|
|
|
|
const handleMousemove = (event, option, index) => {
|
|
context.emit('mousemove', event, option, index);
|
|
};
|
|
|
|
return {
|
|
dataAttrs,
|
|
handleClick,
|
|
handleMousemove,
|
|
}
|
|
},
|
|
};
|
|
|
|
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return (vue.openBlock(), vue.createBlock("ul", vue.mergeProps({
|
|
class: "vue-dropdown",
|
|
onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => {}, ["prevent"])),
|
|
style: { top: $props.headerHeight }
|
|
}, $setup.dataAttrs), [
|
|
(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($props.modelValue, (option, index) => {
|
|
return (vue.openBlock(), vue.createBlock(vue.Fragment, {
|
|
key: option.key
|
|
}, [
|
|
(option.visible && option.hidden === false)
|
|
? (vue.openBlock(), vue.createBlock("li", {
|
|
key: 0,
|
|
onClick: $event => ($setup.handleClick($event, option)),
|
|
class: ["vue-dropdown-item", { selected: option.selected, disabled: option.disabled, highlighted: option.highlighted }],
|
|
onMousemove: vue.withModifiers($event => ($setup.handleMousemove($event, option, index)), ["self"])
|
|
}, [
|
|
vue.renderSlot(_ctx.$slots, "default", { option: option }, () => [
|
|
vue.createVNode("span", null, vue.toDisplayString(option.label), 1 /* TEXT */)
|
|
])
|
|
], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, ["onClick", "onMousemove"]))
|
|
: vue.createCommentVNode("v-if", true)
|
|
], 64 /* STABLE_FRAGMENT */))
|
|
}), 128 /* KEYED_FRAGMENT */))
|
|
], 16 /* FULL_PROPS */))
|
|
}
|
|
|
|
script.render = render$1;
|
|
script.__file = "src/components/dropdown.vue";
|
|
|
|
const isSameOption = (option1, option2, { valueBy }) => {
|
|
return valueBy(option1) === valueBy(option2)
|
|
};
|
|
|
|
const hasOption = (options, option, { valueBy }) => {
|
|
return options.some(_option => isSameOption(_option, option, { valueBy }))
|
|
};
|
|
|
|
const getOptionByValue = (options, value, { valueBy }) => {
|
|
return options.find(option => valueBy(option) === value)
|
|
};
|
|
|
|
const addOption = (selectedOptions, option, { max, valueBy }) => {
|
|
if (hasOption(selectedOptions, option, { valueBy })) return selectedOptions
|
|
if (selectedOptions.length >= max) return selectedOptions
|
|
|
|
return selectedOptions.concat(option)
|
|
};
|
|
|
|
const removeOption = (selectedOptions, option, { min, valueBy }) => {
|
|
if (hasOption(selectedOptions, option, { valueBy }) === false) return selectedOptions
|
|
if (selectedOptions.length <= min) return selectedOptions
|
|
|
|
return selectedOptions.filter(_option => isSameOption(_option, option, { valueBy }) === false)
|
|
};
|
|
|
|
const createComputedForGetterFunction = maybePathFunc =>
|
|
vue.computed(() => {
|
|
return typeof maybePathFunc.value === 'function'
|
|
? maybePathFunc.value
|
|
: typeof maybePathFunc.value === 'string'
|
|
? option => maybePathFunc.value.split('.').reduce((value, key) => value[key], option)
|
|
: option => option
|
|
});
|
|
|
|
var normalize = props => {
|
|
const trackBy = createComputedForGetterFunction(vue.toRef(props, 'trackBy'));
|
|
const labelBy = createComputedForGetterFunction(vue.toRef(props, 'labelBy'));
|
|
const valueBy = createComputedForGetterFunction(vue.toRef(props, 'valueBy'));
|
|
const disabledBy = createComputedForGetterFunction(vue.toRef(props, 'disabledBy'));
|
|
|
|
const min = vue.computed(() => (props.multiple ? props.min : Math.min(1, props.min)));
|
|
const max = vue.computed(() => (props.multiple ? props.max : 1));
|
|
|
|
const options = vue.isRef(props.options) || vue.isReactive(props.options) ? vue.toRef(props, 'options') : vue.ref(props.options);
|
|
|
|
return {
|
|
trackBy,
|
|
labelBy,
|
|
valueBy,
|
|
disabledBy,
|
|
min,
|
|
max,
|
|
options,
|
|
}
|
|
};
|
|
|
|
var useHeight = function (element, watchSource) {
|
|
var height = vue.ref('0');
|
|
var calcHeaderHeight = function () {
|
|
vue.nextTick(function () {
|
|
if (!element.value)
|
|
return;
|
|
height.value = window.getComputedStyle(element.value).height;
|
|
});
|
|
};
|
|
vue.watch(watchSource, calcHeaderHeight);
|
|
vue.onMounted(calcHeaderHeight);
|
|
return height;
|
|
};
|
|
var usePointer = function (endIndex) {
|
|
var highlightedIndex = vue.ref();
|
|
var pointerForward = function () { return ++highlightedIndex.value; };
|
|
var pointerBackward = function () { return --highlightedIndex.value; };
|
|
var pointerSet = function (index) { return (highlightedIndex.value = index); };
|
|
vue.watchEffect(function () {
|
|
if (endIndex.value <= 0) {
|
|
highlightedIndex.value = undefined;
|
|
}
|
|
else if (highlightedIndex.value === undefined) {
|
|
highlightedIndex.value = 0;
|
|
}
|
|
else if (highlightedIndex.value < 0) {
|
|
highlightedIndex.value = endIndex.value - 1;
|
|
}
|
|
else if (endIndex.value <= highlightedIndex.value) {
|
|
highlightedIndex.value = 0;
|
|
}
|
|
});
|
|
return {
|
|
highlightedIndex: highlightedIndex,
|
|
pointerForward: pointerForward,
|
|
pointerBackward: pointerBackward,
|
|
pointerSet: pointerSet,
|
|
};
|
|
};
|
|
|
|
var version = "1.3.0";
|
|
|
|
const VueSelect = {
|
|
name: 'vue-select',
|
|
inheritAttrs: false,
|
|
props: {
|
|
modelValue: {
|
|
required: true,
|
|
},
|
|
emptyModelValue: {
|
|
default: null,
|
|
},
|
|
options: {
|
|
required: true,
|
|
type: Array,
|
|
},
|
|
visibleOptions: {
|
|
type: [Array, null],
|
|
default: null,
|
|
},
|
|
multiple: {
|
|
default: false,
|
|
type: Boolean,
|
|
},
|
|
min: {
|
|
default: 0,
|
|
type: Number,
|
|
},
|
|
max: {
|
|
default: Infinity,
|
|
type: Number,
|
|
},
|
|
closeOnSelect: {
|
|
default: false,
|
|
type: Boolean,
|
|
},
|
|
clearOnSelect: {
|
|
default: false,
|
|
type: Boolean,
|
|
},
|
|
trackBy: {
|
|
type: [String, Function],
|
|
},
|
|
hideSelected: {
|
|
default: false,
|
|
type: Boolean,
|
|
},
|
|
labelBy: {
|
|
type: [String, Function],
|
|
},
|
|
valueBy: {
|
|
type: [String, Function],
|
|
},
|
|
disabledBy: {
|
|
default: 'disabled',
|
|
type: [String, Function],
|
|
},
|
|
|
|
disabled: {
|
|
default: false,
|
|
type: Boolean,
|
|
},
|
|
loading: {
|
|
default: false,
|
|
type: Boolean,
|
|
},
|
|
placeholder: {
|
|
default: 'Select option',
|
|
type: String,
|
|
},
|
|
searchPlaceholder: {
|
|
default: 'Type to search',
|
|
type: String,
|
|
},
|
|
searchable: {
|
|
default: false,
|
|
type: Boolean,
|
|
},
|
|
clearOnClose: {
|
|
default: false,
|
|
type: Boolean,
|
|
},
|
|
|
|
taggable: {
|
|
default: false,
|
|
type: Boolean,
|
|
},
|
|
collapseTags: {
|
|
default: false,
|
|
type: Boolean,
|
|
},
|
|
tabindex: {
|
|
default: 0,
|
|
type: Number,
|
|
},
|
|
autofocus: {
|
|
default: false,
|
|
type: Boolean,
|
|
},
|
|
},
|
|
emits: [
|
|
'update:modelValue',
|
|
'selected',
|
|
'removed',
|
|
'opened',
|
|
'closed',
|
|
'search:input',
|
|
'search:change',
|
|
'search:focus',
|
|
'search:blur',
|
|
],
|
|
setup(props, context) {
|
|
const { trackBy, labelBy, valueBy, disabledBy, min, max, options } = normalize(props);
|
|
|
|
const instance = vue.getCurrentInstance();
|
|
const wrapper = vue.ref();
|
|
const input = vue.ref();
|
|
const isFocusing = vue.ref(false);
|
|
vue.watch(
|
|
() => isFocusing.value,
|
|
() => {
|
|
if (isFocusing.value) {
|
|
context.emit('opened');
|
|
if (props.searchable) {
|
|
if (input.value && input.value._.refs.input !== document.activeElement) {
|
|
input.value._.refs.input.focus();
|
|
}
|
|
context.emit('search:focus');
|
|
} else {
|
|
wrapper.value.focus();
|
|
}
|
|
} else {
|
|
if (props.searchable) {
|
|
if (input.value && input.value._.refs.input === document.activeElement) {
|
|
input.value._.refs.input.blur();
|
|
}
|
|
if (props.clearOnClose) clearInput();
|
|
context.emit('search:blur');
|
|
} else {
|
|
wrapper.value.blur();
|
|
}
|
|
context.emit('closed');
|
|
}
|
|
},
|
|
);
|
|
const focus = () => {
|
|
if (props.disabled) return
|
|
isFocusing.value = true;
|
|
};
|
|
const blur = () => {
|
|
isFocusing.value = false;
|
|
};
|
|
const toggle = () => {
|
|
if (isFocusing.value) blur();
|
|
else focus();
|
|
};
|
|
vue.watch(
|
|
() => props.disabled,
|
|
() => blur(),
|
|
);
|
|
|
|
const header = vue.ref();
|
|
const headerHeight = useHeight(header, () => props.modelValue);
|
|
const inputHeight = vue.computed(() => (props.searchable && props.multiple && props.taggable ? '22px' : '0px'));
|
|
const headerAndInputHeight = vue.computed(() => parseFloat(headerHeight.value) + parseFloat(inputHeight.value) + 'px');
|
|
|
|
// input
|
|
const searchingInputValue = vue.ref('');
|
|
const handleInputForInput = event => {
|
|
context.emit('search:input', event);
|
|
};
|
|
const handleChangeForInput = event => {
|
|
context.emit('search:change', event);
|
|
};
|
|
const handleFocusForInput = event => {
|
|
focus();
|
|
};
|
|
const handleBlurForInput = event => {
|
|
blur();
|
|
};
|
|
const searchedOptions = vue.computed(() => {
|
|
const hasSearchListeners = instance.vnode.props['onSearch:input'] || instance.vnode.props['onSearch:change'];
|
|
return searchingInputValue.value && !hasSearchListeners
|
|
? options.value.filter(option => (labelBy.value(option) + '').indexOf(searchingInputValue.value) > -1)
|
|
: undefined
|
|
});
|
|
|
|
// sync model value
|
|
const normalizedModelValue = vue.ref([]);
|
|
const isSynchronoused = () => {
|
|
if (props.multiple) {
|
|
if (Array.isArray(props.modelValue) === false) return false
|
|
if (normalizedModelValue.value.length !== props.modelValue.length) return false
|
|
if (
|
|
Object.keys(normalizedModelValue.value).some(
|
|
index =>
|
|
normalizedModelValue.value[index] !==
|
|
getOptionByValue(options.value, props.modelValue[index], { valueBy: valueBy.value }),
|
|
)
|
|
)
|
|
return false
|
|
} else {
|
|
if (normalizedModelValue.value.length === 0 && props.modelValue !== props.emptyModelValue) return false
|
|
if (normalizedModelValue.value.length === 1 && props.modelValue === props.emptyModelValue) return false
|
|
if (
|
|
normalizedModelValue.value[0] !==
|
|
getOptionByValue(options.value, props.modelValue, { valueBy: valueBy.value })
|
|
)
|
|
return false
|
|
}
|
|
return true
|
|
};
|
|
const syncFromModelValue = () => {
|
|
if (isSynchronoused()) return
|
|
normalizedModelValue.value = [];
|
|
const modelValue = props.multiple
|
|
? props.modelValue
|
|
: props.modelValue === props.emptyModelValue
|
|
? []
|
|
: [props.modelValue];
|
|
for (const value of modelValue) {
|
|
const option = getOptionByValue(options.value, value, { valueBy: valueBy.value });
|
|
// guarantee options has modelValue
|
|
if (hasOption(options.value, option, { valueBy: valueBy.value }) === false) continue
|
|
normalizedModelValue.value = addOption(normalizedModelValue.value, option, {
|
|
max: Infinity,
|
|
valueBy: valueBy.value,
|
|
});
|
|
}
|
|
};
|
|
syncFromModelValue();
|
|
vue.watch(
|
|
() => props.modelValue,
|
|
() => syncFromModelValue(),
|
|
{ deep: true },
|
|
);
|
|
|
|
const syncToModelValue = () => {
|
|
if (isSynchronoused()) return
|
|
const selectedValues = normalizedModelValue.value.map(option => valueBy.value(option));
|
|
if (props.multiple) {
|
|
context.emit('update:modelValue', selectedValues);
|
|
} else {
|
|
if (selectedValues.length) context.emit('update:modelValue', selectedValues[0]);
|
|
else context.emit('update:modelValue', props.emptyModelValue);
|
|
}
|
|
};
|
|
vue.watch(
|
|
() => normalizedModelValue,
|
|
() => syncToModelValue(),
|
|
{ deep: true },
|
|
);
|
|
|
|
// guarantee options has modelValue
|
|
vue.watch(
|
|
() => options.value,
|
|
() => {
|
|
const selectedValueSet = new Set(normalizedModelValue.value.map(option => valueBy.value(option)));
|
|
normalizedModelValue.value = options.value.filter(option => selectedValueSet.has(valueBy.value(option)));
|
|
},
|
|
{ deep: true },
|
|
);
|
|
|
|
const addOrRemoveOption = (event, option) => {
|
|
if (props.disabled) return
|
|
|
|
option = option.originalOption;
|
|
if (hasOption(normalizedModelValue.value, option, { valueBy: valueBy.value })) {
|
|
normalizedModelValue.value = removeOption(normalizedModelValue.value, option, {
|
|
min: min.value,
|
|
valueBy: valueBy.value,
|
|
});
|
|
context.emit('removed', option);
|
|
} else {
|
|
if (!props.multiple) {
|
|
const removingOption = normalizedModelValue.value[0];
|
|
normalizedModelValue.value = removeOption(normalizedModelValue.value, normalizedModelValue.value[0], {
|
|
min: 0,
|
|
valueBy: valueBy.value,
|
|
});
|
|
context.emit('removed', removingOption);
|
|
}
|
|
normalizedModelValue.value = addOption(normalizedModelValue.value, option, {
|
|
max: max.value,
|
|
valueBy: valueBy.value,
|
|
});
|
|
context.emit('selected', option);
|
|
}
|
|
if (props.closeOnSelect === true) isFocusing.value = false;
|
|
if (props.clearOnSelect === true && searchingInputValue.value) clearInput();
|
|
};
|
|
|
|
const clearInput = () => {
|
|
// simulate clear input value
|
|
input.value._.refs.input.value = '';
|
|
input.value._.refs.input.dispatchEvent(new Event('input'));
|
|
input.value._.refs.input.dispatchEvent(new Event('change'));
|
|
};
|
|
|
|
const renderedOptions = vue.computed(() => props.visibleOptions ?? searchedOptions.value ?? options.value);
|
|
|
|
const optionsWithInfo = vue.computed(() => {
|
|
const selectedValueSet = new Set(normalizedModelValue.value.map(option => valueBy.value(option)));
|
|
const visibleValueSet = new Set(renderedOptions.value.map(option => valueBy.value(option)));
|
|
|
|
return options.value.map((option, index) => ({
|
|
key: trackBy.value(option),
|
|
label: labelBy.value(option),
|
|
selected: selectedValueSet.has(valueBy.value(option)),
|
|
disabled: disabledBy.value(option),
|
|
visible: visibleValueSet.has(valueBy.value(option)),
|
|
hidden: props.hideSelected ? selectedValueSet.has(valueBy.value(option)) : false,
|
|
highlighted: index === highlightedIndex.value,
|
|
originalOption: option,
|
|
}))
|
|
});
|
|
|
|
const { highlightedIndex, pointerForward, pointerBackward, pointerSet } = usePointer(
|
|
vue.computed(() => renderedOptions.value.length),
|
|
);
|
|
|
|
const dataAttrs = vue.computed(() => ({
|
|
'data-is-focusing': isFocusing.value,
|
|
'data-visible-length': optionsWithInfo.value.filter(option => option.visible && option.hidden === false).length,
|
|
'data-not-selected-length': options.value.length - optionsWithInfo.value.filter(option => option.selected).length,
|
|
'data-selected-length': optionsWithInfo.value.filter(option => option.selected).length,
|
|
'data-addable': optionsWithInfo.value.filter(option => option.selected).length < max.value,
|
|
'data-removable': optionsWithInfo.value.filter(option => option.selected).length > min.value,
|
|
'data-total-length': options.value.length,
|
|
'data-multiple': props.multiple,
|
|
}));
|
|
vue.provide('dataAttrs', dataAttrs);
|
|
|
|
const innerPlaceholder = vue.computed(() => {
|
|
const selectedOptions = optionsWithInfo.value.filter(option => option.selected);
|
|
|
|
if (props.multiple) {
|
|
if (selectedOptions.length === 0) {
|
|
return props.placeholder
|
|
} else if (selectedOptions.length === 1) {
|
|
return '1 option selected'
|
|
} else {
|
|
return selectedOptions.length + ' options selected'
|
|
}
|
|
} else {
|
|
if (selectedOptions.length === 0) {
|
|
return props.placeholder
|
|
} else {
|
|
return selectedOptions[0].label + ''
|
|
}
|
|
}
|
|
});
|
|
|
|
return {
|
|
isFocusing,
|
|
wrapper,
|
|
input,
|
|
focus,
|
|
blur,
|
|
toggle,
|
|
|
|
header,
|
|
headerAndInputHeight,
|
|
|
|
searchingInputValue,
|
|
handleInputForInput,
|
|
handleChangeForInput,
|
|
handleFocusForInput,
|
|
handleBlurForInput,
|
|
|
|
optionsWithInfo,
|
|
addOrRemoveOption,
|
|
|
|
dataAttrs,
|
|
|
|
innerPlaceholder,
|
|
|
|
highlightedIndex,
|
|
pointerForward,
|
|
pointerBackward,
|
|
pointerSet,
|
|
}
|
|
},
|
|
components: {
|
|
VInput: script$2,
|
|
VTags: script$1,
|
|
VDropdown: script,
|
|
},
|
|
};
|
|
|
|
VueSelect.__VERSION__ = version;
|
|
|
|
var _imports_0 = 'data:image/svg+xml;base64,PHN2ZyBpZD0iZGVsZXRlIiBkYXRhLW5hbWU9ImRlbGV0ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHRpdGxlPmRlbGV0ZTwvdGl0bGU+PHBhdGggZD0iTTI1NiwyNEMzODMuOSwyNCw0ODgsMTI4LjEsNDg4LDI1NlMzODMuOSw0ODgsMjU2LDQ4OCwyNC4wNiwzODMuOSwyNC4wNiwyNTYsMTI4LjEsMjQsMjU2LDI0Wk0wLDI1NkMwLDM5Ny4xNiwxMTQuODQsNTEyLDI1Niw1MTJTNTEyLDM5Ny4xNiw1MTIsMjU2LDM5Ny4xNiwwLDI1NiwwLDAsMTE0Ljg0LDAsMjU2WiIgZmlsbD0iIzViNWI1ZiIvPjxwb2x5Z29uIHBvaW50cz0iMzgyIDE3Mi43MiAzMzkuMjkgMTMwLjAxIDI1NiAyMTMuMjkgMTcyLjcyIDEzMC4wMSAxMzAuMDEgMTcyLjcyIDIxMy4yOSAyNTYgMTMwLjAxIDMzOS4yOCAxNzIuNzIgMzgyIDI1NiAyOTguNzEgMzM5LjI5IDM4MS45OSAzODIgMzM5LjI4IDI5OC43MSAyNTYgMzgyIDE3Mi43MiIgZmlsbD0iIzViNWI1ZiIvPjwvc3ZnPg==';
|
|
|
|
const _hoisted_1 = {
|
|
ref: "header",
|
|
class: "vue-select-header"
|
|
};
|
|
const _hoisted_2 = {
|
|
key: 0,
|
|
class: "vue-input"
|
|
};
|
|
const _hoisted_3 = { class: "icon loading" };
|
|
const _hoisted_4 = /*#__PURE__*/vue.createVNode("div", null, null, -1 /* HOISTED */);
|
|
const _hoisted_5 = /*#__PURE__*/vue.createVNode("div", null, null, -1 /* HOISTED */);
|
|
const _hoisted_6 = /*#__PURE__*/vue.createVNode("div", null, null, -1 /* HOISTED */);
|
|
const _hoisted_7 = { class: "icon loading" };
|
|
const _hoisted_8 = /*#__PURE__*/vue.createVNode("div", null, null, -1 /* HOISTED */);
|
|
const _hoisted_9 = /*#__PURE__*/vue.createVNode("div", null, null, -1 /* HOISTED */);
|
|
const _hoisted_10 = /*#__PURE__*/vue.createVNode("div", null, null, -1 /* HOISTED */);
|
|
|
|
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_v_tags = vue.resolveComponent("v-tags");
|
|
const _component_v_input = vue.resolveComponent("v-input");
|
|
const _component_v_dropdown = vue.resolveComponent("v-dropdown");
|
|
|
|
return (vue.openBlock(), vue.createBlock("div", vue.mergeProps({
|
|
ref: "wrapper",
|
|
class: ["vue-select", { disabled: _ctx.disabled }],
|
|
tabindex: _ctx.isFocusing ? -1 : _ctx.tabindex,
|
|
onFocus: _cache[10] || (_cache[10] = (...args) => (_ctx.focus && _ctx.focus(...args))),
|
|
onBlur: _cache[11] || (_cache[11] = () => (_ctx.searchable ? false : _ctx.blur()))
|
|
}, _ctx.dataAttrs, {
|
|
onKeypress: _cache[12] || (_cache[12] = vue.withKeys(
|
|
() => _ctx.highlightedIndex !== undefined && _ctx.addOrRemoveOption(_ctx.$event, _ctx.optionsWithInfo[_ctx.highlightedIndex])
|
|
, ["enter"])),
|
|
onKeydown: [
|
|
_cache[13] || (_cache[13] = vue.withKeys(vue.withModifiers((...args) => (_ctx.pointerForward && _ctx.pointerForward(...args)), ["prevent"]), ["down"])),
|
|
_cache[14] || (_cache[14] = vue.withKeys(vue.withModifiers((...args) => (_ctx.pointerBackward && _ctx.pointerBackward(...args)), ["prevent"]), ["up"]))
|
|
]
|
|
}), [
|
|
vue.createVNode("div", _hoisted_1, [
|
|
((_ctx.multiple && _ctx.taggable && _ctx.modelValue.length === 0) || (_ctx.searchable === false && _ctx.taggable === false))
|
|
? (vue.openBlock(), vue.createBlock("div", _hoisted_2, [
|
|
vue.createVNode("input", {
|
|
placeholder: _ctx.innerPlaceholder,
|
|
readonly: "",
|
|
onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.focus && _ctx.focus(...args)))
|
|
}, null, 8 /* PROPS */, ["placeholder"])
|
|
]))
|
|
: vue.createCommentVNode("v-if", true),
|
|
(_ctx.multiple && _ctx.taggable)
|
|
? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 1 }, [
|
|
vue.createVNode(_component_v_tags, {
|
|
modelValue: _ctx.optionsWithInfo,
|
|
"collapse-tags": _ctx.collapseTags,
|
|
tabindex: "-1",
|
|
onClick: _ctx.focus
|
|
}, {
|
|
default: vue.withCtx(({ option }) => [
|
|
vue.renderSlot(_ctx.$slots, "tag", {
|
|
option: option.originalOption
|
|
}, () => [
|
|
vue.createVNode("span", null, vue.toDisplayString(option.label), 1 /* TEXT */),
|
|
vue.createVNode("img", {
|
|
src: _imports_0,
|
|
alt: "delete tag",
|
|
class: "icon delete",
|
|
onClick: vue.withModifiers(() => _ctx.addOrRemoveOption(_ctx.$event, option), ["prevent","stop"])
|
|
}, null, 8 /* PROPS */, ["onClick"])
|
|
])
|
|
]),
|
|
_: 1 /* STABLE */
|
|
}, 8 /* PROPS */, ["modelValue", "collapse-tags", "onClick"]),
|
|
vue.createVNode("span", {
|
|
class: ["icon arrow-downward", { active: _ctx.isFocusing }],
|
|
onClick: _cache[2] || (_cache[2] = (...args) => (_ctx.toggle && _ctx.toggle(...args))),
|
|
onMousedown: _cache[3] || (_cache[3] = vue.withModifiers(() => {}, ["prevent","stop"]))
|
|
}, null, 34 /* CLASS, HYDRATE_EVENTS */)
|
|
], 64 /* STABLE_FRAGMENT */))
|
|
: (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 2 }, [
|
|
(_ctx.searchable)
|
|
? (vue.openBlock(), vue.createBlock(_component_v_input, {
|
|
key: 0,
|
|
ref: "input",
|
|
modelValue: _ctx.searchingInputValue,
|
|
"onUpdate:modelValue": _cache[4] || (_cache[4] = $event => (_ctx.searchingInputValue = $event)),
|
|
disabled: _ctx.disabled,
|
|
placeholder: _ctx.isFocusing ? _ctx.searchPlaceholder : _ctx.innerPlaceholder,
|
|
onInput: _ctx.handleInputForInput,
|
|
onChange: _ctx.handleChangeForInput,
|
|
onFocus: _ctx.handleFocusForInput,
|
|
onBlur: _ctx.handleBlurForInput,
|
|
onEscape: _ctx.blur,
|
|
autofocus: _ctx.autofocus || (_ctx.taggable && _ctx.searchable),
|
|
tabindex: _ctx.tabindex
|
|
}, null, 8 /* PROPS */, ["modelValue", "disabled", "placeholder", "onInput", "onChange", "onFocus", "onBlur", "onEscape", "autofocus", "tabindex"]))
|
|
: vue.createCommentVNode("v-if", true),
|
|
vue.withDirectives(vue.createVNode("span", _hoisted_3, [
|
|
_hoisted_4,
|
|
_hoisted_5,
|
|
_hoisted_6
|
|
], 512 /* NEED_PATCH */), [
|
|
[vue.vShow, _ctx.loading]
|
|
]),
|
|
vue.withDirectives(vue.createVNode("span", {
|
|
class: ["icon arrow-downward", { active: _ctx.isFocusing }],
|
|
onClick: _cache[5] || (_cache[5] = (...args) => (_ctx.toggle && _ctx.toggle(...args))),
|
|
onMousedown: _cache[6] || (_cache[6] = vue.withModifiers(() => {}, ["prevent","stop"]))
|
|
}, null, 34 /* CLASS, HYDRATE_EVENTS */), [
|
|
[vue.vShow, _ctx.loading === false]
|
|
])
|
|
], 64 /* STABLE_FRAGMENT */))
|
|
], 512 /* NEED_PATCH */),
|
|
(_ctx.multiple && _ctx.taggable && _ctx.searchable)
|
|
? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_v_input, {
|
|
key: 0,
|
|
ref: "input",
|
|
modelValue: _ctx.searchingInputValue,
|
|
"onUpdate:modelValue": _cache[7] || (_cache[7] = $event => (_ctx.searchingInputValue = $event)),
|
|
disabled: _ctx.disabled,
|
|
placeholder: _ctx.searchPlaceholder,
|
|
onInput: _ctx.handleInputForInput,
|
|
onChange: _ctx.handleChangeForInput,
|
|
onFocus: _ctx.handleFocusForInput,
|
|
onBlur: _ctx.handleBlurForInput,
|
|
onEscape: _ctx.blur,
|
|
tabindex: _ctx.tabindex,
|
|
autofocus: _ctx.autofocus || (_ctx.taggable && _ctx.searchable)
|
|
}, {
|
|
append: vue.withCtx(() => [
|
|
vue.withDirectives(vue.createVNode("span", _hoisted_7, [
|
|
_hoisted_8,
|
|
_hoisted_9,
|
|
_hoisted_10
|
|
], 512 /* NEED_PATCH */), [
|
|
[vue.vShow, _ctx.loading]
|
|
])
|
|
]),
|
|
_: 1 /* STABLE */
|
|
}, 8 /* PROPS */, ["modelValue", "disabled", "placeholder", "onInput", "onChange", "onFocus", "onBlur", "onEscape", "tabindex", "autofocus"])), [
|
|
[vue.vShow, _ctx.isFocusing]
|
|
])
|
|
: vue.createCommentVNode("v-if", true),
|
|
vue.withDirectives(vue.createVNode(_component_v_dropdown, {
|
|
modelValue: _ctx.optionsWithInfo,
|
|
"onUpdate:modelValue": _cache[8] || (_cache[8] = $event => (_ctx.optionsWithInfo = $event)),
|
|
onClick: _ctx.addOrRemoveOption,
|
|
onMousemove: _cache[9] || (_cache[9] = (ev, option, index) => _ctx.pointerSet(index)),
|
|
"header-height": _ctx.headerAndInputHeight
|
|
}, {
|
|
default: vue.withCtx(({ option }) => [
|
|
vue.renderSlot(_ctx.$slots, "dropdown-item", {
|
|
option: option.originalOption
|
|
}, () => [
|
|
vue.createVNode("span", null, vue.toDisplayString(option.label), 1 /* TEXT */)
|
|
])
|
|
]),
|
|
_: 1 /* STABLE */
|
|
}, 8 /* PROPS */, ["modelValue", "onClick", "header-height"]), [
|
|
[vue.vShow, _ctx.isFocusing]
|
|
])
|
|
], 16 /* FULL_PROPS */, ["tabindex"]))
|
|
}
|
|
|
|
VueSelect.render = render;
|
|
VueSelect.__file = "src/index.vue";
|
|
|
|
return VueSelect;
|
|
|
|
}(Vue));
|