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

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

@@ -164,7 +164,7 @@ describe('Form', () => {
     expect(formitem.length).toBe(2);
     const form1 = wrapper.find('.nut-cell__title');
     expect(form1.classes()).toContain('required');
-    expect((form1.element as HTMLElement).style.textAlign).toEqual('left');
+    expect((form1.element as HTMLElement).style.textAlign).toEqual('');
     expect((form1.element as HTMLElement).style.width).toEqual('90px');
     const form2 = wrapper.find('.nut-form-item__body__slots');
     expect((form2.element as HTMLElement).style.textAlign).toEqual('center');
@@ -270,13 +270,6 @@ describe('Form', () => {
       <nut-form-item label="复选框">
         <nut-checkbox v-model="formData2.checkbox">复选框</nut-checkbox>
       </nut-form-item>
-      <nut-form-item label="单选按钮">
-        <nut-radiogroup direction="horizontal" v-model="formData2.radio">
-          <nut-radio label="1">选项1</nut-radio>
-          <nut-radio disabled label="2">选项2</nut-radio>
-          <nut-radio label="3">选项3</nut-radio>
-        </nut-radiogroup>
-      </nut-form-item>
       <nut-form-item label="评分">
         <nut-rate v-model="formData2.rate" />
       </nut-form-item>
@@ -368,7 +361,7 @@ describe('Form', () => {
     });
     await nextTick();
     const formitem = wrapper.findAll('.nut-form-item');
-    expect(formitem.length).toBe(8);
+    expect(formitem.length).toBe(7);
     const formitem1 = wrapper.find('.nut-switch');
     expect(formitem1.exists()).toBe(true);
     const formitem2 = wrapper.find('.nut-checkbox');

src/packages/__VUE/progress/index.scss

@@ -14,7 +14,7 @@
       background: $progress-inner-background-color;
       -webkit-transition: all 0.4s;
       transition: all 0.4s;
-      position: relative;
+      // position: relative;
       .nut-progress-text {
         display: flex;
         flex-direction: column;
@@ -54,7 +54,8 @@
         font-size: $progress-small-text-font-size;
         line-height: $progress-small-text-line-height;
         padding: $progress-small-text-padding;
-        top: $progress-small-text-top;
+        // top: $progress-small-text-top;
+        top: 50%;
       }
     }
     &.nut-progress-base {
@@ -63,7 +64,7 @@
         font-size: $progress-base-text-font-size;
         line-height: $progress-base-text-line-height;
         padding: $progress-base-text-padding;
-        top: $progress-base-text-top;
+        top: 50%;
       }
     }
     &.nut-progress-large {
@@ -72,7 +73,7 @@
         font-size: $progress-large-text-font-size;
         line-height: $progress-large-text-line-height;
         padding: $progress-large-text-padding;
-        top: $progress-large-text-top;
+        top: 50%;
       }
     }
   }
@@ -91,7 +92,7 @@
     border-radius: $progress-insidetext-border-radius;
     position: absolute;
     transition: all 0.4s;
-    top: -42%;
+    top: 50%;
     min-width: 0px;
   }
   .nut-icon-success,

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

@@ -12,7 +12,7 @@
           class="nut-progress-text nut-progress-insidetext"
           ref="insideText"
           :id="'nut-progress-insidetext-taro-' + randRef"
-          :style="{ lineHeight: height, left: left }"
+          :style="{ lineHeight: height, left: `${percentage}%`, transform: `translate(-${+percentage}%,-50%)` }"
           v-if="showText && textInside"
         >
           <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }}</span>
@@ -87,7 +87,6 @@ export default create({
   setup(props, { emit }) {
     const height = ref(props.strokeWidth + 'px');
     const progressOuter = ref<any>();
-    const left = ref();
     const insideText = ref();
     const refRandomId = Math.random().toString(36).slice(-8);
     const randRef = ref(refRandomId);
@@ -102,49 +101,15 @@ export default create({
         color: props.textColor || ''
       };
     });
-    const slideLeft = async (values: string | number) => {
-      if (Taro.getEnv() === 'WEB') {
-        if (!props.textInside) return;
-        let offsetWidth = progressOuter.value.offsetWidth;
-        let percentageWidth = progressOuter.value.offsetWidth * Number(values) * 0.01;
-        let insideTextWidth = insideText.value.offsetWidth;
-        left.value = percentageWidth - 5 + 'px';
-        if (offsetWidth == percentageWidth) {
-          left.value = percentageWidth - insideTextWidth + 'px';
-        }
-      } else {
-        if (!props.textInside) return;
-        const query = Taro.createSelectorQuery() as any;
-        query.select('#nut-progress-outer-taro-' + randRef.value).boundingClientRect();
-        query.select('#nut-progress-insidetext-taro-' + randRef.value).boundingClientRect();
-        query.exec((res: any) => {
-          let offsetWidth = res[0].width;
-          let percentageWidth = res[0].width * Number(values) * 0.01;
-          let insideTextWidth = res[1].width;
-          left.value = percentageWidth - 4 + 'px';
-          if (offsetWidth == percentageWidth) {
-            left.value = percentageWidth - insideTextWidth + 'px';
-          }
-        });
-      }
-    };
-    watch(
-      () => props.percentage,
-      (values) => {
-        slideLeft(values);
-      }
-    );
+
     onMounted(() => {
-      eventCenter.once((getCurrentInstance() as any).router.onReady, () => {
-        slideLeft(props.percentage);
-      });
+      eventCenter.once((getCurrentInstance() as any).router.onReady, () => {});
     });
     return {
       height,
       bgStyle,
       textStyle,
       progressOuter,
-      left,
       insideText,
       randRef
     };

src/packages/__VUE/progress/index.vue

@@ -10,7 +10,7 @@
         <div
           class="nut-progress-text nut-progress-insidetext"
           ref="insideText"
-          :style="{ lineHeight: height, left: left }"
+          :style="{ lineHeight: height, left: `${percentage}%`, transform: `translate(-${+percentage}%,-50%)` }"
           v-if="showText && textInside"
         >
           <span :style="textStyle">{{ percentage }}{{ isShowPercentage ? '%' : '' }} </span>
@@ -85,7 +85,6 @@ export default create({
     const height = ref(props.strokeWidth + 'px');
     const progressOuter = ref();
     const insideText = ref();
-    const left = ref();
     const bgStyle = computed(() => {
       return {
         width: props.percentage + '%',
@@ -97,35 +96,13 @@ export default create({
         color: props.textColor || ''
       };
     });
-
-    const slideLeft = (values: string | number) => {
-      if (props.textInside) {
-        let offsetWidth = progressOuter.value.offsetWidth;
-        let percentageWidth = progressOuter.value.offsetWidth * Number(values) * 0.01;
-        let insideTextWidth = insideText.value.offsetWidth;
-        left.value = percentageWidth - 5 + 'px';
-        if (offsetWidth == percentageWidth) {
-          left.value = percentageWidth - insideTextWidth + 'px';
-        }
-      }
-    };
-
-    watch(
-      () => props.percentage,
-      (values) => {
-        slideLeft(values);
-      }
-    );
-    onMounted(() => {
-      slideLeft(props.percentage);
-    });
+    onMounted(() => {});
     return {
       height,
       bgStyle,
       textStyle,
       progressOuter,
-      insideText,
-      left
+      insideText
     };
   }
 });

src/packages/__VUE/tabs/index.vue

@@ -95,6 +95,7 @@ export default create({
   setup(props, { emit, slots }) {
     provide('activeKey', { activeKey: computed(() => props.modelValue) });
     const titles: Ref<Title[]> = ref([]);
+
     const currentIndex = ref((props.modelValue as number) || 0);
 
     const renderTitles = (vnodes: VNode[]) => {
@@ -116,14 +117,14 @@ export default create({
         }
       });
     };
-    const init = (vnodes: VNode[] = slots.default()) => {
+    const init = (vnodes: VNode[] = slots.default?.()) => {
       titles.value = [];
-      if (vnodes.length) {
+      if (vnodes && vnodes.length) {
         renderTitles(vnodes);
       }
     };
     watch(
-      () => slots.default(),
+      () => slots.default?.(),
       (vnodes: VNode[]) => {
         init(vnodes);
       }

src/packages/__VUE/video/index.vue

@@ -130,21 +130,24 @@ export default create({
       },
       showTouchMask: false
     });
-    const root = ref<HTMLElement>();
+    const root = ref(null);
     const isDisabled = computed(() => {
       return props.options.disabled;
     });
 
-    watch(props.source, (newValue) => {
-      if (newValue.src) {
-        nextTick(() => {
-          (state.videoElm as any).load();
-        });
+    watch(
+      () => props.source,
+      (newValue) => {
+        if (newValue.src) {
+          nextTick(() => {
+            (state.videoElm as any).load();
+          });
+        }
       }
-    });
+    );
 
     watch(
-      props.options,
+      () => props.options,
       (newValue) => {
         state.state.isMuted = newValue ? newValue.muted : false;
       },
@@ -154,7 +157,9 @@ export default create({
       (state.videoElm as any) = root.value;
 
       if (props.options.autoplay) {
-        (state.videoElm as any).play();
+        setTimeout(() => {
+          (state.videoElm as any).play();
+        }, 200);
       }
 
       if (props.options.touchPlay) {
@@ -209,7 +214,10 @@ export default create({
         // 播放状态
         if (state.state.playing) {
           try {
-            (state.videoElm as any).play();
+            setTimeout(() => {
+              (state.videoElm as any).play();
+            }, 200);
+
             // 监听缓存进度
             (state.videoElm as any).addEventListener('progress', () => {
               getLoadTime();