🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
@vaadin/dialog
Advanced tools
@vaadin/dialog - npm Package Compare versions
Comparing version 24.8.0-alpha9 to 25.0.0-alpha1
| { | ||
| "name": "@vaadin/dialog", | ||
| "version": "24.8.0-alpha9", | ||
| "version": "25.0.0-alpha1", | ||
| "publishConfig": { | ||
@@ -36,20 +36,17 @@ "access": "public" | ||
| "web-components", | ||
| "web-component", | ||
| "polymer" | ||
| "web-component" | ||
| ], | ||
| "dependencies": { | ||
| "@open-wc/dedupe-mixin": "^1.3.0", | ||
| "@polymer/polymer": "^3.0.0", | ||
| "@vaadin/component-base": "24.8.0-alpha9", | ||
| "@vaadin/lit-renderer": "24.8.0-alpha9", | ||
| "@vaadin/overlay": "24.8.0-alpha9", | ||
| "@vaadin/vaadin-lumo-styles": "24.8.0-alpha9", | ||
| "@vaadin/vaadin-material-styles": "24.8.0-alpha9", | ||
| "@vaadin/vaadin-themable-mixin": "24.8.0-alpha9", | ||
| "@vaadin/component-base": "25.0.0-alpha1", | ||
| "@vaadin/lit-renderer": "25.0.0-alpha1", | ||
| "@vaadin/overlay": "25.0.0-alpha1", | ||
| "@vaadin/vaadin-lumo-styles": "25.0.0-alpha1", | ||
| "@vaadin/vaadin-themable-mixin": "25.0.0-alpha1", | ||
| "lit": "^3.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@vaadin/a11y-base": "24.8.0-alpha9", | ||
| "@vaadin/chai-plugins": "24.8.0-alpha9", | ||
| "@vaadin/test-runner-commands": "24.8.0-alpha9", | ||
| "@vaadin/a11y-base": "25.0.0-alpha1", | ||
| "@vaadin/chai-plugins": "25.0.0-alpha1", | ||
| "@vaadin/test-runner-commands": "25.0.0-alpha1", | ||
| "@vaadin/testing-helpers": "^1.1.0", | ||
@@ -62,3 +59,3 @@ "sinon": "^18.0.0" | ||
| ], | ||
| "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770" | ||
| "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49" | ||
| } |
@@ -36,25 +36,2 @@ # @vaadin/dialog | ||
| ## Themes | ||
| Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material. | ||
| The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/dialog/vaadin-dialog.js) of the package uses the Lumo theme. | ||
| To use the Material theme, import the component from the `theme/material` folder: | ||
| ```js | ||
| import '@vaadin/dialog/theme/material/vaadin-dialog.js'; | ||
| ``` | ||
| You can also import the Lumo version of the component explicitly: | ||
| ```js | ||
| import '@vaadin/dialog/theme/lumo/vaadin-dialog.js'; | ||
| ``` | ||
| Finally, you can import the un-themed component from the `src` folder to get a minimal starting point: | ||
| ```js | ||
| import '@vaadin/dialog/src/vaadin-dialog.js'; | ||
| ``` | ||
| ## Contributing | ||
@@ -61,0 +38,0 @@ |
@@ -6,14 +6,11 @@ /** | ||
| */ | ||
| import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; | ||
| import { html, LitElement } from 'lit'; | ||
| import { defineCustomElement } from '@vaadin/component-base/src/define.js'; | ||
| import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js'; | ||
| import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; | ||
| import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js'; | ||
| import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { DialogOverlayMixin } from './vaadin-dialog-overlay-mixin.js'; | ||
| import { dialogOverlay, resizableOverlay } from './vaadin-dialog-styles.js'; | ||
| registerStyles('vaadin-dialog-overlay', [overlayStyles, dialogOverlay, resizableOverlay], { | ||
| moduleId: 'vaadin-dialog-overlay-styles', | ||
| }); | ||
| /** | ||
@@ -29,3 +26,3 @@ * An element used internally by `<vaadin-dialog>`. Not intended to be used separately. | ||
| */ | ||
| export class DialogOverlay extends DialogOverlayMixin(DirMixin(ThemableMixin(PolymerElement))) { | ||
| export class DialogOverlay extends DialogOverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) { | ||
| static get is() { | ||
@@ -35,5 +32,10 @@ return 'vaadin-dialog-overlay'; | ||
| static get template() { | ||
| static get styles() { | ||
| return [overlayStyles, dialogOverlay, resizableOverlay]; | ||
| } | ||
| /** @protected */ | ||
| render() { | ||
| return html` | ||
| <div id="backdrop" part="backdrop" hidden$="[[!withBackdrop]]"></div> | ||
| <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div> | ||
| <div part="overlay" id="overlay" tabindex="0"> | ||
@@ -40,0 +42,0 @@ <section id="resizerContainer" class="resizer-container"> |
@@ -7,7 +7,8 @@ /** | ||
| import './vaadin-dialog-overlay.js'; | ||
| import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; | ||
| import { css, html, LitElement } from 'lit'; | ||
| import { ifDefined } from 'lit/directives/if-defined.js'; | ||
| import { defineCustomElement } from '@vaadin/component-base/src/define.js'; | ||
| import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; | ||
| import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js'; | ||
| import { processTemplates } from '@vaadin/component-base/src/templates.js'; | ||
| import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; | ||
| import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js'; | ||
@@ -96,34 +97,17 @@ import { DialogBaseMixin } from './vaadin-dialog-base-mixin.js'; | ||
| DialogResizableMixin( | ||
| DialogRendererMixin(DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolymerElement))))), | ||
| DialogRendererMixin(DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(LitElement)))))), | ||
| ), | ||
| ) { | ||
| static get template() { | ||
| return html` | ||
| <style> | ||
| :host { | ||
| display: none !important; | ||
| } | ||
| </style> | ||
| static get is() { | ||
| return 'vaadin-dialog'; | ||
| } | ||
| <vaadin-dialog-overlay | ||
| id="overlay" | ||
| role$="[[overlayRole]]" | ||
| header-title="[[headerTitle]]" | ||
| on-opened-changed="_onOverlayOpened" | ||
| on-mousedown="_bringOverlayToFront" | ||
| on-touchstart="_bringOverlayToFront" | ||
| theme$="[[_theme]]" | ||
| modeless="[[modeless]]" | ||
| with-backdrop="[[!modeless]]" | ||
| resizable$="[[resizable]]" | ||
| restore-focus-on-close | ||
| focus-trap | ||
| ></vaadin-dialog-overlay> | ||
| static get styles() { | ||
| return css` | ||
| :host { | ||
| display: none !important; | ||
| } | ||
| `; | ||
| } | ||
| static get is() { | ||
| return 'vaadin-dialog'; | ||
| } | ||
| static get properties() { | ||
@@ -143,35 +127,27 @@ return { | ||
| static get observers() { | ||
| return [ | ||
| '_openedChanged(opened)', | ||
| '_ariaLabelChanged(ariaLabel, headerTitle)', | ||
| '_rendererChanged(renderer, headerRenderer, footerRenderer)', | ||
| ]; | ||
| } | ||
| /** @protected */ | ||
| ready() { | ||
| super.ready(); | ||
| processTemplates(this); | ||
| render() { | ||
| return html` | ||
| <vaadin-dialog-overlay | ||
| id="overlay" | ||
| role="${this.overlayRole}" | ||
| .owner="${this}" | ||
| .opened="${this.opened}" | ||
| .headerTitle="${this.headerTitle}" | ||
| .renderer="${this.renderer}" | ||
| .headerRenderer="${this.headerRenderer}" | ||
| .footerRenderer="${this.footerRenderer}" | ||
| @opened-changed="${this._onOverlayOpened}" | ||
| @mousedown="${this._bringOverlayToFront}" | ||
| @touchstart="${this._bringOverlayToFront}" | ||
| theme="${ifDefined(this._theme)}" | ||
| aria-label="${ifDefined(this.ariaLabel || this.headerTitle)}" | ||
| .modeless="${this.modeless}" | ||
| .withBackdrop="${!this.modeless}" | ||
| ?resizable="${this.resizable}" | ||
| restore-focus-on-close | ||
| focus-trap | ||
| ></vaadin-dialog-overlay> | ||
| `; | ||
| } | ||
| /** @private */ | ||
| _rendererChanged(renderer, headerRenderer, footerRenderer) { | ||
| this.$.overlay.setProperties({ owner: this, renderer, headerRenderer, footerRenderer }); | ||
| } | ||
| /** @private */ | ||
| _openedChanged(opened) { | ||
| this.$.overlay.opened = opened; | ||
| } | ||
| /** @private */ | ||
| _ariaLabelChanged(ariaLabel, headerTitle) { | ||
| if (ariaLabel || headerTitle) { | ||
| this.$.overlay.setAttribute('aria-label', ariaLabel || headerTitle); | ||
| } else { | ||
| this.$.overlay.removeAttribute('aria-label'); | ||
| } | ||
| } | ||
| } | ||
@@ -178,0 +154,0 @@ |
| { | ||
| "$schema": "https://json.schemastore.org/web-types", | ||
| "name": "@vaadin/dialog", | ||
| "version": "24.8.0-alpha9", | ||
| "version": "25.0.0-alpha1", | ||
| "description-markup": "markdown", | ||
@@ -11,3 +11,3 @@ "contributions": { | ||
| "name": "vaadin-dialog", | ||
| "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\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\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\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "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\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\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\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "attributes": [ | ||
@@ -14,0 +14,0 @@ { |
| { | ||
| "$schema": "https://json.schemastore.org/web-types", | ||
| "name": "@vaadin/dialog", | ||
| "version": "24.8.0-alpha9", | ||
| "version": "25.0.0-alpha1", | ||
| "description-markup": "markdown", | ||
@@ -19,3 +19,3 @@ "framework": "lit", | ||
| "name": "vaadin-dialog", | ||
| "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\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\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\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "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\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\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\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.", | ||
| "extension": true, | ||
@@ -22,0 +22,0 @@ "attributes": [ |
No alert changes
Improved metrics
- Dependency count
7
-22.22%Worsened metrics
- Total package byte prevSize
108509
-7.63%- Number of package files
33
-29.79%- Lines of code
2458
-8.83%- Number of lines in readme file
46
-33.33%Dependency changes
+ Added
@vaadin/a11y-base@25.0.0-alpha1(transitive)+ Added
@vaadin/component-base@25.0.0-alpha1(transitive)+ Added
@vaadin/icon@25.0.0-alpha1(transitive)+ Added
@vaadin/lit-renderer@25.0.0-alpha1(transitive)+ Added
@vaadin/overlay@25.0.0-alpha1(transitive)+ Added
@vaadin/vaadin-lumo-styles@25.0.0-alpha1(transitive)+ Added
@vaadin/vaadin-themable-mixin@25.0.0-alpha1(transitive)+ Added
style-observer@0.0.8(transitive)- Removed
@polymer/polymer@^3.0.0- Removed
@polymer/polymer@3.5.2(transitive)- Removed
@vaadin/a11y-base@24.8.0-alpha9(transitive)- Removed
@vaadin/component-base@24.8.0-alpha9(transitive)- Removed
@vaadin/icon@24.8.0-alpha9(transitive)- Removed
@vaadin/lit-renderer@24.8.0-alpha9(transitive)- Removed
@vaadin/overlay@24.8.0-alpha9(transitive)- Removed
@vaadin/vaadin-lumo-styles@24.8.0-alpha9(transitive)- Removed
@vaadin/vaadin-material-styles@24.8.0-alpha9(transitive)- Removed
@vaadin/vaadin-themable-mixin@24.8.0-alpha9(transitive)- Removed
@webcomponents/shadycss@1.11.2(transitive)