ooxml-ui 0.10.2 → 0.12.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 -25
- package/dist/chrome-controls.d.ts +52 -0
- package/dist/{chunk-X5C3BTJS.js → chunk-BN3UBHTC.js} +937 -50
- package/dist/{chunk-PCSUQPMC.js → chunk-YZ2JQNHX.js} +5 -1
- package/dist/controls.d.ts +9 -2
- package/dist/controls.js +2 -2
- package/dist/document-notices.d.ts +55 -0
- package/dist/icons.js +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +10 -3
- package/dist/radio.d.ts +1 -0
- package/dist/ribbon-toggle.d.ts +1 -0
- package/dist/search-field.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -58,31 +58,38 @@ with an incompatible build of this package.
|
|
|
58
58
|
|
|
59
59
|
## Features: elements
|
|
60
60
|
|
|
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` | `options` `[{ value, label, disabled? }]`, `value`, `selectedIndex`, `disabled`
|
|
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`; `openAt(x, y)`, `close()`, `open`; `office-ui-menu-item` and separator children
|
|
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`
|
|
79
|
-
| `office-ui-backstage`
|
|
80
|
-
| `office-ui-find-bar`
|
|
81
|
-
| `office-ui-ruler`
|
|
82
|
-
| `office-ui-print-preview`
|
|
83
|
-
| `office-ui-
|
|
84
|
-
| `office-ui-
|
|
85
|
-
| `office-ui-
|
|
61
|
+
| Tag | Attributes / properties | Events (all bubble, composed) |
|
|
62
|
+
| ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
|
|
63
|
+
| `office-ui-button` | `label`, `icon`, `command`, `disabled`, `pressed`, `expanded`, `icon-only`, `variant="stacked"`, `keyshortcuts` | `office-command` `{ command }` |
|
|
64
|
+
| `office-ui-checkbox`, `office-ui-switch` | `checked`, `disabled`, `value`, `aria-label`; form-associated | `input`, `change` |
|
|
65
|
+
| `office-ui-select` | `options` `[{ value, label, disabled? }]`, `value`, `selectedIndex`, `disabled` | `input`, `change` |
|
|
66
|
+
| `office-ui-ribbon-group` | `label`, `launcher` (dialog launcher command), `launcher-disabled`; default slot | launcher: `office-command` `{ command }` |
|
|
67
|
+
| `office-ui-ribbon-stack` | `orientation="horizontal"`; default slot (three-row column of small commands by default) | none |
|
|
68
|
+
| `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 }` |
|
|
69
|
+
| `office-ui-toolbar` | `aria-label`, `aria-orientation`; arrow-key focus movement | none |
|
|
70
|
+
| `office-ui-dialog` | `open`, `heading`, `dismissible="false"`, `show()`, `close()`; slots default, `footer` | `office-dialog-close` `{ reason }` (cancelable) |
|
|
71
|
+
| `office-ui-status-bar` / `-status-item` | `label`, `value`, `interactive`, `id` | `office-status-activate` `{ id }` |
|
|
72
|
+
| `office-ui-zoom-slider` | `value` (percent), `min`, `max`, `step`, `disabled`, `fit` (fit button name), `label` | `input`, `change`; fit: `office-command` `{ command: 'zoom-fit' }` |
|
|
73
|
+
| `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' }` |
|
|
74
|
+
| `office-ui-context-menu` / `office-ui-menu-separator` | `label`; `openAt(x, y)`, `close()`, `open`; `office-ui-menu-item` and separator children | item choice: `office-command` `{ command }` |
|
|
75
|
+
| `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 }` |
|
|
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()` | OK: `office-options-change` `{ values, changed }` |
|
|
77
|
+
| `office-ui-account` | `profile` `{ displayName, avatarColor, initial? }`; slots `sign-in` and default (product sections) | `office-profile-change` `{ profile }` |
|
|
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()` | `office-ribbon-select` `{ tab }` (cancelable), `office-ribbon-file` |
|
|
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` | `office-backstage-select` `{ id }` (cancelable), `office-backstage-close` `{ reason }` (cancelable) |
|
|
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()` | `office-find-input` `{ query }`, `office-find-step` `{ direction }`, `office-find-close` |
|
|
81
|
+
| `office-ui-ruler` | `orientation="vertical"`, `origin` (px offset of zero), `scale` (px per unit, default 96), `direction="reverse"`; decorative | none |
|
|
82
|
+
| `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 }` |
|
|
83
|
+
| `office-ui-radio` | `checked`, `disabled`, `value`, `name`; radios of one tag sharing a `name` form a roving-focus group; form-associated | `input`, `change` |
|
|
84
|
+
| `office-ui-search` | `value`, `placeholder`, `disabled`, `aria-label`, `variant="titlebar"`; `focus()`, `select()` | `input`, `change` |
|
|
85
|
+
| `office-ui-ribbon-toggle` | `label`, `checked`, `disabled`, `title`, `command` (a labelled ribbon checkbox row) | `office-toggle` `{ command, checked }` |
|
|
86
|
+
| `office-ui-dialog-footer` | `state` `{ actions: [{ id, label, variant?, icon?, disabled?, busy?, title?, align?, testId? }] }`, `focusAction(id)` | `office-dialog-footer-request` `{ id }` |
|
|
87
|
+
| `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' }` |
|
|
88
|
+
| `office-ui-read-only-banner` | `state` `{ kind, message, passwordPromptOpen?, passwordError?, checkingPassword?, labels? }` | `office-read-only-request` (Edit anyway, Dismiss, password submit or cancel) |
|
|
89
|
+
| `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` |
|
|
90
|
+
| `office-ui-presence` | `participants`, `max`, `label` | `office-presence-select` `{ id }` |
|
|
91
|
+
| `office-ui-smartart` | `drawing` (core `DiagramDrawing`), `schemeColors`, `label` | `office-smartart-render` (render report) |
|
|
92
|
+
| `office-ui-icon` | `name`, `label` | none |
|
|
86
93
|
|
|
87
94
|
The local profile behind `office-ui-account` is stored on the device only, under one suite-wide
|
|
88
95
|
key (`readOfficeProfile`, `writeOfficeProfile`, `clearOfficeProfile`), so every Office viewer on
|
|
@@ -93,6 +100,8 @@ root: press and release Alt to show badges on controls marked `data-keytip="H"`,
|
|
|
93
100
|
activate it (controls inside open shadow roots of shared elements, such as ribbon tabs, are included), and use `data-keytip-panel` / `data-keytip-level` for a tab's second level. Escape
|
|
94
101
|
steps back; disabled controls are dimmed and never run.
|
|
95
102
|
|
|
103
|
+
Elements with intent events read their event name and test-id prefix from static class fields (`requestEvent`, `testIdPrefix`), so a product can register a subclass under its own tag that keeps its published contract.
|
|
104
|
+
|
|
96
105
|
Setting a property never emits an event; only user activation does. Controls honour
|
|
97
106
|
`prefers-color-scheme`, `forced-colors: active` (system colours and a visible focus ring) and
|
|
98
107
|
coarse pointers (44px targets through `--office-target-size`). Tokens are the `--office-*`
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
export type OfficeDialogFooterVariant = 'secondary' | 'primary' | 'warning' | 'danger';
|
|
2
|
+
export interface OfficeDialogFooterAction {
|
|
3
|
+
/** Stable id echoed back in the request event. */
|
|
4
|
+
id: string;
|
|
5
|
+
/** Translated label and accessible name. */
|
|
6
|
+
label: string;
|
|
7
|
+
variant?: OfficeDialogFooterVariant;
|
|
8
|
+
/** A registered icon name (for example `trash`, `pencil`, `restore`, `print`, `check`). */
|
|
9
|
+
icon?: string;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
/** Work in flight: disabled, `aria-busy` and a spinner. */
|
|
12
|
+
busy?: boolean;
|
|
13
|
+
title?: string;
|
|
14
|
+
/** `start` pins a tertiary action (Remove link, Reset all) to the left edge. */
|
|
15
|
+
align?: 'start' | 'end';
|
|
16
|
+
testId?: string;
|
|
17
|
+
}
|
|
18
|
+
export interface OfficeDialogFooterState {
|
|
19
|
+
actions: readonly OfficeDialogFooterAction[];
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* `<office-ui-dialog-footer>`: a dialog's action row (Cancel, OK, Apply...). Not a dialog shell.
|
|
23
|
+
* Set `state`; each button emits `office-dialog-footer-request` `{ id }`. Buttons are keyed by
|
|
24
|
+
* action id and patched in place, so focus survives state changes. `focusAction(id)`.
|
|
25
|
+
*/
|
|
26
|
+
export declare const defineDialogFooter: import("./registry.js").Definer;
|
|
27
|
+
/** Toasts rendered before the rest collapse into a "+N" count. */
|
|
28
|
+
export declare const OFFICE_TOAST_VISIBLE_LIMIT = 5;
|
|
29
|
+
export interface OfficeToast {
|
|
30
|
+
readonly id: string;
|
|
31
|
+
/** Machine-readable code, mirrored to `data-code`. */
|
|
32
|
+
readonly code?: string;
|
|
33
|
+
readonly severity: 'info' | 'warning';
|
|
34
|
+
/** Translated message. */
|
|
35
|
+
readonly message: string;
|
|
36
|
+
}
|
|
37
|
+
export interface OfficeToastsState {
|
|
38
|
+
toasts: readonly OfficeToast[];
|
|
39
|
+
/** Extra toasts a host already trimmed off the list it passes. */
|
|
40
|
+
overflowCount?: number;
|
|
41
|
+
labels?: {
|
|
42
|
+
title?: string;
|
|
43
|
+
dismissAll?: string;
|
|
44
|
+
dismiss?: string;
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* `<office-ui-toasts>`: a stack of load or compatibility notices. Toasts never auto-hide;
|
|
49
|
+
* dismissal is the host's decision through `office-toasts-request` `{ id: 'dismissAll' }` or
|
|
50
|
+
* `{ id: 'dismiss', toastId }`. The host positions the element. Hidden when empty.
|
|
51
|
+
*/
|
|
52
|
+
export declare const defineToasts: import("./registry.js").Definer;
|