feat: initial commit - Phase 1 & 2 core features

This commit is contained in:
hiderfong
2026-04-22 17:07:33 +08:00
commit 1773bda06b
25005 changed files with 6252106 additions and 0 deletions
+18
View File
@@ -0,0 +1,18 @@
import { SFCWithInstall } from "../../utils/vue/typescript.js";
import "../../utils/index.js";
import { SelectEmits, SelectInstance, SelectOptionProps, SelectProps, SelectPropsPublic, TagTooltipProps, selectEmits, selectProps } from "./src/select.js";
import { OptionBasic, OptionPublicInstance, SelectContext } from "./src/type.js";
import { _default } from "./src/select.vue.js";
import { _default as _default$1 } from "./src/option.vue.js";
import { _default as _default$2 } from "./src/option-group.vue.js";
import { selectGroupKey, selectKey } from "./src/token.js";
//#region ../../packages/components/select/index.d.ts
declare const ElSelect: SFCWithInstall<typeof _default> & {
Option: typeof _default$1;
OptionGroup: typeof _default$2;
};
declare const ElOption: SFCWithInstall<typeof _default$1>;
declare const ElOptionGroup: SFCWithInstall<typeof _default$2>;
//#endregion
export { ElOption, ElOptionGroup, ElSelect, ElSelect as default, type OptionBasic, type SelectContext, SelectEmits, SelectInstance, SelectOptionProps, type OptionPublicInstance as SelectOptionProxy, SelectProps, SelectPropsPublic, TagTooltipProps, selectEmits, selectGroupKey, selectKey, selectProps };
+26
View File
@@ -0,0 +1,26 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_install = require('../../utils/vue/install.js');
const require_token = require('./src/token.js');
const require_option = require('./src/option2.js');
const require_select = require('./src/select.js');
const require_option_group = require('./src/option-group.js');
const require_select$1 = require('./src/select2.js');
//#region ../../packages/components/select/index.ts
const ElSelect = require_install.withInstall(require_select$1.default, {
Option: require_option.default,
OptionGroup: require_option_group.default
});
const ElOption = require_install.withNoopInstall(require_option.default);
const ElOptionGroup = require_install.withNoopInstall(require_option_group.default);
//#endregion
exports.ElOption = ElOption;
exports.ElOptionGroup = ElOptionGroup;
exports.ElSelect = ElSelect;
exports.default = ElSelect;
exports.selectEmits = require_select.selectEmits;
exports.selectGroupKey = require_token.selectGroupKey;
exports.selectKey = require_token.selectKey;
exports.selectProps = require_select.selectProps;
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"file":"index.js","names":["withInstall","Select","withNoopInstall","Option","OptionGroup"],"sources":["../../../../../packages/components/select/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils'\nimport Select from './src/select.vue'\nimport Option from './src/option.vue'\nimport OptionGroup from './src/option-group.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElSelect: SFCWithInstall<typeof Select> & {\n Option: typeof Option\n OptionGroup: typeof OptionGroup\n} = withInstall(Select, {\n Option,\n OptionGroup,\n})\nexport default ElSelect\nexport const ElOption: SFCWithInstall<typeof Option> = withNoopInstall(Option)\nexport const ElOptionGroup: SFCWithInstall<typeof OptionGroup> =\n withNoopInstall(OptionGroup)\n\nexport * from './src/token'\nexport * from './src/select'\n\nexport type {\n SelectContext,\n OptionPublicInstance as SelectOptionProxy,\n OptionBasic,\n} from './src/type'\n"],"mappings":";;;;;;;;;AAOA,MAAa,WAGTA,4BAAYC,0BAAQ;CACtB;CACA;CACD,CAAC;AAEF,MAAa,WAA0CC,gCAAgBC,uBAAO;AAC9E,MAAa,gBACXD,gCAAgBE,6BAAY"}
@@ -0,0 +1,18 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require__plugin_vue_export_helper = require('../../../_virtual/_plugin-vue_export-helper.js');
const require_option_group_vue_vue_type_script_lang = require('./option-group.vue_vue_type_script_lang.js');
let vue = require("vue");
//#region ../../packages/components/select/src/option-group.vue
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("ul", {
ref: "groupRef",
class: (0, vue.normalizeClass)(_ctx.ns.be("group", "wrap"))
}, [(0, vue.createElementVNode)("li", { class: (0, vue.normalizeClass)(_ctx.ns.be("group", "title")) }, (0, vue.toDisplayString)(_ctx.label), 3), (0, vue.createElementVNode)("li", null, [(0, vue.createElementVNode)("ul", { class: (0, vue.normalizeClass)(_ctx.ns.b("group")) }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 2)])], 2)), [[vue.vShow, _ctx.visible]]);
}
var option_group_default = /* @__PURE__ */ require__plugin_vue_export_helper.default(require_option_group_vue_vue_type_script_lang.default, [["render", _sfc_render]]);
//#endregion
exports.default = option_group_default;
//# sourceMappingURL=option-group.js.map
@@ -0,0 +1 @@
{"version":3,"file":"option-group.js","names":[],"sources":["../../../../../../packages/components/select/src/option-group.vue"],"sourcesContent":["<template>\n <ul v-show=\"visible\" ref=\"groupRef\" :class=\"ns.be('group', 'wrap')\">\n <li :class=\"ns.be('group', 'title')\">{{ label }}</li>\n <li>\n <ul :class=\"ns.b('group')\">\n <slot />\n </ul>\n </li>\n </ul>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n getCurrentInstance,\n isVNode,\n onMounted,\n provide,\n reactive,\n ref,\n toRefs,\n} from 'vue'\nimport { useMutationObserver } from '@vueuse/core'\nimport { ensureArray, isArray } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { selectGroupKey } from './token'\n\nimport type { Component, VNode, VNodeArrayChildren } from 'vue'\nimport type { OptionInternalInstance, OptionPublicInstance } from './type'\n\nexport default defineComponent({\n name: 'ElOptionGroup',\n componentName: 'ElOptionGroup',\n\n props: {\n /**\n * @description name of the group\n */\n label: String,\n /**\n * @description whether to disable all options in this group\n */\n disabled: Boolean,\n },\n setup(props) {\n const ns = useNamespace('select')\n const groupRef = ref<HTMLElement>()\n const instance = getCurrentInstance()!\n const children = ref<OptionPublicInstance[]>([])\n\n provide(\n selectGroupKey,\n reactive({\n ...toRefs(props),\n })\n )\n\n const visible = computed(() =>\n children.value.some((option) => option.visible === true)\n )\n\n const isOption = (\n node: VNode\n ): node is VNode & { component: OptionInternalInstance } =>\n (node.type as Component).name === 'ElOption' && !!node.component?.proxy\n\n // get all instances of options\n const flattedChildren = (node: VNode | VNodeArrayChildren) => {\n const nodes = ensureArray(node) as VNode[] | VNodeArrayChildren\n const children: OptionPublicInstance[] = []\n\n nodes.forEach((child) => {\n if (!isVNode(child)) return\n\n if (isOption(child)) {\n children.push(child.component.proxy)\n } else if (isArray(child.children) && child.children.length) {\n children.push(...flattedChildren(child.children))\n } else if (child.component?.subTree) {\n children.push(...flattedChildren(child.component.subTree))\n }\n })\n\n return children\n }\n\n const updateChildren = () => {\n children.value = flattedChildren(instance.subTree)\n }\n\n onMounted(() => {\n updateChildren()\n })\n\n useMutationObserver(groupRef, updateChildren, {\n attributes: true,\n subtree: true,\n childList: true,\n })\n\n return {\n groupRef,\n visible,\n ns,\n }\n },\n})\n</script>\n"],"mappings":";;;;;;;;mFAQO,MAAA;EAPgB,KAAI;EAAY,+BAAO,KAAA,GAAG,GAAE,SAAA,OAAA,CAAA;EAAA,+BACM,MAAA,EAAhD,+BAAO,KAAA,GAAG,GAAE,SAAA,QAAA,CAAA,EAAA,2BAAuB,KAAA,MAAK,EAAA,EAAA,8BAKxC,MAAA,MAAA,6BADE,MAAA,EAFA,+BAAO,KAAA,GAAG,EAAC,QAAA,CAAA,EAAA,uBACN,KAAA,QAAA,UAAA,CAAA,2BAJF,KAAA,QAAO,CAAA,CAAA"}
@@ -0,0 +1,48 @@
import * as vue from "vue";
//#region ../../packages/components/select/src/option-group.vue.d.ts
declare const _default: typeof __VLS_export;
declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
/**
* @description name of the group
*/
label: StringConstructor;
/**
* @description whether to disable all options in this group
*/
disabled: BooleanConstructor;
}>, {
groupRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
visible: vue.ComputedRef<boolean>;
ns: {
namespace: vue.ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
/**
* @description name of the group
*/
label: StringConstructor;
/**
* @description whether to disable all options in this group
*/
disabled: BooleanConstructor;
}>> & Readonly<{}>, {
disabled: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
//#endregion
export { _default };
@@ -0,0 +1,57 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_index = require('../../../hooks/use-namespace/index.js');
const require_token = require('./token.js');
let _vueuse_core = require("@vueuse/core");
let vue = require("vue");
let lodash_unified = require("lodash-unified");
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/select/src/option-group.vue?vue&type=script&lang.ts
var option_group_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
name: "ElOptionGroup",
componentName: "ElOptionGroup",
props: {
label: String,
disabled: Boolean
},
setup(props) {
const ns = require_index.useNamespace("select");
const groupRef = (0, vue.ref)();
const instance = (0, vue.getCurrentInstance)();
const children = (0, vue.ref)([]);
(0, vue.provide)(require_token.selectGroupKey, (0, vue.reactive)({ ...(0, vue.toRefs)(props) }));
const visible = (0, vue.computed)(() => children.value.some((option) => option.visible === true));
const isOption = (node) => node.type.name === "ElOption" && !!node.component?.proxy;
const flattedChildren = (node) => {
const nodes = (0, lodash_unified.castArray)(node);
const children = [];
nodes.forEach((child) => {
if (!(0, vue.isVNode)(child)) return;
if (isOption(child)) children.push(child.component.proxy);
else if ((0, _vue_shared.isArray)(child.children) && child.children.length) children.push(...flattedChildren(child.children));
else if (child.component?.subTree) children.push(...flattedChildren(child.component.subTree));
});
return children;
};
const updateChildren = () => {
children.value = flattedChildren(instance.subTree);
};
(0, vue.onMounted)(() => {
updateChildren();
});
(0, _vueuse_core.useMutationObserver)(groupRef, updateChildren, {
attributes: true,
subtree: true,
childList: true
});
return {
groupRef,
visible,
ns
};
}
});
//#endregion
exports.default = option_group_vue_vue_type_script_lang_default;
//# sourceMappingURL=option-group.vue_vue_type_script_lang.js.map
@@ -0,0 +1 @@
{"version":3,"file":"option-group.vue_vue_type_script_lang.js","names":[],"sources":["../../../../../../packages/components/select/src/option-group.vue"],"sourcesContent":["<template>\n <ul v-show=\"visible\" ref=\"groupRef\" :class=\"ns.be('group', 'wrap')\">\n <li :class=\"ns.be('group', 'title')\">{{ label }}</li>\n <li>\n <ul :class=\"ns.b('group')\">\n <slot />\n </ul>\n </li>\n </ul>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n getCurrentInstance,\n isVNode,\n onMounted,\n provide,\n reactive,\n ref,\n toRefs,\n} from 'vue'\nimport { useMutationObserver } from '@vueuse/core'\nimport { ensureArray, isArray } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { selectGroupKey } from './token'\n\nimport type { Component, VNode, VNodeArrayChildren } from 'vue'\nimport type { OptionInternalInstance, OptionPublicInstance } from './type'\n\nexport default defineComponent({\n name: 'ElOptionGroup',\n componentName: 'ElOptionGroup',\n\n props: {\n /**\n * @description name of the group\n */\n label: String,\n /**\n * @description whether to disable all options in this group\n */\n disabled: Boolean,\n },\n setup(props) {\n const ns = useNamespace('select')\n const groupRef = ref<HTMLElement>()\n const instance = getCurrentInstance()!\n const children = ref<OptionPublicInstance[]>([])\n\n provide(\n selectGroupKey,\n reactive({\n ...toRefs(props),\n })\n )\n\n const visible = computed(() =>\n children.value.some((option) => option.visible === true)\n )\n\n const isOption = (\n node: VNode\n ): node is VNode & { component: OptionInternalInstance } =>\n (node.type as Component).name === 'ElOption' && !!node.component?.proxy\n\n // get all instances of options\n const flattedChildren = (node: VNode | VNodeArrayChildren) => {\n const nodes = ensureArray(node) as VNode[] | VNodeArrayChildren\n const children: OptionPublicInstance[] = []\n\n nodes.forEach((child) => {\n if (!isVNode(child)) return\n\n if (isOption(child)) {\n children.push(child.component.proxy)\n } else if (isArray(child.children) && child.children.length) {\n children.push(...flattedChildren(child.children))\n } else if (child.component?.subTree) {\n children.push(...flattedChildren(child.component.subTree))\n }\n })\n\n return children\n }\n\n const updateChildren = () => {\n children.value = flattedChildren(instance.subTree)\n }\n\n onMounted(() => {\n updateChildren()\n })\n\n useMutationObserver(groupRef, updateChildren, {\n attributes: true,\n subtree: true,\n childList: true,\n })\n\n return {\n groupRef,\n visible,\n ns,\n }\n },\n})\n</script>\n"],"mappings":";;;;;;;;;AA+BA,6EAA+B;CAC7B,MAAM;CACN,eAAe;CAEf,OAAO;EAIL,OAAO;EAIP,UAAU;EACX;CACD,MAAM,OAAO;EACX,MAAM,KAAK,2BAAa,SAAQ;EAChC,MAAM,yBAA4B;EAClC,MAAM,wCAA+B;EACrC,MAAM,wBAAuC,EAAE,CAAA;AAE/C,mBACE,gDACS,EACP,mBAAU,MAAM,EACjB,CAAA,CACH;EAEA,MAAM,kCACJ,SAAS,MAAM,MAAM,WAAW,OAAO,YAAY,KAAI,CACzD;EAEA,MAAM,YACJ,SAEC,KAAK,KAAmB,SAAS,cAAc,CAAC,CAAC,KAAK,WAAW;EAGpE,MAAM,mBAAmB,SAAqC;GAC5D,MAAM,sCAAoB,KAAI;GAC9B,MAAM,WAAmC,EAAC;AAE1C,SAAM,SAAS,UAAU;AACvB,QAAI,kBAAS,MAAM,CAAE;AAErB,QAAI,SAAS,MAAM,CACjB,UAAS,KAAK,MAAM,UAAU,MAAK;sCAClB,MAAM,SAAQ,IAAK,MAAM,SAAS,OACnD,UAAS,KAAK,GAAG,gBAAgB,MAAM,SAAS,CAAA;aACvC,MAAM,WAAW,QAC1B,UAAS,KAAK,GAAG,gBAAgB,MAAM,UAAU,QAAQ,CAAA;KAE5D;AAED,UAAO;;EAGT,MAAM,uBAAuB;AAC3B,YAAS,QAAQ,gBAAgB,SAAS,QAAO;;AAGnD,2BAAgB;AACd,mBAAe;IAChB;AAED,wCAAoB,UAAU,gBAAgB;GAC5C,YAAY;GACZ,SAAS;GACT,WAAW;GACZ,CAAA;AAED,SAAO;GACL;GACA;GACA;GACF;;CAEH,CAAA"}
@@ -0,0 +1,23 @@
import { EpPropMergeType } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import * as vue from "vue";
//#region ../../packages/components/select/src/option.d.ts
declare const optionProps: {
value: {
readonly type: vue.PropType<EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
label: {
readonly type: vue.PropType<EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
created: BooleanConstructor;
disabled: BooleanConstructor;
};
//#endregion
export { optionProps };
+24
View File
@@ -0,0 +1,24 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../utils/vue/props/runtime.js');
//#region ../../packages/components/select/src/option.ts
const COMPONENT_NAME = "ElOption";
const optionProps = require_runtime.buildProps({
value: {
type: [
String,
Number,
Boolean,
Object
],
required: true
},
label: { type: [String, Number] },
created: Boolean,
disabled: Boolean
});
//#endregion
exports.COMPONENT_NAME = COMPONENT_NAME;
exports.optionProps = optionProps;
//# sourceMappingURL=option.js.map
@@ -0,0 +1 @@
{"version":3,"file":"option.js","names":["buildProps"],"sources":["../../../../../../packages/components/select/src/option.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\n\nexport const COMPONENT_NAME = 'ElOption'\nexport const optionProps = buildProps({\n /**\n * @description value of option\n */\n value: {\n type: [String, Number, Boolean, Object],\n required: true as const,\n },\n /**\n * @description label of option, same as `value` if omitted\n */\n label: {\n type: [String, Number],\n },\n created: Boolean,\n /**\n * @description whether option is disabled\n */\n disabled: Boolean,\n})\n"],"mappings":";;;;AAEA,MAAa,iBAAiB;AAC9B,MAAa,cAAcA,2BAAW;CAIpC,OAAO;EACL,MAAM;GAAC;GAAQ;GAAQ;GAAS;GAAO;EACvC,UAAU;EACX;CAID,OAAO,EACL,MAAM,CAAC,QAAQ,OAAO,EACvB;CACD,SAAS;CAIT,UAAU;CACX,CAAC"}
@@ -0,0 +1,80 @@
import { EpPropMergeType } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { SelectContext } from "./type.js";
import * as vue from "vue";
//#region ../../packages/components/select/src/option.vue.d.ts
declare const _default: typeof __VLS_export;
declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
value: {
readonly type: vue.PropType<EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
label: {
readonly type: vue.PropType<EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
created: BooleanConstructor;
disabled: BooleanConstructor;
}>, {
ns: {
namespace: vue.ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
id: vue.Ref<string, string>;
containerKls: vue.ComputedRef<string[]>;
currentLabel: vue.ComputedRef<boolean | EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
itemSelected: vue.ComputedRef<boolean>;
isDisabled: vue.ComputedRef<boolean>;
select: SelectContext;
visible: vue.Ref<boolean, boolean>;
hover: vue.Ref<boolean, boolean>;
states: {
index: number;
groupDisabled: boolean;
visible: boolean;
hover: boolean;
};
hoverItem: () => void;
handleMousedown: (event: MouseEvent) => void;
updateOption: (query: string) => void;
selectOptionClick: () => void;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
value: {
readonly type: vue.PropType<EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
label: {
readonly type: vue.PropType<EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
created: BooleanConstructor;
disabled: BooleanConstructor;
}>> & Readonly<{}>, {
disabled: boolean;
created: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
//#endregion
export { _default };
@@ -0,0 +1,77 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_aria = require('../../../utils/dom/aria.js');
const require_index = require('../../../hooks/use-namespace/index.js');
const require_index$1 = require('../../../hooks/use-id/index.js');
const require_option = require('./option.js');
const require_useOption = require('./useOption.js');
let vue = require("vue");
//#region ../../packages/components/select/src/option.vue?vue&type=script&lang.ts
var option_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
name: require_option.COMPONENT_NAME,
componentName: require_option.COMPONENT_NAME,
props: require_option.optionProps,
setup(props) {
const ns = require_index.useNamespace("select");
const id = require_index$1.useId();
const containerKls = (0, vue.computed)(() => [
ns.be("dropdown", "item"),
ns.is("disabled", (0, vue.unref)(isDisabled)),
ns.is("selected", (0, vue.unref)(itemSelected)),
ns.is("hovering", (0, vue.unref)(hover))
]);
const states = (0, vue.reactive)({
index: -1,
groupDisabled: false,
visible: true,
hover: false
});
const { currentLabel, itemSelected, isDisabled, select, hoverItem, updateOption } = require_useOption.useOption(props, states);
const { visible, hover } = (0, vue.toRefs)(states);
const vm = (0, vue.getCurrentInstance)().proxy;
select.onOptionCreate(vm);
(0, vue.onBeforeUnmount)(() => {
const key = vm.value;
(0, vue.nextTick)(() => {
const { selected: selectedOptions } = select.states;
const doesSelected = selectedOptions.some((item) => {
return item.value === vm.value;
});
if (select.states.cachedOptions.get(key) === vm && !doesSelected) select.states.cachedOptions.delete(key);
});
select.onOptionDestroy(key, vm);
});
function selectOptionClick() {
if (!isDisabled.value) select.handleOptionSelect(vm);
}
const handleMousedown = (event) => {
let target = event.target;
const currentTarget = event.currentTarget;
while (target && target !== currentTarget) {
if (require_aria.isFocusable(target)) return;
target = target.parentElement;
}
event.preventDefault();
};
return {
ns,
id,
containerKls,
currentLabel,
itemSelected,
isDisabled,
select,
visible,
hover,
states,
hoverItem,
handleMousedown,
updateOption,
selectOptionClick
};
}
});
//#endregion
exports.default = option_vue_vue_type_script_lang_default;
//# sourceMappingURL=option.vue_vue_type_script_lang.js.map
@@ -0,0 +1 @@
{"version":3,"file":"option.vue_vue_type_script_lang.js","names":[],"sources":["../../../../../../packages/components/select/src/option.vue"],"sourcesContent":["<template>\n <li\n v-show=\"visible\"\n :id=\"id\"\n :class=\"containerKls\"\n role=\"option\"\n :aria-disabled=\"isDisabled || undefined\"\n :aria-selected=\"itemSelected\"\n @mousemove=\"hoverItem\"\n @mousedown=\"handleMousedown\"\n @click.stop=\"selectOptionClick\"\n >\n <slot>\n <span>{{ currentLabel }}</span>\n </slot>\n </li>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n getCurrentInstance,\n nextTick,\n onBeforeUnmount,\n reactive,\n toRefs,\n unref,\n} from 'vue'\nimport { useId, useNamespace } from '@element-plus/hooks'\nimport { useOption } from './useOption'\nimport { COMPONENT_NAME, optionProps } from './option'\nimport { isFocusable } from '@element-plus/utils'\n\nimport type {\n OptionExposed,\n OptionInternalInstance,\n OptionStates,\n} from './type'\n\nexport default defineComponent({\n name: COMPONENT_NAME,\n componentName: COMPONENT_NAME,\n\n props: optionProps,\n\n setup(props) {\n const ns = useNamespace('select')\n const id = useId()\n\n const containerKls = computed(() => [\n ns.be('dropdown', 'item'),\n ns.is('disabled', unref(isDisabled)),\n ns.is('selected', unref(itemSelected)),\n ns.is('hovering', unref(hover)),\n ])\n\n const states = reactive<OptionStates>({\n index: -1,\n groupDisabled: false,\n visible: true,\n hover: false,\n })\n\n const {\n currentLabel,\n itemSelected,\n isDisabled,\n select,\n hoverItem,\n updateOption,\n } = useOption(props, states)\n\n const { visible, hover } = toRefs(states)\n\n const vm = (getCurrentInstance()! as OptionInternalInstance).proxy\n\n select.onOptionCreate(vm)\n\n onBeforeUnmount(() => {\n const key = vm.value\n\n // if option is not selected, remove it from cache\n nextTick(() => {\n const { selected: selectedOptions } = select.states\n const doesSelected = selectedOptions.some((item) => {\n return item.value === vm.value\n })\n if (select.states.cachedOptions.get(key) === vm && !doesSelected) {\n select.states.cachedOptions.delete(key)\n }\n })\n select.onOptionDestroy(key, vm)\n })\n\n function selectOptionClick() {\n if (!isDisabled.value) {\n select.handleOptionSelect(vm)\n }\n }\n\n const handleMousedown = (event: MouseEvent) => {\n let target = event.target as HTMLElement | null\n const currentTarget = event.currentTarget as HTMLElement\n\n while (target && target !== currentTarget) {\n if (isFocusable(target)) {\n return\n }\n target = target.parentElement\n }\n\n event.preventDefault()\n }\n\n return {\n ns,\n id,\n containerKls,\n currentLabel,\n itemSelected,\n isDisabled,\n select,\n visible,\n hover,\n states,\n\n hoverItem,\n handleMousedown,\n updateOption,\n selectOptionClick,\n } satisfies OptionExposed\n },\n})\n</script>\n"],"mappings":";;;;;;;;;AAwCA,uEAA+B;CAC7B,MAAM;CACN,eAAe;CAEf,OAAO;CAEP,MAAM,OAAO;EACX,MAAM,KAAK,2BAAa,SAAQ;EAChC,MAAM,KAAK,uBAAM;EAEjB,MAAM,uCAA8B;GAClC,GAAG,GAAG,YAAY,OAAO;GACzB,GAAG,GAAG,2BAAkB,WAAW,CAAC;GACpC,GAAG,GAAG,2BAAkB,aAAa,CAAC;GACtC,GAAG,GAAG,2BAAkB,MAAM,CAAC;GAChC,CAAA;EAED,MAAM,2BAAgC;GACpC,OAAO;GACP,eAAe;GACf,SAAS;GACT,OAAO;GACR,CAAA;EAED,MAAM,EACJ,cACA,cACA,YACA,QACA,WACA,iBACE,4BAAU,OAAO,OAAM;EAE3B,MAAM,EAAE,SAAS,0BAAiB,OAAM;EAExC,MAAM,kCAA0B,CAA6B;AAE7D,SAAO,eAAe,GAAE;AAExB,iCAAsB;GACpB,MAAM,MAAM,GAAG;AAGf,2BAAe;IACb,MAAM,EAAE,UAAU,oBAAoB,OAAO;IAC7C,MAAM,eAAe,gBAAgB,MAAM,SAAS;AAClD,YAAO,KAAK,UAAU,GAAG;MAC1B;AACD,QAAI,OAAO,OAAO,cAAc,IAAI,IAAG,KAAM,MAAM,CAAC,aAClD,QAAO,OAAO,cAAc,OAAO,IAAG;KAEzC;AACD,UAAO,gBAAgB,KAAK,GAAE;IAC/B;EAED,SAAS,oBAAoB;AAC3B,OAAI,CAAC,WAAW,MACd,QAAO,mBAAmB,GAAE;;EAIhC,MAAM,mBAAmB,UAAsB;GAC7C,IAAI,SAAS,MAAM;GACnB,MAAM,gBAAgB,MAAM;AAE5B,UAAO,UAAU,WAAW,eAAe;AACzC,QAAI,yBAAY,OAAO,CACrB;AAEF,aAAS,OAAO;;AAGlB,SAAM,gBAAe;;AAGvB,SAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GACF;;CAEH,CAAA"}
@@ -0,0 +1,29 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require__plugin_vue_export_helper = require('../../../_virtual/_plugin-vue_export-helper.js');
const require_option_vue_vue_type_script_lang = require('./option.vue_vue_type_script_lang.js');
let vue = require("vue");
//#region ../../packages/components/select/src/option.vue
const _hoisted_1 = [
"id",
"aria-disabled",
"aria-selected"
];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("li", {
id: _ctx.id,
class: (0, vue.normalizeClass)(_ctx.containerKls),
role: "option",
"aria-disabled": _ctx.isDisabled || void 0,
"aria-selected": _ctx.itemSelected,
onMousemove: _cache[0] || (_cache[0] = (...args) => _ctx.hoverItem && _ctx.hoverItem(...args)),
onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.handleMousedown && _ctx.handleMousedown(...args)),
onClick: _cache[2] || (_cache[2] = (0, vue.withModifiers)((...args) => _ctx.selectOptionClick && _ctx.selectOptionClick(...args), ["stop"]))
}, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(_ctx.currentLabel), 1)])], 42, _hoisted_1)), [[vue.vShow, _ctx.visible]]);
}
var option_default = /* @__PURE__ */ require__plugin_vue_export_helper.default(require_option_vue_vue_type_script_lang.default, [["render", _sfc_render]]);
//#endregion
exports.default = option_default;
//# sourceMappingURL=option2.js.map
@@ -0,0 +1 @@
{"version":3,"file":"option2.js","names":[],"sources":["../../../../../../packages/components/select/src/option.vue"],"sourcesContent":["<template>\n <li\n v-show=\"visible\"\n :id=\"id\"\n :class=\"containerKls\"\n role=\"option\"\n :aria-disabled=\"isDisabled || undefined\"\n :aria-selected=\"itemSelected\"\n @mousemove=\"hoverItem\"\n @mousedown=\"handleMousedown\"\n @click.stop=\"selectOptionClick\"\n >\n <slot>\n <span>{{ currentLabel }}</span>\n </slot>\n </li>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n getCurrentInstance,\n nextTick,\n onBeforeUnmount,\n reactive,\n toRefs,\n unref,\n} from 'vue'\nimport { useId, useNamespace } from '@element-plus/hooks'\nimport { useOption } from './useOption'\nimport { COMPONENT_NAME, optionProps } from './option'\nimport { isFocusable } from '@element-plus/utils'\n\nimport type {\n OptionExposed,\n OptionInternalInstance,\n OptionStates,\n} from './type'\n\nexport default defineComponent({\n name: COMPONENT_NAME,\n componentName: COMPONENT_NAME,\n\n props: optionProps,\n\n setup(props) {\n const ns = useNamespace('select')\n const id = useId()\n\n const containerKls = computed(() => [\n ns.be('dropdown', 'item'),\n ns.is('disabled', unref(isDisabled)),\n ns.is('selected', unref(itemSelected)),\n ns.is('hovering', unref(hover)),\n ])\n\n const states = reactive<OptionStates>({\n index: -1,\n groupDisabled: false,\n visible: true,\n hover: false,\n })\n\n const {\n currentLabel,\n itemSelected,\n isDisabled,\n select,\n hoverItem,\n updateOption,\n } = useOption(props, states)\n\n const { visible, hover } = toRefs(states)\n\n const vm = (getCurrentInstance()! as OptionInternalInstance).proxy\n\n select.onOptionCreate(vm)\n\n onBeforeUnmount(() => {\n const key = vm.value\n\n // if option is not selected, remove it from cache\n nextTick(() => {\n const { selected: selectedOptions } = select.states\n const doesSelected = selectedOptions.some((item) => {\n return item.value === vm.value\n })\n if (select.states.cachedOptions.get(key) === vm && !doesSelected) {\n select.states.cachedOptions.delete(key)\n }\n })\n select.onOptionDestroy(key, vm)\n })\n\n function selectOptionClick() {\n if (!isDisabled.value) {\n select.handleOptionSelect(vm)\n }\n }\n\n const handleMousedown = (event: MouseEvent) => {\n let target = event.target as HTMLElement | null\n const currentTarget = event.currentTarget as HTMLElement\n\n while (target && target !== currentTarget) {\n if (isFocusable(target)) {\n return\n }\n target = target.parentElement\n }\n\n event.preventDefault()\n }\n\n return {\n ns,\n id,\n containerKls,\n currentLabel,\n itemSelected,\n isDisabled,\n select,\n visible,\n hover,\n states,\n\n hoverItem,\n handleMousedown,\n updateOption,\n selectOptionClick,\n } satisfies OptionExposed\n },\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;mFAeO,MAAA;EAZF,IAAI,KAAA;EACJ,+BAAO,KAAA,aAAY;EACpB,MAAK;EACJ,iBAAe,KAAA,cAAc,KAAA;EAC7B,iBAAe,KAAA;EACf,aAAS,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,KAAA,aAAA,KAAA,UAAA,GAAA,KAAA;EACX,aAAS,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,KAAA,mBAAA,KAAA,gBAAA,GAAA,KAAA;EACX,SAAK,OAAA,OAAA,OAAA,6BAAA,GAAA,SAAO,KAAA,qBAAA,KAAA,kBAAA,GAAA,KAAA,EAAiB,CAAA,OAAA,CAAA;EAAA,EAAA,qBAIvB,KAAA,QAAA,WAAA,EAAA,QAAA,6BAD0B,QAAA,+BAAtB,KAAA,aAAY,EAAA,EAAA,CAAA,CAAA,kCAXf,KAAA,QAAO,CAAA,CAAA"}
@@ -0,0 +1,38 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_token = require('./token.js');
let lodash_unified = require("lodash-unified");
let vue = require("vue");
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/select/src/options.ts
var options_default = (0, vue.defineComponent)({
name: "ElOptions",
setup(_, { slots }) {
const select = (0, vue.inject)(require_token.selectKey);
let cachedValueList = [];
return () => {
const children = slots.default?.();
const valueList = [];
function filterOptions(children) {
if (!(0, _vue_shared.isArray)(children)) return;
children.forEach((item) => {
const name = (item?.type || {})?.name;
if (name === "ElOptionGroup") filterOptions(!(0, _vue_shared.isString)(item.children) && !(0, _vue_shared.isArray)(item.children) && (0, _vue_shared.isFunction)(item.children?.default) ? item.children?.default() : item.children);
else if (name === "ElOption") valueList.push(item.props?.value);
else if ((0, _vue_shared.isArray)(item.children)) filterOptions(item.children);
});
}
if (children.length) filterOptions(children[0]?.children);
if (!(0, lodash_unified.isEqual)(valueList, cachedValueList)) {
cachedValueList = valueList;
if (select) select.states.optionValues = valueList;
}
return children;
};
}
});
//#endregion
exports.default = options_default;
//# sourceMappingURL=options.js.map
@@ -0,0 +1 @@
{"version":3,"file":"options.js","names":["selectKey"],"sources":["../../../../../../packages/components/select/src/options.ts"],"sourcesContent":["import { defineComponent, inject } from 'vue'\nimport { isEqual } from 'lodash-unified'\nimport { isArray, isFunction, isString } from '@element-plus/utils'\nimport { selectKey } from './token'\n\nimport type { Component, VNode, VNodeNormalizedChildren } from 'vue'\nimport type { OptionValue } from './type'\n\nexport default defineComponent({\n name: 'ElOptions',\n setup(_, { slots }) {\n const select = inject(selectKey)\n let cachedValueList: OptionValue[] = []\n\n return () => {\n const children = slots.default?.()!\n const valueList: OptionValue[] = []\n\n function filterOptions(children?: VNodeNormalizedChildren) {\n if (!isArray(children)) return\n ;(children as VNode[]).forEach((item) => {\n const name = ((item?.type || {}) as Component)?.name\n\n if (name === 'ElOptionGroup') {\n filterOptions(\n !isString(item.children) &&\n !isArray(item.children) &&\n isFunction(item.children?.default)\n ? item.children?.default()\n : item.children\n )\n } else if (name === 'ElOption') {\n valueList.push(item.props?.value)\n } else if (isArray(item.children)) {\n filterOptions(item.children)\n }\n })\n }\n\n if (children.length) {\n filterOptions(children[0]?.children)\n }\n\n if (!isEqual(valueList, cachedValueList)) {\n cachedValueList = valueList\n if (select) {\n select.states.optionValues = valueList\n }\n }\n\n return children\n }\n },\n})\n"],"mappings":";;;;;;;;AAQA,+CAA+B;CAC7B,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,MAAM,yBAAgBA,wBAAU;EAChC,IAAI,kBAAiC,EAAE;AAEvC,eAAa;GACX,MAAM,WAAW,MAAM,WAAW;GAClC,MAAM,YAA2B,EAAE;GAEnC,SAAS,cAAc,UAAoC;AACzD,QAAI,0BAAS,SAAS,CAAE;AACvB,IAAC,SAAqB,SAAS,SAAS;KACvC,MAAM,QAAS,MAAM,QAAQ,EAAE,GAAiB;AAEhD,SAAI,SAAS,gBACX,eACE,2BAAU,KAAK,SAAS,IACtB,0BAAS,KAAK,SAAS,gCACZ,KAAK,UAAU,QAAQ,GAChC,KAAK,UAAU,SAAS,GACxB,KAAK,SACV;cACQ,SAAS,WAClB,WAAU,KAAK,KAAK,OAAO,MAAM;uCAChB,KAAK,SAAS,CAC/B,eAAc,KAAK,SAAS;MAE9B;;AAGJ,OAAI,SAAS,OACX,eAAc,SAAS,IAAI,SAAS;AAGtC,OAAI,6BAAS,WAAW,gBAAgB,EAAE;AACxC,sBAAkB;AAClB,QAAI,OACF,QAAO,OAAO,eAAe;;AAIjC,UAAO;;;CAGZ,CAAC"}
@@ -0,0 +1,32 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require__plugin_vue_export_helper = require('../../../_virtual/_plugin-vue_export-helper.js');
const require_select_dropdown_vue_vue_type_script_lang = require('./select-dropdown.vue_vue_type_script_lang.js');
let vue = require("vue");
//#region ../../packages/components/select/src/select-dropdown.vue
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
class: (0, vue.normalizeClass)([
_ctx.ns.b("dropdown"),
_ctx.ns.is("multiple", _ctx.isMultiple),
_ctx.popperClass
]),
style: (0, vue.normalizeStyle)({ [_ctx.isFitInputWidth ? "width" : "minWidth"]: _ctx.minWidth })
}, [
_ctx.$slots.header ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: 0,
class: (0, vue.normalizeClass)(_ctx.ns.be("dropdown", "header"))
}, [(0, vue.renderSlot)(_ctx.$slots, "header")], 2)) : (0, vue.createCommentVNode)("v-if", true),
(0, vue.renderSlot)(_ctx.$slots, "default"),
_ctx.$slots.footer ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: 1,
class: (0, vue.normalizeClass)(_ctx.ns.be("dropdown", "footer"))
}, [(0, vue.renderSlot)(_ctx.$slots, "footer")], 2)) : (0, vue.createCommentVNode)("v-if", true)
], 6);
}
var select_dropdown_default = /* @__PURE__ */ require__plugin_vue_export_helper.default(require_select_dropdown_vue_vue_type_script_lang.default, [["render", _sfc_render]]);
//#endregion
exports.default = select_dropdown_default;
//# sourceMappingURL=select-dropdown.js.map
@@ -0,0 +1 @@
{"version":3,"file":"select-dropdown.js","names":[],"sources":["../../../../../../packages/components/select/src/select-dropdown.vue"],"sourcesContent":["<template>\n <div\n :class=\"[ns.b('dropdown'), ns.is('multiple', isMultiple), popperClass]\"\n :style=\"{ [isFitInputWidth ? 'width' : 'minWidth']: minWidth }\"\n >\n <div v-if=\"$slots.header\" :class=\"ns.be('dropdown', 'header')\">\n <slot name=\"header\" />\n </div>\n <slot />\n <div v-if=\"$slots.footer\" :class=\"ns.be('dropdown', 'footer')\">\n <slot name=\"footer\" />\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, onMounted, ref } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { useNamespace } from '@element-plus/hooks'\nimport { selectKey } from './token'\nimport { BORDER_HORIZONTAL_WIDTH } from '@element-plus/constants'\n\nexport default defineComponent({\n name: 'ElSelectDropdown',\n\n componentName: 'ElSelectDropdown',\n\n setup() {\n const select = inject(selectKey)!\n const ns = useNamespace('select')\n\n // computed\n const popperClass = computed(() => select.props.popperClass)\n const isMultiple = computed(() => select.props.multiple)\n const isFitInputWidth = computed(() => select.props.fitInputWidth)\n const minWidth = ref('')\n\n function updateMinWidth() {\n const offsetWidth = select.selectRef?.offsetWidth\n if (offsetWidth) {\n minWidth.value = `${offsetWidth - BORDER_HORIZONTAL_WIDTH}px`\n } else {\n minWidth.value = ''\n }\n }\n\n onMounted(() => {\n // TODO: updatePopper\n // popper.value.update()\n updateMinWidth()\n useResizeObserver(select.selectRef, updateMinWidth)\n })\n\n return {\n ns,\n minWidth,\n popperClass,\n isMultiple,\n isFitInputWidth,\n }\n },\n})\n</script>\n"],"mappings":";;;;;;;;0DAYQ,OAAA;EAVH,+BAAK;GAAG,KAAA,GAAG,EAAC,WAAA;GAAc,KAAA,GAAG,GAAE,YAAa,KAAA,WAAU;GAAG,KAAA;GAAW,CAAA;EACpE,+BAAK,GAAK,KAAA,kBAAe,UAAA,aAA0B,KAAA,UAAQ,CAAA;EAAA;EAEjD,KAAA,OAAO,8BAAA,8BAEZ,OAAA;GAAA,KAAA;GAFqB,+BAAO,KAAA,GAAG,GAAE,YAAA,SAAA,CAAA;GAAA,uBACf,KAAA,QAAA,SAAA,CAAA;sBAEhB,KAAA,QAAA,UAAA;EACG,KAAA,OAAO,8BAAA,8BAEZ,OAAA;GAAA,KAAA;GAFqB,+BAAO,KAAA,GAAG,GAAE,YAAA,SAAA,CAAA;GAAA,uBACf,KAAA,QAAA,SAAA,CAAA"}
@@ -0,0 +1,40 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_form = require('../../../constants/form.js');
const require_index = require('../../../hooks/use-namespace/index.js');
const require_token = require('./token.js');
let _vueuse_core = require("@vueuse/core");
let vue = require("vue");
//#region ../../packages/components/select/src/select-dropdown.vue?vue&type=script&lang.ts
var select_dropdown_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
name: "ElSelectDropdown",
componentName: "ElSelectDropdown",
setup() {
const select = (0, vue.inject)(require_token.selectKey);
const ns = require_index.useNamespace("select");
const popperClass = (0, vue.computed)(() => select.props.popperClass);
const isMultiple = (0, vue.computed)(() => select.props.multiple);
const isFitInputWidth = (0, vue.computed)(() => select.props.fitInputWidth);
const minWidth = (0, vue.ref)("");
function updateMinWidth() {
const offsetWidth = select.selectRef?.offsetWidth;
if (offsetWidth) minWidth.value = `${offsetWidth - require_form.BORDER_HORIZONTAL_WIDTH}px`;
else minWidth.value = "";
}
(0, vue.onMounted)(() => {
updateMinWidth();
(0, _vueuse_core.useResizeObserver)(select.selectRef, updateMinWidth);
});
return {
ns,
minWidth,
popperClass,
isMultiple,
isFitInputWidth
};
}
});
//#endregion
exports.default = select_dropdown_vue_vue_type_script_lang_default;
//# sourceMappingURL=select-dropdown.vue_vue_type_script_lang.js.map
@@ -0,0 +1 @@
{"version":3,"file":"select-dropdown.vue_vue_type_script_lang.js","names":[],"sources":["../../../../../../packages/components/select/src/select-dropdown.vue"],"sourcesContent":["<template>\n <div\n :class=\"[ns.b('dropdown'), ns.is('multiple', isMultiple), popperClass]\"\n :style=\"{ [isFitInputWidth ? 'width' : 'minWidth']: minWidth }\"\n >\n <div v-if=\"$slots.header\" :class=\"ns.be('dropdown', 'header')\">\n <slot name=\"header\" />\n </div>\n <slot />\n <div v-if=\"$slots.footer\" :class=\"ns.be('dropdown', 'footer')\">\n <slot name=\"footer\" />\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, onMounted, ref } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { useNamespace } from '@element-plus/hooks'\nimport { selectKey } from './token'\nimport { BORDER_HORIZONTAL_WIDTH } from '@element-plus/constants'\n\nexport default defineComponent({\n name: 'ElSelectDropdown',\n\n componentName: 'ElSelectDropdown',\n\n setup() {\n const select = inject(selectKey)!\n const ns = useNamespace('select')\n\n // computed\n const popperClass = computed(() => select.props.popperClass)\n const isMultiple = computed(() => select.props.multiple)\n const isFitInputWidth = computed(() => select.props.fitInputWidth)\n const minWidth = ref('')\n\n function updateMinWidth() {\n const offsetWidth = select.selectRef?.offsetWidth\n if (offsetWidth) {\n minWidth.value = `${offsetWidth - BORDER_HORIZONTAL_WIDTH}px`\n } else {\n minWidth.value = ''\n }\n }\n\n onMounted(() => {\n // TODO: updatePopper\n // popper.value.update()\n updateMinWidth()\n useResizeObserver(select.selectRef, updateMinWidth)\n })\n\n return {\n ns,\n minWidth,\n popperClass,\n isMultiple,\n isFitInputWidth,\n }\n },\n})\n</script>\n"],"mappings":";;;;;;;;AAsBA,gFAA+B;CAC7B,MAAM;CAEN,eAAe;CAEf,QAAQ;EACN,MAAM,yBAAgB,wBAAU;EAChC,MAAM,KAAK,2BAAa,SAAQ;EAGhC,MAAM,sCAA6B,OAAO,MAAM,YAAW;EAC3D,MAAM,qCAA4B,OAAO,MAAM,SAAQ;EACvD,MAAM,0CAAiC,OAAO,MAAM,cAAa;EACjE,MAAM,wBAAe,GAAE;EAEvB,SAAS,iBAAiB;GACxB,MAAM,cAAc,OAAO,WAAW;AACtC,OAAI,YACF,UAAS,QAAQ,GAAG,cAAc,qCAAwB;OAE1D,UAAS,QAAQ;;AAIrB,2BAAgB;AAGd,mBAAe;AACf,uCAAkB,OAAO,WAAW,eAAc;IACnD;AAED,SAAO;GACL;GACA;GACA;GACA;GACA;GACF;;CAEH,CAAA"}
@@ -0,0 +1,153 @@
import { EmitFn } from "../../../utils/vue/typescript.js";
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { PopperEffect } from "../../popper/src/popper.js";
import { Props } from "../../select-v2/src/useProps.js";
import { _default } from "./select.vue.js";
import { Options, Placement } from "../../popper/index.js";
import * as vue from "vue";
import { CSSProperties, ExtractPropTypes, ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/select/src/select.d.ts
/**
* @description Tag tooltip configuration interface
*/
interface TagTooltipProps {
appendTo?: string | HTMLElement;
placement?: Placement;
fallbackPlacements?: Placement[];
effect?: PopperEffect;
popperClass?: string;
popperStyle?: string | CSSProperties;
transition?: string;
teleported?: boolean;
popperOptions?: Partial<Options>;
showAfter?: number;
hideAfter?: number;
autoClose?: number;
offset?: number;
}
declare const selectProps: {
ariaLabel: StringConstructor;
emptyValues: ArrayConstructor;
valueOnClear: EpPropFinalized<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | (((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null)) | null)[], unknown, unknown, undefined, boolean>;
name: StringConstructor;
id: StringConstructor;
modelValue: EpPropFinalized<(new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null) | (((new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null)) | null)[], unknown, unknown, undefined, boolean>;
autocomplete: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
automaticDropdown: BooleanConstructor;
size: {
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
effect: EpPropFinalized<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown, string, boolean>;
disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
clearable: BooleanConstructor;
filterable: BooleanConstructor;
allowCreate: BooleanConstructor;
loading: BooleanConstructor;
popperClass: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
popperStyle: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties) | (((new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => Partial<Options>, boolean>;
remote: BooleanConstructor;
debounce: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
loadingText: StringConstructor;
noMatchText: StringConstructor;
noDataText: StringConstructor;
remoteMethod: {
readonly type: vue.PropType<(query: string) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
filterMethod: {
readonly type: vue.PropType<(query: string) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
multiple: BooleanConstructor;
multipleLimit: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
placeholder: {
readonly type: vue.PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
defaultFirstOption: BooleanConstructor;
reserveKeyword: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
valueKey: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
collapseTags: BooleanConstructor;
collapseTagsTooltip: BooleanConstructor;
tagTooltip: EpPropFinalized<(new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps) | (((new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps)) | null)[], unknown, unknown, () => {}, boolean>;
maxCollapseTags: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
persistent: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
clearIcon: EpPropFinalized<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown, vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
fitInputWidth: BooleanConstructor;
suffixIcon: EpPropFinalized<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown, vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
tagType: {
default: string;
type: vue.PropType<EpPropMergeType<StringConstructor, "info" | "primary" | "success" | "warning" | "danger", unknown>>;
required: false;
validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
tagEffect: {
default: string;
type: vue.PropType<EpPropMergeType<StringConstructor, "light" | "dark" | "plain", unknown>>;
required: false;
validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
remoteShowSuffix: BooleanConstructor;
showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
offset: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
placement: EpPropFinalized<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, string, boolean>;
fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | (((new (...args: any[]) => Placement[]) | (() => Placement[])) | null)[], unknown, unknown, string[], boolean>;
tabindex: EpPropFinalized<(NumberConstructor | StringConstructor)[], unknown, unknown, number, boolean>;
appendTo: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>) | (((new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
options: {
readonly type: vue.PropType<Record<string, any>[]>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
props: EpPropFinalized<(new (...args: any[]) => Props) | (() => Props) | (((new (...args: any[]) => Props) | (() => Props)) | null)[], unknown, unknown, () => Required<Props>, boolean>;
};
declare const selectEmits: {
"update:modelValue": (val: SelectProps["modelValue"]) => boolean;
change: (val: SelectProps["modelValue"]) => boolean;
'popup-scroll': ({
scrollTop,
scrollLeft
}: {
scrollTop: number;
scrollLeft: number;
}) => boolean;
'remove-tag': (val: unknown) => boolean;
'visible-change': (visible: boolean) => boolean;
focus: (evt: FocusEvent) => boolean;
blur: (evt: FocusEvent) => boolean;
clear: () => boolean;
};
type SelectProps = ExtractPropTypes<typeof selectProps>;
type SelectPropsPublic = ExtractPublicPropTypes<typeof selectProps>;
type SelectEmits = EmitFn<typeof selectEmits>;
type SelectInstance = InstanceType<typeof _default> & unknown;
type SelectOptionProps = Props;
//#endregion
export { SelectEmits, SelectInstance, SelectOptionProps, SelectProps, SelectPropsPublic, TagTooltipProps, selectEmits, selectProps };
+168
View File
@@ -0,0 +1,168 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_event = require('../../../constants/event.js');
const require_runtime$1 = require('../../../utils/vue/props/runtime.js');
const require_icon = require('../../../utils/vue/icon.js');
const require_index = require('../../../hooks/use-size/index.js');
const require_index$1 = require('../../../hooks/use-empty-values/index.js');
const require_index$2 = require('../../../hooks/use-aria/index.js');
const require_content = require('../../tooltip/src/content.js');
const require_scrollbar = require('../../scrollbar/src/scrollbar.js');
const require_tag = require('../../tag/src/tag.js');
const require_useProps = require('../../select-v2/src/useProps.js');
let _element_plus_icons_vue = require("@element-plus/icons-vue");
let _popperjs_core = require("@popperjs/core");
//#region ../../packages/components/select/src/select.ts
const selectProps = require_runtime$1.buildProps({
name: String,
id: String,
modelValue: {
type: require_runtime$1.definePropType([
Array,
String,
Number,
Boolean,
Object
]),
default: void 0
},
autocomplete: {
type: String,
default: "off"
},
automaticDropdown: Boolean,
size: require_index.useSizeProp,
effect: {
type: require_runtime$1.definePropType(String),
default: "light"
},
disabled: {
type: Boolean,
default: void 0
},
clearable: Boolean,
filterable: Boolean,
allowCreate: Boolean,
loading: Boolean,
popperClass: {
type: String,
default: ""
},
popperStyle: { type: require_runtime$1.definePropType([String, Object]) },
popperOptions: {
type: require_runtime$1.definePropType(Object),
default: () => ({})
},
remote: Boolean,
debounce: {
type: Number,
default: 300
},
loadingText: String,
noMatchText: String,
noDataText: String,
remoteMethod: { type: require_runtime$1.definePropType(Function) },
filterMethod: { type: require_runtime$1.definePropType(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,
tagTooltip: {
type: require_runtime$1.definePropType(Object),
default: () => ({})
},
maxCollapseTags: {
type: Number,
default: 1
},
teleported: require_content.useTooltipContentProps.teleported,
persistent: {
type: Boolean,
default: true
},
clearIcon: {
type: require_icon.iconPropType,
default: _element_plus_icons_vue.CircleClose
},
fitInputWidth: Boolean,
suffixIcon: {
type: require_icon.iconPropType,
default: _element_plus_icons_vue.ArrowDown
},
tagType: {
...require_tag.tagProps.type,
default: "info"
},
tagEffect: {
...require_tag.tagProps.effect,
default: "light"
},
validateEvent: {
type: Boolean,
default: true
},
remoteShowSuffix: Boolean,
showArrow: {
type: Boolean,
default: true
},
offset: {
type: Number,
default: 12
},
placement: {
type: require_runtime$1.definePropType(String),
values: _popperjs_core.placements,
default: "bottom-start"
},
fallbackPlacements: {
type: require_runtime$1.definePropType(Array),
default: [
"bottom-start",
"top-start",
"right",
"left"
]
},
tabindex: {
type: [String, Number],
default: 0
},
appendTo: require_content.useTooltipContentProps.appendTo,
options: { type: require_runtime$1.definePropType(Array) },
props: {
type: require_runtime$1.definePropType(Object),
default: () => require_useProps.defaultProps
},
...require_index$1.useEmptyValuesProps,
...require_index$2.useAriaProps(["ariaLabel"])
});
const selectEmits = {
[require_event.UPDATE_MODEL_EVENT]: (val) => true,
[require_event.CHANGE_EVENT]: (val) => true,
"popup-scroll": require_scrollbar.scrollbarEmits.scroll,
"remove-tag": (val) => true,
"visible-change": (visible) => true,
focus: (evt) => evt instanceof FocusEvent,
blur: (evt) => evt instanceof FocusEvent,
clear: () => true
};
//#endregion
exports.selectEmits = selectEmits;
exports.selectProps = selectProps;
//# sourceMappingURL=select.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,913 @@
import { SFCWithInstall } from "../../../utils/vue/typescript.js";
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import { Arrayable } from "../../../utils/typescript.js";
import "../../../utils/index.js";
import { PopperEffect, PopperInstance, roleTypes } from "../../popper/src/popper.js";
import { TagProps } from "../../tag/src/tag.js";
import "../../tag/index.js";
import { TooltipTriggerType } from "../../tooltip/src/trigger.js";
import { TooltipContentInstance } from "../../tooltip/src/content.js";
import { TooltipInstance, UseTooltipProps } from "../../tooltip/src/tooltip.js";
import "../../tooltip/index.js";
import { ScrollbarDirection, ScrollbarInstance, ScrollbarProps } from "../../scrollbar/src/scrollbar.js";
import "../../scrollbar/index.js";
import { IconProps } from "../../icon/src/icon.js";
import "../../icon/index.js";
import { Option } from "../../select-v2/src/select.types.js";
import { Props } from "../../select-v2/src/useProps.js";
import { TagTooltipProps } from "./select.js";
import { OptionBasic, OptionPublicInstance, OptionValue, SelectContext, SelectStates } from "./type.js";
import "../../../index.js";
import { Options, Placement } from "../../popper/index.js";
import * as vue from "vue";
import { VNode } from "vue";
import * as _vueuse_core0 from "@vueuse/core";
//#region ../../packages/components/select/src/select.vue.d.ts
declare const _default: typeof __VLS_export;
declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
ariaLabel: StringConstructor;
emptyValues: ArrayConstructor;
valueOnClear: EpPropFinalized<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | (((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null)) | null)[], unknown, unknown, undefined, boolean>;
name: StringConstructor;
id: StringConstructor;
modelValue: EpPropFinalized<(new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null) | (((new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null)) | null)[], unknown, unknown, undefined, boolean>;
autocomplete: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
automaticDropdown: BooleanConstructor;
size: {
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
effect: EpPropFinalized<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown, string, boolean>;
disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
clearable: BooleanConstructor;
filterable: BooleanConstructor;
allowCreate: BooleanConstructor;
loading: BooleanConstructor;
popperClass: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
popperStyle: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | vue.CSSProperties) | (() => string | vue.CSSProperties) | (((new (...args: any[]) => string | vue.CSSProperties) | (() => string | vue.CSSProperties)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => Partial<Options>, boolean>;
remote: BooleanConstructor;
debounce: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
loadingText: StringConstructor;
noMatchText: StringConstructor;
noDataText: StringConstructor;
remoteMethod: {
readonly type: vue.PropType<(query: string) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
filterMethod: {
readonly type: vue.PropType<(query: string) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
multiple: BooleanConstructor;
multipleLimit: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
placeholder: {
readonly type: vue.PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
defaultFirstOption: BooleanConstructor;
reserveKeyword: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
valueKey: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
collapseTags: BooleanConstructor;
collapseTagsTooltip: BooleanConstructor;
tagTooltip: EpPropFinalized<(new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps) | (((new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps)) | null)[], unknown, unknown, () => {}, boolean>;
maxCollapseTags: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
persistent: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
clearIcon: EpPropFinalized<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown, vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
fitInputWidth: BooleanConstructor;
suffixIcon: EpPropFinalized<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown, vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
tagType: {
default: string;
type: vue.PropType<EpPropMergeType<StringConstructor, "info" | "primary" | "success" | "warning" | "danger", unknown>>;
required: false;
validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
tagEffect: {
default: string;
type: vue.PropType<EpPropMergeType<StringConstructor, "light" | "dark" | "plain", unknown>>;
required: false;
validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
remoteShowSuffix: BooleanConstructor;
showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
offset: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
placement: EpPropFinalized<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, string, boolean>;
fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | (((new (...args: any[]) => Placement[]) | (() => Placement[])) | null)[], unknown, unknown, string[], boolean>;
tabindex: EpPropFinalized<(NumberConstructor | StringConstructor)[], unknown, unknown, number, boolean>;
appendTo: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>) | (((new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
options: {
readonly type: vue.PropType<Record<string, any>[]>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
props: EpPropFinalized<(new (...args: any[]) => Props) | (() => Props) | (((new (...args: any[]) => Props) | (() => Props)) | null)[], unknown, unknown, () => Required<Props>, boolean>;
}>, {
modelValue: vue.ComputedRef<string | number | boolean | any[] | Record<string, any> | null | undefined>;
selectedLabel: vue.ComputedRef<string | string[]>;
calculatorRef: vue.ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
inputStyle: vue.ComputedRef<{
minWidth: string;
}>;
getLabel: (option: Option) => any;
getValue: (option: Option) => any;
getOptions: (option: Option) => any;
getDisabled: (option: Option) => any;
getOptionProps: (option: Record<string, any>) => {
label: any;
value: any;
disabled: any;
};
inputId: vue.Ref<string | undefined, string | undefined>;
contentId: vue.Ref<string, string>;
nsSelect: {
namespace: vue.ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
nsInput: {
namespace: vue.ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
states: {
inputValue: string;
options: Map<EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>, OptionPublicInstance> & Omit<Map<EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>, OptionPublicInstance>, keyof Map<any, any>>;
cachedOptions: Map<EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>, OptionPublicInstance> & Omit<Map<EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>, OptionPublicInstance>, keyof Map<any, any>>;
optionValues: OptionValue[];
selected: {
index: number;
value: OptionValue;
currentLabel: OptionPublicInstance["currentLabel"];
isDisabled?: OptionPublicInstance["isDisabled"] | undefined;
}[];
hoveringIndex: number;
inputHovering: boolean;
selectionWidth: number;
collapseItemWidth: number;
previousQuery: string | null;
selectedLabel: string;
menuVisibleOnFocus: boolean;
isBeforeHide: boolean;
};
isFocused: vue.Ref<boolean, boolean>;
expanded: vue.Ref<boolean, boolean>;
optionsArray: vue.ComputedRef<OptionPublicInstance[]>;
hoverOption: vue.Ref<any, any>;
selectSize: vue.ComputedRef<"" | "default" | "small" | "large">;
filteredOptionsCount: vue.ComputedRef<number>;
updateTooltip: () => void;
updateTagTooltip: () => void;
debouncedOnInputChange: _vueuse_core0.PromisifyFn<() => void>;
onInput: (event: Event) => void;
deletePrevTag: (e: KeyboardEvent) => void;
deleteTag: (event: MouseEvent, tag: OptionBasic) => void;
deleteSelected: (event: Event) => void;
handleOptionSelect: (option: OptionPublicInstance) => void;
scrollToOption: (option: OptionPublicInstance | OptionPublicInstance[] | SelectStates["selected"]) => void;
hasModelValue: vue.ComputedRef<boolean>;
shouldShowPlaceholder: vue.ComputedRef<boolean>;
currentPlaceholder: vue.ComputedRef<string>;
mouseEnterEventName: vue.ComputedRef<"mouseenter" | null>;
needStatusIcon: vue.ComputedRef<boolean>;
showClearBtn: vue.ComputedRef<boolean>;
iconComponent: vue.ComputedRef<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
iconReverse: vue.ComputedRef<string>;
validateState: vue.ComputedRef<"error" | "" | "success" | "validating">;
validateIcon: vue.ComputedRef<"" | vue.Component>;
showNewOption: vue.ComputedRef<boolean>;
updateOptions: () => void;
collapseTagSize: vue.ComputedRef<"default" | "small">;
setSelected: () => void;
selectDisabled: vue.ComputedRef<boolean>;
emptyText: vue.ComputedRef<string | null>;
handleCompositionStart: (event: CompositionEvent) => void;
handleCompositionUpdate: (event: CompositionEvent) => void;
handleCompositionEnd: (event: CompositionEvent) => void;
handleKeydown: (e: KeyboardEvent) => void;
onOptionCreate: (vm: OptionPublicInstance) => void;
onOptionDestroy: (key: OptionValue, vm: OptionPublicInstance) => void;
handleMenuEnter: () => void;
focus: () => void;
blur: () => void;
handleClearClick: (event: Event) => void;
handleClickOutside: (event: Event) => void;
handleEsc: () => void;
toggleMenu: (event?: Event) => void;
selectOption: () => void;
getValueKey: (item: OptionPublicInstance | SelectStates["selected"][0]) => any;
navigateOptions: (direction: "prev" | "next") => void;
dropdownMenuVisible: vue.WritableComputedRef<boolean, boolean>;
showTagList: vue.ComputedRef<{
index: number;
value: OptionValue;
currentLabel: OptionPublicInstance["currentLabel"];
isDisabled?: OptionPublicInstance["isDisabled"] | undefined;
}[]>;
collapseTagList: vue.ComputedRef<{
index: number;
value: OptionValue;
currentLabel: OptionPublicInstance["currentLabel"];
isDisabled?: OptionPublicInstance["isDisabled"] | undefined;
}[]>;
popupScroll: (data: {
scrollTop: number;
scrollLeft: number;
}) => void;
getOption: (value: OptionValue) => {
index: number;
value: EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>;
currentLabel: any;
} | {
index: number;
value: EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>;
currentLabel: string | number | boolean;
readonly isDisabled: boolean;
};
tagStyle: vue.ComputedRef<{
maxWidth: string;
}>;
collapseTagStyle: vue.ComputedRef<{
maxWidth: string;
}>;
popperRef: vue.ComputedRef<HTMLElement | undefined>;
inputRef: vue.Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
tooltipRef: vue.Ref<TooltipInstance | undefined, TooltipInstance | undefined>;
tagTooltipRef: vue.Ref<TooltipInstance | undefined, TooltipInstance | undefined>;
prefixRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
suffixRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
selectRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
wrapperRef: vue.ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
selectionRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
scrollbarRef: vue.Ref<ScrollbarInstance | undefined, ScrollbarInstance | undefined>;
menuRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
tagMenuRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
collapseItemRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("blur" | "change" | "focus" | "update:modelValue" | "clear" | "visible-change" | "remove-tag" | "popup-scroll")[], "blur" | "change" | "focus" | "update:modelValue" | "clear" | "visible-change" | "remove-tag" | "popup-scroll", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
ariaLabel: StringConstructor;
emptyValues: ArrayConstructor;
valueOnClear: EpPropFinalized<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | (((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null)) | null)[], unknown, unknown, undefined, boolean>;
name: StringConstructor;
id: StringConstructor;
modelValue: EpPropFinalized<(new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null) | (((new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null)) | null)[], unknown, unknown, undefined, boolean>;
autocomplete: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
automaticDropdown: BooleanConstructor;
size: {
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
effect: EpPropFinalized<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown, string, boolean>;
disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
clearable: BooleanConstructor;
filterable: BooleanConstructor;
allowCreate: BooleanConstructor;
loading: BooleanConstructor;
popperClass: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
popperStyle: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | vue.CSSProperties) | (() => string | vue.CSSProperties) | (((new (...args: any[]) => string | vue.CSSProperties) | (() => string | vue.CSSProperties)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => Partial<Options>, boolean>;
remote: BooleanConstructor;
debounce: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
loadingText: StringConstructor;
noMatchText: StringConstructor;
noDataText: StringConstructor;
remoteMethod: {
readonly type: vue.PropType<(query: string) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
filterMethod: {
readonly type: vue.PropType<(query: string) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
multiple: BooleanConstructor;
multipleLimit: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
placeholder: {
readonly type: vue.PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
defaultFirstOption: BooleanConstructor;
reserveKeyword: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
valueKey: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
collapseTags: BooleanConstructor;
collapseTagsTooltip: BooleanConstructor;
tagTooltip: EpPropFinalized<(new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps) | (((new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps)) | null)[], unknown, unknown, () => {}, boolean>;
maxCollapseTags: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
persistent: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
clearIcon: EpPropFinalized<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown, vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
fitInputWidth: BooleanConstructor;
suffixIcon: EpPropFinalized<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown, vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
tagType: {
default: string;
type: vue.PropType<EpPropMergeType<StringConstructor, "info" | "primary" | "success" | "warning" | "danger", unknown>>;
required: false;
validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
tagEffect: {
default: string;
type: vue.PropType<EpPropMergeType<StringConstructor, "light" | "dark" | "plain", unknown>>;
required: false;
validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
remoteShowSuffix: BooleanConstructor;
showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
offset: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
placement: EpPropFinalized<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, string, boolean>;
fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | (((new (...args: any[]) => Placement[]) | (() => Placement[])) | null)[], unknown, unknown, string[], boolean>;
tabindex: EpPropFinalized<(NumberConstructor | StringConstructor)[], unknown, unknown, number, boolean>;
appendTo: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>) | (((new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
options: {
readonly type: vue.PropType<Record<string, any>[]>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
props: EpPropFinalized<(new (...args: any[]) => Props) | (() => Props) | (((new (...args: any[]) => Props) | (() => Props)) | null)[], unknown, unknown, () => Required<Props>, boolean>;
}>> & Readonly<{
onChange?: ((...args: any[]) => any) | undefined;
onBlur?: ((...args: any[]) => any) | undefined;
onFocus?: ((...args: any[]) => any) | undefined;
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
onClear?: ((...args: any[]) => any) | undefined;
"onVisible-change"?: ((...args: any[]) => any) | undefined;
"onRemove-tag"?: ((...args: any[]) => any) | undefined;
"onPopup-scroll"?: ((...args: any[]) => any) | undefined;
}>, {
offset: number;
teleported: EpPropMergeType<BooleanConstructor, unknown, unknown>;
props: Props;
effect: EpPropMergeType<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown>;
disabled: EpPropMergeType<BooleanConstructor, unknown, unknown>;
modelValue: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null) | (((new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null)) | null)[], unknown, unknown>;
autocomplete: string;
clearable: boolean;
clearIcon: EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>;
suffixIcon: EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>;
tabindex: EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>;
validateEvent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
multiple: boolean;
popperClass: string;
fallbackPlacements: Placement[];
placement: EpPropMergeType<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown>;
popperOptions: Partial<Options>;
showArrow: EpPropMergeType<BooleanConstructor, unknown, unknown>;
persistent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
valueKey: string;
debounce: number;
fitInputWidth: boolean;
loading: boolean;
valueOnClear: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | (((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null)) | null)[], unknown, unknown>;
filterable: boolean;
collapseTags: boolean;
maxCollapseTags: number;
collapseTagsTooltip: boolean;
tagType: EpPropMergeType<StringConstructor, "info" | "primary" | "success" | "warning" | "danger", unknown>;
tagEffect: EpPropMergeType<StringConstructor, "light" | "dark" | "plain", unknown>;
automaticDropdown: boolean;
allowCreate: boolean;
remote: boolean;
multipleLimit: number;
defaultFirstOption: boolean;
reserveKeyword: EpPropMergeType<BooleanConstructor, unknown, unknown>;
tagTooltip: TagTooltipProps;
remoteShowSuffix: boolean;
}, {}, {
ElSelectMenu: vue.DefineComponent<{}, {
ns: {
namespace: vue.ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
minWidth: vue.Ref<string, string>;
popperClass: vue.ComputedRef<string>;
isMultiple: vue.ComputedRef<boolean>;
isFitInputWidth: vue.ComputedRef<boolean>;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
ElOption: vue.DefineComponent<vue.ExtractPropTypes<{
value: {
readonly type: vue.PropType<EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
label: {
readonly type: vue.PropType<EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
created: BooleanConstructor;
disabled: BooleanConstructor;
}>, {
ns: {
namespace: vue.ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
id: vue.Ref<string, string>;
containerKls: vue.ComputedRef<string[]>;
currentLabel: vue.ComputedRef<boolean | EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
itemSelected: vue.ComputedRef<boolean>;
isDisabled: vue.ComputedRef<boolean>;
select: SelectContext;
visible: vue.Ref<boolean, boolean>;
hover: vue.Ref<boolean, boolean>;
states: {
index: number;
groupDisabled: boolean;
visible: boolean;
hover: boolean;
};
hoverItem: () => void;
handleMousedown: (event: MouseEvent) => void;
updateOption: (query: string) => void;
selectOptionClick: () => void;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
value: {
readonly type: vue.PropType<EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
label: {
readonly type: vue.PropType<EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
created: BooleanConstructor;
disabled: BooleanConstructor;
}>> & Readonly<{}>, {
disabled: boolean;
created: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
ElOptions: vue.DefineComponent<{}, () => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[], {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
ElOptionGroup: vue.DefineComponent<vue.ExtractPropTypes<{
label: StringConstructor;
disabled: BooleanConstructor;
}>, {
groupRef: vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
visible: vue.ComputedRef<boolean>;
ns: {
namespace: vue.ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
label: StringConstructor;
disabled: BooleanConstructor;
}>> & Readonly<{}>, {
disabled: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
ElTag: SFCWithInstall<{
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<TagProps> & Readonly<{
onClick?: ((evt: MouseEvent) => any) | undefined;
onClose?: ((evt: MouseEvent) => any) | undefined;
}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
click: (evt: MouseEvent) => void;
close: (evt: MouseEvent) => void;
}, vue.PublicProps, {
type: "primary" | "success" | "info" | "warning" | "danger";
effect: "dark" | "light" | "plain";
}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<TagProps> & Readonly<{
onClick?: ((evt: MouseEvent) => any) | undefined;
onClose?: ((evt: MouseEvent) => any) | undefined;
}>, {}, {}, {}, {}, {
type: "primary" | "success" | "info" | "warning" | "danger";
effect: "dark" | "light" | "plain";
}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & vue.ComponentOptionsBase<Readonly<TagProps> & Readonly<{
onClick?: ((evt: MouseEvent) => any) | undefined;
onClose?: ((evt: MouseEvent) => any) | undefined;
}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
click: (evt: MouseEvent) => void;
close: (evt: MouseEvent) => void;
}, string, {
type: "primary" | "success" | "info" | "warning" | "danger";
effect: "dark" | "light" | "plain";
}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
$slots: {
default?: (props: {}) => any;
} & {
default?: (props: {}) => any;
};
})>;
ElScrollbar: SFCWithInstall<{
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ScrollbarProps> & Readonly<{
onScroll?: ((args_0: {
scrollTop: number;
scrollLeft: number;
}) => any) | undefined;
"onEnd-reached"?: ((direction: ScrollbarDirection) => any) | undefined;
}>, {
wrapRef: vue.Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
update: () => void;
scrollTo: {
(xCord: number, yCord?: number): void;
(options: ScrollToOptions): void;
};
setScrollTop: (value: number) => void;
setScrollLeft: (value: number) => void;
handleScroll: () => void;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
scroll: (args_0: {
scrollTop: number;
scrollLeft: number;
}) => void;
"end-reached": (direction: ScrollbarDirection) => void;
}, vue.PublicProps, {
tabindex: number | string;
height: number | string;
maxHeight: number | string;
tag: keyof HTMLElementTagNameMap | (string & {});
distance: number;
wrapStyle: string | false | vue.CSSProperties | vue.StyleValue[] | null;
wrapClass: string | string[];
viewClass: string | string[];
viewStyle: string | false | vue.CSSProperties | vue.StyleValue[] | null;
minSize: number;
}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<ScrollbarProps> & Readonly<{
onScroll?: ((args_0: {
scrollTop: number;
scrollLeft: number;
}) => any) | undefined;
"onEnd-reached"?: ((direction: ScrollbarDirection) => any) | undefined;
}>, {
wrapRef: vue.Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
update: () => void;
scrollTo: {
(xCord: number, yCord?: number): void;
(options: ScrollToOptions): void;
};
setScrollTop: (value: number) => void;
setScrollLeft: (value: number) => void;
handleScroll: () => void;
}, {}, {}, {}, {
tabindex: number | string;
height: number | string;
maxHeight: number | string;
tag: keyof HTMLElementTagNameMap | (string & {});
distance: number;
wrapStyle: string | false | vue.CSSProperties | vue.StyleValue[] | null;
wrapClass: string | string[];
viewClass: string | string[];
viewStyle: string | false | vue.CSSProperties | vue.StyleValue[] | null;
minSize: number;
}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & vue.ComponentOptionsBase<Readonly<ScrollbarProps> & Readonly<{
onScroll?: ((args_0: {
scrollTop: number;
scrollLeft: number;
}) => any) | undefined;
"onEnd-reached"?: ((direction: ScrollbarDirection) => any) | undefined;
}>, {
wrapRef: vue.Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
update: () => void;
scrollTo: {
(xCord: number, yCord?: number): void;
(options: ScrollToOptions): void;
};
setScrollTop: (value: number) => void;
setScrollLeft: (value: number) => void;
handleScroll: () => void;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
scroll: (args_0: {
scrollTop: number;
scrollLeft: number;
}) => void;
"end-reached": (direction: ScrollbarDirection) => void;
}, string, {
tabindex: number | string;
height: number | string;
maxHeight: number | string;
tag: keyof HTMLElementTagNameMap | (string & {});
distance: number;
wrapStyle: string | false | vue.CSSProperties | vue.StyleValue[] | null;
wrapClass: string | string[];
viewClass: string | string[];
viewStyle: string | false | vue.CSSProperties | vue.StyleValue[] | null;
minSize: number;
}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
$slots: {
default?: (props: {}) => any;
};
})>;
ElTooltip: SFCWithInstall<{
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<UseTooltipProps> & Readonly<{
onClose?: ((...args: any[]) => any) | undefined;
onHide?: ((...args: any[]) => any) | undefined;
onShow?: ((...args: any[]) => any) | undefined;
onOpen?: ((...args: any[]) => any) | undefined;
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
"onBefore-show"?: ((...args: any[]) => any) | undefined;
"onBefore-hide"?: ((...args: any[]) => any) | undefined;
}>, {
popperRef: vue.Ref<PopperInstance | undefined, PopperInstance | undefined>;
contentRef: vue.Ref<TooltipContentInstance | undefined, TooltipContentInstance | undefined>;
isFocusInsideContent: (event?: FocusEvent) => boolean | undefined;
updatePopper: () => void;
onOpen: (event?: Event, delay?: number) => void;
onClose: (event?: Event, delay?: number) => void;
hide: (event?: Event) => void;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
close: (...args: any[]) => void;
hide: (...args: any[]) => void;
show: (...args: any[]) => void;
open: (...args: any[]) => void;
"update:visible": (...args: any[]) => void;
"before-show": (...args: any[]) => void;
"before-hide": (...args: any[]) => void;
}, vue.PublicProps, {
offset: number;
teleported: boolean;
effect: PopperEffect;
visible: boolean | null;
content: string;
style: string | false | vue.CSSProperties | vue.StyleValue[] | null;
enterable: boolean;
pure: boolean;
focusOnShow: boolean;
trapping: boolean;
popperStyle: string | false | vue.CSSProperties | vue.StyleValue[] | null;
stopPopperMouseEvent: boolean;
virtualTriggering: boolean;
loop: boolean;
boundariesPadding: number;
gpuAcceleration: boolean;
placement: Placement;
popperOptions: Partial<Options>;
strategy: "fixed" | "absolute";
arrowOffset: number;
showArrow: boolean;
role: typeof roleTypes[number];
showAfter: number;
hideAfter: number;
autoClose: number;
trigger: Arrayable<TooltipTriggerType>;
triggerKeys: string[];
}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<UseTooltipProps> & Readonly<{
onClose?: ((...args: any[]) => any) | undefined;
onHide?: ((...args: any[]) => any) | undefined;
onShow?: ((...args: any[]) => any) | undefined;
onOpen?: ((...args: any[]) => any) | undefined;
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
"onBefore-show"?: ((...args: any[]) => any) | undefined;
"onBefore-hide"?: ((...args: any[]) => any) | undefined;
}>, {
popperRef: vue.Ref<PopperInstance | undefined, PopperInstance | undefined>;
contentRef: vue.Ref<TooltipContentInstance | undefined, TooltipContentInstance | undefined>;
isFocusInsideContent: (event?: FocusEvent) => boolean | undefined;
updatePopper: () => void;
onOpen: (event?: Event, delay?: number) => void;
onClose: (event?: Event, delay?: number) => void;
hide: (event?: Event) => void;
}, {}, {}, {}, {
offset: number;
teleported: boolean;
effect: PopperEffect;
visible: boolean | null;
content: string;
style: string | false | vue.CSSProperties | vue.StyleValue[] | null;
enterable: boolean;
pure: boolean;
focusOnShow: boolean;
trapping: boolean;
popperStyle: string | false | vue.CSSProperties | vue.StyleValue[] | null;
stopPopperMouseEvent: boolean;
virtualTriggering: boolean;
loop: boolean;
boundariesPadding: number;
gpuAcceleration: boolean;
placement: Placement;
popperOptions: Partial<Options>;
strategy: "fixed" | "absolute";
arrowOffset: number;
showArrow: boolean;
role: typeof roleTypes[number];
showAfter: number;
hideAfter: number;
autoClose: number;
trigger: Arrayable<TooltipTriggerType>;
triggerKeys: string[];
}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & vue.ComponentOptionsBase<Readonly<UseTooltipProps> & Readonly<{
onClose?: ((...args: any[]) => any) | undefined;
onHide?: ((...args: any[]) => any) | undefined;
onShow?: ((...args: any[]) => any) | undefined;
onOpen?: ((...args: any[]) => any) | undefined;
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
"onBefore-show"?: ((...args: any[]) => any) | undefined;
"onBefore-hide"?: ((...args: any[]) => any) | undefined;
}>, {
popperRef: vue.Ref<PopperInstance | undefined, PopperInstance | undefined>;
contentRef: vue.Ref<TooltipContentInstance | undefined, TooltipContentInstance | undefined>;
isFocusInsideContent: (event?: FocusEvent) => boolean | undefined;
updatePopper: () => void;
onOpen: (event?: Event, delay?: number) => void;
onClose: (event?: Event, delay?: number) => void;
hide: (event?: Event) => void;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
close: (...args: any[]) => void;
hide: (...args: any[]) => void;
show: (...args: any[]) => void;
open: (...args: any[]) => void;
"update:visible": (...args: any[]) => void;
"before-show": (...args: any[]) => void;
"before-hide": (...args: any[]) => void;
}, string, {
offset: number;
teleported: boolean;
effect: PopperEffect;
visible: boolean | null;
content: string;
style: string | false | vue.CSSProperties | vue.StyleValue[] | null;
enterable: boolean;
pure: boolean;
focusOnShow: boolean;
trapping: boolean;
popperStyle: string | false | vue.CSSProperties | vue.StyleValue[] | null;
stopPopperMouseEvent: boolean;
virtualTriggering: boolean;
loop: boolean;
boundariesPadding: number;
gpuAcceleration: boolean;
placement: Placement;
popperOptions: Partial<Options>;
strategy: "fixed" | "absolute";
arrowOffset: number;
showArrow: boolean;
role: typeof roleTypes[number];
showAfter: number;
hideAfter: number;
autoClose: number;
trigger: Arrayable<TooltipTriggerType>;
triggerKeys: string[];
}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
$slots: {
default?: (props: {}) => any;
} & {
content?: (props: {}) => any;
};
})>;
ElIcon: SFCWithInstall<{
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & vue.ComponentOptionsBase<Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
$slots: {
default?: (props: {}) => any;
};
})>;
}, {
ClickOutside: vue.ObjectDirective<HTMLElement, any, string, any>;
}, string, vue.ComponentProvideOptions, true, {}, any>;
//#endregion
export { _default };
@@ -0,0 +1,165 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_event = require('../../../constants/event.js');
const require_vnode = require('../../../utils/vue/vnode.js');
const require_index = require('../../../directives/click-outside/index.js');
const require_index$1 = require('../../../hooks/use-calc-input-width/index.js');
const require_index$2 = require('../../icon/index.js');
const require_index$3 = require('../../tooltip/index.js');
const require_index$4 = require('../../scrollbar/index.js');
const require_index$5 = require('../../tag/index.js');
const require_useProps = require('../../select-v2/src/useProps.js');
const require_token = require('./token.js');
const require_option = require('./option2.js');
const require_select_dropdown = require('./select-dropdown.js');
const require_useSelect = require('./useSelect.js');
const require_options = require('./options.js');
const require_select = require('./select.js');
const require_option_group = require('./option-group.js');
let vue = require("vue");
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/select/src/select.vue?vue&type=script&lang.ts
const COMPONENT_NAME = "ElSelect";
const warnHandlerMap = /* @__PURE__ */ new WeakMap();
const createSelectWarnHandler = (appContext) => {
return (...args) => {
const message = args[0];
if (!message || message.includes("Slot \"default\" invoked outside of the render function") && args[2]?.includes("ElTreeSelect")) return;
const original = warnHandlerMap.get(appContext)?.originalWarnHandler;
if (original) {
original(...args);
return;
}
console.warn(...args);
};
};
const getWarnHandlerRecord = (appContext) => {
let record = warnHandlerMap.get(appContext);
if (!record) {
record = {
originalWarnHandler: appContext.config.warnHandler,
handler: createSelectWarnHandler(appContext),
count: 0
};
warnHandlerMap.set(appContext, record);
}
return record;
};
var select_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
name: COMPONENT_NAME,
componentName: COMPONENT_NAME,
components: {
ElSelectMenu: require_select_dropdown.default,
ElOption: require_option.default,
ElOptions: require_options.default,
ElOptionGroup: require_option_group.default,
ElTag: require_index$5.ElTag,
ElScrollbar: require_index$4.ElScrollbar,
ElTooltip: require_index$3.ElTooltip,
ElIcon: require_index$2.ElIcon
},
directives: { ClickOutside: require_index.default },
props: require_select.selectProps,
emits: [
require_event.UPDATE_MODEL_EVENT,
require_event.CHANGE_EVENT,
"remove-tag",
"clear",
"visible-change",
"focus",
"blur",
"popup-scroll"
],
setup(props, { emit, slots }) {
const instance = (0, vue.getCurrentInstance)();
const warnRecord = getWarnHandlerRecord(instance.appContext);
warnRecord.count += 1;
instance.appContext.config.warnHandler = warnRecord.handler;
const modelValue = (0, vue.computed)(() => {
const { modelValue: rawModelValue, multiple } = props;
const fallback = multiple ? [] : void 0;
if ((0, _vue_shared.isArray)(rawModelValue)) return multiple ? rawModelValue : fallback;
return multiple ? fallback : rawModelValue;
});
const _props = (0, vue.reactive)({
...(0, vue.toRefs)(props),
modelValue
});
const API = require_useSelect.useSelect(_props, emit);
const { calculatorRef, inputStyle } = require_index$1.useCalcInputWidth();
const { getLabel, getValue, getOptions, getDisabled } = require_useProps.useProps(props);
const getOptionProps = (option) => ({
label: getLabel(option),
value: getValue(option),
disabled: getDisabled(option)
});
const flatTreeSelectData = (data) => {
return data.reduce((acc, item) => {
acc.push(item);
if (item.children && item.children.length > 0) acc.push(...flatTreeSelectData(item.children));
return acc;
}, []);
};
const manuallyRenderSlots = (vnodes) => {
require_vnode.flattedChildren(vnodes || []).forEach((item) => {
if ((0, _vue_shared.isObject)(item) && (item.type.name === "ElOption" || item.type.name === "ElTree")) {
const _name = item.type.name;
if (_name === "ElTree") flatTreeSelectData(item.props?.data || []).forEach((treeItem) => {
treeItem.currentLabel = treeItem.label ?? ((0, _vue_shared.isObject)(treeItem.value) ? "" : treeItem.value);
API.onOptionCreate(treeItem);
});
else if (_name === "ElOption") {
const obj = { ...item.props };
obj.currentLabel = obj.label ?? ((0, _vue_shared.isObject)(obj.value) ? "" : obj.value);
API.onOptionCreate(obj);
}
}
});
};
(0, vue.watch)(() => [props.persistent || API.expanded.value || !slots.default ? void 0 : slots.default?.(), modelValue.value], () => {
if (props.persistent || API.expanded.value) return;
if (!slots.default) return;
API.states.options.clear();
manuallyRenderSlots(slots.default?.());
}, { immediate: true });
(0, vue.provide)(require_token.selectKey, (0, vue.reactive)({
props: _props,
states: API.states,
selectRef: API.selectRef,
optionsArray: API.optionsArray,
setSelected: API.setSelected,
handleOptionSelect: API.handleOptionSelect,
onOptionCreate: API.onOptionCreate,
onOptionDestroy: API.onOptionDestroy
}));
const selectedLabel = (0, vue.computed)(() => {
if (!props.multiple) return API.states.selectedLabel;
return API.states.selected.map((i) => i.currentLabel);
});
(0, vue.onBeforeUnmount)(() => {
const record = warnHandlerMap.get(instance.appContext);
if (!record) return;
record.count -= 1;
if (record.count <= 0) {
instance.appContext.config.warnHandler = record.originalWarnHandler;
warnHandlerMap.delete(instance.appContext);
}
});
return {
...API,
modelValue,
selectedLabel,
calculatorRef,
inputStyle,
getLabel,
getValue,
getOptions,
getDisabled,
getOptionProps
};
}
});
//#endregion
exports.default = select_vue_vue_type_script_lang_default;
//# sourceMappingURL=select.vue_vue_type_script_lang.js.map
File diff suppressed because one or more lines are too long
+382
View File
@@ -0,0 +1,382 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require__plugin_vue_export_helper = require('../../../_virtual/_plugin-vue_export-helper.js');
const require_select_vue_vue_type_script_lang = require('./select.vue_vue_type_script_lang.js');
let vue = require("vue");
//#region ../../packages/components/select/src/select.vue
const _hoisted_1 = [
"id",
"value",
"name",
"disabled",
"autocomplete",
"tabindex",
"readonly",
"aria-activedescendant",
"aria-controls",
"aria-expanded",
"aria-label"
];
const _hoisted_2 = ["textContent"];
const _hoisted_3 = { key: 1 };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_tag = (0, vue.resolveComponent)("el-tag");
const _component_el_tooltip = (0, vue.resolveComponent)("el-tooltip");
const _component_el_icon = (0, vue.resolveComponent)("el-icon");
const _component_el_option = (0, vue.resolveComponent)("el-option");
const _component_el_option_group = (0, vue.resolveComponent)("el-option-group");
const _component_el_options = (0, vue.resolveComponent)("el-options");
const _component_el_scrollbar = (0, vue.resolveComponent)("el-scrollbar");
const _component_el_select_menu = (0, vue.resolveComponent)("el-select-menu");
const _directive_click_outside = (0, vue.resolveDirective)("click-outside");
return (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({
ref: "selectRef",
class: [_ctx.nsSelect.b(), _ctx.nsSelect.m(_ctx.selectSize)]
}, { [(0, vue.toHandlerKey)(_ctx.mouseEnterEventName)]: _cache[11] || (_cache[11] = ($event) => _ctx.states.inputHovering = true) }, { onMouseleave: _cache[12] || (_cache[12] = ($event) => _ctx.states.inputHovering = false) }), [(0, vue.createVNode)(_component_el_tooltip, {
ref: "tooltipRef",
visible: _ctx.dropdownMenuVisible,
placement: _ctx.placement,
teleported: _ctx.teleported,
"popper-class": [_ctx.nsSelect.e("popper"), _ctx.popperClass],
"popper-style": _ctx.popperStyle,
"popper-options": _ctx.popperOptions,
"fallback-placements": _ctx.fallbackPlacements,
effect: _ctx.effect,
pure: "",
trigger: "click",
transition: `${_ctx.nsSelect.namespace.value}-zoom-in-top`,
"stop-popper-mouse-event": false,
"gpu-acceleration": false,
persistent: _ctx.persistent,
"append-to": _ctx.appendTo,
"show-arrow": _ctx.showArrow,
offset: _ctx.offset,
onBeforeShow: _ctx.handleMenuEnter,
onHide: _cache[10] || (_cache[10] = ($event) => _ctx.states.isBeforeHide = false)
}, {
default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
ref: "wrapperRef",
class: (0, vue.normalizeClass)([
_ctx.nsSelect.e("wrapper"),
_ctx.nsSelect.is("focused", _ctx.isFocused),
_ctx.nsSelect.is("hovering", _ctx.states.inputHovering),
_ctx.nsSelect.is("filterable", _ctx.filterable),
_ctx.nsSelect.is("disabled", _ctx.selectDisabled)
]),
onClick: _cache[7] || (_cache[7] = (0, vue.withModifiers)((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["prevent"]))
}, [
_ctx.$slots.prefix ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: 0,
ref: "prefixRef",
class: (0, vue.normalizeClass)(_ctx.nsSelect.e("prefix"))
}, [(0, vue.renderSlot)(_ctx.$slots, "prefix")], 2)) : (0, vue.createCommentVNode)("v-if", true),
(0, vue.createElementVNode)("div", {
ref: "selectionRef",
class: (0, vue.normalizeClass)([_ctx.nsSelect.e("selection"), _ctx.nsSelect.is("near", _ctx.multiple && !_ctx.$slots.prefix && !!_ctx.states.selected.length)])
}, [
_ctx.multiple ? (0, vue.renderSlot)(_ctx.$slots, "tag", {
key: 0,
data: _ctx.states.selected,
deleteTag: _ctx.deleteTag,
selectDisabled: _ctx.selectDisabled
}, () => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(_ctx.showTagList, (item) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: _ctx.getValueKey(item),
class: (0, vue.normalizeClass)(_ctx.nsSelect.e("selected-item"))
}, [(0, vue.createVNode)(_component_el_tag, {
closable: !_ctx.selectDisabled && !item.isDisabled,
size: _ctx.collapseTagSize,
type: _ctx.tagType,
effect: _ctx.tagEffect,
"disable-transitions": "",
style: (0, vue.normalizeStyle)(_ctx.tagStyle),
onClose: ($event) => _ctx.deleteTag($event, item)
}, {
default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(_ctx.nsSelect.e("tags-text")) }, [(0, vue.renderSlot)(_ctx.$slots, "label", {
index: item.index,
label: item.currentLabel,
value: item.value
}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.currentLabel), 1)])], 2)]),
_: 2
}, 1032, [
"closable",
"size",
"type",
"effect",
"style",
"onClose"
])], 2);
}), 128)), _ctx.collapseTags && _ctx.states.selected.length > _ctx.maxCollapseTags ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_el_tooltip, {
key: 0,
ref: "tagTooltipRef",
disabled: _ctx.dropdownMenuVisible || !_ctx.collapseTagsTooltip,
"fallback-placements": _ctx.tagTooltip?.fallbackPlacements ?? [
"bottom",
"top",
"right",
"left"
],
effect: _ctx.tagTooltip?.effect ?? _ctx.effect,
placement: _ctx.tagTooltip?.placement ?? "bottom",
"popper-class": _ctx.tagTooltip?.popperClass ?? _ctx.popperClass,
"popper-style": _ctx.tagTooltip?.popperStyle ?? _ctx.popperStyle,
teleported: _ctx.tagTooltip?.teleported ?? _ctx.teleported,
"append-to": _ctx.tagTooltip?.appendTo ?? _ctx.appendTo,
"popper-options": _ctx.tagTooltip?.popperOptions ?? _ctx.popperOptions,
transition: _ctx.tagTooltip?.transition,
"show-after": _ctx.tagTooltip?.showAfter,
"hide-after": _ctx.tagTooltip?.hideAfter,
"auto-close": _ctx.tagTooltip?.autoClose,
offset: _ctx.tagTooltip?.offset
}, {
default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
ref: "collapseItemRef",
class: (0, vue.normalizeClass)(_ctx.nsSelect.e("selected-item"))
}, [(0, vue.createVNode)(_component_el_tag, {
closable: false,
size: _ctx.collapseTagSize,
type: _ctx.tagType,
effect: _ctx.tagEffect,
"disable-transitions": "",
style: (0, vue.normalizeStyle)(_ctx.collapseTagStyle)
}, {
default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(_ctx.nsSelect.e("tags-text")) }, " + " + (0, vue.toDisplayString)(_ctx.states.selected.length - _ctx.maxCollapseTags), 3)]),
_: 1
}, 8, [
"size",
"type",
"effect",
"style"
])], 2)]),
content: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
ref: "tagMenuRef",
class: (0, vue.normalizeClass)(_ctx.nsSelect.e("selection"))
}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(_ctx.collapseTagList, (item) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: _ctx.getValueKey(item),
class: (0, vue.normalizeClass)(_ctx.nsSelect.e("selected-item"))
}, [(0, vue.createVNode)(_component_el_tag, {
class: "in-tooltip",
closable: !_ctx.selectDisabled && !item.isDisabled,
size: _ctx.collapseTagSize,
type: _ctx.tagType,
effect: _ctx.tagEffect,
"disable-transitions": "",
onClose: ($event) => _ctx.deleteTag($event, item)
}, {
default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(_ctx.nsSelect.e("tags-text")) }, [(0, vue.renderSlot)(_ctx.$slots, "label", {
index: item.index,
label: item.currentLabel,
value: item.value
}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.currentLabel), 1)])], 2)]),
_: 2
}, 1032, [
"closable",
"size",
"type",
"effect",
"onClose"
])], 2);
}), 128))], 2)]),
_: 3
}, 8, [
"disabled",
"fallback-placements",
"effect",
"placement",
"popper-class",
"popper-style",
"teleported",
"append-to",
"popper-options",
"transition",
"show-after",
"hide-after",
"auto-close",
"offset"
])) : (0, vue.createCommentVNode)("v-if", true)]) : (0, vue.createCommentVNode)("v-if", true),
(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)([
_ctx.nsSelect.e("selected-item"),
_ctx.nsSelect.e("input-wrapper"),
_ctx.nsSelect.is("hidden", !_ctx.filterable || _ctx.selectDisabled || !_ctx.states.inputValue && !_ctx.isFocused)
]) }, [(0, vue.createElementVNode)("input", {
id: _ctx.inputId,
ref: "inputRef",
value: _ctx.states.inputValue,
type: "text",
name: _ctx.name,
class: (0, vue.normalizeClass)([_ctx.nsSelect.e("input"), _ctx.nsSelect.is(_ctx.selectSize)]),
disabled: _ctx.selectDisabled,
autocomplete: _ctx.autocomplete,
style: (0, vue.normalizeStyle)(_ctx.inputStyle),
tabindex: _ctx.tabindex,
role: "combobox",
readonly: !_ctx.filterable,
spellcheck: "false",
"aria-activedescendant": _ctx.hoverOption?.id || "",
"aria-controls": _ctx.contentId,
"aria-expanded": _ctx.dropdownMenuVisible,
"aria-label": _ctx.ariaLabel,
"aria-autocomplete": "none",
"aria-haspopup": "listbox",
onKeydown: _cache[0] || (_cache[0] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args)),
onCompositionstart: _cache[1] || (_cache[1] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)),
onCompositionupdate: _cache[2] || (_cache[2] = (...args) => _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate(...args)),
onCompositionend: _cache[3] || (_cache[3] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args)),
onInput: _cache[4] || (_cache[4] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
onChange: _cache[5] || (_cache[5] = (0, vue.withModifiers)(() => {}, ["stop"])),
onClick: _cache[6] || (_cache[6] = (0, vue.withModifiers)((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"]))
}, null, 46, _hoisted_1), _ctx.filterable ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
key: 0,
ref: "calculatorRef",
"aria-hidden": "true",
class: (0, vue.normalizeClass)(_ctx.nsSelect.e("input-calculator")),
textContent: (0, vue.toDisplayString)(_ctx.states.inputValue)
}, null, 10, _hoisted_2)) : (0, vue.createCommentVNode)("v-if", true)], 2),
_ctx.shouldShowPlaceholder ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: 1,
class: (0, vue.normalizeClass)([
_ctx.nsSelect.e("selected-item"),
_ctx.nsSelect.e("placeholder"),
_ctx.nsSelect.is("transparent", !_ctx.hasModelValue || _ctx.expanded && !_ctx.states.inputValue)
])
}, [_ctx.hasModelValue ? (0, vue.renderSlot)(_ctx.$slots, "label", {
key: 0,
index: _ctx.getOption(_ctx.modelValue).index,
label: _ctx.currentPlaceholder,
value: _ctx.modelValue
}, () => [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(_ctx.currentPlaceholder), 1)]) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3, (0, vue.toDisplayString)(_ctx.currentPlaceholder), 1))], 2)) : (0, vue.createCommentVNode)("v-if", true)
], 2),
(0, vue.createElementVNode)("div", {
ref: "suffixRef",
class: (0, vue.normalizeClass)(_ctx.nsSelect.e("suffix"))
}, [
_ctx.iconComponent && !_ctx.showClearBtn ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_el_icon, {
key: 0,
class: (0, vue.normalizeClass)([
_ctx.nsSelect.e("caret"),
_ctx.nsSelect.e("icon"),
_ctx.iconReverse
])
}, {
default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(_ctx.iconComponent)))]),
_: 1
}, 8, ["class"])) : (0, vue.createCommentVNode)("v-if", true),
_ctx.showClearBtn && _ctx.clearIcon ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_el_icon, {
key: 1,
class: (0, vue.normalizeClass)([
_ctx.nsSelect.e("caret"),
_ctx.nsSelect.e("icon"),
_ctx.nsSelect.e("clear")
]),
onClick: _ctx.handleClearClick
}, {
default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(_ctx.clearIcon)))]),
_: 1
}, 8, ["class", "onClick"])) : (0, vue.createCommentVNode)("v-if", true),
_ctx.validateState && _ctx.validateIcon && _ctx.needStatusIcon ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_el_icon, {
key: 2,
class: (0, vue.normalizeClass)([
_ctx.nsInput.e("icon"),
_ctx.nsInput.e("validateIcon"),
_ctx.nsInput.is("loading", _ctx.validateState === "validating")
])
}, {
default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(_ctx.validateIcon)))]),
_: 1
}, 8, ["class"])) : (0, vue.createCommentVNode)("v-if", true)
], 2)
], 2)]),
content: (0, vue.withCtx)(() => [(0, vue.createVNode)(_component_el_select_menu, { ref: "menuRef" }, {
default: (0, vue.withCtx)(() => [
_ctx.$slots.header ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: 0,
class: (0, vue.normalizeClass)(_ctx.nsSelect.be("dropdown", "header")),
onClick: _cache[8] || (_cache[8] = (0, vue.withModifiers)(() => {}, ["stop"]))
}, [(0, vue.renderSlot)(_ctx.$slots, "header")], 2)) : (0, vue.createCommentVNode)("v-if", true),
(0, vue.withDirectives)((0, vue.createVNode)(_component_el_scrollbar, {
id: _ctx.contentId,
ref: "scrollbarRef",
tag: "ul",
"wrap-class": _ctx.nsSelect.be("dropdown", "wrap"),
"view-class": _ctx.nsSelect.be("dropdown", "list"),
class: (0, vue.normalizeClass)([_ctx.nsSelect.is("empty", _ctx.filteredOptionsCount === 0)]),
role: "listbox",
"aria-label": _ctx.ariaLabel,
"aria-orientation": "vertical",
onScroll: _ctx.popupScroll
}, {
default: (0, vue.withCtx)(() => [_ctx.showNewOption ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_el_option, {
key: 0,
value: _ctx.states.inputValue,
created: true
}, null, 8, ["value"])) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createVNode)(_component_el_options, null, {
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(_ctx.options, (option, index) => {
return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: index }, [_ctx.getOptions(option)?.length ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_el_option_group, {
key: 0,
label: _ctx.getLabel(option),
disabled: _ctx.getDisabled(option)
}, {
default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(_ctx.getOptions(option), (item) => {
return (0, vue.openBlock)(), (0, vue.createBlock)(_component_el_option, (0, vue.mergeProps)({ key: _ctx.getValue(item) }, { ref_for: true }, _ctx.getOptionProps(item)), null, 16);
}), 128))]),
_: 2
}, 1032, ["label", "disabled"])) : ((0, vue.openBlock)(), (0, vue.createBlock)(_component_el_option, (0, vue.mergeProps)({
key: 1,
ref_for: true
}, _ctx.getOptionProps(option)), null, 16))], 64);
}), 128))])]),
_: 3
})]),
_: 3
}, 8, [
"id",
"wrap-class",
"view-class",
"class",
"aria-label",
"onScroll"
]), [[vue.vShow, _ctx.states.options.size > 0 && !_ctx.loading]]),
_ctx.$slots.loading && _ctx.loading ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: 1,
class: (0, vue.normalizeClass)(_ctx.nsSelect.be("dropdown", "loading"))
}, [(0, vue.renderSlot)(_ctx.$slots, "loading")], 2)) : _ctx.loading || _ctx.filteredOptionsCount === 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: 2,
class: (0, vue.normalizeClass)(_ctx.nsSelect.be("dropdown", "empty"))
}, [(0, vue.renderSlot)(_ctx.$slots, "empty", {}, () => [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(_ctx.emptyText), 1)])], 2)) : (0, vue.createCommentVNode)("v-if", true),
_ctx.$slots.footer ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
key: 3,
class: (0, vue.normalizeClass)(_ctx.nsSelect.be("dropdown", "footer")),
onClick: _cache[9] || (_cache[9] = (0, vue.withModifiers)(() => {}, ["stop"]))
}, [(0, vue.renderSlot)(_ctx.$slots, "footer")], 2)) : (0, vue.createCommentVNode)("v-if", true)
]),
_: 3
}, 512)]),
_: 3
}, 8, [
"visible",
"placement",
"teleported",
"popper-class",
"popper-style",
"popper-options",
"fallback-placements",
"effect",
"transition",
"persistent",
"append-to",
"show-arrow",
"offset",
"onBeforeShow"
])], 16)), [[
_directive_click_outside,
_ctx.handleClickOutside,
_ctx.popperRef
]]);
}
var select_default = /* @__PURE__ */ require__plugin_vue_export_helper.default(require_select_vue_vue_type_script_lang.default, [["render", _sfc_render]]);
//#endregion
exports.default = select_default;
//# sourceMappingURL=select2.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
import { SelectContext, SelectGroupContext } from "./type.js";
import { InjectionKey } from "vue";
//#region ../../packages/components/select/src/token.d.ts
declare const selectGroupKey: InjectionKey<SelectGroupContext>;
declare const selectKey: InjectionKey<SelectContext>;
//#endregion
export { selectGroupKey, selectKey };
+10
View File
@@ -0,0 +1,10 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
//#region ../../packages/components/select/src/token.ts
const selectGroupKey = Symbol("ElSelectGroup");
const selectKey = Symbol("ElSelect");
//#endregion
exports.selectGroupKey = selectGroupKey;
exports.selectKey = selectKey;
//# sourceMappingURL=token.js.map
@@ -0,0 +1 @@
{"version":3,"file":"token.js","names":[],"sources":["../../../../../../packages/components/select/src/token.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\nimport type { SelectContext, SelectGroupContext } from './type'\n\n// For individual build sharing injection key, we had to make `Symbol` to string\nexport const selectGroupKey: InjectionKey<SelectGroupContext> =\n Symbol('ElSelectGroup')\n\nexport const selectKey: InjectionKey<SelectContext> = Symbol('ElSelect')\n"],"mappings":";;;AAIA,MAAa,iBACX,OAAO,gBAAgB;AAEzB,MAAa,YAAyC,OAAO,WAAW"}
+66
View File
@@ -0,0 +1,66 @@
import { SelectProps } from "./select.js";
import { optionProps } from "./option.js";
import { ComponentInternalInstance, ComponentPublicInstance, ComputedRef, ExtractPropTypes, ExtractPublicPropTypes, Ref } from "vue";
//#region ../../packages/components/select/src/type.d.ts
interface SelectGroupContext {
disabled: boolean;
}
interface SelectContext {
props: SelectProps;
states: SelectStates;
selectRef: HTMLElement | undefined;
optionsArray: OptionPublicInstance[];
setSelected(): void;
onOptionCreate(vm: OptionPublicInstance): void;
onOptionDestroy(key: OptionValue, vm: OptionPublicInstance): void;
handleOptionSelect(vm: OptionPublicInstance): void;
}
type SelectStates = {
inputValue: string;
options: Map<OptionValue, OptionPublicInstance>;
cachedOptions: Map<OptionValue, OptionPublicInstance>;
optionValues: OptionValue[];
selected: OptionBasic[];
hoveringIndex: number;
inputHovering: boolean;
selectionWidth: number;
collapseItemWidth: number;
previousQuery: string | null;
selectedLabel: string;
menuVisibleOnFocus: boolean;
isBeforeHide: boolean;
};
type OptionProps = ExtractPropTypes<typeof optionProps>;
interface OptionStates {
index: number;
groupDisabled: boolean;
visible: boolean;
hover: boolean;
}
interface OptionExposed {
ns: unknown;
id: unknown;
containerKls: unknown;
currentLabel: ComputedRef<string | number | boolean>;
itemSelected: ComputedRef<boolean>;
isDisabled: ComputedRef<boolean>;
visible: Ref<boolean>;
hover: Ref<boolean>;
states: OptionStates;
select: SelectContext;
hoverItem: () => void;
handleMousedown: (event: MouseEvent) => void;
updateOption: (query: string) => void;
selectOptionClick: () => void;
}
type OptionPublicInstance = ComponentPublicInstance<OptionProps, OptionExposed>;
type OptionValue = OptionProps['value'];
type OptionBasic = {
index: number;
value: OptionValue;
currentLabel: OptionPublicInstance['currentLabel'];
isDisabled?: OptionPublicInstance['isDisabled'];
};
//#endregion
export { OptionBasic, OptionPublicInstance, OptionValue, SelectContext, SelectGroupContext, SelectStates };
+1
View File
@@ -0,0 +1 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -0,0 +1,80 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_strings = require('../../../utils/strings.js');
const require_error = require('../../../utils/error.js');
const require_token = require('./token.js');
const require_option = require('./option.js');
let lodash_unified = require("lodash-unified");
let vue = require("vue");
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/select/src/useOption.ts
function useOption(props, states) {
const select = (0, vue.inject)(require_token.selectKey);
if (!select) require_error.throwError(require_option.COMPONENT_NAME, "usage: <el-select><el-option /></el-select/>");
const selectGroup = (0, vue.inject)(require_token.selectGroupKey, { disabled: false });
const itemSelected = (0, vue.computed)(() => {
return contains((0, lodash_unified.castArray)(select.props.modelValue), props.value);
});
const limitReached = (0, vue.computed)(() => {
if (select.props.multiple) {
const modelValue = (0, lodash_unified.castArray)(select.props.modelValue ?? []);
return !itemSelected.value && modelValue.length >= select.props.multipleLimit && select.props.multipleLimit > 0;
} else return false;
});
const currentLabel = (0, vue.computed)(() => {
return props.label ?? ((0, _vue_shared.isObject)(props.value) ? "" : props.value);
});
const currentValue = (0, vue.computed)(() => {
return props.value || props.label || "";
});
const isDisabled = (0, vue.computed)(() => {
return props.disabled || states.groupDisabled || limitReached.value;
});
const instance = (0, vue.getCurrentInstance)();
const contains = (arr = [], target) => {
if (!(0, _vue_shared.isObject)(props.value)) return arr && arr.includes(target);
else {
const valueKey = select.props.valueKey;
return arr && arr.some((item) => {
return (0, vue.toRaw)((0, lodash_unified.get)(item, valueKey)) === (0, lodash_unified.get)(target, valueKey);
});
}
};
const hoverItem = () => {
if (!isDisabled.value) select.states.hoveringIndex = select.optionsArray.indexOf(instance.proxy);
};
const updateOption = (query) => {
states.visible = new RegExp(require_strings.escapeStringRegexp(query), "i").test(String(currentLabel.value)) || props.created;
};
(0, vue.watch)(() => currentLabel.value, () => {
if (!props.created && !select.props.remote) select.setSelected();
});
(0, vue.watch)(() => props.value, (val, oldVal) => {
const { remote, valueKey } = select.props;
if (remote ? val !== oldVal : !(0, lodash_unified.isEqual)(val, oldVal)) {
select.onOptionDestroy(oldVal, instance.proxy);
select.onOptionCreate(instance.proxy);
}
if (!props.created && !remote) {
if (valueKey && (0, _vue_shared.isObject)(val) && (0, _vue_shared.isObject)(oldVal) && val[valueKey] === oldVal[valueKey]) return;
select.setSelected();
}
});
(0, vue.watch)(() => selectGroup.disabled, () => {
states.groupDisabled = selectGroup.disabled;
}, { immediate: true });
return {
select,
currentLabel,
currentValue,
itemSelected,
isDisabled,
hoverItem,
updateOption
};
}
//#endregion
exports.useOption = useOption;
//# sourceMappingURL=useOption.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,631 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_aria = require('../../../constants/aria.js');
const require_event = require('../../../constants/event.js');
const require_form = require('../../../constants/form.js');
const require_event$1 = require('../../../utils/dom/event.js');
const require_types = require('../../../utils/types.js');
const require_error = require('../../../utils/error.js');
const require_scroll = require('../../../utils/dom/scroll.js');
const require_icon = require('../../../utils/vue/icon.js');
const require_index = require('../../../hooks/use-locale/index.js');
const require_index$1 = require('../../../hooks/use-namespace/index.js');
const require_index$2 = require('../../../hooks/use-id/index.js');
const require_index$3 = require('../../../hooks/use-focus-controller/index.js');
const require_index$4 = require('../../../hooks/use-composition/index.js');
const require_index$5 = require('../../../hooks/use-empty-values/index.js');
const require_use_form_common_props = require('../../form/src/hooks/use-form-common-props.js');
const require_use_form_item = require('../../form/src/hooks/use-form-item.js');
let _vueuse_core = require("@vueuse/core");
let lodash_unified = require("lodash-unified");
let vue = require("vue");
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/select/src/useSelect.ts
const useSelect = (props, emit) => {
const { t } = require_index.useLocale();
const slots = (0, vue.useSlots)();
const contentId = require_index$2.useId();
const nsSelect = require_index$1.useNamespace("select");
const nsInput = require_index$1.useNamespace("input");
const states = (0, vue.reactive)({
inputValue: "",
options: /* @__PURE__ */ new Map(),
cachedOptions: /* @__PURE__ */ new Map(),
optionValues: [],
selected: [],
selectionWidth: 0,
collapseItemWidth: 0,
selectedLabel: "",
hoveringIndex: -1,
previousQuery: null,
inputHovering: false,
menuVisibleOnFocus: false,
isBeforeHide: false
});
const selectRef = (0, vue.ref)();
const selectionRef = (0, vue.ref)();
const tooltipRef = (0, vue.ref)();
const tagTooltipRef = (0, vue.ref)();
const inputRef = (0, vue.ref)();
const prefixRef = (0, vue.ref)();
const suffixRef = (0, vue.ref)();
const menuRef = (0, vue.ref)();
const tagMenuRef = (0, vue.ref)();
const collapseItemRef = (0, vue.ref)();
const scrollbarRef = (0, vue.ref)();
const expanded = (0, vue.ref)(false);
const hoverOption = (0, vue.ref)();
const debouncing = (0, vue.ref)(false);
const { form, formItem } = require_use_form_item.useFormItem();
const { inputId } = require_use_form_item.useFormItemInputId(props, { formItemContext: formItem });
const { valueOnClear, isEmptyValue } = require_index$5.useEmptyValues(props);
const { isComposing, handleCompositionStart, handleCompositionUpdate, handleCompositionEnd } = require_index$4.useComposition({ afterComposition: (e) => onInput(e) });
const selectDisabled = require_use_form_common_props.useFormDisabled();
const { wrapperRef, isFocused, handleBlur } = require_index$3.useFocusController(inputRef, {
disabled: selectDisabled,
afterFocus() {
if (props.automaticDropdown && !expanded.value) {
expanded.value = true;
states.menuVisibleOnFocus = true;
}
},
beforeBlur(event) {
return tooltipRef.value?.isFocusInsideContent(event) || tagTooltipRef.value?.isFocusInsideContent(event);
},
afterBlur() {
expanded.value = false;
states.menuVisibleOnFocus = false;
if (props.validateEvent) formItem?.validate?.("blur").catch((err) => require_error.debugWarn(err));
}
});
const hasModelValue = (0, vue.computed)(() => {
return (0, _vue_shared.isArray)(props.modelValue) ? props.modelValue.length > 0 : !isEmptyValue(props.modelValue);
});
const needStatusIcon = (0, vue.computed)(() => form?.statusIcon ?? false);
const showClearBtn = (0, vue.computed)(() => {
return props.clearable && !selectDisabled.value && hasModelValue.value && (isFocused.value || states.inputHovering);
});
const iconComponent = (0, vue.computed)(() => props.remote && props.filterable && !props.remoteShowSuffix ? "" : props.suffixIcon);
const iconReverse = (0, vue.computed)(() => nsSelect.is("reverse", !!(iconComponent.value && expanded.value)));
const validateState = (0, vue.computed)(() => formItem?.validateState || "");
const validateIcon = (0, vue.computed)(() => validateState.value && require_icon.ValidateComponentsMap[validateState.value]);
const debounce = (0, vue.computed)(() => props.remote ? props.debounce : 0);
const isRemoteSearchEmpty = (0, vue.computed)(() => props.remote && !states.inputValue && states.options.size === 0);
const emptyText = (0, vue.computed)(() => {
if (props.loading) return props.loadingText || t("el.select.loading");
else {
if (props.filterable && states.inputValue && states.options.size > 0 && filteredOptionsCount.value === 0) return props.noMatchText || t("el.select.noMatch");
if (states.options.size === 0) return props.noDataText || t("el.select.noData");
}
return null;
});
const filteredOptionsCount = (0, vue.computed)(() => optionsArray.value.filter((option) => option.visible).length);
const optionsArray = (0, vue.computed)(() => {
const list = Array.from(states.options.values());
const newList = [];
states.optionValues.forEach((item) => {
const index = list.findIndex((i) => i.value === item);
if (index > -1) newList.push(list[index]);
});
return newList.length >= list.length ? newList : list;
});
const cachedOptionsArray = (0, vue.computed)(() => Array.from(states.cachedOptions.values()));
const showNewOption = (0, vue.computed)(() => {
const hasExistingOption = optionsArray.value.filter((option) => {
return !option.created;
}).some((option) => {
return option.currentLabel === states.inputValue;
});
return props.filterable && props.allowCreate && states.inputValue !== "" && !hasExistingOption;
});
const updateOptions = () => {
if (props.filterable && (0, _vue_shared.isFunction)(props.filterMethod)) return;
if (props.filterable && props.remote && (0, _vue_shared.isFunction)(props.remoteMethod)) return;
optionsArray.value.forEach((option) => {
option.updateOption?.(states.inputValue);
});
};
const selectSize = require_use_form_common_props.useFormSize();
const collapseTagSize = (0, vue.computed)(() => ["small"].includes(selectSize.value) ? "small" : "default");
const dropdownMenuVisible = (0, vue.computed)({
get() {
return expanded.value && (props.loading || !isRemoteSearchEmpty.value || props.remote && !!slots.empty) && (!debouncing.value || !require_types.isEmpty(states.previousQuery) || states.options.size > 0);
},
set(val) {
expanded.value = val;
}
});
const shouldShowPlaceholder = (0, vue.computed)(() => {
if (props.multiple && !require_types.isUndefined(props.modelValue)) return (0, lodash_unified.castArray)(props.modelValue).length === 0 && !states.inputValue;
const value = (0, _vue_shared.isArray)(props.modelValue) ? props.modelValue[0] : props.modelValue;
return props.filterable || require_types.isUndefined(value) ? !states.inputValue : true;
});
const currentPlaceholder = (0, vue.computed)(() => {
const _placeholder = props.placeholder ?? t("el.select.placeholder");
return props.multiple || !hasModelValue.value ? _placeholder : states.selectedLabel;
});
const mouseEnterEventName = (0, vue.computed)(() => _vueuse_core.isIOS ? null : "mouseenter");
(0, vue.watch)(() => props.modelValue, (val, oldVal) => {
if (props.multiple) {
if (props.filterable && !props.reserveKeyword) {
states.inputValue = "";
handleQueryChange("");
}
}
setSelected();
if (!(0, lodash_unified.isEqual)(val, oldVal) && props.validateEvent) formItem?.validate("change").catch((err) => require_error.debugWarn(err));
}, {
flush: "post",
deep: true
});
(0, vue.watch)(() => expanded.value, (val) => {
if (val) handleQueryChange(states.inputValue);
else {
states.inputValue = "";
states.previousQuery = null;
states.isBeforeHide = true;
states.menuVisibleOnFocus = false;
}
});
(0, vue.watch)(() => states.options.entries(), () => {
if (!_vueuse_core.isClient) return;
setSelected();
if (props.defaultFirstOption && (props.filterable || props.remote) && filteredOptionsCount.value) checkDefaultFirstOption();
}, { flush: "post" });
(0, vue.watch)([() => states.hoveringIndex, optionsArray], ([val]) => {
if (require_types.isNumber(val) && val > -1) hoverOption.value = optionsArray.value[val] || {};
else hoverOption.value = {};
optionsArray.value.forEach((option) => {
option.hover = hoverOption.value === option;
});
});
(0, vue.watchEffect)(() => {
if (states.isBeforeHide) return;
updateOptions();
});
const handleQueryChange = (val) => {
if (states.previousQuery === val || isComposing.value) return;
states.previousQuery = val;
if (props.filterable && (0, _vue_shared.isFunction)(props.filterMethod)) props.filterMethod(val);
else if (props.filterable && props.remote && (0, _vue_shared.isFunction)(props.remoteMethod)) props.remoteMethod(val);
if (props.defaultFirstOption && (props.filterable || props.remote) && filteredOptionsCount.value) (0, vue.nextTick)(checkDefaultFirstOption);
else (0, vue.nextTick)(updateHoveringIndex);
};
/**
* find and highlight first option as default selected
* @remark
* - if the first option in dropdown list is user-created,
* it would be at the end of the optionsArray
* so find it and set hover.
* (NOTE: there must be only one user-created option in dropdown list with query)
* - if there's no user-created option in list, just find the first one as usual
* (NOTE: exclude options that are disabled or in disabled-group)
*/
const checkDefaultFirstOption = () => {
const optionsInDropdown = optionsArray.value.filter((n) => n.visible && !n.disabled && !n.states.groupDisabled);
const userCreatedOption = optionsInDropdown.find((n) => n.created);
const firstOriginOption = optionsInDropdown[0];
states.hoveringIndex = getValueIndex(optionsArray.value.map((item) => item.value), userCreatedOption || firstOriginOption);
};
const setSelected = () => {
if (!props.multiple) {
const option = getOption((0, _vue_shared.isArray)(props.modelValue) ? props.modelValue[0] : props.modelValue);
states.selectedLabel = option.currentLabel;
states.selected = [option];
return;
} else states.selectedLabel = "";
const result = [];
if (!require_types.isUndefined(props.modelValue)) (0, lodash_unified.castArray)(props.modelValue).forEach((value) => {
result.push(getOption(value));
});
states.selected = result;
};
const getOption = (value) => {
let option;
const isObjectValue = (0, _vue_shared.isPlainObject)(value);
for (let i = states.cachedOptions.size - 1; i >= 0; i--) {
const cachedOption = cachedOptionsArray.value[i];
if (isObjectValue ? (0, lodash_unified.get)(cachedOption.value, props.valueKey) === (0, lodash_unified.get)(value, props.valueKey) : cachedOption.value === value) {
option = {
index: optionsArray.value.filter((opt) => !opt.created).indexOf(cachedOption),
value,
currentLabel: cachedOption.currentLabel,
get isDisabled() {
return cachedOption.isDisabled;
}
};
break;
}
}
if (option) return option;
return {
index: -1,
value,
currentLabel: isObjectValue ? value.label : value ?? ""
};
};
const updateHoveringIndex = () => {
const length = states.selected.length;
if (length > 0) {
const lastOption = states.selected[length - 1];
states.hoveringIndex = optionsArray.value.findIndex((item) => getValueKey(lastOption) === getValueKey(item));
} else states.hoveringIndex = -1;
};
const resetSelectionWidth = () => {
states.selectionWidth = Number.parseFloat(window.getComputedStyle(selectionRef.value).width);
};
const resetCollapseItemWidth = () => {
states.collapseItemWidth = collapseItemRef.value.getBoundingClientRect().width;
};
const updateTooltip = () => {
tooltipRef.value?.updatePopper?.();
};
const updateTagTooltip = () => {
tagTooltipRef.value?.updatePopper?.();
};
const onInputChange = () => {
if (states.inputValue.length > 0 && !expanded.value) expanded.value = true;
handleQueryChange(states.inputValue);
};
const onInput = (event) => {
states.inputValue = event.target.value;
if (props.remote) {
debouncing.value = true;
debouncedOnInputChange();
} else return onInputChange();
};
const debouncedOnInputChange = (0, _vueuse_core.useDebounceFn)(() => {
onInputChange();
debouncing.value = false;
}, debounce);
const emitChange = (val) => {
if (!(0, lodash_unified.isEqual)(props.modelValue, val)) emit(require_event.CHANGE_EVENT, val);
};
const getLastNotDisabledIndex = (value) => (0, lodash_unified.findLastIndex)(value, (it) => {
const option = states.cachedOptions.get(it);
return !option?.disabled && !option?.states.groupDisabled;
});
const deletePrevTag = (e) => {
const code = require_event$1.getEventCode(e);
if (!props.multiple) return;
if (code === require_aria.EVENT_CODE.delete) return;
if (e.target.value.length <= 0) {
const value = (0, lodash_unified.castArray)(props.modelValue).slice();
const lastNotDisabledIndex = getLastNotDisabledIndex(value);
if (lastNotDisabledIndex < 0) return;
const removeTagValue = value[lastNotDisabledIndex];
value.splice(lastNotDisabledIndex, 1);
emit(require_event.UPDATE_MODEL_EVENT, value);
emitChange(value);
emit("remove-tag", removeTagValue);
}
};
const deleteTag = (event, tag) => {
const index = states.selected.indexOf(tag);
if (index > -1 && !selectDisabled.value) {
const value = (0, lodash_unified.castArray)(props.modelValue).slice();
value.splice(index, 1);
emit(require_event.UPDATE_MODEL_EVENT, value);
emitChange(value);
emit("remove-tag", tag.value);
}
event.stopPropagation();
focus();
};
const deleteSelected = (event) => {
event.stopPropagation();
const value = props.multiple ? [] : valueOnClear.value;
if (props.multiple) {
for (const item of states.selected) if (item.isDisabled) value.push(item.value);
}
emit(require_event.UPDATE_MODEL_EVENT, value);
emitChange(value);
states.hoveringIndex = -1;
expanded.value = false;
emit("clear");
focus();
};
const handleOptionSelect = (option) => {
if (props.multiple) {
const value = (0, lodash_unified.castArray)(props.modelValue ?? []).slice();
const optionIndex = getValueIndex(value, option);
if (optionIndex > -1) value.splice(optionIndex, 1);
else if (props.multipleLimit <= 0 || value.length < props.multipleLimit) value.push(option.value);
emit(require_event.UPDATE_MODEL_EVENT, value);
emitChange(value);
if (option.created) handleQueryChange("");
if (props.filterable && (option.created || !props.reserveKeyword)) states.inputValue = "";
} else {
!(0, lodash_unified.isEqual)(props.modelValue, option.value) && emit(require_event.UPDATE_MODEL_EVENT, option.value);
emitChange(option.value);
expanded.value = false;
}
focus();
if (expanded.value) return;
(0, vue.nextTick)(() => {
scrollToOption(option);
});
};
const getValueIndex = (arr, option) => {
if (require_types.isUndefined(option)) return -1;
if (!(0, _vue_shared.isObject)(option.value)) return arr.indexOf(option.value);
return arr.findIndex((item) => {
return (0, lodash_unified.isEqual)((0, lodash_unified.get)(item, props.valueKey), getValueKey(option));
});
};
const scrollToOption = (option) => {
const targetOption = (0, _vue_shared.isArray)(option) ? option[option.length - 1] : option;
let target = null;
if (!(0, lodash_unified.isNil)(targetOption?.value)) {
const options = optionsArray.value.filter((item) => item.value === targetOption.value);
if (options.length > 0) target = options[0].$el;
}
if (tooltipRef.value && target) {
const menu = tooltipRef.value?.popperRef?.contentRef?.querySelector?.(`.${nsSelect.be("dropdown", "wrap")}`);
if (menu) require_scroll.scrollIntoView(menu, target);
}
scrollbarRef.value?.handleScroll();
};
const onOptionCreate = (vm) => {
states.options.set(vm.value, vm);
states.cachedOptions.set(vm.value, vm);
};
const onOptionDestroy = (key, vm) => {
if (states.options.get(key) === vm) states.options.delete(key);
};
const popperRef = (0, vue.computed)(() => {
return tooltipRef.value?.popperRef?.contentRef;
});
const handleMenuEnter = () => {
states.isBeforeHide = false;
(0, vue.nextTick)(() => {
scrollbarRef.value?.update();
scrollToOption(states.selected);
});
};
const focus = () => {
inputRef.value?.focus();
};
const blur = () => {
if (expanded.value) {
expanded.value = false;
(0, vue.nextTick)(() => inputRef.value?.blur());
return;
}
inputRef.value?.blur();
};
const handleClearClick = (event) => {
deleteSelected(event);
};
const handleClickOutside = (event) => {
expanded.value = false;
if (isFocused.value) {
const _event = new FocusEvent("blur", event);
(0, vue.nextTick)(() => handleBlur(_event));
}
};
const handleEsc = () => {
if (states.inputValue.length > 0) states.inputValue = "";
else expanded.value = false;
};
const toggleMenu = (event) => {
if (selectDisabled.value || props.filterable && expanded.value && event && !suffixRef.value?.contains(event.target)) return;
if (_vueuse_core.isIOS) states.inputHovering = true;
if (states.menuVisibleOnFocus) states.menuVisibleOnFocus = false;
else expanded.value = !expanded.value;
};
const selectOption = () => {
if (!expanded.value) toggleMenu();
else {
const option = optionsArray.value[states.hoveringIndex];
if (option && !option.isDisabled) handleOptionSelect(option);
}
};
const getValueKey = (item) => {
return (0, _vue_shared.isObject)(item.value) ? (0, lodash_unified.get)(item.value, props.valueKey) : item.value;
};
const optionsAllDisabled = (0, vue.computed)(() => optionsArray.value.filter((option) => option.visible).every((option) => option.isDisabled));
const showTagList = (0, vue.computed)(() => {
if (!props.multiple) return [];
return props.collapseTags ? states.selected.slice(0, props.maxCollapseTags) : states.selected;
});
const collapseTagList = (0, vue.computed)(() => {
if (!props.multiple) return [];
return props.collapseTags ? states.selected.slice(props.maxCollapseTags) : [];
});
const navigateOptions = (direction) => {
if (!expanded.value) {
expanded.value = true;
return;
}
if (states.options.size === 0 || filteredOptionsCount.value === 0 || isComposing.value) return;
if (!optionsAllDisabled.value) {
if (direction === "next") {
states.hoveringIndex++;
if (states.hoveringIndex === states.options.size) states.hoveringIndex = 0;
} else if (direction === "prev") {
states.hoveringIndex--;
if (states.hoveringIndex < 0) states.hoveringIndex = states.options.size - 1;
}
const option = optionsArray.value[states.hoveringIndex];
if (option.isDisabled || !option.visible) navigateOptions(direction);
(0, vue.nextTick)(() => scrollToOption(hoverOption.value));
}
};
const findFocusableIndex = (arr, start, step, len) => {
for (let i = start; i >= 0 && i < len; i += step) {
const obj = arr[i];
if (!obj?.isDisabled && obj?.visible) return i;
}
return null;
};
const focusOption = (targetIndex, mode) => {
const len = states.options.size;
if (len === 0) return;
const start = (0, lodash_unified.clamp)(targetIndex, 0, len - 1);
const options = optionsArray.value;
const direction = mode === "up" ? -1 : 1;
const newIndex = findFocusableIndex(options, start, direction, len) ?? findFocusableIndex(options, start - direction, -direction, len);
if (newIndex != null) {
states.hoveringIndex = newIndex;
(0, vue.nextTick)(() => scrollToOption(hoverOption.value));
}
};
const handleKeydown = (e) => {
const code = require_event$1.getEventCode(e);
let isPreventDefault = true;
switch (code) {
case require_aria.EVENT_CODE.up:
navigateOptions("prev");
break;
case require_aria.EVENT_CODE.down:
navigateOptions("next");
break;
case require_aria.EVENT_CODE.enter:
case require_aria.EVENT_CODE.numpadEnter:
if (!isComposing.value) selectOption();
break;
case require_aria.EVENT_CODE.esc:
handleEsc();
break;
case require_aria.EVENT_CODE.backspace:
isPreventDefault = false;
deletePrevTag(e);
return;
case require_aria.EVENT_CODE.home:
if (!expanded.value) return;
focusOption(0, "down");
break;
case require_aria.EVENT_CODE.end:
if (!expanded.value) return;
focusOption(states.options.size - 1, "up");
break;
case require_aria.EVENT_CODE.pageUp:
if (!expanded.value) return;
focusOption(states.hoveringIndex - 10, "up");
break;
case require_aria.EVENT_CODE.pageDown:
if (!expanded.value) return;
focusOption(states.hoveringIndex + 10, "down");
break;
default:
isPreventDefault = false;
break;
}
if (isPreventDefault) {
e.preventDefault();
e.stopPropagation();
}
};
const getGapWidth = () => {
if (!selectionRef.value) return 0;
const style = window.getComputedStyle(selectionRef.value);
return Number.parseFloat(style.gap || "6px");
};
const tagStyle = (0, vue.computed)(() => {
const gapWidth = getGapWidth();
const inputSlotWidth = props.filterable ? gapWidth + require_form.MINIMUM_INPUT_WIDTH : 0;
return { maxWidth: `${collapseItemRef.value && props.maxCollapseTags === 1 ? states.selectionWidth - states.collapseItemWidth - gapWidth - inputSlotWidth : states.selectionWidth - inputSlotWidth}px` };
});
const collapseTagStyle = (0, vue.computed)(() => {
return { maxWidth: `${states.selectionWidth}px` };
});
const popupScroll = (data) => {
emit("popup-scroll", data);
};
(0, _vueuse_core.useResizeObserver)(selectionRef, resetSelectionWidth);
(0, _vueuse_core.useResizeObserver)(wrapperRef, updateTooltip);
(0, _vueuse_core.useResizeObserver)(tagMenuRef, updateTagTooltip);
(0, _vueuse_core.useResizeObserver)(collapseItemRef, resetCollapseItemWidth);
let stop;
(0, vue.watch)(() => dropdownMenuVisible.value, (newVal) => {
if (newVal) stop = (0, _vueuse_core.useResizeObserver)(menuRef, updateTooltip).stop;
else {
stop?.();
stop = void 0;
}
emit("visible-change", newVal);
});
(0, vue.onMounted)(() => {
setSelected();
});
return {
inputId,
contentId,
nsSelect,
nsInput,
states,
isFocused,
expanded,
optionsArray,
hoverOption,
selectSize,
filteredOptionsCount,
updateTooltip,
updateTagTooltip,
debouncedOnInputChange,
onInput,
deletePrevTag,
deleteTag,
deleteSelected,
handleOptionSelect,
scrollToOption,
hasModelValue,
shouldShowPlaceholder,
currentPlaceholder,
mouseEnterEventName,
needStatusIcon,
showClearBtn,
iconComponent,
iconReverse,
validateState,
validateIcon,
showNewOption,
updateOptions,
collapseTagSize,
setSelected,
selectDisabled,
emptyText,
handleCompositionStart,
handleCompositionUpdate,
handleCompositionEnd,
handleKeydown,
onOptionCreate,
onOptionDestroy,
handleMenuEnter,
focus,
blur,
handleClearClick,
handleClickOutside,
handleEsc,
toggleMenu,
selectOption,
getValueKey,
navigateOptions,
dropdownMenuVisible,
showTagList,
collapseTagList,
popupScroll,
getOption,
tagStyle,
collapseTagStyle,
popperRef,
inputRef,
tooltipRef,
tagTooltipRef,
prefixRef,
suffixRef,
selectRef,
wrapperRef,
selectionRef,
scrollbarRef,
menuRef,
tagMenuRef,
collapseItemRef
};
};
//#endregion
exports.useSelect = useSelect;
//# sourceMappingURL=useSelect.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../base/style/css.js');
require('../../scrollbar/style/css.js');
require('../../popper/style/css.js');
require('../../tag/style/css.js');
require('../../option/style/css.js');
require('../../option-group/style/css.js');
require("element-plus/theme-chalk/el-select.css");
@@ -0,0 +1,8 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../base/style/index.js');
require('../../scrollbar/style/index.js');
require('../../popper/style/index.js');
require('../../tag/style/index.js');
require('../../option/style/index.js');
require('../../option-group/style/index.js');
require("element-plus/theme-chalk/src/select.scss");