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

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