@threadlabs/looma 0.6.0 → 0.6.1
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.
- package/components/ui-button/ui-button.html +2 -2
- package/components/ui-cluster/ui-cluster.html +1 -1
- package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html +3 -3
- package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.html +2 -2
- package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.html +2 -2
- package/components/ui-editor-toolbar/ui-editor-toolbar.html +5 -3
- package/components/ui-stack/ui-stack.html +1 -1
- package/components/ui-toast-region/ui-toast-region.html +2 -2
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/styles/ui-cluster.css +1 -1
- package/styles/ui-editor-insert-table-grid.css +2 -2
- package/styles/ui-editor-table-context-menu.css +1 -1
- package/styles/ui-editor-table-toolbar.css +1 -1
- package/styles/ui-editor-toolbar.css +5 -3
- package/styles/ui-stack.css +1 -1
- package/styles/ui-toast-region.css +2 -2
- package/tokens.css +4 -0
- package/vanilla/UiEditorInsertTableGrid.js +1 -1
- package/vanilla/UiEditorTableContextMenu.js +1 -1
- package/vanilla/UiEditorTableToolbar.js +1 -1
- package/vue/UiCluster.vue +1 -1
- package/vue/UiEditorInsertTableGrid.vue +3 -3
- package/vue/UiEditorTableContextMenu.vue +2 -2
- package/vue/UiEditorTableToolbar.vue +2 -2
- package/vue/UiEditorToolbar.vue +5 -3
- package/vue/UiStack.vue +1 -1
- package/vue/UiToastRegion.vue +2 -2
- package/vue/chunks/UiCluster.js +1 -1
- package/vue/chunks/UiEditorInsertTableGrid.js +3 -3
- package/vue/chunks/UiEditorTableContextMenu.js +2 -2
- package/vue/chunks/UiEditorTableToolbar.js +2 -2
- package/vue/chunks/UiEditorToolbar.js +1 -1
- package/vue/chunks/UiStack.js +1 -1
- package/vue/chunks/UiToastRegion.js +1 -1
- package/vue/components.css +131 -122
- package/vue/editor/index.js +2 -1
package/package.json
CHANGED
package/styles/ui-cluster.css
CHANGED
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
|
|
17
17
|
.grid {
|
|
18
18
|
display: grid;
|
|
19
|
-
grid-template-columns: repeat(var(--
|
|
20
|
-
grid-template-rows: repeat(var(--
|
|
19
|
+
grid-template-columns: repeat(var(--_cols, 8), 1.25rem);
|
|
20
|
+
grid-template-rows: repeat(var(--_rows, 8), 1.25rem);
|
|
21
21
|
gap: 2px;
|
|
22
22
|
margin-bottom: var(--ui-space-2);
|
|
23
23
|
}
|
|
@@ -10,9 +10,10 @@
|
|
|
10
10
|
gap: var(--ui-editor-toolbar-gap, 2px);
|
|
11
11
|
padding: var(--ui-editor-toolbar-padding-block, 6px) var(--ui-editor-toolbar-padding-inline, 12px);
|
|
12
12
|
min-height: var(--ui-editor-toolbar-min-height, 48px);
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
/* More controls than the column is wide is normal at a readable measure, so the row wraps.
|
|
14
|
+
Scrolling hid the tail behind an invisible scrollbar. */
|
|
15
|
+
flex-wrap: wrap;
|
|
16
|
+
row-gap: var(--ui-editor-toolbar-row-gap, var(--ui-editor-toolbar-gap, 2px));
|
|
16
17
|
background: var(--ui-editor-toolbar-surface, var(--ui-surface));
|
|
17
18
|
border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
|
|
18
19
|
}
|
|
@@ -22,6 +23,7 @@
|
|
|
22
23
|
}
|
|
23
24
|
|
|
24
25
|
:scope[data-ui-editor-toolbar-state~="floating"] {
|
|
26
|
+
flex-wrap: nowrap;
|
|
25
27
|
position: static;
|
|
26
28
|
top: auto;
|
|
27
29
|
width: max-content;
|
package/styles/ui-stack.css
CHANGED
|
@@ -58,12 +58,12 @@
|
|
|
58
58
|
background: var(--ui-surface-elevated);
|
|
59
59
|
color: var(--ui-text-primary);
|
|
60
60
|
box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
|
|
61
|
-
animation: ui-toast-enter var(--ui-toast-enter-duration, 0.32s) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
|
|
61
|
+
animation: ui-toast-enter var(--ui-toast-region-enter-duration, 0.32s) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
/* Leaving slides on down and fades; the controller removes the toast when this ends. */
|
|
65
65
|
.toast.closing {
|
|
66
|
-
animation: ui-toast-exit var(--ui-toast-exit-duration, 0.22s) var(--ui-motion-ease) both;
|
|
66
|
+
animation: ui-toast-exit var(--ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease) both;
|
|
67
67
|
pointer-events: none;
|
|
68
68
|
}
|
|
69
69
|
|
package/tokens.css
CHANGED
|
@@ -98,8 +98,12 @@
|
|
|
98
98
|
--ui-font-size-ui: calc(var(--ui-font-size) * 0.9375);
|
|
99
99
|
--ui-font-size-md: var(--ui-font-size);
|
|
100
100
|
--ui-font-size-lg: calc(var(--ui-font-size) * 1.125);
|
|
101
|
+
--ui-font-size-xl: calc(var(--ui-font-size) * 1.25);
|
|
102
|
+
--ui-font-size-2xl: calc(var(--ui-font-size) * 1.5);
|
|
101
103
|
--ui-line-height-tight: 1.2;
|
|
102
104
|
--ui-line-height-md: var(--ui-line-height);
|
|
105
|
+
/* Prose, not controls: the editor's document body reads at a looser line height. */
|
|
106
|
+
--ui-line-height-relaxed: calc(var(--ui-line-height) * 1.15);
|
|
103
107
|
--ui-font-normal: 400;
|
|
104
108
|
--ui-font-semibold: 600;
|
|
105
109
|
--ui-font-bold: 700;
|
|
@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
|
|
|
3
3
|
import * as controller from "../components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.js";
|
|
4
4
|
import "../styles/ui-editor-insert-table-grid.css";
|
|
5
5
|
|
|
6
|
-
const definition = {...{"contract":{"tag":"ui-editor-insert-table-grid","props":{"headerRow":{"type":"boolean","required":false,"target":{"attribute":"headerrow"},"default":false},"maxCols":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"maxcols"},"default":8},"maxRows":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"maxrows"},"default":8},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"attribute","name":"hidden","expression":"not open","expressionPlan":{"source":"not open","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"open"}},"dependencies":["open"]}}],"children":[{"kind":"element","name":"p","attributes":[{"kind":"literal","name":"class","value":"hint"},{"kind":"directive","name":"value","expression":"hint","expressionPlan":{"source":"hint","ast":{"kind":"id","name":"hint"},"dependencies":["hint"]}}],"children":[]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"grid"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Table dimensions"},{"kind":"attribute","name":"--
|
|
6
|
+
const definition = {...{"contract":{"tag":"ui-editor-insert-table-grid","props":{"headerRow":{"type":"boolean","required":false,"target":{"attribute":"headerrow"},"default":false},"maxCols":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"maxcols"},"default":8},"maxRows":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"maxrows"},"default":8},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"attribute","name":"hidden","expression":"not open","expressionPlan":{"source":"not open","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"open"}},"dependencies":["open"]}}],"children":[{"kind":"element","name":"p","attributes":[{"kind":"literal","name":"class","value":"hint"},{"kind":"directive","name":"value","expression":"hint","expressionPlan":{"source":"hint","ast":{"kind":"id","name":"hint"},"dependencies":["hint"]}}],"children":[]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"grid"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Table dimensions"},{"kind":"attribute","name":"--_rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]},"target":"style"},{"kind":"attribute","name":"--_cols","expression":"cols","expressionPlan":{"source":"cols","ast":{"kind":"id","name":"cols"},"dependencies":["cols"]},"target":"style"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"cell"},{"kind":"attribute","name":"selected","expression":"cell.selected","expressionPlan":{"source":"cell.selected","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"selected"},"dependencies":["cell.selected"]},"target":"class"},{"kind":"attribute","name":"data-row","expression":"cell.row","expressionPlan":{"source":"cell.row","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"row"},"dependencies":["cell.row"]}},{"kind":"attribute","name":"data-col","expression":"cell.col","expressionPlan":{"source":"cell.col","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"col"},"dependencies":["cell.col"]}},{"kind":"attribute","name":"aria-label","expression":"cell.label","expressionPlan":{"source":"cell.label","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"label"},"dependencies":["cell.label"]}},{"kind":"attribute","name":"aria-pressed","expression":"cell.selected","expressionPlan":{"source":"cell.selected","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"selected"},"dependencies":["cell.selected"]}}],"children":[],"flow":{"kind":"each","item":"cell","list":"cells","listPlan":{"source":"cells","ast":{"kind":"id","name":"cells"},"dependencies":["cells"]},"key":"cell.key","keyPlan":{"source":"cell.key","ast":{"kind":"member","object":{"kind":"id","name":"cell"},"key":"key"},"dependencies":["cell.key"]}}}]},{"kind":"element","name":"label","attributes":[{"kind":"literal","name":"class","value":"header"}],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"checkbox"},{"kind":"property","key":"checked","name":"checked","expression":"withHeaderRow","expressionPlan":{"source":"withHeaderRow","ast":{"kind":"id","name":"withHeaderRow"},"dependencies":["withHeaderRow"]}}],"children":[],"ref":"header"},{"kind":"text","value":" Header row"}]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"insert"}],"children":[{"kind":"text","value":"Insert table"}],"ref":"insert"}]},"declarations":[{"kind":"state","name":"cells","type":"list(object({ key: string, row: integer, col: integer, label: string, selected: boolean }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"rows","expression":{"source":"8","ast":{"kind":"literal","value":8},"dependencies":[]}},{"kind":"state","name":"cols","expression":{"source":"8","ast":{"kind":"literal","value":8},"dependencies":[]}},{"kind":"state","name":"hint","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"withHeaderRow","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"insert","type":"object({ rows: integer, cols: integer, withHeaderRow: boolean })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
|
|
7
7
|
|
|
8
8
|
export function createUiEditorInsertTableGrid(options = {}) {
|
|
9
9
|
const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
|
|
@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
|
|
|
3
3
|
import * as controller from "../components/ui-editor-table-context-menu/ui-editor-table-context-menu.js";
|
|
4
4
|
import "../styles/ui-editor-table-context-menu.css";
|
|
5
5
|
|
|
6
|
-
const definition = {...{"contract":{"tag":"ui-editor-table-context-menu","props":{"actions":{"type":{"kind":"list","item":{"kind":"union","members":[{"kind":"keyword","value":"align-left"},{"kind":"keyword","value":"align-center"},{"kind":"keyword","value":"align-right"},{"kind":"keyword","value":"background-none"},{"kind":"keyword","value":"background-gray"},{"kind":"keyword","value":"background-yellow"},{"kind":"keyword","value":"background-blue"},{"kind":"keyword","value":"background-green"},{"kind":"keyword","value":"background-red"},{"kind":"keyword","value":"add-row-before"},{"kind":"keyword","value":"add-row-after"},{"kind":"keyword","value":"add-column-before"},{"kind":"keyword","value":"add-column-after"},{"kind":"keyword","value":"clear-cells"},{"kind":"keyword","value":"merge-cells"},{"kind":"keyword","value":"split-cell"},{"kind":"keyword","value":"delete-row"},{"kind":"keyword","value":"delete-column"},{"kind":"keyword","value":"delete-table"}]}},"required":false,"target":{"attribute":"actions"}},"cellBackground":{"type":"string","required":false,"target":{"attribute":"cellbackground"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"menu"},{"kind":"attribute","name":"hidden","expression":"not open","expressionPlan":{"source":"not open","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"open"}},"dependencies":["open"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"section"},{"kind":"literal","name":"role","value":"none"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"heading"},{"kind":"literal","name":"role","value":"presentation"}],"children":[{"kind":"text","value":"Cell background"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"swatches"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Cell background"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"swatch-button"},{"kind":"attribute","name":"selected","expression":"swatch.selected","expressionPlan":{"source":"swatch.selected","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"selected"},"dependencies":["swatch.selected"]},"target":"class"},{"kind":"literal","name":"role","value":"menuitemradio"},{"kind":"attribute","name":"aria-checked","expression":"swatch.selected","expressionPlan":{"source":"swatch.selected","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"selected"},"dependencies":["swatch.selected"]}},{"kind":"attribute","name":"data-action","expression":"swatch.action","expressionPlan":{"source":"swatch.action","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"action"},"dependencies":["swatch.action"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"swatch"},{"kind":"attribute","name":"default","expression":"not swatch.color","expressionPlan":{"source":"not swatch.color","ast":{"kind":"unary","op":"not","operand":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"color"}},"dependencies":["swatch.color"]},"target":"class"},{"kind":"attribute","name":"--
|
|
6
|
+
const definition = {...{"contract":{"tag":"ui-editor-table-context-menu","props":{"actions":{"type":{"kind":"list","item":{"kind":"union","members":[{"kind":"keyword","value":"align-left"},{"kind":"keyword","value":"align-center"},{"kind":"keyword","value":"align-right"},{"kind":"keyword","value":"background-none"},{"kind":"keyword","value":"background-gray"},{"kind":"keyword","value":"background-yellow"},{"kind":"keyword","value":"background-blue"},{"kind":"keyword","value":"background-green"},{"kind":"keyword","value":"background-red"},{"kind":"keyword","value":"add-row-before"},{"kind":"keyword","value":"add-row-after"},{"kind":"keyword","value":"add-column-before"},{"kind":"keyword","value":"add-column-after"},{"kind":"keyword","value":"clear-cells"},{"kind":"keyword","value":"merge-cells"},{"kind":"keyword","value":"split-cell"},{"kind":"keyword","value":"delete-row"},{"kind":"keyword","value":"delete-column"},{"kind":"keyword","value":"delete-table"}]}},"required":false,"target":{"attribute":"actions"}},"cellBackground":{"type":"string","required":false,"target":{"attribute":"cellbackground"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"menu"},{"kind":"attribute","name":"hidden","expression":"not open","expressionPlan":{"source":"not open","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"open"}},"dependencies":["open"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"section"},{"kind":"literal","name":"role","value":"none"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"heading"},{"kind":"literal","name":"role","value":"presentation"}],"children":[{"kind":"text","value":"Cell background"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"swatches"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Cell background"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"swatch-button"},{"kind":"attribute","name":"selected","expression":"swatch.selected","expressionPlan":{"source":"swatch.selected","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"selected"},"dependencies":["swatch.selected"]},"target":"class"},{"kind":"literal","name":"role","value":"menuitemradio"},{"kind":"attribute","name":"aria-checked","expression":"swatch.selected","expressionPlan":{"source":"swatch.selected","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"selected"},"dependencies":["swatch.selected"]}},{"kind":"attribute","name":"data-action","expression":"swatch.action","expressionPlan":{"source":"swatch.action","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"action"},"dependencies":["swatch.action"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"swatch"},{"kind":"attribute","name":"default","expression":"not swatch.color","expressionPlan":{"source":"not swatch.color","ast":{"kind":"unary","op":"not","operand":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"color"}},"dependencies":["swatch.color"]},"target":"class"},{"kind":"attribute","name":"--_swatch","expression":"swatch.color","expressionPlan":{"source":"swatch.color","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"color"},"dependencies":["swatch.color"]},"target":"style"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"swatch-label"},{"kind":"directive","name":"value","expression":"swatch.label","expressionPlan":{"source":"swatch.label","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"label"},"dependencies":["swatch.label"]}}],"children":[]}],"flow":{"kind":"each","item":"swatch","list":"swatches","listPlan":{"source":"swatches","ast":{"kind":"id","name":"swatches"},"dependencies":["swatches"]},"key":"swatch.action","keyPlan":{"source":"swatch.action","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"action"},"dependencies":["swatch.action"]}}}]}],"flow":{"kind":"if","test":"swatches","testPlan":{"source":"swatches","ast":{"kind":"id","name":"swatches"},"dependencies":["swatches"]}}},{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"sep"}],"children":[]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"section"},{"kind":"literal","name":"role","value":"none"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"heading"},{"kind":"literal","name":"role","value":"presentation"},{"kind":"directive","name":"value","expression":"section.heading","expressionPlan":{"source":"section.heading","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"heading"},"dependencies":["section.heading"]}}],"children":[]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"role","value":"menuitem"},{"kind":"attribute","name":"danger","expression":"item.danger","expressionPlan":{"source":"item.danger","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"danger"},"dependencies":["item.danger"]},"target":"class"},{"kind":"attribute","name":"data-action","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"attribute","name":"name","expression":"item.icon","expressionPlan":{"source":"item.icon","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"icon"},"dependencies":["item.icon"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"directive","name":"value","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}}],"children":[]}],"flow":{"kind":"each","item":"item","list":"section.items","listPlan":{"source":"section.items","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"items"},"dependencies":["section.items"]},"key":"item.action","keyPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}}]}],"flow":{"kind":"each","item":"section","list":"sections","listPlan":{"source":"sections","ast":{"kind":"id","name":"sections"},"dependencies":["sections"]},"key":"section.heading","keyPlan":{"source":"section.heading","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"heading"},"dependencies":["section.heading"]}}}]},"declarations":[{"kind":"state","name":"swatches","type":"list(object({ action: string, label: string, color: string, selected: boolean })) | null","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"sections","type":"list(object({ heading: string, items: list(object({ action: string, label: string, icon: string, danger: boolean })) }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"event","name":"action","type":"object({ 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 })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
|
|
7
7
|
|
|
8
8
|
export function createUiEditorTableContextMenu(options = {}) {
|
|
9
9
|
const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
|
|
@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
|
|
|
3
3
|
import * as controller from "../components/ui-editor-table-toolbar/ui-editor-table-toolbar.js";
|
|
4
4
|
import "../styles/ui-editor-table-toolbar.css";
|
|
5
5
|
|
|
6
|
-
const definition = {...{"contract":{"tag":"ui-editor-table-toolbar","props":{"actions":{"type":{"kind":"list","item":{"kind":"union","members":[{"kind":"keyword","value":"align-left"},{"kind":"keyword","value":"align-center"},{"kind":"keyword","value":"align-right"},{"kind":"keyword","value":"background-none"},{"kind":"keyword","value":"background-gray"},{"kind":"keyword","value":"background-yellow"},{"kind":"keyword","value":"background-blue"},{"kind":"keyword","value":"background-green"},{"kind":"keyword","value":"background-red"},{"kind":"keyword","value":"add-row-before"},{"kind":"keyword","value":"add-row-after"},{"kind":"keyword","value":"add-column-before"},{"kind":"keyword","value":"add-column-after"},{"kind":"keyword","value":"clear-cells"},{"kind":"keyword","value":"merge-cells"},{"kind":"keyword","value":"split-cell"},{"kind":"keyword","value":"delete-row"},{"kind":"keyword","value":"delete-column"},{"kind":"keyword","value":"delete-table"}]}},"required":false,"target":{"attribute":"actions"}},"cellAlignment":{"type":{"enum":["left","center","right"]},"required":false,"target":{"attribute":"cellalignment"},"default":"left"},"cellBackground":{"type":"string","required":false,"target":{"attribute":"cellbackground"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"toolbar"},{"kind":"literal","name":"aria-label","value":"Table actions"},{"kind":"attribute","name":"hidden","expression":"not open","expressionPlan":{"source":"not open","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"open"}},"dependencies":["open"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"group"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Cell alignment"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"icon-button"},{"kind":"attribute","name":"active","expression":"item.active","expressionPlan":{"source":"item.active","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"active"},"dependencies":["item.active"]},"target":"class"},{"kind":"attribute","name":"data-action","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}},{"kind":"attribute","name":"aria-label","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}},{"kind":"attribute","name":"title","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}},{"kind":"attribute","name":"aria-pressed","expression":"item.active","expressionPlan":{"source":"item.active","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"active"},"dependencies":["item.active"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"attribute","name":"name","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}],"children":[]}],"flow":{"kind":"each","item":"item","list":"alignments","listPlan":{"source":"alignments","ast":{"kind":"id","name":"alignments"},"dependencies":["alignments"]},"key":"item.action","keyPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}}],"flow":{"kind":"if","test":"alignments","testPlan":{"source":"alignments","ast":{"kind":"id","name":"alignments"},"dependencies":["alignments"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"sep"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[],"flow":{"kind":"if","test":"alignments and structure","testPlan":{"source":"alignments and structure","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"alignments"},"right":{"kind":"id","name":"structure"}},"dependencies":["alignments","structure"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"group"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Table structure"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"data-action","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"attribute","name":"name","expression":"item.icon","expressionPlan":{"source":"item.icon","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"icon"},"dependencies":["item.icon"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"directive","name":"value","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}}],"children":[]}],"flow":{"kind":"each","item":"item","list":"structure","listPlan":{"source":"structure","ast":{"kind":"id","name":"structure"},"dependencies":["structure"]},"key":"item.action","keyPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}}],"flow":{"kind":"if","test":"structure","testPlan":{"source":"structure","ast":{"kind":"id","name":"structure"},"dependencies":["structure"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"sep"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[],"flow":{"kind":"if","test":"(alignments or structure) and hasOverflow","testPlan":{"source":"(alignments or structure) and hasOverflow","ast":{"kind":"binary","op":"and","left":{"kind":"binary","op":"or","left":{"kind":"id","name":"alignments"},"right":{"kind":"id","name":"structure"}},"right":{"kind":"id","name":"hasOverflow"}},"dependencies":["alignments","hasOverflow","structure"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"overflow"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"more"},{"kind":"literal","name":"data-action","value":"toggle-overflow"},{"kind":"literal","name":"aria-haspopup","value":"menu"},{"kind":"attribute","name":"aria-expanded","expression":"overflowOpen","expressionPlan":{"source":"overflowOpen","ast":{"kind":"id","name":"overflowOpen"},"dependencies":["overflowOpen"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"table"}],"children":[]},{"kind":"element","name":"span","attributes":[],"children":[{"kind":"text","value":"Table options"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"chevron"}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"chevron-down"}],"children":[]}]}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu"},{"kind":"literal","name":"role","value":"menu"},{"kind":"literal","name":"aria-label","value":"More table actions"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu-section"},{"kind":"literal","name":"role","value":"none"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu-heading"},{"kind":"literal","name":"role","value":"presentation"}],"children":[{"kind":"text","value":"Background"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"swatches"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Cell background"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"swatch-button"},{"kind":"attribute","name":"selected","expression":"swatch.selected","expressionPlan":{"source":"swatch.selected","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"selected"},"dependencies":["swatch.selected"]},"target":"class"},{"kind":"literal","name":"role","value":"menuitemradio"},{"kind":"attribute","name":"aria-checked","expression":"swatch.selected","expressionPlan":{"source":"swatch.selected","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"selected"},"dependencies":["swatch.selected"]}},{"kind":"attribute","name":"data-action","expression":"swatch.action","expressionPlan":{"source":"swatch.action","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"action"},"dependencies":["swatch.action"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"swatch"},{"kind":"attribute","name":"default","expression":"not swatch.color","expressionPlan":{"source":"not swatch.color","ast":{"kind":"unary","op":"not","operand":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"color"}},"dependencies":["swatch.color"]},"target":"class"},{"kind":"attribute","name":"--ui-editor-table-toolbar-swatch","expression":"swatch.color","expressionPlan":{"source":"swatch.color","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"color"},"dependencies":["swatch.color"]},"target":"style"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"directive","name":"value","expression":"swatch.label","expressionPlan":{"source":"swatch.label","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"label"},"dependencies":["swatch.label"]}}],"children":[]}],"flow":{"kind":"each","item":"swatch","list":"swatches","listPlan":{"source":"swatches","ast":{"kind":"id","name":"swatches"},"dependencies":["swatches"]},"key":"swatch.action","keyPlan":{"source":"swatch.action","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"action"},"dependencies":["swatch.action"]}}}]}],"flow":{"kind":"if","test":"swatches","testPlan":{"source":"swatches","ast":{"kind":"id","name":"swatches"},"dependencies":["swatches"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu-section divided"},{"kind":"literal","name":"role","value":"none"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu-heading"},{"kind":"literal","name":"role","value":"presentation"},{"kind":"directive","name":"value","expression":"section.heading","expressionPlan":{"source":"section.heading","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"heading"},"dependencies":["section.heading"]}}],"children":[]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"role","value":"menuitem"},{"kind":"attribute","name":"danger","expression":"item.danger","expressionPlan":{"source":"item.danger","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"danger"},"dependencies":["item.danger"]},"target":"class"},{"kind":"attribute","name":"data-action","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"attribute","name":"name","expression":"item.icon","expressionPlan":{"source":"item.icon","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"icon"},"dependencies":["item.icon"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"directive","name":"value","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}}],"children":[]}],"flow":{"kind":"each","item":"item","list":"section.items","listPlan":{"source":"section.items","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"items"},"dependencies":["section.items"]},"key":"item.action","keyPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}}],"flow":{"kind":"each","item":"section","list":"sections","listPlan":{"source":"sections","ast":{"kind":"id","name":"sections"},"dependencies":["sections"]},"key":"section.heading","keyPlan":{"source":"section.heading","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"heading"},"dependencies":["section.heading"]}}}],"flow":{"kind":"if","test":"overflowOpen","testPlan":{"source":"overflowOpen","ast":{"kind":"id","name":"overflowOpen"},"dependencies":["overflowOpen"]}}}],"flow":{"kind":"if","test":"hasOverflow","testPlan":{"source":"hasOverflow","ast":{"kind":"id","name":"hasOverflow"},"dependencies":["hasOverflow"]}}}]},"declarations":[{"kind":"state","name":"alignments","type":"list(object({ action: align-left | align-center | align-right, label: string, active: boolean }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"structure","type":"list(object({ action: add-row-after | add-column-after, label: string, icon: string }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"swatches","type":"list(object({ action: string, label: string, color: string, selected: boolean }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"sections","type":"list(object({ heading: string, items: list(object({ action: string, label: string, icon: string, danger: boolean })) }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"hasOverflow","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"overflowOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"action","type":"object({ 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 })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
|
|
6
|
+
const definition = {...{"contract":{"tag":"ui-editor-table-toolbar","props":{"actions":{"type":{"kind":"list","item":{"kind":"union","members":[{"kind":"keyword","value":"align-left"},{"kind":"keyword","value":"align-center"},{"kind":"keyword","value":"align-right"},{"kind":"keyword","value":"background-none"},{"kind":"keyword","value":"background-gray"},{"kind":"keyword","value":"background-yellow"},{"kind":"keyword","value":"background-blue"},{"kind":"keyword","value":"background-green"},{"kind":"keyword","value":"background-red"},{"kind":"keyword","value":"add-row-before"},{"kind":"keyword","value":"add-row-after"},{"kind":"keyword","value":"add-column-before"},{"kind":"keyword","value":"add-column-after"},{"kind":"keyword","value":"clear-cells"},{"kind":"keyword","value":"merge-cells"},{"kind":"keyword","value":"split-cell"},{"kind":"keyword","value":"delete-row"},{"kind":"keyword","value":"delete-column"},{"kind":"keyword","value":"delete-table"}]}},"required":false,"target":{"attribute":"actions"}},"cellAlignment":{"type":{"enum":["left","center","right"]},"required":false,"target":{"attribute":"cellalignment"},"default":"left"},"cellBackground":{"type":"string","required":false,"target":{"attribute":"cellbackground"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"toolbar"},{"kind":"literal","name":"aria-label","value":"Table actions"},{"kind":"attribute","name":"hidden","expression":"not open","expressionPlan":{"source":"not open","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"open"}},"dependencies":["open"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"group"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Cell alignment"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"icon-button"},{"kind":"attribute","name":"active","expression":"item.active","expressionPlan":{"source":"item.active","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"active"},"dependencies":["item.active"]},"target":"class"},{"kind":"attribute","name":"data-action","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}},{"kind":"attribute","name":"aria-label","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}},{"kind":"attribute","name":"title","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}},{"kind":"attribute","name":"aria-pressed","expression":"item.active","expressionPlan":{"source":"item.active","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"active"},"dependencies":["item.active"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"attribute","name":"name","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}],"children":[]}],"flow":{"kind":"each","item":"item","list":"alignments","listPlan":{"source":"alignments","ast":{"kind":"id","name":"alignments"},"dependencies":["alignments"]},"key":"item.action","keyPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}}],"flow":{"kind":"if","test":"alignments","testPlan":{"source":"alignments","ast":{"kind":"id","name":"alignments"},"dependencies":["alignments"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"sep"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[],"flow":{"kind":"if","test":"alignments and structure","testPlan":{"source":"alignments and structure","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"alignments"},"right":{"kind":"id","name":"structure"}},"dependencies":["alignments","structure"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"group"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Table structure"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"data-action","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"attribute","name":"name","expression":"item.icon","expressionPlan":{"source":"item.icon","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"icon"},"dependencies":["item.icon"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"directive","name":"value","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}}],"children":[]}],"flow":{"kind":"each","item":"item","list":"structure","listPlan":{"source":"structure","ast":{"kind":"id","name":"structure"},"dependencies":["structure"]},"key":"item.action","keyPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}}],"flow":{"kind":"if","test":"structure","testPlan":{"source":"structure","ast":{"kind":"id","name":"structure"},"dependencies":["structure"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"sep"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[],"flow":{"kind":"if","test":"(alignments or structure) and hasOverflow","testPlan":{"source":"(alignments or structure) and hasOverflow","ast":{"kind":"binary","op":"and","left":{"kind":"binary","op":"or","left":{"kind":"id","name":"alignments"},"right":{"kind":"id","name":"structure"}},"right":{"kind":"id","name":"hasOverflow"}},"dependencies":["alignments","hasOverflow","structure"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"overflow"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"more"},{"kind":"literal","name":"data-action","value":"toggle-overflow"},{"kind":"literal","name":"aria-haspopup","value":"menu"},{"kind":"attribute","name":"aria-expanded","expression":"overflowOpen","expressionPlan":{"source":"overflowOpen","ast":{"kind":"id","name":"overflowOpen"},"dependencies":["overflowOpen"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"table"}],"children":[]},{"kind":"element","name":"span","attributes":[],"children":[{"kind":"text","value":"Table options"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"chevron"}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"literal","name":"name","value":"chevron-down"}],"children":[]}]}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu"},{"kind":"literal","name":"role","value":"menu"},{"kind":"literal","name":"aria-label","value":"More table actions"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu-section"},{"kind":"literal","name":"role","value":"none"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu-heading"},{"kind":"literal","name":"role","value":"presentation"}],"children":[{"kind":"text","value":"Background"}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"swatches"},{"kind":"literal","name":"role","value":"group"},{"kind":"literal","name":"aria-label","value":"Cell background"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"class","value":"swatch-button"},{"kind":"attribute","name":"selected","expression":"swatch.selected","expressionPlan":{"source":"swatch.selected","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"selected"},"dependencies":["swatch.selected"]},"target":"class"},{"kind":"literal","name":"role","value":"menuitemradio"},{"kind":"attribute","name":"aria-checked","expression":"swatch.selected","expressionPlan":{"source":"swatch.selected","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"selected"},"dependencies":["swatch.selected"]}},{"kind":"attribute","name":"data-action","expression":"swatch.action","expressionPlan":{"source":"swatch.action","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"action"},"dependencies":["swatch.action"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"swatch"},{"kind":"attribute","name":"default","expression":"not swatch.color","expressionPlan":{"source":"not swatch.color","ast":{"kind":"unary","op":"not","operand":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"color"}},"dependencies":["swatch.color"]},"target":"class"},{"kind":"attribute","name":"--_swatch","expression":"swatch.color","expressionPlan":{"source":"swatch.color","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"color"},"dependencies":["swatch.color"]},"target":"style"}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"directive","name":"value","expression":"swatch.label","expressionPlan":{"source":"swatch.label","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"label"},"dependencies":["swatch.label"]}}],"children":[]}],"flow":{"kind":"each","item":"swatch","list":"swatches","listPlan":{"source":"swatches","ast":{"kind":"id","name":"swatches"},"dependencies":["swatches"]},"key":"swatch.action","keyPlan":{"source":"swatch.action","ast":{"kind":"member","object":{"kind":"id","name":"swatch"},"key":"action"},"dependencies":["swatch.action"]}}}]}],"flow":{"kind":"if","test":"swatches","testPlan":{"source":"swatches","ast":{"kind":"id","name":"swatches"},"dependencies":["swatches"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu-section divided"},{"kind":"literal","name":"role","value":"none"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu-heading"},{"kind":"literal","name":"role","value":"presentation"},{"kind":"directive","name":"value","expression":"section.heading","expressionPlan":{"source":"section.heading","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"heading"},"dependencies":["section.heading"]}}],"children":[]},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"role","value":"menuitem"},{"kind":"attribute","name":"danger","expression":"item.danger","expressionPlan":{"source":"item.danger","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"danger"},"dependencies":["item.danger"]},"target":"class"},{"kind":"attribute","name":"data-action","expression":"item.action","expressionPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}],"children":[{"kind":"element","name":"ui-icon","attributes":[{"kind":"attribute","name":"name","expression":"item.icon","expressionPlan":{"source":"item.icon","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"icon"},"dependencies":["item.icon"]}}],"children":[]},{"kind":"element","name":"span","attributes":[{"kind":"directive","name":"value","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}}],"children":[]}],"flow":{"kind":"each","item":"item","list":"section.items","listPlan":{"source":"section.items","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"items"},"dependencies":["section.items"]},"key":"item.action","keyPlan":{"source":"item.action","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"action"},"dependencies":["item.action"]}}}],"flow":{"kind":"each","item":"section","list":"sections","listPlan":{"source":"sections","ast":{"kind":"id","name":"sections"},"dependencies":["sections"]},"key":"section.heading","keyPlan":{"source":"section.heading","ast":{"kind":"member","object":{"kind":"id","name":"section"},"key":"heading"},"dependencies":["section.heading"]}}}],"flow":{"kind":"if","test":"overflowOpen","testPlan":{"source":"overflowOpen","ast":{"kind":"id","name":"overflowOpen"},"dependencies":["overflowOpen"]}}}],"flow":{"kind":"if","test":"hasOverflow","testPlan":{"source":"hasOverflow","ast":{"kind":"id","name":"hasOverflow"},"dependencies":["hasOverflow"]}}}]},"declarations":[{"kind":"state","name":"alignments","type":"list(object({ action: align-left | align-center | align-right, label: string, active: boolean }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"structure","type":"list(object({ action: add-row-after | add-column-after, label: string, icon: string }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"swatches","type":"list(object({ action: string, label: string, color: string, selected: boolean }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"sections","type":"list(object({ heading: string, items: list(object({ action: string, label: string, icon: string, danger: boolean })) }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"hasOverflow","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"overflowOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"action","type":"object({ 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 })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
|
|
7
7
|
|
|
8
8
|
export function createUiEditorTableToolbar(options = {}) {
|
|
9
9
|
const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
|
package/vue/UiCluster.vue
CHANGED
|
@@ -182,7 +182,7 @@ onBeforeUnmount(() => {
|
|
|
182
182
|
class="grid"
|
|
183
183
|
role="group"
|
|
184
184
|
aria-label="Table dimensions"
|
|
185
|
-
:style="{ '--
|
|
185
|
+
:style="{ '--_rows': rows, '--_cols': cols }"
|
|
186
186
|
>
|
|
187
187
|
<button
|
|
188
188
|
v-for="cell in cells"
|
|
@@ -220,8 +220,8 @@ onBeforeUnmount(() => {
|
|
|
220
220
|
|
|
221
221
|
.grid {
|
|
222
222
|
display: grid;
|
|
223
|
-
grid-template-columns: repeat(var(--
|
|
224
|
-
grid-template-rows: repeat(var(--
|
|
223
|
+
grid-template-columns: repeat(var(--_cols, 8), 1.25rem);
|
|
224
|
+
grid-template-rows: repeat(var(--_rows, 8), 1.25rem);
|
|
225
225
|
gap: 2px;
|
|
226
226
|
margin-bottom: var(--ui-space-2);
|
|
227
227
|
}
|
|
@@ -222,7 +222,7 @@ onBeforeUnmount(() => {
|
|
|
222
222
|
<span
|
|
223
223
|
class="swatch"
|
|
224
224
|
:class="{ default: !swatch.color }"
|
|
225
|
-
:style="{ '--
|
|
225
|
+
:style="{ '--_swatch': swatch.color }"
|
|
226
226
|
></span>
|
|
227
227
|
<span class="swatch-label">{{ swatch.label }}</span>
|
|
228
228
|
</button>
|
|
@@ -321,7 +321,7 @@ onBeforeUnmount(() => {
|
|
|
321
321
|
height: 1rem;
|
|
322
322
|
border-radius: 999px;
|
|
323
323
|
border: 1px solid var(--ui-border);
|
|
324
|
-
background: var(--
|
|
324
|
+
background: var(--_swatch, #fff);
|
|
325
325
|
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
|
|
326
326
|
flex-shrink: 0;
|
|
327
327
|
}
|
|
@@ -292,7 +292,7 @@ onBeforeUnmount(() => {
|
|
|
292
292
|
<span
|
|
293
293
|
class="swatch"
|
|
294
294
|
:class="{ default: !swatch.color }"
|
|
295
|
-
:style="{ '--
|
|
295
|
+
:style="{ '--_swatch': swatch.color }"
|
|
296
296
|
></span>
|
|
297
297
|
<span>{{ swatch.label }}</span>
|
|
298
298
|
</button>
|
|
@@ -495,7 +495,7 @@ onBeforeUnmount(() => {
|
|
|
495
495
|
flex: 0 0 14px;
|
|
496
496
|
border: 1px solid color-mix(in srgb, var(--ui-border) 80%, #000);
|
|
497
497
|
border-radius: 3px;
|
|
498
|
-
background: var(--
|
|
498
|
+
background: var(--_swatch);
|
|
499
499
|
}
|
|
500
500
|
|
|
501
501
|
.swatch.default {
|
package/vue/UiEditorToolbar.vue
CHANGED
|
@@ -45,9 +45,10 @@ const hostState = computed(() =>
|
|
|
45
45
|
padding: var(--ui-editor-toolbar-padding-block, 6px)
|
|
46
46
|
var(--ui-editor-toolbar-padding-inline, 12px);
|
|
47
47
|
min-height: var(--ui-editor-toolbar-min-height, 48px);
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
48
|
+
/* More controls than the column is wide is normal at a readable measure, so the row wraps.
|
|
49
|
+
Scrolling hid the tail behind an invisible scrollbar. */
|
|
50
|
+
flex-wrap: wrap;
|
|
51
|
+
row-gap: var(--ui-editor-toolbar-row-gap, var(--ui-editor-toolbar-gap, 2px));
|
|
51
52
|
background: var(--ui-editor-toolbar-surface, var(--ui-surface));
|
|
52
53
|
border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
|
|
53
54
|
}
|
|
@@ -69,6 +70,7 @@ const hostState = computed(() =>
|
|
|
69
70
|
}
|
|
70
71
|
|
|
71
72
|
[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"] {
|
|
73
|
+
flex-wrap: nowrap;
|
|
72
74
|
position: static;
|
|
73
75
|
top: auto;
|
|
74
76
|
width: max-content;
|
package/vue/UiStack.vue
CHANGED
|
@@ -32,7 +32,7 @@ const hostState = computed(() =>
|
|
|
32
32
|
display: flex;
|
|
33
33
|
flex-direction: column;
|
|
34
34
|
align-items: stretch;
|
|
35
|
-
gap: var(--ui-
|
|
35
|
+
gap: var(--ui-stack-gap, var(--_layout-gap));
|
|
36
36
|
min-inline-size: 0;
|
|
37
37
|
max-inline-size: 100%;
|
|
38
38
|
margin: 0;
|
package/vue/UiToastRegion.vue
CHANGED
|
@@ -264,13 +264,13 @@ defineExpose({
|
|
|
264
264
|
background: var(--ui-surface-elevated);
|
|
265
265
|
color: var(--ui-text-primary);
|
|
266
266
|
box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
|
|
267
|
-
animation: ui-toast-enter var(--ui-toast-enter-duration, 0.32s)
|
|
267
|
+
animation: ui-toast-enter var(--ui-toast-region-enter-duration, 0.32s)
|
|
268
268
|
var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
|
|
269
269
|
}
|
|
270
270
|
|
|
271
271
|
/* Leaving slides on down and fades; the controller removes the toast when this ends. */
|
|
272
272
|
.toast.closing {
|
|
273
|
-
animation: ui-toast-exit var(--ui-toast-exit-duration, 0.22s) var(--ui-motion-ease) both;
|
|
273
|
+
animation: ui-toast-exit var(--ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease) both;
|
|
274
274
|
pointer-events: none;
|
|
275
275
|
}
|
|
276
276
|
|
package/vue/chunks/UiCluster.js
CHANGED
|
@@ -19,6 +19,6 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
|
|
|
19
19
|
return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-cluster" }, _ctx.$attrs, { "data-ui-cluster-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
|
|
20
20
|
};
|
|
21
21
|
}
|
|
22
|
-
}), [["__scopeId", "data-v-
|
|
22
|
+
}), [["__scopeId", "data-v-6de2f2e4"]]);
|
|
23
23
|
//#endregion
|
|
24
24
|
export { UiCluster_default as t };
|
|
@@ -175,8 +175,8 @@ var UiEditorInsertTableGrid_default = /*#__PURE__*/ _plugin_vue_export_helper_de
|
|
|
175
175
|
role: "group",
|
|
176
176
|
"aria-label": "Table dimensions",
|
|
177
177
|
style: normalizeStyle({
|
|
178
|
-
"--
|
|
179
|
-
"--
|
|
178
|
+
"--_rows": rows.value,
|
|
179
|
+
"--_cols": cols.value
|
|
180
180
|
})
|
|
181
181
|
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(cells.value, (cell) => {
|
|
182
182
|
return openBlock(), createElementBlock("button", {
|
|
@@ -198,6 +198,6 @@ var UiEditorInsertTableGrid_default = /*#__PURE__*/ _plugin_vue_export_helper_de
|
|
|
198
198
|
], 16, _hoisted_1);
|
|
199
199
|
};
|
|
200
200
|
}
|
|
201
|
-
}), [["__scopeId", "data-v-
|
|
201
|
+
}), [["__scopeId", "data-v-00e6602a"]]);
|
|
202
202
|
//#endregion
|
|
203
203
|
export { UiEditorInsertTableGrid_default as t };
|
|
@@ -157,7 +157,7 @@ var UiEditorTableContextMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_d
|
|
|
157
157
|
"data-action": swatch.action
|
|
158
158
|
}, [createElementVNode("span", {
|
|
159
159
|
class: normalizeClass(["swatch", { default: !swatch.color }]),
|
|
160
|
-
style: normalizeStyle({ "--
|
|
160
|
+
style: normalizeStyle({ "--_swatch": swatch.color })
|
|
161
161
|
}, null, 6), createElementVNode("span", _hoisted_5, toDisplayString(swatch.label), 1)], 10, _hoisted_4);
|
|
162
162
|
}), 128))])])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(sections.value, (section) => {
|
|
163
163
|
return openBlock(), createElementBlock(Fragment, { key: section.heading }, [_cache[1] || (_cache[1] = createElementVNode("div", { class: "sep" }, null, -1)), createElementVNode("div", _hoisted_6, [createElementVNode("div", _hoisted_7, toDisplayString(section.heading), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(section.items, (item) => {
|
|
@@ -172,6 +172,6 @@ var UiEditorTableContextMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_d
|
|
|
172
172
|
}), 128))], 16, _hoisted_1);
|
|
173
173
|
};
|
|
174
174
|
}
|
|
175
|
-
}), [["__scopeId", "data-v-
|
|
175
|
+
}), [["__scopeId", "data-v-9cbdf038"]]);
|
|
176
176
|
//#endregion
|
|
177
177
|
export { UiEditorTableContextMenu_default as t };
|
|
@@ -250,7 +250,7 @@ var UiEditorTableToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
|
|
|
250
250
|
"data-action": swatch.action
|
|
251
251
|
}, [createElementVNode("span", {
|
|
252
252
|
class: normalizeClass(["swatch", { default: !swatch.color }]),
|
|
253
|
-
style: normalizeStyle({ "--
|
|
253
|
+
style: normalizeStyle({ "--_swatch": swatch.color })
|
|
254
254
|
}, null, 6), createElementVNode("span", null, toDisplayString(swatch.label), 1)], 10, _hoisted_14);
|
|
255
255
|
}), 128))])])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(sections.value, (section) => {
|
|
256
256
|
return openBlock(), createElementBlock("div", {
|
|
@@ -270,6 +270,6 @@ var UiEditorTableToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
|
|
|
270
270
|
], 16, _hoisted_1);
|
|
271
271
|
};
|
|
272
272
|
}
|
|
273
|
-
}), [["__scopeId", "data-v-
|
|
273
|
+
}), [["__scopeId", "data-v-1066cfb2"]]);
|
|
274
274
|
//#endregion
|
|
275
275
|
export { UiEditorTableToolbar_default as t };
|
|
@@ -23,6 +23,6 @@ var UiEditorToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
|
|
|
23
23
|
}, _ctx.$attrs, { "data-ui-editor-toolbar-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
|
|
24
24
|
};
|
|
25
25
|
}
|
|
26
|
-
}), [["__scopeId", "data-v-
|
|
26
|
+
}), [["__scopeId", "data-v-0da1a114"]]);
|
|
27
27
|
//#endregion
|
|
28
28
|
export { UiEditorToolbar_default as t };
|
package/vue/chunks/UiStack.js
CHANGED
|
@@ -24,6 +24,6 @@ var UiStack_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
|
|
|
24
24
|
return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-stack" }, _ctx.$attrs, { "data-ui-stack-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
|
|
25
25
|
};
|
|
26
26
|
}
|
|
27
|
-
}), [["__scopeId", "data-v-
|
|
27
|
+
}), [["__scopeId", "data-v-9a903e2b"]]);
|
|
28
28
|
//#endregion
|
|
29
29
|
export { UiStack_default as t };
|
|
@@ -188,6 +188,6 @@ var UiToastRegion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
|
|
|
188
188
|
}), 128))], 16);
|
|
189
189
|
};
|
|
190
190
|
}
|
|
191
|
-
}), [["__scopeId", "data-v-
|
|
191
|
+
}), [["__scopeId", "data-v-660faa24"]]);
|
|
192
192
|
//#endregion
|
|
193
193
|
export { UiToastRegion_default as t };
|