Merge remote-tracking branch origin/next into theme

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

@@ -81,7 +81,7 @@ test('should render sure choose when use choose-tag-value', async () => {
       menuItems: [{ name: '选项一' }, { name: '选项二' }]
     }
   });
-  let item: any = wrapper.findAll('.nut-actionsheet-item');
+  let item = wrapper.findAll<HTMLElement>('.nut-actionsheet-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: any = wrapper.findAll('.nut-actionsheet-item');
+  let item = wrapper.findAll<HTMLElement>('.nut-actionsheet-item');
   expect(item[0].element.style.color).toContain('green');
 });
 

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

@@ -42,7 +42,7 @@ test('should props active disabled', async () => {
     }
   };
   const wrapper = mount(component);
-  expect(wrapper.findAll('.nut-collapse-item')).toHaveLength(3);
+  expect(wrapper.findAll('.nut-collapse-item')).toHaveLength(2);
   const collapseWrapper = wrapper.findAll('.collapse-item');
   await nextTick();
   expect(collapseWrapper[0].classes()).toContain('item-expanded');

src/packages/__VUE/notify/index.scss

@@ -29,6 +29,7 @@
   text-align: center;
   word-wrap: break-word;
   height: $notify-height;
+  line-height: $notify-line-height;
   &--base {
     background: $notify-base-background-color;
   }

src/packages/__VUE/progress/test/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render progress when use props 1`] = `
+"<div class=\\"nut-progress\\">
+  <div class=\\"nut-progress-outer nut-progress-outer-part nut-progress-base\\">
+    <div class=\\"nut-progress-inner\\" style=\\"width: 100%;\\">
+      <!--v-if-->
+    </div>
+  </div>
+  <div class=\\"nut-progress-text\\" style=\\"line-height: px;\\"><span>100%</span></div>
+</div>"
+`;

src/packages/__VUE/progress/test/index.spec.ts

@@ -0,0 +1,73 @@
+import { config, mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import NutIcon from '../../icon/index.vue';
+import Progress from '../index.vue';
+
+beforeAll(() => {
+  config.global.components = {
+    NutIcon
+  };
+});
+
+afterAll(() => {
+  config.global.components = {};
+});
+
+test('should render progress when use props', async () => {
+  const wrapper = mount(Progress, {
+    props: {
+      percentage: 100
+    }
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});
+test('should render different height and color when use color height props', async () => {
+  const wrapper = mount(Progress, {
+    props: {
+      percentage: 50,
+      strokeColor: 'blue',
+      strokeWidth: '20',
+      textColor: 'red'
+    }
+  });
+  await nextTick();
+  let inner = wrapper.find<HTMLElement>('.nut-progress-inner');
+  expect(inner.element.style.background).toEqual('blue');
+  let text = wrapper.find<HTMLElement>('.nut-progress-text');
+  let span = wrapper.find<HTMLElement>('.nut-progress-text span');
+  expect(span.element.style.color).toEqual('red');
+  expect(text.element.style.lineHeight).toEqual('20px');
+});
+
+test('should hide percentage when use showText props', () => {
+  const wrapper = mount(Progress, {
+    props: {
+      percentage: 50,
+      showText: false
+    }
+  });
+  let text = wrapper.find<HTMLElement>('.nut-progress-text');
+  expect(text.exists()).toBe(false);
+});
+
+test('should render inside percentage when use textInside props', () => {
+  const wrapper = mount(Progress, {
+    props: {
+      percentage: 50,
+      textInside: true
+    }
+  });
+  let text = wrapper.find<HTMLElement>('.nut-progress-insidetext');
+  expect(text.exists()).toBe(true);
+});
+
+test('should render custom size when use size props', () => {
+  const wrapper = mount(Progress, {
+    props: {
+      percentage: 50,
+      size: 'large'
+    }
+  });
+  let text = wrapper.find<HTMLElement>('.nut-progress-large');
+  expect(text.exists()).toBe(true);
+});

src/packages/__VUE/range/index.scss

@@ -40,12 +40,12 @@
 
   &-button {
     display: block;
-    width: 24px;
-    height: 24px;
-    background-color: $white;
+    width: $range-bar-btn-width;
+    height: $range-bar-btn-height;
+    background-color: $range-bar-btn-bg-color;
     border-radius: 50%;
     box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-    border: 1px solid $primary-color;
+    border: $range-bar-btn-border;
     outline: none;
 
     &-wrapper,

src/packages/__VUE/swiper/index.scss

@@ -21,10 +21,10 @@
     bottom: 12px;
     transform: translateX(-50%);
     i {
-      width: 8px;
-      height: 3px;
-      margin-right: 7px;
-      border-radius: 2px;
+      width: $swiper-pagination-item-width;
+      height: $swiper-pagination-item-height;
+      margin-right: $swiper-pagination-item-margin-right;
+      border-radius: $swiper-pagination-item-border-radius;
       &:last-child {
         margin-right: 0;
       }

src/packages/__VUE/switch/index.scss

@@ -3,7 +3,7 @@
   display: inline-flex;
   align-items: center;
   background-color: $primary-color;
-  border-radius: 21px;
+  border-radius: $switch-border-radius;
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center center;
@@ -37,17 +37,17 @@
     opacity: 0.6;
   }
   &.nut-switch-base {
-    width: 36px;
-    height: 21px;
-    line-height: 21px;
+    width: $switch-width;
+    height: $switch-height;
+    line-height: $switch-line-height;
     .switch-button {
-      height: 13px;
-      width: 13px;
-      transform: translateX(30%);
+      height: $switch-inside-width;
+      width: $switch-inside-height;
+      transform: $switch-inside-close-transform;
     }
     &.switch-open {
       .switch-button {
-        transform: translateX(146%);
+        transform: $switch-inside-open-transform;
       }
     }
     &.switch-close {

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

@@ -82,7 +82,7 @@ test('should render custom check and icon size when using visible', async () =>
     `
   });
   await nextTick();
-  const tabbarItem: any = wrapper.findAll('.nut-tabbar-item');
+  const tabbarItem = wrapper.findAll<HTMLElement>('.nut-tabbar-item');
   expect(tabbarItem[0].element.style.color).toEqual('rgb(0, 0, 0)');
   expect(tabbarItem[1].element.style.color).toEqual('blue');
   expect(wrapper.find<HTMLElement>('.nut-icon').element.style.fontSize).toEqual('18px');

src/packages/__VUE/toast/doc.md

@@ -270,20 +270,21 @@ toast.hide();
 
 | 字段                | 说明                                                                          | 类型          | 默认值                        |
 | ------------------- | ----------------------------------------------------------------------------- | ------------- | ----------------------------- |
-| id                  | 标识符，相同者共用一个实例<br>loading类型默认使用一个实例，其他类型默认不共用 | String/Number | -                             |
+| id                  | 标识符，相同者共用一个实例<br>loading类型默认使用一个实例，其他类型默认不共用 | String/Number | -                       |
 | duration            | 展示时长（毫秒）<br>值为 0 时，toast 不会自动消失      | Number        | 2000                          |
-| title            | 标题     | String        | ''                          |
+| title            | 标题     | String        |           -             |
 | center              | 是否展示在页面中部（为false时展示在底部）                                     | Boolean       | true                          |
-| bottom              | 距页面底部的距离（像素或者百分比），option.center为false时生效                          | String       | "30px"                     |
+| bottom              | 距页面底部的距离（像素或者百分比），option.center为false时生效                          | String       | 30px                    |
 | textAlignCenter     | 多行文案是否居中                                                              | Boolean       | true                          |
-| bgColor             | 背景颜色（透明度）                                                            | String        | "rgba(0, 0, 0, 0.8)"       |
-| customClass         | 自定义类名                                                                    | String        | ""                            |
-| icon                | 自定义图标，**支持图片链接或base64格式**                                        | String        | ""                            |
-| size                | 文案尺寸，**small**/**base**/**large**三选一                                                  | String        | "base"                        |
+| bgColor             | 背景颜色（透明度）                                                            | String        | rgba(0, 0, 0, 0.8)      |
+| customClass         | 自定义类名                                                                    | String        |          -                   |
+| icon                | 自定义图标，**支持图片链接或base64格式**                                        | String        |         -                   |
+| iconSize                | 自定义图标尺寸                                      | String        | 20                           |
+| size                | 文案尺寸，**small**/**base**/**large**三选一                                                  | String        | base                      |
 | cover               | 是否显示遮罩层                                          | Boolean       | false |
-| cover-color          | 遮罩层颜色，默认透明                                                          | String        | "rgba(0,0,0,0)"               |
+| cover-color          | 遮罩层颜色，默认透明                                                          | String        | rgba(0,0,0,0)             |
 | loadingRotate       | loading图标是否旋转，仅对loading类型生效                                      | Boolean       | true                          |
-| on-close             | 关闭时触发的事件                                                              | function      | null                          |
+| close             | 关闭时触发的事件                                                              | function      | null                          |
 | close-on-click-overlay | 是否在点击遮罩层后关闭提示                                                    | Boolean       | false                         |
-| custom-class          | 提示框class                                                        | String       | ""                         |
+| custom-class          | 提示框class                                                        | String       |               -          |
 

src/packages/__VUE/toast/index.scss

@@ -32,27 +32,28 @@
     justify-content: center;
     pointer-events: auto;
     height: 100%;
+    background: $toast-cover-bg-color;
   }
   &-inner {
     display: inline-block;
-    font-size: $font-size-base;
+    font-size: $toast-text-font-size;
     min-width: 40%;
     max-width: 65%;
     text-align: center;
-    padding: 24px 30px;
+    padding: $toast-inner-padding;
     word-break: break-all;
-    background: rgba(0, 0, 0, 0);
-    border-radius: 12px;
-    color: $white;
+    background: $toast-inner-bg-color;
+    border-radius: $toast-inner-border-radius;
+    color: $toast-font-color;
   }
   &-text {
-    font-size: 14px;
+    font-size: $toast-text-font-size;
     &:empty {
       margin-bottom: -8px;
     }
   }
   &-title {
-    font-size: 16px;
+    font-size: $toast-title-font-size;
     &:empty {
       margin-bottom: -8px;
     }

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

@@ -76,7 +76,7 @@ export default create({
     },
     bgColor: {
       type: String,
-      default: 'rgba(0, 0, 0, .8)'
+      default: ''
     },
 
     onClose: Function,
@@ -87,7 +87,7 @@ export default create({
     },
     coverColor: {
       type: String,
-      default: 'rgba(0, 0, 0, 0)'
+      default: ''
     },
     title: {
       type: String,

src/packages/__VUE/toast/index.ts

@@ -7,17 +7,18 @@ const defaultOptions = {
   center: true, // 未实现
   type: 'text',
   title: '',
-  customClass: '', // 未实现
-  bottom: '30px', // 未实现
-  size: 'base', // 未实现
-  icon: null, // 未实现
+  customClass: '',
+  bottom: '30px',
+  size: 'base',
+  iconSize: '20',
+  icon: null,
   textAlignCenter: true, // 未实现
   loadingRotate: true, // 未实现
-  bgColor: 'rgba(0, 0, 0, .8)',
+  bgColor: '',
   onClose: null, // 未实现
   unmount: null,
   cover: false, //透明遮罩层 // 未实现
-  coverColor: 'rgba(0, 0, 0, 0)', // 未实现
+  coverColor: '', // 未实现
   closeOnClickOverlay: false // 未实现
 };
 

src/packages/__VUE/toast/index.vue

@@ -17,7 +17,7 @@
         }"
       >
         <view v-if="hasIcon" class="nut-toast-icon-wrapper">
-          <nut-icon size="20" color="#ffffff" :name="icon"></nut-icon>
+          <nut-icon :size="iconSize" color="#ffffff" :name="icon"></nut-icon>
         </view>
         <div v-if="title" class="nut-toast-title">
           {{ title }}
@@ -27,7 +27,7 @@
     </view>
   </Transition>
 </template>
-<script>
+<script lang="ts">
 import { toRefs, toRef, reactive, computed, watch, onMounted } from 'vue';
 import { createComponent } from '../../utils/create';
 const { create } = createComponent('toast');
@@ -57,6 +57,10 @@ export default create({
       type: [String, Number],
       default: 'base'
     },
+    iconSize: {
+      type: String,
+      default: '20'
+    },
     icon: String,
     textAlignCenter: {
       type: Boolean,
@@ -68,7 +72,7 @@ export default create({
     },
     bgColor: {
       type: String,
-      default: 'rgba(0, 0, 0, .8)'
+      default: ''
     },
     onClose: Function,
     unmount: Function,
@@ -78,7 +82,7 @@ export default create({
     },
     coverColor: {
       type: String,
-      default: 'rgba(0, 0, 0, 0)'
+      default: ''
     },
     title: {
       type: String,
@@ -89,8 +93,9 @@ export default create({
       default: false
     }
   },
-  setup(props) {
-    let timer;
+  emits: ['close'],
+  setup(props: any, { emit }) {
+    let timer: number | null | undefined;
     const state = reactive({
       mounted: false
     });
@@ -117,6 +122,7 @@ export default create({
     const clickCover = () => {
       if (props.closeOnClickOverlay) {
         hide();
+        emit('close');
       }
     };
 

src/packages/__VUE/toast/test/function.spec.ts

@@ -0,0 +1,37 @@
+import { ToastFunction } from './toast';
+
+function sleep(delay = 0): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, delay);
+  });
+}
+
+describe('function toast', () => {
+  test('show loading toast', async () => {
+    ToastFunction.loading('加载中');
+    expect(document.querySelector('.nut-toast.nut-toast-loading')).toBeTruthy();
+    let text = document.querySelector('.nut-toast .nut-toast-text') as HTMLDivElement;
+    expect(text.innerHTML).toEqual('加载中');
+    await sleep(3000);
+    let loading = document.querySelector('.nut-toast.nut-toast-loading');
+    expect(loading).toBeNull();
+  });
+
+  test('show text toast', async () => {
+    ToastFunction.text('文案', {
+      duration: 2000,
+      title: '标题文字'
+    });
+    await sleep();
+    let textToast = document.querySelector('.nut-toast.nut-toast-center') as HTMLElement;
+    expect(textToast.innerHTML).toContain('标题文字');
+    await sleep(3000);
+    expect(textToast.style.display).toEqual('none');
+  });
+  test('show fail toast', async () => {
+    ToastFunction.fail('文案');
+    await sleep();
+    let failToast = document.querySelector('.nut-icon-failure') as HTMLElement;
+    expect(failToast.style.fontSize).toEqual('20px');
+  });
+});

src/packages/__VUE/toast/test/index.spec.ts

@@ -0,0 +1,85 @@
+import { config, mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import Toast from '../index.vue';
+
+function sleep(delay = 0): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, delay);
+  });
+}
+
+describe('component toast', () => {
+  test('should render toast after using msg and id', async () => {
+    const wrapper = mount(Toast, {
+      props: {
+        id: '12313',
+        msg: 'taost'
+      }
+    });
+    await sleep(1000);
+    let toast = wrapper.find('.nut-toast');
+    expect(toast.exists()).toBe(true);
+  });
+
+  test('should be displayed long enough when use duration ', async () => {
+    const wrapper = mount(Toast, {
+      props: {
+        msg: 'taost',
+        duration: 3000
+      }
+    });
+    await sleep(100);
+    let toast: any = wrapper.find('.nut-toast');
+    expect(toast.exists()).toBe(true);
+    await sleep(3100);
+    expect(toast.element.style.display).toEqual('none');
+  });
+
+  test('should change cover style after using cover-color prop', async () => {
+    const wrapper = mount(Toast, {
+      props: {
+        cover: true,
+        coverColor: 'black'
+      }
+    });
+    await sleep();
+    let toastCover: any = wrapper.find('.nut-toast-cover');
+    expect(toastCover.element.style.backgroundColor).toEqual('black');
+  });
+  test('should close Toast when using closeOnClickOverlay prop and clicked', async () => {
+    const wrapper = mount(Toast, {
+      props: {
+        cover: true,
+        coverColor: 'black',
+        closeOnClickOverlay: true
+      }
+    });
+    await sleep();
+    let toast: any = wrapper.find('.nut-toast');
+    toast.trigger('click');
+    await nextTick();
+    expect(toast.element.style.display).toEqual('none');
+  });
+  test('should render customClass when using customClass prop ', async () => {
+    const wrapper = mount(Toast, {
+      props: {
+        customClass: 'custom'
+      }
+    });
+    await sleep();
+    let toast: any = wrapper.find('.custom');
+    expect(toast.exists()).toBe(true);
+  });
+  test('should change icon size when using icon-size prop', async () => {
+    const wrapper = mount(Toast, {
+      props: {
+        icon: 'success',
+        iconSize: '30'
+      }
+    });
+
+    await sleep();
+    let icon: any = wrapper.find('.nut-icon');
+    expect(icon.element.style.fontSize).toEqual('30px');
+  });
+});

src/packages/__VUE/toast/test/toast.ts

@@ -0,0 +1,128 @@
+import { createVNode, render } from 'vue';
+import Toast from '../index.vue';
+const defaultOptions = {
+  msg: '',
+  id: '',
+  duration: 2000, //显示时间(毫秒)
+  center: true, // 未实现
+  type: 'text',
+  title: '',
+  customClass: '', // 未实现
+  bottom: '30px', // 未实现
+  size: 'base', // 未实现
+  iconSize: '20',
+  icon: null, // 未实现
+  textAlignCenter: true, // 未实现
+  loadingRotate: true, // 未实现
+  bgColor: 'rgba(0, 0, 0, .8)',
+  onClose: null, // 未实现
+  unmount: null,
+  cover: false, //透明遮罩层 // 未实现
+  coverColor: 'rgba(0, 0, 0, 0)', // 未实现
+  closeOnClickOverlay: false // 未实现
+};
+
+let idsMap: string[] = [];
+let optsMap: any[] = [];
+const clearToast = (id?: string) => {
+  if (id) {
+    const container = document.getElementById(id);
+    optsMap = optsMap.filter((item) => item.id !== id);
+    idsMap = idsMap.filter((item) => item !== id);
+    if (container) {
+      document.body.removeChild(container);
+    }
+  } else {
+    idsMap.forEach((item) => {
+      const container = document.getElementById(item);
+      if (container) {
+        document.body.removeChild(container);
+      }
+    });
+    optsMap = [];
+    idsMap = [];
+  }
+};
+
+const updateToast = (opts: any) => {
+  const container = document.getElementById(opts.id);
+  if (container) {
+    const currentOpt = optsMap.find((item) => item.id === opts.id);
+    if (currentOpt) {
+      opts = { ...defaultOptions, ...currentOpt, ...opts };
+    } else {
+      opts = { ...defaultOptions, ...opts };
+    }
+    const instance: any = createVNode(Toast, opts);
+    render(instance, container);
+    return instance.component.ctx;
+  }
+};
+
+const mountToast = (opts: any) => {
+  opts.unmount = clearToast;
+  let _id;
+  // 如果是更新已有的toast
+  if (opts.id) {
+    _id = opts.id;
+    if (idsMap.find((item) => item === opts.id)) {
+      return updateToast(opts);
+    }
+  } else {
+    _id = new Date().getTime() + '';
+  }
+  opts = { ...defaultOptions, ...opts };
+  opts.id = _id;
+  idsMap.push(opts.id);
+  optsMap.push(opts);
+  const container = document.createElement('div');
+  container.id = opts.id;
+  const instance: any = createVNode(Toast, opts);
+  render(instance, container);
+  document.body.appendChild(container);
+  return instance.component.ctx;
+};
+
+const errorMsg = (msg: string) => {
+  if (!msg) {
+    console.warn('[NutUI Toast]: msg不能为空');
+    return;
+  }
+};
+
+export const ToastFunction = {
+  text(msg: string, opts = {}) {
+    errorMsg(msg);
+    return mountToast({ ...opts, type: 'text', msg });
+  },
+  success(msg: string, opts = {}) {
+    errorMsg(msg);
+    return mountToast({ icon: 'success', ...opts, msg, type: 'success' });
+  },
+  fail(msg: string, opts = {}) {
+    errorMsg(msg);
+    return mountToast({ icon: 'failure', ...opts, msg, type: 'fail' });
+  },
+  warn(msg: string, opts = {}) {
+    errorMsg(msg);
+    return mountToast({ icon: 'tips', ...opts, msg, type: 'warn' });
+  },
+  loading(msg: string, opts = {}) {
+    return mountToast({
+      icon: 'loading',
+      ...opts,
+      msg,
+      type: 'loading'
+    });
+  },
+  hide(id?: string) {
+    clearToast(id);
+  },
+  install(app: any): void {
+    app.use(Toast);
+    app.config.globalProperties.$toast = ToastFunction;
+  }
+};
+
+export { Toast };
+export default ToastFunction;

src/packages/styles/variables.scss

@@ -194,6 +194,23 @@ $avatar-normal-height: 40px !default;
 //switch
 $switch-close-bg-color: #ebebeb !default;
 $switch-close--cline-bg-color: #f0f0f0 !default;
+$switch-width: 36px !default;
+$switch-height: 21px !default;
+$switch-line-height: 21px !default;
+$switch-border-radius: 21px !default;
+$switch-inside-width: 13px !default;
+$switch-inside-height: 13px !default;
+$switch-inside-open-transform: translateX(146%) !default;
+$switch-inside-close-transform: translateX(30%) !default;
+
+// toast
+$toast-title-font-size: 16px !default;
+$toast-text-font-size: 14px !default;
+$toast-font-color: $white !default;
+$toast-inner-padding: 24px 30px !default;
+$toast-inner-bg-color: rgba(0, 0, 0, 0.8) !default;
+$toast-inner-border-radius: 12px !default;
+$toast-cover-bg-color: rgba(0, 0, 0, 0) !default;
 
 //backtop
 $backtop-border-color: #e0e0e0 !default;
@@ -220,13 +237,8 @@ $notify-text-color: $white !default;
 $notify-padding: 12px 0 !default;
 $notify-font-size: 14px !default;
 $notify-height: 44px !default;
-$notify-base-background-color: linear-gradient(
-  135deg,
-  rgba(250, 44, 25, 1) 0%,
-  rgba(250, 63, 25, 1) 45%,
-  rgba(250, 89, 25, 1) 83%,
-  rgba(250, 100, 25, 1) 100%
-) !default;
+$notify-line-height: auto !default;
+$notify-base-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
 $notify-primary-background-color: linear-gradient(
   315deg,
   rgba(73, 143, 242, 1) 0%,
@@ -257,6 +269,16 @@ $infiniteloading-bottom-color: #c8c8c8 !default;
 $range-tip-font-color: #333333 !default;
 $range-bg-color: rgba($primary-color, 0.5) !default;
 $range-bar-bg-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
+$range-bar-btn-bg-color: $white !default;
+$range-bar-btn-width: 24px !default;
+$range-bar-btn-height: 24px !default;
+$range-bar-btn-border: 1px solid $primary-color !default;
+
+//swiper
+$swiper-pagination-item-width: 8px !default;
+$swiper-pagination-item-height: 3px !default;
+$swiper-pagination-item-margin-right: 7px !default;
+$swiper-pagination-item-border-radius: 2px !default;
 
 //address
 $address-region-tab-line: linear-gradient(90deg, $primary-color 0%, rgba($primary-color, 0.15) 100%) !default;