golden-logic-ui 1.3.10 → 1.3.12

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/dist/components/GeneralComponents/GlTextCopy.vue.js

@@ -1,8 +1,8 @@
-import { ref as b, computed as g, createElementBlock as a, openBlock as s, createElementVNode as e, toDisplayString as l, createCommentVNode as i } from "vue";
-const m = { class: "w-full" }, f = { class: "flex justify-between items-center" }, h = { class: "gl-label-form" }, p = { class: "flex items-center" }, x = { class: "shrink-0 z-10 inline-flex items-center p-2 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-s-lg dark:bg-gray-600 dark:text-white dark:border-gray-600" }, y = { class: "relative w-full" }, v = ["value"], k = { key: 0 }, w = {
+import { ref as m, computed as p, createElementBlock as o, openBlock as s, createElementVNode as e, toDisplayString as n, createCommentVNode as d } from "vue";
+const g = { class: "w-full" }, y = { class: "flex justify-between items-center" }, b = { class: "gl-label-form" }, f = { class: "flex items-center" }, h = { class: "shrink-0 z-10 inline-flex items-center p-2 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-s-lg dark:bg-gray-600 dark:text-white dark:border-gray-600" }, k = { class: "relative w-full" }, x = ["value"], v = { key: 0 }, w = {
   key: 1,
   class: "inline-flex items-center"
-}, _ = { class: "mt-2 text-sm text-gray-500 dark:text-gray-400" }, S = {
+}, _ = { class: "mt-2 text-sm text-gray-500 dark:text-gray-400" }, H = {
   __name: "GlTextCopy",
   props: {
     label_name: {
@@ -22,39 +22,39 @@ const m = { class: "w-full" }, f = { class: "flex justify-between items-center"
       default: ""
     }
   },
-  setup(r) {
-    const u = r, o = b(!1), c = (d) => {
-      navigator.clipboard.writeText(d).then(function() {
-        o.value = !0, setTimeout(() => {
-          o.value = !1;
+  setup(t) {
+    const c = t, a = m(!1), u = (l) => {
+      navigator.clipboard.writeText(l).then(function() {
+        a.value = !0, setTimeout(() => {
+          a.value = !1;
         }, 2e3);
-      }).catch(function(t) {
-        console.error("Error copying to clipboard: ", t);
+      }).catch(function(r) {
+        console.error("Error copying to clipboard: ", r);
       });
-    }, n = g(() => u.code);
-    return (d, t) => (s(), a("div", m, [
-      e("div", f, [
-        e("label", h, l(r.label_name), 1)
+    }, i = p(() => c.code);
+    return (l, r) => (s(), o("div", g, [
+      e("div", y, [
+        e("label", b, n(t.label_name), 1)
       ]),
-      e("div", p, [
-        e("span", x, l(r.text_name), 1),
-        e("div", y, [
+      e("div", f, [
+        e("span", h, n(t.text_name), 1),
+        e("div", k, [
           e("input", {
             type: "text",
             "aria-describedby": "helper-text-explanation",
-            class: "bg-gray-50 border border-e-0 border-gray-300 text-gray-500 dark:text-gray-400 text-sm border-s-0 focus:ring-blue-500 focus:border-blue-500 block w-full p-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500",
-            value: n.value,
+            class: "bg-gray-50 border border-e-0 border-gray-300 text-gray-500 dark:text-gray-400 text-sm border-s-0 focus:ring-primary focus:border-primary block w-full p-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-primaryDark dark:focus:border-primaryDark",
+            value: i.value,
             readonly: "",
             disabled: ""
-          }, null, 8, v)
+          }, null, 8, x)
         ]),
         e("button", {
           style: { padding: ".61rem" },
-          onClick: t[0] || (t[0] = (C) => c(n.value)),
-          class: "shrink-0 z-10 inline-flex items-center px-4 text-sm font-medium text-center text-white bg-blue-700 rounded-e-lg hover:bg-blue-800 focus:ring-4 focus:outline-hidden focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 border border-blue-700 dark:border-blue-600 hover:border-blue-800 dark:hover:border-blue-700",
+          onClick: r[0] || (r[0] = (D) => u(i.value)),
+          class: "shrink-0 z-10 inline-flex items-center px-4 text-sm font-medium text-center text-white bg-primary rounded-e-lg hover:bg-primary/90 focus:ring-4 focus:outline-hidden focus:ring-primary/30 dark:bg-primaryDark dark:hover:bg-primaryDark/90 dark:focus:ring-primaryDark/30 border border-primary dark:border-primaryDark hover:border-primary/90 dark:hover:border-primaryDark/90",
           type: "button"
         }, [
-          o.value ? i("", !0) : (s(), a("span", k, t[1] || (t[1] = [
+          a.value ? d("", !0) : (s(), o("span", v, r[1] || (r[1] = [
             e("svg", {
               class: "w-4 h-4",
               "aria-hidden": "true",
@@ -65,7 +65,7 @@ const m = { class: "w-full" }, f = { class: "flex justify-between items-center"
               e("path", { d: "M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z" })
             ], -1)
           ]))),
-          o.value ? (s(), a("span", w, t[2] || (t[2] = [
+          a.value ? (s(), o("span", w, r[2] || (r[2] = [
             e("svg", {
               class: "w-4 h-4",
               "aria-hidden": "true",
@@ -81,13 +81,13 @@ const m = { class: "w-full" }, f = { class: "flex justify-between items-center"
                 d: "M1 5.917 5.724 10.5 15 1.5"
               })
             ], -1)
-          ]))) : i("", !0)
+          ]))) : d("", !0)
         ])
       ]),
-      e("p", _, l(r.description), 1)
+      e("p", _, n(t.description), 1)
     ]));
   }
 };
 export {
-  S as default
+  H 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.12",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mrgiant/GoldenLogicUi.git"