Merge branch 'master' of gitlab.qima-inc.com:fe/zanui-vue

Conflicts:
	packages/zanui-css/src/index.css

packages/badge/src/badge.vue

@@ -5,6 +5,7 @@
       {{title}}
     </a>
 </template>
+
 <script>
 export default {
   name: 'zan-badge',
@@ -37,4 +38,4 @@ export default {
     }
   }
 };
-</script>
+</script>

packages/checkbox/src/checkbox.vue

@@ -54,14 +54,14 @@ export default {
 
       set(val) {
         if (this.isGroup && this.parentGroup) {
-          let parentValue = this.parentGroup.value.slice();
+          const parentValue = this.parentGroup.value.slice();
           if (val) {
             if (parentValue.indexOf(this.name) === -1) {
               parentValue.push(this.name);
               this.parentGroup.$emit('input', parentValue);
             }
           } else {
-            let index = parentValue.indexOf(this.name);
+            const index = parentValue.indexOf(this.name);
             if (index !== -1) {
               parentValue.splice(index, 1);
               this.parentGroup.$emit('input', parentValue);

packages/dialog/src/dialog.vue

@@ -70,10 +70,8 @@ export default {
         setTimeout(() => {
           if (this.modal && this.bodyOverflow !== 'hidden') {
             document.body.style.overflow = this.bodyOverflow;
-            document.body.style.paddingRight = this.bodyPaddingRight;
           }
           this.bodyOverflow = null;
-          this.bodyPaddingRight = null;
         }, 200);
       }
 

packages/image-preview/index.js

@@ -1,3 +1,3 @@
-import ImagePreview from './src/image-preview';
+import ImagePreview from './src/image-preview.vue';
 
 export default ImagePreview;

packages/image-preview/src/image-preview.vue

@@ -1,18 +1,73 @@
 <template>
-  <div>
-    <h2>author: {{ author }}</h2>
-    <div>Hello {{ name }}</div>
-  </div>
+  <transition name="image-fade">
+    <div class="zan-image-preview" ref="previewContainer" v-show="value">
+      <img class="zan-image-preview__image" :src="image" alt="" :style="imageStyle">
+    </div>
+  </transition>
 </template>
 
 <script>
-  export default {
-    name: 'Sample',
-    props: ['author'],
-    data() {
-      return {
-        name: 'World'
-      };
+import Popup from 'src/mixins/popup';
+
+export default {
+  name: 'zan-image-preview',
+
+  mixins: [Popup],
+
+  props: {
+    overlay: {
+      default: true
+    },
+
+    lockOnScroll: {
+      default: true
+    },
+
+    closeOnClickOverlay: {
+      default: true
     }
-  };
+  },
+
+  data() {
+    return {
+      image: 'https://img.yzcdn.cn/upload_files/2017/03/02/FhDtQ7okM18PeQ3P0RAfIzVADUEq.jpg'
+    };
+  },
+
+  mounted() {
+    this.open();
+    this.previewSize = this.$refs.previewContainer.getBoundingClientRect();
+  },
+
+  computed: {
+    /**
+     * 图片样式计算
+     * 根据屏幕自适应显示最长边
+     */
+    imageStyle() {
+    }
+  },
+
+  methods: {
+    close() {
+      if (this.closing) return;
+
+      this.closing = true;
+
+      this.value = false;
+
+      if (this.lockOnScroll) {
+        setTimeout(() => {
+          if (this.modal && this.bodyOverflow !== 'hidden') {
+            document.body.style.overflow = this.bodyOverflow;
+          }
+          this.bodyOverflow = null;
+        }, 200);
+      }
+
+      this.opened = false;
+      this.doAfterClose();
+    }
+  }
+};
 </script>

packages/picker/src/picker-column.vue

@@ -104,7 +104,7 @@ export default {
       var visibileColumnCount = this.visibileColumnCount;
       var itemHeight = this.itemHeight;
 
-      return [ -itemHeight * (values.length - Math.ceil(visibileColumnCount / 2)), itemHeight * Math.floor(visibileColumnCount / 2) ];
+      return [-itemHeight * (values.length - Math.ceil(visibileColumnCount / 2)), itemHeight * Math.floor(visibileColumnCount / 2)];
     },
 
     /**
@@ -125,10 +125,10 @@ export default {
      * 将当前`value`值转换成需要垂直方向需要`translate`的值
      */
     value2Translate(value) {
-      let values = this.currentValues;
-      let valueIndex = values.indexOf(value);
-      let offset = Math.floor(this.visibileColumnCount / 2);
-      let itemHeight = this.itemHeight;
+      const values = this.currentValues;
+      const valueIndex = values.indexOf(value);
+      const offset = Math.floor(this.visibileColumnCount / 2);
+      const itemHeight = this.itemHeight;
 
       if (valueIndex !== -1) {
         return (valueIndex - offset) * (-itemHeight);
@@ -139,10 +139,10 @@ export default {
      * 根据当前`translate`的值转换成当前选中的`value`
      */
     translate2Value(translate) {
-      let itemHeight = this.itemHeight;
+      const itemHeight = this.itemHeight;
       translate = Math.round(translate / itemHeight) * itemHeight;
 
-      let index = -(translate - Math.floor(this.visibileColumnCount / 2) * itemHeight) / itemHeight;
+      const index = -(translate - Math.floor(this.visibileColumnCount / 2) * itemHeight) / itemHeight;
 
       return this.currentValues[index];
     },
@@ -177,8 +177,8 @@ export default {
           dragState.left = event.pageX;
           dragState.top = event.pageY;
 
-          let deltaY = dragState.top - dragState.startTop;
-          let translate = dragState.startTranslateTop + deltaY;
+          const deltaY = dragState.top - dragState.startTop;
+          const translate = dragState.startTranslateTop + deltaY;
 
           translateUtil.translateElement(el, null, translate);
 
@@ -229,8 +229,8 @@ export default {
      * `value`改变时调用
      */
     doOnValueChange() {
-      let value = this.currentValue;
-      let wrapper = this.$refs.wrapper;
+      const value = this.currentValue;
+      const wrapper = this.$refs.wrapper;
 
       this.$emit('input', this.currentValue);
 

packages/picker/src/picker.vue

@@ -66,8 +66,8 @@ export default {
 
   computed: {
     values() {
-      let columns = this.columns || [];
-      let values = [];
+      const columns = this.columns || [];
+      const values = [];
 
       columns.forEach(column => {
         values.push(column.value || column.values[column.defaultIndex || 0]);
@@ -89,7 +89,7 @@ export default {
      * 获取对应索引的列的实例
      */
     getColumn(index) {
-      let children = this.$children.filter(child => child.$options.name === 'zan-picker-column');
+      const children = this.$children.filter(child => child.$options.name === 'zan-picker-column');
       return children[index];
     },
 
@@ -97,7 +97,7 @@ export default {
      * 获取对应列中选中的值
      */
     getColumnValue(index) {
-      let column = this.getColumn(index);
+      const column = this.getColumn(index);
       return column && column.values[column.valueIndex];
     },
 
@@ -105,7 +105,7 @@ export default {
      * 设置对应列中选中的值
      */
     setColumnValue(index, value) {
-      let column = this.getColumn(index);
+      const column = this.getColumn(index);
       if (column) {
         column.currentValue = value;
       }
@@ -115,7 +115,7 @@ export default {
      * 获取对应列中所有的备选值
      */
     getColumnValues(index) {
-      let column = this.getColumn(index);
+      const column = this.getColumn(index);
       return column && column.currentValues;
     },
 
@@ -123,7 +123,7 @@ export default {
      * 设置对应列中所有的备选值
      */
     setColumnValues(index, values) {
-      let column = this.getColumn(index);
+      const column = this.getColumn(index);
       if (column) {
         column.currentValues = values;
       }

packages/steps/src/step.vue

@@ -21,8 +21,8 @@ export default {
 
   computed: {
     status() {
-      let index = this.$parent.steps.indexOf(this);
-      let active = this.$parent.active;
+      const index = this.$parent.steps.indexOf(this);
+      const active = this.$parent.active;
 
       if (index === -1) {
         return '';

packages/steps/src/steps.vue

@@ -34,8 +34,8 @@ export default {
 
   computed: {
     computedIconClass() {
-      let iconName = `zan-icon-${this.icon}`;
-      let result = this.iconClass.split(' ');
+      const iconName = `zan-icon-${this.icon}`;
+      const result = this.iconClass.split(' ');
       result.push(iconName);
 
       return result;

packages/switch/src/switch.vue

@@ -42,7 +42,7 @@ export default {
   },
   computed: {
     switchStates: function() {
-      let switchStates = ['zan-switch--' + (this.checked ? 'on' : 'off'),
+      const switchStates = ['zan-switch--' + (this.checked ? 'on' : 'off'),
         'zan-switch--' + (this.disabled ? 'disabled' : '')];
 
       return switchStates;

packages/zanui-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youzan/zanui-css",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "zanui css.",
   "main": "lib/index.css",
   "style": "lib/index.css",

packages/zanui-css/src/image_preview.css

@@ -0,0 +1,15 @@
+@component-namespace zan {
+  @b image-preview {
+    position: absolute;
+    width: 100%;
+    height: 75%;
+    overflow: hidden;
+
+    @e image {
+      display: block;
+      width: 100%;
+      height: auto;
+      margin: 0 auto;
+    }
+  }
+}

packages/zanui-css/src/index.css

@@ -20,3 +20,4 @@
 @import './checkbox.css';
 @import './col.css';
 @import './row.css';
+@import './image_preview.css';