@threadlabs/looma 0.5.0 → 0.5.2

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 (313) hide show
  1. package/README.md +1 -1
  2. package/components/shared/input-modality.d.ts +8 -0
  3. package/components/shared/input-modality.js +2 -0
  4. package/components/ui-button/ui-button.html +42 -1
  5. package/components/ui-combobox/ui-combobox.html +12 -4
  6. package/components/ui-dialog/ui-dialog.html +13 -0
  7. package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html +1 -1
  8. package/components/ui-editor-mention-menu/ui-editor-mention-menu.html +1 -1
  9. package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.html +6 -2
  10. package/components/ui-editor-table-overlay/ui-editor-table-overlay.html +20 -4
  11. package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.html +8 -4
  12. package/components/ui-form-field/ui-form-field.html +18 -7
  13. package/components/ui-icon/ui-icon.html +5 -1
  14. package/components/ui-icon-button/ui-icon-button.html +44 -1
  15. package/components/ui-popover/ui-popover.js +10 -2
  16. package/components/ui-search-shell/ui-search-shell.html +7 -0
  17. package/components/ui-search-shell/ui-search-shell.js +9 -0
  18. package/components/ui-tabs/ui-tabs.html +1 -1
  19. package/components/ui-toast-region/ui-toast-region.html +1 -1
  20. package/components/ui-tree-item/ui-tree-item.html +6 -1
  21. package/dist/index.d.ts +1 -1
  22. package/dist/index.js +2 -2
  23. package/package.json +2 -2
  24. package/styles/ui-affordance-scope.css +1 -1
  25. package/styles/ui-avatar-group.css +1 -1
  26. package/styles/ui-avatar.css +1 -1
  27. package/styles/ui-badge.css +1 -1
  28. package/styles/ui-button.css +42 -2
  29. package/styles/ui-callout.css +1 -1
  30. package/styles/ui-checkbox.css +1 -1
  31. package/styles/ui-cluster.css +1 -1
  32. package/styles/ui-combobox.css +1 -1
  33. package/styles/ui-container.css +1 -1
  34. package/styles/ui-context-menu.css +1 -1
  35. package/styles/ui-dialog.css +18 -1
  36. package/styles/ui-disclosure.css +1 -1
  37. package/styles/ui-editable.css +1 -1
  38. package/styles/ui-editor-insert-table-grid.css +1 -1
  39. package/styles/ui-editor-mention-menu.css +1 -1
  40. package/styles/ui-editor-slash-menu.css +1 -1
  41. package/styles/ui-editor-table-context-menu.css +1 -1
  42. package/styles/ui-editor-table-overlay.css +1 -1
  43. package/styles/ui-editor-table-toolbar.css +1 -1
  44. package/styles/ui-editor-toolbar.css +1 -1
  45. package/styles/ui-floating-action-button.css +1 -1
  46. package/styles/ui-form-field.css +24 -10
  47. package/styles/ui-grid.css +1 -1
  48. package/styles/ui-icon-button.css +52 -2
  49. package/styles/ui-icon.css +1 -1
  50. package/styles/ui-input.css +1 -1
  51. package/styles/ui-menu-item.css +1 -1
  52. package/styles/ui-menu.css +1 -1
  53. package/styles/ui-popover.css +1 -1
  54. package/styles/ui-radio-group.css +1 -1
  55. package/styles/ui-radio.css +1 -1
  56. package/styles/ui-reel.css +1 -1
  57. package/styles/ui-search-result-row.css +1 -1
  58. package/styles/ui-search-shell.css +11 -2
  59. package/styles/ui-select.css +1 -1
  60. package/styles/ui-separator.css +1 -1
  61. package/styles/ui-sidebar.css +1 -1
  62. package/styles/ui-stack.css +1 -1
  63. package/styles/ui-switch.css +1 -1
  64. package/styles/ui-switcher.css +1 -1
  65. package/styles/ui-tabs.css +1 -1
  66. package/styles/ui-textarea.css +1 -1
  67. package/styles/ui-toast-region.css +1 -1
  68. package/styles/ui-tooltip.css +1 -1
  69. package/styles/ui-top-bar.css +1 -1
  70. package/styles/ui-tree-item.css +10 -2
  71. package/styles/ui-tree.css +1 -1
  72. package/vanilla/UiAffordanceScope.d.ts +1 -1
  73. package/vanilla/UiAffordanceScope.js +2 -2
  74. package/vanilla/UiAvatar.d.ts +1 -1
  75. package/vanilla/UiAvatar.js +2 -2
  76. package/vanilla/UiAvatarGroup.d.ts +1 -1
  77. package/vanilla/UiAvatarGroup.js +2 -2
  78. package/vanilla/UiBadge.d.ts +1 -1
  79. package/vanilla/UiBadge.js +2 -2
  80. package/vanilla/UiButton.d.ts +3 -1
  81. package/vanilla/UiButton.js +3 -3
  82. package/vanilla/UiCallout.d.ts +1 -1
  83. package/vanilla/UiCallout.js +2 -2
  84. package/vanilla/UiCheckbox.d.ts +1 -1
  85. package/vanilla/UiCheckbox.js +2 -2
  86. package/vanilla/UiCluster.d.ts +1 -1
  87. package/vanilla/UiCluster.js +2 -2
  88. package/vanilla/UiCombobox.d.ts +1 -1
  89. package/vanilla/UiCombobox.js +3 -3
  90. package/vanilla/UiContainer.d.ts +1 -1
  91. package/vanilla/UiContainer.js +2 -2
  92. package/vanilla/UiContextMenu.d.ts +1 -1
  93. package/vanilla/UiContextMenu.js +2 -2
  94. package/vanilla/UiDialog.d.ts +1 -1
  95. package/vanilla/UiDialog.js +2 -2
  96. package/vanilla/UiDisclosure.d.ts +1 -1
  97. package/vanilla/UiDisclosure.js +2 -2
  98. package/vanilla/UiEditable.d.ts +1 -1
  99. package/vanilla/UiEditable.js +2 -2
  100. package/vanilla/UiEditorInsertTableGrid.d.ts +1 -1
  101. package/vanilla/UiEditorInsertTableGrid.js +3 -3
  102. package/vanilla/UiEditorMentionMenu.d.ts +1 -1
  103. package/vanilla/UiEditorMentionMenu.js +3 -3
  104. package/vanilla/UiEditorSlashMenu.d.ts +1 -1
  105. package/vanilla/UiEditorSlashMenu.js +2 -2
  106. package/vanilla/UiEditorTableContextMenu.d.ts +1 -1
  107. package/vanilla/UiEditorTableContextMenu.js +3 -3
  108. package/vanilla/UiEditorTableOverlay.d.ts +1 -1
  109. package/vanilla/UiEditorTableOverlay.js +3 -3
  110. package/vanilla/UiEditorTableToolbar.d.ts +1 -1
  111. package/vanilla/UiEditorTableToolbar.js +3 -3
  112. package/vanilla/UiEditorToolbar.d.ts +1 -1
  113. package/vanilla/UiEditorToolbar.js +2 -2
  114. package/vanilla/UiFloatingActionButton.d.ts +1 -1
  115. package/vanilla/UiFloatingActionButton.js +2 -2
  116. package/vanilla/UiFormField.d.ts +1 -1
  117. package/vanilla/UiFormField.js +15 -6
  118. package/vanilla/UiGrid.d.ts +1 -1
  119. package/vanilla/UiGrid.js +2 -2
  120. package/vanilla/UiIcon.d.ts +1 -1
  121. package/vanilla/UiIcon.js +3 -3
  122. package/vanilla/UiIconButton.d.ts +1 -1
  123. package/vanilla/UiIconButton.js +2 -2
  124. package/vanilla/UiInput.d.ts +1 -1
  125. package/vanilla/UiInput.js +2 -2
  126. package/vanilla/UiMenu.d.ts +1 -1
  127. package/vanilla/UiMenu.js +2 -2
  128. package/vanilla/UiMenuItem.d.ts +1 -1
  129. package/vanilla/UiMenuItem.js +2 -2
  130. package/vanilla/UiPopover.d.ts +1 -1
  131. package/vanilla/UiPopover.js +2 -2
  132. package/vanilla/UiRadio.d.ts +1 -1
  133. package/vanilla/UiRadio.js +2 -2
  134. package/vanilla/UiRadioGroup.d.ts +1 -1
  135. package/vanilla/UiRadioGroup.js +2 -2
  136. package/vanilla/UiReel.d.ts +1 -1
  137. package/vanilla/UiReel.js +2 -2
  138. package/vanilla/UiSearchResultRow.d.ts +1 -1
  139. package/vanilla/UiSearchResultRow.js +2 -2
  140. package/vanilla/UiSearchShell.d.ts +1 -1
  141. package/vanilla/UiSearchShell.js +2 -2
  142. package/vanilla/UiSelect.d.ts +1 -1
  143. package/vanilla/UiSelect.js +2 -2
  144. package/vanilla/UiSeparator.d.ts +1 -1
  145. package/vanilla/UiSeparator.js +2 -2
  146. package/vanilla/UiSidebar.d.ts +1 -1
  147. package/vanilla/UiSidebar.js +2 -2
  148. package/vanilla/UiStack.d.ts +1 -1
  149. package/vanilla/UiStack.js +2 -2
  150. package/vanilla/UiSwitch.d.ts +1 -1
  151. package/vanilla/UiSwitch.js +2 -2
  152. package/vanilla/UiSwitcher.d.ts +1 -1
  153. package/vanilla/UiSwitcher.js +2 -2
  154. package/vanilla/UiTabs.d.ts +1 -1
  155. package/vanilla/UiTabs.js +3 -3
  156. package/vanilla/UiTextarea.d.ts +1 -1
  157. package/vanilla/UiTextarea.js +2 -2
  158. package/vanilla/UiToastRegion.d.ts +1 -1
  159. package/vanilla/UiToastRegion.js +3 -3
  160. package/vanilla/UiTooltip.d.ts +1 -1
  161. package/vanilla/UiTooltip.js +2 -2
  162. package/vanilla/UiTopBar.d.ts +1 -1
  163. package/vanilla/UiTopBar.js +1 -1
  164. package/vanilla/UiTree.d.ts +1 -1
  165. package/vanilla/UiTree.js +2 -2
  166. package/vanilla/UiTreeItem.d.ts +1 -1
  167. package/vanilla/UiTreeItem.js +2 -2
  168. package/vue/UiAffordanceScope.d.ts +2 -2
  169. package/vue/UiAffordanceScope.vue +92 -73
  170. package/vue/UiAvatar.d.ts +7 -7
  171. package/vue/UiAvatar.vue +145 -105
  172. package/vue/UiAvatarGroup.d.ts +4 -4
  173. package/vue/UiAvatarGroup.vue +134 -118
  174. package/vue/UiBadge.d.ts +4 -4
  175. package/vue/UiBadge.vue +113 -114
  176. package/vue/UiButton.d.ts +10 -6
  177. package/vue/UiButton.vue +289 -220
  178. package/vue/UiCallout.d.ts +2 -2
  179. package/vue/UiCallout.vue +154 -87
  180. package/vue/UiCheckbox.d.ts +14 -10
  181. package/vue/UiCheckbox.vue +228 -162
  182. package/vue/UiCluster.d.ts +2 -2
  183. package/vue/UiCluster.vue +53 -60
  184. package/vue/UiCombobox.d.ts +36 -32
  185. package/vue/UiCombobox.vue +1005 -416
  186. package/vue/UiContainer.d.ts +2 -2
  187. package/vue/UiContainer.vue +48 -51
  188. package/vue/UiContextMenu.d.ts +6 -4
  189. package/vue/UiContextMenu.vue +205 -116
  190. package/vue/UiDialog.d.ts +11 -9
  191. package/vue/UiDialog.vue +287 -212
  192. package/vue/UiDisclosure.d.ts +8 -6
  193. package/vue/UiDisclosure.vue +248 -159
  194. package/vue/UiEditable.d.ts +16 -12
  195. package/vue/UiEditable.vue +325 -205
  196. package/vue/UiEditorInsertTableGrid.d.ts +8 -8
  197. package/vue/UiEditorInsertTableGrid.vue +216 -157
  198. package/vue/UiEditorMentionMenu.d.ts +9 -9
  199. package/vue/UiEditorMentionMenu.vue +265 -222
  200. package/vue/UiEditorSlashMenu.d.ts +7 -7
  201. package/vue/UiEditorSlashMenu.vue +286 -240
  202. package/vue/UiEditorTableContextMenu.d.ts +5 -5
  203. package/vue/UiEditorTableContextMenu.vue +306 -193
  204. package/vue/UiEditorTableOverlay.d.ts +2 -2
  205. package/vue/UiEditorTableOverlay.vue +609 -369
  206. package/vue/UiEditorTableToolbar.d.ts +7 -7
  207. package/vue/UiEditorTableToolbar.vue +443 -268
  208. package/vue/UiEditorToolbar.d.ts +2 -2
  209. package/vue/UiEditorToolbar.vue +134 -121
  210. package/vue/UiFloatingActionButton.d.ts +6 -6
  211. package/vue/UiFloatingActionButton.vue +100 -99
  212. package/vue/UiFormField.d.ts +6 -6
  213. package/vue/UiFormField.vue +112 -80
  214. package/vue/UiGrid.d.ts +2 -2
  215. package/vue/UiGrid.vue +51 -57
  216. package/vue/UiIcon.d.ts +2 -2
  217. package/vue/UiIcon.vue +118 -89
  218. package/vue/UiIconButton.d.ts +11 -11
  219. package/vue/UiIconButton.vue +285 -206
  220. package/vue/UiInput.d.ts +9 -9
  221. package/vue/UiInput.vue +153 -127
  222. package/vue/UiMenu.d.ts +8 -6
  223. package/vue/UiMenu.vue +217 -143
  224. package/vue/UiMenuItem.d.ts +4 -4
  225. package/vue/UiMenuItem.vue +52 -46
  226. package/vue/UiPopover.d.ts +8 -6
  227. package/vue/UiPopover.vue +197 -137
  228. package/vue/UiRadio.d.ts +14 -10
  229. package/vue/UiRadio.vue +183 -117
  230. package/vue/UiRadioGroup.d.ts +14 -12
  231. package/vue/UiRadioGroup.vue +172 -111
  232. package/vue/UiReel.d.ts +3 -3
  233. package/vue/UiReel.vue +77 -77
  234. package/vue/UiSearchResultRow.d.ts +4 -4
  235. package/vue/UiSearchResultRow.vue +124 -115
  236. package/vue/UiSearchShell.d.ts +10 -8
  237. package/vue/UiSearchShell.vue +245 -176
  238. package/vue/UiSelect.d.ts +9 -9
  239. package/vue/UiSelect.vue +162 -134
  240. package/vue/UiSeparator.d.ts +2 -2
  241. package/vue/UiSeparator.vue +22 -27
  242. package/vue/UiSidebar.d.ts +20 -18
  243. package/vue/UiSidebar.vue +312 -224
  244. package/vue/UiStack.d.ts +3 -3
  245. package/vue/UiStack.vue +64 -70
  246. package/vue/UiSwitch.d.ts +12 -8
  247. package/vue/UiSwitch.vue +218 -150
  248. package/vue/UiSwitcher.d.ts +3 -3
  249. package/vue/UiSwitcher.vue +73 -75
  250. package/vue/UiTabs.d.ts +10 -8
  251. package/vue/UiTabs.vue +251 -210
  252. package/vue/UiTextarea.d.ts +11 -11
  253. package/vue/UiTextarea.vue +155 -128
  254. package/vue/UiToastRegion.d.ts +10 -8
  255. package/vue/UiToastRegion.vue +261 -198
  256. package/vue/UiTooltip.d.ts +14 -12
  257. package/vue/UiTooltip.vue +241 -177
  258. package/vue/UiTopBar.vue +51 -42
  259. package/vue/UiTree.d.ts +8 -6
  260. package/vue/UiTree.vue +157 -70
  261. package/vue/UiTreeItem.d.ts +24 -22
  262. package/vue/UiTreeItem.vue +456 -339
  263. package/vue/chunks/UiAffordanceScope.js +9 -16
  264. package/vue/chunks/UiAvatar.js +23 -29
  265. package/vue/chunks/UiAvatarGroup.js +16 -39
  266. package/vue/chunks/UiBadge.js +3 -12
  267. package/vue/chunks/UiButton.js +15 -18
  268. package/vue/chunks/UiCallout.js +8 -17
  269. package/vue/chunks/UiCheckbox.js +37 -40
  270. package/vue/chunks/UiCluster.js +3 -12
  271. package/vue/chunks/UiCombobox.js +224 -266
  272. package/vue/chunks/UiContainer.js +3 -12
  273. package/vue/chunks/UiContextMenu.js +39 -34
  274. package/vue/chunks/UiDialog.js +36 -39
  275. package/vue/chunks/UiDisclosure.js +43 -48
  276. package/vue/chunks/UiEditable.js +55 -57
  277. package/vue/chunks/UiEditorInsertTableGrid.js +55 -73
  278. package/vue/chunks/UiEditorMentionMenu.js +40 -81
  279. package/vue/chunks/UiEditorSlashMenu.js +28 -52
  280. package/vue/chunks/UiEditorTableContextMenu.js +32 -56
  281. package/vue/chunks/UiEditorTableOverlay.js +58 -82
  282. package/vue/chunks/UiEditorTableToolbar.js +61 -85
  283. package/vue/chunks/UiEditorToolbar.js +4 -13
  284. package/vue/chunks/UiFloatingActionButton.js +7 -21
  285. package/vue/chunks/UiFormField.js +15 -12
  286. package/vue/chunks/UiGrid.js +3 -12
  287. package/vue/chunks/UiIcon.js +20 -43
  288. package/vue/chunks/UiIconButton.js +16 -28
  289. package/vue/chunks/UiInput.js +20 -25
  290. package/vue/chunks/UiMenu.js +29 -33
  291. package/vue/chunks/UiMenuItem.js +4 -10
  292. package/vue/chunks/UiPopover.js +28 -29
  293. package/vue/chunks/UiRadio.js +36 -39
  294. package/vue/chunks/UiRadioGroup.js +30 -34
  295. package/vue/chunks/UiReel.js +6 -15
  296. package/vue/chunks/UiSearchResultRow.js +6 -19
  297. package/vue/chunks/UiSearchShell.js +25 -28
  298. package/vue/chunks/UiSelect.js +20 -23
  299. package/vue/chunks/UiSeparator.js +2 -8
  300. package/vue/chunks/UiSidebar.js +39 -44
  301. package/vue/chunks/UiStack.js +6 -15
  302. package/vue/chunks/UiSwitch.js +35 -38
  303. package/vue/chunks/UiSwitcher.js +6 -15
  304. package/vue/chunks/UiTabs.js +47 -85
  305. package/vue/chunks/UiTextarea.js +21 -26
  306. package/vue/chunks/UiToastRegion.js +38 -72
  307. package/vue/chunks/UiTooltip.js +34 -35
  308. package/vue/chunks/UiTopBar.js +1 -1
  309. package/vue/chunks/UiTree.js +20 -15
  310. package/vue/chunks/UiTreeItem.js +85 -102
  311. package/vue/components.css +3994 -3764
  312. package/vue/index.d.ts +1 -0
  313. package/vue/index.js +2 -1
@@ -1,252 +1,365 @@
1
- <!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
1
+ <!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
2
2
  <script setup lang="ts">
3
- import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from "vue";
4
- import UiIcon from "./UiIcon.vue";
5
- import * as controllerModule from "../components/ui-editor-table-context-menu/ui-editor-table-context-menu.js";
6
-
7
- defineOptions({ inheritAttrs: false });
8
-
9
- const hn = {
10
- t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
11
- text: (v: unknown): string => v === undefined || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
12
- attr: (v: unknown): any => v === undefined || v === null || v === false ? undefined : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? undefined : String(v),
13
- enumerated: (v: unknown): any => typeof v === "boolean" ? String(v) : hn.attr(v),
14
- shape: (items: unknown, where: ((item: any) => unknown) | undefined, sort: readonly string[], limit: unknown): any[] => {
15
- let list = Array.isArray(items) ? items.slice() : [];
16
- if (where !== undefined) list = list.filter((item) => hn.t(where(item)));
17
- if (sort.length > 0) {
18
- const field = (item: unknown, path: string): unknown => item !== null && typeof item === "object" && !Array.isArray(item)
19
- ? path.split(".").reduce<unknown>((value, key) => (value as Record<string, unknown> | undefined)?.[key], item)
20
- : item;
21
- const compare = (a: unknown, b: unknown): number => typeof a === "number" && typeof b === "number" ? a - b : hn.text(a).localeCompare(hn.text(b));
22
- list.sort((a, b) => {
23
- for (const key of sort) {
24
- const descending = key.startsWith("-");
25
- const order = compare(field(a, descending ? key.slice(1) : key), field(b, descending ? key.slice(1) : key));
26
- if (order !== 0) return descending ? -order : order;
27
- }
28
- return 0;
29
- });
30
- }
31
- return typeof limit === "number" ? list.slice(0, Math.max(0, Math.trunc(limit))) : list;
3
+ import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from 'vue'
4
+ import * as controllerModule from '../components/ui-editor-table-context-menu/ui-editor-table-context-menu.js'
5
+ import UiIcon from './UiIcon.vue'
6
+
7
+ defineOptions({ inheritAttrs: false })
8
+
9
+ const props = withDefaults(
10
+ defineProps<{
11
+ actions?:
12
+ readonly (
13
+ | 'align-left'
14
+ | 'align-center'
15
+ | 'align-right'
16
+ | 'background-none'
17
+ | 'background-gray'
18
+ | 'background-yellow'
19
+ | 'background-blue'
20
+ | 'background-green'
21
+ | 'background-red'
22
+ | 'add-row-before'
23
+ | 'add-row-after'
24
+ | 'add-column-before'
25
+ | 'add-column-after'
26
+ | 'clear-cells'
27
+ | 'merge-cells'
28
+ | 'split-cell'
29
+ | 'delete-row'
30
+ | 'delete-column'
31
+ | 'delete-table'
32
+ )[]
33
+ cellBackground?: string
34
+ open?: boolean
35
+ }>(),
36
+ {
37
+ cellBackground: '',
38
+ open: false,
32
39
  },
33
- };
34
-
35
- const props = withDefaults(defineProps<{
36
- actions?: readonly ("align-left" | "align-center" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table")[] | null;
37
- cellBackground?: string | null;
38
- open?: boolean | null;
39
- }>(), {
40
- cellBackground: "",
41
- open: false,
42
- });
40
+ )
43
41
  const emit = defineEmits<{
44
- "action": [detail: { readonly action: "align-left" | "align-center" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table" }];
45
- }>();
46
- const root = ref<HTMLElement | null>(null);
47
- const refs: Record<string, Element | undefined> = {};
48
- const state_swatches = ref<any>([]);
49
- const state_sections = ref<any>([]);
42
+ action: [
43
+ detail: {
44
+ readonly action:
45
+ | 'align-left'
46
+ | 'align-center'
47
+ | 'align-right'
48
+ | 'background-none'
49
+ | 'background-gray'
50
+ | 'background-yellow'
51
+ | 'background-blue'
52
+ | 'background-green'
53
+ | 'background-red'
54
+ | 'add-row-before'
55
+ | 'add-row-after'
56
+ | 'add-column-before'
57
+ | 'add-column-after'
58
+ | 'clear-cells'
59
+ | 'merge-cells'
60
+ | 'split-cell'
61
+ | 'delete-row'
62
+ | 'delete-column'
63
+ | 'delete-table'
64
+ },
65
+ ]
66
+ }>()
67
+
68
+ const root = ref<HTMLElement | null>(null)
69
+ const swatches = ref<{ action: string; label: string; color: string; selected: boolean }[] | null>(
70
+ [],
71
+ )
72
+ const sections = ref<
73
+ { heading: string; items: { action: string; label: string; icon: string; danger: boolean }[] }[]
74
+ >([])
50
75
 
51
76
  /** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
52
- const dispatch = (name: string, detail?: unknown): boolean => {
53
- const declared = {"action":{"bubbles":true,"composed":true,"cancelable":false}} as Record<string, EventInit | undefined>;
77
+ function dispatch(name: string, detail?: unknown): boolean {
78
+ const declared: Record<string, EventInit | undefined> = {
79
+ action: { bubbles: true, composed: true, cancelable: false },
80
+ }
54
81
  const checks: Record<string, (detail: unknown) => boolean> = {
55
- "action": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && ((detail as Record<string, unknown>)["action"] === "align-left" || (detail as Record<string, unknown>)["action"] === "align-center" || (detail as Record<string, unknown>)["action"] === "align-right" || (detail as Record<string, unknown>)["action"] === "background-none" || (detail as Record<string, unknown>)["action"] === "background-gray" || (detail as Record<string, unknown>)["action"] === "background-yellow" || (detail as Record<string, unknown>)["action"] === "background-blue" || (detail as Record<string, unknown>)["action"] === "background-green" || (detail as Record<string, unknown>)["action"] === "background-red" || (detail as Record<string, unknown>)["action"] === "add-row-before" || (detail as Record<string, unknown>)["action"] === "add-row-after" || (detail as Record<string, unknown>)["action"] === "add-column-before" || (detail as Record<string, unknown>)["action"] === "add-column-after" || (detail as Record<string, unknown>)["action"] === "clear-cells" || (detail as Record<string, unknown>)["action"] === "merge-cells" || (detail as Record<string, unknown>)["action"] === "split-cell" || (detail as Record<string, unknown>)["action"] === "delete-row" || (detail as Record<string, unknown>)["action"] === "delete-column" || (detail as Record<string, unknown>)["action"] === "delete-table") && Object.keys(detail as object).every((key) => ["action"].includes(key))),
56
- };
82
+ action: (detail) =>
83
+ detail !== null && typeof detail === 'object' && !Array.isArray(detail)
84
+ && ((detail as Record<string, unknown>)['action'] === 'align-left'
85
+ || (detail as Record<string, unknown>)['action'] === 'align-center'
86
+ || (detail as Record<string, unknown>)['action'] === 'align-right'
87
+ || (detail as Record<string, unknown>)['action'] === 'background-none'
88
+ || (detail as Record<string, unknown>)['action'] === 'background-gray'
89
+ || (detail as Record<string, unknown>)['action'] === 'background-yellow'
90
+ || (detail as Record<string, unknown>)['action'] === 'background-blue'
91
+ || (detail as Record<string, unknown>)['action'] === 'background-green'
92
+ || (detail as Record<string, unknown>)['action'] === 'background-red'
93
+ || (detail as Record<string, unknown>)['action'] === 'add-row-before'
94
+ || (detail as Record<string, unknown>)['action'] === 'add-row-after'
95
+ || (detail as Record<string, unknown>)['action'] === 'add-column-before'
96
+ || (detail as Record<string, unknown>)['action'] === 'add-column-after'
97
+ || (detail as Record<string, unknown>)['action'] === 'clear-cells'
98
+ || (detail as Record<string, unknown>)['action'] === 'merge-cells'
99
+ || (detail as Record<string, unknown>)['action'] === 'split-cell'
100
+ || (detail as Record<string, unknown>)['action'] === 'delete-row'
101
+ || (detail as Record<string, unknown>)['action'] === 'delete-column'
102
+ || (detail as Record<string, unknown>)['action'] === 'delete-table')
103
+ && Object.keys(detail as object).every((key) => ['action'].includes(key)),
104
+ }
57
105
  if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
58
- throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
106
+ throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`)
59
107
  }
60
- (emit as (name: string, detail: unknown) => void)(name, detail);
61
- return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail })) ?? true;
62
- };
108
+ const emitEvent = emit as (name: string, detail: unknown) => void
109
+ emitEvent(name, detail)
110
+ return root.value?.dispatchEvent(
111
+ new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
112
+ ) ?? true
113
+ }
63
114
 
64
115
  function read(name: string): unknown {
65
- if (name === "swatches") return state_swatches.value;
66
- if (name === "sections") return state_sections.value;
67
- return (props as Record<string, unknown>)[name];
116
+ if (name === 'swatches') return swatches.value
117
+ if (name === 'sections') return sections.value
118
+ return (props as Record<string, unknown>)[name]
68
119
  }
69
120
 
70
121
  function write(name: string, value: unknown): boolean {
71
- if (name === "swatches") { state_swatches.value = value; return true; }
72
- if (name === "sections") { state_sections.value = value; return true; }
73
- throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
122
+ if (name === 'swatches') {
123
+ swatches.value = value as never
124
+ return true
125
+ }
126
+ if (name === 'sections') {
127
+ sections.value = value as never
128
+ return true
129
+ }
130
+ throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
74
131
  }
75
132
 
76
- const stops: Array<() => void> = [];
133
+ const stops: Array<() => void> = []
77
134
  const host = {
78
- get element(): Element { return root.value as Element; },
135
+ get element(): Element {
136
+ return root.value as Element
137
+ },
79
138
  state: new Proxy({} as Record<string, unknown>, {
80
- get: (_target, name) => typeof name === "string" ? read(name) : undefined,
81
- set: (_target, name, value) => typeof name === "string" && write(name, value),
139
+ get: (_target, name) => typeof name === 'string' ? read(name) : undefined,
140
+ set: (_target, name, value) => typeof name === 'string' && write(name, value),
82
141
  }),
83
- refs: refs as Readonly<Record<string, Element>>,
142
+ refs: {} as Readonly<Record<string, Element>>,
84
143
  elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
85
144
  get: (_target, name) => {
86
- if (typeof name !== "string" || root.value === null) return undefined;
87
- const form = root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form");
88
- return form?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined;
145
+ if (typeof name !== 'string' || root.value === null) return undefined
146
+ const form = root.value instanceof HTMLFormElement
147
+ ? root.value
148
+ : root.value.querySelector('form')
149
+ return form?.elements.namedItem(name)
150
+ ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined
89
151
  },
90
152
  }),
91
153
  signal<T>(initialValue: T) {
92
- const value = shallowRef(initialValue);
154
+ const value = shallowRef(initialValue)
93
155
  return {
94
156
  get: (): T => value.value,
95
- set: (next: T): void => { if (!Object.is(value.value, next)) value.value = next; },
96
- update: (next: (current: T) => T): void => { const updated = next(value.value); if (!Object.is(value.value, updated)) value.value = updated; },
97
- };
157
+ set: (next: T): void => {
158
+ if (!Object.is(value.value, next)) value.value = next
159
+ },
160
+ update: (next: (current: T) => T): void => {
161
+ const updated = next(value.value)
162
+ if (!Object.is(value.value, updated)) value.value = updated
163
+ },
164
+ }
98
165
  },
99
166
  computed<T>(compute: () => T) {
100
- const value = computed(compute);
101
- return { get: (): T => value.value };
167
+ const value = computed(compute)
168
+ return { get: (): T => value.value }
102
169
  },
103
170
  effect(run: () => void | (() => void)): () => void {
104
171
  const stop = watchEffect((onCleanup) => {
105
- const cleanup = run();
106
- if (typeof cleanup === "function") onCleanup(cleanup);
107
- }, { flush: "post" });
108
- stops.push(stop);
109
- return stop;
172
+ const cleanup = run()
173
+ if (typeof cleanup === 'function') onCleanup(cleanup)
174
+ }, { flush: 'post' })
175
+ stops.push(stop)
176
+ return stop
110
177
  },
111
178
  on(event: string, listener: EventListener): () => void {
112
- const element = root.value;
113
- element?.addEventListener(event, listener);
114
- const off = (): void => element?.removeEventListener(event, listener);
115
- stops.push(off);
116
- return off;
179
+ const element = root.value
180
+ element?.addEventListener(event, listener)
181
+ const off = (): void => element?.removeEventListener(event, listener)
182
+ stops.push(off)
183
+ return off
117
184
  },
118
185
  dispatch,
119
- };
186
+ }
120
187
 
121
- let cleanup: void | (() => void);
122
- let ready: Promise<void> | undefined;
188
+ let cleanup: void | (() => void)
189
+ let ready: Promise<void> | undefined
123
190
  onMounted(() => {
124
- ready = Promise.resolve(controllerModule.default(host as never)).then((result) => { cleanup = result; });
125
- });
191
+ ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
192
+ cleanup = result
193
+ })
194
+ })
126
195
  onBeforeUnmount(() => {
127
- for (const stop of stops.splice(0)) stop();
128
- if (typeof cleanup === "function") cleanup();
129
- });
196
+ for (const stop of stops.splice(0)) stop()
197
+ if (typeof cleanup === 'function') cleanup()
198
+ })
130
199
  </script>
131
200
 
132
201
  <template>
133
- <div data-component="ui-editor-table-context-menu" role="menu" v-bind="$attrs" :hidden="hn.attr(!hn.t(props.open))" ref="root"><template v-if="hn.t(state_swatches)"><div class="section" role="none"><div class="heading" role="presentation">Cell background</div><div class="swatches" role="group" aria-label="Cell background"><template v-for="(swatch, index) in hn.shape(state_swatches, undefined, [], undefined)" :key="(swatch)?.action"><button type="button" class="swatch-button" role="menuitemradio" :aria-checked="hn.enumerated((swatch)?.selected)" :data-action="hn.attr((swatch)?.action)" :class="{ 'selected': hn.t((swatch)?.selected) }"><span class="swatch" :class="{ 'default': hn.t(!hn.t((swatch)?.color)) }" :style="{ '--ui-editor-table-context-swatch': hn.text((swatch)?.color) }"></span><span class="swatch-label">{{ hn.text((swatch)?.label) }}</span></button></template></div></div></template><template v-for="(section, index) in hn.shape(state_sections, undefined, [], undefined)" :key="(section)?.heading"><div class="sep"></div><div class="section" role="none"><div class="heading" role="presentation">{{ hn.text((section)?.heading) }}</div><template v-for="(item, index) in hn.shape((section)?.items, undefined, [], undefined)" :key="(item)?.action"><button type="button" role="menuitem" :data-action="hn.attr((item)?.action)" :class="{ 'danger': hn.t((item)?.danger) }"><UiIcon :name="(item)?.icon"></UiIcon><span>{{ hn.text((item)?.label) }}</span></button></template></div></template></div>
202
+ <div
203
+ data-component="ui-editor-table-context-menu"
204
+ role="menu"
205
+ v-bind="$attrs"
206
+ :hidden="!open"
207
+ ref="root"
208
+ >
209
+ <div v-if="swatches?.length" class="section" role="none">
210
+ <div class="heading" role="presentation">Cell background</div>
211
+ <div class="swatches" role="group" aria-label="Cell background">
212
+ <button
213
+ v-for="swatch in swatches"
214
+ :key="swatch.action"
215
+ type="button"
216
+ class="swatch-button"
217
+ role="menuitemradio"
218
+ :aria-checked="swatch.selected"
219
+ :data-action="swatch.action"
220
+ :class="{ selected: swatch.selected }"
221
+ >
222
+ <span
223
+ class="swatch"
224
+ :class="{ default: !swatch.color }"
225
+ :style="{ '--ui-editor-table-context-swatch': swatch.color }"
226
+ ></span>
227
+ <span class="swatch-label">{{ swatch.label }}</span>
228
+ </button>
229
+ </div>
230
+ </div>
231
+ <template v-for="section in sections" :key="section.heading"><div class="sep"></div>
232
+ <div class="section" role="none">
233
+ <div class="heading" role="presentation">{{ section.heading }}</div>
234
+ <button
235
+ v-for="item in section.items"
236
+ :key="item.action"
237
+ type="button"
238
+ role="menuitem"
239
+ :data-action="item.action"
240
+ :class="{ danger: item.danger }"
241
+ >
242
+ <UiIcon :name="item.icon" />
243
+ <span>{{ item.label }}</span>
244
+ </button>
245
+ </div></template>
246
+ </div>
134
247
  </template>
135
248
 
136
249
  <style scoped>
137
250
  [data-component~="ui-editor-table-context-menu"] {
138
- min-width: 14rem;
139
- max-width: min(17rem, calc(100vw - 24px));
140
- max-height: min(28rem, calc(100vh - 24px));
141
- padding: var(--ui-space-1-5, 6px);
142
- background: var(--ui-surface, #fff);
143
- border: 1px solid var(--ui-border, #e5e7eb);
144
- border-radius: var(--ui-radius-lg, 10px);
145
- box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
146
- display: flex;
147
- flex-direction: column;
148
- gap: 2px;
149
- overflow-y: auto;
150
- overscroll-behavior: contain;
151
- scrollbar-width: thin;
152
- }
251
+ min-width: 14rem;
252
+ max-width: min(17rem, calc(100vw - 24px));
253
+ max-height: min(28rem, calc(100vh - 24px));
254
+ padding: var(--ui-space-1-5, 6px);
255
+ background: var(--ui-surface, #fff);
256
+ border: 1px solid var(--ui-border, #e5e7eb);
257
+ border-radius: var(--ui-radius-lg, 10px);
258
+ box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
259
+ display: flex;
260
+ flex-direction: column;
261
+ gap: 2px;
262
+ overflow-y: auto;
263
+ overscroll-behavior: contain;
264
+ scrollbar-width: thin;
265
+ }
153
266
 
154
- .section {
155
- display: flex;
156
- flex-direction: column;
157
- gap: 3px;
158
- }
267
+ .section {
268
+ display: flex;
269
+ flex-direction: column;
270
+ gap: 3px;
271
+ }
159
272
 
160
- [data-component~="ui-editor-table-context-menu"] button {
161
- display: flex;
162
- align-items: center;
163
- gap: var(--ui-space-2, 8px);
164
- width: 100%;
165
- text-align: left;
166
- min-height: 32px;
167
- padding: var(--ui-space-1-5, 6px) var(--ui-space-2, 8px);
168
- border: none;
169
- border-radius: var(--ui-radius-sm, 4px);
170
- background: none;
171
- font-size: var(--ui-font-size-sm, 0.875rem);
172
- cursor: pointer;
173
- color: var(--ui-text, #111);
174
- }
273
+ [data-component~="ui-editor-table-context-menu"] button {
274
+ display: flex;
275
+ align-items: center;
276
+ gap: var(--ui-space-2, 8px);
277
+ width: 100%;
278
+ text-align: left;
279
+ min-height: 32px;
280
+ padding: var(--ui-space-1-5, 6px) var(--ui-space-2, 8px);
281
+ border: none;
282
+ border-radius: var(--ui-radius-sm, 4px);
283
+ background: none;
284
+ font-size: var(--ui-font-size-sm, 0.875rem);
285
+ cursor: pointer;
286
+ color: var(--ui-text, #111);
287
+ }
175
288
 
176
- [data-component~="ui-editor-table-context-menu"] button {
177
- --ui-icon-size: 1rem;
178
- --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
179
- }
289
+ [data-component~="ui-editor-table-context-menu"] button {
290
+ --ui-icon-size: 1rem;
291
+ --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
292
+ }
180
293
 
181
- [data-component~="ui-editor-table-context-menu"] button:hover:not(:disabled) {
182
- background: var(--ui-surface-hover, #f3f4f6);
183
- }
294
+ [data-component~="ui-editor-table-context-menu"] button:hover:not(:disabled) {
295
+ background: var(--ui-surface-hover, #f3f4f6);
296
+ }
184
297
 
185
- [data-component~="ui-editor-table-context-menu"] button.selected {
186
- background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
187
- }
298
+ [data-component~="ui-editor-table-context-menu"] button.selected {
299
+ background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
300
+ }
188
301
 
189
- [data-component~="ui-editor-table-context-menu"] button.danger {
190
- color: var(--ui-danger, #dc2626);
191
- }
302
+ [data-component~="ui-editor-table-context-menu"] button.danger {
303
+ color: var(--ui-danger, #dc2626);
304
+ }
192
305
 
193
- .swatches {
194
- display: grid;
195
- grid-template-columns: repeat(3, minmax(0, 1fr));
196
- gap: 3px;
197
- }
306
+ .swatches {
307
+ display: grid;
308
+ grid-template-columns: repeat(3, minmax(0, 1fr));
309
+ gap: 3px;
310
+ }
198
311
 
199
- .swatch-button {
200
- display: inline-flex;
201
- align-items: center;
202
- gap: var(--ui-space-2, 8px);
203
- }
312
+ .swatch-button {
313
+ display: inline-flex;
314
+ align-items: center;
315
+ gap: var(--ui-space-2, 8px);
316
+ }
204
317
 
205
- .swatch {
206
- display: inline-flex;
207
- width: 1rem;
208
- height: 1rem;
209
- border-radius: 999px;
210
- border: 1px solid var(--ui-border, #d1d5db);
211
- background: var(--ui-editor-table-context-swatch, #fff);
212
- box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
213
- flex-shrink: 0;
214
- }
318
+ .swatch {
319
+ display: inline-flex;
320
+ width: 1rem;
321
+ height: 1rem;
322
+ border-radius: 999px;
323
+ border: 1px solid var(--ui-border, #d1d5db);
324
+ background: var(--ui-editor-table-context-swatch, #fff);
325
+ box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
326
+ flex-shrink: 0;
327
+ }
215
328
 
216
- .swatch.default {
217
- position: relative;
218
- background:
219
- linear-gradient(
220
- 135deg,
221
- transparent calc(50% - 1px),
222
- var(--ui-text-muted, #6b7280) calc(50% - 1px),
223
- var(--ui-text-muted, #6b7280) calc(50% + 1px),
224
- transparent calc(50% + 1px)
225
- ),
226
- var(--ui-surface, #fff);
227
- }
329
+ .swatch.default {
330
+ position: relative;
331
+ background:
332
+ linear-gradient(
333
+ 135deg,
334
+ transparent calc(50% - 1px),
335
+ var(--ui-text-muted, #6b7280) calc(50% - 1px),
336
+ var(--ui-text-muted, #6b7280) calc(50% + 1px),
337
+ transparent calc(50% + 1px)
338
+ ),
339
+ var(--ui-surface, #fff);
340
+ }
228
341
 
229
- .swatch-label {
230
- min-width: 0;
231
- white-space: nowrap;
232
- }
342
+ .swatch-label {
343
+ min-width: 0;
344
+ white-space: nowrap;
345
+ }
233
346
 
234
- .heading {
235
- padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
236
- font-size: 0.6875rem;
237
- font-weight: 700;
238
- letter-spacing: 0.05em;
239
- text-transform: uppercase;
240
- color: var(--ui-text-muted, #6b7280);
241
- }
347
+ .heading {
348
+ padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
349
+ font-size: 0.6875rem;
350
+ font-weight: 700;
351
+ letter-spacing: 0.05em;
352
+ text-transform: uppercase;
353
+ color: var(--ui-text-muted, #6b7280);
354
+ }
242
355
 
243
- .sep {
244
- height: 1px;
245
- background: var(--ui-border, #e5e7eb);
246
- margin: var(--ui-space-1, 4px) 0;
247
- }
356
+ .sep {
357
+ height: 1px;
358
+ background: var(--ui-border, #e5e7eb);
359
+ margin: var(--ui-space-1, 4px) 0;
360
+ }
248
361
 
249
- [data-component~="ui-editor-table-context-menu"][hidden] {
250
- display: none;
251
- }
362
+ [data-component~="ui-editor-table-context-menu"][hidden] {
363
+ display: none;
364
+ }
252
365
  </style>
@@ -19,7 +19,7 @@ type __VLS_Props = {
19
19
  readonly columnIndex: number;
20
20
  } | null;
21
21
  } | null;
22
- open?: boolean | null;
22
+ open?: boolean;
23
23
  };
24
24
  declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
25
25
  action: (detail: {
@@ -60,7 +60,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
60
60
  };
61
61
  }) => any) | undefined;
62
62
  }>, {
63
- open: boolean | null;
63
+ open: boolean;
64
64
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
65
65
  declare const _default: typeof __VLS_export;
66
66
  export default _default;