@v-c/tabs 0.0.3 → 1.0.1
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/dist/Tabs.vue_vue_type_script_setup_true_lang.js +0 -1
- package/package.json +15 -12
- package/dist/TabContext.cjs +0 -11
- package/dist/TabNavList/AddButton.cjs +0 -4
- package/dist/TabNavList/AddButton.vue_vue_type_script_setup_true_lang.cjs +0 -36
- package/dist/TabNavList/ExtraContent.cjs +0 -4
- package/dist/TabNavList/ExtraContent.vue_vue_type_script_setup_true_lang.cjs +0 -51
- package/dist/TabNavList/OperationNode.cjs +0 -4
- package/dist/TabNavList/OperationNode.vue_vue_type_script_setup_true_lang.cjs +0 -210
- package/dist/TabNavList/TabNode.cjs +0 -4
- package/dist/TabNavList/TabNode.vue_vue_type_script_setup_true_lang.cjs +0 -129
- package/dist/TabNavList/Wrapper.cjs +0 -4
- package/dist/TabNavList/Wrapper.vue_vue_type_script_setup_true_lang.cjs +0 -54
- package/dist/TabNavList/index.cjs +0 -4
- package/dist/TabNavList/index.vue_vue_type_script_setup_true_lang.cjs +0 -516
- package/dist/TabPanelList/TabPane.cjs +0 -4
- package/dist/TabPanelList/TabPane.vue_vue_type_script_setup_true_lang.cjs +0 -85
- package/dist/TabPanelList/index.cjs +0 -4
- package/dist/TabPanelList/index.vue_vue_type_script_setup_true_lang.cjs +0 -105
- package/dist/Tabs.cjs +0 -4
- package/dist/Tabs.vue_vue_type_script_setup_true_lang.cjs +0 -194
- package/dist/_virtual/rolldown_runtime.cjs +0 -21
- package/dist/hooks/useAnimateConfig.cjs +0 -28
- package/dist/hooks/useIndicator.cjs +0 -68
- package/dist/hooks/useOffsets.cjs +0 -39
- package/dist/hooks/useTouchMove.cjs +0 -119
- package/dist/hooks/useVisibleRange.cjs +0 -51
- package/dist/index.cjs +0 -4
- package/dist/interface.cjs +0 -0
- package/dist/utils.cjs +0 -33
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
2
|
-
const require_TabContext = require("../TabContext.cjs");
|
|
3
|
-
const require_TabPane = require("./TabPane.cjs");
|
|
4
|
-
let vue = require("vue");
|
|
5
|
-
let __v_c_util_dist_RenderComponent = require("@v-c/util/dist/RenderComponent");
|
|
6
|
-
__v_c_util_dist_RenderComponent = require_rolldown_runtime.__toESM(__v_c_util_dist_RenderComponent);
|
|
7
|
-
let __v_c_util_dist_utils_transition = require("@v-c/util/dist/utils/transition");
|
|
8
|
-
var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
9
|
-
__name: "index",
|
|
10
|
-
props: {
|
|
11
|
-
activeKey: {},
|
|
12
|
-
id: {},
|
|
13
|
-
animated: {},
|
|
14
|
-
tabPosition: {},
|
|
15
|
-
destroyOnHidden: { type: Boolean },
|
|
16
|
-
contentStyle: {},
|
|
17
|
-
contentClassName: {}
|
|
18
|
-
},
|
|
19
|
-
setup(__props) {
|
|
20
|
-
const { id, activeKey, animated, tabPosition, destroyOnHidden, contentStyle, contentClassName } = (0, vue.toRefs)(__props);
|
|
21
|
-
const ctx = require_TabContext.useTabContext();
|
|
22
|
-
const tabs = (0, vue.computed)(() => ctx?.value.tabs || []);
|
|
23
|
-
const prefixCls = (0, vue.computed)(() => ctx?.value.prefixCls || "");
|
|
24
|
-
const tabPaneAnimated = (0, vue.computed)(() => animated.value?.tabPane === true);
|
|
25
|
-
const tabPanePrefixCls = (0, vue.computed)(() => `${prefixCls.value}-tabpane`);
|
|
26
|
-
const transitionProps = (0, vue.computed)(() => {
|
|
27
|
-
if (!tabPaneAnimated.value) return {};
|
|
28
|
-
if (animated.value?.tabPaneMotion) return animated.value.tabPaneMotion;
|
|
29
|
-
return (0, __v_c_util_dist_utils_transition.getTransitionProps)(tabPanePrefixCls.value);
|
|
30
|
-
});
|
|
31
|
-
function shouldDestroyOnHidden(item) {
|
|
32
|
-
return !!(!item.forceRender && (destroyOnHidden.value ?? item.destroyOnHidden) === true);
|
|
33
|
-
}
|
|
34
|
-
return (_ctx, _cache) => {
|
|
35
|
-
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)([`${prefixCls.value}-content-holder`]) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)([
|
|
36
|
-
`${prefixCls.value}-content`,
|
|
37
|
-
`${prefixCls.value}-content-${(0, vue.unref)(tabPosition)}`,
|
|
38
|
-
{ [`${prefixCls.value}-content-animated`]: tabPaneAnimated.value }
|
|
39
|
-
]) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(tabs.value, (item) => {
|
|
40
|
-
return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: item.key }, [tabPaneAnimated.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(vue.Transition, (0, vue.mergeProps)({
|
|
41
|
-
key: 0,
|
|
42
|
-
ref_for: true
|
|
43
|
-
}, transitionProps.value), {
|
|
44
|
-
default: (0, vue.withCtx)(() => [(shouldDestroyOnHidden(item) ? item.key === (0, vue.unref)(activeKey) : true) ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createBlock)(require_TabPane.default, {
|
|
45
|
-
key: 0,
|
|
46
|
-
id: (0, vue.unref)(id),
|
|
47
|
-
"prefix-cls": tabPanePrefixCls.value,
|
|
48
|
-
"tab-key": item.key,
|
|
49
|
-
animated: tabPaneAnimated.value,
|
|
50
|
-
active: item.key === (0, vue.unref)(activeKey),
|
|
51
|
-
style: (0, vue.normalizeStyle)({
|
|
52
|
-
...(0, vue.unref)(contentStyle) || {},
|
|
53
|
-
...item.style || {}
|
|
54
|
-
}),
|
|
55
|
-
"class-name": [
|
|
56
|
-
(0, vue.unref)(contentClassName),
|
|
57
|
-
item.className,
|
|
58
|
-
item.key !== (0, vue.unref)(activeKey) && `${tabPanePrefixCls.value}-hidden`
|
|
59
|
-
]
|
|
60
|
-
}, {
|
|
61
|
-
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(__v_c_util_dist_RenderComponent.default), { render: item.children }, null, 8, ["render"])]),
|
|
62
|
-
_: 2
|
|
63
|
-
}, 1032, [
|
|
64
|
-
"id",
|
|
65
|
-
"prefix-cls",
|
|
66
|
-
"tab-key",
|
|
67
|
-
"animated",
|
|
68
|
-
"active",
|
|
69
|
-
"style",
|
|
70
|
-
"class-name"
|
|
71
|
-
])), [[vue.vShow, shouldDestroyOnHidden(item) ? true : item.key === (0, vue.unref)(activeKey) || item.forceRender]]) : (0, vue.createCommentVNode)("", true)]),
|
|
72
|
-
_: 2
|
|
73
|
-
}, 1040)) : (0, vue.createCommentVNode)("", true), !tabPaneAnimated.value && (shouldDestroyOnHidden(item) ? item.key === (0, vue.unref)(activeKey) : true) ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createBlock)(require_TabPane.default, {
|
|
74
|
-
key: 1,
|
|
75
|
-
id: (0, vue.unref)(id),
|
|
76
|
-
"prefix-cls": tabPanePrefixCls.value,
|
|
77
|
-
"tab-key": item.key,
|
|
78
|
-
animated: tabPaneAnimated.value,
|
|
79
|
-
active: item.key === (0, vue.unref)(activeKey),
|
|
80
|
-
style: (0, vue.normalizeStyle)({
|
|
81
|
-
...(0, vue.unref)(contentStyle) || {},
|
|
82
|
-
...item.style || {}
|
|
83
|
-
}),
|
|
84
|
-
"class-name": [
|
|
85
|
-
(0, vue.unref)(contentClassName),
|
|
86
|
-
item.className,
|
|
87
|
-
item.key !== (0, vue.unref)(activeKey) && `${tabPanePrefixCls.value}-hidden`
|
|
88
|
-
]
|
|
89
|
-
}, {
|
|
90
|
-
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(__v_c_util_dist_RenderComponent.default), { render: item.children }, null, 8, ["render"])]),
|
|
91
|
-
_: 2
|
|
92
|
-
}, 1032, [
|
|
93
|
-
"id",
|
|
94
|
-
"prefix-cls",
|
|
95
|
-
"tab-key",
|
|
96
|
-
"animated",
|
|
97
|
-
"active",
|
|
98
|
-
"style",
|
|
99
|
-
"class-name"
|
|
100
|
-
])), [[vue.vShow, shouldDestroyOnHidden(item) ? true : item.key === (0, vue.unref)(activeKey) || item.forceRender]]) : (0, vue.createCommentVNode)("", true)], 64);
|
|
101
|
-
}), 128))], 2)], 2);
|
|
102
|
-
};
|
|
103
|
-
}
|
|
104
|
-
});
|
|
105
|
-
exports.default = index_vue_vue_type_script_setup_true_lang_default;
|
package/dist/Tabs.cjs
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
2
|
-
const require_Tabs_vue_vue_type_script_setup_true_lang = require("./Tabs.vue_vue_type_script_setup_true_lang.cjs");
|
|
3
|
-
var Tabs_default = require_Tabs_vue_vue_type_script_setup_true_lang.default;
|
|
4
|
-
exports.default = Tabs_default;
|
|
@@ -1,194 +0,0 @@
|
|
|
1
|
-
const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
|
|
2
|
-
const require_TabContext = require("./TabContext.cjs");
|
|
3
|
-
const require_useAnimateConfig = require("./hooks/useAnimateConfig.cjs");
|
|
4
|
-
const require_utils = require("./utils.cjs");
|
|
5
|
-
const require_Wrapper = require("./TabNavList/Wrapper.cjs");
|
|
6
|
-
const require_index = require("./TabPanelList/index.cjs");
|
|
7
|
-
let vue = require("vue");
|
|
8
|
-
let __v_c_util = require("@v-c/util");
|
|
9
|
-
let __v_c_util_dist_hooks_useMergedState = require("@v-c/util/dist/hooks/useMergedState");
|
|
10
|
-
__v_c_util_dist_hooks_useMergedState = require_rolldown_runtime.__toESM(__v_c_util_dist_hooks_useMergedState);
|
|
11
|
-
let __v_c_util_dist_isMobile = require("@v-c/util/dist/isMobile");
|
|
12
|
-
__v_c_util_dist_isMobile = require_rolldown_runtime.__toESM(__v_c_util_dist_isMobile);
|
|
13
|
-
let __v_c_util_dist_omit = require("@v-c/util/dist/omit");
|
|
14
|
-
__v_c_util_dist_omit = require_rolldown_runtime.__toESM(__v_c_util_dist_omit);
|
|
15
|
-
var _hoisted_1 = ["id"];
|
|
16
|
-
var Tabs_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
17
|
-
name: "Tabs",
|
|
18
|
-
inheritAttrs: false,
|
|
19
|
-
__name: "Tabs",
|
|
20
|
-
props: {
|
|
21
|
-
prefixCls: { default: "vc-tabs" },
|
|
22
|
-
className: {},
|
|
23
|
-
style: {},
|
|
24
|
-
classNames: {},
|
|
25
|
-
styles: {},
|
|
26
|
-
id: {},
|
|
27
|
-
items: {},
|
|
28
|
-
activeKey: {},
|
|
29
|
-
defaultActiveKey: {},
|
|
30
|
-
direction: {},
|
|
31
|
-
animated: {
|
|
32
|
-
type: [Boolean, Object],
|
|
33
|
-
default: void 0
|
|
34
|
-
},
|
|
35
|
-
renderTabBar: {},
|
|
36
|
-
tabBarExtraContent: { type: [
|
|
37
|
-
Object,
|
|
38
|
-
String,
|
|
39
|
-
Number,
|
|
40
|
-
null,
|
|
41
|
-
Boolean,
|
|
42
|
-
Array
|
|
43
|
-
] },
|
|
44
|
-
tabBarGutter: {},
|
|
45
|
-
tabBarStyle: {},
|
|
46
|
-
tabPosition: { default: "top" },
|
|
47
|
-
destroyOnHidden: {
|
|
48
|
-
type: Boolean,
|
|
49
|
-
default: void 0
|
|
50
|
-
},
|
|
51
|
-
onChange: {},
|
|
52
|
-
onTabClick: {},
|
|
53
|
-
onTabScroll: {},
|
|
54
|
-
editable: {},
|
|
55
|
-
getPopupContainer: {},
|
|
56
|
-
locale: {},
|
|
57
|
-
more: {},
|
|
58
|
-
popupClassName: {},
|
|
59
|
-
indicator: {}
|
|
60
|
-
},
|
|
61
|
-
setup(__props) {
|
|
62
|
-
const props = __props;
|
|
63
|
-
const { id, items, direction, defaultActiveKey, tabPosition, editable, locale, tabBarGutter, more, animated, styles, prefixCls, className, activeKey, tabBarStyle, tabBarExtraContent, destroyOnHidden, renderTabBar, onChange, onTabClick, onTabScroll, getPopupContainer, popupClassName, indicator, classNames: tabsClassNames } = (0, vue.toRefs)(props);
|
|
64
|
-
const restProps = (0, vue.computed)(() => {
|
|
65
|
-
return (0, __v_c_util_dist_omit.default)(props, [
|
|
66
|
-
"id",
|
|
67
|
-
"prefixCls",
|
|
68
|
-
"className",
|
|
69
|
-
"items",
|
|
70
|
-
"direction",
|
|
71
|
-
"activeKey",
|
|
72
|
-
"defaultActiveKey",
|
|
73
|
-
"editable",
|
|
74
|
-
"animated",
|
|
75
|
-
"tabPosition",
|
|
76
|
-
"tabBarGutter",
|
|
77
|
-
"tabBarStyle",
|
|
78
|
-
"tabBarExtraContent",
|
|
79
|
-
"locale",
|
|
80
|
-
"more",
|
|
81
|
-
"destroyOnHidden",
|
|
82
|
-
"renderTabBar",
|
|
83
|
-
"onChange",
|
|
84
|
-
"onTabClick",
|
|
85
|
-
"onTabScroll",
|
|
86
|
-
"getPopupContainer",
|
|
87
|
-
"popupClassName",
|
|
88
|
-
"indicator",
|
|
89
|
-
"classNames",
|
|
90
|
-
"styles"
|
|
91
|
-
]);
|
|
92
|
-
});
|
|
93
|
-
const tabs = (0, vue.computed)(() => (items.value || []).filter((item) => item && typeof item === "object" && "key" in item));
|
|
94
|
-
const rtl = (0, vue.computed)(() => direction.value === "rtl");
|
|
95
|
-
const mergedAnimated = (0, vue.computed)(() => require_useAnimateConfig.default(animated.value));
|
|
96
|
-
const mobile = (0, vue.ref)(false);
|
|
97
|
-
(0, vue.onMounted)(() => {
|
|
98
|
-
mobile.value = (0, __v_c_util_dist_isMobile.default)();
|
|
99
|
-
});
|
|
100
|
-
const defaultKey = (0, vue.computed)(() => defaultActiveKey.value ?? tabs.value[0]?.key);
|
|
101
|
-
const [mergedActiveKey, setMergedActiveKey] = (0, __v_c_util_dist_hooks_useMergedState.default)("", {
|
|
102
|
-
defaultValue: activeKey.value ?? defaultKey.value,
|
|
103
|
-
value: activeKey
|
|
104
|
-
});
|
|
105
|
-
const activeIndex = (0, vue.ref)(tabs.value.findIndex((item) => item.key === mergedActiveKey.value));
|
|
106
|
-
(0, vue.watch)([
|
|
107
|
-
(0, vue.computed)(() => tabs.value.map((tab) => tab.key).join("_")),
|
|
108
|
-
mergedActiveKey,
|
|
109
|
-
activeIndex
|
|
110
|
-
], async () => {
|
|
111
|
-
await (0, vue.nextTick)();
|
|
112
|
-
activeIndex.value = tabs.value.findIndex((item) => item.key === mergedActiveKey.value);
|
|
113
|
-
let newActiveIndex = tabs.value.findIndex((tab) => tab.key === mergedActiveKey.value);
|
|
114
|
-
if (newActiveIndex === -1) {
|
|
115
|
-
newActiveIndex = Math.max(0, Math.min(activeIndex.value, tabs.value.length - 1));
|
|
116
|
-
setMergedActiveKey(tabs.value[newActiveIndex]?.key);
|
|
117
|
-
}
|
|
118
|
-
activeIndex.value = newActiveIndex;
|
|
119
|
-
}, { immediate: true });
|
|
120
|
-
const [mergedId, setMergedId] = (0, __v_c_util_dist_hooks_useMergedState.default)(null, { value: id.value });
|
|
121
|
-
(0, vue.onMounted)(() => {
|
|
122
|
-
const uuid = require_utils.getUUid();
|
|
123
|
-
setMergedId(`vc-tabs-${process.env.NODE_ENV === "test" ? "test" : uuid}`);
|
|
124
|
-
require_utils.setUUid(uuid + 1);
|
|
125
|
-
});
|
|
126
|
-
function onInternalTabClick(key, e) {
|
|
127
|
-
onTabClick.value?.(key, e);
|
|
128
|
-
const isActiveChanged = key !== mergedActiveKey.value;
|
|
129
|
-
setMergedActiveKey(key);
|
|
130
|
-
if (isActiveChanged) onChange.value?.(key);
|
|
131
|
-
}
|
|
132
|
-
const sharedProps = (0, vue.computed)(() => ({
|
|
133
|
-
id: mergedId.value,
|
|
134
|
-
activeKey: mergedActiveKey.value,
|
|
135
|
-
animated: mergedAnimated.value,
|
|
136
|
-
tabPosition: tabPosition.value,
|
|
137
|
-
rtl: rtl.value,
|
|
138
|
-
mobile: mobile.value
|
|
139
|
-
}));
|
|
140
|
-
const tabNavBarProps = (0, vue.computed)(() => {
|
|
141
|
-
return {
|
|
142
|
-
...sharedProps.value,
|
|
143
|
-
editable: editable.value,
|
|
144
|
-
locale: locale.value,
|
|
145
|
-
more: more.value,
|
|
146
|
-
tabBarGutter: tabBarGutter.value,
|
|
147
|
-
onTabClick: onInternalTabClick,
|
|
148
|
-
onTabScroll: onTabScroll.value,
|
|
149
|
-
extra: tabBarExtraContent.value,
|
|
150
|
-
style: tabBarStyle.value,
|
|
151
|
-
getPopupContainer: getPopupContainer.value,
|
|
152
|
-
popupClassName: (0, __v_c_util.clsx)([popupClassName.value, tabsClassNames.value?.popup]),
|
|
153
|
-
indicator: indicator.value,
|
|
154
|
-
styles: styles.value,
|
|
155
|
-
classNames: tabsClassNames.value
|
|
156
|
-
};
|
|
157
|
-
});
|
|
158
|
-
const memoizedValue = (0, vue.computed)(() => {
|
|
159
|
-
return {
|
|
160
|
-
tabs: tabs.value,
|
|
161
|
-
prefixCls: prefixCls.value
|
|
162
|
-
};
|
|
163
|
-
});
|
|
164
|
-
const tabRef = (0, vue.ref)();
|
|
165
|
-
require_TabContext.provideTabContext(memoizedValue);
|
|
166
|
-
return (_ctx, _cache) => {
|
|
167
|
-
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({
|
|
168
|
-
id: (0, vue.unref)(id),
|
|
169
|
-
ref_key: "tabRef",
|
|
170
|
-
ref: tabRef,
|
|
171
|
-
class: [
|
|
172
|
-
(0, vue.unref)(prefixCls),
|
|
173
|
-
`${(0, vue.unref)(prefixCls)}-${(0, vue.unref)(tabPosition)}`,
|
|
174
|
-
{
|
|
175
|
-
[`${(0, vue.unref)(prefixCls)}-mobile`]: mobile.value,
|
|
176
|
-
[`${(0, vue.unref)(prefixCls)}-editable`]: (0, vue.unref)(editable),
|
|
177
|
-
[`${(0, vue.unref)(prefixCls)}-rtl`]: rtl.value
|
|
178
|
-
},
|
|
179
|
-
(0, vue.unref)(className)
|
|
180
|
-
]
|
|
181
|
-
}, restProps.value), [(0, vue.createVNode)(require_Wrapper.default, (0, vue.mergeProps)(tabNavBarProps.value, { "render-tab-bar": (0, vue.unref)(renderTabBar) }), null, 16, ["render-tab-bar"]), (0, vue.createVNode)(require_index.default, (0, vue.mergeProps)({ "destroy-on-hidden": (0, vue.unref)(destroyOnHidden) }, sharedProps.value, {
|
|
182
|
-
"content-style": (0, vue.unref)(styles)?.content,
|
|
183
|
-
"content-class-name": (0, vue.unref)(tabsClassNames)?.content,
|
|
184
|
-
animated: mergedAnimated.value
|
|
185
|
-
}), null, 16, [
|
|
186
|
-
"destroy-on-hidden",
|
|
187
|
-
"content-style",
|
|
188
|
-
"content-class-name",
|
|
189
|
-
"animated"
|
|
190
|
-
])], 16, _hoisted_1);
|
|
191
|
-
};
|
|
192
|
-
}
|
|
193
|
-
});
|
|
194
|
-
exports.default = Tabs_vue_vue_type_script_setup_true_lang_default;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __copyProps = (to, from, except, desc) => {
|
|
8
|
-
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
9
|
-
key = keys[i];
|
|
10
|
-
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
11
|
-
get: ((k) => from[k]).bind(null, key),
|
|
12
|
-
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
13
|
-
});
|
|
14
|
-
}
|
|
15
|
-
return to;
|
|
16
|
-
};
|
|
17
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
18
|
-
value: mod,
|
|
19
|
-
enumerable: true
|
|
20
|
-
}) : target, mod));
|
|
21
|
-
exports.__toESM = __toESM;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
2
|
-
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
3
|
-
let __v_c_util_dist_warning = require("@v-c/util/dist/warning");
|
|
4
|
-
function useAnimateConfig(animated = {
|
|
5
|
-
inkBar: true,
|
|
6
|
-
tabPane: false
|
|
7
|
-
}) {
|
|
8
|
-
let mergedAnimated;
|
|
9
|
-
if (animated === false) mergedAnimated = {
|
|
10
|
-
inkBar: false,
|
|
11
|
-
tabPane: false
|
|
12
|
-
};
|
|
13
|
-
else if (animated === true) mergedAnimated = {
|
|
14
|
-
inkBar: true,
|
|
15
|
-
tabPane: false
|
|
16
|
-
};
|
|
17
|
-
else mergedAnimated = {
|
|
18
|
-
inkBar: true,
|
|
19
|
-
...typeof animated === "object" ? animated : {}
|
|
20
|
-
};
|
|
21
|
-
if (mergedAnimated.tabPaneMotion && mergedAnimated.tabPane === void 0) mergedAnimated.tabPane = true;
|
|
22
|
-
if (!mergedAnimated.tabPaneMotion && mergedAnimated.tabPane) {
|
|
23
|
-
if (process.env.NODE_ENV !== "production") (0, __v_c_util_dist_warning.warning)(false, "`animated.tabPane` is true but `animated.tabPaneMotion` is not provided. Motion will not work.");
|
|
24
|
-
mergedAnimated.tabPane = false;
|
|
25
|
-
}
|
|
26
|
-
return mergedAnimated;
|
|
27
|
-
}
|
|
28
|
-
exports.default = useAnimateConfig;
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
2
|
-
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
3
|
-
let vue = require("vue");
|
|
4
|
-
let __v_c_util_dist_raf = require("@v-c/util/dist/raf");
|
|
5
|
-
__v_c_util_dist_raf = require_rolldown_runtime.__toESM(__v_c_util_dist_raf);
|
|
6
|
-
function useIndicator(options) {
|
|
7
|
-
const { activeTabOffset, horizontal, rtl, indicator } = options;
|
|
8
|
-
const inkStyle = (0, vue.ref)();
|
|
9
|
-
const inkBarRafRef = (0, vue.ref)();
|
|
10
|
-
const getLength = (origin) => {
|
|
11
|
-
const size = indicator?.value?.size;
|
|
12
|
-
if (typeof size === "function") return size(origin);
|
|
13
|
-
if (typeof size === "number") return size;
|
|
14
|
-
return origin;
|
|
15
|
-
};
|
|
16
|
-
function cleanInkBarRaf() {
|
|
17
|
-
if (!inkBarRafRef.value) return;
|
|
18
|
-
__v_c_util_dist_raf.default.cancel(inkBarRafRef.value);
|
|
19
|
-
}
|
|
20
|
-
(0, vue.watch)([
|
|
21
|
-
() => activeTabOffset.value,
|
|
22
|
-
() => horizontal.value,
|
|
23
|
-
() => rtl.value,
|
|
24
|
-
() => indicator?.value
|
|
25
|
-
], async (_n, _o) => {
|
|
26
|
-
await (0, vue.nextTick)();
|
|
27
|
-
const align = indicator?.value?.align || "center";
|
|
28
|
-
const newInkStyle = {};
|
|
29
|
-
if (activeTabOffset.value) if (horizontal.value) {
|
|
30
|
-
newInkStyle.width = `${getLength(activeTabOffset.value.width)}px`;
|
|
31
|
-
const key = rtl.value ? "right" : "left";
|
|
32
|
-
if (align === "start") newInkStyle[key] = `${activeTabOffset.value[key]}px`;
|
|
33
|
-
if (align === "center") {
|
|
34
|
-
newInkStyle[key] = `${activeTabOffset.value[key] + activeTabOffset.value.width / 2}px`;
|
|
35
|
-
newInkStyle.transform = rtl.value ? "translateX(50%)" : "translateX(-50%)";
|
|
36
|
-
}
|
|
37
|
-
if (align === "end") {
|
|
38
|
-
newInkStyle[key] = `${activeTabOffset.value[key] + activeTabOffset.value.width}px`;
|
|
39
|
-
newInkStyle.transform = "translateX(-100%)";
|
|
40
|
-
}
|
|
41
|
-
} else {
|
|
42
|
-
newInkStyle.height = `${getLength(activeTabOffset.value.height)}px`;
|
|
43
|
-
if (align === "start") newInkStyle.top = `${activeTabOffset.value.top}px`;
|
|
44
|
-
if (align === "center") {
|
|
45
|
-
newInkStyle.top = `${activeTabOffset.value.top + activeTabOffset.value.height / 2}px`;
|
|
46
|
-
newInkStyle.transform = "translateY(-50%)";
|
|
47
|
-
}
|
|
48
|
-
if (align === "end") {
|
|
49
|
-
newInkStyle.top = `${activeTabOffset.value.top + activeTabOffset.value.height}px`;
|
|
50
|
-
newInkStyle.transform = "translateY(-100%)";
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
cleanInkBarRaf();
|
|
54
|
-
inkBarRafRef.value = (0, __v_c_util_dist_raf.default)(() => {
|
|
55
|
-
if (!(inkStyle.value && newInkStyle && Object.keys(newInkStyle).every((key) => {
|
|
56
|
-
const newValue = newInkStyle[key];
|
|
57
|
-
const oldValue = inkStyle.value?.[key];
|
|
58
|
-
return typeof newValue === "number" && typeof oldValue === "number" ? Math.round(newValue) === Math.round(oldValue) : newValue === oldValue;
|
|
59
|
-
}))) inkStyle.value = newInkStyle;
|
|
60
|
-
});
|
|
61
|
-
}, { immediate: true });
|
|
62
|
-
(0, vue.onUnmounted)(() => {
|
|
63
|
-
cleanInkBarRaf();
|
|
64
|
-
});
|
|
65
|
-
return inkStyle;
|
|
66
|
-
}
|
|
67
|
-
var useIndicator_default = useIndicator;
|
|
68
|
-
exports.default = useIndicator_default;
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
2
|
-
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
3
|
-
let vue = require("vue");
|
|
4
|
-
var DEFAULT_SIZE = {
|
|
5
|
-
width: 0,
|
|
6
|
-
height: 0,
|
|
7
|
-
left: 0,
|
|
8
|
-
top: 0
|
|
9
|
-
};
|
|
10
|
-
function useOffsets(tabs, tabSizes, holderScrollWidth) {
|
|
11
|
-
const mapRef = (0, vue.shallowRef)(/* @__PURE__ */ new Map());
|
|
12
|
-
(0, vue.watch)([
|
|
13
|
-
() => tabs.value.map((tab) => tab.key).join("_"),
|
|
14
|
-
tabSizes,
|
|
15
|
-
holderScrollWidth
|
|
16
|
-
], () => {
|
|
17
|
-
const map = /* @__PURE__ */ new Map();
|
|
18
|
-
const firstKey = tabs.value[0]?.key;
|
|
19
|
-
const lastOffset = (firstKey ? tabSizes.value.get(firstKey) : void 0) || DEFAULT_SIZE;
|
|
20
|
-
const rightOffset = lastOffset.left + lastOffset.width;
|
|
21
|
-
for (let i = 0; i < tabs.value.length; i += 1) {
|
|
22
|
-
const { key } = tabs.value[i];
|
|
23
|
-
let data = tabSizes.value.get(key);
|
|
24
|
-
if (!data) {
|
|
25
|
-
const prevKey = tabs.value[i - 1]?.key;
|
|
26
|
-
data = (prevKey ? tabSizes.value.get(prevKey) : void 0) || DEFAULT_SIZE;
|
|
27
|
-
}
|
|
28
|
-
const entity = map.get(key) || {
|
|
29
|
-
...data,
|
|
30
|
-
right: 0
|
|
31
|
-
};
|
|
32
|
-
entity.right = rightOffset - entity.left - entity.width;
|
|
33
|
-
map.set(key, entity);
|
|
34
|
-
}
|
|
35
|
-
mapRef.value = map;
|
|
36
|
-
}, { immediate: true });
|
|
37
|
-
return mapRef;
|
|
38
|
-
}
|
|
39
|
-
exports.default = useOffsets;
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
2
|
-
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
3
|
-
let vue = require("vue");
|
|
4
|
-
var MIN_SWIPE_DISTANCE = .1;
|
|
5
|
-
var STOP_SWIPE_DISTANCE = .01;
|
|
6
|
-
var REFRESH_INTERVAL = 20;
|
|
7
|
-
var SPEED_OFF_MULTIPLE = .995 ** REFRESH_INTERVAL;
|
|
8
|
-
function useTouchMove(elRef, onOffset) {
|
|
9
|
-
const touchPosition = (0, vue.ref)(null);
|
|
10
|
-
const lastTimestamp = (0, vue.ref)(0);
|
|
11
|
-
const lastTimeDiff = (0, vue.ref)(0);
|
|
12
|
-
const lastOffset = (0, vue.ref)(null);
|
|
13
|
-
const motionRef = (0, vue.ref)();
|
|
14
|
-
const lastWheelDirectionRef = (0, vue.ref)();
|
|
15
|
-
function onTouchStart(e) {
|
|
16
|
-
const { screenX, screenY } = e.touches[0];
|
|
17
|
-
touchPosition.value = {
|
|
18
|
-
x: screenX,
|
|
19
|
-
y: screenY
|
|
20
|
-
};
|
|
21
|
-
if (motionRef.value != null) window.clearInterval(motionRef.value);
|
|
22
|
-
}
|
|
23
|
-
function onTouchMove(e) {
|
|
24
|
-
if (!touchPosition.value) return;
|
|
25
|
-
const { screenX, screenY } = e.touches[0];
|
|
26
|
-
const prev = touchPosition.value;
|
|
27
|
-
touchPosition.value = {
|
|
28
|
-
x: screenX,
|
|
29
|
-
y: screenY
|
|
30
|
-
};
|
|
31
|
-
const offsetX = screenX - prev.x;
|
|
32
|
-
const offsetY = screenY - prev.y;
|
|
33
|
-
onOffset(offsetX, offsetY);
|
|
34
|
-
const now = Date.now();
|
|
35
|
-
lastTimeDiff.value = now - lastTimestamp.value;
|
|
36
|
-
lastTimestamp.value = now;
|
|
37
|
-
lastOffset.value = {
|
|
38
|
-
x: offsetX,
|
|
39
|
-
y: offsetY
|
|
40
|
-
};
|
|
41
|
-
}
|
|
42
|
-
function onTouchEnd() {
|
|
43
|
-
if (!touchPosition.value) return;
|
|
44
|
-
touchPosition.value = null;
|
|
45
|
-
const lo = lastOffset.value;
|
|
46
|
-
lastOffset.value = null;
|
|
47
|
-
if (lo) {
|
|
48
|
-
const distanceX = lo.x / (lastTimeDiff.value || 1);
|
|
49
|
-
const distanceY = lo.y / (lastTimeDiff.value || 1);
|
|
50
|
-
const absX = Math.abs(distanceX);
|
|
51
|
-
const absY = Math.abs(distanceY);
|
|
52
|
-
if (Math.max(absX, absY) < MIN_SWIPE_DISTANCE) return;
|
|
53
|
-
let currentX = distanceX;
|
|
54
|
-
let currentY = distanceY;
|
|
55
|
-
motionRef.value = window.setInterval(() => {
|
|
56
|
-
if (Math.abs(currentX) < STOP_SWIPE_DISTANCE && Math.abs(currentY) < STOP_SWIPE_DISTANCE) {
|
|
57
|
-
if (motionRef.value != null) window.clearInterval(motionRef.value);
|
|
58
|
-
return;
|
|
59
|
-
}
|
|
60
|
-
currentX *= SPEED_OFF_MULTIPLE;
|
|
61
|
-
currentY *= SPEED_OFF_MULTIPLE;
|
|
62
|
-
onOffset(currentX * REFRESH_INTERVAL, currentY * REFRESH_INTERVAL);
|
|
63
|
-
}, REFRESH_INTERVAL);
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
function onWheel(e) {
|
|
67
|
-
const { deltaX, deltaY } = e;
|
|
68
|
-
let mixed = 0;
|
|
69
|
-
const absX = Math.abs(deltaX);
|
|
70
|
-
const absY = Math.abs(deltaY);
|
|
71
|
-
if (absX === absY) mixed = lastWheelDirectionRef.value === "x" ? deltaX : deltaY;
|
|
72
|
-
else if (absX > absY) {
|
|
73
|
-
mixed = deltaX;
|
|
74
|
-
lastWheelDirectionRef.value = "x";
|
|
75
|
-
} else {
|
|
76
|
-
mixed = deltaY;
|
|
77
|
-
lastWheelDirectionRef.value = "y";
|
|
78
|
-
}
|
|
79
|
-
if (onOffset(-mixed, -mixed)) e.preventDefault();
|
|
80
|
-
}
|
|
81
|
-
const touchEventsRef = (0, vue.ref)();
|
|
82
|
-
touchEventsRef.value = {
|
|
83
|
-
onTouchStart,
|
|
84
|
-
onTouchMove,
|
|
85
|
-
onTouchEnd,
|
|
86
|
-
onWheel
|
|
87
|
-
};
|
|
88
|
-
(0, vue.onMounted)(() => {
|
|
89
|
-
function onProxyTouchStart(e) {
|
|
90
|
-
touchEventsRef.value?.onTouchStart(e);
|
|
91
|
-
}
|
|
92
|
-
function onProxyTouchMove(e) {
|
|
93
|
-
touchEventsRef.value?.onTouchMove(e);
|
|
94
|
-
}
|
|
95
|
-
function onProxyTouchEnd(e) {
|
|
96
|
-
touchEventsRef.value?.onTouchEnd(e);
|
|
97
|
-
}
|
|
98
|
-
function onProxyWheel(e) {
|
|
99
|
-
touchEventsRef.value?.onWheel(e);
|
|
100
|
-
}
|
|
101
|
-
document.addEventListener("touchmove", onProxyTouchMove, { passive: false });
|
|
102
|
-
document.addEventListener("touchend", onProxyTouchEnd, { passive: true });
|
|
103
|
-
const el = elRef.value;
|
|
104
|
-
if (el) {
|
|
105
|
-
el.addEventListener("touchstart", onProxyTouchStart, { passive: true });
|
|
106
|
-
el.addEventListener("wheel", onProxyWheel, { passive: false });
|
|
107
|
-
}
|
|
108
|
-
(0, vue.onUnmounted)(() => {
|
|
109
|
-
document.removeEventListener("touchmove", onProxyTouchMove);
|
|
110
|
-
document.removeEventListener("touchend", onProxyTouchEnd);
|
|
111
|
-
if (el) {
|
|
112
|
-
el.removeEventListener("touchstart", onProxyTouchStart);
|
|
113
|
-
el.removeEventListener("wheel", onProxyWheel);
|
|
114
|
-
}
|
|
115
|
-
if (motionRef.value != null) window.clearInterval(motionRef.value);
|
|
116
|
-
});
|
|
117
|
-
});
|
|
118
|
-
}
|
|
119
|
-
exports.default = useTouchMove;
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
2
|
-
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
3
|
-
let vue = require("vue");
|
|
4
|
-
var DEFAULT_SIZE = {
|
|
5
|
-
width: 0,
|
|
6
|
-
height: 0,
|
|
7
|
-
left: 0,
|
|
8
|
-
top: 0,
|
|
9
|
-
right: 0
|
|
10
|
-
};
|
|
11
|
-
function useVisibleRange(tabOffsets, visibleTabContentValue, transform, tabContentSizeValue, addNodeSizeValue, operationNodeSizeValue, { tabs, tabPosition, rtl }) {
|
|
12
|
-
const isHorizontal = (0, vue.computed)(() => tabPosition.value === "top" || tabPosition.value === "bottom");
|
|
13
|
-
const charUnit = (0, vue.computed)(() => isHorizontal.value ? "width" : "height");
|
|
14
|
-
const position = (0, vue.computed)(() => isHorizontal.value ? rtl.value ? "right" : "left" : "top");
|
|
15
|
-
const transformSize = (0, vue.computed)(() => isHorizontal.value ? Math.abs(transform.value) : -transform.value);
|
|
16
|
-
const rangeRef = (0, vue.shallowRef)([0, 0]);
|
|
17
|
-
(0, vue.watch)([
|
|
18
|
-
tabOffsets,
|
|
19
|
-
visibleTabContentValue,
|
|
20
|
-
tabContentSizeValue,
|
|
21
|
-
addNodeSizeValue,
|
|
22
|
-
operationNodeSizeValue,
|
|
23
|
-
transformSize,
|
|
24
|
-
tabPosition,
|
|
25
|
-
rtl,
|
|
26
|
-
() => tabs.value.map((tab) => tab.key).join("_")
|
|
27
|
-
], () => {
|
|
28
|
-
const list = tabs.value;
|
|
29
|
-
if (!list.length) {
|
|
30
|
-
rangeRef.value = [0, 0];
|
|
31
|
-
return;
|
|
32
|
-
}
|
|
33
|
-
const len = list.length;
|
|
34
|
-
let endIndex = len;
|
|
35
|
-
for (let i = 0; i < len; i += 1) {
|
|
36
|
-
const offset = tabOffsets.value.get(list[i].key) || DEFAULT_SIZE;
|
|
37
|
-
if (Math.floor(offset[position.value] + offset[charUnit.value]) > Math.floor(transformSize.value + visibleTabContentValue.value)) {
|
|
38
|
-
endIndex = i - 1;
|
|
39
|
-
break;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
let startIndex = 0;
|
|
43
|
-
for (let i = len - 1; i >= 0; i -= 1) if ((tabOffsets.value.get(list[i].key) || DEFAULT_SIZE)[position.value] < transformSize.value) {
|
|
44
|
-
startIndex = i + 1;
|
|
45
|
-
break;
|
|
46
|
-
}
|
|
47
|
-
rangeRef.value = startIndex > endIndex ? [0, -1] : [startIndex, endIndex];
|
|
48
|
-
}, { immediate: true });
|
|
49
|
-
return rangeRef;
|
|
50
|
-
}
|
|
51
|
-
exports.default = useVisibleRange;
|
package/dist/index.cjs
DELETED
package/dist/interface.cjs
DELETED
|
File without changes
|
package/dist/utils.cjs
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
|
|
2
|
-
let __v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
|
|
3
|
-
const tabsGlobal = { uuid: 0 };
|
|
4
|
-
function setUUid(uuid) {
|
|
5
|
-
tabsGlobal.uuid = uuid;
|
|
6
|
-
}
|
|
7
|
-
function getUUid() {
|
|
8
|
-
return tabsGlobal.uuid;
|
|
9
|
-
}
|
|
10
|
-
function stringify(obj) {
|
|
11
|
-
let tgt;
|
|
12
|
-
if (obj instanceof Map) {
|
|
13
|
-
tgt = {};
|
|
14
|
-
obj.forEach((v, k) => {
|
|
15
|
-
tgt[k] = v;
|
|
16
|
-
});
|
|
17
|
-
} else tgt = obj;
|
|
18
|
-
return JSON.stringify(tgt);
|
|
19
|
-
}
|
|
20
|
-
function getRemovable(closable, closeIcon, editable, disabled) {
|
|
21
|
-
if (!editable || disabled || closable === false || closable === void 0 && ((0, __v_c_util_dist_props_util.isEmptyElement)(closeIcon) || closeIcon === null)) return false;
|
|
22
|
-
return true;
|
|
23
|
-
}
|
|
24
|
-
var VC_TABS_DOUBLE_QUOTE = "TABS_DQ";
|
|
25
|
-
function genDataNodeKey(key) {
|
|
26
|
-
return String(key).replace(/"/g, VC_TABS_DOUBLE_QUOTE);
|
|
27
|
-
}
|
|
28
|
-
exports.genDataNodeKey = genDataNodeKey;
|
|
29
|
-
exports.getRemovable = getRemovable;
|
|
30
|
-
exports.getUUid = getUUid;
|
|
31
|
-
exports.setUUid = setUUid;
|
|
32
|
-
exports.stringify = stringify;
|
|
33
|
-
exports.tabsGlobal = tabsGlobal;
|