@semi-kit/component 1.2.21 → 1.2.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/app-provider/index.d.ts +1 -1
- package/lib/app-provider/index.js +1 -1
- package/lib/{cssr-CcF0hyWR.js → cssr-D9_M6jAV.js} +2 -2
- package/lib/{flex-col-wrapper-OHruHZAn.js → flex-col-wrapper-BYnCXcY5.js} +2 -2
- package/lib/{flex-row-wrapper-B0qzkMOh.js → flex-row-wrapper-70R3tK7w.js} +2 -2
- package/lib/index-CLhlX_GZ.d.ts +35 -0
- package/lib/index-Ch99vwZm.d.ts +7 -0
- package/lib/index-DThW3Pwy.d.ts +41 -0
- package/lib/{index-BVUxVKNA.d.ts → index-DVtDY-TP.d.ts} +1 -1
- package/lib/index-DYC7llhj.d.ts +7 -0
- package/lib/index.d.ts +7 -6
- package/lib/index.js +8 -23
- package/lib/resolver.d.ts +1 -1
- package/lib/resolver.js +1 -1
- package/lib/{scroll-wrapper-DdsphqoK.js → scroll-wrapper-DVAnbCLj.js} +2 -2
- package/lib/tab-view/index.d.ts +2 -0
- package/lib/tab-view/index.js +4 -0
- package/lib/tab-view-DIEbr_n8.js +167 -0
- package/lib/wrapper/flex-col-wrapper/index.d.ts +1 -1
- package/lib/wrapper/flex-col-wrapper/index.js +2 -2
- package/lib/wrapper/flex-row-wrapper/index.d.ts +1 -1
- package/lib/wrapper/flex-row-wrapper/index.js +2 -2
- package/lib/wrapper/scroll-wrapper/index.d.ts +1 -1
- package/lib/wrapper/scroll-wrapper/index.js +2 -2
- package/package.json +20 -9
- package/lib/index-DOM7zUci.d.ts +0 -7
- package/lib/index-ciydAdjM.d.ts +0 -7
- package/lib/index-vqUwpfoI.d.ts +0 -34
- /package/lib/{app-provider-DZfUq8qO.js → app-provider-BNtVdZn9.js} +0 -0
- /package/lib/{resolver-BrOnUjEv.d.ts → resolver-BVvgCCAW.d.ts} +0 -0
- /package/lib/{resolver-DRvP1zo4.js → resolver-DP3BDWck.js} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as _default } from "../index-
|
|
1
|
+
import { t as _default } from "../index-CLhlX_GZ.js";
|
|
2
2
|
export { _default as default };
|
|
@@ -19,10 +19,10 @@ function useStyle(mountId, style) {
|
|
|
19
19
|
//#endregion
|
|
20
20
|
//#region src/_utils/cssr.ts
|
|
21
21
|
const cssr = CssRender();
|
|
22
|
-
const plugin = bem();
|
|
22
|
+
const plugin = bem({ blockPrefix: ".sk-" });
|
|
23
23
|
cssr.use(plugin);
|
|
24
24
|
const { c, find } = cssr;
|
|
25
25
|
const { cB, cE, cM, cNotM } = plugin;
|
|
26
26
|
|
|
27
27
|
//#endregion
|
|
28
|
-
export { useStyle as i, cB as n, cE as r, c as t };
|
|
28
|
+
export { useStyle as a, cM as i, cB as n, cE as r, c as t };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { a as useStyle, n as cB, t as c } from "./cssr-D9_M6jAV.js";
|
|
2
2
|
import { createVNode, defineComponent } from "vue";
|
|
3
3
|
import { appVars } from "@semi-kit/theme/vars";
|
|
4
4
|
|
|
@@ -17,7 +17,7 @@ var flex_col_wrapper_default = /* @__PURE__ */ defineComponent({
|
|
|
17
17
|
name: "FlexColWrapper",
|
|
18
18
|
setup(props, { slots }) {
|
|
19
19
|
useStyle("flex-col-wrapper", styles_default);
|
|
20
|
-
return () => createVNode("div", { "class": "flex-col-wrapper" }, [slots?.default?.()]);
|
|
20
|
+
return () => createVNode("div", { "class": "sk-flex-col-wrapper" }, [slots?.default?.()]);
|
|
21
21
|
}
|
|
22
22
|
});
|
|
23
23
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { a as useStyle, n as cB, t as c } from "./cssr-D9_M6jAV.js";
|
|
2
2
|
import { createVNode, defineComponent } from "vue";
|
|
3
3
|
import { appVars } from "@semi-kit/theme/vars";
|
|
4
4
|
|
|
@@ -17,7 +17,7 @@ var flex_row_wrapper_default = /* @__PURE__ */ defineComponent({
|
|
|
17
17
|
name: "FlexRowWrapper",
|
|
18
18
|
setup(props, { slots }) {
|
|
19
19
|
useStyle("flex-row-wrapper", styles_default);
|
|
20
|
-
return () => createVNode("div", { "class": "flex-row-wrapper" }, [slots?.default?.()]);
|
|
20
|
+
return () => createVNode("div", { "class": "sk-flex-row-wrapper" }, [slots?.default?.()]);
|
|
21
21
|
}
|
|
22
22
|
});
|
|
23
23
|
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as vue4 from "vue";
|
|
2
|
+
import { Ref } from "vue";
|
|
3
|
+
|
|
4
|
+
//#region src/app-provider/type.d.ts
|
|
5
|
+
interface AppProviderFormRuleConfig {
|
|
6
|
+
stringLength?: number;
|
|
7
|
+
numberLength?: number;
|
|
8
|
+
numberSize?: number;
|
|
9
|
+
decimalPlace?: number;
|
|
10
|
+
}
|
|
11
|
+
interface AppProviderTheme {
|
|
12
|
+
primaryColor?: string;
|
|
13
|
+
secondaryColor?: string;
|
|
14
|
+
radius?: number;
|
|
15
|
+
}
|
|
16
|
+
interface AppProviderContext {
|
|
17
|
+
locale?: Ref<string | undefined>;
|
|
18
|
+
formRuleConfig?: Ref<AppProviderFormRuleConfig>;
|
|
19
|
+
theme?: Ref<AppProviderTheme | undefined>;
|
|
20
|
+
}
|
|
21
|
+
//#endregion
|
|
22
|
+
//#region src/app-provider/index.d.ts
|
|
23
|
+
declare const _default: vue4.DefineComponent<vue4.ExtractPropTypes<{
|
|
24
|
+
readonly locale: StringConstructor;
|
|
25
|
+
readonly formRuleConfig: vue4.PropType<AppProviderFormRuleConfig>;
|
|
26
|
+
readonly theme: vue4.PropType<AppProviderTheme>;
|
|
27
|
+
}>, () => vue4.VNode<vue4.RendererNode, vue4.RendererElement, {
|
|
28
|
+
[key: string]: any;
|
|
29
|
+
}>[] | undefined, {}, {}, {}, vue4.ComponentOptionsMixin, vue4.ComponentOptionsMixin, {}, string, vue4.PublicProps, Readonly<vue4.ExtractPropTypes<{
|
|
30
|
+
readonly locale: StringConstructor;
|
|
31
|
+
readonly formRuleConfig: vue4.PropType<AppProviderFormRuleConfig>;
|
|
32
|
+
readonly theme: vue4.PropType<AppProviderTheme>;
|
|
33
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, string, vue4.ComponentProvideOptions, true, {}, any>;
|
|
34
|
+
//#endregion
|
|
35
|
+
export { AppProviderContext as n, AppProviderFormRuleConfig as r, _default as t };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as vue25 from "vue";
|
|
2
|
+
import * as vue_jsx_runtime1 from "vue/jsx-runtime";
|
|
3
|
+
|
|
4
|
+
//#region src/wrapper/scroll-wrapper/index.d.ts
|
|
5
|
+
declare const _default: vue25.DefineComponent<{}, () => vue_jsx_runtime1.JSX.Element, {}, {}, {}, vue25.ComponentOptionsMixin, vue25.ComponentOptionsMixin, {}, string, vue25.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue25.ComponentProvideOptions, true, {}, any>;
|
|
6
|
+
//#endregion
|
|
7
|
+
export { _default as t };
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import * as vue23 from "vue";
|
|
2
|
+
import { VNode } from "vue";
|
|
3
|
+
|
|
4
|
+
//#region src/tab-view/index.d.ts
|
|
5
|
+
type TabActionType = 'closeTab' | 'closeOtherTabs' | 'closeLeftTabs' | 'closeRightTabs';
|
|
6
|
+
interface PropsType<T> {
|
|
7
|
+
rowKey: (item: T) => string | number;
|
|
8
|
+
activeTab: (item: T) => boolean;
|
|
9
|
+
tabs: T[];
|
|
10
|
+
type?: 'chrome' | 'tab';
|
|
11
|
+
onClickItem?: (item: T) => void;
|
|
12
|
+
onMouseUpItem?: (e: MouseEvent, item: T, index: number) => void;
|
|
13
|
+
onDropdownSelect?: (key: TabActionType, index: number) => void;
|
|
14
|
+
onContextMenuItem?: (e: MouseEvent, item: T, index: number) => void;
|
|
15
|
+
}
|
|
16
|
+
interface SlotType<T> {
|
|
17
|
+
default?: (props: {
|
|
18
|
+
item: T;
|
|
19
|
+
index: number;
|
|
20
|
+
}) => VNode;
|
|
21
|
+
extra?: () => VNode;
|
|
22
|
+
}
|
|
23
|
+
declare const TabView: vue23.DefineSetupFnComponent<{
|
|
24
|
+
tabs: any;
|
|
25
|
+
rowKey: any;
|
|
26
|
+
activeTab: any;
|
|
27
|
+
type: any;
|
|
28
|
+
onClickItem: any;
|
|
29
|
+
onMouseUpItem: any;
|
|
30
|
+
onContextMenuItem: any;
|
|
31
|
+
}, {}, {}, {
|
|
32
|
+
tabs: any;
|
|
33
|
+
rowKey: any;
|
|
34
|
+
activeTab: any;
|
|
35
|
+
type: any;
|
|
36
|
+
onClickItem: any;
|
|
37
|
+
onMouseUpItem: any;
|
|
38
|
+
onContextMenuItem: any;
|
|
39
|
+
} & {}, vue23.PublicProps>;
|
|
40
|
+
//#endregion
|
|
41
|
+
export { TabView as i, SlotType as n, TabActionType as r, PropsType as t };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as vue0 from "vue";
|
|
2
2
|
import * as vue_jsx_runtime0 from "vue/jsx-runtime";
|
|
3
3
|
|
|
4
|
-
//#region src/wrapper/flex-
|
|
4
|
+
//#region src/wrapper/flex-row-wrapper/index.d.ts
|
|
5
5
|
declare const _default: vue0.DefineComponent<{}, () => vue_jsx_runtime0.JSX.Element, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue0.ComponentProvideOptions, true, {}, any>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { _default as t };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as vue18 from "vue";
|
|
2
|
+
import * as vue_jsx_runtime0 from "vue/jsx-runtime";
|
|
3
|
+
|
|
4
|
+
//#region src/wrapper/flex-col-wrapper/index.d.ts
|
|
5
|
+
declare const _default: vue18.DefineComponent<{}, () => vue_jsx_runtime0.JSX.Element, {}, {}, {}, vue18.ComponentOptionsMixin, vue18.ComponentOptionsMixin, {}, string, vue18.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue18.ComponentProvideOptions, true, {}, any>;
|
|
6
|
+
//#endregion
|
|
7
|
+
export { _default as t };
|
package/lib/index.d.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { n as AppProviderContext, r as AppProviderFormRuleConfig, t as _default } from "./index-
|
|
2
|
-
import { t as _default$3 } from "./index-
|
|
3
|
-
import { t as _default$2 } from "./index-
|
|
4
|
-
import { t as _default$1 } from "./index-
|
|
5
|
-
import { t as SemiComponentResolver } from "./resolver-
|
|
1
|
+
import { n as AppProviderContext, r as AppProviderFormRuleConfig, t as _default } from "./index-CLhlX_GZ.js";
|
|
2
|
+
import { t as _default$3 } from "./index-Ch99vwZm.js";
|
|
3
|
+
import { t as _default$2 } from "./index-DVtDY-TP.js";
|
|
4
|
+
import { t as _default$1 } from "./index-DYC7llhj.js";
|
|
5
|
+
import { t as SemiComponentResolver } from "./resolver-BVvgCCAW.js";
|
|
6
|
+
import { i as TabView } from "./index-DThW3Pwy.js";
|
|
6
7
|
|
|
7
8
|
//#region src/_utils/get-provider.d.ts
|
|
8
9
|
declare function getAppProvider(): AppProviderContext;
|
|
9
10
|
//#endregion
|
|
10
|
-
export { _default as AppProvider, type AppProviderContext, type AppProviderFormRuleConfig, _default$1 as FlexColWrapper, _default$2 as FlexRowWrapper, _default$3 as ScrollWrapper, SemiComponentResolver, getAppProvider };
|
|
11
|
+
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
CHANGED
|
@@ -1,24 +1,9 @@
|
|
|
1
|
-
import "./
|
|
2
|
-
import
|
|
3
|
-
import { t as
|
|
4
|
-
import { t as
|
|
5
|
-
import { t as
|
|
6
|
-
import { t as
|
|
7
|
-
import {
|
|
1
|
+
import { n as getAppProvider, t as tab_view_default } from "./tab-view-DIEbr_n8.js";
|
|
2
|
+
import "./cssr-D9_M6jAV.js";
|
|
3
|
+
import { t as scroll_wrapper_default } from "./scroll-wrapper-DVAnbCLj.js";
|
|
4
|
+
import { t as flex_row_wrapper_default } from "./flex-row-wrapper-70R3tK7w.js";
|
|
5
|
+
import { t as flex_col_wrapper_default } from "./flex-col-wrapper-BYnCXcY5.js";
|
|
6
|
+
import { t as app_provider_default } from "./app-provider-BNtVdZn9.js";
|
|
7
|
+
import { t as SemiComponentResolver } from "./resolver-DP3BDWck.js";
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
let cachedProvider = null;
|
|
11
|
-
function getAppProvider() {
|
|
12
|
-
if (cachedProvider) return cachedProvider;
|
|
13
|
-
if (getCurrentInstance()) {
|
|
14
|
-
const provider = inject("app-provider");
|
|
15
|
-
if (provider) {
|
|
16
|
-
cachedProvider = provider;
|
|
17
|
-
return provider;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
throw new Error("No outer <AppProvider /> founded.");
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
//#endregion
|
|
24
|
-
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 };
|
|
9
|
+
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
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as SemiComponentResolver } from "./resolver-
|
|
1
|
+
import { t as SemiComponentResolver } from "./resolver-BVvgCCAW.js";
|
|
2
2
|
export { SemiComponentResolver };
|
package/lib/resolver.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { a as useStyle, n as cB, r as cE, t as c } from "./cssr-D9_M6jAV.js";
|
|
2
2
|
import { createVNode, defineComponent } from "vue";
|
|
3
3
|
import { appVars } from "@semi-kit/theme/vars";
|
|
4
4
|
import { NScrollbar } from "naive-ui";
|
|
@@ -15,7 +15,7 @@ var scroll_wrapper_default = /* @__PURE__ */ defineComponent({
|
|
|
15
15
|
name: "ScrollWrapper",
|
|
16
16
|
setup(props, { slots }) {
|
|
17
17
|
useStyle("scroll-wrapper", styles_default);
|
|
18
|
-
return () => createVNode("div", { "class": "scroll-wrapper" }, [createVNode(NScrollbar, { "class": "scroll-wrapper__scrollbar" }, slots)]);
|
|
18
|
+
return () => createVNode("div", { "class": "sk-scroll-wrapper" }, [createVNode(NScrollbar, { "class": "sk-scroll-wrapper__scrollbar" }, slots)]);
|
|
19
19
|
}
|
|
20
20
|
});
|
|
21
21
|
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
import { a as useStyle, i as cM, n as cB, r as cE, t as c } from "./cssr-D9_M6jAV.js";
|
|
2
|
+
import { computed, createVNode, defineComponent, getCurrentInstance, inject, nextTick, onMounted, ref } from "vue";
|
|
3
|
+
import { useRouter } from "vue-router";
|
|
4
|
+
import { useEventListener } from "@vueuse/core";
|
|
5
|
+
|
|
6
|
+
//#region src/_utils/get-provider.ts
|
|
7
|
+
let cachedProvider = null;
|
|
8
|
+
function getAppProvider() {
|
|
9
|
+
if (cachedProvider) return cachedProvider;
|
|
10
|
+
if (getCurrentInstance()) {
|
|
11
|
+
const provider = inject("app-provider");
|
|
12
|
+
if (provider) {
|
|
13
|
+
cachedProvider = provider;
|
|
14
|
+
return provider;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
throw new Error("No outer <AppProvider /> founded.");
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
//#endregion
|
|
21
|
+
//#region src/tab-view/styles/index.ts
|
|
22
|
+
var styles_default = c([c("@keyframes fade", {
|
|
23
|
+
"0%": { opacity: 0 },
|
|
24
|
+
"100%": { opacity: 1 }
|
|
25
|
+
}), cB("tab-view", {
|
|
26
|
+
backgroundColor: "#fff",
|
|
27
|
+
display: "flex",
|
|
28
|
+
gap: "4px",
|
|
29
|
+
height: "42px",
|
|
30
|
+
alignItems: "center",
|
|
31
|
+
padding: "0 4px"
|
|
32
|
+
}, [cE("tabs-wrapper", {
|
|
33
|
+
display: "flex",
|
|
34
|
+
flex: 1,
|
|
35
|
+
height: "100%",
|
|
36
|
+
overflowX: "auto",
|
|
37
|
+
whiteSpace: "nowrap",
|
|
38
|
+
"&::-webkit-scrollbar": { display: "none" },
|
|
39
|
+
scrollbarWidth: "none"
|
|
40
|
+
}), cE("tab-item", {
|
|
41
|
+
cursor: "pointer",
|
|
42
|
+
display: "flex",
|
|
43
|
+
height: "100%",
|
|
44
|
+
alignItems: "center",
|
|
45
|
+
margin: "0 6px",
|
|
46
|
+
padding: "0 8px",
|
|
47
|
+
position: "relative",
|
|
48
|
+
transition: "all 200ms"
|
|
49
|
+
}, [cM("chrome", {}, [c("&:hover:not(.sk-tab-view__tab-item--active)", { "&::before": {
|
|
50
|
+
content: "\"\"",
|
|
51
|
+
position: "absolute",
|
|
52
|
+
left: "1px",
|
|
53
|
+
right: 0,
|
|
54
|
+
top: "50%",
|
|
55
|
+
height: "80%",
|
|
56
|
+
transform: "translateY(-50%)",
|
|
57
|
+
background: "rgba(0, 0, 0, 0.06)",
|
|
58
|
+
borderRadius: "var(--sk-tab-radius)"
|
|
59
|
+
} }), c("&.sk-tab-view__tab-item--active", {
|
|
60
|
+
color: "var(--sk-tab-primary-color)",
|
|
61
|
+
"&::before": {
|
|
62
|
+
content: "\"\"",
|
|
63
|
+
position: "absolute",
|
|
64
|
+
left: 0,
|
|
65
|
+
right: 0,
|
|
66
|
+
bottom: 0,
|
|
67
|
+
height: "85%",
|
|
68
|
+
backgroundColor: "var(--sk-tab-secondary-color)",
|
|
69
|
+
borderRadius: "10px 10px 0 0"
|
|
70
|
+
},
|
|
71
|
+
"&::after": {
|
|
72
|
+
content: "\"\"",
|
|
73
|
+
position: "absolute",
|
|
74
|
+
bottom: 0,
|
|
75
|
+
left: "-14px",
|
|
76
|
+
right: "-14px",
|
|
77
|
+
height: "14px",
|
|
78
|
+
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"
|
|
79
|
+
}
|
|
80
|
+
})]), cM("tab", {
|
|
81
|
+
padding: "0 4px",
|
|
82
|
+
marginRight: "10px",
|
|
83
|
+
cursor: "pointer",
|
|
84
|
+
transition: "border var(--duration) ease",
|
|
85
|
+
animation: "fade var(--duration) ease",
|
|
86
|
+
boxSizing: "border-box",
|
|
87
|
+
borderBottom: "2px solid transparent"
|
|
88
|
+
}, [c("&:hover", {
|
|
89
|
+
borderBottom: "2px solid var(--sk-tab-primary-color)",
|
|
90
|
+
color: "var(--sk-tab-primary-color)"
|
|
91
|
+
}), c("&.sk-tab-view__tab-item--active", {
|
|
92
|
+
color: "var(--sk-tab-primary-color)",
|
|
93
|
+
borderBottom: "2px solid var(--sk-tab-primary-color)"
|
|
94
|
+
})])])])]);
|
|
95
|
+
|
|
96
|
+
//#endregion
|
|
97
|
+
//#region src/tab-view/index.tsx
|
|
98
|
+
const TabView = /* @__PURE__ */ defineComponent((props, { slots }) => {
|
|
99
|
+
const router = useRouter();
|
|
100
|
+
useStyle("tab-view", styles_default);
|
|
101
|
+
const provider = getAppProvider();
|
|
102
|
+
const radiusPX = computed(() => `${provider.theme?.value?.radius}px`);
|
|
103
|
+
const scrollContainer = ref();
|
|
104
|
+
const syncScroll = () => {
|
|
105
|
+
nextTick(() => {
|
|
106
|
+
const container = scrollContainer.value;
|
|
107
|
+
const activeTab = container?.querySelector(".sk-tab-view__tab-item--active");
|
|
108
|
+
if (!container || !activeTab) return;
|
|
109
|
+
const containerRect = container.getBoundingClientRect();
|
|
110
|
+
const activeRect = activeTab.getBoundingClientRect();
|
|
111
|
+
const scrollLeft = container.scrollLeft;
|
|
112
|
+
const offset = activeRect.left + activeRect.width / 2 - (containerRect.left + containerRect.width / 2);
|
|
113
|
+
container.scrollTo({
|
|
114
|
+
left: scrollLeft + offset,
|
|
115
|
+
behavior: "smooth"
|
|
116
|
+
});
|
|
117
|
+
});
|
|
118
|
+
};
|
|
119
|
+
onMounted(syncScroll);
|
|
120
|
+
router.afterEach(syncScroll);
|
|
121
|
+
useEventListener(scrollContainer, "wheel", (e) => {
|
|
122
|
+
if (e.deltaY === 0) return;
|
|
123
|
+
e.preventDefault();
|
|
124
|
+
if (scrollContainer.value) scrollContainer.value.scrollLeft += e.deltaY;
|
|
125
|
+
});
|
|
126
|
+
return () => {
|
|
127
|
+
return createVNode("div", {
|
|
128
|
+
"class": "sk-tab-view",
|
|
129
|
+
"style": {
|
|
130
|
+
"--sk-tab-radius": radiusPX.value,
|
|
131
|
+
"--sk-tab-primary-color": provider.theme?.value?.primaryColor,
|
|
132
|
+
"--sk-tab-secondary-color": provider.theme?.value?.secondaryColor
|
|
133
|
+
}
|
|
134
|
+
}, [createVNode("div", {
|
|
135
|
+
"ref": scrollContainer,
|
|
136
|
+
"class": "sk-tab-view__tabs-wrapper"
|
|
137
|
+
}, [props.tabs?.map((item, index) => createVNode("div", {
|
|
138
|
+
"key": props.rowKey(item),
|
|
139
|
+
"class": [
|
|
140
|
+
"sk-tab-view__tab-item",
|
|
141
|
+
{ "sk-tab-view__tab-item--active": props.activeTab(item) },
|
|
142
|
+
`sk-tab-view__tab-item--${props.type}`
|
|
143
|
+
],
|
|
144
|
+
"onClick": () => props.onClickItem?.(item),
|
|
145
|
+
"onMouseup": (e) => props.onMouseUpItem?.(e, item, index),
|
|
146
|
+
"onContextmenu": (e) => {
|
|
147
|
+
e.preventDefault();
|
|
148
|
+
props.onContextMenuItem?.(e, item, index);
|
|
149
|
+
}
|
|
150
|
+
}, [slots?.default?.({
|
|
151
|
+
item,
|
|
152
|
+
index
|
|
153
|
+
})]))]), slots?.extra?.()]);
|
|
154
|
+
};
|
|
155
|
+
}, { props: [
|
|
156
|
+
"tabs",
|
|
157
|
+
"rowKey",
|
|
158
|
+
"activeTab",
|
|
159
|
+
"type",
|
|
160
|
+
"onClickItem",
|
|
161
|
+
"onMouseUpItem",
|
|
162
|
+
"onContextMenuItem"
|
|
163
|
+
] });
|
|
164
|
+
var tab_view_default = TabView;
|
|
165
|
+
|
|
166
|
+
//#endregion
|
|
167
|
+
export { getAppProvider as n, tab_view_default as t };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as _default } from "../../index-
|
|
1
|
+
import { t as _default } from "../../index-DYC7llhj.js";
|
|
2
2
|
export { _default as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "../../cssr-
|
|
2
|
-
import { t as flex_col_wrapper_default } from "../../flex-col-wrapper-
|
|
1
|
+
import "../../cssr-D9_M6jAV.js";
|
|
2
|
+
import { t as flex_col_wrapper_default } from "../../flex-col-wrapper-BYnCXcY5.js";
|
|
3
3
|
|
|
4
4
|
export { flex_col_wrapper_default as default };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as _default } from "../../index-
|
|
1
|
+
import { t as _default } from "../../index-DVtDY-TP.js";
|
|
2
2
|
export { _default as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "../../cssr-
|
|
2
|
-
import { t as flex_row_wrapper_default } from "../../flex-row-wrapper-
|
|
1
|
+
import "../../cssr-D9_M6jAV.js";
|
|
2
|
+
import { t as flex_row_wrapper_default } from "../../flex-row-wrapper-70R3tK7w.js";
|
|
3
3
|
|
|
4
4
|
export { flex_row_wrapper_default as default };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as _default } from "../../index-
|
|
1
|
+
import { t as _default } from "../../index-Ch99vwZm.js";
|
|
2
2
|
export { _default as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "../../cssr-
|
|
2
|
-
import { t as scroll_wrapper_default } from "../../scroll-wrapper-
|
|
1
|
+
import "../../cssr-D9_M6jAV.js";
|
|
2
|
+
import { t as scroll_wrapper_default } from "../../scroll-wrapper-DVAnbCLj.js";
|
|
3
3
|
|
|
4
4
|
export { scroll_wrapper_default as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semi-kit/component",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.23",
|
|
4
4
|
"description": "Semi-Kit Component Library",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
".": "./lib/index.js",
|
|
24
24
|
"./app-provider": "./lib/app-provider/index.js",
|
|
25
25
|
"./resolver": "./lib/resolver.js",
|
|
26
|
+
"./tab-view": "./lib/tab-view/index.js",
|
|
26
27
|
"./wrapper/flex-col-wrapper": "./lib/wrapper/flex-col-wrapper/index.js",
|
|
27
28
|
"./wrapper/flex-row-wrapper": "./lib/wrapper/flex-row-wrapper/index.js",
|
|
28
29
|
"./wrapper/scroll-wrapper": "./lib/wrapper/scroll-wrapper/index.js",
|
|
@@ -42,26 +43,36 @@
|
|
|
42
43
|
},
|
|
43
44
|
"devDependencies": {
|
|
44
45
|
"@css-render/plugin-bem": "catalog:",
|
|
45
|
-
"
|
|
46
|
+
"@semi-kit/hooks": "workspace:*",
|
|
47
|
+
"@semi-kit/theme": "workspace:*",
|
|
46
48
|
"@types/node": "catalog:",
|
|
49
|
+
"@visulima/rollup-plugin-css": "1.0.0-alpha.1",
|
|
47
50
|
"@vitejs/plugin-vue": "catalog:",
|
|
48
51
|
"@vitejs/plugin-vue-jsx": "catalog:",
|
|
52
|
+
"@vueuse/core": "catalog:",
|
|
49
53
|
"bumpp": "catalog:",
|
|
54
|
+
"css-render": "catalog:",
|
|
55
|
+
"es-toolkit": "catalog:",
|
|
50
56
|
"happy-dom": "catalog:",
|
|
57
|
+
"less": "catalog:",
|
|
58
|
+
"naive-ui": "catalog:",
|
|
51
59
|
"tsdown": "catalog:",
|
|
52
60
|
"typescript": "catalog:",
|
|
53
61
|
"vite": "catalog:",
|
|
54
62
|
"vue": "catalog:",
|
|
55
|
-
"vue-
|
|
56
|
-
"
|
|
57
|
-
"@semi-kit/theme": "workspace:*"
|
|
63
|
+
"vue-router": "catalog:",
|
|
64
|
+
"vue-tsc": "catalog:"
|
|
58
65
|
},
|
|
59
66
|
"peerDependencies": {
|
|
67
|
+
"@css-render/plugin-bem": "*",
|
|
68
|
+
"@semi-kit/hooks": "*",
|
|
69
|
+
"@semi-kit/theme": "*",
|
|
70
|
+
"@vueuse/core": "*",
|
|
71
|
+
"css-render": "*",
|
|
72
|
+
"es-toolkit": "*",
|
|
73
|
+
"less": "*",
|
|
60
74
|
"naive-ui": "*",
|
|
61
75
|
"vue": "*",
|
|
62
|
-
"
|
|
63
|
-
"@semi-kit/theme": "*",
|
|
64
|
-
"@css-render/plugin-bem": "*",
|
|
65
|
-
"css-render": "*"
|
|
76
|
+
"vue-router": "*"
|
|
66
77
|
}
|
|
67
78
|
}
|
package/lib/index-DOM7zUci.d.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import * as vue4 from "vue";
|
|
2
|
-
import * as vue_jsx_runtime0 from "vue/jsx-runtime";
|
|
3
|
-
|
|
4
|
-
//#region src/wrapper/flex-row-wrapper/index.d.ts
|
|
5
|
-
declare const _default: vue4.DefineComponent<{}, () => vue_jsx_runtime0.JSX.Element, {}, {}, {}, vue4.ComponentOptionsMixin, vue4.ComponentOptionsMixin, {}, string, vue4.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue4.ComponentProvideOptions, true, {}, any>;
|
|
6
|
-
//#endregion
|
|
7
|
-
export { _default as t };
|
package/lib/index-ciydAdjM.d.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import * as vue9 from "vue";
|
|
2
|
-
import * as vue_jsx_runtime1 from "vue/jsx-runtime";
|
|
3
|
-
|
|
4
|
-
//#region src/wrapper/scroll-wrapper/index.d.ts
|
|
5
|
-
declare const _default: vue9.DefineComponent<{}, () => vue_jsx_runtime1.JSX.Element, {}, {}, {}, vue9.ComponentOptionsMixin, vue9.ComponentOptionsMixin, {}, string, vue9.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue9.ComponentProvideOptions, true, {}, any>;
|
|
6
|
-
//#endregion
|
|
7
|
-
export { _default as t };
|
package/lib/index-vqUwpfoI.d.ts
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import * as vue14 from "vue";
|
|
2
|
-
import { Ref } from "vue";
|
|
3
|
-
|
|
4
|
-
//#region src/app-provider/type.d.ts
|
|
5
|
-
interface AppProviderFormRuleConfig {
|
|
6
|
-
stringLength?: number;
|
|
7
|
-
numberLength?: number;
|
|
8
|
-
numberSize?: number;
|
|
9
|
-
decimalPlace?: number;
|
|
10
|
-
}
|
|
11
|
-
interface AppProviderTheme {
|
|
12
|
-
primaryColor?: string;
|
|
13
|
-
radius?: number;
|
|
14
|
-
}
|
|
15
|
-
interface AppProviderContext {
|
|
16
|
-
locale?: Ref<string | undefined>;
|
|
17
|
-
formRuleConfig?: Ref<AppProviderFormRuleConfig>;
|
|
18
|
-
theme?: Ref<AppProviderTheme | undefined>;
|
|
19
|
-
}
|
|
20
|
-
//#endregion
|
|
21
|
-
//#region src/app-provider/index.d.ts
|
|
22
|
-
declare const _default: vue14.DefineComponent<vue14.ExtractPropTypes<{
|
|
23
|
-
readonly locale: StringConstructor;
|
|
24
|
-
readonly formRuleConfig: vue14.PropType<AppProviderFormRuleConfig>;
|
|
25
|
-
readonly theme: vue14.PropType<AppProviderTheme>;
|
|
26
|
-
}>, () => vue14.VNode<vue14.RendererNode, vue14.RendererElement, {
|
|
27
|
-
[key: string]: any;
|
|
28
|
-
}>[] | undefined, {}, {}, {}, vue14.ComponentOptionsMixin, vue14.ComponentOptionsMixin, {}, string, vue14.PublicProps, Readonly<vue14.ExtractPropTypes<{
|
|
29
|
-
readonly locale: StringConstructor;
|
|
30
|
-
readonly formRuleConfig: vue14.PropType<AppProviderFormRuleConfig>;
|
|
31
|
-
readonly theme: vue14.PropType<AppProviderTheme>;
|
|
32
|
-
}>> & Readonly<{}>, {}, {}, {}, {}, string, vue14.ComponentProvideOptions, true, {}, any>;
|
|
33
|
-
//#endregion
|
|
34
|
-
export { AppProviderContext as n, AppProviderFormRuleConfig as r, _default as t };
|
|
File without changes
|
|
File without changes
|
|
File without changes
|