Browse Source

chore(fixed-nav): modify class name

richard1015 3 years ago
parent
commit
efc9934ddc

+ 1 - 1
src/packages/__VUE/drag/index.scss

@@ -5,7 +5,7 @@
   width: fit-content;
   height: fit-content;
 
-  .nut-fixednav {
+  .nut-fixed-nav {
     position: relative !important;
   }
 }

+ 8 - 8
src/packages/__VUE/fixednav/__tests__/fixednav.spec.ts

@@ -1,11 +1,11 @@
 import { config, DOMWrapper, mount } from '@vue/test-utils';
 import FixedNav from '../index.vue';
 import { nextTick } from 'vue';
-import NutIcon from '../../icon/index.vue';
+import { Left } from '@nutui/icons-vue';
 import nutOverlay from '../../overlay/index.vue';
 beforeAll(() => {
   config.global.components = {
-    NutIcon,
+    Left,
     nutOverlay
   };
 });
@@ -14,9 +14,9 @@ afterAll(() => {
   config.global.components = {};
 });
 describe('FixedNav', () => {
-  test('base nut-fixednav', () => {
+  test('base nut-fixed-nav', () => {
     const wrapper = mount(FixedNav);
-    const rate = wrapper.find('.nut-fixednav');
+    const rate = wrapper.find('.nut-fixed-nav');
     expect(rate.exists()).toBe(true);
   });
 
@@ -27,7 +27,7 @@ describe('FixedNav', () => {
         overlay: true
       }
     });
-    const _html: DOMWrapper<Element> = wrapper.find('.nut-fixednav__list');
+    const _html: DOMWrapper<Element> = wrapper.find('.nut-fixed-nav__list');
     expect(_html.exists()).toBe(true);
   });
   test('should be displayed after setting the type', () => {
@@ -49,9 +49,9 @@ describe('FixedNav', () => {
     });
     const _html1 = wrapper.find('.nut-overlay');
     expect(_html1.exists()).toBe(true);
-    const _html = wrapper.find('.nut-fixednav__btn');
+    const _html = wrapper.find('.nut-fixed-nav__btn');
     expect(_html.html()).toContain('展开');
-    wrapper.find('.nut-fixednav__btn').trigger('click');
+    wrapper.find('.nut-fixed-nav__btn').trigger('click');
     await nextTick();
     expect(wrapper.emitted('update:visible')![0]).toEqual([true]);
   });
@@ -62,7 +62,7 @@ describe('FixedNav', () => {
         position: { top: '210px' }
       }
     });
-    const _html = wrapper.find('.nut-fixednav');
+    const _html = wrapper.find('.nut-fixed-nav');
     expect((_html.element as HTMLElement).style.top).toBe('210px');
   });
 });

+ 1 - 1
src/packages/__VUE/fixednav/common.ts

@@ -47,7 +47,7 @@ export const component = (components: any) => {
 
     setup(props: any, { emit }: any) {
       const classes = computed(() => {
-        const prefixCls = 'nut-fixednav';
+        const prefixCls = componentName;
         return {
           [prefixCls]: true,
           active: props.visible,

+ 6 - 6
src/packages/__VUE/fixednav/demo.vue

@@ -25,12 +25,12 @@
     />
     <nut-fixed-nav :position="{ top: '280px' }" type="left" v-model:visible="myActive" @selected="selected">
       <template v-slot:list>
-        <ul class="nut-fixednav__list">
-          <li class="nut-fixednav__list-item">1</li>
-          <li class="nut-fixednav__list-item">2</li>
-          <li class="nut-fixednav__list-item">3</li>
-          <li class="nut-fixednav__list-item">4</li>
-          <li class="nut-fixednav__list-item">5</li>
+        <ul class="nut-fixed-nav__list">
+          <li class="nut-fixed-nav__list-item">1</li>
+          <li class="nut-fixed-nav__list-item">2</li>
+          <li class="nut-fixed-nav__list-item">3</li>
+          <li class="nut-fixed-nav__list-item">4</li>
+          <li class="nut-fixed-nav__list-item">5</li>
         </ul>
       </template>
       <template v-slot:btn>

+ 6 - 6
src/packages/__VUE/fixednav/doc.en-US.md

@@ -93,12 +93,12 @@ export default {
 <template>
 <nut-fixed-nav :position="{top:'280px' }" type="left" v-model:visible="myActive">
     <template v-slot:list>
-        <ul class="nut-fixednav__list">
-            <li class="nut-fixednav__list-item">1</li>
-            <li class="nut-fixednav__list-item">2</li>
-            <li class="nut-fixednav__list-item">3</li>
-            <li class="nut-fixednav__list-item">4</li>
-            <li class="nut-fixednav__list-item">5</li>
+        <ul class="nut-fixed-nav__list">
+            <li class="nut-fixed-nav__list-item">1</li>
+            <li class="nut-fixed-nav__list-item">2</li>
+            <li class="nut-fixed-nav__list-item">3</li>
+            <li class="nut-fixed-nav__list-item">4</li>
+            <li class="nut-fixed-nav__list-item">5</li>
         </ul>
     </template>
 <template v-slot:btn>

+ 6 - 6
src/packages/__VUE/fixednav/doc.md

@@ -93,12 +93,12 @@ export default {
 <template>
 <nut-fixed-nav :position="{top:'280px' }" type="left" v-model:visible="myActive">
     <template v-slot:list>
-        <ul class="nut-fixednav__list">
-            <li class="nut-fixednav__list-item">1</li>
-            <li class="nut-fixednav__list-item">2</li>
-            <li class="nut-fixednav__list-item">3</li>
-            <li class="nut-fixednav__list-item">4</li>
-            <li class="nut-fixednav__list-item">5</li>
+        <ul class="nut-fixed-nav__list">
+            <li class="nut-fixed-nav__list-item">1</li>
+            <li class="nut-fixed-nav__list-item">2</li>
+            <li class="nut-fixed-nav__list-item">3</li>
+            <li class="nut-fixed-nav__list-item">4</li>
+            <li class="nut-fixed-nav__list-item">5</li>
         </ul>
     </template>
 <template v-slot:btn>

+ 4 - 4
src/packages/__VUE/fixednav/index.scss

@@ -1,4 +1,4 @@
-.nut-fixednav {
+.nut-fixed-nav {
   position: fixed;
   z-index: $fixednav-index;
   display: inline-block;
@@ -9,7 +9,7 @@
     .nut-icon {
       transform: rotate(180deg);
     }
-    .nut-fixednav__list {
+    .nut-fixed-nav__list {
       transform: translateX(0%) !important;
     }
     &.left {
@@ -119,7 +119,7 @@
     right: auto;
     left: 0;
 
-    .nut-fixednav__btn {
+    .nut-fixed-nav__btn {
       flex-direction: row-reverse;
       right: auto;
       left: 0;
@@ -128,7 +128,7 @@
         transform: rotate(180deg);
       }
     }
-    .nut-fixednav__list {
+    .nut-fixed-nav__list {
       transform: translateX(-100%);
       right: auto;
       border-radius: 0px 25px 25px 0px;

+ 3 - 3
src/packages/__VUE/fixednav/template.html

@@ -1,8 +1,8 @@
 <view :class="classes" :style="position">
     <nut-overlay v-if="overlay" :visible="visible" :z-index="200" @click="updateValue(false)" />
     <slot name="list">
-        <view class="nut-fixednav__list">
-            <view class="nut-fixednav__list-item" :class="{ active: item.id == current }"
+        <view class="nut-fixed-nav__list">
+            <view class="nut-fixed-nav__list-item" :class="{ active: item.id == current }"
                 v-for="(item, index) in navList" @click="selected(item, $event)" :key="item.id || index">
                 <img :src="item.icon" />
                 <view class="span">{{ item.text }}</view>
@@ -10,7 +10,7 @@
             </view>
         </view>
     </slot>
-    <div class="nut-fixednav__btn" @click="updateValue()">
+    <div class="nut-fixed-nav__btn" @click="updateValue()">
         <slot name="btn">
             <Left color="#fff" />
             <view class="text">{{ visible ? activeText || translate('activeText') : unActiveText ||

+ 6 - 6
src/sites/mobile-taro/vue/src/nav/pages/fixednav/index.vue

@@ -26,12 +26,12 @@
 
     <nut-fixed-nav :position="{ top: '280px' }" type="left" v-model:visible="myActive" @selected="selected">
       <template v-slot:list>
-        <ul class="nut-fixednav__list">
-          <li class="nut-fixednav__list-item">1</li>
-          <li class="nut-fixednav__list-item">2</li>
-          <li class="nut-fixednav__list-item">3</li>
-          <li class="nut-fixednav__list-item">4</li>
-          <li class="nut-fixednav__list-item">5</li>
+        <ul class="nut-fixed-nav__list">
+          <li class="nut-fixed-nav__list-item">1</li>
+          <li class="nut-fixed-nav__list-item">2</li>
+          <li class="nut-fixed-nav__list-item">3</li>
+          <li class="nut-fixed-nav__list-item">4</li>
+          <li class="nut-fixed-nav__list-item">5</li>
         </ul>
       </template>
       <template v-slot:btn>