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

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

@@ -1,6 +1,5 @@
 import { config, mount } from '@vue/test-utils';
 import { nextTick, ref, toRefs, reactive, onMounted } from 'vue';
-import NutIcon from '../../icon/index.vue';
 import NutRange from '../../range/index.vue';
 import Audio from '../index.vue';
 import AudioOperate from '../../audiooperate/index.vue';
@@ -14,7 +13,6 @@ function sleep(delay = 0): Promise<void> {
 
 beforeAll(() => {
   config.global.components = {
-    NutIcon,
     NutRange,
     AudioOperate,
     NutButton
@@ -40,7 +38,6 @@ test('audio init render', async () => {
   const wrapper = mount({
     components: {
       'nut-audio': Audio,
-      'nut-icon': NutIcon,
       'nut-range': NutRange,
       'nut-audio-operate': AudioOperate,
       'nut-button': NutButton

src/packages/__VUE/audio/demo.vue

@@ -22,7 +22,7 @@
       ref="audioDemo"
     >
       <div class="nut-voice">
-        <div><nut-icon name="voice"></nut-icon></div>
+        <div><Voice></Voice></div>
         <div>{{ duration }}"</div>
       </div>
     </nut-audio>
@@ -59,11 +59,16 @@
       @changeProgress="changeProgress"
     >
       <div class="nut-audio-operate-group">
-        <nut-audio-operate type="back"><nut-icon name="play-double-back" size="35"></nut-icon></nut-audio-operate>
-        <nut-audio-operate type="play"
-          ><nut-icon :name="!playing ? 'play-start' : 'play-stop'" size="35"></nut-icon
-        ></nut-audio-operate>
-        <nut-audio-operate type="forward"><nut-icon name="play-double-forward" size="35"></nut-icon></nut-audio-operate>
+        <nut-audio-operate type="back">
+          <PlayDoubleBack width="35px" height="35px"></PlayDoubleBack>
+        </nut-audio-operate>
+        <nut-audio-operate type="play">
+          <PlayStart v-if="!playing" width="35px" height="35px"></PlayStart>
+          <PlayStop v-else width="35px" height="35px"></PlayStop>
+        </nut-audio-operate>
+        <nut-audio-operate type="forward">
+          <PlayDoubleForward width="35px" height="35px"></PlayDoubleForward>
+        </nut-audio-operate>
       </div>
     </nut-audio>
   </div>
@@ -74,7 +79,7 @@ import { reactive, toRefs, ref, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('audio');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-
+import { PlayDoubleBack, PlayDoubleForward, PlayStart, PlayStop, Voice } from '@nutui/icons-vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -93,11 +98,20 @@ const initTranslate = () =>
 
 export default createDemo({
   props: {},
+  components: {
+    Voice,
+    PlayDoubleBack,
+    PlayDoubleForward,
+    PlayStart,
+    PlayStop
+  },
   setup() {
     initTranslate();
-    const audioDemo = ref(null);
+    const audioDemo = ref({
+      second: 0
+    });
     const playing = ref(false);
-    const duration = ref(0);
+    const duration = ref<string>('');
     const data = reactive({
       muted: false,
       autoplay: false
@@ -107,11 +121,11 @@ export default createDemo({
       console.log('倒退');
     };
 
-    const forward = (progress) => {
+    const forward = (progress: number) => {
       console.log('快进', '当前时间' + progress);
     };
 
-    const changeStatus = (status) => {
+    const changeStatus = (status: boolean) => {
       console.log('当前播放状态', status);
       playing.value = status;
     };
@@ -120,12 +134,13 @@ export default createDemo({
       console.log('播放结束');
     };
 
-    const changeProgress = (val) => {
+    const changeProgress = (val: number) => {
       console.log('改变进度条', val);
     };
 
     const onCanplay = (e: Event) => {
       duration.value = audioDemo.value.second.toFixed();
+      console.log(e, duration.value);
     };
 
     onMounted(() => {
@@ -172,5 +187,10 @@ export default createDemo({
     border: 1px solid rgba(0, 0, 0, 0.6);
     border-radius: 18px;
   }
+
+  :deep(svg.nut-icon-am-rotate) {
+    --animate-duration: 1s !important;
+    --animate-delay: 0s;
+  }
 }
 </style>

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

@@ -51,7 +51,7 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
     <nut-audio
       url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
@@ -62,14 +62,18 @@ export default {
       ref="audioDemo"
     >
       <div class="nut-voice">
-        <div><nut-icon name="voice"></nut-icon></div>
+        <div><Voice></Voice></div>
         <div>{{ duration }}"</div>
       </div>
     </nut-audio>
 </template>
 <script lang="ts">
 import { reactive, toRefs, onMounted } from 'vue';
+import { Voice } from '@nutui/icons-vue'
 export default {
+  components: {
+    Voice
+  },
   setup() {
     const audioDemo = ref(null);
     const data = reactive({
@@ -148,7 +152,7 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
     <nut-audio
       url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
@@ -163,17 +167,29 @@ export default {
       @changeProgress="changeProgress"
     >
       <div class="nut-audio-operate-group">
-        <nut-audio-operate type="back"><nut-icon name="play-double-back" size="35"></nut-icon></nut-audio-operate>
-        <nut-audio-operate type="play"
-          ><nut-icon :name="!playing ? 'play-start' : 'play-stop'" size="35"></nut-icon
-        ></nut-audio-operate>
-        <nut-audio-operate type="forward"><nut-icon name="play-double-forward" size="35"></nut-icon></nut-audio-operate>
+        <nut-audio-operate type="back">
+          <PlayDoubleBack width="35px" height="35px"></PlayDoubleBack>
+        </nut-audio-operate>
+        <nut-audio-operate type="play">
+          <PlayStart v-if="!playing" width="35px" height="35px"></PlayStart>
+          <PlayStop v-else width="35px" height="35px"></PlayStop>
+        </nut-audio-operate>
+        <nut-audio-operate type="forward">
+          <PlayDoubleForward width="35px" height="35px"></PlayDoubleForward>
+        </nut-audio-operate>
       </div>
     </nut-audio>
 </template>
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
+import { PlayDoubleBack, PlayDoubleForward, PlayStart, PlayStop } from '@nutui/icons-vue'
 export default {
+  components: {
+    PlayDoubleBack,
+    PlayDoubleForward,
+    PlayStart, 
+    PlayStop
+  },
   setup() {
     const data = reactive({
       muted: false,
@@ -182,27 +198,36 @@ export default {
     const playing = ref(false);
 
     const fastBack = () => {
-      console.log('倒退');
+      console.log('Backwards');
     };
 
-    const forward = (progress) => {
-      console.log('快进', '当前时间' + progress);
+    const forward = (progress: number) => {
+      console.log('Fast forward', 'Current Time' + progress);
     };
 
-    const changeStatus = (status) => {
-      console.log('当前播放状态', status);
+    const changeStatus = (status: boolean) => {
+      console.log('Current play status', status);
       playing.value = status;
     };
 
     const ended = () => {
-      console.log('播放结束');
+      console.log('Playing ended');
     };
 
-    const changeProgress = (val) => {
-      console.log('改变进度条', val);
+    const changeProgress = (val: number) => {
+      console.log('Change progress', val);
     };
+
     return {
-      ...toRefs(data),playing, fastBack, forward, changeStatus, audioDemo, ended, duration, changeProgress
+      ...toRefs(data),
+      playing, 
+      fastBack, 
+      forward, 
+      changeStatus, 
+      audioDemo, 
+      ended, 
+      duration, 
+      changeProgress
     };
   }
 };

src/packages/__VUE/audio/doc.md

@@ -51,7 +51,7 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
     <nut-audio
       url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
@@ -62,14 +62,18 @@ export default {
       ref="audioDemo"
     >
       <div class="nut-voice">
-        <div><nut-icon name="voice"></nut-icon></div>
+        <div><Voice></Voice></div>
         <div>{{ duration }}"</div>
       </div>
     </nut-audio>
 </template>
 <script lang="ts">
 import { reactive, toRefs, onMounted } from 'vue';
+import { Voice } from '@nutui/icons-vue'
 export default {
+  components: {
+    Voice
+  },
   setup() {
     const audioDemo = ref(null);
     const data = reactive({
@@ -148,7 +152,7 @@ export default {
 
 :::demo
 
-```html
+```vue
 <template>
     <nut-audio
       url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
@@ -163,17 +167,29 @@ export default {
       @changeProgress="changeProgress"
     >
       <div class="nut-audio-operate-group">
-        <nut-audio-operate type="back"><nut-icon name="play-double-back" size="35"></nut-icon></nut-audio-operate>
-        <nut-audio-operate type="play"
-          ><nut-icon :name="!playing ? 'play-start' : 'play-stop'" size="35"></nut-icon
-        ></nut-audio-operate>
-        <nut-audio-operate type="forward"><nut-icon name="play-double-forward" size="35"></nut-icon></nut-audio-operate>
+        <nut-audio-operate type="back">
+          <PlayDoubleBack width="35px" height="35px"></PlayDoubleBack>
+        </nut-audio-operate>
+        <nut-audio-operate type="play">
+          <PlayStart v-if="!playing" width="35px" height="35px"></PlayStart>
+          <PlayStop v-else width="35px" height="35px"></PlayStop>
+        </nut-audio-operate>
+        <nut-audio-operate type="forward">
+          <PlayDoubleForward width="35px" height="35px"></PlayDoubleForward>
+        </nut-audio-operate>
       </div>
     </nut-audio>
 </template>
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
+import { PlayDoubleBack, PlayDoubleForward, PlayStart, PlayStop } from '@nutui/icons-vue'
 export default {
+  components: {
+    PlayDoubleBack,
+    PlayDoubleForward,
+    PlayStart, 
+    PlayStop
+  },
   setup() {
     const data = reactive({
       muted: false,
@@ -185,11 +201,11 @@ export default {
       console.log('倒退');
     };
 
-    const forward = (progress) => {
+    const forward = (progress: number) => {
       console.log('快进', '当前时间' + progress);
     };
 
-    const changeStatus = (status) => {
+    const changeStatus = (status: boolean) => {
       console.log('当前播放状态', status);
       playing.value = status;
     };
@@ -198,11 +214,20 @@ export default {
       console.log('播放结束');
     };
 
-    const changeProgress = (val) => {
+    const changeProgress = (val: number) => {
       console.log('改变进度条', val);
     };
+
     return {
-      ...toRefs(data),playing, fastBack, forward, changeStatus, audioDemo, ended, duration, changeProgress
+      ...toRefs(data),
+      playing, 
+      fastBack, 
+      forward, 
+      changeStatus, 
+      audioDemo, 
+      ended, 
+      duration, 
+      changeProgress
     };
   }
 };

src/packages/__VUE/audio/index.vue

@@ -29,8 +29,8 @@
         :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>
-        <nut-icon v-if="!playing" name="service"></nut-icon>
+        <Service v-if="playing" class="nut-icon-am-rotate nut-icon-am-infinite"></Service>
+        <Service v-else></Service>
       </div>
     </div>
 
@@ -63,6 +63,7 @@
 import { toRefs, ref, onMounted, reactive, watch, provide } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import Range from '../range/index.vue';
+import { Service } from '@nutui/icons-vue';
 const { componentName, create } = createComponent('audio');
 
 export default create({
@@ -106,7 +107,8 @@ export default create({
     }
   },
   components: {
-    [Range.name]: Range
+    [Range.name]: Range,
+    Service
   },
   emits: ['fastBack', 'play', 'forward', 'ended', 'changeProgress', 'mute', 'can-play'],
 

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

@@ -1,11 +1,13 @@
 import { config, mount } from '@vue/test-utils';
 import { h, nextTick } from 'vue';
-import Image from '../index.vue';
-import NutIcon from '../../icon/index.vue';
-
+import ImagePage from '../index.vue';
+import { Loading, CircleClose, Image, ImageError } from '@nutui/icons-vue';
 beforeAll(() => {
   config.global.components = {
-    NutIcon
+    Loading,
+    CircleClose,
+    Image,
+    ImageError
   };
 });
 
@@ -13,8 +15,8 @@ afterAll(() => {
   config.global.components = {};
 });
 
-test('image render', async () => {
-  const wrapper = mount(Image, {
+test('ImagePage render', async () => {
+  const wrapper = mount(ImagePage, {
     props: {
       src: '//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg',
       width: '100',
@@ -26,8 +28,8 @@ test('image render', async () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('image load error', async () => {
-  const wrapper = mount(Image, {
+test('ImagePage load error', async () => {
+  const wrapper = mount(ImagePage, {
     props: {
       src: 'https://x',
       width: '100',
@@ -40,8 +42,8 @@ test('image load error', async () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('image loading', async () => {
-  const wrapper = mount(Image, {
+test('ImagePage loading', async () => {
+  const wrapper = mount(ImagePage, {
     props: {
       src: '',
       width: '100',
@@ -54,8 +56,8 @@ test('image loading', async () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('image render Round', async () => {
-  const wrapper = mount(Image, {
+test('ImagePage render Round', async () => {
+  const wrapper = mount(ImagePage, {
     props: {
       src: '//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg',
       width: '100',

src/packages/__VUE/image/demo.vue

@@ -52,7 +52,7 @@
         <nut-col :span="8">
           <nut-image width="100" height="100" showLoading>
             <template #loading>
-              <nut-icon name="loading"></nut-icon>
+              <Loading width="16px" height="16px" name="loading"></Loading>
             </template>
           </nut-image>
           <div class="text">自定义</div>
@@ -69,7 +69,9 @@
         </nut-col>
         <nut-col :span="8">
           <nut-image src="https://x" width="100" height="100" showLoading>
-            <nut-icon name="circle-close"></nut-icon>
+            <template #error>
+              <CircleClose width="16px" height="16px" name="circleClose"></CircleClose>
+            </template>
           </nut-image>
           <div class="text">自定义</div>
         </nut-col>
@@ -80,6 +82,7 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { Loading, CircleClose } from '@nutui/icons-vue';
 const { createDemo, translate } = createComponent('image');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
@@ -103,6 +106,10 @@ const initTranslate = () =>
   });
 export default createDemo({
   props: {},
+  components: {
+    Loading,
+    CircleClose
+  },
   setup() {
     initTranslate();
     const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');

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

@@ -96,7 +96,7 @@ The Image component provides a default loading prompt and supports custom conten
 <template>
   <nut-image width="100" height="100" showLoading>
     <template #loading>
-      <nut-icon name="loading"></nut-icon>
+      <Loading width="16px" height="16px" name="loading"></Loading>
     </template>
   </nut-image>
 </template>
@@ -113,7 +113,9 @@ The Image component provides a default loading failure warning and supports cust
 ```html
 <template>
   <nut-image src="https://x" width="100" height="100" showLoading>
-    <template #error> <nut-icon name="circle-close"></nut-icon> </template>
+    <template #error>
+      <CircleClose width="16px" height="16px" name="circleClose"></CircleClose>
+    </template>
   </nut-image>
 </template>
 ```

src/packages/__VUE/image/doc.md

@@ -95,7 +95,7 @@ app.use();
 <template>
   <nut-image width="100" height="100" showLoading>
     <template #loading>
-      <nut-icon name="loading"></nut-icon>
+      <Loading width="16px" height="16px" name="loading"></Loading>
     </template>
   </nut-image>
 </template>
@@ -112,7 +112,9 @@ app.use();
 ```html
 <template>
   <nut-image src="https://x" width="100" height="100" showError>
-    <template #error> 加载失败 </template>
+    <template #error> 
+      <CircleClose width="16px" height="16px" name="circleClose"></CircleClose>
+    </template>
   </nut-image>
 </template>
 ```

src/packages/__VUE/image/index.vue

@@ -3,12 +3,11 @@
     <img class="nut-img" :src="src" :alt="alt" @load="load" @error="error" :style="styles" />
 
     <view class="nut-img-loading" v-if="loading">
-      <nut-icon name="image" v-if="!slotLoding"></nut-icon>
+      <Image v-if="!slotLoding" width="16px" height="20px" name="image"></Image>
       <slot name="loading"></slot>
     </view>
-
     <view class="nut-img-error" v-if="isError && !loading">
-      <nut-icon name="image-error" v-if="!slotError"></nut-icon>
+      <ImageError v-if="!slotError" width="16px" height="20px" name="imageError"></ImageError>
       <slot name="error"></slot>
     </view>
   </view>
@@ -17,6 +16,7 @@
 import { reactive, toRefs, computed, PropType, useSlots, watch, CSSProperties } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { pxCheck } from '../../utils/pxCheck';
+import { Image, ImageError } from '@nutui/icons-vue';
 const { componentName, create } = createComponent('image');
 export default create({
   props: {
@@ -55,6 +55,10 @@ export default create({
       default: true
     }
   },
+  components: {
+    Image,
+    ImageError
+  },
   emits: ['click', 'load', 'error'],
 
   setup(props, { emit }) {

src/packages/__VUE/sidenavbar/__tests__/index.spec.ts

@@ -3,7 +3,7 @@ import SideNavBar from '../index.vue';
 import SideNavBarItem from '../../sidenavbaritem/index.vue';
 import SubSideNavBar from '../../subsidenavbar/index.vue';
 import { nextTick } from 'vue';
-import NutIcon from '../../icon/index.vue';
+import { ArrowDown2, ArrowUp2 } from '@nutui/icons-vue';
 
 function sleep(delay = 0): Promise<void> {
   return new Promise((resolve) => {
@@ -13,7 +13,8 @@ function sleep(delay = 0): Promise<void> {
 
 beforeAll(() => {
   config.global.components = {
-    NutIcon
+    ArrowDown2,
+    ArrowUp2
   };
 });
 

src/packages/__VUE/sidenavbar/demo.vue

@@ -186,7 +186,4 @@ export default createDemo({
 });
 </script>
 
-<style lang="scss" scoped>
-.demo {
-}
-</style>
+<style lang="scss" scoped></style>

src/packages/__VUE/sidenavbar/index.vue

@@ -8,7 +8,7 @@
   </view>
 </template>
 <script lang="ts">
-import { computed, onMounted, reactive, ref, toRefs, Ref, watch } from 'vue';
+import { computed, onMounted, reactive, ref, toRefs, Ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('side-navbar');
 export default create({

src/packages/__VUE/subsidenavbar/index.vue

@@ -2,7 +2,10 @@
   <view :class="classes" :ikey="ikey">
     <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"><nut-icon name="down-arrow" :class="direction"></nut-icon></span>
+      <span class="nut-sub-side-navbar__title__icon">
+        <ArrowDown2 v-if="!direction"></ArrowDown2>
+        <ArrowUp2 v-else></ArrowUp2>
+      </span>
     </view>
     <view class="nut-sub-side-navbar__list" :class="!direction ? 'nutFadeIn' : 'nutFadeOut'" :style="style">
       <slot></slot>
@@ -12,6 +15,7 @@
 <script lang="ts">
 import { computed, onMounted, reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { ArrowDown2, ArrowUp2 } from '@nutui/icons-vue';
 const { componentName, create } = createComponent('sub-side-navbar');
 export default create({
   props: {
@@ -28,34 +32,30 @@ export default create({
       default: true
     }
   },
+  components: { ArrowDown2, ArrowUp2 },
   emits: ['title-click'],
   setup: (props: any, context: any) => {
     const state = reactive({
       direction: ''
     });
-
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true
       };
     });
-
     const style = computed(() => {
       return {
         height: !state.direction ? 'auto' : '0px'
       };
     });
-
     const handleClick = () => {
       context.emit('title-click');
       state.direction = !state.direction ? 'up' : '';
     };
-
     onMounted(() => {
       state.direction = props.open ? '' : 'up';
     });
-
     return {
       ...toRefs(state),
       classes,