ooxml-ui 0.14.0 → 0.16.0
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/README.md +34 -32
- package/dist/button.d.ts +7 -4
- package/dist/{chunk-BDJW2KDI.js → chunk-4MT4OIAJ.js} +22 -0
- package/dist/{chunk-4WUYOQRL.js → chunk-A46H2JBV.js} +2 -2
- package/dist/{chunk-7CCQN3VM.js → chunk-F4TM7U4P.js} +1 -1
- package/dist/{chunk-EWNLGZPX.js → chunk-G2ZIAXOV.js} +573 -65
- package/dist/{chunk-3BHP4IFP.js → chunk-NDEB6EBU.js} +1 -1
- package/dist/{chunk-WNSUNQIY.js → chunk-VUXNXH4Q.js} +1 -1
- package/dist/{chunk-WKLVWPI7.js → chunk-VYF7LGXZ.js} +2 -2
- package/dist/context-menu.d.ts +15 -5
- package/dist/controls.d.ts +1 -0
- package/dist/controls.js +5 -5
- package/dist/icons.js +3 -3
- package/dist/index.js +11 -11
- package/dist/menu-model.d.ts +75 -0
- package/dist/presence.js +3 -3
- package/dist/ribbon.d.ts +10 -3
- package/dist/smartart.js +3 -3
- package/dist/theme.js +2 -2
- package/dist/tokens.d.ts +22 -0
- package/package.json +13 -7
package/README.md
CHANGED
|
@@ -52,44 +52,46 @@ document.body.append(button);
|
|
|
52
52
|
| `ooxml-ui/presence` | `<office-ui-presence>` avatar stack for collaboration awareness |
|
|
53
53
|
| `ooxml-ui/smartart` | `<office-ui-smartart>`: draws a core `DiagramDrawing` as SVG |
|
|
54
54
|
|
|
55
|
+
Every entry declares an `import` and a `default` export condition, so CommonJS consumers on Node 20.19+ or 22.12+ load it through `require(esm)`.
|
|
56
|
+
|
|
55
57
|
Importing an entry never touches the DOM (SSR-safe). Elements are defined by the `define*` /
|
|
56
58
|
`register*` functions, which are idempotent, no-ops without a `window`, and refuse to coexist
|
|
57
59
|
with an incompatible build of this package.
|
|
58
60
|
|
|
59
61
|
## Features: elements
|
|
60
62
|
|
|
61
|
-
| Tag | Attributes / properties
|
|
62
|
-
| ----------------------------------------------------- |
|
|
63
|
-
| `office-ui-button` | `label`, `icon`, `command`, `disabled`, `pressed`, `expanded`, `icon-only`, `variant="stacked"`, `keyshortcuts`
|
|
64
|
-
| `office-ui-checkbox`, `office-ui-switch` | `checked`, `disabled`, `value`, `aria-label`; form-associated
|
|
65
|
-
| `office-ui-select` | `<option>` / `<optgroup>` children (`data-display-label`, `data-description`, font previews) or the `options` property `[{ value, label, disabled? }]`; `value`, `selectedIndex`, `disabled`, `aria-label`, `variant="ribbon-font"
|
|
66
|
-
| `office-ui-ribbon-group` | `label`, `launcher` (dialog launcher command), `launcher-disabled`; default slot
|
|
67
|
-
| `office-ui-ribbon-stack` | `orientation="horizontal"`; default slot (three-row column of small commands by default)
|
|
68
|
-
| `office-ui-menu-button` / `-menu-item` | button: `label`, `icon`, `command` (split button), `variant`, `disabled`, `keyshortcuts`; item: `command`, `label`, `icon`, `disabled`, `checked`
|
|
69
|
-
| `office-ui-toolbar` | `aria-label`, `aria-orientation`; arrow-key focus movement
|
|
70
|
-
| `office-ui-dialog` | `open`, `heading`, `dismissible="false"`, `show()`, `close()`; slots default, `footer`
|
|
71
|
-
| `office-ui-status-bar` / `-status-item` | `label`, `value`, `interactive`, `id`
|
|
72
|
-
| `office-ui-zoom-slider` | `value` (percent), `min`, `max`, `step`, `disabled`, `fit` (fit button name), `label`
|
|
73
|
-
| `office-ui-tab-strip` | `tabs` `[{ id, label, title? }]`, `selected`, `label`, `previous-label`, `next-label`, `add-label`, `add-disabled`, `add-title`, `disabled`
|
|
74
|
-
| `office-ui-context-menu` / `office-ui-menu-separator` | `label
|
|
75
|
-
| `office-ui-command-search` | `commands` `[{ id, label, keywords?, description?, disabled?, title? }]`, `placeholder`, `label`, `limit` (Office's "Tell me what you want to do")
|
|
76
|
-
| `office-ui-options-dialog` | `categories` `[{ id, label, description?, disabled?, sections: [{ id, title, controls }] }]` (controls: `toggle`, `select`, `number`, `text`, each optionally `disabled` with a reason), `values`, `category`, `open`, `heading`, `show()`, `close()`
|
|
77
|
-
| `office-ui-account` | `profile` `{ displayName, avatarColor, initial? }`; slots `sign-in` and default (product sections)
|
|
78
|
-
| `office-ui-ribbon` | Tab row over tab panels. Panels are children with `data-ribbon-tab`, `data-label`, optional `data-tab-keytip`; slots `quick-access`, `search`, `end`; `selected`, `label`, `file-label`, `no-file`, `file-expanded`, `file-keytip`; `focusFile()`, `focusTab()`
|
|
79
|
-
| `office-ui-backstage` | `items` `[{ id, label, group?: 'footer', disabled?, title? }]`, `open`, `selected`, `label`, `back-label`, `show(page?)`, `close()`; pages are children with `data-backstage-page`
|
|
80
|
-
| `office-ui-find-bar` | `open`, `label`, `input-label`, `placeholder`, `maxlength`, `disabled`, `navigation-disabled`, `previous-label`, `next-label`, `close-label`; `value`, `status`, `statusTitle`, `show()`, `close()`
|
|
81
|
-
| `office-ui-ruler` | `orientation="vertical"`, `origin` (px offset of zero), `scale` (px per unit, default 96), `direction="reverse"`; decorative
|
|
82
|
-
| `office-ui-print-preview` | `pages` (rendered nodes; an inert clone of the current one is shown), `index`, `label`, `empty-label`
|
|
83
|
-
| `office-ui-radio` | `checked`, `disabled`, `value`, `name`; radios of one tag sharing a `name` form a roving-focus group; form-associated
|
|
84
|
-
| `office-ui-search` | `value`, `placeholder`, `disabled`, `aria-label`, `variant="titlebar"`; `focus()`, `select()`
|
|
85
|
-
| `office-ui-ribbon-toggle` | `label`, `checked`, `disabled`, `title`, `command` (a labelled ribbon checkbox row)
|
|
86
|
-
| `office-ui-dialog-footer` | `state` `{ actions: [{ id, label, variant?, icon?, disabled?, busy?, title?, align?, testId? }] }`, `focusAction(id)`
|
|
87
|
-
| `office-ui-toasts` | `state` `{ toasts: [{ id, code?, severity, message }], overflowCount?, labels? }`; hidden when empty, host positions it
|
|
88
|
-
| `office-ui-read-only-banner` | `state` `{ kind, message, passwordPromptOpen?, passwordError?, checkingPassword?, labels? }`
|
|
89
|
-
| `office-ui-paste-options` | `state` `{ left, top, options: [{ id, label }], label? }`; fixed 4px past the pasted object
|
|
90
|
-
| `office-ui-presence` | `participants`, `max`, `label`
|
|
91
|
-
| `office-ui-smartart` | `drawing` (core `DiagramDrawing`), `schemeColors`, `label`
|
|
92
|
-
| `office-ui-icon` | `name`, `label`
|
|
63
|
+
| Tag | Attributes / properties | Events (all bubble, composed) |
|
|
64
|
+
| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
65
|
+
| `office-ui-button` | `label`, `icon`, `command`, `disabled`, `pressed`, `expanded`, `icon-only`, `variant="stacked"`, `keyshortcuts` | `office-command` `{ command }` |
|
|
66
|
+
| `office-ui-checkbox`, `office-ui-switch` | `checked`, `disabled`, `value`, `aria-label`; form-associated | `input`, `change` |
|
|
67
|
+
| `office-ui-select` | `<option>` / `<optgroup>` children (`data-display-label`, `data-description`, font previews) or the `options` property `[{ value, label, disabled? }]`; `value`, `selectedIndex`, `disabled`, `aria-label`, `variant="ribbon-font" | "ribbon-icon"`, `data-font-picker`; `icon`and`custom` slots; arrows, Home, End, PageUp/PageDown, typeahead | `input`, `change` |
|
|
68
|
+
| `office-ui-ribbon-group` | `label`, `launcher` (dialog launcher command), `launcher-disabled`; default slot | launcher: `office-command` `{ command }` |
|
|
69
|
+
| `office-ui-ribbon-stack` | `orientation="horizontal"`; default slot (three-row column of small commands by default) | none |
|
|
70
|
+
| `office-ui-menu-button` / `-menu-item` | button: `label`, `icon`, `command` (split button), `variant`, `disabled`, `keyshortcuts`; item: `command`, `label`, `icon`, `disabled`, `checked` | item choice: `office-command` `{ command }` |
|
|
71
|
+
| `office-ui-toolbar` | `aria-label`, `aria-orientation`; arrow-key focus movement | none |
|
|
72
|
+
| `office-ui-dialog` | `open`, `heading`, `dismissible="false"`, `show()`, `close()`; slots default, `footer` | `office-dialog-close` `{ reason }` (cancelable) |
|
|
73
|
+
| `office-ui-status-bar` / `-status-item` | `label`, `value`, `interactive`, `id` | `office-status-activate` `{ id }` |
|
|
74
|
+
| `office-ui-zoom-slider` | `value` (percent), `min`, `max`, `step`, `disabled`, `fit` (fit button name), `label` | `input`, `change`; fit: `office-command` `{ command: 'zoom-fit' }` |
|
|
75
|
+
| `office-ui-tab-strip` | `tabs` `[{ id, label, title? }]`, `selected`, `label`, `previous-label`, `next-label`, `add-label`, `add-disabled`, `add-title`, `disabled` | `office-tab-select` `{ id }` (cancelable); add: `office-command` `{ command: 'tab-add' }` |
|
|
76
|
+
| `office-ui-context-menu` / `office-ui-menu-separator` | Children mode: `label`, `openAt(x, y)`, `close()`, `open` over `office-ui-menu-item` and separator children. Controlled mode: `state` `{ x, y, label, items: [{ id, label, separatorBefore?, heading?, danger?, disabled?, checked?, icon? }], markers?, zIndex?, autoFocus? }`; arrows, Home, End and type-ahead in both | children: item `office-command` `{ command }`; controlled: `office-menu-request` `{ id }`, `office-menu-close` `{ reason }` (never closes itself) |
|
|
77
|
+
| `office-ui-command-search` | `commands` `[{ id, label, keywords?, description?, disabled?, title? }]`, `placeholder`, `label`, `limit` (Office's "Tell me what you want to do") | choice: `office-command` `{ command }` |
|
|
78
|
+
| `office-ui-options-dialog` | `categories` `[{ id, label, description?, disabled?, sections: [{ id, title, controls }] }]` (controls: `toggle`, `select`, `number`, `text`, each optionally `disabled` with a reason), `values`, `category`, `open`, `heading`, `show()`, `close()` | OK: `office-options-change` `{ values, changed }` |
|
|
79
|
+
| `office-ui-account` | `profile` `{ displayName, avatarColor, initial? }`; slots `sign-in` and default (product sections) | `office-profile-change` `{ profile }` |
|
|
80
|
+
| `office-ui-ribbon` | Tab row over tab panels. Panels are children with `data-ribbon-tab`, `data-label`, optional `data-tab-keytip`; slots `quick-access`, `search`, `end`; `selected`, `label`, `file-label`, `no-file`, `file-expanded`, `file-keytip`; `focusFile()`, `focusTab()` | `office-ribbon-select` `{ tab }` (cancelable), `office-ribbon-file` |
|
|
81
|
+
| `office-ui-backstage` | `items` `[{ id, label, group?: 'footer', disabled?, title? }]`, `open`, `selected`, `label`, `back-label`, `show(page?)`, `close()`; pages are children with `data-backstage-page` | `office-backstage-select` `{ id }` (cancelable), `office-backstage-close` `{ reason }` (cancelable) |
|
|
82
|
+
| `office-ui-find-bar` | `open`, `label`, `input-label`, `placeholder`, `maxlength`, `disabled`, `navigation-disabled`, `previous-label`, `next-label`, `close-label`; `value`, `status`, `statusTitle`, `show()`, `close()` | `office-find-input` `{ query }`, `office-find-step` `{ direction }`, `office-find-close` |
|
|
83
|
+
| `office-ui-ruler` | `orientation="vertical"`, `origin` (px offset of zero), `scale` (px per unit, default 96), `direction="reverse"`; decorative | none |
|
|
84
|
+
| `office-ui-print-preview` | `pages` (rendered nodes; an inert clone of the current one is shown), `index`, `label`, `empty-label` | `office-print-preview-page` `{ index }` |
|
|
85
|
+
| `office-ui-radio` | `checked`, `disabled`, `value`, `name`; radios of one tag sharing a `name` form a roving-focus group; form-associated | `input`, `change` |
|
|
86
|
+
| `office-ui-search` | `value`, `placeholder`, `disabled`, `aria-label`, `variant="titlebar"`; `focus()`, `select()` | `input`, `change` |
|
|
87
|
+
| `office-ui-ribbon-toggle` | `label`, `checked`, `disabled`, `title`, `command` (a labelled ribbon checkbox row; static `checkboxTag` picks the inner checkbox) | `office-toggle` `{ command, checked }` |
|
|
88
|
+
| `office-ui-dialog-footer` | `state` `{ actions: [{ id, label, variant?, icon?, disabled?, busy?, title?, align?, testId? }] }`, `focusAction(id)` | `office-dialog-footer-request` `{ id }` |
|
|
89
|
+
| `office-ui-toasts` | `state` `{ toasts: [{ id, code?, severity, message }], overflowCount?, labels? }`; hidden when empty, host positions it | `office-toasts-request` `{ id: 'dismiss', toastId }` or `{ id: 'dismissAll' }` |
|
|
90
|
+
| `office-ui-read-only-banner` | `state` `{ kind, message, passwordPromptOpen?, passwordError?, checkingPassword?, labels? }` | `office-read-only-request` (Edit anyway, Dismiss, password submit or cancel) |
|
|
91
|
+
| `office-ui-paste-options` | `state` `{ left, top, options: [{ id, label }], label? }`; fixed 4px past the pasted object | `office-paste-options-request` `{ format }`, `office-paste-options-dismiss` |
|
|
92
|
+
| `office-ui-presence` | `participants`, `max`, `label` | `office-presence-select` `{ id }` |
|
|
93
|
+
| `office-ui-smartart` | `drawing` (core `DiagramDrawing`), `schemeColors`, `label` | `office-smartart-render` (render report) |
|
|
94
|
+
| `office-ui-icon` | `name`, `label` | none |
|
|
93
95
|
|
|
94
96
|
The local profile behind `office-ui-account` is stored on the device only, under one suite-wide
|
|
95
97
|
key (`readOfficeProfile`, `writeOfficeProfile`, `clearOfficeProfile`), so every Office viewer on
|
package/dist/button.d.ts
CHANGED
|
@@ -3,9 +3,12 @@ export type OfficeCommandEvent = CustomEvent<{
|
|
|
3
3
|
}>;
|
|
4
4
|
/**
|
|
5
5
|
* Command button. Attributes: `label`, `icon`, `command`, `disabled`, `pressed` (aria-pressed),
|
|
6
|
-
* `expanded` (aria-expanded), `icon-only`, `variant="stacked"`, `
|
|
7
|
-
* (
|
|
8
|
-
*
|
|
9
|
-
*
|
|
6
|
+
* `expanded` (aria-expanded), `icon-only`, `variant="stacked"`, `size="large|small"` (ribbon
|
|
7
|
+
* large and small commands), `tall` (with `icon-only`: a tool tile), `active`, `badge`, `caret`
|
|
8
|
+
* (a trailing menu chevron), `title`, `keyshortcuts` (forwarded as aria-keyshortcuts).
|
|
9
|
+
* Activation (pointer, Enter, Space) emits one bubbling, composed `office-command` `{ command }`;
|
|
10
|
+
* Enter and Space never reach the host's own key handlers. Nothing happens when disabled.
|
|
11
|
+
* Static `requestEvent`, `idAttribute` and `detailKey`, and the `iconName()` and `showsCaret()`
|
|
12
|
+
* methods, let a product subclass keep its published contract and glyph set.
|
|
10
13
|
*/
|
|
11
14
|
export declare const defineButton: import("./registry.js").Definer;
|
|
@@ -128,6 +128,28 @@ var OFFICE_TOKENS = {
|
|
|
128
128
|
"--office-ribbon-tab-height": "35px",
|
|
129
129
|
"--office-ribbon-group-gap": "2px",
|
|
130
130
|
"--office-ribbon-group-height": "78px",
|
|
131
|
+
"--office-ribbon-group-padding": "4px 8px 2px",
|
|
132
|
+
"--office-ribbon-separator-inset": "0px",
|
|
133
|
+
"--office-ribbon-separator": "color-mix(in srgb, var(--office-border, #d1d5db) 60%, transparent)",
|
|
134
|
+
"--office-ribbon-caption-size": "10px",
|
|
135
|
+
"--office-ribbon-caption-padding": "2px 0 0",
|
|
136
|
+
"--office-launcher-inset-end": "-6px",
|
|
137
|
+
"--office-launcher-inset-bottom": "-1px",
|
|
138
|
+
"--office-ribbon-compact-row-max": "36px",
|
|
139
|
+
"--office-ribbon-stack-max-height": "80px",
|
|
140
|
+
"--office-ribbon-collapse-x": "8px",
|
|
141
|
+
"--office-ribbon-collapse-y": "120px",
|
|
142
|
+
"--office-command-icon-color": "currentColor",
|
|
143
|
+
"--office-command-large-height": "66px",
|
|
144
|
+
"--office-command-large-min-width": "48px",
|
|
145
|
+
"--office-command-large-max-width": "80px",
|
|
146
|
+
"--office-command-large-icon": "32px",
|
|
147
|
+
"--office-command-small-icon": "16px",
|
|
148
|
+
"--office-command-tall-height": "62px",
|
|
149
|
+
"--office-command-tall-min-width": "40px",
|
|
150
|
+
"--office-command-tall-icon": "30px",
|
|
151
|
+
"--office-command-active": "color-mix(in srgb, var(--office-accent, #2563eb) 15%, transparent)",
|
|
152
|
+
"--office-collapsed-group-min-width": "56px",
|
|
131
153
|
"--office-ribbon-caption-line-height": "12px",
|
|
132
154
|
"--office-ribbon-row-height": "22px",
|
|
133
155
|
"--office-ribbon-file-min-width": "52px",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { definer, attachStyles, controlCss, emit } from './chunk-
|
|
2
|
-
import { tok } from './chunk-
|
|
1
|
+
import { definer, attachStyles, controlCss, emit } from './chunk-NDEB6EBU.js';
|
|
2
|
+
import { tok } from './chunk-4MT4OIAJ.js';
|
|
3
3
|
import { normalizeHexColor } from 'ooxml-core/color';
|
|
4
4
|
|
|
5
5
|
var SVG_NS = "http://www.w3.org/2000/svg";
|