hisonvue 1.0.0

package/dist/HDrawer-DG1O42iF.mjs

@@ -0,0 +1,439 @@
+import { defineComponent as ze, ref as n, computed as u, onMounted as Ve, onBeforeUnmount as Pe, watch as a, unref as j, nextTick as A, resolveComponent as He, createElementBlock as se, openBlock as ne, normalizeClass as R, createCommentVNode as Y, createElementVNode as F, normalizeStyle as G, renderSlot as D, createVNode as Re, createSlots as De, withCtx as ae } from "vue";
+import { g as Ne, u as We, j as qe, t as ie, e as Ue, b as re, h as O, r as Xe, c as Ze, d as Me } from "./index-DUh7pai4.mjs";
+import { a as je, r as Ye } from "./scrollManager-BGnq4wyt.mjs";
+import { _ as Fe } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const Ge = ["top", "bottom", "left", "right"], Je = {
+  /**
+   * Unique identifier for the drawer instance.
+   * - Retrieve runtime methods via `hison.component.getDrawer(id)`
+   * - Duplicate `id` values will throw an error at mount time
+   */
+  id: { type: String, required: !1 },
+  /**
+   * Custom class applied to the drawer 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 drawer **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 drawer.
+   * - Runtime visibility is controlled **only** via methods (`open/close/toggle/setVisible`)
+   * - Default: `false`
+   */
+  visible: { type: Boolean, default: !1 },
+  /**
+   * Whether the drawer has border/shadow styling.
+   * - Default: `true`
+   */
+  border: { type: Boolean, default: !0 },
+  /**
+   * Stacking order for this drawer **wrapper** (fixed container).
+   * - Applied to `.hison-drawer-wrapper`; the overlay uses `zIndex - 1`
+   * - Default: `1100`
+   */
+  zIndex: { type: Number, default: 1100 },
+  /**
+   * On-screen position of the drawer (anchored to screen edge).
+   * - Tokens: 'top' | 'bottom' | 'left' | 'right'
+   * - Default: `'bottom'`
+   */
+  position: {
+    type: String,
+    default: "bottom",
+    validator: (t) => Ge.includes(t)
+  },
+  /**
+   * Drawer width in pixels.
+   * - For left/right drawers: applied as horizontal size
+   * - For top/bottom drawers: default is `100vw`, but explicit `width` overrides it
+   * - Inline `style.width` (if provided) takes precedence over this prop
+   */
+  width: { type: Number, default: null },
+  /**
+   * Drawer height in pixels.
+   * - For top/bottom drawers: applied as vertical size
+   * - For left/right drawers: default is `100vh`, but explicit `height` overrides it
+   * - Inline `style.height` (if provided) takes precedence over this prop
+   */
+  height: { type: Number, default: null },
+  /**
+   * Whether an internal close button is shown (top-right inside drawer).
+   * - Default: `true`
+   */
+  closeButtonVisible: { type: Boolean, default: !0 },
+  /**
+   * Label text for the close button.
+   * - Default: `'X'`
+   */
+  closeButtonText: { type: String, default: "X" },
+  /**
+   * Title attribute (tooltip) for the close button.
+   * - Default: `'close'`
+   */
+  closeButtonTitle: { type: String, default: "close" },
+  /**
+   * Enables swipe-to-close gestures.
+   * - Top: swipe down closes
+   * - Bottom: swipe up closes
+   * - Left: swipe left closes
+   * - Right: swipe right closes
+   * - Default: `true`
+   */
+  swipeClose: { 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 drawer.
+   * - 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 drawer is open (reference-counted across nested overlays).
+   * - Default: `true`
+   */
+  scrollLock: { type: Boolean, default: !0 },
+  /**
+   * Optional enter animation class for the drawer.
+   * - Default: chosen internally by `position` if not provided
+   */
+  enterAnimationClass: { type: String, required: !1 },
+  /**
+   * Optional leave animation class for the drawer.
+   * - Default: chosen internally by `position` if not provided
+   */
+  leaveAnimationClass: { type: String, required: !1 }
+}, Ke = ze({
+  name: "HDrawer",
+  props: Je,
+  inheritAttrs: !1,
+  emits: ["mounted", "responsive-change", "open", "close"],
+  setup(t, { emit: y, slots: ue }) {
+    const c = t.id || Ne(), $ = `hdrawer:${c}`, N = We(), W = n(null), h = n(null), r = n(t.visible), g = n(t.zIndex ?? 1050), b = n(t.border), k = n(t.showOverlay), S = n(t.closeClickOverlay), p = n(t.scrollLock), o = n(t.position), v = n(t.width ?? null), d = n(t.height ?? null), L = n(t.closeButtonVisible), ce = u(() => b.value), ve = u(() => b.value ? "filled" : "empty"), q = n(t.closeButtonText || "X"), U = n(t.closeButtonTitle || "Close"), T = n(t.swipeClose), I = {
+      top: "hison-drawer-enter-top",
+      bottom: "hison-drawer-enter-bottom",
+      left: "hison-drawer-enter-left",
+      right: "hison-drawer-enter-right"
+    }, E = {
+      top: "hison-drawer-leave-top",
+      bottom: "hison-drawer-leave-bottom",
+      left: "hison-drawer-leave-left",
+      right: "hison-drawer-leave-right"
+    }, m = n(t.enterAnimationClass || I[o.value]), w = n(t.leaveAnimationClass || E[o.value]), de = u(() => "hison-bg-empty"), fe = u(() => b.value ? "hison-border" : ""), ye = u(() => r.value ? "" : "hison-display-none"), z = n([]), X = () => {
+      var e;
+      z.value = Ue(ie(t.class) || "", N.value), re(z.value, "size", ((e = O.componentStyle) == null ? void 0 : e.size) || "m"), re(z.value, "color", "primary");
+    }, he = u(() => [
+      ...qe(ie(t.class) || "", "color")
+    ]), me = u(() => r.value && k.value), we = u(() => {
+      const l = { zIndex: (g.value ?? 1050) - 1 }, s = t.overlayStyle;
+      return s ? Array.isArray(s) ? [{ ...l }, ...s] : typeof s == "string" ? [l, s] : { ...l, ...s } : l;
+    }), be = () => {
+      S.value && f();
+    }, Ce = u(() => {
+      const e = { zIndex: g.value, position: "fixed", inset: "auto" };
+      switch (e.left = "", e.right = "", e.top = "", e.bottom = "", o.value) {
+        case "top":
+          e.left = "0", e.right = "0", e.top = "0";
+          break;
+        case "bottom":
+          e.left = "0", e.right = "0", e.bottom = "0";
+          break;
+        case "left":
+          e.left = "0", e.top = "0", e.bottom = "0";
+          break;
+        case "right":
+          e.right = "0", e.top = "0", e.bottom = "0";
+          break;
+      }
+      return e;
+    }), ge = u(() => {
+      const e = {};
+      return o.value === "top" || o.value === "bottom" ? (e.width = "100vw", d.value != null && (e.height = `${d.value}px`), v.value != null && (e.width = `${v.value}px`)) : (e.height = "100vh", v.value != null && (e.width = `${v.value}px`), d.value != null && (e.height = `${d.value}px`)), e;
+    }), V = () => {
+      p.value && je(c);
+    }, P = () => {
+      p.value && Ye(c);
+    }, J = async () => {
+      const e = h.value;
+      !e || !m.value || (e.classList.remove(w.value), e.offsetWidth, e.classList.add(m.value));
+    }, pe = async () => {
+      const e = h.value;
+      !e || !w.value || (e.classList.remove(m.value), e.offsetWidth, e.classList.add(w.value), await new Promise((l) => setTimeout(l, 200)));
+    }, H = async () => {
+      r.value || (r.value = !0, V(), await A(), J(), y("open", j(B)));
+    }, f = async () => {
+      if (r.value)
+        try {
+          await pe();
+        } finally {
+          r.value = !1, P(), y("close", j(B));
+        }
+    }, Be = async () => r.value ? f() : H(), ke = () => f();
+    let Z = !1, K = 0, Q = 0;
+    const x = 40, Se = (e) => {
+      T.value && (Z = !0, K = e.clientX, Q = e.clientY, window.addEventListener("pointerup", Le, { once: !0, capture: !0 }));
+    }, Le = (e) => {
+      if (!Z) return;
+      Z = !1;
+      const l = e.clientX - K, s = e.clientY - Q, i = Math.abs(l), C = Math.abs(s);
+      (o.value === "top" && C > i && s > x || o.value === "bottom" && C > i && s < -40 || o.value === "left" && i > C && l < -40 || o.value === "right" && i > C && l > x) && f();
+    }, Te = 200, Ae = "ease";
+    function _(e, l, s, i, C = Te, Ie = Ae) {
+      return new Promise((Ee) => {
+        e.style.transition = "none", e.style[l] = `${s}px`, e.offsetWidth, e.style.transition = `${l} ${C}ms ${Ie}`, e.style[l] = `${i}px`;
+        const M = () => {
+          e.removeEventListener("transitionend", M), e.style.transition = "", Ee();
+        };
+        e.addEventListener("transitionend", M), setTimeout(M, C + 50);
+      });
+    }
+    const Oe = u(() => o.value === "left" || o.value === "right"), $e = u(() => o.value === "top" || o.value === "bottom");
+    async function ee(e, l = !0) {
+      const s = h.value;
+      if (!s) {
+        v.value = e;
+        return;
+      }
+      const i = s.getBoundingClientRect().width;
+      if ((e ?? i) === i) {
+        v.value = e;
+        return;
+      }
+      if (!l || e == null || !Oe.value) {
+        v.value = e;
+        return;
+      }
+      v.value = e, await A(), await _(s, "width", i, e);
+    }
+    async function te(e, l = !0) {
+      const s = h.value;
+      if (!s) {
+        d.value = e;
+        return;
+      }
+      const i = s.getBoundingClientRect().height;
+      if ((e ?? i) === i) {
+        d.value = e;
+        return;
+      }
+      if (!l || e == null || !$e.value) {
+        d.value = e;
+        return;
+      }
+      d.value = e, await A(), await _(s, "height", i, e);
+    }
+    const B = n(null), le = () => {
+      O.component.drawerList[c] && O.component.drawerList[c].isHisonvueComponent && console.warn(`[Hisonvue] The drawer ID is at risk of being duplicated. ${c}`), Xe($, () => {
+        oe(), A(le);
+      }), X(), r.value && (V(), A(J)), B.value = {
+        isHisonvueComponent: !0,
+        getId: () => c,
+        getType: () => "drawer",
+        isVisible: () => r.value,
+        open: H,
+        close: f,
+        toggle: Be,
+        setVisible: (e) => e ? H() : f(),
+        getZIndex: () => g.value,
+        setZIndex: (e) => {
+          g.value = e;
+        },
+        getPosition: () => o.value,
+        setPosition: (e) => {
+          o.value = e, t.enterAnimationClass || (m.value = I[o.value]), t.leaveAnimationClass || (w.value = E[o.value]);
+        },
+        getWidth: () => v.value,
+        setWidth: (e, l = !0) => ee(e, l),
+        getHeight: () => d.value,
+        setHeight: (e, l = !0) => te(e, l),
+        isSwipeCloseEnabled: () => T.value,
+        setSwipeCloseEnabled: (e) => {
+          T.value = e;
+        },
+        isCloseButtonVisible: () => L.value,
+        setCloseButtonVisible: (e) => {
+          L.value = e;
+        },
+        isOverlayShown: () => k.value,
+        setOverlayShown: (e) => {
+          k.value = e;
+        },
+        isCloseClickOverlay: () => S.value,
+        setCloseClickOverlay: (e) => {
+          S.value = e;
+        },
+        isScrollLocked: () => p.value,
+        setScrollLock: (e) => {
+          p.value = e, r.value && (e ? V() : P());
+        },
+        isBorder: () => b.value,
+        setBorder: (e) => {
+          b.value = e;
+        },
+        getAnimationClasses: () => ({ enter: m.value, leave: w.value }),
+        setAnimationClasses: (e) => {
+          "enter" in e && (m.value = e.enter || ""), "leave" in e && (w.value = e.leave || "");
+        },
+        reload: () => Ze($)
+      }, O.component.drawerList[c] = B.value, y("mounted", B.value);
+    }, oe = () => {
+      Me($), delete O.component.drawerList[c], r.value && P();
+    };
+    return Ve(le), Pe(oe), a(N, (e) => {
+      X(), y("responsive-change", e);
+    }), a(() => t.visible, (e) => {
+      !!e !== r.value && (e ? H() : f());
+    }), a(() => t.zIndex, (e) => {
+      const l = Number(e);
+      Number.isFinite(l) && l !== g.value && (g.value = l);
+    }), a(() => t.border, (e) => {
+      const l = !!e;
+      l !== b.value && (b.value = l);
+    }), a(() => t.showOverlay, (e) => {
+      const l = !!e;
+      l !== k.value && (k.value = l);
+    }), a(() => t.closeClickOverlay, (e) => {
+      const l = !!e;
+      l !== S.value && (S.value = l);
+    }), a(() => t.scrollLock, (e) => {
+      const l = !!e;
+      l !== p.value && (p.value = l, r.value && (l ? V() : P()));
+    }), a(() => t.position, (e) => {
+      e && e !== o.value && (o.value = e, t.enterAnimationClass || (m.value = I[o.value]), t.leaveAnimationClass || (w.value = E[o.value]));
+    }), a(() => t.width, (e) => {
+      const l = e == null ? null : Number(e);
+      l !== v.value && ee(l, !1);
+    }), a(() => t.height, (e) => {
+      const l = e == null ? null : Number(e);
+      l !== d.value && te(l, !1);
+    }), a(() => t.closeButtonVisible, (e) => {
+      const l = !!e;
+      l !== L.value && (L.value = l);
+    }), a(() => t.closeButtonText, (e) => {
+      const l = e ?? "X";
+      l !== q.value && (q.value = l);
+    }), a(() => t.closeButtonTitle, (e) => {
+      const l = e ?? "Close";
+      l !== U.value && (U.value = l);
+    }), a(() => t.swipeClose, (e) => {
+      const l = !!e;
+      l !== T.value && (T.value = l);
+    }), a(() => t.enterAnimationClass, (e) => {
+      const l = e || I[o.value];
+      l !== m.value && (m.value = l);
+    }), a(() => t.leaveAnimationClass, (e) => {
+      const l = e || E[o.value];
+      l !== w.value && (w.value = l);
+    }), a(() => t.class, () => X()), {
+      id: c,
+      props: t,
+      wrapperRef: W,
+      drawerRef: h,
+      position: o,
+      visibleClass: ye,
+      responsiveClassList: z,
+      childClassList: he,
+      borderClass: fe,
+      backgroundTypeClass: de,
+      wrapperStyle: Ce,
+      overlayStyleWithZ: we,
+      isOverlayVisible: me,
+      sizeStyle: ge,
+      closeButtonVisible: L,
+      closeButtonBorder: ce,
+      closeButtonBackgroundType: ve,
+      closeButtonText: q,
+      closeButtonTitle: U,
+      onOverlayClick: be,
+      onClickClose: ke,
+      onSwipePointerDown: Se,
+      drawerMethods: u(() => j(B))
+    };
+  }
+}), Qe = { class: "hison-drawer-body" };
+function xe(t, y, ue, c, $, N) {
+  const W = He("HButton");
+  return ne(), se("div", {
+    class: R(["hison-layer-host", t.visibleClass])
+  }, [
+    t.isOverlayVisible ? (ne(), se("div", {
+      key: 0,
+      class: "hison-drawer-overlay",
+      style: G(t.overlayStyleWithZ),
+      onClick: y[0] || (y[0] = (...h) => t.onOverlayClick && t.onOverlayClick(...h))
+    }, null, 4)) : Y("", !0),
+    F("div", {
+      ref: "wrapperRef",
+      class: R(["hison-drawer-wrapper", `hison-pos-${t.position}`, ...t.responsiveClassList]),
+      style: G(t.wrapperStyle)
+    }, [
+      F("div", {
+        ref: "drawerRef",
+        class: R(["hison-drawer", t.borderClass, t.backgroundTypeClass]),
+        style: G([t.sizeStyle, t.props.style]),
+        role: "dialog",
+        onPointerdown: y[1] || (y[1] = (...h) => t.onSwipePointerDown && t.onSwipePointerDown(...h))
+      }, [
+        t.closeButtonVisible ? D(t.$slots, "close-button", {
+          key: 0,
+          onClick: t.onClickClose,
+          text: t.closeButtonText,
+          title: t.closeButtonTitle || "Close"
+        }, () => [
+          Re(W, {
+            id: `hison_drawer_close_${t.id}`,
+            class: R(["hison-drawer-close-btn", "hison-pos-right", "hison-pos-top", "hison-size-s", ...t.childClassList]),
+            text: t.closeButtonText,
+            title: t.closeButtonTitle || "Close",
+            border: t.closeButtonBorder,
+            "background-type": t.closeButtonBackgroundType,
+            onClick: t.onClickClose
+          }, De({
+            default: ae(() => [
+              t.$slots["close-label"] ? D(t.$slots, "close-label", { key: 0 }) : Y("", !0)
+            ]),
+            _: 2
+          }, [
+            t.$slots["close-icon"] ? {
+              name: "icon",
+              fn: ae(() => [
+                D(t.$slots, "close-icon")
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["id", "class", "text", "title", "border", "background-type", "onClick"])
+        ]) : Y("", !0),
+        F("div", Qe, [
+          D(t.$slots, "default")
+        ])
+      ], 38)
+    ], 6)
+  ], 2);
+}
+const ot = /* @__PURE__ */ Fe(Ke, [["render", xe]]);
+export {
+  ot as default
+};

package/dist/HDrawer-U5VC_okK.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),a=require("./index-BmKMHsSZ.js"),J=require("./scrollManager-CEEWQwoK.js"),be=require("./_plugin-vue_export-helper-BHFhmbuH.js"),ge=["top","bottom","left","right"],pe={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:1100},position:{type:String,default:"bottom",validator:l=>ge.includes(l)},width:{type:Number,default:null},height:{type:Number,default:null},closeButtonVisible:{type:Boolean,default:!0},closeButtonText:{type:String,default:"X"},closeButtonTitle:{type:String,default:"close"},swipeClose:{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:"HDrawer",props:pe,inheritAttrs:!1,emits:["mounted","responsive-change","open","close"],setup(l,{emit:f,slots:K}){const u=l.id||a.getUUID(),L=`hdrawer:${u}`,I=a.useDevice(),N=t.ref(null),h=t.ref(null),r=t.ref(l.visible),b=t.ref(l.zIndex??1050),w=t.ref(l.border),S=t.ref(l.showOverlay),k=t.ref(l.closeClickOverlay),g=t.ref(l.scrollLock),s=t.ref(l.position),c=t.ref(l.width??null),v=t.ref(l.height??null),B=t.ref(l.closeButtonVisible),Q=t.computed(()=>w.value),x=t.computed(()=>w.value?"filled":"empty"),P=t.ref(l.closeButtonText||"X"),H=t.ref(l.closeButtonTitle||"Close"),T=t.ref(l.swipeClose),O={top:"hison-drawer-enter-top",bottom:"hison-drawer-enter-bottom",left:"hison-drawer-enter-left",right:"hison-drawer-enter-right"},A={top:"hison-drawer-leave-top",bottom:"hison-drawer-leave-bottom",left:"hison-drawer-leave-left",right:"hison-drawer-leave-right"},m=t.ref(l.enterAnimationClass||O[s.value]),y=t.ref(l.leaveAnimationClass||A[s.value]),_=t.computed(()=>"hison-bg-empty"),ee=t.computed(()=>w.value?"hison-border":""),te=t.computed(()=>r.value?"":"hison-display-none"),$=t.ref([]),R=()=>{var e;$.value=a.extractResponsiveClasses(a.toClassString(l.class)||"",I.value),a.addComponentNameToClass($.value,"size",((e=a.hisonCloser.componentStyle)==null?void 0:e.size)||"m"),a.addComponentNameToClass($.value,"color","primary")},le=t.computed(()=>[...a.extractPrefixedClasses(a.toClassString(l.class)||"","color")]),oe=t.computed(()=>r.value&&S.value),se=t.computed(()=>{const o={zIndex:(b.value??1050)-1},n=l.overlayStyle;return n?Array.isArray(n)?[{...o},...n]:typeof n=="string"?[o,n]:{...o,...n}:o}),ne=()=>{k.value&&d()},ae=t.computed(()=>{const e={zIndex:b.value,position:"fixed",inset:"auto"};switch(e.left="",e.right="",e.top="",e.bottom="",s.value){case"top":e.left="0",e.right="0",e.top="0";break;case"bottom":e.left="0",e.right="0",e.bottom="0";break;case"left":e.left="0",e.top="0",e.bottom="0";break;case"right":e.right="0",e.top="0",e.bottom="0";break}return e}),ie=t.computed(()=>{const e={};return s.value==="top"||s.value==="bottom"?(e.width="100vw",v.value!=null&&(e.height=`${v.value}px`),c.value!=null&&(e.width=`${c.value}px`)):(e.height="100vh",c.value!=null&&(e.width=`${c.value}px`),v.value!=null&&(e.height=`${v.value}px`)),e}),z=()=>{g.value&&J.acquireScrollLock(u)},V=()=>{g.value&&J.releaseScrollLock(u)},W=async()=>{const e=h.value;!e||!m.value||(e.classList.remove(y.value),e.offsetWidth,e.classList.add(m.value))},re=async()=>{const e=h.value;!e||!y.value||(e.classList.remove(m.value),e.offsetWidth,e.classList.add(y.value),await new Promise(o=>setTimeout(o,200)))},E=async()=>{r.value||(r.value=!0,z(),await t.nextTick(),W(),f("open",t.unref(p)))},d=async()=>{if(r.value)try{await re()}finally{r.value=!1,V(),f("close",t.unref(p))}},ue=async()=>r.value?d():E(),ce=()=>d();let D=!1,M=0,U=0;const X=40,ve=e=>{T.value&&(D=!0,M=e.clientX,U=e.clientY,window.addEventListener("pointerup",de,{once:!0,capture:!0}))},de=e=>{if(!D)return;D=!1;const o=e.clientX-M,n=e.clientY-U,i=Math.abs(o),C=Math.abs(n);(s.value==="top"&&C>i&&n>X||s.value==="bottom"&&C>i&&n<-40||s.value==="left"&&i>C&&o<-40||s.value==="right"&&i>C&&o>X)&&d()},fe=200,he="ease";function Z(e,o,n,i,C=fe,we=he){return new Promise(Ce=>{e.style.transition="none",e.style[o]=`${n}px`,e.offsetWidth,e.style.transition=`${o} ${C}ms ${we}`,e.style[o]=`${i}px`;const q=()=>{e.removeEventListener("transitionend",q),e.style.transition="",Ce()};e.addEventListener("transitionend",q),setTimeout(q,C+50)})}const me=t.computed(()=>s.value==="left"||s.value==="right"),ye=t.computed(()=>s.value==="top"||s.value==="bottom");async function j(e,o=!0){const n=h.value;if(!n){c.value=e;return}const i=n.getBoundingClientRect().width;if((e??i)===i){c.value=e;return}if(!o||e==null||!me.value){c.value=e;return}c.value=e,await t.nextTick(),await Z(n,"width",i,e)}async function Y(e,o=!0){const n=h.value;if(!n){v.value=e;return}const i=n.getBoundingClientRect().height;if((e??i)===i){v.value=e;return}if(!o||e==null||!ye.value){v.value=e;return}v.value=e,await t.nextTick(),await Z(n,"height",i,e)}const p=t.ref(null),F=()=>{a.hisonCloser.component.drawerList[u]&&a.hisonCloser.component.drawerList[u].isHisonvueComponent&&console.warn(`[Hisonvue] The drawer ID is at risk of being duplicated. ${u}`),a.registerReloadable(L,()=>{G(),t.nextTick(F)}),R(),r.value&&(z(),t.nextTick(W)),p.value={isHisonvueComponent:!0,getId:()=>u,getType:()=>"drawer",isVisible:()=>r.value,open:E,close:d,toggle:ue,setVisible:e=>e?E():d(),getZIndex:()=>b.value,setZIndex:e=>{b.value=e},getPosition:()=>s.value,setPosition:e=>{s.value=e,l.enterAnimationClass||(m.value=O[s.value]),l.leaveAnimationClass||(y.value=A[s.value])},getWidth:()=>c.value,setWidth:(e,o=!0)=>j(e,o),getHeight:()=>v.value,setHeight:(e,o=!0)=>Y(e,o),isSwipeCloseEnabled:()=>T.value,setSwipeCloseEnabled:e=>{T.value=e},isCloseButtonVisible:()=>B.value,setCloseButtonVisible:e=>{B.value=e},isOverlayShown:()=>S.value,setOverlayShown:e=>{S.value=e},isCloseClickOverlay:()=>k.value,setCloseClickOverlay:e=>{k.value=e},isScrollLocked:()=>g.value,setScrollLock:e=>{g.value=e,r.value&&(e?z():V())},isBorder:()=>w.value,setBorder:e=>{w.value=e},getAnimationClasses:()=>({enter:m.value,leave:y.value}),setAnimationClasses:e=>{"enter"in e&&(m.value=e.enter||""),"leave"in e&&(y.value=e.leave||"")},reload:()=>a.reloadHisonComponent(L)},a.hisonCloser.component.drawerList[u]=p.value,f("mounted",p.value)},G=()=>{a.unregisterReloadable(L),delete a.hisonCloser.component.drawerList[u],r.value&&V()};return t.onMounted(F),t.onBeforeUnmount(G),t.watch(I,e=>{R(),f("responsive-change",e)}),t.watch(()=>l.visible,e=>{!!e!==r.value&&(e?E():d())}),t.watch(()=>l.zIndex,e=>{const o=Number(e);Number.isFinite(o)&&o!==b.value&&(b.value=o)}),t.watch(()=>l.border,e=>{const o=!!e;o!==w.value&&(w.value=o)}),t.watch(()=>l.showOverlay,e=>{const o=!!e;o!==S.value&&(S.value=o)}),t.watch(()=>l.closeClickOverlay,e=>{const o=!!e;o!==k.value&&(k.value=o)}),t.watch(()=>l.scrollLock,e=>{const o=!!e;o!==g.value&&(g.value=o,r.value&&(o?z():V()))}),t.watch(()=>l.position,e=>{e&&e!==s.value&&(s.value=e,l.enterAnimationClass||(m.value=O[s.value]),l.leaveAnimationClass||(y.value=A[s.value]))}),t.watch(()=>l.width,e=>{const o=e==null?null:Number(e);o!==c.value&&j(o,!1)}),t.watch(()=>l.height,e=>{const o=e==null?null:Number(e);o!==v.value&&Y(o,!1)}),t.watch(()=>l.closeButtonVisible,e=>{const o=!!e;o!==B.value&&(B.value=o)}),t.watch(()=>l.closeButtonText,e=>{const o=e??"X";o!==P.value&&(P.value=o)}),t.watch(()=>l.closeButtonTitle,e=>{const o=e??"Close";o!==H.value&&(H.value=o)}),t.watch(()=>l.swipeClose,e=>{const o=!!e;o!==T.value&&(T.value=o)}),t.watch(()=>l.enterAnimationClass,e=>{const o=e||O[s.value];o!==m.value&&(m.value=o)}),t.watch(()=>l.leaveAnimationClass,e=>{const o=e||A[s.value];o!==y.value&&(y.value=o)}),t.watch(()=>l.class,()=>R()),{id:u,props:l,wrapperRef:N,drawerRef:h,position:s,visibleClass:te,responsiveClassList:$,childClassList:le,borderClass:ee,backgroundTypeClass:_,wrapperStyle:ae,overlayStyleWithZ:se,isOverlayVisible:oe,sizeStyle:ie,closeButtonVisible:B,closeButtonBorder:Q,closeButtonBackgroundType:x,closeButtonText:P,closeButtonTitle:H,onOverlayClick:ne,onClickClose:ce,onSwipePointerDown:ve,drawerMethods:t.computed(()=>t.unref(p))}}}),ke={class:"hison-drawer-body"};function Be(l,f,K,u,L,I){const N=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-drawer-overlay",style:t.normalizeStyle(l.overlayStyleWithZ),onClick:f[0]||(f[0]=(...h)=>l.onOverlayClick&&l.onOverlayClick(...h))},null,4)):t.createCommentVNode("",!0),t.createElementVNode("div",{ref:"wrapperRef",class:t.normalizeClass(["hison-drawer-wrapper",`hison-pos-${l.position}`,...l.responsiveClassList]),style:t.normalizeStyle(l.wrapperStyle)},[t.createElementVNode("div",{ref:"drawerRef",class:t.normalizeClass(["hison-drawer",l.borderClass,l.backgroundTypeClass]),style:t.normalizeStyle([l.sizeStyle,l.props.style]),role:"dialog",onPointerdown:f[1]||(f[1]=(...h)=>l.onSwipePointerDown&&l.onSwipePointerDown(...h))},[l.closeButtonVisible?t.renderSlot(l.$slots,"close-button",{key:0,onClick:l.onClickClose,text:l.closeButtonText,title:l.closeButtonTitle||"Close"},()=>[t.createVNode(N,{id:`hison_drawer_close_${l.id}`,class:t.normalizeClass(["hison-drawer-close-btn","hison-pos-right","hison-pos-top","hison-size-s",...l.childClassList]),text:l.closeButtonText,title:l.closeButtonTitle||"Close",border:l.closeButtonBorder,"background-type":l.closeButtonBackgroundType,onClick:l.onClickClose},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","border","background-type","onClick"])]):t.createCommentVNode("",!0),t.createElementVNode("div",ke,[t.renderSlot(l.$slots,"default")])],38)],6)],2)}const Te=be._export_sfc(Se,[["render",Be]]);exports.default=Te;