@scalar/components 0.14.32 → 0.14.34

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 (54) hide show
  1. package/dist/components/ScalarButton/ScalarButton.vue.js +37 -40
  2. package/dist/components/ScalarCodeBlock/ScalarCodeBlock.vue3.js +1 -1
  3. package/dist/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue.js +1 -1
  4. package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue.js +1 -1
  5. package/dist/components/ScalarCombobox/ScalarComboboxMultiselect.vue.js +46 -49
  6. package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.js +144 -160
  7. package/dist/components/ScalarCombobox/ScalarComboboxPopover.vue.js +26 -27
  8. package/dist/components/ScalarCombobox/types.js +6 -6
  9. package/dist/components/ScalarDropdown/ScalarDropdownButton.vue.js +1 -1
  10. package/dist/components/ScalarDropdown/ScalarDropdownItem.vue.js +1 -1
  11. package/dist/components/ScalarErrorBoundary/ScalarErrorBoundary.vue.js +11 -14
  12. package/dist/components/ScalarFileUpload/ScalarFileUpload.vue.js +86 -91
  13. package/dist/components/ScalarFloating/ScalarFloating.vue.d.ts.map +1 -1
  14. package/dist/components/ScalarFloating/ScalarFloating.vue.js +22 -23
  15. package/dist/components/ScalarFloating/useResizeWithTarget.js +12 -13
  16. package/dist/components/ScalarIcon/ScalarIcon.vue.js +1 -1
  17. package/dist/components/ScalarLoading/ScalarLoading.vue.js +1 -1
  18. package/dist/components/ScalarMarkdown/ScalarMarkdown.vue.js +20 -21
  19. package/dist/components/ScalarMarkdown/ScalarMarkdown.vue3.js +1 -1
  20. package/dist/components/ScalarMarkdown/ScalarMarkdownSummary.vue.js +22 -26
  21. package/dist/components/ScalarMarkdown/ScalarMarkdownSummary.vue3.js +1 -1
  22. package/dist/components/ScalarMenu/ScalarMenuLink.vue.d.ts.map +1 -1
  23. package/dist/components/ScalarMenu/ScalarMenuLink.vue.js +6 -3
  24. package/dist/components/ScalarMenu/ScalarMenuProducts.vue.js +45 -48
  25. package/dist/components/ScalarMenu/ScalarMenuTeamPicker.vue.js +20 -23
  26. package/dist/components/ScalarModal/ScalarModal.vue.js +1 -1
  27. package/dist/components/ScalarSidebar/ScalarSidebarIndent.vue.js +1 -1
  28. package/dist/components/ScalarSidebar/ScalarSidebarItems.vue3.js +1 -1
  29. package/dist/components/ScalarSidebar/ScalarSidebarSearchInput.vue.js +16 -19
  30. package/dist/components/ScalarTextArea/ScalarTextArea.vue.d.ts.map +1 -1
  31. package/dist/components/ScalarTextArea/ScalarTextArea.vue.js +19 -22
  32. package/dist/components/ScalarTextInput/ScalarTextInput.vue.js +25 -29
  33. package/dist/components/ScalarTooltip/ScalarHotkeyTooltip.vue.js +12 -15
  34. package/dist/components/ScalarTooltip/ScalarTooltip.vue.js +20 -23
  35. package/dist/components/ScalarTooltip/ScalarTooltip.vue3.js +1 -1
  36. package/dist/components/ScalarTooltip/useTooltip.js +24 -31
  37. package/dist/index.d.ts +1 -1
  38. package/dist/index.js +6 -6
  39. package/dist/style.css +1 -1
  40. package/package.json +13 -13
  41. package/dist/components/ScalarCodeBlock/ScalarCodeBlock.vue2.js +0 -4
  42. package/dist/components/ScalarCodeBlock/ScalarCodeBlockCopy.vue3.js +0 -4
  43. package/dist/components/ScalarColorModeToggle/ScalarColorModeToggleIcon.vue3.js +0 -4
  44. package/dist/components/ScalarDropdown/ScalarDropdownButton.vue3.js +0 -4
  45. package/dist/components/ScalarDropdown/ScalarDropdownItem.vue3.js +0 -4
  46. package/dist/components/ScalarIcon/ScalarIcon.vue3.js +0 -4
  47. package/dist/components/ScalarLoading/ScalarLoading.vue3.js +0 -4
  48. package/dist/components/ScalarMarkdown/ScalarMarkdown.vue2.js +0 -4
  49. package/dist/components/ScalarMarkdown/ScalarMarkdownSummary.vue2.js +0 -4
  50. package/dist/components/ScalarModal/ScalarModal.vue3.js +0 -4
  51. package/dist/components/ScalarSidebar/ScalarSidebarIndent.vue3.js +0 -4
  52. package/dist/components/ScalarSidebar/ScalarSidebarItems.vue2.js +0 -4
  53. package/dist/components/ScalarTooltip/ScalarTooltip.vue2.js +0 -4
  54. package/dist/style.css.js +0 -4
@@ -1,11 +1,11 @@
1
- import { defineComponent as f, createElementBlock as a, openBlock as i, mergeProps as m, unref as o, createCommentVNode as r, renderSlot as l, normalizeClass as u, createVNode as g } from "vue";
2
- import { useBindCx as b } from "@scalar/use-hooks/useBindCx";
3
- import { variants as v } from "./variants.js";
4
- import y from "../ScalarLoading/ScalarLoading.vue.js";
5
- const h = ["aria-disabled", "type"], c = {
1
+ import { defineComponent as t, createElementBlock as a, openBlock as i, mergeProps as r, unref as o, createCommentVNode as s, renderSlot as l, normalizeClass as d, createVNode as u } from "vue";
2
+ import { useBindCx as p } from "@scalar/use-hooks/useBindCx";
3
+ import { variants as f } from "./variants.js";
4
+ import m from "../ScalarLoading/ScalarLoading.vue.js";
5
+ const g = ["aria-disabled", "type"], b = {
6
6
  key: 3,
7
7
  class: "centered"
8
- }, $ = /* @__PURE__ */ f({
8
+ }, z = /* @__PURE__ */ t({
9
9
  inheritAttrs: !1,
10
10
  __name: "ScalarButton",
11
11
  props: {
@@ -16,41 +16,38 @@ const h = ["aria-disabled", "type"], c = {
16
16
  variant: { default: "solid" },
17
17
  type: { default: "button" }
18
18
  },
19
- setup(k) {
20
- const { cx: p } = b();
21
- return (e, B) => {
22
- var s, d, n, t;
23
- return i(), a("button", m(
24
- {
25
- "aria-disabled": e.disabled || void 0,
26
- type: e.type
27
- },
28
- o(p)(o(v)({ fullWidth: e.fullWidth, disabled: e.disabled, size: e.size, variant: e.variant }), {
29
- relative: (s = e.loading) == null ? void 0 : s.isLoading
30
- })
31
- ), [
32
- e.$slots.icon ? (i(), a("div", {
33
- key: 0,
34
- class: u(["mr-2 h-4 w-4", { invisible: (d = e.loading) == null ? void 0 : d.isLoading }])
35
- }, [
36
- l(e.$slots, "icon")
37
- ], 2)) : r("", !0),
38
- e.loading ? (i(), a("span", {
39
- key: 1,
40
- class: u({ invisible: (n = e.loading) == null ? void 0 : n.isLoading })
41
- }, [
42
- l(e.$slots, "default")
43
- ], 2)) : l(e.$slots, "default", { key: 2 }),
44
- (t = e.loading) != null && t.isLoading ? (i(), a("div", c, [
45
- g(o(y), {
46
- loadingState: e.loading,
47
- size: "xl"
48
- }, null, 8, ["loadingState"])
49
- ])) : r("", !0)
50
- ], 16, h);
51
- };
19
+ setup(v) {
20
+ const { cx: n } = p();
21
+ return (e, y) => (i(), a("button", r(
22
+ {
23
+ "aria-disabled": e.disabled || void 0,
24
+ type: e.type
25
+ },
26
+ o(n)(o(f)({ fullWidth: e.fullWidth, disabled: e.disabled, size: e.size, variant: e.variant }), {
27
+ relative: e.loading?.isLoading
28
+ })
29
+ ), [
30
+ e.$slots.icon ? (i(), a("div", {
31
+ key: 0,
32
+ class: d(["mr-2 h-4 w-4", { invisible: e.loading?.isLoading }])
33
+ }, [
34
+ l(e.$slots, "icon")
35
+ ], 2)) : s("", !0),
36
+ e.loading ? (i(), a("span", {
37
+ key: 1,
38
+ class: d({ invisible: e.loading?.isLoading })
39
+ }, [
40
+ l(e.$slots, "default")
41
+ ], 2)) : l(e.$slots, "default", { key: 2 }),
42
+ e.loading?.isLoading ? (i(), a("div", b, [
43
+ u(o(m), {
44
+ loadingState: e.loading,
45
+ size: "xl"
46
+ }, null, 8, ["loadingState"])
47
+ ])) : s("", !0)
48
+ ], 16, g));
52
49
  }
53
50
  });
54
51
  export {
55
- $ as default
52
+ z as default
56
53
  };
@@ -1,5 +1,5 @@
1
1
  import o from "./ScalarCodeBlock.vue.js";
2
- import "./ScalarCodeBlock.vue2.js";
2
+ /* empty css */
3
3
  export {
4
4
  o as default
5
5
  };
@@ -1,5 +1,5 @@
1
1
  import o from "./ScalarCodeBlockCopy.vue2.js";
2
- import "./ScalarCodeBlockCopy.vue3.js";
2
+ /* empty css */
3
3
  import a from "../../_virtual/_plugin-vue_export-helper.js";
4
4
  const c = /* @__PURE__ */ a(o, [["__scopeId", "data-v-0295860a"]]);
5
5
  export {
@@ -1,5 +1,5 @@
1
1
  import o from "./ScalarColorModeToggleIcon.vue2.js";
2
- import "./ScalarColorModeToggleIcon.vue3.js";
2
+ /* empty css */
3
3
  import r from "../../_virtual/_plugin-vue_export-helper.js";
4
4
  const c = /* @__PURE__ */ r(o, [["__scopeId", "data-v-60be8692"]]);
5
5
  export {
@@ -1,9 +1,9 @@
1
- import { defineComponent as y, mergeModels as i, useModel as c, useSlots as k, ref as V, createBlock as f, openBlock as u, withCtx as t, createCommentVNode as w, createSlots as z, renderSlot as r, normalizeProps as s, guardReactiveProps as d } from "vue";
2
- import S from "./ScalarComboboxOptions.vue.js";
3
- import B from "./ScalarComboboxPopover.vue.js";
4
- const h = /* @__PURE__ */ y({
1
+ import { defineComponent as b, mergeModels as m, useModel as y, useSlots as c, ref as k, createBlock as i, openBlock as f, withCtx as t, createCommentVNode as V, createSlots as w, renderSlot as r, normalizeProps as s, guardReactiveProps as d } from "vue";
2
+ import z from "./ScalarComboboxOptions.vue.js";
3
+ import S from "./ScalarComboboxPopover.vue.js";
4
+ const P = /* @__PURE__ */ b({
5
5
  __name: "ScalarComboboxMultiselect",
6
- props: /* @__PURE__ */ i({
6
+ props: /* @__PURE__ */ m({
7
7
  options: {},
8
8
  placeholder: {},
9
9
  placement: {},
@@ -16,12 +16,12 @@ const h = /* @__PURE__ */ y({
16
16
  modelValue: { default: [] },
17
17
  modelModifiers: {}
18
18
  }),
19
- emits: /* @__PURE__ */ i(["add"], ["update:modelValue"]),
20
- setup(g, { expose: v, emit: $ }) {
21
- const n = c(g, "modelValue"), b = $;
22
- k();
23
- const p = V(null);
24
- return v({ comboboxPopoverRef: p }), (e, l) => (u(), f(B, {
19
+ emits: /* @__PURE__ */ m(["add"], ["update:modelValue"]),
20
+ setup(u, { expose: g, emit: v }) {
21
+ const n = y(u, "modelValue"), $ = v;
22
+ c();
23
+ const p = k(null);
24
+ return g({ comboboxPopoverRef: p }), (e, l) => (f(), i(S, {
25
25
  ref_key: "comboboxPopoverRef",
26
26
  ref: p,
27
27
  middleware: e.middleware,
@@ -34,47 +34,44 @@ const h = /* @__PURE__ */ y({
34
34
  default: t(({ open: a }) => [
35
35
  r(e.$slots, "default", { open: a })
36
36
  ]),
37
- popover: t(({ open: a }) => {
38
- var m;
39
- return [
40
- (m = e.options) != null && m.length ? (u(), f(S, {
41
- key: 0,
42
- modelValue: n.value,
43
- "onUpdate:modelValue": l[0] || (l[0] = (o) => n.value = o),
44
- multiselect: "",
45
- open: a,
46
- options: e.options,
47
- placeholder: e.placeholder,
48
- onAdd: l[1] || (l[1] = (o) => b("add"))
49
- }, z({ _: 2 }, [
50
- e.$slots.option ? {
51
- name: "option",
52
- fn: t((o) => [
53
- r(e.$slots, "option", s(d(o)))
54
- ]),
55
- key: "0"
56
- } : void 0,
57
- e.$slots.group ? {
58
- name: "group",
59
- fn: t((o) => [
60
- r(e.$slots, "group", s(d(o)))
61
- ]),
62
- key: "1"
63
- } : void 0,
64
- e.$slots.add ? {
65
- name: "add",
66
- fn: t((o) => [
67
- r(e.$slots, "add", s(d(o)))
68
- ]),
69
- key: "2"
70
- } : void 0
71
- ]), 1032, ["modelValue", "open", "options", "placeholder"])) : w("", !0)
72
- ];
73
- }),
37
+ popover: t(({ open: a }) => [
38
+ e.options?.length ? (f(), i(z, {
39
+ key: 0,
40
+ modelValue: n.value,
41
+ "onUpdate:modelValue": l[0] || (l[0] = (o) => n.value = o),
42
+ multiselect: "",
43
+ open: a,
44
+ options: e.options,
45
+ placeholder: e.placeholder,
46
+ onAdd: l[1] || (l[1] = (o) => $("add"))
47
+ }, w({ _: 2 }, [
48
+ e.$slots.option ? {
49
+ name: "option",
50
+ fn: t((o) => [
51
+ r(e.$slots, "option", s(d(o)))
52
+ ]),
53
+ key: "0"
54
+ } : void 0,
55
+ e.$slots.group ? {
56
+ name: "group",
57
+ fn: t((o) => [
58
+ r(e.$slots, "group", s(d(o)))
59
+ ]),
60
+ key: "1"
61
+ } : void 0,
62
+ e.$slots.add ? {
63
+ name: "add",
64
+ fn: t((o) => [
65
+ r(e.$slots, "add", s(d(o)))
66
+ ]),
67
+ key: "2"
68
+ } : void 0
69
+ ]), 1032, ["modelValue", "open", "options", "placeholder"])) : V("", !0)
70
+ ]),
74
71
  _: 3
75
72
  }, 8, ["middleware", "offset", "placement", "resize", "target", "teleport"]));
76
73
  }
77
74
  });
78
75
  export {
79
- h as default
76
+ P as default
80
77
  };
@@ -1,13 +1,13 @@
1
- import { defineComponent as Z, mergeModels as G, useModel as _, useSlots as ee, useId as K, computed as x, ref as h, onMounted as q, watch as te, createElementBlock as m, openBlock as a, Fragment as f, createElementVNode as g, withDirectives as F, createVNode as V, unref as C, withKeys as S, withModifiers as w, vModelText as le, createBlock as B, createCommentVNode as P, renderList as U, withCtx as M, renderSlot as N, toDisplayString as j, createTextVNode as oe, vShow as ne } from "vue";
2
- import { ScalarIconMagnifyingGlass as ie, ScalarIconPlus as ae } from "@scalar/icons";
3
- import H from "./ScalarComboboxOption.vue.js";
4
- import se from "./ScalarComboboxOptionGroup.vue.js";
5
- import { isGroups as J } from "./types.js";
6
- import de from "../ScalarListbox/ScalarListboxCheckbox.vue.js";
7
- const ue = { class: "relative flex" }, re = ["aria-activedescendant", "placeholder"], ve = ["aria-multiselectable"], ce = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, we = /* @__PURE__ */ Z({
1
+ import { defineComponent as W, mergeModels as O, useModel as X, useSlots as Y, useId as z, computed as w, ref as M, onMounted as D, watch as Z, createElementBlock as c, openBlock as s, Fragment as m, createElementVNode as k, withDirectives as G, createVNode as I, unref as h, withKeys as V, withModifiers as y, vModelText as _, createBlock as C, createCommentVNode as K, renderList as q, withCtx as x, renderSlot as S, toDisplayString as F, createTextVNode as ee, vShow as te } from "vue";
2
+ import { ScalarIconMagnifyingGlass as le, ScalarIconPlus as oe } from "@scalar/icons";
3
+ import P from "./ScalarComboboxOption.vue.js";
4
+ import ne from "./ScalarComboboxOptionGroup.vue.js";
5
+ import { isGroups as U } from "./types.js";
6
+ import ie from "../ScalarListbox/ScalarListboxCheckbox.vue.js";
7
+ const ae = { class: "relative flex" }, se = ["aria-activedescendant", "placeholder"], de = ["aria-multiselectable"], ue = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, be = /* @__PURE__ */ W({
8
8
  inheritAttrs: !1,
9
9
  __name: "ScalarComboboxOptions",
10
- props: /* @__PURE__ */ G({
10
+ props: /* @__PURE__ */ O({
11
11
  options: {},
12
12
  placeholder: {},
13
13
  multiselect: { type: Boolean }
@@ -15,181 +15,165 @@ const ue = { class: "relative flex" }, re = ["aria-activedescendant", "placehold
15
15
  modelValue: { default: [] },
16
16
  modelModifiers: {}
17
17
  }),
18
- emits: /* @__PURE__ */ G(["add"], ["update:modelValue"]),
19
- setup(A, { emit: Q }) {
20
- var D;
21
- const s = A, i = _(A, "modelValue"), R = Q, I = ee(), k = `scalar-combobox-items-${K()}`, p = { id: `${K()}-add`, label: "Add a new option" };
22
- function b(t) {
23
- return `${k}-${t.id}`;
18
+ emits: /* @__PURE__ */ O(["add"], ["update:modelValue"]),
19
+ setup(B, { emit: j }) {
20
+ const d = B, i = X(B, "modelValue"), H = j, g = Y(), $ = `scalar-combobox-items-${z()}`, f = { id: `${z()}-add`, label: "Add a new option" };
21
+ function p(t) {
22
+ return `${$}-${t.id}`;
24
23
  }
25
- const v = x(
26
- () => J(s.options) ? s.options.flatMap((t) => t.options) : s.options
27
- ), W = x(
28
- () => J(s.options) ? s.options : (
24
+ const r = w(
25
+ () => U(d.options) ? d.options.flatMap((t) => t.options) : d.options
26
+ ), J = w(
27
+ () => U(d.options) ? d.options : (
29
28
  /*
30
29
  We know G is an unextended OptionGroup<O> here because of the
31
30
  structure of the component props so we can cast it to G
32
31
  */
33
- [{ label: "", options: s.options }]
32
+ [{ label: "", options: d.options }]
34
33
  )
35
34
  // G is OptionGroup<O>
36
- ), d = h(""), o = h(((D = i.value) == null ? void 0 : D[0]) ?? v.value[0]);
37
- q(async () => {
38
- var e;
39
- d.value = "", o.value = ((e = i.value) == null ? void 0 : e[0]) ?? v.value[0], i.value[0] && setTimeout(() => {
40
- var l;
41
- const c = i.value[0];
42
- c && ((l = document == null ? void 0 : document.getElementById(b(c))) == null || l.scrollIntoView({ block: "nearest" }));
35
+ ), u = M(""), l = M(i.value?.[0] ?? r.value[0]);
36
+ D(async () => {
37
+ u.value = "", l.value = i.value?.[0] ?? r.value[0], i.value[0] && setTimeout(() => {
38
+ const e = i.value[0];
39
+ e && document?.getElementById(p(e))?.scrollIntoView({ block: "nearest" });
43
40
  }, 10);
44
- }), te(
45
- () => d.value,
46
- () => o.value = E.value[0]
41
+ }), Z(
42
+ () => u.value,
43
+ () => l.value = N.value[0]
47
44
  );
48
- const y = x(
49
- () => d.value === "" ? v.value : v.value.filter((t) => t.label.toLowerCase().includes(d.value.toLowerCase()))
50
- ), E = x(
51
- () => I.add ? [...y.value, p] : y.value
45
+ const b = w(
46
+ () => u.value === "" ? r.value : r.value.filter((t) => t.label.toLowerCase().includes(u.value.toLowerCase()))
47
+ ), N = w(
48
+ () => g.add ? [...b.value, f] : b.value
52
49
  );
53
- function T(t) {
50
+ function A(t) {
54
51
  if (t) {
55
- if (t.id === p.id) {
56
- O();
52
+ if (t.id === f.id) {
53
+ T();
57
54
  return;
58
55
  }
59
- s.multiselect ? i.value.some((e) => e.id === t.id) ? i.value = i.value.filter((e) => e.id !== t.id) : i.value = [
56
+ d.multiselect ? i.value.some((e) => e.id === t.id) ? i.value = i.value.filter((e) => e.id !== t.id) : i.value = [
60
57
  ...i.value,
61
- v.value.find((e) => e.id === t.id)
62
- ] : i.value = [v.value.find((e) => e.id === t.id)];
58
+ r.value.find((e) => e.id === t.id)
59
+ ] : i.value = [r.value.find((e) => e.id === t.id)];
63
60
  }
64
61
  }
65
- function L(t) {
66
- var $;
67
- const e = E.value, l = e.findIndex((n) => {
68
- var u;
69
- return n.id === ((u = o.value) == null ? void 0 : u.id);
70
- }) + t;
71
- l < 0 || l > e.length - 1 || (o.value = e[l], o.value && (($ = document == null ? void 0 : document.getElementById(b(o.value))) == null || $.scrollIntoView({
62
+ function E(t) {
63
+ const e = N.value, v = e.findIndex((n) => n.id === l.value?.id) + t;
64
+ v < 0 || v > e.length - 1 || (l.value = e[v], l.value && document?.getElementById(p(l.value))?.scrollIntoView({
72
65
  behavior: "smooth",
73
66
  block: "nearest"
74
- })));
67
+ }));
75
68
  }
76
- function O() {
77
- R("add"), d.value = "";
69
+ function T() {
70
+ H("add"), u.value = "";
78
71
  }
79
- const z = h(null);
80
- return q(() => setTimeout(() => {
81
- var t;
82
- return (t = z.value) == null ? void 0 : t.focus();
83
- }, 0)), (t, e) => {
84
- var c;
85
- return a(), m(f, null, [
86
- g("div", ue, [
87
- V(C(ie), { class: "pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-c-3 size-4" }),
88
- F(g("input", {
89
- "onUpdate:modelValue": e[0] || (e[0] = (l) => d.value = l),
90
- ref_key: "input",
91
- ref: z,
92
- "aria-activedescendant": o.value ? b(o.value) : void 0,
93
- "aria-autocomplete": "list",
94
- "aria-controls": k,
95
- class: "min-w-0 flex-1 rounded border-0 py-2.5 pl-8 pr-3 leading-none text-c-1 -outline-offset-1",
96
- "data-1p-ignore": "",
97
- placeholder: t.placeholder,
98
- role: "combobox",
99
- tabindex: "0",
100
- type: "text",
101
- onKeydown: [
102
- e[1] || (e[1] = S(w((l) => L(1), ["prevent"]), ["down"])),
103
- e[2] || (e[2] = S(w((l) => o.value && T(o.value), ["prevent"]), ["enter"])),
104
- e[3] || (e[3] = S(w((l) => L(-1), ["prevent"]), ["up"]))
105
- ]
106
- }, null, 40, re), [
107
- [le, d.value]
108
- ])
109
- ]),
110
- F(g("ul", {
111
- id: k,
112
- "aria-multiselectable": t.multiselect,
113
- class: "border-t p-0.75 custom-scroll overscroll-contain flex-1 min-h-0",
114
- role: "listbox",
115
- tabindex: "-1"
116
- }, [
117
- (a(!0), m(f, null, U(W.value, (l, $) => (a(), B(se, {
118
- id: `${k}-group-${$}`,
119
- key: $,
120
- hidden: (
121
- // Only show the group label if there are some results
122
- !l.options.some((n) => y.value.some((u) => u.id === n.id)) || // And it has a label
123
- !l.label
124
- )
125
- }, {
126
- label: M(() => [
127
- t.$slots.group ? N(t.$slots, "group", {
72
+ const L = M(null);
73
+ return D(() => setTimeout(() => L.value?.focus(), 0)), (t, e) => (s(), c(m, null, [
74
+ k("div", ae, [
75
+ I(h(le), { class: "pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-c-3 size-4" }),
76
+ G(k("input", {
77
+ "onUpdate:modelValue": e[0] || (e[0] = (o) => u.value = o),
78
+ ref_key: "input",
79
+ ref: L,
80
+ "aria-activedescendant": l.value ? p(l.value) : void 0,
81
+ "aria-autocomplete": "list",
82
+ "aria-controls": $,
83
+ class: "min-w-0 flex-1 rounded border-0 py-2.5 pl-8 pr-3 leading-none text-c-1 -outline-offset-1",
84
+ "data-1p-ignore": "",
85
+ placeholder: t.placeholder,
86
+ role: "combobox",
87
+ tabindex: "0",
88
+ type: "text",
89
+ onKeydown: [
90
+ e[1] || (e[1] = V(y((o) => E(1), ["prevent"]), ["down"])),
91
+ e[2] || (e[2] = V(y((o) => l.value && A(l.value), ["prevent"]), ["enter"])),
92
+ e[3] || (e[3] = V(y((o) => E(-1), ["prevent"]), ["up"]))
93
+ ]
94
+ }, null, 40, se), [
95
+ [_, u.value]
96
+ ])
97
+ ]),
98
+ G(k("ul", {
99
+ id: $,
100
+ "aria-multiselectable": t.multiselect,
101
+ class: "border-t p-0.75 custom-scroll overscroll-contain flex-1 min-h-0",
102
+ role: "listbox",
103
+ tabindex: "-1"
104
+ }, [
105
+ (s(!0), c(m, null, q(J.value, (o, v) => (s(), C(ne, {
106
+ id: `${$}-group-${v}`,
107
+ key: v,
108
+ hidden: (
109
+ // Only show the group label if there are some results
110
+ !o.options.some((n) => b.value.some((a) => a.id === n.id)) || // And it has a label
111
+ !o.label
112
+ )
113
+ }, {
114
+ label: x(() => [
115
+ t.$slots.group ? S(t.$slots, "group", {
116
+ key: 0,
117
+ group: o
118
+ }) : (s(), c(m, { key: 1 }, [
119
+ ee(F(o.label), 1)
120
+ ], 64))
121
+ ]),
122
+ default: x(() => [
123
+ (s(!0), c(m, null, q(b.value, (n) => (s(), c(m, {
124
+ key: n.id
125
+ }, [
126
+ o.options.some((a) => a.id === n.id) ? (s(), C(P, {
128
127
  key: 0,
129
- group: l
130
- }) : (a(), m(f, { key: 1 }, [
131
- oe(j(l.label), 1)
132
- ], 64))
133
- ]),
134
- default: M(() => [
135
- (a(!0), m(f, null, U(y.value, (n) => {
136
- var u;
137
- return a(), m(f, {
138
- key: n.id
139
- }, [
140
- l.options.some((r) => r.id === n.id) ? (a(), B(H, {
128
+ id: p(n),
129
+ active: l.value?.id === n.id,
130
+ selected: i.value.some((a) => a.id === n.id),
131
+ onClick: (a) => A(n),
132
+ onMousedown: e[4] || (e[4] = y(() => {
133
+ }, ["prevent"])),
134
+ onMouseenter: (a) => l.value = n
135
+ }, {
136
+ default: x(({ active: a, selected: Q }) => [
137
+ t.$slots.option ? S(t.$slots, "option", {
141
138
  key: 0,
142
- id: b(n),
143
- active: ((u = o.value) == null ? void 0 : u.id) === n.id,
144
- selected: i.value.some((r) => r.id === n.id),
145
- onClick: (r) => T(n),
146
- onMousedown: e[4] || (e[4] = w(() => {
147
- }, ["prevent"])),
148
- onMouseenter: (r) => o.value = n
149
- }, {
150
- default: M(({ active: r, selected: X }) => [
151
- t.$slots.option ? N(t.$slots, "option", {
152
- key: 0,
153
- option: n,
154
- active: r,
155
- selected: X
156
- }) : (a(), m(f, { key: 1 }, [
157
- V(C(de), {
158
- selected: i.value.some((Y) => Y.id === n.id),
159
- multiselect: t.multiselect
160
- }, null, 8, ["selected", "multiselect"]),
161
- g("span", ce, j(n.label), 1)
162
- ], 64))
163
- ]),
164
- _: 2
165
- }, 1032, ["id", "active", "selected", "onClick", "onMouseenter"])) : P("", !0)
166
- ], 64);
167
- }), 128))
168
- ]),
169
- _: 2
170
- }, 1032, ["id", "hidden"]))), 128)),
171
- I.add ? (a(), B(H, {
172
- key: 0,
173
- id: b(p),
174
- active: ((c = o.value) == null ? void 0 : c.id) === p.id,
175
- onClick: O,
176
- onMousedown: e[5] || (e[5] = w(() => {
177
- }, ["prevent"])),
178
- onMouseenter: e[6] || (e[6] = (l) => o.value = p)
179
- }, {
180
- default: M(({ active: l }) => [
181
- V(C(ae), { class: "size-4 p-px" }),
182
- N(t.$slots, "add", { active: l })
183
- ]),
184
- _: 3
185
- }, 8, ["id", "active"])) : P("", !0)
186
- ], 8, ve), [
187
- [ne, y.value.length || I.add]
188
- ])
189
- ], 64);
190
- };
139
+ option: n,
140
+ active: a,
141
+ selected: Q
142
+ }) : (s(), c(m, { key: 1 }, [
143
+ I(h(ie), {
144
+ selected: i.value.some((R) => R.id === n.id),
145
+ multiselect: t.multiselect
146
+ }, null, 8, ["selected", "multiselect"]),
147
+ k("span", ue, F(n.label), 1)
148
+ ], 64))
149
+ ]),
150
+ _: 2
151
+ }, 1032, ["id", "active", "selected", "onClick", "onMouseenter"])) : K("", !0)
152
+ ], 64))), 128))
153
+ ]),
154
+ _: 2
155
+ }, 1032, ["id", "hidden"]))), 128)),
156
+ g.add ? (s(), C(P, {
157
+ key: 0,
158
+ id: p(f),
159
+ active: l.value?.id === f.id,
160
+ onClick: T,
161
+ onMousedown: e[5] || (e[5] = y(() => {
162
+ }, ["prevent"])),
163
+ onMouseenter: e[6] || (e[6] = (o) => l.value = f)
164
+ }, {
165
+ default: x(({ active: o }) => [
166
+ I(h(oe), { class: "size-4 p-px" }),
167
+ S(t.$slots, "add", { active: o })
168
+ ]),
169
+ _: 3
170
+ }, 8, ["id", "active"])) : K("", !0)
171
+ ], 8, de), [
172
+ [te, b.value.length || g.add]
173
+ ])
174
+ ], 64));
191
175
  }
192
176
  });
193
177
  export {
194
- we as default
178
+ be as default
195
179
  };