@vaadin/vaadin-crud 21.0.1 → 22.0.0-alpha10

package/package.json

@@ -1,10 +1,29 @@
 {
   "name": "@vaadin/vaadin-crud",
-  "version": "21.0.1",
+  "version": "22.0.0-alpha10",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "vaadin-crud",
+  "license": "https://raw.githubusercontent.com/vaadin/web-components/master/packages/vaadin-crud/LICENSE",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/vaadin-crud"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/web-components/issues"
+  },
   "main": "vaadin-crud.js",
   "module": "vaadin-crud.js",
-  "repository": "vaadin/vaadin-crud",
+  "files": [
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js"
+  ],
   "keywords": [
     "Vaadin",
     "vaadin-crud",
@@ -12,41 +31,8 @@
     "web-component",
     "polymer"
   ],
-  "author": "Vaadin Ltd",
-  "license": "https://raw.githubusercontent.com/vaadin/vaadin-crud/master/LICENSE",
-  "bugs": {
-    "url": "https://github.com/vaadin/vaadin-crud/issues"
-  },
-  "homepage": "https://vaadin.com/components",
-  "files": [
-    "vaadin-*.d.ts",
-    "vaadin-*.js",
-    "src",
-    "theme"
-  ],
   "dependencies": {
-    "@polymer/iron-media-query": "^3.0.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-button": "^21.0.1",
-    "@vaadin/vaadin-confirm-dialog": "^21.0.1",
-    "@vaadin/vaadin-dialog": "^21.0.1",
-    "@vaadin/vaadin-element-mixin": "^21.0.1",
-    "@vaadin/vaadin-form-layout": "^21.0.1",
-    "@vaadin/vaadin-grid": "^21.0.1",
-    "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-lumo-styles": "^21.0.1",
-    "@vaadin/vaadin-material-styles": "^21.0.1",
-    "@vaadin/vaadin-text-field": "^21.0.1",
-    "@vaadin/vaadin-themable-mixin": "^21.0.1"
-  },
-  "devDependencies": {
-    "@esm-bundle/chai": "^4.1.5",
-    "@vaadin/testing-helpers": "^0.2.1",
-    "@vaadin/vaadin-template-renderer": "^21.0.1",
-    "sinon": "^9.2.1"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@vaadin/crud": "22.0.0-alpha10"
   },
-  "gitHead": "91e44dcfa63dc5e30e1e8d18be499b3e1e17b1c4"
+  "gitHead": "6d3055383b9c3c8306ea34c6f2e2087e63c49348"
 }

package/src/vaadin-crud.d.ts

@@ -1,284 +1,18 @@
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-
-import { CrudDataProvider, CrudEditorPosition, CrudEventMap, CrudI18n } from './interfaces';
-
 /**
- * `<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.
- *
- * ### Quick Start
- *
- * Assign an array to the [`items`](#/elements/vaadin-crud#property-items) property.
- *
- * A grid and an editor will be automatically generated and configured based on the data structure provided.
- *
- * #### Example:
- * ```html
- * <vaadin-crud items='[{"name": "John", "surname": "Lennon", "role": "singer"},
- *                      {"name": "Ringo", "surname": "Starr", "role": "drums"}]'></vaadin-crud>
- * ```
- *
- * ### Data Provider Function
- *
- * Otherwise, you can provide a [`dataProvider`](#/elements/vaadin-crud#property-dataProvider) function.
- * #### Example:
- * ```html
- * <vaadin-crud></vaadin-crud>
- * ```
- * ```js
- * const crud = document.querySelector('vaadin-crud');
- * const users = [{'name': 'John', 'surname': 'Lennon', 'role': 'singer'}, ...];
- * crud.dataProvider = function(params, callback) {
- *   const chunk = users.slice(params.page * params.pageSize, params.page * params.pageSize + params.pageSize);
- *   callback(chunk, people.length);
- * };
- * ```
- *
- * NOTE: The auto-generated editor only supports string types. If you need to handle special cases
- * customizing the editor is discussed below.
- *
- * ### Customization
- *
- * Alternatively you can fully configure the component by using `slot` names.
- *
- * Slot name | Description
- * ----------------|----------------
- * `grid` | To replace the auto-generated grid with a custom one.
- * `form` | To replace the auto-generated form.
- * `toolbar` | To replace the toolbar content. Add an element with the attribute `new-button` for the new item action.
- *
- * #### Example:
- *
- * ```html
- * <vaadin-crud
- *   id="crud"
- *   items='[{"name": "John", "surname": "Lennon", "role": "singer"},
- *           {"name": "Ringo", "surname": "Starr", "role": "drums"}]'
- * >
- *   <vaadin-grid slot="grid">
- *     <vaadin-crud-edit-column></vaadin-crud-edit-column>
- *     <vaadin-grid-column id="column1"></vaadin-grid-column>
- *     <vaadin-grid-column id="column2"></vaadin-grid-column>
- *   </vaadin-grid>
- *
- *   <vaadin-form-layout slot="form">
- *     <vaadin-text-field label="First" path="name"></vaadin-text-field>
- *     <vaadin-text-field label="Surname" path="surname"></vaadin-text-field>
- *   </vaadin-form-layout>
- *
- *   <div slot="toolbar">
- *     Total singers: [[size]]
- *     <button new-button>New singer</button>
- *   </div>
- * </vaadin-crud>
- * ```
- * ```js
- * const crud = document.querySelector('#crud');
- *
- * const column1 = document.querySelector('#column1');
- * column1.headerRenderer = (root, column) => {
- *   root.textContent = 'Name';
- * };
- * column1.renderer = (root, column, model) => {
- *   root.textContent = model.item.name;
- * };
- *
- * const column2 = document.querySelector('#column2');
- * column2.headerRenderer = (root, column) => {
- *   root.textContent = 'Surname';
- * };
- * column2.renderer = (root, column, model) => {
- *   root.textContent = model.item.surname;
- * };
- * ```
- *
- * ### Helpers
- *
- * The following elements are used to auto-configure the grid and the editor
- * - [`<vaadin-crud-edit-column>`](#/elements/vaadin-crud-edit-column)
- * - `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](#/elements/vaadin-grid)
- * - `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](#/elements/vaadin-form-layout)
- *
- * ### Styling
- *
- * The following shadow DOM parts are available for styling:
- *
- * Part name | Description
- * ----------------|----------------
- * `toolbar` | Toolbar container at the bottom. By default it contains the the `new` button
- *
- * The following custom properties are available:
- *
- * Custom Property | Description | Default
- * ----------------|----------------
- * --vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%
- * --vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%
- *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
- *
- * @fires {CustomEvent} editor-opened-changed - Fired when the `editorOpened` property changes.
- * @fires {CustomEvent} edited-item-changed - Fired when `editedItem` property changes.
- * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
- * @fires {CustomEvent} size-changed - Fired when the `size` property changes.
- * @fires {CustomEvent} new - Fired when user wants to create a new item.
- * @fires {CustomEvent} edit - Fired when user wants to edit an existing item.
- * @fires {CustomEvent} delete - Fired when user wants to delete item.
- * @fires {CustomEvent} save - Fired when user wants to save a new or an existing item.
- * @fires {CustomEvent} cancel - Fired when user discards edition.
+ * @license
+ * Copyright (c) 2017 - 2021 Vaadin Ltd.
+ * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
-declare class CrudElement<Item> extends ElementMixin(ThemableMixin(HTMLElement)) {
-  /**
-   * A reference to all fields inside the [`_form`](#/elements/vaadin-crud#property-_form) element
-   */
-  readonly _fields: HTMLElement[];
-
-  /**
-   * An array containing the items which will be stamped to the column template instances.
-   */
-  items: Array<Item> | null | undefined;
-
-  /**
-   * The item being edited in the dialog.
-   */
-  editedItem: Item | null | undefined;
-
-  /**
-   * Sets how editor will be presented on desktop screen.
-   *
-   * Accepted values are:
-   *   - `` (default) - form will open as overlay
-   *   - `bottom` - form will open below the grid
-   *   - `aside` - form will open on the grid side (_right_, if lft and _left_ if rtl)
-   * @attr {bottom|aside} editor-position
-   */
-  editorPosition: CrudEditorPosition;
-
-  /**
-   * Enables user to click on row to edit it.
-   * Note: When enabled, auto-generated grid won't show the edit column.
-   * @attr {boolean} edit-on-click
-   */
-  editOnClick: boolean;
-
-  /**
-   * Function that provides items lazily. Receives arguments `params`, `callback`
-   *
-   * `params.page` Requested page index
-   * `params.pageSize` Current page size
-   * `params.filters` Currently applied filters
-   * `params.sortOrders` Currently applied sorting orders
-   *
-   * `callback(items, size)` Callback function with arguments:
-   *   - `items` Current page of items
-   *   - `size` Total number of items
-   */
-  dataProvider: CrudDataProvider<Item> | null | undefined;
-
-  /**
-   * Disable filtering when grid is autoconfigured.
-   * @attr {boolean} no-filter
-   */
-  noFilter: boolean | null | undefined;
-
-  /**
-   * Disable sorting when grid is autoconfigured.
-   * @attr {boolean} no-sort
-   */
-  noSort: boolean | null | undefined;
-
-  /**
-   * Remove grid headers when it is autoconfigured.
-   * @attr {boolean} no-head
-   */
-  noHead: boolean | null | undefined;
+import { Crud } from '@vaadin/crud/src/vaadin-crud.js';
 
-  /**
-   * A comma-separated list of fields to include in the generated grid and the generated editor.
-   *
-   * It can be used to explicitly define the field order.
-   *
-   * When it is defined [`exclude`](#/elements/vaadin-crud#property-exclude) is ignored.
-   *
-   * Default is undefined meaning that all properties in the object should be mapped to fields.
-   */
-  include: string | null | undefined;
-
-  /**
-   * A comma-separated list of fields to be excluded from the generated grid and the generated editor.
-   *
-   * When [`include`](#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.
-   *
-   * Default is to exclude all private fields (those properties starting with underscore)
-   */
-  exclude: string | null | undefined;
-
-  /**
-   * Reflects the opened status of the editor.
-   */
-  editorOpened: boolean | null | undefined;
-
-  /**
-   * Number of items in the data set which is reported by the grid.
-   * Typically it reflects the number of filtered items displayed in the grid.
-   */
-  readonly size: number | null | undefined;
-
-  /**
-   * The object used to localize this component.
-   * For changing the default localization, change the entire
-   * _i18n_ object or just the property you want to modify.
-   *
-   * The object has the following JSON structure and default values:
-   *
-   * ```
-   * {
-   *   newItem: 'New item',
-   *   editItem: 'Edit item',
-   *   saveItem: 'Save',
-   *   cancel: 'Cancel',
-   *   deleteItem: 'Delete...',
-   *   editLabel: 'Edit',
-   *   confirm: {
-   *     delete: {
-   *       title: 'Confirm delete',
-   *       content: 'Are you sure you want to delete the selected item? This action cannot be undone.',
-   *       button: {
-   *         confirm: 'Delete',
-   *         dismiss: 'Cancel'
-   *       }
-   *     },
-   *     cancel: {
-   *       title: 'Unsaved changes',
-   *       content: 'There are unsaved modifications to the item.',
-   *       button: {
-   *         confirm: 'Discard',
-   *         dismiss: 'Continue editing'
-   *       }
-   *     }
-   *   }
-   * }
-   * ```
-   */
-  i18n: CrudI18n;
-
-  addEventListener<K extends keyof CrudEventMap<Item>>(
-    type: K,
-    listener: (this: CrudElement<Item>, ev: CrudEventMap<Item>[K]) => void,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-
-  removeEventListener<K extends keyof CrudEventMap<Item>>(
-    type: K,
-    listener: (this: CrudElement<Item>, ev: CrudEventMap<Item>[K]) => void,
-    options?: boolean | EventListenerOptions
-  ): void;
-}
+/**
+ * @deprecated Import `Crud` from `@vaadin/crud` instead.
+ */
+export type CrudElement<Item> = Crud<Item>;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-crud': CrudElement<any>;
-  }
-}
+/**
+ * @deprecated Import `Crud` from `@vaadin/crud` instead.
+ */
+export const CrudElement: typeof Crud;
 
-export { CrudElement };
+export * from '@vaadin/crud/src/vaadin-crud.js';