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

src/config.ts

@@ -53,13 +53,13 @@ export const nav = [
         author: 'richard1015'
       },
       {
-        name: 'price',
-        sort: 1,
+        name: 'Price',
+        sort: 4,
         cName: '价格组件',
         type: 'component',
         show: true,
-        desc: ''
-        // author: 'hahaha'
+        desc: '价格组件',
+        author: 'ailululu'
       }
     ]
   },

src/packages/cell/index.vue

 <template>
   <view :class="classes" @click="handleClick">
-    <view class="nut-cell__title">
-      <template v-if="subTitle">
-        <view class="title">{{ title }}</view>
-        <view class="nut-cell__title-desc">{{ subTitle }}</view>
-      </template>
-      <template v-else>
-        {{ title }}
-      </template>
-    </view>
-    <view v-if="desc" class="nut-cell__value">{{ desc }}</view>
-    <nut-icon v-if="isLink || to" name="right"></nut-icon>
+    <slot>
+      <view class="nut-cell__title">
+        <template v-if="subTitle">
+          <view class="title">{{ title }}</view>
+          <view class="nut-cell__title-desc">{{ subTitle }}</view>
+        </template>
+        <template v-else>
+          {{ title }}
+        </template>
+      </view>
+      <view v-if="desc" class="nut-cell__value">{{ desc }}</view>
+      <nut-icon v-if="isLink || to" name="right"></nut-icon>
+    </slot>
   </view>
 </template>
 

src/packages/price/demo.vue

 <template>
   <div class="demo">
     <h2>基本用法</h2>
-    <div class="demo-price-box">
+    <nut-cell>
       <nut-price :price="1010" :needSymbol="false" :thousands="true" />
-    </div>
+    </nut-cell>
     <h2>无人民币符号，有千位分隔</h2>
-    <div class="demo-price-box">
+    <nut-cell>
       <nut-price :price="10010.01" :needSymbol="true" :thousands="false" />
-    </div>
+    </nut-cell>
     <h2>带人民币符号，有千位分隔，保留小数点后三位</h2>
-    <div class="demo-price-box">
+    <nut-cell>
       <nut-price :price="15213.1221" :decimalDigits="3" :needSymbol="true" :thousands="true" />
-    </div>
+    </nut-cell>
   </div>
 </template>
 
 <script lang="ts">
 import Price from '@/packages/price/index.vue';
+import Cell from '@/packages/cell/index.vue';
 import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('price');
 export default createDemo({
   props: {
     text: String
   },
-  components: { [Price.name]: Price }
+  components: {
+    [Price.name]: Price,
+    [Cell.name]: Cell
+  }
 });
 </script>
 
-<style lang="scss" scoped>
-.demo-price-box {
-  padding: 5px 20px;
-  min-height: 43px;
-  background: rgba(255, 255, 255, 1);
-  border-radius: 7px;
-  box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
-}
-</style>
+<style lang="scss" scoped></style>

src/sites/assets/styles/md-style.scss

@@ -2,10 +2,8 @@
 
 .doc-content-document {
   position: relative;
-  margin: 10px;
   width: 800px;
   background: #fff;
-  border-left: 1px solid #eee;
   padding-left: 58px;
   .card {
     margin-bottom: 24px;

src/sites/assets/util/ref.ts

+import { ref } from 'vue';
+
+export const currentRoute = ref('/');

src/sites/doc/App.vue

@@ -20,5 +20,6 @@ export default defineComponent({
   width: 100%;
   display: flex;
   flex-direction: column;
+  padding-top: $doc-header-height;
 }
 </style>

src/sites/doc/components/Header.vue

@@ -13,6 +13,11 @@ export default defineComponent({
 <style lang="scss">
 .doc {
   &-header {
+    position: fixed;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    right: 0;
     background: $doc-header-bg;
     background-size: cover;
     background-position: center;

src/sites/doc/components/Nav.vue

@@ -12,8 +12,8 @@
     <ol v-for="_nav in nav" :key="_nav">
       <li>{{ _nav.name }}</li>
       <ul>
-        <li class="active" v-for="_package in _nav.packages" :key="_package">
-          <router-link :to="_package.name.toLocaleLowerCase()">
+        <li :class="{ active: isActive(_package.name) }" v-for="_package in _nav.packages" :key="_package">
+          <router-link :to="_package.name.toLowerCase()">
             {{ _package.name }}&nbsp;&nbsp;<b>{{ _package.cName }}</b>
           </router-link>
         </li>
@@ -22,14 +22,22 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, reactive, computed } from 'vue';
+import { currentRoute } from '@/sites/assets/util/ref';
 import { nav } from '@/config';
 export default defineComponent({
   name: 'doc-nav',
   setup() {
-    return reactive({
-      nav
+    const isActive = computed(() => {
+      return function(name: string) {
+        return currentRoute.value == name.toLowerCase();
+      };
     });
+    return {
+      isActive,
+      nav: reactive(nav),
+      currentRoute
+    };
   }
 });
 </script>
@@ -37,11 +45,16 @@ export default defineComponent({
 <style lang="scss">
 .doc {
   &-nav {
+    position: fixed;
+    top: $doc-header-height + 50;
+    left: 0;
+    bottom: 0;
+    z-index: 1;
     background: $white;
-    width: 291px;
-    flex-shrink: 0;
-    height: 100%;
-    padding: 50px 0 50px 35px;
+    width: 290px;
+    border-right: 1px solid #eee;
+    overflow: auto;
+    padding-left: 35px;
     ol {
       &.introduce {
         padding-left: 5px;
@@ -66,12 +79,12 @@ export default defineComponent({
             content: '';
             left: 0;
             top: 50%;
-            margin-top: -14px;
-            bottom: 0;
-            width: 6px;
-            height: 28px;
-            background: $doc-default-primary-bg;
-            border-radius: 3px;
+            width: 22px;
+            margin-top: -5px;
+            height: 10px;
+            transform: rotate(90deg);
+            background: url(https://img10.360buyimg.com/imagetools/jfs/t1/136135/19/14659/946/5fa20aa8E33a9aa26/d329fbe669171208.png) no-repeat;
+            background-size: 100% 100%;
           }
         }
       }

src/sites/doc/router.ts

@@ -6,9 +6,11 @@ const pagesRouter: Array<RouteRecordRaw> = [];
 const files = require.context('@/packages', true, /doc\.md$/);
 files.keys().forEach(component => {
   const componentEntity = files(component).default;
+  const name = `${component.split('/')[1]}`;
   pagesRouter.push({
-    path: `/${component.split('/')[1]}`,
-    component: componentEntity
+    path: name,
+    component: componentEntity,
+    name
   });
 });
 const routes: Array<RouteRecordRaw> = [

src/sites/doc/views/Index.vue

 <template>
   <doc-header></doc-header>
+  <doc-nav></doc-nav>
   <div class="doc-content">
-    <doc-nav></doc-nav>
-    <doc-demo-preview :url="demoUrl"></doc-demo-preview>
     <div class="doc-content-document">
       <router-view />
     </div>
+    <doc-footer></doc-footer>
+    <doc-demo-preview :url="demoUrl"></doc-demo-preview>
   </div>
-  <doc-footer></doc-footer>
 </template>
 <script lang="ts">
 import { defineComponent, reactive } from 'vue';
@@ -16,6 +16,7 @@ import Header from '@/sites/doc/components/Header.vue';
 import Nav from '@/sites/doc/components/Nav.vue';
 import Footer from '@/sites/doc/components/Footer.vue';
 import DemoPreview from '@/sites/doc/components/DemoPreview.vue';
+import { currentRoute } from '@/sites/assets/util/ref';
 export default defineComponent({
   name: 'doc',
   components: {
@@ -31,6 +32,7 @@ export default defineComponent({
 
     onBeforeRouteUpdate(to => {
       const { origin, pathname } = window.location;
+      currentRoute.value = to.name as string;
       data.demoUrl = `${origin}${pathname.replace('index.html', '')}demo.html#${to.path}`;
     });
 
@@ -42,7 +44,13 @@ export default defineComponent({
 <style lang="scss" scoped>
 .doc {
   &-content {
+    margin-left: 290px;
     display: flex;
+    flex-direction: column;
+
+    &-document {
+      min-height: 800px;
+    }
   }
 }
 </style>

src/sites/mobile/components/Index.vue

@@ -12,7 +12,7 @@
         <li>{{ _nav.name }}</li>
         <ul>
           <li v-for="_package in _nav.packages" :key="_package">
-            <router-link :to="_package.name.toLocaleLowerCase()">{{ _package.name }}&nbsp;&nbsp;{{ _package.cName }} </router-link>
+            <router-link :to="_package.name.toLowerCase()">{{ _package.name }}&nbsp;&nbsp;{{ _package.cName }} </router-link>
           </li>
         </ul>
       </ol>