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

jd/generate-unplugin-deps.cjs

@@ -112,10 +112,9 @@ styleMap.forEach((value, key) => {
     return component !== key;
   });
   // gen style
-  const outputStyleMjs = `${deps
+  const outputStyleMjs = `import '../../styles/reset.css';\n${deps
     .map((component) => {
-      return `import '../${component.toLowerCase()}/index.scss';
-import '../../styles/reset.css';\n`;
+      return `import '../${component.toLowerCase()}/index.scss';\n`;
     })
     .reverse()
     .join('')}import './index.scss';\n`;

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

@@ -177,7 +177,7 @@ app.use(Card);
 ```
 :::
 
-### 自定义右下角内容
+### Customize bottom right content
 :::demo
 ```html
 <template>

src/packages/__VUE/comment/components/CmtBottom.taro.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="nut-comment-bottom">
     <view @click="handleClick" class="nut-comment-bottom__lable">
-      <span v-if="type != 'complex'">{{ info.size }}</span></view
+      <span v-if="type != 'complex'" style="display: inline">{{ info.size }}</span></view
     >
 
     <view class="nut-comment-bottom__cpx">

src/packages/__VUE/comment/components/CmtHeader.taro.vue

@@ -13,7 +13,7 @@
           </view>
 
           <view class="nut-comment-header__user-score">
-            <nut-rate v-model="info.score" size="15" spacing="5" readonly :disabled="true" @change="handleClick" />
+            <nut-rate v-model="info.score" size="12" spacing="5" readonly :disabled="true" @change="handleClick" />
           </view>
         </view>
 
@@ -25,7 +25,7 @@
       <view class="nut-comment-header__time" v-if="info.time">{{ info.time }}</view>
     </view>
     <view :class="[`nut-comment-header__${type}-score`]" v-if="type == 'complex'">
-      <nut-rate v-model="info.score" size="15" spacing="3" readonly :disabled="true" />
+      <nut-rate v-model="info.score" size="12" spacing="3" readonly :disabled="true" />
       <i :class="[`nut-comment-header__${type}-score-i`]"></i>
       <view :class="[`nut-comment-header__${type}-score-size`]">{{ info.size }}</view>
     </view>

src/packages/__VUE/comment/components/CmtHeader.vue

@@ -13,7 +13,7 @@
           </view>
 
           <view class="nut-comment-header__user-score">
-            <nut-rate v-model="info.score" size="15" spacing="5" readonly :touchable="false" @change="handleClick" />
+            <nut-rate v-model="info.score" size="12" spacing="5" readonly @change="handleClick" />
           </view>
         </view>
 
@@ -25,7 +25,7 @@
       <view class="nut-comment-header__time" v-if="info.time">{{ info.time }}</view>
     </view>
     <view :class="[`nut-comment-header__${type}-score`]" v-if="type == 'complex'">
-      <nut-rate v-model="info.score" size="15" spacing="3" readonly :touchable="false" />
+      <nut-rate v-model="info.score" size="12" spacing="3" readonly />
       <i :class="[`nut-comment-header__${type}-score-i`]"></i>
       <view :class="[`nut-comment-header__${type}-score-size`]">{{ info.size }}</view>
     </view>

src/packages/__VUE/comment/components/CmtImages.taro.vue

@@ -24,7 +24,7 @@
           v-if="type == 'multi' && totalImages.length > 9 && videos.length + index > 7"
         >
           <span>共 {{ totalImages.length }} 张</span>
-          <Right style="width: 12px"></Right>
+          <Right size="12px"></Right>
         </view>
       </view>
     </template>

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

@@ -95,7 +95,7 @@ export default {
 
   <template #comment-shop-reply>
     <div class="nut-comment-shop">
-      <span>京东美妆国际：</span
+      <span style="display:inline-block">京东美妆国际：</span
       >尊敬的客户您好，非常抱歉给您带来不愉快的购物体验，关于过敏，什么成分都不存在个别性和普遍性。
     </div>
   </template>

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

@@ -22,7 +22,7 @@
       <view class="nut-comment__follow-title">购买{{ follow.days }}天后追评</view>
       <view class="nut-comment__follow-com">{{ follow.content }}</view>
       <view class="nut-comment__follow-img" v-if="follow.images && follow.images.length > 0"
-        >{{ follow.images.length }} 张追评图片 <Right width="12px"></Right
+        >{{ follow.images.length }} 张追评图片 <Right size="12px"></Right
       ></view>
     </view>
 
@@ -42,9 +42,9 @@ import { ref, onMounted, computed, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('comment');
 import { Right } from '@nutui/icons-vue-taro';
-import CommentHeader from './components/CmtHeader.vue';
-import CommentImages from './components/CmtImages.vue';
-import CommentBottom from './components/CmtBottom.vue';
+import CommentHeader from './components/CmtHeader.taro.vue';
+import CommentImages from './components/CmtImages.taro.vue';
+import CommentBottom from './components/CmtBottom.taro.vue';
 
 interface VideosType {
   id: number | string;

src/packages/__VUE/switch/demo.vue

@@ -17,7 +17,7 @@
 
     <h2>{{ translate('title3') }}</h2>
     <nut-cell>
-      <nut-switch v-model="checked3" loading color="red" />
+      <nut-switch v-model="checked3" loading activeColor="red" />
     </nut-cell>
 
     <h2>{{ translate('title4') }}</h2>

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

@@ -1,10 +1,10 @@
-#  Switch 开关
+#  Switch
 
-### 介绍
+### Intro
 
 Used to turn options on or off.
 
-### 安装
+### Install
 
 ``` javascript
 import { createApp } from 'vue';
@@ -15,7 +15,7 @@ app.use(Switch);
 ```
 
 
-### 基础用法
+### Basic Usage
 :::demo
 ``` html
 <template>
@@ -33,7 +33,7 @@ app.use(Switch);
 ```
 :::
 
-### 禁用状态
+### Disable State
 :::demo
 ``` html
 <template>
@@ -51,11 +51,11 @@ app.use(Switch);
 ```
 :::
 
-### 加载状态
+### Loading State
 :::demo
 ``` html
 <template>
-  <nut-switch v-model="checked" loading />
+  <nut-switch v-model="checked" loading active-color />
 </template>
 <script lang="ts">
   import { ref } from 'vue';
@@ -69,7 +69,7 @@ app.use(Switch);
 ```
 :::
 
-### change事件
+### Change event
 :::demo
 ``` html
 <template>
@@ -95,7 +95,7 @@ app.use(Switch);
 </script>
 ```
 :::
-### 异步控制
+### Change Async
 :::demo
 ``` html
 <template>
@@ -125,7 +125,7 @@ app.use(Switch);
 </script>
 ```
 :::
-### 自定义颜色
+### Custom Color
 :::demo
 ``` html
 <template>
@@ -142,7 +142,7 @@ app.use(Switch);
 </script>
 ```
 :::
-### 支持文字
+### Use Text
 :::demo
 ``` html
 <template>
@@ -185,28 +185,28 @@ app.use(Switch);
 
 ### Props
 
-| Attribute           | Description      | Type    | Default        |
-|----------------|------------------|---------|-----------------------|
-| v-model        | Status of Switch       | boolean \| string \| number| `false`  |
-| disable        | Disable status         | boolean | `false`               |
-| loading        | Loading status         | boolean | `false`               |
-| active-color   | Background color when active | string  | `#fa2c19`    |
-| inactive-color | Background color when inactive | string  | `#ebebeb` | 
-| active-text    | Word description when active   | string  | -         |
-| inactive-text  | Word description when inactive   | string  | -        |
-| active-value   | Value when active   | boolean ｜ string ｜ number  | `true`  |
-| inactive-value | Value when inactive   | boolean ｜ string ｜ number  | `false`  |
+| Attribute      | Description                    | Type                        | Default   |
+|----------------|--------------------------------|-----------------------------|-----------|
+| v-model        | Status of Switch               | boolean \| string \| number | `false`   |
+| disable        | Disable status                 | boolean                     | `false`   |
+| loading        | Loading status                 | boolean                     | `false`   |
+| active-color   | Background color when active   | string                      | `#fa2c19` |
+| inactive-color | Background color when inactive | string                      | `#ebebeb` |
+| active-text    | Word description when active   | string                      | -         |
+| inactive-text  | Word description when inactive | string                      | -         |
+| active-value   | Value when active              | boolean ｜ string ｜ number | `true`    |
+| inactive-value | Value when inactive            | boolean ｜ string ｜ number | `false`   |
 
 ### Slots
 
-|Name|Description|
-|-|-|
-|icon| loading icon slot |
+| Name | Description       |
+|------|-------------------|
+| icon | loading icon slot |
 
 ### Events
 
-| Event | Description    | Arguments                 |
-|--------|----------------|-------------------------------|
+| Event  | Description                       | Arguments                     |
+|--------|-----------------------------------|-------------------------------|
 | change | Emitted when check status changed | (value: boolean,event: Event) |
 
 
@@ -216,16 +216,16 @@ app.use(Switch);
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name | Default Value | 
-| --------------------------------------- | -------------------------- | 
-| --nut-switch-close-bg-color|  _#ebebeb_ |
-| --nut-switch-close-cline-bg-color|  _#f0f0f0_ |
-| --nut-switch-width|  _36px_ |
-| --nut-switch-height|  _21px_ |
-| --nut-switch-line-height|  _21px_ |
-| --nut-switch-border-radius|  _21px_ |
-| --nut-switch-inside-width|  _13px_ |
-| --nut-switch-inside-height|  _13px_ |
-| --nut-switch-inside-open-transform|  _translateX(146%)_ |
-| --nut-switch-inside-close-transform|  _translateX(30%)_ |
+| Name                                | Default Value      |
+|-------------------------------------|--------------------|
+| --nut-switch-close-bg-color         | _#ebebeb_          |
+| --nut-switch-close-cline-bg-color   | _#f0f0f0_          |
+| --nut-switch-width                  | _36px_             |
+| --nut-switch-height                 | _21px_             |
+| --nut-switch-line-height            | _21px_             |
+| --nut-switch-border-radius          | _21px_             |
+| --nut-switch-inside-width           | _13px_             |
+| --nut-switch-inside-height          | _13px_             |
+| --nut-switch-inside-open-transform  | _translateX(146%)_ |
+| --nut-switch-inside-close-transform | _translateX(30%)_  |
     

src/packages/__VUE/switch/doc.md

@@ -55,7 +55,7 @@ app.use(Switch);
 :::demo
 ``` html
 <template>
-  <nut-switch v-model="checked" loading />
+  <nut-switch v-model="checked" loading active-color="red" />
 </template>
 <script lang="ts">
   import { ref } from 'vue';

src/packages/__VUE/switch/index.scss

@@ -8,6 +8,13 @@
   background-repeat: no-repeat;
   background-position: center center;
   flex: 0 0 auto; // 防止被压缩
+
+  .nut-icon-loading1 {
+    width: 12px;
+    height: 12px;
+    font-size: 12px;
+  }
+
   &.nut-switch-close {
     background-color: $switch-close-bg-color;
   }

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

@@ -2,7 +2,7 @@
   <view :class="classes" @click="onClick" :style="style">
     <view class="nut-switch-button">
       <slot name="icon" v-if="loading">
-        <Loading1 name="loading" />
+        <Loading1 name="loading1" :color="activeColor" />
       </slot>
       <template v-if="activeText">
         <view class="nut-switch-label open" v-show="modelValue">{{ activeText }}</view>

src/packages/__VUE/switch/index.vue

@@ -2,7 +2,7 @@
   <view :class="classes" @click="onClick" :style="style">
     <view class="nut-switch-button">
       <slot name="icon" v-if="loading">
-        <Loading1 name="loading" />
+        <Loading1 name="loading" :color="activeColor" />
       </slot>
       <template v-if="activeText">
         <view class="nut-switch-label open" v-show="modelValue">{{ activeText }}</view>

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

@@ -42,7 +42,7 @@
 
         <template #comment-shop-reply>
           <div class="nut-comment-shop">
-            <span>京东美妆国际：</span
+            <span style="display: inline">京东美妆国际：</span
             >尊敬的客户您好，非常抱歉给您带来不愉快的购物体验，关于过敏，什么成分都不存在个别性和普遍性。
           </div>
         </template>

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

@@ -13,7 +13,7 @@
 
     <h2>加载状态</h2>
     <nut-cell>
-      <nut-switch v-model="checked3" loading />
+      <nut-switch v-model="checked3" loading activeColor="red" />
     </nut-cell>
 
     <h2>change事件</h2>