@opentiny/vue-base-select
Version:
1,089 lines (1,085 loc) • 48.4 kB
JavaScript
import { renderless, api } from '@opentiny/vue-renderless/base-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 Button from '@opentiny/vue-button';
import { Clickoutside } from '@opentiny/vue-directive';
import { IconClose, IconCopy, iconAddCircle, iconLoadingShadow, IconHalfselect, IconCheck, IconCheckedSur, IconSearch, IconDeltaDown, IconEllipsis, IconChevronUp } from '@opentiny/vue-icon';
import Tooltip from '@opentiny/vue-tooltip';
import FilterBox from '@opentiny/vue-filter-box';
import RecycleScroller from '@opentiny/vue-recycle-scroller';
import Checkbox from '@opentiny/vue-checkbox';
import '@opentiny/vue-theme/select/index.css';
import '@opentiny/vue-theme/base-select/index.css';
import { resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, mergeProps, withModifiers, createElementVNode, normalizeStyle, normalizeClass, renderSlot, createBlock, createCommentVNode, withCtx, createVNode, createTextVNode, toDisplayString, Fragment, renderList, createSlots, withKeys, vShow, vModelText, resolveDynamicComponent, 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;
};
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", "top-create-click"],
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,
TinyButton: Button,
IconClose: IconClose(),
TinyScrollbar: Scrollbar,
IconCopy: IconCopy(),
IconAddCircle: iconAddCircle(),
IconLoadingShadow: iconLoadingShadow(),
TinySelectDropdown: SelectDropdown,
IconHalfselect: IconHalfselect(),
IconCheck: IconCheck(),
IconCheckedSur: IconCheckedSur(),
TinyFilterBox: FilterBox,
TinyTooltip: Tooltip,
TinyRecycleScroller: RecycleScroller,
// tiny 新增，
IconSearch: IconSearch(),
IconDeltaDown: IconDeltaDown(),
// 默认下拉图标
TinyCheckbox: Checkbox,
IconEllipsis: IconEllipsis(),
IconChevronUp: IconChevronUp()
},
props: [].concat(props, [
"id",
"multiple",
"name",
"dataset",
"readonly",
"tabindex",
"dropStyle",
"valueField",
"textField",
"copyable",
"size",
"options",
"showCheck",
"showAlloption",
"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",
"delay",
"cacheOp",
"isDropInheritWidth",
"tagSelectable",
"selectConfig",
"radioConfig",
"allowCopy",
"textSplit",
"autoClose",
"queryDebounce",
"ignoreEnter",
"dropdownIcon",
"disabledTooltipContent",
"hoverExpand",
"optimization",
"displayOnly",
"initQuery",
"extraQueryParams",
"shape",
"label",
"tip",
"updateDelay",
"showTips",
"popperOptions",
"trim",
"topCreate",
"topCreateText",
"keepFocus",
"blank",
// 以下为 tiny 新增
"searchable",
"showEmptyImage",
"inputBoxType",
"tagType",
"clearNoMatchValue",
"showLimitText",
"showProportion",
"clickExpand",
"maxVisibleRows",
"showAllTextTag",
"allText"
]),
setup: function setup$1(props2, context) {
return setup({
props: props2,
context,
renderless,
api
});
}
});
var _hoisted_1 = {
key: 0
};
var _hoisted_2 = {
key: 0
};
var _hoisted_3 = {
class: "tiny-base-select__tags-text"
};
var _hoisted_4 = {
key: 0
};
var _hoisted_5 = {
class: "tiny-base-select__tags-text"
};
var _hoisted_6 = {
key: 1,
ref: "tags-content"
};
var _hoisted_7 = {
key: 0,
class: "tiny-base-select__tags-text"
};
var _hoisted_8 = {
key: 1,
class: "tiny-base-select__tags-text"
};
var _hoisted_9 = {
key: 0
};
var _hoisted_10 = {
key: 1
};
var _hoisted_11 = {
key: 1,
class: "tiny-base-select__tags-text is-disabled"
};
var _hoisted_12 = {
key: 0
};
var _hoisted_13 = {
key: 1
};
var _hoisted_14 = ["disabled", "autocomplete"];
var _hoisted_15 = {
key: 0,
class: "tiny-base-select__limit-txt"
};
var _hoisted_16 = {
key: 1,
class: "tiny-base-select__proportion-txt"
};
var _hoisted_17 = {
key: 1,
class: "tiny-select__top-create"
};
var _hoisted_18 = {
class: "tiny-icon-close"
};
var _hoisted_19 = {
key: 0,
class: "tiny-select-dropdown__empty-wrap"
};
var _hoisted_20 = {
key: 1,
class: "tiny-select-dropdown__empty-images"
};
var _hoisted_21 = {
key: 2,
class: "tiny-select-dropdown__empty"
};
var _hoisted_22 = {
key: 1,
class: "tiny-select-dropdown__loading"
};
var _hoisted_23 = {
key: 0,
class: "tiny-select-dropdown__empty-images"
};
var _hoisted_24 = {
key: 1,
class: "tiny-select-dropdown__empty"
};
var _hoisted_25 = {
key: 1,
class: "circular",
viewBox: "25 25 50 50"
};
var _hoisted_26 = /* @__PURE__ */ createElementVNode(
"circle",
{
class: "path",
cx: "50",
cy: "50",
r: "24",
fill: "none"
},
null,
-1
/* HOISTED */
);
var _hoisted_27 = [_hoisted_26];
var _hoisted_28 = {
key: 0,
class: "tiny-base-select__placeholder"
};
var _hoisted_29 = /* @__PURE__ */ createElementVNode(
"input",
{
class: "tiny-input__inner",
disabled: ""
},
null,
-1
/* HOISTED */
);
var _hoisted_30 = [_hoisted_29];
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_ellipsis = resolveComponent("icon-ellipsis");
var _component_icon_chevron_up = resolveComponent("icon-chevron-up");
var _component_icon_copy = resolveComponent("icon-copy");
var _component_icon_close = resolveComponent("icon-close");
var _component_tiny_input = resolveComponent("tiny-input");
var _component_icon_search = resolveComponent("icon-search");
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_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: ["tiny-base-select", [_ctx.state.selectSize ? "tiny-base-select--" + _ctx.state.selectSize : "", _ctx.state.collapseTags ? "tiny-base-select__collapse-tags" : "", _ctx.filterable ? "tiny-base-select__filterable" : "", _ctx.multiple ? "tiny-base-select__multiple" : "", (_ctx.state.inputHovering || _ctx.state.visible) && !_ctx.clickExpand ? "is-hover" : "", _ctx.state.isDisplayOnly ? "is-display-only" : "", _ctx.hoverExpand ? "is-hover-expand" : "", _ctx.clickExpand ? "is-click-expand" : "", _ctx.state.showCollapseTag ? "collapse-tag-clicked" : "", _ctx.state.selectDisabled ? "is-disabled" : "", _ctx.$parent.$attrs.class]],
onMouseleave: _cache[40] || (_cache[40] = withModifiers(function() {
_ctx.state.selectHover = false;
_ctx.state.inputHovering = false;
}, ["self"])),
onMouseenter: _cache[41] || (_cache[41] = withModifiers(function() {
_ctx.state.selectHover = true;
_ctx.state.inputHovering = true;
}, ["self"])),
onClick: _cache[42] || (_cache[42] = 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(["tiny-base-select__tags-group", {
"is-expand": _ctx.state.isExpand
}])
},
[renderSlot(_ctx.$slots, "reference", {}, function() {
return [_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(["tiny-base-select__tags", {
"is-showicon": _ctx.slots.prefix,
"not-selected": !_ctx.state.selected.length
}, {
"is-show-tag": !_ctx.state.isShowTagText
}]),
style: normalizeStyle(_ctx.state.tagsStyle)
},
[!_ctx.state.isShowTagText ? (openBlock(), createElementBlock("span", _hoisted_1, [_ctx.collapseTags && _ctx.state.selected.length ? (openBlock(), createElementBlock("span", _hoisted_2, [(openBlock(), createBlock(_component_tiny_tag, {
closable: !_ctx.state.selectDisabled,
size: _ctx.state.collapseTagSize,
hit: _ctx.state.selected[0].state ? _ctx.state.selected[0].state.hitState : _ctx.state.selected[0].hitState,
key: _ctx.state.key,
type: _ctx.state.getTagType,
onClose: _cache[1] || (_cache[1] = function($event) {
return _ctx.deleteTag($event, _ctx.state.selected[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.selected[0]));
})
}, {
content: withCtx(function() {
return [_ctx.state.tooltipContent[_ctx.getValueKey(_ctx.state.selected[0])] ? (openBlock(), createElementBlock("span", _hoisted_4, [renderSlot(_ctx.$slots, "label", {
item: _ctx.getLabelSlotValue(_ctx.state.selected[0])
}, function() {
return [createTextVNode(
toDisplayString(_ctx.state.selected[0].state ? _ctx.state.selected[0].state.currentLabel : _ctx.state.selected[0].currentLabel),
1
/* TEXT */
)];
})])) : createCommentVNode("v-if", true)];
}),
default: withCtx(function() {
return [createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "label", {
item: _ctx.getLabelSlotValue(_ctx.state.selected[0])
}, function() {
return [createTextVNode(
toDisplayString(_ctx.state.selected[0].state ? _ctx.state.selected[0].state.currentLabel : _ctx.state.selected[0].currentLabel),
1
/* TEXT */
)];
})])];
}),
_: 3
/* FORWARDED */
})];
}),
_: 3
/* FORWARDED */
}, 8, ["closable", "size", "hit", "type"])), _ctx.state.selected.length > 1 ? (openBlock(), createBlock(_component_tiny_tag, {
key: 0,
closable: false,
size: _ctx.state.collapseTagSize,
type: _ctx.state.getTagType,
"disable-transitions": "",
class: "tiny-base-select__tags-number"
}, {
default: withCtx(function() {
return [createElementVNode(
"span",
_hoisted_5,
"+ " + toDisplayString(_ctx.state.selected.length - 1),
1
/* TEXT */
)];
}),
_: 1
/* STABLE */
}, 8, ["size", "type"])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), !_ctx.collapseTags ? (openBlock(), createElementBlock(
"span",
_hoisted_6,
[_ctx.showAllTextTag && _ctx.state.selectCls === "checked-sur" ? (openBlock(), createBlock(_component_tiny_tag, {
type: _ctx.state.getTagType,
key: "tags-all-text-tag",
"data-tag": "tags-all-text-tag",
disabled: _ctx.state.isDisabled,
closable: true,
size: _ctx.state.collapseTagSize,
onClose: _cache[2] || (_cache[2] = function($event) {
return _ctx.toggleCheckAll(false);
})
}, {
default: withCtx(function() {
return [createTextVNode(
toDisplayString(_ctx.allText || _ctx.t("ui.base.all")),
1
/* TEXT */
)];
}),
_: 1
/* STABLE */
}, 8, ["type", "disabled", "size"])) : (openBlock(), createElementBlock(
Fragment,
{
key: 1
},
[_ctx.hoverExpand || _ctx.clickExpand ? (openBlock(), createBlock(_component_tiny_tag, {
class: normalizeClass(["tiny-base-select__tags-collapse", {
"is-hidden": _ctx.state.isHidden || _ctx.state.isDisabled
}]),
type: _ctx.state.getTagType,
key: "tags-collapse",
"data-tag": "tags-collapse",
"only-icon": "",
closable: false,
size: _ctx.state.collapseTagSize,
onClick: _cache[3] || (_cache[3] = function($event) {
return _ctx.onClickCollapseTag($event);
})
}, {
default: withCtx(function() {
return [_ctx.hoverExpand ? (openBlock(), createElementBlock(
Fragment,
{
key: 0
},
[createTextVNode(
" + " + toDisplayString(_ctx.state.collapseTagsLength),
1
/* TEXT */
)],
64
/* STABLE_FRAGMENT */
)) : (openBlock(), createBlock(_component_icon_ellipsis, {
key: 1
}))];
}),
_: 1
/* STABLE */
}, 8, ["class", "type", "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),
class: normalizeClass({
"not-visible": _ctx.state.toHideIndex <= index && !_ctx.state.isExpand,
"is-required": item.required
}),
closable: _ctx.isTagClosable(item),
disabled: _ctx.state.isDisabled || item.disabled,
size: _ctx.state.collapseTagSize,
hit: item.state ? item.state.hitState : item.hitState,
type: _ctx.state.getTagType,
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",
_hoisted_7,
toDisplayString(item.state ? item.state.currentLabel + "... " : item.currentLabel + "... "),
1
/* TEXT */
)) : (openBlock(), createElementBlock("span", _hoisted_8, [renderSlot(_ctx.$slots, "label", {
item: _ctx.getLabelSlotValue(item)
}, function() {
return [createTextVNode(
toDisplayString(item.state ? item.state.currentLabel : item.currentLabel),
1
/* TEXT */
)];
})]))];
}),
_: 2
/* DYNAMIC */
}, [_ctx.state.tooltipContent[_ctx.getValueKey(item)] ? {
name: "content",
fn: withCtx(function() {
return [!_ctx.state.visible && _ctx.state.overflow === index ? (openBlock(), createElementBlock(
"span",
_hoisted_9,
toDisplayString(item.state ? item.state.currentLabel + "... " : item.currentLabel + "... "),
1
/* TEXT */
)) : (openBlock(), createElementBlock("span", _hoisted_10, [renderSlot(_ctx.$slots, "label", {
item: _ctx.getLabelSlotValue(item)
}, function() {
return [createTextVNode(
toDisplayString(item.state ? item.state.currentLabel : item.currentLabel),
1
/* TEXT */
)];
})]))];
}),
key: "0"
} : void 0]), 1032, ["onMouseenter"])];
}),
_: 2
/* DYNAMIC */
}, 1032, ["class", "closable", "disabled", "size", "hit", "type", "onClose"]);
}),
128
/* KEYED_FRAGMENT */
)), _ctx.clickExpand && _ctx.state.showCollapseTag ? (openBlock(), createElementBlock("span", {
key: 1,
class: "tiny-base-select__collapse-text",
onClick: _cache[4] || (_cache[4] = function($event) {
return _ctx.onClickCollapseTag($event);
})
}, [createTextVNode(
toDisplayString(_ctx.t("ui.select.collapse")) + " ",
1
/* TEXT */
), createVNode(_component_icon_chevron_up)])) : createCommentVNode("v-if", true)],
64
/* STABLE_FRAGMENT */
))],
512
/* NEED_PATCH */
)) : createCommentVNode("v-if", true)])) : (openBlock(), createElementBlock("span", _hoisted_11, [createVNode(_component_tiny_tooltip, {
effect: "light",
placement: "top",
disabled: !_ctx.showTips
}, {
content: withCtx(function() {
return [createElementVNode(
"div",
{
class: normalizeClass([_ctx.state.showTips && "tiny-base-select__show-tips", "tiny-base-select__show-common"])
},
[_ctx.slots.label ? (openBlock(), createElementBlock("span", _hoisted_12, [(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_13,
toDisplayString(_ctx.disabledTooltipContent || _ctx.state.disabledTooltipContent),
1
/* TEXT */
))],
2
/* CLASS */
)];
}),
default: withCtx(function() {
return [createElementVNode("span", null, [(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"])])), withDirectives(createElementVNode("input", {
ref: "input",
"onUpdate:modelValue": _cache[5] || (_cache[5] = function($event) {
return _ctx.state.query = $event;
}),
type: "text",
class: normalizeClass(["tiny-base-select__input", [_ctx.state.selectSize ? "is-" + _ctx.state.selectSize : ""]]),
disabled: _ctx.state.selectDisabled,
autocomplete: _ctx.autocomplete,
onFocus: _cache[6] || (_cache[6] = function() {
return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
}),
onBlur: _cache[7] || (_cache[7] = function() {
return _ctx.handleBlur && _ctx.handleBlur.apply(_ctx, arguments);
}),
onKeyup: _cache[8] || (_cache[8] = function() {
return _ctx.managePlaceholder && _ctx.managePlaceholder.apply(_ctx, arguments);
}),
onKeydown: [_cache[9] || (_cache[9] = function() {
return _ctx.resetInputState && _ctx.resetInputState.apply(_ctx, arguments);
}), _cache[10] || (_cache[10] = withKeys(withModifiers(function($event) {
return _ctx.navigateOptions("next");
}, ["prevent"]), ["down"])), _cache[11] || (_cache[11] = withKeys(withModifiers(function($event) {
return _ctx.navigateOptions("prev");
}, ["prevent"]), ["up"])), _cache[12] || (_cache[12] = withKeys(withModifiers(function() {
return _ctx.selectOption && _ctx.selectOption.apply(_ctx, arguments);
}, ["prevent"]), ["enter"])), _cache[13] || (_cache[13] = withKeys(withModifiers(function($event) {
return _ctx.state.visible = false;
}, ["stop", "prevent"]), ["esc"])), _cache[14] || (_cache[14] = withKeys(function() {
return _ctx.deletePrevTag && _ctx.deletePrevTag.apply(_ctx, arguments);
}, ["delete"])), _cache[15] || (_cache[15] = withKeys(function($event) {
return _ctx.state.visible = false;
}, ["tab"]))],
onCompositionstart: _cache[16] || (_cache[16] = function() {
return _ctx.handleComposition && _ctx.handleComposition.apply(_ctx, arguments);
}),
onCompositionupdate: _cache[17] || (_cache[17] = function() {
return _ctx.handleComposition && _ctx.handleComposition.apply(_ctx, arguments);
}),
onCompositionend: _cache[18] || (_cache[18] = function() {
return _ctx.handleComposition && _ctx.handleComposition.apply(_ctx, arguments);
}),
onInput: _cache[19] || (_cache[19] = 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_14), [[vShow, _ctx.filterable && !_ctx.searchable && !_ctx.state.selectDisabled], [vModelText, _ctx.state.query]])],
6
/* CLASS, STYLE */
)) : createCommentVNode("v-if", true), !_ctx.shape ? (openBlock(), createBlock(_component_tiny_input, {
key: 2,
tiny_mode: "pc",
ref: "reference",
modelValue: _ctx.state.selectedLabel,
"onUpdate:modelValue": _cache[22] || (_cache[22] = 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,
"input-box-type": _ctx.inputBoxType,
class: normalizeClass({
"is-focus": _ctx.state.visible,
overflow: _ctx.state.overflow,
"is-show-close": _ctx.state.showClose
}),
tabindex: _ctx.multiple && _ctx.filterable ? "-1" : _ctx.tabindex,
onFocus: _ctx.handleFocus,
onBlur: _ctx.handleBlur,
onKeyup: _ctx.debouncedOnInputChange,
onKeydown: [_cache[23] || (_cache[23] = withKeys(withModifiers(function($event) {
return _ctx.navigateOptions("next");
}, ["stop", "prevent"]), ["down"])), _cache[24] || (_cache[24] = withKeys(withModifiers(function($event) {
return _ctx.navigateOptions("prev");
}, ["stop", "prevent"]), ["up"])), withKeys(withModifiers(_ctx.selectOption, ["prevent"]), ["enter"]), _cache[25] || (_cache[25] = withKeys(withModifiers(function($event) {
return _ctx.state.visible = false;
}, ["stop", "prevent"]), ["esc"])), _cache[26] || (_cache[26] = 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.showLimitText && _ctx.multiple && _ctx.multipleLimit ? (openBlock(), createElementBlock(
"span",
_hoisted_15,
toDisplayString(_ctx.state.selected.length) + "/" + toDisplayString(_ctx.multipleLimit),
1
/* TEXT */
)) : _ctx.showProportion && _ctx.state.selected.length > 0 && _ctx.state.options.length > 1 ? (openBlock(), createElementBlock(
"span",
_hoisted_16,
toDisplayString(_ctx.state.selected.length + "/" + _ctx.state.options.length),
1
/* TEXT */
)) : createCommentVNode("v-if", true), _ctx.state.showCopy ? (openBlock(), createElementBlock("span", {
key: 2,
class: "tiny-base-select__copy",
onClick: _cache[20] || (_cache[20] = withModifiers(function() {
return _ctx.handleCopyClick && _ctx.handleCopyClick.apply(_ctx, arguments);
}, ["stop"]))
}, [createVNode(_component_icon_copy, {
class: "tiny-svg-size tiny-base-select__caret"
})])) : createCommentVNode("v-if", true), _ctx.state.showClose ? (openBlock(), createBlock(_component_icon_close, {
key: 3,
class: "tiny-svg-size tiny-base-select__caret icon-close",
onClick: _ctx.handleClearClick,
onMouseenter: _cache[21] || (_cache[21] = function($event) {
return _ctx.state.inputHovering = true;
})
}, null, 8, ["onClick"])) : createCommentVNode("v-if", true), withDirectives((openBlock(), createBlock(resolveDynamicComponent(_ctx.state.getIcon.icon), {
class: normalizeClass(["tiny-svg-size", "tiny-base-select__caret", _ctx.state.iconClass, {
"is-reverse": !_ctx.state.visible && _ctx.state.getIcon.isDefault
}, {
"not-reverse": !_ctx.state.getIcon.isDefault
}]),
onClick: _ctx.handleDropdownClick
}, null, 8, ["class", "onClick"])), [[vShow, _ctx.state.autoHideDownIcon ? !_ctx.state.showClose && !(_ctx.remote && _ctx.filterable && !_ctx.remoteConfig.showIcon) : !(_ctx.remote && _ctx.filterable && !_ctx.remoteConfig.showIcon)]])];
}),
_: 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", "input-box-type", "class", "tabindex", "onFocus", "onBlur", "onKeyup", "onKeydown", "onPaste", "onMouseenter", "onMouseleave", "onCompositionend"])) : createCommentVNode("v-if", true)];
}), createVNode(Transition, {
name: "tiny-zoom-in-top",
onBeforeEnter: _ctx.handleMenuEnter,
onAfterLeave: _ctx.doDestroy,
persisted: ""
}, {
default: withCtx(function() {
return [withDirectives(createVNode(_component_tiny_select_dropdown, {
ref: "popper",
"is-drop-inherit-width": _ctx.isDropInheritWidth,
placement: _ctx.placement,
"append-to-body": _ctx.popperAppendToBody,
style: normalizeStyle(_ctx.dropStyle),
"popper-options": _ctx.popperOptions
}, {
default: withCtx(function() {
var _ctx$state$designConf, _ctx$state$designConf2;
return [_ctx.shape && _ctx.filterable ? (openBlock(), createElementBlock(
"div",
{
key: 0,
class: normalizeClass(["tiny-base-select__filter-input", [_ctx.remote && !_ctx.state.options.length ? "tiny-base-select__remote-input" : ""]])
},
[createVNode(_component_tiny_input, {
ref: "input",
type: "text",
modelValue: _ctx.state.query,
"onUpdate:modelValue": _cache[27] || (_cache[27] = 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.topCreate ? (openBlock(), createElementBlock("div", _hoisted_17, [createElementVNode("div", {
onClick: _cache[28] || (_cache[28] = function($event) {
return _ctx.$emit("top-create-click", $event);
})
}, [(openBlock(), createBlock(resolveDynamicComponent(((_ctx$state$designConf = _ctx.state.designConfig) == null ? void 0 : (_ctx$state$designConf2 = _ctx$state$designConf.icons) == null ? void 0 : _ctx$state$designConf2.addIcon) || "icon-add-circle"))), createElementVNode(
"span",
null,
toDisplayString(_ctx.topCreateText),
1
/* TEXT */
)])])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "panel", {
methods: {
updateSelectedData: _ctx.updateSelectedData,
hidePanel: _ctx.hidePanel
}
}), _ctx.searchable ? (openBlock(), createBlock(_component_tiny_input, {
key: 2,
"input-box-type": "underline",
modelValue: _ctx.state.query,
"onUpdate:modelValue": [_cache[29] || (_cache[29] = function($event) {
return _ctx.state.query = $event;
}), _cache[30] || (_cache[30] = function($event) {
return _ctx.handleQueryChange(_ctx.state.query);
})],
placeholder: _ctx.t("ui.search.placeholder"),
class: "tiny-select-dropdown__search"
}, {
prefix: withCtx(function() {
return [createVNode(_component_icon_search, {
class: "tiny-select-dropdown__search-prefix"
})];
}),
suffix: withCtx(function() {
return [withDirectives(createElementVNode(
"span",
_hoisted_18,
[createVNode(_component_icon_close, {
onClick: _ctx.clearSearchText
}, null, 8, ["onClick"])],
512
/* NEED_PATCH */
), [[vShow, _ctx.state.query]]), createVNode(_component_icon_search, {
class: "tiny-select-dropdown__search-suffix"
})];
}),
_: 1
/* STABLE */
}, 8, ["modelValue", "placeholder"])) : createCommentVNode("v-if", true), _ctx.optimization ? (openBlock(), createElementBlock(
"div",
{
key: 3,
style: normalizeStyle({
height: _ctx.state.optimizeStore.recycleScrollerHeight + "px"
})
},
[withDirectives((openBlock(), createBlock(_component_tiny_recycle_scroller, {
ref: "scrollbar",
style: {
"height": "100%"
},
key: _ctx.state.magicKey,
"key-field": _ctx.valueField,
"list-class": ["tiny-select-dropdown__wrap"],
"item-class": ["tiny-select-dropdown__item-view"],
items: _ctx.state.datas,
"item-size": _ctx.state.optimizeOpts.optionHeight
}, {
before: withCtx(function() {
return [_ctx.state.showNewOption ? (openBlock(), createBlock(_component_tiny_option, {
key: 0,
value: _ctx.state.query,
created: ""
}, 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, {
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,
icon: item.icon,
onMousedown: _cache[31] || (_cache[31] = withModifiers(function() {
}, ["stop"]))
}, null, 8, ["label", "value", "disabled", "required", "highlight-class", "events", "icon"]))];
})];
}),
_: 3
/* FORWARDED */
}, 8, ["key-field", "items", "item-size"])), [[vShow, !_ctx.state.emptyFlag && !_ctx.loading]])],
4
/* STYLE */
)) : createCommentVNode("v-if", true), !_ctx.optimization ? withDirectives((openBlock(), createBlock(_component_tiny_scrollbar, {
key: 4,
ref: "scrollbar",
show: "",
tag: "ul",
"wrap-class": ["tiny-select-dropdown__wrap"],
"view-class": ["tiny-select-dropdown__list"],
onMousedown: _cache[39] || (_cache[39] = withModifiers(function() {
}, ["stop"])),
class: normalizeClass({
"is-empty": !_ctx.allowCreate && _ctx.state.query && _ctx.state.filteredOptionsCount === 0
})
}, {
default: withCtx(function() {
return [renderSlot(_ctx.$slots, "dropdown"), _ctx.multiple && _ctx.showCheck && _ctx.showAlloption && !_ctx.state.multipleLimit && !_ctx.state.query && !_ctx.remote ? (openBlock(), createElementBlock(
"li",
{
key: 0,
class: normalizeClass(["tiny-option tiny-option_all tiny-select-dropdown__item", [{
hover: _ctx.state.hoverIndex === -9 && _ctx.state.selectCls !== "checked-sur"
}, {
"selected": _ctx.state.selectCls === "checked-sur"
}]]),
"data-tag": "tiny-option",
onClick: _cache[32] || (_cache[32] = withModifiers(function($event) {
return _ctx.toggleCheckAll(false);
}, ["stop"])),
onMousedown: _cache[33] || (_cache[33] = withModifiers(function() {
}, ["stop"])),
onMouseenter: _cache[34] || (_cache[34] = function($event) {
return _ctx.state.hoverIndex = -9;
})
},
[(openBlock(), createBlock(resolveDynamicComponent("icon-" + _ctx.state.selectCls), {
class: normalizeClass(["tiny-svg-size", _ctx.state.selectCls])
}, null, 8, ["class"])), createElementVNode(
"span",
null,
toDisplayString(_ctx.allText || _ctx.t("ui.base.all")),
1
/* TEXT */
)],
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(
"li",
{
key: 1,
class: normalizeClass(["tiny-option tiny-select-dropdown__item", [{
hover: _ctx.state.hoverIndex === -9 && _ctx.state.filteredSelectCls !== "checked-sur"
}, {
"selected": _ctx.state.filteredSelectCls === "checked-sur"
}]]),
"data-tag": "tiny-option",
onClick: _cache[35] || (_cache[35] = withModifiers(function($event) {
return _ctx.toggleCheckAll(true);
}, ["stop"])),
onMousedown: _cache[36] || (_cache[36] = withModifiers(function() {
}, ["stop"])),
onMouseenter: _cache[37] || (_cache[37] = function($event) {
return _ctx.state.hoverIndex = -9;
})
},
[(openBlock(), createBlock(resolveDynamicComponent("icon-" + _ctx.state.filteredSelectCls), {
class: normalizeClass(["tiny-svg-size", _ctx.state.filteredSelectCls])
}, null, 8, ["class"])), createElementVNode(
"span",
null,
toDisplayString(_ctx.allText || _ctx.t("ui.base.all")),
1
/* TEXT */
)],
34
/* CLASS, NEED_HYDRATION */
)) : createCommentVNode("v-if", true), _ctx.state.showNewOption ? (openBlock(), createBlock(_component_tiny_option, {
key: 2,
value: _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, {
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[38] || (_cache[38] = withModifiers(function() {
}, ["stop"])),
icon: item.icon
}, null, 8, ["label", "value", "disabled", "required", "highlight-class", "events", "icon"]);
}),
128
/* KEYED_FRAGMENT */
))];
})];
}),
_: 3
/* FORWARDED */
}, 8, ["class"])), [[vShow, _ctx.state.options.length > 0 && !_ctx.loading]]) : createCommentVNode("v-if", true), !_ctx.slots.panel && _ctx.state.emptyText && (!_ctx.allowCreate || _ctx.loading || _ctx.allowCreate && _ctx.state.emptyFlag) ? (openBlock(), createElementBlock(
Fragment,
{
key: 5
},
[_ctx.loadingText || _ctx.slots.empty ? (openBlock(), createElementBlock("div", _hoisted_19, [_ctx.slots.empty ? renderSlot(_ctx.$slots, "empty", {
key: 0
}) : _ctx.showEmptyImage ? (openBlock(), createElementBlock("span", _hoisted_20)) : (openBlock(), createElementBlock(
"p",
_hoisted_21,
toDisplayString(_ctx.state.emptyText),
1
/* TEXT */
))])) : (openBlock(), createElementBlock("div", _hoisted_22, [!_ctx.loading ? (openBlock(), createElementBlock(
Fragment,
{
key: 0
},
[_ctx.showEmptyImage ? (openBlock(), createElementBlock("span", _hoisted_23)) : (openBlock(), createElementBlock(
"span",
_hoisted_24,
toDisplayString(_ctx.state.emptyText),
1
/* TEXT */
))],
64
/* STABLE_FRAGMENT */
)) : (openBlock(), createElementBlock("svg", _hoisted_25, _hoisted_27))]))],
64
/* STABLE_FRAGMENT */
)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "footer")];
}),
_: 3
/* FORWARDED */
}, 8, ["is-drop-inherit-width", "placement", "append-to-body", "style", "popper-options"]), [[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", _hoisted_28, _hoisted_30)) : createCommentVNode("v-if", true)],
16
/* FULL_PROPS */
)), [[_directive_popover, void 0, "popover"], [_directive_clickoutside, _ctx.handleClose]]);
}
var pc = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { pc as default };