@mixd-id/web-scaffold 0.1.240411091 → 0.1.240411092

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.240411091",
+  "version": "0.1.240411092",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/PresetSelectorFilterItem.vue

@@ -87,7 +87,7 @@
 
     <div v-else class="flex flex-row gap-2">
       <Dropdown v-model="value.operator"
-                :class="![ 'notEmpty' ].includes(value.operator) ? 'w-[100px]' : 'w-full'"
+                :class="![ 'notEmpty', 'empty' ].includes(value.operator) ? 'w-[100px]' : 'w-full'"
                 :readonly="readonly"
                 @change="apply">
         <option value="eq">Equal</option>
@@ -100,8 +100,9 @@
         <option value="notIn">Except with comma</option>
         <option value="regex">Regex</option>
         <option value="notEmpty">Not Empty</option>
+        <option value="empty">Empty</option>
       </Dropdown>
-      <Textbox v-if="![ 'notEmpty' ].includes(value.operator)"
+      <Textbox v-if="![ 'notEmpty', 'empty' ].includes(value.operator)"
                v-model="value.value"
                :readonly="readonly"
                class="flex-1"

package/src/components/VirtualTable.vue

@@ -88,7 +88,7 @@
               </thead>
               <tbody>
                 <tr v-for="(item, index) in visibleItems"
-                    :key="item"
+                    :key="item.id ?? (visibleStartIndex + index)"
                     @dragover="(e) => $emit('dragover', e, item)"
                     @mouseover="hover(item, index)" @mouseout="hoverIndex = -1"
                     @click="select(item, index)"
@@ -131,7 +131,7 @@
                 </thead>
                 <tbody ref="tbody">
                   <tr v-for="(item, index) in visibleItems"
-                      :key="item"
+                      :key="item.id ?? (visibleStartIndex + index)"
                       @dragover="(e) => $emit('dragover', e, item)"
                       @mouseover="hover(item, index)" @mouseout="hoverIndex = -1"
                       @click="select(item, index)"
@@ -511,6 +511,11 @@ export default{
 			}
 
       this.scrolled = this.scrollTop > 0
+
+      this.scrollerCache = {
+        id: (this.cItems ?? [])[this.visibleStartIndex]?.id,
+        index: this.visibleStartIndex
+      }
 		}, 16),
 
 		passiveScrollSupported() {
@@ -817,15 +822,19 @@ export default{
 			}
 		},
 
-    scrollerStyle(to){
-      if(this.scrolled && this.scrollerCache?.id){
-        const index = this.items.findIndex(_ => _.id === this.scrollerCache.id)
-        const addToScroll = (index - this.scrollerCache.index) * this.itemHeight
-        this.scrollTop = this.$refs.cont.scrollTop = this.scrollTop + addToScroll
+    scrollerStyle(){
+      if(this.scrollerCache?.id && this.itemHeight > 0 && this.$refs.cont){
+        const index = (this.cItems ?? []).findIndex(_ => _.id === this.scrollerCache.id)
+        if(index >= 0){
+          const addToScroll = (index - this.scrollerCache.index) * this.itemHeight
+          if(addToScroll !== 0){
+            this.scrollTop = this.$refs.cont.scrollTop = this.scrollTop + addToScroll
+          }
+        }
       }
 
       this.scrollerCache = {
-        id: (this.items ?? [])[this.visibleStartIndex]?.id,
+        id: (this.cItems ?? [])[this.visibleStartIndex]?.id,
         index: this.visibleStartIndex
       }
     },

package/src/utils/list.mjs

@@ -729,6 +729,17 @@ const filtersToSequelizeWhere = async(filters, opt) => {
               }
             }
             break
+
+          case 'empty':
+            whereObj = {
+              [key]:{
+                [Op.or]: [
+                  { [Op.eq]: null },
+                  { [Op.eq]: '' }
+                ]
+              }
+            }
+            break
         }
         break
     }

package/src/utils/preset-selector.cjs

@@ -318,6 +318,17 @@ const getValue = (filter, opt) => {
           }
           break
 
+        case 'empty':
+          whereObj = {
+            [key]:{
+              [Op.or]: [
+                { [Op.eq]: null },
+                { [Op.eq]: '' }
+              ]
+            }
+          }
+          break
+
         case 'in':
           withoutKey ?
             whereObj = {
@@ -698,6 +709,17 @@ const filtersToSequelizeWhere = async(filters, opt) => {
             }
             break
 
+          case 'empty':
+            whereObj = {
+              [key]:{
+                [Op.or]: [
+                  { [Op.eq]: null },
+                  { [Op.eq]: '' }
+                ]
+              }
+            }
+            break
+
           case 'in':
             whereObj = {
               [key]:{

package/src/utils/preset-selector.js

@@ -318,6 +318,17 @@ const getValue = (filter, opt) => {
           }
           break
 
+        case 'empty':
+          whereObj = {
+            [key]:{
+              [Op.or]: [
+                { [Op.eq]: null },
+                { [Op.eq]: '' }
+              ]
+            }
+          }
+          break
+
         case 'in':
           withoutKey ?
             whereObj = {
@@ -698,6 +709,17 @@ const filtersToSequelizeWhere = async(filters, opt) => {
             }
             break
 
+          case 'empty':
+            whereObj = {
+              [key]:{
+                [Op.or]: [
+                  { [Op.eq]: null },
+                  { [Op.eq]: '' }
+                ]
+              }
+            }
+            break
+
           case 'in':
             whereObj = {
               [key]:{