@rhino-design/vue 0.2.1 → 0.2.3

package/dist/components/XTimePicker.vue2.js

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

package/dist/components/XTimeline.vue.d.ts

@@ -25,10 +25,10 @@ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
     replayAnimation: typeof replayAnimation;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    animationDuration: number;
-    direction: "vertical" | "horizontal";
     reverse: boolean;
     mode: "start" | "alternate" | "alternate-reverse" | "end" | "top" | "bottom";
+    direction: "vertical" | "horizontal";
+    animationDuration: number;
     animated: boolean;
     isReverse: boolean;
     sortKey: string;

package/dist/components/XTimeline.vue.js

@@ -0,0 +1,84 @@
+import { defineComponent as w, toRefs as B, computed as R, ref as f, provide as _, toRef as a, onMounted as h, watch as c, onBeforeUnmount as A, openBlock as G, createElementBlock as k, normalizeClass as C, unref as p, renderSlot as K, nextTick as g } from "vue";
+import { xTimelineContextKey as M } from "./timelineContext.js";
+const b = /* @__PURE__ */ w({
+  __name: "XTimeline",
+  props: {
+    reverse: { type: Boolean, default: !1 },
+    isReverse: { type: Boolean, default: void 0 },
+    mode: { default: "start" },
+    direction: { default: "vertical" },
+    sortKey: { default: "" },
+    sortOrder: { default: "asc" },
+    animated: { type: Boolean, default: !1 },
+    animationDuration: { default: 460 },
+    animationDotDuration: { default: 150 },
+    animationGap: { default: 0 }
+  },
+  setup(v, { expose: D }) {
+    const e = v, { mode: y, direction: x } = B(e), u = R(() => e.isReverse ?? e.reverse), m = f(null), i = f(!1);
+    let o = null, t = null;
+    function l() {
+      o !== null && (window.clearTimeout(o), o = null), t && (t(), t = null);
+    }
+    function T() {
+      var d;
+      const n = ((d = m.value) == null ? void 0 : d.querySelectorAll(":scope > .x-timeline-item").length) ?? 0;
+      if (!n) return 0;
+      const s = Math.max(200, Number(e.animationDuration)) + Math.max(0, Number(e.animationGap));
+      return n * s;
+    }
+    async function r() {
+      if (e.animated)
+        return l(), i.value = !1, await g(), i.value = !0, new Promise((n) => {
+          t = n, o = window.setTimeout(() => {
+            i.value = !1, t == null || t(), t = null, o = null;
+          }, T() + 120);
+        });
+    }
+    return _(M, {
+      direction: a(e, "direction"),
+      mode: a(e, "mode"),
+      animated: a(e, "animated"),
+      animationActive: i,
+      animationDuration: a(e, "animationDuration"),
+      animationDotDuration: a(e, "animationDotDuration"),
+      animationGap: a(e, "animationGap"),
+      reverse: u,
+      sortKey: a(e, "sortKey"),
+      sortOrder: a(e, "sortOrder")
+    }), D({
+      replayAnimation: r
+    }), h(() => {
+      e.animated && r();
+    }), c(
+      () => e.animated,
+      (n) => {
+        if (n) {
+          r();
+          return;
+        }
+        l(), i.value = !1;
+      }
+    ), c(
+      () => [e.animationDuration, e.animationDotDuration, e.animationGap],
+      () => {
+        e.animated && r();
+      }
+    ), A(() => {
+      l();
+    }), (n, s) => (G(), k("ul", {
+      ref_key: "rootRef",
+      ref: m,
+      class: C(["x-timeline", [
+        `is-direction-${p(x)}`,
+        `is-mode-${p(y)}`,
+        { "is-reverse": u.value }
+      ]])
+    }, [
+      K(n.$slots, "default")
+    ], 2));
+  }
+});
+export {
+  b as default
+};

package/dist/components/XTimeline.vue2.js

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

package/dist/components/XTimelineItem.vue.d.ts

@@ -35,16 +35,16 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    color: string;
     label: string;
     time: string;
     title: string;
     center: boolean;
+    type: "primary" | "success" | "warning" | "danger" | "info";
     size: "normal" | "large";
+    color: string;
     icon: string | object;
-    type: "primary" | "success" | "warning" | "danger" | "info";
-    timestamp: string;
     placement: "top" | "bottom";
+    timestamp: string;
     hideTimestamp: boolean;
     dotColor: string;
     hollow: boolean;

package/dist/components/XTimelineItem.vue.js

@@ -0,0 +1,202 @@
+import { defineComponent as ae, inject as oe, getCurrentInstance as ne, ref as S, computed as a, onMounted as re, nextTick as K, onUpdated as le, watch as ie, resolveComponent as se, openBlock as v, createElementBlock as g, normalizeStyle as w, normalizeClass as P, createElementVNode as y, renderSlot as $, Fragment as ue, createBlock as H, resolveDynamicComponent as ce, createCommentVNode as B, createTextVNode as A, toDisplayString as N } from "vue";
+import { xTimelineContextKey as de } from "./timelineContext.js";
+const me = ["data-sort-timestamp", "data-sort-title", "data-sort-label", "data-sort-time"], ve = { class: "x-timeline-item__axis" }, fe = { class: "x-timeline-item__wrapper" }, pe = {
+  key: 0,
+  class: "x-timeline-item__timestamp is-top"
+}, ye = { class: "x-timeline-item__content" }, be = {
+  key: 1,
+  class: "x-timeline-item__timestamp is-bottom"
+}, $e = /* @__PURE__ */ ae({
+  __name: "XTimelineItem",
+  props: {
+    title: { default: "" },
+    timestamp: { default: "" },
+    hideTimestamp: { type: Boolean, default: !1 },
+    animated: { type: Boolean },
+    center: { type: Boolean, default: !1 },
+    placement: { default: "bottom" },
+    color: { default: "" },
+    dotColor: { default: "" },
+    size: { default: "normal" },
+    icon: { default: "" },
+    hollow: { type: Boolean, default: !1 },
+    time: { default: "" },
+    label: { default: "" },
+    lineType: { default: "solid" },
+    lineColor: { default: "" },
+    type: { default: "info" }
+  },
+  setup(o) {
+    const n = o, e = oe(de, null), k = ne(), T = S(null), f = S(0), p = S(0), R = {
+      primary: "var(--x-color-primary)",
+      success: "#67c23a",
+      warning: "#e6a23c",
+      danger: "var(--x-color-danger)",
+      info: "#e4e7ed"
+    }, c = a(() => n.timestamp || n.label || n.time || ""), b = a(() => n.dotColor || n.color || R[n.type]), j = a(() => {
+      const t = n.lineColor || "#e4e7ed", l = (e == null ? void 0 : e.direction.value) === "horizontal";
+      return n.lineType === "solid" ? {
+        background: t,
+        borderLeft: "none",
+        borderTop: "none"
+      } : l ? {
+        background: "transparent",
+        borderLeft: "none",
+        borderTop: `2px ${n.lineType} ${t}`
+      } : {
+        background: "transparent",
+        borderLeft: `2px ${n.lineType} ${t}`,
+        borderTop: "none"
+      };
+    }), G = a(() => n.hollow ? {
+      background: "#fff",
+      borderColor: b.value,
+      color: b.value
+    } : {
+      background: b.value,
+      borderColor: b.value,
+      color: "#fff"
+    }), q = a(() => {
+      const t = k == null ? void 0 : k.vnode.props;
+      return t ? Object.prototype.hasOwnProperty.call(t, "animated") : !1;
+    }), O = a(() => q.value ? !!n.animated : !!(e != null && e.animated.value)), F = a(() => O.value && !!(e != null && e.animationActive.value)), x = a(() => Math.max(200, Number((e == null ? void 0 : e.animationDuration.value) ?? 460))), z = a(() => {
+      const t = Number((e == null ? void 0 : e.animationDotDuration.value) ?? 150);
+      return Math.max(80, Math.min(t, x.value - 80));
+    }), U = a(() => Math.max(100, x.value - z.value)), X = a(() => Math.max(0, Number((e == null ? void 0 : e.animationGap.value) ?? 0))), Z = a(() => x.value + X.value), V = a(() => f.value * Z.value), J = a(() => V.value + z.value), Q = a(() => {
+      const t = {
+        "--x-timeline-dot-center-offset": n.center ? "50%" : `${n.size === "large" ? 12 : 10}px`
+      };
+      return O.value ? {
+        ...t,
+        "--x-timeline-dot-duration": `${z.value}ms`,
+        "--x-timeline-line-duration": `${U.value}ms`,
+        "--x-timeline-dot-delay": `${V.value}ms`,
+        "--x-timeline-line-delay": `${J.value}ms`
+      } : t;
+    }), W = a(() => p.value > 0 && f.value === 0), Y = a(() => p.value > 0 && f.value === p.value - 1), _ = a(() => p.value === 1), I = a(() => (e == null ? void 0 : e.direction.value) === "horizontal"), L = a(() => {
+      if (!I.value) return "";
+      const t = (e == null ? void 0 : e.mode.value) ?? "top";
+      if (t === "bottom" || t === "end") return "top";
+      if (t === "top" || t === "start") return "bottom";
+      const l = t === "alternate-reverse", r = f.value % 2;
+      return l ? r === 0 ? "top" : "bottom" : r === 0 ? "bottom" : "top";
+    });
+    function M(t, l) {
+      var s, d;
+      if (l === "content")
+        return ((d = (s = t.querySelector(".x-timeline-item__content")) == null ? void 0 : s.textContent) == null ? void 0 : d.trim()) ?? "";
+      const r = l.replace(/([A-Z])/g, "-$1").toLowerCase();
+      return t.getAttribute(`data-sort-${r}`) ?? "";
+    }
+    function C() {
+      const t = T.value, l = t == null ? void 0 : t.parentElement;
+      if (!t || !l) return;
+      const r = (e == null ? void 0 : e.sortKey.value) ?? "", s = Array.from(l.children).filter((i) => i.classList.contains("x-timeline-item"));
+      if (!r) {
+        s.forEach((i) => {
+          i.style.removeProperty("order");
+        });
+        return;
+      }
+      const d = (e == null ? void 0 : e.sortOrder.value) === "desc" ? -1 : 1, m = s.map((i, u) => ({ element: i, index: u }));
+      m.sort((i, u) => {
+        const h = M(i.element, r), te = M(u.element, r), E = h.localeCompare(te, void 0, { numeric: !0, sensitivity: "base" });
+        return E !== 0 ? E * d : i.index - u.index;
+      }), m.forEach(({ element: i }, u) => {
+        i.style.order = String(u);
+      });
+    }
+    function ee() {
+      const t = T.value, l = t == null ? void 0 : t.parentElement;
+      if (!t || !l) return;
+      const r = Array.from(l.children).filter((m) => m.classList.contains("x-timeline-item")), s = [...r].sort((m, i) => {
+        const u = Number(m.style.order || "0"), h = Number(i.style.order || "0");
+        return u !== h ? u - h : r.indexOf(m) - r.indexOf(i);
+      });
+      e != null && e.reverse.value && s.reverse(), p.value = s.length;
+      const d = s.indexOf(t);
+      d < 0 || (f.value = d);
+    }
+    function D() {
+      C(), ee();
+    }
+    return re(() => {
+      K(() => D());
+    }), le(() => {
+      D();
+    }), ie(
+      () => [e == null ? void 0 : e.sortKey.value, e == null ? void 0 : e.sortOrder.value, e == null ? void 0 : e.reverse.value],
+      () => {
+        K(() => D());
+      }
+    ), (t, l) => {
+      const r = se("x-icon");
+      return v(), g("li", {
+        ref_key: "itemRef",
+        ref: T,
+        class: P(["x-timeline-item", [
+          `x-timeline-item--${o.type}`,
+          {
+            "is-center": o.center,
+            "is-animated": O.value,
+            "is-animation-active": F.value,
+            "is-head": W.value,
+            "is-tail": Y.value,
+            "is-single": _.value,
+            "is-horizontal": I.value,
+            "is-horizontal-top": L.value === "top",
+            "is-horizontal-bottom": L.value === "bottom"
+          }
+        ]]),
+        style: w(Q.value),
+        "data-sort-timestamp": c.value,
+        "data-sort-title": o.title,
+        "data-sort-label": o.label,
+        "data-sort-time": o.time
+      }, [
+        y("div", ve, [
+          y("span", {
+            class: "x-timeline-item__line",
+            style: w(j.value)
+          }, null, 4),
+          y("span", {
+            class: P(["x-timeline-item__dot", [
+              `is-${o.size}`,
+              { "is-hollow": o.hollow, "has-icon": !!o.icon }
+            ]]),
+            style: w(G.value)
+          }, [
+            $(t.$slots, "dot", {}, () => [
+              o.icon ? (v(), g(ue, { key: 0 }, [
+                typeof o.icon != "string" ? (v(), H(ce(o.icon), { key: 0 })) : (v(), H(r, {
+                  key: 1,
+                  name: o.icon
+                }, null, 8, ["name"]))
+              ], 64)) : B("", !0)
+            ])
+          ], 6)
+        ]),
+        y("div", fe, [
+          !o.hideTimestamp && c.value && o.placement === "top" ? (v(), g("div", pe, [
+            $(t.$slots, "timestamp", { timestamp: c.value }, () => [
+              A(N(c.value), 1)
+            ])
+          ])) : B("", !0),
+          y("div", ye, [
+            $(t.$slots, "default", {}, () => [
+              A(N(o.title), 1)
+            ])
+          ]),
+          !o.hideTimestamp && c.value && o.placement === "bottom" ? (v(), g("div", be, [
+            $(t.$slots, "timestamp", { timestamp: c.value }, () => [
+              A(N(c.value), 1)
+            ])
+          ])) : B("", !0)
+        ])
+      ], 14, me);
+    };
+  }
+});
+export {
+  $e as default
+};

package/dist/components/XTimelineItem.vue2.js

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