github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

update time-picker

pull/2/head
qingwei.li 2016-08-09 10:10:33 +08:00
parent 82b4582c7e
commit 096b3559c6
11 changed files with 285 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
examples/docs/time-picker.md
View File

@ -8,7 +8,7 @@
## 固定时间点 ## 固定时间点
提供几个固定的时间点供用户选择。 提供几个固定的时间点供用户选择。
{{value}}
<div class="demo-box"> <div class="demo-box">
<el-time-select <el-time-select
:picker-options="{ :picker-options="{
@ -22,7 +22,7 @@
```html ```html
<el-time-select <el-time-select
:value.sync="value" v-model="value"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
@ -37,13 +37,14 @@
<div class="demo-box"> <div class="demo-box">
<el-time-picker <el-time-picker
v-model="value"
placeholder="任意时间点"> placeholder="任意时间点">
</el-time-picker> </el-time-picker>
</div> </div>
```html ```html
<el-time-picker <el-time-picker
:value.sync="value" v-model="value"
placeholder="任意时间点"> placeholder="任意时间点">
</el-time-picker> </el-time-picker>
``` ```
@ -57,7 +58,7 @@
```html ```html
<el-time-picker <el-time-picker
:value.sync="value" v-model="value"
placeholder="任意时间点"> placeholder="任意时间点">
</el-time-picker> </el-time-picker>
``` ```
@ -75,7 +76,7 @@
```html ```html
<el-time-picker <el-time-picker
:value.sync="value" v-model="value"
:picker-options="{ :picker-options="{
selectableRange: '18:30:00 - 20:30:00' selectableRange: '18:30:00 - 20:30:00'
}" }"
@ -92,7 +93,7 @@
<div class="demo-box"> <div class="demo-box">
<el-time-select <el-time-select
placeholder="起始时间" placeholder="起始时间"
:value.sync="startTime" v-model="startTime"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
@ -101,7 +102,7 @@
</el-time-select> </el-time-select>
<el-time-select <el-time-select
placeholder="结束时间" placeholder="结束时间"
:value.sync="endTime" v-model="endTime"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
@ -114,7 +115,7 @@
```html ```html
<el-time-select <el-time-select
placeholder="起始时间" placeholder="起始时间"
:value.sync="startTime" v-model="startTime"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
@ -123,7 +124,7 @@
</el-time-select> </el-time-select>
<el-time-select <el-time-select
placeholder="结束时间" placeholder="结束时间"
:value.sync="endTime" v-model="endTime"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
@ -139,7 +140,7 @@
<div class="demo-box"> <div class="demo-box">
<el-time-select <el-time-select
placeholder="起始时间" placeholder="起始时间"
:value.sync="startTime2" v-model="startTime2"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
@ -148,7 +149,7 @@
</el-time-select> </el-time-select>
<el-time-select <el-time-select
placeholder="结束时间" placeholder="结束时间"
:value.sync="endTime2" v-model="endTime2"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
@ -161,7 +162,7 @@
```html ```html
<el-time-select <el-time-select
placeholder="起始时间" placeholder="起始时间"
:value.sync="startTime2" v-model="startTime2"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
@ -170,7 +171,7 @@
</el-time-select> </el-time-select>
<el-time-select <el-time-select
placeholder="结束时间" placeholder="结束时间"
:value.sync="endTime2" v-model="endTime2"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
@ -201,6 +202,7 @@
export default { export default {
data() { data() {
return { return {
value: '',
startTime: '', startTime: '',
endTime: '', endTime: '',
startTime2: '', startTime2: '',

6
package.json
View File

@ -32,7 +32,7 @@
"devDependencies": { "devDependencies": {
"babel-helper-vue-jsx-merge-props": "^1.0.1", "babel-helper-vue-jsx-merge-props": "^1.0.1",
"babel-plugin-syntax-jsx": "^6.8.0", "babel-plugin-syntax-jsx": "^6.8.0",
"babel-plugin-transform-vue-jsx": "^1.1.1", "babel-plugin-transform-vue-jsx": "^3.1.0",
"file-save": "^0.2.0", "file-save": "^0.2.0",
"gh-pages": "^0.11.0", "gh-pages": "^0.11.0",
"highlight.js": "^9.3.0", "highlight.js": "^9.3.0",
@ -44,8 +44,8 @@
"purecss": "^0.6.0", "purecss": "^0.6.0",
"q": "^1.4.1", "q": "^1.4.1",
"uppercamelcase": "^1.1.0", "uppercamelcase": "^1.1.0",
"vue": "^2.0.0-beta.5", "vue": "^2.0.0-beta.7",
"vue-loader": "^9.2.3", "vue-loader": "^9.3.2",
"vue-markdown-loader": "^0.4.0", "vue-markdown-loader": "^0.4.0",
"vue-popup": "^0.1.8", "vue-popup": "^0.1.8",
"vue-router": "^2.0.0-beta.2" "vue-router": "^2.0.0-beta.2"

5
packages/date-picker/package.json
View File

@ -12,10 +12,9 @@
"author": "long.zhang@ele.me", "author": "long.zhang@ele.me",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"wind-dom": "0.0.3", "wind-dom": "0.0.3"
"vue-clickoutside": "*"
}, },
"devDependencies": { "devDependencies": {
"vue": "^1.0.0" "vue": "^2.0.0"
} }
} }

118
packages/date-picker/src/basic/time-spinner.vue
View File

@ -1,43 +1,46 @@
<template> <template>
<div <div class="el-time-spinner">
@mouseenter="emitSelectRange('hours')" {{hours}}
class="el-time-spinner__wrapper" <div
v-el:hour> @mouseenter="emitSelectRange('hours')"
<ul class="el-time-spinner__list"> class="el-time-spinner__wrapper"
<li ref="hour">
@click="handleClick('hours', { value: hour, disabled: disabled }, true)" <ul class="el-time-spinner__list">
v-for="(hour, disabled) in hoursList" <li
track-by="$index" @click="handleClick('hours', { value: hour, disabled: disabled }, true)"
class="el-time-spinner__item" v-for="(disabled, hour) in hoursList"
:class="{ 'active': hour === hours, 'disabled': disabled }" track-by="$index"
v-text="hour"></li> class="el-time-spinner__item"
</ul> :class="{ 'active': hour === hours, 'disabled': disabled }"
</div> v-text="hour"></li>
<div </ul>
@mouseenter="emitSelectRange('minutes')" </div>
class="el-time-spinner__wrapper" <div
v-el:minute> @mouseenter="emitSelectRange('minutes')"
<ul class="el-time-spinner__list"> class="el-time-spinner__wrapper"
<li ref="minute">
@click="handleClick('minutes', minute, true)" <ul class="el-time-spinner__list">
v-for="minute in 60" <li
class="el-time-spinner__item" @click="handleClick('minutes', key, true)"
:class="{ 'active': minute === minutes }" v-for="(minute, key) in 60"
v-text="minute"></li> class="el-time-spinner__item"
</ul> :class="{ 'active': key === minutes }"
</div> v-text="key"></li>
<div </ul>
@mouseenter="emitSelectRange('seconds')" </div>
class="el-time-spinner__wrapper" <div
v-el:second> @mouseenter="emitSelectRange('seconds')"
<ul class="el-time-spinner__list"> class="el-time-spinner__wrapper"
<li ref="second">
@click="handleClick('seconds', second, true)" <ul class="el-time-spinner__list">
v-for="second in 60" <li
class="el-time-spinner__item" @click="handleClick('seconds', key, true)"
:class="{ 'active': second === seconds }" v-for="(second, key) in 60"
v-text="second"></li> class="el-time-spinner__item"
</ul> :class="{ 'active': key === seconds }"
v-text="key"></li>
</ul>
</div>
</div> </div>
</template> </template>
@ -70,27 +73,28 @@
}, },
watch: { watch: {
hours(newVal, oldVal) { hoursPrivate(newVal, oldVal) {
if (!(newVal >= 0 && newVal <= 23)) { if (!(newVal >= 0 && newVal <= 23)) {
this.hours = oldVal; this.hoursPrivate = oldVal;
} }
this.$els.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80); this.$refs.hour.scrollTop = Math.max(0, (this.hoursPrivate - 2.5) * 32 + 80);
this.$emit('change', { hours: newVal }); this.$emit('change', { hours: newVal });
}, },
minutes(newVal, oldVal) { minutesPrivate(newVal, oldVal) {
if (!(newVal >= 0 && newVal <= 59)) { if (!(newVal >= 0 && newVal <= 59)) {
this.minutes = oldVal; this.minutesPrivate = oldVal;
} }
this.$els.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80); this.$refs.minute.scrollTop = Math.max(0, (this.minutesPrivate - 2.5) * 32 + 80);
this.$emit('change', { minutes: newVal }); this.$emit('change', { minutes: newVal });
}, },
seconds(newVal, oldVal) { secondsPrivate(newVal, oldVal) {
if (!(newVal >= 0 && newVal <= 59)) { if (!(newVal >= 0 && newVal <= 59)) {
this.seconds = oldVal; this.secondsPrivate = oldVal;
} }
this.$els.second.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80); this.$refs.second.scrollTop = Math.max(0, (this.secondsPrivate - 2.5) * 32 + 80);
this.$emit('change', { seconds: newVal }); this.$emit('change', { seconds: newVal });
} }
}, },
@ -101,9 +105,17 @@
} }
}, },
data() {
return {
hoursPrivate: 0,
minutesPrivate: 0,
secondsPrivate: 0
};
},
methods: { methods: {
focusEditor(type) { focusEditor(type) {
const editor = this.$els[type + 'Editor']; const editor = this.$refs[type + 'Editor'];
if (editor) { if (editor) {
editor.focus(); editor.focus();
} }
@ -114,7 +126,7 @@
return; return;
} }
this[type] = value.value >= 0 ? value.value : value; this[type + 'Private'] = value.value >= 0 ? value.value : value;
this.emitSelectRange(type); this.emitSelectRange(type);
}, },
@ -130,9 +142,9 @@
}, },
ajustScrollTop() { ajustScrollTop() {
this.$els.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80); this.$refs.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80);
this.$els.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80); this.$refs.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80);
this.$els.second.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80); this.$refs.second.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80);
} }
} }
}; };

4
packages/date-picker/src/panel/date.vue
View File

@ -26,7 +26,7 @@
type="text" type="text"
class="el-date-picker__editor"> class="el-date-picker__editor">
<time-picker <time-picker
v-ref:timepicker ref="timepicker"
:date="date" :date="date"
@pick="handleTimePick" @pick="handleTimePick"
v-show="timePickerVisible"> v-show="timePickerVisible">
@ -75,7 +75,7 @@
:disabled-date="disabledDate"> :disabled-date="disabledDate">
</date-table> </date-table>
<year-table <year-table
v-ref:year-table ref="yearTable"
:year="year" :year="year"
v-show="currentView === 'year'" v-show="currentView === 'year'"
@pick="handleYearPick"> @pick="handleYearPick">

4
packages/date-picker/src/panel/time-range.vue
View File

@ -8,7 +8,7 @@
<div class="el-time-range-picker__header">开始时间</div> <div class="el-time-range-picker__header">开始时间</div>
<div class="el-time-range-picker__body el-time-panel__content"> <div class="el-time-range-picker__body el-time-panel__content">
<time-spinner <time-spinner
v-ref:min-spinner ref="minSpinner"
:show-seconds="showSeconds" :show-seconds="showSeconds"
@change="handleMinChange" @change="handleMinChange"
@select-range="setMinSelectionRange" @select-range="setMinSelectionRange"
@ -22,7 +22,7 @@
<div class="el-time-range-picker__header">结束时间</div> <div class="el-time-range-picker__header">结束时间</div>
<div class="el-time-range-picker__body el-time-panel__content"> <div class="el-time-range-picker__body el-time-panel__content">
<time-spinner <time-spinner
v-ref:max-spinner ref="maxSpinner"
:show-seconds="showSeconds" :show-seconds="showSeconds"
@change="handleMaxChange" @change="handleMaxChange"
@select-range="setMaxSelectionRange" @select-range="setMaxSelectionRange"

1
packages/date-picker/src/panel/time-select.vue
View File

@ -99,7 +99,6 @@
handleClick(item) { handleClick(item) {
if (!item.disabled) { if (!item.disabled) {
this.$emit('pick', item.value); this.$emit('pick', item.value);
this.value = item.value;
} }
} }
}, },

85
packages/date-picker/src/panel/time.vue
View File

@ -5,12 +5,12 @@
class="el-time-panel"> class="el-time-panel">
<div class="el-time-panel__content"> <div class="el-time-panel__content">
<time-spinner <time-spinner
v-ref:spinner ref="spinner"
@change="handleChange" @change="handleChange"
:show-seconds="showSeconds" :show-seconds="showSeconds"
@select-range="setSelectionRange"
:hours="hours" :hours="hours"
:minutes="minutes" :minutes="minutes"
@select-range="setSelectionRange"
:seconds="seconds"> :seconds="seconds">
</time-spinner> </time-spinner>
</div> </div>
@ -34,12 +34,6 @@
}, },
props: { props: {
date: {
default() {
return new Date();
}
},
format: { format: {
default: 'HH:mm:ss' default: 'HH:mm:ss'
}, },
@ -61,51 +55,18 @@
} }
}, },
data() {
return {
date: new Date(),
hours: 0,
minutes: 0,
seconds: 0
};
},
computed: { computed: {
showSeconds() { showSeconds() {
return (this.format || '').indexOf('ss') !== -1; return (this.format || '').indexOf('ss') !== -1;
},
hours: {
get() {
if (this.date) {
return this.date.getHours();
}
return 0;
},
set(hours) {
if (this.date) {
this.date.setHours(hours);
}
}
},
minutes: {
get() {
if (this.date) {
return this.date.getMinutes();
}
return 0;
},
set(minutes) {
if (this.date) {
this.date.setMinutes(minutes);
}
}
},
seconds: {
get() {
if (this.date) {
return this.date.getSeconds();
}
return 0;
},
set(seconds) {
if (this.date) {
this.date.setSeconds(seconds);
}
}
} }
}, },
@ -115,9 +76,19 @@
}, },
handleChange(date) { handleChange(date) {
if (date.hours !== undefined) this.hours = date.hours; if (date.hours !== undefined) {
if (date.minutes !== undefined) this.minutes = date.minutes; this.date.setHours(date.hours);
if (date.seconds !== undefined) this.seconds = date.seconds; 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();
}
this.handleConfirm(true); this.handleConfirm(true);
}, },
@ -147,7 +118,13 @@
} }
}, },
ready() { created() {
this.hours = this.date.getHours();
this.minutes = this.date.getMinutes();
this.seconds = this.date.getSeconds();
},
mounted() {
this.$refs.spinner.selectableRange = this.selectableRange; this.$refs.spinner.selectableRange = this.selectableRange;
this.$nextTick(() => this.handleConfirm(true, true)); this.$nextTick(() => this.handleConfirm(true, true));
} }

43
packages/date-picker/src/picker.vue
View File

@ -1,31 +1,29 @@
<template> <template>
<span <span
class="el-date-editor" class="el-date-editor"
v-clickoutside="pickerVisible = false" v-clickoutside="handleClose"
:class="{ :class="{
'is-have-trigger': haveTrigger, 'is-have-trigger': haveTrigger,
'is-active': pickerVisible, 'is-active': pickerVisible,
'is-filled': !!this.value, 'is-filled': !!this.value
'is-lg': size === 'lg', 'is-sm': size === 'sm'
}"> }">
<input <input
lazy
class="el-date-editor__editor" class="el-date-editor__editor"
:readonly="readonly" :readonly="readonly"
:type="editorType" :type="editorType"
:placeholder="placeholder" :placeholder="placeholder"
:style="{ height: height ? height + 'px' : '' }"
@focus="handleFocus" @focus="handleFocus"
@blur="handleBlur" @blur="handleBlur"
@keydown="handleKeydown($event)" @keydown="handleKeydown"
@keyup="handleKeyup($event)" @keyup="handleKeyup"
v-el:reference ref="reference"
v-model="visualValue" /> v-model.lazy="visualValue" />
<span <span
@click="togglePicker()" @click="togglePicker()"
class="el-date-editor__trigger el-icon {{triggerClass}}" class="el-date-editor__trigger el-icon"
:class="[triggerClass]"
v-if="haveTrigger"> v-if="haveTrigger">
</span> </span>
</span> </span>
@ -33,6 +31,7 @@
<script> <script>
import Vue from 'vue'; import Vue from 'vue';
import Clickoutside from 'main/utils/clickoutside';
import { merge, formatDate, parseDate, getWeekNumber } from './util'; import { merge, formatDate, parseDate, getWeekNumber } from './util';
import Popper from 'main/utils/popper.js'; import Popper from 'main/utils/popper.js';
@ -189,7 +188,7 @@ export default {
}, },
directives: { directives: {
clickoutside: require('vue-clickoutside') Clickoutside
}, },
data() { data() {
@ -254,11 +253,11 @@ export default {
const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]); const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);
if (parsedValue) { if (parsedValue) {
this.value = parsedValue; this.$emit('input', parsedValue);
} }
return; return;
} }
this.value = value; this.$emit('input', value);
} }
}, },
@ -268,6 +267,10 @@ export default {
}, },
methods: { methods: {
handleClose() {
this.pickerVisible = false;
},
handleFocus() { handleFocus() {
const type = this.type; const type = this.type;
@ -331,7 +334,8 @@ export default {
const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]); const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);
if (!parsedValue) return; if (!parsedValue) return;
this.picker.value = this.value = parsedValue; this.picker.value = parsedValue;
this.$emit('input', parsedValue);
if (this.type.indexOf('date') > -1) return; if (this.type.indexOf('date') > -1) return;
@ -389,8 +393,7 @@ export default {
showPicker() { showPicker() {
if (!this.picker) { if (!this.picker) {
this.picker = new Vue(merge({ this.picker = new Vue(merge({
el: document.createElement('div'), el: document.createElement('div')
replace: true
}, this.panel)); }, this.panel));
this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange'; this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange';
this.picker.selectionMode = this.selectionMode; this.picker.selectionMode = this.selectionMode;
@ -427,7 +430,7 @@ export default {
this.picker.resetView && this.picker.resetView(); this.picker.resetView && this.picker.resetView();
this.picker.$on('pick', (date, visible = false) => { this.picker.$on('pick', (date, visible = false) => {
this.value = date; this.$emit('input', date);
if (!visible) { if (!visible) {
this.pickerVisible = this.picker.visible = false; this.pickerVisible = this.picker.visible = false;
@ -437,8 +440,8 @@ export default {
this.picker.$on('select-range', (start, end) => { this.picker.$on('select-range', (start, end) => {
setTimeout(() => { setTimeout(() => {
this.$els.reference.setSelectionRange(start, end); this.$refs.reference.setSelectionRange(start, end);
this.$els.reference.focus(); this.$refs.reference.focus();
}, 0); }, 0);
}); });
} else { } else {
@ -451,7 +454,7 @@ export default {
return; return;
} }
this.popper = new Popper(this.$els.reference, this.picker.$el, { this.popper = new Popper(this.$refs.reference, this.picker.$el, {
gpuAcceleration: false, gpuAcceleration: false,
placement: 'bottom-start', placement: 'bottom-start',
boundariesPadding: 0, boundariesPadding: 0,

9
packages/theme-default/src/spinner.css
View File

@ -2,6 +2,11 @@
@import "./common/var.css"; @import "./common/var.css";
@component-namespace el { @component-namespace el {
@b time-spinner {
display: flex;
width: 100%;
}
@b spinner { @b spinner {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@ -10,13 +15,13 @@
animation: rotate 2s linear infinite; animation: rotate 2s linear infinite;
width: 50px; width: 50px;
height: 50px; height: 50px;
& .path { & .path {
stroke: #ececec; stroke: #ececec;
stroke-linecap: round; stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite; animation: dash 1.5s ease-in-out infinite;
} }
} }
} }
@keyframes rotate { @keyframes rotate {

270
src/index.js
View File

@ -1,106 +1,106 @@
import Group from '../packages/group/index.js'; // import Group from '../packages/group/index.js';
import SelectDropdown from '../packages/select-dropdown/index.js'; // import SelectDropdown from '../packages/select-dropdown/index.js';
import Pagination from '../packages/pagination/index.js'; // import Pagination from '../packages/pagination/index.js';
import Dialog from '../packages/dialog/index.js'; // import Dialog from '../packages/dialog/index.js';
import Cascader from '../packages/cascader/index.js'; // import Cascader from '../packages/cascader/index.js';
import Autocomplete from '../packages/autocomplete/index.js'; // import Autocomplete from '../packages/autocomplete/index.js';
import Dropdown from '../packages/dropdown/index.js'; // import Dropdown from '../packages/dropdown/index.js';
import DropdownItem from '../packages/dropdown-item/index.js'; // import DropdownItem from '../packages/dropdown-item/index.js';
import Menu from '../packages/menu/index.js'; // import Menu from '../packages/menu/index.js';
import Submenu from '../packages/submenu/index.js'; // import Submenu from '../packages/submenu/index.js';
import MenuItem from '../packages/menu-item/index.js'; // import MenuItem from '../packages/menu-item/index.js';
import Input from '../packages/input/index.js'; // import Input from '../packages/input/index.js';
import InputNumber from '../packages/input-number/index.js'; // import InputNumber from '../packages/input-number/index.js';
import InputGroup from '../packages/input-group/index.js'; // import InputGroup from '../packages/input-group/index.js';
import Radio from '../packages/radio/index.js'; // import Radio from '../packages/radio/index.js';
import RadioGroup from '../packages/radio-group/index.js'; // import RadioGroup from '../packages/radio-group/index.js';
import RadioButton from '../packages/radio-button/index.js'; // import RadioButton from '../packages/radio-button/index.js';
import Checkbox from '../packages/checkbox/index.js'; // import Checkbox from '../packages/checkbox/index.js';
import CheckboxGroup from '../packages/checkbox-group/index.js'; // import CheckboxGroup from '../packages/checkbox-group/index.js';
import Switch from '../packages/switch/index.js'; // import Switch from '../packages/switch/index.js';
import Select from '../packages/select/index.js'; import Select from '../packages/select/index.js';
import Option from '../packages/option/index.js'; import Option from '../packages/option/index.js';
import OptionGroup from '../packages/option-group/index.js'; // import OptionGroup from '../packages/option-group/index.js';
import Button from '../packages/button/index.js'; // import Button from '../packages/button/index.js';
import ButtonGroup from '../packages/button-group/index.js'; // import ButtonGroup from '../packages/button-group/index.js';
import Table from '../packages/table/index.js'; // import Table from '../packages/table/index.js';
import TableColumn from '../packages/table-column/index.js'; // import TableColumn from '../packages/table-column/index.js';
import DatePicker from '../packages/date-picker/index.js'; import DatePicker from '../packages/date-picker/index.js';
import TimeSelect from '../packages/time-select/index.js'; import TimeSelect from '../packages/time-select/index.js';
import TimePicker from '../packages/time-picker/index.js'; import TimePicker from '../packages/time-picker/index.js';
import Popover from '../packages/popover/index.js'; // import Popover from '../packages/popover/index.js';
import Tooltip from '../packages/tooltip/index.js'; // import Tooltip from '../packages/tooltip/index.js';
import MessageBox from '../packages/message-box/index.js'; // import MessageBox from '../packages/message-box/index.js';
import Breadcrumb from '../packages/breadcrumb/index.js'; // import Breadcrumb from '../packages/breadcrumb/index.js';
import BreadcrumbItem from '../packages/breadcrumb-item/index.js'; // import BreadcrumbItem from '../packages/breadcrumb-item/index.js';
import Form from '../packages/form/index.js'; // import Form from '../packages/form/index.js';
import FormItem from '../packages/form-item/index.js'; // import FormItem from '../packages/form-item/index.js';
import Tabs from '../packages/tabs/index.js'; // import Tabs from '../packages/tabs/index.js';
import TabPane from '../packages/tab-pane/index.js'; // import TabPane from '../packages/tab-pane/index.js';
import Tag from '../packages/tag/index.js'; // import Tag from '../packages/tag/index.js';
import Tree from '../packages/tree/index.js'; // import Tree from '../packages/tree/index.js';
import Alert from '../packages/alert/index.js'; // import Alert from '../packages/alert/index.js';
import Notification from '../packages/notification/index.js'; // import Notification from '../packages/notification/index.js';
import Slider from '../packages/slider/index.js'; // import Slider from '../packages/slider/index.js';
import Loading from '../packages/loading/index.js'; // import Loading from '../packages/loading/index.js';
import Icon from '../packages/icon/index.js'; // import Icon from '../packages/icon/index.js';
import Row from '../packages/row/index.js'; // import Row from '../packages/row/index.js';
import Col from '../packages/col/index.js'; // import Col from '../packages/col/index.js';
import Upload from '../packages/upload/index.js'; // import Upload from '../packages/upload/index.js';
import Progress from '../packages/progress/index.js'; // import Progress from '../packages/progress/index.js';
import Spinner from '../packages/spinner/index.js'; // import Spinner from '../packages/spinner/index.js';
const install = function(Vue) { const install = function(Vue) {
if (install.installed) return; if (install.installed) return;
Vue.component(Group.name, Group); // Vue.component(Group.name, Group);
Vue.component(SelectDropdown.name, SelectDropdown); // Vue.component(SelectDropdown.name, SelectDropdown);
Vue.component(Pagination.name, Pagination); // Vue.component(Pagination.name, Pagination);
Vue.component(Dialog.name, Dialog); // Vue.component(Dialog.name, Dialog);
Vue.component(Cascader.name, Cascader); // Vue.component(Cascader.name, Cascader);
Vue.component(Autocomplete.name, Autocomplete); // Vue.component(Autocomplete.name, Autocomplete);
Vue.component(Dropdown.name, Dropdown); // Vue.component(Dropdown.name, Dropdown);
Vue.component(DropdownItem.name, DropdownItem); // Vue.component(DropdownItem.name, DropdownItem);
Vue.component(Menu.name, Menu); // Vue.component(Menu.name, Menu);
Vue.component(Submenu.name, Submenu); // Vue.component(Submenu.name, Submenu);
Vue.component(MenuItem.name, MenuItem); // Vue.component(MenuItem.name, MenuItem);
Vue.component(Input.name, Input); // Vue.component(Input.name, Input);
Vue.component(InputNumber.name, InputNumber); // Vue.component(InputNumber.name, InputNumber);
Vue.component(InputGroup.name, InputGroup); // Vue.component(InputGroup.name, InputGroup);
Vue.component(Radio.name, Radio); // Vue.component(Radio.name, Radio);
Vue.component(RadioGroup.name, RadioGroup); // Vue.component(RadioGroup.name, RadioGroup);
Vue.component(RadioButton.name, RadioButton); // Vue.component(RadioButton.name, RadioButton);
Vue.component(Checkbox.name, Checkbox); // Vue.component(Checkbox.name, Checkbox);
Vue.component(CheckboxGroup.name, CheckboxGroup); // Vue.component(CheckboxGroup.name, CheckboxGroup);
Vue.component(Switch.name, Switch); // Vue.component(Switch.name, Switch);
Vue.component(Select.name, Select); Vue.component(Select.name, Select);
Vue.component(Option.name, Option); Vue.component(Option.name, Option);
Vue.component(OptionGroup.name, OptionGroup); // Vue.component(OptionGroup.name, OptionGroup);
Vue.component(Button.name, Button); // Vue.component(Button.name, Button);
Vue.component(ButtonGroup.name, ButtonGroup); // Vue.component(ButtonGroup.name, ButtonGroup);
Vue.component(Table.name, Table); // Vue.component(Table.name, Table);
Vue.component(TableColumn.name, TableColumn); // Vue.component(TableColumn.name, TableColumn);
Vue.component(DatePicker.name, DatePicker); Vue.component(DatePicker.name, DatePicker);
Vue.component(TimeSelect.name, TimeSelect); Vue.component(TimeSelect.name, TimeSelect);
Vue.component(TimePicker.name, TimePicker); Vue.component(TimePicker.name, TimePicker);
Vue.component(Popover.name, Popover); // Vue.component(Popover.name, Popover);
Vue.component(Tooltip.name, Tooltip); // Vue.component(Tooltip.name, Tooltip);
Vue.component(Breadcrumb.name, Breadcrumb); // Vue.component(Breadcrumb.name, Breadcrumb);
Vue.component(BreadcrumbItem.name, BreadcrumbItem); // Vue.component(BreadcrumbItem.name, BreadcrumbItem);
Vue.component(Form.name, Form); // Vue.component(Form.name, Form);
Vue.component(FormItem.name, FormItem); // Vue.component(FormItem.name, FormItem);
Vue.component(Tabs.name, Tabs); // Vue.component(Tabs.name, Tabs);
Vue.component(TabPane.name, TabPane); // Vue.component(TabPane.name, TabPane);
Vue.component(Tag.name, Tag); // Vue.component(Tag.name, Tag);
Vue.component(Tree.name, Tree); // Vue.component(Tree.name, Tree);
Vue.component(Alert.name, Alert); // Vue.component(Alert.name, Alert);
Vue.component(Slider.name, Slider); // Vue.component(Slider.name, Slider);
Vue.component(Icon.name, Icon); // Vue.component(Icon.name, Icon);
Vue.component(Row.name, Row); // Vue.component(Row.name, Row);
Vue.component(Col.name, Col); // Vue.component(Col.name, Col);
Vue.component(Upload.name, Upload); // Vue.component(Upload.name, Upload);
Vue.component(Progress.name, Progress); // Vue.component(Progress.name, Progress);
Vue.component(Spinner.name, Spinner); // Vue.component(Spinner.name, Spinner);
// Vue.use(Loading); // Vue.use(Loading);
@ -118,55 +118,55 @@ if (typeof window !== 'undefined' && window.Vue) {
module.exports = { module.exports = {
install, install,
Group, // Group,
SelectDropdown, // SelectDropdown,
Pagination, // Pagination,
Dialog, // Dialog,
Cascader, // Cascader,
Autocomplete, // Autocomplete,
Dropdown, // Dropdown,
DropdownItem, // DropdownItem,
Menu, // Menu,
Submenu, // Submenu,
MenuItem, // MenuItem,
Input, // Input,
InputNumber, // InputNumber,
InputGroup, // InputGroup,
Radio, // Radio,
RadioGroup, // RadioGroup,
RadioButton, // RadioButton,
Checkbox, // Checkbox,
CheckboxGroup, // CheckboxGroup,
Switch, // Switch,
Select, Select,
Option, Option,
OptionGroup, // OptionGroup,
Button, // Button,
ButtonGroup, // ButtonGroup,
Table, // Table,
TableColumn, // TableColumn,
DatePicker, DatePicker,
TimeSelect, TimeSelect,
TimePicker, TimePicker,
Popover, // Popover,
Tooltip, // Tooltip,
MessageBox, // MessageBox,
Breadcrumb, // Breadcrumb,
BreadcrumbItem, // BreadcrumbItem,
Form, // Form,
FormItem, // FormItem,
Tabs, // Tabs,
TabPane, // TabPane,
Tag, // Tag,
Tree, // Tree,
Alert, // Alert,
Notification, // Notification,
Slider, // Slider,
Loading, // Loading,
Icon, // Icon,
Row, // Row,
Col, // Col,
Upload, // Upload,
Progress, // Progress,
Spinner // Spinner
}; };