hisonvue 1.1.21 → 1.1.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +260 -260
  3. package/dist/{HAccordion-Djhoj_2Q.mjs → HAccordion-BFl1mLFn.mjs} +2 -2
  4. package/dist/{HAccordion-a5UZil7t.js → HAccordion-D4VuY7dP.js} +1 -1
  5. package/dist/{HBaggie-CD26mD1p.js → HBaggie-B2-hUbeO.js} +1 -1
  6. package/dist/{HBaggie-YMHv54ny.mjs → HBaggie-Cu0cqy_0.mjs} +2 -2
  7. package/dist/{HBanner-DEcDBbAa.js → HBanner-Bbp_22he.js} +1 -1
  8. package/dist/{HBanner-Glkj36dA.mjs → HBanner-CJhgh8Av.mjs} +2 -2
  9. package/dist/{HButton-DlOQpSFM.mjs → HButton-BJy7qJxO.mjs} +2 -2
  10. package/dist/{HButton-zN47uq3g.js → HButton-CnI66WaY.js} +1 -1
  11. package/dist/{HCalendar-PxP8M1kE.js → HCalendar-Birc716P.js} +2 -2
  12. package/dist/{HCalendar-Cr2oVDTO.mjs → HCalendar-CkzhtP-a.mjs} +2 -2
  13. package/dist/{HCaption-BbrgZlbJ.mjs → HCaption-CvfOGjLH.mjs} +1 -1
  14. package/dist/{HCaption-DxOZcWcP.js → HCaption-o7zHNPFi.js} +1 -1
  15. package/dist/{HChart-BcslvuI8.mjs → HChart-9HpLcSAF.mjs} +1 -1
  16. package/dist/{HChart-D217Yxxq.js → HChart-CRNhurrL.js} +1 -1
  17. package/dist/HDrawer-C4C1soyr.js +1 -0
  18. package/dist/{HDrawer-DlMTX7M_.mjs → HDrawer-_GV5YZAt.mjs} +163 -163
  19. package/dist/{HDropdown-BhJOYbaN.js → HDropdown-CZOjJzGI.js} +1 -1
  20. package/dist/{HDropdown-CvV8k1qQ.mjs → HDropdown-rOSEF1le.mjs} +2 -2
  21. package/dist/{HFileset-C6dqnLa8.js → HFileset-BWdpsZxK.js} +1 -1
  22. package/dist/{HFileset-x00ZXjyE.mjs → HFileset-DEtMGoeG.mjs} +1 -1
  23. package/dist/{HGap-Do40sUXA.mjs → HGap-Bu7F233f.mjs} +1 -1
  24. package/dist/{HGap-BgzODoWp.js → HGap-DzddYH3m.js} +1 -1
  25. package/dist/{HGrid-Dp7v84g5.mjs → HGrid--_YRxc-I.mjs} +1 -1
  26. package/dist/{HGrid-CAU32_zq.js → HGrid-Bt_iy9Kt.js} +1 -1
  27. package/dist/{HImagebox-FYftlSK2.mjs → HImagebox-BOE4P4WI.mjs} +1 -1
  28. package/dist/{HImagebox-XTSKnoBD.js → HImagebox-BSjnoCEL.js} +1 -1
  29. package/dist/HInput-BPqc5Yki.js +1 -0
  30. package/dist/{HInput-CInEGmfe.mjs → HInput-WrTJ-7Za.mjs} +364 -451
  31. package/dist/HInputGroup-B9TLmdJA.mjs +320 -0
  32. package/dist/HInputGroup-CmYq67bE.js +1 -0
  33. package/dist/{HLabel-uSniKpDF.js → HLabel-BOD2RCZp.js} +1 -1
  34. package/dist/{HLabel-B4n5-mtx.mjs → HLabel-D5wM-IkN.mjs} +2 -2
  35. package/dist/{HLayout-BsPro3dN.mjs → HLayout-B5lrXA5M.mjs} +1 -1
  36. package/dist/{HLayout-wEq-lzHN.js → HLayout-ddBZkvt_.js} +1 -1
  37. package/dist/{HList-DcV0Ssb3.js → HList-CAsiBzwq.js} +1 -1
  38. package/dist/{HList-Dko7kLGO.mjs → HList-qvvMg1GY.mjs} +2 -2
  39. package/dist/{HModal-BkjH2wMJ.js → HModal-CK9wkc73.js} +1 -1
  40. package/dist/{HModal-D_vWZ5My.mjs → HModal-DxuxiUAp.mjs} +1 -1
  41. package/dist/{HNote-CbfXDxO2.mjs → HNote-8-eRuRxV.mjs} +2 -2
  42. package/dist/HNote-DAiqR0NK.js +1 -0
  43. package/dist/{HPagination-HDTloKdH.js → HPagination-D2EbHt09.js} +1 -1
  44. package/dist/{HPagination-Cq2OV1tY.mjs → HPagination-DSfxM1dp.mjs} +2 -2
  45. package/dist/{HParagraph-BUGeL78g.mjs → HParagraph-BwXjwyuQ.mjs} +1 -1
  46. package/dist/{HParagraph-Bg2lZxZR.js → HParagraph-CBsf7TXw.js} +1 -1
  47. package/dist/{HPopup-Lqxe1H-e.mjs → HPopup-CFt35psB.mjs} +1 -1
  48. package/dist/{HPopup-3KITyE24.js → HPopup-DF9ffRS8.js} +1 -1
  49. package/dist/{HSpinner-BqVl4t2n.js → HSpinner-CUBK5bDY.js} +1 -1
  50. package/dist/{HSpinner-VJJNUuXg.mjs → HSpinner-DYOnQbZ_.mjs} +1 -1
  51. package/dist/{HTable-6O4rYicc.mjs → HTable-CTqwvXER.mjs} +1 -1
  52. package/dist/{HTable-DzbCLDIn.js → HTable-Y-8ga-98.js} +1 -1
  53. package/dist/hisonvue.cjs.js +1 -1
  54. package/dist/hisonvue.css +1 -1
  55. package/dist/hisonvue.d.ts +97 -64
  56. package/dist/hisonvue.es.js +2 -2
  57. package/dist/{index-5k-aAQlJ.js → index-B6cKtmm6.js} +3 -3
  58. package/dist/{index-Cvhi7T4w.mjs → index-HfC1PNxb.mjs} +5 -7
  59. package/dist/{setButtonCssEvent-BScAn_gY.mjs → setButtonCssEvent-DKQg_9AF.mjs} +1 -1
  60. package/dist/{setButtonCssEvent-BI-R9EJt.js → setButtonCssEvent-fK8lE3Ve.js} +1 -1
  61. package/nuxt/module.mjs +40 -40
  62. package/nuxt/plugin.mjs +21 -21
  63. package/nuxt/warn-filter.mjs +41 -41
  64. package/package.json +56 -56
  65. package/dist/HDrawer-CtMgceI2.js +0 -1
  66. package/dist/HInput-DxhtO9q3.js +0 -1
  67. package/dist/HInputGroup-Cou5-12U.mjs +0 -281
  68. package/dist/HInputGroup-DrjZO_7J.js +0 -1
  69. package/dist/HNote-DQr6iUu0.js +0 -1
package/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2025 hisondev
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files hisonvue, to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2025 hisondev
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files hisonvue, to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,260 +1,260 @@
1
- # HisonVue
2
-
3
- More detailed information can be found on the this.
4
- [Homepage](https://hisondev.github.io/)
5
-
6
- A **Vue 3 UI component library** designed for enterprise-grade apps.
7
- Built on top of [**hisonjs**](https://github.com/hisondev/hisonjs), it bridges **frontend components** and **backend-ready data utilities** into one unified ecosystem.
8
-
9
- ## ✨ About
10
-
11
- **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.
12
-
13
- * Written in **TypeScript** with full IntelliSense support
14
- * Works with **Vue CLI, Vite, Nuxt 3 (SSR)** out of the box
15
- * Tree-shakable and modular imports
16
- * CSS variables & responsive class system (`hison-col-*`, `hison-size-*`, `hison-color-*`)
17
- * Runtime control for every component via `hison.component.getXxx(id)`
18
- * Extends `hisonjs` → brings **utils, data models, API-link, shield security**
19
-
20
- ---
21
-
22
- ## 📦 Installation
23
-
24
- ```bash
25
- npm install hisonvue
26
- ```
27
-
28
- Import the global CSS once:
29
-
30
- ```ts
31
- import 'hisonvue/style.css'
32
- ```
33
-
34
- ---
35
-
36
- ## 🚀 Usage
37
-
38
- ### 1️⃣ Global registration (Vue 3 / Vite / Vue CLI)
39
-
40
- ```ts
41
- import { createApp } from 'vue'
42
- import App from './App.vue'
43
- import { hisonvue, getDefaultHisonConfig, Size, type HisonConfig } from 'hisonvue'
44
- import 'hisonvue/style.css'
45
-
46
- const app = createApp(App)
47
-
48
- // Customize global configuration
49
- const hisonConfig: HisonConfig = getDefaultHisonConfig()
50
- hisonConfig.componentStyle.primaryColor = '#123456'
51
- hisonConfig.componentStyle.size = Size.s
52
-
53
- app.use(hisonvue, hisonConfig)
54
- app.mount('#app')
55
- ```
56
-
57
- ✅ Once registered globally, you can use any component:
58
-
59
- ```vue
60
- <HButton id="b1" text="Click" class="hison-color-primary" />
61
- <HLayout class="hison-col-12">
62
- <HLabel text="Hello World" />
63
- </HLayout>
64
- ```
65
-
66
- ---
67
-
68
- ### 2️⃣ Nuxt 3 integration (SSR-ready)
69
-
70
- HisonVue ships with an SSR-safe wrapper (`createSSRClientOnly`). For Nuxt, register via plugin:
71
-
72
- **`/plugins/hisonvue.client.ts`**
73
-
74
- ```ts
75
- import { defineNuxtPlugin } from '#app'
76
- import { hisonvue, getDefaultHisonConfig, Size, type HisonConfig } from 'hisonvue'
77
- import 'hisonvue/style.css'
78
-
79
- export default defineNuxtPlugin((nuxtApp) => {
80
- const config: HisonConfig = getDefaultHisonConfig()
81
- config.componentStyle.primaryColor = '#165DFF'
82
- config.componentStyle.size = Size.m
83
- config.componentStyle.invertColor = false
84
-
85
- nuxtApp.vueApp.use(hisonvue, config)
86
- })
87
- ```
88
-
89
- ✅ Components are globally available in SSR without hydration errors.
90
-
91
- Add the module in your `nuxt.config.ts`:
92
-
93
- ```ts
94
- export default defineNuxtConfig({
95
- modules: [
96
- 'hisonvue/nuxt', // ✅ Registers HisonVue (SSR-safe)
97
- ],
98
- ```
99
-
100
- ---
101
-
102
- ### 3️⃣ Runtime control with `hison.component`
103
-
104
- Every component is registered with a unique `id`. Use that to access methods:
105
-
106
- ```vue
107
- <HButton id="b1" text="Left" class="hison-color-primary" />
108
- <HButton id="b2" text="Right" class="hison-color-warning" />
109
- ```
110
-
111
- ```ts
112
- import { hison } from 'hisonvue'
113
-
114
- // Toggle border
115
- const b1 = hison.component.getButton('b1')!
116
- b1.setBorder(!b1.isBorder())
117
-
118
- // Open a modal
119
- const modal = hison.component.getModal('modal01')
120
- modal?.open()
121
- modal?.setCaption('Hello Modal')
122
- ```
123
-
124
- ---
125
-
126
- ### 4️⃣ Global theming with `hison.style`
127
-
128
- Change theme dynamically at runtime:
129
-
130
- ```ts
131
- hison.style.setPrimaryColor('#009688')
132
- hison.style.setSize(Size.l)
133
- hison.style.setInvertColor(true)
134
-
135
- console.log(hison.style.getPrimaryHoverColor())
136
- ```
137
-
138
- ---
139
-
140
- ### 5️⃣ CSS Event Hooks (`hison.cssEvent`)
141
-
142
- Attach global before/after hooks for Button/Input/Textbox events:
143
-
144
- ```ts
145
- hison.cssEvent.setButtonOnBefoerClick((e) => {
146
- console.log('before click', e)
147
- return true // false cancels the click
148
- })
149
-
150
- hison.cssEvent.setButtonOnAfterClick((e) => {
151
- console.log('after click', e)
152
- })
153
- ```
154
-
155
- ⚠️ Note: `Befoer` is intentionally spelled this way in the API — use as-is.
156
-
157
- ---
158
-
159
- ## 📚 Available Components
160
-
161
- HisonVue provides **20+ UI components**:
162
-
163
- * **Layout**: `HLayout`, `HGap`, `HModal`, `HPopup`, `HBanner`, `HAccordion`
164
- * **Form**: `HInput`, `HInputGroup`, `HFileset`, `HImagebox`, `HDropdown`
165
- * **UI Elements**: `HButton`, `HLabel`, `HList`, `HParagraph`, `HBaggie`, `HCaption`
166
- * **Data Views**: `HGrid` (via vanillagrid2), `HTable`, `HNote` (via vanillanote2), `HChart` (via Chart.js), `HCalendar` (via vue-cal)
167
- * **Feedback**: `HSpinner`, `HPagination`, `HDrawer`
168
-
169
- Each component exposes a **typed methods object** via `hison.component.getXxx(id)`.
170
-
171
- ---
172
-
173
- ## ⚙️ Global Configuration (`HisonConfig`)
174
-
175
- `getDefaultHisonConfig()` returns a fully typed configuration object you can customize.
176
-
177
- * **UtilsConfig** → date/time/number formatting defaults
178
- * **ShieldConfig** → security: block devtools, restrict IPs, freeze objects
179
- * **DataConfig** → control how values are copied into `DataModel`
180
- * **LinkConfig** → API-link defaults, before/after hooks
181
- * **ComponentStyle** → global theme (colors, sizes, fonts)
182
- * **Component** → external libs (vanillanote2, vanillagrid2, chart.js)
183
- * **Event.cssEvent** → global CSS hooks
184
-
185
- Example:
186
-
187
- ```ts
188
- const cfg = getDefaultHisonConfig()
189
- cfg.componentStyle.primaryColor = '#222'
190
- cfg.componentStyle.size = Size.s
191
- cfg.link.timeout = 15000
192
- cfg.shield.isPossibleOpenDevTool = false
193
- ```
194
-
195
- ---
196
-
197
- ## 🔗 Extended Hison Interface
198
-
199
- HisonVue exports a singleton `hison` that **extends** `hisonjs.Hison`:
200
-
201
- ✅ All **hisonjs** features:
202
-
203
- * `utils` (string/date/number helpers)
204
- * `data` (DataWrapper, DataModel)
205
- * `link` (API communication with Spring backend)
206
- * `shield` (security: devtool blocking, freeze, URL/IP restrictions)
207
-
208
- ➕ Additional Vue features:
209
-
210
- * `component.getXxx(id)` → runtime control of every Vue component
211
- * `style.setXxx/getXxx` → global theming API
212
- * `cssEvent.setXxx` → global before/after hooks for UI events
213
- * File upload defaults: `setMaxFilesetSize`, `setMaxFilesetTotalSize`
214
-
215
- This makes **hisonvue** a **fullstack bridge** between Vue frontend and Spring backend.
216
-
217
- ---
218
-
219
- ## ✅ Example Fullstack Flow
220
-
221
- ```ts
222
- import { hison } from 'hisonvue'
223
-
224
- // Build request
225
- define const req = new hison.data.DataWrapper({ userId: 1 })
226
-
227
- // Send to Spring backend via api-link
228
- const api = new hison.link.ApiPost("UserService.getUser")
229
- const resp = await api.call(req)
230
-
231
- // Update UI
232
- const btn = hison.component.getButton('saveBtn')
233
- btn?.setDisable(true)
234
-
235
- const note = hison.component.getNote('editor')
236
- note?.setNoteData(resp.data)
237
- ```
238
-
239
- ---
240
-
241
- ## 🛠 Build & Test (Contributors)
242
-
243
- ```bash
244
- git clone https://github.com/hisondev/hisonvue.git
245
- cd hisonvue
246
- npm install
247
-
248
- # Build library
249
- npm run build
250
-
251
- # Run playgrounds
252
- cd playground && npm run dev
253
- cd ../playground-nuxt && npm run dev
254
- ```
255
-
256
- ---
257
-
258
- ## 📄 License
259
-
260
- MIT © hisondev
1
+ # HisonVue
2
+
3
+ More detailed information can be found on the this.
4
+ [Homepage](https://hisondev.github.io/)
5
+
6
+ A **Vue 3 UI component library** designed for enterprise-grade apps.
7
+ Built on top of [**hisonjs**](https://github.com/hisondev/hisonjs), it bridges **frontend components** and **backend-ready data utilities** into one unified ecosystem.
8
+
9
+ ## ✨ About
10
+
11
+ **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.
12
+
13
+ * Written in **TypeScript** with full IntelliSense support
14
+ * Works with **Vue CLI, Vite, Nuxt 3 (SSR)** out of the box
15
+ * Tree-shakable and modular imports
16
+ * CSS variables & responsive class system (`hison-col-*`, `hison-size-*`, `hison-color-*`)
17
+ * Runtime control for every component via `hison.component.getXxx(id)`
18
+ * Extends `hisonjs` → brings **utils, data models, API-link, shield security**
19
+
20
+ ---
21
+
22
+ ## 📦 Installation
23
+
24
+ ```bash
25
+ npm install hisonvue
26
+ ```
27
+
28
+ Import the global CSS once:
29
+
30
+ ```ts
31
+ import 'hisonvue/style.css'
32
+ ```
33
+
34
+ ---
35
+
36
+ ## 🚀 Usage
37
+
38
+ ### 1️⃣ Global registration (Vue 3 / Vite / Vue CLI)
39
+
40
+ ```ts
41
+ import { createApp } from 'vue'
42
+ import App from './App.vue'
43
+ import { hisonvue, getDefaultHisonConfig, Size, type HisonConfig } from 'hisonvue'
44
+ import 'hisonvue/style.css'
45
+
46
+ const app = createApp(App)
47
+
48
+ // Customize global configuration
49
+ const hisonConfig: HisonConfig = getDefaultHisonConfig()
50
+ hisonConfig.componentStyle.primaryColor = '#123456'
51
+ hisonConfig.componentStyle.size = Size.s
52
+
53
+ app.use(hisonvue, hisonConfig)
54
+ app.mount('#app')
55
+ ```
56
+
57
+ ✅ Once registered globally, you can use any component:
58
+
59
+ ```vue
60
+ <HButton id="b1" text="Click" class="hison-color-primary" />
61
+ <HLayout class="hison-col-12">
62
+ <HLabel text="Hello World" />
63
+ </HLayout>
64
+ ```
65
+
66
+ ---
67
+
68
+ ### 2️⃣ Nuxt 3 integration (SSR-ready)
69
+
70
+ HisonVue ships with an SSR-safe wrapper (`createSSRClientOnly`). For Nuxt, register via plugin:
71
+
72
+ **`/plugins/hisonvue.client.ts`**
73
+
74
+ ```ts
75
+ import { defineNuxtPlugin } from '#app'
76
+ import { hisonvue, getDefaultHisonConfig, Size, type HisonConfig } from 'hisonvue'
77
+ import 'hisonvue/style.css'
78
+
79
+ export default defineNuxtPlugin((nuxtApp) => {
80
+ const config: HisonConfig = getDefaultHisonConfig()
81
+ config.componentStyle.primaryColor = '#165DFF'
82
+ config.componentStyle.size = Size.m
83
+ config.componentStyle.invertColor = false
84
+
85
+ nuxtApp.vueApp.use(hisonvue, config)
86
+ })
87
+ ```
88
+
89
+ ✅ Components are globally available in SSR without hydration errors.
90
+
91
+ Add the module in your `nuxt.config.ts`:
92
+
93
+ ```ts
94
+ export default defineNuxtConfig({
95
+ modules: [
96
+ 'hisonvue/nuxt', // ✅ Registers HisonVue (SSR-safe)
97
+ ],
98
+ ```
99
+
100
+ ---
101
+
102
+ ### 3️⃣ Runtime control with `hison.component`
103
+
104
+ Every component is registered with a unique `id`. Use that to access methods:
105
+
106
+ ```vue
107
+ <HButton id="b1" text="Left" class="hison-color-primary" />
108
+ <HButton id="b2" text="Right" class="hison-color-warning" />
109
+ ```
110
+
111
+ ```ts
112
+ import { hison } from 'hisonvue'
113
+
114
+ // Toggle border
115
+ const b1 = hison.component.getButton('b1')!
116
+ b1.setBorder(!b1.isBorder())
117
+
118
+ // Open a modal
119
+ const modal = hison.component.getModal('modal01')
120
+ modal?.open()
121
+ modal?.setCaption('Hello Modal')
122
+ ```
123
+
124
+ ---
125
+
126
+ ### 4️⃣ Global theming with `hison.style`
127
+
128
+ Change theme dynamically at runtime:
129
+
130
+ ```ts
131
+ hison.style.setPrimaryColor('#009688')
132
+ hison.style.setSize(Size.l)
133
+ hison.style.setInvertColor(true)
134
+
135
+ console.log(hison.style.getPrimaryHoverColor())
136
+ ```
137
+
138
+ ---
139
+
140
+ ### 5️⃣ CSS Event Hooks (`hison.cssEvent`)
141
+
142
+ Attach global before/after hooks for Button/Input/Textbox events:
143
+
144
+ ```ts
145
+ hison.cssEvent.setButtonOnBefoerClick((e) => {
146
+ console.log('before click', e)
147
+ return true // false cancels the click
148
+ })
149
+
150
+ hison.cssEvent.setButtonOnAfterClick((e) => {
151
+ console.log('after click', e)
152
+ })
153
+ ```
154
+
155
+ ⚠️ Note: `Befoer` is intentionally spelled this way in the API — use as-is.
156
+
157
+ ---
158
+
159
+ ## 📚 Available Components
160
+
161
+ HisonVue provides **20+ UI components**:
162
+
163
+ * **Layout**: `HLayout`, `HGap`, `HModal`, `HPopup`, `HBanner`, `HAccordion`
164
+ * **Form**: `HInput`, `HInputGroup`, `HFileset`, `HImagebox`, `HDropdown`
165
+ * **UI Elements**: `HButton`, `HLabel`, `HList`, `HParagraph`, `HBaggie`, `HCaption`
166
+ * **Data Views**: `HGrid` (via vanillagrid2), `HTable`, `HNote` (via vanillanote2), `HChart` (via Chart.js), `HCalendar` (via vue-cal)
167
+ * **Feedback**: `HSpinner`, `HPagination`, `HDrawer`
168
+
169
+ Each component exposes a **typed methods object** via `hison.component.getXxx(id)`.
170
+
171
+ ---
172
+
173
+ ## ⚙️ Global Configuration (`HisonConfig`)
174
+
175
+ `getDefaultHisonConfig()` returns a fully typed configuration object you can customize.
176
+
177
+ * **UtilsConfig** → date/time/number formatting defaults
178
+ * **ShieldConfig** → security: block devtools, restrict IPs, freeze objects
179
+ * **DataConfig** → control how values are copied into `DataModel`
180
+ * **LinkConfig** → API-link defaults, before/after hooks
181
+ * **ComponentStyle** → global theme (colors, sizes, fonts)
182
+ * **Component** → external libs (vanillanote2, vanillagrid2, chart.js)
183
+ * **Event.cssEvent** → global CSS hooks
184
+
185
+ Example:
186
+
187
+ ```ts
188
+ const cfg = getDefaultHisonConfig()
189
+ cfg.componentStyle.primaryColor = '#222'
190
+ cfg.componentStyle.size = Size.s
191
+ cfg.link.timeout = 15000
192
+ cfg.shield.isPossibleOpenDevTool = false
193
+ ```
194
+
195
+ ---
196
+
197
+ ## 🔗 Extended Hison Interface
198
+
199
+ HisonVue exports a singleton `hison` that **extends** `hisonjs.Hison`:
200
+
201
+ ✅ All **hisonjs** features:
202
+
203
+ * `utils` (string/date/number helpers)
204
+ * `data` (DataWrapper, DataModel)
205
+ * `link` (API communication with Spring backend)
206
+ * `shield` (security: devtool blocking, freeze, URL/IP restrictions)
207
+
208
+ ➕ Additional Vue features:
209
+
210
+ * `component.getXxx(id)` → runtime control of every Vue component
211
+ * `style.setXxx/getXxx` → global theming API
212
+ * `cssEvent.setXxx` → global before/after hooks for UI events
213
+ * File upload defaults: `setMaxFilesetSize`, `setMaxFilesetTotalSize`
214
+
215
+ This makes **hisonvue** a **fullstack bridge** between Vue frontend and Spring backend.
216
+
217
+ ---
218
+
219
+ ## ✅ Example Fullstack Flow
220
+
221
+ ```ts
222
+ import { hison } from 'hisonvue'
223
+
224
+ // Build request
225
+ define const req = new hison.data.DataWrapper({ userId: 1 })
226
+
227
+ // Send to Spring backend via api-link
228
+ const api = new hison.link.ApiPost("UserService.getUser")
229
+ const resp = await api.call(req)
230
+
231
+ // Update UI
232
+ const btn = hison.component.getButton('saveBtn')
233
+ btn?.setDisable(true)
234
+
235
+ const note = hison.component.getNote('editor')
236
+ note?.setNoteData(resp.data)
237
+ ```
238
+
239
+ ---
240
+
241
+ ## 🛠 Build & Test (Contributors)
242
+
243
+ ```bash
244
+ git clone https://github.com/hisondev/hisonvue.git
245
+ cd hisonvue
246
+ npm install
247
+
248
+ # Build library
249
+ npm run build
250
+
251
+ # Run playgrounds
252
+ cd playground && npm run dev
253
+ cd ../playground-nuxt && npm run dev
254
+ ```
255
+
256
+ ---
257
+
258
+ ## 📄 License
259
+
260
+ MIT © hisondev
@@ -1,6 +1,6 @@
1
1
  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";
2
- 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-Cvhi7T4w.mjs";
3
- import { a as ae, r as se } from "./setButtonCssEvent-BScAn_gY.mjs";
2
+ 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-HfC1PNxb.mjs";
3
+ import { a as ae, r as se } from "./setButtonCssEvent-DKQg_9AF.mjs";
4
4
  import { _ as re } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
5
5
  const ue = {
6
6
  /**
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),l=require("./index-5k-aAQlJ.js"),V=require("./setButtonCssEvent-BI-R9EJt.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;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),l=require("./index-B6cKtmm6.js"),V=require("./setButtonCssEvent-fK8lE3Ve.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;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),s=require("./index-5k-aAQlJ.js"),T=require("./setButtonCssEvent-BI-R9EJt.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;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),s=require("./index-B6cKtmm6.js"),T=require("./setButtonCssEvent-fK8lE3Ve.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;
@@ -1,6 +1,6 @@
1
1
  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";
2
- 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-Cvhi7T4w.mjs";
3
- import { r as D, a as ve } from "./setButtonCssEvent-BScAn_gY.mjs";
2
+ 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-HfC1PNxb.mjs";
3
+ import { r as D, a as ve } from "./setButtonCssEvent-DKQg_9AF.mjs";
4
4
  import { _ as ce } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
5
5
  const fe = {
6
6
  /**