hys-ui 0.5.0 → 0.7.0

package/dist/components/HysIcon/HysIcon.vue.js

@@ -0,0 +1,373 @@
+import { defineComponent as ke, defineAsyncComponent as we, useAttrs as Be, computed as i, ref as d, watch as k, onBeforeUnmount as Oe, onMounted as $e, openBlock as c, createBlock as A, unref as r, mergeProps as ee, withCtx as U, resolveDynamicComponent as Ie, createElementVNode as ae, createVNode as le, Transition as Se, createElementBlock as $, renderSlot as I, normalizeProps as S, guardReactiveProps as x, createCommentVNode as oe, Fragment as xe, renderList as Ce, normalizeStyle as Le, createTextVNode as je, toDisplayString as Ee } from "vue";
+import { useHysRootAttrs as Me } from "../../config.js";
+import { usePageVisibility as Pe } from "../../composables/usePageVisibility.js";
+import ze from "./IconGraphic/IconGraphic.vue.js";
+import Ae from "./IconReferenceGraphic/IconReferenceGraphic.vue.js";
+import De from "./IconTooltip/IconTooltip.vue.js";
+import { useIconConfig as Ne } from "./iconConfig.js";
+import { hysIconRegistry as te } from "./iconRegistry.js";
+import { iconAssetUrl as ie } from "./iconSafety.js";
+import { iconStyle as Ve, iconNumber as Re, iconLength as F } from "./iconStyle.js";
+import { useIconResource as H } from "./useIconResource.js";
+const Te = {
+  class: "hys-icon-box",
+  "aria-hidden": "true"
+}, Ue = { class: "hys-icon-orientation" }, Fe = { key: 1 }, He = ["data-position", "data-dot"], aa = /* @__PURE__ */ ke({
+  inheritAttrs: !1,
+  __name: "HysIcon",
+  props: {
+    name: {},
+    source: {},
+    variant: {},
+    registry: {},
+    status: {},
+    statusIcons: {},
+    fallback: { type: [String, Object, Boolean], default: void 0 },
+    loadingIcon: { type: [String, Object, Boolean], default: void 0 },
+    size: {},
+    width: {},
+    height: {},
+    fit: {},
+    color: {},
+    theme: {},
+    fill: {},
+    stroke: {},
+    strokeWidth: {},
+    gradient: {},
+    opacity: {},
+    background: {},
+    shape: {},
+    radius: {},
+    border: {},
+    padding: {},
+    gap: {},
+    shadow: {},
+    glow: {},
+    rotate: {},
+    flipX: { type: Boolean, default: void 0 },
+    flipY: { type: Boolean, default: void 0 },
+    align: {},
+    verticalAlign: {},
+    directional: { type: Boolean, default: void 0 },
+    animation: {},
+    animateOn: {},
+    animated: { type: Boolean, default: void 0 },
+    paused: { type: Boolean, default: void 0 },
+    duration: {},
+    speed: {},
+    animationDelay: {},
+    iterations: {},
+    easing: {},
+    morphTo: {},
+    animationStyle: {},
+    decorative: { type: Boolean, default: void 0 },
+    label: {},
+    clickable: { type: Boolean, default: void 0 },
+    href: {},
+    target: {},
+    rel: {},
+    disabled: { type: Boolean, default: void 0 },
+    readonly: { type: Boolean, default: void 0 },
+    active: { type: Boolean, default: void 0 },
+    selected: { type: Boolean, default: void 0 },
+    tooltip: {},
+    badge: { type: [Number, String, Boolean], default: void 0 },
+    badgePosition: {},
+    badgeMax: {},
+    secondary: {},
+    layers: {},
+    allowedOrigins: {},
+    picker: { type: Boolean, default: void 0 },
+    allowUpload: { type: Boolean, default: void 0 },
+    storageKey: {},
+    pickerLocale: {}
+  },
+  emits: ["update:name", "update:selected", "change", "statusChange", "load", "error", "click", "dblclick", "mouseenter", "mouseleave", "focus", "blur", "keydown"],
+  setup(ne, { expose: ue, emit: re }) {
+    const se = we(
+      () => import("./IconPickerPanel/IconPickerPanel.vue.js")
+    ), ve = ne, n = re, K = Ne(), W = Me(), C = Be(), e = i(() => ({
+      ...K.defaults.value,
+      ...Object.fromEntries(
+        Object.entries(ve).filter(([, a]) => a !== void 0)
+      )
+    })), f = i(() => e.value.registry ?? K.registry.value), m = d(e.value.name), D = d(), L = d(!1);
+    k(
+      () => e.value.name,
+      (a) => {
+        m.value = a;
+      }
+    );
+    const g = i(() => e.value.status ?? "default"), s = i(() => e.value.variant ?? "outline"), X = {
+      loading: "loader",
+      success: "success",
+      error: "error",
+      warning: "warning",
+      info: "info"
+    }, Y = i(() => {
+      const a = e.value.statusIcons, l = g.value;
+      return (a && Object.hasOwn(a, l) ? a[l] : void 0) ?? (Object.hasOwn(X, l) ? X[l] : void 0) ?? e.value.source ?? m.value;
+    }), N = () => e.value.allowedOrigins, o = H({
+      reference: () => Y.value,
+      registry: () => f.value,
+      variant: () => s.value,
+      allowedOrigins: N
+    }), de = H({
+      reference: () => o.error.value && e.value.fallback !== !1 ? e.value.fallback ?? "help" : void 0,
+      registry: () => f.value,
+      variant: () => s.value,
+      allowedOrigins: N
+    }), ce = H({
+      reference: () => o.loading.value && e.value.loadingIcon !== !1 ? e.value.loadingIcon ?? "loader" : void 0,
+      registry: () => f.value,
+      variant: () => s.value,
+      allowedOrigins: N
+    }), V = d(!1);
+    k(
+      [
+        Y,
+        s,
+        f,
+        () => f.value.revision.value,
+        () => e.value.fallback
+      ],
+      () => {
+        V.value = !1;
+      }
+    );
+    const y = i(() => {
+      if (o.source.value) return o.source.value;
+      if (o.loading.value && e.value.loadingIcon !== !1)
+        return ce.source.value ?? te.get("loader");
+      if (o.error.value && e.value.fallback !== !1)
+        return (V.value ? void 0 : de.source.value) ?? te.get("help");
+    }), v = i(() => ({
+      name: m.value,
+      variant: s.value,
+      status: g.value,
+      loading: o.loading.value || g.value === "loading",
+      source: o.source.value
+    })), p = i(() => e.value.href !== void 0), b = i(() => p.value || e.value.clickable), R = i(
+      () => e.value.href ? ie(e.value.href, void 0, !0) ?? ie(e.value.href) : void 0
+    ), h = i(
+      () => !!(e.value.disabled || e.value.readonly || p.value && !R.value)
+    ), w = i(
+      () => p.value ? "a" : e.value.clickable ? "button" : "span"
+    ), j = i(
+      () => {
+        var a;
+        return e.value.label ?? e.value.tooltip ?? (b.value || e.value.decorative === !1 ? [
+          ((a = o.record.value) == null ? void 0 : a.label) ?? m.value ?? "图标",
+          typeof e.value.badge == "number" ? e.value.badge + " 条通知" : ""
+        ].filter(Boolean).join("，") : void 0);
+      }
+    ), E = i(
+      () => e.value.animation ?? (g.value === "loading" || o.loading.value ? "loading" : "none")
+    ), B = i(() => e.value.animateOn ?? "always"), fe = Pe(), q = d(!1);
+    let u;
+    const M = () => {
+      q.value = !!(u != null && u.matches);
+    };
+    k([() => e.value.theme, L], ([a, l]) => {
+      u == null || u.removeEventListener("change", M), u = void 0, !(a !== "system" || !l || typeof window.matchMedia != "function") && (u = window.matchMedia("(prefers-color-scheme: dark)"), M(), u.addEventListener("change", M));
+    }), Oe(() => u == null ? void 0 : u.removeEventListener("change", M));
+    const G = i(() => ({
+      ...W.value,
+      "data-hys-theme": e.value.theme === "system" ? q.value ? "dark" : "blue" : e.value.theme ?? W.value["data-hys-theme"]
+    })), P = d(!1), z = d(!1), J = d(!1), Q = d(0), ge = i(
+      () => Ve(
+        e.value,
+        E.value,
+        P.value || !!e.value.paused || fe.value
+      )
+    ), pe = i(
+      () => {
+        var a;
+        return e.value.directional ?? ((a = o.record.value) == null ? void 0 : a.directional) ?? !1;
+      }
+    ), me = i(() => [
+      ...e.value.secondary ? [{ icon: e.value.secondary, size: "52%", x: "32%", y: "28%" }] : [],
+      ...e.value.layers ?? []
+    ]), T = i(() => {
+      const a = e.value.badge, l = Re(e.value.badgeMax, 99, 1, 9999);
+      return typeof a == "number" && a > l ? l + "+" : a === !0 ? "" : a;
+    });
+    function O() {
+      J.value = !0, z.value = P.value = !1, Q.value++;
+    }
+    function Z(a) {
+      m.value = a, n("update:name", a);
+    }
+    function ye(a) {
+      if (!b.value || h.value) {
+        h.value && a.preventDefault();
+        return;
+      }
+      B.value === "click" && O(), e.value.selected !== void 0 && n("update:selected", !e.value.selected), n("click", a);
+    }
+    function _(a) {
+      n("load", v.value, a);
+    }
+    function be(a) {
+      y.value === o.source.value ? o.fail(a) : V.value = !0;
+    }
+    return k([m, s, g], () => n("change", v.value)), k(g, (a, l) => {
+      n("statusChange", a, l), B.value === "state" && O();
+    }), k(
+      [() => o.source.value, L],
+      ([a, l]) => {
+        l && a && a.type !== "image" && _();
+      },
+      { flush: "post" }
+    ), k(
+      [() => o.error.value, L],
+      ([a, l]) => {
+        l && a && n("error", a, v.value);
+      },
+      { flush: "post" }
+    ), $e(() => {
+      L.value = !0, B.value === "state" && g.value !== "default" && O();
+    }), ue({
+      element: D,
+      focus: () => {
+        var a;
+        return (a = D.value) == null ? void 0 : a.focus();
+      },
+      select: Z,
+      reload: o.reload,
+      preload: (a) => f.value.preload(a, s.value, e.value.allowedOrigins),
+      play: O,
+      restart: O,
+      pause: () => {
+        P.value = !0;
+      },
+      resume: () => {
+        P.value = z.value = !1;
+      },
+      stop: () => {
+        z.value = !0;
+      }
+    }), (a, l) => e.value.picker ? (c(), A(r(se), ee({ key: 0 }, { ...G.value, ...r(C) }, {
+      name: m.value,
+      registry: f.value,
+      variant: s.value,
+      "allow-upload": e.value.allowUpload,
+      "allowed-origins": e.value.allowedOrigins,
+      "storage-key": e.value.storageKey,
+      locale: e.value.pickerLocale,
+      onSelect: Z
+    }), null, 16, ["name", "registry", "variant", "allow-upload", "allowed-origins", "storage-key", "locale"])) : (c(), A(De, {
+      key: 1,
+      text: e.value.tooltip
+    }, {
+      default: U(() => [
+        (c(), A(Ie(w.value), ee({
+          ref_key: "element",
+          ref: D
+        }, { ...G.value, ...r(C) }, {
+          class: "hys-ui-icon",
+          style: [ge.value, r(C).style],
+          type: w.value === "button" ? "button" : void 0,
+          disabled: w.value === "button" && !!e.value.disabled || void 0,
+          href: p.value && !h.value ? R.value : void 0,
+          tabindex: p.value && h.value ? e.value.readonly && !e.value.disabled && R.value ? 0 : -1 : r(C).tabindex,
+          target: p.value ? e.value.target : void 0,
+          rel: p.value ? e.value.rel ?? (e.value.target === "_blank" ? "noopener noreferrer" : void 0) : void 0,
+          role: w.value === "span" && j.value && !e.value.decorative && !a.$slots.default ? "img" : p.value && h.value ? "link" : void 0,
+          "aria-hidden": !b.value && !a.$slots.default && (e.value.decorative || !j.value) || void 0,
+          "aria-label": b.value || !e.value.decorative ? j.value : void 0,
+          "aria-disabled": b.value && h.value || void 0,
+          "aria-pressed": w.value === "button" ? e.value.selected : void 0,
+          "aria-busy": v.value.loading && !!(b.value || j.value) || void 0,
+          "data-status": g.value,
+          "data-active": e.value.active || e.value.selected || void 0,
+          "data-align": e.value.align,
+          "data-directional": pe.value || void 0,
+          "data-animation": E.value,
+          "data-trigger": B.value,
+          "data-played": J.value || void 0,
+          "data-off": z.value || e.value.animated === !1 || void 0,
+          onClick: ye,
+          onDblclick: l[1] || (l[1] = (t) => b.value && !h.value && n("dblclick", t)),
+          onMouseenter: l[2] || (l[2] = (t) => n("mouseenter", t)),
+          onMouseleave: l[3] || (l[3] = (t) => n("mouseleave", t)),
+          onFocus: l[4] || (l[4] = (t) => n("focus", t)),
+          onBlur: l[5] || (l[5] = (t) => n("blur", t)),
+          onKeydown: l[6] || (l[6] = (t) => n("keydown", t))
+        }), {
+          default: U(() => [
+            ae("span", Te, [
+              ae("span", Ue, [
+                le(Se, {
+                  name: "hys-icon-change",
+                  mode: "out-in",
+                  css: B.value === "state" && e.value.animated !== !1
+                }, {
+                  default: U(() => [
+                    (c(), $("span", {
+                      key: Q.value,
+                      class: "hys-icon-motion"
+                    }, [
+                      r(o).loading.value && a.$slots.loading ? I(a.$slots, "loading", S(x(v.value)), void 0, void 0, 0) : r(o).error.value && a.$slots.fallback ? I(a.$slots, "fallback", S(x(v.value)), void 0, void 0, 1) : I(a.$slots, "icon", S(x(v.value)), () => [
+                        y.value ? (c(), A(ze, {
+                          key: y.value.type === "image" ? y.value.src : y.value.type,
+                          source: y.value,
+                          variant: s.value,
+                          fill: e.value.fill,
+                          stroke: e.value.stroke,
+                          "stroke-width": e.value.strokeWidth,
+                          fit: e.value.fit,
+                          gradient: e.value.gradient,
+                          "allowed-origins": e.value.allowedOrigins,
+                          "morph-to": E.value === "morph" ? e.value.morphTo : void 0,
+                          draw: E.value === "draw",
+                          onLoad: l[0] || (l[0] = (t) => y.value === r(o).source.value && _(t)),
+                          onError: be
+                        }, null, 8, ["source", "variant", "fill", "stroke", "stroke-width", "fit", "gradient", "allowed-origins", "morph-to", "draw"])) : r(o).error.value && e.value.fallback !== !1 ? (c(), $("span", Fe, "?")) : oe("", !0)
+                      ], void 0, 2)
+                    ]))
+                  ]),
+                  _: 3
+                }, 8, ["css"]),
+                (c(!0), $(xe, null, Ce(me.value, (t, he) => (c(), $("span", {
+                  key: he,
+                  class: "hys-icon-layer",
+                  style: Le({
+                    color: t.color,
+                    "--hys-icon-layer-size": r(F)(t.size) ?? "65%",
+                    "--hys-icon-layer-x": r(F)(t.x) ?? "0px",
+                    "--hys-icon-layer-y": r(F)(t.y) ?? "0px",
+                    "--hys-icon-layer-angle": (t.rotate ?? 0) + "deg"
+                  })
+                }, [
+                  le(Ae, {
+                    icon: t.icon,
+                    registry: f.value,
+                    variant: s.value,
+                    "allowed-origins": e.value.allowedOrigins
+                  }, null, 8, ["icon", "registry", "variant", "allowed-origins"])
+                ], 4))), 128))
+              ]),
+              a.$slots.badge || T.value !== void 0 && T.value !== !1 ? (c(), $("span", {
+                key: 0,
+                class: "hys-icon-badge",
+                "data-position": e.value.badgePosition ?? "top-end",
+                "data-dot": e.value.badge === !0 && !a.$slots.badge || void 0
+              }, [
+                I(a.$slots, "badge", S(x(v.value)), () => [
+                  je(Ee(T.value), 1)
+                ])
+              ], 8, He)) : oe("", !0)
+            ]),
+            I(a.$slots, "default", S(x(v.value)))
+          ]),
+          _: 3
+        }, 16, ["style", "type", "disabled", "href", "tabindex", "target", "rel", "role", "aria-hidden", "aria-label", "aria-disabled", "aria-pressed", "aria-busy", "data-status", "data-active", "data-align", "data-directional", "data-animation", "data-trigger", "data-played", "data-off"]))
+      ]),
+      _: 3
+    }, 8, ["text"]));
+  }
+});
+export {
+  aa as default
+};

package/dist/components/HysIcon/HysIcon2.vue.js

@@ -0,0 +1,5 @@
+import o from "./HysIcon.vue.js";
+/* empty css         */
+export {
+  o as default
+};

package/dist/components/HysIcon/IconGraphic/IconGraphic.vue.js

@@ -0,0 +1,147 @@
+import { defineComponent as B, computed as b, h as r } from "vue";
+import { useSvgInstanceId as I } from "../../../composables/useSvgInstanceId.js";
+import { sanitizeIconNodes as M, iconPaint as v, iconViewBox as S, iconAssetUrl as x, iconSrcset as T } from "../iconSafety.js";
+const j = /* @__PURE__ */ new Set([
+  "path",
+  "circle",
+  "ellipse",
+  "rect",
+  "line",
+  "polyline",
+  "polygon"
+]), O = {
+  bold: 2.8,
+  thin: 1,
+  round: 2.1
+}, q = B({
+  name: "HysIconGraphic",
+  props: {
+    source: { type: Object, required: !0 },
+    variant: String,
+    fill: String,
+    stroke: String,
+    strokeWidth: Number,
+    fit: String,
+    gradient: Array,
+    allowedOrigins: Array,
+    morphTo: String,
+    draw: Boolean
+  },
+  emits: { load: (e) => !0, error: (e) => !0 },
+  setup(e, { emit: g }) {
+    const m = I("icon"), A = b(
+      () => e.source.type === "svg" ? M(e.source.nodes, m.value + "-node-") : []
+    ), y = b(
+      () => e.fit === "fill" ? "none" : e.fit === "cover" ? "xMidYMid slice" : "xMidYMid meet"
+    );
+    function k(t, n, a) {
+      var s;
+      const c = {
+        ...t.attrs,
+        key: n,
+        ...e.draw && j.has(t.tag) ? { pathLength: 1, "data-hys-icon-draw": "" } : {}
+      };
+      let o;
+      return a.available && t.tag === "path" && typeof ((s = t.attrs) == null ? void 0 : s.d) == "string" && (o = { "--hys-icon-morph-path": 'path("' + e.morphTo + '")' }, a.available = !1), r(
+        t.tag,
+        { ...c, style: o, "data-hys-icon-morph-path": o ? "" : void 0 },
+        (t.children ?? []).map(
+          (d, h) => k(d, h, a)
+        )
+      );
+    }
+    return () => {
+      var w;
+      const t = e.source, n = {
+        class: "hys-icon-graphic",
+        "aria-hidden": "true",
+        focusable: "false"
+      }, a = ((w = e.gradient) == null ? void 0 : w.map((i) => v(i)).filter((i) => i !== void 0)) ?? [], c = m.value + "-tone", o = a.length ? "url(#" + c + ")" : void 0, s = e.stroke && v(e.stroke) || o || "currentColor", d = e.fill && v(e.fill) || "none", h = e.strokeWidth ?? (e.variant && Object.hasOwn(O, e.variant) ? O[e.variant] : 1.8);
+      if (t.type === "svg") {
+        const i = {
+          available: !!e.morphTo && /^[MmLlHhVvCcSsQqTtAaZz0-9+eE.,\s-]{1,16000}$/.test(e.morphTo)
+        }, l = a.length ? r("defs", [
+          r(
+            "linearGradient",
+            { id: c, x2: "1", y2: "1" },
+            a.map(
+              (u, f) => r("stop", {
+                key: f,
+                offset: a.length === 1 ? 0 : f / (a.length - 1),
+                "stop-color": u
+              })
+            )
+          )
+        ]) : null;
+        return r(
+          "svg",
+          {
+            ...n,
+            viewBox: S(t.viewBox),
+            preserveAspectRatio: y.value,
+            fill: d,
+            stroke: s,
+            "stroke-width": h,
+            "stroke-linecap": e.variant === "sharp" ? "square" : "round",
+            "stroke-linejoin": e.variant === "sharp" ? "miter" : "round"
+          },
+          [
+            l,
+            ...A.value.map((u, f) => k(u, f, i))
+          ]
+        );
+      }
+      if (t.type === "sprite") {
+        const i = x(t.href, e.allowedOrigins, !0);
+        return r(
+          "svg",
+          {
+            ...n,
+            viewBox: S(t.viewBox),
+            preserveAspectRatio: y.value,
+            fill: e.fill ?? "currentColor",
+            stroke: e.stroke
+          },
+          i ? [r("use", { href: i })] : []
+        );
+      }
+      if (t.type === "image") {
+        const i = x(t.src, e.allowedOrigins);
+        return r("img", {
+          ...n,
+          alt: "",
+          src: i,
+          srcset: T(t.srcset, e.allowedOrigins),
+          referrerpolicy: "no-referrer",
+          decoding: "async",
+          draggable: !1,
+          style: { objectFit: e.fit ?? "contain" },
+          onLoad: (l) => g("load", l),
+          onError: (l) => g("error", l)
+        });
+      }
+      return t.type === "component" ? r(t.component, {
+        ...t.props,
+        ...n,
+        ...e.fill ? { fill: d } : {},
+        ...e.stroke ? { stroke: s } : {},
+        ...e.strokeWidth !== void 0 || ["bold", "thin"].includes(e.variant ?? "") ? { "stroke-width": h } : {}
+      }) : t.type === "font" ? r(
+        "span",
+        {
+          ...n,
+          class: [n.class, "hys-icon-character", t.className],
+          style: { fontFamily: t.family }
+        },
+        t.glyph
+      ) : r(
+        "span",
+        { ...n, class: [n.class, "hys-icon-character"] },
+        t.text
+      );
+    };
+  }
+});
+export {
+  q as default
+};

package/dist/components/HysIcon/IconGraphic/IconGraphic2.vue.js

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

package/dist/components/HysIcon/IconPickerPanel/IconPickerPanel.vue.js

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