@vaadin/vaadin-login - npm Package Compare versions

Comparing version 1.0.0-alpha6 to 1.0.0-alpha7

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-login",
-  "version": "1.0.0-alpha6",
+  "version": "1.0.0-alpha7",
   "main": "vaadin-login.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

README.md

@@ -21,13 +21,2 @@ [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-login)](https://www.npmjs.com/package/@vaadin/vaadin-login)
 
-<!--
-```
-<custom-element-demo>
-  <template>
-    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
-    <link rel="import" href="vaadin-login.html">
-    <next-code-block></next-code-block>
-  </template>
-</custom-element-demo>
-```
--->
 ```html
@@ -37,5 +26,11 @@ <vaadin-login></vaadin-login>
 
-[<img src="https://raw.githubusercontent.com/vaadin/vaadin-login/master/screenshot.png" width="700" alt="Screenshot of vaadin-login">](https://vaadin.com/components/vaadin-login)
+`<vaadin-login-overlay>` is a `<vaadin-login>` wrapper which opens the login form in an overlay and allows the form being accessible for password managers.
 
+```html
+<vaadin-login-overlay></vaadin-login-overlay>
+```
 
+[<img src="https://raw.githubusercontent.com/vaadin/vaadin-login/master/screenshot.png" width="700" alt="Screenshot of vaadin-login-overlay">](https://vaadin.com/components/vaadin-login)
+
+
 ## Installation
@@ -89,2 +84,3 @@
   `theme/lumo/vaadin-login.html`
+  `theme/lumo/vaadin-login-overlay.html`
 
@@ -94,6 +90,8 @@ - The component with the Material theme:
   `theme/material/vaadin-login.html`
+  `theme/material/vaadin-login-overlay.html`
 
-- Alias for `theme/lumo/vaadin-login.html`:
+- Aliases for lumo themed components:
 
   `vaadin-login.html`
+  `vaadin-login-overlay.html`
 
@@ -100,0 +98,0 @@

src/vaadin-login-mixin.js

@@ -68,4 +68,5 @@ /**
        *
-       * The object has the following JSON structure (by default it doesn't include
-       * `header` section, which can be added to override `title` and `description` properties):
+       * The object has the following JSON structure (by default it doesn't include `additionalInformation`
+       * and `header` sections, `header` can be added to override `title` and `description` properties
+       * in `vaadin-login-overlay`):
 
@@ -107,4 +108,3 @@ {
               message: 'Check that you have entered the correct username and password and try again.'
-            },
-            additionalInformation: 'In case you need to provide some additional info for the user.'
+            }
           };
@@ -111,0 +111,0 @@ },

src/vaadin-login-overlay-wrapper.js

@@ -45,5 +45,5 @@ /**
       <div part="brand">
-          <slot name="title">
-            <h1 part="title">[[title]]</h1>
-          </slot>
+        <slot name="title">
+          <h1 part="title">[[title]]</h1>
+        </slot>
         <p part="description">[[description]]</p>
@@ -64,4 +64,27 @@ </div>
 /**
- * The overlay wrapper
+ * `<vaadin-login-overlay-wrapper>` is a helper element for `<vaadin-login-overlay>` that provides
+ * responsible template for the login form.
  *
+ * ### Styling
+ *
+ * The following Shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:
+ *
+ * Part name       | Description
+ * ----------------|---------------------------------------------------------|
+ * `card`          | Container for the entire component's content
+ * `brand`         | Container for application title and description
+ * `form`          | Container for the `<vaadin-login>` component
+ *
+ * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
+ *
+ * ### Component's slots
+ *
+ * The following slots are available for being set
+ *
+ * Slot name    | Description
+ * -------------|-----------------------------------------------|
+ * no name      | Default placeholder for the `<vaadin-login>`
+ * `title`      | Placeholder for customizing the title
+ *
+ * See the usage example in `<vaadin-login-overlay>`.
  * @memberof Vaadin
@@ -77,5 +100,11 @@ * @private
     return {
+      /**
+       * Title of the application.
+       */
       title: {
         type: String
       },
+      /**
+       * Application description. Displayed under the title.
+       */
       description: {
@@ -82,0 +111,0 @@ type: String

src/vaadin-login-overlay.js

@@ -16,14 +16,20 @@ /**
 /**
- * `<vaadin-login-overlay>` is a Web Component.
-  *
-  * ```
-  * <vaadin-login-overlay></vaadin-login-overlay>
-  * ```
-  *
-  * @memberof Vaadin
-  * @mixes Vaadin.ElementMixin
-  * @mixes Vaadin.ThemableMixin
-  * @mixes Vaadin.Login.LoginMixin
-  * @demo demo/index.html
-  */
+ * `<vaadin-login-overlay>` is a wrapper of the `<vaadin-login>` which opens a login form in an overlay and
+ * additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows
+ * password managers to work with login form.
+ *
+ * ```
+ * <vaadin-login-overlay></vaadin-login-overlay>
+ * ```
+ *
+ * ### Styling
+ *
+ * To style the element check: `<vaadin-login-overlay-wrapper>`, `<vaadin-login>` and `<vaadin-overlay>` elements
+ *
+ * @memberof Vaadin
+ * @mixes Vaadin.ElementMixin
+ * @mixes Vaadin.ThemableMixin
+ * @mixes Vaadin.Login.LoginMixin
+ * @demo demo/index.html
+ */
 class LoginOverlayElement extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement))) {
@@ -44,8 +50,8 @@ static get template() {
         <form id="loginForm" method="POST" action\$="[[action]]" slot="form">
-          <vaadin-text-field label="[[i18n.form.username]]" id="username" required="" on-keydown="_handleInputKeydown">
-            <input name="username" type="text" slot="input">
+          <vaadin-text-field name="username" label="[[i18n.form.username]]" id="username" required="" on-keydown="_handleInputKeydown">
+            <input type="text" slot="input">
           </vaadin-text-field>
 
-          <vaadin-password-field label="[[i18n.form.password]]" id="password" required="" on-keydown="_handleInputKeydown">
-            <input name="password" type="password" slot="input">
+          <vaadin-password-field name="password" label="[[i18n.form.password]]" id="password" required="" on-keydown="_handleInputKeydown">
+            <input type="password" slot="input">
           </vaadin-password-field>
@@ -75,2 +81,5 @@
       },
+      /**
+       * True if the overlay is currently displayed.
+       */
       opened: {
@@ -77,0 +86,0 @@ type: Boolean,

src/vaadin-login.js

@@ -18,3 +18,4 @@ /**
 /**
- * `<vaadin-login>` is a Web Component.
+ * `<vaadin-login>` is a Web Component providing an easy way to require users
+ * to log in into an application.
  *
@@ -25,2 +26,29 @@ * ```
  *
+ * Use `<vaadin-login-overlay>` Web Component which allows the form to work with password managers.
+ *
+ * ### Styling
+ *
+ * The following Shadow DOM parts of the `<vaadin-login>` are available for styling:
+ *
+ * Part name      | Description
+ * ---------------|---------------------------------------------------------|
+ * `form`         | Container for the entire component's content
+ * `form-title`   | Title of the login form
+ * `error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.
+ * `error-message-title`       | Container for error message title
+ * `error-message-description` | Container for error message description
+ * `error-message-description` | Container for error message description
+ * `footer`  | Container additional information text from `i18n` object
+ *
+ * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
+ *
+ * ### Component's slots
+ *
+ * The following slots are available for being set
+ *
+ * Slot name | Description
+ * ----------|---------------------------------------------------|
+ * `form`    | Html form placeholder. See the usage in `<vaadin-login-overlay>`.
+ *
+ * See examples of setting the content into slots in the live demos.
  * @memberof Vaadin
@@ -73,8 +101,8 @@ * @mixes Vaadin.ElementMixin
           <form id="loginForm" method="POST" action\$="[[action]]">
-            <vaadin-text-field label="[[i18n.form.username]]" id="username" required="" on-keydown="_handleInputKeydown">
-              <input name="username" type="text" slot="input">
+            <vaadin-text-field name="username" label="[[i18n.form.username]]" id="username" required="" on-keydown="_handleInputKeydown">
+              <input type="text" slot="input">
             </vaadin-text-field>
 
-            <vaadin-password-field label="[[i18n.form.password]]" id="password" required="" on-keydown="_handleInputKeydown">
-              <input name="password" type="password" slot="input">
+            <vaadin-password-field name="password" label="[[i18n.form.password]]" id="password" required="" on-keydown="_handleInputKeydown">
+              <input type="password" slot="input">
             </vaadin-password-field>
@@ -88,5 +116,5 @@
 
-        <slot name="footer">
-          <span>[[i18n.additionalInformation]]</span>
-        </slot>
+        <div part="footer">
+          <p>[[i18n.additionalInformation]]</p>
+        </div>
       </section>
@@ -100,3 +128,3 @@ `;
   static get version() {
-    return '1.0.0-alpha6';
+    return '1.0.0-alpha7';
   }
@@ -103,0 +131,0 @@

theme/lumo/vaadin-login-styles.js

@@ -66,3 +66,3 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 
-      [name="footer"] {
+      [part="footer"] {
         font-size: var(--lumo-font-size-xs);
@@ -69,0 +69,0 @@ line-height: var(--lumo-line-height-s);

No alert changes

Improved metrics

Total package byte prevSize

45723

increased by6.99%

Lines of code

857

increased by8.34%

Worsened metrics

Number of lines in readme file

138

decreased by-1.43%

No dependency changes