@mixd-id/web-scaffold 0.1.230406289 → 0.1.230406291

package/package.json

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

package/src/components/Button.vue

@@ -146,7 +146,7 @@ export default{
 	@apply flex items-center justify-center
 }
 .button:disabled{
-	@apply opacity-60;
+  @apply text-opacity-50;
 }
 .button:active{
 	@apply top-[1px] left-[1px] relative;
@@ -164,7 +164,7 @@ export default{
 	@apply bg-primary-600;
 }
 .button-primary:disabled{
-	@apply bg-primary-500 opacity-50 top-0 left-0 cursor-not-allowed;
+	@apply bg-primary-500 top-0 left-0 cursor-not-allowed;
 	@apply top-0 left-0;
 }
 .button-primary *{
@@ -188,7 +188,7 @@ export default{
 .button-outline:hover{
 }
 .button-outline:disabled{
-	@apply opacity-50 top-0 left-0 cursor-not-allowed;
+	@apply top-0 left-0 cursor-not-allowed;
 	@apply text-text border-primary-500;
 }
 .button-outline *{
@@ -214,7 +214,7 @@ export default{
 	@apply bg-primary-200 border-primary-200;
 }
 .button-secondary:disabled{
-	@apply bg-primary-100 opacity-50 top-0 left-0 cursor-not-allowed;
+	@apply bg-primary-100 top-0 left-0 cursor-not-allowed;
 }
 .button-secondary *{
 	@apply text-text-500 fill-white;
@@ -238,7 +238,7 @@ export default{
 	@apply bg-red-600 border-red-600;
 }
 .button-red:disabled{
-	@apply bg-red-500 border-red-500 opacity-50 top-0 left-0 cursor-not-allowed;
+	@apply bg-red-500 border-red-500 top-0 left-0 cursor-not-allowed;
 }
 .button-red *{
 	@apply text-white fill-white;

package/src/components/Image.vue

@@ -288,7 +288,7 @@ export default{
 }
 
 .img{
-	@apply object-contain w-full h-full;
+	@apply w-full h-full;
 }
 
 .editArea{

package/src/components/List.vue

@@ -120,7 +120,11 @@
             </div>
           </slot>
 
-          <VirtualTable v-if="presetView === 'table' || pivotEnabled"
+          <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>
+          </div>
+
+          <VirtualTable v-else-if="presetView === 'table' || pivotEnabled"
                         ref="table"
                         :columns="columns"
                         class="flex-1 rounded-lg panel-400"
@@ -244,7 +248,7 @@ import VirtualGrid from "./VirtualGrid.vue";
 import throttle from "lodash/throttle";
 import PresetSelector from "../widgets/PresetSelector.vue";
 import groupBy from "lodash/groupBy";
-import {sortsFn} from "../utils/preset-selector.mjs";
+import { generatePivotColumns, sortsFn } from "../utils/preset-selector.mjs";
 import PresetBar from "../widgets/PresetBar.vue";
 
 export default{
@@ -304,114 +308,20 @@ export default{
           .join(' ')
     },
 
-    generatePivotColumns(items){
-      if(!this.preset.pivot || !this.preset.pivot.enabled) return
-      if(!Array.isArray(items) && items.length < 1) return
-
-      const tableColumns = (this.preset.columns ?? this.config.columns)
-          .reduce((cur, obj) => {
-            cur[obj.key] = obj
-            return cur
-          }, {})
-
-      const currentPivotColumns = [ ...(this.preset.pivot.columns ?? []) ]
-          .reduce((cur, obj) => {
-            cur[obj.key] = obj
-            return cur
-          }, {})
-
-      const pivotColumns = []
-
-      for(let row of this.preset.pivot.rows){
-
-        let format
-        switch(row.aggregrate){
-          case 'year':
-            format = 'YYYY'
-            break
-
-          case 'month':
-            format = 'MMM YYYY'
-            break
-
-          case 'date':
-            format = 'D MMM YYYY'
-            break
-        }
-
-        if(currentPivotColumns[row.key]){
-          Object.assign(currentPivotColumns[row.key], {
-            format,
-            visible: true
-          })
-
-          pivotColumns.push(currentPivotColumns[row.key])
-        }
-        else{
-          pivotColumns.push({
-            ...tableColumns[row.key],
-            format,
-            visible: true
-          })
-        }
-      }
-
-      for(let key in items[0]){
-        if(key.startsWith('_')){
-          let [ k1, ...k2 ] = key.substring(1).split('-')
-          k2 = k2.join('-')
-
-          let label = k2.replace(/_/gi, ' ')
-          const column = tableColumns[k1]
-          if(column){
-            switch(column.type){
-              case 'enum':
-                label = (column.typeParams ?? []).find(_ => `${_.value}` === `${k2}`)?.text ?? label
-                break
-            }
-          }
-
-          if(currentPivotColumns[key]){
-            Object.assign(currentPivotColumns[key], {
-              visible: true
-            })
-
-            pivotColumns.push(currentPivotColumns[key])
-          }
-          else{
-            pivotColumns.push({
-              key,
-              label,
-              label2: (((tableColumns[k1] ?? {}).label ?? '') + ': ' + label).trim(),
-              type: 'number',
-            })
-          }
-        }
-      }
-
-      (this.preset.pivot.columns ?? []).filter(_ => !pivotColumns.find(i => i.key === _.key))
-          .forEach(_ => {
-            _.visible = false
-            pivotColumns.push(_)
-          })
-
-      this.preset.pivot.columns = pivotColumns
-
-    },
-
     load(){
       if(this.src){
         if(!this.preset.columns){
           this.preset.columns = JSON.parse(JSON.stringify(this.config.columns))
         }
 
+        this.readyState = 3
         return this.socket.send(this.src, {
           ...this.preset,
           itemsPerPage: this.data.itemsPerPage,
         })
             .then(data => {
 
-              this.generatePivotColumns(data.items)
+              generatePivotColumns(this.preset, data.items)
               this.loadEnums(data.items)
               Object.assign(this.data, data ?? {})
               this.$emit('after-load')
@@ -420,6 +330,7 @@ export default{
             .catch(err => {
               this.toast(err)
             })
+            .finally(_ => this.readyState = 1)
       }
       return new Promise(resolve => resolve())
     },
@@ -529,7 +440,7 @@ export default{
     },
 
     loadExt(){
-      if(!this.preset.filters || !this.extBar.open) return
+      if(!this.extBar.open) return
 
       this.readyState = 3
       return this.socket.send(this.src, {
@@ -620,7 +531,6 @@ export default{
 
     onSignal(event, items){
       if(this.pivotEnabled){
-        console.log('no background update due ti pivot')
         return
       }
 
@@ -654,11 +564,22 @@ export default{
         const filters = []
 
         for(let idx in this.preset.pivot.rows){
+          const key = this.preset.pivot.rows[idx].key
+          const presetColumn = this.preset.columns.find(_ => _.key === key)
+          let value = item[this.preset.pivot.rows[idx].key]
+          switch(presetColumn.type){
+
+            case 'bool':
+            case 'boolean':
+              value = value === 'true'
+              break
+          }
+
           filters.push({
-            key: this.preset.pivot.rows[idx].key,
+            key,
             value: [{
               operator: '=',
-              value: item[this.preset.pivot.rows[idx].key]
+              value
             }]
           })
         }
@@ -666,12 +587,24 @@ export default{
         let [ kk, ...vv ] = column.key.split('-')
         vv = vv.join('-')
 
-        if(![ 'count' ].includes(vv)){
+        if(![ 'count', 'countDistinct' ].includes(vv)){
+
+          const key = kk.substring(1)
+          const presetColumn = this.preset.columns.find(_ => _.key === key)
+          let value = vv
+          switch(presetColumn.type){
+
+            case 'bool':
+            case 'boolean':
+              value = value === 'true'
+              break
+          }
+
           filters.push({
-            key: kk.substring(1),
+            key,
             value: [{
               operator: '=',
-              value: vv
+              value
             }]
           })
         }
@@ -700,7 +633,7 @@ export default{
         switch(e.code){
 
           case 'Backquote':
-            this.$refs.contextMenu.open(this.$refs.title)
+            this.togglePreset()
             break
 
           default:
@@ -923,7 +856,6 @@ export default{
 
 .resize2{
   @apply h-[5px] hover:bg-primary bg-text-50 cursor-n-resize absolute top-0 left-0 right-0 flex items-center justify-center;
-  @apply z-20;
 }
 
 .extClose{

package/src/components/VirtualTable.vue

@@ -4,10 +4,11 @@
 			<table :class="$style.table" ref="tableHead" :style="tableHeadStyle">
 				<thead>
 				<tr>
-					<th v-for="column in visibleColumns" :style="thStyle(column)">
+					<th v-for="column in visibleColumns" :style="thStyle(column)"
+              v-tooltip="`${column.label ? column.label : column.key}`">
 						<slot v-if="$slots['col-' + column.key]" :name="'col-' + column.key" :column="column"></slot>
 						<div v-else :class="headerColumnClass(column)">
-							<span>{{ column.label ?? column.key }}</span>
+							<span>{{ column.label2 ? column.label2 : (column.label ?? column.key) }}</span>
 						</div>
 						<div :class="$style.separator" @mousedown="startResize($event, column)"></div>
 					</th>
@@ -39,7 +40,7 @@
                   @click="$emit('item-click', item, column)">
 								<slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="item" :index="visibleStartIndex + index"></slot>
 								<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>
+                <div v-else :class="columnClass(column, item)" v-html="formatColumn(item, column)"></div>
 							</td>
 							<td :class="$style.spacer"></td>
 						</tr>
@@ -201,7 +202,6 @@ export default{
 		this.resize()
 
     const observer = new MutationObserver((mutationsList) => {
-      console.log(mutationsList)
       this.resize()
     });
     observer.observe(this.$el, { attributes: true });
@@ -254,7 +254,7 @@ export default{
 					this.itemHeight = parseInt(window.getComputedStyle(this.$refs.calc).height)
 					this.maxVisibleItems = elHeight > 0 ? Math.ceil(elHeight / this.itemHeight) + 1 : this.items.length
 
-					if(this.itemHeight <= 0){
+					if(this.itemHeight <= 0 && import.meta.env.DEV){
 						console.error('[VirtualTable] Unable to calculate item height, make sure not async component.')
 					}
 				}
@@ -323,7 +323,7 @@ export default{
 			window.addEventListener('mouseup', onMouseUp)
 		},
 
-		columnClass(column){
+		columnClass(column, item){
 
 			let align
 			if(!column.align){
@@ -334,9 +334,111 @@ export default{
 				}
 			}
 
+      let appearanceClass = ''
+      if(item && Array.isArray(column.appearances)){
+
+        let value
+        switch(column.type){
+
+          case 'number':
+            value = parseInt(item[column.key])
+            break
+
+          default:
+            value = (item[column.key] ?? '').toString()
+            break
+        }
+
+        for(let appearance of column.appearances){
+
+          let conditionMatched = true
+          for(let condition of appearance.conditions ?? []){
+            switch(condition.operator){
+
+              case '>':
+                if(value <= condition.value){
+                  conditionMatched = false
+                }
+                break
+
+              case '>=':
+                if(value < condition.value){
+                  conditionMatched = false
+                }
+                break
+
+              case '=':
+                if(value !== condition.value){
+                  conditionMatched = false
+                }
+                break
+
+              case '<':
+                if(value >= condition.value){
+                  conditionMatched = false
+                }
+                break
+
+              case '<=':
+                if(value > condition.value){
+                  conditionMatched = false
+                }
+                break
+
+              case 'startsWith':
+                if(!value.startsWith(condition.value)){
+                  conditionMatched = false
+                }
+                break
+
+              case 'notStartsWith':
+                if(value.startsWith(condition.value)){
+                  conditionMatched = false
+                }
+                break
+
+              case 'contains':
+                if(value.indexOf(condition.value) < 0){
+                  conditionMatched = false
+                }
+                break
+
+              case 'notContains':
+                if(value.indexOf(condition.value) >= 0){
+                  conditionMatched = false
+                }
+                break
+
+              case 'endsWith':
+                if(!value.endsWith(condition.value)){
+                  conditionMatched = false
+                }
+                break
+
+              case 'notEndsWith':
+                if(value.endsWith(condition.value)){
+                  conditionMatched = false
+                }
+                break
+
+              case 'regex':
+                break
+
+            }
+
+            if(!conditionMatched) break
+          }
+
+          if(conditionMatched){
+            appearanceClass = appearance.class
+          }
+        }
+      }
+
 			return [
 				this.$style.tdDiv,
-				this.$style['align-' + align]
+				this.$style['align-' + align],
+        appearanceClass
 			]
 				.join(' ')
 		},

package/src/index.js

@@ -332,7 +332,7 @@ export default{
               tooltip.classList.add('active')
             }
           }
-        }, 1300)
+        }, 1000)
         el.setAttribute('data-tooltip-open', true)
       })
 
@@ -565,6 +565,7 @@ export default{
     app.component('SvgSetting', defineAsyncComponent(() => import("./widgets/SvgSetting.vue")))
     app.component('PresetBar', defineAsyncComponent(() => import("./widgets/PresetBar.vue")))
     app.component('PresetSelector', defineAsyncComponent(() => import("./widgets/PresetSelector.vue")))
+    app.component('PresetBarPivotColumnEdit', defineAsyncComponent(() => import("./widgets/PresetBarPivotColumnEdit.vue")))
     app.component('LogViewer', defineAsyncComponent(() => import("./widgets/LogViewer.vue")))
     app.component('ColumnSelector', defineAsyncComponent(() => import("./widgets/ColumnSelector.vue")))
   },

package/src/mixin/component.js

@@ -61,7 +61,10 @@ export const componentMixin = {
     itemRatio: Array,
 
     containerClass: String,
-    itemClass: String,
+    itemClass: {
+      type: String,
+      default: 'bg-contain'
+    },
 
     htmlText: String,
 

package/src/utils/preset-selector.js

@@ -4,7 +4,7 @@ const {inspect} = require("util");
 const {ftWildcard} = require("./helpers");
 const util = require("util");
 const {snakeCase} = require("lodash");
-const {Op, literal, fn} = module.parent.require("sequelize");
+const {Op, literal, fn, DataTypes} = module.parent.require("sequelize");
 
 const getValue = (filter, opt) => {
 
@@ -737,28 +737,34 @@ const pivotToSequelizeWhere = async (pivot, opt) => {
 
   const sortKeyToOrders = {} // Helper to determine group ordering
   for(let value of pivot.values){
+    const valueKey = model.rawAttributes[value.key].field
 
     switch(value.aggregrate){
 
       case 'sum':
-        attributes.push([ fn('SUM', literal(`${model.name}.${value.key}`)), `_${value.key}-${value.aggregrate}` ])
+        attributes.push([ fn('SUM', literal(`${model.name}.${valueKey}`)), `_${value.key}-${value.aggregrate}` ])
         break
 
       case 'avg':
-        attributes.push([ fn('AVG', literal(`${model.name}.${value.key}`)), `_${value.key}-${value.aggregrate}` ])
+        attributes.push([ fn('AVG', literal(`${model.name}.${valueKey}`)), `_${value.key}-${value.aggregrate}` ])
         break
 
       case 'min':
-        attributes.push([ fn('MIN', literal(`${model.name}.${value.key}`)), `_${value.key}-${value.aggregrate}` ])
+        attributes.push([ fn('MIN', literal(`${model.name}.${valueKey}`)), `_${value.key}-${value.aggregrate}` ])
         break
 
       case 'max':
-        attributes.push([ fn('MAX', literal(`${model.name}.${value.key}`)), `_${value.key}-${value.aggregrate}` ])
+        attributes.push([ fn('MAX', literal(`${model.name}.${valueKey}`)), `_${value.key}-${value.aggregrate}` ])
+        break
+
+      case 'countDistinct':
+        attributes.push([ literal(`COUNT(DISTINCT ${model.name}.${valueKey})`), `_${value.key}-${value.aggregrate}` ])
+        sortKeyToOrders[`_${value.key}-${value.aggregrate}`] = literal(`COUNT(DISTINCT ${model.name}.${valueKey})`)
         break
 
       case 'count':
-        attributes.push([ fn('COUNT', literal(`${model.name}.${value.key}`)), `_${value.key}-${value.aggregrate}` ])
-        sortKeyToOrders[`_${value.key}-${value.aggregrate}`] = fn('COUNT', literal(`${model.name}.${value.key}`))
+        attributes.push([ fn('COUNT', literal(`${model.name}.${valueKey}`)), `_${value.key}-${value.aggregrate}` ])
+        sortKeyToOrders[`_${value.key}-${value.aggregrate}`] = fn('COUNT', literal(`${model.name}.${valueKey}`))
         break
 
       default:
@@ -780,7 +786,10 @@ const pivotToSequelizeWhere = async (pivot, opt) => {
 
         const field = model.rawAttributes[value.key].field
 
+
         groups.forEach(group => {
+
+          let groupValue
           if(group[value.key] === null){
             attributes.push([ literal(`SUM(CASE WHEN ${model.name}.${field} is null THEN 1 ELSE 0 END)`), `_${value.key}-(null)` ])
           }
@@ -788,8 +797,14 @@ const pivotToSequelizeWhere = async (pivot, opt) => {
             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}` ])
+            if(model.rawAttributes[value.key].type instanceof DataTypes.BOOLEAN){
+              groupValue = group[value.key]
+              attributes.push([ literal(`SUM(CASE WHEN ${model.name}.${field} = ${groupValue === true ? 1 : 0} THEN 1 ELSE 0 END)`), `_${value.key}-${groupValue}` ])
+            }
+            else{
+              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}` ])
+            }
           }
         })
 

package/src/utils/preset-selector.mjs

@@ -55,8 +55,111 @@ const setupConfig = (config) => {
   return config
 }
 
+const generatePivotColumns = (preset, items) => {
+  if(!preset.pivot || !preset.pivot.enabled) return
+  if(!Array.isArray(items) && items.length < 1) return
+
+  if(preset.pivot.manualColumns === true){
+    return
+  }
+
+  const tableColumns = (preset.columns ?? [])
+    .reduce((cur, obj) => {
+      cur[obj.key] = obj
+      return cur
+    }, {})
+
+  const currentPivotColumns = [ ...(preset.pivot.columns ?? []) ]
+    .reduce((cur, obj) => {
+      cur[obj.key] = obj
+      return cur
+    }, {})
+
+  const pivotColumns = []
+
+  for(let row of preset.pivot.rows){
+
+    let format
+    switch(row.aggregrate){
+      case 'year':
+        format = 'YYYY'
+        break
+
+      case 'month':
+        format = 'MMM YYYY'
+        break
+
+      case 'date':
+        format = 'D MMM YYYY'
+        break
+    }
+
+    if(currentPivotColumns[row.key]){
+      Object.assign(currentPivotColumns[row.key], {
+        format,
+        visible: true
+      })
+
+      pivotColumns.push(currentPivotColumns[row.key])
+    }
+    else{
+      pivotColumns.push({
+        ...tableColumns[row.key],
+        format,
+        visible: true
+      })
+    }
+  }
+
+  for(let key in items[0]){
+    if(key.startsWith('_')){
+      let [ k1, ...k2 ] = key.substring(1).split('-')
+      k2 = k2.join('-')
+
+      let label = k2.replace(/_/gi, ' ')
+      const column = tableColumns[k1]
+      if(column){
+        switch(column.type){
+          case 'enum':
+            label = (column.typeParams ?? []).find(_ => `${_.value}` === `${k2}`)?.text ?? label
+            break
+        }
+      }
+
+      if(currentPivotColumns[key]){
+        Object.assign(currentPivotColumns[key], {
+          visible: true
+        })
+
+        pivotColumns.push(currentPivotColumns[key])
+      }
+      else{
+        pivotColumns.push({
+          key,
+          label,
+          label2: (((tableColumns[k1] ?? {}).label ?? '') + ': ' + label).trim(),
+          type: 'number',
+          appearances: [
+            { class:"text-primary cursor-pointer", conditions:[ { operator:'none' } ] }
+          ]
+        })
+      }
+    }
+  }
+
+  (preset.pivot.columns ?? []).filter(_ => !pivotColumns.find(i => i.key === _.key))
+    .forEach(_ => {
+      _.visible = false
+      pivotColumns.push(_)
+    })
+
+  preset.pivot.columns = pivotColumns
+
+}
+
 export {
   sortsFn,
   pickColumns,
-  setupConfig
+  setupConfig,
+  generatePivotColumns
 }

package/src/widgets/PresetBar.vue

@@ -14,7 +14,7 @@
         </div>
 
         <div class="p-3">
-          <div class="p-2">
+          <div class="px-2">
             <label class="text-text-300">Presets</label>
           </div>
           <div class="flex flex-col divide-y divide-text-50 bg-base-500 border-[1px] border-text-50 overflow-hidden rounded-lg">
@@ -95,7 +95,8 @@
                       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">
+                <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-1 hover:bg-primary-100">
                   <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>
@@ -103,7 +104,9 @@
                     <div>
                       <Checkbox v-model="item.visible" default="true" />
                     </div>
-                    {{ item.label2 ? item.label2 : (item.label ? item.label : item.key) }}
+                    <Textbox v-model="item.label2" :placeholder="item.label"
+                             class="border-none bg-transparent" :class="$style.columnTextbox"
+                             item-class="p-1 px-0" />
                   </div>
                 </div>
               </template>
@@ -509,7 +512,8 @@
                 </div>
                 <ListItem :items="presetPivot.values"
                           @reorder="(from, to) => { presetPivot.values.splice(to, 0, presetPivot.values.splice(from, 1)[0]); }"
-                          class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5">
+                          class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
+                          container-class="divide-y divide-text-50">
                   <template v-slot="{ item, index }">
                     <div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
                       <div data-reorder v-if="(presetPivot.values ?? []).length > 1">
@@ -521,10 +525,11 @@
                           {{ item.label ? item.label : item.key }}
                         </strong>
                         <select v-model="item.aggregrate"
-                                class="px-1 appearance-none bg-base-300 rounded-md border-[1px] border-text-50 outline-none"
+                                class="px-1 appearance-none bg-base-300 w-[80px] rounded-md border-[1px] border-text-50 outline-none"
                                 @change="apply()">
                           <option value="">Default</option>
                           <option value="count">Count</option>
+                          <option value="countDistinct">Distinct Count</option>
                           <option v-if="[ 'number' ].includes(item.type)" value="sum">Sum</option>
                           <option v-if="[ 'number' ].includes(item.type)" value="avg">Average</option>
                           <option v-if="[ 'number' ].includes(item.type)" value="min">Min</option>
@@ -539,6 +544,40 @@
                 </ListItem>
               </div>
 
+              <div>
+                <div class="flex flex-row items-center gap-2">
+                  <label class="flex-1">Columns</label>
+                  <button v-if="presetPivot.manualColumns"
+                          type="button"
+                          class="text-primary"
+                          @click="delete presetPivot.manualColumns; apply()">Reset</button>
+                </div>
+                <ListItem :items="presetPivot.columns"
+                          @reorder="(from, to) => { presetPivot.columns.splice(to, 0, presetPivot.columns.splice(from, 1)[0]); presetPivot.manualColumns = true; apply() }"
+                          class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
+                          container-class="divide-y divide-text-50">
+                  <template v-slot="{ item, index }">
+                    <div class="flex flex-row gap-2 items-center px-2 bg-base-500">
+                      <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>
+                      <Textbox class="flex-1 border-none" :class="$style.columnTextbox" v-model="item.label2" :placeholder="item.label"
+                        item-class="p-1"/>
+                      <button type="button" v-if="[ 'number' ].includes(item.type)" @click="">
+                        <svg width="13" height="13" :class="(item.appearances ?? []).length > 0 ? 'fill-primary' : 'fill-text-300 hover:fill-primary'"
+                             @click="$refs.presetBarPivotColumnEdit.open(item, next => { Object.assign(item, next); apply() })"
+                             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="M176 0h-128C21.49 0 0 21.49 0 48v128C0 202.5 21.49 224 48 224h128C202.5 224 224 202.5 224 176v-128C224 21.49 202.5 0 176 0zM176 288h-128C21.49 288 0 309.5 0 336v128C0 490.5 21.49 512 48 512h128C202.5 512 224 490.5 224 464v-128C224 309.5 202.5 288 176 288zM464 0h-128C309.5 0 288 21.49 288 48v128C288 202.5 309.5 224 336 224h128C490.5 224 512 202.5 512 176v-128C512 21.49 490.5 0 464 0zM488 376h-64v-64C424 298.8 413.3 288 400 288s-24 10.75-24 24v64h-64c-13.25 0-24 10.75-24 24s10.75 24 24 24h64v64c0 13.25 10.75 24 24 24s24-10.75 24-24v-64h64c13.25 0 24-10.75 24-24S501.3 376 488 376z"/></svg>
+                      </button>
+                      <button type="button" @click="presetPivot.columns.splice(index, 1); presetPivot.manualColumns = true; apply()">
+                        <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"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+                      </button>
+                    </div>
+                  </template>
+                </ListItem>
+
+                <PresetBarPivotColumnEdit ref="presetBarPivotColumnEdit" />
+              </div>
+
             </div>
 
           </div>
@@ -817,4 +856,8 @@ export default{
   @apply flex flex-col relative;
 }
 
+.columnTextbox input::placeholder{
+  @apply text-text;
+}
+
 </style>

package/src/widgets/PresetBarPivotColumnEdit.vue

@@ -0,0 +1,172 @@
+<template>
+	<Modal ref="modal" :hash="hash" :state="state" width="480" height="480">
+	  <template v-slot:head>
+	    <div class="relative p-6">
+	      <h3>{{ obj.label }}</h3>
+	      <div class="absolute top-0 right-0 p-2">
+	        <button type="button" class="p-2" @click="close">
+	          <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+	            <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+	          </svg>
+	        </button>
+	      </div>
+	    </div>
+	  </template>
+	  <template v-slot:foot>
+	    <div class="p-6">
+        <Button class="w-[100px]" @click="apply">Apply</Button>
+	    </div>
+	  </template>
+	  <div class="flex-1 p-6 flex flex-col gap-4">
+
+      <div class="flex flex-col gap-1">
+        <div class="flex flex-row gap-2">
+          <label class="text-text-400">Appearances</label>
+          <button type="button" class="text-primary" @click="appearances.push({ conditions:[{}], class:'' })">
+            <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 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></svg>
+          </button>
+        </div>
+        <ListItem :items="appearances"
+                  class="bg-transparent"
+                  @reorder="(from, to) => { appearances.splice(to, 0, appearances.splice(from, 1)[0]); }"
+                  container-class="flex flex-col gap-1">
+          <template v-slot="{ item, index }">
+            <div class="flex flex-row items-center gap-3">
+              <div class="flex-1 flex flex-col gap-1">
+                <div v-for="condition in item.conditions" class="flex flex-row gap-1">
+                  <Dropdown v-model="condition.operator" :class="condition.operator === 'none' ? 'w-[200px]' : 'w-[100px]'">
+                    <option v-for="op in operators" :value="op.value">{{ op.text }}</option>
+                    <option value="none">No Condition</option>
+                  </Dropdown>
+                  <Textbox v-if="condition.operator !== 'none'" v-model.numberconditions="condition.value" class="w-[100px]"/>
+                </div>
+              </div>
+              <div :class="item.class" class="px-2">
+                Sample
+              </div>
+              <div>
+                <Dropdown class="w-[120px]" v-model="item.class">
+                  <option value="text-primary cursor-pointer">Default</option>
+                  <option value="bg-red-100 text-red-600">Red 1</option>
+                  <option value="bg-red-200 text-red-600">Red 2</option>
+                  <option value="bg-red-300 text-red-600">Red 3</option>
+                  <option value="bg-red-400 text-white">Red 4</option>
+                  <option value="bg-red-500 text-white">Red 5</option>
+                  <option value="bg-green-100 text-green-700">Green 1</option>
+                  <option value="bg-green-200 text-green-700">Green 2</option>
+                  <option value="bg-green-300 text-green-700">Green 3</option>
+                  <option value="bg-green-400 text-white">Green 4</option>
+                  <option value="bg-green-500 border-[1px] border-green-600 text-white">Green 5</option>
+                  <option value="text-primary underline cursor-pointer">Underline</option>
+                </Dropdown>
+              </div>
+              <div>
+                <button type="button" @click="appearances.splice(index, 1)">
+                  <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"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+                </button>
+              </div>
+            </div>
+          </template>
+        </ListItem>
+      </div>
+	  </div>
+	</Modal>
+</template>
+
+<script>
+
+export default{
+
+  emits: [ 'apply' ],
+
+	inject: [ 'socketEmit2' ],
+
+  props: {
+
+    hash: String,
+    state: Boolean
+
+  },
+
+  computed: {
+
+    appearances(){
+      if(!Array.isArray(this.obj.appearances)){
+        this.obj.appearances = []
+      }
+      return this.obj.appearances
+    },
+
+    operators(){
+
+      let operators = []
+
+      switch(this.obj?.type){
+
+        case 'number':
+          operators = [
+            { value:">", text:">" },
+            { value:">=", text:">=" },
+            { value:"=", text:"=" },
+            { value:"<=", text:"<=" },
+            { value:"<", text:"<" }
+          ]
+          break
+
+        default:
+          operators = [
+            { value:"contains", text:"Contains" },
+            { value:"startsWith", text:"Starts With" },
+            { value:"endsWith", text:"Ends With" },
+            { value:"notContains", text:"Not Contains" },
+            { value:"notStartsWith", text:"Not Starts With" },
+            { value:"notEndsWith", text:"Not StartEnds With" },
+            { value:"regex", text:"Match Pattern" }
+          ]
+          break
+      }
+
+      return operators
+    }
+
+  },
+
+	data(){
+		return {
+      obj: null,
+      callback: null
+		}
+	},
+
+	methods: {
+
+    apply(){
+      if(typeof this.callback === 'function')
+        this.callback(this.obj)
+      this.$emit('apply', this.obj)
+      this.close()
+    },
+
+		open(obj, callback){
+      this.obj = JSON.parse(JSON.stringify(obj))
+      this.callback = callback
+			this.$refs.modal.open()
+		},
+
+		close(){
+      this.$refs.modal.close()
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>