golden-logic-ui 1.3.10 → 1.3.11

package/dist/components/GeneralComponents/GlDropdown.vue.js

@@ -1,27 +1,30 @@
-import { ref as c, shallowRef as Y, onMounted as ve, onBeforeUnmount as me, watch as M, createElementBlock as f, openBlock as v, Fragment as Z, createCommentVNode as h, normalizeClass as B, createElementVNode as s, toDisplayString as b, withDirectives as F, withModifiers as ee, vShow as te, vModelText as ge, renderList as pe, nextTick as he } from "vue";
+import { ref as v, shallowRef as Y, onMounted as ve, onBeforeUnmount as me, watch as I, createElementBlock as c, openBlock as f, Fragment as Z, createCommentVNode as h, normalizeClass as O, createElementVNode as s, toDisplayString as w, withDirectives as F, withModifiers as ee, vShow as te, vModelText as ge, renderList as he, nextTick as pe } from "vue";
 const ye = { class: "font-bold ptext-lg dark:text-white" }, xe = { class: "mt-3 mb-4" }, we = {
   key: 0,
   class: "bg-blue-100 text-blue-800 text-sm font-medium mb-2 mt-2 me-2 px-2.5 py-0.5 rounded-sm dark:bg-blue-900 dark:text-blue-300"
 }, be = ["name", "id", "value"], ke = {
   key: 0,
   class: "dropdown"
-}, Se = { class: "relative focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:focus:ring-blue-500 dark:focus:border-blue-500" }, _e = { class: "relative showOptions" }, Ce = ["value", "placeholder"], De = { class: "text-gray-700 bg-white border dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 absolute w-full z-999999999 rounded-md mt-1 pt-1" }, Oe = {
+}, Se = { class: "relative focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:focus:ring-blue-500 dark:focus:border-blue-500" }, _e = { class: "relative showOptions" }, Ce = ["value", "placeholder", "disabled"], De = {
   key: 0,
   class: "border-b border-gray-200 dark:border-gray-700"
-}, Ee = { class: "relative" }, Be = ["id", "placeholder"], $e = { class: "flex items-center py-2 pr-4" }, Le = ["onClick", "onMousedown", "id"], Me = { class: "flex justify-between items-center py-2" }, Ie = ["innerHTML"], je = {
+}, Oe = { class: "relative" }, Ee = ["id", "placeholder"], Be = { class: "flex items-center py-2 pr-4" }, $e = ["onClick", "onMousedown", "id"], Le = { class: "flex justify-between items-center py-2" }, Me = { class: "min-w-0" }, Ie = ["innerHTML"], je = {
+  key: 0,
+  class: "ms-2 text-gray-500 dark:text-gray-400"
+}, Te = {
   key: 0,
   class: "flex items-center shrink-0 w-4 h-4 text-green-500 ltr:right-2 rtl:left-2 dark:text-green-400",
   "aria-hidden": "true",
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
   viewBox: "0 0 16 12"
-}, Te = {
+}, Ue = {
   key: 2,
   class: "p-2 text-center text-gray-500"
-}, Ue = {
+}, Ae = {
   key: 3,
   class: "p-2 text-gray-500"
-}, Ae = { class: "block mt-1 text-sm font-normal leading-5 text-red-500" }, qe = { class: "block mt-1 text-sm font-normal leading-5 text-gray-500" }, Ne = {
+}, qe = { class: "block mt-1 text-sm font-normal leading-5 text-red-500" }, Ve = { class: "block mt-1 text-sm font-normal leading-5 text-gray-500" }, Pe = {
   __name: "GlDropdown",
   props: {
     modelValue: {
@@ -106,46 +109,60 @@ const ye = { class: "font-bold ptext-lg dark:text-white" }, xe = { class: "mt-3
     custom_option_label: {
       type: String,
       default: "Use:"
+    },
+    /** Extra classes on the field itself, e.g. to square a corner when it sits against another field. */
+    input_class: {
+      type: String,
+      default: ""
+    },
+    /** Extra classes on the open list, e.g. a minimum width wider than a narrow field. */
+    options_class: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: ["update:modelValue", "selected", "selectionChanged"],
-  setup(r, { emit: le }) {
-    const o = r, k = le, a = c({}), T = c(!1), y = c(0), x = c(!1), m = c(""), g = c(""), $ = c(!1), S = c(1), _ = c(null), L = c(1), i = Y([]), O = c(!1), I = Y([]), U = c([]), ne = c(null), H = c(null);
-    let E = !1, p = null, A = 0, C = null;
+  setup(o, { emit: le }) {
+    const r = o, k = le, a = v({}), T = v(!1), y = v(0), x = v(!1), m = v(""), g = v(""), $ = v(!1), S = v(1), _ = v(null), L = v(1), i = Y([]), E = v(!1), j = Y([]), U = v([]), ne = v(null), H = v(null);
+    let B = !1, p = null, A = 0, C = null;
     const z = (e) => e?.name === "CanceledError" || e?.name === "AbortError" || typeof axios < "u" && axios.isCancel?.(e), q = async (e = "down") => {
-      if ($.value || !o.api_url) return;
+      if ($.value || !r.api_url) return;
       p && p.abort(), p = new AbortController();
       const t = ++A;
       $.value = !0;
       try {
-        const l = e === "up" ? Math.max(S.value - 1, L.value) : S.value, { data: n } = await axios.get(o.api_url, {
+        const l = e === "up" ? Math.max(S.value - 1, L.value) : S.value, { data: n } = await axios.get(r.api_url, {
           params: { search: m.value, page: l, per_page: 20 },
           signal: p.signal
         });
-        if (E || t !== A) return;
+        if (B || t !== A) return;
         if (!n || !n.data) {
-          i.value = [], O.value = !1;
+          i.value = [], E.value = !1;
           return;
         }
         const u = W(n.data);
         if (e === "down") {
           const d = i.value.length ? i.value.concat(u) : u, D = a.value;
-          w(D) && D.id !== void 0 && D.name && !d.some((j) => String(j.id) === String(D.id)) && d.unshift(D), i.value = d, S.value++, _.value = n.last_page, O.value = !0;
+          b(D) && D.id !== void 0 && D.name && !d.some((M) => String(M.id) === String(D.id)) && d.unshift(D), i.value = d, S.value++, _.value = n.last_page, E.value = !0;
         }
         _.value || (_.value = n.last_page), L.value || (L.value = 1);
       } catch (l) {
         if (z(l)) return;
         console.error("Error fetching data:", l);
       } finally {
-        !E && t === A && ($.value = !1, p = null);
+        !B && t === A && ($.value = !1, p = null);
       }
     }, ae = async (e) => {
-      if (!o.api_url || e === null || e === void 0 || e === "") return null;
+      if (!r.api_url || e === null || e === void 0 || e === "") return null;
       try {
-        const { data: t } = await axios.get(o.api_url, {
+        const { data: t } = await axios.get(r.api_url, {
           params: { search: e, per_page: 20 }
         });
-        if (E) return null;
+        if (B) return null;
         const l = t?.data;
         if (!l || !l.length) return null;
         const n = String(e);
@@ -167,56 +184,56 @@ const ye = { class: "font-bold ptext-lg dark:text-white" }, xe = { class: "mt-3
         return;
       }
       const u = await ae(t);
-      E || (u ? (a.value = u, i.value.some((d) => String(d.id) === String(u.id)) || (i.value = [u, ...i.value])) : o.allow_custom ? a.value = { id: t, name: t } : a.value = { id: t, name: "" });
+      B || (u ? (a.value = u, i.value.some((d) => String(d.id) === String(u.id)) || (i.value = [u, ...i.value])) : r.allow_custom ? a.value = { id: t, name: t } : a.value = { id: t, name: "" });
     }, re = (e) => {
       const t = e.target;
       t && t.scrollHeight - t.clientHeight <= t.scrollTop + 10 && S.value <= _.value && q("down");
     }, K = (e) => {
-      e.target && (document.activeElement.classList.contains("showOptions" + g.value) ? x.value || V() : e.target.id != o.field_name + "search" + g.value && e.target.id != o.field_name && !e.target.classList.contains("showOptions" + g.value) && (R(), y.value = 0, x.value = !1));
+      e.target && (document.activeElement.classList.contains("showOptions" + g.value) ? x.value || V() : e.target.id != r.field_name + "search" + g.value && e.target.id != r.field_name && !e.target.classList.contains("showOptions" + g.value) && (R(), y.value = 0, x.value = !1));
     }, V = () => {
-      if (!o.show) {
+      if (!(r.show || r.disabled)) {
         if (x.value) {
           x.value = !1;
           return;
         }
-        m.value = "", x.value = !0, o.api_url && (!O.value || i.value.length === 0) && (S.value = 1, _.value = null, i.value = [], O.value = !1, q("down")), he(() => {
+        m.value = "", x.value = !0, r.api_url && (!E.value || i.value.length === 0) && (S.value = 1, _.value = null, i.value = [], E.value = !1, q("down")), pe(() => {
           const e = document.getElementById(
-            `${o.field_name}search${g.value}`
+            `${r.field_name}search${g.value}`
           );
           e && e.focus();
         });
       }
     }, N = () => {
       const e = (t) => {
-        if (o.allow_custom && t) {
+        if (r.allow_custom && t) {
           const l = typeof t == "object" ? t.id : t;
           return { id: l, name: l };
         }
         return {};
       };
-      return w(a.value) ? typeof a.value == "object" ? i.value.find(
+      return b(a.value) ? typeof a.value == "object" ? i.value.find(
         (t) => String(t.id) === String(a.value.id)
       ) || e(a.value) : i.value.find(
         (t) => String(t.id) === String(a.value)
-      ) || e(a.value) : o.modelValue ? typeof o.modelValue == "object" ? i.value.find(
-        (t) => String(t.id) === String(o.modelValue.id)
-      ) || e(o.modelValue) : i.value.find(
-        (t) => String(t.id) === String(o.modelValue)
-      ) || e(o.modelValue) : {};
+      ) || e(a.value) : r.modelValue ? typeof r.modelValue == "object" ? i.value.find(
+        (t) => String(t.id) === String(r.modelValue.id)
+      ) || e(r.modelValue) : i.value.find(
+        (t) => String(t.id) === String(r.modelValue)
+      ) || e(r.modelValue) : {};
     };
     ve(() => {
-      g.value = ue(), o.show || (document.body.addEventListener("click", G), document.addEventListener("focusin", K));
+      g.value = ue(), r.show || (document.body.addEventListener("click", G), document.addEventListener("focusin", K));
     }), me(() => {
-      E = !0, p && (p.abort(), p = null), C && (clearTimeout(C), C = null), document.body.removeEventListener("click", G), document.removeEventListener("focusin", K);
+      B = !0, p && (p.abort(), p = null), C && (clearTimeout(C), C = null), document.body.removeEventListener("click", G), document.removeEventListener("focusin", K);
     });
     function ie() {
-      const e = I.value, t = o.maxItem, l = m.value;
+      const e = j.value, t = r.maxItem, l = m.value;
       if (!l)
         return e.length > t ? e.slice(0, t) : e;
       const n = l.toLowerCase(), u = [];
       for (let d = 0, D = e.length; d < D && u.length < t; d++) {
-        const j = e[d];
-        String(j.name).toLowerCase().includes(n) && u.push(j);
+        const M = e[d];
+        (String(M.name).toLowerCase().includes(n) || String(M.keywords ?? "").toLowerCase().includes(n)) && u.push(M);
       }
       return u;
     }
@@ -240,11 +257,11 @@ const ye = { class: "font-bold ptext-lg dark:text-white" }, xe = { class: "mt-3
         return e = Math.floor(e / 16), (t === "x" ? l : l & 3 | 8).toString(16);
       });
     }
-    function w(e) {
+    function b(e) {
       return e && typeof e == "object" && Object.keys(e).length > 0;
     }
     function G(e) {
-      e.target.id != o.field_name + "search" + g.value && e.target.id != o.field_name && !e.target.classList.contains("showOptions" + g.value) && (R(), y.value = 0, x.value = !1);
+      e.target.id != r.field_name + "search" + g.value && e.target.id != r.field_name && !e.target.classList.contains("showOptions" + g.value) && (R(), y.value = 0, x.value = !1);
     }
     function J(e) {
       const t = `${e}${g.value}`, l = document.getElementById(t), n = H.value;
@@ -269,7 +286,7 @@ const ye = { class: "font-bold ptext-lg dark:text-white" }, xe = { class: "mt-3
       return t;
     }
     function ce() {
-      const e = o.options, t = new Array(e.length);
+      const e = r.options, t = new Array(e.length);
       for (let l = 0; l < e.length; l++) {
         const n = e[l];
         t[l] = typeof n == "object" ? n : { id: n, name: n };
@@ -278,104 +295,107 @@ const ye = { class: "font-bold ptext-lg dark:text-white" }, xe = { class: "mt-3
     }
     function X() {
       const e = m.value, t = { id: e, name: e }, l = String(e);
-      U.value.some((n) => String(n.id) === l) || U.value.push(t), i.value.some((n) => String(n.id) === l) || (i.value = [...i.value, t], I.value = [...I.value, t]), P(t);
+      U.value.some((n) => String(n.id) === l) || U.value.push(t), i.value.some((n) => String(n.id) === l) || (i.value = [...i.value, t], j.value = [...j.value, t]), P(t);
     }
     function P(e) {
       T.value = !0, a.value = e, x.value = !1, k("update:modelValue", a.value.id), k("selected", a.value), k("selectionChanged", a.value);
     }
     function fe() {
-      o.show || (a.value = {}, m.value = "", k("update:modelValue", ""), k("selected", a.value), k("selectionChanged", a.value), V());
+      r.show || (a.value = {}, m.value = "", k("update:modelValue", ""), k("selected", a.value), k("selectionChanged", a.value), V());
     }
     function R() {
       (!a.value || !a.value.id) && (a.value = {}, m.value = "");
     }
-    return M(m, () => {
-      if (!o.api_url) {
+    return I(m, () => {
+      if (!r.api_url) {
         i.value = ie(), i.value.length === 0 && (a.value = {});
         return;
       }
       C && clearTimeout(C), C = setTimeout(() => {
-        C = null, !E && (S.value = 1, _.value = null, L.value = 1, i.value = [], O.value = !1, q("down"));
+        C = null, !B && (S.value = 1, _.value = null, L.value = 1, i.value = [], E.value = !1, q("down"));
       }, 250);
-    }), M(a, (e) => {
-      w(e) && e.id !== o.modelValue && k("update:modelValue", e.id);
-    }), M(
-      () => o.api_url,
+    }), I(a, (e) => {
+      b(e) && e.id !== r.modelValue && k("update:modelValue", e.id);
+    }), I(
+      () => r.api_url,
       () => {
-        p && (p.abort(), p = null), S.value = 1, _.value = null, L.value = 1, i.value = [], O.value = !1;
+        p && (p.abort(), p = null), S.value = 1, _.value = null, L.value = 1, i.value = [], E.value = !1;
       },
       { immediate: !0 }
-    ), M(
-      () => o.modelValue,
+    ), I(
+      () => r.modelValue,
       async (e) => {
         if (!e) {
           a.value = {};
           return;
         }
         const t = typeof e == "object" ? e.id : e;
-        w(a.value) && String(a.value.id) !== String(t) && (a.value = {}, T.value = !1), o.api_url ? T.value ? a.value = N() : await oe(e) : a.value = N();
+        b(a.value) && String(a.value.id) !== String(t) && (a.value = {}, T.value = !1), r.api_url ? T.value ? a.value = N() : await oe(e) : a.value = N();
       },
       { immediate: !0 }
-    ), M(
-      () => o.options,
+    ), I(
+      () => r.options,
       () => {
-        if (!o.api_url) {
+        if (!r.api_url) {
           const e = ce(), t = new Set(e.map((n) => String(n.id))), l = e;
           for (const n of U.value) {
             const u = String(n.id);
             t.has(u) || (l.push(n), t.add(u));
           }
-          I.value = l, i.value = l, a.value = N();
+          j.value = l, i.value = l, a.value = N();
         }
       },
       // deep so the list still updates when options load late by mutating the SAME
       // array in place (e.g. column.options.push(...)) — a reference-only watch
       // would miss that and leave the dropdown list empty.
       { immediate: !0, deep: !0 }
-    ), (e, t) => (v(), f(Z, null, [
-      r.show ? (v(), f("div", {
+    ), (e, t) => (f(), c(Z, null, [
+      o.show ? (f(), c("div", {
         key: 0,
-        class: B(r.field_name)
+        class: O(o.field_name)
       }, [
-        s("h3", ye, b(r.label_name), 1),
+        s("h3", ye, w(o.label_name), 1),
         s("p", xe, [
-          w(a.value) ? (v(), f("span", we, b(a.value?.name), 1)) : h("", !0)
+          b(a.value) ? (f(), c("span", we, w(a.value?.name), 1)) : h("", !0)
         ]),
         t[6] || (t[6] = s("hr", { class: "opacity-100! bg-gray-200 border-0 dark:bg-gray-700" }, null, -1))
       ], 2)) : h("", !0),
-      r.show ? h("", !0) : (v(), f("div", {
+      o.show ? h("", !0) : (f(), c("div", {
         key: 1,
-        class: B(r.field_name)
+        class: O(o.field_name)
       }, [
         s("input", {
           type: "hidden",
-          name: r.field_name,
-          id: r.field_name,
+          name: o.field_name,
+          id: o.field_name,
           value: a.value?.id
         }, null, 8, be),
-        r.options ? (v(), f("div", ke, [
-          r.label_name ? (v(), f("label", {
+        o.options ? (f(), c("div", ke, [
+          o.label_name ? (f(), c("label", {
             key: 0,
-            class: B({
-              "gl-label-form": r.error_message == "",
-              "gl-label-form-invalid": r.error_message !== "",
-              required: r.is_required
+            class: O({
+              "gl-label-form": o.error_message == "",
+              "gl-label-form-invalid": o.error_message !== "",
+              required: o.is_required
             })
-          }, b(r.label_name), 3)) : h("", !0),
+          }, w(o.label_name), 3)) : h("", !0),
           s("div", Se, [
             s("div", _e, [
               s("input", {
                 ref_key: "myDivDropDown",
                 ref: ne,
-                class: B([{
-                  "gl-input-form": r.error_message == "",
-                  "gl-input-form-invalid": r.error_message !== "",
+                class: O([{
+                  "gl-input-form": o.error_message == "",
+                  "gl-input-form-invalid": o.error_message !== "",
                   [`showOptions${g.value}`]: !0,
-                  "pr-14!": w(a.value) && r.has_cancel,
-                  "pr-8!": !(w(a.value) && r.has_cancel)
+                  "pr-14!": b(a.value) && o.has_cancel,
+                  "pr-8!": !(b(a.value) && o.has_cancel),
+                  "opacity-70 cursor-not-allowed": o.disabled,
+                  [o.input_class]: o.input_class !== ""
                 }, "truncate showOptions1"]),
                 value: a.value?.name,
-                placeholder: r.placeholder,
+                placeholder: o.placeholder,
+                disabled: o.disabled,
                 autocomplete: "off",
                 readonly: ""
               }, null, 10, Ce),
@@ -400,15 +420,15 @@ const ye = { class: "font-bold ptext-lg dark:text-white" }, xe = { class: "mt-3
                   })
                 ], -1)
               ]), 512), [
-                [te, w(a.value) && r.has_cancel]
+                [te, b(a.value) && o.has_cancel]
               ]),
               s("i", {
                 onClick: t[1] || (t[1] = ee((l) => V(), ["stop"])),
                 class: "absolute text-xl text-gray-500 cursor-pointer ltr:right-2 rtl:left-2 hover:text-gray-700 dark:hover:text-gray-700 showOptions",
                 style: { top: "14px" }
               }, [
-                (v(), f("svg", {
-                  class: B([x.value ? "" : "rotate-180", "w-3 h-3 shrink-0"]),
+                (f(), c("svg", {
+                  class: O([x.value ? "" : "rotate-180", "w-3 h-3 shrink-0"]),
                   "aria-hidden": "true",
                   xmlns: "http://www.w3.org/2000/svg",
                   fill: "none",
@@ -423,24 +443,26 @@ const ye = { class: "font-bold ptext-lg dark:text-white" }, xe = { class: "mt-3
                   }, null, -1)
                 ]), 2))
               ]),
-              F(s("div", De, [
-                r.hide_search ? h("", !0) : (v(), f("div", Oe, [
+              F(s("div", {
+                class: O(["text-gray-700 bg-white border dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 absolute w-full z-999999999 rounded-md mt-1 pt-1", o.options_class])
+              }, [
+                o.hide_search ? h("", !0) : (f(), c("div", De, [
                   t[10] || (t[10] = s("label", {
                     for: "default-search",
                     class: "mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
                   }, "Search", -1)),
-                  s("div", Ee, [
+                  s("div", Oe, [
                     t[9] || (t[9] = s("div", { class: "absolute inset-y-0 flex items-center pointer-events-none start-0 ps-3" }, null, -1)),
                     F(s("input", {
                       type: "search",
                       "onUpdate:modelValue": t[2] || (t[2] = (l) => m.value = l),
-                      id: `${r.field_name}search${g.value}`,
+                      id: `${o.field_name}search${g.value}`,
                       onKeydown: se,
                       onBlur: t[3] || (t[3] = (l) => R()),
                       autocomplete: "off",
                       class: "block w-full p-2 text-sm text-gray-900 outline-hidden dark:bg-gray-800 dark:text-white",
-                      placeholder: r.search_input_placeholder
-                    }, null, 40, Be), [
+                      placeholder: o.search_input_placeholder
+                    }, null, 40, Ee), [
                       [ge, m.value]
                     ])
                   ])
@@ -451,18 +473,18 @@ const ye = { class: "font-bold ptext-lg dark:text-white" }, xe = { class: "mt-3
                   ref_key: "dropdownRef",
                   ref: H
                 }, [
-                  r.allow_custom && m.value && !i.value.find((l) => String(l.name) === String(m.value)) ? (v(), f("div", {
+                  o.allow_custom && m.value && !i.value.find((l) => String(l.name) === String(m.value)) ? (f(), c("div", {
                     key: 0,
                     class: "relative px-2 py-0.5 text-xs leading-4 text-gray-700 no-underline cursor-pointer dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white hover:rounded-sm",
                     onClick: t[4] || (t[4] = (l) => X()),
                     onMousedown: t[5] || (t[5] = (l) => X())
                   }, [
-                    s("div", $e, [
-                      s("span", null, b(r.custom_option_label) + ' "' + b(m.value) + '"', 1)
+                    s("div", Be, [
+                      s("span", null, w(o.custom_option_label) + ' "' + w(m.value) + '"', 1)
                     ])
                   ], 32)) : h("", !0),
-                  i.value.length ? (v(!0), f(Z, { key: 1 }, pe(i.value, (l, n) => (v(), f("div", {
-                    class: B([
+                  i.value.length ? (f(!0), c(Z, { key: 1 }, he(i.value, (l, n) => (f(), c("div", {
+                    class: O([
                       "relative px-2 py-0.5 text-xs leading-4 text-gray-700 no-underline cursor-pointer dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white hover:rounded-sm",
                       n + 1 == y.value ? "bg-gray-100 dark:bg-gray-700 rounded-sm" : ""
                     ]),
@@ -471,11 +493,14 @@ const ye = { class: "font-bold ptext-lg dark:text-white" }, xe = { class: "mt-3
                     key: n,
                     id: `${n + 1}${g.value}`
                   }, [
-                    s("div", Me, [
-                      s("span", {
-                        innerHTML: l.name || l.id || "-"
-                      }, null, 8, Ie),
-                      a.value?.id === l.id ? (v(), f("svg", je, t[11] || (t[11] = [
+                    s("div", Le, [
+                      s("span", Me, [
+                        s("span", {
+                          innerHTML: l.name || l.id || "-"
+                        }, null, 8, Ie),
+                        l.hint ? (f(), c("span", je, w(l.hint), 1)) : h("", !0)
+                      ]),
+                      a.value?.id === l.id ? (f(), c("svg", Te, t[11] || (t[11] = [
                         s("path", {
                           stroke: "currentColor",
                           "stroke-linecap": "round",
@@ -485,22 +510,22 @@ const ye = { class: "font-bold ptext-lg dark:text-white" }, xe = { class: "mt-3
                         }, null, -1)
                       ]))) : h("", !0)
                     ])
-                  ], 42, Le))), 128)) : h("", !0),
-                  $.value ? (v(), f("div", Te, " Loading... ")) : h("", !0),
-                  !$.value && i.value.length === 0 && !(r.allow_custom && m.value) ? (v(), f("div", Ue, b(r.no_results_found_placeholder), 1)) : h("", !0)
+                  ], 42, $e))), 128)) : h("", !0),
+                  $.value ? (f(), c("div", Ue, " Loading... ")) : h("", !0),
+                  !$.value && i.value.length === 0 && !(o.allow_custom && m.value) ? (f(), c("div", Ae, w(o.no_results_found_placeholder), 1)) : h("", !0)
                 ], 544)
-              ], 512), [
+              ], 2), [
                 [te, x.value]
               ])
             ])
           ])
         ])) : h("", !0),
-        s("span", Ae, b(r.error_message), 1),
-        s("small", qe, b(r.description), 1)
+        s("span", qe, w(o.error_message), 1),
+        s("small", Ve, w(o.description), 1)
       ], 2))
     ], 64));
   }
 };
 export {
-  Ne as default
+  Pe as default
 };

package/dist/components/GeneralComponents/GlPhoneInput.vue.js

@@ -1,21 +1,22 @@
-import { ref as C, computed as y, watch as T, createElementBlock as o, openBlock as u, normalizeClass as S, createCommentVNode as p, createElementVNode as g, toDisplayString as c, Fragment as B, createTextVNode as L, renderList as V } from "vue";
-import { PHONE_PREFERRED as U, PHONE_COUNTRIES as z, PHONE_CODE_DEFAULTS as G } from "./phoneCountries.js";
-const j = {
+import { ref as E, computed as d, watch as I, createElementBlock as s, openBlock as u, normalizeClass as S, createCommentVNode as x, createElementVNode as b, toDisplayString as f, Fragment as T, createTextVNode as U, createBlock as z } from "vue";
+import G from "./GlDropdown.vue.js";
+import { PHONE_PREFERRED as L, PHONE_COUNTRIES as j, PHONE_CODE_DEFAULTS as J } from "./phoneCountries.js";
+const K = {
   key: 0,
   class: "gl-label-form"
-}, J = {
+}, M = {
   class: "mt-1 text-gray-900 dark:text-white tabular-nums",
   dir: "ltr"
-}, K = ["for"], M = {
+}, Q = ["for"], X = {
   class: "flex",
   dir: "ltr"
-}, Q = {
+}, Y = {
   key: 0,
   class: "h-10 inline-flex shrink-0 items-center rounded-s-lg border border-e-0 border-gray-200 bg-gray-100 px-3 text-sm font-medium text-gray-700 tabular-nums dark:border-gray-700 dark:bg-gray-700 dark:text-gray-200"
-}, X = ["value", "disabled", "aria-label", "title"], Y = ["label"], Z = ["value"], ee = ["label"], te = ["value"], le = ["id", "name", "value", "placeholder", "required", "disabled", "aria-invalid"], ae = { class: "gl-span-form-error" }, ne = {
+}, Z = ["id", "name", "value", "placeholder", "required", "disabled", "aria-invalid"], ee = { class: "gl-span-form-error" }, te = {
   key: 1,
   class: "block mt-1 text-sm font-normal leading-5 text-gray-500"
-}, ue = {
+}, re = {
   __name: "GlPhoneInput",
   props: {
     /** The number without its country code, digits only. */
@@ -29,9 +30,9 @@ const j = {
      * length is the digits after the code, used to warn on a short or long
      * number; leave it out where numbers vary. Defaults to every country.
      */
-    countries: { type: Array, default: () => z },
-    /** ISO codes listed first, above the rest. */
-    preferred: { type: Array, default: () => U },
+    countries: { type: Array, default: () => j },
+    /** ISO codes listed first; the rest follow alphabetically. */
+    preferred: { type: Array, default: () => L },
     /** Show the code as fixed text instead of a picker. */
     lock_country: { type: Boolean, default: !1 },
     field_name: { type: String, default: "" },
@@ -44,144 +45,138 @@ const j = {
     placeholder: { type: String, default: "" },
     /** Shown when the length is off. :country and :length are filled in. */
     length_message: { type: String, default: ":country numbers have :length digits." },
-    country_label: { type: String, default: "Country" },
-    preferred_label: { type: String, default: "Common" },
-    all_label: { type: String, default: "All countries" }
+    search_placeholder: { type: String, default: "Search country or code" }
   },
   emits: ["update:modelValue", "update:country_code", "update:country", "change", "blur"],
-  setup(a, { expose: q, emit: $ }) {
-    const n = a, b = $, v = C(null), O = C(!1), i = (e) => e.code || e.dial, s = y(() => {
+  setup(a, { expose: $, emit: C }) {
+    const n = a, g = C, h = E(null), B = E(!1), i = (e) => e.code || e.dial, c = d(() => {
       const e = n.countries;
-      return !n.country_code || e.some((l) => l.dial === n.country_code) ? e : [...e, { code: "", dial: n.country_code, name: n.country_code }];
-    }), w = y(
-      () => n.preferred.map((e) => s.value.find((l) => l.code === e)).filter(Boolean)
-    ), P = y(
-      () => s.value.filter((e) => !n.preferred.includes(e.code)).sort((e, l) => e.name.localeCompare(l.name))
+      return !n.country_code || e.some((t) => t.dial === n.country_code) ? e : [...e, { code: "", dial: n.country_code, name: n.country_code }];
+    }), O = d(
+      () => n.preferred.map((e) => c.value.find((t) => t.code === e)).filter(Boolean)
+    ), q = d(() => [
+      ...O.value,
+      ...c.value.filter((e) => !n.preferred.includes(e.code)).sort((e, t) => e.name.localeCompare(t.name))
+    ]), D = d(
+      () => q.value.map((e) => ({
+        id: i(e),
+        name: e.code ? `${e.dial} ${e.code}` : e.dial,
+        hint: e.code ? e.name : "",
+        keywords: `${e.name} ${e.dial} ${e.code}`
+      }))
     );
-    function E(e, l = "") {
-      const t = s.value.filter((r) => r.dial === e);
-      return t.find((r) => l && r.code === l) || w.value.find((r) => r.dial === e) || t.find((r) => r.code === G[e]) || t[0] || null;
+    function w(e, t = "") {
+      const l = c.value.filter((r) => r.dial === e);
+      return l.find((r) => t && r.code === t) || O.value.find((r) => r.dial === e) || l.find((r) => r.code === J[e]) || l[0] || null;
     }
-    const h = C(i(E(n.country_code, n.country) || { dial: n.country_code }));
-    T(
+    const v = E(i(w(n.country_code, n.country) || { dial: n.country_code }));
+    I(
       () => [n.country_code, n.country],
-      ([e, l]) => {
-        const t = s.value.find((_) => i(_) === h.value);
-        if (t && t.dial === e && (!l || t.code === l))
+      ([e, t]) => {
+        const l = c.value.find((k) => i(k) === v.value);
+        if (l && l.dial === e && (!t || l.code === t))
           return;
-        const r = E(e, l);
-        h.value = r ? i(r) : e;
+        const r = w(e, t);
+        v.value = r ? i(r) : e;
       }
     );
-    const d = y(() => s.value.find((e) => i(e) === h.value) || null), f = y(() => String(n.modelValue ?? "")), W = y(() => {
-      const e = d.value?.length;
-      return !O.value || !e || f.value === "" || f.value.length === e ? "" : n.length_message.replace(":country", d.value.name).replace(":length", String(e));
-    }), m = y(() => n.error_message || W.value), A = (e) => String(e ?? "").replace(/\D/g, ""), k = (e) => e.replace(/\D/g, "");
+    const o = d(() => c.value.find((e) => i(e) === v.value) || null), m = d(() => String(n.modelValue ?? "")), P = d(() => {
+      const e = o.value?.length;
+      return !B.value || !e || m.value === "" || m.value.length === e ? "" : n.length_message.replace(":country", o.value.name).replace(":length", String(e));
+    }), y = d(() => n.error_message || P.value), W = (e) => String(e ?? "").replace(/\D/g, ""), p = (e) => e.replace(/\D/g, "");
     function F(e) {
-      return [...new Set(s.value.map((t) => t.dial).filter(Boolean))].sort((t, r) => k(r).length - k(t).length).find((t) => e.startsWith(k(t)));
+      return [...new Set(c.value.map((l) => l.dial).filter(Boolean))].sort((l, r) => p(r).length - p(l).length).find((l) => e.startsWith(p(l)));
     }
     function N(e) {
-      h.value = i(e), e.dial !== n.country_code && b("update:country_code", e.dial), e.code && e.code !== n.country && b("update:country", e.code);
+      v.value = i(e), e.dial !== n.country_code && g("update:country_code", e.dial), e.code && e.code !== n.country && g("update:country", e.code);
     }
-    function D(e) {
-      const l = d.value?.dial || n.country_code;
-      b("change", { country_code: l, country: d.value?.code || "", number: e, full: e ? `${l}${e}` : "" });
+    function V(e) {
+      const t = o.value?.dial || n.country_code;
+      g("change", { country_code: t, country: o.value?.code || "", number: e, full: e ? `${t}${e}` : "" });
     }
     function H(e) {
-      const l = String(e ?? "").trim();
-      let t = A(l);
-      if (!n.lock_country && (l.startsWith("+") || l.startsWith("00"))) {
-        const _ = l.startsWith("00") ? t.slice(2) : t, x = F(_);
-        x && (N(d.value?.dial === x ? d.value : E(x)), t = _.slice(k(x).length));
+      const t = String(e ?? "").trim();
+      let l = W(t);
+      if (!n.lock_country && (t.startsWith("+") || t.startsWith("00"))) {
+        const k = t.startsWith("00") ? l.slice(2) : l, _ = F(k);
+        _ && (N(o.value?.dial === _ ? o.value : w(_)), l = k.slice(p(_).length));
       }
-      const r = d.value?.length;
-      r && t.length === r + 1 && t.startsWith("0") && (t = t.slice(1)), b("update:modelValue", t), D(t), v.value && v.value.value !== t && (v.value.value = t);
+      const r = o.value?.length;
+      r && l.length === r + 1 && l.startsWith("0") && (l = l.slice(1)), g("update:modelValue", l), V(l), h.value && h.value.value !== l && (h.value.value = l);
     }
     function R(e) {
-      const l = s.value.find((t) => i(t) === e.target.value);
-      l && (N(l), D(f.value));
+      const t = e?.id ? c.value.find((l) => i(l) === e.id) : null;
+      t && (N(t), V(m.value));
     }
-    function I(e) {
-      O.value = !0, b("blur", e);
+    function A(e) {
+      B.value = !0, g("blur", e);
     }
-    return q({ focus: () => v.value?.focus() }), (e, l) => a.show ? (u(), o("div", {
+    return $({ focus: () => h.value?.focus() }), (e, t) => a.show ? (u(), s("div", {
       key: 0,
       class: S(a.field_name)
     }, [
-      a.label_name ? (u(), o("label", j, c(a.label_name), 1)) : p("", !0),
-      g("p", J, [
-        f.value ? (u(), o(B, { key: 0 }, [
-          L(c(d.value?.dial || a.country_code) + " " + c(f.value), 1)
-        ], 64)) : p("", !0)
+      a.label_name ? (u(), s("label", K, f(a.label_name), 1)) : x("", !0),
+      b("p", M, [
+        m.value ? (u(), s(T, { key: 0 }, [
+          U(f(o.value?.dial || a.country_code) + " " + f(m.value), 1)
+        ], 64)) : x("", !0)
       ]),
-      l[1] || (l[1] = g("hr", { class: "opacity-100! bg-gray-200 border-0 dark:bg-gray-700" }, null, -1))
-    ], 2)) : (u(), o("div", {
+      t[1] || (t[1] = b("hr", { class: "opacity-100! bg-gray-200 border-0 dark:bg-gray-700" }, null, -1))
+    ], 2)) : (u(), s("div", {
       key: 1,
       class: S(a.field_name)
     }, [
-      a.label_name ? (u(), o("label", {
+      a.label_name ? (u(), s("label", {
         key: 0,
         for: a.field_name,
         class: S({
-          "gl-label-form": !m.value,
-          "gl-label-form-invalid": m.value,
+          "gl-label-form": !y.value,
+          "gl-label-form-invalid": y.value,
           required: a.is_required
         })
-      }, c(a.label_name), 11, K)) : p("", !0),
-      g("div", M, [
-        a.lock_country ? (u(), o("span", Q, c(a.country_code), 1)) : (u(), o("select", {
+      }, f(a.label_name), 11, Q)) : x("", !0),
+      b("div", X, [
+        a.lock_country ? (u(), s("span", Y, f(o.value?.dial || a.country_code), 1)) : (u(), z(G, {
           key: 1,
-          value: h.value,
+          class: "w-32 shrink-0",
+          field_name: `${a.field_name}_country`,
+          options: D.value,
+          modelValue: v.value,
+          has_cancel: !1,
           disabled: a.disabled,
-          "aria-label": a.country_label,
-          title: d.value?.name || a.country_label,
-          class: "h-10 w-auto max-w-32 shrink-0 cursor-pointer rounded-s-lg border border-e-0 border-gray-200 bg-gray-100 ps-3 pe-8 text-sm font-medium text-gray-700 tabular-nums outline-hidden focus:border-primary dark:border-gray-700 dark:bg-gray-700 dark:text-gray-200 dark:focus:border-primaryDark disabled:cursor-not-allowed disabled:opacity-70",
-          onChange: R
-        }, [
-          w.value.length ? (u(), o("optgroup", {
-            key: 0,
-            label: a.preferred_label
-          }, [
-            (u(!0), o(B, null, V(w.value, (t) => (u(), o("option", {
-              key: "p-" + i(t),
-              value: i(t)
-            }, c(t.code ? `${t.code} ${t.dial}` : t.dial), 9, Z))), 128))
-          ], 8, Y)) : p("", !0),
-          g("optgroup", { label: a.all_label }, [
-            (u(!0), o(B, null, V(P.value, (t) => (u(), o("option", {
-              key: i(t),
-              value: i(t)
-            }, c(t.code ? `${t.code} ${t.dial}` : t.dial), 9, te))), 128))
-          ], 8, ee)
-        ], 40, X)),
-        g("input", {
+          search_input_placeholder: a.search_placeholder,
+          input_class: "rounded-e-none! border-e-0! bg-gray-100! dark:bg-gray-700! font-medium tabular-nums",
+          options_class: "min-w-72",
+          onSelectionChanged: R
+        }, null, 8, ["field_name", "options", "modelValue", "disabled", "search_input_placeholder"])),
+        b("input", {
           ref_key: "input",
-          ref: v,
+          ref: h,
           type: "tel",
           inputmode: "numeric",
           autocomplete: "tel-national",
           id: a.field_name,
           name: a.field_name,
-          value: f.value,
-          placeholder: a.placeholder || (d.value?.length ? "0".repeat(d.value.length) : ""),
+          value: m.value,
+          placeholder: a.placeholder || (o.value?.length ? "0".repeat(o.value.length) : ""),
           maxlength: "24",
           required: a.is_required,
           disabled: a.disabled,
-          "aria-invalid": m.value ? "true" : "false",
+          "aria-invalid": y.value ? "true" : "false",
           class: S(["min-w-0 rounded-s-none! tabular-nums", {
-            "gl-input-form": !m.value,
-            "gl-input-form-invalid": m.value,
+            "gl-input-form": !y.value,
+            "gl-input-form-invalid": y.value,
             "opacity-70 cursor-not-allowed bg-gray-100 dark:bg-gray-700": a.disabled
           }]),
-          onInput: l[0] || (l[0] = (t) => H(t.target.value)),
-          onBlur: I
-        }, null, 42, le)
+          onInput: t[0] || (t[0] = (l) => H(l.target.value)),
+          onBlur: A
+        }, null, 42, Z)
       ]),
-      g("span", ae, c(m.value), 1),
-      a.description ? (u(), o("small", ne, c(a.description), 1)) : p("", !0)
+      b("span", ee, f(y.value), 1),
+      a.description ? (u(), s("small", te, f(a.description), 1)) : x("", !0)
     ], 2));
   }
 };
 export {
-  ue as default
+  re as default
 };

package/package.json

@@ -3,7 +3,7 @@
   "description": "The most popular library of interactive components built with Vuejs && Tailwind CSS",
   "type": "module",
   "private": false,
-  "version": "1.3.10",
+  "version": "1.3.11",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mrgiant/GoldenLogicUi.git"