hisonvue 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 hisondev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files hisonvue, to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,248 @@
+# HisonVue
+
+A **Vue 3 UI component library** designed for enterprise-grade apps.
+Built on top of [**hisonjs**](https://github.com/hisondev/hisonjs), it bridges **frontend components** and **backend-ready data utilities** into one unified ecosystem.
+
+## ✨ About
+
+**HisonVue** provides a comprehensive set of UI components with **runtime APIs**, **global theming**, and **SSR compatibility**. It extends the capabilities of [hisonjs](https://www.npmjs.com/package/hisonjs), meaning you not only get visual components but also access to data modeling, API-link communication, utilities, and security features.
+
+* Written in **TypeScript** with full IntelliSense support
+* Works with **Vue CLI, Vite, Nuxt 3 (SSR)** out of the box
+* Tree-shakable and modular imports
+* CSS variables & responsive class system (`hison-col-*`, `hison-size-*`, `hison-color-*`)
+* Runtime control for every component via `hison.component.getXxx(id)`
+* Extends `hisonjs` → brings **utils, data models, API-link, shield security**
+
+---
+
+## 📦 Installation
+
+```bash
+npm install hisonvue
+```
+
+Import the global CSS once:
+
+```ts
+import 'hisonvue/style.css'
+```
+
+---
+
+## 🚀 Usage
+
+### 1️⃣ Global registration (Vue 3 / Vite / Vue CLI)
+
+```ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import { hisonvue, getDefaultHisonConfig, Size, type HisonConfig } from 'hisonvue'
+import 'hisonvue/style.css'
+
+const app = createApp(App)
+
+// Customize global configuration
+const hisonConfig: HisonConfig = getDefaultHisonConfig()
+hisonConfig.componentStyle.primaryColor = '#123456'
+hisonConfig.componentStyle.size = Size.s
+
+app.use(hisonvue, hisonConfig)
+app.mount('#app')
+```
+
+✅ Once registered globally, you can use any component:
+
+```vue
+<HButton id="b1" text="Click" class="hison-color-primary" />
+<HLayout class="hison-col-12">
+  <HLabel text="Hello World" />
+</HLayout>
+```
+
+---
+
+### 2️⃣ Nuxt 3 integration (SSR-ready)
+
+HisonVue ships with an SSR-safe wrapper (`createSSRClientOnly`). For Nuxt, register via plugin:
+
+**`/plugins/hisonvue.client.ts`**
+
+```ts
+import { defineNuxtPlugin } from '#app'
+import { hisonvue, getDefaultHisonConfig, Size, type HisonConfig } from 'hisonvue'
+import 'hisonvue/style.css'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const config: HisonConfig = getDefaultHisonConfig()
+  config.componentStyle.primaryColor = '#165DFF'
+  config.componentStyle.size = Size.m
+  config.componentStyle.invertColor = false
+
+  nuxtApp.vueApp.use(hisonvue, config)
+})
+```
+
+✅ Components are globally available in SSR without hydration errors.
+
+---
+
+### 3️⃣ Runtime control with `hison.component`
+
+Every component is registered with a unique `id`. Use that to access methods:
+
+```vue
+<HButton id="b1" text="Left" class="hison-color-primary" />
+<HButton id="b2" text="Right" class="hison-color-warning" />
+```
+
+```ts
+import { hison } from 'hisonvue'
+
+// Toggle border
+const b1 = hison.component.getButton('b1')!
+b1.setBorder(!b1.isBorder())
+
+// Open a modal
+const modal = hison.component.getModal('modal01')
+modal?.open()
+modal?.setCaption('Hello Modal')
+```
+
+---
+
+### 4️⃣ Global theming with `hison.style`
+
+Change theme dynamically at runtime:
+
+```ts
+hison.style.setPrimaryColor('#009688')
+hison.style.setSize(Size.l)
+hison.style.setInvertColor(true)
+
+console.log(hison.style.getPrimaryHoverColor())
+```
+
+---
+
+### 5️⃣ CSS Event Hooks (`hison.cssEvent`)
+
+Attach global before/after hooks for Button/Input/Textbox events:
+
+```ts
+hison.cssEvent.setButtonOnBefoerClick((e) => {
+  console.log('before click', e)
+  return true // false cancels the click
+})
+
+hison.cssEvent.setButtonOnAfterClick((e) => {
+  console.log('after click', e)
+})
+```
+
+⚠️ Note: `Befoer` is intentionally spelled this way in the API — use as-is.
+
+---
+
+## 📚 Available Components
+
+HisonVue provides **20+ UI components**:
+
+* **Layout**: `HLayout`, `HGap`, `HModal`, `HPopup`, `HBanner`, `HAccordion`
+* **Form**: `HInput`, `HInputGroup`, `HFileset`, `HImagebox`, `HDropdown`
+* **UI Elements**: `HButton`, `HLabel`, `HList`, `HParagraph`, `HBaggie`, `HCaption`
+* **Data Views**: `HGrid` (via vanillagrid2), `HTable`, `HNote` (via vanillanote2), `HChart` (via Chart.js), `HCalendar` (via vue-cal)
+* **Feedback**: `HSpinner`, `HPagination`, `HDrawer`
+
+Each component exposes a **typed methods object** via `hison.component.getXxx(id)`.
+
+---
+
+## ⚙️ Global Configuration (`HisonConfig`)
+
+`getDefaultHisonConfig()` returns a fully typed configuration object you can customize.
+
+* **UtilsConfig** → date/time/number formatting defaults
+* **ShieldConfig** → security: block devtools, restrict IPs, freeze objects
+* **DataConfig** → control how values are copied into `DataModel`
+* **LinkConfig** → API-link defaults, before/after hooks
+* **ComponentStyle** → global theme (colors, sizes, fonts)
+* **Component** → external libs (vanillanote2, vanillagrid2, chart.js)
+* **Event.cssEvent** → global CSS hooks
+
+Example:
+
+```ts
+const cfg = getDefaultHisonConfig()
+cfg.componentStyle.primaryColor = '#222'
+cfg.componentStyle.size = Size.s
+cfg.link.timeout = 15000
+cfg.shield.isPossibleOpenDevTool = false
+```
+
+---
+
+## 🔗 Extended Hison Interface
+
+HisonVue exports a singleton `hison` that **extends** `hisonjs.Hison`:
+
+✅ All **hisonjs** features:
+
+* `utils` (string/date/number helpers)
+* `data` (DataWrapper, DataModel)
+* `link` (API communication with Spring backend)
+* `shield` (security: devtool blocking, freeze, URL/IP restrictions)
+
+➕ Additional Vue features:
+
+* `component.getXxx(id)` → runtime control of every Vue component
+* `style.setXxx/getXxx` → global theming API
+* `cssEvent.setXxx` → global before/after hooks for UI events
+* File upload defaults: `setMaxFilesetSize`, `setMaxFilesetTotalSize`
+
+This makes **hisonvue** a **fullstack bridge** between Vue frontend and Spring backend.
+
+---
+
+## ✅ Example Fullstack Flow
+
+```ts
+import { hison } from 'hisonvue'
+
+// Build request
+define const req = new hison.data.DataWrapper({ userId: 1 })
+
+// Send to Spring backend via api-link
+const api = new hison.link.ApiPost("UserService.getUser")
+const resp = await api.call(req)
+
+// Update UI
+const btn = hison.component.getButton('saveBtn')
+btn?.setDisable(true)
+
+const note = hison.component.getNote('editor')
+note?.setNoteData(resp.data)
+```
+
+---
+
+## 🛠 Build & Test (Contributors)
+
+```bash
+git clone https://github.com/hisondev/hisonvue.git
+cd hisonvue
+npm install
+
+# Build library
+npm run build
+
+# Run playgrounds
+cd playground && npm run dev
+cd ../playground-nuxt && npm run dev
+```
+
+---
+
+## 📄 License
+
+MIT © hisondev

package/dist/HAccordion-CPtgQUK0.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),l=require("./index-BmKMHsSZ.js"),V=require("./setButtonCssEvent-B9WTs2X7.js"),q=require("./_plugin-vue_export-helper-BHFhmbuH.js"),z={id:{type:String,required:!1},class:{type:[String,Array,Object],required:!1},style:{type:[String,Object,Array],required:!1},headerStyle:{type:[String,Object,Array],required:!1},contentStyle:{type:[String,Object,Array],required:!1},visible:{type:Boolean,default:!0},defaultOpen:{type:Boolean,default:!1},title:{type:String,default:""},textAlign:{type:String,default:"left",validator:n=>l.TEXT_ALIGN_VALUES.includes(n)},animate:{type:Boolean,default:!0},duration:{type:Number,default:220,validator:n=>Number.isFinite(n)&&n>=0},easing:{type:String,default:"ease"},tabIndex:{type:[Number,String],default:null,validator:n=>n===null||n===""||!isNaN(+n)&&isFinite(+n)}},R=t.defineComponent({name:"HAccordion",props:z,inheritAttrs:!1,emits:["mounted","responsive-change","open","close","toggle"],setup(n,{emit:i}){const a=n.id||l.getUUID(),b=`haccordion:${a}`,s=t.ref(null),N=t.ref(null),r=l.useDevice(),v=t.ref(!!n.visible),f=t.ref(n.title??""),u=t.ref(!!n.defaultOpen),g=t.ref(n.textAlign??"left"),m=t.ref(n.animate??!0),h=t.ref(n.duration??500),y=t.ref(n.easing??"ease"),p=t.ref(n.tabIndex!==null&&n.tabIndex!==""?Number(n.tabIndex):null),B=t.computed(()=>v.value?"":"hison-display-none"),c=t.ref([]),E=()=>{c.value=l.extractResponsiveClasses(l.toClassString(n.class)||"",r.value),l.getIndexSpecificClassNameFromClassList(c.value,"col")===-1&&c.value.push("hison-col-12"),l.addComponentNameToClass(c.value,"size",l.hisonCloser.componentStyle.size),l.addComponentNameToClass(c.value,"color","primary")},L=t.computed(()=>({"--hacc-duration":`${h.value}ms`,"--hacc-easing":y.value})),x=t.computed(()=>({})),$=t.computed(()=>({textAlign:g.value})),C=e=>{u.value||(u.value,u.value=!0,i("open",e??null,d.value))},S=e=>{var O;if(!u.value)return;const o=document.activeElement,A=N.value;A&&o&&A.contains(o)&&((O=s.value)==null||O.focus()),u.value=!1,i("close",e??null,d.value)},I=e=>u.value?S(e):C(e),k=e=>{i("toggle",e,d.value),I(e)},d=t.ref(null),T=()=>{l.hisonCloser.component.accordionList[a]&&l.hisonCloser.component.accordionList[a].isHisonvueComponent&&console.warn(`[Hisonvue] The accordion ID is at risk of being duplicated. ${a}`),l.registerReloadable(b,()=>{w(),t.nextTick(T)}),s.value&&V.addButtonCssEvent(s.value),E(),d.value={isHisonvueComponent:!0,getId:()=>a,getType:()=>"accordion",isVisible:()=>v.value,setVisible:e=>{v.value=!!e},isOpen:()=>u.value,open:C,close:S,toggle:I,getTitle:()=>f.value,setTitle:e=>{f.value=e??""},getTextAlign:()=>g.value,setTextAlign:e=>{(e==="left"||e==="center"||e==="right")&&(g.value=e)},getAnimate:()=>m.value,setAnimate:e=>{m.value=!!e},getDuration:()=>h.value,setDuration:e=>{const o=Number(e);Number.isFinite(o)&&o>=0&&(h.value=o)},getEasing:()=>y.value,setEasing:e=>{typeof e=="string"&&(y.value=e)},getTabIndex:()=>p.value,setTabIndex:e=>{p.value=e!=null?Number(e):null},focus:()=>{var e;(e=s.value)==null||e.focus()},reload:()=>l.reloadHisonComponent(b)},l.hisonCloser.component.accordionList[a]=d.value,i("mounted",d.value)},w=()=>{var e;l.unregisterReloadable(b),s.value&&V.removeButtonCssEvent(s.value),(e=l.hisonCloser.component)!=null&&e.accordionList&&delete l.hisonCloser.component.accordionList[a]};return t.onMounted(T),t.onBeforeUnmount(w),t.watch(r,e=>{E(),i("responsive-change",e)}),t.watch(()=>n.visible,e=>{e!==v.value&&(v.value=!!e)}),t.watch(()=>n.title,e=>{const o=e??"";o!==f.value&&(f.value=o)}),t.watch(()=>n.defaultOpen,e=>e?C(null):S(null)),t.watch(()=>n.textAlign,e=>{(e==="left"||e==="center"||e==="right")&&e!==g.value&&(g.value=e)}),t.watch(()=>n.animate,e=>{const o=!!e;o!==m.value&&(m.value=o)}),t.watch(()=>n.duration,e=>{const o=Number(e);Number.isFinite(o)&&o>=0&&o!==h.value&&(h.value=o)}),t.watch(()=>n.easing,e=>{typeof e=="string"&&e!==y.value&&(y.value=e)}),t.watch(()=>n.tabIndex,e=>{const o=e===null||e===""?null:Number(e);o!==p.value&&(p.value=o)}),t.watch(()=>n.class,()=>E()),{headerRef:s,contentRef:N,props:n,visibleClass:B,responsiveClassList:c,isOpen:u,title:f,headerBoxStyle:x,titleInlineStyle:$,rootInlineStyle:L,animate:m,tabIndex:p,onToggleClick:k,open:C,close:S,toggle:I}}}),H=["aria-expanded","tabindex"],D={class:"hison-accordion-toggle"},j=["inert"],F={class:"hison-accordion-panel"},M={class:"hison-accordion-panel-inner"};function U(n,i,a,b,s,N){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["hison-wrapper",...n.responsiveClassList,n.visibleClass])},[t.createElementVNode("div",{class:t.normalizeClass(["hison-accordion",n.isOpen?"hison-open":"",n.animate?"":"hison-no-anim"]),style:t.normalizeStyle([n.rootInlineStyle,n.props.style])},[t.createElementVNode("div",{ref:"headerRef",class:"hison-accordion-header",style:t.normalizeStyle([n.headerBoxStyle,n.props.headerStyle]),role:"button","aria-expanded":n.isOpen?"true":"false",tabindex:n.tabIndex??void 0,onClick:i[0]||(i[0]=r=>n.onToggleClick(r)),onKeydown:[i[1]||(i[1]=t.withKeys(t.withModifiers(r=>n.onToggleClick(r),["prevent"]),["enter"])),i[2]||(i[2]=t.withKeys(t.withModifiers(r=>n.onToggleClick(r),["prevent"]),["space"]))]},[t.createElementVNode("div",{class:"hison-accordion-title",style:t.normalizeStyle([n.titleInlineStyle])},[t.renderSlot(n.$slots,"title",{},()=>[t.createTextVNode(t.toDisplayString(n.title),1)])],4),t.createElementVNode("div",D,[t.renderSlot(n.$slots,"toggle",{},()=>[i[3]||(i[3]=t.createElementVNode("span",{class:"hison-dropdown-caret"},"▾",-1))])])],44,H),t.createElementVNode("div",{ref:"contentRef",class:"hison-accordion-content",style:t.normalizeStyle(n.props.contentStyle),role:"region",inert:!n.isOpen||void 0},[t.createElementVNode("div",F,[t.createElementVNode("div",M,[t.renderSlot(n.$slots,"default")])])],12,j)],6)],2)}const K=q._export_sfc(R,[["render",U]]);exports.default=K;

package/dist/HAccordion-ll-4cIAw.mjs

@@ -0,0 +1,262 @@
+import { defineComponent as M, ref as o, computed as T, onMounted as K, onBeforeUnmount as G, watch as i, nextTick as P, createElementBlock as X, openBlock as J, normalizeClass as w, createElementVNode as c, normalizeStyle as N, withKeys as D, withModifiers as H, renderSlot as L, createTextVNode as Q, toDisplayString as W } from "vue";
+import { T as Y, g as Z, u as _, e as ee, t as te, a as ne, b as q, h as f, r as le, c as oe, d as ie } from "./index-DUh7pai4.mjs";
+import { a as ae, r as se } from "./setButtonCssEvent-dBs1GcAh.mjs";
+import { _ as re } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const ue = {
+  /**
+   * Unique identifier for the accordion.
+   * - Retrieve methods via `hison.component.getAccordion(id)`
+   * - ⚠️ Duplicate `id` will throw at mount time
+   */
+  id: { type: String, required: !1 },
+  /**
+   * Custom class applied to the root container.
+   * - Supports responsive classes: `hison-col-*`, `hison-size-*`, `hison-color-*` with `-mb|-tb|-pc|-wd`
+   */
+  class: {
+    type: [String, Array, Object],
+    required: !1
+  },
+  /**
+   * Inline style for the root.
+   */
+  style: {
+    type: [String, Object, Array],
+    required: !1
+  },
+  /**
+   * Inline style for header box.
+   */
+  headerStyle: {
+    type: [String, Object, Array],
+    required: !1
+  },
+  /**
+   * Inline style for content box.
+   */
+  contentStyle: {
+    type: [String, Object, Array],
+    required: !1
+  },
+  /**
+   * Visibility of the accordion.
+   */
+  visible: { type: Boolean, default: !0 },
+  /**
+   * Initial open state.
+   */
+  defaultOpen: { type: Boolean, default: !1 },
+  /**
+   * Header text (used when no `#title` slot is provided).
+   */
+  title: { type: String, default: "" },
+  /**
+   * Text alignment for the header title area.
+   * - 'left' | 'center' | 'right'
+   */
+  textAlign: {
+    type: String,
+    default: "left",
+    validator: (t) => Y.includes(t)
+  },
+  /**
+   * Animate expand/collapse.
+   */
+  animate: { type: Boolean, default: !0 },
+  /**
+   * Animation duration in ms.
+   */
+  duration: {
+    type: Number,
+    default: 220,
+    validator: (t) => Number.isFinite(t) && t >= 0
+  },
+  /**
+   * CSS timing function (e.g., 'ease', 'linear', 'ease-in-out', 'cubic-bezier(...)', etc.)
+   */
+  easing: { type: String, default: "ease" },
+  /**
+   * Controls keyboard focus order of the element.
+   * - `0` enables natural tab navigation, positive numbers set custom order.
+   * - `null` or `''` removes tabindex (not focusable).
+   */
+  tabIndex: {
+    type: [Number, String],
+    default: null,
+    validator: (t) => t === null || t === "" || !isNaN(+t) && isFinite(+t)
+  }
+}, ce = M({
+  name: "HAccordion",
+  props: ue,
+  inheritAttrs: !1,
+  emits: ["mounted", "responsive-change", "open", "close", "toggle"],
+  setup(t, { emit: l }) {
+    const a = t.id || Z(), C = `haccordion:${a}`, s = o(null), O = o(null), r = _(), g = o(!!t.visible), m = o(t.title ?? ""), u = o(!!t.defaultOpen), y = o(t.textAlign ?? "left"), p = o(t.animate ?? !0), b = o(t.duration ?? 500), h = o(t.easing ?? "ease"), S = o(
+      t.tabIndex !== null && t.tabIndex !== "" ? Number(t.tabIndex) : null
+    ), F = T(() => g.value ? "" : "hison-display-none"), d = o([]), B = () => {
+      d.value = ee(te(t.class) || "", r.value), ne(d.value, "col") === -1 && d.value.push("hison-col-12"), q(d.value, "size", f.componentStyle.size), q(d.value, "color", "primary");
+    }, V = T(() => ({
+      "--hacc-duration": `${b.value}ms`,
+      "--hacc-easing": h.value
+    })), j = T(() => ({})), z = T(() => ({ textAlign: y.value })), I = (e) => {
+      u.value || (u.value, u.value = !0, l("open", e ?? null, v.value));
+    }, A = (e) => {
+      var R;
+      if (!u.value) return;
+      const n = document.activeElement, x = O.value;
+      x && n && x.contains(n) && ((R = s.value) == null || R.focus()), u.value = !1, l("close", e ?? null, v.value);
+    }, E = (e) => u.value ? A(e) : I(e), U = (e) => {
+      l("toggle", e, v.value), E(e);
+    }, v = o(null), $ = () => {
+      f.component.accordionList[a] && f.component.accordionList[a].isHisonvueComponent && console.warn(`[Hisonvue] The accordion ID is at risk of being duplicated. ${a}`), le(C, () => {
+        k(), P($);
+      }), s.value && ae(s.value), B(), v.value = {
+        isHisonvueComponent: !0,
+        getId: () => a,
+        getType: () => "accordion",
+        isVisible: () => g.value,
+        setVisible: (e) => {
+          g.value = !!e;
+        },
+        isOpen: () => u.value,
+        open: I,
+        close: A,
+        toggle: E,
+        getTitle: () => m.value,
+        setTitle: (e) => {
+          m.value = e ?? "";
+        },
+        getTextAlign: () => y.value,
+        setTextAlign: (e) => {
+          (e === "left" || e === "center" || e === "right") && (y.value = e);
+        },
+        getAnimate: () => p.value,
+        setAnimate: (e) => {
+          p.value = !!e;
+        },
+        getDuration: () => b.value,
+        setDuration: (e) => {
+          const n = Number(e);
+          Number.isFinite(n) && n >= 0 && (b.value = n);
+        },
+        getEasing: () => h.value,
+        setEasing: (e) => {
+          typeof e == "string" && (h.value = e);
+        },
+        getTabIndex: () => S.value,
+        setTabIndex: (e) => {
+          S.value = e != null ? Number(e) : null;
+        },
+        focus: () => {
+          var e;
+          (e = s.value) == null || e.focus();
+        },
+        reload: () => oe(C)
+      }, f.component.accordionList[a] = v.value, l("mounted", v.value);
+    }, k = () => {
+      var e;
+      ie(C), s.value && se(s.value), (e = f.component) != null && e.accordionList && delete f.component.accordionList[a];
+    };
+    return K($), G(k), i(r, (e) => {
+      B(), l("responsive-change", e);
+    }), i(() => t.visible, (e) => {
+      e !== g.value && (g.value = !!e);
+    }), i(() => t.title, (e) => {
+      const n = e ?? "";
+      n !== m.value && (m.value = n);
+    }), i(() => t.defaultOpen, (e) => e ? I(null) : A(null)), i(() => t.textAlign, (e) => {
+      (e === "left" || e === "center" || e === "right") && e !== y.value && (y.value = e);
+    }), i(() => t.animate, (e) => {
+      const n = !!e;
+      n !== p.value && (p.value = n);
+    }), i(() => t.duration, (e) => {
+      const n = Number(e);
+      Number.isFinite(n) && n >= 0 && n !== b.value && (b.value = n);
+    }), i(() => t.easing, (e) => {
+      typeof e == "string" && e !== h.value && (h.value = e);
+    }), i(() => t.tabIndex, (e) => {
+      const n = e === null || e === "" ? null : Number(e);
+      n !== S.value && (S.value = n);
+    }), i(() => t.class, () => B()), {
+      headerRef: s,
+      contentRef: O,
+      props: t,
+      visibleClass: F,
+      responsiveClassList: d,
+      isOpen: u,
+      title: m,
+      headerBoxStyle: j,
+      titleInlineStyle: z,
+      rootInlineStyle: V,
+      animate: p,
+      tabIndex: S,
+      onToggleClick: U,
+      open: I,
+      close: A,
+      toggle: E
+    };
+  }
+}), de = ["aria-expanded", "tabindex"], ve = { class: "hison-accordion-toggle" }, fe = ["inert"], ge = { class: "hison-accordion-panel" }, me = { class: "hison-accordion-panel-inner" };
+function ye(t, l, a, C, s, O) {
+  return J(), X("div", {
+    class: w([
+      "hison-wrapper",
+      ...t.responsiveClassList,
+      t.visibleClass
+    ])
+  }, [
+    c("div", {
+      class: w([
+        "hison-accordion",
+        t.isOpen ? "hison-open" : "",
+        t.animate ? "" : "hison-no-anim"
+      ]),
+      style: N([t.rootInlineStyle, t.props.style])
+    }, [
+      c("div", {
+        ref: "headerRef",
+        class: "hison-accordion-header",
+        style: N([t.headerBoxStyle, t.props.headerStyle]),
+        role: "button",
+        "aria-expanded": t.isOpen ? "true" : "false",
+        tabindex: t.tabIndex ?? void 0,
+        onClick: l[0] || (l[0] = (r) => t.onToggleClick(r)),
+        onKeydown: [
+          l[1] || (l[1] = D(H((r) => t.onToggleClick(r), ["prevent"]), ["enter"])),
+          l[2] || (l[2] = D(H((r) => t.onToggleClick(r), ["prevent"]), ["space"]))
+        ]
+      }, [
+        c("div", {
+          class: "hison-accordion-title",
+          style: N([t.titleInlineStyle])
+        }, [
+          L(t.$slots, "title", {}, () => [
+            Q(W(t.title), 1)
+          ])
+        ], 4),
+        c("div", ve, [
+          L(t.$slots, "toggle", {}, () => [
+            l[3] || (l[3] = c("span", { class: "hison-dropdown-caret" }, "▾", -1))
+          ])
+        ])
+      ], 44, de),
+      c("div", {
+        ref: "contentRef",
+        class: "hison-accordion-content",
+        style: N(t.props.contentStyle),
+        role: "region",
+        inert: !t.isOpen || void 0
+      }, [
+        c("div", ge, [
+          c("div", me, [
+            L(t.$slots, "default")
+          ])
+        ])
+      ], 12, fe)
+    ], 6)
+  ], 2);
+}
+const Ce = /* @__PURE__ */ re(ce, [["render", ye]]);
+export {
+  Ce as default
+};

package/dist/HBaggie-D6omQoFh.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),s=require("./index-BmKMHsSZ.js"),T=require("./setButtonCssEvent-B9WTs2X7.js"),H=require("./_plugin-vue_export-helper-BHFhmbuH.js"),P={id:{type:String,required:!1},class:{type:[String,Array,Object],required:!1},style:{type:[String,Object,Array],required:!1},visible:{type:Boolean,default:!0},baggieVisible:{type:Boolean,default:!0},zIndex:{type:Number,default:1e3},position:{type:String,default:s.ScreenPosition.topRight,validator:e=>s.SCREEN_POSITION_VALUES.includes(e)},text:{type:String,required:!1},backgroundType:{type:String,default:s.BackgroundType.filled,validator:e=>s.BACKGROUND_TYPE_VALUES.includes(e)},border:{type:Boolean,default:!0},shape:{type:String,default:"rounded",validator:e=>["square","rounded","circle"].includes(e)},tabIndex:{type:[Number,String],default:null,validator:e=>e===null||e===""||!isNaN(+e)&&isFinite(+e)},buttonEnabled:{type:Boolean,default:!1}},x=t.defineComponent({name:"HBaggie",props:P,inheritAttrs:!1,emits:["mounted","responsive-change","click","mousedown","mouseup","mouseover","mouseout"],setup(e,{emit:a}){const l=e.id||s.getUUID(),h=`hbaggie:${l}`,B=s.useDevice(),w=t.ref(null),i=t.ref(null),g=t.ref(e.visible),b=t.ref(e.baggieVisible),r=t.ref(e.zIndex??1e3),c=t.ref(e.position),v=t.ref(e.text??""),f=t.ref(e.border??!0),m=t.ref(e.backgroundType||s.BackgroundType.filled),d=t.ref(e.shape||"rounded"),y=t.ref(e.tabIndex!==null&&e.tabIndex!==""?Number(e.tabIndex):null),u=t.ref(e.buttonEnabled??!1),V=t.computed(()=>g.value?"":"hison-display-none"),M=t.computed(()=>b.value?"":"hison-display-none"),$=t.computed(()=>f.value?"hison-border":""),q=t.computed(()=>{switch(m.value){case s.BackgroundType.transparent:return"hison-bg-transparent";case s.BackgroundType.empty:return"hison-bg-empty";default:return"hison-bg-filled"}}),z=t.computed(()=>d.value==="circle"?"hison-baggie-shape-circle":d.value==="square"?"hison-baggie-shape-square":"hison-baggie-shape-rounded"),C=t.ref([]),S=()=>{C.value=s.extractResponsiveClasses(s.toClassString(e.class)||"",B.value),s.addComponentNameToClass(C.value,"size",s.hisonCloser.componentStyle.size),s.addComponentNameToClass(C.value,"color","primary")},A=t.computed(()=>`hison-baggie-pos-${c.value}`),R=t.computed(()=>({zIndex:r.value})),K=t.computed(()=>({zIndex:r.value+1})),k=(n=!0)=>{const o=i.value;o&&(T.removeButtonCssEvent(o),n&&u.value&&T.addButtonCssEvent(o))},I=n=>{u.value&&a("click",n,t.unref(p))},L=()=>{u.value&&I(new MouseEvent("click"))},p=t.ref(null),E=()=>{s.hisonCloser.component.baggieList[l]&&s.hisonCloser.component.baggieList[l].isHisonvueComponent&&console.warn(`[Hisonvue] The baggie ID is at risk of being duplicated. ${l}`),s.registerReloadable(h,()=>{N(),t.nextTick(E)}),S(),t.nextTick(()=>k(!0)),p.value={isHisonvueComponent:!0,getId:()=>l,getType:()=>"baggie",isVisible:()=>g.value,setVisible:n=>{g.value=n},isBaggieVisible:()=>b.value,setBaggieVisible:n=>{b.value=n},getZIndex:()=>r.value,setZIndex:n=>{r.value=n},getPosition:()=>c.value,setPosition:n=>{c.value=n},getText:()=>v.value,setText:n=>{v.value=n},isBorder:()=>f.value,setBorder:n=>{f.value=n},getBackgroundType:()=>m.value,setBackgroundType:n=>{m.value=n},getShape:()=>d.value,setShape:n=>{d.value=n},getTabIndex:()=>y.value,setTabIndex:n=>{y.value=n!=null?Number(n):null},isButtonEnabled:()=>u.value,setButtonEnabled:n=>{u.value=n,t.nextTick(()=>k(!0))},reload:()=>s.reloadHisonComponent(h)},s.hisonCloser.component.baggieList[l]=p.value,a("mounted",p.value)},N=()=>{s.unregisterReloadable(h);const n=i.value;n&&T.removeButtonCssEvent(n),delete s.hisonCloser.component.baggieList[l]};return t.onMounted(E),t.onBeforeUnmount(N),t.watch(B,n=>{S(),a("responsive-change",n)}),t.watch(()=>e.visible,n=>{n!==g.value&&(g.value=!!n)}),t.watch(()=>e.baggieVisible,n=>{n!==b.value&&(b.value=!!n,t.nextTick(()=>k(!0)))}),t.watch(()=>e.zIndex,n=>{const o=Number(n);Number.isFinite(o)&&o!==r.value&&(r.value=o)}),t.watch(()=>e.position,n=>{typeof n=="string"&&n!==c.value&&(c.value=n)}),t.watch(()=>e.text,n=>{const o=n??"";o!==v.value&&(v.value=o)}),t.watch(()=>e.border,n=>{const o=!!n;o!==f.value&&(f.value=o)}),t.watch(()=>e.backgroundType,n=>{n&&n!==m.value&&(m.value=n)}),t.watch(()=>e.shape,n=>{(n==="square"||n==="rounded"||n==="circle")&&n!==d.value&&(d.value=n)}),t.watch(()=>e.tabIndex,n=>{const o=n===null||n===""?null:Number(n);o!==y.value&&(y.value=o)}),t.watch(()=>e.buttonEnabled,n=>{const o=!!n;o!==u.value&&(u.value=o,t.nextTick(()=>k(!0)))}),t.watch(()=>e.class,()=>S()),{id:l,props:e,anchorRef:w,baggieRef:i,text:v,visibleClass:V,baggieVisibleClass:M,responsiveClassList:C,backgroundTypeClass:q,borderClass:$,shapeClass:z,positionClass:A,anchorStyle:R,badgeStyle:K,baggieMethods:t.computed(()=>t.unref(p)),tabIndex:y,buttonEnabled:u,onClick:I,onKeyActivate:L}}}),O={class:"hison-baggie-target"},U=["tabindex"],D={key:1,class:"hison-baggie-text"};function j(e,a,l,h,B,w){return t.openBlock(),t.createElementBlock("span",{ref:"anchorRef",class:t.normalizeClass(["hison-baggie-anchor",e.visibleClass,...e.responsiveClassList]),style:t.normalizeStyle(e.anchorStyle),onMousedown:a[3]||(a[3]=i=>e.$emit("mousedown",i,e.baggieMethods)),onMouseup:a[4]||(a[4]=i=>e.$emit("mouseup",i,e.baggieMethods)),onMouseover:a[5]||(a[5]=i=>e.$emit("mouseover",i,e.baggieMethods)),onMouseout:a[6]||(a[6]=i=>e.$emit("mouseout",i,e.baggieMethods))},[t.createElementVNode("span",O,[t.renderSlot(e.$slots,"default")]),e.baggieVisible?(t.openBlock(),t.createElementBlock("div",{key:0,ref:"baggieRef",class:t.normalizeClass(["hison-baggie",e.positionClass,e.backgroundTypeClass,e.borderClass,e.shapeClass,e.baggieVisibleClass,e.buttonEnabled?"hison-baggie-button":null]),style:t.normalizeStyle([e.badgeStyle,e.props.style]),role:"status",tabindex:e.tabIndex??void 0,onClick:a[0]||(a[0]=(...i)=>e.onClick&&e.onClick(...i)),onKeydown:[a[1]||(a[1]=t.withKeys(t.withModifiers((...i)=>e.onKeyActivate&&e.onKeyActivate(...i),["prevent"]),["enter"])),a[2]||(a[2]=t.withKeys(t.withModifiers((...i)=>e.onKeyActivate&&e.onKeyActivate(...i),["prevent"]),["space"]))]},[e.$slots.badge?t.renderSlot(e.$slots,"badge",{key:0}):(t.openBlock(),t.createElementBlock("span",D,t.toDisplayString(e.text),1))],46,U)):t.createCommentVNode("",!0)],38)}const F=H._export_sfc(x,[["render",j]]);exports.default=F;