Fixed panel filter bug

Author: Kenneth Cheng

package-lock.json

@@ -2,7 +2,7 @@
   "name": "vue3-excel-editor",
   "email": "[email protected]",
   "description": "Vue3 plugin for displaying and editing the array-of-object in Excel style",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "main": "src/main.js",
   "dependencies": {
     "@vuepic/vue-datepicker": "^3.3.0",

package.json

@@ -164,11 +164,11 @@ export default {
     doInputFilter () {
       if (window.delay) clearTimeout(window.delay)
       window.delay = setTimeout(() => {
-        this.inputFilter = this.$refs.inputFilter.modelValue
+        this.inputFilter = this.$refs.inputFilter.value
       }, 200)
     },
     doFilter () {
-      const opt = this.inputFilterCondition + this.$refs.inputFilter.modelValue
+      const opt = this.inputFilterCondition + this.$refs.inputFilter.value
       this.columnFilterRef.$el.textContent = opt
       this.columnFilterRef.$emit('update:modelValue', opt)
       this.hidePanel()
@@ -184,7 +184,7 @@ export default {
       this.inputFilter = ''
       this.inputFilterCondition = ''
       this.sortedUniqueValueList = []
-      this.$refs.inputFilter.modelValue = ''
+      this.$refs.inputFilter.value = ''
       if (this.columnFilterRef.$el.textContent != '') {
         this.columnFilterRef.$el.textContent = ''
         this.columnFilterRef.$emit('update:modelValue', '')
@@ -264,6 +264,7 @@ input:focus, button:focus {
 
 div.panel-title span, button.panel-button span {
   margin-left: 6px;
+  vertical-align: text-top;
 }
 
 .panel-content {
@@ -382,7 +383,7 @@ div.panel-title span, button.panel-button span {
   flex-direction: column;
 }
 .panel-checkbox {
-  vertical-align: 2px;
+  vertical-align: bottom;
 }
 .panel-list span {
   margin-left: 10px;

src/PanelFilter.vue

@@ -181,7 +181,7 @@
       </div>
 
       <!-- Vertical Scroll Bar -->
-      <div v-if="vScroller.buttonHeight < vScroller.height"
+      <div v-show="vScroller.buttonHeight < vScroller.height"
            ref="vScroll"
            class="v-scroll"
            :style="{top: `${vScroller.top}px`, height: `${vScroller.height}px`}"
@@ -2506,6 +2506,7 @@ export default defineComponent({
             type: 'd',
             rec: t
           })))
+          this.refresh()
         })
       }, 100)
     },
@@ -3087,6 +3088,7 @@ input:focus, input:active:focus, input.active:focus {
   z-index: 5;
   background-color: white;
   border-left: 1px solid lightgray;
+  border-top: 1px lightgray solid;
   user-select: none;
 }
 .v-scroll-button {