@wikicasa-dev/components 2.2.9-alpha.23 → 2.2.9-alpha.24

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