mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-04 13:34:45 +00:00
remove ripple directive and use the new component
This commit is contained in:
Marcos Moura
parent
ebf6396290
commit
6b762b9fc5
13 changed files with 77 additions and 164 deletions
|
|
@ -60,6 +60,12 @@
|
|||
<md-table-cell><code>String</code></md-table-cell>
|
||||
<md-table-cell>Create a anchor on the item - In this case the generated tag will be <code><a></code>.</md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<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-row>
|
||||
</md-table-body>
|
||||
</md-table>
|
||||
</api-table>
|
||||
|
|
|
|||
|
|
@ -362,8 +362,10 @@
|
|||
</md-card>
|
||||
|
||||
<md-card md-with-hover>
|
||||
<md-card-media v-md-ink-ripple>
|
||||
<md-card-media>
|
||||
<img src="assets/card-image-1.jpg" alt="People">
|
||||
|
||||
<md-ink-ripple />
|
||||
</md-card-media>
|
||||
|
||||
<md-card-actions>
|
||||
|
|
@ -425,8 +427,10 @@
|
|||
</md-card>
|
||||
|
||||
<md-card md-with-hover>
|
||||
<md-card-media v-md-ink-ripple>
|
||||
<md-card-media>
|
||||
<img src="assets/card-image-1.jpg" alt="People">
|
||||
|
||||
<md-ink-ripple></md-ink-ripple>
|
||||
</md-card-media>
|
||||
|
||||
<md-card-actions>
|
||||
|
|
|
|||
|
|
@ -89,20 +89,20 @@
|
|||
|
||||
<example-box card-title="Themes">
|
||||
<div slot="demo">
|
||||
<md-checkbox md-name="orange" id="my-test5" name="my-test5" v-model="checkbox2" class="md-primary">Primary Orange</md-checkbox>
|
||||
<md-checkbox md-name="green" id="my-test6" name="my-test6" v-model="checkbox2" class="md-primary">Primary Green</md-checkbox>
|
||||
<md-checkbox md-name="light-blue" id="my-test7" name="my-test7" v-model="checkbox2" class="md-primary">Primary Light Blue</md-checkbox>
|
||||
<md-checkbox md-name="indigo" id="my-test8" name="my-test8" v-model="checkbox2" class="md-primary">Primary Indigo</md-checkbox>
|
||||
<md-checkbox md-name="brown" id="my-test9" name="my-test9" v-model="checkbox2" class="md-primary" disabled>Primary Brown Disabled</md-checkbox>
|
||||
<md-checkbox md-theme="orange" id="my-test5" name="my-test5" v-model="checkbox2" class="md-primary">Primary Orange</md-checkbox>
|
||||
<md-checkbox md-theme="green" id="my-test6" name="my-test6" v-model="checkbox2" class="md-primary">Primary Green</md-checkbox>
|
||||
<md-checkbox md-theme="light-blue" id="my-test7" name="my-test7" v-model="checkbox2" class="md-primary">Primary Light Blue</md-checkbox>
|
||||
<md-checkbox md-theme="indigo" id="my-test8" name="my-test8" v-model="checkbox2" class="md-primary">Primary Indigo</md-checkbox>
|
||||
<md-checkbox md-theme="brown" id="my-test9" name="my-test9" v-model="checkbox2" class="md-primary" disabled>Primary Brown Disabled</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<md-checkbox md-name="orange" id="my-test5" name="my-test5" v-model="checkbox2" class="md-primary">Primary Orange</md-checkbox>
|
||||
<md-checkbox md-name="green" id="my-test6" name="my-test6" v-model="checkbox2" class="md-primary">Primary Green</md-checkbox>
|
||||
<md-checkbox md-name="light-blue" id="my-test7" name="my-test7" v-model="checkbox2" class="md-primary">Primary Light Blue</md-checkbox>
|
||||
<md-checkbox md-name="indigo" id="my-test8" name="my-test8" v-model="checkbox2" class="md-primary">Primary Indigo</md-checkbox>
|
||||
<md-checkbox md-name="brown" id="my-test9" name="my-test9" v-model="checkbox2" class="md-primary" disabled>Primary Brown Disabled</md-checkbox>
|
||||
<md-checkbox md-theme="orange" id="my-test5" name="my-test5" v-model="checkbox2" class="md-primary">Primary Orange</md-checkbox>
|
||||
<md-checkbox md-theme="green" id="my-test6" name="my-test6" v-model="checkbox2" class="md-primary">Primary Green</md-checkbox>
|
||||
<md-checkbox md-theme="light-blue" id="my-test7" name="my-test7" v-model="checkbox2" class="md-primary">Primary Light Blue</md-checkbox>
|
||||
<md-checkbox md-theme="indigo" id="my-test8" name="my-test8" v-model="checkbox2" class="md-primary">Primary Indigo</md-checkbox>
|
||||
<md-checkbox md-theme="brown" id="my-test9" name="my-test9" v-model="checkbox2" class="md-primary" disabled>Primary Brown Disabled</md-checkbox>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
|
|
|||
|
|
@ -45,6 +45,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: .38;
|
||||
}
|
||||
|
||||
.md-bottom-bar.md-shift & {
|
||||
min-width: 56px;
|
||||
max-width: 96px;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
.md-bottom-bar-item {
|
||||
color: #{'BACKGROUND-CONTRAST-0.54'};
|
||||
|
||||
&:hover:not(.md-active) {
|
||||
&:hover:not([disabled]):not(.md-active) {
|
||||
color: #{'BACKGROUND-CONTRAST-0.87'};
|
||||
}
|
||||
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
.md-bottom-bar-item {
|
||||
color: #{'PRIMARY-CONTRAST-0.54'};
|
||||
|
||||
&:hover:not(.md-active) {
|
||||
&:hover:not([disabled]):not(.md-active) {
|
||||
color: #{'PRIMARY-CONTRAST-0.87'};
|
||||
}
|
||||
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
.md-bottom-bar-item {
|
||||
color: #{'ACCENT-CONTRAST-0.54'};
|
||||
|
||||
&:hover:not(.md-active) {
|
||||
&:hover:not([disabled]):not(.md-active) {
|
||||
color: #{'ACCENT-CONTRAST-0.87'};
|
||||
}
|
||||
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
.md-bottom-bar-item {
|
||||
color: #{'WARN-CONTRAST-0.54'};
|
||||
|
||||
&:hover:not(.md-active) {
|
||||
&:hover:not([disabled]):not(.md-active) {
|
||||
color: #{'WARN-CONTRAST-0.87'};
|
||||
}
|
||||
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
.md-bottom-bar-item {
|
||||
color: #{'BACKGROUND-CONTRAST-0.54'};
|
||||
|
||||
&:hover:not(.md-active) {
|
||||
&:hover:not([disabled]):not(.md-active) {
|
||||
color: #{'BACKGROUND-CONTRAST-0.87'};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,19 @@
|
|||
<template>
|
||||
<a :href="href" class="md-bottom-bar-item" :class="classes" v-md-ink-ripple @click="setActive" v-if="href">
|
||||
<a :href="href" class="md-bottom-bar-item" :class="classes" :disabled="disabled" @click="setActive" v-if="href">
|
||||
<md-icon>{{ mdIcon }}</md-icon>
|
||||
|
||||
<md-ink-ripple :md-disabled="disabled" />
|
||||
|
||||
<span class="md-text">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<button type="button" class="md-bottom-bar-item" :class="classes" v-md-ink-ripple @click="setActive" v-else>
|
||||
<button type="button" class="md-bottom-bar-item" :class="classes" :disabled="disabled" @click="setActive" v-else>
|
||||
<md-icon>{{ mdIcon }}</md-icon>
|
||||
|
||||
<md-ink-ripple :md-disabled="disabled" />
|
||||
|
||||
<span class="md-text">
|
||||
<slot></slot>
|
||||
</span>
|
||||
|
|
@ -21,6 +25,7 @@
|
|||
props: {
|
||||
mdIcon: String,
|
||||
mdActive: Boolean,
|
||||
disabled: String,
|
||||
href: String
|
||||
},
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -9,23 +9,25 @@
|
|||
border-color: #{'ACCENT-CONTRAST'};
|
||||
}
|
||||
}
|
||||
|
||||
.md-ink-ripple {
|
||||
color: #{'ACCENT-COLOR'};
|
||||
}
|
||||
|
||||
.md-ripple {
|
||||
opacity: .38;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-primary.md-checked {
|
||||
.md-checkbox-container {
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
border-color: #{'PRIMARY-COLOR'};
|
||||
.md-ink-ripple {
|
||||
color: #{'ACCENT-COLOR'};
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-color: #{'PRIMARY-CONTRAST'};
|
||||
.md-ripple {
|
||||
opacity: .26;
|
||||
}
|
||||
|
||||
&.md-primary {
|
||||
&.md-checked {
|
||||
.md-checkbox-container {
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
border-color: #{'PRIMARY-COLOR'};
|
||||
|
||||
&:after {
|
||||
border-color: #{'PRIMARY-CONTRAST'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -34,13 +36,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.md-warn.md-checked {
|
||||
.md-checkbox-container {
|
||||
background-color: #{'WARN-COLOR'};
|
||||
border-color: #{'WARN-COLOR'};
|
||||
&.md-warn {
|
||||
&.md-checked {
|
||||
.md-checkbox-container {
|
||||
background-color: #{'WARN-COLOR'};
|
||||
border-color: #{'WARN-COLOR'};
|
||||
|
||||
&:after {
|
||||
border-color: #{'WARN-CONTRAST'};
|
||||
&:after {
|
||||
border-color: #{'WARN-CONTRAST'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<template>
|
||||
<div class="md-checkbox" :class="[themeClass, classes]">
|
||||
<div class="md-checkbox-container" @click.stop="toggleCheck" v-md-ink-ripple="disabled" tabindex="0">
|
||||
<div class="md-checkbox-container" @click.stop="toggleCheck" tabindex="0">
|
||||
<input type="checkbox" :name="name" :id="id" :disabled="disabled" :value="value" tabindex="-1">
|
||||
<md-ink-ripple :md-disabled="disabled" />
|
||||
</div>
|
||||
|
||||
<label :for="id || name" class="md-checkbox-label" v-if="$slots.default">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<template>
|
||||
<div class="md-radio" :class="[themeClass, classes]">
|
||||
<div class="md-radio-container" @click="toggleCheck" v-md-ink-ripple="disabled">
|
||||
<div class="md-radio-container" @click="toggleCheck">
|
||||
<input type="radio" :name="name" :id="id" :disabled="disabled" :value="value">
|
||||
<md-ink-ripple :md-disabled="disabled" />
|
||||
</div>
|
||||
|
||||
<label :for="id || name" class="md-radio-label" v-if="$slots.default">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<template>
|
||||
<div class="md-switch" :class="[themeClass, classes]">
|
||||
<div class="md-switch-container" @click="toggle($event)">
|
||||
<div class="md-switch-thumb" :style="styles" v-md-ink-ripple="disabled">
|
||||
<div class="md-switch-thumb" :style="styles">
|
||||
<input type="checkbox" :name="name" :id="id" :disabled="disabled" :value="value">
|
||||
<button :type="type" class="md-switch-holder"></button>
|
||||
<md-ink-ripple :md-disabled="disabled" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<th class="md-table-head" :class="classes" @click="changeSort">
|
||||
<div class="md-table-head-container" v-md-ink-ripple="!mdSortBy">
|
||||
<div class="md-table-head-container">
|
||||
<div class="md-table-head-text md-test">
|
||||
<md-icon class="md-sortable-icon" v-if="mdSortBy">arrow_downward</md-icon>
|
||||
|
||||
|
|
@ -8,6 +8,8 @@
|
|||
|
||||
<md-tooltip v-if="mdTooltip">{{ mdTooltip }}</md-tooltip>
|
||||
</div>
|
||||
|
||||
<md-ink-ripple :md-disabled="!mdSortBy" />
|
||||
</div>
|
||||
</th>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,120 +1,5 @@
|
|||
import 'scopedQuerySelectorShim/dist/scopedQuerySelectorShim';
|
||||
import mdInkRipple from './mdInkRipple.vue';
|
||||
|
||||
export default function install(Vue) {
|
||||
let rippleParentClass = 'md-ink-ripple';
|
||||
let rippleClass = 'md-ripple';
|
||||
let rippleActiveClass = 'md-active';
|
||||
let registeredMouseFunction;
|
||||
let referenceElement;
|
||||
|
||||
let unregisterMouseEvent = (el = referenceElement) => {
|
||||
el.removeEventListener('mousedown', registeredMouseFunction);
|
||||
};
|
||||
|
||||
let registerMouseEvent = (element, holder) => {
|
||||
if (holder) {
|
||||
let ripple = holder.querySelector(':scope > .' + rippleParentClass + '> .' + rippleClass);
|
||||
|
||||
if (ripple) {
|
||||
registeredMouseFunction = (event) => {
|
||||
let rect = holder.getBoundingClientRect();
|
||||
|
||||
event.stopPropagation();
|
||||
|
||||
ripple.classList.remove(rippleActiveClass);
|
||||
|
||||
let top = event.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop;
|
||||
let left = event.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft;
|
||||
|
||||
ripple.style.top = top + 'px';
|
||||
ripple.style.left = left + 'px';
|
||||
|
||||
ripple.classList.add(rippleActiveClass);
|
||||
};
|
||||
|
||||
element.removeEventListener('mousedown', registeredMouseFunction);
|
||||
element.addEventListener('mousedown', registeredMouseFunction);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let createElement = (ripple, className, size) => {
|
||||
ripple = document.createElement('div');
|
||||
ripple.className = className;
|
||||
|
||||
if (size) {
|
||||
ripple.style.width = size;
|
||||
ripple.style.height = size;
|
||||
}
|
||||
|
||||
return ripple;
|
||||
};
|
||||
|
||||
let checkAvailablePositions = (element) => {
|
||||
let availablePositions = ['relative', 'absolute', 'fixed'];
|
||||
|
||||
return availablePositions.indexOf(getComputedStyle(element).position) > -1;
|
||||
};
|
||||
|
||||
let getClosestParent = (element) => {
|
||||
let found = false;
|
||||
let parent = element;
|
||||
|
||||
if (!element) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (checkAvailablePositions(element)) {
|
||||
return element;
|
||||
}
|
||||
|
||||
while (!found) {
|
||||
parent = parent.parentNode;
|
||||
|
||||
if (!parent || parent.tagName.toLowerCase() === 'body') {
|
||||
break;
|
||||
}
|
||||
|
||||
if (parent && checkAvailablePositions(parent)) {
|
||||
found = parent;
|
||||
}
|
||||
}
|
||||
|
||||
return found;
|
||||
};
|
||||
|
||||
let createRipple = (element, currentRipple) => {
|
||||
let holder = getClosestParent(element);
|
||||
|
||||
if (holder) {
|
||||
let ripple = holder.querySelector(':scope > .' + rippleParentClass + '> .' + rippleClass);
|
||||
|
||||
if (!ripple) {
|
||||
let elementSize = Math.round(Math.max(holder.offsetWidth, holder.offsetHeight)) + 'px';
|
||||
let rippleParent = currentRipple || createElement(ripple, rippleParentClass);
|
||||
let rippleElement = createElement(ripple, rippleClass, elementSize);
|
||||
|
||||
rippleParent.appendChild(rippleElement);
|
||||
holder.appendChild(rippleParent);
|
||||
}
|
||||
|
||||
if (holder !== element || !ripple) {
|
||||
referenceElement = element;
|
||||
registerMouseEvent(element, holder);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Vue.directive('mdInkRipple', function(el, bindings) {
|
||||
Vue.nextTick(() => {
|
||||
if (!bindings.value) {
|
||||
createRipple(el);
|
||||
} else {
|
||||
unregisterMouseEvent(el);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Vue.component('md-ink-ripple', Vue.extend(mdInkRipple));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,14 +21,14 @@
|
|||
transition: none;
|
||||
will-change: background-color, opacity, transform, width, height, top, left;
|
||||
|
||||
&.md-fadeout {
|
||||
opacity: 0;
|
||||
transition: $swift-ease-out;
|
||||
transition-duration: .6s;
|
||||
}
|
||||
|
||||
&.md-active {
|
||||
animation: ripple 1s $swift-ease-out-timing-function forwards;
|
||||
|
||||
&.md-fadeout {
|
||||
opacity: 0 !important;
|
||||
transition: $swift-ease-out;
|
||||
transition-duration: .6s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue