x-next 1.0.1 → 1.2.0

package/dist/es/components/time-picker/hooks/use-time-state.js

@@ -0,0 +1,27 @@
+import { ref as n, computed as p, watch as d } from "vue";
+import { isArray as m } from "../../../_utils/is.js";
+import { parseModelValue as a } from "../utils.js";
+function V({
+  modelValue: t,
+  defaultValue: v,
+  format: e,
+  isRange: u
+}) {
+  const l = n(a(v.value, e.value, u.value)), r = p(
+    () => t.value !== void 0 ? a(t.value, e.value, u.value) : l.value
+  ), c = (o) => {
+    l.value = m(o) ? [...o] : o;
+  };
+  return d(
+    () => [e.value, u.value],
+    () => {
+      l.value = a(v.value, e.value, u.value);
+    }
+  ), {
+    computedValue: r,
+    setUncontrolledValue: c
+  };
+}
+export {
+  V as default
+};

package/dist/es/components/time-picker/index.js

@@ -0,0 +1,8 @@
+import e from "./TimePicker.vue.js";
+import { generateComponent as o } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as r } from "../../_utils/config.js";
+const n = o(r("TimePicker"), e);
+export {
+  n as TimePicker,
+  n as default
+};

package/dist/es/components/time-picker/utils.js

@@ -0,0 +1,56 @@
+import { dayjs as i, getDateValue as m } from "../../_utils/date.js";
+import { isNumber as a, isArray as o, isDate as p, isString as V } from "../../_utils/is.js";
+const c = {
+  hour: /H|h/,
+  minute: /m/,
+  second: /s/,
+  meridiem: /A|a/
+}, f = "HH:mm:ss", A = "h:mm:ss A", h = (r, s) => s || (r ? A : f), P = (r) => /h|A|a/.test(r), F = (r, s) => {
+  const n = [];
+  return (c.hour.test(r) || s) && n.push("hour"), c.minute.test(r) && n.push("minute"), c.second.test(r) && n.push("second"), (s || c.meridiem.test(r)) && n.push("meridiem"), n.length > 0 ? n : ["hour", "minute", "second"];
+}, H = (r) => String(r).padStart(2, "0"), O = (r, s) => !a(r) || r < 1 || r > s ? 1 : Math.floor(r), D = (r) => r.hour() >= 12 ? "PM" : "AM", S = (r) => {
+  const s = r.hour() % 12;
+  return s === 0 ? 12 : s;
+}, _ = (r, s, n) => {
+  const t = s % 12;
+  return r.hour(n === "PM" ? t + 12 : t);
+}, u = (r, s) => {
+  if (!(r == null || r === "")) {
+    if (p(r) || a(r)) {
+      const n = i(r);
+      return n.isValid() ? n : void 0;
+    }
+    if (V(r)) {
+      const n = i(r, s, !0);
+      if (n.isValid())
+        return n;
+      const t = i(r, s);
+      if (t.isValid())
+        return t;
+      const e = i(r);
+      return e.isValid() ? e : void 0;
+    }
+  }
+}, E = (r, s, n) => n ? o(r) ? [u(r[0], s), u(r[1], s)] : [void 0, void 0] : o(r) ? u(r[0], s) : u(r, s), d = (r, s) => r ? r.format(s) : void 0, R = (r, s) => o(r) ? [d(r[0], s), d(r[1], s)] : d(r, s), l = (r) => o(r) ? m(r) : r ? m(r) : void 0, y = (r, s) => o(r) || o(s) ? !o(r) || !o(s) ? !1 : [0, 1].every((n) => {
+  const t = r[n], e = s[n];
+  return (t == null ? void 0 : t.valueOf()) === (e == null ? void 0 : e.valueOf());
+}) : (r == null ? void 0 : r.valueOf()) === (s == null ? void 0 : s.valueOf()), U = () => i().millisecond(0);
+export {
+  A as DEFAULT_12_HOURS_FORMAT,
+  f as DEFAULT_FORMAT,
+  R as formatPanelValue,
+  d as formatTimeValue,
+  S as get12HourValue,
+  l as getDateValueFromPanel,
+  h as getDefaultFormat,
+  D as getMeridiem,
+  U as getNowTime,
+  F as getVisibleColumns,
+  P as isFormatUse12Hours,
+  y as isSamePanelValue,
+  O as normalizeStep,
+  H as padTime,
+  E as parseModelValue,
+  u as parseTimeValue,
+  _ as setHourByMeridiem
+};

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

@@ -0,0 +1,430 @@
+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: {},
+    color: {},
+    scene: { default: "default" },
+    overlapAllowed: { type: Boolean, default: !1 },
+    stepMinutes: { default: 30 },
+    disabledRanges: { default: () => [] },
+    maxRanges: { default: 1 / 0 },
+    showCursor: { type: Boolean, default: !0 },
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 }
+  },
+  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,
+      startMouseIndex: 0,
+      startOffset: 0,
+      initialRange: { id: 0, start: 0, end: 0 }
+    });
+    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;
+    }, 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: P.value.has(n),
+        alternate: Math.floor(n * M.value / 60) % 2 === 1
+      }))
+    ), $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]), 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), 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 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 };
+    }, 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 (Q(t))
+          return !0;
+      return !1;
+    }, ce = (e, n) => u.overlapAllowed ? !1 : n.some(
+      (t) => t.id !== e.id && !(e.end <= t.start || e.start >= t.end)
+    ), 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 = [];
+      u.disabledRanges.forEach(([t, a]) => {
+        const r = V(t), c = V(a);
+        if (r === void 0 || c === void 0)
+          return;
+        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}-${a}-${p}-${f}`,
+            start: p,
+            end: f
+          });
+        }
+      }), 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 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;
+      }
+      l.value = n.sort((t, a) => t.start - a.start || t.end - a.end);
+    }, ve = (e) => {
+      let n = 0;
+      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 (Q(t))
+          return t + 1;
+      return n;
+    }, 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 (Q(t))
+          return t;
+      return n;
+    }, 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 };
+    }, 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 = 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 = 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 a = n ?? Ke(e.clientX);
+      if (!a)
+        return;
+      _e(t ? t === "start" ? "resize-start" : "resize-end" : n ? "move" : "new", a, e.clientX);
+    };
+    function he(e) {
+      if (!o.active || (e.preventDefault(), !fe(o.rangeId)))
+        return;
+      let t = { ...o.initialRange };
+      if (o.type === "move")
+        t = ye(
+          o.initialRange,
+          Math.round(C(e.clientX) - o.startOffset)
+        );
+      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 be() {
+      o.active && (F(), l.value = l.value.filter(E), Ae(), O(!0));
+    }
+    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 ne = M.value;
+    return _(
+      () => [u.stepMinutes, u.disabledRanges],
+      () => {
+        if (!W) {
+          if (M.value !== ne) {
+            const e = ne;
+            if (ne = M.value, u.modelValue.length > 0) {
+              z();
+              return;
+            }
+            je(e);
+          }
+          if (l.value.length === 0 && u.modelValue.length > 0) {
+            z();
+            return;
+          }
+          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 }
+    ), _(
+      () => u.modelValue,
+      (e, n) => {
+        JSON.stringify(e) !== JSON.stringify(n) && (F(), z());
+      },
+      { immediate: !0, deep: !0 }
+    ), 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: 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: g([
+            s(d).element("grid--block"),
+            {
+              [s(d).is("alternate")]: t.alternate,
+              [s(d).is("disabled")]: t.disabled
+            }
+          ])
+        }, null, 2))), 128)),
+        (h(!0), b(K, null, T(de.value, (t) => (h(), b("div", {
+          key: t.id,
+          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)),
+        (h(!0), b(K, null, T(l.value, (t) => (h(), b("div", {
+          key: t.id,
+          "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"),
+            {
+              [s(d).is("dragging")]: o.active && o.type === "move" && o.rangeId === t.id
+            }
+          ]),
+          style: ae({
+            left: `${t.start / i.value * 100}%`,
+            width: `${(t.end - t.start) / i.value * 100}%`
+          }),
+          onDblclick: D((a) => we(t), ["stop"]),
+          onMousedown: D((a) => L(a, t), ["stop"]),
+          onKeydown: D((a) => Je(a, t), ["stop"])
+        }, [
+          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: g(s(d).element("legend"))
+      }, [
+        (h(), b(K, null, T(25, (t) => k("span", {
+          key: t,
+          class: g(s(d).element("legend--num"))
+        }, N(t - 1), 3)), 64))
+      ], 2)) : Se("", !0)
+    ], 16));
+  }
+});
+export {
+  ut as default
+};

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

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

package/dist/es/components/time-range-selector/index.js

@@ -0,0 +1,11 @@
+import e from "./TimeRangeSelector.vue.js";
+import { generateComponent as o } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as t } from "../../_utils/config.js";
+const i = o(
+  t("TimeRangeSelector"),
+  e
+);
+export {
+  i as TimeRangeSelector,
+  i as default
+};

package/dist/es/components/timeline/index.js

@@ -0,0 +1,8 @@
+import e from "./src/Timeline.js";
+import { generateComponent as o } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as m } from "../../_utils/config.js";
+const r = o(m("Timeline"), e);
+export {
+  r as Timeline,
+  r as default
+};

package/dist/es/components/timeline/src/Timeline.js

@@ -0,0 +1,65 @@
+import { defineComponent as P, computed as f, toRefs as b, ref as R, provide as I, createVNode as l } from "vue";
+import N from "./TimelineItem.js";
+import { timelineProps as x } from "./props.js";
+import { timelineInjectionKey as k } from "./context.js";
+import { getClassNameMixin as L } from "../../../_utils/config.js";
+import _ from "../../../icons/animation/animation-loading.js";
+const j = "TimelineItem", q = /* @__PURE__ */ P({
+  name: "Timeline",
+  components: {},
+  props: x,
+  setup(o, {
+    slots: t
+  }) {
+    const r = L("timeline"), u = f(() => [r.block, r.modifier(o.mode), r.modifier(`direction-${o.direction}`), o.reverse && r.modifier("reverse"), a.value && r.modifier("pending")]), {
+      reverse: p,
+      lineType: s,
+      direction: g,
+      mode: h,
+      labelPosition: y
+    } = b(o), c = R(0), a = f(() => !!o.pending), v = () => l("span", {
+      class: r.element("pending-dot")
+    }, [l(_, null, null)]), T = () => a.value ? l(N, {
+      lineType: "dashed",
+      class: r.element("pending-item")
+    }, {
+      dot: () => {
+        var n;
+        return ((n = t.dot) == null ? void 0 : n.call(t)) ?? v();
+      },
+      default: () => o.pending === !0 ? null : o.pending
+    }) : null, d = (n) => Array.isArray(n) && n.length > 0 ? n.filter((e) => {
+      var i;
+      if (Array.isArray(e.children) && e.children.length > 0 && typeof e.type == "symbol")
+        return e.children = d(e.children), e.children.length > 0 ? e : null;
+      if (((i = e == null ? void 0 : e.type) == null ? void 0 : i.name) === j)
+        return e;
+    }) : [], m = (n) => {
+      let e = 0;
+      return n.forEach((i) => {
+        Array.isArray(i.children) ? e += m(i.children) : e += 1;
+      }), e;
+    }, A = (n) => {
+      const e = T(), i = e ? [...d(n), e] : d(n);
+      return c.value = m(i), i;
+    }, C = {
+      reverse: p,
+      parentCls: r.block,
+      count: c,
+      lineType: s,
+      direction: g,
+      mode: h,
+      labelPosition: y
+    };
+    return I(k, C), () => {
+      var n;
+      return l("div", {
+        role: "list",
+        class: u.value
+      }, [A((n = t.default) == null ? void 0 : n.call(t))]);
+    };
+  }
+});
+export {
+  q as default
+};

package/dist/es/components/timeline/src/TimelineItem.js

@@ -0,0 +1,63 @@
+import { defineComponent as h, inject as P, ref as $, computed as o, createVNode as t } from "vue";
+import { getClassNameMixin as g } from "../../../_utils/config.js";
+import { useIndex as j } from "../../../_hooks/use-index.js";
+import { timelineItemProps as k } from "./props.js";
+import { timelineInjectionKey as L } from "./context.js";
+const w = (n, l, i, e) => {
+  const a = i === "horizontal" ? ["top", "bottom"] : ["left", "right"], r = l === "alternate" ? e || a[n % 2] : l;
+  return a.includes(r) ? r : a[0];
+}, M = /* @__PURE__ */ h({
+  name: "TimelineItem",
+  props: k,
+  slots: Object,
+  setup(n, {
+    slots: l
+  }) {
+    const i = g("timeline-item"), e = P(L), a = $(null), {
+      innerIndex: r
+    } = j({
+      itemRef: a,
+      selector: `.${i.block}`,
+      parentClassName: e == null ? void 0 : e.parentCls
+    }), u = o(() => e ? e.reverse.value ? r.value === 0 : r.value + 1 === e.count.value : !1), d = o(() => (e == null ? void 0 : e.direction.value) ?? "vertical"), f = o(() => (e == null ? void 0 : e.mode.value) ?? "left"), m = o(() => (e == null ? void 0 : e.labelPosition.value) ?? "same"), b = o(() => w(r.value, f.value, d.value, n.position)), p = o(() => [i.block, i.modifier(`${d.value}-${b.value}`), i.modifier(`label-${m.value}`), u.value && i.modifier("last")]), C = o(() => ({
+      [d.value === "horizontal" ? "borderTopStyle" : "borderLeftStyle"]: n.lineType ?? (e == null ? void 0 : e.lineType.value),
+      ...n.lineColor ? {
+        borderColor: n.lineColor
+      } : {}
+    })), y = o(() => l.dot || l.icon ? [i.element("dot--icon"), i.modifier("custom-dot")] : [i.element("dot--icon")]), T = o(() => !!(n.label || l.label)), v = () => {
+      var c;
+      return T.value ? t("div", {
+        class: i.element("label")
+      }, [((c = l.label) == null ? void 0 : c.call(l)) ?? n.label]) : null;
+    }, N = () => {
+      var c, s;
+      return ((c = l.default) == null ? void 0 : c.call(l)) ?? t("div", {
+        class: i.element("content--description")
+      }, [(s = l.description) == null ? void 0 : s.call(l)]);
+    }, I = () => l.dot ? l.dot() : l.icon ? l.icon() : t("i", {
+      class: [i.element("dot--icon-dot"), i.modifier(`dot-${n.dotType}`)],
+      style: {
+        [n.dotType === "hollow" ? "borderColor" : "backgroundColor"]: n.dotColor
+      }
+    }, null);
+    return () => t("div", {
+      ref: a,
+      role: "listitem",
+      class: p.value
+    }, [t("div", {
+      class: i.element("dot")
+    }, [!u.value && t("div", {
+      class: i.element("dot--line"),
+      style: C.value
+    }, null), t("div", {
+      class: y.value
+    }, [I()])]), t("div", {
+      class: i.element("content-wrapper")
+    }, [t("div", {
+      class: i.element("content")
+    }, [m.value !== "relative" && v(), N()])]), m.value === "relative" && v()]);
+  }
+});
+export {
+  M as default
+};

package/dist/es/components/timeline/src/context.js

@@ -0,0 +1,4 @@
+const e = Symbol("timelineKey");
+export {
+  e as timelineInjectionKey
+};