hisonvue 1.0.0

package/dist/HBaggie-D_7mEiuV.mjs

@@ -0,0 +1,283 @@
+import { defineComponent as W, ref as o, computed as u, onMounted as X, onBeforeUnmount as _, watch as i, nextTick as C, unref as z, createElementBlock as V, openBlock as $, normalizeStyle as L, normalizeClass as q, createElementVNode as ee, createCommentVNode as se, renderSlot as K, withKeys as H, withModifiers as P, toDisplayString as te } from "vue";
+import { B as ne, f as T, S as ae, i as oe, g as ie, u as le, e as ue, t as re, b as U, h as S, r as de, c as ge, d as be } from "./index-DUh7pai4.mjs";
+import { r as D, a as ve } from "./setButtonCssEvent-dBs1GcAh.mjs";
+import { _ as ce } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const fe = {
+  /**
+   * Unique identifier for the baggie instance.
+   * - You can later retrieve its methods via `hison.component.getBaggie(id)`
+   * - Duplicate `id` values will throw an error at mount time
+   */
+  id: { type: String, required: !1 },
+  /**
+   * Custom class applied to the **anchor scope** (the wrapper that contains target + badge).
+   * - 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) applied to the **badge element** (not to the anchor).
+   * - Accepts string, object, or array of objects (Vue style binding formats)
+   * - Use this for badge-specific size/spacing overrides
+   */
+  style: {
+    type: [String, Object, Array],
+    required: !1
+  },
+  /**
+   * Controls visibility of the **anchor block** (target + badge container).
+   * - When `false`, both target and badge area are hidden from layout via `hison-display-none`
+   * - Default: `true`
+   */
+  visible: { type: Boolean, default: !0 },
+  /**
+   * Controls visibility of the **badge only** (target stays visible).
+   * - Useful to keep the target interactive while toggling the badge bubble
+   * - Default: `true`
+   */
+  baggieVisible: { type: Boolean, default: !0 },
+  /**
+   * Stacking order base for the baggie.
+   * - Applied to the **anchor** as `z-index: zIndex`
+   * - The **badge** renders above the anchor using `zIndex + 1`
+   * - Default: `1000`
+   */
+  zIndex: { type: Number, default: 1e3 },
+  /**
+   * On-target position where the badge is pinned (grid overlay).
+   * - Tokens: 'top-left' | 'top-center' | 'top-right' |
+   *           'middle-left' | 'middle-center' | 'middle-right' |
+   *           'bottom-left' | 'bottom-center' | 'bottom-right'
+   * - Default: `top-right`
+   */
+  position: {
+    type: String,
+    default: oe.topRight,
+    validator: (e) => ae.includes(e)
+  },
+  /**
+   * Text content rendered inside the badge when the `badge` slot is not provided.
+   * - If slot `#badge` exists, this prop is ignored
+   */
+  text: { type: String, required: !1 },
+  /**
+   * Badge background mode.
+   * - One of: `'empty' | 'transparent' | 'filled'` (see `BackgroundType`)
+   * - Default: `filled`
+   */
+  backgroundType: {
+    type: String,
+    default: T.filled,
+    validator: (e) => ne.includes(e)
+  },
+  /**
+   * Whether the badge renders with border styling (component theme shadow).
+   * - Default: `true`
+   */
+  border: { type: Boolean, default: !0 },
+  /**
+   * Badge shape.
+   * - Tokens: `'square' | 'rounded' | 'circle'`
+   * - Default: `'rounded'`
+   */
+  shape: {
+    type: String,
+    default: "rounded",
+    validator: (e) => ["square", "rounded", "circle"].includes(e)
+  },
+  /**
+   * Controls keyboard focus order of the badge (if interactive).
+   * - `null` or `''` removes `tabindex` (not focusable)
+   * - `0` enables natural tab navigation; positive numbers set custom order
+   * - Default: `null`
+   */
+  tabIndex: {
+    type: [Number, String],
+    default: null,
+    validator: (e) => e === null || e === "" || !isNaN(+e) && isFinite(+e)
+  },
+  /**
+   * Enables button-like interaction styling/behavior on the badge.
+   * - Applies CSS state classes via `addButtonCssEvent` (focus/hover/active)
+   * - Default: `false`
+   */
+  buttonEnabled: { type: Boolean, default: !1 }
+}, me = W({
+  name: "HBaggie",
+  props: fe,
+  inheritAttrs: !1,
+  emits: ["mounted", "responsive-change", "click", "mousedown", "mouseup", "mouseover", "mouseout"],
+  setup(e, { emit: n }) {
+    const l = e.id || ie(), k = `hbaggie:${l}`, E = le(), M = o(null), a = o(null), b = o(e.visible), v = o(e.baggieVisible), d = o(e.zIndex ?? 1e3), c = o(e.position), f = o(e.text ?? ""), m = o(e.border ?? !0), y = o(e.backgroundType || T.filled), g = o(e.shape || "rounded"), p = o(
+      e.tabIndex !== null && e.tabIndex !== "" ? Number(e.tabIndex) : null
+    ), r = o(e.buttonEnabled ?? !1), O = u(() => b.value ? "" : "hison-display-none"), j = u(() => v.value ? "" : "hison-display-none"), F = u(() => m.value ? "hison-border" : ""), Z = u(() => {
+      switch (y.value) {
+        case T.transparent:
+          return "hison-bg-transparent";
+        case T.empty:
+          return "hison-bg-empty";
+        default:
+          return "hison-bg-filled";
+      }
+    }), x = u(() => g.value === "circle" ? "hison-baggie-shape-circle" : g.value === "square" ? "hison-baggie-shape-square" : "hison-baggie-shape-rounded"), B = o([]), N = () => {
+      B.value = ue(re(e.class) || "", E.value), U(B.value, "size", S.componentStyle.size), U(B.value, "color", "primary");
+    }, G = u(() => `hison-baggie-pos-${c.value}`), Y = u(() => ({ zIndex: d.value })), J = u(() => ({ zIndex: d.value + 1 })), I = (s = !0) => {
+      const t = a.value;
+      t && (D(t), s && r.value && ve(t));
+    }, A = (s) => {
+      r.value && n("click", s, z(h));
+    }, Q = () => {
+      r.value && A(new MouseEvent("click"));
+    }, h = o(null), R = () => {
+      S.component.baggieList[l] && S.component.baggieList[l].isHisonvueComponent && console.warn(`[Hisonvue] The baggie ID is at risk of being duplicated. ${l}`), de(k, () => {
+        w(), C(R);
+      }), N(), C(() => I(!0)), h.value = {
+        isHisonvueComponent: !0,
+        getId: () => l,
+        getType: () => "baggie",
+        isVisible: () => b.value,
+        setVisible: (s) => {
+          b.value = s;
+        },
+        isBaggieVisible: () => v.value,
+        setBaggieVisible: (s) => {
+          v.value = s;
+        },
+        getZIndex: () => d.value,
+        setZIndex: (s) => {
+          d.value = s;
+        },
+        getPosition: () => c.value,
+        setPosition: (s) => {
+          c.value = s;
+        },
+        getText: () => f.value,
+        setText: (s) => {
+          f.value = s;
+        },
+        isBorder: () => m.value,
+        setBorder: (s) => {
+          m.value = s;
+        },
+        getBackgroundType: () => y.value,
+        setBackgroundType: (s) => {
+          y.value = s;
+        },
+        getShape: () => g.value,
+        setShape: (s) => {
+          g.value = s;
+        },
+        getTabIndex: () => p.value,
+        setTabIndex: (s) => {
+          p.value = s != null ? Number(s) : null;
+        },
+        isButtonEnabled: () => r.value,
+        setButtonEnabled: (s) => {
+          r.value = s, C(() => I(!0));
+        },
+        reload: () => ge(k)
+      }, S.component.baggieList[l] = h.value, n("mounted", h.value);
+    }, w = () => {
+      be(k);
+      const s = a.value;
+      s && D(s), delete S.component.baggieList[l];
+    };
+    return X(R), _(w), i(E, (s) => {
+      N(), n("responsive-change", s);
+    }), i(() => e.visible, (s) => {
+      s !== b.value && (b.value = !!s);
+    }), i(() => e.baggieVisible, (s) => {
+      s !== v.value && (v.value = !!s, C(() => I(!0)));
+    }), i(() => e.zIndex, (s) => {
+      const t = Number(s);
+      Number.isFinite(t) && t !== d.value && (d.value = t);
+    }), i(() => e.position, (s) => {
+      typeof s == "string" && s !== c.value && (c.value = s);
+    }), i(() => e.text, (s) => {
+      const t = s ?? "";
+      t !== f.value && (f.value = t);
+    }), i(() => e.border, (s) => {
+      const t = !!s;
+      t !== m.value && (m.value = t);
+    }), i(() => e.backgroundType, (s) => {
+      s && s !== y.value && (y.value = s);
+    }), i(() => e.shape, (s) => {
+      (s === "square" || s === "rounded" || s === "circle") && s !== g.value && (g.value = s);
+    }), i(() => e.tabIndex, (s) => {
+      const t = s === null || s === "" ? null : Number(s);
+      t !== p.value && (p.value = t);
+    }), i(() => e.buttonEnabled, (s) => {
+      const t = !!s;
+      t !== r.value && (r.value = t, C(() => I(!0)));
+    }), i(() => e.class, () => N()), {
+      id: l,
+      props: e,
+      anchorRef: M,
+      baggieRef: a,
+      text: f,
+      visibleClass: O,
+      baggieVisibleClass: j,
+      responsiveClassList: B,
+      backgroundTypeClass: Z,
+      borderClass: F,
+      shapeClass: x,
+      positionClass: G,
+      anchorStyle: Y,
+      badgeStyle: J,
+      baggieMethods: u(() => z(h)),
+      tabIndex: p,
+      buttonEnabled: r,
+      onClick: A,
+      onKeyActivate: Q
+    };
+  }
+}), ye = { class: "hison-baggie-target" }, pe = ["tabindex"], he = {
+  key: 1,
+  class: "hison-baggie-text"
+};
+function Ce(e, n, l, k, E, M) {
+  return $(), V("span", {
+    ref: "anchorRef",
+    class: q(["hison-baggie-anchor", e.visibleClass, ...e.responsiveClassList]),
+    style: L(e.anchorStyle),
+    onMousedown: n[3] || (n[3] = (a) => e.$emit("mousedown", a, e.baggieMethods)),
+    onMouseup: n[4] || (n[4] = (a) => e.$emit("mouseup", a, e.baggieMethods)),
+    onMouseover: n[5] || (n[5] = (a) => e.$emit("mouseover", a, e.baggieMethods)),
+    onMouseout: n[6] || (n[6] = (a) => e.$emit("mouseout", a, e.baggieMethods))
+  }, [
+    ee("span", ye, [
+      K(e.$slots, "default")
+    ]),
+    e.baggieVisible ? ($(), V("div", {
+      key: 0,
+      ref: "baggieRef",
+      class: q([
+        "hison-baggie",
+        e.positionClass,
+        e.backgroundTypeClass,
+        e.borderClass,
+        e.shapeClass,
+        e.baggieVisibleClass,
+        e.buttonEnabled ? "hison-baggie-button" : null
+      ]),
+      style: L([e.badgeStyle, e.props.style]),
+      role: "status",
+      tabindex: e.tabIndex ?? void 0,
+      onClick: n[0] || (n[0] = (...a) => e.onClick && e.onClick(...a)),
+      onKeydown: [
+        n[1] || (n[1] = H(P((...a) => e.onKeyActivate && e.onKeyActivate(...a), ["prevent"]), ["enter"])),
+        n[2] || (n[2] = H(P((...a) => e.onKeyActivate && e.onKeyActivate(...a), ["prevent"]), ["space"]))
+      ]
+    }, [
+      e.$slots.badge ? K(e.$slots, "badge", { key: 0 }) : ($(), V("span", he, te(e.text), 1))
+    ], 46, pe)) : se("", !0)
+  ], 38);
+}
+const Te = /* @__PURE__ */ ce(me, [["render", Ce]]);
+export {
+  Te as default
+};

package/dist/HBanner-DmcMOFqS.mjs

@@ -0,0 +1,420 @@
+import { defineComponent as pe, useSlots as Ce, ref as o, computed as v, onMounted as ke, onBeforeUnmount as Be, watch as s, unref as Ie, nextTick as Me, resolveComponent as Se, createElementBlock as c, openBlock as u, normalizeClass as g, createElementVNode as M, withModifiers as Ne, normalizeStyle as ee, createCommentVNode as X, Fragment as te, renderList as ne, createBlock as Te, resolveDynamicComponent as we, renderSlot as oe, createVNode as ae, withCtx as se } from "vue";
+import { B as Pe, f as x, g as De, u as Le, j as le, t as Y, e as He, a as $e, b as ie, h as S, r as Ae, c as Ee } from "./index-DUh7pai4.mjs";
+import Oe from "./HButton-DAriO81x.mjs";
+import { _ as Fe } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const Re = {
+  /**
+   * Unique identifier for the banner.
+   * - Access runtime methods via `hison.component.getBanner(id)`
+   * - ⚠️ Duplicate `id` values will throw an error at mount time
+   */
+  id: { type: String, required: !1 },
+  /**
+   * Custom class string applied to the banner container.
+   * - Supports `hison-col-*`, `hison-size-*`, `hison-color-*`, etc.
+   * - Processed by hison responsive extractor
+   */
+  class: {
+    type: [String, Array, Object],
+    required: !1
+  },
+  /**
+   * Inline style for the banner container.
+   */
+  style: {
+    type: [String, Object, Array],
+    required: !1
+  },
+  /**
+   * Controls visibility of the banner (entire frame).
+   */
+  visible: { type: Boolean, default: !0 },
+  /**
+   * Background type of the banner frame.
+   * - 'filled' | 'empty' | 'transparent'
+   */
+  backgroundType: {
+    type: String,
+    default: x.transparent,
+    validator: (t) => Pe.includes(t)
+  },
+  /**
+   * Whether to show border (rendered as subtle box-shadow).
+   * - Default: false (no border)
+   */
+  border: { type: Boolean, default: !1 },
+  /**
+   * Zero-based index of the slide to show first.
+   * - Applied on mount.
+   * - If this prop changes later, the banner will navigate to that index.
+   *
+   * @default 0
+   */
+  initialIndex: { type: Number, default: 0 },
+  /**
+   * Transition duration in milliseconds for slide movement.
+   */
+  transitionMs: { type: Number, default: 600 },
+  /**
+   * Navigation button style: 'chevron' | 'triangle'
+   */
+  navButtonStyle: {
+    type: String,
+    default: "chevron",
+    validator: (t) => t === "chevron" || t === "triangle"
+  },
+  /**
+   * Whether to show prev/next navigation buttons.
+   */
+  showNavButtons: { type: Boolean, default: !0 },
+  /**
+   * Whether to show page indicators (● ● ●).
+   */
+  showIndicators: { type: Boolean, default: !0 },
+  /**
+   * Position of the page indicators (dots).
+   * - 'bottom': below the banner (outside)
+   * - 'overlay': overlaid inside the banner near the bottom edge
+   *
+   * @default 'bottom'
+   */
+  indicatorsPosition: {
+    type: String,
+    default: "bottom",
+    validator: (t) => t === "bottom" || t === "overlay"
+  },
+  /**
+   * Whether indicators are clickable.
+   */
+  indicatorClickable: { type: Boolean, default: !0 },
+  /**
+   * Autoplay interval in ms.
+   * - < 100 disables autoplay.
+   */
+  autoIntervalMs: { type: Number, default: 0 },
+  /**
+   * Autoplay direction: 'next' or 'prev'.
+   */
+  autoDirection: {
+    type: String,
+    default: "next",
+    validator: (t) => t === "next" || t === "prev"
+  },
+  /**
+   * Whether to loop at edges.
+   * - If true: goes from last → first, first → last
+   * - If false: disables navigation at edges
+   */
+  loop: { type: Boolean, default: !0 },
+  /**
+   * Whether to pause autoplay when mouse hovering on banner.
+   */
+  pauseOnHover: { type: Boolean, default: !0 }
+}, Ve = pe({
+  name: "HBanner",
+  components: { HButton: Oe },
+  props: Re,
+  emits: [
+    "mounted",
+    "responsive-change",
+    "change",
+    "next",
+    "prev",
+    "autoplay-start",
+    "autoplay-stop"
+  ],
+  setup(t, { emit: n }) {
+    const d = t.id ? t.id : De(), j = `hbanner:${d}`, q = Le(), N = Ce(), l = o(null), a = o(null), h = o(t.visible), ue = v(() => h.value ? "" : "hison-display-none"), T = o(t.border ?? !1), re = v(() => T.value ? "hison-border" : ""), w = o(t.backgroundType), ve = v(() => {
+      switch (w.value) {
+        case x.empty:
+          return "hison-bg-empty";
+        case x.transparent:
+          return "hison-bg-transparent";
+        default:
+          return "hison-bg-filled";
+      }
+    }), P = o(t.navButtonStyle), D = o(t.showNavButtons), L = o(t.showIndicators), H = o(t.indicatorsPosition), ce = v(
+      () => H.value === "overlay" ? "hison-banner-indicators-overlay" : "hison-banner-indicators-bottom"
+    ), $ = o(t.indicatorClickable), A = o(t.autoIntervalMs), E = o(t.autoDirection), b = o(t.loop), p = o(t.pauseOnHover), O = o(t.transitionMs);
+    let f;
+    const i = o(0), C = o(t.initialIndex ?? 0), J = v(() => {
+      var r;
+      return ((r = N.default) == null ? void 0 : r.call(N)) ?? [];
+    }), y = v(() => J.value.length), m = o([]), G = () => {
+      m.value = He(Y(t.class) || "", q.value), $e(m.value, "col") === -1 && m.value.push("hison-col-12"), ie(m.value, "size", S.componentStyle.size), ie(m.value, "color", "primary");
+    }, de = v(() => {
+      const e = [];
+      return e.push(...le(Y(t.class) || "", "size")), e.push(...le(Y(t.class) || "", "color")), e;
+    }), Q = v(() => !b.value && i.value <= 0), W = v(() => !b.value && i.value >= Math.max(0, y.value - 1)), be = v(() => ({
+      display: "flex",
+      flexDirection: "row",
+      width: "100%",
+      transform: `translateX(${-i.value * 100}%)`,
+      transition: `transform ${Math.max(0, O.value)}ms ease`
+    })), F = (e) => {
+      if (y.value <= 0) return 0;
+      if (b.value) {
+        const r = y.value;
+        return (e % r + r) % r;
+      }
+      return Math.min(Math.max(0, e), y.value - 1);
+    }, k = (e) => {
+      const r = i.value, K = F(e);
+      r !== K && (i.value = K, n("change", K, l.value));
+    }, R = () => {
+      if (!b.value && Q.value) return;
+      const e = F(i.value - 1);
+      i.value = e, n("prev", e, l.value), n("change", e, l.value);
+    }, V = () => {
+      if (!b.value && W.value) return;
+      const e = F(i.value + 1);
+      i.value = e, n("next", e, l.value), n("change", e, l.value);
+    }, z = () => {
+      f && (window.clearInterval(f), f = void 0, n("autoplay-stop", l.value));
+    }, B = () => {
+      z();
+      const e = Number(A.value);
+      !Number.isFinite(e) || e < 100 || y.value <= 1 || (f = window.setInterval(() => {
+        E.value === "prev" ? R() : V();
+      }, e), n("autoplay-start", l.value));
+    }, he = () => {
+      p.value && z();
+    }, ye = () => {
+      p.value && B();
+    }, U = o(null), I = o(0), fe = (e) => {
+      !e.touches || e.touches.length !== 1 || (U.value = e.touches[0].clientX, I.value = 0);
+    }, me = (e) => {
+      U.value == null || !e.touches || e.touches.length !== 1 || (I.value = e.touches[0].clientX - U.value);
+    }, ge = () => {
+      Math.abs(I.value) > 40 && (I.value > 0 ? R() : V()), U.value = null, I.value = 0;
+    }, Z = () => {
+      S.component.bannerList[d] && S.component.bannerList[d].isHisonvueComponent && console.warn(`[Hisonvue] The banner ID is at risk of being duplicated. ${d}`), Ae(j, () => {
+        _(), Me(Z);
+      }), G(), l.value = {
+        isHisonvueComponent: !0,
+        getId: () => d,
+        getType: () => "banner",
+        isVisible: () => h.value,
+        setVisible: (e) => {
+          h.value = e;
+        },
+        isBorder: () => T.value,
+        setBorder: (e) => {
+          T.value = e;
+        },
+        getBackgroundType: () => w.value,
+        setBackgroundType: (e) => {
+          w.value = e;
+        },
+        getCurrentIndex: () => i.value,
+        setCurrentIndex: (e) => {
+          k(e);
+        },
+        getInitialIndex: () => C.value,
+        setInitialIndex: (e) => {
+          C.value = Number.isFinite(e) ? Math.max(0, Math.trunc(e)) : 0, k(C.value);
+        },
+        getSlideCount: () => y.value,
+        next: () => {
+          V();
+        },
+        prev: () => {
+          R();
+        },
+        goTo: (e) => {
+          k(e);
+        },
+        getNavButtonStyle: () => P.value,
+        setNavButtonStyle: (e) => {
+          P.value = e;
+        },
+        isShowNavButtons: () => D.value,
+        setShowNavButtons: (e) => {
+          D.value = e;
+        },
+        isShowIndicators: () => L.value,
+        setShowIndicators: (e) => {
+          L.value = e;
+        },
+        getIndicatorsPosition: () => H.value,
+        setIndicatorsPosition: (e) => {
+          H.value = e;
+        },
+        isIndicatorClickable: () => $.value,
+        setIndicatorClickable: (e) => {
+          $.value = e;
+        },
+        getAutoInterval: () => A.value,
+        setAutoInterval: (e) => {
+          A.value = Number(e), f && B();
+        },
+        getAutoDirection: () => E.value,
+        setAutoDirection: (e) => {
+          E.value = e;
+        },
+        isLoop: () => b.value,
+        setLoop: (e) => {
+          b.value = e;
+        },
+        isPauseOnHover: () => p.value,
+        setPauseOnHover: (e) => {
+          p.value = e;
+        },
+        startAuto: () => {
+          B();
+        },
+        stopAuto: () => {
+          z();
+        },
+        getTransitionMs: () => O.value,
+        setTransitionMs: (e) => {
+          O.value = Math.max(0, Number(e) || 0);
+        },
+        reload: () => Ee(j)
+      }, S.component.bannerList[d] = l.value, n("mounted", l.value), i.value = F(C.value), B();
+    }, _ = () => {
+      z(), delete S.component.bannerList[d];
+    };
+    return ke(Z), Be(_), s(q, (e) => {
+      G(), n("responsive-change", e);
+    }), s(() => t.visible, (e) => h.value = e), s(() => t.border, (e) => T.value = !!e), s(() => t.backgroundType, (e) => w.value = e), s(() => t.navButtonStyle, (e) => P.value = e), s(() => t.showNavButtons, (e) => D.value = e), s(() => t.showIndicators, (e) => L.value = e), s(() => t.indicatorsPosition, (e) => {
+      H.value = e;
+    }), s(() => t.indicatorClickable, (e) => $.value = e), s(() => t.transitionMs, (e) => O.value = e), s(() => t.autoIntervalMs, (e) => {
+      A.value = e, f && B();
+    }), s(() => t.autoDirection, (e) => E.value = e), s(() => t.loop, (e) => b.value = e), s(() => t.pauseOnHover, (e) => p.value = e), s(() => t.initialIndex, (e) => {
+      const r = Number.isFinite(e) ? Math.max(0, Math.trunc(e)) : 0;
+      C.value = r, k(r);
+    }), s(() => t.class, () => {
+      G();
+    }), {
+      id: d,
+      props: t,
+      bannerMethods: v(() => Ie(l)),
+      visibleClass: ue,
+      borderClass: re,
+      backgroundTypeClass: ve,
+      responsiveClassList: m,
+      buttonClassList: de,
+      slideNodes: J,
+      slideCount: y,
+      currentIndex: i,
+      navButtonStyle: P,
+      showNavButtons: D,
+      showIndicators: L,
+      indicatorsPositionClass: ce,
+      indicatorClickable: $,
+      isPrevDisabled: Q,
+      isNextDisabled: W,
+      trackStyle: be,
+      trackRef: a,
+      goPrev: R,
+      goNext: V,
+      goTo: k,
+      onMouseEnter: he,
+      onMouseLeave: ye,
+      onTouchStart: fe,
+      onTouchMove: me,
+      onTouchEnd: ge
+    };
+  }
+}), ze = { class: "hison-banner-viewport" }, Ue = {
+  key: 0,
+  class: "hison-banner-nav"
+}, Xe = { class: "hison-banner-nav-prev" }, je = { key: 0 }, qe = { key: 1 }, Ge = { class: "hison-banner-nav-next" }, Ke = { key: 0 }, Ye = { key: 1 }, xe = ["title", "onClick"];
+function Je(t, n, d, j, q, N) {
+  const l = Se("HButton");
+  return u(), c("div", {
+    class: g([
+      "hison-wrapper",
+      ...t.responsiveClassList,
+      t.visibleClass
+    ])
+  }, [
+    M("div", {
+      class: g([
+        "hison-banner",
+        t.borderClass,
+        t.backgroundTypeClass
+      ]),
+      style: ee(t.props.style),
+      onMouseenter: n[0] || (n[0] = (...a) => t.onMouseEnter && t.onMouseEnter(...a)),
+      onMouseleave: n[1] || (n[1] = (...a) => t.onMouseLeave && t.onMouseLeave(...a)),
+      onTouchstartPassive: n[2] || (n[2] = (...a) => t.onTouchStart && t.onTouchStart(...a)),
+      onTouchmove: n[3] || (n[3] = Ne((...a) => t.onTouchMove && t.onTouchMove(...a), ["prevent"])),
+      onTouchendPassive: n[4] || (n[4] = (...a) => t.onTouchEnd && t.onTouchEnd(...a))
+    }, [
+      M("div", ze, [
+        M("div", {
+          ref: "trackRef",
+          class: "hison-banner-track",
+          style: ee(t.trackStyle)
+        }, [
+          (u(!0), c(te, null, ne(t.slideNodes, (a, h) => (u(), c("div", {
+            key: h,
+            class: "hison-banner-slide"
+          }, [
+            (u(), Te(we(a)))
+          ]))), 128))
+        ], 4)
+      ]),
+      t.showNavButtons && t.slideCount > 1 ? (u(), c("div", Ue, [
+        M("div", Xe, [
+          oe(t.$slots, "prev-button", {
+            prev: t.goPrev,
+            disabled: t.isPrevDisabled
+          }, () => [
+            ae(l, {
+              id: `hison_banner_prev_button_${t.id}`,
+              disable: t.isPrevDisabled,
+              class: g(["hison-col-12", ...t.buttonClassList]),
+              "background-type": "transparent",
+              border: !1,
+              onClick: t.goPrev
+            }, {
+              icon: se(() => [
+                t.navButtonStyle === "chevron" ? (u(), c("span", je, "〈")) : t.navButtonStyle === "triangle" ? (u(), c("span", qe, "◀")) : X("", !0)
+              ]),
+              _: 1
+            }, 8, ["id", "disable", "class", "onClick"])
+          ])
+        ]),
+        M("div", Ge, [
+          oe(t.$slots, "next-button", {
+            next: t.goNext,
+            disabled: t.isNextDisabled
+          }, () => [
+            ae(l, {
+              id: `hison_banner_next_button_${t.id}`,
+              disable: t.isNextDisabled,
+              class: g(["hison-col-12", ...t.buttonClassList]),
+              "background-type": "transparent",
+              border: !1,
+              onClick: t.goNext
+            }, {
+              icon: se(() => [
+                t.navButtonStyle === "chevron" ? (u(), c("span", Ke, "〉")) : t.navButtonStyle === "triangle" ? (u(), c("span", Ye, "▶")) : X("", !0)
+              ]),
+              _: 1
+            }, 8, ["id", "disable", "class", "onClick"])
+          ])
+        ])
+      ])) : X("", !0),
+      t.showIndicators && t.slideCount > 0 ? (u(), c("div", {
+        key: 1,
+        class: g(["hison-banner-indicators", [t.indicatorsPositionClass]])
+      }, [
+        (u(!0), c(te, null, ne(t.slideCount, (a) => (u(), c("button", {
+          key: a,
+          class: g(["hison-banner-indicator", { active: t.currentIndex === a - 1, "no-pointer": !t.indicatorClickable }]),
+          title: `Go to ${a}`,
+          type: "button",
+          onClick: (h) => t.indicatorClickable ? t.goTo(a - 1) : null
+        }, " ● ", 10, xe))), 128))
+      ], 2)) : X("", !0)
+    ], 38)
+  ], 2);
+}
+const et = /* @__PURE__ */ Fe(Ve, [["render", Je]]);
+export {
+  et as default
+};