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

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