Merge branch '2.x' into dev

src/action-sheet/index.js

@@ -135,8 +135,10 @@ export default createComponent({
       >
         {renderHeader()}
         {renderDescription()}
-        {renderOptions()}
-        {slots.default && <div class={bem('content')}>{slots.default()}</div>}
+        <div class={bem('content')}>
+          {renderOptions()}
+          {slots.default?.()}
+        </div>
         {renderCancel()}
       </Popup>
     );

src/action-sheet/index.less

@@ -2,9 +2,18 @@
 @import '../style/mixins/hairline';
 
 .van-action-sheet {
+  display: flex;
+  flex-direction: column;
   max-height: @action-sheet-max-height;
+  overflow: hidden;
   color: @action-sheet-item-text-color;
 
+  &__content {
+    flex: 1;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
   &__item,
   &__cancel {
     display: block;
@@ -42,6 +51,8 @@
   }
 
   &__cancel {
+    flex-shrink: 0;
+    box-sizing: border-box;
     color: @action-sheet-cancel-text-color;
   }
 
@@ -59,6 +70,7 @@
   }
 
   &__header {
+    flex-shrink: 0;
     font-weight: @font-weight-bold;
     font-size: @action-sheet-header-font-size;
     line-height: @action-sheet-header-height;
@@ -67,6 +79,7 @@
 
   &__description {
     position: relative;
+    flex-shrink: 0;
     padding: 20px @padding-md;
     color: @action-sheet-description-color;
     font-size: @action-sheet-description-font-size;

src/action-sheet/test/__snapshots__/index.legacy.js.snap

@@ -1,10 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`callback events 1`] = `
-<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--loading">
-    <div class="van-loading van-loading--circular van-action-sheet__loading-icon"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-  </button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span>
-    <div class="van-action-sheet__subname">Subname</div></button>
+<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
+  <div class="van-action-sheet__content"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--loading">
+      <div class="van-loading van-loading--circular van-action-sheet__loading-icon"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+    </button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span>
+      <div class="van-action-sheet__subname">Subname</div></button></div>
   <div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
 </div>
 `;
@@ -13,31 +14,40 @@ exports[`close-icon prop 1`] = `
 <div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
   <div class="van-action-sheet__header">Title<i class="van-icon van-icon-cross van-action-sheet__close">
       <!----></i></div>
+  <div class="van-action-sheet__content"></div>
 </div>
 `;
 
 exports[`closeable prop 1`] = `
 <div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
   <div class="van-action-sheet__header">Title</div>
+  <div class="van-action-sheet__content"></div>
 </div>
 `;
 
-exports[`color option 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>`;
+exports[`color option 1`] = `
+<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
+  <div class="van-action-sheet__content"><button type="button" class="van-action-sheet__item" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>
+</div>
+`;
 
 exports[`description prop 1`] = `
 <div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
-  <div class="van-action-sheet__description">This is a description</div><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button>
+  <div class="van-action-sheet__description">This is a description</div>
+  <div class="van-action-sheet__content"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>
 </div>
 `;
 
 exports[`description slot 1`] = `
 <div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
-  <div class="van-action-sheet__description">Custom Description</div><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button>
+  <div class="van-action-sheet__description">Custom Description</div>
+  <div class="van-action-sheet__content"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>
 </div>
 `;
 
 exports[`disable lazy-render 1`] = `
-<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button>
+<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom">
+  <div class="van-action-sheet__content"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>
   <div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
 </div>
 `;
@@ -50,4 +60,8 @@ exports[`render title and default slot 1`] = `
 </div>
 `;
 
-exports[`round prop 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>`;
+exports[`round prop 1`] = `
+<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
+  <div class="van-action-sheet__content"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>
+</div>
+`;

src/style/var.less

@@ -558,7 +558,7 @@
 // Popup
 @popup-background-color: @white;
 @popup-transition: transform @animation-duration-base;
-@popup-round-border-radius: 20px;
+@popup-round-border-radius: 16px;
 @popup-close-icon-size: 22px;
 @popup-close-icon-color: @gray-5;
 @popup-close-icon-active-color: @gray-6;

src/tab/test/__snapshots__/insert.legacy.js.snap

@@ -43,3 +43,21 @@ exports[`insert tab with child component 1`] = `
   </div>
 </div>
 `;
+
+exports[`insert tab with name dynamically 1`] = `
+<div class="van-tabs van-tabs--line">
+  <div class="van-tabs__wrap">
+    <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">1</span></div>
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">2</span></div>
+      <div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
+    </div>
+  </div>
+  <div class="van-tabs__content">
+    <div role="tabpanel" class="van-tab__pane" style="display: none;">
+      <!---->
+    </div>
+    <div role="tabpanel" class="van-tab__pane" style="">1</div>
+  </div>
+</div>
+`;

src/tab/test/insert.legacy.js

@@ -26,6 +26,27 @@ test('insert tab dynamically', async () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+test('insert tab with name dynamically', async () => {
+  const wrapper = mount({
+    template: `
+      <van-tabs v-model="active">
+        <van-tab v-if="insert" title="1" name="bar">2</van-tab>
+        <van-tab title="2" name="foo">1</van-tab>
+      </van-tabs>
+    `,
+    data() {
+      return {
+        insert: false,
+        active: [{ name: 'foo', title: 'foo' }],
+      };
+    },
+  });
+
+  await later();
+  wrapper.setData({ insert: true });
+  expect(wrapper).toMatchSnapshot();
+});
+
 // this case will throw wierd error in index.spec.js
 // so separate it
 test('insert tab with child component', async () => {

src/tabs/index.js

@@ -377,7 +377,7 @@ export default createComponent({
     watch(
       () => children.length,
       () => {
-        setCurrentIndexByName(currentName.value || props.active);
+        setCurrentIndexByName(props.active || currentName.value);
         setLine();
         nextTick(() => {
           scrollIntoView(true);