@vaadin/dialog
Advanced tools
Comparing version 22.0.0-beta1 to 22.0.0-beta2
{ | ||
"name": "@vaadin/dialog", | ||
"version": "22.0.0-beta1", | ||
"version": "22.0.0-beta2", | ||
"publishConfig": { | ||
@@ -35,18 +35,19 @@ "access": "public" | ||
"dependencies": { | ||
"@open-wc/dedupe-mixin": "^1.3.0", | ||
"@polymer/iron-resizable-behavior": "^3.0.0", | ||
"@polymer/polymer": "^3.0.0", | ||
"@vaadin/component-base": "22.0.0-beta1", | ||
"@vaadin/vaadin-lumo-styles": "22.0.0-beta1", | ||
"@vaadin/vaadin-material-styles": "22.0.0-beta1", | ||
"@vaadin/vaadin-overlay": "22.0.0-beta1", | ||
"@vaadin/vaadin-themable-mixin": "22.0.0-beta1" | ||
"@vaadin/component-base": "22.0.0-beta2", | ||
"@vaadin/vaadin-lumo-styles": "22.0.0-beta2", | ||
"@vaadin/vaadin-material-styles": "22.0.0-beta2", | ||
"@vaadin/vaadin-overlay": "22.0.0-beta2", | ||
"@vaadin/vaadin-themable-mixin": "22.0.0-beta2" | ||
}, | ||
"devDependencies": { | ||
"@esm-bundle/chai": "^4.3.4", | ||
"@vaadin/polymer-legacy-adapter": "22.0.0-beta1", | ||
"@vaadin/polymer-legacy-adapter": "22.0.0-beta2", | ||
"@vaadin/testing-helpers": "^0.3.0", | ||
"@vaadin/text-area": "22.0.0-beta1", | ||
"@vaadin/text-area": "22.0.0-beta2", | ||
"sinon": "^9.2.1" | ||
}, | ||
"gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e" | ||
"gitHead": "f13833683e6667f6ca6678452db14aa6b7eac4a4" | ||
} |
@@ -1,11 +0,8 @@ | ||
# <vaadin-dialog> | ||
# @vaadin/dialog | ||
[Live Demo ↗](https://vaadin.com/components/vaadin-dialog/html-examples/dialog-basic-demos) | ||
| | ||
[API documentation ↗](https://vaadin.com/components/vaadin-dialog/html-api) | ||
A web component for presenting information and user interface elements in an overlay. | ||
[<vaadin-dialog>](https://vaadin.com/components/vaadin-dialog) is a Web Component for customized modal dialogs, part of the [Vaadin components](https://vaadin.com/components). | ||
[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/dialog) | ||
[![npm version](https://badgen.net/npm/v/@vaadin/dialog)](https://www.npmjs.com/package/@vaadin/dialog) | ||
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-dialog) | ||
[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC) | ||
@@ -24,38 +21,41 @@ | ||
[<img src="https://raw.githubusercontent.com/vaadin/vaadin-dialog/master/screenshot.png" width="264" alt="Screenshot of vaadin-dialog">](https://vaadin.com/components/vaadin-dialog) | ||
[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/dialog/screenshot.png" width="264" alt="Screenshot of vaadin-dialog">](https://vaadin.com/docs/latest/ds/components/dialog) | ||
## Installation | ||
Install `vaadin-dialog`: | ||
Install the component: | ||
```sh | ||
npm i @vaadin/dialog --save | ||
npm i @vaadin/dialog | ||
``` | ||
Once installed, import it in your application: | ||
Once installed, import the component in your application: | ||
```js | ||
import '@vaadin/dialog/vaadin-dialog.js'; | ||
import '@vaadin/dialog'; | ||
``` | ||
## Getting started | ||
## Themes | ||
Vaadin components use the Lumo theme by default. | ||
Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material. | ||
The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/dialog/vaadin-dialog.js) of the package uses the Lumo theme. | ||
To use the Material theme, import the correspondent file from the `theme/material` folder. | ||
To use the Material theme, import the component from the `theme/material` folder: | ||
## Entry points | ||
```js | ||
import '@vaadin/dialog/theme/material/vaadin-dialog.js'; | ||
``` | ||
- The component with the Lumo theme: | ||
You can also import the Lumo version of the component explicitly: | ||
`theme/lumo/vaadin-dialog.js` | ||
```js | ||
import '@vaadin/dialog/theme/lumo/vaadin-dialog.js'; | ||
``` | ||
- The component with the Material theme: | ||
Finally, you can import the un-themed component from the `src` folder to get a minimal starting point: | ||
`theme/material/vaadin-dialog.js` | ||
```js | ||
import '@vaadin/dialog/src/vaadin-dialog.js'; | ||
``` | ||
- Alias for `theme/lumo/vaadin-dialog.js`: | ||
`vaadin-dialog.js` | ||
## Contributing | ||
@@ -69,2 +69,3 @@ | ||
Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics. | ||
Vaadin collects usage statistics at development time to improve this product. | ||
For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics. |
@@ -6,12 +6,9 @@ /** | ||
*/ | ||
import { Constructor } from '@open-wc/dedupe-mixin'; | ||
declare function DialogDraggableMixin<T extends new (...args: any[]) => {}>( | ||
export declare function DialogDraggableMixin<T extends Constructor<HTMLElement>>( | ||
base: T | ||
): T & DialogDraggableMixinConstructor; | ||
): T & Constructor<DialogDraggableMixinClass>; | ||
interface DialogDraggableMixinConstructor { | ||
new (...args: any[]): DialogDraggableMixin; | ||
} | ||
interface DialogDraggableMixin { | ||
export declare class DialogDraggableMixinClass { | ||
/** | ||
@@ -29,3 +26,1 @@ * Set to true to enable repositioning the dialog by clicking and dragging. | ||
} | ||
export { DialogDraggableMixin, DialogDraggableMixinConstructor }; |
@@ -1,2 +0,2 @@ | ||
import { getMouseOrFirstTouchEvent, eventInWindow } from './vaadin-dialog-utils.js'; | ||
import { eventInWindow, getMouseOrFirstTouchEvent } from './vaadin-dialog-utils.js'; | ||
@@ -3,0 +3,0 @@ const TOUCH_DEVICE = (() => { |
@@ -6,12 +6,9 @@ /** | ||
*/ | ||
import { Constructor } from '@open-wc/dedupe-mixin'; | ||
declare function DialogResizableMixin<T extends new (...args: any[]) => {}>( | ||
export declare function DialogResizableMixin<T extends Constructor<HTMLElement>>( | ||
base: T | ||
): T & DialogResizableMixinConstructor; | ||
): T & Constructor<DialogResizableMixinClass>; | ||
interface DialogResizableMixinConstructor { | ||
new (...args: any[]): DialogResizableMixin; | ||
} | ||
interface DialogResizableMixin { | ||
export declare class DialogResizableMixinClass { | ||
/** | ||
@@ -22,3 +19,1 @@ * Set to true to enable resizing the dialog by dragging the corners and edges. | ||
} | ||
export { DialogResizableMixin, DialogResizableMixinConstructor }; |
@@ -1,3 +0,3 @@ | ||
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
import { getMouseOrFirstTouchEvent, eventInWindow } from './vaadin-dialog-utils.js'; | ||
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
import { eventInWindow, getMouseOrFirstTouchEvent } from './vaadin-dialog-utils.js'; | ||
@@ -4,0 +4,0 @@ registerStyles( |
@@ -6,10 +6,10 @@ /** | ||
*/ | ||
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'; | ||
import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js'; | ||
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js'; | ||
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; | ||
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; | ||
import { processTemplates } from '@vaadin/component-base/src/templates.js'; | ||
import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js'; | ||
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js'; | ||
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
import { DialogDraggableMixin } from './vaadin-dialog-draggable-mixin.js'; | ||
@@ -16,0 +16,0 @@ import { DialogResizableMixin } from './vaadin-dialog-resizable-mixin.js'; |
@@ -1,4 +0,4 @@ | ||
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
import '@vaadin/vaadin-lumo-styles/spacing.js'; | ||
import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js'; | ||
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
@@ -5,0 +5,0 @@ const dialogOverlay = css` |
@@ -1,4 +0,4 @@ | ||
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
import '@vaadin/vaadin-material-styles/shadow.js'; | ||
import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js'; | ||
import '@vaadin/vaadin-material-styles/shadow.js'; | ||
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
@@ -5,0 +5,0 @@ const dialogOverlay = css` |
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
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
70
46218
8
946
+ Added@open-wc/dedupe-mixin@^1.3.0
+ Added@open-wc/dedupe-mixin@1.4.0(transitive)
+ Added@vaadin/component-base@22.0.0-beta2(transitive)
+ Added@vaadin/icon@22.0.0-beta2(transitive)
+ Added@vaadin/vaadin-lumo-styles@22.0.0-beta2(transitive)
+ Added@vaadin/vaadin-material-styles@22.0.0-beta2(transitive)
+ Added@vaadin/vaadin-overlay@22.0.0-beta2(transitive)
+ Added@vaadin/vaadin-themable-mixin@22.0.0-beta2(transitive)
- Removed@vaadin/component-base@22.0.0-beta1(transitive)
- Removed@vaadin/icon@22.0.0-beta1(transitive)
- Removed@vaadin/vaadin-lumo-styles@22.0.0-beta1(transitive)
- Removed@vaadin/vaadin-material-styles@22.0.0-beta1(transitive)
- Removed@vaadin/vaadin-overlay@22.0.0-beta1(transitive)
- Removed@vaadin/vaadin-themable-mixin@22.0.0-beta1(transitive)