update time-picker

examples/docs/time-picker.md

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

package.json

@@ -32,7 +32,7 @@
   "devDependencies": {
     "babel-helper-vue-jsx-merge-props": "^1.0.1",
     "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",
     "gh-pages": "^0.11.0",
     "highlight.js": "^9.3.0",
@@ -44,8 +44,8 @@
     "purecss": "^0.6.0",
     "q": "^1.4.1",
     "uppercamelcase": "^1.1.0",
-    "vue": "^2.0.0-beta.5",
-    "vue-loader": "^9.2.3",
+    "vue": "^2.0.0-beta.7",
+    "vue-loader": "^9.3.2",
     "vue-markdown-loader": "^0.4.0",
     "vue-popup": "^0.1.8",
     "vue-router": "^2.0.0-beta.2"

packages/date-picker/package.json

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

packages/date-picker/src/basic/time-spinner.vue

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

packages/date-picker/src/panel/date.vue

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

packages/date-picker/src/panel/time-range.vue

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

packages/date-picker/src/panel/time-select.vue

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

packages/date-picker/src/panel/time.vue

@@ -5,12 +5,12 @@
     class="el-time-panel">
     <div class="el-time-panel__content">
       <time-spinner
-        v-ref:spinner
+        ref="spinner"
         @change="handleChange"
         :show-seconds="showSeconds"
+        @select-range="setSelectionRange"
         :hours="hours"
         :minutes="minutes"
-        @select-range="setSelectionRange"
         :seconds="seconds">
       </time-spinner>
     </div>
@@ -34,12 +34,6 @@
     },
 
     props: {
-      date: {
-        default() {
-          return new Date();
-        }
-      },
-
       format: {
         default: 'HH:mm:ss'
       },
@@ -61,51 +55,18 @@
       }
     },
 
+    data() {
+      return {
+        date: new Date(),
+        hours: 0,
+        minutes: 0,
+        seconds: 0
+      };
+    },
+
     computed: {
       showSeconds() {
         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) {
-        if (date.hours !== undefined) this.hours = date.hours;
-        if (date.minutes !== undefined) this.minutes = date.minutes;
-        if (date.seconds !== undefined) this.seconds = date.seconds;
+        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();
+        }
+
         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.$nextTick(() => this.handleConfirm(true, true));
     }

packages/date-picker/src/picker.vue

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

packages/theme-default/src/spinner.css

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

src/index.js

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