@synopackageland/ui 0.25.21 → 0.25.22

package/dist/modules/components/primitives/schedule-table/ScheduleTable.vue.js

@@ -0,0 +1,363 @@
+import { defineComponent as Me, computed as u, ref as K, reactive as Ce, watch as te, openBlock as i, createElementBlock as n, mergeProps as O, unref as H, createElementVNode as d, renderSlot as _, normalizeStyle as U, Fragment as g, renderList as D, normalizeClass as j, createTextVNode as B, toDisplayString as v, createVNode as $e, createCommentVNode as V, withModifiers as De, nextTick as Ve } from "vue";
+import { useUiLocale as Ie } from "../../../i18n/locale.js";
+import { useUiText as Le } from "../../../i18n/text.js";
+import { useFormControl as Ae } from "../../../composables/formControl.js";
+import { Pencil as Pe } from "@lucide/vue";
+import { scheduleSplitsPerHour as Te, scheduleCellsPerDay as Ee, scheduleValueLength as Ne, SCHEDULE_DAYS as I, SCHEDULE_MAX_OPTIONS as R, orderScheduleOptions as ze, scheduleCellIndex as ae } from "./schedule.js";
+const Ke = { class: "mb-3 flex flex-wrap items-start justify-between gap-3" }, Oe = ["disabled", "aria-pressed", "onClick"], He = {
+  key: 1,
+  class: "truncate"
+}, Ue = ["disabled", "aria-label", "onClick"], je = {
+  key: 0,
+  class: "overflow-x-auto [contain:inline-size]"
+}, Be = ["aria-disabled"], Re = { role: "row" }, We = {
+  scope: "col",
+  class: "w-10 border-r border-b border-[var(--ui-border)] bg-[var(--ui-surface-subtle)] p-0"
+}, Fe = ["disabled", "aria-label"], qe = ["colspan"], Xe = ["disabled", "aria-label", "onClick"], Ye = {
+  scope: "row",
+  role: "rowheader",
+  class: "border-r border-b border-[var(--ui-border)] bg-[var(--ui-surface-subtle)] p-0"
+}, Ze = ["disabled", "aria-label", "onClick"], Ge = ["data-cell-index", "data-day", "data-hour", "data-hour-split-index", "aria-label", "aria-selected", "tabindex", "onPointerdown", "onPointerenter", "onKeydown"], Je = {
+  key: 0,
+  class: "text-[length:var(--ui-font-size-sm)] leading-none text-[var(--ui-text-muted)]",
+  "aria-hidden": "true"
+}, Qe = {
+  key: 1,
+  class: "text-[length:var(--ui-font-size-sm)] leading-none text-[var(--ui-text-muted)]",
+  "aria-hidden": "true"
+}, et = {
+  key: 1,
+  class: "rounded-[var(--ui-radius-inner)] border border-dashed border-[var(--ui-border)] p-3 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-muted)]"
+}, tt = "h-6 cursor-pointer border-r border-b border-[var(--ui-border)] p-0 text-center align-middle transition-colors duration-[var(--ui-motion-fast)] ease-[var(--ui-motion-ease)] select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]", st = /* @__PURE__ */ Me({
+  inheritAttrs: !1,
+  __name: "ScheduleTable",
+  props: {
+    modelValue: {},
+    disabled: { type: Boolean, default: !1 },
+    dayLabels: {},
+    text: {},
+    options: { default: () => [] },
+    splitMinute: { default: 60 },
+    optionsCountPerRow: { default: 3 },
+    optionsMaxWidth: { default: "1fr" },
+    defaultSelected: { default: 0 },
+    ariaLabel: {},
+    ariaLabelledby: {},
+    prefix: { default: "v-schedule" }
+  },
+  emits: ["update:modelValue", "selected", "edit-option"],
+  setup(re, { emit: oe }) {
+    const le = Ie(() => {
+    }), k = Le(), r = re, L = oe, W = /* @__PURE__ */ new Set();
+    function p(e, t) {
+      W.has(e) || (W.add(e), console.warn(`[ScheduleTable] ${t}`));
+    }
+    const c = u(() => Te(r.splitMinute)), x = u(() => Ee(r.splitMinute)), A = u(() => Ne(r.splitMinute)), F = u(() => I.length * x.value), y = u(() => r.modelValue.length === A.value), f = u(() => (r.options ?? []).slice(0, R)), q = u(() => ze(f.value)), M = u(() => f.value.length > 0 && !r.disabled), X = K(ie(r.defaultSelected));
+    function ie(e) {
+      return !Number.isInteger(e) || e < 0 || e >= f.value.length ? 0 : e;
+    }
+    const w = u(
+      () => Math.min(Math.max(X.value, 0), Math.max(f.value.length - 1, 0))
+    ), ne = u(() => f.value[w.value]), se = u(() => Array.from({ length: 24 }, (e, t) => t)), P = u(() => y.value ? r.modelValue.split("") : []), ue = u(
+      () => I.map((e, t) => ({
+        day: t,
+        label: r.dayLabels?.[t] ?? new Intl.DateTimeFormat(le.value, { weekday: "short", timeZone: "UTC" }).format(new Date(Date.UTC(2023, 0, 1 + t))),
+        cells: Array.from({ length: x.value }, (a, o) => {
+          const s = ae(t, Math.floor(o / c.value), o % c.value, r.splitMinute);
+          return {
+            index: s,
+            hour: Math.floor(o / c.value),
+            splitIndex: o % c.value,
+            key: `${t}-${Math.floor(o / c.value)}-${o % c.value}`,
+            digit: P.value[s] ?? "0"
+          };
+        })
+      }))
+    );
+    function Y(e) {
+      const t = Number(e);
+      return !Number.isInteger(t) || t < 0 || t >= f.value.length ? 0 : t;
+    }
+    function b(e) {
+      return f.value[Y(e)];
+    }
+    const T = {
+      blue: "bg-[var(--ui-primary)]",
+      yellow: "bg-[var(--ui-schedule-yellow)]"
+    };
+    function Z(e) {
+      const t = b(e);
+      return t ? t.clear ? "bg-[var(--ui-surface)]" : t.color && T[t.color] ? T[t.color] : t.color ? "" : "bg-[var(--ui-surface-subtle)]" : "bg-[var(--ui-surface-subtle)]";
+    }
+    function E(e) {
+      const t = b(e);
+      return !t || t.clear || !t.color || T[t.color] ? {} : { backgroundColor: t.color };
+    }
+    function G(e, t) {
+      return [tt, Z(e), pe(t) ? "ring-1 ring-inset ring-[var(--ui-primary)]" : ""].filter(Boolean).join(" ");
+    }
+    function de(e) {
+      return M.value && Number(e) === w.value && !b(e)?.clear;
+    }
+    function ce(e, t) {
+      const a = String(t.splitIndex * r.splitMinute).padStart(2, "0"), o = b(t.digit);
+      return `${e.label} ${String(t.hour).padStart(2, "0")}:${a} ${o?.label ?? ""}`.trim();
+    }
+    function fe(e, t) {
+      return {
+        cellCls: G(t.digit, t.index),
+        style: E(t.digit),
+        day: e.day,
+        hour: t.hour,
+        hourSplitIndex: t.splitIndex,
+        cellKey: t.key,
+        click: () => m([t.index])
+      };
+    }
+    function be(e) {
+      const t = r.modelValue.split(""), a = String(w.value);
+      let o = !1;
+      for (const s of e)
+        s < 0 || s >= t.length || t[s] !== a && (t[s] = a, o = !0);
+      o && (z.changed(t.join("")), L("update:modelValue", t.join(""))), L("selected", { index: w.value, option: ne.value, cells: e });
+    }
+    function m(e) {
+      !y.value || !M.value || e.length === 0 || be(e);
+    }
+    function N(e, t) {
+      const a = Math.min(e, t), o = Math.max(e, t);
+      return Array.from({ length: o - a + 1 }, (s, $) => a + $);
+    }
+    function J(e) {
+      const t = e * x.value;
+      m(N(t, t + x.value - 1));
+    }
+    function Q(e) {
+      const t = [];
+      for (let a = 0; a < I.length; a++)
+        for (let o = 0; o < c.value; o++)
+          t.push(ae(a, e, o, r.splitMinute));
+      m(t);
+    }
+    function he() {
+      m(N(0, F.value - 1));
+    }
+    function ve(e) {
+      r.disabled || (X.value = e.index);
+    }
+    const l = Ce({ active: !1, start: -1, current: -1 });
+    function pe(e) {
+      return l.active ? e >= Math.min(l.start, l.current) && e <= Math.max(l.start, l.current) : !1;
+    }
+    function me(e) {
+      !y.value || !M.value || (l.active = !0, l.start = e, l.current = e, S.value = e);
+    }
+    function ge(e) {
+      l.active && (l.current = e);
+    }
+    function xe() {
+      if (!l.active) return;
+      const { start: e, current: t } = l;
+      l.active = !1, l.start = -1, l.current = -1, m(N(e, t));
+    }
+    function ye() {
+      l.active = !1, l.start = -1, l.current = -1;
+    }
+    const ee = K(null), S = K(0);
+    async function we(e) {
+      await Ve(), ee.value?.querySelector(`[data-cell-index="${e}"]`)?.focus();
+    }
+    function Se(e, t) {
+      if (r.disabled) return;
+      const a = x.value, o = a * I.length, s = Math.floor(t / a) * a, $ = s + a - 1;
+      let h;
+      switch (e.key) {
+        case "ArrowRight":
+          h = Math.min(t + 1, $);
+          break;
+        case "ArrowLeft":
+          h = Math.max(t - 1, s);
+          break;
+        case "ArrowDown":
+          h = Math.min(t + a, o - 1);
+          break;
+        case "ArrowUp":
+          h = Math.max(t - a, 0);
+          break;
+        case "Home":
+          h = e.ctrlKey || e.metaKey ? 0 : s;
+          break;
+        case "End":
+          h = e.ctrlKey || e.metaKey ? o - 1 : $;
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault(), e.shiftKey ? J(Math.floor(t / a)) : e.ctrlKey || e.metaKey ? Q(Math.floor(t % a / c.value)) : m([t]);
+          return;
+        default:
+          return;
+      }
+      e.preventDefault(), S.value = h, we(h);
+    }
+    function _e(e) {
+      return typeof e.editable == "object" && e.editable.trigger === "always";
+    }
+    const ke = u(() => {
+      const e = typeof r.optionsMaxWidth == "number" ? `${r.optionsMaxWidth}px` : r.optionsMaxWidth, t = r.optionsCountPerRow;
+      return { gridTemplateColumns: `repeat(auto-fit, minmax(max(120px, calc((100% - ${t - 1} * 0.75rem) / ${t})), ${e}))` };
+    });
+    te(
+      () => [r.options.length, r.modelValue, r.splitMinute],
+      () => {
+        f.value.length === 0 && p("empty-options", "`options` is empty, so no cell can be selected or rendered with a state."), (r.options?.length ?? 0) > R && p("too-many-options", `only the first ${R} options are usable; the rest are ignored.`), (!Number.isInteger(r.defaultSelected) || r.defaultSelected < 0 || r.defaultSelected >= f.value.length) && p("default-selected", "`defaultSelected` is out of range, falling back to 0."), r.modelValue.length > 0 && r.modelValue.length % 168 !== 0 && p("value-length-modulo", "`modelValue` length must be a multiple of 168."), !y.value && r.modelValue.length > 0 && p("value-length", `\`modelValue\` must be ${A.value} characters for splitMinute=${r.splitMinute}.`), P.value.some((e) => Y(e) !== Number(e)) && p("digit-range", "a digit in `modelValue` has no matching option; it renders as option 0.");
+      },
+      { immediate: !0 }
+    ), te(c, () => {
+      S.value = Math.min(S.value, F.value - 1);
+    });
+    const z = Ae({ value: () => r.modelValue, disabled: () => r.disabled, ariaLabel: () => r.ariaLabel, ariaLabelledby: () => r.ariaLabelledby }), C = u(() => ({ selectAll: k("Select all times"), selectHour: (e) => k("Select hour {hour}", { hour: e }), selectDay: (e) => k("Select {name}", { name: e }), edit: (e) => k("Edit {name}", { name: e }), ...r.text }));
+    return (e, t) => (i(), n("div", O(H(z).wrapperAttrs(), {
+      class: ["w-full text-[var(--ui-text)]", r.prefix],
+      "data-syno-pkg-land-ui": ""
+    }), [
+      d("div", Ke, [
+        _(e.$slots, "control", {}, () => [
+          q.value.length ? (i(), n("div", {
+            key: 0,
+            class: "grid gap-3",
+            style: U(ke.value)
+          }, [
+            (i(!0), n(g, null, D(q.value, (a) => (i(), n("div", {
+              key: a.index,
+              class: "group inline-flex items-center gap-1"
+            }, [
+              d("button", {
+                type: "button",
+                disabled: r.disabled,
+                class: "flex h-6 min-w-0 items-center gap-2 rounded-[var(--ui-radius-inner)] px-2 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text)] outline-none hover:bg-[var(--ui-surface-hover)] focus-visible:shadow-[var(--ui-shadow-focus)] aria-pressed:bg-[var(--ui-surface-hover)]",
+                "aria-pressed": a.index === w.value,
+                onClick: (o) => ve(a)
+              }, [
+                d("span", {
+                  class: j(["size-3.5 shrink-0 rounded-[var(--ui-radius-inner)] border border-[var(--ui-border)]", Z(String(a.index))]),
+                  style: U(E(String(a.index))),
+                  "aria-hidden": "true"
+                }, null, 6),
+                a.option.labelSlot ? _(e.$slots, a.option.labelSlot, {}, () => [
+                  B(v(a.option.label), 1)
+                ], void 0, 0) : (i(), n("span", He, v(a.option.label), 1))
+              ], 8, Oe),
+              a.option.editable ? (i(), n("button", {
+                key: 0,
+                type: "button",
+                disabled: r.disabled,
+                class: j(["flex size-6 shrink-0 items-center justify-center rounded-[var(--ui-radius-inner)] text-[var(--ui-text-muted)] outline-none hover:bg-[var(--ui-surface-hover)] focus-visible:shadow-[var(--ui-shadow-focus)]", _e(a.option) ? "" : "opacity-0 group-hover:opacity-100 focus-visible:opacity-100 [@media(hover:none)]:opacity-100"]),
+                "aria-label": C.value.edit(a.option.label),
+                onClick: (o) => L("edit-option", a.option)
+              }, [
+                $e(H(Pe), {
+                  class: "size-3.5",
+                  "aria-hidden": "true"
+                })
+              ], 10, Ue)) : V("", !0)
+            ]))), 128))
+          ], 4)) : V("", !0)
+        ]),
+        _(e.$slots, "description")
+      ]),
+      y.value && P.value.length && f.value.length ? (i(), n("div", je, [
+        d("table", O({
+          ref_key: "gridRef",
+          ref: ee,
+          role: "grid"
+        }, H(z).controlAttrs(), {
+          "aria-disabled": r.disabled || void 0,
+          style: { minWidth: `${40 + 24 * Math.max(28, 12 * c.value)}px` },
+          class: "w-full table-fixed border-collapse overflow-hidden rounded-[var(--ui-radius-inner)] border-t border-l border-[var(--ui-border)]",
+          onPointerup: xe,
+          onPointerleave: ye
+        }), [
+          d("thead", null, [
+            d("tr", Re, [
+              d("th", We, [
+                d("button", {
+                  type: "button",
+                  disabled: r.disabled,
+                  class: "flex h-6 w-full items-end justify-start p-1 outline-none hover:bg-[var(--ui-surface-hover)] focus-visible:shadow-[var(--ui-shadow-focus)]",
+                  "aria-label": C.value.selectAll,
+                  onClick: he
+                }, [...t[0] || (t[0] = [
+                  d("span", {
+                    class: "h-0 w-0 border-b-8 border-l-8 border-b-[var(--ui-primary)] border-l-transparent",
+                    "aria-hidden": "true"
+                  }, null, -1)
+                ])], 8, Fe)
+              ]),
+              (i(!0), n(g, null, D(se.value, (a) => (i(), n("th", {
+                key: a,
+                colspan: c.value,
+                scope: "col",
+                role: "columnheader",
+                class: "border-r border-b border-[var(--ui-border)] bg-[var(--ui-surface-subtle)] p-0"
+              }, [
+                d("button", {
+                  type: "button",
+                  disabled: r.disabled,
+                  class: "h-6 w-full text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-secondary)] outline-none hover:bg-[var(--ui-surface-hover)] focus-visible:shadow-[var(--ui-shadow-focus)]",
+                  "aria-label": C.value.selectHour(a),
+                  onClick: (o) => Q(a)
+                }, v(a), 9, Xe)
+              ], 8, qe))), 128))
+            ])
+          ]),
+          d("tbody", null, [
+            (i(!0), n(g, null, D(ue.value, (a) => (i(), n("tr", {
+              key: a.day,
+              role: "row"
+            }, [
+              d("th", Ye, [
+                d("button", {
+                  type: "button",
+                  disabled: r.disabled,
+                  class: "h-6 w-full px-1 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-secondary)] outline-none hover:bg-[var(--ui-surface-hover)] focus-visible:shadow-[var(--ui-shadow-focus)]",
+                  "aria-label": C.value.selectDay(a.label),
+                  onClick: (o) => J(a.day)
+                }, v(a.label), 9, Ze)
+              ]),
+              (i(!0), n(g, null, D(a.cells, (o) => (i(), n("td", {
+                key: o.key,
+                role: "gridcell",
+                "data-cell-index": o.index,
+                "data-day": a.day,
+                "data-hour": o.hour,
+                "data-hour-split-index": o.splitIndex,
+                "aria-label": ce(a, o),
+                "aria-selected": de(o.digit),
+                tabindex: !r.disabled && o.index === S.value ? 0 : -1,
+                class: j(G(o.digit, o.index)),
+                style: U(E(o.digit)),
+                onPointerdown: De((s) => me(o.index), ["prevent"]),
+                onPointerenter: (s) => ge(o.index),
+                onKeydown: (s) => Se(s, o.index)
+              }, [
+                b(o.digit)?.customCellSlot ? _(e.$slots, b(o.digit).customCellSlot, O({ ref_for: !0 }, fe(a, o)), () => [
+                  b(o.digit)?.clear ? (i(), n("span", Je, "×")) : V("", !0)
+                ], void 0, 0) : b(o.digit)?.clear ? (i(), n("span", Qe, "×")) : V("", !0)
+              ], 46, Ge))), 128))
+            ]))), 128))
+          ])
+        ], 16, Be)
+      ])) : (i(), n("p", et, [
+        M.value ? (i(), n(g, { key: 1 }, [
+          B(" ScheduleTable expects modelValue to be " + v(A.value) + " characters long (splitMinute = " + v(r.splitMinute) + "), got " + v(r.modelValue.length), 1)
+        ], 64)) : (i(), n(g, { key: 0 }, [
+          B("ScheduleTable needs at least one option to render its cells")
+        ], 64))
+      ])),
+      _(e.$slots, "detail")
+    ], 16));
+  }
+});
+export {
+  st as default
+};

package/dist/modules/components/primitives/schedule-table/ScheduleTable2.vue.js

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

package/dist/modules/components/primitives/schedule-table/schedule.js

@@ -0,0 +1,34 @@
+const d = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], i = [60, 30, 15], l = 10;
+function u(e) {
+  return 60 / e;
+}
+function o(e) {
+  return 24 * u(e);
+}
+function c(e) {
+  return d.length * o(e);
+}
+function s(e, n) {
+  return typeof e == "string" && e.length === c(n) && /^\d*$/.test(e);
+}
+function S(e, n = "0") {
+  return n.repeat(c(e));
+}
+function h(e, n, t, r) {
+  return e * o(r) + n * u(r) + t;
+}
+function f(e) {
+  return e.map((n, t) => ({ option: n, index: t })).sort((n, t) => (n.option.order ?? 0) - (t.option.order ?? 0) || n.index - t.index);
+}
+export {
+  d as SCHEDULE_DAYS,
+  l as SCHEDULE_MAX_OPTIONS,
+  i as SCHEDULE_SPLIT_MINUTES,
+  S as createScheduleValue,
+  s as isValidScheduleValue,
+  f as orderScheduleOptions,
+  h as scheduleCellIndex,
+  o as scheduleCellsPerDay,
+  u as scheduleSplitsPerHour,
+  c as scheduleValueLength
+};