@wikicasa-dev/components 2.7.0 → 2.8.0-alpha.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.
@@ -1,17 +1,16 @@
1
1
  import e from "../BaseSelect/SelectItem.js";
2
2
  import t from "../BaseDropDown.js";
3
- import { Fragment as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, mergeModels as l, nextTick as u, normalizeClass as d, normalizeStyle as f, onBeforeMount as p, onMounted as m, onUnmounted as h, openBlock as g, renderList as _, renderSlot as v, shallowRef as y, toDisplayString as b, unref as x, useId as S, useModel as C, useTemplateRef as w, vModelText as T, vShow as ee, watch as E, withCtx as D, withDirectives as O, withModifiers as te } from "vue";
4
- import { debounce as ne } from "@wikicasa-dev/utilities";
3
+ import { Fragment as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, mergeModels as l, nextTick as u, normalizeClass as d, normalizeStyle as f, onMounted as p, onUnmounted as m, openBlock as h, renderList as g, renderSlot as _, shallowRef as v, toDisplayString as y, unref as b, useId as x, useModel as S, useTemplateRef as C, vModelText as w, vShow as T, watch as E, withCtx as D, withDirectives as O, withModifiers as ee } from "vue";
5
4
  import '../../assets/ClearableAutocomplete.css';//#region lib/UIKit/Autocomplete/ClearableAutocomplete.vue?vue&type=script&setup=true&lang.ts
6
- var re = [
5
+ var te = [
7
6
  "id",
8
7
  "data-cy",
9
8
  "placeholder"
10
- ], k = ["data-cy"], A = {
9
+ ], ne = ["data-cy"], re = {
11
10
  key: 1,
12
11
  name: "loading-state",
13
12
  class: "uikit-progress-bar-track uikit-absolute uikit-left-0 uikit-top-0 uikit-w-full"
14
- }, j = ["innerHTML"], M = /*@__PURE__*/ c({
13
+ }, ie = ["innerHTML"], k = /*@__PURE__*/ c({
15
14
  __name: "ClearableAutocomplete",
16
15
  props: /*@__PURE__*/ l({
17
16
  dataCy: {},
@@ -54,24 +53,45 @@ var re = [
54
53
  "update:modelValue",
55
54
  "update:inputValue"
56
55
  ]),
57
- setup(c, { expose: l, emit: M }) {
58
- let N = C(c, "open"), P = C(c, "modelValue"), F = C(c, "inputValue"), I = M, L = S(), R = w("inputRef"), z = y(0), B = y(!1), V = y(!1), H = y(-1), U = y(-1), W = y(null), G = y([]), ie = w("dropdownRef"), K = w("hiddenSpan"), q = w("inputWrapperRef"), J = w("clearButtonRef"), Y = () => {
59
- H.value = -1, U.value = -1;
60
- }, ae = () => {
61
- F.value = "", P.value = null, B.value = !1, Y();
62
- }, oe = async (e) => {
56
+ setup(c, { expose: l, emit: k }) {
57
+ let A = S(c, "open"), j = S(c, "modelValue"), M = S(c, "inputValue"), N = k, P = x(), F = C("inputRef"), I = v(0), L = v(!1), R = v(!1), z = v(-1), B = v(-1), V = v([]), H = null, U = 0, ae = C("dropdownRef"), W = C("hiddenSpan"), G = C("inputWrapperRef"), K = C("clearButtonRef"), q = () => {
58
+ z.value = -1, B.value = -1;
59
+ }, J = () => {
60
+ H &&= (clearTimeout(H), null), U += 1, R.value = !1;
61
+ }, oe = (e) => {
62
+ J();
63
+ let t = U;
64
+ R.value = !0, H = setTimeout(async () => {
65
+ H = null, A.value = !0;
66
+ let n = [];
67
+ try {
68
+ n = await c.onInputChangeCb(e);
69
+ } catch {
70
+ n = [];
71
+ }
72
+ t === U && (V.value = n, q(), R.value = !1, A.value = !!V.value.length);
73
+ }, 300);
74
+ }, Y = () => {
75
+ J(), V.value = [], A.value = !1, M.value = "", j.value = null, L.value = !1, q();
76
+ }, se = () => {
77
+ Y();
78
+ }, ce = (e) => {
63
79
  if (!e) {
64
- G.value = [], N.value = !1, Y();
80
+ Y();
81
+ return;
82
+ }
83
+ if (c.disableCb && e === j.value?.label) {
84
+ J();
65
85
  return;
66
86
  }
67
- c.disableCb || (V.value = !0, G.value = await W.value?.(e)?.catch(() => []) || [], Y(), V.value = !1, N.value = !!G.value.length);
68
- }, se = (e) => {
69
- I("input", e), B.value = !1;
87
+ oe(e);
88
+ }, le = (e) => {
89
+ N("input", e), L.value = !1;
70
90
  }, X = (e = -1, t) => {
71
- let n = G.value[e];
72
- !n || n.id === P.value?.id || (U.value = e, c.onOptionSelectedCb?.(n, { trigger: t }), F.value = n.label, N.value = !1, P.value = n, B.value = !0, G.value = []);
91
+ let n = V.value[e];
92
+ !n || n.id === j.value?.id || (B.value = e, c.onOptionSelectedCb?.(n, { trigger: t }), M.value = n.label, A.value = !1, j.value = n, L.value = !0, J(), V.value = []);
73
93
  }, Z = (e) => {
74
- if (!c.enableKeyboardController || !N.value || ![
94
+ if (!c.enableKeyboardController || !A.value || ![
75
95
  "ArrowUp",
76
96
  "ArrowDown",
77
97
  "Enter",
@@ -82,11 +102,11 @@ var re = [
82
102
  "End"
83
103
  ].includes(e.key)) return;
84
104
  if (e.key === "Escape") {
85
- H.value = U.value, N.value = !1, e.stopPropagation();
105
+ z.value = B.value, A.value = !1, e.stopPropagation();
86
106
  return;
87
107
  }
88
- if (!G.value.length) return;
89
- let t = G.value.length - 1;
108
+ if (!V.value.length) return;
109
+ let t = V.value.length - 1;
90
110
  if ([
91
111
  "ArrowUp",
92
112
  "ArrowDown",
@@ -94,48 +114,46 @@ var re = [
94
114
  "Home",
95
115
  "PageDown",
96
116
  "End"
97
- ].includes(e.key) && e.preventDefault(), e.key === "ArrowUp") H.value = H.value <= 0 ? t : H.value - 1;
98
- else if (e.key === "ArrowDown") H.value = H.value >= t ? 0 : H.value + 1;
117
+ ].includes(e.key) && e.preventDefault(), e.key === "ArrowUp") z.value = z.value <= 0 ? t : z.value - 1;
118
+ else if (e.key === "ArrowDown") z.value = z.value >= t ? 0 : z.value + 1;
99
119
  else if (e.key === "Enter") {
100
- if (H.value === -1) return;
101
- e.preventDefault(), X(H.value, "enter");
102
- } else e.key === "PageUp" || e.key === "Home" ? H.value = 0 : (e.key === "PageDown" || e.key === "End") && (H.value = t);
120
+ if (z.value === -1) return;
121
+ e.preventDefault(), X(z.value, "enter");
122
+ } else e.key === "PageUp" || e.key === "Home" ? z.value = 0 : (e.key === "PageDown" || e.key === "End") && (z.value = t);
103
123
  e.stopPropagation();
104
- }, ce = (e) => {
105
- I("keydown", e), Z(e);
106
- }, le = () => {
107
- R.value?.select();
108
- }, ue = () => {
109
- R.value?.focus();
124
+ }, ue = (e) => {
125
+ N("keydown", e), Z(e);
126
+ }, de = () => {
127
+ F.value?.select();
128
+ }, fe = () => {
129
+ F.value?.focus();
110
130
  }, Q = null, $ = () => {
111
- let e = K.value, t = q.value, n = J.value;
131
+ let e = W.value, t = G.value, n = K.value;
112
132
  if (!e || !t) return;
113
133
  let r = e.offsetWidth, i = t.offsetWidth, a = c.clearButton?.offset || 0, o = c.clearButton?.width || n?.offsetWidth || 0, s = i - a - o, l = Math.min(r, s);
114
- l !== z.value && (z.value = l);
134
+ l !== I.value && (I.value = l);
115
135
  };
116
136
  return p(() => {
117
- W.value = ne({ delay: 300 }, async (e = "") => (N.value = !0, await c.onInputChangeCb(e)));
118
- }), m(() => {
119
- q.value && (Q = new ResizeObserver(() => {
137
+ G.value && (Q = new ResizeObserver(() => {
120
138
  $();
121
- }), Q.observe(q.value));
122
- }), h(() => {
123
- Q?.disconnect();
139
+ }), Q.observe(G.value));
140
+ }), m(() => {
141
+ Q?.disconnect(), J();
124
142
  }), E([
125
- F,
126
- K,
127
- J
143
+ M,
144
+ W,
145
+ K
128
146
  ], () => {
129
147
  u($);
130
- }), E(P, (e) => {
131
- if (e?.label === F.value) return;
148
+ }), E(j, (e) => {
149
+ if (e?.label === M.value) return;
132
150
  let t = e?.label || "";
133
- F.value = t, t && (B.value = !0);
151
+ M.value = t, t && (L.value = !0);
134
152
  }, { immediate: !0 }), l({
135
- getRootElement: () => ie.value?.getRootElement(),
136
- select: le,
137
- focus: ue
138
- }), (l, u) => (g(), r(t, {
153
+ getRootElement: () => ae.value?.getRootElement(),
154
+ select: de,
155
+ focus: fe
156
+ }), (l, u) => (h(), r(t, {
139
157
  ref: "dropdownRef",
140
158
  class: "uikit-clearable-autocomplete",
141
159
  "data-cy": c.dataCy,
@@ -143,22 +161,22 @@ var re = [
143
161
  "dropdown-classes": ["uikit-z-30", c.dropdownClasses],
144
162
  "keep-state": c.keepState === "closed" ? "closed" : "opened",
145
163
  "activate-keyboard-controller": !1,
146
- open: N.value,
147
- "onUpdate:open": u[3] ||= (e) => N.value = e
164
+ open: A.value,
165
+ "onUpdate:open": u[3] ||= (e) => A.value = e
148
166
  }, {
149
167
  btn_slot: D(() => [o("div", {
150
168
  class: d(["uikit-text-16", c.triggerWrapperClasses]),
151
- onClick: u[2] ||= (e) => I("click", e)
169
+ onClick: u[2] ||= (e) => N("click", e)
152
170
  }, [
153
- v(l.$slots, "left-icon"),
171
+ _(l.$slots, "left-icon"),
154
172
  o("div", {
155
173
  ref: "inputWrapperRef",
156
174
  class: d(["uikit-relative", c.inputWrapperClasses])
157
175
  }, [
158
176
  O(o("input", {
159
177
  ref: "inputRef",
160
- "onUpdate:modelValue": [u[0] ||= (e) => F.value = e, oe],
161
- id: x(L),
178
+ "onUpdate:modelValue": [u[0] ||= (e) => M.value = e, ce],
179
+ id: b(P),
162
180
  "data-cy": c.dataCy ? `ac_input_${c.dataCy}` : "",
163
181
  type: "text",
164
182
  autocomplete: "off",
@@ -168,21 +186,21 @@ var re = [
168
186
  fontSize: "inherit"
169
187
  },
170
188
  placeholder: c.placeholder,
171
- onKeydown: ce,
172
- onInput: se,
189
+ onKeydown: ue,
190
+ onInput: le,
173
191
  onClick: u[1] ||= (e) => {
174
- I("inputClick", e), R.value?.select();
192
+ N("inputClick", e), F.value?.select();
175
193
  }
176
- }, null, 42, re), [[T, F.value]]),
194
+ }, null, 42, te), [[w, M.value]]),
177
195
  o("span", {
178
196
  ref_key: "hiddenSpan",
179
- ref: K,
197
+ ref: W,
180
198
  class: d(["uikit-invisible uikit-absolute uikit-left-0 uikit-top-0 uikit-max-w-full uikit-overflow-hidden uikit-whitespace-pre", c.hiddenTextClasses]),
181
199
  style: {
182
200
  font: "inherit",
183
201
  fontSize: "inherit"
184
202
  }
185
- }, b(F.value), 3),
203
+ }, y(M.value), 3),
186
204
  O(o("button", {
187
205
  ref: "clearButtonRef",
188
206
  type: "button",
@@ -190,30 +208,30 @@ var re = [
190
208
  "data-cy": c.clearButton?.dataCy || "clear-btn",
191
209
  "aria-label": "Clear input",
192
210
  style: f({
193
- left: `${z.value + (c.clearButton?.offset || 0)}px`,
211
+ left: `${I.value + (c.clearButton?.offset || 0)}px`,
194
212
  width: c.clearButton?.width ? `${c.clearButton.width}px` : "auto",
195
213
  height: c.clearButton?.height ? `${c.clearButton.height}px` : "auto"
196
214
  }),
197
- onClick: te(ae, ["stop"])
198
- }, [v(l.$slots, "clear-icon", {}, () => [u[4] ||= s("X", -1)])], 14, k), [[ee, B.value && z.value]])
215
+ onClick: ee(se, ["stop"])
216
+ }, [_(l.$slots, "clear-icon", {}, () => [u[4] ||= s("X", -1)])], 14, ne), [[T, L.value && I.value]])
199
217
  ], 2),
200
- v(l.$slots, "right-icon")
218
+ _(l.$slots, "right-icon")
201
219
  ], 2)]),
202
220
  default: D(() => [
203
- V.value && !G.value.length ? v(l.$slots, "loading-state", { key: 0 }) : i("", !0),
204
- V.value && G.value.length ? (g(), a("div", A, [...u[5] ||= [o("div", { class: "uikit-progress-bar-fill" }, null, -1)]])) : i("", !0),
205
- G.value.length ? (g(!0), a(n, { key: 2 }, _(G.value, (t, n) => (g(), r(e, {
221
+ R.value && !V.value.length ? _(l.$slots, "loading-state", { key: 0 }) : i("", !0),
222
+ R.value && V.value.length ? (h(), a("div", re, [...u[5] ||= [o("div", { class: "uikit-progress-bar-fill" }, null, -1)]])) : i("", !0),
223
+ V.value.length ? (h(!0), a(n, { key: 2 }, g(V.value, (t, n) => (h(), r(e, {
206
224
  key: n,
207
- active: H.value === n,
225
+ active: z.value === n,
208
226
  class: "uikit-m-1 uikit-rounded-[5px] uikit-px-5 uikit-py-10px hover:uikit-cursor-pointer",
209
227
  onClick: (e) => X(n, "click"),
210
228
  onKeydown: Z,
211
- onMouseover: (e) => H.value = n
229
+ onMouseover: (e) => z.value = n
212
230
  }, {
213
- default: D(() => [v(l.$slots, "option-content", {
231
+ default: D(() => [_(l.$slots, "option-content", {
214
232
  option: t,
215
233
  idx: n
216
- }, () => [o("span", { innerHTML: t.label }, null, 8, j)])]),
234
+ }, () => [o("span", { innerHTML: t.label }, null, 8, ie)])]),
217
235
  _: 2
218
236
  }, 1032, [
219
237
  "active",
@@ -231,4 +249,4 @@ var re = [
231
249
  }
232
250
  });
233
251
  //#endregion
234
- export { M as default };
252
+ export { k as default };
@@ -30,9 +30,9 @@ declare const _default: typeof __VLS_export;
30
30
  export default _default;
31
31
  declare const __VLS_export: <TID extends string | number, TPayload>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
32
32
  props: import('vue').PublicProps & __VLS_PrettifyLocal<(BaseComplexToggleProps<TID, TPayload> & {
33
- modelValue?: Nullable<ToggleType> | undefined;
33
+ modelValue?: Nullable<ToggleType<TID, TPayload>> | undefined;
34
34
  }) & {
35
- "onUpdate:modelValue"?: ((value: Nullable<ToggleType<string | number, unknown>> | undefined) => any) | undefined;
35
+ "onUpdate:modelValue"?: ((value: Nullable<ToggleType<TID, TPayload>> | undefined) => any) | undefined;
36
36
  }> & (typeof globalThis extends {
37
37
  __VLS_PROPS_FALLBACK: infer P;
38
38
  } ? P : {});
@@ -43,7 +43,7 @@ declare const __VLS_export: <TID extends string | number, TPayload>(__VLS_props:
43
43
  } & {
44
44
  right_icon?: (props: {}) => any;
45
45
  };
46
- emit: (event: "update:modelValue", value: Nullable<ToggleType<string | number, unknown>> | undefined) => void;
46
+ emit: (event: "update:modelValue", value: Nullable<ToggleType<TID, TPayload>> | undefined) => void;
47
47
  }>) => import('vue').VNode & {
48
48
  __ctx?: Awaited<typeof __VLS_setup>;
49
49
  };
@@ -1,6 +1,6 @@
1
1
  import e from "../_virtual/_plugin-vue_export-helper.js";
2
2
  import t from "./BaseComplexToggle.vue.js";
3
3
  //#region lib/UIKit/BaseComplexToggle.vue
4
- var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-74915e0a"]]);
4
+ var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-f36ebc14"]]);
5
5
  //#endregion
6
6
  export { n as default };
@@ -27,7 +27,7 @@ export type CheckboxGroupProps<TID = string | number, TLabel = string | number,
27
27
  * Otherwise, if autoCheckResetEmpty is false, the reset button would never be unchecked when the user clicks on it
28
28
  */
29
29
  manualToggleResetButton?: boolean;
30
- getKey?: GetterIdType;
30
+ getKey?: GetterIdType<CheckboxButtonType<TID, TLabel, TPayload> | string | number>;
31
31
  groupId?: string;
32
32
  dataCy?: string;
33
33
  };
@@ -1,41 +1,45 @@
1
- import { CheckboxRootProps, AcceptableValue } from 'reka-ui';
2
- export interface CheckboxButtonGroupProps {
1
+ export type CheckboxValue = string | number | boolean | null | undefined;
2
+ export interface CheckboxButtonGroupProps<T extends CheckboxValue = CheckboxValue> {
3
3
  dataCy?: string;
4
- items?: CheckboxButtonItem[];
4
+ items?: CheckboxButtonItem<T>[];
5
5
  /**
6
6
  * Value of the reset button
7
7
  */
8
- resetValue?: AcceptableValue;
8
+ resetValue?: T;
9
9
  }
10
- export interface CheckboxButtonItem {
10
+ export interface CheckboxButtonItem<T extends CheckboxValue = CheckboxValue> {
11
11
  dataCy?: string;
12
- value: CheckboxRootProps["value"];
12
+ value: T;
13
13
  required?: boolean;
14
14
  label: string;
15
15
  }
16
16
  declare const _default: typeof __VLS_export;
17
17
  export default _default;
18
- declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<CheckboxButtonGroupProps & {
19
- modelValue?: NonNullable<AcceptableValue>[];
20
- reset?: boolean;
21
- }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
22
- "update:modelValue": (value: NonNullable<AcceptableValue>[]) => any;
23
- "update:reset": (value: boolean) => any;
24
- }, string, import('vue').PublicProps, Readonly<CheckboxButtonGroupProps & {
25
- modelValue?: NonNullable<AcceptableValue>[];
26
- reset?: boolean;
27
- }> & Readonly<{
28
- "onUpdate:modelValue"?: ((value: NonNullable<AcceptableValue>[]) => any) | undefined;
29
- "onUpdate:reset"?: ((value: boolean) => any) | undefined;
30
- }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
31
- default?: (props: {
32
- isChecked: (value: CheckboxRootProps["value"]) => boolean;
33
- handleCheck: (value: CheckboxRootProps["value"], checked: boolean) => void;
34
- handleResetCheck: (checked: boolean) => void;
35
- }) => any;
36
- }>;
37
- type __VLS_WithSlots<T, S> = T & {
38
- new (): {
39
- $slots: S;
18
+ declare const __VLS_export: <T extends CheckboxValue = CheckboxValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
19
+ props: import('vue').PublicProps & __VLS_PrettifyLocal<(CheckboxButtonGroupProps<T> & {
20
+ modelValue?: NonNullable<T>[];
21
+ reset?: boolean;
22
+ }) & {
23
+ "onUpdate:modelValue"?: ((value: NonNullable<T>[]) => any) | undefined;
24
+ "onUpdate:reset"?: ((value: boolean) => any) | undefined;
25
+ }> & (typeof globalThis extends {
26
+ __VLS_PROPS_FALLBACK: infer P;
27
+ } ? P : {});
28
+ expose: (exposed: {}) => void;
29
+ attrs: any;
30
+ slots: {
31
+ default?: (props: {
32
+ isChecked: (value: T) => boolean;
33
+ handleCheck: (value: T, checked: boolean) => void;
34
+ handleResetCheck: (checked: boolean) => void;
35
+ }) => any;
40
36
  };
37
+ emit: ((event: "update:modelValue", value: NonNullable<T>[]) => void) & ((event: "update:reset", value: boolean) => void);
38
+ }>) => import('vue').VNode & {
39
+ __ctx?: Awaited<typeof __VLS_setup>;
41
40
  };
41
+ type __VLS_PrettifyLocal<T> = (T extends any ? {
42
+ [K in keyof T]: T[K];
43
+ } : {
44
+ [K in keyof T as K]: T[K];
45
+ }) & {};
@@ -25,16 +25,10 @@ var h = ["data-cy"], g = /*@__PURE__*/ a({
25
25
  o.value = n;
26
26
  return;
27
27
  }
28
- n = n.filter((e) => e !== a.resetValue);
29
- let r = Array.from(_.keys()).filter((e) => !n.includes(e));
30
- console.log("DEBUG:handleCheck => update", {
31
- registeredItems: _,
32
- checkedList: n,
33
- uncheckedList: r
34
- }), r.length === _.size && (n = [a.resetValue], _.get(a.resetValue)?.focus?.()), n.length === _.size - 1 && (n = [a.resetValue], _.get(a.resetValue)?.focus?.()), o.value = n;
28
+ n = n.filter((e) => e !== a.resetValue), Array.from(_.keys()).filter((e) => !n.includes(e)).length === _.size && (n = [a.resetValue], _.get(a.resetValue)?.focus?.()), n.length === _.size - 1 && (n = [a.resetValue], _.get(a.resetValue)?.focus?.()), o.value = n;
35
29
  }, b = (e) => {
36
30
  if (a.resetValue) {
37
- if (console.log("DEBUG:handleResetCheck", { resetValue: a.resetValue }), e) {
31
+ if (e) {
38
32
  o.value = [a.resetValue];
39
33
  return;
40
34
  }
@@ -1 +1 @@
1
- .base-complex-toggle[data-v-74915e0a]{--base-complex-toggle-height:42px;--base-complex-toggle-width:230px;--base-complex-toggle-radius:23px;--base-complex-toggle-border-width:1px;--base-complex-toggle-border-color:#e9effe;--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-border-color) solid;--toggle-border-radius:var(--base-complex-toggle-radius)}.base-complex-toggle.lg[data-v-74915e0a]{--base-complex-toggle-height:56px;--base-complex-toggle-width:342px;--base-complex-toggle-radius:28px}@media screen and (width<=576px){.base-complex-toggle.mobile[data-v-74915e0a]{--base-complex-toggle-width:342px}}.base-complex-toggle[data-v-74915e0a]{width:var(--toggle-width);height:var(--toggle-height);border:var(--toggle-border);border-radius:var(--toggle-border-radius)}.base-complex-toggle-active[data-v-74915e0a]{--base-complex-toggle-active-color:#fff;cursor:default;color:var(--base-complex-toggle-active-color);font-weight:500}.base-complex-toggle-active[data-btn-bg-color=uikit-bg-w-warning][data-v-74915e0a],.base-complex-toggle-active[data-btn-bg-color=uikit-bg-w-lavender][data-v-74915e0a],.base-complex-toggle-active[data-btn-bg-color=uikit-bg-w-secondary][data-v-74915e0a]{--base-complex-toggle-active-color:#000}.base-complex-toggle-active-bg[data-v-74915e0a]{--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 (width<=576px){.base-complex-toggle-active-bg .mobile[data-v-74915e0a]{--toggle-bg-width:var(--base-complex-toggle-bg-lg-width)}}.base-complex-toggle-active-bg[data-v-74915e0a]{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-74915e0a]{--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 (width<=576px){.base-complex-toggle-active-padded-bg.mobile[data-v-74915e0a]{--toggle-bg-width:var(--base-complex-toggle-bg-padded-width)}}.base-complex-toggle-active-padded-bg[data-v-74915e0a]{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-74915e0a]{transform:var(--left-translateX)}@media screen and (width<=576px){.translateX-left.mobile[data-v-74915e0a]{transform:var(--left-translateX)}}.translateX-right[data-v-74915e0a]{transform:var(--right-translateX)}@media screen and (width<=576px){.translateX-right.mobile[data-v-74915e0a]{transform:var(--right-translateX)}}
1
+ .base-complex-toggle[data-v-f36ebc14]{--base-complex-toggle-height:42px;--base-complex-toggle-width:230px;--base-complex-toggle-radius:23px;--base-complex-toggle-border-width:1px;--base-complex-toggle-border-color:#e9effe;--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-border-color) solid;--toggle-border-radius:var(--base-complex-toggle-radius)}.base-complex-toggle.lg[data-v-f36ebc14]{--base-complex-toggle-height:56px;--base-complex-toggle-width:342px;--base-complex-toggle-radius:28px}@media screen and (width<=576px){.base-complex-toggle.mobile[data-v-f36ebc14]{--base-complex-toggle-width:342px}}.base-complex-toggle[data-v-f36ebc14]{width:var(--toggle-width);height:var(--toggle-height);border:var(--toggle-border);border-radius:var(--toggle-border-radius)}.base-complex-toggle-active[data-v-f36ebc14]{--base-complex-toggle-active-color:#fff;cursor:default;color:var(--base-complex-toggle-active-color);font-weight:500}.base-complex-toggle-active[data-btn-bg-color=uikit-bg-w-warning][data-v-f36ebc14],.base-complex-toggle-active[data-btn-bg-color=uikit-bg-w-lavender][data-v-f36ebc14],.base-complex-toggle-active[data-btn-bg-color=uikit-bg-w-secondary][data-v-f36ebc14]{--base-complex-toggle-active-color:#000}.base-complex-toggle-active-bg[data-v-f36ebc14]{--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 (width<=576px){.base-complex-toggle-active-bg .mobile[data-v-f36ebc14]{--toggle-bg-width:var(--base-complex-toggle-bg-lg-width)}}.base-complex-toggle-active-bg[data-v-f36ebc14]{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-f36ebc14]{--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 (width<=576px){.base-complex-toggle-active-padded-bg.mobile[data-v-f36ebc14]{--toggle-bg-width:var(--base-complex-toggle-bg-padded-width)}}.base-complex-toggle-active-padded-bg[data-v-f36ebc14]{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-f36ebc14]{transform:var(--left-translateX)}@media screen and (width<=576px){.translateX-left.mobile[data-v-f36ebc14]{transform:var(--left-translateX)}}.translateX-right[data-v-f36ebc14]{transform:var(--right-translateX)}@media screen and (width<=576px){.translateX-right.mobile[data-v-f36ebc14]{transform:var(--right-translateX)}}
@@ -1,3 +1,3 @@
1
- import '../../../assets/swiper-controller.css';/* empty css */
1
+ import '../../../assets/swiper-thumbs.css';/* empty css */
2
2
  import { Autoplay as e } from "swiper/modules";
3
3
  export { e as default };
@@ -1,3 +1,3 @@
1
- import '../../../assets/swiper-controller.css';/* empty css */
1
+ import '../../../assets/swiper-thumbs.css';/* empty css */
2
2
  import { Controller as e } from "swiper/modules";
3
3
  export { e as default };
@@ -1,3 +1,3 @@
1
- import '../../../assets/swiper-controller.css';/* empty css */
1
+ import '../../../assets/swiper-thumbs.css';/* empty css */
2
2
  import { Keyboard as e } from "swiper/modules";
3
3
  export { e as default };
@@ -1,3 +1,3 @@
1
- import '../../../assets/swiper-controller.css';/* empty css */
1
+ import '../../../assets/swiper-thumbs.css';/* empty css */
2
2
  import { Thumbs as e } from "swiper/modules";
3
3
  export { e as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wikicasa-dev/components",
3
- "version": "2.7.0",
3
+ "version": "2.8.0-alpha.1",
4
4
  "description": "Wikicasa frontend components",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -82,13 +82,13 @@
82
82
  "vitest-browser-vue": "^2.1.0",
83
83
  "vue-router": "^5.1.0",
84
84
  "vue-tsc": "^3.3.3",
85
- "@wikicasa-dev/tailwind-plugins": "0.0.7",
85
+ "@wikicasa-dev/eslint-config": "0.0.0",
86
86
  "@wikicasa-dev/svg-icons": "1.3.7",
87
87
  "@wikicasa-dev/types": "2.8.0",
88
- "@wikicasa-dev/eslint-config": "0.0.0",
89
88
  "@wikicasa-dev/tsconfig": "0.0.0",
90
- "@wikicasa-dev/vue-composables": "0.2.0",
91
- "@wikicasa-dev/utilities": "1.2.11"
89
+ "@wikicasa-dev/utilities": "1.2.11",
90
+ "@wikicasa-dev/tailwind-plugins": "0.0.7",
91
+ "@wikicasa-dev/vue-composables": "0.2.0"
92
92
  },
93
93
  "readme": "ERROR: No README data found!",
94
94
  "scripts": {