From 6b514ccfd534b3a8290c11a90315a15c1b16276f Mon Sep 17 00:00:00 2001 From: Steel Fu Date: Mon, 28 Oct 2019 15:16:30 -0700 Subject: [PATCH 1/3] Update web-components framework to render attributes --- .../src/frameworks/web-components/config.js | 3 + .../custom-elements.json | 56 +++++++++++-------- .../custom-elements.md | 32 +++++++++++ .../src/DemoWcCard.js | 9 +++ 4 files changed, 76 insertions(+), 24 deletions(-) create mode 100644 examples/web-components-kitchen-sink/custom-elements.md diff --git a/addons/docs/src/frameworks/web-components/config.js b/addons/docs/src/frameworks/web-components/config.js index b574e3c2924d..a6f0f7e256c4 100644 --- a/addons/docs/src/frameworks/web-components/config.js +++ b/addons/docs/src/frameworks/web-components/config.js @@ -26,6 +26,9 @@ addParameters({ tag => tag.name.toUpperCase() === tagName.toUpperCase() ); const sections = {}; + if (metaData.attributes) { + sections.attributes = mapData(metaData.attributes); + } if (metaData.properties) { sections.props = mapData(metaData.properties); } diff --git a/examples/web-components-kitchen-sink/custom-elements.json b/examples/web-components-kitchen-sink/custom-elements.json index 3934eba7c9a4..341ece6e87d6 100644 --- a/examples/web-components-kitchen-sink/custom-elements.json +++ b/examples/web-components-kitchen-sink/custom-elements.json @@ -4,28 +4,39 @@ { "name": "demo-wc-card", "description": "This is a container looking like a card with a back and front side you can switch", - "properties": [ + "jsDoc": "/**\n * This is a container looking like a card with a back and front side you can switch\n *\n * @slot - This is an unnamed slot (the default slot)\n * @fires side-changed - Fires whenever it switches between front/back\n * @cssprop --demo-wc-card-header-font-size - Header font size\n * @cssprop --demo-wc-card-front-color - Font color for front\n * @cssprop --demo-wc-card-back-color - Font color for back\n */", + "attributes": [ + { + "name": "back-side", + "type": "boolean" + }, { "name": "header", - "type": "String", - "attribute": "header", - "description": "Shown at the top of the card", - "default": "Your Message" + "type": "string" }, { "name": "rows", - "type": "Array", - "attribute": "rows", - "description": "Tabular data shown on the back of the card", - "default": [] + "type": "never[]" + } + ], + "properties": [ + { + "name": "side", + "description": "A card setter can have side A or B", + "jsDoc": "/**\n * A card setter can have side A or B\n *\n * @param {(\"A\"|\"B\")} value\n */", + "type": "\"A\" | \"B\"" }, { "name": "backSide", - "type": "Boolean", - "attribute": "back-side", - "reflect": true, - "description": "Indicates that the back of the card is shown", - "default": false + "type": "boolean" + }, + { + "name": "header", + "type": "string" + }, + { + "name": "rows", + "type": "never[]" } ], "events": [ @@ -37,26 +48,23 @@ "slots": [ { "name": "", - "description": "Content inside the card gets displayed on the front page" + "description": "This is an unnamed slot (the default slot)" } ], "cssProperties": [ { - "name": "--demo-wc-card-header-font-size", - "description": "Header Font size", - "type": "Length" + "name": "--demo-wc-card-back-color", + "description": "Font color for back" }, { "name": "--demo-wc-card-front-color", - "description": "Font color for the front", - "type": "Color" + "description": "Font color for front" }, { - "name": "--demo-wc-card-back-color", - "description": "Font color for the back", - "type": "Color" + "name": "--demo-wc-card-header-font-size", + "description": "Header font size" } ] } ] -} +} \ No newline at end of file diff --git a/examples/web-components-kitchen-sink/custom-elements.md b/examples/web-components-kitchen-sink/custom-elements.md new file mode 100644 index 000000000000..866ebb2db49d --- /dev/null +++ b/examples/web-components-kitchen-sink/custom-elements.md @@ -0,0 +1,32 @@ +# demo-wc-card + +This is a container looking like a card with a back and front side you can switch + +## Properties + +| Property | Attribute | Type | Default | Description | +|------------|-------------|--------------|----------------|------------------------------------| +| `backSide` | `back-side` | `boolean` | false | | +| `header` | `header` | `string` | "Your Message" | | +| `rows` | `rows` | `never[]` | | | +| `side` | | `"A" \| "B"` | | A card setter can have side A or B | + +## Events + +| Event | Description | +|----------------|-----------------------------------------------| +| `side-changed` | Fires whenever it switches between front/back | + +## CSS Custom Properties + +| Property | Description | +|-----------------------------------|----------------------| +| `--demo-wc-card-back-color` | Font color for back | +| `--demo-wc-card-front-color` | Font color for front | +| `--demo-wc-card-header-font-size` | Header font size | + +## Slots + +| Name | Description | +|------|--------------------------------------------| +| | This is an unnamed slot (the default slot) | diff --git a/examples/web-components-kitchen-sink/src/DemoWcCard.js b/examples/web-components-kitchen-sink/src/DemoWcCard.js index cef8acfd15ce..7eb65823eebb 100644 --- a/examples/web-components-kitchen-sink/src/DemoWcCard.js +++ b/examples/web-components-kitchen-sink/src/DemoWcCard.js @@ -3,6 +3,15 @@ import { Event } from 'global'; import { LitElement, html } from 'lit-element'; import { demoWcCardStyle } from './demoWcCardStyle.css.js'; +/** + * This is a container looking like a card with a back and front side you can switch + * + * @slot - This is an unnamed slot (the default slot) + * @fires side-changed - Fires whenever it switches between front/back + * @cssprop --demo-wc-card-header-font-size - Header font size + * @cssprop --demo-wc-card-front-color - Font color for front + * @cssprop --demo-wc-card-back-color - Font color for back + */ export class DemoWcCard extends LitElement { static get properties() { return { From 270732553173dfbadbe2c80e98dc7887a45f988c Mon Sep 17 00:00:00 2001 From: Steel Fu Date: Mon, 28 Oct 2019 21:15:26 -0700 Subject: [PATCH 2/3] Add documentation in constructor --- .../web-components-kitchen-sink/custom-elements.json | 12 ++++++++++++ .../web-components-kitchen-sink/src/DemoWcCard.js | 11 +++++++++++ 2 files changed, 23 insertions(+) diff --git a/examples/web-components-kitchen-sink/custom-elements.json b/examples/web-components-kitchen-sink/custom-elements.json index 341ece6e87d6..4b2a539083d1 100644 --- a/examples/web-components-kitchen-sink/custom-elements.json +++ b/examples/web-components-kitchen-sink/custom-elements.json @@ -8,14 +8,20 @@ "attributes": [ { "name": "back-side", + "description": "Indicates that the back of the card is shown", + "jsDoc": "/**\n * Indicates that the back of the card is shown\n */", "type": "boolean" }, { "name": "header", + "description": "Header message", + "jsDoc": "/**\n * Header message\n */", "type": "string" }, { "name": "rows", + "description": "Data rows", + "jsDoc": "/**\n * Data rows\n */", "type": "never[]" } ], @@ -28,14 +34,20 @@ }, { "name": "backSide", + "description": "Indicates that the back of the card is shown", + "jsDoc": "/**\n * Indicates that the back of the card is shown\n */", "type": "boolean" }, { "name": "header", + "description": "Header message", + "jsDoc": "/**\n * Header message\n */", "type": "string" }, { "name": "rows", + "description": "Data rows", + "jsDoc": "/**\n * Data rows\n */", "type": "never[]" } ], diff --git a/examples/web-components-kitchen-sink/src/DemoWcCard.js b/examples/web-components-kitchen-sink/src/DemoWcCard.js index 7eb65823eebb..6dc3c5e5990a 100644 --- a/examples/web-components-kitchen-sink/src/DemoWcCard.js +++ b/examples/web-components-kitchen-sink/src/DemoWcCard.js @@ -45,8 +45,19 @@ export class DemoWcCard extends LitElement { constructor() { super(); + /** + * Indicates that the back of the card is shown + */ this.backSide = false; + + /** + * Header message + */ this.header = 'Your Message'; + + /** + * Data rows + */ this.rows = []; } From 6f9531123d6a3102d1a70bb8f3a77f42391e65ae Mon Sep 17 00:00:00 2001 From: Steel Fu Date: Tue, 29 Oct 2019 11:32:18 -0700 Subject: [PATCH 3/3] rework event dispatching and fix back side css --- .../custom-elements.json | 6 ---- .../src/DemoWcCard.js | 35 ++++++++----------- .../src/demoWcCardStyle.css.js | 2 +- 3 files changed, 15 insertions(+), 28 deletions(-) diff --git a/examples/web-components-kitchen-sink/custom-elements.json b/examples/web-components-kitchen-sink/custom-elements.json index 4b2a539083d1..448e527aea8e 100644 --- a/examples/web-components-kitchen-sink/custom-elements.json +++ b/examples/web-components-kitchen-sink/custom-elements.json @@ -26,12 +26,6 @@ } ], "properties": [ - { - "name": "side", - "description": "A card setter can have side A or B", - "jsDoc": "/**\n * A card setter can have side A or B\n *\n * @param {(\"A\"|\"B\")} value\n */", - "type": "\"A\" | \"B\"" - }, { "name": "backSide", "description": "Indicates that the back of the card is shown", diff --git a/examples/web-components-kitchen-sink/src/DemoWcCard.js b/examples/web-components-kitchen-sink/src/DemoWcCard.js index 6dc3c5e5990a..d5e21a278b48 100644 --- a/examples/web-components-kitchen-sink/src/DemoWcCard.js +++ b/examples/web-components-kitchen-sink/src/DemoWcCard.js @@ -1,5 +1,5 @@ -/* eslint-disable no-underscore-dangle, import/extensions */ -import { Event } from 'global'; +/* eslint-disable import/extensions */ +import { CustomEvent } from 'global'; import { LitElement, html } from 'lit-element'; import { demoWcCardStyle } from './demoWcCardStyle.css.js'; @@ -15,36 +15,23 @@ import { demoWcCardStyle } from './demoWcCardStyle.css.js'; export class DemoWcCard extends LitElement { static get properties() { return { - backSide: { type: Boolean, reflect: true, attribute: 'back-side' }, + backSide: { + type: Boolean, + reflect: true, + attribute: 'back-side', + }, header: { type: String }, rows: { type: Object }, }; } - /** - * A card setter can have side A or B - * - * @param {("A"|"B")} value - */ - set side(value) { - this.__side = value; - this.dispatchEvent(new Event('side-changed')); - this.requestUpdate(); - } - - /** - * @returns {("A"|"B")} - */ - get side() { - return this.__side; - } - static get styles() { return demoWcCardStyle; } constructor() { super(); + /** * Indicates that the back of the card is shown */ @@ -105,4 +92,10 @@ export class DemoWcCard extends LitElement { `; } + + updated(changedProperties) { + if (changedProperties.has('backSide') && changedProperties.get('backSide') !== undefined) { + this.dispatchEvent(new CustomEvent('side-changed')); + } + } } diff --git a/examples/web-components-kitchen-sink/src/demoWcCardStyle.css.js b/examples/web-components-kitchen-sink/src/demoWcCardStyle.css.js index 6dbc2f4ad36c..100d02dc9d37 100644 --- a/examples/web-components-kitchen-sink/src/demoWcCardStyle.css.js +++ b/examples/web-components-kitchen-sink/src/demoWcCardStyle.css.js @@ -88,7 +88,7 @@ export const demoWcCardStyle = css` background: linear-gradient(141deg, #333 25%, #aaa 40%, #666 55%); color: var(--demo-wc-card-back-color, #fff); text-align: center; - transform: rotateY(180deg); + transform: rotateY(180deg) translate3d(0px, 0, 1px); } #back .note {