@mixd-id/web-scaffold 0.1.230406041 → 0.1.230406042

package/package.json

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

package/src/components/Alert.vue

@@ -15,12 +15,12 @@
 							<path d="M13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16Z"/>
 							<path fill-rule="evenodd" clip-rule="evenodd" d="M12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"/>
 						</svg>
-						
+
 						<div :class="$style.cont2">
 							<h5 :class="$style.title">{{ title }}</h5>
 							<p :class="$style.description">{{ description }}</p>
 						</div>
-						
+
 						<div class="mt-4" v-if="mode === 'alert'">
 							<Button @click="$emit('dismiss')" class="min-w-[88px]">
 								<strong class="px-4">
@@ -104,9 +104,8 @@ export default{
 					else if(this.state.title.message){
 						description = this.state.title.message
 					}
-          else if(this.state.title.reason && this.state.title.reason.message &&
-							this.state.title.reason.message.message){
-            description = this.state.title.reason.message.message
+          else if(this.state.title.reason && this.state.title.reason.message){
+            description = this.state.title.reason.message
 					}
 				}
 				else{
@@ -197,4 +196,4 @@ export default{
 	opacity: 0;
 }
 
-</style>
+</style>

package/src/components/Box.vue

@@ -0,0 +1,25 @@
+<template>
+	<div :class="$style.comp">
+		<h1>{{ title }}</h1>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+  props: {
+    title: String
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex-1 bg-base-300 flex items-center justify-center;
+}
+
+</style>

package/src/components/ListView.vue

@@ -0,0 +1,268 @@
+<template>
+	<div :class="$style.comp" v-if="true || configLoaded">
+
+		<div class="flex flex-row items-center gap-4 px-3">
+			<div class="flex-1 flex flex-row gap-1">
+        <h5>{{ title }}</h5>
+        <button type="button">
+          <svg width="16" height="16" class="fill-text-300 hover:fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
+				</button>
+			</div>
+			<Textbox placeholder="Cari..." :clearable="true" @clear="clearSearch" v-model="preset.search"
+				@keyup.enter="load">
+
+			</Textbox>
+		</div>
+
+		<VirtualTable ref="table1" :columns="presetColumns" :items="items" class="flex-1"
+                  @scroll-end="loadNext">
+			<template v-for="column in presetColumns" #[colOf(column.key)]="{}">
+				<div :class="getHeader(column)">
+					<div>
+						{{ column.label ?? column.key }}
+					</div>
+					<div class="absolute top-0 right-0 p-2 bg-base-500" v-if="false">
+						<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="false">
+						<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-', ''))">
+					<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>
+
+		<Modal ref="setting" width="700" height="600">
+			<template v-slot:head>
+				<div class="relative p-5">
+					<h3>Settings</h3>
+					<div class="absolute top-0 right-0 p-2">
+						<button type="button" class="p-2" @click="$refs.setting.close()">
+							<svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+								<path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+							</svg>
+						</button>
+					</div>
+				</div>
+			</template>
+			<ListViewSettings class="flex-1"
+												ref="setting"
+												:config="config"
+												@change="load" />
+		</Modal>
+
+	</div>
+</template>
+
+<script>
+
+import throttle from "lodash/throttle";
+
+export default{
+
+	emits: [ ],
+
+	props: {
+
+		src: String,
+
+		model: String,
+		name: String,
+		channel: String,
+
+		config: {
+      type: Object,
+			defaultValue: {}
+		},
+		configStore: String,
+
+    title: String
+
+	},
+
+	methods: {
+
+    clearSearch(){
+      this.preset.search = ''
+			this.load()
+		},
+
+		colOf(key){
+			return 'col-' + key
+		},
+
+		getHeader(column){
+
+			return [
+				this.$style.header,
+				(this.preset.filters ?? []).findIndex((_) => _.key === column.key && _.enabled) >= 0 ?
+					this.$style.headerSelected : ''
+			]
+				.join(' ')
+		},
+
+		load(){
+      if(!this.src) return
+
+			this.socketEmit2(this.src, { preset: this.preset })
+				.then((res) => {
+					Object.assign(this.$data, res)
+				})
+		},
+
+		loadNext(){
+
+			this.$refs.table1.setState(2)
+			this.socketEmit2(this.src, {
+				preset: this.preset,
+				afterItem: this.items[this.items.length - 1]
+			})
+				.then((res) => {
+					this.items.push(...res.items)
+					this.hasNext = res.hasNext
+					console.log('loadNext', this.$data)
+				})
+				.catch((err) => {
+					this.toast(err)
+				})
+				.finally(() => this.$refs.table1.setState(1))
+		},
+
+		async loadConfig(){
+			switch(this.configStoreObj.type){
+				case 'socket':
+					return this.socketEmit2(this.configStoreObj.src, { key:this.name })
+						.then((config) => {
+							Object.assign(this.config, config ?? {})
+							this.configLoaded = true
+						})
+			}
+		},
+
+		saveConfig: throttle(function() {
+			if(!this.configLoaded) return
+			switch(this.configStoreObj.type){
+				case 'socket':
+					this.socketEmit2(this.configStoreObj.src, { key:this.name, config:this.config })
+					break
+			}
+		}, 1000, { leading:true }),
+
+	},
+
+
+	inject: [ 'socketEmit2', 'toast', 'alert' ],
+
+	computed: {
+
+    configStoreObj(){
+      const splitted = ((this.configStore ?? '').toString()).split(':')
+
+			return {
+        type: splitted[0],
+				src: splitted[1]
+			}
+		},
+
+		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
+		},
+
+		preset(){
+			return ((this.config ?? {}).presets ?? [])[(this.config ?? {}).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.config.columns[presetColumn.key] ?? {}
+				for(let key in column){
+					if(!presetColumn[key]){
+						this.preset.columns[i][key] = column[key]
+					}
+				}
+			}
+
+			return this.preset.columns
+		},
+
+	},
+
+	data(){
+		return {
+			items: [],
+			hasNext: false,
+			count: null,
+      configLoaded: false
+		}
+	},
+
+
+	mounted() {
+    this.loadConfig().then(() => {
+      this.load()
+		})
+  },
+
+	watch: {
+
+		config: {
+      deep: true,
+			handler(to){
+        this.saveConfig()
+      }
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex-1 flex flex-col gap-4;
+}
+
+.header{
+	@apply p-2 cursor-pointer border-b-[2px] border-transparent overflow-hidden;
+}
+.header>*:first-child{
+	@apply text-ellipsis whitespace-nowrap overflow-x-hidden;
+}
+
+</style>

package/src/components/ListViewSettings.vue

@@ -0,0 +1,598 @@
+<template>
+	<div :class="styleComp">
+    <div>
+
+      <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 config.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 === config.presetIdx" @change="selectPreset(preset)" />
+          </div>
+          <div @click="presetOpenIdx = idx" class="flex-1">
+            <label>{{ preset.name }}</label>
+          </div>
+          <button class="px-2" v-if="config.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>
+      <div class="p-6 pb-0">
+        <div class="flex flex-row gap-4 mb-3">
+          <button @click="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" />
+        </div>
+
+        <div class="flex justify-center">
+          <Tabs v-model="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="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="$emit('change')">
+                  {{ item.label ?? item.key }}
+                </Checkbox>
+              </div>
+            </template>
+          </ListItem>
+        </div>
+
+        <div class="flex flex-col" v-else-if="presetTab === 'filter'">
+          <div v-if="filterableColumns.length > 0">
+            <ListPage1Filter v-if="preset.filters" v-for="filter in preset.filters"
+                             :filter="filter" :column="config.columns[filter.key]"
+                             @remove="removeFilter(filter)" @change="$emit('change')"/>
+            <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 ?? column.key }}</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="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="$emit('change')">
+                    <option value="" disabled selected>{{ $t('Add Sort') }}</option>
+                    <option v-for="column in sortableColumns" :value="column.key">{{ column.label ?? column.key }}</option>
+                  </Dropdown>
+                </div>
+                <div>
+                  <Dropdown v-model="sort.type" @change="$emit('change')" 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 ?? column.key }}</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="presetTab === 'summary'">
+
+          <div v-if="config.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="config.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="config.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 ?? column.key }}</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 ?? column.key }}</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 ?? column.key }}</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 ?? column.key }}</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 ?? column.key }}</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 ?? column.key }}</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 ?? column.key }}</option>
+                  </Dropdown>
+                </div>
+              </div>
+
+            </div>
+
+          </div>
+
+        </div>
+
+      </div>
+    </div>
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	emits: [ 'change' ],
+
+	props: {
+		config: Object
+	},
+
+	methods: {
+
+		addFilter(key){
+
+			const column = this.config.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
+		},
+
+		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.$emit('change')
+		},
+
+		removeFilter(filter){
+			this.preset.filters.splice(this.preset.filters.indexOf(filter), 1)
+			this.$emit('change')
+		},
+
+		removeSort(sort){
+			this.preset.sorts.splice(this.preset.sorts.indexOf(sort), 1)
+			this.$emit('change')
+		},
+
+		reorderColumns(from, to){
+			this.preset.columns.splice(to, 0, this.preset.columns.splice(from, 1)[0])
+		},
+
+		selectPreset(preset){
+			this.config.presetIdx = this.config.presets.findIndex((_) => _ === preset)
+			this.$emit('change')
+		},
+
+		tabChanged(value){
+			if(value === 'summary'){
+				this.config.summaryOpenIdx = -1
+			}
+		},
+
+	},
+
+
+	inject: [],
+
+  computed: {
+
+    styleComp(){
+      return [
+        this.$style.comp,
+        this.$style['comp-' + this.viewMode],
+        this.presetOpenIdx >= 0 ? this.$style['isOpen'] : ''
+      ]
+        .join(' ')
+    },
+
+    filterableColumns(){
+      return Object.values(this.config.columns).filter((_) => _.filterable)
+    },
+
+    sortableColumns(){
+      return Object.values(this.config.columns).filter((_) => _.sortable)
+    },
+
+    preset(){
+      return this.config.presets[this.config.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.config.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)
+    },
+
+    openedPresetSummary(){
+      return ((this.preset ?? {}).summaries ?? [])[this.config.summaryOpenIdx] ?? undefined
+    },
+
+  },
+
+  data(){
+    return {
+      tabItems: [
+        { text:'Columns', value:'column' },
+        { text:'Filters', value:'filter' },
+        { text:'Sorts', value:'sort' },
+        { text:'Summary', value:'summary' },
+      ],
+      presetTab: 'column',
+      presetFilterSelector: null,
+      presetSortSelector: null,
+      viewMode: null,
+      presetOpenIdx: -1,
+    }
+  },
+
+  mounted() {
+    this.viewMode = this.$el.clientWidth <= 480 ? 'sm' : 'md'
+  },
+
+  watch: {
+
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+.comp-sm{
+}
+.comp-sm>*:first-child{
+
+}
+.comp-sm>*:last-child{
+  @apply hidden;
+}
+.comp-sm.isOpen>*:first-child{
+  @apply hidden;
+}
+.comp-sm.isOpen>*:last-child{
+  @apply block;
+}
+
+.comp-md{
+  @apply flex flex-row gap-4;
+}
+.comp-md>*:first-child{
+  @apply w-[200px];
+}
+.comp-md>*:last-child{
+  @apply flex-1 flex flex-col;
+}
+
+</style>

package/src/components/PageBuilder.vue

@@ -0,0 +1,219 @@
+<template>
+	<div :class="$style.comp">
+
+		<div :class="$style.pageGrid" ref="pageGrid">
+			<div 	v-for="(widget, index) in widgets"
+						:class="$style.column + ` col-span-${widget.span}`"
+					 	:style="{ height:widget.height }"
+						@mouseover="onMoverMouseOver">
+				<div :class="$style.mover" class="hidden" @mousedown="(e) => onMoverStart(e, widget, index)"></div>
+				<div :class="$style.resizeRight" @mousedown="(e) => onMouseDown(e, widget, 'right')"></div>
+				<div :class="$style.resizeBottom" @mousedown="(e) => onMouseDown(e, widget, 'bottom')"></div>
+				<div :class="$style.resizeBottomRight" @mousedown="(e) => onMouseDown(e, widget, 'bottom-right')"></div>
+				<div v-if="widget.title">
+					<h5>{{ widget.title }}</h5>
+				</div>
+				<component :is="widget.type" :="widget.props"></component>
+			</div>
+		</div>
+
+		<div class="col-span-1"></div>
+		<div class="col-span-2"></div>
+		<div class="col-span-3"></div>
+		<div class="col-span-4"></div>
+		<div class="col-span-5"></div>
+		<div class="col-span-6"></div>
+		<div class="col-span-7"></div>
+		<div class="col-span-8"></div>
+		<div class="col-span-9"></div>
+		<div class="col-span-10"></div>
+		<div class="col-span-11"></div>
+
+		<div class="col-span-12"></div>
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	props: {
+
+		widgets: Array
+
+	},
+
+	methods: {
+
+		onMouseDown(e, widget){
+			this.curResize = {
+				target: e.target.parentNode,
+				startX: e.clientX,
+				startY: e.clientY,
+				startSpan: widget.span,
+				startHeight: widget.height,
+				xSize: Math.round(window.innerWidth / 12),
+				ySize: Math.round(window.innerHeight / 12),
+				widget
+			}
+
+			window.addEventListener('mousemove', this.onMouseMove)
+			window.addEventListener('mouseup', this.onMouseOut)
+		},
+
+		onMouseMove(e){
+			if(!this.curResize) return
+
+			e.preventDefault()
+
+			const distanceX = e.clientX - this.curResize.startX
+			const distanceY = e.clientY - this.curResize.startY
+
+			const spanAdder = Math.round(distanceX / this.curResize.xSize)
+			const heightAdder = Math.round(distanceY / this.curResize.ySize) * this.curResize.ySize
+
+			let span = parseInt(this.curResize.startSpan) + spanAdder
+			let height = (parseInt(this.curResize.startHeight) + heightAdder) + 'px'
+
+			if(span < 1) span = 1
+			else if(span > 12) span = 12
+
+      if(height < this.curResize.ySize) height = this.curResize.ySize
+      else if(height > window.innerHeight) height = window.innerHeight
+
+			this.curResize.widget.span = span
+			this.curResize.widget.height = height
+		},
+
+		onMouseOut(){
+			window.removeEventListener('mousemove', this.onMouseMove)
+			window.removeEventListener('mouseup', this.onMouseOut)
+			this.curResize = null
+		},
+
+    onMoverStart(e, widget, index){
+
+      const columnEl = e.target.parentNode;
+      const rect = columnEl.getBoundingClientRect()
+
+      const cloned = columnEl.cloneNode(true)
+			cloned.classList.add(this.$style.dragged)
+			cloned.style.left = (Math.round(rect.x) + 16) + 'px'
+			cloned.style.top = (Math.round(rect.y) + 16) + 'px'
+			cloned.style.width = columnEl.clientWidth + 'px'
+			cloned.style.height = columnEl.clientHeight + 'px'
+			this.$el.appendChild(cloned)
+
+      this.curResize = {
+        widget,
+        index,
+				cloned,
+				startX: e.clientX,
+				startY: e.clientY
+      }
+
+      window.addEventListener('mousemove', this.onMoverMove)
+      window.addEventListener('mouseup', this.onMoverUp)
+		},
+
+		swapArray(arr, i, j){
+      const temp = arr[i];
+      arr[i] = arr[j];
+      arr[j] = temp;
+    },
+
+    onMoverMove(e){
+      if(!this.curResize) return
+
+      e.preventDefault()
+
+			const cloned = this.curResize.cloned
+			const distanceX = e.clientX - this.curResize.startX
+			const distanceY = e.clientY - this.curResize.startY
+      this.curResize.startX = e.clientX
+			this.curResize.startY = e.clientY
+
+			cloned.style.left = (parseInt(cloned.style.left) + distanceX) + 'px'
+			cloned.style.top = (parseInt(cloned.style.top) + distanceY) + 'px'
+		},
+
+    onMoverMouseOver(e){
+      if(!this.curResize || !this.curResize.cloned) return
+
+			const targetIdx = Array.prototype.indexOf.call(this.$refs.pageGrid.children, e.target.parentNode)
+
+      this.$refs.pageGrid.querySelectorAll('.' + this.$style.highlight).forEach(el => el.classList.remove(this.$style.highlight))
+
+			if(targetIdx !== this.curResize.index){
+        this.curResize.targetIdx = targetIdx
+        e.target.classList.add(this.$style.highlight)
+			}
+		},
+
+    onMoverUp(){
+			this.swapArray(this.widgets, this.curResize.targetIdx, this.curResize.index)
+
+      window.removeEventListener('mousemove', this.onMoverMove)
+      window.removeEventListener('mouseup', this.onMoverUp)
+      this.$el.removeChild(this.curResize.cloned)
+      this.curResize = null
+
+      this.$refs.pageGrid.querySelectorAll('.' + this.$style.highlight).forEach(el => el.classList.remove(this.$style.highlight))
+		},
+
+    test(){
+      this.swapArray(this.widgets, 4, 0)
+		}
+
+	},
+
+	data(){
+		return {
+			curResize: null
+		}
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+.column{
+	@apply flex flex-col gap-2;
+}
+
+.pageGrid{
+	@apply grid grid-cols-12 gap-6;
+}
+.pageGrid>*{
+	@apply relative flex;
+}
+
+.resizeRight{
+	@apply absolute top-0 right-0 w-[4px] bottom-[6px] bg-text-50 cursor-e-resize;
+}
+.resizeBottom{
+	@apply absolute bottom-0 left-0 right-[6px] h-[4px] bg-text-50 cursor-s-resize;
+}
+.resizeBottomRight{
+	@apply absolute bottom-0 right-0 w-[4px] h-[4px] bg-text-50 cursor-se-resize;
+}
+
+.mover{
+	@apply absolute top-0 left-0 w-[24px] h-[24px] bg-text-50 cursor-move;
+}
+
+.dragged{
+	@apply absolute bg-base-300;
+}
+
+.highlight{
+	@apply opacity-50;
+}
+
+</style>

package/src/index.js

@@ -208,6 +208,7 @@ export default{
 
     app.component('Alert', defineAsyncComponent(() => import("./components/Alert.vue")))
     app.component('Button', defineAsyncComponent(() => import("./components/Button.vue")))
+    app.component('Box', defineAsyncComponent(() => import("./components/Box.vue")))
     app.component('SearchButton', defineAsyncComponent(() => import("./components/SearchButton.vue")))
     app.component('ButtonGroup', defineAsyncComponent(() => import("./components/ButtonGroup.vue")))
     app.component('ChatTyping', defineAsyncComponent(() => import("./components/ChatTyping.vue")))
@@ -231,10 +232,13 @@ export default{
     app.component('ListPage1', defineAsyncComponent(() => import("./components/ListPage1.vue")))
     app.component('ListPage1Filter', defineAsyncComponent(() => import("./components/ListPage1Filter.vue")))
     app.component('ListItem', defineAsyncComponent(() => import("./components/ListItem.vue")))
+    app.component('ListView', defineAsyncComponent(() => import("./components/ListView.vue")))
+    app.component('ListViewSettings', defineAsyncComponent(() => import("./components/ListViewSettings.vue")))
     app.component('Carousel', defineAsyncComponent(() => import("./components/Carousel.vue")))
     app.component('ContextMenu', defineAsyncComponent(() => import("./components/ContextMenu.vue")))
     app.component('Modal', defineAsyncComponent(() => import("./components/Modal.vue")))
     app.component('OTPField', defineAsyncComponent(() => import("./components/OTPField.vue")))
+    app.component('PageBuilder', defineAsyncComponent(() => import("./components/PageBuilder.vue")))
     app.component('Radio', defineAsyncComponent(() => import("./components/Radio.vue")))
     app.component('TableView', defineAsyncComponent(() => import("./components/TableView.vue")))
     app.component('TableViewHead', defineAsyncComponent(() => import("./components/TableViewHead.vue")))
@@ -252,4 +256,4 @@ export default{
 
 
   }
-}
+}

package/src/utils/helpers.mjs

@@ -209,8 +209,15 @@ function observeInit(){
     el.__observeKey = key
   }
 
+  const unregister = function(el){
+    if(el && el.__observeKey && observeCols[el.__observeKey]){
+      delete observeCols[el.__observeKey]
+    }
+  }
+
   return {
     once,
-    always
+    always,
+    unregister
   }
 }