update the master branch to the latest
This commit is contained in:
梁灏
parent
67d534df27
commit
23a0ba9831
611 changed files with 122648 additions and 0 deletions
83
src/components/base/collapse-transition.js
Normal file
83
src/components/base/collapse-transition.js
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
import { addClass, removeClass } from '../../utils/assist';
|
||||
|
||||
const Transition = {
|
||||
beforeEnter(el) {
|
||||
addClass(el, 'collapse-transition');
|
||||
if (!el.dataset) el.dataset = {};
|
||||
|
||||
el.dataset.oldPaddingTop = el.style.paddingTop;
|
||||
el.dataset.oldPaddingBottom = el.style.paddingBottom;
|
||||
|
||||
el.style.height = '0';
|
||||
el.style.paddingTop = 0;
|
||||
el.style.paddingBottom = 0;
|
||||
},
|
||||
|
||||
enter(el) {
|
||||
el.dataset.oldOverflow = el.style.overflow;
|
||||
if (el.scrollHeight !== 0) {
|
||||
el.style.height = el.scrollHeight + 'px';
|
||||
el.style.paddingTop = el.dataset.oldPaddingTop;
|
||||
el.style.paddingBottom = el.dataset.oldPaddingBottom;
|
||||
} else {
|
||||
el.style.height = '';
|
||||
el.style.paddingTop = el.dataset.oldPaddingTop;
|
||||
el.style.paddingBottom = el.dataset.oldPaddingBottom;
|
||||
}
|
||||
|
||||
el.style.overflow = 'hidden';
|
||||
},
|
||||
|
||||
afterEnter(el) {
|
||||
// for safari: remove class then reset height is necessary
|
||||
removeClass(el, 'collapse-transition');
|
||||
el.style.height = '';
|
||||
el.style.overflow = el.dataset.oldOverflow;
|
||||
},
|
||||
|
||||
beforeLeave(el) {
|
||||
if (!el.dataset) el.dataset = {};
|
||||
el.dataset.oldPaddingTop = el.style.paddingTop;
|
||||
el.dataset.oldPaddingBottom = el.style.paddingBottom;
|
||||
el.dataset.oldOverflow = el.style.overflow;
|
||||
|
||||
el.style.height = el.scrollHeight + 'px';
|
||||
el.style.overflow = 'hidden';
|
||||
},
|
||||
|
||||
leave(el) {
|
||||
if (el.scrollHeight !== 0) {
|
||||
// for safari: add class after set height, or it will jump to zero height suddenly, weired
|
||||
addClass(el, 'collapse-transition');
|
||||
el.style.height = 0;
|
||||
el.style.paddingTop = 0;
|
||||
el.style.paddingBottom = 0;
|
||||
}
|
||||
},
|
||||
|
||||
afterLeave(el) {
|
||||
removeClass(el, 'collapse-transition');
|
||||
el.style.height = '';
|
||||
el.style.overflow = el.dataset.oldOverflow;
|
||||
el.style.paddingTop = el.dataset.oldPaddingTop;
|
||||
el.style.paddingBottom = el.dataset.oldPaddingBottom;
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'CollapseTransition',
|
||||
functional: true,
|
||||
props: {
|
||||
appear: Boolean
|
||||
},
|
||||
render(h, { children, props }) {
|
||||
const data = {
|
||||
on: Transition,
|
||||
props: {
|
||||
appear: props.appear
|
||||
}
|
||||
};
|
||||
|
||||
return h('transition', data, children);
|
||||
}
|
||||
};
|
||||
36
src/components/base/notification/index.js
Normal file
36
src/components/base/notification/index.js
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import Notification from './notification.vue';
|
||||
import Vue from 'vue';
|
||||
|
||||
Notification.newInstance = properties => {
|
||||
const _props = properties || {};
|
||||
|
||||
const Instance = new Vue({
|
||||
render (h) {
|
||||
return h(Notification, {
|
||||
props: _props
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const component = Instance.$mount();
|
||||
document.body.appendChild(component.$el);
|
||||
const notification = Instance.$children[0];
|
||||
|
||||
return {
|
||||
notice (noticeProps) {
|
||||
notification.add(noticeProps);
|
||||
},
|
||||
remove (name) {
|
||||
notification.close(name);
|
||||
},
|
||||
component: notification,
|
||||
destroy (element) {
|
||||
notification.closeAll();
|
||||
setTimeout(function() {
|
||||
document.body.removeChild(document.getElementsByClassName(element)[0]);
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
export default Notification;
|
||||
172
src/components/base/notification/notice.vue
Normal file
172
src/components/base/notification/notice.vue
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
<template>
|
||||
<transition :name="transitionName" @enter="handleEnter" @leave="handleLeave" appear>
|
||||
<div :class="classes" :style="styles">
|
||||
<template v-if="type === 'notice'">
|
||||
<div :class="contentClasses" ref="content" v-html="content"></div>
|
||||
<div :class="contentWithIcon">
|
||||
<render-cell
|
||||
:render="renderFunc"
|
||||
></render-cell>
|
||||
</div>
|
||||
<a :class="[baseClass + '-close']" @click="close" v-if="closable">
|
||||
<i class="ivu-icon ivu-icon-ios-close"></i>
|
||||
</a>
|
||||
</template>
|
||||
<template v-if="type === 'message'">
|
||||
<div :class="[baseClass + '-content']" ref="content">
|
||||
<div :class="[baseClass + '-content-text']" v-html="content"></div>
|
||||
<div :class="[baseClass + '-content-text']">
|
||||
<render-cell
|
||||
:render="renderFunc"
|
||||
></render-cell>
|
||||
</div>
|
||||
<a :class="[baseClass + '-close']" @click="close" v-if="closable">
|
||||
<i class="ivu-icon ivu-icon-ios-close"></i>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
import RenderCell from '../render';
|
||||
export default {
|
||||
components: {
|
||||
RenderCell
|
||||
},
|
||||
props: {
|
||||
prefixCls: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 1.5
|
||||
},
|
||||
type: {
|
||||
type: String
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
withIcon: Boolean,
|
||||
render: {
|
||||
type: Function
|
||||
},
|
||||
hasTitle: Boolean,
|
||||
styles: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
right: '50%'
|
||||
};
|
||||
}
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
className: {
|
||||
type: String
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
onClose: {
|
||||
type: Function
|
||||
},
|
||||
transitionName: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
withDesc: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
baseClass () {
|
||||
return `${this.prefixCls}-notice`;
|
||||
},
|
||||
renderFunc () {
|
||||
return this.render || function () {};
|
||||
},
|
||||
classes () {
|
||||
return [
|
||||
this.baseClass,
|
||||
{
|
||||
[`${this.className}`]: !!this.className,
|
||||
[`${this.baseClass}-closable`]: this.closable,
|
||||
[`${this.baseClass}-with-desc`]: this.withDesc
|
||||
}
|
||||
];
|
||||
},
|
||||
contentClasses () {
|
||||
return [
|
||||
`${this.baseClass}-content`,
|
||||
this.render !== undefined ? `${this.baseClass}-content-with-render` : ''
|
||||
];
|
||||
},
|
||||
contentWithIcon () {
|
||||
return [
|
||||
this.withIcon ? `${this.prefixCls}-content-with-icon` : '',
|
||||
!this.hasTitle && this.withIcon ? `${this.prefixCls}-content-with-render-notitle` : ''
|
||||
];
|
||||
},
|
||||
messageClasses () {
|
||||
return [
|
||||
`${this.baseClass}-content`,
|
||||
this.render !== undefined ? `${this.baseClass}-content-with-render` : ''
|
||||
];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearCloseTimer () {
|
||||
if (this.closeTimer) {
|
||||
clearTimeout(this.closeTimer);
|
||||
this.closeTimer = null;
|
||||
}
|
||||
},
|
||||
close () {
|
||||
this.clearCloseTimer();
|
||||
this.onClose();
|
||||
this.$parent.close(this.name);
|
||||
},
|
||||
handleEnter (el) {
|
||||
if (this.type === 'message') {
|
||||
el.style.height = el.scrollHeight + 'px';
|
||||
}
|
||||
},
|
||||
handleLeave (el) {
|
||||
if (this.type === 'message') {
|
||||
// 优化一下，如果当前只有一个 Message，则不使用 js 过渡动画，这样更优美
|
||||
if (document.getElementsByClassName('ivu-message-notice').length !== 1) {
|
||||
el.style.height = 0;
|
||||
el.style.paddingTop = 0;
|
||||
el.style.paddingBottom = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.clearCloseTimer();
|
||||
|
||||
if (this.duration !== 0) {
|
||||
this.closeTimer = setTimeout(() => {
|
||||
this.close();
|
||||
}, this.duration * 1000);
|
||||
}
|
||||
|
||||
// check if with desc in Notice component
|
||||
if (this.prefixCls === 'ivu-notice') {
|
||||
let desc = this.$refs.content.querySelectorAll(`.${this.prefixCls}-desc`)[0];
|
||||
this.withDesc = this.render ? true : (desc ? desc.innerHTML !== '' : false);
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.clearCloseTimer();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
114
src/components/base/notification/notification.vue
Normal file
114
src/components/base/notification/notification.vue
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
<template>
|
||||
<div :class="classes" :style="wrapStyles">
|
||||
<Notice
|
||||
v-for="notice in notices"
|
||||
:key="notice.name"
|
||||
:prefix-cls="prefixCls"
|
||||
:styles="notice.styles"
|
||||
:type="notice.type"
|
||||
:content="notice.content"
|
||||
:duration="notice.duration"
|
||||
:render="notice.render"
|
||||
:has-title="notice.hasTitle"
|
||||
:withIcon="notice.withIcon"
|
||||
:closable="notice.closable"
|
||||
:name="notice.name"
|
||||
:transition-name="notice.transitionName"
|
||||
:on-close="notice.onClose">
|
||||
</Notice>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Notice from './notice.vue';
|
||||
|
||||
import { transferIndex, transferIncrease } from '../../../utils/transfer-queue';
|
||||
|
||||
const prefixCls = 'ivu-notification';
|
||||
let seed = 0;
|
||||
const now = Date.now();
|
||||
|
||||
function getUuid () {
|
||||
return 'ivuNotification_' + now + '_' + (seed++);
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { Notice },
|
||||
props: {
|
||||
prefixCls: {
|
||||
type: String,
|
||||
default: prefixCls
|
||||
},
|
||||
styles: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {
|
||||
top: '65px',
|
||||
left: '50%'
|
||||
};
|
||||
}
|
||||
},
|
||||
content: {
|
||||
type: String
|
||||
},
|
||||
className: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
notices: [],
|
||||
tIndex: this.handleGetIndex()
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${this.prefixCls}`,
|
||||
{
|
||||
[`${this.className}`]: !!this.className
|
||||
}
|
||||
];
|
||||
},
|
||||
wrapStyles () {
|
||||
let styles = Object.assign({}, this.styles);
|
||||
styles['z-index'] = 1010 + this.tIndex;
|
||||
|
||||
return styles;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add (notice) {
|
||||
const name = notice.name || getUuid();
|
||||
|
||||
let _notice = Object.assign({
|
||||
styles: {
|
||||
right: '50%'
|
||||
},
|
||||
content: '',
|
||||
duration: 1.5,
|
||||
closable: false,
|
||||
name: name
|
||||
}, notice);
|
||||
|
||||
this.notices.push(_notice);
|
||||
this.tIndex = this.handleGetIndex();
|
||||
},
|
||||
close (name) {
|
||||
const notices = this.notices;
|
||||
for (let i = 0; i < notices.length; i++) {
|
||||
if (notices[i].name === name) {
|
||||
this.notices.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
closeAll () {
|
||||
this.notices = [];
|
||||
},
|
||||
handleGetIndex () {
|
||||
transferIncrease();
|
||||
return transferIndex;
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
124
src/components/base/popper.js
Normal file
124
src/components/base/popper.js
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
/**
|
||||
* https://github.com/freeze-component/vue-popper
|
||||
* */
|
||||
import Vue from 'vue';
|
||||
const isServer = Vue.prototype.$isServer;
|
||||
const Popper = isServer ? function() {} : require('popper.js/dist/umd/popper.js'); // eslint-disable-line
|
||||
|
||||
export default {
|
||||
props: {
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
},
|
||||
boundariesPadding: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
reference: Object,
|
||||
popper: Object,
|
||||
offset: {
|
||||
default: 0
|
||||
},
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
transition: String,
|
||||
options: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
modifiers: {
|
||||
computeStyle:{
|
||||
gpuAcceleration: false,
|
||||
},
|
||||
preventOverflow :{
|
||||
boundariesElement: 'window'
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
// visible: {
|
||||
// type: Boolean,
|
||||
// default: false
|
||||
// }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visible: this.value
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.visible = val;
|
||||
this.$emit('input', val);
|
||||
}
|
||||
},
|
||||
visible(val) {
|
||||
if (val) {
|
||||
if (this.handleIndexIncrease) this.handleIndexIncrease(); // just use for Poptip
|
||||
this.updatePopper();
|
||||
this.$emit('on-popper-show');
|
||||
} else {
|
||||
this.$emit('on-popper-hide');
|
||||
}
|
||||
this.$emit('input', val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createPopper() {
|
||||
if (isServer) return;
|
||||
if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.placement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const options = this.options;
|
||||
const popper = this.popper || this.$refs.popper;
|
||||
const reference = this.reference || this.$refs.reference;
|
||||
|
||||
if (!popper || !reference) return;
|
||||
|
||||
if (this.popperJS && this.popperJS.hasOwnProperty('destroy')) {
|
||||
this.popperJS.destroy();
|
||||
}
|
||||
|
||||
options.placement = this.placement;
|
||||
|
||||
if (!options.modifiers.offset) {
|
||||
options.modifiers.offset = {};
|
||||
}
|
||||
options.modifiers.offset.offset = this.offset;
|
||||
options.onCreate =()=>{
|
||||
this.$nextTick(this.updatePopper);
|
||||
this.$emit('created', this);
|
||||
};
|
||||
|
||||
this.popperJS = new Popper(reference, popper, options);
|
||||
|
||||
},
|
||||
updatePopper() {
|
||||
if (isServer) return;
|
||||
this.popperJS ? this.popperJS.update() : this.createPopper();
|
||||
},
|
||||
doDestroy() {
|
||||
if (isServer) return;
|
||||
if (this.visible) return;
|
||||
this.popperJS.destroy();
|
||||
this.popperJS = null;
|
||||
}
|
||||
},
|
||||
updated (){
|
||||
this.$nextTick(()=>this.updatePopper());
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (isServer) return;
|
||||
if (this.popperJS) {
|
||||
this.popperJS.destroy();
|
||||
}
|
||||
}
|
||||
};
|
||||
10
src/components/base/render.js
Normal file
10
src/components/base/render.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
export default {
|
||||
name: 'RenderCell',
|
||||
functional: true,
|
||||
props: {
|
||||
render: Function
|
||||
},
|
||||
render: (h, ctx) => {
|
||||
return ctx.props.render(h);
|
||||
}
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue