@mixd-id/web-scaffold 0.2.240702 → 0.2.240703

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>
@@ -7,7 +8,6 @@
 					<th v-for="column in visibleColumns" :style="thStyle(column)" :class="thClass(column)"
               v-tooltip="column.tooltip">
 						<slot v-if="$slots['col-' + column.key]" :name="'col-' + column.key" :column="column"></slot>
-						<slot v-else-if="$slots['col-default']" name="col-default" :column="column"></slot>
 						<div v-else :class="headerColumnClass(column)">
 							<span>{{ column.label2 ? column.label2 : (column.label ?? column.key) }}</span>
 						</div>
@@ -27,10 +27,10 @@
 				<div :class="$style.spacer" ref="spacer" :style="spacerStyle">
 					<table :class="$style.table">
 						<thead>
-              <tr>
-                <th v-for="column in visibleColumns" :style="thStyle(column)"></th>
-                <th :class="$style.spacer"></th>
-              </tr>
+						<tr>
+							<th v-for="column in visibleColumns" :style="thStyle(column)"></th>
+							<th :class="$style.spacer"></th>
+						</tr>
 						</thead>
 						<tbody ref="tbody">
               <tr v-for="(item, index) in visibleItems" :key="item"
@@ -57,23 +57,24 @@
 							<svg class="animate-spin aspect-square w-[16px] h-[16px] text-primary" 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>
 					</div>
+          <slot name="end"></slot>
 				</div>
 			</div>
 			<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 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>
@@ -94,22 +95,27 @@ const _DEFAULT_COLUMN_WIDTH = '100px'
 
 export default{
 
-  inject: [ 'listStyle' ],
+  inject: [ 'emitRoot', 'listStyle' ],
 
 	emits: [ 'scroll-end', 'item-click' ],
 
 	props:{
-
 		columns: Array,
 
     enumCache: Object,
 
     itemClass: String,
 
+    uid: String,
+
 		items: Array,
 
 		pinned: Function,
 
+    datasourceColumns: Array,
+
+    datasourceUid: String,
+
 		defaultColumnWidth: {
 			type: String,
 			default: _DEFAULT_COLUMN_WIDTH
@@ -120,6 +126,9 @@ export default{
 			default: {}
 		},
 
+    type: String,
+
+    value: Object,
 	},
 
 	data(){
@@ -136,17 +145,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
@@ -158,7 +175,7 @@ export default{
 					...unpinnedItems
 				]
 			}
-			return this.items
+			return this.cItems
 		},
 
 		visibleItems(){
@@ -173,10 +190,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 {
@@ -192,7 +209,7 @@ export default{
 		},
 
 		visibleColumns(){
-			return (this.columns ?? []).filter(_ => !('visible' in _) || _.visible)
+			return (this.cColumns ?? []).filter(_ => !('visible' in _) || _.visible)
 		},
 
 		visibleColumnKeys(){
@@ -272,11 +289,10 @@ 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
 
-          this.log(this.itemHeight)
 					if(this.itemHeight <= 0 && import.meta.env.DEV){
-						this.error('[VirtualTable] Unable to calculate item height, make sure not async component.')
+						console.error('[VirtualTable] Unable to calculate item height, make sure not async component.')
 					}
 				}
 			})
@@ -292,6 +308,8 @@ export default{
 			if(this.scrollTop > this.$refs.scroller.offsetHeight - this.$refs.cont.clientHeight - this.itemHeight){
 				if(!this.isOnEndScroll){
 					this.$emit('scroll-end')
+          if(typeof this.emitRoot === 'function')
+            this.emitRoot.apply(this, [ 'scroll-end', this.$props ])
 					this.isOnEndScroll = true
 				}
 			}
@@ -322,7 +340,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) => {
@@ -330,9 +348,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) => {
@@ -547,8 +565,8 @@ export default{
             enumText = typeParam && typeParam.text ? typeParam.text : enumText
           }
 
-          if(this.enumCache && this.enumCache[column.key] && this.enumCache[column.key][value]){
-            enumText = this.enumCache[column.key][value].text ?? enumText
+          else if(this.enumCache && this.enumCache[column.key] && this.enumCache[column.key][value?.toString()]){
+            enumText = this.enumCache[column.key][value?.toString()].text ?? enumText
           }
 
           text = enumText ? enumText : text
@@ -566,7 +584,7 @@ export default{
 
 	watch: {
 
-		items: {
+    cItems: {
 			deep: true,
 			handler(to, from){
         if((to ?? []).length !== (from ?? []).length){

package/src/configs/dashboard/bar.js

@@ -0,0 +1,10 @@
+export const component = {
+
+  type:"BarChart",
+
+  props:{
+    height:200,
+    excluded: [],
+  }
+
+}

package/src/configs/dashboard/collection-1.js

@@ -0,0 +1,5 @@
+export const component = {
+
+  props: {}
+
+}

package/src/configs/dashboard/doughnut.js

@@ -0,0 +1,7 @@
+export const component = {
+
+  type:"Doughnut",
+
+  props:{}
+
+}

package/src/configs/dashboard/gheatmaps.js

@@ -0,0 +1,9 @@
+export const component = {
+
+  type:"GHeatMaps",
+
+  props:{
+
+  }
+
+}

package/src/configs/dashboard/grid-2.js

@@ -0,0 +1,34 @@
+export const component = {
+
+  type:'Grid',
+
+  isContainer:true,
+
+  openOnAdd:false,
+
+  props:{
+
+    columns:[
+      'grid-cols-1',
+      'md:grid-cols-2',
+      '',
+      ''
+    ],
+
+    gap:[
+      'gap-5',
+      'md:gap-5',
+      '',
+      ''
+    ],
+
+    alignItems:[
+      'items-start',
+      'md:items-start',
+      '',
+      ''
+    ],
+
+  }
+
+}

package/src/configs/dashboard/grid-3.js

@@ -0,0 +1,34 @@
+export const component = {
+
+  type:'Grid',
+
+  isContainer:true,
+
+  openOnAdd:false,
+
+  props:{
+
+    columns:[
+      'grid-cols-1',
+      'md:grid-cols-3',
+      '',
+      ''
+    ],
+
+    gap:[
+      'gap-5',
+      'md:gap-5',
+      '',
+      ''
+    ],
+
+    alignItems:[
+      'items-start',
+      'md:items-start',
+      '',
+      ''
+    ],
+
+  }
+
+}

package/src/configs/dashboard/grid-4.js

@@ -0,0 +1,34 @@
+export const component = {
+
+  type:'Grid',
+
+  isContainer:true,
+
+  openOnAdd:false,
+
+  props:{
+
+    columns:[
+      'grid-cols-2',
+      'md:grid-cols-4',
+      '',
+      ''
+    ],
+
+    gap:[
+      'gap-5',
+      'md:gap-5',
+      '',
+      ''
+    ],
+
+    alignItems:[
+      'items-start',
+      'md:items-start',
+      '',
+      ''
+    ],
+
+  }
+
+}

package/src/configs/dashboard/grid.js

@@ -0,0 +1,15 @@
+export const component = {
+
+  type:'Grid',
+
+  isContainer:true,
+
+  openOnAdd:false,
+
+  props:{
+    columns:['grid-cols-2', 'md:grid-cols-5', '', ''],
+    gap:['gap-5', 'md:gap-5', '', ''],
+    alignItems:['items-start', 'md:items-start', '', ''],
+  }
+
+}

package/src/configs/dashboard/metric.js

@@ -0,0 +1,10 @@
+export const component = {
+
+  type:"Metric",
+
+  props:{
+    columnModifier:"sum",
+    column2Modifier:"sum"
+  }
+
+}

package/src/configs/dashboard/pie.js

@@ -0,0 +1,7 @@
+export const component = {
+
+  type:"Pie",
+
+  props:{}
+
+}

package/src/configs/dashboard/polar-area.js

@@ -0,0 +1,7 @@
+export const component = {
+
+  type:"PolarArea",
+
+  props:{}
+
+}

package/src/configs/dashboard/virtual-table.js

@@ -0,0 +1,9 @@
+export const component = {
+
+  type:"VirtualTable",
+
+  props:{
+    height:[ "h-[50vh]", "md:h-[50vh]", "", "" ]
+  }
+
+}

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

@@ -149,7 +149,6 @@ const unregisterResizeEvent = (fn) => {
 }
 
 const consoleInfo = (...args) => { console.info(...args) }
-const consoleError = (...args) => { console.error(...args) }
 const consoleLog = (...args) => { console.log(...args) }
 const consoleWarn = (...args) => { console.warn(...args) }
 const consoleTime = (...args) => { console.time(...args) }
@@ -209,7 +208,7 @@ const util = {
     window.addEventListener('mouseup', onMouseUp)
   },
 
-  push: (arr, items, opt = { key:'uid', update:true }) => {
+  push: (arr, items, opt = { update:true }) => {
     if(!Array.isArray(arr)) return
     if(!Array.isArray(items)) items = [ items ]
     if(!opt.key){
@@ -249,34 +248,41 @@ const util = {
     }
   },
 
-  unshift: (arr, item, opt = {}) => {
+  unshift: (arr, items, opt = {}) => {
     if(!Array.isArray(arr)) return
+    if(!Array.isArray(items)) items = [ items ]
+    if(items.length < 1) return
+
     if(!opt.key){
-      opt.key = item && item.uid ? 'uid' : 'id'
+      opt.key = items[0] && items[0].uid ? 'uid' : 'id'
     }
 
     opt = Object.assign({ key:"id", highlight:false }, opt)
 
-    const index = arr.findIndex((_) => _[opt.key] === item[opt.key])
-    if(index >= 0){
+    for(let item of items) {
+      if (!item) continue
+
+      const index = arr.findIndex((_) => _[opt.key] === item[opt.key])
+      if(index >= 0){
 
-      const keys = []
-      for(let key in item){
-        if(!(key in arr[index]) || arr[index][key] !== item[key]){
-          keys.push(key)
+        const keys = []
+        for(let key in item){
+          if(!(key in arr[index]) || arr[index][key] !== item[key]){
+            keys.push(key)
+          }
         }
-      }
 
-      if(opt.highlight){
-        item._highlight = keys
+        if(opt.highlight){
+          item._highlight = keys
+        }
+        Object.assign(arr[index], item)
       }
-      Object.assign(arr[index], item)
-    }
-    else{
-      if(opt.highlight){
-        item._highlight = true
+      else{
+        if(opt.highlight){
+          item._highlight = true
+        }
+        arr.unshift(item)
       }
-      arr.unshift(item)
     }
   },
 
@@ -402,7 +408,6 @@ export default{
     app.config.globalProperties.$util = util
     app.config.globalProperties.$resize = registerResizeEvent
     app.config.globalProperties.$unresize = unregisterResizeEvent
-    app.config.globalProperties.error = consoleError
     app.config.globalProperties.log = consoleLog
     app.config.globalProperties.warn = consoleWarn
     app.config.globalProperties.info = consoleInfo
@@ -528,6 +533,7 @@ export default{
     app.component('ErrorText', defineAsyncComponent(() => import("./components/ErrorText.vue")))
     app.component('Feed', defineAsyncComponent(() => import("./components/Feed.vue")))
     app.component('Gmaps', defineAsyncComponent(() => import("./components/Gmaps.vue")))
+    app.component('GHeatMaps', defineAsyncComponent(() => import("./components/GHeatMaps.vue")))
     app.component('HTMLEditor', defineAsyncComponent(() => import("./components/HTMLEditor.vue")))
     app.component('Switch', defineAsyncComponent(() => import("./components/Switch.vue")))
     app.component('IconMenu', defineAsyncComponent(() => import("./components/IconMenu.vue")))
@@ -594,7 +600,7 @@ export default{
     app.component('Chart', defineAsyncComponent(() => import("./components/Chart.vue")))
     app.component('DGrid', defineAsyncComponent(() => import("./components/DGrid.vue")))
     app.component('DGridItem', defineAsyncComponent(() => import("./components/DGridItem.vue")))
-    app.component('Text', defineAsyncComponent(() => import("./components/Text.vue")))
+    app.component('GmapsDirection', defineAsyncComponent(() => import("./components/GmapsDirection.vue")))
 
     app.component('AhrefSetting', defineAsyncComponent(() => import("./widgets/AhrefSetting.vue")))
     app.component('ArticleSetting', defineAsyncComponent(() => import("./widgets/ArticleSetting.vue")))
@@ -672,8 +678,14 @@ 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('MobileMenu', defineAsyncComponent(() => import("./widgets/MobileMenu.vue")))
-    app.component('UerActionBuilder', defineAsyncComponent(() => import("./widgets/UserActionBuilder.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/mixin/ready-state.js

@@ -0,0 +1,37 @@
+import {useEmitter} from "../utils/event-bus";
+
+export const readyStateMixin = {
+
+  data(){
+    return {
+      emitter: null,
+      readyState: 1,
+    }
+  },
+
+  methods: {
+
+    resetState(){
+      this.setState(1)
+    },
+
+    setState(state){
+      this.readyState = state
+    },
+
+  },
+
+  mounted() {
+    this.emitter = useEmitter()
+    this.emitter.on(`${this.uid}.readyState`, (state) => {
+      this.readyState = state
+    })
+  },
+
+  props: {
+
+    uid: String
+
+  }
+
+}

package/src/stores/datasource.js

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

package/src/themes/default/index.js

@@ -244,7 +244,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': {