@mixd-id/web-scaffold 0.1.230406246 → 0.1.230406248

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406246",
+  "version": "0.1.230406248",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -26,6 +26,7 @@
     "./importer": "./src/utils/importer.js",
     "./listpage1": "./src/utils/listpage1.js",
     "./listview": "./src/utils/listview.js",
+    "./preset-selector": "./src/utils/preset-selector.js",
     "./web": "./src/utils/web.js"
   },
   "dependencies": {

package/src/components/Alert.vue

@@ -16,8 +16,8 @@
 						</div>
 
 						<div :class="$style.details">
-							<p class="text-center break-words" v-if="message">{{ message }}</p>
-							<p class="text-center break-words max-w-[420px]" v-if="stack">{{ stack }}</p>
+							<p class="text-center break-words whitespace-pre-line" v-if="message">{{ message }}</p>
+							<p class="text-center break-words max-w-[420px] whitespace-pre-line" v-if="stack">{{ stack }}</p>
 						</div>
 
 						<div :class="$style.details" v-if="details">

package/src/components/Chart.vue

@@ -0,0 +1,296 @@
+<template>
+	<div v-if="readyState === 1" :class="$style.comp">
+
+    <div class="p-3 flex flex-col items-start leading-tight">
+      <small class="text-text-400">{{ title ?? 'Untitled' }}</small>
+      <h5 class="inline align-top cursor-pointer hover:text-primary group" @click="$refs.presetSelector.open()">
+        {{ 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>
+    </div>
+
+    <Bar class="w-full"
+        id="my-chart-id"
+        :options="chartOptions"
+        :data="chartData"
+    />
+
+    <PresetSelector ref="presetSelector" :config="config" @select="load" type="chart" />
+
+	</div>
+
+  <div v-else-if="readyState < 0" :class="$style.comp"
+       class="flex items-center justify-center gap-3">
+    <svg width="32" height="32" class="fill-red-500" 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="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464zM359.5 133.7c-10.11-8.578-25.28-7.297-33.83 2.828L256 218.8L186.3 136.5C177.8 126.4 162.6 125.1 152.5 133.7C142.4 142.2 141.1 157.4 149.7 167.5L224.6 256l-74.88 88.5c-8.562 10.11-7.297 25.27 2.828 33.83C157 382.1 162.5 384 167.1 384c6.812 0 13.59-2.891 18.34-8.5L256 293.2l69.67 82.34C330.4 381.1 337.2 384 344 384c5.469 0 10.98-1.859 15.48-5.672c10.12-8.562 11.39-23.72 2.828-33.83L287.4 256l74.88-88.5C370.9 157.4 369.6 142.2 359.5 133.7z"/></svg>
+    <h5>{{ (error ?? {}).message ?? 'An error occurred' }}</h5>
+  </div>
+</template>
+
+<script>
+
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+import PresetSelector from "../widgets/PresetSelector.vue";
+import throttle from "lodash/throttle";
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+export default{
+
+  components: {Bar, PresetSelector},
+
+  inject: [ 'alert', 'socket' ],
+
+  props: {
+    config: {
+      type: Object,
+      default: {}
+    },
+
+    presetKey: undefined,
+    src: undefined,
+    title: String,
+    subscribeKey: String,
+  },
+
+  data(){
+    return {
+      badgeCount: 0,
+      readyState: 0,
+      data: {},
+      error: null,
+
+      backgroundColors: [
+        '#5D9CEC',
+        '#A0D468',
+        '#FFCE54',
+        '#FC6E51',
+        '#48CFAD',
+        '#AC92EC',
+        '#4FC1E9',
+        '#FFCE54',
+        '#ED5565',
+        '#EC87C0'
+      ],
+      borderColors: [
+        '#4A89DC',
+        '#8CC152',
+        '#F6BB42',
+        '#E9573F',
+        '#37BC9B',
+        '#967ADC',
+        '#3BAFDA',
+        '#F6BB42',
+        '#DA4453',
+        '#D770AD'
+      ],
+    }
+  },
+
+  computed: {
+
+    chartData(){
+
+      const { type, xAxis = [], yAxis = [] } = this.preset.chart ?? {}
+
+      const items = this.data.items ?? []
+
+      const datasets = []
+      if((yAxis[0] ?? {}).aggregrate === 'count'){
+        datasets.push({
+          label: 'count',
+          data: [],
+          borderColor: this.borderColors[datasets.length % this.borderColors.length],
+          backgroundColor: this.backgroundColors[datasets.length % this.backgroundColors.length],
+        })
+      }
+      else{
+        for(let key in items[0] ?? {}){
+          if(key !== 'date'){
+            datasets.push({
+              label: key,
+              data: [],
+              borderColor: this.borderColors[datasets.length % this.borderColors.length],
+              backgroundColor: this.backgroundColors[datasets.length % this.backgroundColors.length],
+            })
+          }
+        }
+      }
+
+      const labels = []
+      for(let item of this.data.items ?? []){
+        labels.push(item[xAxis[0].key])
+
+        if((yAxis[0] ?? {}).aggregrate === 'count'){
+          datasets[0].data.push(item['count'])
+        }
+        else{
+          for(let i in datasets){
+            datasets[i].data.push(item[datasets[i].label])
+          }
+        }
+      }
+
+      return {
+        labels,
+        datasets
+      }
+    },
+
+    chartOptions(){
+      if(typeof window === 'undefined') return
+
+      var style = getComputedStyle(document.body)
+      var gridColor = style.getPropertyValue('--text-100')
+      var gridColor2 = style.getPropertyValue('--text-200')
+
+      return {
+        responsive: true,
+        maintainAspectRatio: false,
+        animation: false,
+        plugins: {
+          legend: {
+            display: false, // Disable the legend
+          },
+        },
+        scales: {
+          x: {
+            //display: false, // Disable x-axis labels
+            grid: {
+              display: true,
+              color: function(context){
+                return `rgb(${gridColor2})`
+              }
+            },
+          },
+          y: {
+            beginAtZero: true, // Adjust y-axis as needed
+            grid: {
+              display: true,
+              color: function(context){
+                return `rgb(${gridColor})`
+              }
+            },
+          },
+        },
+      }
+    },
+
+    preset(){
+      return ((this.config ?? {}).presets ?? [])[(this.config ?? {}).presetIdx ?? 0] ?? {}
+    },
+
+  },
+
+  methods: {
+
+    load(){
+      this.socket.send(this.src, this.preset)
+          .then(data => this.data = data)
+          .catch(err => {
+            this.readyState = -1
+            this.error = err
+          })
+    },
+
+    loadPreset(){
+      if(this.presetKey){
+        return this.socket.send('user.preset', { key:this.presetKey, reset:'reset' in this.$route.query })
+          .then(config => {
+            Object.assign(this.config, config)
+
+            if('reset' in this.$route.query){
+              this.savePreset()
+              this.$router.replace({ name:this.$route.name })
+            }
+          })
+      }
+      return new Promise(resolve => resolve())
+    },
+
+    saveConfig: throttle(function() {
+      if(this.presetKey){
+        this.socket.send('user.preset',
+            { key:this.presetKey, config:this.config })
+      }
+    }, 1000, { leading:true }),
+
+    onSignal(event, items){
+      console.log('onSignal', event, items)
+
+      const hasData = items.some(item => item._data)
+      if(hasData){
+        for(let item of items){
+          if(item._data){
+            const length = this.data.items.length
+            this.$util.push(this.data.items, { id:item.id, ...item._data })
+            this.data.items.length > length ? this.data.items.shift() : null
+          }
+        }
+      }
+      else{
+        this.socket.send(this.src, {
+          ...this.preset,
+          id: items.map(item => item.id)
+        })
+          .then(data => {
+            if(!Array.isArray((data ?? {}).items)) return
+
+            for(let item of data.items){
+              const length = this.data.items.length
+              this.$util.push(this.data.items, item)
+              this.data.items.length > length ? this.data.items.shift() : null
+            }
+          })
+      }
+
+    },
+  },
+
+  mounted() {
+    this.loadPreset()
+        .then(() => {
+          this.readyState = 1
+          this.load()
+        })
+
+    if(this.subscribeKey){
+      this.socket.send('user.subscribe', { name:this.subscribeKey })
+      this.socket.on(this.subscribeKey, this.onSignal)
+    }
+  },
+
+  unmounted() {
+    if(this.subscribeKey) {
+      this.socket.send('user.unsubscribe', {name: this.subscribeKey})
+      this.socket.off(this.subscribeKey, this.onSignal)
+    }
+  },
+
+  watch: {
+
+    config: {
+      deep: true,
+      handler(){
+        this.saveConfig()
+      }
+    }
+
+  },
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-col;
+  @apply bg-base-400;
+  padding-bottom: 50px;
+}
+
+</style>

package/src/components/DGrid.vue

@@ -0,0 +1,21 @@
+<template>
+	<div :class="$style.comp">
+    <slot name="default"></slot>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-col md:grid grid-cols-12 gap-5 md:items-stretch;
+}
+
+</style>

package/src/components/DGridItem.vue

@@ -0,0 +1,263 @@
+<template>
+	<div :class="computedClass">
+    <slot name="default"></slot>
+
+    <div :class="`${$style.left} ${editMode ? $style.editMode : ''}`"
+         @click="editMode = true"
+         @mousedown="(e) => onMouseDown(e, 'left')"></div>
+    <div :class="`${$style.top} ${editMode ? $style.editMode : ''}`"
+         @click="editMode = true"
+         @mousedown="(e) => onMouseDown(e, 'top')"></div>
+    <div :class="`${$style.right} ${editMode ? $style.editMode : ''}`"
+         @click="editMode = true"
+         @mousedown="(e) => onMouseDown(e, 'right')"></div>
+    <div :class="`${$style.bottom} ${editMode ? $style.editMode : ''}`"
+         @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>
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+  emits: [ 'class-change', 'remove', 'reorder' ],
+
+  props: {
+
+    class: {
+      type: String,
+      default: ''
+    }
+
+  },
+
+  computed: {
+
+    computedClass(){
+      return [
+        this.$style.comp,
+        this.class
+      ]
+        .join(' ')
+    }
+
+  },
+
+  data(){
+    return {
+      drag: null,
+      editMode: false,
+      oEl: null,
+    }
+  },
+
+  methods: {
+
+    onMouseDown(e, direction){
+      if(!this.editMode) return
+
+      this.drag = {
+        x: e.clientX,
+        y: e.clientY,
+        colSize: Math.round(this.$el.clientWidth / 12),
+        target: e.target,
+        direction
+      }
+
+      window.addEventListener('mousemove', this.onMouseMove)
+      window.addEventListener('mouseup', this.onMouseUp)
+    },
+
+    onMouseMove(e){
+
+      switch(this.drag.direction){
+
+        case 'right':
+          const distanceX = e.clientX - this.drag.x
+
+          if(Math.abs(distanceX) > 35){
+            const match = this.class.match(/col-span-(\d+)/)
+            const colSpan = match ? parseInt(match[1]) : 1
+            const nextColSpan = distanceX > 0 ? colSpan + 1 <= 12 ? colSpan + 1 : 12 :
+                colSpan - 1 >= 1 ? colSpan - 1 : 1
+
+            const nextClass = match ? this.class.replace(`col-span-${colSpan}`, `col-span-${nextColSpan}`) :
+                `${this.class} col-span-${nextColSpan}`
+
+            this.drag.x = e.clientX
+            this.$emit('class-change', nextClass)
+          }
+          break
+
+        case 'bottom':
+          const distanceY = e.clientY - this.drag.y
+          if(Math.abs(distanceY) > 70){
+            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
+
+            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', nextClass)
+          }
+          break
+      }
+
+    },
+
+    onMouseUp(e){
+
+      window.removeEventListener('mousemove', this.onMouseMove)
+      window.removeEventListener('mouseup', this.onMouseUp)
+    },
+
+    checkEditMode(e){
+
+      if(e.target.closest(`.${this.$style.comp}`) !== this.$el){
+        this.editMode = false
+      }
+
+    },
+
+    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: {
+
+    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)
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.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];
+  @apply absolute top-[-6px] right-[-6px] left-[-6px] cursor-move bg-transparent hover:bg-text-50;
+}
+.top.editMode{
+  @apply cursor-n-resize bg-primary hover:bg-primary;
+}
+
+.bottom{
+  @apply h-[3px];
+  @apply absolute bottom-[-6px] right-[-6px] left-[-6px] cursor-move bg-transparent hover:bg-text-50;
+}
+.bottom.editMode{
+  @apply cursor-s-resize bg-primary hover:bg-primary;
+}
+
+.left{
+  @apply w-[3px];
+  @apply absolute top-[-6px] left-[-6px] bottom-[-6px] cursor-move bg-transparent hover:bg-text-50;
+}
+.left.editMode{
+  @apply cursor-w-resize bg-primary hover:bg-primary;
+}
+
+.right{
+  @apply w-[3px];
+  @apply absolute top-[-6px] right-[-6px] bottom-[-6px] cursor-move bg-transparent hover:bg-text-50;
+}
+.right.editMode{
+  @apply cursor-e-resize bg-primary hover:bg-primary;
+}
+
+.removeBtn{
+  @apply absolute top-[.5rem] right-[.5rem] hidden;
+  @apply w-[24px] h-[24px] rounded-full bg-primary;
+  @apply items-center justify-center;
+}
+.removeBtn.editMode{
+  @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>