hisonvue 1.0.0

package/dist/HPopup-Brp1FVpm.mjs

@@ -0,0 +1,431 @@
+import { defineComponent as Ie, ref as o, computed as d, onMounted as Re, onBeforeUnmount as Me, watch as n, unref as F, nextTick as Z, resolveComponent as Ee, createElementBlock as ne, openBlock as se, normalizeClass as B, createCommentVNode as G, createElementVNode as V, normalizeStyle as J, renderSlot as W, createVNode as He, createSlots as Ve, withCtx as ae } from "vue";
+import { S as We, i as c, g as De, u as qe, j as Xe, t as ie, e as xe, b as re, h as z, r as Ue, c as Ye, d as je } from "./index-DUh7pai4.mjs";
+import { a as Fe, r as Ze } from "./scrollManager-BGnq4wyt.mjs";
+import { _ as Ge } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const Je = {
+  /**
+   * Unique identifier for the popup instance.
+   * - You can later retrieve its methods via `hison.component.getPopup(id)`
+   * - Duplicate `id` values will throw an error at mount time
+   */
+  id: { type: String, required: !1 },
+  /**
+   * Custom class applied to the popup wrapper scope.
+   * - Accepts string/array/object (Vue class binding formats)
+   * - You can use responsive tokens such as `hison-col-*`, `hison-size-*`, `hison-color-*`
+   * - Processed internally to apply device-specific classes
+   */
+  class: {
+    type: [String, Array, Object],
+    required: !1
+  },
+  /**
+   * Inline style(s) for the popup **dialog element** (not the overlay nor the fixed wrapper).
+   * - Accepts string, object, or array of objects (Vue style binding formats)
+   * - Note: inline width/height here override `width`/`height` props
+   */
+  style: {
+    type: [String, Object, Array],
+    required: !1
+  },
+  /**
+   * Initial visibility of the popup.
+   * - Runtime visibility is controlled **only** via methods (`open/close/toggle/setVisible`)
+   * - Default: `false`
+   */
+  visible: { type: Boolean, default: !1 },
+  /**
+   * Whether the popup has the thick border/topbar style.
+   * - When `false`, the topbar background becomes “empty”
+   * - Default: `true`
+   */
+  border: { type: Boolean, default: !0 },
+  /**
+   * Stacking order for this popup **wrapper** (fixed container).
+   * - Applied to `.hison-popup-wrapper`; the overlay uses `zIndex - 1`
+   * - Default: `1200`
+   */
+  zIndex: { type: Number, default: 1200 },
+  /**
+   * On-screen position of the **fixed wrapper** (where the popup is anchored).
+   * - Tokens: 'top-left' | 'top-center' | 'top-right' |
+   *           'middle-left' | 'middle-center' | 'middle-right' |
+   *           'bottom-left' | 'bottom-center' | 'bottom-right'
+   * - Default: `middle-center`
+   * - Note: Ignored when `left`/`top` are provided (absolute mode)
+   */
+  position: {
+    type: String,
+    default: c.middleCenter,
+    validator: (t) => We.includes(t)
+  },
+  /**
+   * Absolute X position in pixels for the wrapper.
+   * - If either `left` or `top` is set, popup switches to **absolute mode**
+   * - The missing axis defaults to `0`
+   * - Overrides `popupPosition`
+   */
+  left: { type: Number, default: null },
+  /**
+   * Absolute Y position in pixels for the wrapper.
+   * - If either `left` or `top` is set, popup switches to **absolute mode**
+   * - The missing axis defaults to `0`
+   * - Overrides `popupPosition`
+   */
+  top: { type: Number, default: null },
+  /**
+   * Dialog width in pixels.
+   * - If omitted, width is determined by content and/or responsive classes
+   * - Inline `style.width` (if provided) takes precedence over this prop
+   */
+  width: { type: Number, default: null },
+  /**
+   * Dialog height in pixels.
+   * - If omitted, height is determined by content
+   * - Inline `style.height` (if provided) takes precedence over this prop
+   */
+  height: { type: Number, default: null },
+  /**
+   * Enables dragging the popup by its topbar.
+   * - When `false`, pointer down on topbar does not move the popup
+   * - Default: `true`
+   */
+  draggable: { type: Boolean, default: !0 },
+  /**
+   * Whether the overlay (backdrop) is rendered at all.
+   * - Default: `true`
+   */
+  showOverlay: { type: Boolean, default: !0 },
+  /**
+   * Whether clicking the overlay closes the popup.
+   * - Default: `true`
+   */
+  closeClickOverlay: { type: Boolean, default: !0 },
+  /**
+   * Styles applied to the overlay element.
+   * - Accepts string/object/array; merged with an internal `{ zIndex: (zIndex - 1) }`
+   */
+  overlayStyle: {
+    type: [String, Object, Array],
+    required: !1
+  },
+  /**
+   * Locks page scroll while the popup is open (reference-counted across nested overlays).
+   * - Default: `true`
+   */
+  scrollLock: { type: Boolean, default: !0 },
+  /**
+   * Optional enter animation class for the dialog.
+   * - Default: internal `'hison-popup-enter'` if not provided
+   */
+  enterAnimationClass: { type: String, required: !1 },
+  /**
+   * Optional leave animation class for the dialog.
+   * - Default: internal `'hison-popup-leave'` if not provided
+   */
+  leaveAnimationClass: { type: String, required: !1 }
+}, Ke = Ie({
+  name: "HPopup",
+  props: Je,
+  inheritAttrs: !1,
+  emits: ["mounted", "responsive-change", "open", "close"],
+  setup(t, { emit: v, slots: ue }) {
+    const i = t.id || De(), I = `hpopup:${i}`, D = qe(), T = o(null), p = o(null), s = o(t.visible), ce = o(!0), y = o(t.zIndex ?? 1100), O = o(t.position), r = o(t.left ?? null), u = o(t.top ?? null), b = o(t.width ?? null), h = o(t.height ?? null), A = o(t.showOverlay), P = o(t.closeClickOverlay), g = o(t.scrollLock), f = o(t.enterAnimationClass || "hison-popup-enter"), m = o(t.leaveAnimationClass || "hison-popup-leave"), ve = d(() => s.value ? "" : "hison-display-none"), R = o([]), q = () => {
+      R.value = xe(ie(t.class) || "", D.value), re(R.value, "size", z.componentStyle.size), re(R.value, "color", "primary");
+    }, de = d(() => [
+      ...Xe(ie(t.class) || "", "color")
+    ]), pe = d(() => s.value && A.value), fe = () => {
+      P.value && k();
+    }, me = d(() => {
+      const e = { zIndex: y.value, position: "fixed" };
+      if (r.value != null || u.value != null)
+        return e.left = `${r.value ?? 0}px`, e.top = `${u.value ?? 0}px`, e;
+      switch (e.left = "", e.right = "", e.top = "", e.bottom = "", e.transform = "none", O.value) {
+        case c.topLeft:
+          e.left = "0", e.top = "0";
+          break;
+        case c.topCenter:
+          e.left = "50%", e.top = "0", e.transform = "translateX(-50%)";
+          break;
+        case c.topRight:
+          e.right = "0", e.top = "0";
+          break;
+        case c.middleLeft:
+          e.left = "0", e.top = "50%", e.transform = "translateY(-50%)";
+          break;
+        case c.middleCenter:
+          e.left = "50%", e.top = "50%", e.transform = "translate(-50%, -50%)";
+          break;
+        case c.middleRight:
+          e.right = "0", e.top = "50%", e.transform = "translateY(-50%)";
+          break;
+        case c.bottomLeft:
+          e.left = "0", e.bottom = "0";
+          break;
+        case c.bottomCenter:
+          e.left = "50%", e.bottom = "0", e.transform = "translateX(-50%)";
+          break;
+        case c.bottomRight:
+          e.right = "0", e.bottom = "0";
+          break;
+      }
+      return e;
+    }), ye = d(() => {
+      const l = { zIndex: (y.value ?? 1100) - 1 }, a = t.overlayStyle;
+      return a ? Array.isArray(a) ? [{ ...l }, ...a] : typeof a == "string" ? [l, a] : { ...l, ...a } : l;
+    }), be = d(() => {
+      const e = {};
+      return b.value != null && (e.width = `${b.value}px`), h.value != null && (e.height = `${h.value}px`), e;
+    }), C = o(t.border), he = d(() => C.value ? "hison-border" : "hison-border-none"), ge = d(() => C.value ? "filled" : "empty"), M = () => {
+      g.value && Fe(i);
+    }, E = () => {
+      g.value && Ze(i);
+    }, K = async () => {
+      const e = p.value;
+      !e || !f.value || (e.classList.remove(m.value), e.offsetWidth, e.classList.add(f.value));
+    }, Ce = async () => {
+      const e = p.value;
+      !e || !m.value || (e.classList.remove(f.value), e.offsetWidth, e.classList.add(m.value), await new Promise((l) => setTimeout(l, 200)));
+    }, H = async () => {
+      s.value || (s.value = !0, M(), await Z(), K(), v("open", F(w)));
+    }, k = async () => {
+      if (s.value)
+        try {
+          await Ce();
+        } finally {
+          s.value = !1, E(), v("close", F(w));
+        }
+    }, ke = async () => s.value ? k() : H(), Le = () => {
+      k();
+    }, L = o(t.draggable), $ = o(!1);
+    let Q = 0, _ = 0, ee = 0, te = 0, S = null, N = null;
+    const Se = () => {
+      if (r.value == null && u.value == null) {
+        const e = T.value;
+        if (!e) return;
+        const l = e.getBoundingClientRect();
+        r.value = Math.round(l.left), u.value = Math.round(l.top);
+      }
+    }, we = (e, l) => {
+      const a = T.value;
+      if (!a) return { l: e, t: l };
+      const Y = window.innerWidth, j = window.innerHeight, Oe = a.offsetWidth, Ae = a.offsetHeight, Pe = 0, $e = 0, Ne = Math.max(0, Y - Oe), ze = Math.max(0, j - Ae);
+      return { l: Math.min(Math.max(e, Pe), Ne), t: Math.min(Math.max(l, $e), ze) };
+    }, Be = (e, l) => {
+      N = { l: e, t: l }, S == null && (S = requestAnimationFrame(() => {
+        N && (r.value = N.l, u.value = N.t, N = null), S = null;
+      }));
+    }, X = (e) => {
+      if (!$.value) return;
+      const l = e.clientX - Q, a = e.clientY - _, { l: Y, t: j } = we(ee + l, te + a);
+      Be(Y, j);
+    }, x = () => {
+      $.value && ($.value = !1, document.removeEventListener("pointermove", X, !0), document.removeEventListener("pointerup", x, !0), document.body.style.userSelect = "");
+    }, Te = (e) => {
+      !L.value || e.target.closest(".hison-popup-close-btn") || (Se(), $.value = !0, Q = e.clientX, _ = e.clientY, ee = r.value ?? 0, te = u.value ?? 0, document.body.style.userSelect = "none", document.addEventListener("pointermove", X, !0), document.addEventListener("pointerup", x, !0));
+    }, U = () => {
+      S != null && (cancelAnimationFrame(S), S = null), document.removeEventListener("pointermove", X, !0), document.removeEventListener("pointerup", x, !0), document.body.style.userSelect = "", $.value = !1;
+    }, w = o(null), le = () => {
+      z.component.popupList[i] && z.component.popupList[i].isHisonvueComponent && console.warn(`[Hisonvue] The popup ID is at risk of being duplicated. ${i}`), Ue(I, () => {
+        oe(), Z(le);
+      }), q(), s.value && (M(), Z(K)), w.value = {
+        isHisonvueComponent: !0,
+        getId: () => i,
+        getType: () => "popup",
+        isVisible: () => s.value,
+        open: H,
+        close: k,
+        toggle: ke,
+        setVisible: (e) => e ? H() : k(),
+        getZIndex: () => y.value,
+        setZIndex: (e) => {
+          y.value = e;
+        },
+        getPosition: () => O.value,
+        setPosition: (e) => {
+          O.value = e;
+        },
+        getLeft: () => r.value,
+        setLeft: (e) => {
+          r.value = e;
+        },
+        getTop: () => u.value,
+        setTop: (e) => {
+          u.value = e;
+        },
+        getWidth: () => b.value,
+        setWidth: (e) => {
+          b.value = e;
+        },
+        getHeight: () => h.value,
+        setHeight: (e) => {
+          h.value = e;
+        },
+        isDraggable: () => L.value,
+        setDraggable: (e) => {
+          L.value = e, e || U();
+        },
+        isOverlayShown: () => A.value,
+        setOverlayShown: (e) => {
+          A.value = e;
+        },
+        isCloseClickOverlay: () => P.value,
+        setCloseClickOverlay: (e) => {
+          P.value = e;
+        },
+        isScrollLocked: () => g.value,
+        setScrollLock: (e) => {
+          g.value = e, s.value && (e ? M() : E());
+        },
+        isBorder: () => C.value,
+        setBorder: (e) => {
+          C.value = e;
+        },
+        getAnimationClasses: () => ({ enter: f.value, leave: m.value }),
+        setAnimationClasses: (e) => {
+          "enter" in e && (f.value = e.enter || ""), "leave" in e && (m.value = e.leave || "");
+        },
+        reload: () => Ye(I)
+      }, z.component.popupList[i] = w.value, v("mounted", w.value);
+    }, oe = () => {
+      U(), je(I), delete z.component.popupList[i], s.value && E();
+    };
+    return Re(le), Me(oe), n(D, (e) => {
+      q(), v("responsive-change", e);
+    }), n(() => t.visible, (e) => {
+      const l = !!e;
+      l !== s.value && (l ? H() : k());
+    }), n(() => t.zIndex, (e) => {
+      const l = Number(e ?? 1100);
+      l !== y.value && (y.value = l);
+    }), n(() => t.position, (e) => {
+      e && e !== O.value && (O.value = e);
+    }), n(() => t.left, (e) => {
+      const l = e == null ? null : Number(e);
+      l !== r.value && (r.value = l);
+    }), n(() => t.top, (e) => {
+      const l = e == null ? null : Number(e);
+      l !== u.value && (u.value = l);
+    }), n(() => t.width, (e) => {
+      const l = e == null ? null : Number(e);
+      l !== b.value && (b.value = l);
+    }), n(() => t.height, (e) => {
+      const l = e == null ? null : Number(e);
+      l !== h.value && (h.value = l);
+    }), n(() => t.draggable, (e) => {
+      const l = !!e;
+      l !== L.value && (L.value = l, l || U());
+    }), n(() => t.showOverlay, (e) => {
+      const l = !!e;
+      l !== A.value && (A.value = l);
+    }), n(() => t.closeClickOverlay, (e) => {
+      const l = !!e;
+      l !== P.value && (P.value = l);
+    }), n(() => t.scrollLock, (e) => {
+      const l = !!e;
+      l !== g.value && (g.value = l, s.value && (l ? M() : E()));
+    }), n(() => t.border, (e) => {
+      const l = !!e;
+      l !== C.value && (C.value = l);
+    }), n(() => t.enterAnimationClass, (e) => {
+      const l = e || "hison-popup-enter";
+      l !== f.value && (f.value = l);
+    }), n(() => t.leaveAnimationClass, (e) => {
+      const l = e || "hison-popup-leave";
+      l !== m.value && (m.value = l);
+    }), n(() => t.class, () => {
+      q();
+    }), {
+      id: i,
+      props: t,
+      popupRef: p,
+      popupWrapperRef: T,
+      visibleClass: ve,
+      responsiveClassList: R,
+      childClassList: de,
+      borderClass: he,
+      wrapperStyle: me,
+      overlayStyleWithZ: ye,
+      isOverlayVisible: pe,
+      sizeStyle: be,
+      closeButtonVisible: ce,
+      closeButtonBackgroundType: ge,
+      closeButtonText: "X",
+      closeButtonTitle: "Close",
+      draggable: L,
+      onClickCloseButton: Le,
+      onOverlayClick: fe,
+      onTopbarPointerDown: Te,
+      popupMethods: d(() => F(w))
+    };
+  }
+}), Qe = {
+  class: /* @__PURE__ */ B(["hison-popup-body"])
+};
+function _e(t, v, ue, i, I, D) {
+  const T = Ee("HButton");
+  return se(), ne("div", {
+    class: B(["hison-layer-host", t.visibleClass])
+  }, [
+    t.isOverlayVisible ? (se(), ne("div", {
+      key: 0,
+      class: "hison-popup-overlay",
+      style: J(t.overlayStyleWithZ),
+      onClick: v[0] || (v[0] = (...p) => t.onOverlayClick && t.onOverlayClick(...p))
+    }, null, 4)) : G("", !0),
+    V("div", {
+      ref: "popupWrapperRef",
+      class: B(["hison-popup-wrapper", ...t.responsiveClassList]),
+      style: J(t.wrapperStyle)
+    }, [
+      V("div", {
+        ref: "popupRef",
+        class: B(["hison-popup", t.borderClass]),
+        style: J([t.sizeStyle, t.props.style]),
+        role: "dialog"
+      }, [
+        V("div", {
+          class: B(["hison-popup-topbar", t.draggable ? "hison-draggable" : ""]),
+          onPointerdown: v[1] || (v[1] = (...p) => t.onTopbarPointerDown && t.onTopbarPointerDown(...p))
+        }, [
+          t.closeButtonVisible ? W(t.$slots, "close-button", {
+            key: 0,
+            onClick: t.onClickCloseButton,
+            text: t.closeButtonText,
+            title: t.closeButtonTitle || "Close"
+          }, () => [
+            He(T, {
+              id: `hison_popup_close_${t.id}`,
+              class: B(["hison-popup-close-btn", "hison-pos-right", "hison-pos-vertical-center", "hison-size-s", ...t.childClassList]),
+              text: t.closeButtonText,
+              title: t.closeButtonTitle || "Close",
+              border: !1,
+              "background-type": t.closeButtonBackgroundType,
+              onClick: t.onClickCloseButton
+            }, Ve({
+              default: ae(() => [
+                t.$slots["close-label"] ? W(t.$slots, "close-label", { key: 0 }) : G("", !0)
+              ]),
+              _: 2
+            }, [
+              t.$slots["close-icon"] ? {
+                name: "icon",
+                fn: ae(() => [
+                  W(t.$slots, "close-icon")
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["id", "class", "text", "title", "background-type", "onClick"])
+          ]) : G("", !0)
+        ], 34),
+        V("div", Qe, [
+          W(t.$slots, "default")
+        ])
+      ], 6)
+    ], 6)
+  ], 2);
+}
+const nt = /* @__PURE__ */ Ge(Ke, [["render", _e]]);
+export {
+  nt as default
+};

package/dist/HPopup-ChkoI3xm.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),n=require("./index-BmKMHsSZ.js"),Z=require("./scrollManager-CEEWQwoK.js"),ge=require("./_plugin-vue_export-helper-BHFhmbuH.js"),Ce={id:{type:String,required:!1},class:{type:[String,Array,Object],required:!1},style:{type:[String,Object,Array],required:!1},visible:{type:Boolean,default:!1},border:{type:Boolean,default:!0},zIndex:{type:Number,default:1200},position:{type:String,default:n.ScreenPosition.middleCenter,validator:l=>n.SCREEN_POSITION_VALUES.includes(l)},left:{type:Number,default:null},top:{type:Number,default:null},width:{type:Number,default:null},height:{type:Number,default:null},draggable:{type:Boolean,default:!0},showOverlay:{type:Boolean,default:!0},closeClickOverlay:{type:Boolean,default:!0},overlayStyle:{type:[String,Object,Array],required:!1},scrollLock:{type:Boolean,default:!0},enterAnimationClass:{type:String,required:!1},leaveAnimationClass:{type:String,required:!1}},Se=t.defineComponent({name:"HPopup",props:Ce,inheritAttrs:!1,emits:["mounted","responsive-change","open","close"],setup(l,{emit:c,slots:G}){const i=l.id||n.getUUID(),z=`hpopup:${i}`,E=n.useDevice(),w=t.ref(null),v=t.ref(null),s=t.ref(l.visible),J=t.ref(!0),f=t.ref(l.zIndex??1100),L=t.ref(l.position),r=t.ref(l.left??null),u=t.ref(l.top??null),m=t.ref(l.width??null),h=t.ref(l.height??null),B=t.ref(l.showOverlay),P=t.ref(l.closeClickOverlay),y=t.ref(l.scrollLock),d=t.ref(l.enterAnimationClass||"hison-popup-enter"),p=t.ref(l.leaveAnimationClass||"hison-popup-leave"),K=t.computed(()=>s.value?"":"hison-display-none"),N=t.ref([]),I=()=>{N.value=n.extractResponsiveClasses(n.toClassString(l.class)||"",E.value),n.addComponentNameToClass(N.value,"size",n.hisonCloser.componentStyle.size),n.addComponentNameToClass(N.value,"color","primary")},Q=t.computed(()=>[...n.extractPrefixedClasses(n.toClassString(l.class)||"","color")]),_=t.computed(()=>s.value&&B.value),ee=()=>{P.value&&g()},te=t.computed(()=>{const e={zIndex:f.value,position:"fixed"};if(r.value!=null||u.value!=null)return e.left=`${r.value??0}px`,e.top=`${u.value??0}px`,e;switch(e.left="",e.right="",e.top="",e.bottom="",e.transform="none",L.value){case n.ScreenPosition.topLeft:e.left="0",e.top="0";break;case n.ScreenPosition.topCenter:e.left="50%",e.top="0",e.transform="translateX(-50%)";break;case n.ScreenPosition.topRight:e.right="0",e.top="0";break;case n.ScreenPosition.middleLeft:e.left="0",e.top="50%",e.transform="translateY(-50%)";break;case n.ScreenPosition.middleCenter:e.left="50%",e.top="50%",e.transform="translate(-50%, -50%)";break;case n.ScreenPosition.middleRight:e.right="0",e.top="50%",e.transform="translateY(-50%)";break;case n.ScreenPosition.bottomLeft:e.left="0",e.bottom="0";break;case n.ScreenPosition.bottomCenter:e.left="50%",e.bottom="0",e.transform="translateX(-50%)";break;case n.ScreenPosition.bottomRight:e.right="0",e.bottom="0";break}return e}),le=t.computed(()=>{const o={zIndex:(f.value??1100)-1},a=l.overlayStyle;return a?Array.isArray(a)?[{...o},...a]:typeof a=="string"?[o,a]:{...o,...a}:o}),oe=t.computed(()=>{const e={};return m.value!=null&&(e.width=`${m.value}px`),h.value!=null&&(e.height=`${h.value}px`),e}),b=t.ref(l.border),ne=t.computed(()=>b.value?"hison-border":"hison-border-none"),se=t.computed(()=>b.value?"filled":"empty"),A=()=>{y.value&&Z.acquireScrollLock(i)},V=()=>{y.value&&Z.releaseScrollLock(i)},D=async()=>{const e=v.value;!e||!d.value||(e.classList.remove(p.value),e.offsetWidth,e.classList.add(d.value))},ae=async()=>{const e=v.value;!e||!p.value||(e.classList.remove(d.value),e.offsetWidth,e.classList.add(p.value),await new Promise(o=>setTimeout(o,200)))},$=async()=>{s.value||(s.value=!0,A(),await t.nextTick(),D(),c("open",t.unref(k)))},g=async()=>{if(s.value)try{await ae()}finally{s.value=!1,V(),c("close",t.unref(k))}},ie=async()=>s.value?g():$(),re=()=>{g()},C=t.ref(l.draggable),T=t.ref(!1);let x=0,X=0,U=0,Y=0,S=null,O=null;const ue=()=>{if(r.value==null&&u.value==null){const e=w.value;if(!e)return;const o=e.getBoundingClientRect();r.value=Math.round(o.left),u.value=Math.round(o.top)}},ce=(e,o)=>{const a=w.value;if(!a)return{l:e,t:o};const q=window.innerWidth,W=window.innerHeight,pe=a.offsetWidth,fe=a.offsetHeight,me=0,he=0,ye=Math.max(0,q-pe),be=Math.max(0,W-fe);return{l:Math.min(Math.max(e,me),ye),t:Math.min(Math.max(o,he),be)}},ve=(e,o)=>{O={l:e,t:o},S==null&&(S=requestAnimationFrame(()=>{O&&(r.value=O.l,u.value=O.t,O=null),S=null}))},M=e=>{if(!T.value)return;const o=e.clientX-x,a=e.clientY-X,{l:q,t:W}=ce(U+o,Y+a);ve(q,W)},R=()=>{T.value&&(T.value=!1,document.removeEventListener("pointermove",M,!0),document.removeEventListener("pointerup",R,!0),document.body.style.userSelect="")},de=e=>{!C.value||e.target.closest(".hison-popup-close-btn")||(ue(),T.value=!0,x=e.clientX,X=e.clientY,U=r.value??0,Y=u.value??0,document.body.style.userSelect="none",document.addEventListener("pointermove",M,!0),document.addEventListener("pointerup",R,!0))},H=()=>{S!=null&&(cancelAnimationFrame(S),S=null),document.removeEventListener("pointermove",M,!0),document.removeEventListener("pointerup",R,!0),document.body.style.userSelect="",T.value=!1},k=t.ref(null),j=()=>{n.hisonCloser.component.popupList[i]&&n.hisonCloser.component.popupList[i].isHisonvueComponent&&console.warn(`[Hisonvue] The popup ID is at risk of being duplicated. ${i}`),n.registerReloadable(z,()=>{F(),t.nextTick(j)}),I(),s.value&&(A(),t.nextTick(D)),k.value={isHisonvueComponent:!0,getId:()=>i,getType:()=>"popup",isVisible:()=>s.value,open:$,close:g,toggle:ie,setVisible:e=>e?$():g(),getZIndex:()=>f.value,setZIndex:e=>{f.value=e},getPosition:()=>L.value,setPosition:e=>{L.value=e},getLeft:()=>r.value,setLeft:e=>{r.value=e},getTop:()=>u.value,setTop:e=>{u.value=e},getWidth:()=>m.value,setWidth:e=>{m.value=e},getHeight:()=>h.value,setHeight:e=>{h.value=e},isDraggable:()=>C.value,setDraggable:e=>{C.value=e,e||H()},isOverlayShown:()=>B.value,setOverlayShown:e=>{B.value=e},isCloseClickOverlay:()=>P.value,setCloseClickOverlay:e=>{P.value=e},isScrollLocked:()=>y.value,setScrollLock:e=>{y.value=e,s.value&&(e?A():V())},isBorder:()=>b.value,setBorder:e=>{b.value=e},getAnimationClasses:()=>({enter:d.value,leave:p.value}),setAnimationClasses:e=>{"enter"in e&&(d.value=e.enter||""),"leave"in e&&(p.value=e.leave||"")},reload:()=>n.reloadHisonComponent(z)},n.hisonCloser.component.popupList[i]=k.value,c("mounted",k.value)},F=()=>{H(),n.unregisterReloadable(z),delete n.hisonCloser.component.popupList[i],s.value&&V()};return t.onMounted(j),t.onBeforeUnmount(F),t.watch(E,e=>{I(),c("responsive-change",e)}),t.watch(()=>l.visible,e=>{const o=!!e;o!==s.value&&(o?$():g())}),t.watch(()=>l.zIndex,e=>{const o=Number(e??1100);o!==f.value&&(f.value=o)}),t.watch(()=>l.position,e=>{e&&e!==L.value&&(L.value=e)}),t.watch(()=>l.left,e=>{const o=e==null?null:Number(e);o!==r.value&&(r.value=o)}),t.watch(()=>l.top,e=>{const o=e==null?null:Number(e);o!==u.value&&(u.value=o)}),t.watch(()=>l.width,e=>{const o=e==null?null:Number(e);o!==m.value&&(m.value=o)}),t.watch(()=>l.height,e=>{const o=e==null?null:Number(e);o!==h.value&&(h.value=o)}),t.watch(()=>l.draggable,e=>{const o=!!e;o!==C.value&&(C.value=o,o||H())}),t.watch(()=>l.showOverlay,e=>{const o=!!e;o!==B.value&&(B.value=o)}),t.watch(()=>l.closeClickOverlay,e=>{const o=!!e;o!==P.value&&(P.value=o)}),t.watch(()=>l.scrollLock,e=>{const o=!!e;o!==y.value&&(y.value=o,s.value&&(o?A():V()))}),t.watch(()=>l.border,e=>{const o=!!e;o!==b.value&&(b.value=o)}),t.watch(()=>l.enterAnimationClass,e=>{const o=e||"hison-popup-enter";o!==d.value&&(d.value=o)}),t.watch(()=>l.leaveAnimationClass,e=>{const o=e||"hison-popup-leave";o!==p.value&&(p.value=o)}),t.watch(()=>l.class,()=>{I()}),{id:i,props:l,popupRef:v,popupWrapperRef:w,visibleClass:K,responsiveClassList:N,childClassList:Q,borderClass:ne,wrapperStyle:te,overlayStyleWithZ:le,isOverlayVisible:_,sizeStyle:oe,closeButtonVisible:J,closeButtonBackgroundType:se,closeButtonText:"X",closeButtonTitle:"Close",draggable:C,onClickCloseButton:re,onOverlayClick:ee,onTopbarPointerDown:de,popupMethods:t.computed(()=>t.unref(k))}}}),ke={class:t.normalizeClass(["hison-popup-body"])};function we(l,c,G,i,z,E){const w=t.resolveComponent("HButton");return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["hison-layer-host",l.visibleClass])},[l.isOverlayVisible?(t.openBlock(),t.createElementBlock("div",{key:0,class:"hison-popup-overlay",style:t.normalizeStyle(l.overlayStyleWithZ),onClick:c[0]||(c[0]=(...v)=>l.onOverlayClick&&l.onOverlayClick(...v))},null,4)):t.createCommentVNode("",!0),t.createElementVNode("div",{ref:"popupWrapperRef",class:t.normalizeClass(["hison-popup-wrapper",...l.responsiveClassList]),style:t.normalizeStyle(l.wrapperStyle)},[t.createElementVNode("div",{ref:"popupRef",class:t.normalizeClass(["hison-popup",l.borderClass]),style:t.normalizeStyle([l.sizeStyle,l.props.style]),role:"dialog"},[t.createElementVNode("div",{class:t.normalizeClass(["hison-popup-topbar",l.draggable?"hison-draggable":""]),onPointerdown:c[1]||(c[1]=(...v)=>l.onTopbarPointerDown&&l.onTopbarPointerDown(...v))},[l.closeButtonVisible?t.renderSlot(l.$slots,"close-button",{key:0,onClick:l.onClickCloseButton,text:l.closeButtonText,title:l.closeButtonTitle||"Close"},()=>[t.createVNode(w,{id:`hison_popup_close_${l.id}`,class:t.normalizeClass(["hison-popup-close-btn","hison-pos-right","hison-pos-vertical-center","hison-size-s",...l.childClassList]),text:l.closeButtonText,title:l.closeButtonTitle||"Close",border:!1,"background-type":l.closeButtonBackgroundType,onClick:l.onClickCloseButton},t.createSlots({default:t.withCtx(()=>[l.$slots["close-label"]?t.renderSlot(l.$slots,"close-label",{key:0}):t.createCommentVNode("",!0)]),_:2},[l.$slots["close-icon"]?{name:"icon",fn:t.withCtx(()=>[t.renderSlot(l.$slots,"close-icon")]),key:"0"}:void 0]),1032,["id","class","text","title","background-type","onClick"])]):t.createCommentVNode("",!0)],34),t.createElementVNode("div",ke,[t.renderSlot(l.$slots,"default")])],6)],6)],2)}const Le=ge._export_sfc(Se,[["render",we]]);exports.default=Le;

package/dist/HSpinner-DDtU9PL_.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),t=require("./index-BmKMHsSZ.js"),V=require("./scrollManager-CEEWQwoK.js"),A=require("./_plugin-vue_export-helper-BHFhmbuH.js"),H={id:{type:String,required:!1},class:{type:[String,Array,Object],required:!1},style:{type:[String,Object,Array],required:!1},visible:{type:Boolean,default:!1},zIndex:{type:Number,default:1500},position:{type:String,default:t.ScreenPosition.middleCenter,validator:s=>t.SCREEN_POSITION_VALUES.includes(s)},overlayStyle:{type:[String,Object,Array],required:!1},timeoutMs:{type:Number,default:0},spinnerType:{type:String,default:"ring",validator:s=>["ring","dots","bars","pulse"].includes(s)}},O=e.defineComponent({name:"HSpinner",props:H,inheritAttrs:!1,emits:["mounted","responsive-change","open","close","toggle"],setup(s,{emit:o}){const l=s.id||t.getUUID(),y=`hspinner:${l}`,k=t.useDevice(),N=e.ref(null),I=e.ref(null),i=e.ref(s.visible),c=e.ref(s.zIndex??1400),m=e.ref(s.position),f=e.ref(s.overlayStyle),p=e.ref(s.timeoutMs??0),u=e.ref(s.spinnerType),B=e.computed(()=>i.value?"":"hison-display-none"),L=e.computed(()=>`hison-spinner-type-${u.value}`),h=e.ref([]),C=()=>{h.value=t.extractResponsiveClasses(t.toClassString(s.class)||"",k.value),t.addComponentNameToClass(h.value,"size",t.hisonCloser.componentStyle.size),t.addComponentNameToClass(h.value,"color","primary")},R=e.computed(()=>{const n={zIndex:c.value};switch(n.left="",n.right="",n.top="",n.bottom="",n.transform="none",m.value){case t.ScreenPosition.topLeft:n.left="5%",n.top="5%";break;case t.ScreenPosition.topCenter:n.left="50%",n.top="5%",n.transform="translateX(-50%)";break;case t.ScreenPosition.topRight:n.right="5%",n.top="5%";break;case t.ScreenPosition.middleLeft:n.left="5%",n.top="50%",n.transform="translateY(-50%)";break;case t.ScreenPosition.middleCenter:n.left="50%",n.top="50%",n.transform="translate(-50%, -50%)";break;case t.ScreenPosition.middleRight:n.right="5%",n.top="50%",n.transform="translateY(-50%)";break;case t.ScreenPosition.bottomLeft:n.left="5%",n.bottom="5%";break;case t.ScreenPosition.bottomCenter:n.left="50%",n.bottom="5%",n.transform="translateX(-50%)";break;case t.ScreenPosition.bottomRight:n.right="5%",n.bottom="5%";break}return n}),M=e.computed(()=>{const r={zIndex:(c.value??1400)-1},d=f.value;return d?Array.isArray(d)?[{...r},...d]:typeof d=="string"?[r,d]:{...r,...d}:r});let g=null;const T=()=>{g!=null&&(clearTimeout(g),g=null)},b=()=>{T(),p.value>0&&(g=window.setTimeout(()=>{v()},p.value))},w=()=>V.acquireScrollLock(l),E=()=>V.releaseScrollLock(l),S=async()=>{i.value||(i.value=!0,w(),await e.nextTick(),b(),o("open",e.unref(a)))},v=async()=>{if(i.value)try{T()}finally{i.value=!1,E(),o("close",e.unref(a))}},q=async()=>{i.value?await v():await S(),o("toggle",e.unref(a))},a=e.ref(null),z=()=>{t.hisonCloser.component.spinnerList[l]&&t.hisonCloser.component.spinnerList[l].isHisonvueComponent&&console.warn(`[Hisonvue] The spinner ID is at risk of being duplicated. ${l}`),t.registerReloadable(y,()=>{P(),e.nextTick(z)}),C(),i.value&&(w(),b()),a.value={isHisonvueComponent:!0,getId:()=>l,getType:()=>"spinner",isVisible:()=>i.value,open:S,close:v,toggle:q,setVisible:n=>n?S():v(),getZIndex:()=>c.value,setZIndex:n=>{c.value=n},getPosition:()=>m.value,setPosition:n=>{m.value=n},getTimeout:()=>p.value,setTimeout:n=>{p.value=Math.max(0,Number(n)||0),i.value&&b()},getSpinnerType:()=>u.value,setSpinnerType:n=>{u.value=n},getOverlayStyle:()=>f.value,setOverlayStyle:n=>{f.value=n},reload:()=>t.reloadHisonComponent(y)},t.hisonCloser.component.spinnerList[l]=a.value,o("mounted",a.value)},P=()=>{t.unregisterReloadable(y),delete t.hisonCloser.component.spinnerList[l],T(),i.value&&E()};return e.onMounted(z),e.onBeforeUnmount(P),e.watch(k,n=>{C(),o("responsive-change",n)}),e.watch(()=>s.visible,n=>{const r=!!n;r!==i.value&&(r?S():v())}),e.watch(()=>s.zIndex,n=>{const r=Number(n??1400);r!==c.value&&(c.value=r)}),e.watch(()=>s.position,n=>{n&&n!==m.value&&(m.value=n)}),e.watch(()=>s.overlayStyle,n=>{n!==f.value&&(f.value=n)}),e.watch(()=>s.timeoutMs,n=>{const r=Math.max(0,Number(n)||0);r!==p.value&&(p.value=r,i.value&&b())}),e.watch(()=>s.spinnerType,n=>{n&&n!==u.value&&(u.value=n)}),e.watch(()=>s.class,()=>{C()}),{id:l,props:s,wrapperRef:N,spinnerRef:I,visible:i,visibleClass:B,responsiveClassList:h,overlayStyleWithZ:M,wrapperStyle:R,spinnerType:u,spinnerTypeClass:L,spinnerMethods:e.computed(()=>e.unref(a))}}}),$={key:0,class:"hison-spinner-ring"},j={key:1,class:"hison-spinner-dots"},U={key:2,class:"hison-spinner-bars"},Z={key:3,class:"hison-spinner-pulse"};function x(s,o,l,y,k,N){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["hison-layer-host",s.visibleClass])},[s.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:"hison-spinner-overlay",style:e.normalizeStyle(s.overlayStyleWithZ)},null,4)):e.createCommentVNode("",!0),e.createElementVNode("div",{ref:"wrapperRef",class:e.normalizeClass(["hison-spinner-wrapper",...s.responsiveClassList]),style:e.normalizeStyle(s.wrapperStyle)},[e.createElementVNode("div",{ref:"spinnerRef",class:e.normalizeClass(["hison-spinner",s.spinnerTypeClass]),style:e.normalizeStyle(s.props.style),role:"status","aria-live":"polite","aria-busy":"true"},[e.renderSlot(s.$slots,"spinner",{spinnerEl:s.spinnerRef,spinner:s.spinnerMethods,type:s.spinnerType},()=>[s.spinnerType==="ring"?(e.openBlock(),e.createElementBlock("div",$,o[0]||(o[0]=[e.createStaticVNode('<span class="hison-spinner-ring-seg"></span><span class="hison-spinner-ring-seg"></span><span class="hison-spinner-ring-seg"></span><span class="hison-spinner-ring-seg"></span><span class="hison-spinner-ring-seg"></span><span class="hison-spinner-ring-seg"></span><span class="hison-spinner-ring-seg"></span>',7)]))):s.spinnerType==="dots"?(e.openBlock(),e.createElementBlock("div",j,o[1]||(o[1]=[e.createElementVNode("span",{class:"hison-spinner-dot"},null,-1),e.createElementVNode("span",{class:"hison-spinner-dot"},null,-1),e.createElementVNode("span",{class:"hison-spinner-dot"},null,-1)]))):s.spinnerType==="bars"?(e.openBlock(),e.createElementBlock("div",U,o[2]||(o[2]=[e.createElementVNode("span",{class:"hison-spinner-bar"},null,-1),e.createElementVNode("span",{class:"hison-spinner-bar"},null,-1),e.createElementVNode("span",{class:"hison-spinner-bar"},null,-1),e.createElementVNode("span",{class:"hison-spinner-bar"},null,-1)]))):(e.openBlock(),e.createElementBlock("div",Z,o[3]||(o[3]=[e.createElementVNode("span",{class:"hison-spinner-pulse-span"},null,-1)])))])],6)],6)],2)}const D=A._export_sfc(O,[["render",x]]);exports.default=D;