Merge pull request #5 from iview/2.0

更新分支

README.md

@@ -31,7 +31,7 @@
 
 ## Who's using iView
 
-- [TalkingData](http://www.talkingdata.com/)
+- [TalkingData 腾云天下](http://www.talkingdata.com/)
 - [Alibaba 阿里巴巴](http://www.alibaba.com/)
 - [Baidu 百度](https://www.baidu.com/)
 - [Tencent 腾讯](https://www.tencent.com/)
@@ -41,7 +41,7 @@
 - [Meituan 美团](http://www.meituan.com/)
 - [Sina 新浪](http://www.sina.com.cn/)
 - [iFLYTEK 科大讯飞](http://www.iflytek.com/)
-- [同程艺龙](https://www.ly.com/)
+- [LY 同程艺龙](https://www.ly.com/)
 
 > If your company or products use iView, welcome to click [here](https://github.com/iview/iview/issues/2143) to leave a message.
 

dist/iview.js

@@ -12827,8 +12827,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_picker_vue__ = __webpack_require__(141);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_picker_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_picker_vue__);
 /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_picker_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_picker_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__));
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_bcd2ee0a_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_picker_vue__ = __webpack_require__(386);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_91aba0aa_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_picker_vue__ = __webpack_require__(386);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_bcd2ee0a_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_picker_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_bcd2ee0a_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_picker_vue__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_91aba0aa_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_picker_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_91aba0aa_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_picker_vue__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_runtime_component_normalizer__ = __webpack_require__(0);
 /* script */
 
@@ -12846,8 +12846,8 @@ var __vue_module_identifier__ = null
 
 var Component = Object(__WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_runtime_component_normalizer__["a" /* default */])(
   __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_picker_vue___default.a,
-  __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_bcd2ee0a_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_picker_vue__["render"],
+  __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_91aba0aa_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_picker_vue__["render"],
-  __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_bcd2ee0a_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_picker_vue__["staticRenderFns"],
+  __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_91aba0aa_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_picker_vue__["staticRenderFns"],
   __vue_template_functional__,
   __vue_styles__,
   __vue_scopeId__,
@@ -13535,7 +13535,6 @@ exports.default = {
             var visible = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
             var type = arguments[2];
 
-            dates = this.parseDate(dates);
             if (this.multiple) {
                 var pickedTimeStamp = dates.getTime();
                 var indexOfPickedDate = this.internalValue.findIndex(function (date) {
@@ -13555,6 +13554,7 @@ exports.default = {
                     return new Date(ts);
                 }.bind(this));
             } else {
+                dates = this.parseDate(dates);
                 this.internalValue = Array.isArray(dates) ? dates : [dates];
             }
 
@@ -13752,7 +13752,8 @@ exports.default = {
     watch: {
         value: function value(newVal) {
             this.dates = newVal;
-            this.panelDate = this.startDate || (this.multiple ? this.dates[this.dates.length - 1] : this.dates[0]) || new Date();
+            var panelDate = this.multiple ? this.dates[this.dates.length - 1] : this.startDate || this.dates[0];
+            this.panelDate = panelDate || new Date();
         },
         currentView: function currentView(_currentView) {
             var _this2 = this;
@@ -13776,7 +13777,7 @@ exports.default = {
             var isDifferentYear = date.getFullYear() !== this.panelDate.getFullYear();
             var isDifferentMonth = isDifferentYear || date.getMonth() !== this.panelDate.getMonth();
             if (isDifferentYear || isDifferentMonth) {
-                this.panelDate = date;
+                if (!this.multiple) this.panelDate = date;
             }
         }
     },
@@ -16415,16 +16416,18 @@ exports.default = {
         },
         labelStyles: function labelStyles() {
             var style = {};
-            var labelWidth = this.labelWidth || this.form.labelWidth;
+            var labelWidth = this.labelWidth === 0 || this.labelWidth ? this.labelWidth : this.form.labelWidth;
-            if (labelWidth) {
+
+            if (labelWidth || labelWidth === 0) {
                 style.width = String(labelWidth) + 'px';
             }
             return style;
         },
         contentStyles: function contentStyles() {
             var style = {};
-            var labelWidth = this.labelWidth || this.form.labelWidth;
+            var labelWidth = this.labelWidth === 0 || this.labelWidth ? this.labelWidth : this.form.labelWidth;
-            if (labelWidth) {
+
+            if (labelWidth || labelWidth === 0) {
                 style.marginLeft = String(labelWidth) + 'px';
             }
             return style;
@@ -23889,7 +23892,10 @@ exports.default = {
                 (0, _newArrowCheck3.default)(this, _this8);
 
                 if (index === i) {
-                    [].concat((0, _toConsumableArray3.default)(el.children)).forEach(function (child) {
+                    [].concat((0, _toConsumableArray3.default)(el.children)).filter(function (child) {
+                        (0, _newArrowCheck3.default)(this, _this8);
+                        return child.classList.contains(prefixCls + '-tabpane');
+                    }.bind(this)).forEach(function (child) {
                         (0, _newArrowCheck3.default)(this, _this8);
                         return child.style.visibility = 'visible';
                     }.bind(this));
@@ -23901,7 +23907,10 @@ exports.default = {
                     setTimeout(function () {
                         (0, _newArrowCheck3.default)(this, _this8);
 
-                        [].concat((0, _toConsumableArray3.default)(el.children)).forEach(function (child) {
+                        [].concat((0, _toConsumableArray3.default)(el.children)).filter(function (child) {
+                            (0, _newArrowCheck3.default)(this, _this8);
+                            return child.classList.contains(prefixCls + '-tabpane');
+                        }.bind(this)).forEach(function (child) {
                             (0, _newArrowCheck3.default)(this, _this8);
                             return child.style.visibility = 'hidden';
                         }.bind(this));
@@ -26490,7 +26499,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 var API = (0, _extends3.default)({
-    version: '3.0.0',
+    version: '3.0.1',
     locale: _index2.default.use,
     i18n: _index2.default.i18n,
     install: install,
@@ -30832,8 +30841,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_date_vue__ = __webpack_require__(142);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_date_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_date_vue__);
 /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_date_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_date_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__));
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_5df1b13a_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_date_vue__ = __webpack_require__(399);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_6c43856e_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_date_vue__ = __webpack_require__(399);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_5df1b13a_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_date_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_5df1b13a_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_date_vue__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_6c43856e_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_date_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_6c43856e_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_date_vue__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_runtime_component_normalizer__ = __webpack_require__(0);
 /* script */
 
@@ -30851,8 +30860,8 @@ var __vue_module_identifier__ = null
 
 var Component = Object(__WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_runtime_component_normalizer__["a" /* default */])(
   __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_date_vue___default.a,
-  __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_5df1b13a_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_date_vue__["render"],
+  __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_6c43856e_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_date_vue__["render"],
-  __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_5df1b13a_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_date_vue__["staticRenderFns"],
+  __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_6c43856e_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_date_vue__["staticRenderFns"],
   __vue_template_functional__,
   __vue_styles__,
   __vue_scopeId__,
@@ -32370,8 +32379,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_form_item_vue__ = __webpack_require__(172);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_form_item_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_form_item_vue__);
 /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_form_item_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_form_item_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__));
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_23e09f48_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_form_item_vue__ = __webpack_require__(431);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_16b20e1a_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_form_item_vue__ = __webpack_require__(431);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_23e09f48_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_form_item_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_23e09f48_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_form_item_vue__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_16b20e1a_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_form_item_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_16b20e1a_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_form_item_vue__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_runtime_component_normalizer__ = __webpack_require__(0);
 /* script */
 
@@ -32389,8 +32398,8 @@ var __vue_module_identifier__ = null
 
 var Component = Object(__WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_runtime_component_normalizer__["a" /* default */])(
   __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_form_item_vue___default.a,
-  __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_23e09f48_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_form_item_vue__["render"],
+  __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_16b20e1a_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_form_item_vue__["render"],
-  __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_23e09f48_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_form_item_vue__["staticRenderFns"],
+  __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_16b20e1a_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_form_item_vue__["staticRenderFns"],
   __vue_template_functional__,
   __vue_styles__,
   __vue_scopeId__,
@@ -39023,8 +39032,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_tabs_vue__ = __webpack_require__(222);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_tabs_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_tabs_vue__);
 /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_tabs_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_tabs_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__));
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_1d6714d0_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_tabs_vue__ = __webpack_require__(539);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_8b45d978_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_tabs_vue__ = __webpack_require__(539);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_1d6714d0_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_tabs_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_1d6714d0_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_tabs_vue__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_8b45d978_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_tabs_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_8b45d978_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_tabs_vue__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_runtime_component_normalizer__ = __webpack_require__(0);
 /* script */
 
@@ -39042,8 +39051,8 @@ var __vue_module_identifier__ = null
 
 var Component = Object(__WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_runtime_component_normalizer__["a" /* default */])(
   __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_tabs_vue___default.a,
-  __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_1d6714d0_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_tabs_vue__["render"],
+  __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_8b45d978_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_tabs_vue__["render"],
-  __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_1d6714d0_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_tabs_vue__["staticRenderFns"],
+  __WEBPACK_IMPORTED_MODULE_1__babel_loader_sourceMap_node_modules_vue_loader_lib_template_compiler_index_id_data_v_8b45d978_hasScoped_false_optionsId_0_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_tabs_vue__["staticRenderFns"],
   __vue_template_functional__,
   __vue_styles__,
   __vue_scopeId__,

examples/app.vue

@@ -67,6 +67,7 @@ nav {
                 <li><router-link to="/divider">Divider</router-link></li>
                 <li><router-link to="/time">Time</router-link></li>
                 <li><router-link to="/cell">Cell</router-link></li>
+                <li><router-link to="/drawer">Drawer</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>

examples/main.js

@@ -225,6 +225,10 @@ const router = new VueRouter({
         {
             path: '/cell',
             component: (resolve) => require(['./routers/cell.vue'], resolve)
+        },
+        {
+            path: '/drawer',
+            component: (resolve) => require(['./routers/drawer.vue'], resolve)
         }
     ]
 });

examples/routers/color-picker.vue

@@ -1,152 +1,17 @@
 <template>
     <div style="margin: 100px;">
-        {{color}}
+        {{ color1 }}
-        <!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>-->
+        <ColorPicker v-model="color1" />
-        <color-picker
+        <ColorPicker v-model="color2" :editable="false"/>
-            v-model="color"
-            placement="bottom-start"
-            @on-change="c1"
-            @on-active-change="c2"></color-picker>
-        <Input value="hello" style="display: inline-block" />
-        <Date-picker
-            type="date"
-            placeholder="选择日期"
-            style="width: 200px"></Date-picker>
-        <color-picker
-            ref="xxx"
-            v-model="color"
-            :recommend="true"
-            format="rgb"
-            alpha
-            @on-change="onChange"
-            @on-active-change="onActiveChange"></color-picker>
-        <color-picker
-            v-model="color2"
-            :alpha="true"
-            :recommend="false"
-            format="hsv"></color-picker>
-        <!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>-->
-        <color-picker
-            v-model="color"
-            placement="bottom-start"
-            ></color-picker>
-        <Date-picker
-            type="date"
-            placeholder="选择日期"
-            style="width: 200px"></Date-picker>
-        <color-picker
-            ref="yyy"
-            :colors="colors"
-            v-model="color"
-            format="rgb"
-            alpha></color-picker>
-        <Button @click="setColor">set color</Button>
-
-        <br><br><br><br>
-        {{openState}}
-        <ColorPicker
-            v-model="color7"
-            :hue="false"
-            @on-open-change="onOpenChange"></ColorPicker>
-        <ColorPicker
-            v-model="color7"
-            :hue="false"
-            :hide-drop-down="hideDropDown"
-            @on-open-change="onOpenChange"></ColorPicker>
-
-        <br><br><br><br>
-        <ColorPicker
-            v-model="color7"
-            disabled></ColorPicker>
     </div>
 </template>
-
 <script>
-export default {
+    export default {
-    props: {},
+        data () {
-
-    data() {
             return {
-            color: 'rgba(12,34,255,.85)',
+                color1: '#19be6b',
-            color2: '',
+                color2: ''
-            color7: '#19be6b',
+            };
-            openState: false,
+        }
-            colors: [
-                '#2d8cf0',
-                '#19be6b',
-                '#ff9900',
-                '#ed3f14',
-                '#00b5ff',
-                '#19c919',
-                '#f9e31c',
-                '#ea1a1a',
-                '#9b1dea',
-                '#00c2b1',
-                '#ac7a33',
-                '#1d35ea',
-                '#8bc34a',
-                '#f16b62',
-                '#ea4ca3',
-                '#0d94aa',
-                '#febd79',
-                '#5d4037',
-                '#00bcd4',
-                '#f06292',
-                '#cddc39',
-                '#607d8b',
-                '#000000',
-                '#ffffff',
-                '#2d8cf0',
-                '#19be6b',
-                '#ff9900',
-                '#ed3f14',
-                '#00b5ff',
-                '#19c919',
-                '#f9e31c',
-                '#ea1a1a',
-                '#9b1dea',
-                '#00c2b1',
-                '#ac7a33',
-                '#1d35ea',
-                '#8bc34a',
-                '#f16b62',
-                '#ea4ca3',
-                '#0d94aa',
-                '#febd79',
-                '#5d4037',
-            ],
-            hideDropDown: false,
     };
-    },
-
-    computed: {},
-
-    mounted() {
-        setInterval(this.toggleShowHide, 2000);
-    },
-
-    methods: {
-        setColor() {
-            this.color = '#26bc77';
-        },
-        c1(d) {
-            console.log(d);
-        },
-        c2(d) {
-            console.log(d);
-        },
-        onOpenChange(state) {
-            this.openState = state;
-        },
-        onChange(d) {
-            console.log(d);
-        },
-        onActiveChange(d) {
-            console.log(d);
-        },
-        toggleShowHide() {
-            this.hideDropDown = !this.hideDropDown;
-        },
-    },
-};
 </script>

examples/routers/drawer.vue

@@ -0,0 +1,219 @@
+<template>
+    <div>
+        <Button @click="visible = true">show1</Button>
+        <Button @click="visible2 = true">show2</Button>
+        <Button @click="visible3 = true">show3</Button>
+
+        <div style="width: 500px;height:500px;background: green;position: relative;">
+
+        </div>
+
+        <Drawer v-model="visible" width="70" title="抽屉标题" :styles="styles" @on-close="handleClose">
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <Button @click="visible2 = true">show2</Button>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+        </Drawer>
+
+
+        <Drawer v-model="visible2" title="抽屉标题" placement="right">
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容22</p>
+        </Drawer>
+        <Drawer v-model="visible3" placement="left">
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容</p>
+            <p>一些内容22</p>
+        </Drawer>
+    </div>
+</template>
+
+<script>
+    export default {
+        data () {
+            return {
+                visible: false,
+                visible2: false,
+                visible3: false,
+                styles: {
+                    height: 'calc(100% - 55px)',
+                    paddingBottom: '53px',
+                },
+                ms: {
+                    backgroundColor: 'rgba(255,0,255,0.5)'
+                }
+            };
+        },
+        methods: {
+            handleClose () {
+                this.$Message.info('关闭了');
+            }
+        }
+    };
+</script>
+
+<style>
+body{
+    height: 2000px;
+}
+</style>

examples/routers/input-number.vue

@@ -54,7 +54,24 @@
         <InputNumber v-model="value3" style="width: 200px" placeholder="Enter something..."></InputNumber> -->
 
         
-        <InputNumber v-model="valueNull" style="width: 200px" :min='0' :max='10000'  :precision='2' ></InputNumber>
+        <InputNumber v-model="valueNull" style="width: 200px" :min='1' :max='10000'  :precision='2' ></InputNumber>
+        <InputNumber v-model="valueNull" style="width: 200px" ></InputNumber>
+        <div style="margin:10px 0px">
+            <InputNumber :activeChange="false" v-model="valueNull" style="width: 200px" :min='1' :max='10000'  :precision='2' ></InputNumber>
+            <InputNumber :activeChange="false" v-model="valueNull" style="width: 200px" ></InputNumber>
+        </div>
+        <div style="margin:10px 0px">
+            <InputNumber
+                :max="10000"
+                v-model="value9"
+                :formatter="value => `$ ${value}`.replace(/B(?=(d{3})+(?!d))/g, ',')"
+                :parser="value => value.replace(/\$s?|(,*)/g, '')"></InputNumber>
+            <InputNumber
+                :max="100"
+                v-model="value10"
+                :formatter="value => `${value}%`"
+                :parser="value => value.replace('%', '')"></InputNumber>
+        </div>
     </div>
 </template>
 <script>
@@ -68,16 +85,18 @@
                 formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
                 parser: (value) => value.replace(/\$\s?|(,*)/g, ''),
                 formatter2: (value) => `${value}%`,
-                parser2: (value) => value.replace('%', '')
+                parser2: (value) => value.replace('%', ''),
-            }
+                value9: 1000,
+                value10: 100
+            };
         },
         methods: {
             focus (e) {
-                e.target.select()
+                e.target.select();
             },
             change (v) {
-                console.log(v)
+                console.log(v);
-            }
             }
         }
+    };
 </script>

examples/routers/menu.vue

@@ -1,46 +1,45 @@
 <template>
-    <Menu active-name="1-2" :open-names="['1']">
+    <Menu mode="horizontal" :theme="theme1" active-name="3-4" @on-select="hs">
-        <Submenu name="1">
+        <MenuItem name="1" to="/button" target="_blank">
-            <template slot="title">
+            <Icon type="ios-paper" />
-                <Icon type="ios-analytics"></Icon>
+            内容管理
-                Navigation One
+        </MenuItem>
-            </template>
+        <MenuItem name="2">
-            <MenuGroup title="Item 1">
+            <Icon type="ios-people" />
-                <MenuItem name="1-1">我是菜单一</MenuItem>
+            用户管理
-                <MenuItem name="1-2">我是菜单二</MenuItem>
+        </MenuItem>
-            </MenuGroup>
-            <MenuGroup title="Item 2">
-                <MenuItem name="1-3">我是菜单三</MenuItem>
-                <MenuItem name="1-4">我是菜单四</MenuItem>
-            </MenuGroup>
-        </Submenu>
-        <Submenu name="2">
-            <template slot="title">
-                <Icon type="ios-filing"></Icon>
-                Navigation Two
-            </template>
-            <MenuItem name="2-1">我是菜单五</MenuItem>
-            <MenuItem name="2-2">我是菜单六</MenuItem>
         <Submenu name="3">
-                <template slot="title">Submenu</template>
-                <MenuItem name="3-1">我是菜单七</MenuItem>
-                <MenuItem name="3-2">我是菜单八</MenuItem>
-            </Submenu>
-        </Submenu>
-        <Submenu name="4">
             <template slot="title">
-                <Icon type="ios-gear"></Icon>
+                <Icon type="ios-stats" />
-                Navigation Three
+                统计分析
             </template>
-            <MenuItem name="4-1">Option 9</MenuItem>
+            <MenuGroup title="使用">
-            <MenuItem name="4-2">Option 10</MenuItem>
+                <MenuItem name="3-1">新增和启动</MenuItem>
-            <MenuItem name="4-3">Option 11</MenuItem>
+                <MenuItem name="3-2">活跃分析</MenuItem>
-            <MenuItem name="4-4">Option 12</MenuItem>
+                <MenuItem name="3-3">时段分析</MenuItem>
+            </MenuGroup>
+            <MenuGroup title="留存">
+                <MenuItem name="3-4">用户留存</MenuItem>
+                <MenuItem name="3-5">流失用户</MenuItem>
+            </MenuGroup>
         </Submenu>
+        <MenuItem name="4">
+            <Icon type="ios-construct" />
+            综合设置
+        </MenuItem>
     </Menu>
 </template>
 <script>
     export default {
-
+        data () {
+            return {
+                theme1: 'light'
+            }
+        },
+        methods: {
+            hs (n) {
+                console.log(n);
+            }
+        }
     }
 </script>

examples/routers/modal.vue

@@ -1,43 +1,21 @@
 <template>
     <div>
-        <Button @click="instance('info')">Info</Button>
+        <Button @click="modal12 = true">Open the first modal</Button>
-        <Button @click="instance('success')">Success</Button>
+        <Button @click="modal13 = true">Open the second modal</Button>
-        <Button @click="instance('warning')">Warning</Button>
+        <Modal v-model="modal12" draggable scrollable title="Modal 1">
-        <Button @click="instance('error')">Error</Button>
+            <div>This is the first modal</div>
+        </Modal>
+        <Modal v-model="modal13" draggable scrollable title="Modal 2">
+            <div>This is the second modal</div>
+        </Modal>
     </div>
 </template>
 <script>
     export default {
-        methods: {
+        data () {
-            instance (type) {
+            return {
-                const title = 'Title';
+                modal12: false,
-                const content = '<p>Content of dialog</p><p>Content of dialog</p>';
+                modal13: false
-                switch (type) {
-                    case 'info':
-                        this.$Modal.info({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                    case 'success':
-                        this.$Modal.success({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                    case 'warning':
-                        this.$Modal.warning({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                    case 'error':
-                        this.$Modal.error({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                }
             }
         }
     }

examples/routers/tabs.vue

@@ -1,77 +1,5 @@
-<!--<template>-->
+<template>
-    <!--<Tabs value="name1" :animated="false">-->
+    <Tabs type="card" closable @on-tab-remove="handleTabRemove" :beforeRemove="handleBeforeRemove">
-        <!--<Tab-pane label="test" name="test">-->
-            <!--<Tabs type="card" v-bind:animated="true">-->
-                <!--<Tab-pane label="标签2一">标签2一的内容</Tab-pane>-->
-                <!--<Tab-pane label="标签2二">标签2二的内容</Tab-pane>-->
-                <!--<Tab-pane label="标签2三">标签2三的内容</Tab-pane>-->
-            <!--</Tabs>-->
-        <!--</Tab-pane>-->
-        <!--<Tab-pane :label="label1" name="name1">-->
-            <!--<Table :columns="columns1" :data="data1"></Table>-->
-        <!--</Tab-pane>-->
-        <!--<Tab-pane label="标签二" name="name2">-->
-            <!--<Table :columns="columns1" :data="data1"></Table>-->
-        <!--</Tab-pane>-->
-        <!--<Tab-pane label="标签三" name="name3">-->
-            <!--<Table :columns="columns1" :data="data1"></Table>-->
-        <!--</Tab-pane>-->
-    <!--</Tabs>-->
-<!--</template>-->
-<!--<script>-->
-    <!--export default {-->
-        <!--data () {-->
-            <!--return {-->
-                <!--label1: (h) => {-->
-                    <!--return h('div', [-->
-                        <!--h('span', '标签一'),-->
-                        <!--h('Button', 'button')-->
-                    <!--]);-->
-                <!--},-->
-                <!--columns1: [-->
-                    <!--{-->
-                        <!--title: '姓名',-->
-                        <!--key: 'name'-->
-                    <!--},-->
-                    <!--{-->
-                        <!--title: '年龄',-->
-                        <!--key: 'age'-->
-                    <!--},-->
-                    <!--{-->
-                        <!--title: '地址',-->
-                        <!--key: 'address'-->
-                    <!--}-->
-                <!--],-->
-                <!--data1: [-->
-                    <!--{-->
-                        <!--name: '王小明',-->
-                        <!--age: 18,-->
-                        <!--address: '北京市朝阳区芍药居'-->
-                    <!--},-->
-                    <!--{-->
-                        <!--name: '张小刚',-->
-                        <!--age: 25,-->
-                        <!--address: '北京市海淀区西二旗'-->
-                    <!--},-->
-                    <!--{-->
-                        <!--name: '李小红',-->
-                        <!--age: 30,-->
-                        <!--address: '上海市浦东新区世纪大道'-->
-                    <!--},-->
-                    <!--{-->
-                        <!--name: '周小伟',-->
-                        <!--age: 26,-->
-                        <!--address: '深圳市南山区深南大道'-->
-                    <!--}-->
-                <!--]-->
-            <!--}-->
-        <!--}-->
-    <!--}-->
-<!--</script>-->
-
-
-<!-- <template>
-    <Tabs type="card" closable @on-tab-remove="handleTabRemove">
         <TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
         <TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
         <TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>
@@ -89,129 +17,23 @@
         methods: {
             handleTabRemove (name) {
                 this['tab' + name] = false;
-            }
-        }
-    }
-</script> -->
-
-<!--<template>-->
-    <!--<div>-->
-    <!--<Button type="ghost" @click="toFirst" size="small">to first</Button>-->
-    <!--<Button type="ghost" @click="toLast" size="small">to last</Button>-->
-    <!--<Tabs type="card" :animated="animated"  v-model="activeTab">-->
-        <!--<TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab"  :name="tab+''" closable>标签{{ tab }}</TabPane>-->
-        <!--<div slot="extra">-->
-            <!--<Button type="ghost" @click="handleTabsAdd" size="small">增加</Button>-->
-        <!--</div>-->
-    <!--</Tabs>-->
-    <!--</div>-->
-<!--</template>-->
-<!--<script>-->
-    <!--export default {-->
-        <!--data () {-->
-            <!--return {-->
-                <!--tabs: 2,-->
-                <!--activeTab:"2",-->
-                <!--animated:true-->
-            <!--}-->
-        <!--},-->
-        <!--methods: {-->
-            <!--handleTabsAdd () {-->
-                <!--this.tabs ++;-->
-                <!--this.activeTab = this.tabs + '';-->
-            <!--},-->
-            <!--toFirst () {-->
-                <!--this.activeTab = '1';-->
-            <!--},-->
-            <!--toLast () {-->
-                <!--this.activeTab = this.tabs+'';-->
-            <!--}-->
-        <!--}-->
-    <!--}-->
-<!--</script>-->
-
-<!--<template>-->
-    <!--<div>-->
-        <!--<Tabs type="card">-->
-            <!--<TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>-->
-        <!--</Tabs>-->
-        <!--<Button type="ghost" @click="handleTabsAdd" size="small">增加</Button>-->
-        <!--<Button type="ghost" @click="handleTabsMin" size="small">减少</Button>-->
-    <!--</div>-->
-<!--</template>-->
-<!--<script>-->
-    <!--export default {-->
-        <!--data () {-->
-            <!--return {-->
-                <!--tabs: 2-->
-            <!--}-->
-        <!--},-->
-        <!--methods: {-->
-            <!--handleTabsAdd () {-->
-                <!--this.tabs ++;-->
-            <!--},-->
-            <!--handleTabsMin () {-->
-                <!--this.tabs &#45;&#45;;-->
-            <!--}-->
-        <!--}-->
-    <!--}-->
-<!--</script>-->
-
-<template>
-    <div>
-        <i-input></i-input>
-        <Button type="ghost" @click="handleTabsAdd" size="small" slot="extra">增加</Button>
-
-        <hr style="margin: 10px 0;">
-        <Tabs type="card">
-            <TabPane v-for="tab in tabs" :key="tab" :label="'Tab' + tab">
-                <div>
-                    <h3>Some text...</h3>
-                    <i-button>Some focusable content...{{ tab }}</i-button>
-                </div>
-            </TabPane>
-        </Tabs>
-        <Tabs type="card">
-            <TabPane label="标签一">标签一的内容</TabPane>
-            <TabPane label="标签二" disabled>标签二的内容</TabPane>
-            <TabPane label="标签三">标签三的内容</TabPane>
-        </Tabs>
-        <tabs v-model="name" type="card" @on-click="handleClick">
-            <tab-pane name="a" label="标签一">
-                <div>1</div>
-            </tab-pane>
-            <tab-pane name="b" label="标签二">
-                <div>2</div>
-            </tab-pane>
-            <tab-pane name="c" label="标签三">
-                <div>3</div>
-            </tab-pane>
-            <tab-pane name="d" label="标签四">
-                <div>4</div>
-            </tab-pane>
-            <tab-pane name="e" label="标签五">
-                <div>5</div>
-            </tab-pane>
-        </tabs>
-    </div>
-</template>
-<script>
-    export default {
-        data () {
-            return {
-                tabs: 2,
-                name: 'b',
-            }
             },
-        methods: {
+            handleBeforeRemove (index) {
-            handleTabsAdd () {
+                console.log(index);
-                this.tabs ++;
+
+                return new Promise((resolve, reject) => {
+                    this.$Modal.confirm({
+                        title: 'Title',
+                        content: '<p>Content of dialog</p><p>Content of dialog</p>',
+                        onOk: () => {
+                            resolve();
                         },
-            handleClick (name) {
+                        onCancel: () => {
-                console.log(name);
+                            reject();
+                        }
+                    });
+                });
             }
         }
     }
 </script>
-
-

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "iview",
-    "version": "2.14.1",
+    "version": "3.0.1",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "iview",
-    "version": "3.0.0",
+    "version": "3.0.1",
     "title": "iView",
     "description": "A high quality UI components Library with Vue.js",
     "homepage": "http://www.iviewui.com",

src/components/color-picker/color-picker.vue

@@ -82,7 +82,12 @@
                                 @picker-color="handleSelectColor"></recommend-colors>
                         </div>
                         <div :class="[prefixCls + '-confirm']">
-                            <span :class="[prefixCls + '-confirm-color']">{{formatColor}}</span>
+                            <span :class="confirmColorClasses">
+                                <template v-if="editable">
+                                    <i-input :value="formatColor" size="small" @on-enter="handleEditColor" @on-blur="handleEditColor"></i-input>
+                                </template>
+                                <template v-else>{{formatColor}}</template>
+                            </span>
                             <i-button
                                 ref="clear"
                                 :tabindex="0"
@@ -118,6 +123,7 @@ import RecommendColors from './recommend-colors.vue';
 import Saturation from './saturation.vue';
 import Hue from './hue.vue';
 import Alpha from './alpha.vue';
+import iInput from '../input/input.vue';
 import Locale from '../../mixins/locale';
 import {oneOf} from '../../utils/assist';
 import Emitter from '../../mixins/emitter';
@@ -127,7 +133,7 @@ import {changeColor, toRGBAString} from './utils';
 export default {
     name: 'ColorPicker',
 
-    components: {Drop, RecommendColors, Saturation, Hue, Alpha},
+    components: {Drop, RecommendColors, Saturation, Hue, Alpha, iInput},
 
     directives: {clickOutside, TransferDom},
 
@@ -209,6 +215,10 @@ export default {
             type: String,
             default: undefined,
         },
+        editable: {
+            type: Boolean,
+            default: true
+        },
     },
 
     data() {
@@ -334,6 +344,14 @@ export default {
 
             return saturationColors.hex;
         },
+        confirmColorClasses () {
+            return [
+                `${this.prefixCls}-confirm-color`,
+                {
+                    [`${this.prefixCls}-confirm-color-editable`]: this.editable
+                }
+            ];
+        }
     },
 
     watch: {
@@ -419,6 +437,10 @@ export default {
             this.val = changeColor(color);
             this.$emit('on-active-change', this.formatColor);
         },
+        handleEditColor (event) {
+            const value = event.target.value;
+            this.handleSelectColor(value);
+        },
         handleFirstTab(event) {
             if (event.shiftKey) {
                 event.preventDefault();

src/components/date-picker/panel/Date/date-range.vue

@@ -260,8 +260,8 @@
             },
             setPanelDates(leftPanelDate){
                 this.leftPanelDate = leftPanelDate;
-                const rightPanelDate = new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, leftPanelDate.getDate());
+                const rightPanelDate = new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, 1);
-                this.rightPanelDate = this.splitPanels ? new Date(Math.max(this.dates[1], rightPanelDate)) : rightPanelDate;
+                this.rightPanelDate = this.splitPanels ? new Date(Math.max(this.dates[1].getTime(), rightPanelDate.getTime())) : rightPanelDate;
             },
             panelLabelConfig (direction) {
                 const locale = this.t('i.locale');
@@ -312,9 +312,18 @@
                 } else {
                     // keep the panels together
                     const otherPanel = panel === 'left' ? 'right' : 'left';
-                    const otherCurrent = new Date(this[`${otherPanel}PanelDate`]);
+                    const currentDate = this[`${otherPanel}PanelDate`];
-                    otherCurrent[`set${type}`](otherCurrent[`get${type}`]() + increment);
+                    const temp = new Date(currentDate);
-                    this[`${otherPanel}PanelDate`] = otherCurrent;
+
+                    if (type === 'Month') {
+                        const nextMonthLastDate = new Date(
+                            temp.getFullYear(), temp.getMonth() + increment + 1, 0
+                        ).getDate();
+                        temp.setDate(Math.min(nextMonthLastDate, temp.getDate()));
+                    }
+
+                    temp[`set${type}`](temp[`get${type}`]() + increment);
+                    this[`${otherPanel}PanelDate`] = temp;
                 }
             },
             showYearPicker (panel) {

src/components/date-picker/picker.vue

@@ -318,7 +318,9 @@
                 if (this.readonly) return;
                 this.isFocused = true;
                 if (e && e.type === 'focus') return; // just focus, don't open yet
+                if(!this.disabled){
                     this.visible = true;
+                }
             },
             handleBlur (e) {
                 if (this.internalFocus){

src/components/drawer/drawer.vue

@@ -0,0 +1,223 @@
+<template>
+    <div v-transfer-dom :data-transfer="transfer">
+        <transition name="fade">
+            <div :class="maskClasses" :style="maskStyle" v-show="visible" v-if="mask" @click="handleMask"></div>
+        </transition>
+        <div :class="wrapClasses" @click="handleWrapClick">
+            <transition :name="'move-' + placement">
+                <div :class="classes" :style="mainStyles" v-show="visible">
+                    <div :class="contentClasses" ref="content">
+                        <a class="ivu-drawer-close" v-if="closable" @click="close">
+                            <slot name="close">
+                                <Icon type="ios-close"></Icon>
+                            </slot>
+                        </a>
+                        <div :class="[prefixCls + '-header']" v-if="showHead"><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
+                        <div :class="[prefixCls + '-body']" :style="styles"><slot></slot></div>
+                    </div>
+                </div>
+            </transition>
+        </div>
+    </div>
+</template>
+<script>
+    import Icon from '../icon';
+    import { oneOf } from '../../utils/assist';
+    import TransferDom from '../../directives/transfer-dom';
+    import Emitter from '../../mixins/emitter';
+    import ScrollbarMixins from '../modal/mixins-scrollbar';
+
+    const prefixCls = 'ivu-drawer';
+
+    export default {
+        name: 'Drawer',
+        mixins: [ Emitter, ScrollbarMixins ],
+        components: { Icon },
+        directives: { TransferDom },
+        props: {
+            value: {
+                type: Boolean,
+                default: false
+            },
+            title: {
+                type: String
+            },
+            width: {
+                type: [Number, String],
+                default: 256
+            },
+            closable: {
+                type: Boolean,
+                default: true
+            },
+            maskClosable: {
+                type: Boolean,
+                default: true
+            },
+            mask: {
+                type: Boolean,
+                default: true
+            },
+            maskStyle: {
+                type: Object
+            },
+            styles: {
+                type: Object
+            },
+            scrollable: {
+                type: Boolean,
+                default: false
+            },
+            placement: {
+                validator (value) {
+                    return oneOf(value, ['left', 'right']);
+                },
+                default: 'right'
+            },
+            zIndex: {
+                type: Number,
+                default: 1000
+            },
+            transfer: {
+                type: Boolean,
+                default () {
+                    return !this.$IVIEW || this.$IVIEW.transfer === '' ? true : this.$IVIEW.transfer;
+                }
+            },
+            className: {
+                type: String
+            },
+            inner: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                visible: this.value,
+                wrapShow: false,
+                showHead: true,
+            };
+        },
+        computed: {
+            wrapClasses () {
+                return [
+                    `${prefixCls}-wrap`,
+                    {
+                        [`${prefixCls}-hidden`]: !this.wrapShow,
+                        [`${this.className}`]: !!this.className,
+                        [`${prefixCls}-no-mask`]: !this.mask,
+                        [`${prefixCls}-wrap-inner`]: this.inner
+                    }
+                ];
+            },
+            mainStyles () {
+                let style = {};
+
+                const width = parseInt(this.width);
+
+                const styleWidth = {
+                    width: width <= 100 ? `${width}%` : `${width}px`
+                };
+
+                Object.assign(style, styleWidth);
+
+                return style;
+            },
+            contentClasses () {
+                return [
+                    `${prefixCls}-content`,
+                    {
+                        [`${prefixCls}-content-no-mask`]: !this.mask
+                    }
+                ];
+            },
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    `${prefixCls}-${this.placement}`,
+                    {
+                        [`${prefixCls}-no-header`]: !this.showHead,
+                        [`${prefixCls}-inner`]: this.inner
+                    }
+                ];
+            },
+            maskClasses () {
+                return [
+                    `${prefixCls}-mask`,
+                    {
+                        [`${prefixCls}-mask-inner`]: this.inner
+                    }
+                ];
+            }
+        },
+        methods: {
+            close () {
+                this.visible = false;
+                this.$emit('input', false);
+                this.$emit('on-close');
+            },
+            handleMask () {
+                if (this.maskClosable && this.mask) {
+                    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.handleMask();
+            },
+        },
+        mounted () {
+            if (this.visible) {
+                this.wrapShow = true;
+            }
+
+            let showHead = true;
+
+            if (this.$slots.header === undefined && !this.title) {
+                showHead = false;
+            }
+
+            this.showHead = showHead;
+        },
+        beforeDestroy () {
+            this.removeScrollEffect();
+        },
+        watch: {
+            value (val) {
+                this.visible = val;
+            },
+            visible (val) {
+                if (val === 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();
+                    }
+                }
+                this.broadcast('Table', 'on-visible-change', val);
+                this.broadcast('Slider', 'on-visible-change', val);  // #2852
+                this.$emit('on-visible-change', val);
+            },
+            scrollable (val) {
+                if (!val) {
+                    this.addScrollEffect();
+                } else {
+                    this.removeScrollEffect();
+                }
+            },
+            title (val) {
+                if (this.$slots.header === undefined) {
+                    this.showHead = !!val;
+                }
+            }
+        }
+    };
+</script>

src/components/drawer/index.js

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

src/components/input-number/input-number.vue

@@ -3,13 +3,11 @@
         <div :class="handlerClasses">
             <a
                 @click="up"
-                @mousedown="preventDefault"
                 :class="upClasses">
                 <span :class="innerUpClasses" @click="preventDefault"></span>
             </a>
             <a
                 @click="down"
-                @mousedown="preventDefault"
                 :class="downClasses">
                 <span :class="innerDownClasses" @click="preventDefault"></span>
             </a>
@@ -82,6 +80,10 @@
                 type: Number,
                 default: 1
             },
+            activeChange:{
+                type:Boolean,
+                default:true
+            },
             value: {
                 type: Number,
                 default: 1
@@ -253,6 +255,15 @@
                 // 如果 step 是小数，且没有设置 precision，是有问题的
                 if (val && !isNaN(this.precision)) val = Number(Number(val).toFixed(this.precision));
                 
+                const {min, max} = this;
+                if (val!==null) {
+                    if (val > max) {
+                        val = max;
+                    } else if (val < min) {
+                        val = min;
+                    } 
+                }
+                
                 this.$nextTick(() => {
                     this.currentValue = val;
                     this.$emit('input', val);
@@ -278,42 +289,32 @@
                 }
             },
             change (event) {
+                
+                if (event.type == 'input' && !this.activeChange) return; 
                 let val = event.target.value.trim();
                 if (this.parser) {
                     val = this.parser(val);
                 }
                 
-                if (event.type == 'input' && val.match(/^\-?\.?$|\.$/)) return; // prevent fire early if decimal. If no more input the change event will fire later
-
-                const {min, max} = this;
                 const isEmptyString = val.length === 0;
-                val = Number(val);
-
                 if(isEmptyString){
                     this.setValue(null);
                     return;
                 }
-                if (event.type == 'change'){
+                if (event.type == 'input' && val.match(/^\-?\.?$|\.$/)) return; // prevent fire early if decimal. If no more input the change event will fire later 
-                    if (val === this.currentValue && val > min && val < max) return; // already fired change for input event
-                }
                 
-                if (!isNaN(val) && !isEmptyString) {
+                val = Number(val);
+
+                if (!isNaN(val)) {
                     this.currentValue = val;
-
-                    if (event.type == 'input' && val < min) return; // prevent fire early in case user is typing a bigger number. Change will handle this otherwise.
-                    if (val > max) {
-                        this.setValue(max);
-                    } else if (val < min) {
-                        this.setValue(min);
-                    } else {
                     this.setValue(val);
-                    }
                 } else {
                     event.target.value = this.currentValue;
                 }
             },
             changeVal (val) {
                 val = Number(val);
+                //this.setValue(val);
                 if (!isNaN(val)) {
                     const step = this.step;
 

src/components/menu/menu-item.vue

@@ -57,9 +57,11 @@
             handleClickItem (event, new_window = false) {
                 if (this.disabled) return;
 
-                if (new_window) {
+                if (new_window || this.target === '_blank') {
                     // 如果是 new_window，直接新开窗口就行，无需发送状态
                     this.handleCheckClick(event, new_window);
+                    let parentMenu = findComponentUpward(this, 'Menu');
+                    if (parentMenu) parentMenu.handleEmitSelectEvent(this.name);
                 } else {
                     let parent = findComponentUpward(this, 'Submenu');
 

src/components/menu/menu.vue

@@ -127,6 +127,9 @@
                         else item.opened = false;
                     });
                 }
+            },
+            handleEmitSelectEvent (name) {
+                this.$emit('on-select', name);
             }
         },
         mounted () {

src/components/modal/mixins-scrollbar.js

@@ -1,4 +1,4 @@
-// used for Modal & $Spin
+// used for Modal & $Spin & Drawer
 import { getScrollBarSize } from '../../utils/assist';
 export default {
     methods: {

src/components/modal/modal.vue

@@ -3,10 +3,10 @@
         <transition :name="transitionNames[1]">
             <div :class="maskClasses" v-show="visible" v-if="showMask" @click="handleMask"></div>
         </transition>
-        <div :class="wrapClasses" @click="handleWrapClick">
+        <div :class="wrapClasses" :style="wrapStyles" @click="handleWrapClick">
             <transition :name="transitionNames[0]" @after-leave="animationFinish">
                 <div :class="classes" :style="mainStyles" v-show="visible">
-                    <div :class="contentClasses" ref="content" :style="contentStyles">
+                    <div :class="contentClasses" ref="content" :style="contentStyles" @click="handleClickModal">
                         <a :class="[prefixCls + '-close']" v-if="closable" @click="close">
                             <slot name="close">
                                 <Icon type="ios-close"></Icon>
@@ -38,6 +38,9 @@
     import ScrollbarMixins from './mixins-scrollbar';
 
     import { on, off } from '../../utils/dom';
+    import { findComponentsDownward } from '../../utils/assist';
+
+    import { modalIndex, modalIncrease } from './q';
 
     const prefixCls = 'ivu-modal';
 
@@ -114,7 +117,11 @@
             draggable: {
                 type: Boolean,
                 default: false
-            }
+            },
+            zIndex: {
+                type: Number,
+                default: 1000
+            },
         },
         data () {
             return {
@@ -129,7 +136,8 @@
                     dragX: null,
                     dragY: null,
                     dragging: false
-                }
+                },
+                modalIndex: this.handleGetModalIndex(),  // for Esc close the top modal
             };
         },
         computed: {
@@ -143,6 +151,11 @@
                     }
                 ];
             },
+            wrapStyles () {
+                return {
+                    zIndex: this.modalIndex + this.zIndex
+                };
+            },
             maskClasses () {
                 return `${prefixCls}-mask`;
             },
@@ -247,7 +260,15 @@
             EscClose (e) {
                 if (this.visible && this.closable) {
                     if (e.keyCode === 27) {
-                        this.close();
+                        const $Modals = findComponentsDownward(this.$root, 'Modal').filter(item => item.$data.visible && item.$props.closable);
+
+                        const $TopModal = $Modals.sort((a, b) => {
+                            return a.$data.modalIndex < b.$data.modalIndex ? 1 : -1;
+                        })[0];
+
+                        setTimeout(() => {
+                            $TopModal.close();
+                        }, 0);
                     }
                 }
             },
@@ -298,6 +319,13 @@
                 this.dragData.dragging = false;
                 off(window, 'mousemove', this.handleMoveMove);
                 off(window, 'mouseup', this.handleMoveEnd);
+            },
+            handleGetModalIndex () {
+                modalIncrease();
+                return modalIndex;
+            },
+            handleClickModal () {
+                this.modalIndex = this.handleGetModalIndex();
             }
         },
         mounted () {
@@ -332,6 +360,8 @@
                         this.removeScrollEffect();
                     }, 300);
                 } else {
+                    this.modalIndex = this.handleGetModalIndex();
+
                     if (this.timer) clearTimeout(this.timer);
                     this.wrapShow = true;
                     if (!this.scrollable) {

src/components/modal/q.js

@@ -0,0 +1,7 @@
+let modalIndex = 0;
+
+function modalIncrease() {
+    modalIndex++;
+}
+
+export {modalIndex, modalIncrease};

src/components/split/split.vue

@@ -155,16 +155,23 @@
                 on(document, 'mousemove', this.handleMove);
                 on(document, 'mouseup', this.handleUp);
                 this.$emit('on-move-start');
+            },
+            computeOffset(){
+                this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
             }
         },
         watch: {
             value () {
-                this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
+                this.computeOffset();
             }
         },
         mounted () {
             this.$nextTick(() => {
-                this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
+                this.computeOffset();
+            });
+
+            window.addEventListener('resize', ()=>{
+                this.computeOffset();
             });
         }
     };

src/components/tabs/tabs.vue

@@ -91,7 +91,8 @@
             closable: {
                 type: Boolean,
                 default: false
-            }
+            },
+            beforeRemove: Function,
         },
         data () {
             return {
@@ -247,6 +248,21 @@
                 this.handleChange(index);
             },
             handleRemove (index) {
+                if (!this.beforeRemove) {
+                    return this.handleRemoveTab(index);
+                }
+
+                const before = this.beforeRemove(index);
+
+                if (before && before.then) {
+                    before.then(() => {
+                        this.handleRemoveTab(index);
+                    });
+                } else {
+                    this.handleRemoveTab(index);
+                }
+            },
+            handleRemoveTab (index) {
                 const tabs = this.getTabs();
                 const tab = tabs[index];
                 tab.$destroy();

src/index.js

@@ -19,6 +19,7 @@ import ColorPicker from './components/color-picker';
 import Content from './components/content';
 import DatePicker from './components/date-picker';
 import Divider from './components/divider';
+import Drawer from './components/drawer';
 import Dropdown from './components/dropdown';
 import Footer from './components/footer';
 import Form from './components/form';
@@ -85,6 +86,7 @@ const components = {
     Content: Content,
     DatePicker,
     Divider,
+    Drawer,
     Dropdown,
     DropdownItem: Dropdown.Item,
     DropdownMenu: Dropdown.Menu,

src/styles/components/color-picker.less

@@ -289,6 +289,10 @@
             position: absolute;
             top: 11px;
             left: 8px;
+
+            &-editable{
+                top: 8px;
+            }
         }
     }
 }

src/styles/components/drawer.less

@@ -0,0 +1,95 @@
+@drawer-prefix-cls: ~"@{css-prefix}drawer";
+
+.@{drawer-prefix-cls} {
+    width: auto;
+    height: 100%;
+    position: fixed;
+    top: 0;
+
+    &-inner{
+        position: absolute;
+    }
+
+    &-left{
+        left: 0;
+    }
+    &-right{
+        right: 0;
+    }
+
+    &-hidden {
+        display: none !important;
+    }
+
+    &-wrap {
+        position: fixed;
+        overflow: auto;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: @zindex-drawer;
+        -webkit-overflow-scrolling: touch;
+        outline: 0;
+
+        &-inner{
+            position: absolute;
+        }
+    }
+
+    &-wrap * {
+        box-sizing: border-box;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    }
+
+    &-mask {
+        .mask;
+        &-inner{
+            position: absolute;
+        }
+    }
+
+    &-content {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        background-color: #fff;
+        border: 0;
+        background-clip: padding-box;
+        box-shadow: 0 4px 12px rgba(0,0,0,.15);
+
+        &-no-mask{
+            pointer-events: auto;
+        }
+    }
+
+    &-header {
+        .content-header;
+    }
+
+    &-close {
+        z-index: 1;
+        .content-close(1px, 31px);
+    }
+
+    &-body {
+        width: 100%;
+        height: calc(~'100% - 51px');
+        padding: 16px;
+        font-size: 12px;
+        line-height: 1.5;
+        word-wrap: break-word;
+        position: absolute;
+        overflow: auto;
+    }
+
+    &-no-header &-body{
+        height: 100%;
+    }
+
+    &-no-mask{
+        pointer-events: none;
+    }
+}

src/styles/components/index.less

@@ -49,3 +49,4 @@
 @import "anchor";
 @import "time";
 @import "cell";
+@import "drawer";

src/styles/components/select-dropdown.less

@@ -17,6 +17,7 @@
     z-index: @zindex-select;
     &-transfer{
         z-index: @zindex-transfer;
+        width: auto;
     }
     &.@{transfer-no-max-height} {
         max-height: none;

src/styles/custom.less

@@ -166,6 +166,7 @@
 @zindex-back-top        : 10;
 @zindex-select          : 900;
 @zindex-modal           : 1000;
+@zindex-drawer          : 1000;
 @zindex-message         : 1010;
 @zindex-notification    : 1010;
 @zindex-tooltip         : 1060;