@opentiny/vue-base-select
Version:
952 lines (948 loc) • 47.4 kB
JavaScript
import { renderless, api } from '@opentiny/vue-renderless/select/vue';
import { defineComponent, directive, props, setup } from '@opentiny/vue-common';
import Tag from '@opentiny/vue-tag';
import Input from '@opentiny/vue-input';
import Option from '@opentiny/vue-option';
import Scrollbar from '@opentiny/vue-scrollbar';
import SelectDropdown from '@opentiny/vue-select-dropdown';
import { Clickoutside } from '@opentiny/vue-directive';
import { iconClose, iconCopy, iconHalfselect, iconCheck, iconCheckedSur, iconLoading, iconChevronRight } from '@opentiny/vue-icon';
import Tree from '@opentiny/vue-tree';
import Tooltip from '@opentiny/vue-tooltip';
import FilterBox from '@opentiny/vue-filter-box';
import RecycleScroller from '@opentiny/vue-recycle-scroller';
import { resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, mergeProps, withModifiers, createElementVNode, normalizeStyle, normalizeClass, createBlock, createCommentVNode, withCtx, createVNode, createSlots, renderSlot, createTextVNode, toDisplayString, Fragment, renderList, withKeys, vModelText, resolveDynamicComponent, vShow, Transition } from 'vue';
function _createForOfIteratorHelperLoose(r, e) {
var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (t) return (t = t.call(r)).next.bind(t);
if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
t && (r = t);
var o = 0;
return function() {
return o >= r.length ? { done: true } : { done: false, value: r[o++] };
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
var _export_sfc = function _export_sfc2(sfc, props) {
var target = sfc.__vccOpts || sfc;
for (var _iterator = _createForOfIteratorHelperLoose(props), _step; !(_step = _iterator()).done; ) {
var _step$value = _step.value, key = _step$value[0], val = _step$value[1];
target[key] = val;
}
return target;
};
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function(n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
var classes = {
"caret": "text-base rotate-0 transition-transform duration-300 fill-color-text-placeholder cursor-pointer ",
"select-tags": "absolute leading-normal whitespace-normal sm:pl-3 pr-2 z-[1] top-1/2 -translate-y-2/4 flex items-center flex-wrap [&_[data-tag=tiny-tag]]:my-0.5 [&_[data-tag=tiny-tag]]:h-7 [&_[data-tag=tiny-tag]]:sm:h-5 [&_[data-tag=tiny-tag]_svg]:shrink-0",
"tags-text": "inline-block w-full whitespace-nowrap text-ellipsis overflow-hidden align-bottom",
"tag-info": "whitespace-nowrap text-ellipsis overflow-hidden inline-flex justify-start items-center border-transparent text-color-text-primary"
};
var getReference = function getReference2(el, binding, vnode) {
var _ref = binding.expression ? binding.value : binding.arg;
var popper = vnode.context.$refs[_ref];
if (popper) {
if (Array.isArray(popper)) {
popper[0].$refs.reference = el;
} else {
popper.$refs.reference = el;
}
}
};
var _sfc_main = defineComponent({
inheritAttrs: false,
emits: ["update:modelValue", "change", "focus", "blur", "clear", "remove-tag", "visible-change", "handleDropdownClick", "dropdown-click", "confirm"],
directives: directive({
Clickoutside,
popover: {
bind: function bind(el, binding, vnode) {
getReference(el, binding, vnode);
},
inserted: function inserted(el, binding, vnode) {
getReference(el, binding, vnode);
}
}
}),
components: {
TinyTag: Tag,
TinyInput: Input,
TinyOption: Option,
TinyTree: Tree,
TinyScrollbar: Scrollbar,
TinyFilterBox: FilterBox,
TinyTooltip: Tooltip,
IconClose: iconClose(),
IconCopy: iconCopy(),
TinySelectDropdown: SelectDropdown,
IconHalfselect: iconHalfselect(),
IconCheck: iconCheck(),
IconCheckedSur: iconCheckedSur(),
IconLoading: iconLoading(),
IconChevronRight: iconChevronRight(),
TinyRecycleScroller: RecycleScroller
},
props: [].concat(props, ["id", "multiple", "name", "dataset", "readonly", "tabindex", "dropStyle", "valueField", "textField", "copyable", "size", "options", "showCheck", "showAlloption", "showProportion", "hideDrop", "modelValue", "showOverflowTooltip", "remote", "remoteConfig", "placement", "loading", "disabled", "valueKey", "clearable", "noDataText", "filterable", "loadingText", "noMatchText", "popperClass", "allowCreate", "placeholder", "remoteMethod", "filterMethod", "collapseTags", "autocomplete", "multipleLimit", "reserveKeyword", "automaticDropdown", "defaultFirstOption", "popperAppendToBody", "showDropdown", "expandTags", "renderType", "gridOp", "treeOp", "delay", "cacheOp", "isDropInheritWidth", "tagSelectable", "selectConfig", "radioConfig", "allowCopy", "textSplit", "autoClose", "queryDebounce", "ignoreEnter", "dropdownIcon", "disabledTooltipContent", "hoverExpand", "optimization", "displayOnly", "initQuery", "extraQueryParams", "shape", "label", "tip", "updateDelay", "showTips", "popperOptions", "title", "closeByMask", "searchPlaceholder", "blank", "allText"]),
setup: function setup$1(props2, context) {
return setup({
props: props2,
context,
renderless,
api,
classes
});
}
});
var _hoisted_1 = {
key: 1,
ref: "tags-content",
class: "sm:contents hidden"
};
var _hoisted_2 = {
class: "inline-block w-full whitespace-nowrap text-ellipsis overflow-hidden text-color-text-disabled"
};
var _hoisted_3 = {
key: 0
};
var _hoisted_4 = {
key: 1
};
var _hoisted_5 = ["disabled", "autocomplete"];
var _hoisted_6 = {
key: 1
};
var _hoisted_7 = {
key: 0
};
var _hoisted_8 = {
key: 1,
class: "py-2.5 px-0 m-0 text-center text-color-text-secondary text-xs"
};
var _hoisted_9 = {
key: 1,
class: "text-center py-2.5 px-0"
};
var _hoisted_10 = {
key: 0,
class: "py-2.5 px-0 m-0 text-center text-color-text-secondary text-xs"
};
var _hoisted_11 = /* @__PURE__ */ createElementVNode(
"input",
{
disabled: ""
},
null,
-1
/* HOISTED */
);
var _hoisted_12 = [_hoisted_11];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
var _component_tiny_filter_box = resolveComponent("tiny-filter-box");
var _component_tiny_tooltip = resolveComponent("tiny-tooltip");
var _component_tiny_tag = resolveComponent("tiny-tag");
var _component_icon_copy = resolveComponent("icon-copy");
var _component_icon_close = resolveComponent("icon-close");
var _component_icon_chevron_right = resolveComponent("icon-chevron-right");
var _component_tiny_input = resolveComponent("tiny-input");
var _component_tiny_tree = resolveComponent("tiny-tree");
var _component_tiny_option = resolveComponent("tiny-option");
var _component_tiny_recycle_scroller = resolveComponent("tiny-recycle-scroller");
var _component_tiny_scrollbar = resolveComponent("tiny-scrollbar");
var _component_icon_loading = resolveComponent("icon-loading");
var _component_tiny_select_dropdown = resolveComponent("tiny-select-dropdown");
var _directive_popover = resolveDirective("popover");
var _directive_clickoutside = resolveDirective("clickoutside");
return withDirectives((openBlock(), createElementBlock(
"div",
mergeProps({
ref: "select",
class: ["inline-block relative w-full outline-0 group [&_[data-tag=tiny-tag]]:max-w-[144px]", [_ctx.hoverExpand ? "align-top" : "", _ctx.$parent.$attrs.class]],
onMouseleave: _cache[34] || (_cache[34] = withModifiers(function() {
_ctx.state.selectHover = false;
_ctx.state.inputHovering = false;
}, ["self"])),
onMouseenter: _cache[35] || (_cache[35] = withModifiers(function() {
_ctx.state.selectHover = true;
_ctx.state.inputHovering = true;
}, ["self"])),
onClick: _cache[36] || (_cache[36] = function() {
return _ctx.toggleMenu && _ctx.toggleMenu.apply(_ctx, arguments);
})
}, _ctx.a(_ctx.$attrs, ["class", "style"], true)),
[createElementVNode(
"div",
{
ref: "tagsGroup",
style: normalizeStyle(_ctx.state.selectFiexd),
class: normalizeClass([{
"absolute top-0 left-0 right-0": _ctx.hoverExpand
}, {
"absolute w-full": _ctx.state.isExpand && _ctx.hoverExpand
}, {
"z-[2]": _ctx.state.isExpand && _ctx.hoverExpand && (_ctx.state.inputHovering || _ctx.state.visible)
}])
},
[_ctx.shape === "filter" ? (openBlock(), createBlock(_component_tiny_filter_box, {
key: 0,
ref: "reference",
onClick: _ctx.toggleMenu,
"show-close": _ctx.clearable,
placeholder: _ctx.placeholder,
disabled: _ctx.state.selectDisabled,
label: _ctx.label,
tip: _ctx.tip,
value: _ctx.multiple ? _ctx.state.selected.map(function(item) {
return item.state ? item.state.currentLabel : item.currentLabel;
}).join("; ") : _ctx.state.selectedLabel,
"drop-down-visible": _ctx.state.visible,
blank: _ctx.blank
}, null, 8, ["onClick", "show-close", "placeholder", "disabled", "label", "tip", "value", "drop-down-visible", "blank"])) : createCommentVNode("v-if", true), _ctx.multiple && !_ctx.state.isDisplayOnly && !_ctx.shape ? (openBlock(), createElementBlock(
"div",
{
key: 1,
ref: "tags",
class: normalizeClass(_ctx.m(_ctx.gcls("select-tags"), {
"pl-9 sm:pl-9": _ctx.slots.prefix
}, {
"overflow-y-hidden": (_ctx.state.inputHovering || _ctx.state.visible) && !_ctx.state.selected.length
}, {
"h-6 overflow-hidden": _ctx.hoverExpand
}, {
"pr-6": _ctx.state.selectDisabled
}, {
"overflow-y-auto max-h-28 h-auto": _ctx.hoverExpand && (_ctx.state.inputHovering || _ctx.state.visible)
})),
style: normalizeStyle(_ctx.state.tagsStyle)
},
[!_ctx.state.selectDisabled ? (openBlock(), createElementBlock(
"span",
{
key: 0,
class: normalizeClass([_ctx.collapseTags ? _ctx.filterable && _ctx.state.device === "pc" ? "w-auto max-w-[76%] flex" : "w-full flex" : "contents"])
},
[(_ctx.collapseTags || _ctx.state.device === "mb") && _ctx.state.selectedVal.length ? (openBlock(), createElementBlock(
"span",
{
key: 0,
class: normalizeClass(["contents", _ctx.collapseTags && _ctx.filterable ? "max-w-full flex-1" : ""])
},
[(openBlock(), createBlock(_component_tiny_tag, {
closable: !_ctx.state.selectDisabled && _ctx.state.device !== "mb",
size: _ctx.state.collapseTagSize,
hit: _ctx.state.selectedVal[0].state ? _ctx.state.selectedVal[0].state.hitState : _ctx.state.selectedVal[0].hitState,
key: _ctx.state.key,
type: "info",
class: normalizeClass(_ctx.gcls("tag-info")),
onClose: _cache[1] || (_cache[1] = function($event) {
return _ctx.deleteTag($event, _ctx.state.selectedVal[0]);
}),
"disable-transitions": ""
}, {
default: withCtx(function() {
return [createVNode(
_component_tiny_tooltip,
{
effect: "light",
placement: "top",
onMouseenter: _cache[0] || (_cache[0] = function($event) {
return _ctx.handleEnterTag($event, _ctx.getValueKey(_ctx.state.selectedVal[0]));
})
},
createSlots({
default: withCtx(function() {
return [createElementVNode(
"span",
{
class: normalizeClass(_ctx.gcls("tags-text"))
},
[renderSlot(_ctx.$slots, "label", {
item: _ctx.getLabelSlotValue(_ctx.state.selectedVal[0])
}, function() {
return [createTextVNode(
toDisplayString(_ctx.state.selectedVal[0].state ? _ctx.state.selectedVal[0].state.currentLabel : _ctx.state.selectedVal[0].currentLabel),
1
/* TEXT */
)];
})],
2
/* CLASS */
)];
}),
_: 2
/* DYNAMIC */
}, [_ctx.state.tooltipContent[_ctx.getValueKey(_ctx.state.selectedVal[0])] ? {
name: "content",
fn: withCtx(function() {
return [createElementVNode(
"span",
{
class: normalizeClass(_ctx.gcls("tags-text"))
},
[renderSlot(_ctx.$slots, "label", {
item: _ctx.getLabelSlotValue(_ctx.state.selectedVal[0])
}, function() {
return [createTextVNode(
toDisplayString(_ctx.state.selectedVal[0].state ? _ctx.state.selectedVal[0].state.currentLabel : _ctx.state.selectedVal[0].currentLabel),
1
/* TEXT */
)];
})],
2
/* CLASS */
)];
}),
key: "0"
} : void 0]),
1024
/* DYNAMIC_SLOTS */
)];
}),
_: 3
/* FORWARDED */
}, 8, ["closable", "size", "hit", "class"])), _ctx.state.selectedVal.length > 1 ? (openBlock(), createBlock(_component_tiny_tag, {
key: 0,
closable: false,
size: _ctx.state.collapseTagSize,
class: normalizeClass(["overflow-visible", _ctx.gcls("tag-info")]),
type: "info",
"disable-transitions": ""
}, {
default: withCtx(function() {
return [createElementVNode(
"span",
{
class: normalizeClass(_ctx.gcls("tags-text"))
},
"+ " + toDisplayString(_ctx.state.selectedVal.length - 1),
3
/* TEXT, CLASS */
)];
}),
_: 1
/* STABLE */
}, 8, ["size", "class"])) : createCommentVNode("v-if", true)],
2
/* CLASS */
)) : createCommentVNode("v-if", true), !_ctx.collapseTags ? (openBlock(), createElementBlock(
"span",
_hoisted_1,
[_ctx.hoverExpand ? (openBlock(), createBlock(_component_tiny_tag, {
class: normalizeClass(_ctx.m(_ctx.gcls("tag-info"), {
"visible static": _ctx.hoverExpand
}, {
"invisible absolute": _ctx.hoverExpand && (_ctx.state.inputHovering || _ctx.state.visible || _ctx.state.isHidden)
})),
type: "info",
"data-tag": "tags-collapse",
key: "tags-collapse",
closable: false,
size: _ctx.state.collapseTagSize
}, {
default: withCtx(function() {
return [createTextVNode(
"+ " + toDisplayString(_ctx.state.collapseTagsLength),
1
/* TEXT */
)];
}),
_: 1
/* STABLE */
}, 8, ["class", "size"])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(
Fragment,
null,
renderList(_ctx.state.selected, function(item, index) {
return openBlock(), createBlock(_component_tiny_tag, {
key: _ctx.getValueKey(item),
closable: !item.selectDisabled && !item.required && _ctx.state.device !== "mb",
size: _ctx.state.collapseTagSize,
hit: item.state ? item.state.hitState : item.hitState,
class: normalizeClass(_ctx.gcls("tag-info")),
type: "info",
onClose: function onClose($event) {
return _ctx.deleteTag($event, item);
},
"disable-transitions": ""
}, {
default: withCtx(function() {
return [createVNode(_component_tiny_tooltip, {
effect: "light",
placement: "top",
onMouseenter: function onMouseenter($event) {
return _ctx.handleEnterTag($event, _ctx.getValueKey(item));
}
}, createSlots({
default: withCtx(function() {
return [!_ctx.state.visible && _ctx.state.overflow === index ? (openBlock(), createElementBlock(
"span",
{
key: 0,
class: normalizeClass(_ctx.gcls("tags-text"))
},
toDisplayString(item.state ? item.state.currentLabel + "... " : item.currentLabel + "... "),
3
/* TEXT, CLASS */
)) : (openBlock(), createElementBlock(
"span",
{
key: 1,
class: normalizeClass(_ctx.gcls("tags-text"))
},
[renderSlot(_ctx.$slots, "label", {
item: _ctx.getLabelSlotValue(item)
}, function() {
return [createTextVNode(
toDisplayString(item.state ? item.state.currentLabel : item.currentLabel),
1
/* TEXT */
)];
})],
2
/* CLASS */
))];
}),
_: 2
/* DYNAMIC */
}, [_ctx.state.tooltipContent[_ctx.getValueKey(item)] ? {
name: "content",
fn: withCtx(function() {
return [!_ctx.state.visible && _ctx.state.overflow === index ? (openBlock(), createElementBlock(
"span",
{
key: 0,
class: normalizeClass(_ctx.gcls("tags-text"))
},
toDisplayString(item.state ? item.state.currentLabel + "... " : item.currentLabel + "... "),
3
/* TEXT, CLASS */
)) : (openBlock(), createElementBlock(
"span",
{
key: 1,
class: normalizeClass(_ctx.gcls("tags-text"))
},
[renderSlot(_ctx.$slots, "label", {
item: _ctx.getLabelSlotValue(item)
}, function() {
return [createTextVNode(
toDisplayString(item.state ? item.state.currentLabel : item.currentLabel),
1
/* TEXT */
)];
})],
2
/* CLASS */
))];
}),
key: "0"
} : void 0]), 1032, ["onMouseenter"])];
}),
_: 2
/* DYNAMIC */
}, 1032, ["closable", "size", "hit", "class", "onClose"]);
}),
128
/* KEYED_FRAGMENT */
))],
512
/* NEED_PATCH */
)) : createCommentVNode("v-if", true)],
2
/* CLASS */
)) : (openBlock(), createElementBlock(
"span",
{
key: 1,
class: normalizeClass([_ctx.gcls("tags-text"), "flex"])
},
[createVNode(_component_tiny_tooltip, {
effect: "light",
placement: "top",
disabled: !_ctx.showTips || _ctx.state.device === "mb"
}, {
content: withCtx(function() {
return [createElementVNode(
"div",
{
class: normalizeClass([_ctx.state.showTips && "max-h-[theme(spacing.72)] overflow-x-hidden w-full", "inline-block"])
},
[_ctx.slots.label ? (openBlock(), createElementBlock("span", _hoisted_3, [(openBlock(true), createElementBlock(
Fragment,
null,
renderList(_ctx.state.selected, function(item) {
return openBlock(), createElementBlock("span", {
key: _ctx.getValueKey(item)
}, [renderSlot(_ctx.$slots, "label", {
item
})]);
}),
128
/* KEYED_FRAGMENT */
))])) : (openBlock(), createElementBlock(
"span",
_hoisted_4,
toDisplayString(_ctx.disabledTooltipContent || _ctx.state.disabledTooltipContent),
1
/* TEXT */
))],
2
/* CLASS */
)];
}),
default: withCtx(function() {
return [createElementVNode("span", _hoisted_2, [(openBlock(true), createElementBlock(
Fragment,
null,
renderList(_ctx.state.selected, function(item) {
return openBlock(), createElementBlock("span", {
key: item.value
}, [renderSlot(_ctx.$slots, "label", {
item
}, function() {
return [createTextVNode(
toDisplayString(item.state ? item.state.currentLabel : item.currentLabel),
1
/* TEXT */
)];
}), createTextVNode("; ")]);
}),
128
/* KEYED_FRAGMENT */
))])];
}),
_: 3
/* FORWARDED */
}, 8, ["disabled"])],
2
/* CLASS */
)), _ctx.filterable && !_ctx.state.selectDisabled ? withDirectives((openBlock(), createElementBlock("input", {
key: 2,
ref: "input",
"onUpdate:modelValue": _cache[2] || (_cache[2] = function($event) {
return _ctx.state.query = $event;
}),
type: "text",
class: normalizeClass(["hidden sm:inline-block border-none outline-0 p-0 ml-px text-color-text-primary text-xs h-7 appearance-none bg-transparent", [_ctx.state.selectSize === "mini" ? "h-6" : "", _ctx.state.selectSize === "small" ? "h-9" : "", _ctx.state.selectSize === "medium" ? "h-8" : ""]]),
disabled: _ctx.state.selectDisabled,
autocomplete: _ctx.autocomplete,
onFocus: _cache[3] || (_cache[3] = function() {
return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
}),
onBlur: _cache[4] || (_cache[4] = function() {
return _ctx.handleBlur && _ctx.handleBlur.apply(_ctx, arguments);
}),
onKeyup: _cache[5] || (_cache[5] = function() {
return _ctx.managePlaceholder && _ctx.managePlaceholder.apply(_ctx, arguments);
}),
onKeydown: [_cache[6] || (_cache[6] = function() {
return _ctx.resetInputState && _ctx.resetInputState.apply(_ctx, arguments);
}), _cache[7] || (_cache[7] = withKeys(withModifiers(function($event) {
return _ctx.navigateOptions("next");
}, ["prevent"]), ["down"])), _cache[8] || (_cache[8] = withKeys(withModifiers(function($event) {
return _ctx.navigateOptions("prev");
}, ["prevent"]), ["up"])), _cache[9] || (_cache[9] = withKeys(withModifiers(function() {
return _ctx.selectOption && _ctx.selectOption.apply(_ctx, arguments);
}, ["prevent"]), ["enter"])), _cache[10] || (_cache[10] = withKeys(withModifiers(function($event) {
return _ctx.state.visible = false;
}, ["stop", "prevent"]), ["esc"])), _cache[11] || (_cache[11] = withKeys(function() {
return _ctx.deletePrevTag && _ctx.deletePrevTag.apply(_ctx, arguments);
}, ["delete"])), _cache[12] || (_cache[12] = withKeys(function($event) {
return _ctx.state.visible = false;
}, ["tab"]))],
onCompositionstart: _cache[13] || (_cache[13] = function() {
return _ctx.handleComposition && _ctx.handleComposition.apply(_ctx, arguments);
}),
onCompositionupdate: _cache[14] || (_cache[14] = function() {
return _ctx.handleComposition && _ctx.handleComposition.apply(_ctx, arguments);
}),
onCompositionend: _cache[15] || (_cache[15] = function() {
return _ctx.handleComposition && _ctx.handleComposition.apply(_ctx, arguments);
}),
onInput: _cache[16] || (_cache[16] = function() {
return _ctx.debouncedQueryChange && _ctx.debouncedQueryChange.apply(_ctx, arguments);
}),
style: normalizeStyle({
"flex-grow": "1",
width: _ctx.state.inputLength / (_ctx.state.inputWidth - 32) + "%",
"max-width": _ctx.state.inputWidth - 42 + "px",
height: "auto"
})
}, null, 46, _hoisted_5)), [[vModelText, _ctx.state.query]]) : createCommentVNode("v-if", true)],
6
/* CLASS, STYLE */
)) : createCommentVNode("v-if", true), !_ctx.shape ? (openBlock(), createBlock(_component_tiny_input, {
key: 2,
ref: "reference",
modelValue: _ctx.state.selectedLabel,
"onUpdate:modelValue": _cache[19] || (_cache[19] = function($event) {
return _ctx.state.selectedLabel = $event;
}),
type: "text",
placeholder: _ctx.state.currentPlaceholder,
name: _ctx.name,
id: _ctx.id,
autocomplete: _ctx.autocomplete,
size: _ctx.state.selectSize,
disabled: _ctx.state.selectDisabled,
readonly: _ctx.state.readonly,
"display-only": _ctx.state.isDisplayOnly,
"display-only-content": _ctx.state.displayOnlyContent,
unselectable: _ctx.state.readonly ? "on" : "off",
"validate-event": false,
tabindex: _ctx.multiple && _ctx.filterable ? "-1" : _ctx.tabindex,
onFocus: _ctx.handleFocus,
onBlur: _ctx.handleBlur,
onKeyup: _ctx.debouncedOnInputChange,
onKeydown: [_cache[20] || (_cache[20] = withKeys(withModifiers(function($event) {
return _ctx.navigateOptions("next");
}, ["stop", "prevent"]), ["down"])), _cache[21] || (_cache[21] = withKeys(withModifiers(function($event) {
return _ctx.navigateOptions("prev");
}, ["stop", "prevent"]), ["up"])), withKeys(withModifiers(_ctx.selectOption, ["prevent"]), ["enter"]), _cache[22] || (_cache[22] = withKeys(withModifiers(function($event) {
return _ctx.state.visible = false;
}, ["stop", "prevent"]), ["esc"])), _cache[23] || (_cache[23] = withKeys(function($event) {
return _ctx.state.visible = false;
}, ["tab"]))],
onPaste: _ctx.debouncedOnInputChange,
onMouseenter: _ctx.onMouseenterNative,
onMouseleave: _ctx.onMouseleaveNative,
onCompositionend: _ctx.handleComposition
}, createSlots({
suffix: withCtx(function() {
return [renderSlot(_ctx.$slots, "suffix"), _ctx.state.showCopy ? (openBlock(), createElementBlock("span", {
key: 0,
class: "h-4 cursor-pointer relative z-[1]",
onClick: _cache[17] || (_cache[17] = withModifiers(function() {
return _ctx.handleCopyClick && _ctx.handleCopyClick.apply(_ctx, arguments);
}, ["stop"]))
}, [createVNode(_component_icon_copy, {
class: normalizeClass([_ctx.gcls("caret"), "align-top group-hover:fill-color-brand"])
}, null, 8, ["class"])])) : createCommentVNode("v-if", true), _ctx.showProportion && _ctx.state.selected.length > 0 && _ctx.state.options.length > 1 ? (openBlock(), createElementBlock(
"span",
_hoisted_6,
toDisplayString(_ctx.state.selected.length + "/" + _ctx.state.options.length),
1
/* TEXT */
)) : createCommentVNode("v-if", true), _ctx.state.showClose ? (openBlock(), createBlock(_component_icon_close, {
key: 2,
class: normalizeClass([_ctx.gcls("caret"), "hidden sm:inline-block", {
"mr-2 fill-color-text-placeholder hover:fill-color-icon-primary": _ctx.state.showClose
}, {
"mr-1": _ctx.multiple && _ctx.state.showClose
}]),
onClick: _ctx.handleClearClick,
onMouseenter: _cache[18] || (_cache[18] = function($event) {
return _ctx.state.inputHovering = true;
})
}, null, 8, ["class", "onClick"])) : createCommentVNode("v-if", true), withDirectives((openBlock(), createBlock(resolveDynamicComponent(_ctx.dropdownIcon), {
class: normalizeClass(_ctx.m(_ctx.gcls("caret"), "hidden sm:inline-block", _ctx.state.iconClass, {
"hidden": _ctx.state.selectDisabled
}, {
"fill-color-brand-hover rotate-180 ": _ctx.state.visible
})),
onClick: _ctx.handleDropdownClick
}, null, 8, ["class", "onClick"])), [[vShow, !(_ctx.remote && _ctx.filterable && !_ctx.remoteConfig.showIcon)]]), createVNode(_component_icon_chevron_right, {
"custom-class": "h-5 w-5 sm:h-4 sm:w-4",
class: normalizeClass(["inline-block sm:hidden", [_ctx.state.selectDisabled ? "fill-color-icon-placeholder sm:fill-color-icon-disabled" : "fill-color-icon-secondary"]])
}, null, 8, ["class"])];
}),
_: 2
/* DYNAMIC */
}, [_ctx.slots.prefix ? {
name: "prefix",
fn: withCtx(function() {
return [renderSlot(_ctx.$slots, "prefix")];
}),
key: "0"
} : void 0]), 1032, ["modelValue", "placeholder", "name", "id", "autocomplete", "size", "disabled", "readonly", "display-only", "display-only-content", "unselectable", "tabindex", "onFocus", "onBlur", "onKeyup", "onKeydown", "onPaste", "onMouseenter", "onMouseleave", "onCompositionend"])) : createCommentVNode("v-if", true), createVNode(Transition, {
onBeforeEnter: _ctx.handleMenuEnter,
onAfterLeave: _ctx.doDestroy,
persisted: ""
}, {
default: withCtx(function() {
return [withDirectives(createVNode(_component_tiny_select_dropdown, {
ref: "popper",
title: _ctx.title,
"close-by-mask": _ctx.closeByMask,
"search-placeholder": _ctx.searchPlaceholder,
"is-drop-inherit-width": _ctx.isDropInheritWidth,
placement: _ctx.placement,
"append-to-body": _ctx.popperAppendToBody,
style: normalizeStyle(_ctx.dropStyle),
"popper-options": _ctx.popperOptions,
class: normalizeClass(_ctx.m("duration-300"))
}, {
default: withCtx(function() {
return [_ctx.shape && _ctx.filterable ? (openBlock(), createElementBlock(
"div",
{
key: 0,
class: normalizeClass(["px-3 pt-3 pb-1 hidden sm:block", [_ctx.remote && !_ctx.state.options.length ? "pb-3" : ""]])
},
[createVNode(_component_tiny_input, {
ref: "input",
type: "text",
modelValue: _ctx.state.query,
"onUpdate:modelValue": _cache[24] || (_cache[24] = function($event) {
return _ctx.state.query = $event;
}),
placeholder: _ctx.placeholder,
onInput: _ctx.debouncedQueryChange,
onFocus: _ctx.handleFocus,
autofocus: ""
}, null, 8, ["modelValue", "placeholder", "onInput", "onFocus"])],
2
/* CLASS */
)) : createCommentVNode("v-if", true), _ctx.renderType === "tree" ? (openBlock(), createBlock(_component_tiny_tree, mergeProps({
key: 1,
class: "[&_[data-tag=tiny-checkbox]_>span_>span]:p-1.5 sm:[&_[data-tag=tiny-checkbox]_>span_>span]:p-0",
"filter-node-method": _ctx.filterMethod,
props: _extends({
label: _ctx.textField,
isLeaf: "isLeaf"
}, _ctx.treeOp.props),
"expand-on-click-node": false,
"icon-trigger-click-node": false,
"node-key": _ctx.valueField,
"default-expand-all": _ctx.state.isExpandAll,
"check-strictly": _ctx.treeOp.checkStrictly,
"default-checked-keys": _ctx.multiple ? _ctx.state.defaultCheckedKeys : [],
ref: "selectTree",
"current-node-key": !_ctx.multiple ? _ctx.state.currentKey : "",
"show-checkbox": _ctx.multiple,
onLoadData: _ctx.loadTreeData,
onNodeCollapse: _ctx.nodeCollapse,
onNodeExpand: _ctx.nodeExpand,
onCheck: _ctx.nodeCheckClick,
onNodeClick: _ctx.treeNodeClick,
"show-checked-mark": _ctx.state.device === "mb"
}, _ctx.treeOp), null, 16, ["filter-node-method", "props", "node-key", "default-expand-all", "check-strictly", "default-checked-keys", "current-node-key", "show-checkbox", "onLoadData", "onNodeCollapse", "onNodeExpand", "onCheck", "onNodeClick", "show-checked-mark"])) : createCommentVNode("v-if", true), _ctx.optimization && _ctx.renderType !== "tree" ? (openBlock(), createElementBlock(
"div",
{
key: 2,
style: normalizeStyle({
height: _ctx.state.optimizeStore.recycleScrollerHeight + "px"
})
},
[withDirectives((openBlock(), createBlock(_component_tiny_recycle_scroller, {
ref: "scrollbar",
style: {
"height": "100%"
},
"key-field": _ctx.valueField,
key: _ctx.state.magicKey,
"list-class": ["tiny-select-dropdown__wrap sm:max-h-56 pb-1 sm:pb-0", _ctx.state.device === "mb" ? "scrollbar-size-0" : ""],
items: _ctx.state.datas,
"item-size": _ctx.state.optimizeOpts.optionHeight
}, {
before: withCtx(function() {
return [_ctx.state.showNewOption ? (openBlock(), createBlock(_component_tiny_option, {
key: 0,
highlightClass: "sm:mb-0",
created: "",
value: _ctx.state.device === "mb" ? _ctx.state.queryValue : _ctx.state.query
}, null, 8, ["value"])) : createCommentVNode("v-if", true)];
}),
default: withCtx(function(_ref2) {
var item = _ref2.item;
return [renderSlot(_ctx.$slots, "default", {
item
}, function() {
return [(openBlock(), createBlock(_component_tiny_option, {
class: normalizeClass(["absolute w-full"]),
key: "" + item[_ctx.valueField],
label: item[_ctx.textField],
value: item[_ctx.valueField],
disabled: item.disabled,
required: item.required,
"highlight-class": item._highlightClass,
events: item.events,
onMousedown: _cache[25] || (_cache[25] = withModifiers(function() {
}, ["stop"]))
}, null, 8, ["label", "value", "disabled", "required", "highlight-class", "events"]))];
})];
}),
_: 3
/* FORWARDED */
}, 8, ["key-field", "list-class", "items", "item-size"])), [[vShow, !_ctx.state.emptyFlag && !_ctx.loading]])],
4
/* STYLE */
)) : createCommentVNode("v-if", true), !_ctx.optimization && _ctx.renderType !== "tree" ? withDirectives((openBlock(), createBlock(_component_tiny_scrollbar, {
key: 3,
ref: "scrollbar",
tag: "ul",
"wrap-class": ["tiny-select-dropdown__wrap sm:max-h-56 pb-1 sm:pb-0", _ctx.state.device === "mb" ? "scrollbar-size-0" : ""],
"view-class": ["tiny-select-dropdown__list"],
onMousedown: _cache[33] || (_cache[33] = withModifiers(function() {
}, ["stop"]))
}, {
default: withCtx(function() {
return [renderSlot(_ctx.$slots, "dropdown"), _ctx.multiple && _ctx.showCheck && _ctx.showAlloption && !_ctx.state.multipleLimit && !_ctx.state.query && !_ctx.remote ? (openBlock(), createElementBlock(
"div",
{
key: 0,
class: normalizeClass(["whitespace-nowrap box-border py-0 h-10 leading-10 sm:h-8 sm:leading-8 text-sm sm:text-xs pl-0 pr-3 sm:px-3 my-1 sm:m-1 rounded cursor-pointer", [{
hover: _ctx.state.hoverIndex === -9 && _ctx.state.selectCls !== "checked-sur"
}, {
"text-color-brand sm:bg-color-fill-6 bg-color-bg-1": _ctx.state.selectCls === "checked-sur"
}]]),
"data-tag": "tiny-option",
onClick: _cache[26] || (_cache[26] = withModifiers(function($event) {
return _ctx.toggleCheckAll(false);
}, ["stop"])),
onMousedown: _cache[27] || (_cache[27] = withModifiers(function() {
}, ["stop"])),
onMouseenter: _cache[28] || (_cache[28] = function($event) {
return _ctx.state.hoverIndex = -9;
})
},
[(openBlock(), createBlock(resolveDynamicComponent("icon-" + _ctx.state.selectCls), {
class: normalizeClass(_ctx.m(["-mt-0.5 mr-2 fill-color-icon-secondary", _ctx.state.selectCls !== "check" && "fill-color-brand"]))
}, null, 8, ["class"])), createElementVNode(
"span",
{
class: normalizeClass([_ctx.state.selectCls === "checked-sur" ? "text-color-brand" : "text-color-text-primary"])
},
toDisplayString(_ctx.allText || _ctx.t("ui.base.all")),
3
/* TEXT, CLASS */
)],
34
/* CLASS, NEED_HYDRATION */
)) : createCommentVNode("v-if", true), _ctx.multiple && _ctx.showCheck && _ctx.showAlloption && !_ctx.state.multipleLimit && _ctx.state.query && !_ctx.state.emptyText && !_ctx.remote ? (openBlock(), createElementBlock(
"div",
{
key: 1,
class: normalizeClass(["whitespace-nowrap box-border py-0 h-10 leading-10 sm:h-8 sm:leading-8 text-sm sm:text-xs pl-0 pr-3 sm:px-3 my-1 sm:m-1 rounded cursor-pointer", [{
hover: _ctx.state.hoverIndex === -9 && _ctx.state.filteredSelectCls !== "checked-sur"
}, {
"text-color-brand sm:bg-color-fill-6 bg-color-bg-1": _ctx.state.filteredSelectCls === "checked-sur"
}]]),
"data-tag": "tiny-option",
onClick: _cache[29] || (_cache[29] = withModifiers(function($event) {
return _ctx.toggleCheckAll(true);
}, ["stop"])),
onMousedown: _cache[30] || (_cache[30] = withModifiers(function() {
}, ["stop"])),
onMouseenter: _cache[31] || (_cache[31] = function($event) {
return _ctx.state.hoverIndex = -9;
})
},
[(openBlock(), createBlock(resolveDynamicComponent("icon-" + _ctx.state.filteredSelectCls), {
class: normalizeClass(_ctx.m(["-mt-0.5 mr-2 fill-color-icon-secondary", _ctx.state.filteredSelectCls !== "check" && "fill-color-brand"]))
}, null, 8, ["class"])), createElementVNode(
"span",
{
class: normalizeClass([_ctx.state.filteredSelectCls === "checked-sur" ? "text-color-brand" : "text-color-text-primary"])
},
toDisplayString(_ctx.allText || _ctx.t("ui.base.all")),
3
/* TEXT, CLASS */
)],
34
/* CLASS, NEED_HYDRATION */
)) : createCommentVNode("v-if", true), _ctx.state.showNewOption ? (openBlock(), createBlock(_component_tiny_option, {
key: 2,
value: _ctx.state.device === "mb" ? _ctx.state.queryValue : _ctx.state.query,
created: ""
}, null, 8, ["value"])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, function() {
return [(openBlock(true), createElementBlock(
Fragment,
null,
renderList(_ctx.state.datas, function(item) {
return openBlock(), createBlock(_component_tiny_option, {
class: normalizeClass(["relative"]),
key: "" + item[_ctx.valueField],
label: item[_ctx.textField],
value: item[_ctx.valueField],
disabled: item.disabled,
required: item.required,
"highlight-class": item._highlightClass,
events: item.events,
onMousedown: _cache[32] || (_cache[32] = withModifiers(function() {
}, ["stop"]))
}, null, 8, ["label", "value", "disabled", "required", "highlight-class", "events"]);
}),
128
/* KEYED_FRAGMENT */
))];
})];
}),
_: 3
/* FORWARDED */
}, 8, ["wrap-class"])), [[vShow, _ctx.state.options.length > 0 && !_ctx.loading]]) : createCommentVNode("v-if", true), _ctx.renderType !== "tree" && _ctx.state.emptyText && (!_ctx.allowCreate || _ctx.loading || _ctx.allowCreate && _ctx.state.emptyFlag) ? (openBlock(), createElementBlock(
Fragment,
{
key: 4
},
[_ctx.loadingText || _ctx.slots.empty ? (openBlock(), createElementBlock("div", _hoisted_7, [_ctx.slots.empty ? renderSlot(_ctx.$slots, "empty", {
key: 0
}) : (openBlock(), createElementBlock(
"p",
_hoisted_8,
toDisplayString(_ctx.state.emptyText),
1
/* TEXT */
))])) : (openBlock(), createElementBlock("div", _hoisted_9, [!_ctx.loading ? (openBlock(), createElementBlock(
"span",
_hoisted_10,
toDisplayString(_ctx.state.emptyText),
1
/* TEXT */
)) : (openBlock(), createBlock(_component_icon_loading, {
key: 1,
class: "fill-color-brand h-4 w-4 inline-block align-top animate-spin"
}))]))],
64
/* STABLE_FRAGMENT */
)) : createCommentVNode("v-if", true)];
}),
_: 3
/* FORWARDED */
}, 8, ["title", "close-by-mask", "search-placeholder", "is-drop-inherit-width", "placement", "append-to-body", "style", "popper-options", "class"]), [[vShow, !_ctx.onCopying() && !_ctx.hideDrop && _ctx.state.visible && _ctx.state.emptyText !== false]])];
}),
_: 3
/* FORWARDED */
}, 8, ["onBeforeEnter", "onAfterLeave"])],
6
/* CLASS, STYLE */
), _ctx.hoverExpand && !_ctx.state.isDisplayOnly ? (openBlock(), createElementBlock(
"div",
{
key: 0,
class: normalizeClass(_ctx.m("h-7 invisible", {
"h-6": _ctx.state.selectSize === "mini"
}, {
"h-7": _ctx.state.selectSize === "small"
}, {
"h-8": _ctx.state.selectSize === "medium"
}))
},
_hoisted_12,
2
/* CLASS */
)) : createCommentVNode("v-if", true)],
16
/* FULL_PROPS */
)), [[_directive_popover, void 0, "popover"], [_directive_clickoutside, _ctx.handleClose]]);
}
var mobileFirst = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { mobileFirst as default };