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 branch 'develop' into develop

Browse source
This commit is contained in:
Vincent Chavez 2017-05-19 09:43:14 -07:00 committed by GitHub
commit 4c89a683ee
16 changed files with 285 additions and 196 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -534,6 +534,7 @@
:md-cancel-text="prompt.cancel"
@open="onOpen"
@close="onClose"
v-model="prompt.value"
ref="dialog6">
</md-dialog-prompt>

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

@ -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
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() {

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

@ -1,7 +1,7 @@
@import '../../core/stylesheets/variables.scss';
@import '../mdCheckbox/mdCheckbox.scss';
$radio-size: 20px;
$radio-ripple-size: 48px;
$radio-touch-size: 48px;
.md-radio {
@ -58,8 +58,8 @@ $radio-touch-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;
});
}

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

@ -0,0 +1,38 @@
export var changeHtmlMetaColor;
export var createNewStyleElement;
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;
}
};
}

240
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,170 +24,158 @@ 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 (!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 (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);
document.head.appendChild(themeColorElement);
}
};
function injectStyle(style, spec, name, styleId) {
if (createNewStyleElement) {
style = parseStyle(style, spec, name);
style = style.replace(/THEME_NAME/g, styleId);
createNewStyleElement(style, styleId);
}
}
export default function install(Vue) {
Vue.material = new Vue({
data: () => ({
data: {
currentTheme: 'default',
inkRipple: true,
prefix: 'md-theme-',
styles: [],
currentTheme: null,
inkRipple: true
}),
themes: {
default: DEFAULT_THEME_COLORS
}
},
watch: {
styles() {
this.refreshInjectedStyles();
}
},
methods: {
registerPalette(name, spec) {
palette[name] = spec;
},
useTheme(name) {
if (name in injectedStyles) {
return;
}
const spec = this.themes[name];
if (!spec) {
return warnNotFound(name);
}
injectStyle(this.styles.join('\n'), spec, name, this.prefix + name);
return injectedStyles[name] = true;
},
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);
});
},
registerTheme(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]);
}
},
setCurrentTheme(name) {
if (name === this.currentTheme) {
return;
}
registerAllThemes(theme, this.styles);
},
applyCurrentTheme(themeName) {
changeHtmlMetaColor(registeredPrimaryColor[themeName]);
document.body.classList.remove('md-theme-' + this.currentTheme);
document.body.classList.add('md-theme-' + themeName);
this.currentTheme = themeName;
},
setCurrentTheme(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.`);
}
const prefix = this.prefix;
this.applyCurrentTheme('default');
this.useTheme(name);
if (changeHtmlMetaColor) {
changeHtmlMetaColor(
registeredPrimaryColor[name],
prefix + this.currentTheme,
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);
}
}
};

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 {