Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-19 20:41:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

deprecated click bubble

Browse source
This commit is contained in:
Marcos Moura 2017-02-07 02:14:13 -02:00
parent d74b2ac0f1
commit af3f0851fa
3 changed files with 2 additions and 213 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,10 @@
<template>
<button class="md-button" :class="[themeClass]" :type="type" :disabled="disabled" @click="$emit('click', $event)" v-if="!href">
<button class="md-button" :class="[themeClass]" :type="type" :disabled="disabled" v-if="!href">
<md-ink-ripple :md-disabled="disabled"></md-ink-ripple>
<slot></slot>
</button>
<a class="md-button" :class="[themeClass]" :href="href" :disabled="disabled" :target="target" :rel="newRel" @click="$emit('click', $event)" v-else>
<a class="md-button" :class="[themeClass]" :href="href" :disabled="disabled" :target="target" :rel="newRel" v-else>
<md-ink-ripple :md-disabled="disabled"></md-ink-ripple>
<slot></slot>
</a>

210
src/components/mdList/mdListItem.js
View file

@ -1,213 +1,3 @@
/*<template>
<li class="md-list-item" :class="classes">
<md-button class="md-list-item-container" :href="href" :disabled="disabled" :target="target" v-if="href">
<slot></slot>
</md-button>
<slot v-else-if="isRouterLink"></slot>
<div class="md-list-item-container" v-else>
<slot></slot>
<md-icon class="md-list-expand-indicator" v-if="hasExpand">keyboard_arrow_down</md-icon>
</div>
<md-ink-ripple v-if="isRouterLink" :md-disabled="disabled"></md-ink-ripple>
<md-button class="md-button md-button-ghost" @click="hasExpand && toggleExpandList" :disabled="disabled" v-if="!href && !isRouterLink"></md-button>
</li>
</template>
<script>
import MdListItemButton from 'mdListItemButton';
export default {
props: {
href: String,
target: String,
disabled: Boolean
},
data: () => ({
hasExpand: false,
isRouterLink: false
}),
computed: {
classes() {
return {
'md-list-item-expand': this.hasExpand
};
}
},
methods: {
toggleExpandList() {
let target;
const recalculateExpand = (element) => {
element.$children.some((expand) => {
if (expand.$el.classList.contains('md-list-expand')) {
expand.calculatePadding();
}
});
};
this.$parent.$children.some((child) => {
var classList = child.$el.classList;
if (classList.contains('md-list-item-expand') && classList.contains('md-active')) {
target = child;
classList.remove('md-active');
recalculateExpand(child);
return true;
}
});
if (!target || this.$el !== target.$el) {
this.$el.classList.add('md-active');
}
}
},
mounted() {
this.$nextTick(() => {
const children = this.$children;
const containerClass = 'md-button md-list-item-container';
if (children) {
children.forEach((child) => {
if (child.$options && child.$options._componentTag === 'router-link') {
child.$el.className = containerClass;
child.$vnode.data.attrs.class = containerClass;
this.isRouterLink = true;
}
});
}
});
},
render(createElement) {
let containerClass = 'md-button md-list-item-container';
let holderClass = 'md-list-item-holder';
let slot = this.$slots.default;
let componentOptions = slot[0].componentOptions;
let expandSlot;
let expandSlotIndex;
let listItemSpec = {
staticClass: 'md-list-item',
on: {
click: ($event) => {
this.$emit('click', $event);
}
}
};
let createItemHolder = (content) => {
return createElement('div', { staticClass: holderClass }, content);
};
let createRipple = () => {
return createElement('md-ink-ripple');
};
let createCompatibleRouterLink = () => {
slot[0].data.staticClass = containerClass + ' ' + holderClass;
return createElement('li', listItemSpec, [...slot, createRipple()]);
};
let prepareExpandList = () => {
slot.some((slot, index) => {
if (slot.componentOptions && slot.componentOptions.tag === 'md-list-expand') {
expandSlot = slot;
expandSlotIndex = index;
return true;
}
});
};
let createExpandIndicator = () => {
return createElement('md-icon', {
staticClass: 'md-list-expand-indicator'
}, 'keyboard_arrow_down');
};
let recalculateExpand = (element) => {
element.$children.some((expand) => {
if (expand.$el.classList.contains('md-list-expand')) {
expand.calculatePadding();
}
});
};
let handleExpandClick = (scope) => {
let target;
scope.$parent.$children.some((child) => {
var classList = child.$el.classList;
if (classList.contains('md-list-item-expand') && classList.contains('md-active')) {
target = child;
classList.remove('md-active');
recalculateExpand(child);
return true;
}
});
if (!target || scope.$el !== target.$el) {
scope.$el.classList.add('md-active');
}
};
let createExpandElement = () => {
slot.splice(expandSlotIndex, 1);
slot.push(createExpandIndicator());
return createElement('button', {
staticClass: containerClass,
on: {
click: () => {
handleExpandClick(this);
this.$emit('click');
}
}
}, [createItemHolder(slot), createRipple()]);
};
let createExpandList = () => {
listItemSpec.staticClass += ' md-list-item-expand';
return createElement('li', listItemSpec, [createExpandElement(), expandSlot]);
};
if (componentOptions && componentOptions.tag === 'router-link') {
return createCompatibleRouterLink();
}
prepareExpandList();
if (expandSlot) {
return createExpandList();
}
let buttonSpec = createElement('md-button', {
staticClass: containerClass,
attrs: {
target: this.target,
href: this.href,
disabled: this.disabled
}
}, [createItemHolder(slot)]);
if (this.target) {
buttonSpec.data.attrs.rel = 'noopener';
}
return createElement('li', listItemSpec, [buttonSpec]);
}
};
</script>*/
import MdListItemButton from './mdListItemButton';
import MdListItemLink from './mdListItemLink';
import MdListItemRouter from './mdListItemRouter';

1
src/components/mdMenu/mdMenuItem.vue
View file

@ -57,7 +57,6 @@
this.parentContent.close();
}
this.$emit('click');
this.$emit('selected', $event);
}
}