@threadlabs/looma 0.5.1 → 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 (309) hide show
  1. package/README.md +1 -1
  2. package/components/ui-button/ui-button.html +13 -0
  3. package/components/ui-combobox/ui-combobox.html +12 -4
  4. package/components/ui-dialog/ui-dialog.html +13 -0
  5. package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html +1 -1
  6. package/components/ui-editor-mention-menu/ui-editor-mention-menu.html +1 -1
  7. package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.html +6 -2
  8. package/components/ui-editor-table-overlay/ui-editor-table-overlay.html +20 -4
  9. package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.html +8 -4
  10. package/components/ui-form-field/ui-form-field.html +18 -7
  11. package/components/ui-icon/ui-icon.html +5 -1
  12. package/components/ui-icon-button/ui-icon-button.html +30 -0
  13. package/components/ui-popover/ui-popover.js +10 -2
  14. package/components/ui-search-shell/ui-search-shell.html +7 -0
  15. package/components/ui-search-shell/ui-search-shell.js +9 -0
  16. package/components/ui-tabs/ui-tabs.html +1 -1
  17. package/components/ui-toast-region/ui-toast-region.html +1 -1
  18. package/components/ui-tree-item/ui-tree-item.html +6 -1
  19. package/dist/index.d.ts +1 -1
  20. package/dist/index.js +2 -2
  21. package/package.json +2 -2
  22. package/styles/ui-affordance-scope.css +1 -1
  23. package/styles/ui-avatar-group.css +1 -1
  24. package/styles/ui-avatar.css +1 -1
  25. package/styles/ui-badge.css +1 -1
  26. package/styles/ui-button.css +11 -1
  27. package/styles/ui-callout.css +1 -1
  28. package/styles/ui-checkbox.css +1 -1
  29. package/styles/ui-cluster.css +1 -1
  30. package/styles/ui-combobox.css +1 -1
  31. package/styles/ui-container.css +1 -1
  32. package/styles/ui-context-menu.css +1 -1
  33. package/styles/ui-dialog.css +18 -1
  34. package/styles/ui-disclosure.css +1 -1
  35. package/styles/ui-editable.css +1 -1
  36. package/styles/ui-editor-insert-table-grid.css +1 -1
  37. package/styles/ui-editor-mention-menu.css +1 -1
  38. package/styles/ui-editor-slash-menu.css +1 -1
  39. package/styles/ui-editor-table-context-menu.css +1 -1
  40. package/styles/ui-editor-table-overlay.css +1 -1
  41. package/styles/ui-editor-table-toolbar.css +1 -1
  42. package/styles/ui-editor-toolbar.css +1 -1
  43. package/styles/ui-floating-action-button.css +1 -1
  44. package/styles/ui-form-field.css +24 -10
  45. package/styles/ui-grid.css +1 -1
  46. package/styles/ui-icon-button.css +36 -1
  47. package/styles/ui-icon.css +1 -1
  48. package/styles/ui-input.css +1 -1
  49. package/styles/ui-menu-item.css +1 -1
  50. package/styles/ui-menu.css +1 -1
  51. package/styles/ui-popover.css +1 -1
  52. package/styles/ui-radio-group.css +1 -1
  53. package/styles/ui-radio.css +1 -1
  54. package/styles/ui-reel.css +1 -1
  55. package/styles/ui-search-result-row.css +1 -1
  56. package/styles/ui-search-shell.css +11 -2
  57. package/styles/ui-select.css +1 -1
  58. package/styles/ui-separator.css +1 -1
  59. package/styles/ui-sidebar.css +1 -1
  60. package/styles/ui-stack.css +1 -1
  61. package/styles/ui-switch.css +1 -1
  62. package/styles/ui-switcher.css +1 -1
  63. package/styles/ui-tabs.css +1 -1
  64. package/styles/ui-textarea.css +1 -1
  65. package/styles/ui-toast-region.css +1 -1
  66. package/styles/ui-tooltip.css +1 -1
  67. package/styles/ui-top-bar.css +1 -1
  68. package/styles/ui-tree-item.css +10 -2
  69. package/styles/ui-tree.css +1 -1
  70. package/vanilla/UiAffordanceScope.d.ts +1 -1
  71. package/vanilla/UiAffordanceScope.js +2 -2
  72. package/vanilla/UiAvatar.d.ts +1 -1
  73. package/vanilla/UiAvatar.js +2 -2
  74. package/vanilla/UiAvatarGroup.d.ts +1 -1
  75. package/vanilla/UiAvatarGroup.js +2 -2
  76. package/vanilla/UiBadge.d.ts +1 -1
  77. package/vanilla/UiBadge.js +2 -2
  78. package/vanilla/UiButton.d.ts +3 -1
  79. package/vanilla/UiButton.js +3 -3
  80. package/vanilla/UiCallout.d.ts +1 -1
  81. package/vanilla/UiCallout.js +2 -2
  82. package/vanilla/UiCheckbox.d.ts +1 -1
  83. package/vanilla/UiCheckbox.js +2 -2
  84. package/vanilla/UiCluster.d.ts +1 -1
  85. package/vanilla/UiCluster.js +2 -2
  86. package/vanilla/UiCombobox.d.ts +1 -1
  87. package/vanilla/UiCombobox.js +3 -3
  88. package/vanilla/UiContainer.d.ts +1 -1
  89. package/vanilla/UiContainer.js +2 -2
  90. package/vanilla/UiContextMenu.d.ts +1 -1
  91. package/vanilla/UiContextMenu.js +2 -2
  92. package/vanilla/UiDialog.d.ts +1 -1
  93. package/vanilla/UiDialog.js +2 -2
  94. package/vanilla/UiDisclosure.d.ts +1 -1
  95. package/vanilla/UiDisclosure.js +2 -2
  96. package/vanilla/UiEditable.d.ts +1 -1
  97. package/vanilla/UiEditable.js +2 -2
  98. package/vanilla/UiEditorInsertTableGrid.d.ts +1 -1
  99. package/vanilla/UiEditorInsertTableGrid.js +3 -3
  100. package/vanilla/UiEditorMentionMenu.d.ts +1 -1
  101. package/vanilla/UiEditorMentionMenu.js +3 -3
  102. package/vanilla/UiEditorSlashMenu.d.ts +1 -1
  103. package/vanilla/UiEditorSlashMenu.js +2 -2
  104. package/vanilla/UiEditorTableContextMenu.d.ts +1 -1
  105. package/vanilla/UiEditorTableContextMenu.js +3 -3
  106. package/vanilla/UiEditorTableOverlay.d.ts +1 -1
  107. package/vanilla/UiEditorTableOverlay.js +3 -3
  108. package/vanilla/UiEditorTableToolbar.d.ts +1 -1
  109. package/vanilla/UiEditorTableToolbar.js +3 -3
  110. package/vanilla/UiEditorToolbar.d.ts +1 -1
  111. package/vanilla/UiEditorToolbar.js +2 -2
  112. package/vanilla/UiFloatingActionButton.d.ts +1 -1
  113. package/vanilla/UiFloatingActionButton.js +2 -2
  114. package/vanilla/UiFormField.d.ts +1 -1
  115. package/vanilla/UiFormField.js +15 -6
  116. package/vanilla/UiGrid.d.ts +1 -1
  117. package/vanilla/UiGrid.js +2 -2
  118. package/vanilla/UiIcon.d.ts +1 -1
  119. package/vanilla/UiIcon.js +3 -3
  120. package/vanilla/UiIconButton.d.ts +1 -1
  121. package/vanilla/UiIconButton.js +2 -2
  122. package/vanilla/UiInput.d.ts +1 -1
  123. package/vanilla/UiInput.js +2 -2
  124. package/vanilla/UiMenu.d.ts +1 -1
  125. package/vanilla/UiMenu.js +2 -2
  126. package/vanilla/UiMenuItem.d.ts +1 -1
  127. package/vanilla/UiMenuItem.js +2 -2
  128. package/vanilla/UiPopover.d.ts +1 -1
  129. package/vanilla/UiPopover.js +2 -2
  130. package/vanilla/UiRadio.d.ts +1 -1
  131. package/vanilla/UiRadio.js +2 -2
  132. package/vanilla/UiRadioGroup.d.ts +1 -1
  133. package/vanilla/UiRadioGroup.js +2 -2
  134. package/vanilla/UiReel.d.ts +1 -1
  135. package/vanilla/UiReel.js +2 -2
  136. package/vanilla/UiSearchResultRow.d.ts +1 -1
  137. package/vanilla/UiSearchResultRow.js +2 -2
  138. package/vanilla/UiSearchShell.d.ts +1 -1
  139. package/vanilla/UiSearchShell.js +2 -2
  140. package/vanilla/UiSelect.d.ts +1 -1
  141. package/vanilla/UiSelect.js +2 -2
  142. package/vanilla/UiSeparator.d.ts +1 -1
  143. package/vanilla/UiSeparator.js +2 -2
  144. package/vanilla/UiSidebar.d.ts +1 -1
  145. package/vanilla/UiSidebar.js +2 -2
  146. package/vanilla/UiStack.d.ts +1 -1
  147. package/vanilla/UiStack.js +2 -2
  148. package/vanilla/UiSwitch.d.ts +1 -1
  149. package/vanilla/UiSwitch.js +2 -2
  150. package/vanilla/UiSwitcher.d.ts +1 -1
  151. package/vanilla/UiSwitcher.js +2 -2
  152. package/vanilla/UiTabs.d.ts +1 -1
  153. package/vanilla/UiTabs.js +3 -3
  154. package/vanilla/UiTextarea.d.ts +1 -1
  155. package/vanilla/UiTextarea.js +2 -2
  156. package/vanilla/UiToastRegion.d.ts +1 -1
  157. package/vanilla/UiToastRegion.js +3 -3
  158. package/vanilla/UiTooltip.d.ts +1 -1
  159. package/vanilla/UiTooltip.js +2 -2
  160. package/vanilla/UiTopBar.d.ts +1 -1
  161. package/vanilla/UiTopBar.js +1 -1
  162. package/vanilla/UiTree.d.ts +1 -1
  163. package/vanilla/UiTree.js +2 -2
  164. package/vanilla/UiTreeItem.d.ts +1 -1
  165. package/vanilla/UiTreeItem.js +2 -2
  166. package/vue/UiAffordanceScope.d.ts +2 -2
  167. package/vue/UiAffordanceScope.vue +92 -73
  168. package/vue/UiAvatar.d.ts +7 -7
  169. package/vue/UiAvatar.vue +145 -105
  170. package/vue/UiAvatarGroup.d.ts +4 -4
  171. package/vue/UiAvatarGroup.vue +134 -118
  172. package/vue/UiBadge.d.ts +4 -4
  173. package/vue/UiBadge.vue +113 -114
  174. package/vue/UiButton.d.ts +10 -6
  175. package/vue/UiButton.vue +289 -248
  176. package/vue/UiCallout.d.ts +2 -2
  177. package/vue/UiCallout.vue +154 -87
  178. package/vue/UiCheckbox.d.ts +14 -10
  179. package/vue/UiCheckbox.vue +228 -162
  180. package/vue/UiCluster.d.ts +2 -2
  181. package/vue/UiCluster.vue +53 -60
  182. package/vue/UiCombobox.d.ts +36 -32
  183. package/vue/UiCombobox.vue +1005 -416
  184. package/vue/UiContainer.d.ts +2 -2
  185. package/vue/UiContainer.vue +48 -51
  186. package/vue/UiContextMenu.d.ts +6 -4
  187. package/vue/UiContextMenu.vue +205 -116
  188. package/vue/UiDialog.d.ts +11 -9
  189. package/vue/UiDialog.vue +287 -212
  190. package/vue/UiDisclosure.d.ts +8 -6
  191. package/vue/UiDisclosure.vue +248 -159
  192. package/vue/UiEditable.d.ts +16 -12
  193. package/vue/UiEditable.vue +325 -205
  194. package/vue/UiEditorInsertTableGrid.d.ts +8 -8
  195. package/vue/UiEditorInsertTableGrid.vue +216 -157
  196. package/vue/UiEditorMentionMenu.d.ts +9 -9
  197. package/vue/UiEditorMentionMenu.vue +265 -222
  198. package/vue/UiEditorSlashMenu.d.ts +7 -7
  199. package/vue/UiEditorSlashMenu.vue +286 -240
  200. package/vue/UiEditorTableContextMenu.d.ts +5 -5
  201. package/vue/UiEditorTableContextMenu.vue +306 -193
  202. package/vue/UiEditorTableOverlay.d.ts +2 -2
  203. package/vue/UiEditorTableOverlay.vue +609 -369
  204. package/vue/UiEditorTableToolbar.d.ts +7 -7
  205. package/vue/UiEditorTableToolbar.vue +443 -268
  206. package/vue/UiEditorToolbar.d.ts +2 -2
  207. package/vue/UiEditorToolbar.vue +134 -121
  208. package/vue/UiFloatingActionButton.d.ts +6 -6
  209. package/vue/UiFloatingActionButton.vue +100 -99
  210. package/vue/UiFormField.d.ts +6 -6
  211. package/vue/UiFormField.vue +112 -80
  212. package/vue/UiGrid.d.ts +2 -2
  213. package/vue/UiGrid.vue +51 -57
  214. package/vue/UiIcon.d.ts +2 -2
  215. package/vue/UiIcon.vue +118 -89
  216. package/vue/UiIconButton.d.ts +11 -11
  217. package/vue/UiIconButton.vue +283 -217
  218. package/vue/UiInput.d.ts +9 -9
  219. package/vue/UiInput.vue +153 -127
  220. package/vue/UiMenu.d.ts +8 -6
  221. package/vue/UiMenu.vue +217 -143
  222. package/vue/UiMenuItem.d.ts +4 -4
  223. package/vue/UiMenuItem.vue +52 -46
  224. package/vue/UiPopover.d.ts +8 -6
  225. package/vue/UiPopover.vue +197 -137
  226. package/vue/UiRadio.d.ts +14 -10
  227. package/vue/UiRadio.vue +183 -117
  228. package/vue/UiRadioGroup.d.ts +14 -12
  229. package/vue/UiRadioGroup.vue +172 -111
  230. package/vue/UiReel.d.ts +3 -3
  231. package/vue/UiReel.vue +77 -77
  232. package/vue/UiSearchResultRow.d.ts +4 -4
  233. package/vue/UiSearchResultRow.vue +124 -115
  234. package/vue/UiSearchShell.d.ts +10 -8
  235. package/vue/UiSearchShell.vue +245 -176
  236. package/vue/UiSelect.d.ts +9 -9
  237. package/vue/UiSelect.vue +162 -134
  238. package/vue/UiSeparator.d.ts +2 -2
  239. package/vue/UiSeparator.vue +22 -27
  240. package/vue/UiSidebar.d.ts +20 -18
  241. package/vue/UiSidebar.vue +312 -224
  242. package/vue/UiStack.d.ts +3 -3
  243. package/vue/UiStack.vue +64 -70
  244. package/vue/UiSwitch.d.ts +12 -8
  245. package/vue/UiSwitch.vue +218 -150
  246. package/vue/UiSwitcher.d.ts +3 -3
  247. package/vue/UiSwitcher.vue +73 -75
  248. package/vue/UiTabs.d.ts +10 -8
  249. package/vue/UiTabs.vue +251 -210
  250. package/vue/UiTextarea.d.ts +11 -11
  251. package/vue/UiTextarea.vue +155 -128
  252. package/vue/UiToastRegion.d.ts +10 -8
  253. package/vue/UiToastRegion.vue +261 -198
  254. package/vue/UiTooltip.d.ts +14 -12
  255. package/vue/UiTooltip.vue +241 -177
  256. package/vue/UiTopBar.vue +51 -42
  257. package/vue/UiTree.d.ts +8 -6
  258. package/vue/UiTree.vue +157 -70
  259. package/vue/UiTreeItem.d.ts +24 -22
  260. package/vue/UiTreeItem.vue +456 -339
  261. package/vue/chunks/UiAffordanceScope.js +9 -16
  262. package/vue/chunks/UiAvatar.js +23 -29
  263. package/vue/chunks/UiAvatarGroup.js +16 -39
  264. package/vue/chunks/UiBadge.js +3 -12
  265. package/vue/chunks/UiButton.js +15 -18
  266. package/vue/chunks/UiCallout.js +8 -17
  267. package/vue/chunks/UiCheckbox.js +37 -40
  268. package/vue/chunks/UiCluster.js +3 -12
  269. package/vue/chunks/UiCombobox.js +224 -266
  270. package/vue/chunks/UiContainer.js +3 -12
  271. package/vue/chunks/UiContextMenu.js +39 -34
  272. package/vue/chunks/UiDialog.js +36 -39
  273. package/vue/chunks/UiDisclosure.js +43 -48
  274. package/vue/chunks/UiEditable.js +55 -57
  275. package/vue/chunks/UiEditorInsertTableGrid.js +55 -73
  276. package/vue/chunks/UiEditorMentionMenu.js +40 -81
  277. package/vue/chunks/UiEditorSlashMenu.js +28 -52
  278. package/vue/chunks/UiEditorTableContextMenu.js +32 -56
  279. package/vue/chunks/UiEditorTableOverlay.js +58 -82
  280. package/vue/chunks/UiEditorTableToolbar.js +61 -85
  281. package/vue/chunks/UiEditorToolbar.js +4 -13
  282. package/vue/chunks/UiFloatingActionButton.js +7 -21
  283. package/vue/chunks/UiFormField.js +15 -12
  284. package/vue/chunks/UiGrid.js +3 -12
  285. package/vue/chunks/UiIcon.js +20 -43
  286. package/vue/chunks/UiIconButton.js +16 -28
  287. package/vue/chunks/UiInput.js +20 -25
  288. package/vue/chunks/UiMenu.js +29 -33
  289. package/vue/chunks/UiMenuItem.js +4 -10
  290. package/vue/chunks/UiPopover.js +28 -29
  291. package/vue/chunks/UiRadio.js +36 -39
  292. package/vue/chunks/UiRadioGroup.js +30 -34
  293. package/vue/chunks/UiReel.js +6 -15
  294. package/vue/chunks/UiSearchResultRow.js +6 -19
  295. package/vue/chunks/UiSearchShell.js +25 -28
  296. package/vue/chunks/UiSelect.js +20 -23
  297. package/vue/chunks/UiSeparator.js +2 -8
  298. package/vue/chunks/UiSidebar.js +39 -44
  299. package/vue/chunks/UiStack.js +6 -15
  300. package/vue/chunks/UiSwitch.js +35 -38
  301. package/vue/chunks/UiSwitcher.js +6 -15
  302. package/vue/chunks/UiTabs.js +47 -85
  303. package/vue/chunks/UiTextarea.js +21 -26
  304. package/vue/chunks/UiToastRegion.js +38 -72
  305. package/vue/chunks/UiTooltip.js +34 -35
  306. package/vue/chunks/UiTopBar.js +1 -1
  307. package/vue/chunks/UiTree.js +20 -15
  308. package/vue/chunks/UiTreeItem.js +85 -102
  309. package/vue/components.css +3994 -3801
@@ -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;