Merge branch 'dev' into next

2022-01-25 14:42:56 +08:00
parent 5a15660c77 969f0a7b41
commit 437dcc6c41
34 changed files with 105 additions and 78 deletions
@@ -20,11 +20,11 @@ export default {
  setup() {
    const root = ref();

-    onMounted(()=>{
+    onMounted(() => {
      const rect = useRect(root);
      console.log(rect); // -> 元素的大小及其相对于视口的位置
-    })
-    
+    });
+
    return { root };
  },
 };
@@ -33,7 +33,6 @@
    align-items: center;
    justify-content: center;
    min-width: 0; // hack for flex ellipsis
-    cursor: pointer;

    &--disabled {
      .van-dropdown-menu__title {
@@ -2,6 +2,7 @@

 .van-icon {
  &__image {
+    display: block;
    width: 1em;
    height: 1em;
    object-fit: contain;
@@ -86,7 +86,6 @@
    z-index: var(--van-image-preview-close-icon-z-index);
    color: var(--van-image-preview-close-icon-color);
    font-size: var(--van-image-preview-close-icon-size);
-    cursor: pointer;

    &--top-left {
      top: var(--van-image-preview-close-icon-margin);
@@ -62,7 +62,6 @@
    align-items: center;
    padding: 0 var(--van-padding-md);
    font-size: var(--van-font-size-md);
-    cursor: pointer;
  }

  &__left {
@@ -72,7 +72,6 @@
    font-size: var(--van-number-keyboard-close-font-size);
    background-color: transparent;
    border: none;
-    cursor: pointer;
  }

  &__sidebar {
@@ -40,7 +40,6 @@
    font-size: var(--van-picker-action-font-size);
    background-color: transparent;
    border: none;
-    cursor: pointer;
  }

  &__confirm {
@@ -114,7 +114,6 @@
      z-index: var(--van-popup-close-icon-z-index);
      color: var(--van-popup-close-icon-color);
      font-size: var(--van-popup-close-icon-size);
-      cursor: pointer;

      &--top-left {
        top: var(--van-popup-close-icon-margin);
@@ -61,7 +61,6 @@
    display: flex;
    flex-direction: column;
    align-items: center;
-    cursor: pointer;
    user-select: none;
  }

@@ -30,7 +30,6 @@
    vertical-align: middle;
    background: var(--van-stepper-background);
    border: 0;
-    cursor: pointer;

    &::before {
      width: 50%;
@@ -30,8 +30,12 @@
  padding-bottom: env(safe-area-inset-bottom);
 }

-.van-haptics-feedback:active {
-  opacity: var(--van-active-opacity);
+.van-haptics-feedback {
+  cursor: pointer;
+
+  &:active {
+    opacity: var(--van-active-opacity);
+  }
 }

 [class*='van-hairline'] {
@@ -15,7 +15,7 @@ exports[`should render Tab inside a component correctly 1`] = `
           aria-controls="van-tab"
      >
        <span class="van-tab__text van-tab__text--ellipsis">
-          2
+          1
        </span>
      </div>
      <div id="van-tabs-1"
@@ -26,7 +26,7 @@ exports[`should render Tab inside a component correctly 1`] = `
           aria-controls="van-tab"
      >
        <span class="van-tab__text van-tab__text--ellipsis">
-          1
+          2
        </span>
      </div>
      <div id="van-tabs-2"
@@ -47,15 +47,6 @@ exports[`should render Tab inside a component correctly 1`] = `
    </div>
  </div>
  <div class="van-tabs__content">
-    <div id="van-tab"
-         role="tabpanel"
-         class="van-tab__panel"
-         tabindex="0"
-         aria-labelledby="van-tabs-1"
-         style
-    >
-      1
-    </div>
    <div id="van-tab"
         role="tabpanel"
         class="van-tab__panel"
@@ -64,6 +55,15 @@ exports[`should render Tab inside a component correctly 1`] = `
         style="display: none;"
    >
    </div>
+    <div id="van-tab"
+         role="tabpanel"
+         class="van-tab__panel"
+         tabindex="0"
+         aria-labelledby="van-tabs-1"
+         style
+    >
+      2
+    </div>
    <div id="van-tab"
         role="tabpanel"
         class="van-tab__panel"
@@ -5,7 +5,12 @@ import {
  type CSSProperties,
  type ExtractPropTypes,
 } from 'vue';
-import { truthProp, makeStringProp, createNamespace } from '../utils';
+import {
+  truthProp,
+  makeStringProp,
+  createNamespace,
+  HAPTICS_FEEDBACK,
+} from '../utils';
 import { Icon } from '../icon';

 const [name, bem] = createNamespace('tag');
@@ -66,7 +71,11 @@ export default defineComponent({
      }

      const CloseIcon = closeable && (
-        <Icon name="cross" class={bem('close')} onClick={onClose} />
+        <Icon
+          name="cross"
+          class={[bem('close'), HAPTICS_FEEDBACK]}
+          onClick={onClose}
+        />
      );

      return (
@@ -111,6 +111,5 @@

  &__close {
    margin-left: 2px;
-    cursor: pointer;
  }
 }
@@ -112,7 +112,7 @@ exports[`should render demo and match snapshot 1`] = `
      <transition-stub>
        <span class="van-tag van-tag--medium van-tag--primary">
          Tag
-          <i class="van-badge__wrapper van-icon van-icon-cross van-tag__close">
+          <i class="van-badge__wrapper van-icon van-icon-cross van-tag__close van-haptics-feedback">
          </i>
        </span>
      </transition-stub>
@@ -112,9 +112,10 @@ export default defineComponent({

    const onSidebarChange = (index: number) => {
      emit('update:mainActiveIndex', index);
-      emit('click-nav', index);
    };

+    const onClickSidebarItem = (index: number) => emit('click-nav', index);
+
    const renderSidebar = () => {
      const Items = props.items.map((item) => (
        <SidebarItem
@@ -123,6 +124,7 @@ export default defineComponent({
          badge={item.badge}
          class={[bem('nav-item'), item.className]}
          disabled={item.disabled}
+          onClick={onClickSidebarItem}
        />
      ));

@@ -26,7 +26,23 @@ test('should render empty TreeSelect correctly', () => {
  expect(mount(TreeSelect).html()).toMatchSnapshot();
 });

-test('should emit click-nav event when nav item is clicked', () => {
+test('should emit update:mainActiveIndex event when mainActiveIndex is changed', async () => {
+  const wrapper = mount(TreeSelect, {
+    props: {
+      items: mockItems,
+      mainActiveIndex: 0,
+    },
+  });
+
+  const navItems = wrapper.findAll('.van-tree-select__nav-item');
+  await navItems[0].trigger('click');
+  expect(wrapper.emitted('update:mainActiveIndex')).toBeFalsy();
+
+  await navItems[1].trigger('click');
+  expect(wrapper.emitted('update:mainActiveIndex')?.[0]).toEqual([1]);
+});
+
+test('should emit click-nav event when nav item is clicked', async () => {
  const wrapper = mount(TreeSelect, {
    props: {
      items: mockItems,
@@ -34,9 +50,10 @@ test('should emit click-nav event when nav item is clicked', () => {
  });

  const navItems = wrapper.findAll('.van-tree-select__nav-item');
-  navItems[1].trigger('click');
-  expect(wrapper.emitted('update:mainActiveIndex')?.[0]).toEqual([1]);
-  expect(wrapper.emitted('click-nav')?.[0]).toEqual([1]);
+  await navItems[0].trigger('click');
+  expect(wrapper.emitted('click-nav')?.[0]).toEqual([0]);
+  await navItems[0].trigger('click');
+  expect(wrapper.emitted('click-nav')?.[1]).toEqual([0]);
 });

 test('should emit click-item event when item is clicked', () => {