Merge pull request #42 from Tencent/fix/pagination/input-number

fix/pagination/input-number
Tencent · Dec 23, 2021 · 73a9208 · 73a9208
2 parents 3324aae + 40910d2
commit 73a9208
Show file tree

Hide file tree

Showing 7 changed files with 461 additions and 92 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/pagination/pagination.tsx b/src/pagination/pagination.tsx
@@ -9,7 +9,7 @@ import {
 import config from '../config';
 import mixins from '../utils/mixins';
 import getConfigReceiverMixins, { PaginationConfig } from '../config-provider/config-receiver';
-import TInput from '../input';
+import TInputNumber from '../input-number';
 import { Select, Option } from '../select';
 import CLASSNAMES from '../utils/classnames';
 import props from './props';
@@ -33,7 +33,7 @@ export default defineComponent({
     ChevronLeftDoubleIcon,
     ChevronRightDoubleIcon,
     EllipsisIcon,
-    TInput,
+    TInputNumber,
     TSelect: Select,
     TOption: Option,
   },
@@ -203,27 +203,15 @@ export default defineComponent({
     current(val) {
       this.jumpIndex = val;
     },
-    jumpIndex(val) {
-      if (val < 1) {
-        this.$nextTick(() => {
-          this.jumpIndex = 1;
-        });
-      }
-      if (val > this.pageCount) {
-        this.$nextTick(() => {
-          this.jumpIndex = this.pageCount;
-        });
-      }
-    },
   },
   methods: {
     toPage(pageIndex: number, isTriggerChange?: boolean): void {
       if (this.disabled) {
         return;
       }
       let current = pageIndex;
-      if (pageIndex < 1) {
-        current = 1;
+      if (pageIndex < min) {
+        current = min;
       } else if (pageIndex > this.pageCount) {
         current = this.pageCount;
       }
@@ -401,11 +389,14 @@ export default defineComponent({
           {this.showJumper ? (
             <div class={this.jumperClass}>
               {this.t(this.global.jumpTo)}
-              <t-input
+              <t-input-number
                 class={this.jumperInputClass}
                 v-model={this.jumpIndex}
                 onBlur={this.onJumperChange}
                 onEnter={this.onJumperChange}
+                max={this.pageCount}
+                min={min}
+                theme="normal"
               />
               {this.t(this.global.page)}
             </div>

diff --git a/src/tree-select/tree-select.tsx b/src/tree-select/tree-select.tsx
@@ -397,6 +397,7 @@ export default defineComponent({
     );
     const tagItem = this.tagList.map((label, index) => (
       <Tag
+        v-show={this.minCollapsedNum <= 0 || index < this.minCollapsedNum}
         key={index}
         size={this.size}
         closable={!this.disabled}

diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -10662,8 +10662,9 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/pagination.v
   <div class="t-pagination__btn t-pagination__btn-next"><svg fill="none" viewbox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="">
       <path fill="currentColor" d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z" fillopacity="0.9"></path>
     </svg></div>
-  <div class="t-pagination__jump">jump to<div class="t-input t-size-m t-pagination__input" modelvalue="1">
-      <!----><input autocomplete="false" placeholder="请输入" type="text" value="1" class="t-input__inner">
+  <div class="t-pagination__jump">jump to<div class="t-input-number t-size-m t-input-number--normal t-pagination__input" modelvalue="1">
+      <!---->
+      <div class="t-input"><input value="1" class="t-input__inner" autocomplete="off" placeholder></div>
       <!---->
     </div>
   </div>
@@ -21971,8 +21972,9 @@ exports[`ssr snapshot test renders ./examples/pagination/demos/jump.vue correctl
     <div class="t-pagination__btn t-pagination__btn-next"><svg fill="none" viewbox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="">
         <path fill="currentColor" d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z" fillopacity="0.9"></path>
       </svg></div>
-    <div class="t-pagination__jump">跳至<div class="t-input t-size-m t-pagination__input" modelvalue="1">
-        <!----><input autocomplete="false" placeholder="请输入" type="text" value="1" class="t-input__inner">
+    <div class="t-pagination__jump">跳至<div class="t-input-number t-size-m t-input-number--normal t-pagination__input" modelvalue="1">
+        <!---->
+        <div class="t-input"><input value="1" class="t-input__inner" autocomplete="off" placeholder></div>
         <!---->
       </div>页</div>
   </div>
@@ -36858,16 +36860,49 @@ exports[`ssr snapshot test renders ./examples/transfer/demos/tree.vue correctly
       <div class="t-transfer__list-body">
         <!---->
         <div class="t-transfer__list-content narrow-scrollbar">
-          <div class="t-checkbox-group">
-            <!--[-->
-            <!--[--><label class="t-checkbox t-transfer__list-item t-transfer__list-item" modelvalue="false"><input type="checkbox" class="t-checkbox__former" indeterminate="false" name value="1"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><!--[--><span>1</span>
-              <!--]--></span>
-            </label><label class="t-checkbox t-transfer__list-item t-transfer__list-item" modelvalue="false"><input type="checkbox" class="t-checkbox__former" indeterminate="false" name value="2"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><!--[--><span>2</span>
-              <!--]--></span>
-            </label>
-            <!--]-->
-            <!--]-->
+          <!--[-->
+          <div class="t-tree t-tree--hoverable t-tree--checkable t-tree--transition">
+            <div>
+              <div class="t-tree__item t-tree__item--open" data-value="1" data-level="0" style="--level: 0;">
+                <!--[--><span class="t-tree__icon t-folder-icon t-tree__icon--default" trigger="expand" ignore="active"><svg fill="none" viewbox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small" style=""><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fillopacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label t-tree__label--strictly t-tree__label t-tree__label--strictly" modelvalue="false" ignore="expand,active"><input type="checkbox" class="t-checkbox__former" indeterminate="false" name="1"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><!--[-->1<!--]--></span></label>
+                <!--]-->
+              </div>
+              <div class="t-tree__item t-tree__item--open" data-value="1.1" data-level="1" style="--level: 1;">
+                <!--[--><span class="t-tree__icon t-folder-icon" trigger="expand" ignore="active"></span><label class="t-checkbox t-tree__label t-tree__label--strictly t-tree__label t-tree__label--strictly" modelvalue="false" ignore="expand,active"><input type="checkbox" class="t-checkbox__former" indeterminate="false" name="1.1"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><!--[-->1.1<!--]--></span></label>
+                <!--]-->
+              </div>
+              <div class="t-tree__item t-tree__item--open" data-value="1.2" data-level="1" style="--level: 1;">
+                <!--[--><span class="t-tree__icon t-folder-icon t-tree__icon--default" trigger="expand" ignore="active"><svg fill="none" viewbox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small" style=""><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fillopacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label t-tree__label--strictly t-tree__label t-tree__label--strictly" modelvalue="false" ignore="expand,active"><input type="checkbox" class="t-checkbox__former" indeterminate="false" name="1.2"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><!--[-->1.2<!--]--></span></label>
+                <!--]-->
+              </div>
+              <div class="t-tree__item t-tree__item--open" data-value="1.2.1" data-level="2" style="--level: 2;">
+                <!--[--><span class="t-tree__icon t-folder-icon t-tree__icon--default" trigger="expand" ignore="active"><svg fill="none" viewbox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small" style=""><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fillopacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label t-tree__label--strictly t-tree__label t-tree__label--strictly" modelvalue="false" ignore="expand,active"><input type="checkbox" class="t-checkbox__former" indeterminate="false" name="1.2.1"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><!--[-->1.2.1<!--]--></span></label>
+                <!--]-->
+              </div>
+              <div class="t-tree__item t-tree__item--open" data-value="1.2.1.1" data-level="3" style="--level: 3;">
+                <!--[--><span class="t-tree__icon t-folder-icon" trigger="expand" ignore="active"></span><label class="t-checkbox t-tree__label t-tree__label--strictly t-tree__label t-tree__label--strictly" modelvalue="false" ignore="expand,active"><input type="checkbox" class="t-checkbox__former" indeterminate="false" name="1.2.1.1"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><!--[-->1.2.1.1<!--]--></span></label>
+                <!--]-->
+              </div>
+              <div class="t-tree__item t-tree__item--open" data-value="1.2.1.2" data-level="3" style="--level: 3;">
+                <!--[--><span class="t-tree__icon t-folder-icon" trigger="expand" ignore="active"></span><label class="t-checkbox t-tree__label t-tree__label--strictly t-tree__label t-tree__label--strictly" modelvalue="false" ignore="expand,active"><input type="checkbox" class="t-checkbox__former" indeterminate="false" name="1.2.1.2"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><!--[-->1.2.1.2<!--]--></span></label>
+                <!--]-->
+              </div>
+              <div class="t-tree__item t-tree__item--open" data-value="2" data-level="0" style="--level: 0;">
+                <!--[--><span class="t-tree__icon t-folder-icon t-tree__icon--default" trigger="expand" ignore="active"><svg fill="none" viewbox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-caret-right-small" style=""><path fill="currentColor" d="M6 5v6l4.5-3L6 5z" fillopacity="0.9"></path></svg></span><label class="t-checkbox t-tree__label t-tree__label--strictly t-tree__label t-tree__label--strictly" modelvalue="false" ignore="expand,active"><input type="checkbox" class="t-checkbox__former" indeterminate="false" name="2"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><!--[-->2<!--]--></span></label>
+                <!--]-->
+              </div>
+              <div class="t-tree__item t-tree__item--open" data-value="2.1" data-level="1" style="--level: 1;">
+                <!--[--><span class="t-tree__icon t-folder-icon" trigger="expand" ignore="active"></span><label class="t-checkbox t-tree__label t-tree__label--strictly t-tree__label t-tree__label--strictly" modelvalue="false" ignore="expand,active"><input type="checkbox" class="t-checkbox__former" indeterminate="false" name="2.1"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><!--[-->2.1<!--]--></span></label>
+                <!--]-->
+              </div>
+              <div class="t-tree__item t-tree__item--open" data-value="2.2" data-level="1" style="--level: 1;">
+                <!--[--><span class="t-tree__icon t-folder-icon" trigger="expand" ignore="active"></span><label class="t-checkbox t-tree__label t-tree__label--strictly t-tree__label t-tree__label--strictly" modelvalue="false" ignore="expand,active"><input type="checkbox" class="t-checkbox__former" indeterminate="false" name="2.2"><span class="t-checkbox__input"></span><span class="t-checkbox__label"><!--[-->2.2<!--]--></span></label>
+                <!--]-->
+              </div>
+            </div>
+            <!---->
           </div>
+          <!--]-->
         </div>
       </div>
       <!---->
@@ -38608,7 +38643,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/collapsed.vue co
       <!--[-->
       <div class="t-select t-size-m t-select-selected">
         <!----><span class="t-select__placeholder" style="display:none;">请选择</span>
-        <!--[--><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close" style=""><!----><!--[-->guangzhou<!--]--><svg fill="none" viewbox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close t-tag__icon-close" style=""><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fillopacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close" style=""><!----><!--[-->shenzhen<!--]--><svg fill="none" viewbox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close t-tag__icon-close" style=""><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fillopacity="0.9"></path></svg></span>
+        <!--[--><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close" style=""><!----><!--[-->guangzhou<!--]--><svg fill="none" viewbox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close t-tag__icon-close" style=""><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fillopacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close" style="display:none;"><!----><!--[-->shenzhen<!--]--><svg fill="none" viewbox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close t-tag__icon-close" style=""><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fillopacity="0.9"></path></svg></span>
         <!--]--><span class="t-tag t-tag--default t-size-m t-tag--dark" style=""><!----><!--[-->+1<!--]--><!----></span>
         <!---->
         <div class="t-input t-size-m t-select__input" modelvalue style="display:none;">
@@ -38676,7 +38711,7 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/collapsed.vue co
       <!--[-->
       <div class="t-select t-size-m t-select-selected">
         <!----><span class="t-select__placeholder" style="display:none;">请选择</span>
-        <!--[--><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close" style=""><!----><!--[-->guangzhou<!--]--><svg fill="none" viewbox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close t-tag__icon-close" style=""><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fillopacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close" style=""><!----><!--[-->shenzhen<!--]--><svg fill="none" viewbox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close t-tag__icon-close" style=""><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fillopacity="0.9"></path></svg></span>
+        <!--[--><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close" style=""><!----><!--[-->guangzhou<!--]--><svg fill="none" viewbox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close t-tag__icon-close" style=""><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fillopacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close" style="display:none;"><!----><!--[-->shenzhen<!--]--><svg fill="none" viewbox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close t-tag__icon-close" style=""><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fillopacity="0.9"></path></svg></span>
         <!--]-->
         <!--[--><span class="t-tag t-tag--default t-size-m t-tag--dark" style=""><!----><!--[-->更多...<!--]--><!----></span>
         <!--]-->

diff --git a/test/unit/config-provider/__snapshots__/demo.test.js.snap b/test/unit/config-provider/__snapshots__/demo.test.js.snap
@@ -9262,16 +9262,19 @@ exports[`ConfigProvider ConfigProvider paginationVue demo works fine 1`] = `
   >
     jump to
     <div
-      class="t-input t-size-m t-pagination__input"
+      class="t-input-number t-size-m t-input-number--normal t-pagination__input"
       modelvalue="1"
     >
       <!---->
-      <input
-        autocomplete="false"
-        class="t-input__inner"
-        placeholder="请输入"
-        type="text"
-      />
+      <div
+        class="t-input"
+      >
+        <input
+          autocomplete="off"
+          class="t-input__inner"
+          placeholder=""
+        />
+      </div>
       <!---->
     </div>
     

diff --git a/test/unit/pagination/__snapshots__/demo.test.js.snap b/test/unit/pagination/__snapshots__/demo.test.js.snap
@@ -639,16 +639,19 @@ exports[`Pagination Pagination jumpVue demo works fine 1`] = `
     >
       跳至
       <div
-        class="t-input t-size-m t-pagination__input"
+        class="t-input-number t-size-m t-input-number--normal t-pagination__input"
         modelvalue="1"
       >
         <!---->
-        <input
-          autocomplete="false"
-          class="t-input__inner"
-          placeholder="请输入"
-          type="text"
-        />
+        <div
+          class="t-input"
+        >
+          <input
+            autocomplete="off"
+            class="t-input__inner"
+            placeholder=""
+          />
+        </div>
         <!---->
       </div>
       页