@mixd-id/web-scaffold 0.1.250801007 → 0.1.250801009

package/package.json

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

package/src/components/Card.vue

@@ -19,13 +19,13 @@
           </div>
         </slot>
 
-        <slot name="default"></slot>
+        <slot name="default" :context="context"></slot>
 
       </div>
     </Transition>
   </Teleport>
 	<div v-else :class="computedClass">
-    <slot name="default"></slot>
+    <slot name="default" :context="context"></slot>
 	</div>
 </template>
 
@@ -76,7 +76,8 @@ export default{
   data(){
     return {
       mounted: false,
-      _state: false
+      _state: false,
+      context: {}
     }
   },
 
@@ -100,7 +101,9 @@ export default{
 
     },
 
-    open(){
+    open(context = {}){
+      this.context = context
+
       if(this.query){
 
       }
@@ -129,6 +132,11 @@ export default{
 
     class: String,
 
+    dismissable: {
+      type: Boolean,
+      default: false
+    },
+
     float: Boolean,
 
     height: {
@@ -218,4 +226,13 @@ html[data-theme='dark'] .overlay{
   @apply bg-black/50;
 }
 
+@media screen and (max-width: 640px){
+
+  .modal {
+    width: 100% !important;
+    max-height: 90vh;
+    @apply self-end;
+  }
+
+}
 </style>

package/src/components/List.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col bg-base-400 md:bg-transparent"
+       v-intersect="onVisibleChange">
 
     <div v-if="readyState >= 1"
          class="flex-1 flex flex-row">
@@ -36,14 +37,14 @@
                 :preset="preset"
                 :presetSelector="$refs.presetSelector"
                 :compPrefix="compPrefix">
-            <div class="flex flex-col md:flex-row gap-3 md:items-end overflow-hidden p-3 md:p-0 md:panel-none border-b-[1px] border-border-50 md:border-none"
+            <div class="flex flex-col md:flex-row gap-3 md:items-end overflow-hidden p-3 pb-1 md:p-0"
                  :class="headerClass">
-
-              <div class="flex md:flex-1 flex-row items-end gap-3">
+              <div class="flex md:flex-1 flex-row items-end md:gap-3 py-1 md:py-0">
+                <slot name="left"></slot>
 
                 <div class="flex flex-row gap-2 md:gap-3 items-center px-3" ref="title">
                   <div class="flex flex-col whitespace-nowrap text-ellipsis overflow-hidden">
-                    <div class="cursor-pointer group leading-5" @click="$refs.contextMenu.open($refs.title)">
+                    <div class="cursor-pointer group leading-4" @click="$refs.contextMenu.open($refs.title)">
                       <small class="text-text-400 text-xs">{{ title ?? 'Untitled' }}</small>
                       <div class="flex flex-row items-baseline gap-1">
                         <h3 class="whitespace-nowrap relative text-ellipsis overflow-hidden group-hover:text-primary">
@@ -90,8 +91,9 @@
 
                 <slot name="toolbar">
                 </slot>
+
                 <slot name="right-toolbar">
-                  <div class="flex flex-row gap-2" v-if="Boolean(toolbar)">
+                  <div class="hidden md:flex flex-row gap-2" v-if="Boolean(toolbar)">
                     <Textbox v-if="canSearch"
                              class="flex-1 md:w-[240px]"
                              placeholder="Search..."
@@ -106,26 +108,6 @@
                         </div>
                       </template>
                     </Textbox>
-
-                    <div v-if="false && $slots.gridItem"
-                         class="hidden md:grid grid-cols-2 gap-[1px] border-[1px] border-border-50 rounded-lg">
-                      <Radio v-model="preset.view"
-                             name="view"
-                             value="table"
-                             :custom="true"
-                             class="p-2 px-3 rounded-lg rounded-r-none"
-                             :class="preset.view === 'table' ? 'bg-primary-500' : 'bg-base-500'">
-                        <svg width="14" height="14" :class="preset.view === 'table' ? 'fill-white' : 'fill-text'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M448 32H64.05C28.7 32 .0492 60.65 .0492 96v320c0 35.35 28.65 64 64 64h383.1c35.35 0 64-28.65 64-64V96C512 60.65 483.4 32 448 32zM224 416H64v-96h160V416zM224 256H64V160h160V256zM448 416h-160v-96h160V416zM448 256h-160V160h160V256z"/></svg>
-                      </Radio>
-                      <Radio v-model="preset.view"
-                             name="view"
-                             value="grid"
-                             :custom="true"
-                             class="p-2 px-3 bg-base-500 rounded-lg rounded-l-none"
-                             :class="preset.view === 'grid' ? 'bg-primary-500' : 'bg-base-500'">
-                        <svg width="14" height="14" :class="preset.view === 'grid' ? 'fill-white' : 'fill-text'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M144 288h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96C176 302.3 161.7 288 144 288zM368 288h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96C400 302.3 385.7 288 368 288zM592 288h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96C624 302.3 609.7 288 592 288zM144 64h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32V96C176 78.33 161.7 64 144 64zM368 64h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32V96C400 78.33 385.7 64 368 64zM592 64h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32V96C624 78.33 609.7 64 592 64z"/></svg>
-                      </Radio>
-                    </div>
                   </div>
                 </slot>
               </div>
@@ -133,6 +115,27 @@
             </div>
           </slot>
 
+          <div class="md:hidden">
+            <slot name="mobile-toolbar">
+              <div class="p-3">
+                <Textbox v-if="canSearch"
+                         placeholder="Search..."
+                         class="bg-base-300"
+                         clearable="1"
+                         maxlength="100"
+                         v-model="preset.search"
+                         @clear="delete preset.search; load()"
+                         @keyup.enter="load">
+                  <template #start>
+                    <div class="p-2 pr-0">
+                      <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M504.1 471l-134-134C399.1 301.5 415.1 256.8 415.1 208c0-114.9-93.13-208-208-208S-.0002 93.13-.0002 208S93.12 416 207.1 416c48.79 0 93.55-16.91 129-45.04l134 134C475.7 509.7 481.9 512 488 512s12.28-2.344 16.97-7.031C514.3 495.6 514.3 480.4 504.1 471zM48 208c0-88.22 71.78-160 160-160s160 71.78 160 160s-71.78 160-160 160S48 296.2 48 208z"/></svg>
+                    </div>
+                  </template>
+                </Textbox>
+              </div>
+            </slot>
+          </div>
+
           <div class="flex-1 flex" ref="content">
             <div v-if="readyState === 2" class="flex-1 flex items-center justify-center">
               <svg class="animate-spin" width="36" height="36" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
@@ -288,7 +291,7 @@ import VirtualGrid from "./VirtualGrid.vue";
 import PresetSelector from "../widgets/PresetSelector.vue";
 import {generatePivotColumns, generateTotalColumns, setupConfig, sortsFn} from "../utils/preset-selector.mjs";
 import PresetBar from "../widgets/PresetBar.vue";
-import {groupBy, invokeAfterIdle, queueForLater} from "../utils/helpers.mjs";
+import {invokeAfterIdle, queueForLater} from "../utils/helpers.mjs";
 
 export default{
 
@@ -899,40 +902,42 @@ export default{
       if(column){
         delete column.freeze
       }
-    }
+    },
 
-  },
+    onVisibleChange({ inViewport, entry }){
+      if(inViewport){
+        this.$addResizeListener(this.$el, () => this.compPrefix = this.$util.calculateMediaPrefix(this.$el.clientWidth))
+
+        this.loadPreset()
+            .finally(() => {
+              this.readyState = 1
+              this.$nextTick(() => {
+                this.calcItemsPerPage()
+                this.load()
+                this.loadExt()
+              })
+            })
 
-  components: {PresetBar, PresetSelector, VirtualGrid, VirtualTable},
+        if(this.subscribeKey){
+          this.useSocket().send('user.subscribe', { name:this.subscribeKey })
+          this.useSocket().on(this.subscribeKey, this.onSignal)
+        }
 
-  mounted(){
-    this.$addResizeListener(this.$el, () => this.compPrefix = this.$util.calculateMediaPrefix(this.$el.clientWidth))
+        window.addEventListener('keydown', this.onKeyDown)
 
-    this.loadPreset()
-        .finally(() => {
-          this.readyState = 1
-          this.$nextTick(() => {
-            this.calcItemsPerPage()
-            this.load()
-            this.loadExt()
-          })
+        this.queue = queueForLater({
+          pop: this.loadQueued,
+          delay: this.updateInterval
         })
 
-    if(this.subscribeKey){
-      this.useSocket().send('user.subscribe', { name:this.subscribeKey })
-      this.useSocket().on(this.subscribeKey, this.onSignal)
-    }
-
-    window.addEventListener('keydown', this.onKeyDown)
-
-    this.queue = queueForLater({
-      pop: this.loadQueued,
-      delay: this.updateInterval
-    })
+        this.useSocket().on('connect', this.onConnect)
+      }
+    },
 
-    this.useSocket().on('connect', this.onConnect)
   },
 
+  components: {PresetBar, PresetSelector, VirtualGrid, VirtualTable},
+
   unmounted() {
     this.$removeResizeListener(this.$el)
     window.removeEventListener('keydown', this.onKeyDown)

package/src/components/MultiDropdown.vue

@@ -1,6 +1,6 @@
 <template>
 	<div :class="$style.dropdown">
-		<div ref="btn" class="flex flex-row items-center w-[150px]"
+		<div ref="btn" class="flex-1 flex flex-row items-center w-[150px]"
          :class="containerClass"
          @click="open()">
       <div class="flex-1 p-2 text-ellipsis-nowrap">
@@ -12,9 +12,9 @@
       </button>
     </div>
 
-    <ContextMenu ref="contextMenu" :dismiss="false">
+    <ContextMenu ref="contextMenu" class="mt-2">
       <div class="flex flex-col min-w-[200px]">
-        <div class="p-2">
+        <div class="p-2" v-if="viewedItems.length > 10">
           <Textbox v-model="search" :clearable="true" @clear="search = ''">
             <template #start>
               <div class="pl-2">
@@ -23,7 +23,7 @@
             </template>
           </Textbox>
         </div>
-        <div v-for="item in viewedItems" class="p-2">
+        <div v-for="item in viewedItems" class="p-2"  @click.stop>
           <Checkbox :value="item[valueKey]" v-model="selectedItems">
             {{ item[textKey] }}
           </Checkbox>
@@ -40,7 +40,12 @@ export default{
   props: {
     containerClass: String,
 
-    modelValue: Array,
+    modelValue: {
+      type: Array,
+      validator(value){
+        return Array.isArray(value)
+      }
+    },
 
     items: Array,
 
@@ -58,15 +63,15 @@ export default{
   computed: {
 
     selectedText(){
-      if(this.modelValue.length > 0)
+      if((this.modelValue ?? []).length > 0)
         return this.modelValue.map(_ => _[this.textKey] ?? _[this.valueKey]).join(', ')
       return this.$t('(Not Selected)')
     },
 
     viewedItems(){
       if(this.search !== '')
-        return this.items.filter(_ => `${_[this.textKey]}`.toLowerCase().indexOf(this.search.toLowerCase()) >= 0)
-      return this.items
+        return (this.items ?? []).filter(_ => `${_[this.textKey]}`.toLowerCase().indexOf(this.search.toLowerCase()) >= 0)
+      return this.items ?? []
     }
 
   },
@@ -81,7 +86,7 @@ export default{
   methods: {
 
     open(){
-      this.selectedItems = this.modelValue.map(_ => _[this.valueKey])
+      this.selectedItems = (this.modelValue ?? []).map(_ => _[this.valueKey])
       this.$refs.contextMenu.open(this.$refs.btn)
     }
 
@@ -92,8 +97,7 @@ export default{
     selectedItems: {
       deep: true,
       handler(_items){
-        this.$emit('update:modelValue',
-            this.items.filter(_ => _items.includes(_[this.valueKey]))
+        this.$emit('update:modelValue', (this.items ?? []).filter(_ => _items.includes(_[this.valueKey]))
         )
       }
     }

package/src/components/Timepicker.vue

@@ -92,7 +92,7 @@ export default{
 
 .timepicker{
   @apply inline-flex flex-row items-center;
-  @apply bg-base-300 border-[1px] border-border-200 rounded-lg;
+  @apply bg-base-400 border-[1px] border-border-200 rounded-lg;
   @apply divide-x divide-border-50;
 }
 

package/src/components/VirtualGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="$style.virtualGrid" @click="resize">
+  <div :class="$style.virtualGrid">
 
     <div ref="scroller" :class="$style.scroller" :style="scrollerStyle">
       <div :class="spacerClass" ref="spacer" :style="spacerStyle">
@@ -273,7 +273,7 @@ export default{
 
 .virtualGrid{
   @apply flex-1 overflow-y-auto;
-  @apply border-[1px] border-border-50 bg-base-400;
+  @apply md:border-[1px] border-border-50 md:bg-base-400;
 }
 
 .scroller{
@@ -286,7 +286,7 @@ export default{
 .spacer{
   will-change: auto;
   position: relative;
-  @apply grid;
+  @apply grid divide-y divide-border-50 border-t-[1px] border-border-50;
 }
 
 .calc{

package/src/components/VirtualTable.vue

@@ -207,7 +207,7 @@ const _DEFAULT_COLUMN_WIDTH = '100px'
 
 export default{
 
-  inject: [ 'emitRoot', 'listStyle' ],
+  inject: [ 'emitRoot' ],
 
 	emits: [ 'dragover', 'freeze', 'unfreeze', 'scroll-end', 'item-click' ],
 
@@ -685,8 +685,7 @@ export default{
 
 			return [
 				this.$style.tdDiv,
-				this.$style['align-' + align],
-        this.listStyle ? this.listStyle[appearanceClass] : ''
+				this.$style['align-' + align]
 			]
 				.join(' ')
 		},

package/src/directives/intersect.js

@@ -0,0 +1,26 @@
+// directives/intersect.js
+export default {
+  mounted(el, binding) {
+    const callback = binding.value;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach(entry => {
+          callback({
+            inViewport: entry.isIntersecting,
+            entry
+          });
+        });
+      },
+      {
+        threshold: 0.1, // adjust sensitivity
+      }
+    );
+
+    observer.observe(el);
+    el._observer = observer;
+  },
+  unmounted(el) {
+    if (el._observer) el._observer.disconnect();
+  }
+};

package/src/index.js

@@ -2,6 +2,8 @@ import {defineAsyncComponent, ref} from "vue"
 import {arrayPush, arrayRemove, arrayUnshift, downloadUrl, invokeAfterIdle, observeInit} from './utils/helpers.mjs'
 import dayjs from "dayjs";
 import {useDevice} from './hooks/device.js'
+import IntersectDirective from './directives/intersect';
+
 
 let _UNIQID = 0
 const uniqid = (additionalKey = '') => {
@@ -425,6 +427,8 @@ export default{
       app.config.globalProperties.$mounted.value = true
     }
 
+    app.directive('intersect', IntersectDirective)
+
     app.component('Ahref', defineAsyncComponent(() => import("./components/Ahref.vue")))
     app.component('Paragraph', defineAsyncComponent(() => import("./components/Paragraph.vue")))
     app.component('Alert', defineAsyncComponent(() => import("./components/Alert.vue")))

package/src/utils/list.mjs

@@ -366,34 +366,57 @@ const getValue = (filter, opt) => {
   return whereObj
 }
 
-const filtersToSequelizeWhere = async(filters, opt) => {
-  if(!Array.isArray(filters) || filters.length < 1){
-    return {
-      where: {},
-      replacements: []
-    }
+const getColumnTypeFromModelAttribute = (attribute, opt) => {
+  const { DataTypes } = opt?.Sequelize ?? Sequelize
+
+  switch(attribute.type.key){
+    case DataTypes.BOOLEAN.key:
+      return 'boolean'
+
+    case DataTypes.INTEGER.key:
+    case DataTypes.FLOAT.key:
+    case DataTypes.DOUBLE.key:
+    case DataTypes.DECIMAL.key:
+      return 'number'
+
+    case DataTypes.DATE.key:
+    case DataTypes.DATEONLY.key:
+      return 'date'
+
+    default:
+      return 'string'
   }
+}
 
+const filtersToSequelizeWhere = async(filters, opt) => {
   let whereArr = []
   let replacements = []
   const { literal, Op } = opt.Sequelize ?? Sequelize
+  const { columns = [] } = opt?.config ?? {}
+  const modelAttributes = opt.model.getAttributes()
+  const tableName = opt.model.getTableName()
+
+  if(columns.length < 1){
+    for(let key in modelAttributes){
+      columns.push({
+        key,
+        fieldName: modelAttributes[key]?.fieldName || key,
+        type: getColumnTypeFromModelAttribute(modelAttributes[key], opt)
+      })
+    }
+  }
 
-  const getValue = (filter, opt) => {
+  const keyColumns = (columns ?? []).reduce((res, cur) => {
+    res[cur.key] = cur
+    cur.fieldName = modelAttributes[cur.key]?.fieldName || cur.key
+    return res
+  }, {})
 
-    const { columns } = opt.config
-    let { key, operator, value, fn:filterFn } = filter
-    const keyColumns = groupBy(columns, 'key')
-    const type = ((keyColumns[key] ?? [])[0] ?? {}).type
+  const getValue = (filter) => {
+    let { key, operator, value, fn:filterFn, fieldName } = filter
+    const type = (keyColumns[key] ?? {}).type ?? 'string'
 
     let whereObj = {}
-    let Model, field
-    if(opt.model){
-      const modelAttributes = opt.model.getAttributes()
-      if(modelAttributes[key]){
-        Model = opt.model
-        field = modelAttributes[key].field
-      }
-    }
 
     switch(type){
 
@@ -539,7 +562,7 @@ const filtersToSequelizeWhere = async(filters, opt) => {
             switch(filterFn) {
 
               case 'format_hour':
-                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%H") < "${filter.value}"`)
+                whereObj = literal(`DATE_FORMAT(${tableName}.${fieldName}, "%H") < "${filter.value}"`)
                 break
 
               default:
@@ -557,7 +580,7 @@ const filtersToSequelizeWhere = async(filters, opt) => {
             switch(filterFn) {
 
               case 'format_hour':
-                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%H") <= "${filter.value}"`)
+                whereObj = literal(`DATE_FORMAT(${tableName}.${fieldName}, "%H") <= "${filter.value}"`)
                 break
 
               default:
@@ -575,19 +598,19 @@ const filtersToSequelizeWhere = async(filters, opt) => {
             switch(filterFn) {
 
               case 'format_date':
-                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%Y-%m-%d") = "${filter.value}"`)
+                whereObj = literal(`DATE_FORMAT(${tableName}.${fieldName}, "%Y-%m-%d") = "${filter.value}"`)
                 break
 
               case 'format_hour':
-                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%H") = "${filter.value}"`)
+                whereObj = literal(`DATE_FORMAT(${tableName}.${fieldName}, "%H") = "${filter.value}"`)
                 break
 
               case 'format_month':
-                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%m") = "${filter.value.split('-')[1]}"`)
+                whereObj = literal(`DATE_FORMAT(${tableName}.${fieldName}, "%m") = "${filter.value.split('-')[1]}"`)
                 break
 
               case 'format_year':
-                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%Y") = "${filter.value}"`)
+                whereObj = literal(`DATE_FORMAT(${tableName}.${fieldName}, "%Y") = "${filter.value}"`)
                 break
 
               default:
@@ -606,7 +629,7 @@ const filtersToSequelizeWhere = async(filters, opt) => {
             switch(filterFn) {
 
               case 'format_hour':
-                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%H") > "${filter.value}"`)
+                whereObj = literal(`DATE_FORMAT(${tableName}.${fieldName}, "%H") > "${filter.value}"`)
                 break
 
               default:
@@ -624,7 +647,7 @@ const filtersToSequelizeWhere = async(filters, opt) => {
             switch(filterFn) {
 
               case 'format_hour':
-                whereObj = literal(`DATE_FORMAT(${Model.name}.${field}, "%H") >= "${filter.value}"`)
+                whereObj = literal(`DATE_FORMAT(${tableName}.${fieldName}, "%H") >= "${filter.value}"`)
                 break
 
               default:
@@ -736,41 +759,74 @@ const filtersToSequelizeWhere = async(filters, opt) => {
     return whereObj
   }
 
-  for(let filter of filters) {
-    if (filter.enabled === false) continue
+  if(Array.isArray(filters)){
+    for(let filter of filters) {
+      if (filter.enabled === false) continue
 
-    const { key, value, modifier = 'and' } = filter
+      const { key, value, modifier = 'and' } = filter
 
-    if(key.indexOf('.') >= 0) continue
+      if(!keyColumns[key]) continue
 
-    if(Array.isArray(value)){
+      if(Array.isArray(value)){
 
-      const modifierValue = []
+        const modifierValue = []
 
-      for(let _value of value){
-        modifierValue.push(getValue({
-          ..._value,
-          key
-        }, opt))
-      }
+        for(let _value of value){
+          modifierValue.push(getValue({
+            ..._value,
+            key
+          }, opt))
+        }
 
-      switch(modifier){
-        case 'or':
-          whereArr.push({
-            [Op.or]: modifierValue
-          })
-          break
+        switch(modifier){
+          case 'or':
+            whereArr.push({
+              [Op.or]: modifierValue
+            })
+            break
 
-        default:
-          whereArr.push({
-            [Op.and]: modifierValue
-          })
-          break
+          default:
+            whereArr.push({
+              [Op.and]: modifierValue
+            })
+            break
+        }
+      }
+      else{
+        whereArr.push(getValue(filter, opt))
       }
     }
-    else{
-      whereArr.push(getValue(filter, opt))
+  }
+  else if(filters && typeof filters === 'object'){
+
+    for(let key in filters){
+      if(!keyColumns[key]) continue
+
+      const value = filters[key]
+
+      if(Array.isArray(value)){
+        const modifierValue = []
+
+        for(let _value of value){
+          modifierValue.push(getValue({
+            ..._value,
+            key
+          }, opt))
+        }
+
+        whereArr.push({
+          [Op.and]: modifierValue
+        })
+      }
+      else{
+        whereArr.push(getValue({
+          key,
+          operator: '=',
+          value
+        }, opt))
+      }
     }
+
   }
 
   return {
@@ -1305,7 +1361,8 @@ const presetToSequelizeList = async(preset, opt = {}) => {
     replacements: initialReplacements,
     include,
     order:initialOrder,
-    logging = false
+    logging = false,
+    debug = false
   } = opt
 
   if(!model) return {}
@@ -1349,7 +1406,8 @@ const presetToSequelizeList = async(preset, opt = {}) => {
   const { where:filterWhere, replacements:filterReplacements } = await filtersToSequelizeWhere(filters, {
     config,
     model,
-    Sequelize: opt.Sequelize
+    Sequelize: opt.Sequelize,
+    debug
   })
 
   let searchWhere = {}, searchReplacements = []