This commit is contained in:
2025-09-19 14:25:20 +08:00
parent 269893a435
commit fbf3f77229
24949 changed files with 2839404 additions and 0 deletions

View File

@@ -0,0 +1,14 @@
import Select from './src/select.vue';
import Option from './src/option.vue';
import OptionGroup from './src/option-group.vue';
import type { SFCWithInstall } from 'element-plus/es/utils';
export declare const ElSelect: SFCWithInstall<typeof Select> & {
Option: typeof Option;
OptionGroup: typeof OptionGroup;
};
export default ElSelect;
export declare const ElOption: SFCWithInstall<typeof Option>;
export declare const ElOptionGroup: SFCWithInstall<typeof OptionGroup>;
export * from './src/token';
export * from './src/select';
export type { SelectContext, OptionPublicInstance as SelectOptionProxy, OptionBasic, } from './src/type';

View File

@@ -0,0 +1,16 @@
import Select from './src/select2.mjs';
import Option from './src/option2.mjs';
import OptionGroup from './src/option-group.mjs';
export { selectGroupKey, selectKey } from './src/token.mjs';
export { selectEmits, selectProps } from './src/select.mjs';
import { withInstall, withNoopInstall } from '../../utils/vue/install.mjs';
const ElSelect = withInstall(Select, {
Option,
OptionGroup
});
const ElOption = withNoopInstall(Option);
const ElOptionGroup = withNoopInstall(OptionGroup);
export { ElOption, ElOptionGroup, ElSelect, ElSelect as default };
//# sourceMappingURL=index.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","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"],"names":[],"mappings":";;;;;;;AAIY,MAAC,QAAQ,GAAG,WAAW,CAAC,MAAM,EAAE;AAC5C,EAAE,MAAM;AACR,EAAE,WAAW;AACb,CAAC,EAAE;AAES,MAAC,QAAQ,GAAG,eAAe,CAAC,MAAM,EAAE;AACpC,MAAC,aAAa,GAAG,eAAe,CAAC,WAAW;;;;"}

View File

@@ -0,0 +1,86 @@
import { defineComponent, ref, getCurrentInstance, provide, reactive, toRefs, computed, onMounted, withDirectives, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, renderSlot, vShow, isVNode } from 'vue';
import { useMutationObserver } from '@vueuse/core';
import { selectGroupKey } from './token.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { castArray } from 'lodash-unified';
import { isArray } from '@vue/shared';
const _sfc_main = defineComponent({
name: "ElOptionGroup",
componentName: "ElOptionGroup",
props: {
label: String,
disabled: Boolean
},
setup(props) {
const ns = useNamespace("select");
const groupRef = ref();
const instance = getCurrentInstance();
const children = ref([]);
provide(selectGroupKey, reactive({
...toRefs(props)
}));
const visible = computed(() => children.value.some((option) => option.visible === true));
const isOption = (node) => {
var _a;
return node.type.name === "ElOption" && !!((_a = node.component) == null ? void 0 : _a.proxy);
};
const flattedChildren = (node) => {
const nodes = castArray(node);
const children2 = [];
nodes.forEach((child) => {
var _a;
if (!isVNode(child))
return;
if (isOption(child)) {
children2.push(child.component.proxy);
} else if (isArray(child.children) && child.children.length) {
children2.push(...flattedChildren(child.children));
} else if ((_a = child.component) == null ? void 0 : _a.subTree) {
children2.push(...flattedChildren(child.component.subTree));
}
});
return children2;
};
const updateChildren = () => {
children.value = flattedChildren(instance.subTree);
};
onMounted(() => {
updateChildren();
});
useMutationObserver(groupRef, updateChildren, {
attributes: true,
subtree: true,
childList: true
});
return {
groupRef,
visible,
ns
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return withDirectives((openBlock(), createElementBlock("ul", {
ref: "groupRef",
class: normalizeClass(_ctx.ns.be("group", "wrap"))
}, [
createElementVNode("li", {
class: normalizeClass(_ctx.ns.be("group", "title"))
}, toDisplayString(_ctx.label), 3),
createElementVNode("li", null, [
createElementVNode("ul", {
class: normalizeClass(_ctx.ns.b("group"))
}, [
renderSlot(_ctx.$slots, "default")
], 2)
])
], 2)), [
[vShow, _ctx.visible]
]);
}
var OptionGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "option-group.vue"]]);
export { OptionGroup as default };
//# sourceMappingURL=option-group.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,43 @@
declare const _default: import("vue").DefineComponent<{
/**
* @description name of the group
*/
label: StringConstructor;
/**
* @description whether to disable all options in this group
*/
disabled: BooleanConstructor;
}, {
groupRef: import("vue").Ref<HTMLElement | undefined>;
visible: import("vue").ComputedRef<boolean>;
ns: {
namespace: import("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;
};
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
/**
* @description name of the group
*/
label: StringConstructor;
/**
* @description whether to disable all options in this group
*/
disabled: BooleanConstructor;
}>>, {
disabled: boolean;
}>;
export default _default;

View File

@@ -0,0 +1,17 @@
export declare const COMPONENT_NAME = "ElOption";
export declare const optionProps: {
value: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
label: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
created: BooleanConstructor;
disabled: BooleanConstructor;
};

View File

@@ -0,0 +1,17 @@
import { buildProps } from '../../../utils/vue/props/runtime.mjs';
const COMPONENT_NAME = "ElOption";
const optionProps = buildProps({
value: {
type: [String, Number, Boolean, Object],
required: true
},
label: {
type: [String, Number]
},
created: Boolean,
disabled: Boolean
});
export { COMPONENT_NAME, optionProps };
//# sourceMappingURL=option.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"option.mjs","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"],"names":[],"mappings":";;AACY,MAAC,cAAc,GAAG,WAAW;AAC7B,MAAC,WAAW,GAAG,UAAU,CAAC;AACtC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC;AAC3C,IAAI,QAAQ,EAAE,IAAI;AAClB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,GAAG;AACH,EAAE,OAAO,EAAE,OAAO;AAClB,EAAE,QAAQ,EAAE,OAAO;AACnB,CAAC;;;;"}

View File

@@ -0,0 +1,71 @@
declare const _default: import("vue").DefineComponent<{
value: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
label: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
created: BooleanConstructor;
disabled: BooleanConstructor;
}, {
ns: {
namespace: import("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: import("vue").Ref<string>;
containerKls: import("vue").ComputedRef<string[]>;
currentLabel: import("vue").ComputedRef<boolean | import("element-plus/es/utils").EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
itemSelected: import("vue").ComputedRef<boolean>;
isDisabled: import("vue").ComputedRef<boolean>;
select: import("./type").SelectContext;
visible: import("vue").Ref<boolean>;
hover: import("vue").Ref<boolean>;
states: {
index: number;
groupDisabled: boolean;
visible: boolean;
hover: boolean;
};
hoverItem: () => void;
updateOption: (query: string) => void;
selectOptionClick: () => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
value: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
label: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
created: BooleanConstructor;
disabled: BooleanConstructor;
}>>, {
disabled: boolean;
created: boolean;
}>;
export default _default;

View File

@@ -0,0 +1,93 @@
import { defineComponent, computed, unref, reactive, toRefs, getCurrentInstance, onBeforeUnmount, nextTick, withDirectives, openBlock, createElementBlock, normalizeClass, withModifiers, renderSlot, createElementVNode, toDisplayString, vShow } from 'vue';
import { useOption } from './useOption.mjs';
import { COMPONENT_NAME, optionProps } from './option.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useId } from '../../../hooks/use-id/index.mjs';
const _sfc_main = defineComponent({
name: COMPONENT_NAME,
componentName: COMPONENT_NAME,
props: optionProps,
setup(props) {
const ns = useNamespace("select");
const id = useId();
const containerKls = computed(() => [
ns.be("dropdown", "item"),
ns.is("disabled", unref(isDisabled)),
ns.is("selected", unref(itemSelected)),
ns.is("hovering", unref(hover))
]);
const states = reactive({
index: -1,
groupDisabled: false,
visible: true,
hover: false
});
const {
currentLabel,
itemSelected,
isDisabled,
select,
hoverItem,
updateOption
} = useOption(props, states);
const { visible, hover } = toRefs(states);
const vm = getCurrentInstance().proxy;
select.onOptionCreate(vm);
onBeforeUnmount(() => {
const key = vm.value;
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);
}
}
return {
ns,
id,
containerKls,
currentLabel,
itemSelected,
isDisabled,
select,
visible,
hover,
states,
hoverItem,
updateOption,
selectOptionClick
};
}
});
function _sfc_render(_ctx, _cache) {
return withDirectives((openBlock(), createElementBlock("li", {
id: _ctx.id,
class: normalizeClass(_ctx.containerKls),
role: "option",
"aria-disabled": _ctx.isDisabled || void 0,
"aria-selected": _ctx.itemSelected,
onMousemove: _ctx.hoverItem,
onClick: withModifiers(_ctx.selectOptionClick, ["stop"])
}, [
renderSlot(_ctx.$slots, "default", {}, () => [
createElementVNode("span", null, toDisplayString(_ctx.currentLabel), 1)
])
], 42, ["id", "aria-disabled", "aria-selected", "onMousemove", "onClick"])), [
[vShow, _ctx.visible]
]);
}
var Option = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "option.vue"]]);
export { Option as default };
//# sourceMappingURL=option2.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,5 @@
import type { VNode } from 'vue';
declare const _default: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
export default _default;

View File

@@ -0,0 +1,45 @@
import { defineComponent, inject } from 'vue';
import { isEqual } from 'lodash-unified';
import { selectKey } from './token.mjs';
import { isArray, isString, isFunction } from '@vue/shared';
var ElOptions = defineComponent({
name: "ElOptions",
setup(_, { slots }) {
const select = inject(selectKey);
let cachedValueList = [];
return () => {
var _a, _b;
const children = (_a = slots.default) == null ? void 0 : _a.call(slots);
const valueList = [];
function filterOptions(children2) {
if (!isArray(children2))
return;
children2.forEach((item) => {
var _a2, _b2, _c, _d;
const name = (_a2 = (item == null ? void 0 : item.type) || {}) == null ? void 0 : _a2.name;
if (name === "ElOptionGroup") {
filterOptions(!isString(item.children) && !isArray(item.children) && isFunction((_b2 = item.children) == null ? void 0 : _b2.default) ? (_c = item.children) == null ? void 0 : _c.default() : item.children);
} else if (name === "ElOption") {
valueList.push((_d = item.props) == null ? void 0 : _d.value);
} else if (isArray(item.children)) {
filterOptions(item.children);
}
});
}
if (children.length) {
filterOptions((_b = children[0]) == null ? void 0 : _b.children);
}
if (!isEqual(valueList, cachedValueList)) {
cachedValueList = valueList;
if (select) {
select.states.optionValues = valueList;
}
}
return children;
};
}
});
export { ElOptions as default };
//# sourceMappingURL=options.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"options.mjs","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"],"names":[],"mappings":";;;;;AAIA,gBAAe,eAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,WAAW;AACnB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;AACtB,IAAI,MAAM,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;AACrC,IAAI,IAAI,eAAe,GAAG,EAAE,CAAC;AAC7B,IAAI,OAAO,MAAM;AACjB,MAAM,IAAI,EAAE,EAAE,EAAE,CAAC;AACjB,MAAM,MAAM,QAAQ,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAC9E,MAAM,MAAM,SAAS,GAAG,EAAE,CAAC;AAC3B,MAAM,SAAS,aAAa,CAAC,SAAS,EAAE;AACxC,QAAQ,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC;AAC/B,UAAU,OAAO;AACjB,QAAQ,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK;AACpC,UAAU,IAAI,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC;AAC/B,UAAU,MAAM,IAAI,GAAG,CAAC,GAAG,GAAG,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,IAAI,KAAK,EAAE,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC;AACrG,UAAU,IAAI,IAAI,KAAK,eAAe,EAAE;AACxC,YAAY,aAAa,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,UAAU,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC1N,WAAW,MAAM,IAAI,IAAI,KAAK,UAAU,EAAE;AAC1C,YAAY,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC;AAC1E,WAAW,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;AAC7C,YAAY,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AACzC,WAAW;AACX,SAAS,CAAC,CAAC;AACX,OAAO;AACP,MAAM,IAAI,QAAQ,CAAC,MAAM,EAAE;AAC3B,QAAQ,aAAa,CAAC,CAAC,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC;AACzE,OAAO;AACP,MAAM,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,eAAe,CAAC,EAAE;AAChD,QAAQ,eAAe,GAAG,SAAS,CAAC;AACpC,QAAQ,IAAI,MAAM,EAAE;AACpB,UAAU,MAAM,CAAC,MAAM,CAAC,YAAY,GAAG,SAAS,CAAC;AACjD,SAAS;AACT,OAAO;AACP,MAAM,OAAO,QAAQ,CAAC;AACtB,KAAK,CAAC;AACN,GAAG;AACH,CAAC,CAAC;;;;"}

View File

@@ -0,0 +1,63 @@
import { defineComponent, inject, computed, ref, onMounted, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createCommentVNode } from 'vue';
import { useResizeObserver } from '@vueuse/core';
import { selectKey } from './token.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { BORDER_HORIZONTAL_WIDTH } from '../../../constants/form.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
const _sfc_main = defineComponent({
name: "ElSelectDropdown",
componentName: "ElSelectDropdown",
setup() {
const select = inject(selectKey);
const ns = useNamespace("select");
const popperClass = computed(() => select.props.popperClass);
const isMultiple = computed(() => select.props.multiple);
const isFitInputWidth = computed(() => select.props.fitInputWidth);
const minWidth = ref("");
function updateMinWidth() {
var _a;
const offsetWidth = (_a = select.selectRef) == null ? void 0 : _a.offsetWidth;
if (offsetWidth) {
minWidth.value = `${offsetWidth - BORDER_HORIZONTAL_WIDTH}px`;
} else {
minWidth.value = "";
}
}
onMounted(() => {
updateMinWidth();
useResizeObserver(select.selectRef, updateMinWidth);
});
return {
ns,
minWidth,
popperClass,
isMultiple,
isFitInputWidth
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass([_ctx.ns.b("dropdown"), _ctx.ns.is("multiple", _ctx.isMultiple), _ctx.popperClass]),
style: normalizeStyle({ [_ctx.isFitInputWidth ? "width" : "minWidth"]: _ctx.minWidth })
}, [
_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(_ctx.ns.be("dropdown", "header"))
}, [
renderSlot(_ctx.$slots, "header")
], 2)) : createCommentVNode("v-if", true),
renderSlot(_ctx.$slots, "default"),
_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(_ctx.ns.be("dropdown", "footer"))
}, [
renderSlot(_ctx.$slots, "footer")
], 2)) : createCommentVNode("v-if", true)
], 6);
}
var ElSelectMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "select-dropdown.vue"]]);
export { ElSelectMenu as default };
//# sourceMappingURL=select-dropdown.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"select-dropdown.mjs","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"],"names":["_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_renderSlot","_createCommentVNode"],"mappings":";;;;;;;AAsBA,MAAK,YAAa,eAAa,CAAA;AAAA,EAC7B,IAAM,EAAA,kBAAA;AAAA,EAEN,aAAe,EAAA,kBAAA;AAAA,EAEf,KAAQ,GAAA;AACN,IAAM,MAAA,MAAA,GAAS,OAAO,SAAS,CAAA,CAAA;AAC/B,IAAM,MAAA,EAAA,GAAK,aAAa,QAAQ,CAAA,CAAA;AAGhC,IAAA,MAAM,WAAc,GAAA,QAAA,CAAS,MAAM,MAAA,CAAO,MAAM,WAAW,CAAA,CAAA;AAC3D,IAAA,MAAM,UAAa,GAAA,QAAA,CAAS,MAAM,MAAA,CAAO,MAAM,QAAQ,CAAA,CAAA;AACvD,IAAA,MAAM,eAAkB,GAAA,QAAA,CAAS,MAAM,MAAA,CAAO,MAAM,aAAa,CAAA,CAAA;AACjE,IAAM,MAAA,QAAA,GAAW,IAAI,EAAE,CAAA,CAAA;AAEvB,IAAA,SAAS,cAAiB,GAAA;AACxB,MAAM,IAAA,EAAA,CAAA;AACN,MAAA,MAAiB,WAAA,GAAA,CAAA,EAAA,GAAA,MAAA,CAAA,SAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA,CAAA;AACf,MAAS,IAAA,WAAA,EAAA;AAAgD,QACpD,QAAA,CAAA,KAAA,GAAA,CAAA,EAAA,WAAA,GAAA,uBAAA,CAAA,EAAA,CAAA,CAAA;AACL,OAAA,MAAA;AAAiB,QACnB,QAAA,CAAA,KAAA,GAAA,EAAA,CAAA;AAAA,OACF;AAEA,KAAA;AAGE,IAAe,SAAA,CAAA,MAAA;AACf,MAAkB,cAAA,EAAA,CAAA;AAAgC,MACnD,iBAAA,CAAA,MAAA,CAAA,SAAA,EAAA,cAAA,CAAA,CAAA;AAED,KAAO,CAAA,CAAA;AAAA,IACL,OAAA;AAAA,MACA,EAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACF,eAAA;AAAA,KACF,CAAA;AACF,GAAC;;AA5DC,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AAAA,EAWM,OAAAA,SAAA,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,IAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA,CAAA,UAAA,CAAA,EAAA,IAAA,CAAA,EAAA,CAAA,EAAA,CAAA,UAAA,EAAA,IAAA,CAAA,UAAA,CAAA,EAAA,IAAA,CAAA,WAAA,CAAA,CAAA;AAAA,IAVH,KAAA,EAAAC,cAAQ,CAAA,EAAA,CAAA,IAAA,CAAA,eAAI,GAAc,UAAK,UAAA,GAAa,IAAU,CAAA,QAAA,EAAA,CAAA;AAAc,GAAA,EAAA;AACT,IAAA,IAAA,CAAA,MAAA,CAAA,MAAA,IAAAH,SAAA,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA;;AAEjD,MAAA,KAAA,EAAAC,cAAX,CAAA,IAAA,CAAA,EAAA,CAAA,EAAA,CAAA,UAAA,EAAA,QAAA,CAAA,CAAA;AAAA,KAEM,EAAA;AAAA,MAAAE,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,QAAA,CAAA;AAAA,KAAA,EAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;cAF0B,CAAA,IAAA,CAAA,MAAA,EAAA;AAAO,IAAA,IAAA,CAAA,MAAA,CAAA,MAAA,IAAAL,SAAA,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA;;WACf,EAAAC,cAAA,CAAA,IAAA,CAAA,EAAA,CAAA,EAAA,CAAA,UAAA,EAAA,QAAA,CAAA,CAAA;AAAA,KAAA,EAAA;;;;;AAGxB,mBAEM,gBAAA,WAAA,CAAA,SAAA,EAAA,CAAA,CAAA,QAAA,EAAA,WAAA,CAAA,EAAA,CAAA,QAAA,EAAA,qBAAA,CAAA,CAAA,CAAA;;;;"}

View File

@@ -0,0 +1,25 @@
declare const _default: import("vue").DefineComponent<{}, {
ns: {
namespace: import("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: import("vue").Ref<string>;
popperClass: import("vue").ComputedRef<string>;
isMultiple: import("vue").ComputedRef<boolean>;
isFitInputWidth: import("vue").ComputedRef<boolean>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
export default _default;

View File

@@ -0,0 +1,132 @@
import type { EmitFn } from 'element-plus/es/utils';
import type { CSSProperties, ExtractPropTypes, __ExtractPublicPropTypes } from 'vue';
import type Select from './select.vue';
import type { Options, Placement, PopperEffect } from 'element-plus/es/components/popper';
import type { Props } from 'element-plus/es/components/select-v2/src/useProps';
export declare const selectProps: {
ariaLabel: StringConstructor;
emptyValues: ArrayConstructor;
valueOnClear: import("element-plus/es/utils").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))[], unknown, unknown, undefined, boolean>;
name: StringConstructor;
id: StringConstructor;
modelValue: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | number | boolean | Record<string, any> | import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null) | ((new (...args: any[]) => string | number | boolean | Record<string, any> | import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null))[], unknown, unknown, undefined, boolean>;
autocomplete: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
automaticDropdown: BooleanConstructor;
size: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
effect: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string) | (() => PopperEffect) | ((new (...args: any[]) => string) | (() => PopperEffect))[], unknown, unknown, string, boolean>;
disabled: BooleanConstructor;
clearable: BooleanConstructor;
filterable: BooleanConstructor;
allowCreate: BooleanConstructor;
loading: BooleanConstructor;
popperClass: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
popperStyle: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties) | ((new (...args: any[]) => string | CSSProperties) | (() => string | CSSProperties))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
popperOptions: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | ((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>))[], unknown, unknown, () => Partial<Options>, boolean>;
remote: BooleanConstructor;
loadingText: StringConstructor;
noMatchText: StringConstructor;
noDataText: StringConstructor;
remoteMethod: {
readonly type: import("vue").PropType<(query: string) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
filterMethod: {
readonly type: import("vue").PropType<(query: string) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
multiple: BooleanConstructor;
multipleLimit: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
placeholder: {
readonly type: import("vue").PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
defaultFirstOption: BooleanConstructor;
reserveKeyword: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
valueKey: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
collapseTags: BooleanConstructor;
collapseTagsTooltip: BooleanConstructor;
maxCollapseTags: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
teleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
persistent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
clearIcon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
fitInputWidth: BooleanConstructor;
suffixIcon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
tagType: {
default: string;
type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "primary" | "success" | "warning" | "info" | "danger", unknown>>;
required: false;
validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
tagEffect: {
default: string;
type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "dark" | "light" | "plain", unknown>>;
required: false;
validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
remoteShowSuffix: BooleanConstructor;
showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
offset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
placement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "auto" | "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" | "bottom" | "left" | "right" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement))[], Placement, unknown, string, boolean>;
fallbackPlacements: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | ((new (...args: any[]) => Placement[]) | (() => Placement[]))[], unknown, unknown, string[], boolean>;
tabindex: import("element-plus/es/utils").EpPropFinalized<(NumberConstructor | StringConstructor)[], unknown, unknown, number, boolean>;
appendTo: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>) | ((new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
options: {
readonly type: import("vue").PropType<Record<string, any>[]>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
props: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => Props) | (() => Props) | ((new (...args: any[]) => Props) | (() => Props))[], unknown, unknown, () => Required<Props>, boolean>;
};
export 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;
};
export type SelectProps = ExtractPropTypes<typeof selectProps>;
export type SelectPropsPublic = __ExtractPublicPropTypes<typeof selectProps>;
export type SelectEmits = EmitFn<typeof selectEmits>;
export type SelectInstance = InstanceType<typeof Select> & unknown;
export type SelectOptionProps = Props;

View File

@@ -0,0 +1,151 @@
import { placements } from '@popperjs/core';
import { CircleClose, ArrowDown } from '@element-plus/icons-vue';
import { defaultProps } from '../../select-v2/src/useProps.mjs';
import { scrollbarEmits } from '../../scrollbar/src/scrollbar.mjs';
import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
import { useSizeProp } from '../../../hooks/use-size/index.mjs';
import { useTooltipContentProps } from '../../tooltip/src/content.mjs';
import { iconPropType } from '../../../utils/vue/icon.mjs';
import { tagProps } from '../../tag/src/tag.mjs';
import { useEmptyValuesProps } from '../../../hooks/use-empty-values/index.mjs';
import { useAriaProps } from '../../../hooks/use-aria/index.mjs';
import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../../../constants/event.mjs';
const selectProps = buildProps({
name: String,
id: String,
modelValue: {
type: definePropType([
Array,
String,
Number,
Boolean,
Object
]),
default: void 0
},
autocomplete: {
type: String,
default: "off"
},
automaticDropdown: Boolean,
size: useSizeProp,
effect: {
type: definePropType(String),
default: "light"
},
disabled: Boolean,
clearable: Boolean,
filterable: Boolean,
allowCreate: Boolean,
loading: Boolean,
popperClass: {
type: String,
default: ""
},
popperStyle: {
type: definePropType([String, Object])
},
popperOptions: {
type: definePropType(Object),
default: () => ({})
},
remote: Boolean,
loadingText: String,
noMatchText: String,
noDataText: String,
remoteMethod: {
type: definePropType(Function)
},
filterMethod: {
type: 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,
maxCollapseTags: {
type: Number,
default: 1
},
teleported: useTooltipContentProps.teleported,
persistent: {
type: Boolean,
default: true
},
clearIcon: {
type: iconPropType,
default: CircleClose
},
fitInputWidth: Boolean,
suffixIcon: {
type: iconPropType,
default: ArrowDown
},
tagType: { ...tagProps.type, default: "info" },
tagEffect: { ...tagProps.effect, default: "light" },
validateEvent: {
type: Boolean,
default: true
},
remoteShowSuffix: Boolean,
showArrow: {
type: Boolean,
default: true
},
offset: {
type: Number,
default: 12
},
placement: {
type: definePropType(String),
values: placements,
default: "bottom-start"
},
fallbackPlacements: {
type: definePropType(Array),
default: ["bottom-start", "top-start", "right", "left"]
},
tabindex: {
type: [String, Number],
default: 0
},
appendTo: useTooltipContentProps.appendTo,
options: {
type: definePropType(Array)
},
props: {
type: definePropType(Object),
default: () => defaultProps
},
...useEmptyValuesProps,
...useAriaProps(["ariaLabel"])
});
const selectEmits = {
[UPDATE_MODEL_EVENT]: (val) => true,
[CHANGE_EVENT]: (val) => true,
"popup-scroll": scrollbarEmits.scroll,
"remove-tag": (val) => true,
"visible-change": (visible) => true,
focus: (evt) => evt instanceof FocusEvent,
blur: (evt) => evt instanceof FocusEvent,
clear: () => true
};
export { selectEmits, selectProps };
//# sourceMappingURL=select.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,428 @@
declare const _default: import("vue").DefineComponent<{
ariaLabel: StringConstructor;
emptyValues: ArrayConstructor;
valueOnClear: import("element-plus/es/utils").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))[], unknown, unknown, undefined, boolean>;
name: StringConstructor;
id: StringConstructor;
modelValue: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | number | boolean | Record<string, any> | import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null) | ((new (...args: any[]) => string | number | boolean | Record<string, any> | import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null))[], unknown, unknown, undefined, boolean>;
autocomplete: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
automaticDropdown: BooleanConstructor;
size: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
effect: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string) | (() => import("element-plus").PopperEffect) | ((new (...args: any[]) => string) | (() => import("element-plus").PopperEffect))[], unknown, unknown, string, boolean>;
disabled: BooleanConstructor;
clearable: BooleanConstructor;
filterable: BooleanConstructor;
allowCreate: BooleanConstructor;
loading: BooleanConstructor;
popperClass: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
popperStyle: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties) | (() => string | import("vue").CSSProperties) | ((new (...args: any[]) => string | import("vue").CSSProperties) | (() => string | import("vue").CSSProperties))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
popperOptions: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => Partial<import("element-plus").Options>) | (() => Partial<import("element-plus").Options>) | ((new (...args: any[]) => Partial<import("element-plus").Options>) | (() => Partial<import("element-plus").Options>))[], unknown, unknown, () => Partial<import("element-plus").Options>, boolean>;
remote: BooleanConstructor;
loadingText: StringConstructor;
noMatchText: StringConstructor;
noDataText: StringConstructor;
remoteMethod: {
readonly type: import("vue").PropType<(query: string) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
filterMethod: {
readonly type: import("vue").PropType<(query: string) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
multiple: BooleanConstructor;
multipleLimit: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
placeholder: {
readonly type: import("vue").PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
defaultFirstOption: BooleanConstructor;
reserveKeyword: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
valueKey: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
collapseTags: BooleanConstructor;
collapseTagsTooltip: BooleanConstructor;
maxCollapseTags: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
teleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
persistent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
clearIcon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
fitInputWidth: BooleanConstructor;
suffixIcon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
tagType: {
default: string;
type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "primary" | "success" | "warning" | "info" | "danger", unknown>>;
required: false;
validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
tagEffect: {
default: string;
type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "dark" | "light" | "plain", unknown>>;
required: false;
validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
remoteShowSuffix: BooleanConstructor;
showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
offset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
placement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement) | ((new (...args: any[]) => "top" | "bottom" | "left" | "right" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement))[], import("element-plus").Placement, unknown, string, boolean>;
fallbackPlacements: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("element-plus").Placement[]) | (() => import("element-plus").Placement[]) | ((new (...args: any[]) => import("element-plus").Placement[]) | (() => import("element-plus").Placement[]))[], unknown, unknown, string[], boolean>;
tabindex: import("element-plus/es/utils").EpPropFinalized<(NumberConstructor | StringConstructor)[], unknown, unknown, number, boolean>;
appendTo: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>) | ((new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
options: {
readonly type: import("vue").PropType<Record<string, any>[]>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
props: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("element-plus/es/components/select-v2/src/useProps").Props) | (() => import("element-plus/es/components/select-v2/src/useProps").Props) | ((new (...args: any[]) => import("element-plus/es/components/select-v2/src/useProps").Props) | (() => import("element-plus/es/components/select-v2/src/useProps").Props))[], unknown, unknown, () => Required<import("element-plus/es/components/select-v2/src/useProps").Props>, boolean>;
}, {
modelValue: import("vue").ComputedRef<string | number | boolean | any[] | Record<string, any> | null | undefined>;
selectedLabel: import("vue").ComputedRef<string | string[]>;
calculatorRef: import("vue").ShallowRef<HTMLElement | undefined>;
inputStyle: import("vue").ComputedRef<{
minWidth: string;
}>;
getLabel: (option: import("../../select-v2/src/select.types.js").Option) => any;
getValue: (option: import("../../select-v2/src/select.types.js").Option) => any;
getOptions: (option: import("../../select-v2/src/select.types.js").Option) => any;
getDisabled: (option: import("../../select-v2/src/select.types.js").Option) => any;
getOptionProps: (option: Record<string, any>) => {
label: any;
value: any;
disabled: any;
};
inputId: import("vue").Ref<string | undefined>;
contentId: import("vue").Ref<string>;
nsSelect: {
namespace: import("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: import("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<import("./type").OptionValue, import("./type").OptionPublicInstance>;
cachedOptions: Map<import("./type").OptionValue, import("./type").OptionPublicInstance>;
optionValues: import("./type").OptionValue[];
selected: {
index: number;
value: import("./type").OptionValue;
currentLabel: import("./type").OptionPublicInstance["currentLabel"];
isDisabled?: import("./type").OptionPublicInstance["isDisabled"] | undefined;
}[];
hoveringIndex: number;
inputHovering: boolean;
selectionWidth: number;
collapseItemWidth: number;
previousQuery: string | null;
selectedLabel: string;
menuVisibleOnFocus: boolean;
isBeforeHide: boolean;
};
isFocused: import("vue").Ref<boolean>;
expanded: import("vue").Ref<boolean>;
optionsArray: import("vue").ComputedRef<import("./type").OptionPublicInstance[]>;
hoverOption: import("vue").Ref<any>;
selectSize: import("vue").ComputedRef<"" | "small" | "default" | "large">;
filteredOptionsCount: import("vue").ComputedRef<number>;
updateTooltip: () => void;
updateTagTooltip: () => void;
debouncedOnInputChange: import("lodash").DebouncedFunc<() => void>;
onInput: (event: Event) => void;
deletePrevTag: (e: KeyboardEvent) => void;
deleteTag: (event: MouseEvent, tag: import("./type").OptionBasic) => void;
deleteSelected: (event: Event) => void;
handleOptionSelect: (option: import("./type").OptionPublicInstance) => void;
scrollToOption: (option: import("./type").OptionPublicInstance | import("./type").OptionPublicInstance[] | import("./type").SelectStates["selected"]) => void;
hasModelValue: import("vue").ComputedRef<boolean>;
shouldShowPlaceholder: import("vue").ComputedRef<boolean>;
currentPlaceholder: import("vue").ComputedRef<string>;
mouseEnterEventName: import("vue").ComputedRef<"mouseenter" | null>;
needStatusIcon: import("vue").ComputedRef<boolean>;
showClearBtn: import("vue").ComputedRef<boolean>;
iconComponent: import("vue").ComputedRef<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown> | undefined>;
iconReverse: import("vue").ComputedRef<string>;
validateState: import("vue").ComputedRef<"" | "error" | "success" | "validating">;
validateIcon: import("vue").ComputedRef<"" | import("vue").Component>;
showNewOption: import("vue").ComputedRef<boolean>;
updateOptions: () => void;
collapseTagSize: import("vue").ComputedRef<"default" | "small">;
setSelected: () => void;
selectDisabled: import("vue").ComputedRef<boolean>;
emptyText: import("vue").ComputedRef<string | null>;
handleCompositionStart: (event: CompositionEvent) => void;
handleCompositionUpdate: (event: CompositionEvent) => void;
handleCompositionEnd: (event: CompositionEvent) => void;
onOptionCreate: (vm: import("./type").OptionPublicInstance) => void;
onOptionDestroy: (key: import("./type").OptionValue, vm: import("./type").OptionPublicInstance) => void;
handleMenuEnter: () => void;
focus: () => void;
blur: () => void;
handleClearClick: (event: Event) => void;
handleClickOutside: (event: Event) => void;
handleEsc: () => void;
toggleMenu: () => void;
selectOption: () => void;
getValueKey: (item: import("./type").OptionPublicInstance | import("./type").SelectStates["selected"][0]) => any;
navigateOptions: (direction: "prev" | "next") => void;
dropdownMenuVisible: import("vue").WritableComputedRef<boolean>;
showTagList: import("vue").ComputedRef<{
index: number;
value: import("./type").OptionValue;
currentLabel: import("./type").OptionPublicInstance["currentLabel"];
isDisabled?: import("./type").OptionPublicInstance["isDisabled"] | undefined;
}[]>;
collapseTagList: import("vue").ComputedRef<{
index: number;
value: import("./type").OptionValue;
currentLabel: import("./type").OptionPublicInstance["currentLabel"];
isDisabled?: import("./type").OptionPublicInstance["isDisabled"] | undefined;
}[]>;
popupScroll: (data: {
scrollTop: number;
scrollLeft: number;
}) => void;
getOption: (value: import("./type").OptionValue) => {
index: number;
value: import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>;
currentLabel: any;
} | {
index: number;
value: import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>;
currentLabel: string | number | boolean;
readonly isDisabled: boolean;
};
tagStyle: import("vue").ComputedRef<{
maxWidth: string;
}>;
collapseTagStyle: import("vue").ComputedRef<{
maxWidth: string;
}>;
popperRef: import("vue").ComputedRef<HTMLElement | undefined>;
inputRef: import("vue").Ref<HTMLInputElement | undefined>;
tooltipRef: import("vue").Ref<import("element-plus/es/components/tooltip").TooltipInstance | undefined>;
tagTooltipRef: import("vue").Ref<import("element-plus/es/components/tooltip").TooltipInstance | undefined>;
prefixRef: import("vue").Ref<HTMLElement | undefined>;
suffixRef: import("vue").Ref<HTMLElement | undefined>;
selectRef: import("vue").Ref<HTMLElement | undefined>;
wrapperRef: import("vue").ShallowRef<HTMLElement | undefined>;
selectionRef: import("vue").Ref<HTMLElement | undefined>;
scrollbarRef: import("vue").Ref<import("element-plus/es/components/scrollbar").ScrollbarInstance | undefined>;
menuRef: import("vue").Ref<HTMLElement | undefined>;
tagMenuRef: import("vue").Ref<HTMLElement | undefined>;
collapseItemRef: import("vue").Ref<HTMLElement | undefined>;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "clear" | "update:modelValue" | "change" | "blur" | "visible-change" | "remove-tag" | "popup-scroll")[], "focus" | "clear" | "update:modelValue" | "change" | "blur" | "visible-change" | "remove-tag" | "popup-scroll", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
ariaLabel: StringConstructor;
emptyValues: ArrayConstructor;
valueOnClear: import("element-plus/es/utils").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))[], unknown, unknown, undefined, boolean>;
name: StringConstructor;
id: StringConstructor;
modelValue: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | number | boolean | Record<string, any> | import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null) | ((new (...args: any[]) => string | number | boolean | Record<string, any> | import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null))[], unknown, unknown, undefined, boolean>;
autocomplete: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
automaticDropdown: BooleanConstructor;
size: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
effect: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string) | (() => import("element-plus").PopperEffect) | ((new (...args: any[]) => string) | (() => import("element-plus").PopperEffect))[], unknown, unknown, string, boolean>;
disabled: BooleanConstructor;
clearable: BooleanConstructor;
filterable: BooleanConstructor;
allowCreate: BooleanConstructor;
loading: BooleanConstructor;
popperClass: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
popperStyle: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties) | (() => string | import("vue").CSSProperties) | ((new (...args: any[]) => string | import("vue").CSSProperties) | (() => string | import("vue").CSSProperties))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
popperOptions: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => Partial<import("element-plus").Options>) | (() => Partial<import("element-plus").Options>) | ((new (...args: any[]) => Partial<import("element-plus").Options>) | (() => Partial<import("element-plus").Options>))[], unknown, unknown, () => Partial<import("element-plus").Options>, boolean>;
remote: BooleanConstructor;
loadingText: StringConstructor;
noMatchText: StringConstructor;
noDataText: StringConstructor;
remoteMethod: {
readonly type: import("vue").PropType<(query: string) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
filterMethod: {
readonly type: import("vue").PropType<(query: string) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
multiple: BooleanConstructor;
multipleLimit: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
placeholder: {
readonly type: import("vue").PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
defaultFirstOption: BooleanConstructor;
reserveKeyword: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
valueKey: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
collapseTags: BooleanConstructor;
collapseTagsTooltip: BooleanConstructor;
maxCollapseTags: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
teleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
persistent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
clearIcon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
fitInputWidth: BooleanConstructor;
suffixIcon: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
tagType: {
default: string;
type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "primary" | "success" | "warning" | "info" | "danger", unknown>>;
required: false;
validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
tagEffect: {
default: string;
type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "dark" | "light" | "plain", unknown>>;
required: false;
validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
remoteShowSuffix: BooleanConstructor;
showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
offset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
placement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement) | ((new (...args: any[]) => "top" | "bottom" | "left" | "right" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement))[], import("element-plus").Placement, unknown, string, boolean>;
fallbackPlacements: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("element-plus").Placement[]) | (() => import("element-plus").Placement[]) | ((new (...args: any[]) => import("element-plus").Placement[]) | (() => import("element-plus").Placement[]))[], unknown, unknown, string[], boolean>;
tabindex: import("element-plus/es/utils").EpPropFinalized<(NumberConstructor | StringConstructor)[], unknown, unknown, number, boolean>;
appendTo: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>) | ((new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
options: {
readonly type: import("vue").PropType<Record<string, any>[]>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
props: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("element-plus/es/components/select-v2/src/useProps").Props) | (() => import("element-plus/es/components/select-v2/src/useProps").Props) | ((new (...args: any[]) => import("element-plus/es/components/select-v2/src/useProps").Props) | (() => import("element-plus/es/components/select-v2/src/useProps").Props))[], unknown, unknown, () => Required<import("element-plus/es/components/select-v2/src/useProps").Props>, boolean>;
}>> & {
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
onChange?: ((...args: any[]) => any) | undefined;
onFocus?: ((...args: any[]) => any) | undefined;
onBlur?: ((...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;
}, {
disabled: boolean;
tabindex: import("element-plus/es/utils").EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>;
offset: number;
multiple: boolean;
props: import("element-plus/es/components/select-v2/src/useProps").Props;
loading: boolean;
modelValue: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | number | boolean | Record<string, any> | import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null) | ((new (...args: any[]) => string | number | boolean | Record<string, any> | import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null))[], unknown, unknown>;
placement: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement) | ((new (...args: any[]) => "top" | "bottom" | "left" | "right" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement))[], import("element-plus").Placement, unknown>;
effect: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string) | (() => import("element-plus").PopperEffect) | ((new (...args: any[]) => string) | (() => import("element-plus").PopperEffect))[], unknown, unknown>;
valueOnClear: import("element-plus/es/utils").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))[], unknown, unknown>;
autocomplete: string;
validateEvent: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
clearable: boolean;
fallbackPlacements: import("element-plus").Placement[];
popperOptions: Partial<import("element-plus").Options>;
popperClass: string;
teleported: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
persistent: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
showArrow: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
valueKey: string;
fitInputWidth: boolean;
filterable: boolean;
collapseTags: boolean;
maxCollapseTags: number;
collapseTagsTooltip: boolean;
tagType: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "primary" | "success" | "warning" | "info" | "danger", unknown>;
tagEffect: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "dark" | "light" | "plain", unknown>;
multipleLimit: number;
reserveKeyword: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
allowCreate: boolean;
automaticDropdown: boolean;
defaultFirstOption: boolean;
remote: boolean;
remoteShowSuffix: boolean;
}>;
export default _default;

View File

@@ -0,0 +1,533 @@
import { defineComponent, getCurrentInstance, computed, reactive, toRefs, watch, provide, onBeforeUnmount, resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, toHandlerKey, createVNode, withCtx, createElementVNode, withModifiers, renderSlot, createCommentVNode, Fragment, renderList, normalizeStyle, createTextVNode, toDisplayString, createBlock, withKeys, vModelText, resolveDynamicComponent, mergeProps, normalizeProps, vShow } from 'vue';
import { ElTooltip } from '../../tooltip/index.mjs';
import { ElScrollbar } from '../../scrollbar/index.mjs';
import { ElTag } from '../../tag/index.mjs';
import { ElIcon } from '../../icon/index.mjs';
import { useProps } from '../../select-v2/src/useProps.mjs';
import Option from './option2.mjs';
import ElSelectMenu from './select-dropdown.mjs';
import { useSelect } from './useSelect.mjs';
import { selectKey } from './token.mjs';
import ElOptions from './options.mjs';
import { selectProps } from './select.mjs';
import OptionGroup from './option-group.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import ClickOutside from '../../../directives/click-outside/index.mjs';
import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../../../constants/event.mjs';
import { isArray, isObject } from '@vue/shared';
import { useCalcInputWidth } from '../../../hooks/use-calc-input-width/index.mjs';
import { flattedChildren } from '../../../utils/vue/vnode.mjs';
const COMPONENT_NAME = "ElSelect";
const _sfc_main = defineComponent({
name: COMPONENT_NAME,
componentName: COMPONENT_NAME,
components: {
ElSelectMenu,
ElOption: Option,
ElOptions,
ElOptionGroup: OptionGroup,
ElTag,
ElScrollbar,
ElTooltip,
ElIcon
},
directives: { ClickOutside },
props: selectProps,
emits: [
UPDATE_MODEL_EVENT,
CHANGE_EVENT,
"remove-tag",
"clear",
"visible-change",
"focus",
"blur",
"popup-scroll"
],
setup(props, { emit, slots }) {
const instance = getCurrentInstance();
instance.appContext.config.warnHandler = (...args) => {
if (!args[0] || args[0].includes('Slot "default" invoked outside of the render function')) {
return;
}
console.warn(...args);
};
const modelValue = computed(() => {
const { modelValue: rawModelValue, multiple } = props;
const fallback = multiple ? [] : void 0;
if (isArray(rawModelValue)) {
return multiple ? rawModelValue : fallback;
}
return multiple ? fallback : rawModelValue;
});
const _props = reactive({
...toRefs(props),
modelValue
});
const API = useSelect(_props, emit);
const { calculatorRef, inputStyle } = useCalcInputWidth();
const { getLabel, getValue, getOptions, getDisabled } = 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) => {
const children = flattedChildren(vnodes || []);
children.forEach((item) => {
var _a;
if (isObject(item) && (item.type.name === "ElOption" || item.type.name === "ElTree")) {
const _name = item.type.name;
if (_name === "ElTree") {
const treeData = ((_a = item.props) == null ? void 0 : _a.data) || [];
const flatData = flatTreeSelectData(treeData);
flatData.forEach((treeItem) => {
treeItem.currentLabel = treeItem.label || (isObject(treeItem.value) ? "" : treeItem.value);
API.onOptionCreate(treeItem);
});
} else if (_name === "ElOption") {
const obj = { ...item.props };
obj.currentLabel = obj.label || (isObject(obj.value) ? "" : obj.value);
API.onOptionCreate(obj);
}
}
});
};
watch(() => {
var _a;
const slotsContent = (_a = slots.default) == null ? void 0 : _a.call(slots);
return slotsContent;
}, (newSlot) => {
if (props.persistent) {
return;
}
manuallyRenderSlots(newSlot);
}, {
immediate: true
});
provide(selectKey, 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 = computed(() => {
if (!props.multiple) {
return API.states.selectedLabel;
}
return API.states.selected.map((i) => i.currentLabel);
});
onBeforeUnmount(() => {
instance.appContext.config.warnHandler = void 0;
});
return {
...API,
modelValue,
selectedLabel,
calculatorRef,
inputStyle,
getLabel,
getValue,
getOptions,
getDisabled,
getOptionProps
};
}
});
function _sfc_render(_ctx, _cache) {
const _component_el_tag = resolveComponent("el-tag");
const _component_el_tooltip = resolveComponent("el-tooltip");
const _component_el_icon = resolveComponent("el-icon");
const _component_el_option = resolveComponent("el-option");
const _component_el_option_group = resolveComponent("el-option-group");
const _component_el_options = resolveComponent("el-options");
const _component_el_scrollbar = resolveComponent("el-scrollbar");
const _component_el_select_menu = resolveComponent("el-select-menu");
const _directive_click_outside = resolveDirective("click-outside");
return withDirectives((openBlock(), createElementBlock("div", {
ref: "selectRef",
class: normalizeClass([_ctx.nsSelect.b(), _ctx.nsSelect.m(_ctx.selectSize)]),
[toHandlerKey(_ctx.mouseEnterEventName)]: ($event) => _ctx.states.inputHovering = true,
onMouseleave: ($event) => _ctx.states.inputHovering = false
}, [
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: ($event) => _ctx.states.isBeforeHide = false
}, {
default: withCtx(() => {
var _a;
return [
createElementVNode("div", {
ref: "wrapperRef",
class: 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: withModifiers(_ctx.toggleMenu, ["prevent"])
}, [
_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", {
key: 0,
ref: "prefixRef",
class: normalizeClass(_ctx.nsSelect.e("prefix"))
}, [
renderSlot(_ctx.$slots, "prefix")
], 2)) : createCommentVNode("v-if", true),
createElementVNode("div", {
ref: "selectionRef",
class: normalizeClass([
_ctx.nsSelect.e("selection"),
_ctx.nsSelect.is("near", _ctx.multiple && !_ctx.$slots.prefix && !!_ctx.states.selected.length)
])
}, [
_ctx.multiple ? renderSlot(_ctx.$slots, "tag", {
key: 0,
data: _ctx.states.selected,
deleteTag: _ctx.deleteTag,
selectDisabled: _ctx.selectDisabled
}, () => [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.showTagList, (item) => {
return openBlock(), createElementBlock("div", {
key: _ctx.getValueKey(item),
class: normalizeClass(_ctx.nsSelect.e("selected-item"))
}, [
createVNode(_component_el_tag, {
closable: !_ctx.selectDisabled && !item.isDisabled,
size: _ctx.collapseTagSize,
type: _ctx.tagType,
effect: _ctx.tagEffect,
"disable-transitions": "",
style: normalizeStyle(_ctx.tagStyle),
onClose: ($event) => _ctx.deleteTag($event, item)
}, {
default: withCtx(() => [
createElementVNode("span", {
class: normalizeClass(_ctx.nsSelect.e("tags-text"))
}, [
renderSlot(_ctx.$slots, "label", {
index: item.index,
label: item.currentLabel,
value: item.value
}, () => [
createTextVNode(toDisplayString(item.currentLabel), 1)
])
], 2)
]),
_: 2
}, 1032, ["closable", "size", "type", "effect", "style", "onClose"])
], 2);
}), 128)),
_ctx.collapseTags && _ctx.states.selected.length > _ctx.maxCollapseTags ? (openBlock(), createBlock(_component_el_tooltip, {
key: 0,
ref: "tagTooltipRef",
disabled: _ctx.dropdownMenuVisible || !_ctx.collapseTagsTooltip,
"fallback-placements": ["bottom", "top", "right", "left"],
effect: _ctx.effect,
placement: "bottom",
"popper-class": _ctx.popperClass,
"popper-style": _ctx.popperStyle,
teleported: _ctx.teleported
}, {
default: withCtx(() => [
createElementVNode("div", {
ref: "collapseItemRef",
class: normalizeClass(_ctx.nsSelect.e("selected-item"))
}, [
createVNode(_component_el_tag, {
closable: false,
size: _ctx.collapseTagSize,
type: _ctx.tagType,
effect: _ctx.tagEffect,
"disable-transitions": "",
style: normalizeStyle(_ctx.collapseTagStyle)
}, {
default: withCtx(() => [
createElementVNode("span", {
class: normalizeClass(_ctx.nsSelect.e("tags-text"))
}, " + " + toDisplayString(_ctx.states.selected.length - _ctx.maxCollapseTags), 3)
]),
_: 1
}, 8, ["size", "type", "effect", "style"])
], 2)
]),
content: withCtx(() => [
createElementVNode("div", {
ref: "tagMenuRef",
class: normalizeClass(_ctx.nsSelect.e("selection"))
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.collapseTagList, (item) => {
return openBlock(), createElementBlock("div", {
key: _ctx.getValueKey(item),
class: normalizeClass(_ctx.nsSelect.e("selected-item"))
}, [
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: withCtx(() => [
createElementVNode("span", {
class: normalizeClass(_ctx.nsSelect.e("tags-text"))
}, [
renderSlot(_ctx.$slots, "label", {
index: item.index,
label: item.currentLabel,
value: item.value
}, () => [
createTextVNode(toDisplayString(item.currentLabel), 1)
])
], 2)
]),
_: 2
}, 1032, ["closable", "size", "type", "effect", "onClose"])
], 2);
}), 128))
], 2)
]),
_: 3
}, 8, ["disabled", "effect", "popper-class", "popper-style", "teleported"])) : createCommentVNode("v-if", true)
]) : createCommentVNode("v-if", true),
createElementVNode("div", {
class: normalizeClass([
_ctx.nsSelect.e("selected-item"),
_ctx.nsSelect.e("input-wrapper"),
_ctx.nsSelect.is("hidden", !_ctx.filterable)
])
}, [
withDirectives(createElementVNode("input", {
id: _ctx.inputId,
ref: "inputRef",
"onUpdate:modelValue": ($event) => _ctx.states.inputValue = $event,
type: "text",
name: _ctx.name,
class: normalizeClass([_ctx.nsSelect.e("input"), _ctx.nsSelect.is(_ctx.selectSize)]),
disabled: _ctx.selectDisabled,
autocomplete: _ctx.autocomplete,
style: normalizeStyle(_ctx.inputStyle),
tabindex: _ctx.tabindex,
role: "combobox",
readonly: !_ctx.filterable,
spellcheck: "false",
"aria-activedescendant": ((_a = _ctx.hoverOption) == null ? void 0 : _a.id) || "",
"aria-controls": _ctx.contentId,
"aria-expanded": _ctx.dropdownMenuVisible,
"aria-label": _ctx.ariaLabel,
"aria-autocomplete": "none",
"aria-haspopup": "listbox",
onKeydown: [
withKeys(withModifiers(($event) => _ctx.navigateOptions("next"), ["stop", "prevent"]), ["down"]),
withKeys(withModifiers(($event) => _ctx.navigateOptions("prev"), ["stop", "prevent"]), ["up"]),
withKeys(withModifiers(_ctx.handleEsc, ["stop", "prevent"]), ["esc"]),
withKeys(withModifiers(_ctx.selectOption, ["stop", "prevent"]), ["enter"]),
withKeys(withModifiers(_ctx.deletePrevTag, ["stop"]), ["delete"])
],
onCompositionstart: _ctx.handleCompositionStart,
onCompositionupdate: _ctx.handleCompositionUpdate,
onCompositionend: _ctx.handleCompositionEnd,
onInput: _ctx.onInput,
onClick: withModifiers(_ctx.toggleMenu, ["stop"])
}, null, 46, ["id", "onUpdate:modelValue", "name", "disabled", "autocomplete", "tabindex", "readonly", "aria-activedescendant", "aria-controls", "aria-expanded", "aria-label", "onKeydown", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onInput", "onClick"]), [
[vModelText, _ctx.states.inputValue]
]),
_ctx.filterable ? (openBlock(), createElementBlock("span", {
key: 0,
ref: "calculatorRef",
"aria-hidden": "true",
class: normalizeClass(_ctx.nsSelect.e("input-calculator")),
textContent: toDisplayString(_ctx.states.inputValue)
}, null, 10, ["textContent"])) : createCommentVNode("v-if", true)
], 2),
_ctx.shouldShowPlaceholder ? (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass([
_ctx.nsSelect.e("selected-item"),
_ctx.nsSelect.e("placeholder"),
_ctx.nsSelect.is("transparent", !_ctx.hasModelValue || _ctx.expanded && !_ctx.states.inputValue)
])
}, [
_ctx.hasModelValue ? renderSlot(_ctx.$slots, "label", {
key: 0,
index: _ctx.getOption(_ctx.modelValue).index,
label: _ctx.currentPlaceholder,
value: _ctx.modelValue
}, () => [
createElementVNode("span", null, toDisplayString(_ctx.currentPlaceholder), 1)
]) : (openBlock(), createElementBlock("span", { key: 1 }, toDisplayString(_ctx.currentPlaceholder), 1))
], 2)) : createCommentVNode("v-if", true)
], 2),
createElementVNode("div", {
ref: "suffixRef",
class: normalizeClass(_ctx.nsSelect.e("suffix"))
}, [
_ctx.iconComponent && !_ctx.showClearBtn ? (openBlock(), createBlock(_component_el_icon, {
key: 0,
class: normalizeClass([_ctx.nsSelect.e("caret"), _ctx.nsSelect.e("icon"), _ctx.iconReverse])
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.iconComponent)))
]),
_: 1
}, 8, ["class"])) : createCommentVNode("v-if", true),
_ctx.showClearBtn && _ctx.clearIcon ? (openBlock(), createBlock(_component_el_icon, {
key: 1,
class: normalizeClass([
_ctx.nsSelect.e("caret"),
_ctx.nsSelect.e("icon"),
_ctx.nsSelect.e("clear")
]),
onClick: _ctx.handleClearClick
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
]),
_: 1
}, 8, ["class", "onClick"])) : createCommentVNode("v-if", true),
_ctx.validateState && _ctx.validateIcon && _ctx.needStatusIcon ? (openBlock(), createBlock(_component_el_icon, {
key: 2,
class: normalizeClass([
_ctx.nsInput.e("icon"),
_ctx.nsInput.e("validateIcon"),
_ctx.nsInput.is("loading", _ctx.validateState === "validating")
])
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.validateIcon)))
]),
_: 1
}, 8, ["class"])) : createCommentVNode("v-if", true)
], 2)
], 10, ["onClick"])
];
}),
content: withCtx(() => [
createVNode(_component_el_select_menu, { ref: "menuRef" }, {
default: withCtx(() => [
_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(_ctx.nsSelect.be("dropdown", "header")),
onClick: withModifiers(() => {
}, ["stop"])
}, [
renderSlot(_ctx.$slots, "header")
], 10, ["onClick"])) : createCommentVNode("v-if", true),
withDirectives(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: normalizeClass([_ctx.nsSelect.is("empty", _ctx.filteredOptionsCount === 0)]),
role: "listbox",
"aria-label": _ctx.ariaLabel,
"aria-orientation": "vertical",
onScroll: _ctx.popupScroll
}, {
default: withCtx(() => [
_ctx.showNewOption ? (openBlock(), createBlock(_component_el_option, {
key: 0,
value: _ctx.states.inputValue,
created: true
}, null, 8, ["value"])) : createCommentVNode("v-if", true),
createVNode(_component_el_options, null, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default", {}, () => [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option, index) => {
var _a;
return openBlock(), createElementBlock(Fragment, { key: index }, [
((_a = _ctx.getOptions(option)) == null ? void 0 : _a.length) ? (openBlock(), createBlock(_component_el_option_group, {
key: 0,
label: _ctx.getLabel(option),
disabled: _ctx.getDisabled(option)
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.getOptions(option), (item) => {
return openBlock(), createBlock(_component_el_option, mergeProps({
key: _ctx.getValue(item)
}, _ctx.getOptionProps(item)), null, 16);
}), 128))
]),
_: 2
}, 1032, ["label", "disabled"])) : (openBlock(), createBlock(_component_el_option, normalizeProps(mergeProps({ key: 1 }, _ctx.getOptionProps(option))), null, 16))
], 64);
}), 128))
])
]),
_: 3
})
]),
_: 3
}, 8, ["id", "wrap-class", "view-class", "class", "aria-label", "onScroll"]), [
[vShow, _ctx.states.options.size > 0 && !_ctx.loading]
]),
_ctx.$slots.loading && _ctx.loading ? (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(_ctx.nsSelect.be("dropdown", "loading"))
}, [
renderSlot(_ctx.$slots, "loading")
], 2)) : _ctx.loading || _ctx.filteredOptionsCount === 0 ? (openBlock(), createElementBlock("div", {
key: 2,
class: normalizeClass(_ctx.nsSelect.be("dropdown", "empty"))
}, [
renderSlot(_ctx.$slots, "empty", {}, () => [
createElementVNode("span", null, toDisplayString(_ctx.emptyText), 1)
])
], 2)) : createCommentVNode("v-if", true),
_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
key: 3,
class: normalizeClass(_ctx.nsSelect.be("dropdown", "footer")),
onClick: withModifiers(() => {
}, ["stop"])
}, [
renderSlot(_ctx.$slots, "footer")
], 10, ["onClick"])) : 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", "onHide"])
], 16, ["onMouseleave"])), [
[_directive_click_outside, _ctx.handleClickOutside, _ctx.popperRef]
]);
}
var Select = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "select.vue"]]);
export { Select as default };
//# sourceMappingURL=select2.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,4 @@
import type { InjectionKey } from 'vue';
import type { SelectContext, SelectGroupContext } from './type';
export declare const selectGroupKey: InjectionKey<SelectGroupContext>;
export declare const selectKey: InjectionKey<SelectContext>;

View File

@@ -0,0 +1,5 @@
const selectGroupKey = Symbol("ElSelectGroup");
const selectKey = Symbol("ElSelect");
export { selectGroupKey, selectKey };
//# sourceMappingURL=token.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"token.mjs","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"],"names":[],"mappings":"AAAY,MAAC,cAAc,GAAG,MAAM,CAAC,eAAe,EAAE;AAC1C,MAAC,SAAS,GAAG,MAAM,CAAC,UAAU;;;;"}

View File

@@ -0,0 +1,65 @@
import type { ComponentInternalInstance, ComponentPublicInstance, ComputedRef, ExtractPropTypes, Ref, __ExtractPublicPropTypes } from 'vue';
import type { SelectProps } from './select';
import type { optionProps } from './option';
export interface SelectGroupContext {
disabled: boolean;
}
export 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;
}
export 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;
};
export type OptionProps = ExtractPropTypes<typeof optionProps>;
export type OptionPropsPublic = __ExtractPublicPropTypes<typeof optionProps>;
export interface OptionStates {
index: number;
groupDisabled: boolean;
visible: boolean;
hover: boolean;
}
export 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;
updateOption: (query: string) => void;
selectOptionClick: () => void;
}
export type OptionPublicInstance = ComponentPublicInstance<OptionProps, OptionExposed>;
export type OptionInternalInstance = ComponentInternalInstance & {
proxy: OptionPublicInstance;
};
export type OptionValue = OptionProps['value'];
export type OptionBasic = {
index: number;
value: OptionValue;
currentLabel: OptionPublicInstance['currentLabel'];
isDisabled?: OptionPublicInstance['isDisabled'];
};

View File

@@ -0,0 +1,2 @@
//# sourceMappingURL=type.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"type.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

View File

@@ -0,0 +1,10 @@
import type { OptionProps, OptionStates } from './type';
export declare function useOption(props: OptionProps, states: OptionStates): {
select: import("./type").SelectContext;
currentLabel: import("vue").ComputedRef<boolean | import("element-plus/es/utils").EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
currentValue: import("vue").ComputedRef<true | Record<string, any> | import("element-plus/es/utils").EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
itemSelected: import("vue").ComputedRef<boolean>;
isDisabled: import("vue").ComputedRef<boolean>;
hoverItem: () => void;
updateOption: (query: string) => void;
};

View File

@@ -0,0 +1,90 @@
import { inject, computed, getCurrentInstance, toRaw, watch } from 'vue';
import { castArray, get, isEqual } from 'lodash-unified';
import { selectKey, selectGroupKey } from './token.mjs';
import { COMPONENT_NAME } from './option.mjs';
import { escapeStringRegexp } from '../../../utils/strings.mjs';
import { throwError } from '../../../utils/error.mjs';
import { isObject } from '@vue/shared';
function useOption(props, states) {
const select = inject(selectKey);
if (!select) {
throwError(COMPONENT_NAME, "usage: <el-select><el-option /></el-select/>");
}
const selectGroup = inject(selectGroupKey, { disabled: false });
const itemSelected = computed(() => {
return contains(castArray(select.props.modelValue), props.value);
});
const limitReached = computed(() => {
var _a;
if (select.props.multiple) {
const modelValue = castArray((_a = select.props.modelValue) != null ? _a : []);
return !itemSelected.value && modelValue.length >= select.props.multipleLimit && select.props.multipleLimit > 0;
} else {
return false;
}
});
const currentLabel = computed(() => {
var _a;
return (_a = props.label) != null ? _a : isObject(props.value) ? "" : props.value;
});
const currentValue = computed(() => {
return props.value || props.label || "";
});
const isDisabled = computed(() => {
return props.disabled || states.groupDisabled || limitReached.value;
});
const instance = getCurrentInstance();
const contains = (arr = [], target) => {
if (!isObject(props.value)) {
return arr && arr.includes(target);
} else {
const valueKey = select.props.valueKey;
return arr && arr.some((item) => {
return toRaw(get(item, valueKey)) === get(target, valueKey);
});
}
};
const hoverItem = () => {
if (!props.disabled && !selectGroup.disabled) {
select.states.hoveringIndex = select.optionsArray.indexOf(instance.proxy);
}
};
const updateOption = (query) => {
const regexp = new RegExp(escapeStringRegexp(query), "i");
states.visible = regexp.test(String(currentLabel.value)) || props.created;
};
watch(() => currentLabel.value, () => {
if (!props.created && !select.props.remote)
select.setSelected();
});
watch(() => props.value, (val, oldVal) => {
const { remote, valueKey } = select.props;
const shouldUpdate = remote ? val !== oldVal : !isEqual(val, oldVal);
if (shouldUpdate) {
select.onOptionDestroy(oldVal, instance.proxy);
select.onOptionCreate(instance.proxy);
}
if (!props.created && !remote) {
if (valueKey && isObject(val) && isObject(oldVal) && val[valueKey] === oldVal[valueKey]) {
return;
}
select.setSelected();
}
});
watch(() => selectGroup.disabled, () => {
states.groupDisabled = selectGroup.disabled;
}, { immediate: true });
return {
select,
currentLabel,
currentValue,
itemSelected,
isDisabled,
hoverItem,
updateOption
};
}
export { useOption };
//# sourceMappingURL=useOption.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,157 @@
import type { Component } from 'vue';
import type { TooltipInstance } from 'element-plus/es/components/tooltip';
import type { ScrollbarInstance } from 'element-plus/es/components/scrollbar';
import type { SelectEmits, SelectProps } from './select';
import type { OptionBasic, OptionPublicInstance, OptionValue, SelectStates } from './type';
export declare const useSelect: (props: SelectProps, emit: SelectEmits) => {
inputId: import("vue").Ref<string | undefined>;
contentId: import("vue").Ref<string>;
nsSelect: {
namespace: import("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: import("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<OptionValue, OptionPublicInstance>;
cachedOptions: Map<OptionValue, OptionPublicInstance>;
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: import("vue").Ref<boolean>;
expanded: import("vue").Ref<boolean>;
optionsArray: import("vue").ComputedRef<OptionPublicInstance[]>;
hoverOption: import("vue").Ref<any>;
selectSize: import("vue").ComputedRef<"" | "small" | "default" | "large">;
filteredOptionsCount: import("vue").ComputedRef<number>;
updateTooltip: () => void;
updateTagTooltip: () => void;
debouncedOnInputChange: import("lodash").DebouncedFunc<() => 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: import("vue").ComputedRef<boolean>;
shouldShowPlaceholder: import("vue").ComputedRef<boolean>;
currentPlaceholder: import("vue").ComputedRef<string>;
mouseEnterEventName: import("vue").ComputedRef<"mouseenter" | null>;
needStatusIcon: import("vue").ComputedRef<boolean>;
showClearBtn: import("vue").ComputedRef<boolean>;
iconComponent: import("vue").ComputedRef<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | Component) & {}) | (() => string | Component) | ((new (...args: any[]) => (string | Component) & {}) | (() => string | Component))[], unknown, unknown> | undefined>;
iconReverse: import("vue").ComputedRef<string>;
validateState: import("vue").ComputedRef<"" | "error" | "success" | "validating">;
validateIcon: import("vue").ComputedRef<"" | Component>;
showNewOption: import("vue").ComputedRef<boolean>;
updateOptions: () => void;
collapseTagSize: import("vue").ComputedRef<"default" | "small">;
setSelected: () => void;
selectDisabled: import("vue").ComputedRef<boolean>;
emptyText: import("vue").ComputedRef<string | null>;
handleCompositionStart: (event: CompositionEvent) => void;
handleCompositionUpdate: (event: CompositionEvent) => void;
handleCompositionEnd: (event: CompositionEvent) => 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: () => void;
selectOption: () => void;
getValueKey: (item: OptionPublicInstance | SelectStates["selected"][0]) => any;
navigateOptions: (direction: "prev" | "next") => void;
dropdownMenuVisible: import("vue").WritableComputedRef<boolean>;
showTagList: import("vue").ComputedRef<{
index: number;
value: OptionValue;
currentLabel: OptionPublicInstance["currentLabel"];
isDisabled?: OptionPublicInstance["isDisabled"] | undefined;
}[]>;
collapseTagList: import("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: import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>;
currentLabel: any;
} | {
index: number;
value: import("element-plus/es/utils").EpPropMergeType<(ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>;
currentLabel: string | number | boolean;
readonly isDisabled: boolean;
};
tagStyle: import("vue").ComputedRef<{
maxWidth: string;
}>;
collapseTagStyle: import("vue").ComputedRef<{
maxWidth: string;
}>;
popperRef: import("vue").ComputedRef<HTMLElement | undefined>;
inputRef: import("vue").Ref<HTMLInputElement | undefined>;
tooltipRef: import("vue").Ref<TooltipInstance | undefined>;
tagTooltipRef: import("vue").Ref<TooltipInstance | undefined>;
prefixRef: import("vue").Ref<HTMLElement | undefined>;
suffixRef: import("vue").Ref<HTMLElement | undefined>;
selectRef: import("vue").Ref<HTMLElement | undefined>;
wrapperRef: import("vue").ShallowRef<HTMLElement | undefined>;
selectionRef: import("vue").Ref<HTMLElement | undefined>;
scrollbarRef: import("vue").Ref<ScrollbarInstance | undefined>;
menuRef: import("vue").Ref<HTMLElement | undefined>;
tagMenuRef: import("vue").Ref<HTMLElement | undefined>;
collapseItemRef: import("vue").Ref<HTMLElement | undefined>;
};

View File

@@ -0,0 +1,663 @@
import { reactive, ref, computed, watch, watchEffect, nextTick, onMounted } from 'vue';
import { castArray, isEqual, get, debounce, findLastIndex } from 'lodash-unified';
import { isIOS, isClient, useResizeObserver } from '@vueuse/core';
import { useLocale } from '../../../hooks/use-locale/index.mjs';
import { useId } from '../../../hooks/use-id/index.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useFormItem, useFormItemInputId } from '../../form/src/hooks/use-form-item.mjs';
import { useEmptyValues } from '../../../hooks/use-empty-values/index.mjs';
import { useComposition } from '../../../hooks/use-composition/index.mjs';
import { useFocusController } from '../../../hooks/use-focus-controller/index.mjs';
import { debugWarn } from '../../../utils/error.mjs';
import { isArray, isFunction, isPlainObject, isObject } from '@vue/shared';
import { ValidateComponentsMap } from '../../../utils/vue/icon.mjs';
import { useFormSize } from '../../form/src/hooks/use-form-common-props.mjs';
import { isUndefined, isNumber } from '../../../utils/types.mjs';
import { EVENT_CODE } from '../../../constants/aria.mjs';
import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../../../constants/event.mjs';
import { scrollIntoView } from '../../../utils/dom/scroll.mjs';
import { MINIMUM_INPUT_WIDTH } from '../../../constants/form.mjs';
const useSelect = (props, emit) => {
const { t } = useLocale();
const contentId = useId();
const nsSelect = useNamespace("select");
const nsInput = useNamespace("input");
const states = 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 = ref();
const selectionRef = ref();
const tooltipRef = ref();
const tagTooltipRef = ref();
const inputRef = ref();
const prefixRef = ref();
const suffixRef = ref();
const menuRef = ref();
const tagMenuRef = ref();
const collapseItemRef = ref();
const scrollbarRef = ref();
const expanded = ref(false);
const hoverOption = ref();
const { form, formItem } = useFormItem();
const { inputId } = useFormItemInputId(props, {
formItemContext: formItem
});
const { valueOnClear, isEmptyValue } = useEmptyValues(props);
const {
isComposing,
handleCompositionStart,
handleCompositionUpdate,
handleCompositionEnd
} = useComposition({
afterComposition: (e) => onInput(e)
});
const selectDisabled = computed(() => props.disabled || !!(form == null ? void 0 : form.disabled));
const { wrapperRef, isFocused, handleBlur } = useFocusController(inputRef, {
disabled: selectDisabled,
afterFocus() {
if (props.automaticDropdown && !expanded.value) {
expanded.value = true;
states.menuVisibleOnFocus = true;
}
},
beforeBlur(event) {
var _a, _b;
return ((_a = tooltipRef.value) == null ? void 0 : _a.isFocusInsideContent(event)) || ((_b = tagTooltipRef.value) == null ? void 0 : _b.isFocusInsideContent(event));
},
afterBlur() {
var _a;
expanded.value = false;
states.menuVisibleOnFocus = false;
if (props.validateEvent) {
(_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => debugWarn());
}
}
});
const hasModelValue = computed(() => {
return isArray(props.modelValue) ? props.modelValue.length > 0 : !isEmptyValue(props.modelValue);
});
const needStatusIcon = computed(() => {
var _a;
return (_a = form == null ? void 0 : form.statusIcon) != null ? _a : false;
});
const showClearBtn = computed(() => {
return props.clearable && !selectDisabled.value && hasModelValue.value && (isFocused.value || states.inputHovering);
});
const iconComponent = computed(() => props.remote && props.filterable && !props.remoteShowSuffix ? "" : props.suffixIcon);
const iconReverse = computed(() => nsSelect.is("reverse", !!(iconComponent.value && expanded.value)));
const validateState = computed(() => (formItem == null ? void 0 : formItem.validateState) || "");
const validateIcon = computed(() => validateState.value && ValidateComponentsMap[validateState.value]);
const debounce$1 = computed(() => props.remote ? 300 : 0);
const isRemoteSearchEmpty = computed(() => props.remote && !states.inputValue && states.options.size === 0);
const emptyText = 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 = computed(() => optionsArray.value.filter((option) => option.visible).length);
const optionsArray = 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 = computed(() => Array.from(states.cachedOptions.values()));
const showNewOption = 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 && isFunction(props.filterMethod))
return;
if (props.filterable && props.remote && isFunction(props.remoteMethod))
return;
optionsArray.value.forEach((option) => {
var _a;
(_a = option.updateOption) == null ? void 0 : _a.call(option, states.inputValue);
});
};
const selectSize = useFormSize();
const collapseTagSize = computed(() => ["small"].includes(selectSize.value) ? "small" : "default");
const dropdownMenuVisible = computed({
get() {
return expanded.value && !isRemoteSearchEmpty.value;
},
set(val) {
expanded.value = val;
}
});
const shouldShowPlaceholder = computed(() => {
if (props.multiple && !isUndefined(props.modelValue)) {
return castArray(props.modelValue).length === 0 && !states.inputValue;
}
const value = isArray(props.modelValue) ? props.modelValue[0] : props.modelValue;
return props.filterable || isUndefined(value) ? !states.inputValue : true;
});
const currentPlaceholder = computed(() => {
var _a;
const _placeholder = (_a = props.placeholder) != null ? _a : t("el.select.placeholder");
return props.multiple || !hasModelValue.value ? _placeholder : states.selectedLabel;
});
const mouseEnterEventName = computed(() => isIOS ? null : "mouseenter");
watch(() => props.modelValue, (val, oldVal) => {
if (props.multiple) {
if (props.filterable && !props.reserveKeyword) {
states.inputValue = "";
handleQueryChange("");
}
}
setSelected();
if (!isEqual(val, oldVal) && props.validateEvent) {
formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn());
}
}, {
flush: "post",
deep: true
});
watch(() => expanded.value, (val) => {
if (val) {
handleQueryChange(states.inputValue);
} else {
states.inputValue = "";
states.previousQuery = null;
states.isBeforeHide = true;
}
emit("visible-change", val);
});
watch(() => states.options.entries(), () => {
if (!isClient)
return;
setSelected();
if (props.defaultFirstOption && (props.filterable || props.remote) && filteredOptionsCount.value) {
checkDefaultFirstOption();
}
}, {
flush: "post"
});
watch([() => states.hoveringIndex, optionsArray], ([val]) => {
if (isNumber(val) && val > -1) {
hoverOption.value = optionsArray.value[val] || {};
} else {
hoverOption.value = {};
}
optionsArray.value.forEach((option) => {
option.hover = hoverOption.value === option;
});
});
watchEffect(() => {
if (states.isBeforeHide)
return;
updateOptions();
});
const handleQueryChange = (val) => {
if (states.previousQuery === val || isComposing.value) {
return;
}
states.previousQuery = val;
if (props.filterable && isFunction(props.filterMethod)) {
props.filterMethod(val);
} else if (props.filterable && props.remote && isFunction(props.remoteMethod)) {
props.remoteMethod(val);
}
if (props.defaultFirstOption && (props.filterable || props.remote) && filteredOptionsCount.value) {
nextTick(checkDefaultFirstOption);
} else {
nextTick(updateHoveringIndex);
}
};
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];
const valueList = optionsArray.value.map((item) => item.value);
states.hoveringIndex = getValueIndex(valueList, userCreatedOption || firstOriginOption);
};
const setSelected = () => {
if (!props.multiple) {
const value = isArray(props.modelValue) ? props.modelValue[0] : props.modelValue;
const option = getOption(value);
states.selectedLabel = option.currentLabel;
states.selected = [option];
return;
} else {
states.selectedLabel = "";
}
const result = [];
if (!isUndefined(props.modelValue)) {
castArray(props.modelValue).forEach((value) => {
result.push(getOption(value));
});
}
states.selected = result;
};
const getOption = (value) => {
let option;
const isObjectValue = isPlainObject(value);
for (let i = states.cachedOptions.size - 1; i >= 0; i--) {
const cachedOption = cachedOptionsArray.value[i];
const isEqualValue = isObjectValue ? get(cachedOption.value, props.valueKey) === get(value, props.valueKey) : cachedOption.value === value;
if (isEqualValue) {
option = {
index: optionsArray.value.filter((opt) => !opt.created).indexOf(cachedOption),
value,
currentLabel: cachedOption.currentLabel,
get isDisabled() {
return cachedOption.isDisabled;
}
};
break;
}
}
if (option)
return option;
const label = isObjectValue ? value.label : value != null ? value : "";
const newOption = {
index: -1,
value,
currentLabel: label
};
return newOption;
};
const updateHoveringIndex = () => {
states.hoveringIndex = optionsArray.value.findIndex((item) => states.selected.some((selected) => getValueKey(selected) === getValueKey(item)));
};
const resetSelectionWidth = () => {
states.selectionWidth = Number.parseFloat(window.getComputedStyle(selectionRef.value).width);
};
const resetCollapseItemWidth = () => {
states.collapseItemWidth = collapseItemRef.value.getBoundingClientRect().width;
};
const updateTooltip = () => {
var _a, _b;
(_b = (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
};
const updateTagTooltip = () => {
var _a, _b;
(_b = (_a = tagTooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
};
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) {
debouncedOnInputChange();
} else {
return onInputChange();
}
};
const debouncedOnInputChange = debounce(() => {
onInputChange();
}, debounce$1.value);
const emitChange = (val) => {
if (!isEqual(props.modelValue, val)) {
emit(CHANGE_EVENT, val);
}
};
const getLastNotDisabledIndex = (value) => findLastIndex(value, (it) => {
const option = states.cachedOptions.get(it);
return option && !option.disabled && !option.states.groupDisabled;
});
const deletePrevTag = (e) => {
if (!props.multiple)
return;
if (e.code === EVENT_CODE.delete)
return;
if (e.target.value.length <= 0) {
const value = castArray(props.modelValue).slice();
const lastNotDisabledIndex = getLastNotDisabledIndex(value);
if (lastNotDisabledIndex < 0)
return;
const removeTagValue = value[lastNotDisabledIndex];
value.splice(lastNotDisabledIndex, 1);
emit(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 = castArray(props.modelValue).slice();
value.splice(index, 1);
emit(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(UPDATE_MODEL_EVENT, value);
emitChange(value);
states.hoveringIndex = -1;
expanded.value = false;
emit("clear");
focus();
};
const handleOptionSelect = (option) => {
var _a;
if (props.multiple) {
const value = castArray((_a = props.modelValue) != null ? _a : []).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(UPDATE_MODEL_EVENT, value);
emitChange(value);
if (option.created) {
handleQueryChange("");
}
if (props.filterable && !props.reserveKeyword) {
states.inputValue = "";
}
} else {
!isEqual(props.modelValue, option.value) && emit(UPDATE_MODEL_EVENT, option.value);
emitChange(option.value);
expanded.value = false;
}
focus();
if (expanded.value)
return;
nextTick(() => {
scrollToOption(option);
});
};
const getValueIndex = (arr, option) => {
if (isUndefined(option))
return -1;
if (!isObject(option.value))
return arr.indexOf(option.value);
return arr.findIndex((item) => {
return isEqual(get(item, props.valueKey), getValueKey(option));
});
};
const scrollToOption = (option) => {
var _a, _b, _c, _d, _e;
const targetOption = isArray(option) ? option[0] : option;
let target = null;
if (targetOption == null ? void 0 : 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 = (_d = (_c = (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef) == null ? void 0 : _c.querySelector) == null ? void 0 : _d.call(_c, `.${nsSelect.be("dropdown", "wrap")}`);
if (menu) {
scrollIntoView(menu, target);
}
}
(_e = scrollbarRef.value) == null ? void 0 : _e.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 = computed(() => {
var _a, _b;
return (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
});
const handleMenuEnter = () => {
states.isBeforeHide = false;
nextTick(() => {
var _a;
(_a = scrollbarRef.value) == null ? void 0 : _a.update();
scrollToOption(states.selected);
});
};
const focus = () => {
var _a;
(_a = inputRef.value) == null ? void 0 : _a.focus();
};
const blur = () => {
var _a;
if (expanded.value) {
expanded.value = false;
nextTick(() => {
var _a2;
return (_a2 = inputRef.value) == null ? void 0 : _a2.blur();
});
return;
}
(_a = inputRef.value) == null ? void 0 : _a.blur();
};
const handleClearClick = (event) => {
deleteSelected(event);
};
const handleClickOutside = (event) => {
expanded.value = false;
if (isFocused.value) {
const _event = new FocusEvent("blur", event);
nextTick(() => handleBlur(_event));
}
};
const handleEsc = () => {
if (states.inputValue.length > 0) {
states.inputValue = "";
} else {
expanded.value = false;
}
};
const toggleMenu = () => {
if (selectDisabled.value)
return;
if (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 isObject(item.value) ? get(item.value, props.valueKey) : item.value;
};
const optionsAllDisabled = computed(() => optionsArray.value.filter((option) => option.visible).every((option) => option.isDisabled));
const showTagList = computed(() => {
if (!props.multiple) {
return [];
}
return props.collapseTags ? states.selected.slice(0, props.maxCollapseTags) : states.selected;
});
const collapseTagList = 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);
}
nextTick(() => scrollToOption(hoverOption.value));
}
};
const getGapWidth = () => {
if (!selectionRef.value)
return 0;
const style = window.getComputedStyle(selectionRef.value);
return Number.parseFloat(style.gap || "6px");
};
const tagStyle = computed(() => {
const gapWidth = getGapWidth();
const inputSlotWidth = props.filterable ? gapWidth + MINIMUM_INPUT_WIDTH : 0;
const maxWidth = collapseItemRef.value && props.maxCollapseTags === 1 ? states.selectionWidth - states.collapseItemWidth - gapWidth - inputSlotWidth : states.selectionWidth - inputSlotWidth;
return { maxWidth: `${maxWidth}px` };
});
const collapseTagStyle = computed(() => {
return { maxWidth: `${states.selectionWidth}px` };
});
const popupScroll = (data) => {
emit("popup-scroll", data);
};
useResizeObserver(selectionRef, resetSelectionWidth);
useResizeObserver(wrapperRef, updateTooltip);
useResizeObserver(tagMenuRef, updateTagTooltip);
useResizeObserver(collapseItemRef, resetCollapseItemWidth);
let stop;
watch(() => dropdownMenuVisible.value, (newVal) => {
if (newVal) {
stop = useResizeObserver(menuRef, updateTooltip).stop;
} else {
stop == null ? void 0 : stop();
stop = void 0;
}
});
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,
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
};
};
export { useSelect };
//# sourceMappingURL=useSelect.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,7 @@
import 'element-plus/es/components/base/style/css';
import 'element-plus/es/components/tag/style/css';
import 'element-plus/es/components/option/style/css';
import 'element-plus/es/components/option-group/style/css';
import 'element-plus/es/components/scrollbar/style/css';
import 'element-plus/es/components/popper/style/css';
import 'element-plus/theme-chalk/el-select.css';

View File

@@ -0,0 +1,8 @@
import '../../base/style/css.mjs';
import '../../tag/style/css.mjs';
import '../../option/style/css.mjs';
import '../../option-group/style/css.mjs';
import '../../scrollbar/style/css.mjs';
import '../../popper/style/css.mjs';
import 'element-plus/theme-chalk/el-select.css';
//# sourceMappingURL=css.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

View File

@@ -0,0 +1,7 @@
import 'element-plus/es/components/base/style';
import 'element-plus/es/components/tag/style';
import 'element-plus/es/components/option/style';
import 'element-plus/es/components/option-group/style';
import 'element-plus/es/components/scrollbar/style';
import 'element-plus/es/components/popper/style';
import 'element-plus/theme-chalk/src/select.scss';

View File

@@ -0,0 +1,8 @@
import '../../base/style/index.mjs';
import '../../tag/style/index.mjs';
import '../../option/style/index.mjs';
import '../../option-group/style/index.mjs';
import '../../scrollbar/style/index.mjs';
import '../../popper/style/index.mjs';
import 'element-plus/theme-chalk/src/select.scss';
//# sourceMappingURL=index.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}