@mixd-id/web-scaffold 0.1.230406247 → 0.1.230406249

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406247",
+  "version": "0.1.230406249",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -26,7 +26,10 @@
     "./importer": "./src/utils/importer.js",
     "./listpage1": "./src/utils/listpage1.js",
     "./listview": "./src/utils/listview.js",
-    "./preset-selector": "./src/utils/preset-selector.js",
+    "./preset-selector": {
+      "require": "./src/utils/preset-selector.js",
+      "import": "./src/utils/preset-selector.mjs"
+    },
     "./web": "./src/utils/web.js"
   },
   "dependencies": {

package/src/components/Button.vue

@@ -155,7 +155,7 @@ export default{
 .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-400));
+	border: solid 1px rgb(var(--primary-500));
 }
 .button-primary:focus{
 	border-color: rgb(var(--primary-600));
@@ -207,16 +207,13 @@ export default{
 }
 
 .button-secondary{
-	@apply bg-secondary-200 text-text-500 rounded-lg;
-	box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
-	border: solid 1px rgb(var(--secondary-200));
+	@apply bg-primary-100 border-primary-100 text-primary-700 rounded-lg text-text;
 }
 .button-secondary:hover{
-	@apply bg-secondary-100;
-	border-color: rgb(var(--secondary-100));
+	@apply bg-primary-200 border-primary-200;
 }
 .button-secondary:disabled{
-	@apply bg-secondary-500 opacity-50 top-0 left-0 cursor-not-allowed;
+	@apply bg-primary-100 opacity-50 top-0 left-0 cursor-not-allowed;
 }
 .button-secondary *{
 	@apply text-text-500 fill-white;

package/src/components/Chart.vue

@@ -2,17 +2,24 @@
 	<div v-if="readyState === 1" :class="$style.comp">
 
     <div class="p-3 flex flex-col items-start leading-tight">
-      <small class="text-text-400">Users</small>
-      <h5 class="inline align-top cursor-pointer hover:text-primary group" @click="$refs.presetSelector.open()">
+      <small class="text-text-400 text-xs">{{ title ?? 'Untitled' }}</small>
+      <h4 class="inline align-top cursor-pointer hover:text-primary group"
+          @click="openPreset">
         {{ preset.name ?? 'Preset Name' }}
         <span v-if="badgeCount > 0" class="mx-1 min-w-[19px] px-2 h-[19px] relative top-[-2px] rounded-full bg-primary text-white inline-flex items-center justify-center">
           {{ badgeCount }}
         </span>
-        <svg width="13" height="13" class="inline fill-text pointer-events-none group-hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
-      </h5>
+        <svg v-if="![ 'sidebar', 'external' ].includes(presetMode)" width="13" height="13" class="inline fill-text pointer-events-none group-hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
+      </h4>
     </div>
 
-    <Bar class="w-full"
+    <Bar v-if="preset.chart.type === 'bar'" class="w-full"
+        id="my-chart-id"
+        :options="chartOptions"
+        :data="chartData"
+    />
+
+    <Line v-if="preset.chart.type === 'line'" class="w-full"
         id="my-chart-id"
         :options="chartOptions"
         :data="chartData"
@@ -31,16 +38,17 @@
 
 <script>
 
-import { Bar } from 'vue-chartjs'
-import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+import { Bar, Line } from 'vue-chartjs'
+import Chart from 'chart.js/auto'
 import PresetSelector from "../widgets/PresetSelector.vue";
 import throttle from "lodash/throttle";
-
-ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+import dayjs from "dayjs";
 
 export default{
 
-  components: {Bar, PresetSelector},
+  components: {Bar, Line, PresetSelector},
+
+  emits: [ 'open-preset' ],
 
   inject: [ 'alert', 'socket' ],
 
@@ -52,7 +60,9 @@ export default{
 
     presetKey: undefined,
     src: undefined,
+    title: String,
     subscribeKey: String,
+    presetMode: String,
   },
 
   data(){
@@ -108,7 +118,7 @@ export default{
       }
       else{
         for(let key in items[0] ?? {}){
-          if(key !== 'date'){
+          if(key !== xAxis[0].key){
             datasets.push({
               label: key,
               data: [],
@@ -121,7 +131,7 @@ export default{
 
       const labels = []
       for(let item of this.data.items ?? []){
-        labels.push(item[xAxis[0].key])
+        labels.push(dayjs(item[xAxis[0].key]).format('DD MMM'))
 
         if((yAxis[0] ?? {}).aggregrate === 'count'){
           datasets[0].data.push(item['count'])
@@ -152,7 +162,7 @@ export default{
         animation: false,
         plugins: {
           legend: {
-            display: false, // Disable the legend
+            display: this.preset.chart.showLegend ?? false, // Disable the legend
           },
         },
         scales: {
@@ -164,6 +174,7 @@ export default{
                 return `rgb(${gridColor2})`
               }
             },
+            stacked: this.preset.chart.type === 'bar' && this.preset.chart.stack
           },
           y: {
             beginAtZero: true, // Adjust y-axis as needed
@@ -173,6 +184,7 @@ export default{
                 return `rgb(${gridColor})`
               }
             },
+            stacked: this.preset.chart.type === 'bar' && this.preset.chart.stack
           },
         },
       }
@@ -247,6 +259,24 @@ export default{
       }
 
     },
+
+    openPreset(){
+
+      switch(this.presetMode){
+
+        case 'external':
+          this.$emit('open-preset')
+          break
+
+        case 'sidebar':
+          break
+
+        default:
+          this.$refs.presetSelector.open()
+          break
+
+      }
+    },
   },
 
   mounted() {
@@ -287,8 +317,8 @@ export default{
 <style module>
 
 .comp{
-  @apply flex flex-col;
-  @apply bg-base-400;
+  @apply flex flex-col p-2;
+  @apply bg-base-500;
   padding-bottom: 50px;
 }
 

package/src/components/ContextMenu.vue

@@ -301,8 +301,8 @@ export default {
 <style module>
 
 .contextMenu{
-	@apply fixed z-20 bg-base-400 dark:bg-base-300 backdrop-blur-md min-w-[150px] overflow-y-auto rounded-xl;
-	@apply border-[2px] border-text-50 shadow-2xl whitespace-nowrap;
+	@apply fixed z-20 bg-base-400 min-w-[150px] overflow-y-auto rounded-xl;
+	@apply border-[2px] border-border-50 shadow-2xl whitespace-nowrap;
 	transition: all 150ms cubic-bezier(0.25, 1, 0.5, 1);
 	opacity: 0;
 }
@@ -315,7 +315,7 @@ export default {
 @media screen(md){
 
 	.contextMenu{
-		@apply fixed z-20 bg-base-50 backdrop-blur-md min-w-[150px] overflow-y-auto rounded-lg;
+		@apply fixed z-20 bg-base-400 backdrop-blur-md min-w-[150px] overflow-y-auto rounded-lg;
 		@apply border-[1px] border-text-50 shadow-2xl whitespace-nowrap;
 		transition: all 150ms cubic-bezier(0.25, 1, 0.5, 1);
 		opacity: 0;

package/src/components/DGrid.vue

@@ -15,7 +15,7 @@ export default{
 <style module>
 
 .comp{
-  @apply flex flex-col md:grid grid-cols-12 gap-5 md:items-stretch;
+  @apply flex flex-col md:grid grid-cols-12 gap-3 md:items-stretch;
 }
 
 </style>

package/src/components/DGridItem.vue

@@ -15,6 +15,10 @@
          @click="editMode = true"
          @mousedown="(e) => onMouseDown(e, 'bottom')"></div>
 
+    <div ref="drag" :class="`${$style.drag} ${editMode ? $style.editMode : ''}`">
+      <svg width="48" height="48" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M512 255.1c0 6.755-2.844 13.09-7.844 17.62l-88 80.05C411.5 357.8 405.8 359.9 400 359.9c-13.27 0-24-10.76-24-24c0-6.534 2.647-13.04 7.844-17.78l42.07-38.28H280v146l38.25-42.1c4.715-5.2 11.21-7.849 17.74-7.849c13.23 0 24.01 10.71 24.01 24.03c0 5.765-2.061 11.55-6.25 16.15l-80 88.06C269.2 509.2 262.8 512 256 512s-13.22-2.846-17.75-7.849l-80-88.06c-4.189-4.603-6.25-10.39-6.25-16.15c0-13.38 10.83-24.03 23.1-24.03c6.526 0 13.02 2.649 17.75 7.849L232 425.9V279.8H86.09l42.07 38.28c5.196 4.735 7.844 11.24 7.844 17.78c0 13.22-10.71 24-24 24c-5.781 0-11.53-2.064-16.16-6.254l-88-80.05C2.844 269.1 0 262.7 0 255.1c0-6.755 2.844-13.37 7.844-17.9l88-80.05C100.5 153.8 106.2 151.8 112 151.8c13.26 0 23.99 10.74 23.99 23.99c0 6.534-2.647 13.04-7.844 17.78L86.09 231.8H232V85.8L193.8 127.9C189 133.1 182.5 135.7 175.1 135.7c-13.16 0-23.1-10.66-23.1-24.03c0-5.765 2.061-11.55 6.25-16.15l80-88.06C242.8 2.502 249.4 0 256 0s13.22 2.502 17.75 7.505l80 88.06c4.189 4.603 6.25 10.39 6.25 16.15c0 13.35-10.81 24.03-24 24.03c-6.531 0-13.03-2.658-17.75-7.849L280 85.8v146h145.9l-42.07-38.28c-5.196-4.735-7.844-11.24-7.844-17.78c0-13.25 10.74-23.99 23.98-23.99c5.759 0 11.55 2.061 16.18 6.242l88 80.05C509.2 242.6 512 249.2 512 255.1z"/></svg>
+    </div>
+
     <button type="button" :class="`${$style.removeBtn} ${editMode ? $style.editMode : ''}`" @click="$emit('remove')">
       <svg width="11" height="11" class="fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M378.4 440.6c8.531 10.16 7.203 25.28-2.938 33.81C370.9 478.2 365.5 480 360 480c-6.844 0-13.64-2.906-18.39-8.562L192 293.3l-149.6 178.1C37.63 477.1 30.83 480 23.98 480c-5.453 0-10.92-1.844-15.42-5.625c-10.14-8.531-11.47-23.66-2.938-33.81L160.7 256L5.625 71.44C-2.906 61.28-1.578 46.16 8.563 37.63C18.69 29.08 33.84 30.39 42.38 40.56L192 218.7l149.6-178.1c8.547-10.17 23.67-11.47 33.81-2.938s11.47 23.66 2.938 33.81L223.3 256L378.4 440.6z"/></svg>
     </button>
@@ -26,7 +30,7 @@
 
 export default{
 
-  emits: [ 'class-change', 'remove' ],
+  emits: [ 'class-change', 'remove', 'reorder' ],
 
   props: {
 
@@ -53,6 +57,7 @@ export default{
     return {
       drag: null,
       editMode: false,
+      oEl: null,
     }
   },
 
@@ -82,16 +87,12 @@ export default{
 
           if(Math.abs(distanceX) > 35){
             const match = this.class.match(/col-span-(\d+)/)
-            console.log(match)
             const colSpan = match ? parseInt(match[1]) : 1
             const nextColSpan = distanceX > 0 ? colSpan + 1 <= 12 ? colSpan + 1 : 12 :
                 colSpan - 1 >= 1 ? colSpan - 1 : 1
-            console.log(colSpan, nextColSpan)
 
-            console.log(2, this.class)
             const nextClass = match ? this.class.replace(`col-span-${colSpan}`, `col-span-${nextColSpan}`) :
                 `${this.class} col-span-${nextColSpan}`
-            console.log(2, nextClass)
 
             this.drag.x = e.clientX
             this.$emit('class-change', nextClass)
@@ -100,17 +101,17 @@ export default{
 
         case 'bottom':
           const distanceY = e.clientY - this.drag.y
-          if(Math.abs(distanceY) > 20){
+          if(Math.abs(distanceY) > 30){
             const match = this.class.match(/row-span-(\d+)/)
             const rowSpan = match ? parseInt(match[1]) : 1
             const nextRowSpan = distanceY > 0 ? rowSpan + 1 <= 12 ? rowSpan + 1 : 12 :
                 rowSpan - 1 >= 1 ? rowSpan - 1 : 1
 
-            match ? this.class.replace(`row-span-${rowSpan}`, `row-span-${nextRowSpan}`) :
-                this.class += ` row-span-${nextRowSpan}`
+            const nextClass = match ? this.class.replace(`row-span-${rowSpan}`, `row-span-${nextRowSpan}`) :
+                `${this.class} row-span-${nextRowSpan}`
 
             this.drag.y = e.clientY
-            this.$emit('class-change', this.class)
+            this.$emit('class-change', nextClass)
           }
           break
       }
@@ -131,6 +132,47 @@ export default{
 
     },
 
+    onDragOver(e){
+      e.preventDefault();
+      const oEl = e.target.closest(`.${this.$style.comp}`)
+
+      if(this.oEl !== oEl){
+        this.oEl ? this.oEl.style.opacity = '' : '';
+
+        if(oEl){
+          this.oEl = oEl
+          this.oEl.style.opacity = '.5'
+        }
+      }
+    },
+
+    onDragStart(e){
+      window.addEventListener('dragover', this.onDragOver)
+      window.addEventListener('dragend', this.onDragEnd)
+    },
+
+    onDragEnd(e){
+
+      e.preventDefault()
+
+      const childNodes = Array.from(this.$el.parentNode.children)
+      const fromIdx = childNodes.indexOf(this.$el)
+      const toIdx = childNodes.indexOf(this.oEl)
+
+      this.oEl ? this.oEl.style.opacity = '' : '';
+
+      this.$el.setAttribute('draggable', false)
+      window.removeEventListener('dragover', this.onDragOver)
+      window.removeEventListener('dragend', this.onDragEnd)
+
+      this.$emit('reorder', fromIdx, toIdx)
+    },
+
+    onDrag(e){
+      this.$el.addEventListener('dragstart', this.onDragStart)
+      this.$el.setAttribute('draggable', true)
+    }
+
   },
 
   watch: {
@@ -138,6 +180,9 @@ export default{
     editMode(to){
       to ? window.addEventListener('click', this.checkEditMode) :
           window.removeEventListener('click', this.checkEditMode)
+
+      to ? this.$refs.drag.addEventListener('mousedown', this.onDrag) :
+          this.$refs.drag.removeEventListener('mousedown', this.onDrag)
     }
 
   }
@@ -151,6 +196,19 @@ export default{
 .comp{
   @apply relative flex;
 }
+.comp[class~='row-span-2']>*:first-child,
+.comp[class~='row-span-3']>*:first-child,
+.comp[class~='row-span-4']>*:first-child,
+.comp[class~='row-span-5']>*:first-child,
+.comp[class~='row-span-6']>*:first-child,
+.comp[class~='row-span-7']>*:first-child,
+.comp[class~='row-span-8']>*:first-child,
+.comp[class~='row-span-9']>*:first-child,
+.comp[class~='row-span-10']>*:first-child,
+.comp[class~='row-span-11']>*:first-child
+.comp[class~='row-span-12']>*:first-child{
+  @apply !absolute !top-0 !left-0 !right-0 !bottom-0 !h-auto;
+}
 
 .top{
   @apply h-[3px];
@@ -193,4 +251,13 @@ export default{
   @apply flex;
 }
 
+.drag{
+  @apply absolute top-0 left-0 right-0 bottom-0;
+  @apply rounded-full hidden;
+}
+.drag.editMode{
+  @apply flex items-center justify-center flex items-center justify-center;
+  @apply cursor-move;
+}
+
 </style>

package/src/components/Dropdown.vue

@@ -3,7 +3,7 @@
 	<div :class="computedClass">
 
 		<select v-if="[ 1 ].includes(mode)" class="flex-1" ref="select" @change="onChanged" :disabled="isDisabled"
-						:value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
+						:value="modelValue" @input="$emit('update:modelValue', $event.target.value)" :class="containerClass">
 			<slot></slot>
 		</select>
 
@@ -33,6 +33,8 @@ export default {
 
 	props: {
 
+    containerClass: String,
+
 		mode: {
 			type: [ String, Number ],
 			default: 1
@@ -158,7 +160,6 @@ export default {
 <style module>
 
 .dropdown{
-	@apply min-h-[var(--h-cp)];
 	@apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
 	@apply border-[1px] border-text-200 bg-base-50;
 }
@@ -174,6 +175,10 @@ export default {
 	@apply appearance-none outline-none p-2 bg-transparent cursor-pointer w-full;
 }
 
+.dropdown option{
+  @apply bg-base-50 text-text;
+}
+
 .dropdown option[disabled]{
 	@apply text-text-300;
 }

package/src/components/ErrorText.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.comp" v-if="error" @click="$emit('dismissError')">
+	<div :class="$style.comp" v-if="error" @click="$emit('dismiss')">
 		<div v-if="error.response && error.response.data && error.response.data.errors">
 			<div v-if="typeof error.response.data.errors === 'string'">{{ error.response.data.errors }}</div>
 			<div v-else v-for="(text, key) in error.response.data.errors">