@vonage/vwc-card 2.33.1 → 2.35.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +8 -8
- package/readme.md +7 -7
- package/vwc-card.js +4 -4
- package/vwc-card.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vonage/vwc-card",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.35.0",
|
|
4
4
|
"description": "card component",
|
|
5
5
|
"homepage": "https://github.com/Vonage/vivid/tree/master/components/card#readme",
|
|
6
6
|
"license": "ISC",
|
|
@@ -26,18 +26,18 @@
|
|
|
26
26
|
"url": "https://github.com/Vonage/vivid/issues"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@vonage/vwc-button": "2.
|
|
30
|
-
"@vonage/vwc-icon": "2.
|
|
29
|
+
"@vonage/vwc-button": "2.35.0",
|
|
30
|
+
"@vonage/vwc-icon": "2.35.0",
|
|
31
31
|
"lit-element": "^2.4.0",
|
|
32
32
|
"lit-html": "^1.3.0",
|
|
33
33
|
"tslib": "^2.3.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@vonage/vvd-design-tokens": "2.
|
|
37
|
-
"@vonage/vvd-foundation": "2.
|
|
38
|
-
"@vonage/vvd-typography": "2.
|
|
39
|
-
"@vonage/vvd-umbrella": "2.
|
|
36
|
+
"@vonage/vvd-design-tokens": "2.35.0",
|
|
37
|
+
"@vonage/vvd-foundation": "2.35.0",
|
|
38
|
+
"@vonage/vvd-typography": "2.35.0",
|
|
39
|
+
"@vonage/vvd-umbrella": "2.35.0",
|
|
40
40
|
"typescript": "^4.3.2"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "fcc5fe79ad54db7aa0991c7eb4f4287dfbaa4383"
|
|
43
43
|
}
|
package/readme.md
CHANGED
|
@@ -5,16 +5,14 @@ Cards contain content and actions about a single subject.
|
|
|
5
5
|
## Usage
|
|
6
6
|
|
|
7
7
|
```
|
|
8
|
-
<vwc-card heading="Hello Card!"
|
|
9
|
-
icon="home">
|
|
8
|
+
<vwc-card heading="Hello Card!" icon="home">
|
|
10
9
|
<div slot="media">Some media</div>
|
|
11
|
-
<vwc-button slot="
|
|
10
|
+
<vwc-button slot="footer">Action Button</vwc-button>
|
|
12
11
|
</vwc-card>
|
|
13
12
|
```
|
|
14
13
|
|
|
15
14
|
## API
|
|
16
15
|
|
|
17
|
-
|
|
18
16
|
### Properties/Attributes
|
|
19
17
|
|
|
20
18
|
| name |attr/prop/reflected|type| description |
|
|
@@ -34,6 +32,7 @@ Cards contain content and actions about a single subject.
|
|
|
34
32
|
| `media` | Slot to add anything inside the `media` area |
|
|
35
33
|
| `footer` | Slot for action content placed the card footer |
|
|
36
34
|
| `content` | Slot for content of the card. If exist, overrides the `heading`, `subtitle`, `card-text` and `header-icon`
|
|
35
|
+
|
|
37
36
|
## Styling tips
|
|
38
37
|
|
|
39
38
|
### Setting card's width
|
|
@@ -42,14 +41,15 @@ The width of the card is set via its wrapper's width. Hence, if you wrap a card
|
|
|
42
41
|
|
|
43
42
|
```html
|
|
44
43
|
<div class="card-wrapper">
|
|
45
|
-
|
|
44
|
+
<vwc-card></vwc-card>
|
|
46
45
|
</div>
|
|
47
46
|
```
|
|
48
47
|
|
|
49
|
-
Then your style should have:
|
|
48
|
+
Then your style should have:
|
|
49
|
+
|
|
50
50
|
```css
|
|
51
51
|
.card-wrapper {
|
|
52
|
-
|
|
52
|
+
width: 300px;
|
|
53
53
|
}
|
|
54
54
|
```
|
|
55
55
|
|
package/vwc-card.js
CHANGED
|
@@ -36,8 +36,8 @@ let VWCCard = class VWCCard extends LitElement {
|
|
|
36
36
|
<div class="vwc-card-media">
|
|
37
37
|
<slot name="media"></slot>
|
|
38
38
|
</div>
|
|
39
|
-
<
|
|
40
|
-
<
|
|
39
|
+
<slot name="main">
|
|
40
|
+
<div class="vwc-card-content">
|
|
41
41
|
<div class="vwc-card-wrapper">
|
|
42
42
|
${this.renderHeader()}
|
|
43
43
|
<slot name="meta"></slot>
|
|
@@ -45,8 +45,8 @@ let VWCCard = class VWCCard extends LitElement {
|
|
|
45
45
|
<div class="vwc-card-text">
|
|
46
46
|
${this.text ? this.text : nothing}
|
|
47
47
|
</div>
|
|
48
|
-
</
|
|
49
|
-
</
|
|
48
|
+
</div>
|
|
49
|
+
</slot>
|
|
50
50
|
<div class="vwc-card-footer ${classMap(footerClassMap)}">
|
|
51
51
|
<slot name="footer" @slotchange="${this.footerSlotChanged}"></slot>
|
|
52
52
|
</div>
|
package/vwc-card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vwc-card.js","sourceRoot":"","sources":["src/vwc-card.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tcustomElement, html, LitElement,\n} from 'lit-element';\nimport { nothing } from 'lit-html';\nimport { style } from './vwc-card.css.js';\nimport { property } from 'lit-element/lib/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport '@vonage/vwc-button';\nimport '@vonage/vwc-icon';\nimport '@vonage/vwc-elevation';\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'vwc-card': VWCCard;\n\t}\n}\n\nconst elevationSets = ['0' , '2', '4', '8', '12' , '16' , '24'];\nexport type IndicatorElevationSets = typeof elevationSets;\n\n/**\n * @cssprop [--title-line-clamp] defines the number of lines presented before trim + ellipsis in the card title\n * @cssprop [--subtitle-line-clamp] defines the number of lines presented before trim + ellipsis in the card subtitle\n * */\n\n@customElement('vwc-card')\nexport class VWCCard extends LitElement {\n\t/**\n\t * @internal\n\t */\n\tstatic override styles = style;\n\n\t@property({\n\t\treflect: true,\n\t\ttype: String\n\t})\n\t\theading: string | undefined;\n\n\t@property({\n\t\treflect: true,\n\t\ttype: String\n\t})\n\t\tsubtitle: string | undefined;\n\n\t@property({\n\t\treflect: true,\n\t\tattribute: 'icon',\n\t\ttype: String\n\t})\n\t\ticon: string | null = null;\n\n\t@property({\n\t\treflect: true,\n\t\tattribute: 'text',\n\t\ttype: String\n\t})\n\t\ttext: string | undefined;\n\n\t@property({\n\t\treflect: false,\n\t\tattribute: 'elevation',\n\t\ttype: String\n\t})\n\t\televation: IndicatorElevationSets[number] = '4';\n\n\tprivate IconSlottedItems?: Node[];\n\t#shouldShowFooterSlot: boolean | undefined;\n\n\tprivate get headerContentExists(): boolean {\n\t\treturn Boolean(this.heading || this.subtitle || this.icon || this.IconSlottedItems?.length);\n\t}\n\n\tprivate get headerClass(): string {\n\t\treturn (this.headerContentExists) ? '' : 'no-content';\n\t}\n\n\n\tprotected override render(): unknown {\n\t\tconst footerClassMap = {\n\t\t\t'no-content': !(this.#shouldShowFooterSlot)\n\t\t};\n\t\treturn html`\n\t\t\t<vwc-elevation .dp=${this.elevation}>\n\t\t\t<!-- there are 2 wrapper due to a safari bug failing 'filter: drop-shadow'\n\t\t\tfrom rendering shadow on an element with 'overflow: hidden' -->\n\t\t\t\t<div class=\"vwc-card\">\n\t\t\t\t\t<div class=\"vwc-card-container\">\n\t\t\t\t\t\t<div class=\"vwc-card-media\">\n\t\t\t\t\t\t\t<slot name=\"media\"></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<
|
|
1
|
+
{"version":3,"file":"vwc-card.js","sourceRoot":"","sources":["src/vwc-card.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tcustomElement, html, LitElement,\n} from 'lit-element';\nimport { nothing } from 'lit-html';\nimport { style } from './vwc-card.css.js';\nimport { property } from 'lit-element/lib/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport '@vonage/vwc-button';\nimport '@vonage/vwc-icon';\nimport '@vonage/vwc-elevation';\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'vwc-card': VWCCard;\n\t}\n}\n\nconst elevationSets = ['0' , '2', '4', '8', '12' , '16' , '24'];\nexport type IndicatorElevationSets = typeof elevationSets;\n\n/**\n * @cssprop [--title-line-clamp] defines the number of lines presented before trim + ellipsis in the card title\n * @cssprop [--subtitle-line-clamp] defines the number of lines presented before trim + ellipsis in the card subtitle\n * */\n\n@customElement('vwc-card')\nexport class VWCCard extends LitElement {\n\t/**\n\t * @internal\n\t */\n\tstatic override styles = style;\n\n\t@property({\n\t\treflect: true,\n\t\ttype: String\n\t})\n\t\theading: string | undefined;\n\n\t@property({\n\t\treflect: true,\n\t\ttype: String\n\t})\n\t\tsubtitle: string | undefined;\n\n\t@property({\n\t\treflect: true,\n\t\tattribute: 'icon',\n\t\ttype: String\n\t})\n\t\ticon: string | null = null;\n\n\t@property({\n\t\treflect: true,\n\t\tattribute: 'text',\n\t\ttype: String\n\t})\n\t\ttext: string | undefined;\n\n\t@property({\n\t\treflect: false,\n\t\tattribute: 'elevation',\n\t\ttype: String\n\t})\n\t\televation: IndicatorElevationSets[number] = '4';\n\n\tprivate IconSlottedItems?: Node[];\n\t#shouldShowFooterSlot: boolean | undefined;\n\n\tprivate get headerContentExists(): boolean {\n\t\treturn Boolean(this.heading || this.subtitle || this.icon || this.IconSlottedItems?.length);\n\t}\n\n\tprivate get headerClass(): string {\n\t\treturn (this.headerContentExists) ? '' : 'no-content';\n\t}\n\n\n\tprotected override render(): unknown {\n\t\tconst footerClassMap = {\n\t\t\t'no-content': !(this.#shouldShowFooterSlot)\n\t\t};\n\t\treturn html`\n\t\t\t<vwc-elevation .dp=${this.elevation}>\n\t\t\t<!-- there are 2 wrapper due to a safari bug failing 'filter: drop-shadow'\n\t\t\tfrom rendering shadow on an element with 'overflow: hidden' -->\n\t\t\t\t<div class=\"vwc-card\">\n\t\t\t\t\t<div class=\"vwc-card-container\">\n\t\t\t\t\t\t<div class=\"vwc-card-media\">\n\t\t\t\t\t\t\t<slot name=\"media\"></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<slot name=\"main\">\n\t\t\t\t\t\t\t<div class=\"vwc-card-content\">\n\t\t\t\t\t\t\t\t<div class=\"vwc-card-wrapper\">\n\t\t\t\t\t\t\t\t\t${this.renderHeader()}\n\t\t\t\t\t\t\t\t\t<slot name=\"meta\"></slot>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"vwc-card-text\">\n\t\t\t\t\t\t\t\t\t${this.text ? this.text : nothing}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t<div class=\"vwc-card-footer ${classMap(footerClassMap)}\">\n\t\t\t\t\t\t\t<slot name=\"footer\" @slotchange=\"${this.footerSlotChanged}\"></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</vwc-elevation>\n\t\t`;\n\t}\n\n\tprivate renderHeader() {\n\t\treturn html`\n\t\t\t<header class=\"vwc-card-header ${this.headerClass}\">\n\t\t\t\t<slot name=\"graphic\" @slotchange=\"${this.graphicSlotChanged}\">\n\t\t\t\t\t${this.icon ? this.renderIcon() : ''}\n\t\t\t\t</slot>\n\t\t\t\t<div>\n\t\t\t\t\t<div class=\"vwc-card-title\">${this.heading}</div>\n\t\t\t\t\t<div class=\"vwc-card-subtitle\">${this.subtitle}</div>\n\t\t\t\t</div>\n\t\t\t</header>`;\n\t}\n\n\tprivate renderIcon() {\n\t\treturn html`<vwc-icon class=\"icon\" inline type=\"${this.icon}\"></vwc-icon>`;\n\t}\n\n\tprivate graphicSlotChanged() {\n\t\tconst headerElement = this.shadowRoot?.querySelector('header');\n\t\tconst slot = headerElement?.querySelector('slot[name=\"graphic\"]') as HTMLSlotElement;\n\t\tthis.IconSlottedItems = slot.assignedNodes();\n\t\tif (this.headerContentExists) {\n\t\t\theaderElement?.classList.remove('no-content');\n\t\t} else {\n\t\t\theaderElement?.classList.add('no-content');\n\t\t}\n\t}\n\n\tprivate footerSlotChanged(): void {\n\t\tconst slot = this.shadowRoot?.querySelector('slot[name=\"footer\"]') as HTMLSlotElement;\n\t\tthis.#shouldShowFooterSlot = Boolean(slot.assignedNodes().length);\n\t\tthis.requestUpdate();\n\t}\n}\n"]}
|