golden-logic-ui 1.2.343 → 1.2.344

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

@@ -1,5 +1,5 @@
-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 m, shallowRef as X, onMounted as fe, onBeforeUnmount as ve, watch as M, createElementBlock as c, openBlock as f, Fragment as Y, createCommentVNode as h, 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 pe } from "vue";
+const he = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3 mb-4" }, xe = {
   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 = {
@@ -111,16 +111,16 @@ 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;
+    let O = !1, p = 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;
-      h && h.abort(), h = new AbortController();
+      p && p.abort(), p = new AbortController();
       const t = ++U;
       B.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 },
-          signal: h.signal
+          signal: p.signal
         });
         if (O || t !== U) return;
         if (!n || !n.data) {
@@ -137,7 +137,7 @@ const pe = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3
         if (H(l)) return;
         console.error("Error fetching data:", l);
       } finally {
-        !O && t === U && (B.value = !1, h = null);
+        !O && t === U && (B.value = !1, p = null);
       }
     }, ne = async (e) => {
       if (!o.api_url || e === null || e === void 0 || e === "") return null;
@@ -179,7 +179,7 @@ const pe = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3
           x.value = !1;
           return;
         }
-        v.value = "", x.value = !0, o.api_url && i.value.length === 0 && V("down"), he(() => {
+        v.value = "", x.value = !0, o.api_url && i.value.length === 0 && V("down"), pe(() => {
           const e = document.getElementById(
             `${o.field_name}search${g.value}`
           );
@@ -207,7 +207,7 @@ const pe = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3
     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);
+      O = !0, p && (p.abort(), p = null), k && (clearTimeout(k), k = null), document.body.removeEventListener("click", K), document.removeEventListener("focusin", z);
     });
     function re() {
       const e = L.value, t = o.maxItem, l = v.value;
@@ -302,7 +302,7 @@ const pe = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3
     }), M(
       () => o.api_url,
       () => {
-        h && (h.abort(), h = null), C.value = 1, D.value = null, $.value = 1, i.value = [];
+        p && (p.abort(), p = null), C.value = 1, D.value = null, $.value = 1, i.value = [];
       },
       { immediate: !0 }
     ), M(
@@ -327,19 +327,22 @@ const pe = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3
           L.value = l, i.value = l, a.value = j();
         }
       },
-      { immediate: !0 }
+      // 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", {
         key: 0,
         class: E(r.field_name)
       }, [
-        s("h3", pe, w(r.label_name), 1),
+        s("h3", he, w(r.label_name), 1),
         s("p", ye, [
-          S(a.value) ? (f(), c("span", xe, w(a.value?.name), 1)) : p("", !0)
+          S(a.value) ? (f(), c("span", xe, 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)) : p("", !0),
-      r.show ? p("", !0) : (f(), c("div", {
+      ], 2)) : h("", !0),
+      r.show ? h("", !0) : (f(), c("div", {
         key: 1,
         class: E(r.field_name)
       }, [
@@ -357,7 +360,7 @@ const pe = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3
               "gl-label-form-invalid": r.error_message !== "",
               required: r.is_required
             })
-          }, w(r.label_name), 3)) : p("", !0),
+          }, w(r.label_name), 3)) : h("", !0),
           s("div", ke, [
             s("div", Se, [
               s("input", {
@@ -420,7 +423,7 @@ const pe = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3
                 ]), 2))
               ]),
               P(s("div", Ce, [
-                r.hide_search ? p("", !0) : (f(), c("div", De, [
+                r.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"
@@ -456,7 +459,7 @@ const pe = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3
                     s("div", Be, [
                       s("span", null, w(r.custom_option_label) + ' "' + w(v.value) + '"', 1)
                     ])
-                  ], 32)) : p("", !0),
+                  ], 32)) : h("", !0),
                   i.value.length ? (f(!0), c(Y, { key: 1 }, ge(i.value, (l, n) => (f(), c("div", {
                     class: E([
                       "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",
@@ -476,21 +479,21 @@ const pe = { class: "font-bold ptext-lg dark:text-white" }, ye = { class: "mt-3
                           "stroke-width": "2",
                           d: "M1 5.917 5.724 10.5 15 1.5"
                         }, null, -1)
-                      ]))) : p("", !0),
+                      ]))) : h("", !0),
                       s("span", {
                         innerHTML: l.name || l.id || "-"
                       }, null, 8, Ie)
                     ])
-                  ], 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, $e))), 128)) : h("", !0),
+                  B.value ? (f(), c("div", Te, " Loading... ")) : h("", !0),
+                  !B.value && i.value.length === 0 && !(r.allow_custom && v.value) ? (f(), c("div", Ue, w(r.no_results_found_placeholder), 1)) : h("", !0)
                 ], 544)
               ], 512), [
                 [ee, x.value]
               ])
             ])
           ])
-        ])) : p("", !0),
+        ])) : h("", !0),
         s("span", Ve, w(r.error_message), 1),
         s("small", Ae, w(r.description), 1)
       ], 2))

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