Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-03-16 22:10:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'origin/develop' into components/mdDatepicker

Browse source 
* origin/develop:
  mdSwitch can be used without v-model (#607) (#622)
  md-slect: key navigation ignores mdSubheader onEnter (#592) (#623)
  Fix subtotal not updating (#625)
  Fix undefined variable in md-radio SCSS (#635)
  Refactor Theme Engine (#646)
  some required scss imports added (#670)
  Fixes #629 Unable to set disabled property of md-bottom-bar-item (#689)
  Dont overwrite currentSize of mdTablePagination (#692)
  Fix radio button null value (#693)
  DOCS: Added missing argument in code example (#702)
  Allow object for option in select (#708)
  Fix floating action button incoherent move #713 (#714)
  Added the code samples for Demo in List Components (Multiple options, Multiple Expand) (#725)
  adding click handler (#726)
  fix md-tabs not properly flexed when applied with md-fixed (#636)
  fix language more gender neutral #633 (#637)
This commit is contained in:
Marcos Moura 2017-05-07 20:09:48 -03:00
commit e7eb23456e
31 changed files with 323 additions and 218 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
README.md
View file

@ -28,9 +28,9 @@
</a>
</p>
Vue Material is lightweight framework built exactly according to the <a href="http://material.google.com" target="_blank">Material Design</a> specs.
Vue Material is lightweight framework built exactly according to the <a href="http://material.google.com" target="_blank">Material Design</a> specs.
It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to all modern Web Browsers through Vue 2.
It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to all modern Web Browsers through Vue 2.
Build powerful and well-designed web apps that can fit on every screen. You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API.
@ -114,11 +114,11 @@ Vue Material supports the latest version of all Browsers. This means:
* Thanks a lot to <a href="https://github.com/elviskang" target="_blank">elviskang</a> for donating the npm package name!
* Thanks to <a href="https://github.com/yyx990803" target="_blank">Evan You</a> for allowing me to use Vue.js Logo.
## Internal Dependencies
## Internal Dependencies
You don't need to include any other library to work with vue-material. The focus of this project is to have a standalone build with no external dependence, but aiming to deliver the best experience without break the compatibility with the Vue.js core.
* <a href="http://vuejs.org" target="_blank">vue</a>
* <a href="http://www.jacklmoore.com/autosize/" target="_blank">autosize</a>
* <a href="https://www.npmjs.com/package/element.scrollintoviewifneeded-polyfill" target="_blank">element.scrollintoviewifneeded-polyfill</a>
## License
## License
MIT

2
docs/src/pages/components/BottomBar.vue
View file

@ -94,7 +94,7 @@
<md-table-row>
<md-table-cell>disabled</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Disable the item and prevent his actions. Default <code>false</code></md-table-cell>
<md-table-cell>Disable the item and prevent its actions. Default <code>false</code></md-table-cell>
</md-table-row>
</md-table-body>
</md-table>

14
docs/src/pages/components/Buttons.vue
View file

@ -26,7 +26,7 @@
<md-table-row>
<md-table-cell>disabled</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Disable the button and prevent his actions. Default <code>false</code></md-table-cell>
<md-table-cell>Disable the button and prevent its actions. Default <code>false</code></md-table-cell>
</md-table-row>
<md-table-row>
@ -79,32 +79,32 @@
<md-table-row>
<md-table-cell>md-fab-top-left</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the top left of his parent</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the top left of its parent</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-fab-top-center</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the top center of his parent</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the top center of its parent</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-fab-top-right</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the top right of his parent</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the top right of its parent</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-fab-bottom-left</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the bottom left of his parent</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the bottom left of its parent</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-fab-bottom-center</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the bottom center of his parent</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the bottom center of its parent</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-fab-bottom-right</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the bottom right of his parent</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the bottom right of its parent</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>

4
docs/src/pages/components/Checkbox.vue
View file

@ -43,7 +43,7 @@
<md-table-row>
<md-table-cell>disabled</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Disable the checkbox and prevent his actions. Default <code>false</code></md-table-cell>
<md-table-cell>Disable the checkbox and prevent its actions. Default <code>false</code></md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
@ -61,7 +61,7 @@
<md-table-row>
<md-table-cell>change</md-table-cell>
<md-table-cell>Receive the state of the checkbox</md-table-cell>
<md-table-cell>Triggered when the checkbox changes his value.</md-table-cell>
<md-table-cell>Triggered when the checkbox changes its value.</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>

4
docs/src/pages/components/Chips.vue
View file

@ -20,7 +20,7 @@
<md-table-row>
<md-table-cell>disabled</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Disable the chip and prevent his actions. Default: <code>false</code></md-table-cell>
<md-table-cell>Disable the chip and prevent its actions. Default: <code>false</code></md-table-cell>
</md-table-row>
<md-table-row>
@ -81,7 +81,7 @@
<md-table-row>
<md-table-cell>disabled</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Disable the chips and prevent his actions. Default: <code>false</code></md-table-cell>
<md-table-cell>Disable the chips and prevent its actions. Default: <code>false</code></md-table-cell>
</md-table-row>
<md-table-row>

1
docs/src/pages/components/Dialog.vue
View file

@ -534,6 +534,7 @@
:md-cancel-text=&quot;prompt.cancel&quot;
@open=&quot;onOpen&quot;
@close=&quot;onClose&quot;
v-model=&quot;prompt.value&quot;
ref=&quot;dialog6&quot;&gt;
&lt;/md-dialog-prompt&gt;

2
docs/src/pages/components/File.vue
View file

@ -38,7 +38,7 @@
<md-table-row>
<md-table-cell>disabled</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Disable the input and prevent his actions. Default <code>false</code></md-table-cell>
<md-table-cell>Disable the input and prevent its actions. Default <code>false</code></md-table-cell>
</md-table-row>
<md-table-row>

4
docs/src/pages/components/Input.vue
View file

@ -86,7 +86,7 @@
<md-table-row>
<md-table-cell>disabled</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Disable the input and prevent his actions. Default <code>false</code></md-table-cell>
<md-table-cell>Disable the input and prevent its actions. Default <code>false</code></md-table-cell>
</md-table-row>
<md-table-row>
@ -136,7 +136,7 @@
<md-table-row>
<md-table-cell>disabled</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Disable the textarea and prevent his actions. Default <code>false</code></md-table-cell>
<md-table-cell>Disable the textarea and prevent its actions. Default <code>false</code></md-table-cell>
</md-table-row>
<md-table-row>

62
docs/src/pages/components/List.vue
View file

@ -68,7 +68,7 @@
<md-table-row>
<md-table-cell>disabled</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Disable the item and prevent his actions. Default <code>false</code></md-table-cell>
<md-table-cell>Disable the item and prevent its actions. Default <code>false</code></md-table-cell>
</md-table-row>
</md-table-row>
@ -974,6 +974,17 @@
<div slot="code">
<code-block lang="xml">
&lt;div class="phone-viewport"&gt;
&lt;md-list&gt;
&lt;md-list-item&gt;Plain Text&lt;/md-list-item&gt;
&lt;md-list-item target="_blank" href="https://google.com"&gt;Link&lt;/md-list-item&gt;
&lt;md-list-item @click.native="openAlert"&gt;Button&lt;/md-list-item&gt;
&lt;md-list-item&gt;
&lt;router-link to="/components/list"&gt;Router View&lt;/router-link&gt;
&lt;/md-list-item&gt;
&lt;/md-list&gt;
&lt;/div&gt;
&lt;div class=&quot;phone-viewport&quot;&gt;
&lt;md-list&gt;
&lt;md-list-item&gt;
@ -1022,6 +1033,55 @@
&lt;/md-list-item&gt;
&lt;/md-list&gt;
&lt;/div&gt;
&lt;div class="phone-viewport"&gt;
&lt;md-list&gt;
&lt;md-list-item md-expand-multiple&gt;
&lt;md-icon&gt;whatshot&lt;/md-icon&gt;
&lt;span&gt;News&lt;/span&gt;
&lt;md-list-expand&gt;
&lt;md-list&gt;
&lt;md-list-item class="md-inset"&gt;World&lt;/md-list-item&gt;
&lt;md-list-item class="md-inset"&gt;Americas&lt;/md-list-item&gt;
&lt;md-list-item class="md-inset"&gt;Europe&lt;/md-list-item&gt;
&lt;/md-list&gt;
&lt;/md-list-expand&gt;
&lt;/md-list-item&gt;
&lt;md-list-item md-expand-multiple&gt;
&lt;md-icon&gt;videogame_asset&lt;/md-icon&gt;
&lt;span&gt;Games&lt;/span&gt;
&lt;md-list-expand&gt;
&lt;md-list&gt;
&lt;md-list-item class="md-inset"&gt;Console&lt;/md-list-item&gt;
&lt;md-list-item class="md-inset"&gt;PC&lt;/md-list-item&gt;
&lt;md-list-item class="md-inset"&gt;Phone&lt;/md-list-item&gt;
&lt;/md-list&gt;
&lt;/md-list-expand&gt;
&lt;/md-list-item&gt;
&lt;md-list-item md-expand-multiple&gt;
&lt;md-icon&gt;video_library&lt;/md-icon&gt;
&lt;span&gt;Video&lt;/span&gt;
&lt;md-list-expand&gt;
&lt;md-list&gt;
&lt;md-list-item class="md-inset"&gt;Humor&lt;/md-list-item&gt;
&lt;md-list-item class="md-inset"&gt;Music&lt;/md-list-item&gt;
&lt;md-list-item class="md-inset"&gt;Movies&lt;/md-list-item&gt;
&lt;md-list-item class="md-inset"&gt;TV Shows&lt;/md-list-item&gt;
&lt;/md-list&gt;
&lt;/md-list-expand&gt;
&lt;/md-list-item&gt;
&lt;md-list-item&gt;
&lt;md-icon&gt;shopping_basket&lt;/md-icon&gt;
&lt;span&gt;Shop&lt;/span&gt;
&lt;/md-list-item&gt;
&lt;/md-list&gt;
&lt;/div&gt;
</code-block>
</div>
</example-box>

2
docs/src/pages/components/Menu.vue
View file

@ -125,7 +125,7 @@
<md-table-row>
<md-table-cell>disabled</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Disable the button and prevent his actions. Default <code>false</code></md-table-cell>
<md-table-cell>Disable the button and prevent its actions. Default <code>false</code></md-table-cell>
</md-table-row>
</md-table-body>
</md-table>

4
docs/src/pages/components/Radio.vue
View file

@ -49,7 +49,7 @@
<md-table-row>
<md-table-cell>disabled</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Disable the radio and prevent his actions. Default <code>false</code></md-table-cell>
<md-table-cell>Disable the radio and prevent its actions. Default <code>false</code></md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
@ -67,7 +67,7 @@
<md-table-row>
<md-table-cell>change</md-table-cell>
<md-table-cell>Receive the state of the radio</md-table-cell>
<md-table-cell>Triggered when the radio changes his value.</md-table-cell>
<md-table-cell>Triggered when the radio changes its value.</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>

4
docs/src/pages/components/Select.vue
View file

@ -38,7 +38,7 @@
<md-table-row>
<md-table-cell>disabled</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Disable the input and prevent his actions. Default <code>false</code></md-table-cell>
<md-table-cell>Disable the input and prevent its actions. Default <code>false</code></md-table-cell>
</md-table-row>
<md-table-row>
@ -115,7 +115,7 @@
<md-table-row>
<md-table-cell>disabled</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Disable the button and prevent his actions. Default <code>false</code></md-table-cell>
<md-table-cell>Disable the button and prevent its actions. Default <code>false</code></md-table-cell>
</md-table-row>
</md-table-body>
</md-table>

8
docs/src/pages/components/SpeedDial.vue
View file

@ -20,22 +20,22 @@
<md-table-body>
<md-table-row>
<md-table-cell>md-fab-top-left</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the top left of his parent</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the top left of its parent</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-fab-top-center</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the top center of his parent</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the top center of its parent</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-fab-top-right</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the top right of his parent</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the top right of its parent</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-fab-bottom-left</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the bottom left of his parent</md-table-cell>
<md-table-cell>Position the md-fab absolutely on the bottom left of its parent</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>

4
docs/src/pages/components/Switch.vue
View file

@ -49,7 +49,7 @@
<md-table-row>
<md-table-cell>disabled</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Disable the switch and prevent his actions. Default <code>false</code></md-table-cell>
<md-table-cell>Disable the switch and prevent its actions. Default <code>false</code></md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
@ -67,7 +67,7 @@
<md-table-row>
<md-table-cell>change</md-table-cell>
<md-table-cell>Receive the state of the switch</md-table-cell>
<md-table-cell>Triggered when the switch changes his value.</md-table-cell>
<md-table-cell>Triggered when the switch changes its value.</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>

2
docs/src/pages/components/Tabs.vue
View file

@ -135,7 +135,7 @@
<md-table-row>
<md-table-cell>md-disabled</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Disable the tab and prevent his actions. Default <code>false</code></md-table-cell>
<md-table-cell>Disable the tab and prevent its actions. Default <code>false</code></md-table-cell>
</md-table-row>
<md-table-row>

2
src/components/mdBottomBar/mdBottomBarItem.vue
View file

@ -28,7 +28,7 @@
mdIconSrc: String,
mdIconset: String,
mdActive: Boolean,
disabled: String,
disabled: Boolean,
href: String
},
data() {

7
src/components/mdMenu/mdMenuContent.vue
View file

@ -50,8 +50,13 @@
},
fireClick() {
if (this.highlighted > 0) {
this.$children[0].$children[this.highlighted - 1].$el.click();
this.getOptions()[this.highlighted - 1].$el.click();
}
},
getOptions() {
return this.$children[0].$children.filter((child) => {
return child.$el.classList.contains('md-option');
});
}
},
mounted() {

10
src/components/mdRadio/mdRadio.scss
View file

@ -1,7 +1,7 @@
@import '../../core/stylesheets/variables.scss';
$radio-size: 20px;
$radio-ripple-size: 48px;
$radio-touch-size: 48px;
.md-radio {
width: auto;
@ -19,8 +19,8 @@ $radio-ripple-size: 48px;
transition: $swift-ease-out;
&:before {
width: $radio-ripple-size;
height: $radio-ripple-size;
width: $radio-touch-size;
height: $radio-touch-size;
position: absolute;
top: 50%;
left: 50%;
@ -57,8 +57,8 @@ $radio-ripple-size: 48px;
color: rgba(#000, .54);
.md-ripple {
width: $radio-ripple-size !important;
height: $radio-ripple-size !important;
width: $radio-touch-size !important;
height: $radio-touch-size !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;

4
src/components/mdRadio/mdRadio.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="md-radio" :class="[themeClass, classes]">
<div class="md-radio-container" @click="toggleCheck">
<input type="radio" :name="name" :id="id" :disabled="disabled" :value="value">
<input type="radio" :name="name" :id="id" :disabled="disabled" :value="value" @click="toggleCheck">
<md-ink-ripple :md-disabled="disabled" />
</div>
@ -32,7 +32,7 @@
computed: {
classes() {
return {
'md-checked': typeof this.value !== 'undefined' && this.mdValue.toString() === this.value.toString(),
'md-checked': typeof this.value !== 'undefined' && this.value !== null && this.mdValue.toString() === this.value.toString(),
'md-disabled': this.disabled
};
}

2
src/components/mdSelect/mdOption.vue
View file

@ -22,7 +22,7 @@
export default {
name: 'md-option',
props: {
value: [String, Boolean, Number]
value: [String, Boolean, Number, Object]
},
data: () => ({
parentSelect: {},

18
src/components/mdSnackbar/mdSnackbar.scss
View file

@ -177,21 +177,3 @@ $snackbar-space: $snackbar-height / 2;
}
}
}
.md-has-toast {
.md-fab.md-fab-top-right,
.md-fab.md-fab-top-center,
.md-fab.md-fab-top-left {
@include layout-xsmall {
transform: translate3D(0, $snackbar-height - 4px, 0);
}
}
.md-fab.md-fab-bottom-right,
.md-fab.md-fab-bottom-center,
.md-fab.md-fab-bottom-left {
@include layout-xsmall {
transform: translate3D(0, -$snackbar-height + 4px, 0);
}
}
}

4
src/components/mdSwitch/mdSwitch.vue
View file

@ -38,13 +38,13 @@
data() {
return {
leftPos: initialPosition,
checked: this.value
checked: Boolean(this.value)
};
},
computed: {
classes() {
return {
'md-checked': Boolean(this.value),
'md-checked': this.checked,
'md-disabled': this.disabled
};
},

7
src/components/mdTable/mdTablePagination.vue
View file

@ -49,11 +49,14 @@
subTotal: 0,
totalItems: 0,
currentPage: 1,
currentSize: 0
currentSize: parseInt(this.mdSize, 10)
};
},
watch: {
mdTotal(val) {
const sub = this.currentPage * this.currentSize;
this.subTotal = sub > val ? val : sub;
this.totalItems = isNaN(val) ? Number.MAX_SAFE_INTEGER : parseInt(val, 10);
},
mdSize(val) {
@ -108,7 +111,7 @@
this.$nextTick(() => {
this.subTotal = this.currentPage * this.currentSize;
this.mdPageOptions = this.mdPageOptions || [10, 25, 50, 100];
this.currentSize = this.mdPageOptions[0];
this.currentSize = this.mdPageOptions.includes(this.currentSize) ? this.currentSize : this.mdPageOptions[0];
this.canFireEvents = true;
});
}

8
src/components/mdTabs/mdTabs.scss
View file

@ -38,10 +38,16 @@ $tab-max-width: 264px;
}
&.md-centered {
justify-content: center;
.md-tabs-navigation-container {
justify-content: center;
}
}
&.md-fixed {
.md-tabs-navigation-container {
flex: 1;
}
.md-tab-header {
flex: 1;
}

41
src/core/components/mdTheme/dom.js Normal file
View file

@ -0,0 +1,41 @@
let changeHtmlMetaColor = null;
let createNewStyleElement = null;
if (process.env.VUE_ENV !== 'server') {
changeHtmlMetaColor = (color, themeClass, previousClass) => {
var elem = document.querySelector('meta[name="theme-color"]');
if (elem) {
elem.setAttribute('content', color);
} else {
elem = document.createElement('meta');
elem.setAttribute('name', 'theme-color');
elem.setAttribute('content', color);
document.head.appendChild(elem);
}
document.body.classList.remove(previousClass);
document.body.classList.add(themeClass);
};
createNewStyleElement = (style, styleId) => {
const head = document.head;
const styleElement = head.querySelector('#' + styleId);
if (!styleElement) {
const newTag = document.createElement('style');
newTag.type = 'text/css';
newTag.id = styleId;
newTag.textContent = style;
head.appendChild(newTag);
} else {
styleElement.textContent = style;
}
};
}
export changeHtmlMetaColor;
export createNewStyleElement;

209
src/core/components/mdTheme/index.js
View file

@ -1,8 +1,10 @@
import palette from './palette';
import rgba from './rgba';
import mdTheme from './mdTheme';
import { changeHtmlMetaColor, createNewStyleElement } from './dom';
const VALID_THEME_TYPE = ['primary', 'accent', 'background', 'warn', 'hue-1', 'hue-2', 'hue-3'];
const TYPE_REGEX = new RegExp('(' + VALID_THEME_TYPE.join('|').toUpperCase() + ')-(COLOR|CONTRAST)-?(A?\\d*)-?(\\d*\\.?\\d+)?', 'g');
const DEFAULT_THEME_COLORS = {
primary: 'indigo',
accent: 'pink',
@ -22,129 +24,87 @@ const DEFAULT_THEME_COLORS = {
}
};*/
const createNewStyleElement = (style, name) => {
let head = document.head;
let styleId = 'md-theme-' + name;
let styleElement = head.querySelector('#' + styleId);
if (!styleElement) {
let newTag = document.createElement('style');
style = style.replace(/THEME_NAME/g, styleId);
newTag.type = 'text/css';
newTag.id = styleId;
newTag.textContent = style;
head.appendChild(newTag);
} else {
styleElement.textContent = style;
}
};
let registeredThemes = [];
let registeredPrimaryColor = {};
const registeredPrimaryColor = {};
const injectedStyles = {};
const parseStyle = (style, theme, name) => {
VALID_THEME_TYPE.forEach((type) => {
style = style.replace(RegExp('(' + type.toUpperCase() + ')-(COLOR|CONTRAST)-?(A?\\d*)-?(\\d*\\.?\\d+)?', 'g'), (match, paletteType, colorType, hue, opacity) => {
let color;
let colorVariant = +hue === 0 ? 500 : hue;
return style.replace(TYPE_REGEX, (match, type, colorType, hue, opacity) => {
let color;
let colorVariant = +hue === 0 ? 500 : hue;
if (theme[type]) {
if (typeof theme[type] === 'string') {
color = palette[theme[type]];
} else {
color = palette[theme[type].color] || palette[DEFAULT_THEME_COLORS[type]];
colorVariant = +hue === 0 ? theme[type].hue : hue;
}
type = type.toLowerCase();
if (theme[type]) {
if (typeof theme[type] === 'string') {
color = palette[theme[type]];
} else {
color = palette[DEFAULT_THEME_COLORS[type]];
color = palette[theme[type].color] || palette[DEFAULT_THEME_COLORS[type]];
colorVariant = +hue === 0 ? theme[type].hue : hue;
}
} else {
color = palette[DEFAULT_THEME_COLORS[type]];
}
if (colorType === 'COLOR') {
let isDefault = palette[theme[type]];
if (colorType === 'COLOR') {
let isDefault = palette[theme[type]];
if (!colorVariant && !isDefault) {
if (type === 'accent') {
colorVariant = 'A200';
} else if (type === 'background') {
colorVariant = 50;
}
}
if (type === 'primary') {
registeredPrimaryColor[name] = color[colorVariant];
}
if (opacity) {
return rgba(color[colorVariant], opacity);
}
return color[colorVariant];
}
let isDarkText = color.darkText.indexOf(colorVariant) >= 0;
if (theme[type] && typeof theme[type] !== 'string' && theme[type].textColor) {
if (theme[type].textColor === 'black') {
isDarkText = true;
} else if (theme[type].textColor === 'white') {
isDarkText = false;
if (!colorVariant && !isDefault) {
if (type === 'accent') {
colorVariant = 'A200';
} else if (type === 'background') {
colorVariant = 50;
}
}
if (isDarkText) {
if (opacity) {
return rgba('#000', opacity);
}
return 'rgba(0, 0, 0, .87)';
if (type === 'primary') {
registeredPrimaryColor[name] = color[colorVariant];
}
if (opacity) {
return rgba('#fff', opacity);
return rgba(color[colorVariant], opacity);
}
return 'rgba(255, 255, 255, .87)';
});
});
return color[colorVariant];
}
return style;
};
let isDarkText = color.darkText.indexOf(colorVariant) >= 0;
const registerTheme = (theme, name, themeStyles) => {
let parsedStyle = [];
if (theme[type] && typeof theme[type] !== 'string' && theme[type].textColor) {
if (theme[type].textColor === 'black') {
isDarkText = true;
} else if (theme[type].textColor === 'white') {
isDarkText = false;
}
}
themeStyles.forEach((style) => {
parsedStyle.push(parseStyle(style, theme, name));
});
if (isDarkText) {
if (opacity) {
return rgba('#000', opacity);
}
createNewStyleElement(parsedStyle.join('\n'), name);
};
return 'rgba(0, 0, 0, .87)';
}
const registerAllThemes = (themes, themeStyles) => {
let themeNames = themes ? Object.keys(themes) : [];
if (opacity) {
return rgba('#fff', opacity);
}
themeNames.forEach((name) => {
registerTheme(themes[name], name, themeStyles);
registeredThemes.push(name);
return 'rgba(255, 255, 255, .87)';
});
};
const changeHtmlMetaColor = (color) => {
let themeColorElement = document.querySelector('meta[name="theme-color"]');
function warnNotFound(themeName) {
console.warn(`The theme '${themeName}' doesn't exists. You need to register it first in order to use.`);
}
if (themeColorElement) {
themeColorElement.setAttribute('content', color);
} else {
themeColorElement = document.createElement('meta');
themeColorElement.setAttribute('name', 'theme-color');
themeColorElement.setAttribute('content', color);
function injectStyle(style, spec, name, styleId) {
if (createNewStyleElement) {
style = parseStyle(style, spec, name);
style = style.replace(/THEME_NAME/g, styleId);
document.head.appendChild(themeColorElement);
createNewStyleElement(style, styleId);
}
};
}
export default function install(Vue) {
Vue.material.registerPalette = function(name, spec) {
@ -152,15 +112,37 @@ export default function install(Vue) {
};
Vue.material.registerTheme = function(name, spec) {
let theme = {};
if (typeof name === 'string') {
theme[name] = spec;
this.themes[name] = spec;
} else {
theme = name;
Object.keys(name).forEach((k) => this.themes[k] = name[k]);
}
};
Vue.material.useTheme = (name) => {
if (name in injectedStyles) {
return;
}
const spec = this.themes[name];
if (!spec) {
return warnNotFound(name);
}
registerAllThemes(theme, this.styles);
injectStyle(this.styles.join('\n'), spec, name, this.prefix + name);
return injectedStyles[name] = true;
};
Vue.material.refreshInjectedStyles = () => {
const styles = this.styles.join('\n');
const prefix = this.prefix;
Object.keys(injectedStyles).forEach((name) => {
const spec = this.themes[name];
injectStyle(styles, spec, name, prefix + name);
});
};
Vue.material.applyCurrentTheme = function(themeName) {
@ -170,17 +152,22 @@ export default function install(Vue) {
this.currentTheme = themeName;
};
Vue.material.setCurrentTheme = function(themeName) {
if (registeredThemes.indexOf(themeName) >= 0) {
this.applyCurrentTheme(themeName);
} else {
if (registeredThemes.indexOf('default') === -1) {
this.registerTheme('default', DEFAULT_THEME_COLORS);
} else {
console.warn(`The theme '${themeName}' doesn't exists. You need to register it first in order to use.`);
}
Vue.material.setCurrentTheme = function(name) {
if (name === this.currentTheme) {
return;
}
this.applyCurrentTheme('default');
this.useTheme(name);
if (changeHtmlMetaColor) {
changeHtmlMetaColor(
registeredPrimaryColor[name],
this.prefix + this.currentTheme,
this.prefix + name
);
}
this.currentTheme = name;
}
};

21
src/core/components/mdTheme/mdTheme.vue
View file

@ -8,17 +8,26 @@
default: 'default'
}
},
data: () => ({
name: 'md-theme'
}),
render(render) {
render(createElement) {
if (this.mdTag || this.$slots.default.length > 1) {
return render(this.mdTag || 'div', {
staticClass: 'md-theme'
return createElement(this.mdTag || 'div', {
staticClass: this.$material.prefix + this.mdName
}, this.$slots.default);
}
return this.$slots.default[0];
},
watch: {
mdName(value) {
this.$material.useTheme(value);
}
},
beforeMount() {
const localTheme = this.mdName;
if (localTheme) {
this.$material.useTheme(localTheme);
}
}
};
</script>

66
src/core/components/mdTheme/mixin.js
View file

@ -1,47 +1,43 @@
// Theme mixin
// Grab the closest ancestor component's `md-theme` attribute OR grab the
// `md-name` attribute from an `<md-theme>` component.
function getAncestorThemeName(component) {
if (!component) {
return null;
}
let name = component.mdTheme;
if (!name && component.$options._componentTag === 'md-theme') {
name = component.mdName;
}
return name || getAncestorThemeName(component.$parent);
}
export default {
props: {
mdTheme: String
},
data: () => ({
closestThemedParent: false
}),
methods: {
getClosestThemedParent($parent) {
if (!$parent || !$parent.$el || $parent._uid === 0) {
return false;
}
if ($parent.mdTheme || $parent.mdName) {
return $parent;
}
return this.getClosestThemedParent($parent.$parent);
}
},
computed: {
mdEffectiveTheme() {
return getAncestorThemeName(this) || this.$material.currentTheme;
},
themeClass() {
if (this.mdTheme) {
return 'md-theme-' + this.mdTheme;
}
let theme = this.closestThemedParent.mdTheme;
if (!theme) {
if (this.closestThemedParent) {
theme = this.closestThemedParent.mdName;
} else {
theme = this.$material.currentTheme;
}
}
return 'md-theme-' + theme;
return this.$material.prefix + this.mdEffectiveTheme;
}
},
mounted() {
this.closestThemedParent = this.getClosestThemedParent(this.$parent);
watch: {
mdTheme(value) {
this.$material.useTheme(value);
}
},
beforeMount() {
const localTheme = this.mdTheme;
if (!this.$material.currentTheme) {
this.$material.setCurrentTheme('default');
if (localTheme) {
this.$material.useTheme(localTheme);
}
}
};

12
src/core/material.js
View file

@ -4,6 +4,11 @@ export default new Vue({
data: () => ({
styles: [],
currentTheme: null,
prefix: 'md-theme-',
styles: [],
themes: {
default: DEFAULT_THEME_COLORS
},
inkRipple: true,
locale: {
startYear: 1900,
@ -16,5 +21,10 @@ export default new Vue({
shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
shorterMonths: ['J', 'F', 'M', 'A', 'M', 'Ju', 'Ju', 'A', 'Se', 'O', 'N', 'D']
}
})
}),
watch: {
styles() {
this.refreshInjectedStyles();
}
}
});

3
src/core/stylesheets/base.scss
View file

@ -1,3 +1,6 @@
@import 'variables.scss';
@import 'typography.scss';
/* Structure
========================================================================== */

2
src/core/stylesheets/scrollbar.scss
View file

@ -1,3 +1,5 @@
@import 'variables.scss';
.md-scrollbar {
&::-webkit-scrollbar,
::-webkit-scrollbar {