@mixd-id/web-scaffold 0.1.230406281 → 0.1.230406282

package/package.json

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

package/src/components/Button.vue

@@ -208,6 +208,7 @@ export default{
 
 .button-secondary{
 	@apply bg-primary-100 border-primary-100 text-primary-700 rounded-lg text-text;
+  border: solid 1px rgb(var(--primary-100));
 }
 .button-secondary:hover{
 	@apply bg-primary-200 border-primary-200;

package/src/components/List.vue

@@ -4,48 +4,82 @@
     <div v-if="readyState === 1"
          class="flex-1 flex flex-row">
 
-      <div v-if="computedPresetMode === 'sidebar' && sidebarOpen"
+      <div v-if="computedPresetMode === 'sidebar' && sidebar.open"
            class="relative flex flex-col border-r-[1px] border-text-50 panel-400"
-           :style="sidebarWidth">
+           :style="sidebarStyle">
 
         <PresetBar :config="config"
                    class="flex-1"
                    @apply="load">
+
           <template #toolbar>
-            <button type="button" class="px-1" @click="closeSidebar">
-              <svg width="19" height="19" class="fill-text-300 hover:fill-red-500" 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="M312.1 375c9.369 9.369 9.369 24.57 0 33.94s-24.57 9.369-33.94 0L160 289.9l-119 119c-9.369 9.369-24.57 9.369-33.94 0s-9.369-24.57 0-33.94L126.1 256L7.027 136.1c-9.369-9.369-9.369-24.57 0-33.94s24.57-9.369 33.94 0L160 222.1l119-119c9.369-9.369 24.57-9.369 33.94 0s9.369 24.57 0 33.94L193.9 256L312.1 375z"/></svg>
+            <button type="button" class="p-1" @click="togglePreset">
+              <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" 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 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
             </button>
           </template>
+
         </PresetBar>
 
-        <div v-if="sidebarOpen"
+        <div v-if="sidebar.open"
              :class="$style.resize1"
              @mousedown="(e) => $util.dragResize(e, resize1)"></div>
       </div>
 
-      <div class="flex-1 flex flex-col gap-3" :class="containerClass">
+      <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"
+          <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"
                :class="headerClass">
 
-            <div class="flex md:flex-1 flex-row gap-3">
-              <div class="flex flex-col whitespace-nowrap text-ellipsis overflow-hidden">
-                <small class="text-text-400 text-xs">{{ title ?? 'Untitled' }}</small>
-                <h4 class="cursor-pointer whitespace-nowrap text-ellipsis overflow-hidden group hover:text-primary"
-                    @click="openPreset">
-                  {{ preset.name ?? 'Preset Name' }}
-                  <svg v-if="computedPresetMode === 'sidebar'" width="14" height="14" class="ml-1 inline fill-text pointer-events-none group-hover: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="M280.3 134.4c-9.719-9-24.91-8.438-33.94 1.25c-9 9.719-8.469 24.88 1.25 33.94L314.9 232H144C130.8 232 120 242.8 120 256S130.8 280 144 280h170.9l-67.21 62.41c-9.719 9.062-10.25 24.22-1.25 33.94c9.031 9.688 24.22 10.25 33.94 1.25l112-104C397.2 269 400 262.7 400 256s-2.781-13.03-7.656-17.59L280.3 134.4zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464z"/></svg>
-                  <svg v-else-if="![ 'external' ].includes(computedPresetMode)" width="14" height="14" 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>
-                </h4>
+            <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-col whitespace-nowrap text-ellipsis overflow-hidden">
+                  <div class="cursor-pointer group" @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.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>
+                  </div>
+                  <ContextMenu ref="contextMenu" class="panel-400">
+                    <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"
+                                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'"
+                                type="button"
+                                @click="selectPreset(idx)">
+                          <label class="flex-1 pr-12">
+                            {{ preset.name }}
+                          </label>
+                          <div class="p-1">
+                            <div v-if="idx < 10"
+                                 class="border-[1px] border-text-300 px-2 text-mono text-xs text-text-400 rounded-lg">
+                              Alt {{ idx + 1 }}
+                            </div>
+                          </div>
+                        </button>
+                      </div>
+
+                      <div class="px-3">
+                        <button type="button" class="text-primary p-3 px-5 text-left w-full" @click="openPreset">Edit</button>
+                      </div>
+
+                    </div>
+                  </ContextMenu>
+                </div>
               </div>
 
               <div class="flex-1"></div>
 
-              <slot v-if="Boolean(toolbar)" name="toolbar"></slot>
+              <slot name="toolbar"></slot>
             </div>
 
             <div class="flex flex-row gap-2 gap-1" v-if="Boolean(toolbar)">
@@ -107,13 +141,13 @@
                      ref="grid"
                      :items="dataItems"
                      :column="computedGridColumn"
-                     class="flex-1"
+                     :class="gridClass"
                      @scroll-end="loadNext"
                      :container-class="`${gridContainerClass}`"
                      :config="config">
           <template #item="{ item }">
             <slot name="gridItem" :item="item">
-              <div class="flex flex-row panel-400 rounded-lg overflow-hidden md:rounded-lg overflow-hidden">
+              <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>
@@ -130,6 +164,7 @@
       </div>
 
     </div>
+
   </div>
 </template>
 
@@ -161,17 +196,26 @@ export default{
       }
     },
     gridColumn: [ Number, String ],
-    gridContainerClass: String,
+    gridClass: {
+      type: String,
+      default: "flex-1 md:p-3"
+    },
+    gridContainerClass: {
+      type: String,
+      default: "md:gap-5"
+    },
     headerClass: String,
-    presetMode: String,
-    containerClass: String,
+    presetMode: {
+      type: String,
+      default: "sidebar"
+    },
+    containerClass: {
+      type: String,
+      default: "md:p-5 md:gap-3"
+    },
     toolbar: {
       type: [ String, Boolean ],
       default: true
-    },
-    editHash: {
-      type: String,
-      default: '#719ed'
     }
   },
 
@@ -211,7 +255,8 @@ export default{
                 const columns = []
                 for(let key in data.items[0]){
                   if(key.startsWith('_')){
-                    const [ k1, k2 ] = key.substring(1).split('-')
+                    let [ k1, ...k2 ] = key.substring(1).split('-')
+                    k2 = k2.join('-')
 
                     let label = k2.replace(/_/gi, ' ')
                     const column = tableColumns[k1]
@@ -301,11 +346,8 @@ export default{
     },
 
     resize1(w){
-      if(!this.config.sidebarWidth)
-        this.config.sidebarWidth = 360
-
-      if(this.config.sidebarWidth + w >= 270 && this.config.sidebarWidth + w <= 600){
-        this.config.sidebarWidth += w
+      if(this.config.sidebar.width + w >= 270 && this.config.sidebar.width + w <= 600){
+        this.config.sidebar.width += w
       }
     },
 
@@ -314,15 +356,7 @@ export default{
         this.config.presetIdx = idx
         this.load()
         this.$refs.presetSelector.close()
-      }
-    },
-
-    setDefaultPresetView(){
-      if(window.innerWidth < 768){
-        this.preset.view = 'grid'
-      }
-      else if(!this.preset.view){
-        this.preset.view = window.innerWidth < 768 ? 'grid' : 'table'
+        this.$refs.contextMenu.close()
       }
     },
 
@@ -342,10 +376,7 @@ export default{
           break
 
         case 'sidebar':
-          this.$router.push({
-            ...this.$route,
-            hash: this.$route.hash.replace(this.editHash, '') + this.editHash
-          })
+          this.sidebar.open = true
           break
 
         default:
@@ -355,11 +386,17 @@ export default{
       }
     },
 
-    closeSidebar(){
-      this.$router.replace({
-        ...this.$route,
-        hash: this.$route.hash.replace(this.editHash, '')
-      })
+    togglePreset(){
+      switch(this.computedPresetMode){
+
+        case 'sidebar':
+          this.sidebar.open = !this.sidebar.open
+          break
+
+        case 'popup':
+          this.$refs.presetSelector.open()
+          break
+      }
     },
 
     onSignal(event, items){
@@ -391,6 +428,29 @@ export default{
     resize(){
       this.$refs.table ? this.$refs.table.resize() : null
       this.$refs.grid ? this.$refs.grid.resize() : null
+    },
+
+    onKeyDown(e){
+
+      if(e.altKey){
+
+        switch(e.code){
+
+          case 'Backquote':
+            this.$refs.contextMenu.open(this.$refs.title)
+            break
+
+          default:
+            if(e.code.startsWith('Digit')){
+              const idx = parseInt(e.code.substring(5)) - 1
+              if(this.config.presets[idx]) {
+                this.selectPreset(idx)
+              }
+            }
+            break
+        }
+
+      }
     }
 
   },
@@ -406,7 +466,6 @@ export default{
 
     this.loadPreset()
         .then(() => {
-          this.setDefaultPresetView()
           this.readyState = 1
           this.load()
         })
@@ -415,13 +474,13 @@ export default{
       this.socket.send('user.subscribe', { name:this.subscribeKey })
       this.socket.on(this.subscribeKey, this.onSignal)
     }
-    else if(import.meta.DEV){
-      console.warn('subscribeKey is not set')
-    }
+
+    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})
@@ -439,6 +498,23 @@ export default{
         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])
         }
 
@@ -453,7 +529,15 @@ export default{
 
         return columns
       }
-      return this.preset.columns ?? this.config.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(){
@@ -503,13 +587,19 @@ export default{
           (this.view ?? this.preset.view)
     },
 
-    sidebarOpen(){
-      return this.$route.hash.indexOf(this.editHash) >= 0
+    sidebar(){
+      if(!this.config.sidebar || !('open' in this.config.sidebar))
+        this.config.sidebar = {
+          open: false,
+          width: 270
+        }
+
+      return this.config.sidebar
     },
 
-    sidebarWidth(){
+    sidebarStyle(){
       return {
-        width: (!this.sidebarOpen ? 0 : (this.config.sidebarWidth ?? '360')) + 'px'
+        width: !this.sidebar.open ? 0 : this.sidebar.width + 'px'
       }
     },
 
@@ -535,12 +625,6 @@ export default{
       }
     },
 
-    preset(to){
-      if(!to.view){
-        this.setDefaultPresetView()
-      }
-    },
-
   },
 
 }
@@ -553,8 +637,4 @@ export default{
   @apply w-[3px] cursor-ew-resize absolute top-0 right-0 bottom-0;
 }
 
-.headerSelected{
-  @apply border-primary;
-}
-
 </style>

package/src/components/Modal.vue

@@ -95,7 +95,7 @@ export default{
     width: [ String, Number ],
 
     useForm: {
-			type: Boolean,
+			type: [ Boolean, String ],
 			default: false
 		},
 

package/src/components/PresetSelectorFilterItem.vue

@@ -57,6 +57,19 @@
         <Radio :name="value.key" :value="false" v-model="value.value" @change="apply">False</Radio>
       </div>
 
+      <div v-else-if="type === 'enum'" class="flex flex-row gap-2">
+
+        <div class="flex flex-col gap-2">
+          <Checkbox v-for="param in typeParams"
+                    v-model="cValue.value"
+                    :value="param.value"
+                    @change="apply">
+            {{ param.text }}
+          </Checkbox>
+        </div>
+
+      </div>
+
       <div v-else-if="type === 'component'">
         <component :is="column.component"
                    :value="value"
@@ -99,7 +112,11 @@ export default{
       type: Object,
       default: {}
     },
+
     type: String,
+
+    typeParams: Array,
+
     value: Object,
 
   },
@@ -109,6 +126,17 @@ export default{
     valueRequired(){
       return (!(['yesterday', 'today', 'thisWeek', 'thisMonth', 'thisYear'].includes(this.value.operator) ||
           this.type === 'boolean'));
+    },
+
+    cValue(){
+      if(this.type === 'enum' && (!this.value.operator || !Array.isArray(this.value.value))){
+        Object.assign(this.value, {
+          operator: 'in',
+          value: []
+        })
+      }
+
+      return this.value
     }
 
   },

package/src/components/Tabs.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="computedClass">
 		<button v-for="(item, index) in filteredItems" :class="tabClass(item)"
-            class=" whitespace-nowrap text-ellipsis overflow-hidden"
+            class="whitespace-nowrap"
 			@click="onClick(item)" type="button" >
 			<slot name="default" :="{ item, index }">
         <label class="px-1">

package/src/components/VirtualTable.vue

@@ -37,7 +37,8 @@
 							<td v-for="column in visibleColumns"
 									:class="tdClass(item, column)">
 								<slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="item" :index="visibleStartIndex + index"></slot>
-								<div v-else :class="columnClass(column)" v-html="formatColumn(item, column)"></div>
+								<slot v-else-if="$slots.default" name="default" :column="column" :item="item" :index="visibleStartIndex + index"></slot>
+                <div v-else :class="columnClass(column)" v-html="formatColumn(item, column)"></div>
 							</td>
 							<td :class="$style.spacer"></td>
 						</tr>
@@ -63,6 +64,7 @@
 					<tr>
 						<td v-for="column in columns" :style="thStyle(column)">
 							<slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="items[0]"></slot>
+							<slot v-else-if="$slots.default" name="default" :column="column" :item="items[0]"></slot>
 							<div v-else :class="columnClass(column)" v-html="formatColumn(items[0] ?? {}, column)"></div>
 						</td>
 						<td :class="$style.spacer"></td>
@@ -89,6 +91,8 @@ export default{
 	props:{
 		columns: Array,
 
+    itemClass: String,
+
 		items: Array,
 
 		pinned: Function,
@@ -218,9 +222,9 @@ export default{
 		},
 
 		tdClass(item, column){
-			if(Array.isArray(item._highlight) && item._highlight.includes(column.key)){
-				return this.$style.highlight
-			}
+			if(Array.isArray(item._highlight) && item._highlight.includes(column.key))
+				return this.$style.highlight + (this.itemClass ? ' ' + this.itemClass : '')
+      return this.itemClass ?? ''
 		},
 
 		select(item, index){

package/src/themes/default/index.js

@@ -60,6 +60,7 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       '--facebook-100': '205, 215, 231',
       '--facebook-500': '8, 102, 255',
 
+      '--panel-none': 'transparent',
       '--panel-300': 'rgb(235, 237, 240)',
       '--panel-400': 'rgb(245, 247, 250)',
       '--panel-500': 'rgb(255, 255, 255)',
@@ -234,6 +235,27 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       transform: 'scale(.9)'
     },
 
+    '.openltr-move, .openltr-enter-active, .openltr-leave-active': {
+      transition: 'all 200ms cubic-bezier(0.25, 1, 0.5, 1)'
+    },
+
+    '.openltr-enter-from, .openltr-leave-to': {
+      opacity: 0,
+      transform: 'translateX(30px)'
+    },
+
+    '.openltr-leave-active': {
+      position: 'absolute',
+      right: 0,
+      width: '100%'
+    },
+
+    '.panel-none': {
+      '--webkit-backdrop-filter': 'var(--panel-none-backdrop-filter)',
+      'backdrop-filter': 'var(--panel-none-backdrop-filter)',
+      'background-color': 'var(--panel-none)',
+    },
+
     '.panel-300': {
       '--webkit-backdrop-filter': 'var(--panel-300-backdrop-filter)',
       'backdrop-filter': 'var(--panel-300-backdrop-filter)',

package/src/utils/preset-selector.js

@@ -452,7 +452,7 @@ const afterItemToSequelizeWhere = async (order, afterItem) => {
 }
 
 const searchToSequelizeWhere = async (search, params) => {
-  if(!search){
+  if(!search && (!Array.isArray(params) || params.length < 1)){
     return {
       where: {},
       replacements: []
@@ -657,7 +657,6 @@ const chartToSequelizeWhere = async (chart, opt) => {
 const pivotToSequelizeWhere = async (pivot, opt) => {
 
   const { model, sorts = [] } = opt
-  //console.log(sorts)
 
   const attributes = []
   const group = []
@@ -665,7 +664,6 @@ const pivotToSequelizeWhere = async (pivot, opt) => {
   const sortExists = sorts.length > 0
 
   const groupedSorts = groupBy(sorts, 'key')
-  //console.log(util.inspect(pivot, false, null, true /* enable colors */))
 
   for(let row of pivot.rows){
 
@@ -674,15 +672,15 @@ const pivotToSequelizeWhere = async (pivot, opt) => {
     switch(row.aggregrate){
 
       case 'date':
-        attributes.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%M-%d'), row.key ])
-        group.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%M-%d'), row.key ])
-        if(!sortExists) order.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%M-%d'), 'asc' ])
+        attributes.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%m-%d'), row.key ])
+        group.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%m-%d'), row.key ])
+        if(!sortExists) order.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%m-%d'), 'asc' ])
         break
 
       case 'month':
-        attributes.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%M'), row.key ])
-        group.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%M'), row.key ])
-        if(!sortExists) order.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%M'), 'asc' ])
+        attributes.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%m'), row.key ])
+        group.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%m'), row.key ])
+        if(!sortExists) order.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y-%m'), 'asc' ])
         break
 
       case 'year':
@@ -701,6 +699,7 @@ const pivotToSequelizeWhere = async (pivot, opt) => {
 
   const sortKeyToOrders = {} // Helper to determine group ordering
   for(let value of pivot.values){
+
     switch(value.aggregrate){
 
       case 'sum':
@@ -742,21 +741,19 @@ const pivotToSequelizeWhere = async (pivot, opt) => {
         }
 
         const field = model.rawAttributes[value.key].field
-        //console.log(field)
 
         groups.forEach(group => {
           if(group[value.key] === null){
-            attributes.push([ literal(`SUM(CASE WHEN ${model.name}.${field} is null THEN 1 ELSE 0 END)`), `_${value.key}-null` ])
+            attributes.push([ literal(`SUM(CASE WHEN ${model.name}.${field} is null THEN 1 ELSE 0 END)`), `_${value.key}-(null)` ])
           }
           else if(group[value.key] === ''){
-            attributes.push([ literal(`SUM(CASE WHEN ${model.name}.${field} = '' THEN 1 ELSE 0 END)`), `_${value.key}-empty` ])
+            attributes.push([ literal(`SUM(CASE WHEN ${model.name}.${field} = '' THEN 1 ELSE 0 END)`), `_${value.key}-(empty)` ])
           }
           else{
             const groupValue = (group[value.key] ?? '').toString().replace(/\s/g, '_')
             attributes.push([ literal(`SUM(CASE WHEN ${model.name}.${field} = '${group[value.key]}' THEN 1 ELSE 0 END)`), `_${value.key}-${groupValue}` ])
           }
         })
-        //console.log(attributes)
 
         break
     }
@@ -773,9 +770,6 @@ const pivotToSequelizeWhere = async (pivot, opt) => {
     }
   }
 
-  //console.log(util.inspect(attributes, false, null, true /* enable colors */))
-  //console.log(util.inspect(group, false, null, true /* enable colors */))
-
   return {
     attributes,
     group,
@@ -887,6 +881,120 @@ const filtersToSequelizeInclude = async(filters, opt, includes) => {
   return includes
 }
 
+const syntaxSearchToSequelizeOpt = async(search, opt) => {
+
+  let where = {}
+  let replacements = []
+
+  const { config } = opt
+
+  let syntaxKey = search[1]
+  let syntaxVal = search[2].trim()
+
+  return {
+    where,
+    replacements
+  }
+}
+
+const presetToSequelizeList = async(preset, {
+  conn, model, order:initialOrder, config, where:initialWhere
+}) => {
+
+  if(!initialOrder){
+    initialOrder = [
+      [ 'updatedAt', 'desc' ],
+      [ 'id', 'desc' ],
+    ]
+  }
+
+  const { itemsPerPage = 20, filters = [], sorts, pivot, afterItem, search, id } = preset;
+
+  let where = {}
+  const replacements = []
+  const { order } = await sortsToSequelizeWhere(sorts, {
+    order: initialOrder
+  })
+
+  if(Array.isArray(id)){
+    where = {
+      ...where,
+      id: {
+        [Op.in]: id
+      }
+    }
+  }
+
+  const { where:filterWhere, replacements:filterReplacements } = await filtersToSequelizeWhere(filters, config)
+
+  let searchWhere = {}, searchReplacements = []
+  if(search){
+    const syntaxSearch = (search ?? '').match(/^(\w+)\:(.*)/)
+    if(syntaxSearch !== null){
+      const syntaxSearchOpt = syntaxSearchToSequelizeOpt(syntaxSearch, { config })
+      searchWhere = syntaxSearchOpt.where
+      searchReplacements = syntaxSearchOpt.replacements
+    }
+    else{
+      const match = (config.columns ?? []).filter(_ => (_.search && _.key)).map(_ => _.key)
+      if(match !== null){
+        const searchOpt = await searchToSequelizeWhere(search, {
+          match
+        })
+        searchWhere = searchOpt.where
+        searchReplacements = searchOpt.replacements
+      }
+    }
+  }
+
+  if(pivot && pivot.enabled){
+    const { attributes, group, order } = await pivotToSequelizeWhere(pivot, {
+      model,
+      conn
+    })
+
+    return {
+      attributes,
+      where: {
+        [Op.and]: [
+          initialWhere ?? {},
+          where,
+          filterWhere,
+          searchWhere
+        ]
+      },
+      replacements: [
+        ...filterReplacements,
+        ...searchReplacements
+      ],
+      group,
+      order
+    }
+  }
+  else{
+    const { where:afterItemWhere } = await afterItemToSequelizeWhere(order, afterItem)
+
+    return {
+      where: {
+        [Op.and]: [
+          where,
+          afterItemWhere,
+          filterWhere,
+          searchWhere,
+        ]
+      },
+      limit: itemsPerPage,
+      order,
+      replacements: [
+        ...replacements,
+        ...filterReplacements,
+        ...searchReplacements
+      ]
+    }
+  }
+}
+
+
 module.exports = {
   filtersToSequelizeWhere,
   afterItemToSequelizeWhere,
@@ -895,4 +1003,6 @@ module.exports = {
   pivotToSequelizeWhere,
   sortsToSequelizeWhere,
   filtersToSequelizeInclude,
+
+  presetToSequelizeList
 }

package/src/utils/preset-selector.mjs

@@ -42,6 +42,13 @@ const setupConfig = (config) => {
       if(config.presets[idx].columns[0] && typeof config.presets[idx].columns[0] === 'string'){
         config.presets[idx].columns = pickColumns(config.columns ?? [], config.presets[idx].columns)
       }
+
+      if(!config.presets[idx].view)
+        config.presets[idx].view = 'table'
+    }
+
+    if(!config.presetIdx && config.presets.length > 0){
+      config.presetIdx = 0
     }
   }
 

package/src/utils/wss.mjs

@@ -58,7 +58,10 @@ class WSS extends EventEmitter2{
       url: '',
     }, opt ?? {})
 
-    this.connect().then()
+    this.connect()
+      .catch(e => {
+        this.emit('error', e, [])
+      })
 
     if(typeof window !== 'undefined'){
       window.addEventListener('visibilitychange', () => {
@@ -119,7 +122,7 @@ class WSS extends EventEmitter2{
         this._pendingSend = []
       }
       else if(_requestId){
-        if(this._callbacks[_requestId]){
+        if(this._callbacks[_requestId] && this._instance.readyState === 1){
           const { cb, err, path, params, t1 } = this._callbacks[_requestId]
           status === 200 ? cb(data) : err(data)
           delete this._callbacks[_requestId]
@@ -167,6 +170,10 @@ class WSS extends EventEmitter2{
     };
   }
 
+  async close(){
+    this._instance.close()
+  }
+
   async reconnect(opt){
     if(this._instance){
       this._instance.close()
@@ -178,7 +185,7 @@ class WSS extends EventEmitter2{
   }
 
   sendSync(path, params, cb, err, override){
-    if(this._instance.readyState > 1){
+    if(!this._instance || this._instance.readyState > 1){
       return
     }
     else if(!this._instance.isAuth){
@@ -212,7 +219,7 @@ class WSS extends EventEmitter2{
         }
 
         setTimeout(() => {
-          if(this._callbacks[_requestId]){
+          if(this._callbacks[_requestId] && this._instance.readyState === 1){
             err({ message: 'Timeout' })
             delete this._callbacks[_requestId]
           }

package/src/widgets/PresetBar.vue

@@ -3,9 +3,9 @@
 
     <TransitionGroup name="openltr" tag="div" class="flex-1 flex">
 
-      <div v-if="$route.hash.indexOf(this.editHash) < 0" key="panel1" class="flex-1 flex flex-col">
+      <div v-if="presetBar.view === 1" key="panel1" class="flex-1 flex flex-col">
 
-        <div class="flex flex-row items-center gap-2 p-5">
+        <div class="flex flex-row items-center gap-2 p-3">
           <slot name="start"></slot>
           <div class="flex-1">
             <h5 class="px-3">{{ config.name ?? 'Config' }}</h5>
@@ -22,7 +22,7 @@
                  class="px-3 p-2 text-left hover:bg-primary-100 flex flex-row gap-2 items-center">
               <Radio v-model="config.presetIdx" :value="idx" @change="apply()" />
               <button type="button" class="flex-1 py-1 text-left overflow-hidden text-ellipsis whitespace-nowrap"
-                      @click="config.presetIdx = idx; apply()">
+                      @click="select(idx)">
                 {{ _preset.name }}
               </button>
               <button v-if="config.presetIdx === idx"
@@ -73,14 +73,18 @@
       <div v-else key="panel2" class="flex-1 flex flex-col">
 
         <div class="flex flex-row gap-2 p-3">
-          <button type="button" @click="deselect">
-            <svg width="14" height="14" class="fill-text hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M447.1 256c0 13.25-10.76 24.01-24.01 24.01H83.9l132.7 126.6c9.625 9.156 9.969 24.41 .8125 33.94c-9.156 9.594-24.34 9.938-33.94 .8125l-176-168C2.695 268.9 .0078 262.6 .0078 256S2.695 243.2 7.445 238.6l176-168C193 61.51 208.2 61.85 217.4 71.45c9.156 9.5 8.812 24.75-.8125 33.94l-132.7 126.6h340.1C437.2 232 447.1 242.8 447.1 256z"/></svg>
+          <button type="button" @click="deselect" class="p-1">
+            <svg width="16" height="16" class="fill-text-300 hover: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="M80 208h-64C7.125 208 0 215.1 0 224v64c0 8.875 7.125 16 16 16h64C88.88 304 96 296.9 96 288V224C96 215.1 88.88 208 80 208zM80 368h-64C7.125 368 0 375.1 0 384v64c0 8.875 7.125 16 16 16h64C88.88 464 96 456.9 96 448v-64C96 375.1 88.88 368 80 368zM80 48h-64C7.125 48 0 55.13 0 64v64c0 8.875 7.125 16 16 16h64C88.88 144 96 136.9 96 128V64C96 55.13 88.88 48 80 48zM488 232H183.1C170.7 232 160 242.7 160 256s10.75 24 23.1 24H488C501.3 280 512 269.3 512 256S501.3 232 488 232zM488 72H183.1C170.7 72 160 82.75 160 95.1S170.7 120 183.1 120H488c13.25 0 24-10.75 24-23.1S501.3 72 488 72zM488 392H183.1C170.7 392 160 402.7 160 416s10.75 24 23.1 24H488c13.25 0 24-10.75 24-24S501.3 392 488 392z"/></svg>
           </button>
-          <Textbox v-model="preset.name" class="flex-1 border-none bg-transparent font-bold" variant="minimal" />
+          <Textbox v-model="preset.name"
+                   class="flex-1 rounded-none border-none bg-transparent font-bold"
+                   item-class="p-1"
+                   variant="minimal"
+                   maxlength="100" />
           <slot name="toolbar" :edit="true"></slot>
         </div>
 
-        <div class="flex items-center justify-center border-b-[1px] border-text-100">
+        <div class="flex items-center justify-center border-b-[1px] border-text-100 px-3">
           <Tabs :items="tabItems[config.type ?? 'list']" v-model="config.presetBarTabIndex" />
         </div>
 
@@ -88,7 +92,7 @@
 
           <div v-if="config.presetBarTabIndex === 1" class="flex-1 flex flex-col p-5">
             <ListItem :items="presetColumns"
-                      body-class="divide-y divide-text-50"
+                      body-class="divide-y divide-text-50 rounded-lg border-[1px] border-text-50 bg-base-300"
                       @reorder="(from, to) => { presetColumns.splice(to, 0, presetColumns.splice(from, 1)[0]); }">
               <template v-slot="{ item }">
                 <div v-if="!item.key.startsWith('_') || (item.key.startsWith('_') && (preset.pivot && preset.pivot.enabled))" class="flex flex-row items-center gap-3 px-3 p-2 hover:bg-primary-100">
@@ -136,6 +140,7 @@
                         <PresetSelectorFilterItem
                             class="flex-1"
                             :type="typeOf(column(filter.key).type)"
+                            :typeParams="typeParamsOf(column(filter.key))"
                             :value="filterVal"
                             @change="apply()" />
 
@@ -169,11 +174,12 @@
 
           <div v-else-if="config.presetBarTabIndex === 3" class="flex-1 flex flex-col p-5">
 
-            <ListItem :items="preset.sorts"
+            <ListItem v-if="Array.isArray(preset.sorts) && preset.sorts.length > 0"
+                      :items="preset.sorts"
                       @reorder="(from, to) => { preset.sorts.splice(to, 0, preset.sorts.splice(from, 1)[0]); apply() }"
-                      container-class="flex flex-col gap-2">
+                      container-class="flex flex-col rounded-lg border-[1px] border-text-50 bg-base-300 divide-y divide-text-50">
               <template v-slot="{ item, index }">
-                <div class="flex flex-row items-center gap-3">
+                <div class="flex flex-row items-center gap-3 p-1">
                   <div data-reorder>
                     <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
                   </div>
@@ -208,13 +214,12 @@
               </template>
             </ListItem>
 
-            <div class="p-5 text-center">
-              <button type="button"
-                      class="text-primary"
-                      @click="addSort({ type:'asc' })">
-                Add Sort
-              </button>
-            </div>
+            <button type="button"
+                    class="text-primary flex flex-row items-center justify-center p-3"
+                    @click="addSort({ type:'asc' })">
+              <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/></svg>
+              Add Sort
+            </button>
 
           </div>
 
@@ -503,6 +508,7 @@
                         </strong>
                         <select v-model="item.aggregrate"
                                 class="appearance-none bg-transparent outline-none" @change="apply()">
+                          <option value="">Default</option>
                           <option value="count">Count</option>
                           <option v-if="[ 'number' ].includes(item.type)" value="sum">Sum</option>
                           <option v-if="[ 'number' ].includes(item.type)" value="avg">Average</option>
@@ -525,12 +531,18 @@
           <div v-else-if="config.presetBarTabIndex === 9" class="flex-1 p-6 flex flex-col gap-6">
 
             <div>
-              <strong>Preset</strong>
+              <div class="flex flex-row">
+                <strong class="flex-1">Preset</strong>
+                <button type="button" class="text-primary" @click="log(preset)">console.log</button>
+              </div>
               <ObjectTree :value="preset" />
             </div>
 
             <div>
-              <strong>Config</strong>
+              <div class="flex flex-row">
+                <strong class="flex-1">Config</strong>
+                <button type="button" class="text-primary" @click="log(config)">console.log</button>
+              </div>
               <ObjectTree :value="config" />
             </div>
 
@@ -542,6 +554,7 @@
                         :columns="config.columns" />
 
       </div>
+
     </TransitionGroup>
 
 	</div>
@@ -561,12 +574,7 @@ export default{
 
   props: {
 
-    config: Object,
-
-    editHash: {
-      type: String,
-      default: '#e1a5f'
-    }
+    config: Object
 
   },
 
@@ -652,18 +660,13 @@ export default{
     },
 
     select(idx){
-      this.config.presetBarIndex = idx
-      this.$router.push({
-        ...this.$route,
-        hash: (this.$route.hash.replace(this.editHash, '')) + this.editHash
-      })
+      this.config.presetIdx = idx
+      this.presetBar.view = 2
+      this.apply()
     },
 
     deselect(){
-      this.$router.replace({
-        ...this.$route,
-        hash: this.$route.hash.replace(this.editHash, '')
-      })
+      this.config.presetBar.view = 1
     },
 
     filterColumnAdded(column){
@@ -677,10 +680,18 @@ export default{
         return 'date'
       else if([ 'number' ].includes(type))
         return 'number'
+      else if([ 'enum' ].includes(type))
+        return 'enum'
       else
         return 'text'
     },
 
+    typeParamsOf(column){
+      if([ 'enum' ].includes(column.type))
+        return column.typeParams
+      return []
+    },
+
   },
 
   computed: {
@@ -698,7 +709,7 @@ export default{
     },
 
     preset(){
-      return this.config.presets[this.config.presetBarIndex]
+      return this.config.presets[this.config.presetIdx]
     },
 
     presetChart(){
@@ -742,6 +753,15 @@ export default{
       return this.chartOpt.yAxis
     },
 
+    presetBar(){
+      if(!this.config.presetBar || !this.config.presetBar.view)
+        this.config.presetBar = {
+          view: 2
+        }
+
+      return this.config.presetBar
+    }
+
   },
 
   data(){