@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
|
|
2
|
-
import
|
|
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
|
|
5
|
-
import { debounce as
|
|
6
|
-
const
|
|
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__ */
|
|
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__ */
|
|
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 =
|
|
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 =
|
|
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
|
|
44
|
-
},
|
|
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,
|
|
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
|
-
|
|
48
|
+
b.value?.select();
|
|
49
49
|
}, A = () => {
|
|
50
|
-
|
|
50
|
+
b.value?.focus();
|
|
51
51
|
};
|
|
52
|
-
return
|
|
53
|
-
|
|
54
|
-
}),
|
|
55
|
-
[o,
|
|
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 ||
|
|
57
|
+
!l || !e || q(() => {
|
|
58
58
|
if (!l || !e) return;
|
|
59
|
-
const h = l.offsetWidth,
|
|
60
|
-
|
|
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
|
-
),
|
|
68
|
-
() =>
|
|
64
|
+
), T(
|
|
65
|
+
() => M.value?.selectedIdx,
|
|
69
66
|
(l) => {
|
|
70
67
|
const e = l ?? -1;
|
|
71
|
-
e !== -1 &&
|
|
68
|
+
e !== -1 && R(e);
|
|
72
69
|
}
|
|
73
|
-
),
|
|
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: () =>
|
|
77
|
+
getRootElement: () => M.value?.getRootElement(),
|
|
81
78
|
select: N,
|
|
82
79
|
focus: A
|
|
83
|
-
}), (l, e) => (
|
|
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":
|
|
93
|
-
"onUpdate:resetKeyboardController": e[5] || (e[5] = (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:
|
|
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
|
-
|
|
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
|
-
|
|
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),
|
|
121
|
+
p("input", n), k.value = !1;
|
|
125
122
|
}),
|
|
126
123
|
onClick: e[3] || (e[3] = (n) => {
|
|
127
|
-
p("inputClick", n),
|
|
124
|
+
p("inputClick", n), b.value?.select();
|
|
128
125
|
})
|
|
129
|
-
}, null, 42,
|
|
126
|
+
}, null, 42, ue), [
|
|
130
127
|
[Z, o.value]
|
|
131
128
|
]),
|
|
132
129
|
s("span", {
|
|
133
130
|
ref_key: "hiddenSpan",
|
|
134
|
-
ref:
|
|
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(
|
|
148
|
+
onClick: ee(D, ["stop"])
|
|
153
149
|
}, [
|
|
154
|
-
|
|
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
|
-
|
|
157
|
+
C(l.$slots, "right-icon")
|
|
160
158
|
], 2)
|
|
161
159
|
]),
|
|
162
|
-
default:
|
|
163
|
-
(
|
|
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) =>
|
|
165
|
+
onClick: (w) => R(i),
|
|
168
166
|
onMouseover: (w) => h(i)
|
|
169
167
|
}, {
|
|
170
|
-
default:
|
|
171
|
-
|
|
172
|
-
option:
|
|
168
|
+
default: S(() => [
|
|
169
|
+
C(l.$slots, "option-content", {
|
|
170
|
+
option: m,
|
|
173
171
|
idx: i
|
|
174
172
|
}, () => [
|
|
175
173
|
s("span", {
|
|
176
|
-
innerHTML:
|
|
177
|
-
}, null, 8,
|
|
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
|
-
|
|
186
|
+
ke as default
|
|
189
187
|
};
|