Merge branch 'master' of github.com:9th-js/wcui

src/form/input.js

@@ -13,12 +13,12 @@ import {
   outsideClick
 } from '@bd/core'
 import '../icon/index.js'
-import '../scroll/index.js'
 
 const ANIMATION = {
   duration: 100,
   custom: [{ transform: 'scaleY(0)' }, { transform: 'scaleY(1)' }]
 }
+
 class Input extends Component {
   static props = {
     readOnly: false,
@@ -43,6 +43,7 @@ class Input extends Component {
   #selectIndex = -1
   #listShowing = false
   #stamp = 0
+
   static styles = [
     css`
       :host {
@@ -135,12 +136,10 @@ class Input extends Component {
         max-height: 200px;
         padding: 4px 0;
         border-radius: 4px;
-        // background: var(--color-plain-1);
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
         transform-origin: top;
-        // transition: transform linear 00s;
-        // transform: scaleY(0);
-        wc-scroll {
+
+        .scroller {
           max-height: 200px;
         }
         .list {
@@ -173,7 +172,6 @@ class Input extends Component {
 
         .label input {
           padding: 0 10px;
-          // margin: 0 18px;
         }
 
         .label[prepend] input,
@@ -394,7 +392,7 @@ class Input extends Component {
           ? html`<wc-icon class="icon" name=${this.icon} />`
           : html`<slot class="append" name="append" />`}
         <div class=${classes} ref="suggestion" #animation=${ANIMATION}>
-          <wc-scroll ref="scroller">
+          <div ref="scroller" class="scroller">
             <ul class="list" @click=${this.handleClickItem} ref="list">
               ${this.#list.map(
                 (li, idx) =>
@@ -406,7 +404,7 @@ class Input extends Component {
                   </li>`
               )}
             </ul>
-          </wc-scroll>
+          </div>
         </div>
       </div>
     `
@@ -422,8 +420,8 @@ class Input extends Component {
     if (!this.#originList.length) {
       return
     }
-    if (!this.value) {
-      this.#list = this.#originList
+    if (!this.value.trim()) {
+      this.#list = []
     } else {
       this.#list = this.#originList.filter(li =>
         li.value.startsWith(this.value)
@@ -442,16 +440,11 @@ class Input extends Component {
       return
     }
     this.#stamp = Date.now()
+
     if (!this.#isComposing) {
       this.filterSuggestList()
-      this.$emit('fetch-suggest', {
-        value: this.value,
-        send: list => {
-          this.#originList = this.#list = list
-          this.$requestUpdate()
-        }
-      })
     }
+    this.emitFetchSuggest()
   }
   handleClickItem(e) {
     let index = e.target.getAttribute('index')
@@ -509,6 +502,15 @@ class Input extends Component {
       this.$requestUpdate()
     }
   }
+  emitFetchSuggest() {
+    this.$emit('fetch-suggest', {
+      value: this.value,
+      send: list => {
+        this.#originList = this.#list = list.slice(0, 5)
+        this.filterSuggestList()
+      }
+    })
+  }
   handleFocus() {
     if (!this.#listShowing) {
       this.#listShowing = true

src/form/textarea.js

@@ -214,6 +214,7 @@ class TextArea extends Component {
     return html`
       <div class="label">
         <textarea
+          :value=${this.value}
           ref="textarea"
           spellcheck="false"
           readonly=${this.readOnly}