selectList 80%

src/components/quickcommandUI/SelectList.vue

@@ -4,43 +4,54 @@
     maximized
     ref="dialog"
     transition-show="fade"
+    transition-hide="fade"
     @hide="onDialogHide"
   >
-    <q-scroll-area
-      ref="scrollbar"
-      :thumb-style="{
-        width: '7px',
-      }"
-    >
-      <q-card>
-        <q-virtual-scroll
-          virtual-scroll-slice-size="50"
-          virtual-scroll-item-size="50"
-          @virtual-scroll="scrollEvent"
-          :items="items"
-        >
-          <template v-slot="{ item, index }">
-            <q-item
-              :key="index"
-              ref="qitems"
-              clickable
-              v-ripple
-              @mousemove="currentIndex = index"
-              manual-focus
-              :focused="index === currentIndex"
-              :active="index === currentIndex"
-              :style="{
-                height: itemHeight + 'px',
-              }"
-            >
-              <q-item-section>
-                <q-item-section>{{ item }}</q-item-section>
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-virtual-scroll>
-      </q-card>
-    </q-scroll-area>
+    <q-card>
+      <q-virtual-scroll
+        ref="scrollBar"
+        :style="{ maxHeight: listMaxHeight + 'px' }"
+        :virtual-scroll-slice-size="lazyItemSize"
+        :virtual-scroll-item-size="itemHeight"
+        @virtual-scroll="scrollEvent"
+        :items="matchedItems"
+      >
+        <template v-slot="{ item, index }">
+          <q-item
+            :key="index"
+            clickable
+            v-ripple
+            @mousemove="currentIndex = index"
+            @click="onOKClick"
+            manual-focus
+            :focused="index === currentIndex"
+            :active="index === currentIndex"
+            :style="{
+              height: itemHeight + 'px',
+            }"
+          >
+            <q-item-section v-if="isText">{{ item }}</q-item-section>
+            <q-item-section v-else-if="isJson">
+              <q-avatar v-if="item.icon">
+                <q-icon :name="item.icon" />
+              </q-avatar>
+              <q-item-label>{{ item.title }}</q-item-label>
+              <q-item-label caption>{{ item.description }}</q-item-label>
+            </q-item-section>
+            <q-item-section v-else-if="isHtml">
+              <div v-html="item"></div>
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-virtual-scroll>
+      <q-btn
+        class="absolute-bottom-right q-ma-md"
+        round
+        color="primary"
+        icon="close"
+        @click="onCancelClick"
+      />
+    </q-card>
   </q-dialog>
 </template>
 
@@ -48,17 +59,44 @@
 export default {
   data() {
     return {
-      result: this.items[0],
+      listMaxHeight: 500,
       currentIndex: 0,
       itemHeight: 50,
+      lazyItemSize: 50,
+      searchWords: "",
     };
   },
   mounted() {
     window.SelectList = this;
+    this.setSubInput();
+    this.setUtoolsHeight(this.itemHeight * this.itemSize);
   },
   computed: {
-    maxIndex() {
-      return this.items.length - 1;
+    itemSize() {
+      return this.items.length;
+    },
+    matchedItems() {
+      if (!this.searchWords) return this.items;
+      let matchedItems = this.items.filter((x) => {
+        if (typeof x === "string") {
+          return x.toLowerCase().includes(this.searchWords.toLowerCase());
+        }
+        return (
+          x.title.toLowerCase().includes(this.searchWords.toLowerCase()) ||
+          x.description.toLowerCase().includes(this.searchWords.toLowerCase())
+        );
+      });
+      this.setUtoolsHeight(this.itemHeight * matchedItems.length);
+      return matchedItems;
+    },
+    isJson() {
+      return this.options.optionType === "json";
+    },
+    isHtml() {
+      return this.options.optionType === "html";
+    },
+    isText() {
+      return this.options.optionType === "plaintext";
     },
   },
   props: {
@@ -70,6 +108,7 @@ export default {
     show() {
       this.$refs.dialog.show();
     },
+
     hide() {
       this.$refs.dialog.hide();
     },
@@ -79,11 +118,20 @@ export default {
     },
 
     onOKClick() {
-      this.$emit("ok", this.result);
+      utools.removeSubInput();
+      let selected =
+        this.options.optionType === "json"
+          ? this.matchedItems[this.currentIndex]
+          : {
+              id: this.currentIndex,
+              text: this.matchedItems[this.currentIndex],
+            };
+      this.$emit("ok", selected);
       this.hide();
     },
 
     onCancelClick() {
+      utools.removeSubInput();
       this.hide();
     },
 
@@ -94,13 +142,33 @@ export default {
           this.currentIndex = Math.max(0, this.currentIndex - 1);
           break;
         case 40:
-          this.currentIndex = Math.min(this.maxIndex, this.currentIndex + 1);
+          this.currentIndex = Math.min(
+            this.itemSize - 1,
+            this.currentIndex + 1
+          );
           break;
+        case 13:
+          this.onOKClick();
+          return;
       }
-      //   this.$refs.qitems[this.currentIndex].$el.scrollIntoViewIfNeeded(false);
+      this.$refs.scrollBar.scrollTo(this.currentIndex);
     },
+
     scrollEvent(e) {
-      console.log(e);
+      this.currentIndex =
+        e.direction === "increase"
+          ? Math.max(e.index, this.currentIndex)
+          : Math.min(e.index + 9, this.currentIndex);
+    },
+
+    setSubInput() {
+      utools.setSubInput(({ text }) => {
+        this.searchWords = text;
+      }, this.options.placeholder);
+    },
+
+    setUtoolsHeight(height) {
+      utools.setExpendHeight(Math.min(height, this.listMaxHeight));
     },
   },
 };