@wikicasa-dev/components 1.9.5 → 1.9.6
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as v, mergeModels as T, useModel as y, computed as
|
|
1
|
+
import { defineComponent as v, mergeModels as T, useModel as y, computed as c, openBlock as r, createElementBlock as n, normalizeClass as o, createElementVNode as t, withModifiers as m, renderSlot as f, createCommentVNode as k } from "vue";
|
|
2
2
|
import { _ as C } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
|
|
3
3
|
import './assets/BaseComplexToggle.css';const $ = ["id", "data-cy"], B = ["data-btn-bg-color", "data-cy"], L = ["src", "alt"], M = ["innerHTML"], z = ["data-btn-bg-color", "data-cy"], V = ["src", "alt"], w = ["innerHTML"], H = /* @__PURE__ */ v({
|
|
4
4
|
__name: "BaseComplexToggle",
|
|
@@ -33,7 +33,7 @@ import './assets/BaseComplexToggle.css';const $ = ["id", "data-cy"], B = ["data-
|
|
|
33
33
|
}
|
|
34
34
|
s();
|
|
35
35
|
})();
|
|
36
|
-
const b = (e) => a.value?.label === e.label,
|
|
36
|
+
const b = (e) => a.value?.label === e.label, d = c(() => b(l.labels.leftToggle)), p = c(() => b(l.labels.rightToggle));
|
|
37
37
|
return (e, i) => (r(), n("div", {
|
|
38
38
|
id: e.$attrs.id || "",
|
|
39
39
|
"data-cy": e.$attrs["data-cy"] || "",
|
|
@@ -44,12 +44,12 @@ import './assets/BaseComplexToggle.css';const $ = ["id", "data-cy"], B = ["data-
|
|
|
44
44
|
"data-cy": `bct-left-btn${e.labels.leftToggle.label ? `-${e.labels.leftToggle.label}` : ""}`,
|
|
45
45
|
class: o(["left-button uikit-flex uikit-flex-1 uikit-items-center uikit-justify-center hover:uikit-cursor-pointer", [
|
|
46
46
|
{
|
|
47
|
-
"base-complex-toggle-active":
|
|
47
|
+
"base-complex-toggle-active": d.value
|
|
48
48
|
}
|
|
49
49
|
]]),
|
|
50
|
-
onClick: i[0] || (i[0] =
|
|
50
|
+
onClick: i[0] || (i[0] = m((h) => s(), ["stop"]))
|
|
51
51
|
}, [
|
|
52
|
-
|
|
52
|
+
f(e.$slots, "left_icon", {}, () => [
|
|
53
53
|
e.labels.leftToggle.icon ? (r(), n("img", {
|
|
54
54
|
key: 0,
|
|
55
55
|
class: "base-complex-toggle-icon uikit-relative uikit-z-10 uikit-mr-10px",
|
|
@@ -72,9 +72,9 @@ import './assets/BaseComplexToggle.css';const $ = ["id", "data-cy"], B = ["data-
|
|
|
72
72
|
"base-complex-toggle-active": p.value
|
|
73
73
|
}
|
|
74
74
|
]]),
|
|
75
|
-
onClick: i[1] || (i[1] =
|
|
75
|
+
onClick: i[1] || (i[1] = m((h) => u(), ["stop"]))
|
|
76
76
|
}, [
|
|
77
|
-
|
|
77
|
+
f(e.$slots, "right_icon", {}, () => [
|
|
78
78
|
e.labels.rightToggle.icon ? (r(), n("img", {
|
|
79
79
|
key: 0,
|
|
80
80
|
class: "base-complex-toggle-icon uikit-relative uikit-z-10 uikit-mr-10px",
|
|
@@ -94,12 +94,12 @@ import './assets/BaseComplexToggle.css';const $ = ["id", "data-cy"], B = ["data-
|
|
|
94
94
|
e.type === "full" ? "base-complex-toggle-active-bg" : "base-complex-toggle-active-padded-bg",
|
|
95
95
|
e.btnBgColor,
|
|
96
96
|
e.mode,
|
|
97
|
-
|
|
97
|
+
d.value ? "translateX-left" : "translateX-right"
|
|
98
98
|
]])
|
|
99
99
|
}, null, 2)
|
|
100
100
|
], 10, $));
|
|
101
101
|
}
|
|
102
|
-
}), N = /* @__PURE__ */ C(H, [["__scopeId", "data-v-
|
|
102
|
+
}), N = /* @__PURE__ */ C(H, [["__scopeId", "data-v-e67b01b8"]]);
|
|
103
103
|
export {
|
|
104
104
|
N as default
|
|
105
105
|
};
|
|
@@ -1,22 +1,11 @@
|
|
|
1
|
-
import { Nullable
|
|
1
|
+
import { Nullable } from '@wikicasa-dev/types';
|
|
2
|
+
import { ComplexToggleType, ToggleType, TwPrefix } from '../types';
|
|
2
3
|
|
|
3
|
-
type ToggleType<T = unknown> = {
|
|
4
|
-
id?: string;
|
|
5
|
-
label: string;
|
|
6
|
-
icon?: Icon;
|
|
7
|
-
checked?: boolean;
|
|
8
|
-
payload?: T;
|
|
9
|
-
};
|
|
10
|
-
type ComplexToggleType<T = unknown> = {
|
|
11
|
-
leftToggle: ToggleType<T>;
|
|
12
|
-
rightToggle: ToggleType<T>;
|
|
13
|
-
};
|
|
14
|
-
type TailwindPrefixType = "uikit-";
|
|
15
4
|
type BgPrefix = "bg-w-";
|
|
16
5
|
type BorderPrefix = "border-w-";
|
|
17
6
|
type ColorsType = "black" | "primary" | "secondary" | "dark-primary" | "carbon" | "gray" | "warning" | "danger" | "lavender";
|
|
18
|
-
type BtnBgColorType = `${
|
|
19
|
-
type BorderColorType = `${
|
|
7
|
+
type BtnBgColorType = `${TwPrefix}${BgPrefix}${ColorsType}` | "";
|
|
8
|
+
type BorderColorType = `${TwPrefix}${BorderPrefix}${ColorsType}`;
|
|
20
9
|
declare function __VLS_template(): {
|
|
21
10
|
left_icon?(_: {}): any;
|
|
22
11
|
right_icon?(_: {}): any;
|
|
@@ -36,7 +25,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
36
25
|
default: string;
|
|
37
26
|
};
|
|
38
27
|
labels: {
|
|
39
|
-
type: import('vue').PropType<ComplexToggleType
|
|
28
|
+
type: import('vue').PropType<ComplexToggleType>;
|
|
40
29
|
required: true;
|
|
41
30
|
};
|
|
42
31
|
btnBgColor: {
|
|
@@ -62,7 +51,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
62
51
|
default: string;
|
|
63
52
|
};
|
|
64
53
|
labels: {
|
|
65
|
-
type: import('vue').PropType<ComplexToggleType
|
|
54
|
+
type: import('vue').PropType<ComplexToggleType>;
|
|
66
55
|
required: true;
|
|
67
56
|
};
|
|
68
57
|
btnBgColor: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.base-complex-toggle[data-v-
|
|
1
|
+
.base-complex-toggle[data-v-e67b01b8]{--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-e67b01b8]{--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-e67b01b8]{--base-complex-toggle-width: 342px }}.base-complex-toggle[data-v-e67b01b8]{width:var(--toggle-width);height:var(--toggle-height);border:var(--toggle-border);border-radius:var(--toggle-border-radius)}.base-complex-toggle-active[data-v-e67b01b8]{font-weight:500;cursor:default;color:#fff}.base-complex-toggle-active[data-btn-bg-color=uikit-bg-w-warning][data-v-e67b01b8],.base-complex-toggle-active[data-btn-bg-color=uikit-bg-w-lavender][data-v-e67b01b8],.base-complex-toggle-active[data-btn-bg-color=uikit-bg-w-secondary][data-v-e67b01b8]{color:#222}.base-complex-toggle-active-bg[data-v-e67b01b8]{--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-e67b01b8]{--toggle-bg-width: var(--base-complex-toggle-bg-lg-width) }}.base-complex-toggle-active-bg[data-v-e67b01b8]{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-e67b01b8]{--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-e67b01b8]{--toggle-bg-width: var(--base-complex-toggle-bg-padded-width) }}.base-complex-toggle-active-padded-bg[data-v-e67b01b8]{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-e67b01b8]{transform:var(--left-translateX)}@media screen and (max-width: 576px){.translateX-left.mobile[data-v-e67b01b8]{transform:var(--left-translateX)}}.translateX-right[data-v-e67b01b8]{transform:var(--right-translateX)}@media screen and (max-width: 576px){.translateX-right.mobile[data-v-e67b01b8]{transform:var(--right-translateX)}}.uikit-bg-w-lavender-bordered[data-v-e67b01b8]{--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-e67b01b8]{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-e67b01b8]{--tw-bg-opacity: 1;background-color:rgb(255 102 0 / var(--tw-bg-opacity))}.border-facile[data-v-e67b01b8]{--tw-border-opacity: 1;border-color:rgb(255 102 0 / var(--tw-border-opacity))}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ClassType } from '@wikicasa-dev/types';
|
|
1
|
+
import { ClassType, Icon } from '@wikicasa-dev/types';
|
|
2
2
|
|
|
3
3
|
export type TwPrefix = "uikit-";
|
|
4
4
|
export type BaseTabProps = Partial<{
|
|
@@ -13,3 +13,15 @@ export type TabType = {
|
|
|
13
13
|
} & BaseTabProps;
|
|
14
14
|
export type CardTypes = "mini" | "vertical" | "news" | "";
|
|
15
15
|
export type CardRootTypes = "div" | "article";
|
|
16
|
+
/** Toggle types */
|
|
17
|
+
export type ToggleType<TPayload = unknown, TId = string | number> = {
|
|
18
|
+
id?: TId;
|
|
19
|
+
label: string;
|
|
20
|
+
icon?: Icon;
|
|
21
|
+
checked?: boolean;
|
|
22
|
+
payload?: TPayload;
|
|
23
|
+
};
|
|
24
|
+
export type ComplexToggleType<T = unknown> = {
|
|
25
|
+
leftToggle: ToggleType<T>;
|
|
26
|
+
rightToggle: ToggleType<T>;
|
|
27
|
+
};
|