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