@mixd-id/web-scaffold 0.1.230406337 → 0.1.230406338

package/package.json

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

package/src/components/List.vue

@@ -40,7 +40,7 @@
 
                 <div class="flex flex-row gap-2 md:gap-3 items-center" ref="title">
                   <div class="flex flex-col whitespace-nowrap text-ellipsis overflow-hidden">
-                    <div class="cursor-pointer group" @click="$refs.contextMenu.open($refs.title)">
+                    <div class="cursor-pointer group px-2 md:px-0" @click="$refs.contextMenu.open($refs.title)">
                       <small class="text-text-400 text-xs">{{ title ?? 'Untitled' }}</small>
                       <div class="flex flex-row items-baseline gap-1">
                         <h5 class="whitespace-nowrap relative top-[-2px] text-ellipsis overflow-hidden group-hover:text-primary">

package/src/defs/dashboard-preset.js

@@ -0,0 +1,22 @@
+module.exports = {
+
+  uid: "uid-1",
+  name: "Dashboard 1",
+
+  datasource: [
+    {
+      uid: "uid-1",
+      type:"mpp.hmc",
+      name: "Datasource 1",
+      columns: [
+        { key:"coo", label:"COO" },
+        { key:"mppTgtLck", label:"MPP TGT LCK" },
+      ]
+    }
+  ],
+
+  views: [
+    { uid:"uid-1", type:"List", name:"List" }
+  ]
+
+}

package/src/index.js

@@ -669,6 +669,7 @@ export default{
     app.component('TypographySetting', defineAsyncComponent(() => import("./widgets/TypographySetting.vue")))
     app.component('FiltersSetting', defineAsyncComponent(() => import("./widgets/FiltersSetting.vue")))
     app.component('MenuEditor', defineAsyncComponent(() => import("./widgets/MenuEditor.vue")))
+    app.component('Dashboard', defineAsyncComponent(() => import("./widgets/Dashboard.vue")))
     app.component('Text', defineAsyncComponent(() => import("./components/Text.vue")))
   }
 

package/src/themes/default/index.js

@@ -243,7 +243,7 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
 
     '.openltr-enter-from, .openltr-leave-to': {
       opacity: 0,
-      transform: 'translateX(30px)'
+      transform: 'translateX(100px)'
     },
 
     '.openltr-leave-active': {

package/src/widgets/Dashboard/DatasourceSelector.vue

@@ -0,0 +1,97 @@
+<template>
+	<Modal ref="modal"
+         width="320"
+         height="360">
+	  <template v-slot:head>
+	    <div class="relative p-6">
+	      <h3>{{ $t('Select Datasource') }}</h3>
+	      <div class="absolute top-0 right-0 p-2">
+	        <button type="button" class="p-2" @click="close">
+	          <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+	            <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+	          </svg>
+	        </button>
+	      </div>
+	    </div>
+	  </template>
+	  <template v-slot:foot>
+	    <div class="p-6">
+
+	    </div>
+	  </template>
+	  <div class="flex-1 p-6">
+
+      <button v-for="datasource in datasources"
+              type="button"
+              @click="add(datasource)">
+        {{ datasource.name }}
+      </button>
+
+	  </div>
+	</Modal>
+</template>
+
+<script>
+
+import Modal from "../../components/Modal.vue"
+import md5 from "md5";
+
+export default{
+
+  components: { Modal },
+
+  emits: [ 'add' ],
+
+	inject: [ 'alert', 'socket' ],
+
+  props: {
+
+    src: String
+
+  },
+
+	data(){
+		return {
+      instance: null,
+      datasources: null,
+		}
+	},
+
+	methods: {
+
+    add(item){
+      const newItem = JSON.parse(JSON.stringify(item))
+      newItem.uid = md5(newItem.name + Date.now())
+
+      this.close()
+      this.$emit('add', newItem)
+    },
+
+    load(){
+      this.socket.send(this.src, {})
+          .then(res => this.datasources = res.items)
+          .catch(err => this.alert(err))
+    },
+
+		open(){
+      this.load()
+      this.$refs.modal.open()
+		},
+
+		close(){
+      this.$refs.modal.close()
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/Dashboard/Doughnut.vue

@@ -0,0 +1,99 @@
+<template>
+	<div class="flex flex-col gap-2">
+
+    <Doughnut class="aspect-square"
+              :options="chartOptions"
+              :data="chartData" />
+
+    <div class="flex justify-center">
+      {{ column }}
+    </div>
+
+	</div>
+</template>
+
+<script>
+
+import { Doughnut } from 'vue-chartjs'
+import Chart from 'chart.js/auto'
+
+export default{
+
+  components: {
+    Doughnut
+  },
+
+  computed: {
+
+    chartData(){
+      if(!Array.isArray(this.items)) return { labels:[], datasets:[] }
+
+      const labels = this.items.map(_ => _[this.rows])
+
+      const data = this.items.map(_ => _[this.column])
+
+      const backgroundColor = labels.map((_, i) => this.backgroundColors[i % this.backgroundColors.length])
+
+      return {
+        labels,
+        datasets: [{
+          label: this.rows,
+          data: data,
+          backgroundColor,
+          hoverOffset: 4
+        }]
+      }
+    },
+
+    chartOptions(){
+      return {
+        responsive: true,
+        maintainAspectRatio: true,
+        plugins: {
+          legend: {
+            display: false
+          },
+        },
+      }
+    },
+
+  },
+
+  data(){
+    return {
+      backgroundColors: [
+        '#5D9CEC',
+        '#A0D468',
+        '#FFCE54',
+        '#FC6E51',
+        '#48CFAD',
+        '#AC92EC',
+        '#4FC1E9',
+        '#FFCE54',
+        '#ED5565',
+        '#EC87C0'
+      ],
+    }
+  },
+
+  props: {
+
+    items: Array,
+
+    column: String,
+
+    rows: String
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/Dashboard/DoughnutSetting.vue

@@ -0,0 +1,80 @@
+<template>
+	<div :class="$style.comp">
+
+    <div class="flex flex-row items-center p-3">
+      <label class="flex-1">Datasource</label>
+      <div>
+        <Dropdown class="min-w-[150px]"
+                  v-model="value.datasourceUid"
+                  @change="delete value.columns">
+          <option v-for="datasource in preset.datasource"
+                  :value="datasource.uid">
+            {{ datasource.name }}
+          </option>
+        </Dropdown>
+      </div>
+    </div>
+
+    <div v-if="value.datasourceUid" class="flex flex-col">
+      <div class="flex flex-row items-center p-3">
+        <label class="flex-1">Column</label>
+        <div>
+          <Dropdown class="min-w-[150px]"
+                    v-model="value.column">
+            <option v-for="column in datasource.columns"
+                    :value="column.key">
+              {{ column.text }}
+            </option>
+          </Dropdown>
+        </div>
+      </div>
+
+      <div class="flex flex-row items-center p-3">
+        <label class="flex-1">Rows</label>
+        <div>
+          <Dropdown class="min-w-[150px]"
+                    v-model="value.rows">
+            <option v-for="column in datasource.columns"
+                    :value="column.key">
+              {{ column.text }}
+            </option>
+          </Dropdown>
+        </div>
+      </div>
+    </div>
+
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+  computed: {
+
+    datasource(){
+      return this.preset.datasource.find(d => d.uid === this.value.datasourceUid)
+    }
+
+  },
+
+  props: {
+
+    preset: Object,
+
+    value: Object
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/Dashboard/ViewSelector.vue

@@ -0,0 +1,102 @@
+<template>
+	<Modal ref="modal"
+         width="320"
+         height="360">
+	  <template v-slot:head>
+	    <div class="relative p-6">
+	      <h3>{{ $t('Select View') }}</h3>
+	      <div class="absolute top-0 right-0 p-2">
+	        <button type="button" class="p-2" @click="close">
+	          <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+	            <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+	          </svg>
+	        </button>
+	      </div>
+	    </div>
+	  </template>
+	  <template v-slot:foot>
+	    <div class="p-6">
+
+	    </div>
+	  </template>
+	  <div class="flex-1 p-6">
+
+      <div class="flex flex-col">
+        <button v-for="component in components"
+                type="button"
+                :class="$style.button"
+                @click="add(component)">
+          {{ component.text }}
+        </button>
+      </div>
+
+	  </div>
+	</Modal>
+</template>
+
+<script>
+
+import Modal from "../../components/Modal.vue"
+import md5 from "md5";
+
+export default{
+
+  components: { Modal },
+
+  emits: [ 'add' ],
+
+	inject: [ 'socketEmit2' ],
+
+  props: {
+  },
+
+	data(){
+		return {
+      callback: null,
+      instance: null,
+
+      components: [
+        { type:"Bar", text:"Bar Chart" },
+        { type:"Doughnut", text:"Doughnut" },
+        { type:"Line", text:"Line Chart" },
+        { type:"Metric", text:"Metric" },
+        { type:"Row", text:"Row", items:[], isContainer:true },
+        { type:"VirtualTable", text:"Table" },
+      ]
+		}
+	},
+
+	methods: {
+
+    add(component){
+      const newComponent = JSON.parse(JSON.stringify(component))
+      newComponent.uid = md5(newComponent.type + Date.now())
+      if(typeof this.callback === 'function')
+        this.callback(newComponent)
+      this.$emit('add', newComponent)
+      this.close()
+    },
+
+		open(callback){
+      this.callback = callback
+      this.$refs.modal.open()
+		},
+
+		close(){
+      this.$refs.modal.close()
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.button{
+  @apply text-left p-3 border-[1px] border-transparent rounded-lg;
+  @apply hover:border-primary-300 hover:bg-primary-100;
+}
+
+</style>

package/src/widgets/Dashboard/VirtualTableSetting.vue

@@ -0,0 +1,43 @@
+<template>
+	<div :class="$style.comp">
+
+    <div class="flex flex-row items-center p-3">
+      <label class="flex-1">Datasource</label>
+      <div>
+        <Dropdown class="min-w-[150px]"
+                  v-model="value.datasourceUid"
+                  @change="delete value.columns">
+          <option v-for="datasource in preset.datasource"
+                  :value="datasource.uid">
+            {{ datasource.name }}
+          </option>
+        </Dropdown>
+      </div>
+    </div>
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+  props: {
+
+    preset: Object,
+
+    value: Object
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/Dashboard.vue

@@ -0,0 +1,502 @@
+<template>
+	<div v-if="cConfig" :class="$style.comp">
+
+    <div class="relative flex flex-col border-r-[1px] border-text-50 panel-400 overflow-hidden"
+         :style="sidebarStyle">
+
+      <TransitionGroup name="openltr" tag="div" class="flex-1 flex flex-col">
+
+        <div v-if="selectedView" class="flex-1 flex flex-col p-3">
+          <div class="p-3 flex flex-row gap-2">
+            <button type="button" @click="delete cConfig.selectedView">
+              <svg width="16" height="16" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z"/></svg>
+            </button>
+            <h5>{{ selectedView.type }}</h5>
+          </div>
+
+          <div class="flex-1">
+
+            <component :is="`${selectedView.type}Setting`"
+                       :preset="selectedPreset"
+                       :value="selectedView" />
+
+          </div>
+        </div>
+
+        <div v-else-if="selectedDatasource" class="flex-1 flex flex-col gap-3 p-3">
+          <div class="p-3 flex flex-row gap-2">
+            <button type="button" @click="delete cConfig.selectedDatasource">
+              <svg width="16" height="16" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z"/></svg>
+            </button>
+            <h5 @click="log(selectedDatasource)">{{ selectedDatasource.name }}</h5>
+          </div>
+
+          <div class="flex justify-center">
+            <Tabs :items="datasourceTabs" v-model="datasourceTabIndex" />
+          </div>
+
+          <div>
+
+            <div v-if="datasourceTabIndex === 1">
+              <ListItem :items="selectedDatasource.columns"
+                        @reorder="(from, to) => { selectedDatasource.columns.splice(to, 0, selectedDatasource.columns.splice(from, 1)[0]) }"
+                        class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
+                        container-class="divide-y divide-text-50">
+                <template v-slot="{ item }">
+                  <div class="flex flex-row gap-2 items-center px-2 bg-base-500">
+                    <div data-reorder>
+                      <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+                    </div>
+                    <Textbox class="flex-1 border-none" :class="$style.columnTextbox" v-model="item.label2" :placeholder="item.label"
+                             item-class="p-1" />
+                    <button type="button" @click="selectedDatasource.columns.splice(index, 1);">
+                      <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+                    </button>
+                  </div>
+                </template>
+              </ListItem>
+            </div>
+
+            <div v-else-if="datasourceTabIndex === 2">
+
+            </div>
+
+          </div>
+        </div>
+
+        <div v-else-if="selectedPreset" class="flex-1 flex flex-col p-3">
+          <div class="p-3 flex flex-row gap-2">
+            <button type="button" @click="$router.replace({ hash:'' })">
+              <svg width="16" height="16" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z"/></svg>
+            </button>
+            <Textbox v-model="selectedPreset.name"
+                     item-class="p-0 text-lg"
+                     @click="log(selectedPreset)"
+                     class="border-none bg-transparent"/>
+          </div>
+
+          <div class="flex-1">
+            <div class="p-3">
+              <div class="flex flex-row gap-2">
+                <label class="flex-1">Datasource</label>
+                <button type="button"
+                        class="text-primary"
+                        @click="$refs.chooseDatasource.open()">
+                  Add Datasource
+                </button>
+              </div>
+              <div class="flex flex-col mt-2">
+                <ListItem :items="selectedPreset.datasource">
+                  <template v-slot="{ item, index }">
+                    <div class="flex flex-row items-center gap-3 p-3">
+                      <div class="flex-1" @click="cConfig.selectedDatasource = item.uid">
+                        {{ item.name }}
+                      </div>
+                      <button type="button" @click="selectedPreset.datasource.splice(index, 1)">
+                        <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+                      </button>
+                    </div>
+                  </template>
+                </ListItem>
+              </div>
+            </div>
+
+            <div class="p-3">
+              <div class="flex flex-row gap-2">
+                <label class="flex-1">Views</label>
+                <button type="button" class="text-primary"
+                        @click="$refs.chooseView.open(_ => selectedPreset.views.push(_))">
+                  Add View
+                </button>
+              </div>
+              <div class="flex flex-col">
+                <TreeView :items="selectedPreset.views"
+                          :config="componentsConfig"
+                          v-model="selectedViewUid"
+                          class="mt-2">
+                  <template #item="{ item, parent }">
+                    <div class="flex-1 p-3 overflow-hidden text-ellipsis cursor-pointer flex flex-row gap-2">
+                      <div class="flex-1">
+                        <strong @click="cConfig.selectedView = item.uid" class="hover:text-primary">{{ item.text }}</strong>
+                      </div>
+                      <button type="button"
+                              v-if="Array.isArray(item.items)"
+                              @click="$refs.chooseView.open(_ => item.items.push(_))">
+                        <svg width="14" height="14" class="fill-text-300 hover:fill-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></svg>
+                      </button>
+                      <button type="button" @click="parent.splice(parent.indexOf(item), 1)">
+                        <svg width="14" height="14" class="fill-text-300 hover:fill-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
+                      </button>
+                    </div>
+                  </template>
+                </TreeView>
+
+              </div>
+            </div>
+          </div>
+
+        </div>
+
+        <div v-else class="flex-1 flex flex-col">
+          <div class="p-6 flex flex-row items-start gap-2">
+            <div class="flex-1">
+              <h5 @click="log(cConfig)">{{ title }}</h5>
+            </div>
+            <button type="button" @click="addPreset">
+              <svg width="19" height="19" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></svg>
+            </button>
+          </div>
+
+          <div v-if="(cConfig.presets ?? []).length > 0" class="flex-1 overflow-y-auto px-6">
+            <ListItem :items="cConfig.presets" container-class="divide-y divide-text-50">
+              <template v-slot="{ item, index }">
+                <div class="flex flex-row items-center gap-3 p-3">
+                  <Radio v-model="cConfig.viewedUid" :value="item.uid" />
+                  <div class="flex-1" @click="openPreset(item.uid)">
+                    {{ item.name }}
+                  </div>
+                  <button type="button" @click="confirm('Remove this preset?', () => cConfig.presets.splice(index, 1))">
+                    <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+                  </button>
+                </div>
+              </template>
+            </ListItem>
+          </div>
+          <div v-else class="flex-1 flex items-center justify-center">
+            <button type="button"
+                    class="cursor-pointer flex flex-col gap-1 items-center"
+                    @click="addPreset">
+              <svg width="21" height="21" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></svg>
+              Create new preset
+            </button>
+          </div>
+
+        </div>
+
+      </TransitionGroup>
+
+      <div :class="$style.resize1"
+           @mousedown="(e) => $util.dragResize(e, resize1)"></div>
+    </div>
+
+    <div v-if="viewedPreset" class="flex-1 px-8 py-5 overflow-y-auto flex flex-col gap-6">
+
+      <div class="flex flex-row gap-2 md:gap-2 items-center" ref="title">
+        <button type="button"
+                class="p-2 rounded-xl"
+                :class="sidebar.open ? 'bg-primary' : ''"
+                @click="sidebar.open = !sidebar.open">
+          <svg width="21" height="21" :class="sidebar.open ? 'fill-text' : 'fill-text hover:fill-primary'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M480 384H249.2C236.9 355.8 208.8 336 176 336S115.1 355.8 102.8 384H32c-17.67 0-32 14.33-32 32s14.33 32 32 32h70.75C115.1 476.2 143.2 496 176 496s60.89-19.77 73.25-48H480c17.67 0 32-14.33 32-32S497.7 384 480 384zM176 448c-17.64 0-32-14.36-32-32s14.36-32 32-32s32 14.36 32 32S193.6 448 176 448zM480 224h-70.75C396.9 195.8 368.8 176 336 176S275.1 195.8 262.8 224H32C14.33 224 0 238.3 0 256s14.33 32 32 32h230.8C275.1 316.2 303.2 336 336 336s60.89-19.77 73.25-48H480c17.67 0 32-14.33 32-32S497.7 224 480 224zM336 288c-17.64 0-32-14.36-32-32s14.36-32 32-32s32 14.36 32 32S353.6 288 336 288zM32 128h102.8C147.1 156.2 175.2 176 208 176s60.89-19.77 73.25-48H480c17.67 0 32-14.33 32-32s-14.33-32-32-32h-198.8C268.9 35.77 240.8 16 208 16S147.1 35.77 134.8 64H32C14.33 64 0 78.33 0 96S14.33 128 32 128zM208 64c17.64 0 32 14.36 32 32s-14.36 32-32 32s-32-14.36-32-32S190.4 64 208 64z"/></svg>
+        </button>
+        <div class="flex flex-col whitespace-nowrap text-ellipsis overflow-hidden">
+          <div class="cursor-pointer group px-2 md:px-0" @click="$refs.contextMenu.open($refs.title)">
+            <small class="text-text-400 text-xs">{{ title ?? 'Untitled' }}</small>
+            <div class="flex flex-row items-baseline gap-1">
+              <h5 class="whitespace-nowrap relative top-[-2px] text-ellipsis overflow-hidden group-hover:text-primary">
+                {{ viewedPreset.name ?? 'Preset Name' }}
+              </h5>
+              <svg width="13" height="13" class="fill-text group-hover:fill-primary relative top-[-1px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
+            </div>
+          </div>
+          <ContextMenu ref="contextMenu" class="panel-400">
+            <div class="flex flex-col min-w-[300px] divide-y divide-text-50">
+
+              <div class="p-3 flex flex-col gap-1 bg-base-300">
+                <button v-for="(preset, idx) in config.presets"
+                        class="p-2 px-5 text-left flex flex-row items-center rounded-md"
+                        :class="config.presetIdx === idx ? 'bg-primary-200 text-white' : 'hover:bg-primary-100'"
+                        type="button"
+                        @click="selectPreset(idx)">
+                  <label class="flex-1 pr-12">
+                    {{ preset.name }}
+                  </label>
+                  <div class="p-1">
+                    <div v-if="idx < 10"
+                         class="border-[1px] border-text-300 px-2 text-mono text-xs text-text-400 rounded-lg">
+                      Alt {{ idx + 1 }}
+                    </div>
+                  </div>
+                </button>
+              </div>
+
+              <div class="px-3">
+                <button type="button" class="text-primary p-5 text-left w-full" @click="openPreset">Edit</button>
+              </div>
+
+            </div>
+          </ContextMenu>
+        </div>
+      </div>
+
+      <div v-for="view in viewedPreset.views">
+
+        <div v-if="view.type === 'Row'" class="grid grid-cols-6 gap-5">
+          <div v-for="subView in view.items">
+
+            <Doughnut v-if="subView.type === 'Doughnut'"
+                      :items="data[subView.datasourceUid]?.items"
+                      :="subView" />
+
+          </div>
+        </div>
+
+        <VirtualTable v-if="view.type === 'VirtualTable'"
+                      :columns="viewColumns(view)"
+                      class="h-[50vh]"
+                      :items="data[view.datasourceUid]?.items" />
+
+      </div>
+
+    </div>
+
+    <DatasourceSelector ref="chooseDatasource"
+                        :src="datasourceSrc"
+                        @add="addDatasource" />
+
+    <ViewSelector ref="chooseView" />
+
+	</div>
+</template>
+
+<script>
+
+import DatasourceSelector from "./Dashboard/DatasourceSelector.vue";
+import ViewSelector from "./Dashboard/ViewSelector.vue";
+import md5 from "md5";
+import TreeView from "./WebPageBuilder4/TreeView.vue";
+import Doughnut from "./Dashboard/Doughnut.vue";
+import DoughnutSetting from "./Dashboard/DoughnutSetting.vue";
+import VirtualTableSetting from "./Dashboard/VirtualTableSetting.vue";
+
+const findComponents = (items, uid) => {
+  if(!Array.isArray(items)) return
+
+  for(let item of items){
+    if(item.uid === uid)
+      return item
+
+    if(item.items){
+      const component = findComponents(item.items, uid)
+      if(component)
+        return component
+    }
+  }
+}
+
+export default{
+  components: {
+    Doughnut,
+    DoughnutSetting,
+    TreeView,
+    ViewSelector,
+    DatasourceSelector,
+    VirtualTableSetting,
+  },
+
+  computed: {
+
+    cConfig(){
+      return this.config ?? this._config
+    },
+
+    componentsConfig(){
+      if(!this.cConfig.components)
+        this.cConfig.components = {}
+      return this.cConfig.components
+    },
+
+    selectedDatasource(){
+      const datasource = this.selectedPreset?.datasource[this.selectedPreset.datasource.findIndex(_ => _.uid === this.cConfig.selectedDatasource)]
+
+      if(datasource){
+
+
+
+      }
+
+      return datasource
+    },
+
+    selectedPreset(){
+      const preset = this.cConfig.presets[this.cConfig.presets.findIndex(_ => _.uid === this.cConfig.selectedUid)]
+
+      if(preset){
+        if(!Array.isArray(preset.datasource))
+          preset.datasource = []
+
+        if(!Array.isArray(preset.views))
+          preset.views = []
+      }
+
+      return preset
+    },
+
+    selectedView(){
+      return findComponents(this.selectedPreset?.views, this.cConfig.selectedView)
+    },
+
+    sidebar(){
+      if(!this.cConfig.sidebar || !('open' in this.cConfig.sidebar))
+        this.cConfig.sidebar = {
+          open: true,
+          width: 360
+        }
+
+      return this.cConfig.sidebar
+    },
+
+    sidebarStyle(){
+      return {
+        width: !this.sidebar.open ? 0 : this.sidebar.width + 'px'
+      }
+    },
+
+    viewedPreset(){
+      return this.cConfig?.presets[this.cConfig.presets.findIndex(_ => _.uid === this.cConfig.viewedUid)]
+    },
+
+  },
+
+  data(){
+    return {
+      data: {},
+
+      datasourceTabs: [
+        { text:"Columns", value:1 },
+        { text:"Filters", value:2 },
+        { text:"Sorts", value:3 },
+      ],
+
+      datasourceTabIndex: 1,
+
+      selectedViewUid: null
+    }
+  },
+
+  inject: [ 'alert', 'confirm', 'socket' ],
+
+  methods: {
+
+    addDatasource(datasource){
+      this.selectedPreset.datasource.push(datasource)
+    },
+
+    addPreset(){
+      if(!Array.isArray(this.cConfig.presets))
+        this.cConfig.presets = []
+
+      const newPreset = {
+        name: 'New Preset',
+        uid: md5('Preset' + Date.now()),
+      }
+      this.cConfig.presets.push(newPreset)
+      this.openPreset(newPreset.uid)
+    },
+
+    viewColumns(view){
+
+      if(!view.columns){
+        view.columns = Object.keys(((this.data[view.datasourceUid] ?? {}).items ?? [])[0] ?? [])
+            .map(key => {
+              return {
+                key,
+                label: key
+              }
+            })
+      }
+
+      return view.columns
+    },
+
+    async load(){
+      for(let datasource of this.viewedPreset?.datasource ?? []){
+        this.socket.send(datasource.src)
+            .then(res => {
+              this.data[datasource.uid] = res
+            })
+      }
+    },
+
+    openPreset(uid){
+      this.$router.push({ hash:`#dashboard-${uid}` })
+    },
+
+    resize1(w){
+      if(this.sidebar.width + w >= 270 && this.sidebar.width + w <= 600){
+        this.sidebar.width += w
+      }
+    },
+
+  },
+
+  props:{
+
+    config: Object,
+
+    datasourceSrc: String,
+
+    title: String,
+
+  },
+
+  provide(){
+    return {
+      listStyle: () => {}
+    }
+  },
+
+  watch: {
+
+    'cConfig.presets'(){
+      if(this.$route.hash.startsWith('#dashboard')){
+        this.cConfig.selectedUid = this.$route.hash.replace('#dashboard-', '')
+      }
+      else {
+        this.cConfig.selectedUid = false
+      }
+    },
+
+    '$route.hash': {
+      immediate: true,
+      handler(to){
+        if(this.cConfig){
+          if(to.startsWith('#dashboard')){
+            this.cConfig.selectedUid = to.replace('#dashboard-', '')
+          }
+          else {
+            this.cConfig.selectedUid = false
+          }
+        }
+      }
+    },
+
+    viewedPreset: {
+      immediate: true,
+      handler(){
+        this.load()
+      }
+    }
+
+  }
+
+}
+
+</script>
+
+<style>
+
+
+
+</style>
+
+<style module>
+
+.comp{
+  @apply flex flex-row;
+}
+
+.resize1{
+  @apply w-[3px] cursor-ew-resize absolute top-0 right-0 bottom-0;
+}
+
+</style>

package/src/widgets/WebPageBuilder4/TreeViewItem.vue

@@ -57,7 +57,10 @@ export default{
       }
     },
     parent: Array,
-    config: Object,
+    config: {
+      type: Object,
+      default: () => ({})
+    },
     value: String,
   },