@mixd-id/web-scaffold 0.1.230406344 → 0.1.230406346

package/package.json

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

package/src/components/Modal.vue

@@ -112,9 +112,10 @@ export default{
       this.context = context
 
       if(this.hash){
+        const hash = context.hash ?? this.hash
         this.$router.push({
           ...this.$route,
-          hash: this.$route.hash.replace(this.hash, '') + this.hash
+          hash: this.$route.hash.replace(hash, '') + hash
         })
       }
       else{

package/src/components/VirtualTable.vue

@@ -6,7 +6,7 @@
 				<thead>
 				<tr>
 					<th v-for="column in visibleColumns" :style="thStyle(column)" :class="thClass(column)"
-              v-tooltip="`${column.label ? column.label : column.key}`">
+              v-tooltip="column.tooltip">
 						<slot v-if="$slots['col-' + column.key]" :name="'col-' + column.key" :column="column"></slot>
 						<div v-else :class="headerColumnClass(column)">
 							<span>{{ column.label2 ? column.label2 : (column.label ?? column.key) }}</span>

package/src/index.js

@@ -334,6 +334,9 @@ export default{
     const tooltips = {}
 
     app.directive('tooltip', (el, binding) => {
+      if(!binding.value) return
+
+      console.log(binding)
 
       if(!el.getAttribute('data-tooltip')) {
 

package/src/utils/dashboard.js

@@ -1,7 +1,38 @@
 const {presetToSequelizeList} = require("./preset-selector");
 
 const backgroundColors = [
-  '#5D9CEC',
+  "#FF5733", // Bright Red
+  "#33FF57", // Bright Green
+  "#3357FF", // Bright Blue
+  "#FFC300", // Bright Yellow
+  "#28B463", // Emerald Green
+  "#2874A6", // Deep Blue
+  "#F39C12", // Orange
+  "#8E44AD", // Purple
+  "#1ABC9C", // Aqua
+  "#3498DB", // Sky Blue
+  "#2ECC71", // Green
+  "#F1C40F", // Yellow
+  "#34495E", // Dark Slate
+  "#7D3C98", // Amethyst
+  "#16A085", // Teal
+  "#E67E22", // Carrot Orange
+  "#2C3E50", // Dark Blue
+  "#D35400", // Pumpkin Orange
+  "#7FB3D5", // Light Blue
+  "#B03A2E", // Rust
+  "#1F618D", // Steel Blue
+  "#A93226", // Dark Red
+  "#48C9B0", // Light Teal
+  "#E74C3C", // Red
+  "#AF7AC5", // Lavender
+  "#45B39D", // Seafoam
+  "#5D6D7E", // Gray Blue
+  "#52BE80", // Light Green
+  "#F5B041", // Saffron
+  "#BDC3C7"  // Light Gray
+
+  /*'#5D9CEC',
   '#A0D468',
   '#FFCE54',
   '#FC6E51',
@@ -10,7 +41,7 @@ const backgroundColors = [
   '#4FC1E9',
   '#FFCE54',
   '#ED5565',
-  '#EC87C0'
+  '#EC87C0'*/
 ]
 
 const getModelFromDatasource = async (datasource, opt) => {

package/src/widgets/Dashboard/BarChart.vue

@@ -12,8 +12,8 @@
     <div v-if="yAxeMultiple" class="flex flex-row justify-center gap-1">
       <div v-for="(yLegend, idx) in yLegends"
            class="p-0.5 px-1 rounded-lg text-black cursor-default text-xs w-[50px] text-center text-ellipsis overflow-hidden whitespace-nowrap capitalize"
-           :style="{ backgroundColor:backgroundColors[idx % backgroundColors.length] }">
-        {{ (yLegend ?? '').toString().split(' ')[0].toLowerCase() }}
+           :style="{ backgroundColor:yLegend.color }">
+        {{ (yLegend.key ?? '').toString().split(' ')[0].toLowerCase() }}
       </div>
     </div>
 
@@ -24,6 +24,7 @@
 
 import {Bar} from 'vue-chartjs'
 import Chart from 'chart.js/auto'
+import { color } from 'chart.js/helpers'
 import {useDatasource} from "../../stores/datasource";
 
 export default{
@@ -42,7 +43,22 @@ export default{
     },
 
     chartData(){
-      return this.value ?? { labels:[], datasets:[] }
+      if(!this.value?.datasets)
+        return { labels:[], datasets:[] }
+
+      return {
+        labels: this.value?.labels ?? [],
+        datasets: this.value.datasets.map(_ => {
+          return {
+            ..._,
+            borderWidth: 1,
+            borderColor: function(context, options) {
+              const hex = options.color;
+              return color(hex).darken(0.5).rgbString()
+            }
+          }
+        })
+      }
     },
 
     chartOptions(){
@@ -53,6 +69,18 @@ export default{
         plugins: {
           legend: {
             display: false // This hides the legend
+          },
+          tooltip: {
+            callbacks: {
+              title: function(tooltipItems) {
+                return `${tooltipItems[0].label}`;
+              },
+              label: (tooltipItem) => {
+                if(this.usePercentage)
+                  return `${tooltipItem.dataset.label}: ${tooltipItem.dataset.data0[tooltipItem.dataIndex]} (${tooltipItem.raw}%)`
+                return `${tooltipItem.dataset.label}: ${tooltipItem.raw}`;
+              }
+            },
           }
         },
         scales: {

package/src/widgets/Dashboard/BarChartSetting.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="flex flex-col gap-5 p-6">
 
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Active</label>
+      <Switch v-model="value.props.enabled" :readonly="readonly" />
+    </div>
+
     <div class="flex flex-col gap-1">
       <div class="flex flex-row gap-2">
         <label class="flex-1">Datasource</label>

package/src/widgets/Dashboard/DatasourceSelector.vue

@@ -15,17 +15,11 @@
 	    </div>
 	  </template>
 	  <template v-slot:foot>
-	    <div v-if="analyseSrc && saveSrc"
-           class="p-6 flex justify-center">
-        <button type="button" class="text-primary"
-                @click="$refs.creator.open()">
-          Create Datasource...
-        </button>
-
-        <DatasourceCreator ref="creator"
-                           :analyse-src="analyseSrc"
-                           :save-src="saveSrc"
-                           @save="load" />
+	    <div class="p-6 flex justify-center">
+        <router-link :to="listSrc" target="_blank" class="text-primary flex flex-row items-center">
+          Datasource Manager
+          <svg class="inline ml-2 fill-primary" width="11" height="11" 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="M392 320c-13.25 0-24 10.75-24 24v112c0 4.406-3.594 8-8 8h-304c-4.406 0-8-3.594-8-8v-304c0-4.406 3.594-8 8-8h112C181.3 144 192 133.3 192 120S181.3 96 168 96h-112C25.13 96 0 121.1 0 152v304C0 486.9 25.13 512 56 512h304c30.88 0 56-25.12 56-56v-112C416 330.8 405.3 320 392 320zM488 0H320c-13.25 0-24 10.75-24 24S306.8 48 320 48h110.1L183 295c-9.375 9.375-9.375 24.56 0 33.94C187.7 333.7 193.8 336 200 336s12.28-2.344 16.97-7.031L464 81.94V192c0 13.25 10.75 24 24 24S512 205.3 512 192V24C512 10.75 501.3 0 488 0z"/></svg>
+        </router-link>
 	    </div>
 	  </template>
 	  <div class="flex-1 p-6 flex">
@@ -36,24 +30,7 @@
                 :class="dashboardStyle.button"
                 class="flex flex-row items-start gap-2">
           <button type="button" class="flex-1 text-left" @click="add(datasource)">{{ datasource.name }}</button>
-          <button v-if="contextMenuItems.length > 0" type="button" class="py-1" :ref="`btn${idx}`" @click="$refs.contextMenu.open($refs[`btn${idx}`][0], { datasource })">
-            <svg width="14" height="14" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M128 64c0-35.39-28.62-64-64-64S0 28.61 0 64s28.62 64 64 64S128 99.39 128 64zM128 256c0-35.39-28.62-64-64-64S0 220.6 0 256s28.62 64 64 64S128 291.4 128 256zM128 448c0-35.39-28.62-64-64-64s-64 28.61-64 64s28.62 64 64 64S128 483.4 128 448z"/></svg>
-          </button>
         </div>
-
-        <ContextMenu ref="contextMenu" position="bottom-right">
-          <template #default="{ context }">
-            <div class="flex flex-col min-w-[200px]">
-              <div v-for="item in contextMenuItems">
-                <button v-if="item.type === 'remove'" class="w-full p-3 text-left flex flex-row" :class="appStyle.menuItem"
-                        @click="remove(context.datasource)">
-                  {{ $t('Remove') }}
-                </button>
-              </div>
-
-            </div>
-          </template>
-        </ContextMenu>
       </div>
 
       <div v-else class="flex-1 flex items-center justify-center">
@@ -69,12 +46,10 @@
 <script>
 
 import Modal from "../../components/Modal.vue"
-import md5 from "md5";
-import DatasourceCreator from "./DatasourceCreator.vue";
 
 export default{
 
-  components: {DatasourceCreator, Modal },
+  components: { Modal },
 
   emits: [ 'add' ],
 
@@ -82,11 +57,7 @@ export default{
 
   props: {
 
-    analyseSrc: String,
-
-    saveSrc: String,
-
-    removeSrc: String,
+    listSrc: String,
 
     src: String,
 
@@ -94,13 +65,6 @@ export default{
 
   computed: {
 
-    contextMenuItems(){
-      return [
-        this.removeSrc ? { type:'remove' } : null
-      ]
-        .filter(_=>_)
-    }
-
   },
 
 	data(){

package/src/widgets/Dashboard/Doughnut.vue

@@ -16,6 +16,7 @@
 
 import { Doughnut } from 'vue-chartjs'
 import Chart from 'chart.js/auto'
+import {color} from "chart.js/helpers";
 
 export default{
 
@@ -26,9 +27,22 @@ export default{
   computed: {
 
     chartData(){
-      return this.value?.datasets ?
-          this.value :
-          { labels:[], datasets:[] }
+      if(!this.value?.datasets)
+        return { labels:[], datasets:[] }
+
+      return {
+        labels: this.value?.labels ?? [],
+        datasets: this.value.datasets.map(_ => {
+          return {
+            ..._,
+            borderWidth: 1,
+            borderColor: function(context, options) {
+              const hex = options.color;
+              return color(hex).darken(0.5).rgbString()
+            }
+          }
+        })
+      }
     },
 
     chartOptions(){

package/src/widgets/Dashboard/DoughnutSetting.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="flex flex-col gap-5 p-6">
 
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Active</label>
+      <Switch v-model="value.props.enabled" :readonly="readonly" />
+    </div>
+
     <div>
       <label class="text-text-400">Datasource</label>
       <Dropdown class="min-w-[150px]"

package/src/widgets/Dashboard/Metric.vue

@@ -7,7 +7,7 @@
       </h1>
       <div class="flex flex-col" v-if="column2Enabled">
         <div class="text-sm text-ellipsis whitespace-nowrap overflow-hidden" :class="value?.comparedPercent <= 50 ? 'text-red-600' : 'text-green-600'">{{ value?.comparedPercent }}%</div>
-        <div class="text-sm text-ellipsis whitespace-nowrap overflow-hidden">{{ value?.comparedValue.toLocaleString() }}</div>
+        <div class="text-sm text-ellipsis whitespace-nowrap overflow-hidden">{{ ccValue }}</div>
       </div>
     </div>
 	</div>
@@ -24,7 +24,15 @@ export default{
     cValue(){
       let value = parseFloat(this.value?.value)
       if(isNaN(value)) return 'N/A'
-      return value
+      return value.toLocaleString()
+    },
+
+    ccValue(){
+      if(!this.column2Enabled) return
+
+      let value = parseFloat(this.value?.comparedValue)
+      if(isNaN(value)) return 'N/A'
+      return value.toLocaleString()
     }
 
   },

package/src/widgets/Dashboard/MetricSetting.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="flex flex-col gap-5 p-6">
 
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Active</label>
+      <Switch v-model="value.props.enabled" :readonly="readonly" />
+    </div>
+
     <div class="flex flex-col gap-1">
       <div class="flex flex-row gap-2">
         <label class="flex-1">Datasource</label>

package/src/widgets/Dashboard/Pie.vue

@@ -16,6 +16,7 @@
 
 import { Pie } from 'vue-chartjs'
 import Chart from 'chart.js/auto'
+import { color } from 'chart.js/helpers'
 
 export default{
 
@@ -26,9 +27,22 @@ export default{
   computed: {
 
     chartData(){
-      return this.value?.datasets ?
-          this.value :
-          { labels:[], datasets:[] }
+      if(!this.value?.datasets)
+        return { labels:[], datasets:[] }
+
+      return {
+        labels: this.value?.labels ?? [],
+        datasets: this.value.datasets.map(_ => {
+          return {
+            ..._,
+            borderWidth: 1,
+            borderColor: function(context, options) {
+              const hex = options.color;
+              return color(hex).darken(0.5).rgbString()
+            }
+          }
+        })
+      }
     },
 
     chartOptions(){
@@ -49,18 +63,6 @@ export default{
 
   data(){
     return {
-      backgroundColors: [
-        '#5D9CEC',
-        '#A0D468',
-        '#FFCE54',
-        '#FC6E51',
-        '#48CFAD',
-        '#AC92EC',
-        '#4FC1E9',
-        '#FFCE54',
-        '#ED5565',
-        '#EC87C0'
-      ],
     }
   },
 

package/src/widgets/Dashboard/PieSetting.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="flex flex-col gap-6 p-6">
 
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Active</label>
+      <Switch v-model="value.props.enabled" :readonly="readonly" />
+    </div>
+
     <div>
       <label class="text-text-400">Datasource</label>
       <Dropdown class="min-w-[150px]"

package/src/widgets/Dashboard/VirtualTableSetting.vue

@@ -1,6 +1,11 @@
 <template>
   <div :class="$style.comp">
 
+    <div class="flex flex-row items-center px-5">
+      <label class="flex-1">Active</label>
+      <Switch v-model="value.props.enabled" :readonly="readonly" />
+    </div>
+
     <div class="flex justify-center border-b-[1px] border-text-50" v-if="tabItems.length > 1">
       <Tabs :items="tabItems" v-model="value.tabIndex" />
     </div>

package/src/widgets/Dashboard.vue

@@ -430,7 +430,8 @@
                         <svg v-else-if="item.type === 'Pie'" class="fill-text-200" width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M559.7 288l-237.2-.0006l157.1 158c6.124 6.124 15.99 6.484 22.24 .7343c38.62-36.5 65.25-85.62 73.12-140.9C577.2 296.4 569.4 288 559.7 288zM543.1 223.2c-8.249-119.5-103.7-214.1-223.2-223.2c-9.124-.6249-16.76 7.113-16.76 16.24L304 240l223.7-.0012C536.9 240 544.6 232.4 543.1 223.2zM256 288V50.75c0-9.624-8.369-17.48-17.87-16.11C119 51.52 27.89 155.6 32.14 280.4c4.375 128.1 114.8 233.2 242.9 231.6c50.37-.6249 97-16.88 135.2-44c7.999-5.624 8.487-17.24 1.612-24.11L256 288z"/></svg>
                         <svg v-else-if="item.type === 'PolarArea'" class="fill-text-200" width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M119.1 272C107.1 252.1 87.55 240 64 240c-35.25 0-64 28.75-64 64s28.75 64 64 64c23.55 0 43.96-12.97 55.08-32h60.15C177.1 325.7 176 314.1 176 304s1.127-21.66 3.229-32H119.1zM576 192c35.25 0 64-28.75 64-64s-28.75-64-64-64s-64 28.75-64 64S540.8 192 576 192zM576 384c-11.19 0-21.66 3.094-30.78 8.213l-86.1-52.2C461.6 328.5 464 316.6 464 304c0-16.77-3.436-32.68-9.301-47.36l67.3-49.36c-17.94-12.26-31.13-30.59-37.53-51.86l-67.96 49.84C394.5 187.3 366.7 176 336 176c-7.988 0-15.74 .9492-23.32 2.352L276.3 100.3C283.5 89.98 288 77.54 288 64c0-35.25-28.75-64-64-64S160 28.75 160 64c0 33.29 25.73 60.47 58.28 63.42l36.57 78.36C226.5 229.3 208 264.3 208 304c0 70.67 57.33 128 128 128c34.97 0 66.61-14.11 89.71-36.85l86.39 51.83C512.1 447.3 512 447.7 512 448c0 35.25 28.75 64 64 64S640 483.3 640 448S611.3 384 576 384zM336 352C309.5 352 288 330.5 288 304S309.5 256 336 256S384 277.5 384 304S362.5 352 336 352z"/></svg>
                       </div>
-                      <div class="flex-1 text-ellipsis overflow-hidden whitespace-nowrap">
+                      <div class="flex-1 text-ellipsis overflow-hidden whitespace-nowrap"
+                           :class="!item.props?.enabled ? 'line-through opacity-50' : ''">
                         <strong @click="cConfig.selectedView = item.uid" class="hover:text-primary">
                           {{ item.props?.label ?? (item.name ?? item.type) }}
                         </strong>
@@ -712,9 +713,7 @@
 
     <DatasourceSelector ref="chooseDatasource"
                         :src="datasourceSrc"
-                        :analyseSrc="analyseDatasourceSrc"
-                        :saveSrc="saveDatasourceSrc"
-                        :removeSrc="removeDatasourceSrc"
+                        :list-src="datasourceListSrc"
                         @add="addDatasource" />
 
     <ViewSelector ref="chooseView" />
@@ -722,7 +721,6 @@
     <DatasourcePreview ref="datasourcePreview" :src="previewSrc" />
 
   </div>
-  <div v-else>{{ $t('Loading...') }}</div>
 </template>
 
 <script>
@@ -944,7 +942,7 @@ export default{
 
       previewData: null,
 
-      readyState: 0,
+      readyState: 1,
 
       selectedViewUid: null,
 
@@ -1213,12 +1211,15 @@ export default{
       if(!this.viewedComponents) return
 
       const views = this.recurseViews(this.viewedComponents, uids)
+      if(views?.length < 1) return
 
+      if(!uids) this.readyState = 0
       this.socket.send(this.src, { views })
           .then(_ => {
             Object.assign(this.values, _)
-            this.readyState = 1
           })
+          .catch(err => this.alert(err))
+          .finally(_ => this.readyState = 1)
     },
 
     async loadNext(component){
@@ -1307,15 +1308,10 @@ export default{
 
     config: Object,
 
-    analyseDatasourceSrc: String,
-
     src: String,
 
-    removeDatasourceSrc: String,
-
-    saveDatasourceSrc: String,
-
     datasourceSrc: String,
+    datasourceListSrc: String,
 
     previewSrc: String,
 

package/src/widgets/WebPageBuilder4/GridSetting.vue

@@ -1,110 +1,123 @@
 <template>
 	<div :class="$style.comp">
-		<strong>Grid Setting</strong>
 
     <div class="flex flex-row items-center">
-      <label class="flex-1">Enabled</label>
+      <label class="flex-1">Active</label>
       <Switch v-model="value.props.enabled" :readonly="readonly" />
     </div>
 
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Columns</label>
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="columns[idx]"
-                class="w-[100px]"
-                :readonly="readonly">
-        <option value="">Default</option>
-        <option v-for="i in 12" :value="`${viewType}grid-cols-${i}`">{{ i }}</option>
-        <option :value="`${viewType}grid-cols-none`">None</option>
-      </Dropdown>
+    <div class="flex flex-col gap-1">
+      <label class="flex-1">Label</label>
+      <Textbox v-model="value.props.label"
+               maxlength="30"
+               placeholder="Label"
+               :readonly="readonly"
+               @keyup.enter="$emit('change')"
+               @blur="$emit('change')" />
     </div>
 
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Rows</label>
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="rows[idx]"
-                class="w-[100px]"
-                :readonly="readonly">
-        <option value="">Default</option>
-        <option v-for="i in 12" :value="`${viewType}grid-rows-${i}`">{{ i }}</option>
-        <option :value="`${viewType}grid-rows-none`">None</option>
-      </Dropdown>
+    <div class="grid grid-cols-3 gap-3">
+      <div>
+        <label class="flex-1">Columns</label>
+        <Dropdown v-for="(_, idx) in viewTypes"
+                  v-show="viewType === _.value"
+                  v-model="columns[idx]"
+                  :readonly="readonly">
+          <option value="">Default</option>
+          <option v-for="i in 12" :value="`${viewType}grid-cols-${i}`">{{ i }}</option>
+          <option :value="`${viewType}grid-cols-none`">None</option>
+        </Dropdown>
+      </div>
+
+      <div>
+        <label class="flex-1">Rows</label>
+        <Dropdown v-for="(_, idx) in viewTypes"
+                  v-show="viewType === _.value"
+                  v-model="rows[idx]"
+                  :readonly="readonly">
+          <option value="">Default</option>
+          <option v-for="i in 12" :value="`${viewType}grid-rows-${i}`">{{ i }}</option>
+          <option :value="`${viewType}grid-rows-none`">None</option>
+        </Dropdown>
+      </div>
+
+      <div>
+        <label class="flex-1">Gap</label>
+        <Dropdown v-for="(_, idx) in viewTypes"
+                  v-show="viewType === _.value"
+                  v-model="gap[idx]"
+                  :readonly="readonly">
+          <option value="">Not Set</option>
+          <option :value="`${viewType}gap-0`">0</option>
+          <option :value="`${viewType}gap-1`">1</option>
+          <option :value="`${viewType}gap-2`">2</option>
+          <option :value="`${viewType}gap-3`">3</option>
+          <option :value="`${viewType}gap-4`">4</option>
+          <option :value="`${viewType}gap-5`">5</option>
+          <option :value="`${viewType}gap-6`">6</option>
+          <option :value="`${viewType}gap-7`">7</option>
+          <option :value="`${viewType}gap-8`">8</option>
+        </Dropdown>
+      </div>
     </div>
 
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Gap</label>
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="gap[idx]"
-                :readonly="readonly">
-        <option value="">Not Set</option>
-        <option :value="`${viewType}gap-0`">0</option>
-        <option :value="`${viewType}gap-1`">1</option>
-        <option :value="`${viewType}gap-2`">2</option>
-        <option :value="`${viewType}gap-3`">3</option>
-        <option :value="`${viewType}gap-4`">4</option>
-        <option :value="`${viewType}gap-5`">5</option>
-        <option :value="`${viewType}gap-6`">6</option>
-        <option :value="`${viewType}gap-7`">7</option>
-        <option :value="`${viewType}gap-8`">8</option>
-      </Dropdown>
+    <div class="grid grid-cols-2 gap-3">
+      <div>
+        <label class="flex-1">Align Items</label>
+        <Dropdown v-for="(_, idx) in viewTypes"
+                  v-show="viewType === _.value"
+                  v-model="alignItems[idx]"
+                  :readonly="readonly">
+          <option value="">Default</option>
+          <option :value="`${viewType}items-start`">Start</option>
+          <option :value="`${viewType}items-end`">End</option>
+          <option :value="`${viewType}items-center`">Center</option>
+          <option :value="`${viewType}items-baseline`">Baseline</option>
+          <option :value="`${viewType}items-stretch`">Stretch</option>
+        </Dropdown>
+      </div>
+
+      <div>
+        <label class="flex-1">Justify Content</label>
+        <Dropdown v-for="(_, idx) in viewTypes"
+                  v-show="viewType === _.value"
+                  v-model="justifyContent[idx]"
+                  :readonly="readonly">
+          <option value="">Default</option>
+          <option :value="`${viewType}justify-normal`">Normal</option>
+          <option :value="`${viewType}justify-start`">Start</option>
+          <option :value="`${viewType}justify-end`">End</option>
+          <option :value="`${viewType}justify-center`">Center</option>
+          <option :value="`${viewType}justify-between`">Between</option>
+          <option :value="`${viewType}justify-around`">Around</option>
+          <option :value="`${viewType}justify-evenly`">Evenly</option>
+          <option :value="`${viewType}justify-stretch`">Stretch</option>
+        </Dropdown>
+      </div>
     </div>
 
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Align Items</label>
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="alignItems[idx]"
-                :readonly="readonly">
-        <option value="">Default</option>
-        <option :value="`${viewType}items-start`">Start</option>
-        <option :value="`${viewType}items-end`">End</option>
-        <option :value="`${viewType}items-center`">Center</option>
-        <option :value="`${viewType}items-baseline`">Baseline</option>
-        <option :value="`${viewType}items-stretch`">Stretch</option>
-      </Dropdown>
-    </div>
-
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Justify Content</label>
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="justifyContent[idx]"
-                :readonly="readonly">
-        <option value="">Default</option>
-        <option :value="`${viewType}justify-normal`">Normal</option>
-        <option :value="`${viewType}justify-start`">Start</option>
-        <option :value="`${viewType}justify-end`">End</option>
-        <option :value="`${viewType}justify-center`">Center</option>
-        <option :value="`${viewType}justify-between`">Between</option>
-        <option :value="`${viewType}justify-around`">Around</option>
-        <option :value="`${viewType}justify-evenly`">Evenly</option>
-        <option :value="`${viewType}justify-stretch`">Stretch</option>
-      </Dropdown>
-    </div>
-
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Col Span</label>
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="colSpan[idx]"
-                :readonly="readonly">
-        <option value="">Default</option>
-        <option v-for="i in 12" :value="`${viewType}col-span-${i}`">{{ i }}</option>
-      </Dropdown>
-    </div>
-
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Row Span</label>
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="rowSpan[idx]"
-                :readonly="readonly">
-        <option value="">Default</option>
-        <option v-for="i in 12" :value="`${viewType}row-span-${i}`">{{ i }}</option>
-      </Dropdown>
+    <div class="grid grid-cols-2 gap-3">
+      <div>
+        <label class="flex-1">Col Span</label>
+        <Dropdown v-for="(_, idx) in viewTypes"
+                  v-show="viewType === _.value"
+                  v-model="colSpan[idx]"
+                  :readonly="readonly">
+          <option value="">Default</option>
+          <option v-for="i in 12" :value="`${viewType}col-span-${i}`">{{ i }}</option>
+        </Dropdown>
+      </div>
+
+      <div>
+        <label class="flex-1">Row Span</label>
+        <Dropdown v-for="(_, idx) in viewTypes"
+                  v-show="viewType === _.value"
+                  v-model="rowSpan[idx]"
+                  :readonly="readonly">
+          <option value="">Default</option>
+          <option v-for="i in 12" :value="`${viewType}row-span-${i}`">{{ i }}</option>
+        </Dropdown>
+      </div>
     </div>
 
 	</div>
@@ -197,7 +210,7 @@ export default{
 <style module>
 
 .comp{
-  @apply flex flex-col gap-5 p-6;
+  @apply flex flex-col gap-6 p-6;
 }
 
 </style>

package/src/widgets/Dashboard/DatasourceCreator.vue

@@ -1,197 +0,0 @@
-<template>
-	<Modal ref="modal"
-         :width="width"
-         :height="height">
-	  <template v-slot:head>
-	    <div class="relative p-6 flex flex-col gap-5">
-        <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>
-
-	      <h3>Create New Datasource</h3>
-
-        <div>
-          <Textbox placeholder="Name" v-model="instance.name" />
-        </div>
-
-	    </div>
-	  </template>
-	  <template v-slot:foot>
-	    <div class="p-6">
-        <Button ref="saveBtn"
-                class="w-[80px]"
-                :state="canSave ? 1 : -1"
-                @click="save">
-          Save
-        </Button>
-	    </div>
-	  </template>
-	  <div class="flex-1 px-6 flex">
-
-      <div v-if="readyState === 2" class="flex-1 flex items-center justify-center flex-col">
-        <svg class="animate-spin aspect-square" width="36" height="36" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
-      </div>
-
-      <VirtualTable v-else-if="instance?.columns"
-                    class="flex-1"
-                    :columns="instance.columns"
-                    :items="instance.items" />
-
-      <div v-else class="flex-1 flex items-center justify-center flex-col">
-        <button type="button" class="text-primary" @click="$refs.file.click()">
-          Import from File...
-        </button>
-      </div>
-
-      <input ref="file" type="file" class="hidden" accept=".csv,.xls,.xlsx" @change="analyse"/>
-
-      <Modal ref="selectSheets" width="300" height="360">
-        <template v-slot:head>
-          <div class="relative p-5">
-            <h3>Select Worksheet</h3>
-            <div class="absolute top-0 right-0 p-2">
-              <button type="button" class="p-2" @click="$refs.modal.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>
-        <div class="flex-1 p-5">
-
-          <div class="flex flex-col">
-            <div v-for="sheet in multipleSheets"
-                 :class="dashboardStyle.button" @click="analyse({ sheetName:sheet })">
-              {{ sheet }}
-            </div>
-          </div>
-
-        </div>
-      </Modal>
-
-	  </div>
-	</Modal>
-</template>
-
-<script>
-
-export default{
-
-  emits: [ 'save' ],
-
-	inject: [ 'alert', 'dashboardStyle', 'socket', 'toast' ],
-
-  props: {
-
-    analyseSrc: String,
-
-    saveSrc: String
-
-  },
-
-  computed: {
-
-    canSave(){
-      return this.instance &&
-          this.instance.name &&
-          this.instance.columns &&
-          this.instance.items
-    },
-
-    height(){
-      if(Array.isArray(this.instance?.items))
-        return 600
-      return 480
-    },
-
-    width(){
-      if(Array.isArray(this.instance?.items))
-        return 800
-      return 420
-    },
-
-  },
-
-	data(){
-		return {
-      instance: null,
-      readyState: 1,
-      multipleSheets: null
-		}
-	},
-
-	methods: {
-
-    analyse(opt = { sheetName:undefined }){
-      this.instance.name = this.$refs.file.files[0].name
-
-      this.readyState = 2
-      this.$refs.selectSheets?.close()
-      this.socket.send(this.analyseSrc, {
-        file:this.$refs.file.files[0],
-        name:this.$refs.file.files[0].name,
-        mimeType:this.$refs.file.files[0].type,
-        sheetName: opt.sheetName
-      })
-          .then(res => {
-            Object.assign(this.instance, res)
-          })
-          .catch(err => {
-
-            if(err.errors?.multipleSheets){
-              this.multipleSheets = err.errors.multipleSheets
-              this.$refs.selectSheets.open()
-            }
-            else{
-              this.alert(err)
-            }
-          })
-          .finally(_ => {
-            this.readyState = 1
-          })
-    },
-
-		open(){
-      this.instance = {}
-      this.$refs.modal.open()
-		},
-
-		close(){
-      this.$refs.modal.close()
-		},
-
-    save(){
-      this.$refs.saveBtn.setState(2)
-      this.socket.send(this.saveSrc, {
-          ...this.instance,
-          file:this.$refs.file.files[0],
-          name:this.$refs.file.files[0].name,
-          mimeType:this.$refs.file.files[0].type
-        })
-        .then(_ => {
-          this.toast('Datasource created')
-          this.close()
-          this.$emit('save')
-        })
-        .catch(err => this.alert(err))
-        .finally(_ => this.$refs.saveBtn?.resetState())
-    }
-
-	}
-
-}
-
-</script>
-
-<style module>
-
-.comp{
-
-}
-
-</style>