@oneb/ui-vue 0.2.23 → 0.2.25

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,953 +0,0 @@
1
- import { d as we, e as le, o as oe, f as ne, s as re, g as ge, h as be, _ as ke, r as xe, i as Ce } from "./OneHelpMenu-dd4329df.js";
2
- import { defineComponent as N, ref as C, watch as ce, onBeforeUnmount as pe, provide as _e, computed as j, openBlock as s, createElementBlock as o, createElementVNode as t, renderSlot as _, normalizeProps as P, guardReactiveProps as F, createBlock as T, Teleport as $e, createCommentVNode as f, withDirectives as J, normalizeClass as x, toDisplayString as h, vShow as Me, withCtx as D, createVNode as G, unref as I, normalizeStyle as U, Fragment as B, renderList as E, onMounted as ve, onUnmounted as Ve, vModelText as ae, mergeProps as W, createTextVNode as ie, nextTick as H } from "vue";
3
- import { _ as me } from "./_plugin-vue_export-helper-dad06003.js";
4
- import { _ as ue } from "./OneAvatar.vue_vue_type_script_setup_true_lang-08ab80dd.js";
5
- const Ke = ["data-opened"], Le = {
6
- key: 0,
7
- class: "text-sm text-secondary-content px-3 py-2 text-left"
8
- }, Oe = /* @__PURE__ */ N({
9
- __name: "OneDropdownAuto",
10
- props: we,
11
- emits: ["open", "close"],
12
- setup(V, { emit: p }) {
13
- const n = V, a = C(!1), y = C(null), b = C(null);
14
- let w = null;
15
- ce(a, (d) => {
16
- d && b.value && y.value ? (le(b.value, y.value, {
17
- placement: n.stick ? n.stick : "bottom-start",
18
- strategy: "fixed",
19
- middleware: [oe(5), ne(), re({ padding: 8 })]
20
- }).then(({ x: K, y: $ }) => {
21
- Object.assign(y.value.style, {
22
- left: `${K}px`,
23
- top: `${$}px`
24
- });
25
- }), w = ge(b.value, y.value, () => {
26
- le(b.value, y.value, {
27
- placement: n.stick ? n.stick : "bottom-start",
28
- strategy: "fixed",
29
- middleware: [oe(4), ne(), re({ padding: 8 })]
30
- }).then(({ x: K, y: $ }) => {
31
- Object.assign(y.value.style, {
32
- left: `${K}px`,
33
- top: `${$}px`
34
- });
35
- });
36
- })) : w && (w(), w = null);
37
- }), pe(() => {
38
- w && w();
39
- });
40
- const c = p, m = () => {
41
- a.value = !a.value, a.value ? c("open") : c("close");
42
- };
43
- _e("OneDropdown", {
44
- onToggle: m
45
- });
46
- const v = j(() => [
47
- "fixed z-[10000] w-fit rounded-md bg-white",
48
- "py-1 shadow-lg ring-black ring-opacity-5 focus:outline-none",
49
- "overflow-auto max-h-[540px] min-w-[150px] max-w-[540px]"
50
- ]);
51
- return (d, K) => (s(), o("div", {
52
- class: "relative inline-block",
53
- "data-opened": a.value
54
- }, [
55
- t("div", {
56
- ref_key: "buttonRef",
57
- ref: b
58
- }, [
59
- _(d.$slots, "button", P(F({ onToggle: m, isExpanded: a.value })))
60
- ], 512),
61
- (s(), T($e, { to: "body" }, [
62
- a.value ? (s(), o("div", {
63
- key: 0,
64
- class: "fixed top-0 left-0 w-screen h-screen z-[9999]",
65
- onClick: m
66
- })) : f("", !0),
67
- J(t("div", {
68
- ref_key: "menuRef",
69
- ref: y,
70
- class: x(["menu", v.value]),
71
- role: "menu",
72
- "aria-orientation": "vertical",
73
- tabindex: "-1",
74
- style: { display: "none" }
75
- }, [
76
- d.title ? (s(), o("div", Le, h(d.title), 1)) : f("", !0),
77
- _(d.$slots, "menu", P(F({ onToggle: m })))
78
- ], 2), [
79
- [Me, a.value]
80
- ])
81
- ]))
82
- ], 8, Ke));
83
- }
84
- }), je = {}, Se = { class: "border-t border-secondary-stroke my-1" };
85
- function Ae(V, p) {
86
- return s(), o("div", Se);
87
- }
88
- const Nt = /* @__PURE__ */ me(je, [["render", Ae]]), Be = ["onClick"], Ie = { class: "grid" }, ze = { class: "font-semibold px-3" }, Ee = { class: "rounded-lg m-3 border" }, De = {
89
- class: "space-x-2 flex items-center px-3 py-2",
90
- style: { width: "300px" }
91
- }, Re = { class: "flex-shrink-0" }, We = { class: "w-full text-left" }, Pe = { class: "flex-shrink-0" }, Fe = { class: "px-3 py-2" }, Te = { class: "text-secondary-content text-left pb-1 text-sm uppercase" }, Ue = {
92
- key: 0,
93
- class: "space-y-2"
94
- }, Ne = ["onClick"], qe = { class: "pl-2" }, Ge = { class: "text-sm mt-1" }, He = { class: "text-xs mt-1" }, de = 3, qt = /* @__PURE__ */ N({
95
- __name: "OneBrowserMenuGrid",
96
- props: be,
97
- setup(V) {
98
- const p = V, n = () => {
99
- typeof p.onChange == "function" && p.onChange();
100
- }, a = C(!1), y = j(() => p.apps ? a.value ? p.apps : p.apps.slice(0, de) : []), b = () => {
101
- a.value = !a.value;
102
- }, w = (c) => {
103
- typeof p.onApp == "function" && p.onApp(c);
104
- };
105
- return (c, m) => (s(), T(ke, { stick: "right" }, {
106
- button: D(({ onToggle: v, isExpanded: d }) => [
107
- t("button", {
108
- onClick: v,
109
- class: x(["p-1 rounded-md hover:bg-secondary-10", [d ? "bg-secondary-25" : ""]])
110
- }, [
111
- G(I(xe), {
112
- class: "text-secondary-base",
113
- style: U(`width: ${c.iconSize}px; height: ${c.iconSize}px`)
114
- }, null, 8, ["style"])
115
- ], 10, Be)
116
- ]),
117
- menu: D(() => {
118
- var v, d, K, $;
119
- return [
120
- t("div", Ie, [
121
- t("div", ze, h((v = c.workspace) == null ? void 0 : v.title), 1),
122
- t("div", Ee, [
123
- t("div", De, [
124
- t("div", Re, [
125
- G(ue, {
126
- text: ((d = c.workspace) == null ? void 0 : d.name) || "",
127
- src: (K = c.workspace) == null ? void 0 : K.photo_url,
128
- size: 44,
129
- rounded: !1,
130
- class: "mx-auto"
131
- }, null, 8, ["text", "src"])
132
- ]),
133
- t("div", We, h(($ = c.workspace) == null ? void 0 : $.name), 1),
134
- t("div", Pe, [
135
- t("button", {
136
- class: "text-sm border border-secondary-stroke rounded px-2 py-0.5 text-secondary-content hover:text-primary-content",
137
- onClick: n
138
- }, h(c.changeLabel), 1)
139
- ])
140
- ]),
141
- m[0] || (m[0] = t("hr", null, null, -1))
142
- ])
143
- ]),
144
- t("div", Fe, [
145
- t("div", Te, h(c.appsTitle), 1),
146
- t("div", null, [
147
- c.apps && c.apps.length ? (s(), o("div", Ue, [
148
- (s(!0), o(B, null, E(y.value, (S) => (s(), o("div", {
149
- key: S.id,
150
- onClick: (i) => w(S),
151
- class: "flex items-center rounded-lg hover:bg-secondary-10 border p-2 bg-[#FAFAFA] cursor-pointer"
152
- }, [
153
- G(ue, {
154
- text: S.name,
155
- src: S.photo_url,
156
- size: 44,
157
- rounded: !1
158
- }, null, 8, ["text", "src"]),
159
- t("div", qe, [
160
- t("p", Ge, h(S.name), 1),
161
- t("p", He, h(S.short), 1)
162
- ])
163
- ], 8, Ne))), 128))
164
- ])) : f("", !0),
165
- c.apps && c.apps.length > de ? (s(), o("button", {
166
- key: 1,
167
- onClick: b,
168
- class: "mt-2 w-full bg-[#FAFAFA] hover:bg-secondary-10 p-2 rounded-lg mb-5 text-xs"
169
- }, h(a.value ? "Приховати" : "Дивитися всі"), 1)) : f("", !0)
170
- ])
171
- ])
172
- ];
173
- }),
174
- _: 1
175
- }));
176
- }
177
- }), Je = {
178
- useModal: {
179
- required: !0,
180
- type: Object
181
- },
182
- title: {
183
- required: !1,
184
- type: String
185
- },
186
- size: {
187
- type: String,
188
- default: "medium"
189
- },
190
- onClose: {
191
- type: Function
192
- },
193
- classModal: {
194
- type: Boolean,
195
- default: !1
196
- },
197
- titleCenter: {
198
- type: Boolean,
199
- default: !1
200
- },
201
- classTitle: {
202
- type: String,
203
- default: ""
204
- },
205
- canClose: {
206
- type: Function,
207
- default: () => !0
208
- },
209
- customWidth: {
210
- type: String,
211
- default: ""
212
- }
213
- }, Xe = {
214
- "3xs": ["max-w-xs"],
215
- xs: ["max-w-sm"],
216
- sm: ["max-w-md"],
217
- small: ["max-w-lg"],
218
- md: ["max-w-xl"],
219
- medium: ["max-w-xl"],
220
- large: ["max-w-2xl"],
221
- xl: ["max-w-3xl"],
222
- "2xl": ["max-w-4xl"],
223
- "3xl": ["max-w-4xl"],
224
- "4xl": ["max-w-5xl"],
225
- "5xl": ["max-w-5xl"],
226
- "7xl": ["max-w-7xl"]
227
- }, Ye = (V = "medium") => {
228
- const p = [];
229
- return p.push(...Xe[V] ?? []), p;
230
- }, Ze = { class: "relative bg-white rounded-lg shadow h-full" }, Qe = /* @__PURE__ */ N({
231
- __name: "OneModal",
232
- props: Je,
233
- emits: ["isOpen", "closed"],
234
- setup(V, { expose: p, emit: n }) {
235
- const a = V, y = n, b = j(() => {
236
- var k, M;
237
- const i = a.useModal;
238
- return ((k = i == null ? void 0 : i.isOpened) == null ? void 0 : k.value) ?? ((M = i == null ? void 0 : i.isOpen) == null ? void 0 : M.value) ?? !1;
239
- }), w = j(() => Ye(a.size)), c = j(() => a.customWidth ? { width: a.customWidth } : {}), m = C(null), v = C(!1);
240
- function d(i) {
241
- v.value = !1, m.value && !m.value.contains(i.target) && (v.value = !0);
242
- }
243
- function K(i) {
244
- v.value && m.value && !m.value.contains(i.target) && $();
245
- }
246
- const $ = () => {
247
- var k, M;
248
- if (a.canClose && !a.canClose())
249
- return;
250
- const i = a.useModal;
251
- (k = i == null ? void 0 : i.close) == null || k.call(i), (M = a.onClose) == null || M.call(a), y("closed"), y("isOpen");
252
- };
253
- return p({
254
- open: () => {
255
- var k;
256
- const i = a.useModal;
257
- (k = i == null ? void 0 : i.open) == null || k.call(i), y("isOpen");
258
- },
259
- close: $
260
- }), (i, k) => b.value ? (s(), o("div", {
261
- key: 0,
262
- tabindex: "-1",
263
- onMousedown: d,
264
- onMouseup: K,
265
- class: x(["modal backdrop !m-0", { "modal-mobile": i.classModal }])
266
- }, [
267
- t("div", {
268
- class: x([
269
- "relative w-full max-h-full",
270
- w.value,
271
- { "fixed bottom-0 left-0 right-0 w-full bg-white rounded-t-xl mobile-modal": i.classModal }
272
- ]),
273
- style: U(c.value),
274
- ref_key: "modalContent",
275
- ref: m
276
- }, [
277
- t("div", Ze, [
278
- i.title ? (s(), o("div", {
279
- key: 0,
280
- class: x([
281
- i.titleCenter ? "grid grid-cols-4" : "flex items-start justify-between",
282
- "p-3 border-b rounded-t",
283
- i.classTitle
284
- ])
285
- }, [
286
- t("h3", {
287
- class: x(["text-xl font-semibold text-gray-900 whitespace-nowrap overflow-hidden text-ellipsis", i.titleCenter ? "col-span-2 text-center col-start-2" : ""])
288
- }, h(i.title), 3),
289
- t("button", {
290
- type: "button",
291
- class: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center",
292
- onClick: $
293
- }, k[0] || (k[0] = [
294
- t("svg", {
295
- xmlns: "http://www.w3.org/2000/svg",
296
- fill: "none",
297
- viewBox: "0 0 24 24",
298
- "stroke-width": "1.8",
299
- stroke: "currentColor",
300
- "aria-hidden": "true",
301
- class: "w-5 h-5"
302
- }, [
303
- t("path", {
304
- "stroke-linecap": "round",
305
- "stroke-linejoin": "round",
306
- d: "M6 18L18 6M6 6l12 12"
307
- })
308
- ], -1)
309
- ]))
310
- ], 2)) : f("", !0),
311
- _(i.$slots, "header", {}, void 0, !0),
312
- _(i.$slots, "body", {}, void 0, !0),
313
- _(i.$slots, "default", {}, void 0, !0),
314
- _(i.$slots, "footer", { close: $ }, void 0, !0)
315
- ])
316
- ], 6)
317
- ], 34)) : f("", !0);
318
- }
319
- });
320
- const et = /* @__PURE__ */ me(Qe, [["__scopeId", "data-v-3560b61e"]]);
321
- function tt(V = !1) {
322
- const p = C(V), n = C(void 0);
323
- let a = null;
324
- const y = () => {
325
- a && (clearTimeout(a), a = null), p.value = !1, n.value = void 0;
326
- }, b = (m) => {
327
- n.value = m, p.value = !0;
328
- }, w = (m) => {
329
- a && clearTimeout(a), a = setTimeout(y, m * 1e3);
330
- }, c = (m) => {
331
- m.key === "Escape" && p.value && y();
332
- };
333
- return ve(() => {
334
- document.addEventListener("keydown", c);
335
- }), pe(() => {
336
- document.removeEventListener("keydown", c), a && clearTimeout(a);
337
- }), {
338
- isOpened: p,
339
- isOpen: p,
340
- // alias for backward compatibility
341
- data: n,
342
- open: b,
343
- close: y,
344
- closeWithDelay: w
345
- };
346
- }
347
- const st = ["onClick"], lt = ["onKeydown"], ot = {
348
- key: 0,
349
- class: "text-sm font-medium text-gray-700 px-3 pt-2.5 pb-1.5"
350
- }, nt = {
351
- key: 1,
352
- class: "px-3 py-2"
353
- }, rt = { class: "relative" }, at = ["placeholder"], it = {
354
- key: 2,
355
- class: "border-b border-gray-100"
356
- }, ut = ["onClick"], dt = {
357
- key: 3,
358
- class: "flex items-center justify-between px-3 py-1.5 border-b border-gray-100"
359
- }, ct = {
360
- key: 4,
361
- class: "flex justify-center py-4"
362
- }, pt = ["aria-selected", "onClick"], vt = {
363
- key: 0,
364
- xmlns: "http://www.w3.org/2000/svg",
365
- fill: "none",
366
- viewBox: "0 0 24 24",
367
- "stroke-width": "1.5",
368
- stroke: "currentColor",
369
- class: "w-4 h-4 text-blue-600 shrink-0"
370
- }, mt = {
371
- key: 1,
372
- class: "w-4 h-4 shrink-0"
373
- }, ft = ["aria-selected", "onClick", "onMouseenter"], ht = {
374
- key: 0,
375
- xmlns: "http://www.w3.org/2000/svg",
376
- fill: "none",
377
- viewBox: "0 0 24 24",
378
- "stroke-width": "1.5",
379
- stroke: "currentColor",
380
- class: "w-4 h-4 text-blue-600 shrink-0"
381
- }, yt = {
382
- key: 1,
383
- class: "w-4 h-4 shrink-0"
384
- }, wt = ["aria-selected", "onClick", "onMouseenter"], gt = {
385
- key: 0,
386
- xmlns: "http://www.w3.org/2000/svg",
387
- fill: "none",
388
- viewBox: "0 0 24 24",
389
- "stroke-width": "1.5",
390
- stroke: "currentColor",
391
- class: "w-4 h-4 text-blue-600 shrink-0"
392
- }, bt = {
393
- key: 1,
394
- class: "w-4 h-4 shrink-0"
395
- }, kt = {
396
- key: 3,
397
- class: "px-3 py-4 text-sm text-gray-500 text-center"
398
- }, xt = { class: "pb-6" }, Ct = {
399
- key: 0,
400
- class: "relative px-3 py-3"
401
- }, _t = { class: "relative" }, $t = ["placeholder"], Mt = {
402
- key: 1,
403
- class: "px-3 py-2"
404
- }, Vt = {
405
- key: 2,
406
- class: "flex items-center justify-between px-3 py-2 border-b border-gray-100"
407
- }, Kt = {
408
- key: 3,
409
- class: "flex justify-center py-8"
410
- }, Lt = {
411
- key: 4,
412
- class: "overflow-auto h-[60dvh] divide-y",
413
- role: "listbox"
414
- }, Ot = ["aria-selected"], jt = {
415
- key: 0,
416
- xmlns: "http://www.w3.org/2000/svg",
417
- fill: "none",
418
- viewBox: "0 0 24 24",
419
- "stroke-width": "1.5",
420
- stroke: "currentColor",
421
- class: "w-5 h-5 text-blue-600 shrink-0"
422
- }, St = {
423
- key: 1,
424
- class: "w-5 h-5 shrink-0"
425
- }, At = {
426
- key: 0,
427
- class: "px-3 pt-3 pb-2 text-xs font-semibold text-gray-400 uppercase tracking-wide"
428
- }, Bt = ["aria-selected", "onClick"], It = {
429
- key: 0,
430
- xmlns: "http://www.w3.org/2000/svg",
431
- fill: "none",
432
- viewBox: "0 0 24 24",
433
- "stroke-width": "1.5",
434
- stroke: "currentColor",
435
- class: "w-5 h-5 text-blue-600 shrink-0"
436
- }, zt = {
437
- key: 1,
438
- class: "w-5 h-5 shrink-0"
439
- }, Et = ["aria-selected", "onClick"], Dt = {
440
- key: 0,
441
- xmlns: "http://www.w3.org/2000/svg",
442
- fill: "none",
443
- viewBox: "0 0 24 24",
444
- "stroke-width": "1.5",
445
- stroke: "currentColor",
446
- class: "w-5 h-5 text-blue-600 shrink-0"
447
- }, Rt = {
448
- key: 1,
449
- class: "w-5 h-5 shrink-0"
450
- }, Wt = {
451
- key: 3,
452
- class: "px-3 py-8 text-sm text-gray-500 text-center"
453
- }, Gt = /* @__PURE__ */ N({
454
- __name: "OneDropdownSelect",
455
- props: Ce,
456
- emits: ["update:modelValue", "search", "create"],
457
- setup(V, { emit: p }) {
458
- const n = V, a = p, y = C(!1);
459
- let b = null;
460
- ve(() => {
461
- b = window.matchMedia("(max-width: 767px)"), y.value = b.matches;
462
- const e = (l) => {
463
- y.value = l.matches;
464
- };
465
- b.addEventListener("change", e), Ve(() => {
466
- b == null || b.removeEventListener("change", e);
467
- });
468
- });
469
- const w = tt(), c = C(null), m = () => {
470
- v.value = "", d.value = -1, w.open(), H(() => {
471
- var e;
472
- (e = c.value) == null || e.focus();
473
- });
474
- }, v = C(""), d = C(-1), K = C(null), $ = C(null), S = C({}), i = (e, l) => {
475
- e && (S.value[l] = e);
476
- }, k = j(() => n.allowEmpty ? 1 : 0), M = j(() => {
477
- if (!v.value.trim())
478
- return n.items;
479
- const e = v.value.toLowerCase();
480
- return n.items.filter(
481
- (l) => String(l[n.labelKey] ?? "").toLowerCase().includes(e)
482
- );
483
- }), X = j(() => {
484
- if (!n.groupKey)
485
- return [];
486
- const e = [], l = /* @__PURE__ */ new Map();
487
- let u = k.value;
488
- for (const r of M.value) {
489
- const O = String(r[n.groupKey] ?? "");
490
- let g = l.get(O);
491
- g || (g = { label: O, entries: [] }, l.set(O, g), e.push(g)), g.entries.push({ item: r, flatIndex: u }), u++;
492
- }
493
- return e;
494
- }), A = j(() => n.multiple ? (n.modelValue ?? []).length > 0 : n.modelValue !== null && n.modelValue !== void 0), R = j(() => {
495
- if (n.multiple) {
496
- const e = n.modelValue ?? [];
497
- return e.length === 0 ? n.placeholder : e.length === 1 ? e[0][n.labelKey] ?? n.placeholder : `${e[0][n.labelKey]} +${e.length - 1}`;
498
- }
499
- return n.modelValue === null || n.modelValue === void 0 ? n.placeholder : n.modelValue[n.labelKey] ?? n.placeholder;
500
- }), L = (e) => n.modelValue ? n.multiple ? n.modelValue.some((u) => u[n.valueKey] === e[n.valueKey]) : n.modelValue[n.valueKey] === e[n.valueKey] : !1, Y = j(() => M.value.length + k.value), z = (e, l) => {
501
- if (n.multiple) {
502
- const u = (n.modelValue ?? []).slice();
503
- if (e === null) {
504
- a("update:modelValue", []);
505
- return;
506
- }
507
- const r = u.findIndex((O) => O[n.valueKey] === e[n.valueKey]);
508
- r >= 0 ? u.splice(r, 1) : u.push(e), a("update:modelValue", u);
509
- return;
510
- }
511
- a("update:modelValue", e), l();
512
- }, Z = () => {
513
- a("update:modelValue", [...n.items]);
514
- }, Q = () => {
515
- a("update:modelValue", []);
516
- }, ee = (e) => {
517
- a("create", v.value), e();
518
- }, fe = () => {
519
- v.value = "", d.value = -1, H(() => {
520
- var e;
521
- (e = K.value) == null || e.focus();
522
- });
523
- }, he = () => {
524
- v.value = "", d.value = -1;
525
- }, te = () => {
526
- d.value = 0, a("search", v.value);
527
- }, se = () => {
528
- H(() => {
529
- const e = S.value[d.value];
530
- e && e.scrollIntoView({ block: "nearest" });
531
- });
532
- }, ye = (e, l) => {
533
- switch (e.key) {
534
- case "ArrowDown":
535
- e.preventDefault(), d.value < Y.value - 1 ? d.value++ : d.value = 0, se();
536
- break;
537
- case "ArrowUp":
538
- e.preventDefault(), d.value > 0 ? d.value-- : d.value = Y.value - 1, se();
539
- break;
540
- case "Enter":
541
- if (e.preventDefault(), d.value >= 0)
542
- if (n.allowEmpty && d.value === 0)
543
- z(null, l);
544
- else {
545
- const u = d.value - k.value, r = M.value[u];
546
- r && z(r, l);
547
- }
548
- break;
549
- case "Escape":
550
- e.preventDefault(), l();
551
- break;
552
- }
553
- };
554
- return ce(v, () => {
555
- d.value = 0;
556
- }), (e, l) => y.value ? (s(), o(B, { key: 1 }, [
557
- _(e.$slots, "button", P(F({ onToggle: m, isExpanded: I(w).isOpened.value, selectedLabel: R.value })), () => [
558
- t("button", {
559
- class: x(["inline-flex items-center justify-between gap-2 text-sm transition-colors", [
560
- e.view === "pill" ? "rounded-full bg-gray-100 px-3.5 py-1.5 hover:bg-gray-200 text-gray-700" : "rounded-lg border border-gray-300 bg-white px-3 py-2 hover:bg-gray-50 min-w-[180px]"
561
- ]]),
562
- style: U(e.maxWidth ? { maxWidth: e.maxWidth } : void 0),
563
- onClick: m
564
- }, [
565
- t("span", {
566
- class: x(["truncate", e.view === "pill" ? "" : A.value ? "text-gray-900" : "text-gray-500"])
567
- }, h(R.value), 3),
568
- l[13] || (l[13] = t("svg", {
569
- xmlns: "http://www.w3.org/2000/svg",
570
- fill: "none",
571
- viewBox: "0 0 24 24",
572
- "stroke-width": "1.5",
573
- stroke: "currentColor",
574
- class: "w-4 h-4 text-gray-400 shrink-0"
575
- }, [
576
- t("path", {
577
- "stroke-linecap": "round",
578
- "stroke-linejoin": "round",
579
- d: "M19.5 8.25l-7.5 7.5-7.5-7.5"
580
- })
581
- ], -1))
582
- ], 6)
583
- ]),
584
- I(w).isOpened.value ? (s(), T(I(et), {
585
- key: 0,
586
- useModal: I(w),
587
- title: e.title || e.placeholder,
588
- size: "sm",
589
- classModal: !0,
590
- titleCenter: !0
591
- }, {
592
- default: D(() => [
593
- t("div", xt, [
594
- e.searchable ? (s(), o("div", Ct, [
595
- t("div", _t, [
596
- l[14] || (l[14] = t("svg", {
597
- xmlns: "http://www.w3.org/2000/svg",
598
- fill: "none",
599
- viewBox: "0 0 24 24",
600
- "stroke-width": "1.5",
601
- stroke: "currentColor",
602
- class: "absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
603
- }, [
604
- t("path", {
605
- "stroke-linecap": "round",
606
- "stroke-linejoin": "round",
607
- d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
608
- })
609
- ], -1)),
610
- J(t("input", {
611
- ref_key: "mobileSearchInputRef",
612
- ref: c,
613
- "onUpdate:modelValue": l[2] || (l[2] = (u) => v.value = u),
614
- type: "text",
615
- placeholder: e.searchPlaceholder,
616
- class: "w-full rounded-md border border-gray-300 py-2 pl-8 pr-3 text-sm outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
617
- onInput: te
618
- }, null, 40, $t), [
619
- [ae, v.value]
620
- ])
621
- ])
622
- ])) : f("", !0),
623
- e.createLabel ? (s(), o("div", Mt, [
624
- t("button", {
625
- class: "w-full flex items-center justify-center gap-2 py-2 text-sm text-blue-700 hover:text-blue-500",
626
- onClick: l[3] || (l[3] = (u) => ee(() => I(w).close()))
627
- }, [
628
- l[15] || (l[15] = t("svg", {
629
- xmlns: "http://www.w3.org/2000/svg",
630
- fill: "none",
631
- viewBox: "0 0 24 24",
632
- "stroke-width": "1.5",
633
- stroke: "currentColor",
634
- class: "w-4 h-4"
635
- }, [
636
- t("path", {
637
- "stroke-linecap": "round",
638
- "stroke-linejoin": "round",
639
- d: "M12 4.5v15m7.5-7.5h-15"
640
- })
641
- ], -1)),
642
- t("span", null, h(e.createLabel), 1)
643
- ])
644
- ])) : f("", !0),
645
- e.multiple ? (s(), o("div", Vt, [
646
- t("button", {
647
- class: "text-sm text-blue-600 hover:text-blue-800 transition-colors",
648
- onClick: Z
649
- }, " Обрати все "),
650
- A.value ? (s(), o("button", {
651
- key: 0,
652
- class: "text-sm text-gray-500 hover:text-gray-700 transition-colors",
653
- onClick: Q
654
- }, " Очистити ")) : f("", !0)
655
- ])) : f("", !0),
656
- e.isLoading ? (s(), o("div", Kt, l[16] || (l[16] = [
657
- t("div", { class: "animate-spin w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full" }, null, -1)
658
- ]))) : (s(), o("div", Lt, [
659
- e.allowEmpty ? (s(), o("button", {
660
- key: 0,
661
- class: x(["flex items-center gap-3 w-full px-3 py-3 text-sm text-left hover:bg-gray-50 transition-colors", A.value ? "" : "bg-gray-50 font-medium"]),
662
- role: "option",
663
- "aria-selected": !A.value,
664
- onClick: l[4] || (l[4] = (u) => z(null, () => I(w).close()))
665
- }, [
666
- A.value ? (s(), o("span", St)) : (s(), o("svg", jt, l[17] || (l[17] = [
667
- t("path", {
668
- "stroke-linecap": "round",
669
- "stroke-linejoin": "round",
670
- d: "M4.5 12.75l6 6 9-13.5"
671
- }, null, -1)
672
- ]))),
673
- t("span", null, h(e.emptyLabel ?? e.placeholder), 1)
674
- ], 10, Ot)) : f("", !0),
675
- e.groupKey ? (s(!0), o(B, { key: 1 }, E(X.value, (u) => (s(), o(B, {
676
- key: u.label
677
- }, [
678
- u.label ? (s(), o("div", At, h(u.label), 1)) : f("", !0),
679
- (s(!0), o(B, null, E(u.entries, (r) => (s(), o("button", {
680
- key: r.item[e.valueKey],
681
- class: x(["flex items-center gap-3 w-full px-3 py-3 text-sm text-left hover:bg-gray-50 transition-colors break-words", L(r.item) ? "bg-gray-50 font-medium" : ""]),
682
- role: "option",
683
- "aria-selected": L(r.item),
684
- onClick: (O) => z(r.item, () => I(w).close())
685
- }, [
686
- L(r.item) ? (s(), o("svg", It, l[18] || (l[18] = [
687
- t("path", {
688
- "stroke-linecap": "round",
689
- "stroke-linejoin": "round",
690
- d: "M4.5 12.75l6 6 9-13.5"
691
- }, null, -1)
692
- ]))) : (s(), o("span", zt)),
693
- _(e.$slots, "item", W({ ref_for: !0 }, { item: r.item }), () => [
694
- t("span", null, h(r.item[e.labelKey]), 1)
695
- ])
696
- ], 10, Bt))), 128))
697
- ], 64))), 128)) : (s(!0), o(B, { key: 2 }, E(M.value, (u) => (s(), o("button", {
698
- key: u[e.valueKey],
699
- class: x(["flex items-center gap-3 w-full px-3 py-3 text-sm text-left hover:bg-gray-50 transition-colors break-words", L(u) ? "bg-gray-50 font-medium" : ""]),
700
- role: "option",
701
- "aria-selected": L(u),
702
- onClick: (r) => z(u, () => I(w).close())
703
- }, [
704
- L(u) ? (s(), o("svg", Dt, l[19] || (l[19] = [
705
- t("path", {
706
- "stroke-linecap": "round",
707
- "stroke-linejoin": "round",
708
- d: "M4.5 12.75l6 6 9-13.5"
709
- }, null, -1)
710
- ]))) : (s(), o("span", Rt)),
711
- _(e.$slots, "item", W({ ref_for: !0 }, { item: u }), () => [
712
- t("span", null, h(u[e.labelKey]), 1)
713
- ])
714
- ], 10, Et))), 128)),
715
- M.value.length === 0 && !e.allowEmpty ? (s(), o("div", Wt, [
716
- _(e.$slots, "empty", {}, () => [
717
- l[20] || (l[20] = ie(" Nothing found "))
718
- ])
719
- ])) : f("", !0)
720
- ]))
721
- ])
722
- ]),
723
- _: 3
724
- }, 8, ["useModal", "title"])) : f("", !0)
725
- ], 64)) : (s(), T(Oe, {
726
- key: 0,
727
- stick: e.stick,
728
- onOpen: fe,
729
- onClose: he
730
- }, {
731
- button: D(({ onToggle: u, isExpanded: r }) => [
732
- _(e.$slots, "button", P(F({ onToggle: u, isExpanded: r, selectedLabel: R.value })), () => [
733
- t("button", {
734
- class: x(["inline-flex items-center justify-between gap-2 text-sm transition-colors", [
735
- e.view === "pill" ? "rounded-full bg-gray-100 px-3.5 py-1.5 hover:bg-gray-200 text-gray-700" : "rounded-lg border border-gray-300 bg-white px-3 py-2 hover:bg-gray-50 min-w-[180px]",
736
- e.view === "default" && r ? "ring-1 ring-blue-500 border-blue-500" : ""
737
- ]]),
738
- style: U(e.maxWidth ? { maxWidth: e.maxWidth } : void 0),
739
- onClick: u
740
- }, [
741
- t("span", {
742
- class: x(["truncate", e.view === "pill" ? "" : A.value ? "text-gray-900" : "text-gray-500"])
743
- }, h(R.value), 3),
744
- (s(), o("svg", {
745
- xmlns: "http://www.w3.org/2000/svg",
746
- fill: "none",
747
- viewBox: "0 0 24 24",
748
- "stroke-width": "1.5",
749
- stroke: "currentColor",
750
- class: x(["w-4 h-4 text-gray-400 transition-transform shrink-0", r ? "rotate-180" : ""])
751
- }, l[5] || (l[5] = [
752
- t("path", {
753
- "stroke-linecap": "round",
754
- "stroke-linejoin": "round",
755
- d: "M19.5 8.25l-7.5 7.5-7.5-7.5"
756
- }, null, -1)
757
- ]), 2))
758
- ], 14, st)
759
- ])
760
- ]),
761
- menu: D(({ onToggle: u }) => [
762
- t("div", {
763
- class: "min-w-[240px] w-full",
764
- onKeydown: (r) => ye(r, u)
765
- }, [
766
- e.title ? (s(), o("div", ot, h(e.title), 1)) : f("", !0),
767
- e.searchable ? (s(), o("div", nt, [
768
- t("div", rt, [
769
- l[6] || (l[6] = t("svg", {
770
- xmlns: "http://www.w3.org/2000/svg",
771
- fill: "none",
772
- viewBox: "0 0 24 24",
773
- "stroke-width": "1.5",
774
- stroke: "currentColor",
775
- class: "absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
776
- }, [
777
- t("path", {
778
- "stroke-linecap": "round",
779
- "stroke-linejoin": "round",
780
- d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
781
- })
782
- ], -1)),
783
- J(t("input", {
784
- ref_key: "searchInputRef",
785
- ref: K,
786
- "onUpdate:modelValue": l[0] || (l[0] = (r) => v.value = r),
787
- type: "text",
788
- placeholder: e.searchPlaceholder,
789
- class: "w-full rounded-md border border-gray-300 py-1.5 pl-8 pr-3 text-sm outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500",
790
- onInput: te
791
- }, null, 40, at), [
792
- [ae, v.value]
793
- ])
794
- ])
795
- ])) : f("", !0),
796
- e.createLabel ? (s(), o("div", it, [
797
- t("button", {
798
- class: "flex items-center gap-2 w-full px-3 py-2 text-sm text-blue-700 hover:bg-gray-50 transition-colors",
799
- onClick: (r) => ee(u)
800
- }, [
801
- l[7] || (l[7] = t("svg", {
802
- xmlns: "http://www.w3.org/2000/svg",
803
- fill: "none",
804
- viewBox: "0 0 24 24",
805
- "stroke-width": "1.5",
806
- stroke: "currentColor",
807
- class: "w-4 h-4"
808
- }, [
809
- t("path", {
810
- "stroke-linecap": "round",
811
- "stroke-linejoin": "round",
812
- d: "M12 4.5v15m7.5-7.5h-15"
813
- })
814
- ], -1)),
815
- t("span", null, h(e.createLabel), 1)
816
- ], 8, ut)
817
- ])) : f("", !0),
818
- e.multiple ? (s(), o("div", dt, [
819
- t("button", {
820
- class: "text-xs text-blue-600 hover:text-blue-800 transition-colors",
821
- onClick: Z
822
- }, " Обрати все "),
823
- A.value ? (s(), o("button", {
824
- key: 0,
825
- class: "text-xs text-gray-500 hover:text-gray-700 transition-colors",
826
- onClick: Q
827
- }, " Очистити ")) : f("", !0)
828
- ])) : f("", !0),
829
- e.isLoading ? (s(), o("div", ct, l[8] || (l[8] = [
830
- t("svg", {
831
- class: "animate-spin h-5 w-5 text-gray-400",
832
- xmlns: "http://www.w3.org/2000/svg",
833
- fill: "none",
834
- viewBox: "0 0 24 24"
835
- }, [
836
- t("circle", {
837
- class: "opacity-25",
838
- cx: "12",
839
- cy: "12",
840
- r: "10",
841
- stroke: "currentColor",
842
- "stroke-width": "4"
843
- }),
844
- t("path", {
845
- class: "opacity-75",
846
- fill: "currentColor",
847
- d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
848
- })
849
- ], -1)
850
- ]))) : (s(), o("div", {
851
- key: 5,
852
- ref_key: "listRef",
853
- ref: $,
854
- class: "max-h-[300px] overflow-y-auto",
855
- role: "listbox"
856
- }, [
857
- e.allowEmpty ? (s(), o("button", {
858
- key: 0,
859
- ref: (r) => i(r, 0),
860
- class: x(["flex items-center gap-2 w-full px-3 py-2 text-sm text-left transition-colors", [
861
- A.value ? "hover:bg-gray-50" : "bg-gray-100 font-medium",
862
- d.value === 0 ? "bg-gray-50" : ""
863
- ]]),
864
- role: "option",
865
- "aria-selected": !A.value,
866
- onClick: (r) => z(null, u),
867
- onMouseenter: l[1] || (l[1] = (r) => d.value = 0)
868
- }, [
869
- A.value ? (s(), o("span", mt)) : (s(), o("svg", vt, l[9] || (l[9] = [
870
- t("path", {
871
- "stroke-linecap": "round",
872
- "stroke-linejoin": "round",
873
- d: "M4.5 12.75l6 6 9-13.5"
874
- }, null, -1)
875
- ]))),
876
- t("span", null, h(e.emptyLabel ?? e.placeholder), 1)
877
- ], 42, pt)) : f("", !0),
878
- e.groupKey ? (s(!0), o(B, { key: 1 }, E(X.value, (r, O) => (s(), o(B, {
879
- key: r.label
880
- }, [
881
- r.label ? (s(), o("div", {
882
- key: 0,
883
- class: x(["px-3 pt-2 pb-1 text-xs font-semibold text-gray-500 uppercase tracking-wide", O > 0 ? "border-t border-gray-100 mt-1" : ""])
884
- }, h(r.label), 3)) : f("", !0),
885
- (s(!0), o(B, null, E(r.entries, (g) => (s(), o("button", {
886
- key: g.item[e.valueKey],
887
- ref_for: !0,
888
- ref: (q) => i(q, g.flatIndex),
889
- class: x(["flex items-center gap-2 w-full px-3 py-2 text-sm text-left transition-colors break-words", [
890
- L(g.item) ? "bg-gray-100 font-medium" : "hover:bg-gray-50",
891
- d.value === g.flatIndex ? "bg-gray-50" : ""
892
- ]]),
893
- role: "option",
894
- "aria-selected": L(g.item),
895
- onClick: (q) => z(g.item, u),
896
- onMouseenter: (q) => d.value = g.flatIndex
897
- }, [
898
- L(g.item) ? (s(), o("svg", ht, l[10] || (l[10] = [
899
- t("path", {
900
- "stroke-linecap": "round",
901
- "stroke-linejoin": "round",
902
- d: "M4.5 12.75l6 6 9-13.5"
903
- }, null, -1)
904
- ]))) : (s(), o("span", yt)),
905
- _(e.$slots, "item", W({ ref_for: !0 }, { item: g.item }), () => [
906
- t("span", null, h(g.item[e.labelKey]), 1)
907
- ])
908
- ], 42, ft))), 128))
909
- ], 64))), 128)) : (s(!0), o(B, { key: 2 }, E(M.value, (r, O) => (s(), o("button", {
910
- key: r[e.valueKey],
911
- ref_for: !0,
912
- ref: (g) => i(g, k.value + O),
913
- class: x(["flex items-center gap-2 w-full px-3 py-2 text-sm text-left transition-colors break-words", [
914
- L(r) ? "bg-gray-100 font-medium" : "hover:bg-gray-50",
915
- d.value === k.value + O ? "bg-gray-50" : ""
916
- ]]),
917
- role: "option",
918
- "aria-selected": L(r),
919
- onClick: (g) => z(r, u),
920
- onMouseenter: (g) => d.value = k.value + O
921
- }, [
922
- L(r) ? (s(), o("svg", gt, l[11] || (l[11] = [
923
- t("path", {
924
- "stroke-linecap": "round",
925
- "stroke-linejoin": "round",
926
- d: "M4.5 12.75l6 6 9-13.5"
927
- }, null, -1)
928
- ]))) : (s(), o("span", bt)),
929
- _(e.$slots, "item", W({ ref_for: !0 }, { item: r }), () => [
930
- t("span", null, h(r[e.labelKey]), 1)
931
- ])
932
- ], 42, wt))), 128)),
933
- M.value.length === 0 && !e.allowEmpty ? (s(), o("div", kt, [
934
- _(e.$slots, "empty", {}, () => [
935
- l[12] || (l[12] = ie(" Nothing found "))
936
- ])
937
- ])) : f("", !0)
938
- ], 512))
939
- ], 40, lt)
940
- ]),
941
- _: 3
942
- }, 8, ["stick"]));
943
- }
944
- });
945
- export {
946
- et as O,
947
- Oe as _,
948
- Nt as a,
949
- qt as b,
950
- Gt as c,
951
- Je as m,
952
- tt as u
953
- };