@vuesax-alpha/nightly
Version:
A Component Library for Vue 3
488 lines (483 loc) • 23 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var core = require('@vueuse/core');
var lodashUnified = require('lodash-unified');
require('../../../directives/index.js');
require('../../../constants/index.js');
var index$5 = require('../../icon/index.js');
var index$6 = require('../../collapse-transition/index.js');
var index$4 = require('../../scrollbar/index.js');
var index$2 = require('../../popper/index.js');
var iconsVue = require('@vuesax-alpha/icons-vue');
require('../../../hooks/index.js');
require('../../../utils/index.js');
var option = require('./option2.js');
var chip = require('./chip2.js');
var tokens = require('./tokens.js');
var select = require('./select.js');
var useSelect = require('./useSelect.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-namespace/index.js');
var index$1 = require('../../../hooks/use-common-props/index.js');
var color = require('../../../utils/color.js');
var event = require('../../../constants/event.js');
var index$3 = require('../../../hooks/use-base-component/index.js');
var index$7 = require('../../../directives/click-outside/index.js');
const _hoisted_1 = ["placeholder", "disabled"];
const _hoisted_2 = ["id", "readonly"];
const _hoisted_3 = ["for"];
const __default__ = vue.defineComponent({
name: "VsSelect",
inheritAttrs: false
});
const _sfc_main = vue.defineComponent({
...__default__,
props: select.selectProps,
emits: select.selectEmits,
setup(__props, { expose: __expose, emit }) {
const props = __props;
const messageTypes = ["success", "warn", "danger", "primary", "dark"];
const ns = index.useNamespace("select");
const states = useSelect.useSelectStates(props);
const color$1 = index$1.useColor("primary");
const colorCssVar = vue.computed(
() => ns.cssVar({
color: color.getVsColor(color$1.value)
})
);
const optionsAnimation = vue.computed(() => ns.b());
const {
showNewOption,
debouncedQueryChange,
managePlaceholder,
deletePrevTag,
deleteTag,
handleClearClick,
showClose,
inputId,
emptyText,
readonly,
input,
reference,
showTagList,
collapseTagList,
chips,
popperRef,
selectDisabled,
selectWrapper,
handleMouseEnter,
handleMouseLeave,
handleTarget,
selectOption,
handleComposition,
navigateOptions,
handleKeydownEscape,
dropMenuVisible,
debouncedOnInputChange,
handleFocus,
handleBlur,
toggleMenu,
handleMenuEnter,
handleResize,
setSelected,
handleClose,
onOptionCreate,
onOptionDestroy,
handleOptionSelect,
focus,
blur,
processBeforeOpen,
processBeforeClose,
queryChange,
optionsArray,
cachedOptionsArray,
selectedArray
} = useSelect.useSelect(props, states, emit);
const { visible, hoverIndex, query } = core.toRefs(states);
const popperPaneRef = vue.computed(() => {
var _a;
return core.unrefElement((_a = popperRef.value) == null ? void 0 : _a.contentRef);
});
if (props.multiple && !Array.isArray(props.modelValue)) {
emit(event.UPDATE_MODEL_EVENT, []);
}
if (!props.multiple && Array.isArray(props.modelValue)) {
emit(event.UPDATE_MODEL_EVENT, "");
}
const selectKls = vue.computed(() => {
var _a, _b;
return [
ns.is("block", props.block),
ns.b(),
ns.em("state", props.state),
ns.is("open", dropMenuVisible.value),
ns.is("hovering", states.mouseEnter),
ns.is("focus", states.softFocus),
ns.is("disabled", selectDisabled.value),
ns.is("multiple", props.multiple),
ns.is("loading", props.loading),
ns.is((_b = (_a = popperRef.value) == null ? void 0 : _a.popperPlacement) != null ? _b : "bottom"),
{ [ns.m("has-label")]: props.label || props.labelFloat }
];
});
const selectStyle = vue.computed(() => [colorCssVar.value]);
vue.onMounted(() => {
states.cachedPlaceHolder = states.currentPlaceholder = props.placeholder;
if (props.multiple && Array.isArray(props.modelValue) && props.modelValue.length > 0) {
states.currentPlaceholder = "";
}
core.useResizeObserver(selectWrapper, handleResize);
setSelected();
});
vue.provide(
tokens.selectContextKey,
vue.reactive({
multiple: vue.toRef(props, "multiple"),
multipleLimit: vue.toRef(props, "multipleLimit"),
states,
queryChange,
hoverIndex,
selectWrapper,
selectedArray,
optionsArray,
cachedOptionsArray,
handleTarget,
setSelected,
handleOptionSelect
})
);
vue.provide(tokens.selectRegisterKey, (option) => {
option.index = states.optionsCount;
onOptionCreate(option.value, option);
return {
updateOption: (newOption) => {
onOptionDestroy(option.value, option);
onOptionCreate(newOption.value, newOption);
},
unregister: () => {
const doesSelected = selectedArray.value.some(
(e) => e.value == option.value
);
vue.nextTick(() => {
if (states.cachedOptions.get(option.value) === option && !doesSelected) {
states.cachedOptions.delete(option.value);
}
});
onOptionDestroy(option.value, option);
}
};
});
__expose({
focus,
blur
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(index$2.VsPopper), {
ref_key: "popperRef",
ref: popperRef,
visible: vue.unref(dropMenuVisible),
"onUpdate:visible": _cache[36] || (_cache[36] = ($event) => vue.isRef(dropMenuVisible) ? dropMenuVisible.value = $event : null),
trigger: "click",
placement: "bottom",
persistent: "",
animation: optionsAnimation.value,
flip: _ctx.flip,
fit: _ctx.fit,
"hide-after": _ctx.hideAfter,
"show-after": _ctx.showAfter,
loading: _ctx.loading,
disabled: _ctx.disabled,
"on-blur": _ctx.onBlur,
"on-focus": _ctx.onFocus,
"on-click": _ctx.onClick,
"on-contextmenu": _ctx.onContextmenu,
"on-mouseenter": _ctx.onMouseenter,
"on-mouseleave": _ctx.onMouseleave,
"on-keydown": _ctx.onKeydown,
teleported: _ctx.teleported,
strategy: _ctx.strategy,
"popper-class": [vue.unref(ns).e("content"), vue.unref(index$3.useVuesaxBaseComponent)(vue.unref(color$1))],
"popper-style": colorCssVar.value,
"show-arrow": false,
offset: 0,
"process-before-open": vue.unref(processBeforeOpen),
"process-before-close": vue.unref(processBeforeClose),
onShow: vue.unref(handleMenuEnter)
}, {
content: vue.withCtx(() => [
vue.withDirectives(vue.createVNode(vue.unref(index$4.VsScrollbar), {
"max-height": "200",
thickness: "3",
"wrap-class": [
vue.unref(ns).e("options"),
vue.unref(ns).is(
"empty",
!_ctx.allowCreate && Boolean(vue.unref(query)) && vue.unref(states).filteredOptionsCount === 0
)
],
native: _ctx.nativeScrollbar,
onMouseleave: _cache[35] || (_cache[35] = ($event) => hoverIndex.value = -1)
}, {
default: vue.withCtx(() => [
vue.unref(showNewOption) ? (vue.openBlock(), vue.createBlock(option["default"], {
key: 0,
value: vue.unref(query),
created: true
}, null, 8, ["value"])) : vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["wrap-class", "native"]), [
[vue.vShow, vue.unref(states).options.size > 0 && !_ctx.loading]
]),
vue.unref(emptyText) && (!_ctx.allowCreate || _ctx.loading || _ctx.allowCreate && vue.unref(states).options.size === 0) ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
_ctx.$slots.empty ? vue.renderSlot(_ctx.$slots, "empty", { key: 0 }) : (vue.openBlock(), vue.createElementBlock(
"p",
{
key: 1,
class: vue.normalizeClass(vue.unref(ns).em("options", "empty"))
},
vue.toDisplayString(vue.unref(emptyText)),
3
))
],
64
)) : vue.createCommentVNode("v-if", true)
]),
default: vue.withCtx(() => {
var _a;
return [
vue.withDirectives((vue.openBlock(), vue.createElementBlock(
"div",
{
ref_key: "selectWrapper",
ref: selectWrapper,
class: vue.normalizeClass(selectKls.value),
style: vue.normalizeStyle(selectStyle.value),
onMouseenter: _cache[32] || (_cache[32] = (...args) => vue.unref(handleMouseEnter) && vue.unref(handleMouseEnter)(...args)),
onMouseleave: _cache[33] || (_cache[33] = (...args) => vue.unref(handleMouseLeave) && vue.unref(handleMouseLeave)(...args)),
onClick: _cache[34] || (_cache[34] = (...args) => vue.unref(toggleMenu) && vue.unref(toggleMenu)(...args))
},
[
_ctx.multiple ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
ref_key: "chips",
ref: chips,
class: vue.normalizeClass([vue.unref(ns).e("chips")])
},
[
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(vue.unref(showTagList), (item, cIndex) => {
return vue.openBlock(), vue.createBlock(chip["default"], {
key: cIndex + "chip",
shape: _ctx.shape,
disabled: vue.unref(selectDisabled) || item.isDisabled,
hit: item.hit,
onClose: ($event) => vue.unref(deleteTag)(item.value)
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(item.currentLabel),
1
)
]),
_: 2
}, 1032, ["shape", "disabled", "hit", "onClose"]);
}),
128
)),
_ctx.collapseChips && vue.unref(selectedArray).length > _ctx.maxCollapseChips ? (vue.openBlock(), vue.createBlock(chip["default"], {
key: 0,
"show-close": false,
shape: _ctx.shape,
hit: vue.unref(collapseTagList).some((item) => item.hit)
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
" + " + vue.toDisplayString(vue.unref(selectedArray).length - _ctx.maxCollapseChips),
1
)
]),
_: 1
}, 8, ["shape", "hit"])) : vue.createCommentVNode("v-if", true),
_ctx.filter && !vue.unref(selectDisabled) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
key: 1,
ref_key: "input",
ref: input,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(query) ? query.value = $event : null),
type: "text",
class: vue.normalizeClass([
vue.unref(ns).e("input-filter"),
vue.unref(ns).is("disabled", vue.unref(selectDisabled)),
vue.unref(ns).be("chips", "input")
]),
placeholder: vue.unref(states).selectedLabel ? "" : (_a = vue.unref(states).query) != null ? _a : "",
disabled: vue.unref(selectDisabled),
onFocus: _cache[1] || (_cache[1] = (...args) => vue.unref(handleFocus) && vue.unref(handleFocus)(...args)),
onBlur: _cache[2] || (_cache[2] = (...args) => vue.unref(handleBlur) && vue.unref(handleBlur)(...args)),
onMouseenter: _cache[3] || (_cache[3] = ($event) => vue.unref(handleTarget)("input-filter")),
onMouseleave: _cache[4] || (_cache[4] = ($event) => vue.unref(handleTarget)(null)),
onKeyup: _cache[5] || (_cache[5] = (...args) => vue.unref(managePlaceholder) && vue.unref(managePlaceholder)(...args)),
onKeydown: [
_cache[6] || (_cache[6] = vue.withKeys(vue.withModifiers(($event) => vue.unref(navigateOptions)("next"), ["prevent"]), ["down"])),
_cache[7] || (_cache[7] = vue.withKeys(vue.withModifiers(($event) => vue.unref(navigateOptions)("prev"), ["prevent"]), ["up"])),
_cache[8] || (_cache[8] = vue.withKeys(
(...args) => vue.unref(handleKeydownEscape) && vue.unref(handleKeydownEscape)(...args),
["esc"]
)),
_cache[9] || (_cache[9] = vue.withKeys(vue.withModifiers(
(...args) => vue.unref(selectOption) && vue.unref(selectOption)(...args),
["stop", "prevent"]
), ["enter"])),
_cache[10] || (_cache[10] = vue.withKeys(
(...args) => vue.unref(deletePrevTag) && vue.unref(deletePrevTag)(...args),
["delete"]
)),
_cache[11] || (_cache[11] = vue.withKeys(($event) => visible.value = false, ["tab"]))
],
onCompositionstart: _cache[12] || (_cache[12] = (...args) => vue.unref(handleComposition) && vue.unref(handleComposition)(...args)),
onCompositionupdate: _cache[13] || (_cache[13] = (...args) => vue.unref(handleComposition) && vue.unref(handleComposition)(...args)),
onCompositionend: _cache[14] || (_cache[14] = (...args) => vue.unref(handleComposition) && vue.unref(handleComposition)(...args)),
onInput: _cache[15] || (_cache[15] = (...args) => vue.unref(debouncedQueryChange) && vue.unref(debouncedQueryChange)(...args))
}, null, 42, _hoisted_1)), [
[vue.vModelText, vue.unref(query)]
]) : vue.createCommentVNode("v-if", true)
],
2
)) : vue.createCommentVNode("v-if", true),
vue.withDirectives(vue.createElementVNode("input", {
id: vue.unref(inputId),
ref_key: "reference",
ref: reference,
"onUpdate:modelValue": _cache[16] || (_cache[16] = ($event) => vue.unref(states).selectedLabel = $event),
class: vue.normalizeClass([vue.unref(ns).e("input"), vue.unref(ns).is("multiple", _ctx.multiple)]),
readonly: vue.unref(readonly),
onFocus: _cache[17] || (_cache[17] = (...args) => vue.unref(handleFocus) && vue.unref(handleFocus)(...args)),
onBlur: _cache[18] || (_cache[18] = (...args) => vue.unref(handleBlur) && vue.unref(handleBlur)(...args)),
onMouseenter: _cache[19] || (_cache[19] = ($event) => vue.unref(handleTarget)("input-filter", !vue.unref(readonly))),
onMouseleave: _cache[20] || (_cache[20] = ($event) => vue.unref(handleTarget)(null)),
onInput: _cache[21] || (_cache[21] = (...args) => vue.unref(debouncedOnInputChange) && vue.unref(debouncedOnInputChange)(...args)),
onPaste: _cache[22] || (_cache[22] = (...args) => vue.unref(debouncedOnInputChange) && vue.unref(debouncedOnInputChange)(...args)),
onCompositionstart: _cache[23] || (_cache[23] = (...args) => vue.unref(handleComposition) && vue.unref(handleComposition)(...args)),
onCompositionupdate: _cache[24] || (_cache[24] = (...args) => vue.unref(handleComposition) && vue.unref(handleComposition)(...args)),
onCompositionend: _cache[25] || (_cache[25] = (...args) => vue.unref(handleComposition) && vue.unref(handleComposition)(...args)),
onKeydown: [
_cache[26] || (_cache[26] = vue.withKeys(vue.withModifiers(($event) => vue.unref(navigateOptions)("next"), ["prevent"]), ["down"])),
_cache[27] || (_cache[27] = vue.withKeys(vue.withModifiers(($event) => vue.unref(navigateOptions)("prev"), ["prevent"]), ["up"])),
_cache[28] || (_cache[28] = vue.withKeys(vue.withModifiers(
(...args) => vue.unref(selectOption) && vue.unref(selectOption)(...args),
["prevent"]
), ["enter"])),
_cache[29] || (_cache[29] = vue.withKeys(
(...args) => vue.unref(handleKeydownEscape) && vue.unref(handleKeydownEscape)(...args),
["esc"]
)),
_cache[30] || (_cache[30] = vue.withKeys(($event) => vue.unref(states).visible = false, ["tab"]))
]
}, null, 42, _hoisted_2), [
[vue.vModelText, vue.unref(states).selectedLabel]
]),
_ctx.label ? (vue.openBlock(), vue.createElementBlock("label", {
key: 1,
for: vue.unref(inputId),
class: vue.normalizeClass([
vue.unref(ns).e("label"),
vue.unref(ns).is(
"placeholder",
_ctx.labelFloat && !vue.unref(dropMenuVisible) && (vue.unref(lodashUnified.isEqual)(_ctx.modelValue, _ctx.notValue) || !_ctx.modelValue && _ctx.modelValue != 0)
)
])
}, vue.toDisplayString(_ctx.label), 11, _hoisted_3)) : vue.createCommentVNode("v-if", true),
!_ctx.multiple && !_ctx.labelFloat && vue.unref(states).currentPlaceholder ? (vue.openBlock(), vue.createElementBlock(
"span",
{
key: 2,
class: vue.normalizeClass([vue.unref(ns).e("placeholder"), vue.unref(ns).is("hidden", !!_ctx.modelValue)])
},
vue.toDisplayString(vue.unref(states).currentPlaceholder),
3
)) : vue.createCommentVNode("v-if", true),
_ctx.loading ? (vue.openBlock(), vue.createBlock(vue.unref(index$5.IconLoading), {
key: 3,
class: "vs-select__loading"
})) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(index$5.VsIcon), {
class: vue.normalizeClass(vue.unref(ns).e("arrow")),
size: "14"
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(iconsVue.ChevronDown))
]),
_: 1
}, 8, ["class"]),
vue.createVNode(vue.Transition, { name: "v-clearable" }, {
default: vue.withCtx(() => [
vue.unref(showClose) ? (vue.openBlock(), vue.createElementBlock(
"span",
{
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("clearable")),
onClick: _cache[31] || (_cache[31] = (...args) => vue.unref(handleClearClick) && vue.unref(handleClearClick)(...args))
},
[
vue.createVNode(vue.unref(index$5.IconClose), {
hover: "less",
scale: "0.675"
})
],
2
)) : vue.createCommentVNode("v-if", true)
]),
_: 1
}),
(vue.openBlock(), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(messageTypes, (messageType, index) => {
return vue.createVNode(
vue.unref(index$6["default"]),
{ key: index },
{
default: vue.withCtx(() => [
_ctx.$slots[`message-${messageType}`] ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass([vue.unref(ns).e("message"), vue.unref(ns).em("message", messageType)])
},
[
vue.renderSlot(_ctx.$slots, `message-${messageType}`)
],
2
)) : vue.createCommentVNode("v-if", true)
]),
_: 2
},
1024
);
}),
64
))
],
38
)), [
[vue.unref(index$7["default"]), vue.unref(handleClose), popperPaneRef.value]
])
];
}),
_: 3
}, 8, ["visible", "animation", "flip", "fit", "hide-after", "show-after", "loading", "disabled", "on-blur", "on-focus", "on-click", "on-contextmenu", "on-mouseenter", "on-mouseleave", "on-keydown", "teleported", "strategy", "popper-class", "popper-style", "process-before-open", "process-before-close", "onShow"]);
};
}
});
var Select = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/home/runner/work/vuesax-alpha/vuesax-alpha/packages/components/select/src/select.vue"]]);
exports["default"] = Select;
//# sourceMappingURL=select2.js.map