fix(ui/input): delete extra space & add lost param in handleInput (#37)

* test(ui/popup): add test cases & snaps * test(ui/popup): fix snaps * test(ui/back-top): add test cases & snaps * test(ui/picker): add test cases & snaps * test(ui/time-picker): update snap * test(ui/time-picker): update snap * test(ui/style-provider): update snap * test(ui/rate): update snap * test(ui/checkbox): update snap * test(ui/date-picker): add test case and snaps * fix tabs parameter error (#35) * test(ui/loading): add test case and snapshots * test(ui/collapse): add test case and snapshots * test(ui/collapse): add test case and snapshots * feat: handle pnpm-lock * chore: handle pnpm-lock * test(ui/index-bar): add test case and snapshots * fix: undo merge Code changes * test: Merge branch 'dev' from upstream * test(ui/lazy): add test case and snapshots * fix: remove test code * test(ui/action-sheet): add test case and snapshots * test(ui/date-picker): add test case and snaps * test(ui/date-picker): fix .at error * test(ui/date-picker): fix .at error * fix(ui/index-bar): change scrollable target to fix cant scroll in Android web * docs(ui/collapse): fix typo * docs(ui/collapse): fix typo * feat(ui/date-picker): suport touchable * test(ui/date-picker): update snap * fix(ui/counter): fix the bug that the long-press event of the counter component does not take effect * test(ui/counter): add test case and snapshots (#36) * test(ui/loading): add test case and snapshots * test(ui/collapse): add test case and snapshots * test(ui/collapse): add test case and snapshots * feat: handle pnpm-lock * chore: handle pnpm-lock * test(ui/index-bar): add test case and snapshots * fix: undo merge Code changes * test: Merge branch 'dev' from upstream * test(ui/lazy): add test case and snapshots * fix: remove test code * test(ui/action-sheet): add test case and snapshots * test(ui/date-picker): add test case and snaps * test(ui/date-picker): fix .at error * test(ui/date-picker): fix .at error * test(ui/counter): add test case * fix(ui/input): delete extra space & add lost param in handleInput Co-authored-by: ayang <[email protected]> Co-authored-by: running snail <[email protected]>
varletjs · Mar 18, 2022 · 9a0239d · 9a0239d
1 parent e966fec
commit 9a0239d
Show file tree

Hide file tree

Showing 3 changed files with 377 additions and 203 deletions.
diff --git a/packages/varlet-vue2-ui/src/input/Input.vue b/packages/varlet-vue2-ui/src/input/Input.vue
@@ -158,7 +158,7 @@ export default defineComponent({
 
       if (this.isEmpty(value)) return `0 / ${maxlength}`
 
-      return `${String(value).length} / ${maxlength}`
+      return `${String(value).length}/${maxlength}`
     },
 
     formReadonly() {
@@ -229,7 +229,7 @@ export default defineComponent({
     handleInput(e) {
       const { value } = e.target
 
-      this.getListeners().onInput?.(value)
+      this.getListeners().onInput?.(value, e)
       this.validateWithTrigger('onInput')
     },
 

diff --git a/packages/varlet-vue2-ui/src/input/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/input/__tests__/__snapshots__/index.spec.js.snap
@@ -1,5 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`test input clear 1`] = `
+"<div class=\\"var-input var--box\\">
+  <div class=\\"var-input__controller\\">
+    <div class=\\"var-input__icon\\"></div>
+    <div class=\\"var-input__wrap\\">
+      <!----> <input autocomplete=\\"new-password\\" id=\\"var-input-58\\" type=\\"text\\" class=\\"var-input__input\\"> <label for=\\"var-input-58\\" class=\\"var--ellipsis var-input__placeholder var-input--placeholder-hint\\">
+
+      </label></div>
+    <div class=\\"var-input__icon\\"><i class=\\"var-icon var-input__clear-icon var-icon--set var-icon-close-circle\\" style=\\"transition: transform 0ms; font-size: 14px;\\" var-input-cover=\\"\\"></i></div>
+  </div>
+  <div class=\\"var-input__line\\">
+    <div class=\\"var-input__dot\\"></div>
+  </div>
+  <transition-stub name=\\"var-form-details\\">
+    <!---->
+  </transition-stub>
+</div>"
+`;
+
 exports[`test input example 1`] = `
 "<div class=\\"var-input-example\\">
   <div class=\\"app-type pb\\">基本使用</div>
@@ -173,3 +192,156 @@ exports[`test input example 1`] = `
   <div style=\\"height: 40px;\\"></div>
 </div>"
 `;
+
+exports[`test input focus & blur 1`] = `
+"<div class=\\"var-input var--box\\">
+  <div class=\\"var-input__controller\\">
+    <div class=\\"var-input__icon\\"></div>
+    <div class=\\"var-input__wrap\\">
+      <!----> <input autocomplete=\\"new-password\\" id=\\"var-input-42\\" type=\\"text\\" class=\\"var-input__input\\"> <label for=\\"var-input-42\\" class=\\"var--ellipsis var-input__placeholder\\">
+
+      </label></div>
+    <div class=\\"var-input__icon\\">
+      <!---->
+    </div>
+  </div>
+  <div class=\\"var-input__line\\">
+    <div class=\\"var-input__dot\\"></div>
+  </div>
+  <transition-stub name=\\"var-form-details\\">
+    <!---->
+  </transition-stub>
+</div>"
+`;
+
+exports[`test input focus & blur 2`] = `
+"<div class=\\"var-input var--box\\">
+  <div class=\\"var-input__controller\\">
+    <div class=\\"var-input__icon\\"></div>
+    <div class=\\"var-input__wrap\\">
+      <!----> <input autocomplete=\\"new-password\\" id=\\"var-input-42\\" type=\\"text\\" class=\\"var-input__input\\"> <label for=\\"var-input-42\\" class=\\"var--ellipsis var-input__placeholder\\">
+
+      </label></div>
+    <div class=\\"var-input__icon\\">
+      <!---->
+    </div>
+  </div>
+  <div class=\\"var-input__line\\">
+    <div class=\\"var-input__dot\\"></div>
+  </div>
+  <transition-stub name=\\"var-form-details\\">
+    <!---->
+  </transition-stub>
+</div>"
+`;
+
+exports[`test input hint to be false 1`] = `
+"<div class=\\"var-input var--box\\">
+  <div class=\\"var-input__controller\\">
+    <div class=\\"var-input__icon var-input--non-hint\\"></div>
+    <div class=\\"var-input__wrap var-input--non-hint\\">
+      <!----> <input autocomplete=\\"new-password\\" id=\\"var-input-54\\" type=\\"text\\" class=\\"var-input__input\\"> <label for=\\"var-input-54\\" class=\\"var--ellipsis var-input__placeholder var-input--placeholder-hidden var-input--placeholder-non-hint\\">
+
+      </label></div>
+    <div class=\\"var-input__icon var-input--non-hint\\">
+      <!---->
+    </div>
+  </div>
+  <div class=\\"var-input__line\\">
+    <div class=\\"var-input__dot\\"></div>
+  </div>
+  <transition-stub name=\\"var-form-details\\">
+    <!---->
+  </transition-stub>
+</div>"
+`;
+
+exports[`test input maxlength 1`] = `
+"<div class=\\"var-input var--box\\">
+  <div class=\\"var-input__controller\\">
+    <div class=\\"var-input__icon\\"></div>
+    <div class=\\"var-input__wrap\\">
+      <!----> <input autocomplete=\\"new-password\\" id=\\"var-input-50\\" type=\\"text\\" maxlength=\\"100\\" class=\\"var-input__input\\"> <label for=\\"var-input-50\\" class=\\"var--ellipsis var-input__placeholder var-input--placeholder-hint\\">
+
+      </label></div>
+    <div class=\\"var-input__icon\\">
+      <!---->
+    </div>
+  </div>
+  <div class=\\"var-input__line\\">
+    <div class=\\"var-input__dot\\"></div>
+  </div>
+  <transition-stub name=\\"var-form-details\\">
+    <div class=\\"var-form-details\\">
+      <div class=\\"var-form-details__message\\"></div>
+      <div class=\\"var-form-details__length\\">4/100</div>
+    </div>
+  </transition-stub>
+</div>"
+`;
+
+exports[`test input validation 1`] = `
+"<div class=\\"var-input var--box\\">
+  <div class=\\"var-input__controller var-input--error\\">
+    <div class=\\"var-input__icon\\"></div>
+    <div class=\\"var-input__wrap\\">
+      <!----> <input autocomplete=\\"new-password\\" id=\\"var-input-73\\" type=\\"text\\" class=\\"var-input__input var-input--caret-error\\"> <label for=\\"var-input-73\\" class=\\"var--ellipsis var-input--error var-input__placeholder var-input--placeholder-hint\\">
+
+      </label></div>
+    <div class=\\"var-input__icon\\">
+      <!---->
+    </div>
+  </div>
+  <div class=\\"var-input__line var-input--line-error\\">
+    <div class=\\"var-input__dot var-input--line-error\\"></div>
+  </div>
+  <transition-stub name=\\"var-form-details\\">
+    <div class=\\"var-form-details\\">
+      <div class=\\"var-form-details__message\\">长度必须大于3</div>
+      <div class=\\"var-form-details__length\\"></div>
+    </div>
+  </transition-stub>
+</div>"
+`;
+
+exports[`test input validation 2`] = `
+"<div class=\\"var-input var--box\\">
+  <div class=\\"var-input__controller\\">
+    <div class=\\"var-input__icon\\"></div>
+    <div class=\\"var-input__wrap\\">
+      <!----> <input autocomplete=\\"new-password\\" id=\\"var-input-73\\" type=\\"text\\" class=\\"var-input__input\\"> <label for=\\"var-input-73\\" class=\\"var--ellipsis var-input__placeholder\\">
+
+      </label></div>
+    <div class=\\"var-input__icon\\">
+      <!---->
+    </div>
+  </div>
+  <div class=\\"var-input__line\\">
+    <div class=\\"var-input__dot\\"></div>
+  </div>
+  <transition-stub name=\\"var-form-details\\">
+    <!---->
+  </transition-stub>
+</div>"
+`;
+
+exports[`test input validation 3`] = `
+"<div class=\\"var-input var--box\\">
+  <div class=\\"var-input__controller\\">
+    <div class=\\"var-input__icon\\"></div>
+    <div class=\\"var-input__wrap\\">
+      <!----> <input autocomplete=\\"new-password\\" id=\\"var-input-73\\" type=\\"text\\" class=\\"var-input__input\\"> <label for=\\"var-input-73\\" class=\\"var--ellipsis var-input__placeholder var-input--placeholder-hint\\">
+
+      </label></div>
+    <div class=\\"var-input__icon\\">
+      <!---->
+    </div>
+  </div>
+  <div class=\\"var-input__line\\">
+    <div class=\\"var-input__dot\\"></div>
+  </div>
+  <transition-stub name=\\"var-form-details\\">
+    <!---->
+  </transition-stub>
+</div>"
+`;