feat: initial commit - Phase 1 & 2 core features

This commit is contained in:
hiderfong
2026-04-22 17:07:33 +08:00
commit 1773bda06b
25005 changed files with 6252106 additions and 0 deletions
@@ -0,0 +1,9 @@
import { SFCWithInstall } from "../../utils/vue/typescript.js";
import "../../utils/index.js";
import { _default } from "./src/tree-select.vue.js";
import { TreeSelectInstance } from "./src/instance.js";
//#region ../../packages/components/tree-select/index.d.ts
declare const ElTreeSelect: SFCWithInstall<typeof _default>;
//#endregion
export { ElTreeSelect, ElTreeSelect as default, type TreeSelectInstance };
@@ -0,0 +1,9 @@
import { withInstall } from "../../utils/vue/install.mjs";
import tree_select_default from "./src/tree-select.mjs";
//#region ../../packages/components/tree-select/index.ts
const ElTreeSelect = withInstall(tree_select_default);
//#endregion
export { ElTreeSelect, ElTreeSelect as default };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":["TreeSelect"],"sources":["../../../../../packages/components/tree-select/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils'\nimport TreeSelect from './src/tree-select.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElTreeSelect: SFCWithInstall<typeof TreeSelect> =\n withInstall(TreeSelect)\n\nexport default ElTreeSelect\n\nexport type { TreeSelectInstance } from './src/instance'\n"],"mappings":";;;;AAKA,MAAa,eACX,YAAYA,oBAAW"}
@@ -0,0 +1,29 @@
import { isClient } from "../../../utils/browser.mjs";
import { selectKey } from "../../select/src/token.mjs";
import { defineComponent, inject, watch } from "vue";
//#region ../../packages/components/tree-select/src/cache-options.ts
var cache_options_default = defineComponent({
props: { data: {
type: Array,
default: () => []
} },
setup(props) {
const select = inject(selectKey);
watch(() => props.data, () => {
props.data.forEach((item) => {
if (!select.states.cachedOptions.has(item.value)) select.states.cachedOptions.set(item.value, item);
});
const inputs = select.selectRef?.querySelectorAll("input") || [];
if (isClient && !Array.from(inputs).includes(document.activeElement)) select.setSelected();
}, {
flush: "post",
immediate: true
});
return () => void 0;
}
});
//#endregion
export { cache_options_default as default };
//# sourceMappingURL=cache-options.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"cache-options.mjs","names":[],"sources":["../../../../../../packages/components/tree-select/src/cache-options.ts"],"sourcesContent":["import { defineComponent, inject, watch } from 'vue'\nimport { selectKey } from '@element-plus/components/select'\nimport { isClient } from '@element-plus/utils'\n\nimport type { SelectContext } from '@element-plus/components/select'\nimport type { PropType } from 'vue'\n\n// same as el-option instance,\n// these are required for `cachedOptions`\nexport type CacheOption = {\n value: string | number | boolean | object\n currentLabel: string | number\n isDisabled: boolean\n}\n\nexport default defineComponent({\n props: {\n data: {\n type: Array as PropType<CacheOption[]>,\n default: () => [],\n },\n },\n setup(props) {\n const select = inject(selectKey) as NonNullable<SelectContext>\n\n watch(\n () => props.data,\n () => {\n props.data.forEach((item) => {\n if (!select.states.cachedOptions.has(item.value)) {\n // TODO: the type of 'item' is not compatible with the type of 'cachedOptions',\n // which may indicate potential runtime issues.\n // @ts-expect-error\n select.states.cachedOptions.set(item.value, item)\n }\n })\n\n // fork from packages/select/src/useSelect.ts#330\n const inputs = select.selectRef?.querySelectorAll('input') || []\n if (\n isClient &&\n !Array.from(inputs).includes(\n document.activeElement as HTMLInputElement\n )\n ) {\n select.setSelected()\n }\n },\n { flush: 'post', immediate: true }\n )\n\n return () => undefined\n },\n})\n"],"mappings":";;;;;AAeA,4BAAe,gBAAgB;CAC7B,OAAO,EACL,MAAM;EACJ,MAAM;EACN,eAAe,EAAE;EAClB,EACF;CACD,MAAM,OAAO;EACX,MAAM,SAAS,OAAO,UAAU;AAEhC,cACQ,MAAM,YACN;AACJ,SAAM,KAAK,SAAS,SAAS;AAC3B,QAAI,CAAC,OAAO,OAAO,cAAc,IAAI,KAAK,MAAM,CAI9C,QAAO,OAAO,cAAc,IAAI,KAAK,OAAO,KAAK;KAEnD;GAGF,MAAM,SAAS,OAAO,WAAW,iBAAiB,QAAQ,IAAI,EAAE;AAChE,OACE,YACA,CAAC,MAAM,KAAK,OAAO,CAAC,SAClB,SAAS,cACV,CAED,QAAO,aAAa;KAGxB;GAAE,OAAO;GAAQ,WAAW;GAAM,CACnC;AAED,eAAa;;CAEhB,CAAC"}
@@ -0,0 +1,12 @@
import { SelectInstance } from "../../select/src/select.js";
import "../../select/index.js";
import { TreeInstance } from "../../tree/src/instance.js";
import "../../tree/index.js";
//#region ../../packages/components/tree-select/src/instance.d.ts
type TreeSelectInstance = {
treeRef: TreeInstance;
selectRef: SelectInstance;
};
//#endregion
export { TreeSelectInstance };
@@ -0,0 +1,65 @@
import { EVENT_CODE } from "../../../constants/aria.mjs";
import { UPDATE_MODEL_EVENT } from "../../../constants/event.mjs";
import { getEventCode } from "../../../utils/dom/event.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { ElSelect } from "../../select/index.mjs";
import { useEventListener } from "@vueuse/core";
import { pick } from "lodash-unified";
import { computed, nextTick, onMounted, toRefs, watch } from "vue";
//#region ../../packages/components/tree-select/src/select.ts
const useSelect = (props, { attrs, emit }, { select, tree, key }) => {
const ns = useNamespace("tree-select");
watch(() => props.data, () => {
if (props.filterable) nextTick(() => {
tree.value?.filter(select.value?.states.inputValue);
});
}, { flush: "post" });
const focusLastNode = (listNode) => {
const lastNode = listNode.at(-1);
if (lastNode.expanded && lastNode.childNodes.at(-1)) focusLastNode([lastNode.childNodes.at(-1)]);
else {
(tree.value.el$?.querySelector(`[data-key="${listNode.at(-1).key}"]`))?.focus({ preventScroll: true });
return;
}
};
onMounted(() => {
useEventListener(() => select.value?.$el, "keydown", async (evt) => {
const code = getEventCode(evt);
const { dropdownMenuVisible } = select.value;
if ([EVENT_CODE.down, EVENT_CODE.up].includes(code) && dropdownMenuVisible) {
await nextTick();
setTimeout(() => {
if (EVENT_CODE.up === code) {
const listNode = tree.value.store.root.childNodes;
focusLastNode(listNode);
return;
}
select.value.optionsArray[select.value.states.hoveringIndex].$el?.parentNode?.parentNode?.focus({ preventScroll: true });
});
}
}, { capture: true });
});
return {
...pick(toRefs(props), Object.keys(ElSelect.props)),
...attrs,
class: computed(() => attrs.class),
style: computed(() => attrs.style),
"onUpdate:modelValue": (value) => emit(UPDATE_MODEL_EVENT, value),
valueKey: key,
popperClass: computed(() => {
const classes = [ns.e("popper")];
if (props.popperClass) classes.push(props.popperClass);
return classes.join(" ");
}),
filterMethod: (keyword = "") => {
if (props.filterMethod) props.filterMethod(keyword);
else if (props.remoteMethod) props.remoteMethod(keyword);
else tree.value?.filter(keyword);
}
};
};
//#endregion
export { useSelect };
//# sourceMappingURL=select.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"select.mjs","names":[],"sources":["../../../../../../packages/components/tree-select/src/select.ts"],"sourcesContent":["// @ts-nocheck\nimport { computed, nextTick, onMounted, toRefs, watch } from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { pick } from 'lodash-unified'\nimport ElSelect from '@element-plus/components/select'\nimport { useNamespace } from '@element-plus/hooks'\nimport { EVENT_CODE, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { getEventCode } from '@element-plus/utils'\n\nimport type { Ref } from 'vue'\nimport type { SelectInstance } from '@element-plus/components/select'\nimport type { TreeInstance } from '@element-plus/components/tree'\n\nexport const useSelect = (\n props,\n { attrs, emit },\n {\n select,\n tree,\n key,\n }: {\n select: Ref<SelectInstance | undefined>\n tree: Ref<TreeInstance | undefined>\n key: Ref<string>\n }\n) => {\n const ns = useNamespace('tree-select')\n\n // update tree data when use filterMethod/remoteMethod\n watch(\n () => props.data,\n () => {\n if (props.filterable) {\n nextTick(() => {\n // let tree node expand only, same with tree filter\n tree.value?.filter(select.value?.states.inputValue)\n })\n }\n },\n { flush: 'post' }\n )\n\n const focusLastNode = (listNode) => {\n const lastNode = listNode.at(-1)\n if (lastNode.expanded && lastNode.childNodes.at(-1)) {\n focusLastNode([lastNode.childNodes.at(-1)])\n } else {\n const el = tree.value.el$?.querySelector(\n `[data-key=\"${listNode.at(-1).key}\"]`\n )\n el?.focus({ preventScroll: true })\n return\n }\n }\n\n onMounted(() => {\n useEventListener(\n () => select.value?.$el,\n 'keydown',\n async (evt) => {\n const code = getEventCode(evt)\n const { dropdownMenuVisible } = select.value!\n if (\n [EVENT_CODE.down, EVENT_CODE.up].includes(code) &&\n dropdownMenuVisible\n ) {\n await nextTick()\n // wait navigateOption to finish\n setTimeout(() => {\n if (EVENT_CODE.up === code) {\n const listNode = tree.value.store.root.childNodes\n focusLastNode(listNode)\n return\n }\n // el-select-dropdown__item => el-tree-node__content => el-tree-node__content\n select.value.optionsArray[\n select.value.states.hoveringIndex\n ].$el?.parentNode?.parentNode?.focus({ preventScroll: true })\n })\n }\n },\n {\n capture: true,\n }\n )\n })\n\n const result = {\n ...pick(toRefs(props), Object.keys(ElSelect.props)),\n ...attrs,\n class: computed(() => attrs.class),\n style: computed(() => attrs.style),\n // attrs is not reactive, when v-model binding source changes,\n // this listener is still old, see the bug(or test 'v-model source change'):\n // https://github.com/element-plus/element-plus/issues/14204\n 'onUpdate:modelValue': (value) => emit(UPDATE_MODEL_EVENT, value),\n valueKey: key,\n popperClass: computed(() => {\n const classes = [ns.e('popper')]\n if (props.popperClass) classes.push(props.popperClass)\n return classes.join(' ')\n }),\n filterMethod: (keyword = '') => {\n if (props.filterMethod) {\n props.filterMethod(keyword)\n } else if (props.remoteMethod) {\n props.remoteMethod(keyword)\n } else {\n // let tree node expand only, same with tree filter\n tree.value?.filter(keyword)\n }\n },\n }\n\n return result\n}\n"],"mappings":";;;;;;;;;;AAaA,MAAa,aACX,OACA,EAAE,OAAO,QACT,EACE,QACA,MACA,UAMC;CACH,MAAM,KAAK,aAAa,cAAc;AAGtC,aACQ,MAAM,YACN;AACJ,MAAI,MAAM,WACR,gBAAe;AAEb,QAAK,OAAO,OAAO,OAAO,OAAO,OAAO,WAAW;IACnD;IAGN,EAAE,OAAO,QAAQ,CAClB;CAED,MAAM,iBAAiB,aAAa;EAClC,MAAM,WAAW,SAAS,GAAG,GAAG;AAChC,MAAI,SAAS,YAAY,SAAS,WAAW,GAAG,GAAG,CACjD,eAAc,CAAC,SAAS,WAAW,GAAG,GAAG,CAAC,CAAC;OACtC;AAIL,IAHW,KAAK,MAAM,KAAK,cACzB,cAAc,SAAS,GAAG,GAAG,CAAC,IAAI,IACnC,GACG,MAAM,EAAE,eAAe,MAAM,CAAC;AAClC;;;AAIJ,iBAAgB;AACd,yBACQ,OAAO,OAAO,KACpB,WACA,OAAO,QAAQ;GACb,MAAM,OAAO,aAAa,IAAI;GAC9B,MAAM,EAAE,wBAAwB,OAAO;AACvC,OACE,CAAC,WAAW,MAAM,WAAW,GAAG,CAAC,SAAS,KAAK,IAC/C,qBACA;AACA,UAAM,UAAU;AAEhB,qBAAiB;AACf,SAAI,WAAW,OAAO,MAAM;MAC1B,MAAM,WAAW,KAAK,MAAM,MAAM,KAAK;AACvC,oBAAc,SAAS;AACvB;;AAGF,YAAO,MAAM,aACX,OAAO,MAAM,OAAO,eACpB,KAAK,YAAY,YAAY,MAAM,EAAE,eAAe,MAAM,CAAC;MAC7D;;KAGN,EACE,SAAS,MACV,CACF;GACD;AA6BF,QA3Be;EACb,GAAG,KAAK,OAAO,MAAM,EAAE,OAAO,KAAK,SAAS,MAAM,CAAC;EACnD,GAAG;EACH,OAAO,eAAe,MAAM,MAAM;EAClC,OAAO,eAAe,MAAM,MAAM;EAIlC,wBAAwB,UAAU,KAAK,oBAAoB,MAAM;EACjE,UAAU;EACV,aAAa,eAAe;GAC1B,MAAM,UAAU,CAAC,GAAG,EAAE,SAAS,CAAC;AAChC,OAAI,MAAM,YAAa,SAAQ,KAAK,MAAM,YAAY;AACtD,UAAO,QAAQ,KAAK,IAAI;IACxB;EACF,eAAe,UAAU,OAAO;AAC9B,OAAI,MAAM,aACR,OAAM,aAAa,QAAQ;YAClB,MAAM,aACf,OAAM,aAAa,QAAQ;OAG3B,MAAK,OAAO,OAAO,QAAQ;;EAGhC"}
@@ -0,0 +1,28 @@
import { ElOption } from "../../select/index.mjs";
import { defineComponent, getCurrentInstance, nextTick, watch } from "vue";
//#region ../../packages/components/tree-select/src/tree-select-option.ts
const component = defineComponent({
extends: ElOption,
setup(props, ctx) {
const result = ElOption.setup(props, ctx);
delete result.selectOptionClick;
const vm = getCurrentInstance().proxy;
nextTick(() => {
if (!result.select.states.cachedOptions.get(vm.value)) result.select.onOptionCreate(vm);
});
watch(() => ctx.attrs.visible, (val) => {
nextTick(() => {
result.states.visible = val;
});
}, { immediate: true });
return result;
},
methods: { selectOptionClick() {
this.$el.parentElement.click();
} }
});
//#endregion
export { component as default };
//# sourceMappingURL=tree-select-option.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"tree-select-option.mjs","names":[],"sources":["../../../../../../packages/components/tree-select/src/tree-select-option.ts"],"sourcesContent":["import { defineComponent, getCurrentInstance, nextTick, watch } from 'vue'\nimport { ElOption } from '@element-plus/components/select'\n\nconst component = defineComponent({\n extends: ElOption,\n setup(props, ctx) {\n const result = (ElOption.setup as NonNullable<any>)(props, ctx)\n\n // use methods.selectOptionClick\n delete result.selectOptionClick\n\n const vm = (getCurrentInstance() as NonNullable<any>).proxy\n\n // Fix: https://github.com/element-plus/element-plus/issues/7917\n // `el-option` will delete the cache before unmount,\n // This is normal for flat arrays `<el-select><el-option v-for=\"3\"></el-select>`,\n // Because the same node key does not create a difference node,\n // But in tree data, the same key at different levels will create diff nodes,\n // So the destruction of `el-option` in `nextTick` will be slower than\n // the creation of new `el-option`, which will delete the new node,\n // here restore the deleted node.\n // @link https://github.com/element-plus/element-plus/blob/6df6e49db07b38d6cc3b5e9a960782bd30879c11/packages/components/select/src/option.vue#L78\n nextTick(() => {\n if (!result.select.states.cachedOptions.get(vm.value)) {\n result.select.onOptionCreate(vm)\n }\n })\n\n watch(\n () => ctx.attrs.visible,\n (val) => {\n nextTick(() => {\n result.states.visible = val\n })\n },\n {\n immediate: true,\n }\n )\n\n return result\n },\n methods: {\n selectOptionClick() {\n // $el.parentElement => el-tree-node__content\n this.$el.parentElement.click()\n },\n },\n})\n\nexport default component\n"],"mappings":";;;;AAGA,MAAM,YAAY,gBAAgB;CAChC,SAAS;CACT,MAAM,OAAO,KAAK;EAChB,MAAM,SAAU,SAAS,MAA2B,OAAO,IAAI;AAG/D,SAAO,OAAO;EAEd,MAAM,KAAM,oBAAoB,CAAsB;AAWtD,iBAAe;AACb,OAAI,CAAC,OAAO,OAAO,OAAO,cAAc,IAAI,GAAG,MAAM,CACnD,QAAO,OAAO,eAAe,GAAG;IAElC;AAEF,cACQ,IAAI,MAAM,UACf,QAAQ;AACP,kBAAe;AACb,WAAO,OAAO,UAAU;KACxB;KAEJ,EACE,WAAW,MACZ,CACF;AAED,SAAO;;CAET,SAAS,EACP,oBAAoB;AAElB,OAAK,IAAI,cAAc,OAAO;IAEjC;CACF,CAAC"}
@@ -0,0 +1,8 @@
import tree_select_vue_vue_type_script_lang_default from "./tree-select.vue_vue_type_script_lang.mjs";
//#region ../../packages/components/tree-select/src/tree-select.vue
var tree_select_default = tree_select_vue_vue_type_script_lang_default;
//#endregion
export { tree_select_default as default };
//# sourceMappingURL=tree-select.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"tree-select.mjs","names":[],"sources":["../../../../../../packages/components/tree-select/src/tree-select.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { computed, defineComponent, h, onMounted, reactive, ref } from 'vue'\nimport { pick } from 'lodash-unified'\nimport { ElSelect, selectProps } from '@element-plus/components/select'\nimport { ElTree, treeProps } from '@element-plus/components/tree'\nimport { useSelect } from './select'\nimport { useTree } from './tree'\nimport CacheOptions from './cache-options'\n\nimport type { TreeInstance } from '@element-plus/components/tree'\nimport type { SelectInstance } from '@element-plus/components/select'\n\nexport default defineComponent({\n name: 'ElTreeSelect',\n // disable `ElSelect` inherit current attrs\n inheritAttrs: false,\n props: {\n ...selectProps,\n ...treeProps,\n /**\n * @description The cached data of the lazy node, the structure is the same as the data, used to get the label of the unloaded data\n */\n cacheData: {\n type: Array,\n default: () => [],\n },\n },\n setup(props, context) {\n const { slots, expose, emit, attrs } = context\n const childAttrs = {\n ...attrs,\n onChange: undefined,\n }\n\n const select = ref<SelectInstance>()\n const tree = ref<TreeInstance>()\n\n const key = computed(() => props.nodeKey || props.valueKey || 'value')\n\n const selectProps = useSelect(props, { attrs, emit }, { select, tree, key })\n const { cacheOptions, ...treeProps } = useTree(\n props,\n { attrs: childAttrs, slots, emit },\n {\n select,\n tree,\n key,\n }\n )\n\n // expose ElTree/ElSelect methods\n const methods = reactive({})\n expose(methods)\n onMounted(() => {\n Object.assign(methods, {\n //TODO: let only tree and select in 3.0\n ...pick(tree.value, [\n 'filter',\n 'updateKeyChildren',\n 'getCheckedNodes',\n 'setCheckedNodes',\n 'getCheckedKeys',\n 'setCheckedKeys',\n 'setChecked',\n 'getHalfCheckedNodes',\n 'getHalfCheckedKeys',\n 'getCurrentKey',\n 'getCurrentNode',\n 'setCurrentKey',\n 'setCurrentNode',\n 'getNode',\n 'remove',\n 'append',\n 'insertBefore',\n 'insertAfter',\n ]),\n ...pick(select.value, ['focus', 'blur', 'selectedLabel']),\n treeRef: tree.value,\n selectRef: select.value,\n })\n })\n\n return () =>\n h(\n ElSelect,\n /**\n * 1. The `props` is processed into `Refs`, but `v-bind` and\n * render function props cannot read `Refs`, so use `reactive`\n * unwrap the `Refs` and keep reactive.\n * 2. The keyword `ref` requires `Ref`, but `reactive` broke it,\n * so use function.\n */\n reactive({\n ...selectProps,\n ref: (ref: SelectInstance) => (select.value = ref),\n }),\n {\n ...slots,\n default: () => [\n h(CacheOptions, { data: cacheOptions.value }),\n h(\n ElTree,\n reactive({\n ...treeProps,\n ref: (ref: TreeInstance) => (tree.value = ref),\n })\n ),\n ],\n }\n )\n },\n})\n</script>\n"],"mappings":""}
@@ -0,0 +1,447 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { PopperEffect } from "../../popper/src/popper.js";
import { TagTooltipProps } from "../../select/src/select.js";
import "../../select/index.js";
import { AllowDragFunction, AllowDropFunction, FilterNodeMethodFunction, LoadFunction, RenderContentFunction, TreeData, TreeKey, TreeOptionProps } from "../../tree/src/tree.type.js";
import "../../tree/index.js";
import "../../../index.js";
import { Options, Placement } from "../../popper/index.js";
import * as vue from "vue";
//#region ../../packages/components/tree-select/src/tree-select.vue.d.ts
declare const _default: typeof __VLS_export;
declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
/**
* @description The cached data of the lazy node, the structure is the same as the data, used to get the label of the unloaded data
*/
cacheData: {
type: ArrayConstructor;
default: () => never[];
};
data: EpPropFinalized<(new (...args: any[]) => TreeData) | (() => TreeData) | (((new (...args: any[]) => TreeData) | (() => TreeData)) | null)[], unknown, unknown, () => never[], boolean>;
emptyText: {
readonly type: vue.PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
renderAfterExpand: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
nodeKey: StringConstructor;
checkStrictly: BooleanConstructor;
defaultExpandAll: BooleanConstructor;
expandOnClickNode: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
checkOnClickNode: BooleanConstructor;
checkOnClickLeaf: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
checkDescendants: BooleanConstructor;
autoExpandParent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
defaultCheckedKeys: {
readonly type: vue.PropType<TreeKey[]>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
defaultExpandedKeys: {
readonly type: vue.PropType<TreeKey[]>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
currentNodeKey: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | number) | (() => string | number) | (((new (...args: any[]) => string | number) | (() => string | number)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
renderContent: {
readonly type: vue.PropType<RenderContentFunction>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
showCheckbox: BooleanConstructor;
draggable: BooleanConstructor;
allowDrag: {
readonly type: vue.PropType<AllowDragFunction>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
allowDrop: {
readonly type: vue.PropType<AllowDropFunction>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
props: EpPropFinalized<(new (...args: any[]) => TreeOptionProps) | (() => TreeOptionProps) | (((new (...args: any[]) => TreeOptionProps) | (() => TreeOptionProps)) | null)[], unknown, unknown, () => {
children: string;
label: string;
disabled: string;
}, boolean>;
lazy: BooleanConstructor;
highlightCurrent: BooleanConstructor;
load: {
readonly type: vue.PropType<LoadFunction>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
filterNodeMethod: {
readonly type: vue.PropType<FilterNodeMethodFunction>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
accordion: BooleanConstructor;
indent: EpPropFinalized<NumberConstructor, unknown, unknown, 18, boolean>;
icon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
ariaLabel: StringConstructor;
emptyValues: ArrayConstructor;
valueOnClear: EpPropFinalized<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | (((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null)) | null)[], unknown, unknown, undefined, boolean>;
name: StringConstructor;
id: StringConstructor;
modelValue: EpPropFinalized<(new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null) | (((new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null)) | null)[], unknown, unknown, undefined, boolean>;
autocomplete: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
automaticDropdown: BooleanConstructor;
size: {
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
effect: EpPropFinalized<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown, string, boolean>;
disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
clearable: BooleanConstructor;
filterable: BooleanConstructor;
allowCreate: BooleanConstructor;
loading: BooleanConstructor;
popperClass: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
popperStyle: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | vue.CSSProperties) | (() => string | vue.CSSProperties) | (((new (...args: any[]) => string | vue.CSSProperties) | (() => string | vue.CSSProperties)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => Partial<Options>, boolean>;
remote: BooleanConstructor;
debounce: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
loadingText: StringConstructor;
noMatchText: StringConstructor;
noDataText: StringConstructor;
remoteMethod: {
readonly type: vue.PropType<(query: string) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
filterMethod: {
readonly type: vue.PropType<(query: string) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
multiple: BooleanConstructor;
multipleLimit: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
placeholder: {
readonly type: vue.PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
defaultFirstOption: BooleanConstructor;
reserveKeyword: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
valueKey: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
collapseTags: BooleanConstructor;
collapseTagsTooltip: BooleanConstructor;
tagTooltip: EpPropFinalized<(new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps) | (((new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps)) | null)[], unknown, unknown, () => {}, boolean>;
maxCollapseTags: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
persistent: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
clearIcon: EpPropFinalized<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown, vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
fitInputWidth: BooleanConstructor;
suffixIcon: EpPropFinalized<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown, vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
tagType: {
default: string;
type: vue.PropType<EpPropMergeType<StringConstructor, "info" | "primary" | "success" | "warning" | "danger", unknown>>;
required: false;
validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
tagEffect: {
default: string;
type: vue.PropType<EpPropMergeType<StringConstructor, "light" | "dark" | "plain", unknown>>;
required: false;
validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
remoteShowSuffix: BooleanConstructor;
showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
offset: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
placement: EpPropFinalized<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, string, boolean>;
fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | (((new (...args: any[]) => Placement[]) | (() => Placement[])) | null)[], unknown, unknown, string[], boolean>;
tabindex: EpPropFinalized<(NumberConstructor | StringConstructor)[], unknown, unknown, number, boolean>;
appendTo: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>) | (((new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
options: {
readonly type: vue.PropType<Record<string, any>[]>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
/**
* @description The cached data of the lazy node, the structure is the same as the data, used to get the label of the unloaded data
*/
cacheData: {
type: ArrayConstructor;
default: () => never[];
};
data: EpPropFinalized<(new (...args: any[]) => TreeData) | (() => TreeData) | (((new (...args: any[]) => TreeData) | (() => TreeData)) | null)[], unknown, unknown, () => never[], boolean>;
emptyText: {
readonly type: vue.PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
renderAfterExpand: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
nodeKey: StringConstructor;
checkStrictly: BooleanConstructor;
defaultExpandAll: BooleanConstructor;
expandOnClickNode: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
checkOnClickNode: BooleanConstructor;
checkOnClickLeaf: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
checkDescendants: BooleanConstructor;
autoExpandParent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
defaultCheckedKeys: {
readonly type: vue.PropType<TreeKey[]>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
defaultExpandedKeys: {
readonly type: vue.PropType<TreeKey[]>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
currentNodeKey: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | number) | (() => string | number) | (((new (...args: any[]) => string | number) | (() => string | number)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
renderContent: {
readonly type: vue.PropType<RenderContentFunction>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
showCheckbox: BooleanConstructor;
draggable: BooleanConstructor;
allowDrag: {
readonly type: vue.PropType<AllowDragFunction>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
allowDrop: {
readonly type: vue.PropType<AllowDropFunction>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
props: EpPropFinalized<(new (...args: any[]) => TreeOptionProps) | (() => TreeOptionProps) | (((new (...args: any[]) => TreeOptionProps) | (() => TreeOptionProps)) | null)[], unknown, unknown, () => {
children: string;
label: string;
disabled: string;
}, boolean>;
lazy: BooleanConstructor;
highlightCurrent: BooleanConstructor;
load: {
readonly type: vue.PropType<LoadFunction>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
filterNodeMethod: {
readonly type: vue.PropType<FilterNodeMethodFunction>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
accordion: BooleanConstructor;
indent: EpPropFinalized<NumberConstructor, unknown, unknown, 18, boolean>;
icon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
ariaLabel: StringConstructor;
emptyValues: ArrayConstructor;
valueOnClear: EpPropFinalized<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | (((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null)) | null)[], unknown, unknown, undefined, boolean>;
name: StringConstructor;
id: StringConstructor;
modelValue: EpPropFinalized<(new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null) | (((new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null)) | null)[], unknown, unknown, undefined, boolean>;
autocomplete: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
automaticDropdown: BooleanConstructor;
size: {
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
effect: EpPropFinalized<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown, string, boolean>;
disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
clearable: BooleanConstructor;
filterable: BooleanConstructor;
allowCreate: BooleanConstructor;
loading: BooleanConstructor;
popperClass: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
popperStyle: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | vue.CSSProperties) | (() => string | vue.CSSProperties) | (((new (...args: any[]) => string | vue.CSSProperties) | (() => string | vue.CSSProperties)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => Partial<Options>, boolean>;
remote: BooleanConstructor;
debounce: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
loadingText: StringConstructor;
noMatchText: StringConstructor;
noDataText: StringConstructor;
remoteMethod: {
readonly type: vue.PropType<(query: string) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
filterMethod: {
readonly type: vue.PropType<(query: string) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
multiple: BooleanConstructor;
multipleLimit: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
placeholder: {
readonly type: vue.PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
defaultFirstOption: BooleanConstructor;
reserveKeyword: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
valueKey: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
collapseTags: BooleanConstructor;
collapseTagsTooltip: BooleanConstructor;
tagTooltip: EpPropFinalized<(new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps) | (((new (...args: any[]) => TagTooltipProps) | (() => TagTooltipProps)) | null)[], unknown, unknown, () => {}, boolean>;
maxCollapseTags: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
persistent: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
clearIcon: EpPropFinalized<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown, vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
fitInputWidth: BooleanConstructor;
suffixIcon: EpPropFinalized<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown, vue.DefineComponent<{}, void, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>, boolean>;
tagType: {
default: string;
type: vue.PropType<EpPropMergeType<StringConstructor, "info" | "primary" | "success" | "warning" | "danger", unknown>>;
required: false;
validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
tagEffect: {
default: string;
type: vue.PropType<EpPropMergeType<StringConstructor, "light" | "dark" | "plain", unknown>>;
required: false;
validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
remoteShowSuffix: BooleanConstructor;
showArrow: EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
offset: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
placement: EpPropFinalized<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, string, boolean>;
fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | (((new (...args: any[]) => Placement[]) | (() => Placement[])) | null)[], unknown, unknown, string[], boolean>;
tabindex: EpPropFinalized<(NumberConstructor | StringConstructor)[], unknown, unknown, number, boolean>;
appendTo: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>) | (((new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
options: {
readonly type: vue.PropType<Record<string, any>[]>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>> & Readonly<{}>, {
lazy: boolean;
offset: number;
teleported: EpPropMergeType<BooleanConstructor, unknown, unknown>;
props: TreeOptionProps;
effect: EpPropMergeType<(new (...args: any[]) => string) | (() => PopperEffect) | (((new (...args: any[]) => string) | (() => PopperEffect)) | null)[], unknown, unknown>;
disabled: EpPropMergeType<BooleanConstructor, unknown, unknown>;
modelValue: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null) | (((new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[], unknown, unknown>[] | null)) | null)[], unknown, unknown>;
autocomplete: string;
clearable: boolean;
clearIcon: EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>;
suffixIcon: EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>;
tabindex: EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>;
validateEvent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
multiple: boolean;
popperClass: string;
fallbackPlacements: Placement[];
placement: EpPropMergeType<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown>;
popperOptions: Partial<Options>;
showArrow: EpPropMergeType<BooleanConstructor, unknown, unknown>;
persistent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
data: TreeData;
valueKey: string;
debounce: number;
fitInputWidth: boolean;
loading: boolean;
valueOnClear: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | (((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null)) | null)[], unknown, unknown>;
checkStrictly: boolean;
checkOnClickNode: boolean;
checkOnClickLeaf: EpPropMergeType<BooleanConstructor, unknown, unknown>;
filterable: boolean;
collapseTags: boolean;
maxCollapseTags: number;
collapseTagsTooltip: boolean;
tagType: EpPropMergeType<StringConstructor, "info" | "primary" | "success" | "warning" | "danger", unknown>;
tagEffect: EpPropMergeType<StringConstructor, "light" | "dark" | "plain", unknown>;
accordion: boolean;
automaticDropdown: boolean;
draggable: boolean;
allowCreate: boolean;
remote: boolean;
multipleLimit: number;
defaultFirstOption: boolean;
reserveKeyword: EpPropMergeType<BooleanConstructor, unknown, unknown>;
tagTooltip: TagTooltipProps;
remoteShowSuffix: boolean;
defaultExpandAll: boolean;
indent: number;
renderAfterExpand: EpPropMergeType<BooleanConstructor, unknown, unknown>;
showCheckbox: boolean;
expandOnClickNode: EpPropMergeType<BooleanConstructor, unknown, unknown>;
autoExpandParent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
checkDescendants: boolean;
highlightCurrent: boolean;
cacheData: unknown[];
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
//#endregion
export { _default };
@@ -0,0 +1,108 @@
import { selectProps } from "../../select/src/select.mjs";
import { ElSelect } from "../../select/index.mjs";
import { treeProps } from "../../tree/src/tree.mjs";
import { ElTree } from "../../tree/index.mjs";
import { useSelect } from "./select.mjs";
import { useTree } from "./tree.mjs";
import cache_options_default from "./cache-options.mjs";
import { pick } from "lodash-unified";
import { computed, defineComponent, h, onMounted, reactive, ref } from "vue";
//#region ../../packages/components/tree-select/src/tree-select.vue?vue&type=script&lang.ts
var tree_select_vue_vue_type_script_lang_default = defineComponent({
name: "ElTreeSelect",
inheritAttrs: false,
props: {
...selectProps,
...treeProps,
cacheData: {
type: Array,
default: () => []
}
},
setup(props, context) {
const { slots, expose, emit, attrs } = context;
const childAttrs = {
...attrs,
onChange: void 0
};
const select = ref();
const tree = ref();
const key = computed(() => props.nodeKey || props.valueKey || "value");
const selectProps = useSelect(props, {
attrs,
emit
}, {
select,
tree,
key
});
const { cacheOptions, ...treeProps } = useTree(props, {
attrs: childAttrs,
slots,
emit
}, {
select,
tree,
key
});
const methods = reactive({});
expose(methods);
onMounted(() => {
Object.assign(methods, {
...pick(tree.value, [
"filter",
"updateKeyChildren",
"getCheckedNodes",
"setCheckedNodes",
"getCheckedKeys",
"setCheckedKeys",
"setChecked",
"getHalfCheckedNodes",
"getHalfCheckedKeys",
"getCurrentKey",
"getCurrentNode",
"setCurrentKey",
"setCurrentNode",
"getNode",
"remove",
"append",
"insertBefore",
"insertAfter"
]),
...pick(select.value, [
"focus",
"blur",
"selectedLabel"
]),
treeRef: tree.value,
selectRef: select.value
});
});
return () => h(
ElSelect,
/**
* 1. The `props` is processed into `Refs`, but `v-bind` and
* render function props cannot read `Refs`, so use `reactive`
* unwrap the `Refs` and keep reactive.
* 2. The keyword `ref` requires `Ref`, but `reactive` broke it,
* so use function.
*/
reactive({
...selectProps,
ref: (ref) => select.value = ref
}),
{
...slots,
default: () => [h(cache_options_default, { data: cacheOptions.value }), h(ElTree, reactive({
...treeProps,
ref: (ref) => tree.value = ref
}))]
}
);
}
});
//#endregion
export { tree_select_vue_vue_type_script_lang_default as default };
//# sourceMappingURL=tree-select.vue_vue_type_script_lang.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"tree-select.vue_vue_type_script_lang.mjs","names":[],"sources":["../../../../../../packages/components/tree-select/src/tree-select.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { computed, defineComponent, h, onMounted, reactive, ref } from 'vue'\nimport { pick } from 'lodash-unified'\nimport { ElSelect, selectProps } from '@element-plus/components/select'\nimport { ElTree, treeProps } from '@element-plus/components/tree'\nimport { useSelect } from './select'\nimport { useTree } from './tree'\nimport CacheOptions from './cache-options'\n\nimport type { TreeInstance } from '@element-plus/components/tree'\nimport type { SelectInstance } from '@element-plus/components/select'\n\nexport default defineComponent({\n name: 'ElTreeSelect',\n // disable `ElSelect` inherit current attrs\n inheritAttrs: false,\n props: {\n ...selectProps,\n ...treeProps,\n /**\n * @description The cached data of the lazy node, the structure is the same as the data, used to get the label of the unloaded data\n */\n cacheData: {\n type: Array,\n default: () => [],\n },\n },\n setup(props, context) {\n const { slots, expose, emit, attrs } = context\n const childAttrs = {\n ...attrs,\n onChange: undefined,\n }\n\n const select = ref<SelectInstance>()\n const tree = ref<TreeInstance>()\n\n const key = computed(() => props.nodeKey || props.valueKey || 'value')\n\n const selectProps = useSelect(props, { attrs, emit }, { select, tree, key })\n const { cacheOptions, ...treeProps } = useTree(\n props,\n { attrs: childAttrs, slots, emit },\n {\n select,\n tree,\n key,\n }\n )\n\n // expose ElTree/ElSelect methods\n const methods = reactive({})\n expose(methods)\n onMounted(() => {\n Object.assign(methods, {\n //TODO: let only tree and select in 3.0\n ...pick(tree.value, [\n 'filter',\n 'updateKeyChildren',\n 'getCheckedNodes',\n 'setCheckedNodes',\n 'getCheckedKeys',\n 'setCheckedKeys',\n 'setChecked',\n 'getHalfCheckedNodes',\n 'getHalfCheckedKeys',\n 'getCurrentKey',\n 'getCurrentNode',\n 'setCurrentKey',\n 'setCurrentNode',\n 'getNode',\n 'remove',\n 'append',\n 'insertBefore',\n 'insertAfter',\n ]),\n ...pick(select.value, ['focus', 'blur', 'selectedLabel']),\n treeRef: tree.value,\n selectRef: select.value,\n })\n })\n\n return () =>\n h(\n ElSelect,\n /**\n * 1. The `props` is processed into `Refs`, but `v-bind` and\n * render function props cannot read `Refs`, so use `reactive`\n * unwrap the `Refs` and keep reactive.\n * 2. The keyword `ref` requires `Ref`, but `reactive` broke it,\n * so use function.\n */\n reactive({\n ...selectProps,\n ref: (ref: SelectInstance) => (select.value = ref),\n }),\n {\n ...slots,\n default: () => [\n h(CacheOptions, { data: cacheOptions.value }),\n h(\n ElTree,\n reactive({\n ...treeProps,\n ref: (ref: TreeInstance) => (tree.value = ref),\n })\n ),\n ],\n }\n )\n },\n})\n</script>\n"],"mappings":";;;;;;;;;;;AAYA,mDAAe,gBAAgB;CAC7B,MAAM;CAEN,cAAc;CACd,OAAO;EACL,GAAG;EACH,GAAG;EAIH,WAAW;GACT,MAAM;GACN,eAAe,EAAE;GAClB;EACF;CACD,MAAM,OAAO,SAAS;EACpB,MAAM,EAAE,OAAO,QAAQ,MAAM,UAAU;EACvC,MAAM,aAAa;GACjB,GAAG;GACH,UAAU;GACZ;EAEA,MAAM,SAAS,KAAoB;EACnC,MAAM,OAAO,KAAkB;EAE/B,MAAM,MAAM,eAAe,MAAM,WAAW,MAAM,YAAY,QAAO;EAErE,MAAM,cAAc,UAAU,OAAO;GAAE;GAAO;GAAM,EAAE;GAAE;GAAQ;GAAM;GAAK,CAAA;EAC3E,MAAM,EAAE,cAAc,GAAG,cAAc,QACrC,OACA;GAAE,OAAO;GAAY;GAAO;GAAM,EAClC;GACE;GACA;GACA;GACF,CACF;EAGA,MAAM,UAAU,SAAS,EAAE,CAAA;AAC3B,SAAO,QAAO;AACd,kBAAgB;AACd,UAAO,OAAO,SAAS;IAErB,GAAG,KAAK,KAAK,OAAO;KAClB;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACD,CAAC;IACF,GAAG,KAAK,OAAO,OAAO;KAAC;KAAS;KAAQ;KAAgB,CAAC;IACzD,SAAS,KAAK;IACd,WAAW,OAAO;IACnB,CAAA;IACF;AAED,eACE;GACE;;;;;;;;GAQA,SAAS;IACP,GAAG;IACH,MAAM,QAAyB,OAAO,QAAQ;IAC/C,CAAC;GACF;IACE,GAAG;IACH,eAAe,CACb,EAAE,uBAAc,EAAE,MAAM,aAAa,OAAO,CAAC,EAC7C,EACE,QACA,SAAS;KACP,GAAG;KACH,MAAM,QAAuB,KAAK,QAAQ;KAC3C,CAAA,CACF,CACF;IACH;GACF;;CAEL,CAAA"}
@@ -0,0 +1,153 @@
import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from "../../../constants/event.mjs";
import { isEmpty, isFunction } from "../../../utils/types.mjs";
import { escapeStringRegexp } from "../../../utils/strings.mjs";
import { ElTree } from "../../tree/index.mjs";
import component from "./tree-select-option.mjs";
import { isValidArray, isValidValue, toValidArray, treeEach, treeFind } from "./utils.mjs";
import { isEqual, isNil, pick } from "lodash-unified";
import { computed, nextTick, toRefs, watch } from "vue";
//#region ../../packages/components/tree-select/src/tree.ts
const useTree = (props, { attrs, slots, emit }, { select, tree, key }) => {
watch([() => props.modelValue, tree], () => {
if (props.showCheckbox) nextTick(() => {
const treeInstance = tree.value;
if (treeInstance && !isEqual(treeInstance.getCheckedKeys(), toValidArray(props.modelValue))) treeInstance.setCheckedKeys(toValidArray(props.modelValue));
});
}, {
immediate: true,
deep: true
});
const propsMap = computed(() => ({
value: key.value,
label: "label",
children: "children",
disabled: "disabled",
isLeaf: "isLeaf",
...props.props
}));
const getNodeValByProp = (prop, data) => {
const propVal = propsMap.value[prop];
if (isFunction(propVal)) return propVal(data, tree.value?.getNode(getNodeValByProp("value", data)));
else return data[propVal];
};
const defaultExpandedParentKeys = toValidArray(props.modelValue).map((value) => {
return treeFind(props.data || [], (data) => getNodeValByProp("value", data) === value, (data) => getNodeValByProp("children", data), (data, index, array, parent) => parent && getNodeValByProp("value", parent));
}).filter((item) => isValidValue(item));
const cacheOptions = computed(() => {
if (!props.renderAfterExpand && !props.lazy) return [];
const options = [];
treeEach(props.data.concat(props.cacheData), (node) => {
const value = getNodeValByProp("value", node);
options.push({
value,
currentLabel: getNodeValByProp("label", node),
isDisabled: getNodeValByProp("disabled", node)
});
}, (data) => getNodeValByProp("children", data));
return options;
});
const getChildCheckedKeys = () => {
return tree.value?.getCheckedKeys().filter((checkedKey) => {
const node = tree.value?.getNode(checkedKey);
return !isNil(node) && isEmpty(node.childNodes);
});
};
const emitChange = (val) => {
if (!isEqual(props.modelValue, val)) emit(CHANGE_EVENT, val);
};
function update(val) {
emit(UPDATE_MODEL_EVENT, val);
emitChange(val);
}
return {
...pick(toRefs(props), Object.keys(ElTree.props)),
...attrs,
nodeKey: key,
expandOnClickNode: computed(() => {
return !props.checkStrictly && props.expandOnClickNode;
}),
defaultExpandedKeys: computed(() => {
return props.defaultExpandedKeys ? props.defaultExpandedKeys.concat(defaultExpandedParentKeys) : defaultExpandedParentKeys;
}),
renderContent: (h, { node, data, store }) => {
return h(component, {
value: getNodeValByProp("value", data),
label: getNodeValByProp("label", data),
disabled: getNodeValByProp("disabled", data),
visible: node.visible
}, props.renderContent ? () => props.renderContent(h, {
node,
data,
store
}) : slots.default ? () => slots.default({
node,
data,
store
}) : void 0);
},
filterNodeMethod: (value, data, node) => {
if (props.filterNodeMethod) return props.filterNodeMethod(value, data, node);
if (!value) return true;
return new RegExp(escapeStringRegexp(value), "i").test(getNodeValByProp("label", data) || "");
},
onNodeClick: (data, node, e) => {
attrs.onNodeClick?.(data, node, e);
if (props.showCheckbox && props.checkOnClickNode) return;
if (!props.showCheckbox && (props.checkStrictly || node.isLeaf)) {
if (!getNodeValByProp("disabled", data)) {
const option = select.value?.states.options.get(getNodeValByProp("value", data));
select.value?.handleOptionSelect(option);
}
} else if (props.expandOnClickNode) e.proxy.handleExpandIconClick();
},
onCheck: (data, params) => {
if (!props.showCheckbox) return;
const dataValue = getNodeValByProp("value", data);
const dataMap = {};
treeEach([tree.value.store.root], (node) => dataMap[node.key] = node, (node) => node.childNodes);
const uncachedCheckedKeys = params.checkedKeys;
const cachedKeys = props.multiple ? toValidArray(props.modelValue).filter((item) => !(item in dataMap) && !uncachedCheckedKeys.includes(item)) : [];
const checkedKeys = cachedKeys.concat(uncachedCheckedKeys);
if (props.checkStrictly) update(props.multiple ? checkedKeys : checkedKeys.includes(dataValue) ? dataValue : void 0);
else if (props.multiple) {
const childKeys = getChildCheckedKeys();
update(cachedKeys.concat(childKeys));
} else {
const firstLeaf = treeFind([data], (data) => !isValidArray(getNodeValByProp("children", data)) && !getNodeValByProp("disabled", data), (data) => getNodeValByProp("children", data));
const firstLeafKey = firstLeaf ? getNodeValByProp("value", firstLeaf) : void 0;
const hasCheckedChild = isValidValue(props.modelValue) && !!treeFind([data], (data) => getNodeValByProp("value", data) === props.modelValue, (data) => getNodeValByProp("children", data));
update(firstLeafKey === props.modelValue || hasCheckedChild ? void 0 : firstLeafKey);
}
nextTick(() => {
const checkedKeys = toValidArray(props.modelValue);
tree.value.setCheckedKeys(checkedKeys);
attrs.onCheck?.(data, {
checkedKeys: tree.value.getCheckedKeys(),
checkedNodes: tree.value.getCheckedNodes(),
halfCheckedKeys: tree.value.getHalfCheckedKeys(),
halfCheckedNodes: tree.value.getHalfCheckedNodes()
});
});
select.value?.focus();
},
onNodeExpand: (data, node, e) => {
attrs.onNodeExpand?.(data, node, e);
nextTick(() => {
if (!props.checkStrictly && props.lazy && props.multiple && node.checked) {
const dataMap = {};
const uncachedCheckedKeys = tree.value.getCheckedKeys();
treeEach([tree.value.store.root], (node) => dataMap[node.key] = node, (node) => node.childNodes);
const cachedKeys = toValidArray(props.modelValue).filter((item) => !(item in dataMap) && !uncachedCheckedKeys.includes(item));
const childKeys = getChildCheckedKeys();
update(cachedKeys.concat(childKeys));
}
});
},
cacheOptions
};
};
//#endregion
export { useTree };
//# sourceMappingURL=tree.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,37 @@
import { isArray } from "../../../utils/types.mjs";
//#region ../../packages/components/tree-select/src/utils.ts
function isValidValue(val) {
return val || val === 0;
}
function isValidArray(val) {
return isArray(val) && val.length;
}
function toValidArray(val) {
return isArray(val) ? val : isValidValue(val) ? [val] : [];
}
function treeFind(treeData, findCallback, getChildren, resultCallback, parent) {
for (let i = 0; i < treeData.length; i++) {
const data = treeData[i];
if (findCallback(data, i, treeData, parent)) return resultCallback ? resultCallback(data, i, treeData, parent) : data;
else {
const children = getChildren(data);
if (isValidArray(children)) {
const find = treeFind(children, findCallback, getChildren, resultCallback, data);
if (find) return find;
}
}
}
}
function treeEach(treeData, callback, getChildren, parent) {
for (let i = 0; i < treeData.length; i++) {
const data = treeData[i];
callback(data, i, treeData, parent);
const children = getChildren(data);
if (isValidArray(children)) treeEach(children, callback, getChildren, data);
}
}
//#endregion
export { isValidArray, isValidValue, toValidArray, treeEach, treeFind };
//# sourceMappingURL=utils.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"utils.mjs","names":[],"sources":["../../../../../../packages/components/tree-select/src/utils.ts"],"sourcesContent":["import { isArray } from '@element-plus/utils'\n\nimport type { TreeNodeData } from '@element-plus/components/tree/src/tree.type'\n\nexport function isValidValue(val: any) {\n return val || val === 0\n}\n\nexport function isValidArray(val: any) {\n return isArray(val) && val.length\n}\n\nexport function toValidArray(val: any) {\n return isArray(val) ? val : isValidValue(val) ? [val] : []\n}\n\ntype TreeCallback<T extends TreeNodeData, R> = (\n data: T,\n index: number,\n array: T[],\n parent?: T\n) => R\n\ntype TreeFindCallback<T extends TreeNodeData> = TreeCallback<T, boolean>\n\nexport function treeFind<T extends TreeNodeData>(\n treeData: T[],\n findCallback: TreeFindCallback<T>,\n getChildren: (data: T) => T[]\n): T | undefined\nexport function treeFind<T extends TreeNodeData, R>(\n treeData: T[],\n findCallback: TreeFindCallback<T>,\n getChildren: (data: T) => T[],\n resultCallback?: TreeCallback<T, R>,\n parent?: T\n): R | undefined\nexport function treeFind<T extends TreeNodeData, R>(\n treeData: T[],\n findCallback: TreeFindCallback<T>,\n getChildren: (data: T) => T[],\n resultCallback?: TreeCallback<T, R>,\n parent?: T\n): T | R | undefined {\n for (let i = 0; i < treeData.length; i++) {\n const data = treeData[i]\n if (findCallback(data, i, treeData, parent)) {\n return resultCallback ? resultCallback(data, i, treeData, parent) : data\n } else {\n const children = getChildren(data)\n if (isValidArray(children)) {\n const find = treeFind(\n children,\n findCallback,\n getChildren,\n resultCallback,\n data\n )\n if (find) return find\n }\n }\n }\n}\n\nexport function treeEach<T extends TreeNodeData>(\n treeData: T[],\n callback: TreeCallback<T, void>,\n getChildren: (data: T) => T[],\n parent?: T\n) {\n for (let i = 0; i < treeData.length; i++) {\n const data = treeData[i]\n callback(data, i, treeData, parent)\n\n const children = getChildren(data)\n if (isValidArray(children)) {\n treeEach(children, callback, getChildren, data)\n }\n }\n}\n"],"mappings":";;;AAIA,SAAgB,aAAa,KAAU;AACrC,QAAO,OAAO,QAAQ;;AAGxB,SAAgB,aAAa,KAAU;AACrC,QAAO,QAAQ,IAAI,IAAI,IAAI;;AAG7B,SAAgB,aAAa,KAAU;AACrC,QAAO,QAAQ,IAAI,GAAG,MAAM,aAAa,IAAI,GAAG,CAAC,IAAI,GAAG,EAAE;;AAwB5D,SAAgB,SACd,UACA,cACA,aACA,gBACA,QACmB;AACnB,MAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;EACxC,MAAM,OAAO,SAAS;AACtB,MAAI,aAAa,MAAM,GAAG,UAAU,OAAO,CACzC,QAAO,iBAAiB,eAAe,MAAM,GAAG,UAAU,OAAO,GAAG;OAC/D;GACL,MAAM,WAAW,YAAY,KAAK;AAClC,OAAI,aAAa,SAAS,EAAE;IAC1B,MAAM,OAAO,SACX,UACA,cACA,aACA,gBACA,KACD;AACD,QAAI,KAAM,QAAO;;;;;AAMzB,SAAgB,SACd,UACA,UACA,aACA,QACA;AACA,MAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;EACxC,MAAM,OAAO,SAAS;AACtB,WAAS,MAAM,GAAG,UAAU,OAAO;EAEnC,MAAM,WAAW,YAAY,KAAK;AAClC,MAAI,aAAa,SAAS,CACxB,UAAS,UAAU,UAAU,aAAa,KAAK"}
@@ -0,0 +1,3 @@
import "../../select/style/css.mjs";
import "../../tree/style/css.mjs";
import "element-plus/theme-chalk/el-tree-select.css";
@@ -0,0 +1,3 @@
import "../../select/style/index.mjs";
import "../../tree/style/index.mjs";
import "element-plus/theme-chalk/src/tree-select.scss";