drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

empty master

Browse source
This commit is contained in:
梁灏 2019-08-27 09:37:17 +08:00
parent 92c1162255
commit 67d534df27
276 changed files with 0 additions and 28368 deletions
Download patch file Download diff file Expand all files Collapse all files

126
src/components/affix/affix.vue
View file

@ -1,126 +0,0 @@
<template>
<div>
<div :class="classes" :style="styles">
<slot></slot>
</div>
</div>
</template>
<script>
const prefixCls = 'ivu-affix';
function getScroll(target, top) {
const prop = top ? 'pageYOffset' : 'pageXOffset';
const method = top ? 'scrollTop' : 'scrollLeft';
let ret = target[prop];
if (typeof ret !== 'number') {
ret = window.document.documentElement[method];
}
return ret;
}
function getOffset(element) {
const rect = element.getBoundingClientRect();
const scrollTop = getScroll(window, true);
const scrollLeft = getScroll(window);
const docEl = window.document.body;
const clientTop = docEl.clientTop || 0;
const clientLeft = docEl.clientLeft || 0;
return {
top: rect.top + scrollTop - clientTop,
left: rect.left + scrollLeft - clientLeft
};
}
export default {
props: {
offsetTop: {
type: Number,
default: 0
},
offsetBottom: {
type: Number
}
},
data () {
return {
affix: false,
styles: {}
};
},
computed: {
offsetType () {
let type = 'top';
if (this.offsetBottom >= 0) {
type = 'bottom';
}
return type;
},
classes () {
return [
{
[`${prefixCls}`]: this.affix
}
];
}
},
ready () {
window.addEventListener('scroll', this.handleScroll, false);
window.addEventListener('resize', this.handleScroll, false);
},
beforeDestroy () {
window.removeEventListener('scroll', this.handleScroll, false);
window.removeEventListener('resize', this.handleScroll, false);
},
methods: {
handleScroll () {
const affix = this.affix;
const scrollTop = getScroll(window, true);
const elOffset = getOffset(this.$el);
const windowHeight = window.innerHeight;
const elHeight = this.$el.getElementsByTagName('div')[0].offsetHeight;
// Fixed Top
if ((elOffset.top - this.offsetTop) < scrollTop && this.offsetType == 'top' && !affix) {
this.affix = true;
this.styles = {
top: `${this.offsetTop}px`,
left: `${elOffset.left}px`,
width: `${this.$el.offsetWidth}px`
};
this.$emit('on-change', true);
} else if ((elOffset.top - this.offsetTop) > scrollTop && this.offsetType == 'top' && affix) {
this.affix = false;
this.styles = null;
this.$emit('on-change', false);
}
// Fixed Bottom
if ((elOffset.top + this.offsetBottom + elHeight) > (scrollTop + windowHeight) && this.offsetType == 'bottom' && !affix) {
this.affix = true;
this.styles = {
bottom: `${this.offsetBottom}px`,
left: `${elOffset.left}px`,
width: `${this.$el.offsetWidth}px`
};
this.$emit('on-change', true);
} else if ((elOffset.top + this.offsetBottom + elHeight) < (scrollTop + windowHeight) && this.offsetType == 'bottom' && affix) {
this.affix = false;
this.styles = null;
this.$emit('on-change', false);
}
}
}
};
</script>

2
src/components/affix/index.js
View file

@ -1,2 +0,0 @@
import Affix from './affix.vue';
export default Affix;

106
src/components/alert/alert.vue
View file

@ -1,106 +0,0 @@
<template>
<div v-if="!closed" :class="wrapClasses" transition="fade">
<span :class="iconClasses" v-if="showIcon">
<slot name="icon">
<Icon :type="iconType"></Icon>
</slot>
</span>
<span :class="messageClasses"><slot></slot></span>
<span :class="descClasses" v-el:desc><slot name="desc"></slot></span>
<a :class="closeClasses" v-if="closable" @click="close">
<slot name="close">
<Icon type="ios-close-empty"></Icon>
</slot>
</a>
</div>
</template>
<script>
import Icon from '../icon';
import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-alert';
export default {
components: { Icon },
props: {
type: {
validator (value) {
return oneOf(value, ['success', 'info', 'warning', 'error']);
},
default: 'info'
},
closable: {
type: Boolean,
default: false
},
showIcon: {
type: Boolean,
default: false
},
banner: {
type: Boolean,
default: false
},
},
data () {
return {
closed: false,
desc: false
};
},
computed: {
wrapClasses () {
return [
`${prefixCls}`,
`${prefixCls}-${this.type}`,
{
[`${prefixCls}-with-icon`]: this.showIcon,
[`${prefixCls}-with-desc`]: this.desc,
[`${prefixCls}-with-banner`]: this.banner
}
];
},
messageClasses () {
return `${prefixCls}-message`;
},
descClasses () {
return `${prefixCls}-desc`;
},
closeClasses () {
return `${prefixCls}-close`;
},
iconClasses () {
return `${prefixCls}-icon`;
},
iconType () {
let type = '';
switch (this.type) {
case 'success':
type = 'checkmark-circled';
break;
case 'info':
type = 'information-circled';
break;
case 'warning':
type = 'android-alert';
break;
case 'error':
type = 'close-circled';
break;
}
return type;
}
},
methods: {
close (e) {
this.closed = true;
this.$emit('on-close', e);
}
},
compiled () {
this.desc = this.$els.desc.innerHTML != '';
}
};
</script>

2
src/components/alert/index.js
View file

@ -1,2 +0,0 @@
import Alert from './alert.vue';
export default Alert;

75
src/components/back-top/back-top.vue
View file

@ -1,75 +0,0 @@
<template>
<div :class="classes" :style="styles" @click="back">
<slot>
<div :class="innerClasses">
<i class="ivu-icon ivu-icon-chevron-up"></i>
</div>
</slot>
</div>
</template>
<script>
import { scrollTop } from '../../utils/assist';
const prefixCls = 'ivu-back-top';
export default {
props: {
height: {
type: Number,
default: 400
},
bottom: {
type: Number,
default: 30
},
right: {
type: Number,
default: 30
},
duration: {
type: Number,
default: 1000
}
},
data () {
return {
backTop: false
};
},
ready () {
window.addEventListener('scroll', this.handleScroll, false);
window.addEventListener('resize', this.handleScroll, false);
},
beforeDestroy () {
window.removeEventListener('scroll', this.handleScroll, false);
window.removeEventListener('resize', this.handleScroll, false);
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-show`]: this.backTop
}
];
},
styles () {
return {
bottom: `${this.bottom}px`,
right: `${this.right}px`
};
},
innerClasses () {
return `${prefixCls}-inner`;
}
},
methods: {
handleScroll () {
this.backTop = window.pageYOffset >= this.height;
},
back () {
scrollTop(window, document.body.scrollTop, 0, this.duration);
this.$emit('on-click');
}
}
};
</script>

2
src/components/back-top/index.js
View file

@ -1,2 +0,0 @@
import BackTop from './back-top.vue';
export default BackTop;

77
src/components/badge/badge.vue
View file

@ -1,77 +0,0 @@
<template>
<span v-if="dot" :class="classes" v-el:badge>
<slot></slot>
<sup :class="dotClasses" v-show="badge"></sup>
</span>
<span v-else :class="classes" v-el:badge>
<slot></slot>
<sup v-if="count" :class="countClasses" v-show="badge">{{ finalCount }}</sup>
</span>
</template>
<script>
const prefixCls = 'ivu-badge';
export default {
props: {
count: [Number, String],
dot: {
type: Boolean,
default: false
},
overflowCount: {
type: [Number, String],
default: 99
},
class: String
},
computed: {
classes () {
return `${prefixCls}`;
},
dotClasses () {
return `${prefixCls}-dot`;
},
countClasses () {
return [
`${prefixCls}-count`,
{
[`${this.class}`]: !!this.class,
[`${prefixCls}-count-alone`]: this.alone
}
];
},
finalCount () {
return parseInt(this.count) >= parseInt(this.overflowCount) ? `${this.overflowCount}+` : this.count;
},
badge () {
let status = false;
if (this.count) {
status = !(parseInt(this.count) === 0);
}
if (this.dot) {
status = true;
if (this.count) {
if (parseInt(this.count) === 0) {
status = false;
}
}
}
return status;
}
},
data () {
return {
alone: false
};
},
compiled () {
const child_length = this.$els.badge.children.length;
if (child_length === 1) {
this.alone = true;
}
}
};
</script>

2
src/components/badge/index.js
View file

@ -1,2 +0,0 @@
import Badge from './badge.vue';
export default Badge;

37
src/components/base/notification/index.js
View file

@ -1,37 +0,0 @@
import Notification from './notification.vue';
import Vue from 'vue';
import { camelcaseToHyphen } from '../../../utils/assist';
Notification.newInstance = properties => {
const _props = properties || {};
let props = '';
Object.keys(_props).forEach(prop => {
props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
});
const div = document.createElement('div');
div.innerHTML = `<notification${props}></notification>`;
document.body.appendChild(div);
const notification = new Vue({
el: div,
data: _props,
components: { Notification }
}).$children[0];
return {
notice (noticeProps) {
notification.add(noticeProps);
},
remove (key) {
notification.close(key);
},
component: notification,
destroy () {
document.body.removeChild(div);
}
};
};
export default Notification;

104
src/components/base/notification/notice.vue
View file

@ -1,104 +0,0 @@
<template>
<div :class="classes" :style="style" :transition="transitionName">
<div :class="[baseClass + '-content']" v-el:content>{{{ content }}}</div>
<a :class="[baseClass + '-close']" @click="close" v-if="closable">
<i class="ivu-icon ivu-icon-ios-close-empty"></i>
</a>
</div>
</template>
<script>
export default {
props: {
prefixCls: {
type: String,
default: ''
},
duration: {
type: Number,
default: 1.5
},
content: {
type: String,
default: ''
},
style: {
type: Object,
default: function() {
return {
right: '50%'
};
}
},
closable: {
type: Boolean,
default: false
},
className: {
type: String
},
key: {
type: String,
required: true
},
onClose: {
type: Function
},
transitionName: {
type: String
}
},
data () {
return {
withDesc: false
};
},
computed: {
baseClass () {
return `${this.prefixCls}-notice`;
},
classes () {
return [
this.baseClass,
{
[`${this.className}`]: !!this.className,
[`${this.baseClass}-closable`]: this.closable,
[`${this.baseClass}-with-desc`]: this.withDesc
}
];
},
contentClasses () {
return `${this.baseClass}-content`;
}
},
methods: {
clearCloseTimer () {
if (this.closeTimer) {
clearTimeout(this.closeTimer);
this.closeTimer = null;
}
},
close () {
this.clearCloseTimer();
this.onClose();
this.$parent.close(this.key);
}
},
compiled () {
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') {
this.withDesc = this.$els.content.querySelectorAll(`.${this.prefixCls}-desc`)[0].innerHTML !== '';
}
},
beforeDestroy () {
this.clearCloseTimer();
}
};
</script>

92
src/components/base/notification/notification.vue
View file

@ -1,92 +0,0 @@
<template>
<div :class="classes" :style="style">
<Notice v-for="notice in notices"
:prefix-cls="prefixCls"
:style="notice.style"
:content="notice.content"
:duration="notice.duration"
:closable="notice.closable"
:key="notice.key"
:transition-name="notice.transitionName"
:on-close="notice.onClose">
</Notice>
</div>
</template>
<script>
import Notice from './notice.vue';
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
},
style: {
type: Object,
default: function () {
return {
top: '65px',
left: '50%'
};
}
},
content: {
type: String
},
className: {
type: String
}
},
data () {
return {
notices: []
};
},
computed: {
classes () {
return [
`${this.prefixCls}`,
{
[`${this.className}`]: !!this.className
}
];
}
},
methods: {
add (notice) {
const key = notice.key || getUuid();
let _notice = Object.assign({
style: {
right: '50%'
},
content: '',
duration: 1.5,
closable: false,
key: key
}, notice);
this.notices.push(_notice);
},
close (key) {
const notices = this.notices;
for (let i = 0; i < notices.length; i++) {
if (notices[i].key === key) {
this.notices.splice(i, 1);
break;
}
}
}
}
};
</script>

106
src/components/base/popper.js
View file

@ -1,106 +0,0 @@
/**
* https://github.com/freeze-component/vue-popper
* */
import Popper from 'popper.js';
export default {
props: {
placement: {
type: String,
default: 'bottom'
},
boundariesPadding: {
type: Number,
default: 5
},
reference: Object,
popper: Object,
offset: {
default: 0
},
value: Boolean,
transition: String,
options: {
type: Object,
default () {
return {
gpuAcceleration: false,
boundariesElement: 'body'
};
}
},
visible: {
type: Boolean,
default: false
}
},
watch: {
value: {
immediate: true,
handler(val) {
this.visible = val;
this.$emit('input', val);
}
},
visible(val) {
if (val) {
this.updatePopper();
} else {
this.destroyPopper();
this.$emit('on-popper-hide');
}
this.$emit('input', val);
}
},
methods: {
createPopper() {
if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.placement)) {
return;
}
const options = this.options;
const popper = this.popper || this.$els.popper;
const reference = this.reference || this.$els.reference;
if (!popper || !reference) return;
if (this.popperJS && this.popperJS.hasOwnProperty('destroy')) {
this.popperJS.destroy();
}
options.placement = this.placement;
options.offset = this.offset;
this.popperJS = new Popper(reference, popper, options);
this.popperJS.onCreate(popper => {
this.resetTransformOrigin(popper);
this.$nextTick(this.updatePopper);
this.$emit('created', this);
});
},
updatePopper() {
this.popperJS ? this.popperJS.update() : this.createPopper();
},
doDestroy() {
if (this.visible) return;
this.popperJS.destroy();
this.popperJS = null;
},
destroyPopper() {
if (this.popperJS) {
this.resetTransformOrigin(this.popperJS);
}
},
resetTransformOrigin(popper) {
let placementMap = {top: 'bottom', bottom: 'top', left: 'right', right: 'left'};
let placement = popper._popper.getAttribute('x-placement').split('-')[0];
let origin = placementMap[placement];
popper._popper.style.transformOrigin = ['top', 'bottom'].indexOf(placement) > -1 ? `center ${ origin }` : `${ origin } center`;
}
},
beforeDestroy() {
if (this.popperJS) {
this.popperJS.destroy();
}
}
};

36
src/components/breadcrumb/breadcrumb-item.vue
View file

@ -1,36 +0,0 @@
<template>
<span>
<a v-if="href" :href="href" :class="linkClasses">
<slot></slot>
</a>
<span v-else :class="linkClasses">
<slot></slot>
</span>
<span :class="separatorClasses">
<slot name="separator">{{{ separator }}}</slot>
</span>
</span>
</template>
<script>
const prefixCls = 'ivu-breadcrumb-item';
export default {
props: {
href: {
type: String
},
separator: {
type: String,
default: '/'
}
},
computed: {
linkClasses () {
return `${prefixCls}-link`;
},
separatorClasses () {
return `${prefixCls}-separator`;
}
}
};
</script>

37
src/components/breadcrumb/breadcrumb.vue
View file

@ -1,37 +0,0 @@
<template>
<div :class="classes">
<slot></slot>
</div>
</template>
<script>
const prefixCls = 'ivu-breadcrumb';
export default {
props: {
separator: {
type: String,
default: '/'
}
},
computed: {
classes () {
return `${prefixCls}`;
}
},
compiled () {
this.updateChildren();
},
methods: {
updateChildren () {
this.$children.forEach((child) => {
child.separator = this.separator;
});
}
},
watch: {
separator () {
this.updateChildren();
}
}
};
</script>

5
src/components/breadcrumb/index.js
View file

@ -1,5 +0,0 @@
import Breadcrumb from './breadcrumb.vue';
import BreadcrumbItem from './breadcrumb-item.vue';
Breadcrumb.Item = BreadcrumbItem;
export default Breadcrumb;

41
src/components/button/button-group.vue
View file

@ -1,41 +0,0 @@
<template>
<div :class="classes">
<slot></slot>
</div>
</template>
<script>
import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-btn-group';
export default {
props: {
size: {
validator (value) {
return oneOf(value, ['small', 'large']);
}
},
shape: {
validator (value) {
return oneOf(value, ['circle', 'circle-outline']);
}
},
vertical: {
type: Boolean,
default: false
}
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-${this.shape}`]: !!this.shape,
[`${prefixCls}-vertical`]: this.vertical
}
];
}
}
};
</script>

70
src/components/button/button.vue
View file

@ -1,70 +0,0 @@
<template>
<button :type="htmlType" :class="classes" :disabled="disabled">
<Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
<Icon :type="icon" v-if="icon && !loading"></Icon>
<span v-if="showSlot" v-el:slot><slot></slot></span>
</button>
</template>
<script>
import Icon from '../icon';
import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-btn';
export default {
components: { Icon },
props: {
type: {
validator (value) {
return oneOf(value, ['primary', 'ghost', 'dashed', 'text', 'info', 'success', 'warning', 'error']);
}
},
shape: {
validator (value) {
return oneOf(value, ['circle', 'circle-outline']);
}
},
size: {
validator (value) {
return oneOf(value, ['small', 'large']);
}
},
loading: Boolean,
disabled: Boolean,
htmlType: {
default: 'button',
validator (value) {
return oneOf(value, ['button', 'submit', 'reset']);
}
},
icon: String,
long: {
type: Boolean,
default: false
}
},
data () {
return {
showSlot: true
};
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-${this.type}`]: !!this.type,
[`${prefixCls}-long`]: this.long,
[`${prefixCls}-${this.shape}`]: !!this.shape,
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-loading`]: this.loading != null && this.loading,
[`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading)
}
];
}
},
compiled () {
this.showSlot = this.$els.slot.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
}
};
</script>

5
src/components/button/index.js
View file

@ -1,5 +0,0 @@
import Button from './button.vue';
import ButtonGroup from './button-group.vue';
Button.Group = ButtonGroup;
export default Button;

58
src/components/card/card.vue
View file

@ -1,58 +0,0 @@
<template>
<div :class="classes">
<div :class="headClasses" v-if="showHead" v-el:head><slot name="title"></slot></div>
<div :class="extraClasses" v-if="showExtra" v-el:extra><slot name="extra"></slot></div>
<div :class="bodyClasses"><slot></slot></div>
</div>
</template>
<script>
const prefixCls = 'ivu-card';
export default {
props: {
bordered: {
type: Boolean,
default: true
},
disHover: {
type: Boolean,
default: false
},
shadow: {
type: Boolean,
default: false
}
},
data () {
return {
showHead: true,
showExtra: true
};
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-bordered`]: this.bordered && !this.shadow,
[`${prefixCls}-dis-hover`]: this.disHover || this.shadow,
[`${prefixCls}-shadow`]: this.shadow
}
];
},
headClasses () {
return `${prefixCls}-head`;
},
extraClasses () {
return `${prefixCls}-extra`;
},
bodyClasses () {
return `${prefixCls}-body`;
}
},
compiled () {
this.showHead = this.$els.head.innerHTML != '';
this.showExtra = this.$els.extra.innerHTML != '';
}
};
</script>

2
src/components/card/index.js
View file

@ -1,2 +0,0 @@
import Card from './card.vue';
export default Card;

34
src/components/carousel/carousel-item.vue
View file

@ -1,34 +0,0 @@
<template>
<div :class="prefixCls" v-bind:style="styles"><slot></slot></div>
</template>
<script>
const prefixCls = 'ivu-carousel-item';
export default {
componentName: 'carousel-item',
data () {
return {
prefixCls: prefixCls,
width: 0,
height: 'auto',
left: 0
};
},
computed: {
styles () {
return {
width: `${this.width}px`,
height: `${this.height}`,
left: `${this.left}px`
};
}
},
compiled () {
this.$parent.slotChange();
},
beforeDestroy () {
this.$parent.slotChange();
}
};
</script>

245
src/components/carousel/carousel.vue
View file

@ -1,245 +0,0 @@
<template>
<div :class="classes">
<button :class="arrowClasses" class="left" @click="arrowEvent(-1)">
<Icon type="chevron-left"></Icon>
</button>
<div :class="[prefixCls + '-list']">
<div :class="[prefixCls + '-track']" :style="trackStyles" v-el:slides>
<slot></slot>
</div>
</div>
<button :class="arrowClasses" class="right" @click="arrowEvent(1)">
<Icon type="chevron-right"></Icon>
</button>
<ul :class="dotsClasses">
<template v-for="n in slides.length">
<li :class="[n === currentIndex ? prefixCls + '-active' : '']"
@click="dotsEvent('click', n)"
@mouseover="dotsEvent('hover', n)">
<button></button>
</li>
</template>
</ul>
</div>
</template>
<script>
import Icon from '../icon/icon.vue';
import { getStyle, oneOf } from '../../utils/assist';
const prefixCls = 'ivu-carousel';
export default {
name: 'Carousel',
components: { Icon },
props: {
arrow: {
type: String,
default: 'hover',
validator (value) {
return oneOf(value, ['hover', 'always', 'never']);
}
},
autoplay: {
type: Boolean,
default: false
},
autoplaySpeed: {
type: Number,
default: 2000
},
easing: {
type: String,
default: 'ease'
},
dots: {
type: String,
default: 'inside',
validator (value) {
return oneOf(value, ['inside', 'outside', 'none']);
}
},
trigger: {
type: String,
default: 'click',
validator (value) {
return oneOf(value, ['click', 'hover']);
}
},
currentIndex: {
type: Number,
default: 0
},
height: {
type: [String, Number],
default: 'auto',
validator (value) {
return value === 'auto' || Object.prototype.toString.call(value) === '[object Number]';
}
}
},
data () {
return {
prefixCls: prefixCls,
listWidth: 0,
trackWidth: 0,
trackOffset: 0,
slides: [],
slideInstances: [],
timer: null,
ready: false
};
},
computed: {
classes () {
return [
`${prefixCls}`
];
},
trackStyles () {
return {
width: `${this.trackWidth}px`,
transform: `translate3d(-${this.trackOffset}px, 0px, 0px)`,
transition: `transform 500ms ${this.easing}`
};
},
arrowClasses () {
return [
`${prefixCls}-arrow`,
`${prefixCls}-arrow-${this.arrow}`
];
},
dotsClasses () {
return [
`${prefixCls}-dots`,
`${prefixCls}-dots-${this.dots}`
];
}
},
methods: {
// find option component
findChild (cb) {
const find = function (child) {
const name = child.$options.componentName;
if (name) {
cb(child);
} else if (child.$children.length) {
child.$children.forEach((innerChild) => {
find(innerChild, cb);
});
}
};
if (this.slideInstances.length || !this.$children) {
this.slideInstances.forEach((child) => {
find(child);
});
} else {
this.$children.forEach((child) => {
find(child);
});
}
},
updateSlides (init ) {
let slides = [];
let index = 1;
this.findChild((child) => {
slides.push({
$el: child.$el
});
child.index = index++;
if (init) {
this.slideInstances.push(child);
}
});
this.slides = slides;
this.updatePos();
},
updatePos () {
this.findChild((child) => {
child.width = this.listWidth;
child.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
});
this.trackWidth = (this.slides.length || 0) * this.listWidth;
},
// use when slot changed
slotChange () {
this.$nextTick(() => {
this.slides = [];
this.slideInstances = [];
this.updateSlides(true, true);
this.updatePos();
this.updateOffset();
});
},
handleResize () {
this.listWidth = parseInt(getStyle(this.$el, 'width'));
this.updatePos();
this.updateOffset();
},
add (offset) {
let index = this.currentIndex;
index += offset;
while (index < 0) index += this.slides.length;
index = index % this.slides.length;
this.currentIndex = index;
},
arrowEvent (offset) {
this.setAutoplay();
this.add(offset);
},
dotsEvent (event, n) {
if (event === this.trigger && this.currentIndex !== n) {
this.currentIndex = n;
// Reset autoplay timer when trigger be activated
this.setAutoplay();
}
},
setAutoplay () {
window.clearInterval(this.timer);
if (this.autoplay) {
this.timer = window.setInterval(() => {
this.add(1);
}, this.autoplaySpeed);
}
},
updateOffset () {
this.$nextTick(() => {
this.trackOffset = this.currentIndex * this.listWidth;
});
}
},
compiled () {
this.updateSlides(true);
},
watch: {
autoplay () {
this.setAutoplay();
},
autoplaySpeed () {
this.setAutoplay();
},
currentIndex (val, oldVal) {
this.$emit('on-change', oldVal, val);
this.updateOffset();
},
height () {
this.updatePos();
}
},
ready () {
this.handleResize();
this.setAutoplay();
window.addEventListener('resize', this.handleResize, false);
},
beforeDestroy () {
window.removeEventListener('resize', this.handleResize, false);
}
};
</script>

5
src/components/carousel/index.js
View file

@ -1,5 +0,0 @@
import Carousel from './carousel.vue';
import CarouselItem from './carousel-item.vue';
Carousel.Item = CarouselItem;
export default Carousel;

210
src/components/cascader/cascader.vue
View file

@ -1,210 +0,0 @@
<template>
<div :class="classes" v-clickoutside="handleClose">
<div :class="[prefixCls + '-rel']" @click="toggleOpen">
<slot>
<i-input
readonly
:disabled="disabled"
:value.sync="displayRender"
:size="size"
:placeholder="placeholder"></i-input>
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.stop="clearSelect"></Icon>
<Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
</slot>
</div>
<Dropdown v-show="visible" transition="slide-up">
<div>
<Caspanel
v-ref:caspanel
:prefix-cls="prefixCls"
:data.sync="data"
:disabled="disabled"
:change-on-select="changeOnSelect"
:trigger="trigger"></Caspanel>
</div>
</Dropdown>
</div>
</template>
<script>
import iInput from '../input/input.vue';
import Dropdown from '../select/dropdown.vue';
import Icon from '../icon/icon.vue';
import Caspanel from './caspanel.vue';
import clickoutside from '../../directives/clickoutside';
import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-cascader';
export default {
components: { iInput, Dropdown, Icon, Caspanel },
directives: { clickoutside },
props: {
data: {
type: Array,
default () {
return [];
}
},
value: {
type: Array,
default () {
return [];
}
},
disabled: {
type: Boolean,
default: false
},
clearable: {
type: Boolean,
default: true
},
placeholder: {
type: String,
default: '请选择'
},
size: {
validator (value) {
return oneOf(value, ['small', 'large']);
}
},
trigger: {
validator (value) {
return oneOf(value, ['click', 'hover']);
},
default: 'click'
},
changeOnSelect: {
type: Boolean,
default: false
},
renderFormat: {
type: Function,
default (label) {
return label.join(' / ');
}
}
},
data () {
return {
prefixCls: prefixCls,
visible: false,
selected: [],
tmpSelected: [],
updatingValue: false // to fix set value in changeOnSelect type
};
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-show-clear`]: this.showCloseIcon,
[`${prefixCls}-visible`]: this.visible,
[`${prefixCls}-disabled`]: this.disabled
}
];
},
showCloseIcon () {
return this.value && this.value.length && this.clearable;
},
displayRender () {
let label = [];
for (let i = 0; i < this.selected.length; i++) {
label.push(this.selected[i].label);
}
return this.renderFormat(label, this.selected);
}
},
methods: {
clearSelect () {
const oldVal = JSON.stringify(this.value);
this.value = this.selected = this.tmpSelected = [];
this.handleClose();
this.emitValue(this.value, oldVal);
this.$broadcast('on-clear');
},
handleClose () {
this.visible = false;
},
toggleOpen () {
if (this.disabled) return false;
if (this.visible) {
this.handleClose();
} else {
this.onFocus();
}
},
onFocus () {
this.visible = true;
if (!this.value.length) {
this.$broadcast('on-clear');
}
},
updateResult (result) {
this.tmpSelected = result;
},
updateSelected (init = false) {
if (!this.changeOnSelect || init) {
this.$broadcast('on-find-selected', this.value);
}
},
emitValue (val, oldVal) {
if (JSON.stringify(val) !== oldVal) {
this.$emit('on-change', this.value, JSON.parse(JSON.stringify(this.selected)));
this.$dispatch('on-form-change', this.value, JSON.parse(JSON.stringify(this.selected)));
}
}
},
ready () {
this.updateSelected(true);
},
events: {
// lastValue: is click the final val
// fromInit: is this emit from update value
'on-result-change' (lastValue, changeOnSelect, fromInit) {
if (lastValue || changeOnSelect) {
const oldVal = JSON.stringify(this.value);
this.selected = this.tmpSelected;
let newVal = [];
this.selected.forEach((item) => {
newVal.push(item.value);
});
if (!fromInit) {
this.updatingValue = true;
this.value = newVal;
this.emitValue(this.value, oldVal);
}
}
if (lastValue && !fromInit) {
this.handleClose();
}
},
'on-form-blur' () {
return false;
},
'on-form-change' () {
return false;
}
},
watch: {
visible (val) {
if (val) {
if (this.value.length) {
this.updateSelected();
}
}
},
value () {
if (this.updatingValue) {
this.updatingValue = false;
return;
}
this.updateSelected(true);
}
}
};
</script>

23
src/components/cascader/casitem.vue
View file

@ -1,23 +0,0 @@
<template>
<li :class="classes">{{ data.label }}<i v-if="data.children && data.children.length" class="ivu-icon ivu-icon-ios-arrow-right"></i></li>
</template>
<script>
export default {
props: {
data: Object,
prefixCls: String,
tmpItem: Object
},
computed: {
classes () {
return [
`${this.prefixCls}-menu-item`,
{
[`${this.prefixCls}-menu-item-active`]: this.tmpItem.value === this.data.value,
[`${this.prefixCls}-menu-item-disabled`]: this.data.disabled
}
];
}
}
};
</script>

114
src/components/cascader/caspanel.vue
View file

@ -1,114 +0,0 @@
<template>
<ul v-if="data && data.length" :class="[prefixCls + '-menu']">
<Casitem
v-for="item in data"
:prefix-cls="prefixCls"
:data.sync="item"
:tmp-item="tmpItem"
@click.stop="handleClickItem(item)"
@mouseenter.stop="handleHoverItem(item)"></Casitem>
</ul><Caspanel v-if="sublist && sublist.length" :prefix-cls="prefixCls" :data.sync="sublist" :disabled="disabled" :trigger="trigger" :change-on-select="changeOnSelect"></Caspanel>
</template>
<script>
import Casitem from './casitem.vue';
export default {
name: 'Caspanel',
components: { Casitem },
props: {
data: {
type: Array,
default () {
return [];
}
},
sublist: {
type: Array,
default () {
return [];
}
},
disabled: Boolean,
changeOnSelect: Boolean,
trigger: String,
prefixCls: String
},
data () {
return {
tmpItem: {},
result: []
};
},
methods: {
handleClickItem (item) {
if (this.trigger !== 'click' && item.children) return;
this.handleTriggerItem(item);
},
handleHoverItem (item) {
if (this.trigger !== 'hover' || !item.children) return;
this.handleTriggerItem(item);
},
handleTriggerItem (item, fromInit = false) {
if (item.disabled) return;
// return value back recursion
const backItem = this.getBaseItem(item);
this.tmpItem = backItem;
this.emitUpdate([backItem]);
if (item.children && item.children.length){
this.sublist = item.children;
this.$dispatch('on-result-change', false, this.changeOnSelect, fromInit);
} else {
this.sublist = [];
this.$dispatch('on-result-change', true, this.changeOnSelect, fromInit);
}
},
updateResult (item) {
this.result = [this.tmpItem].concat(item);
this.emitUpdate(this.result);
},
getBaseItem (item) {
let backItem = Object.assign({}, item);
if (backItem.children) {
delete backItem.children;
}
return backItem;
},
emitUpdate (result) {
if (this.$parent.$options.name === 'Caspanel') {
this.$parent.updateResult(result);
} else {
this.$parent.$parent.updateResult(result);
}
}
},
watch: {
data () {
this.sublist = [];
}
},
events: {
'on-find-selected' (val) {
let value = [...val];
for (let i = 0; i < value.length; i++) {
for (let j = 0; j < this.data.length; j++) {
if (value[i] === this.data[j].value) {
this.handleTriggerItem(this.data[j], true);
value.splice(0, 1);
this.$nextTick(() => {
this.$broadcast('on-find-selected', value);
});
return false;
}
}
}
},
'on-clear' () {
this.sublist = [];
this.tmpItem = {};
}
}
};
</script>

2
src/components/cascader/index.js
View file

@ -1,2 +0,0 @@
import Cascader from './cascader.vue';
export default Cascader;

52
src/components/checkbox/checkbox-group.vue
View file

@ -1,52 +0,0 @@
<template>
<div :class="classes">
<slot></slot>
</div>
</template>
<script>
const prefixCls = 'ivu-checkbox-group';
export default {
name: 'checkboxGroup',
props: {
model: {
type: Array,
default () {
return [];
}
}
},
computed: {
classes () {
return `${prefixCls}`;
}
},
compiled () {
this.updateModel(true);
},
methods: {
updateModel (update) {
const model = this.model;
this.$children.forEach((child) => {
child.model = model;
if (update) {
child.selected = model.indexOf(child.value) >= 0;
child.group = true;
}
});
},
change (data) {
this.model = data;
this.$emit('on-change', data);
this.$dispatch('on-form-change', data);
}
},
watch: {
model () {
this.updateModel(true);
}
}
};
</script>

115
src/components/checkbox/checkbox.vue
View file

@ -1,115 +0,0 @@
<template>
<label :class="wrapClasses">
<span :class="checkboxClasses">
<span :class="innerClasses"></span>
<input
v-if="group"
type="checkbox"
:class="inputClasses"
:disabled="disabled"
:value="value"
v-model="model"
@change="change">
<input
v-if="!group"
type="checkbox"
:class="inputClasses"
:disabled="disabled"
v-model="checked"
@change="change">
</span>
<slot v-if="showSlot"><span v-el:slot>{{ value }}</span></slot>
</label>
</template>
<script>
const prefixCls = 'ivu-checkbox';
export default {
props: {
disabled: {
type: Boolean,
default: false
},
value: {
type: [String, Number, Boolean]
},
checked: {
type: Boolean,
default: false
},
indeterminate: {
type: Boolean,
default: false
}
},
data () {
return {
model: [],
selected: false,
group: false,
showSlot: true
};
},
computed: {
wrapClasses () {
return [
`${prefixCls}-wrapper`,
{
[`${prefixCls}-group-item`]: this.group,
[`${prefixCls}-wrapper-checked`]: this.selected,
[`${prefixCls}-wrapper-disabled`]: this.disabled
}
];
},
checkboxClasses () {
return [
`${prefixCls}`,
{
[`${prefixCls}-checked`]: this.selected,
[`${prefixCls}-disabled`]: this.disabled,
[`${prefixCls}-indeterminate`]: this.indeterminate
}
];
},
innerClasses () {
return `${prefixCls}-inner`;
},
inputClasses () {
return `${prefixCls}-input`;
}
},
ready () {
if (this.$parent && this.$parent.$options.name === 'checkboxGroup') this.group = true;
if (!this.group) {
this.updateModel();
if (this.$els.slot && this.$els.slot.innerHTML === '') {
this.showSlot = false;
}
}
},
methods: {
change (event) {
if (this.disabled) {
return false;
}
this.selected = event.target.checked;
if (this.group) {
this.$parent.change(this.model);
} else {
this.$emit('on-change', this.checked);
this.$dispatch('on-form-change', this.checked);
}
},
updateModel () {
this.selected = this.checked;
}
},
watch: {
checked () {
this.updateModel();
}
}
};
</script>

5
src/components/checkbox/index.js
View file

@ -1,5 +0,0 @@
import Checkbox from './checkbox.vue';
import CheckboxGroup from './checkbox-group.vue';
Checkbox.Group = CheckboxGroup;
export default Checkbox;

83
src/components/circle/circle.vue
View file

@ -1,83 +0,0 @@
<template>
<div :style="circleSize" :class="wrapClasses">
<svg viewBox="0 0 100 100">
<path :d="pathString" :stroke="trailColor" :stroke-width="trailWidth" :fill-opacity="0"/>
<path :d="pathString" :stroke-linecap="strokeLinecap" :stroke="strokeColor" :stroke-width="strokeWidth" fill-opacity="0" :style="pathStyle"/>
</svg>
<div :class="innerClasses">
<slot></slot>
</div>
</div>
</template>
<script>
import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-chart-circle';
export default {
props: {
percent: {
type: Number,
default: 0
},
size: {
type: Number,
default: 120
},
strokeWidth: {
type: Number,
default: 6
},
strokeColor: {
type: String,
default: '#2db7f5'
},
strokeLinecap: {
validator (value) {
return oneOf(value, ['square', 'round']);
},
default: 'round'
},
trailWidth: {
type: Number,
default: 5
},
trailColor: {
type: String,
default: '#eaeef2'
}
},
computed: {
circleSize () {
return {
width: `${this.size}px`,
height: `${this.size}px`
};
},
radius () {
return 50 - this.strokeWidth / 2;
},
pathString () {
return `M 50,50 m 0,-${this.radius}
a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}
a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}`;
},
len () {
return Math.PI * 2 * this.radius;
},
pathStyle () {
return {
'stroke-dasharray': `${this.len}px ${this.len}px`,
'stroke-dashoffset': `${((100 - this.percent) / 100 * this.len)}px`,
'transition': 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
};
},
wrapClasses () {
return `${prefixCls}`;
},
innerClasses () {
return `${prefixCls}-inner`;
}
}
};
</script>

2
src/components/circle/index.js
View file

@ -1,2 +0,0 @@
import Circle from './circle.vue';
export default Circle;

98
src/components/collapse/collapse.vue
View file

@ -1,98 +0,0 @@
<template>
<div :class="classes">
<slot></slot>
</div>
</template>
<script>
const prefixCls = 'ivu-collapse';
export default {
props: {
accordion: {
type: Boolean,
default: false
},
activeKey: {
type: [Array, String]
}
},
computed: {
classes () {
return `${prefixCls}`;
}
},
compiled () {
this.setActive();
},
methods: {
setActive () {
const activeKey = this.getActiveKey();
this.$children.forEach((child, index) => {
const key = child.key || index.toString();
let isActive = false;
if (self.accordion) {
isActive = activeKey === key;
} else {
isActive = activeKey.indexOf(key) > -1;
}
child.isActive = isActive;
child.index = index;
});
},
getActiveKey () {
let activeKey = this.activeKey || [];
const accordion = this.accordion;
if (!Array.isArray(activeKey)) {
activeKey = [activeKey];
}
if (accordion && activeKey.length > 1) {
activeKey = [activeKey[0]];
}
for (let i = 0; i < activeKey.length; i++) {
activeKey[i] = activeKey[i].toString();
}
return activeKey;
},
toggle (data) {
const key = data.key.toString();
let newActiveKey = [];
if (this.accordion) {
if (!data.isActive) {
newActiveKey.push(key);
}
} else {
let activeKey = this.getActiveKey();
const keyIndex = activeKey.indexOf(key);
if (data.isActive) {
if (keyIndex > -1) {
activeKey.splice(keyIndex, 1);
}
} else {
if (keyIndex < 0) {
activeKey.push(key);
}
}
newActiveKey = activeKey;
}
this.activeKey = newActiveKey;
this.$emit('on-change', newActiveKey);
}
},
watch: {
activeKey () {
this.setActive();
}
}
};
</script>

5
src/components/collapse/index.js
View file

@ -1,5 +0,0 @@
import Collapse from './collapse.vue';
import Panel from './panel.vue';
Collapse.Panel = Panel;
export default Collapse;

57
src/components/collapse/panel.vue
View file

@ -1,57 +0,0 @@
<template>
<div :class="itemClasses">
<div :class="headerClasses" @click="toggle">
<Icon type="arrow-right-b"></Icon>
<slot></slot>
</div>
<div :class="concentClasses" v-show="isActive">
<div :class="boxClasses"><slot name="content"></slot></div>
</div>
</div>
</template>
<script>
import Icon from '../icon/icon.vue';
const prefixCls = 'ivu-collapse';
export default {
components: { Icon },
props: {
key: {
type: String
}
},
data () {
return {
index: 0, // use index for default when key is null
isActive: false
};
},
computed: {
itemClasses () {
return [
`${prefixCls}-item`,
{
[`${prefixCls}-item-active`]: this.isActive
}
];
},
headerClasses () {
return `${prefixCls}-header`;
},
concentClasses () {
return `${prefixCls}-content`;
},
boxClasses () {
return `${prefixCls}-content-box`;
}
},
methods: {
toggle () {
this.$parent.toggle({
key: this.key || this.index,
isActive: this.isActive
});
}
}
};
</script>

50
src/components/date-picker/base/confirm.vue
View file

@ -1,50 +0,0 @@
<template>
<div :class="[prefixCls + '-confirm']">
<span :class="timeClasses" v-if="showTime" @click="handleToggleTime">
<template v-if="isTime">{{ t('i.datepicker.selectDate') }}</template>
<template v-else>{{ t('i.datepicker.selectTime') }}</template>
</span>
<i-button size="small" type="text" @click="handleClear">{{ t('i.datepicker.clear') }}</i-button>
<i-button size="small" type="primary" @click="handleSuccess">{{ t('i.datepicker.ok') }}</i-button>
</div>
</template>
<script>
import iButton from '../../button/button.vue';
import Locale from '../../../mixins/locale';
const prefixCls = 'ivu-picker';
export default {
mixins: [ Locale ],
components: { iButton },
props: {
showTime: false,
isTime: false,
timeDisabled: false
},
data () {
return {
prefixCls: prefixCls
};
},
computed: {
timeClasses () {
return {
[`${prefixCls}-confirm-time-disabled`]: this.timeDisabled
};
}
},
methods: {
handleClear () {
this.$emit('on-pick-clear');
},
handleSuccess () {
this.$emit('on-pick-success');
},
handleToggleTime () {
if (this.timeDisabled) return;
this.$emit('on-pick-toggle-time');
}
}
};
</script>

284
src/components/date-picker/base/date-table.vue
View file

@ -1,284 +0,0 @@
<template>
<div
:class="classes"
@click="handleClick"
@mousemove="handleMouseMove">
<div :class="[prefixCls + '-header']">
<span>{{ t('i.datepicker.weeks.sun') }}</span><span>{{ t('i.datepicker.weeks.mon') }}</span><span>{{ t('i.datepicker.weeks.tue') }}</span><span>{{ t('i.datepicker.weeks.wed') }}</span><span>{{ t('i.datepicker.weeks.thu') }}</span><span>{{ t('i.datepicker.weeks.fri') }}</span><span>{{ t('i.datepicker.weeks.sat') }}</span>
</div>
<span :class="getCellCls(cell)" v-for="cell in readCells"><em :index="$index">{{ cell.text }}</em></span>
</div>
</template>
<script>
import { getFirstDayOfMonth, getDayCountOfMonth } from '../util';
import { deepCopy } from '../../../utils/assist';
import Locale from '../../../mixins/locale';
const prefixCls = 'ivu-date-picker-cells';
const clearHours = function (time) {
const cloneDate = new Date(time);
cloneDate.setHours(0, 0, 0, 0);
return cloneDate.getTime();
};
export default {
mixins: [ Locale ],
props: {
date: {},
year: {},
month: {},
selectionMode: {
default: 'day'
},
disabledDate: {},
minDate: {},
maxDate: {},
rangeState: {
default () {
return {
endDate: null,
selecting: false
};
}
},
value: ''
},
data () {
return {
prefixCls: prefixCls,
readCells: []
};
},
watch: {
'rangeState.endDate' (newVal) {
this.markRange(newVal);
},
minDate(newVal, oldVal) {
if (newVal && !oldVal) {
this.rangeState.selecting = true;
this.markRange(newVal);
} else if (!newVal) {
this.rangeState.selecting = false;
this.markRange(newVal);
} else {
this.markRange();
}
},
maxDate(newVal, oldVal) {
if (newVal && !oldVal) {
this.rangeState.selecting = false;
this.markRange(newVal);
// this.$emit('on-pick', {
// minDate: this.minDate,
// maxDate: this.maxDate
// });
}
},
cells: {
handler (cells) {
this.readCells = cells;
},
immediate: true
}
},
computed: {
classes () {
return [
`${prefixCls}`
];
},
cells () {
const date = new Date(this.year, this.month, 1);
let day = getFirstDayOfMonth(date); // day of first day
day = (day === 0 ? 7 : day);
const today = clearHours(new Date()); // timestamp of today
const selectDay = clearHours(new Date(this.value)); // timestamp of selected day
const minDay = clearHours(new Date(this.minDate));
const maxDay = clearHours(new Date(this.maxDate));
const dateCountOfMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth());
const dateCountOfLastMonth = getDayCountOfMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1));
const disabledDate = this.disabledDate;
let cells = [];
const cell_tmpl = {
text: '',
type: '',
selected: false,
disabled: false,
range: false,
start: false,
end: false
};
if (day !== 7) {
for (let i = 0; i < day; i++) {
const cell = deepCopy(cell_tmpl);
cell.type = 'prev-month';
cell.text = dateCountOfLastMonth - (day - 1) + i;
let prevMonth = this.month - 1;
let prevYear = this.year;
if (this.month === 0) {
prevMonth = 11;
prevYear -= 1;
}
const time = clearHours(new Date(prevYear, prevMonth, cell.text));
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
cells.push(cell);
}
}
for (let i = 1; i <= dateCountOfMonth; i++) {
const cell = deepCopy(cell_tmpl);
const time = clearHours(new Date(this.year, this.month, i));
cell.type = time === today ? 'today' : 'normal';
cell.text = i;
cell.selected = time === selectDay;
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
cell.range = time >= minDay && time <= maxDay;
cell.start = this.minDate && time === minDay;
cell.end = this.maxDate && time === maxDay;
cells.push(cell);
}
const nextMonthCount = 42 - cells.length;
for (let i = 1; i <= nextMonthCount; i++) {
const cell = deepCopy(cell_tmpl);
cell.type = 'next-month';
cell.text = i;
let nextMonth = this.month + 1;
let nextYear = this.year;
if (this.month === 11) {
nextMonth = 0;
nextYear += 1;
}
const time = clearHours(new Date(nextYear, nextMonth, cell.text));
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
cells.push(cell);
}
return cells;
}
},
methods: {
getDateOfCell (cell) {
let year = this.year;
let month = this.month;
let day = cell.text;
const date = this.date;
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
if (cell.type === 'prev-month') {
if (month === 0) {
month = 11;
year--;
} else {
month--;
}
} else if (cell.type === 'next-month') {
if (month === 11) {
month = 0;
year++;
} else {
month++;
}
}
return new Date(year, month, day, hours, minutes, seconds);
},
handleClick (event) {
const target = event.target;
if (target.tagName === 'EM') {
const cell = this.cells[parseInt(event.target.getAttribute('index'))];
if (cell.disabled) return;
const newDate = this.getDateOfCell(cell);
if (this.selectionMode === 'range') {
if (this.minDate && this.maxDate) {
const minDate = new Date(newDate.getTime());
const maxDate = null;
this.rangeState.selecting = true;
this.markRange(this.minDate);
this.$emit('on-pick', {minDate, maxDate}, false);
} else if (this.minDate && !this.maxDate) {
if (newDate >= this.minDate) {
const maxDate = new Date(newDate.getTime());
this.rangeState.selecting = false;
this.$emit('on-pick', {minDate: this.minDate, maxDate});
} else {
const minDate = new Date(newDate.getTime());
this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
}
} else if (!this.minDate) {
const minDate = new Date(newDate.getTime());
this.rangeState.selecting = true;
this.markRange(this.minDate);
this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
}
} else {
this.$emit('on-pick', newDate);
}
}
this.$emit('on-pick-click');
},
handleMouseMove (event) {
if (!this.rangeState.selecting) return;
this.$emit('on-changerange', {
minDate: this.minDate,
maxDate: this.maxDate,
rangeState: this.rangeState
});
const target = event.target;
if (target.tagName === 'EM') {
const cell = this.cells[parseInt(event.target.getAttribute('index'))];
// if (cell.disabled) return; // todo 待确定
this.rangeState.endDate = this.getDateOfCell(cell);
}
},
markRange (maxDate) {
const minDate = this.minDate;
if (!maxDate) maxDate = this.maxDate;
const minDay = clearHours(new Date(minDate));
const maxDay = clearHours(new Date(maxDate));
this.cells.forEach(cell => {
if (cell.type === 'today' || cell.type === 'normal') {
const time = clearHours(new Date(this.year, this.month, cell.text));
cell.range = time >= minDay && time <= maxDay;
cell.start = minDate && time === minDay;
cell.end = maxDate && time === maxDay;
}
});
},
getCellCls (cell) {
return [
`${prefixCls}-cell`,
{
[`${prefixCls}-cell-selected`]: cell.selected || cell.start || cell.end,
[`${prefixCls}-cell-disabled`]: cell.disabled,
[`${prefixCls}-cell-today`]: cell.type === 'today',
[`${prefixCls}-cell-prev-month`]: cell.type === 'prev-month',
[`${prefixCls}-cell-next-month`]: cell.type === 'next-month',
[`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end
}
];
},
}
};
</script>

79
src/components/date-picker/base/month-table.vue
View file

@ -1,79 +0,0 @@
<template>
<div :class="classes" @click="handleClick">
<span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ tCell(cell.text) }}</em></span>
</div>
</template>
<script>
import { deepCopy } from '../../../utils/assist';
import Locale from '../../../mixins/locale';
const prefixCls = 'ivu-date-picker-cells';
export default {
mixins: [ Locale ],
props: {
date: {},
month: {
type: Number
},
disabledDate: {},
selectionMode: {
default: 'month'
}
},
computed: {
classes () {
return [
`${prefixCls}`,
`${prefixCls}-month`
];
},
cells () {
let cells = [];
const cell_tmpl = {
text: '',
selected: false,
disabled: false
};
for (let i = 0; i < 12; i++) {
const cell = deepCopy(cell_tmpl);
cell.text = i + 1;
const date = new Date(this.date);
date.setMonth(i);
cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(date) && this.selectionMode === 'month';
cell.selected = Number(this.month) === i;
cells.push(cell);
}
return cells;
}
},
methods: {
getCellCls (cell) {
return [
`${prefixCls}-cell`,
{
[`${prefixCls}-cell-selected`]: cell.selected,
[`${prefixCls}-cell-disabled`]: cell.disabled
}
];
},
handleClick (event) {
const target = event.target;
if (target.tagName === 'EM') {
const index = parseInt(event.target.getAttribute('index'));
const cell = this.cells[index];
if (cell.disabled) return;
this.$emit('on-pick', index);
}
this.$emit('on-pick-click');
},
tCell (cell) {
return this.t(`i.datepicker.months.m${cell}`);
}
}
};
</script>

207
src/components/date-picker/base/time-spinner.vue
View file

@ -1,207 +0,0 @@
<template>
<div :class="classes">
<div :class="[prefixCls+ '-list']" v-el:hours>
<ul :class="[prefixCls + '-ul']" @click="handleClickHours">
<li :class="getCellCls(item)" v-for="item in hoursList" v-show="!item.hide" :index="$index">{{ formatTime(item.text) }}</li>
</ul>
</div>
<div :class="[prefixCls+ '-list']" v-el:minutes>
<ul :class="[prefixCls + '-ul']" @click="handleClickMinutes">
<li :class="getCellCls(item)" v-for="item in minutesList" v-show="!item.hide" :index="$index">{{ formatTime(item.text) }}</li>
</ul>
</div>
<div :class="[prefixCls+ '-list']" v-show="showSeconds" v-el:seconds>
<ul :class="[prefixCls + '-ul']" @click="handleClickSeconds">
<li :class="getCellCls(item)" v-for="item in secondsList" v-show="!item.hide" :index="$index">{{ formatTime(item.text) }}</li>
</ul>
</div>
</div>
</template>
<script>
import Options from '../time-mixins';
import { deepCopy, scrollTop, firstUpperCase } from '../../../utils/assist';
const prefixCls = 'ivu-time-picker-cells';
export default {
mixins: [Options],
props: {
hours: {
type: [Number, String],
default: 0
},
minutes: {
type: [Number, String],
default: 0
},
seconds: {
type: [Number, String],
default: 0
},
showSeconds: {
type: Boolean,
default: true
}
},
data () {
return {
prefixCls: prefixCls,
compiled: false
};
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-with-seconds`]: this.showSeconds
}
];
},
hoursList () {
let hours = [];
const hour_tmpl = {
text: 0,
selected: false,
disabled: false,
hide: false
};
for (let i = 0; i < 24; i++) {
const hour = deepCopy(hour_tmpl);
hour.text = i;
if (this.disabledHours.length && this.disabledHours.indexOf(i) > -1) {
hour.disabled = true;
if (this.hideDisabledOptions) hour.hide = true;
}
if (this.hours === i) hour.selected = true;
hours.push(hour);
}
return hours;
},
minutesList () {
let minutes = [];
const minute_tmpl = {
text: 0,
selected: false,
disabled: false,
hide: false
};
for (let i = 0; i < 60; i++) {
const minute = deepCopy(minute_tmpl);
minute.text = i;
if (this.disabledMinutes.length && this.disabledMinutes.indexOf(i) > -1) {
minute.disabled = true;
if (this.hideDisabledOptions) minute.hide = true;
}
if (this.minutes === i) minute.selected = true;
minutes.push(minute);
}
return minutes;
},
secondsList () {
let seconds = [];
const second_tmpl = {
text: 0,
selected: false,
disabled: false,
hide: false
};
for (let i = 0; i < 60; i++) {
const second = deepCopy(second_tmpl);
second.text = i;
if (this.disabledSeconds.length && this.disabledSeconds.indexOf(i) > -1) {
second.disabled = true;
if (this.hideDisabledOptions) second.hide = true;
}
if (this.seconds === i) second.selected = true;
seconds.push(second);
}
return seconds;
}
},
methods: {
getCellCls (cell) {
return [
`${prefixCls}-cell`,
{
[`${prefixCls}-cell-selected`]: cell.selected,
[`${prefixCls}-cell-disabled`]: cell.disabled
}
];
},
handleClickHours (event) {
this.handleClick('hours', event);
},
handleClickMinutes (event) {
this.handleClick('minutes', event);
},
handleClickSeconds (event) {
this.handleClick('seconds', event);
},
handleClick (type, event) {
const target = event.target;
if (target.tagName === 'LI') {
const cell = this[`${type}List`][parseInt(event.target.getAttribute('index'))];
if (cell.disabled) return;
const data = {};
data[type] = cell.text;
this.$emit('on-change', data);
}
this.$emit('on-pick-click');
},
scroll (type, index) {
const from = this.$els[type].scrollTop;
const to = 24 * this.getScrollIndex(type, index);
scrollTop(this.$els[type], from, to, 500);
},
getScrollIndex (type, index) {
const Type = firstUpperCase(type);
const disabled = this[`disabled${Type}`];
if (disabled.length && this.hideDisabledOptions) {
let _count = 0;
disabled.forEach(item => item <= index ? _count++ : '');
index -= _count;
}
return index;
},
updateScroll () {
const times = ['hours', 'minutes', 'seconds'];
this.$nextTick(() => {
times.forEach(type => {
this.$els[type].scrollTop = 24 * this.getScrollIndex(type, this[type]);
});
});
},
formatTime (text) {
return text < 10 ? '0' + text : text;
}
},
watch: {
hours (val) {
if (!this.compiled) return;
this.scroll('hours', val);
},
minutes (val) {
if (!this.compiled) return;
this.scroll('minutes', val);
},
seconds (val) {
if (!this.compiled) return;
this.scroll('seconds', val);
}
},
compiled () {
this.updateScroll();
this.$nextTick(() => this.compiled = true);
}
};
</script>

80
src/components/date-picker/base/year-table.vue
View file

@ -1,80 +0,0 @@
<template>
<div :class="classes" @click="handleClick">
<span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ cell.text }}</em></span>
</div>
</template>
<script>
import { deepCopy } from '../../../utils/assist';
const prefixCls = 'ivu-date-picker-cells';
export default {
props: {
date: {},
year: {},
disabledDate: {},
selectionMode: {
default: 'year'
}
},
computed: {
classes () {
return [
`${prefixCls}`,
`${prefixCls}-year`
];
},
startYear() {
return Math.floor(this.year / 10) * 10;
},
cells () {
let cells = [];
const cell_tmpl = {
text: '',
selected: false,
disabled: false
};
for (let i = 0; i < 10; i++) {
const cell = deepCopy(cell_tmpl);
cell.text = this.startYear + i;
const date = new Date(this.date);
date.setFullYear(cell.text);
cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(date) && this.selectionMode === 'year';
cell.selected = Number(this.year) === cell.text;
cells.push(cell);
}
return cells;
}
},
methods: {
getCellCls (cell) {
return [
`${prefixCls}-cell`,
{
[`${prefixCls}-cell-selected`]: cell.selected,
[`${prefixCls}-cell-disabled`]: cell.disabled
}
];
},
nextTenYear() {
this.$emit('on-pick', Number(this.year) + 10, false);
},
prevTenYear() {
this.$emit('on-pick', Number(this.year) - 10, false);
},
handleClick (event) {
const target = event.target;
if (target.tagName === 'EM') {
const cell = this.cells[parseInt(event.target.getAttribute('index'))];
if (cell.disabled) return;
this.$emit('on-pick', cell.text);
}
this.$emit('on-pick-click');
}
}
};
</script>

3
src/components/date-picker/index.js
View file

@ -1,3 +0,0 @@
import DatePicker from './picker/date-picker';
export default DatePicker;

421
src/components/date-picker/panel/date-range.vue
View file

@ -1,421 +0,0 @@
<template>
<div :class="classes">
<div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
<div
:class="[prefixCls + '-shortcut']"
v-for="shortcut in shortcuts"
@click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
</div>
<div :class="[prefixCls + '-body']">
<div :class="[prefixCls + '-content', prefixCls + '-content-left']" v-show="!isTime">
<div :class="[datePrefixCls + '-header']" v-show="leftCurrentView !== 'time'">
<span
:class="iconBtnCls('prev', '-double')"
@click="prevYear('left')"><Icon type="ios-arrow-left"></Icon></span>
<span
:class="iconBtnCls('prev')"
@click="prevMonth"
v-show="leftCurrentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
<span
:class="[datePrefixCls + '-header-label']"
@click="showYearPicker('left')">{{ leftYearLabel }}</span>
<span
:class="[datePrefixCls + '-header-label']"
@click="showMonthPicker('left')"
v-show="leftCurrentView === 'date'">{{ leftMonthLabel }}</span>
<span
:class="iconBtnCls('next', '-double')"
@click="nextYear('left')"
v-show="leftCurrentView === 'year' || leftCurrentView === 'month'"><Icon type="ios-arrow-right"></Icon></span>
</div>
<date-table
v-show="leftCurrentView === 'date'"
:year="leftYear"
:month="leftMonth"
:date="date"
:min-date="minDate"
:max-date="maxDate"
:range-state="rangeState"
selection-mode="range"
:disabled-date="disabledDate"
@on-changerange="handleChangeRange"
@on-pick="handleRangePick"
@on-pick-click="handlePickClick"></date-table>
<year-table
v-ref:left-year-table
v-show="leftCurrentView === 'year'"
:year="leftTableYear"
:date="leftTableDate"
selection-mode="range"
:disabled-date="disabledDate"
@on-pick="handleLeftYearPick"
@on-pick-click="handlePickClick"></year-table>
<month-table
v-ref:left-month-table
v-show="leftCurrentView === 'month'"
:month="leftMonth"
:date="leftTableDate"
selection-mode="range"
:disabled-date="disabledDate"
@on-pick="handleLeftMonthPick"
@on-pick-click="handlePickClick"></month-table>
</div>
<div :class="[prefixCls + '-content', prefixCls + '-content-right']" v-show="!isTime">
<div :class="[datePrefixCls + '-header']" v-show="rightCurrentView !== 'time'">
<span
:class="iconBtnCls('prev', '-double')"
@click="prevYear('right')"
v-show="rightCurrentView === 'year' || rightCurrentView === 'month'"><Icon type="ios-arrow-left"></Icon></span>
<span
:class="[datePrefixCls + '-header-label']"
@click="showYearPicker('right')">{{ rightYearLabel }}</span>
<span
:class="[datePrefixCls + '-header-label']"
@click="showMonthPicker('right')"
v-show="rightCurrentView === 'date'">{{ rightMonthLabel }}</span>
<span
:class="iconBtnCls('next', '-double')"
@click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
<span
:class="iconBtnCls('next')"
@click="nextMonth"
v-show="rightCurrentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
</div>
<date-table
v-show="rightCurrentView === 'date'"
:year="rightYear"
:month="rightMonth"
:date="rightDate"
:min-date="minDate"
:max-date="maxDate"
:range-state="rangeState"
selection-mode="range"
:disabled-date="disabledDate"
@on-changerange="handleChangeRange"
@on-pick="handleRangePick"
@on-pick-click="handlePickClick"></date-table>
<year-table
v-ref:right-year-table
v-show="rightCurrentView === 'year'"
:year="rightTableYear"
:date="rightTableDate"
selection-mode="range"
:disabled-date="disabledDate"
@on-pick="handleRightYearPick"
@on-pick-click="handlePickClick"></year-table>
<month-table
v-ref:right-month-table
v-show="rightCurrentView === 'month'"
:month="rightMonth"
:date="rightTableDate"
selection-mode="range"
:disabled-date="disabledDate"
@on-pick="handleRightMonthPick"
@on-pick-click="handlePickClick"></month-table>
</div>
<div :class="[prefixCls + '-content']" v-show="isTime">
<time-picker
v-ref:time-picker
v-show="isTime"
@on-pick="handleTimePick"
@on-pick-click="handlePickClick"></time-picker>
</div>
<Confirm
v-if="confirm"
:show-time="showTime"
:is-time="isTime"
:time-disabled="timeDisabled"
@on-pick-toggle-time="handleToggleTime"
@on-pick-clear="handlePickClear"
@on-pick-success="handlePickSuccess"></Confirm>
</div>
</div>
</template>
<script>
import Icon from '../../icon/icon.vue';
import DateTable from '../base/date-table.vue';
import YearTable from '../base/year-table.vue';
import MonthTable from '../base/month-table.vue';
import TimePicker from './time-range.vue';
import Confirm from '../base/confirm.vue';
import { toDate, prevMonth, nextMonth, initTimeDate } from '../util';
import Mixin from './mixin';
import Locale from '../../../mixins/locale';
const prefixCls = 'ivu-picker-panel';
const datePrefixCls = 'ivu-date-picker';
export default {
name: 'DatePicker',
mixins: [ Mixin, Locale ],
components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
data () {
return {
prefixCls: prefixCls,
datePrefixCls: datePrefixCls,
shortcuts: [],
date: initTimeDate(),
value: '',
minDate: '',
maxDate: '',
confirm: false,
rangeState: {
endDate: null,
selecting: false
},
showTime: false,
disabledDate: '',
leftCurrentView: 'date',
rightCurrentView: 'date',
selectionMode: 'range',
leftTableYear: null,
rightTableYear: null,
isTime: false,
format: 'yyyy-MM-dd'
};
},
computed: {
classes () {
return [
`${prefixCls}-body-wrapper`,
`${datePrefixCls}-with-range`,
{
[`${prefixCls}-with-sidebar`]: this.shortcuts.length
}
];
},
leftYear () {
return this.date.getFullYear();
},
leftTableDate () {
if (this.leftCurrentView === 'year' || this.leftCurrentView === 'month') {
return new Date(this.leftTableYear);
} else {
return this.date;
}
},
leftYearLabel () {
const tYear = this.t('i.datepicker.year');
if (this.leftCurrentView === 'year') {
const year = this.leftTableYear;
if (!year) return '';
const startYear = Math.floor(year / 10) * 10;
return `${startYear}${tYear} - ${startYear + 9}${tYear}`;
} else {
const year = this.leftCurrentView === 'month' ? this.leftTableYear : this.leftYear;
if (!year) return '';
return `${year}${tYear}`;
}
},
leftMonth () {
return this.date.getMonth();
},
leftMonthLabel () {
const month = this.leftMonth + 1;
return this.t(`i.datepicker.month${month}`);
},
rightYear () {
return this.rightDate.getFullYear();
},
rightTableDate () {
if (this.rightCurrentView === 'year' || this.rightCurrentView === 'month') {
return new Date(this.rightTableYear);
} else {
return this.date;
}
},
rightYearLabel () {
const tYear = this.t('i.datepicker.year');
if (this.rightCurrentView === 'year') {
const year = this.rightTableYear;
if (!year) return '';
const startYear = Math.floor(year / 10) * 10;
return `${startYear}${tYear} - ${startYear + 9}${tYear}`;
} else {
const year = this.rightCurrentView === 'month' ? this.rightTableYear : this.rightYear;
if (!year) return '';
return `${year}${tYear}`;
}
},
rightMonth () {
return this.rightDate.getMonth();
},
rightMonthLabel () {
const month = this.rightMonth + 1;
return this.t(`i.datepicker.month${month}`);
},
rightDate () {
const newDate = new Date(this.date);
const month = newDate.getMonth();
newDate.setDate(1);
if (month === 11) {
newDate.setFullYear(newDate.getFullYear() + 1);
newDate.setMonth(0);
} else {
newDate.setMonth(month + 1);
}
return newDate;
},
timeDisabled () {
return !(this.minDate && this.maxDate);
}
},
watch: {
value(newVal) {
if (!newVal) {
this.minDate = null;
this.maxDate = null;
} else if (Array.isArray(newVal)) {
this.minDate = newVal[0] ? toDate(newVal[0]) : null;
this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
if (this.minDate) this.date = new Date(this.minDate);
}
if (this.showTime) this.$refs.timePicker.value = newVal;
},
minDate (val) {
if (this.showTime) this.$refs.timePicker.date = val;
},
maxDate (val) {
if (this.showTime) this.$refs.timePicker.dateEnd = val;
},
format (val) {
if (this.showTime) this.$refs.timePicker.format = val;
},
isTime (val) {
if (val) this.$refs.timePicker.updateScroll();
}
},
methods: {
resetDate () {
this.date = new Date(this.date);
this.leftTableYear = this.date.getFullYear();
this.rightTableYear = this.rightDate.getFullYear();
},
handleClear() {
this.minDate = null;
this.maxDate = null;
this.date = new Date();
this.handleConfirm();
if (this.showTime) this.$refs.timePicker.handleClear();
},
resetView(reset = false) {
this.leftCurrentView = 'date';
this.rightCurrentView = 'date';
this.leftTableYear = this.leftYear;
this.rightTableYear = this.rightYear;
if (reset) this.isTime = false;
},
prevYear (direction) {
if (this[`${direction}CurrentView`] === 'year') {
this.$refs[`${direction}YearTable`].prevTenYear();
} else if (this[`${direction}CurrentView`] === 'month') {
this[`${direction}TableYear`]--;
} else {
const date = this.date;
date.setFullYear(date.getFullYear() - 1);
this.resetDate();
}
},
nextYear (direction) {
if (this[`${direction}CurrentView`] === 'year') {
this.$refs[`${direction}YearTable`].nextTenYear();
} else if (this[`${direction}CurrentView`] === 'month') {
this[`${direction}TableYear`]--;
} else {
const date = this.date;
date.setFullYear(date.getFullYear() + 1);
this.resetDate();
}
},
prevMonth () {
this.date = prevMonth(this.date);
},
nextMonth () {
this.date = nextMonth(this.date);
},
handleLeftYearPick (year, close = true) {
this.handleYearPick(year, close, 'left');
},
handleRightYearPick (year, close = true) {
this.handleYearPick(year, close, 'right');
},
handleYearPick (year, close, direction) {
this[`${direction}TableYear`] = year;
if (!close) return;
this[`${direction}CurrentView`] = 'month';
},
handleLeftMonthPick (month) {
this.handleMonthPick(month, 'left');
},
handleRightMonthPick (month) {
this.handleMonthPick(month, 'right');
},
handleMonthPick (month, direction) {
let year = this[`${direction}TableYear`];
if (direction === 'right') {
if (month === 0) {
month = 11;
year--;
} else {
month--;
}
}
this.date.setYear(year);
this.date.setMonth(month);
this[`${direction}CurrentView`] = 'date';
this.resetDate();
},
showYearPicker (direction) {
this[`${direction}CurrentView`] = 'year';
this[`${direction}TableYear`] = this[`${direction}Year`];
},
showMonthPicker (direction) {
this[`${direction}CurrentView`] = 'month';
},
handleConfirm(visible) {
this.$emit('on-pick', [this.minDate, this.maxDate], visible);
},
handleRangePick (val, close = true) {
if (this.maxDate === val.maxDate && this.minDate === val.minDate) return;
this.minDate = val.minDate;
this.maxDate = val.maxDate;
if (!close) return;
// if (!this.showTime) {
// this.handleConfirm(false);
// }
this.handleConfirm(false);
},
handleChangeRange (val) {
this.minDate = val.minDate;
this.maxDate = val.maxDate;
this.rangeState = val.rangeState;
},
handleToggleTime () {
this.isTime = !this.isTime;
},
handleTimePick (date) {
this.minDate = date[0];
this.maxDate = date[1];
this.handleConfirm(false);
}
},
compiled () {
if (this.showTime) {
// todo 这里也到不了
this.$refs.timePicker.date = this.minDate;
this.$refs.timePicker.dateEnd = this.maxDate;
this.$refs.timePicker.value = this.value;
this.$refs.timePicker.format = this.format;
this.$refs.timePicker.showDate = true;
}
}
};
</script>

293
src/components/date-picker/panel/date.vue
View file

@ -1,293 +0,0 @@
<template>
<div :class="classes">
<div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
<div
:class="[prefixCls + '-shortcut']"
v-for="shortcut in shortcuts"
@click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
</div>
<div :class="[prefixCls + '-body']">
<div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
<span
:class="iconBtnCls('prev', '-double')"
@click="prevYear"><Icon type="ios-arrow-left"></Icon></span>
<span
:class="iconBtnCls('prev')"
@click="prevMonth"
v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
<span
:class="[datePrefixCls + '-header-label']"
@click="showYearPicker">{{ yearLabel }}</span>
<span
:class="[datePrefixCls + '-header-label']"
@click="showMonthPicker"
v-show="currentView === 'date'">{{ monthLabel }}</span>
<span
:class="iconBtnCls('next', '-double')"
@click="nextYear"><Icon type="ios-arrow-right"></Icon></span>
<span
:class="iconBtnCls('next')"
@click="nextMonth"
v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
</div>
<div :class="[prefixCls + '-content']">
<date-table
v-show="currentView === 'date'"
:year="year"
:month="month"
:date="date"
:value="value"
:selection-mode="selectionMode"
:disabled-date="disabledDate"
@on-pick="handleDatePick"
@on-pick-click="handlePickClick"></date-table>
<year-table
v-ref:year-table
v-show="currentView === 'year'"
:year="year"
:date="date"
:selection-mode="selectionMode"
:disabled-date="disabledDate"
@on-pick="handleYearPick"
@on-pick-click="handlePickClick"></year-table>
<month-table
v-ref:month-table
v-show="currentView === 'month'"
:month="month"
:date="date"
:selection-mode="selectionMode"
:disabled-date="disabledDate"
@on-pick="handleMonthPick"
@on-pick-click="handlePickClick"></month-table>
<time-picker
v-ref:time-picker
show-date
v-show="currentView === 'time'"
@on-pick="handleTimePick"
@on-pick-click="handlePickClick"></time-picker>
</div>
<Confirm
v-if="confirm"
:show-time="showTime"
:is-time="isTime"
@on-pick-toggle-time="handleToggleTime"
@on-pick-clear="handlePickClear"
@on-pick-success="handlePickSuccess"></Confirm>
</div>
</div>
</template>
<script>
import Icon from '../../icon/icon.vue';
import DateTable from '../base/date-table.vue';
import YearTable from '../base/year-table.vue';
import MonthTable from '../base/month-table.vue';
import TimePicker from './time.vue';
import Confirm from '../base/confirm.vue';
import Mixin from './mixin';
import Locale from '../../../mixins/locale';
import { initTimeDate } from '../util';
const prefixCls = 'ivu-picker-panel';
const datePrefixCls = 'ivu-date-picker';
export default {
name: 'DatePicker',
mixins: [ Mixin, Locale ],
components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
data () {
return {
prefixCls: prefixCls,
datePrefixCls: datePrefixCls,
shortcuts: [],
currentView: 'date',
date: initTimeDate(),
value: '',
showTime: false,
selectionMode: 'day',
disabledDate: '',
year: null,
month: null,
confirm: false,
isTime: false,
format: 'yyyy-MM-dd'
};
},
computed: {
classes () {
return [
`${prefixCls}-body-wrapper`,
{
[`${prefixCls}-with-sidebar`]: this.shortcuts.length
}
];
},
yearLabel () {
const tYear = this.t('i.datepicker.year');
const year = this.year;
if (!year) return '';
if (this.currentView === 'year') {
const startYear = Math.floor(year / 10) * 10;
return `${startYear}${tYear} - ${startYear + 9}${tYear}`;
}
return `${year}${tYear}`;
},
monthLabel () {
const month = this.month + 1;
return this.t(`i.datepicker.month${month}`);
}
},
watch: {
value (newVal) {
if (!newVal) return;
newVal = new Date(newVal);
if (!isNaN(newVal)) {
this.date = newVal;
this.year = newVal.getFullYear();
this.month = newVal.getMonth();
}
if (this.showTime) this.$refs.timePicker.value = newVal;
},
date (val) {
if (this.showTime) this.$refs.timePicker.date = val;
},
format (val) {
if (this.showTime) this.$refs.timePicker.format = val;
},
currentView (val) {
if (val === 'time') this.$refs.timePicker.updateScroll();
}
},
methods: {
resetDate () {
this.date = new Date(this.date);
},
handleClear () {
this.date = new Date();
this.$emit('on-pick', '');
if (this.showTime) this.$refs.timePicker.handleClear();
},
resetView (reset = false) {
if (this.currentView !== 'time' || reset) {
if (this.selectionMode === 'month') {
this.currentView = 'month';
} else if (this.selectionMode === 'year') {
this.currentView = 'year';
} else {
this.currentView = 'date';
}
}
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
if (reset) this.isTime = false;
},
prevYear () {
if (this.currentView === 'year') {
this.$refs.yearTable.prevTenYear();
} else {
this.year--;
this.date.setFullYear(this.year);
this.resetDate();
}
},
nextYear () {
if (this.currentView === 'year') {
this.$refs.yearTable.nextTenYear();
} else {
this.year++;
this.date.setFullYear(this.year);
this.resetDate();
}
},
prevMonth () {
this.month--;
if (this.month < 0) {
this.month = 11;
this.year--;
}
},
nextMonth () {
this.month++;
if (this.month > 11) {
this.month = 0;
this.year++;
}
},
showYearPicker () {
this.currentView = 'year';
},
showMonthPicker () {
this.currentView = 'month';
},
handleToggleTime () {
if (this.currentView === 'date') {
this.currentView = 'time';
this.isTime = true;
} else if (this.currentView === 'time') {
this.currentView = 'date';
this.isTime = false;
}
},
handleYearPick(year, close = true) {
this.year = year;
if (!close) return;
this.date.setFullYear(year);
if (this.selectionMode === 'year') {
this.$emit('on-pick', new Date(year, 0, 1));
} else {
this.currentView = 'month';
}
this.resetDate();
},
handleMonthPick (month) {
this.month = month;
const selectionMode = this.selectionMode;
if (selectionMode !== 'month') {
this.date.setMonth(month);
this.currentView = 'date';
this.resetDate();
} else {
this.date.setMonth(month);
this.year && this.date.setFullYear(this.year);
this.resetDate();
const value = new Date(this.date.getFullYear(), month, 1);
this.$emit('on-pick', value);
}
},
handleDatePick (value) {
if (this.selectionMode === 'day') {
this.$emit('on-pick', new Date(value.getTime()));
this.date.setFullYear(value.getFullYear());
this.date.setMonth(value.getMonth());
this.date.setDate(value.getDate());
}
this.resetDate();
},
handleTimePick (date) {
this.handleDatePick(date);
}
},
compiled () {
if (this.selectionMode === 'month') {
this.currentView = 'month';
}
if (this.date && !this.year) {
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
}
if (this.showTime) {
// todo 这里可能有问题，并不能进入到这里，但不影响正常使用
this.$refs.timePicker.date = this.date;
this.$refs.timePicker.value = this.value;
this.$refs.timePicker.format = this.format;
this.$refs.timePicker.showDate = true;
}
}
};
</script>

27
src/components/date-picker/panel/mixin.js
View file

@ -1,27 +0,0 @@
const prefixCls = 'ivu-picker-panel';
const datePrefixCls = 'ivu-date-picker';
export default {
methods: {
iconBtnCls (direction, type = '') {
return [
`${prefixCls}-icon-btn`,
`${datePrefixCls}-${direction}-btn`,
`${datePrefixCls}-${direction}-btn-arrow${type}`,
];
},
handleShortcutClick (shortcut) {
if (shortcut.value) this.$emit('on-pick', shortcut.value());
if (shortcut.onClick) shortcut.onClick(this);
},
handlePickClear () {
this.$emit('on-pick-clear');
},
handlePickSuccess () {
this.$emit('on-pick-success');
},
handlePickClick () {
this.$emit('on-pick-click');
}
}
};

207
src/components/date-picker/panel/time-range.vue
View file

@ -1,207 +0,0 @@
<template>
<div :class="classes">
<div :class="[prefixCls + '-body']">
<div :class="[prefixCls + '-content', prefixCls + '-content-left']">
<div :class="[timePrefixCls + '-header']">
<template v-if="showDate">{{ visibleDate }}</template>
<template v-else>{{ t('i.datepicker.startTime') }}</template>
</div>
<time-spinner
v-ref:time-spinner
:show-seconds="showSeconds"
:hours="hours"
:minutes="minutes"
:seconds="seconds"
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
:hide-disabled-options="hideDisabledOptions"
@on-change="handleStartChange"
@on-pick-click="handlePickClick"></time-spinner>
</div>
<div :class="[prefixCls + '-content', prefixCls + '-content-right']">
<div :class="[timePrefixCls + '-header']">
<template v-if="showDate">{{ visibleDateEnd }}</template>
<template v-else>{{ t('i.datepicker.endTime') }}</template>
</div>
<time-spinner
v-ref:time-spinner-end
:show-seconds="showSeconds"
:hours="hoursEnd"
:minutes="minutesEnd"
:seconds="secondsEnd"
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
:hide-disabled-options="hideDisabledOptions"
@on-change="handleEndChange"
@on-pick-click="handlePickClick"></time-spinner>
</div>
<Confirm
v-if="confirm"
@on-pick-clear="handlePickClear"
@on-pick-success="handlePickSuccess"></Confirm>
</div>
</div>
</template>
<script>
import TimeSpinner from '../base/time-spinner.vue';
import Confirm from '../base/confirm.vue';
import Mixin from './mixin';
import Locale from '../../../mixins/locale';
import { initTimeDate, toDate, formatDate } from '../util';
const prefixCls = 'ivu-picker-panel';
const timePrefixCls = 'ivu-time-picker';
export default {
mixins: [ Mixin, Locale ],
components: { TimeSpinner, Confirm },
data () {
return {
prefixCls: prefixCls,
timePrefixCls: timePrefixCls,
format: 'HH:mm:ss',
showDate: false,
date: initTimeDate(),
dateEnd: initTimeDate(),
value: '',
hours: '',
minutes: '',
seconds: '',
hoursEnd: '',
minutesEnd: '',
secondsEnd: '',
disabledHours: [],
disabledMinutes: [],
disabledSeconds: [],
hideDisabledOptions: false,
confirm: false
};
},
computed: {
classes () {
return [
`${prefixCls}-body-wrapper`,
`${timePrefixCls}-with-range`,
{
[`${timePrefixCls}-with-seconds`]: this.showSeconds
}
];
},
showSeconds () {
return (this.format || '').indexOf('ss') !== -1;
},
visibleDate () {
const date = this.date || initTimeDate();
const tYear = this.t('i.datepicker.year');
const month = date.getMonth() + 1;
const tMonth = this.t(`i.datepicker.month${month}`);
return `${date.getFullYear()}${tYear} ${tMonth}`;
},
visibleDateEnd () {
const date = this.dateEnd || initTimeDate();
const tYear = this.t('i.datepicker.year');
const month = date.getMonth() + 1;
const tMonth = this.t(`i.datepicker.month${month}`);
return `${date.getFullYear()}${tYear} ${tMonth}`;
}
},
watch: {
value (newVal) {
if (!newVal) return;
if (Array.isArray(newVal)) {
const valStart = newVal[0] ? toDate(newVal[0]) : false;
const valEnd = newVal[1] ? toDate(newVal[1]) : false;
if (valStart && valEnd) {
this.handleChange(
{
hours: valStart.getHours(),
minutes: valStart.getMinutes(),
seconds: valStart.getSeconds()
},
{
hours: valEnd.getHours(),
minutes: valEnd.getMinutes(),
seconds: valEnd.getSeconds()
},
false
);
}
}
}
},
methods: {
handleClear() {
this.date = initTimeDate();
this.dateEnd = initTimeDate();
this.hours = '';
this.minutes = '';
this.seconds = '';
this.hoursEnd = '';
this.minutesEnd = '';
this.secondsEnd = '';
},
handleChange (date, dateEnd, emit = true) {
const oldDateEnd = new Date(this.dateEnd);
if (date.hours !== undefined) {
this.date.setHours(date.hours);
this.hours = this.date.getHours();
}
if (date.minutes !== undefined) {
this.date.setMinutes(date.minutes);
this.minutes = this.date.getMinutes();
}
if (date.seconds !== undefined) {
this.date.setSeconds(date.seconds);
this.seconds = this.date.getSeconds();
}
if (dateEnd.hours !== undefined) {
this.dateEnd.setHours(dateEnd.hours);
this.hoursEnd = this.dateEnd.getHours();
}
if (dateEnd.minutes !== undefined) {
this.dateEnd.setMinutes(dateEnd.minutes);
this.minutesEnd = this.dateEnd.getMinutes();
}
if (dateEnd.seconds !== undefined) {
this.dateEnd.setSeconds(dateEnd.seconds);
this.secondsEnd = this.dateEnd.getSeconds();
}
// judge endTime > startTime?
if (this.dateEnd < this.date) {
this.$nextTick(() => {
this.dateEnd = new Date(this.date);
this.hoursEnd = this.dateEnd.getHours();
this.minutesEnd = this.dateEnd.getMinutes();
this.secondsEnd = this.dateEnd.getSeconds();
const format = 'yyyy-MM-dd HH:mm:ss';
if (formatDate(oldDateEnd, format) !== formatDate(this.dateEnd, format)) {
if (emit) this.$emit('on-pick', [this.date, this.dateEnd], true);
}
});
} else {
if (emit) this.$emit('on-pick', [this.date, this.dateEnd], true);
}
},
handleStartChange (date) {
this.handleChange(date, {});
},
handleEndChange (date) {
this.handleChange({}, date);
},
updateScroll () {
this.$refs.timeSpinner.updateScroll();
this.$refs.timeSpinnerEnd.updateScroll();
}
},
compiled () {
if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
}
};
</script>

115
src/components/date-picker/panel/time.vue
View file

@ -1,115 +0,0 @@
<template>
<div :class="[prefixCls + '-body-wrapper']">
<div :class="[prefixCls + '-body']">
<div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div>
<div :class="[prefixCls + '-content']">
<time-spinner
v-ref:time-spinner
:show-seconds="showSeconds"
:hours="hours"
:minutes="minutes"
:seconds="seconds"
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
:hide-disabled-options="hideDisabledOptions"
@on-change="handleChange"
@on-pick-click="handlePickClick"></time-spinner>
</div>
<Confirm
v-if="confirm"
@on-pick-clear="handlePickClear"
@on-pick-success="handlePickSuccess"></Confirm>
</div>
</div>
</template>
<script>
import TimeSpinner from '../base/time-spinner.vue';
import Confirm from '../base/confirm.vue';
import Mixin from './mixin';
import Locale from '../../../mixins/locale';
import { initTimeDate } from '../util';
const prefixCls = 'ivu-picker-panel';
const timePrefixCls = 'ivu-time-picker';
export default {
mixins: [ Mixin, Locale ],
components: { TimeSpinner, Confirm },
data () {
return {
prefixCls: prefixCls,
timePrefixCls: timePrefixCls,
date: initTimeDate(),
value: '',
showDate: false,
format: 'HH:mm:ss',
hours: '',
minutes: '',
seconds: '',
disabledHours: [],
disabledMinutes: [],
disabledSeconds: [],
hideDisabledOptions: false,
confirm: false
};
},
computed: {
showSeconds () {
return (this.format || '').indexOf('ss') !== -1;
},
visibleDate () {
const date = this.date;
const month = date.getMonth() + 1;
const tYear = this.t('i.datepicker.year');
const tMonth = this.t(`i.datepicker.month${month}`);
return `${date.getFullYear()}${tYear} ${tMonth}`;
}
},
watch: {
value (newVal) {
if (!newVal) return;
newVal = new Date(newVal);
if (!isNaN(newVal)) {
this.date = newVal;
this.handleChange({
hours: newVal.getHours(),
minutes: newVal.getMinutes(),
seconds: newVal.getSeconds()
}, false);
}
}
},
methods: {
handleClear() {
this.date = initTimeDate();
this.hours = '';
this.minutes = '';
this.seconds = '';
},
handleChange (date, emit = true) {
if (date.hours !== undefined) {
this.date.setHours(date.hours);
this.hours = this.date.getHours();
}
if (date.minutes !== undefined) {
this.date.setMinutes(date.minutes);
this.minutes = this.date.getMinutes();
}
if (date.seconds !== undefined) {
this.date.setSeconds(date.seconds);
this.seconds = this.date.getSeconds();
}
if (emit) this.$emit('on-pick', this.date, true);
},
updateScroll () {
this.$refs.timeSpinner.updateScroll();
}
},
compiled () {
if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
}
};
</script>

496
src/components/date-picker/picker.vue
View file

@ -1,496 +0,0 @@
<template>
<div
:class="[prefixCls]"
v-clickoutside="handleClose">
<div v-el:reference :class="[prefixCls + '-rel']">
<slot>
<i-input
:class="[prefixCls + '-editor']"
:readonly="!editable || readonly"
:disabled="disabled"
:size="size"
:placeholder="placeholder"
:value="visualValue"
@on-change="handleInputChange"
@on-focus="handleFocus"
@on-click="handleIconClick"
@mouseenter="handleInputMouseenter"
@mouseleave="handleInputMouseleave"
:icon="iconType"></i-input>
</slot>
</div>
<Drop v-show="opened" :placement="placement" :transition="transition" v-ref:drop>
<div v-el:picker></div>
</Drop>
</div>
</template>
<script>
import Vue from 'vue';
import iInput from '../../components/input/input.vue';
import Drop from '../../components/select/dropdown.vue';
import clickoutside from '../../directives/clickoutside';
import { oneOf } from '../../utils/assist';
import { formatDate, parseDate } from './util';
const prefixCls = 'ivu-date-picker';
const DEFAULT_FORMATS = {
date: 'yyyy-MM-dd',
month: 'yyyy-MM',
year: 'yyyy',
datetime: 'yyyy-MM-dd HH:mm:ss',
time: 'HH:mm:ss',
timerange: 'HH:mm:ss',
daterange: 'yyyy-MM-dd',
datetimerange: 'yyyy-MM-dd HH:mm:ss'
};
const RANGE_SEPARATOR = ' - ';
const DATE_FORMATTER = function(value, format) {
return formatDate(value, format);
};
const DATE_PARSER = function(text, format) {
return parseDate(text, format);
};
const RANGE_FORMATTER = function(value, format) {
if (Array.isArray(value) && value.length === 2) {
const start = value[0];
const end = value[1];
if (start && end) {
return formatDate(start, format) + RANGE_SEPARATOR + formatDate(end, format);
}
}
return '';
};
const RANGE_PARSER = function(text, format) {
const array = text.split(RANGE_SEPARATOR);
if (array.length === 2) {
const range1 = array[0];
const range2 = array[1];
return [parseDate(range1, format), parseDate(range2, format)];
}
return [];
};
const TYPE_VALUE_RESOLVER_MAP = {
default: {
formatter(value) {
if (!value) return '';
return '' + value;
},
parser(text) {
if (text === undefined || text === '') return null;
return text;
}
},
date: {
formatter: DATE_FORMATTER,
parser: DATE_PARSER
},
datetime: {
formatter: DATE_FORMATTER,
parser: DATE_PARSER
},
daterange: {
formatter: RANGE_FORMATTER,
parser: RANGE_PARSER
},
datetimerange: {
formatter: RANGE_FORMATTER,
parser: RANGE_PARSER
},
timerange: {
formatter: RANGE_FORMATTER,
parser: RANGE_PARSER
},
time: {
formatter: DATE_FORMATTER,
parser: DATE_PARSER
},
month: {
formatter: DATE_FORMATTER,
parser: DATE_PARSER
},
year: {
formatter: DATE_FORMATTER,
parser: DATE_PARSER
},
number: {
formatter(value) {
if (!value) return '';
return '' + value;
},
parser(text) {
let result = Number(text);
if (!isNaN(text)) {
return result;
} else {
return null;
}
}
}
};
export default {
components: { iInput, Drop },
directives: { clickoutside },
props: {
format: {
type: String
},
readonly: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
editable: {
type: Boolean,
default: true
},
clearable: {
type: Boolean,
default: true
},
confirm: {
type: Boolean,
default: false
},
open: {
type: Boolean,
default: null
},
size: {
validator (value) {
return oneOf(value, ['small', 'large']);
}
},
placeholder: {
type: String,
default: ''
},
placement: {
validator (value) {
return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
},
default: 'bottom-start'
},
options: {
type: Object
}
},
data () {
return {
prefixCls: prefixCls,
showClose: false,
visible: false,
picker: null,
internalValue: '',
disableClickOutSide: false // fixed when click a date,trigger clickoutside to close picker
};
},
computed: {
opened () {
return this.open === null ? this.visible : this.open;
},
iconType () {
let icon = 'ios-calendar-outline';
if (this.type === 'time' || this.type === 'timerange') icon = 'ios-clock-outline';
if (this.showClose) icon = 'ios-close';
return icon;
},
transition () {
if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') {
return 'slide-up';
} else {
return 'slide-down';
}
},
selectionMode() {
if (this.type === 'month') {
return 'month';
} else if (this.type === 'year') {
return 'year';
}
return 'day';
},
visualValue: {
get () {
const value = this.internalValue;
if (!value) return;
const formatter = (
TYPE_VALUE_RESOLVER_MAP[this.type] ||
TYPE_VALUE_RESOLVER_MAP['default']
).formatter;
const format = DEFAULT_FORMATS[this.type];
return formatter(value, this.format || format);
},
set (value) {
if (value) {
const type = this.type;
const parser = (
TYPE_VALUE_RESOLVER_MAP[type] ||
TYPE_VALUE_RESOLVER_MAP['default']
).parser;
const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);
if (parsedValue) {
if (this.picker) this.picker.value = parsedValue;
}
return;
}
if (this.picker) this.picker.value = value;
}
}
},
methods: {
handleClose () {
if (this.open !== null) return;
if (!this.disableClickOutSide) this.visible = false;
this.disableClickOutSide = false;
},
handleFocus () {
if (this.readonly) return;
this.visible = true;
},
handleInputChange (event) {
const oldValue = this.visualValue;
const value = event.target.value;
let correctValue = '';
let correctDate = '';
const type = this.type;
const format = this.format || DEFAULT_FORMATS[type];
if (type === 'daterange' || type === 'timerange' || type === 'datetimerange') {
const parser = (
TYPE_VALUE_RESOLVER_MAP[type] ||
TYPE_VALUE_RESOLVER_MAP['default']
).parser;
const formatter = (
TYPE_VALUE_RESOLVER_MAP[type] ||
TYPE_VALUE_RESOLVER_MAP['default']
).formatter;
const parsedValue = parser(value, format);
if (parsedValue[0] instanceof Date && parsedValue[1] instanceof Date) {
if (parsedValue[0].getTime() > parsedValue[1].getTime()) {
correctValue = oldValue;
} else {
correctValue = formatter(parsedValue, format);
}
// todo 判断disabledDate
} else {
correctValue = oldValue;
}
correctDate = parser(correctValue, format);
} else if (type === 'time') {
const parsedDate = parseDate(value, format);
if (parsedDate instanceof Date) {
if (this.disabledHours.length || this.disabledMinutes.length || this.disabledSeconds.length) {
const hours = parsedDate.getHours();
const minutes = parsedDate.getMinutes();
const seconds = parsedDate.getSeconds();
if ((this.disabledHours.length && this.disabledHours.indexOf(hours) > -1) ||
(this.disabledMinutes.length && this.disabledMinutes.indexOf(minutes) > -1) ||
(this.disabledSeconds.length && this.disabledSeconds.indexOf(seconds) > -1)) {
correctValue = oldValue;
} else {
correctValue = formatDate(parsedDate, format);
}
} else {
correctValue = formatDate(parsedDate, format);
}
} else {
correctValue = oldValue;
}
correctDate = parseDate(correctValue, format);
} else {
const parsedDate = parseDate(value, format);
if (parsedDate instanceof Date) {
const options = this.options || false;
if (options && options.disabledDate && typeof options.disabledDate === 'function' && options.disabledDate(new Date(parsedDate))) {
correctValue = oldValue;
} else {
correctValue = formatDate(parsedDate, format);
}
} else {
correctValue = oldValue;
}
correctDate = parseDate(correctValue, format);
}
this.visualValue = correctValue;
event.target.value = correctValue;
this.internalValue = correctDate;
if (correctValue !== oldValue) this.emitChange(correctDate);
},
handleInputMouseenter () {
if (this.readonly || this.disabled) return;
if (this.visualValue && this.clearable) {
this.showClose = true;
}
},
handleInputMouseleave () {
this.showClose = false;
},
handleIconClick () {
if (this.showClose) {
this.handleClear();
} else {
this.handleFocus();
}
},
handleClear () {
this.visible = false;
this.internalValue = '';
this.value = '';
this.$emit('on-clear');
this.$dispatch('on-form-change', '');
},
showPicker () {
if (!this.picker) {
const type = this.type;
this.picker = new Vue(this.panel).$mount(this.$els.picker);
if (type === 'datetime' || type === 'datetimerange') {
this.confirm = true;
this.picker.showTime = true;
}
this.picker.value = this.internalValue;
this.picker.confirm = this.confirm;
this.picker.selectionMode = this.selectionMode;
if (this.format) this.picker.format = this.format;
// TimePicker
if (this.disabledHours) this.picker.disabledHours = this.disabledHours;
if (this.disabledMinutes) this.picker.disabledMinutes = this.disabledMinutes;
if (this.disabledSeconds) this.picker.disabledSeconds = this.disabledSeconds;
if (this.hideDisabledOptions) this.picker.hideDisabledOptions = this.hideDisabledOptions;
const options = this.options;
for (const option in options) {
this.picker[option] = options[option];
}
this.picker.$on('on-pick', (date, visible = false) => {
if (!this.confirm) this.visible = visible;
this.value = date;
this.picker.value = date;
this.picker.resetView && this.picker.resetView();
this.emitChange(date);
});
this.picker.$on('on-pick-clear', () => {
this.handleClear();
});
this.picker.$on('on-pick-success', () => {
this.visible = false;
this.$emit('on-ok');
});
this.picker.$on('on-pick-click', () => this.disableClickOutSide = true);
}
if (this.internalValue instanceof Date) {
this.picker.date = new Date(this.internalValue.getTime());
} else {
this.picker.value = this.internalValue;
}
this.picker.resetView && this.picker.resetView();
},
emitChange (date) {
const type = this.type;
const format = this.format || DEFAULT_FORMATS[type];
const formatter = (
TYPE_VALUE_RESOLVER_MAP[type] ||
TYPE_VALUE_RESOLVER_MAP['default']
).formatter;
let newDate = formatter(date, format);
if (type === 'daterange' || type === 'timerange') {
newDate = [newDate.split(RANGE_SEPARATOR)[0], newDate.split(RANGE_SEPARATOR)[1]];
}
this.$emit('on-change', newDate);
this.$dispatch('on-form-change', newDate);
}
},
watch: {
visible (val) {
if (val) {
this.showPicker();
this.$refs.drop.update();
if (this.open === null) this.$emit('on-open-change', true);
} else {
if (this.picker) this.picker.resetView && this.picker.resetView(true);
this.$refs.drop.destroy();
if (this.open === null) this.$emit('on-open-change', false);
}
},
internalValue(val) {
if (!val && this.picker && typeof this.picker.handleClear === 'function') {
this.picker.handleClear();
}
},
value: {
immediate: true,
handler (val) {
const type = this.type;
const parser = (
TYPE_VALUE_RESOLVER_MAP[type] ||
TYPE_VALUE_RESOLVER_MAP['default']
).parser;
if (val && type === 'time' && !(val instanceof Date)) {
val = parser(val, this.format || DEFAULT_FORMATS[type]);
} else if (val && type === 'timerange' && Array.isArray(val) && val.length === 2 && !(val[0] instanceof Date) && !(val[1] instanceof Date)) {
val = val.join(RANGE_SEPARATOR);
val = parser(val, this.format || DEFAULT_FORMATS[type]);
}
this.internalValue = val;
}
},
open (val) {
if (val === true) {
this.visible = val;
this.$emit('on-open-change', true);
} else if (val === false) {
this.$emit('on-open-change', false);
}
}
},
beforeDestroy () {
if (this.picker) {
this.picker.$destroy();
}
},
ready () {
if (this.open !== null) this.visible = this.open;
},
events: {
'on-form-blur' () {
return false;
},
'on-form-change' () {
return false;
}
}
};
</script>

36
src/components/date-picker/picker/date-picker.js
View file

@ -1,36 +0,0 @@
import Picker from '../picker.vue';
import DatePanel from '../panel/date.vue';
import DateRangePanel from '../panel/date-range.vue';
const getPanel = function (type) {
if (type === 'daterange' || type === 'datetimerange') {
return DateRangePanel;
}
return DatePanel;
};
import { oneOf } from '../../../utils/assist';
export default {
mixins: [Picker],
props: {
type: {
validator (value) {
return oneOf(value, ['year', 'month', 'date', 'daterange', 'datetime', 'datetimerange']);
},
default: 'date'
},
value: {}
},
created () {
if (!this.value) {
if (this.type === 'daterange' || this.type === 'datetimerange') {
this.value = ['',''];
} else {
this.value = '';
}
}
this.panel = getPanel(this.type);
}
};

36
src/components/date-picker/picker/time-picker.js
View file

@ -1,36 +0,0 @@
import Picker from '../picker.vue';
import TimePanel from '../panel/time.vue';
import TimeRangePanel from '../panel/time-range.vue';
import Options from '../time-mixins';
const getPanel = function (type) {
if (type === 'timerange') {
return TimeRangePanel;
}
return TimePanel;
};
import { oneOf } from '../../../utils/assist';
export default {
mixins: [Picker, Options],
props: {
type: {
validator (value) {
return oneOf(value, ['time', 'timerange']);
},
default: 'time'
},
value: {}
},
created () {
if (!this.value) {
if (this.type === 'timerange') {
this.value = ['',''];
} else {
this.value = '';
}
}
this.panel = getPanel(this.type);
}
};

26
src/components/date-picker/time-mixins.js
View file

@ -1,26 +0,0 @@
export default {
props: {
disabledHours: {
type: Array,
default () {
return [];
}
},
disabledMinutes: {
type: Array,
default () {
return [];
}
},
disabledSeconds: {
type: Array,
default () {
return [];
}
},
hideDisabledOptions: {
type: Boolean,
default: false
}
}
};

85
src/components/date-picker/util.js
View file

@ -1,85 +0,0 @@
import dateUtil from '../../utils/date';
export const toDate = function(date) {
date = new Date(date);
if (isNaN(date.getTime())) return null;
return date;
};
export const formatDate = function(date, format) {
date = toDate(date);
if (!date) return '';
return dateUtil.format(date, format || 'yyyy-MM-dd');
};
export const parseDate = function(string, format) {
return dateUtil.parse(string, format || 'yyyy-MM-dd');
};
export const getDayCountOfMonth = function(year, month) {
if (month === 3 || month === 5 || month === 8 || month === 10) {
return 30;
}
if (month === 1) {
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
return 29;
} else {
return 28;
}
}
return 31;
};
export const getFirstDayOfMonth = function(date) {
const temp = new Date(date.getTime());
temp.setDate(1);
return temp.getDay();
};
export const prevMonth = function(src) {
const year = src.getFullYear();
const month = src.getMonth();
const date = src.getDate();
const newYear = month === 0 ? year - 1 : year;
const newMonth = month === 0 ? 11 : month - 1;
const newMonthDayCount = getDayCountOfMonth(newYear, newMonth);
if (newMonthDayCount < date) {
src.setDate(newMonthDayCount);
}
src.setMonth(newMonth);
src.setFullYear(newYear);
return new Date(src.getTime());
};
export const nextMonth = function(src) {
const year = src.getFullYear();
const month = src.getMonth();
const date = src.getDate();
const newYear = month === 11 ? year + 1 : year;
const newMonth = month === 11 ? 0 : month + 1;
const newMonthDayCount = getDayCountOfMonth(newYear, newMonth);
if (newMonthDayCount < date) {
src.setDate(newMonthDayCount);
}
src.setMonth(newMonth);
src.setFullYear(newYear);
return new Date(src.getTime());
};
export const initTimeDate = function () {
const date = new Date();
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
return date;
};

57
src/components/dropdown/dropdown-item.vue
View file

@ -1,57 +0,0 @@
<template>
<li :class="classes" @click="handleClick"><slot></slot></li>
</template>
<script>
const prefixCls = 'ivu-dropdown-item';
export default {
props: {
key: {
type: [String, Number]
},
disabled: {
type: Boolean,
default: false
},
selected: {
type: Boolean,
default: false
},
divided: {
type: Boolean,
default: false
}
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-disabled`]: this.disabled,
[`${prefixCls}-selected`]: this.selected,
[`${prefixCls}-divided`]: this.divided
}
];
}
},
methods: {
handleClick () {
const $parent = this.$parent.$parent;
const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown';
if (this.disabled) {
this.$nextTick(() => {
$parent.visible = true;
});
} else if (hasChildren) {
this.$parent.$emit('on-haschild-click');
} else {
if ($parent && $parent.$options.name === 'Dropdown') {
$parent.$emit('on-hover-click');
}
}
$parent.$emit('on-click', this.key);
}
}
};
</script>

6
src/components/dropdown/dropdown-menu.vue
View file

@ -1,6 +0,0 @@
<template>
<ul class="ivu-dropdown-menu"><slot></slot></ul>
</template>
<script>
export default {};
</script>

134
src/components/dropdown/dropdown.vue
View file

@ -1,134 +0,0 @@
<template>
<div
:class="[prefixCls]"
v-clickoutside="handleClose"
@mouseenter="handleMouseenter"
@mouseleave="handleMouseleave">
<div :class="[prefixCls-rel]" v-el:reference @click="handleClick"><slot></slot></div>
<Drop v-show="visible" :placement="placement" :transition="transition" v-ref:drop><slot name="list"></slot></Drop>
</div>
</template>
<script>
import Drop from '../select/dropdown.vue';
import clickoutside from '../../directives/clickoutside';
import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-dropdown';
export default {
name: 'Dropdown',
directives: { clickoutside },
components: { Drop },
props: {
trigger: {
validator (value) {
return oneOf(value, ['click', 'hover', 'custom']);
},
default: 'hover'
},
placement: {
validator (value) {
return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
},
default: 'bottom'
},
visible: {
type: Boolean,
default: false
}
},
computed: {
transition () {
return ['bottom-start', 'bottom', 'bottom-end'].indexOf(this.placement) > -1 ? 'slide-up' : 'fade';
}
},
data () {
return {
prefixCls: prefixCls
};
},
methods: {
handleClick () {
if (this.trigger === 'custom') return false;
if (this.trigger !== 'click') {
return false;
}
this.visible = !this.visible;
},
handleMouseenter () {
if (this.trigger === 'custom') return false;
if (this.trigger !== 'hover') {
return false;
}
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.visible = true;
}, 250);
},
handleMouseleave () {
if (this.trigger === 'custom') return false;
if (this.trigger !== 'hover') {
return false;
}
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.visible = false;
}, 150);
},
handleClose () {
if (this.trigger === 'custom') return false;
if (this.trigger !== 'click') {
return false;
}
this.visible = false;
},
hasParent () {
const $parent = this.$parent.$parent;
if ($parent && $parent.$options.name === 'Dropdown') {
return $parent;
} else {
return false;
}
}
},
watch: {
visible (val) {
if (val) {
this.$refs.drop.update();
} else {
this.$refs.drop.destroy();
}
this.$emit('on-visible-change', val);
}
},
events: {
'on-click' (key) {
const $parent = this.hasParent();
if ($parent ) $parent.$emit('on-click', key);
},
'on-hover-click' () {
const $parent = this.hasParent();
if ($parent) {
this.$nextTick(() => {
if (this.trigger === 'custom') return false;
this.visible = false;
});
$parent.$emit('on-hover-click');
} else {
this.$nextTick(() => {
if (this.trigger === 'custom') return false;
this.visible = false;
});
}
},
'on-haschild-click' () {
this.$nextTick(() => {
if (this.trigger === 'custom') return false;
this.visible = true;
});
const $parent = this.hasParent();
if ($parent) $parent.$emit('on-haschild-click');
}
}
};
</script>

7
src/components/dropdown/index.js
View file

@ -1,7 +0,0 @@
import Dropdown from './dropdown.vue';
import DropdownMenu from './dropdown-menu.vue';
import DropdownItem from './dropdown-item.vue';
Dropdown.Menu = DropdownMenu;
Dropdown.Item = DropdownItem;
export default Dropdown;

235
src/components/form/form-item.vue
View file

@ -1,235 +0,0 @@
<template>
<div :class="classes">
<label :class="[prefixCls + '-label']" :style="labelStyles" v-if="label"><slot name="label">{{ label }}</slot></label>
<div :class="[prefixCls + '-content']" :style="contentStyles">
<slot></slot>
<div transition="fade" :class="[prefixCls + '-error-tip']" v-if="validateState === 'error' && showMessage && form.showMessage">{{ validateMessage }}</div>
</div>
</div>
</template>
<script>
// https://github.com/ElemeFE/element/blob/dev/packages/form/src/form-item.vue
import AsyncValidator from 'async-validator';
const prefixCls = 'ivu-form-item';
function getPropByPath(obj, path) {
let tempObj = obj;
path = path.replace(/\[(\w+)\]/g, '.$1');
path = path.replace(/^\./, '');
let keyArr = path.split('.');
let i = 0;
for (let len = keyArr.length; i < len - 1; ++i) {
let key = keyArr[i];
if (key in tempObj) {
tempObj = tempObj[key];
} else {
throw new Error('[iView warn]: please transfer a valid prop path to form item!');
}
}
return {
o: tempObj,
k: keyArr[i],
v: tempObj[keyArr[i]]
};
}
export default {
props: {
label: {
type: String,
default: ''
},
labelWidth: {
type: Number
},
prop: {
type: String
},
required: {
type: Boolean,
default: false
},
rules: {
type: [Object, Array]
},
error: {
type: String
},
validateStatus: {
type: Boolean
},
showMessage: {
type: Boolean,
default: true
}
},
data () {
return {
prefixCls: prefixCls,
isRequired: false,
validateState: '',
validateMessage: '',
validateDisabled: false,
validator: {}
};
},
watch: {
error (val) {
this.validateMessage = val;
this.validateState = 'error';
},
validateStatus (val) {
this.validateState = val;
}
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-required`]: this.required || this.isRequired,
[`${prefixCls}-error`]: this.validateState === 'error',
[`${prefixCls}-validating`]: this.validateState === 'validating'
}
];
},
form() {
let parent = this.$parent;
while (parent.$options.name !== 'iForm') {
parent = parent.$parent;
}
return parent;
},
fieldValue: {
cache: false,
get() {
const model = this.form.model;
if (!model || !this.prop) { return; }
let path = this.prop;
if (path.indexOf(':') !== -1) {
path = path.replace(/:/, '.');
}
return getPropByPath(model, path).v;
}
},
labelStyles () {
let style = {};
const labelWidth = this.labelWidth || this.form.labelWidth;
if (labelWidth) {
style.width = `${labelWidth}px`;
}
return style;
},
contentStyles () {
let style = {};
const labelWidth = this.labelWidth || this.form.labelWidth;
if (labelWidth) {
style.marginLeft = `${labelWidth}px`;
}
return style;
}
},
methods: {
getRules () {
let formRules = this.form.rules;
const selfRules = this.rules;
formRules = formRules ? formRules[this.prop] : [];
return [].concat(selfRules || formRules || []);
},
getFilteredRule (trigger) {
const rules = this.getRules();
return rules.filter(rule => !rule.trigger || rule.trigger.indexOf(trigger) !== -1);
},
validate(trigger, callback = function () {}) {
const rules = this.getFilteredRule(trigger);
if (!rules || rules.length === 0) {
callback();
return true;
}
this.validateState = 'validating';
let descriptor = {};
descriptor[this.prop] = rules;
const validator = new AsyncValidator(descriptor);
let model = {};
model[this.prop] = this.fieldValue;
validator.validate(model, { firstFields: true }, errors => {
this.validateState = !errors ? 'success' : 'error';
this.validateMessage = errors ? errors[0].message : '';
callback(this.validateMessage);
});
},
resetField () {
this.validateState = '';
this.validateMessage = '';
let model = this.form.model;
let value = this.fieldValue;
let path = this.prop;
if (path.indexOf(':') !== -1) {
path = path.replace(/:/, '.');
}
let prop = getPropByPath(model, path);
if (Array.isArray(value) && value.length > 0) {
this.validateDisabled = true;
prop.o[prop.k] = [];
} else if (value !== this.initialValue) {
this.validateDisabled = true;
prop.o[prop.k] = this.initialValue;
}
},
onFieldBlur() {
this.validate('blur');
},
onFieldChange() {
if (this.validateDisabled) {
this.validateDisabled = false;
return;
}
this.validate('change');
}
},
ready () {
if (this.prop) {
this.$dispatch('on-form-item-add', this);
Object.defineProperty(this, 'initialValue', {
value: this.fieldValue
});
let rules = this.getRules();
if (rules.length) {
rules.every(rule => {
if (rule.required) {
this.isRequired = true;
return false;
}
});
this.$on('on-form-blur', this.onFieldBlur);
this.$on('on-form-change', this.onFieldChange);
}
}
},
beforeDestroy () {
this.$dispatch('on-form-item-remove', this);
}
};
</script>

96
src/components/form/form.vue
View file

@ -1,96 +0,0 @@
<template>
<form :class="classes"><slot></slot></form>
</template>
<script>
// https://github.com/ElemeFE/element/blob/dev/packages/form/src/form.vue
import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-form';
export default {
name: 'iForm',
props: {
model: {
type: Object
},
rules: {
type: Object
},
labelWidth: {
type: Number
},
labelPosition: {
validator (value) {
return oneOf(value, ['left', 'right', 'top']);
},
default: 'right'
},
inline: {
type: Boolean,
default: false
},
showMessage: {
type: Boolean,
default: true
}
},
data () {
return {
fields: []
};
},
computed: {
classes () {
return [
`${prefixCls}`,
`${prefixCls}-label-${this.labelPosition}`,
{
[`${prefixCls}-inline`]: this.inline
}
];
}
},
methods: {
resetFields() {
this.fields.forEach(field => {
field.resetField();
});
},
validate(callback) {
let valid = true;
let count = 0;
this.fields.forEach(field => {
field.validate('', errors => {
if (errors) {
valid = false;
}
if (typeof callback === 'function' && ++count === this.fields.length) {
callback(valid);
}
});
});
},
validateField(prop, cb) {
const field = this.fields.filter(field => field.prop === prop)[0];
if (!field) { throw new Error('[iView warn]: must call validateField with valid prop string!'); }
field.validate('', cb);
}
},
watch: {
rules() {
this.validate();
}
},
events: {
'on-form-item-add' (field) {
if (field) this.fields.push(field);
return false;
},
'on-form-item-remove' (field) {
if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);
return false;
}
}
};
</script>

5
src/components/form/index.js
View file

@ -1,5 +0,0 @@
import Form from './form.vue';
import FormItem from './form-item.vue';
Form.Item = FormItem;
export default Form;

32
src/components/icon/icon.vue
View file

@ -1,32 +0,0 @@
<template>
<i :class="classes" :style="styles"></i>
</template>
<script>
const prefixCls = 'ivu-icon';
export default {
props: {
type: String,
size: [Number, String],
color: String
},
computed: {
classes () {
return `${prefixCls} ${prefixCls}-${this.type}`;
},
styles () {
let style = {};
if (this.size) {
style['font-size'] = `${this.size}px`;
}
if (this.color) {
style.color = this.color;
}
return style;
}
}
};
</script>

2
src/components/icon/index.js
View file

@ -1,2 +0,0 @@
import Icon from './icon.vue';
export default Icon;

2
src/components/input-number/index.js
View file

@ -1,2 +0,0 @@
import InputNumber from './input-number.vue';
export default InputNumber;

262
src/components/input-number/input-number.vue
View file

@ -1,262 +0,0 @@
<template>
<div :class="wrapClasses">
<div :class="handlerClasses">
<a
@click="up"
@mouse.down="preventDefault"
:class="upClasses">
<span :class="innerUpClasses" @click="preventDefault"></span>
</a>
<a
@click="down"
@mouse.down="preventDefault"
:class="downClasses">
<span :class="innerDownClasses" @click="preventDefault"></span>
</a>
</div>
<div :class="inputWrapClasses">
<input
:class="inputClasses"
:disabled="disabled"
autocomplete="off"
@focus="focus"
@blur="blur"
@keydown.stop="keyDown"
@change="change"
:value="value">
</div>
</div>
</template>
<script>
import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-input-number';
const iconPrefixCls = 'ivu-icon';
function isValueNumber (value) {
return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value + '');
}
function addNum (num1, num2) {
let sq1, sq2, m;
try {
sq1 = num1.toString().split('.')[1].length;
}
catch (e) {
sq1 = 0;
}
try {
sq2 = num2.toString().split('.')[1].length;
}
catch (e) {
sq2 = 0;
}
// if (sq1 === 0 || sq2 === 0) {
// return num1 + num2;
// } else {
// m = Math.pow(10, Math.max(sq1, sq2));
// return (num1 * m + num2 * m) / m;
// }
m = Math.pow(10, Math.max(sq1, sq2));
return (num1 * m + num2 * m) / m;
}
export default {
props: {
max: {
type: Number,
default: Infinity
},
min: {
type: Number,
default: -Infinity
},
step: {
type: Number,
default: 1
},
value: {
type: Number,
default: 1
},
size: {
validator (value) {
return oneOf(value, ['small', 'large']);
}
},
disabled: {
type: Boolean,
default: false
}
},
data () {
return {
focused: false,
upDisabled: false,
downDisabled: false
};
},
computed: {
wrapClasses () {
return [
`${prefixCls}`,
{
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-disabled`]: this.disabled,
[`${prefixCls}-focused`]: this.focused
}
];
},
handlerClasses () {
return `${prefixCls}-handler-wrap`;
},
upClasses () {
return [
`${prefixCls}-handler`,
`${prefixCls}-handler-up`,
{
[`${prefixCls}-handler-up-disabled`]: this.upDisabled
}
];
},
innerUpClasses () {
return `${prefixCls}-handler-up-inner ${iconPrefixCls} ${iconPrefixCls}-ios-arrow-up`;
},
downClasses () {
return [
`${prefixCls}-handler`,
`${prefixCls}-handler-down`,
{
[`${prefixCls}-handler-down-disabled`]: this.downDisabled
}
];
},
innerDownClasses () {
return `${prefixCls}-handler-down-inner ${iconPrefixCls} ${iconPrefixCls}-ios-arrow-down`;
},
inputWrapClasses () {
return `${prefixCls}-input-wrap`;
},
inputClasses () {
return `${prefixCls}-input`;
}
},
methods: {
preventDefault (e) {
e.preventDefault();
},
up (e) {
const targetVal = Number(e.target.value);
if (this.upDisabled && isNaN(targetVal)) {
return false;
}
this.changeStep('up', e);
},
down (e) {
const targetVal = Number(e.target.value);
if (this.downDisabled && isNaN(targetVal)) {
return false;
}
this.changeStep('down', e);
},
changeStep (type, e) {
if (this.disabled) {
return false;
}
const targetVal = Number(e.target.value);
let val = Number(this.value);
const step = Number(this.step);
if (isNaN(val)) {
return false;
}
// input a number, and key up or down
if (!isNaN(targetVal)) {
if (type === 'up') {
if (addNum(targetVal, step) <= this.max) {
val = targetVal;
} else {
return false;
}
} else if (type === 'down') {
if (addNum(targetVal, -step) >= this.min) {
val = targetVal;
} else {
return false;
}
}
}
if (type === 'up') {
val = addNum(val, step);
} else if (type === 'down') {
val = addNum(val, -step);
}
this.setValue(val);
},
setValue (val) {
this.$nextTick(() => {
this.value = val;
this.$emit('on-change', val);
this.$dispatch('on-form-change', val);
});
},
focus () {
this.focused = true;
},
blur () {
this.focused = false;
},
keyDown (e) {
if (e.keyCode === 38) {
e.preventDefault();
this.up(e);
} else if (e.keyCode === 40) {
e.preventDefault();
this.down(e);
}
},
change (event) {
let val = event.target.value.trim();
const max = this.max;
const min = this.min;
if (isValueNumber(val)) {
val = Number(val);
this.value = val;
if (val > max) {
this.setValue(max);
} else if (val < min) {
this.setValue(min);
} else {
this.setValue(val);
}
} else {
event.target.value = this.value;
}
},
changeVal (val) {
if (isValueNumber(val) || val === 0) {
val = Number(val);
const step = this.step;
this.upDisabled = val + step > this.max;
this.downDisabled = val - step < this.min;
} else {
this.upDisabled = true;
this.downDisabled = true;
}
}
},
compiled () {
this.changeVal(this.value);
},
watch: {
value (val) {
this.changeVal(val);
}
}
};
</script>

2
src/components/input/index.js
View file

@ -1,2 +0,0 @@
import Input from './input.vue';
export default Input;

189
src/components/input/input.vue
View file

@ -1,189 +0,0 @@
<template>
<div :class="wrapClasses">
<template v-if="type !== 'textarea'">
<div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady" v-el:prepend><slot name="prepend"></slot></div>
<i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon']" v-if="icon" @click="handleIconClick"></i>
<i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-else transition="fade"></i>
<input
:type="type"
:class="inputClasses"
:placeholder="placeholder"
:disabled="disabled"
:maxlength="maxlength"
:readonly="readonly"
:name="name"
v-model="value"
:number="number"
@keyup.enter="handleEnter"
@focus="handleFocus"
@blur="handleBlur"
@change="handleChange">
<div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady" v-el:append><slot name="append"></slot></div>
</template>
<textarea
v-else
v-el:textarea
:class="textareaClasses"
:style="textareaStyles"
:placeholder="placeholder"
:disabled="disabled"
:rows="rows"
:maxlength="maxlength"
:readonly="readonly"
:name="name"
v-model="value"
@keyup.enter="handleEnter"
@focus="handleFocus"
@blur="handleBlur"
@change="handleChange">
</textarea>
</div>
</template>
<script>
import { oneOf } from '../../utils/assist';
import calcTextareaHeight from '../../utils/calcTextareaHeight';
const prefixCls = 'ivu-input';
export default {
props: {
type: {
validator (value) {
return oneOf(value, ['text', 'textarea', 'password']);
},
default: 'text'
},
value: {
type: [String, Number],
default: '',
// twoWay: true
},
size: {
validator (value) {
return oneOf(value, ['small', 'large']);
}
},
placeholder: {
type: String,
default: ''
},
maxlength: {
type: Number
},
disabled: {
type: Boolean,
default: false
},
icon: String,
autosize: {
type: [Boolean, Object],
default: false
},
rows: {
type: Number,
default: 2
},
readonly: {
type: Boolean,
default: false
},
name: {
type: String
},
number: {
type: Boolean,
default: false
}
},
data () {
return {
prefixCls: prefixCls,
prepend: true,
append: true,
slotReady: false,
textareaStyles: {}
};
},
computed: {
wrapClasses () {
return [
`${prefixCls}-wrapper`,
{
[`${prefixCls}-wrapper-${this.size}`]: !!this.size,
[`${prefixCls}-type`]: this.type,
[`${prefixCls}-group`]: this.prepend || this.append,
[`${prefixCls}-group-${this.size}`]: (this.prepend || this.append) && !!this.size
}
];
},
inputClasses () {
return [
`${prefixCls}`,
{
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-disabled`]: this.disabled
}
];
},
textareaClasses () {
return [
`${prefixCls}`,
{
[`${prefixCls}-disabled`]: this.disabled
}
];
}
},
methods: {
handleEnter () {
this.$emit('on-enter');
},
handleIconClick () {
this.$emit('on-click');
},
handleFocus () {
this.$emit('on-focus');
},
handleBlur () {
this.$emit('on-blur');
this.$dispatch('on-form-blur', this.value);
},
handleChange (event) {
this.$emit('on-change', event);
},
resizeTextarea () {
const autosize = this.autosize;
if (!autosize || this.type !== 'textarea') {
return false;
}
const minRows = autosize.minRows;
const maxRows = autosize.maxRows;
this.textareaStyles = calcTextareaHeight(this.$els.textarea, minRows, maxRows);
},
init () {
if (this.type !== 'textarea') {
this.prepend = this.$els.prepend.innerHTML !== '';
this.append = this.$els.append.innerHTML !== '';
} else {
this.prepend = false;
this.append = false;
}
this.slotReady = true;
this.resizeTextarea();
}
},
watch: {
value () {
this.$nextTick(() => {
this.resizeTextarea();
});
this.$dispatch('on-form-change', this.value);
}
},
compiled () {
this.$nextTick(() => this.init());
}
};
</script>

71
src/components/layout/col.vue
View file

@ -1,71 +0,0 @@
<template>
<div :class="classes" :style="styles">
<slot></slot>
</div>
</template>
<script>
const prefixCls = 'ivu-col';
export default {
props: {
span: [Number, String],
order: [Number, String],
offset: [Number, String],
push: [Number, String],
pull: [Number, String],
className: String,
xs: [Number, Object],
sm: [Number, Object],
md: [Number, Object],
lg: [Number, Object]
},
data () {
return {
gutter: 0
};
},
computed: {
classes () {
let classList = [
`${prefixCls}`,
{
[`${prefixCls}-span-${this.span}`]: this.span,
[`${prefixCls}-order-${this.order}`]: this.order,
[`${prefixCls}-offset-${this.offset}`]: this.offset,
[`${prefixCls}-push-${this.push}`]: this.push,
[`${prefixCls}-pull-${this.pull}`]: this.pull,
[`${this.className}`]: !!this.className
}
];
['xs', 'sm', 'md', 'lg'].forEach(size => {
if (typeof this[size] === 'number') {
classList.push(`${prefixCls}-span-${size}-${this[size]}`);
} else if (typeof this[size] === 'object') {
let props = this[size];
Object.keys(props).forEach(prop => {
classList.push(
prop !== 'span'
? `${prefixCls}-${size}-${prop}-${props[prop]}`
: `${prefixCls}-span-${size}-${props[prop]}`
);
});
}
});
return classList;
},
styles () {
let style = {};
if (this.gutter !== 0) {
style = {
paddingLeft: this.gutter / 2 + 'px',
paddingRight: this.gutter / 2 + 'px'
};
}
return style;
}
}
};
</script>

4
src/components/layout/index.js
View file

@ -1,4 +0,0 @@
import Row from './row.vue';
import Col from './col.vue';
export { Row, Col };

76
src/components/layout/row.vue
View file

@ -1,76 +0,0 @@
<template>
<div :class="classes" :style="styles">
<slot></slot>
</div>
</template>
<script>
import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-row';
export default {
props: {
type: {
validator (value) {
return oneOf(value, ['flex']);
}
},
align: {
validator (value) {
return oneOf(value, ['top', 'middle', 'bottom']);
}
},
justify: {
validator (value) {
return oneOf(value, ['start', 'end', 'center', 'space-around', 'space-between']);
}
},
gutter: {
type: Number,
default: 0
},
className: String
},
computed: {
classes () {
return [
{
[`${prefixCls}`]: !this.type,
[`${prefixCls}-${this.type}`]: !!this.type,
[`${prefixCls}-${this.type}-${this.align}`]: !!this.align,
[`${prefixCls}-${this.type}-${this.justify}`]: !!this.justify,
[`${this.className}`]: !!this.className
}
];
},
styles () {
let style = {};
if (this.gutter !== 0) {
style = {
marginLeft: this.gutter / -2 + 'px',
marginRight: this.gutter / -2 + 'px'
};
}
return style;
}
},
methods: {
updateGutter (val) {
this.$children.forEach((child) => {
if (val !== 0) {
child.gutter = val;
}
});
}
},
watch: {
gutter (val) {
this.updateGutter(val);
}
},
ready () {
this.updateGutter(this.gutter);
}
};
</script>

112
src/components/loading-bar/index.js
View file

@ -1,112 +0,0 @@
import LoadingBar from './loading-bar';
let loadingBarInstance;
let color = 'primary';
let failedColor = 'error';
let height = 2;
let timer;
function getLoadingBarInstance () {
loadingBarInstance = loadingBarInstance || LoadingBar.newInstance({
color: color,
failedColor: failedColor,
height: height
});
return loadingBarInstance;
}
function update(options) {
let instance = getLoadingBarInstance();
instance.update(options);
}
function hide() {
setTimeout(() => {
update({
show: false
});
setTimeout(() => {
update({
percent: 0
});
}, 200);
}, 800);
}
function clearTimer() {
if (timer) {
clearInterval(timer);
timer = null;
}
}
export default {
start () {
if (timer) return;
let percent = 0;
update({
percent: percent,
status: 'success',
show: true
});
timer = setInterval(() => {
percent += Math.floor(Math.random () * 3 + 5);
if (percent > 95) {
clearTimer();
}
update({
percent: percent,
status: 'success',
show: true
});
}, 200);
},
update (percent) {
clearTimer();
update({
percent: percent,
status: 'success',
show: true
});
},
finish () {
clearTimer();
update({
percent: 100,
status: 'success',
show: true
});
hide();
},
error () {
clearTimer();
update({
percent: 100,
status: 'error',
show: true
});
hide();
},
config (options) {
if (options.color) {
color = options.color;
}
if (options.failedColor) {
failedColor = options.failedColor;
}
if (options.height) {
height = options.height;
}
},
destroy () {
clearTimer();
let instance = getLoadingBarInstance();
loadingBarInstance = null;
instance.destroy();
}
};

42
src/components/loading-bar/loading-bar.js
View file

@ -1,42 +0,0 @@
import LoadingBar from './loading-bar.vue';
import Vue from 'vue';
import { camelcaseToHyphen } from '../../utils/assist';
LoadingBar.newInstance = properties => {
const _props = properties || {};
let props = '';
Object.keys(_props).forEach(prop => {
props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
});
const div = document.createElement('div');
div.innerHTML = `<loading-bar${props}></loading-bar>`;
document.body.appendChild(div);
const loading_bar = new Vue({
el: div,
data: _props,
components: { LoadingBar }
}).$children[0];
return {
update (options) {
if ('percent' in options) {
loading_bar.percent = options.percent;
}
if (options.status) {
loading_bar.status = options.status;
}
if ('show' in options) {
loading_bar.show = options.show;
}
},
component: loading_bar,
destroy () {
document.body.removeChild(div);
}
};
};
export default LoadingBar;

77
src/components/loading-bar/loading-bar.vue
View file

@ -1,77 +0,0 @@
<template>
<div :class="classes" :style="outerStyles" v-show="show" transition="fade">
<div :class="innerClasses" :style="styles"></div>
</div>
</template>
<script>
import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-loading-bar';
export default {
props: {
percent: {
type: Number,
default: 0
},
color: {
type: String,
default: 'primary'
},
failedColor: {
type: String,
default: 'error'
},
height: {
type: Number,
default: 2
},
status: {
type: String,
validator (value) {
return oneOf(value, ['success', 'error']);
},
default: 'success'
},
show: {
type: Boolean,
default: false
}
},
computed: {
classes () {
return `${prefixCls}`;
},
innerClasses () {
return [
`${prefixCls}-inner`,
{
[`${prefixCls}-inner-color-primary`]: this.color === 'primary' && this.status === 'success',
[`${prefixCls}-inner-failed-color-error`]: this.failedColor === 'error' && this.status === 'error'
}
];
},
outerStyles () {
return {
height: `${this.height}px`
};
},
styles () {
let style = {
width: `${this.percent}%`,
height: `${this.height}px`
};
if (this.color !== 'primary' && this.status === 'success') {
style.backgroundColor = this.color;
}
if (this.failedColor !== 'error' && this.status === 'error') {
style.backgroundColor = this.failedColor;
}
return style;
}
}
};
</script>

10
src/components/menu/index.js
View file

@ -1,10 +0,0 @@
import Menu from './menu.vue';
import MenuGroup from './menu-group.vue';
import MenuItem from './menu-item.vue';
import Submenu from './submenu.vue';
Menu.Group = MenuGroup;
Menu.Item = MenuItem;
Menu.Sub = Submenu;
export default Menu;

24
src/components/menu/menu-group.vue
View file

@ -1,24 +0,0 @@
<template>
<li :class="[prefixCls + '-item-group']">
<div :class="[prefixCls + '-item-group-title']">{{ title }}</div>
<ul><slot></slot></ul>
</li>
</template>
<script>
const prefixCls = 'ivu-menu';
export default {
name: 'MenuGroup',
props: {
title: {
type: String,
default: ''
}
},
data () {
return {
prefixCls: prefixCls
};
}
};
</script>

43
src/components/menu/menu-item.vue
View file

@ -1,43 +0,0 @@
<template>
<li :class="classes" @click.stop="handleClick"><slot></slot></li>
</template>
<script>
const prefixCls = 'ivu-menu';
export default {
name: 'MenuItem',
props: {
key: {
type: [String, Number],
required: true
},
disabled: {
type: Boolean,
default: false
}
},
data () {
return {
active: false
};
},
computed: {
classes () {
return [
`${prefixCls}-item`,
{
[`${prefixCls}-item-active`]: this.active,
[`${prefixCls}-item-selected`]: this.active,
[`${prefixCls}-item-disabled`]: this.disabled
}
];
}
},
methods: {
handleClick () {
if (this.disabled) return;
this.$dispatch('on-menu-item-select', this.key);
}
}
};
</script>

134
src/components/menu/menu.vue
View file

@ -1,134 +0,0 @@
<template>
<ul :class="classes" :style="styles"><slot></slot></ul>
</template>
<script>
import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-menu';
export default {
props: {
mode: {
validator (value) {
return oneOf(value, ['horizontal', 'vertical']);
},
default: 'vertical'
},
theme: {
validator (value) {
return oneOf(value, ['light', 'dark', 'primary']);
},
default: 'light'
},
activeKey: {
type: [String, Number]
},
openKeys: {
type: Array,
default () {
return [];
}
},
accordion: {
type: Boolean,
default: false
},
width: {
type: String,
default: '240px'
}
},
computed: {
classes () {
let theme = this.theme;
if (this.mode === 'vertical' && this.theme === 'primary') theme = 'light';
return [
`${prefixCls}`,
`${prefixCls}-${theme}`,
{
[`${prefixCls}-${this.mode}`]: this.mode
}
];
},
styles () {
let style = {};
if (this.mode === 'vertical') style.width = this.width;
return style;
}
},
methods: {
updateActiveKey () {
this.$children.forEach((item, index) => {
if (!this.activeKey && index === 0) {
this.activeKey = -1;
}
if (item.$options.name === 'Submenu') {
item.active = false;
item.$children.forEach(subitem => {
if (subitem.$options.name === 'MenuGroup') {
subitem.$children.forEach(groupItem => {
if (groupItem.key === this.activeKey) {
groupItem.active = true;
groupItem.$parent.$parent.active = true;
} else {
groupItem.active = false;
}
});
} else if (subitem.$options.name === 'MenuItem') {
if (subitem.key === this.activeKey) {
subitem.active = true;
subitem.$parent.active = true;
} else {
subitem.active = false;
}
}
});
} else if (item.$options.name === 'MenuGroup') {
item.$children.forEach(groupItem => {
groupItem.active = groupItem.key === this.activeKey;
});
} else if (item.$options.name === 'MenuItem') {
item.active = item.key === this.activeKey;
}
});
},
updateOpenKeys (key) {
const index = this.openKeys.indexOf(key);
if (index > -1) {
this.openKeys.splice(index, 1);
} else {
this.openKeys.push(key);
}
},
updateOpened () {
this.$children.forEach(item => {
if (item.$options.name === 'Submenu') {
if (this.openKeys.indexOf(item.key) > -1) item.opened = true;
}
});
}
},
compiled () {
this.updateActiveKey();
this.updateOpened();
},
events: {
'on-menu-item-select' (key) {
this.activeKey = key;
this.$emit('on-select', key);
}
},
watch: {
openKeys () {
this.$emit('on-open-change', this.openKeys);
},
activeKey () {
this.updateActiveKey();
}
}
};
</script>

127
src/components/menu/submenu.vue
View file

@ -1,127 +0,0 @@
<template>
<li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
<div :class="[prefixCls + '-submenu-title']" v-el:reference @click="handleClick">
<slot name="title"></slot>
<Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
</div>
<ul :class="[prefixCls]" v-if="mode === 'vertical'" v-show="opened"><slot></slot></ul>
<Drop
v-else
v-show="opened"
placement="bottom"
transition="slide-up"
v-ref:drop
:style="dropStyle"><slot></slot></Drop>
</li>
</template>
<script>
import Drop from '../select/dropdown.vue';
import Icon from '../icon/icon.vue';
import { getStyle } from '../../utils/assist';
const prefixCls = 'ivu-menu';
export default {
name: 'Submenu',
components: { Icon, Drop },
props: {
key: {
type: [String, Number],
required: true
},
disabled: {
type: Boolean,
default: false
}
},
data () {
return {
prefixCls: prefixCls,
active: false,
opened: false,
dropWidth: parseFloat(getStyle(this.$el, 'width'))
};
},
computed: {
classes () {
return [
`${prefixCls}-submenu`,
{
[`${prefixCls}-item-active`]: this.active,
[`${prefixCls}-opened`]: this.opened,
[`${prefixCls}-submenu-disabled`]: this.disabled
}
];
},
mode () {
return this.$parent.mode;
},
accordion () {
return this.$parent.accordion;
},
dropStyle () {
let style = {};
if (this.dropWidth) style.minWidth = `${this.dropWidth}px`;
return style;
}
},
methods: {
handleMouseenter () {
if (this.disabled) return;
if (this.mode === 'vertical') return;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.$parent.updateOpenKeys(this.key);
this.opened = true;
}, 250);
},
handleMouseleave () {
if (this.disabled) return;
if (this.mode === 'vertical') return;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.$parent.updateOpenKeys(this.key);
this.opened = false;
}, 150);
},
handleClick () {
if (this.disabled) return;
if (this.mode === 'horizontal') return;
const opened = this.opened;
if (this.accordion) {
this.$parent.$children.forEach(item => {
if (item.$options.name === 'Submenu') item.opened = false;
});
}
this.opened = !opened;
this.$parent.updateOpenKeys(this.key);
}
},
watch: {
mode (val) {
if (val === 'horizontal') {
this.$refs.drop.update();
}
},
opened (val) {
if (this.mode === 'vertical') return;
if (val) {
// set drop a width to fixed when menu has fixed position
this.dropWidth = parseFloat(getStyle(this.$el, 'width'));
this.$refs.drop.update();
} else {
this.$refs.drop.destroy();
}
}
},
events: {
'on-menu-item-select' () {
if (this.mode === 'horizontal') this.opened = false;
return true;
}
}
};
</script>

97
src/components/message/index.js
View file

@ -1,97 +0,0 @@
import Notification from '../base/notification';
const prefixCls = 'ivu-message';
const iconPrefixCls = 'ivu-icon';
const prefixKey = 'ivu_message_key_';
let defaultDuration = 1.5;
let top;
let messageInstance;
let key = 1;
const iconTypes = {
'info': 'information-circled',
'success': 'checkmark-circled',
'warning': 'android-alert',
'error': 'close-circled',
'loading': 'load-c'
};
function getMessageInstance () {
messageInstance = messageInstance || Notification.newInstance({
prefixCls: prefixCls,
style: {
top: `${top}px`
}
});
return messageInstance;
}
function notice (content, duration = defaultDuration, type, onClose) {
if (!onClose) {
onClose = function () {
};
}
const iconType = iconTypes[type];
// if loading
const loadCls = type === 'loading' ? ' ivu-load-loop' : '';
let instance = getMessageInstance();
instance.notice({
key: `${prefixKey}${key}`,
duration: duration,
style: {},
transitionName: 'move-up',
content: `
<div class="${prefixCls}-custom-content ${prefixCls}-${type}">
<i class="${iconPrefixCls} ${iconPrefixCls}-${iconType}${loadCls}"></i>
<span>${content}</span>
</div>
`,
onClose: onClose
});
// 用于手动消除
return (function () {
let target = key++;
return function () {
instance.remove(`${prefixKey}${target}`);
};
})();
}
export default {
info (content, duration, onClose) {
return notice(content, duration, 'info', onClose);
},
success (content, duration, onClose) {
return notice(content, duration, 'success', onClose);
},
warning (content, duration, onClose) {
return notice(content, duration, 'warning', onClose);
},
error (content, duration, onClose) {
return notice(content, duration, 'error', onClose);
},
loading (content, duration, onClose) {
return notice(content, duration, 'loading', onClose);
},
config (options) {
if (options.top) {
top = options.top;
}
if (options.duration) {
defaultDuration = options.duration;
}
},
destroy () {
let instance = getMessageInstance();
messageInstance = null;
instance.destroy();
}
};

175
src/components/modal/confirm.js
View file

@ -1,175 +0,0 @@
import Vue from 'vue';
import Modal from './modal.vue';
import Icon from '../icon/icon.vue';
import iButton from '../button/button.vue';
import { camelcaseToHyphen } from '../../utils/assist';
import { t } from '../../locale';
const prefixCls = 'ivu-modal-confirm';
Modal.newInstance = properties => {
const _props = properties || {};
let props = '';
Object.keys(_props).forEach(prop => {
props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
});
const div = document.createElement('div');
div.innerHTML = `
<Modal${props} :visible.sync="visible" :width="width" :scrollable.sync="scrollable">
<div class="${prefixCls}">
<div class="${prefixCls}-head">
<div class="${prefixCls}-head-title">{{{ title }}}</div>
</div>
<div class="${prefixCls}-body">
<div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
{{{ body }}}
</div>
<div class="${prefixCls}-footer">
<i-button type="text" size="large" v-if="showCancel" @click="cancel">{{ cancelText }}</i-button>
<i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
</div>
</div>
</Modal>
`;
document.body.appendChild(div);
const modal = new Vue({
el: div,
components: { Modal, iButton, Icon },
data: Object.assign(_props, {
visible: false,
width: 416,
title: '',
body: '',
iconType: '',
iconName: '',
okText: t('i.modal.okText'),
cancelText: t('i.modal.cancelText'),
showCancel: false,
loading: false,
buttonLoading: false,
scrollable: false
}),
computed: {
iconTypeCls () {
return [
`${prefixCls}-body-icon`,
`${prefixCls}-body-icon-${this.iconType}`
];
},
iconNameCls () {
return [
'ivu-icon',
`ivu-icon-${this.iconName}`
];
}
},
methods: {
cancel () {
this.visible = false;
this.buttonLoading = false;
this.onCancel();
this.remove();
},
ok () {
if (this.loading) {
this.buttonLoading = true;
} else {
this.visible = false;
this.remove();
}
this.onOk();
},
remove () {
setTimeout(() => {
this.destroy();
}, 300);
},
destroy () {
this.$destroy();
document.body.removeChild(div);
this.onRemove();
},
onOk () {},
onCancel () {},
onRemove () {}
}
}).$children[0];
return {
show (props) {
modal.$parent.showCancel = props.showCancel;
modal.$parent.iconType = props.icon;
switch (props.icon) {
case 'info':
modal.$parent.iconName = 'information-circled';
break;
case 'success':
modal.$parent.iconName = 'checkmark-circled';
break;
case 'warning':
modal.$parent.iconName = 'android-alert';
break;
case 'error':
modal.$parent.iconName = 'close-circled';
break;
case 'confirm':
modal.$parent.iconName = 'help-circled';
break;
}
if ('width' in props) {
modal.$parent.width = props.width;
}
if ('title' in props) {
modal.$parent.title = props.title;
}
if ('content' in props) {
modal.$parent.body = props.content;
}
if ('okText' in props) {
modal.$parent.okText = props.okText;
}
if ('cancelText' in props) {
modal.$parent.cancelText = props.cancelText;
}
if ('onCancel' in props) {
modal.$parent.onCancel = props.onCancel;
}
if ('onOk' in props) {
modal.$parent.onOk = props.onOk;
}
// async for ok
if ('loading' in props) {
modal.$parent.loading = props.loading;
}
if ('scrollable' in props) {
modal.$parent.scrollable = props.scrollable;
}
// notice when component destroy
modal.$parent.onRemove = props.onRemove;
modal.visible = true;
},
remove () {
modal.visible = false;
modal.$parent.buttonLoading = false;
modal.$parent.remove();
},
component: modal
};
};
export default Modal;

65
src/components/modal/index.js
View file

@ -1,65 +0,0 @@
import Modal from './confirm';
let modalInstance;
function getModalInstance () {
modalInstance = modalInstance || Modal.newInstance({
closable: false,
maskClosable: false,
footerHide: true
});
return modalInstance;
}
function confirm (options) {
let instance = getModalInstance();
options.onRemove = function () {
modalInstance = null;
};
instance.show(options);
}
Modal.info = function (props = {}) {
props.icon = 'info';
props.showCancel = false;
return confirm(props);
};
Modal.success = function (props = {}) {
props.icon = 'success';
props.showCancel = false;
return confirm(props);
};
Modal.warning = function (props = {}) {
props.icon = 'warning';
props.showCancel = false;
return confirm(props);
};
Modal.error = function (props = {}) {
props.icon = 'error';
props.showCancel = false;
return confirm(props);
};
Modal.confirm = function (props = {}) {
props.icon = 'confirm';
props.showCancel = true;
return confirm(props);
};
Modal.remove = function () {
if (!modalInstance) { // at loading status, remove after Cancel
return false;
}
const instance = getModalInstance();
instance.remove();
};
export default Modal;

235
src/components/modal/modal.vue
View file

@ -1,235 +0,0 @@
<template>
<div :class="maskClasses" v-show="visible" @click="mask" transition="fade"></div>
<div :class="wrapClasses" @click="handleWrapClick">
<div :class="classes" :style="styles" v-show="visible" transition="ease">
<div :class="[prefixCls + '-content']">
<a :class="[prefixCls + '-close']" v-if="closable" @click="close">
<slot name="close">
<Icon type="ios-close-empty"></Icon>
</slot>
</a>
<div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
<div :class="[prefixCls + '-body']"><slot></slot></div>
<div :class="[prefixCls + '-footer']" v-if="!footerHide">
<slot name="footer">
<i-button type="text" size="large" @click="cancel">{{ cancelText }}</i-button>
<i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
</slot>
</div>
</div>
</div>
</div>
</template>
<script>
import Icon from '../icon';
import iButton from '../button/button.vue';
import { getScrollBarSize } from '../../utils/assist';
import { t } from '../../locale';
const prefixCls = 'ivu-modal';
export default {
components: { Icon, iButton },
props: {
visible: {
type: Boolean,
default: false
},
closable: {
type: Boolean,
default: true
},
maskClosable: {
type: Boolean,
default: true
},
title: {
type: String
},
width: {
type: [Number, String],
default: 520
},
okText: {
type: String,
default () {
return t('i.modal.okText');
}
},
cancelText: {
type: String,
default () {
return t('i.modal.cancelText');
}
},
loading: {
type: Boolean,
default: false
},
style: {
type: Object
},
className: {
type: String
},
// for instance
footerHide: {
type: Boolean,
default: false
},
scrollable: {
type: Boolean,
default: false
}
},
data () {
return {
prefixCls: prefixCls,
wrapShow: false,
showHead: true,
buttonLoading: false
};
},
computed: {
wrapClasses () {
return [
`${prefixCls}-wrap`,
{
[`${prefixCls}-hidden`]: !this.wrapShow,
[`${this.className}`]: !!this.className
}
];
},
maskClasses () {
return `${prefixCls}-mask`;
},
classes () {
return `${prefixCls}`;
},
styles () {
let style = {};
const styleWidth = {
width: `${this.width}px`
};
const customStyle = this.style ? this.style : {};
Object.assign(style, styleWidth, customStyle);
return style;
}
},
methods: {
close () {
this.visible = false;
this.$emit('on-cancel');
},
mask () {
if (this.maskClosable) {
this.close();
}
},
handleWrapClick (event) {
// use indexOf,do not use === ,because ivu-modal-wrap can have other custom className
const className = event.target.getAttribute('class');
if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.mask();
},
cancel () {
this.close();
},
ok () {
if (this.loading) {
this.buttonLoading = true;
} else {
this.visible = false;
}
this.$emit('on-ok');
},
EscClose (e) {
if (this.visible && this.closable) {
if (e.keyCode === 27) {
this.close();
}
}
},
checkScrollBar () {
let fullWindowWidth = window.innerWidth;
if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8
const documentElementRect = document.documentElement.getBoundingClientRect();
fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
}
this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth;
if (this.bodyIsOverflowing) {
this.scrollBarWidth = getScrollBarSize();
}
},
setScrollBar () {
if (this.bodyIsOverflowing && this.scrollBarWidth !== undefined) {
document.body.style.paddingRight = `${this.scrollBarWidth}px`;
}
},
resetScrollBar () {
document.body.style.paddingRight = '';
},
addScrollEffect () {
this.checkScrollBar();
this.setScrollBar();
document.body.style.overflow = 'hidden';
},
removeScrollEffect() {
document.body.style.overflow = '';
this.resetScrollBar();
}
},
ready () {
if (this.visible) {
this.wrapShow = true;
}
let showHead = true;
if (this.$els.head.innerHTML == `<div class="${prefixCls}-header-inner"></div>` && !this.title) {
showHead = false;
}
this.showHead = showHead;
// ESC close
document.addEventListener('keydown', this.EscClose);
},
beforeDestroy () {
document.removeEventListener('keydown', this.EscClose);
this.removeScrollEffect();
},
watch: {
visible (val) {
if (val === false) {
this.buttonLoading = false;
this.timer = setTimeout(() => {
this.wrapShow = false;
this.removeScrollEffect();
}, 300);
} else {
if (this.timer) clearTimeout(this.timer);
this.wrapShow = true;
if (!this.scrollable) {
this.addScrollEffect();
}
}
},
loading (val) {
if (!val) {
this.buttonLoading = false;
}
},
scrollable (val) {
if (!val) {
this.addScrollEffect();
} else {
this.removeScrollEffect();
}
}
}
};
</script>

117
src/components/notice/index.js
View file

@ -1,117 +0,0 @@
import Notification from '../base/notification';
const prefixCls = 'ivu-notice';
const iconPrefixCls = 'ivu-icon';
const prefixKey = 'ivu_notice_key_';
let top = 24;
let defaultDuration = 4.5;
let noticeInstance;
let key = 1;
const iconTypes = {
'info': 'information-circled',
'success': 'checkmark-circled',
'warning': 'android-alert',
'error': 'close-circled'
};
function getNoticeInstance () {
noticeInstance = noticeInstance || Notification.newInstance({
prefixCls: prefixCls,
style: {
top: `${top}px`,
right: 0
}
});
return noticeInstance;
}
function notice (type, options) {
const title = options.title || '';
const desc = options.desc || '';
const noticeKey = options.key || `${prefixKey}${key}`;
const onClose = options.onClose || function () {};
// todo const btn = options.btn || null;
const duration = (options.duration === 0) ? 0 : options.duration || defaultDuration;
key++;
let instance = getNoticeInstance();
let content;
const with_desc = desc === '' ? '' : ` ${prefixCls}-with-desc`;
if (type == 'normal') {
content = `
<div class="${prefixCls}-custom-content ${prefixCls}-with-normal${with_desc}">
<div class="${prefixCls}-title">${title}</div>
<div class="${prefixCls}-desc">${desc}</div>
</div>
`;
} else {
const iconType = iconTypes[type];
content = `
<div class="${prefixCls}-custom-content ${prefixCls}-with-icon ${prefixCls}-with-${type}${with_desc}">
<span class="${prefixCls}-icon ${prefixCls}-icon-${type}">
<i class="${iconPrefixCls} ${iconPrefixCls}-${iconType}"></i>
</span>
<div class="${prefixCls}-title">${title}</div>
<div class="${prefixCls}-desc">${desc}</div>
</div>
`;
}
instance.notice({
key: noticeKey.toString(),
duration: duration,
style: {},
transitionName: 'move-notice',
content: content,
onClose: onClose,
closable: true
});
}
export default {
open (options) {
return notice('normal', options);
},
info (options) {
return notice('info', options);
},
success (options) {
return notice('success', options);
},
warning (options) {
return notice('warning', options);
},
error (options) {
return notice('error', options);
},
config (options) {
if (options.top) {
top = options.top;
}
if (options.duration || options.duration === 0) {
defaultDuration = options.duration;
}
},
close (key) {
if (key) {
key = key.toString();
if (noticeInstance) {
noticeInstance.remove(key);
}
} else {
return false;
}
},
destroy () {
let instance = getNoticeInstance();
noticeInstance = null;
instance.destroy();
}
};

2
src/components/page/index.js
View file

@ -1,2 +0,0 @@
import Page from './page.vue';
export default Page;

89
src/components/page/options.vue
View file

@ -1,89 +0,0 @@
<template>
<div v-if="showSizer || showElevator" :class="optsClasses">
<div v-if="showSizer" :class="sizerClasses">
<i-select :model.sync="pageSize" :size="size" @on-change="changeSize">
<i-option v-for="item in pageSizeOpts" :value="item" style="text-align:center;">{{ item }} {{ t('i.page.page') }}</i-option>
</i-select>
</div>
<div v-if="showElevator" :class="ElevatorClasses">
{{ t('i.page.goto') }}
<input type="text" :value="_current" @keyup.enter="changePage">
{{ t('i.page.p') }}
</div>
</div>
</template>
<script>
import iSelect from '../../components/select/select.vue';
import iOption from '../../components/select/option.vue';
import Locale from '../../mixins/locale';
const prefixCls = 'ivu-page';
function isValueNumber (value) {
return (/^[1-9][0-9]*$/).test(value + '');
}
export default {
mixins: [ Locale ],
components: { iSelect, iOption },
props: {
pageSizeOpts: Array,
showSizer: Boolean,
showElevator: Boolean,
current: Number,
_current: Number,
pageSize: Number,
allPages: Number,
isSmall: Boolean
},
computed: {
size () {
return this.isSmall ? 'small' : 'default';
},
optsClasses () {
return [
`${prefixCls}-options`
];
},
sizerClasses () {
return [
`${prefixCls}-options-sizer`
];
},
ElevatorClasses () {
return [
`${prefixCls}-options-elevator`
];
}
},
methods: {
changeSize () {
this.$emit('on-size', this.pageSize);
},
changePage (event) {
let val = event.target.value.trim();
let page = 0;
if (isValueNumber(val)) {
val = Number(val);
if (val != this.current) {
const allPages = this.allPages;
if (val > allPages) {
page = allPages;
} else {
page = val;
}
}
} else {
page = 1;
}
if (page) {
this.$emit('on-page', page);
event.target.value = page;
}
}
}
};
</script>

267
src/components/page/page.vue
View file

@ -1,267 +0,0 @@
<template>
<ul :class="simpleWrapClasses" :style="style" v-if="simple">
<li
:title="t('i.page.prev')"
:class="prevClasses"
@click="prev">
<a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
</li>
<div :class="simplePagerClasses" :title="current + '/' + allPages">
<input
type="text"
:value="current"
@keydown="keyDown"
@keyup="keyUp"
@change="keyUp">
<span>/</span>
{{ allPages }}
</div>
<li
:title="t('i.page.next')"
:class="nextClasses"
@click="next">
<a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a>
</li>
</ul>
<ul :class="wrapClasses" :style="style" v-else>
<span :class="[prefixCls + '-total']" v-if="showTotal">
<slot>{{ t('i.page.total') }} {{ total }} <template v-if="total <= 1">{{ t('i.page.item') }}</template><template v-else>{{ t('i.page.items') }}</template></slot>
</span>
<li
:title="t('i.page.prev')"
:class="prevClasses"
@click="prev">
<a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
</li>
<li title="1" :class="firstPageClasses" @click="changePage(1)"><a>1</a></li>
<li :title="t('i.page.prev5')" v-if="current - 3 > 1" :class="[prefixCls + '-item-jump-prev']" @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a></li>
<li :title="current - 2" v-if="current - 2 > 1" :class="[prefixCls + '-item']" @click="changePage(current - 2)"><a>{{ current - 2 }}</a></li>
<li :title="current - 1" v-if="current - 1 > 1" :class="[prefixCls + '-item']" @click="changePage(current - 1)"><a>{{ current - 1 }}</a></li>
<li :title="current" v-if="current != 1 && current != allPages" :class="[prefixCls + '-item',prefixCls + '-item-active']"><a>{{ current }}</a></li>
<li :title="current + 1" v-if="current + 1 < allPages" :class="[prefixCls + '-item']" @click="changePage(current + 1)"><a>{{ current + 1 }}</a></li>
<li :title="current + 2" v-if="current + 2 < allPages" :class="[prefixCls + '-item']" @click="changePage(current + 2)"><a>{{ current + 2 }}</a></li>
<li :title="t('i.page.next5')" v-if="current + 3 < allPages" :class="[prefixCls + '-item-jump-next']" @click="fastNext"><a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a></li>
<li :title="allPages" v-if="allPages > 1" :class="lastPageClasses" @click="changePage(allPages)"><a>{{ allPages }}</a></li>
<li
:title="t('i.page.next')"
:class="nextClasses"
@click="next">
<a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a>
</li>
<Options
:show-sizer="showSizer"
:page-size="pageSize"
:page-size-opts="pageSizeOpts"
:show-elevator="showElevator"
:_current.once="current"
:current.sync="current"
:all-pages="allPages"
:is-small="isSmall"
@on-size="onSize"
@on-page="onPage">
</Options>
</ul>
</template>
<script>
import { oneOf } from '../../utils/assist';
import Options from './options.vue';
import Locale from '../../mixins/locale';
const prefixCls = 'ivu-page';
export default {
mixins: [ Locale ],
components: { Options },
props: {
current: {
type: Number,
default: 1
},
total: {
type: Number,
default: 0
},
pageSize: {
type: Number,
default: 10
},
pageSizeOpts: {
type: Array,
default () {
return [10, 20, 30, 40];
}
},
size: {
validator (value) {
return oneOf(value, ['small']);
}
},
simple: {
type: Boolean,
default: false
},
showTotal: {
type: Boolean,
default: false
},
showElevator: {
type: Boolean,
default: false
},
showSizer: {
type: Boolean,
default: false
},
class: {
type: String
},
style: {
type: Object
}
},
data () {
return {
prefixCls: prefixCls
};
},
computed: {
isSmall () {
return !!this.size;
},
allPages () {
const allPage = Math.ceil(this.total / this.pageSize);
return (allPage === 0) ? 1 : allPage;
},
simpleWrapClasses () {
return [
`${prefixCls}`,
`${prefixCls}-simple`,
{
[`${this.class}`]: !!this.class
}
];
},
simplePagerClasses () {
return `${prefixCls}-simple-pager`;
},
wrapClasses () {
return [
`${prefixCls}`,
{
[`${this.class}`]: !!this.class,
'mini': !!this.size
}
];
},
prevClasses () {
return [
`${prefixCls}-prev`,
{
[`${prefixCls}-disabled`]: this.current === 1
}
];
},
nextClasses () {
return [
`${prefixCls}-next`,
{
[`${prefixCls}-disabled`]: this.current === this.allPages
}
];
},
firstPageClasses () {
return [
`${prefixCls}-item`,
{
[`${prefixCls}-item-active`]: this.current === 1
}
];
},
lastPageClasses () {
return [
`${prefixCls}-item`,
{
[`${prefixCls}-item-active`]: this.current === this.allPages
}
];
}
},
methods: {
changePage (page) {
if (this.current != page) {
this.current = page;
this.$emit('on-change', page);
}
},
prev () {
const current = this.current;
if (current <= 1) {
return false;
}
this.changePage(current - 1);
},
next () {
const current = this.current;
if (current >= this.allPages) {
return false;
}
this.changePage(current + 1);
},
fastPrev () {
const page = this.current - 5;
if (page > 0) {
this.changePage(page);
} else {
this.changePage(1);
}
},
fastNext () {
const page = this.current + 5;
if (page > this.allPages) {
this.changePage(this.allPages);
} else {
this.changePage(page);
}
},
onSize (pageSize) {
this.pageSize = pageSize;
this.changePage(1);
this.$emit('on-page-size-change', pageSize);
},
onPage (page) {
this.changePage(page);
},
keyDown (e) {
const key = e.keyCode;
const condition = (key >= 48 && key <= 57) || key == 8 || key == 37 || key == 39;
if (!condition) {
e.preventDefault();
}
},
keyUp (e) {
const key = e.keyCode;
const val = parseInt(e.target.value);
if (key === 38) {
this.prev();
} else if (key === 40) {
this.next();
} else if (key == 13) {
let page = 1;
if (val > this.allPages) {
page = this.allPages;
} else if (val <= 0) {
page = 1;
} else {
page = val;
}
e.target.value = page;
this.changePage(page);
}
}
}
};
</script>

3
src/components/poptip/index.js
View file

@ -1,3 +0,0 @@
import Poptip from './poptip.vue';
export default Poptip;

205
src/components/poptip/poptip.vue
View file

@ -1,205 +0,0 @@
<template>
<div
:class="classes"
@mouseenter="handleMouseenter"
@mouseleave="handleMouseleave"
v-clickoutside="handleClose">
<div
:class="[prefixCls + '-rel']"
v-el:reference
@click="handleClick"
@mousedown="handleFocus(false)"
@mouseup="handleBlur(false)">
<slot></slot>
</div>
<div :class="[prefixCls + '-popper']" :style="styles" transition="fade" v-el:popper v-show="visible">
<div :class="[prefixCls + '-content']">
<div :class="[prefixCls + '-arrow']"></div>
<div :class="[prefixCls + '-inner']" v-if="confirm">
<div :class="[prefixCls + '-body']">
<i class="ivu-icon ivu-icon-help-circled"></i>
<div :class="[prefixCls + '-body-message']"><slot name="title">{{ title }}</slot></div>
</div>
<div :class="[prefixCls + '-footer']">
<i-button type="text" size="small" @click="cancel">{{ cancelText }}</i-button>
<i-button type="primary" size="small" @click="ok">{{ okText }}</i-button>
</div>
</div>
<div :class="[prefixCls + '-inner']" v-if="!confirm">
<div :class="[prefixCls + '-title']" v-if="showTitle" v-el:title><slot name="title"><div :class="[prefixCls + '-title-inner']">{{ title }}</div></slot></div>
<div :class="[prefixCls + '-body']">
<div :class="[prefixCls + '-body-content']"><slot name="content"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Popper from '../base/popper';
import iButton from '../button/button.vue';
import clickoutside from '../../directives/clickoutside';
import { oneOf } from '../../utils/assist';
import { t } from '../../locale';
const prefixCls = 'ivu-poptip';
export default {
mixins: [Popper],
directives: { clickoutside },
components: { iButton },
props: {
trigger: {
validator (value) {
return oneOf(value, ['click', 'focus', 'hover']);
},
default: 'click'
},
placement: {
validator (value) {
return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
},
default: 'top'
},
title: {
type: [String, Number]
},
content: {
type: [String, Number],
default: ''
},
width: {
type: [String, Number]
},
confirm: {
type: Boolean,
default: false
},
okText: {
type: String,
default () {
return t('i.poptip.okText');
}
},
cancelText: {
type: String,
default () {
return t('i.poptip.cancelText');
}
}
},
data () {
return {
prefixCls: prefixCls,
showTitle: true,
isInput: false
};
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-confirm`]: this.confirm
}
];
},
styles () {
let style = {};
if (this.width) {
style.width = `${this.width}px`;
}
return style;
}
},
methods: {
handleClick () {
if (this.confirm) {
this.visible = !this.visible;
return true;
}
if (this.trigger !== 'click') {
return false;
}
this.visible = !this.visible;
},
handleClose () {
if (this.confirm) {
this.visible = false;
return true;
}
if (this.trigger !== 'click') {
return false;
}
this.visible = false;
},
handleFocus (fromInput = true) {
if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
return false;
}
this.visible = true;
},
handleBlur (fromInput = true) {
if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
return false;
}
this.visible = false;
},
handleMouseenter () {
if (this.trigger !== 'hover' || this.confirm) {
return false;
}
this.visible = true;
},
handleMouseleave () {
if (this.trigger !== 'hover' || this.confirm) {
return false;
}
this.visible = false;
},
cancel () {
this.visible = false;
this.$emit('on-cancel');
},
ok () {
this.visible = false;
this.$emit('on-ok');
},
getInputChildren () {
const $input = this.$els.reference.querySelectorAll('input');
const $textarea = this.$els.reference.querySelectorAll('textarea');
let $children = null;
if ($input.length) {
$children = $input[0];
} else if ($textarea.length) {
$children = $textarea[0];
}
return $children;
}
},
compiled () {
if (!this.confirm) {
this.showTitle = this.$els.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
}
// if trigger and children is input or textarea,listen focus & blur event
if (this.trigger === 'focus') {
const $children = this.getInputChildren();
if ($children) {
$children.addEventListener('focus', this.handleFocus, false);
$children.addEventListener('blur', this.handleBlur, false);
this.isInput = true;
}
}
},
beforeDestroy () {
const $children = this.getInputChildren();
if ($children) {
$children.removeEventListener('focus', this.handleFocus, false);
$children.removeEventListener('blur', this.handleBlur, false);
}
}
};
</script>

2
src/components/progress/index.js
View file

@ -1,2 +0,0 @@
import Progress from './progress.vue';
export default Progress;

121
src/components/progress/progress.vue
View file

@ -1,121 +0,0 @@
<template>
<div :class="wrapClasses">
<div :class="outerClasses">
<div :class="innerClasses">
<div :class="bgClasses" :style="bgStyle"></div>
</div>
</div>
<span v-if="!hideInfo" :class="textClasses">
<slot>
<span v-if="isStatus" :class="textInnerClasses">
<Icon :type="statusIcon"></Icon>
</span>
<span v-else :class="textInnerClasses">
{{ percent }}%
</span>
</slot>
</span>
</div>
</template>
<script>
import Icon from '../icon';
import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-progress';
export default {
components: { Icon },
props: {
percent: {
type: Number,
default: 0
},
status: {
validator (value) {
return oneOf(value, ['normal', 'active', 'wrong', 'success']);
},
default: 'normal'
},
hideInfo: {
type: Boolean,
default: false
},
strokeWidth: {
type: Number,
default: 10
}
},
computed: {
isStatus () {
return this.status == 'wrong' || this.status == 'success';
},
statusIcon () {
let type = '';
switch (this.status) {
case 'wrong':
type = 'ios-close';
break;
case 'success':
type = 'ios-checkmark';
break;
}
return type;
},
bgStyle () {
return {
width: `${this.percent}%`,
height: `${this.strokeWidth}px`
};
},
wrapClasses () {
return [
`${prefixCls}`,
`${prefixCls}-${this.status}`,
{
[`${prefixCls}-show-info`]: !this.hideInfo,
}
];
},
textClasses () {
return `${prefixCls}-text`;
},
textInnerClasses () {
return `${prefixCls}-text-inner`;
},
outerClasses () {
return `${prefixCls}-outer`;
},
innerClasses () {
return `${prefixCls}-inner`;
},
bgClasses () {
return `${prefixCls}-bg`;
}
},
compiled () {
this.handleStatus();
},
methods: {
handleStatus (isDown) {
if (isDown) {
this.status = 'normal';
} else {
if (parseInt(this.percent, 10) == 100) {
this.status = 'success';
}
}
}
},
watch: {
percent (val, oldVal) {
if (val < oldVal) {
this.handleStatus(true);
} else {
this.handleStatus();
}
}
}
};
</script>

5
src/components/radio/index.js
View file

@ -1,5 +0,0 @@
import Radio from './radio.vue';
import RadioGroup from './radio-group.vue';
Radio.Group = RadioGroup;
export default Radio;

69
src/components/radio/radio-group.vue
View file

@ -1,69 +0,0 @@
<template>
<div :class="classes">
<slot></slot>
</div>
</template>
<script>
import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-radio-group';
export default {
name: 'radioGroup',
props: {
model: {
type: [String, Number],
default: ''
},
size: {
validator (value) {
return oneOf(value, ['small', 'large']);
}
},
type: {
validator (value) {
return oneOf(value, ['button']);
}
},
vertical: {
type: Boolean,
default: false
}
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-${this.type}`]: !!this.type,
[`${prefixCls}-vertical`]: this.vertical
}
];
}
},
compiled () {
this.updateModel();
},
methods: {
updateModel () {
const model = this.model;
this.$children.forEach((child) => {
child.selected = model == child.value;
child.group = true;
});
},
change (data) {
this.model = data.value;
this.updateModel();
this.$emit('on-change', data.value);
this.$dispatch('on-form-change', data.value);
}
},
watch: {
model () {
this.updateModel();
}
}
};
</script>

98
src/components/radio/radio.vue
View file

@ -1,98 +0,0 @@
<template>
<label :class="wrapClasses">
<span :class="radioClasses">
<span :class="innerClasses"></span>
<input
type="radio"
:class="inputClasses"
:disabled="disabled"
:checked="selected"
@change="change">
</span><slot>{{ value }}</slot>
</label>
</template>
<script>
const prefixCls = 'ivu-radio';
export default {
props: {
checked: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
value: {
type: [String, Number]
}
},
data () {
return {
selected: false,
group: false
};
},
computed: {
wrapClasses () {
return [
`${prefixCls}-wrapper`,
{
[`${prefixCls}-group-item`]: this.group,
[`${prefixCls}-wrapper-checked`]: this.selected,
[`${prefixCls}-wrapper-disabled`]: this.disabled
}
];
},
radioClasses () {
return [
`${prefixCls}`,
{
[`${prefixCls}-checked`]: this.selected,
[`${prefixCls}-disabled`]: this.disabled
}
];
},
innerClasses () {
return `${prefixCls}-inner`;
},
inputClasses () {
return `${prefixCls}-input`;
}
},
ready () {
if (this.$parent && this.$parent.$options.name === 'radioGroup') this.group = true;
if (!this.group) {
this.updateModel();
}
},
methods: {
change (event) {
if (this.disabled) {
return false;
}
this.selected = event.target.checked;
this.checked = this.selected;
if (this.group && this.checked) {
this.$parent.change({
value: this.value,
checked: this.checked
});
}
if (!this.group) this.$dispatch('on-form-change', this.selected);
},
updateModel () {
this.selected = this.checked;
}
},
watch: {
checked () {
this.updateModel();
}
}
};
</script>

2
src/components/rate/index.js
View file

@ -1,2 +0,0 @@
import Rate from './rate.vue';
export default Rate;

127
src/components/rate/rate.vue
View file

@ -1,127 +0,0 @@
<template>
<div :class="classes" @mouseleave="handleMouseleave">
<div
v-for="item in count"
:class="starCls(item)"
@mousemove="handleMousemove(item, $event)"
@click="handleClick(item)">
<span :class="[prefixCls + '-star-content']" type="half"></span>
</div>
<div :class="[prefixCls + '-text']" v-if="showText" v-show="value > 0">
<slot>{{ value }} <template v-if="value <= 1">{{ t('i.rate.star') }}</template><template v-else>{{ t('i.rate.stars') }}</template></slot>
</div>
</div>
</template>
<script>
import Locale from '../../mixins/locale';
const prefixCls = 'ivu-rate';
export default {
mixins: [ Locale ],
props: {
count: {
type: Number,
default: 5
},
value: {
type: Number,
default: 0
},
allowHalf: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
showText: {
type: Boolean,
default: false
}
},
data () {
return {
prefixCls: prefixCls,
hoverIndex: -1,
isHover: false,
isHalf: false
};
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-disabled`]: this.disabled
}
];
}
},
watch: {
value: {
immediate: true,
handler (val) {
this.setHalf(val);
}
}
},
methods: {
starCls (value) {
const hoverIndex = this.hoverIndex;
const currentIndex = this.isHover ? hoverIndex : this.value;
let full = false;
let isLast = false;
if (currentIndex > value) full = true;
if (this.isHover) {
isLast = currentIndex === value + 1;
} else {
isLast = Math.ceil(this.value) === value + 1;
}
return [
`${prefixCls}-star`,
{
[`${prefixCls}-star-full`]: (!isLast && full) || (isLast && !this.isHalf),
[`${prefixCls}-star-half`]: isLast && this.isHalf,
[`${prefixCls}-star-zero`]: !full
}
];
},
handleMousemove(value, event) {
if (this.disabled) return;
this.isHover = true;
if (this.allowHalf) {
const type = event.target.getAttribute('type') || false;
this.isHalf = type === 'half';
} else {
this.isHalf = false;
}
this.hoverIndex = value + 1;
},
handleMouseleave () {
if (this.disabled) return;
this.isHover = false;
this.setHalf(this.value);
this.hoverIndex = -1;
},
setHalf (val) {
this.isHalf = val.toString().indexOf('.') >= 0;
},
handleClick (value) {
if (this.disabled) return;
value++;
if (this.isHalf) value -= 0.5;
this.value = value;
this.$emit('on-change', value);
this.$dispatch('on-form-change', value);
}
}
};
</script>

79
src/components/select/dropdown.vue
View file

@ -1,79 +0,0 @@
<template>
<div class="ivu-select-dropdown" :style="styles"><slot></slot></div>
</template>
<script>
import { getStyle } from '../../utils/assist';
import Popper from 'popper.js';
export default {
props: {
placement: {
type: String,
default: 'bottom-start'
}
},
data () {
return {
popper: null,
width: '',
};
},
computed: {
styles () {
let style = {};
if (this.width) style.width = `${this.width}px`;
return style;
}
},
methods: {
update () {
if (this.popper) {
this.$nextTick(() => {
this.popper.update();
});
} else {
this.$nextTick(() => {
this.popper = new Popper(this.$parent.$els.reference, this.$el, {
gpuAcceleration: false,
placement: this.placement,
boundariesPadding: 0,
forceAbsolute: true,
boundariesElement: 'body'
});
this.popper.onCreate(popper => {
this.resetTransformOrigin(popper);
});
});
}
// set a height for parent is Modal and Select's width is 100%
if (this.$parent.$options.name === 'iSelect') {
this.width = parseInt(getStyle(this.$parent.$el, 'width'));
}
},
destroy () {
if (this.popper) {
this.resetTransformOrigin(this.popper);
setTimeout(() => {
this.popper.destroy();
this.popper = null;
}, 300);
}
},
resetTransformOrigin(popper) {
let placementMap = {top: 'bottom', bottom: 'top'};
let placement = popper._popper.getAttribute('x-placement').split('-')[0];
let origin = placementMap[placement];
popper._popper.style.transformOrigin = `center ${ origin }`;
}
},
compiled () {
this.$on('on-update-popper', this.update);
this.$on('on-destroy-popper', this.destroy);
},
beforeDestroy () {
if (this.popper) {
this.popper.destroy();
}
}
};
</script>

5
src/components/select/index.js
View file

@ -1,5 +0,0 @@
import Select from './select.vue';
import Option from './option.vue';
import OptionGroup from './option-group.vue';
export { Select, Option, OptionGroup };

47
src/components/select/option-group.vue
View file

@ -1,47 +0,0 @@
<template>
<li :class="[prefixCls + '-wrap']" v-show="!hidden">
<div :class="[prefixCls + '-title']">{{ label }}</div>
<ul>
<li :class="[prefixCls]" v-el:options><slot></slot></li>
</ul>
</li>
</template>
<script>
const prefixCls = 'ivu-select-group';
export default {
props: {
label: {
type: String,
default: ''
}
},
data () {
return {
prefixCls: prefixCls,
hidden: false // for search
};
},
methods: {
queryChange () {
this.$nextTick(() => {
const options = this.$els.options.querySelectorAll('.ivu-select-item');
let hasVisibleOption = false;
for (let i = 0; i < options.length; i++) {
if (options[i].style.display !== 'none') {
hasVisibleOption = true;
break;
}
}
this.hidden = !hasVisibleOption;
});
}
},
events: {
'on-query-change' () {
this.queryChange();
return true;
}
}
};
</script>

74
src/components/select/option.vue
View file

@ -1,74 +0,0 @@
<template>
<li :class="classes" @click.stop="select" @mouseout.stop="blur" v-show="!hidden"><slot>{{ showLabel }}</slot></li>
</template>
<script>
const prefixCls = 'ivu-select-item';
export default {
props: {
value: {
type: [String, Number],
required: true
},
label: {
type: [String, Number]
},
disabled: {
type: Boolean,
default: false
}
},
componentName: 'select-item',
data () {
return {
selected: false,
index: 0, // for up and down to focus
isFocus: false,
hidden: false, // for search
searchLabel: '' // the value is slot,only for search
};
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-disabled`]: this.disabled,
[`${prefixCls}-selected`]: this.selected,
[`${prefixCls}-focus`]: this.isFocus
}
];
},
showLabel () {
return (this.label) ? this.label : this.value;
}
},
methods: {
select () {
if (this.disabled) {
return false;
}
this.$dispatch('on-select-selected', this.value);
},
blur () {
this.isFocus = false;
},
queryChange (val) {
const parsedQuery = val.replace(/(\^|\(|\)|\[|\]|\$|\*|\+|\.|\?|\\|\{|\}|\|)/g, '\\$1');
this.hidden = !new RegExp(parsedQuery, 'i').test(this.searchLabel);
}
},
compiled () {
this.searchLabel = this.$el.innerHTML;
},
events: {
'on-select-close' () {
this.isFocus = false;
},
'on-query-change' (val) {
this.queryChange(val);
}
}
};
</script>

601
src/components/select/select.vue
View file

@ -1,601 +0,0 @@
<template>
<div :class="classes" v-clickoutside="handleClose">
<div
:class="[prefixCls + '-selection']"
v-el:reference
@click="toggleMenu">
<div class="ivu-tag" v-for="item in selectedMultiple">
<span class="ivu-tag-text">{{ item.label }}</span>
<Icon type="ios-close-empty" @click.stop="removeTag($index)"></Icon>
</div>
<span :class="[prefixCls + '-placeholder']" v-show="showPlaceholder && !filterable">{{ placeholder }}</span>
<span :class="[prefixCls + '-selected-value']" v-show="!showPlaceholder && !multiple && !filterable">{{ selectedSingle }}</span>
<input
type="text"
v-if="filterable"
v-model="query"
:class="[prefixCls + '-input']"
:placeholder="showPlaceholder ? placeholder : ''"
:style="inputStyle"
@blur="handleBlur"
@keydown="resetInputState"
@keydown.delete="handleInputDelete"
v-el:input>
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.stop="clearSingleSelect"></Icon>
<Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
</div>
<Dropdown v-show="visible" transition="slide-up" v-ref:dropdown>
<ul v-show="notFound" :class="[prefixCls + '-not-found']"><li>{{ notFoundText }}</li></ul>
<ul v-else :class="[prefixCls + '-dropdown-list']" v-el:options><slot></slot></ul>
</Dropdown>
</div>
</template>
<script>
import Icon from '../icon';
import Dropdown from './dropdown.vue';
import clickoutside from '../../directives/clickoutside';
import { oneOf, MutationObserver } from '../../utils/assist';
import { t } from '../../locale';
const prefixCls = 'ivu-select';
export default {
name: 'iSelect',
components: { Icon, Dropdown },
directives: { clickoutside },
props: {
model: {
type: [String, Number, Array],
default: ''
},
multiple: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
clearable: {
type: Boolean,
default: false
},
placeholder: {
type: String,
default () {
return t('i.select.placeholder');
}
},
filterable: {
type: Boolean,
default: false
},
filterMethod: {
type: Function
},
size: {
validator (value) {
return oneOf(value, ['small', 'large', 'default']);
}
},
labelInValue: {
type: Boolean,
default: false
},
notFoundText: {
type: String,
default () {
return t('i.select.noMatch');
}
}
},
data () {
return {
prefixCls: prefixCls,
visible: false,
options: [],
optionInstances: [],
selectedSingle: '', // label
selectedMultiple: [],
focusIndex: 0,
query: '',
inputLength: 20,
notFound: false,
slotChangeDuration: false // if slot change duration and in multiple, set true and after slot change, set false
};
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-visible`]: this.visible,
[`${prefixCls}-disabled`]: this.disabled,
[`${prefixCls}-multiple`]: this.multiple,
[`${prefixCls}-single`]: !this.multiple,
[`${prefixCls}-show-clear`]: this.showCloseIcon,
[`${prefixCls}-${this.size}`]: !!this.size
}
];
},
showPlaceholder () {
let status = false;
if ((typeof this.model) === 'string') {
if (this.model === '') {
status = true;
}
} else if (Array.isArray(this.model)) {
if (!this.model.length) {
status = true;
}
}
return status;
},
showCloseIcon () {
return !this.multiple && this.clearable && !this.showPlaceholder;
},
inputStyle () {
let style = {};
if (this.multiple) {
if (this.showPlaceholder) {
style.width = '100%';
} else {
style.width = `${this.inputLength}px`;
}
}
return style;
}
},
methods: {
toggleMenu () {
if (this.disabled) {
return false;
}
this.visible = !this.visible;
},
hideMenu () {
this.visible = false;
this.focusIndex = 0;
this.$broadcast('on-select-close');
},
// find option component
findChild (cb) {
const find = function (child) {
const name = child.$options.componentName;
if (name) {
cb(child);
} else if (child.$children.length) {
child.$children.forEach((innerChild) => {
find(innerChild, cb);
});
}
};
if (this.optionInstances.length) {
this.optionInstances.forEach((child) => {
find(child);
});
} else {
this.$children.forEach((child) => {
find(child);
});
}
},
updateOptions (init, slot = false) {
let options = [];
let index = 1;
this.findChild((child) => {
options.push({
value: child.value,
label: (child.label === undefined) ? child.$el.innerHTML : child.label
});
child.index = index++;
if (init) {
this.optionInstances.push(child);
}
});
this.options = options;
if (init) {
this.updateSingleSelected(true, slot);
this.updateMultipleSelected(true, slot);
}
},
updateSingleSelected (init = false, slot = false) {
const type = typeof this.model;
if (type === 'string' || type === 'number') {
let findModel = false;
for (let i = 0; i < this.options.length; i++) {
if (this.model === this.options[i].value) {
this.selectedSingle = this.options[i].label;
findModel = true;
break;
}
}
if (slot && !findModel) {
this.model = '';
this.query = '';
}
}
this.toggleSingleSelected(this.model, init);
},
clearSingleSelect () {
if (this.showCloseIcon) {
this.findChild((child) => {
child.selected = false;
});
this.model = '';
if (this.filterable) {
this.query = '';
}
}
},
updateMultipleSelected (init = false, slot = false) {
if (this.multiple && Array.isArray(this.model)) {
let selected = [];
for (let i = 0; i < this.model.length; i++) {
const model = this.model[i];
for (let j = 0; j < this.options.length; j++) {
const option = this.options[j];
if (model === option.value) {
selected.push({
value: option.value,
label: option.label
});
}
}
}
this.selectedMultiple = selected;
if (slot) {
let selectedModel = [];
for (let i = 0; i < selected.length; i++) {
selectedModel.push(selected[i].value);
}
// if slot change and remove a selected option, emit user
if (this.model.length === selectedModel.length) {
this.slotChangeDuration = true;
}
this.model = selectedModel;
}
}
this.toggleMultipleSelected(this.model, init);
},
removeTag (index) {
if (this.disabled) {
return false;
}
this.model.splice(index, 1);
if (this.filterable && this.visible) {
this.$els.input.focus();
}
this.$broadcast('on-update-popper');
},
// to select option for single
toggleSingleSelected (value, init = false) {
if (!this.multiple) {
let label = '';
this.findChild((child) => {
if (child.value === value) {
child.selected = true;
label = (child.label === undefined) ? child.$el.innerHTML : child.label;
} else {
child.selected = false;
}
});
this.hideMenu();
if (!init) {
if (this.labelInValue) {
this.$emit('on-change', {
value: value,
label: label
});
this.$dispatch('on-form-change', {
value: value,
label: label
});
} else {
this.$emit('on-change', value);
this.$dispatch('on-form-change', value);
}
}
}
},
// to select option for multiple
toggleMultipleSelected (value, init = false) {
if (this.multiple) {
let hybridValue = [];
for (let i = 0; i < value.length; i++) {
hybridValue.push({
value: value[i]
});
}
this.findChild((child) => {
const index = value.indexOf(child.value);
if (index >= 0) {
child.selected = true;
hybridValue[index].label = (child.label === undefined) ? child.$el.innerHTML : child.label;
} else {
child.selected = false;
}
});
if (!init) {
if (this.labelInValue) {
this.$emit('on-change', hybridValue);
this.$dispatch('on-form-change', hybridValue);
} else {
this.$emit('on-change', value);
this.$dispatch('on-form-change', value);
}
}
}
},
handleClose () {
this.hideMenu();
},
handleKeydown (e) {
if (this.visible) {
const keyCode = e.keyCode;
// Esc slide-up
if (keyCode === 27) {
e.preventDefault();
this.hideMenu();
}
// next
if (keyCode === 40) {
e.preventDefault();
this.navigateOptions('next');
}
// prev
if (keyCode === 38) {
e.preventDefault();
this.navigateOptions('prev');
}
// enter
if (keyCode === 13) {
e.preventDefault();
this.findChild((child) => {
if (child.isFocus) {
child.select();
}
});
}
}
},
navigateOptions (direction) {
if (direction === 'next') {
const next = this.focusIndex + 1;
this.focusIndex = (this.focusIndex === this.options.length) ? 1 : next;
} else if (direction === 'prev') {
const prev = this.focusIndex - 1;
this.focusIndex = (this.focusIndex <= 1) ? this.options.length : prev;
}
let child_status = {
disabled: false,
hidden: false
};
let find_deep = false; // can next find allowed
this.findChild((child) => {
if (child.index === this.focusIndex) {
child_status.disabled = child.disabled;
child_status.hidden = child.hidden;
if (!child.disabled && !child.hidden) {
child.isFocus = true;
}
} else {
child.isFocus = false;
}
if (!child.hidden && !child.disabled) {
find_deep = true;
}
});
this.resetScrollTop();
if ((child_status.disabled || child_status.hidden) && find_deep) {
this.navigateOptions(direction);
}
},
resetScrollTop () {
const index = this.focusIndex - 1;
let bottomOverflowDistance = this.optionInstances[index].$el.getBoundingClientRect().bottom - this.$refs.dropdown.$el.getBoundingClientRect().bottom;
let topOverflowDistance = this.optionInstances[index].$el.getBoundingClientRect().top - this.$refs.dropdown.$el.getBoundingClientRect().top;
if (bottomOverflowDistance > 0) {
this.$refs.dropdown.$el.scrollTop += bottomOverflowDistance;
}
if (topOverflowDistance < 0) {
this.$refs.dropdown.$el.scrollTop += topOverflowDistance;
}
},
handleBlur () {
setTimeout(() => {
const model = this.model;
if (this.multiple) {
this.query = '';
} else {
if (model !== '') {
this.findChild((child) => {
if (child.value === model) {
this.query = child.label === undefined ? child.searchLabel : child.label;
}
});
} else {
this.query = '';
}
}
}, 300);
},
resetInputState () {
this.inputLength = this.$els.input.value.length * 12 + 20;
},
handleInputDelete () {
if (this.multiple && this.model.length && this.query === '') {
this.removeTag(this.model.length - 1);
}
},
// use when slot changed
slotChange () {
this.options = [];
this.optionInstances = [];
},
setQuery (query) {
if (!this.filterable) return;
this.query = query;
},
modelToQuery() {
if (!this.multiple && this.filterable && this.model) {
this.findChild((child) => {
if (this.model === child.value) {
if (child.label) {
this.query = child.label;
} else if (child.searchLabel) {
this.query = child.searchLabel;
} else {
this.query = child.value;
}
}
});
}
}
},
compiled () {
this.modelToQuery();
this.updateOptions(true);
document.addEventListener('keydown', this.handleKeydown);
// watch slot changed
if (MutationObserver) {
this.observer = new MutationObserver(() => {
this.modelToQuery();
this.slotChange();
this.updateOptions(true, true);
});
this.observer.observe(this.$els.options, {
// attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
},
beforeDestroy () {
document.removeEventListener('keydown', this.handleKeydown);
if (this.observer) {
this.observer.disconnect();
}
},
watch: {
model (val) {
if (val === '') this.query = '';
this.modelToQuery();
if (this.multiple) {
if (this.slotChangeDuration) {
this.slotChangeDuration = false;
} else {
this.updateMultipleSelected();
}
} else {
this.updateSingleSelected();
}
},
visible (val) {
if (val) {
if (this.multiple && this.filterable) {
this.$els.input.focus();
}
this.$broadcast('on-update-popper');
} else {
if (this.filterable) {
this.$els.input.blur();
}
this.$broadcast('on-destroy-popper');
}
},
query (val) {
this.$broadcast('on-query-change', val);
let is_hidden = true;
this.$nextTick(() => {
this.findChild((child) => {
if (!child.hidden) {
is_hidden = false;
}
});
this.notFound = is_hidden;
});
this.$broadcast('on-update-popper');
}
},
events: {
'on-select-selected' (value) {
if (this.model === value) {
this.hideMenu();
} else {
if (this.multiple) {
const index = this.model.indexOf(value);
if (index >= 0) {
this.removeTag(index);
} else {
this.model.push(value);
this.$broadcast('on-update-popper');
}
if (this.filterable) {
this.query = '';
this.$els.input.focus();
}
} else {
this.model = value;
if (this.filterable) {
this.findChild((child) => {
if (child.value === value) {
this.query = child.label === undefined ? child.searchLabel : child.label;
}
});
}
}
}
}
}
};
</script>

3
src/components/slider/index.js
View file

@ -1,3 +0,0 @@
import Slider from './slider.vue';
export default Slider;

437
src/components/slider/slider.vue
View file

@ -1,437 +0,0 @@
<template>
<div :class="classes">
<Input-number
v-if="!range && showInput"
:min="min"
:max="max"
:step="step"
:value="value"
:disabled="disabled"
@on-change="handleInputChange"></Input-number>
<div :class="[prefixCls + '-wrap']" v-el:slider @click.self="sliderClick">
<template v-if="showStops">
<div :class="[prefixCls + '-stop']" v-for="item in stops" :style="{ 'left': item + '%' }" @click.self="sliderClick"></div>
</template>
<div :class="[prefixCls + '-bar']" :style="barStyle" @click.self="sliderClick"></div>
<template v-if="range">
<div
:class="[prefixCls + '-button-wrap']"
:style="{left: firstPosition + '%'}"
@mousedown="onFirstButtonDown">
<Tooltip :controlled="firstDragging" placement="top" :content="tipFormat(value[0])" :disabled="tipDisabled" :always="showTip === 'always'" v-ref:tooltip>
<div :class="button1Classes"></div>
</Tooltip>
</div>
<div
:class="[prefixCls + '-button-wrap']"
:style="{left: secondPosition + '%'}"
@mousedown="onSecondButtonDown">
<Tooltip :controlled="secondDragging" placement="top" :content="tipFormat(value[1])" :disabled="tipDisabled" :always="showTip === 'always'" v-ref:tooltip2>
<div :class="button2Classes"></div>
</Tooltip>
</div>
</template>
<template v-else>
<div
:class="[prefixCls + '-button-wrap']"
:style="{left: singlePosition + '%'}"
@mousedown="onSingleButtonDown">
<Tooltip :controlled="dragging" placement="top" :content="tipFormat(value)" :disabled="tipDisabled" :always="showTip === 'always'" v-ref:tooltip>
<div :class="buttonClasses"></div>
</Tooltip>
</div>
</template>
</div>
</div>
</template>
<script>
import InputNumber from '../../components/input-number/input-number.vue';
import Tooltip from '../../components/tooltip/tooltip.vue';
import { getStyle, oneOf } from '../../utils/assist';
const prefixCls = 'ivu-slider';
export default {
components: { InputNumber, Tooltip },
props: {
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
step: {
type: Number,
default: 1
},
range: {
type: Boolean,
default: false
},
value: {
type: [Number, Array],
default: 0
},
disabled: {
type: Boolean,
default: false
},
showInput: {
type: Boolean,
default: false
},
showStops: {
type: Boolean,
default: false
},
tipFormat: {
type: Function,
default (val) {
return val;
}
},
showTip: {
type: String,
default: 'hover',
validator (value) {
return oneOf(value, ['hover', 'always', 'never']);
}
}
},
data () {
return {
prefixCls: prefixCls,
dragging: false,
firstDragging: false,
secondDragging: false,
startX: 0,
currentX: 0,
startPos: 0,
newPos: null,
oldSingleValue: this.value,
oldFirstValue: this.value[0],
oldSecondValue: this.value[1],
singlePosition: (this.value - this.min) / (this.max - this.min) * 100,
firstPosition: (this.value[0] - this.min) / (this.max - this.min) * 100,
secondPosition: (this.value[1] - this.min) / (this.max - this.min) * 100
};
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-input`]: this.showInput && !this.range,
[`${prefixCls}-range`]: this.range,
[`${prefixCls}-disabled`]: this.disabled
}
];
},
buttonClasses () {
return [
`${prefixCls}-button`,
{
[`${prefixCls}-button-dragging`]: this.dragging
}
];
},
button1Classes () {
return [
`${prefixCls}-button`,
{
[`${prefixCls}-button-dragging`]: this.firstDragging
}
];
},
button2Classes () {
return [
`${prefixCls}-button`,
{
[`${prefixCls}-button-dragging`]: this.secondDragging
}
];
},
barStyle () {
let style;
if (this.range) {
style = {
width: (this.value[1] - this.value[0]) / (this.max - this.min) * 100 + '%',
left: (this.value[0] - this.min) / (this.max - this.min) * 100 + '%'
};
} else {
style = {
width: (this.value - this.min) / (this.max - this.min) * 100 + '%'
};
}
return style;
},
stops() {
let stopCount = (this.max - this.min) / this.step;
let result = [];
let stepWidth = 100 * this.step / (this.max - this.min);
for (let i = 1; i < stopCount; i++) {
result.push(i * stepWidth);
}
return result;
},
sliderWidth () {
return parseInt(getStyle(this.$els.slider, 'width'), 10);
},
tipDisabled () {
return this.tipFormat(this.value[0]) === null || this.showTip === 'never';
}
},
watch: {
value (val) {
this.$nextTick(() => {
this.$refs.tooltip.updatePopper();
if (this.range) {
this.$refs.tooltip2.updatePopper();
}
});
this.updateValue(val);
this.$emit('on-input', this.value);
}
},
methods: {
updateValue (val, init = false) {
if (this.range) {
let value = [...val];
if (init) {
if (value[0] > value[1]) {
value = [this.min, this.max];
}
} else {
if (value[0] > value[1]) {
value[0] = value[1];
}
}
if (value[0] < this.min) {
value[0] = this.min;
}
if (value[0] > this.max) {
value[0] = this.max;
}
if (value[1] < this.min) {
value[1] = this.min;
}
if (value[1] > this.max) {
value[1] = this.max;
}
if (this.value[0] === value[0] && this.value[1] === value[1]) return;
this.value = value;
this.setFirstPosition(this.value[0]);
this.setSecondPosition(this.value[1]);
} else {
if (val < this.min) {
this.value = this.min;
}
if (val > this.max) {
this.value = this.max;
}
this.setSinglePosition(this.value);
}
},
sliderClick (event) {
if (this.disabled) return;
const currentX = event.clientX;
const sliderOffsetLeft = this.$els.slider.getBoundingClientRect().left;
const newPos = (currentX - sliderOffsetLeft) / this.sliderWidth * 100;
if (this.range) {
let type = '';
if (newPos <= this.firstPosition) {
type = 'First';
} else if (newPos >= this.secondPosition) {
type = 'Second';
} else {
if ((newPos - this.firstPosition) <= (this.secondPosition - newPos)) {
type = 'First';
} else {
type = 'Second';
}
}
this[`change${type}Position`](newPos);
} else {
this.changeSinglePosition(newPos);
}
},
// for single use
onSingleButtonDown (event) {
if (this.disabled) return;
event.preventDefault();
this.onSingleDragStart(event);
window.addEventListener('mousemove', this.onSingleDragging);
window.addEventListener('mouseup', this.onSingleDragEnd);
},
onSingleDragStart (event) {
this.dragging = true;
this.startX = event.clientX;
this.startPos = parseInt(this.singlePosition, 10);
},
onSingleDragging (event) {
if (this.dragging) {
this.$refs.tooltip.visible = true;
this.currentX = event.clientX;
const diff = (this.currentX - this.startX) / this.sliderWidth * 100;
this.newPos = this.startPos + diff;
this.changeSinglePosition(this.newPos);
}
},
onSingleDragEnd () {
if (this.dragging) {
this.dragging = false;
this.$refs.tooltip.visible = false;
this.changeSinglePosition(this.newPos);
window.removeEventListener('mousemove', this.onSingleDragging);
window.removeEventListener('mouseup', this.onSingleDragEnd);
}
},
changeSinglePosition (newPos) {
if (newPos >= 0 && (newPos <= 100)) {
const lengthPerStep = 100 / ((this.max - this.min) / this.step);
const steps = Math.round(newPos / lengthPerStep);
this.value = Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min);
this.setSinglePosition(this.value);
if (!this.dragging) {
if (this.value !== this.oldSingleValue) {
this.$emit('on-change', this.value);
this.$dispatch('on-form-change', this.value);
this.oldSingleValue = this.value;
}
}
}
},
setSinglePosition (val) {
this.singlePosition = (val - this.min) / (this.max - this.min) * 100;
},
handleInputChange (val) {
this.value = val;
this.setSinglePosition(val);
this.$emit('on-change', this.value);
this.$dispatch('on-form-change', this.value);
},
// for range use first
onFirstButtonDown (event) {
if (this.disabled) return;
event.preventDefault();
this.onFirstDragStart(event);
window.addEventListener('mousemove', this.onFirstDragging);
window.addEventListener('mouseup', this.onFirstDragEnd);
},
onFirstDragStart (event) {
this.firstDragging = true;
this.startX = event.clientX;
this.startPos = parseInt(this.firstPosition, 10);
},
onFirstDragging (event) {
if (this.firstDragging) {
this.$refs.tooltip.visible = true;
this.currentX = event.clientX;
const diff = (this.currentX - this.startX) / this.sliderWidth * 100;
this.newPos = this.startPos + diff;
this.changeFirstPosition(this.newPos);
}
},
onFirstDragEnd () {
if (this.firstDragging) {
this.firstDragging = false;
this.$refs.tooltip.visible = false;
this.changeFirstPosition(this.newPos);
window.removeEventListener('mousemove', this.onFirstDragging);
window.removeEventListener('mouseup', this.onFirstDragEnd);
}
},
changeFirstPosition (newPos) {
if (newPos >= 0 && (newPos <= this.secondPosition)) {
const lengthPerStep = 100 / ((this.max - this.min) / this.step);
const steps = Math.round(newPos / lengthPerStep);
this.value = [Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min), this.value[1]];
this.setFirstPosition(this.value[0]);
if (!this.firstDragging) {
if (this.value[0] !== this.oldFirstValue) {
this.$emit('on-change', this.value);
this.$dispatch('on-form-change', this.value);
this.oldFirstValue = this.value[0];
}
}
}
},
setFirstPosition (val) {
this.firstPosition = (val - this.min) / (this.max - this.min) * 100;
},
// for range use second
onSecondButtonDown (event) {
if (this.disabled) return;
event.preventDefault();
this.onSecondDragStart(event);
window.addEventListener('mousemove', this.onSecondDragging);
window.addEventListener('mouseup', this.onSecondDragEnd);
},
onSecondDragStart (event) {
this.secondDragging = true;
this.startX = event.clientX;
this.startPos = parseInt(this.secondPosition, 10);
},
onSecondDragging (event) {
if (this.secondDragging) {
this.$refs.tooltip2.visible = true;
this.currentX = event.clientX;
const diff = (this.currentX - this.startX) / this.sliderWidth * 100;
this.newPos = this.startPos + diff;
this.changeSecondPosition(this.newPos);
}
},
onSecondDragEnd () {
if (this.secondDragging) {
this.secondDragging = false;
this.$refs.tooltip2.visible = false;
this.changeSecondPosition(this.newPos);
window.removeEventListener('mousemove', this.onSecondDragging);
window.removeEventListener('mouseup', this.onSecondDragEnd);
}
},
changeSecondPosition (newPos) {
if (newPos >= this.firstPosition && (newPos <= 100)) {
const lengthPerStep = 100 / ((this.max - this.min) / this.step);
const steps = Math.round(newPos / lengthPerStep);
this.value = [this.value[0], Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min)];
this.setSecondPosition(this.value[1]);
if (!this.secondDragging) {
if (this.value[1] !== this.oldSecondValue) {
this.$emit('on-change', this.value);
this.$dispatch('on-form-change', this.value);
this.oldSecondValue = this.value[1];
}
}
}
},
setSecondPosition (val) {
this.secondPosition = (val - this.min) / (this.max - this.min) * 100;
}
},
ready () {
if (this.range) {
const isArray = Array.isArray(this.value);
if (!isArray || (isArray && this.value.length != 2) || (isArray && (isNaN(this.value[0]) || isNaN(this.value[1])))) {
this.value = [this.min, this.max];
} else {
this.updateValue(this.value, true);
}
} else {
if (typeof this.value !== 'number') {
this.value = this.min;
}
this.updateValue(this.value);
}
}
};
</script>

2
src/components/spin/index.js
View file

@ -1,2 +0,0 @@
import Spin from './spin.vue';
export default Spin;

Some files were not shown because too many files have changed in this diff Show more