@v-c/tabs 1.0.0 → 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.
Files changed (30) hide show
  1. package/dist/Tabs.vue_vue_type_script_setup_true_lang.js +0 -1
  2. package/package.json +9 -6
  3. package/dist/TabContext.cjs +0 -12
  4. package/dist/TabNavList/AddButton.cjs +0 -7
  5. package/dist/TabNavList/AddButton.vue_vue_type_script_setup_true_lang.cjs +0 -36
  6. package/dist/TabNavList/ExtraContent.cjs +0 -7
  7. package/dist/TabNavList/ExtraContent.vue_vue_type_script_setup_true_lang.cjs +0 -51
  8. package/dist/TabNavList/OperationNode.cjs +0 -7
  9. package/dist/TabNavList/OperationNode.vue_vue_type_script_setup_true_lang.cjs +0 -210
  10. package/dist/TabNavList/TabNode.cjs +0 -7
  11. package/dist/TabNavList/TabNode.vue_vue_type_script_setup_true_lang.cjs +0 -129
  12. package/dist/TabNavList/Wrapper.cjs +0 -7
  13. package/dist/TabNavList/Wrapper.vue_vue_type_script_setup_true_lang.cjs +0 -54
  14. package/dist/TabNavList/index.cjs +0 -7
  15. package/dist/TabNavList/index.vue_vue_type_script_setup_true_lang.cjs +0 -516
  16. package/dist/TabPanelList/TabPane.cjs +0 -7
  17. package/dist/TabPanelList/TabPane.vue_vue_type_script_setup_true_lang.cjs +0 -85
  18. package/dist/TabPanelList/index.cjs +0 -7
  19. package/dist/TabPanelList/index.vue_vue_type_script_setup_true_lang.cjs +0 -105
  20. package/dist/Tabs.cjs +0 -7
  21. package/dist/Tabs.vue_vue_type_script_setup_true_lang.cjs +0 -194
  22. package/dist/_virtual/rolldown_runtime.cjs +0 -21
  23. package/dist/hooks/useAnimateConfig.cjs +0 -31
  24. package/dist/hooks/useIndicator.cjs +0 -71
  25. package/dist/hooks/useOffsets.cjs +0 -42
  26. package/dist/hooks/useTouchMove.cjs +0 -122
  27. package/dist/hooks/useVisibleRange.cjs +0 -54
  28. package/dist/index.cjs +0 -7
  29. package/dist/interface.cjs +0 -1
  30. package/dist/utils.cjs +0 -34
@@ -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,7 +0,0 @@
1
- Object.defineProperties(exports, {
2
- __esModule: { value: true },
3
- [Symbol.toStringTag]: { value: "Module" }
4
- });
5
- const require_Tabs_vue_vue_type_script_setup_true_lang = require("./Tabs.vue_vue_type_script_setup_true_lang.cjs");
6
- var Tabs_default = require_Tabs_vue_vue_type_script_setup_true_lang.default;
7
- 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,31 +0,0 @@
1
- Object.defineProperties(exports, {
2
- __esModule: { value: true },
3
- [Symbol.toStringTag]: { value: "Module" }
4
- });
5
- const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
6
- let _v_c_util_dist_warning = require("@v-c/util/dist/warning");
7
- function useAnimateConfig(animated = {
8
- inkBar: true,
9
- tabPane: false
10
- }) {
11
- let mergedAnimated;
12
- if (animated === false) mergedAnimated = {
13
- inkBar: false,
14
- tabPane: false
15
- };
16
- else if (animated === true) mergedAnimated = {
17
- inkBar: true,
18
- tabPane: false
19
- };
20
- else mergedAnimated = {
21
- inkBar: true,
22
- ...typeof animated === "object" ? animated : {}
23
- };
24
- if (mergedAnimated.tabPaneMotion && mergedAnimated.tabPane === void 0) mergedAnimated.tabPane = true;
25
- if (!mergedAnimated.tabPaneMotion && mergedAnimated.tabPane) {
26
- 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.");
27
- mergedAnimated.tabPane = false;
28
- }
29
- return mergedAnimated;
30
- }
31
- exports.default = useAnimateConfig;
@@ -1,71 +0,0 @@
1
- Object.defineProperties(exports, {
2
- __esModule: { value: true },
3
- [Symbol.toStringTag]: { value: "Module" }
4
- });
5
- const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
6
- let vue = require("vue");
7
- let _v_c_util_dist_raf = require("@v-c/util/dist/raf");
8
- _v_c_util_dist_raf = require_rolldown_runtime.__toESM(_v_c_util_dist_raf);
9
- function useIndicator(options) {
10
- const { activeTabOffset, horizontal, rtl, indicator } = options;
11
- const inkStyle = (0, vue.ref)();
12
- const inkBarRafRef = (0, vue.ref)();
13
- const getLength = (origin) => {
14
- const size = indicator?.value?.size;
15
- if (typeof size === "function") return size(origin);
16
- if (typeof size === "number") return size;
17
- return origin;
18
- };
19
- function cleanInkBarRaf() {
20
- if (!inkBarRafRef.value) return;
21
- _v_c_util_dist_raf.default.cancel(inkBarRafRef.value);
22
- }
23
- (0, vue.watch)([
24
- () => activeTabOffset.value,
25
- () => horizontal.value,
26
- () => rtl.value,
27
- () => indicator?.value
28
- ], async (_n, _o) => {
29
- await (0, vue.nextTick)();
30
- const align = indicator?.value?.align || "center";
31
- const newInkStyle = {};
32
- if (activeTabOffset.value) if (horizontal.value) {
33
- newInkStyle.width = `${getLength(activeTabOffset.value.width)}px`;
34
- const key = rtl.value ? "right" : "left";
35
- if (align === "start") newInkStyle[key] = `${activeTabOffset.value[key]}px`;
36
- if (align === "center") {
37
- newInkStyle[key] = `${activeTabOffset.value[key] + activeTabOffset.value.width / 2}px`;
38
- newInkStyle.transform = rtl.value ? "translateX(50%)" : "translateX(-50%)";
39
- }
40
- if (align === "end") {
41
- newInkStyle[key] = `${activeTabOffset.value[key] + activeTabOffset.value.width}px`;
42
- newInkStyle.transform = "translateX(-100%)";
43
- }
44
- } else {
45
- newInkStyle.height = `${getLength(activeTabOffset.value.height)}px`;
46
- if (align === "start") newInkStyle.top = `${activeTabOffset.value.top}px`;
47
- if (align === "center") {
48
- newInkStyle.top = `${activeTabOffset.value.top + activeTabOffset.value.height / 2}px`;
49
- newInkStyle.transform = "translateY(-50%)";
50
- }
51
- if (align === "end") {
52
- newInkStyle.top = `${activeTabOffset.value.top + activeTabOffset.value.height}px`;
53
- newInkStyle.transform = "translateY(-100%)";
54
- }
55
- }
56
- cleanInkBarRaf();
57
- inkBarRafRef.value = (0, _v_c_util_dist_raf.default)(() => {
58
- if (!(inkStyle.value && newInkStyle && Object.keys(newInkStyle).every((key) => {
59
- const newValue = newInkStyle[key];
60
- const oldValue = inkStyle.value?.[key];
61
- return typeof newValue === "number" && typeof oldValue === "number" ? Math.round(newValue) === Math.round(oldValue) : newValue === oldValue;
62
- }))) inkStyle.value = newInkStyle;
63
- });
64
- }, { immediate: true });
65
- (0, vue.onUnmounted)(() => {
66
- cleanInkBarRaf();
67
- });
68
- return inkStyle;
69
- }
70
- var useIndicator_default = useIndicator;
71
- exports.default = useIndicator_default;
@@ -1,42 +0,0 @@
1
- Object.defineProperties(exports, {
2
- __esModule: { value: true },
3
- [Symbol.toStringTag]: { value: "Module" }
4
- });
5
- const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
6
- let vue = require("vue");
7
- var DEFAULT_SIZE = {
8
- width: 0,
9
- height: 0,
10
- left: 0,
11
- top: 0
12
- };
13
- function useOffsets(tabs, tabSizes, holderScrollWidth) {
14
- const mapRef = (0, vue.shallowRef)(/* @__PURE__ */ new Map());
15
- (0, vue.watch)([
16
- () => tabs.value.map((tab) => tab.key).join("_"),
17
- tabSizes,
18
- holderScrollWidth
19
- ], () => {
20
- const map = /* @__PURE__ */ new Map();
21
- const firstKey = tabs.value[0]?.key;
22
- const lastOffset = (firstKey ? tabSizes.value.get(firstKey) : void 0) || DEFAULT_SIZE;
23
- const rightOffset = lastOffset.left + lastOffset.width;
24
- for (let i = 0; i < tabs.value.length; i += 1) {
25
- const { key } = tabs.value[i];
26
- let data = tabSizes.value.get(key);
27
- if (!data) {
28
- const prevKey = tabs.value[i - 1]?.key;
29
- data = (prevKey ? tabSizes.value.get(prevKey) : void 0) || DEFAULT_SIZE;
30
- }
31
- const entity = map.get(key) || {
32
- ...data,
33
- right: 0
34
- };
35
- entity.right = rightOffset - entity.left - entity.width;
36
- map.set(key, entity);
37
- }
38
- mapRef.value = map;
39
- }, { immediate: true });
40
- return mapRef;
41
- }
42
- exports.default = useOffsets;
@@ -1,122 +0,0 @@
1
- Object.defineProperties(exports, {
2
- __esModule: { value: true },
3
- [Symbol.toStringTag]: { value: "Module" }
4
- });
5
- const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
6
- let vue = require("vue");
7
- var MIN_SWIPE_DISTANCE = .1;
8
- var STOP_SWIPE_DISTANCE = .01;
9
- var REFRESH_INTERVAL = 20;
10
- var SPEED_OFF_MULTIPLE = .995 ** REFRESH_INTERVAL;
11
- function useTouchMove(elRef, onOffset) {
12
- const touchPosition = (0, vue.ref)(null);
13
- const lastTimestamp = (0, vue.ref)(0);
14
- const lastTimeDiff = (0, vue.ref)(0);
15
- const lastOffset = (0, vue.ref)(null);
16
- const motionRef = (0, vue.ref)();
17
- const lastWheelDirectionRef = (0, vue.ref)();
18
- function onTouchStart(e) {
19
- const { screenX, screenY } = e.touches[0];
20
- touchPosition.value = {
21
- x: screenX,
22
- y: screenY
23
- };
24
- if (motionRef.value != null) window.clearInterval(motionRef.value);
25
- }
26
- function onTouchMove(e) {
27
- if (!touchPosition.value) return;
28
- const { screenX, screenY } = e.touches[0];
29
- const prev = touchPosition.value;
30
- touchPosition.value = {
31
- x: screenX,
32
- y: screenY
33
- };
34
- const offsetX = screenX - prev.x;
35
- const offsetY = screenY - prev.y;
36
- onOffset(offsetX, offsetY);
37
- const now = Date.now();
38
- lastTimeDiff.value = now - lastTimestamp.value;
39
- lastTimestamp.value = now;
40
- lastOffset.value = {
41
- x: offsetX,
42
- y: offsetY
43
- };
44
- }
45
- function onTouchEnd() {
46
- if (!touchPosition.value) return;
47
- touchPosition.value = null;
48
- const lo = lastOffset.value;
49
- lastOffset.value = null;
50
- if (lo) {
51
- const distanceX = lo.x / (lastTimeDiff.value || 1);
52
- const distanceY = lo.y / (lastTimeDiff.value || 1);
53
- const absX = Math.abs(distanceX);
54
- const absY = Math.abs(distanceY);
55
- if (Math.max(absX, absY) < MIN_SWIPE_DISTANCE) return;
56
- let currentX = distanceX;
57
- let currentY = distanceY;
58
- motionRef.value = window.setInterval(() => {
59
- if (Math.abs(currentX) < STOP_SWIPE_DISTANCE && Math.abs(currentY) < STOP_SWIPE_DISTANCE) {
60
- if (motionRef.value != null) window.clearInterval(motionRef.value);
61
- return;
62
- }
63
- currentX *= SPEED_OFF_MULTIPLE;
64
- currentY *= SPEED_OFF_MULTIPLE;
65
- onOffset(currentX * REFRESH_INTERVAL, currentY * REFRESH_INTERVAL);
66
- }, REFRESH_INTERVAL);
67
- }
68
- }
69
- function onWheel(e) {
70
- const { deltaX, deltaY } = e;
71
- let mixed = 0;
72
- const absX = Math.abs(deltaX);
73
- const absY = Math.abs(deltaY);
74
- if (absX === absY) mixed = lastWheelDirectionRef.value === "x" ? deltaX : deltaY;
75
- else if (absX > absY) {
76
- mixed = deltaX;
77
- lastWheelDirectionRef.value = "x";
78
- } else {
79
- mixed = deltaY;
80
- lastWheelDirectionRef.value = "y";
81
- }
82
- if (onOffset(-mixed, -mixed)) e.preventDefault();
83
- }
84
- const touchEventsRef = (0, vue.ref)();
85
- touchEventsRef.value = {
86
- onTouchStart,
87
- onTouchMove,
88
- onTouchEnd,
89
- onWheel
90
- };
91
- (0, vue.onMounted)(() => {
92
- function onProxyTouchStart(e) {
93
- touchEventsRef.value?.onTouchStart(e);
94
- }
95
- function onProxyTouchMove(e) {
96
- touchEventsRef.value?.onTouchMove(e);
97
- }
98
- function onProxyTouchEnd(e) {
99
- touchEventsRef.value?.onTouchEnd(e);
100
- }
101
- function onProxyWheel(e) {
102
- touchEventsRef.value?.onWheel(e);
103
- }
104
- document.addEventListener("touchmove", onProxyTouchMove, { passive: false });
105
- document.addEventListener("touchend", onProxyTouchEnd, { passive: true });
106
- const el = elRef.value;
107
- if (el) {
108
- el.addEventListener("touchstart", onProxyTouchStart, { passive: true });
109
- el.addEventListener("wheel", onProxyWheel, { passive: false });
110
- }
111
- (0, vue.onUnmounted)(() => {
112
- document.removeEventListener("touchmove", onProxyTouchMove);
113
- document.removeEventListener("touchend", onProxyTouchEnd);
114
- if (el) {
115
- el.removeEventListener("touchstart", onProxyTouchStart);
116
- el.removeEventListener("wheel", onProxyWheel);
117
- }
118
- if (motionRef.value != null) window.clearInterval(motionRef.value);
119
- });
120
- });
121
- }
122
- exports.default = useTouchMove;
@@ -1,54 +0,0 @@
1
- Object.defineProperties(exports, {
2
- __esModule: { value: true },
3
- [Symbol.toStringTag]: { value: "Module" }
4
- });
5
- const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
6
- let vue = require("vue");
7
- var DEFAULT_SIZE = {
8
- width: 0,
9
- height: 0,
10
- left: 0,
11
- top: 0,
12
- right: 0
13
- };
14
- function useVisibleRange(tabOffsets, visibleTabContentValue, transform, tabContentSizeValue, addNodeSizeValue, operationNodeSizeValue, { tabs, tabPosition, rtl }) {
15
- const isHorizontal = (0, vue.computed)(() => tabPosition.value === "top" || tabPosition.value === "bottom");
16
- const charUnit = (0, vue.computed)(() => isHorizontal.value ? "width" : "height");
17
- const position = (0, vue.computed)(() => isHorizontal.value ? rtl.value ? "right" : "left" : "top");
18
- const transformSize = (0, vue.computed)(() => isHorizontal.value ? Math.abs(transform.value) : -transform.value);
19
- const rangeRef = (0, vue.shallowRef)([0, 0]);
20
- (0, vue.watch)([
21
- tabOffsets,
22
- visibleTabContentValue,
23
- tabContentSizeValue,
24
- addNodeSizeValue,
25
- operationNodeSizeValue,
26
- transformSize,
27
- tabPosition,
28
- rtl,
29
- () => tabs.value.map((tab) => tab.key).join("_")
30
- ], () => {
31
- const list = tabs.value;
32
- if (!list.length) {
33
- rangeRef.value = [0, 0];
34
- return;
35
- }
36
- const len = list.length;
37
- let endIndex = len;
38
- for (let i = 0; i < len; i += 1) {
39
- const offset = tabOffsets.value.get(list[i].key) || DEFAULT_SIZE;
40
- if (Math.floor(offset[position.value] + offset[charUnit.value]) > Math.floor(transformSize.value + visibleTabContentValue.value)) {
41
- endIndex = i - 1;
42
- break;
43
- }
44
- }
45
- let startIndex = 0;
46
- for (let i = len - 1; i >= 0; i -= 1) if ((tabOffsets.value.get(list[i].key) || DEFAULT_SIZE)[position.value] < transformSize.value) {
47
- startIndex = i + 1;
48
- break;
49
- }
50
- rangeRef.value = startIndex > endIndex ? [0, -1] : [startIndex, endIndex];
51
- }, { immediate: true });
52
- return rangeRef;
53
- }
54
- exports.default = useVisibleRange;
package/dist/index.cjs DELETED
@@ -1,7 +0,0 @@
1
- Object.defineProperties(exports, {
2
- __esModule: { value: true },
3
- [Symbol.toStringTag]: { value: "Module" }
4
- });
5
- const require_Tabs = require("./Tabs.cjs");
6
- var src_default = require_Tabs.default;
7
- exports.default = src_default;
@@ -1 +0,0 @@
1
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });