golden-logic-ui 1.3.9 → 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

@@ -0,0 +1,182 @@
+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"
+}, M = {
+  class: "mt-1 text-gray-900 dark:text-white tabular-nums",
+  dir: "ltr"
+}, Q = ["for"], X = {
+  class: "flex",
+  dir: "ltr"
+}, 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"
+}, 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"
+}, re = {
+  __name: "GlPhoneInput",
+  props: {
+    /** The number without its country code, digits only. */
+    modelValue: { type: [String, Number], default: "" },
+    /** The dialling code, such as +968. Bind with v-model:country_code. */
+    country_code: { type: String, default: "+968" },
+    /** The country's ISO code, such as OM, where a code is shared. Optional. */
+    country: { type: String, default: "" },
+    /**
+     * The countries offered: [{ code: 'OM', dial: '+968', name: 'Oman', length: 8 }].
+     * 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: () => 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: "" },
+    label_name: { type: String, default: "" },
+    is_required: { type: Boolean, default: !1 },
+    show: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    error_message: { type: String, default: "" },
+    description: { type: String, default: "" },
+    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." },
+    search_placeholder: { type: String, default: "Search country or code" }
+  },
+  emits: ["update:modelValue", "update:country_code", "update:country", "change", "blur"],
+  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((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 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 v = E(i(w(n.country_code, n.country) || { dial: n.country_code }));
+    I(
+      () => [n.country_code, n.country],
+      ([e, t]) => {
+        const l = c.value.find((k) => i(k) === v.value);
+        if (l && l.dial === e && (!t || l.code === t))
+          return;
+        const r = w(e, t);
+        v.value = r ? i(r) : e;
+      }
+    );
+    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(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) {
+      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 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 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 = 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 t = e?.id ? c.value.find((l) => i(l) === e.id) : null;
+      t && (N(t), V(m.value));
+    }
+    function A(e) {
+      B.value = !0, g("blur", e);
+    }
+    return $({ focus: () => h.value?.focus() }), (e, t) => a.show ? (u(), s("div", {
+      key: 0,
+      class: S(a.field_name)
+    }, [
+      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)
+      ]),
+      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(), s("label", {
+        key: 0,
+        for: a.field_name,
+        class: S({
+          "gl-label-form": !y.value,
+          "gl-label-form-invalid": y.value,
+          required: a.is_required
+        })
+      }, 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,
+          class: "w-32 shrink-0",
+          field_name: `${a.field_name}_country`,
+          options: D.value,
+          modelValue: v.value,
+          has_cancel: !1,
+          disabled: a.disabled,
+          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: h,
+          type: "tel",
+          inputmode: "numeric",
+          autocomplete: "tel-national",
+          id: a.field_name,
+          name: a.field_name,
+          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": y.value ? "true" : "false",
+          class: S(["min-w-0 rounded-s-none! tabular-nums", {
+            "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: t[0] || (t[0] = (l) => H(l.target.value)),
+          onBlur: A
+        }, null, 42, Z)
+      ]),
+      b("span", ee, f(y.value), 1),
+      a.description ? (u(), s("small", te, f(a.description), 1)) : x("", !0)
+    ], 2));
+  }
+};
+export {
+  re as default
+};

package/dist/components/GeneralComponents/phoneCountries.js

@@ -0,0 +1,250 @@
+const a = (n, i, e, r) => r ? { code: n, name: i, dial: e, length: r } : { code: n, name: i, dial: e }, o = [
+  a("AF", "Afghanistan", "+93", 9),
+  a("AX", "Åland Islands", "+358"),
+  a("AL", "Albania", "+355", 9),
+  a("DZ", "Algeria", "+213", 9),
+  a("AS", "American Samoa", "+1"),
+  a("AD", "Andorra", "+376", 6),
+  a("AO", "Angola", "+244", 9),
+  a("AI", "Anguilla", "+1"),
+  a("AG", "Antigua and Barbuda", "+1"),
+  a("AR", "Argentina", "+54"),
+  a("AM", "Armenia", "+374", 8),
+  a("AW", "Aruba", "+297", 7),
+  a("AU", "Australia", "+61", 9),
+  a("AT", "Austria", "+43"),
+  a("AZ", "Azerbaijan", "+994", 9),
+  a("BS", "Bahamas", "+1"),
+  a("BH", "Bahrain", "+973", 8),
+  a("BD", "Bangladesh", "+880", 10),
+  a("BB", "Barbados", "+1"),
+  a("BY", "Belarus", "+375", 9),
+  a("BE", "Belgium", "+32", 9),
+  a("BZ", "Belize", "+501", 7),
+  a("BJ", "Benin", "+229"),
+  a("BM", "Bermuda", "+1"),
+  a("BT", "Bhutan", "+975", 8),
+  a("BO", "Bolivia", "+591", 8),
+  a("BQ", "Caribbean Netherlands", "+599"),
+  a("BA", "Bosnia and Herzegovina", "+387"),
+  a("BW", "Botswana", "+267", 8),
+  a("BR", "Brazil", "+55", 11),
+  a("IO", "British Indian Ocean Territory", "+246"),
+  a("VG", "British Virgin Islands", "+1"),
+  a("BN", "Brunei", "+673", 7),
+  a("BG", "Bulgaria", "+359", 9),
+  a("BF", "Burkina Faso", "+226", 8),
+  a("BI", "Burundi", "+257", 8),
+  a("CV", "Cape Verde", "+238", 7),
+  a("KH", "Cambodia", "+855"),
+  a("CM", "Cameroon", "+237", 9),
+  a("CA", "Canada", "+1", 10),
+  a("KY", "Cayman Islands", "+1"),
+  a("CF", "Central African Republic", "+236", 8),
+  a("TD", "Chad", "+235", 8),
+  a("CL", "Chile", "+56", 9),
+  a("CN", "China", "+86", 11),
+  a("CX", "Christmas Island", "+61"),
+  a("CC", "Cocos (Keeling) Islands", "+61"),
+  a("CO", "Colombia", "+57", 10),
+  a("KM", "Comoros", "+269", 7),
+  a("CG", "Congo", "+242", 9),
+  a("CD", "Congo (DRC)", "+243", 9),
+  a("CK", "Cook Islands", "+682", 5),
+  a("CR", "Costa Rica", "+506", 8),
+  a("CI", "Côte d'Ivoire", "+225", 10),
+  a("HR", "Croatia", "+385"),
+  a("CU", "Cuba", "+53", 8),
+  a("CW", "Curaçao", "+599"),
+  a("CY", "Cyprus", "+357", 8),
+  a("CZ", "Czechia", "+420", 9),
+  a("DK", "Denmark", "+45", 8),
+  a("DJ", "Djibouti", "+253", 8),
+  a("DM", "Dominica", "+1"),
+  a("DO", "Dominican Republic", "+1"),
+  a("EC", "Ecuador", "+593", 9),
+  a("EG", "Egypt", "+20", 10),
+  a("SV", "El Salvador", "+503", 8),
+  a("GQ", "Equatorial Guinea", "+240", 9),
+  a("ER", "Eritrea", "+291", 7),
+  a("EE", "Estonia", "+372"),
+  a("SZ", "Eswatini", "+268", 8),
+  a("ET", "Ethiopia", "+251", 9),
+  a("FK", "Falkland Islands", "+500", 5),
+  a("FO", "Faroe Islands", "+298", 6),
+  a("FJ", "Fiji", "+679", 7),
+  a("FI", "Finland", "+358"),
+  a("FR", "France", "+33", 9),
+  a("GF", "French Guiana", "+594", 9),
+  a("PF", "French Polynesia", "+689", 8),
+  a("GA", "Gabon", "+241"),
+  a("GM", "Gambia", "+220", 7),
+  a("GE", "Georgia", "+995", 9),
+  a("DE", "Germany", "+49"),
+  a("GH", "Ghana", "+233", 9),
+  a("GI", "Gibraltar", "+350", 8),
+  a("GR", "Greece", "+30", 10),
+  a("GL", "Greenland", "+299", 6),
+  a("GD", "Grenada", "+1"),
+  a("GP", "Guadeloupe", "+590", 9),
+  a("GU", "Guam", "+1"),
+  a("GT", "Guatemala", "+502", 8),
+  a("GG", "Guernsey", "+44"),
+  a("GN", "Guinea", "+224", 9),
+  a("GW", "Guinea-Bissau", "+245"),
+  a("GY", "Guyana", "+592", 7),
+  a("HT", "Haiti", "+509", 8),
+  a("HN", "Honduras", "+504", 8),
+  a("HK", "Hong Kong", "+852", 8),
+  a("HU", "Hungary", "+36", 9),
+  a("IS", "Iceland", "+354", 7),
+  a("IN", "India", "+91", 10),
+  a("ID", "Indonesia", "+62"),
+  a("IR", "Iran", "+98", 10),
+  a("IQ", "Iraq", "+964", 10),
+  a("IE", "Ireland", "+353", 9),
+  a("IM", "Isle of Man", "+44"),
+  a("IL", "Israel", "+972", 9),
+  a("IT", "Italy", "+39"),
+  a("JM", "Jamaica", "+1"),
+  a("JP", "Japan", "+81", 10),
+  a("JE", "Jersey", "+44"),
+  a("JO", "Jordan", "+962", 9),
+  a("KZ", "Kazakhstan", "+7", 10),
+  a("KE", "Kenya", "+254", 9),
+  a("KI", "Kiribati", "+686"),
+  a("XK", "Kosovo", "+383"),
+  a("KW", "Kuwait", "+965", 8),
+  a("KG", "Kyrgyzstan", "+996", 9),
+  a("LA", "Laos", "+856"),
+  a("LV", "Latvia", "+371", 8),
+  a("LB", "Lebanon", "+961"),
+  a("LS", "Lesotho", "+266", 8),
+  a("LR", "Liberia", "+231"),
+  a("LY", "Libya", "+218", 9),
+  a("LI", "Liechtenstein", "+423"),
+  a("LT", "Lithuania", "+370", 8),
+  a("LU", "Luxembourg", "+352", 9),
+  a("MO", "Macao", "+853", 8),
+  a("MG", "Madagascar", "+261", 9),
+  a("MW", "Malawi", "+265", 9),
+  a("MY", "Malaysia", "+60"),
+  a("MV", "Maldives", "+960", 7),
+  a("ML", "Mali", "+223", 8),
+  a("MT", "Malta", "+356", 8),
+  a("MH", "Marshall Islands", "+692", 7),
+  a("MQ", "Martinique", "+596", 9),
+  a("MR", "Mauritania", "+222", 8),
+  a("MU", "Mauritius", "+230", 8),
+  a("YT", "Mayotte", "+262"),
+  a("MX", "Mexico", "+52", 10),
+  a("FM", "Micronesia", "+691", 7),
+  a("MD", "Moldova", "+373", 8),
+  a("MC", "Monaco", "+377"),
+  a("MN", "Mongolia", "+976", 8),
+  a("ME", "Montenegro", "+382"),
+  a("MS", "Montserrat", "+1"),
+  a("MA", "Morocco", "+212", 9),
+  a("MZ", "Mozambique", "+258", 9),
+  a("MM", "Myanmar", "+95"),
+  a("NA", "Namibia", "+264", 9),
+  a("NR", "Nauru", "+674", 7),
+  a("NP", "Nepal", "+977", 10),
+  a("NL", "Netherlands", "+31", 9),
+  a("NC", "New Caledonia", "+687", 6),
+  a("NZ", "New Zealand", "+64"),
+  a("NI", "Nicaragua", "+505", 8),
+  a("NE", "Niger", "+227", 8),
+  a("NG", "Nigeria", "+234", 10),
+  a("NU", "Niue", "+683"),
+  a("NF", "Norfolk Island", "+672"),
+  a("KP", "North Korea", "+850"),
+  a("MK", "North Macedonia", "+389", 8),
+  a("MP", "Northern Mariana Islands", "+1"),
+  a("NO", "Norway", "+47", 8),
+  a("OM", "Oman", "+968", 8),
+  a("PK", "Pakistan", "+92", 10),
+  a("PW", "Palau", "+680", 7),
+  a("PS", "Palestine", "+970", 9),
+  a("PA", "Panama", "+507", 8),
+  a("PG", "Papua New Guinea", "+675", 8),
+  a("PY", "Paraguay", "+595", 9),
+  a("PE", "Peru", "+51", 9),
+  a("PH", "Philippines", "+63", 10),
+  a("PL", "Poland", "+48", 9),
+  a("PT", "Portugal", "+351", 9),
+  a("PR", "Puerto Rico", "+1"),
+  a("QA", "Qatar", "+974", 8),
+  a("RE", "Réunion", "+262", 9),
+  a("RO", "Romania", "+40", 9),
+  a("RU", "Russia", "+7", 10),
+  a("RW", "Rwanda", "+250", 9),
+  a("BL", "Saint Barthélemy", "+590"),
+  a("SH", "Saint Helena", "+290"),
+  a("KN", "Saint Kitts and Nevis", "+1"),
+  a("LC", "Saint Lucia", "+1"),
+  a("MF", "Saint Martin", "+590"),
+  a("PM", "Saint Pierre and Miquelon", "+508", 6),
+  a("VC", "Saint Vincent and the Grenadines", "+1"),
+  a("WS", "Samoa", "+685"),
+  a("SM", "San Marino", "+378"),
+  a("ST", "São Tomé and Príncipe", "+239", 7),
+  a("SA", "Saudi Arabia", "+966", 9),
+  a("SN", "Senegal", "+221", 9),
+  a("RS", "Serbia", "+381"),
+  a("SC", "Seychelles", "+248", 7),
+  a("SL", "Sierra Leone", "+232", 8),
+  a("SG", "Singapore", "+65", 8),
+  a("SX", "Sint Maarten", "+1"),
+  a("SK", "Slovakia", "+421", 9),
+  a("SI", "Slovenia", "+386", 8),
+  a("SB", "Solomon Islands", "+677"),
+  a("SO", "Somalia", "+252"),
+  a("ZA", "South Africa", "+27", 9),
+  a("KR", "South Korea", "+82"),
+  a("SS", "South Sudan", "+211", 9),
+  a("ES", "Spain", "+34", 9),
+  a("LK", "Sri Lanka", "+94", 9),
+  a("SD", "Sudan", "+249", 9),
+  a("SR", "Suriname", "+597", 7),
+  a("SJ", "Svalbard and Jan Mayen", "+47"),
+  a("SE", "Sweden", "+46", 9),
+  a("CH", "Switzerland", "+41", 9),
+  a("SY", "Syria", "+963", 9),
+  a("TW", "Taiwan", "+886", 9),
+  a("TJ", "Tajikistan", "+992", 9),
+  a("TZ", "Tanzania", "+255", 9),
+  a("TH", "Thailand", "+66", 9),
+  a("TL", "Timor-Leste", "+670", 8),
+  a("TG", "Togo", "+228", 8),
+  a("TK", "Tokelau", "+690"),
+  a("TO", "Tonga", "+676"),
+  a("TT", "Trinidad and Tobago", "+1"),
+  a("TN", "Tunisia", "+216", 8),
+  a("TR", "Türkiye", "+90", 10),
+  a("TM", "Turkmenistan", "+993", 8),
+  a("TC", "Turks and Caicos Islands", "+1"),
+  a("TV", "Tuvalu", "+688"),
+  a("UG", "Uganda", "+256", 9),
+  a("UA", "Ukraine", "+380", 9),
+  a("AE", "United Arab Emirates", "+971", 9),
+  a("GB", "United Kingdom", "+44", 10),
+  a("US", "United States", "+1", 10),
+  a("UY", "Uruguay", "+598", 8),
+  a("VI", "U.S. Virgin Islands", "+1"),
+  a("UZ", "Uzbekistan", "+998", 9),
+  a("VU", "Vanuatu", "+678"),
+  a("VA", "Vatican City", "+39"),
+  a("VE", "Venezuela", "+58", 10),
+  a("VN", "Vietnam", "+84", 9),
+  a("WF", "Wallis and Futuna", "+681", 6),
+  a("EH", "Western Sahara", "+212"),
+  a("YE", "Yemen", "+967", 9),
+  a("ZM", "Zambia", "+260", 9),
+  a("ZW", "Zimbabwe", "+263", 9)
+], s = ["OM", "AE", "SA", "QA", "KW", "BH", "EG"], t = { "+1": "US", "+7": "RU", "+44": "GB", "+47": "NO", "+61": "AU", "+39": "IT", "+212": "MA", "+262": "RE", "+358": "FI", "+590": "GP", "+599": "CW" };
+export {
+  t as PHONE_CODE_DEFAULTS,
+  o as PHONE_COUNTRIES,
+  s as PHONE_PREFERRED
+};

package/dist/main.js

@@ -6,142 +6,148 @@ import { default as u } from "./components/GeneralComponents/GlMultiSelectDropdo
 import { default as p } from "./components/GeneralComponents/GLButton.vue.js";
 import { default as G } from "./components/GeneralComponents/GlTextareaTranslate.vue.js";
 import { default as n } from "./components/GeneralComponents/GlTextTranslate.vue.js";
-import { default as c } from "./components/GeneralComponents/GlTextInput.vue.js";
-import { default as b } from "./components/GeneralComponents/GlDatePicker.vue.js";
-import { default as C } from "./components/GeneralComponents/GlDateTimePicker.vue.js";
-import { default as L } from "./components/GeneralComponents/GlDateRangePicker.vue.js";
-import { default as P } from "./components/GeneralComponents/GlDateTimeRangePicker.vue.js";
-import { default as y } from "./components/GeneralComponents/GlTimeRangePicker.vue.js";
-import { default as k } from "./components/GeneralComponents/GlDateRangeCalendar.vue.js";
-import { default as A } from "./components/GeneralComponents/GlTextInputFile.vue.js";
+import { default as T } from "./components/GeneralComponents/GlTextInput.vue.js";
+import { default as b } from "./components/GeneralComponents/GlPhoneInput.vue.js";
+import { PHONE_CODE_DEFAULTS as C, PHONE_COUNTRIES as g, PHONE_PREFERRED as P } from "./components/GeneralComponents/phoneCountries.js";
+import { default as E } from "./components/GeneralComponents/GlDatePicker.vue.js";
+import { default as F } from "./components/GeneralComponents/GlDateTimePicker.vue.js";
+import { default as w } from "./components/GeneralComponents/GlDateRangePicker.vue.js";
+import { default as O } from "./components/GeneralComponents/GlDateTimeRangePicker.vue.js";
+import { default as v } from "./components/GeneralComponents/GlTimeRangePicker.vue.js";
+import { default as I } from "./components/GeneralComponents/GlDateRangeCalendar.vue.js";
+import { default as N } from "./components/GeneralComponents/GlTextInputFile.vue.js";
 import { default as B } from "./components/GeneralComponents/GlTabsWrapper.vue.js";
-import { default as h } from "./components/GeneralComponents/GlTab.vue.js";
-import { default as H } from "./components/GeneralComponents/GlTabShow.vue.js";
-import { default as E } from "./components/GeneralComponents/GlMultiItemSlide.vue.js";
-import { default as U } from "./components/GeneralComponents/GlMultiItemSlideDynamic.vue.js";
-import { default as q } from "./components/GeneralComponents/GlModal.vue.js";
-import { default as J } from "./components/GeneralComponents/GlModalWithoutOverflow.vue.js";
-import { default as Q } from "./components/GeneralComponents/GlModalShow.vue.js";
-import { default as X } from "./components/GeneralComponents/GlToggleBox.vue.js";
-import { default as Z } from "./components/GeneralComponents/GlToggleBoxTrueFalse.vue.js";
-import { default as $ } from "./components/GeneralComponents/GlDropdown.vue.js";
-import { default as ea } from "./components/GeneralComponents/GLTextarea.vue.js";
-import { default as oa } from "./components/GeneralComponents/GlTinymce.vue.js";
-import { default as ra } from "./components/GeneralComponents/GlCodeMirror.vue.js";
-import { default as sa } from "./components/GeneralComponents/GlCodeMirrorTranslate.vue.js";
-import { default as ua } from "./components/GeneralComponents/GlTinymceTranslate.vue.js";
-import { default as pa } from "./components/GeneralComponents/DataTable/GLDataTableServerSide.vue.js";
-import { default as Ga } from "./components/GeneralComponents/DataTable/GlDataTableComponent.vue.js";
-import { default as na } from "./components/GeneralComponents/DataTable/GlDataTableServerSideGroupBy.vue.js";
-import { default as ca } from "./components/GeneralComponents/DataTable/GLDataTable.vue.js";
-import { default as ba } from "./components/GeneralComponents/DataTable/DatatableConvertCronToHuman.vue.js";
-import { default as Ca } from "./components/GeneralComponents/DeleteConfirmationModal.vue.js";
-import { default as La } from "./components/GeneralComponents/GlAccordionsWrapper.vue.js";
-import { default as Pa } from "./components/GeneralComponents/GlAccordion.vue.js";
-import { default as ya } from "./components/GeneralComponents/GlToastList.vue.js";
-import { default as ka } from "./Stores/toast.js";
-import { default as Aa } from "./components/GeneralComponents/DataTable/DatatableAction.vue.js";
+import { default as U } from "./components/GeneralComponents/GlTab.vue.js";
+import { default as j } from "./components/GeneralComponents/GlTabShow.vue.js";
+import { default as z } from "./components/GeneralComponents/GlMultiItemSlide.vue.js";
+import { default as K } from "./components/GeneralComponents/GlMultiItemSlideDynamic.vue.js";
+import { default as V } from "./components/GeneralComponents/GlModal.vue.js";
+import { default as Y } from "./components/GeneralComponents/GlModalWithoutOverflow.vue.js";
+import { default as $ } from "./components/GeneralComponents/GlModalShow.vue.js";
+import { default as ea } from "./components/GeneralComponents/GlToggleBox.vue.js";
+import { default as oa } from "./components/GeneralComponents/GlToggleBoxTrueFalse.vue.js";
+import { default as ra } from "./components/GeneralComponents/GlDropdown.vue.js";
+import { default as sa } from "./components/GeneralComponents/GLTextarea.vue.js";
+import { default as ua } from "./components/GeneralComponents/GlTinymce.vue.js";
+import { default as pa } from "./components/GeneralComponents/GlCodeMirror.vue.js";
+import { default as Ga } from "./components/GeneralComponents/GlCodeMirrorTranslate.vue.js";
+import { default as na } from "./components/GeneralComponents/GlTinymceTranslate.vue.js";
+import { default as Ta } from "./components/GeneralComponents/DataTable/GLDataTableServerSide.vue.js";
+import { default as ba } from "./components/GeneralComponents/DataTable/GlDataTableComponent.vue.js";
+import { default as Ca } from "./components/GeneralComponents/DataTable/GlDataTableServerSideGroupBy.vue.js";
+import { default as Pa } from "./components/GeneralComponents/DataTable/GLDataTable.vue.js";
+import { default as Ea } from "./components/GeneralComponents/DataTable/DatatableConvertCronToHuman.vue.js";
+import { default as Fa } from "./components/GeneralComponents/DeleteConfirmationModal.vue.js";
+import { default as wa } from "./components/GeneralComponents/GlAccordionsWrapper.vue.js";
+import { default as Oa } from "./components/GeneralComponents/GlAccordion.vue.js";
+import { default as va } from "./components/GeneralComponents/GlToastList.vue.js";
+import { default as Ia } from "./Stores/toast.js";
+import { default as Na } from "./components/GeneralComponents/DataTable/DatatableAction.vue.js";
 import { default as Ba } from "./components/GeneralComponents/DataTable/DatatableDeleteAction.vue.js";
-import { default as ha } from "./components/GeneralComponents/DataTable/DatatableDeleteEditAction.vue.js";
-import { default as Ha } from "./components/GeneralComponents/DataTable/DatatableFileDownload.vue.js";
-import { default as Ea } from "./components/GeneralComponents/DataTable/DatatableFiles.vue.js";
-import { default as Ua } from "./components/GeneralComponents/DataTable/DatatableHtml.vue.js";
-import { default as qa } from "./components/GeneralComponents/DataTable/DatatableList.vue.js";
-import { default as Ja } from "./components/GeneralComponents/DataTable/DatatableListNested.vue.js";
-import { default as Qa } from "./components/GeneralComponents/DataTable/DatatablePicture.vue.js";
-import { default as Xa } from "./components/GeneralComponents/DataTable/DatatablePictures.vue.js";
-import { default as Za } from "./components/GeneralComponents/DataTable/DatatableStatus.vue.js";
-import { default as $a } from "./components/GeneralComponents/DataTable/DatatableStatusGeneral.vue.js";
-import { default as ee } from "./components/GeneralComponents/DataTable/DatatableStatusSpecficColor.vue.js";
-import { default as oe } from "./components/GeneralComponents/DataTable/DatatableStatusTextLabelGeneral.vue.js";
-import { default as re } from "./components/GeneralComponents/DataTable/DatatableDateTime.vue.js";
-import { default as se } from "./components/GeneralComponents/DataTable/DatatableDate.vue.js";
-import { default as ue } from "./components/GeneralComponents/DataTable/DatatableStatusServer.vue.js";
-import { default as pe } from "./components/GeneralComponents/DataTable/DatatableCommand.vue.js";
-import { default as Ge } from "./components/LaravelVuePagination/TailwindPagination.vue.js";
-import { default as ne } from "./components/GeneralComponents/ConfirmationModal.vue.js";
-import { default as ce } from "./components/GeneralComponents/DynamicConfirmation.vue.js";
-import { default as be } from "./components/GeneralComponents/GlCodeCopy.vue.js";
-import { default as Ce } from "./components/GeneralComponents/GlTextCopy.vue.js";
-import { default as Le } from "./components/GeneralComponents/StatusRunningSuccessFailed.vue.js";
-import { default as Pe } from "./components/GeneralComponents/StatusConnectingConnectedDisconnected.vue.js";
-import { default as ye } from "./ClickOutsideDirective.js";
-import { default as ke } from "./Form.js";
-import { default as Ae } from "./multilingual.js";
-import { glLocale as Be, setGlLocales as Ie } from "./localeStore.js";
-import { default as We, triggerPrint as He } from "./print/print.js";
+import { default as Ua } from "./components/GeneralComponents/DataTable/DatatableDeleteEditAction.vue.js";
+import { default as ja } from "./components/GeneralComponents/DataTable/DatatableFileDownload.vue.js";
+import { default as za } from "./components/GeneralComponents/DataTable/DatatableFiles.vue.js";
+import { default as Ka } from "./components/GeneralComponents/DataTable/DatatableHtml.vue.js";
+import { default as Va } from "./components/GeneralComponents/DataTable/DatatableList.vue.js";
+import { default as Ya } from "./components/GeneralComponents/DataTable/DatatableListNested.vue.js";
+import { default as $a } from "./components/GeneralComponents/DataTable/DatatablePicture.vue.js";
+import { default as ee } from "./components/GeneralComponents/DataTable/DatatablePictures.vue.js";
+import { default as oe } from "./components/GeneralComponents/DataTable/DatatableStatus.vue.js";
+import { default as re } from "./components/GeneralComponents/DataTable/DatatableStatusGeneral.vue.js";
+import { default as se } from "./components/GeneralComponents/DataTable/DatatableStatusSpecficColor.vue.js";
+import { default as ue } from "./components/GeneralComponents/DataTable/DatatableStatusTextLabelGeneral.vue.js";
+import { default as pe } from "./components/GeneralComponents/DataTable/DatatableDateTime.vue.js";
+import { default as Ge } from "./components/GeneralComponents/DataTable/DatatableDate.vue.js";
+import { default as ne } from "./components/GeneralComponents/DataTable/DatatableStatusServer.vue.js";
+import { default as Te } from "./components/GeneralComponents/DataTable/DatatableCommand.vue.js";
+import { default as be } from "./components/LaravelVuePagination/TailwindPagination.vue.js";
+import { default as Ce } from "./components/GeneralComponents/ConfirmationModal.vue.js";
+import { default as Pe } from "./components/GeneralComponents/DynamicConfirmation.vue.js";
+import { default as Ee } from "./components/GeneralComponents/GlCodeCopy.vue.js";
+import { default as Fe } from "./components/GeneralComponents/GlTextCopy.vue.js";
+import { default as we } from "./components/GeneralComponents/StatusRunningSuccessFailed.vue.js";
+import { default as Oe } from "./components/GeneralComponents/StatusConnectingConnectedDisconnected.vue.js";
+import { default as ve } from "./ClickOutsideDirective.js";
+import { default as Ie } from "./Form.js";
+import { default as Ne } from "./multilingual.js";
+import { glLocale as Be, setGlLocales as _e } from "./localeStore.js";
+import { default as We, triggerPrint as je } from "./print/print.js";
 export {
-  ye as ClickOutsideDirective,
-  oe as DatatableStatusTextLabelGeneral,
-  ke as Form,
-  pe as GLDatatableCommand,
-  se as GLDatatableDate,
-  re as GLDatatableDateTime,
-  ue as GLDatatableStatusServer,
-  Pa as GlAccordion,
-  La as GlAccordionsWrapper,
+  ve as ClickOutsideDirective,
+  ue as DatatableStatusTextLabelGeneral,
+  Ie as Form,
+  Te as GLDatatableCommand,
+  Ge as GLDatatableDate,
+  pe as GLDatatableDateTime,
+  ne as GLDatatableStatusServer,
+  Oa as GlAccordion,
+  wa as GlAccordionsWrapper,
   p as GlButton,
   s as GlCard,
-  be as GlCodeCopy,
-  ra as GlCodeMirror,
-  sa as GlCodeMirrorTranslate,
-  ne as GlConfirmationModal,
-  ca as GlDataTable,
-  Ga as GlDataTableComponent,
-  pa as GlDataTableServerSide,
-  na as GlDataTableServerSideGroupBy,
-  Aa as GlDatatableAction,
-  ba as GlDatatableConvertCronToHuman,
+  Ee as GlCodeCopy,
+  pa as GlCodeMirror,
+  Ga as GlCodeMirrorTranslate,
+  Ce as GlConfirmationModal,
+  Pa as GlDataTable,
+  ba as GlDataTableComponent,
+  Ta as GlDataTableServerSide,
+  Ca as GlDataTableServerSideGroupBy,
+  Na as GlDatatableAction,
+  Ea as GlDatatableConvertCronToHuman,
   Ba as GlDatatableDeleteAction,
-  ha as GlDatatableDeleteEditAction,
-  Ha as GlDatatableFileDownload,
-  Ea as GlDatatableFiles,
-  Ua as GlDatatableHtml,
-  qa as GlDatatableList,
-  Ja as GlDatatableListNested,
-  Qa as GlDatatablePicture,
-  Xa as GlDatatablePictures,
-  Za as GlDatatableStatus,
-  $a as GlDatatableStatusGeneral,
-  ee as GlDatatableStatusSpecficColor,
-  b as GlDatePicker,
-  k as GlDateRangeCalendar,
-  L as GlDateRangePicker,
-  C as GlDateTimePicker,
-  P as GlDateTimeRangePicker,
-  Ca as GlDeleteConfirmationModal,
-  $ as GlDropdown,
-  ce as GlDynamicConfirmation,
+  Ua as GlDatatableDeleteEditAction,
+  ja as GlDatatableFileDownload,
+  za as GlDatatableFiles,
+  Ka as GlDatatableHtml,
+  Va as GlDatatableList,
+  Ya as GlDatatableListNested,
+  $a as GlDatatablePicture,
+  ee as GlDatatablePictures,
+  oe as GlDatatableStatus,
+  re as GlDatatableStatusGeneral,
+  se as GlDatatableStatusSpecficColor,
+  E as GlDatePicker,
+  I as GlDateRangeCalendar,
+  w as GlDateRangePicker,
+  F as GlDateTimePicker,
+  O as GlDateTimeRangePicker,
+  Fa as GlDeleteConfirmationModal,
+  ra as GlDropdown,
+  Pe as GlDynamicConfirmation,
   o as GlFilesUpload,
   r as GlLanguageSelector,
-  q as GlModal,
-  Q as GlModalShow,
-  J as GlModalWithoutOverflow,
-  E as GlMultiItemSlide,
-  U as GlMultiItemSlideDynamic,
+  V as GlModal,
+  $ as GlModalShow,
+  Y as GlModalWithoutOverflow,
+  z as GlMultiItemSlide,
+  K as GlMultiItemSlideDynamic,
   u as GlMultiSelectDropdown,
+  b as GlPhoneInput,
   We as GlPrint,
-  Pe as GlStatusConnectingConnectedDisconnected,
-  Le as GlStatusRunningSuccessFailed,
-  h as GlTab,
-  H as GlTabShow,
+  Oe as GlStatusConnectingConnectedDisconnected,
+  we as GlStatusRunningSuccessFailed,
+  U as GlTab,
+  j as GlTabShow,
   B as GlTabsWrapper,
-  Ge as GlTailwindPagination,
-  Ce as GlTextCopy,
-  c as GlTextInput,
-  A as GlTextInputFile,
+  be as GlTailwindPagination,
+  Fe as GlTextCopy,
+  T as GlTextInput,
+  N as GlTextInputFile,
   n as GlTextTranslate,
-  ea as GlTextarea,
+  sa as GlTextarea,
   G as GlTextareaTranslate,
-  y as GlTimeRangePicker,
-  oa as GlTinymce,
-  ua as GlTinymceTranslate,
-  ka as GlToast,
-  ya as GlToastList,
-  X as GlToggleBox,
-  Z as GlToggleBoxTrueFalse,
+  v as GlTimeRangePicker,
+  ua as GlTinymce,
+  na as GlTinymceTranslate,
+  Ia as GlToast,
+  va as GlToastList,
+  ea as GlToggleBox,
+  oa as GlToggleBoxTrueFalse,
+  C as PHONE_CODE_DEFAULTS,
+  g as PHONE_COUNTRIES,
+  P as PHONE_PREFERRED,
   Be as glLocale,
-  Ae as multilingual,
-  Ie as setGlLocales,
-  He as triggerPrint
+  Ne as multilingual,
+  _e as setGlLocales,
+  je as triggerPrint
 };

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.9",
+  "version": "1.3.11",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mrgiant/GoldenLogicUi.git"