@vaadin/dialog 25.0.0-beta7 → 25.0.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.
Files changed (6) hide show
  1. package/package.json +10 -10
  2. package/src/styles/vaadin-dialog-overlay-base-styles.js +19 -4
  3. package/src/vaadin-dialog.d.ts +18 -0
  4. package/src/vaadin-dialog.js +19 -1
  5. package/web-types.json +2 -2
  6. package/web-types.lit.json +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/dialog",
3
- "version": "25.0.0-beta7",
3
+ "version": "25.0.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -36,23 +36,23 @@
36
36
  ],
37
37
  "dependencies": {
38
38
  "@open-wc/dedupe-mixin": "^1.3.0",
39
- "@vaadin/component-base": "25.0.0-beta7",
40
- "@vaadin/lit-renderer": "25.0.0-beta7",
41
- "@vaadin/overlay": "25.0.0-beta7",
42
- "@vaadin/vaadin-themable-mixin": "25.0.0-beta7",
39
+ "@vaadin/component-base": "~25.0.0",
40
+ "@vaadin/lit-renderer": "~25.0.0",
41
+ "@vaadin/overlay": "~25.0.0",
42
+ "@vaadin/vaadin-themable-mixin": "~25.0.0",
43
43
  "lit": "^3.0.0"
44
44
  },
45
45
  "devDependencies": {
46
- "@vaadin/a11y-base": "25.0.0-beta7",
47
- "@vaadin/chai-plugins": "25.0.0-beta7",
48
- "@vaadin/test-runner-commands": "25.0.0-beta7",
46
+ "@vaadin/a11y-base": "~25.0.0",
47
+ "@vaadin/chai-plugins": "~25.0.0",
48
+ "@vaadin/test-runner-commands": "~25.0.0",
49
49
  "@vaadin/testing-helpers": "^2.0.0",
50
- "@vaadin/vaadin-lumo-styles": "25.0.0-beta7",
50
+ "@vaadin/vaadin-lumo-styles": "~25.0.0",
51
51
  "sinon": "^21.0.0"
52
52
  },
53
53
  "web-types": [
54
54
  "web-types.json",
55
55
  "web-types.lit.json"
56
56
  ],
57
- "gitHead": "f12f14c37d2c0a72f708baff4a95230168d58dcc"
57
+ "gitHead": "c979f7ca278b6412095176ada230eb07eb4456bf"
58
58
  }
package/src/styles/vaadin-dialog-overlay-base-styles.js CHANGED
@@ -132,19 +132,34 @@ const dialogResizableOverlay = css`
132
132
  [part='content'] {
133
133
  flex: 1;
134
134
  min-height: 0;
135
- }
136
-
137
- :host([overflow]) [part='content'] {
138
135
  overflow: auto;
139
136
  overscroll-behavior: contain;
137
+ clip-path: border-box;
138
+ }
139
+
140
+ [part='header'],
141
+ :host(:not([has-header])) [part='content'] {
142
+ border-top-left-radius: inherit;
143
+ border-top-right-radius: inherit;
144
+ }
145
+
146
+ [part='footer'],
147
+ :host(:not([has-footer])) [part='content'] {
148
+ border-bottom-left-radius: inherit;
149
+ border-bottom-right-radius: inherit;
140
150
  }
141
151
 
142
152
  .resizer-container {
143
153
  display: flex;
144
154
  flex-direction: column;
145
155
  flex-grow: 1;
146
- border-radius: inherit;
147
156
  max-width: 100%;
157
+ border-radius: calc(
158
+ var(--vaadin-dialog-border-radius, var(--vaadin-radius-l)) - var(
159
+ --vaadin-dialog-border-width,
160
+ var(--vaadin-overlay-border-width, 1px)
161
+ )
162
+ );
148
163
  }
149
164
 
150
165
  :host(:not([resizable])) .resizer {
package/src/vaadin-dialog.d.ts CHANGED
@@ -111,6 +111,24 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
111
111
  * `has-footer` | Set when the element has footer renderer
112
112
  * `overflow` | Set to `top`, `bottom`, none or both
113
113
  *
114
+ * The following custom CSS properties are available for styling:
115
+ *
116
+ * Custom CSS property |
117
+ * :----------------------------------------|
118
+ * |`--vaadin-dialog-background` |
119
+ * |`--vaadin-dialog-border-color` |
120
+ * |`--vaadin-dialog-border-radius` |
121
+ * |`--vaadin-dialog-border-width` |
122
+ * |`--vaadin-dialog-max-width` |
123
+ * |`--vaadin-dialog-min-width` |
124
+ * |`--vaadin-dialog-padding` |
125
+ * |`--vaadin-dialog-shadow` |
126
+ * |`--vaadin-dialog-title-color` |
127
+ * |`--vaadin-dialog-title-font-size` |
128
+ * |`--vaadin-dialog-title-font-weight` |
129
+ * |`--vaadin-dialog-title-line-height` |
130
+ * |`--vaadin-overlay-backdrop-background` |
131
+ *
114
132
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
115
133
  *
116
134
  * @fires {CustomEvent} resize - Fired when the dialog resize is finished.
package/src/vaadin-dialog.js CHANGED
@@ -68,6 +68,24 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
68
68
  * `has-footer` | Set when the element has footer renderer
69
69
  * `overflow` | Set to `top`, `bottom`, none or both
70
70
  *
71
+ * The following custom CSS properties are available for styling:
72
+ *
73
+ * Custom CSS property |
74
+ * :----------------------------------------|
75
+ * |`--vaadin-dialog-background` |
76
+ * |`--vaadin-dialog-border-color` |
77
+ * |`--vaadin-dialog-border-radius` |
78
+ * |`--vaadin-dialog-border-width` |
79
+ * |`--vaadin-dialog-max-width` |
80
+ * |`--vaadin-dialog-min-width` |
81
+ * |`--vaadin-dialog-padding` |
82
+ * |`--vaadin-dialog-shadow` |
83
+ * |`--vaadin-dialog-title-color` |
84
+ * |`--vaadin-dialog-title-font-size` |
85
+ * |`--vaadin-dialog-title-font-weight` |
86
+ * |`--vaadin-dialog-title-line-height` |
87
+ * |`--vaadin-overlay-backdrop-background` |
88
+ *
71
89
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
72
90
  *
73
91
  * @fires {CustomEvent} resize - Fired when the dialog resize is finished.
@@ -102,7 +120,7 @@ class Dialog extends DialogSizeMixin(
102
120
  :host([opening]),
103
121
  :host([closing]) {
104
122
  display: block !important;
105
- position: absolute;
123
+ position: fixed;
106
124
  outline: none;
107
125
  }
108
126
 
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/dialog",
4
- "version": "25.0.0-beta7",
4
+ "version": "25.0.0",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-dialog",
11
- "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n`header` | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title` | Element wrapping the title slot\n`footer` | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`has-title` | Set when the element has a title\n`has-header` | Set when the element has header renderer\n`has-footer` | Set when the element has footer renderer\n`overflow` | Set to `top`, `bottom`, none or both\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
11
+ "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n`header` | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title` | Element wrapping the title slot\n`footer` | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`has-title` | Set when the element has a title\n`has-header` | Set when the element has header renderer\n`has-footer` | Set when the element has footer renderer\n`overflow` | Set to `top`, `bottom`, none or both\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------|\n|`--vaadin-dialog-background` |\n|`--vaadin-dialog-border-color` |\n|`--vaadin-dialog-border-radius` |\n|`--vaadin-dialog-border-width` |\n|`--vaadin-dialog-max-width` |\n|`--vaadin-dialog-min-width` |\n|`--vaadin-dialog-padding` |\n|`--vaadin-dialog-shadow` |\n|`--vaadin-dialog-title-color` |\n|`--vaadin-dialog-title-font-size` |\n|`--vaadin-dialog-title-font-weight` |\n|`--vaadin-dialog-title-line-height` |\n|`--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "opened",
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/dialog",
4
- "version": "25.0.0-beta7",
4
+ "version": "25.0.0",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,7 +16,7 @@
16
16
  "elements": [
17
17
  {
18
18
  "name": "vaadin-dialog",
19
- "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n`header` | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title` | Element wrapping the title slot\n`footer` | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`has-title` | Set when the element has a title\n`has-header` | Set when the element has header renderer\n`has-footer` | Set when the element has footer renderer\n`overflow` | Set to `top`, `bottom`, none or both\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
19
+ "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n`header` | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title` | Element wrapping the title slot\n`footer` | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`has-title` | Set when the element has a title\n`has-header` | Set when the element has header renderer\n`has-footer` | Set when the element has footer renderer\n`overflow` | Set to `top`, `bottom`, none or both\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------|\n|`--vaadin-dialog-background` |\n|`--vaadin-dialog-border-color` |\n|`--vaadin-dialog-border-radius` |\n|`--vaadin-dialog-border-width` |\n|`--vaadin-dialog-max-width` |\n|`--vaadin-dialog-min-width` |\n|`--vaadin-dialog-padding` |\n|`--vaadin-dialog-shadow` |\n|`--vaadin-dialog-title-color` |\n|`--vaadin-dialog-title-font-size` |\n|`--vaadin-dialog-title-font-weight` |\n|`--vaadin-dialog-title-line-height` |\n|`--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {