feat: popup

miniprogram_dev/components/packages/divider/index.wxs

@@ -1,11 +1,10 @@
 
 function Classes(data) {
-  console.log(data)
   var prefixCls = 'nut-divider'
   var defaultClassesObj = [prefixCls]
 
   if (data.direction === 'horizontal') {
-    if (data.useSlot) defaultClassesObj.push(prefixCls + '-center')
+    if (data.contentPosition === 'center') defaultClassesObj.push(prefixCls + '-center')
     if (data.contentPosition === 'left') defaultClassesObj.push(prefixCls + '-left')
     if (data.contentPosition === 'right') defaultClassesObj.push(prefixCls + '-right')
     if (data.dashed) defaultClassesObj.push(prefixCls + '-dashed')

miniprogram_dev/components/packages/grid-item/index.js

@@ -280,7 +280,7 @@ var _relation = __webpack_require__(2);
             square: false,
             border: true,
             reverse: false,
-            direction: 'horizontal',
+            direction: 'vertical',
             clickable: false
         },
         iconProps: {
@@ -289,7 +289,6 @@ var _relation = __webpack_require__(2);
     },
     methods: {
         updateParent: function updateParent() {
-            console.log('更新地址', this.parent.data);
             var that = this;
             this.setData({
                 parent: that.parent.data

miniprogram_dev/components/packages/popup/index.js

@@ -206,12 +206,27 @@ var _component = __webpack_require__(0);
             type: String,
             value: 'center'
         },
-        overlayStyle: String
+        overlayStyle: String,
+        closeable: {
+            type: Boolean,
+            value: false
+        },
+        closeIconPosition: {
+            type: String,
+            value: 'top-right'
+        },
+        closeIcon: {
+            type: String,
+            value: 'close'
+        }
     },
     methods: {
         onClickOverlay: function onClickOverlay() {
             console.log('点击');
             this.$emit('clickOverlay');
+        },
+        onClickCloseIcon: function onClickCloseIcon() {
+            this.$emit('clickCloseIcon');
         }
     }
 });

miniprogram_dev/components/packages/popup/index.wxml

@@ -1,7 +1,8 @@
 <wxs src="./index.wxs" module="computed" />
 
 <nut-overlay
-  show="{{ overlay && show }}"
+  wx:if="{{ overlay }}"
+  show="{{ show }}"
   zIndex="{{zIndex}}"
   duration="{{duration}}"
   overlay-style="{{overlayStyle}}"
@@ -9,22 +10,23 @@
   />
 
 <nut-transition 
-  name="fade" 
+  name="{{ computed.animationName({position})}}" 
   show='{{ show }}' 
-  custom-class="nut-overlay custom-class" 
-  custom-style='z-index:{{zIndex}};{{overlayStyle}}'   
+  custom-class="{{computed.classes({position,popClass,round})}}"
+  custom-style='z-index:{{zIndex}};{{popStyle}}'   
   bind:tap='onClick'
   duration='{{duration}}'> 
-    <view wx:if="{{show}}" class="{{computed.classes({position,popClass,round})}}" style="z-index:{{zIndex}};transitionDuration:{{duration}}s;{{popStyle}}" >
-        
-        <slot></slot>
-        <view
-          wx:if="{{show}}"
-          bindtap="onClickCloseIcon"
-          class="nut-popup__close-icon"
-        >
-          <!-- <nut-icon name='close'></nut-icon> -->
-        </view>
-      </view>
+    <slot></slot>
 
+    <view
+      wx:if="{{closeable}}"
+      bindtap="onClickCloseIcon"
+      class="nut-popup__close-icon {{'nut-popup__close-icon--' + closeIconPosition}}"
+    >
+    <nut-icon name="{{closeIcon}}"></nut-icon>
+      <!-- <slot name="close-icon">
+        <Close height="12px"></Close>
+      </slot> -->
+    </view>
+    
 </nut-transition>

miniprogram_dev/components/packages/popup/index.wxs

@@ -8,7 +8,7 @@ function Classes(data) {
 
     var prefixCls = 'nut-popup'
 
-    var classes = [prefixCls,prefixCls + '--' + data.position,data.popClass]
+    var classes = [prefixCls,prefixCls + '--' + data.position, data.popClass]
 
     if (data.round) {
         classes.push('round')
@@ -31,7 +31,16 @@ function Styled(data) {
     return style([styley]);
 }
 
+function AnimationName(data){
+    console.log(data)
+    if( data.position == 'center') return 'fade'
+    if( data.position == 'top') return 'fade-down'
+    if( data.position == 'bottom') return 'fade-up'
+
+    return 'fade-'+data.position
+}
 module.exports = {
     classes: Classes,
-    styled: Styled
+    styled: Styled,
+    animationName:AnimationName
 };

miniprogram_dev/pages/basic/pages/popup/index.js

@@ -4,8 +4,14 @@ Component({
     data:{
         show:false,
         positionShow: false,
+        position:'top',
+        positionLRShow:false,
+        positionLR:'left',
         styleShow:false,
-        timeShow:false
+        roundPopopShow:false,
+        iconPopopShow:false,
+        closeIconPosition:'top-right',
+        customIconPopopShow:false
     },
 
     methods: {
@@ -25,11 +31,49 @@ Component({
             this.setData({ show:tag });
         },
 
-        onClickPositionShow(){
-            this.setData({positionShow:true})
+        onClickPositionShow(e){
+            var posi = e.target.dataset.position
+            this.setData({
+                position:posi,
+                positionShow:true
+            })
+        },
+        onClickPositionLRShow(e){
+            var posi = e.target.dataset.position
+            this.setData({
+                positionLR:posi,
+                positionLRShow:true
+            })
         },
         onClickPositionHide(){
-            this.setData({positionShow:false})
-        }
+            this.setData({
+                positionLRShow:false,
+                positionShow:false})
+        },
+
+        onClickRoundHide(){
+            this.setData({ roundPopopShow:false });
+        },
+        onClickRoundShow(){
+            this.setData({ roundPopopShow:true });
+        },
+        onClickIconShow(e){
+            var posi = e.target.dataset.position
+            if(posi){
+                this.setData({
+                    closeIconPosition:posi
+                })
+            }
+            this.setData({ iconPopopShow:true });
+        },
+        onClickIconHide(){
+            this.setData({ iconPopopShow:false });
+        },
+        onClickCustomIconShow(e){
+            this.setData({ customIconPopopShow:true });
+        },
+        onClickCustomIconHide(){
+            this.setData({ customIconPopopShow:false });
+        },
     }
 })

miniprogram_dev/pages/basic/pages/popup/index.wxml

@@ -2,21 +2,29 @@
     <h2>基础用法</h2>
 
     <nut-cell title="展示弹出层"  bind:click='onClickShow'></nut-cell>
-    <nut-popup pop-style="padding:30px 50px" show='{{ show }}' bind:clickOverlay="onClickOverlay">正文</nut-popup>
+    <nut-popup pop-style="padding:30px 50px" show='{{ show }}' bind:clickOverlay="onClickOverlay"><view>正文</view></nut-popup>
+    
 
     <h2>弹出位置</h2>
-     <nut-cell title="顶部弹出"  bind:click='onClickPositionShow'></nut-cell>
-     <nut-cell title="底部弹出"  bind:click='onClickShow'></nut-cell>
-     <nut-cell title="左侧弹出"  bind:click='onClickShow'></nut-cell>
-     <nut-cell title="右侧弹出"  bind:click='onClickShow'></nut-cell>
-     <nut-popup position="top" pop-style="height:20%" show='{{ positionShow }}' bind:clickOverlay="onClickPositionHide"></nut-popup>
+
+    <nut-grid>
+      <nut-grid-item icon="rect-up" text="顶部弹出" data-position='top'  bindtap='onClickPositionShow'></nut-grid-item>
+      <nut-grid-item icon="rect-down" text="底部弹出" data-position='bottom'  bindtap='onClickPositionShow'></nut-grid-item>
+      <nut-grid-item icon="rect-left" text="左侧弹出" data-position='left'  bindtap='onClickPositionLRShow'></nut-grid-item>
+      <nut-grid-item icon="rect-right" text="右侧弹出" data-position='right'  bindtap='onClickPositionLRShow'></nut-grid-item>
+    </nut-grid>
+    <nut-popup position="{{ position }}" pop-style="height:20%" show='{{ positionShow }}' bind:clickOverlay="onClickPositionHide"></nut-popup>
+    <nut-popup position="{{ positionLR }}" pop-style="height:100%;width:20%" show='{{ positionLRShow }}' bind:clickOverlay="onClickPositionHide"></nut-popup>
 
      <h2>关闭图标</h2>
-     <nut-cell title="关闭图标"  bind:click='onClickShow'></nut-cell>
-     <nut-cell title="自定义图标"  bind:click='onClickShow'></nut-cell>
-     <nut-cell title="图标位置"  bind:click='onClickShow'></nut-cell>
+     <nut-cell title="关闭图标"  bind:click='onClickIconShow'></nut-cell>
+     <nut-cell title="自定义图标"  bind:click='onClickCustomIconShow'></nut-cell>
+     <nut-cell title="图标位置" data-position="top-left"  bind:click='onClickIconShow'></nut-cell>
+     <nut-popup position="bottom" round="true" closeable="true" closeIconPosition='{{closeIconPosition}}' pop-style="height:20%" show='{{ iconPopopShow }}' bind:clickOverlay="onClickIconHide" bind:clickCloseIcon='onClickIconHide'></nut-popup>
+      <nut-popup position="bottom" round="true" closeable="true" closeIcon="heart-fill-n"  pop-style="height:20%" show='{{ customIconPopopShow }}' bind:clickOverlay="onClickCustomIconHide" bind:clickCloseIcon='onClickCustomIconHide'></nut-popup>
+
+    <h2>圆角弹框</h2>
+    <nut-cell title="圆角弹框"  bind:click='onClickRoundShow'></nut-cell>
+    <nut-popup position="bottom" round="true" pop-style="height:20%" show='{{ roundPopopShow }}' bind:clickOverlay="onClickRoundHide"></nut-popup>
 
-     <h2>圆角弹框</h2>
-    <nut-cell title="圆角弹框"  bind:click='onClickShow'></nut-cell>
-  
 </view>

miniprogram_dev/pages/basic/pages/popup/index.wxss

@@ -1,27 +1,6 @@
-.demo-button-row {
-    margin-bottom: 20px;
-}
 
-.demo-button-row2 {
-    margin-bottom: 10px;
-}
 
-.demo-button-row3{
-    margin-bottom: 10px;
-    display:block
-}
-.nut-button {
-    margin-right: 15px;
-
-}
-
-
-.block {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    width: 100px;
-    height: 100px;
-    margin: -50px 0 0 -50px;
+.demoContent {
+    
     background-color: #1989fa;
 }

miniprogram_dev/pages/basic/pages/transition/index.js

@@ -9,7 +9,6 @@ Component({
 
     methods: {
         onClickFade() {
-            console.log('点击')
         this.trigger('fade');
         },
     
@@ -48,9 +47,9 @@ Component({
         onClickCustom() {
             this.setData({ showCustom: true });
 
-            setTimeout(()=>{
-                this.setData({  showCustom: false });
-            }, 1000)
+            // setTimeout(()=>{
+            //     this.setData({  showCustom: false });
+            // }, 1000)
         },
 
         trigger(name){

src/packages/grid-item/index.ts

@@ -23,7 +23,7 @@ NutComponent({
       square:false,
       border:true,
       reverse:false,
-      direction:'horizontal',
+      direction:'vertical',
       clickable:false
     },
     iconProps:{
@@ -34,7 +34,6 @@ NutComponent({
 
   methods: {
     updateParent:function(){
-      console.log('更新地址',this.parent.data)
       const that = this
       this.setData({
         parent:that.parent.data

src/packages/popup/index.ts

@@ -32,6 +32,21 @@ NutComponent({
       value: 'center'
     },
     overlayStyle: String,
+
+    closeable: {
+      type: Boolean,
+      value: false
+    },
+    closeIconPosition: {
+      type: String,
+      value: 'top-right'
+    },
+    closeIcon: {
+      type: String,
+      value: 'close'
+    },
+
+    // lockScroll:{}
   },
 
   methods: {
@@ -39,6 +54,10 @@ NutComponent({
       console.log('点击')
 
       this.$emit('clickOverlay')
+    },
+
+    onClickCloseIcon(){
+      this.$emit('clickCloseIcon')
     }
   },
 });

src/packages/popup/index.wxml

@@ -1,7 +1,8 @@
 <wxs src="./index.wxs" module="computed" />
 
 <nut-overlay
-  show="{{ overlay && show }}"
+  wx:if="{{ overlay }}"
+  show="{{ show }}"
   zIndex="{{zIndex}}"
   duration="{{duration}}"
   overlay-style="{{overlayStyle}}"
@@ -9,22 +10,23 @@
   />
 
 <nut-transition 
-  name="fade" 
+  name="{{ computed.animationName({position})}}" 
   show='{{ show }}' 
-  custom-class="nut-overlay custom-class" 
-  custom-style='z-index:{{zIndex}};{{overlayStyle}}'   
+  custom-class="{{computed.classes({position,popClass,round})}}"
+  custom-style='z-index:{{zIndex}};{{popStyle}}'   
   bind:tap='onClick'
   duration='{{duration}}'> 
-    <view wx:if="{{show}}" class="{{computed.classes({position,popClass,round})}}" style="z-index:{{zIndex}};transitionDuration:{{duration}}s;{{popStyle}}" >
-        
-        <slot></slot>
-        <view
-          wx:if="{{show}}"
-          bindtap="onClickCloseIcon"
-          class="nut-popup__close-icon"
-        >
-          <!-- <nut-icon name='close'></nut-icon> -->
-        </view>
-      </view>
+    <slot></slot>
 
+    <view
+      wx:if="{{closeable}}"
+      bindtap="onClickCloseIcon"
+      class="nut-popup__close-icon {{'nut-popup__close-icon--' + closeIconPosition}}"
+    >
+    <nut-icon name="{{closeIcon}}"></nut-icon>
+      <!-- <slot name="close-icon">
+        <Close height="12px"></Close>
+      </slot> -->
+    </view>
+    
 </nut-transition>

src/packages/popup/index.wxs

@@ -31,7 +31,16 @@ function Styled(data) {
     return style([styley]);
 }
 
+function AnimationName(data){
+    console.log(data)
+    if( data.position == 'center') return 'fade'
+    if( data.position == 'top') return 'fade-down'
+    if( data.position == 'bottom') return 'fade-up'
+
+    return 'fade-'+data.position
+}
 module.exports = {
     classes: Classes,
-    styled: Styled
+    styled: Styled,
+    animationName:AnimationName
 };

tools/demo/pages/basic/pages/popup/index.js

@@ -4,8 +4,14 @@ Component({
     data:{
         show:false,
         positionShow: false,
+        position:'top',
+        positionLRShow:false,
+        positionLR:'left',
         styleShow:false,
-        timeShow:false
+        roundPopopShow:false,
+        iconPopopShow:false,
+        closeIconPosition:'top-right',
+        customIconPopopShow:false
     },
 
     methods: {
@@ -25,11 +31,49 @@ Component({
             this.setData({ show:tag });
         },
 
-        onClickPositionShow(){
-            this.setData({positionShow:true})
+        onClickPositionShow(e){
+            var posi = e.target.dataset.position
+            this.setData({
+                position:posi,
+                positionShow:true
+            })
+        },
+        onClickPositionLRShow(e){
+            var posi = e.target.dataset.position
+            this.setData({
+                positionLR:posi,
+                positionLRShow:true
+            })
         },
         onClickPositionHide(){
-            this.setData({positionShow:false})
-        }
+            this.setData({
+                positionLRShow:false,
+                positionShow:false})
+        },
+
+        onClickRoundHide(){
+            this.setData({ roundPopopShow:false });
+        },
+        onClickRoundShow(){
+            this.setData({ roundPopopShow:true });
+        },
+        onClickIconShow(e){
+            var posi = e.target.dataset.position
+            if(posi){
+                this.setData({
+                    closeIconPosition:posi
+                })
+            }
+            this.setData({ iconPopopShow:true });
+        },
+        onClickIconHide(){
+            this.setData({ iconPopopShow:false });
+        },
+        onClickCustomIconShow(e){
+            this.setData({ customIconPopopShow:true });
+        },
+        onClickCustomIconHide(){
+            this.setData({ customIconPopopShow:false });
+        },
     }
 })

tools/demo/pages/basic/pages/popup/index.wxml

@@ -2,21 +2,29 @@
     <h2>基础用法</h2>
 
     <nut-cell title="展示弹出层"  bind:click='onClickShow'></nut-cell>
-    <nut-popup pop-style="padding:30px 50px" show='{{ show }}' bind:clickOverlay="onClickOverlay">正文</nut-popup>
+    <nut-popup pop-style="padding:30px 50px" show='{{ show }}' bind:clickOverlay="onClickOverlay"><view>正文</view></nut-popup>
+    
 
     <h2>弹出位置</h2>
-     <nut-cell title="顶部弹出"  bind:click='onClickPositionShow'></nut-cell>
-     <nut-cell title="底部弹出"  bind:click='onClickShow'></nut-cell>
-     <nut-cell title="左侧弹出"  bind:click='onClickShow'></nut-cell>
-     <nut-cell title="右侧弹出"  bind:click='onClickShow'></nut-cell>
-     <nut-popup position="top" pop-style="height:20%" show='{{ positionShow }}' bind:clickOverlay="onClickPositionHide"></nut-popup>
+
+    <nut-grid>
+      <nut-grid-item icon="rect-up" text="顶部弹出" data-position='top'  bindtap='onClickPositionShow'></nut-grid-item>
+      <nut-grid-item icon="rect-down" text="底部弹出" data-position='bottom'  bindtap='onClickPositionShow'></nut-grid-item>
+      <nut-grid-item icon="rect-left" text="左侧弹出" data-position='left'  bindtap='onClickPositionLRShow'></nut-grid-item>
+      <nut-grid-item icon="rect-right" text="右侧弹出" data-position='right'  bindtap='onClickPositionLRShow'></nut-grid-item>
+    </nut-grid>
+    <nut-popup position="{{ position }}" pop-style="height:20%" show='{{ positionShow }}' bind:clickOverlay="onClickPositionHide"></nut-popup>
+    <nut-popup position="{{ positionLR }}" pop-style="height:100%;width:20%" show='{{ positionLRShow }}' bind:clickOverlay="onClickPositionHide"></nut-popup>
 
      <h2>关闭图标</h2>
-     <nut-cell title="关闭图标"  bind:click='onClickShow'></nut-cell>
-     <nut-cell title="自定义图标"  bind:click='onClickShow'></nut-cell>
-     <nut-cell title="图标位置"  bind:click='onClickShow'></nut-cell>
+     <nut-cell title="关闭图标"  bind:click='onClickIconShow'></nut-cell>
+     <nut-cell title="自定义图标"  bind:click='onClickCustomIconShow'></nut-cell>
+     <nut-cell title="图标位置" data-position="top-left"  bind:click='onClickIconShow'></nut-cell>
+     <nut-popup position="bottom" round="true" closeable="true" closeIconPosition='{{closeIconPosition}}' pop-style="height:20%" show='{{ iconPopopShow }}' bind:clickOverlay="onClickIconHide" bind:clickCloseIcon='onClickIconHide'></nut-popup>
+      <nut-popup position="bottom" round="true" closeable="true" closeIcon="heart-fill-n"  pop-style="height:20%" show='{{ customIconPopopShow }}' bind:clickOverlay="onClickCustomIconHide" bind:clickCloseIcon='onClickCustomIconHide'></nut-popup>
+
+    <h2>圆角弹框</h2>
+    <nut-cell title="圆角弹框"  bind:click='onClickRoundShow'></nut-cell>
+    <nut-popup position="bottom" round="true" pop-style="height:20%" show='{{ roundPopopShow }}' bind:clickOverlay="onClickRoundHide"></nut-popup>
 
-     <h2>圆角弹框</h2>
-    <nut-cell title="圆角弹框"  bind:click='onClickShow'></nut-cell>
-  
 </view>

tools/demo/pages/basic/pages/popup/index.wxss

@@ -1,27 +1,6 @@
-.demo-button-row {
-    margin-bottom: 20px;
-}
 
-.demo-button-row2 {
-    margin-bottom: 10px;
-}
 
-.demo-button-row3{
-    margin-bottom: 10px;
-    display:block
-}
-.nut-button {
-    margin-right: 15px;
-
-}
-
-
-.block {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    width: 100px;
-    height: 100px;
-    margin: -50px 0 0 -50px;
+.demoContent {
+    
     background-color: #1989fa;
 }

tools/demo/pages/basic/pages/transition/index.js

@@ -9,7 +9,6 @@ Component({
 
     methods: {
         onClickFade() {
-            console.log('点击')
         this.trigger('fade');
         },
     
@@ -48,9 +47,9 @@ Component({
         onClickCustom() {
             this.setData({ showCustom: true });
 
-            setTimeout(()=>{
-                this.setData({  showCustom: false });
-            }, 1000)
+            // setTimeout(()=>{
+            //     this.setData({  showCustom: false });
+            // }, 1000)
         },
 
         trigger(name){