@wikicasa-dev/components 2.2.8-alpha.16 → 2.2.8-alpha.18

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