@veltra/desktop 1.0.7 → 1.0.9

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

@@ -0,0 +1,133 @@
+import _sfc_main$1 from "../icon/icon.js";
+import { useTabsBar } from "./use-tabs-bar.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, shallowRef, toDisplayString, unref, useModel, vShow, withCtx, withDirectives, withModifiers } from "vue";
+import { bem } from "@veltra/utils";
+import { useFallbackProps } from "@veltra/compositions";
+import { ArrowLeft, ArrowRight, Close } from "@veltra/icons/normal";
+//#region src/components/tabs/tabs-horizontal.vue
+const _hoisted_1 = ["disabled"];
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = ["aria-label", "onClick"];
+const _hoisted_4 = ["disabled"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "TabsHorizontal",
+	__name: "tabs-horizontal",
+	props: /* @__PURE__ */ mergeModels({
+		size: {},
+		modelValue: {},
+		items: {},
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		block: {
+			type: Boolean,
+			default: false
+		},
+		rounded: {
+			type: Boolean,
+			default: false
+		},
+		position: { default: "top" }
+	}, {
+		"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 viewportRef = shallowRef();
+		const listRef = shallowRef();
+		const { showNav, canPrev, canNext, scrollByStep } = useTabsBar({
+			viewportRef,
+			listRef,
+			items: computed(() => props.items),
+			model
+		});
+		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("horizontal"),
+				unref(cls).m(__props.position),
+				unref(cls).m(unref(size)),
+				unref(bem).is("block", __props.block),
+				unref(bem).is("rounded", __props.rounded)
+			]) }, [
+				withDirectives(createElementVNode("button", {
+					type: "button",
+					class: normalizeClass([unref(cls).e("nav"), unref(cls).em("nav", "prev")]),
+					disabled: !unref(canPrev),
+					onClick: _cache[0] || (_cache[0] = ($event) => unref(scrollByStep)(-1))
+				}, [createVNode(unref(_sfc_main$1), null, {
+					default: withCtx(() => [createVNode(unref(ArrowLeft))]),
+					_: 1
+				})], 10, _hoisted_1), [[vShow, unref(showNav)]]),
+				createElementVNode("div", {
+					ref_key: "viewportRef",
+					ref: viewportRef,
+					class: normalizeClass(unref(cls).e("viewport"))
+				}, [createElementVNode("div", {
+					ref_key: "listRef",
+					ref: listRef,
+					class: normalizeClass(unref(cls).e("list"))
+				}, [(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"])
+					}, [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_3)) : createCommentVNode("v-if", true)], 10, _hoisted_2);
+				}), 128))], 2)], 2),
+				withDirectives(createElementVNode("button", {
+					type: "button",
+					class: normalizeClass([unref(cls).e("nav"), unref(cls).em("nav", "next")]),
+					disabled: !unref(canNext),
+					onClick: _cache[1] || (_cache[1] = ($event) => unref(scrollByStep)(1))
+				}, [createVNode(unref(_sfc_main$1), null, {
+					default: withCtx(() => [createVNode(unref(ArrowRight))]),
+					_: 1
+				})], 10, _hoisted_4), [[vShow, unref(showNav)]])
+			], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=tabs-horizontal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-horizontal.js","names":[],"sources":["../../../src/components/tabs/tabs-horizontal.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      cls.b,\n      cls.m('horizontal'),\n      cls.m(position),\n      cls.m(size),\n      bem.is('block', block),\n      bem.is('rounded', rounded)\n    ]\"\n  >\n    <button\n      v-show=\"showNav\"\n      type=\"button\"\n      :class=\"[cls.e('nav'), cls.em('nav', 'prev')]\"\n      :disabled=\"!canPrev\"\n      @click=\"scrollByStep(-1)\"\n    >\n      <u-icon>\n        <ArrowLeft />\n      </u-icon>\n    </button>\n\n    <div ref=\"viewportRef\" :class=\"cls.e('viewport')\">\n      <div ref=\"listRef\" :class=\"cls.e('list')\">\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          <span :class=\"cls.e('item-label')\">{{ item.name ?? item.key }}</span>\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    </div>\n\n    <button\n      v-show=\"showNav\"\n      type=\"button\"\n      :class=\"[cls.e('nav'), cls.em('nav', 'next')]\"\n      :disabled=\"!canNext\"\n      @click=\"scrollByStep(1)\"\n    >\n      <u-icon>\n        <ArrowRight />\n      </u-icon>\n    </button>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFallbackProps } from '@veltra/compositions'\nimport { ArrowLeft, ArrowRight, Close } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, shallowRef } from 'vue'\n\nimport type { ComponentSize, TabItem, TabsHorizontalEmits, TabsHorizontalProps } from '../../types'\nimport { UIcon } from '../icon'\nimport { useTabsBar } from './use-tabs-bar'\n\ndefineOptions({ name: 'TabsHorizontal' })\n\nconst props = withDefaults(defineProps<TabsHorizontalProps>(), {\n  position: 'top',\n  closable: false,\n  block: false,\n  rounded: false\n})\n\nconst emit = defineEmits<TabsHorizontalEmits>()\n\nconst { size } = useFallbackProps([props], {\n  size: 'default' as ComponentSize\n})\n\nconst cls = bem('tabs-bar')\n\nconst model = defineModel<string>()\n\nconst viewportRef = shallowRef<HTMLElement>()\nconst listRef = shallowRef<HTMLElement>()\n\nconst itemsRef = computed(() => props.items)\n\nconst { showNav, canPrev, canNext, scrollByStep } = useTabsBar({\n  viewportRef,\n  listRef,\n  items: itemsRef,\n  model\n})\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":"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"}

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

@@ -0,0 +1,29 @@
+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_ModelProps = {
+  modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:modelValue": (value: string | undefined) => any;
+} & {
+  click: (item: TabItem, index: number) => any;
+  "update:modelValue": (value: string) => any;
+  close: (item: TabItem, index: number) => any;
+}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  onClick?: ((item: TabItem, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  onClose?: ((item: TabItem, index: number) => any) | undefined;
+}>, {
+  block: boolean;
+  closable: boolean;
+  position: "top" | "bottom";
+  rounded: boolean;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#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, 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"])
+				}, [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      <span :class=\"cls.e('item-label')\">{{ item.name ?? item.key }}</span>\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,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;;;uBAvEzB,mBA6BM,OAAA,EA5BH,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,mBAyBS,UAAA,MAAA,WAtBiB,QAAA,QAAhB,MAAM,UAAK;wBAHrB,mBAyBS,UAAA;KAxBP,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,mBAAqE,QAAA,EAA9D,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,aAAA,CAAA,EAAA,EAAA,gBAAmB,KAAK,QAAQ,KAAK,IAAG,EAAA,EAAA,EAEnD,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,28 @@
+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 const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:modelValue": (value: string | undefined) => any;
+} & {
+  click: (item: TabItem, index: number) => any;
+  "update:modelValue": (value: string) => any;
+  close: (item: TabItem, index: number) => any;
+}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  onClick?: ((item: TabItem, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  onClose?: ((item: TabItem, index: number) => any) | undefined;
+}>, {
+  closable: boolean;
+  position: "left" | "right";
+  rounded: boolean;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#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;
   click: (item: TabItem, index: number) => any;
-  delete: (item: TabItem, index: number) => any;
-  create: () => any;
-  "update:items": (items: TabItem[]) => any;
-  "update:active": (active: string | number) => any;
+  "update:modelValue": (value: string) => any;
+  close: (item: TabItem, index: number) => any;
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
   onClick?: ((item: TabItem, index: number) => any) | undefined;
-  onDelete?: ((item: TabItem, index: number) => any) | undefined;
-  onCreate?: (() => any) | undefined;
-  "onUpdate:items"?: ((items: TabItem[]) => any) | undefined;
-  "onUpdate:active"?: ((active: string | number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+  onClose?: ((item: TabItem, index: 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