@zealsolutions/zeal-ui 1.0.0-alpha.100

package/dist/components/inputs/index.js

@@ -0,0 +1,360 @@
+import { computed as L, openBlock as o, createElementBlock as i, normalizeClass as D, toDisplayString as b, Fragment as v, createElementVNode as a, renderList as $, createVNode as x, unref as g, mergeModels as y, useModel as k, ref as _, renderSlot as V, createCommentVNode as C, onMounted as N, createBlock as w, withCtx as B } from "vue";
+import { C as M, a as F, b as I, U as q, F as E } from "../../ChevronRightIcon-Be-vxVtQ.js";
+import { C as U } from "../../CircleExclamationIcon-CVpIK7Mu.js";
+import { _ as de } from "../../InputField-CxSec0eW.js";
+const T = {
+  __name: "DateCell",
+  props: {
+    cellNumber: {
+      type: Number,
+      required: !0
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    isCurrentDay: {
+      type: Boolean,
+      default: !1
+    },
+    isSelected: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["selectDay"],
+  setup(t, { emit: s }) {
+    const e = t, p = L(() => e.isSelected ? "bg-app-950 text-white cursor-pointer" : e.isCurrentDay ? "bg-black-950 text-white cursor-pointer hover:bg-app-300 hover:text-black-950" : e.disabled ? "bg-steel-200 text-steel-800 cursor-not-allowed" : "bg-white text-black-950 cursor-pointer hover:bg-app-300 hover:text-black-950"), n = s;
+    return (r, c) => (o(), i("div", {
+      class: D(["flex flex-wrap justify-center content-center text-style-label-small size-[40px] p-[5px] border-steel-400 border-l-[1px] first-of-type:border-none", p.value]),
+      onClick: c[0] || (c[0] = (d) => t.disabled ? null : n("selectDay"))
+    }, b(t.cellNumber), 3));
+  }
+}, z = { class: "flex flex-row" }, J = { class: "text-steel-800 text-center h-4 text-style-label-small mb-[15px] w-[40px]" }, O = { class: "rounded-[10px] bg-white w-fit" }, Y = { class: "flex flex-row border-t-[1px] border-steel-400 border-l-[1px] border-r-[1px] first-of-type:rounded-t-[10px] last-of-type:border-b-[1px] last-of-type:rounded-b-[10px] overflow-hidden" }, j = {
+  __name: "DateGrid",
+  props: {
+    year: {
+      type: Number,
+      required: !0
+    },
+    month: {
+      type: Number,
+      required: !0
+    },
+    rows: {
+      type: Number,
+      required: !1,
+      default: 6
+    },
+    selectedDate: {
+      type: Date,
+      required: !1,
+      default: null
+    }
+  },
+  emits: ["selectDay"],
+  setup(t, { emit: s }) {
+    const e = t, p = ["M", "T", "W", "T", "F", "S", "S"], n = new Date(e.year, e.month, 1).getDay() - 1 == -1 ? 6 : new Date(e.year, e.month, 1).getDay() - 1, r = new Date(e.year, e.month + 1, 0).getDate(), c = new Date(e.year, e.month, 0).getDate(), d = (f, m) => (f - 1) * 7 + m - n, h = (f, m) => {
+      var l = (f - 1) * 7 + m - n;
+      return l < 1 ? c + l : l > r ? l - r : l;
+    };
+    return (f, m) => (o(), i(v, null, [
+      a("div", z, [
+        (o(), i(v, null, $(p, (l) => a("div", J, b(l), 1)), 64))
+      ]),
+      a("div", O, [
+        (o(!0), i(v, null, $(t.rows, (l) => (o(), i("div", Y, [
+          (o(), i(v, null, $(7, (u) => x(T, {
+            cellNumber: h(l, u),
+            disabled: d(l, u) < 1 || d(l, u) > g(r),
+            onSelectDay: (S) => f.$emit("selectDay", new Date(e.year, e.month, h(l, u))),
+            isCurrentDay: d(l, u) == (/* @__PURE__ */ new Date()).getDate() && e.month == (/* @__PURE__ */ new Date()).getMonth() && e.year == (/* @__PURE__ */ new Date()).getFullYear(),
+            isSelected: t.selectedDate && t.selectedDate.getDate() == h(l, u) && t.selectedDate.getMonth() == e.month && t.selectedDate.getFullYear() == e.year && d(l, u) > 0 && d(l, u) <= g(r)
+          }, null, 8, ["cellNumber", "disabled", "onSelectDay", "isCurrentDay", "isSelected"])), 64))
+        ]))), 256))
+      ])
+    ], 64));
+  }
+}, A = { class: "flex flex-col w-full" }, P = { class: "flex flex-row mb-[15px] justify-between items-center" }, Z = { class: "text-style-label" }, G = {
+  __name: "DatePicker",
+  props: /* @__PURE__ */ y({
+    year: {
+      type: Number,
+      required: !1,
+      default: (/* @__PURE__ */ new Date()).getFullYear()
+    },
+    month: {
+      type: Number,
+      required: !1,
+      default: (/* @__PURE__ */ new Date()).getMonth()
+    }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(t) {
+    const s = t, e = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], p = k(t, "modelValue"), n = (l) => {
+      p.value = l;
+    };
+    var r = s.month, c = s.year;
+    const d = _(!1), h = _(0), f = (l) => {
+      r += l, r < 0 && (r = 11, c -= 1), r > 11 && (r = 0, c += 1), h.value++;
+    }, m = () => {
+      d.value = !d.value;
+    };
+    return (l, u) => (o(), i("div", A, [
+      V(l.$slots, "button", { openCalendar: m }, () => [
+        x(M, {
+          class: "text-steel-950 cursor-pointer",
+          onClick: m
+        })
+      ]),
+      d.value ? (o(), i("div", {
+        class: "w-[310px] p-[15px] rounded-[20px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12),0_2px_10px_0_rgba(0,0,0,0.12)] mt-12 absolute z-50 bg-white",
+        key: h.value
+      }, [
+        a("div", P, [
+          x(F, {
+            class: "text-steel-800 cursor-pointer",
+            onClick: u[0] || (u[0] = (S) => f(-1))
+          }),
+          a("p", Z, b(e[g(r)]) + " " + b(g(c)), 1),
+          x(I, {
+            class: "text-steel-800 cursor-pointer",
+            onClick: u[1] || (u[1] = (S) => f(1))
+          })
+        ]),
+        x(j, {
+          year: g(c),
+          month: g(r),
+          onSelectDay: n,
+          selectedDate: p.value
+        }, null, 8, ["year", "month", "selectedDate"])
+      ])) : C("", !0)
+    ]));
+  }
+}, H = { class: "relative flex flex-1 shrink-0 gap-x-2 px-4 text-style-input items-center h-10 rounded-[20px] ring-1 ring-inset focus-within:ring-2 focus-within:outline-none ring-steel-500 focus-within:bg-app-100 focus-within:ring-app-950 text-black-950 w-full p-2" }, K = ["onClick"], oe = {
+  __name: "DateInput",
+  props: /* @__PURE__ */ y({
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    date: {
+      type: Date,
+      default: null
+    }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(t) {
+    const s = t, e = k(t, "modelValue");
+    return N(() => {
+      s.date && (e.value = s.date);
+    }), (p, n) => (o(), w(G, {
+      modelValue: e.value,
+      "onUpdate:modelValue": n[0] || (n[0] = (r) => e.value = r)
+    }, {
+      button: B(({ openCalendar: r }) => [
+        a("div", H, [
+          x(M, {
+            class: "text-steel-950 cursor-pointer",
+            onClick: r
+          }, null, 8, ["onClick"]),
+          a("button", {
+            type: "button",
+            onClick: r,
+            class: D(["flex-1 shrink-0 text-nowrap border-0 bg-transparent pl-0 ring-0 focus:ring-0 outline-none focus:outline-none text-left", t.disabled ? "cursor-not-allowed text-steel-800 pointer-events-none" : "text-steel-950"])
+          }, b(e.value ? e.value.toDateString() : "Select a date"), 11, K)
+        ])
+      ]),
+      _: 1
+    }, 8, ["modelValue"]));
+  }
+}, R = ["id", "multiple", "accept"], W = ["for"], Q = ["name"], se = {
+  __name: "FileUpload",
+  props: /* @__PURE__ */ y({
+    hasError: {
+      type: Boolean,
+      default: !1
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      default: "Upload file"
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    multiple: {
+      type: Boolean,
+      default: !1
+    },
+    image: {
+      type: Boolean,
+      default: !1
+    }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ y(["blur"], ["update:modelValue"]),
+  setup(t, { emit: s }) {
+    const e = t, p = s, n = k(t, "modelValue"), r = () => {
+      p("blur");
+    }, c = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15), d = (m) => {
+      n.value = m.target.files;
+    }, h = L(() => e.multiple && n.value && n.value.length > 1 ? `${n.value.length} files selected` : n.value ? n.value[0].name : e.placeholder), f = L(() => e.hasError && !e.disabled ? "ring-error-950 focus-within:bg-error-100 focus-within:ring-error-950 text-error-950" : e.disabled ? "ring-steel-500 bg-steel-100 cursor-not-allowed" : "ring-steel-500 focus-within:bg-app-100 focus-within:ring-app-950 text-black-950");
+    return (m, l) => (o(), i("div", {
+      class: D(["relative flex flex-1 gap-x-2 px-4 text-style-input items-center h-10 rounded-[20px] ring-1 ring-inset focus-within:ring-2 focus-within:outline-none", f.value])
+    }, [
+      h.value == e.placeholder ? (o(), w(q, {
+        key: 0,
+        class: "text-steel-950"
+      })) : (o(), w(E, {
+        key: 1,
+        class: "text-steel-950"
+      })),
+      a("input", {
+        type: "file",
+        id: "file-upload" + c,
+        hidden: "",
+        multiple: t.multiple,
+        accept: t.image ? "image/*" : "",
+        onChange: d
+      }, null, 40, R),
+      a("label", {
+        for: "file-upload" + c,
+        class: "cursor-pointer"
+      }, [
+        a("button", {
+          type: "button",
+          name: t.label,
+          onBlur: r,
+          class: D(["flex-1 border-0 bg-transparent pl-0 ring-0 focus:ring-0 outline-none focus:outline-none pointer-events-none", t.disabled ? "cursor-not-allowed text-steel-800 pointer-events-none" : "text-steel-950"])
+        }, b(h.value), 43, Q)
+      ], 8, W),
+      t.hasError ? (o(), w(U, {
+        key: 2,
+        class: "absolute top-1/2 -translate-y-1/2 right-3 scale-[0.8182] pointer-events-none text-error-950"
+      })) : C("", !0)
+    ], 2));
+  }
+}, X = { class: "flex items-center gap-x-2" }, ee = {
+  key: 0,
+  class: "text-style-label"
+}, te = { class: "text-app-950" }, le = {
+  key: 1,
+  class: "text-style-label"
+}, ie = {
+  __name: "ToggleSwitch",
+  props: /* @__PURE__ */ y({
+    useLabels: {
+      type: Boolean,
+      default: !1
+    },
+    leftLabel: {
+      type: String,
+      default: "Off"
+    },
+    rightLabel: {
+      type: String,
+      default: "On"
+    }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(t) {
+    const s = k(t, "modelValue");
+    function e() {
+      s.value = !s.value;
+    }
+    return (p, n) => (o(), i("div", X, [
+      t.useLabels && t.leftLabel != "" ? (o(), i("div", ee, b(t.leftLabel), 1)) : C("", !0),
+      a("div", te, [
+        s.value ? (o(), i("svg", {
+          key: 1,
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "64",
+          height: "32",
+          viewBox: "0 0 64 32",
+          fill: "none",
+          class: "cursor-pointer",
+          onClick: e
+        }, n[1] || (n[1] = [
+          a("rect", {
+            x: "4",
+            y: "4",
+            width: "56",
+            height: "24",
+            rx: "12",
+            fill: "currentColor"
+          }, null, -1),
+          a("rect", {
+            x: "1",
+            y: "1",
+            width: "62",
+            height: "30",
+            rx: "15",
+            stroke: "currentColor",
+            "stroke-width": "2"
+          }, null, -1),
+          a("circle", {
+            cx: "48",
+            cy: "15.88",
+            r: "10",
+            fill: "white"
+          }, null, -1),
+          a("path", {
+            d: "M52.8427 12.1807C53.0524 12.4217 53.0524 12.8113 52.8427 13.0497L46.9511 19.8193C46.7414 20.0602 46.4021 20.0602 46.1946 19.8193L43.1573 16.3332C42.9476 16.0923 42.9476 15.7027 43.1573 15.4643C43.3671 15.2259 43.7063 15.2233 43.9139 15.4643L46.5695 18.5146L52.0839 12.1807C52.2937 11.9398 52.6329 11.9398 52.8404 12.1807H52.8427Z",
+            fill: "currentColor"
+          }, null, -1)
+        ]))) : (o(), i("svg", {
+          key: 0,
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "64",
+          height: "32",
+          viewBox: "0 0 64 32",
+          fill: "none",
+          class: "cursor-pointer",
+          onClick: e
+        }, n[0] || (n[0] = [
+          a("rect", {
+            x: "4",
+            y: "4",
+            width: "56",
+            height: "24",
+            rx: "12",
+            fill: "#C8CDD1"
+          }, null, -1),
+          a("circle", {
+            cx: "16",
+            cy: "15.88",
+            r: "10",
+            fill: "white"
+          }, null, -1),
+          a("path", {
+            d: "M19.8238 13.0259C20.0587 12.791 20.0587 12.4111 19.8238 12.1787C19.5889 11.9463 19.209 11.9438 18.9766 12.1787L16.0025 15.1528L13.0259 12.1762C12.791 11.9413 12.4111 11.9413 12.1787 12.1762C11.9463 12.4111 11.9438 12.791 12.1787 13.0234L15.1528 15.9975L12.1762 18.9741C11.9413 19.209 11.9413 19.5889 12.1762 19.8213C12.4111 20.0537 12.791 20.0562 13.0234 19.8213L15.9975 16.8472L18.9741 19.8238C19.209 20.0587 19.5889 20.0587 19.8213 19.8238C20.0537 19.5889 20.0562 19.209 19.8213 18.9766L16.8472 16.0025L19.8238 13.0259Z",
+            fill: "#76838D"
+          }, null, -1)
+        ])))
+      ]),
+      t.useLabels && t.rightLabel != "" ? (o(), i("div", le, b(t.rightLabel), 1)) : C("", !0)
+    ]));
+  }
+};
+export {
+  oe as DateInput,
+  se as FileUpload,
+  de as InputField,
+  ie as ToggleSwitch
+};

package/dist/components/layouts/index.js

@@ -0,0 +1,118 @@
+import { ref as p, openBlock as l, createElementBlock as c, renderSlot as n, createBlock as u, createCommentVNode as s, createVNode as i, withCtx as d, unref as x, createElementVNode as t, normalizeStyle as b } from "vue";
+import { B as k } from "../../NotificationIcon-CxO6DGyQ.js";
+import { e as g, _ as y, c as w, d as B } from "../../NavigationMenuNotification-C_z9naik.js";
+import { _ as C } from "../../BaseOverlay-aTh6_ssu.js";
+import { _ as $ } from "../../OpacityTransition-D4EuhJnX.js";
+import { u as N, b as S } from "../../InfiniteScroll-CgeGewSV.js";
+const q = { class: "relative flex flex-col-reverse sm:flex-row w-screen h-screen sm:min-h-screen bg-app-950" }, A = { class: "flex flex-col w-full h-[calc(100%-60px)] overflow-x-hidden bg-white sm:h-screen" }, I = {
+  key: 0,
+  class: "flex h-[60px] sm:h-20 xl:h-[105px] bg-white border-b border-steel-500 w-full justify-between select-none"
+}, V = { class: "flex flex-1 justify-between" }, _ = { class: "flex-1 overflow-y-scroll" }, z = {
+  __name: "AppLayout",
+  props: {
+    menuItems: {
+      type: Array,
+      required: !0
+    },
+    navActiveItemBackgroundColour: {
+      type: String,
+      required: !1
+    },
+    navActiveItemTextColour: {
+      type: String,
+      required: !1
+    },
+    navBackgroundColour: {
+      type: String,
+      required: !1
+    },
+    currentPath: {
+      type: String,
+      default: "/"
+    },
+    hideSideNavigation: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    hideHeader: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    hideMenubar: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    }
+  },
+  setup(e) {
+    const m = N(S).between("sm", "xl"), a = p(!1), f = () => {
+      a.value = !0;
+    }, v = () => {
+      a.value = !1;
+    };
+    return (o, r) => (l(), c("div", q, [
+      n(o.$slots, "side-navigation", {}, () => [
+        e.hideSideNavigation ? s("", !0) : (l(), u(g, {
+          key: 0,
+          modelValue: a.value,
+          "onUpdate:modelValue": r[0] || (r[0] = (h) => a.value = h),
+          "menu-items": e.menuItems,
+          "nav-active-item-background-colour": e.navActiveItemBackgroundColour,
+          "nav-active-item-text-colour": e.navActiveItemTextColour,
+          "nav-background-colour": e.navBackgroundColour,
+          "current-path": e.currentPath
+        }, null, 8, ["modelValue", "menu-items", "nav-active-item-background-colour", "nav-active-item-text-colour", "nav-background-colour", "current-path"]))
+      ]),
+      i($, null, {
+        default: d(() => [
+          x(m) && a.value ? (l(), u(C, {
+            key: 0,
+            onClose: v
+          })) : s("", !0)
+        ]),
+        _: 1
+      }),
+      t("div", A, [
+        e.hideHeader ? s("", !0) : (l(), c("header", I, [
+          t("div", {
+            class: "hidden pb-8 pt-4 px-4 w-[80px] sm:flex xl:hidden bg-app-950",
+            style: b(e.navBackgroundColour ? `background: ${e.navBackgroundColour}` : "")
+          }, [
+            t("button", {
+              type: "button",
+              class: "flex w-12 h-12 rounded-md items-center justify-center",
+              onClick: f
+            }, [
+              i(k, { class: "scale-[0.8182] text-white" })
+            ])
+          ], 4),
+          t("div", V, [
+            n(o.$slots, "header", {}, () => [
+              r[1] || (r[1] = t("div", null, null, -1))
+            ]),
+            e.hideMenubar ? s("", !0) : (l(), u(y, {
+              key: 0,
+              role: "menubar",
+              menuClasses: "flex h-full items-center space-x-2 px-4"
+            }, {
+              default: d(() => [
+                i(w, { class: "text-steel-900 hover:text-app-950" }),
+                n(o.$slots, "header-menu"),
+                i(B, { class: "text-steel-900 hover:text-app-950" })
+              ]),
+              _: 3
+            }))
+          ])
+        ])),
+        t("main", _, [
+          n(o.$slots, "default")
+        ])
+      ])
+    ]));
+  }
+};
+export {
+  z as AppLayout
+};