@wikicasa-dev/components 2.2.9-alpha.0 → 2.2.9-alpha.10

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,5 +1,5 @@
1
1
  import { Autoplay as t } from "swiper/modules";
2
- import '../assets/swiper-thumbs.css';/* empty css */
2
+ import '../assets/swiper-autoplay.css';/* empty css */
3
3
  export {
4
4
  t as Autoplay
5
5
  };
@@ -1,5 +1,5 @@
1
1
  import { Controller as e } from "swiper/modules";
2
- import '../assets/swiper-thumbs.css';/* empty css */
2
+ import '../assets/swiper-autoplay.css';/* empty css */
3
3
  export {
4
4
  e as Controller
5
5
  };
@@ -1,5 +1,5 @@
1
1
  import { Keyboard as m } from "swiper/modules";
2
- import '../assets/swiper-thumbs.css';/* empty css */
2
+ import '../assets/swiper-autoplay.css';/* empty css */
3
3
  export {
4
4
  m as Keyboard
5
5
  };
@@ -1,5 +1,5 @@
1
1
  import { Thumbs as p } from "swiper/modules";
2
- import '../assets/swiper-thumbs.css';/* empty css */
2
+ import '../assets/swiper-autoplay.css';/* empty css */
3
3
  export {
4
4
  p as Thumbs
5
5
  };
@@ -24,15 +24,17 @@ declare const _default: <TID extends string | number | undefined, TPayload>(__VL
24
24
  readonly onClick?: ((args_0: MouseEvent) => any) | undefined;
25
25
  readonly onKeydown?: ((args_0: KeyboardEvent) => any) | undefined;
26
26
  readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
27
+ readonly "onUpdate:inputValue"?: ((value: string) => any) | undefined;
27
28
  readonly onInputClick?: ((args_0: MouseEvent) => any) | undefined;
28
- readonly "onUpdate:inputValue"?: ((args_0: string) => any) | undefined;
29
- } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue" | "onClick" | "onKeydown" | "onUpdate:open" | "onInputClick" | "onUpdate:inputValue"> & ({
29
+ } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue" | "onClick" | "onKeydown" | "onUpdate:open" | "onUpdate:inputValue" | "onInputClick"> & ({
30
30
  open?: boolean;
31
31
  modelValue?: Nullable<AccessibleSelectOptions<TPayload, TID>>;
32
+ inputValue?: string;
32
33
  } & ClearableAutocompleteProps<TID, TPayload>) & Partial<{}>> & import('vue').PublicProps;
33
34
  expose(exposed: import('vue').ShallowUnwrapRef<{
34
- select: () => void;
35
35
  getRootElement: () => HTMLDivElement | null | undefined;
36
+ select: () => void;
37
+ focus: () => void;
36
38
  }>): void;
37
39
  attrs: any;
38
40
  slots: {
@@ -44,7 +46,7 @@ declare const _default: <TID extends string | number | undefined, TPayload>(__VL
44
46
  idx: number;
45
47
  }): any;
46
48
  };
47
- emit: (((evt: "click", args_0: MouseEvent) => void) & ((evt: "keydown", args_0: KeyboardEvent) => void) & ((evt: "inputClick", args_0: MouseEvent) => void) & ((evt: "update:inputValue", args_0: string) => void)) & (((evt: "update:modelValue", value: Nullable<AccessibleSelectOptions<TPayload, TID>>) => void) & ((evt: "update:open", value: boolean) => void));
49
+ emit: (((evt: "click", args_0: MouseEvent) => void) & ((evt: "keydown", args_0: KeyboardEvent) => void) & ((evt: "inputClick", args_0: MouseEvent) => void)) & (((evt: "update:modelValue", value: Nullable<AccessibleSelectOptions<TPayload, TID>>) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:inputValue", value: string) => void));
48
50
  }>) => import('vue').VNode & {
49
51
  __ctx?: Awaited<typeof __VLS_setup>;
50
52
  };
@@ -1,11 +1,11 @@
1
- import { defineComponent as K, mergeModels as B, useModel as M, useTemplateRef as m, shallowRef as p, onBeforeMount as L, watch as b, nextTick as W, createBlock as V, openBlock as C, withCtx as y, createElementBlock as I, Fragment as N, renderList as A, renderSlot as c, createElementVNode as u, normalizeClass as f, withDirectives as F, vModelText as H, toDisplayString as G, withModifiers as P, normalizeStyle as X, createTextVNode as j, vShow as q } from "vue";
2
- import J from "../BaseDropDown.vue.js";
1
+ import { defineComponent as N, mergeModels as $, useModel as y, shallowRef as d, useId as A, useTemplateRef as b, onBeforeMount as H, watch as w, nextTick as G, createBlock as F, openBlock as h, withCtx as g, createElementBlock as P, Fragment as X, renderList as j, renderSlot as p, createElementVNode as u, normalizeClass as f, withDirectives as E, unref as q, vModelText as J, toDisplayString as Q, withModifiers as Y, normalizeStyle as Z, createTextVNode as _, vShow as ee } from "vue";
2
+ import te from "../BaseDropDown.vue.js";
3
3
  import '../../../../../assets/BaseDropDown.css';/* empty css */
4
- import Q from "../BaseSelect/SelectItem.vue.js";
5
- import { debounce as Y } from "@wikicasa-dev/utilities";
6
- const Z = ["readonly", "placeholder"], _ = ["innerHTML"], ie = /* @__PURE__ */ K({
4
+ import le from "../BaseSelect/SelectItem.vue.js";
5
+ import { debounce as ne } from "@wikicasa-dev/utilities";
6
+ const oe = ["id", "data-cy", "placeholder"], ae = ["innerHTML"], pe = /* @__PURE__ */ N({
7
7
  __name: "ClearableAutocomplete",
8
- props: /* @__PURE__ */ B({
8
+ props: /* @__PURE__ */ $({
9
9
  dataCy: {},
10
10
  placeholder: {},
11
11
  enableKeyboardController: { type: Boolean, default: !0 },
@@ -21,137 +21,161 @@ const Z = ["readonly", "placeholder"], _ = ["innerHTML"], ie = /* @__PURE__ */ K
21
21
  open: { type: Boolean, default: !1 },
22
22
  openModifiers: {},
23
23
  modelValue: { default: null },
24
- modelModifiers: {}
24
+ modelModifiers: {},
25
+ inputValue: {
26
+ default: ""
27
+ },
28
+ inputValueModifiers: {}
25
29
  }),
26
- emits: /* @__PURE__ */ B(["click", "inputClick", "update:inputValue", "keydown"], ["update:open", "update:modelValue"]),
27
- setup(n, { expose: $, emit: E }) {
28
- const r = M(n, "open"), a = M(n, "modelValue"), s = E, O = m("inputRef"), o = p(a.value?.label || ""), v = p(0), k = p(!1), w = p(null), i = p([]), g = m("dropdownRef"), h = m("hiddenSpan"), R = () => {
29
- o.value = "", a.value = null, s("update:inputValue", "");
30
- }, U = async (t) => {
31
- if (s("update:inputValue", t), !t) {
32
- i.value = [], r.value = !1;
30
+ emits: /* @__PURE__ */ $(["click", "inputClick", "keydown"], ["update:open", "update:modelValue", "update:inputValue"]),
31
+ setup(l, { expose: O, emit: R }) {
32
+ const s = y(l, "open"), a = y(l, "modelValue"), o = y(l, "inputValue");
33
+ o.value = o.value ?? a.value?.label ?? "";
34
+ const v = R, k = d(!1), U = A(), m = b("inputRef"), c = d(0), C = d(!1), S = d(null), i = d([]), T = b("dropdownRef"), B = b("hiddenSpan"), x = () => {
35
+ o.value = "", a.value = null;
36
+ }, I = async (t) => {
37
+ if (!t) {
38
+ i.value = [], s.value = !1;
33
39
  return;
34
40
  }
35
- i.value = await w.value?.(t) || [], k.value = !0, r.value = !!i.value.length;
36
- }, S = (t = -1) => {
41
+ i.value = await S.value?.(t) || [], C.value = !0, s.value = !!i.value.length;
42
+ }, M = (t = -1) => {
37
43
  const e = i.value[t];
38
- !e || e.id === a.value?.id || (n.onOptionSelectedCb?.(e), o.value = e.label, r.value = !1, a.value = e, i.value = []);
39
- }, x = () => {
40
- O.value?.select();
44
+ !e || e.id === a.value?.id || (l.onOptionSelectedCb?.(e), o.value = e.label, s.value = !1, a.value = e, i.value = []);
45
+ }, W = () => {
46
+ m.value?.select();
47
+ }, z = () => {
48
+ m.value?.focus();
41
49
  };
42
- return L(() => {
43
- w.value = Y({ delay: 300 }, n.onInputChangeCb);
44
- }), b(
45
- [o, () => h.value],
46
- ([t, e]) => {
47
- e && W(() => {
48
- if (!e) return;
49
- const l = e.offsetWidth;
50
- l !== v.value && (console.log("DEBUG:updating icon positioning", {
51
- curInputValue: t
52
- }), v.value = l);
50
+ H(() => {
51
+ S.value = ne({ delay: 300 }, l.onInputChangeCb);
52
+ }), w(
53
+ [o, () => B.value],
54
+ ([, t]) => {
55
+ t && G(() => {
56
+ if (!t) return;
57
+ const e = t.offsetWidth;
58
+ e !== c.value && (c.value = e);
53
59
  });
54
60
  },
55
61
  { immediate: !0 }
56
- ), b(
57
- () => g.value?.selectedIdx,
62
+ ), w(
63
+ () => T.value?.selectedIdx,
58
64
  (t) => {
59
65
  const e = t ?? -1;
60
- e !== -1 && S(e);
66
+ e !== -1 && M(e);
61
67
  }
62
- ), b(
68
+ ), w(
63
69
  a,
64
70
  (t, e) => {
65
- t === e || t?.label === o.value || (o.value = t?.label || "");
71
+ if (!(t === e || t?.label === o.value)) {
72
+ if (k.value) {
73
+ k.value = !1;
74
+ return;
75
+ }
76
+ o.value = t?.label || "";
77
+ }
66
78
  },
67
79
  { immediate: !0 }
68
- ), $({
69
- select: x,
70
- getRootElement: () => g.value?.getRootElement()
71
- }), (t, e) => (C(), V(J, {
80
+ ), O({
81
+ getRootElement: () => T.value?.getRootElement(),
82
+ select: W,
83
+ focus: z
84
+ });
85
+ const D = (t) => {
86
+ console.log("DEBUG:", t);
87
+ };
88
+ return (t, e) => (h(), F(te, {
72
89
  ref: "dropdownRef",
73
90
  class: "uikit-clearable-autocomplete",
74
- "data-cy": n.dataCy,
91
+ "data-cy": l.dataCy,
75
92
  "dropdown-element": "ul",
76
- "dropdown-classes": ["uikit-z-30", n.dropdownClasses],
77
- "open-dropdown": r.value,
78
- "keep-state": !i.value.length || n.keepState === "closed" ? "closed" : "opened",
79
- "activate-keyboard-controller": n.enableKeyboardController,
80
- "reset-keyboard-controller": k.value,
81
- "onUpdate:resetKeyboardController": e[4] || (e[4] = (l) => k.value = l),
82
- "onUpdate:dropdownState": e[5] || (e[5] = (l) => r.value = l)
93
+ "dropdown-classes": ["uikit-z-30", l.dropdownClasses],
94
+ "open-dropdown": s.value,
95
+ "keep-state": !i.value.length || l.keepState === "closed" ? "closed" : "opened",
96
+ "activate-keyboard-controller": l.enableKeyboardController,
97
+ "reset-keyboard-controller": C.value,
98
+ "onUpdate:resetKeyboardController": e[4] || (e[4] = (n) => C.value = n),
99
+ "onUpdate:dropdownState": e[5] || (e[5] = (n) => s.value = n)
83
100
  }, {
84
- btn_slot: y(() => [
101
+ btn_slot: g(() => [
85
102
  u("div", {
86
- class: f(["uikit-text-16", n.triggerWrapperClasses]),
87
- onClick: e[3] || (e[3] = (l) => s("click", l))
103
+ class: f(["uikit-text-16", l.triggerWrapperClasses]),
104
+ onClick: e[3] || (e[3] = (n) => v("click", n))
88
105
  }, [
89
- c(t.$slots, "left-icon"),
106
+ p(t.$slots, "left-icon"),
90
107
  u("div", {
91
- class: f(["uikit-relative", n.inputWrapperClasses])
108
+ class: f(["uikit-relative", l.inputWrapperClasses])
92
109
  }, [
93
- F(u("input", {
110
+ E(u("input", {
94
111
  ref: "inputRef",
95
112
  "onUpdate:modelValue": [
96
- e[0] || (e[0] = (l) => o.value = l),
97
- U
113
+ e[0] || (e[0] = (n) => o.value = n),
114
+ I
98
115
  ],
99
- readonly: !!a.value?.label,
100
- class: f(["uikit-w-full uikit-border-none focus-visible:uikit-outline-none", n.inputClasses]),
116
+ id: q(U),
117
+ "data-cy": l.dataCy ? `ac_input_${l.dataCy}` : "",
118
+ type: "text",
119
+ autocomplete: "off",
120
+ class: f(["uikit-w-full uikit-border-none focus-visible:uikit-outline-none", l.inputClasses]),
101
121
  style: {
102
122
  font: "inherit",
103
123
  fontSize: "inherit"
104
124
  },
105
- placeholder: n.placeholder,
106
- onKeydown: e[1] || (e[1] = (l) => s("keydown", l)),
107
- onClick: e[2] || (e[2] = (l) => s("inputClick", l))
108
- }, null, 42, Z), [
109
- [H, o.value]
125
+ placeholder: l.placeholder,
126
+ onKeydown: e[1] || (e[1] = (n) => {
127
+ v("keydown", n), o.value && a.value?.label && (D("keydown"), k.value = !0, a.value = null);
128
+ }),
129
+ onClick: e[2] || (e[2] = (n) => {
130
+ v("inputClick", n), m.value?.select();
131
+ })
132
+ }, null, 42, oe), [
133
+ [J, o.value]
110
134
  ]),
111
135
  u("span", {
112
136
  ref_key: "hiddenSpan",
113
- ref: h,
137
+ ref: B,
114
138
  class: "uikit-invisible uikit-absolute uikit-left-0 uikit-top-0 uikit-whitespace-pre",
115
139
  style: {
116
140
  font: "inherit",
117
141
  fontSize: "inherit"
118
142
  }
119
- }, G(o.value), 513),
120
- F(u("button", {
143
+ }, Q(o.value), 513),
144
+ E(u("button", {
121
145
  type: "button",
122
- class: f(["uikit-clear-btn uikit-absolute uikit-top-1/2 -uikit-translate-y-1/2 uikit-appearance-none", n.clearButton?.classes]),
146
+ class: f(["uikit-clear-btn uikit-absolute uikit-top-1/2 -uikit-translate-y-1/2 uikit-appearance-none", l.clearButton?.classes]),
123
147
  "aria-label": "Clear input",
124
- style: X({
125
- left: `${v.value + (n.clearButton?.offset || 10)}px`
148
+ style: Z({
149
+ left: `${c.value + (l.clearButton?.offset || 10)}px`
126
150
  }),
127
- onClick: P(R, ["stop"])
151
+ onClick: Y(x, ["stop"])
128
152
  }, [
129
- c(t.$slots, "clear-icon", {}, () => [
130
- e[6] || (e[6] = j("X", -1))
153
+ p(t.$slots, "clear-icon", {}, () => [
154
+ e[6] || (e[6] = _("X", -1))
131
155
  ])
132
156
  ], 6), [
133
- [q, a.value?.label]
157
+ [ee, a.value?.label && c.value]
134
158
  ])
135
159
  ], 2),
136
- c(t.$slots, "right-icon")
160
+ p(t.$slots, "right-icon")
137
161
  ], 2)
138
162
  ]),
139
- default: y(({ activeIdx: l, setActiveIdx: z }) => [
140
- (C(!0), I(N, null, A(i.value, (T, d) => (C(), V(Q, {
141
- key: d,
142
- active: l === d,
163
+ default: g(({ activeIdx: n, setActiveIdx: K }) => [
164
+ (h(!0), P(X, null, j(i.value, (V, r) => (h(), F(le, {
165
+ key: r,
166
+ active: n === r,
143
167
  class: "uikit-m-1 uikit-rounded-[5px] uikit-px-5 uikit-py-10px hover:uikit-cursor-pointer",
144
- onClick: (D) => S(d),
145
- onMouseover: (D) => z(d)
168
+ onClick: (L) => M(r),
169
+ onMouseover: (L) => K(r)
146
170
  }, {
147
- default: y(() => [
148
- c(t.$slots, "option-content", {
149
- option: T,
150
- idx: d
171
+ default: g(() => [
172
+ p(t.$slots, "option-content", {
173
+ option: V,
174
+ idx: r
151
175
  }, () => [
152
176
  u("span", {
153
- innerHTML: T.label
154
- }, null, 8, _)
177
+ innerHTML: V.label
178
+ }, null, 8, ae)
155
179
  ])
156
180
  ]),
157
181
  _: 2
@@ -162,5 +186,5 @@ const Z = ["readonly", "placeholder"], _ = ["innerHTML"], ie = /* @__PURE__ */ K
162
186
  }
163
187
  });
164
188
  export {
165
- ie as default
189
+ pe as default
166
190
  };
@@ -110,8 +110,8 @@ const F = ["id", "data-cy"], U = ["innerHTML"], R = /* @__PURE__ */ I({
110
110
  }, [
111
111
  D(K(V), {
112
112
  class: s(["bbt-close-icon uikit-box-border", e.closeIcon?.classes]),
113
- width: e.closeIcon?.size || 30,
114
- height: e.closeIcon?.size || 30
113
+ width: e.closeIcon?.size || 20,
114
+ height: e.closeIcon?.size || 20
115
115
  }, null, 8, ["class", "width", "height"])
116
116
  ], 2)) : w("", !0),
117
117
  d(t.$slots, "header", { closeModal: o }, () => [
@@ -1,8 +1,8 @@
1
- import { defineComponent as p, ref as v, computed as h, watch as D, renderSlot as b, createElementVNode as E, normalizeClass as $, createElementBlock as B, createCommentVNode as A, openBlock as g, Fragment as I, renderList as R, createBlock as K, unref as V } from "vue";
1
+ import { defineComponent as v, ref as D, computed as h, watch as E, renderSlot as b, createElementVNode as $, normalizeClass as g, createElementBlock as B, createCommentVNode as A, openBlock as C, Fragment as I, renderList as R, createBlock as K, unref as V } from "vue";
2
2
  import { stringToHyphened as L, isArrNullOrEmpty as G } from "@wikicasa-dev/utilities";
3
3
  import N from "./CheckboxBtn.vue.js";
4
4
  import '../../../../../assets/CheckboxBtn.css';/* empty css */
5
- const T = ["id", "data-cy"], j = /* @__PURE__ */ p({
5
+ const T = ["id", "data-cy"], j = /* @__PURE__ */ v({
6
6
  inheritAttrs: !1,
7
7
  __name: "CheckboxGroup",
8
8
  props: {
@@ -20,14 +20,14 @@ const T = ["id", "data-cy"], j = /* @__PURE__ */ p({
20
20
  dataCy: { default: "" }
21
21
  },
22
22
  emits: ["resetted", "update:modelValue", "checkedGroup"],
23
- setup(a, { emit: C }) {
24
- const o = a, s = C, l = v(
23
+ setup(a, { emit: y }) {
24
+ const o = a, s = y, l = D(
25
25
  /* @__PURE__ */ new Map()
26
26
  ), r = h(() => {
27
27
  for (const e of o.checkboxData)
28
28
  if (e.reset) return e;
29
29
  return null;
30
- }), y = h(() => o.checkboxData.length), f = h(() => {
30
+ }), x = h(() => o.checkboxData.length), f = h(() => {
31
31
  let e = 0;
32
32
  return l.value.forEach((t) => {
33
33
  t.checked && e++;
@@ -60,7 +60,7 @@ const T = ["id", "data-cy"], j = /* @__PURE__ */ p({
60
60
  }, d = (e) => l.value.get(o.getKey(e))?.checked ?? !1, i = (e) => {
61
61
  if (G(o.checkboxData)) return;
62
62
  const t = l.value.get(e.id);
63
- t?.reset && e.checked ? k() : r.value && !t?.reset && u(o.getKey(r.value), { checked: !1 }), u(`${e.id}`), o.autoCheckResetAll && r.value && f.value === y.value - 1 && l.value.forEach((n) => {
63
+ t?.reset && e.checked ? k() : r.value && !t?.reset && u(o.getKey(r.value), { checked: !1 }), u(`${e.id}`), o.autoCheckResetAll && r.value && f.value === x.value - 1 && l.value.forEach((n) => {
64
64
  n.checked = !!n.reset;
65
65
  }), o.autoCheckResetEmpty && r.value && !f.value && (!o.manualToggleResetButton || !t?.reset) && u(o.getKey(r.value), { checked: !0 });
66
66
  const c = [];
@@ -68,7 +68,7 @@ const T = ["id", "data-cy"], j = /* @__PURE__ */ p({
68
68
  n.checked && c.push(n);
69
69
  }), s("update:modelValue", c), s("checkedGroup", o.groupId);
70
70
  };
71
- return D(
71
+ return E(
72
72
  () => o.reset,
73
73
  (e) => {
74
74
  e && m();
@@ -78,9 +78,9 @@ const T = ["id", "data-cy"], j = /* @__PURE__ */ p({
78
78
  handleChange: i,
79
79
  checkboxesData: a.checkboxData
80
80
  }, () => [
81
- E("div", {
81
+ $("div", {
82
82
  id: a.groupId,
83
- class: $(["checkbox-group-container", e.$attrs.class || ""]),
83
+ class: g(["checkbox-group-container", e.$attrs.class || ""]),
84
84
  "data-cy": a.dataCy
85
85
  }, [
86
86
  b(e.$slots, "checkbox_elements", {
@@ -89,19 +89,19 @@ const T = ["id", "data-cy"], j = /* @__PURE__ */ p({
89
89
  checkboxesData: a.checkboxData,
90
90
  reset: m
91
91
  }, () => [
92
- a.checkboxData ? (g(!0), B(I, { key: 0 }, R(a.checkboxData, (c, n) => (g(), K(N, {
92
+ a.checkboxData ? (C(!0), B(I, { key: 0 }, R(a.checkboxData, (c, n) => (C(), K(N, {
93
93
  id: a.getKey(c),
94
94
  key: n,
95
95
  "data-cy": c.dataCy ?? `checkbox_${V(L)(`${c.label}`)}`,
96
96
  label: c.label,
97
97
  inline: a.formCheckInline,
98
98
  "model-value": d(c),
99
- "container-class": [
99
+ class: g([
100
100
  a.formCheckInline ? "uikit-mr-10px" : "uikit-mb-10px",
101
101
  a.checkboxContainerClasses
102
- ],
103
- onChange: t[0] || (t[0] = (x) => i(x))
104
- }, null, 8, ["id", "data-cy", "label", "inline", "model-value", "container-class"]))), 128)) : A("", !0)
102
+ ]),
103
+ onChange: t[0] || (t[0] = (p) => i(p))
104
+ }, null, 8, ["id", "data-cy", "label", "inline", "model-value", "class"]))), 128)) : A("", !0)
105
105
  ])
106
106
  ], 10, T)
107
107
  ]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wikicasa-dev/components",
3
- "version": "2.2.9-alpha.0",
3
+ "version": "2.2.9-alpha.10",
4
4
  "description": "Wikicasa frontend components",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",