fix: class change

src/packages/__VUE/actionsheet/__test__/__snapshots__/index.spec.ts.snap

@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render sure actionsheet when use custom props 1`] = `
-"<view class=\\"nut-actionsheet\\">
-  <!--teleport start-->
-  <nut-overlay visible=\\"true\\" close-on-click-overlay=\\"true\\" z-index=\\"2000\\" lock-scroll=\\"false\\" duration=\\"0.3\\" iswrapteleport=\\"true\\"></nut-overlay>
-  <transition-stub name=\\"popup-slide-bottom\\" appear=\\"false\\" persisted=\\"true\\" css=\\"true\\">
-    <view class=\\"nut-popup round popup-bottom popclass\\" style=\\"z-index: 2000; transition-duration: 0.3s;\\">
-      <view class=\\"nut-actionsheet-panel\\">
-        <!--v-if-->
-        <view>
-          <!--v-if-->
-          <view class=\\"nut-actionsheet-menu\\">
-            <view class=\\"nut-actionsheet-item\\">
-              <view>选项一</view>
-              <view class=\\"subdesc\\">描述信息</view>
-            </view>
-          </view>
-          <!--v-if-->
-        </view>
-      </view>
-      <!--v-if-->
-    </view>
-  </transition-stub>
-  <!--teleport end-->
-</view>"
-`;

src/packages/__VUE/actionsheet/__test__/index.spec.ts

@@ -33,7 +33,7 @@ test('should render ActionSheet when visible is true', async () => {
       ]
     }
   });
-  const menuItem = wrapper.findAll('.nut-actionsheet-item');
+  const menuItem = wrapper.findAll('.nut-action-sheet__item');
   expect(menuItem.length).toBe(3);
 });
 test('should emit select event after clicking option', async () => {
@@ -44,7 +44,7 @@ test('should emit select event after clicking option', async () => {
       menuItems: [{ name: '选项一' }]
     }
   });
-  const menuItem = wrapper.find('.nut-actionsheet-item');
+  const menuItem = wrapper.find('.nut-action-sheet__item');
   menuItem.trigger('click');
   await nextTick();
   expect(wrapper.emitted('choose')).toHaveLength(1);
@@ -81,7 +81,7 @@ test('should render sure choose when use choose-tag-value', async () => {
       menuItems: [{ name: '选项一' }, { name: '选项二' }]
     }
   });
-  let item = wrapper.findAll<HTMLElement>('.nut-actionsheet-item');
+  let item = wrapper.findAll<HTMLElement>('.nut-action-sheet__item');
   expect(item[0].element.style.color).toContain('238, 10, 36');
 });
 
@@ -95,7 +95,7 @@ test('should render sure color when use color', async () => {
       menuItems: [{ name: '选项一' }, { name: '选项二' }]
     }
   });
-  let item = wrapper.findAll<HTMLElement>('.nut-actionsheet-item');
+  let item = wrapper.findAll<HTMLElement>('.nut-action-sheet__item');
   expect(item[0].element.style.color).toContain('green');
 });
 
@@ -108,7 +108,7 @@ test('should not emit select event after clicking disabled option', async () =>
     }
   });
 
-  wrapper.find('.nut-actionsheet-item').trigger('click');
+  wrapper.find('.nut-action-sheet__item').trigger('click');
   await nextTick();
   expect(wrapper.emitted('select')).toBeFalsy();
 });
@@ -124,7 +124,7 @@ test('should render description when use description', async () => {
     }
   });
   let desc = wrapper.find('.desc');
-  let title = wrapper.find('.nut-actionsheet-title');
+  let title = wrapper.find('.nut-action-sheet__title');
   expect(desc.exists()).toBeTruthy();
   expect(title.exists()).toBeTruthy();
 });
@@ -138,6 +138,6 @@ test('should emit cancel event after clicking cancel ', () => {
       cancelTxt: '取消'
     }
   });
-  wrapper.find('.nut-actionsheet-cancel').trigger('click');
+  wrapper.find('.nut-action-sheet__cancel').trigger('click');
   expect(wrapper.emitted('cancel')).toHaveLength(1);
 });

src/packages/__VUE/actionsheet/index.scss

@@ -1,23 +1,23 @@
 .nut-theme-dark {
-  .nut-actionsheet-panel {
-    .nut-actionsheet-cancel {
+  .nut-actionsheet {
+    .nut-action-sheet__cancel {
       border-top: 1px solid $dark-background2;
     }
-    .nut-actionsheet-title {
+    .nut-action-sheet__title {
       border-bottom: 1px solid $dark-background2;
     }
-    .nut-actionsheet-cancel,
-    .nut-actionsheet-item,
-    .nut-actionsheet-title {
+    .nut-action-sheet__cancel,
+    .nut-action-sheet__item,
+    .nut-action-sheet__title {
       background: $dark-background;
       color: $dark-color;
     }
   }
 }
 
-.nut-actionsheet-panel {
+.nut-actionsheet {
   display: block;
-  .nut-actionsheet-title {
+  .nut-action-sheet__title {
     display: block;
     padding: 10px;
     margin: 0;
@@ -27,32 +27,16 @@
     font-size: $font-size-base;
     color: $title-color;
   }
-
-  .nut-actionsheet-modal {
-    .nut-actionsheet-title,
-    .nut-actionsheet-sub-title {
-      padding: 5px 0;
-    }
-
-    .nut-actionsheet-sub-title {
-      display: block;
-      font-size: $font-size-small;
-      color: $title-color;
-      margin-inline-start: 0px;
-    }
-  }
-
-  .nut-actionsheet-menu {
+  .nut-action-sheet__menu {
     display: block;
     list-style: none;
     padding: 0;
     margin: 0;
   }
 
-  .nut-actionsheet-cancel,
-  .nut-actionsheet-item {
+  .nut-action-sheet__cancel,
+  .nut-action-sheet__item {
     display: block;
-    //   height: 24px;
     padding: 10px;
     line-height: $actionsheet-item-line-height;
     font-size: $actionsheet-item-font-size;
@@ -63,27 +47,27 @@
     cursor: pointer;
   }
 
-  .desc {
+  .nut-action-sheet__desc {
     font-size: $actionsheet-item-font-size;
     color: #999;
     cursor: default;
   }
 
-  .subdesc {
+  .nut-action-sheet__subdesc {
     display: block;
     font-size: $actionsheet-item-subdesc-font-size;
     color: #999;
   }
 
-  .nut-actionsheet-item-disabled {
+  .nut-action-sheet__item--disabled {
     color: #e1e1e1 !important;
     cursor: not-allowed;
   }
-  .nut-actionsheet-item-loading {
+  .nut-action-sheet__item--loading {
     cursor: default;
   }
 
-  .nut-actionsheet-cancel {
+  .nut-action-sheet__cancel {
     margin-top: 5px;
     border-top: $actionsheet-item-cancel-border-top;
   }

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

@@ -1,39 +1,40 @@
 <template>
-  <view :class="classes">
-    <nut-popup
-      pop-class="popclass"
-      :visible="visible"
-      position="bottom"
-      round
-      @click-overlay="close"
-      :closeOnClickOverlay="closeAbled"
-    >
-      <view class="nut-actionsheet-panel">
-        <view v-if="title" class="nut-actionsheet-title">{{ title }}</view>
-        <slot></slot>
-        <view v-if="!slotDefault">
-          <view class="nut-actionsheet-item desc" v-if="description">{{ description }}</view>
-          <view class="nut-actionsheet-menu" v-if="menuItems.length">
-            <view
-              v-for="(item, index) of menuItems"
-              class="nut-actionsheet-item"
-              :class="{ 'nut-actionsheet-item-disabled': item.disable, 'nut-actionsheet-item-loading': item.loading }"
-              :style="{ color: isHighlight(item) || item.color }"
-              :key="index"
-              @click="chooseItem(item, index)"
-            >
-              <nut-icon v-if="item.loading" name="loading"> </nut-icon>
-              <view v-else> {{ item[optionTag] }}</view>
-              <view class="subdesc">{{ item[optionSubTag] }}</view>
-            </view>
-          </view>
-          <view class="nut-actionsheet-cancel" v-if="cancelTxt" @click="cancelActionSheet">
-            {{ cancelTxt }}
+  <nut-popup
+    :visible="visible"
+    :isWrapTeleport="isWrapTeleport"
+    position="bottom"
+    round
+    @click-overlay="close"
+    :closeOnClickOverlay="closeAbled"
+  >
+    <view :class="classes">
+      <view v-if="title" class="nut-action-sheet__title">{{ title }}</view>
+      <slot></slot>
+      <view v-if="!slotDefault">
+        <view class="nut-action-sheet__item nut-action-sheet__desc" v-if="description">{{ description }}</view>
+        <view class="nut-action-sheet__menu" v-if="menuItems.length">
+          <view
+            v-for="(item, index) of menuItems"
+            class="nut-action-sheet__item"
+            :class="{
+              'nut-action-sheet__item--disabled': item.disable,
+              'nut-action-sheet__item--loading': item.loading
+            }"
+            :style="{ color: isHighlight(item) || item.color }"
+            :key="index"
+            @click="chooseItem(item, index)"
+          >
+            <nut-icon v-if="item.loading" name="loading"> </nut-icon>
+            <view v-else> {{ item[optionTag] }}</view>
+            <view class="nut-action-sheet__subdesc">{{ item[optionSubTag] }}</view>
           </view>
         </view>
+        <view class="nut-action-sheet__cancel" v-if="cancelTxt" @click="cancelActionSheet">
+          {{ cancelTxt }}
+        </view>
       </view>
-    </nut-popup>
-  </view>
+    </view>
+  </nut-popup>
 </template>
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';

src/packages/__VUE/actionsheet/index.vue

@@ -1,40 +1,40 @@
 <template>
-  <view :class="classes">
-    <nut-popup
-      pop-class="popclass"
-      :visible="visible"
-      :isWrapTeleport="isWrapTeleport"
-      position="bottom"
-      round
-      @click-overlay="close"
-      :closeOnClickOverlay="closeAbled"
-    >
-      <view class="nut-actionsheet-panel">
-        <view v-if="title" class="nut-actionsheet-title">{{ title }}</view>
-        <slot></slot>
-        <view v-if="!slotDefault">
-          <view class="nut-actionsheet-item desc" v-if="description">{{ description }}</view>
-          <view class="nut-actionsheet-menu" v-if="menuItems.length">
-            <view
-              v-for="(item, index) of menuItems"
-              class="nut-actionsheet-item"
-              :class="{ 'nut-actionsheet-item-disabled': item.disable, 'nut-actionsheet-item-loading': item.loading }"
-              :style="{ color: isHighlight(item) || item.color }"
-              :key="index"
-              @click="chooseItem(item, index)"
-            >
-              <nut-icon v-if="item.loading" name="loading"> </nut-icon>
-              <view v-else> {{ item[optionTag] }}</view>
-              <view class="subdesc">{{ item[optionSubTag] }}</view>
-            </view>
-          </view>
-          <view class="nut-actionsheet-cancel" v-if="cancelTxt" @click="cancelActionSheet">
-            {{ cancelTxt }}
+  <nut-popup
+    :visible="visible"
+    :isWrapTeleport="isWrapTeleport"
+    position="bottom"
+    round
+    @click-overlay="close"
+    :closeOnClickOverlay="closeAbled"
+  >
+    <view :class="classes">
+      <view v-if="title" class="nut-action-sheet__title">{{ title }}</view>
+      <slot></slot>
+      <view v-if="!slotDefault">
+        <view class="nut-action-sheet__item nut-action-sheet__desc" v-if="description">{{ description }}</view>
+        <view class="nut-action-sheet__menu" v-if="menuItems.length">
+          <view
+            v-for="(item, index) of menuItems"
+            class="nut-action-sheet__item"
+            :class="{
+              'nut-action-sheet__item--disabled': item.disable,
+              'nut-action-sheet__item--loading': item.loading
+            }"
+            :style="{ color: isHighlight(item) || item.color }"
+            :key="index"
+            @click="chooseItem(item, index)"
+          >
+            <nut-icon v-if="item.loading" name="loading"> </nut-icon>
+            <view v-else> {{ item[optionTag] }}</view>
+            <view class="nut-action-sheet__subdesc">{{ item[optionSubTag] }}</view>
           </view>
         </view>
+        <view class="nut-action-sheet__cancel" v-if="cancelTxt" @click="cancelActionSheet">
+          {{ cancelTxt }}
+        </view>
       </view>
-    </nut-popup>
-  </view>
+    </view>
+  </nut-popup>
 </template>
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';

src/packages/__VUE/animate/__tests__/animate.spec.ts

@@ -25,7 +25,7 @@ test('should change classname when using type prop', () => {
       }
     });
 
-    const animate: any = wrapper.find('.nut-ani-container');
+    const animate: any = wrapper.find('.nut-animate__container');
     expect(animate.classes(`nut-animate-${typeProp}`)).toBe(true);
   }
 });
@@ -45,7 +45,7 @@ test('trigger animate with loop', async () => {
       }
     });
 
-    const animate: any = wrapper.find('.nut-ani-container');
+    const animate: any = wrapper.find('.nut-animate__container');
 
     animate.trigger('click');
     await nextTick();
@@ -77,7 +77,7 @@ test('trigger animate', async () => {
       }
     });
 
-    const animate: any = wrapper.find('.nut-ani-container');
+    const animate: any = wrapper.find('.nut-animate__container');
 
     animate.trigger('click');
     await nextTick();

src/packages/__VUE/animate/index.scss

@@ -1,5 +1,5 @@
 .nut-animate {
-  .nut-ani-container {
+  .nut-animate__container {
     display: inline-block;
   }
 

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

@@ -36,7 +36,7 @@ export default create({
     let classes = computed(() => {
       const prefixCls = componentName;
       return {
-        'nut-ani-container': true,
+        'nut-animate__container': true,
         [`${prefixCls}-${type.value}`]: action.value === 'initial' || state.clicked ? type.value : false,
         loop: loop.value
       };

src/packages/__VUE/animate/index.vue

@@ -36,7 +36,7 @@ export default create({
     let classes = computed(() => {
       const prefixCls = componentName;
       return {
-        'nut-ani-container': true,
+        'nut-animate__container': true,
         [`${prefixCls}-${type.value}`]: action.value === 'initial' || state.clicked ? type.value : false,
         loop: loop.value
       };

src/packages/__VUE/audio/__tests__/audio.spec.ts

@@ -33,7 +33,7 @@ test('audio init render', async () => {
     }
   });
   await nextTick();
-  expect(wrapper.find('.nut-audio-icon').exists()).toBeTruthy();
+  expect(wrapper.find('.nut-audio__icon').exists()).toBeTruthy();
 });
 
 test('audio init render', async () => {

src/packages/__VUE/audio/index.scss

@@ -1,6 +1,6 @@
 .nut-theme-dark {
-  .nut-audio-icon {
-    .nut-audio-icon-box {
+  .nut-audio__icon {
+    .nut-audio__icon--box {
       background: $dark-color;
     }
   }
@@ -8,30 +8,30 @@
 
 .nut-audio {
   padding: 0;
-  .progress-wrapper {
+  .nut-audio__progress {
     display: flex;
     align-items: center;
     width: 100%;
     margin: 0px auto;
     padding: 10px 0;
 
-    .progress-bar-wrapper {
+    .nut-audio__bar {
       flex: 1;
       margin: 0 10px;
     }
 
-    .time {
+    .nut-audio__time {
       min-width: 50px;
       font-size: 12px;
       text-align: center;
     }
   }
 
-  .nut-audio-icon {
+  .nut-audio__icon {
     position: relative;
     display: inline-block;
 
-    .nut-audio-icon-box {
+    .nut-audio__icon--box {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -40,7 +40,7 @@
       background: #fff;
       border-radius: 50%;
       box-shadow: 0 0 8px rgba($color: $text-color, $alpha: 0.5);
-      &.nut-audio-icon-stop {
+      &.nut-audio__icon--stop {
         &::after {
           position: absolute;
           left: 50%;
@@ -61,7 +61,7 @@
     margin-top: 30px;
   }
 
-  .custom-button {
+  .nut-audio__button--custom {
     width: 8px;
     height: 8px;
     color: #fff;

src/packages/__VUE/audio/index.vue

@@ -3,10 +3,10 @@
 
   <div class="nut-audio">
     <!-- 进度条 -->
-    <div class="progress-wrapper" v-if="type == 'progress'">
+    <div class="nut-audio__progress" v-if="type == 'progress'">
       <!-- 时间显示 -->
-      <div class="time">{{ currentDuration }}</div>
-      <div class="progress-bar-wrapper">
+      <div class="nut-audio__time">{{ currentDuration }}</div>
+      <div class="nut-audio__bar">
         <nut-range
           v-model="percent"
           hidden-range
@@ -15,18 +15,18 @@
           active-color="#fa2c19"
         >
           <template #button>
-            <div class="custom-button"></div>
+            <div class="nut-audio__button--custom"></div>
           </template>
         </nut-range>
       </div>
 
-      <div class="time">{{ duration }}</div>
+      <div class="nut-audio__time">{{ duration }}</div>
     </div>
 
     <!-- 自定义 -->
-    <div class="nut-audio-icon" v-if="type == 'icon'">
+    <div class="nut-audio__icon" v-if="type == 'icon'">
       <div
-        :class="['nut-audio-icon-box', playing ? 'nut-audio-icon-play' : 'nut-audio-icon-stop']"
+        :class="['nut-audio__icon--box', playing ? 'nut-audio__icon--play' : 'nut-audio__icon--stop']"
         @click="changeStatus"
       >
         <nut-icon v-if="playing" name="service" class="nut-icon-am-rotate nut-icon-am-infinite"></nut-icon>

src/packages/__VUE/avatar/index.scss

@@ -6,11 +6,11 @@
   position: relative;
   flex: 0 0 auto; // 防止被压缩
   text-align: center;
-  img {
+  > img {
     width: 100%;
     height: 100%;
   }
-  .icon {
+  .nut-avatar__icon {
     background-size: 100% 100%;
     position: absolute;
     top: 50%;
@@ -21,7 +21,7 @@
     width: 100%;
     height: 100%;
   }
-  .text {
+  .nut-avatar__text {
     display: inline-block;
     width: 100%;
     height: 100%;

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

@@ -11,15 +11,15 @@
         <img :src="url" :alt="alt" @error="onError" />
       </template>
       <template v-else-if="icon">
-        <nut-icon v-bind="$attrs" class="icon" :name="iconStyles"></nut-icon>
+        <nut-icon v-bind="$attrs" class="nut-avatar__icon" :name="iconStyles"></nut-icon>
       </template>
-      <view class="text" v-if="isShowText">
+      <view class="nut-avatar__text" v-if="isShowText">
         <slot></slot>
       </view>
     </template>
     <!-- 折叠头像 -->
     <template v-if="showMax">
-      <view class="text">
+      <view class="nut-avatar__text">
         {{
           avatarGroup?.props?.maxContent
             ? avatarGroup?.props?.maxContent

src/packages/__VUE/avatar/index.vue

@@ -11,15 +11,15 @@
         <img :src="url" :alt="alt" @error="onError" />
       </template>
       <template v-else-if="icon">
-        <nut-icon v-bind="$attrs" class="icon" :name="iconStyles"></nut-icon>
+        <nut-icon v-bind="$attrs" class="nut-avatar__icon" :name="iconStyles"></nut-icon>
       </template>
-      <view class="text" v-if="isShowText">
+      <view class="nut-avatar__text" v-if="isShowText">
         <slot></slot>
       </view>
     </template>
     <!-- 折叠头像 -->
     <template v-if="showMax">
-      <view class="text">
+      <view class="nut-avatar__text">
         {{
           avatarGroup?.props?.maxContent
             ? avatarGroup?.props?.maxContent

src/packages/__VUE/badge/index.scss

@@ -9,7 +9,7 @@
 .nut-badge {
   position: relative;
   display: inline-block;
-  .slot-icons {
+  .nut-badge__icon {
     position: absolute;
     background: $badge-background-color;
     top: -20%;
@@ -19,23 +19,23 @@
     border-radius: $badge-border-radius;
     z-index: $badge-z-index;
   }
-  .sup {
-    position: absolute;
-    background: $badge-background-color;
-    padding: $badge-padding;
-    text-align: center;
-    border-radius: $badge-border-radius;
-    font-size: $badge-font-size;
-    font-weight: normal;
-    color: $badge-color;
-  }
   .nut-badge__content {
     transform: $badge-content-transform;
-  }
-  .is-dot {
-    width: $badge-dot-width;
-    height: $badge-dot-height;
-    border-radius: $badge-dot-border-radius;
-    padding: $badge-dot-padding;
+    &--sup {
+      position: absolute;
+      background: $badge-background-color;
+      padding: $badge-padding;
+      text-align: center;
+      border-radius: $badge-border-radius;
+      font-size: $badge-font-size;
+      font-weight: normal;
+      color: $badge-color;
+    }
+    &--dot {
+      width: $badge-dot-width;
+      height: $badge-dot-height;
+      border-radius: $badge-dot-border-radius;
+      padding: $badge-dot-padding;
+    }
   }
 }

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

@@ -1,14 +1,14 @@
 <template>
   <view class="nut-badge">
-    <view class="slot-icons" v-show="!hidden && !dot" :style="stl">
+    <view class="nut-badge__icon" v-show="!hidden && !dot" :style="stl">
       <slot name="icons"></slot>
     </view>
     <slot></slot>
     <view
       v-show="!hidden && (content || dot)"
       v-text="content"
-      class="nut-badge__content sup"
-      :class="{ 'is-dot': dot }"
+      class="nut-badge__content nut-badge__content--sup"
+      :class="{ 'nut-badge__content--dot': dot }"
       :style="stl"
     >
     </view>

src/packages/__VUE/badge/index.vue

@@ -1,14 +1,14 @@
 <template>
   <view class="nut-badge">
-    <view class="slot-icons" v-show="!hidden && !dot" :style="stl">
+    <view class="nut-badge__icon" v-show="!hidden && !dot" :style="stl">
       <slot name="icons"></slot>
     </view>
     <slot></slot>
     <view
       v-show="!hidden && (content || dot)"
       v-text="content"
-      class="nut-badge__content sup"
-      :class="{ 'is-dot': dot }"
+      class="nut-badge__content nut-badge__content--sup"
+      :class="{ 'nut-badge__content--dot': dot }"
       :style="stl"
     >
     </view>

src/packages/__VUE/button/index.scss

@@ -19,7 +19,7 @@
 
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-tap-highlight-color: transparent;
-  .text {
+  .nut-button__text {
     margin-left: 5px;
   }
   &::before {

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

@@ -9,7 +9,7 @@
         :class-prefix="iconClassPrefix"
         :font-class-name="iconFontClassName"
       ></nut-icon>
-      <view :class="{ text: icon || loading }" v-if="$slots.default">
+      <view :class="{ 'nut-button__text': icon || loading }" v-if="$slots.default">
         <slot></slot>
       </view>
     </view>

src/packages/__VUE/button/index.vue

@@ -9,7 +9,7 @@
         :class-prefix="iconClassPrefix"
         :font-class-name="iconFontClassName"
       ></nut-icon>
-      <view :class="{ text: icon || loading }" v-if="$slots.default">
+      <view :class="{ 'nut-button__text': icon || loading }" v-if="$slots.default">
         <slot></slot>
       </view>
     </view>

src/packages/__VUE/circleprogress/index.scss

@@ -7,16 +7,16 @@
 .nut-circleprogress {
   position: relative;
 
-  &-hover {
+  &__hover {
     stroke: $circleprogress-primary-color;
     transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;
   }
 
-  &-path {
+  &__path {
     stroke: $circleprogress-path-color;
   }
 
-  &-text {
+  &__text {
     position: absolute;
     top: 50%;
     left: 0;

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

@@ -1,7 +1,7 @@
 <template>
   <div :class="classes" :style="{ height: radius * 2 + 'px', width: radius * 2 + 'px' }">
     <div :style="style"></div>
-    <div class="nut-circleprogress-text">
+    <div class="nut-circleprogress__text">
       <slot></slot>
       <span v-if="!slotDefault">{{ progress }}%</span>
     </div>

src/packages/__VUE/circleprogress/index.vue

@@ -6,11 +6,11 @@
           <stop v-for="(item, index) in stop" :key="index" :offset="item.key" :stop-color="item.value"></stop>
         </linearGradient>
       </defs>
-      <path class="nut-circleprogress-path" :style="pathStyle" :d="path" fill="none" :stroke-width="strokeWidth">
+      <path class="nut-circleprogress__path" :style="pathStyle" :d="path" fill="none" :stroke-width="strokeWidth">
         >
       </path>
       <path
-        class="nut-circleprogress-hover"
+        class="nut-circleprogress__hover"
         :style="hoverStyle"
         :d="path"
         fill="none"
@@ -19,7 +19,7 @@
         :stroke-width="strokeWidth"
       ></path>
     </svg>
-    <div class="nut-circleprogress-text">
+    <div class="nut-circleprogress__text">
       <slot></slot>
       <div v-if="!slotDefault">{{ progress }}%</div>
     </div>

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

@@ -31,7 +31,7 @@
         </view>
       </view>
       <view class="nut-elevator__list__fixed" :style="fixedStyle" v-show="scrollY > 0" v-if="isSticky">
-        <span class="fixed-title">{{ indexList[currentIndex][acceptKey] }}</span>
+        <span class="nut-elevator__fixed-title">{{ indexList[currentIndex][acceptKey] }}</span>
       </view>
     </Nut-Scroll-View>
     <view class="nut-elevator__code--current" v-show="scrollStart" v-if="indexList.length > 0">

src/packages/__VUE/elevator/index.vue

@@ -17,7 +17,7 @@
         </view>
       </view>
       <view class="nut-elevator__list__fixed" :style="fixedStyle" v-show="scrollY > 0" v-if="isSticky">
-        <span class="fixed-title">{{ indexList[currentIndex][acceptKey] }}</span>
+        <span class="nut-elevator__fixed-title">{{ indexList[currentIndex][acceptKey] }}</span>
       </view>
     </view>
     <view class="nut-elevator__code--current" v-show="scrollStart" v-if="indexList.length">{{

src/packages/__VUE/ellipsis/index.scss

@@ -1,17 +1,17 @@
 .nut-ellipsis {
   display: flex;
-  .nut-ellipsis-text {
+  .nut-ellipsis__text {
     cursor: hand;
     color: $ellipsis-expand-collapse-color;
     display: inline;
   }
 
-  .nut-ellipsis-wordbreak {
+  .nut-ellipsis__wordbreak {
     word-break: break-all;
   }
 }
 
-.nut-ellipsis-copy {
+.nut-ellipsis__copy {
   position: absolute;
   top: -999999px;
 }

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

@@ -1,25 +1,25 @@
 <template>
   <view>
     <view :class="classes" @click="handleClick" ref="root" :id="'root' + refRandomId">
-      <view class="nut-ellipsis-wordbreak" v-if="!exceeded">{{ content }}</view>
+      <view class="nut-ellipsis__wordbreak" v-if="!exceeded">{{ content }}</view>
 
-      <view v-if="exceeded && !expanded" class="nut-ellipsis-wordbreak">
+      <view v-if="exceeded && !expanded" class="nut-ellipsis__wordbreak">
         {{ ellipsis.leading }}{{ ellipsis.leading && symbol
-        }}<view class="nut-ellipsis-text" v-if="expandText" @click.stop="clickHandle(1)">{{ expandText }}</view
+        }}<view class="nut-ellipsis__text" v-if="expandText" @click.stop="clickHandle(1)">{{ expandText }}</view
         >{{ ellipsis.tailing && symbol }}{{ ellipsis.tailing }}
       </view>
       <view v-if="exceeded && expanded">
         {{ content }}
-        <span class="nut-ellipsis-text" v-if="expandText" @click.stop="clickHandle(2)">{{ collapseText }}</span>
+        <span class="nut-ellipsis__text" v-if="expandText" @click.stop="clickHandle(2)">{{ collapseText }}</span>
       </view>
     </view>
 
-    <view class="nut-ellipsis-copy" ref="rootContain" :id="'rootContain' + refRandomId" :style="{ width: widthRef }">
+    <view class="nut-ellipsis__copy" ref="rootContain" :id="'rootContain' + refRandomId" :style="{ width: widthRef }">
       <view>{{ contantCopy }}</view>
     </view>
 
     <!-- 省略号 symbol  -->
-    <view class="nut-ellipsis-copy" ref="symbolContain" :id="'symbolContain' + refRandomId" style="display: inline">{{
+    <view class="nut-ellipsis__copy" ref="symbolContain" :id="'symbolContain' + refRandomId" style="display: inline">{{
       symbolText
     }}</view>
 

src/packages/__VUE/ellipsis/index.vue

@@ -3,12 +3,12 @@
     <view v-if="!exceeded">{{ content }}</view>
     <view v-if="exceeded && !expanded"
       >{{ ellipsis.leading
-      }}<span class="nut-ellipsis-text" v-if="expandText" @click.stop="clickHandle(1)">{{ expandText }}</span
+      }}<span class="nut-ellipsis__text" v-if="expandText" @click.stop="clickHandle(1)">{{ expandText }}</span
       >{{ ellipsis.tailing }}
     </view>
     <view v-if="exceeded && expanded">
       {{ content }}
-      <span class="nut-ellipsis-text" v-if="expandText" @click.stop="clickHandle(2)">{{ collapseText }}</span>
+      <span class="nut-ellipsis__text" v-if="expandText" @click.stop="clickHandle(2)">{{ collapseText }}</span>
     </view>
   </view>
 </template>

src/packages/__VUE/empty/index.scss

@@ -12,7 +12,7 @@
   justify-content: center;
   padding: $empty-padding;
 
-  &-image {
+  &__box {
     width: $empty-image-size;
     height: $empty-image-size;
 
@@ -29,7 +29,7 @@
     }
   }
 
-  &-description {
+  &__description {
     margin-top: $empty-description-margin-top;
     padding: $empty-description-padding;
     color: $empty-description-color;

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

@@ -1,12 +1,12 @@
 <template>
   <view class="nut-empty">
     <!-- 占位图 -->
-    <view class="nut-empty-image" :style="imgStyle">
+    <view class="nut-empty__box" :style="imgStyle">
       <template v-if="$slots.image">
         <slot name="image"></slot>
       </template>
       <template v-else>
-        <img v-if="imageUrl" class="img" :src="imageUrl" />
+        <img v-if="imageUrl" class="nut-empty__box--img" :src="imageUrl" />
       </template>
     </view>
 
@@ -15,7 +15,7 @@
       <slot name="description"></slot>
     </template>
     <template v-else>
-      <view class="nut-empty-description">{{ description || translate('noData') }}</view>
+      <view class="nut-empty__description">{{ description || translate('noData') }}</view>
     </template>
 
     <!-- 自定义slot -->

src/packages/__VUE/empty/index.vue

@@ -1,12 +1,12 @@
 <template>
   <view class="nut-empty">
     <!-- 占位图 -->
-    <view class="nut-empty-image" :style="imgStyle">
+    <view class="nut-empty__box" :style="imgStyle">
       <template v-if="$slots.image">
         <slot name="image"></slot>
       </template>
       <template v-else>
-        <img v-if="imageUrl" class="img" :src="imageUrl" />
+        <img v-if="imageUrl" class="nut-empty__box--img" :src="imageUrl" />
       </template>
     </view>
 
@@ -15,7 +15,7 @@
       <slot name="description"></slot>
     </template>
     <template v-else>
-      <view class="nut-empty-description">{{ description || translate('noData') }}</view>
+      <view class="nut-empty__description">{{ description || translate('noData') }}</view>
     </template>
 
     <!-- 自定义slot -->

src/packages/styles/variables-var.scss

@@ -365,7 +365,7 @@ $address-region-tab-line: var(--nut-address-region-tab-line) !default;
 $address-icon-color: var(--nut-address-icon-color) !default;
 $address-header-title-font-size: var(--nut-address-header-title-font-size) !default;
 $address-header-title-color: var(--nut-address-header-title-color) !default;
-$address-region-tab-font-size: var(--nut-address-region-tab-color) !default;
+$address-region-tab-font-size: var(--nut-address-region-tab-font-size) !default;
 $address-region-tab-color: var(--nut-address-region-tab-color) !default;
 $address-region-tab-active-item-font-weight: var(--nut-address-region-tab-active-item-font-weight) !default;
 $address-region-tab-line-border-radius: var(--nut-address-region-tab-line-border-radius) !default;