@veltra/desktop 1.0.0

package/dist/components/multi-select/style2.css

@@ -0,0 +1,197 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-multi-select {
+  width: 100%;
+  line-height: 1;
+  box-shadow: inset 0 0 1px 1px var(--u-border-color);
+  transition: box-shadow 0.25s ease;
+  overflow: hidden;
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-multi-select--small {
+  min-height: var(--u-form-component-height-small);
+  border-radius: var(--u-radius-small);
+  padding: calc((var(--u-form-component-height-small) - var(--u-tag-small)) / 2) calc(var(--u-gap-small) / 2);
+}
+.u-multi-select--small .u-multi-select__clear {
+  font-size: var(--u-font-size-main-small);
+}
+.u-multi-select--small .u-multi-select__tags {
+  gap: calc((var(--u-form-component-height-small) - var(--u-tag-small)) / 2);
+}
+.u-multi-select--default {
+  min-height: var(--u-form-component-height-default);
+  border-radius: var(--u-radius-default);
+  padding: calc((var(--u-form-component-height-default) - var(--u-tag-default)) / 2) calc(var(--u-gap-default) / 2);
+}
+.u-multi-select--default .u-multi-select__clear {
+  font-size: var(--u-font-size-main-default);
+}
+.u-multi-select--default .u-multi-select__tags {
+  gap: calc((var(--u-form-component-height-default) - var(--u-tag-default)) / 2);
+}
+.u-multi-select--large {
+  min-height: var(--u-form-component-height-large);
+  border-radius: var(--u-radius-large);
+  padding: calc((var(--u-form-component-height-large) - var(--u-tag-large)) / 2) calc(var(--u-gap-large) / 2);
+}
+.u-multi-select--large .u-multi-select__clear {
+  font-size: var(--u-font-size-main-large);
+}
+.u-multi-select--large .u-multi-select__tags {
+  gap: calc((var(--u-form-component-height-large) - var(--u-tag-large)) / 2);
+}
+.u-multi-select:hover {
+  box-shadow: inset 0 0 1px 1px var(--u-color-primary);
+}
+.u-multi-select__ripple {
+  background-color: var(--u-color-primary-light-7);
+  opacity: 0.5;
+}
+.u-multi-select__options {
+  max-height: 180px;
+}
+.u-multi-select__options-wrap.is-virtual {
+  position: relative;
+}
+.u-multi-select__options-wrap.is-virtual .u-multi-select__option {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.u-multi-select__placeholder {
+  flex-shrink: 0;
+  flex-grow: 1;
+  user-select: none;
+  color: var(--u-text-color-placeholder);
+}
+.u-multi-select__clear {
+  cursor: pointer;
+}
+.u-multi-select__arrow, .u-multi-select__clear {
+  min-width: 20px;
+  color: var(--u-text-color-main);
+}
+.u-multi-select__tags {
+  flex-grow: 1;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.u-multi-select__readonly-tags {
+  padding-left: 0;
+  padding-right: 0;
+}
+.u-multi-select__readonly-tags .u-tag {
+  border: 1px dashed var(--u-text-color-main);
+}
+.u-multi-select__option {
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-multi-select__option:hover {
+  background-color: var(--u-bg-color-hover);
+}
+.u-multi-select__content-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-multi-select__panel--small .u-multi-select__content-filter {
+  padding: calc(var(--u-gap-small) / 2) var(--u-gap-small);
+}
+.u-multi-select__panel--small .u-multi-select__content-header {
+  padding: calc(var(--u-gap-small) / 2) calc(var(--u-gap-small) * 2);
+  border-bottom: var(--u-border);
+}
+.u-multi-select__panel--small .u-multi-select__options {
+  padding: calc(var(--u-gap-small) / 2) var(--u-gap-small);
+}
+.u-multi-select__panel--small .u-multi-select__option {
+  padding: 0 var(--u-gap-small);
+  border-radius: var(--u-radius-small);
+  height: var(--u-form-component-height-small);
+  line-height: var(--u-form-component-height-small);
+}
+.u-multi-select__panel--small .u-multi-select__checkbox {
+  margin-right: var(--u-gap-small);
+}
+.u-multi-select__panel--default .u-multi-select__content-filter {
+  padding: calc(var(--u-gap-default) / 2) var(--u-gap-default);
+}
+.u-multi-select__panel--default .u-multi-select__content-header {
+  padding: calc(var(--u-gap-default) / 2) calc(var(--u-gap-default) * 2);
+  border-bottom: var(--u-border);
+}
+.u-multi-select__panel--default .u-multi-select__options {
+  padding: calc(var(--u-gap-default) / 2) var(--u-gap-default);
+}
+.u-multi-select__panel--default .u-multi-select__option {
+  padding: 0 var(--u-gap-default);
+  border-radius: var(--u-radius-default);
+  height: var(--u-form-component-height-default);
+  line-height: var(--u-form-component-height-default);
+}
+.u-multi-select__panel--default .u-multi-select__checkbox {
+  margin-right: var(--u-gap-default);
+}
+.u-multi-select__panel--large .u-multi-select__content-filter {
+  padding: calc(var(--u-gap-large) / 2) var(--u-gap-large);
+}
+.u-multi-select__panel--large .u-multi-select__content-header {
+  padding: calc(var(--u-gap-large) / 2) calc(var(--u-gap-large) * 2);
+  border-bottom: var(--u-border);
+}
+.u-multi-select__panel--large .u-multi-select__options {
+  padding: calc(var(--u-gap-large) / 2) var(--u-gap-large);
+}
+.u-multi-select__panel--large .u-multi-select__option {
+  padding: 0 var(--u-gap-large);
+  border-radius: var(--u-radius-large);
+  height: var(--u-form-component-height-large);
+  line-height: var(--u-form-component-height-large);
+}
+.u-multi-select__panel--large .u-multi-select__checkbox {
+  margin-right: var(--u-gap-large);
+}
+.u-multi-select.is-disabled {
+  background-color: var(--u-color-disabled);
+  box-shadow: inset 0 0 1px 1px var(--u-border-color);
+  cursor: not-allowed;
+}
+.u-multi-select.is-disabled .u-multi-select__arrow {
+  color: var(--u-text-color-disabled);
+}
+.u-multi-select.is-disabled .u-tag {
+  border: var(--u-border);
+}
+.u-multi-select__empty {
+  text-align: center;
+  padding: var(--u-gap-default) 0;
+}

package/dist/components/multi-tree-select/index.d.ts

@@ -0,0 +1 @@
+import { _default } from "./multi-tree-select.vue.js";

package/dist/components/multi-tree-select/multi-tree-select.js

@@ -0,0 +1,332 @@
+import _sfc_main$1 from "../icon/icon.js";
+import _sfc_main$2 from "../button/button.js";
+import _sfc_main$3 from "../dropdown/dropdown.js";
+import input_default from "../input/input.js";
+import _sfc_main$4 from "../checkbox/checkbox.js";
+import _sfc_main$5 from "../tag/tag.js";
+import _sfc_main$6 from "../tree/tree.js";
+import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, openBlock, renderList, shallowRef, toDisplayString, unref, useModel, useSlots, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { dfs, o } from "@cat-kit/core";
+import { FORM_EMPTY_CONTENT, bem } from "@veltra/utils";
+import { useFormComponent, useFormFallbackProps } from "@veltra/compositions";
+import { ArrowDown, Close, Search } from "@veltra/icons/normal";
+//#region src/components/multi-tree-select/multi-tree-select.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "MultiTreeSelect",
+	__name: "multi-tree-select",
+	props: /* @__PURE__ */ mergeModels({
+		modelValue: {},
+		placeholder: { default: "请选择" },
+		clearable: {
+			type: Boolean,
+			default: true
+		},
+		filterable: {
+			type: Boolean,
+			default: false
+		},
+		visibilityLimit: { default: 3 },
+		minWidth: { default: "280px" },
+		width: {},
+		contentStyle: {},
+		contentClass: {},
+		tips: {},
+		span: {},
+		label: {},
+		field: {},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: void 0
+		},
+		size: {},
+		expandAll: {
+			type: Boolean,
+			default: false
+		},
+		expandOnClickNode: { type: Boolean },
+		labelKey: { default: "label" },
+		valueKey: { default: "value" },
+		childrenKey: {},
+		data: {},
+		disabledNode: {},
+		checkStrictly: { type: Boolean },
+		slots: {},
+		scrollToView: { type: Boolean }
+	}, {
+		"modelValue": { default: () => [] },
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels([
+		"clear",
+		"update:modelValue",
+		"change"
+	], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const cls = bem("multi-tree-select");
+		const props = __props;
+		const treeProps = computed(() => {
+			return o(props).omit([
+				"tips",
+				"field",
+				"placeholder",
+				"disabled",
+				"label",
+				"readonly",
+				"modelValue",
+				"contentClass",
+				"contentStyle",
+				"minWidth",
+				"width"
+			]);
+		});
+		const emit = __emit;
+		const slots = useSlots();
+		/**过滤 */
+		const qs = shallowRef("");
+		watch(qs, (qs) => {
+			treeRef.value?.filter(qs);
+		});
+		const model = useModel(__props, "modelValue");
+		const hovered = shallowRef(false);
+		const tags = shallowRef([]);
+		const { formProps } = useFormComponent();
+		const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props]);
+		const showClear = computed(() => {
+			return props.clearable && model.value?.length && hovered.value && !disabled.value;
+		});
+		const treeRef = shallowRef();
+		const dropdownRef = shallowRef();
+		let changedByEvent = false;
+		function markEvent() {
+			changedByEvent = true;
+			nextTick(() => {
+				changedByEvent = false;
+			});
+		}
+		/**是否全选 */
+		const allChecked = computed(() => {
+			return model.value?.length === treeRef.value?.forest.size;
+		});
+		/**部分 */
+		const indeterminate = computed(() => {
+			return model.value.length > 0 && !allChecked.value;
+		});
+		/** 全选*/
+		const handleCheckAll = (checked) => {
+			treeRef.value?.checkAll(checked);
+			dropdownRef.value?.updateDropdown();
+		};
+		/**选中 */
+		const handleCheck = (checked, checkedData) => {
+			markEvent();
+			tags.value = checkedData;
+			emit("change", checkedData);
+			dropdownRef.value?.updateDropdown();
+		};
+		/**删除 */
+		const handleRemove = (index) => {
+			markEvent();
+			tags.value = tags.value.filter((_, i) => i !== index);
+			model.value = model.value.filter((_, i) => i !== index);
+			emit("change", tags.value);
+		};
+		/**清空 */
+		const handleClear = () => {
+			markEvent();
+			tags.value = [];
+			model.value = [];
+			emit("clear");
+		};
+		const keyDicts = shallowRef(/* @__PURE__ */ new Map());
+		watch(() => props.data, (data) => {
+			if (!data?.length) keyDicts.value = /* @__PURE__ */ new Map();
+			else {
+				const newDict = /* @__PURE__ */ new Map();
+				data.forEach((item) => {
+					dfs(item, (v) => {
+						newDict.set(v[props.valueKey], v);
+					}, props.childrenKey);
+				});
+				keyDicts.value = newDict;
+			}
+		}, { immediate: true });
+		watch([keyDicts, model], ([keyDicts, model]) => {
+			if (changedByEvent) return;
+			if (!keyDicts.size || !model?.length) {
+				tags.value = [];
+				return;
+			}
+			tags.value = model.filter((v) => keyDicts.has(v)).map((v) => keyDicts.get(v));
+		}, { immediate: true });
+		const allExpanded = shallowRef(props.expandAll);
+		function handleToggleExpandAll() {
+			allExpanded.value = !allExpanded.value;
+			allExpanded.value ? treeRef.value?.expandAll() : treeRef.value?.collapseAll();
+		}
+		watch(treeRef, (treeRef) => {
+			if (!treeRef) allExpanded.value = props.expandAll;
+		});
+		const limit = () => {
+			let { visibilityLimit } = props;
+			if (visibilityLimit < 0) visibilityLimit = 0;
+			if (disabled.value || readonly.value) visibilityLimit = model.value?.length ?? 0;
+			return visibilityLimit;
+		};
+		const visibleTags = computed(() => {
+			if (tags.value.length > limit()) return tags.value.slice(0, limit());
+			return tags.value;
+		});
+		const hiddenCount = computed(() => {
+			if (tags.value.length > limit()) return tags.value.length - limit();
+			return 0;
+		});
+		const handleDropdownVisible = (visible) => {
+			if (!visible) qs.value = "";
+		};
+		return (_ctx, _cache) => {
+			return !unref(readonly) ? (openBlock(), createBlock(unref(_sfc_main$3), {
+				key: 0,
+				class: normalizeClass([
+					unref(cls).b,
+					unref(cls).m(unref(size)),
+					unref(bem).is("disabled", unref(disabled))
+				]),
+				trigger: "click",
+				"content-class": [
+					unref(cls).e("panel"),
+					unref(cls).em("panel", unref(size)),
+					__props.contentClass
+				],
+				"content-style": __props.contentStyle,
+				disabled: unref(disabled),
+				onMouseenter: _cache[2] || (_cache[2] = ($event) => hovered.value = true),
+				onMouseleave: _cache[3] || (_cache[3] = ($event) => hovered.value = false),
+				ref_key: "dropdownRef",
+				ref: dropdownRef,
+				"min-width": __props.minWidth,
+				width: __props.width,
+				"onUpdate:visible": handleDropdownVisible
+			}, {
+				trigger: withCtx(() => [
+					createCommentVNode(" 默认展示 "),
+					withDirectives(createElementVNode("span", { class: normalizeClass(unref(cls).e("placeholder")) }, toDisplayString(__props.placeholder), 3), [[vShow, !tags.value.length]]),
+					createCommentVNode(" 选择的数据项 "),
+					tags.value.length ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(unref(cls).e("tags"))
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleTags.value, (tag, index) => {
+						return openBlock(), createBlock(unref(_sfc_main$5), {
+							key: tag[__props.valueKey],
+							closable: !unref(disabled),
+							onClose: ($event) => handleRemove(index)
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(tag[__props.labelKey]), 1)]),
+							_: 2
+						}, 1032, ["closable", "onClose"]);
+					}), 128)), hiddenCount.value > 0 ? (openBlock(), createBlock(unref(_sfc_main$5), { key: 0 }, {
+						default: withCtx(() => [createTextVNode("+" + toDisplayString(hiddenCount.value), 1)]),
+						_: 1
+					})) : createCommentVNode("v-if", true)], 2)) : createCommentVNode("v-if", true),
+					createCommentVNode(" 清空 icon "),
+					createVNode(Transition, {
+						name: "zoom-in",
+						mode: "out-in"
+					}, {
+						default: withCtx(() => [showClear.value ? (openBlock(), createBlock(unref(_sfc_main$1), {
+							key: 0,
+							class: normalizeClass(unref(cls).e("clear")),
+							onClick: withModifiers(handleClear, ["stop"])
+						}, {
+							default: withCtx(() => [createVNode(unref(Close))]),
+							_: 1
+						}, 8, ["class"])) : !unref(readonly) ? (openBlock(), createBlock(unref(_sfc_main$1), {
+							key: 1,
+							class: normalizeClass(unref(cls).e(`arrow`))
+						}, {
+							default: withCtx(() => [createVNode(unref(ArrowDown))]),
+							_: 1
+						}, 8, ["class"])) : createCommentVNode("v-if", true)]),
+						_: 1
+					})
+				]),
+				content: withCtx(() => [
+					createElementVNode("div", { class: normalizeClass([unref(cls).e("content-header"), unref(cls).m(unref(size))]) }, [
+						createCommentVNode(" 全选 "),
+						createVNode(unref(_sfc_main$4), {
+							"model-value": allChecked.value,
+							indeterminate: indeterminate.value,
+							"onUpdate:modelValue": handleCheckAll
+						}, {
+							default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode(" 全选 ", -1)])]),
+							_: 1
+						}, 8, ["model-value", "indeterminate"]),
+						createVNode(unref(_sfc_main$2), {
+							size: "small",
+							text: "",
+							type: "primary",
+							onClick: handleToggleExpandAll
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(allExpanded.value ? "收起全部" : "展开全部"), 1)]),
+							_: 1
+						})
+					], 2),
+					createCommentVNode(" 过滤器 "),
+					__props.filterable ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass([unref(cls).e("content-filter"), unref(cls).m(unref(size))])
+					}, [createVNode(unref(input_default), {
+						placeholder: "输入关键字进行过滤",
+						modelValue: qs.value,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => qs.value = $event)
+					}, {
+						suffix: withCtx(() => [createVNode(unref(_sfc_main$1), null, {
+							default: withCtx(() => [createVNode(unref(Search))]),
+							_: 1
+						})]),
+						_: 1
+					}, 8, ["modelValue"])], 2)) : createCommentVNode("v-if", true),
+					createCommentVNode(" 菜单列表 "),
+					createVNode(unref(_sfc_main$6), mergeProps(treeProps.value, {
+						checked: model.value,
+						"onUpdate:checked": [_cache[1] || (_cache[1] = ($event) => model.value = $event), handleCheck],
+						ref_key: "treeRef",
+						ref: treeRef,
+						class: unref(cls).e("content-tree"),
+						checkable: "",
+						data: __props.data,
+						slots,
+						"scroll-to-view": ""
+					}), null, 16, [
+						"checked",
+						"class",
+						"data"
+					])
+				]),
+				_: 1
+			}, 8, [
+				"class",
+				"content-class",
+				"content-style",
+				"disabled",
+				"min-width",
+				"width"
+			])) : model.value.length ? (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass([unref(cls).m(unref(size)), unref(cls).e("readonly-tags")])
+			}, [createElementVNode("div", { class: normalizeClass(unref(cls).e("tags")) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(tags.value, (option) => {
+				return openBlock(), createBlock(unref(_sfc_main$5), { key: option[__props.valueKey] }, {
+					default: withCtx(() => [createTextVNode(toDisplayString(option[__props.labelKey]), 1)]),
+					_: 2
+				}, 1024);
+			}), 128))], 2)], 2)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(unref(FORM_EMPTY_CONTENT)), 1)], 64));
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=multi-tree-select.js.map

package/dist/components/multi-tree-select/multi-tree-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-tree-select.js","names":[],"sources":["../../../src/components/multi-tree-select/multi-tree-select.vue"],"sourcesContent":["<template>\n  <u-dropdown\n    v-if=\"!readonly\"\n    :class=\"[cls.b, cls.m(size), bem.is('disabled', disabled)]\"\n    trigger=\"click\"\n    :content-class=\"[cls.e('panel'), cls.em('panel', size), contentClass]\"\n    :content-style=\"contentStyle\"\n    :disabled=\"disabled\"\n    @mouseenter=\"hovered = true\"\n    @mouseleave=\"hovered = false\"\n    ref=\"dropdownRef\"\n    :min-width=\"minWidth\"\n    :width=\"width\"\n    @update:visible=\"handleDropdownVisible\"\n  >\n    <template #trigger>\n      <!-- 默认展示 -->\n      <span :class=\"cls.e('placeholder')\" v-show=\"!tags.length\">\n        {{ placeholder }}\n      </span>\n\n      <!-- 选择的数据项 -->\n      <div v-if=\"tags.length\" :class=\"cls.e('tags')\">\n        <u-tag\n          v-for=\"(tag, index) in visibleTags\"\n          :key=\"tag[valueKey]\"\n          :closable=\"!disabled\"\n          @close=\"handleRemove(index)\"\n        >\n          {{ tag[labelKey] }}\n        </u-tag>\n        <u-tag v-if=\"hiddenCount > 0\">+{{ hiddenCount }}</u-tag>\n      </div>\n      <!-- 清空 icon -->\n      <transition name=\"zoom-in\" mode=\"out-in\">\n        <u-icon v-if=\"showClear\" :class=\"cls.e('clear')\" @click.stop=\"handleClear\">\n          <Close />\n        </u-icon>\n\n        <!-- 下拉 icon -->\n        <u-icon :class=\"cls.e(`arrow`)\" v-else-if=\"!readonly\">\n          <ArrowDown />\n        </u-icon>\n      </transition>\n    </template>\n    <template #content>\n      <div :class=\"[cls.e('content-header'), cls.m(size)]\">\n        <!-- 全选 -->\n        <u-checkbox\n          :model-value=\"allChecked\"\n          :indeterminate=\"indeterminate\"\n          @update:model-value=\"handleCheckAll\"\n        >\n          全选\n        </u-checkbox>\n\n        <u-button size=\"small\" text type=\"primary\" @click=\"handleToggleExpandAll\">\n          {{ allExpanded ? '收起全部' : '展开全部' }}\n        </u-button>\n      </div>\n      <!-- 过滤器 -->\n      <div v-if=\"filterable\" :class=\"[cls.e('content-filter'), cls.m(size)]\">\n        <u-input placeholder=\"输入关键字进行过滤\" v-model=\"qs\">\n          <template #suffix>\n            <u-icon><Search /></u-icon>\n          </template>\n        </u-input>\n      </div>\n      <!-- 菜单列表 -->\n      <u-tree\n        v-bind=\"treeProps\"\n        v-model:checked=\"model\"\n        @update:checked=\"handleCheck\"\n        ref=\"treeRef\"\n        :class=\"cls.e('content-tree')\"\n        checkable\n        :data=\"data\"\n        :slots=\"slots\"\n        scroll-to-view\n      ></u-tree>\n    </template>\n  </u-dropdown>\n\n  <div v-else-if=\"model.length\" :class=\"[cls.m(size), cls.e('readonly-tags')]\">\n    <div :class=\"cls.e('tags')\">\n      <u-tag v-for=\"option of tags\" :key=\"option[valueKey]\">\n        {{ option[labelKey] }}\n      </u-tag>\n    </div>\n  </div>\n\n  <template v-else>\n    {{ FORM_EMPTY_CONTENT }}\n  </template>\n</template>\n\n<script lang=\"ts\" setup>\nimport { dfs, o } from '@cat-kit/core'\nimport { useFormComponent, useFormFallbackProps } from '@veltra/compositions'\nimport { ArrowDown, Close, Search } from '@veltra/icons/normal'\nimport { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'\nimport { computed, nextTick, shallowRef, watch } from 'vue'\n\nimport type { MultiTreeSelectProps, MultiTreeSelectEmits, TreeExposed } from '../../types'\nimport type { DropdownExposed } from '../../types'\nimport { UButton } from '../button'\nimport { UCheckbox } from '../checkbox'\nimport { UDropdown } from '../dropdown'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\nimport { UTag } from '../tag'\nimport { UTree } from '../tree'\nimport type { TreeSlotsScope } from '../tree/di'\n\ndefineOptions({ name: 'MultiTreeSelect' })\n\nconst cls = bem('multi-tree-select')\n\nconst props = withDefaults(defineProps<MultiTreeSelectProps>(), {\n  labelKey: 'label',\n  valueKey: 'value',\n  placeholder: '请选择',\n  expandAll: false,\n  clearable: true,\n  disabled: undefined,\n  readonly: undefined,\n  filterable: false,\n  visibilityLimit: 3,\n  minWidth: '280px'\n})\n\nconst treeProps = computed(() => {\n  return o(props as Record<string, any>).omit([\n    'tips',\n    'field',\n    'placeholder',\n    'disabled',\n    'label',\n    'readonly',\n    'modelValue',\n    'contentClass',\n    'contentStyle',\n    'minWidth',\n    'width'\n  ])\n})\n\nconst emit = defineEmits<MultiTreeSelectEmits>()\n\nconst slots = defineSlots<{ default?: (props: TreeSlotsScope) => any }>()\n\n/**过滤 */\nconst qs = shallowRef('')\nwatch(qs, (qs) => {\n  treeRef.value?.filter(qs)\n})\n\nconst model = defineModel<(string | number)[]>({ default: () => [] })\n\nconst hovered = shallowRef(false)\n\nconst tags = shallowRef<Record<string, any>[]>([])\n\nconst { formProps } = useFormComponent()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])\n\nconst showClear = computed(() => {\n  return props.clearable && model.value?.length && hovered.value && !disabled.value\n})\n\nconst treeRef = shallowRef<TreeExposed>()\n\nconst dropdownRef = shallowRef<DropdownExposed>()\n\nlet changedByEvent = false\n\nfunction markEvent() {\n  changedByEvent = true\n  nextTick(() => {\n    changedByEvent = false\n  })\n}\n\n/**是否全选 */\nconst allChecked = computed(() => {\n  return model.value?.length === treeRef.value?.forest.size\n})\n\n/**部分 */\nconst indeterminate = computed(() => {\n  return model.value.length! > 0 && !allChecked.value\n})\n\n/** 全选*/\nconst handleCheckAll = (checked: boolean) => {\n  treeRef.value?.checkAll(checked)\n\n  dropdownRef.value?.updateDropdown()\n}\n\n/**选中 */\nconst handleCheck = (checked: (string | number)[], checkedData: Record<string, any>[]) => {\n  markEvent()\n  tags.value = checkedData\n  emit('change', checkedData!)\n\n  dropdownRef.value?.updateDropdown()\n}\n\n/**删除 */\nconst handleRemove = (index: number) => {\n  markEvent()\n  tags.value = tags.value.filter((_, i) => i !== index)\n  model.value = model.value.filter((_, i) => i !== index)\n  emit('change', tags.value)\n}\n\n/**清空 */\nconst handleClear = () => {\n  markEvent()\n  tags.value = []\n  model.value = []\n  emit('clear')\n}\n\nconst keyDicts = shallowRef(new Map<string | number, Record<string, any>>())\n\nwatch(\n  () => props.data,\n  (data) => {\n    if (!data?.length) {\n      keyDicts.value = new Map()\n    } else {\n      const newDict = new Map()\n      data.forEach((item) => {\n        dfs(\n          item,\n          (v) => {\n            newDict.set(v[props.valueKey], v)\n          },\n          props.childrenKey\n        )\n      })\n      keyDicts.value = newDict\n    }\n  },\n  { immediate: true }\n)\n\nwatch(\n  [keyDicts, model],\n  ([keyDicts, model]) => {\n    if (changedByEvent) return\n\n    if (!keyDicts.size || !model?.length) {\n      tags.value = []\n      return\n    }\n\n    tags.value = model.filter((v) => keyDicts.has(v)).map((v) => keyDicts.get(v)!)\n  },\n  { immediate: true }\n)\n\nconst allExpanded = shallowRef(props.expandAll)\nfunction handleToggleExpandAll() {\n  allExpanded.value = !allExpanded.value\n  allExpanded.value ? treeRef.value?.expandAll() : treeRef.value?.collapseAll()\n}\n\nwatch(treeRef, (treeRef) => {\n  if (!treeRef) {\n    allExpanded.value = props.expandAll\n  }\n})\n\nconst limit = () => {\n  let { visibilityLimit } = props\n\n  if (visibilityLimit < 0) {\n    visibilityLimit = 0\n  }\n  if (disabled.value || readonly.value) {\n    visibilityLimit = model.value?.length ?? 0\n  }\n  return visibilityLimit\n}\n\nconst visibleTags = computed(() => {\n  if (tags.value.length > limit()) {\n    return tags.value.slice(0, limit())\n  }\n  return tags.value\n})\n\nconst hiddenCount = computed(() => {\n  if (tags.value.length > limit()) {\n    return tags.value.length - limit()\n  }\n  return 0\n})\n\nconst handleDropdownVisible = (visible: boolean) => {\n  if (!visible) {\n    qs.value = ''\n  }\n}\n</script>\n"],"mappings":"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"}

package/dist/components/multi-tree-select/multi-tree-select.vue.d.ts

@@ -0,0 +1,45 @@
+import { MultiTreeSelectProps } from "../../types/multi-tree-select.js";
+import { TreeSlotsScope } from "../tree/di.js";
+import * as _$vue from "vue";
+
+//#region src/components/multi-tree-select/multi-tree-select.vue.d.ts
+type __VLS_Props = MultiTreeSelectProps;
+type __VLS_Slots = {
+  default?: (props: TreeSlotsScope) => any;
+};
+type __VLS_ModelProps = {
+  modelValue?: (string | number)[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:modelValue": (value: (string | number)[]) => any;
+} & {
+  clear: () => any;
+  "update:modelValue": (value: any[]) => any;
+  change: (checked: Record<string, any>[]) => any;
+}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  onClear?: (() => any) | undefined;
+  "onUpdate:modelValue"?: ((value: any[]) => any) | undefined;
+  onChange?: ((checked: Record<string, any>[]) => any) | undefined;
+}>, {
+  readonly: boolean;
+  disabled: boolean;
+  placeholder: string;
+  clearable: boolean;
+  minWidth: string;
+  labelKey: string;
+  valueKey: string;
+  expandAll: boolean;
+  filterable: boolean;
+  visibilityLimit: number;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };
+//# sourceMappingURL=multi-tree-select.vue.d.ts.map

package/dist/components/multi-tree-select/style.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/components/multi-tree-select/style.js

@@ -0,0 +1,2 @@
+import "./style2.css";
+import "@veltra/styles/anime/zoom-in.scss";