@vaadin/dashboard 24.6.0-alpha1

package/web-types.lit.json

@@ -0,0 +1,146 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/dashboard",
+  "version": "24.6.0-alpha1",
+  "description-markup": "markdown",
+  "framework": "lit",
+  "framework-config": {
+    "enable-when": {
+      "node-packages": [
+        "lit"
+      ]
+    }
+  },
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "vaadin-dashboard-layout",
+          "description": "A responsive, grid-based dashboard layout component\n\n```html\n<vaadin-dashboard-layout>\n  <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n  <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n  <vaadin-dashboard-section section-title=\"Section\">\n    <vaadin-dashboard-widget widget-title=\"Widget in Section\"></vaadin-dashboard-widget>\n  </vaadin-dashboard-section>\n</vaadin-dashboard-layout>\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property                     | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width`  | minimum column width of the layout\n`--vaadin-dashboard-col-max-width`  | maximum column width of the layout\n`--vaadin-dashboard-row-min-height` | minimum row height of the layout\n`--vaadin-dashboard-col-max-count`  | maximum column count of the layout\n`--vaadin-dashboard-spacing`        | spacing between child elements and space around its outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute      | Description\n---------------|-------------\n`dense-layout` | Set when the dashboard is in dense mode.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "extension": true,
+          "attributes": [
+            {
+              "name": "?denseLayout",
+              "description": "Whether the dashboard layout is dense.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        },
+        {
+          "name": "vaadin-dashboard-section",
+          "description": "A section component for use with the Dashboard component\n\n```html\n<vaadin-dashboard-section section-title=\"Section Title\">\n  <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n  <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n</vaadin-dashboard-section>\n```\n\n#### Example\n\n```html\n<vaadin-dashboard-section section-title=\"Section title\">\n  <vaadin-dashboard-widget widget-title=\"Widget 1\"></vaadin-dashboard-widget>\n  <vaadin-dashboard-widget widget-title=\"Widget 2\"></vaadin-dashboard-widget>\n</vaadin-dashboard-section>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name              | Description\n-----------------------|-------------\n`header`               | The header of the section\n`title`                | The title of the section\n`move-button`          | The move button\n`remove-button`        | The remove button\n`move-backward-button` | The move backward button when in move mode\n`move-forward-button`  | The move forward button when in move mode\n`move-apply-button`    | The apply button when in move mode\n\nThe following state attributes are available for styling:\n\nAttribute      | Description\n---------------|-------------\n`selected`     | Set when the element is selected.\n`focused`      | Set when the element is focused.\n`move-mode`    | Set when the element is being moved.\n`editable`     | Set when the element is editable.\n`first-child`  | Set when the element is the first child of the parent.\n`last-child`   | Set when the element is the last child of the parent.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "extension": true,
+          "attributes": [
+            {
+              "name": ".sectionTitle",
+              "description": "The title of the section",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        },
+        {
+          "name": "vaadin-dashboard-widget",
+          "description": "A Widget component for use with the Dashboard component\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n  <span slot=\"header-content\">Header</span>\n  <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name        | Description\n-----------------|-------------\n`header-content` | A slot for the widget header content.\n\n#### Example\n\n```html\n<vaadin-dashboard-widget widget-title=\"Title\">\n  <span slot=\"header-content\">Header</span>\n  <div>Content</div>\n</vaadin-dashboard-widget>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name                     | Description\n------------------------------|-------------\n`header`                      | The header of the widget\n`title`                       | The title of the widget\n`content`                     | The content of the widget\n`move-button`                 | The move button\n`remove-button`               | The remove button\n`resize-button`               | The resize button\n`move-backward-button`        | The move backward button when in move mode\n`move-forward-button`         | The move forward button when in move mode\n`move-apply-button`           | The apply button when in move mode\n`resize-shrink-width-button`  | The shrink width button when in resize mode\n`resize-grow-width-button`    | The grow width button when in resize mode\n`resize-shrink-height-button` | The shrink height button when in resize mode\n`resize-grow-height-button`   | The grow height button when in resize mode\n`resize-apply-button`         | The apply button when in resize mode\n\nThe following custom properties are available:\n\nCustom Property                   | Description\n----------------------------------|-------------\n`--vaadin-dashboard-item-colspan` | colspan of the widget\n`--vaadin-dashboard-item-rowspan` | rowspan of the widget\n\nThe following state attributes are available for styling:\n\nAttribute      | Description\n---------------|-------------\n`selected`     | Set when the element is selected.\n`focused`      | Set when the element is focused.\n`move-mode`    | Set when the element is being moved.\n`resize-mode`  | Set when the element is being resized.\n`resizing`     | Set when the element is being resized.\n`dragging`     | Set when the element is being dragged.\n`editable`     | Set when the element is editable.\n`first-child`  | Set when the element is the first child of the parent.\n`last-child`   | Set when the element is the last child of the parent.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "extension": true,
+          "attributes": [
+            {
+              "name": ".widgetTitle",
+              "description": "The title of the widget.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        },
+        {
+          "name": "vaadin-dashboard",
+          "description": "A responsive, grid-based dashboard layout component\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-dashboard#property-items) property.\nSet a renderer function to the [`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha1/#/elements/vaadin-dashboard#property-renderer) property.\n\nThe widgets and the sections will be generated and configured based on the renderer and the items provided.\n\n```html\n<vaadin-dashboard></vaadin-dashboard>\n```\n```js\nconst dashboard = document.querySelector('vaadin-dashboard');\n\ndashboard.items = [\n  { title: 'Widget 1 title', content: 'Text 1', rowspan: 2 },\n  { title: 'Widget 2 title', content: 'Text 2', colspan: 2 },\n  {\n    title: 'Section title',\n    items: [{ title: 'Widget in section title', content: 'Text 3' }]\n  },\n  // ... more items\n];\n\ndashboard.renderer = (root, _dashboard, { item }) => {\n  const widget = root.firstElementChild || document.createElement('vaadin-dashboard-widget');\n  if (!root.contains(widget)) {\n    root.appendChild(widget);\n  }\n  widget.widgetTitle = item.title;\n  widget.textContent = item.content;\n};\n```\n\n### Styling\n\nThe following custom properties are available:\n\nCustom Property                     | Description\n------------------------------------|-------------\n`--vaadin-dashboard-col-min-width`  | minimum column width of the dashboard\n`--vaadin-dashboard-col-max-width`  | maximum column width of the dashboard\n`--vaadin-dashboard-row-min-height` | minimum row height of the dashboard\n`--vaadin-dashboard-col-max-count`  | maximum column count of the dashboard\n`--vaadin-dashboard-spacing`        | spacing between child elements and space around its outer edges. Must be in length units (0 is not allowed, 0px is)\n\nThe following state attributes are available for styling:\n\nAttribute      | Description\n---------------|-------------\n`editable`     | Set when the dashboard is editable.\n`dense-layout` | Set when the dashboard is in dense mode.\n`item-selected`| Set when an item is selected.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "extension": true,
+          "attributes": [
+            {
+              "name": "?denseLayout",
+              "description": "Whether the dashboard layout is dense.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?editable",
+              "description": "Whether the dashboard is editable.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".items",
+              "description": "An array containing the items of the dashboard",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".renderer",
+              "description": "Custom function for rendering a widget for each dashboard item.\nPlacing something else than a widget in the wrapper is not supported.\nReceives three arguments:\n\n- `root` The container for the widget.\n- `dashboard` The reference to the `<vaadin-dashboard>` element.\n- `model` The object with the properties related with the rendered\n  item, contains:\n  - `model.item` The item.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".i18n",
+              "description": "The object used to localize this component.\n\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nThe object has the following structure and default values:\n```\n{\n  selectSection: 'Select section for editing',\n  selectWidget: 'Select widget for editing',\n  remove: 'Remove',\n  resize: 'Resize',\n  resizeApply: 'Apply',\n  resizeShrinkWidth: 'Shrink width',\n  resizeGrowWidth: 'Grow width',\n  resizeShrinkHeight: 'Shrink height',\n  resizeGrowHeight: 'Grow height',\n  move: 'Move',\n  moveApply: 'Apply',\n  moveForward: 'Move Forward',\n  moveBackward: 'Move Backward',\n}\n```",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@dashboard-item-move-mode-changed",
+              "description": "Fired when an item move mode changed",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@dashboard-item-moved",
+              "description": "Fired when an item was moved",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@dashboard-item-removed",
+              "description": "Fired when an item was removed",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@dashboard-item-resize-mode-changed",
+              "description": "Fired when an item resize mode changed",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@dashboard-item-resized",
+              "description": "Fired when an item was resized",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@dashboard-item-selected-changed",
+              "description": "Fired when an item selected state changed",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }
+}