Merge pull request #11 from iview/2.0

合并

examples/routers/modal.vue

@@ -1,22 +1,150 @@
 <template>
     <div>
-        <Button @click="modal12 = true">Open the first modal</Button>
+        <Button type="primary" @click="modal1 = true">Display dialog box</Button>
-        <Button @click="modal13 = true">Open the second modal</Button>
+        <Modal
-        <Modal v-model="modal12" draggable scrollable title="Modal 1">
+                v-model="modal1"
-            <div>This is the first modal</div>
+                title="Common Modal dialog box title"
-        </Modal>
+                @on-ok="ok"
-        <Modal v-model="modal13" draggable scrollable title="Modal 2">
+                @on-cancel="cancel">
-            <div>This is the second modal</div>
+            <p>Content of dialog</p>
+            <p>Content of dialog</p>
+            <p>Content of dialog</p>
+            <Button @click="openMessage">Message</Button>
+            <Select v-model="model1" style="width:200px" :transfer="false">
+                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </Select>
+            <Select v-model="model1" style="width:200px" :transfer="true">
+                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </Select>
+            <Dropdown transfer>
+                <a href="javascript:void(0)">
+                    下拉菜单
+                    <Icon type="ios-arrow-down"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem disabled>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem divided>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <DatePicker type="date" placeholder="Select date" style="width: 200px" transfer></DatePicker>
+            <Cascader :data="data" v-model="value1" transfer></Cascader>
+            <Tooltip content="Here is the prompt text" transfer>
+                A balloon appears when the mouse passes over this text
+            </Tooltip>
+            <Poptip trigger="hover" title="Title" content="content" transfer>
+                <Button>Hover</Button>
+            </Poptip>
+            <Button type="primary" @click="handleSpinShow">整页显示，3秒后关闭</Button>
         </Modal>
+        <Select v-model="model1" style="width:200px" :transfer="false">
+            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        </Select>
+        <Select v-model="model1" style="width:200px" :transfer="true">
+            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        </Select>
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                modal12: false,
+                modal1: false,
-                modal13: false
+                cityList: [
+                    {
+                        value: 'New York',
+                        label: 'New York'
+                    },
+                    {
+                        value: 'London',
+                        label: 'London'
+                    },
+                    {
+                        value: 'Sydney',
+                        label: 'Sydney'
+                    },
+                    {
+                        value: 'Ottawa',
+                        label: 'Ottawa'
+                    },
+                    {
+                        value: 'Paris',
+                        label: 'Paris'
+                    },
+                    {
+                        value: 'Canberra',
+                        label: 'Canberra'
+                    }
+                ],
+                model1: '',
+                value1: [],
+                data: [{
+                    value: 'beijing',
+                    label: '北京',
+                    children: [
+                        {
+                            value: 'gugong',
+                            label: '故宫'
+                        },
+                        {
+                            value: 'tiantan',
+                            label: '天坛'
+                        },
+                        {
+                            value: 'wangfujing',
+                            label: '王府井'
+                        }
+                    ]
+                }, {
+                    value: 'jiangsu',
+                    label: '江苏',
+                    children: [
+                        {
+                            value: 'nanjing',
+                            label: '南京',
+                            children: [
+                                {
+                                    value: 'fuzimiao',
+                                    label: '夫子庙',
+                                }
+                            ]
+                        },
+                        {
+                            value: 'suzhou',
+                            label: '苏州',
+                            children: [
+                                {
+                                    value: 'zhuozhengyuan',
+                                    label: '拙政园',
+                                },
+                                {
+                                    value: 'shizilin',
+                                    label: '狮子林',
+                                }
+                            ]
+                        }
+                    ],
+                }]
             }
+        },
+        methods: {
+            ok () {
+//                this.$Message.info('Clicked ok');
+            },
+            cancel () {
+//                this.$Message.info('Clicked cancel');
+            },
+            openMessage () {
+                this.$Message.info({
+                    content: 'hello world',
+                    duration: 2
+                });
+            },
+            handleSpinShow () {
+                this.$Spin.show();
+            },
         }
     }
 </script>

package.json

@@ -14,7 +14,7 @@
         "framework"
     ],
     "main": "dist/iview.js",
-    "typings": "types/index.d.ts",
+    "typings": "dist/types/index.d.ts",
     "files": [
         "dist",
         "src",

src/components/base/notification/notification.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="classes" :style="styles">
+    <div :class="classes" :style="wrapStyles">
         <Notice
             v-for="notice in notices"
             :key="notice.name"
@@ -21,6 +21,8 @@
 <script>
     import Notice from './notice.vue';
 
+    import { transferIndex, transferIncrease } from '../../../utils/transfer-queue';
+
     const prefixCls = 'ivu-notification';
     let seed = 0;
     const now = Date.now();
@@ -54,7 +56,8 @@
         },
         data () {
             return {
-                notices: []
+                notices: [],
+                tIndex: this.handleGetIndex()
             };
         },
         computed: {
@@ -65,6 +68,12 @@
                         [`${this.className}`]: !!this.className
                     }
                 ];
+            },
+            wrapStyles () {
+                let styles = Object.assign({}, this.styles);
+                styles['z-index'] = 1010 + this.tIndex;
+
+                return styles;
             }
         },
         methods: {
@@ -82,6 +91,7 @@
                 }, notice);
 
                 this.notices.push(_notice);
+                this.tIndex = this.handleGetIndex();
             },
             close (name) {
                 const notices = this.notices;
@@ -94,7 +104,11 @@
             },
             closeAll () {
                 this.notices = [];
-            }
+            },
+            handleGetIndex () {
+                transferIncrease();
+                return transferIndex;
+            },
         }
     };
 </script>

src/components/base/popper.js

@@ -60,6 +60,7 @@ export default {
         },
         visible(val) {
             if (val) {
+                this.handleIndexIncrease();  // just use for Poptip
                 this.updatePopper();
                 this.$emit('on-popper-show');
             } else {

src/components/cascader/cascader.vue

@@ -26,6 +26,7 @@
                 :class="{ [prefixCls + '-transfer']: transfer }"
                 ref="drop"
                 :data-transfer="transfer"
+                :transfer="transfer"
                 v-transfer-dom>
                 <div>
                     <Caspanel

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

@@ -40,6 +40,7 @@
                 ref="drop"
                 :placement="placement"
                 :data-transfer="transfer"
+                :transfer="transfer"
                 :class="dropClasses"
             >
                 <transition name="fade">

src/components/date-picker/picker.vue

@@ -39,6 +39,7 @@
                 :placement="placement"
                 ref="drop"
                 :data-transfer="transfer"
+                :transfer="transfer"
                 v-transfer-dom>
                 <div>
                     <component

src/components/date-picker/util.js

@@ -174,7 +174,10 @@ const RANGE_PARSER = function(text, format) {
         const range1 = array[0];
         const range2 = array[1];
 
-        return [parseDate(range1, format), parseDate(range2, format)];
+        return [
+            range1 instanceof Date ? range1 : parseDate(range1, format),
+            range2 instanceof Date ? range2 : parseDate(range2, format),
+        ];
     }
     return [];
 };

src/components/dropdown/dropdown.vue

@@ -14,6 +14,7 @@
                 @mouseenter.native="handleMouseenter"
                 @mouseleave.native="handleMouseleave"
                 :data-transfer="transfer"
+                :transfer="transfer"
                 v-transfer-dom><slot name="list"></slot></Drop>
         </transition>
     </div>

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

@@ -80,9 +80,9 @@
                 type: Number,
                 default: 1
             },
-            activeChange:{
+            activeChange: {
-                type:Boolean,
+                type: Boolean,
-                default:true
+                default: true
             },
             value: {
                 type: Number,
@@ -314,7 +314,6 @@
             },
             changeVal (val) {
                 val = Number(val);
-                //this.setValue(val);
                 if (!isNaN(val)) {
                     const step = this.step;
 

src/components/modal/modal.vue

@@ -1,7 +1,7 @@
 <template>
     <div v-transfer-dom :data-transfer="transfer">
         <transition :name="transitionNames[1]">
-            <div :class="maskClasses" v-show="visible" v-if="showMask" @click="handleMask"></div>
+            <div :class="maskClasses" :style="wrapStyles" v-show="visible" v-if="showMask" @click="handleMask"></div>
         </transition>
         <div :class="wrapClasses" :style="wrapStyles" @click="handleWrapClick">
             <transition :name="transitionNames[0]" @after-leave="animationFinish">
@@ -40,7 +40,7 @@
     import { on, off } from '../../utils/dom';
     import { findComponentsDownward } from '../../utils/assist';
 
-    import { modalIndex, modalIncrease } from './q';
+    import { transferIndex as modalIndex, transferIncrease as modalIncrease } from '../../utils/transfer-queue';
 
     const prefixCls = 'ivu-modal';
 
@@ -325,7 +325,9 @@
                 return modalIndex;
             },
             handleClickModal () {
-                this.modalIndex = this.handleGetModalIndex();
+                if (this.draggable) {
+                    this.modalIndex = this.handleGetModalIndex();
+                }
             }
         },
         mounted () {

src/components/modal/q.js

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

src/components/poptip/poptip.vue

@@ -52,6 +52,7 @@
     import {directive as clickOutside} from 'v-click-outside-x';
     import TransferDom from '../../directives/transfer-dom';
     import { oneOf } from '../../utils/assist';
+    import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
     import Locale from '../../mixins/locale';
 
     const prefixCls = 'ivu-poptip';
@@ -118,6 +119,7 @@
                 showTitle: true,
                 isInput: false,
                 disableCloseUnderTransfer: false,  // transfer 模式下，点击 slot 也会触发关闭
+                tIndex: this.handleGetIndex()
             };
         },
         computed: {
@@ -144,6 +146,9 @@
                 if (this.width) {
                     style.width = `${this.width}px`;
                 }
+
+                if (this.transfer) style['z-index'] = 1060 + this.tIndex;
+
                 return style;
             },
             localeOkText () {
@@ -172,7 +177,7 @@
                 const styles = {};
                 if (this.padding !== '') styles['padding'] = this.padding;
                 return styles;
-            }
+            },
         },
         methods: {
             handleClick () {
@@ -254,6 +259,13 @@
                 }
 
                 return $children;
+            },
+            handleGetIndex () {
+                transferIncrease();
+                return transferIndex;
+            },
+            handleIndexIncrease () {
+                this.tIndex = this.handleGetIndex();
             }
         },
         mounted () {

src/components/select/dropdown.vue

@@ -7,6 +7,8 @@
     import { getStyle } from '../../utils/assist';
     const Popper = isServer ? function() {} : require('popper.js/dist/umd/popper.js');  // eslint-disable-line
 
+    import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
+
     export default {
         name: 'Drop',
         props: {
@@ -16,19 +18,26 @@
             },
             className: {
                 type: String
+            },
+            transfer: {
+                type: Boolean
             }
         },
         data () {
             return {
                 popper: null,
                 width: '',
-                popperStatus: false
+                popperStatus: false,
+                tIndex: this.handleGetIndex()
             };
         },
         computed: {
             styles () {
                 let style = {};
                 if (this.width) style.minWidth = `${this.width}px`;
+
+                if (this.transfer) style['z-index'] = 1060 + this.tIndex;
+
                 return style;
             }
         },
@@ -66,6 +75,7 @@
                 if (this.$parent.$options.name === 'iSelect') {
                     this.width = parseInt(getStyle(this.$parent.$el, 'width'));
                 }
+                this.tIndex = this.handleGetIndex();
             },
             destroy () {
                 if (this.popper) {
@@ -89,7 +99,11 @@
                 if(!leftOrRight){
                     this.popper.popper.style.transformOrigin = placementStart==='bottom' || ( placementStart !== 'top' && placementEnd === 'start') ? 'center top' : 'center bottom';
                 }
-            }
+            },
+            handleGetIndex () {
+                transferIncrease();
+                return transferIndex;
+            },
         },
         created () {
             this.$on('on-update-popper', this.update);

src/components/select/select.vue

@@ -54,6 +54,7 @@
                 :placement="placement"
                 ref="dropdown"
                 :data-transfer="transfer"
+                :transfer="transfer"
                 v-transfer-dom
             >
                 <ul v-show="showNotFoundLabel" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>

src/components/spin/spin.js

@@ -1,6 +1,15 @@
 import Vue from 'vue';
 import Spin from './spin.vue';
 
+import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
+
+function handleGetIndex() {
+    transferIncrease();
+    return transferIndex;
+}
+
+let tIndex = handleGetIndex();
+
 Spin.newInstance = properties => {
     const _props = properties || {};
 
@@ -27,7 +36,10 @@ Spin.newInstance = properties => {
                 });
             }
             return h('div', {
-                'class': 'ivu-spin-fullscreen ivu-spin-fullscreen-wrapper'
+                'class': 'ivu-spin-fullscreen ivu-spin-fullscreen-wrapper',
+                'style': {
+                    'z-index': 2010 + tIndex
+                }
             }, [vnode]);
         }
     });
@@ -39,6 +51,7 @@ Spin.newInstance = properties => {
     return {
         show () {
             spin.visible = true;
+            tIndex = handleGetIndex();
         },
         remove (cb) {
             spin.visible = false;

src/components/tooltip/tooltip.vue

@@ -6,6 +6,7 @@
         <transition name="fade">
             <div
                 :class="[prefixCls + '-popper', prefixCls + '-' + theme]"
+                :style="dropStyles"
                 ref="popper"
                 v-show="!disabled && (visible || always)"
                 @mouseenter="handleShowPopper"
@@ -24,6 +25,7 @@
     import Popper from '../base/popper';
     import TransferDom from '../../directives/transfer-dom';
     import { oneOf } from '../../utils/assist';
+    import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
 
     const prefixCls = 'ivu-tooltip';
 
@@ -76,7 +78,8 @@
         },
         data () {
             return {
-                prefixCls: prefixCls
+                prefixCls: prefixCls,
+                tIndex: this.handleGetIndex()
             };
         },
         computed: {
@@ -92,6 +95,12 @@
                         [`${prefixCls}-inner-with-width`]: !!this.maxWidth
                     }
                 ];
+            },
+            dropStyles () {
+                let styles = {};
+                if (this.transfer) styles['z-index'] = 1060 + this.tIndex;
+
+                return styles;
             }
         },
         watch: {
@@ -105,6 +114,7 @@
                 this.timeout = setTimeout(() => {
                     this.visible = true;
                 }, this.delay);
+                this.tIndex = this.handleGetIndex();
             },
             handleClosePopper() {
                 if (this.timeout) {
@@ -115,7 +125,11 @@
                         }, 100);
                     }
                 }
-            }
+            },
+            handleGetIndex () {
+                transferIncrease();
+                return transferIndex;
+            },
         },
         mounted () {
             if (this.always) {

src/utils/transfer-queue.js

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

types/iview.components.d.ts

@@ -65,8 +65,8 @@ export { Upload } from './upload';
 
 declare const API: {
     version: string;
-    locale: (l) => void;
+    locale: (l:any) => void;
-    i18n: (fn) => void;
+    i18n: (fn:any) => void;
     install: (
         Vue: Vue,
         opts: {