@wikicasa-dev/components 1.7.50 → 1.7.52
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/BaseComplexToggle.js +62 -63
- package/dist/BaseTab.js +1 -1
- package/dist/BaseTabView.js +1 -1
- package/dist/UIKit/Tab/BaseTab.vue.d.ts +4 -0
- package/dist/assets/BaseComplexToggle.css +1 -1
- package/dist/chunks/BaseTab.vue_vue_type_script_setup_true_lang.Cu67jd8K.js +15 -0
- package/dist/chunks/BaseTabView.vue_vue_type_script_setup_true_lang.Cs-5T5J3.js +85 -0
- package/dist/index.js +2 -2
- package/dist/types.d.ts +3 -0
- package/package.json +1 -1
- package/dist/chunks/BaseTab.vue_vue_type_script_setup_true_lang.BRubYI9e.js +0 -14
- package/dist/chunks/BaseTabView.vue_vue_type_script_setup_true_lang.D9k4pe6N.js +0 -83
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { _ as
|
|
3
|
-
import './assets/BaseComplexToggle.css';const
|
|
1
|
+
import { defineComponent as v, mergeModels as y, useModel as B, ref as a, openBlock as n, createElementBlock as u, normalizeClass as s, createElementVNode as i, withModifiers as c, renderSlot as f, createCommentVNode as k } from "vue";
|
|
2
|
+
import { _ as C } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
|
|
3
|
+
import './assets/BaseComplexToggle.css';const w = ["id", "data-cy"], $ = ["data-cy"], L = ["src", "alt"], M = ["innerHTML"], z = ["data-cy"], V = ["src", "alt"], H = ["innerHTML"], j = /* @__PURE__ */ v({
|
|
4
4
|
__name: "BaseComplexToggle",
|
|
5
|
-
props: /* @__PURE__ */
|
|
5
|
+
props: /* @__PURE__ */ y({
|
|
6
6
|
labels: {},
|
|
7
7
|
type: { default: "full" },
|
|
8
8
|
mode: { default: "" },
|
|
@@ -16,101 +16,100 @@ import './assets/BaseComplexToggle.css';const x = ["id", "data-cy"], V = ["data-
|
|
|
16
16
|
modelModifiers: {}
|
|
17
17
|
}),
|
|
18
18
|
emits: ["update:modelValue"],
|
|
19
|
-
setup(
|
|
20
|
-
const l =
|
|
21
|
-
|
|
22
|
-
},
|
|
23
|
-
|
|
24
|
-
"base-complex-toggle-active",
|
|
25
|
-
t.value
|
|
26
|
-
), s.value?.classList.remove(
|
|
27
|
-
"base-complex-toggle-active",
|
|
28
|
-
t.value
|
|
29
|
-
);
|
|
30
|
-
}, p = () => {
|
|
31
|
-
i.value?.classList.remove("translateX-left"), i.value?.classList.add("translateX-right"), s.value?.classList.add(
|
|
32
|
-
"base-complex-toggle-active",
|
|
33
|
-
t.value
|
|
34
|
-
), o.value?.classList.remove(
|
|
35
|
-
"base-complex-toggle-active",
|
|
36
|
-
t.value
|
|
37
|
-
);
|
|
38
|
-
}, T = () => {
|
|
39
|
-
b.value = l.labels.leftToggle;
|
|
40
|
-
}, y = () => {
|
|
41
|
-
b.value = l.labels.rightToggle;
|
|
19
|
+
setup(b) {
|
|
20
|
+
const l = b, t = B(b, "modelValue"), r = a("uikit-text-white"), m = a(null), p = a(null), h = a(null), g = () => {
|
|
21
|
+
t.value = l.labels.leftToggle;
|
|
22
|
+
}, d = () => {
|
|
23
|
+
t.value = l.labels.rightToggle;
|
|
42
24
|
};
|
|
43
|
-
return
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
25
|
+
return (() => {
|
|
26
|
+
if (l.labels.leftToggle.checked) {
|
|
27
|
+
g();
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (l.labels.rightToggle.checked) {
|
|
31
|
+
d();
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
g();
|
|
35
|
+
})(), [
|
|
36
|
+
"uikit-bg-w-gray",
|
|
37
|
+
"uikit-bg-w-warning",
|
|
38
|
+
"uikit-bg-w-lavender"
|
|
39
|
+
].includes(l.btnBgColor) && (r.value = "uikit-text-w-black"), (e, o) => (n(), u("div", {
|
|
52
40
|
id: e.$attrs.id || "",
|
|
53
41
|
"data-cy": e.$attrs["data-cy"] || "",
|
|
54
|
-
class:
|
|
42
|
+
class: s(["base-complex-toggle uikit-relative uikit-flex uikit-justify-center uikit-p-0", [e.mode, e.borderContainerColor, e.size]])
|
|
55
43
|
}, [
|
|
56
|
-
|
|
44
|
+
i("div", {
|
|
57
45
|
ref_key: "leftBtn",
|
|
58
|
-
ref:
|
|
46
|
+
ref: m,
|
|
59
47
|
"data-cy": `bct-left-btn${e.labels.leftToggle.label ? `-${e.labels.leftToggle.label}` : ""}`,
|
|
60
|
-
class: "left-button uikit-flex uikit-flex-1 uikit-items-center uikit-justify-center hover:uikit-cursor-pointer",
|
|
61
|
-
|
|
48
|
+
class: s(["left-button uikit-flex uikit-flex-1 uikit-items-center uikit-justify-center hover:uikit-cursor-pointer", [
|
|
49
|
+
{
|
|
50
|
+
"base-complex-toggle-active": t.value?.label === e.labels.leftToggle.label
|
|
51
|
+
},
|
|
52
|
+
r.value
|
|
53
|
+
]]),
|
|
54
|
+
onClick: o[0] || (o[0] = c((T) => g(), ["stop"]))
|
|
62
55
|
}, [
|
|
63
|
-
|
|
64
|
-
e.labels.leftToggle.icon ? (
|
|
56
|
+
f(e.$slots, "left_icon", {}, () => [
|
|
57
|
+
e.labels.leftToggle.icon ? (n(), u("img", {
|
|
65
58
|
key: 0,
|
|
66
59
|
class: "base-complex-toggle-icon uikit-relative uikit-z-10 uikit-mr-10px",
|
|
67
60
|
src: e.labels.leftToggle.icon.src,
|
|
68
61
|
alt: e.labels.leftToggle.icon.alt,
|
|
69
62
|
width: "15",
|
|
70
63
|
height: "15"
|
|
71
|
-
}, null, 8,
|
|
64
|
+
}, null, 8, L)) : k("", !0)
|
|
72
65
|
], !0),
|
|
73
|
-
|
|
66
|
+
i("span", {
|
|
74
67
|
ref: "leftToggleLabel",
|
|
75
68
|
class: "base-complex-toggle-label uikit-relative uikit-z-10",
|
|
76
69
|
innerHTML: e.labels.leftToggle.label
|
|
77
|
-
}, null, 8,
|
|
78
|
-
],
|
|
79
|
-
|
|
70
|
+
}, null, 8, M)
|
|
71
|
+
], 10, $),
|
|
72
|
+
i("div", {
|
|
80
73
|
ref_key: "rightBtn",
|
|
81
|
-
ref:
|
|
74
|
+
ref: p,
|
|
82
75
|
"data-cy": `bct-right-btn${e.labels.rightToggle.label ? `-${e.labels.rightToggle.label}` : ""}`,
|
|
83
|
-
class: "right-button uikit-flex uikit-flex-1 uikit-items-center uikit-justify-center hover:uikit-cursor-pointer",
|
|
84
|
-
|
|
76
|
+
class: s(["right-button uikit-flex uikit-flex-1 uikit-items-center uikit-justify-center hover:uikit-cursor-pointer", [
|
|
77
|
+
{
|
|
78
|
+
"base-complex-toggle-active": t.value?.label === e.labels.rightToggle.label
|
|
79
|
+
},
|
|
80
|
+
r.value
|
|
81
|
+
]]),
|
|
82
|
+
onClick: o[1] || (o[1] = c((T) => d(), ["stop"]))
|
|
85
83
|
}, [
|
|
86
|
-
|
|
87
|
-
e.labels.rightToggle.icon ? (
|
|
84
|
+
f(e.$slots, "right_icon", {}, () => [
|
|
85
|
+
e.labels.rightToggle.icon ? (n(), u("img", {
|
|
88
86
|
key: 0,
|
|
89
87
|
class: "base-complex-toggle-icon uikit-relative uikit-z-10 uikit-mr-10px",
|
|
90
88
|
src: e.labels.rightToggle.icon.src,
|
|
91
89
|
alt: e.labels.rightToggle.icon.alt,
|
|
92
90
|
width: "15",
|
|
93
91
|
height: "15"
|
|
94
|
-
}, null, 8,
|
|
92
|
+
}, null, 8, V)) : k("", !0)
|
|
95
93
|
], !0),
|
|
96
|
-
|
|
94
|
+
i("span", {
|
|
97
95
|
ref: "rightToggleLabel",
|
|
98
96
|
class: "base-complex-toggle-label uikit-relative uikit-z-10",
|
|
99
97
|
innerHTML: e.labels.rightToggle.label
|
|
100
|
-
}, null, 8,
|
|
101
|
-
],
|
|
102
|
-
|
|
98
|
+
}, null, 8, H)
|
|
99
|
+
], 10, z),
|
|
100
|
+
i("div", {
|
|
103
101
|
ref_key: "dynamicBg",
|
|
104
|
-
ref:
|
|
105
|
-
class:
|
|
102
|
+
ref: h,
|
|
103
|
+
class: s(["uikit-absolute uikit-transition-all uikit-duration-200 uikit-ease-out", [
|
|
106
104
|
e.type === "full" ? "base-complex-toggle-active-bg" : "base-complex-toggle-active-padded-bg",
|
|
107
105
|
e.btnBgColor,
|
|
108
|
-
e.mode
|
|
106
|
+
e.mode,
|
|
107
|
+
t.value?.label === e.labels.leftToggle.label ? "translateX-left" : "translateX-right"
|
|
109
108
|
]])
|
|
110
109
|
}, null, 2)
|
|
111
|
-
], 10,
|
|
110
|
+
], 10, w));
|
|
112
111
|
}
|
|
113
|
-
}), A = /* @__PURE__ */
|
|
112
|
+
}), A = /* @__PURE__ */ C(j, [["__scopeId", "data-v-6ed68051"]]);
|
|
114
113
|
export {
|
|
115
114
|
A as default
|
|
116
115
|
};
|
package/dist/BaseTab.js
CHANGED
package/dist/BaseTabView.js
CHANGED
|
@@ -1,12 +1,16 @@
|
|
|
1
|
+
import { ClassType } from '@wikicasa-dev/types';
|
|
2
|
+
|
|
1
3
|
declare function __VLS_template(): {
|
|
2
4
|
header?(_: {}): any;
|
|
3
5
|
};
|
|
4
6
|
declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
|
|
5
7
|
activeTabPanelIdx?: number;
|
|
6
8
|
headerTitle?: string;
|
|
9
|
+
tabPanelClasses?: ClassType;
|
|
7
10
|
}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
8
11
|
activeTabPanelIdx?: number;
|
|
9
12
|
headerTitle?: string;
|
|
13
|
+
tabPanelClasses?: ClassType;
|
|
10
14
|
}>>>, {}, {}>;
|
|
11
15
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
12
16
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.base-complex-toggle[data-v-
|
|
1
|
+
.base-complex-toggle[data-v-6ed68051]{--base-complex-toggle-height: 42px;--base-complex-toggle-width: 230px;--base-complex-toggle-radius: 23px;--base-complex-toggle-border-width: 1px;--base-complex-toggle-active: #E9EFFE;--base-complex-border-color: #B4C2F0;--padding-x-bg: 7px;--padding-y-bg: 8px;--base-complex-toggle-bg-height: var(--base-complex-toggle-height);--base-complex-toggle-bg-width: calc(var(--base-complex-toggle-width) / 2);--base-complex-toggle-bg-padded-width: calc( var(--base-complex-toggle-bg-width) - var(--padding-x-bg) );--base-complex-toggle-bg-padded-height: calc( var(--base-complex-toggle-bg-height) - var(--padding-y-bg) );--padded-bg-dist-from-top: calc(var(--padding-y-bg) / 2);--round-interval: 1px;--translateX-value: calc(var(--base-complex-toggle-bg-width) / 2);--left-translateX: translateX(calc(var(--translateX-value) * -1));--right-translateX: translateX(var(--translateX-value));--toggle-width: var(--base-complex-toggle-width);--toggle-height: var(--base-complex-toggle-height);--toggle-border: var(--base-complex-toggle-border-width) var(--base-complex-toggle-active) solid;--toggle-border-radius: var(--base-complex-toggle-radius)}.base-complex-toggle.lg[data-v-6ed68051]{--base-complex-toggle-height: 56px;--base-complex-toggle-width: 342px;--base-complex-toggle-radius: 28px}@media screen and (max-width: 576px){.base-complex-toggle.mobile[data-v-6ed68051]{--base-complex-toggle-width: 342px }}.base-complex-toggle[data-v-6ed68051]{width:var(--toggle-width);height:var(--toggle-height);border:var(--toggle-border);border-radius:var(--toggle-border-radius)}.left-button.base-complex-toggle-active[data-v-6ed68051],.right-button.base-complex-toggle-active[data-v-6ed68051]{cursor:default}.base-complex-toggle-active[data-v-6ed68051]{font-weight:500}.base-complex-toggle-active-bg[data-v-6ed68051]{--toggle-bg-width: var(--base-complex-toggle-bg-width);--toggle-bg-height: calc( var(--base-complex-toggle-bg-height) - (2 * var(--base-complex-toggle-border-width)) )}@media screen and (max-width: 576px){.base-complex-toggle-active-bg .mobile[data-v-6ed68051]{--toggle-bg-width: var(--base-complex-toggle-bg-lg-width) }}.base-complex-toggle-active-bg[data-v-6ed68051]{width:var(--toggle-bg-width);height:var(--toggle-bg-height);border-radius:var(--base-complex-toggle-radius);z-index:1}.base-complex-toggle-active-padded-bg[data-v-6ed68051]{--toggle-bg-width: var(--base-complex-toggle-bg-padded-width);--toggle-bg-height: calc( var(--base-complex-toggle-bg-padded-height) - (2 * var(--base-complex-toggle-border-width)) )}@media screen and (max-width: 576px){.base-complex-toggle-active-padded-bg.mobile[data-v-6ed68051]{--toggle-bg-width: var(--base-complex-toggle-bg-padded-width) }}.base-complex-toggle-active-padded-bg[data-v-6ed68051]{border-radius:var(--base-complex-toggle-radius);z-index:1;top:var(--padded-bg-dist-from-top);width:var(--toggle-bg-width);height:var(--toggle-bg-height)}.translateX-left[data-v-6ed68051]{transform:var(--left-translateX)}@media screen and (max-width: 576px){.translateX-left.mobile[data-v-6ed68051]{transform:var(--left-translateX)}}.translateX-right[data-v-6ed68051]{transform:var(--right-translateX)}@media screen and (max-width: 576px){.translateX-right.mobile[data-v-6ed68051]{transform:var(--right-translateX)}}.uikit-bg-w-lavender-bordered[data-v-6ed68051]{--tw-border-opacity: 1;border-color:rgb(180 194 240 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(233 239 254 / var(--tw-bg-opacity))}.uikit-bg-w-cultured-bordered[data-v-6ed68051]{border-width:1px;--tw-border-opacity: 1;border-color:rgb(180 194 240 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(244 247 255 / var(--tw-bg-opacity))}.uikit-bg-facile[data-v-6ed68051]{--tw-bg-opacity: 1;background-color:rgb(255 102 0 / var(--tw-bg-opacity))}.border-facile[data-v-6ed68051]{--tw-border-opacity: 1;border-color:rgb(255 102 0 / var(--tw-border-opacity))}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { defineComponent as a, renderSlot as r } from "vue";
|
|
2
|
+
const o = /* @__PURE__ */ a({
|
|
3
|
+
__name: "BaseTab",
|
|
4
|
+
props: {
|
|
5
|
+
activeTabPanelIdx: {},
|
|
6
|
+
headerTitle: {},
|
|
7
|
+
tabPanelClasses: {}
|
|
8
|
+
},
|
|
9
|
+
setup(s) {
|
|
10
|
+
return (e, t) => r(e.$slots, "header");
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
export {
|
|
14
|
+
o as _
|
|
15
|
+
};
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { defineComponent as V, mergeModels as T, useModel as w, ref as r, onMounted as D, useSlots as L, computed as M, provide as u, watch as x, openBlock as l, createElementBlock as _, normalizeClass as y, createElementVNode as E, toDisplayString as N, createBlock as c, createCommentVNode as b, Fragment as S, renderList as z, withCtx as U, resolveDynamicComponent as j } from "vue";
|
|
2
|
+
import { _ as q } from "./BaseTabPanel.vue_vue_type_script_setup_true_lang.DoZHWHt1.js";
|
|
3
|
+
import { _ as k } from "./BaseTabList.vue_vue_type_script_setup_true_lang.BEX0zH-7.js";
|
|
4
|
+
import { getUID as G } from "../utils.js";
|
|
5
|
+
const H = ["id"], Y = /* @__PURE__ */ V({
|
|
6
|
+
inheritAttrs: !1,
|
|
7
|
+
__name: "BaseTabView",
|
|
8
|
+
props: /* @__PURE__ */ T({
|
|
9
|
+
tabsPosition: { default: "top" },
|
|
10
|
+
tabViewDescription: {},
|
|
11
|
+
tabListClasses: { default: "" }
|
|
12
|
+
}, {
|
|
13
|
+
activeIdx: { default: 0 },
|
|
14
|
+
activeIdxModifiers: {}
|
|
15
|
+
}),
|
|
16
|
+
emits: /* @__PURE__ */ T(["tabClick"], ["update:activeIdx"]),
|
|
17
|
+
setup(C, { emit: J }) {
|
|
18
|
+
const d = w(C, "activeIdx"), I = r(""), v = r(null), g = r(null), s = r("");
|
|
19
|
+
D(() => {
|
|
20
|
+
s.value = G();
|
|
21
|
+
});
|
|
22
|
+
const p = L(), i = (e) => e.props ?? null, m = (e) => e.type.__name === "BaseTab", f = (e, a) => ({
|
|
23
|
+
renderFn: e,
|
|
24
|
+
tabId: h(a),
|
|
25
|
+
"active-tab-panel-idx": i(e)?.["active-tab-panel-idx"] ?? a,
|
|
26
|
+
"header-title": i(e)?.["header-title"] || "",
|
|
27
|
+
class: i(e)?.class || "",
|
|
28
|
+
"tab-panel-classes": i(e)?.["tab-panel-classes"] || ""
|
|
29
|
+
}), n = M(() => p.default ? p.default().reduce((e, a) => (a.children && Array.isArray(a.children) ? a.children.forEach((t) => {
|
|
30
|
+
m(t) && e.push(f(t, e.length));
|
|
31
|
+
}) : m(a) && e.push(f(a, e.length)), e), []) : []);
|
|
32
|
+
u("tabs", n), u("isTabActive", (e) => d.value === e);
|
|
33
|
+
const P = (e) => v.value === e, h = (e) => `base-tab-${e}-${s.value}`, B = (e) => `base-tab-panel-${e}-${s.value}`, $ = (e) => n.value.find((a) => a["active-tab-panel-idx"] === e)?.tabId, A = (e) => {
|
|
34
|
+
I.value = h(e);
|
|
35
|
+
}, F = (e) => {
|
|
36
|
+
const a = n.value.at(e ?? -1);
|
|
37
|
+
v.value = a?.["active-tab-panel-idx"] ?? null;
|
|
38
|
+
};
|
|
39
|
+
return u("handleClick", (e) => {
|
|
40
|
+
A(e), d.value = e;
|
|
41
|
+
}), x(
|
|
42
|
+
d,
|
|
43
|
+
(e) => {
|
|
44
|
+
F(e ?? -1);
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
immediate: !0
|
|
48
|
+
}
|
|
49
|
+
), (e, a) => (l(), _("div", {
|
|
50
|
+
ref_key: "root",
|
|
51
|
+
ref: g,
|
|
52
|
+
class: y(e.$attrs.class)
|
|
53
|
+
}, [
|
|
54
|
+
E("span", {
|
|
55
|
+
id: `tablist-${s.value}`,
|
|
56
|
+
class: "uikit-sr-only"
|
|
57
|
+
}, N(e.tabViewDescription), 9, H),
|
|
58
|
+
e.tabsPosition === "top" ? (l(), c(k, {
|
|
59
|
+
key: 0,
|
|
60
|
+
uid: s.value,
|
|
61
|
+
"tab-list-classes": e.tabListClasses
|
|
62
|
+
}, null, 8, ["uid", "tab-list-classes"])) : b("", !0),
|
|
63
|
+
(l(!0), _(S, null, z(n.value, (t, o) => (l(), c(q, {
|
|
64
|
+
key: o,
|
|
65
|
+
id: B(o),
|
|
66
|
+
"labelled-by": $(o) || "",
|
|
67
|
+
active: P(o),
|
|
68
|
+
class: y(t["tab-panel-classes"])
|
|
69
|
+
}, {
|
|
70
|
+
default: U(() => [
|
|
71
|
+
t.renderFn.children && t.renderFn.children.default ? (l(), c(j(t.renderFn.children.default), { key: 0 })) : b("", !0)
|
|
72
|
+
]),
|
|
73
|
+
_: 2
|
|
74
|
+
}, 1032, ["id", "labelled-by", "active", "class"]))), 128)),
|
|
75
|
+
e.tabsPosition === "bottom" ? (l(), c(k, {
|
|
76
|
+
key: 1,
|
|
77
|
+
uid: s.value,
|
|
78
|
+
"tab-list-classes": e.tabListClasses
|
|
79
|
+
}, null, 8, ["uid", "tab-list-classes"])) : b("", !0)
|
|
80
|
+
], 2));
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
export {
|
|
84
|
+
Y as _
|
|
85
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -5,8 +5,8 @@ import { _ as m } from "./chunks/BaseAccordionItem.vue_vue_type_script_setup_tru
|
|
|
5
5
|
import { _ as l } from "./chunks/SelectItem.vue_vue_type_script_setup_true_lang.Colhxc7n.js";
|
|
6
6
|
import { default as d } from "./CheckboxBtn.js";
|
|
7
7
|
import { _ as n } from "./chunks/CheckboxGroup.vue_vue_type_script_setup_true_lang.Bn9HoCj4.js";
|
|
8
|
-
import { _ } from "./chunks/BaseTab.vue_vue_type_script_setup_true_lang.
|
|
9
|
-
import { _ as S } from "./chunks/BaseTabView.vue_vue_type_script_setup_true_lang.
|
|
8
|
+
import { _ } from "./chunks/BaseTab.vue_vue_type_script_setup_true_lang.Cu67jd8K.js";
|
|
9
|
+
import { _ as S } from "./chunks/BaseTabView.vue_vue_type_script_setup_true_lang.Cs-5T5J3.js";
|
|
10
10
|
import { _ as g } from "./chunks/RadioButton.vue_vue_type_script_setup_true_lang.DR6a7QAi.js";
|
|
11
11
|
import { _ as h } from "./chunks/RadioGroup.vue_vue_type_script_setup_true_lang.BYlMCUWP.js";
|
|
12
12
|
import { _ as I } from "./chunks/AccessibleSelect.vue_vue_type_script_setup_true_lang._TveE6SF.js";
|
package/dist/types.d.ts
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
|
+
import { ClassType } from '@wikicasa-dev/types';
|
|
2
|
+
|
|
1
3
|
export type TwPrefix = "uikit-";
|
|
2
4
|
export type BaseTabProps = Partial<{
|
|
3
5
|
"header-title": string;
|
|
4
6
|
class: string;
|
|
5
7
|
"active-tab-panel-idx": number;
|
|
8
|
+
"tab-panel-classes": ClassType;
|
|
6
9
|
}>;
|
|
7
10
|
export type TabType = {
|
|
8
11
|
renderFn: any;
|
package/package.json
CHANGED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { defineComponent as r, renderSlot as a } from "vue";
|
|
2
|
-
const s = /* @__PURE__ */ r({
|
|
3
|
-
__name: "BaseTab",
|
|
4
|
-
props: {
|
|
5
|
-
activeTabPanelIdx: {},
|
|
6
|
-
headerTitle: {}
|
|
7
|
-
},
|
|
8
|
-
setup(t) {
|
|
9
|
-
return (e, n) => a(e.$slots, "header");
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
export {
|
|
13
|
-
s as _
|
|
14
|
-
};
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
import { defineComponent as F, mergeModels as T, useModel as V, ref as o, onMounted as w, useSlots as D, computed as L, provide as u, watch as M, openBlock as i, createElementBlock as _, normalizeClass as x, createElementVNode as E, toDisplayString as N, createBlock as r, createCommentVNode as b, Fragment as S, renderList as z, withCtx as U, resolveDynamicComponent as j } from "vue";
|
|
2
|
-
import { _ as q } from "./BaseTabPanel.vue_vue_type_script_setup_true_lang.DoZHWHt1.js";
|
|
3
|
-
import { _ as y } from "./BaseTabList.vue_vue_type_script_setup_true_lang.BEX0zH-7.js";
|
|
4
|
-
import { getUID as G } from "../utils.js";
|
|
5
|
-
const H = ["id"], Y = /* @__PURE__ */ F({
|
|
6
|
-
inheritAttrs: !1,
|
|
7
|
-
__name: "BaseTabView",
|
|
8
|
-
props: /* @__PURE__ */ T({
|
|
9
|
-
tabsPosition: { default: "top" },
|
|
10
|
-
tabViewDescription: {},
|
|
11
|
-
tabListClasses: { default: "" }
|
|
12
|
-
}, {
|
|
13
|
-
activeIdx: { default: 0 },
|
|
14
|
-
activeIdxModifiers: {}
|
|
15
|
-
}),
|
|
16
|
-
emits: /* @__PURE__ */ T(["tabClick"], ["update:activeIdx"]),
|
|
17
|
-
setup(k, { emit: J }) {
|
|
18
|
-
const c = V(k, "activeIdx"), C = o(""), v = o(null), I = o(null), a = o("");
|
|
19
|
-
w(() => {
|
|
20
|
-
a.value = G();
|
|
21
|
-
});
|
|
22
|
-
const p = D(), d = (e) => e.props ?? null, m = (e) => e.type.__name === "BaseTab", f = (e, t) => ({
|
|
23
|
-
renderFn: e,
|
|
24
|
-
tabId: h(t),
|
|
25
|
-
"active-tab-panel-idx": d(e)?.["active-tab-panel-idx"] ?? t,
|
|
26
|
-
"header-title": d(e)?.["header-title"] || "",
|
|
27
|
-
class: d(e)?.class || ""
|
|
28
|
-
}), l = L(() => p.default ? p.default().reduce((e, t) => (t.children && Array.isArray(t.children) ? t.children.forEach((s) => {
|
|
29
|
-
m(s) && e.push(f(s, e.length));
|
|
30
|
-
}) : m(t) && e.push(f(t, e.length)), e), []) : []);
|
|
31
|
-
u("tabs", l), u("isTabActive", (e) => c.value === e);
|
|
32
|
-
const g = (e) => v.value === e, h = (e) => `base-tab-${e}-${a.value}`, P = (e) => `base-tab-panel-${e}-${a.value}`, B = (e) => l.value.find((t) => t["active-tab-panel-idx"] === e)?.tabId, $ = (e) => {
|
|
33
|
-
C.value = h(e);
|
|
34
|
-
}, A = (e) => {
|
|
35
|
-
const t = l.value.at(e ?? -1);
|
|
36
|
-
v.value = t?.["active-tab-panel-idx"] ?? null;
|
|
37
|
-
};
|
|
38
|
-
return u("handleClick", (e) => {
|
|
39
|
-
$(e), c.value = e;
|
|
40
|
-
}), M(
|
|
41
|
-
c,
|
|
42
|
-
(e) => {
|
|
43
|
-
A(e ?? -1);
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
immediate: !0
|
|
47
|
-
}
|
|
48
|
-
), (e, t) => (i(), _("div", {
|
|
49
|
-
ref_key: "root",
|
|
50
|
-
ref: I,
|
|
51
|
-
class: x(e.$attrs.class)
|
|
52
|
-
}, [
|
|
53
|
-
E("span", {
|
|
54
|
-
id: `tablist-${a.value}`,
|
|
55
|
-
class: "uikit-sr-only"
|
|
56
|
-
}, N(e.tabViewDescription), 9, H),
|
|
57
|
-
e.tabsPosition === "top" ? (i(), r(y, {
|
|
58
|
-
key: 0,
|
|
59
|
-
uid: a.value,
|
|
60
|
-
"tab-list-classes": e.tabListClasses
|
|
61
|
-
}, null, 8, ["uid", "tab-list-classes"])) : b("", !0),
|
|
62
|
-
(i(!0), _(S, null, z(l.value, (s, n) => (i(), r(q, {
|
|
63
|
-
key: n,
|
|
64
|
-
id: P(n),
|
|
65
|
-
"labelled-by": B(n) || "",
|
|
66
|
-
active: g(n)
|
|
67
|
-
}, {
|
|
68
|
-
default: U(() => [
|
|
69
|
-
s.renderFn.children && s.renderFn.children.default ? (i(), r(j(s.renderFn.children.default), { key: 0 })) : b("", !0)
|
|
70
|
-
]),
|
|
71
|
-
_: 2
|
|
72
|
-
}, 1032, ["id", "labelled-by", "active"]))), 128)),
|
|
73
|
-
e.tabsPosition === "bottom" ? (i(), r(y, {
|
|
74
|
-
key: 1,
|
|
75
|
-
uid: a.value,
|
|
76
|
-
"tab-list-classes": e.tabListClasses
|
|
77
|
-
}, null, 8, ["uid", "tab-list-classes"])) : b("", !0)
|
|
78
|
-
], 2));
|
|
79
|
-
}
|
|
80
|
-
});
|
|
81
|
-
export {
|
|
82
|
-
Y as _
|
|
83
|
-
};
|