@7pmlabs/design-system 0.8.1 → 1.0.0

package/dist/design-system25.mjs

@@ -1,565 +1,8 @@
-import { defineComponent as ia, ref as i, computed as M, watch as _, nextTick as Fe, onMounted as ca, onBeforeUnmount as va, openBlock as C, createElementBlock as U, createElementVNode as R, createVNode as S, normalizeClass as ie, withKeys as fa, withDirectives as ma, withCtx as ce, createTextVNode as ve, toDisplayString as fe, unref as B, createBlock as E, createCommentVNode as K, Fragment as ha, vShow as ga } from "vue";
-import Re from "./design-system10.mjs";
-import pa from "./design-system15.mjs";
-import { useValidationField as ka } from "./design-system3.mjs";
-import Da from "./design-system14.mjs";
-import { useI18n as ya } from "./design-system49.mjs";
-import { lockScrollBody as ba, ensureVisiblePosition as wa, unlockScrollBody as Be, resetPosition as Te } from "./design-system6.mjs";
-import q from "./design-system104.mjs";
-import { isISO8601 as Ie } from "./design-system48.mjs";
-import Ma from "./design-system106.mjs";
-import Ca from "./design-system107.mjs";
-import Va from "./design-system108.mjs";
-import _a from "./design-system109.mjs";
-import Ya from "./design-system110.mjs";
-import Sa from "./design-system111.mjs";
-import { useDate as Pa } from "./design-system2.mjs";
-import xa from "./design-system112.mjs";
-import Fa from "./design-system113.mjs";
-import { useBreakpoints as Ra, breakpointsTailwind as Ba } from "./design-system114.mjs";
-import { BDatePickerView as k } from "./design-system5.mjs";
-import Ta from "./design-system98.mjs";
-import T from "./design-system103.mjs";
-import w from "./design-system115.mjs";
-const Ia = { class: "b-date-picker" }, $a = { class: "ds-relative" }, Na = ["id", "disabled", "placeholder", "value"], Oa = ["id", "disabled", "placeholder"], Ea = { class: "ds-mt-1 ds-grid ds-w-80 ds-gap-5 ds-rounded-lg ds-bg-white ds-p-3 ds-shadow-2xl" }, qa = { class: "ds-flex ds-w-full ds-items-center ds-justify-between" }, La = { class: "ds-grid ds-w-full ds-grid-cols-2 ds-gap-2" }, ft = /* @__PURE__ */ ia({
-  __name: "BDatePicker",
-  props: {
-    inputId: { default: "" },
-    modelValue: { default: void 0 },
-    label: { default: "" },
-    validationRules: { default: void 0 },
-    placeholder: { default: "" },
-    required: { type: Boolean, default: !1 },
-    requiredErrorMessage: { default: "" },
-    disabled: { type: Boolean, default: !1 },
-    inputCssClass: { default: "" },
-    minDate: { default: void 0 },
-    maxDate: { default: void 0 },
-    range: { type: Boolean, default: !1 },
-    hideDetails: { type: Boolean, default: !1 },
-    view: { default: k.Dates }
-  },
-  emits: ["update:modelValue"],
-  setup($e, { emit: Ne }) {
-    const t = $e, Oe = Ne;
-    let c;
-    const D = new Date(
-      (/* @__PURE__ */ new Date()).getFullYear(),
-      (/* @__PURE__ */ new Date()).getMonth(),
-      (/* @__PURE__ */ new Date()).getDate()
-    ), me = Ra(Ba).greaterOrEqual("sm"), { t: W, locale: G } = ya(), { formatMonthYear: Ee, formatDate: L, dateFormat: qe, convertToDate: Le } = Pa(), u = i({}), n = i([]), P = i({
-      year: D.getFullYear(),
-      month: D.getMonth()
-    }), s = i({
-      year: D.getFullYear(),
-      month: D.getMonth()
-    }), y = i(!1), g = i(t.view), I = i(null), x = i(null), he = i(null), J = i(null), F = i([]), Q = i([]), $ = i([]), j = i(""), ge = i(!1), pe = i(!1), v = M(() => d(t.minDate)), f = M(() => d(t.maxDate)), je = {
-      validateRule: (e) => !!e,
-      errorMessage: () => t.requiredErrorMessage || W("ds.global.field_required")
-    }, H = M(() => t.inputId || `id-${Ta()}`), r = M({
-      get() {
-        return t.modelValue;
-      },
-      set(e) {
-        Oe("update:modelValue", e);
-      }
-    }), He = M(
-      () => {
-        var e;
-        return (e = t.modelValue) == null ? void 0 : e.map(
-          (a) => L(typeof a == "string" ? new Date(a) : a)
-        ).join(" - ");
-      }
-    ), ze = M(() => {
-      let e = [];
-      return t.required && e.push(je), t.validationRules && (e = e.concat(t.validationRules)), e.length ? e : void 0;
-    }), { validate: Ae, validationResult: X } = ka(
-      H.value,
-      r,
-      ze.value
-    ), ke = M(() => [
-      "ds-border ds-rounded-lg ds-block ds-w-full ds-text-sm ds-px-3 ds-h-[40px] ds-transition-all ds-ease-in-out",
-      {
-        "ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]": t.disabled,
-        "ds-text-black/[0.85]": !t.disabled,
-        "ds-border-error focus:ds-ring-1 focus:ds-ring-error": !X.value.valid,
-        "ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus": X.value.valid,
-        "!ds-border-focus ds-ring-1 ds-ring-focus": y.value
-      },
-      t.inputCssClass
-    ]), De = M(() => {
-      const e = {
-        mask: q.MaskedDate,
-        pattern: qe.value,
-        lazy: !0,
-        format: (a) => L(a),
-        parse: (a) => Le(a),
-        blocks: {
-          YYYY: {
-            mask: q.MaskedRange,
-            from: 1,
-            to: 9999
-          },
-          MM: {
-            mask: q.MaskedRange,
-            from: 1,
-            to: 12
-          },
-          DD: {
-            mask: q.MaskedRange,
-            from: 1,
-            to: 31
-          }
-        }
-      };
-      return v.value && (e.min = v.value), f.value && (e.max = f.value), e;
-    }), z = M(() => ({
-      [k.Years]: {
-        handleClickPreview: ea,
-        handleClickNext: aa
-      },
-      [k.Months]: {
-        handleClickPreview: ta,
-        handleClickNext: la,
-        handleClickHeading: Ke
-      },
-      [k.Dates]: {
-        handleClickPreview: sa,
-        handleClickNext: na,
-        handleClickHeading: Ue
-      }
-    }));
-    _(G, () => {
-      c && (c.off("accept", re), c.off("complete", de), c.updateOptions(De.value), Z(), c.on("accept", re), c.on("complete", de));
-    }), _(
-      () => t.minDate,
-      () => {
-        if (t.range) {
-          const e = r.value;
-          e.length > 0 && ye(e[0]);
-        } else {
-          const e = r.value;
-          ye(e);
-        }
-        b();
-      }
-    ), _(
-      () => t.maxDate,
-      () => {
-        if (t.range) {
-          const e = r.value;
-          e.length > 1 && ee(e[1]), e.length > 0 && ee(e[0]);
-        } else {
-          const e = r.value;
-          ee(e);
-        }
-        b();
-      }
-    ), _(
-      () => t.range,
-      (e) => {
-        e || Fe(() => {
-          Pe();
-        }), u.value = {}, n.value = [];
-      }
-    ), _(
-      () => t.view,
-      (e) => {
-        g.value = e;
-      }
-    ), _(me, () => {
-      y.value = !1;
-    }), _(y, (e) => {
-      e ? (ba(), t.range ? n.value = r.value ? be(r.value) : [] : u.value = r.value ? p(r.value) : {}, s.value = Y(P.value), Fe(() => {
-        me.value ? wa(I.value, x.value) : document.body.append(x.value);
-      })) : (Be(), Te(I.value, x.value));
-    }), _(
-      () => t.modelValue,
-      (e) => {
-        if (ae(e))
-          if (t.range) {
-            const a = e;
-            n.value = e ? be(a) : [], P.value = e ? p(a[1], !0) : {}, s.value = e ? p(a[1], !0) : {};
-          } else {
-            const a = e;
-            u.value = e ? p(a) : {}, P.value = e ? p(a, !0) : {}, s.value = e ? p(a, !0) : {};
-          }
-        !t.range && ae(ue()) && Z();
-      }
-    );
-    const Z = () => {
-      const e = d(t.modelValue);
-      c.value = e ? L(e) : "";
-    }, N = (e) => typeof t.modelValue == "string" ? e.toISOString() : e, ye = (e) => {
-      const a = d(e);
-      v.value && a && v.value > a && (r.value = void 0);
-    }, ee = (e) => {
-      const a = d(e);
-      f.value && a && f.value < a && (r.value = void 0);
-    }, d = (e) => {
-      switch (typeof e) {
-        case "object":
-          return e;
-        case "string":
-          return Ie(e) ? new Date(e) : void 0;
-      }
-      return e;
-    }, Ue = () => {
-      O(), g.value = k.Months;
-    }, Ke = () => {
-      A(), g.value = k.Years;
-    }, ae = (e) => {
-      var l, m;
-      return (t.range ? [
-        !T(t.modelValue) && T(e),
-        !T(e) && T(t.modelValue),
-        !T(t.modelValue) && !T(e) && t.modelValue.some(
-          (h, o) => {
-            var V, xe;
-            return ((V = d(h)) == null ? void 0 : V.getTime()) !== ((xe = d(e[o])) == null ? void 0 : xe.getTime());
-          }
-        )
-      ] : [
-        !t.modelValue && e,
-        !e && t.modelValue,
-        t.modelValue && e && ((l = d(t.modelValue)) == null ? void 0 : l.getTime()) !== ((m = d(e)) == null ? void 0 : m.getTime())
-      ]).some((h) => h);
-    }, We = () => {
-      y.value = !1;
-    }, Ge = () => {
-      y.value = !1, t.range ? n.value.length === 2 ? r.value = [
-        N(
-          new Date(
-            n.value[0].year,
-            n.value[0].month,
-            n.value[0].date
-          )
-        ),
-        N(
-          new Date(
-            n.value[1].year,
-            n.value[1].month,
-            n.value[1].date
-          )
-        )
-      ] : r.value = void 0 : !w(u.value.year) && !w(u.value.month) && !w(u.value.date) ? r.value = N(
-        new Date(
-          u.value.year,
-          u.value.month,
-          u.value.date
-        )
-      ) : r.value = void 0, P.value = Y(s.value);
-    }, Y = (e, a) => ({
-      year: e.year,
-      month: e.month,
-      date: a ? void 0 : e.date
-    }), p = (e, a) => ({
-      year: d(e).getFullYear(),
-      month: d(e).getMonth(),
-      date: a ? void 0 : d(e).getDate()
-    }), be = (e, a) => [
-      {
-        year: d(e[0]).getFullYear(),
-        month: d(e[0]).getMonth(),
-        date: a ? void 0 : d(e[0]).getDate()
-      },
-      {
-        year: d(e[1]).getFullYear(),
-        month: d(e[1]).getMonth(),
-        date: a ? void 0 : d(e[1]).getDate()
-      }
-    ], Je = (e) => {
-      s.value = Y(e), O(), g.value = k.Months;
-    }, Qe = (e) => {
-      s.value = Y(e), b(), g.value = k.Dates;
-    }, Xe = (e) => {
-      e.year === u.value.year && e.month === u.value.month && e.date === u.value.date ? u.value = Y({}) : (u.value = Y(e), s.value = Y(e, !0), b());
-    }, Ze = ({ year: e, month: a, date: l }) => {
-      const m = n.value.length;
-      if (m === 0)
-        n.value.push({ year: e, month: a, date: l });
-      else if (m === 1) {
-        const h = n.value.findIndex(
-          (o) => o.year === e && o.month === a && o.date === l
-        );
-        h !== -1 ? n.value.splice(h, 1) : new Date(e, a, l) > new Date(
-          n.value[0].year,
-          n.value[0].month,
-          n.value[0].date
-        ) ? n.value.push({ year: e, month: a, date: l }) : n.value.unshift({ year: e, month: a, date: l });
-      } else if (m === 2) {
-        const h = n.value.findIndex(
-          (o) => o.year === e && o.month === a && o.date === l
-        );
-        h !== -1 ? n.value.splice(h, 1) : (n.value = [], n.value.push({ year: e, month: a, date: l }));
-      }
-      s.value = {
-        year: e,
-        month: a
-      }, b();
-    }, ea = () => {
-      we(-1), A();
-    }, aa = () => {
-      we(1), A();
-    }, we = (e) => {
-      w(s.value.year) || (s.value.year += e * 10);
-    }, ta = () => {
-      Me(-1), O();
-    }, la = () => {
-      Me(1), O();
-    }, Me = (e) => {
-      w(s.value.year) || (s.value.year += e);
-    }, sa = () => {
-      Ce(-1), b();
-    }, na = () => {
-      Ce(1), b();
-    }, Ce = (e) => {
-      w(s.value.month) || (s.value.month += e);
-    }, oa = () => {
-      y.value = !0;
-    }, Ve = () => {
-      t.disabled || (y.value = !y.value);
-    }, te = (e) => (v.value ? v.value.getFullYear() > e : !1) || (f.value ? e > f.value.getFullYear() : !1), ua = (e, a) => (v.value ? v.value.getFullYear() === e && v.value.getMonth() > a || v.value.getFullYear() > e : !1) || (f.value ? f.value.getFullYear() === e && f.value.getMonth() < a || f.value.getFullYear() < e : !1), le = (e) => (v.value ? v.value > e : !1) || (f.value ? e > f.value : !1), se = (e, a) => new Date(e, a, 1), ne = (e, a) => new Date(e, a + 1, 0), A = () => {
-      if ($.value = [], w(s.value.year))
-        return;
-      const e = s.value.year.toString().slice(0, -1), a = +`${e}0`, l = +`${e}9`;
-      $.value.push({
-        year: a - 1,
-        secondary: !0,
-        disabled: te(a - 1)
-      });
-      for (let o = a; o <= l; o++)
-        $.value.push({
-          year: o,
-          disabled: te(o)
-        });
-      $.value.push({
-        year: l + 1,
-        secondary: !0,
-        disabled: te(l + 1)
-      }), j.value = `${e}0 - ${e}9`;
-      const m = se(a, 0), h = ne(l, 11);
-      oe(m, h);
-    }, O = () => {
-      if (Q.value = [], w(s.value.year))
-        return;
-      for (let l = 0; l < 12; l++)
-        Q.value.push({
-          year: s.value.year,
-          month: l,
-          disabled: ua(s.value.year, l)
-        });
-      j.value = s.value.year.toString();
-      const e = se(s.value.year, 0), a = ne(s.value.year, 11);
-      oe(e, a);
-    }, b = () => {
-      if (F.value = [], w(s.value.year) || w(s.value.month))
-        return;
-      const e = se(
-        s.value.year,
-        s.value.month
-      ), a = ne(
-        s.value.year,
-        s.value.month
-      ), l = structuredClone(e);
-      let m = l.getDay() === 0 ? 6 : l.getDay() - 1;
-      for (; m > 0; ) {
-        const o = structuredClone(l);
-        o.setDate(-(m - 1)), F.value.push({
-          date: o.getDate(),
-          month: o.getMonth(),
-          year: o.getFullYear(),
-          secondary: !0,
-          disabled: le(o)
-        }), m--;
-      }
-      for (; l <= a; )
-        F.value.push({
-          date: l.getDate(),
-          month: l.getMonth(),
-          year: l.getFullYear(),
-          disabled: le(l)
-        }), l.setDate(l.getDate() + 1);
-      const h = l.getDay() === 0 ? 1 : 7 - l.getDay() + 1;
-      if (h < 6) {
-        let o = 1;
-        const V = structuredClone(l);
-        for (; o <= h; )
-          V.setDate(o), F.value.push({
-            date: V.getDate(),
-            month: V.getMonth(),
-            year: V.getFullYear(),
-            secondary: !0,
-            disabled: le(V)
-          }), o++;
-      }
-      j.value = Ee(
-        new Date(s.value.year, s.value.month, 1)
-      ).toString(), oe(e, a);
-    }, oe = (e, a) => {
-      ge.value = v.value ? v.value >= e : !1, pe.value = f.value ? f.value <= a : !1;
-    }, ue = () => {
-      const e = c.value.split("/"), a = {
-        "vi-VN": `${e[2]}-${e[1]}-${e[0]}`,
-        "en-US": `${e[2]}-${e[0]}-${e[1]}`
-      };
-      return Ie(a[G.value]) ? new Date(a[G.value]) : void 0;
-    }, re = () => {
-      c.unmaskedValue || (r.value = void 0, u.value = {
-        year: D.getFullYear(),
-        month: D.getMonth()
-      });
-    }, de = () => {
-      const e = ue();
-      e ? (r.value = N(e), u.value = p(e), P.value = p(e, !0), s.value = p(e, !0), b()) : (r.value = void 0, u.value = {
-        year: D.getFullYear(),
-        month: D.getMonth()
-      });
-    }, ra = () => {
-      const e = ue();
-      Ae(), ae(e) && (e ? (r.value = N(e), P.value = p(e, !0), u.value = p(e), s.value = p(e, !0), b()) : (r.value = void 0, u.value = {
-        year: D.getFullYear(),
-        month: D.getMonth()
-      }));
-    }, _e = (e) => {
-      [I.value, x.value].some((m) => e.composedPath().includes(m)) || Se();
-    }, Ye = (e) => {
-      e.key === "Escape" && Se();
-    }, Se = () => {
-      var e, a;
-      y.value = !1, (e = he.value) == null || e.blur(), (a = J.value) == null || a.blur();
-    }, Pe = () => {
-      c = q(J.value, De.value), Z(), c.on("accept", re), c.on("complete", de);
-    }, da = () => {
-      c && c.destroy();
-    };
-    return (() => {
-      A(), O(), b();
-    })(), ca(() => {
-      t.range || Pe(), document.addEventListener("click", _e), document.addEventListener("keydown", Ye);
-    }), va(() => {
-      da(), Be(), Te(I.value, x.value), document.removeEventListener("keydown", Ye), document.removeEventListener("click", _e);
-    }), (e, a) => (C(), U("div", Ia, [
-      R("div", {
-        ref_key: "datePickerRef",
-        ref: I
-      }, [
-        S(pa, {
-          id: H.value,
-          label: e.label,
-          required: e.required
-        }, null, 8, ["id", "label", "required"]),
-        R("div", $a, [
-          t.range ? (C(), U("input", {
-            key: 0,
-            id: H.value,
-            ref_key: "datePickerInputRef",
-            ref: he,
-            class: ie([ke.value, "ds-drop-shadow-light"]),
-            disabled: e.disabled,
-            placeholder: e.placeholder,
-            value: He.value,
-            readonly: "",
-            onFocus: oa
-          }, null, 42, Na)) : (C(), U("input", {
-            key: 1,
-            id: H.value,
-            ref_key: "datePickerInputMaskRef",
-            ref: J,
-            class: ie([ke.value, "ds-drop-shadow-light"]),
-            disabled: e.disabled,
-            placeholder: e.placeholder,
-            onBlur: ra
-          }, null, 42, Oa)),
-          S(Sa, {
-            disabled: t.disabled,
-            onClick: Ve,
-            onKeyup: fa(Ve, ["enter"])
-          }, null, 8, ["disabled"])
-        ]),
-        ma(R("div", {
-          ref_key: "datePickerMenuRef",
-          ref: x,
-          class: "b-date-picker__menu sm:ds-items-[unset] sm:ds-justify-[unset] ds-fixed ds-left-0 ds-top-0 ds-z-100 ds-flex ds-h-full ds-w-full ds-items-center ds-justify-center ds-bg-black/65 ds-backdrop-blur-sm sm:ds-absolute sm:ds-left-[unset] sm:ds-top-[unset] sm:ds-z-50 sm:ds-block sm:ds-h-auto sm:ds-w-auto sm:ds-bg-transparent sm:ds-backdrop-blur-none"
-        }, [
-          R("div", Ea, [
-            R("div", qa, [
-              S(Va, {
-                disabled: ge.value,
-                onClick: a[0] || (a[0] = (l) => z.value[g.value].handleClickPreview())
-              }, null, 8, ["disabled"]),
-              S(Ya, {
-                class: ie({
-                  "ds-cursor-pointer hover:ds-bg-blue-light focus-visible:ds-bg-blue-light": z.value[g.value].handleClickHeading
-                }),
-                onClick: z.value[g.value].handleClickHeading
-              }, {
-                default: ce(() => [
-                  ve(fe(j.value), 1)
-                ]),
-                _: 1
-              }, 8, ["class", "onClick"]),
-              S(_a, {
-                disabled: pe.value,
-                onClick: a[1] || (a[1] = (l) => z.value[g.value].handleClickNext())
-              }, null, 8, ["disabled"])
-            ]),
-            g.value === B(k).Years ? (C(), E(xa, {
-              key: 0,
-              year: u.value,
-              years: $.value,
-              "onSelect:year": Je
-            }, null, 8, ["year", "years"])) : K("", !0),
-            g.value === B(k).Months ? (C(), E(Ca, {
-              key: 1,
-              month: u.value,
-              months: Q.value,
-              "onSelect:month": Qe
-            }, null, 8, ["month", "months"])) : K("", !0),
-            g.value === B(k).Dates ? (C(), U(ha, { key: 2 }, [
-              t.range ? (C(), E(Fa, {
-                key: 0,
-                "date-range": n.value,
-                dates: F.value,
-                "onSelect:date": Ze
-              }, null, 8, ["date-range", "dates"])) : (C(), E(Ma, {
-                key: 1,
-                date: u.value,
-                dates: F.value,
-                "onSelect:date": Xe
-              }, null, 8, ["date", "dates"]))
-            ], 64)) : K("", !0),
-            R("div", La, [
-              S(Re, { onClick: We }, {
-                default: ce(() => [
-                  ve(fe(B(W)("ds.components.base.date_picker.buttons.cancel")), 1)
-                ]),
-                _: 1
-              }),
-              S(Re, {
-                type: "primary",
-                onClick: Ge
-              }, {
-                default: ce(() => [
-                  ve(fe(B(W)("ds.components.base.date_picker.buttons.confirm")), 1)
-                ]),
-                _: 1
-              })
-            ])
-          ])
-        ], 512), [
-          [ga, y.value]
-        ])
-      ], 512),
-      e.hideDetails ? K("", !0) : (C(), E(Da, {
-        key: 0,
-        "error-message": B(X).errorMessage(),
-        class: "ds-mt-1"
-      }, null, 8, ["error-message"]))
-    ]));
-  }
-});
+import o from "./design-system51.mjs";
+import "./design-system52.mjs";
+import r from "./design-system53.mjs";
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-b5c5062f"]]);
 export {
-  ft as default
+  m as default
 };
 //# sourceMappingURL=design-system25.mjs.map