@mixd-id/web-scaffold 0.1.230406001

package/src/components/ListPage1.vue

@@ -0,0 +1,1331 @@
+<template>
+	<div :class="$style.comp">
+
+		<div class="flex-1 flex flex-col p-6 relative">
+
+			<div class="pb-0 flex flex-row gap-3 items-center mb-6">
+				<slot v-if="$slots['lp-start']" name="lp-start" :preset="preset"/>
+				<div v-else class="mr-6 hidden md:block">
+					<h2>{{ computedTitle }}</h2>
+				</div>
+				<div class="flex-1"></div>
+				<div class="overflow-hidden hidden md:block">
+					<slot v-if="$slots['lp-search']" name="lp-search" :preset="preset"/>
+					<Textbox v-else :clearable="true" :placeholder="$t('Search...')" class="w-[200px]" v-model="preset.search"
+									 @clear="clearSearch" @submit="load">
+						<template #start>
+							<div class="px-2">
+								<svg width="16" height="16" class="fill-text-300" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+									<path fill-rule="evenodd" clip-rule="evenodd" d="M17.8723 16.8116C19.1996 15.2436 20 13.2153 20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C13.2153 20 15.2436 19.1996 16.8116 17.8723L19.4697 20.5303C19.7626 20.8232 20.2374 20.8232 20.5303 20.5303C20.8232 20.2374 20.8232 19.7626 20.5303 19.4697L17.8723 16.8116ZM18.5 11C18.5 15.1421 15.1421 18.5 11 18.5C6.85786 18.5 3.5 15.1421 3.5 11C3.5 6.85786 6.85786 3.5 11 3.5C15.1421 3.5 18.5 6.85786 18.5 11Z"/>
+								</svg>
+							</div>
+						</template>
+					</Textbox>
+				</div>
+				<div class="hidden md:block">
+					<slot name="lp-tabspace" :preset="preset"/>
+				</div>
+				<div class="flex flex-row gap-1 items-center">
+					<Dropdown class="w-[150px]" :value="preset.name" mode="custom" position="bottom-right">
+						<div class="min-w-[240px] divide-y divide-text-50 p-2 flex flex-col gap-2">
+							<div v-for="(_preset, idx) in configs.presets" class="cursor-pointer flex flex-row hover:bg-primary-100 rounded-md">
+								<div class="flex-1 p-3" @click="selectPreset(_preset)">
+									{{ _preset.name }}
+								</div>
+							</div>
+						</div>
+					</Dropdown>
+					<button class="border-[1px] border-text-200 bg-base-50 hover:border-text-300 rounded-lg p-3"
+									@click="openPreset(presetIdx)">
+						<svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="fill-text-300 hover:fill-primary"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M64 256V160H224v96H64zm0 64H224v96H64V320zm224 96V320H448v96H288zM448 256H288V160H448v96zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg>
+					</button>
+				</div>
+			</div>
+
+			<div class="flex-1 mb-4 flex flex-col bg-base-500 border-text-50 border-[1px] relative" v-if="presetSummary && !isLoading">
+				<div v-if="isSummaryLoading" :class="$style.overlay">
+					<svg class="animate-spin aspect-square w-[48px] h-[48px] 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 v-else-if="summary" class="flex-1 flex flex-col">
+					<VirtualTable v-if="presetSummary.mode === 'table'" :items="summaryItems" :columns="summaryColumns" class="flex-1"></VirtualTable>
+					<Bar v-else-if="presetSummary.mode === 'bar'" :data="chartData" :options="chartOptions" class="flex-1 w-full p-2"/>
+					<Line v-else-if="presetSummary.mode === 'line'" :data="chartData" :options="chartOptions" class="flex-1 w-full p-2"/>
+					<Gmaps v-else-if="presetSummary.mode === 'map'" :data="summary.items" :config="presetSummary.map"
+								 class="flex-1 w-full p-2" :apiKey="mapApiKey" />
+				</div>
+				<div v-else>
+					<label>No data</label>
+				</div>
+			</div>
+
+			<div class="flex-1 relative flex" v-if="!hideDetails">
+				<VirtualTable v-if="!hideDetails" class="flex-1" :columns="presetColumns" :items="items"
+											:state="isLoading ? 2 : 1"
+											:appearances="presetAppearances" @scroll-end="loadNext" :pinned="pinned">
+					<template v-for="column in presetColumns" #[colOf(column.key)]="{}">
+						<div :class="getHeader(column)" @click="openColumnOptions(column.key, $event.target.closest('.' + $style.header))">
+							<div>
+								{{ column.label }}
+							</div>
+							<div class="absolute top-0 right-0 p-2 bg-base-500" v-if="presetSortedColumns[column.key] === 'asc'">
+								<svg width="19" height="19" viewBox="0 0 24 24" class="fill-text-400" xmlns="http://www.w3.org/2000/svg">
+									<path d="M6.75 5C6.75 4.58579 6.41421 4.25 6 4.25C5.58579 4.25 5.25 4.58579 5.25 5V17.6893L3.53033 15.9697C3.23744 15.6768 2.76256 15.6768 2.46967 15.9697C2.17678 16.2626 2.17678 16.7374 2.46967 17.0303L4.76256 19.3232C5.44598 20.0066 6.55402 20.0066 7.23744 19.3232L9.53033 17.0303C9.82322 16.7374 9.82322 16.2626 9.53033 15.9697C9.23744 15.6768 8.76256 15.6768 8.46967 15.9697L6.75 17.6893V5Z"/>
+									<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 17C12.25 17.4142 12.5858 17.75 13 17.75H21C21.4142 17.75 21.75 17.4142 21.75 17C21.75 16.5858 21.4142 16.25 21 16.25H13C12.5858 16.25 12.25 16.5858 12.25 17Z"/>
+									<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 12C12.25 11.5858 12.5858 11.25 13 11.25H18C18.4142 11.25 18.75 11.5858 18.75 12C18.75 12.4142 18.4142 12.75 18 12.75H13C12.5858 12.75 12.25 12.4142 12.25 12Z"/>
+									<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 7C12.25 6.58579 12.5858 6.25 13 6.25H15C15.4142 6.25 15.75 6.58579 15.75 7C15.75 7.41421 15.4142 7.75 15 7.75H13C12.5858 7.75 12.25 7.41421 12.25 7Z"/>
+								</svg>
+							</div>
+							<div class="absolute top-0 right-0 p-2 bg-base-500" v-else-if="presetSortedColumns[column.key] === 'desc'">
+								<svg width="19" height="19" viewBox="0 0 24 24" class="fill-text-400" xmlns="http://www.w3.org/2000/svg">
+									<path d="M6.75 5C6.75 4.58579 6.41421 4.25 6 4.25C5.58579 4.25 5.25 4.58579 5.25 5V17.6893L3.53033 15.9697C3.23744 15.6768 2.76256 15.6768 2.46967 15.9697C2.17678 16.2626 2.17678 16.7374 2.46967 17.0303L4.76256 19.3232C5.44598 20.0066 6.55402 20.0066 7.23744 19.3232L9.53033 17.0303C9.82322 16.7374 9.82322 16.2626 9.53033 15.9697C9.23744 15.6768 8.76256 15.6768 8.46967 15.9697L6.75 17.6893V5Z"/>
+									<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 7C12.25 6.58579 12.5858 6.25 13 6.25H21C21.4142 6.25 21.75 6.58579 21.75 7C21.75 7.41421 21.4142 7.75 21 7.75H13C12.5858 7.75 12.25 7.41421 12.25 7Z"/>
+									<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 12C12.25 12.4142 12.5858 12.75 13 12.75H18C18.4142 12.75 18.75 12.4142 18.75 12C18.75 11.5858 18.4142 11.25 18 11.25H13C12.5858 11.25 12.25 11.5858 12.25 12Z"/>
+									<path fill-rule="evenodd" clip-rule="evenodd" d="M12.25 17C12.25 17.4142 12.5858 17.75 13 17.75H15C15.4142 17.75 15.75 17.4142 15.75 17C15.75 16.5858 15.4142 16.25 15 16.25H13C12.5858 16.25 12.25 16.5858 12.25 17Z"/>
+								</svg>
+							</div>
+						</div>
+					</template>
+					<template v-for="(_, slot) in headerSlots" #[slot]="{ item, index }">
+						<div :class="getHeader(slot.replace('col-', ''))" @click="openColumnOptions(slot.replace('col-', ''), $event.target.closest('.' + $style.header))">
+							<slot :name="slot" :item="item" :index="index"></slot>
+						</div>
+					</template>
+					<template v-for="(_, slot) in contentSlots" #[slot]="{ item, index }">
+						<slot :name="slot" :item="item" :index="index"></slot>
+					</template>
+				</VirtualTable>
+				<div v-if="isLoading" :class="$style.overlay">
+					<svg class="animate-spin aspect-square w-[48px] h-[48px] 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>
+
+			<ContextMenu ref="columnMenu" :dismiss="false">
+				<div class="flex-1 flex flex-col w-[270px] p-3">
+					<div class="flex flex-col">
+						<div class="flex flex-row gap-2 items-center">
+							<div class="p-2 text-text-300 flex-1">Sort By</div>
+							<div class="text-primary cursor-pointer text-sm" @click="openPreset('sort');$refs.columnMenu.close()">Sort Options</div>
+						</div>
+						<div class="p-2 cursor-pointer" :class="$style.hoverable" @click="setSortCurrent(1)">Sort Ascending</div>
+						<div class="p-2 cursor-pointer" :class="$style.hoverable" @click="setSortCurrent(2)">Sort Descending</div>
+					</div>
+					<div class="h-[1px] bg-text-50 my-2"></div>
+					<div class="flex flex-col">
+						<div class="p-2 cursor-pointer" :class="$style.hoverable" @click="hide">Hide</div>
+						<div class="p-2 cursor-pointer" :class="$style.hoverable" @click="openPreset();$refs.columnMenu.close()">Column Options</div>
+					</div>
+					<div class="h-[1px] bg-text-50 my-2"></div>
+					<div class="flex flex-col">
+						<div class="flex flex-row gap-2 items-center">
+							<div class="p-2 text-text-300 flex-1">Filters</div>
+							<div class="text-primary cursor-pointer text-sm" @click="openPreset('filter');$refs.columnMenu.close()">Filter Options</div>
+						</div>
+						<div v-if="presetCurrentFilters.length > 0">
+							<ListPage1Filter v-if="preset.filters" v-for="filter in presetCurrentFilters"
+															 :filter="filter" :column="configs.columns[filter.key]"
+															 @remove="removeFilter(filter)" @change="load" />
+						</div>
+						<div v-else>
+							<div class="p-2 cursor-pointer" :class="$style.hoverable" @click.stop="addCurrentFilter">Add Filter</div>
+						</div>
+					</div>
+				</div>
+			</ContextMenu>
+
+			<div v-if="count > 0 && !summaryTeleport" class="flex flex-row bg-base-500 divide-x divide-text-50 border-[1px] border-text-50">
+				<div class="p-2 px-3 text-text-400">
+					Count: {{ count }}
+				</div>
+				<div></div>
+			</div>
+			<Teleport v-else-if="count > 0" to=".footer-wrap">
+				<div>
+					Count: {{ count }}
+				</div>
+			</Teleport>
+
+		</div>
+
+		<div v-if="configs.presetOpen" class="w-[360px] border-l-[1px] border-text-50 bg-base-500 flex flex-col">
+
+			<div v-if="configs.presetOpenIdx === -1" class="flex-1 flex flex-col">
+
+				<div class="p-6">
+					<h3>Presets</h3>
+					<br />
+				</div>
+
+				<div class="flex-1 overflow-y-auto border-t-[1px] border-text-50">
+					<div v-for="(preset, idx) in configs.presets"
+							 class="px-6 py-3 flex flex-row gap-2 items-center border-b-[1px] border-text-50 hover:bg-text-50 cursor-pointer">
+						<div class="px-2">
+							<Checkbox :checked="idx === configs.presetIdx" @change="selectPreset(preset)" />
+						</div>
+						<div @click="configs.presetOpenIdx = idx" class="flex-1">
+							<label>{{ preset.name }}</label>
+						</div>
+						<button class="px-2" v-if="configs.presets.length > 1" @click="removePreset(idx)">
+							<svg width="16" height="16" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+								<path fill-rule="evenodd" clip-rule="evenodd" d="M10 10.25C10.4142 10.25 10.75 10.5858 10.75 11V16C10.75 16.4142 10.4142 16.75 10 16.75C9.58579 16.75 9.25 16.4142 9.25 16V11C9.25 10.5858 9.58579 10.25 10 10.25Z"/>
+								<path fill-rule="evenodd" clip-rule="evenodd" d="M14 10.25C14.4142 10.25 14.75 10.5858 14.75 11V16C14.75 16.4142 14.4142 16.75 14 16.75C13.5858 16.75 13.25 16.4142 13.25 16V11C13.25 10.5858 13.5858 10.25 14 10.25Z"/>
+								<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2.25C8.48122 2.25 7.25 3.48122 7.25 5V5.25H3C2.58579 5.25 2.25 5.58579 2.25 6C2.25 6.41421 2.58579 6.75 3 6.75H4.25V19C4.25 20.5188 5.48122 21.75 7 21.75H17C18.5188 21.75 19.75 20.5188 19.75 19V6.75H21C21.4142 6.75 21.75 6.41421 21.75 6C21.75 5.58579 21.4142 5.25 21 5.25H16.75V5C16.75 3.48122 15.5188 2.25 14 2.25H10ZM15.25 5.25V5C15.25 4.30964 14.6904 3.75 14 3.75H10C9.30964 3.75 8.75 4.30964 8.75 5V5.25H15.25ZM5.75 6.75V19C5.75 19.6904 6.30964 20.25 7 20.25H17C17.6904 20.25 18.25 19.6904 18.25 19V6.75H5.75Z"/>
+							</svg>
+						</button>
+					</div>
+					<div class="p-5 text-center">
+						<button @click="addPreset">
+							<svg width="21" height="21" viewBox="0 0 24 24" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg">
+								<path d="M12.75 5C12.75 4.58579 12.4142 4.25 12 4.25C11.5858 4.25 11.25 4.58579 11.25 5V11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H11.25V19C11.25 19.4142 11.5858 19.75 12 19.75C12.4142 19.75 12.75 19.4142 12.75 19V12.75H19C19.4142 12.75 19.75 12.4142 19.75 12C19.75 11.5858 19.4142 11.25 19 11.25H12.75V5Z"/>
+							</svg>
+						</button>
+					</div>
+				</div>
+
+			</div>
+
+			<div v-else class="flex-1 flex flex-col">
+				<div class="p-6 pb-0">
+					<div class="flex flex-row gap-4 mb-3">
+						<button @click="configs.presetOpenIdx = -1">
+							<svg width="19" height="19" viewBox="0 0 24 24" class="fill-text-300 hover:fill-text-400" xmlns="http://www.w3.org/2000/svg">
+								<path d="M10.5303 17.9697C10.8232 18.2626 10.8232 18.7374 10.5303 19.0303C10.2374 19.3232 9.76253 19.3232 9.46964 19.0303L3.67675 13.2374C2.99333 12.554 2.99333 11.446 3.67675 10.7626L9.46964 4.96967C9.76253 4.67678 10.2374 4.67678 10.5303 4.96967C10.8232 5.26256 10.8232 5.73744 10.5303 6.03033L5.31063 11.25H20C20.4142 11.25 20.75 11.5858 20.75 12C20.75 12.4142 20.4142 12.75 20 12.75H5.31063L10.5303 17.9697Z"/>
+							</svg>
+						</button>
+						<input class="flex-1 text-xl bg-transparent outline-none" :value="preset.name" @blur="preset.name = $event.target.value"
+									 @keyup.enter="preset.name = $event.target.value" />
+						<button @click="closePreset">
+							<svg width="21" height="21" 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 class="flex justify-center">
+						<Tabs v-model="configs.presetTab" :items="tabItems" @change="tabChanged"/>
+					</div>
+				</div>
+
+				<div class="flex-1 overflow-y-auto px-6 mb-6">
+
+					<div class="p-2 mt-6 flex flex-col" v-if="configs.presetTab === 'column'">
+						<ListItem :items="presetColumns" @reorder="reorderColumns">
+							<template v-slot="{ item }">
+								<div class="flex flex-row items-center gap-2" :key="item">
+									<div class="cursor-move" data-reorder>
+										<svg class="fill-text-200" width="21" height="21" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+											<path fill-rule="evenodd" clip-rule="evenodd" d="M4 16C4 15.4477 4.44772 15 5 15H19C19.5523 15 20 15.4477 20 16C20 16.5523 19.5523 17 19 17H5C4.44772 17 4 16.5523 4 16Z"/>
+											<path fill-rule="evenodd" clip-rule="evenodd" d="M4 8C4 7.44772 4.44772 7 5 7H19C19.5523 7 20 7.44772 20 8C20 8.55228 19.5523 9 19 9H5C4.44772 9 4 8.55228 4 8Z"/>
+										</svg>
+									</div>
+									<Checkbox v-model="item.visible" :true-value="true" :false-value="false" @change="load">
+										{{ item.label ?? '(No Name)' }}
+									</Checkbox>
+								</div>
+							</template>
+						</ListItem>
+					</div>
+
+					<div class="flex flex-col" v-else-if="configs.presetTab === 'filter'">
+						<div v-if="filterableColumns.length > 0">
+							<ListPage1Filter v-if="preset.filters" v-for="filter in preset.filters"
+															 :filter="filter" :column="configs.columns[filter.key]"
+															 @remove="removeFilter(filter)" @change="load"/>
+							<div class="py-8">
+								<Dropdown @change="addFilter" v-model="presetFilterSelector">
+									<option value="" disabled selected>{{ $t('Add Filter')}}</option>
+									<option v-for="column in filterableColumns" :value="column.key">{{ column.label }}</option>
+								</Dropdown>
+							</div>
+						</div>
+						<div v-else>
+							<div class="p-6 text-center">
+								<label>Filter not available</label>
+							</div>
+						</div>
+					</div>
+
+					<div class="flex flex-col" v-else-if="configs.presetTab === 'sort'">
+						<div v-if="sortableColumns.length > 0" class="my-8">
+							<div v-for="sort in preset.sorts" class="py-4">
+								<div class="flex flex-row items-center gap-2">
+									<div class="flex-1">
+										<Dropdown v-model="sort.key" @change="load">
+											<option value="" disabled selected>{{ $t('Add Sort') }}</option>
+											<option v-for="column in sortableColumns" :value="column.key">{{ column.label }}</option>
+										</Dropdown>
+									</div>
+									<div>
+										<Dropdown v-model="sort.type" @change="load" class="w-[80px]">
+											<option value="">Asc</option>
+											<option value="desc">Desc</option>
+										</Dropdown>
+									</div>
+									<button @click="removeSort(sort)">
+										<svg width="21" height="21" class="fill-text-100 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+											<path class="secondary" fill-rule="evenodd" d="M15.78 14.36a1 1 0 0 1-1.42 1.42l-2.82-2.83-2.83 2.83a1 1 0 1 1-1.42-1.42l2.83-2.82L7.3 8.7a1 1 0 0 1 1.42-1.42l2.83 2.83 2.82-2.83a1 1 0 0 1 1.42 1.42l-2.83 2.83 2.83 2.82z"/>
+										</svg>
+									</button>
+								</div>
+							</div>
+							<div v-if="preset.sorts && preset.sorts.length > 0" class="h-[1px] my-4 bg-text-100"></div>
+							<div class="py-4">
+								<Dropdown @change="addSort" v-model="presetSortSelector">
+									<option value="" disabled selected>{{ $t('Add Sort') }}</option>
+									<option v-for="column in sortableColumns" :value="column.key">{{ column.label }}</option>
+								</Dropdown>
+							</div>
+						</div>
+						<div v-else>
+							<div class="p-6 text-center">
+								<label>Sort not available</label>
+							</div>
+						</div>
+					</div>
+
+					<div class="flex flex-col gap-3 py-8" v-else-if="configs.presetTab === 'summary'">
+
+						<div v-if="configs.summaryOpenIdx === -1">
+							<div v-for="(summary, idx) in preset.summaries">
+								<div class="flex flex-row items-center gap-3 border-text-50 border-[1px] p-2 rounded-lg">
+									<div class="px-2">
+										<Checkbox v-model="summary.enabled" @change="enableSummary(idx)" />
+									</div>
+									<div class="flex-1" @click="configs.summaryOpenIdx = idx">
+										<label>{{ summary.title }}</label>
+									</div>
+									<button class="px-2" v-if="preset.summaries.length > 1" @click="removeSummary(summary)">
+										<svg width="16" height="16" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+											<path fill-rule="evenodd" clip-rule="evenodd" d="M10 10.25C10.4142 10.25 10.75 10.5858 10.75 11V16C10.75 16.4142 10.4142 16.75 10 16.75C9.58579 16.75 9.25 16.4142 9.25 16V11C9.25 10.5858 9.58579 10.25 10 10.25Z"/>
+											<path fill-rule="evenodd" clip-rule="evenodd" d="M14 10.25C14.4142 10.25 14.75 10.5858 14.75 11V16C14.75 16.4142 14.4142 16.75 14 16.75C13.5858 16.75 13.25 16.4142 13.25 16V11C13.25 10.5858 13.5858 10.25 14 10.25Z"/>
+											<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2.25C8.48122 2.25 7.25 3.48122 7.25 5V5.25H3C2.58579 5.25 2.25 5.58579 2.25 6C2.25 6.41421 2.58579 6.75 3 6.75H4.25V19C4.25 20.5188 5.48122 21.75 7 21.75H17C18.5188 21.75 19.75 20.5188 19.75 19V6.75H21C21.4142 6.75 21.75 6.41421 21.75 6C21.75 5.58579 21.4142 5.25 21 5.25H16.75V5C16.75 3.48122 15.5188 2.25 14 2.25H10ZM15.25 5.25V5C15.25 4.30964 14.6904 3.75 14 3.75H10C9.30964 3.75 8.75 4.30964 8.75 5V5.25H15.25ZM5.75 6.75V19C5.75 19.6904 6.30964 20.25 7 20.25H17C17.6904 20.25 18.25 19.6904 18.25 19V6.75H5.75Z"/>
+										</svg>
+									</button>
+								</div>
+							</div>
+							<div class="p-2 text-center">
+								<button @click="addSummary">
+									<svg width="21" height="21" viewBox="0 0 24 24" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg">
+										<path d="M12.75 5C12.75 4.58579 12.4142 4.25 12 4.25C11.5858 4.25 11.25 4.58579 11.25 5V11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H11.25V19C11.25 19.4142 11.5858 19.75 12 19.75C12.4142 19.75 12.75 19.4142 12.75 19V12.75H19C19.4142 12.75 19.75 12.4142 19.75 12C19.75 11.5858 19.4142 11.25 19 11.25H12.75V5Z"/>
+									</svg>
+								</button>
+							</div>
+						</div>
+
+						<div v-if="configs.summaryOpenIdx > -1">
+
+							<div class="flex flex-row items-center p-3 py-1">
+								<label class="text-text-400 flex-1">Enabled</label>
+								<Checkbox v-model="openedPresetSummary.enabled" @change="loadSummary"/>
+							</div>
+
+							<div class="h-[1px] bg-text-50 my-1"></div>
+
+							<div class="flex flex-row items-center p-3 py-1">
+								<label class="text-text-400 flex-1">{{ $t('Title') }}</label>
+								<Textbox v-model="openedPresetSummary.title" class="mt-1" />
+							</div>
+
+							<div class="h-[1px] bg-text-50 my-1"></div>
+
+							<div class="flex flex-row items-center p-3 py-1">
+								<label class="text-text-400 flex-1">Hide Details</label>
+								<Checkbox v-model="openedPresetSummary.hideDetails" @change="loadSummary"/>
+							</div>
+
+							<div class="h-[1px] bg-text-50 my-1"></div>
+
+							<div class="p-3">
+								<label class="text-text-400 flex-1">Type</label>
+								<div class="mt-2">
+									<Dropdown v-model="openedPresetSummary.mode" class="flex-1" @change="loadSummary">
+										<option value="table">{{ $t('Table') }}</option>
+										<option value="bar">{{ $t('Bar Chart') }}</option>
+										<option value="line">{{ $t('Line Chart') }}</option>
+										<option value="map">{{ $t('Maps') }}</option>
+									</Dropdown>
+								</div>
+								<div v-if="[ 'bar', 'line' ].includes(openedPresetSummary.mode)" class="mt-1">
+									<Checkbox v-model="openedPresetSummary.hideLegends" @change="loadSummary">Hide Legend</Checkbox>
+								</div>
+							</div>
+
+							<div v-if="openedPresetSummary.mode === 'table'">
+
+								<div class="p-3">
+									<label class="text-text-400 flex-1">{{ $t('Row') }}</label>
+									<div class="flex flex-row mt-2 gap-2">
+										<Dropdown v-model="openedPresetSummary.table.rows[0].key" class="flex-1" @change="loadSummary">
+											<option value="" disabled selected>{{ $t('Add Column') }}</option>
+											<option v-for="column in filterableColumns" :value="column.key">{{ column.label }}</option>
+										</Dropdown>
+										<Dropdown v-model="openedPresetSummary.table.rows[0].format" class="w-[100px]" @change="loadSummary">
+											<option value="">{{ $t('Default') }}</option>
+											<option value="date">{{ $t('Date') }}</option>
+											<option value="month">{{ $t('Month') }}</option>
+											<option value="quarter">{{ $t('Quarterly') }}</option>
+											<option value="year">{{ $t('Year') }}</option>
+										</Dropdown>
+									</div>
+									<Checkbox class="mt-2" v-model="openedPresetSummary.table.showRowTotal">
+										Row Total
+									</Checkbox>
+								</div>
+
+								<div class="p-3">
+									<label class="text-text-400 flex-1">{{$t('Column') }}</label>
+									<div>
+										<Dropdown v-model="openedPresetSummary.table.columns[0].key" class="flex-1" @change="loadSummary">
+											<option value="" disabled selected>{{ $t('Add Column') }}</option>
+											<option value="(none)">{{ $t('(None)') }}</option>
+											<option v-for="column in filterableColumns" :value="column.key">{{ column.label }}</option>
+										</Dropdown>
+									</div>
+									<Checkbox class="mt-2" v-model="openedPresetSummary.table.showColumnTotal">
+										Column Total
+									</Checkbox>
+								</div>
+
+								<div class="p-3">
+									<label class="text-text-400 flex-1">Values</label>
+									<div class="flex flex-row mt-2 gap-2">
+										<Dropdown v-model="openedPresetSummary.table.values[0].aggregrate" class="flex-1" @change="loadSummary">
+											<option value="" disabled selected>{{ $t('Select') }}</option>
+											<option value="count">{{ $t('Count') }}</option>
+											<option value="max">{{ $t('Max') }}</option>
+											<option value="min">{{ $t('Min') }}</option>
+											<option value="avg">{{ $t('Avg') }}</option>
+										</Dropdown>
+									</div>
+								</div>
+
+							</div>
+
+							<div v-else-if="openedPresetSummary.mode === 'bar'">
+
+								<div class="p-3">
+									<label class="text-text-400 flex-1">{{ $t('X-axis') }}</label>
+									<div class="flex flex-row mt-2 gap-2">
+										<Dropdown v-model="openedPresetSummary.bar.rows[0].key" class="flex-1" @change="loadSummary">
+											<option value="" disabled selected>{{ $t('Add Column') }}</option>
+											<option v-for="column in filterableColumns" :value="column.key">{{ column.label }}</option>
+										</Dropdown>
+										<Dropdown v-model="openedPresetSummary.bar.rows[0].format" class="w-[100px]" @change="loadSummary">
+											<option value="">{{ $t('Default') }}</option>
+											<option value="date">{{ $t('Date') }}</option>
+											<option value="month">{{ $t('Month') }}</option>
+											<option value="quarter">{{ $t('Quarterly') }}</option>
+											<option value="year">{{ $t('Year') }}</option>
+										</Dropdown>
+									</div>
+								</div>
+
+								<div class="p-3">
+									<label class="text-text-400 flex-1">{{ $t('Column') }}</label>
+									<div class="flex flex-row mt-2 gap-2">
+										<Dropdown v-model="openedPresetSummary.bar.columns[0].key" class="flex-1" @change="loadSummary">
+											<option value="" disabled selected>{{ $t('Add Column') }}</option>
+											<option value="(none)">{{ $t('None') }}</option>
+											<option v-for="column in filterableColumns" :value="column.key">{{ column.label }}</option>
+										</Dropdown>
+										<Dropdown v-model="openedPresetSummary.bar.columns[0].format" class="w-[100px]" @change="loadSummary">
+											<option value="">{{ $t('Default') }}</option>
+											<option value="date">{{ $t('Date') }}</option>
+										</Dropdown>
+									</div>
+									<Checkbox class="mt-2" v-model="openedPresetSummary.bar.stacked">
+										Stacked
+									</Checkbox>
+								</div>
+
+								<div class="p-3">
+									<label class="text-text-400 flex-1">Values</label>
+									<div class="flex flex-row mt-2 gap-2">
+										<Dropdown v-model="openedPresetSummary.bar.values[0].aggregrate" class="flex-1" @change="loadSummary">
+											<option value="" disabled selected>{{ $t('Select') }}</option>
+											<option value="count">{{ $t('Count') }}</option>
+											<option value="max">{{ $t('Max') }}</option>
+											<option value="min">{{ $t('Min') }}</option>
+											<option value="avg">{{ $t('Avg') }}</option>
+										</Dropdown>
+									</div>
+								</div>
+
+							</div>
+
+							<div v-else-if="openedPresetSummary.mode === 'line'">
+
+								<div class="p-3">
+									<label class="text-text-400 flex-1">{{ $t('X-axis') }}</label>
+									<div class="flex flex-row mt-2 gap-2">
+										<Dropdown v-model="openedPresetSummary.line.rows[0].key" class="flex-1" @change="loadSummary">
+											<option value="" disabled selected>{{ $t('Add Column') }}</option>
+											<option v-for="column in filterableColumns" :value="column.key">{{ column.label }}</option>
+										</Dropdown>
+										<Dropdown v-model="openedPresetSummary.line.rows[0].format" class="w-[100px]" @change="loadSummary">
+											<option value="">{{ $t('Default') }}</option>
+											<option value="date">{{ $t('Date') }}</option>
+											<option value="month">{{ $t('Month') }}</option>
+											<option value="quarter">{{ $t('Quarterly') }}</option>
+											<option value="year">{{ $t('Year') }}</option>
+										</Dropdown>
+									</div>
+								</div>
+
+								<div class="p-3">
+									<label class="text-text-400 flex-1">{{$t('Column') }}</label>
+									<div class="flex flex-row mt-2 gap-2">
+										<Dropdown v-model="openedPresetSummary.line.columns[0].key" class="flex-1" @change="loadSummary">
+											<option value="" disabled selected>{{ $t('Add Column') }}</option>
+											<option value="(none)">{{ $t('None') }}</option>
+											<option v-for="column in filterableColumns" :value="column.key">{{ column.label }}</option>
+										</Dropdown>
+										<Dropdown v-model="openedPresetSummary.line.columns[0].format" class="w-[100px]" @change="loadSummary">
+											<option value="">{{ $t('Default') }}</option>
+											<option value="date">{{ $t('Date') }}</option>
+										</Dropdown>
+									</div>
+								</div>
+
+								<div class="p-3">
+									<label class="text-text-400 flex-1">Values</label>
+									<div class="flex flex-row mt-2 gap-2">
+										<Dropdown v-model="openedPresetSummary.line.values[0].aggregrate" class="flex-1" @change="loadSummary">
+											<option value="" disabled selected>{{ $t('Select') }}</option>
+											<option value="count">{{ $t('Count') }}</option>
+											<option value="max">{{ $t('Max') }}</option>
+											<option value="min">{{ $t('Min') }}</option>
+											<option value="avg">{{ $t('Avg') }}</option>
+										</Dropdown>
+									</div>
+								</div>
+
+							</div>
+
+							<div v-else-if="openedPresetSummary.mode === 'map'">
+
+								<div class="p-3 flex flex-row gap-3">
+									<div class="flex-1">
+										<label class="text-text-400 flex-1">Map Type</label>
+										<Dropdown class="mt-2" v-model="openedPresetSummary.map.mapType" @change="loadSummary">
+											<option value="" disabled selected>(Default)</option>
+											<option value="heatmap">Heatmap</option>
+										</Dropdown>
+									</div>
+									<div>
+										<label class="text-text-400 flex-1">Radius</label>
+										<div class="flex flex-row mt-2 gap-2">
+											<Textbox v-model="openedPresetSummary.map.mapRadius" class="w-[60px]" @blur="loadSummary" @keyup.enter="loadSummary" />
+										</div>
+									</div>
+								</div>
+
+								<div class="p-3">
+									<label class="text-text-400 flex-1">{{$t('Property') }}</label>
+									<div>
+										<Dropdown v-model="openedPresetSummary.map.key" class="flex-1" @change="loadSummary">
+											<option value="" disabled selected>{{ $t('Select Column') }}</option>
+											<option v-for="column in coordinateColumns" :value="column.key">{{ column.label }}</option>
+										</Dropdown>
+									</div>
+								</div>
+
+							</div>
+
+						</div>
+
+					</div>
+
+				</div>
+			</div>
+
+		</div>
+
+	</div>
+</template>
+
+<script>
+
+import throttle from "lodash/throttle";
+import {urlQuery} from "../utils/helpers.mjs";
+import { Bar, Line } from 'vue-chartjs'
+import Chart from 'chart.js/auto'
+import dayjs from "dayjs";
+
+export default{
+
+	components: { Bar, Line },
+
+	inject: [ 'socket', 'confirm', 'alert', 'socketEmit', 'toast' ],
+
+	props:{
+
+		datasource: String,
+
+		model: String,
+
+		title: String,
+
+		pinned: Function,
+
+		summaryTeleport: String
+
+	},
+
+	computed: {
+
+		filterableColumns(){
+			return Object.values(this.configs.columns).filter((_) => _.filterable)
+		},
+
+		coordinateColumns(){
+			return Object.values(this.configs.columns).filter((_) => _.type === 'coord')
+		},
+
+		sortableColumns(){
+			return Object.values(this.configs.columns).filter((_) => _.sortable)
+		},
+
+
+		preset(){
+			return this.configs.presets[this.configs.presetIdx] ?? {}
+		},
+
+		presetColumns(){
+			if(!this.preset.columns) return []
+
+			for(let i = 0 ; i < (this.preset.columns).length ; i++){
+				const presetColumn = this.preset.columns[i]
+				const column = this.configs.columns[presetColumn.key] ?? {}
+				for(let key in column){
+					if(!presetColumn[key]){
+						this.preset.columns[i][key] = column[key]
+					}
+				}
+			}
+
+			return this.preset.columns
+		},
+
+		presetAppearances(){
+			return this.preset.appearances ?? {}
+		},
+		
+		presetSortedColumns(){
+			const c = {};
+			(this.preset.sorts ?? []).forEach((_) => c[_.key] = _.type);
+			return c
+		},
+
+		presetCurrentFilters(){
+			if(!this.preset.filters) return []
+			return this.preset.filters.filter((_) => _.key === this.selectedColumn)
+		},
+
+		
+		computedDataSource(){
+			return this.datasource ?? this.model
+		},
+
+		computedTitle(){
+			return this.presetSummary && this.presetSummary.title ?
+				this.presetSummary.title :
+				this.title
+		},
+		
+
+		headerSlots(){
+			const slots = {}
+			for(let key in this.$slots){
+				if(key.startsWith('col-'))
+					slots[key] = this.$slots[key]
+			}
+			return slots
+		},
+
+		contentSlots(){
+			const slots = {}
+			for(let key in this.$slots){
+				if(!key.startsWith('col-'))
+					slots[key] = this.$slots[key]
+			}
+			return slots
+		},
+
+
+		chartOptions(){
+
+			var style = getComputedStyle(document.body)
+			var gridColor = style.getPropertyValue('--text-50')
+			var gridColor2 = style.getPropertyValue('--text-200')
+
+			const baseColumn = this.summary.columns[0] ?? {}
+			const baseColumnType = baseColumn.type
+
+			let highGrids = []
+			if(baseColumnType === 'date'){
+				this.summary.items.forEach((item) => {
+					if(dayjs(item.dfDate).day() === 1){
+						highGrids.push(dayjs(item.dfDate).format('D MMM'))
+					}
+				})
+			}
+
+			return {
+				responsive: true,
+				maintainAspectRatio: false,
+				plugins: {
+					legend: !this.presetSummary.hideLegends,
+					tooltip: {
+						callbacks: {
+							label: function(context) {
+
+								const labels = []
+
+								labels.push(context.dataset.label + ': ' + context.parsed.y)
+
+								if(context.parsed._stacks){
+									let total = 0
+									let percent = 0
+									for(let key in context.parsed._stacks.y){
+										if(!isNaN(parseInt(key))){
+											total += parseInt(context.parsed._stacks.y[key])
+										}
+									}
+									percent = Math.round(parseInt(context.parsed.y) / total * 100)
+									labels.push(`Total: ${total} (${percent}%)`)
+								}
+
+								return labels;
+							}
+						}
+					}
+				},
+				scales: {
+					x: {
+						grid: {
+							color: function(context){
+								if(baseColumnType === 'date' && context.tick && highGrids.includes(context.tick.label)){
+									return `rgb(${gridColor2})`
+								}
+								return `rgb(${gridColor})`
+							}
+						},
+						stacked: this.presetSummary.mode === 'bar' ? this.presetSummary[this.presetSummary.mode].stacked : undefined
+					},
+					y: {
+						grid: {
+							color: function(context){
+								return `rgb(${gridColor})`
+							}
+						},
+						stacked: this.presetSummary.mode === 'bar' ? this.presetSummary[this.presetSummary.mode].stacked : undefined
+					}
+				}
+			}
+		},
+
+		chartData(){
+
+			const column = this.summary.columns.filter((_) => _.key === 'dfDate').pop() ?? {}
+
+			const labels = []
+			this.summary.items.forEach((item) => {
+
+				let label = item.dfDate
+				switch(column.type){
+
+					case 'date':
+						const dateFormat = column.format ?? 'D MMM YY HH:mm:ss'
+						const djs = dayjs(item.dfDate)
+						label = djs.isValid() ? djs.format(dateFormat) : item.dfDate
+						break
+				}
+				labels.push(label)
+			})
+
+			const datasets = []
+			this.summary.columns.forEach((column) => {
+				if(column.key === 'dfDate') return
+
+				const data = []
+				this.summary.items.forEach((item) => {
+					data.push(parseInt(item[column.key]))
+				})
+
+				const dataset = {
+					label: column.label,
+					data,
+					backgroundColor: this.chartOpt.backgroundColors[datasets.length % 9],
+					borderColor: this.chartOpt.borderColors[datasets.length % 9]
+				}
+
+				datasets.push(dataset)
+			})
+
+			return {
+				labels,
+				datasets
+			}
+
+			/*return {
+				labels: [ 'January', 'February', 'March' ],
+				datasets: [ { data: [40, 20, 12] } ]
+			}*/
+		},
+
+		hideDetails(){
+			if(this.preset && this.presetSummary && this.presetSummary.hideDetails)
+				return this.presetSummary.hideDetails
+			return false;
+		},
+
+		summaryColumns(){
+
+			const columns = [ ...this.summary.columns ]
+
+			if(this.presetSummary.mode === 'table' && this.presetSummary.table.showColumnTotal){
+				columns.push({ key:"_total", label:"Total", visible:true, type:"number" })
+			}
+
+			return columns
+		},
+
+		summaryItems(){
+
+			const items = [ ...this.summary.items ]
+
+			//console.log('#1', this.presetSummary.showColumnTotal, this.presetSummary.showRowTotal, items.length)
+
+			if(this.presetSummary.mode === 'table' && this.presetSummary.table.showColumnTotal){
+				items.forEach((item) => {
+					let total = 0
+					for(let key in item){
+						if([ 'dfDate', '_total' ].includes(key)) continue
+						total += parseInt(item[key])
+					}
+					item._total = total
+				})
+			}
+
+
+			if(this.presetSummary.mode === 'table' && this.presetSummary.table.showRowTotal){
+				const totalItem = { dfDate:"Total" }
+				this.summary.items.forEach((item) => {
+
+					for(let key in item){
+						if([ 'dfDate' ].includes(key)) continue
+
+						if(!(key in totalItem))
+							totalItem[key] = 0
+						totalItem[key] += parseInt(item[key])
+					}
+				})
+				items.push(totalItem)
+			}
+
+			return items
+		},
+
+		openedPresetSummary(){
+			return ((this.preset ?? {}).summaries ?? [])[this.configs.summaryOpenIdx] ?? undefined
+		},
+
+		presetSummary(){
+			return ((this.preset ?? {}).summaries ?? []).filter((_) => _.enabled).pop()
+		},
+
+	},
+
+	data(){
+		return {
+
+			configs: {
+				name: null,
+				columns: [],
+				presets: [],
+				presetIdx: -1,
+				presetOpen: false,
+				presetOpenIdx: -1,
+				summaryOpenIdx: -1,
+				presetTab: 'column'
+			},
+
+			mapApiKey: null,
+
+			selectedColumn: null,
+			presetFilterSelector: null,
+			presetSortSelector: null,
+
+			items: [],
+			count: null,
+			hasNext: false,
+			isLoading: false,
+			isSummaryLoading: false,
+
+			summary: null,
+			summaryLoading: false,
+
+			lastLoadAt: null,
+
+			chartOpt: {
+				backgroundColors: [
+					'#5D9CEC',
+					'#A0D468',
+					'#FFCE54',
+					'#FC6E51',
+					'#48CFAD',
+					'#AC92EC',
+					'#4FC1E9',
+					'#FFCE54',
+					'#ED5565',
+					'#EC87C0'
+				],
+				borderColors: [
+					'#4A89DC',
+					'#8CC152',
+					'#F6BB42',
+					'#E9573F',
+					'#37BC9B',
+					'#967ADC',
+					'#3BAFDA',
+					'#F6BB42',
+					'#DA4453',
+					'#D770AD'
+				],
+			},
+			tabItems: [
+				{ text:'Columns', value:'column' },
+				{ text:'Filters', value:'filter' },
+				{ text:'Sorts', value:'sort' },
+				{ text:'Summary', value:'summary' },
+			],
+		}
+	},
+
+	mounted() {
+		this.patch()
+		this.socket.onAny(this.onHooks)
+		window.addEventListener('focus', this.onFocus)
+	},
+
+	unmounted() {
+		window.removeEventListener('focus', this.onFocus)
+		this.socket.offAny(this.onHooks)
+
+		if(this.configs.name)
+			this.socketEmit(this.configs.name + '.unsubscribe', { name:this.configs.name })
+	},
+
+	methods:{
+
+		patch(){
+			this.isLoading = this.isSummaryLoading = true
+			this.socketEmit(`${this.computedDataSource}.patch`, {
+				...(urlQuery().reset ? { reset:1 } : {})
+			}, (res) => {
+				const data = res.data ? res.data : res
+				this.isLoading = this.isSummaryLoading = false
+
+				Object.assign(this.configs, data.configs)
+				this.mapApiKey = data.mapApiKey
+				this.patchPresets()
+				this.$nextTick(() => {
+					this.items = data.items
+					this.hasNext = data.hasNext
+					this.count = data.count
+					this.lastLoadAt = new Date().getTime()
+
+					this.loadSummary()
+
+					if(this.configs.name)
+						this.socketEmit(this.configs.name + '.subscribe', { name:this.configs.name })
+				})
+
+			}, (err) => {
+				this.isLoading = this.isSummaryLoading = false
+				this.toast(err)
+			})
+		},
+
+		patchPresets(){
+
+			if(!this.configs.columns) return
+
+			this.configs.presets.forEach((preset) => {
+
+				const presetColumnKeys = {}
+				const removedKeys = []
+				for(let i = (preset.columns ?? []).length - 1 ; i >= 0 ; i--){
+					const presetColumn = preset.columns[i]
+					const presetColumnKey = presetColumn.key
+					if(this.configs.columns[presetColumnKey]){
+						const updated = {}
+						if(this.configs.columns[presetColumnKey].label !== presetColumn.label)
+							updated['label'] = this.configs.columns[presetColumnKey].label
+						if(this.configs.columns[presetColumnKey].filterable !== presetColumn.filterable)
+							updated['filterable'] = this.configs.columns[presetColumnKey].filterable
+						if(this.configs.columns[presetColumnKey].sortable !== presetColumn.sortable)
+							updated['sortable'] = this.configs.columns[presetColumnKey].sortable
+						if(Object.keys(updated).length > 0){
+							Object.assign(preset.columns[i], updated)
+						}
+					}
+					else{
+						preset.columns.splice(i, 1)
+						removedKeys.push(presetColumnKey)
+					}
+					presetColumnKeys[presetColumn.key] = 1
+				}
+
+				for(let key in this.configs.columns){
+					if(typeof presetColumnKeys[key] === 'undefined'){
+						preset.columns.push(this.configs.columns[key])
+					}
+				}
+			})
+
+		},
+
+		load(){
+			if(this.presetSummary){
+				if(!this.presetSummary.enabled && this.presetSummary.hideDetails){
+					this.presetSummary.hideDetails = false
+				}
+			}
+
+			this.isLoading = true
+			this.socketEmit(`${this.computedDataSource}.load`, {
+				preset: this.preset
+			}, (res) => {
+				const data = res.data ? res.data : res
+				this.items = data.items
+				this.hasNext = data.hasNext
+				this.count = data.count
+				this.isLoading = false
+				this.lastLoadAt = new Date().getTime()
+			}, (err) => {
+				this.isLoading = false
+				this.toast(err)
+			})
+
+			this.loadSummary()
+		},
+
+		loadNext(){
+			this.socketEmit(`${this.computedDataSource}.load`, {
+				preset: this.preset,
+				afterItem: this.items[this.items.length - 1]
+			}, (res) => {
+				this.items.push(...res.items)
+				this.hasNext = res.hasNext
+			})
+		},
+
+		loadSummary(){
+
+			if(!this.presetSummary) return
+
+			this.isSummaryLoading = true
+			this.socketEmit(`${this.computedDataSource}.load-summary`, {
+				preset: this.preset
+			}, (res) => {
+				this.isSummaryLoading = false
+				const data = res && res.data ? res.data : res
+				this.summary = data
+			}, (err) => {
+				this.isSummaryLoading = false
+				this.toast(err)
+			})
+		},
+
+		onFocus(){
+			if(!this.lastLoadAt || (new Date().getTime() - this.lastLoadAt) > 600000)
+				this.load()
+		},
+
+		savePreset: throttle(function() {
+			const presetName = this.configs.name ?? this.model
+			const presetUrl = this.configs.name ?? 'user'
+			this.socketEmit(`${presetUrl}.save-preset`, { key:presetName, preset:this.configs })
+		}, 1000),
+
+		clearSearch(){
+			this.preset.search = ''
+			this.load()
+		},
+
+		selectPreset(preset){
+			this.configs.presetIdx = this.configs.presets.findIndex((_) => _ === preset)
+			this.load()
+		},
+
+		openPreset(index, presetTab = 'column'){
+			this.configs.presetOpenIdx = index
+			this.configs.presetOpen = true
+			this.configs.presetTab = presetTab
+		},
+
+		closePreset(){
+			this.configs.presetOpen = false
+		},
+
+		copyPreset(){
+			const preset = JSON.parse(JSON.stringify(this.preset))
+			preset.name += '(Copy)'
+			this.presets.push(preset)
+			this.presetIdx = this.presets.length - 1
+		},
+
+		removePreset(idx){
+			this.confirm(this.$t('Remove this preset?'), '', () => {
+				this.configs.presets.splice(idx, 1)
+				if(this.configs.presetIdx > this.configs.presets.length - 1){
+					this.configs.presetIdx = this.configs.presets.length - 1
+				}
+			})
+		},
+
+		onHooks(module, event, items){
+
+			if(!Array.isArray(items)) return
+			items = items.filter((_) => _).map((_) => {
+				_['_highlight'] = 1
+				return _
+			})
+
+			if(module === this.model){
+
+				switch(event){
+
+					case 'create':
+					case 'update':
+						items.forEach((item) => {
+							this.$util.unshift(this.items, item)
+						})
+						break
+
+					case 'remove':
+					case 'destroy':
+						items.forEach((item) => {
+							const idx = this.items.findIndex((_) => _.id === item.id)
+							if(idx >= 0){
+								this.items.splice(idx, 1)
+							}
+						})
+						break
+				}
+			}
+		},
+
+		addFilter(key){
+
+			const column = this.configs.columns[key]
+
+			if(!this.preset.filters){
+				this.preset.filters = []
+			}
+
+			let filters = [{}]
+			switch(column.type){
+				case 'date':
+				case 'enum':
+					filters = [{ value:[] }]
+					break
+			}
+
+			this.preset.filters.push({
+				enabled: true,
+				key: column.key,
+				label: column.label,
+				type: column.type,
+				typeParams: column.typeParams,
+				filters
+			})
+
+			this.presetFilterSelector = null
+		},
+
+		addCurrentFilter(){
+			this.addFilter(this.selectedColumn)
+		},
+
+		addSort(key){
+
+			const column = this.preset.columns.filter((_) => _.key === key).pop()
+
+			if(!this.preset.sorts){
+				this.preset.sorts = []
+			}
+
+			this.preset.sorts.push({
+				key: column.key,
+				label: column.label
+			})
+
+			this.presetSortSelector = null
+			this.load()
+		},
+
+		removeSort(sort){
+			this.preset.sorts.splice(this.preset.sorts.indexOf(sort), 1)
+			this.load()
+		},
+
+		removeFilter(filter){
+			this.preset.filters.splice(this.preset.filters.indexOf(filter), 1)
+			this.load()
+		},
+
+		reorderColumns(from, to){
+			this.preset.columns.splice(to, 0, this.preset.columns.splice(from, 1)[0])
+		},
+
+		colOf(key){
+			return 'col-' + key
+		},
+
+		getHeader(column){
+
+			return [
+				this.$style.header,
+				(this.preset.filters ?? []).findIndex((_) => _.key === column.key && _.enabled) >= 0 ?
+					this.$style.headerSelected : ''
+			]
+			.join(' ')
+		},
+
+		openColumnOptions(key, target){
+			this.selectedColumn = key
+			this.$refs.columnMenu.open(target)
+		},
+
+		setSortCurrent(sortType){
+			this.preset.sorts = [
+				{
+					key: this.selectedColumn,
+					label: this.configs.columns[this.selectedColumn].label,
+					type: sortType === 2 ? 'desc' : 'asc'
+				}
+			]
+			this.load()
+			this.$refs.columnMenu.close()
+		},
+
+		hide(){
+			const idx = this.preset.columns.findIndex((_) => _.key === this.selectedColumn)
+			this.preset.columns[idx].visible = false
+			this.$refs.columnMenu.close()
+		},
+
+		tabChanged(value){
+			if(value === 'summary'){
+				this.configs.summaryOpenIdx = -1
+			}
+		},
+
+		addSummary(){
+
+			this.preset.summaries.push({
+				title: "New Summary",
+				table: { rows: [{}], columns:[{}], values:[{}] },
+				bar: { rows: [{}], columns:[{}], values:[{}] },
+				line: { rows: [{}], columns:[{}], values:[{}] },
+				map: {}
+			})
+
+			this.configs.summaryOpenIdx = this.preset.summaries.length - 1
+		},
+
+		removeSummary(summary){
+			const index = this.preset.summaries.indexOf(summary)
+			if(index >= 0){
+				this.confirm('Remove this summary?', '', () => {
+					this.preset.summaries.splice(index, 1)
+				})
+			}
+		},
+
+		enableSummary(idx){
+			this.preset.summaries.forEach((_, __) => _.enabled = idx === __)
+			this.loadSummary()
+		},
+
+		addPreset(){
+
+			const columns = []
+			for(let key in this.configs.columns){
+				columns.push({
+					...this.configs.columns[key],
+					visible: false
+				})
+			}
+
+			this.configs.presets.push({
+				name: 'New Preset',
+				columns,
+				filters: [],
+				sorts: [],
+				summaries: []
+			})
+
+			this.configs.presetTab = 'column'
+			this.configs.presetIdx = this.configs.presetOpenIdx = this.configs.presets.length - 1
+		}
+
+	},
+
+	watch: {
+
+		configs: {
+			deep: true,
+			handler(to, from){
+				if(from !== null){
+					this.savePreset()
+				}
+			}
+		},
+
+		'openedPresetSummary.mode'(to){
+			if(to && !this.openedPresetSummary[to]){
+				this.openedPresetSummary[to] =  { rows: [{}], columns:[{}], values:[{}] }
+			}
+		}
+
+	}
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex-1 flex flex-row relative;
+}
+
+.header{
+	@apply p-2 cursor-pointer border-b-[2px] border-transparent overflow-hidden;
+}
+.header>*:first-child{
+	@apply text-ellipsis whitespace-nowrap overflow-x-hidden;
+}
+
+.headerSelected{
+	@apply border-primary;
+}
+
+.hoverable{
+	@apply hover:bg-primary hover:text-white;
+}
+
+.loadingComp{
+	@apply absolute left-0 top-0 right-0 bottom-0;
+	@apply flex flex-col gap-4 items-center justify-center;
+	background: rgba(0, 0, 0, .3);
+}
+
+.overlay{
+	@apply absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center;
+	background-color: rgba(var(--base-500), .7);
+}
+
+</style>