@mixd-id/web-scaffold 0.1.230406394 → 0.1.230406396

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406394",
+  "version": "0.1.230406396",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -52,7 +52,7 @@
     "@tailwindcss/line-clamp": "^0.4.0",
     "@vueuse/core": "^9.0.2",
     "adm-zip": "^0.5.10",
-    "axios": "^1.7.9",
+    "axios": "1.8.2",
     "bcrypt": "^5.1.1",
     "chart.js": "^4.2.1",
     "compression": "^1.7.4",
@@ -69,11 +69,11 @@
     "md5": "^2.3.0",
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
-    "pinia": "^2.3.0",
-    "prismjs": "^1.28.0",
+    "pinia": "^2.0.2",
+    "prismjs": "1.30.0",
     "redis": "^4.6.13",
     "sequelize": "^6.37.5",
-    "serve-static": "^1.15.0",
+    "serve-static": "2.1.0",
     "tailwindcss": "^3.2.4",
     "vue": "^3.2.25",
     "vue-chartjs": "^5.2.0",

package/src/components/Datepicker.vue

@@ -18,7 +18,7 @@
   <div v-else :class="compClass">
 
 		<div v-if="mode === 'popup'" ref="popup"
-				 @click="!readonly ? contextMenu = { caller:$refs.popup, value:this.modelValue } : null"
+				 @click="!readonly ? contextMenu = { caller:$refs.popup, value:this.mModelValue } : null"
 				 class="flex-1">
 			<input class="flex-1" type="text" readonly :value="DMMMYYYY"/>
 			<div :class="$style.arrow" v-if="!readonly">
@@ -70,11 +70,14 @@
 				<div class="grid grid-cols-7 gap-2 mt-2">
 					<div v-for="i in 7">{{ getDayOfWeekLabel(i) }}</div>
 					<button type="button" :class="buttonStyle(d.value)"
-                  :disabled="allowedDates && !allowedDates.includes(d.value)"
+                  :disabled="(allowedDates && !allowedDates.includes(d.value)) || (onlyTodayAndFuture && isValidTodayAndFuture(d.value))"
 									v-for="d in contextMenuDates" @click="setValue(d.value)">
 						{{ d.date }}
 					</button>
 				</div>
+        <div class="mt-6">
+          <button type="button" class="text-primary" @click="this.$emit('update:modelValue', 'today')">Today</button>
+        </div>
 			</div>
 		</ContextMenu>
 
@@ -103,9 +106,9 @@ export default{
 
   setup(props, { emit }){
 
-		const DD = ref(dayjs(props.modelValue ?? props.defaultValue).format('DD'))
-		const MM = ref(dayjs(props.modelValue ?? props.defaultValue).format('MM'))
-		const YYYY = ref(dayjs(props.modelValue ?? props.defaultValue).format('YYYY'))
+		const DD = ref(dayjs(props.mModelValue ?? props.defaultValue).format('DD'))
+		const MM = ref(dayjs(props.mModelValue ?? props.defaultValue).format('MM'))
+		const YYYY = ref(dayjs(props.mModelValue ?? props.defaultValue).format('YYYY'))
 
 		watch([ YYYY, MM, DD ], (to) => {
 			emit('update:modelValue', to.join('-'))
@@ -143,18 +146,30 @@ export default{
 
     allowedDates: Array,
 
+    onlyTodayAndFuture: Boolean
+
   },
 
   computed:{
 
+    mModelValue(){
+      if(this.modelValue === 'today')
+        return dayjs().format('YYYY-MM-DD')
+      return this.modelValue
+    },
+
 		DMMMYYYY(){
-			return this.modelValue ? dayjs(this.modelValue).format('D MMM YYYY') : ''
+			return this.mModelValue ? dayjs(this.mModelValue).format('D MMM YYYY') : ''
 		},
 
 		YYYYMMM(){
 			return dayjs(this.contextMenu.value).format('YYYY-MM')
 		},
 
+    today(){
+      return dayjs().format('YYYY-MM-DD')
+    },
+
     compClass(){
       return [
         this.$style.datepicker,
@@ -235,7 +250,7 @@ export default{
 		buttonStyle(val){
 			return [
 				this.$style.button,
-				this.modelValue === val ? this.$style.selected : '',
+				this.mModelValue === val ? this.$style.selected : '',
 				dayjs(val).format('YYYY-MM') !== this.YYYYMMM ? this.$style.otherMonth : ''
 			]
 			.join(' ')
@@ -255,6 +270,10 @@ export default{
 
 		},
 
+    isValidTodayAndFuture(val){
+      return val.localeCompare(this.today) < 0
+    },
+
 		setValue(d){
 			this.$emit('update:modelValue', d)
 			this.$emit('change', d)

package/src/components/HTMLEditor.vue

@@ -21,7 +21,7 @@
 				<button class="p-3" type="button" ref="listBtn" @click="$refs.listContext.open($refs.listBtn)">
 					<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 144c26.5 0 48-21.5 48-48s-21.5-48-48-48S16 69.5 16 96s21.5 48 48 48zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM64 464c26.5 0 48-21.5 48-48s-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48zm48-208c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48z"/></svg>
 				</button>
-				<button v-if="uploadImage" class="p-3" type="button" @click="createImage">
+				<button v-if="canUpload" class="p-3" type="button" @click="createImage">
 					<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M152 120c-26.51 0-48 21.49-48 48s21.49 48 48 48s48-21.49 48-48S178.5 120 152 120zM447.1 32h-384C28.65 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM463.1 409.3l-136.8-185.9C323.8 218.8 318.1 216 312 216c-6.113 0-11.82 2.768-15.21 7.379l-106.6 144.1l-37.09-46.1c-3.441-4.279-8.934-6.809-14.77-6.809c-5.842 0-11.33 2.529-14.78 6.809l-75.52 93.81c0-.0293 0 .0293 0 0L47.99 96c0-8.822 7.178-16 16-16h384c8.822 0 16 7.178 16 16V409.3z"/></svg>
 				</button>
 				<button class="p-3" type="button" @click="createLink">
@@ -35,7 +35,7 @@
 		</div>
 
 		<article ref="article" contenteditable="true" v-html="html" @paste="onPaste" spellcheck="false"
-						 @input="onInput" @click="onClick" :class="containerClass"
+						 @input="onInput" @click="onClick" :class="itemClass"
 						 @blur="onBlur">
 		</article>
 
@@ -137,10 +137,10 @@
 		  </template>
 		  <div class="flex-1 flex flex-col gap-5 p-5">
 				<div>
-					<Image class="min-h-[100px] bg-base-300 rounded-xl" ref="image" :src="newImage.src" editable="true"
+					<Image class="min-h-[100px] bg-text-50 cursor-pointer rounded-xl" ref="image" :src="newImage.src" editable="true"
 						 @click="$refs.image.edit()" @change="onImageChanged">
 					  <template #empty="{ instance }">
-							<div class="absolute right-0 top-0 bottom-0 left-0 flex items-center justify-center">
+							<div class="absolute text-primary underline right-0 top-0 bottom-0 left-0 flex items-center justify-center">
 								Click to Add Image...
 							</div>
 						</template>
@@ -259,12 +259,17 @@ export default{
 	props:{
 		modelValue: String,
 		uploadImage: String,
+		uploadImageFn: String,
     containerClass: String,
     itemClass: String,
 	},
 
 	computed: {
 
+    canUpload(){
+      return `${this.uploadImage ?? ''}`.length > 0 || typeof this.uploadImageFn === 'function'
+    },
+
 		linkCanSave(){
 			return this.newLink.href && this.newLink.text
 		},
@@ -310,8 +315,8 @@ export default{
 			}
 			else{
 				this.newImage = {
-					width: "",
-					height: "",
+					width: "120px",
+					height: "120px",
 					element: null
 				}
 			}

package/src/components/List.vue

@@ -799,6 +799,12 @@ export default{
       }
     },
 
+    onConnect(reconnect){
+      if(reconnect){
+        this.load()
+      }
+    },
+
     onKeyDown(e){
 
       if(e.altKey){
@@ -850,6 +856,8 @@ export default{
       pop: this.loadQueued,
       delay: this.updateInterval
     })
+
+    this.socket.on('connect', this.onConnect)
   },
 
   unmounted() {
@@ -860,6 +868,8 @@ export default{
       this.socket.send('user.unsubscribe', {name: this.subscribeKey})
       this.socket.off(this.subscribeKey, this.onSignal)
     }
+
+    this.socket.off('connect', this.onConnect)
   },
 
   computed: {

package/src/components/VirtualTable.vue

@@ -2,86 +2,148 @@
 	<div :class="$style.comp">
 
 		<div :class="$style.header" v-if="visibleColumns.length > 0">
-			<table :class="$style.table" ref="tableHead" :style="tableHeadStyle">
-				<thead>
-				<tr>
-					<th v-for="column in visibleColumns" :style="thStyle(column)" :class="thClass(column)"
-              v-tooltip="column.tooltip">
-						<slot v-if="$slots['col-' + column.key]" :name="'col-' + column.key" :column="column"></slot>
-						<div v-else :class="headerColumnClass(column)">
-							<span>{{ column.label2 ? column.label2 : (column.label ?? column.key) }}</span>
-						</div>
-						<div :class="$style.separator" @mousedown="startResize($event, column)"></div>
-					</th>
-					<th :class="$style.spacer"></th>
-				</tr>
-				</thead>
-			</table>
+      <table :class="$style.table">
+        <thead>
+          <tr>
+            <th v-for="column in freezeLeftColumns" :style="thStyle(column)" :class="thClass(column)"
+                v-tooltip="column.tooltip">
+              <slot v-if="$slots['col-' + column.key]" :name="'col-' + column.key" :column="column"></slot>
+              <div v-else :class="headerColumnClass(column)">
+                <span>{{ column.label2 ? column.label2 : (column.label ?? column.key) }}</span>
+              </div>
+              <div :class="$style.separator" @mousedown="startResize($event, column)"></div>
+            </th>
+            <th :class="$style.spacer"></th>
+          </tr>
+        </thead>
+      </table>
+      <div class="overflow-hidden">
+        <table :class="$style.table" ref="tableHead" :style="tableHeadStyle">
+          <thead>
+            <tr>
+              <th v-for="column in unfreezedColumns" :style="thStyle(column)" :class="thClass(column)"
+                  v-tooltip="column.tooltip">
+                <slot v-if="$slots['col-' + column.key]" :name="'col-' + column.key" :column="column"></slot>
+                <div v-else :class="headerColumnClass(column)">
+                  <span>{{ column.label2 ? column.label2 : (column.label ?? column.key) }}</span>
+                </div>
+                <div :class="$style.separator" @mousedown="startResize($event, column)"></div>
+              </th>
+              <th :class="$style.spacer"></th>
+            </tr>
+          </thead>
+        </table>
+      </div>
 		</div>
 
-		<div ref="cont">
-			<div v-if="state === 3" ref="spinner" class="flex-1 flex items-center justify-center p-8">
-				<svg class="animate-spin aspect-square w-[32px] h-[32px] text-primary" 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 ref="scroller" v-else-if="visibleColumns.length > 0" :class="$style.scroller" :style="scrollerStyle">
-				<div :class="$style.spacer" ref="spacer" :style="spacerStyle">
-					<table :class="$style.table">
-						<thead>
-						<tr>
-							<th v-for="column in visibleColumns" :style="thStyle(column)"></th>
-							<th :class="$style.spacer"></th>
-						</tr>
-						</thead>
-						<tbody ref="tbody">
+		<div ref="cont" class="flex-1 overflow-y-auto">
+      <div class="flex-1 flex flex-row">
+
+        <div :style="freezeLeftScrollerStyle">
+          <div :class="$style.spacer" :style="spacerStyle">
+            <table :class="$style.table" class="flex-1 overflow-x-auto">
+              <thead>
+              <tr>
+                <th v-for="column in freezeLeftColumns" :style="thStyle(column)"></th>
+                <th :class="$style.spacer"></th>
+              </tr>
+              </thead>
+              <tbody ref="tbody">
               <tr v-for="(item, index) in visibleItems" :key="item"
                   @click="select(item, index)"
                   :class="trClass(item, index)">
-                <td v-for="(column, columnIndex) in visibleColumns"
+                <td v-for="(column, columnIndex) in freezeLeftColumns"
                     :class="tdClass(item, column)"
                     @click="$emit('item-click', item, column)">
 
                   <div v-if="columnIndex === 0 && item._type === 'totalRow'" :class="$style.total">Total</div>
                   <div v-else-if="item._type === 'totalRow' && !column.key.startsWith('_')"></div>
 
-                  <slot v-else-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>
+                  <slot v-else-if="$slots[column.key]" :name="column.key" :column="column" :item="item" :index="visibleStartIndex + index">
+                    <div :class="columnClass(column, item)">&nbsp;</div>
+                  </slot>
+                  <slot v-else-if="$slots.default" name="default" :column="column" :item="item" :index="visibleStartIndex + index">
+                    <div :class="columnClass(column, item)">&nbsp;</div>
+                  </slot>
                   <div v-else :class="columnClass(column, item)" v-html="formatColumn(item, column)"></div>
 
                 </td>
                 <td :class="$style.spacer"></td>
               </tr>
-						</tbody>
-					</table>
-					<div v-if="state === 2" ref="spinner" class="h-[44px] relative">
-						<div class="absolute top-0 left-0 w-screen h-[44px] flex items-center justify-center">
-							<svg class="animate-spin aspect-square w-[16px] h-[16px] text-primary" 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>
-				</div>
-			</div>
-			<div v-else-if="visibleColumns.length <= 0 && Array.isArray(columns)" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
-				<h5 class="text-text-300">No active column</h5>
-			</div>
-			<div v-else-if="Array.isArray(cItems) && cItems.length <= 0" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
-				<h5 class="text-text-300">No data available</h5>
-			</div>
-
-      <slot name="end"></slot>
-
-			<div :class="$style.calc" v-if="visibleColumns.length > 0 && cItems && cItems.length > 0" ref="calc">
-				<table :class="$style.table">
-					<tbody>
-            <tr>
-              <td v-for="column in cColumns" :style="thStyle(column)" :class="thClass(column)">
-                <slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="cItems[0]"></slot>
-                <slot v-else-if="$slots.default" name="default" :column="column" :item="cItems[0]"></slot>
-                <div v-else :class="columnClass(column)" v-html="formatColumn(cItems[0] ?? {}, column)"></div>
-              </td>
-              <td :class="$style.spacer"></td>
-            </tr>
-					</tbody>
-				</table>
-			</div>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div ref="xcont" class="flex-1 overflow-x-auto overflow-y-hidden">
+          <div v-if="state === 3" ref="spinner" class="flex-1 flex items-center justify-center p-8">
+            <svg class="animate-spin aspect-square w-[32px] h-[32px] text-primary" 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 ref="scroller" v-else-if="visibleColumns.length > 0" :class="$style.scroller" :style="scrollerStyle">
+            <div :class="$style.spacer" ref="spacer" :style="spacerStyle">
+
+              <table :class="$style.table" class="flex-1 overflow-x-auto">
+                <thead>
+                  <tr>
+                    <th v-for="column in unfreezedColumns" :style="thStyle(column)"></th>
+                    <th :class="$style.spacer"></th>
+                  </tr>
+                </thead>
+                <tbody ref="tbody">
+                  <tr v-for="(item, index) in visibleItems" :key="item"
+                      @click="select(item, index)"
+                      :class="trClass(item, index)">
+                    <td v-for="(column, columnIndex) in unfreezedColumns"
+                        :class="tdClass(item, column)"
+                        @click="$emit('item-click', item, column)">
+
+                      <div v-if="columnIndex === 0 && item._type === 'totalRow'" :class="$style.total">Total</div>
+                      <div v-else-if="item._type === 'totalRow' && !column.key.startsWith('_')"></div>
+
+                      <slot v-else-if="$slots[column.key]" :name="column.key" :column="column" :item="item" :index="visibleStartIndex + index">
+                        <div :class="columnClass(column, item)">&nbsp;</div>
+                      </slot>
+                      <slot v-else-if="$slots.default" name="default" :column="column" :item="item" :index="visibleStartIndex + index">
+                        <div :class="columnClass(column, item)">&nbsp;</div>
+                      </slot>
+                      <div v-else :class="columnClass(column, item)" v-html="formatColumn(item, column)"></div>
+
+                    </td>
+                    <td :class="$style.spacer"></td>
+                </tr>
+                </tbody>
+              </table>
+              <div v-if="state === 2" ref="spinner" class="h-[44px] relative">
+                <div class="absolute top-0 left-0 w-screen h-[44px] flex items-center justify-center">
+                  <svg class="animate-spin aspect-square w-[16px] h-[16px] text-primary" 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>
+            </div>
+          </div>
+          <div v-else-if="visibleColumns.length <= 0 && Array.isArray(columns)" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
+            <h5 class="text-text-300">No active column</h5>
+          </div>
+          <div v-else-if="Array.isArray(cItems) && cItems.length <= 0" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
+            <h5 class="text-text-300">No data available</h5>
+          </div>
+          <slot name="end"></slot>
+          <div :class="$style.calc" v-if="visibleColumns.length > 0 && cItems && cItems.length > 0" ref="calc">
+            <table :class="$style.table">
+              <tbody>
+              <tr>
+                <td v-for="column in cColumns" :style="thStyle(column)" :class="thClass(column)">
+                  <slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="cItems[0]"></slot>
+                  <slot v-else-if="$slots.default" name="default" :column="column" :item="cItems[0]"></slot>
+                  <div v-else :class="columnClass(column)" v-html="formatColumn(cItems[0] ?? {}, column)"></div>
+                </td>
+                <td :class="$style.spacer"></td>
+              </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+      </div>
 		</div>
 	</div>
 </template>
@@ -101,10 +163,15 @@ export default{
 	emits: [ 'scroll-end', 'item-click' ],
 
 	props:{
+
 		columns: Array,
 
     enumCache: Object,
 
+    freezeLeft: Number,
+
+    freezeRight: Number,
+
     itemClass: String,
 
     uid: String,
@@ -130,6 +197,7 @@ export default{
     type: String,
 
     value: Object,
+
 	},
 
 	data(){
@@ -152,6 +220,11 @@ export default{
       return this.datasourceColumns ?? this.columns
     },
 
+    xContStyle(){
+      return {
+      }
+    },
+
     cItems(){
       return this.value?.items ?? this.items
     },
@@ -197,7 +270,7 @@ export default{
 				return {}
 
 			const height = (this.cItems.length * this.itemHeight) + (this.state === 2 ? 48 : 0)
-			const width = this.visibleColumns.reduce((r, item) => r + parseInt(item.width ?? _DEFAULT_COLUMN_WIDTH), 0)
+			const width = this.unfreezedColumns.reduce((r, item) => r + parseInt(item.width ?? _DEFAULT_COLUMN_WIDTH), 0)
 
 			return {
 				height: height + 'px',
@@ -205,18 +278,57 @@ export default{
 			}
 		},
 
+    freezeLeftScrollerStyle(){
+      if(!this.cItems || this.cItems.length < 1)
+        return {}
+
+      const height = (this.cItems.length * this.itemHeight) + (this.state === 2 ? 48 : 0)
+      const width = this.freezeLeftColumns.reduce((r, item) => r + parseInt(item.width ?? _DEFAULT_COLUMN_WIDTH), 0)
+
+      return {
+        height: height + 'px',
+        width: width + 'px'
+      }
+    },
+
 		tableHeadStyle(){
 			return {
 				transform: "translate3d(" + (this.scrollLeft * -1) + "px, 0, 0)"
 			}
 		},
 
+    freezeLeftColumns(){
+      const columns = []
+      for(let i = 0 ; i < (this.freezeLeft ?? 0) && i < this.visibleColumns.length ; i++){
+        const column = this.visibleColumns[i]
+        if(!('visible' in column) || column.visible){
+          columns.push(column)
+        }
+      }
+      return columns
+    },
+
+    unfreezedColumns(){
+      const columns = []
+      for(let i = this.freezeLeft ?? 0 ; i < this.visibleColumns.length ; i++){
+        const column = this.visibleColumns[i]
+        if(!('visible' in column) || column.visible){
+          columns.push(column)
+        }
+      }
+      return columns
+    },
+
 		visibleColumns(){
-			return (this.cColumns ?? []).filter(_ => !('visible' in _) || _.visible)
-		},
+      const columns = []
+      for(let i = 0 ; i < this.cColumns.length ; i++){
+        const column = this.cColumns[i]
 
-		visibleColumnKeys(){
-			return this.visibleColumns.map(_ => _.key)
+        if(!('visible' in column) || column.visible){
+          columns.push(column)
+        }
+      }
+      return columns
 		},
 
 	},
@@ -229,6 +341,14 @@ export default{
 			this.passiveScrollSupported() ? { passive: true } : false
 		)
 
+		this.$refs.xcont.addEventListener(
+			"scroll",
+			this.handleScrollX,
+			this.passiveScrollSupported() ? { passive: true } : false
+		)
+
+    this.$refs.xcont.style.minHeight = `${this.$refs.cont.clientHeight}px`
+
 		this.resize()
 
     const observer = new MutationObserver((mutationsList) => {
@@ -302,11 +422,18 @@ export default{
 
 		},
 
+    handleScrollX: throttle(function(){
+      if(!this.$refs.scroller || !this.$refs.xcont) return
+
+      this.scrollLeft = this.$refs.xcont.scrollLeft
+
+      this.scrolled = this.scrollTop > 0
+    }, 16),
+
 		handleScroll: throttle(function(){
 			if(!this.$refs.scroller || !this.$refs.cont) return
 
 			this.scrollTop = this.$refs.cont.scrollTop
-			this.scrollLeft = this.$refs.cont.scrollLeft
 
 			if(this.scrollTop > this.$refs.scroller.offsetHeight - this.$refs.cont.clientHeight - this.itemHeight){
 				if(!this.isOnEndScroll){
@@ -625,7 +752,7 @@ export default{
         id: (this.items ?? [])[this.visibleStartIndex]?.id,
         index: this.visibleStartIndex
       }
-    },
+    }
 
 	}
 
@@ -641,11 +768,12 @@ export default{
 }
 
 .comp>*:last-child{
-	@apply flex-1 overflow-auto relative max-h-[100vh];
+	@apply flex-1 relative max-h-[100vh];
 }
 
 .header{
 	@apply border-b-[1px] border-text-50;
+  @apply flex flex-row;
 }
 
 .headerCol{
@@ -660,6 +788,7 @@ export default{
 }
 
 .spacer{
+  @apply w-full flex flex-row;
 	will-change: auto;
 	position: relative;
 	height: 0;
@@ -711,10 +840,6 @@ export default{
 	@apply border-text-50;
 }
 
-.spacer{
-	@apply w-full
-}
-
 .align-left{ @apply text-left; }
 .align-center{ @apply text-center; }
 .align-right{ @apply text-right; }

package/src/themes/default/index.js

@@ -276,6 +276,12 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       'background-color': 'var(--panel-500)',
     },
 
+    '.text-ellipsis-nowrap': {
+      'white-space': 'nowrap',
+      'overflow': 'hidden',
+      'text-overflow': 'ellipsis',
+    },
+
   })
 
 }, {

package/src/utils/preset-selector.js

@@ -1085,6 +1085,14 @@ const pivotToSequelizeWhere = async (pivot, opt) => {
           sortKeyToOrders[`_${value.key}-${value.aggregrate}`] = literal(`COUNT(DISTINCT ${model.name}.${valueKey})`)
           break
 
+        case 'first':
+          attributes.push([ literal(`(SELECT ${valueKey} FROM ${model.tableName} WHERE id = MIN(${model.name}.id))`), `_${value.key}-${value.aggregrate}` ])
+          break
+
+        case 'last':
+          attributes.push([ literal(`(SELECT ${valueKey} FROM ${model.tableName} WHERE id = MAX(${model.name}.id))`), `_${value.key}-${value.aggregrate}` ])
+          break
+
         case 'count':
           attributes.push([ fn('COUNT', literal(`${model.name}.${valueKey}`)), `_${value.key}-${value.aggregrate}` ])
           sortKeyToOrders[`_${value.key}-${value.aggregrate}`] = fn('COUNT', literal(`${model.name}.${valueKey}`))
@@ -1254,6 +1262,8 @@ const filtersToSequelizeInclude = async(filters, opt, includes) => {
       include.where = { [Op.and]: [] }
     }
     include.where[Op.and].push({ [currentKey]: whereObj[key] })
+
+    include.required = true
   }
 
   //console.log('includes', util.inspect(includes, false, null, true /* enable colors */))

package/src/utils/wss.mjs

@@ -46,6 +46,7 @@ class WSS extends EventEmitter2{
   _callbacks = {}
   _pendingSend = []
   _pinging = false
+  _retryCount = 1
 
   constructor(opt) {
     super();
@@ -143,15 +144,15 @@ class WSS extends EventEmitter2{
 
     };
 
-    this._instance.onerror = (e) => {
-      console.log('onerror', e)
+    this._instance.onopen = () => {
+      this._retryCount = 0
+    }
 
+    this._instance.onerror = (e) => {
       this.emit('error', e, [])
     }
 
     this._instance.onclose = (e) => {
-      console.log('onclose', e)
-
       switch(e.code){
 
         case 1002:
@@ -163,9 +164,13 @@ class WSS extends EventEmitter2{
 
         default:
           this.emit('disconnect', null, [])
+
+          const retryAfter = (num => num > 60000 ? 60000 : num)(import.meta.env.DEV ? 1000 : Math.pow(1.2, ++this._retryCount) * 1000)
+          window.setTimeout(() => this.connect(true), retryAfter)
           break
       }
     };
+
   }
 
   async close(){

package/src/widgets/PresetBarPivot.vue

@@ -76,6 +76,8 @@
                   <option value="">Default</option>
                   <option value="count">Count</option>
                   <option value="countDistinct">Distinct Count</option>
+                  <option value="first">First</option>
+                  <option value="last">Last</option>
                   <option v-if="[ 'number', 'currency' ].includes(item.type)" value="sum">Sum</option>
                   <option v-if="[ 'number', 'currency' ].includes(item.type)" value="avg">Average</option>
                   <option v-if="[ 'number', 'currency' ].includes(item.type)" value="min">Min</option>