@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.
- package/dist/Swiper/autoplay.js +1 -1
- package/dist/Swiper/controller.js +1 -1
- package/dist/Swiper/keyboard.js +1 -1
- package/dist/Swiper/thumbs.js +1 -1
- package/dist/UIKit/Autocomplete/ClearableAutocomplete.d.ts +1 -0
- package/dist/packages/components/lib/UIKit/Autocomplete/ClearableAutocomplete.vue.js +63 -74
- package/package.json +1 -1
- /package/dist/assets/{swiper-autoplay.css → swiper-keyboard.css} +0 -0
package/dist/Swiper/autoplay.js
CHANGED
package/dist/Swiper/keyboard.js
CHANGED
package/dist/Swiper/thumbs.js
CHANGED
|
@@ -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
|
|
2
|
-
import
|
|
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
|
|
5
|
-
import { debounce as
|
|
6
|
-
const
|
|
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__ */
|
|
31
|
+
emits: /* @__PURE__ */ V(["click", "inputClick", "keydown"], ["update:open", "update:modelValue", "update:inputValue"]),
|
|
31
32
|
setup(l, { expose: O, emit: R }) {
|
|
32
|
-
const s =
|
|
33
|
-
o.value = o.value ??
|
|
34
|
-
const v = R,
|
|
35
|
-
o.value = "",
|
|
36
|
-
},
|
|
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
|
-
|
|
39
|
+
a.value = [], s.value = !1;
|
|
39
40
|
return;
|
|
40
41
|
}
|
|
41
|
-
|
|
42
|
-
},
|
|
43
|
-
const e =
|
|
44
|
-
!e || e.id ===
|
|
45
|
-
},
|
|
46
|
-
|
|
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
|
-
|
|
49
|
+
k.value?.focus();
|
|
49
50
|
};
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
}),
|
|
53
|
-
[o, () =>
|
|
51
|
+
return N(() => {
|
|
52
|
+
g.value = te({ delay: 300 }, l.onInputChangeCb);
|
|
53
|
+
}), y(
|
|
54
|
+
[o, () => T.value],
|
|
54
55
|
([, t]) => {
|
|
55
|
-
t &&
|
|
56
|
+
t && A(() => {
|
|
56
57
|
if (!t) return;
|
|
57
58
|
const e = t.offsetWidth;
|
|
58
|
-
e !==
|
|
59
|
+
e !== d.value && (d.value = e);
|
|
59
60
|
});
|
|
60
61
|
},
|
|
61
62
|
{ immediate: !0 }
|
|
62
|
-
),
|
|
63
|
-
() =>
|
|
63
|
+
), y(
|
|
64
|
+
() => S.value?.selectedIdx,
|
|
64
65
|
(t) => {
|
|
65
66
|
const e = t ?? -1;
|
|
66
|
-
e !== -1 &&
|
|
67
|
+
e !== -1 && B(e);
|
|
67
68
|
}
|
|
68
|
-
),
|
|
69
|
-
|
|
69
|
+
), y(
|
|
70
|
+
i,
|
|
70
71
|
(t, e) => {
|
|
71
|
-
|
|
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: () =>
|
|
82
|
-
select:
|
|
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": !
|
|
86
|
+
"keep-state": !a.value.length || l.keepState === "closed" ? "closed" : "opened",
|
|
96
87
|
"activate-keyboard-controller": l.enableKeyboardController,
|
|
97
|
-
"reset-keyboard-controller":
|
|
98
|
-
"onUpdate:resetKeyboardController": e[4] || (e[4] = (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:
|
|
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
|
-
|
|
101
|
+
F(u("input", {
|
|
111
102
|
ref: "inputRef",
|
|
112
103
|
"onUpdate:modelValue": [
|
|
113
104
|
e[0] || (e[0] = (n) => o.value = n),
|
|
114
|
-
|
|
105
|
+
U
|
|
115
106
|
],
|
|
116
|
-
id:
|
|
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),
|
|
119
|
+
v("inputClick", n), k.value?.select();
|
|
131
120
|
})
|
|
132
|
-
}, null, 42,
|
|
133
|
-
[
|
|
121
|
+
}, null, 42, le), [
|
|
122
|
+
[q, o.value]
|
|
134
123
|
]),
|
|
135
124
|
u("span", {
|
|
136
125
|
ref_key: "hiddenSpan",
|
|
137
|
-
ref:
|
|
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
|
-
},
|
|
144
|
-
|
|
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:
|
|
149
|
-
left: `${
|
|
137
|
+
style: Q({
|
|
138
|
+
left: `${d.value + (l.clearButton?.offset || 10)}px`
|
|
150
139
|
}),
|
|
151
|
-
onClick:
|
|
140
|
+
onClick: J(E, ["stop"])
|
|
152
141
|
}, [
|
|
153
142
|
p(t.$slots, "clear-icon", {}, () => [
|
|
154
|
-
e[6] || (e[6] =
|
|
143
|
+
e[6] || (e[6] = Y("X", -1))
|
|
155
144
|
])
|
|
156
145
|
], 6), [
|
|
157
|
-
[
|
|
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:
|
|
164
|
-
(
|
|
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) =>
|
|
157
|
+
onClick: (L) => B(r),
|
|
169
158
|
onMouseover: (L) => K(r)
|
|
170
159
|
}, {
|
|
171
|
-
default:
|
|
160
|
+
default: h(() => [
|
|
172
161
|
p(t.$slots, "option-content", {
|
|
173
|
-
option:
|
|
162
|
+
option: M,
|
|
174
163
|
idx: r
|
|
175
164
|
}, () => [
|
|
176
165
|
u("span", {
|
|
177
|
-
innerHTML:
|
|
178
|
-
}, null, 8,
|
|
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
|
-
|
|
178
|
+
de as default
|
|
190
179
|
};
|
package/package.json
CHANGED
|
File without changes
|