@semi-kit/component 1.4.11 → 1.4.13

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

@@ -1,2 +1,2 @@
-import { t as _default } from "../index-Bvg8aJV4.js";
+import { t as _default } from "../index-BYo86iJS.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-BYo86iJS.d.ts

@@ -0,0 +1,41 @@
+import * as vue0 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: vue0.DefineComponent<vue0.ExtractPropTypes<{
+  readonly locale: StringConstructor;
+  readonly formRuleConfig: vue0.PropType<AppProviderFormRuleConfig>;
+  readonly theme: vue0.PropType<AppProviderTheme>;
+  readonly tab: vue0.PropType<AppProviderTab>;
+}>, () => vue0.VNode<vue0.RendererNode, vue0.RendererElement, {
+  [key: string]: any;
+}>[] | undefined, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<vue0.ExtractPropTypes<{
+  readonly locale: StringConstructor;
+  readonly formRuleConfig: vue0.PropType<AppProviderFormRuleConfig>;
+  readonly theme: vue0.PropType<AppProviderTheme>;
+  readonly tab: vue0.PropType<AppProviderTab>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, vue0.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { AppProviderContext as n, AppProviderFormRuleConfig as r, _default as t };

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import { n as AppProviderContext, r as AppProviderFormRuleConfig, t as _default } from "./index-Bvg8aJV4.js";
+import { n as AppProviderContext, r as AppProviderFormRuleConfig, t as _default } from "./index-BYo86iJS.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";

package/lib/index.js

@@ -1,9 +1,9 @@
-import { n as getAppProvider, t as tab_view_default } from "./tab-view-DN-KFQWP.js";
+import { n as getAppProvider, t as tab_view_default } from "./tab-view-DUJ_O5Nk.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 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/tab-view/index.d.ts

@@ -1,4 +1,4 @@
-import * as vue23 from "vue";
+import * as vue25 from "vue";
 import { VNode } from "vue";
 
 //#region src/tab-view/index.d.ts
@@ -12,6 +12,7 @@ interface PropsType<T> {
   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: {
@@ -20,7 +21,7 @@ interface SlotType<T> {
   }) => VNode;
   extra?: () => VNode;
 }
-declare const TabView: vue23.DefineSetupFnComponent<{
+declare const TabView: vue25.DefineSetupFnComponent<{
   tabs: any;
   rowKey: any;
   activeTab: any;
@@ -28,6 +29,7 @@ declare const TabView: vue23.DefineSetupFnComponent<{
   onClickItem: any;
   onMouseUpItem: any;
   onContextMenuItem: any;
+  onSortEnd: any;
 }, {}, {}, {
   tabs: any;
   rowKey: any;
@@ -36,6 +38,7 @@ declare const TabView: vue23.DefineSetupFnComponent<{
   onClickItem: any;
   onMouseUpItem: any;
   onContextMenuItem: any;
-} & {}, vue23.PublicProps>;
+  onSortEnd: any;
+} & {}, vue25.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-DN-KFQWP.js";
+import { t as tab_view_default } from "../tab-view-DUJ_O5Nk.js";
 import "../cssr-D9_M6jAV.js";
 
 export { tab_view_default as default };

package/lib/{tab-view-DN-KFQWP.js → tab-view-DUJ_O5Nk.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;
@@ -101,7 +102,8 @@ var styles_default = c([cB("tab-view", {
 	}), 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
@@ -130,7 +132,22 @@ const TabView = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			});
 		});
 	};
-	onMounted(syncScroll);
+	watch(() => provider.tab?.value?.sortable, (v) => {
+		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;
@@ -186,7 +203,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,7 +1,7 @@
-import * as vue25 from "vue";
+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: vue25.DefineComponent<{}, () => vue_jsx_runtime1.JSX.Element, {}, {}, {}, vue25.ComponentOptionsMixin, vue25.ComponentOptionsMixin, {}, string, vue25.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue25.ComponentProvideOptions, true, {}, any>;
+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,7 +1,7 @@
-import * as vue4 from "vue";
+import * as vue20 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>;
+declare const _default: vue20.DefineComponent<{}, () => vue_jsx_runtime0.JSX.Element, {}, {}, {}, vue20.ComponentOptionsMixin, vue20.ComponentOptionsMixin, {}, string, vue20.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue20.ComponentProvideOptions, true, {}, any>;
 //#endregion
 export { _default as default };

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

@@ -1,7 +1,7 @@
-import * as vue0 from "vue";
+import * as vue15 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>;
+declare const _default: vue15.DefineComponent<{}, () => vue_jsx_runtime0.JSX.Element, {}, {}, {}, vue15.ComponentOptionsMixin, vue15.ComponentOptionsMixin, {}, string, vue15.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue15.ComponentProvideOptions, true, {}, any>;
 //#endregion
 export { _default as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semi-kit/component",
-  "version": "1.4.11",
+  "version": "1.4.13",
   "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-Bvg8aJV4.d.ts

@@ -1,35 +0,0 @@
-import * as vue9 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: vue9.DefineComponent<vue9.ExtractPropTypes<{
-  readonly locale: StringConstructor;
-  readonly formRuleConfig: vue9.PropType<AppProviderFormRuleConfig>;
-  readonly theme: vue9.PropType<AppProviderTheme>;
-}>, () => vue9.VNode<vue9.RendererNode, vue9.RendererElement, {
-  [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue9.ComponentOptionsMixin, vue9.ComponentOptionsMixin, {}, string, vue9.PublicProps, Readonly<vue9.ExtractPropTypes<{
-  readonly locale: StringConstructor;
-  readonly formRuleConfig: vue9.PropType<AppProviderFormRuleConfig>;
-  readonly theme: vue9.PropType<AppProviderTheme>;
-}>> & Readonly<{}>, {}, {}, {}, {}, string, vue9.ComponentProvideOptions, true, {}, any>;
-//#endregion
-export { AppProviderContext as n, AppProviderFormRuleConfig as r, _default as t };