docs: 组件文档修改

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

@@ -7,7 +7,7 @@
 ### 安装
 ``` javascript
 import { createApp } from 'vue';
-import { Notify } from '@nutui/nutui';
+import { Notify } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Notify);
@@ -16,144 +16,108 @@ app.use(Notify);
 :::demo
 ```html
 <template>
-  <nut-cell is-Link @click="baseNotify('基础用法')">基础用法</nut-cell>
-</template>
-<script lang="ts">
-import { ref } from 'vue';
-import { showNotify } from '@nutui/nutui';
-import '@nutui/nutui/dist/packages/notify/style';
-export default {
-  setup() {
-    const baseNotify = (msg: string) => {
-      showNotify.text(msg, {
-        onClose: () => {
-          console.log('close');
-        },
-        onClick: () => {
-          console.log('click');
-        }
-      });
-    };
-    return {
-      baseNotify
-    }
-  }
-}
-</script>
-```
-:::
-### 通知类型
-:::demo
-```html
-<template>
-   <nut-cell-group title="通知类型">
-      <nut-cell is-Link @click="primaryNotify('主要通知')">主要通知</nut-cell>
-      <nut-cell is-Link @click="successNotify('成功通知')">成功通知</nut-cell>
-      <nut-cell is-Link @click="errorNotify('危险通知')">危险通知</nut-cell>
-      <nut-cell is-Link @click="warningNotify('警告通知')">警告通知</nut-cell>
-    </nut-cell-group>
-</template>
-<script lang="ts">
-import { ref } from 'vue';
-import { showNotify } from '@nutui/nutui';
-import '@nutui/nutui/dist/packages/notify/style';
-export default {
-  setup() {
-    const primaryNotify = (msg: string) => {
-      showNotify.primary(msg);
-    };
-    const successNotify = (msg: string) => {
-      showNotify.success(msg);
-    };
-    const errorNotify = (msg: string) => {
-      showNotify.danger(msg);
-    };
-    const warningNotify = (msg: string) => {
-      showNotify.warn(msg);
-    };
-    return {
-      primaryNotify,
-      successNotify,
-      errorNotify,
-      warningNotify,
-    }
-  }
-}
-</script>
-```
-:::
-### 自定义
-:::demo
-```html
-<template>
-  <nut-cell-group title="自定义背景色和字体颜色">
-    <nut-cell is-Link @click="cusBgNotify('自定义背景色和字体颜色')">自定义背景色和字体颜色</nut-cell>
-  </nut-cell-group>
-  <nut-cell-group title="自定义时长">
-    <nut-cell is-Link @click="timeNotify('自定义时长')">自定义时长</nut-cell>
-  </nut-cell-group>
-  <nut-cell-group title="自定义位置">
-    <nut-cell is-Link @click="positionNotify('自定义位置')">自定义位置</nut-cell>
+  <nut-cell-group :title="baseState.state.desc">
+    <nut-cell is-Link @click="baseState.methods.cellClick">基础用法</nut-cell>
+    <nut-notify @click="onClick" @closed="onClosed" v-model:visible="baseState.state.show" :msg="baseState.state.desc" />
   </nut-cell-group>
 </template>
 <script lang="ts">
-import { ref } from 'vue';
-import { showNotify } from '@nutui/nutui';
-import '@nutui/nutui/dist/packages/notify/style';
+import { reactive } from 'vue';
 export default {
   setup() {
-    const cusBgNotify = (msg: string) => {
-      showNotify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
-    };
-    const timeNotify = (msg: string) => {
-      showNotify.text(msg, { duration: 10000 });
-    };
-    const positionNotify = (msg: string) => {
-      showNotify.text(msg, { position: 'bottom' });
+    const onClosed = () => console.log('closed');
+    const onClick = () => console.log('click');
+
+    const baseState = {
+      state: reactive({
+        show: false,
+        desc: '基础用法'
+      }),
+      methods: {
+        cellClick() {
+          baseState.state.show = true;
+        }
+      }
     };
     return {
-      cusBgNotify,
-      timeNotify,
-      positionNotify
+      baseState,
+      onClosed,
+      onClick
     };
   }
-}
+};
 </script>
 ```
 :::
 
-### 组件调用
+
+### 通知类型
 :::demo
 ```html
 <template>
-  <nut-cell-group title="组件调用">
-    <nut-cell is-Link @click="onClick">组件调用</nut-cell>
-    <nut-notify v-model:visible="show" :duration="2000">
-      <span>Content</span>
-    </nut-notify>
+  <nut-cell-group title="通知类型">
+    <nut-notify
+      @click="onClick"
+      @closed="onClosed"
+      :type="notifyState.state.type"
+      v-model:visible="notifyState.state.show"
+      :msg="notifyState.state.desc"
+    />
+    <nut-cell is-Link @click="notifyState.methods.cellClick('primary','主要通知')">主要通知</nut-cell>
+    <nut-cell is-Link @click="notifyState.methods.cellClick('success','成功通知')">成功通知</nut-cell>
+    <nut-cell is-Link @click="notifyState.methods.cellClick('danger','危险通知')">危险通知</nut-cell>
+    <nut-cell is-Link @click="notifyState.methods.cellClick('warning','警告通知')">警告通知</nut-cell>
   </nut-cell-group>
 </template>
 <script lang="ts">
-import { ref } from 'vue';
-import { showNotify } from '@nutui/nutui';
-import '@nutui/nutui/dist/packages/notify/style';
+import { reactive } from 'vue';
 export default {
   setup() {
-    const show = ref(false);
-    const onClick = () => {
-      show.value = true;
+    const onClosed = () => console.log('closed');
+    const onClick = () => console.log('click');
+
+    const notifyState = {
+      state: reactive({
+        show: false,
+        desc: '',
+        type: 'primary'
+      }),
+      methods: {
+        cellClick(type: string, desc: string) {
+          notifyState.state.show = true;
+          notifyState.state.type = type;
+          notifyState.state.desc = desc;
+        }
+      }
+    };
+    const customState = {
+      state: reactive({
+        show: false,
+        desc: '',
+        type: 'primary',
+        duration: 3000
+      }),
+      methods: {
+        cellClick(type: string, desc: string, duration: number) {
+          customState.state.show = true;
+          customState.state.type = type;
+          customState.state.desc = desc;
+          customState.state.duration = duration;
+        }
+      }
     };
     return {
-      show,
+      notifyState,
+      customState,
+      onClosed,
       onClick
     };
   }
-}
+};
 </script>
 ```
 :::
 
-
 ### Props
     
 | 字段       | 说明                                                  | 类型    | 默认值   |

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

@@ -1,23 +1,22 @@
 <template>
-  <Transition name="nut-fade" @after-leave="onAfterLeave">
-    <view
-      :class="[`popup-${position}`, 'nut-notify', `nut-notify--${type}`, className]"
+  <nut-popup v-model:visible="isShowPopup" :position="position" :overlay="false" :teleportDisable="teleportDisable">
+    <div
+      :class="['nut-notify', `nut-notify--${type}`, className]"
       :style="{ color: color, background: background }"
-      v-show="visible"
-      @click="onClick"
+      @click="clickCover"
     >
       <template v-if="$slots.default">
         <slot></slot>
       </template>
       <template v-else>{{ msg }}</template>
-    </view>
-  </Transition>
+    </div>
+  </nut-popup>
 </template>
 <script lang="ts">
-import { watch } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import Popup from '../popup/index.taro.vue';
-const { componentName, create } = createComponent('notify');
+import { ref, watch } from 'vue';
+import { createComponent } from '../../utils/create';
+import Popup from '../popup/index.vue';
+const { create } = createComponent('notify');
 
 export default create({
   components: {
@@ -44,51 +43,59 @@ export default create({
     position: {
       type: String,
       default: 'top'
-    }
+    },
+    teleportDisable: {
+      type: Boolean,
+      default: true
+    },
+    onClose: Function,
+    onClick: Function,
+    unmount: Function
   },
-  emits: ['update:visible', 'closed', 'click'],
+  emits: ['update:visible'],
   setup(props, { emit }) {
-    let timer: null | number = null;
-
-    const onClick = () => {
-      emit('click');
+    const clickCover = () => {
+      props.onClick && props.onClick();
     };
+
+    // timer
+    let timer: null | number = null;
     const clearTimer = () => {
-      if (timer) {
-        clearTimeout(timer);
-        timer = null;
-      }
+      timer && clearTimeout(timer);
+      timer = null;
     };
+
+    // hide popup
     const hide = () => {
       emit('update:visible', false);
-      emit('closed');
     };
 
-    watch(
+    // watch show popup
+    const isShowPopup = ref<boolean>(false);
+
+    const unWatch = watch(
       () => props.visible,
-      (value: boolean) => {
-        if (value) {
-          show();
+      (newVal: boolean) => {
+        isShowPopup.value = props.visible;
+
+        const DURATION: number = props.duration;
+        if (newVal && DURATION) {
+          timer = setTimeout(() => {
+            hide();
+          }, DURATION);
         }
-      }
+      },
+      { immediate: true }
     );
 
-    const show = () => {
+    const onAfterLeave = () => {
       clearTimer();
-      if (props.duration) {
-        timer = setTimeout(() => {
-          hide();
-        }, props.duration);
-      }
+      unWatch && unWatch();
+      props.unmount && props.unmount(props.id);
+      props.onClose && props.onClose();
     };
 
-    const onAfterLeave = () => {
-      if (props.visible) {
-        clearTimer();
-        hide();
-      }
-    };
-    return { hide, onAfterLeave, onClick };
+    return { onAfterLeave, clickCover, isShowPopup };
   }
 });
 </script>

src/packages/__VUE/rate/demo.vue

@@ -1,25 +1,27 @@
 <template>
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
-    <nut-rate v-model="state.val" />
+    <nut-cell class="cell">
+      <nut-rate v-model="state.val" />
+    </nut-cell>
 
     <h2>{{ translate('title1') }}</h2>
-    <nut-rate allow-half v-model="state.val1"></nut-rate>
+    <nut-cell class="cell"><nut-rate allow-half v-model="state.val1"></nut-rate></nut-cell>
 
     <h2>{{ translate('title2') }}</h2>
-    <nut-rate :icon="HeartFill" v-model="state.val2"></nut-rate>
+    <nut-cell class="cell"><nut-rate :icon="HeartFill" v-model="state.val2"></nut-rate></nut-cell>
 
     <h2>{{ translate('title3') }}</h2>
-    <nut-rate :count="6" v-model="state.val3"></nut-rate>
+    <nut-cell class="cell"><nut-rate :count="6" v-model="state.val3"></nut-rate></nut-cell>
 
     <h2>{{ translate('title5') }}</h2>
-    <nut-rate disabled v-model="state.val5"></nut-rate>
+    <nut-cell class="cell"><nut-rate disabled v-model="state.val5"></nut-rate></nut-cell>
 
     <h2>{{ translate('title6') }}</h2>
-    <nut-rate v-model="state.val6" readonly></nut-rate>
+    <nut-cell class="cell"><nut-rate v-model="state.val6" readonly></nut-rate></nut-cell>
 
     <h2>{{ translate('title7') }}</h2>
-    <nut-rate v-model="state.val7" @change="onChange"></nut-rate>
+    <nut-cell class="cell"><nut-rate v-model="state.val7" @change="onChange"></nut-rate></nut-cell>
   </div>
 </template>
 

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

@@ -18,34 +18,38 @@ app.use(Rate);
 :::demo
 ```html
 <template>
-    <nut-rate v-model="value" />
+     <nut-cell class="cell">
+       <nut-rate v-model="state.val" />
+     </nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
 export default {
-    setup() {
-        const value = ref(3);
-        return { value }
-    }
+     setup() {
+         const value = ref(3);
+         return { value }
+     }
 }
 </script>
 ```
 :::
 
-### Half Star
+### half star
 
 :::demo
 ```html
 <template>
-    <nut-rate allow-half v-model="value"></nut-rate>
+     <nut-cell class="cell">
+         <nut-rate allow-half v-model="value"></nut-rate>
+     </<nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
 export default {
-    setup() {
-        const value = ref(3.5);
-        return { value }
-    }
+     setup() {
+         const value = ref(3.5);
+         return { value }
+     }
 }
 </script>
 ```
@@ -56,55 +60,61 @@ export default {
 :::demo
 ```html
 <template>
-    <nut-rate :icon="HeartFill" v-model="value" />
+     <nut-cell class="cell">
+         <nut-rate :icon="HeartFill" v-model="value" />
+     </nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
 import { HeartFill } from '@nutui/icons-vue';
 export default {
-    components: { HeartFill },
-    setup() {
-        const value = ref(3);
-        return { value, HeartFill }
-    }
+     components: { HeartFill },
+     setup() {
+         const value = ref(3);
+         return { value, HeartFill }
+     }
 }
 </script>
 ```
 :::
 
-### Custom quantity
+### Custom Quantity
 
 :::demo
 ```html
 <template>
-    <nut-rate :count="6" v-model="value" />
+     <nut-cell class="cell">
+         <nut-rate :count="6" v-model="value" />
+     </nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
 export default {
-    setup() {
-        const value = ref(3);
-        return { value }
-    }
+     setup() {
+         const value = ref(3);
+         return { value }
+     }
 }
 </script>
 ```
 :::
 
-### disabled state
+### Disabled state
 
 :::demo
 ```html
 <template>
-    <nut-rate disabled v-model="value" />
+     <nut-cell class="cell">
+         <nut-rate disabled v-model="value" />
+     </nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
 export default {
-    setup() {
-        const value = ref(3);
-        return { value }
-    }
+     setup() {
+         const value = ref(3);
+         return { value }
+     }
 }
 </script>
 ```
@@ -115,45 +125,47 @@ export default {
 :::demo
 ```html
 <template>
-    <nut-rate v-model="value" readonly />
+     <nut-cell class="cell">
+         <nut-rate v-model="value" readonly />
+     </nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
 export default {
-    setup() {
-        const value = ref(3);
-        return { value }
-    }
+     setup() {
+         const value = ref(3);
+         return { value }
+     }
 }
 </script>
 ```
 :::
-### bind event
+### Binding events
 
 :::demo
 ```html
 <template>
-    <nut-rate v-model="value" @change="onChange" />
+     <nut-cell class="cell">
+         <nut-rate v-model="value" @change="onChange" />
+     </nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
 import { showToast } from '@nutui/nutui';
-import '@nutui/nutui/dist/packages/toast/style'; 
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
-    setup() {
-        const value = ref(3);
-        const onChange = (val)=>{
-            showToast.text(val);
-        }
-    return { value,onChange }
-    }
+     setup() {
+         const value = ref(3);
+         const onChange = (val) => {
+             showToast. text(val);
+         }
+     return { value, onChange }
+     }
 }
 </script>
 ```
 :::
 
-
-
 ## API
 ### Props
 

src/packages/__VUE/rate/doc.md

@@ -19,7 +19,9 @@ app.use(Rate);
 :::demo
 ```html
 <template>
-    <nut-rate v-model="value" />
+    <nut-cell class="cell">
+      <nut-rate v-model="state.val" />
+    </nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
@@ -38,7 +40,9 @@ export default {
 :::demo
 ```html
 <template>
-    <nut-rate allow-half v-model="value"></nut-rate>
+    <nut-cell class="cell">
+        <nut-rate allow-half v-model="value"></nut-rate>
+    </<nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
@@ -57,7 +61,9 @@ export default {
 :::demo
 ```html
 <template>
-    <nut-rate :icon="HeartFill" v-model="value" />
+    <nut-cell class="cell">
+        <nut-rate :icon="HeartFill" v-model="value" />
+    </nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
@@ -78,7 +84,9 @@ export default {
 :::demo
 ```html
 <template>
-    <nut-rate :count="6" v-model="value" />
+    <nut-cell class="cell">
+        <nut-rate :count="6" v-model="value" />
+    </nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
@@ -97,7 +105,9 @@ export default {
 :::demo
 ```html
 <template>
-    <nut-rate disabled v-model="value" />
+    <nut-cell class="cell">
+        <nut-rate disabled v-model="value" />
+    </nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
@@ -111,12 +121,14 @@ export default {
 ```
 :::
 
-### 只读
+### 只读状态
 
 :::demo
 ```html
 <template>
-    <nut-rate v-model="value" readonly />
+    <nut-cell class="cell">
+        <nut-rate v-model="value" readonly />
+    </nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
@@ -134,7 +146,9 @@ export default {
 :::demo
 ```html
 <template>
-    <nut-rate v-model="value" @change="onChange" />
+    <nut-cell class="cell">
+        <nut-rate v-model="value" @change="onChange" />
+    </nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';

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

@@ -14,13 +14,14 @@ const app = createApp();
 app.use(Rate);
 ```
 
-
 ### 基础用法
 
 :::demo
 ```html
 <template>
-    <nut-rate v-model="value" />
+    <nut-cell class="cell">
+        <nut-rate v-model="value" />
+    </nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
@@ -39,7 +40,9 @@ export default {
 :::demo
 ```html
 <template>
-    <nut-rate allow-half v-model="value"></nut-rate>
+    <nut-cell class="cell">
+        <nut-rate allow-half v-model="value"></nut-rate>
+    </nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
@@ -58,14 +61,18 @@ export default {
 :::demo
 ```html
 <template>
-    <nut-rate checked-icon="heart-fill1" unchecked-icon="heart" v-model="value" />
+    <nut-cell class="cell">
+        <nut-rate :icon="HeartFill" v-model="value" />
+    </nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
+import { HeartFill } from '@nutui/icons-vue-taro';
 export default {
+    components: { HeartFill },
     setup() {
         const value = ref(3);
-        return { value }
+        return { value, HeartFill }
     }
 }
 </script>
@@ -77,7 +84,9 @@ export default {
 :::demo
 ```html
 <template>
-    <nut-rate :count="6" v-model="value" />
+    <nut-cell class="cell">
+        <nut-rate :count="6" v-model="value" />
+    </nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
@@ -91,12 +100,12 @@ export default {
 ```
 :::
 
-### 自定义颜色
-
 :::demo
 ```html
 <template>
-    <nut-rate active-color="#FFC800" v-model="value" />
+    <nut-cell class="cell">
+        <nut-rate disabled v-model="value" />
+    </nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
@@ -115,7 +124,9 @@ export default {
 :::demo
 ```html
 <template>
-    <nut-rate disabled v-model="value" />
+    <nut-cell class="cell">
+        <nut-rate disabled v-model="value" />
+    </nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
@@ -129,12 +140,14 @@ export default {
 ```
 :::
 
-### 只读
+### 只读状态
 
 :::demo
 ```html
 <template>
-    <nut-rate v-model="value" readonly />
+    <nut-cell class="cell">
+        <nut-rate v-model="value" readonly />
+    </nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
@@ -152,7 +165,9 @@ export default {
 :::demo
 ```html
 <template>
-    <nut-rate v-model="value" @change="onChange" />
+    <nut-cell class="cell">
+        <nut-rate v-model="value" @change="onChange" />
+    </nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
@@ -169,25 +184,6 @@ export default {
 ```
 :::
 
-### 自定义尺寸
-
-:::demo
-```html
-<template>
-    <nut-rate v-model="value" icon-size="35" />
-</template>
-<script lang="ts">
-import { ref } from 'vue';
-export default {
-    setup() {
-        const value = ref(3);
-        return { value }
-    }
-}
-</script>
-```
-:::
-
 
 ## API
 ### Props

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

@@ -1,25 +1,27 @@
 <template>
   <div class="demo">
     <h2>基本用法</h2>
-    <nut-rate v-model="state.val" />
+    <nut-cell class="cell">
+      <nut-rate v-model="state.val" />
+    </nut-cell>
 
     <h2>半星</h2>
-    <nut-rate allow-half v-model="state.val1"></nut-rate>
+    <nut-cell class="cell"><nut-rate allow-half v-model="state.val1"></nut-rate></nut-cell>
 
     <h2>自定义 icon </h2>
-    <nut-rate :icon="HeartFill" v-model="state.val2"></nut-rate>
+    <nut-cell class="cell"><nut-rate :icon="HeartFill" v-model="state.val2"></nut-rate></nut-cell>
 
     <h2>自定义数量</h2>
-    <nut-rate :count="6" v-model="state.val3"></nut-rate>
+    <nut-cell class="cell"><nut-rate :count="6" v-model="state.val3"></nut-rate></nut-cell>
 
     <h2>禁用状态</h2>
-    <nut-rate disabled v-model="state.val5"></nut-rate>
+    <nut-cell class="cell"><nut-rate disabled v-model="state.val5"></nut-rate></nut-cell>
 
     <h2>只读状态</h2>
-    <nut-rate v-model="state.val6" readonly></nut-rate>
+    <nut-cell class="cell"><nut-rate v-model="state.val6" readonly></nut-rate></nut-cell>
 
     <h2>绑定事件</h2>
-    <nut-rate v-model="state.val7" @change="onChange"></nut-rate>
+    <nut-cell class="cell"><nut-rate v-model="state.val7" @change="onChange"></nut-rate></nut-cell>
   </div>
 </template>