hys-ui 0.1.0 → 0.2.0

package/dist/components/HysSkeleton/HysSkeleton.vue.js

@@ -1,7 +1,7 @@
 import o from "./HysSkeleton2.vue.js";
 /* empty css                 */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-3b5c68e6"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-ed2c324f"]]);
 export {
-  p as default
+  m as default
 };

package/dist/components/HysSkeleton/HysSkeleton2.vue.js

@@ -1,10 +1,11 @@
-import { defineComponent as r, openBlock as t, createElementBlock as a, mergeProps as u, unref as d, renderSlot as y, normalizeClass as c, normalizeStyle as s, createCommentVNode as o, Fragment as h, renderList as m } from "vue";
-import { useHysRootAttrs as f } from "../../config.js";
-const v = ["aria-busy"], k = {
-  key: 1,
-  class: "hys-ui-skeleton",
-  style: { width: "40%", height: "20px" }
-}, x = /* @__PURE__ */ r({
+import { defineComponent as E, ref as F, computed as f, watch as H, onDeactivated as R, onActivated as V, onBeforeUnmount as $, openBlock as i, createElementBlock as l, mergeProps as I, unref as B, Fragment as p, renderList as z, renderSlot as D, normalizeStyle as y, createCommentVNode as m, createElementVNode as L, normalizeClass as P, createBlock as U } from "vue";
+import { Image as j } from "lucide-vue-next";
+import { useHysRootAttrs as q } from "../../config.js";
+import { useMotion as G } from "../../motion/useMotion.js";
+const J = ["aria-busy"], K = ["aria-label"], O = {
+  key: 0,
+  class: "hys-ui-skeleton-group"
+}, Q = { class: "hys-ui-skeleton-paragraph" }, ee = /* @__PURE__ */ E({
   __name: "HysSkeleton",
   props: {
     lines: { default: 3 },
@@ -12,32 +13,128 @@ const v = ["aria-busy"], k = {
     active: { type: Boolean, default: !0 },
     avatar: { type: Boolean },
     avatarSize: { default: 40 },
-    title: { type: Boolean, default: !0 }
+    avatarShape: { default: "circle" },
+    title: { type: Boolean, default: !0 },
+    titleWidth: { default: "40%" },
+    widths: {},
+    round: { type: Boolean },
+    count: { default: 1 },
+    variant: { default: "paragraph" },
+    width: {},
+    height: {},
+    delay: { default: 0 },
+    minDuration: { default: 0 },
+    loadingText: { default: "加载中" }
   },
-  setup(e) {
-    const i = f();
-    return (n, g) => (t(), a("div", u(d(i), { "aria-busy": e.loading }), [
-      e.loading ? (t(), a("div", {
-        key: 1,
-        class: c(["hys-ui-skeleton-group", { "hys-ui-skeleton-static": !e.active }]),
+  emits: ["visibilityChange"],
+  setup(t, { emit: M }) {
+    const a = t, x = M, C = q(), { effectiveMotion: T } = G(), o = F(!1);
+    let n, u = !0, k = 0;
+    const d = (e, r, h) => Number.isFinite(e) ? Math.max(0, Math.min(h, Math.floor(e))) : r, N = f(() => d(a.count, 1, 100)), g = f(() => d(a.lines, 3, 100)), s = (e) => typeof e == "number" ? Math.max(0, e) + "px" : e, W = f(() => ({
+      width: s(a.width),
+      height: s(a.height)
+    })), w = f(
+      () => a.active && T.value !== "off"
+    );
+    function c(e) {
+      !u || e === o.value || (o.value = e, e && (k = Date.now()), x("visibilityChange", e));
+    }
+    function v() {
+      n !== void 0 && clearTimeout(n), n = void 0;
+    }
+    function b() {
+      if (v(), !!u) {
+        if (a.loading) {
+          if (o.value) return;
+          const e = d(a.delay, 0, 6e4);
+          e ? n = setTimeout(() => {
+            n = void 0, c(!0);
+          }, e) : c(!0);
+        } else if (o.value) {
+          const e = d(a.minDuration, 0, 6e4) - (Date.now() - k);
+          e > 0 ? n = setTimeout(() => {
+            n = void 0, c(!1);
+          }, e) : c(!1);
+        }
+      }
+    }
+    H(() => [a.loading, a.delay, a.minDuration], b, {
+      immediate: !0,
+      flush: "sync"
+    });
+    function A(e) {
+      var r;
+      return s(
+        ((r = a.widths) == null ? void 0 : r[e]) ?? (e === g.value - 1 ? "65%" : "100%")
+      );
+    }
+    return R(() => {
+      u = !1, v();
+    }), V(() => {
+      u = !0, b();
+    }), $(() => {
+      u = !1, v();
+    }), (e, r) => (i(), l("div", I(B(C), {
+      class: ["hys-ui-skeleton-root", {
+        "hys-ui-skeleton-static": !w.value,
+        "hys-ui-skeleton-round": t.round
+      }],
+      "aria-busy": t.loading || o.value
+    }), [
+      o.value ? (i(), l("div", {
+        key: 0,
         role: "status",
-        "aria-label": "加载中"
+        "aria-label": t.loadingText,
+        class: "hys-ui-skeleton-list"
       }, [
-        e.avatar ? (t(), a("div", {
-          key: 0,
-          class: "hys-ui-skeleton",
-          style: s({ width: e.avatarSize + "px", height: e.avatarSize + "px", borderRadius: "50%" })
-        }, null, 4)) : o("", !0),
-        e.title ? (t(), a("div", k)) : o("", !0),
-        (t(!0), a(h, null, m(Math.max(0, Math.floor(e.lines)), (l) => (t(), a("div", {
-          key: l,
-          class: "hys-ui-skeleton",
-          style: s({ width: l === e.lines ? "65%" : "100%" })
-        }, null, 4))), 128))
-      ], 2)) : y(n.$slots, "default", {}, void 0, !0, 0)
-    ], 16, v));
+        (i(!0), l(p, null, z(N.value, (h) => (i(), l("div", {
+          key: h,
+          class: "hys-ui-skeleton-item",
+          "aria-hidden": "true"
+        }, [
+          D(e.$slots, "template", {
+            index: h - 1,
+            active: w.value
+          }, () => [
+            t.variant === "paragraph" ? (i(), l("div", O, [
+              t.avatar ? (i(), l("div", {
+                key: 0,
+                class: "hys-ui-skeleton hys-ui-skeleton-avatar",
+                style: y({
+                  width: s(t.avatarSize),
+                  height: s(t.avatarSize),
+                  borderRadius: t.avatarShape === "circle" ? "50%" : "6px"
+                })
+              }, null, 4)) : m("", !0),
+              L("div", Q, [
+                t.title ? (i(), l("div", {
+                  key: 0,
+                  class: "hys-ui-skeleton hys-ui-skeleton-title",
+                  style: y({ width: s(t.titleWidth) })
+                }, null, 4)) : m("", !0),
+                (i(!0), l(p, null, z(g.value, (S) => (i(), l("div", {
+                  key: S,
+                  class: "hys-ui-skeleton",
+                  style: y({ width: A(S - 1) })
+                }, null, 4))), 128))
+              ])
+            ])) : (i(), l("div", {
+              key: 1,
+              class: P(["hys-ui-skeleton", "hys-ui-skeleton-" + t.variant]),
+              style: y(W.value)
+            }, [
+              t.variant === "image" ? (i(), U(B(j), {
+                key: 0,
+                size: 32,
+                "stroke-width": 1.25
+              })) : m("", !0)
+            ], 6))
+          ], !0)
+        ]))), 128))
+      ], 8, K)) : D(e.$slots, "default", {}, void 0, !0, 1)
+    ], 16, J));
   }
 });
 export {
-  x as default
+  ee as default
 };

package/dist/components/HysSlider/HysSlider.vue.js

@@ -1,7 +1,7 @@
 import o from "./HysSlider2.vue.js";
 /* empty css               */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-75f3c7ec"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-eda88478"]]);
 export {
-  f as default
+  m as default
 };