hys-ui 0.2.0 → 0.4.0

package/dist/components/HysTimeline/HysTimeline2.vue.js

@@ -1,36 +1,255 @@
-import { defineComponent as m, computed as p, openBlock as t, createElementBlock as s, mergeProps as d, unref as y, Fragment as h, renderList as g, normalizeStyle as _, normalizeClass as f, renderSlot as k, createElementVNode as v, toDisplayString as o, createCommentVNode as l } from "vue";
-import { useHysRootAttrs as B } from "../../config.js";
-const C = { key: 0 }, S = { key: 1 }, z = {
+import { defineComponent as se, useSlots as le, ref as Q, onActivated as oe, onDeactivated as re, computed as c, toRaw as U, openBlock as l, createElementBlock as a, mergeProps as u, unref as C, Fragment as _, renderList as ae, normalizeStyle as ue, normalizeClass as j, renderSlot as m, createTextVNode as f, toDisplayString as g, createCommentVNode as p, createElementVNode as k, createBlock as D, resolveDynamicComponent as me } from "vue";
+import { LoaderCircle as X } from "lucide-vue-next";
+import { useHysRootAttrs as de } from "../../config.js";
+import { timelineRead as Y, timelineText as b, timelineTone as ye } from "../../composables/timeline.js";
+import { feedbackNumber as ce } from "../../composables/feedback.js";
+const pe = ["data-mode", "aria-label", "aria-busy"], he = ["data-position", "aria-current"], fe = {
   key: 0,
-  class: "hys-ui-pending"
-}, N = /* @__PURE__ */ m({
+  class: "hys-ui-timeline-label"
+}, ge = {
+  class: "hys-ui-timeline-rail",
+  "aria-hidden": "true"
+}, ve = { class: "hys-ui-timeline-content" }, ke = ["datetime"], be = {
+  key: 1,
+  class: "hys-ui-timeline-title"
+}, Te = ["datetime"], we = {
+  key: 3,
+  class: "hys-ui-timeline-description"
+}, ze = {
+  class: "hys-ui-timeline-rail",
+  "aria-hidden": "true"
+}, Se = { class: "hys-ui-timeline-content" }, $e = {
+  key: 0,
+  class: "hys-ui-timeline-empty"
+}, Le = /* @__PURE__ */ se({
   __name: "HysTimeline",
   props: {
     items: {},
     reverse: { type: Boolean },
-    pending: {}
+    pending: { type: [String, Boolean], default: void 0 },
+    mode: { default: "left" },
+    itemKey: {},
+    fieldNames: {},
+    size: { default: "md" },
+    hollow: { type: Boolean },
+    showTime: { type: Boolean, default: !0 },
+    timePlacement: { default: "bottom" },
+    responsive: { type: Boolean, default: !0 },
+    lineStyle: { default: "solid" },
+    lineColor: {},
+    pendingPosition: { default: "end" },
+    pendingLoading: { type: Boolean, default: void 0 },
+    pendingText: { default: "加载中…" },
+    emptyText: {},
+    ariaLabel: {}
   },
-  setup(r) {
-    const c = B(), n = r, u = p(() => n.reverse ? [...n.items].reverse() : n.items);
-    return (a, A) => (t(), s("ol", d(y(c), { class: "hys-ui-ex-timeline" }), [
-      (t(!0), s(h, null, g(u.value, (e, i) => (t(), s("li", {
-        key: i,
-        class: f(e.status ? "hys-ui-" + e.status : void 0),
-        style: _({ "--hys-ui-timeline-color": e.color })
+  setup(o, { expose: Z }) {
+    const n = o, r = le(), R = de(), V = Q(), P = Q(!0);
+    oe(() => P.value = !0), re(() => P.value = !1);
+    const w = /* @__PURE__ */ new WeakMap();
+    let ee = 0;
+    const s = (t, y) => {
+      var e;
+      return Y(t, ((e = n.fieldNames) == null ? void 0 : e[y]) ?? y);
+    }, z = c(() => {
+      const t = /* @__PURE__ */ new Set(), y = /* @__PURE__ */ new Set(), e = n.items.map((i, d) => ({ item: i, sourceIndex: d })).filter(({ item: i }) => i && typeof i == "object").map(({ item: i, sourceIndex: d }) => {
+        const v = typeof n.itemKey == "function" ? n.itemKey(i, d) : n.itemKey ? Y(i, n.itemKey) : s(i, "id") ?? s(i, "key"), W = typeof v == "string" || typeof v == "number" && Number.isFinite(v), K = typeof v + ":" + String(v), S = U(i);
+        w.has(S) || w.set(S, ++ee);
+        let $ = W && !t.has(K) ? "key:" + K : "object:" + w.get(S);
+        t.add(K), y.has($) && ($ += ":occurrence:" + d), y.add($);
+        const q = s(i, "status"), N = ["done", "current", "pending"].includes(
+          q
+        ) ? q : void 0, I = s(i, "tone"), M = ["primary", "success", "warning", "danger", "info", "neutral"].includes(
+          I
+        ) ? I : N === "done" || N === "current" ? "primary" : "neutral", L = s(i, "position"), G = L === "left" || L === "right" ? L : void 0, B = s(i, "icon"), J = B && typeof B == "object" ? U(B) : B, O = !!s(i, "loading"), x = s(i, "size"), ne = typeof x == "number" ? ce(x, 10, 4, 64) : { sm: 8, md: 10, lg: 14 }[x] ?? (J || r.dot || O ? 18 : { sm: 8, md: 10, lg: 14 }[n.size] ?? 10);
+        return {
+          item: i,
+          sourceIndex: d,
+          renderKey: $,
+          key: W ? v : w.get(S),
+          status: N,
+          tone: M,
+          icon: J,
+          loading: O,
+          nodeSize: ne,
+          title: b(s(i, "title")),
+          description: b(s(i, "description")),
+          time: b(s(i, "time")),
+          dateTime: b(s(i, "dateTime")),
+          label: b(s(i, "label")),
+          color: b(s(i, "color")) || ye(M),
+          position: G,
+          explicitPosition: !!G,
+          hollow: s(i, "hollow") ?? n.hollow,
+          hideTime: s(i, "hideTime"),
+          placement: s(i, "timePlacement") ?? n.timePlacement
+        };
+      });
+      return (n.reverse ? [...e].reverse() : e).map(
+        (i, d) => ({
+          ...i,
+          index: d,
+          position: i.position ?? (n.mode === "right" || n.mode === "alternate" && d % 2 === 1 || n.mode === "alternate-reverse" && d % 2 === 0 ? "left" : "right")
+        })
+      );
+    }), te = c(
+      () => n.mode.startsWith("alternate") || !!r.label || z.value.some((t) => t.label || t.explicitPosition)
+    ), A = c(
+      () => n.pending !== !1 && (n.pending === !0 || !!n.pending || !!r.pending)
+    ), T = c(
+      () => n.pendingLoading ?? n.pending === !0
+    ), E = c(() => ({
+      pending: n.pending,
+      loading: T.value
+    })), F = c(
+      () => T.value || !!r["pending-dot"]
+    ), ie = c(
+      () => F.value ? 18 : { sm: 8, md: 10, lg: 14 }[n.size] ?? 10
+    ), h = (t) => ({
+      item: t.item,
+      index: t.index,
+      sourceIndex: t.sourceIndex,
+      key: t.key,
+      title: t.title,
+      time: t.time,
+      description: t.description,
+      label: t.label,
+      position: t.position,
+      status: t.status,
+      tone: t.tone,
+      loading: t.loading
+    }), H = c(() => {
+      const t = z.value.map((y) => ({ kind: "item", entry: y }));
+      return A.value && (n.pendingPosition === "start" ? t.unshift({ kind: "pending" }) : t.push({ kind: "pending" })), t;
+    });
+    return Z({
+      element: V,
+      getItems: () => z.value.map((t) => t.item)
+    }), (t, y) => (l(), a("ol", u({
+      ref_key: "element",
+      ref: V
+    }, C(R), {
+      class: ["hys-ui-ex-timeline hys-ui-timeline", [
+        "hys-ui-timeline-" + o.size,
+        {
+          "hys-ui-timeline-centered": te.value,
+          "hys-ui-timeline-responsive": o.responsive,
+          "hys-ui-timeline-motion": P.value && C(R)["data-hys-motion"] !== "off"
+        }
+      ]],
+      "data-mode": o.mode,
+      style: {
+        "--hys-ui-timeline-line-color": o.lineColor || "var(--hys-ui-border,var(--hys-ui-theme-border))",
+        "--hys-ui-timeline-line-style": o.lineStyle
+      },
+      role: "list",
+      "aria-label": o.ariaLabel,
+      "aria-busy": T.value && A.value || z.value.some((e) => e.loading) || void 0
+    }), [
+      (l(!0), a(_, null, ae(H.value, (e) => (l(), a("li", {
+        key: e.kind === "pending" ? "pending" : e.entry.renderKey,
+        class: j([
+          "hys-ui-timeline-item",
+          e.kind === "item" ? [
+            e.entry.status ? "hys-ui-" + e.entry.status : void 0,
+            {
+              "hys-ui-timeline-has-label": !!e.entry.label || !!r.label
+            }
+          ] : ["hys-ui-pending", "hys-ui-timeline-pending"]
+        ]),
+        "data-position": e.kind === "item" ? e.entry.position : o.mode === "right" ? "left" : "right",
+        "aria-current": e.kind === "item" && e.entry.status === "current" ? "step" : void 0,
+        style: ue({
+          "--hys-ui-timeline-color": e.kind === "item" ? e.entry.color : T.value ? "var(--hys-ui-primary,var(--hys-ui-theme-primary))" : "var(--hys-ui-muted,var(--hys-ui-theme-muted))",
+          "--hys-ui-timeline-node-size": (e.kind === "item" ? e.entry.nodeSize : ie.value) + "px"
+        })
       }, [
-        k(a.$slots, "item", {
-          item: e,
-          index: i
-        }, () => [
-          v("strong", null, o(e.title), 1),
-          e.time ? (t(), s("small", C, o(e.time), 1)) : l("", !0),
-          e.description ? (t(), s("p", S, o(e.description), 1)) : l("", !0)
+        e.kind === "item" ? (l(), a(_, { key: 0 }, [
+          e.entry.label || r.label ? (l(), a("div", fe, [
+            m(t.$slots, "label", u({ ref_for: !0 }, h(e.entry)), () => [
+              f(g(e.entry.label), 1)
+            ], !0)
+          ])) : p("", !0),
+          k("div", ge, [
+            k("span", {
+              class: j(["hys-ui-timeline-dot", {
+                "hys-ui-timeline-hollow": e.entry.hollow,
+                "hys-ui-timeline-custom-dot": !!e.entry.icon || !!r.dot || e.entry.loading
+              }])
+            }, [
+              m(t.$slots, "dot", u({ ref_for: !0 }, h(e.entry)), () => [
+                e.entry.loading ? (l(), D(C(X), {
+                  key: 0,
+                  class: "hys-ui-timeline-spinner",
+                  size: e.entry.nodeSize
+                }, null, 8, ["size"])) : e.entry.icon ? (l(), D(me(e.entry.icon), {
+                  key: 1,
+                  size: e.entry.nodeSize
+                }, null, 8, ["size"])) : p("", !0)
+              ], !0)
+            ], 2)
+          ]),
+          k("div", ve, [
+            m(t.$slots, "item", u({ ref_for: !0 }, h(e.entry)), () => [
+              o.showTime && !e.entry.hideTime && e.entry.placement === "top" && (e.entry.time || r.time) ? (l(), a("time", {
+                key: 0,
+                class: "hys-ui-timeline-time hys-ui-timeline-time-top",
+                datetime: e.entry.dateTime || void 0
+              }, [
+                m(t.$slots, "time", u({ ref_for: !0 }, h(e.entry)), () => [
+                  f(g(e.entry.time), 1)
+                ], !0)
+              ], 8, ke)) : p("", !0),
+              e.entry.title || r.title ? (l(), a("strong", be, [
+                m(t.$slots, "title", u({ ref_for: !0 }, h(e.entry)), () => [
+                  f(g(e.entry.title), 1)
+                ], !0)
+              ])) : p("", !0),
+              o.showTime && !e.entry.hideTime && e.entry.placement !== "top" && (e.entry.time || r.time) ? (l(), a("time", {
+                key: 2,
+                class: "hys-ui-timeline-time",
+                datetime: e.entry.dateTime || void 0
+              }, [
+                m(t.$slots, "time", u({ ref_for: !0 }, h(e.entry)), () => [
+                  f(g(e.entry.time), 1)
+                ], !0)
+              ], 8, Te)) : p("", !0),
+              e.entry.description || r.description ? (l(), a("div", we, [
+                m(t.$slots, "description", u({ ref_for: !0 }, h(e.entry)), () => [
+                  f(g(e.entry.description), 1)
+                ], !0)
+              ])) : p("", !0)
+            ], !0)
+          ])
+        ], 64)) : (l(), a(_, { key: 1 }, [
+          k("div", ze, [
+            k("span", {
+              class: j(["hys-ui-timeline-dot hys-ui-timeline-hollow", { "hys-ui-timeline-custom-dot": F.value }])
+            }, [
+              m(t.$slots, "pending-dot", u({ ref_for: !0 }, E.value), () => [
+                T.value ? (l(), D(C(X), {
+                  key: 0,
+                  class: "hys-ui-timeline-spinner",
+                  size: 18
+                })) : p("", !0)
+              ], !0)
+            ], 2)
+          ]),
+          k("div", Se, [
+            m(t.$slots, "pending", u({ ref_for: !0 }, E.value), () => [
+              f(g(typeof n.pending == "string" ? n.pending : o.pendingText), 1)
+            ], !0)
+          ])
+        ], 64))
+      ], 14, he))), 128)),
+      !H.value.length && (r.empty || o.emptyText) ? (l(), a("li", $e, [
+        m(t.$slots, "empty", {}, () => [
+          f(g(o.emptyText), 1)
         ], !0)
-      ], 6))), 128)),
-      r.pending ? (t(), s("li", z, o(r.pending), 1)) : l("", !0)
-    ], 16));
+      ])) : p("", !0)
+    ], 16, pe));
   }
 });
 export {
-  N as default
+  Le as default
 };

package/dist/components/HysTooltip/HysTooltip.vue.js

@@ -1,66 +1,7 @@
-import { defineComponent as x, ref as y, useId as B, watch as b, onBeforeUnmount as F, onDeactivated as C, openBlock as s, createElementBlock as h, Fragment as N, createElementVNode as P, mergeProps as g, unref as e, renderSlot as T, createBlock as V, Teleport as A, createTextVNode as E, toDisplayString as H, createCommentVNode as R } from "vue";
-import { useHysRootAttrs as S } from "../../config.js";
-import { useFloating as $ } from "../../composables/useFloating.js";
-const I = ["tabindex", "aria-describedby"], U = ["id"], J = /* @__PURE__ */ x({
-  __name: "HysTooltip",
-  props: {
-    text: {},
-    placement: { default: "top-start" },
-    disabled: { type: Boolean },
-    showDelay: { default: 0 },
-    hideDelay: { default: 70 }
-  },
-  emits: ["visibleChange"],
-  setup(i, { emit: v }) {
-    const l = S(), o = i, k = v, c = y(), d = y(), u = B(), { open: a, style: D, show: _, close: m, restoringFocus: w } = $(c, d, { get placement() {
-      return o.placement;
-    }, gap: 7 });
-    let n;
-    function p() {
-      clearTimeout(n), !o.disabled && !w.value && (n = setTimeout(() => _(), o.showDelay));
-    }
-    function f() {
-      clearTimeout(n), n = setTimeout(() => m(), o.hideDelay);
-    }
-    function r() {
-      clearTimeout(n), m();
-    }
-    return b(a, (t) => k("visibleChange", t)), b(() => o.disabled, (t) => {
-      t && r();
-    }), F(r), C(r), (t, j) => (s(), h(N, null, [
-      P("span", g({
-        ref_key: "trigger",
-        ref: c
-      }, e(l), {
-        class: "hys-ui-tooltip-wrap",
-        tabindex: i.disabled ? -1 : 0,
-        "aria-describedby": e(a) ? e(u) : void 0,
-        onPointerenter: p,
-        onPointerleave: f,
-        onFocusin: p,
-        onFocusout: f
-      }), [
-        T(t.$slots, "default")
-      ], 16, I),
-      (s(), V(A, { to: "body" }, [
-        e(a) ? (s(), h("span", g({
-          key: 0,
-          id: e(u),
-          ref_key: "panel",
-          ref: d
-        }, e(l), {
-          class: "hys-ui-tooltip-bubble hys-ui-floating-tooltip",
-          role: "tooltip",
-          style: e(D)
-        }), [
-          T(t.$slots, "content", {}, () => [
-            E(H(i.text), 1)
-          ])
-        ], 16, U)) : R("", !0)
-      ]))
-    ], 64));
-  }
-});
+import o from "./HysTooltip2.vue.js";
+/* empty css                */
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-c0433916"]]);
 export {
-  J as default
+  s as default
 };

package/dist/components/HysTooltip/HysTooltip2.vue.js

@@ -1,4 +1,112 @@
-import f from "./HysTooltip.vue.js";
+import { defineComponent as g, openBlock as v, createElementBlock as w, mergeProps as B, unref as o, createVNode as p, withCtx as u, renderSlot as s, normalizeProps as i, guardReactiveProps as d, createTextVNode as x, toDisplayString as k } from "vue";
+import { useHysRootAttrs as P } from "../../config.js";
+import { usePopupSurface as C } from "../../composables/usePopupSurface.js";
+import O from "../../internal/PopupReference.js";
+import E from "../../internal/PopupSurfacePanel.vue.js";
+const D = /* @__PURE__ */ g({
+  __name: "HysTooltip",
+  props: {
+    text: {},
+    open: { type: Boolean, default: void 0 },
+    modelValue: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean },
+    disabled: { type: Boolean },
+    trigger: {},
+    triggerKeys: {},
+    triggerTabindex: {},
+    placement: { default: "top-start" },
+    offset: {},
+    autoAdjustOverflow: { type: Boolean, default: !0 },
+    showDelay: { default: 0 },
+    hideDelay: { default: 70 },
+    autoClose: {},
+    enterable: { type: Boolean, default: !1 },
+    closeOnEscape: { type: Boolean, default: !0 },
+    closeOnOutside: { type: Boolean, default: !0 },
+    destroyOnHide: { type: Boolean, default: !0 },
+    forceRender: { type: Boolean },
+    appendTo: { type: [String, Boolean], default: "body" },
+    reference: {},
+    width: {},
+    maxWidth: {},
+    maxHeight: {},
+    showArrow: { type: Boolean },
+    arrowOffset: {},
+    effect: { default: "dark" },
+    color: {},
+    textColor: {},
+    overlayClass: {},
+    overlayStyle: {},
+    contentClass: {},
+    contentStyle: {},
+    zIndex: {},
+    ariaLabel: {},
+    popupTransition: {},
+    popupTransitionDuration: {}
+  },
+  emits: ["update:open", "update:modelValue", "visibleChange", "openChange", "show", "hide", "opened", "closed"],
+  setup(l, { expose: f, emit: m }) {
+    const a = l, y = m, c = P(), e = C(
+      a,
+      "tooltip",
+      (r, ...n) => y(r, ...n)
+    );
+    return f({
+      element: e.panel,
+      referenceElement: e.actualReference,
+      open: e.open,
+      placement: e.placement,
+      show: e.show,
+      hide: e.hide,
+      close: e.hide,
+      toggle: e.toggle,
+      updatePosition: e.updatePosition,
+      focus: e.focus
+    }), (r, n) => (v(), w("span", B({
+      ref: (t) => o(e).wrapper.value = t
+    }, { ...o(c), ...o(e).wrapperAttrs.value }, {
+      class: "hys-ui-tooltip-wrap",
+      onPointerenter: n[1] || (n[1] = //@ts-ignore
+      (...t) => o(e).pointerEnter && o(e).pointerEnter(...t)),
+      onPointerleave: n[2] || (n[2] = //@ts-ignore
+      (...t) => o(e).pointerLeave && o(e).pointerLeave(...t)),
+      onFocusin: n[3] || (n[3] = //@ts-ignore
+      (...t) => o(e).focusIn && o(e).focusIn(...t)),
+      onFocusout: n[4] || (n[4] = //@ts-ignore
+      (...t) => o(e).focusOut && o(e).focusOut(...t)),
+      onClick: n[5] || (n[5] = //@ts-ignore
+      (...t) => o(e).click && o(e).click(...t)),
+      onContextmenu: n[6] || (n[6] = //@ts-ignore
+      (...t) => o(e).contextmenu && o(e).contextmenu(...t)),
+      onKeydown: n[7] || (n[7] = //@ts-ignore
+      (...t) => o(e).key && o(e).key(...t))
+    }), [
+      p(o(O), {
+        id: o(e).id,
+        open: o(e).open.value,
+        kind: "tooltip",
+        onElement: n[0] || (n[0] = (t) => o(e).referenceElement.value = t)
+      }, {
+        default: u(() => [
+          s(r.$slots, "default", i(d(o(e).scope.value)), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["id", "open"]),
+      p(E, {
+        surface: o(e),
+        options: a,
+        kind: "tooltip"
+      }, {
+        default: u((t) => [
+          s(r.$slots, "content", i(d(t)), () => [
+            x(k(l.text), 1)
+          ], !0)
+        ]),
+        _: 3
+      }, 8, ["surface"])
+    ], 16));
+  }
+});
 export {
-  f as default
+  D as default
 };