@vaadin/vaadin-crud 1.3.0 → 1.3.2

package/README.md

@@ -1,23 +1,19 @@
-[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-crud)](https://www.npmjs.com/package/@vaadin/vaadin-crud)
-[![Bower version](https://badgen.net/github/release/vaadin/vaadin-crud)](https://github.com/vaadin/vaadin-crud/releases)
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-crud)
-[![Build Status](https://travis-ci.org/vaadin/vaadin-crud.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-crud)
-[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-crud/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-crud?branch=master)
-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+# <vaadin-crud>
 
- [![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-crud)
-[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadin-crud-directory-urlidentifier.svg)](https://vaadin.com/directory/component/vaadinvaadin-crud)
+> ⚠️ Starting from Vaadin 20, the source code and issues for this component are migrated to the [`vaadin/web-components`](https://github.com/vaadin/web-components/tree/master/packages/vaadin-crud) monorepository.
+> This repository contains the source code and releases of `<vaadin-crud>` for the Vaadin versions 10 to 19.
 
-# &lt;vaadin-crud&gt;
+[&lt;vaadin-crud&gt;](https://vaadin.com/components/vaadin-crud) is a Web Component for
+[CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.
+It is part of the [Vaadin components](https://vaadin.com/components).
 
 [Live Demo ↗](https://vaadin.com/components/vaadin-crud/html-examples)
 |
 [API documentation ↗](https://vaadin.com/components/vaadin-crud/html-api)
 
-
-[&lt;vaadin-crud&gt;](https://vaadin.com/components/vaadin-crud) is a Web Component for
-[CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.
-It is part of the [Vaadin components](https://vaadin.com/components).
+[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-crud)](https://www.npmjs.com/package/@vaadin/vaadin-crud)
+[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-crud)
+[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
 <vaadin-crud items='[{"name": "Juan", "surname": "Garcia"}]'>

package/package.json

@@ -10,10 +10,11 @@
   "repository": "vaadin/vaadin-crud",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-crud",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "main": "vaadin-crud.js",
   "author": "Vaadin Ltd",
   "license": "https://raw.githubusercontent.com/vaadin/vaadin-crud/master/LICENSE",
+  "cvdlName": "vaadin-crud",
   "bugs": {
     "url": "https://github.com/vaadin/vaadin-crud/issues"
   },
@@ -45,15 +46,18 @@
     "@vaadin/vaadin-confirm-dialog": "^1.3.0",
     "@vaadin/vaadin-license-checker": "^2.1.0"
   },
-  "scripts": {
-    "generate-typings": "gen-typescript-declarations --outDir . --verify"
-  },
   "devDependencies": {
+    "@web-padawan/gen-typescript-declarations": "^1.6.2",
+    "web-component-tester": "6.9.2",
     "@polymer/iron-component-page": "^4.0.0",
     "@webcomponents/webcomponentsjs": "^2.0.0",
     "wct-browser-legacy": "^1.0.1",
     "@vaadin/vaadin-demo-helpers": "^3.1.0",
     "@vaadin/vaadin-combo-box": "^5.3.0",
     "@vaadin/vaadin-notification": "^1.6.0"
+  },
+  "scripts": {
+    "generate-typings": "gen-typescript-declarations --outDir . --verify",
+    "test": "wct --npm"
   }
 }

package/src/vaadin-crud.js

@@ -174,7 +174,7 @@ class CrudElement extends ElementMixin(ThemableMixin(PolymerElement)) {
           </slot>
         </div>
       </div>
-      <vaadin-dialog-layout theme\$="[[theme]]" id="dialog" no-close-on-outside-click="[[__isDirty]]" no-close-on-esc="[[__isDirty]]" opened="{{editorOpened}}" editor-position\$="{{editorPosition}}" mobile="[[__mobile]]" theme="crud">
+      <vaadin-dialog-layout theme\$="[[theme]]" form="[[_form]]" id="dialog" no-close-on-outside-click="[[__isDirty]]" no-close-on-esc="[[__isDirty]]" opened="{{editorOpened}}" editor-position\$="{{editorPosition}}" mobile="[[__mobile]]" theme="crud">
         <h3 slot="header">[[__computeEditorHeader(__isNew, i18n.newItem, i18n.editItem)]]</h3>
         <div id="editor">
           <slot name="form">
@@ -203,7 +203,11 @@ class CrudElement extends ElementMixin(ThemableMixin(PolymerElement)) {
   }
 
   static get version() {
-    return '1.3.0';
+    return '1.3.2';
+  }
+
+  static get cvdlName() {
+    return 'vaadin-crud';
   }
 
   static get properties() {
@@ -593,10 +597,6 @@ class CrudElement extends ElementMixin(ThemableMixin(PolymerElement)) {
     if (this.editedItem) {
       this.__onItemChange(this.editedItem);
     }
-    if (this.$.form != form) {
-      // move slotted from this to the slot parent
-      this.$.editor.appendChild(form);
-    }
     form.addEventListener('change', this.__changeListener);
     form.addEventListener('input', this.__changeListener);
   }

package/src/vaadin-dialog-layout.js

@@ -160,6 +160,8 @@ const DialogLayout = (() =>
         noCloseOnOutsideClick: Boolean,
         /** Disable closing when user presses escape */
         noCloseOnEsc: Boolean,
+        /** Reference to the edit form */
+        form: Object,
         mobile: {
           type: Boolean,
           observer: '__mobileChanged',
@@ -173,6 +175,8 @@ const DialogLayout = (() =>
       super.ready();
       this._dialogOpenedChangedListener = this._dialogOpenedChangedListener.bind(this);
       this.$.dialog.addEventListener('opened-changed', this._dialogOpenedChangedListener);
+      this.__header = this.querySelector('[slot="header"]');
+      this.__footer = Array.from(this.querySelectorAll('[slot="footer"]'));
     }
 
     _dialogOpenedChangedListener() {
@@ -192,29 +196,47 @@ const DialogLayout = (() =>
       this._ensureChildren();
     }
 
+    __moveChildNodes(target) {
+      // Teleport header node
+      target.appendChild(this.__header);
+
+      // For custom form, remove slot attribute
+      // so that it is properly moved to dialog.
+      if (this.form.hasAttribute('slot')) {
+        this.form.removeAttribute('slot');
+      }
+
+      // Teleport edit form
+      target.appendChild(this.form);
+
+      // Teleport footer nodes
+      this.__footer.forEach(node => target.appendChild(node));
+
+      window.ShadyDOM && window.ShadyDOM.flush();
+
+      // Wait to set label until slotted element has been moved.
+      setTimeout(() => {
+        this.__ariaLabel = this.__header.textContent.trim();
+      });
+    }
+
     _ensureChildren() {
-      if (!this.$.dialog.$.overlay.$.content.shadowRoot) {
+      if (!this.form) {
         return;
       }
 
-      if (this.editorPosition === '' || this.mobile) {
-        // Move children from editor to dialog
-        Array.from(this.$.editor.childNodes).forEach(c => this.$.dialog.$.overlay.$.content.shadowRoot.appendChild(c));
-        Array.from(this.childNodes).forEach(c => this.$.dialog.$.overlay.$.content.appendChild(c));
+      const content = this.$.dialog.$.overlay.$.content;
 
-        // Wait to set label until slotted element have been moved.
-        setTimeout(() =>
-          this.__ariaLabel = Array.from(this.$.dialog.$.overlay.$.content.querySelectorAll('[slot=header]'))
-            .reduce((prev, ele) => prev + ' ' + ele.textContent, '').trim());
+      if ((this.editorPosition === '' || this.mobile) && content.shadowRoot) {
+        // Move children from editor to dialog
+        Array.from(this.$.editor.childNodes).forEach(node => content.shadowRoot.appendChild(node));
+        this.__moveChildNodes(content);
       } else {
         // Move children from dialog to editor
-        Array.from(this.$.dialog.$.overlay.$.content.shadowRoot.childNodes).forEach(c => this.$.editor.appendChild(c));
-        Array.from(this.$.dialog.$.overlay.$.content.childNodes).forEach(c => this.appendChild(c));
-
-        // Wait to set label until slotted element have been moved.
-        setTimeout(() =>
-          this.__ariaLabel = Array.from(this.querySelectorAll('[slot=header]'))
-            .reduce((prev, ele) => prev + ' ' + ele.textContent, '').trim());
+        if (content.shadowRoot) {
+          Array.from(content.shadowRoot.childNodes).forEach(node => this.$.editor.appendChild(node));
+        }
+        this.__moveChildNodes(this);
       }
     }