vft 0.0.524 → 0.0.525

package/es/components/tree-select/select.js

@@ -1,129 +1,120 @@
-import { watch as b, nextTick as h, computed as c, onMounted as A, toRefs as L } from "vue";
-import { useEventListener as T } from "@vueuse/core";
-import { pick as k, get as d } from "lodash-es";
-import "../select/index.js";
-import { selectV2Props as C } from "../select/defaults.js";
-import "@vft/utils";
-import "../config-provider/hooks/use-global-config.js";
-import { EVENT_CODE as y } from "../../constants/aria.js";
-import { UPDATE_MODEL_EVENT as O } from "../../constants/event.js";
-import "../form/index.js";
-import { useNamespace as w } from "../../hooks/use-namespace/index.js";
-import "../../hooks/use-model-toggle/index.js";
-import "@popperjs/core";
-import "../../hooks/use-z-index/index.js";
-import { treeEach as $ } from "./utils.js";
-const j = (e) => e.code || e.key || "";
-function D(e, s, f, l) {
-  if (!Array.isArray(e) || e.length === 0) return [];
-  const r = [];
-  return $(
-    e,
-    (n) => {
-      r.push({
-        [s]: d(n, s),
-        [f]: d(n, f)
-      });
-    },
-    (n) => d(n, l) || []
-  ), r;
-}
-const Z = (e, { attrs: s, emit: f }, {
-  select: l,
-  tree: r,
-  key: n
-}) => {
-  const g = w("tree-select");
-  b(
-    () => e.data,
-    () => {
-      e.filterable && h(() => {
-        const t = l.value?.states?.inputValue || "";
-        r.value?.filter(t);
-      });
-    },
-    { flush: "post" }
-  );
-  const x = (t) => {
-    const o = t.at(-1);
-    if (o.expanded && o.childNodes.at(-1))
-      x([o.childNodes.at(-1)]);
-    else {
-      r.value?.el$?.querySelector(
-        `[data-key="${t.at(-1).key}"]`
-      )?.focus({ preventScroll: !0 });
-      return;
-    }
-  }, m = c(() => ({
-    value: n.value,
-    label: "label",
-    children: "children",
-    ...e.props
-  })), p = () => {
-    h(() => {
-      const t = l.value;
-      if (!t?.states) return;
-      const o = e.data || [], i = m.value.value, v = m.value.label, u = m.value.children, S = D(o, i, v, u), a = e.modelValue;
-      if (a == null || Array.isArray(a) && a.length === 0) {
-        t.states.selectedLabel = "";
-        return;
-      }
-      const M = (Array.isArray(a) ? a : [a]).map((N) => {
-        const E = S.find((V) => d(V, i) === N);
-        return E ? d(E, v) : "";
-      });
-      t.states.selectedLabel = M.filter(Boolean).join(", ");
-    });
-  };
-  return l.syncSelectedLabel = p, A(() => {
-    p(), T(
-      () => l.value?.selectRef,
-      "keydown",
-      async (t) => {
-        const o = j(t), i = l.value?.expanded;
-        [y.down, y.up].includes(o) && i && (await h(), setTimeout(() => {
-          if (y.up === o) {
-            const u = r.value?.store?.root?.childNodes;
-            u && x(u);
-            return;
-          }
-          (l.value?.states?.hoveringIndex ?? -1) >= 0 && l.value?.filteredOptions && r.value?.el$?.querySelector("[data-key]")?.focus({ preventScroll: !0 });
-        }));
-      },
-      {
-        capture: !0
-      }
-    );
-  }), b(
-    () => [e.data, e.modelValue],
-    p,
-    { immediate: !0, deep: !0 }
-  ), {
-    ...k(L(e), Object.keys(C)),
-    ...s,
-    class: c(() => s.class),
-    style: c(() => s.style),
-    // attrs is not reactive, when v-model binding source changes,
-    // this listener is still old, see the bug(or test 'v-model source change'):
-    // https://github.com/element-plus/element-plus/issues/14204
-    "onUpdate:modelValue": (t) => f(O, t),
-    valueKey: n,
-    popperClass: c(() => {
-      const t = [g.e("popper")];
-      return e.popperClass && t.push(e.popperClass), t.join(" ");
-    }),
-    popperStyle: c(() => {
-      const t = e.dropdownMaxHeight, o = typeof t == "number" ? `${t}px` : String(t || "274px");
-      return {
-        ...e.popperStyle || {},
-        "--vft-tree-select-dropdown-max-height": o
-      };
-    }),
-    filterMethod: (t = "") => {
-      e.filterMethod ? e.filterMethod(t) : e.remoteMethod ? e.remoteMethod(t) : r.value?.filter(t);
-    }
-  };
+import { useNamespace } from "../../hooks/use-namespace/index.js";
+import { EVENT_CODE } from "../../constants/aria.js";
+import { UPDATE_MODEL_EVENT } from "../../constants/event.js";
+import { selectV2Props } from "../select/defaults.js";
+import { treeEach } from "./utils.js";
+import { useEventListener } from "@vueuse/core";
+import { get, pick } from "lodash-es";
+import { computed, nextTick, onMounted, toRefs, watch } from "vue";
+//#region ../../packages/components/tree-select/select.ts
+const getEventCode = (event) => {
+	return event.code || event.key || "";
 };
-export {
-  Z as useSelect
+/** 将树形 data 扁平为 Select 可用的 options，用于根据 value 解析出 label 显示 */
+function flattenTreeToOptions(data, valueKey, labelKey, childrenKey) {
+	if (!Array.isArray(data) || data.length === 0) return [];
+	const list = [];
+	treeEach(data, (node) => {
+		list.push({
+			[valueKey]: get(node, valueKey),
+			[labelKey]: get(node, labelKey)
+		});
+	}, (node) => get(node, childrenKey) || []);
+	return list;
+}
+const useSelect = (props, { attrs, emit }, { select, tree, key }) => {
+	const ns = useNamespace("tree-select");
+	watch(() => props.data, () => {
+		if (props.filterable) nextTick(() => {
+			const inputValue = select.value?.states?.inputValue || "";
+			tree.value?.filter(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;
+		}
+	};
+	const propMap = computed(() => ({
+		value: key.value,
+		label: "label",
+		children: "children",
+		...props.props
+	}));
+	const syncSelectedLabel = () => {
+		nextTick(() => {
+			const sel = select.value;
+			if (!sel?.states) return;
+			const data = props.data || [];
+			const valueKey = propMap.value.value;
+			const labelKey = propMap.value.label;
+			const childrenKey = propMap.value.children;
+			const options = flattenTreeToOptions(data, valueKey, labelKey, childrenKey);
+			const val = props.modelValue;
+			if (val === void 0 || val === null || Array.isArray(val) && val.length === 0) {
+				sel.states.selectedLabel = "";
+				return;
+			}
+			const labels = (Array.isArray(val) ? val : [val]).map((v) => {
+				const opt = options.find((o) => get(o, valueKey) === v);
+				return opt ? get(opt, labelKey) : "";
+			});
+			sel.states.selectedLabel = labels.filter(Boolean).join(", ");
+		});
+	};
+	select.syncSelectedLabel = syncSelectedLabel;
+	onMounted(() => {
+		syncSelectedLabel();
+		useEventListener(() => select.value?.selectRef, "keydown", async (evt) => {
+			const code = getEventCode(evt);
+			const expanded = select.value?.expanded;
+			if ([EVENT_CODE.down, EVENT_CODE.up].includes(code) && expanded) {
+				await nextTick();
+				setTimeout(() => {
+					if (EVENT_CODE.up === code) {
+						const listNode = tree.value?.store?.root?.childNodes;
+						if (listNode) focusLastNode(listNode);
+						return;
+					}
+					if ((select.value?.states?.hoveringIndex ?? -1) >= 0 && select.value?.filteredOptions) (tree.value?.el$?.querySelector(`[data-key]`))?.focus({ preventScroll: true });
+				});
+			}
+		}, { capture: true });
+	});
+	/** 根据当前 value 从树 data 中解析出 label，仅同步到 Select 的 selectedLabel，不传 options 避免下拉里多出一份扁平列表 */
+	watch(() => [props.data, props.modelValue], syncSelectedLabel, {
+		immediate: true,
+		deep: true
+	});
+	return {
+		...pick(toRefs(props), Object.keys(selectV2Props)),
+		...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(" ");
+		}),
+		popperStyle: computed(() => {
+			const max = props.dropdownMaxHeight;
+			const maxHeight = typeof max === "number" ? `${max}px` : String(max || "274px");
+			return {
+				...props.popperStyle || {},
+				"--vft-tree-select-dropdown-max-height": maxHeight
+			};
+		}),
+		filterMethod: (keyword = "") => {
+			if (props.filterMethod) props.filterMethod(keyword);
+			else if (props.remoteMethod) props.remoteMethod(keyword);
+			else tree.value?.filter(keyword);
+		}
+	};
 };
+//#endregion
+export { useSelect };

package/es/components/tree-select/style/css.js

@@ -1,11 +1,5 @@
-import "vft/theme-style/base.css";
-import "vft/theme-style/vft-input.css";
-import "vft/theme-style/vft-tag.css";
-import "vft/theme-style/vft-scrollbar.css";
-import "vft/theme-style/vft-popper.css";
-import "vft/theme-style/vft-virtual-list.css";
-import "vft/theme-style/vft-select.css";
-import "vft/theme-style/vft-checkbox.css";
-import "vft/theme-style/vft-tree.css";
-import "vft/theme-style/vft-icon.css";
+import "../../base/style/css.js";
+import "../../icon/style/css.js";
+import "../../select/style/css.js";
+import "../../tree/style/css.js";
 import "vft/theme-style/vft-tree-select.css";

package/es/components/tree-select/style/index.js

@@ -1,11 +1,5 @@
-import "vft/theme-style/src/base.scss";
-import "vft/theme-style/src/input.scss";
-import "vft/theme-style/src/tag.scss";
-import "vft/theme-style/src/scrollbar.scss";
-import "vft/theme-style/src/popper.scss";
-import "vft/theme-style/src/virtual-list.scss";
-import "vft/theme-style/src/select.scss";
-import "vft/theme-style/src/checkbox.scss";
-import "vft/theme-style/src/tree.scss";
-import "vft/theme-style/src/icon.scss";
+import "../../base/style/index.js";
+import "../../icon/style/index.js";
+import "../../select/style/index.js";
+import "../../tree/style/index.js";
 import "vft/theme-style/src/tree-select.scss";

package/es/components/tree-select/tree-select-option.js

@@ -1,46 +1,46 @@
-import { defineComponent as n, inject as r, computed as i, h as o } from "vue";
-const c = n({
-  name: "TreeSelectOption",
-  props: {
-    value: {
-      type: [String, Number, Boolean, Object],
-      required: !0
-    },
-    label: {
-      type: [String, Number],
-      default: ""
-    },
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    visible: {
-      type: Boolean,
-      default: !0
-    }
-  },
-  setup(e, { slots: a }) {
-    const l = r("treeSelectModelValue", null), u = i(() => {
-      if (!l || l.value === void 0 || l.value === null)
-        return !1;
-      const t = l.value;
-      return Array.isArray(t) ? t.includes(e.value) : t === e.value;
-    });
-    return () => e.visible ? o(
-      "span",
-      {
-        class: [
-          "vft-tree-select-option",
-          {
-            "is-selected": u.value
-          }
-        ],
-        "data-value": e.value
-      },
-      a.default ? a.default() : e.label
-    ) : null;
-  }
+import { computed, defineComponent, h, inject } from "vue";
+//#region ../../packages/components/tree-select/tree-select-option.ts
+const component = defineComponent({
+	name: "TreeSelectOption",
+	props: {
+		value: {
+			type: [
+				String,
+				Number,
+				Boolean,
+				Object
+			],
+			required: true
+		},
+		label: {
+			type: [String, Number],
+			default: ""
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		visible: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(props, { slots }) {
+		const modelValue = inject("treeSelectModelValue", null);
+		const isSelected = computed(() => {
+			if (!modelValue || modelValue.value === void 0 || modelValue.value === null) return false;
+			const val = modelValue.value;
+			if (Array.isArray(val)) return val.includes(props.value);
+			return val === props.value;
+		});
+		return () => {
+			if (!props.visible) return null;
+			return h("span", {
+				class: ["vft-tree-select-option", { "is-selected": isSelected.value }],
+				"data-value": props.value
+			}, slots.default ? slots.default() : props.label);
+		};
+	}
 });
-export {
-  c as default
-};
+//#endregion
+export { component as default };

package/es/components/tree-select/tree-select.js

@@ -0,0 +1,5 @@
+import tree_select_vue_vue_type_script_lang_default from "./tree-select.vue_vue_type_script_lang.js";
+//#region ../../packages/components/tree-select/tree-select.vue
+var tree_select_default = tree_select_vue_vue_type_script_lang_default;
+//#endregion
+export { tree_select_default as default };

package/es/components/tree-select/tree-select.vue_vue_type_script_lang.js

@@ -0,0 +1,158 @@
+import { selectV2Props } from "../select/defaults.js";
+import { VftSelect } from "../select/index.js";
+import { VftTree } from "../tree/index.js";
+import { useSelect } from "./select.js";
+import { useTree } from "./tree.js";
+import { pick } from "lodash-es";
+import { computed, defineComponent, h, onMounted, provide, reactive, ref, toRef } from "vue";
+//#region ../../packages/components/tree-select/tree-select.vue?vue&type=script&lang.ts
+const treeProps = {
+	data: Array,
+	emptyText: String,
+	renderAfterExpand: {
+		type: Boolean,
+		default: true
+	},
+	nodeKey: String,
+	checkStrictly: Boolean,
+	defaultExpandAll: Boolean,
+	expandOnClickNode: {
+		type: Boolean,
+		default: true
+	},
+	checkOnClickNode: Boolean,
+	checkDescendants: Boolean,
+	autoExpandParent: {
+		type: Boolean,
+		default: true
+	},
+	defaultCheckedKeys: Array,
+	defaultExpandedKeys: Array,
+	currentNodeKey: [String, Number],
+	renderContent: Function,
+	showCheckbox: Boolean,
+	draggable: Boolean,
+	allowDrag: Function,
+	allowDrop: Function,
+	props: {
+		type: Object,
+		default: () => ({
+			children: "children",
+			label: "label",
+			disabled: "disabled"
+		})
+	},
+	lazy: Boolean,
+	highlightCurrent: Boolean,
+	load: Function,
+	filterNodeMethod: Function,
+	accordion: Boolean,
+	indent: {
+		type: Number,
+		default: 18
+	},
+	icon: [String, Object]
+};
+var tree_select_vue_vue_type_script_lang_default = defineComponent({
+	name: "VftTreeSelect",
+	inheritAttrs: false,
+	props: {
+		...selectV2Props,
+		...treeProps,
+		/**
+		* @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: Array,
+			default: () => []
+		},
+		/**
+		* @description Override options prop to make it optional for TreeSelect
+		* VftSelect requires options, but TreeSelect uses Tree component instead
+		*/
+		options: {
+			type: Array,
+			default: () => []
+		},
+		/**
+		* @description 下拉内容最大高度（px），超出出现滚动条
+		*/
+		dropdownMaxHeight: {
+			type: [Number, String],
+			default: 274
+		}
+	},
+	setup(props, context) {
+		const { expose } = context;
+		const select = ref();
+		const tree = ref();
+		const key = computed(() => props.nodeKey || props.valueKey || "value");
+		provide("treeSelectModelValue", toRef(props, "modelValue"));
+		const selectProps = useSelect(props, context, {
+			select,
+			tree,
+			key
+		});
+		const { cacheOptions: _, ...treeProps } = useTree(props, context, {
+			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: select.value?.selectedLabel ?? "",
+				treeRef: tree.value,
+				selectRef: select.value
+			});
+		});
+		return () => h(
+			VftSelect,
+			/**
+			* 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.
+			* 3. VftSelect requires `options` prop, but we use custom slots
+			* so we pass an empty array.
+			*/
+			reactive({
+				...selectProps,
+				ref: (ref) => select.value = ref
+			}),
+			{
+				default: () => null,
+				empty: () => h("div", { style: { display: "none" } }),
+				footer: () => h(VftTree, reactive({
+					...treeProps,
+					ref: (ref) => tree.value = ref
+				}))
+			}
+		);
+	}
+});
+//#endregion
+export { tree_select_vue_vue_type_script_lang_default as default };