npm - golden-logic-ui - Versions diffs - 1.3.0 → 1.3.2 - Mend

golden-logic-ui 1.3.0 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/components/GeneralComponents/DataTable/DatatableDeleteAction.vue.js CHANGED Viewed

@@ -1,13 +1,13 @@
-import { ref as c, resolveDirective as x, createElementBlock as s, openBlock as i, Fragment as b, createVNode as k, withDirectives as u, createCommentVNode as p, createElementVNode as e, withModifiers as D, createTextVNode as _, vShow as C } from "vue";
-import A from "../DeleteConfirmationModal.vue.js";
-import M from "../../../Stores/toast.js";
+import { ref as c, resolveDirective as x, createElementBlock as d, openBlock as n, Fragment as k, createVNode as D, withDirectives as u, createCommentVNode as p, createElementVNode as e, withModifiers as _, createTextVNode as C, vShow as A } from "vue";
+import M from "../DeleteConfirmationModal.vue.js";
+import g from "../../../Stores/toast.js";
 const O = {
   key: 0,
   class: "flex lg:justify-center"
 }, j = { class: "absolute z-10 mt-5 origin-top-right bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700 dark:divide-gray-600" }, B = {
   class: "py-2 text-sm text-gray-700 dark:text-gray-200",
   "aria-labelledby": "dropdownDividerButton"
-}, N = { key: 0 }, Z = {
+}, N = { key: 0 }, T = {
   __name: "DatatableDeleteAction",
   props: {
     field: {
@@ -32,37 +32,41 @@ const O = {
     }
   },
   emits: ["deleteAction"],
-  setup(t, { emit: g }) {
-    const n = t, a = c(!1), l = c(!1), m = () => {
-      a.value = !1;
-    }, f = () => {
-      a.value = !0;
-    }, d = () => {
-      l.value = !1;
+  setup(t, { emit: m }) {
+    const a = t, s = c(!1), l = c(!1), f = () => {
+      s.value = !1;
     }, y = () => {
+      s.value = !0;
+    }, i = () => {
+      l.value = !1;
+    }, h = () => {
       l.value = !0;
-    }, v = g, h = () => {
-      axios.delete(`${n.xprops.route}/${n.row.id}`).then(() => {
-        d(), v("deleteAction"), M.methods.add({
+    }, v = m, w = () => {
+      axios.delete(`${a.xprops.route}/${a.row.id}`).then(() => {
+        i(), v("deleteAction"), g.methods.add({
           message: "Item deleted successfully.",
           type: "success",
           duration: 5e3
         });
       }).catch((o) => {
-        console.log(o);
+        i(), g.methods.add({
+          message: o.response?.data?.message ?? a.language?.delete_failed ?? "That item could not be deleted.",
+          type: "error",
+          duration: 5e3
+        });
       });
     };
     return (o, r) => {
-      const w = x("click-outside");
-      return i(), s(b, null, [
-        k(A, {
+      const b = x("click-outside");
+      return n(), d(k, null, [
+        D(M, {
           isOpen: l.value,
-          onConfirmDelete: h,
-          onCancelDelete: d
+          onConfirmDelete: w,
+          onCancelDelete: i
         }, null, 8, ["isOpen"]),
-        t.row && o.can(`delete_${t.xprops.permission}`) ? u((i(), s("div", O, [
+        t.row && o.can(`delete_${t.xprops.permission}`) ? u((n(), d("div", O, [
           e("button", {
-            onClick: f,
+            onClick: y,
             class: "inline-flex items-center p-2 text-sm font-medium text-center text-gray-900 bg-white rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-hidden dark:text-white focus:ring-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-600",
             type: "button"
           }, r[0] || (r[0] = [
@@ -78,27 +82,27 @@ const O = {
           ])),
           u(e("div", j, [
             e("ul", B, [
-              o.can(`delete_${t.xprops.permission}`) ? (i(), s("li", N, [
+              o.can(`delete_${t.xprops.permission}`) ? (n(), d("li", N, [
                 e("a", {
                   href: "#",
-                  onClick: D(y, ["prevent"]),
+                  onClick: _(h, ["prevent"]),
                   class: "block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
                 }, r[1] || (r[1] = [
                   e("i", { class: "mr-2 fa-solid fa-trash-can opacity-80" }, null, -1),
-                  _(" Remove")
+                  C(" Remove")
                 ]))
               ])) : p("", !0)
             ])
           ], 512), [
-            [C, a.value]
+            [A, s.value]
           ])
         ])), [
-          [w, m]
+          [b, f]
         ]) : p("", !0)
       ], 64);
     };
   }
 };
 export {
-  Z as default
+  T as default
 };

package/dist/components/GeneralComponents/DataTable/DatatableDeleteEditAction.vue.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { ref as g, resolveDirective as A, createElementBlock as a, openBlock as l, Fragment as C, createVNode as $, withDirectives as p, createCommentVNode as d, createElementVNode as t, withModifiers as m, createTextVNode as f, toDisplayString as y, vShow as O } from "vue";
-import j from "../DeleteConfirmationModal.vue.js";
-import M from "../../../Stores/toast.js";
+import { ref as g, resolveDirective as C, createElementBlock as l, openBlock as i, Fragment as $, createVNode as O, withDirectives as m, createCommentVNode as c, createElementVNode as t, withModifiers as p, createTextVNode as f, toDisplayString as y, vShow as j } from "vue";
+import M from "../DeleteConfirmationModal.vue.js";
+import v from "../../../Stores/toast.js";
 const B = {
   key: 0,
   class: "flex lg:justify-center"
@@ -38,40 +38,44 @@ const B = {
     }
   },
   emits: ["deleteAction", "editAction"],
-  setup(e, { emit: v }) {
-    const i = e, s = g(!1), n = g(!1), c = () => {
+  setup(e, { emit: h }) {
+    const a = e, s = g(!1), n = g(!1), d = () => {
       n.value = !1;
-    }, h = () => {
-      n.value = !0;
     }, x = () => {
-      s.value = !1;
+      n.value = !0;
     }, k = () => {
+      s.value = !1;
+    }, w = () => {
       s.value = !0;
-    }, u = v, w = (o) => {
+    }, u = h, b = (o) => {
       u("editAction", o);
-    }, b = () => {
-      axios.delete(`${i.xprops.route}/${i.row.id}`).then(() => {
-        c(), u("deleteAction"), M.methods.add({
-          message: i.language?.item_deleted_successfully ?? "Item deleted successfully.",
+    }, D = () => {
+      axios.delete(`${a.xprops.route}/${a.row.id}`).then(() => {
+        d(), u("deleteAction"), v.methods.add({
+          message: a.language?.item_deleted_successfully ?? "Item deleted successfully.",
           type: "success",
           duration: 5e3
         });
       }).catch((o) => {
-        console.log(o);
+        d(), v.methods.add({
+          message: o.response?.data?.message ?? a.language?.delete_failed ?? "That item could not be deleted.",
+          type: "error",
+          duration: 5e3
+        });
       });
     };
     return (o, r) => {
-      const D = A("click-outside");
-      return l(), a(C, null, [
-        $(j, {
+      const A = C("click-outside");
+      return i(), l($, null, [
+        O(M, {
           language: e.language,
           isOpen: n.value,
-          onConfirmDelete: b,
-          onCancelDelete: c
+          onConfirmDelete: D,
+          onCancelDelete: d
         }, null, 8, ["language", "isOpen"]),
-        e.row && (o.can(`delete_${e.xprops.permission}`) || o.can(`access_${e.xprops.permission}`)) ? p((l(), a("div", B, [
+        e.row && (o.can(`delete_${e.xprops.permission}`) || o.can(`access_${e.xprops.permission}`)) ? m((i(), l("div", B, [
           t("button", {
-            onClick: k,
+            onClick: w,
             class: "inline-flex items-center p-2 text-sm font-medium text-center text-gray-900 bg-white rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-hidden dark:text-white focus:ring-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-600",
             type: "button"
           }, r[1] || (r[1] = [
@@ -85,35 +89,35 @@ const B = {
               t("path", { d: "M3.5 1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 6.041a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 5.959a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" })
             ], -1)
           ])),
-          p(t("div", E, [
+          m(t("div", E, [
             t("ul", N, [
-              o.can(`access_${e.xprops.permission}`) ? (l(), a("li", S, [
+              o.can(`access_${e.xprops.permission}`) ? (i(), l("li", S, [
                 t("a", {
                   href: "#",
-                  onClick: r[0] || (r[0] = m((Z) => w(e.row), ["prevent"])),
+                  onClick: r[0] || (r[0] = p((T) => b(e.row), ["prevent"])),
                   class: "block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
                 }, [
                   r[2] || (r[2] = t("i", { class: "mr-1 fa-solid fa-pen-to-square opacity-80" }, null, -1)),
                   f(" " + y(e.language?.edit ?? "Edit"), 1)
                 ])
-              ])) : d("", !0),
-              o.can(`delete_${e.xprops.permission}`) ? (l(), a("li", V, [
+              ])) : c("", !0),
+              o.can(`delete_${e.xprops.permission}`) ? (i(), l("li", V, [
                 t("a", {
                   href: "#",
-                  onClick: m(h, ["prevent"]),
+                  onClick: p(x, ["prevent"]),
                   class: "block px-4 py-2 text-red-600 hover:text-white hover:bg-red-600 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600"
                 }, [
                   r[3] || (r[3] = t("i", { class: "mr-1 fa-solid fa-trash-can opacity-80" }, null, -1)),
                   f(" " + y(e.language?.remove ?? "Remove"), 1)
                 ])
-              ])) : d("", !0)
+              ])) : c("", !0)
             ])
           ], 512), [
-            [O, s.value]
+            [j, s.value]
           ])
         ])), [
-          [D, x]
-        ]) : d("", !0)
+          [A, k]
+        ]) : c("", !0)
       ], 64);
     };
   }

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

@@ -1,27 +1,27 @@
-import { ref as m, shallowRef as X, onMounted as fe, onBeforeUnmount as ve, watch as M, createElementBlock as c, openBlock as f, Fragment as Y, createCommentVNode as p, normalizeClass as E, createElementVNode as s, toDisplayString as w, withDirectives as P, withModifiers as Z, vShow as ee, vModelText as me, renderList as ge, nextTick as he } from "vue";
-const pe = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3 mb-4" }, xe = {
+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 p, normalizeClass as B, createElementVNode as s, toDisplayString as w, withDirectives as R, 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"
-}, we = ["name", "id", "value"], be = {
+}, be = ["name", "id", "value"], ke = {
   key: 0,
   class: "dropdown"
-}, ke = { class: "relative focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:focus:ring-blue-500 dark:focus:border-blue-500" }, Se = { class: "relative showOptions" }, _e = ["value", "placeholder"], Ce = { 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" }, De = {
+}, 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 = {
   key: 0,
   class: "border-b border-gray-200 dark:border-gray-700"
-}, Oe = { class: "relative" }, Ee = ["id", "placeholder"], Be = { class: "flex items-center py-2 pr-4" }, $e = ["onClick", "onMousedown", "id"], Me = { class: "flex justify-between items-center py-2" }, Le = ["innerHTML"], Ie = {
+}, 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"], 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 = {
+}, Ve = {
   key: 3,
   class: "p-2 text-gray-500"
-}, Ve = { class: "block mt-1 text-sm font-normal leading-5 text-red-500" }, je = { class: "block mt-1 text-sm font-normal leading-5 text-gray-500" }, qe = {
+}, je = { class: "block mt-1 text-sm font-normal leading-5 text-red-500" }, Ae = { class: "block mt-1 text-sm font-normal leading-5 text-gray-500" }, Ne = {
   __name: "GlDropdown",
   props: {
     modelValue: {
@@ -109,51 +109,51 @@ const pe = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3
     }
   },
   emits: ["update:modelValue", "selected", "selectionChanged"],
-  setup(r, { emit: te }) {
-    const o = r, b = te, a = m({}), R = m(!1), y = m(0), x = m(!1), v = m(""), g = m(""), B = m(!1), C = m(1), D = m(null), $ = m(1), i = X([]), L = X([]), T = m([]), le = m(null), F = m(null);
-    let O = !1, h = null, U = 0, k = null;
-    const H = (e) => e?.name === "CanceledError" || e?.name === "AbortError" || typeof axios < "u" && axios.isCancel?.(e), V = async (e = "down") => {
-      if (B.value || !o.api_url) return;
+  setup(r, { emit: le }) {
+    const o = r, b = le, a = c({}), F = c(!1), y = c(0), x = c(!1), m = c(""), g = c(""), $ = c(!1), k = c(1), S = c(null), L = c(1), i = Y([]), O = c(!1), I = Y([]), U = c([]), ne = c(null), H = c(null);
+    let E = !1, h = null, V = 0, _ = null;
+    const z = (e) => e?.name === "CanceledError" || e?.name === "AbortError" || typeof axios < "u" && axios.isCancel?.(e), j = async (e = "down") => {
+      if ($.value || !o.api_url) return;
       h && h.abort(), h = new AbortController();
-      const t = ++U;
-      B.value = !0;
+      const t = ++V;
+      $.value = !0;
       try {
-        const l = e === "up" ? Math.max(C.value - 1, $.value) : C.value, { data: n } = await axios.get(o.api_url, {
-          params: { search: v.value, page: l, per_page: 20 },
+        const l = e === "up" ? Math.max(k.value - 1, L.value) : k.value, { data: n } = await axios.get(o.api_url, {
+          params: { search: m.value, page: l, per_page: 20 },
           signal: h.signal
         });
-        if (O || t !== U) return;
+        if (E || t !== V) return;
         if (!n || !n.data) {
-          i.value = [];
+          i.value = [], O.value = !1;
           return;
         }
-        const u = Q(n.data);
+        const u = W(n.data);
         if (e === "down") {
-          const d = i.value.length ? i.value.concat(u) : u, _ = a.value;
-          S(_) && _.id !== void 0 && _.name && !d.some((I) => String(I.id) === String(_.id)) && d.unshift(_), i.value = d, C.value++, D.value = n.last_page;
+          const d = i.value.length ? i.value.concat(u) : u, D = a.value;
+          C(D) && D.id !== void 0 && D.name && !d.some((T) => String(T.id) === String(D.id)) && d.unshift(D), i.value = d, k.value++, S.value = n.last_page, O.value = !0;
         }
-        D.value || (D.value = n.last_page), $.value || ($.value = 1);
+        S.value || (S.value = n.last_page), L.value || (L.value = 1);
       } catch (l) {
-        if (H(l)) return;
+        if (z(l)) return;
         console.error("Error fetching data:", l);
       } finally {
-        !O && t === U && (B.value = !1, h = null);
+        !E && t === V && ($.value = !1, h = null);
       }
-    }, ne = async (e) => {
+    }, ae = async (e) => {
       if (!o.api_url || e === null || e === void 0 || e === "") return null;
       try {
         const { data: t } = await axios.get(o.api_url, {
           params: { search: e, per_page: 20 }
         });
-        if (O) return null;
+        if (E) return null;
         const l = t?.data;
         if (!l || !l.length) return null;
         const n = String(e);
-        return Q(l).find((u) => String(u.id) === n) || null;
+        return W(l).find((u) => String(u.id) === n) || null;
       } catch (t) {
-        return H(t) || console.error("Error fetching option by id:", t), null;
+        return z(t) || console.error("Error fetching option by id:", t), null;
       }
-    }, ae = async (e) => {
+    }, oe = async (e) => {
       const t = typeof e == "object" && e !== null ? e.id : e;
       if (t == null || t === "") {
         a.value = {};
@@ -166,27 +166,27 @@ const pe = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3
         a.value = n;
         return;
       }
-      const u = await ne(t);
-      O || (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: "" });
-    }, oe = (e) => {
+      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: "" });
+    }, re = (e) => {
       const t = e.target;
-      t && t.scrollHeight - t.clientHeight <= t.scrollTop + 10 && C.value <= D.value && V("down");
-    }, z = (e) => {
-      e.target && (document.activeElement.classList.contains("showOptions" + g.value) ? x.value || j() : e.target.id != o.field_name + "search" + g.value && e.target.id != o.field_name && !e.target.classList.contains("showOptions" + g.value) && (N(), y.value = 0, x.value = !1));
-    }, j = () => {
+      t && t.scrollHeight - t.clientHeight <= t.scrollTop + 10 && k.value <= S.value && j("down");
+    }, K = (e) => {
+      e.target && (document.activeElement.classList.contains("showOptions" + g.value) ? x.value || A() : e.target.id != o.field_name + "search" + g.value && e.target.id != o.field_name && !e.target.classList.contains("showOptions" + g.value) && (P(), y.value = 0, x.value = !1));
+    }, A = () => {
       if (!o.show) {
         if (x.value) {
           x.value = !1;
           return;
         }
-        v.value = "", x.value = !0, o.api_url && i.value.length === 0 && V("down"), he(() => {
+        m.value = "", x.value = !0, o.api_url && (!O.value || i.value.length === 0) && (k.value = 1, S.value = null, i.value = [], O.value = !1, j("down")), pe(() => {
           const e = document.getElementById(
             `${o.field_name}search${g.value}`
           );
           e && e.focus();
         });
       }
-    }, A = () => {
+    }, q = () => {
       const e = (t) => {
         if (o.allow_custom && t) {
           const l = typeof t == "object" ? t.id : t;
@@ -194,7 +194,7 @@ const pe = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3
         }
         return {};
       };
-      return S(a.value) ? typeof a.value == "object" ? i.value.find(
+      return C(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)
@@ -204,34 +204,34 @@ const pe = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3
         (t) => String(t.id) === String(o.modelValue)
       ) || e(o.modelValue) : {};
     };
-    fe(() => {
-      g.value = se(), o.show || (document.body.addEventListener("click", K), document.addEventListener("focusin", z));
-    }), ve(() => {
-      O = !0, h && (h.abort(), h = null), k && (clearTimeout(k), k = null), document.body.removeEventListener("click", K), document.removeEventListener("focusin", z);
+    ve(() => {
+      g.value = ue(), o.show || (document.body.addEventListener("click", G), document.addEventListener("focusin", K));
+    }), me(() => {
+      E = !0, h && (h.abort(), h = null), _ && (clearTimeout(_), _ = null), document.body.removeEventListener("click", G), document.removeEventListener("focusin", K);
     });
-    function re() {
-      const e = L.value, t = o.maxItem, l = v.value;
+    function ie() {
+      const e = I.value, t = o.maxItem, l = m.value;
       if (!l)
         return e.length > t ? e.slice(0, t) : e;
       const n = l.toLowerCase(), u = [];
-      for (let d = 0, _ = e.length; d < _ && u.length < t; d++) {
-        const I = e[d];
-        String(I.name).toLowerCase().includes(n) && u.push(I);
+      for (let d = 0, D = e.length; d < D && u.length < t; d++) {
+        const T = e[d];
+        String(T.name).toLowerCase().includes(n) && u.push(T);
       }
       return u;
     }
-    function ie(e) {
+    function se(e) {
       switch (e.key) {
         case "ArrowUp":
         case "ArrowDown":
-          e.preventDefault(), J(e.key);
+          e.preventDefault(), Q(e.key);
           break;
         case "Enter":
-          J(e.key);
+          Q(e.key);
           break;
       }
     }
-    function se() {
+    function ue() {
       if (typeof crypto < "u" && typeof crypto.randomUUID == "function")
         return crypto.randomUUID();
       let e = Date.now();
@@ -240,27 +240,27 @@ const pe = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3
         return e = Math.floor(e / 16), (t === "x" ? l : l & 3 | 8).toString(16);
       });
     }
-    function S(e) {
+    function C(e) {
       return e && typeof e == "object" && Object.keys(e).length > 0;
     }
-    function K(e) {
-      e.target.id != o.field_name + "search" + g.value && e.target.id != o.field_name && !e.target.classList.contains("showOptions" + g.value) && (N(), y.value = 0, x.value = !1);
-    }
     function G(e) {
-      const t = `${e}${g.value}`, l = document.getElementById(t), n = F.value;
+      e.target.id != o.field_name + "search" + g.value && e.target.id != o.field_name && !e.target.classList.contains("showOptions" + g.value) && (P(), y.value = 0, x.value = !1);
+    }
+    function J(e) {
+      const t = `${e}${g.value}`, l = document.getElementById(t), n = H.value;
       if (l && n) {
         const u = l.getBoundingClientRect(), d = n.getBoundingClientRect();
         u.top < d.top ? n.scrollTop -= d.top - u.top : u.bottom > d.bottom && (n.scrollTop += u.bottom - d.bottom);
       }
     }
-    function ue(e) {
+    function de(e) {
       const t = `${e}${g.value}`, l = document.getElementById(t);
       l && l.click();
     }
-    function J(e) {
-      e === "ArrowDown" && y.value < i.value.length && (y.value++, G(y.value)), e === "ArrowUp" && y.value > 1 && (y.value--, G(y.value)), e === "Enter" && ue(y.value);
-    }
     function Q(e) {
+      e === "ArrowDown" && y.value < i.value.length && (y.value++, J(y.value)), e === "ArrowUp" && y.value > 1 && (y.value--, J(y.value)), e === "Enter" && de(y.value);
+    }
+    function W(e) {
       const t = new Array(e.length);
       for (let l = 0; l < e.length; l++) {
         const n = e[l];
@@ -268,7 +268,7 @@ const pe = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3
       }
       return t;
     }
-    function de() {
+    function ce() {
       const e = o.options, t = new Array(e.length);
       for (let l = 0; l < e.length; l++) {
         const n = e[l];
@@ -276,33 +276,33 @@ const pe = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3
       }
       return t;
     }
-    function W() {
-      const e = v.value, t = { id: e, name: e }, l = String(e);
-      T.value.some((n) => String(n.id) === l) || T.value.push(t), i.value.some((n) => String(n.id) === l) || (i.value = [...i.value, t], L.value = [...L.value, t]), q(t);
+    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]), N(t);
     }
-    function q(e) {
-      R.value = !0, a.value = e, x.value = !1, b("update:modelValue", a.value.id), b("selected", a.value), b("selectionChanged", a.value);
+    function N(e) {
+      F.value = !0, a.value = e, x.value = !1, b("update:modelValue", a.value.id), b("selected", a.value), b("selectionChanged", a.value);
     }
-    function ce() {
-      o.show || (a.value = {}, v.value = "", b("update:modelValue", ""), b("selected", a.value), b("selectionChanged", a.value), j());
+    function fe() {
+      o.show || (a.value = {}, m.value = "", b("update:modelValue", ""), b("selected", a.value), b("selectionChanged", a.value), A());
     }
-    function N() {
-      (!a.value || !a.value.id) && (a.value = {}, v.value = "");
+    function P() {
+      (!a.value || !a.value.id) && (a.value = {}, m.value = "");
     }
-    return M(v, () => {
+    return M(m, () => {
       if (!o.api_url) {
-        i.value = re(), i.value.length === 0 && (a.value = {});
+        i.value = ie(), i.value.length === 0 && (a.value = {});
         return;
       }
-      k && clearTimeout(k), k = setTimeout(() => {
-        k = null, !O && (C.value = 1, D.value = null, $.value = 1, i.value = [], V("down"));
+      _ && clearTimeout(_), _ = setTimeout(() => {
+        _ = null, !E && (k.value = 1, S.value = null, L.value = 1, i.value = [], O.value = !1, j("down"));
       }, 250);
     }), M(a, (e) => {
-      S(e) && e.id !== o.modelValue && b("update:modelValue", e.id);
+      C(e) && e.id !== o.modelValue && b("update:modelValue", e.id);
     }), M(
       () => o.api_url,
       () => {
-        h && (h.abort(), h = null), C.value = 1, D.value = null, $.value = 1, i.value = [];
+        h && (h.abort(), h = null), k.value = 1, S.value = null, L.value = 1, i.value = [], O.value = !1;
       },
       { immediate: !0 }
     ), M(
@@ -312,74 +312,74 @@ const pe = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3
           a.value = {};
           return;
         }
-        o.api_url ? R.value ? a.value = A() : await ae(e) : a.value = A();
+        o.api_url ? F.value ? a.value = q() : await oe(e) : a.value = q();
       },
       { immediate: !0 }
     ), M(
       () => o.options,
       () => {
         if (!o.api_url) {
-          const e = de(), t = new Set(e.map((n) => String(n.id))), l = e;
-          for (const n of T.value) {
+          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));
           }
-          L.value = l, i.value = l, a.value = A();
+          I.value = l, i.value = l, a.value = q();
         }
       },
       // 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) => (f(), c(Y, null, [
-      r.show ? (f(), c("div", {
+    ), (e, t) => (v(), f(Z, null, [
+      r.show ? (v(), f("div", {
         key: 0,
-        class: E(r.field_name)
+        class: B(r.field_name)
       }, [
-        s("h3", pe, w(r.label_name), 1),
-        s("p", ye, [
-          S(a.value) ? (f(), c("span", xe, w(a.value?.name), 1)) : p("", !0)
+        s("h3", ye, w(r.label_name), 1),
+        s("p", xe, [
+          C(a.value) ? (v(), f("span", we, w(a.value?.name), 1)) : p("", !0)
         ]),
         t[6] || (t[6] = s("hr", { class: "opacity-100! bg-gray-200 border-0 dark:bg-gray-700" }, null, -1))
       ], 2)) : p("", !0),
-      r.show ? p("", !0) : (f(), c("div", {
+      r.show ? p("", !0) : (v(), f("div", {
         key: 1,
-        class: E(r.field_name)
+        class: B(r.field_name)
       }, [
         s("input", {
           type: "hidden",
           name: r.field_name,
           id: r.field_name,
           value: a.value?.id
-        }, null, 8, we),
-        r.options ? (f(), c("div", be, [
-          r.label_name ? (f(), c("label", {
+        }, null, 8, be),
+        r.options ? (v(), f("div", ke, [
+          r.label_name ? (v(), f("label", {
             key: 0,
-            class: E({
+            class: B({
               "gl-label-form": r.error_message == "",
               "gl-label-form-invalid": r.error_message !== "",
               required: r.is_required
             })
           }, w(r.label_name), 3)) : p("", !0),
-          s("div", ke, [
-            s("div", Se, [
+          s("div", Se, [
+            s("div", _e, [
               s("input", {
                 ref_key: "myDivDropDown",
-                ref: le,
-                class: E([{
+                ref: ne,
+                class: B([{
                   "gl-input-form": r.error_message == "",
                   "gl-input-form-invalid": r.error_message !== "",
                   [`showOptions${g.value}`]: !0,
-                  "pr-14!": S(a.value) && r.has_cancel,
-                  "pr-8!": !(S(a.value) && r.has_cancel)
+                  "pr-14!": C(a.value) && r.has_cancel,
+                  "pr-8!": !(C(a.value) && r.has_cancel)
                 }, "truncate showOptions1"]),
                 value: a.value?.name,
                 placeholder: r.placeholder,
                 autocomplete: "off",
                 readonly: ""
-              }, null, 10, _e),
-              P(s("i", {
-                onClick: t[0] || (t[0] = Z((l) => ce(), ["stop"])),
+              }, null, 10, Ce),
+              R(s("i", {
+                onClick: t[0] || (t[0] = ee((l) => fe(), ["stop"])),
                 class: "absolute text-gray-500 cursor-pointer pointer-events-auto ltr:right-8 rtl:left-8 hover:text-red-600 dark:hover:text-red-400",
                 style: { top: "13px" }
               }, t[7] || (t[7] = [
@@ -399,15 +399,15 @@ const pe = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3
                   })
                 ], -1)
               ]), 512), [
-                [ee, S(a.value) && r.has_cancel]
+                [te, C(a.value) && r.has_cancel]
               ]),
               s("i", {
-                onClick: t[1] || (t[1] = Z((l) => j(), ["stop"])),
+                onClick: t[1] || (t[1] = ee((l) => A(), ["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" }
               }, [
-                (f(), c("svg", {
-                  class: E([x.value ? "" : "rotate-180", "w-3 h-3 shrink-0"]),
+                (v(), f("svg", {
+                  class: B([x.value ? "" : "rotate-180", "w-3 h-3 shrink-0"]),
                   "aria-hidden": "true",
                   xmlns: "http://www.w3.org/2000/svg",
                   fill: "none",
@@ -422,59 +422,59 @@ const pe = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3
                   }, null, -1)
                 ]), 2))
               ]),
-              P(s("div", Ce, [
-                r.hide_search ? p("", !0) : (f(), c("div", De, [
+              R(s("div", De, [
+                r.hide_search ? p("", !0) : (v(), f("div", Oe, [
                   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", Oe, [
+                  s("div", Ee, [
                     t[9] || (t[9] = s("div", { class: "absolute inset-y-0 flex items-center pointer-events-none start-0 ps-3" }, null, -1)),
-                    P(s("input", {
+                    R(s("input", {
                       type: "search",
-                      "onUpdate:modelValue": t[2] || (t[2] = (l) => v.value = l),
+                      "onUpdate:modelValue": t[2] || (t[2] = (l) => m.value = l),
                       id: `${r.field_name}search${g.value}`,
-                      onKeydown: ie,
-                      onBlur: t[3] || (t[3] = (l) => N()),
+                      onKeydown: se,
+                      onBlur: t[3] || (t[3] = (l) => P()),
                       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, Ee), [
-                      [me, v.value]
+                    }, null, 40, Be), [
+                      [ge, m.value]
                     ])
                   ])
                 ])),
                 s("div", {
                   class: "overflow-y-auto max-h-64 px-1 py-1",
-                  onScroll: oe,
+                  onScroll: re,
                   ref_key: "dropdownRef",
-                  ref: F
+                  ref: H
                 }, [
-                  r.allow_custom && v.value && !i.value.find((l) => String(l.name) === String(v.value)) ? (f(), c("div", {
+                  r.allow_custom && m.value && !i.value.find((l) => String(l.name) === String(m.value)) ? (v(), f("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) => W()),
-                    onMousedown: t[5] || (t[5] = (l) => W())
+                    onClick: t[4] || (t[4] = (l) => X()),
+                    onMousedown: t[5] || (t[5] = (l) => X())
                   }, [
-                    s("div", Be, [
-                      s("span", null, w(r.custom_option_label) + ' "' + w(v.value) + '"', 1)
+                    s("div", $e, [
+                      s("span", null, w(r.custom_option_label) + ' "' + w(m.value) + '"', 1)
                     ])
                   ], 32)) : p("", !0),
-                  i.value.length ? (f(!0), c(Y, { key: 1 }, ge(i.value, (l, n) => (f(), c("div", {
-                    class: E([
+                  i.value.length ? (v(!0), f(Z, { key: 1 }, he(i.value, (l, n) => (v(), f("div", {
+                    class: B([
                       "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" : ""
                     ]),
-                    onClick: (u) => q(l),
-                    onMousedown: (u) => q(l),
+                    onClick: (u) => N(l),
+                    onMousedown: (u) => N(l),
                     key: n,
                     id: `${n + 1}${g.value}`
                   }, [
                     s("div", Me, [
                       s("span", {
                         innerHTML: l.name || l.id || "-"
-                      }, null, 8, Le),
-                      a.value?.id === l.id ? (f(), c("svg", Ie, t[11] || (t[11] = [
+                      }, null, 8, Ie),
+                      a.value?.id === l.id ? (v(), f("svg", Te, t[11] || (t[11] = [
                         s("path", {
                           stroke: "currentColor",
                           "stroke-linecap": "round",
@@ -484,22 +484,22 @@ const pe = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3
                         }, null, -1)
                       ]))) : p("", !0)
                     ])
-                  ], 42, $e))), 128)) : p("", !0),
-                  B.value ? (f(), c("div", Te, " Loading... ")) : p("", !0),
-                  !B.value && i.value.length === 0 && !(r.allow_custom && v.value) ? (f(), c("div", Ue, w(r.no_results_found_placeholder), 1)) : p("", !0)
+                  ], 42, Le))), 128)) : p("", !0),
+                  $.value ? (v(), f("div", Ue, " Loading... ")) : p("", !0),
+                  !$.value && i.value.length === 0 && !(r.allow_custom && m.value) ? (v(), f("div", Ve, w(r.no_results_found_placeholder), 1)) : p("", !0)
                 ], 544)
               ], 512), [
-                [ee, x.value]
+                [te, x.value]
               ])
             ])
           ])
         ])) : p("", !0),
-        s("span", Ve, w(r.error_message), 1),
-        s("small", je, w(r.description), 1)
+        s("span", je, w(r.error_message), 1),
+        s("small", Ae, w(r.description), 1)
       ], 2))
     ], 64));
   }
 };
 export {
-  qe as default
+  Ne as default
 };

package/dist/components/GeneralComponents/GlTextInput.vue.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { ref as x, onMounted as h, computed as v, createElementBlock as a, openBlock as i, Fragment as T, createCommentVNode as r, normalizeClass as m, createElementVNode as d, toDisplayString as o, withDirectives as g, vModelDynamic as y } from "vue";
-const S = {
+import { ref as x, onMounted as h, computed as v, createElementBlock as a, openBlock as i, Fragment as T, createCommentVNode as r, normalizeClass as o, createElementVNode as u, toDisplayString as m, withDirectives as g, vModelDynamic as y } from "vue";
+const w = {
   key: 0,
   class: "gl-label-form"
-}, w = { class: "mt-1 text-gray-900 dark:text-white" }, G = ["for"], V = {
+}, S = { class: "mt-1 text-gray-900 dark:text-white" }, G = ["for"], V = {
   key: 1,
   class: "flex items-center"
-}, p = ["innerHTML"], q = { class: "relative w-full" }, $ = ["minlength", "maxlength", "required", "name", "id", "type", "placeholder"], B = ["innerHTML"], M = ["minlength", "maxlength", "required", "name", "id", "type", "placeholder"], H = { class: "gl-span-form-error" }, K = { class: "block mt-1 text-sm font-normal leading-5 text-gray-500" }, z = {
+}, q = ["innerHTML"], $ = { class: "relative w-full" }, B = ["minlength", "maxlength", "required", "name", "id", "disabled", "type", "placeholder"], M = ["innerHTML"], p = ["minlength", "maxlength", "required", "name", "id", "disabled", "type", "placeholder"], H = { class: "gl-span-form-error" }, K = { class: "block mt-1 text-sm font-normal leading-5 text-gray-500" }, z = {
   __name: "GlTextInput",
   props: {
     is_required: {
@@ -67,67 +67,73 @@ const S = {
     inputGroupText: {
       type: String,
       default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: ["update:modelValue", "keydown", "blur-sm", "keyup", "input"],
   setup(e, { expose: f, emit: b }) {
-    const k = e, c = b, u = x(null);
+    const c = e, k = b, d = x(null);
     h(() => {
-      u.value !== null && u.value.hasAttribute("autofocus") && u.value.focus();
+      d.value !== null && d.value.hasAttribute("autofocus") && d.value.focus();
     });
     const s = v({
       get() {
-        return k.modelValue;
+        return c.modelValue;
       },
       set(n) {
-        c("update:modelValue", n);
+        k("update:modelValue", n);
       }
     });
-    return f({ focus: () => u.value.focus() }), (n, t) => (i(), a(T, null, [
+    return f({ focus: () => d.value.focus() }), (n, t) => (i(), a(T, null, [
       e.show ? (i(), a("div", {
         key: 0,
-        class: m(e.field_name)
+        class: o(e.field_name)
       }, [
-        e.label_name ? (i(), a("label", S, o(e.label_name), 1)) : r("", !0),
-        d("p", w, o(e.type == "password" ? e.modelValue.replace(/./g, "*") : e.modelValue), 1),
-        t[10] || (t[10] = d("hr", { class: "opacity-100! bg-gray-200 border-0 dark:bg-gray-700" }, null, -1))
+        e.label_name ? (i(), a("label", w, m(e.label_name), 1)) : r("", !0),
+        u("p", S, m(e.type == "password" ? e.modelValue.replace(/./g, "*") : e.modelValue), 1),
+        t[10] || (t[10] = u("hr", { class: "opacity-100! bg-gray-200 border-0 dark:bg-gray-700" }, null, -1))
       ], 2)) : r("", !0),
       e.show ? r("", !0) : (i(), a("div", {
         key: 1,
-        class: m({
+        class: o({
           [e.field_name]: e.field_name && e.field_name !== "",
           [e.container_class]: e.container_class && e.container_class !== ""
         })
       }, [
         e.label_name ? (i(), a("label", {
           key: 0,
-          class: m({
+          class: o({
             "gl-label-form": e.error_message == "",
             "gl-label-form-invalid": e.error_message !== "",
             required: e.is_required
           }),
           for: e.field_name
-        }, o(e.label_name), 11, G)) : r("", !0),
+        }, m(e.label_name), 11, G)) : r("", !0),
         e.inputGroupType ? (i(), a("div", V, [
           e.inputGroupType == "prepend" ? (i(), a("label", {
             key: 0,
             innerHTML: e.inputGroupText,
             class: "h-10 z-10 inline-flex items-center shrink-0 px-4 text-sm font-medium text-center text-gray-500 bg-gray-100 border border-gray-300 dark:text-gray-400 rounded-s-lg focus:outline-hidden dark:bg-gray-700 dark:border-gray-600"
-          }, null, 8, p)) : r("", !0),
-          d("div", q, [
-            g(d("input", {
+          }, null, 8, q)) : r("", !0),
+          u("div", $, [
+            g(u("input", {
               minlength: e.minlength,
               maxlength: e.maxlength,
-              class: m(["rtl:text-right rounded-none!", {
+              class: o(["rtl:text-right rounded-none!", {
                 "gl-input-form": e.error_message == "",
                 "gl-input-form-invalid": e.error_message !== "",
                 [e.input_class]: e.input_class && e.input_class !== "",
                 "border-e-0! rounded-s-lg!": e.inputGroupType == "append",
-                "border-s-0! rounded-e-lg!": e.inputGroupType == "prepend"
+                "border-s-0! rounded-e-lg!": e.inputGroupType == "prepend",
+                "opacity-70 cursor-not-allowed bg-gray-100 dark:bg-gray-700": e.disabled
               }]),
               required: e.is_required,
               name: e.field_name,
               id: e.field_name,
+              disabled: e.disabled,
               type: e.type,
               "onUpdate:modelValue": t[0] || (t[0] = (l) => s.value = l),
               onKeydown: t[1] || (t[1] = (l) => n.$emit("keydown", l)),
@@ -135,9 +141,9 @@ const S = {
               onBlur: t[3] || (t[3] = (l) => n.$emit("blur-sm", l)),
               onInput: t[4] || (t[4] = (l) => n.$emit("input", l)),
               ref_key: "input",
-              ref: u,
+              ref: d,
               placeholder: e.placeholder
-            }, null, 42, $), [
+            }, null, 42, B), [
               [y, s.value]
             ])
           ]),
@@ -145,20 +151,22 @@ const S = {
             key: 1,
             innerHTML: e.inputGroupText,
             class: "h-10 z-10 inline-flex items-center shrink-0 px-4 text-sm font-medium text-center text-gray-500 bg-gray-100 border border-gray-300 dark:text-gray-400 rounded-e-lg focus:outline-hidden dark:bg-gray-700 dark:border-gray-600"
-          }, null, 8, B)) : r("", !0)
+          }, null, 8, M)) : r("", !0)
         ])) : r("", !0),
         e.inputGroupType == "" ? g((i(), a("input", {
           key: 2,
           minlength: e.minlength,
           maxlength: e.maxlength,
-          class: m(["rtl:text-right", {
+          class: o(["rtl:text-right", {
             "gl-input-form": e.error_message == "",
             "gl-input-form-invalid": e.error_message !== "",
-            [e.input_class]: e.input_class && e.input_class !== ""
+            [e.input_class]: e.input_class && e.input_class !== "",
+            "opacity-70 cursor-not-allowed bg-gray-100 dark:bg-gray-700": e.disabled
           }]),
           required: e.is_required,
           name: e.field_name,
           id: e.field_name,
+          disabled: e.disabled,
           type: e.type,
           "onUpdate:modelValue": t[5] || (t[5] = (l) => s.value = l),
           onKeydown: t[6] || (t[6] = (l) => n.$emit("keydown", l)),
@@ -166,13 +174,13 @@ const S = {
           onBlur: t[8] || (t[8] = (l) => n.$emit("blur-sm", l)),
           onInput: t[9] || (t[9] = (l) => n.$emit("input", l)),
           ref_key: "input",
-          ref: u,
+          ref: d,
           placeholder: e.placeholder
-        }, null, 42, M)), [
+        }, null, 42, p)), [
           [y, s.value]
         ]) : r("", !0),
-        d("span", H, o(e.error_message), 1),
-        d("small", K, o(e.description), 1)
+        u("span", H, m(e.error_message), 1),
+        u("small", K, m(e.description), 1)
       ], 2))
     ], 64));
   }

package/package.json CHANGED Viewed

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