` |
42 |
43 | ## Image List Item
44 |
45 | ### Props
46 |
47 | | Prop | Type | Default | Description |
48 | |------|------|---------|-------------|
49 | | adjustAspectRatio | Boolean | true | adjusts the ratio of images for standard columns |
50 |
51 | ### Slots
52 |
53 | | Slot | Description |
54 | |------|-------------|
55 | | default | image label |
56 | | image | img element |
57 |
58 | ### Reference
59 |
60 | - https://github.com/material-components/material-components-web/tree/master/packages/mdc-image-list
61 |
--------------------------------------------------------------------------------
/components/image-list/__tests__/__snapshots__/ImageList.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`ImageList should render as masonry 1`] = ``;
4 |
5 | exports[`ImageList should render as standard 1`] = ``;
6 |
7 | exports[`ImageList should render with no prop 1`] = ``;
8 |
9 | exports[`ImageList should render with text-protection 1`] = ``;
10 |
11 | exports[`ImageListItem should render with img 1`] = `
12 |
13 |
14 |
15 |
16 | `;
17 |
18 | exports[`ImageListItem should render with no prop 1`] = `
19 |
20 |
21 |
22 |
23 | `;
24 |
25 | exports[`ImageListItem should render without adjust aspect ratio 1`] = `
26 |
27 |
28 |
29 | `;
30 |
--------------------------------------------------------------------------------
/components/image-list/index.js:
--------------------------------------------------------------------------------
1 | import ImageList from './ImageList.vue'
2 | import ImageListItem from './ImageListItem.vue'
3 |
4 | import { initPlugin } from '../'
5 |
6 | const plugin = {
7 | install (vm) {
8 | vm.component('m-image-list', ImageList)
9 | vm.component('m-image-list-item', ImageListItem)
10 | }
11 | }
12 | export default plugin
13 |
14 | initPlugin(plugin)
15 |
--------------------------------------------------------------------------------
/components/image-list/styles.scss:
--------------------------------------------------------------------------------
1 | @import "@material/image-list/mdc-image-list";
2 |
3 | .image-list-standard-1 {
4 | @include mdc-image-list-standard-columns(1);
5 | }
6 | .image-list-standard-2 {
7 | @include mdc-image-list-standard-columns(2);
8 | }
9 | .image-list-standard-3 {
10 | @include mdc-image-list-standard-columns(3);
11 | }
12 | .image-list-standard-4 {
13 | @include mdc-image-list-standard-columns(4);
14 | }
15 | .image-list-standard-5 {
16 | @include mdc-image-list-standard-columns(5);
17 | }
18 | .image-list-standard-6 {
19 | @include mdc-image-list-standard-columns(6);
20 | }
21 | .image-list-standard-7 {
22 | @include mdc-image-list-standard-columns(7);
23 | }
24 | .image-list-standard-8 {
25 | @include mdc-image-list-standard-columns(8);
26 | }
27 | .image-list-standard-9 {
28 | @include mdc-image-list-standard-columns(9);
29 | }
30 | .image-list-standard-10 {
31 | @include mdc-image-list-standard-columns(10);
32 | }
33 | .image-list-standard-11 {
34 | @include mdc-image-list-standard-columns(11);
35 | }
36 | .image-list-standard-12 {
37 | @include mdc-image-list-standard-columns(12);
38 | }
39 |
40 | .image-list-masonry-1 {
41 | @include mdc-image-list-masonry-columns(1);
42 | }
43 | .image-list-masonry-2 {
44 | @include mdc-image-list-masonry-columns(2);
45 | }
46 | .image-list-masonry-3 {
47 | @include mdc-image-list-masonry-columns(3);
48 | }
49 | .image-list-masonry-4 {
50 | @include mdc-image-list-masonry-columns(4);
51 | }
52 | .image-list-masonry-5 {
53 | @include mdc-image-list-masonry-columns(5);
54 | }
55 | .image-list-masonry-6 {
56 | @include mdc-image-list-masonry-columns(6);
57 | }
58 | .image-list-masonry-7 {
59 | @include mdc-image-list-masonry-columns(7);
60 | }
61 | .image-list-masonry-8 {
62 | @include mdc-image-list-masonry-columns(8);
63 | }
64 | .image-list-masonry-9 {
65 | @include mdc-image-list-masonry-columns(9);
66 | }
67 | .image-list-masonry-10 {
68 | @include mdc-image-list-masonry-columns(10);
69 | }
70 | .image-list-masonry-11 {
71 | @include mdc-image-list-masonry-columns(11);
72 | }
73 | .image-list-masonry-12 {
74 | @include mdc-image-list-masonry-columns(12);
75 | }
76 |
--------------------------------------------------------------------------------
/components/index.js:
--------------------------------------------------------------------------------
1 | export * from './initPlugin.js'
2 |
--------------------------------------------------------------------------------
/components/initPlugin.js:
--------------------------------------------------------------------------------
1 | export function initPlugin (plugin) {
2 | if (typeof window !== 'undefined' && window.Vue) {
3 | window.Vue.use(plugin)
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/components/layout-grid/LayoutGrid.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
9 |
10 |
37 |
--------------------------------------------------------------------------------
/components/layout-grid/LayoutGridCell.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
9 |
10 |
61 |
--------------------------------------------------------------------------------
/components/layout-grid/LayoutGridInner.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
14 |
--------------------------------------------------------------------------------
/components/layout-grid/README.md:
--------------------------------------------------------------------------------
1 | ## LayoutGrid
2 |
3 | ### Markup
4 |
5 | ```html
6 |
7 |
8 |
9 | Cell 1
10 |
11 |
12 | Cell 2
13 |
14 |
15 |
16 | ```
17 |
18 | ### Props
19 |
20 | | Prop | Type | Default | Required | Description |
21 | |------|------|---------|----------|-------------|
22 | | align | String | - | false | alignment of grid: 'left' or 'right' |
23 | | fixedColumnWidth | Boolean | - | false | fixed column width |
24 |
25 | ### Slots
26 |
27 | | Slot | Description |
28 | |------|-------------|
29 | | default | should be LayoutInnerGrid |
30 |
31 | ## LayoutGridCell
32 |
33 | ### Props
34 |
35 | | Prop | Type | Default | Required | Description |
36 | |------|------|---------|----------|-------------|
37 | | span | Number | - | false | cell span from 1 to 12 |
38 | | spanDesktop | Number | - | false | cell span from 1 to 12 on desktop |
39 | | spanTablet | Number | - | false | cell span from 1 to 12 on tablet |
40 | | span Phone | Number | - | false | cell span from 1 to 12 on phone |
41 | | order | Number | - | false | cell order from 1 to 12 |
42 | | align | String | - | false | cell alignment could be 'top', 'middle' and 'bottom' |
43 |
44 | ### Slots
45 |
46 | | Slot | Description |
47 | |------|-------------|
48 | | default | content of GridCell |
49 |
50 | ## LayoutGridInner
51 |
52 | ### Slots
53 |
54 | | Slot | Description |
55 | |------|-------------|
56 | | default | should be GridCells |
57 |
58 | ### Reference
59 |
60 | - https://github.com/material-components/material-components-web/tree/master/packages/mdc-layout-grid
61 |
--------------------------------------------------------------------------------
/components/layout-grid/index.js:
--------------------------------------------------------------------------------
1 | import LayoutGrid from './LayoutGrid.vue'
2 | import LayoutGridCell from './LayoutGridCell.vue'
3 | import LayoutGridInner from './LayoutGridInner.vue'
4 | import './styles.scss'
5 |
6 | import { initPlugin } from '../'
7 |
8 | const plugin = {
9 | install (vm) {
10 | vm.component('m-layout-grid', LayoutGrid)
11 | vm.component('m-layout-grid-cell', LayoutGridCell)
12 | vm.component('m-layout-grid-inner', LayoutGridInner)
13 | }
14 | }
15 | export default plugin
16 |
17 | initPlugin(plugin)
18 |
--------------------------------------------------------------------------------
/components/layout-grid/styles.scss:
--------------------------------------------------------------------------------
1 | @import "@material/layout-grid/mdc-layout-grid";
--------------------------------------------------------------------------------
/components/line-ripple/LineRipple.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
69 |
--------------------------------------------------------------------------------
/components/line-ripple/README.md:
--------------------------------------------------------------------------------
1 | ## LineRipple
2 |
3 | ### Markup
4 |
5 | ```html
6 |
7 | ```
8 |
9 | ### Script
10 |
11 | ```javascript
12 | this.$refs.rp.activate()
13 | ```
14 |
15 | ### Methods
16 |
17 | | Method | Description |
18 | |--------|-------------|
19 | | activate() | activate the line ripple |
20 | | deactivate() | deactivate the line ripple |
21 | | setRippleCenter(xCoordinate) | set ripple center by x-coordinate |
22 |
23 |
24 | ### Reference
25 |
26 | - https://github.com/material-components/material-components-web/tree/master/packages/mdc-line-ripple
--------------------------------------------------------------------------------
/components/line-ripple/index.js:
--------------------------------------------------------------------------------
1 | import LineRipple from './LineRipple.vue'
2 | import './styles.scss'
3 |
4 | import { initPlugin } from '../'
5 |
6 | const plugin = {
7 | install (vm) {
8 | vm.component('m-line-ripple', LineRipple)
9 | }
10 | }
11 | export default plugin
12 |
13 | initPlugin(plugin)
14 |
--------------------------------------------------------------------------------
/components/line-ripple/styles.scss:
--------------------------------------------------------------------------------
1 | @import "@material/line-ripple/mdc-line-ripple";
--------------------------------------------------------------------------------
/components/linear-progress/LinearProgress.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
3 |
9 |
10 |
11 |
12 |
13 |
26 |
--------------------------------------------------------------------------------
/components/list/ListGroupDivider.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
33 |
--------------------------------------------------------------------------------
/components/list/ListGroupSubheader.vue:
--------------------------------------------------------------------------------
1 |
27 |
--------------------------------------------------------------------------------
/components/list/__test__/__snapshots__/List.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`List Divider should render as inset 1`] = ``;
4 |
5 | exports[`List Divider should render as padded 1`] = ``;
6 |
7 | exports[`List Divider should render with no prop 1`] = ``;
8 |
9 | exports[`List Group Divider should render as inset 1`] = `
`;
10 |
11 | exports[`List Group Divider should render as padded 1`] = `
`;
12 |
13 | exports[`List Group Divider should render with no prop 1`] = `
`;
14 |
15 | exports[`List Group Subheader should render as h1 1`] = ``;
16 |
17 | exports[`List Group Subheader should render with no prop 1`] = ``;
18 |
19 | exports[`List Group should render with no prop 1`] = `
20 |
21 |
22 |
23 | `;
24 |
25 | exports[`List Item should render as activated 1`] = `
26 |
27 |
28 |
29 | `;
30 |
31 | exports[`List Item should render as disabled 1`] = `
32 |
33 |
34 |
35 | `;
36 |
37 | exports[`List Item should render as selected 1`] = `
38 |
39 |
40 |
41 | `;
42 |
43 | exports[`List Item should render with no prop 1`] = `
44 |
45 |
46 |
47 | `;
48 |
49 | exports[`List should render as avatar 1`] = ``;
50 |
51 | exports[`List should render as dense 1`] = ``;
52 |
53 | exports[`List should render as div 1`] = ``;
54 |
55 | exports[`List should render as nav 1`] = ``;
56 |
57 | exports[`List should render as non interactive 1`] = ``;
58 |
59 | exports[`List should render as two line 1`] = ``;
60 |
61 | exports[`List should render with no prop 1`] = ``;
62 |
--------------------------------------------------------------------------------
/components/list/index.js:
--------------------------------------------------------------------------------
1 | import List from './List.vue'
2 | import ListDivider from './ListDivider.vue'
3 | import ListGroup from './ListGroup.vue'
4 | import ListGroupDivider from './ListGroupDivider.vue'
5 | import ListGroupSubheader from './ListGroupSubheader.vue'
6 | import ListItem from './ListItem.vue'
7 | import './styles.scss'
8 |
9 | import { initPlugin } from '../'
10 |
11 | const plugin = {
12 | install (vm) {
13 | vm.component('m-list', List)
14 | vm.component('m-list-divider', ListDivider)
15 | vm.component('m-list-group', ListGroup)
16 | vm.component('m-list-group-divider', ListGroupDivider)
17 | vm.component('m-list-group-subheader', ListGroupSubheader)
18 | vm.component('m-list-item', ListItem)
19 | }
20 | }
21 | export default plugin
22 |
23 | initPlugin(plugin)
24 |
--------------------------------------------------------------------------------
/components/list/styles.scss:
--------------------------------------------------------------------------------
1 | @import "@material/list/mdc-list";
--------------------------------------------------------------------------------
/components/menu/MenuAnchor.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
--------------------------------------------------------------------------------
/components/menu/MenuSelectionGroup.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 |
37 |
38 |
41 |
--------------------------------------------------------------------------------
/components/menu/__test__/Menu.spec.js:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils'
2 | import Menu from '../Menu.vue'
3 | import MenuAnchor from '../MenuAnchor.vue'
4 | import MenuSurface from '../MenuSurface'
5 | import MenuSelectionGroup from '../MenuSelectionGroup'
6 | import 'mutationobserver-shim'
7 |
8 | describe('Menu', () => {
9 | it('should mount', () => {
10 | const wrapper = mount(Menu)
11 | expect(wrapper.isVueInstance()).toBeTruthy()
12 | })
13 |
14 | it('should render with no prop', () => {
15 | const wrapper = mount(Menu)
16 | expect(wrapper).toMatchSnapshot()
17 | expect(wrapper.classes()).toContain('mdc-menu')
18 | expect(wrapper.classes()).toContain('mdc-menu-surface')
19 | })
20 |
21 | it('should render as fixed', () => {
22 | const wrapper = mount(Menu, {
23 | propsData: {
24 | fixed: true
25 | }
26 | })
27 | expect(wrapper).toMatchSnapshot()
28 | })
29 | })
30 |
31 | describe('MenuSurface', () => {
32 | it('should mount', () => {
33 | const wrapper = mount(MenuSurface)
34 | expect(wrapper.isVueInstance()).toBeTruthy()
35 | })
36 |
37 | it('should render with no prop', () => {
38 | const wrapper = mount(MenuSurface)
39 | expect(wrapper).toMatchSnapshot()
40 | expect(wrapper.classes()).toContain('mdc-menu-surface')
41 | })
42 |
43 | it('should render as fixed', () => {
44 | const wrapper = mount(MenuSurface, {
45 | propsData: {
46 | fixed: true
47 | }
48 | })
49 | expect(wrapper).toMatchSnapshot()
50 | })
51 | })
52 |
53 | describe('MenuAnchor', () => {
54 | it('should mount', () => {
55 | const wrapper = mount(MenuAnchor)
56 | expect(wrapper.isVueInstance()).toBeTruthy()
57 | })
58 |
59 | it('should render with no prop', () => {
60 | const wrapper = mount(MenuAnchor)
61 | expect(wrapper).toMatchSnapshot()
62 | expect(wrapper.classes()).toContain('mdc-menu-surface--anchor')
63 | })
64 | })
65 |
66 | describe('MenuSelectionGroup', () => {
67 | it('should mount', () => {
68 | const wrapper = mount(MenuSelectionGroup)
69 | expect(wrapper.isVueInstance()).toBeTruthy()
70 | })
71 |
72 | it('should render with no prop', () => {
73 | const wrapper = mount(MenuSelectionGroup)
74 | expect(wrapper).toMatchSnapshot()
75 | expect(wrapper.classes()).toContain('mdc-menu__selection-group')
76 | })
77 | })
78 |
--------------------------------------------------------------------------------
/components/menu/__test__/__snapshots__/Menu.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Menu should render as fixed 1`] = ``;
4 |
5 | exports[`Menu should render with no prop 1`] = ``;
6 |
7 | exports[`MenuAnchor should render with no prop 1`] = ``;
8 |
9 | exports[`MenuSelectionGroup should render with no prop 1`] = ``;
10 |
11 | exports[`MenuSurface should render as fixed 1`] = ``;
12 |
13 | exports[`MenuSurface should render with no prop 1`] = ``;
14 |
--------------------------------------------------------------------------------
/components/menu/index.js:
--------------------------------------------------------------------------------
1 | import Menu from './Menu.vue'
2 | import MenuAnchor from './MenuAnchor.vue'
3 | import MenuSurface from './MenuSurface.vue'
4 | import MenuSelectionGroup from './MenuSelectionGroup'
5 | import './styles.scss'
6 |
7 | import { initPlugin } from '../'
8 |
9 | const plugin = {
10 | install (vm) {
11 | vm.component('m-menu', Menu)
12 | vm.component('m-menu-anchor', MenuAnchor)
13 | vm.component('m-menu-surface', MenuSurface)
14 | vm.component('m-menu-selection-group', MenuSelectionGroup)
15 | }
16 | }
17 | export default plugin
18 |
19 | initPlugin(plugin)
20 |
--------------------------------------------------------------------------------
/components/menu/styles.scss:
--------------------------------------------------------------------------------
1 | @import "@material/menu-surface/mdc-menu-surface";
2 | @import "@material/menu/mdc-menu";
--------------------------------------------------------------------------------
/components/notched-outline/NotchedOutline.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
9 |
10 |
11 |
3 |
4 |
5 |
6 |
7 |
58 |
--------------------------------------------------------------------------------
/components/ripple/index.js:
--------------------------------------------------------------------------------
1 | import Ripple from './Ripple.vue'
2 | import { MDCRipple } from '@material/ripple'
3 | import './styles.scss'
4 |
5 | import { initPlugin } from '../'
6 |
7 | function setupClasses (el, binding) {
8 | const mod = binding.modifiers
9 | mod.customized ? el.classList.remove('mdc-ripple-surface') : el.classList.add('mdc-ripple-surface')
10 | mod.primary ? el.classList.add('mdc-ripple-surface--primary') : el.classList.remove('mdc-ripple-surface--primary')
11 | mod.accent ? el.classList.add('mdc-ripple-surface--accent') : el.classList.remove('mdc-ripple-surface--accent')
12 | }
13 |
14 | const plugin = {
15 | install (vm) {
16 | vm.component('m-ripple', Ripple)
17 | vm.directive('ripple', {
18 | bind: function (el, binding) {
19 | setupClasses(el, binding)
20 | if (!binding.modifiers['css-only']) {
21 | const mdcRipple = MDCRipple.attachTo(el)
22 | Object.defineProperty(el, 'mdcRipple', {
23 | configurable: true,
24 | enumerable: false,
25 | value: mdcRipple,
26 | writable: false
27 | })
28 | }
29 | },
30 | unbind: function (el) {
31 | if (el.mdcRipple) {
32 | el.mdcRipple.destroy()
33 | }
34 | }
35 | })
36 | }
37 | }
38 | export default plugin
39 |
40 | initPlugin(plugin)
41 |
--------------------------------------------------------------------------------
/components/ripple/styles.scss:
--------------------------------------------------------------------------------
1 | @import "@material/ripple/mdc-ripple";
--------------------------------------------------------------------------------
/components/select/SelectHelperText.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
10 |
11 |
12 |
65 |
66 |
69 |
--------------------------------------------------------------------------------
/components/select/SelectIcon.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 | {{ icon }}
10 |
11 |
12 |
13 |
14 |
82 |
83 |
86 |
--------------------------------------------------------------------------------
/components/select/index.js:
--------------------------------------------------------------------------------
1 | import Select from './Select.vue'
2 | import SelectHelperText from './SelectHelperText.vue'
3 | import SelectIcon from './SelectIcon'
4 | import './styles.scss'
5 |
6 | import { initPlugin } from '../'
7 |
8 | const plugin = {
9 | install (vm) {
10 | vm.component('m-select', Select)
11 | vm.component('m-select-helper-text', SelectHelperText)
12 | vm.component('m-select-icon', SelectIcon)
13 | }
14 | }
15 | export default plugin
16 |
17 | initPlugin(plugin)
18 |
--------------------------------------------------------------------------------
/components/select/styles.scss:
--------------------------------------------------------------------------------
1 | @import "@material/list/mdc-list";
2 | @import "@material/menu-surface/mdc-menu-surface";
3 | @import "@material/menu/mdc-menu";
4 | @import "@material/select/mdc-select";
5 | @import "@material/notched-outline/mdc-notched-outline";
6 | @import "@material/select/helper-text/mdc-select-helper-text";
7 |
--------------------------------------------------------------------------------
/components/shape/README.md:
--------------------------------------------------------------------------------
1 | ## Shape
2 |
3 | ### Markup
4 |
5 | ```html
6 |
10 |
13 | Button
14 |
15 |
16 | ```
17 |
18 | ### Style
19 |
20 | ```scss
21 | @import "@material/shape/mixins";
22 |
23 | .my-shape-container {
24 | @include mdc-shape-angled-corner(#fff, 10px);
25 | }
26 | ```
27 | ### Props
28 |
29 | | Prop | Type | Default | Description |
30 | |------|------|---------|-------------|
31 | | topLeft | Boolean | false | top left corner will be angled |
32 | | topRight | Boolean | false | top right corner will be angled |
33 | | bottomLeft | Boolean | false | bottom left corner will be angled |
34 | | bottomRight | Boolean | false | bottom right corner will be angled |
35 |
36 | ### Slots
37 |
38 | | Slot | Description |
39 | |------|-------------|
40 | | default | unelevated component |
41 |
42 | ### Reference
43 |
44 | - https://github.com/material-components/material-components-web/tree/master/packages/mdc-shape
45 |
--------------------------------------------------------------------------------
/components/shape/Shape.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
8 |
12 |
16 |
20 |
6 | {{ currentLength }} / {{ maxLength }}
7 |
8 |
9 |
10 |
71 |
72 |
75 |
--------------------------------------------------------------------------------
/components/text-field/TextFieldHelperLine.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
9 |
10 |
18 |
--------------------------------------------------------------------------------
/components/text-field/TextFieldHelperText.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
9 |
10 |
11 |
70 |
--------------------------------------------------------------------------------
/components/text-field/TextFieldIcon.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 | {{ icon }}
10 |
11 |
12 |
13 |
84 |
--------------------------------------------------------------------------------
/components/text-field/index.js:
--------------------------------------------------------------------------------
1 | import TextField from './TextField.vue'
2 | import TextFieldHelperText from './TextFieldHelperText.vue'
3 | import TextFieldCharacterCounter from './TextFieldCharacterCounter'
4 | import TextFieldHelperLine from './TextFieldHelperLine'
5 | import './styles.scss'
6 |
7 | import { initPlugin } from '../'
8 | import TextFieldIcon from './TextFieldIcon'
9 |
10 | const plugin = {
11 | install (vm) {
12 | vm.component('m-text-field', TextField)
13 | vm.component('m-text-field-helper-text', TextFieldHelperText)
14 | vm.component('m-text-field-helper-line', TextFieldHelperLine)
15 | vm.component('m-text-field-character-counter', TextFieldCharacterCounter)
16 | vm.component('m-text-field-icon', TextFieldIcon)
17 | }
18 | }
19 | export default plugin
20 |
21 | initPlugin(plugin)
22 |
--------------------------------------------------------------------------------
/components/text-field/styles.scss:
--------------------------------------------------------------------------------
1 | @import "@material/textfield/mdc-text-field";
2 | @import "@material/textfield/helper-text/mdc-text-field-helper-text";
3 |
--------------------------------------------------------------------------------
/components/theme/README.md:
--------------------------------------------------------------------------------
1 | ## Theme
2 |
3 | This component can be used for runtime theming and avoiding SASS if you don't need the flexibility.
4 | If you want to create a static customized style than you should consider using SASS - working with
5 | variables in SASS is easier and faster.
6 |
7 | All content that will be rendered in a theme component will be styled with the given custom style.
8 | This way it is possible to have several different themed components grouped together.
9 |
10 | ### Markup
11 |
12 | ```html
13 |
14 | themed content
15 |
16 | ```
17 | ### Script
18 |
19 | ```javascript
20 | const customStyle = {
21 | --mdc-theme-primary: '#4286f4'
22 | }
23 | ```
24 |
25 | ### Props
26 |
27 | | Prop | Type | Default | Description |
28 | |------|------|---------|-------------|
29 | | customStyles | Object | {} | customize theme variables |
30 |
31 | ### Slots
32 |
33 | | Slot | Description |
34 | |------|-------------|
35 | | default | themed content |
36 |
37 | For a complete list of all CSS custom properties have a look at the [reference](https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme#css-custom-properties).
38 |
39 | ### Reference
40 |
41 | - https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme
42 |
--------------------------------------------------------------------------------
/components/theme/Theme.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
17 |
--------------------------------------------------------------------------------
/components/theme/index.js:
--------------------------------------------------------------------------------
1 | import Theme from './Theme.vue'
2 | import './styles.scss'
3 |
4 | import { initPlugin } from '../'
5 |
6 | const plugin = {
7 | install (vm) {
8 | vm.component('m-theme', Theme)
9 | }
10 | }
11 | export default plugin
12 |
13 | initPlugin(plugin)
14 |
--------------------------------------------------------------------------------
/components/theme/styles.scss:
--------------------------------------------------------------------------------
1 | @import "@material/theme/mdc-theme";
--------------------------------------------------------------------------------
/components/top-app-bar/TopAppBarFixedAdjust.vue:
--------------------------------------------------------------------------------
1 |
43 |
--------------------------------------------------------------------------------
/components/top-app-bar/index.js:
--------------------------------------------------------------------------------
1 | import TopAppBar from './TopAppBar.vue'
2 | import TopAppBarFixedAdjust from './TopAppBarFixedAdjust.vue'
3 | import './styles.scss'
4 |
5 | import { initPlugin } from '../'
6 |
7 | const plugin = {
8 | install (vm) {
9 | vm.component('m-top-app-bar', TopAppBar)
10 | vm.component('m-top-app-bar-fixed-adjust', TopAppBarFixedAdjust)
11 | }
12 | }
13 | export default plugin
14 |
15 | initPlugin(plugin)
16 |
--------------------------------------------------------------------------------
/components/top-app-bar/styles.scss:
--------------------------------------------------------------------------------
1 | @import "@material/top-app-bar/mdc-top-app-bar";
2 |
--------------------------------------------------------------------------------
/components/typography/Body.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
28 |
--------------------------------------------------------------------------------
/components/typography/Button.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
14 |
--------------------------------------------------------------------------------
/components/typography/Caption.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
14 |
--------------------------------------------------------------------------------
/components/typography/Headline.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
28 |
--------------------------------------------------------------------------------
/components/typography/Overline.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
14 |
--------------------------------------------------------------------------------
/components/typography/README.md:
--------------------------------------------------------------------------------
1 | ## Typography
2 |
3 | ### Markup
4 |
5 | ```html
6 |
7 | Headline
8 | Overline
9 | Subheading 1
10 | Body 2
11 | Caption
12 | Button
13 |
14 | ```
15 |
16 | ### Slots
17 |
18 | | Slot | Description |
19 | |------|-------------|
20 | | default | typography content |
21 |
22 | ## Body
23 |
24 | ### Props
25 |
26 | | Prop | Type | Default | Description |
27 | |------|------|---------|-------------|
28 | | level | Number | - | body level could be 1 or 2 |
29 |
30 | ### Slots
31 |
32 | | Slot | Description |
33 | |------|-------------|
34 | | default | content |
35 |
36 | ## Button
37 |
38 | ### Slots
39 |
40 | | Slot | Description |
41 | |------|-------------|
42 | | default | content |
43 |
44 | ## Caption
45 |
46 | ### Slots
47 |
48 | | Slot | Description |
49 | |------|-------------|
50 | | default | content |
51 |
52 | ## Headline
53 |
54 | ### Props
55 |
56 | | Prop | Type | Default | Description |
57 | |------|------|---------|-------------|
58 | | level | Boolean | false | headline level between 1 and 6 |
59 |
60 | ### Slots
61 |
62 | | Slot | Description |
63 | |------|-------------|
64 | | default | content |
65 |
66 | ## Subheading
67 |
68 | ### Props
69 |
70 | | Prop | Type | Default | Description |
71 | |------|------|---------|-------------|
72 | | level | Number | - | subheading level could be 1 or 2 |
73 |
74 | ### Slots
75 |
76 | | Slot | Description |
77 | |------|-------------|
78 | | default | content |
79 |
80 | ## Overline
81 |
82 | ### Slots
83 |
84 | | Slot | Description |
85 | |------|-------------|
86 | | default | content |
87 |
88 | ### Reference
89 |
90 | - https://github.com/material-components/material-components-web/tree/master/packages/mdc-toolbar
91 |
--------------------------------------------------------------------------------
/components/typography/Subheading.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
28 |
--------------------------------------------------------------------------------
/components/typography/Typography.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
14 |
--------------------------------------------------------------------------------
/components/typography/index.js:
--------------------------------------------------------------------------------
1 | import Body from './Body.vue'
2 | import Button from './Button.vue'
3 | import Caption from './Caption.vue'
4 | import Headline from './Headline.vue'
5 | import Overline from './Overline.vue'
6 | import Subheading from './Subheading.vue'
7 | import Typography from './Typography.vue'
8 | import './styles.scss'
9 |
10 | import { initPlugin } from '../'
11 |
12 | const plugin = {
13 | install (vm) {
14 | vm.component('m-typo-body', Body)
15 | vm.component('m-typo-button', Button)
16 | vm.component('m-typo-caption', Caption)
17 | vm.component('m-typo-headline', Headline)
18 | vm.component('m-typo-overline', Overline)
19 | vm.component('m-typo-subheading', Subheading)
20 | vm.component('m-typography', Typography)
21 | }
22 | }
23 | export default plugin
24 |
25 | initPlugin(plugin)
26 |
--------------------------------------------------------------------------------
/components/typography/styles.scss:
--------------------------------------------------------------------------------
1 | @import "@material/typography/mdc-typography";
--------------------------------------------------------------------------------
/docs/.vuepress/components/ButtonDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
15 | Button
16 |
20 |
21 |
22 |
25 |
26 |
27 |
28 |
49 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/CardDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
8 |
9 |
10 | Title
11 |
12 |
13 | Lorem ipsum dolor sit amet, consectetur adipiscing elit,
14 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
15 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
16 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
17 |
18 |
19 |
20 | full bleed
21 |
22 |
23 |
24 | action
25 |
26 |
27 | action
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
41 |
42 |
43 |
44 |
59 |
60 |
71 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/CardMediaDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
9 |
10 |
11 |
12 | Cats
13 |
14 |
15 | We all love them!
16 |
17 |
18 |
20 | action
21 |
22 |
23 |
24 |
27 |
28 |
29 |
30 |
43 |
44 |
65 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/CheckboxDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
8 |
9 |
12 |
13 |
14 |
15 |
31 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/ChipsInputDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
9 |
13 | {{city}}
14 |
15 |
16 |
21 |
22 |
25 |
26 |
27 |
28 |
44 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/ComponentLayout.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/ComponentProps.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Props
7 |
8 |
9 |
10 |
15 |
16 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
34 |
35 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
71 |
72 |
78 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/ComponentSection.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 |
17 |
18 |
32 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/DismissibleDrawerDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
12 |
13 |
18 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/ElevationDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
13 |
40 |
41 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/FabDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
10 | {{text}}
11 |
12 |
13 |
14 |
17 |
18 |
19 |
20 |
48 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/LayoutGridDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
19 |
20 |
21 |
22 |
44 |
45 |
51 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/LinearProgressDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
10 |
11 |
12 |
13 |
28 |
29 |
32 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/ListWithActivatedItemDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Inbox
7 |
8 |
9 |
10 | Star
11 |
12 |
13 |
14 | Send
15 |
16 |
17 |
18 | Drafts
19 |
20 |
21 |
22 |
23 |
24 |
29 |
30 |
37 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/ListWithTrailingCheckboxDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 |
9 |
10 |
11 |
14 |
15 |
16 |
17 |
18 |
21 |
22 |
23 |
24 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
41 |
42 |
49 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/ListWithTrailingRadioButtonsDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 |
9 |
10 |
11 |
14 |
15 |
16 |
17 |
18 |
21 |
22 |
23 |
24 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
41 |
42 |
49 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/MenuDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | open
6 |
8 |
9 |
10 |
11 |
12 |
13 | Refresh
14 |
15 |
16 |
17 | Favorite
18 |
19 |
20 |
21 |
22 | Add space before paragraph
23 |
24 |
25 |
26 |
27 |
30 |
31 |
32 |
33 |
62 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/MenuSurfaceDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
8 |
9 | Menu Surface
10 |
11 |
12 |
13 |
14 |
17 |
3 |
4 |
5 |
6 |
7 |
8 |
11 |
12 |
13 |
14 |
31 |
32 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/SingleLineListDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Line item
5 | Line item
6 | Line item
7 |
8 |
9 |
10 |
11 |
16 |
17 |
24 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/SliderDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
8 |
10 |
11 |
14 |
15 |
16 |
17 |
33 |
34 |
37 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/SnackbarDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Open Snackbar
5 |
8 |
9 |
12 |
13 |
14 |
15 |
38 |
39 |
41 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/SwitchDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
12 |
3 |
4 |
10 |
17 | Recents
18 |
19 |
26 | Nearby
27 |
28 |
35 | Favorite
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
74 |
75 |
77 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/TopAppBarDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
12 |
13 |
18 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/TwoLineListDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Line item
7 |
8 |
9 | Secondary text
10 |
11 |
12 |
13 |
14 | Line item
15 |
16 |
17 | Secondary text
18 |
19 |
20 |
21 |
22 | Line item
23 |
24 |
25 | Secondary text
26 |
27 |
28 |
29 |
30 |
31 |
32 |
37 |
38 |
45 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/TwoLineWithLeadingAndTrailingIconAndDividerDemo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Dog Photos
8 |
9 |
10 | 9 Jan 2018
11 |
12 |
13 |
14 |
15 |
16 |
17 | Cat Photos
18 |
19 |
20 | 22 Dec 2017
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | Potatoes
29 |
30 |
31 | 30 Noc 2017
32 |
33 |
34 |
35 |
36 |
37 |
38 | Carrots
39 |
40 |
41 | 17 Oct 2017
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
54 |
55 |
62 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/ripple/MyButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
10 |
11 |
--------------------------------------------------------------------------------
/docs/.vuepress/config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const nodeModules = path.resolve('node_modules/')
3 |
4 | module.exports = {
5 | title: 'Material Components Vue',
6 | description: 'Material Design components for Vue.js',
7 | base: '/material-components-vue/',
8 | head: [
9 | ['link', { rel: 'icon', href: '/logo.png'}]
10 | ],
11 | themeConfig: {
12 | repo: 'matsp/material-components-vue',
13 | nav: [
14 | { text: 'Guide', link: '/guide/' },
15 | { text: 'Components', link: '/components/' }
16 | ]
17 | },
18 | scss: {
19 | sassOptions: {
20 | includePaths: [nodeModules]
21 | }
22 | },
23 | port: 9090
24 | }
25 |
--------------------------------------------------------------------------------
/docs/.vuepress/enhanceApp.js:
--------------------------------------------------------------------------------
1 | import './styles.scss'
2 |
3 | import AutoInit from '../../components/auto-init'
4 | import Button from '../../components/button'
5 | import Icon from '../../components/icon'
6 | import Radio from '../../components/radio'
7 | import FormField from '../../components/form-field'
8 | import Checkbox from '../../components/checkbox'
9 | import Select from '../../components/select'
10 | import Card from '../../components/card'
11 | import Chips from '../../components/chips'
12 | import TextField from '../../components/text-field'
13 | import FloatingLabel from '../../components/floating-label'
14 | import LineRipple from '../../components/line-ripple'
15 | import NotchedOutline from '../../components/notched-outline'
16 | import List from '../../components/list'
17 | import Menu from '../../components/menu'
18 | import LayoutGrid from '../../components/layout-grid'
19 | import Typography from '../../components/typography'
20 | import Fab from '../../components/fab'
21 | import IconButton from '../../components/icon-button'
22 | import Dialog from '../../components/dialog'
23 | import Drawer from '../../components/drawer'
24 | import TopAppBar from '../../components/top-app-bar'
25 | import ImageList from '../../components/image-list'
26 | import Slider from '../../components/slider'
27 | import Switch from '../../components/switch'
28 | import LinearProgress from '../../components/linear-progress'
29 | import Snackbar from '../../components/snackbar'
30 | import Tabs from '../../components/tabs'
31 | import Ripple from '../../components/ripple'
32 | import Elevation from '../../components/elevation'
33 |
34 | export default ({
35 | Vue, // the version of Vue being used in the VuePress app
36 | options, // the options for the root Vue instance
37 | router, // the router instance for the app
38 | siteData // site metadata
39 | }) => {
40 | Vue.use(AutoInit)
41 | Vue.use(Button)
42 | Vue.use(Icon)
43 | Vue.use(Radio)
44 | Vue.use(Checkbox)
45 | Vue.use(FormField)
46 | Vue.use(Select)
47 | Vue.use(Card)
48 | Vue.use(Chips)
49 | Vue.use(TextField)
50 | Vue.use(FloatingLabel)
51 | Vue.use(LineRipple)
52 | Vue.use(NotchedOutline)
53 | Vue.use(LayoutGrid)
54 | Vue.use(Typography)
55 | Vue.use(Fab)
56 | Vue.use(IconButton)
57 | Vue.use(List)
58 | Vue.use(Menu)
59 | Vue.use(Dialog)
60 | Vue.use(Drawer)
61 | Vue.use(TopAppBar)
62 | Vue.use(ImageList)
63 | Vue.use(Slider)
64 | Vue.use(Switch)
65 | Vue.use(LinearProgress)
66 | Vue.use(Snackbar)
67 | Vue.use(Tabs)
68 | Vue.use(Ripple)
69 | Vue.use(Elevation)
70 | }
71 |
--------------------------------------------------------------------------------
/docs/.vuepress/override.styl:
--------------------------------------------------------------------------------
1 | // showing default values
2 | // $accentColor = #3eaf7c
3 | $accentColor = #5e35b1
4 | $textColor = #2c3e50
5 | $borderColor = #eaecef
6 | $codeBgColor = #282c34
--------------------------------------------------------------------------------
/docs/.vuepress/public/assets/fonts/materialicons-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matsp/material-components-vue/eca355adb4fd3379cbe7b96ce5ebb015a4ead865/docs/.vuepress/public/assets/fonts/materialicons-regular.woff
--------------------------------------------------------------------------------
/docs/.vuepress/public/assets/fonts/materialicons-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matsp/material-components-vue/eca355adb4fd3379cbe7b96ce5ebb015a4ead865/docs/.vuepress/public/assets/fonts/materialicons-regular.woff2
--------------------------------------------------------------------------------
/docs/.vuepress/public/assets/fonts/roboto-300.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matsp/material-components-vue/eca355adb4fd3379cbe7b96ce5ebb015a4ead865/docs/.vuepress/public/assets/fonts/roboto-300.woff
--------------------------------------------------------------------------------
/docs/.vuepress/public/assets/fonts/roboto-300.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matsp/material-components-vue/eca355adb4fd3379cbe7b96ce5ebb015a4ead865/docs/.vuepress/public/assets/fonts/roboto-300.woff2
--------------------------------------------------------------------------------
/docs/.vuepress/public/assets/fonts/roboto-500.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matsp/material-components-vue/eca355adb4fd3379cbe7b96ce5ebb015a4ead865/docs/.vuepress/public/assets/fonts/roboto-500.woff
--------------------------------------------------------------------------------
/docs/.vuepress/public/assets/fonts/roboto-500.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matsp/material-components-vue/eca355adb4fd3379cbe7b96ce5ebb015a4ead865/docs/.vuepress/public/assets/fonts/roboto-500.woff2
--------------------------------------------------------------------------------
/docs/.vuepress/public/assets/fonts/roboto-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matsp/material-components-vue/eca355adb4fd3379cbe7b96ce5ebb015a4ead865/docs/.vuepress/public/assets/fonts/roboto-regular.woff
--------------------------------------------------------------------------------
/docs/.vuepress/public/assets/fonts/roboto-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matsp/material-components-vue/eca355adb4fd3379cbe7b96ce5ebb015a4ead865/docs/.vuepress/public/assets/fonts/roboto-regular.woff2
--------------------------------------------------------------------------------
/docs/.vuepress/public/assets/images/cat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matsp/material-components-vue/eca355adb4fd3379cbe7b96ce5ebb015a4ead865/docs/.vuepress/public/assets/images/cat.jpg
--------------------------------------------------------------------------------
/docs/.vuepress/public/assets/images/cat_169.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matsp/material-components-vue/eca355adb4fd3379cbe7b96ce5ebb015a4ead865/docs/.vuepress/public/assets/images/cat_169.jpg
--------------------------------------------------------------------------------
/docs/.vuepress/public/assets/images/mcv-hero.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matsp/material-components-vue/eca355adb4fd3379cbe7b96ce5ebb015a4ead865/docs/.vuepress/public/assets/images/mcv-hero.png
--------------------------------------------------------------------------------
/docs/.vuepress/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matsp/material-components-vue/eca355adb4fd3379cbe7b96ce5ebb015a4ead865/docs/.vuepress/public/logo.png
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | home: true
3 | heroImage: /assets/images/mcv-hero.png
4 | actionText: Get Started →
5 | actionLink: /guide/
6 | features:
7 | - title: Material Design Specs
8 | details: This library wraps the official Google mdc-web components which implement the Material Design specs.
9 | - title: Easy API
10 | details: Simple and small as possible component APIs, without reinventing HTML.
11 | - title: Decoupled Components
12 | details: Any component can be imported and used on it's own.
13 | footer: MIT Licensed | Copyright © 2017-present Mats Pfeiffer
14 | ---
15 |
16 | ## Quick Start
17 |
18 | ```bash
19 | npm install --save material-components-vue
20 |
21 | # or with yarn
22 | yarn add material-components-vue
23 | ```
24 |
25 | ```vue
26 |
27 | Hello
28 |
29 |
30 |
33 |
34 |
37 | ```
38 |
39 |
--------------------------------------------------------------------------------
/docs/components/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar: auto
3 | ---
4 |
5 | # Components
6 |
7 | ::: warning
8 | This projects includes all components that are available at the official mdc-web repository!
9 |
10 | The demonstration in this page is a work in progress..
11 | :::
12 |
13 | ## Button
14 |
15 |
16 |
17 | ## Card
18 |
19 |
20 |
21 | ### Media Card
22 |
23 |
24 |
25 | ## Checkbox
26 |
27 |
28 |
29 | ## Chips
30 |
31 | ### Chips
32 |
33 |
34 |
35 | ## Elevation
36 |
37 |
38 |
39 | ## Fab
40 |
41 |
42 |
43 |
46 |
47 | ## Icon Button
48 |
49 |
50 |
51 | ## Menu
52 |
53 |
54 |
55 | ## Menu Surface
56 |
57 |
58 |
59 | ## Data Table (using Auto Init)
60 |
61 |
62 |
63 | ## Dialog
64 |
65 |
66 |
67 | ## Drawer
68 |
69 | ### [Permanent Drawer](permanentDrawer.html)
70 |
71 |
72 |
73 | ### [Dismissible Drawer](dismissibleDrawer.html)
74 |
75 |
76 |
77 | ### [Modal Drawer](modalDrawer.html)
78 |
79 |
80 |
81 | ## Image List
82 |
83 |
84 |
85 | ## Select Menus
86 |
87 |
88 |
89 | ## Slider
90 |
91 |
92 |
93 | ## Switch
94 |
95 |
96 |
97 | ## Text Field
98 |
99 |
100 |
101 | ## Layout Grid
102 |
103 |
104 |
105 | ## Linear Progress
106 |
107 |
108 |
109 | ## List
110 |
111 | ### Single-line List
112 |
113 |
114 |
115 | ### Two-line list
116 |
117 |
118 |
119 | ### List with activated item
120 |
121 |
122 |
123 | ### Two-Line with Leading and Trailing Icon and Divider
124 |
125 |
126 |
127 | ### List with Trailing Radio Buttons
128 |
129 |
130 |
131 | ### List with Trailing Checkbox
132 |
133 |
134 |
135 | ## Ripple
136 |
137 |
138 |
139 | ## Snackbar
140 |
141 |
142 |
143 | ## Tabs
144 |
145 |
146 |
147 | ## [Top App Bar](top-app-bar.html)
148 |
149 |
150 |
--------------------------------------------------------------------------------
/docs/components/dismissibleDrawer.md:
--------------------------------------------------------------------------------
1 | ---
2 | navbar: false
3 | sidebar: false
4 | pageClass: custom-page-class
5 | layout: drawer-DismissibleDrawerDemo
6 | ---
7 |
--------------------------------------------------------------------------------
/docs/components/modalDrawer.md:
--------------------------------------------------------------------------------
1 | ---
2 | navbar: false
3 | sidebar: false
4 | pageClass: custom-page-class
5 | layout: drawer-ModalDrawerDemo
6 | ---
7 |
--------------------------------------------------------------------------------
/docs/components/permanentDrawer.md:
--------------------------------------------------------------------------------
1 | ---
2 | navbar: false
3 | sidebar: false
4 | pageClass: custom-page-class
5 | layout: drawer-PermanentDrawerDemo
6 | ---
7 |
--------------------------------------------------------------------------------
/docs/components/top-app-bar.md:
--------------------------------------------------------------------------------
1 | ---
2 | navbar: false
3 | sidebar: false
4 | pageClass: custom-page-class
5 | layout: topAppBar-Demo
6 | ---
7 |
--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "config:base"
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const merge = require('webpack-merge')
3 | const common = require('./webpack.config.common')
4 |
5 | const root = path.join(__dirname)
6 |
7 | module.exports = merge(common, {
8 | mode: 'development',
9 | target: 'web',
10 | output: {
11 | path: path.resolve(root + '/dist'),
12 | filename: '[name]/index.js',
13 | libraryTarget: 'umd'
14 | }
15 | })
16 |
--------------------------------------------------------------------------------
/webpack.config.min.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
3 | const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
4 | const merge = require('webpack-merge')
5 | const common = require('./webpack.config.common')
6 |
7 | const root = path.join(__dirname)
8 |
9 | module.exports = merge(common, {
10 | mode: 'production',
11 | target: 'web',
12 | output: {
13 | path: path.resolve(root + '/dist'),
14 | filename: '[name]/[name].min.js',
15 | libraryTarget: 'umd'
16 | },
17 | plugins: [
18 | new UglifyJSPlugin({
19 | uglifyOptions: {
20 | ecma: 5
21 | },
22 | cache: true,
23 | parallel: true,
24 | extractComments: true
25 | }),
26 | new OptimizeCssAssetsPlugin()
27 | ]
28 | })
29 |
--------------------------------------------------------------------------------
11 | Cat
12 | 