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 };
+11
View File
@@ -0,0 +1,11 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_install = require('../../utils/vue/install.js');
const require_tree_select = require('./src/tree-select.js');
//#region ../../packages/components/tree-select/index.ts
const ElTreeSelect = require_install.withInstall(require_tree_select.default);
//#endregion
exports.ElTreeSelect = ElTreeSelect;
exports.default = ElTreeSelect;
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"file":"index.js","names":["withInstall","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,eACXA,4BAAYC,4BAAW"}
@@ -0,0 +1,31 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_token = require('../../select/src/token.js');
let vue = require("vue");
let _vueuse_core = require("@vueuse/core");
//#region ../../packages/components/tree-select/src/cache-options.ts
var cache_options_default = (0, vue.defineComponent)({
props: { data: {
type: Array,
default: () => []
} },
setup(props) {
const select = (0, vue.inject)(require_token.selectKey);
(0, vue.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 (_vueuse_core.isClient && !Array.from(inputs).includes(document.activeElement)) select.setSelected();
}, {
flush: "post",
immediate: true
});
return () => void 0;
}
});
//#endregion
exports.default = cache_options_default;
//# sourceMappingURL=cache-options.js.map
@@ -0,0 +1 @@
{"version":3,"file":"cache-options.js","names":["selectKey","isClient"],"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,qDAA+B;CAC7B,OAAO,EACL,MAAM;EACJ,MAAM;EACN,eAAe,EAAE;EAClB,EACF;CACD,MAAM,OAAO;EACX,MAAM,yBAAgBA,wBAAU;AAEhC,uBACQ,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,OACEC,yBACA,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 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -0,0 +1,67 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_aria = require('../../../constants/aria.js');
const require_event = require('../../../constants/event.js');
const require_event$1 = require('../../../utils/dom/event.js');
const require_index = require('../../../hooks/use-namespace/index.js');
const require_index$1 = require('../../select/index.js');
let _vueuse_core = require("@vueuse/core");
let lodash_unified = require("lodash-unified");
let vue = require("vue");
//#region ../../packages/components/tree-select/src/select.ts
const useSelect = (props, { attrs, emit }, { select, tree, key }) => {
const ns = require_index.useNamespace("tree-select");
(0, vue.watch)(() => props.data, () => {
if (props.filterable) (0, vue.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;
}
};
(0, vue.onMounted)(() => {
(0, _vueuse_core.useEventListener)(() => select.value?.$el, "keydown", async (evt) => {
const code = require_event$1.getEventCode(evt);
const { dropdownMenuVisible } = select.value;
if ([require_aria.EVENT_CODE.down, require_aria.EVENT_CODE.up].includes(code) && dropdownMenuVisible) {
await (0, vue.nextTick)();
setTimeout(() => {
if (require_aria.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 {
...(0, lodash_unified.pick)((0, vue.toRefs)(props), Object.keys(require_index$1.ElSelect.props)),
...attrs,
class: (0, vue.computed)(() => attrs.class),
style: (0, vue.computed)(() => attrs.style),
"onUpdate:modelValue": (value) => emit(require_event.UPDATE_MODEL_EVENT, value),
valueKey: key,
popperClass: (0, vue.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
exports.useSelect = useSelect;
//# sourceMappingURL=select.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,30 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_index = require('../../select/index.js');
let vue = require("vue");
//#region ../../packages/components/tree-select/src/tree-select-option.ts
const component = (0, vue.defineComponent)({
extends: require_index.ElOption,
setup(props, ctx) {
const result = require_index.ElOption.setup(props, ctx);
delete result.selectOptionClick;
const vm = (0, vue.getCurrentInstance)().proxy;
(0, vue.nextTick)(() => {
if (!result.select.states.cachedOptions.get(vm.value)) result.select.onOptionCreate(vm);
});
(0, vue.watch)(() => ctx.attrs.visible, (val) => {
(0, vue.nextTick)(() => {
result.states.visible = val;
});
}, { immediate: true });
return result;
},
methods: { selectOptionClick() {
this.$el.parentElement.click();
} }
});
//#endregion
exports.default = component;
//# sourceMappingURL=tree-select-option.js.map
@@ -0,0 +1 @@
{"version":3,"file":"tree-select-option.js","names":["ElOption"],"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,qCAA4B;CAChC,SAASA;CACT,MAAM,OAAO,KAAK;EAChB,MAAM,SAAUA,uBAAS,MAA2B,OAAO,IAAI;AAG/D,SAAO,OAAO;EAEd,MAAM,kCAA0B,CAAsB;AAWtD,0BAAe;AACb,OAAI,CAAC,OAAO,OAAO,OAAO,cAAc,IAAI,GAAG,MAAM,CACnD,QAAO,OAAO,eAAe,GAAG;IAElC;AAEF,uBACQ,IAAI,MAAM,UACf,QAAQ;AACP,2BAAe;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,9 @@
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
const require_tree_select_vue_vue_type_script_lang = require('./tree-select.vue_vue_type_script_lang.js');
//#region ../../packages/components/tree-select/src/tree-select.vue
var tree_select_default = require_tree_select_vue_vue_type_script_lang.default;
//#endregion
exports.default = tree_select_default;
//# sourceMappingURL=tree-select.js.map
@@ -0,0 +1 @@
{"version":3,"file":"tree-select.js","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,109 @@
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_select = require('../../select/src/select.js');
const require_index = require('../../select/index.js');
const require_tree = require('../../tree/src/tree.js');
const require_index$1 = require('../../tree/index.js');
const require_select$1 = require('./select.js');
const require_tree$1 = require('./tree.js');
const require_cache_options = require('./cache-options.js');
let lodash_unified = require("lodash-unified");
let vue = require("vue");
//#region ../../packages/components/tree-select/src/tree-select.vue?vue&type=script&lang.ts
var tree_select_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
name: "ElTreeSelect",
inheritAttrs: false,
props: {
...require_select.selectProps,
...require_tree.treeProps,
cacheData: {
type: Array,
default: () => []
}
},
setup(props, context) {
const { slots, expose, emit, attrs } = context;
const childAttrs = {
...attrs,
onChange: void 0
};
const select = (0, vue.ref)();
const tree = (0, vue.ref)();
const key = (0, vue.computed)(() => props.nodeKey || props.valueKey || "value");
const selectProps = require_select$1.useSelect(props, {
attrs,
emit
}, {
select,
tree,
key
});
const { cacheOptions, ...treeProps } = require_tree$1.useTree(props, {
attrs: childAttrs,
slots,
emit
}, {
select,
tree,
key
});
const methods = (0, vue.reactive)({});
expose(methods);
(0, vue.onMounted)(() => {
Object.assign(methods, {
...(0, lodash_unified.pick)(tree.value, [
"filter",
"updateKeyChildren",
"getCheckedNodes",
"setCheckedNodes",
"getCheckedKeys",
"setCheckedKeys",
"setChecked",
"getHalfCheckedNodes",
"getHalfCheckedKeys",
"getCurrentKey",
"getCurrentNode",
"setCurrentKey",
"setCurrentNode",
"getNode",
"remove",
"append",
"insertBefore",
"insertAfter"
]),
...(0, lodash_unified.pick)(select.value, [
"focus",
"blur",
"selectedLabel"
]),
treeRef: tree.value,
selectRef: select.value
});
});
return () => (0, vue.h)(
require_index.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.
*/
(0, vue.reactive)({
...selectProps,
ref: (ref) => select.value = ref
}),
{
...slots,
default: () => [(0, vue.h)(require_cache_options.default, { data: cacheOptions.value }), (0, vue.h)(require_index$1.ElTree, (0, vue.reactive)({
...treeProps,
ref: (ref) => tree.value = ref
}))]
}
);
}
});
//#endregion
exports.default = tree_select_vue_vue_type_script_lang_default;
//# sourceMappingURL=tree-select.vue_vue_type_script_lang.js.map
@@ -0,0 +1 @@
{"version":3,"file":"tree-select.vue_vue_type_script_lang.js","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,4EAA+B;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,uBAA6B;EACnC,MAAM,qBAAyB;EAE/B,MAAM,8BAAqB,MAAM,WAAW,MAAM,YAAY,QAAO;EAErE,MAAM,cAAc,2BAAU,OAAO;GAAE;GAAO;GAAM,EAAE;GAAE;GAAQ;GAAM;GAAK,CAAA;EAC3E,MAAM,EAAE,cAAc,GAAG,cAAc,uBACrC,OACA;GAAE,OAAO;GAAY;GAAO;GAAM,EAClC;GACE;GACA;GACA;GACF,CACF;EAGA,MAAM,4BAAmB,EAAE,CAAA;AAC3B,SAAO,QAAO;AACd,2BAAgB;AACd,UAAO,OAAO,SAAS;IAErB,4BAAQ,KAAK,OAAO;KAClB;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACD,CAAC;IACF,4BAAQ,OAAO,OAAO;KAAC;KAAS;KAAQ;KAAgB,CAAC;IACzD,SAAS,KAAK;IACd,WAAW,OAAO;IACnB,CAAA;IACF;AAED;GAEI;;;;;;;;qBAQS;IACP,GAAG;IACH,MAAM,QAAyB,OAAO,QAAQ;IAC/C,CAAC;GACF;IACE,GAAG;IACH,eAAe,YACX,+BAAc,EAAE,MAAM,aAAa,OAAO,CAAC,aAE3C,0CACS;KACP,GAAG;KACH,MAAM,QAAuB,KAAK,QAAQ;KAC3C,CAAA,CACF,CACF;IACH;GACF;;CAEL,CAAA"}
@@ -0,0 +1,156 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
const require_event = require('../../../constants/event.js');
const require_types = require('../../../utils/types.js');
const require_strings = require('../../../utils/strings.js');
const require_index = require('../../tree/index.js');
const require_tree_select_option = require('./tree-select-option.js');
const require_utils = require('./utils.js');
let lodash_unified = require("lodash-unified");
let vue = require("vue");
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/tree-select/src/tree.ts
const useTree = (props, { attrs, slots, emit }, { select, tree, key }) => {
(0, vue.watch)([() => props.modelValue, tree], () => {
if (props.showCheckbox) (0, vue.nextTick)(() => {
const treeInstance = tree.value;
if (treeInstance && !(0, lodash_unified.isEqual)(treeInstance.getCheckedKeys(), require_utils.toValidArray(props.modelValue))) treeInstance.setCheckedKeys(require_utils.toValidArray(props.modelValue));
});
}, {
immediate: true,
deep: true
});
const propsMap = (0, vue.computed)(() => ({
value: key.value,
label: "label",
children: "children",
disabled: "disabled",
isLeaf: "isLeaf",
...props.props
}));
const getNodeValByProp = (prop, data) => {
const propVal = propsMap.value[prop];
if ((0, _vue_shared.isFunction)(propVal)) return propVal(data, tree.value?.getNode(getNodeValByProp("value", data)));
else return data[propVal];
};
const defaultExpandedParentKeys = require_utils.toValidArray(props.modelValue).map((value) => {
return require_utils.treeFind(props.data || [], (data) => getNodeValByProp("value", data) === value, (data) => getNodeValByProp("children", data), (data, index, array, parent) => parent && getNodeValByProp("value", parent));
}).filter((item) => require_utils.isValidValue(item));
const cacheOptions = (0, vue.computed)(() => {
if (!props.renderAfterExpand && !props.lazy) return [];
const options = [];
require_utils.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 !(0, lodash_unified.isNil)(node) && require_types.isEmpty(node.childNodes);
});
};
const emitChange = (val) => {
if (!(0, lodash_unified.isEqual)(props.modelValue, val)) emit(require_event.CHANGE_EVENT, val);
};
function update(val) {
emit(require_event.UPDATE_MODEL_EVENT, val);
emitChange(val);
}
return {
...(0, lodash_unified.pick)((0, vue.toRefs)(props), Object.keys(require_index.ElTree.props)),
...attrs,
nodeKey: key,
expandOnClickNode: (0, vue.computed)(() => {
return !props.checkStrictly && props.expandOnClickNode;
}),
defaultExpandedKeys: (0, vue.computed)(() => {
return props.defaultExpandedKeys ? props.defaultExpandedKeys.concat(defaultExpandedParentKeys) : defaultExpandedParentKeys;
}),
renderContent: (h, { node, data, store }) => {
return h(require_tree_select_option.default, {
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(require_strings.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 = {};
require_utils.treeEach([tree.value.store.root], (node) => dataMap[node.key] = node, (node) => node.childNodes);
const uncachedCheckedKeys = params.checkedKeys;
const cachedKeys = props.multiple ? require_utils.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 = require_utils.treeFind([data], (data) => !require_utils.isValidArray(getNodeValByProp("children", data)) && !getNodeValByProp("disabled", data), (data) => getNodeValByProp("children", data));
const firstLeafKey = firstLeaf ? getNodeValByProp("value", firstLeaf) : void 0;
const hasCheckedChild = require_utils.isValidValue(props.modelValue) && !!require_utils.treeFind([data], (data) => getNodeValByProp("value", data) === props.modelValue, (data) => getNodeValByProp("children", data));
update(firstLeafKey === props.modelValue || hasCheckedChild ? void 0 : firstLeafKey);
}
(0, vue.nextTick)(() => {
const checkedKeys = require_utils.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);
(0, vue.nextTick)(() => {
if (!props.checkStrictly && props.lazy && props.multiple && node.checked) {
const dataMap = {};
const uncachedCheckedKeys = tree.value.getCheckedKeys();
require_utils.treeEach([tree.value.store.root], (node) => dataMap[node.key] = node, (node) => node.childNodes);
const cachedKeys = require_utils.toValidArray(props.modelValue).filter((item) => !(item in dataMap) && !uncachedCheckedKeys.includes(item));
const childKeys = getChildCheckedKeys();
update(cachedKeys.concat(childKeys));
}
});
},
cacheOptions
};
};
//#endregion
exports.useTree = useTree;
//# sourceMappingURL=tree.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,43 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
let _vue_shared = require("@vue/shared");
//#region ../../packages/components/tree-select/src/utils.ts
function isValidValue(val) {
return val || val === 0;
}
function isValidArray(val) {
return (0, _vue_shared.isArray)(val) && val.length;
}
function toValidArray(val) {
return (0, _vue_shared.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
exports.isValidArray = isValidArray;
exports.isValidValue = isValidValue;
exports.toValidArray = toValidArray;
exports.treeEach = treeEach;
exports.treeFind = treeFind;
//# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
{"version":3,"file":"utils.js","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,iCAAe,IAAI,IAAI,IAAI;;AAG7B,SAAgB,aAAa,KAAU;AACrC,iCAAe,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,4 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../select/style/css.js');
require('../../tree/style/css.js');
require("element-plus/theme-chalk/el-tree-select.css");
@@ -0,0 +1,4 @@
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
require('../../select/style/index.js');
require('../../tree/style/index.js');
require("element-plus/theme-chalk/src/tree-select.scss");