@mixd-id/web-scaffold 0.2.250801014 → 0.2.260801002

package/src/components/PivotList.vue

@@ -0,0 +1,1239 @@
+<template>
+  <div class="flex flex-col bg-base-400 md:bg-transparent"
+       v-intersect="onVisibleChange">
+
+    <div v-if="readyState >= 1"
+         class="flex-1 flex flex-row">
+
+      <div v-if="computedPresetMode === 'sidebar' && sidebar.open"
+           class="relative flex flex-col border-r-[1px] border-border-50 bg-base-400"
+           :style="sidebarStyle">
+
+        <div class="flex-1 flex flex-col relative">
+          <PresetBar :config="cConfig"
+                     class="flex-1"
+                     :enumCache="enumCache"
+                     :controller="controller"
+                     :preset-key="presetKey"
+                     @apply="load">
+
+            <template #toolbar>
+              <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>
+
+        <div v-if="sidebar.open"
+             :class="$style.resize1"
+             @mousedown="(e) => $util.dragResize(e, resize1)"></div>
+      </div>
+
+      <div v-if="preset" class="flex-1 flex flex-col relative">
+
+        <div class="flex-1 flex flex-col" :class="containerClass">
+          <slot name="head"
+                :preset="preset"
+                :presetSelector="$refs.presetSelector"
+                :compPrefix="compPrefix">
+            <div class="flex flex-col md:flex-row gap-3 md:items-end overflow-hidden p-3 pb-1 md:p-0"
+                 :class="headerClass">
+              <div class="flex md:flex-1 flex-row items-end md:gap-3 py-1 md:py-0" @click="log(cConfig)">
+                <slot name="left"></slot>
+                <div class="flex flex-row gap-2 md:gap-3 items-center px-3" ref="title">
+                  <div class="flex flex-col whitespace-nowrap text-ellipsis overflow-hidden">
+                    <div class="cursor-pointer group leading-4" @click="$refs.contextMenu.open($refs.title)">
+                      <small class="text-text-400 text-xs">{{ title ?? 'Untitled' }}</small>
+                      <div class="flex flex-row items-baseline gap-1">
+                        <h3 class="whitespace-nowrap relative text-ellipsis overflow-hidden group-hover:text-primary">
+                          {{ preset.name ?? 'Preset Name' }}
+                        </h3>
+                        <svg width="13" height="13" class="fill-text group-hover:fill-primary relative top-[-1px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
+                      </div>
+                    </div>
+                    <ContextMenu ref="contextMenu" class="bg-base-300 mt-4">
+                      <div class="flex flex-col min-w-[280px] max-w-[400px] p-1">
+
+                        <div class="flex flex-col gap-1 bg-base-300">
+                          <button v-for="(preset, idx) in configPresets"
+                                  class="p-2 px-5 text-left flex flex-row items-center rounded-md"
+                                  :class="configParams.presetIdx === preset.uid ? 'bg-primary-200 text-white' : 'hover:bg-primary-100'"
+                                  type="button"
+                                  @click="selectPreset(idx)">
+                            <label class="flex-1 pr-12 text-ellipsis-nowrap">
+                              {{ 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="my-2 h-[1px] bg-border-50"></div>
+
+                        <div class="px-3">
+                          <button type="button" class="text-primary p-3 text-left w-full" @click="openPreset">Edit</button>
+                        </div>
+
+                      </div>
+                    </ContextMenu>
+                  </div>
+                </div>
+
+                <slot name="left-toolbar"></slot>
+
+                <div class="flex-1"></div>
+
+                <slot name="toolbar">
+                </slot>
+
+                <slot name="right-toolbar">
+                  <div class="hidden md:flex flex-row gap-2" v-if="Boolean(toolbar)">
+                    <Textbox v-if="canSearch"
+                             class="flex-1 md:w-[240px]"
+                             placeholder="Search..."
+                             clearable="1"
+                             maxlength="100"
+                             v-model="preset.search"
+                             @clear="delete preset.search; load()"
+                             @keyup.enter="load">
+                      <template #start>
+                        <div class="p-2 pr-0">
+                          <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M504.1 471l-134-134C399.1 301.5 415.1 256.8 415.1 208c0-114.9-93.13-208-208-208S-.0002 93.13-.0002 208S93.12 416 207.1 416c48.79 0 93.55-16.91 129-45.04l134 134C475.7 509.7 481.9 512 488 512s12.28-2.344 16.97-7.031C514.3 495.6 514.3 480.4 504.1 471zM48 208c0-88.22 71.78-160 160-160s160 71.78 160 160s-71.78 160-160 160S48 296.2 48 208z"/></svg>
+                        </div>
+                      </template>
+                    </Textbox>
+                  </div>
+                </slot>
+              </div>
+
+            </div>
+          </slot>
+
+          <div class="md:hidden">
+            <slot name="mobile-toolbar">
+              <div class="p-3">
+                <Textbox v-if="canSearch"
+                         placeholder="Search..."
+                         class="bg-base-300"
+                         clearable="1"
+                         maxlength="100"
+                         v-model="preset.search"
+                         @clear="delete preset.search; load()"
+                         @keyup.enter="load">
+                  <template #start>
+                    <div class="p-2 pr-0">
+                      <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M504.1 471l-134-134C399.1 301.5 415.1 256.8 415.1 208c0-114.9-93.13-208-208-208S-.0002 93.13-.0002 208S93.12 416 207.1 416c48.79 0 93.55-16.91 129-45.04l134 134C475.7 509.7 481.9 512 488 512s12.28-2.344 16.97-7.031C514.3 495.6 514.3 480.4 504.1 471zM48 208c0-88.22 71.78-160 160-160s160 71.78 160 160s-71.78 160-160 160S48 296.2 48 208z"/></svg>
+                    </div>
+                  </template>
+                </Textbox>
+              </div>
+            </slot>
+          </div>
+
+          <!-- Formula bar — spreadsheet-style editor for client-side virtual
+               columns. Formulas reference pivot result columns as [key] and
+               are recomputed locally, no server round-trip. -->
+          <div v-if="pivotReady && Boolean(toolbar)" class="flex flex-col gap-1 px-3 md:px-0">
+            <div class="flex flex-row items-center gap-2 bg-base-300 border-[1px] border-border-50 rounded-lg px-3 py-1">
+              <em class="font-serif italic font-bold text-text-300 select-none" title="Virtual columns — calculated client-side">fx</em>
+
+              <select class="appearance-none bg-transparent outline-none max-w-[160px] text-ellipsis border-r-[1px] border-border-50 pr-2"
+                      :value="formulaBar.key"
+                      @change="e => selectFormula(e.target.value)">
+                <option value="">+ New column</option>
+                <option v-for="vc in virtualColumns" :key="vc.key" :value="vc.key">{{ vc.label || vc.key }}</option>
+              </select>
+
+              <input class="w-[140px] bg-transparent outline-none border-r-[1px] border-border-50 pr-2"
+                     placeholder="Column name"
+                     v-model="formulaBar.name"
+                     @keyup.enter="applyFormula" />
+
+              <input class="flex-1 bg-transparent outline-none font-mono text-sm"
+                     placeholder='=([_amount-sum] - [_cost-sum]) / [_amount-sum]'
+                     v-model="formulaBar.formula"
+                     @focus="formulaBar.focused = true"
+                     @blur="formulaBar.focused = false"
+                     @keyup.enter="applyFormula" />
+
+              <button type="button" class="text-primary px-1" title="Apply formula (Enter)" @click="applyFormula">
+                <svg width="14" height="14" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>
+              </button>
+              <button v-if="formulaBar.key" type="button" class="px-1" title="Remove this virtual column" @click="removeFormula">
+                <svg width="14" height="14" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="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 v-if="formulaBar.error" class="text-red-500 text-sm px-2">
+              {{ formulaBar.error }}
+            </div>
+
+            <div v-if="formulaBar.focused && formulaRefs.length > 0"
+                 class="flex flex-row flex-wrap gap-1 px-1">
+              <button v-for="key in formulaRefs" :key="key"
+                      type="button"
+                      class="px-2 rounded-md bg-base-300 border-[1px] border-border-50 text-xs text-text-400 hover:text-primary hover:border-primary font-mono"
+                      @mousedown.prevent="insertRef(key)">
+                [{{ key }}]
+              </button>
+            </div>
+          </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="!pivotReady" class="flex-1 flex flex-col items-center justify-center gap-3 text-text-300">
+              <p>Add at least one group or aggregate to build the pivot.</p>
+              <button type="button" class="text-primary" @click="openPreset">Open preset editor</button>
+            </div>
+
+            <div v-else class="flex-1 flex flex-col">
+              <VirtualTable
+                  ref="table"
+                  :columns="columns"
+                  class="flex-1 bg-base-300"
+                  :items="dataItems"
+                  :enumCache="enumCache"
+                  :freeze-left="freezeLeft"
+                  :item-class="itemClass"
+                  @freeze="freeze"
+                  @unfreeze="unfreeze"
+                  @item-click="onTableItemClick"
+                  @dragover="(...args) => $emit('dragover', ...args)">
+
+                <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]="{ column, item, index, selected }">
+                  <slot :name="slot" :item="item" :index="index" :selected="selected" :column="column"></slot>
+                </template>
+
+              </VirtualTable>
+            </div>
+
+            <PresetSelector ref="presetSelector" :config="cConfig" @select="load" />
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+import VirtualTable from "./VirtualTable.vue";
+import PresetSelector from "./PresetSelector.vue";
+import PresetBar from "./PresetBar.vue";
+import {generatePivotColumns, generateTotalColumns, parsePivotKey, setupConfig} from "../utils/preset-selector.mjs";
+import {invokeAfterIdle} from "../utils/helpers.mjs";
+import {compileFormula} from "../utils/pivot-formula.mjs";
+
+export default{
+
+  emits: [ 'dragover', 'after-load', 'open-preset', 'signal', 'pivot-item-click', 'item-click' ],
+
+  inject: [ 'useSocket', 'toast' ],
+
+  props: {
+    config: Object,
+    defaultConfig: Function,
+    presetKey: String,
+    subscribeKey: String,
+    controller: String,
+    title: String,
+    updateInterval: {
+      type: Number,
+      default: 1200
+    },
+
+    src: undefined,
+    headerClass: String,
+    presetMode: {
+      type: String,
+      default: "sidebar"
+    },
+    containerClass: {
+      type: String,
+      default: "md:p-8 md:gap-5"
+    },
+    itemClass: String,
+    toolbar: {
+      type: [ String, Boolean ],
+      default: true
+    },
+    itemsFn: Function,
+    searchable: {
+      type: [ Boolean, String ],
+      default: true
+    }
+  },
+
+  methods: {
+
+    // Merge server (model-derived) column types into every column def that
+    // doesn't declare one — includes dotted relationship keys resolved by the
+    // pivot-list mixin, so date/number/boolean pivot behaviors kick in without
+    // declaring types by hand.
+    applyColumnTypes(types){
+      if(!types || typeof types !== 'object') return
+      const fill = (columns) => (columns ?? []).forEach(column => {
+        if(column.key && !column.type && types[column.key] && types[column.key] !== 'string'){
+          column.type = types[column.key]
+        }
+      })
+      fill(this.cConfig.columns)
+      ;(this.cConfig.presets ?? []).forEach(preset => fill(preset.columns))
+      ;(this.cConfig.sharedPresets ?? []).forEach(preset => fill(preset.columns))
+    },
+
+    getEnumText(key, value){
+
+      let enumText
+
+      const column = this.cConfig.columns.find(_ => _.key === key)
+
+      if(Array.isArray(column?.typeParams)){
+        const typeParam = (column.typeParams ?? []).filter((_) => _.value === value).pop()
+        enumText = typeParam && typeParam.text ? typeParam.text : enumText
+      }
+
+      if(this.enumCache && this.enumCache[key] && this.enumCache[key][value]){
+        enumText = this.enumCache[key][value].text ?? enumText
+      }
+
+      return enumText ? enumText : value
+    },
+
+    getHeader(column){
+
+      return [
+        this.$style.header,
+        (this.preset.filters ?? []).findIndex((_) => _.key === column.key && _.enabled) >= 0 ?
+            this.$style.headerSelected : ''
+      ]
+          .join(' ')
+    },
+
+    load(){
+      if(!this.computedSrc || !this.preset) return Promise.resolve()
+
+      if(!this.preset.columns){
+        this.preset.columns = JSON.parse(JSON.stringify(this.cConfig.columns))
+      }
+
+      if(!this.pivotReady){
+        this.data.items = []
+        return Promise.resolve()
+      }
+
+      this.readyState = 2
+      return this.useSocket().send(this.computedSrc, {
+        ...this.preset,
+        id: undefined,
+        uid: undefined,
+      })
+          .then(data => {
+            if(data?.items){
+              this.applyColumnTypes(data.columnTypes)
+              generatePivotColumns(this.preset, data.items)
+              generateTotalColumns(this.preset, data.items)
+              Object.assign(this.data, data ?? {})
+              this.applyVirtualColumns()
+              this.loadEnums(this.data.items)
+              this.$emit('after-load')
+            }
+          })
+          .catch(err => this.toast(err))
+          .finally(_ => this.readyState = 1)
+    },
+
+    async loadPreset(){
+      if(!Object.keys(this.$route.query).map(_ => _.toLowerCase()).includes('reset')){
+        if(this.presetKey){
+          const config = await this.useSocket().send(this.presetSrc, { key:this.presetKey })
+          if(config && (config.presets ?? []).length > 0){
+            Object.assign(this.cConfig, config)
+
+            if(this.$route.query?.search)
+              this.preset.search = this.$route.query.search
+          }
+          else{
+            const defaultConfig = setupConfig(typeof this.defaultConfig === 'function' ? await this.defaultConfig() : {})
+            Object.assign(this.cConfig, defaultConfig)
+          }
+        }
+        else{
+          const defaultConfig = setupConfig(typeof this.defaultConfig === 'function' ? await this.defaultConfig() : {})
+          Object.assign(this.cConfig, defaultConfig)
+        }
+      }
+      else{
+        if(this.defaultConfig){
+          const defaultConfig = setupConfig(await this.defaultConfig())
+          Object.assign(this.cConfig, defaultConfig)
+        }
+
+        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
+        })
+      }
+    },
+
+    async loadEnums(items){
+      if(!items) return
+
+      return Promise.all((this.preset.columns ?? []).map(async column => {
+
+        if(column.enumSrc) {
+
+          if(!this.enumCache[column.key])
+            this.enumCache[column.key] = {}
+
+          for(let item of items){
+            if(item[column.key] && !this.enumCache[column.key][item[column.key]]){
+              this.enumCache[column.key][item[column.key]] = { value:item[column.key] }
+            }
+          }
+
+          const reqItems = Object.values(this.enumCache[column.key]).filter(_ => !_.text).map(_ => _.value)
+
+          if(reqItems.length > 0 && reqItems !== this.lastEnumItems){
+
+            const [ src, key, attr ] = column.enumSrc.split(':')
+            const res = await this.useSocket().send(src, {
+              columns: [
+                { key:attr, visible:true }
+              ],
+              filters: [
+                {
+                  key:key, value: [ { operator:'in', value:reqItems } ]
+                }
+              ]
+            });
+
+            (res.items ?? []).forEach(_ => {
+              this.enumCache[column.key][_[key]] = {
+                text: _[attr] ?? _[key],
+                value: _[key],
+              }
+            })
+
+            for(let key in this.enumCache[column.key]){
+              if(!this.enumCache[column.key][key].text)
+                this.enumCache[column.key][key].text = key
+            }
+
+            this.lastEnumItems = reqItems
+          }
+        }
+
+      }))
+    },
+
+    // ------------------------------------------------ virtual columns
+
+    // Recompute every virtual column over the loaded pivot rows (total row
+    // included — the formula runs on the totals like a spreadsheet would) and
+    // sync their column defs into pivot.columns.
+    applyVirtualColumns(){
+      const pivot = (this.preset ?? {}).pivot
+      if(!pivot) return
+
+      const virtuals = this.virtualColumns
+      const items = this.data.items ?? []
+
+      // drop defs whose virtual column no longer exists
+      if(Array.isArray(pivot.columns)){
+        for(let i = pivot.columns.length - 1 ; i >= 0 ; i--){
+          if(pivot.columns[i].virtual && !virtuals.find(_ => _.key === pivot.columns[i].key)){
+            pivot.columns.splice(i, 1)
+          }
+        }
+      }
+
+      for(const vc of virtuals){
+        let compiled
+        try{
+          compiled = compileFormula(vc.formula)
+        }
+        catch(err){
+          compiled = { evaluate: () => err.code ?? '#ERROR!' }
+        }
+
+        let isString = false
+        for(const item of items){
+          const value = compiled.evaluate(item)
+          item[vc.key] = value
+          if(typeof value === 'string' && !value.startsWith('#')) isString = true
+        }
+
+        const type = vc.type ?? (isString ? 'string' : 'number')
+        const def = (pivot.columns ?? []).find(_ => _.key === vc.key)
+        if(def){
+          Object.assign(def, { label: vc.label || vc.key, type, virtual: true })
+        }
+        else{
+          (pivot.columns = pivot.columns ?? []).push({
+            key: vc.key,
+            label: vc.label || 'Formula',
+            tooltip: vc.formula,
+            type,
+            virtual: true
+          })
+        }
+      }
+    },
+
+    selectFormula(key){
+      const vc = this.virtualColumns.find(_ => _.key === key)
+      Object.assign(this.formulaBar, vc ?
+          { key, name: vc.label, formula: vc.formula, error: '' } :
+          { key: '', name: '', formula: '', error: '' })
+    },
+
+    applyFormula(){
+      const { key, name, formula } = this.formulaBar
+      if(!`${formula ?? ''}`.replace(/^\s*=/, '').trim()) return
+
+      try{
+        compileFormula(formula)
+      }
+      catch(err){
+        this.formulaBar.error = err.message
+        return
+      }
+      this.formulaBar.error = ''
+
+      let vc = this.virtualColumns.find(_ => _.key === key)
+      if(!vc){
+        vc = { key: `_vc_${Math.random().toString(36).slice(2, 8)}` }
+        this.virtualColumns.push(vc)
+        this.formulaBar.key = vc.key
+      }
+      vc.label = name || vc.label || 'Formula'
+      vc.formula = formula
+
+      this.applyVirtualColumns()
+    },
+
+    removeFormula(){
+      const idx = this.virtualColumns.findIndex(_ => _.key === this.formulaBar.key)
+      if(idx >= 0) this.virtualColumns.splice(idx, 1)
+      this.selectFormula('')
+      this.applyVirtualColumns()
+    },
+
+    insertRef(key){
+      this.formulaBar.formula = `${this.formulaBar.formula ?? ''}[${key}]`
+    },
+
+    // ------------------------------------------------ presets
+
+    resize1(w){
+      if(this.sidebar.width + w >= 200 && this.sidebar.width + w <= 600){
+        this.sidebar.width += w
+      }
+    },
+
+    selectPreset(idx){
+      if(this.configPresets[idx]){
+        this.configParams.presetIdx = this.configPresets[idx].uid
+        this.selectFormula('')
+        this.load()
+        this.$refs.presetSelector?.close()
+        this.$refs.contextMenu?.close()
+      }
+    },
+
+    savePreset: invokeAfterIdle(function() {
+      if(this.presetKey) {
+        this.useSocket().send(this.presetSrc,
+            {key: this.presetKey, config: this.cConfig})
+      }
+    }),
+
+    openPreset(){
+
+      switch(this.computedPresetMode){
+
+        case 'external':
+          this.$emit('open-preset')
+          break
+
+        case 'sidebar':
+          this.sidebar.open = true
+          break
+
+        default:
+          this.$refs.presetSelector.open()
+          break
+
+      }
+    },
+
+    togglePreset(){
+      switch(this.computedPresetMode){
+
+        case 'sidebar':
+          this.sidebar.open = !this.sidebar.open
+          break
+
+        case 'popup':
+          this.$refs.presetSelector.open()
+          break
+      }
+    },
+
+    // Pivot rows are aggregates — realtime signals can't be patched in, so
+    // re-run the pivot query (debounced: bursts collapse into one reload).
+    onSignal(event, items){
+      if(!this._pivotReload){
+        this._pivotReload = invokeAfterIdle(() => this.load(), { delay: this.updateInterval, flushOnExit: false })
+      }
+      this._pivotReload()
+      this.$emit('signal', event, items)
+    },
+
+    // Clicking an aggregate cell emits `pivot-item-click` with the equivalent
+    // row filters — data-type aware (booleans compare as booleans, date
+    // buckets become format_* fn filters). The host decides what to do with
+    // them (navigate to a List, open a modal, …) — PivotList itself renders
+    // only the single pivot table.
+    onTableItemClick(item, column){
+      if(item._type === 'totalRow') return
+
+      if(!(column.key ?? '').startsWith('_') || column.virtual){
+        this.$emit('item-click', item, column)
+        return
+      }
+
+      const filters = []
+
+      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) ?? pivotRow
+        let value = item[pivotRow.key]
+        switch(presetColumn.type){
+
+          case 'bool':
+          case 'boolean':
+            filters.push({
+              key,
+              value: [{
+                operator: '=',
+                value: value === 'true' || value === true || value === 1
+              }]
+            })
+            break
+
+          case 'date':
+            switch(pivotRow.aggregate ?? pivotRow.aggregrate){
+
+              case 'hour':
+                value = value.split('-')
+                filters.push({
+                  key,
+                  value: [{
+                    operator: '=',
+                    value: value[0].split(':')[0],
+                    fn: 'format_hour'
+                  }]
+                })
+                break
+
+              case 'date':
+              case 'week':
+              case 'month':
+              case 'quarter':
+              case 'year': {
+                const bucket = pivotRow.aggregate ?? pivotRow.aggregrate
+                filters.push({
+                  key,
+                  value: [{
+                    operator: '=',
+                    value: value,
+                    fn: `format_${bucket}`
+                  }]
+                })
+                break
+              }
+
+            }
+            break
+
+          default:
+            filters.push({
+              key,
+              value: [{
+                operator: '=',
+                value
+              }]
+            })
+            break
+        }
+
+      }
+
+      // The clicked value column adds the drill-down filter:
+      //   spread columns -> spread field = the clicked group value
+      //   plain sum      -> measure > 0
+      const parsed = column.key === '_rowTotal' ? null : parsePivotKey(column.key, this.preset.pivot)
+
+      if(parsed && parsed.spread != null){
+        const key = parsed.spreadKey
+        const presetColumn = this.preset.columns.find(_ => _.key === key)
+            ?? (this.cConfig.columns ?? []).find(_ => _.key === key)
+        let value = parsed.spread
+        switch(presetColumn?.type){
+
+          case 'bool':
+          case 'boolean':
+            value = value === 'true'
+            break
+
+          default:
+            value = value === '(empty)' ? '' :
+                value === '(null)' ? null :
+                    value.replaceAll('_', ' ')
+            break
+        }
+
+        filters.push({
+          key,
+          value: [{
+            operator: '=',
+            value
+          }]
+        })
+      }
+      else if(parsed && parsed.aggregate === 'sum'){
+        filters.push({
+          key: parsed.field,
+          value: [{
+            operator: '>',
+            value: 0
+          }]
+        })
+      }
+
+      this.$emit('pivot-item-click', { item, column, filters })
+    },
+
+    resize(){
+      this.$refs.table ? this.$refs.table.resize() : null
+    },
+
+    onConnect(reconnect){
+      if(reconnect){
+        this.load()
+      }
+    },
+
+    onKeyDown(e){
+
+      if(e.altKey){
+
+        switch(e.code){
+
+          case 'Backquote':
+            this.togglePreset()
+            break
+
+          default:
+            if(e.code.startsWith('Digit')){
+              const idx = parseInt(e.code.substring(5)) - 1
+              if(this.configPresets[idx]) {
+                this.selectPreset(idx)
+              }
+            }
+            break
+        }
+
+      }
+    },
+
+    freeze(key){
+      const freezed = this.columns.find(_ => _.freeze)
+      if(freezed){
+        delete freezed.freeze
+      }
+
+      const column = this.columns.find(_ => _.key === key)
+      if(column){
+        column.freeze = true
+      }
+    },
+
+    unfreeze(key){
+
+      const column = this.columns.find(_ => _.key === key)
+      if(column){
+        delete column.freeze
+      }
+    },
+
+    onVisibleChange({ inViewport }){
+      if(inViewport){
+        this.$addResizeListener(this.$el, () => this.compPrefix = this.$util.calculateMediaPrefix(this.$el.clientWidth))
+
+        this.loadPreset()
+            .finally(() => {
+              this.readyState = 1
+              this.$nextTick(() => {
+                this.load()
+              })
+            })
+
+        if(this.subscribeKey){
+          this.useSocket().send('user.subscribe', { name:this.subscribeKey })
+          this.useSocket().on(this.subscribeKey, this.onSignal)
+        }
+
+        window.addEventListener('keydown', this.onKeyDown)
+
+        this.useSocket().on('connect', this.onConnect)
+      }
+    },
+
+  },
+
+  components: {PresetBar, PresetSelector, VirtualTable},
+
+  unmounted() {
+    this.$removeResizeListener(this.$el)
+    window.removeEventListener('keydown', this.onKeyDown)
+
+    if(this.subscribeKey) {
+      this.useSocket().send('user.unsubscribe', {name: this.subscribeKey})
+      this.useSocket().off(this.subscribeKey, this.onSignal)
+    }
+
+    this.useSocket().off('connect', this.onConnect)
+  },
+
+  computed: {
+
+    columns(){
+      return ((this.preset ?? {}).pivot ?? {}).columns ?? []
+    },
+
+    cConfig(){
+      return setupConfig(this.config ?? this._config)
+    },
+
+    contentSlots(){
+      const slots = {}
+      for(let key in this.$slots){
+        if(!key.startsWith('col-'))
+          slots[key] = this.$slots[key]
+      }
+      return slots
+    },
+
+    headerSlots(){
+      const slots = {}
+      for(let key in this.$slots){
+        if(key.startsWith('col-'))
+          slots[key] = this.$slots[key]
+      }
+      return slots
+    },
+
+    computedPresetMode(){
+      return this.$device.type === 'mobile' ? 'popup' : this.presetMode
+    },
+
+    dataItems(){
+      // pivot results arrive ordered by the server (pivot.sorts falling back
+      // to preset.sorts) — no client-side re-sorting
+      if(typeof this.itemsFn === 'function'){
+        return this.itemsFn(this.data.items)
+      }
+      return this.data.items
+    },
+
+    // A PivotList preset is ALWAYS in pivot mode — that's the component's
+    // contract with the pivot-list server mixin.
+    preset(){
+      const preset = this.configPresets.find(_ => _.uid === this.configParams.presetIdx) ??
+          this.configSharedPresets.find(_ => _.uid === this.configParams.presetIdx)
+
+      if(preset){
+        if(!preset.pivot || typeof preset.pivot !== 'object' || Array.isArray(preset.pivot)){
+          preset.pivot = { rows:[], values:[], columns:[] }
+        }
+        preset.pivot.enabled = true
+
+        if(this.$route.query?.search)
+          preset.search = this.$route.query.search
+      }
+
+      return preset
+    },
+
+    pivotReady(){
+      const pivot = (this.preset ?? {}).pivot ?? {}
+      return (pivot.rows ?? []).length > 0 || (pivot.values ?? []).length > 0
+    },
+
+    virtualColumns(){
+      const pivot = (this.preset ?? {}).pivot
+      if(!pivot) return []
+      if(!Array.isArray(pivot.virtualColumns))
+        pivot.virtualColumns = []
+      return pivot.virtualColumns
+    },
+
+    // Insertable [refs] for the formula bar: every pivot result column that
+    // isn't itself a formula.
+    formulaRefs(){
+      return this.columns.filter(_ => _.key && !_.virtual).map(_ => _.key)
+    },
+
+    presetSrc(){
+      return this.controller ?
+          `${this.controller}.preset` :
+          'user.preset'
+    },
+
+    configParams(){
+      if(!this.cConfig.params)
+        this.cConfig.params = {}
+
+      if(this.configPresets.length > 0 &&
+          (!this.cConfig.params.presetIdx ||
+              !this.configPresets.find(_ => _.uid === this.cConfig.params.presetIdx)))
+        this.cConfig.params.presetIdx = this.configPresets[0].uid
+
+      return this.cConfig.params
+    },
+
+    configPresets(){
+      return this.cConfig.presets ?? []
+    },
+
+    configSharedPresets(){
+      return this.cConfig.sharedPresets ?? []
+    },
+
+    canSearch(){
+      return [ 1, true, 'true' ].includes(this.searchable)
+    },
+
+    sidebar(){
+
+      if(!this.configParams.sidebar || !('open' in this.configParams.sidebar))
+        this.configParams.sidebar = {
+          open: false,
+          width: 360
+        }
+
+      return this.configParams.sidebar
+    },
+
+    sidebarStyle(){
+      return {
+        width: !this.sidebar.open ? 0 : this.sidebar.width + 'px'
+      }
+    },
+
+    computedSrc(){
+      return this.src ?? (this.controller ? `${this.controller}.pivot-load` : null)
+    },
+
+    freezeLeft(){
+      return this.columns.findIndex(_ => _.freeze) + 1
+    },
+
+  },
+
+  data(){
+    return {
+      readyState: 0,
+      data: {
+        items: []
+      },
+      compPrefix: '',
+      enumCache: {},
+      lastEnumItems: null,
+      formulaBar: {
+        key: '',
+        name: '',
+        formula: '',
+        error: '',
+        focused: false
+      },
+      _config: {
+        columns:[],
+        presets:[]
+      }
+    }
+  },
+
+  provide(){
+    return {
+      listStyle: this.$style,
+      load: this.load
+    }
+  },
+
+  watch: {
+
+    cConfig: {
+      deep: true,
+      handler(){
+        this.savePreset()
+      }
+    },
+
+  },
+
+}
+
+</script>
+
+<style module>
+
+.resize1{
+  @apply w-[3px] cursor-ew-resize absolute top-0 right-0 bottom-0;
+}
+
+.pv-green1, .pv-green2, .pv-green3, .pv-green4, .pv-green5{
+  @apply rounded-lg text-right text-text cursor-pointer;
+}
+.pv-green1{
+  background-color: #d3f3df;
+}
+.pv-green2{
+  background-color: #bdeecf;
+}
+.pv-green3{
+  background-color: #a7e8bf;
+}
+.pv-green4{
+  background-color: #91e2af;
+}
+.pv-green5{
+  background-color: #7adc9e;
+}
+html[data-theme="dark"] .pv-green1{
+  @apply text-text;
+  background-color: #031409;
+}
+html[data-theme="dark"] .pv-green2{
+  @apply text-text;
+  background-color: #072713;
+}
+html[data-theme="dark"] .pv-green3{
+  @apply text-text;
+  background-color: #0a3b1c;
+}
+html[data-theme="dark"] .pv-green4{
+  @apply text-text;
+  background-color: #0e4f26;
+}
+html[data-theme="dark"] .pv-green5{
+  @apply text-text;
+  background-color: #11632f;
+}
+
+.pv-red1, .pv-red2, .pv-red3, .pv-red4, .pv-red5{
+  @apply rounded-lg text-right text-text cursor-pointer;
+}
+.pv-red1{
+  background-color: #fce9e9;
+}
+.pv-red2{
+  background-color: #f8d4d4;
+}
+.pv-red3{
+  background-color: #f5bebe;
+}
+.pv-red4{
+  background-color: #f1a8a8;
+}
+.pv-red5{
+  background-color: #ee9393;
+}
+html[data-theme="dark"] .pv-red1{
+  @apply text-text;
+  background-color: #160404;
+}
+html[data-theme="dark"] .pv-red2{
+  @apply text-text;
+  background-color: #2c0808;
+}
+html[data-theme="dark"] .pv-red3{
+  @apply text-text;
+  background-color: #420b0b;
+}
+html[data-theme="dark"] .pv-red4{
+  @apply text-text;
+  background-color: #580f0f;
+}
+html[data-theme="dark"] .pv-red5{
+  @apply text-text;
+  background-color: #6e1313;
+}
+
+.pv-blue1, .pv-blue2, .pv-blue3, .pv-blue4, .pv-blue5{
+  @apply rounded-lg text-right text-text cursor-pointer;
+}
+.pv-blue1{
+  background-color: #e9effd;
+}
+.pv-blue2{
+  background-color: #d3e0fb;
+}
+.pv-blue3{
+  background-color: #bed0f9;
+}
+.pv-blue4{
+  background-color: #a8c1f7;
+}
+.pv-blue5{
+  background-color: #92b1f5;
+}
+html[data-theme="dark"] .pv-blue1{
+  @apply text-text;
+  background-color: #040a17;
+}
+html[data-theme="dark"] .pv-blue2{
+  @apply text-text;
+  background-color: #07142f;
+}
+html[data-theme="dark"] .pv-blue3{
+  @apply text-text;
+  background-color: #0b1e46;
+}
+html[data-theme="dark"] .pv-blue4{
+  @apply text-text;
+  background-color: #0f285e;
+}
+html[data-theme="dark"] .pv-blue5{
+  @apply text-text;
+  background-color: #133276;
+}
+
+.pv-yellow1, .pv-yellow2, .pv-yellow3, .pv-yellow4, .pv-yellow5{
+  @apply rounded-lg text-right text-text cursor-pointer;
+}
+.pv-yellow1{
+  background-color: #fdf7e6;
+}
+.pv-yellow2{
+  background-color: #fbf0ce;
+}
+.pv-yellow3{
+  background-color: #f9e8b5;
+}
+.pv-yellow4{
+  background-color: #f7e19c;
+}
+.pv-yellow5{
+  background-color: #f5d984;
+}
+html[data-theme="dark"] .pv-yellow1{
+  @apply text-text;
+  background-color: #171201;
+}
+html[data-theme="dark"] .pv-yellow2{
+  @apply text-text;
+  background-color: #2f2402;
+}
+html[data-theme="dark"] .pv-yellow3{
+  @apply text-text;
+  background-color: #463602;
+}
+html[data-theme="dark"] .pv-yellow4{
+  @apply text-text;
+  background-color: #5e4803;
+}
+html[data-theme="dark"] .pv-yellow5{
+  @apply text-text;
+  background-color: #755a04;
+}
+
+.pv-fuchsia1, .pv-fuchsia2, .pv-fuchsia3, .pv-fuchsia4, .pv-fuchsia5{
+  @apply rounded-lg text-right text-text cursor-pointer;
+}
+.pv-fuchsia1{
+  background-color: #f6e8f7;
+}
+.pv-fuchsia2{
+  background-color: #edd2ef;
+}
+.pv-fuchsia3{
+  background-color: #e3bbe7;
+}
+.pv-fuchsia4{
+  background-color: #daa4df;
+}
+.pv-fuchsia5{
+  background-color: #d18ed7;
+}
+html[data-theme="dark"] .pv-fuchsia1{
+  @apply text-text;
+  background-color: #100311;
+}
+html[data-theme="dark"] .pv-fuchsia2{
+  @apply text-text;
+  background-color: #210623;
+}
+html[data-theme="dark"] .pv-fuchsia3{
+  @apply text-text;
+  background-color: #310834;
+}
+html[data-theme="dark"] .pv-fuchsia4{
+  @apply text-text;
+  background-color: #410b46;
+}
+html[data-theme="dark"] .pv-fuchsia5{
+  @apply text-text;
+  background-color: #520e58;
+}
+
+.pv-gradient1, .pv-gradient2, .pv-gradient3, .pv-gradient4, .pv-gradient5, .pv-default{
+  @apply rounded-lg text-right text-text cursor-pointer;
+}
+.pv-gradient1{
+  @apply bg-gradient-to-r from-cyan-500 to-blue-500;
+}
+.pv-gradient2{
+  @apply bg-gradient-to-r from-sky-500 to-indigo-500;
+}
+.pv-gradient3{
+  @apply bg-gradient-to-r from-violet-500 to-fuchsia-500;
+}
+.pv-gradient4{
+  @apply bg-gradient-to-r from-purple-500 to-pink-500;
+}
+.pv-gradient5{
+  @apply bg-gradient-to-r from-pink-500 to-teal-500;
+}
+.pv-default{
+  @apply text-primary;
+}
+
+</style>