@semi-kit/component 1.4.10 → 1.4.12

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

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

package/lib/app-provider/index.js

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

package/lib/{app-provider-BNtVdZn9.js → app-provider-chfjw9Ns.js}

@@ -4,7 +4,8 @@ import { defineComponent, provide, toRef } from "vue";
 const appProviderProps = {
 	locale: String,
 	formRuleConfig: Object,
-	theme: Object
+	theme: Object,
+	tab: Object
 };
 
 //#endregion
@@ -16,7 +17,8 @@ var app_provider_default = /* @__PURE__ */ defineComponent({
 		provide("app-provider", {
 			locale: toRef(props, "locale"),
 			formRuleConfig: toRef(props, "formRuleConfig"),
-			theme: toRef(props, "theme")
+			theme: toRef(props, "theme"),
+			tab: toRef(props, "tab")
 		});
 		return () => {
 			return slots.default?.();

package/lib/index-D5VhkB_N.d.ts

@@ -0,0 +1,41 @@
+import * as vue11 from "vue";
+import { Ref } from "vue";
+
+//#region src/app-provider/type.d.ts
+interface AppProviderFormRuleConfig {
+  stringLength?: number;
+  numberLength?: number;
+  numberSize?: number;
+  decimalPlace?: number;
+}
+interface AppProviderTheme {
+  primaryColor?: string;
+  secondaryColor?: string;
+  radius?: number;
+}
+interface AppProviderTab {
+  sortable?: boolean;
+}
+interface AppProviderContext {
+  locale?: Ref<string | undefined>;
+  formRuleConfig?: Ref<AppProviderFormRuleConfig>;
+  theme?: Ref<AppProviderTheme | undefined>;
+  tab?: Ref<AppProviderTab | undefined>;
+}
+//#endregion
+//#region src/app-provider/index.d.ts
+declare const _default: vue11.DefineComponent<vue11.ExtractPropTypes<{
+  readonly locale: StringConstructor;
+  readonly formRuleConfig: vue11.PropType<AppProviderFormRuleConfig>;
+  readonly theme: vue11.PropType<AppProviderTheme>;
+  readonly tab: vue11.PropType<AppProviderTab>;
+}>, () => vue11.VNode<vue11.RendererNode, vue11.RendererElement, {
+  [key: string]: any;
+}>[] | undefined, {}, {}, {}, vue11.ComponentOptionsMixin, vue11.ComponentOptionsMixin, {}, string, vue11.PublicProps, Readonly<vue11.ExtractPropTypes<{
+  readonly locale: StringConstructor;
+  readonly formRuleConfig: vue11.PropType<AppProviderFormRuleConfig>;
+  readonly theme: vue11.PropType<AppProviderTheme>;
+  readonly tab: vue11.PropType<AppProviderTab>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, vue11.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { AppProviderContext as n, AppProviderFormRuleConfig as r, _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-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-B7r2qmH2.js";
+import { n as AppProviderContext, r as AppProviderFormRuleConfig, t as _default } from "./index-D5VhkB_N.js";
+import _default$3 from "./wrapper/scroll-wrapper/index.js";
+import _default$2 from "./wrapper/flex-row-wrapper/index.js";
+import _default$1 from "./wrapper/flex-col-wrapper/index.js";
+import { SemiComponentResolver } from "./resolver.js";
+import TabView from "./tab-view/index.js";
 
 //#region src/_utils/get-provider.d.ts
 declare function getAppProvider(): AppProviderContext;

package/lib/index.js

@@ -1,9 +1,9 @@
-import { n as getAppProvider, t as tab_view_default } from "./tab-view-BXYSwLG9.js";
+import { n as getAppProvider, t as tab_view_default } from "./tab-view-CaI2kmjx.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";
+import { t as app_provider_default } from "./app-provider-chfjw9Ns.js";
+import { SemiComponentResolver } from "./resolver.js";
 
 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,10 @@
-import { t as SemiComponentResolver } from "./resolver-BVvgCCAW.js";
+//#region src/resolver.d.ts
+declare const SemiComponentResolver: () => {
+  type: "component";
+  resolve: (name: string) => {
+    name: string;
+    from: string;
+  } | undefined;
+};
+//#endregion
 export { SemiComponentResolver };

package/lib/resolver.js

@@ -1,3 +1,19 @@
-import { t as SemiComponentResolver } from "./resolver-DP3BDWck.js";
+//#region src/resolver.ts
+const SemiComponentResolver = () => {
+	return {
+		type: "component",
+		resolve: (name) => {
+			if ([
+				"ScrollWrapper",
+				"FlexRowWrapper",
+				"FlexColWrapper"
+			].includes(name)) return {
+				name,
+				from: "@semi-kit/component"
+			};
+		}
+	};
+};
 
+//#endregion
 export { SemiComponentResolver };

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

@@ -1,2 +1,44 @@
-import { i as TabView, n as SlotType, r as TabActionType, t as PropsType } from "../index-B7r2qmH2.js";
+import * as vue9 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' | 'tag';
+  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;
+  onSortEnd?: (newIndex: number, oldIndex: number) => void;
+}
+interface SlotType<T> {
+  default?: (props: {
+    item: T;
+    index: number;
+  }) => VNode;
+  extra?: () => VNode;
+}
+declare const TabView: vue9.DefineSetupFnComponent<{
+  tabs: any;
+  rowKey: any;
+  activeTab: any;
+  type: any;
+  onClickItem: any;
+  onMouseUpItem: any;
+  onContextMenuItem: any;
+  onSortEnd: any;
+}, {}, {}, {
+  tabs: any;
+  rowKey: any;
+  activeTab: any;
+  type: any;
+  onClickItem: any;
+  onMouseUpItem: any;
+  onContextMenuItem: any;
+  onSortEnd: any;
+} & {}, vue9.PublicProps>;
+//#endregion
 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-BXYSwLG9.js";
+import { t as tab_view_default } from "../tab-view-CaI2kmjx.js";
 import "../cssr-D9_M6jAV.js";
 
 export { tab_view_default as default };

package/lib/{tab-view-BXYSwLG9.js → tab-view-CaI2kmjx.js}

@@ -1,8 +1,9 @@
 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 { computed, createVNode, defineComponent, getCurrentInstance, inject, isVNode, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import { NTag } from "naive-ui";
 import { useRouter } from "vue-router";
 import { useEventListener } from "@vueuse/core";
+import { useSortable } from "@semi-kit/hooks/sortable";
 
 //#region src/_utils/get-provider.ts
 let cachedProvider = null;
@@ -20,10 +21,7 @@ function getAppProvider() {
 
 //#endregion
 //#region src/tab-view/styles/index.ts
-var styles_default = c([c("@keyframes fade", {
-	"0%": { opacity: 0 },
-	"100%": { opacity: 1 }
-}), cB("tab-view", {
+var styles_default = c([cB("tab-view", {
 	display: "flex",
 	gap: "4px",
 	height: "42px",
@@ -47,8 +45,7 @@ var styles_default = c([c("@keyframes fade", {
 		alignItems: "center",
 		margin: "0 4px",
 		padding: "0 8px",
-		position: "relative",
-		transition: "all 200ms"
+		position: "relative"
 	}),
 	cM("chrome", [cE("tab-item", [c("&:hover:not(.sk-tab-view__tab-item--active)::before", {
 		content: "\"\"",
@@ -86,7 +83,6 @@ var styles_default = c([c("@keyframes fade", {
 		padding: "0 4px",
 		marginRight: "10px",
 		transition: "border var(--duration) ease",
-		animation: "fade var(--duration) ease",
 		boxSizing: "border-box",
 		borderBottom: "2px solid transparent",
 		"&:hover": {
@@ -106,7 +102,8 @@ var styles_default = c([c("@keyframes fade", {
 	}), c("&:hover .n-tag", {
 		color: "var(--sk-tab-primary-color)",
 		backgroundColor: "var(--sk-tab-secondary-color)"
-	}, [c("button", { color: "var(--sk-tab-primary-color)" })])])])
+	}, [c("button", { color: "var(--sk-tab-primary-color)" })])])]),
+	c(".sk-tab-view-ghost", { opacity: .4 }, [c("*", { opacity: 0 })])
 ])]);
 
 //#endregion
@@ -135,7 +132,23 @@ const TabView = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			});
 		});
 	};
-	onMounted(syncScroll);
+	watch(() => provider.tab?.value?.sortable, (v) => {
+		console.log(v, 222);
+		const instance = getInstance();
+		if (instance) instance.option("disabled", !v);
+	});
+	const { initSortable, destroy, getInstance } = useSortable(".sk-tab-view__tabs-wrapper", {
+		ghostClass: "sk-tab-view-ghost",
+		onEnd({ newIndex, oldIndex }) {
+			if (newIndex === void 0 || oldIndex === void 0 || newIndex === oldIndex) return;
+			props.onSortEnd?.(newIndex, oldIndex);
+		}
+	});
+	onMounted(() => {
+		nextTick(initSortable);
+		syncScroll();
+	});
+	onUnmounted(destroy);
 	router.afterEach(syncScroll);
 	useEventListener(scrollContainer, "wheel", (e) => {
 		if (e.deltaY === 0) return;
@@ -191,7 +204,8 @@ const TabView = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	"type",
 	"onClickItem",
 	"onMouseUpItem",
-	"onContextMenuItem"
+	"onContextMenuItem",
+	"onSortEnd"
 ] });
 var tab_view_default = TabView;
 

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

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

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

@@ -1,2 +1,7 @@
-import { t as _default } from "../../index-Dn5-VvYJ.js";
+import * as vue4 from "vue";
+import * as vue_jsx_runtime0 from "vue/jsx-runtime";
+
+//#region src/wrapper/flex-row-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 default };

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

@@ -1,2 +1,7 @@
-import { t as _default } from "../../index-D_b-QxXC.js";
+import * as vue0 from "vue";
+import * as vue_jsx_runtime0 from "vue/jsx-runtime";
+
+//#region src/wrapper/scroll-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 default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semi-kit/component",
-  "version": "1.4.10",
+  "version": "1.4.12",
   "description": "Semi-Kit Component Library",
   "type": "module",
   "license": "MIT",
@@ -61,7 +61,9 @@
     "vite": "catalog:",
     "vue": "catalog:",
     "vue-router": "catalog:",
-    "vue-tsc": "catalog:"
+    "vue-tsc": "catalog:",
+    "sortablejs": "catalog:",
+    "@types/sortablejs": "catalog:"
   },
   "peerDependencies": {
     "@css-render/plugin-bem": "*",
@@ -73,6 +75,8 @@
     "less": "*",
     "naive-ui": "*",
     "vue": "*",
-    "vue-router": "*"
+    "vue-router": "*",
+    "sortablejs": "*",
+    "@types/sortablejs": "*"
   }
 }

package/lib/index-B7r2qmH2.d.ts

@@ -1,41 +0,0 @@
-import * as vue14 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' | 'tag';
-  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: vue14.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;
-} & {}, vue14.PublicProps>;
-//#endregion
-export { TabView as i, SlotType as n, TabActionType as r, PropsType as t };

package/lib/index-C-Oqap1P.d.ts

@@ -1,35 +0,0 @@
-import * as vue16 from "vue";
-import { Ref } from "vue";
-
-//#region src/app-provider/type.d.ts
-interface AppProviderFormRuleConfig {
-  stringLength?: number;
-  numberLength?: number;
-  numberSize?: number;
-  decimalPlace?: number;
-}
-interface AppProviderTheme {
-  primaryColor?: string;
-  secondaryColor?: string;
-  radius?: number;
-}
-interface AppProviderContext {
-  locale?: Ref<string | undefined>;
-  formRuleConfig?: Ref<AppProviderFormRuleConfig>;
-  theme?: Ref<AppProviderTheme | undefined>;
-}
-//#endregion
-//#region src/app-provider/index.d.ts
-declare const _default: vue16.DefineComponent<vue16.ExtractPropTypes<{
-  readonly locale: StringConstructor;
-  readonly formRuleConfig: vue16.PropType<AppProviderFormRuleConfig>;
-  readonly theme: vue16.PropType<AppProviderTheme>;
-}>, () => vue16.VNode<vue16.RendererNode, vue16.RendererElement, {
-  [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue16.ComponentOptionsMixin, vue16.ComponentOptionsMixin, {}, string, vue16.PublicProps, Readonly<vue16.ExtractPropTypes<{
-  readonly locale: StringConstructor;
-  readonly formRuleConfig: vue16.PropType<AppProviderFormRuleConfig>;
-  readonly theme: vue16.PropType<AppProviderTheme>;
-}>> & Readonly<{}>, {}, {}, {}, {}, string, vue16.ComponentProvideOptions, true, {}, any>;
-//#endregion
-export { AppProviderContext as n, AppProviderFormRuleConfig as r, _default as t };

package/lib/index-CXNKqOza.d.ts

@@ -1,7 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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/resolver-BVvgCCAW.d.ts

@@ -1,10 +0,0 @@
-//#region src/resolver.d.ts
-declare const SemiComponentResolver: () => {
-  type: "component";
-  resolve: (name: string) => {
-    name: string;
-    from: string;
-  } | undefined;
-};
-//#endregion
-export { SemiComponentResolver as t };

package/lib/resolver-DP3BDWck.js

@@ -1,19 +0,0 @@
-//#region src/resolver.ts
-const SemiComponentResolver = () => {
-	return {
-		type: "component",
-		resolve: (name) => {
-			if ([
-				"ScrollWrapper",
-				"FlexRowWrapper",
-				"FlexColWrapper"
-			].includes(name)) return {
-				name,
-				from: "@semi-kit/component"
-			};
-		}
-	};
-};
-
-//#endregion
-export { SemiComponentResolver as t };