@mixd-id/web-scaffold 0.1.230406338 → 0.1.230406340

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406338",
+  "version": "0.1.230406340",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -53,7 +53,7 @@
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
     "nprogress": "^0.2.0",
-    "pinia": "^2.0.14",
+    "pinia": "^2.0.2",
     "prismjs": "^1.28.0",
     "redis": "^4.6.13",
     "serve-static": "^1.15.0",

package/src/components/Button.vue

@@ -45,9 +45,9 @@ export default{
 
   },
 
-  computed:{
+  computed: {
 
-    compClass(){
+    compClass() {
 
       return [
         this.$style.button,
@@ -60,20 +60,20 @@ export default{
           .join(' ')
     },
 
-    isDisabled(){
+    isDisabled() {
       return parseInt(this.computedState) !== 1
     },
 
-    isLoading(){
+    isLoading() {
       return parseInt(this.computedState) === 2
     },
 
-    computedState(){
+    computedState() {
       return this._state ?? this.state
     },
 
-    widths(){
-      if(!Array.isArray(this.width)) return [ '', '' ]
+    widths() {
+      if (!Array.isArray(this.width)) return ['', '']
 
       return [
         this.width[0] ?? '',
@@ -83,59 +83,56 @@ export default{
 
   },
 
-  data(){
+  data() {
     return {
       _state: null
     }
   },
 
-  methods:{
+  methods: {
 
-    focus(){
+    focus() {
       this.$el.focus()
     },
 
-    setState(state, percentage){
+    setState(state, percentage) {
       this._state = state
     },
 
-    resetState(){
+    resetState() {
       this._state = null
     },
 
-    onClick(){
-      if('edit-mode' in this.$route.query) return
+    onClick() {
+      if ('edit-mode' in this.$route.query) return
 
-      if(this.isDisabled){
+      if (this.isDisabled) {
         this.$emit('disabled-click')
-      }
-      else{
-        if(this.target){
-          switch(this.targetType){
+      } else {
+        if (this.target) {
+          switch (this.targetType) {
 
             case 'section':
               this.scrollTo(this.target)
               break
 
             default:
-              if(this.target.indexOf('://') >= 0){
+              if (this.target.indexOf('://') >= 0) {
                 window.location = this.target
-              }
-              else{
+              } else {
                 this.$router.push(this.target)
               }
               break
           }
-        }
-        else{
+        } else {
           this.$emit('click')
         }
       }
     },
 
-    scrollTo(exp){
+    scrollTo(exp) {
       const el = document.querySelector('._' + exp.substring(0, 4))
-      if(el){
+      if (el) {
         window.scrollTo({
           top: el.offsetTop - 100,
           behavior: 'smooth'
@@ -151,165 +148,202 @@ export default{
 
 <style module>
 
-.button{
+.button {
   @apply p-2;
   @apply relative flex items-center justify-center;
   @apply whitespace-nowrap text-ellipsis overflow-hidden;
   @apply rounded-lg appearance-none;
 }
-.button>*:first-child{
+
+.button > *:first-child {
   @apply flex items-center justify-center
 }
-.button-disabled{
+
+.button-disabled {
   @apply text-opacity-50;
 }
-.button:active{
+
+.button:active {
   @apply top-[1px] left-[1px] relative;
 }
 
-.button-primary{
+.button-primary {
   @apply bg-primary-500 text-white rounded-lg;
   box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
   border: solid 1px rgb(var(--primary-500));
 }
-.button-primary:focus{
+
+.button-primary:focus {
   border-color: rgb(var(--primary-600));
 }
-.button-primary:hover{
+
+.button-primary:hover {
   @apply bg-primary-600;
 }
+
 .button-primary-disabled,
-.button-primary-disabled:hover{
+.button-primary-disabled:hover {
   @apply bg-primary-500 top-0 left-0 cursor-not-allowed text-opacity-50;
   @apply top-0 left-0;
 }
-.button-primary *{
+
+.button-primary * {
   @apply text-white fill-white;
 }
-.button-primary.loading *{
+
+.button-primary.loading * {
   @apply fill-transparent
 }
-.button-primary .svgBg{
+
+.button-primary .svgBg {
   stroke: #fff;
   stroke-opacity: 25%;
 }
-.button-primary .svgHg{
+
+.button-primary .svgHg {
   fill: #fff;
   fill-opacity: 75%;
 }
 
-.button-outline{
+.button-outline {
   @apply bg-transparent text-primary-500 border-[1px] border-primary;
 }
-.button-outline:hover{
+
+.button-outline:hover {
 }
+
 .button-outline-disabled,
-.button-outline-disabled:hover{
+.button-outline-disabled:hover {
   @apply top-0 left-0 cursor-not-allowed;
   @apply text-text border-primary-500 text-opacity-50;
 }
-.button-outline *{
+
+.button-outline * {
   @apply text-primary-500 fill-primary-500;
 }
-.button-outline.loading *{
+
+.button-outline.loading * {
   @apply fill-transparent
 }
-.button-outline .svgBg{
+
+.button-outline .svgBg {
   stroke: rgb(var(--primary-600));
   stroke-opacity: 50%;
 }
-.button-outline .svgHg{
+
+.button-outline .svgHg {
   fill: rgb(var(--primary-500));
   fill-opacity: 100%;
 }
 
-.button-secondary{
+.button-secondary {
   @apply bg-secondary-500 border-secondary-500 text-primary-700 rounded-lg text-white;
   border: solid 1px rgb(var(--secondary-500));
 }
-.button-secondary:hover{
+
+.button-secondary:hover {
   @apply bg-secondary-600 border-secondary-600;
 }
+
 .button-secondary-disabled,
-.button-secondary-disabled:hover{
+.button-secondary-disabled:hover {
   @apply bg-secondary-400 border-secondary-400 cursor-not-allowed text-opacity-50;
 }
-.button-secondary *{
+
+.button-secondary * {
   @apply text-text-500 fill-white;
 }
-.button-secondary.loading *{
+
+.button-secondary.loading * {
   @apply fill-transparent
 }
-.button-secondary .svgBg{
+
+.button-secondary .svgBg {
   stroke: rgb(var(--text-400));
   stroke-opacity: 25%;
 }
-.button-secondary .svgHg{
+
+.button-secondary .svgHg {
   fill: rgb(var(--text-500));
   fill-opacity: 75%;
 }
 
-.button-red{
+.button-red {
   @apply bg-red-500 text-white rounded-md border-[2px] border-red-500;
 }
-.button-red:hover{
+
+.button-red:hover {
   @apply bg-red-600 border-red-600;
 }
+
 .button-red-disabled,
-.button-red-disabled:hover{
+.button-red-disabled:hover {
   @apply bg-red-500 border-red-500 top-0 left-0 cursor-not-allowed text-opacity-50;
 }
-.button-red *{
+
+.button-red * {
   @apply text-white fill-white;
 }
-.button-red.loading *{
+
+.button-red.loading * {
   @apply fill-transparent
 }
-.button-red .svgBg{
+
+.button-red .svgBg {
   @apply stroke-red-400;
   stroke-opacity: 50%;
 }
-.button-red .svgHg{
+
+.button-red .svgHg {
   @apply fill-text-500;
   fill-opacity: 100%;
 }
 
-.button-minimal{
+.button-minimal {
   @apply border-[2px] border-transparent;
 }
-.button-minimal:hover{
+
+.button-minimal:hover {
 }
-.button-minimal .svgBg{
+
+.button-minimal .svgBg {
   stroke: rgb(var(--text-500));
   stroke-opacity: 25%;
 }
-.button-minimal .svgHg{
+
+.button-minimal .svgHg {
   fill: rgb(var(--text));
   fill-opacity: 75%;
 }
 
-.loadingPane{
+.loadingPane {
   @apply absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center pl-1;
 }
-.loading{
+
+.loading {
   color: transparent;
 }
-.loading>*:first-child{
+
+.loading > *:first-child {
   @apply opacity-0
 }
-.loading:hover{
+
+.loading:hover {
 }
-.loading:active{
+
+.loading:active {
   @apply top-0 left-0;
 }
-.loading>*{
+
+.loading > * {
   opacity: 0;
 }
-.loading .loadingPane{
+
+.loading .loadingPane {
   opacity: 1;
 }
 
-.spinner{
+.spinner {
   @apply animate-spin h-5 w-5;
 }
 

package/src/components/Modal.vue

@@ -331,10 +331,8 @@ export default{
 	@apply panel-400;
 	@apply border-[1px] border-text-50 z-20 flex max-h-[90vh];
 	@apply rounded-xl overflow-hidden transition-all;
-  background-color: rgba(255, 255, 255, .6)
 }
 html[data-theme='dark'] .modal{
-  background-color: rgba(0, 0, 0, .6)
 }
 
 .modal.v-show{

package/src/components/Switch.vue

@@ -91,6 +91,9 @@ export default{
 .switch>input:checked + label>span{
 	@apply ml-[1.3rem] border-base bg-white
 }
+.switch>input:checked:disabled + label{
+  @apply bg-text-50;
+}
 
 .switch>input:checked + label + *,
 .switch>input:not(:checked) + label + * + *{

package/src/components/VirtualTable.vue

@@ -1,5 +1,6 @@
 <template>
 	<div :class="$style.comp">
+
 		<div :class="$style.header" v-if="visibleColumns.length > 0">
 			<table :class="$style.table" ref="tableHead" :style="tableHeadStyle">
 				<thead>
@@ -62,21 +63,21 @@
 			<div v-else-if="visibleColumns.length <= 0 && Array.isArray(columns)" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
 				<h5 class="text-text-300">No active column</h5>
 			</div>
-			<div v-else-if="Array.isArray(items) && items.length <= 0" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
+			<div v-else-if="Array.isArray(cItems) && cItems.length <= 0" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
 				<h5 class="text-text-300">No data available</h5>
 			</div>
 
-			<div :class="$style.calc" v-if="visibleColumns.length > 0 && items && items.length > 0" ref="calc">
+			<div :class="$style.calc" v-if="visibleColumns.length > 0 && cItems && cItems.length > 0" ref="calc">
 				<table :class="$style.table">
 					<tbody>
-					<tr>
-						<td v-for="column in columns" :style="thStyle(column)" :class="thClass(column)">
-							<slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="items[0]"></slot>
-							<slot v-else-if="$slots.default" name="default" :column="column" :item="items[0]"></slot>
-							<div v-else :class="columnClass(column)" v-html="formatColumn(items[0] ?? {}, column)"></div>
-						</td>
-						<td :class="$style.spacer"></td>
-					</tr>
+            <tr>
+              <td v-for="column in cColumns" :style="thStyle(column)" :class="thClass(column)">
+                <slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="cItems[0]"></slot>
+                <slot v-else-if="$slots.default" name="default" :column="column" :item="cItems[0]"></slot>
+                <div v-else :class="columnClass(column)" v-html="formatColumn(cItems[0] ?? {}, column)"></div>
+              </td>
+              <td :class="$style.spacer"></td>
+            </tr>
 					</tbody>
 				</table>
 			</div>
@@ -89,11 +90,19 @@
 import throttle from "lodash/throttle";
 import dayjs from "dayjs";
 import {accessNestedObject} from "../utils/helpers.mjs";
+import {useDatasource} from "../stores/datasource";
 
 const _DEFAULT_COLUMN_WIDTH = '100px'
 
 export default{
 
+  setup(){
+    const datasource = useDatasource()
+    return {
+      datasource
+    }
+  },
+
   inject: [ 'listStyle' ],
 
 	emits: [ 'scroll-end', 'item-click' ],
@@ -109,6 +118,10 @@ export default{
 
 		pinned: Function,
 
+    datasourceColumns: Array,
+
+    datasourceUid: String,
+
 		defaultColumnWidth: {
 			type: String,
 			default: _DEFAULT_COLUMN_WIDTH
@@ -118,6 +131,10 @@ export default{
 			type: Object,
 			default: {}
 		},
+
+    type: String,
+
+    value: Object,
 	},
 
 	data(){
@@ -134,17 +151,25 @@ export default{
 
 	computed:{
 
+    cColumns(){
+      return this.datasourceColumns ?? this.columns
+    },
+
+    cItems(){
+      return this.value?.items ?? this.items
+    },
+
 		visibleStartIndex(){
 			return Math.floor((this.scrollTop < 0 ? 0 : this.scrollTop) / this.itemHeight)
 		},
 
 		sortedItems(){
-			if(!Array.isArray(this.items)) return []
+			if(!Array.isArray(this.cItems)) return []
 
 			if(typeof this.pinned === 'function'){
 				const pinnedItems = []
 				const unpinnedItems = []
-				this.items.forEach((item) => {
+				this.cItems.forEach((item) => {
 					if(this.pinned(item))
 						pinnedItems.push(item)
 					else
@@ -156,7 +181,7 @@ export default{
 					...unpinnedItems
 				]
 			}
-			return this.items
+			return this.cItems
 		},
 
 		visibleItems(){
@@ -171,10 +196,10 @@ export default{
 		},
 
 		scrollerStyle(){
-			if(!this.items || this.items.length < 1)
+			if(!this.cItems || this.cItems.length < 1)
 				return {}
 
-			const height = (this.items.length * this.itemHeight) + (this.state === 2 ? 48 : 0)
+			const height = (this.cItems.length * this.itemHeight) + (this.state === 2 ? 48 : 0)
 			const width = this.visibleColumns.reduce((r, item) => r + parseInt(item.width ?? _DEFAULT_COLUMN_WIDTH), 0)
 
 			return {
@@ -190,7 +215,7 @@ export default{
 		},
 
 		visibleColumns(){
-			return (this.columns ?? []).filter(_ => !('visible' in _) || _.visible)
+			return (this.cColumns ?? []).filter(_ => !('visible' in _) || _.visible)
 		},
 
 		visibleColumnKeys(){
@@ -270,7 +295,7 @@ export default{
 						window.getComputedStyle(this.$el).height :
 						window.getComputedStyle(this.$el).maxHeight)
 					this.itemHeight = Math.ceil(parseFloat(window.getComputedStyle(this.$refs.calc).height))
-					this.maxVisibleItems = elHeight > 0 ? Math.ceil(elHeight / this.itemHeight) + 1 : this.items.length
+					this.maxVisibleItems = elHeight > 0 ? Math.ceil(elHeight / this.itemHeight) + 1 : this.cItems.length
 
 					if(this.itemHeight <= 0 && import.meta.env.DEV){
 						console.error('[VirtualTable] Unable to calculate item height, make sure not async component.')
@@ -319,7 +344,7 @@ export default{
 
 		startResize(e, column){
 
-			const idx = this.columns.findIndex((_) => _ === column)
+			const idx = this.cColumns.findIndex((_) => _ === column)
 			let x1 = e.touches ? e.touches[0].clientX : e.clientX
 
 			const onMouseMove = (e) => {
@@ -327,9 +352,9 @@ export default{
 				const d = x2 - x1
 				x1 = x2
 
-				let width = parseInt(this.columns[idx].width ?? _DEFAULT_COLUMN_WIDTH) + d
+				let width = parseInt(this.cColumns[idx].width ?? _DEFAULT_COLUMN_WIDTH) + d
 				if(width < 20) width = 20
-				this.columns[idx].width = width
+				this.cColumns[idx].width = width
 			}
 
 			const onMouseUp = (e) => {
@@ -563,7 +588,7 @@ export default{
 
 	watch: {
 
-		items: {
+    cItems: {
 			deep: true,
 			handler(to, from){
         if((to ?? []).length !== (from ?? []).length){

package/src/index.js

@@ -671,6 +671,12 @@ export default{
     app.component('MenuEditor', defineAsyncComponent(() => import("./widgets/MenuEditor.vue")))
     app.component('Dashboard', defineAsyncComponent(() => import("./widgets/Dashboard.vue")))
     app.component('Text', defineAsyncComponent(() => import("./components/Text.vue")))
+
+    app.component('Doughnut', defineAsyncComponent(() => import("./widgets/Dashboard/Doughnut.vue")))
+    app.component('Pie', defineAsyncComponent(() => import("./widgets/Dashboard/Pie.vue")))
+    app.component('PolarArea', defineAsyncComponent(() => import("./widgets/Dashboard/PolarArea.vue")))
+    app.component('Metric', defineAsyncComponent(() => import("./widgets/Dashboard/Metric.vue")))
+    app.component('BarChart', defineAsyncComponent(() => import("./widgets/Dashboard/BarChart.vue")))
   }
 
 }

package/src/stores/datasource.js

@@ -0,0 +1,11 @@
+import { defineStore } from 'pinia'
+
+export const useDatasource = defineStore('datasource', {
+
+  state: () => ({
+    keys: {}
+  }),
+
+  actions: {}
+
+})

package/src/utils/helpers.mjs

@@ -360,7 +360,22 @@ function applyDatasourceReplacer(value, datasource){
   return value
 }
 
+function capitalize(str) {
+  return str.replace(/\b\w/g, function(char) {
+    return char.toUpperCase();
+  });
+}
+
+const round = (num, precision = 0) => {
+  var p = Math.pow(10, precision)
+  var n = (num * p) * (1 + Number.EPSILON)
+  return Math.round(n) / p
+}
+
+
 export {
+  capitalize,
+  round,
   downsizeImage,
   hexToRgb,
   rgbToHex,