@mixd-id/web-scaffold 0.1.230406247 → 0.1.230406248

package/package.json

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

package/src/components/Chart.vue

@@ -2,7 +2,7 @@
 	<div v-if="readyState === 1" :class="$style.comp">
 
     <div class="p-3 flex flex-col items-start leading-tight">
-      <small class="text-text-400">Users</small>
+      <small class="text-text-400">{{ title ?? 'Untitled' }}</small>
       <h5 class="inline align-top cursor-pointer hover:text-primary group" @click="$refs.presetSelector.open()">
         {{ preset.name ?? 'Preset Name' }}
         <span v-if="badgeCount > 0" class="mx-1 min-w-[19px] px-2 h-[19px] relative top-[-2px] rounded-full bg-primary text-white inline-flex items-center justify-center">
@@ -52,6 +52,7 @@ export default{
 
     presetKey: undefined,
     src: undefined,
+    title: String,
     subscribeKey: String,
   },
 

package/src/components/DGridItem.vue

@@ -15,6 +15,10 @@
          @click="editMode = true"
          @mousedown="(e) => onMouseDown(e, 'bottom')"></div>
 
+    <div ref="drag" :class="`${$style.drag} ${editMode ? $style.editMode : ''}`">
+      <svg width="48" height="48" class="fill-primary" 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="M512 255.1c0 6.755-2.844 13.09-7.844 17.62l-88 80.05C411.5 357.8 405.8 359.9 400 359.9c-13.27 0-24-10.76-24-24c0-6.534 2.647-13.04 7.844-17.78l42.07-38.28H280v146l38.25-42.1c4.715-5.2 11.21-7.849 17.74-7.849c13.23 0 24.01 10.71 24.01 24.03c0 5.765-2.061 11.55-6.25 16.15l-80 88.06C269.2 509.2 262.8 512 256 512s-13.22-2.846-17.75-7.849l-80-88.06c-4.189-4.603-6.25-10.39-6.25-16.15c0-13.38 10.83-24.03 23.1-24.03c6.526 0 13.02 2.649 17.75 7.849L232 425.9V279.8H86.09l42.07 38.28c5.196 4.735 7.844 11.24 7.844 17.78c0 13.22-10.71 24-24 24c-5.781 0-11.53-2.064-16.16-6.254l-88-80.05C2.844 269.1 0 262.7 0 255.1c0-6.755 2.844-13.37 7.844-17.9l88-80.05C100.5 153.8 106.2 151.8 112 151.8c13.26 0 23.99 10.74 23.99 23.99c0 6.534-2.647 13.04-7.844 17.78L86.09 231.8H232V85.8L193.8 127.9C189 133.1 182.5 135.7 175.1 135.7c-13.16 0-23.1-10.66-23.1-24.03c0-5.765 2.061-11.55 6.25-16.15l80-88.06C242.8 2.502 249.4 0 256 0s13.22 2.502 17.75 7.505l80 88.06c4.189 4.603 6.25 10.39 6.25 16.15c0 13.35-10.81 24.03-24 24.03c-6.531 0-13.03-2.658-17.75-7.849L280 85.8v146h145.9l-42.07-38.28c-5.196-4.735-7.844-11.24-7.844-17.78c0-13.25 10.74-23.99 23.98-23.99c5.759 0 11.55 2.061 16.18 6.242l88 80.05C509.2 242.6 512 249.2 512 255.1z"/></svg>
+    </div>
+
     <button type="button" :class="`${$style.removeBtn} ${editMode ? $style.editMode : ''}`" @click="$emit('remove')">
       <svg width="11" height="11" class="fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M378.4 440.6c8.531 10.16 7.203 25.28-2.938 33.81C370.9 478.2 365.5 480 360 480c-6.844 0-13.64-2.906-18.39-8.562L192 293.3l-149.6 178.1C37.63 477.1 30.83 480 23.98 480c-5.453 0-10.92-1.844-15.42-5.625c-10.14-8.531-11.47-23.66-2.938-33.81L160.7 256L5.625 71.44C-2.906 61.28-1.578 46.16 8.563 37.63C18.69 29.08 33.84 30.39 42.38 40.56L192 218.7l149.6-178.1c8.547-10.17 23.67-11.47 33.81-2.938s11.47 23.66 2.938 33.81L223.3 256L378.4 440.6z"/></svg>
     </button>
@@ -26,7 +30,7 @@
 
 export default{
 
-  emits: [ 'class-change', 'remove' ],
+  emits: [ 'class-change', 'remove', 'reorder' ],
 
   props: {
 
@@ -53,6 +57,7 @@ export default{
     return {
       drag: null,
       editMode: false,
+      oEl: null,
     }
   },
 
@@ -82,16 +87,12 @@ export default{
 
           if(Math.abs(distanceX) > 35){
             const match = this.class.match(/col-span-(\d+)/)
-            console.log(match)
             const colSpan = match ? parseInt(match[1]) : 1
             const nextColSpan = distanceX > 0 ? colSpan + 1 <= 12 ? colSpan + 1 : 12 :
                 colSpan - 1 >= 1 ? colSpan - 1 : 1
-            console.log(colSpan, nextColSpan)
 
-            console.log(2, this.class)
             const nextClass = match ? this.class.replace(`col-span-${colSpan}`, `col-span-${nextColSpan}`) :
                 `${this.class} col-span-${nextColSpan}`
-            console.log(2, nextClass)
 
             this.drag.x = e.clientX
             this.$emit('class-change', nextClass)
@@ -100,17 +101,17 @@ export default{
 
         case 'bottom':
           const distanceY = e.clientY - this.drag.y
-          if(Math.abs(distanceY) > 20){
+          if(Math.abs(distanceY) > 70){
             const match = this.class.match(/row-span-(\d+)/)
             const rowSpan = match ? parseInt(match[1]) : 1
             const nextRowSpan = distanceY > 0 ? rowSpan + 1 <= 12 ? rowSpan + 1 : 12 :
                 rowSpan - 1 >= 1 ? rowSpan - 1 : 1
 
-            match ? this.class.replace(`row-span-${rowSpan}`, `row-span-${nextRowSpan}`) :
-                this.class += ` row-span-${nextRowSpan}`
+            const nextClass = match ? this.class.replace(`row-span-${rowSpan}`, `row-span-${nextRowSpan}`) :
+                `${this.class} row-span-${nextRowSpan}`
 
             this.drag.y = e.clientY
-            this.$emit('class-change', this.class)
+            this.$emit('class-change', nextClass)
           }
           break
       }
@@ -131,6 +132,47 @@ export default{
 
     },
 
+    onDragOver(e){
+      e.preventDefault();
+      const oEl = e.target.closest(`.${this.$style.comp}`)
+
+      if(this.oEl !== oEl){
+        this.oEl ? this.oEl.style.opacity = '' : '';
+
+        if(oEl){
+          this.oEl = oEl
+          this.oEl.style.opacity = '.5'
+        }
+      }
+    },
+
+    onDragStart(e){
+      window.addEventListener('dragover', this.onDragOver)
+      window.addEventListener('dragend', this.onDragEnd)
+    },
+
+    onDragEnd(e){
+
+      e.preventDefault()
+
+      const childNodes = Array.from(this.$el.parentNode.children)
+      const fromIdx = childNodes.indexOf(this.$el)
+      const toIdx = childNodes.indexOf(this.oEl)
+
+      this.oEl ? this.oEl.style.opacity = '' : '';
+
+      this.$el.setAttribute('draggable', false)
+      window.removeEventListener('dragover', this.onDragOver)
+      window.removeEventListener('dragend', this.onDragEnd)
+
+      this.$emit('reorder', fromIdx, toIdx)
+    },
+
+    onDrag(e){
+      this.$el.addEventListener('dragstart', this.onDragStart)
+      this.$el.setAttribute('draggable', true)
+    }
+
   },
 
   watch: {
@@ -138,6 +180,9 @@ export default{
     editMode(to){
       to ? window.addEventListener('click', this.checkEditMode) :
           window.removeEventListener('click', this.checkEditMode)
+
+      to ? this.$refs.drag.addEventListener('mousedown', this.onDrag) :
+          this.$refs.drag.removeEventListener('mousedown', this.onDrag)
     }
 
   }
@@ -151,6 +196,19 @@ export default{
 .comp{
   @apply relative flex;
 }
+.comp[class~='row-span-2']>*:first-child,
+.comp[class~='row-span-3']>*:first-child,
+.comp[class~='row-span-4']>*:first-child,
+.comp[class~='row-span-5']>*:first-child,
+.comp[class~='row-span-6']>*:first-child,
+.comp[class~='row-span-7']>*:first-child,
+.comp[class~='row-span-8']>*:first-child,
+.comp[class~='row-span-9']>*:first-child,
+.comp[class~='row-span-10']>*:first-child,
+.comp[class~='row-span-11']>*:first-child
+.comp[class~='row-span-12']>*:first-child{
+  @apply !absolute !top-0 !left-0 !right-0 !bottom-0 !h-auto;
+}
 
 .top{
   @apply h-[3px];
@@ -193,4 +251,13 @@ export default{
   @apply flex;
 }
 
+.drag{
+  @apply absolute top-0 left-0 right-0 bottom-0;
+  @apply rounded-full hidden;
+}
+.drag.editMode{
+  @apply flex items-center justify-center flex items-center justify-center;
+  @apply cursor-move;
+}
+
 </style>

package/src/components/List.vue

@@ -1,91 +1,105 @@
 <template>
-  <div v-if="readyState === 1" class="flex-1 flex flex-col gap-4">
-
-    <div class="flex flex-row gap-4 items-center">
-      <div class="pl-2 flex flex-col leading-tight">
-        <small class="text-text-400">Users</small>
-        <h3 class="inline align-top cursor-pointer hover:text-primary group" @click="$refs.presetSelector.open()">
-          {{ preset.name ?? 'Preset Name' }}
-          <span v-if="badgeCount > 0" class="mx-1 min-w-[19px] px-2 h-[19px] relative top-[-2px] rounded-full bg-primary text-white inline-flex items-center justify-center">
-              {{ badgeCount }}
-            </span>
-          <svg width="13" height="13" class="inline fill-text pointer-events-none group-hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
-        </h3>
-      </div>
-
-      <div class="flex-1"></div>
-
-      <slot name="start"></slot>
-
-      <div class="flex flex-row gap-2 gap-1">
-        <Textbox class="bg-base-500 w-[240px]" placeholder="Search..." clearable="1"
-                 v-model="preset.search"
-                 @clear="delete preset.search; load()"
-                 @keyup.enter="load">
-          <template #start>
-            <div class="p-2 pr-0">
-              <svg width="16" height="16" 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 class="grid grid-cols-2 gap-[1px]">
-          <Radio v-model="preset.view"
-                 name="view"
-                 value="table"
-                 :custom="true"
-                 class="p-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-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>
-    </div>
+  <div class="flex flex-col">
+    <div v-if="readyState === 1"
+         class="flex-1 flex flex-col gap-3">
+
+      <slot name="head"
+            :preset="preset"
+            :badge-count="badgeCount"
+            :presetSelector="$refs.presetSelector"
+            :compPrefix="compPrefix">
+        <div class="flex flex-row gap-3 items-center overflow-hidden leading-tight pl-3">
+          <div class="flex flex-col whitespace-nowrap text-ellipsis overflow-hidden">
+            <small class="text-text-400">{{ title ?? 'Untitled' }}</small>
+            <h3 class="cursor-pointer whitespace-nowrap text-ellipsis overflow-hidden hover:text-primary group"
+                @click="$refs.presetSelector.open()">
+              {{ preset.name ?? 'Preset Name' }}
+              <span v-if="badgeCount > 0" class="inline mx-1 min-w-[19px] px-2 h-[19px] relative top-[-2px] rounded-full bg-primary text-white inline-flex items-center justify-center">
+                {{ badgeCount }}
+              </span>
+              <svg width="13" height="13" class="inline fill-text pointer-events-none group-hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
+            </h3>
+          </div>
 
-    <VirtualTable v-if="preset.view === 'table'"
-                  :columns="columns"
-                  class="flex-1"
-                  :items="users.items"
-                  @scroll-end="loadNext">
-
-      <template v-for="(_, slot) in contentSlots" #[slot]="{ item, index }">
-        <slot :name="slot" :item="item" :index="index"></slot>
-      </template>
-
-    </VirtualTable>
-
-    <VirtualGrid v-else-if="preset.view === 'grid'"
-                 :items="users.items"
-                 :column="3"
-                 class="flex-1"
-                 @scroll-end=""
-                 container-class="gap-5"
-                 :config="config">
-      <template #item="{ item }">
-        <slot name="gridItem" :item="item">
-          <div class="flex flex-row bg-base-400 rounded-lg overflow-hidden">
-            <div>
-              <Image :src="item.imageUrl" class="bg-text-50 w-[64px] h-[64px]" />
-            </div>
-            <div class="flex-1 p-3">
-              <strong>{{ item.name }}</strong>
+          <div class="flex-1"></div>
+
+          <slot name="toolbar"></slot>
+
+          <div class="flex flex-row gap-2 gap-1">
+            <Textbox class="bg-base-500 w-[240px]" placeholder="Search..." clearable="1"
+                     v-model="preset.search"
+                     @clear="delete preset.search; load()"
+                     @keyup.enter="load">
+              <template #start>
+                <div class="p-2 pr-0">
+                  <svg width="16" height="16" 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 v-if="$slots.gridItem" class="grid grid-cols-2 gap-[1px]">
+              <Radio v-model="preset.view"
+                     name="view"
+                     value="table"
+                     :custom="true"
+                     class="p-3 rounded-lg rounded-r-none"
+                     :class="preset.view === 'table' ? 'bg-primary-500' : 'bg-base-500'">
+                <svg width="16" height="16" :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-3 bg-base-500 rounded-lg rounded-l-none"
+                     :class="preset.view === 'grid' ? 'bg-primary-500' : 'bg-base-500'">
+                <svg width="16" height="16" :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>
-      </template>
-    </VirtualGrid>
 
-    <PresetSelector ref="presetSelector" :config="config" @select="load" />
+          <slot name="toolbar2"></slot>
+
+        </div>
+      </slot>
+
+      <VirtualTable v-if="presetView === 'table'"
+                    :columns="columns"
+                    class="flex-1"
+                    :items="users.items"
+                    @scroll-end="loadNext">
+
+        <template v-for="(_, slot) in contentSlots" #[slot]="{ item, index }">
+          <slot :name="slot" :item="item" :index="index"></slot>
+        </template>
+
+      </VirtualTable>
+
+      <VirtualGrid v-else-if="presetView === 'grid'"
+                   :items="users.items"
+                   :column="computedGridColumn"
+                   class="flex-1"
+                   @scroll-end="loadNext"
+                   container-class="gap-5"
+                   :config="config">
+        <template #item="{ item }">
+          <slot name="gridItem" :item="item">
+            <div class="flex flex-row bg-base-400 rounded-lg overflow-hidden">
+              <div>
+                <Image :src="item.imageUrl" class="bg-text-50 w-[64px] h-[64px]" />
+              </div>
+              <div class="flex-1 p-3">
+                <strong>{{ item.name }}</strong>
+              </div>
+            </div>
+          </slot>
+        </template>
+      </VirtualGrid>
+
+      <PresetSelector ref="presetSelector" :config="config" @select="load" />
 
+    </div>
   </div>
+
 </template>
 
 <script>
@@ -95,20 +109,18 @@ import throttle from "lodash/throttle";
 import PresetSelector from "../widgets/PresetSelector.vue";
 
 export default{
-  components: {PresetSelector, VirtualTable},
-
-  inject: [ 'socket', 'toast' ],
 
   props: {
-
     config: {
       type: Object,
       default: {}
     },
-
     presetKey: String,
     subscribeKey: String,
     src: undefined,
+    title: String,
+    view: String,
+    gridColumn: [ Number, String ],
   },
 
   methods: {
@@ -153,6 +165,14 @@ export default{
       return new Promise(resolve => resolve())
     },
 
+    selectPreset(idx){
+      if(this.config.presets[idx]){
+        this.config.presetIdx = idx
+        this.load()
+        this.$refs.presetSelector.close()
+      }
+    },
+
     savePreset: throttle(function() {
       if(this.presetKey) {
         this.socket.send('user.preset',
@@ -160,6 +180,10 @@ export default{
       }
     }, 1000, { leading:true }),
 
+    openPresetSelector(){
+      this.$refs.presetSelector.open()
+    },
+
     onSignal(event, items){
 
       switch(event){
@@ -172,14 +196,21 @@ export default{
           this.socket.send(this.src, {
             id: items.map(item => item.id)
           })
-            .then(({ items }) => items.forEach(item => this.$util.push(this.users.items, item)))
+              .then(({ items }) => items.forEach(item => this.$util.push(this.users.items, item)))
 
       }
     },
 
   },
 
+
+  components: {PresetSelector, VirtualTable},
+
+  inject: [ 'socket', 'toast' ],
+
   mounted() {
+    this.$addResizeListener(this.$el, () => this.compPrefix = this.$util.calculateMediaPrefix(this.$el.clientWidth))
+
     this.loadPreset()
         .then(() => {
 
@@ -206,6 +237,8 @@ export default{
   },
 
   unmounted() {
+    this.$removeResizeListener(this.$el)
+
     if(this.subscribeKey) {
       this.socket.send('user.unsubscribe', {name: this.subscribeKey})
       this.socket.off(this.subscribeKey, this.onSignal)
@@ -215,7 +248,7 @@ export default{
   computed: {
 
     columns(){
-      return this.config.columns
+      return this.preset.columns ?? this.config.columns
     },
 
     contentSlots(){
@@ -227,10 +260,18 @@ export default{
       return slots
     },
 
+    computedGridColumn(){
+      return this.gridColumn ?? 3
+    },
+
     preset(){
       return ((this.config ?? {}).presets ?? [])[(this.config ?? {}).presetIdx ?? 0] ?? {}
     },
 
+    presetView(){
+      return this.view ?? this.preset.view
+    },
+
   },
 
   data(){
@@ -240,6 +281,8 @@ export default{
       users: {
         itemsPerPage: 15,
       },
+      observer: null,
+      compPrefix: '',
     }
   },
 
@@ -260,8 +303,5 @@ export default{
 
 <style module>
 
-.comp{
-
-}
 
 </style>

package/src/components/ListItem.vue

@@ -104,8 +104,6 @@ export default{
 				this.dragItem = this.dragItem.parentNode
 			}
 
-      console.log()
-
 			this.startIdx = [ ...this.$refs.container.children ].indexOf(this.dragItem)
 			this.targetIdx = -1
 

package/src/components/ObjectTree.vue

@@ -34,7 +34,7 @@ export default{
 
   props: {
 
-    valueKey: String,
+    valueKey: [ String, Number ],
     value: Object,
     store: Object,
 

package/src/components/PresetSelectorFilterItem.vue

@@ -0,0 +1,85 @@
+<template>
+  <div v-if="type === 'date'" class="flex flex-row gap-2">
+    <div class="flex-1 flex flex-row gap-2">
+      <Dropdown v-model="value.operator"
+                :class="value.operator !== 'between' && (value.operator ?? '').length >= 5 ? 'w-[200px]' : 'w-[100px]'">
+        <option value="=">=</option>
+        <option value=">">&gt;</option>
+        <option value=">=">&gt;=</option>
+        <option value="<">&lt;</option>
+        <option value="<=">&lt;=</option>
+        <option value="between">Between</option>
+        <option value="yesterday">Yesterday</option>
+        <option value="today">Today</option>
+        <option value="thisWeek">This Week</option>
+        <option value="thisMonth">This Month</option>
+        <option value="thisYear">This Year</option>
+      </Dropdown>
+      <Datepicker class="w-[150px]" mode="popup" v-model="value.value" />
+      <Datepicker v-if="value.operator === 'between'" class="w-[150px]" mode="popup" v-model="value.value2" />
+      <button v-if="index >= 1" type="button" class="p-1" @click="$emit('remove')">
+        <svg width="14" height="14" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>
+      </button>
+    </div>
+  </div>
+
+  <div v-else-if="type === 'number'" class="flex flex-row gap-2">
+    <Dropdown v-model="value.operator" class="w-[100px]">
+      <option value="=">=</option>
+      <option value=">">&gt;</option>
+      <option value=">=">&gt;=</option>
+      <option value="<">&lt;</option>
+      <option value="<=">&lt;=</option>
+      <option value="in">Multiple with comma</option>
+      <option value="notIn">Except with comma</option>
+    </Dropdown>
+    <Textbox v-model="value.value" />
+  </div>
+
+  <div v-else-if="type === 'boolean'" class="flex flex-row gap-2">
+    <Radio :name="value.key" :value="true" v-model="value.value">True</Radio>
+    <Radio :name="value.key" :value="false" v-model="value.value">False</Radio>
+  </div>
+
+  <div v-else class="flex flex-row gap-2">
+    <Dropdown v-model="value.operator" class="w-[100px]">
+      <option value="eq">Equal</option>
+      <option value="not">Not Equal</option>
+      <option value="startsWith">Starts With</option>
+      <option value="endsWith">Ends With</option>
+      <option value="contains">Contains</option>
+      <option value="notContains">Not Contains</option>
+      <option value="in">Multiple with comma</option>
+      <option value="notIn">Except with comma</option>
+      <option value="regex">Regex</option>
+    </Dropdown>
+    <Textbox v-model="value.value" />
+  </div>
+
+</template>
+
+<script>
+
+export default{
+
+  emits: [ 'remove' ],
+
+  props: {
+
+    index: Number,
+    type: String,
+    value: Object,
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/TextWithTag.vue

@@ -189,13 +189,13 @@ export default{
 }
 
 .comp .tag{
-  @apply bg-primary text-white p-1 rounded-lg whitespace-nowrap relative top-[-1px];
-  @apply font-mono text-xs;
+  @apply bg-text-100 p-1 rounded-lg whitespace-nowrap relative top-[-1px];
+  @apply font-mono text-sm;
 }
 
 .tag2{
   @apply bg-text-50 p-1 rounded-lg px-2 cursor-pointer;
-  @apply hover:bg-primary hover:text-white;
+  @apply hover:bg-text-100 hover:text-white;
 }
 
 .noScrollbar::-webkit-scrollbar{