@mixd-id/web-scaffold 0.2.240702 → 0.2.240704

package/src/components/List.vue

@@ -8,9 +8,17 @@
            class="relative flex flex-col border-r-[1px] border-text-50 panel-400"
            :style="sidebarStyle">
 
-        <PresetBar :config="config"
+        <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"
                    @apply="load">
 
           <template #toolbar>
@@ -26,7 +34,7 @@
              @mousedown="(e) => $util.dragResize(e, resize1)"></div>
       </div>
 
-      <div class="flex-1 flex flex-col">
+      <div class="flex-1 flex flex-col" v-if="preset">
 
         <div class="flex-1 flex flex-col" :class="containerClass">
           <slot name="head"
@@ -44,7 +52,7 @@
                       <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.name ?? 'Preset Name' }}
+                          {{ preset.params.name ?? 'Preset Name' }}
                         </h5>
                         <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>
@@ -53,13 +61,13 @@
                       <div class="flex flex-col min-w-[300px] divide-y divide-text-50">
 
                         <div class="p-3 flex flex-col gap-1 bg-base-300">
-                          <button v-for="(preset, idx) in config.presets"
+                          <button v-for="(preset, idx) in presets"
                                   class="p-2 px-5 text-left flex flex-row items-center rounded-md"
-                                  :class="config.presetIdx === idx ? 'bg-primary-200 text-white' : 'hover:bg-primary-100'"
+                                  :class="cConfig.params.presetIdx === preset.uid ? 'bg-primary-200 text-white' : 'hover:bg-primary-100'"
                                   type="button"
-                                  @click="selectPreset(idx)">
+                                  @click="selectPreset(preset.uid)">
                             <label class="flex-1 pr-12">
-                              {{ preset.name }}
+                              {{ preset.params.name }}
                             </label>
                             <div class="p-1">
                               <div v-if="idx < 10"
@@ -120,57 +128,77 @@
             </div>
           </slot>
 
-          <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 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' : ''">
-            <VirtualTable
-                          ref="table"
-                          :columns="columns"
-                          class="flex-1 rounded-lg panel-400"
-                          :items="data.items"
-                          :enumCache="enumCache"
-                          @scroll-end="loadNext"
-                          @item-click="onTableItemClick">
-
-              <template v-for="(_, slot) in headerSlots" #[slot]="{ item, index }">
-                <div :class="getHeader(slot.replace('col-', ''))">
-                  <slot :name="slot" :item="item" :index="index"></slot>
-                </div>
-              </template>
+            <div v-else-if="presetView === 'table' || pivotEnabled" class="flex-1 flex" :class="pivotEnabled ? 'p-3 panel-400 md:p-0' : ''">
+              <VirtualTable
+                  ref="table"
+                  :columns="columns"
+                  class="flex-1 rounded-lg panel-400"
+                  :items="data.items"
+                  :enumCache="enumCache"
+                  @scroll-end="loadNext"
+                  @item-click="onTableItemClick">
+
+                <template v-for="(_, slot) in headerSlots" #[slot]="{ item, index }">
+                  <div :class="getHeader(slot.replace('col-', ''))">
+                    <slot :name="slot" :item="item" :index="index"></slot>
+                  </div>
+                </template>
 
-              <template v-for="(_, slot) in contentSlots" #[slot]="{ item, index }">
-                <slot :name="slot" :item="item" :index="index"></slot>
-              </template>
+                <template v-for="(_, slot) in contentSlots" #[slot]="{ item, index }">
+                  <slot :name="slot" :item="item" :index="index"></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>
+                    <button v-else type="button" class="text-text-300" @click="loadNext()">
+                      {{ $t('Load More' )}}
+                    </button>
+                  </div>
+                </template>
 
-            </VirtualTable>
-          </div>
+              </VirtualTable>
+            </div>
 
-          <VirtualGrid v-else-if="presetView === 'grid'"
-                       ref="grid"
-                       :items="dataItems"
-                       :column="computedGridColumn"
-                       :class="gridClass"
-                       @scroll-end="loadNext"
-                       :container-class="`${gridContainerClass}`"
-                       :config="config">
-            <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>
-                    <Image :src="item.imageUrl" class="bg-text-50 w-[64px] h-[64px] rounded-lg" />
-                  </div>
-                  <div class="flex-1 flex flex-col leading-tight">
-                    <small>{{ item.code }}</small>
-                    <strong>{{ item.name }}</strong>
+            <VirtualGrid v-else-if="presetView === 'grid'"
+                         ref="grid"
+                         :items="dataItems"
+                         :column="computedGridColumn"
+                         :class="gridClass"
+                         @scroll-end="loadNext"
+                         :container-class="`${gridContainerClass}`"
+                         :config="config">
+              <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>
+                      <Image :src="item.imageUrl" class="bg-text-50 w-[64px] h-[64px] rounded-lg" />
+                    </div>
+                    <div class="flex-1 flex flex-col leading-tight">
+                      <small>{{ item.code }}</small>
+                      <strong>{{ item.name }}</strong>
+                    </div>
                   </div>
+                </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>
+                  <button v-else type="button" class="text-text-300" @click="loadNext()">
+                    {{ $t('Load More' )}}
+                  </button>
                 </div>
-              </slot>
-            </template>
-          </VirtualGrid>
+              </template>
+            </VirtualGrid>
 
-          <PresetSelector ref="presetSelector" :config="config" @select="load" />
+            <PresetSelector ref="presetSelector" :config="config" @select="load" />
+          </div>
         </div>
 
         <div v-if="extBar.open && pivotEnabled"
@@ -182,7 +210,7 @@
 
           <VirtualTable v-else-if="presetView === 'table'"
                         ref="table"
-                        :columns="preset.columns"
+                        :columns="preset.params.columns"
                         class="flex-1 rounded-lg panel-400"
                         :items="data.extItems"
                         :enumCache="enumCache"
@@ -247,64 +275,167 @@
 
 import VirtualTable from "./VirtualTable.vue";
 import VirtualGrid from "./VirtualGrid.vue";
-import throttle from "lodash/throttle";
 import PresetSelector from "../widgets/PresetSelector.vue";
-import groupBy from "lodash/groupBy";
-import { generatePivotColumns, generateTotalColumns, sortsFn } from "../utils/preset-selector.mjs";
+import {generatePivotColumns, generateTotalColumns, setupConfig, sortsFn} from "../utils/preset-selector.mjs";
 import PresetBar from "../widgets/PresetBar.vue";
+import {invokeAfterIdle} from "../utils/helpers.mjs";
 
 export default{
 
-  emits: [ 'after-load', 'open-preset', 'signal', 'pivot-item-click' ],
+  components: {PresetBar, PresetSelector, VirtualGrid, VirtualTable},
 
-  inject: [ 'socket', 'toast' ],
+  computed: {
 
-  props: {
-    config: {
-      type: Object,
-      default: { columns:[], presets:[{}] }
+    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
     },
-    presetKey: String,
-    subscribeKey: String,
-    src: undefined,
-    title: String,
-    view: {
-      type: String,
-      validator(value) {
-        return ['grid', 'table'].includes(value)
+
+    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(){
+      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 ?? []
+      }
     },
-    toolbar: {
-      type: [ String, Boolean ],
-      default: true
+
+    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)
+    },
+
+    sidebar(){
+      if(!this.cConfig.sidebar || !('open' in this.cConfig.sidebar))
+        this.cConfig.sidebar = {
+          open: false,
+          width: 270
+        }
+
+      return this.cConfig.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
+    },
+
+    cConfig(){
+      return this.config ?? this._config
+    }
+
+  },
+
+  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(){
+
+      if(this.$refs.content){
+        this.data.itemsPerPage = Math.round((this.$refs.content.clientHeight - 36) / 36) + 3
+      }
+
+    },
+
+    duplicate(){
+      this.saveConfig(false, true)
+    },
+
     getEnumText(key, value){
 
       let enumText
 
-      const column = this.config.columns.find(_ => _.key === key)
+      const column = this.cConfig.columns.find(_ => _.key === key)
 
       if(Array.isArray(column.typeParams)){
         const typeParam = (column.typeParams ?? []).filter((_) => _.value === value).pop()
@@ -329,14 +460,14 @@ export default{
     },
 
     load(){
-      if(this.src){
-        if(!this.preset.columns){
-          this.preset.columns = JSON.parse(JSON.stringify(this.config.columns))
+      if(this.src && this.preset){
+        if(!this.preset.params.columns){
+          this.preset.params.columns = JSON.parse(JSON.stringify(this.config.params.columns))
         }
 
         this.readyState = 2
         return this.socket.send(this.src, {
-          ...this.preset,
+          ...this.preset.params,
           itemsPerPage: this.data.itemsPerPage,
         })
             .then(data => {
@@ -359,57 +490,26 @@ export default{
           ((this.data ?? {}).hasNext !== false) &&
           !(this.preset.pivot ?? {}).enabled) {
 
-        //console.log('last id', this.dataItems[this.dataItems.length - 1].id)
-
+        this.readyState = 4
         this.socket.send(this.src, {
           ...this.preset,
           itemsPerPage: this.data.itemsPerPage,
           afterItem: this.data.items[this.data.items.length - 1],
         })
             .then(data => {
-              //console.log('next id', data.items[0].id)
-
               this.data.items.push(...data.items)
               this.loadEnums(data.items)
             })
             .catch(err => this.toast(err))
+            .finally(_ => this.readyState = 1)
       }
       return new Promise(resolve => resolve())
     },
 
-    loadPreset(){
-      if(!Object.keys(this.$route.query).map(_ => _.toLowerCase()).includes('reset')){
-        if(this.presetKey){
-          return this.socket.send('user.preset', { key:this.presetKey })
-              .then(config => {
-                Object.assign(this.config, config)
-              })
-        }
-        return new Promise(resolve => resolve())
-      }
-      else{
-        return new Promise((resolve) => {
-          this.savePreset()
-
-          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()
-        })
-      }
-    },
-
     loadEnums(items){
 
-      for(let i in this.preset.columns){
-        const column = this.preset.columns[i]
+      for(let i in this.preset.params.columns){
+        const column = this.preset.params.columns[i]
 
         if(column.enumSrc) {
 
@@ -431,7 +531,6 @@ export default{
               columns: [
                 { key:attr, visible:true }
               ],
-              itemsPerPage: 1000,
               filters: [
                 {
                   key:key, value: [ { operator:'in', value:reqItems } ]
@@ -472,10 +571,10 @@ export default{
         ],
         pivot: null
       })
-        .then((res) => {
-          this.data.extItems = res.items
-        })
-        .finally(_ => this.readyState = 1)
+          .then((res) => {
+            this.data.extItems = res.items
+          })
+          .finally(_ => this.readyState = 1)
     },
 
     loadExtNext(){
@@ -497,26 +596,78 @@ export default{
     },
 
     resize1(w){
-      if(this.config.sidebar.width + w >= 270 && this.config.sidebar.width + w <= 600){
-        this.config.sidebar.width += w
+      if(this.cConfig.sidebar.width + w >= 270 && this.cConfig.sidebar.width + w <= 600){
+        this.cConfig.sidebar.width += w
       }
     },
 
-    selectPreset(idx){
-      if(this.config.presets[idx]){
-        this.config.presetIdx = idx
+    selectPreset(uid){
+      const preset = this.presets.find(_ => _.uid === uid)
+
+      if(preset){
+        this.cConfig.presetIdx = uid
         this.load()
         this.$refs.presetSelector.close()
         this.$refs.contextMenu.close()
       }
     },
 
-    savePreset: throttle(function() {
-      if(this.presetKey) {
-        this.socket.send('user.preset',
-            {key: this.presetKey, config: this.config})
+    async loadDefaultConfig(save = false){
+      if(typeof this.defaultConfig !== 'function') return
+
+      this._config = setupConfig(JSON.parse(JSON.stringify((await this.defaultConfig()).default)))
+
+      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) => {
+              this._config = config
+            })
+            .catch(() => {})
       }
-    }, 1000, { leading:true }),
+    },
+
+    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(){
 
@@ -567,12 +718,12 @@ export default{
             ...this.preset,
             [key]: items.map(item => item[key])
           })
-            .then(({ items:nextItems }) => {
-              nextItems.forEach(item => this.$util.unshift(this.data.items, item, { highlight: true }))
+              .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)
-            })
+                const destroyedItems = items.filter(_ => !nextItems.find(i => i[key] === _[key]))
+                this.$util.remove(this.data.items, destroyedItems)
+              })
           break
       }
 
@@ -587,7 +738,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.columns.find(_ => _.key === key)
+          const presetColumn = this.preset.params.columns.find(_ => _.key === key)
           let value = item[pivotRow.key]
           switch(presetColumn.type){
 
@@ -669,10 +820,10 @@ export default{
         let [ kk, ...vv ] = column.key.split('-')
         vv = vv.join('-')
 
-        if(![ 'count', 'countDistinct' ].includes(vv)){
+        if(![ 'count', 'countDistinct', 'sum' ].includes(vv)){
 
           const key = kk.substring(1)
-          const presetColumn = this.preset.columns.find(_ => _.key === key)
+          const presetColumn = this.preset.params.columns.find(_ => _.key === key)
           let value = vv
           switch(presetColumn.type){
 
@@ -696,6 +847,17 @@ export default{
             }]
           })
         }
+        else if([ 'sum' ].includes(vv)){
+          const key = kk.substring(1)
+
+          filters.push({
+            key,
+            value: [{
+              operator: '>',
+              value: 0
+            }]
+          })
+        }
 
         this.extBar.open = true
         this.extBar.filters = filters
@@ -727,8 +889,8 @@ export default{
           default:
             if(e.code.startsWith('Digit')){
               const idx = parseInt(e.code.substring(5)) - 1
-              if(this.config.presets[idx]) {
-                this.selectPreset(idx)
+              if(this.presets[idx]) {
+                this.selectPreset(this.presets[idx].uid)
               }
             }
             break
@@ -739,16 +901,17 @@ export default{
 
   },
 
-  components: {PresetBar, PresetSelector, VirtualGrid, VirtualTable},
-
   mounted(){
     this.$addResizeListener(this.$el, () => this.compPrefix = this.$util.calculateMediaPrefix(this.$el.clientWidth))
 
-    this.loadPreset()
+    this.loadConfig()
         .then(() => {
           this.readyState = 1
-          this.load()
-          this.loadExt()
+          this.$nextTick(() => {
+            this.calcItemsPerPage()
+            this.load()
+            this.loadExt()
+          })
         })
 
     if(this.subscribeKey){
@@ -759,181 +922,94 @@ export default{
     window.addEventListener('keydown', this.onKeyDown)
   },
 
-  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)
-    }
-  },
-
-  computed: {
-
-    columns(){
-      if((this.preset.pivot ?? {}).enabled){
-        return this.preset.pivot.columns ?? []
-
-
-        const tableColumns = groupBy(this.preset.columns ?? this.config.columns, 'key')
-
-        const columns = []
-
-        for(let row of this.preset.pivot.rows){
-          if(!tableColumns[row.key][0].defaultFormat)
-            tableColumns[row.key][0].defaultFormat = tableColumns[row.key][0].format
-
-          switch(row.aggregrate){
-            case 'year':
-              tableColumns[row.key][0].format = 'YYYY'
-              break
-
-            case 'month':
-              tableColumns[row.key][0].format = 'MMM YYYY'
-              break
-
-            case 'date':
-              tableColumns[row.key][0].format = 'D MMM YYYY'
-              break
-          }
-
-          columns.push(tableColumns[row.key][0])
-        }
-
-        for(let value of this.preset.pivot.values){
-          const key = value.aggregrate ? `_${value.key}-${value.aggregrate}` : `_${value.key}-`
-          for(let k in tableColumns){
-            if(k.startsWith(key)){
-              columns.push(tableColumns[k][0])
-            }
-          }
-        }
-
-        return 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
-    },
-
-    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: {
+    presetKey: String,
+    presetSrc: {
+      type: String,
+      default: 'user.preset'
     },
 
-    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 ?? []
+    subscribeKey: String,
+    src: undefined,
+    title: String,
+    view: {
+      type: String,
+      validator(value) {
+        return ['grid', 'table'].includes(value)
       }
     },
-
-    preset(){
-      return ((this.config ?? {}).presets ?? [])[(this.config ?? {}).presetIdx ?? 0] ?? {}
-    },
-
-    presetView(){
-      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.config.sidebar || !('open' in this.config.sidebar))
-        this.config.sidebar = {
-          open: false,
-          width: 270
-        }
-
-      return this.config.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.config.extbar)
-        this.config.extbar = {
-          open: false,
-          height: Math.round(window.innerHeight / 2.2)
-        }
-
-      return this.config.extbar
+    containerClass: {
+      type: String,
+      default: "md:p-5 md:gap-3"
     },
-
-    extStyle(){
-      return {
-        height: this.extBar.height + "px"
-      }
+    toolbar: {
+      type: [ String, Boolean ],
+      default: true
     },
 
-    pivotEnabled(){
-      return ((this.preset ?? {}).pivot ?? {}).enabled
-    }
+    config: Object,
+    defaultConfig: Function,
 
+    sharingSrc: String,
+    removeSharingSrc: String,
   },
 
-  data(){
+  provide(){
     return {
-      readyState: 0,
-      data: {
-        itemsPerPage: 16,
-      },
-      observer: null,
-      compPrefix: '',
-      enumCache: {},
-      extItems: null,
-      lastEnumItems: null,
+      listStyle: this.$style,
+      emitRoot: () => {}
     }
   },
 
-  provide(){
-    return {
-      listStyle: this.$style
+  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)
     }
   },
 
   watch: {
 
-    config: {
+    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(){
-        this.savePreset()
+      handler(to, from){
+        if(to && to.uid === from?.uid){
+
+        }
       }
     },