Merge branch 'v2' of https://github.com/jdf2e/nutui into v2

src/packages/sidenavbar/__test__/sidenavbar.spec.js

@@ -0,0 +1,7 @@
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import SideNavBar from '../sidenavbar.vue';
+
+describe('SideNavBar.vue', () => {
+    
+});

src/packages/sidenavbar/demo.vue

@@ -1,12 +1,87 @@
 <template>
+  <div class="demo-list">
+    <h4>基本用法</h4>
     <div>
-        <nut-sidenavbar>
-          <nut-subsidenavbar>
-            <nut-sidenavbaritem key="1" title="云存储"></nut-sidenavbaritem>
-            <nut-sidenavbaritem key="2" title="弹性云计算"></nut-sidenavbaritem>
-          </nut-subsidenavbar>
-        </nut-sidenavbar>
+        <nut-cell :is-link="true" :show-icon="true" @click.native="showNav">
+            <span slot="title">
+                <label>右侧</label>
+            </span>
+        </nut-cell>
+        <nut-popup
+            position="right"
+            v-model="show1"
+            :style="{ width, height }"
+        >
+            <nut-sidenavbar :show="show1">
+                <nut-subsidenavbar title="图像理解" ikey="3" :open="false">
+                    <nut-sidenavbaritem ikey="4" title="菜品识别"></nut-sidenavbaritem>
+                    <nut-sidenavbaritem ikey="5" title="拍照购"></nut-sidenavbaritem>
+                </nut-subsidenavbar>
+                <nut-subsidenavbar title="自然语言处理" ikey="12">
+                    <nut-sidenavbaritem ikey="13" title="词法分析"></nut-sidenavbaritem>
+                    <nut-sidenavbaritem ikey="14" title="句法分析"></nut-sidenavbaritem>
+                </nut-subsidenavbar>
+            </nut-sidenavbar>
+        </nut-popup>
     </div>
+    <div>
+        <nut-cell :is-link="true" :show-icon="true" @click.native="showNav2">
+            <span slot="title">
+                <label>左侧</label>
+            </span>
+        </nut-cell>
+        <nut-popup
+            position="left"
+            v-model="show2"
+            :style="{ width, height }"
+        >
+            <nut-sidenavbar>
+                <nut-subsidenavbar title="图像理解" ikey="3" :open="false">
+                    <nut-sidenavbaritem ikey="4" title="菜品识别"></nut-sidenavbaritem>
+                    <nut-sidenavbaritem ikey="5" title="拍照购"></nut-sidenavbaritem>
+                </nut-subsidenavbar>
+                <nut-subsidenavbar title="自然语言处理" ikey="12">
+                    <nut-sidenavbaritem ikey="13" title="词法分析"></nut-sidenavbaritem>
+                    <nut-sidenavbaritem ikey="14" title="句法分析"></nut-sidenavbaritem>
+                </nut-subsidenavbar>
+            </nut-sidenavbar>
+        </nut-popup>
+    </div>
+    <h4>导航嵌套（建议最多三层）,点击第一条回调</h4>
+    <div>
+        <nut-cell :is-link="true" :show-icon="true" @click.native="showNav3">
+            <span slot="title">
+                <label>显示</label>
+            </span>
+        </nut-cell>
+        <nut-popup
+            position="right"
+            v-model="show3"
+            :style="{ width, height }"
+        >
+            <nut-sidenavbar :show="show3">
+                <nut-sidenavbaritem ikey="1" title="人脸识别" @click="handleClick('人脸识别')"></nut-sidenavbaritem>
+                <nut-sidenavbaritem ikey="2" title="云存自然语言处理"></nut-sidenavbaritem>
+                <nut-subsidenavbar title="图像理解" ikey="3" :open="false">
+                    <nut-sidenavbaritem ikey="4" title="菜品识别"></nut-sidenavbaritem>
+                    <nut-sidenavbaritem ikey="5" title="拍照购"></nut-sidenavbaritem>
+                </nut-subsidenavbar>
+                <nut-subsidenavbar title="智能城市AI" ikey="6">
+                    <nut-sidenavbaritem ikey="7" title="企业风险预警模型"></nut-sidenavbaritem>
+                    <nut-sidenavbaritem ikey="8" title="水质量检测"></nut-sidenavbaritem>
+                    <nut-subsidenavbar title="人体识别" ikey="9">
+                        <nut-sidenavbaritem ikey="10" title="人体检测"></nut-sidenavbaritem>
+                        <nut-sidenavbaritem ikey="11" title="细粒度人像分割"></nut-sidenavbaritem>
+                    </nut-subsidenavbar>
+                </nut-subsidenavbar>
+                <nut-subsidenavbar title="自然语言处理" ikey="12">
+                    <nut-sidenavbaritem ikey="13" title="词法分析"></nut-sidenavbaritem>
+                    <nut-sidenavbaritem ikey="14" title="句法分析"></nut-sidenavbaritem>
+                </nut-subsidenavbar>
+            </nut-sidenavbar>
+        </nut-popup>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -15,10 +90,33 @@ export default {
 
   },
   data() {
-    return {};
+    return {
+        show1: false,
+        show2: false,
+        show3: false,
+        width: '80%',
+        height: '100%'
+    };
   },
   methods: {
-      
+    showNav() {
+        this.show1 = true
+        this.show2 = false
+        this.show3 = false
+    },
+    showNav2() {
+        this.show1 = false
+        this.show2 = true
+        this.show3 = false
+    },
+    showNav3() {
+        this.show1 = false
+        this.show2 = false
+        this.show3 = true
+    },
+    handleClick(str) {
+        alert(str)
+    }
   }
 };
 </script>

src/packages/sidenavbar/doc.md

@@ -0,0 +1,109 @@
+# SideNavBar 侧边栏导航
+
+侧边栏导航
+
+## 基础用法
+
+```html
+<nut-popup
+    position="right"
+    v-model="show1"
+    :style="{ width, height }"
+>
+    <nut-sidenavbar :show="show1">
+        <nut-subsidenavbar title="图像理解" ikey="3" :open="false">
+            <nut-sidenavbaritem ikey="4" title="菜品识别"></nut-sidenavbaritem>
+            <nut-sidenavbaritem ikey="5" title="拍照购"></nut-sidenavbaritem>
+        </nut-subsidenavbar>
+        <nut-subsidenavbar title="自然语言处理" ikey="12">
+            <nut-sidenavbaritem ikey="13" title="词法分析"></nut-sidenavbaritem>
+            <nut-sidenavbaritem ikey="14" title="句法分析"></nut-sidenavbaritem>
+        </nut-subsidenavbar>
+    </nut-sidenavbar>
+</nut-popup>
+```
+
+## 嵌套（建议最多三层）
+```html
+<nut-popup
+    position="right"
+    v-model="show3"
+    :style="{ width, height }"
+>
+    <nut-sidenavbar :show="show3">
+        <nut-sidenavbaritem ikey="1" title="人脸识别" @click="handleClick('人脸识别')"></nut-sidenavbaritem>
+        <nut-sidenavbaritem ikey="2" title="云存自然语言处理"></nut-sidenavbaritem>
+        <nut-subsidenavbar title="图像理解" ikey="3" :open="false">
+            <nut-sidenavbaritem ikey="4" title="菜品识别"></nut-sidenavbaritem>
+            <nut-sidenavbaritem ikey="5" title="拍照购"></nut-sidenavbaritem>
+        </nut-subsidenavbar>
+        <nut-subsidenavbar title="智能城市AI" ikey="6">
+            <nut-sidenavbaritem ikey="7" title="企业风险预警模型"></nut-sidenavbaritem>
+            <nut-sidenavbaritem ikey="8" title="水质量检测"></nut-sidenavbaritem>
+            <nut-subsidenavbar title="人体识别" ikey="9">
+                <nut-sidenavbaritem ikey="10" title="人体检测"></nut-sidenavbaritem>
+                <nut-sidenavbaritem ikey="11" title="细粒度人像分割"></nut-sidenavbaritem>
+            </nut-subsidenavbar>
+        </nut-subsidenavbar>
+        <nut-subsidenavbar title="自然语言处理" ikey="12">
+            <nut-sidenavbaritem ikey="13" title="词法分析"></nut-sidenavbaritem>
+            <nut-sidenavbaritem ikey="14" title="句法分析"></nut-sidenavbaritem>
+        </nut-subsidenavbar>
+    </nut-sidenavbar>
+</nut-popup>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+        show1: false,
+        show3: false,
+        width: '80%',
+        height: '100%'
+    };
+  },
+  methods: {
+    showNav() {
+        this.show1 = true
+        this.show3 = false
+    },
+    showNav3() {
+        this.show1 = false
+        this.show3 = true
+    },
+    handleClick(str) {
+        alert(str)
+    }
+  }
+};
+```
+
+## SideNavBar
+
+| 字段 | 说明 | 类型 | 默认值
+| ----- | ----- | ----- | -----
+| offset | 导航缩进宽度 | Number/String | 15
+
+## SubSideNavBar
+| 字段 | 说明 | 类型 | 默认值
+| ----- | ----- | ----- | -----
+| title | 导航标题 | String | ''
+| ikey | 导航唯一标识 | String/Number | ''
+| open | 导航是否默认展开 | Boolean | true
+
+## SubSideNavBar Event
+| 字段 | 说明 | 回调参数
+| ----- | ----- | -----
+| titleClick | 导航点击 | 无
+
+## SideNavBarItem
+| 字段 | 说明 | 类型 | 默认值
+| ----- | ----- | ----- | -----
+| title | 导航标题 | String | ''
+| ikey | 导航唯一标识 | String/Number | ''
+
+## SideNavBarItem Event
+| 字段 | 说明 | 回调参数
+| ----- | ----- | -----
+| click | 导航点击 | 无

src/packages/sidenavbar/sidenavbar.vue

@@ -1,46 +1,47 @@
 <template>
     <div class="nut-sidenavbar">
-        <nut-popup
-            :position="position"
-            v-model="show"
-            :style="{ width, height }"
-        >
-            <div class="sidenavbar-content">
-                <div class="sidenavbar-list">
-                    <slot></slot>
-                </div>
+        <div class="sidenavbar-content">
+            <div class="sidenavbar-list">
+                <slot></slot>
             </div>
-        </nut-popup>
+        </div>
     </div>
 </template>
 <script>
 export default {
     name:'nut-sidenavbar',
     props: {
-        show:{
-            type: Boolean,
-            default: true
-        },
-        position:{
-            type: String,
-            default: 'right'
-        },
-        width:{
+        offset:{
             type:[String,Number],
-            default: '80%'
-        },
-        height:{
-            type:[String,Number],
-            default: '100%'
+            default:15
+        }
+    },
+    mounted() {
+        let slots = this.$slots.default;
+        if(slots) {
+            slots = slots.filter(item => item.elm.nodeType !== 3).map(item => {
+                return item.elm
+            })
+            
+            this.setPaddingLeft(slots)
         }
     },
     data() {
         return {
-            
+            count: 1
         };
     },
     methods: {
-
+        setPaddingLeft(nodeList, level = 1) {
+            for(let i = 0; i < nodeList.length; i++) {
+                let item = nodeList[i];
+                item.children[0].style.paddingLeft = this.offset * level + 'px'
+                if(item.className !== 'nut-sidenavbaritem') {
+                    this.setPaddingLeft(Array.from(item.children[1].children), ++this.count)
+                }
+            }
+            this.count = 1;
+        }
     }
 }
 </script>

src/packages/sidenavbaritem/sidenavbaritem.scss

@@ -1,9 +1,8 @@
 .nut-sidenavbaritem{
-    li{
-        .sub-sidenavbar-item-item{
-            line-height: 40px;
-            padding: 0 50px;
-            color: #9b9ea0;
-        }
+    height: 40px;
+    line-height: 40px;
+    .item-title{
+        color: $title-color;
+        background-color: #fff;
     }
 }

src/packages/sidenavbaritem/sidenavbaritem.vue

@@ -1,32 +1,27 @@
 <template>
-    <div class="nut-sidenavbaritem">     
-        <li>
-            <a href="javascript:;" class="item-title sub-sidenavbar-item-item">
-                {{ title }}
-            </a>
-        </li>
+    <div class="nut-sidenavbaritem" @click.stop="handleClick" :ikey="ikey"> 
+        <a href="javascript:;" class="item-title">
+            {{ title }}
+        </a>
     </div>
 </template>
 <script>
 export default {
     name:'nut-sidenavbaritem',
     props: {
-        disabled: {
-            type: Boolean,
-            default: true
-        },
         title: {
             type: String,
             default: ''
+        },
+        ikey: {
+            type: String,
+            default: ''
         }
     },
-    data() {
-        return {
-            
-        };
-    },
     methods: {
-
+        handleClick() {
+            this.$emit('click');
+        }
     }
 }
 </script>

src/packages/subsidenavbar/subsidenavbar.scss

@@ -1,4 +1,8 @@
 .nut-subsidenavbar{
+    display: grid;
+    float: left;
+    width: 100%;
+    position: relative;
     .item-title{
         display: block;
         width: 100%;
@@ -8,44 +12,28 @@
         text-overflow: ellipsis;
         white-space: nowrap;
         box-sizing: border-box;
-        border-bottom: 1px solid #f8f8f8;
+        border-bottom: 1px solid $light-color;
+        color: $title-color;
+        font-size: $font-size-large;
+        background-color: $light-color;
+        .sidenavbar-title{
+            line-height: 40px;
+            color: $title-color;
+        }
     }
     .sidenavbar-icon{
         position: absolute;
         top: 50%;
         right: 20px;
         transform: translateY(-50%);
-    }
-    .sidenavbar-title{
-        font-size: 16px;
-        line-height: 40px;
-        height: 40px;
-    }
-    .sidenavbar-item{
-        float: left;
-        width: 100%;
-        position: relative;
-        border-bottom: 1px solid #f8f8f8;
-        background-color: #f8f8f8;
-        .sidenavbar-item-title{
-            padding: 0 18px;
-            .sidenavbar-title{
-                color: #333;
-            }
-        }
-        .sub-sidenavbar-box{
-            background-color: #fefefe;
-            .sub-sidenavbar-list{
-                .sub-sidenavbar-item{
-                    width: 100%;
-                    .sub-sidenavbar-item-title{
-                        padding: 0 34px;
-                        .sub-sidenavbar-title{
-                            color: #333;
-                        }
-                    }
-                }
+        i{
+            transition: transform $animation-duration $ease-in-out;
+            &.up{
+                transform: rotate(-180deg);
             }
         }
     }
+    .sub-sidenavbar-list{
+        width: 100%;
+    }
 }

src/packages/subsidenavbar/subsidenavbar.vue

@@ -1,31 +1,14 @@
 <template>
-    <div class="nut-subsidenavbar">
-        <div class="sidenavbar-item">
-            <div class="item-title sidenavbar-item-title">
-                <a href="javascript:;" class="sidenavbar-title">
-                    云产品
-                </a>
-                <span class="sidenavbar-icon">
-                    <nut-icon type="down"></nut-icon>
-                </span>
-            </div>
-            <div class="sub-sidenavbar-box">
-                <div class="sub-sidenavbar-list">
-                    <div class="sub-sidenavbar-item">
-                        <div class="item-title sub-sidenavbar-item-title">
-                            <a href="javascript:;" class="sidenavbar-title sub-sidenavbar-title">
-                                弹性运算
-                            </a>
-                            <span class="sidenavbar-icon">
-                                <nut-icon type="down"></nut-icon>
-                            </span>
-                        </div>
-                        <ul class="three-sidenavbar-list">
-                            <slot></slot>
-                        </ul>
-                    </div>
-                </div>
-            </div>
+    <div class="nut-subsidenavbar sidenavbar-item" :ikey="ikey">
+        <div class="item-title" @click.stop="handleClick">
+            <a href="javascript:;" class="sidenavbar-title">{{ title }}</a>
+            <span class="sidenavbar-icon"><nut-icon type="down" :class="direction"></nut-icon></span>
+        </div>
+        <div class="sub-sidenavbar-list" 
+            :class="!direction ? 'nutFadeIn' : 'nutFadeOut'"
+            :style="{height: !direction ? 'auto' : 0}" 
+            >
+            <slot></slot>
         </div>
     </div>
 </template>
@@ -33,15 +16,32 @@
 export default {
     name:'nut-subsidenavbar',
     props: {
-        
+        title: {
+            type: String,
+            default: ''
+        },
+        ikey: {
+            type: [String, Number],
+            default: ''
+        },
+        open: {
+            type: Boolean,
+            default: true
+        }
     },
     data() {
         return {
-            
+            direction: ''
         };
     },
+    mounted() {
+        this.direction = this.open ? '' : 'up';
+    },
     methods: {
-
+        handleClick() {
+            this.$emit('titleClick');
+            this.direction = !this.direction ? 'up' : ''
+        }
     }
 }
 </script>