x-next 1.1.0 → 1.2.0

package/dist/es/components/time-range-selector/TimeRangeSelector.vue.js

@@ -1,6 +1,9 @@
-import { defineComponent as xe, ref as z, reactive as be, computed as h, watch as ne, onBeforeUnmount as ke, openBlock as m, createElementBlock as p, normalizeStyle as F, normalizeClass as f, unref as u, createElementVNode as y, Fragment as E, renderList as I, withModifiers as B, toDisplayString as X, createCommentVNode as ze } from "vue";
-import { getClassNameMixin as Ee } from "../../_utils/config.js";
-const Ie = ["onDblclick", "onMousedown"], Be = ["onMousedown"], De = ["onMousedown"], _e = /* @__PURE__ */ xe({
+import { defineComponent as Ge, ref as A, useAttrs as He, computed as R, toRef as Pe, useId as Ue, reactive as We, watch as _, onBeforeUnmount as qe, openBlock as h, createElementBlock as b, mergeProps as Re, unref as s, createElementVNode as k, withKeys as Qe, withModifiers as D, normalizeClass as g, toDisplayString as N, normalizeStyle as ae, createCommentVNode as Se, Fragment as K, renderList as T, nextTick as J } from "vue";
+import { getClassNameMixin as Ye } from "../../_utils/config.js";
+import { useFormItem as Ze, useFormItemControl as et } from "../../_hooks/use-form-item.js";
+import { useLocale as tt } from "../../locale/index.js";
+const nt = ["tabindex", "aria-disabled", "aria-describedby", "onKeydown"], at = ["data-range-id", "tabindex", "aria-label", "title", "onDblclick", "onMousedown", "onKeydown"], st = ["onMousedown"], ot = ["onMousedown"], ut = /* @__PURE__ */ Ge({
+  inheritAttrs: !1,
   __name: "TimeRangeSelector",
   props: {
     modelValue: {},
@@ -10,11 +13,32 @@ const Ie = ["onDblclick", "onMousedown"], Be = ["onMousedown"], De = ["onMousedo
     stepMinutes: { default: 30 },
     disabledRanges: { default: () => [] },
     maxRanges: { default: 1 / 0 },
-    showCursor: { type: Boolean, default: !0 }
+    showCursor: { type: Boolean, default: !0 },
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 }
   },
-  emits: ["update:modelValue"],
-  setup(T, { emit: se }) {
-    const l = Ee("time-range-selector"), i = T, ae = se, J = z(null), o = z([]), D = z(/* @__PURE__ */ new Set()), G = z([]), a = be({
+  emits: ["update:modelValue", "change", "remove"],
+  setup(se, { emit: xe }) {
+    const d = Ye("time-range-selector"), u = se, j = xe, S = A(null), { t: I } = tt(), $ = He(), ke = R(
+      () => Object.fromEntries(
+        Object.entries($).filter(
+          ([e]) => e !== "id" && !e.startsWith("aria-") && e !== "class" && e !== "style"
+        )
+      )
+    ), { formItemCtx: oe, mergedDisabled: B, mergedError: Ee, eventHandlers: X } = Ze({
+      disabled: Pe(u, "disabled")
+    }), re = et(
+      oe,
+      () => ({
+        ...Object.fromEntries(
+          Object.entries($).filter(([e]) => e === "id" || e.startsWith("aria-"))
+        ),
+        "aria-label": $["aria-label"] ?? (oe.labelId ? void 0 : I("timeRangeSelector.label"))
+      }),
+      { labelable: !1 }
+    ), le = R(() => u.readonly), x = R(() => !B.value && !le.value), G = `x-time-range-selector-${Ue()}-instructions`, w = A(0), l = A([]);
+    let H = JSON.stringify(u.modelValue), ie = 0;
+    const P = A(/* @__PURE__ */ new Set()), de = A([]), o = We({
       active: !1,
       type: "",
       rangeId: 0,
@@ -22,275 +46,385 @@ const Ie = ["onDblclick", "onMousedown"], Be = ["onMousedown"], De = ["onMousedo
       startOffset: 0,
       initialRange: { id: 0, start: 0, end: 0 }
     });
-    let U = 0, $ = !1;
-    const oe = (e) => {
+    let U = 0, W = !1;
+    const De = (e) => {
       const n = Math.floor(Number(e));
       return !Number.isFinite(n) || n <= 0 || 1440 % n !== 0 ? 30 : n;
-    }, d = (e, n, t) => Math.min(Math.max(e, n), t), g = h(() => oe(i.stepMinutes)), r = h(() => 1440 / g.value), re = h(
-      () => Array.from({ length: r.value }, (e, n) => ({
+    }, m = (e, n, t) => Math.min(Math.max(e, n), t), M = R(() => De(u.stepMinutes)), i = R(() => 1440 / M.value), Ie = R(
+      () => Array.from({ length: i.value }, (e, n) => ({
         index: n,
-        disabled: D.value.has(n),
-        alternate: Math.floor(n * g.value / 60) % 2 === 1
+        disabled: P.value.has(n),
+        alternate: Math.floor(n * M.value / 60) % 2 === 1
       }))
-    ), le = h(() => a.active), ie = h(() => l.modifier(`scene-${i.scene}`)), ue = h(
-      () => i.color ? { "--x-time-range-selector-color": i.color } : {}
-    ), de = (e) => {
+    ), $e = R(() => o.active), Be = R(() => d.modifier(`scene-${u.scene}`)), Oe = R(
+      () => u.color ? { "--x-time-range-selector-color": u.color } : {}
+    ), ze = (e) => {
       if (e === "24:00")
         return 1440;
       const n = /^(\d{1,2}):(\d{2})$/.exec(e);
       if (!n)
         return;
-      const t = Number(n[1]), s = Number(n[2]);
-      if (!(t < 0 || t > 23 || s < 0 || s > 59))
-        return t * 60 + s;
-    }, w = (e) => {
-      const n = d(e, 0, r.value) * g.value;
+      const t = Number(n[1]), a = Number(n[2]);
+      if (!(t < 0 || t > 23 || a < 0 || a > 59))
+        return t * 60 + a;
+    }, v = (e) => {
+      const n = m(e, 0, i.value) * M.value;
       if (n >= 1440)
         return "24:00";
-      const t = Math.floor(n / 60), s = n % 60;
-      return `${t.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
-    }, R = (e) => {
-      const n = de(e);
+      const t = Math.floor(n / 60), a = n % 60;
+      return `${t.toString().padStart(2, "0")}:${a.toString().padStart(2, "0")}`;
+    }, V = (e) => {
+      const n = ze(e);
       if (n !== void 0)
-        return d(Math.round(n / g.value), 0, r.value);
-    }, N = (e) => {
-      const n = d(Math.min(e.start, e.end), 0, r.value), t = d(Math.max(e.start, e.end), 0, r.value);
+        return m(Math.round(n / M.value), 0, i.value);
+    }, q = (e) => {
+      const n = m(Math.min(e.start, e.end), 0, i.value), t = m(Math.max(e.start, e.end), 0, i.value);
       return { ...e, start: n, end: t };
-    }, ce = () => {
-      o.value.sort((e, n) => e.start - n.start || e.end - n.end);
-    }, _ = (e) => e < 0 || e >= r.value || D.value.has(e), P = (e, n) => {
+    }, Ae = () => {
+      l.value.sort((e, n) => e.start - n.start || e.end - n.end);
+    }, Q = (e) => e < 0 || e >= i.value || P.value.has(e), ue = (e, n) => {
       for (let t = e; t < n; t += 1)
-        if (_(t))
+        if (Q(t))
           return !0;
       return !1;
-    }, j = (e, n) => i.overlapAllowed ? !1 : n.some(
+    }, ce = (e, n) => u.overlapAllowed ? !1 : n.some(
       (t) => t.id !== e.id && !(e.end <= t.start || e.start >= t.end)
-    ), ve = (e) => j(e, o.value), M = (e) => e.start >= 0 && e.end <= r.value && e.end > e.start && !P(e.start, e.end) && !ve(e), q = (e) => o.value.find((n) => n.id === e), S = (e) => {
-      var s;
-      const n = (s = J.value) == null ? void 0 : s.getBoundingClientRect();
-      return !n || n.width <= 0 ? 0 : d((e - n.left) / n.width, 0, 1) * r.value;
-    }, fe = (e) => d(Math.floor(S(e)), 0, r.value - 1), C = (e) => d(Math.round(S(e)), 0, r.value), H = () => {
+    ), Ne = (e) => ce(e, l.value), E = (e) => e.start >= 0 && e.end <= i.value && e.end > e.start && !ue(e.start, e.end) && !Ne(e), fe = (e) => l.value.find((n) => n.id === e), C = (e) => {
+      var a;
+      const n = (a = S.value) == null ? void 0 : a.getBoundingClientRect();
+      return !n || n.width <= 0 ? 0 : m((e - n.left) / n.width, 0, 1) * i.value;
+    }, Ve = (e) => m(Math.floor(C(e)), 0, i.value - 1), Y = (e) => m(Math.round(C(e)), 0, i.value), me = () => {
       const e = /* @__PURE__ */ new Set(), n = [];
-      i.disabledRanges.forEach(([t, s]) => {
-        const v = R(t), c = R(s);
-        if (v === void 0 || c === void 0)
+      u.disabledRanges.forEach(([t, a]) => {
+        const r = V(t), c = V(a);
+        if (r === void 0 || c === void 0)
           return;
-        const b = d(Math.min(v, c), 0, r.value), k = d(Math.max(v, c), 0, r.value);
-        if (!(k <= b)) {
-          for (let A = b; A < k; A += 1)
-            e.add(A);
+        const p = m(Math.min(r, c), 0, i.value), f = m(Math.max(r, c), 0, i.value);
+        if (!(f <= p)) {
+          for (let y = p; y < f; y += 1)
+            e.add(y);
           n.push({
-            id: `${t}-${s}-${b}-${k}`,
-            start: b,
-            end: k
+            id: `${t}-${a}-${p}-${f}`,
+            start: p,
+            end: f
           });
         }
-      }), D.value = e, G.value = n;
-    }, me = () => {
-      const e = [];
-      if (i.modelValue.forEach(([n, t]) => {
-        const s = R(n), v = R(t);
-        if (s === void 0 || v === void 0)
+      }), P.value = e, de.value = n;
+    }, Ce = () => {
+      const e = [...l.value], n = [];
+      if (u.modelValue.forEach(([t, a]) => {
+        const r = V(t), c = V(a);
+        if (r === void 0 || c === void 0)
           return;
-        const c = N({ id: U++, start: s, end: v });
-        c.end > c.start && !P(c.start, c.end) && e.push(c);
-      }), !i.overlapAllowed) {
-        const n = [];
-        e.sort((t, s) => t.start - s.start || t.end - s.end).forEach((t) => {
-          j(t, n) || n.push(t);
-        }), o.value = n;
+        const p = e.find((y) => y.start === r && y.end === c) ?? e[0], f = q({ id: (p == null ? void 0 : p.id) ?? U++, start: r, end: c });
+        p && e.splice(e.indexOf(p), 1), f.end > f.start && !ue(f.start, f.end) && n.push(f);
+      }), !u.overlapAllowed) {
+        const t = [];
+        n.sort((a, r) => a.start - r.start || a.end - r.end).forEach((a) => {
+          ce(a, t) || t.push(a);
+        }), l.value = t;
         return;
       }
-      o.value = e.sort((n, t) => n.start - t.start || n.end - t.end);
-    }, K = (e) => {
+      l.value = n.sort((t, a) => t.start - a.start || t.end - a.end);
+    }, ve = (e) => {
       let n = 0;
-      i.overlapAllowed || o.value.forEach((t) => {
+      u.overlapAllowed || l.value.forEach((t) => {
         t.id !== e.id && t.end <= e.start && (n = Math.max(n, t.end));
       });
       for (let t = e.start - 1; t >= n; t -= 1)
-        if (_(t))
+        if (Q(t))
           return t + 1;
       return n;
-    }, Q = (e) => {
-      let n = r.value;
-      i.overlapAllowed || o.value.forEach((t) => {
+    }, pe = (e) => {
+      let n = i.value;
+      u.overlapAllowed || l.value.forEach((t) => {
         t.id !== e.id && t.start >= e.end && (n = Math.min(n, t.start));
       });
       for (let t = e.end; t < n; t += 1)
-        if (_(t))
+        if (Q(t))
           return t;
       return n;
-    }, pe = (e, n) => {
-      const t = e.end - e.start, s = K(e), v = Q(e) - t, c = d(n, s, Math.max(s, v));
+    }, ye = (e, n) => {
+      const t = e.end - e.start, a = ve(e), r = pe(e) - t, c = m(n, a, Math.max(a, r));
       return { ...e, start: c, end: c + t };
-    }, W = (e, n) => {
-      const t = K(e), s = d(n, t, e.end - 1);
-      return { ...e, start: s };
-    }, Y = (e, n) => {
-      const t = Q(e), s = d(n, e.start + 1, t);
-      return { ...e, end: s };
+    }, Z = (e, n) => {
+      const t = ve(e), a = m(n, t, e.end - 1);
+      return { ...e, start: a };
+    }, ee = (e, n) => {
+      const t = pe(e), a = m(n, e.start + 1, t);
+      return { ...e, end: a };
     }, ge = (e) => {
-      const n = q(e.id);
-      !n || !M(e) || (n.start = e.start, n.end = e.end);
-    }, he = () => {
-      window.addEventListener("mousemove", ee), window.addEventListener("mouseup", te);
-    }, Me = () => {
-      window.removeEventListener("mousemove", ee), window.removeEventListener("mouseup", te);
-    }, ye = (e, n, t) => {
-      a.active = !0, a.type = e, a.rangeId = n.id, a.initialRange = { ...n }, a.startMouseIndex = S(t), a.startOffset = a.startMouseIndex - n.start, document.body.style.cursor = e === "move" ? "grabbing" : "ew-resize", he();
-    }, Z = () => {
-      Me(), a.active = !1, a.type = "", a.rangeId = 0, a.startMouseIndex = 0, a.startOffset = 0, a.initialRange = { id: 0, start: 0, end: 0 }, document.body.style.cursor = "";
-    }, we = (e) => {
-      if (o.value.length >= i.maxRanges)
+      const n = fe(e.id);
+      !n || !E(e) || (n.start = e.start, n.end = e.end);
+    }, Fe = () => {
+      window.addEventListener("mousemove", he), window.addEventListener("mouseup", be);
+    }, Le = () => {
+      window.removeEventListener("mousemove", he), window.removeEventListener("mouseup", be);
+    }, _e = (e, n, t) => {
+      o.active = !0, o.type = e, o.rangeId = n.id, o.initialRange = { ...n }, o.startMouseIndex = C(t), o.startOffset = o.startMouseIndex - n.start, document.body.style.cursor = e === "move" ? "grabbing" : "ew-resize", Fe();
+    }, F = () => {
+      o.active && (Le(), o.active = !1, o.type = "", o.rangeId = 0, o.startMouseIndex = 0, o.startOffset = 0, o.initialRange = { id: 0, start: 0, end: 0 }, document.body.style.cursor = "");
+    }, Ke = (e) => {
+      if (l.value.length >= u.maxRanges)
         return;
-      const n = fe(e), t = { id: U++, start: n, end: Math.min(n + 1, r.value) };
-      if (M(t))
-        return o.value.push(t), t;
-    }, x = (e, n, t) => {
-      if (e.button !== 0)
+      const n = Ve(e), t = { id: U++, start: n, end: Math.min(n + 1, i.value) };
+      if (E(t))
+        return l.value.push(t), t;
+    }, L = (e, n, t) => {
+      if (e.button !== 0 || !x.value)
         return;
       e.preventDefault();
-      const s = n ?? we(e.clientX);
-      if (!s)
+      const a = n ?? Ke(e.clientX);
+      if (!a)
         return;
-      ye(t ? t === "start" ? "resize-start" : "resize-end" : n ? "move" : "new", s, e.clientX);
+      _e(t ? t === "start" ? "resize-start" : "resize-end" : n ? "move" : "new", a, e.clientX);
     };
-    function ee(e) {
-      if (!a.active || (e.preventDefault(), !q(a.rangeId)))
+    function he(e) {
+      if (!o.active || (e.preventDefault(), !fe(o.rangeId)))
         return;
-      let t = { ...a.initialRange };
-      if (a.type === "move")
-        t = pe(
-          a.initialRange,
-          Math.round(S(e.clientX) - a.startOffset)
+      let t = { ...o.initialRange };
+      if (o.type === "move")
+        t = ye(
+          o.initialRange,
+          Math.round(C(e.clientX) - o.startOffset)
         );
-      else if (a.type === "resize-start")
-        t = W(a.initialRange, C(e.clientX));
-      else if (a.type === "resize-end")
-        t = Y(a.initialRange, C(e.clientX));
-      else if (a.type === "new") {
-        const s = C(e.clientX);
-        t = s < a.initialRange.start ? W(a.initialRange, s) : Y(a.initialRange, s);
+      else if (o.type === "resize-start")
+        t = Z(o.initialRange, Y(e.clientX));
+      else if (o.type === "resize-end")
+        t = ee(o.initialRange, Y(e.clientX));
+      else if (o.type === "new") {
+        const a = Y(e.clientX);
+        t = a < o.initialRange.start ? Z(o.initialRange, a) : ee(o.initialRange, a);
       }
       ge(t);
     }
-    function te() {
-      a.active && (Z(), o.value = o.value.filter(M), ce(), O());
+    function be() {
+      o.active && (F(), l.value = l.value.filter(E), Ae(), O(!0));
     }
-    const Re = (e) => {
-      o.value = o.value.filter((n) => n.id !== e.id), O();
-    }, O = () => {
-      const e = o.value.filter(M).sort((t, s) => t.start - s.start || t.end - s.end).map((t) => [w(t.start), w(t.end)]);
-      JSON.stringify(e) === JSON.stringify(i.modelValue) || ae("update:modelValue", e);
-    }, V = () => {
-      $ = !0, H(), me(), $ = !1;
-    }, Se = (e) => {
-      const n = e / g.value;
-      o.value = o.value.map((t) => {
-        const s = d(Math.round(t.start * n), 0, r.value), v = d(Math.round(t.end * n), 0, r.value);
-        return N({ ...t, start: s, end: v });
+    const we = (e) => {
+      x.value && (l.value = l.value.filter((n) => n.id !== e.id), j("remove", [v(e.start), v(e.end)]), O(!0), J(() => {
+        var n;
+        return (n = S.value) == null ? void 0 : n.focus();
+      }));
+    }, O = (e = !1) => {
+      var c, p;
+      const n = l.value.filter(E).sort((f, y) => f.start - y.start || f.end - y.end).map((f) => [v(f.start), v(f.end)]), t = JSON.stringify(n), a = t !== H, r = t === JSON.stringify(u.modelValue);
+      if (H = t, !r || e && a) {
+        j("update:modelValue", n), e && a && (j("change", n), (p = (c = X.value) == null ? void 0 : c.onChange) == null || p.call(c));
+        const f = ++ie;
+        J(() => {
+          var y;
+          if (f === ie && !o.active && JSON.stringify(u.modelValue) !== t) {
+            const Xe = (y = S.value) == null ? void 0 : y.contains(document.activeElement);
+            z(), J(() => {
+              var Me;
+              Xe && document.activeElement === document.body && ((Me = S.value) == null || Me.focus());
+            });
+          }
+        });
+      }
+    }, Te = (e) => {
+      if (!x.value || e.target !== S.value) return;
+      const n = e.key === "ArrowLeft" ? -1 : e.key === "ArrowRight" ? 1 : 0;
+      if (n || e.key === "Home" || e.key === "End")
+        e.preventDefault(), w.value = e.key === "Home" ? 0 : e.key === "End" ? i.value - 1 : m(w.value + n, 0, i.value - 1);
+      else if (e.key === "Enter" || e.key === " ") {
+        if (e.preventDefault(), l.value.length >= u.maxRanges) return;
+        const t = { id: U++, start: w.value, end: w.value + 1 };
+        if (!E(t)) return;
+        l.value.push(t), O(!0), J(
+          () => {
+            var a, r;
+            return (r = (a = S.value) == null ? void 0 : a.querySelector(`[data-range-id="${t.id}"]`)) == null ? void 0 : r.focus();
+          }
+        );
+      }
+    }, Je = (e, n) => {
+      if (!x.value || e.target !== e.currentTarget) return;
+      if (e.key === "Escape") {
+        e.preventDefault(), te();
+        return;
+      }
+      if (e.key === "Delete" || e.key === "Backspace") {
+        e.preventDefault(), we(n);
+        return;
+      }
+      const t = e.key === "ArrowLeft" ? -1 : e.key === "ArrowRight" ? 1 : 0;
+      if (!t) return;
+      e.preventDefault();
+      const a = e.altKey ? Z(n, n.start + t) : e.shiftKey ? ee(n, n.end + t) : ye(n, n.start + t);
+      ge(a), O(!0);
+    }, te = () => {
+      o.active && (F(), z());
+    };
+    _(x, (e) => {
+      e || te();
+    }), _(M, () => {
+      w.value = m(w.value, 0, i.value - 1);
+    });
+    const z = () => {
+      W = !0, me(), Ce(), H = JSON.stringify(
+        l.value.map((e) => [v(e.start), v(e.end)])
+      ), W = !1;
+    }, je = (e) => {
+      const n = e / M.value;
+      l.value = l.value.map((t) => {
+        const a = m(Math.round(t.start * n), 0, i.value), r = m(Math.round(t.end * n), 0, i.value);
+        return q({ ...t, start: a, end: r });
       });
     };
-    let L = g.value;
-    return ne(
-      () => [i.stepMinutes, i.disabledRanges],
+    let ne = M.value;
+    return _(
+      () => [u.stepMinutes, u.disabledRanges],
       () => {
-        if (!$) {
-          if (g.value !== L) {
-            const e = L;
-            if (L = g.value, i.modelValue.length > 0) {
-              V();
+        if (!W) {
+          if (M.value !== ne) {
+            const e = ne;
+            if (ne = M.value, u.modelValue.length > 0) {
+              z();
               return;
             }
-            Se(e);
+            je(e);
           }
-          if (o.value.length === 0 && i.modelValue.length > 0) {
-            V();
+          if (l.value.length === 0 && u.modelValue.length > 0) {
+            z();
             return;
           }
-          H(), o.value = o.value.filter((e) => {
-            const n = N(e);
-            return e.start = n.start, e.end = n.end, M(e);
+          me(), l.value = l.value.filter((e) => {
+            const n = q(e);
+            return e.start = n.start, e.end = n.end, E(e);
           }), O();
         }
       },
       { immediate: !0, deep: !0 }
-    ), ne(
-      () => i.modelValue,
+    ), _(
+      () => u.modelValue,
       (e, n) => {
-        JSON.stringify(e) !== JSON.stringify(n) && V();
+        JSON.stringify(e) !== JSON.stringify(n) && (F(), z());
       },
       { immediate: !0, deep: !0 }
-    ), ke(() => {
-      Z();
-    }), (e, n) => (m(), p("div", {
-      class: f([u(l).block, ie.value]),
-      style: F(ue.value)
-    }, [
-      y("div", {
+    ), qe(() => {
+      F();
+    }), (e, n) => (h(), b("div", Re(ke.value, {
+      class: [
+        s(d).block,
+        Be.value,
+        s($).class,
+        {
+          [s(d).is("disabled")]: s(B),
+          [s(d).is("readonly")]: le.value,
+          [s(d).is("error")]: s(Ee)
+        }
+      ],
+      style: [s($).style, Oe.value]
+    }), [
+      k("div", Re({
         ref_key: "gridRef",
-        ref: J,
-        class: f([u(l).element("grid"), { [u(l).is("dragging")]: le.value }]),
-        onMousedown: x
-      }, [
-        (m(!0), p(E, null, I(re.value, (t) => (m(), p("div", {
+        ref: S
+      }, s(re), {
+        class: [s(d).element("grid"), { [s(d).is("dragging")]: $e.value }],
+        role: "group",
+        tabindex: s(B) ? -1 : 0,
+        "aria-disabled": s(B) || void 0,
+        "aria-describedby": [s(re)["aria-describedby"], G].filter(Boolean).join(" "),
+        onKeydown: [
+          Te,
+          Qe(D(te, ["prevent"]), ["esc"])
+        ],
+        onFocusin: n[0] || (n[0] = (t) => {
+          var a, r;
+          return (r = (a = s(X)) == null ? void 0 : a.onFocus) == null ? void 0 : r.call(a, t);
+        }),
+        onFocusout: n[1] || (n[1] = (t) => {
+          var a, r, c;
+          return !((a = S.value) != null && a.contains(t.relatedTarget)) && ((c = (r = s(X)) == null ? void 0 : r.onBlur) == null ? void 0 : c.call(r, t));
+        }),
+        onMousedown: L
+      }), [
+        k("span", {
+          role: "status",
+          "aria-live": "polite",
+          class: g(s(d).element("instructions"))
+        }, N(s(I)("timeRangeSelector.position", {
+          start: v(w.value),
+          end: v(w.value + 1),
+          ranges: l.value.map((t) => `${v(t.start)} - ${v(t.end)}`).join(" / ") || s(I)("common.noData")
+        })), 3),
+        x.value ? (h(), b("div", {
+          key: 0,
+          class: g(s(d).element("keyboard-cursor")),
+          style: ae({ left: `${w.value / i.value * 100}%`, width: `${100 / i.value}%` }),
+          "aria-hidden": "true"
+        }, null, 6)) : Se("", !0),
+        (h(!0), b(K, null, T(Ie.value, (t) => (h(), b("div", {
           key: t.index,
-          class: f([
-            u(l).element("grid--block"),
+          class: g([
+            s(d).element("grid--block"),
             {
-              [u(l).is("alternate")]: t.alternate,
-              [u(l).is("disabled")]: t.disabled
+              [s(d).is("alternate")]: t.alternate,
+              [s(d).is("disabled")]: t.disabled
             }
           ])
         }, null, 2))), 128)),
-        (m(!0), p(E, null, I(G.value, (t) => (m(), p("div", {
+        (h(!0), b(K, null, T(de.value, (t) => (h(), b("div", {
           key: t.id,
-          class: f(u(l).element("disabled-range")),
-          style: F({
-            left: `${t.start / r.value * 100}%`,
-            width: `${(t.end - t.start) / r.value * 100}%`
+          class: g(s(d).element("disabled-range")),
+          style: ae({
+            left: `${t.start / i.value * 100}%`,
+            width: `${(t.end - t.start) / i.value * 100}%`
           })
         }, null, 6))), 128)),
-        (m(!0), p(E, null, I(o.value, (t) => (m(), p("div", {
+        (h(!0), b(K, null, T(l.value, (t) => (h(), b("div", {
           key: t.id,
-          class: f([
-            u(l).element("range"),
+          "data-range-id": t.id,
+          role: "group",
+          tabindex: s(B) ? -1 : 0,
+          "aria-label": `${v(t.start)} - ${v(t.end)}`,
+          title: `${v(t.start)} - ${v(t.end)}`,
+          "aria-describedby": G,
+          class: g([
+            s(d).element("range"),
             {
-              [u(l).is("dragging")]: a.active && a.type === "move" && a.rangeId === t.id
+              [s(d).is("dragging")]: o.active && o.type === "move" && o.rangeId === t.id
             }
           ]),
-          style: F({
-            left: `${t.start / r.value * 100}%`,
-            width: `${(t.end - t.start) / r.value * 100}%`
+          style: ae({
+            left: `${t.start / i.value * 100}%`,
+            width: `${(t.end - t.start) / i.value * 100}%`
           }),
-          onDblclick: B((s) => Re(t), ["stop"]),
-          onMousedown: B((s) => x(s, t), ["stop"])
+          onDblclick: D((a) => we(t), ["stop"]),
+          onMousedown: D((a) => L(a, t), ["stop"]),
+          onKeydown: D((a) => Je(a, t), ["stop"])
         }, [
-          y("div", {
-            class: f([u(l).element("edge"), u(l).modifier("edge-left")]),
-            onMousedown: B((s) => x(s, t, "start"), ["stop"])
-          }, null, 42, Be),
-          y("div", {
-            class: f(u(l).element("range-label"))
-          }, X(w(t.start)) + " - " + X(w(t.end)), 3),
-          y("div", {
-            class: f([u(l).element("edge"), u(l).modifier("edge-right")]),
-            onMousedown: B((s) => x(s, t, "end"), ["stop"])
-          }, null, 42, De)
-        ], 46, Ie))), 128))
-      ], 34),
-      T.showCursor ? (m(), p("div", {
+          k("div", {
+            class: g([s(d).element("edge"), s(d).modifier("edge-left")]),
+            onMousedown: D((a) => L(a, t, "start"), ["stop"])
+          }, null, 42, st),
+          k("div", {
+            class: g(s(d).element("range-label"))
+          }, N(v(t.start)) + " - " + N(v(t.end)), 3),
+          k("div", {
+            class: g([s(d).element("edge"), s(d).modifier("edge-right")]),
+            onMousedown: D((a) => L(a, t, "end"), ["stop"])
+          }, null, 42, ot)
+        ], 46, at))), 128))
+      ], 16, nt),
+      k("p", {
+        id: G,
+        class: g(s(d).element("instructions"))
+      }, N(x.value ? s(I)("timeRangeSelector.instructions") : s(I)("timeRangeSelector.readonly")), 3),
+      se.showCursor ? (h(), b("div", {
         key: 0,
-        class: f(u(l).element("legend"))
+        class: g(s(d).element("legend"))
       }, [
-        (m(), p(E, null, I(25, (t) => y("span", {
+        (h(), b(K, null, T(25, (t) => k("span", {
           key: t,
-          class: f(u(l).element("legend--num"))
-        }, X(t - 1), 3)), 64))
-      ], 2)) : ze("", !0)
-    ], 6));
+          class: g(s(d).element("legend--num"))
+        }, N(t - 1), 3)), 64))
+      ], 2)) : Se("", !0)
+    ], 16));
   }
 });
 export {
-  _e as default
+  ut as default
 };

package/dist/es/locale/en-US.js

@@ -1,5 +1,11 @@
 const e = {
   code: "en-US",
+  timeRangeSelector: {
+    label: "Daily time ranges",
+    position: "Create from {start} to {end}; selected ranges: {ranges}",
+    readonly: "Read-only time ranges. Changes are unavailable.",
+    instructions: "On the grid, use Left or Right to position and Enter to create. On a range, use Left or Right to move, Shift to resize the end, Alt to resize the start, and Delete to remove."
+  },
   pagination: {
     prev: "Previous page",
     next: "Next page",