hys-ui 0.2.0 → 0.3.0

package/dist/internal/PopupReference.js

@@ -0,0 +1,39 @@
+import { defineComponent as u, isVNode as g, Text as l, Comment as s, h as b, Fragment as f, cloneVNode as x } from "vue";
+const m = (n) => n.flatMap(
+  (e) => e.type === f ? m(e.children) : e.type === s || e.type === l && !String(e.children).trim() ? [] : [e]
+), k = u({
+  name: "HysPopupReference",
+  inheritAttrs: !1,
+  props: { id: String, open: Boolean, kind: String },
+  emits: ["element"],
+  setup(n, { slots: e, emit: h }) {
+    const y = (t) => {
+      const r = (t == null ? void 0 : t.$el) ?? t;
+      h("element", r instanceof HTMLElement ? r : void 0);
+    };
+    return () => {
+      var a, p, d, c;
+      const t = ((a = e.default) == null ? void 0 : a.call(e)) ?? [], r = m(t), i = r[0];
+      if (r.length !== 1 || !g(i) || i.type === l || i.type === s)
+        return b(f, null, t);
+      const o = (p = i.props) == null ? void 0 : p["aria-describedby"];
+      return x(
+        i,
+        {
+          ref: y,
+          ...n.kind === "tooltip" ? {
+            "aria-describedby": n.open ? [o, n.id].filter(Boolean).join(" ") : o
+          } : {
+            "aria-controls": n.open ? n.id : (d = i.props) == null ? void 0 : d["aria-controls"],
+            "aria-expanded": n.open,
+            "aria-haspopup": ((c = i.props) == null ? void 0 : c["aria-haspopup"]) ?? "dialog"
+          }
+        },
+        !0
+      );
+    };
+  }
+});
+export {
+  k as default
+};

package/dist/internal/PopupSurfacePanel.vue.js

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

package/dist/internal/PopupSurfacePanel2.vue.js

@@ -0,0 +1,92 @@
+import { defineComponent as m, provide as y, computed as p, openBlock as i, createBlock as b, Teleport as k, createVNode as h, unref as r, withCtx as w, withDirectives as P, createElementBlock as o, mergeProps as g, normalizeStyle as s, createCommentVNode as l, createElementVNode as E, normalizeClass as L, renderSlot as c, normalizeProps as d, guardReactiveProps as f, createTextVNode as S, toDisplayString as C, vShow as F } from "vue";
+import I from "../motion/PopupMotion.js";
+import { useHysRootAttrs as T } from "../config.js";
+import { overlayOwnerKey as N } from "../composables/overlayManager.js";
+const V = ["id", "role", "aria-label", "aria-labelledby", "data-side", "data-placement"], $ = ["id"], A = /* @__PURE__ */ m({
+  __name: "PopupSurfacePanel",
+  props: {
+    surface: {},
+    options: {},
+    kind: {},
+    title: {}
+  },
+  setup(e) {
+    const u = e;
+    y(
+      N,
+      p(() => u.surface.active.value && u.surface.open.value)
+    );
+    const v = T();
+    return (n, a) => e.surface.active.value ? (i(), b(k, {
+      key: 0,
+      to: e.surface.teleportTo.value,
+      disabled: e.options.appendTo === !1
+    }, [
+      h(r(I), {
+        "popup-transition": e.options.popupTransition,
+        "popup-transition-duration": e.options.popupTransitionDuration,
+        placement: e.surface.placement.value,
+        "ignore-owner": "",
+        onEntered: e.surface.afterEnter,
+        onLeft: e.surface.afterLeave,
+        onInactive: e.surface.inactive
+      }, {
+        default: w(() => [
+          e.surface.mounted.value ? P((i(), o("div", g({
+            key: 0,
+            id: e.surface.id,
+            ref: (t) => e.surface.panel.value = t
+          }, r(v), {
+            class: ["hys-ui-popup-surface-panel", [
+              e.kind === "tooltip" ? "hys-ui-tooltip-bubble hys-ui-floating-tooltip" : "hys-ui-popover-panel hys-ui-floating-surface",
+              e.options.overlayClass,
+              { "hys-ui-popup-enterable": e.options.enterable !== !1 }
+            ]],
+            style: e.surface.style.value,
+            role: e.kind === "tooltip" ? "tooltip" : "dialog",
+            "aria-label": e.options.ariaLabel || (e.kind === "popover" ? e.title || "浮层" : void 0),
+            "aria-labelledby": e.kind === "popover" && !e.options.ariaLabel && (e.title || n.$slots.title) ? e.surface.titleId : void 0,
+            "data-side": e.surface.placement.value.split("-")[0],
+            "data-placement": e.surface.placement.value,
+            onPointerenter: a[0] || (a[0] = //@ts-ignore
+            (...t) => e.surface.panelEnter && e.surface.panelEnter(...t)),
+            onPointerleave: a[1] || (a[1] = //@ts-ignore
+            (...t) => e.surface.panelLeave && e.surface.panelLeave(...t)),
+            onFocusin: a[2] || (a[2] = //@ts-ignore
+            (...t) => e.surface.panelFocusIn && e.surface.panelFocusIn(...t)),
+            onFocusout: a[3] || (a[3] = //@ts-ignore
+            (...t) => e.surface.panelFocusOut && e.surface.panelFocusOut(...t))
+          }), [
+            e.options.showArrow ? (i(), o("span", {
+              key: 0,
+              class: "hys-ui-popup-arrow",
+              style: s(e.surface.arrowStyle.value),
+              "aria-hidden": "true"
+            }, null, 4)) : l("", !0),
+            E("div", {
+              class: L(["hys-ui-popup-surface-content", e.options.contentClass]),
+              style: s(e.surface.contentStyle.value)
+            }, [
+              e.kind === "popover" && (e.title || n.$slots.title) ? (i(), o("div", {
+                key: 0,
+                id: e.surface.titleId,
+                class: "hys-ui-popup-surface-title"
+              }, [
+                c(n.$slots, "title", d(f(e.surface.scope.value)), () => [
+                  S(C(e.title), 1)
+                ], !0)
+              ], 8, $)) : l("", !0),
+              c(n.$slots, "default", d(f(e.surface.scope.value)), void 0, !0)
+            ], 6)
+          ], 16, V)), [
+            [F, e.surface.open.value]
+          ]) : l("", !0)
+        ]),
+        _: 3
+      }, 8, ["popup-transition", "popup-transition-duration", "placement", "onEntered", "onLeft", "onInactive"])
+    ], 8, ["to", "disabled"])) : l("", !0);
+  }
+});
+export {
+  A as default
+};

package/dist/motion/PopupMotion.js

@@ -0,0 +1,105 @@
+import { defineComponent as T, ref as x, inject as B, computed as p, watch as W, onMounted as C, onActivated as D, onDeactivated as O, onBeforeUnmount as k, h as H, Transition as N } from "vue";
+import { useHysRootAttrs as S } from "../config.js";
+import { overlayOwnerKey as j } from "../composables/overlayManager.js";
+const U = T({
+  name: "HysPopupMotion",
+  props: {
+    popupTransition: {
+      type: String,
+      default: void 0
+    },
+    popupTransitionDuration: { type: Number, default: void 0 },
+    placement: { type: String, default: "bottom-start" },
+    disabled: { type: Boolean, default: !1 },
+    ignoreOwner: { type: Boolean, default: !1 }
+  },
+  emits: ["inactive", "entered", "left"],
+  setup(i, { slots: A, emit: s }) {
+    var w;
+    const E = S(), l = x(!0), h = x(
+      typeof window < "u" && !!((w = window.matchMedia) != null && w.call(window, "(prefers-reduced-motion: reduce)").matches)
+    ), a = B(j, void 0);
+    let n, c = !1;
+    const v = p(() => i.popupTransition ?? "scale"), y = p(
+      () => Number.isFinite(i.popupTransitionDuration) ? Math.max(0, Math.min(2e3, i.popupTransitionDuration)) : 160
+    ), M = p(
+      () => l.value && (i.ignoreOwner || (a == null ? void 0 : a.value) !== !1)
+    ), L = p(
+      () => !i.disabled && v.value !== "none" && y.value > 0 && E.value["data-hys-motion"] !== "off" && !h.value
+    );
+    let o;
+    const d = /* @__PURE__ */ new WeakMap();
+    function f() {
+      h.value = !!(n != null && n.matches);
+    }
+    function m() {
+      var t;
+      c || (c = !0, n = (t = window.matchMedia) == null ? void 0 : t.call(window, "(prefers-reduced-motion: reduce)"), f(), n == null || n.addEventListener("change", f));
+    }
+    function g() {
+      c = !1, n == null || n.removeEventListener("change", f);
+    }
+    function u(t) {
+      const e = t, r = d.get(t);
+      r && (e.inert = r.inert, r.aria === null ? e.removeAttribute("aria-hidden") : e.setAttribute("aria-hidden", r.aria), e.style.pointerEvents = r.pointer, d.delete(t)), e.classList.add("hys-ui-popup-motion"), e.style.setProperty(
+        "--hys-ui-popup-duration",
+        y.value + "ms"
+      ), o = e, b(e);
+    }
+    function b(t) {
+      const e = i.placement;
+      t.style.setProperty(
+        "--hys-ui-popup-origin",
+        e.startsWith("top") ? "bottom center" : e.startsWith("left") ? "right center" : e.startsWith("right") ? "left center" : "top center"
+      ), t.style.setProperty(
+        "--hys-ui-popup-x",
+        e.startsWith("left") ? "6px" : e.startsWith("right") ? "-6px" : "0px"
+      ), t.style.setProperty(
+        "--hys-ui-popup-y",
+        e.startsWith("left") || e.startsWith("right") ? "0px" : e.startsWith("top") ? "6px" : "-6px"
+      );
+    }
+    function P(t) {
+      const e = t;
+      u(t), d.set(t, {
+        inert: e.inert,
+        aria: e.getAttribute("aria-hidden"),
+        pointer: e.style.pointerEvents
+      }), e.inert = !0, e.setAttribute("aria-hidden", "true"), e.style.pointerEvents = "none";
+    }
+    return W(
+      () => i.placement,
+      () => {
+        o != null && o.isConnected && b(o);
+      },
+      { flush: "post" }
+    ), C(m), D(() => {
+      l.value = !0, m();
+    }), O(() => {
+      l.value = !1, g(), s("inactive");
+    }), k(g), W(
+      () => a == null ? void 0 : a.value,
+      (t) => {
+        t === !1 && !i.ignoreOwner && s("inactive");
+      },
+      { flush: "sync" }
+    ), () => M.value ? H(
+      N,
+      {
+        name: "hys-ui-popup-" + v.value,
+        appear: !0,
+        css: L.value,
+        onAfterEnter: () => s("entered"),
+        onAfterLeave: () => s("left"),
+        onBeforeEnter: u,
+        onEnterCancelled: u,
+        onBeforeLeave: P,
+        onLeaveCancelled: u
+      },
+      A.default
+    ) : null;
+  }
+});
+export {
+  U as default
+};

package/dist/motion/popup.js

@@ -0,0 +1,10 @@
+function h(t) {
+  const i = t.getBoundingClientRect();
+  return {
+    width: t.offsetWidth || i.width,
+    height: t.offsetHeight || i.height
+  };
+}
+export {
+  h as popupSize
+};