@semi-kit/component 1.2.20 → 1.2.22

package/lib/app-provider/index.d.ts

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

package/lib/app-provider/index.js

@@ -1,3 +1,3 @@
-import { t as app_provider_default } from "../app-provider-DZfUq8qO.js";
+import { t as app_provider_default } from "../app-provider-BNtVdZn9.js";
 
 export { app_provider_default as default };

package/lib/{cssr-CcF0hyWR.js → cssr-D9_M6jAV.js}

@@ -19,10 +19,10 @@ function useStyle(mountId, style) {
 //#endregion
 //#region src/_utils/cssr.ts
 const cssr = CssRender();
-const plugin = bem();
+const plugin = bem({ blockPrefix: ".sk-" });
 cssr.use(plugin);
 const { c, find } = cssr;
 const { cB, cE, cM, cNotM } = plugin;
 
 //#endregion
-export { useStyle as i, cB as n, cE as r, c as t };
+export { useStyle as a, cM as i, cB as n, cE as r, c as t };

package/lib/{flex-col-wrapper-OHruHZAn.js → flex-col-wrapper-BYnCXcY5.js}

@@ -1,4 +1,4 @@
-import { i as useStyle, n as cB, t as c } from "./cssr-CcF0hyWR.js";
+import { a as useStyle, n as cB, t as c } from "./cssr-D9_M6jAV.js";
 import { createVNode, defineComponent } from "vue";
 import { appVars } from "@semi-kit/theme/vars";
 
@@ -17,7 +17,7 @@ var flex_col_wrapper_default = /* @__PURE__ */ defineComponent({
 	name: "FlexColWrapper",
 	setup(props, { slots }) {
 		useStyle("flex-col-wrapper", styles_default);
-		return () => createVNode("div", { "class": "flex-col-wrapper" }, [slots?.default?.()]);
+		return () => createVNode("div", { "class": "sk-flex-col-wrapper" }, [slots?.default?.()]);
 	}
 });
 

package/lib/{flex-row-wrapper-B0qzkMOh.js → flex-row-wrapper-70R3tK7w.js}

@@ -1,4 +1,4 @@
-import { i as useStyle, n as cB, t as c } from "./cssr-CcF0hyWR.js";
+import { a as useStyle, n as cB, t as c } from "./cssr-D9_M6jAV.js";
 import { createVNode, defineComponent } from "vue";
 import { appVars } from "@semi-kit/theme/vars";
 
@@ -17,7 +17,7 @@ var flex_row_wrapper_default = /* @__PURE__ */ defineComponent({
 	name: "FlexRowWrapper",
 	setup(props, { slots }) {
 		useStyle("flex-row-wrapper", styles_default);
-		return () => createVNode("div", { "class": "flex-row-wrapper" }, [slots?.default?.()]);
+		return () => createVNode("div", { "class": "sk-flex-row-wrapper" }, [slots?.default?.()]);
 	}
 });
 

package/lib/{index-DY0ZsMNN.d.ts → index-CLhlX_GZ.d.ts}

@@ -10,6 +10,7 @@ interface AppProviderFormRuleConfig {
 }
 interface AppProviderTheme {
   primaryColor?: string;
+  secondaryColor?: string;
   radius?: number;
 }
 interface AppProviderContext {

package/lib/index-DThW3Pwy.d.ts

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

package/lib/{index-DoMys3Tv.d.ts → index-DYC7llhj.d.ts}

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

package/lib/index-b_0W9OU7.d.ts

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

package/lib/index.d.ts

@@ -1,10 +1,11 @@
-import { n as AppProviderContext, r as AppProviderFormRuleConfig, t as _default } from "./index-DY0ZsMNN.js";
-import { t as _default$3 } from "./index-CcD-RLzw.js";
-import { t as _default$2 } from "./index-DoMys3Tv.js";
-import { t as _default$1 } from "./index-dcWQeOND.js";
-import { t as SemiComponentResolver } from "./resolver-BrOnUjEv.js";
+import { n as AppProviderContext, r as AppProviderFormRuleConfig, t as _default } from "./index-CLhlX_GZ.js";
+import { t as _default$3 } from "./index-D6zG_LNP.js";
+import { t as _default$2 } from "./index-b_0W9OU7.js";
+import { t as _default$1 } from "./index-DYC7llhj.js";
+import { t as SemiComponentResolver } from "./resolver-BVvgCCAW.js";
+import { i as TabView } from "./index-DThW3Pwy.js";
 
 //#region src/_utils/get-provider.d.ts
 declare function getAppProvider(): AppProviderContext;
 //#endregion
-export { _default as AppProvider, type AppProviderContext, type AppProviderFormRuleConfig, _default$1 as FlexColWrapper, _default$2 as FlexRowWrapper, _default$3 as ScrollWrapper, SemiComponentResolver, getAppProvider };
+export { _default as AppProvider, type AppProviderContext, type AppProviderFormRuleConfig, _default$1 as FlexColWrapper, _default$2 as FlexRowWrapper, _default$3 as ScrollWrapper, SemiComponentResolver, TabView, getAppProvider };

package/lib/index.js

@@ -1,24 +1,9 @@
-import "./cssr-CcF0hyWR.js";
-import { t as scroll_wrapper_default } from "./scroll-wrapper-DdsphqoK.js";
-import { t as flex_row_wrapper_default } from "./flex-row-wrapper-B0qzkMOh.js";
-import { t as flex_col_wrapper_default } from "./flex-col-wrapper-OHruHZAn.js";
-import { t as app_provider_default } from "./app-provider-DZfUq8qO.js";
-import { t as SemiComponentResolver } from "./resolver-DRvP1zo4.js";
-import { getCurrentInstance, inject } from "vue";
+import { n as getAppProvider, t as tab_view_default } from "./tab-view-DL1I4gf9.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";
+import { t as flex_col_wrapper_default } from "./flex-col-wrapper-BYnCXcY5.js";
+import { t as app_provider_default } from "./app-provider-BNtVdZn9.js";
+import { t as SemiComponentResolver } from "./resolver-DP3BDWck.js";
 
-//#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
-export { app_provider_default as AppProvider, flex_col_wrapper_default as FlexColWrapper, flex_row_wrapper_default as FlexRowWrapper, scroll_wrapper_default as ScrollWrapper, SemiComponentResolver, getAppProvider };
+export { app_provider_default as AppProvider, flex_col_wrapper_default as FlexColWrapper, flex_row_wrapper_default as FlexRowWrapper, scroll_wrapper_default as ScrollWrapper, SemiComponentResolver, tab_view_default as TabView, getAppProvider };

package/lib/resolver.d.ts

@@ -1,2 +1,2 @@
-import { t as SemiComponentResolver } from "./resolver-BrOnUjEv.js";
+import { t as SemiComponentResolver } from "./resolver-BVvgCCAW.js";
 export { SemiComponentResolver };

package/lib/resolver.js

@@ -1,3 +1,3 @@
-import { t as SemiComponentResolver } from "./resolver-DRvP1zo4.js";
+import { t as SemiComponentResolver } from "./resolver-DP3BDWck.js";
 
 export { SemiComponentResolver };

package/lib/{scroll-wrapper-DdsphqoK.js → scroll-wrapper-DVAnbCLj.js}

@@ -1,4 +1,4 @@
-import { i as useStyle, n as cB, r as cE, t as c } from "./cssr-CcF0hyWR.js";
+import { a as useStyle, n as cB, r as cE, t as c } from "./cssr-D9_M6jAV.js";
 import { createVNode, defineComponent } from "vue";
 import { appVars } from "@semi-kit/theme/vars";
 import { NScrollbar } from "naive-ui";
@@ -15,7 +15,7 @@ var scroll_wrapper_default = /* @__PURE__ */ defineComponent({
 	name: "ScrollWrapper",
 	setup(props, { slots }) {
 		useStyle("scroll-wrapper", styles_default);
-		return () => createVNode("div", { "class": "scroll-wrapper" }, [createVNode(NScrollbar, { "class": "scroll-wrapper__scrollbar" }, slots)]);
+		return () => createVNode("div", { "class": "sk-scroll-wrapper" }, [createVNode(NScrollbar, { "class": "sk-scroll-wrapper__scrollbar" }, slots)]);
 	}
 });
 

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

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

package/lib/tab-view/index.js

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

package/lib/tab-view-DL1I4gf9.js

@@ -0,0 +1,167 @@
+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",
+	padding: "0 4px"
+}, [cE("tabs-wrapper", {
+	display: "flex",
+	flex: 1,
+	height: "100%",
+	overflowX: "auto",
+	whiteSpace: "nowrap",
+	"&::-webkit-scrollbar": { display: "none" },
+	scrollbarWidth: "none"
+}), cE("tab-item", {
+	cursor: "pointer",
+	display: "flex",
+	height: "100%",
+	alignItems: "center",
+	margin: "0 6px",
+	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)",
+	"&::before": {
+		content: "\"\"",
+		position: "absolute",
+		left: 0,
+		right: 0,
+		bottom: 0,
+		height: "90%",
+		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", {
+	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 };

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

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

package/lib/wrapper/flex-col-wrapper/index.js

@@ -1,4 +1,4 @@
-import "../../cssr-CcF0hyWR.js";
-import { t as flex_col_wrapper_default } from "../../flex-col-wrapper-OHruHZAn.js";
+import "../../cssr-D9_M6jAV.js";
+import { t as flex_col_wrapper_default } from "../../flex-col-wrapper-BYnCXcY5.js";
 
 export { flex_col_wrapper_default as default };

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

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

package/lib/wrapper/flex-row-wrapper/index.js

@@ -1,4 +1,4 @@
-import "../../cssr-CcF0hyWR.js";
-import { t as flex_row_wrapper_default } from "../../flex-row-wrapper-B0qzkMOh.js";
+import "../../cssr-D9_M6jAV.js";
+import { t as flex_row_wrapper_default } from "../../flex-row-wrapper-70R3tK7w.js";
 
 export { flex_row_wrapper_default as default };

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

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

package/lib/wrapper/scroll-wrapper/index.js

@@ -1,4 +1,4 @@
-import "../../cssr-CcF0hyWR.js";
-import { t as scroll_wrapper_default } from "../../scroll-wrapper-DdsphqoK.js";
+import "../../cssr-D9_M6jAV.js";
+import { t as scroll_wrapper_default } from "../../scroll-wrapper-DVAnbCLj.js";
 
 export { scroll_wrapper_default as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semi-kit/component",
-  "version": "1.2.20",
+  "version": "1.2.22",
   "description": "Semi-Kit Component Library",
   "type": "module",
   "license": "MIT",
@@ -23,6 +23,7 @@
     ".": "./lib/index.js",
     "./app-provider": "./lib/app-provider/index.js",
     "./resolver": "./lib/resolver.js",
+    "./tab-view": "./lib/tab-view/index.js",
     "./wrapper/flex-col-wrapper": "./lib/wrapper/flex-col-wrapper/index.js",
     "./wrapper/flex-row-wrapper": "./lib/wrapper/flex-row-wrapper/index.js",
     "./wrapper/scroll-wrapper": "./lib/wrapper/scroll-wrapper/index.js",
@@ -40,28 +41,38 @@
     "release": "npm publish",
     "prepublishOnly": "pnpm run build"
   },
-  "dependencies": {
-    "@css-render/plugin-bem": "catalog:",
-    "css-render": "catalog:"
-  },
   "devDependencies": {
+    "@css-render/plugin-bem": "catalog:",
+    "@semi-kit/hooks": "workspace:*",
+    "@semi-kit/theme": "workspace:*",
     "@types/node": "catalog:",
+    "@visulima/rollup-plugin-css": "1.0.0-alpha.1",
     "@vitejs/plugin-vue": "catalog:",
     "@vitejs/plugin-vue-jsx": "catalog:",
+    "@vueuse/core": "catalog:",
     "bumpp": "catalog:",
+    "css-render": "catalog:",
+    "es-toolkit": "catalog:",
     "happy-dom": "catalog:",
+    "less": "catalog:",
+    "naive-ui": "catalog:",
     "tsdown": "catalog:",
     "typescript": "catalog:",
     "vite": "catalog:",
     "vue": "catalog:",
-    "vue-tsc": "catalog:",
-    "naive-ui": "catalog:",
-    "@semi-kit/theme": "workspace:*"
+    "vue-router": "catalog:",
+    "vue-tsc": "catalog:"
   },
   "peerDependencies": {
+    "@css-render/plugin-bem": "*",
+    "@semi-kit/hooks": "*",
+    "@semi-kit/theme": "*",
+    "@vueuse/core": "*",
+    "css-render": "*",
+    "es-toolkit": "*",
+    "less": "*",
     "naive-ui": "*",
     "vue": "*",
-    "es-toolkit": "*",
-    "@semi-kit/theme": "*"
+    "vue-router": "*"
   }
 }

package/lib/index-dcWQeOND.d.ts

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