@outbook/webcomponents-modal-dialog 1.1.0 → 1.1.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/README.md
CHANGED
|
@@ -35,9 +35,7 @@ function openExampleModal(ev) {
|
|
|
35
35
|
|
|
36
36
|
function render() {
|
|
37
37
|
return html`
|
|
38
|
-
<button id="open-modal" @click="${openExampleModal}">
|
|
39
|
-
Open modal
|
|
40
|
-
</button>
|
|
38
|
+
<button id="open-modal" @click="${openExampleModal}">Open modal</button>
|
|
41
39
|
`;
|
|
42
40
|
}
|
|
43
41
|
```
|
|
@@ -57,9 +55,7 @@ function openMessageModal(ev) {
|
|
|
57
55
|
origin: ev.currentTarget.id,
|
|
58
56
|
title: 'Confirm action',
|
|
59
57
|
type: 'message',
|
|
60
|
-
view: () => html`
|
|
61
|
-
<p>Do you want to save your changes?</p>
|
|
62
|
-
`,
|
|
58
|
+
view: () => html` <p>Do you want to save your changes?</p> `,
|
|
63
59
|
actions: [
|
|
64
60
|
{
|
|
65
61
|
text: 'Save',
|
|
@@ -82,28 +78,28 @@ function openMessageModal(ev) {
|
|
|
82
78
|
|
|
83
79
|
Creates and renders an `outbook-modal-dialog`.
|
|
84
80
|
|
|
85
|
-
| Property
|
|
86
|
-
|
|
87
|
-
| `origin`
|
|
88
|
-
| `title`
|
|
89
|
-
| `type`
|
|
90
|
-
| `view`
|
|
91
|
-
| `tabs`
|
|
92
|
-
| `hasScroll`
|
|
93
|
-
| `actions`
|
|
94
|
-
| `portalWrapperId` | `String`
|
|
95
|
-
| `content`
|
|
81
|
+
| Property | Type | Default | Description |
|
|
82
|
+
| ----------------- | ---------- | ----------- | -------------------------------------------------------------------------------------------------------- |
|
|
83
|
+
| `origin` | `String` | `undefined` | Id of the element that opened the dialog. Focus is returned to this element when the dialog closes. |
|
|
84
|
+
| `title` | `String` | `undefined` | Dialog title shown in the header. |
|
|
85
|
+
| `type` | `String` | `'content'` | Dialog layout. Supported values are `'content'` and `'message'`. |
|
|
86
|
+
| `view` | `Function` | `null` | Function that returns the dialog body. Receives `{ closeDialog }`. |
|
|
87
|
+
| `tabs` | `Array` | `[]` | Tab configuration passed to `@outbook/webcomponents-tabs`. If present, it is rendered instead of `view`. |
|
|
88
|
+
| `hasScroll` | `Boolean` | `true` | Enables scrolling for `content` dialogs. Ignored for `message` dialogs and for dialogs with tabs. |
|
|
89
|
+
| `actions` | `Array` | `[]` | Footer button configuration. |
|
|
90
|
+
| `portalWrapperId` | `String` | `null` | Optional container element id for rendering the dialog portal. Defaults to `document.body`. |
|
|
91
|
+
| `content` | `Function` | `undefined` | Optional fallback slot content renderer used internally by the component. |
|
|
96
92
|
|
|
97
93
|
### `actions`
|
|
98
94
|
|
|
99
95
|
Each action item supports the following properties:
|
|
100
96
|
|
|
101
|
-
| Property
|
|
102
|
-
|
|
103
|
-
| `text`
|
|
104
|
-
| `type`
|
|
105
|
-
| `handler` | `String`
|
|
106
|
-
| `eventFn` | `Function` | `() => {}`
|
|
97
|
+
| Property | Type | Default | Description |
|
|
98
|
+
| --------- | ---------- | ----------- | --------------------------------------------------------------------------------- |
|
|
99
|
+
| `text` | `String` | `undefined` | Button label. |
|
|
100
|
+
| `type` | `String` | `'neutral'` | Visual variant. Supported values are `'neutral'`, `'positive'`, and `'negative'`. |
|
|
101
|
+
| `handler` | `String` | `undefined` | Name of an internal dialog handler. Currently `close` is supported. |
|
|
102
|
+
| `eventFn` | `Function` | `() => {}` | Handler for the button `button-interaction` event when no `handler` is defined. |
|
|
107
103
|
|
|
108
104
|
Action handler resolution order:
|
|
109
105
|
|
|
@@ -125,15 +121,15 @@ The component uses Shadow DOM and exposes styling hooks through CSS custom prope
|
|
|
125
121
|
|
|
126
122
|
### Custom Properties
|
|
127
123
|
|
|
128
|
-
| Custom Property
|
|
129
|
-
|
|
130
|
-
| `--outbook-modal-dialog--veil-color`
|
|
131
|
-
| `--outbook-modal-dialog--neutral-background`
|
|
132
|
-
| `--outbook-modal-dialog--neutral-background-hover`
|
|
133
|
-
| `--outbook-modal-dialog--positive-background`
|
|
134
|
-
| `--outbook-modal-dialog--positive-background-hover` | Hover background color for positive action buttons.
|
|
135
|
-
| `--outbook-modal-dialog--negative-background`
|
|
136
|
-
| `--outbook-modal-dialog--negative-background-hover` | Hover background color for negative action buttons.
|
|
124
|
+
| Custom Property | Description |
|
|
125
|
+
| --------------------------------------------------- | -------------------------------------------------------- |
|
|
126
|
+
| `--outbook-modal-dialog--veil-color` | Veil color behind the dialog. Used by `message` dialogs. |
|
|
127
|
+
| `--outbook-modal-dialog--neutral-background` | Background color for neutral action buttons. |
|
|
128
|
+
| `--outbook-modal-dialog--neutral-background-hover` | Hover background color for neutral action buttons. |
|
|
129
|
+
| `--outbook-modal-dialog--positive-background` | Background color for positive action buttons. |
|
|
130
|
+
| `--outbook-modal-dialog--positive-background-hover` | Hover background color for positive action buttons. |
|
|
131
|
+
| `--outbook-modal-dialog--negative-background` | Background color for negative action buttons. |
|
|
132
|
+
| `--outbook-modal-dialog--negative-background-hover` | Hover background color for negative action buttons. |
|
|
137
133
|
|
|
138
134
|
The dialog also forwards `--outbook-scrollable--indicator-max-width` internally for the scrollable content area.
|
|
139
135
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/* eslint-disable */
|
|
2
2
|
import { css } from 'lit';
|
|
3
3
|
|
|
4
|
-
export default css`:host{display:block;color-scheme:inherit;container-name:modalDialog;container-type:inline-size;--outbook-scrollable--indicator-max-width: 60rem;--_container-max-width: 60rem;--_height: 100dvh;--_button-close-text-display: none;--_main-text-color: light-dark( oklch(20.5% 0 0deg), oklch(98.5% 0 0deg) );--_main-background-color: light-dark( oklch(100% 0 0deg), oklch(14.5% 0 0deg) );--_header-background-color: light-dark( oklch(92.2% 0 0deg), oklch(43.9% 0 0deg) )}:host .dialog--in-element{--_height: 100%}*{box-sizing:border-box}@container modalDialog (min-width: 540px){.dialog{--_button-close-text-display: inline-block}}.dialog{position:fixed;width:100%;height:var(--_height);top:0;left:0;display:flex;justify-content:center;align-items:center;background-color:var(--background-color);color:var(--_main-text-color);z-index:2;transition:background-color 0.3s,color 0.3s}.dialog__close-button{display:flex;align-items:center;cursor:pointer}.dialog__close-button-icon{width:1.5rem;height:1.5rem}.dialog__close-button-text{display:var(--_button-close-text-display);font-size:1rem;line-height:1.5rem;margin-left:0.25rem}.dialog__inner{background-color:var(--_main-background-color);height:100%;position:relative;display:flex;flex-direction:column;width:100%}.dialog__header{display:flex;flex-direction:column;align-items:center;width:100%}.dialog__header>*{width:100%;max-width:var(--_container-max-width, 87.5rem)}.dialog__header{margin-bottom:0.5rem;background-color:var(--_header-background-color);padding:0.75rem 0.5rem}.dialog__header-inner{display:flex;justify-content:space-between;align-items:center;padding:0 0.5rem;height:1.5rem}.dialog__title{font-size:1.375rem;font-weight:normal;line-height:1.5rem}.dialog--scroll .dialog__content-wrapper{display:flex;flex-direction:column;align-items:center;width:100%}.dialog--scroll .dialog__content-wrapper>*{width:100%;max-width:var(--_container-max-width, 87.5rem)}.dialog__content-scroll{flex:1 0 0;overflow-y:auto;padding:0 0.5rem 1rem 0.5rem}.dialog__content{padding:0.5rem 0.5rem 0 1rem}.dialog--no-scroll .dialog__content,.dialog--no-scroll .dialog__content slot{max-height:calc(100dvh - 3.5rem);overflow:hidden;display:block}.dialog__footer{padding:0 0.5rem 1rem 0.5rem;display:flex;justify-content:center}.dialog__footer-actions{list-style:none;display:flex;padding:0;margin:0;width:100%;max-width:var(--_container-max-width)}.dialog__action{padding:0;margin-left:1rem;--outbook-button-default--background-color: var( --outbook-modal-dialog--neutral-background, light-dark(
|
|
4
|
+
export default css`:host{display:block;color-scheme:inherit;container-name:modalDialog;container-type:inline-size;--outbook-scrollable--indicator-max-width: 60rem;--_container-max-width: 60rem;--_height: 100dvh;--_button-close-text-display: none;--_main-text-color: light-dark( oklch(20.5% 0 0deg), oklch(98.5% 0 0deg) );--_main-background-color: light-dark( oklch(100% 0 0deg), oklch(14.5% 0 0deg) );--_header-background-color: light-dark( oklch(92.2% 0 0deg), oklch(43.9% 0 0deg) )}:host .dialog--in-element{--_height: 100%}*{box-sizing:border-box}@container modalDialog (min-width: 540px){.dialog{--_button-close-text-display: inline-block}}.dialog{position:fixed;width:100%;height:var(--_height);top:0;left:0;display:flex;justify-content:center;align-items:center;background-color:var(--background-color);color:var(--_main-text-color);z-index:2;transition:background-color 0.3s,color 0.3s}.dialog__close-button{display:flex;align-items:center;cursor:pointer}.dialog__close-button-icon{width:1.5rem;height:1.5rem}.dialog__close-button-text{display:var(--_button-close-text-display);font-size:1rem;line-height:1.5rem;margin-left:0.25rem}.dialog__inner{background-color:var(--_main-background-color);height:100%;position:relative;display:flex;flex-direction:column;width:100%}.dialog__header{display:flex;flex-direction:column;align-items:center;width:100%}.dialog__header>*{width:100%;max-width:var(--_container-max-width, 87.5rem)}.dialog__header{margin-bottom:0.5rem;background-color:var(--_header-background-color);padding:0.75rem 0.5rem}.dialog__header-inner{display:flex;justify-content:space-between;align-items:center;padding:0 0.5rem;height:1.5rem}.dialog__title{font-size:1.375rem;font-weight:normal;line-height:1.5rem}.dialog--scroll .dialog__content-wrapper{display:flex;flex-direction:column;align-items:center;width:100%}.dialog--scroll .dialog__content-wrapper>*{width:100%;max-width:var(--_container-max-width, 87.5rem)}.dialog__content-scroll{flex:1 0 0;overflow-y:auto;padding:0 0.5rem 1rem 0.5rem}.dialog__content{padding:0.5rem 0.5rem 0 1rem}.dialog--no-scroll .dialog__content,.dialog--no-scroll .dialog__content slot{max-height:calc(100dvh - 3.5rem);overflow:hidden;display:block}.dialog__footer{padding:0 0.5rem 1rem 0.5rem;display:flex;justify-content:center}.dialog__footer-actions{list-style:none;display:flex;padding:0;margin:0;width:100%;max-width:var(--_container-max-width)}.dialog__action{padding:0;margin-left:1rem;--outbook-button-default--background-color: var( --outbook-modal-dialog--neutral-background, light-dark(oklch(37.1% 0 0deg), oklch(92.2% 0 0deg)) );--outbook-button-default--background-color-hover: var( --outbook-modal-dialog--neutral-background-hover, light-dark(oklch(20.5% 0 0deg), oklch(70.8% 0 0deg)) )}.dialog__action:first-child{margin-left:0}.dialog__action.positive{--outbook-button-default--background-color: var( --outbook-modal-dialog--positive-background, light-dark(oklch(52.7% 0.154 150.069deg), oklch(92.5% 0.084 155.995deg)) );--outbook-button-default--background-color-hover: var( --outbook-modal-dialog--positive-background-hover, light-dark(oklch(39.3% 0.095 152.535deg), oklch(79.2% 0.209 151.711deg)) )}.dialog__action.negative{--outbook-button-default--background-color: var( --outbook-modal-dialog--negative-background, light-dark(oklch(50.5% 0.213 27.518deg), oklch(88.5% 0.062 18.334deg)) );--outbook-button-default--background-color-hover: var( --outbook-modal-dialog--negative-background-hover, light-dark(oklch(39.6% 0.141 25.723deg), oklch(70.4% 0.191 22.216deg)) )}`;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/* eslint-disable */
|
|
2
2
|
import { css } from 'lit';
|
|
3
3
|
|
|
4
|
-
export default css`:host{display:block;color-scheme:inherit;container-name:modalDialog;container-type:inline-size;--outbook-scrollable--indicator-max-width: 60rem;--_container-max-width: 60rem;--_button-close-text-display: none;--_main-text-color: light-dark( oklch(20.5% 0 0deg), oklch(98.5% 0 0deg) );--_main-background-color: light-dark( oklch(100% 0 0deg), oklch(14.5% 0 0deg) );--_veil-background-color: var( --outbook-modal-dialog--veil-color, light-dark(
|
|
4
|
+
export default css`:host{display:block;color-scheme:inherit;container-name:modalDialog;container-type:inline-size;--outbook-scrollable--indicator-max-width: 60rem;--_container-max-width: 60rem;--_button-close-text-display: none;--_main-text-color: light-dark( oklch(20.5% 0 0deg), oklch(98.5% 0 0deg) );--_main-background-color: light-dark( oklch(100% 0 0deg), oklch(14.5% 0 0deg) );--_veil-background-color: var( --outbook-modal-dialog--veil-color, light-dark(oklch(70.8% 0 0deg), oklch(26.9% 0 0deg)) );--_header-background-color: light-dark( oklch(92.2% 0 0deg), oklch(43.9% 0 0deg) )}*{box-sizing:border-box}.dialog:before{content:"";position:fixed;top:0;left:0;height:100dvh;width:100%;background-color:var(--_veil-background-color);opacity:.85}.dialog__inner{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:80%;max-width:60rem;min-height:20rem;max-height:80dvh;color:var(--_main-text-color);background:var(--_main-background-color);border-radius:0.75rem;padding:1.5rem;display:flex;flex-direction:column}.dialog__header{margin-bottom:1rem}.dialog__header-inner{display:flex;flex-wrap:nowrap;justify-content:space-between}.dialog__title{font-size:1.5rem}.dialog__close-button{display:flex;align-items:center;cursor:pointer}.dialog__close-button-icon{width:1.5rem;height:1.5rem}.dialog__close-button-text{display:none}.dialog__footer{margin-top:auto}.dialog__footer-actions{list-style:none;display:flex;padding:0;margin:0;width:100%;max-width:var(--_container-max-width)}.dialog__action{padding:0;margin-left:1rem;--outbook-button-default--background-color: var( --outbook-modal-dialog--neutral-background, light-dark(oklch(37.1% 0 0deg), oklch(92.2% 0 0deg)) );--outbook-button-default--background-color-hover: var( --outbook-modal-dialog--neutral-background-hover, light-dark(oklch(20.5% 0 0deg), oklch(70.8% 0 0deg)) )}.dialog__action:first-child{margin-left:0}.dialog__action.positive{--outbook-button-default--background-color: var( --outbook-modal-dialog--positive-background, light-dark(oklch(52.7% 0.154 150.069deg), oklch(92.5% 0.084 155.995deg)) );--outbook-button-default--background-color-hover: var( --outbook-modal-dialog--positive-background-hover, light-dark(oklch(39.3% 0.095 152.535deg), oklch(79.2% 0.209 151.711deg)) )}.dialog__action.negative{--outbook-button-default--background-color: var( --outbook-modal-dialog--negative-background, light-dark(oklch(50.5% 0.213 27.518deg), oklch(88.5% 0.062 18.334deg)) );--outbook-button-default--background-color-hover: var( --outbook-modal-dialog--negative-background-hover, light-dark(oklch(39.6% 0.141 25.723deg), oklch(70.4% 0.191 22.216deg)) )}`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@outbook/webcomponents-modal-dialog",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"main": "modal-dialog.js",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"private": false,
|
|
@@ -35,6 +35,6 @@
|
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"lit": "^3.0.0",
|
|
37
37
|
"haunted": "^5.0.0 || ^6.0.0",
|
|
38
|
-
"uuid": "^12.0.0 || ^13.0.0"
|
|
38
|
+
"uuid": "^12.0.0 || ^13.0.0 || ^14.0.0"
|
|
39
39
|
}
|
|
40
40
|
}
|