@semi-kit/component 1.4.9 → 1.4.10

package/lib/{index-BScreGz5.d.ts → index-B7r2qmH2.d.ts}

@@ -1,4 +1,4 @@
-import * as vue0 from "vue";
+import * as vue14 from "vue";
 import { VNode } from "vue";
 
 //#region src/tab-view/index.d.ts
@@ -7,7 +7,7 @@ interface PropsType<T> {
   rowKey: (item: T) => string | number;
   activeTab: (item: T) => boolean;
   tabs: T[];
-  type?: 'chrome' | 'tab';
+  type?: 'chrome' | 'tab' | 'tag';
   onClickItem?: (item: T) => void;
   onMouseUpItem?: (e: MouseEvent, item: T, index: number) => void;
   onDropdownSelect?: (key: TabActionType, index: number) => void;
@@ -20,7 +20,7 @@ interface SlotType<T> {
   }) => VNode;
   extra?: () => VNode;
 }
-declare const TabView: vue0.DefineSetupFnComponent<{
+declare const TabView: vue14.DefineSetupFnComponent<{
   tabs: any;
   rowKey: any;
   activeTab: any;
@@ -36,6 +36,6 @@ declare const TabView: vue0.DefineSetupFnComponent<{
   onClickItem: any;
   onMouseUpItem: any;
   onContextMenuItem: any;
-} & {}, vue0.PublicProps>;
+} & {}, vue14.PublicProps>;
 //#endregion
 export { TabView as i, SlotType as n, TabActionType as r, PropsType as t };

package/lib/index-CXNKqOza.d.ts

@@ -0,0 +1,7 @@
+import * as vue0 from "vue";
+import * as vue_jsx_runtime0 from "vue/jsx-runtime";
+
+//#region src/wrapper/flex-col-wrapper/index.d.ts
+declare const _default: vue0.DefineComponent<{}, () => vue_jsx_runtime0.JSX.Element, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue0.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { _default as t };

package/lib/index-D_b-QxXC.d.ts

@@ -0,0 +1,7 @@
+import * as vue4 from "vue";
+import * as vue_jsx_runtime0 from "vue/jsx-runtime";
+
+//#region src/wrapper/scroll-wrapper/index.d.ts
+declare const _default: vue4.DefineComponent<{}, () => vue_jsx_runtime0.JSX.Element, {}, {}, {}, vue4.ComponentOptionsMixin, vue4.ComponentOptionsMixin, {}, string, vue4.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue4.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { _default as t };

package/lib/index-Dn5-VvYJ.d.ts

@@ -0,0 +1,7 @@
+import * as vue9 from "vue";
+import * as vue_jsx_runtime1 from "vue/jsx-runtime";
+
+//#region src/wrapper/flex-row-wrapper/index.d.ts
+declare const _default: vue9.DefineComponent<{}, () => vue_jsx_runtime1.JSX.Element, {}, {}, {}, vue9.ComponentOptionsMixin, vue9.ComponentOptionsMixin, {}, string, vue9.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue9.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { _default as t };

package/lib/index.d.ts

@@ -1,9 +1,9 @@
 import { n as AppProviderContext, r as AppProviderFormRuleConfig, t as _default } from "./index-C-Oqap1P.js";
-import { t as _default$3 } from "./index-C5y1Tk9t.js";
-import { t as _default$2 } from "./index-HCwdt_km.js";
-import { t as _default$1 } from "./index-BkYadMq_.js";
+import { t as _default$3 } from "./index-D_b-QxXC.js";
+import { t as _default$2 } from "./index-Dn5-VvYJ.js";
+import { t as _default$1 } from "./index-CXNKqOza.js";
 import { t as SemiComponentResolver } from "./resolver-BVvgCCAW.js";
-import { i as TabView } from "./index-BScreGz5.js";
+import { i as TabView } from "./index-B7r2qmH2.js";
 
 //#region src/_utils/get-provider.d.ts
 declare function getAppProvider(): AppProviderContext;

package/lib/index.js

@@ -1,4 +1,4 @@
-import { n as getAppProvider, t as tab_view_default } from "./tab-view-BktgxoMW.js";
+import { n as getAppProvider, t as tab_view_default } from "./tab-view-BXYSwLG9.js";
 import "./cssr-D9_M6jAV.js";
 import { t as scroll_wrapper_default } from "./scroll-wrapper-DVAnbCLj.js";
 import { t as flex_row_wrapper_default } from "./flex-row-wrapper-70R3tK7w.js";

package/lib/tab-view/index.d.ts

@@ -1,2 +1,2 @@
-import { i as TabView, n as SlotType, r as TabActionType, t as PropsType } from "../index-BScreGz5.js";
+import { i as TabView, n as SlotType, r as TabActionType, t as PropsType } from "../index-B7r2qmH2.js";
 export { PropsType, SlotType, TabActionType, TabView as default };

package/lib/tab-view/index.js

@@ -1,4 +1,4 @@
-import { t as tab_view_default } from "../tab-view-BktgxoMW.js";
+import { t as tab_view_default } from "../tab-view-BXYSwLG9.js";
 import "../cssr-D9_M6jAV.js";
 
 export { tab_view_default as default };

package/lib/tab-view-BXYSwLG9.js

@@ -0,0 +1,199 @@
+import { a as useStyle, i as cM, n as cB, r as cE, t as c } from "./cssr-D9_M6jAV.js";
+import { computed, createVNode, defineComponent, getCurrentInstance, inject, isVNode, nextTick, onMounted, ref } from "vue";
+import { NTag } from "naive-ui";
+import { useRouter } from "vue-router";
+import { useEventListener } from "@vueuse/core";
+
+//#region src/_utils/get-provider.ts
+let cachedProvider = null;
+function getAppProvider() {
+	if (cachedProvider) return cachedProvider;
+	if (getCurrentInstance()) {
+		const provider = inject("app-provider");
+		if (provider) {
+			cachedProvider = provider;
+			return provider;
+		}
+	}
+	throw new Error("No outer <AppProvider /> founded.");
+}
+
+//#endregion
+//#region src/tab-view/styles/index.ts
+var styles_default = c([c("@keyframes fade", {
+	"0%": { opacity: 0 },
+	"100%": { opacity: 1 }
+}), cB("tab-view", {
+	display: "flex",
+	gap: "4px",
+	height: "42px",
+	alignItems: "center",
+	backgroundColor: "#fff"
+}, [
+	cE("tabs-wrapper", {
+		display: "flex",
+		flex: 1,
+		height: "100%",
+		overflowX: "auto",
+		padding: "0 10px",
+		whiteSpace: "nowrap",
+		"&::-webkit-scrollbar": { display: "none" },
+		scrollbarWidth: "none"
+	}),
+	cE("tab-item", {
+		cursor: "pointer",
+		display: "flex",
+		height: "100%",
+		alignItems: "center",
+		margin: "0 4px",
+		padding: "0 8px",
+		position: "relative",
+		transition: "all 200ms"
+	}),
+	cM("chrome", [cE("tab-item", [c("&:hover:not(.sk-tab-view__tab-item--active)::before", {
+		content: "\"\"",
+		position: "absolute",
+		left: "1px",
+		right: 0,
+		top: "50%",
+		height: "80%",
+		transform: "translateY(-50%)",
+		background: "rgba(0, 0, 0, 0.06)",
+		borderRadius: "var(--sk-tab-radius)"
+	}), cM("active", {
+		color: "var(--sk-tab-primary-color)",
+		"&::before": {
+			content: "\"\"",
+			position: "absolute",
+			left: 0,
+			right: 0,
+			bottom: 0,
+			height: "85%",
+			backgroundColor: "var(--sk-tab-secondary-color)",
+			borderRadius: "10px 10px 0 0"
+		},
+		"&::after": {
+			content: "\"\"",
+			position: "absolute",
+			bottom: 0,
+			left: "-14px",
+			right: "-14px",
+			height: "14px",
+			background: "radial-gradient(circle at 0 0, transparent 14px, var(--sk-tab-secondary-color) 14px) left bottom / 14px 14px no-repeat, radial-gradient(circle at 100% 0, transparent 14px, var(--sk-tab-secondary-color) 14px) right bottom / 14px 14px no-repeat"
+		}
+	})])]),
+	cM("tab", [cE("tab-item", {
+		padding: "0 4px",
+		marginRight: "10px",
+		transition: "border var(--duration) ease",
+		animation: "fade var(--duration) ease",
+		boxSizing: "border-box",
+		borderBottom: "2px solid transparent",
+		"&:hover": {
+			borderBottom: "2px solid var(--sk-tab-primary-color)",
+			color: "var(--sk-tab-primary-color)"
+		}
+	}, [cM("active", {
+		color: "var(--sk-tab-primary-color)",
+		borderBottom: "2px solid var(--sk-tab-primary-color)"
+	})])]),
+	cM("tag", [cE("tabs-wrapper", { alignItems: "center" }), cE("tab-item", {
+		height: "75%",
+		padding: 0
+	}, [c(".n-tag", {
+		height: "100%",
+		cursor: "pointer"
+	}), c("&:hover .n-tag", {
+		color: "var(--sk-tab-primary-color)",
+		backgroundColor: "var(--sk-tab-secondary-color)"
+	}, [c("button", { color: "var(--sk-tab-primary-color)" })])])])
+])]);
+
+//#endregion
+//#region src/tab-view/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const TabView = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const router = useRouter();
+	useStyle("tab-view", styles_default);
+	const provider = getAppProvider();
+	const radiusPX = computed(() => `${provider.theme?.value?.radius}px`);
+	const scrollContainer = ref();
+	const syncScroll = () => {
+		nextTick(() => {
+			const container = scrollContainer.value;
+			const activeTab = container?.querySelector(".sk-tab-view__tab-item--active");
+			if (!container || !activeTab) return;
+			const containerRect = container.getBoundingClientRect();
+			const activeRect = activeTab.getBoundingClientRect();
+			const scrollLeft = container.scrollLeft;
+			const offset = activeRect.left + activeRect.width / 2 - (containerRect.left + containerRect.width / 2);
+			container.scrollTo({
+				left: scrollLeft + offset,
+				behavior: "smooth"
+			});
+		});
+	};
+	onMounted(syncScroll);
+	router.afterEach(syncScroll);
+	useEventListener(scrollContainer, "wheel", (e) => {
+		if (e.deltaY === 0) return;
+		e.preventDefault();
+		if (scrollContainer.value) scrollContainer.value.scrollLeft += e.deltaY;
+	});
+	return () => {
+		return createVNode("div", {
+			"class": ["sk-tab-view", props.type && `sk-tab-view--${props.type}`],
+			"style": {
+				"--sk-tab-radius": radiusPX.value,
+				"--sk-tab-primary-color": provider.theme?.value?.primaryColor,
+				"--sk-tab-secondary-color": provider.theme?.value?.secondaryColor
+			}
+		}, [createVNode("div", {
+			"ref": scrollContainer,
+			"class": "sk-tab-view__tabs-wrapper"
+		}, [props.tabs?.map((item, index) => {
+			const isActive = props.activeTab(item);
+			const content = slots?.default?.({
+				item,
+				index
+			});
+			if (props.type === "tag") return createVNode("div", {
+				"class": "sk-tab-view__tab-item",
+				"key": props.rowKey(item),
+				"onClick": () => props.onClickItem?.(item),
+				"onMouseup": (e) => props.onMouseUpItem?.(e, item, index),
+				"onContextmenu": (e) => {
+					e.preventDefault();
+					props.onContextMenuItem?.(e, item, index);
+				}
+			}, [createVNode(NTag, {
+				"type": isActive ? "primary" : "default",
+				"bordered": false
+			}, _isSlot(content) ? content : { default: () => [content] })]);
+			return createVNode("div", {
+				"key": props.rowKey(item),
+				"class": ["sk-tab-view__tab-item", { "sk-tab-view__tab-item--active": isActive }],
+				"onClick": () => props.onClickItem?.(item),
+				"onMouseup": (e) => props.onMouseUpItem?.(e, item, index),
+				"onContextmenu": (e) => {
+					e.preventDefault();
+					props.onContextMenuItem?.(e, item, index);
+				}
+			}, [content]);
+		})]), slots?.extra?.()]);
+	};
+}, { props: [
+	"tabs",
+	"rowKey",
+	"activeTab",
+	"type",
+	"onClickItem",
+	"onMouseUpItem",
+	"onContextMenuItem"
+] });
+var tab_view_default = TabView;
+
+//#endregion
+export { getAppProvider as n, tab_view_default as t };

package/lib/wrapper/flex-col-wrapper/index.d.ts

@@ -1,2 +1,2 @@
-import { t as _default } from "../../index-BkYadMq_.js";
+import { t as _default } from "../../index-CXNKqOza.js";
 export { _default as default };

package/lib/wrapper/flex-row-wrapper/index.d.ts

@@ -1,2 +1,2 @@
-import { t as _default } from "../../index-HCwdt_km.js";
+import { t as _default } from "../../index-Dn5-VvYJ.js";
 export { _default as default };

package/lib/wrapper/scroll-wrapper/index.d.ts

@@ -1,2 +1,2 @@
-import { t as _default } from "../../index-C5y1Tk9t.js";
+import { t as _default } from "../../index-D_b-QxXC.js";
 export { _default as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semi-kit/component",
-  "version": "1.4.9",
+  "version": "1.4.10",
   "description": "Semi-Kit Component Library",
   "type": "module",
   "license": "MIT",

package/lib/index-BkYadMq_.d.ts

@@ -1,7 +0,0 @@
-import * as vue6 from "vue";
-import * as vue_jsx_runtime0 from "vue/jsx-runtime";
-
-//#region src/wrapper/flex-col-wrapper/index.d.ts
-declare const _default: vue6.DefineComponent<{}, () => vue_jsx_runtime0.JSX.Element, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, true, {}, any>;
-//#endregion
-export { _default as t };

package/lib/index-C5y1Tk9t.d.ts

@@ -1,7 +0,0 @@
-import * as vue1 from "vue";
-import * as vue_jsx_runtime0 from "vue/jsx-runtime";
-
-//#region src/wrapper/scroll-wrapper/index.d.ts
-declare const _default: vue1.DefineComponent<{}, () => vue_jsx_runtime0.JSX.Element, {}, {}, {}, vue1.ComponentOptionsMixin, vue1.ComponentOptionsMixin, {}, string, vue1.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue1.ComponentProvideOptions, true, {}, any>;
-//#endregion
-export { _default as t };

package/lib/index-HCwdt_km.d.ts

@@ -1,7 +0,0 @@
-import * as vue11 from "vue";
-import * as vue_jsx_runtime1 from "vue/jsx-runtime";
-
-//#region src/wrapper/flex-row-wrapper/index.d.ts
-declare const _default: vue11.DefineComponent<{}, () => vue_jsx_runtime1.JSX.Element, {}, {}, {}, vue11.ComponentOptionsMixin, vue11.ComponentOptionsMixin, {}, string, vue11.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue11.ComponentProvideOptions, true, {}, any>;
-//#endregion
-export { _default as t };

package/lib/tab-view-BktgxoMW.js

@@ -1,168 +0,0 @@
-import { a as useStyle, i as cM, n as cB, r as cE, t as c } from "./cssr-D9_M6jAV.js";
-import { computed, createVNode, defineComponent, getCurrentInstance, inject, nextTick, onMounted, ref } from "vue";
-import { useRouter } from "vue-router";
-import { useEventListener } from "@vueuse/core";
-
-//#region src/_utils/get-provider.ts
-let cachedProvider = null;
-function getAppProvider() {
-	if (cachedProvider) return cachedProvider;
-	if (getCurrentInstance()) {
-		const provider = inject("app-provider");
-		if (provider) {
-			cachedProvider = provider;
-			return provider;
-		}
-	}
-	throw new Error("No outer <AppProvider /> founded.");
-}
-
-//#endregion
-//#region src/tab-view/styles/index.ts
-var styles_default = c([c("@keyframes fade", {
-	"0%": { opacity: 0 },
-	"100%": { opacity: 1 }
-}), cB("tab-view", {
-	backgroundColor: "#fff",
-	display: "flex",
-	gap: "4px",
-	height: "42px",
-	alignItems: "center"
-}, [cE("tabs-wrapper", {
-	display: "flex",
-	flex: 1,
-	height: "100%",
-	overflowX: "auto",
-	padding: "0 10px",
-	whiteSpace: "nowrap",
-	"&::-webkit-scrollbar": { display: "none" },
-	scrollbarWidth: "none"
-}), cE("tab-item", {
-	cursor: "pointer",
-	display: "flex",
-	height: "100%",
-	alignItems: "center",
-	margin: "0 4px",
-	padding: "0 8px",
-	position: "relative",
-	transition: "all 200ms"
-}, [cM("chrome", {}, [
-	c("&:hover:not(.sk-tab-view__tab-item--active)::before", {
-		content: "\"\"",
-		position: "absolute",
-		left: "1px",
-		right: 0,
-		top: "50%",
-		height: "80%",
-		transform: "translateY(-50%)",
-		background: "rgba(0, 0, 0, 0.06)",
-		borderRadius: "var(--sk-tab-radius)"
-	}),
-	c("&.sk-tab-view__tab-item--active", { color: "var(--sk-tab-primary-color)" }),
-	c("&.sk-tab-view__tab-item--active::before", {
-		content: "\"\"",
-		position: "absolute",
-		left: 0,
-		right: 0,
-		bottom: 0,
-		height: "85%",
-		backgroundColor: "var(--sk-tab-secondary-color)",
-		borderRadius: "10px 10px 0 0"
-	}),
-	c("&.sk-tab-view__tab-item--active::after", {
-		content: "\"\"",
-		position: "absolute",
-		bottom: 0,
-		left: "-14px",
-		right: "-14px",
-		height: "14px",
-		background: "radial-gradient(circle at 0 0, transparent 14px, var(--sk-tab-secondary-color) 14px) left bottom / 14px 14px no-repeat, radial-gradient(circle at 100% 0, transparent 14px, var(--sk-tab-secondary-color) 14px) right bottom / 14px 14px no-repeat"
-	})
-]), cM("tab", {
-	padding: "0 4px",
-	marginRight: "10px",
-	cursor: "pointer",
-	transition: "border var(--duration) ease",
-	animation: "fade var(--duration) ease",
-	boxSizing: "border-box",
-	borderBottom: "2px solid transparent"
-}, [c("&:hover", {
-	borderBottom: "2px solid var(--sk-tab-primary-color)",
-	color: "var(--sk-tab-primary-color)"
-}), c("&.sk-tab-view__tab-item--active", {
-	color: "var(--sk-tab-primary-color)",
-	borderBottom: "2px solid var(--sk-tab-primary-color)"
-})])])])]);
-
-//#endregion
-//#region src/tab-view/index.tsx
-const TabView = /* @__PURE__ */ defineComponent((props, { slots }) => {
-	const router = useRouter();
-	useStyle("tab-view", styles_default);
-	const provider = getAppProvider();
-	const radiusPX = computed(() => `${provider.theme?.value?.radius}px`);
-	const scrollContainer = ref();
-	const syncScroll = () => {
-		nextTick(() => {
-			const container = scrollContainer.value;
-			const activeTab = container?.querySelector(".sk-tab-view__tab-item--active");
-			if (!container || !activeTab) return;
-			const containerRect = container.getBoundingClientRect();
-			const activeRect = activeTab.getBoundingClientRect();
-			const scrollLeft = container.scrollLeft;
-			const offset = activeRect.left + activeRect.width / 2 - (containerRect.left + containerRect.width / 2);
-			container.scrollTo({
-				left: scrollLeft + offset,
-				behavior: "smooth"
-			});
-		});
-	};
-	onMounted(syncScroll);
-	router.afterEach(syncScroll);
-	useEventListener(scrollContainer, "wheel", (e) => {
-		if (e.deltaY === 0) return;
-		e.preventDefault();
-		if (scrollContainer.value) scrollContainer.value.scrollLeft += e.deltaY;
-	});
-	return () => {
-		return createVNode("div", {
-			"class": "sk-tab-view",
-			"style": {
-				"--sk-tab-radius": radiusPX.value,
-				"--sk-tab-primary-color": provider.theme?.value?.primaryColor,
-				"--sk-tab-secondary-color": provider.theme?.value?.secondaryColor
-			}
-		}, [createVNode("div", {
-			"ref": scrollContainer,
-			"class": "sk-tab-view__tabs-wrapper"
-		}, [props.tabs?.map((item, index) => createVNode("div", {
-			"key": props.rowKey(item),
-			"class": [
-				"sk-tab-view__tab-item",
-				{ "sk-tab-view__tab-item--active": props.activeTab(item) },
-				`sk-tab-view__tab-item--${props.type}`
-			],
-			"onClick": () => props.onClickItem?.(item),
-			"onMouseup": (e) => props.onMouseUpItem?.(e, item, index),
-			"onContextmenu": (e) => {
-				e.preventDefault();
-				props.onContextMenuItem?.(e, item, index);
-			}
-		}, [slots?.default?.({
-			item,
-			index
-		})]))]), slots?.extra?.()]);
-	};
-}, { props: [
-	"tabs",
-	"rowKey",
-	"activeTab",
-	"type",
-	"onClickItem",
-	"onMouseUpItem",
-	"onContextMenuItem"
-] });
-var tab_view_default = TabView;
-
-//#endregion
-export { getAppProvider as n, tab_view_default as t };