Skip to content

Commit dfd4cad

Browse files
pgbrosspgbross
committed
feat: use render functions or template
1 parent e5d8281 commit dfd4cad

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+442
-762
lines changed

‎demo/components/list/demo.vue

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,42 @@
44
<mdc-list dense bordered interactive>
55
<mdc-list-item>Single-line item</mdc-list-item>
66
<mdc-list-item>Single-line item</mdc-list-item>
7+
<mdc-list-divider></mdc-list-divider>
78
<mdc-list-item>Single-line item</mdc-list-item>
89
</mdc-list>
910
</mdc-layout-cell>
1011

1112
<mdc-layout-cell>
1213
<mdc-list two-line dense bordered>
1314
<mdc-list-item>
14-
<span>First line</span> <span slot="secondary">Second line</span>
15+
<span>First line</span>
16+
<span slot="secondary">Second line</span>
1517
</mdc-list-item>
1618
<mdc-list-item>
17-
<span>First line</span> <span slot="secondary">Second line</span>
19+
<span>First line</span>
20+
<span slot="secondary">Second line</span>
1821
</mdc-list-item>
1922
</mdc-list>
2023
</mdc-layout-cell>
2124

2225
<mdc-layout-cell>
2326
<mdc-list dense bordered interactive>
2427
<mdc-list-item>
25-
<i slot="start-detail" class="material-icons mdc-list-item__graphic"
26-
>favorite_border</i
27-
>
28+
<i slot="start-detail" class="material-icons mdc-list-item__graphic">favorite_border</i>
2829
start details
2930
</mdc-list-item>
3031
<mdc-list-item>
3132
end details
32-
<i slot="end-detail" class="material-icons mdc-list-item__meta"
33-
>star_border</i
34-
>
33+
<i slot="end-detail" class="material-icons mdc-list-item__meta">star_border</i>
3534
</mdc-list-item>
3635

3736
<mdc-list-item>
38-
<i slot="start-detail" class="material-icons mdc-list-item__graphic"
39-
>favorite_border</i
40-
>
37+
<i slot="start-detail" class="material-icons mdc-list-item__graphic">favorite_border</i>
4138
both details
42-
<i slot="end-detail" class="material-icons mdc-list-item__meta"
43-
>star_border</i
44-
>
39+
<i
40+
slot="end-detail"
41+
class="material-icons mdc-list-item__meta"
42+
>star_border</i>
4543
</mdc-list-item>
4644
</mdc-list>
4745
</mdc-layout-cell>
@@ -51,24 +49,21 @@
5149
<mdc-list-item>
5250
<div slot="start-detail" class="mdc-list-item__graphic">
5351
<mdc-radio name="wiffle"></mdc-radio>
54-
</div>
55-
start details
52+
</div>start details
5653
</mdc-list-item>
5754
<mdc-list-item>
5855
end details
59-
6056
<div slot="end-detail" class="mdc-list-item__meta">
6157
<mdc-radio name="wiffle"></mdc-radio>
6258
</div>
6359
</mdc-list-item>
6460
<mdc-list-item>
65-
<i slot="start-detail" class="material-icons mdc-list-item__graphic"
66-
>favorite_border</i
67-
>
61+
<i slot="start-detail" class="material-icons mdc-list-item__graphic">favorite_border</i>
6862
both details
69-
<i slot="end-detail" class="material-icons mdc-list-item__meta"
70-
>star_border</i
71-
>
63+
<i
64+
slot="end-detail"
65+
class="material-icons mdc-list-item__meta"
66+
>star_border</i>
7267
</mdc-list-item>
7368
</mdc-list>
7469
</mdc-layout-cell>

‎demo/components/select/demo.vue

Lines changed: 12 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,23 @@
11
<template>
22
<div class="mdc-demo mdc-demo--container">
33
<div>
4-
<mdc-select
5-
v-model="selectedType"
6-
label="Food"
7-
helptext="Pick a food group"
8-
>
9-
<option v-for="type in types" :value="type" :key="type">{{
4+
<mdc-select v-model="selectedType" label="Food" helptext="Pick a food group">
5+
<option v-for="type in types" :value="type" :key="type">
6+
{{
107
type
11-
}}</option>
8+
}}
9+
</option>
1210
</mdc-select>
1311

14-
<mdc-caption v-if="selectedType" tag="p"
15-
>Selected Type: {{ selectedType }}
16-
</mdc-caption>
12+
<mdc-caption v-if="selectedType" tag="p">Selected Type: {{ selectedType }}</mdc-caption>
1713

18-
<br /><br /><br />
19-
<mdc-select
20-
v-if="selectedType"
21-
v-model="selectedValue"
22-
outlined
23-
label="Kind"
24-
>
25-
<option
26-
v-for="option of options"
27-
:key="option"
28-
:value="option.toLowerCase()"
29-
>{{ option }}</option
30-
>
14+
<br>
15+
<br>
16+
<br>
17+
<mdc-select v-if="selectedType" v-model="selectedValue" outlined label="Kind">
18+
<option v-for="option of options" :key="option" :value="option.toLowerCase()">{{ option }}</option>
3119
</mdc-select>
32-
<mdc-caption v-if="selectedValue" tag="p"
33-
>Selected Value: {{ selectedValue }}
34-
</mdc-caption>
20+
<mdc-caption v-if="selectedValue" tag="p">Selected Value: {{ selectedValue }}</mdc-caption>
3521
</div>
3622
</div>
3723
</template>

‎demo/components/styles.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,4 @@
2323
@import '../packages/mcwv-tabs/index';
2424
@import '../packages/mcwv-textfield/index';
2525
@import '../packages/mcwv-top-app-bar/index';
26-
@import '../packages/mcwv-theme/index';
2726
@import '../packages/mcwv-typography/index';

‎demo/components/tabs/demo.vue

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
<template>
2-
<div class="">
3-
<mdc-subheading>Simple</mdc-subheading>
2+
<div class>
3+
<mdc-headline6>Simple</mdc-headline6>
44
<section class="mdc-demo mdc-demo--container">
55
<mdc-tab-bar @change="onSelected" activeTabIndex="1">
66
<mdc-tab v-for="item in items" :key="item.label">{{ item }}</mdc-tab>
77
</mdc-tab-bar>
88
</section>
9-
<br />
9+
<br>
1010
<div v-if="selectedItem" style="text-align: right">
1111
<mdc-caption>
12-
Selected: <span class="demo-tabs-selected">{{ selectedItem }}</span>
12+
Selected:
13+
<span class="demo-tabs-selected">{{ selectedItem }}</span>
1314
</mdc-caption>
1415
</div>
15-
<mdc-subheading>With icons and text</mdc-subheading>
16+
<mdc-headline6>With icons and text</mdc-headline6>
1617
<section class="mdc-demo mdc-demo--container">
1718
<mdc-tab-bar>
1819
<mdc-tab icon="phone">Recents</mdc-tab>

‎demo/components/theme/README.md

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎demo/components/theme/demo.vue

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎packages/mcwv-layout-grid/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { BasePlugin } from '@mcwv/base';
22
import mdcLayoutCell from './mdc-layout-cell.js';
3-
import mdcLayoutGrid from './mdc-layout-grid.vue';
3+
import mdcLayoutGrid from './mdc-layout-grid.js';
44
import mdcLayoutInnerGrid from './mdc-layout-inner-grid.js';
55

66
export { mdcLayoutGrid, mdcLayoutCell, mdcLayoutInnerGrid };

‎packages/mcwv-layout-grid/mdc-layout-grid.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
export default {
2+
name: 'mdc-layout-grid',
3+
props: {
4+
'fixed-column-width': Boolean,
5+
'align-left': Boolean,
6+
'align-right': Boolean,
7+
},
8+
functional: true,
9+
render(
10+
createElement,
11+
{
12+
props: { fixedColumnWidth, alignLeft, alignRight },
13+
slots,
14+
},
15+
) {
16+
return createElement(
17+
'div',
18+
{
19+
class: {
20+
'mdc-layout-grid': true,
21+
'mdc-layout-grid--fixed-column-width': fixedColumnWidth,
22+
'mdc-layout-grid--align-left': alignLeft,
23+
'mdc-layout-grid--align-right': alignRight,
24+
},
25+
},
26+
[
27+
createElement(
28+
'div',
29+
{ class: { 'mdc-layout-grid__inner': 1 } },
30+
slots().default,
31+
),
32+
],
33+
);
34+
},
35+
};

‎packages/mcwv-layout-grid/mdc-layout-grid.vue

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎packages/mcwv-linear-progress/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { BasePlugin } from '@mcwv/base';
2-
import mdcLinearProgress from './mdc-linear-progress.vue';
2+
import mdcLinearProgress from './mdc-linear-progress.js';
33

44
export { mdcLinearProgress };
55

0 commit comments

Comments
 (0)