hys-ui 0.1.1 → 0.3.0

package/dist/components/HysAvatar/HysAvatar2.vue.js

@@ -1,4 +1,223 @@
-import f from "./HysAvatar.vue.js";
+import { defineComponent as ae, useAttrs as te, inject as le, ref as m, computed as n, watch as L, nextTick as M, onUpdated as re, onMounted as oe, onActivated as ie, onDeactivated as se, onBeforeUnmount as ue, openBlock as d, createElementBlock as y, mergeProps as V, unref as l, createCommentVNode as q, renderSlot as B, Fragment as ne, normalizeStyle as ce, createBlock as G, resolveDynamicComponent as ve, toRaw as de, createTextVNode as fe, toDisplayString as me } from "vue";
+import { UserRound as ye } from "lucide-vue-next";
+import { useHysRootAttrs as he } from "../../config.js";
+import { avatarGroupKey as ge, useAvatarSize as pe } from "../../composables/avatar.js";
+const be = ["aria-label", "aria-busy"], ke = {
+  key: 1,
+  class: "hys-ui-avatar-placeholder"
+}, ze = {
+  key: 0,
+  class: "hys-ui-avatar-custom"
+}, Ee = /* @__PURE__ */ ae({
+  inheritAttrs: !1,
+  __name: "HysAvatar",
+  props: {
+    name: { default: "" },
+    src: {},
+    srcset: {},
+    srcSet: {},
+    sizes: {},
+    size: {},
+    shape: {},
+    fit: { default: "cover" },
+    alt: {},
+    icon: {},
+    gap: { default: 4 },
+    autoFit: { type: Boolean, default: !0 },
+    color: {},
+    textColor: {},
+    bordered: { type: Boolean, default: void 0 },
+    radius: {},
+    fallbackSrc: {},
+    loadError: {},
+    draggable: { type: Boolean, default: void 0 },
+    crossOrigin: {},
+    lazy: { type: Boolean },
+    imgProps: {}
+  },
+  emits: ["error", "load"],
+  setup(r, { expose: I, emit: J }) {
+    const e = r, O = J, F = te(), Q = he(), c = le(ge, void 0), h = m(), U = m(), i = m(), v = m(!1), w = m(!1), s = m("primary"), j = m(0), P = m(), $ = n(() => {
+      var a;
+      return e.src ?? ((a = e.imgProps) == null ? void 0 : a.src) ?? "";
+    }), g = n(
+      () => {
+        var a;
+        return e.srcset ?? e.srcSet ?? ((a = e.imgProps) == null ? void 0 : a.srcset);
+      }
+    ), u = pe(n(() => e.size ?? (c == null ? void 0 : c.size.value))), D = n(() => e.shape ?? (c == null ? void 0 : c.shape.value) ?? "circle"), X = n(() => e.bordered ?? (c == null ? void 0 : c.bordered.value) ?? !1), x = n(
+      () => s.value === "content" ? "" : s.value === "fallback" ? e.fallbackSrc || "" : $.value
+    ), p = n(
+      () => j.value + ":" + x.value + ":" + (g.value || "")
+    ), N = n(
+      () => Array.from(e.name.trim()).slice(0, 2).join("").toUpperCase()
+    ), S = n(
+      () => s.value !== "content" && !!(x.value || s.value === "primary" && g.value)
+    ), Y = n(() => {
+      const { onError: a, onLoad: f, ...t } = e.imgProps ?? {};
+      return {
+        ...t,
+        src: x.value || void 0,
+        srcset: s.value === "fallback" ? void 0 : g.value,
+        sizes: e.sizes ?? t.sizes,
+        alt: e.alt ?? t.alt ?? e.name,
+        draggable: e.draggable ?? t.draggable ?? !1,
+        crossorigin: e.crossOrigin ?? t.crossorigin,
+        loading: e.lazy ? "lazy" : t.loading,
+        decoding: t.decoding ?? "async",
+        "data-hys-avatar-request": p.value,
+        style: [
+          t.style,
+          { objectFit: e.fit, opacity: v.value ? 1 : 0 }
+        ]
+      };
+    });
+    function Z(a) {
+      var t, A;
+      if (a.target.getAttribute("data-hys-avatar-request") !== p.value)
+        return;
+      const f = {
+        src: x.value || g.value || "",
+        fallback: s.value === "fallback"
+      };
+      v.value = !0, (A = (t = e.imgProps) == null ? void 0 : t.onLoad) == null || A.call(t, a), O("load", a, f);
+    }
+    function _(a) {
+      var E, H, K;
+      if (a.target.getAttribute("data-hys-avatar-request") !== p.value)
+        return;
+      const f = p.value, t = {
+        src: x.value || g.value || "",
+        fallback: s.value === "fallback"
+      };
+      w.value = !0, P.value = a, (H = (E = e.imgProps) == null ? void 0 : E.onError) == null || H.call(E, a), O("error", a, t);
+      let A = !1;
+      try {
+        A = ((K = e.loadError) == null ? void 0 : K.call(e, a)) === !1;
+      } catch {
+      }
+      if (p.value === f) {
+        if (A) {
+          v.value = !0;
+          return;
+        }
+        v.value = !1, s.value = s.value === "primary" && e.fallbackSrc && e.fallbackSrc !== $.value ? "fallback" : "content";
+      }
+    }
+    function T() {
+      s.value = "primary", v.value = !1, w.value = !1, P.value = void 0;
+    }
+    function W() {
+      j.value++, T();
+    }
+    L(() => [$.value, g.value, e.fallbackSrc], T, {
+      flush: "sync"
+    });
+    let b = !0, k, o;
+    function ee() {
+      if (k = void 0, !b || !i.value || !h.value) return;
+      const a = Math.max(
+        1,
+        (h.value.clientWidth || u.value) - (Number.isFinite(e.gap) ? Math.max(0, e.gap) : 4) * 2
+      ), f = i.value.offsetWidth || i.value.scrollWidth || i.value.getBoundingClientRect().width, t = e.autoFit && f ? Math.min(1, a / f) : 1;
+      i.value.style.transform = `scale(${t})`;
+    }
+    function z() {
+      b && i.value && k === void 0 && (k = requestAnimationFrame(ee));
+    }
+    function R() {
+      o == null || o.disconnect(), o = void 0, k !== void 0 && cancelAnimationFrame(k), k = void 0, window.removeEventListener("resize", z);
+    }
+    function C() {
+      R(), !(!b || !h.value) && (o = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(z), o == null || o.observe(h.value), i.value && (o == null || o.observe(i.value)), o || window.addEventListener("resize", z), z());
+    }
+    return L(
+      () => [u.value, e.gap, e.autoFit],
+      () => void M(z)
+    ), L(i, () => void M(C), { flush: "post" }), re(z), oe(C), ie(() => {
+      b = !0, M(C);
+    }), se(() => {
+      b = !1, R();
+    }), ue(() => {
+      b = !1, R();
+    }), I({ element: h, image: U, loaded: v, failed: w, reload: W }), (a, f) => {
+      var t;
+      return d(), y("span", V({
+        ref_key: "root",
+        ref: h
+      }, { ...l(Q), ...l(F) }, {
+        class: ["hys-ui-ex-avatar", [
+          "hys-ui-avatar-" + D.value,
+          {
+            "hys-ui-avatar-bordered": X.value,
+            "hys-ui-avatar-loading": S.value && !v.value
+          }
+        ]],
+        style: [
+          {
+            width: l(u) + "px",
+            height: l(u) + "px",
+            fontSize: Math.max(11, l(u) * 0.34) + "px",
+            borderRadius: D.value === "circle" ? "50%" : typeof r.radius == "number" ? r.radius + "px" : r.radius ?? Math.min(8, l(u) * 0.2) + "px",
+            background: r.color,
+            color: r.textColor
+          },
+          l(F).style
+        ],
+        role: "img",
+        "aria-label": l(F)["aria-label"] || r.alt || ((t = r.imgProps) == null ? void 0 : t.alt) || r.name || "用户头像",
+        "aria-busy": S.value && !v.value || void 0
+      }), [
+        S.value ? (d(), y("img", V({
+          key: p.value,
+          ref_key: "image",
+          ref: U
+        }, Y.value, {
+          onLoad: Z,
+          onError: _
+        }), null, 16)) : q("", !0),
+        S.value && !v.value && a.$slots.placeholder ? (d(), y("span", ke, [
+          B(a.$slots, "placeholder", {}, void 0, !0)
+        ])) : q("", !0),
+        S.value ? q("", !0) : (d(), y(ne, { key: 2 }, [
+          w.value && a.$slots.fallback ? (d(), y("span", ze, [
+            B(a.$slots, "fallback", {
+              error: P.value,
+              reload: W
+            }, void 0, !0)
+          ])) : a.$slots.icon || r.icon ? (d(), y("span", {
+            key: 1,
+            class: "hys-ui-avatar-icon",
+            style: ce({
+              width: l(u) * 0.5 + "px",
+              height: l(u) * 0.5 + "px"
+            })
+          }, [
+            B(a.$slots, "icon", {}, () => [
+              (d(), G(ve(r.icon && de(r.icon)), {
+                size: l(u) * 0.5
+              }, null, 8, ["size"]))
+            ], !0)
+          ], 4)) : a.$slots.default || N.value ? (d(), y("span", {
+            key: 2,
+            ref_key: "text",
+            ref: i,
+            class: "hys-ui-avatar-text"
+          }, [
+            B(a.$slots, "default", {}, () => [
+              fe(me(N.value), 1)
+            ], !0)
+          ], 512)) : (d(), G(l(ye), {
+            key: 3,
+            size: l(u) * 0.5,
+            "stroke-width": 1.8,
+            "aria-hidden": "true"
+          }, null, 8, ["size"]))
+        ], 64))
+      ], 16, be);
+    };
+  }
+});
 export {
-  f as default
+  Ee as default
 };

package/dist/components/HysAvatarGroup/HysAvatarGroup.vue.js

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

package/dist/components/HysAvatarGroup/HysAvatarGroup2.vue.js

@@ -0,0 +1,256 @@
+import q from "../../motion/PopupMotion.js";
+import { defineComponent as E, ref as y, useId as J, provide as L, computed as T, watch as b, onUpdated as Q, nextTick as M, onDeactivated as W, onBeforeUnmount as X, h as l, Teleport as Y, mergeProps as Z, Fragment as H, cloneVNode as ee, Comment as ae, Text as te } from "vue";
+import z from "../HysAvatar/HysAvatar.vue.js";
+import { useHysRootAttrs as ne } from "../../config.js";
+import { avatarGroupKey as oe } from "../../composables/avatar.js";
+import { useFloating as re } from "../../composables/useFloating.js";
+function _(e) {
+  return e.flatMap(
+    (c) => c.type === H ? _(c.children || []) : c.type === ae || c.type === te && !String(c.children).trim() ? [] : [c]
+  );
+}
+const fe = E({
+  name: "HysAvatarGroup",
+  inheritAttrs: !1,
+  props: {
+    popupTransition: String,
+    popupTransitionDuration: Number,
+    options: Array,
+    size: [Number, String, Object],
+    shape: String,
+    gap: { type: Number, default: -10 },
+    maxCount: Number,
+    vertical: Boolean,
+    bordered: { type: Boolean, default: !0 },
+    maxStyle: Object,
+    maxClass: String,
+    placement: { type: String, default: "top-start" },
+    trigger: {
+      type: String,
+      default: "hover"
+    },
+    showOverflow: { type: Boolean, default: !0 },
+    expandOnHover: Boolean
+  },
+  emits: {
+    visibleChange: (e) => !0,
+    overflowClick: (e, c) => !0
+  },
+  slots: Object,
+  setup(e, { attrs: c, slots: u, emit: C, expose: G }) {
+    const w = y(), m = y(), g = y(), f = y(!1), S = ne(), F = "hys-avatar-group-" + J();
+    L(oe, {
+      size: T(() => e.size),
+      shape: T(() => e.shape),
+      bordered: T(() => e.bordered)
+    });
+    const n = re(m, g, {
+      get placement() {
+        return e.placement;
+      }
+    });
+    let k;
+    function s() {
+      clearTimeout(k), k = void 0;
+    }
+    function j() {
+      s(), e.trigger === "hover" && !n.restoringFocus.value && n.show();
+    }
+    function O() {
+      s(), e.trigger === "hover" && (k = setTimeout(() => n.close(), 80));
+    }
+    function I() {
+      s(), e.trigger !== "click" && !n.restoringFocus.value && n.show();
+    }
+    function N(a) {
+      var t, r;
+      a.relatedTarget instanceof Node && ((t = w.value) != null && t.contains(a.relatedTarget) || (r = g.value) != null && r.contains(a.relatedTarget)) || (s(), n.close());
+    }
+    function d() {
+      s(), n.close(!1, !0), f.value = !1;
+    }
+    function K() {
+      var a;
+      return e.options ? e.options.map((t, r) => ({
+        key: t.key ?? r,
+        option: t,
+        node: u.avatar ? l(H, null, u.avatar({ option: t, index: r })) : l(z, t)
+      })) : _(((a = u.default) == null ? void 0 : a.call(u)) ?? []).map((t, r) => ({
+        key: typeof t.key == "string" || typeof t.key == "number" ? t.key : r,
+        node: t
+      }));
+    }
+    function P(a) {
+      const t = Number.isFinite(e.gap) ? e.gap : -10, r = e.expandOnHover && f.value ? Math.max(0, t) : t;
+      return {
+        ...e.vertical ? { marginTop: a ? r + "px" : void 0 } : { marginInlineStart: a ? r + "px" : void 0 },
+        zIndex: a + 1
+      };
+    }
+    const R = (a) => {
+      var t, r, i, p;
+      return ((t = a.option) == null ? void 0 : t.name) || ((r = a.option) == null ? void 0 : r.alt) || ((i = a.node.props) == null ? void 0 : i.name) || ((p = a.node.props) == null ? void 0 : p.alt) || "成员";
+    };
+    function A(a, t, r = !1) {
+      const i = ee(a.node);
+      return r && (i.ref = null), i.key = t, i;
+    }
+    const U = Symbol("hys-avatar-overflow");
+    async function h() {
+      var a;
+      s(), (a = m.value) != null && a.isConnected && await n.show();
+    }
+    function x() {
+      s(), n.close();
+    }
+    return G({ open: h, close: x }), b(n.open, (a) => C("visibleChange", a)), b(() => [e.maxCount, e.showOverflow, e.trigger], d), b(
+      () => e.placement,
+      () => {
+        n.open.value && n.update();
+      }
+    ), Q(() => {
+      var a;
+      n.open.value && !((a = m.value) != null && a.isConnected) && d();
+    }), b(
+      () => [e.options, e.size, e.shape],
+      () => void M(() => {
+        n.open.value && n.update();
+      }),
+      { deep: !0 }
+    ), W(d), X(d), {
+      open: h,
+      close: x,
+      renderGroup: () => {
+        var D;
+        const a = K(), t = e.maxCount === void 0 || !Number.isFinite(e.maxCount) ? a.length : Math.max(0, Math.floor(e.maxCount)), r = a.slice(0, t), i = a.slice(t), p = i.flatMap(
+          (o) => o.option ? [o.option] : []
+        ), B = r.map(
+          (o, v) => l(
+            "span",
+            {
+              class: "hys-ui-avatar-group-item",
+              style: P(v),
+              key: o.key
+            },
+            [A(o, o.key)]
+          )
+        );
+        i.length && e.showOverflow && B.push(
+          l(
+            "span",
+            {
+              class: "hys-ui-avatar-group-item",
+              style: P(r.length),
+              key: U
+            },
+            [
+              l(
+                "button",
+                {
+                  ref: m,
+                  type: "button",
+                  class: "hys-ui-avatar-group-more",
+                  "aria-label": `查看其余 ${i.length} 位成员`,
+                  "aria-expanded": n.open.value,
+                  "aria-controls": n.open.value ? F : void 0,
+                  onPointerenter: j,
+                  onPointerleave: O,
+                  onFocus: I,
+                  onBlur: N,
+                  onClick: (o) => {
+                    s(), C("overflowClick", i.length, o), e.trigger === "click" ? n.toggle() : h();
+                  },
+                  onKeydown: async (o) => {
+                    var v;
+                    o.key === "ArrowDown" && (o.preventDefault(), await h(), await M(), (v = g.value) == null || v.focus());
+                  }
+                },
+                [
+                  l(
+                    z,
+                    {
+                      class: e.maxClass,
+                      style: e.maxStyle,
+                      "aria-hidden": "true"
+                    },
+                    () => {
+                      var o;
+                      return ((o = u.overflow) == null ? void 0 : o.call(u, {
+                        count: i.length,
+                        options: p
+                      })) ?? "+" + i.length;
+                    }
+                  )
+                ]
+              )
+            ]
+          )
+        );
+        const V = l(Y, { to: "body" }, [l(q, { popupTransition: e.popupTransition, popupTransitionDuration: e.popupTransitionDuration, placement: n.placement.value }, { default: () => {
+          var o;
+          return n.open.value && i.length && e.showOverflow ? l(
+            "div",
+            {
+              ...S.value,
+              id: F,
+              ref: g,
+              role: "group",
+              "aria-label": "其余成员",
+              tabindex: -1,
+              class: "hys-ui-avatar-group-popover",
+              style: n.style.value,
+              onPointerenter: s,
+              onPointerleave: O,
+              onFocusin: s,
+              onFocusout: N
+            },
+            ((o = u.content) == null ? void 0 : o.call(u, {
+              options: p,
+              close: x
+            })) ?? i.map(
+              (v, $) => l(
+                "div",
+                { class: "hys-ui-avatar-group-person", key: v.key },
+                [
+                  A(v, "popup-" + $, !0),
+                  l(
+                    "span",
+                    { class: "hys-ui-avatar-group-name" },
+                    String(R(v))
+                  )
+                ]
+              )
+            )
+          ) : null;
+        } })]);
+        return l(
+          "div",
+          Z(S.value, c, {
+            ref: w,
+            role: "group",
+            "aria-label": c["aria-label"] ?? "头像组",
+            class: [
+              "hys-ui-avatar-group",
+              { "hys-ui-avatar-group-vertical": e.vertical }
+            ],
+            style: c.style,
+            onPointerenter: () => f.value = !0,
+            onPointerleave: () => f.value = !1,
+            onFocusin: () => f.value = !0,
+            onFocusout: (o) => {
+              var v;
+              o.relatedTarget instanceof Node && ((v = w.value) != null && v.contains(o.relatedTarget)) || (f.value = !1);
+            }
+          }),
+          [...B, ...a.length ? [] : ((D = u.empty) == null ? void 0 : D.call(u)) ?? [], V]
+        );
+      }
+    };
+  },
+  render() {
+    return this.renderGroup();
+  }
+});
+export {
+  fe as default
+};

package/dist/components/HysBadge/HysBadge.vue.js

@@ -1,7 +1,7 @@
 import o from "./HysBadge2.vue.js";
 /* empty css              */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-743d37a3"]]);
+const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-12ef89af"]]);
 export {
-  p as default
+  e as default
 };