From 242df2b587ec6858a8345adfed789122a72109d9 Mon Sep 17 00:00:00 2001 From: Tomi Virkki Date: Fri, 20 Dec 2024 10:37:09 +0200 Subject: [PATCH] experiment: add LitElement based version of vaadin-crud (#8346) --- packages/crud/src/vaadin-crud-edit-column.js | 18 +-- packages/crud/src/vaadin-crud-form.js | 25 +--- packages/crud/src/vaadin-crud-grid-mixin.js | 1 + packages/crud/src/vaadin-crud-helpers.js | 44 ++++++ .../crud/src/vaadin-crud-include-mixin.js | 2 + packages/crud/src/vaadin-crud-mixin.js | 12 +- packages/crud/src/vaadin-lit-crud-dialog.d.ts | 11 ++ packages/crud/src/vaadin-lit-crud-dialog.js | 128 ++++++++++++++++++ .../crud/src/vaadin-lit-crud-edit-column.d.ts | 11 ++ .../crud/src/vaadin-lit-crud-edit-column.js | 70 ++++++++++ packages/crud/src/vaadin-lit-crud-edit.d.ts | 11 ++ packages/crud/src/vaadin-lit-crud-edit.js | 75 ++++++++++ packages/crud/src/vaadin-lit-crud-form.d.ts | 11 ++ packages/crud/src/vaadin-lit-crud-form.js | 80 +++++++++++ packages/crud/src/vaadin-lit-crud-grid.d.ts | 11 ++ packages/crud/src/vaadin-lit-crud-grid.js | 35 +++++ packages/crud/src/vaadin-lit-crud.js | 122 +++++++++++++++++ packages/crud/test/a11y-lit.test.js | 2 + packages/crud/test/a11y-polymer.test.js | 2 + .../test/{a11y.test.js => a11y.common.js} | 1 - packages/crud/test/crud-buttons-lit.test.js | 2 + .../crud/test/crud-buttons-polymer.test.js | 2 + ...buttons.test.js => crud-buttons.common.js} | 7 +- packages/crud/test/crud-editor-lit.test.js | 2 + .../crud/test/crud-editor-polymer.test.js | 2 + ...d-editor.test.js => crud-editor.common.js} | 3 +- packages/crud/test/crud-form-lit.test.js | 2 + packages/crud/test/crud-form-polymer.test.js | 2 + ...{crud-form.test.js => crud-form.common.js} | 1 - packages/crud/test/crud-grid-lit.test.js | 2 + packages/crud/test/crud-grid-polymer.test.js | 2 + .../test/crud-grid-properties-lit.test.js | 2 + .../test/crud-grid-properties-polymer.test.js | 2 + ...test.js => crud-grid-properties.common.js} | 1 - ...{crud-grid.test.js => crud-grid.common.js} | 3 +- packages/crud/test/crud-lit.test.js | 2 + packages/crud/test/crud-polymer.test.js | 2 + .../test/{crud.test.js => crud.common.js} | 4 +- packages/crud/theme/lumo/vaadin-lit-crud.js | 8 ++ .../crud/theme/material/vaadin-lit-crud.js | 8 ++ packages/crud/vaadin-lit-crud-edit .js | 1 + packages/crud/vaadin-lit-crud-edit-column.js | 1 + packages/crud/vaadin-lit-crud.js | 2 + 43 files changed, 684 insertions(+), 51 deletions(-) create mode 100644 packages/crud/src/vaadin-lit-crud-dialog.d.ts create mode 100644 packages/crud/src/vaadin-lit-crud-dialog.js create mode 100644 packages/crud/src/vaadin-lit-crud-edit-column.d.ts create mode 100644 packages/crud/src/vaadin-lit-crud-edit-column.js create mode 100644 packages/crud/src/vaadin-lit-crud-edit.d.ts create mode 100644 packages/crud/src/vaadin-lit-crud-edit.js create mode 100644 packages/crud/src/vaadin-lit-crud-form.d.ts create mode 100644 packages/crud/src/vaadin-lit-crud-form.js create mode 100644 packages/crud/src/vaadin-lit-crud-grid.d.ts create mode 100644 packages/crud/src/vaadin-lit-crud-grid.js create mode 100644 packages/crud/src/vaadin-lit-crud.js create mode 100644 packages/crud/test/a11y-lit.test.js create mode 100644 packages/crud/test/a11y-polymer.test.js rename packages/crud/test/{a11y.test.js => a11y.common.js} (99%) create mode 100644 packages/crud/test/crud-buttons-lit.test.js create mode 100644 packages/crud/test/crud-buttons-polymer.test.js rename packages/crud/test/{crud-buttons.test.js => crud-buttons.common.js} (99%) create mode 100644 packages/crud/test/crud-editor-lit.test.js create mode 100644 packages/crud/test/crud-editor-polymer.test.js rename packages/crud/test/{crud-editor.test.js => crud-editor.common.js} (98%) create mode 100644 packages/crud/test/crud-form-lit.test.js create mode 100644 packages/crud/test/crud-form-polymer.test.js rename packages/crud/test/{crud-form.test.js => crud-form.common.js} (99%) create mode 100644 packages/crud/test/crud-grid-lit.test.js create mode 100644 packages/crud/test/crud-grid-polymer.test.js create mode 100644 packages/crud/test/crud-grid-properties-lit.test.js create mode 100644 packages/crud/test/crud-grid-properties-polymer.test.js rename packages/crud/test/{crud-grid-properties.test.js => crud-grid-properties.common.js} (99%) rename packages/crud/test/{crud-grid.test.js => crud-grid.common.js} (99%) create mode 100644 packages/crud/test/crud-lit.test.js create mode 100644 packages/crud/test/crud-polymer.test.js rename packages/crud/test/{crud.test.js => crud.common.js} (99%) create mode 100644 packages/crud/theme/lumo/vaadin-lit-crud.js create mode 100644 packages/crud/theme/material/vaadin-lit-crud.js create mode 100644 packages/crud/vaadin-lit-crud-edit .js create mode 100644 packages/crud/vaadin-lit-crud-edit-column.js create mode 100644 packages/crud/vaadin-lit-crud.js diff --git a/packages/crud/src/vaadin-crud-edit-column.js b/packages/crud/src/vaadin-crud-edit-column.js index 9110084fd7..498dbe8b83 100644 --- a/packages/crud/src/vaadin-crud-edit-column.js +++ b/packages/crud/src/vaadin-crud-edit-column.js @@ -11,6 +11,7 @@ import './vaadin-crud-edit.js'; import { defineCustomElement } from '@vaadin/component-base/src/define.js'; import { GridColumn } from '@vaadin/grid/src/vaadin-grid-column.js'; +import { editColumnDefaultRenderer } from './vaadin-crud-helpers.js'; /** * `` is a helper element for the `` @@ -69,21 +70,8 @@ class CrudEditColumn extends GridColumn { * * @override */ - _defaultRenderer(root, _column) { - let edit = root.firstElementChild; - if (!edit) { - edit = document.createElement('vaadin-crud-edit'); - if (this.hasAttribute('theme')) { - edit.setAttribute('theme', this.getAttribute('theme')); - } - root.appendChild(edit); - } - - if (this.ariaLabel) { - edit.setAttribute('aria-label', this.ariaLabel); - } else { - edit.removeAttribute('aria-label'); - } + _defaultRenderer(root, column) { + editColumnDefaultRenderer(root, column); } } diff --git a/packages/crud/src/vaadin-crud-form.js b/packages/crud/src/vaadin-crud-form.js index 161f14d46d..0aff6f99ef 100644 --- a/packages/crud/src/vaadin-crud-form.js +++ b/packages/crud/src/vaadin-crud-form.js @@ -11,7 +11,7 @@ import '@vaadin/text-field/src/vaadin-text-field.js'; import { defineCustomElement } from '@vaadin/component-base/src/define.js'; import { FormLayout } from '@vaadin/form-layout/src/vaadin-form-layout.js'; -import { capitalize } from './vaadin-crud-helpers.js'; +import { createField, createFields } from './vaadin-crud-helpers.js'; import { IncludedMixin } from './vaadin-crud-include-mixin.js'; /** @@ -64,31 +64,12 @@ class CrudForm extends IncludedMixin(FormLayout) { /** @private */ __createField(parent, path) { - const field = document.createElement('vaadin-text-field'); - field.label = capitalize(path); - field.path = path; - field.required = true; - parent.appendChild(field); - this._fields.push(field); - return field; + return createField(this, parent, path); } /** @private */ __createFields(parent, object, path) { - Object.keys(object).forEach((prop) => { - if (!this.include && this.exclude && this.exclude.test(prop)) { - return; - } - const newPath = (path ? `${path}.` : '') + prop; - if (object[prop] && typeof object[prop] === 'object') { - this.__createFields(parent, object[prop], newPath); - } else { - this.__createField(parent, newPath); - } - }); - if (!this._fields.length) { - this._fields = undefined; - } + return createFields(this, parent, object, path); } } diff --git a/packages/crud/src/vaadin-crud-grid-mixin.js b/packages/crud/src/vaadin-crud-grid-mixin.js index 0bd1c34d88..2bc42a04b0 100644 --- a/packages/crud/src/vaadin-crud-grid-mixin.js +++ b/packages/crud/src/vaadin-crud-grid-mixin.js @@ -45,6 +45,7 @@ export const CrudGridMixin = (superClass) => */ hideEditColumn: { type: Boolean, + sync: true, }, }; } diff --git a/packages/crud/src/vaadin-crud-helpers.js b/packages/crud/src/vaadin-crud-helpers.js index 068090e558..e945d9c8f1 100644 --- a/packages/crud/src/vaadin-crud-helpers.js +++ b/packages/crud/src/vaadin-crud-helpers.js @@ -66,3 +66,47 @@ export function setProperty(path, value, obj) { export function isValidEditorPosition(editorPosition) { return ['bottom', 'aside'].includes(editorPosition); } + +export function editColumnDefaultRenderer(root, column) { + let edit = root.firstElementChild; + if (!edit) { + edit = document.createElement('vaadin-crud-edit'); + if (column.hasAttribute('theme')) { + edit.setAttribute('theme', column.getAttribute('theme')); + } + root.appendChild(edit); + } + + if (column.ariaLabel) { + edit.setAttribute('aria-label', column.ariaLabel); + } else { + edit.removeAttribute('aria-label'); + } +} + +export function createField(crudForm, parent, path) { + const field = document.createElement('vaadin-text-field'); + field.label = capitalize(path); + field.path = path; + field.required = true; + parent.appendChild(field); + crudForm._fields.push(field); + return field; +} + +export function createFields(crudForm, parent, object, path) { + Object.keys(object).forEach((prop) => { + if (!crudForm.include && crudForm.exclude && crudForm.exclude.test(prop)) { + return; + } + const newPath = (path ? `${path}.` : '') + prop; + if (object[prop] && typeof object[prop] === 'object') { + createFields(crudForm, parent, object[prop], newPath); + } else { + createField(crudForm, parent, newPath); + } + }); + if (!crudForm._fields.length) { + crudForm._fields = undefined; + } +} diff --git a/packages/crud/src/vaadin-crud-include-mixin.js b/packages/crud/src/vaadin-crud-include-mixin.js index d5ef67e015..923b60dafc 100644 --- a/packages/crud/src/vaadin-crud-include-mixin.js +++ b/packages/crud/src/vaadin-crud-include-mixin.js @@ -29,6 +29,7 @@ export const IncludedMixin = (superClass) => exclude: { value: '^_', observer: '__onExcludeChange', + sync: true, }, /** @@ -40,6 +41,7 @@ export const IncludedMixin = (superClass) => */ include: { observer: '__onIncludeChange', + sync: true, }, }; } diff --git a/packages/crud/src/vaadin-crud-mixin.js b/packages/crud/src/vaadin-crud-mixin.js index eb8c900662..bf8228e160 100644 --- a/packages/crud/src/vaadin-crud-mixin.js +++ b/packages/crud/src/vaadin-crud-mixin.js @@ -100,6 +100,7 @@ export const CrudMixin = (superClass) => type: Object, observer: '__editedItemChanged', notify: true, + sync: true, }, /** @@ -117,6 +118,7 @@ export const CrudMixin = (superClass) => value: '', reflectToAttribute: true, observer: '__editorPositionChanged', + sync: true, }, /** @@ -128,6 +130,7 @@ export const CrudMixin = (superClass) => editOnClick: { type: Boolean, value: false, + sync: true, }, /** @@ -194,6 +197,7 @@ export const CrudMixin = (superClass) => reflectToAttribute: true, notify: true, observer: '__editorOpenedChanged', + sync: true, }, /** @@ -218,6 +222,7 @@ export const CrudMixin = (superClass) => type: Boolean, value: false, reflectToAttribute: true, + sync: true, }, /** @@ -261,6 +266,7 @@ export const CrudMixin = (superClass) => */ i18n: { type: Object, + sync: true, value() { return { newItem: 'New item', @@ -295,7 +301,10 @@ export const CrudMixin = (superClass) => __dialogAriaLabel: String, /** @private */ - __isDirty: Boolean, + __isDirty: { + type: Boolean, + sync: true, + }, /** @private */ __isNew: Boolean, @@ -307,6 +316,7 @@ export const CrudMixin = (superClass) => _fullscreen: { type: Boolean, observer: '__fullscreenChanged', + sync: true, }, /** diff --git a/packages/crud/src/vaadin-lit-crud-dialog.d.ts b/packages/crud/src/vaadin-lit-crud-dialog.d.ts new file mode 100644 index 0000000000..58f7379362 --- /dev/null +++ b/packages/crud/src/vaadin-lit-crud-dialog.d.ts @@ -0,0 +1,11 @@ +/** + * @license + * Copyright (c) 2000 - 2024 Vaadin Ltd. + * + * This program is available under Vaadin Commercial License and Service Terms. + * + * + * See https://vaadin.com/commercial-license-and-service-terms for the full + * license. + */ +export * from './vaadin-crud-dialog.js'; diff --git a/packages/crud/src/vaadin-lit-crud-dialog.js b/packages/crud/src/vaadin-lit-crud-dialog.js new file mode 100644 index 0000000000..5fda824293 --- /dev/null +++ b/packages/crud/src/vaadin-lit-crud-dialog.js @@ -0,0 +1,128 @@ +/** + * @license + * Copyright (c) 2000 - 2024 Vaadin Ltd. + * + * This program is available under Vaadin Commercial License and Service Terms. + * + * + * See https://vaadin.com/commercial-license-and-service-terms for the full + * license. + */ +import { css, html, LitElement } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import { defineCustomElement } from '@vaadin/component-base/src/define.js'; +import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js'; +import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js'; +import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; +import { DialogBaseMixin } from '@vaadin/dialog/src/vaadin-dialog-base-mixin.js'; +import { dialogOverlay, resizableOverlay } from '@vaadin/dialog/src/vaadin-dialog-styles.js'; +import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js'; +import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js'; +import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; +import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js'; +import { crudDialogOverlayStyles } from './vaadin-crud-styles.js'; + +/** + * An element used internally by ``. Not intended to be used separately. + * + * @extends HTMLElement + * @mixes DirMixin + * @mixes OverlayMixin + * @mixes ThemableMixin + * @private + */ +class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) { + static get is() { + return 'vaadin-crud-dialog-overlay'; + } + + static get styles() { + return [overlayStyles, dialogOverlay, resizableOverlay, crudDialogOverlayStyles]; + } + + /** @protected */ + render() { + return html` +
+
+
+
+
+ +
+
+ + + +
+
+
+ `; + } + + /** + * @protected + * @override + */ + ready() { + super.ready(); + + // CRUD has header and footer but does not use renderers + this.setAttribute('has-header', ''); + this.setAttribute('has-footer', ''); + } +} + +defineCustomElement(CrudDialogOverlay); + +/** + * An element used internally by ``. Not intended to be used separately. + * @private + */ +class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolylitMixin(LitElement)))) { + static get is() { + return 'vaadin-crud-dialog'; + } + + static get styles() { + return css` + :host { + display: none; + } + `; + } + + static get properties() { + return { + ariaLabel: { + type: String, + }, + + fullscreen: { + type: Boolean, + }, + }; + } + + /** @protected */ + render() { + return html` + + `; + } +} + +defineCustomElement(CrudDialog); diff --git a/packages/crud/src/vaadin-lit-crud-edit-column.d.ts b/packages/crud/src/vaadin-lit-crud-edit-column.d.ts new file mode 100644 index 0000000000..ed14b3934e --- /dev/null +++ b/packages/crud/src/vaadin-lit-crud-edit-column.d.ts @@ -0,0 +1,11 @@ +/** + * @license + * Copyright (c) 2000 - 2024 Vaadin Ltd. + * + * This program is available under Vaadin Commercial License and Service Terms. + * + * + * See https://vaadin.com/commercial-license-and-service-terms for the full + * license. + */ +export * from './vaadin-crud-edit-column.js'; diff --git a/packages/crud/src/vaadin-lit-crud-edit-column.js b/packages/crud/src/vaadin-lit-crud-edit-column.js new file mode 100644 index 0000000000..bce40d974b --- /dev/null +++ b/packages/crud/src/vaadin-lit-crud-edit-column.js @@ -0,0 +1,70 @@ +/** + * @license + * Copyright (c) 2000 - 2024 Vaadin Ltd. + * + * This program is available under Vaadin Commercial License and Service Terms. + * + * + * See https://vaadin.com/commercial-license-and-service-terms for the full + * license. + */ +import './vaadin-lit-crud-edit.js'; +import { defineCustomElement } from '@vaadin/component-base/src/define.js'; +import { GridColumn } from '@vaadin/grid/src/vaadin-lit-grid-column.js'; +import { editColumnDefaultRenderer } from './vaadin-crud-helpers.js'; + +/** + * LitElement based version of `` web component. + * + * ## Disclaimer + * + * This component is an experiment and not yet a part of Vaadin platform. + * There is no ETA regarding specific Vaadin version where it'll land. + */ +class CrudEditColumn extends GridColumn { + static get is() { + return 'vaadin-crud-edit-column'; + } + + static get properties() { + return { + /** + * Width of the cells for this column. + * @private + */ + width: { + type: String, + value: '4rem', + }, + + /** + * Flex grow ratio for the cell widths. When set to 0, cell width is fixed. + * @private + */ + flexGrow: { + type: Number, + value: 0, + }, + + /** The arial-label for the edit button */ + ariaLabel: String, + }; + } + + static get observers() { + return ['_onRendererOrBindingChanged(_renderer, _cells, _bodyContentHidden, _cells.*, path, ariaLabel)']; + } + + /** + * Renders the crud edit element to the body cell. + * + * @override + */ + _defaultRenderer(root, column) { + editColumnDefaultRenderer(root, column); + } +} + +defineCustomElement(CrudEditColumn); + +export { CrudEditColumn }; diff --git a/packages/crud/src/vaadin-lit-crud-edit.d.ts b/packages/crud/src/vaadin-lit-crud-edit.d.ts new file mode 100644 index 0000000000..be0c5bf911 --- /dev/null +++ b/packages/crud/src/vaadin-lit-crud-edit.d.ts @@ -0,0 +1,11 @@ +/** + * @license + * Copyright (c) 2000 - 2024 Vaadin Ltd. + * + * This program is available under Vaadin Commercial License and Service Terms. + * + * + * See https://vaadin.com/commercial-license-and-service-terms for the full + * license. + */ +export * from './vaadin-crud-edit.js'; diff --git a/packages/crud/src/vaadin-lit-crud-edit.js b/packages/crud/src/vaadin-lit-crud-edit.js new file mode 100644 index 0000000000..04a63a81f4 --- /dev/null +++ b/packages/crud/src/vaadin-lit-crud-edit.js @@ -0,0 +1,75 @@ +/** + * @license + * Copyright (c) 2000 - 2024 Vaadin Ltd. + * + * This program is available under Vaadin Commercial License and Service Terms. + * + * + * See https://vaadin.com/commercial-license-and-service-terms for the full + * license. + */ + +import { html } from 'lit'; +import { Button } from '@vaadin/button/src/vaadin-lit-button.js'; +import { defineCustomElement } from '@vaadin/component-base/src/define.js'; +import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; + +/** + * LitElement based version of `` web component. + * + * ## Disclaimer + * + * This component is an experiment and not yet a part of Vaadin platform. + * There is no ETA regarding specific Vaadin version where it'll land. + */ +class CrudEdit extends Button { + static get is() { + return 'vaadin-crud-edit'; + } + + static get styles() { + return [ + super.styles, + css` + :host { + display: block; + } + `, + ]; + } + + /** @protected */ + render() { + return html` +
+ + `; + } + + /** @protected */ + ready() { + super.ready(); + this.addEventListener('click', this.__onClick); + this.setAttribute('aria-label', 'Edit'); + } + + /** @private */ + __onClick(e) { + const tr = e.target.parentElement.assignedSlot.parentElement.parentElement; + tr.dispatchEvent( + new CustomEvent('edit', { detail: { item: tr._item, index: tr.index }, bubbles: true, composed: true }), + ); + } + + /** + * Fired when user on the icon. + * + * @event edit + * @param {Object} detail.item the item to edit + * @param {Object} detail.index the index of the item in the data set + */ +} + +defineCustomElement(CrudEdit); + +export { CrudEdit }; diff --git a/packages/crud/src/vaadin-lit-crud-form.d.ts b/packages/crud/src/vaadin-lit-crud-form.d.ts new file mode 100644 index 0000000000..c5d89d5e32 --- /dev/null +++ b/packages/crud/src/vaadin-lit-crud-form.d.ts @@ -0,0 +1,11 @@ +/** + * @license + * Copyright (c) 2000 - 2024 Vaadin Ltd. + * + * This program is available under Vaadin Commercial License and Service Terms. + * + * + * See https://vaadin.com/commercial-license-and-service-terms for the full + * license. + */ +export * from './vaadin-crud-form.js'; diff --git a/packages/crud/src/vaadin-lit-crud-form.js b/packages/crud/src/vaadin-lit-crud-form.js new file mode 100644 index 0000000000..4eaab6f00a --- /dev/null +++ b/packages/crud/src/vaadin-lit-crud-form.js @@ -0,0 +1,80 @@ +/** + * @license + * Copyright (c) 2000 - 2024 Vaadin Ltd. + * + * This program is available under Vaadin Commercial License and Service Terms. + * + * + * See https://vaadin.com/commercial-license-and-service-terms for the full + * license. + */ +import '@vaadin/text-field/src/vaadin-lit-text-field.js'; +import { defineCustomElement } from '@vaadin/component-base/src/define.js'; +import { FormLayout } from '@vaadin/form-layout/src/vaadin-lit-form-layout.js'; +import { createField, createFields } from './vaadin-crud-helpers.js'; +import { IncludedMixin } from './vaadin-crud-include-mixin.js'; + +/** + * An element used internally by ``. Not intended to be used separately. + * + * @extends FormLayout + * @mixes IncludedMixin + * @private + */ +class CrudForm extends IncludedMixin(FormLayout) { + static get is() { + return 'vaadin-crud-form'; + } + + static get properties() { + return { + /** + * The item being edited. + * @type {unknown} + */ + item: { + type: Object, + sync: true, + }, + }; + } + + static get observers() { + return ['__onItemChange(item)']; + } + + /** + * Auto-generate form fields based on the JSON structure of the object provided. + * + * If not called, the method will be executed the first time an item is assigned. + * @param {unknown} object + * @protected + */ + _configure(object) { + this.innerHTML = ''; + this._fields = []; + this.__createFields(this, object); + this._updateLayout(); + } + + /** @private */ + __onItemChange(item) { + if (!this._fields) { + this._configure(item); + } + } + + /** @private */ + __createField(parent, path) { + return createField(this, parent, path); + } + + /** @private */ + __createFields(parent, object, path) { + return createFields(this, parent, object, path); + } +} + +defineCustomElement(CrudForm); + +export { CrudForm }; diff --git a/packages/crud/src/vaadin-lit-crud-grid.d.ts b/packages/crud/src/vaadin-lit-crud-grid.d.ts new file mode 100644 index 0000000000..9869db5c41 --- /dev/null +++ b/packages/crud/src/vaadin-lit-crud-grid.d.ts @@ -0,0 +1,11 @@ +/** + * @license + * Copyright (c) 2000 - 2024 Vaadin Ltd. + * + * This program is available under Vaadin Commercial License and Service Terms. + * + * + * See https://vaadin.com/commercial-license-and-service-terms for the full + * license. + */ +export * from './vaadin-crud-grid.js'; diff --git a/packages/crud/src/vaadin-lit-crud-grid.js b/packages/crud/src/vaadin-lit-crud-grid.js new file mode 100644 index 0000000000..49ad7c6008 --- /dev/null +++ b/packages/crud/src/vaadin-lit-crud-grid.js @@ -0,0 +1,35 @@ +/** + * @license + * Copyright (c) 2000 - 2024 Vaadin Ltd. + * + * This program is available under Vaadin Commercial License and Service Terms. + * + * + * See https://vaadin.com/commercial-license-and-service-terms for the full + * license. + */ +import '@vaadin/grid/src/vaadin-lit-grid-column-group.js'; +import '@vaadin/grid/src/vaadin-lit-grid-column.js'; +import '@vaadin/grid/src/vaadin-lit-grid-filter.js'; +import '@vaadin/grid/src/vaadin-lit-grid-sorter.js'; +import './vaadin-lit-crud-edit-column.js'; +import { defineCustomElement } from '@vaadin/component-base/src/define.js'; +import { Grid } from '@vaadin/grid/src/vaadin-lit-grid.js'; +import { CrudGridMixin } from './vaadin-crud-grid-mixin.js'; + +/** + * An element used internally by ``. Not intended to be used separately. + * + * @extends Grid + * @mixes CrudGridMixin + * @private + */ +class CrudGrid extends CrudGridMixin(Grid) { + static get is() { + return 'vaadin-crud-grid'; + } +} + +defineCustomElement(CrudGrid); + +export { CrudGrid }; diff --git a/packages/crud/src/vaadin-lit-crud.js b/packages/crud/src/vaadin-lit-crud.js new file mode 100644 index 0000000000..470b371910 --- /dev/null +++ b/packages/crud/src/vaadin-lit-crud.js @@ -0,0 +1,122 @@ +/** + * @license + * Copyright (c) 2000 - 2024 Vaadin Ltd. + * + * This program is available under Vaadin Commercial License and Service Terms. + * + * + * See https://vaadin.com/commercial-license-and-service-terms for the full + * license. + */ +import '@vaadin/button/src/vaadin-lit-button.js'; +import '@vaadin/confirm-dialog/src/vaadin-lit-confirm-dialog.js'; +import './vaadin-lit-crud-dialog.js'; +import './vaadin-lit-crud-grid.js'; +import './vaadin-lit-crud-form.js'; +import { html, LitElement } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js'; +import { defineCustomElement } from '@vaadin/component-base/src/define.js'; +import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; +import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; +import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; +import { CrudMixin } from './vaadin-crud-mixin.js'; +import { crudStyles } from './vaadin-crud-styles.js'; + +/** + * LitElement based version of `` web component. + * + * ## Disclaimer + * + * This component is an experiment and not yet a part of Vaadin platform. + * There is no ETA regarding specific Vaadin version where it'll land. + */ +class Crud extends ControllerMixin(ElementMixin(ThemableMixin(CrudMixin(PolylitMixin(LitElement))))) { + static get styles() { + return crudStyles; + } + + /** @protected */ + render() { + return html` +
+
+ + +
+ + +
+
+ +
+
+ + +
+ +
+ + + +
+
+
+ + + + + + + `; + } + + static get is() { + return 'vaadin-crud'; + } + + static get cvdlName() { + return 'vaadin-crud'; + } +} + +defineCustomElement(Crud); + +export { Crud }; diff --git a/packages/crud/test/a11y-lit.test.js b/packages/crud/test/a11y-lit.test.js new file mode 100644 index 0000000000..c8ac3e9791 --- /dev/null +++ b/packages/crud/test/a11y-lit.test.js @@ -0,0 +1,2 @@ +import '../src/vaadin-lit-crud.js'; +import './a11y.common.js'; diff --git a/packages/crud/test/a11y-polymer.test.js b/packages/crud/test/a11y-polymer.test.js new file mode 100644 index 0000000000..0f630b6cfb --- /dev/null +++ b/packages/crud/test/a11y-polymer.test.js @@ -0,0 +1,2 @@ +import '../src/vaadin-crud.js'; +import './a11y.common.js'; diff --git a/packages/crud/test/a11y.test.js b/packages/crud/test/a11y.common.js similarity index 99% rename from packages/crud/test/a11y.test.js rename to packages/crud/test/a11y.common.js index d0fe0615e1..afdb283bba 100644 --- a/packages/crud/test/a11y.test.js +++ b/packages/crud/test/a11y.common.js @@ -2,7 +2,6 @@ import { expect } from '@vaadin/chai-plugins'; import { fixtureSync, nextRender } from '@vaadin/testing-helpers'; import { setViewport } from '@web/test-runner-commands'; import { sendKeys } from '@web/test-runner-commands'; -import '../src/vaadin-crud.js'; import { getDeepActiveElement } from '@vaadin/a11y-base/src/focus-utils.js'; import { getVisibleRows } from './helpers.js'; diff --git a/packages/crud/test/crud-buttons-lit.test.js b/packages/crud/test/crud-buttons-lit.test.js new file mode 100644 index 0000000000..af05002c48 --- /dev/null +++ b/packages/crud/test/crud-buttons-lit.test.js @@ -0,0 +1,2 @@ +import '../src/vaadin-lit-crud.js'; +import './crud-buttons.common.js'; diff --git a/packages/crud/test/crud-buttons-polymer.test.js b/packages/crud/test/crud-buttons-polymer.test.js new file mode 100644 index 0000000000..ca6272a4e3 --- /dev/null +++ b/packages/crud/test/crud-buttons-polymer.test.js @@ -0,0 +1,2 @@ +import '../src/vaadin-crud.js'; +import './crud-buttons.common.js'; diff --git a/packages/crud/test/crud-buttons.test.js b/packages/crud/test/crud-buttons.common.js similarity index 99% rename from packages/crud/test/crud-buttons.test.js rename to packages/crud/test/crud-buttons.common.js index ebc7e271b4..3fa2c14b39 100644 --- a/packages/crud/test/crud-buttons.test.js +++ b/packages/crud/test/crud-buttons.common.js @@ -1,8 +1,7 @@ import { expect } from '@vaadin/chai-plugins'; -import { aTimeout, change, fire, fixtureSync, listenOnce, nextRender, oneEvent } from '@vaadin/testing-helpers'; +import { aTimeout, change, click, fire, fixtureSync, listenOnce, nextRender, oneEvent } from '@vaadin/testing-helpers'; import { setViewport } from '@web/test-runner-commands'; import sinon from 'sinon'; -import '../src/vaadin-crud.js'; import { flushGrid } from './helpers.js'; describe('crud buttons', () => { @@ -125,7 +124,7 @@ describe('crud buttons', () => { await nextRender(); crud._form._fields[0].value = 'baz'; change(crud._form); - saveButton.click(); + click(saveButton); expect(crud.items[1].foo).to.be.equal('baz'); }); @@ -419,7 +418,7 @@ describe('crud buttons', () => { confirmCancelOverlay = confirmCancelDialog.$.dialog.$.overlay; await nextRender(crud); flushGrid(crud._grid); - crud.set('items', [{ foo: 'bar' }, { foo: 'baz' }]); + crud.items = [{ foo: 'bar' }, { foo: 'baz' }]; }); afterEach(() => { diff --git a/packages/crud/test/crud-editor-lit.test.js b/packages/crud/test/crud-editor-lit.test.js new file mode 100644 index 0000000000..e7aa52bc0e --- /dev/null +++ b/packages/crud/test/crud-editor-lit.test.js @@ -0,0 +1,2 @@ +import '../vaadin-lit-crud.js'; +import './crud-editor.common.js'; diff --git a/packages/crud/test/crud-editor-polymer.test.js b/packages/crud/test/crud-editor-polymer.test.js new file mode 100644 index 0000000000..cba4aeb10d --- /dev/null +++ b/packages/crud/test/crud-editor-polymer.test.js @@ -0,0 +1,2 @@ +import '../vaadin-crud.js'; +import './crud-editor.common.js'; diff --git a/packages/crud/test/crud-editor.test.js b/packages/crud/test/crud-editor.common.js similarity index 98% rename from packages/crud/test/crud-editor.test.js rename to packages/crud/test/crud-editor.common.js index b0fa4995ae..a08ab6c917 100644 --- a/packages/crud/test/crud-editor.test.js +++ b/packages/crud/test/crud-editor.common.js @@ -1,7 +1,6 @@ import { expect } from '@vaadin/chai-plugins'; import { aTimeout, fixtureSync, nextRender } from '@vaadin/testing-helpers'; import { setViewport } from '@web/test-runner-commands'; -import '../vaadin-crud.js'; import { flushGrid } from './helpers.js'; describe('crud editor', () => { @@ -69,7 +68,7 @@ describe('crud editor', () => { await nextRender(crud); flushGrid(crud._grid); - crud.set('items', [{ foo: 'bar' }, { foo: 'baz' }]); + crud.items = [{ foo: 'bar' }, { foo: 'baz' }]; dialog = crud.$.dialog; overlay = dialog.$.overlay; form = crud.querySelector('[slot=form]'); diff --git a/packages/crud/test/crud-form-lit.test.js b/packages/crud/test/crud-form-lit.test.js new file mode 100644 index 0000000000..e4882794f6 --- /dev/null +++ b/packages/crud/test/crud-form-lit.test.js @@ -0,0 +1,2 @@ +import '../src/vaadin-lit-crud-form.js'; +import './crud-form.common.js'; diff --git a/packages/crud/test/crud-form-polymer.test.js b/packages/crud/test/crud-form-polymer.test.js new file mode 100644 index 0000000000..4b3167ff1c --- /dev/null +++ b/packages/crud/test/crud-form-polymer.test.js @@ -0,0 +1,2 @@ +import '../src/vaadin-crud-form.js'; +import './crud-form.common.js'; diff --git a/packages/crud/test/crud-form.test.js b/packages/crud/test/crud-form.common.js similarity index 99% rename from packages/crud/test/crud-form.test.js rename to packages/crud/test/crud-form.common.js index 90aba12ecb..54314540f9 100644 --- a/packages/crud/test/crud-form.test.js +++ b/packages/crud/test/crud-form.common.js @@ -1,6 +1,5 @@ import { expect } from '@vaadin/chai-plugins'; import { fixtureSync, nextRender } from '@vaadin/testing-helpers'; -import '../src/vaadin-crud-form.js'; describe('crud form', () => { let crudForm; diff --git a/packages/crud/test/crud-grid-lit.test.js b/packages/crud/test/crud-grid-lit.test.js new file mode 100644 index 0000000000..3c353ee8c3 --- /dev/null +++ b/packages/crud/test/crud-grid-lit.test.js @@ -0,0 +1,2 @@ +import '../src/vaadin-lit-crud-grid.js'; +import './crud-grid.common.js'; diff --git a/packages/crud/test/crud-grid-polymer.test.js b/packages/crud/test/crud-grid-polymer.test.js new file mode 100644 index 0000000000..e323477b84 --- /dev/null +++ b/packages/crud/test/crud-grid-polymer.test.js @@ -0,0 +1,2 @@ +import '../src/vaadin-crud-grid.js'; +import './crud-grid.common.js'; diff --git a/packages/crud/test/crud-grid-properties-lit.test.js b/packages/crud/test/crud-grid-properties-lit.test.js new file mode 100644 index 0000000000..a27e888e88 --- /dev/null +++ b/packages/crud/test/crud-grid-properties-lit.test.js @@ -0,0 +1,2 @@ +import '../src/vaadin-lit-crud.js'; +import './crud-grid-properties.common.js'; diff --git a/packages/crud/test/crud-grid-properties-polymer.test.js b/packages/crud/test/crud-grid-properties-polymer.test.js new file mode 100644 index 0000000000..62e3596b36 --- /dev/null +++ b/packages/crud/test/crud-grid-properties-polymer.test.js @@ -0,0 +1,2 @@ +import '../src/vaadin-crud.js'; +import './crud-grid-properties.common.js'; diff --git a/packages/crud/test/crud-grid-properties.test.js b/packages/crud/test/crud-grid-properties.common.js similarity index 99% rename from packages/crud/test/crud-grid-properties.test.js rename to packages/crud/test/crud-grid-properties.common.js index 7068355087..60bd5ea00f 100644 --- a/packages/crud/test/crud-grid-properties.test.js +++ b/packages/crud/test/crud-grid-properties.common.js @@ -1,6 +1,5 @@ import { expect } from '@vaadin/chai-plugins'; import { fixtureSync, nextRender } from '@vaadin/testing-helpers'; -import '../src/vaadin-crud.js'; import { getHeaderCellContent } from './helpers.js'; const ITEMS = [{ name: 'John' }, { name: 'Anna' }]; diff --git a/packages/crud/test/crud-grid.test.js b/packages/crud/test/crud-grid.common.js similarity index 99% rename from packages/crud/test/crud-grid.test.js rename to packages/crud/test/crud-grid.common.js index 64f9ed5aa2..4952b97a20 100644 --- a/packages/crud/test/crud-grid.test.js +++ b/packages/crud/test/crud-grid.common.js @@ -1,6 +1,5 @@ import { expect } from '@vaadin/chai-plugins'; import { aTimeout, fixtureSync, listenOnce, nextRender } from '@vaadin/testing-helpers'; -import '../src/vaadin-crud-grid.js'; import { flushGrid, getBodyCellContent, getHeaderCellContent } from './helpers.js'; describe('crud grid', () => { @@ -13,7 +12,7 @@ describe('crud grid', () => { first: 'Grant', last: 'Andrews', }, - password: 'lorem', + password: 'lorem', // NOSONAR role: 'operator', }, ]; diff --git a/packages/crud/test/crud-lit.test.js b/packages/crud/test/crud-lit.test.js new file mode 100644 index 0000000000..edff7bbfdb --- /dev/null +++ b/packages/crud/test/crud-lit.test.js @@ -0,0 +1,2 @@ +import '../src/vaadin-lit-crud.js'; +import './crud.common.js'; diff --git a/packages/crud/test/crud-polymer.test.js b/packages/crud/test/crud-polymer.test.js new file mode 100644 index 0000000000..db9923dd2f --- /dev/null +++ b/packages/crud/test/crud-polymer.test.js @@ -0,0 +1,2 @@ +import '../src/vaadin-crud.js'; +import './crud.common.js'; diff --git a/packages/crud/test/crud.test.js b/packages/crud/test/crud.common.js similarity index 99% rename from packages/crud/test/crud.test.js rename to packages/crud/test/crud.common.js index 6acd298a7f..26bfcf7f8d 100644 --- a/packages/crud/test/crud.test.js +++ b/packages/crud/test/crud.common.js @@ -2,7 +2,6 @@ import { expect } from '@vaadin/chai-plugins'; import { aTimeout, change, fire, fixtureSync, nextRender, oneEvent } from '@vaadin/testing-helpers'; import { setViewport } from '@web/test-runner-commands'; import sinon from 'sinon'; -import '../src/vaadin-crud.js'; import { capitalize, getProperty, setProperty } from '../src/vaadin-crud-helpers.js'; import { flushGrid, getBodyCellContent } from './helpers.js'; @@ -71,8 +70,9 @@ describe('crud', () => { expect(crud._grid.querySelector('vaadin-crud-edit').getAttribute('aria-label')).to.be.equal('Editar entidad'); }); - it('should propagate theme to internal themable components', () => { + it('should propagate theme to internal themable components', async () => { crud.setAttribute('theme', 'foo'); + await nextRender(); [ crud, crud._grid, diff --git a/packages/crud/theme/lumo/vaadin-lit-crud.js b/packages/crud/theme/lumo/vaadin-lit-crud.js new file mode 100644 index 0000000000..fea88cf245 --- /dev/null +++ b/packages/crud/theme/lumo/vaadin-lit-crud.js @@ -0,0 +1,8 @@ +import '@vaadin/button/theme/lumo/vaadin-lit-button.js'; +import '@vaadin/confirm-dialog/theme/lumo/vaadin-lit-confirm-dialog.js'; +import '@vaadin/form-layout/theme/lumo/vaadin-lit-form-layout.js'; +import '@vaadin/grid/theme/lumo/vaadin-lit-grid.js'; +import '@vaadin/grid/theme/lumo/vaadin-lit-grid-sorter.js'; +import '@vaadin/text-field/theme/lumo/vaadin-lit-text-field.js'; +import './vaadin-crud-styles.js'; +import '../../src/vaadin-lit-crud.js'; diff --git a/packages/crud/theme/material/vaadin-lit-crud.js b/packages/crud/theme/material/vaadin-lit-crud.js new file mode 100644 index 0000000000..f2cf2254c0 --- /dev/null +++ b/packages/crud/theme/material/vaadin-lit-crud.js @@ -0,0 +1,8 @@ +import '@vaadin/button/theme/material/vaadin-lit-button.js'; +import '@vaadin/confirm-dialog/theme/material/vaadin-lit-confirm-dialog.js'; +import '@vaadin/form-layout/theme/material/vaadin-lit-form-layout.js'; +import '@vaadin/grid/theme/material/vaadin-lit-grid.js'; +import '@vaadin/grid/theme/material/vaadin-lit-grid-sorter.js'; +import '@vaadin/text-field/theme/material/vaadin-lit-text-field.js'; +import './vaadin-crud-styles.js'; +import '../../src/vaadin-lit-crud.js'; diff --git a/packages/crud/vaadin-lit-crud-edit .js b/packages/crud/vaadin-lit-crud-edit .js new file mode 100644 index 0000000000..94c40f5565 --- /dev/null +++ b/packages/crud/vaadin-lit-crud-edit .js @@ -0,0 +1 @@ +export * from './src/vaadin-lit-crud-edit.js'; diff --git a/packages/crud/vaadin-lit-crud-edit-column.js b/packages/crud/vaadin-lit-crud-edit-column.js new file mode 100644 index 0000000000..dd0a317a05 --- /dev/null +++ b/packages/crud/vaadin-lit-crud-edit-column.js @@ -0,0 +1 @@ +export * from './src/vaadin-lit-crud-edit-column.js'; diff --git a/packages/crud/vaadin-lit-crud.js b/packages/crud/vaadin-lit-crud.js new file mode 100644 index 0000000000..329388384a --- /dev/null +++ b/packages/crud/vaadin-lit-crud.js @@ -0,0 +1,2 @@ +import './theme/lumo/vaadin-lit-crud.js'; +export * from './src/vaadin-lit-crud.js';