Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@vaadin/dialog
Advanced tools
@vaadin/dialog - npm Package Compare versions
Comparing version 24.6.0-alpha4 to 24.6.0-alpha5
| { | ||
| "name": "@vaadin/dialog", | ||
| "version": "24.6.0-alpha4", | ||
| "version": "24.6.0-alpha5", | ||
| "publishConfig": { | ||
@@ -42,15 +42,15 @@ "access": "public" | ||
| "@polymer/polymer": "^3.0.0", | ||
| "@vaadin/component-base": "24.6.0-alpha4", | ||
| "@vaadin/lit-renderer": "24.6.0-alpha4", | ||
| "@vaadin/overlay": "24.6.0-alpha4", | ||
| "@vaadin/vaadin-lumo-styles": "24.6.0-alpha4", | ||
| "@vaadin/vaadin-material-styles": "24.6.0-alpha4", | ||
| "@vaadin/vaadin-themable-mixin": "24.6.0-alpha4", | ||
| "@vaadin/component-base": "24.6.0-alpha5", | ||
| "@vaadin/lit-renderer": "24.6.0-alpha5", | ||
| "@vaadin/overlay": "24.6.0-alpha5", | ||
| "@vaadin/vaadin-lumo-styles": "24.6.0-alpha5", | ||
| "@vaadin/vaadin-material-styles": "24.6.0-alpha5", | ||
| "@vaadin/vaadin-themable-mixin": "24.6.0-alpha5", | ||
| "lit": "^3.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@vaadin/a11y-base": "24.6.0-alpha4", | ||
| "@vaadin/chai-plugins": "24.6.0-alpha4", | ||
| "@vaadin/a11y-base": "24.6.0-alpha5", | ||
| "@vaadin/chai-plugins": "24.6.0-alpha5", | ||
| "@vaadin/testing-helpers": "^1.0.0", | ||
| "@vaadin/text-area": "24.6.0-alpha4", | ||
| "@vaadin/text-area": "24.6.0-alpha5", | ||
| "sinon": "^18.0.0" | ||
@@ -62,3 +62,3 @@ }, | ||
| ], | ||
| "gitHead": "78967d4f3bb46f58f43c2cc621802554acb2efaf" | ||
| "gitHead": "cbfa46fe276f254dcaa99a622710d56df7f0a539" | ||
| } |
@@ -61,2 +61,14 @@ /** | ||
| left: string; | ||
| /** | ||
| * Set the width of the overlay. | ||
| * If a unitless number is provided, pixels are assumed. | ||
| */ | ||
| width: string; | ||
| /** | ||
| * Set the height of the overlay. | ||
| * If a unitless number is provided, pixels are assumed. | ||
| */ | ||
| height: string; | ||
| } |
@@ -78,2 +78,18 @@ /** | ||
| /** | ||
| * Set the width of the overlay. | ||
| * If a unitless number is provided, pixels are assumed. | ||
| */ | ||
| width: { | ||
| type: String, | ||
| }, | ||
| /** | ||
| * Set the height of the overlay. | ||
| * If a unitless number is provided, pixels are assumed. | ||
| */ | ||
| height: { | ||
| type: String, | ||
| }, | ||
| /** | ||
| * The `role` attribute value to be set on the overlay. Defaults to "dialog". | ||
@@ -91,3 +107,3 @@ * | ||
| static get observers() { | ||
| return ['__positionChanged(top, left)']; | ||
| return ['__positionChanged(top, left)', '__sizeChanged(width, height)']; | ||
| } | ||
@@ -172,5 +188,10 @@ | ||
| __positionChanged(top, left) { | ||
| this.$.overlay.setBounds({ top, left }); | ||
| requestAnimationFrame(() => this.$.overlay.setBounds({ top, left })); | ||
| } | ||
| /** @private */ | ||
| __sizeChanged(width, height) { | ||
| requestAnimationFrame(() => this.$.overlay.setBounds({ width, height })); | ||
| } | ||
| /** | ||
@@ -177,0 +198,0 @@ * Fired when the dialog is closed. |
@@ -119,2 +119,5 @@ /** | ||
| _stopDrag() { | ||
| this.dispatchEvent( | ||
| new CustomEvent('dragged', { bubbles: true, composed: true, detail: { top: this.top, left: this.left } }), | ||
| ); | ||
| window.removeEventListener('mouseup', this._stopDrag); | ||
@@ -125,2 +128,8 @@ window.removeEventListener('touchend', this._stopDrag); | ||
| } | ||
| /** | ||
| * Fired when the dialog drag is finished. | ||
| * | ||
| * @event dragged | ||
| */ | ||
| }; |
@@ -78,3 +78,3 @@ /** | ||
| window.addEventListener('touchend', this._resizeListeners.stop[direction]); | ||
| if (this.$.overlay.$.overlay.style.position !== 'absolute') { | ||
| if (this.$.overlay.$.overlay.style.position !== 'absolute' || this.width || this.height) { | ||
| this.$.overlay.setBounds(this._originalBounds); | ||
@@ -100,3 +100,4 @@ } | ||
| if (height > minimumSize) { | ||
| this.$.overlay.setBounds({ top, height }); | ||
| this.top = top; | ||
| this.height = height; | ||
| } | ||
@@ -108,3 +109,3 @@ break; | ||
| if (width > minimumSize) { | ||
| this.$.overlay.setBounds({ width }); | ||
| this.width = width; | ||
| } | ||
@@ -116,3 +117,3 @@ break; | ||
| if (height > minimumSize) { | ||
| this.$.overlay.setBounds({ height }); | ||
| this.height = height; | ||
| } | ||
@@ -125,3 +126,4 @@ break; | ||
| if (width > minimumSize) { | ||
| this.$.overlay.setBounds({ left, width }); | ||
| this.left = left; | ||
| this.width = width; | ||
| } | ||
@@ -155,3 +157,3 @@ break; | ||
| const scrollPosition = this.$.overlay.$.resizerContainer.scrollTop; | ||
| const { width, height } = getComputedStyle(this.$.overlay.$.overlay); | ||
| const { width, height, top, left } = getComputedStyle(this.$.overlay.$.overlay); | ||
| const content = this.$.overlay.$.content; | ||
@@ -165,3 +167,3 @@ content.setAttribute( | ||
| this.$.overlay.$.resizerContainer.scrollTop = scrollPosition; | ||
| return { width, height, contentWidth, contentHeight }; | ||
| return { width, height, contentWidth, contentHeight, top, left }; | ||
| } | ||
@@ -168,0 +170,0 @@ |
@@ -25,4 +25,11 @@ /** | ||
| contentHeight: string; | ||
| top: string; | ||
| left: string; | ||
| }; | ||
| export type DialogPosition = { | ||
| top: string; | ||
| left: string; | ||
| }; | ||
| /** | ||
@@ -39,2 +46,7 @@ * Fired when the `opened` property changes. | ||
| /** | ||
| * Fired when the dialog drag is finished. | ||
| */ | ||
| export type DialogDraggedEvent = CustomEvent<DialogPosition>; | ||
| /** | ||
| * Fired when the dialog is closed. | ||
@@ -50,2 +62,4 @@ */ | ||
| resize: DialogResizeEvent; | ||
| dragged: DialogDraggedEvent; | ||
| } | ||
@@ -114,2 +128,3 @@ | ||
| * @fires {CustomEvent} resize - Fired when the dialog resize is finished. | ||
| * @fires {CustomEvent} dragged - Fired when the dialog drag is finished. | ||
| * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes. | ||
@@ -116,0 +131,0 @@ * @fires {CustomEvent} closed - Fired when the dialog is closed. |
@@ -79,2 +79,3 @@ /** | ||
| * @fires {CustomEvent} resize - Fired when the dialog resize is finished. | ||
| * @fires {CustomEvent} dragged - Fired when the dialog drag is finished. | ||
| * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes. | ||
@@ -81,0 +82,0 @@ * @fires {CustomEvent} closed - Fired when the dialog is closed. |
| { | ||
| "$schema": "https://json.schemastore.org/web-types", | ||
| "name": "@vaadin/dialog", | ||
| "version": "24.6.0-alpha4", | ||
| "version": "24.6.0-alpha5", | ||
| "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.6.0-alpha4/#/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/24.6.0-alpha5/#/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": [ | ||
@@ -73,2 +73,24 @@ { | ||
| { | ||
| "name": "width", | ||
| "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.", | ||
| "value": { | ||
| "type": [ | ||
| "string", | ||
| "null", | ||
| "undefined" | ||
| ] | ||
| } | ||
| }, | ||
| { | ||
| "name": "height", | ||
| "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.", | ||
| "value": { | ||
| "type": [ | ||
| "string", | ||
| "null", | ||
| "undefined" | ||
| ] | ||
| } | ||
| }, | ||
| { | ||
| "name": "overlay-role", | ||
@@ -208,2 +230,24 @@ "description": "The `role` attribute value to be set on the overlay. Defaults to \"dialog\".", | ||
| { | ||
| "name": "width", | ||
| "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.", | ||
| "value": { | ||
| "type": [ | ||
| "string", | ||
| "null", | ||
| "undefined" | ||
| ] | ||
| } | ||
| }, | ||
| { | ||
| "name": "height", | ||
| "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.", | ||
| "value": { | ||
| "type": [ | ||
| "string", | ||
| "null", | ||
| "undefined" | ||
| ] | ||
| } | ||
| }, | ||
| { | ||
| "name": "overlayRole", | ||
@@ -307,2 +351,6 @@ "description": "The `role` attribute value to be set on the overlay. Defaults to \"dialog\".", | ||
| { | ||
| "name": "dragged", | ||
| "description": "Fired when the dialog drag is finished." | ||
| }, | ||
| { | ||
| "name": "resize", | ||
@@ -309,0 +357,0 @@ "description": "Fired when the dialog resize is finished." |
| { | ||
| "$schema": "https://json.schemastore.org/web-types", | ||
| "name": "@vaadin/dialog", | ||
| "version": "24.6.0-alpha4", | ||
| "version": "24.6.0-alpha5", | ||
| "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.6.0-alpha4/#/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/24.6.0-alpha5/#/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, | ||
@@ -80,2 +80,16 @@ "attributes": [ | ||
| { | ||
| "name": ".width", | ||
| "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.", | ||
| "value": { | ||
| "kind": "expression" | ||
| } | ||
| }, | ||
| { | ||
| "name": ".height", | ||
| "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.", | ||
| "value": { | ||
| "kind": "expression" | ||
| } | ||
| }, | ||
| { | ||
| "name": ".overlayRole", | ||
@@ -137,2 +151,9 @@ "description": "The `role` attribute value to be set on the overlay. Defaults to \"dialog\".", | ||
| { | ||
| "name": "@dragged", | ||
| "description": "Fired when the dialog drag is finished.", | ||
| "value": { | ||
| "kind": "expression" | ||
| } | ||
| }, | ||
| { | ||
| "name": "@resize", | ||
@@ -139,0 +160,0 @@ "description": "Fired when the dialog resize is finished.", |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.34%
117512
- Lines of code
- increased by4.65%
2698
Dependency changes
+ Added@vaadin/a11y-base@24.6.0-alpha5(transitive)
+ Added@vaadin/component-base@24.6.0-alpha5(transitive)
+ Added@vaadin/icon@24.6.0-alpha5(transitive)
+ Added@vaadin/lit-renderer@24.6.0-alpha5(transitive)
+ Added@vaadin/overlay@24.6.0-alpha5(transitive)
+ Added@vaadin/vaadin-lumo-styles@24.6.0-alpha5(transitive)
+ Added@vaadin/vaadin-material-styles@24.6.0-alpha5(transitive)
+ Added@vaadin/vaadin-themable-mixin@24.6.0-alpha5(transitive)
- Removed@vaadin/a11y-base@24.6.0-alpha4(transitive)
- Removed@vaadin/component-base@24.6.0-alpha4(transitive)
- Removed@vaadin/icon@24.6.0-alpha4(transitive)
- Removed@vaadin/lit-renderer@24.6.0-alpha4(transitive)
- Removed@vaadin/overlay@24.6.0-alpha4(transitive)
- Removed@vaadin/vaadin-lumo-styles@24.6.0-alpha4(transitive)
- Removed@vaadin/vaadin-material-styles@24.6.0-alpha4(transitive)
- Removed@vaadin/vaadin-themable-mixin@24.6.0-alpha4(transitive)