Merge branch '2.0' into pr004

.gitignore

@@ -17,7 +17,6 @@ npm-debug.log
 *.swo
 *.log
 examples/dist/
-dist/
 yarn-error.log
 test/unit/coverage
 .vscode

.travis.yml

@@ -1,7 +1,7 @@
 sudo: required
 language: node_js
 node_js:
-  - '6'
+  - '8'
 script:
   - 'npm run test'
 before_script:

README.md

@@ -41,8 +41,10 @@
 
 - [TalkingData](http://www.talkingdata.com/)
 - [Alibaba](http://www.alibaba.com/)
+- [Tencent](https://www.tencent.com/)
 - [JD](http://www.jd.com/)
 - [DiDi](http://www.didichuxing.com/)
+- [Meituan](http://www.meituan.com/)
 - [Sina](http://www.sina.com.cn/)
 - [Lenovo](https://www.lenovo.com.cn/)
 
@@ -119,13 +121,13 @@ If you want to contribute or have questions or bugs to report:
 [huanghong1125](https://github.com/huanghong1125) | ![](https://avatars3.githubusercontent.com/u/12794817?v=3&s=60) |
 
 
-## Links
+## Ecosystem Links
 
-- [TalkingData](https://github.com/TalkingData)
-- [Vue](https://github.com/vuejs/vue)
-- [Webpack](https://github.com/webpack/webpack)
-- [Ionicons](https://github.com/driftyco/ionicons)
-- [Ant Design](https://github.com/ant-design/ant-design)
+- [iView-Admin](https://github.com/iview/iview-admin)
+- [iView-Doc](https://github.com/iview/iview-doc)
+- [iView-Cli](https://github.com/iview/iview-cli)
+- [iView-Loader](https://github.com/iview/iview-loader)
+- [iView-Area](https://github.com/iview/iview-area)
 
 ## License
 [MIT](http://opensource.org/licenses/MIT)

build/webpack.dist.locale.config.js

@@ -1,6 +1,8 @@
 const path = require('path');
 const webpack = require('webpack');
 const entry = require('./locale');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
 process.env.NODE_ENV = 'production';
 
 module.exports = {
@@ -40,7 +42,7 @@ module.exports = {
                 NODE_ENV: '"production"'
             }
         }),
-        new webpack.optimize.UglifyJsPlugin({
+        new UglifyJsPlugin({
             parallel: true,
             sourceMap: true,
         })

build/webpack.dist.prod.config.js

@@ -3,6 +3,7 @@ const webpack = require('webpack');
 const merge = require('webpack-merge');
 const webpackBaseConfig = require('./webpack.base.config.js');
 const CompressionPlugin = require('compression-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
 process.env.NODE_ENV = 'production';
 
@@ -32,7 +33,7 @@ module.exports = merge(webpackBaseConfig, {
         new webpack.DefinePlugin({
             'process.env.NODE_ENV': '"production"'
         }),
-        new webpack.optimize.UglifyJsPlugin({
+        new UglifyJsPlugin({
             parallel: true,
             sourceMap: true,
         }),

dist/locale/cs-CZ.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/dist/locale/",o(o.s=2)}([function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){a||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var n,r=o(1);var a=((n=r)&&n.__esModule?n:{default:n}).default.prototype.$isServer},function(t,o){t.exports=e},function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,r=o(0);var a={i:{locale:"cs-CZ",select:{placeholder:"Vybrat",noMatch:"Nenalezeny žádné položky",loading:"Nahrávám"},table:{noDataText:"Žádná data",noFilteredDataText:"Nenalezeny žádné položky",confirmFilter:"Potvrdit",resetFilter:"Reset",clearFilter:"Vše"},datepicker:{selectDate:"Vybrat datum",selectTime:"Vybrat čas",startTime:"Začátek",endTime:"Konec",clear:"Vymazat",ok:"OK",datePanelLabel:"[mmmm] [yyyy]",month:"Měsíc",month1:"Leden",month2:"Únor",month3:"Březen",month4:"Duben",month5:"Květen",month6:"Červen",month7:"Červenec",month8:"Srpen",month9:"Září",month10:"Říjen",month11:"Listopad",month12:"Prosinec",year:"Rok",weekStartDay:"1",weeks:{sun:"Ne",mon:"Po",tue:"Út",wed:"St",thu:"Čt",fri:"Pá",sat:"So"},months:{m1:"Led",m2:"Úno",m3:"Bře",m4:"Dub",m5:"Kvě",m6:"Čer",m7:"Čnc",m8:"Srp",m9:"Zář",m10:"Říj",m11:"Lis",m12:"Pro"}},transfer:{titles:{source:"Zdroj",target:"Cíl"},filterPlaceholder:"Hledat",notFoundText:"Nenalezeno"},modal:{okText:"OK",cancelText:"Zrušit"},poptip:{okText:"OK",cancelText:"Zrušit"},page:{prev:"Následující",next:"Předchozí",total:"Celkem",item:"položka",items:"položek",prev5:"Předchozích 5 stránek",next5:"Následujících 5 stránek",page:"na stránku",goto:"Jít na",p:""},rate:{star:"hvězda",stars:"hvězdy"},tree:{emptyText:"Žádná data"}}};(0,((n=r)&&n.__esModule?n:{default:n}).default)(a),t.default=a}])});
+//# sourceMappingURL=cs-CZ.js.map

dist/locale/de-DE.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/dist/locale/",n(n.s=3)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){i||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var r,o=n(1);var i=((r=o)&&r.__esModule?r:{default:r}).default.prototype.$isServer},function(t,n){t.exports=e},,function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r,o=n(0);var i={i:{locale:"de-DE",select:{placeholder:"Auswählen",noMatch:"Keine Übereinstimmungen",loading:"Lädt"},table:{noDataText:"Keine Daten",noFilteredDataText:"Keine gefilterten Daten",confirmFilter:"Bestätigen",resetFilter:"Zurücksetzen",clearFilter:"Alle"},datepicker:{selectDate:"Datum auswählen",selectTime:"Zeit auswählen",startTime:"Beginn",endTime:"Ende",clear:"Leeren",ok:"OK",datePanelLabel:"[mmmm] [yyyy]",month:"Monat",month1:"Januar",month2:"Februar",month3:"März",month4:"April",month5:"Mai",month6:"Juni",month7:"Juli",month8:"August",month9:"September",month10:"Oktober",month11:"November",month12:"Dezember",year:"Jahr",weekStartDay:"1",weeks:{sun:"So",mon:"Mo",tue:"Di",wed:"Mi",thu:"Do",fri:"Fr",sat:"Sa"},months:{m1:"Jan",m2:"Feb",m3:"Mär",m4:"Apr",m5:"Mai",m6:"Jun",m7:"Jul",m8:"Aug",m9:"Sep",m10:"Okt",m11:"Nov",m12:"Dez"}},transfer:{titles:{source:"Quelle",target:"Ziel"},filterPlaceholder:"Suchen",notFoundText:"Nicht gefunden"},modal:{okText:"OK",cancelText:"Abbrechen"},poptip:{okText:"OK",cancelText:"Abbrechen"},page:{prev:"Vorherige Seite",next:"Nächste Seite",total:"Total",item:"Eintrag",items:"Einträge",prev5:"vorherigen fünf Seiten",next5:"nächste fünf Seiten",page:"/seite",goto:"Gehe zu",p:""},rate:{star:"Stern",stars:"Sterne"},tree:{emptyText:"Keine Daten"}}};(0,((r=o)&&r.__esModule?r:{default:r}).default)(i),t.default=i}])});
+//# sourceMappingURL=de-DE.js.map

dist/locale/el-GR.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/dist/locale/",o(o.s=4)}([function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){i||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var n,r=o(1);var i=((n=r)&&n.__esModule?n:{default:n}).default.prototype.$isServer},function(t,o){t.exports=e},,,function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,r=o(0);var i={i:{locale:"el-GR",select:{placeholder:"Επιλογή",noMatch:"Δεν βρέθηκαν αποτελέσματα",loading:"Φόρτωση"},table:{noDataText:"Χωρίς δεδομένα",noFilteredDataText:"Χωρίς φίλτρο",confirmFilter:"Επιβεβαίωση",resetFilter:"Επαναφορά",clearFilter:"Όλα"},datepicker:{selectDate:"Επιλέξτε ημέρα",selectTime:"Επιλέξτε ώρα",startTime:"Ωρα Έναρξης",endTime:"Ωρα Λήξης",clear:"Καθαρισμός",ok:"Εντάξει",datePanelLabel:"[mmmm] [yyyy]",month:"Μήνας",month1:"Ιανουάριος",month2:"Φεβρουάριος",month3:"Μάρτιος",month4:"Απρίλιος",month5:"Μάιος",month6:"Ιούνιος",month7:"Ιούλιος",month8:"Αύγουστος",month9:"Σεπτέμβριος",month10:"Οκτώβριος",month11:"Νοέμβριος",month12:"Δεκέμβριος",year:"Έτος",weekStartDay:"1",weeks:{sun:"Κυρ",mon:"Δευ",tue:"Τρι",wed:"Τετ",thu:"Πεμ",fri:"Παρ",sat:"Σαβ"},months:{m1:"Ιαν",m2:"Φεβ",m3:"Μαρ",m4:"Απρ",m5:"Μαϊ",m6:"Ιουν",m7:"Ιουλ",m8:"Αυγ",m9:"Σεπ",m10:"Οκτ",m11:"Νοε",m12:"Δεκ"}},transfer:{titles:{source:"Πηγή",target:"Στόχος"},filterPlaceholder:"Αναζήτηση",notFoundText:"Δεν βρέθηκαν αποτελέσματα"},modal:{okText:"Εντάξει",cancelText:"Ακύρωση"},poptip:{okText:"Εντάξει",cancelText:"Ακύρωση"},page:{prev:"Προηγούμενη Σελίδα",next:"Επόμενη Σελίδα",total:"Σύνολο",item:"Αντικείμενο",items:"Αντικείμενα",prev5:"Προηγούμενες 5 Σελίδες",next5:"Επόμενες 5 Σελίδες",page:"/Σελίδα",goto:"Μετάβαση σε",p:""},rate:{star:"Αστέρι",stars:"Αστέρια"},tree:{emptyText:"Χωρίς Δεδομένα"}}};(0,((n=r)&&n.__esModule?n:{default:n}).default)(i),t.default=i}])});
+//# sourceMappingURL=el-GR.js.map

dist/locale/en-US.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function o(r){if(t[r])return t[r].exports;var a=t[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,o),a.l=!0,a.exports}return o.m=e,o.c=t,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/dist/locale/",o(o.s=5)}([function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){n||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var r,a=o(1);var n=((r=a)&&r.__esModule?r:{default:r}).default.prototype.$isServer},function(t,o){t.exports=e},,,,function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r,a=o(0);var n={i:{locale:"en-US",select:{placeholder:"Select",noMatch:"No matching data",loading:"Loading"},table:{noDataText:"No Data",noFilteredDataText:"No filter data",confirmFilter:"Confirm",resetFilter:"Reset",clearFilter:"All"},datepicker:{selectDate:"Select date",selectTime:"Select time",startTime:"Start Time",endTime:"End Time",clear:"Clear",ok:"OK",datePanelLabel:"[mmmm] [yyyy]",month:"Month",month1:"January",month2:"February",month3:"March",month4:"April",month5:"May",month6:"June",month7:"July",month8:"August",month9:"September",month10:"October",month11:"November",month12:"December",year:"Year",weekStartDay:"0",weeks:{sun:"Sun",mon:"Mon",tue:"Tue",wed:"Wed",thu:"Thu",fri:"Fri",sat:"Sat"},months:{m1:"Jan",m2:"Feb",m3:"Mar",m4:"Apr",m5:"May",m6:"Jun",m7:"Jul",m8:"Aug",m9:"Sep",m10:"Oct",m11:"Nov",m12:"Dec"}},transfer:{titles:{source:"Source",target:"Target"},filterPlaceholder:"Search here",notFoundText:"Not Found"},modal:{okText:"OK",cancelText:"Cancel"},poptip:{okText:"OK",cancelText:"Cancel"},page:{prev:"Previous Page",next:"Next Page",total:"Total",item:"item",items:"items",prev5:"Previous 5 Pages",next5:"Next 5 Pages",page:"/page",goto:"Goto",p:""},rate:{star:"Star",stars:"Stars"},tree:{emptyText:"No Data"}}};(0,((r=a)&&r.__esModule?r:{default:r}).default)(n),t.default=n}])});
+//# sourceMappingURL=en-US.js.map

dist/locale/es-ES.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function o(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,o),n.l=!0,n.exports}return o.m=e,o.c=t,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/dist/locale/",o(o.s=6)}([function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){i||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var r,n=o(1);var i=((r=n)&&r.__esModule?r:{default:r}).default.prototype.$isServer},function(t,o){t.exports=e},,,,,function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r,n=o(0);var i={i:{locale:"es-ES",select:{placeholder:"Seleccionar",noMatch:"Sin coincidencias",loading:"Cargando"},table:{noDataText:"Sin Datos",noFilteredDataText:"Sin Datos para el filtro",confirmFilter:"Aceptar",resetFilter:"Quitar filtro",clearFilter:"Todos"},datepicker:{selectDate:"Seleccionar fecha",selectTime:"Seleccionar hora",startTime:"Hora de inicio",endTime:"Hora de fin",clear:"Limpiar",ok:"Aceptar",datePanelLabel:"[mmmm] [yyyy]",month:"Mes",month1:"Enero",month2:"Febrero",month3:"Marzo",month4:"Abril",month5:"Mayo",month6:"Junio",month7:"Julio",month8:"Augosto",month9:"Septiembre",month10:"Octubre",month11:"Noviembre",month12:"Diciembre",year:"Año",weekStartDay:"1",weeks:{sun:"Dom",mon:"Lun",tue:"Mar",wed:"Mié",thu:"Jue",fri:"Vie",sat:"Sáb"},months:{m1:"Ene",m2:"Feb",m3:"Mar",m4:"Abr",m5:"May",m6:"Jun",m7:"Jul",m8:"Ago",m9:"Sep",m10:"Oct",m11:"Nov",m12:"Dic"}},transfer:{titles:{source:"Origen",target:"Destino"},filterPlaceholder:"Buscar aquí",notFoundText:"Sin resultados"},modal:{okText:"Aceptar",cancelText:"Cancelar"},poptip:{okText:"Aceptar",cancelText:"Cancelar"},page:{prev:"Página Anterior",next:"Página Siguiente",total:"Total",item:"Elemento",items:"Elementos",prev5:"5 Páginas Anteriores",next5:"5 Páginas Siguientes",page:"/page",goto:"Ir a",p:""},rate:{star:"Estrella",stars:"Estrellas"},tree:{emptyText:"Sin Datos"}}};(0,((r=n)&&r.__esModule?r:{default:r}).default)(i),t.default=i}])});
+//# sourceMappingURL=es-ES.js.map

dist/locale/fa-IR.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function o(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,o),n.l=!0,n.exports}return o.m=e,o.c=t,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/dist/locale/",o(o.s=7)}([function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){a||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var r,n=o(1);var a=((r=n)&&r.__esModule?r:{default:r}).default.prototype.$isServer},function(t,o){t.exports=e},,,,,,function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r,n=o(0);var a={i:{locale:"fa-IR",select:{placeholder:"انتخاب‌ کنید",noMatch:"یافت نشد",loading:"در‌حال بارگذاری"},table:{noDataText:"اطلاعاتی موجود نیست",noFilteredDataText:"بدون اطلاعات فیلترشده",confirmFilter:"تایید",resetFilter:"بازنشانی",clearFilter:"همه"},datepicker:{selectDate:"انتخاب تاریخ",selectTime:"انتخاب زمان",startTime:"تاریخ شروع",endTime:"تاریخ پایان",clear:"پاکسازی",ok:"تایید",datePanelLabel:"[mmmm] [yyyy]",month:"ماه",month1:"January",month2:"February",month3:"March",month4:"April",month5:"May",month6:"June",month7:"July",month8:"August",month9:"September",month10:"October",month11:"November",month12:"December",year:"سال",weekStartDay:"0",weeks:{sun:"Sun",mon:"Mon",tue:"Tue",wed:"Wed",thu:"Thu",fri:"Fri",sat:"Sat"},months:{m1:"Jan",m2:"Feb",m3:"Mar",m4:"Apr",m5:"May",m6:"Jun",m7:"Jul",m8:"Aug",m9:"Sep",m10:"Oct",m11:"Nov",m12:"Dec"}},transfer:{titles:{source:"منبع",target:"هدف"},filterPlaceholder:"اینجا جستجو کنید",notFoundText:"پیدا نشد"},modal:{okText:"تایید",cancelText:"لغو"},poptip:{okText:"تایید",cancelText:"لغو"},page:{prev:"صفحه قبلی",next:"صفحه بعدی",total:"مجموع",item:"داده",items:"داده‌ها",prev5:"۵ صفحه قبلی",next5:"۵ صفحه بعدی",page:"/صفحه",goto:"برو‌به",p:""},rate:{star:"ستاره",stars:"ستاره‌ها"},tree:{emptyText:"بدون اطلاعات"}}};(0,((r=n)&&r.__esModule?r:{default:r}).default)(a),t.default=a}])});
+//# sourceMappingURL=fa-IR.js.map

dist/locale/fr-FR.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/dist/locale/",n(n.s=8)}({0:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){a||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var r,o=n(1);var a=((r=o)&&r.__esModule?r:{default:r}).default.prototype.$isServer},1:function(t,n){t.exports=e},8:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r,o=n(0);var a={i:{locale:"fr-FR",select:{placeholder:"Sélectionnez",noMatch:"Aucun résultat",loading:"Chargement"},table:{noDataText:"Aucune donnée",noFilteredDataText:"No filter data",confirmFilter:"Confirmez",resetFilter:"Reset",clearFilter:"Tout"},datepicker:{selectDate:"Sélectionnez une date",selectTime:"Sélectionnez une heure",startTime:"Heure de début",endTime:"Heure de fin",clear:"Annuler",ok:"OK",datePanelLabel:"[mmmm] [yyyy]",month:"Mois",month1:"Janvier",month2:"Février",month3:"Mars",month4:"Avril",month5:"Mai",month6:"Juin",month7:"Juillet",month8:"Août",month9:"Septembre",month10:"Octobre",month11:"Novembre",month12:"Decembre",year:"An",weekStartDay:"1",weeks:{sun:"Dim",mon:"Lun",tue:"Mar",wed:"Mer",thu:"Jeu",fri:"Ven",sat:"Sam"},months:{m1:"Jan",m2:"Fev",m3:"Mar",m4:"Avr",m5:"Mai",m6:"Jun",m7:"Jul",m8:"Aoû",m9:"Sep",m10:"Oct",m11:"Nov",m12:"Déc"}},transfer:{titles:{source:"Source",target:"Cible"},filterPlaceholder:"Recherche",notFoundText:"Pas de résultat"},modal:{okText:"OK",cancelText:"Annuler"},poptip:{okText:"OK",cancelText:"Annuler"},page:{prev:"Page Précédente",next:"Page Suivante",total:"Total",item:"élément",items:"éléments",prev5:"5 Pages en Avant",next5:"5 Pages en Arrière",page:"/page",goto:"Aller à",p:""},rate:{star:"Étoile",stars:"Étoiles"},tree:{emptyText:"Aucune donnée"}}};(0,((r=o)&&r.__esModule?r:{default:r}).default)(a),t.default=a}})});
+//# sourceMappingURL=fr-FR.js.map

dist/locale/hi-IN.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/dist/locale/",o(o.s=9)}({0:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){i||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var n,r=o(1);var i=((n=r)&&n.__esModule?n:{default:n}).default.prototype.$isServer},1:function(t,o){t.exports=e},9:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,r=o(0);var i={i:{locale:"hi-IN",select:{placeholder:"कृपया चुने|",noMatch:"कोई आकड़ा उपलब्ध नहीं है|",loading:"लोड हो रहा है"},table:{noDataText:"कोई आकड़ा उपलब्ध नहीं है",noFilteredDataText:"कोई आकड़ा उपलब्ध नहीं है",confirmFilter:"पुष्टि करें",resetFilter:"पुनः तैयार करना",clearFilter:"सब कुछ"},datepicker:{selectDate:"दिनांक चुनें",selectTime:"समय चुनें",startTime:"प्रारंभ समय",endTime:"समाप्ति समय",clear:"साफ़ करें",ok:"ठीक",datePanelLabel:"[mmmm] [yyyy]",month:"महीना",month1:"जनवरी",month2:"फरवरी",month3:"मार्च",month4:"अप्रैल",month5:"मई",month6:"जून",month7:"जुलाई",month8:"अगस्त",month9:"सितंबर",month10:"अक्टूबर",month11:"नवंबर",month12:"दिसंबर",year:"साल",weekStartDay:"0",weeks:{sun:"रविवार",mon:"सोमवार",tue:"मंगलवार",wed:"बुधवार",thu:"गुरुवार",fri:"शुक्रवार",sat:"शनिवार"},months:{m1:"जनवरी",m2:"फरवरी",m3:"मार्च",m4:"अप्रैल",m5:"मई",m6:"जून",m7:"जुलाई",m8:"अगस्त",m9:"सितंबर",m10:"अक्टूबर",m11:"नवंबर",m12:"दिसंबर"}},transfer:{titles:{source:"स्रोत",target:"लक्ष्य"},filterPlaceholder:"यहां खोजें",notFoundText:"कोई आकड़ा उपलब्ध नहीं है"},modal:{okText:"ठीक",cancelText:"निरस्त करना"},poptip:{okText:"ठीक",cancelText:"निरस्त करना"},page:{prev:"पिछला पेज",next:"अगला पेज",total:"समस्त",item:"एक चीज",items:"अनेक चीज",prev5:"पिछला 5 पेज",next5:"अगला 5 पेज",page:"/page",goto:"जाओ",p:""},rate:{star:"प्रसिद्ध",stars:"प्रसिद्ध"},tree:{emptyText:"कोई आकड़ा उपलब्ध नहीं है"}}};(0,((n=r)&&n.__esModule?n:{default:n}).default)(i),t.default=i}})});
+//# sourceMappingURL=hi-IN.js.map

dist/locale/id-ID.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function a(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,a),i.l=!0,i.exports}return a.m=e,a.c=t,a.d=function(e,t,n){a.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/dist/locale/",a(a.s=10)}({0:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){r||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var n,i=a(1);var r=((n=i)&&n.__esModule?n:{default:n}).default.prototype.$isServer},1:function(t,a){t.exports=e},10:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,i=a(0);var r={i:{locale:"id-ID",select:{placeholder:"Pilih",noMatch:"Tidak ada data yang cocok",loading:"Memuat"},table:{noDataText:"Tidak ada data",noFilteredDataText:"Tidak ada data filter",confirmFilter:"Konfirmasi",resetFilter:"Tata ulang",clearFilter:"Semua"},datepicker:{selectDate:"Pilih tanggal",selectTime:"Pilih waktu",startTime:"Waktu Mulai",endTime:"Waktu Selesai",clear:"Bersihkan",ok:"OK",datePanelLabel:"[mmmm] [yyyy]",month:"",month1:"Januari",month2:"Februari",month3:"Maret",month4:"April",month5:"Mei",month6:"Juni",month7:"Juli",month8:"Agustus",month9:"September",month10:"Oktober",month11:"November",month12:"Desember",year:"",weekStartDay:"1",weeks:{sun:"Min",mon:"Sen",tue:"Sel",wed:"Rab",thu:"Kam",fri:"Jum",sat:"Sab"},months:{m1:"Jan",m2:"Feb",m3:"Mar",m4:"Apr",m5:"Mei",m6:"Jun",m7:"Jul",m8:"Agu",m9:"Sep",m10:"Okt",m11:"Nov",m12:"Dec"}},transfer:{titles:{source:"Sumber",target:"Tujuan"},filterPlaceholder:"Cari disini",notFoundText:"Tidak ditemukan"},modal:{okText:"OK",cancelText:"Batal"},poptip:{okText:"OK",cancelText:"Batal"},page:{prev:"Halaman Sebelumnya",next:"Halaman Selanjutnya",total:"Total",item:"butir",items:"butir",prev5:"5 Halaman Sebelumnya",next5:"5 Halaman Selanjutnya",page:"/page",goto:"Pergi ke",p:""},rate:{star:"Star",stars:"Stars"},tree:{emptyText:"Tidak ada data"}}};(0,((n=i)&&n.__esModule?n:{default:n}).default)(r),t.default=r}})});
+//# sourceMappingURL=id-ID.js.map

dist/locale/it-IT.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,o),i.l=!0,i.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/dist/locale/",o(o.s=11)}({0:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){a||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var n,i=o(1);var a=((n=i)&&n.__esModule?n:{default:n}).default.prototype.$isServer},1:function(t,o){t.exports=e},11:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,i=o(0);var a={i:{locale:"it-IT",select:{placeholder:"Seleziona",noMatch:"Nessun Risultato",loading:"Caricamento"},table:{noDataText:"Nessun Risultato",noFilteredDataText:"Filtro senza risultati",confirmFilter:"Conferma",resetFilter:"Reset",clearFilter:"Tutto"},datepicker:{selectDate:"Seleziona data",selectTime:"Seleziona orario",startTime:"Orario inizio",endTime:"Orario fine",clear:"Annulla",ok:"OK",datePanelLabel:"[mmmm] [yyyy]",month:"Mese",month1:"Gennaio",month2:"Febbraio",month3:"Marzo",month4:"Aprile",month5:"Maggio",month6:"Giugno",month7:"Luglio",month8:"Agosto",month9:"Settembre",month10:"Ottobre",month11:"Novembre",month12:"Dicembre",year:"Anno",weekStartDay:"1",weeks:{sun:"Dom",mon:"Lun",tue:"Mar",wed:"Mer",thu:"Gio",fri:"Ven",sat:"Sab"},months:{m1:"Gen",m2:"Feb",m3:"Mar",m4:"Apr",m5:"Mag",m6:"Giu",m7:"Lug",m8:"Ago",m9:"Set",m10:"Ott",m11:"Nov",m12:"Dic"}},transfer:{titles:{source:"Origine",target:"Destinazione"},filterPlaceholder:"Cerca",notFoundText:"Nessun Risultato"},modal:{okText:"OK",cancelText:"Annulla"},poptip:{okText:"OK",cancelText:"Annulla"},page:{prev:"Pagina Precedente",next:"Pagina Successiva",total:"Totale",item:"elemento",items:"elementi",prev5:"5 Pagine Precedenti",next5:"5 Pagine Successive",page:"/pagina",goto:"Vai a",p:""},rate:{star:"Stella",stars:"Stelle"},tree:{emptyText:"Nessun Risultato"}}};(0,((n=i)&&n.__esModule?n:{default:n}).default)(a),t.default=a}})});
+//# sourceMappingURL=it-IT.js.map

dist/locale/ja-JP.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/dist/locale/",o(o.s=12)}({0:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){i||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var n,r=o(1);var i=((n=r)&&n.__esModule?n:{default:n}).default.prototype.$isServer},1:function(t,o){t.exports=e},12:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,r=o(0);var i={i:{locale:"ja-JP",select:{placeholder:"選んでください",noMatch:"マッチするデータなし",loading:"ロード中"},table:{noDataText:"データなし",noFilteredDataText:"スクリーニングしたデータなし",confirmFilter:"スクリーニング",resetFilter:"リセット",clearFilter:"全部"},datepicker:{selectDate:"日時を選んでください",selectTime:"時間を選んでください",startTime:"スタート時間",endTime:"終了時間",clear:"クリーア",ok:"確定",datePanelLabel:"[yyyy年] [m月]",month:"月",month1:"1 月",month2:"2 月",month3:"3 月",month4:"4 月",month5:"5 月",month6:"6 月",month7:"7 月",month8:"8 月",month9:"9 月",month10:"10 月",month11:"11 月",month12:"12 月",year:"年",weekStartDay:"0",weeks:{sun:"日",mon:"月",tue:"火",wed:"水",thu:"木",fri:"金",sat:"土"},months:{m1:"1月",m2:"2月",m3:"3月",m4:"4月",m5:"5月",m6:"6月",m7:"7月",m8:"8月",m9:"9月",m10:"10月",m11:"11月",m12:"12月"}},transfer:{titles:{source:"ソースリスト",target:"ターゲットリスト"},filterPlaceholder:"検索内容を入力ください",notFoundText:"内容が見つかってなかった"},modal:{okText:"確定",cancelText:"キャンセル"},poptip:{okText:"確定",cancelText:"キャンセル"},page:{prev:"前へ",next:"次へ",total:"全部",item:"件",items:"件",prev5:"前の５ページへ",next5:"次の５ページへ",page:"件/ページ",goto:"",p:"ページ目へ"},rate:{star:"点",stars:"点"},tree:{emptyText:"データなし"}}};(0,((n=r)&&n.__esModule?n:{default:n}).default)(i),t.default=i}})});
+//# sourceMappingURL=ja-JP.js.map

dist/locale/ko-KR.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/dist/locale/",o(o.s=13)}({0:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){i||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var n,r=o(1);var i=((n=r)&&n.__esModule?n:{default:n}).default.prototype.$isServer},1:function(t,o){t.exports=e},13:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,r=o(0);var i={i:{locale:"ko-KR",select:{placeholder:"선택",noMatch:"일치하는 데이터 없음",loading:"로딩"},table:{noDataText:"데이터 없음",noFilteredDataText:"필터된 데이터 없음",confirmFilter:"확인",resetFilter:"초기화",clearFilter:"전부"},datepicker:{selectDate:"날짜 선택",selectTime:"시간 선택",startTime:"시작 시간",endTime:"종료 시간",clear:"삭제",ok:"예",datePanelLabel:"[yyyy년] [m월]",month:"월",month1:"1월",month2:"2월",month3:"3월",month4:"4월",month5:"5월",month6:"6월",month7:"7월",month8:"8월",month9:"9월",month10:"10월",month11:"11월",month12:"12월",year:"년",weekStartDay:"0",weeks:{sun:"일",mon:"월",tue:"화",wed:"수",thu:"목",fri:"금",sat:"토"},months:{m1:"1월",m2:"2월",m3:"3월",m4:"4월",m5:"5월",m6:"6월",m7:"7월",m8:"8월",m9:"9월",m10:"10월",m11:"11월",m12:"12월"}},transfer:{titles:{source:"소스",target:"타겟"},filterPlaceholder:"여기서 찾기",notFoundText:"아무 것도 찾을 수 없음"},modal:{okText:"예",cancelText:"취소"},poptip:{okText:"예",cancelText:"취소"},page:{prev:"이전 페이지",next:"다음 페이지",total:"전체",item:"항목",items:"항목",prev5:"이전 5 페이지",next5:"다음 5 페이지",page:"/페이지",goto:"이동",p:""},rate:{star:"중요",stars:"중요"},tree:{emptyText:"데이터 없음"}}};(0,((n=r)&&n.__esModule?n:{default:n}).default)(i),t.default=i}})});
+//# sourceMappingURL=ko-KR.js.map

dist/locale/nl-NL.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/dist/locale/",n(n.s=14)}({0:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){a||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var o,r=n(1);var a=((o=r)&&o.__esModule?o:{default:o}).default.prototype.$isServer},1:function(t,n){t.exports=e},14:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o,r=n(0);var a={i:{locale:"nl-NL",select:{placeholder:"Selecteer",noMatch:"Geen overeenkomsten",loading:"Laden"},table:{noDataText:"Geen data",noFilteredDataText:"Geen gefilterde data",confirmFilter:"Bevestig",resetFilter:"Herstel",clearFilter:"Alles"},datepicker:{selectDate:"Selecteer datum",selectTime:"Selecteer tijd",startTime:"Begin tijd",endTime:"Eind tijd",clear:"Herstel",ok:"Ok",datePanelLabel:"[mm] [yyyy]",month:"Maand",month1:"Januari",month2:"Februari",month3:"Maart",month4:"April",month5:"Mei",month6:"Juni",month7:"Juli",month8:"Augustus",month9:"September",month10:"Oktober",month11:"November",month12:"December",year:"Jaar",weekStartDay:"1",weeks:{sun:"Zon",mon:"Maa",tue:"Din",wed:"Woe",thu:"Don",fri:"Vri",sat:"Zat"},months:{m1:"Jan",m2:"Feb",m3:"Mar",m4:"Apr",m5:"Mei",m6:"Jun",m7:"Jul",m8:"Aug",m9:"Sep",m10:"Okt",m11:"Nov",m12:"Dec"}},transfer:{titles:{source:"Bron",target:"Doel"},filterPlaceholder:"Zoeken",notFoundText:"Niet gevonden"},modal:{okText:"Ok",cancelText:"Annuleren"},poptip:{okText:"Ok",cancelText:"Annuleren"},page:{prev:"Vorige pagina",next:"Volgende pagina",total:"Totaal",item:"item",items:"items",prev5:"Vorige 5 pagina's",next5:"Volgende 5 pagina's",page:"/pagina",goto:"Ga",p:""},rate:{star:"Ster",stars:"Sterren"},tree:{emptyText:"Geen data"}}};(0,((o=r)&&o.__esModule?o:{default:o}).default)(a),t.default=a}})});
+//# sourceMappingURL=nl-NL.js.map

dist/locale/pt-BR.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function o(r){if(t[r])return t[r].exports;var a=t[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,o),a.l=!0,a.exports}return o.m=e,o.c=t,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/dist/locale/",o(o.s=15)}({0:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){n||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var r,a=o(1);var n=((r=a)&&r.__esModule?r:{default:r}).default.prototype.$isServer},1:function(t,o){t.exports=e},15:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r,a=o(0);var n={i:{locale:"pt-BR",select:{placeholder:"Selecionar",noMatch:"Não encontrado",loading:"Carregando"},table:{noDataText:"Sem dados",noFilteredDataText:"Sem dados filtrados",confirmFilter:"Confirmar",resetFilter:"Limpar",clearFilter:"Todos"},datepicker:{selectDate:"Selecione a data",selectTime:"Selecione a hora",startTime:"Hora inicial",endTime:"Hora final",clear:"Limpar",ok:"Confirmar",datePanelLabel:"[mmmm] de [yyyy]",month:"Mês",month1:"Janeiro",month2:"Fevereiro",month3:"Março",month4:"Abril",month5:"Maio",month6:"Junho",month7:"Julho",month8:"Agosto",month9:"Setembro",month10:"Outubro",month11:"Novembro",month12:"Dezembro",year:"Ano",weekStartDay:"0",weeks:{sun:"Dom",mon:"Seg",tue:"Ter",wed:"Qua",thu:"Qui",fri:"Sex",sat:"Sáb"},months:{m1:"Jan",m2:"Fev",m3:"Mar",m4:"Abr",m5:"Mai",m6:"Jun",m7:"Jul",m8:"Ago",m9:"Set",m10:"Out",m11:"Nov",m12:"Dez"}},transfer:{titles:{source:"Origem",target:"Destino"},filterPlaceholder:"Pesquise aqui",notFoundText:"Não encontrado"},modal:{okText:"Confirmar",cancelText:"Cancelar"},poptip:{okText:"Confirmar",cancelText:"Cancelar"},page:{prev:"Página Anterior",next:"Próxima Página",total:"Total",item:"item",items:"itens",prev5:"Voltar 5 Páginas",next5:"Avançar 5 Páginas",page:"/page",goto:"Ir para",p:""},rate:{star:"Estrela",stars:"Estrelas"},tree:{emptyText:"Sem dados"}}};(0,((r=a)&&r.__esModule?r:{default:r}).default)(n),t.default=n}})});
+//# sourceMappingURL=pt-BR.js.map

dist/locale/pt-PT.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function o(r){if(t[r])return t[r].exports;var a=t[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,o),a.l=!0,a.exports}return o.m=e,o.c=t,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/dist/locale/",o(o.s=16)}({0:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){n||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var r,a=o(1);var n=((r=a)&&r.__esModule?r:{default:r}).default.prototype.$isServer},1:function(t,o){t.exports=e},16:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r,a=o(0);var n={i:{locale:"pt-PT",select:{placeholder:"Selecionar",noMatch:"Não encontrado",loading:"A carregar"},table:{noDataText:"Sem dados",noFilteredDataText:"Sem dados filtrados",confirmFilter:"Confirmar",resetFilter:"Limpar",clearFilter:"Todos"},datepicker:{selectDate:"Selecione a data",selectTime:"Selecione a hora",startTime:"Hora inicial",endTime:"Hora final",clear:"Limpar",ok:"Confirmar",datePanelLabel:"[mmmm] de [yyyy]",month:"Mês",month1:"Janeiro",month2:"Fevereiro",month3:"Março",month4:"Abril",month5:"Maio",month6:"Junho",month7:"Julho",month8:"Agosto",month9:"Setembro",month10:"Outubro",month11:"Novembro",month12:"Dezembro",year:"Ano",weekStartDay:"1",weeks:{sun:"Dom",mon:"Seg",tue:"Ter",wed:"Qua",thu:"Qui",fri:"Sex",sat:"Sáb"},months:{m1:"Jan",m2:"Fev",m3:"Mar",m4:"Abr",m5:"Mai",m6:"Jun",m7:"Jul",m8:"Ago",m9:"Set",m10:"Out",m11:"Nov",m12:"Dez"}},transfer:{titles:{source:"Origem",target:"Destino"},filterPlaceholder:"Pesquise aqui",notFoundText:"Não encontrado"},modal:{okText:"Confirmar",cancelText:"Cancelar"},poptip:{okText:"Confirmar",cancelText:"Cancelar"},page:{prev:"Página anterior",next:"Próxima página",total:"Total",item:"item",items:"itens",prev5:"Voltar 5 páginas",next5:"Avançar 5 páginas",page:"/page",goto:"Ir para",p:""},rate:{star:"Estrela",stars:"Estrelas"},tree:{emptyText:"Sem dados"}}};(0,((r=a)&&r.__esModule?r:{default:r}).default)(n),t.default=n}})});
+//# sourceMappingURL=pt-PT.js.map

dist/locale/ro-RO.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var a=t[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/dist/locale/",n(n.s=17)}({0:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){i||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var r,a=n(1);var i=((r=a)&&r.__esModule?r:{default:r}).default.prototype.$isServer},1:function(t,n){t.exports=e},17:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r,a=n(0);var i={i:{locale:"ro-RO",select:{placeholder:"Selectează",noMatch:"Niciun rezultat",loading:"Încărcare"},table:{noDataText:"Fără date",noFilteredDataText:"Filtru fără rezultate",confirmFilter:"Confirmă",resetFilter:"Resetează",clearFilter:"Tot"},datepicker:{selectDate:"Selectează data",selectTime:"Selectează timpul",startTime:"Ora inițială",endTime:"Ora finală",clear:"Anulează",ok:"OK",datePanelLabel:"[mmmm] [yyyy]",month:"Lună",month1:"Ianuarie",month2:"Februarie",month3:"Martie",month4:"Aprilia",month5:"Mai",month6:"Iunie",month7:"Iulie",month8:"August",month9:"Septembrie",month10:"Octombrie",month11:"Noiembrie",month12:"Decembrie",year:"An",weekStartDay:"1",weeks:{sun:"Dum",mon:"Lun",tue:"Mar",wed:"Mie",thu:"Joi",fri:"Vin",sat:"Sâm"},months:{m1:"Ian",m2:"Feb",m3:"Mar",m4:"Apr",m5:"Mai",m6:"Iun",m7:"Iul",m8:"Aug",m9:"Sep",m10:"Oct",m11:"Noi",m12:"Dec"}},transfer:{titles:{source:"Origine",target:"Destinație"},filterPlaceholder:"Caută",notFoundText:"Niciun rezultat"},modal:{okText:"OK",cancelText:"Renunță"},poptip:{okText:"OK",cancelText:"Renunță"},page:{prev:"Pagina precedentă",next:"Pagina urmatoare",total:"Total",item:"element",items:"elemente",prev5:"5 Pagini precedente",next5:"Urmatoarele 5 Pagini",page:"/pagina",goto:"Du-te la",p:""},rate:{star:"Stea",stars:"Stele"},tree:{emptyText:"Fără date"}}};(0,((r=a)&&r.__esModule?r:{default:r}).default)(i),t.default=i}})});
+//# sourceMappingURL=ro-RO.js.map

dist/locale/ru-RU.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/dist/locale/",o(o.s=18)}({0:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){i||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var n,r=o(1);var i=((n=r)&&n.__esModule?n:{default:n}).default.prototype.$isServer},1:function(t,o){t.exports=e},18:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,r=o(0);var i={i:{locale:"ru-RU",select:{placeholder:"Выбрать",noMatch:"Нет соответствующих данных",loading:"Загрузка"},table:{noDataText:"Нет данных",noFilteredDataText:"Нет данных по фильтру",confirmFilter:"Подтвердить",resetFilter:"Сброс",clearFilter:"Все"},datepicker:{selectDate:"Выбрать дату",selectTime:"Выбрать время",startTime:"Начальное время",endTime:"Конечное время",clear:"Очистить",ok:"OK",datePanelLabel:"[Mmmm] [yyyy]",month:"",month1:"Январь",month2:"Февраль",month3:"Март",month4:"Апрель",month5:"Май",month6:"Июнь",month7:"Июль",month8:"Август",month9:"Сентябрь",month10:"Октябрь",month11:"Ноябрь",month12:"Декабрь",year:"",weekStartDay:"1",weeks:{sun:"Вс",mon:"Пн",tue:"Вт",wed:"Ср",thu:"Чт",fri:"Пт",sat:"Сб"},months:{m1:"Янв",m2:"Фев",m3:"Мар",m4:"Апр",m5:"Май",m6:"Июн",m7:"Июл",m8:"Авг",m9:"Сен",m10:"Окт",m11:"Ноя",m12:"Дек"}},transfer:{titles:{source:"Источник",target:"Цель"},filterPlaceholder:"Искать здесь",notFoundText:"Не Найдено"},modal:{okText:"OK",cancelText:"Отменить"},poptip:{okText:"OK",cancelText:"Отменить"},page:{prev:"Пред. страница",next:"След. страница",total:"Всего",item:"пункт",items:"пункты",prev5:"Пред. 5 страниц",next5:"След. 5 страниц",page:"/page",goto:"Идти к",p:""},rate:{star:"Звезда",stars:"Звезды"},tree:{emptyText:"Нет данных"}}};(0,((n=r)&&n.__esModule?n:{default:n}).default)(i),t.default=i}})});
+//# sourceMappingURL=ru-RU.js.map

dist/locale/sv-SE.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/dist/locale/",r(r.s=19)}({0:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){a||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var n,o=r(1);var a=((n=o)&&n.__esModule?n:{default:n}).default.prototype.$isServer},1:function(t,r){t.exports=e},19:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,o=r(0);var a={i:{locale:"sv-SE",select:{placeholder:"Välj",noMatch:"Ingen träff",loading:"Laddar"},table:{noDataText:"Ingen data",noFilteredDataText:"Ingen filter data",confirmFilter:"Bekräfta",resetFilter:"Återställ filter",clearFilter:"Rensa filter"},datepicker:{selectDate:"Välj datum",selectTime:"Välj tidpunkt",startTime:"Start tid",endTime:"Slut tid",clear:"Rensa",ok:"Ok",datePanelLabel:"[mmmm] [yyyy]",month:"Månad",month1:"Januari",month2:"Februari",month3:"Mars",month4:"April",month5:"Maj",month6:"Juni",month7:"Juli",month8:"Augusti",month9:"September",month10:"Oktober",month11:"November",month12:"December",year:"År",weekStartDay:"1",weeks:{sun:"Sön",mon:"Mån",tue:"Tis",wed:"Ons",thu:"Tor",fri:"Fre",sat:"Lör"},months:{m1:"Jan",m2:"Feb",m3:"Mar",m4:"Apr",m5:"Maj",m6:"Jun",m7:"Jul",m8:"Aug",m9:"Sep",m10:"Okt",m11:"Nov",m12:"Dec"}},transfer:{titles:{source:"Källa",target:"Mål"},filterPlaceholder:"Sök här",notFoundText:"Hittade inte"},modal:{okText:"Ok",cancelText:"Avbryt"},poptip:{okText:"Ok",cancelText:"Avbryt"},page:{prev:"Föregående sida",next:"Nästa sida",total:"Totalt",item:"objekt",items:"objekt",prev5:"Föregående 5 sidor",next5:"Nästa 5 sidor",page:"/page",goto:"Gå till",p:""},rate:{star:"Stjärna",stars:"Stjärnor"},tree:{emptyText:"Ingen data"}}};(0,((n=o)&&n.__esModule?n:{default:n}).default)(a),t.default=a}})});
+//# sourceMappingURL=sv-SE.js.map

dist/locale/th-TH.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/dist/locale/",o(o.s=20)}({0:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){i||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var n,r=o(1);var i=((n=r)&&n.__esModule?n:{default:n}).default.prototype.$isServer},1:function(t,o){t.exports=e},20:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,r=o(0);var i={i:{locale:"th-TH",select:{placeholder:"ตัวเลือก",noMatch:"ข้อมูลไม่ตรงกัน",loading:"ดาวน์โหลด"},table:{noDataText:"ไม่พบข้อมูล",noFilteredDataText:"ไม่พบตัวกรองข้อมูล",confirmFilter:"ยืนยัน",resetFilter:"รีเซ็ต",clearFilter:"ทั้งหมด"},datepicker:{selectDate:"เลือกวัน",selectTime:"เลือกเวลา",startTime:"เริ่มเวลา",endTime:"สิ้นสุดเวลา",clear:"ล้างข้อมูล",ok:"ตกลง",datePanelLabel:"[mmmm] [yyyy]",month:"เดือน",month1:"มกราตม",month2:"กุมภาพันธ์",month3:"มีนาคม",month4:"เมษายน",month5:"พฤษภาคม",month6:"มิถุนายน",month7:"กรกฎาคม",month8:"สิงหาคม",month9:"กันยายน",month10:"ตุลาคม",month11:"พฤศจิกายน",month12:"ธันวาคม",year:"ปี",weekStartDay:"0",weeks:{sun:"อาทิตย์",mon:"จันทร์",tue:"อังคาร",wed:"พุธ",thu:"พฤหัสบดี",fri:"ศุกร์",sat:"เสาร์"},months:{m1:"ม.ค.",m2:"ก.พ.",m3:"มี.ค.",m4:"เม.ย.",m5:"พ.ค.",m6:"มิ.ย.",m7:"ก.ค.",m8:"ส.ค.",m9:"ก.ย.",m10:"ต.ค.",m11:"พ.ย.",m12:"ธ.ค."}},transfer:{titles:{source:"แหล่งข้อมูล",target:"เป้าหมาย"},filterPlaceholder:"ค้นหาที่นี้",notFoundText:"ค้นหาไม่พบ"},modal:{okText:"ตกลง",cancelText:"ยกเลิก"},poptip:{okText:"ตกลง",cancelText:"ยกเลิก"},page:{prev:"หน้าก่อน",next:"หน้าถัดไป",total:"ทั้งหมด",item:"ไอเทม",items:"ไอเทม",prev5:"ก่อน 5 หน้า",next5:"ถัดไป 5 หน้า",page:"/หน้า",goto:"ไปยัง",p:"หน้า"},rate:{star:"ดวง",stars:"ดวง"},tree:{emptyText:"ไม่พบข้อมูล"}}};(0,((n=r)&&n.__esModule?n:{default:n}).default)(i),t.default=i}})});
+//# sourceMappingURL=th-TH.js.map

dist/locale/tr-TR.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function a(o){if(t[o])return t[o].exports;var n=t[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,a),n.l=!0,n.exports}return a.m=e,a.c=t,a.d=function(e,t,o){a.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/dist/locale/",a(a.s=21)}({0:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){r||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var o,n=a(1);var r=((o=n)&&o.__esModule?o:{default:o}).default.prototype.$isServer},1:function(t,a){t.exports=e},21:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o,n=a(0);var r={i:{locale:"tr-TR",select:{placeholder:"Seç",noMatch:"Eşleşen veri yok",loading:"yükleme"},table:{noDataText:"Veri Yok",noFilteredDataText:"Süzülen veri yok",confirmFilter:"Onayla",resetFilter:"Sıfırla",clearFilter:"Hepsi"},datepicker:{selectDate:"Tarih seç",selectTime:"Zaman seç",startTime:"Başlangıç",endTime:"Bitişe",clear:"Temizle",ok:"Tamam",datePanelLabel:"[mmmm] [yyyy]",month:"",month1:"Ocak",month2:"Şubat",month3:"Mart",month4:"Nisan",month5:"Mayıs",month6:"Haziran",month7:"Temmuz",month8:"Ağustos",month9:"Eylül",month10:"Ekim",month11:"Kasım",month12:"Aralık",year:"",weekStartDay:"0",weeks:{sun:"Paz",mon:"Pzt",tue:"Sal",wed:"Çar",thu:"Per",fri:"Cum",sat:"Cmt"},months:{m1:"Oca",m2:"Şub",m3:"Mar",m4:"Nis",m5:"May",m6:"Haz",m7:"Tem",m8:"Ağu",m9:"Eyl",m10:"Ekm",m11:"Kas",m12:"Ara"}},transfer:{titles:{source:"Kaynak",target:"Hedef"},filterPlaceholder:"Arama yapın",notFoundText:"Bulunamadı"},modal:{okText:"Tamam",cancelText:"İptal"},poptip:{okText:"Tamam",cancelText:"İptal"},page:{prev:"Önceki",next:"Sonraki",total:"Toplam",item:"öğe",items:"öğeler",prev5:"Önceki 5 Sayfa",next5:"Sonraki 5 Sayfa",page:"/sayfa",goto:"Git",p:""},rate:{star:"Yıldız",stars:"Yıldız"},tree:{emptyText:"Veri Yok"}}};(0,((o=n)&&o.__esModule?o:{default:o}).default)(r),t.default=r}})});
+//# sourceMappingURL=tr-TR.js.map

dist/locale/uk-UA.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/dist/locale/",o(o.s=22)}({0:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){i||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var n,r=o(1);var i=((n=r)&&n.__esModule?n:{default:n}).default.prototype.$isServer},1:function(t,o){t.exports=e},22:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,r=o(0);var i={i:{locale:"uk-UA",select:{placeholder:"Обрати",noMatch:"Немає відповідних даних",loading:"Завантаження"},table:{noDataText:"Немає даних",noFilteredDataText:"Немає даних по фільтру",confirmFilter:"Підтвердити",resetFilter:"Скинути",clearFilter:"Усе"},datepicker:{selectDate:"Обрати дату",selectTime:"Обрати час",startTime:"Початковий час",endTime:"Кінцевий час",clear:"Очистити",ok:"OK",datePanelLabel:"[Mmmm] [yyyy]",month:"",month1:"Січень",month2:"Лютий",month3:"Березень",month4:"Квітень",month5:"Травень",month6:"Червень",month7:"Липень",month8:"Серпень",month9:"Вересень",month10:"Жовтень",month11:"Листопад",month12:"Грудень",year:"",weekStartDay:"1",weeks:{sun:"Нд",mon:"Пн",tue:"Вт",wed:"Ср",thu:"Чт",fri:"Пт",sat:"Сб"},months:{m1:"Січ",m2:"Лют",m3:"Бер",m4:"Кві",m5:"Тра",m6:"Чер",m7:"Лип",m8:"Сер",m9:"Вер",m10:"Жов",m11:"Лис",m12:"Гру"}},transfer:{titles:{source:"Джерело",target:"Ціль"},filterPlaceholder:"Шукати тут",notFoundText:"Не знайдено"},modal:{okText:"OK",cancelText:"Скасувати"},poptip:{okText:"OK",cancelText:"Скасувати"},page:{prev:"Попер. сторінка",next:"Наст. сторінка",total:"Всього",item:"пункт",items:"пункти",prev5:"Попер. 5 сторінок",next5:"Наст. 5 сторінок",page:"/page",goto:"Йти до",p:""},rate:{star:"Зірка",stars:"Зірки"},tree:{emptyText:"Немає даних"}}};(0,((n=r)&&n.__esModule?n:{default:n}).default)(i),t.default=i}})});
+//# sourceMappingURL=uk-UA.js.map

dist/locale/vi-VN.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/dist/locale/",n(n.s=23)}({0:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){a||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var o,r=n(1);var a=((o=r)&&o.__esModule?o:{default:o}).default.prototype.$isServer},1:function(t,n){t.exports=e},23:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o,r=n(0);var a={i:{locale:"vi-VN",select:{placeholder:"Chọn",noMatch:"Không tìm thấy",loading:"Đang tải"},table:{noDataText:"Không có dữ liệu",noFilteredDataText:"Không có dữ liệu lọc",confirmFilter:"Xác nhận",resetFilter:"Làm lại",clearFilter:"Xóa hết"},datepicker:{selectDate:"Chọn ngày",selectTime:"Chọn giờ",startTime:"Ngày bắt đầu",endTime:"Ngày kết thúc",clear:"Xóa",ok:"Đồng ý",datePanelLabel:"[Tháng mm]/[yyyy]",month:"",month1:"Tháng 1",month2:"Tháng 2",month3:"Tháng 3",month4:"Tháng 4",month5:"Tháng 5",month6:"Tháng 6",month7:"Tháng 7",month8:"Tháng 8",month9:"Tháng 9",month10:"Tháng 10",month11:"Tháng 11",month12:"Tháng 12",year:"",weekStartDay:"1",weeks:{sun:"CN",mon:"T2",tue:"T3",wed:"T4",thu:"T5",fri:"T6",sat:"T7"},months:{m1:"Th.1",m2:"Th.2",m3:"Th.3",m4:"Th.4",m5:"Th.5",m6:"Th.6",m7:"Th.7",m8:"Th.8",m9:"Th.9",m10:"Th.10",m11:"Th.11",m12:"Th.12"}},transfer:{titles:{source:"Nguồn",target:"Đích"},filterPlaceholder:"Nhập từ khóa",notFoundText:"Không tìm thấy"},modal:{okText:"Đồng ý",cancelText:"Hủy bỏ"},poptip:{okText:"Đồng ý",cancelText:"Hủy bỏ"},page:{prev:"Trang trước",next:"Trang kế",total:"Tổng",item:"kết quả",items:"kết quả",prev5:"5 trang trước",next5:"5 trang kế",page:"/trang",goto:"Tới trang",p:""},rate:{star:"Sao",stars:"Sao"},tree:{emptyText:"Không có dữ liệu"}}};(0,((o=r)&&o.__esModule?o:{default:o}).default)(a),t.default=a}})});
+//# sourceMappingURL=vi-VN.js.map

dist/locale/zh-CN.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/dist/locale/",o(o.s=24)}({0:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){i||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var n,r=o(1);var i=((n=r)&&n.__esModule?n:{default:n}).default.prototype.$isServer},1:function(t,o){t.exports=e},24:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,r=o(0);var i={i:{locale:"zh-CN",select:{placeholder:"请选择",noMatch:"无匹配数据",loading:"加载中"},table:{noDataText:"暂无数据",noFilteredDataText:"暂无筛选结果",confirmFilter:"筛选",resetFilter:"重置",clearFilter:"全部"},datepicker:{selectDate:"选择日期",selectTime:"选择时间",startTime:"开始时间",endTime:"结束时间",clear:"清空",ok:"确定",datePanelLabel:"[yyyy年] [m月]",month:"月",month1:"1 月",month2:"2 月",month3:"3 月",month4:"4 月",month5:"5 月",month6:"6 月",month7:"7 月",month8:"8 月",month9:"9 月",month10:"10 月",month11:"11 月",month12:"12 月",year:"年",weekStartDay:"0",weeks:{sun:"日",mon:"一",tue:"二",wed:"三",thu:"四",fri:"五",sat:"六"},months:{m1:"1月",m2:"2月",m3:"3月",m4:"4月",m5:"5月",m6:"6月",m7:"7月",m8:"8月",m9:"9月",m10:"10月",m11:"11月",m12:"12月"}},transfer:{titles:{source:"源列表",target:"目的列表"},filterPlaceholder:"请输入搜索内容",notFoundText:"列表为空"},modal:{okText:"确定",cancelText:"取消"},poptip:{okText:"确定",cancelText:"取消"},page:{prev:"上一页",next:"下一页",total:"共",item:"条",items:"条",prev5:"向前 5 页",next5:"向后 5 页",page:"条/页",goto:"跳至",p:"页"},rate:{star:"星",stars:"星"},tree:{emptyText:"暂无数据"}}};(0,((n=r)&&n.__esModule?n:{default:n}).default)(i),t.default=i}})});
+//# sourceMappingURL=zh-CN.js.map

dist/locale/zh-TW.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("iview/locale",["vue"],t):"object"==typeof exports?exports["iview/locale"]=t(require("vue")):e["iview/locale"]=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/dist/locale/",o(o.s=25)}({0:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){i||void 0!==window.iview&&("langs"in iview||(iview.langs={}),iview.langs[e.i.locale]=e)};var n,r=o(1);var i=((n=r)&&n.__esModule?n:{default:n}).default.prototype.$isServer},1:function(t,o){t.exports=e},25:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,r=o(0);var i={i:{locale:"zh-TW",select:{placeholder:"請選擇",noMatch:"無匹配資料",loading:"加載中"},table:{noDataText:"暫無資料",noFilteredDataText:"暫無篩選結果",confirmFilter:"篩選",resetFilter:"重置",clearFilter:"全部"},datepicker:{selectDate:"選擇日期",selectTime:"選擇時間",startTime:"開始時間",endTime:"結束時間",clear:"清空",ok:"確定",datePanelLabel:"[yyyy年] [m月]",month:"月",month1:"1 月",month2:"2 月",month3:"3 月",month4:"4 月",month5:"5 月",month6:"6 月",month7:"7 月",month8:"8 月",month9:"9 月",month10:"10 月",month11:"11 月",month12:"12 月",year:"年",weekStartDay:"0",weeks:{sun:"日",mon:"一",tue:"二",wed:"三",thu:"四",fri:"五",sat:"六"},months:{m1:"1月",m2:"2月",m3:"3月",m4:"4月",m5:"5月",m6:"6月",m7:"7月",m8:"8月",m9:"9月",m10:"10月",m11:"11月",m12:"12月"}},transfer:{titles:{source:"來源列表",target:"目標列表"},filterPlaceholder:"請輸入搜尋內容",notFoundText:"列表爲空"},modal:{okText:"確定",cancelText:"取消"},poptip:{okText:"確定",cancelText:"取消"},page:{prev:"上一頁",next:"下一頁",total:"共",item:"條",items:"條",prev5:"向前 5 頁",next5:"向後 5 頁",page:"條/頁",goto:"跳至",p:"頁"},rate:{star:"星",stars:"星"},tree:{emptyText:"暫無資料"}}};(0,((n=r)&&n.__esModule?n:{default:n}).default)(i),t.default=i}})});
+//# sourceMappingURL=zh-TW.js.map

examples/app.vue

@@ -16,8 +16,10 @@ nav {
     <div class="container">
         <nav>
             <ul>
+                <li><router-link to="/split">Split</router-link></li>
                 <li><router-link to="/layout">Layout</router-link></li>
                 <li><router-link to="/affix">Affix</router-link></li>
+                <li><router-link to="/anchor">Anchor</router-link></li>
                 <li><router-link to="/grid">Grid</router-link></li>
                 <li><router-link to="/button">Button</router-link></li>
                 <li><router-link to="/input">Input</router-link></li>
@@ -63,6 +65,7 @@ nav {
                 <li><router-link to="/auto-complete">AutoComplete</router-link></li>
                 <li><router-link to="/scroll">Scroll</router-link></li>
                 <li><router-link to="/divider">Divider</router-link></li>
+                <li><router-link to="/time">Time</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>

examples/main.js

@@ -19,6 +19,10 @@ Vue.config.debug = true;
 const router = new VueRouter({
     esModule: false,
     routes: [
+        {
+            path: '/split',
+            component: (resolve) => require(['./routers/split.vue'], resolve)
+        },
         {
             path: '/layout',
             component: (resolve) => require(['./routers/layout.vue'], resolve)
@@ -27,6 +31,10 @@ const router = new VueRouter({
             path: '/affix',
             component: (resolve) => require(['./routers/affix.vue'], resolve)
         },
+        {
+            path: '/anchor',
+            component: (resolve) => require(['./routers/anchor.vue'], resolve)
+        },
         {
             path: '/grid',
             component: (resolve) => require(['./routers/grid.vue'], resolve)
@@ -206,6 +214,10 @@ const router = new VueRouter({
         {
             path: '/divider',
             component: (resolve) => require(['./routers/divider.vue'], resolve)
+        },
+        {
+            path: '/time',
+            component: (resolve) => require(['./routers/time.vue'], resolve)
         }
     ]
 });

examples/routers/anchor.vue

@@ -0,0 +1,109 @@
+<template>
+	<div class="anchor-wrapper">
+		<div class="link-wrapper">
+            <Button @click="changeCon">修改为Window</Button>
+            <Button @click="andLink">添加一个连接</Button>
+			<Anchor @on-change="handleChange" @on-select="handleSelect" :style="{right: '100px'}" :affix="true" :offset-top="30" :container="scrollCon" show-ink-in-fixed>
+				<AnchorLink v-if="(link - 1) % 30 === 0" v-for="link in 300" :key="`link${link}`" :href="`#title-${link}`" :title="`title-${link}`">
+                    <AnchorLink v-if="link === 61" href="#title-child-69" title="title-child-69"/>
+                </AnchorLink>
+                <AnchorLink v-if="showNewLink" href="#new-link" title="这是动态添加的连接"/>
+			</Anchor>
+		</div>
+		<div v-if="con === 'div'" ref="listWrapper" id="listWrapper" class="list-wrapper">
+            <div style="height: 100px;"></div>
+            <template v-for="i in 300">
+                <h1 v-if="(i - 1) % 30 === 0" :key="`h1${i}`" :id="`title-${i}`">{{ `title-${i}` }}</h1>
+                <h1 v-if="i === 69" :key="`h1${i}`" :id="`title-child-${i}`">{{ `title-${i}` }}</h1>
+                <h1 v-if="i === 75" :key="`h1${i}`" :id="`title-child-${i}`">{{ `title-${i}` }}</h1>
+                <p v-else :key="`p${i}`">{{ `content-row-index-${i}` }}</p>
+                <Collapse v-if="i === 3" v-model="value1" :key="`collapse-${i}`">
+                    <Panel name="1">
+                        史蒂夫·乔布斯
+                        <p v-for="index in 50" :key="`ppp-${index}`" slot="content">{{ index }}</p>
+                    </Panel>
+                    <Panel name="2">
+                        斯蒂夫·盖瑞·沃兹尼亚克
+                        <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
+                    </Panel>
+                    <Panel name="3">
+                        乔纳森·伊夫
+                        <p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
+                    </Panel>
+                </Collapse>
+            </template>
+            <!-- <h1 id="new-link">这是新添加的哦哦哦哦哦 哦 </h1>
+            <p v-for="i in 50" :key="`new-${i}`">这是信息司大是大非胜多负少的{{i}}</p> -->
+        </div>
+        <div v-else>
+            <template v-for="i in 300">
+                <h1 v-if="(i - 1) % 30 === 0" :key="`h1${i}`" :id="`title-${i}`">{{ `title-${i}` }}</h1>
+                <h1 v-if="i === 69" :key="`h1${i}`" :id="`title-child-${i}`">{{ `title-${i}` }}</h1>
+                <h1 v-if="i === 75" :key="`h1${i}`" :id="`title-child-${i}`">{{ `title-${i}` }}</h1>
+                <p v-else :key="`p${i}`">{{ `content-row-index-${i}` }}</p>
+                <Collapse v-if="i === 3" v-model="value1" :key="`collapse-${i}`">
+                    <Panel name="1">
+                        史蒂夫·乔布斯
+                        <p v-for="index in 50" :key="`ppp-${index}`" slot="content">{{ index }}</p>
+                    </Panel>
+                    <Panel name="2">
+                        斯蒂夫·盖瑞·沃兹尼亚克
+                        <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
+                    </Panel>
+                    <Panel name="3">
+                        乔纳森·伊夫
+                        <p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
+                    </Panel>
+                </Collapse>
+            </template>
+            <h1 id="new-link">这是新添加的哦哦哦哦哦 哦 </h1>
+            <p v-for="i in 50" :key="`new-${i}`">这是信息司大是大非胜多负少的{{i}}</p>
+        </div>
+
+	</div>
+</template>
+<script>
+export default {
+    data () {
+        return {
+            container: null,
+            value1: '1',
+            scrollCon: '',
+            con: 'div',
+            showNewLink: false
+        }
+    },
+    methods: {
+        changeCon () {
+            this.con = 'window';
+            this.scrollCon = undefined;
+        },
+        handleChange (newHref, oldHref) {
+            console.log(`${oldHref} => ${newHref}`)
+        },
+        handleSelect (href) {
+            console.log(`select ${href}`)
+        },
+        andLink () {
+            this.showNewLink = true;
+        }
+    },
+    mounted () {
+        this.scrollCon = this.$refs.listWrapper
+    }
+}
+</script>
+<style lang="less">
+.anchor-wrapper{
+	.link-wrapper{
+		position: absolute;
+        top: 200px;
+		right: 100px;
+		width: 200px;
+	}
+    .list-wrapper{
+        height: 600px;
+        overflow: auto;
+    }
+}
+</style>

examples/routers/collapse.vue

@@ -1,4 +1,5 @@
 <template>
+    <div>
         <Collapse accordion v-model="value3">
             <Panel name="1">
                 史蒂夫·乔布斯
@@ -25,14 +26,33 @@
                 <p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
             </Panel>
         </Collapse>
+
+        <br/>
+        <br/>
+        <Collapse v-model="value5">
+            <Panel name="21">
+                斯蒂夫·盖瑞·沃兹尼亚克
+                <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
+            </Panel>
+            <Panel name="22">
+                乔纳森·伊夫
+                <p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
+            </Panel>
+            <Panel name="23">
+                乔纳森·伊夫
+                <p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
+            </Panel>
+        </Collapse>
+    </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                value3: '1',
-                value4: '1-1'
-            }
-        }
+                value3: ['1', '2', '3'],
+                value4: '1-1',
+                value5: ['21', '22', '23']
+            };
         }
+    };
 </script>

examples/routers/color-picker.vue

@@ -2,30 +2,135 @@
     <div style="margin: 100px;">
         {{color}}
         <!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>-->
-        <color-picker @on-change="c1" @on-active-change="c2" v-model="color" placement="bottom-start" size="large"></color-picker>
-        <Date-picker transfer type="date" placeholder="选择日期" style="width: 200px"></Date-picker>
-        <color-picker :transfer="true" ref="xxx" v-model="color" format="rgb" alpha :recommend="true"></color-picker>
-        <color-picker v-model="color2" format="hsv" :alpha="true" :recommend="false"></color-picker>
+        <color-picker
+            v-model="color"
+            placement="bottom-start"
+            size="large"
+            @on-change="c1"
+            @on-active-change="c2"></color-picker>
+        <Input value="hello" style="display: inline-block" />
+        <Date-picker
+            transfer
+            type="date"
+            placeholder="选择日期"
+            style="width: 200px"></Date-picker>
+        <color-picker
+            ref="xxx"
+            :transfer="true"
+            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" size="small"></color-picker>
-        <Date-picker type="date" placeholder="选择日期" size="small" style="width: 200px"></Date-picker>
+        <color-picker
+            v-model="color"
+            placement="bottom-start"
+            size="small"></color-picker>
+        <Date-picker
+            type="date"
+            placeholder="选择日期"
+            size="small"
+            style="width: 200px"></Date-picker>
+        <color-picker
+            ref="yyy"
+            :colors="colors"
+            v-model="color"
+            transfer
+            format="rgb"
+            alpha></color-picker>
         <Button @click="setColor">set color</Button>
 
         <br><br><br><br>
-        <ColorPicker v-model="color7" :hue="false"></ColorPicker>
+        {{openState}}
+        <ColorPicker
+            v-model="color7"
+            :hue="false"
+            @on-open-change="onOpenChange"></ColorPicker>
+        <ColorPicker
+            v-model="color7"
+            :hue="false"
+            :hide-drop-down="hideDropDown"
+            transfer
+            @on-open-change="onOpenChange"></ColorPicker>
+
+        <br><br><br><br>
+        <ColorPicker
+            v-model="color7"
+            disabled></ColorPicker>
     </div>
 </template>
+
 <script>
 export default {
     props: {},
+
     data() {
         return {
             color: 'rgba(12,34,255,.85)',
             color2: '',
-                color7: '#19be6b'
+            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';
@@ -35,7 +140,19 @@
         },
         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/custem-menu-item.vue

@@ -0,0 +1,32 @@
+<template>
+  <Submenu :name="`${parentName}`">
+    <template slot="title">
+      <span>{{ parentItem.name }}</span>
+    </template>
+    <template v-for="item in children">
+      <custem-menu-item v-if="item.children && item.children.length !== 0" :key="`menu-${item.name}`" :parent-item="item"></custem-menu-item>
+      <menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`">{{ item.name }}</menu-item>
+    </template>
+  </Submenu>
+</template>
+<script>
+export default {
+  name: 'custemMenuItem',
+  props: {
+    parentItem: {
+      type: Object,
+      default: () => {}
+    },
+    theme: String,
+    iconSize: Number
+  },
+  computed: {
+    parentName () {
+      return this.parentItem.name
+    },
+    children () {
+      return this.parentItem.children
+    }
+  }
+}
+</script>

examples/routers/date.vue

@@ -249,14 +249,17 @@
 
 <template>
     <div style="width: 500px;margin: 100px;">
-        <Row>
-            <Col span="12">
-            <DatePicker type="date" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
-            </Col>
-            <Col span="12">
-            <DatePicker type="daterange" show-week-numbers placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
-            </Col>
-        </Row>
+        <p><input type="text"></p>
+
+        <DatePicker type="month" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
+        <DatePicker type="year" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
+
+        <DatePicker type="date" transfer show-week-numbers placeholder="Select date" style="width: 400px"></DatePicker>
+        <DatePicker type="datetime" show-week-numbers confirm placeholder="Select date" style="width: 400px"></DatePicker>
+
+        <DatePicker type="daterange" transfer show-week-numbers placeholder="Select date" style="width: 400px"></DatePicker>
+        <DatePicker type="datetimerange" transfer show-week-numbers placeholder="Select date" style="width: 400px"></DatePicker>
+        <Time-Picker :steps="[1, 1, 15]" :value="new Date()"></Time-Picker>
     </div>
 </template>
 <script>

examples/routers/dropdown.vue

@@ -1,7 +1,9 @@
 <template>
-    <Dropdown trigger="click" style="margin-left: 20px">
+    <div>
+        <div>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="right-start" >
                 <a href="javascript:void(0)">
-            click 触发
+                    right-start
                     <Icon type="arrow-down-b"></Icon>
                 </a>
                 <DropdownMenu slot="list">
@@ -12,6 +14,340 @@
                     <DropdownItem>北京烤鸭</DropdownItem>
                 </DropdownMenu>
             </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="right-end" >
+                <a href="javascript:void(0)">
+                    right-end
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            
+            <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-start" >
+                <a href="javascript:void(0)">
+                    bottom-start
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-end" >
+                <a href="javascript:void(0)">
+                    bottom-end
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            
+            <Dropdown trigger="click" style="margin-left: 20px" placement="top-start" >
+                <a href="javascript:void(0)">
+                    top-start
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="top-end" >
+                <a href="javascript:void(0)">
+                    top-end
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            
+            <Dropdown trigger="click" style="margin-left: 20px" placement="left-start" >
+                <a href="javascript:void(0)">
+                    left-start
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            
+            <Dropdown trigger="click" style="margin-left: 20px" placement="left-end" >
+                <a href="javascript:void(0)">
+                    left-end
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            
+            <Dropdown trigger="click" style="margin-left: 20px" placement="top" >
+                <a href="javascript:void(0)">
+                    top
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="bottom" >
+                <a href="javascript:void(0)">
+                    bottom
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="left" >
+                <a href="javascript:void(0)">
+                    left
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="right" >
+                <a href="javascript:void(0)">
+                    right
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+        </div>
+        <br><br><br><br>
+        <div style='width:600px;height:100px;overflow: auto;border:1px solid'>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="right-start" >
+                <a href="javascript:void(0)">
+                    right-start
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="right-end" >
+                <a href="javascript:void(0)">
+                    right-end
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            
+            <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-start" >
+                <a href="javascript:void(0)">
+                    bottom-start
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-end" >
+                <a href="javascript:void(0)">
+                    bottom-end
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            
+            <Dropdown trigger="click" style="margin-left: 20px" placement="top-start" >
+                <a href="javascript:void(0)">
+                    top-start
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="top-end" >
+                <a href="javascript:void(0)">
+                    top-end
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            
+            <Dropdown trigger="click" style="margin-left: 20px" placement="left-start" >
+                <a href="javascript:void(0)">
+                    left-start
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            
+            <Dropdown trigger="click" style="margin-left: 20px" placement="left-end" >
+                <a href="javascript:void(0)">
+                    left-end
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            
+            <Dropdown trigger="click" style="margin-left: 20px" placement="top" >
+                <a href="javascript:void(0)">
+                    top
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="bottom" >
+                <a href="javascript:void(0)">
+                    bottom
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="left" >
+                <a href="javascript:void(0)">
+                    left
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <Dropdown trigger="click" style="margin-left: 20px" placement="right" >
+                <a href="javascript:void(0)">
+                    right
+                    <Icon type="arrow-down-b"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+        </div>
+    </div>
 </template>
 <script>
     export default {

examples/routers/input-number.vue

@@ -41,13 +41,20 @@
 
 <template>
     <div>
-        <InputNumber :max="1000000000" :min="1" v-model="value1" :formatter="formatter" :parser="parser" @on-change="change" style="width: 200px"></InputNumber>
+        <!-- <InputNumber :max="1000000000" :min="1" v-model="value1" :formatter="formatter" :parser="parser" @on-change="change" style="width: 200px"></InputNumber>
         <InputNumber :max="1000000000" :min="1" v-model="value2" :formatter="formatter2" :parser="parser2" @on-change="change" style="width: 200px"></InputNumber>
         
         <InputNumber @on-change="change" style="width: 200px"></InputNumber>
         
         <InputNumber v-model="valueNull" @on-change="change" style="width: 200px"></InputNumber>
         <InputNumber v-model="valueNull" @on-change="change" :formatter="formatter" :parser="parser" style="width: 200px"></InputNumber>
+                
+        <InputNumber v-model="value2" @on-focus="focus" style="width: 200px"></InputNumber>
+
+        <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>
     </div>
 </template>
 <script>
@@ -56,6 +63,7 @@
             return {
                 value1: 1800000,
                 value2: 55,
+                value3: 100,
                 valueNull:null,
                 formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
                 parser: (value) => value.replace(/\$\s?|(,*)/g, ''),
@@ -64,6 +72,9 @@
             }
         },
         methods: {
+            focus (e) {
+                e.target.select()
+            },
             change (v) {
                 console.log(v)
             }

examples/routers/menu.vue

@@ -1,5 +1,6 @@
 <template>
-    <Menu active-name="1-2" :open-names="['1']" theme="dark">
+    <div>
+        <Menu ref="menu" active-name="1-2" :open-names="openNames" theme="dark" accordion @on-open-change="handleOpenChange">
             <Submenu name="1">
                 <template slot="title">
                     <Icon type="ios-analytics"></Icon>
@@ -26,21 +27,187 @@
                     <MenuItem name="3-1">Option 7</MenuItem>
                     <MenuItem name="3-2">Option 8</MenuItem>
                 </Submenu>
-        </Submenu>
                 <Submenu name="4">
+                    <template slot="title">Submenu</template>
+                    <MenuItem name="4-1">Option 7</MenuItem>
+                    <MenuItem name="4-2">Option 8</MenuItem>
+                </Submenu>
+            </Submenu>
+            <Submenu name="5">
                 <template slot="title">
                     <Icon type="ios-gear"></Icon>
                     Navigation Three
                 </template>
-            <MenuItem name="4-1">Option 9</MenuItem>
-            <MenuItem name="4-2">Option 10</MenuItem>
-            <MenuItem name="4-3">Option 11</MenuItem>
-            <MenuItem name="4-4">Option 12</MenuItem>
+                <MenuItem name="5-1">Option 9</MenuItem>
+                <MenuItem name="5-2">Option 10</MenuItem>
+                <MenuItem name="5-3">Option 11</MenuItem>
+                <MenuItem name="5-4">Option 12</MenuItem>
             </Submenu>
         </Menu>
+        <br/>
+        <Menu ref="menu2" theme="dark" accordion :open-names="openNames2" @on-open-change="handleOpenChange">
+            <template v-for="item in menuList">
+                <custem-menu-item v-if="item.children" :key="`menu-${item.name}`" :parent-item="item"></custem-menu-item>
+                <menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`">{{ item.name }}</menu-item>
+            </template>
+        </Menu>
+        <Button @click="addNewItem">添加菜单项</Button>
+        <Button @click="changeActive">修改激活项</Button>
+        <Button @click="setOpenNames">修改展开数组</Button>
+        <Menu mode="horizontal" theme="light" :active-name="activeName" @on-open-change="hc">
+            <MenuItem name="1">
+                <Icon type="ios-paper"></Icon>
+                内容管理
+            </MenuItem>
+            <MenuItem name="2">
+                <Icon type="ios-people"></Icon>
+                用户管理
+            </MenuItem>
+            <Submenu name="3">
+                <template slot="title">
+                    <Icon type="stats-bars"></Icon>
+                    统计分析
+                </template>
+                <MenuGroup title="使用">
+                    <MenuItem name="3-1">新增和启动</MenuItem>
+                    <MenuItem name="3-2">活跃分析</MenuItem>
+                    <MenuItem name="3-3">时段分析</MenuItem>
+                </MenuGroup>
+                <MenuGroup title="留存">
+                    <MenuItem name="3-4">用户留存</MenuItem>
+                    <MenuItem name="3-5">流失用户</MenuItem>
+                </MenuGroup>
+            </Submenu>
+            <Submenu name="4">
+                <template slot="title">
+                    <Icon type="stats-bars"></Icon>
+                    统计分析2
+                </template>
+                <MenuGroup title="使用2">
+                    <MenuItem name="4-1">新增和启动2</MenuItem>
+                    <MenuItem name="4-2">活跃分析2</MenuItem>
+                    <MenuItem name="4-3">时段分析2</MenuItem>
+                </MenuGroup>
+                <MenuGroup title="留存2">
+                    <MenuItem name="4-4">用户留存2</MenuItem>
+                    <MenuItem name="4-5">流失用户2</MenuItem>
+                </MenuGroup>
+            </Submenu>
+            <MenuItem name="5">
+                <Icon type="settings"></Icon>
+                综合设置
+            </MenuItem>
+        </Menu>
+    </div>
 </template>
 <script>
+import custemMenuItem from './custem-menu-item.vue'
     export default {
-
+        components: {
+            custemMenuItem
+        },
+        data () {
+            return {
+                openNames: ['1'],
+                openNames2: [],
+                menuList: [
+                    {
+                        name: '111',
+                        children: [
+                            {
+                                name: '111-111'
+                            },
+                            {
+                                name: '111-222'
+                            }
+                        ]
+                    },
+                    {
+                        name: '222',
+                        children: [
+                            {
+                                name: '222-111'
+                            },
+                            {
+                                name: '222-222',
+                                children: [
+                                    {
+                                        name: '222-222-111'
+                                    },
+                                    {
+                                        name: '222-222-222',
+                                        children: [
+                                            {
+                                                name: '222-222-222-111'
+                                            },
+                                            {
+                                                name: '222-222-222-222'
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                name: '222-333',
+                                children: [
+                                    {
+                                        name: '222-333-111',
+                                        children: [
+                                            {
+                                                name: '222-333-111-111'
+                                            },
+                                            {
+                                                name: '222-333-111-222'
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        name: '222-333-222',
+                                        children: [
+                                            {
+                                                name: '222-333-222-111'
+                                            },
+                                            {
+                                                name: '222-333-222-222'
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ],
+                activeName: '1'
+            };
+        },
+        methods: {
+            handleOpenChange (name) {
+                console.log(name)
+            },
+            setOpenNames () {
+                this.openNames = ['2', '3'];
+                this.openNames2 = ['222', '222-222', '222-222-222', '222-222-222-111']
+                this.$nextTick(() => {
+                    this.$refs.menu.updateOpened();
+                    this.$refs.menu2.updateOpened();
+                })
+            },
+            addNewItem () {
+                this.menuList[1].children[1].children.push({
+                    name: '222-222-333',
+                    children: [
+                        {
+                            name: '222-222-333-111'
+                        }
+                    ]
+                })
+            },
+            changeActive () {
+                this.activeName = String(Number(this.activeName) + 1)
+            },
+            hc (data) {
+                console.log(data);
+            }
+        }
     }
 </script>

examples/routers/poptip.vue

@@ -1,22 +1,87 @@
 <template>
-    <div style="margin: 200px;">
-        <Poptip title="提示标题" transfer>
-            <div slot="content" style="padding: 50px">
-                <Button>click me</Button>
-            </div>
-            <Button>click 激活</Button>
+    <div style="margin: 200px">
+        <Tabs value="name1">
+            <TabPane label="标签一" name="name1">
+                <!-- <div style="width: 200px;height:300px;overflow: auto;">
+                    <Poptip title="提示标题" content="标签一的内容" placement="left" transfer >
+                        <Button id="aaa">左边</Button>
                     </Poptip>
+                    <Poptip title="提示标题" content="标签一的内容" placement="right" transfer>
+                        <Button id="aaa">右边</Button>
+                    </Poptip>
+                    <Poptip title="提示标题" content="标签一的内容" placement="top" transfer>
+                        <Button id="aaa">上边</Button>
+                    </Poptip>
+                    <Poptip title="提示标题" content="标签一的内容" placement="bottom" transfer>
+                        <Button id="aaa">下边</Button>
+                    </Poptip>
+                </div> -->
+                <div>
+                    <Poptip title="提示标题" content="标签一的内容" transfer>
+                        <Button id="aaa">点击显示</Button>
+                        <div slot="content">
+                            <Button @click='loadData(15)'>15条数据</Button>
+                            <Button @click='loadData(10)'>10条数据</Button>
+                            <Button @click='loadData(5)'>5条数据</Button>
+                            <Button @click='loadData(3)'>3条数据</Button>
+                            <Table :columns='columns1' :data='data1'>
+                            </Table>
+                        </div>
+                    </Poptip>
+                </div>
+            </TabPane>
+            <TabPane label="标签二" name="name2">标签二的内容</TabPane>
+        </Tabs>
     </div>
 </template>
 <script>
     export default {
-        methods: {
-            ok () {
-                this.$Message.info('点击了确定');
+        data () {
+            return {
+                options: {
+
                 },
-            cancel () {
-                this.$Message.info('点击了取消');
+                columns1:[
+                    {
+                        title: 'Data1',
+                        key: 'data1',
+                        width: 100,
+                    },
+                    {
+                        title: 'Data2',
+                        key: 'data2',
+                        width: 100
+                    },
+                    {
+                        title: 'Data3',
+                        key: 'data3',
+                        width: 100
+                    },
+                    {
+                        title: 'Data4',
+                        key: 'data4',
+                        width: 100
                     }
+                ],
+                data1:[],
+            }
+        },
+        created(){
+            this.loadData(5);
+        },
+        methods:{
+            loadData(num){
+                let data = [];
+                for (let i=0; i<num; i++) {
+                    data.push({
+                        data1:Math.random()*1000000,
+                        data2:Math.random()*100000000,
+                        data3:Math.random()*10000000000,
+                        data4:Math.random()*1000000000000,
+                    })
+                }
+                this.data1 = data
+            },
         }
     }
 </script>

examples/routers/rate.vue

@@ -2,6 +2,8 @@
     <div>
         <Rate v-model="value"></Rate>
         <Rate allow-half v-model="valueHalf"></Rate>
+        <Rate clearable v-model="valueClear"></Rate>
+        <Rate clearable allow-half  v-model="valueClearHalf"></Rate>
         <!--<Rate show-text v-model="valueText"></Rate>-->
         <!--<Rate show-text allow-half v-model="valueCustomText">-->
             <!--<span style="color: #f5a623">{{ valueCustomText }}</span>-->
@@ -17,7 +19,9 @@
                 valueHalf: 2.5,
                 valueText: 3,
                 valueCustomText: 4.0,
-                valueDisabled: 2.4
+                valueDisabled: 2.4,
+                valueClear: 1,
+                valueClearHalf: 1.5,
             }
         }
     }

examples/routers/select.vue

@@ -2,11 +2,21 @@
     <!--<div>-->
         <!--{{model10}} - -->
         <!--{{model11}}-->
-<!--<Select v-model="model10" style="width:260px">-->
-<!--<Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>-->
+        <!--<Select -->
+            <!--v-model="model10" -->
+            <!--style="width:260px">-->
+            <!--<Option -->
+                <!--v-for="(item, index) in cityList" -->
+                <!--:value="item.value" -->
+                <!--:key="index">{{item.label}}</Option>-->
         <!--</Select>-->
-<!--<Select v-model="model11" style="width:260px">-->
-<!--<Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>-->
+        <!--<Select -->
+            <!--v-model="model11" -->
+            <!--style="width:260px">-->
+            <!--<Option -->
+                <!--v-for="(item, index) in cityList" -->
+                <!--:value="item.value" -->
+                <!--:key="index">{{item.label}}</Option>-->
         <!--</Select>-->
     <!--</div>-->
 <!--</template>-->
@@ -17,46 +27,50 @@
             <!--cityList: [],-->
             <!--model10: '',-->
             <!--model11: '',-->
-<!--model12: ''-->
-<!--}-->
+            <!--model12: '',-->
+        <!--};-->
     <!--},-->
     <!--mounted() {-->
         <!--setTimeout(() => {-->
             <!--this.cityList = [-->
                 <!--{-->
                     <!--value: 'beijing',-->
-<!--label: '北京市'-->
+                    <!--label: '北京市',-->
                 <!--},-->
                 <!--{-->
                     <!--value: 'shanghai',-->
-<!--label: '上海市'-->
+                    <!--label: '上海市',-->
                 <!--},-->
                 <!--{-->
                     <!--value: 'shenzhen',-->
-<!--label: '深圳市'-->
+                    <!--label: '深圳市',-->
                 <!--},-->
                 <!--{-->
                     <!--value: 'hangzhou',-->
-<!--label: '杭州市'-->
+                    <!--label: '杭州市',-->
                 <!--},-->
                 <!--{-->
                     <!--value: 'nanjing',-->
-<!--label: '南京市'-->
+                    <!--label: '南京市',-->
                 <!--},-->
                 <!--{-->
                     <!--value: 'chongqing',-->
-<!--label: '重庆市'-->
-<!--}-->
+                    <!--label: '重庆市',-->
+                <!--},-->
             <!--];-->
         <!--}, 1000);-->
-<!--}-->
-<!--}-->
+    <!--},-->
+<!--};-->
 <!--</script>-->
 
 <!--<template>-->
     <!--<div>-->
         <!--<Select v-model="value">-->
-<!--<Option v-for="item in list" :value="item.value" :label="item.label" :key="item.value"></Option>-->
+            <!--<Option -->
+                <!--v-for="item in list" -->
+                <!--:value="item.value" -->
+                <!--:label="item.label" -->
+                <!--:key="item.value"></Option>-->
         <!--</Select>-->
         <!--<Button @click="setList">set list</Button>-->
     <!--</div>-->
@@ -66,50 +80,58 @@
     <!--data() {-->
         <!--return {-->
             <!--value: '',-->
-<!--list: []-->
-<!--}-->
+            <!--list: [],-->
+        <!--};-->
     <!--},-->
     <!--methods: {-->
         <!--setList() {-->
-<!--let list = [];-->
+            <!--const list = [];-->
             <!--for (let i = 0; i < 400; i++) {-->
                 <!--list.push({-->
-<!--value: 'value' + i,-->
-<!--label: 'label' + i-->
+                    <!--value: `value${i}`,-->
+                    <!--label: `label${i}`,-->
                 <!--});-->
             <!--}-->
             <!--this.list = list;-->
-<!--}-->
-<!--}-->
-<!--}-->
+        <!--},-->
+    <!--},-->
+<!--};-->
 <!--</script>-->
 
 <!--<template>-->
     <!--<div style="width: 400px;margin: 50px;">-->
         <!--<div>data: {{model13}}</div>-->
         <!--<Row>-->
-<!--<Col span="12" style="padding-right:10px">-->
+            <!--<Col -->
+                <!--span="12" -->
+                <!--style="padding-right:10px">-->
             <!--<Select-->
+                <!--v-model="model13"-->
+                <!--:remote-method="remoteMethod1"-->
+                <!--:loading="loading1"-->
                 <!--size="small"-->
                 <!--placeholder="提示提示"-->
-<!--v-model="model13"-->
                 <!--filterable-->
                 <!--remote-->
-<!--transfer-->
-<!--:remote-method="remoteMethod1"-->
-<!--:loading="loading1">-->
-<!--<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>-->
+                <!--transfer>-->
+                <!--<Option -->
+                    <!--v-for="(option, index) in options1" -->
+                    <!--:value="option.value" -->
+                    <!--:key="index">{{option.label}}</Option>-->
             <!--</Select>-->
 <!--</Col>-->
             <!--<Col span="12">-->
             <!--<Select-->
                 <!--v-model="model14"-->
+                <!--:remote-method="remoteMethod2"-->
+                <!--:loading="loading2"-->
                 <!--multiple-->
                 <!--filterable-->
-<!--remote-->
-<!--:remote-method="remoteMethod2"-->
-<!--:loading="loading2">-->
-<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->
+                <!--remote>-->
+                <!--<Option -->
+                    <!--v-for="(option, index) in options2" -->
+                    <!--:value="option.value" -->
+                    <!--:key="index">{{option.label}}</Option>-->
             <!--</Select>-->
 <!--</Col>-->
         <!--</Row>-->
@@ -125,8 +147,59 @@
             <!--model14: [],-->
             <!--loading2: false,-->
             <!--options2: [],-->
-<!--list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming']-->
-<!--}-->
+            <!--list: [-->
+                <!--'Alabama',-->
+                <!--'Alaska',-->
+                <!--'Arizona',-->
+                <!--'Arkansas',-->
+                <!--'California',-->
+                <!--'Colorado',-->
+                <!--'Connecticut',-->
+                <!--'Delaware',-->
+                <!--'Florida',-->
+                <!--'Georgia',-->
+                <!--'Hawaii',-->
+                <!--'Idaho',-->
+                <!--'Illinois',-->
+                <!--'Indiana',-->
+                <!--'Iowa',-->
+                <!--'Kansas',-->
+                <!--'Kentucky',-->
+                <!--'Louisiana',-->
+                <!--'Maine',-->
+                <!--'Maryland',-->
+                <!--'Massachusetts',-->
+                <!--'Michigan',-->
+                <!--'Minnesota',-->
+                <!--'Mississippi',-->
+                <!--'Missouri',-->
+                <!--'Montana',-->
+                <!--'Nebraska',-->
+                <!--'Nevada',-->
+                <!--'New hampshire',-->
+                <!--'New jersey',-->
+                <!--'New mexico',-->
+                <!--'New york',-->
+                <!--'North carolina',-->
+                <!--'North dakota',-->
+                <!--'Ohio',-->
+                <!--'Oklahoma',-->
+                <!--'Oregon',-->
+                <!--'Pennsylvania',-->
+                <!--'Rhode island',-->
+                <!--'South carolina',-->
+                <!--'South dakota',-->
+                <!--'Tennessee',-->
+                <!--'Texas',-->
+                <!--'Utah',-->
+                <!--'Vermont',-->
+                <!--'Virginia',-->
+                <!--'Washington',-->
+                <!--'West virginia',-->
+                <!--'Wisconsin',-->
+                <!--'Wyoming',-->
+            <!--],-->
+        <!--};-->
     <!--},-->
     <!--methods: {-->
         <!--remoteMethod1(query) {-->
@@ -134,13 +207,11 @@
                 <!--this.loading1 = true;-->
                 <!--setTimeout(() => {-->
                     <!--this.loading1 = false;-->
-<!--const list = this.list.map(item => {-->
-<!--return {-->
+                    <!--const list = this.list.map((item) => ({-->
                         <!--value: item,-->
-<!--label: item-->
-<!--};-->
-<!--});-->
-<!--this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
+                        <!--label: item,-->
+                    <!--}));-->
+                    <!--this.options1 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
                 <!--}, 200);-->
             <!--} else {-->
                 <!--this.options1 = [];-->
@@ -151,32 +222,33 @@
                 <!--this.loading2 = true;-->
                 <!--setTimeout(() => {-->
                     <!--this.loading2 = false;-->
-<!--const list = this.list.map(item => {-->
-<!--return {-->
+                    <!--const list = this.list.map((item) => ({-->
                         <!--value: item,-->
-<!--label: item-->
-<!--};-->
-<!--});-->
-<!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
+                        <!--label: item,-->
+                    <!--}));-->
+                    <!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
                 <!--}, 200);-->
             <!--} else {-->
                 <!--this.options2 = [];-->
             <!--}-->
-<!--}-->
-<!--}-->
-<!--}-->
+        <!--},-->
+    <!--},-->
+<!--};-->
 <!--</script>-->
 
 <!--<template>-->
     <!--<div style="width: 300px">-->
         <!--<Select-->
             <!--v-model="model14"-->
+            <!--:remote-method="remoteMethod2"-->
+            <!--:loading="loading2"-->
             <!--multiple-->
             <!--filterable-->
-<!--remote-->
-<!--:remote-method="remoteMethod2"-->
-<!--:loading="loading2">-->
-<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->
+            <!--remote>-->
+            <!--<Option -->
+                <!--v-for="(option, index) in options2" -->
+                <!--:value="option.value" -->
+                <!--:key="index">{{option.label}}</Option>-->
         <!--</Select>-->
     <!--</div>-->
 <!--</template>-->
@@ -190,8 +262,8 @@
             <!--model14: [],-->
             <!--loading2: false,-->
             <!--options2: [],-->
-<!--list: ['a', 'b', 'c']-->
-<!--}-->
+            <!--list: ['a', 'b', 'c'],-->
+        <!--};-->
     <!--},-->
     <!--methods: {-->
         <!--remoteMethod2(query) {-->
@@ -199,44 +271,50 @@
                 <!--this.loading2 = true;-->
                 <!--setTimeout(() => {-->
                     <!--this.loading2 = false;-->
-<!--const list = this.list.map(item => {-->
-<!--return {-->
+                    <!--const list = this.list.map((item) => ({-->
                         <!--value: item,-->
-<!--label: item-->
-<!--};-->
-<!--});-->
-<!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
+                        <!--label: item,-->
+                    <!--}));-->
+                    <!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
                 <!--}, 200);-->
             <!--} else {-->
                 <!--this.options2 = [];-->
             <!--}-->
-<!--}-->
-<!--}-->
-<!--}-->
+        <!--},-->
+    <!--},-->
+<!--};-->
 <!--</script>-->
 
 
 <!--<template>-->
     <!--<Row>-->
-<!--<Col span="12" style="padding-right:10px">-->
+        <!--<Col -->
+            <!--span="12" -->
+            <!--style="padding-right:10px">-->
         <!--<Select-->
             <!--v-model="model13"-->
-<!--filterable-->
-<!--remote-->
             <!--:remote-method="remoteMethod1"-->
-<!--:loading="loading1">-->
-<!--<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>-->
+            <!--:loading="loading1"-->
+            <!--filterable-->
+            <!--remote>-->
+            <!--<Option -->
+                <!--v-for="(option, index) in options1" -->
+                <!--:value="option.value" -->
+                <!--:key="index">{{option.label}}</Option>-->
         <!--</Select>-->
 <!--</Col>-->
         <!--<Col span="12">-->
         <!--<Select-->
             <!--v-model="model14"-->
+            <!--:remote-method="remoteMethod2"-->
+            <!--:loading="loading2"-->
             <!--multiple-->
             <!--filterable-->
-<!--remote-->
-<!--:remote-method="remoteMethod2"-->
-<!--:loading="loading2">-->
-<!--<Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>-->
+            <!--remote>-->
+            <!--<Option -->
+                <!--v-for="(option, index) in options2" -->
+                <!--:value="option.value" -->
+                <!--:key="index">{{option.label}}</Option>-->
         <!--</Select>-->
 <!--</Col>-->
     <!--</Row>-->
@@ -251,8 +329,59 @@
             <!--model14: [],-->
             <!--loading2: false,-->
             <!--options2: [],-->
-<!--list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming']-->
-<!--}-->
+            <!--list: [-->
+                <!--'Alabama',-->
+                <!--'Alaska',-->
+                <!--'Arizona',-->
+                <!--'Arkansas',-->
+                <!--'California',-->
+                <!--'Colorado',-->
+                <!--'Connecticut',-->
+                <!--'Delaware',-->
+                <!--'Florida',-->
+                <!--'Georgia',-->
+                <!--'Hawaii',-->
+                <!--'Idaho',-->
+                <!--'Illinois',-->
+                <!--'Indiana',-->
+                <!--'Iowa',-->
+                <!--'Kansas',-->
+                <!--'Kentucky',-->
+                <!--'Louisiana',-->
+                <!--'Maine',-->
+                <!--'Maryland',-->
+                <!--'Massachusetts',-->
+                <!--'Michigan',-->
+                <!--'Minnesota',-->
+                <!--'Mississippi',-->
+                <!--'Missouri',-->
+                <!--'Montana',-->
+                <!--'Nebraska',-->
+                <!--'Nevada',-->
+                <!--'New hampshire',-->
+                <!--'New jersey',-->
+                <!--'New mexico',-->
+                <!--'New york',-->
+                <!--'North carolina',-->
+                <!--'North dakota',-->
+                <!--'Ohio',-->
+                <!--'Oklahoma',-->
+                <!--'Oregon',-->
+                <!--'Pennsylvania',-->
+                <!--'Rhode island',-->
+                <!--'South carolina',-->
+                <!--'South dakota',-->
+                <!--'Tennessee',-->
+                <!--'Texas',-->
+                <!--'Utah',-->
+                <!--'Vermont',-->
+                <!--'Virginia',-->
+                <!--'Washington',-->
+                <!--'West virginia',-->
+                <!--'Wisconsin',-->
+                <!--'Wyoming',-->
+            <!--],-->
+        <!--};-->
     <!--},-->
     <!--methods: {-->
         <!--remoteMethod1(query) {-->
@@ -260,13 +389,11 @@
                 <!--this.loading1 = true;-->
                 <!--setTimeout(() => {-->
                     <!--this.loading1 = false;-->
-<!--const list = this.list.map(item => {-->
-<!--return {-->
+                    <!--const list = this.list.map((item) => ({-->
                         <!--value: item,-->
-<!--label: item-->
-<!--};-->
-<!--});-->
-<!--this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
+                        <!--label: item,-->
+                    <!--}));-->
+                    <!--this.options1 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
                 <!--}, 200);-->
             <!--} else {-->
                 <!--this.options1 = [];-->
@@ -277,20 +404,18 @@
                 <!--this.loading2 = true;-->
                 <!--setTimeout(() => {-->
                     <!--this.loading2 = false;-->
-<!--const list = this.list.map(item => {-->
-<!--return {-->
+                    <!--const list = this.list.map((item) => ({-->
                         <!--value: item,-->
-<!--label: item-->
-<!--};-->
-<!--});-->
-<!--this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
+                        <!--label: item,-->
+                    <!--}));-->
+                    <!--this.options2 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);-->
                 <!--}, 200);-->
             <!--} else {-->
                 <!--this.options2 = [];-->
             <!--}-->
-<!--}-->
-<!--}-->
-<!--}-->
+        <!--},-->
+    <!--},-->
+<!--};-->
 <!--</script>-->
 
 <!--<template>-->
@@ -356,7 +481,9 @@
             <!--style="width:200px"-->
         <!--&gt;-->
             <!--<i-option value="beijing">New York</i-option>-->
-            <!--<i-option value="shanghai" disabled>London</i-option>-->
+            <!--<i-option -->
+                <!--value="shanghai" -->
+                <!--disabled>London</i-option>-->
             <!--<i-option value="shenzhen">Sydney</i-option>-->
         <!--</i-select>-->
         <!--<br>-->
@@ -396,15 +523,21 @@
             <!--v-model="model9"-->
             <!--style="width:200px"-->
         <!--&gt;-->
-            <!--<i-option value="New York" label="New York">-->
+            <!--<i-option -->
+                <!--value="New York" -->
+                <!--label="New York">-->
                 <!--<span>New York</span>-->
                 <!--<span style="float:right;color:#ccc">America</span>-->
             <!--</i-option>-->
-            <!--<i-option value="London" label="London">-->
+            <!--<i-option -->
+                <!--value="London" -->
+                <!--label="London">-->
                 <!--<span>London</span>-->
                 <!--<span style="float:right;color:#ccc">U.K.</span>-->
             <!--</i-option>-->
-            <!--<i-option value="Sydney" label="Sydney">-->
+            <!--<i-option -->
+                <!--value="Sydney" -->
+                <!--label="Sydney">-->
                 <!--<span>Sydney</span>-->
                 <!--<span style="float:right;color:#ccc">Australian</span>-->
             <!--</i-option>-->
@@ -461,11 +594,11 @@
             <!--&gt;-->
                 <!--<i-select-->
                     <!--v-model="model13"-->
+                    <!--:remote-method="remoteMethod1"-->
+                    <!--:loading="loading1"-->
                     <!--filterable-->
                     <!--remote-->
                     <!--clearable-->
-                    <!--:remote-method="remoteMethod1"-->
-                    <!--:loading="loading1"-->
                 <!--&gt;-->
                     <!--<i-option-->
                         <!--v-for="(option, index) in options1"-->
@@ -477,12 +610,12 @@
             <!--<i-col span="12">-->
                 <!--<i-select-->
                     <!--v-model="model14"-->
+                    <!--:remote-method="remoteMethod2"-->
+                    <!--:loading="loading2"-->
                     <!--multiple-->
                     <!--filterable-->
                     <!--remote-->
-                    <!--clearable-->
-                    <!--:remote-method="remoteMethod2"-->
-                    <!--:loading="loading2">-->
+                    <!--clearable>-->
                     <!--<i-option-->
                         <!--v-for="(option, index) in options2"-->
                         <!--:value="option.value"-->
@@ -633,13 +766,12 @@
                 <!--setTimeout(() => {-->
                     <!--this.loading1 = false;-->
 
-                        <!--const list = this.list.map(item => ({-->
+                    <!--const list = this.list.map((item) => ({-->
                         <!--value: item,-->
                         <!--label: item,-->
                     <!--}));-->
 
-                        <!--this.options1 = list-->
-                            <!--.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));-->
+                    <!--this.options1 = list.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));-->
                 <!--}, 1500);-->
             <!--} else {-->
                 <!--this.options1 = [];-->
@@ -652,13 +784,12 @@
                 <!--setTimeout(() => {-->
                     <!--this.loading2 = false;-->
 
-                        <!--const list = this.list.map(item => ({-->
+                    <!--const list = this.list.map((item) => ({-->
                         <!--value: item,-->
                         <!--label: item,-->
                     <!--}));-->
 
-                        <!--this.options2 = list-->
-                            <!--.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));-->
+                    <!--this.options2 = list.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));-->
                 <!--}, 200);-->
             <!--} else {-->
                 <!--this.options2 = [];-->
@@ -671,32 +802,77 @@
 
 <template>
     <div>
-        <Select v-model="model1" size="small" style="width:200px;">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        <Select
+            v-model="model1"
+            size="small"
+            style="width:200px;" >
+            <Option
+                v-for="item in cityList"
+                :value="item.value"
+                :key="item.value">{{item.label}}</Option>
         </Select>
-        <Select v-model="model10" size="small" multiple style="width:260px">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        <Select
+            v-model="model10"
+            size="small"
+            multiple
+            style="width:260px" >
+            <Option
+                v-for="item in cityList"
+                :value="item.value"
+                :key="item.value">{{item.label}}</Option>
         </Select>
 
         <br><br>
 
-        <Select v-model="model1" size="large" style="width:200px">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        <Select
+            v-model="model1"
+            size="large"
+            style="width:200px"
+            clearable
+            @on-clear="onClear">
+            <Option
+                v-for="item in cityList"
+                :value="item.value"
+                :key="item.value">{{item.label}}</Option>
         </Select>
-        <Select v-model="model10" size="large" multiple style="width:260px">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        <Select
+            v-model="model10"
+            size="large"
+            multiple
+            style="width:260px">
+            <Option
+                v-for="item in cityList"
+                :value="item.value"
+                :key="item.value">{{item.label}}</Option>
         </Select>
 
         <br><br>
 
-        <Select v-model="model1" style="width:200px">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        <Select
+            v-model="model1"
+            style="width:200px">
+            <Option
+                v-for="item in cityList"
+                :value="item.value"
+                :key="item.value">{{item.label}}</Option>
         </Select>
-        <Select v-model="model11" multiple style="width:260px">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        <Select
+            v-model="model11"
+            multiple
+            style="width:260px">
+            <Option
+                v-for="item in cityList"
+                :value="item.value"
+                :key="item.value">{{item.label}}</Option>
         </Select>
-        <Select v-model="model10" multiple style="width:260px">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        <Select
+            v-model="model10"
+            multiple
+            style="width:260px">
+            <Option
+                v-for="item in cityList"
+                :value="item.value"
+                :key="item.value">{{item.label}}</Option>
         </Select>
 
         <br><br>
@@ -709,8 +885,14 @@
         <br><br>
         <br><br>
         <br><br>
-        <Select v-model="model10" multiple style="width:260px">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        <Select
+            v-model="model10"
+            multiple
+            style="width:260px">
+            <Option
+                v-for="item in cityList"
+                :value="item.value"
+                :key="item.value">{{item.label}}</Option>
         </Select>
         <br><br>
 
@@ -722,8 +904,14 @@
         <br><br>
         <br><br>
         <br><br>
-        <Select v-model="model10" multiple style="width:260px">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        <Select
+            v-model="model10"
+            multiple
+            style="width:260px">
+            <Option
+                v-for="item in cityList"
+                :value="item.value"
+                :key="item.value">{{item.label}}</Option>
         </Select>
     </div>
 </template>
@@ -734,33 +922,38 @@
             cityList: [
                 {
                     value: 'New York',
-                        label: 'New York'
+                    label: 'New York',
                 },
                 {
                     value: '中国',
-                        label: '中国'
+                    label: '中国',
                 },
                 {
                     value: 'Sydney',
-                        label: 'Sydney'
+                    label: 'Sydney',
                 },
                 {
                     value: 'Ottawa',
-                        label: 'Ottawa'
+                    label: 'Ottawa',
                 },
                 {
                     value: 'Paris',
-                        label: 'Paris'
+                    label: 'Paris',
                 },
                 {
                     value: 'Canberra',
-                        label: 'Canberra'
-                    }
+                    label: 'Canberra',
+                },
             ],
             model1: '',
             model10: [],
-                model11: []
-            }
-        }
-    }
+            model11: [],
+        };
+    },
+    methods: {
+        onClear() {
+            console.log('onClear');
+        },
+    },
+};
 </script>

examples/routers/split.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="split-pane-page-wrapper">
+    <Split v-model="offset" @on-moving="handleMoving">
+      <div slot="left" class="pane left-pane">
+        <Split v-model="offsetVertical" mode="vertical" @on-moving="handleMoving">
+          <div slot="top" class="pane top-pane"></div>
+          <div slot="bottom" class="pane bottom-pane"></div>
+          <div slot="trigger" class="custom-trigger">
+            <Icon class="trigger-icon" :size="22" type="android-more-vertical" color="#000000"/>
+          </div>
+        </Split>
+      </div>
+      <div slot="right" class="pane right-pane"></div>
+    </Split>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'split_pane_page',
+  data () {
+    return {
+      offset: 0.6,
+      offsetVertical: '250px'
+    }
+  },
+  methods: {
+    handleMoving (e) {
+      console.log(e.atMin, e.atMax)
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.center-middle{
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.split-pane-page-wrapper{
+  height: 600px;
+  .pane{
+    width: 100%;
+    height: 100%;
+    &.left-pane{
+      background: sandybrown;
+    }
+    &.right-pane{
+      background: palevioletred;
+    }
+    &.top-pane{
+      background: sandybrown;
+    }
+    &.bottom-pane{
+      background: palevioletred;
+    }
+  }
+  .custom-trigger{
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #fff;
+    position: absolute;
+    .center-middle;
+    box-shadow: 0 0 6px 0 rgba(28, 36, 56, 0.4);
+    cursor: row-resize;
+    i.trigger-icon{
+      .center-middle;
+    }
+  }
+}
+</style>

examples/routers/table.vue

@@ -1,28 +1,91 @@
+<style>
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+</style>
+
 <template>
     <div>
-        <br><br><br><br><br>
-        <Table border :columns="columns1" height="500" :data="data1"></Table>
-        <br><br><br><br><br>
+        <!-- <br><br><br><br><br> -->
+        <!-- <Table border  :show-header='false' :columns="columns1" height="500" :data="data1"></Table> -->
+        <!-- <Table border :columns="columns1" height='300'></Table> -->
+        <!-- <br><br><br><br><br> -->
         <!-- <Table width="550" height="200" border :columns="columns2" :data="data4"></Table> -->
         <!--<br><br><br><br><br>-->
-        <Table border :columns="columns5" height="240" :data="data5"></Table>
-        <br><br><br><br><br>
-        <Table border :columns="columns6" :data="data5"></Table>
-        <br><br><br><br><br>
-        <Table border :columns="columns7"  height="240" :data="data7"></Table>
-        <br><br><br><br><br>
+        <!-- <Table border :columns="columns5" height="240" :data="data5"></Table> -->
+        <!-- <br><br><br><br><br> -->
+        <!-- <Table border :columns="columns6" :data="data5"></Table> -->
+        <!-- <br><br><br><br><br> -->
+        <!-- <Table border  :show-header='false' :columns="columns7"  height="200" :data="data7"></Table> -->
+        <!-- <Table border :columns="columns7"  height="240" :data="data7"></Table> -->
+        <!-- <br><br><br><br><br> -->
+        <!-- <Table border :columns="columns8"  :data="data7" height="200"></Table> -->
+        <!-- <Table border :columns="columns8" height="200"></Table> -->
+        <!-- <br><br><br><br><br> -->
+
+        <div class="layout-demo-con">
+            <Button @click="change">修改Sider绑定的变量来控制收缩</Button>
+            <Layout :style="{minHeight: '80vh'}">
+                <Sider 
+                    v-model="isCollapsed"
+                    collapsed-width="0" 
+                    hide-trigger
+                    breakpoint="sm"
+                    @on-collapse="changed"
+                    collapsible
+                    ref="side"
+                    width="200">
+                    <Menu width="auto" theme="dark" active-name="1">
+                        <MenuGroup title="内容管理">
+                            <MenuItem name="1">
+                                <Icon type="document-text"></Icon>
+                                文章管理
+                            </MenuItem>
+                            <MenuItem name="2">
+                                <Icon type="chatbubbles"></Icon>
+                                评论管理
+                            </MenuItem>
+                        </MenuGroup>
+                        <MenuGroup title="统计分析">
+                            <MenuItem name="3">
+                                <Icon type="heart"></Icon>
+                                用户留存
+                            </MenuItem>
+                            <MenuItem name="4">
+                                <Icon type="heart-broken"></Icon>
+                                流失用户
+                            </MenuItem>
+                        </MenuGroup>
+                    </Menu>
+                    <!-- <div slot="trigger"><Icon type="document-text"></Icon></div> -->
+                </Sider>
+                <Layout class-name="test-class">
+                    <Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header>
+                    <Content :style="{background:'#FFCF9E'}">
+                        <!-- <Table border  :columns="columns1" height="500" :data="data1"></Table> -->
+                        <!-- <br> -->
+                        <!-- <Table border :columns="columns5" :data="data5"></Table> -->
+                        <Table border :columns="columns8"  height="240" :data="data7"></Table>
+                    </Content>
+                    <Footer>sdfsdsdfsdfs</Footer>
+                </Layout>
+            </Layout>
+        </div>
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
+                isCollapsed: false,
                 columns1: [
                     {
                         title: 'Name',
                         key: 'name',
                         align: 'center',
-                        width: 200,
+                        minWidth: 100,
+                        maxWidth: 200,
                         fixed: 'left',
                         filters: [
                             {
@@ -51,7 +114,8 @@
                                 title: 'Age',
                                 key: 'age',
                                 align: 'center',
-                                width: 200,
+                                minWidth: 100,
+                                maxWidth: 200,
                                 sortable: true
                             },
                             {
@@ -62,7 +126,8 @@
                                         title: 'Street',
                                         key: 'street',
                                         align: 'center',
-                                        width: 200
+                                        minWidth: 100,
+                                        maxWidth: 200,
                                     },
                                     {
                                         title: 'Block',
@@ -72,14 +137,16 @@
                                                 title: 'Building',
                                                 key: 'building',
                                                 align: 'center',
-                                                width: 200,
+                                                minWidth: 100,
+                                                maxWidth: 200,
                                                 sortable: true
                                             },
                                             {
                                                 title: 'Door No.',
                                                 key: 'door',
                                                 align: 'center',
-                                                width: 200
+                                                minWidth: 100,
+                                                maxWidth: 200,
                                             }
                                         ]
                                     }
@@ -95,13 +162,15 @@
                                 title: 'Company Address',
                                 key: 'caddress',
                                 align: 'center',
-                                width: 200
+                                minWidth: 100,
+                                maxWidth: 200,
                             },
                             {
                                 title: 'Company Name',
                                 key: 'cname',
                                 align: 'center',
-                                width: 200
+                                minWidth: 100,
+                                maxWidth: 200,
                             }
                         ]
                     },
@@ -116,8 +185,9 @@
                         title: 'Gender',
                         key: 'gender',
                         align: 'center',
-                        width: 200,
-                        //fixed: 'right'
+                        minWidth: 100,
+                        maxWidth: 200,
+                        fixed: 'right'
                     }
                 ],
                 columns2: [
@@ -360,6 +430,7 @@
                     {
                         title: 'Age',
                         key: 'age',
+                        width:200,
                     },
                     {
                         title: 'Address',
@@ -393,6 +464,34 @@
                         date: '2016-10-04'
                     }
                 ],
+                
+                columns8: [
+                    {
+                        title: 'Address',
+                        key: 'address',
+                        minWidth:200,
+                        //maxWidth:300,
+                    },
+                    {
+                        title: 'Date',
+                        key: 'date',
+                        sortable: true,
+                        minWidth:100,
+                        maxWidth:150,
+                    },
+                    {
+                        title: 'Name',
+                        key: 'name',
+                        minWidth:100,
+                        maxWidth:200,
+                    },
+                    {
+                        title: 'Age',
+                        key: 'age',
+                        minWidth:60,
+                        maxWidth:100,
+                    },
+                ],
             }
         },
         mounted () {
@@ -411,6 +510,22 @@
                 });
             }
             this.data1 = data;
+        },
+        methods: {
+            toggleCollapse () {
+                this.$refs.side.toggleCollapse();
+            },
+            change () {
+                this.isCollapsed = !this.isCollapsed;
+            },
+            changed (res) {
+                console.log(res)
+            }
+        },
+        watch: {
+            isCollapsed (val) {
+                // console.log(val)
+            }
         }
     }
 </script>

examples/routers/tabs.vue

@@ -158,21 +158,57 @@
 <!--</script>-->
 
 <template>
-    <Tabs type="card">
-        <TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>
+    <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
+                tabs: 2,
+                name: 'b',
             }
         },
         methods: {
             handleTabsAdd () {
                 this.tabs ++;
+            },
+            handleClick (name) {
+                console.log(name);
             }
         }
     }

examples/routers/time.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <Time :time="1526608921" />
+        <Time :time="1652839997" />
+        <Time :time="ddd" :interval="1" />
+    </div>
+</template>
+<script>
+    export default {
+        data () {
+            return {
+                ddd: new Date('2018-04-27 14:23:00')
+            };
+        },
+        computed: {},
+        methods: {}
+    };
+</script>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "iview",
-  "version": "2.11.0",
+    "version": "2.14.3",
     "title": "iView",
     "description": "A high quality UI components Library with Vue.js",
     "homepage": "http://www.iviewui.com",
@@ -20,6 +20,7 @@
     ],
     "scripts": {
         "dev": "webpack-dev-server --content-base test/ --open --inline --hot --compress --history-api-fallback --port 8081 --config build/webpack.dev.config.js",
+        "dev:s": "webpack-dev-server --content-base test/ --open --inline --hot --compress --history-api-fallback --port 8081 --host 0.0.0.0 --config build/webpack.dev.config.js",
         "dist:style": "gulp --gulpfile build/build-style.js",
         "dist:dev": "webpack --config build/webpack.dist.dev.config.js",
         "dist:prod": "webpack --config build/webpack.dist.prod.config.js",
@@ -28,7 +29,7 @@
         "lint": "eslint --fix --ext .js,.vue src",
         "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
         "test": "npm run lint && npm run unit",
-    "prepublish": "npm run dist"
+        "prepare": "npm run dist"
     },
     "repository": {
         "type": "git",
@@ -46,7 +47,8 @@
         "js-calendar": "^1.2.3",
         "lodash.throttle": "^4.1.1",
         "popper.js": "^1.14.1",
-    "tinycolor2": "^1.4.1"
+        "tinycolor2": "^1.4.1",
+        "v-click-outside-x": "^3.0.0"
     },
     "peerDependencies": {
         "vue": "^2.5.2"
@@ -98,6 +100,7 @@
         "sinon": "^4.4.2",
         "sinon-chai": "^3.0.0",
         "style-loader": "^0.20.2",
+        "uglifyjs-webpack-plugin": "^1.2.3",
         "url-loader": "^1.0.1",
         "vue": "^2.5.16",
         "vue-hot-reload-api": "^2.3.0",
@@ -111,8 +114,9 @@
         "webpack-merge": "^3.0.0"
     },
     "engines": {
-    "node": ">= 6.0.0",
-    "npm": ">= 3.0.0"
+        "node": ">=8.9.1",
+        "npm": ">=5.5.1",
+        "yarn": ">=1.3.2"
     },
     "browserslist": [
         "last 3 Chrome versions",

src/components/anchor-link/index.js

@@ -0,0 +1,2 @@
+import AnchorLink from '../anchor/anchor-link.vue';
+export default AnchorLink;

src/components/anchor/anchor-link.vue

@@ -0,0 +1,50 @@
+<template>
+	<div :class="anchorLinkClasses">
+        <a :class="linkTitleClasses" href="javascript:void(0)" :data-href="href" @click="goAnchor" :title="title">{{ title }}</a>
+        <slot></slot>
+    </div>
+</template>
+<script>
+import { findComponentUpward } from '../../utils/assist';
+export default {
+    name: 'AnchorLink',
+    props: {
+        href: String,
+        title: String
+    },
+    data () {
+        return {
+            prefix: 'ivu-anchor-link'
+        };
+    },
+    computed: {
+        anchorLinkClasses () {
+            return [
+                this.prefix,
+                this.currentLink === this.href ? `${this.prefix}-active` : ''
+            ];
+        },
+        linkTitleClasses () {
+            return [
+                `${this.prefix}-title`
+            ];
+        },
+        parentAnchor () {
+            return findComponentUpward(this, 'Anchor');
+        },
+        currentLink () {
+            return this.parentAnchor.currentLink;
+        }
+    },
+    methods: {
+        goAnchor () {
+            this.parentAnchor.turnTo(this.href);
+        }
+    },
+    mounted () {
+        this.$nextTick(() => {
+            this.parentAnchor.init();
+        });
+    }
+};
+</script>

src/components/anchor/anchor.vue

@@ -0,0 +1,191 @@
+<template>
+    <component :is="wrapperComponent" :offset-top="offsetTop" :offset-bottom="offsetBottom" @on-change="handleAffixStateChange">
+		<div :class="`${prefix}-wrapper`" :style="wrapperStyle">
+            <div :class="`${prefix}`">
+                <div :class="`${prefix}-ink`">
+                    <span v-show="showInkBall" :class="`${prefix}-ink-ball`" :style="{top: `${inkTop}px`}"></span>
+                </div>
+                <slot></slot>
+            </div>
+        </div>
+	</component>
+</template>
+<script>
+import { scrollTop, findComponentDownward, findComponentsDownward, sharpMatcherRegx } from '../../utils/assist';
+import { on, off } from '../../utils/dom';
+export default {
+    name: 'Anchor',
+    data () {
+        return {
+            prefix: 'ivu-anchor',
+            isAffixed: false, // current affixed state
+            inkTop: 0,
+            linkHeight: 0,
+            animating: false, // if is scrolling now
+            currentLink: '', // current show link =>  #href -> currentLink = #href
+            currentId: '', // current show title id =>  #href -> currentId = href
+            scrollContainer: null,
+            scrollElement: null,
+            titlesOffsetArr: [],
+            wrapperTop: 0,
+            upperFirstTitle: true
+        };
+    },
+    props: {
+        affix: {
+            type: Boolean,
+            default: true
+        },
+        offsetTop: {
+            type: Number,
+            default: 0
+        },
+        offsetBottom: Number,
+        bounds: {
+            type: Number,
+            default: 5
+        },
+        container: [String, HTMLElement],
+        showInkInFixed: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        wrapperComponent () {
+            return this.affix ? 'Affix' : 'div';
+        },
+        wrapperStyle () {
+            return {
+                maxHeight: this.offsetTop ? `calc(100vh - ${this.offsetTop}px)` : '100vh'
+            };
+        },
+        containerIsWindow () {
+            return this.scrollContainer === window;
+        },
+        showInkBall () {
+            return this.showInkInFixed && (this.isAffixed || (!this.isAffixed && !this.upperFirstTitle && this.scrollContainer !== window));
+        }
+    },
+    methods: {
+        handleAffixStateChange (state) {
+            this.isAffixed = this.affix && state;
+        },
+        handleScroll (e) {
+            this.upperFirstTitle = e.target.scrollTop < this.titlesOffsetArr[0].offset;
+            if (this.animating) return;
+            this.updateTitleOffset();
+            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop || e.target.scrollTop;
+            this.getCurrentScrollAtTitleId(scrollTop);
+        },
+        turnTo (href) {
+            this.currentLink = href;
+            this.$router.push({
+                path: href
+            });
+            this.$emit('on-select', href);
+        },
+        handleHashChange () {
+            const url = window.location.href;
+            const sharpLinkMatch = sharpMatcherRegx.exec(url);
+            this.currentLink = sharpLinkMatch[0];
+            this.currentId = sharpLinkMatch[1];
+        },
+        handleScrollTo () {
+            const anchor = document.getElementById(this.currentId);
+            if (!anchor) return;
+            const offsetTop = anchor.offsetTop - this.wrapperTop;
+            this.animating = true;
+            scrollTop(this.scrollContainer, this.scrollElement.scrollTop, offsetTop, 600, () => {
+                this.animating = false;
+            });
+            this.handleSetInkTop();
+        },
+        handleSetInkTop () {
+            const currentLinkElementA = document.querySelector(`a[data-href="${this.currentLink}"]`);
+            if (!currentLinkElementA) return;
+            const elementATop = currentLinkElementA.offsetTop;
+            const top = (elementATop < 0 ? this.offsetTop : elementATop);
+            this.inkTop = top;
+        },
+        updateTitleOffset () {
+            const links = findComponentsDownward(this, 'AnchorLink').map(link => {
+                return link.href;
+            });
+            const idArr = links.map(link => {
+                return link.split('#')[1];
+            });
+            let offsetArr = [];
+            idArr.forEach(id => {
+                const titleEle = document.getElementById(id);
+                if (titleEle) offsetArr.push({
+                    link: `#${id}`,
+                    offset: titleEle.offsetTop - this.scrollElement.offsetTop
+                });
+            });
+            this.titlesOffsetArr = offsetArr;
+        },
+        getCurrentScrollAtTitleId (scrollTop) {
+            let i = -1;
+            let len = this.titlesOffsetArr.length;
+            let titleItem = {
+                link: '#',
+                offset: 0
+            };
+            scrollTop += this.bounds;
+            while (++i < len) {
+                let currentEle = this.titlesOffsetArr[i];
+                let nextEle = this.titlesOffsetArr[i + 1];
+                if (scrollTop >= currentEle.offset && scrollTop < ((nextEle && nextEle.offset) || Infinity)) {
+                    titleItem = this.titlesOffsetArr[i];
+                    break;
+                }
+            }
+            this.currentLink = titleItem.link;
+            this.handleSetInkTop();
+        },
+        getContainer () {
+            this.scrollContainer = this.container ? (typeof this.container === 'string' ? document.querySelector(this.container) : this.container) : window;
+            this.scrollElement = this.container ? this.scrollContainer : (document.documentElement || document.body);
+        },
+        removeListener () {
+            off(this.scrollContainer, 'scroll', this.handleScroll);
+            off(window, 'hashchange', this.handleHashChange);
+        },
+        init () {
+            const anchorLink = findComponentDownward(this, 'AnchorLink');
+            this.linkHeight = anchorLink ? anchorLink.$el.getBoundingClientRect().height : 0;
+            this.handleHashChange();
+            this.$nextTick(() => {
+                this.removeListener();
+                this.getContainer();
+                this.wrapperTop = this.containerIsWindow ? 0 : this.scrollElement.offsetTop;
+                this.handleScrollTo();
+                this.handleSetInkTop();
+                this.updateTitleOffset();
+                this.upperFirstTitle = this.scrollElement.scrollTop < this.titlesOffsetArr[0].offset;
+                on(this.scrollContainer, 'scroll', this.handleScroll);
+                on(window, 'hashchange', this.handleHashChange);
+            });
+        }
+    },
+    watch: {
+        '$route' () {
+            this.handleHashChange();
+            this.handleScrollTo();
+        },
+        container () {
+            this.init();
+        },
+        currentLink (newHref, oldHref) {
+            this.$emit('on-change', newHref, oldHref);
+        }
+    },
+    mounted () {
+        this.init();
+    },
+    beforeDestroy () {
+        this.removeListener();
+    }
+};
+</script>

src/components/anchor/index.js

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

src/components/auto-complete/auto-complete.vue

@@ -8,6 +8,7 @@
         :placeholder="placeholder"
         :size="size"
         :placement="placement"
+        :value="currentValue"
         filterable
         remote
         auto-complete
@@ -124,7 +125,9 @@
         },
         watch: {
             value (val) {
+                if(this.currentValue !== val){
                     this.disableEmitChange = true;
+                }
                 this.currentValue = val;
             },
             currentValue (val) {
@@ -144,20 +147,19 @@
             },
             handleChange (val) {
                 this.currentValue = val;
-                this.$refs.select.model = val;
                 this.$refs.input.blur();
                 this.$emit('on-select', val);
             },
-            handleFocus () {
-                this.$refs.select.visible = true;
+            handleFocus (event) {
+                this.$emit('on-focus', event);
             },
-            handleBlur () {
-                this.$refs.select.visible = false;
+            handleBlur (event) {
+                this.$emit('on-blur', event);
             },
             handleClear () {
                 if (!this.clearable) return;
                 this.currentValue = '';
-                this.$refs.select.model = '';
+                this.$refs.select.reset();
             }
         }
     };

src/components/base/popper.js

@@ -32,6 +32,9 @@ export default {
                     modifiers: {
                         computeStyle:{
                             gpuAcceleration: false,
+                        },
+                        preventOverflow :{
+                            boundariesElement: 'window'
                         }
                     }
                 };
@@ -84,13 +87,10 @@ export default {
 
             options.placement = this.placement;
 
-            if (options.modifiers) {
-                options.modifiers = {};
-            }
-            if (options.modifiers.offset) {
+            if (!options.modifiers.offset) {
                 options.modifiers.offset = {};
             }
-            options.modifiers.offset = this.offset;
+            options.modifiers.offset.offset = this.offset;
             options.onCreate =()=>{
                 this.$nextTick(this.updatePopper);
                 this.$emit('created', this);
@@ -110,6 +110,10 @@ export default {
             this.popperJS = null;
         }
     },
+    updated (){
+        this.$nextTick(()=>this.updatePopper());
+
+    },
     beforeDestroy() {
         if (isServer) return;
         if (this.popperJS) {

src/components/carousel/carousel.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="classes">
-        <button :class="arrowClasses" class="left" @click="arrowEvent(-1)">
+        <button type="button" :class="arrowClasses" class="left" @click="arrowEvent(-1)">
             <Icon type="chevron-left"></Icon>
         </button>
         <div :class="[prefixCls + '-list']">
@@ -10,7 +10,7 @@
             <div :class="[prefixCls + '-track', showCopyTrack ? 'higher' : '']" :style="copyTrackStyles" ref="copyTrack" v-if="loop">
             </div>
         </div>
-        <button :class="arrowClasses" class="right" @click="arrowEvent(1)">
+        <button type="button" :class="arrowClasses" class="right" @click="arrowEvent(1)">
             <Icon type="chevron-right"></Icon>
         </button>
         <ul :class="dotsClasses">
@@ -18,7 +18,7 @@
                 <li :class="[n - 1 === currentIndex ? prefixCls + '-active' : '']"
                     @click="dotsEvent('click', n - 1)"
                     @mouseover="dotsEvent('hover', n - 1)">
-                    <button :class="[radiusDot ? 'radius' : '']"></button>
+                    <button type="button" :class="[radiusDot ? 'radius' : '']"></button>
                 </li>
             </template>
         </ul>

src/components/cascader/cascader.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="classes" v-clickoutside="handleClose">
+    <div :class="classes" v-click-outside="handleClose">
         <div :class="[prefixCls + '-rel']" @click="toggleOpen" ref="reference">
             <input type="hidden" :name="name" :value="currentValue">
             <slot>
@@ -57,7 +57,7 @@
     import Drop from '../select/dropdown.vue';
     import Icon from '../icon/icon.vue';
     import Caspanel from './caspanel.vue';
-    import clickoutside from '../../directives/clickoutside';
+    import {directive as clickOutside} from 'v-click-outside-x';
     import TransferDom from '../../directives/transfer-dom';
     import { oneOf } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
@@ -70,7 +70,7 @@
         name: 'Cascader',
         mixins: [ Emitter, Locale ],
         components: { iInput, Drop, Icon, Caspanel },
-        directives: { clickoutside, TransferDom },
+        directives: { clickOutside, TransferDom },
         props: {
             data: {
                 type: Array,

src/components/collapse/collapse.vue

@@ -36,15 +36,8 @@
 
                 this.$children.forEach((child, index) => {
                     const name = child.name || index.toString();
-                    let isActive = false;
 
-                    if (self.accordion) {
-                        isActive = activeKey === name;
-                    } else {
-                        isActive = activeKey.indexOf(name) > -1;
-                    }
-
-                    child.isActive = isActive;
+                    child.isActive = activeKey.indexOf(name) > -1;
                     child.index = index;
                 });
             },

src/components/color-picker/alpha.vue

@@ -1,77 +1,103 @@
 <template>
-    <div class="ivu-color-picker-alpha">
-        <div class="ivu-color-picker-alpha-checkboard-wrap">
-            <div class="ivu-color-picker-alpha-checkerboard"></div>
+    <div
+        :class="[prefixCls + '-alpha']"
+        tabindex="0"
+        @click="$el.focus()"
+        @keydown.esc="handleEscape"
+        @keydown.left="handleLeft"
+        @keydown.right="handleRight"
+        @keydown.up="handleUp"
+        @keydown.down="handleDown"
+    >
+        <div :class="[prefixCls + '-alpha-checkboard-wrap']">
+            <div :class="[prefixCls + '-alpha-checkerboard']"></div>
         </div>
-        <div class="ivu-color-picker-alpha-gradient" :style="{background: gradientColor}"></div>
-        <div class="ivu-color-picker-alpha-container" ref="container"
+        <div
+            :style="gradientStyle"
+            :class="[prefixCls + '-alpha-gradient']"></div>
+        <div
+            ref="container"
+            :class="[prefixCls + '-alpha-container']"
             @mousedown="handleMouseDown"
             @touchmove="handleChange"
             @touchstart="handleChange">
-            <div class="ivu-color-picker-alpha-pointer" :style="{left: colors.a * 100 + '%'}">
-                <div class="ivu-color-picker-alpha-picker"></div>
+            <div
+                :style="{top: 0, left: `${value.a * 100}%`}"
+                :class="[prefixCls + '-alpha-pointer']">
+                <div :class="[prefixCls + '-alpha-picker']"></div>
             </div>
         </div>
     </div>
 </template>
+
 <script>
+import HSAMixin from './hsaMixin';
+import Prefixes from './prefixMixin';
+import {clamp, toRGBAString} from './utils';
+
 export default {
     name: 'Alpha',
-        props: {
-            value: Object,
-            onChange: Function
+
+    mixins: [HSAMixin, Prefixes],
+
+    data() {
+        const normalStep = 1;
+        const jumpStep = 10;
+
+        return {
+            left: -normalStep,
+            right: normalStep,
+            up: jumpStep,
+            down: -jumpStep,
+            powerKey: 'shiftKey',
+        };
     },
+
     computed: {
-            colors () {
-                return this.value;
+        gradientStyle() {
+            const {r, g, b} = this.value.rgba;
+            const start = toRGBAString({r, g, b, a: 0});
+            const finish = toRGBAString({r, g, b, a: 1});
+
+            return {background: `linear-gradient(to right, ${start} 0%, ${finish} 100%)`};
         },
-            gradientColor () {
-                const rgba = this.colors.rgba;
-                const rgbStr = [rgba.r, rgba.g, rgba.b].join(',');
-                return 'linear-gradient(to right, rgba(' + rgbStr + ', 0) 0%, rgba(' + rgbStr + ', 1) 100%)';
-            }
     },
+
     methods: {
-            handleChange (e, skip) {
-                !skip && e.preventDefault();
-                const container = this.$refs.container;
-                const containerWidth = container.clientWidth;
+        change(newAlpha) {
+            const {h, s, l} = this.value.hsl;
+            const {a} = this.value;
 
-                const xOffset = container.getBoundingClientRect().left + window.pageXOffset;
-                const pageX = e.pageX || (e.touches ? e.touches[0].pageX : 0);
-                const left = pageX - xOffset;
+            if (a !== newAlpha) {
+                this.$emit('change', {h, s, l, a: newAlpha, source: 'rgba'});
+            }
+        },
+        handleSlide(e, direction) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            this.change(clamp(e[this.powerKey] ? direction : Math.round(this.value.hsl.a * 100 + direction) / 100, 0, 1));
+        },
+        handleChange(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const left = this.getLeft(e);
 
-                let a;
             if (left < 0) {
-                    a = 0;
-                } else if (left > containerWidth) {
-                    a = 1;
-                } else {
-                    a = Math.round(left * 100 / containerWidth) / 100;
+                this.change(0);
+                return;
             }
 
-                if (this.colors.a !== a) {
-                    this.$emit('change', {
-                        h: this.colors.hsl.h,
-                        s: this.colors.hsl.s,
-                        l: this.colors.hsl.l,
-                        a: a,
-                        source: 'rgba'
-                    });
+            const {clientWidth} = this.$refs.container;
+
+            if (left > clientWidth) {
+                this.change(1);
+                return;
             }
+
+            this.change(Math.round(left * 100 / clientWidth) / 100);
         },
-            handleMouseDown (e) {
-                this.handleChange(e, true);
-                window.addEventListener('mousemove', this.handleChange);
-                window.addEventListener('mouseup', this.handleMouseUp);
     },
-            handleMouseUp () {
-                this.unbindEventListeners();
-            },
-            unbindEventListeners () {
-                window.removeEventListener('mousemove', this.handleChange);
-                window.removeEventListener('mouseup', this.handleMouseUp);
-            }
-        }
 };
 </script>

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

@@ -1,37 +1,74 @@
 <template>
-    <div :class="classes" v-clickoutside="handleClose">
-        <div ref="reference" @click="toggleVisible" :class="wrapClasses">
-            <input type="hidden" :name="name" :value="currentValue">
-            <i class="ivu-icon ivu-icon-arrow-down-b ivu-input-icon ivu-input-icon-normal"></i>
-            <div :class="inputClasses">
+    <div
+        v-click-outside.capture="handleClose"
+        v-click-outside:mousedown.capture="handleClose"
+        :class="classes">
+        <div
+            ref="reference"
+            :class="wrapClasses"
+            @click="toggleVisible">
+            <input
+                :name="name"
+                :value="currentValue"
+                type="hidden">
+            <i :class="arrowClasses"></i>
+            <div
+                ref="input"
+                :tabindex="disabled ? undefined : 0"
+                :class="inputClasses"
+                @keydown.tab="onTab"
+                @keydown.esc="onEscape"
+                @keydown.up="onArrow"
+                @keydown.down="onArrow"
+            >
                 <div :class="[prefixCls + '-color']">
-                    <div :class="[prefixCls + '-color-empty']" v-show="value === '' && !visible">
-                        <i class="ivu-icon ivu-icon-ios-close-empty"></i>
+                    <div
+                        v-show="value === '' && !visible"
+                        :class="[prefixCls + '-color-empty']">
+                        <i :class="[iconPrefixCls, iconPrefixCls + '-ios-close-empty']"></i>
                     </div>
-                    <div v-show="value || visible" :style="{backgroundColor: displayedColor}"></div>
+                    <div
+                        v-show="value || visible"
+                        :style="displayedColorStyle"></div>
                 </div>
             </div>
         </div>
         <transition name="transition-drop">
             <Drop
+                v-transfer-dom
                 v-show="visible"
-                @click.native="handleTransferClick"
-                :class="{ [prefixCls + '-transfer']: transfer }"
-                class-name="ivu-transfer-no-max-height"
-                :placement="placement"
                 ref="drop"
+                :placement="placement"
                 :data-transfer="transfer"
-                v-transfer-dom>
-                <div :class="[prefixCls + '-picker']">
+                :class="dropClasses"
+            >
+                <transition name="fade">
+                    <div
+                        v-if="visible"
+                        :class="[prefixCls + '-picker']">
                         <div :class="[prefixCls + '-picker-wrapper']">
                             <div :class="[prefixCls + '-picker-panel']">
-                            <Saturation v-model="saturationColors" @change="childChange"></Saturation>
+                                <Saturation
+                                    ref="saturation"
+                                    v-model="saturationColors"
+                                    :focused="visible"
+                                    @change="childChange"
+                                    @keydown.native.tab="handleFirstTab"
+                                ></Saturation>
                             </div>
-                        <div v-if="hue" :class="[prefixCls + '-picker-hue-slider']">
-                            <Hue v-model="saturationColors" @change="childChange"></Hue>
+                            <div
+                                v-if="hue"
+                                :class="[prefixCls + '-picker-hue-slider']">
+                                <Hue
+                                    v-model="saturationColors"
+                                    @change="childChange"></Hue>
                             </div>
-                        <div v-if="alpha" :class="[prefixCls + '-picker-alpha-slider']">
-                            <Alpha v-model="saturationColors" @change="childChange"></Alpha>
+                            <div
+                                v-if="alpha"
+                                :class="[prefixCls + '-picker-alpha-slider']">
+                                <Alpha
+                                    v-model="saturationColors"
+                                    @change="childChange"></Alpha>
                             </div>
                             <recommend-colors
                                 v-if="colors.length"
@@ -46,144 +83,138 @@
                         </div>
                         <div :class="[prefixCls + '-confirm']">
                             <span :class="[prefixCls + '-confirm-color']">{{formatColor}}</span>
-                        <Confirm @on-pick-success="handleSuccess" @on-pick-clear="handleClear"></Confirm>
+                            <i-button
+                                ref="clear"
+                                :tabindex="0"
+                                size="small"
+                                type="ghost"
+                                @click.native="handleClear"
+                                @keydown.enter="handleClear"
+                                @keydown.native.esc="closer"
+                            >{{t('i.datepicker.clear')}}</i-button>
+                            <i-button
+                                ref="ok"
+                                :tabindex="0"
+                                size="small"
+                                type="primary"
+                                @click.native="handleSuccess"
+                                @keydown.native.tab="handleLastTab"
+                                @keydown.enter="handleSuccess"
+                                @keydown.native.esc="closer"
+                            >{{t('i.datepicker.ok')}}</i-button>
                         </div>
                     </div>
+                </transition>
             </Drop>
         </transition>
     </div>
 </template>
+
 <script>
 import tinycolor from 'tinycolor2';
-
-    import clickoutside from '../../directives/clickoutside';
+import {directive as clickOutside} from 'v-click-outside-x';
 import TransferDom from '../../directives/transfer-dom';
-
 import Drop from '../../components/select/dropdown.vue';
 import RecommendColors from './recommend-colors.vue';
-    import Confirm from '../date-picker/base/confirm.vue';
 import Saturation from './saturation.vue';
 import Hue from './hue.vue';
 import Alpha from './alpha.vue';
-
+import Locale from '../../mixins/locale';
 import {oneOf} from '../../utils/assist';
 import Emitter from '../../mixins/emitter';
-
-    const prefixCls = 'ivu-color-picker';
-    const inputPrefixCls = 'ivu-input';
-
-    function _colorChange (data, oldHue) {
-        data = data === '' ? '#2d8cf0' : data;
-        const alpha = data && data.a;
-        let color;
-
-        // hsl is better than hex between conversions
-        if (data && data.hsl) {
-            color = tinycolor(data.hsl);
-        } else if (data && data.hex && data.hex.length > 0) {
-            color = tinycolor(data.hex);
-        } else {
-            color = tinycolor(data);
-        }
-
-        if (color && (color._a === undefined || color._a === null)) {
-            color.setAlpha(alpha || 1);
-        }
-
-        const hsl = color.toHsl();
-        const hsv = color.toHsv();
-
-        if (hsl.s === 0) {
-            hsv.h = hsl.h = data.h || (data.hsl && data.hsl.h) || oldHue || 0;
-        }
-
-        // when the hsv.v is less than 0.0164 (base on test)
-        // because of possible loss of precision
-        // the result of hue and saturation would be miscalculated
-        if (hsv.v < 0.0164) {
-            hsv.h = data.h || (data.hsv && data.hsv.h) || 0;
-            hsv.s = data.s || (data.hsv && data.hsv.s) || 0;
-        }
-
-        if (hsl.l < 0.01) {
-            hsl.h = data.h || (data.hsl && data.hsl.h) || 0;
-            hsl.s = data.s || (data.hsl && data.hsl.s) || 0;
-        }
-
-        return {
-            hsl: hsl,
-            hex: color.toHexString().toUpperCase(),
-            rgba: color.toRgb(),
-            hsv: hsv,
-            oldHue: data.h || oldHue || hsl.h,
-            source: data.source,
-            a: data.a || color.getAlpha()
-        };
-    }
+import Prefixes from './prefixMixin';
+import {changeColor, toRGBAString} from './utils';
 
 export default {
     name: 'ColorPicker',
-        mixins: [ Emitter ],
-        components: { Drop, Confirm, RecommendColors, Saturation, Hue, Alpha },
-        directives: { clickoutside, TransferDom },
+
+    components: {Drop, RecommendColors, Saturation, Hue, Alpha},
+
+    directives: {clickOutside, TransferDom},
+
+    mixins: [Emitter, Locale, Prefixes],
+
     props: {
         value: {
-                type: String
+            type: String,
+            default: undefined,
         },
         hue: {
             type: Boolean,
-                default: true
+            default: true,
         },
         alpha: {
             type: Boolean,
-                default: false
+            default: false,
         },
         recommend: {
             type: Boolean,
-                default: false
+            default: false,
         },
         format: {
+            type: String,
             validator(value) {
                 return oneOf(value, ['hsl', 'hsv', 'hex', 'rgb']);
-                }
+            },
+            default: undefined,
         },
         colors: {
             type: Array,
             default() {
                 return [];
-                }
+            },
         },
         disabled: {
             type: Boolean,
-                default: false
+            default: false,
         },
         size: {
+            type: String,
             validator(value) {
                 return oneOf(value, ['small', 'large', 'default']);
             },
-                default: 'default'
+            default: 'default',
+        },
+        hideDropDown: {
+            type: Boolean,
+            default: false,
         },
         placement: {
+            type: String,
             validator(value) {
-                    return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
+                return oneOf(value, [
+                    'top',
+                    'top-start',
+                    'top-end',
+                    'bottom',
+                    'bottom-start',
+                    'bottom-end',
+                    'left',
+                    'left-start',
+                    'left-end',
+                    'right',
+                    'right-start',
+                    'right-end',
+                ]);
             },
-                default: 'bottom'
+            default: 'bottom',
         },
         transfer: {
             type: Boolean,
-                default: false
+            default: false,
         },
         name: {
-                type: String
-            }
+            type: String,
+            default: undefined,
         },
+    },
+
     data() {
         return {
-                val: _colorChange(this.value),
+            val: changeColor(this.value),
             currentValue: this.value,
-                prefixCls: prefixCls,
+            dragging: false,
             visible: false,
-                disableCloseUnderTransfer: false,  // transfer 模式下，点击Drop也会触发关闭
             recommendedColor: [
                 '#2d8cf0',
                 '#19be6b',
@@ -208,17 +239,22 @@
                 '#cddc39',
                 '#607d8b',
                 '#000000',
-                    '#ffffff'
-                ]
+                '#ffffff',
+            ],
         };
     },
+
     computed: {
+        arrowClasses() {
+            return [
+                this.iconPrefixCls,
+                `${this.iconPrefixCls}-arrow-down-b`,
+                `${this.inputPrefixCls}-icon`,
+                `${this.inputPrefixCls}-icon-normal`,
+            ];
+        },
         transition() {
-                if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') {
-                    return 'slide-up';
-                } else {
-                    return 'fade';
-                }
+            return oneOf(this.placement, ['bottom-start', 'bottom', 'bottom-end']) ? 'slide-up' : 'fade';
         },
         saturationColors: {
             get() {
@@ -227,148 +263,191 @@
             set(newVal) {
                 this.val = newVal;
                 this.$emit('on-active-change', this.formatColor);
-                }
+            },
         },
         classes() {
             return [
-                    `${prefixCls}`,
+                `${this.prefixCls}`,
                 {
-                        [`${prefixCls}-transfer`]: this.transfer
-                    }
+                    [`${this.prefixCls}-transfer`]: this.transfer,
+                },
             ];
         },
         wrapClasses() {
             return [
-                    `${prefixCls}-rel`,
-                    `${prefixCls}-${this.size}`,
-                    `${inputPrefixCls}-wrapper`,
-                    `${inputPrefixCls}-wrapper-${this.size}`
+                `${this.prefixCls}-rel`,
+                `${this.prefixCls}-${this.size}`,
+                `${this.inputPrefixCls}-wrapper`,
+                `${this.inputPrefixCls}-wrapper-${this.size}`,
+                {
+                    [`${this.prefixCls}-disabled`]: this.disabled,
+                },
             ];
         },
         inputClasses() {
             return [
-                    `${prefixCls}-input`,
-                    `${inputPrefixCls}`,
-                    `${inputPrefixCls}-${this.size}`,
+                `${this.prefixCls}-input`,
+                `${this.inputPrefixCls}`,
+                `${this.inputPrefixCls}-${this.size}`,
                 {
-                        [`${inputPrefixCls}-disabled`]: this.disabled
-                    }
+                    [`${this.prefixCls}-focused`]: this.visible,
+                    [`${this.prefixCls}-disabled`]: this.disabled,
+                },
             ];
         },
-            displayedColor () {
-                let color;
-                if (this.visible) {
-                    const rgba = this.saturationColors.rgba;
-                    color = {
-                        r: rgba.r,
-                        g: rgba.g,
-                        b: rgba.b,
-                        a: rgba.a
-                    };
-                } else {
-                    color = tinycolor(this.value).toRgb();
-                }
-                return `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;
+        dropClasses() {
+            return [
+                `${this.transferPrefixCls}-no-max-height`,
+                {
+                    [`${this.prefixCls}-transfer`]: this.transfer,
+                    [`${this.prefixCls}-hide-drop`]: this.hideDropDown,
+                },
+            ];
+        },
+        displayedColorStyle() {
+            return {backgroundColor: toRGBAString(this.visible ? this.saturationColors.rgba : tinycolor(this.value).toRgb())};
         },
         formatColor() {
-                const value = this.saturationColors;
-                const format = this.format;
-                let color;
+            const {format, saturationColors} = this;
 
-                const rgba = `rgba(${value.rgba.r}, ${value.rgba.g}, ${value.rgba.b}, ${value.rgba.a})`;
             if (format) {
                 if (format === 'hsl') {
-                        color = tinycolor(value.hsl).toHslString();
-                    } else if (format === 'hsv') {
-                        color = tinycolor(value.hsv).toHsvString();
-                    } else if (format === 'hex') {
-                        color = value.hex;
-                    } else if (format === 'rgb') {
-                        color = rgba;
+                    return tinycolor(saturationColors.hsl).toHslString();
+                }
+
+                if (format === 'hsv') {
+                    return tinycolor(saturationColors.hsv).toHsvString();
+                }
+
+                if (format === 'hex') {
+                    return saturationColors.hex;
+                }
+
+                if (format === 'rgb') {
+                    return toRGBAString(saturationColors.rgba);
                 }
             } else if (this.alpha) {
-                    color = rgba;
-                } else {
-                    color = value.hex;
-                }
-                return color;
+                return toRGBAString(saturationColors.rgba);
             }
+
+            return saturationColors.hex;
         },
+    },
+
     watch: {
         value(newVal) {
-                this.val = _colorChange(newVal);
+            this.val = changeColor(newVal);
         },
         visible(val) {
-                this.val = _colorChange(this.value);
-                if (val) {
-                    this.$refs.drop.update();
-                } else {
-                    this.$refs.drop.destroy();
-                }
-            }
+            this.val = changeColor(this.value);
+            this.$refs.drop[val ? 'update' : 'destroy']();
+            this.$emit('on-open-change', Boolean(val));
         },
+    },
+
+    mounted() {
+        this.$on('on-escape-keydown', this.closer);
+        this.$on('on-dragging', this.setDragging);
+    },
+
     methods: {
-            // 开启 transfer 时，点击 Drop 即会关闭，这里不让其关闭
-            handleTransferClick () {
-                if (this.transfer) this.disableCloseUnderTransfer = true;
+        setDragging(value) {
+            this.dragging = value;
         },
-            handleClose () {
-                if (this.disableCloseUnderTransfer) {
-                    this.disableCloseUnderTransfer = false;
-                    return false;
+        handleClose(event) {
+            if (this.visible) {
+                if (this.dragging || event.type === 'mousedown') {
+                    event.preventDefault();
+                    return;
                 }
+
+                if (this.transfer) {
+                    const {$el} = this.$refs.drop;
+                    if ($el === event.target || $el.contains(event.target)) {
+                        return;
+                    }
+                }
+
+                this.closer(event);
+                return;
+            }
+
             this.visible = false;
         },
         toggleVisible() {
+            if (this.disabled) {
+                return;
+            }
+
             this.visible = !this.visible;
+            this.$refs.input.focus();
         },
         childChange(data) {
             this.colorChange(data);
         },
         colorChange(data, oldHue) {
             this.oldHue = this.saturationColors.hsl.h;
-                this.saturationColors = _colorChange(data, oldHue || this.oldHue);
+            this.saturationColors = changeColor(data, oldHue || this.oldHue);
         },
-            isValidHex (hex) {
-                return tinycolor(hex).isValid();
-            },
-            simpleCheckForValidColor (data) {
-                const keysToCheck = ['r', 'g', 'b', 'a', 'h', 's', 'l', 'v'];
-                let checked = 0;
-                let passed = 0;
-
-                for (let i = 0; i < keysToCheck.length; i++) {
-                    const letter = keysToCheck[i];
-                    if (data[letter]) {
-                        checked++;
-                        if (!isNaN(data[letter])) {
-                            passed++;
-                        }
-                    }
+        closer(event) {
+            if (event) {
+                event.preventDefault();
+                event.stopPropagation();
             }
 
-                if (checked === passed) {
-                    return data;
-                }
+            this.visible = false;
+            this.$refs.input.focus();
         },
-            handleSuccess () {
-                const color = this.formatColor;
-                this.currentValue = color;
-                this.$emit('input', color);
-                this.$emit('on-change', color);
-                this.dispatch('FormItem', 'on-form-change', color);
-                this.handleClose();
+        handleButtons(event, value) {
+            this.currentValue = value;
+            this.$emit('input', value);
+            this.$emit('on-change', value);
+            this.dispatch('FormItem', 'on-form-change', value);
+            this.closer(event);
         },
-            handleClear () {
-                this.currentValue = '';
-                this.$emit('input', '');
-                this.$emit('on-change', '');
-                this.dispatch('FormItem', 'on-form-change', '');
-                this.handleClose();
+        handleSuccess(event) {
+            this.handleButtons(event, this.formatColor);
+            this.$emit('on-pick-success');
+        },
+        handleClear(event) {
+            this.handleButtons(event, '');
+            this.$emit('on-pick-clear');
         },
         handleSelectColor(color) {
-                this.val = _colorChange(color);
+            this.val = changeColor(color);
+            this.$emit('on-active-change', this.formatColor);
+        },
+        handleFirstTab(event) {
+            if (event.shiftKey) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.$refs.ok.$el.focus();
             }
+        },
+        handleLastTab(event) {
+            if (!event.shiftKey) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.$refs.saturation.$el.focus();
             }
+        },
+        onTab(event) {
+            if (this.visible) {
+                event.preventDefault();
+            }
+        },
+        onEscape(event) {
+            if (this.visible) {
+                this.closer(event);
+            }
+        },
+        onArrow(event) {
+            if (!this.visible) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.visible = true;
+            }
+        },
+    },
 };
 </script>

src/components/color-picker/handleEscapeMixin.js

@@ -0,0 +1,7 @@
+export default {
+    methods: {
+        handleEscape(e) {
+            this.dispatch('ColorPicker', 'on-escape-keydown', e);
+        },
+    },
+};

src/components/color-picker/hsaMixin.js

@@ -0,0 +1,78 @@
+import Emitter from '../../mixins/emitter';
+import handleEscapeMixin from './handleEscapeMixin';
+import {getTouches} from './utils';
+import { on, off } from '../../utils/dom';
+
+export default {
+    mixins: [Emitter, handleEscapeMixin],
+
+    props: {
+        focused: {
+            type: Boolean,
+            default: false,
+        },
+        value: {
+            type: Object,
+            default: undefined,
+        },
+    },
+
+    beforeDestroy() {
+        this.unbindEventListeners();
+    },
+
+    created() {
+        if (this.focused) {
+            setTimeout(() => this.$el.focus(), 1);
+        }
+    },
+
+    methods: {
+        handleLeft(e) {
+            this.handleSlide(e, this.left, 'left');
+        },
+        handleRight(e) {
+            this.handleSlide(e, this.right, 'right');
+        },
+        handleUp(e) {
+            this.handleSlide(e, this.up, 'up');
+        },
+        handleDown(e) {
+            this.handleSlide(e, this.down, 'down');
+        },
+        handleMouseDown(e) {
+            this.dispatch('ColorPicker', 'on-dragging', true);
+            this.handleChange(e, true);
+            // window.addEventListener('mousemove', this.handleChange, false);
+            // window.addEventListener('mouseup', this.handleMouseUp, false);
+            on(window, 'mousemove', this.handleChange);
+            on(window, 'mouseup', this.handleMouseUp);
+        },
+        handleMouseUp() {
+            this.unbindEventListeners();
+        },
+        unbindEventListeners() {
+            // window.removeEventListener('mousemove', this.handleChange);
+            // window.removeEventListener('mouseup', this.handleMouseUp);
+            off(window, 'mousemove', this.handleChange);
+            off(window, 'mouseup', this.handleMouseUp);
+            // This timeout is required so that the click handler for click-outside
+            // has the chance to run before the mouseup removes the dragging flag.
+            setTimeout(() => this.dispatch('ColorPicker', 'on-dragging', false), 1);
+        },
+        getLeft(e) {
+            const {container} = this.$refs;
+            const xOffset = container.getBoundingClientRect().left + window.pageXOffset;
+            const pageX = e.pageX || getTouches(e, 'PageX');
+
+            return pageX - xOffset;
+        },
+        getTop(e) {
+            const {container} = this.$refs;
+            const yOffset = container.getBoundingClientRect().top + window.pageYOffset;
+            const pageY = e.pageY || getTouches(e, 'PageY');
+
+            return pageY - yOffset;
+        },
+    },
+};

src/components/color-picker/hue.vue

@@ -1,86 +1,101 @@
 <template>
-    <div class="ivu-color-picker-hue">
-        <div class="ivu-color-picker-hue-container" ref="container"
+    <div
+        :class="[prefixCls + '-hue']"
+        tabindex="0"
+        @click="$el.focus()"
+        @keydown.esc="handleEscape"
+        @keydown.left="handleLeft"
+        @keydown.right="handleRight"
+        @keydown.up="handleUp"
+        @keydown.down="handleDown"
+    >
+        <div
+            ref="container"
+            :class="[prefixCls + '-hue-container']"
             @mousedown="handleMouseDown"
             @touchmove="handleChange"
             @touchstart="handleChange">
-            <div class="ivu-color-picker-hue-pointer" :style="{top: 0, left: pointerLeft}">
-                <div class="ivu-color-picker-hue-picker"></div>
+            <div
+                :style="{top: 0, left: `${percent}%`}"
+                :class="[prefixCls + '-hue-pointer']">
+                <div :class="[prefixCls + '-hue-picker']"></div>
             </div>
         </div>
     </div>
 </template>
+
 <script>
+import HASMixin from './hsaMixin';
+import Prefixes from './prefixMixin';
+import {clamp} from './utils';
+
 export default {
     name: 'Hue',
-        props: {
-            value: Object
-        },
+
+    mixins: [HASMixin, Prefixes],
+
     data() {
+        const normalStep = 1 / 360 * 25;
+        const jumpStep = 20 * normalStep;
+
         return {
-                oldHue: 0,
-                pullDirection: ''
+            left: -normalStep,
+            right: normalStep,
+            up: jumpStep,
+            down: -jumpStep,
+            powerKey: 'shiftKey',
+            percent: clamp(this.value.hsl.h * 100 / 360, 0, 100),
         };
     },
-        computed: {
-            colors () {
-                const h = this.value.hsl.h;
-                if (h !== 0 && h - this.oldHue > 0) this.pullDirection = 'right';
-                if (h !== 0 && h - this.oldHue < 0) this.pullDirection = 'left';
-                this.oldHue = h;
 
-                return this.value;
-            },
-            pointerLeft () {
-                if (this.colors.hsl.h === 0 && this.pullDirection === 'right') return '100%';
-                return (this.colors.hsl.h * 100) / 360 + '%';
+    watch: {
+        value () {
+            this.percent = clamp(this.value.hsl.h * 100 / 360, 0, 100);
         }
     },
+
     methods: {
-            handleChange (e, skip) {
-                !skip && e.preventDefault();
+        change(percent) {
+            this.percent = clamp(percent, 0, 100);
 
-                const container = this.$refs.container;
-                const containerWidth = container.clientWidth;
+            const {h, s, l, a} = this.value.hsl;
+            const newHue = clamp(percent / 100 * 360, 0, 360);
 
-                const xOffset = container.getBoundingClientRect().left + window.pageXOffset;
-                const pageX = e.pageX || (e.touches ? e.touches[0].pageX : 0);
-                const left = pageX - xOffset;
+            if (h !== newHue) {
+                this.$emit('change', {h: newHue, s, l, a, source: 'hsl'});
+            }
+        },
+        handleSlide(e, direction) {
+            e.preventDefault();
+            e.stopPropagation();
 
-                let h;
-                let percent;
+            if (e[this.powerKey]) {
+                this.change(direction < 0 ? 0 : 100);
+                return;
+            }
+
+            this.change(this.percent + direction);
+        },
+        handleChange(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const left = this.getLeft(e);
 
             if (left < 0) {
-                    h = 0;
-                } else if (left > containerWidth) {
-                    h = 360;
-                } else {
-                    percent = left * 100 / containerWidth;
-                    h = (360 * percent / 100);
+                this.change(0);
+                return;
             }
 
-                if (this.colors.hsl.h !== h) {
-                    this.$emit('change', {
-                        h: h,
-                        s: this.colors.hsl.s,
-                        l: this.colors.hsl.l,
-                        a: this.colors.hsl.a,
-                        source: 'hsl'
-                    });
+            const {clientWidth} = this.$refs.container;
+
+            if (left > clientWidth) {
+                this.change(100);
+                return;
             }
+
+            this.change(left * 100 / clientWidth);
         },
-            handleMouseDown (e) {
-                this.handleChange(e, true);
-                window.addEventListener('mousemove', this.handleChange);
-                window.addEventListener('mouseup', this.handleMouseUp);
     },
-            handleMouseUp () {
-                this.unbindEventListeners();
-            },
-            unbindEventListeners () {
-                window.removeEventListener('mousemove', this.handleChange);
-                window.removeEventListener('mouseup', this.handleMouseUp);
-            }
-        }
 };
 </script>

src/components/color-picker/index.js

@@ -1,2 +1,3 @@
 import ColorPicker from './color-picker.vue';
+
 export default ColorPicker;

src/components/color-picker/prefixMixin.js

@@ -0,0 +1,10 @@
+export default {
+    data() {
+        return {
+            prefixCls: 'ivu-color-picker',
+            inputPrefixCls: 'ivu-input',
+            iconPrefixCls: 'ivu-icon',
+            transferPrefixCls: 'ivu-transfer',
+        };
+    },
+};

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

@@ -1,20 +1,153 @@
 <template>
-    <div>
+    <div
+        ref="reference"
+        tabindex="0"
+        @click="handleClick"
+        @keydown.esc="handleEscape"
+        @keydown.enter="handleEnter"
+        @keydown.left="handleArrow($event, 'x', left)"
+        @keydown.right="handleArrow($event, 'x', right)"
+        @keydown.up="handleArrow($event, 'y', up)"
+        @keydown.down="handleArrow($event, 'y', down)"
+        @blur="blurColor"
+        @focus="focusColor"
+    >
         <template v-for="(item, index) in list">
-            <span @click="handleClick(index)"><em :style="{'background': item}"></em></span>
-            <br v-if="(index + 1) % 12 === 0 && index !== 0 && (index + 1) !== list.length">
+            <div
+                :key="item + ':' + index"
+                :class="[prefixCls + '-picker-colors-wrapper']">
+                <div :data-color-id="index">
+                    <div
+                        :style="{background: item}"
+                        :class="[prefixCls + '-picker-colors-wrapper-color']"
+                    ></div>
+                    <div
+                        :ref="'color-circle-' + index"
+                        :class="[prefixCls + '-picker-colors-wrapper-circle', hideClass]"></div>
+                </div>
+            </div>
+            <br v-if="lineBreak(list, index)">
         </template>
     </div>
 </template>
+
 <script>
+import Emitter from '../../mixins/emitter';
+import HandleEscapeMixin from './handleEscapeMixin';
+import Prefixes from './prefixMixin';
+import {clamp} from './utils';
+
 export default {
+    name: 'RecommendedColors',
+
+    mixins: [Emitter, HandleEscapeMixin, Prefixes],
+
     props: {
-            list: Array
+        list: {
+            type: Array,
+            default: undefined,
         },
+    },
+
+    data() {
+        const columns = 12;
+        const rows = Math.ceil(this.list.length / columns);
+        const normalStep = 1;
+
+        return {
+            left: -normalStep,
+            right: normalStep,
+            up: -normalStep,
+            down: normalStep,
+            powerKey: 'shiftKey',
+            grid: {x: 1, y: 1},
+            rows,
+            columns,
+        };
+    },
+
+    computed: {
+        hideClass() {
+            return `${this.prefixCls}-hide`;
+        },
+        linearIndex() {
+            return this.getLinearIndex(this.grid);
+        },
+        currentCircle() {
+            return this.$refs[`color-circle-${this.linearIndex}`][0];
+        },
+    },
+
     methods: {
-            handleClick (index) {
-                this.$emit('picker-color', this.list[index]);
+        getLinearIndex(grid) {
+            return this.columns * (grid.y - 1) + grid.x - 1;
+        },
+        getMaxLimit(axis) {
+            return axis === 'x' ? this.columns : this.rows;
+        },
+        handleArrow(e, axis, direction) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            this.blurColor();
+
+            const grid = {...this.grid};
+
+            if (e[this.powerKey]) {
+                if (direction < 0) {
+                    grid[axis] = 1;
+                } else {
+                    grid[axis] = this.getMaxLimit(axis);
                 }
+            } else {
+                grid[axis] += direction;
             }
+
+            const index = this.getLinearIndex(grid);
+
+            if (index >= 0 && index < this.list.length) {
+                this.grid[axis] = clamp(grid[axis], 1, this.getMaxLimit(axis));
+            }
+
+            this.focusColor();
+        },
+        blurColor() {
+            this.currentCircle.classList.add(this.hideClass);
+        },
+        focusColor() {
+            this.currentCircle.classList.remove(this.hideClass);
+        },
+        handleEnter(e) {
+            this.handleClick(e, this.currentCircle);
+        },
+        handleClick(e, circle) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            this.$refs.reference.focus();
+
+            const target = circle || e.target;
+            const colorId = target.dataset.colorId || target.parentElement.dataset.colorId;
+
+            if (colorId) {
+                this.blurColor();
+                const id = Number(colorId) + 1;
+                this.grid.x = id % this.columns || this.columns;
+                this.grid.y = Math.ceil(id / this.columns);
+                this.focusColor();
+                this.$emit('picker-color', this.list[colorId]);
+                this.$emit('change', {hex: this.list[colorId], source: 'hex'});
+            }
+        },
+        lineBreak(list, index) {
+            if (!index) {
+                return false;
+            }
+
+            const nextIndex = index + 1;
+
+            return nextIndex < list.length && nextIndex % this.columns === 0;
+        },
+    },
 };
 </script>

src/components/color-picker/saturation.vue

@@ -1,98 +1,101 @@
 <template>
-    <div class="ivu-color-picker-saturation-wrapper">
     <div
-            class="ivu-color-picker-saturation"
-            :style="{background: bgColor}"
+        :class="[prefixCls + '-saturation-wrapper']"
+        tabindex="0"
+        @keydown.esc="handleEscape"
+        @click="$el.focus()"
+        @keydown.left="handleLeft"
+        @keydown.right="handleRight"
+        @keydown.up="handleUp"
+        @keydown.down="handleDown"
+    >
+        <div
             ref="container"
+            :style="bgColorStyle"
+            :class="[prefixCls + '-saturation']"
             @mousedown="handleMouseDown">
-            <div class="ivu-color-picker-saturation--white"></div>
-            <div class="ivu-color-picker-saturation--black"></div>
-            <div class="ivu-color-picker-saturation-pointer" :style="{top: pointerTop, left: pointerLeft}">
-                <div class="ivu-color-picker-saturation-circle"></div>
+            <div :class="[prefixCls + '-saturation--white']"></div>
+            <div :class="[prefixCls + '-saturation--black']"></div>
+            <div
+                :style="pointerStyle"
+                :class="[prefixCls + '-saturation-pointer']">
+                <div :class="[prefixCls + '-saturation-circle']"></div>
             </div>
         </div>
     </div>
 </template>
+
 <script>
-    import throttle from 'lodash.throttle';
+import HSAMixin from './hsaMixin';
+import Prefixes from './prefixMixin';
+import {clamp, getIncrement} from './utils';
+import { on, off } from '../../utils/dom';
 
 export default {
     name: 'Saturation',
-        props: {
-            value: Object
-        },
+
+    mixins: [HSAMixin, Prefixes],
+
     data() {
-            return {};
+        const normalStep = 0.01;
+
+        return {
+            left: -normalStep,
+            right: normalStep,
+            up: normalStep,
+            down: -normalStep,
+            multiplier: 10,
+            powerKey: 'shiftKey',
+        };
     },
+
     computed: {
-            colors () {
-                return this.value;
+        bgColorStyle() {
+            return {background: `hsl(${this.value.hsv.h}, 100%, 50%)`};
         },
-            bgColor () {
-                return `hsl(${this.colors.hsv.h}, 100%, 50%)`;
+        pointerStyle() {
+            return {top: `${-(this.value.hsv.v * 100) + 1 + 100}%`, left: `${this.value.hsv.s * 100}%`};
         },
-            pointerTop () {
-                return (-(this.colors.hsv.v * 100) + 1) + 100 + '%';
-            },
-            pointerLeft () {
-                return this.colors.hsv.s * 100 + '%';
-            }
     },
+
     methods: {
-            throttle: throttle((fn, data) => {fn(data);}, 20,
-                {
-                    'leading': true,
-                    'trailing': false
-                }),
-            handleChange (e, skip) {
-                !skip && e.preventDefault();
-                const container = this.$refs.container;
-                const containerWidth = container.clientWidth;
-                const containerHeight = container.clientHeight;
-                const xOffset = container.getBoundingClientRect().left + window.pageXOffset;
-                const yOffset = container.getBoundingClientRect().top + window.pageYOffset;
-                const pageX = e.pageX || (e.touches ? e.touches[0].pageX : 0);
-                const pageY = e.pageY || (e.touches ? e.touches[0].pageY : 0);
-                let left = pageX - xOffset;
-                let top = pageY - yOffset;
-                if (left < 0) {
-                    left = 0;
-                } else if (left > containerWidth) {
-                    left = containerWidth;
-                } else if (top < 0) {
-                    top = 0;
-                } else if (top > containerHeight) {
-                    top = containerHeight;
-                }
-                const saturation = left / containerWidth;
-                let bright = -(top / containerHeight) + 1;
-                bright = bright > 0 ? bright : 0;
-                bright = bright > 1 ? 1 : bright;
-                this.throttle(this.onChange, {
-                    h: this.colors.hsv.h,
-                    s: saturation,
-                    v: bright,
-                    a: this.colors.hsv.a,
-                    source: 'hsva'
-                });
+        change(h, s, v, a) {
+            this.$emit('change', {h, s, v, a, source: 'hsva'});
         },
-            onChange (param) {
-                this.$emit('change', param);
+        handleSlide(e, direction, key) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const isPowerKey = e[this.powerKey];
+            const increment = isPowerKey ? direction * this.multiplier : direction;
+            const {h, s, v, a} = this.value.hsv;
+            const saturation = clamp(s + getIncrement(key, ['left', 'right'], increment), 0, 1);
+            const bright = clamp(v + getIncrement(key, ['up', 'down'], increment), 0, 1);
+
+            this.change(h, saturation, bright, a);
         },
-            handleMouseDown () {
-                // this.handleChange(e, true)
-                window.addEventListener('mousemove', this.handleChange);
-                window.addEventListener('mouseup', this.handleChange);
-                window.addEventListener('mouseup', this.handleMouseUp);
+        handleChange(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const {clientWidth, clientHeight} = this.$refs.container;
+            const left = clamp(this.getLeft(e), 0, clientWidth);
+            const top = clamp(this.getTop(e), 0, clientHeight);
+            const saturation = left / clientWidth;
+            const bright = clamp(1 - top / clientHeight, 0, 1);
+
+            this.change(this.value.hsv.h, saturation, bright, this.value.hsv.a);
+        },
+        handleMouseDown(e) {
+            HSAMixin.methods.handleMouseDown.call(this, e);
+//            window.addEventListener('mouseup', this.handleChange, false);
+            on(window, 'mouseup', this.handleChange);
+        },
+        unbindEventListeners(e) {
+            HSAMixin.methods.unbindEventListeners.call(this, e);
+//            window.removeEventListener('mouseup', this.handleChange);
+            off(window, 'mouseup', this.handleChange);
         },
-            handleMouseUp () {
-                this.unbindEventListeners();
     },
-            unbindEventListeners () {
-                window.removeEventListener('mousemove', this.handleChange);
-                window.removeEventListener('mouseup', this.handleChange);
-                window.removeEventListener('mouseup', this.handleMouseUp);
-            }
-        }
 };
 </script>