@quidgest/ui 0.16.32 → 0.16.34

package/esm/components/QSelect/QSelect.vue.js

@@ -1,26 +1,33 @@
-import { defineComponent as H, mergeModels as R, useModel as X, ref as h, computed as k, watch as j, nextTick as G, createElementBlock as p, openBlock as t, Fragment as A, createVNode as g, unref as i, normalizeClass as J, createSlots as W, withCtx as s, withDirectives as Y, toDisplayString as F, createCommentVNode as _, createTextVNode as Z, createElementVNode as K, mergeProps as M, vModelText as ee, renderSlot as d, createBlock as w, normalizeProps as le, withModifiers as oe } from "vue";
-import { DEFAULT_TEXTS as ae, DEFAULT_ICONS as te } from "./types.js";
-import { QButton as ne } from "../QButton/index.js";
-import { QField as ie } from "../QField/index.js";
-import { QIcon as se } from "../QIcon/index.js";
-import { QList as re } from "../QList/index.js";
-import { QOverlay as de } from "../QOverlay/index.js";
-import { QSpinnerLoader as ue } from "../QSpinnerLoader/index.js";
-import { QChevron as ce } from "../__internal__/QChevron/index.js";
-import { QClearButton as fe } from "../__internal__/QClearButton/index.js";
-const pe = {
+import { defineComponent as de, mergeModels as J, useModel as ce, toRef as S, ref as Y, useTemplateRef as _, computed as L, watch as E, nextTick as z, unref as i, createElementBlock as c, openBlock as t, Fragment as b, createVNode as $, normalizeClass as fe, createSlots as me, withCtx as f, withDirectives as pe, createBlock as m, createCommentVNode as p, renderList as Z, createTextVNode as w, mergeProps as q, toDisplayString as g, normalizeProps as ee, createElementVNode as le, vModelText as ve, renderSlot as h, withModifiers as ye } from "vue";
+import { DEFAULT_TEXTS as be, DEFAULT_ICONS as ge } from "./types.js";
+import { QBadge as D } from "../QBadge/index.js";
+import { QButton as he } from "../QButton/index.js";
+import { QField as ke } from "../QField/index.js";
+import { QIcon as T } from "../QIcon/index.js";
+import { QList as _e } from "../QList/index.js";
+import { QOverlay as we } from "../QOverlay/index.js";
+import { QSpinnerLoader as qe } from "../QSpinnerLoader/index.js";
+import { QChevron as Be } from "../__internal__/QChevron/index.js";
+import { QClearButton as Ce } from "../__internal__/QClearButton/index.js";
+import { useId as Ve } from "../../composables/uid.js";
+import { useGroup as Le } from "../../composables/useGroup/index.js";
+const Ee = {
   key: 0,
+  ref: "badgesContainer",
+  class: "q-select__badge-container"
+}, $e = {
+  key: 1,
   class: "q-select__value"
-}, me = {
+}, De = {
   key: 1,
   class: "q-select__placeholder"
-}, ve = ["id", "tabindex", "aria-keyshortcuts"], ye = ["data-key"], be = {
+}, Te = ["id", "tabindex", "aria-keyshortcuts"], Qe = ["data-key"], Re = {
   key: 0,
   class: "q-select__loader"
-}, Be = /* @__PURE__ */ H({
+}, He = /* @__PURE__ */ de({
   inheritAttrs: !1,
   __name: "QSelect",
-  props: /* @__PURE__ */ R({
+  props: /* @__PURE__ */ J({
     id: {},
     class: {},
     label: {},
@@ -34,87 +41,131 @@ const pe = {
     groups: { default: () => [] },
     clearable: { type: Boolean },
     inline: { type: Boolean },
+    multiple: { type: Boolean },
+    badges: { type: Boolean },
     loading: { type: Boolean },
     emptyValue: {},
     itemValue: { default: "key" },
     itemLabel: { default: "label" },
-    icons: { default: () => te },
-    texts: { default: () => ae }
+    icons: { default: () => ge },
+    texts: { default: () => be }
   }, {
     modelValue: {},
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ R(["before-show", "before-hide", "show", "hide"], ["update:modelValue"]),
-  setup(C, { emit: O }) {
-    const e = C, m = O, v = X(C, "modelValue"), a = h(!1), y = h(null), B = h(null), V = h(null), D = k(() => r.value === void 0), r = k(
+  emits: /* @__PURE__ */ J(["before-show", "before-hide", "show", "hide"], ["update:modelValue"]),
+  setup(O, { emit: ae }) {
+    const e = O, B = ae, r = ce(O, "modelValue"), Q = Ve(S(e, "id")), { active: te } = Le({
+      active: r,
+      required: S(e, "required"),
+      multiple: S(e, "multiple")
+    }), d = Y(!1), C = Y(0), R = _("trigger"), oe = _("list"), F = _("content"), K = _("badgesContainer"), U = _("allBadges"), N = L(() => s.value.length === 0), s = L(() => {
+      var a;
+      if (e.multiple)
+        return ((a = r.value) == null ? void 0 : a.map((u) => W(u))) ?? [];
+      const l = typeof r.value < "u" ? W(r.value) : void 0;
+      return l ? [l] : [];
+    }), x = L(
       () => {
         var l;
-        return (l = e.items) == null ? void 0 : l.find((o) => o[e.itemValue] === v.value);
+        return (l = s.value) == null ? void 0 : l.map((a) => a[e.itemLabel]).join(", ");
       }
-    ), q = k(
-      () => r.value ? r.value[e.itemLabel] : ""
-    ), u = k(
-      () => e.clearable && !e.readonly && !e.disabled && !e.loading
+    ), k = L(
+      () => e.clearable && !e.readonly && !e.disabled && !e.loading && !N.value
     );
-    function L(l) {
-      v.value = l, b();
+    function W(l) {
+      var a;
+      return (a = e.items) == null ? void 0 : a.find((u) => u[e.itemValue] === l);
+    }
+    function ne(l) {
+      e.multiple && r.value.splice(l, 1);
     }
-    function x() {
-      u.value && (L(e.emptyValue), Q());
+    function P(l) {
+      r.value = l, e.multiple || V();
     }
-    function U(l) {
-      var o, c, f;
-      !((o = V.value) != null && o.contains(l.relatedTarget)) && !((f = (c = y.value) == null ? void 0 : c.fieldRef) != null && f.contains(l.relatedTarget)) && b();
+    function A() {
+      k.value && (P(e.emptyValue), G());
     }
-    function $() {
-      a.value || (m("before-show"), a.value = !0);
+    function ie(l) {
+      var a, u, n;
+      !((a = F.value) != null && a.contains(l.relatedTarget)) && !((n = (u = R.value) == null ? void 0 : u.fieldRef) != null && n.contains(l.relatedTarget)) && V();
     }
-    function b() {
-      a.value && (m("before-hide"), a.value = !1);
+    function H() {
+      d.value || (B("before-show"), d.value = !0);
     }
-    function T() {
-      e.readonly || e.disabled || (a.value ? b() : $());
+    function V() {
+      d.value && (B("before-hide"), d.value = !1);
     }
-    function E(l) {
-      !l.key || e.readonly || e.disabled || (["Enter", " ", "ArrowDown", "ArrowUp", "Home", "End", "Delete"].includes(l.key) && (l.preventDefault(), l.stopPropagation()), ["Enter", " ", "ArrowDown"].includes(l.key) && $(), ["Escape", "Tab"].includes(l.key) && (a.value ? b() : u.value && l.key === "Escape" && x()), u.value && l.key === "Delete" && x());
+    function j() {
+      e.readonly || e.disabled || (d.value ? V() : H());
     }
     function I(l) {
-      l.key.length === 1 && l.preventDefault(), E(l);
+      !l.key || e.readonly || e.disabled || (["Enter", " ", "ArrowDown", "ArrowUp", "Home", "End", "Delete"].includes(l.key) && (l.preventDefault(), l.stopPropagation()), ["Enter", " ", "ArrowDown"].includes(l.key) && H(), ["Escape", "Tab"].includes(l.key) && (d.value ? V() : k.value && l.key === "Escape" && A()), k.value && l.key === "Delete" && A());
     }
-    function N() {
+    function re(l) {
+      l.key.length === 1 && l.preventDefault(), I(l);
+    }
+    function se() {
       var l;
-      e.loading ? (l = V.value) == null || l.focus() : S(), m("show");
+      e.loading ? (l = F.value) == null || l.focus() : X(), B("show");
     }
-    function P() {
-      Q(), m("hide");
+    function ue() {
+      G(), B("hide");
     }
-    function Q() {
-      var l, o;
-      (o = (l = y.value) == null ? void 0 : l.fieldRef) == null || o.focus();
+    function G() {
+      var l, a;
+      (a = (l = R.value) == null ? void 0 : l.fieldRef) == null || a.focus();
     }
-    function S() {
+    function X() {
       var l;
-      (l = B.value) == null || l.$el.focus();
+      (l = oe.value) == null || l.$el.focus();
     }
-    return j(
+    async function M() {
+      var o;
+      if (await z(), !e.multiple || !e.badges || !K.value) return;
+      const l = K.value.offsetWidth, a = 4;
+      let u = 0, n = 0;
+      await z();
+      for (const y of U.value ?? []) {
+        const v = y.$el.scrollWidth + a;
+        if (u + v <= l)
+          u += v, n++;
+        else break;
+      }
+      C.value = (((o = U.value) == null ? void 0 : o.length) ?? 0) - n;
+    }
+    return E(
       () => e.loading,
       (l) => {
-        !l && a.value && G(S);
+        !l && d.value && z(X);
       }
-    ), (l, o) => {
-      var c, f;
-      return t(), p(
-        A,
+    ), E(() => e.badges, M), E(() => e.clearable, M), E(
+      te,
+      (l) => {
+        var a;
+        if (r.value = l, Array.isArray(r.value)) {
+          const u = /* @__PURE__ */ new Map();
+          (a = e.items) == null || a.forEach((n, o) => {
+            u.set(n.key, o);
+          }), r.value = i(
+            r.value.sort((n, o) => u.get(n) - u.get(o))
+          ), M();
+        }
+      },
+      { deep: !0 }
+    ), (l, a) => {
+      var u;
+      return t(), c(
+        b,
         null,
         [
-          g(i(ie), {
-            id: e.id,
-            ref_key: "triggerEl",
-            ref: y,
+          $(i(ke), {
+            id: i(Q),
+            ref: "trigger",
             label: e.label,
             required: e.required,
             role: "combobox",
-            class: J([
+            class: fe([
               "q-select",
               {
                 "q-select--readonly": e.readonly,
@@ -125,22 +176,22 @@ const pe = {
             readonly: e.readonly,
             disabled: e.disabled,
             "data-loading": e.loading,
-            "aria-expanded": a.value,
+            "aria-expanded": d.value,
             "aria-haspopup": "listbox",
             size: e.size,
             invalid: e.invalid,
-            onClick: T,
-            onKeydown: E
-          }, W({
-            append: s(() => [
-              d(l.$slots, "append"),
-              u.value && v.value ? (t(), w(i(fe), {
+            onClick: j,
+            onKeydown: I
+          }, me({
+            append: f(() => [
+              h(l.$slots, "append"),
+              k.value ? (t(), m(i(Ce), {
                 key: 0,
                 icons: e.icons,
                 texts: e.texts,
-                onClick: x
-              }, null, 8, ["icons", "texts"])) : _("v-if", !0),
-              e.readonly ? _("v-if", !0) : (t(), w(i(ne), {
+                onClick: A
+              }, null, 8, ["icons", "texts"])) : p("v-if", !0),
+              e.readonly ? p("v-if", !0) : (t(), m(i(he), {
                 key: 1,
                 class: "q-select__chevron",
                 "aria-label": e.texts.showOptions,
@@ -149,11 +200,11 @@ const pe = {
                 borderless: "",
                 tabindex: "-1",
                 disabled: e.disabled,
-                onClick: T
+                onClick: j
               }, {
-                default: s(() => [
-                  g(i(ce), {
-                    "model-value": a.value,
+                default: f(() => [
+                  $(i(Be), {
+                    "model-value": d.value,
                     icons: e.icons
                   }, null, 8, ["model-value", "icons"])
                 ]),
@@ -161,121 +212,258 @@ const pe = {
                 /* STABLE */
               }, 8, ["aria-label", "disabled"]))
             ]),
-            default: s(() => [
-              D.value ? (t(), p("span", me, [
-                !e.readonly && !e.disabled ? (t(), p(
-                  A,
+            default: f(() => [
+              N.value ? (t(), c("span", De, [
+                !e.readonly && !e.disabled ? (t(), c(
+                  b,
                   { key: 0 },
                   [
-                    Z(
-                      F(e.texts.placeholder),
+                    w(
+                      g(e.texts.placeholder),
                       1
                       /* TEXT */
                     )
                   ],
                   64
                   /* STABLE_FRAGMENT */
-                )) : _("v-if", !0)
-              ])) : (t(), p(
-                "span",
-                pe,
-                F(q.value),
-                1
-                /* TEXT */
+                )) : p("v-if", !0)
+              ])) : (t(), c(
+                b,
+                { key: 0 },
+                [
+                  e.badges ? (t(), c(
+                    "span",
+                    Ee,
+                    [
+                      e.multiple ? (t(), c(
+                        b,
+                        { key: 0 },
+                        [
+                          (t(!0), c(
+                            b,
+                            null,
+                            Z(r.value, (n, o) => (t(), c(
+                              b,
+                              { key: o },
+                              [
+                                o < r.value.length - C.value ? (t(), m(i(D), {
+                                  key: 0,
+                                  pill: "",
+                                  removable: !e.readonly && !e.disabled && (e.clearable || r.value.length > 1),
+                                  "onClick:remove": () => ne(o)
+                                }, {
+                                  default: f(() => {
+                                    var y, v;
+                                    return [
+                                      (y = s.value[o]) != null && y.icon ? (t(), m(
+                                        i(T),
+                                        q({
+                                          key: 0,
+                                          ref_for: !0
+                                        }, s.value[o].icon),
+                                        null,
+                                        16
+                                        /* FULL_PROPS */
+                                      )) : p("v-if", !0),
+                                      w(
+                                        " " + g((v = s.value[o]) == null ? void 0 : v[e.itemLabel]),
+                                        1
+                                        /* TEXT */
+                                      )
+                                    ];
+                                  }),
+                                  _: 2
+                                  /* DYNAMIC */
+                                }, 1032, ["removable", "onClick:remove"])) : p("v-if", !0)
+                              ],
+                              64
+                              /* STABLE_FRAGMENT */
+                            ))),
+                            128
+                            /* KEYED_FRAGMENT */
+                          )),
+                          C.value > 0 ? (t(), m(i(D), {
+                            key: 0,
+                            pill: "",
+                            class: "q-select__badge-count"
+                          }, {
+                            default: f(() => [
+                              w(
+                                " +" + g(C.value),
+                                1
+                                /* TEXT */
+                              )
+                            ]),
+                            _: 1
+                            /* STABLE */
+                          })) : p("v-if", !0),
+                          (t(!0), c(
+                            b,
+                            null,
+                            Z(r.value, (n, o) => (t(), m(i(D), {
+                              key: o,
+                              ref_for: !0,
+                              ref: "allBadges",
+                              pill: "",
+                              class: "q-select__badge-hidden",
+                              removable: !e.readonly && !e.disabled && (e.clearable || r.value.length > 1)
+                            }, {
+                              default: f(() => {
+                                var y, v;
+                                return [
+                                  (y = s.value[o]) != null && y.icon ? (t(), m(
+                                    i(T),
+                                    q({
+                                      key: 0,
+                                      ref_for: !0
+                                    }, s.value[o].icon),
+                                    null,
+                                    16
+                                    /* FULL_PROPS */
+                                  )) : p("v-if", !0),
+                                  w(
+                                    " " + g((v = s.value[o]) == null ? void 0 : v[e.itemLabel]),
+                                    1
+                                    /* TEXT */
+                                  )
+                                ];
+                              }),
+                              _: 2
+                              /* DYNAMIC */
+                            }, 1032, ["removable"]))),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      )) : (t(), m(i(D), {
+                        key: 1,
+                        pill: ""
+                      }, {
+                        default: f(() => {
+                          var n, o;
+                          return [
+                            (n = s.value[0]) != null && n.icon ? (t(), m(
+                              i(T),
+                              ee(q({ key: 0 }, s.value[0].icon)),
+                              null,
+                              16
+                              /* FULL_PROPS */
+                            )) : p("v-if", !0),
+                            w(
+                              " " + g((o = s.value[0]) == null ? void 0 : o[e.itemLabel]),
+                              1
+                              /* TEXT */
+                            )
+                          ];
+                        }),
+                        _: 1
+                        /* STABLE */
+                      }))
+                    ],
+                    512
+                    /* NEED_PATCH */
+                  )) : (t(), c(
+                    "span",
+                    $e,
+                    g(x.value),
+                    1
+                    /* TEXT */
+                  ))
+                ],
+                64
+                /* STABLE_FRAGMENT */
               )),
-              Y(K("input", M({
-                id: `${e.id}_input`
+              pe(le("input", q({
+                id: `${i(Q)}_input`
               }, l.$attrs, {
-                "onUpdate:modelValue": o[0] || (o[0] = (n) => q.value = n),
+                "onUpdate:modelValue": a[0] || (a[0] = (n) => x.value = n),
                 class: "q-select__input",
                 inputmode: "none",
                 type: "text",
                 autocomplete: "off",
                 tabindex: e.disabled ? -1 : 0,
-                "aria-keyshortcuts": u.value && !D.value ? "Delete" : void 0,
-                onKeydown: I
-              }), null, 16, ve), [
-                [ee, q.value]
+                "aria-keyshortcuts": k.value ? "Delete" : void 0,
+                onKeydown: re
+              }), null, 16, Te), [
+                [ve, x.value]
               ])
             ]),
             _: 2
             /* DYNAMIC */
           }, [
-            (c = r.value) != null && c.icon || l.$slots.prepend ? {
+            s.value.length === 1 && s.value[0].icon && !e.badges || l.$slots.prepend ? {
               name: "prepend",
-              fn: s(() => {
-                var n, z;
-                return [
-                  d(l.$slots, "prepend"),
-                  (n = r.value) != null && n.icon ? (t(), w(
-                    i(se),
-                    le(M({ key: 0 }, (z = r.value) == null ? void 0 : z.icon)),
-                    null,
-                    16
-                    /* FULL_PROPS */
-                  )) : _("v-if", !0)
-                ];
-              }),
+              fn: f(() => [
+                h(l.$slots, "prepend"),
+                s.value.length === 1 && s.value[0].icon && !e.badges ? (t(), m(
+                  i(T),
+                  ee(q({ key: 0 }, s.value[0].icon)),
+                  null,
+                  16
+                  /* FULL_PROPS */
+                )) : p("v-if", !0)
+              ]),
               key: "0"
             } : void 0,
             l.$slots.extras ? {
               name: "extras",
-              fn: s(() => [
-                d(l.$slots, "extras")
+              fn: f(() => [
+                h(l.$slots, "extras")
               ]),
               key: "1"
             } : void 0
           ]), 1032, ["id", "label", "required", "class", "readonly", "disabled", "data-loading", "aria-expanded", "size", "invalid"]),
-          g(i(de), {
-            modelValue: a.value,
-            "onUpdate:modelValue": o[1] || (o[1] = (n) => a.value = n),
+          $(i(we), {
+            modelValue: d.value,
+            "onUpdate:modelValue": a[1] || (a[1] = (n) => d.value = n),
             spy: "",
             trigger: "manual",
             placement: "bottom-start",
             width: "anchor",
             "scroll-lock": "",
             inline: e.inline,
-            anchor: (f = y.value) == null ? void 0 : f.fieldRef,
+            anchor: (u = i(R)) == null ? void 0 : u.fieldRef,
             offset: 2,
-            onEnter: N,
-            onLeave: P
+            onEnter: se,
+            onLeave: ue
           }, {
-            default: s(() => [
-              K("div", {
-                ref_key: "contentRef",
-                ref: V,
+            default: f(() => [
+              le("div", {
+                ref: "content",
                 "data-testid": "combobox-dropdown",
-                "data-key": e.id,
+                "data-key": i(Q),
                 class: "q-select__body",
                 tabindex: "-1",
-                onFocusout: U,
-                onKeydown: oe(E, ["stop"])
+                onFocusout: ie,
+                onKeydown: ye(I, ["stop"])
               }, [
-                d(l.$slots, "body.prepend"),
-                e.loading ? (t(), p("div", be, [
-                  g(i(ue), { size: 24 })
-                ])) : (t(), w(i(re), {
+                h(l.$slots, "body.prepend"),
+                e.loading ? (t(), c("div", Re, [
+                  $(i(qe), { size: 24 })
+                ])) : (t(), m(i(_e), {
                   key: 1,
-                  ref_key: "listRef",
-                  ref: B,
+                  ref: "list",
                   class: "q-select__items",
                   selectable: "",
                   required: e.required,
-                  "model-value": v.value,
+                  multiple: e.multiple,
+                  "model-value": r.value,
                   items: e.items,
                   groups: l.groups,
                   "item-label": e.itemLabel,
                   "item-value": e.itemValue,
-                  "onUpdate:modelValue": L
+                  "onUpdate:modelValue": P
                 }, {
-                  item: s(({ item: n }) => [
-                    d(l.$slots, "item", { item: n })
+                  item: f(({ item: n }) => [
+                    h(l.$slots, "item", { item: n })
                   ]),
                   _: 3
                   /* FORWARDED */
-                }, 8, ["required", "model-value", "items", "groups", "item-label", "item-value"])),
-                d(l.$slots, "body.append")
-              ], 40, ye)
+                }, 8, ["required", "multiple", "model-value", "items", "groups", "item-label", "item-value"])),
+                h(l.$slots, "body.append")
+              ], 40, Qe)
             ]),
             _: 3
             /* FORWARDED */
@@ -288,5 +476,5 @@ const pe = {
   }
 });
 export {
-  Be as default
+  He as default
 };