feat: docs文档优化

src/packages/__VUE/checkbox/doc.en-US.md

@@ -450,7 +450,7 @@ When the value changes, the `change` event will be triggered
 
 | methodName | Description | Arguments 
 |----- | ----- | ----- 
-| toggleAll | Select all / cancel | `f`,`true`,to select all，`false`,cancel the selection
+| toggleAll | Select all / cancel | `true`,to select all，`false`,cancel the selection
 | toggleReverse | Reverse selection | -
 
 ## Theming

src/packages/__VUE/checkbox/doc.md

@@ -455,7 +455,7 @@ app.use(CheckboxGroup);
 
 | 方法名 | 说明 | 参数 
 |----- | ----- | ----- 
-| toggleAll | 全选/取消 | `f`,传 `true`,表示全选，传 `false`,表示取消全选
+| toggleAll | 全选/取消 | 传 `true`,表示全选，传 `false`,表示取消全选
 | toggleReverse | 反选 | -
 
 ## 主题定制

src/packages/__VUE/checkbox/doc.taro.md

@@ -415,7 +415,7 @@ app.use(CheckboxGroup);
 
 | 方法名 | 说明 | 参数 
 |----- | ----- | ----- 
-| toggleAll | 全选/取消 | `f`,传 `true`,表示全选，传 `false`,表示取消全选
+| toggleAll | 全选/取消 | 传 `true`,表示全选，传 `false`,表示取消全选
 | toggleReverse | 反选 | -
 
 ## 主题定制

src/packages/__VUE/inputnumber/index.taro.vue

@@ -6,7 +6,7 @@
       @click="reduce"
     >
       <slot name="leftIcon">
-        <Minus :width="pxCheck(buttonSize)" :height="pxCheck(buttonSize)" />
+        <Minus :size="pxCheck(buttonSize)" />
       </slot>
     </view>
     <view v-if="readonly" class="nut-input-number__text--readonly">
@@ -18,7 +18,7 @@
       type="number"
       :min="min"
       :max="max"
-      :style="{ width: pxCheck(inputWidth) }"
+      :style="{ width: pxCheck(inputWidth), height: pxCheck(buttonSize) }"
       :disabled="disabled"
       :readonly="readonly"
       :value="modelValue"
@@ -32,7 +32,7 @@
       @click="add"
     >
       <slot name="rightIcon">
-        <Plus :width="pxCheck(buttonSize)" :height="pxCheck(buttonSize)" />
+        <Plus :size="pxCheck(buttonSize)" />
       </slot>
     </view>
   </view>

src/packages/__VUE/inputnumber/index.vue

@@ -13,7 +13,7 @@
       type="number"
       :min="min"
       :max="max"
-      :style="{ width: pxCheck(inputWidth) }"
+      :style="{ width: pxCheck(inputWidth), height: pxCheck(buttonSize) }"
       :disabled="disabled"
       :readonly="readonly"
       :value="modelValue"

src/packages/__VUE/popup/demo.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="demo">
+    <div id="test"></div>
     <h2>{{ translate('basic') }}</h2>
     <nut-cell :title="translate('cell1')" is-link @click="showBasic = true"></nut-cell>
     <nut-popup pop-class="popclass" :style="{ padding: '30px 50px' }" v-model:visible="showBasic" :z-index="100">{{
@@ -42,7 +43,9 @@
     <nut-popup position="bottom" closeable round :style="{ height: '30%' }" v-model:visible="showRound"></nut-popup>
     <h2>{{ translate('teleport') }}</h2>
     <nut-cell :title="translate('teleport')" is-link @click="showTeleport = true"></nut-cell>
-    <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showTeleport">app</nut-popup>
+    <nut-popup :style="{ padding: '30px 50px' }" teleport="#app" teleport-disable v-model:visible="showTeleport"
+      >app</nut-popup
+    >
     <h2>{{ translate('muti') }}</h2>
     <nut-cell :title="translate('muti')" is-link @click="showPop1 = true"></nut-cell>
     <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showPop1">

src/packages/__VUE/popup/doc.en-US.md

@@ -152,7 +152,7 @@ Specify the mount node through `teleport`
 ```html
 <template>
   <nut-cell title="Specify mount node" is-link @click="showTeleport = true"></nut-cell>
-  <nut-popup :style="{ padding: '30px 50px' }" teleport="#app" v-model:visible="showTeleport" >app</nut-popup>
+  <nut-popup :style="{ padding: '30px 50px' }" teleport="#app" teleport-disable v-model:visible="showTeleport" >app</nut-popup>
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';

src/packages/__VUE/popup/doc.md

@@ -153,7 +153,7 @@ app.use(Popup)
 ```html
 <template>
   <nut-cell title="指定挂载节点" is-link @click="showTeleport = true"></nut-cell>
-  <nut-popup :style="{ padding: '30px 50px' }" teleport="#app" v-model:visible="showTeleport" >app</nut-popup>
+  <nut-popup :style="{ padding: '30px 50px' }" teleport="#app" teleport-disable v-model:visible="showTeleport" >app</nut-popup>
 </template>
 <script lang="ts">
   import { reactive, toRefs } from 'vue';

src/packages/__VUE/subsidenavbar/index.taro.vue

@@ -3,8 +3,8 @@
     <view class="nut-sub-side-navbar__title" @click.stop="handleClick">
       <span class="nut-sub-side-navbar__title__text">{{ title }}</span>
       <span class="nut-sub-side-navbar__title__icon">
-        <ArrowDown2 v-if="!direction"></ArrowDown2>
-        <ArrowUp2 v-else></ArrowUp2>
+        <ArrowDown2 v-if="!direction" size="12px"></ArrowDown2>
+        <ArrowUp2 v-else size="12px"></ArrowUp2>
       </span>
     </view>
     <view

src/packages/__VUE/table/index.taro.vue

@@ -13,7 +13,7 @@
           >
             {{ item.title }}
             <slot name="icon"></slot>
-            <DownArrow v-if="!$slots.icon && item.sorter" width="12px" height="12px"></DownArrow>
+            <DownArrow v-if="!$slots.icon && item.sorter" size="12px"></DownArrow>
           </span>
         </view>
       </view>
@@ -49,10 +49,114 @@
     </view>
   </view>
 </template>
-
 <script lang="ts">
+import { computed, PropType, reactive, toRefs, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('table');
-import { component } from './common';
-export default create(component(componentName, translate));
+import RenderColumn from './renderColumn';
+import { DownArrow } from '@nutui/icons-vue-taro';
+import { TableColumnProps } from './types';
+export default create({
+  components: {
+    RenderColumn,
+    DownArrow
+  },
+  props: {
+    bordered: {
+      type: Boolean,
+      default: true
+    },
+    columns: {
+      type: Array as PropType<TableColumnProps[]>,
+      default: () => {
+        return [];
+      }
+    },
+    data: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    summary: {
+      type: Function,
+      default: null
+    },
+    striped: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['sorter'],
+  setup(props: any, { emit, slots }: any) {
+    const state = reactive({
+      curData: props.data
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+
+    const cellClasses = (item: TableColumnProps) => {
+      return {
+        'nut-table__main__head__tr--border': props.bordered,
+        [`nut-table__main__head__tr--align${item.align ? item.align : ''}`]: true
+      };
+    };
+
+    const stylehead = (item: TableColumnProps) => {
+      return item.stylehead ? item.stylehead : '';
+    };
+    const stylecolumn = (item: TableColumnProps) => {
+      return item.stylecolumn ? item.stylecolumn : '';
+    };
+
+    const getColumnItem = (value: string): TableColumnProps => {
+      return props.columns.filter((item: TableColumnProps) => item.key === value)[0];
+    };
+    const getColumnItemStyle = (value: string) => {
+      const style = props.columns.filter((item: TableColumnProps) => item.key === value);
+      return style[0].stylecolumn ? style[0].stylecolumn : '';
+    };
+    const handleSorterClick = (item: TableColumnProps) => {
+      if (item.sorter) {
+        emit('sorter', item);
+        state.curData =
+          typeof item.sorter === 'function'
+            ? state.curData.sort(item.sorter)
+            : item.sorter === 'default'
+            ? state.curData.sort()
+            : state.curData;
+      }
+    };
+
+    const sortDataItem = () => {
+      return props.columns.map((columns: TableColumnProps) => {
+        return [columns.key, columns.render];
+      });
+    };
+
+    watch(
+      () => props.data,
+      (val) => {
+        state.curData = val.slice();
+      }
+    );
+
+    return {
+      ...toRefs(state),
+      classes,
+      cellClasses,
+      getColumnItem,
+      getColumnItemStyle,
+      handleSorterClick,
+      sortDataItem,
+      translate,
+      stylehead,
+      stylecolumn
+    };
+  }
+});
 </script>

src/packages/__VUE/table/index.vue

@@ -51,8 +51,113 @@
 </template>
 
 <script lang="ts">
+import { computed, PropType, reactive, toRefs, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('table');
-import { component } from './common';
-export default create(component(componentName, translate));
+import RenderColumn from './renderColumn';
+import { DownArrow } from '@nutui/icons-vue';
+import { TableColumnProps } from './types';
+export default create({
+  components: {
+    RenderColumn,
+    DownArrow
+  },
+  props: {
+    bordered: {
+      type: Boolean,
+      default: true
+    },
+    columns: {
+      type: Array as PropType<TableColumnProps[]>,
+      default: () => {
+        return [];
+      }
+    },
+    data: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    summary: {
+      type: Function,
+      default: null
+    },
+    striped: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['sorter'],
+  setup(props: any, { emit, slots }: any) {
+    const state = reactive({
+      curData: props.data
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+
+    const cellClasses = (item: TableColumnProps) => {
+      return {
+        'nut-table__main__head__tr--border': props.bordered,
+        [`nut-table__main__head__tr--align${item.align ? item.align : ''}`]: true
+      };
+    };
+
+    const stylehead = (item: TableColumnProps) => {
+      return item.stylehead ? item.stylehead : '';
+    };
+    const stylecolumn = (item: TableColumnProps) => {
+      return item.stylecolumn ? item.stylecolumn : '';
+    };
+
+    const getColumnItem = (value: string): TableColumnProps => {
+      return props.columns.filter((item: TableColumnProps) => item.key === value)[0];
+    };
+    const getColumnItemStyle = (value: string) => {
+      const style = props.columns.filter((item: TableColumnProps) => item.key === value);
+      return style[0].stylecolumn ? style[0].stylecolumn : '';
+    };
+    const handleSorterClick = (item: TableColumnProps) => {
+      if (item.sorter) {
+        emit('sorter', item);
+        state.curData =
+          typeof item.sorter === 'function'
+            ? state.curData.sort(item.sorter)
+            : item.sorter === 'default'
+            ? state.curData.sort()
+            : state.curData;
+      }
+    };
+
+    const sortDataItem = () => {
+      return props.columns.map((columns: TableColumnProps) => {
+        return [columns.key, columns.render];
+      });
+    };
+
+    watch(
+      () => props.data,
+      (val) => {
+        state.curData = val.slice();
+      }
+    );
+
+    return {
+      ...toRefs(state),
+      classes,
+      cellClasses,
+      getColumnItem,
+      getColumnItemStyle,
+      handleSorterClick,
+      sortDataItem,
+      translate,
+      stylehead,
+      stylecolumn
+    };
+  }
+});
 </script>

src/packages/__VUE/table/renderColumn.ts

@@ -1,5 +1,5 @@
-import { h, PropType } from 'vue';
-export default {
+import { h, PropType, defineComponent } from 'vue';
+export default defineComponent({
   setup(props: any) {
     return () => h(`view`, {}, props.slots[0] ? props.slots[0](props.record) : props.slots[1](props.record));
   },
@@ -7,4 +7,4 @@ export default {
     slots: Array as PropType<Array<Function | undefined>>,
     record: Object
   }
-};
+});

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

@@ -31,12 +31,12 @@ import { reactive, toRefs, onMounted, onUnmounted, h, defineComponent } from 'vu
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
 import { TableColumnProps } from '@/packages/__VUE/table/types';
-import Button from './../../../../../../../packages/__VUE/button/index.taro.vue';
-import Icon from './../../../../../../../packages/__VUE/icon/index.taro.vue';
+import Button from '@nutui/nutui-taro';
+import { Dongdong } from '@nutui/icons-vue-taro';
 export default defineComponent({
   components: {
     Button,
-    Icon,
+    Dongdong,
     Header
   },
   props: {},
@@ -193,7 +193,7 @@ export default defineComponent({
           sex: '女',
           record: '本科',
           render: () => {
-            return h(Icon, { name: 'dongdong', size: '14px' });
+            return h(Dongdong, { size: '14px' });
           }
         },
         {