@mixd-id/web-scaffold 0.2.240706 → 0.2.250801010

package/src/components/List.vue

@@ -1,24 +1,20 @@
 <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">
 
       <div v-if="computedPresetMode === 'sidebar' && sidebar.open"
-           class="relative flex flex-col border-r-[1px] border-text-50 panel-400"
+           class="relative flex flex-col border-r-[1px] border-border-50"
            :style="sidebarStyle">
 
         <PresetBar :config="cConfig"
-                   :presets="presets"
-                   :shared-presets="sharedPresets"
                    class="flex-1"
-                   :can-share="!!sharingSrc"
-                   :sharing-src="sharingSrc"
-                   :remove-sharing-src="removeSharingSrc"
                    :enumCache="enumCache"
-                   @duplicate="duplicate"
-                   @remove="removePreset"
-                   @remove-shared="removeShared"
+                   :controller="controller"
+                   :preset-key="presetKey"
+                   :use-assistant="useAssistant"
                    @apply="load">
 
           <template #toolbar>
@@ -34,40 +30,40 @@
              @mousedown="(e) => $util.dragResize(e, resize1)"></div>
       </div>
 
-      <div class="flex-1 flex flex-col" v-if="preset">
+      <div v-if="preset" class="flex-1 flex flex-col relative">
 
         <div class="flex-1 flex flex-col" :class="containerClass">
           <slot name="head"
                 :preset="preset"
                 :presetSelector="$refs.presetSelector"
                 :compPrefix="compPrefix">
-            <div class="flex flex-col md:flex-row gap-3 md:items-start overflow-hidden leading-tight p-3 md:p-0 md:pl-3 panel-400 md:panel-none border-b-[1px] border-text-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 md:gap-3 py-1 md:py-0">
+                <slot name="left"></slot>
 
-              <div class="flex md:flex-1 flex-row items-start gap-3">
-
-                <div class="flex flex-row gap-2 md:gap-3 items-center" ref="title">
+                <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" @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">
-                        <h5 class="whitespace-nowrap relative top-[-2px] text-ellipsis overflow-hidden group-hover:text-primary">
-                          {{ preset.params.name ?? 'Preset Name' }}
-                        </h5>
+                        <h3 class="whitespace-nowrap relative text-ellipsis overflow-hidden group-hover:text-primary">
+                          {{ preset.name ?? 'Preset Name' }}
+                        </h3>
                         <svg width="13" height="13" class="fill-text group-hover:fill-primary relative top-[-1px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
                       </div>
                     </div>
-                    <ContextMenu ref="contextMenu" class="panel-400">
-                      <div class="flex flex-col min-w-[300px] divide-y divide-text-50">
+                    <ContextMenu ref="contextMenu" class="bg-base-300 mt-4">
+                      <div class="flex flex-col min-w-[280px] max-w-[400px] p-1">
 
-                        <div class="p-3 flex flex-col gap-1 bg-base-300">
-                          <button v-for="(preset, idx) in presets"
+                        <div class="flex flex-col gap-1 bg-base-300">
+                          <button v-for="(preset, idx) in configPresets"
                                   class="p-2 px-5 text-left flex flex-row items-center rounded-md"
-                                  :class="cConfig.params.presetIdx === preset.uid ? 'bg-primary-200 text-white' : 'hover:bg-primary-100'"
+                                  :class="configParams.presetIdx === preset.uid ? 'bg-primary-200 text-white' : 'hover:bg-primary-100'"
                                   type="button"
-                                  @click="selectPreset(preset.uid)">
-                            <label class="flex-1 pr-12">
-                              {{ preset.params.name }}
+                                  @click="selectPreset(idx)">
+                            <label class="flex-1 pr-12 text-ellipsis-nowrap">
+                              {{ preset.name }}
                             </label>
                             <div class="p-1">
                               <div v-if="idx < 10"
@@ -78,8 +74,10 @@
                           </button>
                         </div>
 
+                        <div class="my-2 h-[1px] bg-border-50"></div>
+
                         <div class="px-3">
-                          <button type="button" class="text-primary p-5 text-left w-full" @click="openPreset">Edit</button>
+                          <button type="button" class="text-primary p-3 text-left w-full" @click="openPreset">Edit</button>
                         </div>
 
                       </div>
@@ -87,61 +85,76 @@
                   </div>
                 </div>
 
+                <slot name="left-toolbar"></slot>
+
                 <div class="flex-1"></div>
 
-                <slot name="toolbar"></slot>
+                <slot name="toolbar">
+                </slot>
+
+                <slot name="right-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..."
+                             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 flex-row gap-2 gap-1" v-if="Boolean(toolbar)">
-                <Textbox class="flex-1 md:w-[240px]" placeholder="Search..." clearable="1"
+            </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="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>
+                      <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 v-if="$slots.gridItem"
-                     class="hidden md:grid grid-cols-2 gap-[1px] border-[1px] border-text-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>
-
-            </div>
-          </slot>
+            </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>
             </div>
 
-            <div v-else-if="presetView === 'table' || pivotEnabled" class="flex-1 flex" :class="pivotEnabled ? 'p-3 panel-400 md:p-0' : ''">
+            <div v-else-if="presetView === 'table' || pivotEnabled" class="flex-1 flex flex-col" :class="pivotEnabled ? 'p-3 bg-base-400 md:p-0' : ''">
               <VirtualTable
                   ref="table"
                   :columns="columns"
-                  class="flex-1 rounded-lg panel-400"
-                  :items="data.items"
+                  class="flex-1"
+                  :items="dataItems"
                   :enumCache="enumCache"
+                  :freeze-left="freezeLeft"
+                  :item-class="itemClass"
+                  @freeze="freeze"
+                  @unfreeze="unfreeze"
                   @scroll-end="loadNext"
-                  @item-click="onTableItemClick">
+                  @item-click="onTableItemClick"
+                  @dragover="(...args) => $emit('dragover', ...args)">
 
                 <template v-for="(_, slot) in headerSlots" #[slot]="{ item, index }">
                   <div :class="getHeader(slot.replace('col-', ''))">
@@ -149,13 +162,13 @@
                   </div>
                 </template>
 
-                <template v-for="(_, slot) in contentSlots" #[slot]="{ item, index }">
-                  <slot :name="slot" :item="item" :index="index"></slot>
+                <template v-for="(_, slot) in contentSlots" #[slot]="{ column, item, index, selected }">
+                  <slot :name="slot" :item="item" :index="index" :selected="selected" :column="column"></slot>
                 </template>
 
                 <template #end>
-                  <div v-if="data?.hasNext" class="flex justify-center p-3">
-                    <svg v-if="readyState === 4" class="animate-spin aspect-square w-[14px] h-[14px] fill-text-300" 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>
+                  <div v-if="data?.hasNext" class="flex justify-center pt-3 pb-5">
+                    <svg v-if="readyState === 4" class="animate-spin w-[21px] h-[21px]" 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>
                     <button v-else type="button" class="text-text-300" @click="loadNext()">
                       {{ $t('Load More' )}}
                     </button>
@@ -172,10 +185,10 @@
                          :class="gridClass"
                          @scroll-end="loadNext"
                          :container-class="`${gridContainerClass}`"
-                         :config="config">
+                         :config="cConfig">
               <template #item="{ item }">
                 <slot name="gridItem" :item="item" :enumCache="enumCache" :getEnumText="getEnumText">
-                  <div class="flex flex-row panel-400 rounded-lg overflow-hidden md:rounded-lg overflow-hidden p-3 gap-3">
+                  <div class="flex flex-row bg-base-400 rounded-lg md:rounded-lg overflow-hidden p-3 gap-3">
                     <div>
                       <Image :src="item.imageUrl" class="bg-text-50 w-[64px] h-[64px] rounded-lg" />
                     </div>
@@ -197,12 +210,12 @@
               </template>
             </VirtualGrid>
 
-            <PresetSelector ref="presetSelector" :config="config" @select="load" />
+            <PresetSelector ref="presetSelector" :config="cConfig" @select="load" />
           </div>
         </div>
 
         <div v-if="extBar.open && pivotEnabled"
-             :style="extStyle" class="border-t-[1px] border-text-50 flex flex-col relative md:p-5">
+             :style="extStyle" class="border-t-[1px] border-border-50 flex flex-col relative md:p-5">
 
           <div v-if="readyState === 3" 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>
@@ -210,8 +223,8 @@
 
           <VirtualTable v-else-if="presetView === 'table'"
                         ref="table"
-                        :columns="preset.params.columns"
-                        class="flex-1 rounded-lg panel-400"
+                        :columns="preset.columns"
+                        class="flex-1 bg-base-400"
                         :items="data.extItems"
                         :enumCache="enumCache"
                         @scroll-end="loadExtNext">
@@ -235,10 +248,10 @@
                        :class="gridClass"
                        @scroll-end="loadExtNext"
                        :container-class="`${gridContainerClass}`"
-                       :config="config">
+                       :config="cConfig">
             <template #item="{ item }">
               <slot name="gridItem" :item="item" :getEnumText="getEnumText">
-                <div class="flex flex-row panel-400 rounded-lg overflow-hidden md:rounded-lg overflow-hidden p-3 gap-3">
+                <div class="flex flex-row bg-base-400 rounded-lg md:rounded-lg overflow-hidden p-3 gap-3">
                   <div>
                     <Image :src="item.imageUrl" class="bg-text-50 w-[64px] h-[64px] rounded-lg" />
                   </div>
@@ -278,145 +291,69 @@ 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 {invokeAfterIdle} from "../utils/helpers.mjs";
+import {invokeAfterIdle, queueForLater} from "../utils/helpers.mjs";
 
 export default{
 
-  components: {PresetBar, PresetSelector, VirtualGrid, VirtualTable},
+  emits: [ 'dragover', 'after-load', 'open-preset', 'signal', 'pivot-item-click' ],
 
-  computed: {
-
-    columns(){
-      if((this.preset?.params.pivot ?? {}).enabled){
-        return this.preset.params.pivot.columns ?? []
-      }
-
-      for(let idx in this.preset?.columns){
-        if(this.preset.params.columns[idx].defaultFormat){
-          this.preset.params.columns[idx].format = this.preset.params.columns[idx].defaultFormat
-          delete this.preset.params.columns[idx].defaultFormat
-        }
-      }
-
-      return this.preset?.params.columns
-    },
+  inject: [ 'useSocket', 'toast' ],
 
-    contentSlots(){
-      const slots = {}
-      for(let key in this.$slots){
-        if(!key.startsWith('col-'))
-          slots[key] = this.$slots[key]
-      }
-      return slots
-    },
-
-    headerSlots(){
-      const slots = {}
-      for(let key in this.$slots){
-        if(key.startsWith('col-'))
-          slots[key] = this.$slots[key]
-      }
-      return slots
-    },
-
-    computedGridColumn(){
-      return this.$device.type === 'mobile' ? 1 :
-          (this.gridColumn ?? 3)
-    },
-
-    computedPresetMode(){
-      return this.$device.type === 'mobile' ? 'popup' : this.presetMode
+  props: {
+    config: Object,
+    defaultConfig: Function,
+    presetKey: String,
+    subscribeKey: String,
+    controller: String,
+    title: String,
+    updateInterval: {
+      type: Number,
+      default: 1200
     },
 
-    dataItems(){
-      if((this.preset.sorts ?? []).length > 0){
-        return (this.data.items ?? []).sort((a, b) => {
-          return sortsFn(a, b, this.preset.sorts, 0)
-        })
-      }
-      else{
-        return this.data.items ?? []
+    src: undefined,
+    view: {
+      type: String,
+      validator(value) {
+        return ['grid', 'table'].includes(value)
       }
     },
-
-    preset(){
-      return this.presets[0]
-    },
-
-    presets(){
-      return (this.cConfig?.presets ?? [])
-    },
-
-    presetView(){
-      if(!this.preset.view)
-        this.preset.view = 'table'
-
-      return this.$device.type === 'mobile' ? 'grid' :
-          (this.view ?? this.preset.view)
+    gridColumn: [ Number, String ],
+    gridClass: {
+      type: String,
+      default: "flex-1 md:p-3"
     },
-
-    sidebar(){
-      if(!this.cConfig.sidebar || !('open' in this.cConfig.sidebar))
-        this.cConfig.sidebar = {
-          open: false,
-          width: 270
-        }
-
-      return this.cConfig.sidebar
+    gridContainerClass: {
+      type: String,
+      default: "md:gap-5"
     },
-
-    sidebarStyle(){
-      return {
-        width: !this.sidebar.open ? 0 : this.sidebar.width + 'px'
-      }
+    headerClass: String,
+    presetMode: {
+      type: String,
+      default: "sidebar"
     },
-
-    extBar(){
-      if(!this.cConfig.extbar)
-        this.cConfig.extbar = {
-          open: false,
-          height: Math.round(window.innerHeight / 2.2)
-        }
-
-      return this.cConfig.extbar
+    containerClass: {
+      type: String,
+      default: "md:p-8 md:gap-5"
     },
-
-    extStyle(){
-      return {
-        height: this.extBar.height + "px"
-      }
+    itemClass: String,
+    toolbar: {
+      type: [ String, Boolean ],
+      default: true
     },
-
-    pivotEnabled(){
-      return ((this.preset ?? {}).pivot ?? {}).enabled
+    sorts: [ Array, Function ],
+    itemsFn: Function,
+    onSignalFn: Function,
+    searchable: {
+      type: undefined,
+      default: true
     },
-
-    cConfig(){
-      return this.config ?? this._config
+    useAssistant: {
+      type: undefined,
+      default: false
     }
-
   },
 
-  data(){
-    return {
-      readyState: 0,
-      data: {
-        itemsPerPage: 16,
-      },
-      observer: null,
-      compPrefix: '',
-      enumCache: {},
-      extItems: null,
-      lastEnumItems: null,
-
-      _config: {}
-    }
-  },
-
-  emits: [ 'after-load', 'open-preset', 'signal', 'pivot-item-click' ],
-
-  inject: [ 'socket', 'toast' ],
-
   methods: {
 
     calcItemsPerPage(){
@@ -427,10 +364,6 @@ export default{
 
     },
 
-    duplicate(){
-      this.saveConfig(false, true)
-    },
-
     getEnumText(key, value){
 
       let enumText
@@ -460,25 +393,26 @@ export default{
     },
 
     load(){
-      if(this.src && this.preset){
-        if(!this.preset.params.columns){
-          this.preset.params.columns = JSON.parse(JSON.stringify(this.config.params.columns))
+      if(this.computedSrc){
+        if(!this.preset?.columns){
+          this.preset.columns = JSON.parse(JSON.stringify(this.cConfig.columns))
         }
 
         this.readyState = 2
-        return this.socket.send(this.src, {
-          ...this.preset.params,
+        return this.useSocket().send(this.computedSrc, {
+          ...this.preset,
+          id: undefined,
+          uid: undefined,
           itemsPerPage: this.data.itemsPerPage,
         })
             .then(data => {
-              generatePivotColumns(this.preset, data.items)
-              generateTotalColumns(this.preset, data.items)
-              this.loadEnums(data.items)
-              Object.assign(this.data, data ?? {})
-              this.$emit('after-load')
-            })
-            .catch(err => {
-              this.toast(err)
+              if(data?.items){
+                generatePivotColumns(this.preset, data.items)
+                generateTotalColumns(this.preset, data.items)
+                Object.assign(this.data, data ?? {})
+                this.loadEnums(this.dataItems)
+                this.$emit('after-load')
+              }
             })
             .finally(_ => this.readyState = 1)
       }
@@ -486,19 +420,27 @@ export default{
     },
 
     loadNext(){
-      if(this.src &&
+      if(this.computedSrc && this.readyState !== 4 &&
           ((this.data ?? {}).hasNext !== false) &&
-          !(this.preset.pivot ?? {}).enabled) {
+          !(this.preset.pivot ?? {}).enabled &&
+          this.dataItems) {
+
+        const afterItem = this.dataItems[this.dataItems.length - 1]
 
         this.readyState = 4
-        this.socket.send(this.src, {
+        this.useSocket().send(this.computedSrc, {
           ...this.preset,
+          id: undefined,
+          uid: undefined,
           itemsPerPage: this.data.itemsPerPage,
-          afterItem: this.data.items[this.data.items.length - 1],
+          afterItem,
         })
             .then(data => {
-              this.data.items.push(...data.items)
               this.loadEnums(data.items)
+                .then(() => {
+                  this.data.items.push(...data.items)
+                  this.data.hasNext = data.hasNext
+                })
             })
             .catch(err => this.toast(err))
             .finally(_ => this.readyState = 1)
@@ -506,10 +448,60 @@ export default{
       return new Promise(resolve => resolve())
     },
 
-    loadEnums(items){
+    async loadPreset(){
+      if(!Object.keys(this.$route.query).map(_ => _.toLowerCase()).includes('reset')){
+        if(this.presetKey){
+          const config = await this.useSocket().send(this.presetSrc, { key:this.presetKey })
+          if(config){
+            if((config.presets ?? []).length > 0){
+              Object.assign(this.cConfig, config)
+            }
+            else{
+              const defaultConfig = setupConfig(await this.defaultConfig())
+              Object.assign(this.cConfig, defaultConfig)
+            }
 
-      for(let i in this.preset.params.columns){
-        const column = this.preset.params.columns[i]
+            if(this.$route.query?.search)
+              this.preset.search = this.$route.query.search
+          }
+          else{
+            const defaultConfig = setupConfig(typeof this.defaultConfig === 'function' ? await this.defaultConfig() : {})
+            Object.assign(this.cConfig, defaultConfig)
+          }
+        }
+        else{
+          const defaultConfig = setupConfig(typeof this.defaultConfig === 'function' ? await this.defaultConfig() : {})
+          Object.assign(this.cConfig, defaultConfig)
+
+          return new Promise(resolve => resolve())
+        }
+      }
+      else{
+        if(this.defaultConfig){
+          const defaultConfig = setupConfig(await this.defaultConfig())
+          Object.assign(this.cConfig, defaultConfig)
+        }
+
+        return new Promise((resolve) => {
+          const query = {}
+          for(let key in this.$route.query){
+            if(key.toLowerCase() !== 'reset')
+              query[key] = this.$route.query[key]
+          }
+          this.$router.replace({
+            ...this.$route,
+            query
+          })
+
+          resolve()
+        })
+      }
+    },
+
+    async loadEnums(items){
+      if(!items) return
+
+      return Promise.all((this.preset.columns ?? []).map(async column => {
 
         if(column.enumSrc) {
 
@@ -527,7 +519,7 @@ export default{
           if(reqItems.length > 0 && reqItems !== this.lastEnumItems){
 
             const [ src, key, attr ] = column.enumSrc.split(':')
-            this.socket.send(src, {
+            const res = await this.useSocket().send(src, {
               columns: [
                 { key:attr, visible:true }
               ],
@@ -536,35 +528,35 @@ export default{
                   key:key, value: [ { operator:'in', value:reqItems } ]
                 }
               ]
+            });
+
+            (res.items ?? []).forEach(_ => {
+              this.enumCache[column.key][_[key]] = {
+                text: _[attr] ?? _[key],
+                value: _[key],
+              }
             })
-                .then(res => {
-                  (res.items ?? []).forEach(_ => {
-                    this.enumCache[column.key][_[key]] = {
-                      text: _[attr] ?? _[key],
-                      value: _[key],
-                    }
-                  })
 
-                  for(let key in this.enumCache[column.key]){
-                    if(!this.enumCache[column.key][key].text)
-                      this.enumCache[column.key][key].text = key
-                  }
+            for(let key in this.enumCache[column.key]){
+              if(!this.enumCache[column.key][key].text)
+                this.enumCache[column.key][key].text = key
+            }
 
-                  this.lastEnumItems = reqItems
-                })
-                .catch(err => this.log('Load enums error', err))
+            this.lastEnumItems = reqItems
           }
         }
-      }
 
+      }))
     },
 
     loadExt(){
       if(!this.extBar.open) return
 
       this.readyState = 3
-      return this.socket.send(this.src, {
+      return this.useSocket().send(this.computedSrc, {
         ...this.preset,
+        id: undefined,
+        uid: undefined,
         filters: [
           ...(this.preset.filters ?? []),
           ...(this.extBar.filters ?? [])
@@ -580,8 +572,10 @@ export default{
     loadExtNext(){
       if(!this.preset.filters) return
 
-      return this.socket.send(this.src, {
+      return this.useSocket().send(this.computedSrc, {
         ...this.preset,
+        id: undefined,
+        uid: undefined,
         filters: [
           ...(this.preset.filters ?? []),
           ...(this.extBar.filters ?? [])
@@ -596,82 +590,27 @@ export default{
     },
 
     resize1(w){
-      if(this.cConfig.sidebar.width + w >= 270 && this.cConfig.sidebar.width + w <= 600){
-        this.cConfig.sidebar.width += w
+      if(this.sidebar.width + w >= 200 && this.sidebar.width + w <= 600){
+        this.sidebar.width += w
       }
     },
 
-    selectPreset(uid){
-      const preset = this.presets.find(_ => _.uid === uid)
-
-      if(preset){
-        this.cConfig.presetIdx = uid
+    selectPreset(idx){
+      if(this.configPresets[idx]){
+        this.configParams.presetIdx = this.configPresets[idx].uid
         this.load()
-        this.$refs.presetSelector.close()
-        this.$refs.contextMenu.close()
+        this.$refs.presetSelector?.close()
+        this.$refs.contextMenu?.close()
       }
     },
 
-    async loadDefaultConfig(save = false){
-      if(typeof this.defaultConfig !== 'function') return
-
-      this._config = setupConfig(JSON.parse(JSON.stringify((await this.defaultConfig()).default)))
-
-      if(save)
-        this.saveConfig()
-    },
-
-    async loadConfig(){
-      if(!this.presetKey || !this.presetSrc) return
-
-      if(Object.keys(this.$route.query).map(_ => _.toLowerCase()).includes('reset')){
-        await this.loadDefaultConfig(true)
-
-        this.$router.replace({ query: {
-          ...this.$route.query,
-          reset: undefined
-        }})
-      }
-      else{
-        return this.socket.send(this.presetSrc, { key:this.presetKey })
-            .then(async (config) => {
-              !config ?
-                await this.loadDefaultConfig() :
-                this._config = config
-            })
-            .catch(() => {})
+    savePreset: invokeAfterIdle(function() {
+      if(this.presetKey) {
+        this.useSocket().send(this.presetSrc,
+            {key: this.presetKey, config: this.cConfig})
       }
-    },
-
-    saveConfig: invokeAfterIdle(function(){
-      if(!this.presetKey || !this.presetSrc) return
-
-      return this.socket.send(this.presetSrc, {
-          key:this.presetKey,
-          config: this.cConfig
-        })
-        .catch(() => {})
     }),
 
-    async removePreset(preset){
-      return this.socket.send(this.presetSrc, {
-          key: this.presetKey,
-          removePreset: preset
-        })
-        .catch(() => {})
-    },
-
-    async removeShared(uid){
-      return this.socket.send(this.presetSrc, {
-          key: this.presetKey,
-          removeShared: [ uid ]
-        })
-          .then(_ => {
-            this.sharedPresets.splice(this.sharedPresets.findIndex(_ => _.uid === uid), 1)
-          })
-          .catch(() => {})
-    },
-
     openPreset(){
 
       switch(this.computedPresetMode){
@@ -704,30 +643,71 @@ export default{
       }
     },
 
-    onSignal(event, items){
-      if(this.pivotEnabled) return
-      if(!Array.isArray(items) || items.length < 1) return
+    sortItems(items){
 
-      switch(event){
+      if(typeof this.sorts === 'function'){}
+      else if((this.sorts ?? []).length > 0){
+        return (items ?? []).sort((a, b) => {
+          return sortsFn(a, b, this.sorts, 0)
+        })
+      }
+      else if((this.preset.sorts ?? []).length > 0){
+        return (items ?? []).sort((a, b) => {
+          return sortsFn(a, b, this.preset.sorts, 0)
+        })
+      }
+      return items
 
-        case 'destroy':
-          this.$util.remove(this.data.items, items)
-          break
+    },
 
-        default:
-          const key = items[0] && items[0].uid ? 'uid' : 'id'
+    loadQueued(items){
+      const key = items[0] && items[0].uid ? 'uid' : 'id'
+
+      this.useSocket().send(this.computedSrc, {
+        ...this.preset,
+        id: undefined,
+        uid: undefined,
+        [key]: items.map(item => item[key]),
+        _signal: true
+      })
+          .then(({ items:nextItems }) => {
+
+            const destroyedItems = items.filter(_ => !nextItems.find(i => i[key] === _[key]))
+            this.$util.remove(this.data.items, destroyedItems)
+
+            let currentFirstItem = this.dataItems[0]
+            const sortedItems = this.sortItems([
+              ...nextItems,
+              currentFirstItem
+            ]
+                .filter(_ => _))
+
+            for(let item of sortedItems){
+              if(item === currentFirstItem) break
+              this.$util.unshift(this.data.items, item, { highlight: true })
+            }
 
-          this.socket.send(this.src, {
-            ...this.preset,
-            [key]: items.map(item => item[key])
           })
-              .then(({ items:nextItems }) => {
-                nextItems.forEach(item => this.$util.unshift(this.data.items, item, { highlight: true }))
+    },
 
-                const destroyedItems = items.filter(_ => !nextItems.find(i => i[key] === _[key]))
-                this.$util.remove(this.data.items, destroyedItems)
-              })
-          break
+    onSignal(event, items){
+      if(this.pivotEnabled) return
+      if(!Array.isArray(items) || items.length < 1) return
+
+      if(typeof this.onSignalFn === 'function'){
+        this.onSignalFn(event, items)
+      }
+      else{
+        switch(event){
+
+          case 'destroy':
+            this.$util.remove(this.data.items, items)
+            break
+
+          default:
+            this.queue(items)
+            break
+        }
       }
 
       this.$emit('signal', event, items)
@@ -741,7 +721,7 @@ export default{
         for(let idx in this.preset.pivot.rows){
           const pivotRow = this.preset.pivot.rows[idx]
           const key = pivotRow.key
-          const presetColumn = this.preset.params.columns.find(_ => _.key === key)
+          const presetColumn = this.preset.columns.find(_ => _.key === key)
           let value = item[pivotRow.key]
           switch(presetColumn.type){
 
@@ -826,7 +806,7 @@ export default{
         if(![ 'count', 'countDistinct', 'sum' ].includes(vv)){
 
           const key = kk.substring(1)
-          const presetColumn = this.preset.params.columns.find(_ => _.key === key)
+          const presetColumn = this.preset.columns.find(_ => _.key === key)
           let value = vv
           switch(presetColumn.type){
 
@@ -879,6 +859,12 @@ export default{
       }
     },
 
+    onConnect(reconnect){
+      if(reconnect){
+        this.load()
+      }
+    },
+
     onKeyDown(e){
 
       if(e.altKey){
@@ -892,127 +878,266 @@ export default{
           default:
             if(e.code.startsWith('Digit')){
               const idx = parseInt(e.code.substring(5)) - 1
-              if(this.presets[idx]) {
-                this.selectPreset(this.presets[idx].uid)
+              if(this.configPresets[idx]) {
+                this.selectPreset(idx)
               }
             }
             break
         }
 
       }
-    }
+    },
 
-  },
+    freeze(key){
+      const freezed = this.columns.find(_ => _.freeze)
+      if(freezed){
+        delete freezed.freeze
+      }
 
-  mounted(){
-    this.$addResizeListener(this.$el, () => this.compPrefix = this.$util.calculateMediaPrefix(this.$el.clientWidth))
+      const column = this.columns.find(_ => _.key === key)
+      if(column){
+        column.freeze = true
+      }
+    },
 
-    this.loadConfig()
-        .then(() => {
-          this.readyState = 1
-          this.$nextTick(() => {
-            this.calcItemsPerPage()
-            this.load()
-            this.loadExt()
-          })
+    unfreeze(key){
+
+      const column = this.columns.find(_ => _.key === key)
+      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()
+              })
+            })
+
+        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
         })
 
-    if(this.subscribeKey){
-      this.socket.send('user.subscribe', { name:this.subscribeKey })
-      this.socket.on(this.subscribeKey, this.onSignal)
+        this.useSocket().on('connect', this.onConnect)
+      }
+    },
+
+  },
+
+  components: {PresetBar, PresetSelector, VirtualGrid, VirtualTable},
+
+  unmounted() {
+    this.$removeResizeListener(this.$el)
+    window.removeEventListener('keydown', this.onKeyDown)
+
+    if(this.subscribeKey) {
+      this.useSocket().send('user.unsubscribe', {name: this.subscribeKey})
+      this.useSocket().off(this.subscribeKey, this.onSignal)
     }
 
-    window.addEventListener('keydown', this.onKeyDown)
+    this.useSocket().off('connect', this.onConnect)
   },
 
-  props: {
-    presetKey: String,
-    presetSrc: {
-      type: String,
-      default: 'user.preset'
+  computed: {
+
+    columns(){
+      if((this.preset.pivot ?? {}).enabled){
+        return this.preset.pivot.columns ?? []
+      }
+
+      for(let idx in this.preset.columns){
+        if(this.preset.columns[idx].defaultFormat){
+          this.preset.columns[idx].format = this.preset.columns[idx].defaultFormat
+          delete this.preset.columns[idx].defaultFormat
+        }
+      }
+
+      return this.preset.columns
     },
 
-    subscribeKey: String,
-    src: undefined,
-    title: String,
-    view: {
-      type: String,
-      validator(value) {
-        return ['grid', 'table'].includes(value)
+    cConfig(){
+      return setupConfig(this.config ?? this._config)
+    },
+
+    contentSlots(){
+      const slots = {}
+      for(let key in this.$slots){
+        if(!key.startsWith('col-'))
+          slots[key] = this.$slots[key]
       }
+      return slots
     },
-    gridColumn: [ Number, String ],
-    gridClass: {
-      type: String,
-      default: "flex-1 md:p-3"
+
+    headerSlots(){
+      const slots = {}
+      for(let key in this.$slots){
+        if(key.startsWith('col-'))
+          slots[key] = this.$slots[key]
+      }
+      return slots
     },
-    gridContainerClass: {
-      type: String,
-      default: "md:gap-5"
+
+    computedGridColumn(){
+      return this.$device.type === 'mobile' ? 1 :
+          (this.gridColumn ?? 3)
     },
-    headerClass: String,
-    presetMode: {
-      type: String,
-      default: "sidebar"
+
+    computedPresetMode(){
+      return this.$device.type === 'mobile' ? 'popup' : this.presetMode
     },
-    containerClass: {
-      type: String,
-      default: "md:p-5 md:gap-3"
+
+    dataItems(){
+      const items = this.sortItems(this.data.items)
+
+      if(typeof this.itemsFn === 'function'){
+        return this.itemsFn(this.data.items)
+      }
+
+      return items
     },
-    toolbar: {
-      type: [ String, Boolean ],
-      default: true
+
+    preset(){
+      const preset = this.configPresets.find(_ => _.uid === this.configParams.presetIdx) ??
+          this.configSharedPresets.find(_ => _.uid === this.configParams.presetIdx)
+
+      if(preset){
+        if(this.$route.query?.search)
+          preset.search = this.$route.query.search
+      }
+
+      return preset
     },
 
-    config: Object,
-    defaultConfig: Function,
+    presetSrc(){
+      return this.controller ?
+          `${this.controller}.preset` :
+          'user.preset'
+    },
+
+    presetView(){
+      return this.$device.type === 'mobile' ? 'grid' :
+          (this.view ?? this.preset.view)
+    },
+
+    configParams(){
+      if(!this.cConfig.params)
+        this.cConfig.params = {}
+
+      if(this.configPresets.length > 0 &&
+          (!this.cConfig.params.presetIdx ||
+              !this.configPresets.find(_ => _.uid === this.cConfig.params.presetIdx)))
+        this.cConfig.params.presetIdx = this.configPresets[0].uid
+
+      return this.cConfig.params
+    },
+
+    configPresets(){
+      return this.cConfig.presets ?? []
+    },
+
+    configSharedPresets(){
+      return this.cConfig.sharedPresets ?? []
+    },
+
+    canSearch(){
+      return [ 1, true, 'true' ].includes(this.searchable) // this.preset.columns.some(_ => 'search' in _)
+    },
+
+    sidebar(){
+
+      if(!this.configParams.sidebar || !('open' in this.configParams.sidebar))
+        this.configParams.sidebar = {
+          open: false,
+          width: 360
+        }
+
+      return this.configParams.sidebar
+    },
+
+    sidebarStyle(){
+      return {
+        width: !this.sidebar.open ? 0 : this.sidebar.width + 'px'
+      }
+    },
+
+    extBar(){
+      if(!this.cConfig.extbar)
+        this.cConfig.extbar = {
+          open: false,
+          height: Math.round(window.innerHeight / 2.2)
+        }
+
+      return this.cConfig.extbar
+    },
+
+    extStyle(){
+      return {
+        height: this.extBar.height + "px"
+      }
+    },
+
+    pivotEnabled(){
+      return ((this.preset ?? {}).pivot ?? {}).enabled
+    },
+
+    computedSrc(){
+      return this.src ?? `${this.controller}.load`
+    },
+
+    freezeLeft(){
+      return (this.preset?.columns).findIndex(_ => _.freeze) + 1
+    }
 
-    sharingSrc: String,
-    removeSharingSrc: String,
   },
 
-  provide(){
+  data(){
     return {
-      listStyle: this.$style,
-      emitRoot: () => {}
+      readyState: 0,
+      data: {
+        itemsPerPage: 16,
+      },
+      observer: null,
+      compPrefix: '',
+      enumCache: {},
+      extItems: null,
+      lastEnumItems: null,
+      queue: null,
+      _config: {
+        columns:[],
+        presets:[]
+      }
     }
   },
 
-  unmounted() {
-    this.$removeResizeListener(this.$el)
-    window.removeEventListener('keydown', this.onKeyDown)
-
-    if(this.subscribeKey) {
-      this.socket.send('user.unsubscribe', {name: this.subscribeKey})
-      this.socket.off(this.subscribeKey, this.onSignal)
+  provide(){
+    return {
+      listStyle: this.$style,
+      load: this.load
     }
   },
 
   watch: {
 
-    config(to){
-      this.$nextTick(() => {
-        this.calcItemsPerPage()
-        this.load()
-        this.loadExt()
-      })
-    },
-
     cConfig: {
       deep: true,
-      handler(to, from){
-        if(Object.keys(from ?? {}).length > 0){
-          this.saveConfig()
-        }
-      }
-    },
-
-    preset: {
-      deep: true,
-      handler(to, from){
-        if(to && to.uid === from?.uid){
-
-        }
+      handler(){
+        this.savePreset()
       }
     },