feat: taro 组件分类调整 (#1159)

* fix: datepicker 组件最大值与最小值一样时出错

* feat: datePicker 增加在线调试

* docs: infiniteloading 补充文档

* docs: picker 组件添加在线调试

* feat: icon 新增动态icon

* feat: picker 组件更新

* feat: picker 完成

* feat: sku 组件添加在线调试

* feat: picker 问题修改

* feat: audio

* feat: 更新

* feat: audio

* feat: 新增 audio

* feat: 新增 audio

* fix: 修复 DatePicker 调用失败问题

* docs: 文案修改

* docs: 文案修改

* docs: 动态icon添加 demo

* feat: address 新增默认选中功能

* feat: 路由大写与小写展示的内容不同

* feat: countdown 组件单元测试

* feat: noticebar 单元测试

* feat: 下拉刷新单元测试

* feat: noticebar 新增功能

* upd: noticebar 新增功能

* upd: noticebar 新增功能

* test

* upd: noticebar 新增功能

* fix: 暂时将 picker 的单元测试隐藏

* feat: picker 组件新增单元测试

* fix: picker 组件修改

* upd: address 添加单元测试

* upd: sku 增加单元测试

* upd: audio 添加单元测试

* docs: 文档问题修复 audio

* upd: datepicker 单元测试

* feat: picker 重构

* feat: 新增picker

* feat: picer

* feat: dataPicker

* feat: picker/datepicker 单元测试

* feat: sku 在taro上的修改

* feat: oldPicker 组件

* fix: 版本号修改

* feat: 变量修改

* fix: oldPicker 打包失败

* feat: 组件分类调整

* feat: taro组件分类

Co-authored-by: yangxiaolu3 <yangxiaolu1993@qq.com>
Co-authored-by: Drjingfubo <50685476+Drjingfubo@users.noreply.github.com>

src/config.json

@@ -1,7 +1,8 @@
 {
   "docs": {
     "name": "指南",
-    "packages": [{
+    "packages": [
+      {
         "name": "intro",
         "cName": "介绍",
         "show": true
@@ -53,7 +54,8 @@
   "nav": [{
       "name": "基础组件",
       "enName": "base",
-      "packages": [{
+      "packages": [
+        {
           "version": "3.0.0",
           "name": "Button",
           "taro": true,
@@ -125,7 +127,8 @@
     {
       "name": "布局组件",
       "enName": "layout",
-      "packages": [{
+      "packages": [
+        {
           "version": "3.0.0",
           "name": "Layout",
           "taro": true,

src/sites/mobile-taro/vue/src/app.config.ts

@@ -1,44 +1,25 @@
 let subpackages = [
   {
     root: 'layout',
-    pages: ['pages/layout/index', 'pages/imagepreview/index', 'pages/sticky/index']
+    pages: ['pages/layout/index', 'pages/divider/index', 'pages/sticky/index', 'pages/grid/index']
   },
   {
     root: 'feedback',
     pages: [
       'pages/swipe/index',
-      'pages/collapse/index',
       'pages/backtop/index',
       'pages/actionsheet/index',
       'pages/dialog/index',
       'pages/toast/index',
       'pages/notify/index',
-      'pages/empty/index',
-      'pages/noticebar/index',
-      'pages/range/index',
-      'pages/popup/index',
       'pages/switch/index',
-      'pages/swiper/index',
       'pages/drag/index',
-      'pages/steps/index',
-      'pages/infiniteloading/index',
-      'pages/progress/index',
-      'pages/circleprogress/index',
-      'pages/searchbar/index',
-      'pages/list/index'
+      'pages/infiniteloading/index'
     ]
   },
   {
     root: 'base',
-    pages: [
-      'pages/cell/index',
-      'pages/icon/index',
-      'pages/price/index',
-      'pages/button/index',
-      'pages/avatar/index',
-      'pages/overlay/index',
-      'pages/divider/index'
-    ]
+    pages: ['pages/cell/index', 'pages/icon/index', 'pages/button/index', 'pages/overlay/index', 'pages/popup/index']
   },
   {
     root: 'nav',
@@ -51,13 +32,13 @@ let subpackages = [
       'pages/menu/index',
       'pages/pagination/index',
       'pages/indicator/index',
-      'pages/grid/index',
       'pages/sidenavbar/index'
     ]
   },
   {
     root: 'dentry',
     pages: [
+      'pages/range/index',
       'pages/inputnumber/index',
       'pages/checkbox/index',
       'pages/input/index',
@@ -70,15 +51,33 @@ let subpackages = [
       'pages/picker/index',
       'pages/datepicker/index',
       'pages/textarea/index',
+      'pages/numberkeyboard/index',
+      'pages/cascader/index',
+      'pages/oldpicker/index',
+      'pages/searchbar/index'
+    ]
+  },
+  {
+    root: 'exhibition',
+    pages: [
+      'pages/avatar/index',
+      'pages/price/index',
+      'pages/imagepreview/index',
+      'pages/collapse/index',
+      'pages/empty/index',
+      'pages/noticebar/index',
+      'pages/steps/index',
+      'pages/progress/index',
+      'pages/circleprogress/index',
+      'pages/list/index',
       'pages/countdown/index',
       'pages/countup/index',
-      'pages/numberkeyboard/index',
       'pages/badge/index',
       'pages/tag/index',
       'pages/popover/index',
       'pages/skeleton/index',
-      'pages/cascader/index',
-      'pages/oldpicker/index'
+      'pages/table/index',
+      'pages/swiper/index'
     ]
   },
   {
@@ -89,8 +88,7 @@ let subpackages = [
       'pages/barrage/index',
       'pages/timeselect/index',
       'pages/sku/index',
-      'pages/card/index',
-      'pages/table/index'
+      'pages/card/index'
     ]
   }
 ];

src/sites/mobile-taro/vue/src/base/pages/popup/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="demo">
+    <h2>基础用法</h2>
+    <nut-cell title="展示弹出层" is-link @click="state.showBasic = true"></nut-cell>
+    <nut-popup pop-class="popclass" :style="{ padding: '30px 50px' }" v-model:visible="state.showBasic" :z-index="100"
+      >正文</nut-popup
+    >
+    <h2>弹出位置</h2>
+    <nut-cell title="顶部弹出" is-link @click="state.showTop = true"></nut-cell>
+    <nut-popup position="top" :style="{ height: '20%' }" v-model:visible="state.showTop"></nut-popup>
+    <nut-cell title="底部弹出" is-link @click="state.showBottom = true"></nut-cell>
+    <nut-popup position="bottom" :style="{ height: '20%' }" v-model:visible="state.showBottom"></nut-popup>
+    <nut-cell title="左侧弹出" is-link @click="state.showLeft = true"></nut-cell>
+    <nut-popup position="left" :style="{ width: '20%', height: '100%' }" v-model:visible="state.showLeft"></nut-popup>
+    <nut-cell title="右侧弹出" is-link @click="state.showRight = true"></nut-cell>
+    <nut-popup position="right" :style="{ width: '20%', height: '100%' }" v-model:visible="state.showRight"></nut-popup>
+    <h2>关闭图标</h2>
+    <nut-cell title="关闭图标" is-link @click="state.showIcon = true"></nut-cell>
+    <nut-popup position="bottom" closeable :style="{ height: '20%' }" v-model:visible="state.showIcon"></nut-popup>
+    <nut-cell title="图标位置" is-link @click="state.showIconPosition = true"></nut-cell>
+    <nut-popup
+      position="bottom"
+      closeable
+      close-icon-position="top-left"
+      :style="{ height: '20%' }"
+      v-model:visible="state.showIconPosition"
+    ></nut-popup>
+    <nut-cell title="自定义图标" is-link @click="state.showCloseIcon = true"></nut-cell>
+    <nut-popup
+      position="bottom"
+      closeable
+      close-icon-position="top-left"
+      close-icon="heart"
+      :style="{ height: '20%' }"
+      v-model:visible="state.showCloseIcon"
+    ></nut-popup>
+    <h2>圆角弹框</h2>
+    <nut-cell title="圆角弹框" is-link @click="state.showRound = true"></nut-cell>
+    <nut-popup
+      position="bottom"
+      closeable
+      round
+      :style="{ height: '30%' }"
+      v-model:visible="state.showRound"
+    ></nut-popup>
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  props: {},
+  setup() {
+    const state = reactive({
+      showBasic: false,
+      showTop: false,
+      showBottom: false,
+      showLeft: false,
+      showRight: false,
+      showIcon: false,
+      showIconPosition: false,
+      showCloseIcon: false,
+      showRound: false,
+      showCombination: false
+    });
+    return { state };
+  }
+};
+</script>
+
+<style lang="scss"></style>

src/sites/mobile-taro/vue/src/dentry/pages/countdown/index.vue

@@ -31,16 +31,9 @@
     <h2>控制开始和暂停的倒计时</h2>
 
     <nut-cell>
-      <nut-countdown
-        :endTime="end"
-        :paused="paused"
-        @on-paused="onpaused"
-        @on-restart="onrestart"
-      />
+      <nut-countdown :endTime="end" :paused="paused" @on-paused="onpaused" @on-restart="onrestart" />
       <div style="position: absolute; right: 10px; top: 9px">
-        <nut-button type="primary" size="small" @click="toggle">{{
-          paused ? 'start' : 'stop'
-        }}</nut-button>
+        <nut-button type="primary" size="small" @click="toggle">{{ paused ? 'start' : 'stop' }}</nut-button>
       </div>
     </nut-cell>
 

src/sites/mobile-taro/vue/src/feedback/pages/popup/index.vue

@@ -1,128 +0,0 @@
-<template>
-  <div class="demo">
-    <h2>基础用法</h2>
-    <nut-cell
-      title="展示弹出层"
-      is-link
-      @click="state.showBasic = true"
-    ></nut-cell>
-    <nut-popup
-      pop-class="popclass"
-      :style="{ padding: '30px 50px' }"
-      v-model:visible="state.showBasic"
-      :z-index="100"
-      >正文</nut-popup
-    >
-    <h2>弹出位置</h2>
-    <nut-cell title="顶部弹出" is-link @click="state.showTop = true"></nut-cell>
-    <nut-popup
-      position="top"
-      :style="{ height: '20%' }"
-      v-model:visible="state.showTop"
-    ></nut-popup>
-    <nut-cell
-      title="底部弹出"
-      is-link
-      @click="state.showBottom = true"
-    ></nut-cell>
-    <nut-popup
-      position="bottom"
-      :style="{ height: '20%' }"
-      v-model:visible="state.showBottom"
-    ></nut-popup>
-    <nut-cell
-      title="左侧弹出"
-      is-link
-      @click="state.showLeft = true"
-    ></nut-cell>
-    <nut-popup
-      position="left"
-      :style="{ width: '20%', height: '100%' }"
-      v-model:visible="state.showLeft"
-    ></nut-popup>
-    <nut-cell
-      title="右侧弹出"
-      is-link
-      @click="state.showRight = true"
-    ></nut-cell>
-    <nut-popup
-      position="right"
-      :style="{ width: '20%', height: '100%' }"
-      v-model:visible="state.showRight"
-    ></nut-popup>
-    <h2>关闭图标</h2>
-    <nut-cell
-      title="关闭图标"
-      is-link
-      @click="state.showIcon = true"
-    ></nut-cell>
-    <nut-popup
-      position="bottom"
-      closeable
-      :style="{ height: '20%' }"
-      v-model:visible="state.showIcon"
-    ></nut-popup>
-    <nut-cell
-      title="图标位置"
-      is-link
-      @click="state.showIconPosition = true"
-    ></nut-cell>
-    <nut-popup
-      position="bottom"
-      closeable
-      close-icon-position="top-left"
-      :style="{ height: '20%' }"
-      v-model:visible="state.showIconPosition"
-    ></nut-popup>
-    <nut-cell
-      title="自定义图标"
-      is-link
-      @click="state.showCloseIcon = true"
-    ></nut-cell>
-    <nut-popup
-      position="bottom"
-      closeable
-      close-icon-position="top-left"
-      close-icon="heart"
-      :style="{ height: '20%' }"
-      v-model:visible="state.showCloseIcon"
-    ></nut-popup>
-    <h2>圆角弹框</h2>
-    <nut-cell
-      title="圆角弹框"
-      is-link
-      @click="state.showRound = true"
-    ></nut-cell>
-    <nut-popup
-      position="bottom"
-      closeable
-      round
-      :style="{ height: '30%' }"
-      v-model:visible="state.showRound"
-    ></nut-popup>
-  </div>
-</template>
-
-<script lang="ts">
-import { reactive } from 'vue';
-export default {
-  props: {},
-  setup() {
-    const state = reactive({
-      showBasic: false,
-      showTop: false,
-      showBottom: false,
-      showLeft: false,
-      showRight: false,
-      showIcon: false,
-      showIconPosition: false,
-      showCloseIcon: false,
-      showRound: false,
-      showCombination: false
-    });
-    return { state };
-  }
-};
-</script>
-
-<style lang="scss"></style>

src/sites/mobile-taro/vue/src/pages/index/index.vue

@@ -15,7 +15,7 @@
       <ol v-for="_nav in nav" :key="_nav">
         <li>{{ _nav.name }}</li>
         <ul>
-          <template v-for="_package in _nav.packages" :key="_package">
+          <template v-for="_package in reorder(_nav.packages)" :key="_package">
             <li v-if="_package.show">
               <a @click="navigateTo(_package.name.toLowerCase(), _nav.enName)">
                 {{ _package.name }}
@@ -55,6 +55,12 @@ export default {
       nav
     });
 
+    const reorder = (packages: any) => {
+      return packages.sort(function (x: any, y: any) {
+        return x['name'].toLowerCase().localeCompare(y['name'].toLowerCase());
+      });
+    };
+
     const navigateTo = (name, enName) => {
       Taro.navigateTo({
         url: `/${enName}/pages/${name}/index`
@@ -63,6 +69,7 @@ export default {
 
     return {
       ...toRefs(state),
+      reorder,
       navigateTo
     };
   }