hongluan-ui
Version:
Hongluan Component Library for Vue 3
685 lines (680 loc) • 26.8 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var index = require('../../input/index.js');
var core = require('@popperjs/core');
var core$1 = require('@vueuse/core');
var index$1 = require('../../tag/index.js');
var index$3 = require('../../tooltip/index.js');
var index$2 = require('../../scrollbar/index.js');
var index$4 = require('../../icon/index.js');
require('../../system-icon/index.js');
require('../../popper/index.js');
require('../../../directives/index.js');
require('../../../utils/index.js');
require('../../../hooks/index.js');
require('../../../constants/index.js');
var useSelect = require('./useSelect.js');
var token = require('./token.js');
var option = require('./option.js');
var options = require('./options.js');
var selectDropdown = require('./select-dropdown.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var selectArrow = require('../../system-icon/src/select-arrow.js');
var close = require('../../system-icon/src/close.js');
var index$5 = require('../../../directives/click-outside/index.js');
var validator = require('../../../utils/vue/validator.js');
var content = require('../../tooltip/src/content2.js');
var index$6 = require('../../../hooks/use-aria/index.js');
var index$7 = require('../../../hooks/use-empty-values/index.js');
var event = require('../../../constants/event.js');
var index$8 = require('../../../hooks/use-locale/index.js');
var index$9 = require('../../../hooks/use-namespace/index.js');
var index$a = require('../../../hooks/use-id/index.js');
var deprecation = require('../../popper/src/deprecation.js');
const _sfc_main = vue.defineComponent({
name: "Select",
componentName: "Select",
components: {
HlInput: index.HlInput,
HlSelectMenu: selectDropdown["default"],
HlOption: option["default"],
HlOptions: options["default"],
HlTag: index$1.HlTag,
HlScrollbar: index$2.HlScrollbar,
HlTooltip: index$3.HlTooltip,
HlIcon: index$4.HlIcon,
SystemSelectArrow: selectArrow["default"],
SystemClose: close["default"]
},
directives: { ClickOutside: index$5["default"] },
props: {
name: String,
id: String,
modelValue: {
type: [Array, String, Number, Boolean, Object],
default: void 0
},
autocomplete: {
type: String,
default: "off"
},
automaticDropdown: Boolean,
size: {
type: String,
validator: validator.isValidComponentSize
},
effect: {
type: String,
default: ""
},
disabled: Boolean,
clearable: Boolean,
filterable: Boolean,
allowCreate: Boolean,
block: Boolean,
loading: Boolean,
popperClass: {
type: String,
default: ""
},
popperOptions: {
type: Object,
default: () => ({})
},
remote: Boolean,
loadingText: String,
noMatchText: String,
noDataText: String,
remoteMethod: Function,
filterMethod: Function,
multiple: Boolean,
multipleLimit: {
type: Number,
default: 0
},
placeholder: {
type: String
},
defaultFirstOption: Boolean,
reserveKeyword: {
type: Boolean,
default: true
},
valueKey: {
type: String,
default: "value"
},
collapseTags: Boolean,
collapseTagsTooltip: Boolean,
maxCollapseTags: {
type: Number,
default: 1
},
popperAppendToBody: {
type: Boolean,
default: void 0
},
teleported: content.useTooltipContentProps.teleported,
persistent: {
type: Boolean,
default: true
},
fill: Boolean,
thin: Boolean,
round: Boolean,
tagType: {
type: String,
default: ""
},
popperOffset: {
type: Number,
default: 4
},
validateEvent: {
type: Boolean,
default: true
},
remoteShowSuffix: Boolean,
suffixTransition: {
type: Boolean,
default: true
},
placement: {
type: String,
values: core.placements,
default: "bottom-start"
},
...index$6.useAriaProps(["ariaLabel"]),
...index$7.useEmptyValuesProps
},
emits: [event.UPDATE_MODEL_EVENT, event.CHANGE_EVENT, "remove-tag", "clear", "visible-change", "focus", "blur"],
setup(props, ctx) {
const { t } = index$8.useLocale();
const { namespace } = index$9.useNamespace();
const states = useSelect.useSelectStates(props);
const contentId = index$a.useId();
const {
optionList,
optionsArray,
hoverOption,
selectSize,
readonly,
handleResize,
debouncedOnInputChange,
debouncedQueryChange,
deletePrevTag,
deleteTag,
deleteSelected,
handleOptionSelect,
scrollToOption,
setSelected,
managePlaceholder,
showClose,
selectDisabled,
selectFill,
iconClass,
showIcon,
showNewOption,
emptyText,
toggleLastOptionHitState,
resetInputState,
handleComposition,
onOptionCreate,
onOptionDestroy,
handleMenuEnter,
handleFocus,
blur,
focus,
handleBlur,
handleClearClick,
handleClose,
handleKeydownEscape,
toggleMenu,
selectOption,
getValueKey,
navigateOptions,
handleDeleteTooltipTag,
dropMenuVisible,
queryChange,
groupQueryChange,
reference,
input,
tooltipRef,
tagTooltipRef,
tags,
selectWrapper,
scrollbar,
handleMouseEnter,
handleMouseLeave,
showTagList,
collapseTagList
} = useSelect.useSelect(props, states, ctx);
const {
selected,
filteredOptionsCount,
visible,
selectedLabel,
hoverIndex,
query,
inputHovering,
currentPlaceholder,
menuVisibleOnFocus,
isOnComposition,
options,
cachedOptions,
optionsCount
} = vue.toRefs(states);
vue.provide(token.selectKey, vue.reactive({
props,
options,
optionsArray,
cachedOptions,
optionsCount,
filteredOptionsCount,
hoverIndex,
handleOptionSelect,
onOptionCreate,
onOptionDestroy,
selectWrapper,
selected,
setSelected,
queryChange,
groupQueryChange
}));
vue.onMounted(() => {
var _a;
states.cachedPlaceHolder = currentPlaceholder.value = props.placeholder || (() => t("hl.select.placeholder"));
if (props.multiple && Array.isArray(props.modelValue) && props.modelValue.length > 0) {
currentPlaceholder.value = "";
}
core$1.useResizeObserver(selectWrapper, handleResize);
if ((_a = reference.value) == null ? void 0 : _a.$el) {
}
if (props.remote && props.multiple) {
}
vue.nextTick(() => {
var _a2;
if ((_a2 = reference.value) == null ? void 0 : _a2.$el) {
}
if (ctx.slots.prefix) {
}
});
setSelected();
});
if (props.multiple && !Array.isArray(props.modelValue)) {
ctx.emit(event.UPDATE_MODEL_EVENT, []);
}
if (!props.multiple && Array.isArray(props.modelValue)) {
ctx.emit(event.UPDATE_MODEL_EVENT, "");
}
const popperPaneRef = vue.computed(() => {
var _a, _b;
return (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
});
const { compatTeleported } = deprecation.useDeprecateAppendToBody("Select", "popperAppendToBody");
const onOptionsRendered = (v) => {
optionList.value = v;
};
return {
namespace,
onOptionsRendered,
compatTeleported,
selectSize,
readonly,
handleResize,
debouncedOnInputChange,
debouncedQueryChange,
deletePrevTag,
deleteTag,
handleDeleteTooltipTag,
deleteSelected,
handleOptionSelect,
scrollToOption,
selected,
filteredOptionsCount,
visible,
selectedLabel,
hoverIndex,
query,
inputHovering,
currentPlaceholder,
menuVisibleOnFocus,
isOnComposition,
options,
managePlaceholder,
showClose,
selectDisabled,
selectFill,
iconClass,
showIcon,
showNewOption,
emptyText,
toggleLastOptionHitState,
resetInputState,
handleComposition,
handleMenuEnter,
handleFocus,
handleKeydownEscape,
blur,
handleBlur,
handleClearClick,
handleClose,
toggleMenu,
selectOption,
getValueKey,
navigateOptions,
dropMenuVisible,
focus,
reference,
input,
tooltipRef,
popperPaneRef,
tags,
selectWrapper,
scrollbar,
handleMouseEnter,
handleMouseLeave,
showTagList,
collapseTagList,
tagTooltipRef,
contentId,
hoverOption
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_hl_tag = vue.resolveComponent("hl-tag");
const _component_hl_tooltip = vue.resolveComponent("hl-tooltip");
const _component_system_select_arrow = vue.resolveComponent("system-select-arrow");
const _component_hl_icon = vue.resolveComponent("hl-icon");
const _component_system_close = vue.resolveComponent("system-close");
const _component_hl_input = vue.resolveComponent("hl-input");
const _component_hl_option = vue.resolveComponent("hl-option");
const _component_hl_options = vue.resolveComponent("hl-options");
const _component_hl_scrollbar = vue.resolveComponent("hl-scrollbar");
const _component_hl_select_menu = vue.resolveComponent("hl-select-menu");
const _directive_click_outside = vue.resolveDirective("click-outside");
return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
ref: "selectWrapper",
class: vue.normalizeClass([
_ctx.namespace + "-input-select",
_ctx.selectSize,
_ctx.block ? "block" : ""
]),
onMouseenter: _ctx.handleMouseEnter,
onMouseleave: _ctx.handleMouseLeave,
onClick: vue.withModifiers(_ctx.toggleMenu, ["stop"])
}, [
vue.createVNode(_component_hl_tooltip, {
ref: "tooltipRef",
visible: _ctx.dropMenuVisible,
placement: _ctx.placement,
teleported: _ctx.compatTeleported,
offset: _ctx.popperOffset,
"popper-class": `${_ctx.namespace}-select-popper ${_ctx.popperClass}`,
"popper-options": _ctx.popperOptions,
"fallback-placements": ["bottom-start", "top-start", "right", "left"],
effect: _ctx.effect,
trigger: "click",
transition: "dropdown",
persistent: _ctx.persistent,
"show-arrow": false,
"stop-popper-mouse-event": false,
"gpu-acceleration": false,
onShow: _ctx.handleMenuEnter
}, {
default: vue.withCtx(() => {
var _a;
return [
vue.createElementVNode("div", {
class: "select-trigger",
onMouseenter: ($event) => _ctx.inputHovering = true,
onMouseleave: ($event) => _ctx.inputHovering = false
}, [
vue.createVNode(_component_hl_input, {
id: _ctx.id,
ref: "reference",
modelValue: _ctx.selectedLabel,
"onUpdate:modelValue": ($event) => _ctx.selectedLabel = $event,
"native-type": "text",
placeholder: typeof _ctx.currentPlaceholder === "function" ? _ctx.currentPlaceholder() : _ctx.currentPlaceholder,
name: _ctx.name,
autocomplete: _ctx.autocomplete,
size: _ctx.selectSize,
fill: _ctx.selectFill,
thin: _ctx.thin,
round: _ctx.round,
disabled: _ctx.selectDisabled,
readonly: _ctx.readonly,
"validate-event": false,
label: _ctx.ariaLabel,
"aria-autocomplete": "none",
"aria-haspopup": "listbox",
class: vue.normalizeClass({
"is-focus": _ctx.visible,
"is-tags": _ctx.selected.length,
"is-remote": !_ctx.showIcon
}),
tabindex: _ctx.multiple && _ctx.filterable ? "-1" : null,
role: "combobox",
"aria-activedescendant": ((_a = _ctx.hoverOption) == null ? void 0 : _a.id) || "",
"aria-controls": _ctx.contentId,
"aria-expanded": _ctx.dropMenuVisible,
onFocus: _ctx.handleFocus,
onBlur: _ctx.handleBlur,
onInput: _ctx.debouncedOnInputChange,
onPaste: _ctx.debouncedOnInputChange,
onCompositionstart: _ctx.handleComposition,
onCompositionupdate: _ctx.handleComposition,
onCompositionend: _ctx.handleComposition,
onKeydown: [
vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("next"), ["stop", "prevent"]), ["down"]),
vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("prev"), ["stop", "prevent"]), ["up"]),
vue.withKeys(vue.withModifiers(_ctx.selectOption, ["stop", "prevent"]), ["enter"]),
vue.withKeys(_ctx.handleKeydownEscape, ["esc"]),
vue.withKeys(($event) => _ctx.visible = false, ["tab"])
]
}, vue.createSlots({
suffix: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "suffix", {
className: `${_ctx.iconClass} ${!_ctx.showClose && _ctx.showIcon ? "visible" : ""}`
}, () => [
vue.createVNode(_component_hl_icon, {
class: vue.normalizeClass([_ctx.iconClass, !_ctx.showClose && _ctx.showIcon ? "visible" : ""])
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_system_select_arrow)
]),
_: 1
}, 8, ["class"])
]),
vue.renderSlot(_ctx.$slots, "clear", {}, () => [
vue.createVNode(_component_hl_icon, {
class: vue.normalizeClass(["select-close", _ctx.showClose && "visible"]),
onClick: _ctx.handleClearClick
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_system_close)
]),
_: 1
}, 8, ["class", "onClick"])
])
]),
_: 2
}, [
_ctx.multiple ? {
name: "tags",
fn: vue.withCtx(() => [
vue.withDirectives(vue.createElementVNode("div", {
ref: "tags",
tabindex: "-1",
class: vue.normalizeClass(["input-tags", _ctx.selectDisabled ? "is-disabled" : ""]),
onClick: _ctx.focus
}, [
_ctx.collapseTags && _ctx.selected.length ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.showTagList, (item) => {
return vue.openBlock(), vue.createBlock(_component_hl_tag, {
key: _ctx.getValueKey(item),
closable: !_ctx.selectDisabled && !item.isDisabled,
active: item.hitState,
"disable-transitions": "",
size: _ctx.selectSize,
type: _ctx.tagType,
onClose: ($event) => _ctx.deleteTag($event, item)
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(item.currentLabel), 1)
]),
_: 2
}, 1032, ["closable", "active", "size", "type", "onClose"]);
}), 128)),
_ctx.selected.length > _ctx.maxCollapseTags ? (vue.openBlock(), vue.createBlock(_component_hl_tag, {
key: 0,
closable: false,
"disable-transitions": "",
size: _ctx.selectSize,
type: _ctx.tagType
}, {
default: vue.withCtx(() => [
_ctx.collapseTagsTooltip ? (vue.openBlock(), vue.createBlock(_component_hl_tooltip, {
key: 0,
ref: "tagTooltipRef",
disabled: _ctx.dropMenuVisible,
"fallback-placements": ["bottom", "top", "right", "left"],
effect: _ctx.effect,
placement: "bottom",
teleported: false,
"popper-class": `collapse-tags-popper`
}, {
default: vue.withCtx(() => [
vue.createTextVNode(" + " + vue.toDisplayString(_ctx.selected.length - _ctx.maxCollapseTags), 1)
]),
content: vue.withCtx(() => [
vue.createElementVNode("div", { class: "collapse-tags" }, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.collapseTagList, (item) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: _ctx.getValueKey(item),
class: "collapse-tag"
}, [
(vue.openBlock(), vue.createBlock(_component_hl_tag, {
key: _ctx.getValueKey(item),
class: "in-tooltip",
closable: !_ctx.selectDisabled && !item.isDisabled,
size: _ctx.selectSize,
hit: item.hitState,
type: _ctx.tagType,
"disable-transitions": "",
onClose: ($event) => _ctx.handleDeleteTooltipTag($event, item)
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(item.currentLabel), 1)
]),
_: 2
}, 1032, ["closable", "size", "hit", "type", "onClose"]))
]);
}), 128))
])
]),
_: 1
}, 8, ["disabled", "effect"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
vue.createTextVNode(" + " + vue.toDisplayString(_ctx.selected.length - _ctx.maxCollapseTags), 1)
], 2112))
]),
_: 1
}, 8, ["size", "type"])) : vue.createCommentVNode("v-if", true)
], 64)) : vue.createCommentVNode("v-if", true),
!_ctx.collapseTags ? vue.renderSlot(_ctx.$slots, "tag", {
key: 1,
items: _ctx.selected
}, () => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.selected, (item) => {
return vue.openBlock(), vue.createBlock(_component_hl_tag, {
key: _ctx.getValueKey(item),
closable: !_ctx.selectDisabled && !item.isDisabled,
active: item.hitState,
"disable-transitions": "",
size: _ctx.selectSize,
type: _ctx.tagType,
onClose: ($event) => _ctx.deleteTag($event, item)
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(item.currentLabel), 1)
]),
_: 2
}, 1032, ["closable", "active", "size", "type", "onClose"]);
}), 128))
]) : vue.createCommentVNode("v-if", true),
_ctx.filterable ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
key: 2,
ref: "input",
"onUpdate:modelValue": ($event) => _ctx.query = $event,
type: "text",
class: vue.normalizeClass([
"select-input",
_ctx.selectSize ? `is-${_ctx.selectSize}` : "",
_ctx.selectDisabled ? "is-disabled" : ""
]),
"aria-label": _ctx.ariaLabel,
disabled: _ctx.selectDisabled,
autocomplete: _ctx.autocomplete,
onFocus: _ctx.handleFocus,
onBlur: _ctx.handleBlur,
onKeyup: _ctx.managePlaceholder,
onKeydown: [
_ctx.resetInputState,
vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("next"), ["prevent"]), ["down"]),
vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("prev"), ["prevent"]), ["up"]),
vue.withKeys(_ctx.handleKeydownEscape, ["esc"]),
vue.withKeys(vue.withModifiers(_ctx.selectOption, ["stop", "prevent"]), ["enter"]),
vue.withKeys(_ctx.deletePrevTag, ["delete"]),
vue.withKeys(($event) => _ctx.visible = false, ["tab"])
],
onCompositionstart: _ctx.handleComposition,
onCompositionupdate: _ctx.handleComposition,
onCompositionend: _ctx.handleComposition,
onInput: _ctx.debouncedQueryChange
}, null, 42, ["onUpdate:modelValue", "aria-label", "disabled", "autocomplete", "onFocus", "onBlur", "onKeyup", "onKeydown", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onInput"])), [
[vue.vModelText, _ctx.query]
]) : vue.createCommentVNode("v-if", true)
], 10, ["onClick"]), [
[vue.vShow, _ctx.selected.length]
])
])
} : void 0,
_ctx.$slots.prefix ? {
name: "prefix",
fn: vue.withCtx(() => [
vue.createElementVNode("div", null, [
vue.renderSlot(_ctx.$slots, "prefix")
])
])
} : void 0
]), 1032, ["id", "modelValue", "onUpdate:modelValue", "placeholder", "name", "autocomplete", "size", "fill", "thin", "round", "disabled", "readonly", "label", "class", "tabindex", "aria-activedescendant", "aria-controls", "aria-expanded", "onFocus", "onBlur", "onInput", "onPaste", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onKeydown"])
], 40, ["onMouseenter", "onMouseleave"])
];
}),
content: vue.withCtx(() => [
vue.createVNode(_component_hl_select_menu, null, vue.createSlots({
default: vue.withCtx(() => [
vue.withDirectives(vue.createVNode(_component_hl_scrollbar, {
id: _ctx.contentId,
ref: "scrollbar",
tag: "ul",
"wrap-class": "select-dropdown-wrap",
"view-class": "select-dropdown-list",
class: vue.normalizeClass({ "is-empty": !_ctx.allowCreate && Boolean(_ctx.query) && _ctx.filteredOptionsCount === 0 }),
role: "listbox",
"aria-label": _ctx.ariaLabel,
"aria-orientation": "vertical",
onAtEnd: ($event) => _ctx.$emit("at-end")
}, {
default: vue.withCtx(() => [
_ctx.showNewOption ? (vue.openBlock(), vue.createBlock(_component_hl_option, {
key: 0,
value: _ctx.query,
created: true
}, null, 8, ["value"])) : vue.createCommentVNode("v-if", true),
vue.createVNode(_component_hl_options, { onUpdateOptions: _ctx.onOptionsRendered }, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["onUpdateOptions"])
]),
_: 3
}, 8, ["id", "class", "aria-label", "onAtEnd"]), [
[vue.vShow, _ctx.options.size > 0 && !_ctx.loading]
]),
_ctx.emptyText && (!_ctx.allowCreate || _ctx.loading || _ctx.allowCreate && _ctx.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: "select-dropdown-empty"
}, vue.toDisplayString(_ctx.emptyText), 1))
], 2112)) : vue.createCommentVNode("v-if", true)
]),
_: 2
}, [
_ctx.$slots.header ? {
name: "header",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "header")
])
} : void 0,
_ctx.$slots.footer ? {
name: "footer",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "footer")
])
} : void 0
]), 1024)
]),
_: 3
}, 8, ["visible", "placement", "teleported", "offset", "popper-class", "popper-options", "effect", "persistent", "onShow"])
], 42, ["onMouseenter", "onMouseleave", "onClick"])), [
[_directive_click_outside, _ctx.handleClose, _ctx.popperPaneRef]
]);
}
var Select = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
exports["default"] = Select;
//# sourceMappingURL=select.js.map