Merge remote-tracking branch 'upstream/master' into build

.gitattributes

@@ -0,0 +1,2 @@
+src/styles/**/* linguist-vendored=false
+dist/styles/* linguist-vendored=false

src/components/select/select.vue

@@ -26,7 +26,7 @@
         </div>
         <Dropdown v-show="visible" transition="slide-up" v-ref:dropdown>
             <ul v-show="notFound" :class="[prefixCls + '-not-found']"><li>{{ notFoundText }}</li></ul>
-            <ul v-else :class="[prefixCls + '-dropdown-list']"><slot></slot></ul>
+            <ul v-else :class="[prefixCls + '-dropdown-list']" v-el:options><slot></slot></ul>
         </Dropdown>
     </div>
 </template>
@@ -34,7 +34,7 @@
     import Icon from '../icon';
     import Dropdown from './dropdown.vue';
     import clickoutside from '../../directives/clickoutside';
-    import { oneOf } from '../../utils/assist';
+    import { oneOf, MutationObserver } from '../../utils/assist';
 
     const prefixCls = 'ivu-select';
 
@@ -94,7 +94,8 @@
                 focusIndex: 0,
                 query: '',
                 inputLength: 20,
-                notFound: false
+                notFound: false,
+                slotChangeDuration: false    // if slot change duration and in multiple, set true and after slot change, set false
             }
         },
         computed: {
@@ -180,7 +181,7 @@
                     });
                 }
             },
-            updateOptions (init) {
+            updateOptions (init, slot = false) {
                 let options = [];
                 let index = 1;
 
@@ -199,20 +200,28 @@
                 this.options = options;
 
                 if (init) {
-                    this.updateSingleSelected(true);
+                    this.updateSingleSelected(true, slot);
-                    this.updateMultipleSelected(true);
+                    this.updateMultipleSelected(true, slot);
                 }
             },
-            updateSingleSelected (init = false) {
+            updateSingleSelected (init = false, slot = false) {
                 const type = typeof this.model;
 
                 if (type === 'string' || type === 'number') {
+                    let findModel = false;
+
                     for (let i = 0; i < this.options.length; i++) {
                         if (this.model === this.options[i].value) {
                             this.selectedSingle = this.options[i].label;
+                            findModel = true;
                             break;
                         }
                     }
+
+                    if (slot && !findModel) {
+                        this.model = '';
+                        this.query = '';
+                    }
                 }
 
                 this.toggleSingleSelected(this.model, init);
@@ -229,7 +238,7 @@
                     }
                 }
             },
-            updateMultipleSelected (init = false) {
+            updateMultipleSelected (init = false, slot = false) {
                 if (this.multiple && Array.isArray(this.model)) {
                     let selected = [];
 
@@ -249,8 +258,22 @@
                     }
 
                     this.selectedMultiple = selected;
-                }
 
+                    if (slot) {
+                        let selectedModel = [];
+
+                        for (let i = 0; i < selected.length; i++) {
+                            selectedModel.push(selected[i].value);
+                        }
+
+                        // if slot change and remove a selected option, emit user
+                        if (this.model.length === selectedModel.length) {
+                            this.slotChangeDuration = true;
+                        }
+
+                        this.model = selectedModel;
+                    }
+                }
                 this.toggleMultipleSelected(this.model, init);
             },
             removeTag (index) {
@@ -431,19 +454,46 @@
                 if (this.multiple && this.model.length && this.query === '') {
                     this.removeTag(this.model.length - 1);
                 }
+            },
+            // use when slot changed
+            slotChange () {
+                this.options = [];
+                this.optionInstances = [];
             }
         },
         ready () {
             this.updateOptions(true);
             document.addEventListener('keydown', this.handleKeydown);
+
+            // watch slot changed
+            if (MutationObserver) {
+                this.observer = new MutationObserver(() => {
+                    this.slotChange();
+                    this.updateOptions(true, true);
+                });
+
+                this.observer.observe(this.$els.options, {
+//                attributes: true,
+                    childList: true,
+                    characterData: true,
+                    subtree: true
+                });
+            }
         },
         beforeDestroy () {
             document.removeEventListener('keydown', this.handleKeydown);
+            if (this.observer) {
+                this.observer.disconnect();
+            }
         },
         watch: {
             model () {
                 if (this.multiple) {
-                    this.updateMultipleSelected();
+                    if (this.slotChangeDuration) {
+                        this.slotChangeDuration = false;
+                    } else {
+                        this.updateMultipleSelected();
+                    }
                 } else {
                     this.updateSingleSelected();
                 }

src/styles/components/message.less

@@ -20,8 +20,8 @@
         position: relative;
         right: 50%;
         padding: 8px 16px;
-        border-radius: @border-radius-base;
+        border: 1px solid @border-color-split;
-        border: 1px solid @border-color-base;
+        border-radius: @border-radius-small;
         box-shadow: @shadow-base;
         background: #fff;
         display: block;

src/styles/components/tag.less

@@ -76,15 +76,47 @@
 
         &.@{tag-prefix-cls}-blue {
             color: @link-color !important;
+            border: 1px solid @link-color !important;
+
+            &:after{
+                background: @link-color;
+            }
+            .@{tag-close-prefix-cls}{
+                color: @link-color !important;
+            }
         }
         &.@{tag-prefix-cls}-green {
             color: @success-color !important;
+            border: 1px solid @success-color !important;
+
+            &:after{
+                background: @success-color;
+            }
+            .@{tag-close-prefix-cls}{
+                color: @success-color !important;
+            }
         }
         &.@{tag-prefix-cls}-yellow {
             color: @warning-color !important;
+            border: 1px solid @warning-color !important;
+
+            &:after{
+                background: @warning-color;
+            }
+            .@{tag-close-prefix-cls}{
+                color: @warning-color !important;
+            }
         }
         &.@{tag-prefix-cls}-red {
             color: @error-color !important;
+            border: 1px solid @error-color !important;
+
+            &:after{
+                background: @error-color;
+            }
+            .@{tag-close-prefix-cls}{
+                color: @error-color !important;
+            }
         }
     }
 

src/styles/themes/default/custom.less

@@ -46,7 +46,7 @@
 @shadow-right           : 1px 0 6px @shadow-color;
 
 // Button
-@btn-font-weight        : 400;
+@btn-font-weight        : normal;
 @btn-padding-base       : 4px 15px;
 @btn-padding-large      : 6px 15px 7px 15px;
 @btn-padding-small      : 2px 7px;

src/utils/assist.js

@@ -49,4 +49,7 @@ export function getScrollBarSize (fresh) {
         cached = widthContained - widthScroll;
     }
     return cached;
-}
+}
+
+// watch DOM change
+export const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver || false;

test/routers/message.vue

@@ -38,7 +38,7 @@
         },
         methods: {
             info () {
-                Message.info('欢迎来到iView', 3, () => {
+                Message.info('欢迎来到iView', 1000, () => {
                     console.log('close info');
                 });
             },

test/routers/select.vue

@@ -1,98 +1,67 @@
 <template>
-    <div>
+    <!--<i-select :model.sync="model1" style="width:200px">-->
-        <br><br><br><br><br><br><br><br><br><br><br>
+        <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
-        {{ city | json }}<br>
+    <!--</i-select>-->
-        <Button @click="city = 'hangzhou'">切换城市</Button>
+    <!--{{ model1 | json }}-->
-        <br>
+    <i-button @click="change">修改数据</i-button>
-        <i-select v-if="true" :model.sync="city" style="width:200px" filterable @on-change="change">
+    <!--<i-select :model.sync="model10" multiple style="width:240px" @on-change="datachange">-->
-            <i-option-group label="热门城市">
+        <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
-                <i-option value="beijing">北京市</i-option>
+    <!--</i-select>-->
-                <i-option value="shanghai" disabled label="上海市">上海市2</i-option>
+    <!--{{ model10 | json }}-->
-                <i-option value="shenzhen">深圳市</i-option>
+    <!--<i-select :model.sync="model11" filterable style="width:200px" @on-change="datachange">-->
-            </i-option-group>
+        <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
-            <i-option-group label="二线城市">
+    <!--</i-select>-->
-                <i-option value="nanjing">南京市</i-option>
+    <!--{{ model11 | json }}-->
-                <i-option value="hangzhou">杭州市</i-option>
+    <i-select :model.sync="model12" filterable multiple style="width:240px" @on-change="datachange">
-                <i-option value="heilongjiang" disabled>黑龙江市</i-option>
+        <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
-            </i-option-group>
+    </i-select>
-            <i-option-group label="其它城市">
+    {{ model12 | json }}
-                <i-option value="jyg">嘉峪关市</i-option>
-                <i-option value="lanzhou">兰州市</i-option>
-                <i-option value="beijingxi">北京西</i-option>
-            </i-option-group>
-        </i-select>
-
-        <i-select v-show="true" :model.sync="focus" style="width:200px" @on-change="change" clearable filterable label-in-value>
-            <i-option value="beijing">北京</i-option>
-            <i-option value="shanghai" label="上海市">上海市</i-option>
-            <i-option value="shenzhen" disabled>深圳市</i-option>
-            <i-option value="guangzhou" label="广州市">广州市2</i-option>
-            <i-option value="shijiazhuang" disabled>石家庄市</i-option>
-            <!--<i-option value="shijiazhuang2">石家庄市2</i-option>-->
-            <i-option value="a">a市</i-option>
-            <i-option value="b">b市</i-option>
-            <i-option value="c">c市</i-option>
-            <i-option value="d">d市</i-option>
-            <i-option value="e">e市</i-option>
-        </i-select>
-
-        <i-select v-if="true" :model.sync="focus2" style="width:300px" @on-change="change" clearable filterable multiple>
-            <i-option value="beijing" label="北京市">北京2</i-option>
-            <i-option value="shanghai">上海市</i-option>
-            <i-option value="shenzhen" disabled>深圳市</i-option>
-            <i-option value="guangzhou">广州市</i-option>
-            <i-option value="shijiazhuang">石家庄市</i-option>
-            <i-option value="a">a1市</i-option>
-            <i-option value="b">b2市</i-option>
-            <i-option value="c">c1市</i-option>
-            <i-option value="d">d2市</i-option>
-            <i-option value="e">e1市</i-option>
-        </i-select>
-
-        <i-select v-if="true" :model.sync="focus2" style="width:300px" @on-change="change" clearable multiple>
-            <i-option value="beijing" label="北京市">北京2</i-option>
-            <i-option value="shanghai">上海市</i-option>
-            <i-option value="shenzhen" disabled>深圳市</i-option>
-            <i-option value="guangzhou">广州市</i-option>
-            <i-option value="shijiazhuang">石家庄市</i-option>
-            <i-option value="a">a市</i-option>
-            <i-option value="b">b市</i-option>
-            <i-option value="c">c市</i-option>
-            <i-option value="d">d市</i-option>
-            <i-option value="e">e市</i-option>
-        </i-select>
-
-        <br><br><br><br><br><br><br><br><br><br><br><br>
-    </div>
 </template>
 <script>
-    import { iSelect, iOption, iOptionGroup, Button } from 'iview';
+    import { iSelect, iOption, iButton } from 'iview';
-
     export default {
-        components: {
+        components: { iSelect, iOption, iButton },
-            iSelect,
-            iOption,
-            iOptionGroup,
-            Button
-        },
-        props: {
-
-        },
         data () {
             return {
-                city: '',
+                cityList: [
-                focus: '',
+                    {
-                focus2: ['beijing']
+                        value: 'beijing',
-//                focus2: []
+                        label: '北京市'
+                    },
+                    {
+                        value: 'shanghai',
+                        label: '上海市'
+                    },
+                    {
+                        value: 'shenzhen',
+                        label: '深圳市'
+                    },
+                    {
+                        value: 'hangzhou',
+                        label: '杭州市'
+                    },
+                    {
+                        value: 'nanjing',
+                        label: '南京市'
+                    },
+                    {
+                        value: 'chongqing',
+                        label: '重庆市'
+                    }
+                ],
+                model1: '',
+                model10: [],
+                model11: '',
+                model12: []
             }
-        },
-        computed: {
-
         },
         methods: {
-            change (data) {
+            change () {
-                console.log(data)
+                this.cityList.splice(2, 1);
+            },
+            datachange (data) {
+                console.log(data);
             }
         }
     }
-</script>
+</script>

test/routers/tag.vue

@@ -28,10 +28,23 @@
     <Tag type="border" color="red" closable>标签一</Tag>
     <Tag type="border" color="yellow">标签一</Tag>
     <Tag type="border" color="yellow" closable>标签一</Tag>
+    <i-button type="primary" @click="modal1 = true">显示对话框</i-button>
+    <Modal
+            :visible.sync="modal1"
+            title="普通的Modal对话框标题">
+        <p>对话框内容</p>
+        <p>对话框内容</p>
+        <p>对话框内容</p>
+    </Modal>
 </template>
 <script>
-    import { Tag } from 'iview';
+    import { Tag, Modal, iButton } from 'iview';
     export default {
-        components: { Tag }
+        components: { Tag, Modal, iButton },
+        data () {
+            return {
+                modal1: false
+            }
+        }
     }
 </script>