@veltra/desktop 1.0.8 → 1.0.10

package/dist/components/tabs/tabs-horizontal.vue.d.ts

@@ -0,0 +1,40 @@
+import { TabItem, TabsHorizontalProps } from "../../types/tabs.js";
+import * as _$vue from "vue";
+
+//#region src/components/tabs/tabs-horizontal.vue.d.ts
+type __VLS_Props = TabsHorizontalProps;
+type __VLS_Slots = {
+  [key: `name:${string}`]: (props: {
+    item: TabItem;
+  }) => any;
+};
+type __VLS_ModelProps = {
+  modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:modelValue": (value: string | undefined) => any;
+} & {
+  "update:modelValue": (value: string) => any;
+  close: (item: TabItem, index: number) => any;
+  click: (item: TabItem, index: number) => any;
+}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  onClose?: ((item: TabItem, index: number) => any) | undefined;
+  onClick?: ((item: TabItem, index: number) => any) | undefined;
+}>, {
+  block: boolean;
+  closable: boolean;
+  position: "top" | "bottom";
+  rounded: boolean;
+}, {}, {}, {}, 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=tabs-horizontal.vue.d.ts.map

package/dist/components/tabs/tabs-vertical.js

@@ -0,0 +1,89 @@
+import _sfc_main$1 from "../icon/icon.js";
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, renderSlot, toDisplayString, unref, useModel, withCtx, withModifiers } from "vue";
+import { bem } from "@veltra/utils";
+import { useFallbackProps } from "@veltra/compositions";
+import { Close } from "@veltra/icons/normal";
+//#region src/components/tabs/tabs-vertical.vue
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = ["aria-label", "onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "TabsVertical",
+	__name: "tabs-vertical",
+	props: /* @__PURE__ */ mergeModels({
+		size: {},
+		modelValue: {},
+		items: {},
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		rounded: {
+			type: Boolean,
+			default: false
+		},
+		position: { default: "left" }
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels([
+		"update:modelValue",
+		"click",
+		"close"
+	], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { size } = useFallbackProps([props], { size: "default" });
+		const cls = bem("tabs-bar");
+		const model = useModel(__props, "modelValue");
+		const isItemClosable = (item) => {
+			if (item.disabled) return false;
+			return item.closable ?? props.closable;
+		};
+		const handleClick = (item, index) => {
+			if (item.disabled) return;
+			model.value = item.key;
+			emit("click", item, index);
+		};
+		const handleClose = (item, index) => {
+			if (item.disabled) return;
+			emit("close", item, index);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass([
+				unref(cls).b,
+				unref(cls).m("vertical"),
+				unref(cls).m(__props.position),
+				unref(cls).m(unref(size)),
+				unref(bem).is("rounded", __props.rounded)
+			]) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+				return openBlock(), createElementBlock("button", {
+					type: "button",
+					role: "tab",
+					key: item.key,
+					class: normalizeClass([
+						unref(cls).e("item"),
+						unref(bem).is("active", model.value === item.key),
+						unref(bem).is("disabled", item.disabled === true)
+					]),
+					onClick: withModifiers(($event) => handleClick(item, index), ["stop"])
+				}, [renderSlot(_ctx.$slots, `name:${item.key}`, { item }, () => [createElementVNode("span", { class: normalizeClass(unref(cls).e("item-label")) }, toDisplayString(item.name ?? item.key), 3)]), isItemClosable(item) ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					role: "button",
+					tabindex: "0",
+					class: normalizeClass(unref(cls).e("close")),
+					"aria-label": `close ${item.name ?? item.key}`,
+					onClick: withModifiers(($event) => handleClose(item, index), ["stop"])
+				}, [createVNode(unref(_sfc_main$1), null, {
+					default: withCtx(() => [createVNode(unref(Close))]),
+					_: 1
+				})], 10, _hoisted_2)) : createCommentVNode("v-if", true)], 10, _hoisted_1);
+			}), 128))], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=tabs-vertical.js.map

package/dist/components/tabs/tabs-vertical.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-vertical.js","names":[],"sources":["../../../src/components/tabs/tabs-vertical.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[cls.b, cls.m('vertical'), cls.m(position), cls.m(size), bem.is('rounded', rounded)]\"\n  >\n    <button\n      type=\"button\"\n      role=\"tab\"\n      v-for=\"(item, index) in items\"\n      :key=\"item.key\"\n      :class=\"[\n        cls.e('item'),\n        bem.is('active', model === item.key),\n        bem.is('disabled', item.disabled === true)\n      ]\"\n      @click.stop=\"handleClick(item, index)\"\n    >\n      <slot :name=\"`name:${item.key}`\" :item=\"item\">\n        <span :class=\"cls.e('item-label')\">{{ item.name ?? item.key }}</span>\n      </slot>\n      <span\n        v-if=\"isItemClosable(item)\"\n        role=\"button\"\n        tabindex=\"0\"\n        :class=\"cls.e('close')\"\n        :aria-label=\"`close ${item.name ?? item.key}`\"\n        @click.stop=\"handleClose(item, index)\"\n      >\n        <u-icon>\n          <Close />\n        </u-icon>\n      </span>\n    </button>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFallbackProps } from '@veltra/compositions'\nimport { Close } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\n\nimport type { ComponentSize, TabItem, TabsVerticalEmits, TabsVerticalProps } from '../../types'\nimport { UIcon } from '../icon'\n\ndefineOptions({ name: 'TabsVertical' })\n\nconst props = withDefaults(defineProps<TabsVerticalProps>(), {\n  position: 'left',\n  closable: false,\n  rounded: false\n})\n\nconst emit = defineEmits<TabsVerticalEmits>()\n\nconst { size } = useFallbackProps([props], {\n  size: 'default' as ComponentSize\n})\n\nconst cls = bem('tabs-bar')\n\nconst model = defineModel<string>()\n\nconst isItemClosable = (item: TabItem) => {\n  if (item.disabled) return false\n  return item.closable ?? props.closable\n}\n\nconst handleClick = (item: TabItem, index: number) => {\n  if (item.disabled) return\n  model.value = item.key\n  emit('click', item, index)\n}\n\nconst handleClose = (item: TabItem, index: number) => {\n  if (item.disabled) return\n  emit('close', item, index)\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAEb,MAAM,EAAE,SAAS,iBAAiB,CAAC,MAAM,EAAE,EACzC,MAAM,WACP,CAAA;EAED,MAAM,MAAM,IAAI,WAAU;EAE1B,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAElC,MAAM,kBAAkB,SAAkB;AACxC,OAAI,KAAK,SAAU,QAAO;AAC1B,UAAO,KAAK,YAAY,MAAM;;EAGhC,MAAM,eAAe,MAAe,UAAkB;AACpD,OAAI,KAAK,SAAU;AACnB,SAAM,QAAQ,KAAK;AACnB,QAAK,SAAS,MAAM,MAAK;;EAG3B,MAAM,eAAe,MAAe,UAAkB;AACpD,OAAI,KAAK,SAAU;AACnB,QAAK,SAAS,MAAM,MAAK;;;uBAzEzB,mBA+BM,OAAA,EA9BH,OAAK,eAAA;IAAG,MAAA,IAAG,CAAC;IAAG,MAAA,IAAG,CAAC,EAAC,WAAA;IAAc,MAAA,IAAG,CAAC,EAAE,QAAA,SAAQ;IAAG,MAAA,IAAG,CAAC,EAAE,MAAA,KAAI,CAAA;IAAG,MAAA,IAAG,CAAC,GAAE,WAAY,QAAA,QAAO;IAAA,CAAA,EAAA,EAAA,EAAA,UAAA,KAAA,EAE1F,mBA2BS,UAAA,MAAA,WAxBiB,QAAA,QAAhB,MAAM,UAAK;wBAHrB,mBA2BS,UAAA;KA1BP,MAAK;KACL,MAAK;KAEJ,KAAK,KAAK;KACV,OAAK,eAAA;MAAY,MAAA,IAAG,CAAC,EAAC,OAAA;MAAkB,MAAA,IAAG,CAAC,GAAE,UAAW,MAAA,UAAU,KAAK,IAAG;MAAW,MAAA,IAAG,CAAC,GAAE,YAAa,KAAK,aAAQ,KAAA;;KAKtH,SAAK,eAAA,WAAO,YAAY,MAAM,MAAK,EAAA,CAAA,OAAA,CAAA;QAEpC,WAEO,KAAA,QAAA,QAFc,KAAK,OAAG,EAAW,MAAI,QAErC,CADL,mBAAqE,QAAA,EAA9D,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,aAAA,CAAA,EAAA,EAAA,gBAAmB,KAAK,QAAQ,KAAK,IAAG,EAAA,EAAA,CAAA,CAAA,EAGrD,eAAe,KAAI,IAAA,WAAA,EAD3B,mBAWO,QAAA;;KATL,MAAK;KACL,UAAS;KACR,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA;KACZ,cAAU,SAAW,KAAK,QAAQ,KAAK;KACvC,SAAK,eAAA,WAAO,YAAY,MAAM,MAAK,EAAA,CAAA,OAAA,CAAA;QAEpC,YAES,MAAA,YAAA,EAAA,MAAA;4BADE,CAAT,YAAS,MAAA,MAAA,CAAA,CAAA,CAAA"}

package/dist/components/tabs/tabs-vertical.vue.d.ts

@@ -0,0 +1,38 @@
+import { TabItem, TabsVerticalProps } from "../../types/tabs.js";
+import * as _$vue from "vue";
+
+//#region src/components/tabs/tabs-vertical.vue.d.ts
+type __VLS_Props = TabsVerticalProps;
+type __VLS_ModelProps = {
+  modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_2: `name:${string}`, __VLS_3: {
+    item: TabItem;
+  };
+type __VLS_Slots = {} & { [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any };
+declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:modelValue": (value: string | undefined) => any;
+} & {
+  "update:modelValue": (value: string) => any;
+  close: (item: TabItem, index: number) => any;
+  click: (item: TabItem, index: number) => any;
+}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  onClose?: ((item: TabItem, index: number) => any) | undefined;
+  onClick?: ((item: TabItem, index: number) => any) | undefined;
+}>, {
+  closable: boolean;
+  position: "left" | "right";
+  rounded: boolean;
+}, {}, {}, {}, 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=tabs-vertical.vue.d.ts.map

package/dist/components/tabs/tabs.js

@@ -1,21 +1,33 @@
-import _sfc_main$1 from "../icon/icon.js";
-import _sfc_main$2 from "../scroll/scroll.js";
-import { Fragment, KeepAlive, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, openBlock, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useModel, useSlots, watch, withCtx, withDirectives, withModifiers } from "vue";
+import _sfc_main$1 from "../scroll/scroll.js";
+import _sfc_main$2 from "./tabs-horizontal.js";
+import _sfc_main$3 from "./tabs-vertical.js";
+import { KeepAlive, Transition, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, resolveDynamicComponent, unref, useModel, useSlots, withCtx } from "vue";
 import { bem } from "@veltra/utils";
 import { useFallbackProps } from "@veltra/compositions";
-import { vRipple } from "@veltra/directives";
-import { Close, Plus } from "@veltra/icons/normal";
 //#region src/components/tabs/tabs.vue
-const _hoisted_1 = ["onClick"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
 	name: "Tabs",
 	__name: "tabs",
 	props: /* @__PURE__ */ mergeModels({
 		modelValue: {},
 		items: {},
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		block: {
+			type: Boolean,
+			default: false
+		},
+		rounded: {
+			type: Boolean,
+			default: false
+		},
 		position: { default: "top" },
-		editable: { type: Boolean },
-		keepAlive: { type: Boolean },
+		keepAlive: {
+			type: Boolean,
+			default: false
+		},
 		size: {}
 	}, {
 		"modelValue": {},
@@ -23,122 +35,80 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 	}),
 	emits: /* @__PURE__ */ mergeModels([
 		"update:modelValue",
-		"update:items",
-		"update:active",
-		"delete",
-		"create",
-		"click"
+		"click",
+		"close"
 	], ["update:modelValue"]),
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
 		const slots = useSlots();
 		const { size } = useFallbackProps([props], { size: "default" });
-		const tabItems = computed(() => {
-			return props.items;
-		});
 		const cls = bem("tabs");
-		const headerRef = shallowRef();
-		/** 当前活动标签 */
-		const index = shallowRef(-1);
 		const model = useModel(__props, "modelValue");
-		const markStyle = shallowRef({});
-		let changedByEvent = false;
-		watch([model, () => props.items], ([model, items]) => {
-			if (changedByEvent) return;
-			index.value = items.findIndex((item) => item.key === model);
-		}, { immediate: true });
-		watch([
-			index,
-			() => props.position,
-			() => props.editable
-		], async ([index, position, editable]) => {
-			if (index === -1 || editable) return;
-			await nextTick();
-			const headerEl = headerRef.value;
-			const headerRect = headerEl.getBoundingClientRect();
-			const el = headerEl.children[index];
-			const { offsetWidth, offsetHeight } = el;
-			const rect = el.getBoundingClientRect();
-			if (position === "top" || position === "bottom") markStyle.value = {
-				width: offsetWidth + "px",
-				transform: `translate3d(${rect.left - headerRect.left}px, 0, 0)`
-			};
-			else markStyle.value = {
-				height: offsetHeight + "px",
-				transform: `translate3d(0, ${rect.top - headerRect.top}px, 0)`
-			};
-		}, { immediate: true });
-		const handleClick = (item, _index) => {
-			if (item.disabled) return;
-			changedByEvent = true;
-			index.value = _index;
-			model.value = item.key;
-			nextTick(() => {
-				changedByEvent = false;
-			});
-		};
-		const renderSlots = () => {
+		const isHorizontal = computed(() => props.position === "top" || props.position === "bottom");
+		/** 避免模板中使用类型断言：收敛 position 到水平 / 垂直子组件所需的子集。 */
+		const horizontalPosition = computed(() => props.position === "bottom" ? "bottom" : "top");
+		const verticalPosition = computed(() => props.position === "right" ? "right" : "left");
+		/** 是否存在任一内容面板插槽；没有则不渲染内容区域。 */
+		const hasContentSlots = computed(() => Object.keys(slots).length > 0);
+		const onClick = (item, index) => emit("click", item, index);
+		const onClose = (item, index) => emit("close", item, index);
+		const renderContent = () => {
 			const key = model.value;
 			if (!key) return null;
 			const nodes = slots[key]?.({ key });
-			if (Array.isArray(nodes)) return createVNode(_sfc_main$2, { class: cls.e("content") }, { default: () => nodes });
+			if (Array.isArray(nodes)) return createVNode(_sfc_main$1, null, { default: () => nodes });
 			return nodes;
 		};
-		/** 关闭标签 */
-		const handleClose = (item, index) => {
-			const { items } = props;
-			if (model.value === item.key) model.value = (items[index + 1] ?? items[index - 1]).key;
-			emit("update:items", [...items.slice(0, index), ...items.slice(index + 1)]);
-			emit("delete", item, index);
-		};
-		const handleAdd = () => {
-			emit("create");
-		};
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass([
-				unref(cls).b,
-				unref(cls).m(__props.position),
-				unref(cls).m(unref(size))
-			]) }, [createElementVNode("ul", {
-				class: normalizeClass([unref(cls).e("header"), unref(cls).em("header", __props.position)]),
-				ref_key: "headerRef",
-				ref: headerRef
-			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(tabItems.value, (item, index) => {
-				return withDirectives((openBlock(), createElementBlock("li", {
-					key: item.key,
-					class: normalizeClass([
-						unref(cls).e("header-item"),
-						unref(bem).is("active", model.value === item.key),
-						unref(bem).is("disabled", item.disabled === true)
-					]),
-					onClick: withModifiers(($event) => handleClick(item, index), ["stop"])
-				}, [renderSlot(_ctx.$slots, `name:${item.key}`, {}, () => [createTextVNode(toDisplayString(item.name), 1)]), __props.editable ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [!item.disabled ? (openBlock(), createBlock(unref(_sfc_main$1), {
-					key: 0,
-					class: normalizeClass(unref(cls).e("close")),
-					onClick: withModifiers(($event) => handleClose(item, index), ["stop"]),
-					onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
-				}, {
-					default: withCtx(() => [createVNode(unref(Close))]),
-					_: 1
-				}, 8, ["class", "onClick"])) : (openBlock(), createElementBlock("i", {
-					key: 1,
-					class: normalizeClass(unref(cls).e("close-placeholder"))
-				}, null, 2))], 64)) : createCommentVNode("v-if", true)], 10, _hoisted_1)), [[unref(vRipple), item.disabled ? false : unref(cls).e("ripple")]]);
-			}), 128)), __props.editable ? (openBlock(), createElementBlock("li", {
+			return openBlock(), createElementBlock("div", { class: normalizeClass([unref(cls).b, unref(cls).m(__props.position)]) }, [isHorizontal.value ? (openBlock(), createBlock(_sfc_main$2, {
 				key: 0,
-				class: normalizeClass([unref(cls).e("header-item"), unref(cls).e("add")]),
-				onClick: handleAdd
-			}, [createVNode(unref(_sfc_main$1), null, {
-				default: withCtx(() => [createVNode(unref(Plus))]),
-				_: 1
-			})], 2)) : createCommentVNode("v-if", true)], 2), createVNode(Transition, {
+				modelValue: model.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+				items: __props.items,
+				position: horizontalPosition.value,
+				size: unref(size),
+				closable: __props.closable,
+				block: __props.block,
+				rounded: __props.rounded,
+				onClick,
+				onClose
+			}, null, 8, [
+				"modelValue",
+				"items",
+				"position",
+				"size",
+				"closable",
+				"block",
+				"rounded"
+			])) : (openBlock(), createBlock(_sfc_main$3, {
+				key: 1,
+				modelValue: model.value,
+				"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => model.value = $event),
+				items: __props.items,
+				position: verticalPosition.value,
+				size: unref(size),
+				closable: __props.closable,
+				rounded: __props.rounded,
+				onClick,
+				onClose
+			}, null, 8, [
+				"modelValue",
+				"items",
+				"position",
+				"size",
+				"closable",
+				"rounded"
+			])), hasContentSlots.value ? (openBlock(), createElementBlock("div", {
+				key: 2,
+				class: normalizeClass(unref(cls).e("content"))
+			}, [createVNode(Transition, {
 				name: "fade",
 				mode: "out-in"
 			}, {
-				default: withCtx(() => [__props.keepAlive ? (openBlock(), createBlock(KeepAlive, { key: 0 }, [(openBlock(), createBlock(resolveDynamicComponent(renderSlots()), { key: model.value }))], 1024)) : (openBlock(), createBlock(resolveDynamicComponent(renderSlots()), { key: model.value }))]),
+				default: withCtx(() => [__props.keepAlive ? (openBlock(), createBlock(KeepAlive, { key: 0 }, [(openBlock(), createBlock(resolveDynamicComponent(renderContent()), { key: model.value }))], 1024)) : (openBlock(), createBlock(resolveDynamicComponent(renderContent()), { key: model.value }))]),
 				_: 1
-			})], 2);
+			})], 2)) : createCommentVNode("v-if", true)], 2);
 		};
 	}
 });

package/dist/components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":[],"sources":["../../../src/components/tabs/tabs.vue"],"sourcesContent":["<template>\n  <div :class=\"[cls.b, cls.m(position!), cls.m(size)]\">\n    <ul :class=\"[cls.e('header'), cls.em('header', position!)]\" ref=\"headerRef\">\n      <li\n        v-for=\"(item, index) in tabItems\"\n        :key=\"item.key\"\n        :class=\"[\n          cls.e('header-item'),\n          bem.is('active', model === item.key),\n          bem.is('disabled', item.disabled === true)\n        ]\"\n        v-ripple=\"item.disabled ? false : cls.e('ripple')\"\n        @click.stop=\"handleClick(item, index)\"\n      >\n        <slot :name=\"`name:${item.key}`\">\n          {{ item.name }}\n        </slot>\n\n        <template v-if=\"editable\">\n          <u-icon\n            v-if=\"!item.disabled\"\n            :class=\"cls.e('close')\"\n            @click.stop=\"handleClose(item, index)\"\n            @mousedown.stop\n          >\n            <Close />\n          </u-icon>\n          <i v-else :class=\"cls.e('close-placeholder')\"></i>\n        </template>\n      </li>\n\n      <li v-if=\"editable\" :class=\"[cls.e('header-item'), cls.e('add')]\" @click=\"handleAdd\">\n        <u-icon>\n          <Plus />\n        </u-icon>\n      </li>\n    </ul>\n\n    <transition name=\"fade\" mode=\"out-in\">\n      <KeepAlive v-if=\"keepAlive\">\n        <component :key=\"model\" :is=\"renderSlots()\" />\n      </KeepAlive>\n      <component v-else :key=\"model\" :is=\"renderSlots()\" />\n    </transition>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFallbackProps } from '@veltra/compositions'\nimport { vRipple } from '@veltra/directives'\nimport { Close, Plus } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, createVNode, nextTick, shallowRef, watch, type CSSProperties } from 'vue'\n\nimport type { TabItem, TabsProps, TabsEmits, ComponentSize } from '../../types'\nimport { UIcon } from '../icon'\nimport { UScroll } from '../scroll'\n\ndefineOptions({\n  name: 'Tabs'\n})\n\nconst props = withDefaults(defineProps<TabsProps>(), {\n  position: 'top'\n})\n\nconst emit = defineEmits<TabsEmits>()\n\nconst slots = defineSlots<{\n  [key: string]: (props: { key: string }) => any\n  [key: `name:${string}`]: () => any\n}>()\n\nconst { size } = useFallbackProps([props], {\n  size: 'default' as ComponentSize\n})\n\nconst tabItems = computed(() => {\n  return props.items\n})\n\nconst cls = bem('tabs')\n\nconst headerRef = shallowRef<HTMLElement>()\n\n/** 当前活动标签 */\nconst index = shallowRef(-1)\nconst model = defineModel<string>()\n\nconst markStyle = shallowRef<CSSProperties>({})\n\nlet changedByEvent = false\nwatch(\n  [model, () => props.items],\n  ([model, items]) => {\n    if (changedByEvent) return\n    index.value = items.findIndex((item) => item.key === model)\n  },\n  { immediate: true }\n)\n\nwatch(\n  [index, () => props.position, () => props.editable],\n  async ([index, position, editable]) => {\n    if (index === -1 || editable) return\n    await nextTick()\n\n    const headerEl = headerRef.value!\n\n    const headerRect = headerEl.getBoundingClientRect()\n    const el = headerEl.children[index]! as HTMLLIElement\n    const { offsetWidth, offsetHeight } = el\n\n    const rect = el.getBoundingClientRect()\n\n    if (position === 'top' || position === 'bottom') {\n      markStyle.value = {\n        width: offsetWidth + 'px',\n        transform: `translate3d(${rect.left - headerRect.left}px, 0, 0)`\n      }\n    } else {\n      markStyle.value = {\n        height: offsetHeight + 'px',\n        transform: `translate3d(0, ${rect.top - headerRect.top}px, 0)`\n      }\n    }\n  },\n  { immediate: true }\n)\n\nconst handleClick = (item: TabItem, _index: number) => {\n  if (item.disabled) return\n\n  changedByEvent = true\n  index.value = _index\n  model.value = item.key\n  nextTick(() => {\n    changedByEvent = false\n  })\n}\n\nconst renderSlots = () => {\n  const key = model.value\n  if (!key) return null\n  const nodes = slots[key]?.({ key })\n  if (Array.isArray(nodes)) {\n    return createVNode(UScroll, { class: cls.e('content') }, { default: () => nodes })\n  }\n  return nodes\n}\n\n/** 关闭标签 */\nconst handleClose = (item: TabItem, index: number) => {\n  const { items } = props\n  if (model.value === item.key) {\n    model.value = (items[index + 1] ?? items[index - 1])!.key\n  }\n\n  emit('update:items', [...items.slice(0, index), ...items.slice(index + 1)])\n\n  emit('delete', item, index)\n}\n\nconst handleAdd = () => {\n  emit('create')\n}\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"tabs.js","names":[],"sources":["../../../src/components/tabs/tabs.vue"],"sourcesContent":["<template>\n  <div :class=\"[cls.b, cls.m(position!)]\">\n    <u-tabs-horizontal\n      v-if=\"isHorizontal\"\n      v-model=\"model\"\n      :items=\"items\"\n      :position=\"horizontalPosition\"\n      :size=\"size\"\n      :closable=\"closable\"\n      :block=\"block\"\n      :rounded=\"rounded\"\n      @click=\"onClick\"\n      @close=\"onClose\"\n    />\n    <u-tabs-vertical\n      v-else\n      v-model=\"model\"\n      :items=\"items\"\n      :position=\"verticalPosition\"\n      :size=\"size\"\n      :closable=\"closable\"\n      :rounded=\"rounded\"\n      @click=\"onClick\"\n      @close=\"onClose\"\n    />\n\n    <div v-if=\"hasContentSlots\" :class=\"cls.e('content')\">\n      <transition name=\"fade\" mode=\"out-in\">\n        <keep-alive v-if=\"keepAlive\">\n          <component :key=\"model\" :is=\"renderContent()\" />\n        </keep-alive>\n        <component v-else :key=\"model\" :is=\"renderContent()\" />\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFallbackProps } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { computed, createVNode, useSlots } from 'vue'\n\nimport type { ComponentSize, TabItem, TabsEmits, TabsProps } from '../../types'\nimport { UScroll } from '../scroll'\nimport UTabsHorizontal from './tabs-horizontal.vue'\nimport UTabsVertical from './tabs-vertical.vue'\n\ndefineOptions({ name: 'Tabs' })\n\nconst props = withDefaults(defineProps<TabsProps>(), {\n  position: 'top',\n  closable: false,\n  block: false,\n  rounded: false,\n  keepAlive: false\n})\n\nconst emit = defineEmits<TabsEmits>()\n\nconst slots = useSlots() as Record<string, ((props?: any) => any) | undefined>\n\nconst { size } = useFallbackProps([props], {\n  size: 'default' as ComponentSize\n})\n\nconst cls = bem('tabs')\n\nconst model = defineModel<string>()\n\nconst isHorizontal = computed(() => props.position === 'top' || props.position === 'bottom')\n\n/** 避免模板中使用类型断言：收敛 position 到水平 / 垂直子组件所需的子集。 */\nconst horizontalPosition = computed<'top' | 'bottom'>(() =>\n  props.position === 'bottom' ? 'bottom' : 'top'\n)\n\nconst verticalPosition = computed<'left' | 'right'>(() =>\n  props.position === 'right' ? 'right' : 'left'\n)\n\n/** 是否存在任一内容面板插槽；没有则不渲染内容区域。 */\nconst hasContentSlots = computed(() => Object.keys(slots).length > 0)\n\nconst onClick = (item: TabItem, index: number) => emit('click', item, index)\nconst onClose = (item: TabItem, index: number) => emit('close', item, index)\n\nconst renderContent = () => {\n  const key = model.value\n  if (!key) return null\n  const nodes = slots[key]?.({ key })\n  if (Array.isArray(nodes)) {\n    return createVNode(UScroll, null, { default: () => nodes })\n  }\n  return nodes\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDA,MAAM,QAAQ;EAQd,MAAM,OAAO;EAEb,MAAM,QAAQ,UAAU;EAExB,MAAM,EAAE,SAAS,iBAAiB,CAAC,MAAM,EAAE,EACzC,MAAM,WACP,CAAA;EAED,MAAM,MAAM,IAAI,OAAM;EAEtB,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAElC,MAAM,eAAe,eAAe,MAAM,aAAa,SAAS,MAAM,aAAa,SAAQ;;EAG3F,MAAM,qBAAqB,eACzB,MAAM,aAAa,WAAW,WAAW,MAC3C;EAEA,MAAM,mBAAmB,eACvB,MAAM,aAAa,UAAU,UAAU,OACzC;;EAGA,MAAM,kBAAkB,eAAe,OAAO,KAAK,MAAM,CAAC,SAAS,EAAC;EAEpE,MAAM,WAAW,MAAe,UAAkB,KAAK,SAAS,MAAM,MAAK;EAC3E,MAAM,WAAW,MAAe,UAAkB,KAAK,SAAS,MAAM,MAAK;EAE3E,MAAM,sBAAsB;GAC1B,MAAM,MAAM,MAAM;AAClB,OAAI,CAAC,IAAK,QAAO;GACjB,MAAM,QAAQ,MAAM,OAAO,EAAE,KAAK,CAAA;AAClC,OAAI,MAAM,QAAQ,MAAM,CACtB,QAAO,YAAY,aAAS,MAAM,EAAE,eAAe,OAAO,CAAA;AAE5D,UAAO;;;uBA5FP,mBAiCM,OAAA,EAjCA,OAAK,eAAA,CAAG,MAAA,IAAG,CAAC,GAAG,MAAA,IAAG,CAAC,EAAE,QAAA,SAAQ,CAAA,CAAA,EAAA,EAAA,CAEzB,aAAA,SAAA,WAAA,EADR,YAWE,aAAA;;gBATS,MAAA;iEAAA,MAAK,QAAA;IACb,OAAO,QAAA;IACP,UAAU,mBAAA;IACV,MAAM,MAAA,KAAI;IACV,UAAU,QAAA;IACV,OAAO,QAAA;IACP,SAAS,QAAA;IACF;IACA;;;;;;;;;uBAEV,YAUE,aAAA;;gBARS,MAAA;iEAAA,MAAK,QAAA;IACb,OAAO,QAAA;IACP,UAAU,iBAAA;IACV,MAAM,MAAA,KAAI;IACV,UAAU,QAAA;IACV,SAAS,QAAA;IACF;IACA;;;;;;;;QAGC,gBAAA,SAAA,WAAA,EAAX,mBAOM,OAAA;;IAPuB,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,UAAA,CAAA;OACvC,YAKa,YAAA;IALD,MAAK;IAAO,MAAK;;2BAGd,CAFK,QAAA,aAAA,WAAA,EAAlB,YAEa,WAAA,EAAA,KAAA,GAAA,EAAA,EAAA,WAAA,EADX,YAAgD,wBAAnB,eAAa,CAAA,EAAA,EAA9B,KAAK,MAAA,OAAK,CAAA,EAAA,EAAA,KAAA,KAAA,WAAA,EAExB,YAAuD,wBAAnB,eAAa,CAAA,EAAA,EAA9B,KAAK,MAAA,OAAK,CAAA,EAAA,CAAA"}

package/dist/components/tabs/tabs.vue.d.ts

@@ -3,42 +3,28 @@ import * as _$vue from "vue";
 
 //#region src/components/tabs/tabs.vue.d.ts
 type __VLS_Props = TabsProps;
-type __VLS_Slots = {
-  [key: string]: (props: {
-    key: string;
-  }) => any;
-  [key: `name:${string}`]: () => any;
-};
 type __VLS_ModelProps = {
   modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (value: string | undefined) => any;
 } & {
-  "update:modelValue": (value: string | number) => any;
-  delete: (item: TabItem, index: number) => any;
+  "update:modelValue": (value: string) => any;
+  close: (item: TabItem, index: number) => any;
   click: (item: TabItem, index: number) => any;
-  create: () => any;
-  "update:items": (items: TabItem[]) => any;
-  "update:active": (active: string | number) => any;
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
-  onDelete?: ((item: TabItem, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  onClose?: ((item: TabItem, index: number) => any) | undefined;
   onClick?: ((item: TabItem, index: number) => any) | undefined;
-  onCreate?: (() => any) | undefined;
-  "onUpdate:items"?: ((items: TabItem[]) => any) | undefined;
-  "onUpdate:active"?: ((active: string | number) => any) | undefined;
 }>, {
+  block: boolean;
+  closable: boolean;
   position: "left" | "right" | "top" | "bottom";
+  rounded: boolean;
+  keepAlive: boolean;
 }, {}, {}, {}, 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=tabs.vue.d.ts.map

package/dist/components/tabs/use-tabs-bar.js

@@ -0,0 +1,105 @@
+import { nextTick, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+import { useResizeObserver } from "@veltra/compositions";
+//#region src/components/tabs/use-tabs-bar.ts
+/**
+* 水平标签栏的溢出滚动逻辑：
+* - 计算 nav 按钮显隐与可用状态
+* - 提供按步滚动与活动标签自动滚入视野的方法
+* - 绑定 wheel / scroll / resize 事件
+*/
+function useTabsBar(options) {
+	const { viewportRef, listRef, items, model } = options;
+	const showNav = shallowRef(false);
+	const canPrev = shallowRef(false);
+	const canNext = shallowRef(false);
+	/** 依据 viewport 与内容尺寸推导滚动按钮可用状态 */
+	const updateNavState = () => {
+		const vp = viewportRef.value;
+		if (!vp) return;
+		const { scrollLeft, scrollWidth, clientWidth } = vp;
+		const overflowing = scrollWidth - clientWidth > 1;
+		showNav.value = overflowing;
+		canPrev.value = overflowing && scrollLeft > 0;
+		canNext.value = overflowing && scrollLeft + clientWidth < scrollWidth - 1;
+	};
+	/** 箭头按钮：按视口宽度 80% 的步长平滑滚动 */
+	const scrollByStep = (dir) => {
+		const vp = viewportRef.value;
+		if (!vp) return;
+		vp.scrollTo({
+			left: vp.scrollLeft + dir * vp.clientWidth * .8,
+			behavior: "smooth"
+		});
+	};
+	/** 活动标签自动滚入视野 */
+	const ensureActiveVisible = () => {
+		const vp = viewportRef.value;
+		const list = listRef.value;
+		if (!vp || !list) return;
+		const activeKey = model.value;
+		if (!activeKey) return;
+		const activeIndex = items.value.findIndex((i) => i.key === activeKey);
+		if (activeIndex < 0) return;
+		const el = list.children[activeIndex];
+		if (!el) return;
+		const vpRect = vp.getBoundingClientRect();
+		const elRect = el.getBoundingClientRect();
+		if (elRect.left < vpRect.left) vp.scrollTo({
+			left: vp.scrollLeft + (elRect.left - vpRect.left) - 8,
+			behavior: "smooth"
+		});
+		else if (elRect.right > vpRect.right) vp.scrollTo({
+			left: vp.scrollLeft + (elRect.right - vpRect.right) + 8,
+			behavior: "smooth"
+		});
+	};
+	/** 鼠标滚轮（纵向）驱动水平滚动；触控板横滑（已有 deltaX）不拦截 */
+	const handleWheel = (e) => {
+		if (!showNav.value) return;
+		const vp = viewportRef.value;
+		if (!vp) return;
+		if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
+		if (e.deltaY === 0) return;
+		e.preventDefault();
+		vp.scrollLeft += e.deltaY;
+	};
+	useResizeObserver({
+		targets: [viewportRef, listRef],
+		onResize: () => updateNavState()
+	});
+	watch(model, async () => {
+		await nextTick();
+		ensureActiveVisible();
+	});
+	watch(items, async () => {
+		await nextTick();
+		updateNavState();
+		ensureActiveVisible();
+	}, { deep: false });
+	onMounted(() => {
+		const vp = viewportRef.value;
+		if (!vp) return;
+		vp.addEventListener("wheel", handleWheel, { passive: false });
+		vp.addEventListener("scroll", updateNavState, { passive: true });
+		updateNavState();
+		nextTick(ensureActiveVisible);
+	});
+	onBeforeUnmount(() => {
+		const vp = viewportRef.value;
+		if (!vp) return;
+		vp.removeEventListener("wheel", handleWheel);
+		vp.removeEventListener("scroll", updateNavState);
+	});
+	return {
+		showNav,
+		canPrev,
+		canNext,
+		updateNavState,
+		scrollByStep,
+		ensureActiveVisible
+	};
+}
+//#endregion
+export { useTabsBar };
+
+//# sourceMappingURL=use-tabs-bar.js.map

package/dist/components/tabs/use-tabs-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tabs-bar.js","names":[],"sources":["../../../src/components/tabs/use-tabs-bar.ts"],"sourcesContent":["import { useResizeObserver } from '@veltra/compositions'\nimport {\n  type ModelRef,\n  type Ref,\n  type ShallowRef,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  shallowRef,\n  watch\n} from 'vue'\n\nimport type { TabItem } from '../../types'\n\ninterface UseTabsBarOptions {\n  viewportRef: ShallowRef<HTMLElement | undefined>\n  listRef: ShallowRef<HTMLElement | undefined>\n  items: Ref<TabItem[]>\n  model: ModelRef<string | undefined>\n}\n\n/**\n * 水平标签栏的溢出滚动逻辑：\n * - 计算 nav 按钮显隐与可用状态\n * - 提供按步滚动与活动标签自动滚入视野的方法\n * - 绑定 wheel / scroll / resize 事件\n */\nexport function useTabsBar(options: UseTabsBarOptions) {\n  const { viewportRef, listRef, items, model } = options\n\n  const showNav = shallowRef(false)\n  const canPrev = shallowRef(false)\n  const canNext = shallowRef(false)\n\n  /** 依据 viewport 与内容尺寸推导滚动按钮可用状态 */\n  const updateNavState = () => {\n    const vp = viewportRef.value\n    if (!vp) return\n    const { scrollLeft, scrollWidth, clientWidth } = vp\n    const overflowing = scrollWidth - clientWidth > 1\n    showNav.value = overflowing\n    canPrev.value = overflowing && scrollLeft > 0\n    canNext.value = overflowing && scrollLeft + clientWidth < scrollWidth - 1\n  }\n\n  /** 箭头按钮：按视口宽度 80% 的步长平滑滚动 */\n  const scrollByStep = (dir: 1 | -1) => {\n    const vp = viewportRef.value\n    if (!vp) return\n    vp.scrollTo({ left: vp.scrollLeft + dir * vp.clientWidth * 0.8, behavior: 'smooth' })\n  }\n\n  /** 活动标签自动滚入视野 */\n  const ensureActiveVisible = () => {\n    const vp = viewportRef.value\n    const list = listRef.value\n    if (!vp || !list) return\n    const activeKey = model.value\n    if (!activeKey) return\n    const activeIndex = items.value.findIndex((i) => i.key === activeKey)\n    if (activeIndex < 0) return\n    const el = list.children[activeIndex] as HTMLElement | undefined\n    if (!el) return\n\n    const vpRect = vp.getBoundingClientRect()\n    const elRect = el.getBoundingClientRect()\n    if (elRect.left < vpRect.left) {\n      vp.scrollTo({ left: vp.scrollLeft + (elRect.left - vpRect.left) - 8, behavior: 'smooth' })\n    } else if (elRect.right > vpRect.right) {\n      vp.scrollTo({ left: vp.scrollLeft + (elRect.right - vpRect.right) + 8, behavior: 'smooth' })\n    }\n  }\n\n  /** 鼠标滚轮（纵向）驱动水平滚动；触控板横滑（已有 deltaX）不拦截 */\n  const handleWheel = (e: WheelEvent) => {\n    if (!showNav.value) return\n    const vp = viewportRef.value\n    if (!vp) return\n    if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) return\n    if (e.deltaY === 0) return\n    e.preventDefault()\n    vp.scrollLeft += e.deltaY\n  }\n\n  useResizeObserver({ targets: [viewportRef, listRef], onResize: () => updateNavState() })\n\n  watch(model, async () => {\n    await nextTick()\n    ensureActiveVisible()\n  })\n\n  watch(\n    items,\n    async () => {\n      await nextTick()\n      updateNavState()\n      ensureActiveVisible()\n    },\n    { deep: false }\n  )\n\n  onMounted(() => {\n    const vp = viewportRef.value\n    if (!vp) return\n    vp.addEventListener('wheel', handleWheel, { passive: false })\n    vp.addEventListener('scroll', updateNavState, { passive: true })\n    updateNavState()\n    nextTick(ensureActiveVisible)\n  })\n\n  onBeforeUnmount(() => {\n    const vp = viewportRef.value\n    if (!vp) return\n    vp.removeEventListener('wheel', handleWheel)\n    vp.removeEventListener('scroll', updateNavState)\n  })\n\n  return { showNav, canPrev, canNext, updateNavState, scrollByStep, ensureActiveVisible }\n}\n"],"mappings":";;;;;;;;;AA2BA,SAAgB,WAAW,SAA4B;CACrD,MAAM,EAAE,aAAa,SAAS,OAAO,UAAU;CAE/C,MAAM,UAAU,WAAW,MAAM;CACjC,MAAM,UAAU,WAAW,MAAM;CACjC,MAAM,UAAU,WAAW,MAAM;;CAGjC,MAAM,uBAAuB;EAC3B,MAAM,KAAK,YAAY;AACvB,MAAI,CAAC,GAAI;EACT,MAAM,EAAE,YAAY,aAAa,gBAAgB;EACjD,MAAM,cAAc,cAAc,cAAc;AAChD,UAAQ,QAAQ;AAChB,UAAQ,QAAQ,eAAe,aAAa;AAC5C,UAAQ,QAAQ,eAAe,aAAa,cAAc,cAAc;;;CAI1E,MAAM,gBAAgB,QAAgB;EACpC,MAAM,KAAK,YAAY;AACvB,MAAI,CAAC,GAAI;AACT,KAAG,SAAS;GAAE,MAAM,GAAG,aAAa,MAAM,GAAG,cAAc;GAAK,UAAU;GAAU,CAAC;;;CAIvF,MAAM,4BAA4B;EAChC,MAAM,KAAK,YAAY;EACvB,MAAM,OAAO,QAAQ;AACrB,MAAI,CAAC,MAAM,CAAC,KAAM;EAClB,MAAM,YAAY,MAAM;AACxB,MAAI,CAAC,UAAW;EAChB,MAAM,cAAc,MAAM,MAAM,WAAW,MAAM,EAAE,QAAQ,UAAU;AACrE,MAAI,cAAc,EAAG;EACrB,MAAM,KAAK,KAAK,SAAS;AACzB,MAAI,CAAC,GAAI;EAET,MAAM,SAAS,GAAG,uBAAuB;EACzC,MAAM,SAAS,GAAG,uBAAuB;AACzC,MAAI,OAAO,OAAO,OAAO,KACvB,IAAG,SAAS;GAAE,MAAM,GAAG,cAAc,OAAO,OAAO,OAAO,QAAQ;GAAG,UAAU;GAAU,CAAC;WACjF,OAAO,QAAQ,OAAO,MAC/B,IAAG,SAAS;GAAE,MAAM,GAAG,cAAc,OAAO,QAAQ,OAAO,SAAS;GAAG,UAAU;GAAU,CAAC;;;CAKhG,MAAM,eAAe,MAAkB;AACrC,MAAI,CAAC,QAAQ,MAAO;EACpB,MAAM,KAAK,YAAY;AACvB,MAAI,CAAC,GAAI;AACT,MAAI,KAAK,IAAI,EAAE,OAAO,GAAG,KAAK,IAAI,EAAE,OAAO,CAAE;AAC7C,MAAI,EAAE,WAAW,EAAG;AACpB,IAAE,gBAAgB;AAClB,KAAG,cAAc,EAAE;;AAGrB,mBAAkB;EAAE,SAAS,CAAC,aAAa,QAAQ;EAAE,gBAAgB,gBAAgB;EAAE,CAAC;AAExF,OAAM,OAAO,YAAY;AACvB,QAAM,UAAU;AAChB,uBAAqB;GACrB;AAEF,OACE,OACA,YAAY;AACV,QAAM,UAAU;AAChB,kBAAgB;AAChB,uBAAqB;IAEvB,EAAE,MAAM,OAAO,CAChB;AAED,iBAAgB;EACd,MAAM,KAAK,YAAY;AACvB,MAAI,CAAC,GAAI;AACT,KAAG,iBAAiB,SAAS,aAAa,EAAE,SAAS,OAAO,CAAC;AAC7D,KAAG,iBAAiB,UAAU,gBAAgB,EAAE,SAAS,MAAM,CAAC;AAChE,kBAAgB;AAChB,WAAS,oBAAoB;GAC7B;AAEF,uBAAsB;EACpB,MAAM,KAAK,YAAY;AACvB,MAAI,CAAC,GAAI;AACT,KAAG,oBAAoB,SAAS,YAAY;AAC5C,KAAG,oBAAoB,UAAU,eAAe;GAChD;AAEF,QAAO;EAAE;EAAS;EAAS;EAAS;EAAgB;EAAc;EAAqB"}

package/dist/components/text/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","names":[],"sources":["../../../src/components/text/text.vue"],"sourcesContent":["<template>\n  <p :class=\"classList\" :style=\"style\">\n    <UNodeRender :content=\"getTextVNode()\" ref=\"aa\" />\n  </p>\n</template>\n\n<script lang=\"ts\" setup>\nimport { bem, withUnit, isTextNode, getHighlightChunks } from '@veltra/utils'\nimport { type CSSProperties, type VNode, computed, useSlots, h, createTextVNode } from 'vue'\n\nimport type { TextProps } from '../../types'\nimport { UNodeRender } from '../node-render'\n\ndefineOptions({\n  name: 'Text'\n})\n\nconst props = withDefaults(defineProps<TextProps>(), {\n  as: 'content'\n})\n\nconst cls = bem('text')\n\nconst classList = computed(() => {\n  return [cls.b, bem.is(props.as), bem.is('bold', props.bold), bem.is('italic', props.italic)]\n})\n\nconst style = computed(() => {\n  const style: CSSProperties = {\n    fontSize: withUnit(props.fontSize, 'px')\n  }\n  const { deleted, underline } = props\n  if (deleted) {\n    style.textDecoration = 'line-through'\n  }\n  if (underline) {\n    style.textDecoration = 'underline'\n  }\n\n  return style\n})\n\nconst slots = useSlots()\nconst getTextVNode = () => {\n  const nodes = slots.default?.()\n  if (!nodes?.length) return undefined\n\n  // 只允许渲染文本\n  const textNodes = nodes.filter((node) => isTextNode(node))\n\n  const { highlight } = props\n\n  if (!highlight) {\n    return textNodes\n  }\n\n  return textNodes.reduce((nodes, textNode) => {\n    const chunks = getHighlightChunks(\n      textNode.children as string,\n      Array.isArray(highlight) ? highlight : [highlight]\n    )\n\n    chunks.forEach((chunk) => {\n      if (chunk.highlight) {\n        nodes.push(h('mark', chunk.text))\n      } else {\n        nodes.push(createTextVNode(chunk.text))\n      }\n    })\n\n    return nodes\n  }, [] as VNode[])\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ;EAId,MAAM,MAAM,IAAI,OAAM;EAEtB,MAAM,YAAY,eAAe;AAC/B,UAAO;IAAC,IAAI;IAAG,IAAI,GAAG,MAAM,GAAG;IAAE,IAAI,GAAG,QAAQ,MAAM,KAAK;IAAE,IAAI,GAAG,UAAU,MAAM,OAAO;IAAA;IAC5F;EAED,MAAM,QAAQ,eAAe;GAC3B,MAAM,QAAuB,EAC3B,UAAU,SAAS,MAAM,UAAU,KAAI,EACzC;GACA,MAAM,EAAE,SAAS,cAAc;AAC/B,OAAI,QACF,OAAM,iBAAiB;AAEzB,OAAI,UACF,OAAM,iBAAiB;AAGzB,UAAO;IACR;EAED,MAAM,QAAQ,UAAS;EACvB,MAAM,qBAAqB;GACzB,MAAM,QAAQ,MAAM,WAAU;AAC9B,OAAI,CAAC,OAAO,OAAQ,QAAO,KAAA;GAG3B,MAAM,YAAY,MAAM,QAAQ,SAAS,WAAW,KAAK,CAAA;GAEzD,MAAM,EAAE,cAAc;AAEtB,OAAI,CAAC,UACH,QAAO;AAGT,UAAO,UAAU,QAAQ,OAAO,aAAa;AAC5B,uBACb,SAAS,UACT,MAAM,QAAQ,UAAU,GAAG,YAAY,CAAC,UAAS,CACnD,CAEO,SAAS,UAAU;AACxB,SAAI,MAAM,UACR,OAAM,KAAK,EAAE,QAAQ,MAAM,KAAK,CAAA;SAEhC,OAAM,KAAK,gBAAgB,MAAM,KAAK,CAAA;MAEzC;AAED,WAAO;MACN,EAAE,CAAW;;;uBAtEhB,mBAEI,KAAA;IAFA,OAAK,eAAE,UAAA,MAAS;IAAG,OAAK,eAAE,MAAA,MAAK;OACjC,YAAkD,MAAA,WAAA,EAAA;IAApC,SAAS,cAAY;IAAI,KAAI"}
+{"version":3,"file":"text.js","names":[],"sources":["../../../src/components/text/text.vue"],"sourcesContent":["<template>\n  <p :class=\"classList\" :style=\"style\">\n    <UNodeRender :content=\"getTextVNode()\" ref=\"aa\" />\n  </p>\n</template>\n\n<script lang=\"ts\" setup>\nimport { bem, withUnit, isTextNode, getHighlightChunks } from '@veltra/utils'\nimport { type CSSProperties, type VNode, computed, useSlots, h, createTextVNode } from 'vue'\n\nimport type { TextProps } from '../../types'\nimport { UNodeRender } from '../node-render'\n\ndefineOptions({\n  name: 'Text'\n})\n\nconst props = withDefaults(defineProps<TextProps>(), {\n  as: 'content'\n})\n\nconst cls = bem('text')\n\nconst classList = computed(() => {\n  return [cls.b, bem.is(props.as), bem.is('bold', props.bold), bem.is('italic', props.italic)]\n})\n\nconst style = computed(() => {\n  const style: CSSProperties = {\n    fontSize: withUnit(props.fontSize, 'px')\n  }\n  const { deleted, underline } = props\n  if (deleted) {\n    style.textDecoration = 'line-through'\n  }\n  if (underline) {\n    style.textDecoration = 'underline'\n  }\n\n  return style\n})\n\nconst slots = useSlots()\nconst getTextVNode = () => {\n  const nodes = slots.default?.()\n  if (!nodes?.length) return undefined\n\n  // 只允许渲染文本\n  const textNodes = nodes.filter((node) => isTextNode(node))\n\n  const { highlight } = props\n\n  if (!highlight) {\n    return textNodes\n  }\n\n  return textNodes.reduce((nodes, textNode) => {\n    const chunks = getHighlightChunks(\n      textNode.children as string,\n      Array.isArray(highlight) ? highlight : [highlight]\n    )\n\n    chunks.forEach((chunk) => {\n      if (chunk.highlight) {\n        nodes.push(h('mark', chunk.text))\n      } else {\n        nodes.push(createTextVNode(chunk.text))\n      }\n    })\n\n    return nodes\n  }, [] as VNode[])\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ;EAId,MAAM,MAAM,IAAI,OAAM;EAEtB,MAAM,YAAY,eAAe;AAC/B,UAAO;IAAC,IAAI;IAAG,IAAI,GAAG,MAAM,GAAG;IAAE,IAAI,GAAG,QAAQ,MAAM,KAAK;IAAE,IAAI,GAAG,UAAU,MAAM,OAAO;IAAA;IAC5F;EAED,MAAM,QAAQ,eAAe;GAC3B,MAAM,QAAuB,EAC3B,UAAU,SAAS,MAAM,UAAU,KAAI,EACzC;GACA,MAAM,EAAE,SAAS,cAAc;AAC/B,OAAI,QACF,OAAM,iBAAiB;AAEzB,OAAI,UACF,OAAM,iBAAiB;AAGzB,UAAO;IACR;EAED,MAAM,QAAQ,UAAS;EACvB,MAAM,qBAAqB;GACzB,MAAM,QAAQ,MAAM,WAAU;AAC9B,OAAI,CAAC,OAAO,OAAQ,QAAO,KAAA;GAG3B,MAAM,YAAY,MAAM,QAAQ,SAAS,WAAW,KAAK,CAAA;GAEzD,MAAM,EAAE,cAAc;AAEtB,OAAI,CAAC,UACH,QAAO;AAGT,UAAO,UAAU,QAAQ,OAAO,aAAa;AAC5B,uBACb,SAAS,UACT,MAAM,QAAQ,UAAU,GAAG,YAAY,CAAC,UAAS,CAGnD,CAAO,SAAS,UAAU;AACxB,SAAI,MAAM,UACR,OAAM,KAAK,EAAE,QAAQ,MAAM,KAAK,CAAA;SAEhC,OAAM,KAAK,gBAAgB,MAAM,KAAK,CAAA;MAEzC;AAED,WAAO;MACN,EAAE,CAAW;;;uBAtEhB,mBAEI,KAAA;IAFA,OAAK,eAAE,UAAA,MAAS;IAAG,OAAK,eAAE,MAAA,MAAK;OACjC,YAAkD,MAAA,WAAA,EAAA;IAApC,SAAS,cAAY;IAAI,KAAI"}