@zealsolutions/zeal-ui 1.0.0-alpha.100

package/dist/components/menus/index.js

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

package/dist/components/modals/index.js

@@ -0,0 +1,212 @@
+import { useAttrs as b, openBlock as t, createBlock as a, Teleport as w, resolveDynamicComponent as f, withCtx as i, createCommentVNode as s, createVNode as B, unref as d, createElementBlock as p, mergeProps as q, renderSlot as n } from "vue";
+import { _ as O } from "../../BaseOverlay-aTh6_ssu.js";
+import { _ as T } from "../../OpacityTransition-D4EuhJnX.js";
+import { _ as L } from "../../OpacityScaleTransition-CtMzqccC.js";
+import { _ as C } from "../../CloseButton-BsjhPDWi.js";
+import { _ as $ } from "../../TranslateTransition-iGQAQ66h.js";
+const S = /* @__PURE__ */ Object.assign({
+  inheritAttrs: !1
+}, {
+  __name: "BaseModal",
+  props: {
+    show: {
+      type: Boolean,
+      required: !0,
+      default: !1
+    },
+    showOverlay: {
+      type: Boolean,
+      required: !1,
+      default: !0
+    },
+    overlay: {
+      type: Object,
+      required: !1,
+      default: () => O
+    },
+    overlayTransition: {
+      type: Object,
+      required: !1,
+      default: () => T
+    },
+    overlayTransparent: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    closeOutside: {
+      type: Boolean,
+      required: !1,
+      default: !0
+    },
+    modalTransition: {
+      type: Object,
+      required: !1,
+      default: () => L
+    },
+    showCloseButton: {
+      type: Boolean,
+      required: !1,
+      default: !0
+    },
+    disableTeleport: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    }
+  },
+  emits: ["close", "afterEnter", "afterLeave"],
+  setup(e, { emit: u }) {
+    const c = b(), y = e, l = u, h = () => {
+      y.closeOutside && o();
+    }, o = () => {
+      l("close");
+    }, m = () => {
+      l("afterEnter");
+    }, v = () => {
+      l("afterLeave");
+    };
+    return (r, A) => (t(), a(w, {
+      to: "body",
+      disabled: e.disableTeleport
+    }, [
+      (t(), a(f(e.overlayTransition), {
+        onAfterEnter: m,
+        onAfterLeave: v
+      }, {
+        default: i(() => [
+          e.show && e.showOverlay ? (t(), a(f(e.overlay), {
+            key: 0,
+            transparent: e.overlayTransparent,
+            onClose: h
+          }, null, 40, ["transparent"])) : s("", !0)
+        ]),
+        _: 1
+      }, 32)),
+      B(d(e.modalTransition), null, {
+        default: i(() => [
+          e.show ? (t(), p("div", q({ key: 0 }, d(c), { class: "fixed flex flex-col p-8 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg overflow-hidden bg-white shadow-xl z-50" }), [
+            n(r.$slots, "header", { handleClose: o }, () => [
+              e.showCloseButton ? (t(), a(C, {
+                key: 0,
+                class: "top-2 right-2 absolute",
+                onClose: o
+              })) : s("", !0)
+            ]),
+            n(r.$slots, "default"),
+            n(r.$slots, "footer")
+          ], 16)) : s("", !0)
+        ]),
+        _: 3
+      })
+    ], 8, ["disabled"]));
+  }
+}), z = /* @__PURE__ */ Object.assign({
+  inheritAttrs: !1
+}, {
+  __name: "SlideoutModal",
+  props: {
+    show: {
+      type: Boolean,
+      required: !0,
+      default: !1
+    },
+    showOverlay: {
+      type: Boolean,
+      required: !1,
+      default: !0
+    },
+    overlay: {
+      type: Object,
+      required: !1,
+      default: () => O
+    },
+    overlayTransition: {
+      type: Object,
+      required: !1,
+      default: () => T
+    },
+    overlayTransparent: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    closeOutside: {
+      type: Boolean,
+      required: !1,
+      default: !0
+    },
+    modalTransition: {
+      type: Object,
+      required: !1,
+      default: () => $
+    },
+    showCloseButton: {
+      type: Boolean,
+      required: !1,
+      default: !0
+    },
+    disableTeleport: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    positionLeft: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    }
+  },
+  emits: ["close", "afterEnter", "afterLeave"],
+  setup(e, { emit: u }) {
+    const c = b(), y = e, l = u, h = () => {
+      y.closeOutside && o();
+    }, o = () => {
+      l("close");
+    }, m = () => {
+      l("afterEnter");
+    }, v = () => {
+      l("afterLeave");
+    };
+    return (r, A) => (t(), a(w, {
+      to: "body",
+      disabled: e.disableTeleport
+    }, [
+      (t(), a(f(e.overlayTransition), {
+        onAfterEnter: m,
+        onAfterLeave: v
+      }, {
+        default: i(() => [
+          e.show && e.showOverlay ? (t(), a(f(e.overlay), {
+            key: 0,
+            transparent: e.overlayTransparent,
+            onClose: h
+          }, null, 40, ["transparent"])) : s("", !0)
+        ]),
+        _: 1
+      }, 32)),
+      B(d(e.modalTransition), {
+        direction: e.positionLeft ? "left" : "right"
+      }, {
+        default: i(() => [
+          e.show ? (t(), p("div", q({ key: 0 }, d(c), {
+            class: ["fixed flex flex-col p-8 top-0 h-full w-96 overflow-hidden bg-white shadow-xl z-50", e.positionLeft ? "left-0" : "right-0"]
+          }), [
+            e.showCloseButton ? (t(), a(C, {
+              key: 0,
+              class: "top-2 right-2 absolute",
+              onClose: o
+            })) : s("", !0),
+            n(r.$slots, "default"),
+            n(r.$slots, "footer")
+          ], 16)) : s("", !0)
+        ]),
+        _: 3
+      }, 8, ["direction"])
+    ], 8, ["disabled"]));
+  }
+});
+export {
+  S as BaseModal,
+  z as SlideOutModal
+};

package/dist/components/navigation/index.js

@@ -0,0 +1,9 @@
+import { _ as n, a as e, b as o, c as t, d as N, e as g } from "../../NavigationMenuNotification-C_z9naik.js";
+export {
+  n as NavigationMenu,
+  e as NavigationMenuItem,
+  o as NavigationMenuItemLink,
+  t as NavigationMenuNotification,
+  N as NavigationMenuProfile,
+  g as SideNavigation
+};

package/dist/components/overlays/index.js

@@ -0,0 +1,4 @@
+import { _ as r } from "../../BaseOverlay-aTh6_ssu.js";
+export {
+  r as BaseOverlay
+};

package/dist/components/tooltips/index.js

@@ -0,0 +1,4 @@
+import { _ as e } from "../../BaseTooltip-CcnCHpL4.js";
+export {
+  e as BaseTooltip
+};

package/dist/components/transitions/index.js

@@ -0,0 +1,10 @@
+import { _ as t } from "../../OpacityTransition-D4EuhJnX.js";
+import { _ as i } from "../../OpacityScaleTransition-CtMzqccC.js";
+import { _ as s } from "../../OpacityTranslateTransition-fF3EnRwC.js";
+import { _ as p } from "../../TranslateTransition-iGQAQ66h.js";
+export {
+  i as OpacityScaleTransition,
+  t as OpacityTransition,
+  s as OpacityTranslateTransition,
+  p as TranslateTransition
+};

package/dist/components/utils/index.js

@@ -0,0 +1,6 @@
+import { _ as o } from "../../InfiniteScroll-CgeGewSV.js";
+import { _ as a } from "../../TruncateText-BOyOYUV6.js";
+export {
+  o as InfiniteScroll,
+  a as TruncateText
+};