@threadlabs/looma 0.6.3 → 0.6.5

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 (250) hide show
  1. package/components/ui-tree-item/ui-tree-item.html +68 -12
  2. package/components/ui-tree-item/ui-tree-item.js +9 -1
  3. package/dist/index.js +1 -1
  4. package/package.json +2 -2
  5. package/styles/ui-affordance-scope.css +1 -1
  6. package/styles/ui-avatar-group.css +1 -1
  7. package/styles/ui-avatar.css +1 -1
  8. package/styles/ui-badge.css +1 -1
  9. package/styles/ui-button.css +1 -1
  10. package/styles/ui-callout.css +1 -1
  11. package/styles/ui-checkbox.css +1 -1
  12. package/styles/ui-cluster.css +1 -1
  13. package/styles/ui-combobox.css +1 -1
  14. package/styles/ui-container.css +1 -1
  15. package/styles/ui-context-menu.css +1 -1
  16. package/styles/ui-dialog.css +1 -1
  17. package/styles/ui-disclosure.css +1 -1
  18. package/styles/ui-editable.css +1 -1
  19. package/styles/ui-editor-insert-table-grid.css +1 -1
  20. package/styles/ui-editor-mention-menu.css +1 -1
  21. package/styles/ui-editor-slash-menu.css +1 -1
  22. package/styles/ui-editor-table-context-menu.css +1 -1
  23. package/styles/ui-editor-table-overlay.css +1 -1
  24. package/styles/ui-editor-table-toolbar.css +1 -1
  25. package/styles/ui-editor-toolbar.css +1 -1
  26. package/styles/ui-floating-action-button.css +1 -1
  27. package/styles/ui-form-field.css +1 -1
  28. package/styles/ui-grid.css +1 -1
  29. package/styles/ui-icon-button.css +1 -1
  30. package/styles/ui-icon.css +1 -1
  31. package/styles/ui-input.css +1 -1
  32. package/styles/ui-menu-item.css +1 -1
  33. package/styles/ui-menu.css +1 -1
  34. package/styles/ui-popover.css +1 -1
  35. package/styles/ui-radio-group.css +1 -1
  36. package/styles/ui-radio.css +1 -1
  37. package/styles/ui-reel.css +1 -1
  38. package/styles/ui-search-result-row.css +1 -1
  39. package/styles/ui-search-shell.css +1 -1
  40. package/styles/ui-select.css +1 -1
  41. package/styles/ui-separator.css +1 -1
  42. package/styles/ui-sidebar.css +1 -1
  43. package/styles/ui-stack.css +1 -1
  44. package/styles/ui-switch.css +1 -1
  45. package/styles/ui-switcher.css +1 -1
  46. package/styles/ui-tabs.css +1 -1
  47. package/styles/ui-textarea.css +1 -1
  48. package/styles/ui-toast-region.css +1 -1
  49. package/styles/ui-tooltip.css +1 -1
  50. package/styles/ui-top-bar.css +1 -1
  51. package/styles/ui-tree-item.css +75 -12
  52. package/styles/ui-tree.css +1 -1
  53. package/vanilla/UiAffordanceScope.d.ts +1 -1
  54. package/vanilla/UiAffordanceScope.js +1 -1
  55. package/vanilla/UiAvatar.d.ts +1 -1
  56. package/vanilla/UiAvatar.js +1 -1
  57. package/vanilla/UiAvatarGroup.d.ts +1 -1
  58. package/vanilla/UiAvatarGroup.js +1 -1
  59. package/vanilla/UiBadge.d.ts +1 -1
  60. package/vanilla/UiBadge.js +1 -1
  61. package/vanilla/UiButton.d.ts +1 -1
  62. package/vanilla/UiButton.js +1 -1
  63. package/vanilla/UiCallout.d.ts +1 -1
  64. package/vanilla/UiCallout.js +1 -1
  65. package/vanilla/UiCheckbox.d.ts +1 -1
  66. package/vanilla/UiCheckbox.js +1 -1
  67. package/vanilla/UiCluster.d.ts +1 -1
  68. package/vanilla/UiCluster.js +1 -1
  69. package/vanilla/UiCombobox.d.ts +1 -1
  70. package/vanilla/UiCombobox.js +1 -1
  71. package/vanilla/UiContainer.d.ts +1 -1
  72. package/vanilla/UiContainer.js +1 -1
  73. package/vanilla/UiContextMenu.d.ts +1 -1
  74. package/vanilla/UiContextMenu.js +1 -1
  75. package/vanilla/UiDialog.d.ts +1 -1
  76. package/vanilla/UiDialog.js +1 -1
  77. package/vanilla/UiDisclosure.d.ts +1 -1
  78. package/vanilla/UiDisclosure.js +1 -1
  79. package/vanilla/UiEditable.d.ts +1 -1
  80. package/vanilla/UiEditable.js +1 -1
  81. package/vanilla/UiEditorInsertTableGrid.d.ts +1 -1
  82. package/vanilla/UiEditorInsertTableGrid.js +1 -1
  83. package/vanilla/UiEditorMentionMenu.d.ts +1 -1
  84. package/vanilla/UiEditorMentionMenu.js +1 -1
  85. package/vanilla/UiEditorSlashMenu.d.ts +1 -1
  86. package/vanilla/UiEditorSlashMenu.js +1 -1
  87. package/vanilla/UiEditorTableContextMenu.d.ts +1 -1
  88. package/vanilla/UiEditorTableContextMenu.js +1 -1
  89. package/vanilla/UiEditorTableOverlay.d.ts +1 -1
  90. package/vanilla/UiEditorTableOverlay.js +1 -1
  91. package/vanilla/UiEditorTableToolbar.d.ts +1 -1
  92. package/vanilla/UiEditorTableToolbar.js +1 -1
  93. package/vanilla/UiEditorToolbar.d.ts +1 -1
  94. package/vanilla/UiEditorToolbar.js +1 -1
  95. package/vanilla/UiFloatingActionButton.d.ts +1 -1
  96. package/vanilla/UiFloatingActionButton.js +1 -1
  97. package/vanilla/UiFormField.d.ts +1 -1
  98. package/vanilla/UiFormField.js +1 -1
  99. package/vanilla/UiGrid.d.ts +1 -1
  100. package/vanilla/UiGrid.js +1 -1
  101. package/vanilla/UiIcon.d.ts +1 -1
  102. package/vanilla/UiIcon.js +1 -1
  103. package/vanilla/UiIconButton.d.ts +1 -1
  104. package/vanilla/UiIconButton.js +1 -1
  105. package/vanilla/UiInput.d.ts +1 -1
  106. package/vanilla/UiInput.js +1 -1
  107. package/vanilla/UiMenu.d.ts +1 -1
  108. package/vanilla/UiMenu.js +1 -1
  109. package/vanilla/UiMenuItem.d.ts +1 -1
  110. package/vanilla/UiMenuItem.js +1 -1
  111. package/vanilla/UiPopover.d.ts +1 -1
  112. package/vanilla/UiPopover.js +1 -1
  113. package/vanilla/UiRadio.d.ts +1 -1
  114. package/vanilla/UiRadio.js +1 -1
  115. package/vanilla/UiRadioGroup.d.ts +1 -1
  116. package/vanilla/UiRadioGroup.js +1 -1
  117. package/vanilla/UiReel.d.ts +1 -1
  118. package/vanilla/UiReel.js +1 -1
  119. package/vanilla/UiSearchResultRow.d.ts +1 -1
  120. package/vanilla/UiSearchResultRow.js +1 -1
  121. package/vanilla/UiSearchShell.d.ts +1 -1
  122. package/vanilla/UiSearchShell.js +1 -1
  123. package/vanilla/UiSelect.d.ts +1 -1
  124. package/vanilla/UiSelect.js +1 -1
  125. package/vanilla/UiSeparator.d.ts +1 -1
  126. package/vanilla/UiSeparator.js +1 -1
  127. package/vanilla/UiSidebar.d.ts +1 -1
  128. package/vanilla/UiSidebar.js +1 -1
  129. package/vanilla/UiStack.d.ts +1 -1
  130. package/vanilla/UiStack.js +1 -1
  131. package/vanilla/UiSwitch.d.ts +1 -1
  132. package/vanilla/UiSwitch.js +1 -1
  133. package/vanilla/UiSwitcher.d.ts +1 -1
  134. package/vanilla/UiSwitcher.js +1 -1
  135. package/vanilla/UiTabs.d.ts +1 -1
  136. package/vanilla/UiTabs.js +1 -1
  137. package/vanilla/UiTextarea.d.ts +1 -1
  138. package/vanilla/UiTextarea.js +1 -1
  139. package/vanilla/UiToastRegion.d.ts +1 -1
  140. package/vanilla/UiToastRegion.js +1 -1
  141. package/vanilla/UiTooltip.d.ts +1 -1
  142. package/vanilla/UiTooltip.js +1 -1
  143. package/vanilla/UiTopBar.d.ts +1 -1
  144. package/vanilla/UiTopBar.js +1 -1
  145. package/vanilla/UiTree.d.ts +1 -1
  146. package/vanilla/UiTree.js +1 -1
  147. package/vanilla/UiTreeItem.d.ts +1 -1
  148. package/vanilla/UiTreeItem.js +2 -2
  149. package/vue/UiAffordanceScope.vue +8 -84
  150. package/vue/UiAvatar.d.ts +1 -1
  151. package/vue/UiAvatar.vue +9 -106
  152. package/vue/UiAvatarGroup.vue +9 -96
  153. package/vue/UiBadge.vue +1 -1
  154. package/vue/UiButton.vue +1 -1
  155. package/vue/UiCallout.vue +1 -1
  156. package/vue/UiCheckbox.vue +22 -123
  157. package/vue/UiCluster.vue +1 -1
  158. package/vue/UiCombobox.d.ts +1 -1
  159. package/vue/UiCombobox.vue +224 -475
  160. package/vue/UiContainer.vue +1 -1
  161. package/vue/UiContextMenu.vue +34 -141
  162. package/vue/UiDialog.vue +25 -126
  163. package/vue/UiDisclosure.vue +26 -138
  164. package/vue/UiEditable.vue +46 -158
  165. package/vue/UiEditorInsertTableGrid.vue +19 -138
  166. package/vue/UiEditorMentionMenu.vue +17 -124
  167. package/vue/UiEditorSlashMenu.vue +17 -109
  168. package/vue/UiEditorTableContextMenu.vue +34 -122
  169. package/vue/UiEditorTableOverlay.vue +61 -167
  170. package/vue/UiEditorTableToolbar.vue +34 -142
  171. package/vue/UiEditorToolbar.vue +1 -1
  172. package/vue/UiFloatingActionButton.vue +1 -1
  173. package/vue/UiFormField.vue +7 -79
  174. package/vue/UiGrid.vue +1 -1
  175. package/vue/UiIcon.vue +8 -84
  176. package/vue/UiIconButton.vue +7 -79
  177. package/vue/UiInput.vue +7 -79
  178. package/vue/UiMenu.vue +42 -127
  179. package/vue/UiMenuItem.vue +1 -1
  180. package/vue/UiPopover.vue +25 -121
  181. package/vue/UiRadio.vue +22 -123
  182. package/vue/UiRadioGroup.d.ts +1 -1
  183. package/vue/UiRadioGroup.vue +32 -119
  184. package/vue/UiReel.vue +1 -1
  185. package/vue/UiSearchResultRow.vue +1 -1
  186. package/vue/UiSearchShell.vue +25 -121
  187. package/vue/UiSelect.vue +7 -79
  188. package/vue/UiSeparator.vue +1 -1
  189. package/vue/UiSidebar.vue +32 -133
  190. package/vue/UiStack.vue +1 -1
  191. package/vue/UiSwitch.vue +22 -123
  192. package/vue/UiSwitcher.vue +1 -1
  193. package/vue/UiTabs.vue +24 -128
  194. package/vue/UiTextarea.vue +7 -79
  195. package/vue/UiToastRegion.vue +37 -126
  196. package/vue/UiTooltip.vue +25 -124
  197. package/vue/UiTopBar.vue +1 -1
  198. package/vue/UiTree.vue +56 -137
  199. package/vue/UiTreeItem.vue +97 -153
  200. package/vue/chunks/UiAffordanceScope.js +9 -78
  201. package/vue/chunks/UiAvatar.js +13 -89
  202. package/vue/chunks/UiAvatarGroup.js +10 -80
  203. package/vue/chunks/UiBadge.js +1 -1
  204. package/vue/chunks/UiButton.js +1 -1
  205. package/vue/chunks/UiCallout.js +1 -1
  206. package/vue/chunks/UiCheckbox.js +17 -95
  207. package/vue/chunks/UiCluster.js +1 -1
  208. package/vue/chunks/UiCombobox.js +114 -325
  209. package/vue/chunks/UiContainer.js +1 -1
  210. package/vue/chunks/UiContextMenu.js +21 -113
  211. package/vue/chunks/UiDialog.js +20 -99
  212. package/vue/chunks/UiDisclosure.js +22 -112
  213. package/vue/chunks/UiEditable.js +32 -128
  214. package/vue/chunks/UiEditorInsertTableGrid.js +22 -116
  215. package/vue/chunks/UiEditorMentionMenu.js +18 -116
  216. package/vue/chunks/UiEditorSlashMenu.js +15 -101
  217. package/vue/chunks/UiEditorTableContextMenu.js +12 -91
  218. package/vue/chunks/UiEditorTableOverlay.js +29 -120
  219. package/vue/chunks/UiEditorTableToolbar.js +16 -111
  220. package/vue/chunks/UiEditorToolbar.js +1 -1
  221. package/vue/chunks/UiFloatingActionButton.js +1 -1
  222. package/vue/chunks/UiFormField.js +8 -73
  223. package/vue/chunks/UiGrid.js +1 -1
  224. package/vue/chunks/UiIcon.js +9 -78
  225. package/vue/chunks/UiIconButton.js +8 -73
  226. package/vue/chunks/UiInput.js +8 -73
  227. package/vue/chunks/UiMenu.js +25 -111
  228. package/vue/chunks/UiMenuItem.js +1 -1
  229. package/vue/chunks/UiPopover.js +18 -105
  230. package/vue/chunks/UiRadio.js +17 -95
  231. package/vue/chunks/UiRadioGroup.js +23 -105
  232. package/vue/chunks/UiReel.js +1 -1
  233. package/vue/chunks/UiSearchResultRow.js +1 -1
  234. package/vue/chunks/UiSearchShell.js +17 -94
  235. package/vue/chunks/UiSelect.js +8 -73
  236. package/vue/chunks/UiSeparator.js +1 -1
  237. package/vue/chunks/UiSidebar.js +23 -108
  238. package/vue/chunks/UiStack.js +1 -1
  239. package/vue/chunks/UiSwitch.js +17 -95
  240. package/vue/chunks/UiSwitcher.js +1 -1
  241. package/vue/chunks/UiTabs.js +22 -103
  242. package/vue/chunks/UiTextarea.js +8 -73
  243. package/vue/chunks/UiToastRegion.js +27 -112
  244. package/vue/chunks/UiTooltip.js +18 -106
  245. package/vue/chunks/UiTopBar.js +1 -1
  246. package/vue/chunks/UiTree.js +31 -109
  247. package/vue/chunks/UiTreeItem.js +35 -118
  248. package/vue/chunks/host.js +101 -0
  249. package/vue/components.css +759 -707
  250. package/vue/host.ts +154 -0
package/vue/UiSwitch.vue CHANGED
@@ -1,15 +1,8 @@
1
- <!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
1
+ <!-- Generated by HTML Next 1.0.0-alpha.3 for Vue 3.5. Do not edit. -->
2
2
  <script setup lang="ts">
3
- import {
4
- computed,
5
- onBeforeUnmount,
6
- onMounted,
7
- ref,
8
- shallowRef,
9
- useTemplateRef,
10
- watchEffect,
11
- } from 'vue'
3
+ import { computed, ref, useTemplateRef } from 'vue'
12
4
  import * as controllerModule from '../components/ui-switch/ui-switch.js'
5
+ import { createDispatch, useComponentHost } from './host'
13
6
 
14
7
  defineOptions({ inheritAttrs: false })
15
8
 
@@ -50,121 +43,27 @@ const hostState = computed(() =>
50
43
  ].filter(Boolean).join(' ')
51
44
  )
52
45
 
53
- /** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
54
- function dispatch(name: string, detail?: unknown): boolean {
55
- const declared: Record<string, EventInit | undefined> = {
56
- change: { bubbles: true, composed: true, cancelable: false },
57
- }
58
- const checks: Record<string, (detail: unknown) => boolean> = {
59
- change: (detail) =>
60
- detail !== null && typeof detail === 'object' && !Array.isArray(detail)
61
- && typeof (detail as Record<string, unknown>)['checked'] === 'boolean'
62
- && typeof (detail as Record<string, unknown>)['value'] === 'string'
63
- && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
64
- || (detail as Record<string, unknown>)['trigger'] === 'pointer'
65
- || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
66
- && Object.keys(detail as object).every((key) =>
67
- ['checked', 'value', 'trigger'].includes(key)
68
- ),
69
- }
70
- if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
71
- throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`)
72
- }
73
- const emitEvent = emit as (name: string, detail: unknown) => void
74
- emitEvent(name, detail)
75
- if (detail !== null && typeof detail === 'object' && 'checked' in detail) {
76
- emitEvent('update:checked', (detail as Record<string, unknown>)['checked'])
77
- }
78
- if (detail !== null && typeof detail === 'object' && 'value' in detail) {
79
- emitEvent('update:value', (detail as Record<string, unknown>)['value'])
80
- }
81
- return root.value?.dispatchEvent(
82
- new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
83
- ) ?? true
84
- }
85
-
86
- function read(name: string): unknown {
87
- if (name === 'internalChecked') return internalChecked.value
88
- return (props as Record<string, unknown>)[name]
89
- }
90
-
91
- function write(name: string, value: unknown): boolean {
92
- if (name === 'internalChecked') {
93
- internalChecked.value = value as never
94
- return true
95
- }
96
- throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
97
- }
98
-
99
- const stops: Array<() => void> = []
100
- const host = {
101
- get element(): Element {
102
- return root.value as Element
46
+ const isChangeDetail = (detail: unknown): boolean =>
47
+ detail !== null && typeof detail === 'object' && !Array.isArray(detail)
48
+ && typeof (detail as Record<string, unknown>)['checked'] === 'boolean'
49
+ && typeof (detail as Record<string, unknown>)['value'] === 'string'
50
+ && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
51
+ || (detail as Record<string, unknown>)['trigger'] === 'pointer'
52
+ || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
53
+ && Object.keys(detail as object).every((key) => ['checked', 'value', 'trigger'].includes(key))
54
+ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
55
+ checks: {
56
+ change: isChangeDetail,
103
57
  },
104
- state: new Proxy({} as Record<string, unknown>, {
105
- get: (_target, name) => typeof name === 'string' ? read(name) : undefined,
106
- set: (_target, name, value) => typeof name === 'string' && write(name, value),
107
- }),
108
- refs: {
109
- get input(): Element {
110
- return inputElement.value as Element
111
- },
112
- } as Readonly<Record<string, Element>>,
113
- elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
114
- get: (_target, name) => {
115
- if (typeof name !== 'string' || root.value === null) return undefined
116
- const form = root.value instanceof HTMLFormElement
117
- ? root.value
118
- : root.value.querySelector('form')
119
- return form?.elements.namedItem(name)
120
- ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined
121
- },
122
- }),
123
- signal<T>(initialValue: T) {
124
- const value = shallowRef(initialValue)
125
- return {
126
- get: (): T => value.value,
127
- set: (next: T): void => {
128
- if (!Object.is(value.value, next)) value.value = next
129
- },
130
- update: (next: (current: T) => T): void => {
131
- const updated = next(value.value)
132
- if (!Object.is(value.value, updated)) value.value = updated
133
- },
134
- }
135
- },
136
- computed<T>(compute: () => T) {
137
- const value = computed(compute)
138
- return { get: (): T => value.value }
139
- },
140
- effect(run: () => void | (() => void)): () => void {
141
- const stop = watchEffect((onCleanup) => {
142
- const cleanup = run()
143
- if (typeof cleanup === 'function') onCleanup(cleanup)
144
- }, { flush: 'post' })
145
- stops.push(stop)
146
- return stop
147
- },
148
- on(event: string, listener: EventListener): () => void {
149
- const element = root.value
150
- element?.addEventListener(event, listener)
151
- const off = (): void => element?.removeEventListener(event, listener)
152
- stops.push(off)
153
- return off
154
- },
155
- dispatch,
156
- }
157
-
158
- let cleanup: void | (() => void)
159
- let ready: Promise<void> | undefined
160
- onMounted(() => {
161
- ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
162
- cleanup = result
163
- })
58
+ modeled: ['checked', 'value'],
164
59
  })
165
- onBeforeUnmount(() => {
166
- for (const stop of stops.splice(0)) stop()
167
- if (typeof cleanup === 'function') cleanup()
60
+
61
+ useComponentHost(controllerModule.default, {
62
+ root,
63
+ dispatch,
64
+ props,
65
+ refs: { input: inputElement },
66
+ state: { internalChecked },
168
67
  })
169
68
  </script>
170
69
 
@@ -1,4 +1,4 @@
1
- <!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
1
+ <!-- Generated by HTML Next 1.0.0-alpha.3 for Vue 3.5. Do not edit. -->
2
2
  <script setup lang="ts">
3
3
  import { computed } from 'vue'
4
4
 
package/vue/UiTabs.vue CHANGED
@@ -1,15 +1,8 @@
1
- <!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
1
+ <!-- Generated by HTML Next 1.0.0-alpha.3 for Vue 3.5. Do not edit. -->
2
2
  <script setup lang="ts">
3
- import {
4
- computed,
5
- onBeforeUnmount,
6
- onMounted,
7
- ref,
8
- shallowRef,
9
- useTemplateRef,
10
- watchEffect,
11
- } from 'vue'
3
+ import { computed, ref, useTemplateRef } from 'vue'
12
4
  import * as controllerModule from '../components/ui-tabs/ui-tabs.js'
5
+ import { createDispatch, useComponentHost } from './host'
13
6
 
14
7
  defineOptions({ inheritAttrs: false })
15
8
 
@@ -55,126 +48,29 @@ const hostState = computed(() =>
55
48
  ].filter(Boolean).join(' ')
56
49
  )
57
50
 
58
- /** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
59
- function dispatch(name: string, detail?: unknown): boolean {
60
- const declared: Record<string, EventInit | undefined> = {
61
- select: { bubbles: true, composed: true, cancelable: false },
62
- }
63
- const checks: Record<string, (detail: unknown) => boolean> = {
64
- select: (detail) =>
65
- detail !== null && typeof detail === 'object' && !Array.isArray(detail)
66
- && typeof (detail as Record<string, unknown>)['value'] === 'string'
67
- && typeof (detail as Record<string, unknown>)['previousValue'] === 'string'
68
- && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
69
- || (detail as Record<string, unknown>)['trigger'] === 'pointer'
70
- || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
71
- && Object.keys(detail as object).every((key) =>
72
- ['value', 'previousValue', 'trigger'].includes(key)
73
- ),
74
- }
75
- if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
76
- throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`)
77
- }
78
- const emitEvent = emit as (name: string, detail: unknown) => void
79
- emitEvent(name, detail)
80
- if (detail !== null && typeof detail === 'object' && 'value' in detail) {
81
- emitEvent('update:value', (detail as Record<string, unknown>)['value'])
82
- }
83
- return root.value?.dispatchEvent(
84
- new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
85
- ) ?? true
86
- }
87
-
88
- function read(name: string): unknown {
89
- if (name === 'internalValue') return internalValue.value
90
- if (name === 'tabs') return tabs.value
91
- return (props as Record<string, unknown>)[name]
92
- }
93
-
94
- function write(name: string, value: unknown): boolean {
95
- if (name === 'internalValue') {
96
- internalValue.value = value as never
97
- return true
98
- }
99
- if (name === 'tabs') {
100
- tabs.value = value as never
101
- return true
102
- }
103
- throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
104
- }
105
-
106
- const stops: Array<() => void> = []
107
- const host = {
108
- get element(): Element {
109
- return root.value as Element
51
+ const isSelectDetail = (detail: unknown): boolean =>
52
+ detail !== null && typeof detail === 'object' && !Array.isArray(detail)
53
+ && typeof (detail as Record<string, unknown>)['value'] === 'string'
54
+ && typeof (detail as Record<string, unknown>)['previousValue'] === 'string'
55
+ && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
56
+ || (detail as Record<string, unknown>)['trigger'] === 'pointer'
57
+ || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
58
+ && Object.keys(detail as object).every((key) =>
59
+ ['value', 'previousValue', 'trigger'].includes(key)
60
+ )
61
+ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
62
+ checks: {
63
+ select: isSelectDetail,
110
64
  },
111
- state: new Proxy({} as Record<string, unknown>, {
112
- get: (_target, name) => typeof name === 'string' ? read(name) : undefined,
113
- set: (_target, name, value) => typeof name === 'string' && write(name, value),
114
- }),
115
- refs: {
116
- get list(): Element {
117
- return listElement.value as Element
118
- },
119
- get panels(): Element {
120
- return panelsElement.value as Element
121
- },
122
- } as Readonly<Record<string, Element>>,
123
- elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
124
- get: (_target, name) => {
125
- if (typeof name !== 'string' || root.value === null) return undefined
126
- const form = root.value instanceof HTMLFormElement
127
- ? root.value
128
- : root.value.querySelector('form')
129
- return form?.elements.namedItem(name)
130
- ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined
131
- },
132
- }),
133
- signal<T>(initialValue: T) {
134
- const value = shallowRef(initialValue)
135
- return {
136
- get: (): T => value.value,
137
- set: (next: T): void => {
138
- if (!Object.is(value.value, next)) value.value = next
139
- },
140
- update: (next: (current: T) => T): void => {
141
- const updated = next(value.value)
142
- if (!Object.is(value.value, updated)) value.value = updated
143
- },
144
- }
145
- },
146
- computed<T>(compute: () => T) {
147
- const value = computed(compute)
148
- return { get: (): T => value.value }
149
- },
150
- effect(run: () => void | (() => void)): () => void {
151
- const stop = watchEffect((onCleanup) => {
152
- const cleanup = run()
153
- if (typeof cleanup === 'function') onCleanup(cleanup)
154
- }, { flush: 'post' })
155
- stops.push(stop)
156
- return stop
157
- },
158
- on(event: string, listener: EventListener): () => void {
159
- const element = root.value
160
- element?.addEventListener(event, listener)
161
- const off = (): void => element?.removeEventListener(event, listener)
162
- stops.push(off)
163
- return off
164
- },
165
- dispatch,
166
- }
167
-
168
- let cleanup: void | (() => void)
169
- let ready: Promise<void> | undefined
170
- onMounted(() => {
171
- ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
172
- cleanup = result
173
- })
65
+ modeled: ['value'],
174
66
  })
175
- onBeforeUnmount(() => {
176
- for (const stop of stops.splice(0)) stop()
177
- if (typeof cleanup === 'function') cleanup()
67
+
68
+ useComponentHost(controllerModule.default, {
69
+ root,
70
+ dispatch,
71
+ props,
72
+ refs: { list: listElement, panels: panelsElement },
73
+ state: { internalValue, tabs },
178
74
  })
179
75
  </script>
180
76
 
@@ -1,7 +1,8 @@
1
- <!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
1
+ <!-- Generated by HTML Next 1.0.0-alpha.3 for Vue 3.5. Do not edit. -->
2
2
  <script setup lang="ts">
3
- import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from 'vue'
3
+ import { computed, ref } from 'vue'
4
4
  import * as controllerModule from '../components/ui-textarea/ui-textarea.js'
5
+ import { createDispatch, useComponentHost } from './host'
5
6
 
6
7
  defineOptions({ inheritAttrs: false })
7
8
 
@@ -33,85 +34,12 @@ const model = computed({
33
34
 
34
35
  const root = ref<HTMLElement | null>(null)
35
36
 
36
- /** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
37
- function dispatch(name: string, detail?: unknown): boolean {
38
- return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail }))
39
- ?? true
40
- }
41
-
42
- function read(name: string): unknown {
43
- return (props as Record<string, unknown>)[name]
44
- }
37
+ const dispatch = createDispatch(root)
45
38
 
46
- function write(name: string, value: unknown): boolean {
47
- throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
48
- }
49
-
50
- const stops: Array<() => void> = []
51
- const host = {
52
- get element(): Element {
53
- return root.value as Element
54
- },
55
- state: new Proxy({} as Record<string, unknown>, {
56
- get: (_target, name) => typeof name === 'string' ? read(name) : undefined,
57
- set: (_target, name, value) => typeof name === 'string' && write(name, value),
58
- }),
59
- refs: {} as Readonly<Record<string, Element>>,
60
- elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
61
- get: (_target, name) => {
62
- if (typeof name !== 'string' || root.value === null) return undefined
63
- const form = root.value instanceof HTMLFormElement
64
- ? root.value
65
- : root.value.querySelector('form')
66
- return form?.elements.namedItem(name)
67
- ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined
68
- },
69
- }),
70
- signal<T>(initialValue: T) {
71
- const value = shallowRef(initialValue)
72
- return {
73
- get: (): T => value.value,
74
- set: (next: T): void => {
75
- if (!Object.is(value.value, next)) value.value = next
76
- },
77
- update: (next: (current: T) => T): void => {
78
- const updated = next(value.value)
79
- if (!Object.is(value.value, updated)) value.value = updated
80
- },
81
- }
82
- },
83
- computed<T>(compute: () => T) {
84
- const value = computed(compute)
85
- return { get: (): T => value.value }
86
- },
87
- effect(run: () => void | (() => void)): () => void {
88
- const stop = watchEffect((onCleanup) => {
89
- const cleanup = run()
90
- if (typeof cleanup === 'function') onCleanup(cleanup)
91
- }, { flush: 'post' })
92
- stops.push(stop)
93
- return stop
94
- },
95
- on(event: string, listener: EventListener): () => void {
96
- const element = root.value
97
- element?.addEventListener(event, listener)
98
- const off = (): void => element?.removeEventListener(event, listener)
99
- stops.push(off)
100
- return off
101
- },
39
+ useComponentHost(controllerModule.default, {
40
+ root,
102
41
  dispatch,
103
- }
104
-
105
- let cleanup: void | (() => void)
106
- let ready: Promise<void> | undefined
107
- onMounted(() => {
108
- ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
109
- cleanup = result
110
- })
111
- })
112
- onBeforeUnmount(() => {
113
- for (const stop of stops.splice(0)) stop()
114
- if (typeof cleanup === 'function') cleanup()
42
+ props,
115
43
  })
116
44
  </script>
117
45
 
@@ -1,7 +1,8 @@
1
- <!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
1
+ <!-- Generated by HTML Next 1.0.0-alpha.3 for Vue 3.5. Do not edit. -->
2
2
  <script setup lang="ts">
3
- import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from 'vue'
3
+ import { ref } from 'vue'
4
4
  import * as controllerModule from '../components/ui-toast-region/ui-toast-region.js'
5
+ import { createDispatch, useComponentHost } from './host'
5
6
  import UiIconButton from './UiIconButton.vue'
6
7
 
7
8
  defineOptions({ inheritAttrs: false })
@@ -44,135 +45,45 @@ const toasts = ref<{ id: string; message: string; role: 'alert' | 'status'; clos
44
45
  [],
45
46
  )
46
47
 
47
- /** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
48
- function dispatch(name: string, detail?: unknown): boolean {
49
- const declared: Record<string, EventInit | undefined> = {
50
- close: { bubbles: true, composed: true, cancelable: false },
51
- dismiss: { bubbles: true, composed: true, cancelable: false },
52
- }
53
- const checks: Record<string, (detail: unknown) => boolean> = {
54
- close: (detail) =>
55
- detail !== null && typeof detail === 'object' && !Array.isArray(detail)
56
- && typeof (detail as Record<string, unknown>)['open'] === 'boolean'
57
- && ((detail as Record<string, unknown>)['reason'] === 'action'
58
- || (detail as Record<string, unknown>)['reason'] === 'timeout'
59
- || (detail as Record<string, unknown>)['reason'] === 'programmatic'
60
- || (detail as Record<string, unknown>)['reason'] === 'light-dismiss'
61
- || (detail as Record<string, unknown>)['reason'] === 'escape')
62
- && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
63
- || (detail as Record<string, unknown>)['trigger'] === 'pointer'
64
- || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
65
- && Object.keys(detail as object).every((key) => ['open', 'reason', 'trigger'].includes(key)),
66
- dismiss: (detail) =>
67
- detail !== null && typeof detail === 'object' && !Array.isArray(detail)
68
- && typeof (detail as Record<string, unknown>)['id'] === 'string'
69
- && ((detail as Record<string, unknown>)['reason'] === 'action'
70
- || (detail as Record<string, unknown>)['reason'] === 'timeout')
71
- && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
72
- || (detail as Record<string, unknown>)['trigger'] === 'pointer'
73
- || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
74
- && Object.keys(detail as object).every((key) => ['id', 'reason', 'trigger'].includes(key)),
75
- }
76
- if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
77
- throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`)
78
- }
79
- const emitEvent = emit as (name: string, detail: unknown) => void
80
- emitEvent(name, detail)
81
- if (detail !== null && typeof detail === 'object' && 'open' in detail) {
82
- emitEvent('update:open', (detail as Record<string, unknown>)['open'])
83
- }
84
- return root.value?.dispatchEvent(
85
- new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
86
- ) ?? true
87
- }
88
-
89
- function read(name: string): unknown {
90
- if (name === 'internalOpen') return internalOpen.value
91
- if (name === 'toasts') return toasts.value
92
- return (props as Record<string, unknown>)[name]
93
- }
94
-
95
- function write(name: string, value: unknown): boolean {
96
- if (name === 'internalOpen') {
97
- internalOpen.value = value as never
98
- return true
99
- }
100
- if (name === 'toasts') {
101
- toasts.value = value as never
102
- return true
103
- }
104
- throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
105
- }
106
-
107
- const stops: Array<() => void> = []
108
- const host = {
109
- get element(): Element {
110
- return root.value as Element
48
+ const isCloseDetail = (detail: unknown): boolean =>
49
+ detail !== null && typeof detail === 'object' && !Array.isArray(detail)
50
+ && typeof (detail as Record<string, unknown>)['open'] === 'boolean'
51
+ && ((detail as Record<string, unknown>)['reason'] === 'action'
52
+ || (detail as Record<string, unknown>)['reason'] === 'timeout'
53
+ || (detail as Record<string, unknown>)['reason'] === 'programmatic'
54
+ || (detail as Record<string, unknown>)['reason'] === 'light-dismiss'
55
+ || (detail as Record<string, unknown>)['reason'] === 'escape')
56
+ && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
57
+ || (detail as Record<string, unknown>)['trigger'] === 'pointer'
58
+ || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
59
+ && Object.keys(detail as object).every((key) => ['open', 'reason', 'trigger'].includes(key))
60
+ const isDismissDetail = (detail: unknown): boolean =>
61
+ detail !== null && typeof detail === 'object' && !Array.isArray(detail)
62
+ && typeof (detail as Record<string, unknown>)['id'] === 'string'
63
+ && ((detail as Record<string, unknown>)['reason'] === 'action'
64
+ || (detail as Record<string, unknown>)['reason'] === 'timeout')
65
+ && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
66
+ || (detail as Record<string, unknown>)['trigger'] === 'pointer'
67
+ || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
68
+ && Object.keys(detail as object).every((key) => ['id', 'reason', 'trigger'].includes(key))
69
+ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
70
+ checks: {
71
+ close: isCloseDetail,
72
+ dismiss: isDismissDetail,
111
73
  },
112
- state: new Proxy({} as Record<string, unknown>, {
113
- get: (_target, name) => typeof name === 'string' ? read(name) : undefined,
114
- set: (_target, name, value) => typeof name === 'string' && write(name, value),
115
- }),
116
- refs: {} as Readonly<Record<string, Element>>,
117
- elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
118
- get: (_target, name) => {
119
- if (typeof name !== 'string' || root.value === null) return undefined
120
- const form = root.value instanceof HTMLFormElement
121
- ? root.value
122
- : root.value.querySelector('form')
123
- return form?.elements.namedItem(name)
124
- ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined
125
- },
126
- }),
127
- signal<T>(initialValue: T) {
128
- const value = shallowRef(initialValue)
129
- return {
130
- get: (): T => value.value,
131
- set: (next: T): void => {
132
- if (!Object.is(value.value, next)) value.value = next
133
- },
134
- update: (next: (current: T) => T): void => {
135
- const updated = next(value.value)
136
- if (!Object.is(value.value, updated)) value.value = updated
137
- },
138
- }
139
- },
140
- computed<T>(compute: () => T) {
141
- const value = computed(compute)
142
- return { get: (): T => value.value }
143
- },
144
- effect(run: () => void | (() => void)): () => void {
145
- const stop = watchEffect((onCleanup) => {
146
- const cleanup = run()
147
- if (typeof cleanup === 'function') onCleanup(cleanup)
148
- }, { flush: 'post' })
149
- stops.push(stop)
150
- return stop
151
- },
152
- on(event: string, listener: EventListener): () => void {
153
- const element = root.value
154
- element?.addEventListener(event, listener)
155
- const off = (): void => element?.removeEventListener(event, listener)
156
- stops.push(off)
157
- return off
158
- },
159
- dispatch,
160
- }
161
-
162
- let cleanup: void | (() => void)
163
- let ready: Promise<void> | undefined
164
- onMounted(() => {
165
- ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
166
- cleanup = result
167
- })
74
+ modeled: ['open'],
168
75
  })
169
- onBeforeUnmount(() => {
170
- for (const stop of stops.splice(0)) stop()
171
- if (typeof cleanup === 'function') cleanup()
76
+
77
+ const { host, ready } = useComponentHost(controllerModule.default, {
78
+ root,
79
+ dispatch,
80
+ props,
81
+ state: { internalOpen, toasts },
172
82
  })
83
+
173
84
  defineExpose({
174
85
  show: async (...args: unknown[]) => {
175
- await ready
86
+ await ready()
176
87
  return (controllerModule as Record<string, (...values: unknown[]) => unknown>)['show']!(
177
88
  host,
178
89
  ...args,