@mixd-id/web-scaffold 0.2.240706 → 0.2.250801010

package/src/widgets/ContactFormSetting.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.comp">
 
-    <div>
+    <div class="p-6 py-4">
       <div class="flex flex-col gap-8">
         <div class="flex flex-col gap-1">
           <label class="flex-1 text-text-400">Text</label>
@@ -19,11 +19,12 @@
               Add Field
             </button>
           </div>
-          <ListItem :items="item.props.fields" class="mt-2 border-text-200 border-[1px] rounded-lg overflow-hidden"
-                    bodyClass="flex flex-col gap-1 divide-y divide-text-200"
+          <ListItem :items="item.props.fields"
+                    class="mt-1 border-border-200 border-[1px] bg-base-300 rounded-lg overflow-hidden"
+                    container-class="divide-y divide-border-50"
                     @reorder="(from, to) => { item.props.fields.splice(to, 0, item.props.fields.splice(from, 1)[0]); $emit('change') }">
             <template v-slot="{ item:field, index }">
-              <div class="flex flex-row items-center gap-2 px-3 bg-base-500">
+              <div class="flex flex-row items-center gap-2 px-3">
                 <svg data-reorder 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>
                   <Checkbox v-model="field.required" @change="$emit('change')"/>
@@ -43,16 +44,17 @@
         <div>
           <div class="flex flex-row gap-4">
             <label class="flex-1 text-text-400">On Submit</label>
-            <button type="button" class="text-primary"
-                    @click="(e) => $refs.actionOpt.open(e.target)">
+            <button ref="actionBtn" type="button" class="text-primary"
+                    @click="(e) => $refs.actionOpt.open($refs.actionBtn)">
               Add Action
             </button>
           </div>
-          <ListItem :items="item.props.onSubmit" class="mt-2" bodyClass="flex flex-col gap-1"
-                    @reorder="(from, to) => { item.props.onSubmit.splice(to, 0, item.props.onSubmit.splice(from, 1)[0]); $emit('change') }">
+          <ListItem :items="onSubmit"
+                    class="mt-1 bg-base-300 border-[1px] border-border-200 rounded-lg"
+                    container-class="divide-y divide-border-50">
             <template v-slot="{ item:action, index }">
               <div v-if="action.type === 'send-whatsapp'">
-                <div v-if="action._edit" class="flex flex-row items-start gap-2 p-3 bg-base-500 rounded-lg">
+                <div v-if="action._edit" class="flex flex-row items-start gap-2 p-3">
                   <div class="flex-1 flex flex-col gap-2">
                     <label class="text-text-400 leading-1">Send whatsapp to</label>
                     <div class="flex flex-row gap-2">
@@ -78,7 +80,7 @@
               </div>
 
               <div v-else-if="action.type === 'send-whatsapp-referral'">
-                <div class="flex flex-row items-center gap-2 p-3 bg-base-500 rounded-lg">
+                <div class="flex flex-row items-center gap-2 p-3 bg-base-300">
                   <div class="flex-1 flex flex-row gap-2 items-center">
                     <svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>
                     <label>Send to Referral</label>
@@ -90,7 +92,7 @@
               </div>
 
               <div v-else-if="action.type === 'redirect'">
-                <div v-if="action._edit" class="flex flex-row items-start gap-2 p-3 bg-base-500 rounded-lg">
+                <div v-if="action._edit" class="flex flex-row items-start gap-2 p-3">
                   <div class="flex-1 flex flex-col gap-2">
                     <div>
                       <label class="text-text-400 leading-1">Redirect to</label>
@@ -155,7 +157,7 @@
           </div>
         </div>
 
-        <div class="flex flex-col gap-2">
+        <div class="flex flex-col gap-1">
           <label class="text-text-400">Completed</label>
           <Textbox v-model="item.props.completedTitle" />
           <Textarea v-model="item.props.completedDesc" rows="4" />
@@ -163,13 +165,14 @@
       </div>
     </div>
 
-		<ComponentSetting2 :item="item"
-											:view-type="viewType"
-											:view-types="viewTypes"
-											defaultDisplay="flex"
-											@change="$emit('change')" />
+    <ComponentSetting2 :item="item"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
+                       @change="$emit('change')" />
 
-		<ContextMenu ref="fieldOpt" position="bottom-right" class="border-text-200">
+		<ContextMenu ref="fieldOpt" position="bottom-right" class="border-border-200">
 			<div class="flex flex-col min-w-[120px] divide-y divide-text-100">
 				<button v-for="field in fields"
 								class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50 disabled:bg-base-500 disabled:text-text-300"
@@ -183,11 +186,11 @@
 		<ContextMenu ref="actionOpt" position="bottom-right">
 			<div class="flex flex-col gap-1 p-1 min-w-[120px]">
 				<button class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50"
-								@click="item.props.onSubmit.push({ type:'send-whatsapp', _edit:true })">Send Whatsapp</button>
+								@click="onSubmit.push({ type:'send-whatsapp', _edit:true })">Send Whatsapp</button>
 				<button class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50" v-if="item.props.fields.includes('referralCode')"
-								@click="item.props.onSubmit.push({ type:'send-whatsapp-referral' });$emit('change')">Send Whatsapp to Referral</button>
+								@click="onSubmit.push({ type:'send-whatsapp-referral' });$emit('change')">Send Whatsapp to Referral</button>
         <button class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50"
-                @click="item.props.onSubmit.push({ type:'redirect', delay:'0', _edit:true })">Redirect</button>
+                @click="onSubmit.push({ type:'redirect', delay:'0', _edit:true })">Redirect</button>
 			</div>
 		</ContextMenu>
 
@@ -212,7 +215,7 @@
 		  <template #default="{ context }">
 				<div class="flex-1 p-5">
 					<ListItem :items="context.items"
-										body-class="flex flex-col gap-2"
+										container-class="flex flex-col gap-2"
 					          @reorder="(from, to) => { context.items.splice(to, 0, context.items.splice(from, 1)[0]); }">
 					  <template v-slot="{ item, index }">
 					    <div class="flex flex-row items-center gap-2">
@@ -269,7 +272,7 @@
             <label class="text-text-400">Items</label>
             <ListItem :items="context.items"
                       @reorder="(from, to) => { context.items.splice(to, 0, context.items.splice(from, 1)[0]); }"
-                      body-class="flex flex-col divide-y divide-text-200 border-[1px] border-text-200 mt-1">
+                      body-class="flex flex-col divide-y divide-text-200 border-[1px] border-border-200 mt-1">
               <template v-slot="{ item, index }">
                 <div class="flex flex-row items-center gap-3 px-3">
                   <div data-reorder>
@@ -317,19 +320,27 @@ export default{
 
 	props: {
 
-		item: {
-			type: Object,
-			required: true
-		},
+    item: {
+      type: Object,
+      required: true
+    },
+
+    viewType: String,
 
-		viewType: String,
+    viewIndex: Number,
 
-		viewTypes: Array,
+    viewTypes: Array,
 
 	},
 
   computed: {
 
+    onSubmit(){
+      if(!Array.isArray(this.item.props.onSubmit))
+        this.item.props.onSubmit = []
+      return this.item.props.onSubmit
+    },
+
     hasTopic(){
       return this.item.props.fields.some(field => field.type === 'topic')
     },
@@ -378,7 +389,7 @@ export default{
 <style module>
 
 .comp{
-  @apply flex flex-col gap-8;
+  @apply flex flex-col divide-y divide-border-50;
 }
 
 </style>

package/src/widgets/Dashboard/BarChart.vue

@@ -26,12 +26,12 @@
         <div v-for="yLegend in showedYLegends"
              @click="toggleExcludes(yLegend)"
              class="p-0.5 px-1 rounded-full text-black cursor-default text-xs min-w-[50px] max-w-[60px] text-center text-ellipsis overflow-hidden whitespace-nowrap capitalize"
-             :class="excluded.includes(yLegend.key) ? 'bg-text-200' : ''"
+             :class="excluded.includes(yLegend.key) ? 'bg-text-300' : ''"
              :style="{ backgroundColor:excluded.includes(yLegend.key) ? '' : yLegend.color }">
           {{ yLegend.key }}
         </div>
         <button v-if="yLegends.length > showedYLegends.length" @click="$refs.legendModal.open()"
-                class="bg-text-200 hover:bg-primary-600 w-[21px] h-[21px] rounded-full flex items-center justify-center">
+                class="bg-text-300 hover:bg-primary-600 w-[21px] h-[21px] rounded-full flex items-center justify-center">
           <svg width="14" height="14" class="fill-white opacity-70" 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="M64 192C28.61 192 0 220.6 0 256s28.61 64 64 64s64-28.62 64-64S99.39 192 64 192zM256 192C220.6 192 192 220.6 192 256s28.61 64 64 64s64-28.62 64-64S291.4 192 256 192zM448 192c-35.39 0-64 28.62-64 64s28.61 64 64 64s64-28.62 64-64S483.4 192 448 192z"/></svg>
         </button>
       </div>
@@ -51,7 +51,7 @@
         </template>
         <div class="flex-1 p-5 pt-0">
 
-          <div class="flex flex-col divide-y divide-text-50">
+          <div class="flex flex-col divide-y divide-border-50">
             <div v-for="yLegend in yLegends" class="flex flex-row items-center gap-2 py-2">
               <div class="w-[19px] h-[19px] rounded-full" :style="{ backgroundColor:yLegend.color }"></div>
               <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden">{{ yLegend.key }}</div>
@@ -73,7 +73,7 @@
 import {Bar} from 'vue-chartjs'
 import {color} from 'chart.js/helpers'
 import {strVars} from "../../utils/helpers.mjs";
-import {readyStateMixin} from "../../mixin/ready-state";
+import {useEmitter} from "../../utils/event-bus";
 
 export default{
 
@@ -97,6 +97,7 @@ export default{
     },
 
     chartData(){
+      console.warn(this.value)
       if(!this.value?.datasets)
         return { labels:[], datasets:[] }
 
@@ -224,14 +225,43 @@ export default{
       ],
 
       height: '',
-      datasets: null
+      datasets: null,
+      readyState: 1,
+      value: null
     }
   },
 
-  inject: [ 'selectPreset' ],
+  inject: [ 'getSrc', 'getViewedPreset', 'getQueryFilters', 'selectPreset', 'socket' ],
 
   methods: {
 
+    load(){
+      const preset = this.getViewedPreset()
+      const {name, datasource = [] } = preset
+
+      this.readyState = 2
+      this.socket.send(this.getSrc(), {
+        name,
+        views: [{
+          ...this.$props,
+          type: 'BarChart'
+        }],
+        datasource: datasource.map(_datasource => {
+          return {
+            ..._datasource,
+            filters: [
+              ...(_datasource.filters ?? []),
+              ...(this.getQueryFilters()[_datasource.uid] ?? [])
+            ]
+          }
+        })
+      })
+          .then(_ => {
+            this.value = _[this.uid]
+          })
+          .finally(_ => this.readyState = 1)
+    },
+
     onClick(e, segments){
 
       const clickInteractions = (this.interactions ?? []).filter(_ => _.event === 'click')
@@ -275,9 +305,17 @@ export default{
 
   mounted() {
     this.height = this.$el.clientHeight + 'px'
-  },
 
-  mixins: [ readyStateMixin ],
+    this.load()
+
+    this.emitter = useEmitter()
+    this.emitter.on(`${this.uid}.load`, () => {
+      this.load()
+    })
+    this.emitter.on(`dashboard.load`, () => {
+      this.load()
+    })
+  },
 
   props: {
 
@@ -308,8 +346,6 @@ export default{
 
     yAxeOnClick: Array,
 
-    value: Object,
-
     interactions: Array,
 
     uid: String
@@ -323,7 +359,7 @@ export default{
 <style module>
 
 .comp{
-  @apply border-[1px] border-text-50 bg-base-500 rounded-lg;
+  @apply border-[1px] border-border-50 bg-base-500 rounded-lg;
   @apply p-3 flex flex-col min-h-[200px];
 }
 

package/src/widgets/Dashboard/BarChartSetting.vue

@@ -186,7 +186,7 @@
         <div class="mt-1">
           <ListItem :items="interactions"
                     class="rounded-xl"
-                    container-class="flex flex-col divide-y divide-text-50"
+                    container-class="flex flex-col divide-y divide-border-50"
                     @reorder="(from, to) => { interactions.splice(to, 0, interactions.splice(from, 1)[0]); }">
             <template v-slot="{ item, index }">
               <div class="flex flex-row items-center gap-3 px-3">

package/src/widgets/Dashboard/DataTable.vue

@@ -0,0 +1,125 @@
+<template>
+	<div :class="$style.comp">
+    <VirtualTable class="flex-1"
+                  :columns="datasourceColumns"
+                  @scroll-end="loadNext"
+                  :items="items">
+
+    </VirtualTable>
+	</div>
+</template>
+
+<script>
+import {useEmitter} from "../../utils/event-bus";
+import VirtualTable from "../../components/VirtualTable.vue";
+
+export default{
+  components: {VirtualTable},
+
+  data(){
+    return {
+      value: null,
+      readyState: 1,
+      items: null,
+      hasNext: false
+    }
+  },
+
+  inject: [ 'getSrc', 'getViewedPreset', 'getQueryFilters', 'socket' ],
+
+  methods: {
+
+    load(){
+      const preset = this.getViewedPreset()
+      const {name, datasource} = preset
+
+      this.readyState = 2
+      this.socket.send(this.getSrc(), {
+        name,
+        views: [{
+          ...this.$props,
+          type: 'DataTable'
+        }],
+        datasource: datasource.map(_datasource => {
+          return {
+            ..._datasource,
+            filters: [
+              ...(_datasource.filters ?? []),
+              ...(this.getQueryFilters()[_datasource.uid] ?? [])
+            ]
+          }
+        })
+      })
+          .then(_ => {
+            const { items, hasNext } = _[this.uid] ?? {}
+            this.items = items
+            this.hasNext = hasNext
+          })
+          .finally(_ => this.readyState = 1)
+    },
+
+    loadNext(){
+      if(!this.hasNext) return
+
+      const preset = this.getViewedPreset()
+      const {name, datasource} = preset
+      const afterItem = this.items[this.items.length - 1]
+
+      this.socket.send(this.getSrc(), {
+        name,
+        views: [{
+          ...this.$props,
+          type: 'DataTable',
+          afterItem
+        }],
+        datasource: datasource.map(_datasource => {
+          return {
+            ..._datasource,
+            filters: [
+              ...(_datasource.filters ?? []),
+              ...(this.getQueryFilters()[_datasource.uid] ?? [])
+            ]
+          }
+        })
+      })
+          .then(_ => {
+            const { items, hasNext } = _[this.uid] ?? {}
+            this.items.push(...items)
+            this.hasNext = hasNext
+          })
+    }
+
+  },
+
+  mounted() {
+    this.load()
+
+    this.emitter = useEmitter()
+    this.emitter.on(`${this.uid}.load`, () => {
+      this.load()
+    })
+    this.emitter.on(`dashboard.load`, () => {
+      this.load()
+    })
+  },
+
+  props: {
+
+    datasourceColumns: Array,
+    datasourceUid: String,
+    label: String,
+    uid: String,
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply min-h-[50vh] flex flex-col;
+}
+
+</style>

package/src/widgets/Dashboard/DataTableSetting.vue

@@ -0,0 +1,243 @@
+<template>
+  <div :class="$style.comp">
+
+    <div class="flex justify-center border-b-[1px] border-border-50" v-if="tabItems.length > 1">
+      <Tabs :items="tabItems" v-model="value.tabIndex" />
+    </div>
+
+    <div class="flex-1 overflow-y-auto flex flex-col">
+      <div v-if="value.tabIndex === 1" class="flex-1 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">
+          <label class="text-text-400">Label</label>
+          <Textbox v-model="value.props.label" maxlength="50" placeholder="Label" :readonly="readonly" />
+        </div>
+
+        <div class="flex flex-row items-center">
+          <label class="flex-1">Datasource</label>
+          <div>
+            <Dropdown class="min-w-[150px]"
+                      :readonly="readonly"
+                      v-model="value.props.datasourceUid">
+              <option v-for="_datasource in datasource"
+                      :value="_datasource.uid">
+                {{ _datasource.name }}
+              </option>
+            </Dropdown>
+          </div>
+        </div>
+
+      </div>
+
+      <div v-else-if="value.tabIndex === 2" class="flex-1 flex flex-col gap-5 p-6">
+
+        <div>
+          <Textbox placeholder="Search..." v-model="search">
+            <template #start>
+              <div class="pl-3">
+                <svg width="14" height="14" class="fill-text-300" 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="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/></svg>
+              </div>
+            </template>
+          </Textbox>
+        </div>
+
+        <VirtualGrid class="flex-1 border-[1px] border-border-50 rounded-xl"
+                     container-class="divide-y divide-border-50"
+                     :items="columns">
+          <template #item="{ item }">
+            <div class="flex-1 flex flex-row gap-2 items-center p-1 px-3 group">
+              <div>
+                <Checkbox v-model="item.visible"
+                          default="true"
+                          :disabled="readonly"
+                          @change="$emit('change')" />
+              </div>
+              <Textbox v-model="item.label2" :placeholder="item.label" :readonly="readonly"
+                       class="flex-1 border-none bg-transparent" :class="$style.columnTextbox"
+                       item-class="p-1 px-0" />
+              <div class="hidden flex-col justify-center group-hover:flex">
+                <button type="button" @click="moveUp(item)">
+                  <svg width="11" height="11" class="fill-text-300 hover:fill-primary" 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="M9.39 265.4l127.1-128C143.6 131.1 151.8 128 160 128s16.38 3.125 22.63 9.375l127.1 128c9.156 9.156 11.9 22.91 6.943 34.88S300.9 320 287.1 320H32.01c-12.94 0-24.62-7.781-29.58-19.75S.2333 274.5 9.39 265.4z"/></svg>
+                </button>
+                <button type="button" @click="moveDown(item)">
+                  <svg width="11" height="11" class="fill-text-300 hover:fill-primary" 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>
+                </button>
+              </div>
+            </div>
+          </template>
+        </VirtualGrid>
+
+      </div>
+
+      <div v-else-if="value.tabIndex === 3" class="flex-1 flex flex-col gap-5 p-6">
+
+      </div>
+
+    </div>
+
+	</div>
+</template>
+
+<script>
+
+import WebPagePropertySelector from "../WebPageBuilder4/WebPagePropertySelector.vue";
+import {defineAsyncComponent} from "vue";
+import InteractionEdit from "./InteractionEdit.vue";
+
+export default{
+  components: {
+    InteractionEdit,
+    HeightSetting: defineAsyncComponent(() => import('../WebPageBuilder4/HeightSetting.vue')),
+    WebPagePropertySelector
+  },
+
+  computed: {
+
+    interactions(){
+      if(!Array.isArray(this.value.props.interactions))
+        this.value.props.interactions = []
+      return this.value.props.interactions
+    },
+
+    selectedDatasource(){
+      return this.datasource.find(d => d.uid === this.value.props.datasourceUid)
+    },
+
+    definedProperties(){
+      const settings = []
+
+      for(let key in this.properties){
+        if(key in this.value.props){
+          settings.push(this.properties[key])
+        }
+      }
+
+      return settings
+    },
+
+    tabItems(){
+      return [
+        { text:'General', value:1 },
+        this.value.props.datasourceUid ? { text:'Columns', value:2 } : null,
+        this.value.props.datasourceUid ? { text:'Filters', value:3 } : null,
+        this.value.props.datasourceUid ? { text:'Sorts', value:4 } : null,
+        this.value.props.datasourceUid ? { text:'Pivot', value:5 } : null,
+      ]
+        .filter(_ => _)
+    },
+
+    columns(){
+      const searches = this.search.toLowerCase().split(' ').filter(_ => _.length > 2)
+      return (this.value.props.datasourceColumns ?? []).filter(_ => {
+        return !_.key.startsWith('_') &&
+            (searches.length < 1 || searches.every(search => _.label.toLowerCase().includes(search)))
+      })
+    },
+
+  },
+
+  data(){
+    return {
+      properties: {
+        'height': { component:"HeightSetting", text:'Height', group:'Layout' }
+      },
+      search: ''
+    }
+  },
+
+  emits: [ 'change' ],
+
+  inject: [ 'uploadImage', 'viewTypes' ],
+
+  props: {
+
+    datasource: Object,
+
+    index: Number,
+
+    readonly: [ Boolean, Number ],
+
+    value: {
+      type: Object,
+      required: true
+    },
+
+    viewType: String,
+
+  },
+
+  methods: {
+
+    addInteraction(obj){
+      this.$util.push(this.interactions, obj)
+    },
+
+    applyDefault(){
+      if(!this.value.props.datasourceUid && this.datasource?.length === 1){
+        this.value.props.datasourceUid = this.datasource[0].uid
+      }
+
+      if(!this.value.tabIndex)
+        this.value.tabIndex = 1
+    },
+
+    generateColumns(){
+      this.value.props.datasourceColumns = (this.selectedDatasource.pivot?.enabled ?
+          this.selectedDatasource.pivot.columns :
+          this.selectedDatasource.columns)
+          .map((_, __) => ({
+            ..._,
+            visible: __ < 10
+          }))
+    },
+
+    moveDown(item){
+      const index = this.value.props.datasourceColumns.indexOf(item)
+      if(index + 1 < this.value.props.datasourceColumns.length){
+        this.value.props.datasourceColumns.splice(index + 1, 0, this.value.props.datasourceColumns.splice(index, 1)[0])
+        this.$emit('change')
+      }
+    },
+
+    moveUp(item){
+      const index = this.value.props.datasourceColumns.indexOf(item)
+      if(index - 1 >= 0){
+        this.value.props.datasourceColumns.splice(index - 1, 0, this.value.props.datasourceColumns.splice(index, 1)[0])
+        this.$emit('change')
+      }
+    },
+
+
+  },
+
+  mounted() {
+    this.applyDefault()
+  },
+
+  watch: {
+
+    'value.props.datasourceUid'(to){
+      if(to){
+        this.generateColumns()
+        this.$emit('change')
+      }
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex-1 flex flex-col;
+}
+
+</style>

package/src/widgets/Dashboard/DatasourceSelector.vue

@@ -15,7 +15,7 @@
 	    </div>
 	  </template>
 	  <template v-slot:foot>
-	    <div class="p-6 flex justify-center border-t-[1px] border-text-50">
+	    <div class="p-6 flex justify-center border-t-[1px] border-border-50">
         <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>