vft 0.0.5 → 0.0.7

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 (179) hide show
  1. package/dist/index.css +1 -1
  2. package/es/component.mjs +9 -6
  3. package/es/component.mjs.map +1 -1
  4. package/es/components/avatar/avatar.vue2.mjs +12 -11
  5. package/es/components/avatar/avatar.vue2.mjs.map +1 -1
  6. package/es/components/avatar/index.mjs +2 -0
  7. package/es/components/avatar/index.mjs.map +1 -1
  8. package/es/components/back-top/back-top.vue2.mjs +20 -18
  9. package/es/components/back-top/back-top.vue2.mjs.map +1 -1
  10. package/es/components/back-top/index.mjs +2 -0
  11. package/es/components/back-top/index.mjs.map +1 -1
  12. package/es/components/divider/divider.vue2.mjs +4 -2
  13. package/es/components/divider/divider.vue2.mjs.map +1 -1
  14. package/es/components/divider/index.mjs +5 -3
  15. package/es/components/divider/index.mjs.map +1 -1
  16. package/es/components/empty/empty.vue2.mjs.map +1 -1
  17. package/es/components/empty/index.mjs +7 -5
  18. package/es/components/empty/index.mjs.map +1 -1
  19. package/es/components/exception/index.mjs +5 -3
  20. package/es/components/exception/index.mjs.map +1 -1
  21. package/es/components/icon/icon.vue2.mjs +11 -10
  22. package/es/components/icon/icon.vue2.mjs.map +1 -1
  23. package/es/components/icon/index.mjs +5 -3
  24. package/es/components/icon/index.mjs.map +1 -1
  25. package/es/components/index.d.ts +1 -0
  26. package/es/components/index.mjs +11 -6
  27. package/es/components/index.mjs.map +1 -1
  28. package/es/components/result/index.mjs +5 -3
  29. package/es/components/result/index.mjs.map +1 -1
  30. package/es/components/result/result.vue2.mjs +4 -2
  31. package/es/components/result/result.vue2.mjs.map +1 -1
  32. package/es/components/tab-pane/style/css.d.ts +0 -0
  33. package/es/components/tab-pane/style/css.mjs +3 -0
  34. package/es/components/tab-pane/style/css.mjs.map +1 -0
  35. package/es/components/tab-pane/style/index.d.ts +0 -0
  36. package/es/components/tab-pane/style/index.mjs +3 -0
  37. package/es/components/tab-pane/style/index.mjs.map +1 -0
  38. package/es/components/tabs/index.d.ts +356 -0
  39. package/es/components/tabs/index.mjs +15 -0
  40. package/es/components/tabs/index.mjs.map +1 -0
  41. package/es/components/tabs/style/css.d.ts +0 -0
  42. package/es/components/tabs/style/css.mjs +3 -0
  43. package/es/components/tabs/style/css.mjs.map +1 -0
  44. package/es/components/tabs/style/index.d.ts +0 -0
  45. package/es/components/tabs/style/index.mjs +3 -0
  46. package/es/components/tabs/style/index.mjs.map +1 -0
  47. package/es/components/tabs/tab-bar.vue.d.ts +51 -0
  48. package/es/components/tabs/tab-bar.vue.mjs +5 -0
  49. package/es/components/tabs/tab-bar.vue.mjs.map +1 -0
  50. package/es/components/tabs/tab-bar.vue2.mjs +53 -0
  51. package/es/components/tabs/tab-bar.vue2.mjs.map +1 -0
  52. package/es/components/tabs/tab-nav.vue.d.ts +121 -0
  53. package/es/components/tabs/tab-nav.vue.mjs +5 -0
  54. package/es/components/tabs/tab-nav.vue.mjs.map +1 -0
  55. package/es/components/tabs/tab-nav.vue2.mjs +167 -0
  56. package/es/components/tabs/tab-nav.vue2.mjs.map +1 -0
  57. package/es/components/tabs/tab-pane.vue.d.ts +45 -0
  58. package/es/components/tabs/tab-pane.vue.mjs +5 -0
  59. package/es/components/tabs/tab-pane.vue.mjs.map +1 -0
  60. package/es/components/tabs/tab-pane.vue2.mjs +57 -0
  61. package/es/components/tabs/tab-pane.vue2.mjs.map +1 -0
  62. package/es/components/tabs/tabs.vue.d.ts +159 -0
  63. package/es/components/tabs/tabs.vue.mjs +5 -0
  64. package/es/components/tabs/tabs.vue.mjs.map +1 -0
  65. package/es/components/tabs/tabs.vue2.mjs +151 -0
  66. package/es/components/tabs/tabs.vue2.mjs.map +1 -0
  67. package/es/components/tabs/types.d.ts +58 -0
  68. package/es/components/tabs/types.mjs +5 -0
  69. package/es/components/tabs/types.mjs.map +1 -0
  70. package/es/hooks/index.d.ts +1 -0
  71. package/es/hooks/index.mjs +6 -4
  72. package/es/hooks/index.mjs.map +1 -1
  73. package/es/hooks/use-ordered-children/index.d.ts +8 -0
  74. package/es/hooks/use-ordered-children/index.mjs +27 -0
  75. package/es/hooks/use-ordered-children/index.mjs.map +1 -0
  76. package/es/index.d.ts +1 -1
  77. package/es/index.mjs +42 -35
  78. package/es/index.mjs.map +1 -1
  79. package/es/package.json.mjs +1 -1
  80. package/es/style.css +1 -1
  81. package/es/theme-style/src/tabs.scss.mjs +5 -0
  82. package/es/theme-style/src/tabs.scss.mjs.map +1 -0
  83. package/es/utils/index.mjs +23 -10
  84. package/es/utils/index.mjs.map +1 -1
  85. package/es/utils/vue/index.d.ts +1 -0
  86. package/es/utils/vue/index.mjs +18 -5
  87. package/es/utils/vue/index.mjs.map +1 -1
  88. package/es/utils/vue/vnode.d.ts +51 -0
  89. package/es/utils/vue/vnode.mjs +67 -0
  90. package/es/utils/vue/vnode.mjs.map +1 -0
  91. package/lib/component.js +1 -1
  92. package/lib/component.js.map +1 -1
  93. package/lib/components/avatar/avatar.vue2.js +1 -1
  94. package/lib/components/avatar/avatar.vue2.js.map +1 -1
  95. package/lib/components/avatar/index.js +1 -1
  96. package/lib/components/avatar/index.js.map +1 -1
  97. package/lib/components/back-top/back-top.vue2.js +1 -1
  98. package/lib/components/back-top/back-top.vue2.js.map +1 -1
  99. package/lib/components/back-top/index.js +1 -1
  100. package/lib/components/back-top/index.js.map +1 -1
  101. package/lib/components/divider/divider.vue2.js +1 -1
  102. package/lib/components/divider/divider.vue2.js.map +1 -1
  103. package/lib/components/divider/index.js +1 -1
  104. package/lib/components/divider/index.js.map +1 -1
  105. package/lib/components/empty/empty.vue2.js.map +1 -1
  106. package/lib/components/empty/index.js +1 -1
  107. package/lib/components/empty/index.js.map +1 -1
  108. package/lib/components/exception/index.js +1 -1
  109. package/lib/components/exception/index.js.map +1 -1
  110. package/lib/components/icon/icon.vue2.js +1 -1
  111. package/lib/components/icon/icon.vue2.js.map +1 -1
  112. package/lib/components/icon/index.js +1 -1
  113. package/lib/components/icon/index.js.map +1 -1
  114. package/lib/components/index.d.ts +1 -0
  115. package/lib/components/index.js +1 -1
  116. package/lib/components/result/index.js +1 -1
  117. package/lib/components/result/index.js.map +1 -1
  118. package/lib/components/result/result.vue2.js +1 -1
  119. package/lib/components/result/result.vue2.js.map +1 -1
  120. package/lib/components/tab-pane/style/css.d.ts +0 -0
  121. package/lib/components/tab-pane/style/css.js +2 -0
  122. package/lib/components/tab-pane/style/css.js.map +1 -0
  123. package/lib/components/tab-pane/style/index.d.ts +0 -0
  124. package/lib/components/tab-pane/style/index.js +2 -0
  125. package/lib/components/tab-pane/style/index.js.map +1 -0
  126. package/lib/components/tabs/index.d.ts +356 -0
  127. package/lib/components/tabs/index.js +2 -0
  128. package/lib/components/tabs/index.js.map +1 -0
  129. package/lib/components/tabs/style/css.d.ts +0 -0
  130. package/lib/components/tabs/style/css.js +2 -0
  131. package/lib/components/tabs/style/css.js.map +1 -0
  132. package/lib/components/tabs/style/index.d.ts +0 -0
  133. package/lib/components/tabs/style/index.js +2 -0
  134. package/lib/components/tabs/style/index.js.map +1 -0
  135. package/lib/components/tabs/tab-bar.vue.d.ts +51 -0
  136. package/lib/components/tabs/tab-bar.vue.js +2 -0
  137. package/lib/components/tabs/tab-bar.vue.js.map +1 -0
  138. package/lib/components/tabs/tab-bar.vue2.js +2 -0
  139. package/lib/components/tabs/tab-bar.vue2.js.map +1 -0
  140. package/lib/components/tabs/tab-nav.vue.d.ts +121 -0
  141. package/lib/components/tabs/tab-nav.vue.js +2 -0
  142. package/lib/components/tabs/tab-nav.vue.js.map +1 -0
  143. package/lib/components/tabs/tab-nav.vue2.js +2 -0
  144. package/lib/components/tabs/tab-nav.vue2.js.map +1 -0
  145. package/lib/components/tabs/tab-pane.vue.d.ts +45 -0
  146. package/lib/components/tabs/tab-pane.vue.js +2 -0
  147. package/lib/components/tabs/tab-pane.vue.js.map +1 -0
  148. package/lib/components/tabs/tab-pane.vue2.js +2 -0
  149. package/lib/components/tabs/tab-pane.vue2.js.map +1 -0
  150. package/lib/components/tabs/tabs.vue.d.ts +159 -0
  151. package/lib/components/tabs/tabs.vue.js +2 -0
  152. package/lib/components/tabs/tabs.vue.js.map +1 -0
  153. package/lib/components/tabs/tabs.vue2.js +2 -0
  154. package/lib/components/tabs/tabs.vue2.js.map +1 -0
  155. package/lib/components/tabs/types.d.ts +58 -0
  156. package/lib/components/tabs/types.js +2 -0
  157. package/lib/components/tabs/types.js.map +1 -0
  158. package/lib/hooks/index.d.ts +1 -0
  159. package/lib/hooks/index.js +1 -1
  160. package/lib/hooks/use-ordered-children/index.d.ts +8 -0
  161. package/lib/hooks/use-ordered-children/index.js +2 -0
  162. package/lib/hooks/use-ordered-children/index.js.map +1 -0
  163. package/lib/index.d.ts +1 -1
  164. package/lib/index.js +1 -1
  165. package/lib/index.js.map +1 -1
  166. package/lib/package.json.js +1 -1
  167. package/lib/theme-style/src/tabs.scss.js +2 -0
  168. package/lib/theme-style/src/tabs.scss.js.map +1 -0
  169. package/lib/utils/index.js +1 -1
  170. package/lib/utils/vue/index.d.ts +1 -0
  171. package/lib/utils/vue/index.js +1 -1
  172. package/lib/utils/vue/vnode.d.ts +51 -0
  173. package/lib/utils/vue/vnode.js +2 -0
  174. package/lib/utils/vue/vnode.js.map +1 -0
  175. package/package.json +1 -1
  176. package/theme-style/index.css +1 -1
  177. package/theme-style/src/index.scss +1 -0
  178. package/theme-style/src/tabs.scss +582 -0
  179. package/theme-style/vft-tabs.css +1 -0
@@ -0,0 +1,121 @@
1
+ import type { PropType as __PropType } from 'vue';
2
+ import { type IconProps } from 'vft/es/components';
3
+ import type { TabsType } from './types';
4
+ declare const _sfc_main: import("vue").DefineComponent<{
5
+ panes: {
6
+ type: __PropType<{
7
+ uid: number;
8
+ slots: Readonly<{
9
+ [name: string]: import("vue").Slot | undefined;
10
+ }>;
11
+ props: {
12
+ label: string;
13
+ name: Numberish;
14
+ closable: boolean;
15
+ disabled: boolean;
16
+ lazy: boolean;
17
+ };
18
+ paneName: string | number | undefined;
19
+ active: boolean;
20
+ index: string | undefined;
21
+ isClosable: boolean;
22
+ attrs: Record<string, any>;
23
+ }[]>;
24
+ required: true;
25
+ };
26
+ editable: {
27
+ type: __PropType<boolean | undefined>;
28
+ required: false;
29
+ };
30
+ addable: {
31
+ type: __PropType<boolean | undefined>;
32
+ required: false;
33
+ };
34
+ type: {
35
+ type: __PropType<TabsType | undefined>;
36
+ required: false;
37
+ };
38
+ stretch: {
39
+ type: __PropType<boolean | undefined>;
40
+ required: false;
41
+ };
42
+ closeIconCfg: {
43
+ type: __PropType<IconProps | undefined>;
44
+ required: false;
45
+ };
46
+ addIconCfg: {
47
+ type: __PropType<IconProps | undefined>;
48
+ required: false;
49
+ };
50
+ arrowLeftIconCfg: {
51
+ type: __PropType<IconProps | undefined>;
52
+ required: false;
53
+ };
54
+ arrowRightIconCfg: {
55
+ type: __PropType<IconProps | undefined>;
56
+ required: false;
57
+ };
58
+ }, {
59
+ scrollToActiveTab: () => Promise<void>;
60
+ removeFocus: () => boolean;
61
+ }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("tabClick" | "tabRemove" | "tabAdd" | "tabContextmenu")[], "tabClick" | "tabRemove" | "tabAdd" | "tabContextmenu", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
62
+ panes: {
63
+ type: __PropType<{
64
+ uid: number;
65
+ slots: Readonly<{
66
+ [name: string]: import("vue").Slot | undefined;
67
+ }>;
68
+ props: {
69
+ label: string;
70
+ name: Numberish;
71
+ closable: boolean;
72
+ disabled: boolean;
73
+ lazy: boolean;
74
+ };
75
+ paneName: string | number | undefined;
76
+ active: boolean;
77
+ index: string | undefined;
78
+ isClosable: boolean;
79
+ attrs: Record<string, any>;
80
+ }[]>;
81
+ required: true;
82
+ };
83
+ editable: {
84
+ type: __PropType<boolean | undefined>;
85
+ required: false;
86
+ };
87
+ addable: {
88
+ type: __PropType<boolean | undefined>;
89
+ required: false;
90
+ };
91
+ type: {
92
+ type: __PropType<TabsType | undefined>;
93
+ required: false;
94
+ };
95
+ stretch: {
96
+ type: __PropType<boolean | undefined>;
97
+ required: false;
98
+ };
99
+ closeIconCfg: {
100
+ type: __PropType<IconProps | undefined>;
101
+ required: false;
102
+ };
103
+ addIconCfg: {
104
+ type: __PropType<IconProps | undefined>;
105
+ required: false;
106
+ };
107
+ arrowLeftIconCfg: {
108
+ type: __PropType<IconProps | undefined>;
109
+ required: false;
110
+ };
111
+ arrowRightIconCfg: {
112
+ type: __PropType<IconProps | undefined>;
113
+ required: false;
114
+ };
115
+ }>> & {
116
+ onTabClick?: ((...args: any[]) => any) | undefined;
117
+ onTabRemove?: ((...args: any[]) => any) | undefined;
118
+ onTabAdd?: ((...args: any[]) => any) | undefined;
119
+ onTabContextmenu?: ((...args: any[]) => any) | undefined;
120
+ }, {}>;
121
+ export default _sfc_main;
@@ -0,0 +1,5 @@
1
+ import f from "./tab-nav.vue2.mjs";
2
+ export {
3
+ f as default
4
+ };
5
+ //# sourceMappingURL=tab-nav.vue.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tab-nav.vue.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -0,0 +1,167 @@
1
+ import { defineComponent as G, getCurrentInstance as J, inject as Q, ref as g, computed as I, watch as O, onMounted as Z, onUpdated as _, createVNode as c, nextTick as ee } from "vue";
2
+ import "../divider/index.mjs";
3
+ import { VftIcon as T } from "../icon/index.mjs";
4
+ import "../avatar/index.mjs";
5
+ import "../empty/index.mjs";
6
+ import "../result/index.mjs";
7
+ import "../exception/index.mjs";
8
+ import "./index.mjs";
9
+ import { useNamespace as te } from "../../hooks/use-namespace/index.mjs";
10
+ import "@vue/shared";
11
+ import { capitalize as y } from "@vft/utils";
12
+ import { EVENT_CODE as k } from "@vft/constants";
13
+ import { TabsRootContextKey as oe } from "./types.mjs";
14
+ import { useDocumentVisibility as ne, useWindowFocus as le, useResizeObserver as ae } from "@vueuse/core";
15
+ import se from "./tab-bar.vue2.mjs";
16
+ const ye = /* @__PURE__ */ G({
17
+ __name: "tab-nav",
18
+ props: {
19
+ panes: null,
20
+ editable: {
21
+ type: Boolean
22
+ },
23
+ addable: {
24
+ type: Boolean
25
+ },
26
+ type: null,
27
+ stretch: {
28
+ type: Boolean
29
+ },
30
+ closeIconCfg: null,
31
+ addIconCfg: null,
32
+ arrowLeftIconCfg: null,
33
+ arrowRightIconCfg: null
34
+ },
35
+ emits: ["tabClick", "tabRemove", "tabAdd", "tabContextmenu"],
36
+ setup(l, {
37
+ expose: K,
38
+ emit: p
39
+ }) {
40
+ var A;
41
+ const V = J(), C = Q(oe), o = te("tabs"), D = ne(), E = le(), $ = g(), b = g(), h = g(), f = g(!1), v = g(0), S = g(!1), x = g(!0), w = I(() => ["top", "bottom"].includes(C.props.tabPosition) ? "width" : "height"), M = I(() => ({
42
+ transform: `translate${w.value === "width" ? "X" : "Y"}(-${v.value}px)`
43
+ })), q = () => {
44
+ if (!b.value)
45
+ return;
46
+ const t = b.value[`offset${y(w.value)}`], e = v.value;
47
+ e && (v.value = e > t ? e - t : 0);
48
+ }, H = () => {
49
+ if (!b.value || !h.value)
50
+ return;
51
+ const t = h.value[`offset${y(w.value)}`], e = b.value[`offset${y(w.value)}`], n = v.value;
52
+ t - n <= e || (v.value = t - n > e * 2 ? n + e : t - e);
53
+ }, R = async () => {
54
+ const t = h.value;
55
+ if (!f.value || !$.value || !b.value || !t)
56
+ return;
57
+ await ee();
58
+ const e = $.value.querySelector(".is-active");
59
+ if (!e)
60
+ return;
61
+ const n = b.value, m = ["top", "bottom"].includes(C.props.tabPosition), i = e.getBoundingClientRect(), a = n.getBoundingClientRect(), r = m ? t.offsetWidth - a.width : t.offsetHeight - a.height, u = v.value;
62
+ let s = u;
63
+ m ? (i.left < a.left && (s = u - (a.left - i.left)), i.right > a.right && (s = u + i.right - a.right)) : (i.top < a.top && (s = u - (a.top - i.top)), i.bottom > a.bottom && (s = u + (i.bottom - a.bottom))), s = Math.max(s, 0), v.value = Math.min(s, r);
64
+ }, z = () => {
65
+ if (!h.value || !b.value)
66
+ return;
67
+ const t = h.value[`offset${y(w.value)}`], e = b.value[`offset${y(w.value)}`], n = v.value;
68
+ e < t ? (f.value = f.value || {}, f.value.prev = n, f.value.next = n + e < t, t - n < e && (v.value = t - e)) : (f.value = !1, n > 0 && (v.value = 0));
69
+ }, W = (t) => {
70
+ const e = t.code, {
71
+ up: n,
72
+ down: m,
73
+ left: i,
74
+ right: a
75
+ } = k;
76
+ if (![n, m, i, a].includes(e))
77
+ return;
78
+ const r = Array.from(t.currentTarget.querySelectorAll("[role=tab]:not(.is-disabled)")), u = r.indexOf(t.target);
79
+ let s;
80
+ e === i || e === n ? u === 0 ? s = r.length - 1 : s = u - 1 : u < r.length - 1 ? s = u + 1 : s = 0, r[s].focus(), r[s].click(), P();
81
+ }, P = () => {
82
+ x.value && (S.value = !0);
83
+ }, B = () => S.value = !1;
84
+ O(D, (t) => {
85
+ t === "hidden" ? x.value = !1 : t === "visible" && setTimeout(() => x.value = !0, 50);
86
+ }), O(E, (t) => {
87
+ t ? setTimeout(() => x.value = !0, 50) : x.value = !1;
88
+ }), ae($, z), Z(() => setTimeout(() => R(), 0)), _(() => z()), K({
89
+ scrollToActiveTab: R,
90
+ removeFocus: B
91
+ }), O(() => l.panes, () => V.update(), {
92
+ flush: "post"
93
+ });
94
+ const j = I(() => {
95
+ var t, e;
96
+ return f.value ? [c("span", {
97
+ class: [o.e("nav-prev"), o.is("disabled", !f.value.prev)],
98
+ onClick: q
99
+ }, [(t = l.arrowLeftIconCfg) != null && t.icon ? c(T, l.arrowLeftIconCfg, null) : null]), c("span", {
100
+ class: [o.e("nav-next"), o.is("disabled", !f.value.next)],
101
+ onClick: H
102
+ }, [(e = l.arrowRightIconCfg) != null && e.icon ? c(T, l.arrowRightIconCfg, null) : null])] : null;
103
+ }), U = I(() => {
104
+ var t;
105
+ return (t = l.panes) == null ? void 0 : t.map((e, n) => {
106
+ var N, F, L;
107
+ const m = e.uid, i = e.props.disabled, a = e.props.name ?? e.index ?? `${n}`, r = !i && (e.isClosable || l.editable);
108
+ e.index = `${n}`;
109
+ const u = r ? c("span", {
110
+ class: "is-icon-close",
111
+ onClick: (d) => p("tabRemove", e, d)
112
+ }, [(N = l.closeIconCfg) != null && N.icon ? c(T, l.closeIconCfg, null) : null]) : null, s = ((L = (F = e.slots).label) == null ? void 0 : L.call(F)) || e.props.label, Y = !i && e.active ? 0 : -1;
113
+ return c("div", {
114
+ ref: `tab-${m}`,
115
+ class: [o.e("item"), o.is(C.props.tabPosition), o.is("active", e.active), o.is("disabled", i), o.is("closable", r), o.is("focus", S.value)],
116
+ id: `tab-${a}`,
117
+ key: `tab-${m}`,
118
+ "aria-controls": `pane-${a}`,
119
+ role: "tab",
120
+ "aria-selected": e.active,
121
+ tabindex: Y,
122
+ onFocus: () => P(),
123
+ onBlur: () => B(),
124
+ onClick: (d) => {
125
+ B(), p("tabClick", e, a, d);
126
+ },
127
+ onContextmenu: (d) => {
128
+ d.preventDefault(), p("tabContextmenu", {
129
+ pane: e,
130
+ index: n,
131
+ event: d
132
+ });
133
+ },
134
+ onKeydown: (d) => {
135
+ r && (d.code === k.delete || d.code === k.backspace) && p("tabRemove", e, d);
136
+ }
137
+ }, [s, u]);
138
+ });
139
+ }), X = l.editable || l.addable ? c("span", {
140
+ class: o.e("new-tab"),
141
+ tabindex: "0",
142
+ onClick: () => p("tabAdd"),
143
+ onKeydown: (t) => {
144
+ t.code === k.enter && p("tabAdd");
145
+ }
146
+ }, [(A = l.addIconCfg) != null && A.icon ? c(T, l.addIconCfg, null) : null]) : null;
147
+ return () => c("div", {
148
+ ref: $,
149
+ class: [o.e("nav-wrap"), o.is("scrollable", !!f.value), o.is(C.props.tabPosition)]
150
+ }, [j.value, c("div", {
151
+ class: o.e("nav-scroll"),
152
+ ref: b
153
+ }, [c("div", {
154
+ class: [o.e("nav"), o.is(C.props.tabPosition), o.is("stretch", l.stretch && ["top", "bottom"].includes(C.props.tabPosition))],
155
+ ref: h,
156
+ style: M.value,
157
+ role: "tablist",
158
+ onKeydown: W
159
+ }, [l.type ? null : c(se, {
160
+ tabs: [...l.panes]
161
+ }, null), U.value]), X])]);
162
+ }
163
+ });
164
+ export {
165
+ ye as default
166
+ };
167
+ //# sourceMappingURL=tab-nav.vue2.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tab-nav.vue2.mjs","sources":["../../../../../packages/components/tabs/tab-nav.vue"],"sourcesContent":["<script lang=\"tsx\" setup>\nimport {\n computed,\n type CSSProperties,\n getCurrentInstance,\n inject,\n nextTick,\n onMounted,\n onUpdated,\n ref,\n watch\n} from 'vue';\nimport { type IconProps, VftIcon } from '@vft-ui/components';\nimport { useNamespace } from '@vft-ui/hooks';\nimport { capitalize } from '@vft/utils';\nimport { EVENT_CODE } from '@vft/constants';\nimport { TabsRootContextKey } from './types';\nimport type { TabsPaneContext, TabsType, Scrollable } from './types';\nimport { useDocumentVisibility, useResizeObserver, useWindowFocus } from '@vueuse/core';\nimport TabBar from './tab-bar.vue';\n\ninterface TabNavProps {\n panes: TabsPaneContext[];\n /** 标签是否同时可增加和关闭 */\n editable?: boolean;\n /** 标签是否可增加 */\n addable?: boolean;\n /** tab 类型 */\n type?: TabsType;\n stretch?: boolean;\n /** 图标配置 */\n closeIconCfg?: IconProps;\n addIconCfg?: IconProps;\n arrowLeftIconCfg?: IconProps;\n arrowRightIconCfg?: IconProps;\n}\n\ndefineProps({\n \"panes\": null,\n \"editable\": { type: Boolean, },\n \"addable\": { type: Boolean, },\n \"type\": null,\n \"stretch\": { type: Boolean, },\n \"closeIconCfg\": null,\n \"addIconCfg\": null,\n \"arrowLeftIconCfg\": null,\n \"arrowRightIconCfg\": null\n})\n\nconst emit = defineEmits(['tabClick', 'tabRemove', 'tabAdd', 'tabContextmenu']);\n\nconst vm = getCurrentInstance()!;\n\n// 获取从 index.vue 提供的数据信息\nconst rootTabs = inject(TabsRootContextKey)!;\n\nconst ns = useNamespace('tabs');\nconst visibility = useDocumentVisibility();\nconst focused = useWindowFocus();\n\n// 整个 nav dom 包含前进后退 btn (vri-tabs__nav-wrap)\nconst el$ = ref<HTMLDivElement>();\n// el$ 子节点 包含 newButton (vri-tabs__nav-scroll)\nconst navScroll$ = ref<HTMLDivElement>();\n// navScroll$ 子节点 (vri-tabs__nav)\nconst nav$ = ref<HTMLDivElement>();\n\n/** 是否展示左右滚动 */\nconst scrollable = ref<false | Scrollable>(false);\n// 记录滚动时的偏移量\nconst navOffset = ref(0);\nconst isFocus = ref(false);\nconst focusable = ref(true);\n\n// 根据 tabPosition 确定 sizeName 是 width or height\nconst sizeName = computed(() => ['top', 'bottom'].includes(rootTabs.props.tabPosition!) ? 'width' : 'height');\n\n// 设置 tab 导航栏的 translateX or translateY 的偏移量\nconst navStyle = computed<CSSProperties>(() => {\n const dir = sizeName.value === 'width' ? 'X' : 'Y';\n return {\n transform: `translate${dir}(-${navOffset.value}px)`\n };\n});\n\n// 向前滚动\nconst scrollPrev = () => {\n if (!navScroll$.value) return;\n const containerSize =\n navScroll$.value[`offset${capitalize(sizeName.value)}`];\n const currentOffset = navOffset.value;\n\n if (!currentOffset) return;\n\n navOffset.value = currentOffset > containerSize ? currentOffset - containerSize : 0;\n};\n\n// 向后滚动\nconst scrollNext = () => {\n if (!navScroll$.value || !nav$.value) return;\n\n const navSize = nav$.value[`offset${capitalize(sizeName.value)}`];\n const containerSize =\n navScroll$.value[`offset${capitalize(sizeName.value)}`];\n const currentOffset = navOffset.value;\n\n if (navSize - currentOffset <= containerSize) return;\n\n navOffset.value = navSize - currentOffset > containerSize * 2\n ? currentOffset + containerSize\n : navSize - containerSize;\n};\n\n// 滚动到激活的 tab 主要是获取 navOffset 的值\nconst scrollToActiveTab = async() => {\n const nav = nav$.value;\n if (!scrollable.value || !el$.value || !navScroll$.value || !nav) return;\n\n await nextTick();\n\n const activeTab = el$.value.querySelector('.is-active');\n if (!activeTab) return;\n\n const navScroll = navScroll$.value;\n const isHorizontal = ['top', 'bottom'].includes(\n rootTabs.props.tabPosition!\n );\n const activeTabBounding = activeTab.getBoundingClientRect();\n // vri-tabs__nav-scroll\n const navScrollBounding = navScroll.getBoundingClientRect();\n const maxOffset = isHorizontal\n ? nav.offsetWidth - navScrollBounding.width\n : nav.offsetHeight - navScrollBounding.height;\n\n const currentOffset = navOffset.value;\n\n let newOffset = currentOffset;\n\n if (isHorizontal) {\n if (activeTabBounding.left < navScrollBounding.left) {\n newOffset =\n currentOffset - (navScrollBounding.left - activeTabBounding.left);\n }\n if (activeTabBounding.right > navScrollBounding.right) {\n newOffset =\n currentOffset + activeTabBounding.right - navScrollBounding.right;\n }\n } else {\n if (activeTabBounding.top < navScrollBounding.top) {\n newOffset =\n currentOffset - (navScrollBounding.top - activeTabBounding.top);\n }\n if (activeTabBounding.bottom > navScrollBounding.bottom) {\n newOffset =\n currentOffset +\n (activeTabBounding.bottom - navScrollBounding.bottom);\n }\n }\n newOffset = Math.max(newOffset, 0);\n navOffset.value = Math.min(newOffset, maxOffset);\n};\n\nconst update = () => {\n if (!nav$.value || !navScroll$.value) return;\n // 根据 position 的不同 获取 nav$(vri-tabs__nav) 的 offsetWidth or offsetHeight\n const navSize = nav$.value[`offset${capitalize(sizeName.value)}`];\n // 获取到 navScroll$ 的 offsetWidth or offsetHeight\n const containerSize = navScroll$.value[`offset${capitalize(sizeName.value)}`];\n // 获取到当前的偏移量\n const currentOffset = navOffset.value;\n // 由于 navScroll$ 的 overflow 是 hidden,所以当 vri-tabs__nav 撑开时其宽度可能会超过 vri-tabs__nav-scroll\n if (containerSize < navSize) {\n scrollable.value = scrollable.value || {};\n scrollable.value.prev = currentOffset;\n scrollable.value.next = currentOffset + containerSize < navSize;\n if (navSize - currentOffset < containerSize) {\n navOffset.value = navSize - containerSize;\n }\n } else {\n scrollable.value = false;\n if (currentOffset > 0) {\n navOffset.value = 0;\n }\n }\n};\n\nconst changeTab = (e: KeyboardEvent) => {\n const code = e.code;\n\n const { up, down, left, right } = EVENT_CODE;\n if (![up, down, left, right].includes(code)) return;\n\n // 左右上下键更换tab\n const tabList = Array.from(\n (e.currentTarget as HTMLDivElement).querySelectorAll<HTMLDivElement>(\n '[role=tab]:not(.is-disabled)'\n )\n );\n const currentIndex = tabList.indexOf(e.target as HTMLDivElement);\n\n let nextIndex: number;\n if (code === left || code === up) {\n // left\n if (currentIndex === 0) {\n // first\n nextIndex = tabList.length - 1;\n } else {\n nextIndex = currentIndex - 1;\n }\n } else {\n // right\n if (currentIndex < tabList.length - 1) {\n // not last\n nextIndex = currentIndex + 1;\n } else {\n nextIndex = 0;\n }\n }\n tabList[nextIndex].focus(); // 改变焦点元素\n tabList[nextIndex].click(); // 选中下一个tab\n setFocus();\n};\n\nconst setFocus = () => {\n if (focusable.value) isFocus.value = true;\n};\nconst removeFocus = () => (isFocus.value = false);\n\nwatch(visibility, (visibility) => {\n if (visibility === 'hidden') {\n focusable.value = false;\n } else if (visibility === 'visible') {\n setTimeout(() => (focusable.value = true), 50);\n }\n});\n\nwatch(focused, (focused) => {\n if (focused) {\n setTimeout(() => (focusable.value = true), 50);\n } else {\n focusable.value = false;\n }\n});\n\n// 监听 resize 触发 update\nuseResizeObserver(el$, update);\n\nonMounted(() => setTimeout(() => scrollToActiveTab(), 0));\nonUpdated(() => update());\n\ndefineExpose({\n scrollToActiveTab,\n removeFocus\n});\n\nwatch(\n () => __props.panes,\n () => vm.update(),\n { flush: 'post' }\n);\n\n// 前进后退标签\nconst scrollBtn = computed(() => {\n return scrollable.value\n ? [\n <span\n class={[\n ns.e('nav-prev'),\n ns.is('disabled', !scrollable.value.prev)\n ]}\n onClick={scrollPrev}\n >\n {__props.arrowLeftIconCfg?.icon ? <VftIcon {...__props.arrowLeftIconCfg}></VftIcon> : null}\n </span>,\n <span\n class={[\n ns.e('nav-next'),\n ns.is('disabled', !scrollable.value.next)\n ]}\n onClick={scrollNext}\n >\n {__props.arrowRightIconCfg?.icon ? <VftIcon {...__props.arrowRightIconCfg}></VftIcon> : null}\n </span>\n ]\n : null;\n});\n\n// 渲染 tab-pane\nconst tabs = computed(() => {\n return __props.panes?.map((pane, index) => {\n const uid = pane.uid;\n const disabled = pane.props.disabled;\n const tabName = pane.props.name ?? pane.index ?? `${index}`;\n const closable = !disabled && (pane.isClosable || __props.editable);\n pane.index = `${index}`;\n\n // 关闭标签图标\n const btnClose = closable ? (\n <span class=\"is-icon-close\" onClick={(ev: MouseEvent) => emit('tabRemove', pane, ev)}>\n {__props.closeIconCfg?.icon ? <VftIcon {...__props.closeIconCfg}></VftIcon> : null}\n </span>\n ) : null;\n\n const tabLabelContent = pane.slots.label?.() || pane.props.label;\n const tabindex = !disabled && pane.active ? 0 : -1;\n\n return (\n <div\n ref={`tab-${uid}`}\n class={[\n ns.e('item'),\n ns.is(rootTabs.props.tabPosition!),\n ns.is('active', pane.active),\n ns.is('disabled', disabled),\n ns.is('closable', closable),\n ns.is('focus', isFocus.value)\n ]}\n id={`tab-${tabName}`}\n key={`tab-${uid}`}\n aria-controls={`pane-${tabName}`}\n role=\"tab\"\n aria-selected={pane.active}\n tabindex={tabindex}\n onFocus={() => setFocus()}\n onBlur={() => removeFocus()}\n onClick={(ev: MouseEvent) => {\n removeFocus();\n emit('tabClick', pane, tabName, ev);\n }}\n onContextmenu={(event) => {\n event.preventDefault();\n emit('tabContextmenu', { pane, index, event });\n }}\n onKeydown={(ev: KeyboardEvent) => {\n if (\n closable &&\n (ev.code === EVENT_CODE.delete ||\n ev.code === EVENT_CODE.backspace)\n ) {\n emit('tabRemove', pane, ev);\n }\n }}\n >\n {...[tabLabelContent, btnClose]}\n </div>\n );\n });\n});\n\n// 增加 tab 的 dom\nconst newButton =\n __props.editable || __props.addable ? (\n <span\n class={ns.e('new-tab')}\n tabindex=\"0\"\n onClick={() => emit('tabAdd')}\n onKeydown={(ev: KeyboardEvent) => {\n if (ev.code === EVENT_CODE.enter) emit('tabAdd');\n }}\n >\n {__props.addIconCfg?.icon ? <VftIcon {...__props.addIconCfg}></VftIcon> : null}\n </span>\n ) : null;\n\ndefineRender(() => {\n return (\n <div\n ref={el$}\n class={[\n ns.e('nav-wrap'),\n ns.is('scrollable', !!scrollable.value),\n ns.is(rootTabs.props.tabPosition!)\n ]}\n >\n {scrollBtn.value}\n <div class={ns.e('nav-scroll')} ref={navScroll$}>\n <div\n class={[\n ns.e('nav'),\n ns.is(rootTabs.props.tabPosition!),\n ns.is(\n 'stretch',\n __props.stretch &&\n ['top', 'bottom'].includes(rootTabs.props.tabPosition!)\n )\n ]}\n ref={nav$}\n style={navStyle.value}\n role=\"tablist\"\n onKeydown={changeTab}\n >\n {...[\n !__props.type ? <TabBar tabs={[...__props.panes]} /> : null,\n tabs.value\n ]}\n </div>\n {newButton}\n </div>\n </div>\n );\n});\n</script>\n"],"names":["vm","getCurrentInstance","rootTabs","inject","TabsRootContextKey","ns","useNamespace","visibility","useDocumentVisibility","focused","useWindowFocus","el$","ref","navScroll$","nav$","scrollable","navOffset","isFocus","focusable","sizeName","computed","includes","props","tabPosition","navStyle","transform","value","scrollPrev","containerSize","capitalize","currentOffset","scrollNext","navSize","scrollToActiveTab","nav","nextTick","activeTab","querySelector","navScroll","isHorizontal","activeTabBounding","getBoundingClientRect","navScrollBounding","maxOffset","offsetWidth","width","offsetHeight","height","newOffset","left","right","top","bottom","Math","max","min","update","prev","next","changeTab","e","code","up","down","EVENT_CODE","tabList","Array","from","currentTarget","querySelectorAll","currentIndex","indexOf","target","nextIndex","length","focus","click","setFocus","removeFocus","watch","setTimeout","useResizeObserver","onMounted","onUpdated","expose","__props","panes","flush","scrollBtn","_createVNode","is","arrowLeftIconCfg","icon","VftIcon","arrowRightIconCfg","tabs","map","pane","index","uid","disabled","tabName","name","closable","isClosable","editable","btnClose","ev","emit","closeIconCfg","tabLabelContent","slots","label","tabindex","active","onFocus","onBlur","event","preventDefault","delete","backspace","newButton","addable","onClick","enter","addIconCfg","stretch","type","TabBar"],"mappings":"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"}
@@ -0,0 +1,45 @@
1
+ import type { PropType as __PropType } from 'vue';
2
+ declare const _sfc_main: import("vue").DefineComponent<{
3
+ label: {
4
+ type: __PropType<string | undefined>;
5
+ required: false;
6
+ };
7
+ name: {
8
+ type: __PropType<Numberish | undefined>;
9
+ required: false;
10
+ };
11
+ closable: {
12
+ type: __PropType<boolean | undefined>;
13
+ required: false;
14
+ };
15
+ disabled: {
16
+ type: __PropType<boolean | undefined>;
17
+ required: false;
18
+ };
19
+ lazy: {
20
+ type: __PropType<boolean | undefined>;
21
+ required: false;
22
+ };
23
+ }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
24
+ label: {
25
+ type: __PropType<string | undefined>;
26
+ required: false;
27
+ };
28
+ name: {
29
+ type: __PropType<Numberish | undefined>;
30
+ required: false;
31
+ };
32
+ closable: {
33
+ type: __PropType<boolean | undefined>;
34
+ required: false;
35
+ };
36
+ disabled: {
37
+ type: __PropType<boolean | undefined>;
38
+ required: false;
39
+ };
40
+ lazy: {
41
+ type: __PropType<boolean | undefined>;
42
+ required: false;
43
+ };
44
+ }>>, {}>;
45
+ export default _sfc_main;
@@ -0,0 +1,5 @@
1
+ import f from "./tab-pane.vue2.mjs";
2
+ export {
3
+ f as default
4
+ };
5
+ //# sourceMappingURL=tab-pane.vue.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tab-pane.vue.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
@@ -0,0 +1,57 @@
1
+ import { defineComponent as p, getCurrentInstance as h, useSlots as C, inject as B, ref as u, computed as d, watch as g, reactive as N, onMounted as k, onUnmounted as w, unref as t, withDirectives as x, openBlock as z, createElementBlock as R, normalizeClass as S, renderSlot as _, vShow as $, createCommentVNode as P } from "vue";
2
+ import { TabsRootContextKey as j } from "./types.mjs";
3
+ import { useNamespace as D } from "../../hooks/use-namespace/index.mjs";
4
+ import "@vue/shared";
5
+ import "@vft/utils";
6
+ import { eagerComputed as m } from "@vueuse/core";
7
+ const E = ["id", "aria-hidden", "aria-labelledby"], b = (
8
+ /* hoist-static*/
9
+ D("tab-pane")
10
+ ), I = p({
11
+ name: b.b()
12
+ }), F = /* @__PURE__ */ p({
13
+ ...I,
14
+ props: {
15
+ label: null,
16
+ name: null,
17
+ closable: { type: Boolean },
18
+ disabled: { type: Boolean },
19
+ lazy: { type: Boolean }
20
+ },
21
+ setup(a) {
22
+ const n = h(), v = C(), o = B(j), l = u(), f = d(() => a.closable || o.props.closable), e = m(() => o.currentName.value === (a.name ?? l.value)), c = u(e.value), r = d(() => a.name ?? l.value), y = m(() => !a.lazy || c.value || e.value);
23
+ g(e, (s) => {
24
+ s && (c.value = !0);
25
+ });
26
+ const i = N({
27
+ uid: n.uid,
28
+ slots: v,
29
+ props: n.props,
30
+ paneName: r,
31
+ active: e,
32
+ index: l,
33
+ isClosable: f,
34
+ attrs: n.attrs
35
+ });
36
+ return k(() => {
37
+ o.registerPane(i);
38
+ }), w(() => {
39
+ o.unregisterPane(i.uid);
40
+ }), (s, K) => t(y) ? x((z(), R("div", {
41
+ key: 0,
42
+ id: `pane-${t(r)}`,
43
+ class: S(t(b).b()),
44
+ role: "tabpanel",
45
+ "aria-hidden": !t(e),
46
+ "aria-labelledby": `tab-${t(r)}`
47
+ }, [
48
+ _(s.$slots, "default")
49
+ ], 10, E)), [
50
+ [$, t(e)]
51
+ ]) : P("", !0);
52
+ }
53
+ });
54
+ export {
55
+ F as default
56
+ };
57
+ //# sourceMappingURL=tab-pane.vue2.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tab-pane.vue2.mjs","sources":["../../../../../packages/components/tabs/tab-pane.vue"],"sourcesContent":["<script lang=\"ts\">\nconst ns = /* hoist-static*/ useNamespace('tab-pane')\n\nimport { defineComponent as DO_defineComponent } from 'vue';\nexport default /*#__PURE__*/ DO_defineComponent({\n name: ns.b()\n});</script>\n<script lang=\"ts\" setup>\nimport { type TabsPaneContext, TabsRootContextKey } from './types';\nimport { useNamespace } from '@vft-ui/hooks';\nimport {\n computed,\n getCurrentInstance,\n inject,\n onMounted,\n onUnmounted,\n reactive,\n ref,\n useSlots,\n watch\n} from 'vue';\nimport { eagerComputed } from '@vueuse/core';\n\ninterface TabPaneProps {\n /** 选项卡标题 */\n label?: string;\n /** 与选项卡绑定值 value 对应的标识符,表示选项卡别名 */\n name?: Numberish;\n /** 标签是否可关闭 */\n closable?: boolean;\n /** 是否禁用 */\n disabled?: boolean;\n /** 标签是否延迟渲染 */\n lazy?: boolean;\n}\n\ndefineProps({\n \"label\": null,\n \"name\": null,\n \"closable\": { type: Boolean, },\n \"disabled\": { type: Boolean, },\n \"lazy\": { type: Boolean, }\n})\n\nconst vm = getCurrentInstance()!;\n\nconst slots = useSlots();\n\nconst tabsRoot = inject(TabsRootContextKey)!;\n\n\n\n;\n\nconst index = ref<string>();\n// 可关闭\nconst isClosable = computed(() => __props.closable || tabsRoot.props.closable);\n// 激活\nconst active = eagerComputed(() => {\n return tabsRoot.currentName.value === (__props.name ?? index.value);\n});\n\nconst loaded = ref(active.value);\n\nconst paneName = computed(() => __props.name ?? index.value);\n\nconst shouldBeRender = eagerComputed(() => {\n return !__props.lazy || loaded.value || active.value;\n});\n\nwatch(active, (val) => {\n if (val) loaded.value = true;\n});\n\nconst pane = reactive({\n uid: vm.uid,\n slots,\n props: vm.props as unknown as TabPaneProps,\n paneName,\n active,\n index,\n isClosable,\n attrs: vm.attrs\n});\n\n\nonMounted(() => {\n tabsRoot.registerPane(pane as TabsPaneContext);\n});\n\nonUnmounted(() => {\n tabsRoot.unregisterPane(pane.uid);\n});\n</script>\n\n<template>\n <div v-if=\"shouldBeRender\" v-show=\"active\" :id=\"`pane-${paneName}`\" :class=\"ns.b()\"\n role=\"tabpanel\" :aria-hidden=\"!active\" :aria-labelledby=\"`tab-${paneName}`\">\n <slot />\n </div>\n</template>\n"],"names":["ns","useNamespace","__default__","DO_defineComponent","vm","getCurrentInstance","slots","useSlots","tabsRoot","inject","TabsRootContextKey","index","ref","isClosable","computed","__props","active","eagerComputed","loaded","paneName","shouldBeRender","watch","val","pane","reactive","onMounted","onUnmounted"],"mappings":";;;;;;oDACMA;AAAA;AAAA,EAAuBC,EAAa,UAAU;AAAA,GAGpDC,IAA6BC,EAAmB;AAAA,EAC9C,MAAMH,EAAG,EAAE;AACb,CAAC;;;;;;;;;;AAsCD,UAAMI,IAAKC,KAELC,IAAQC,KAERC,IAAWC,EAAOC,CAAkB,GAMpCC,IAAQC,KAERC,IAAaC,EAAS,MAAMC,EAAQ,YAAYP,EAAS,MAAM,QAAQ,GAEvEQ,IAASC,EAAc,MACpBT,EAAS,YAAY,WAAWO,EAAQ,QAAQJ,EAAM,MAC9D,GAEKO,IAASN,EAAII,EAAO,KAAK,GAEzBG,IAAWL,EAAS,MAAMC,EAAQ,QAAQJ,EAAM,KAAK,GAErDS,IAAiBH,EAAc,MAC5B,CAACF,EAAQ,QAAQG,EAAO,SAASF,EAAO,KAChD;AAEK,IAAAK,EAAAL,GAAQ,CAACM,MAAQ;AACjB,MAAAA,MAAKJ,EAAO,QAAQ;AAAA,IAAA,CACzB;AAED,UAAMK,IAAOC,EAAS;AAAA,MACpB,KAAKpB,EAAG;AAAA,MACR,OAAAE;AAAA,MACA,OAAOF,EAAG;AAAA,MACV,UAAAe;AAAA,MACA,QAAAH;AAAA,MACA,OAAAL;AAAA,MACA,YAAAE;AAAA,MACA,OAAOT,EAAG;AAAA,IAAA,CACX;AAGD,WAAAqB,EAAU,MAAM;AACd,MAAAjB,EAAS,aAAae,CAAuB;AAAA,IAAA,CAC9C,GAEDG,EAAY,MAAM;AACP,MAAAlB,EAAA,eAAee,EAAK,GAAG;AAAA,IAAA,CACjC;;;;;;;;;;;;;;"}
@@ -0,0 +1,159 @@
1
+ import type { PropType as __PropType } from 'vue';
2
+ import { type IconProps } from 'vft/es/components';
3
+ import { type TabsPaneContext, type TabsType } from './types';
4
+ declare const _sfc_main: import("vue").DefineComponent<{
5
+ type: {
6
+ type: __PropType<TabsType | undefined>;
7
+ required: false;
8
+ };
9
+ closable: {
10
+ type: __PropType<boolean | undefined>;
11
+ required: false;
12
+ };
13
+ addable: {
14
+ type: __PropType<boolean | undefined>;
15
+ required: false;
16
+ };
17
+ modelValue: {
18
+ type: __PropType<Numberish>;
19
+ required: true;
20
+ };
21
+ editable: {
22
+ type: __PropType<boolean | undefined>;
23
+ required: false;
24
+ };
25
+ tabPosition: {
26
+ type: __PropType<"left" | "right" | "top" | "bottom" | undefined>;
27
+ required: false;
28
+ };
29
+ beforeLeave: {
30
+ type: __PropType<Function | undefined>;
31
+ required: false;
32
+ };
33
+ stretch: {
34
+ type: __PropType<boolean | undefined>;
35
+ required: false;
36
+ };
37
+ closeIconCfg: {
38
+ type: __PropType<IconProps | undefined>;
39
+ required: false;
40
+ };
41
+ addIconCfg: {
42
+ type: __PropType<IconProps | undefined>;
43
+ required: false;
44
+ };
45
+ arrowLeftIconCfg: {
46
+ type: __PropType<IconProps | undefined>;
47
+ required: false;
48
+ };
49
+ arrowRightIconCfg: {
50
+ type: __PropType<IconProps | undefined>;
51
+ required: false;
52
+ };
53
+ }, {
54
+ currentName: import("vue").Ref<Numberish>;
55
+ }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
56
+ "update:modelValue": (name: Numberish) => boolean;
57
+ /** 点击 */
58
+ tabClick: (pane: TabsPaneContext, ev: Event) => boolean;
59
+ /** 右键点击 */
60
+ tabContextMenu: (pane: TabsPaneContext, index: number, ev: Event) => boolean;
61
+ tabChange: (name: Numberish) => boolean;
62
+ edit: (paneName: Numberish | undefined, action: 'remove' | 'add') => boolean;
63
+ /** 移除 */
64
+ tabRemove: (name: Numberish) => boolean;
65
+ /** 增加 */
66
+ tabAdd: () => true;
67
+ }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
68
+ type: {
69
+ type: __PropType<TabsType | undefined>;
70
+ required: false;
71
+ };
72
+ closable: {
73
+ type: __PropType<boolean | undefined>;
74
+ required: false;
75
+ };
76
+ addable: {
77
+ type: __PropType<boolean | undefined>;
78
+ required: false;
79
+ };
80
+ modelValue: {
81
+ type: __PropType<Numberish>;
82
+ required: true;
83
+ };
84
+ editable: {
85
+ type: __PropType<boolean | undefined>;
86
+ required: false;
87
+ };
88
+ tabPosition: {
89
+ type: __PropType<"left" | "right" | "top" | "bottom" | undefined>;
90
+ required: false;
91
+ };
92
+ beforeLeave: {
93
+ type: __PropType<Function | undefined>;
94
+ required: false;
95
+ };
96
+ stretch: {
97
+ type: __PropType<boolean | undefined>;
98
+ required: false;
99
+ };
100
+ closeIconCfg: {
101
+ type: __PropType<IconProps | undefined>;
102
+ required: false;
103
+ };
104
+ addIconCfg: {
105
+ type: __PropType<IconProps | undefined>;
106
+ required: false;
107
+ };
108
+ arrowLeftIconCfg: {
109
+ type: __PropType<IconProps | undefined>;
110
+ required: false;
111
+ };
112
+ arrowRightIconCfg: {
113
+ type: __PropType<IconProps | undefined>;
114
+ required: false;
115
+ };
116
+ }>> & {
117
+ "onUpdate:modelValue"?: ((name: Numberish) => any) | undefined;
118
+ onTabClick?: ((pane: {
119
+ uid: number;
120
+ slots: Readonly<{
121
+ [name: string]: import("vue").Slot | undefined;
122
+ }>;
123
+ props: {
124
+ label: string;
125
+ name: Numberish;
126
+ closable: boolean;
127
+ disabled: boolean;
128
+ lazy: boolean;
129
+ };
130
+ paneName: string | number | undefined;
131
+ active: boolean;
132
+ index: string | undefined;
133
+ isClosable: boolean;
134
+ attrs: Record<string, any>;
135
+ }, ev: Event) => any) | undefined;
136
+ onTabContextMenu?: ((pane: {
137
+ uid: number;
138
+ slots: Readonly<{
139
+ [name: string]: import("vue").Slot | undefined;
140
+ }>;
141
+ props: {
142
+ label: string;
143
+ name: Numberish;
144
+ closable: boolean;
145
+ disabled: boolean;
146
+ lazy: boolean;
147
+ };
148
+ paneName: string | number | undefined;
149
+ active: boolean;
150
+ index: string | undefined;
151
+ isClosable: boolean;
152
+ attrs: Record<string, any>;
153
+ }, index: number, ev: Event) => any) | undefined;
154
+ onTabChange?: ((name: Numberish) => any) | undefined;
155
+ onEdit?: ((paneName: Numberish | undefined, action: "remove" | "add") => any) | undefined;
156
+ onTabRemove?: ((name: Numberish) => any) | undefined;
157
+ onTabAdd?: (() => any) | undefined;
158
+ }, {}>;
159
+ export default _sfc_main;
@@ -0,0 +1,5 @@
1
+ import f from "./tabs.vue2.mjs";
2
+ export {
3
+ f as default
4
+ };
5
+ //# sourceMappingURL=tabs.vue.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tabs.vue.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}