@zealsolutions/zeal-ui 1.0.0-alpha.351 → 1.0.0-alpha.353

package/dist/DropdownMenuTextItem-D3P837Ef.js

@@ -0,0 +1,365 @@
+import { useSlots as ae, computed as v, openBlock as r, createElementBlock as b, normalizeClass as T, createElementVNode as d, renderSlot as p, createCommentVNode as $, createVNode as y, withCtx as f, mergeModels as J, ref as i, useModel as fe, onMounted as ve, watch as Q, createTextVNode as E, toDisplayString as Y, createBlock as N, resolveDynamicComponent as pe, unref as W, withDirectives as Z, normalizeStyle as ee, withKeys as he, withModifiers as te, vModelText as me, Fragment as ye, renderList as be, vShow as we, nextTick as ge } from "vue";
+import { _ as xe } from "./OpacityScaleTransition-CtMzqccC.js";
+import { _ as ke } from "./OpacityTranslateTransition-fF3EnRwC.js";
+import { _ as $e } from "./OpacityTransition-D4EuhJnX.js";
+import { i as q, g as _e } from "./axiosHelpers-BGXP7XLq.js";
+import { _ as Se } from "./TruncateText-BOyOYUV6.js";
+import { _ as Ce } from "./InfiniteScroll-BYCNEoaA.js";
+import Ie from "./CircleStatusIcon-C4Av0hTY.js";
+import { a as De, u as Be, w as Te, b as Me } from "./index-D9ihCfA2.js";
+import { _ as Ve } from "./BaseDropdownButton-BD1CMHuM.js";
+import Le from "./MagnifyingGlassIcon-ChYNIA-H.js";
+import Ue from "./XMarkIcon-DKJ_--uA.js";
+import Pe from "./CheckIcon-D0-G6sID.js";
+import { _ as Ke } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Ee = { class: "flex h-full items-center space-x-3" }, Ne = { key: 0 }, We = {
+  key: 0,
+  class: "absolute w-3 inset-y-0 right-4 flex items-center justify-center"
+}, le = {
+  __name: "DropdownMenuItem",
+  props: {
+    selected: {
+      type: Boolean,
+      default: !1
+    },
+    active: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(n) {
+    const _ = n, x = ae(), M = v(() => x.prefix && q(x.prefix()[0].type)), V = v(() => x.suffix && q(x.suffix()[0].type)), h = v(() => _.selected ? "bg-app-950 text-white" : _.active ? "bg-steel-300 dark:bg-surface-hover text-black-950 dark:text-content" : "bg-surface-raised text-black-950 dark:text-content");
+    return (l, z) => (r(), b("li", {
+      class: T(["relative items-center select-none h-[38px] pl-4 text-style-input", [
+        h.value,
+        V.value ? "pr-8" : "pr-4"
+      ]])
+    }, [
+      d("div", Ee, [
+        M.value ? (r(), b("div", Ne, [
+          p(l.$slots, "prefix")
+        ])) : $("", !0),
+        y(Se, {
+          active: n.active,
+          class: "rotate-0"
+        }, {
+          default: f(() => [
+            p(l.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["active"])
+      ]),
+      V.value ? (r(), b("span", We, [
+        p(l.$slots, "suffix")
+      ])) : $("", !0)
+    ], 2));
+  }
+}, qe = { class: "relative" }, ze = {
+  key: 0,
+  class: "bg-steel-100 dark:bg-surface border-b-0"
+}, Ae = { class: "relative cursor-default select-none h-[38px] pl-4 text-black-950 dark:text-content text-style-input pr-5" }, je = { class: "flex h-full items-center space-x-3" }, He = { class: "relative h-2.5 w-2.5" }, Re = ["placeholder", "onKeydown", "disabled"], Fe = { class: "absolute w-3 inset-y-0 right-4 flex items-center justify-center" }, Oe = { class: "text-style-base-body focus:outline-none" }, B = 38, dt = {
+  __name: "DropdownMenu",
+  props: /* @__PURE__ */ J({
+    displayRows: {
+      type: Number,
+      default: 5
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    placeholder: {
+      type: String,
+      default: "Choose an option"
+    },
+    searchPlaceholder: {
+      type: String,
+      default: "Search"
+    },
+    fetchUrl: {
+      type: [String, null],
+      default: null,
+      required: !1
+    },
+    fetchParams: {
+      type: Object,
+      default: () => {
+      },
+      required: !1
+    },
+    searchUrl: {
+      type: [String, null],
+      default: null,
+      required: !1
+    },
+    idKey: {
+      type: String,
+      required: !1,
+      default: "id"
+    },
+    valKey: {
+      type: String,
+      required: !1,
+      default: "val"
+    },
+    responseCallback: {
+      type: [Function, null],
+      default: null
+    },
+    searchable: {
+      type: Boolean,
+      default: !1
+    },
+    fitContent: {
+      type: Boolean,
+      default: !1
+    },
+    forceWidth: {
+      type: String,
+      default: ""
+    },
+    maxWidth: {
+      type: String,
+      default: "none"
+    },
+    buttonPosition: {
+      type: String,
+      default: "left"
+    },
+    scrollable: {
+      type: Boolean,
+      default: !0
+    },
+    showBorder: {
+      type: Boolean,
+      default: !0
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ J(["error"], ["update:modelValue"]),
+  setup(n, { emit: _ }) {
+    const { width: x, height: M } = De(), h = Be(Me).smaller("sm"), l = n, z = _, A = ae(), oe = v(() => A.buttonIcon && q(A.buttonIcon()[0].type)), S = i(null), u = i(null), j = i(null), m = fe(n, "modelValue"), o = i(null), L = v(() => !m.value || k.value.length === 0 ? null : k.value.find((e) => e.id === m.value)), U = i(5), se = v(() => l.scrollable ? l.displayRows * B + 24 : "none"), C = i("down"), c = i(!1), H = i(0), s = i(l.data), k = i(l.data), w = i(""), I = v(() => l.buttonPosition === "left"), ne = v(() => h.value ? "origin-bottom" : C.value === "down" ? I.value ? "origin-top-left" : "origin-top-right" : I.value ? "origin-bottom-left" : "origin-bottom-right");
+    let R = null, F = null;
+    const D = i(!1), P = () => {
+      l.disabled || (c.value = !c.value, m.value !== void 0 && (o.value = m.value), c.value ? ge(() => {
+        u.value.$el.scrollTop = H.value;
+      }) : o.value = null);
+    }, K = (e) => {
+      H.value = u.value.$el.scrollTop, m.value = e, c.value = !1;
+    }, O = (e) => {
+      o.value = e;
+    }, G = () => {
+      let e = j.value.getBoundingClientRect();
+      S.value.style.display = "block";
+      let a = S.value.clientHeight;
+      S.value.style.display = "none", e.top + e.height + a > window.innerHeight ? (C.value = "up", U.value = -a - e.height - 5) : (C.value = "down", U.value = 5);
+    }, ie = (e) => {
+      e.preventDefault(), u.value.$el.focus(), w.value !== "" && (o.value = s.value[0].id), o.value === null && (o.value = s.value[0].id);
+    }, re = (e) => {
+      e.preventDefault();
+      let a = Math.floor(u.value.$el.scrollTop / B);
+      if (e.key === "Escape" && (o.value = null, c.value = !1), e.key === "ArrowDown") {
+        let t;
+        s.value.length > 0 ? (t = s.value.findIndex((g) => g.id === o.value), t < s.value.length - 1 && (o.value = s.value[t + 1].id)) : ((o.value === null || o.value < F) && o.value++, t = o.value - 1), t - a > l.displayRows - 2 && (u.value.$el.scrollTop += B);
+      }
+      if (e.key === "ArrowUp") {
+        let t;
+        s.value.length > 0 ? (t = s.value.findIndex((g) => g.id === o.value), t > 0 && (o.value = s.value[t - 1].id)) : o.value === null ? t = 0 : (o.value > 1 && o.value--, t = o.value - 1), t - a < 2 && (u.value.$el.scrollTop -= B);
+      }
+      (e.key === "Enter" || e.key === "Tab") && (K(o.value), c.value = !1);
+    }, ue = () => {
+      l.searchable ? S.value.getElementsByTagName("input")[0].focus() : u.value.$el.focus();
+    }, ce = (e) => {
+    }, X = () => {
+      w.value = "";
+    }, de = v(() => {
+      let e = `margin-top: ${U.value}px; max-width: ${l.maxWidth};`;
+      return l.forceWidth !== "" && !h.value && (e += `width: ${l.forceWidth};`), e;
+    });
+    return ve(() => {
+      u.value.canEmit = !1, G(), l.fetchUrl !== null && _e(l.fetchUrl, l.fetchParams).then((e) => {
+        l.responseCallback !== null ? s.value = l.responseCallback(e.data) : s.value = e.data.map((a, t) => ({
+          id: a[l.idKey] || t,
+          val: a[l.valKey]
+        })), k.value = s.value;
+      }).catch((e) => {
+        z("error", e);
+      }), l.data.length === 0 && (F = u.value.$el.getElementsByTagName("li").length);
+    }), Q([x, M], () => {
+      h.value || G();
+    }), Q(() => l.data, (e) => {
+      const a = e || [];
+      k.value = a;
+      const t = w.value.trim();
+      s.value = l.searchUrl === null && t !== "" ? a.filter((g) => g.val.toLowerCase().includes(t.toLowerCase())) : a;
+    }), Te(w, (e) => {
+      let a = e.trim();
+      a !== R && (l.searchUrl !== null ? navValTrimmed === "" && (s.value = k.value) : s.value = k.value.filter((t) => t.val.toLowerCase().includes(a.toLowerCase())), R = a);
+    }, { debounce: l.searchUrl ? 300 : 0, maxWait: l.searchUrl ? 1e3 : void 0 }), (e, a) => (r(), b("div", qe, [
+      d("div", {
+        ref_key: "button",
+        ref: j,
+        class: T(["flex", [I.value ? "justify-start" : "justify-end", { "opacity-50 pointer-events-none cursor-not-allowed": n.disabled, "bg-steel-100 dark:bg-surface": n.disabled }]])
+      }, [
+        p(e.$slots, "button", {
+          selectedItem: L.value,
+          toggleDropdown: P,
+          showDropdown: c.value,
+          dropdownDirection: C.value
+        }, () => [
+          y(Ve, {
+            "show-button-icon": oe.value,
+            "show-dropdown": c.value,
+            "dropdown-direction": C.value,
+            onClick: P,
+            class: T(n.fitContent ? "w-fit" : "w-full")
+          }, {
+            buttonIcon: f(() => [
+              p(e.$slots, "buttonIcon")
+            ]),
+            default: f(() => [
+              E(Y(L.value ? L.value.val : n.placeholder) + " ", 1)
+            ]),
+            _: 3
+          }, 8, ["show-button-icon", "show-dropdown", "dropdown-direction", "class"])
+        ])
+      ], 2),
+      y($e, null, {
+        default: f(() => [
+          c.value ? (r(), b("div", {
+            key: 0,
+            class: "fixed inset-0 top-0 left-0 z-10 bg-black-950/85 sm:bg-[transparent]",
+            onClick: P
+          })) : $("", !0)
+        ]),
+        _: 1
+      }),
+      (r(), N(pe(W(h) ? ke : xe), {
+        "enter-active-class": W(h) ? "transition-all duration-200 ease-in delay-100" : "transition-all ease-out duration-75 scale-100",
+        "leave-active-class": W(h) ? "transition-all duration-200 ease-out" : "transition-all ease-in duration-75 scale-100",
+        onAfterEnter: ue
+      }, {
+        default: f(() => [
+          Z(d("div", {
+            ref_key: "container",
+            ref: S,
+            class: T(["fixed bottom-[75px] left-2.5 w-[calc(100%-20px)] sm:bottom-auto sm:absolute flex flex-col z-20 rounded-[20px] border-steel-400 dark:border-line-strong overflow-hidden shadow-zeal-md", [
+              ne.value,
+              n.fitContent ? "sm:w-fit" : "sm:w-full",
+              I.value ? "sm:left-0" : "sm:left-auto sm:right-0",
+              n.showBorder ? "border-[1px]" : "border-0"
+            ]]),
+            style: ee(de.value)
+          }, [
+            p(e.$slots, "search", {
+              searchString: w.value,
+              clearSearch: X,
+              inputDisabled: D.value
+            }, () => [
+              n.searchable ? (r(), b("div", ze, [
+                d("div", Ae, [
+                  d("div", je, [
+                    d("div", He, [
+                      y(Le, { class: "absolute scale-[0.8182] -left-1 -top-1 origin-top-left text-steel-600 dark:text-content-muted" })
+                    ]),
+                    d("div", null, [
+                      Z(d("input", {
+                        type: "text",
+                        class: "w-full text-style-input bg-[transparent] focus:outline-none focus:ring-0 border-0 px-0",
+                        tabindex: "-1",
+                        placeholder: n.searchPlaceholder,
+                        "onUpdate:modelValue": a[0] || (a[0] = (t) => w.value = t),
+                        onKeydown: he(te(ie, ["self"]), ["tab"]),
+                        disabled: D.value
+                      }, null, 40, Re), [
+                        [me, w.value]
+                      ])
+                    ])
+                  ]),
+                  d("span", Fe, [
+                    y(Ue, {
+                      class: "scale-[0.8182] text-steel-700 dark:text-content-muted cursor-pointer",
+                      onClick: X
+                    })
+                  ])
+                ])
+              ])) : $("", !0)
+            ]),
+            y(Ce, {
+              ref_key: "list",
+              ref: u,
+              down: !1,
+              tabindex: "-1",
+              class: "w-full py-0 ring-inset focus:outline-none",
+              style: ee(`max-height: ${se.value}px;`),
+              onLoad: ce,
+              onKeydown: te(re, ["self"]),
+              onFocus: a[1] || (a[1] = (t) => D.value = !0),
+              onBlur: a[2] || (a[2] = (t) => D.value = !1)
+            }, {
+              default: f(() => [
+                d("ul", Oe, [
+                  p(e.$slots, "default", {
+                    itemList: s.value,
+                    setActive: O,
+                    selectItem: K,
+                    selectedId: m.value,
+                    activeId: o.value
+                  }, () => [
+                    (r(!0), b(ye, null, be(s.value, (t) => (r(), N(le, {
+                      key: t.id,
+                      selected: t.id === m.value,
+                      active: t.id === o.value,
+                      onClick: (g) => K(t.id),
+                      onMouseenter: (g) => O(t.id)
+                    }, {
+                      prefix: f(() => [
+                        y(Ie)
+                      ]),
+                      suffix: f(() => [
+                        t.id === m.value ? (r(), N(Pe, { key: 0 })) : $("", !0)
+                      ]),
+                      default: f(() => [
+                        E(Y(t.val) + " ", 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["selected", "active", "onClick", "onMouseenter"]))), 128))
+                  ]),
+                  (n.searchable || n.fetchUrl !== null) && s.value.length === 0 ? p(e.$slots, "empty", { key: 0 }, () => [
+                    y(le, { tabindex: "-1" }, {
+                      default: f(() => [
+                        E(" No items found ")
+                      ]),
+                      _: 1
+                    })
+                  ]) : $("", !0)
+                ])
+              ]),
+              _: 3
+            }, 8, ["style"])
+          ], 6), [
+            [we, c.value]
+          ])
+        ]),
+        _: 3
+      }, 40, ["enter-active-class", "leave-active-class"]))
+    ]));
+  }
+}, Ge = {}, Xe = { class: "relative flex items-center cursor-default select-none h-[38px] pl-4 pr-4 rotate-0" };
+function Je(n, _) {
+  return r(), b("li", Xe, [
+    p(n.$slots, "default")
+  ]);
+}
+const ft = /* @__PURE__ */ Ke(Ge, [["render", Je]]);
+export {
+  ft as D,
+  le as _,
+  dt as a
+};

package/dist/{InfiniteScroll-BE6D4ysG.js → InfiniteScroll-BYCNEoaA.js}

@@ -1,5 +1,5 @@
 import { ref as s, onMounted as u, openBlock as f, createElementBlock as p, renderSlot as m } from "vue";
-import { c as r } from "./index-CedrSBIl.js";
+import { c as r } from "./index-D9ihCfA2.js";
 const w = {
   __name: "InfiniteScroll",
   props: {

package/dist/{NavigationMenuNotification-1rN9g7xZ.js → NavigationMenuNotification-BG3pSgdK.js}

@@ -1,10 +1,10 @@
 import { openBlock as u, createElementBlock as h, createElementVNode as r, normalizeClass as f, renderSlot as k, ref as g, watch as T, createBlock as b, resolveDynamicComponent as j, withCtx as t, toDisplayString as O, createCommentVNode as A, useAttrs as E, computed as M, resolveComponent as L, createVNode as a, mergeProps as B, unref as v, mergeModels as W, useModel as z, normalizeStyle as $, Fragment as R, renderList as U, createTextVNode as m } from "vue";
-import { u as F, d as G, b as X } from "./index-CedrSBIl.js";
+import { u as F, d as G, b as X } from "./index-D9ihCfA2.js";
 import { _ as N } from "./OpacityTransition-D4EuhJnX.js";
 import { _ as H } from "./ProclusLogo-By7XypEC.js";
 import J from "./BarsIcon-CY8KeVq7.js";
 import K from "./XMarkIcon-DKJ_--uA.js";
-import { a as S, _ as p, D as q } from "./DropdownMenuTextItem-CFa5UL5j.js";
+import { a as S, _ as p, D as q } from "./DropdownMenuTextItem-D3P837Ef.js";
 import Q from "./UserIcon-18Fdcxc7.js";
 import Y from "./SlidersIcon-DOirWVZO.js";
 import Z from "./UserGearIcon-AsvyYngF.js";