@zealsolutions/zeal-ui 1.0.0-alpha.352 → 1.0.0-alpha.354

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/{NavigationMenuNotification-D3q-3M1l.js → NavigationMenuNotification-BG3pSgdK.js}

@@ -4,7 +4,7 @@ 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-XbvYFgvF.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";