@itguy614/clean-ui 0.9.0 → 1.0.0

package/dist/components/CuiDatePicker.vue.js

@@ -0,0 +1,382 @@
+import { defineComponent as ye, ref as z, watch as P, onMounted as ge, computed as D, useTemplateRef as L, withDirectives as he, openBlock as u, createElementBlock as d, toDisplayString as m, createCommentVNode as I, createVNode as s, withCtx as c, createElementVNode as f, Fragment as k, createTextVNode as T, unref as B, renderList as Y, normalizeStyle as W, vShow as pe } from "vue";
+import be from "./CuiMaskedInput.vue.js";
+import xe from "./CuiPopover.vue.js";
+import y from "./CuiButton.vue.js";
+import C from "./CuiIcon.vue.js";
+import { formatToMask as De, formatToRaw as ke, formatDate as Ce, isoToDate as A, daysInMonth as N, firstDayOfMonth as _e, MONTH_NAMES_SHORT as U, DAY_NAMES_SHORT as Me, isDateDisabled as we, parseFormattedDate as ze, isSameDay as Te, isToday as Ye, dateToIso as Se } from "../utils/date.js";
+const Ve = {
+  key: 0,
+  style: {
+    display: "block",
+    marginBottom: "calc(0.25rem * var(--cui-density-scale, 1))",
+    fontSize: "0.875rem",
+    fontWeight: "500",
+    color: "var(--cui-text-secondary)"
+  }
+}, Re = { style: { padding: "calc(0.25rem * var(--cui-density-scale, 1))", minWidth: "260px" } }, Fe = { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "calc(0.5rem * var(--cui-density-scale, 1))" } }, Ie = { style: { display: "flex", gap: "calc(0.25rem * var(--cui-density-scale, 1))" } }, Be = { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "0", marginBottom: "calc(0.25rem * var(--cui-density-scale, 1))" } }, We = { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "calc(2px * var(--cui-density-scale, 1))" } }, Ae = ["data-disabled", "onClick"], Ne = {
+  key: 0,
+  style: { marginTop: "calc(0.5rem * var(--cui-density-scale, 1))", textAlign: "center" }
+}, $e = { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "calc(0.5rem * var(--cui-density-scale, 1))" } }, Ee = { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "calc(4px * var(--cui-density-scale, 1))" } }, je = ["onClick"], Oe = { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "calc(0.5rem * var(--cui-density-scale, 1))" } }, He = { style: { fontSize: "0.8125rem", fontWeight: "600", color: "var(--cui-text-body)" } }, Pe = { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "calc(4px * var(--cui-density-scale, 1))" } }, Le = ["onClick"], Xe = /* @__PURE__ */ ye({
+  __name: "CuiDatePicker",
+  props: {
+    modelValue: {},
+    format: { default: "MM/DD/YYYY" },
+    valueType: { default: "iso" },
+    mode: { default: "date" },
+    fillDay: { default: "first" },
+    highlightToday: { type: Boolean, default: !0 },
+    minDate: {},
+    maxDate: {},
+    disabledDate: {},
+    disabledDates: {},
+    placeholder: {},
+    size: { default: "md" },
+    label: {},
+    hidden: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(g, { expose: q, emit: G }) {
+    const i = g, $ = G, l = z((/* @__PURE__ */ new Date()).getFullYear()), o = z((/* @__PURE__ */ new Date()).getMonth()), h = z(i.mode === "month" ? "months" : "days"), _ = z(!1), n = z(null);
+    function J() {
+      return i.modelValue ? i.modelValue instanceof Date ? i.modelValue : A(i.modelValue) : null;
+    }
+    function E() {
+      const e = J();
+      n.value = e, e && (l.value = e.getFullYear(), o.value = e.getMonth());
+    }
+    P(() => i.modelValue, E), ge(E);
+    const j = D(() => De(i.format)), K = D(() => i.placeholder ?? i.format.toLowerCase()), Q = D(() => n.value ? ke(Ce(n.value, i.format)) : "");
+    function S(e) {
+      n.value = e, i.valueType === "date" ? $("update:modelValue", e) : $("update:modelValue", Se(e));
+    }
+    const X = D(() => i.minDate ? A(i.minDate) : null), Z = D(() => i.maxDate ? A(i.maxDate) : null);
+    function M(e) {
+      return we(e, {
+        minDate: X.value,
+        maxDate: Z.value,
+        disabledDate: i.disabledDate,
+        disabledDates: i.disabledDates
+      });
+    }
+    const ee = D(() => {
+      const e = [], t = N(l.value, o.value), a = _e(l.value, o.value), r = o.value === 0 ? 11 : o.value - 1, p = o.value === 0 ? l.value - 1 : l.value, b = N(p, r);
+      for (let v = a - 1; v >= 0; v--) {
+        const x = new Date(p, r, b - v);
+        e.push({ date: x, inMonth: !1, disabled: M(x) });
+      }
+      for (let v = 1; v <= t; v++) {
+        const x = new Date(l.value, o.value, v);
+        e.push({ date: x, inMonth: !0, disabled: M(x) });
+      }
+      const w = 42 - e.length, me = o.value === 11 ? 0 : o.value + 1, fe = o.value === 11 ? l.value + 1 : l.value;
+      for (let v = 1; v <= w; v++) {
+        const x = new Date(fe, me, v);
+        e.push({ date: x, inMonth: !1, disabled: M(x) });
+      }
+      return e;
+    });
+    function O(e) {
+      e.disabled || (S(e.date), _.value = !1);
+    }
+    function te(e) {
+      if (o.value = e, i.mode === "month") {
+        const t = i.fillDay === "last" ? N(l.value, e) : 1;
+        S(new Date(l.value, e, t)), _.value = !1;
+      } else
+        h.value = "days";
+    }
+    function ae(e) {
+      l.value = e, h.value = (i.mode === "month", "months");
+    }
+    function le() {
+      o.value === 0 ? (o.value = 11, l.value--) : o.value--;
+    }
+    function ie() {
+      o.value === 11 ? (o.value = 0, l.value++) : o.value++;
+    }
+    const V = D(() => Math.floor(l.value / 12) * 12), ne = D(() => Array.from({ length: 12 }, (e, t) => V.value + t));
+    function oe() {
+      l.value -= 12;
+    }
+    function se() {
+      l.value += 12;
+    }
+    function re() {
+      h.value = "months";
+    }
+    function H() {
+      h.value = "years";
+    }
+    function ue(e) {
+      const t = String(e), a = j.value.split("");
+      let r = 0, p = "";
+      for (const w of a)
+        w === "#" || w === "A" ? p += r < t.length ? t[r++] : "" : p += w;
+      const b = ze(p, i.format);
+      b && !isNaN(b.getTime()) && !M(b) && (S(b), l.value = b.getFullYear(), o.value = b.getMonth());
+    }
+    function de(e) {
+      const t = {
+        width: "2rem",
+        height: "2rem",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "0.375rem",
+        fontSize: "0.8125rem",
+        cursor: e.disabled ? "default" : "pointer",
+        transition: "background 0.1s ease, color 0.1s ease"
+      }, a = n.value && Te(e.date, n.value), r = i.highlightToday && Ye(e.date);
+      return e.disabled ? (t.color = "var(--cui-text-tertiary)", t.opacity = "0.35") : a ? (t.background = "var(--cui-primary)", t.color = "var(--cui-primary-text, white)", t.fontWeight = "600") : r ? (t.background = "var(--cui-primary-bg)", t.color = "var(--cui-primary)", t.fontWeight = "600") : e.inMonth ? t.color = "var(--cui-text-body)" : t.color = "var(--cui-text-tertiary)", t;
+    }
+    const R = L("rootEl"), F = L("maskedInput");
+    function ce(e) {
+      var t;
+      F.value ? F.value.focus() : (t = R.value) == null || t.focus(e);
+    }
+    function ve() {
+      var e;
+      (e = F.value) == null || e.blur();
+    }
+    return q({ el: R, focus: ce, blur: ve }), P(_, (e) => {
+      e && (h.value = i.mode === "month" ? "months" : "days", n.value && (l.value = n.value.getFullYear(), o.value = n.value.getMonth()));
+    }), (e, t) => he((u(), d("div", {
+      ref_key: "rootEl",
+      ref: R
+    }, [
+      g.label ? (u(), d("label", Ve, m(g.label), 1)) : I("", !0),
+      s(xe, {
+        visible: _.value,
+        "onUpdate:visible": t[3] || (t[3] = (a) => _.value = a),
+        placement: "bottom",
+        closable: !1,
+        "no-arrow": "",
+        width: "auto",
+        disabled: g.disabled
+      }, {
+        content: c(() => [
+          f("div", Re, [
+            h.value === "days" ? (u(), d(k, { key: 0 }, [
+              f("div", Fe, [
+                s(y, {
+                  variant: "ghost",
+                  size: "xs",
+                  onClick: le
+                }, {
+                  default: c(() => [
+                    s(C, {
+                      name: "caret-left",
+                      size: "0.875rem"
+                    })
+                  ]),
+                  _: 1
+                }),
+                f("div", Ie, [
+                  s(y, {
+                    variant: "ghost",
+                    size: "xs",
+                    style: { fontWeight: "600" },
+                    onClick: re
+                  }, {
+                    default: c(() => [
+                      T(m(B(U)[o.value]), 1)
+                    ]),
+                    _: 1
+                  }),
+                  s(y, {
+                    variant: "ghost",
+                    size: "xs",
+                    style: { fontWeight: "600" },
+                    onClick: H
+                  }, {
+                    default: c(() => [
+                      T(m(l.value), 1)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                s(y, {
+                  variant: "ghost",
+                  size: "xs",
+                  onClick: ie
+                }, {
+                  default: c(() => [
+                    s(C, {
+                      name: "caret-right",
+                      size: "0.875rem"
+                    })
+                  ]),
+                  _: 1
+                })
+              ]),
+              f("div", Be, [
+                (u(!0), d(k, null, Y(B(Me), (a) => (u(), d("div", {
+                  key: a,
+                  style: {
+                    textAlign: "center",
+                    fontSize: "0.6875rem",
+                    fontWeight: "600",
+                    color: "var(--cui-text-tertiary)",
+                    padding: "calc(0.25rem * var(--cui-density-scale, 1)) 0",
+                    textTransform: "uppercase"
+                  }
+                }, m(a), 1))), 128))
+              ]),
+              f("div", We, [
+                (u(!0), d(k, null, Y(ee.value, (a, r) => (u(), d("div", {
+                  key: r,
+                  style: W(de(a)),
+                  "data-disabled": a.disabled,
+                  onClick: (p) => O(a)
+                }, m(a.date.getDate()), 13, Ae))), 128))
+              ]),
+              g.highlightToday ? (u(), d("div", Ne, [
+                s(y, {
+                  variant: "ghost",
+                  size: "xs",
+                  onClick: t[0] || (t[0] = (a) => O({ date: /* @__PURE__ */ new Date(), disabled: M(/* @__PURE__ */ new Date()) }))
+                }, {
+                  default: c(() => [...t[4] || (t[4] = [
+                    T(" Today ", -1)
+                  ])]),
+                  _: 1
+                })
+              ])) : I("", !0)
+            ], 64)) : h.value === "months" ? (u(), d(k, { key: 1 }, [
+              f("div", $e, [
+                s(y, {
+                  variant: "ghost",
+                  size: "xs",
+                  onClick: t[1] || (t[1] = (a) => l.value--)
+                }, {
+                  default: c(() => [
+                    s(C, {
+                      name: "caret-left",
+                      size: "0.875rem"
+                    })
+                  ]),
+                  _: 1
+                }),
+                s(y, {
+                  variant: "ghost",
+                  size: "xs",
+                  style: { fontWeight: "600" },
+                  onClick: H
+                }, {
+                  default: c(() => [
+                    T(m(l.value), 1)
+                  ]),
+                  _: 1
+                }),
+                s(y, {
+                  variant: "ghost",
+                  size: "xs",
+                  onClick: t[2] || (t[2] = (a) => l.value++)
+                }, {
+                  default: c(() => [
+                    s(C, {
+                      name: "caret-right",
+                      size: "0.875rem"
+                    })
+                  ]),
+                  _: 1
+                })
+              ]),
+              f("div", Ee, [
+                (u(!0), d(k, null, Y(B(U), (a, r) => (u(), d("div", {
+                  key: r,
+                  style: W({
+                    padding: "calc(0.5rem * var(--cui-density-scale, 1))",
+                    textAlign: "center",
+                    borderRadius: "0.375rem",
+                    cursor: "pointer",
+                    fontSize: "0.8125rem",
+                    fontWeight: n.value && n.value.getMonth() === r && n.value.getFullYear() === l.value ? "600" : "400",
+                    background: n.value && n.value.getMonth() === r && n.value.getFullYear() === l.value ? "var(--cui-primary)" : "transparent",
+                    color: n.value && n.value.getMonth() === r && n.value.getFullYear() === l.value ? "var(--cui-primary-text, white)" : o.value === r ? "var(--cui-primary)" : "var(--cui-text-body)",
+                    transition: "background 0.1s ease"
+                  }),
+                  onClick: (p) => te(r)
+                }, m(a), 13, je))), 128))
+              ])
+            ], 64)) : h.value === "years" ? (u(), d(k, { key: 2 }, [
+              f("div", Oe, [
+                s(y, {
+                  variant: "ghost",
+                  size: "xs",
+                  onClick: oe
+                }, {
+                  default: c(() => [
+                    s(C, {
+                      name: "caret-left",
+                      size: "0.875rem"
+                    })
+                  ]),
+                  _: 1
+                }),
+                f("span", He, m(V.value) + " – " + m(V.value + 11), 1),
+                s(y, {
+                  variant: "ghost",
+                  size: "xs",
+                  onClick: se
+                }, {
+                  default: c(() => [
+                    s(C, {
+                      name: "caret-right",
+                      size: "0.875rem"
+                    })
+                  ]),
+                  _: 1
+                })
+              ]),
+              f("div", Pe, [
+                (u(!0), d(k, null, Y(ne.value, (a) => (u(), d("div", {
+                  key: a,
+                  style: W({
+                    padding: "calc(0.5rem * var(--cui-density-scale, 1))",
+                    textAlign: "center",
+                    borderRadius: "0.375rem",
+                    cursor: "pointer",
+                    fontSize: "0.8125rem",
+                    fontWeight: l.value === a ? "600" : "400",
+                    background: n.value && n.value.getFullYear() === a ? "var(--cui-primary)" : "transparent",
+                    color: n.value && n.value.getFullYear() === a ? "var(--cui-primary-text, white)" : l.value === a ? "var(--cui-primary)" : "var(--cui-text-body)",
+                    transition: "background 0.1s ease"
+                  }),
+                  onClick: (r) => ae(a)
+                }, m(a), 13, Le))), 128))
+              ])
+            ], 64)) : I("", !0)
+          ])
+        ]),
+        default: c(() => [
+          s(be, {
+            ref: "maskedInput",
+            "model-value": Q.value,
+            mask: j.value,
+            placeholder: K.value,
+            size: g.size,
+            disabled: g.disabled,
+            "onUpdate:modelValue": ue
+          }, {
+            suffix: c(() => [
+              s(C, {
+                name: "calendar-blank",
+                size: "0.875rem",
+                style: { color: "var(--cui-text-tertiary)" }
+              })
+            ]),
+            _: 1
+          }, 8, ["model-value", "mask", "placeholder", "size", "disabled"])
+        ]),
+        _: 1
+      }, 8, ["visible", "disabled"])
+    ], 512)), [
+      [pe, !g.hidden]
+    ]);
+  }
+});
+export {
+  Xe as default
+};

package/dist/components/CuiDatePicker.vue2.js

@@ -0,0 +1,4 @@
+import f from "./CuiDatePicker.vue.js";
+export {
+  f as default
+};