@mixd-id/web-scaffold 0.1.240411062 → 0.1.240411064

package/docs/components/Dashboard.md

@@ -0,0 +1,56 @@
+# Dashboard
+Dashboard components
+
+## Configs
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| params | Object | {} | | Dashboard parameters |
+| params.presetUid | String | "" | | Preset unique identifier |
+
+## Samples
+```json
+{
+  "params": {
+    "presetUid": "abc",
+    "viewUid": "def"
+  },
+  
+  "presets": [
+
+    {
+      "name": "Preset Name",
+      
+      "views": [
+        {
+          "type": "Grid",
+          "uid": ":uid"
+        }
+      ],
+      
+      "datasource": {
+        
+        ":uid": {
+          "uid": ":uid",
+          "datasourceUid": "234",
+          "filters": [],
+          "sorts": [],
+          "groups": [],
+          "pivot": []
+        },
+        
+      }
+      
+    }
+    
+  ]
+}
+```
+
+
+## Sub Components
+
+### Dashboard Configs
+Dashboard configuration panel
+
+### Dashboard Component Selector
+Component selector for adding component to preset views

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.240411062",
+  "version": "0.1.240411064",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Alert.vue

@@ -204,7 +204,7 @@ export default{
 }
 
 .alert>*{
-	@apply max-h-[60vh] overflow-y-auto bg-base-500 rounded-xl;
+	@apply max-h-[60vh] overflow-y-auto bg-base-400 dark:bg-base-300 rounded-xl;
 	@apply border-[1px] border-text-50;
 	@apply min-w-[280px] max-w-[80vw] md:max-w-[480px];
 }

package/src/components/Button.vue

@@ -226,7 +226,7 @@ export default{
 }
 
 .button-minimal{
-  @apply border-transparent bg-transparent text-white;
+  @apply border-transparent bg-transparent text-text;
   @apply hover:bg-transparent hover:border-transparent;
 }
 .button-minimal .svgBg{

package/src/components/Checkout.vue

@@ -66,7 +66,7 @@
 
           <div class="mt-1 p-5 bg-base-300 flex flex-col gap-3">
             <div v-for="item in order.items" class="flex flex-row gap-3">
-              <Image :src="item.imageSrc" class="w-[60px] aspect-square rounded-lg bg-base-50" />
+              <Image :src="item.imageSrc" class="w-[60px] aspect-square rounded-lg bg-base-300" />
               <div class="flex-1 flex flex-col gap1">
                 <small>{{ item.code }}</small>
                 <strong>{{ item.name }}</strong>

package/src/components/Confirm.vue

@@ -18,12 +18,12 @@
 						</div>
 
 						<div class="mt-4 flex flex-row gap-2">
-							<Button ref="btnOK" @click="onConfirm" class="min-w-[88px]" tabindex="0">
+							<Button ref="btnOK" @click="onConfirm" class="min-w-[88px] text-lg" tabindex="0">
 								<strong class="px-4">
 									{{ buttonText[0] }}
 								</strong>
 							</Button>
-							<Button variant="minimal" @click="onDismiss" class="min-w-[88px] px-4 hover:text-primary">
+							<Button variant="minimal" @click="onDismiss" class="min-w-[88px] px-4 hover:text-primary text-lg">
 								{{ buttonText[1] }}
 							</Button>
 						</div>
@@ -122,7 +122,7 @@ export default{
 }
 
 .confirm>*{
-	@apply max-h-[60vh] overflow-y-auto bg-base-500 rounded-xl;
+	@apply max-h-[60vh] overflow-y-auto bg-base-400 dark:bg-base-300 rounded-xl;
 	@apply border-[1px] border-text-50;
 	@apply min-w-[280px] max-w-[80vw] md:max-w-[480px];
 }
@@ -132,7 +132,7 @@ export default{
 }
 
 .cont2{
-	@apply my-4 text-center flex-1 overflow-y-auto;
+	@apply my-4 text-center flex-1 overflow-y-auto px-6;
 }
 
 .title{
@@ -140,7 +140,7 @@ export default{
 }
 
 .description{
-	@apply overflow-y-auto whitespace-pre-line text-center;
+	@apply overflow-y-auto whitespace-pre-line text-center text-lg;
 	overflow-wrap: break-word;
 	word-wrap: break-word;
 	-ms-word-break: break-all;

package/src/components/ContextMenu.vue

@@ -241,15 +241,15 @@ export default {
 <style module>
 
 .contextMenu{
-	@apply fixed bg-base-300 min-w-[150px] overflow-y-auto rounded-xl;
-	@apply whitespace-nowrap shadow-2xl border-[1px] border-text-100 mt-[1px];
+	@apply fixed bg-base-400 dark:bg-base-300 min-w-[150px] overflow-y-auto rounded-lg;
+	@apply whitespace-nowrap shadow-2xl border-[1px] border-text-50 mt-[1px];
   z-index: 180;
 }
 
 @media screen and (min-width: 640px){
 
 	.contextMenu{
-		@apply fixed min-w-[150px] overflow-y-auto rounded-lg;
+		@apply fixed min-w-[150px] overflow-y-auto;
 	}
 
 }

package/src/components/Dashboard.vue

@@ -0,0 +1,243 @@
+<template>
+  <div :class="$style.comp">
+
+    <div v-if="config.params.openSidebar" :style="leftStyle" class="relative flex flex-col bg-base-300 border-l-[1px] border-text-50">
+      <DashboardConfigs :config="config" class="flex-1" />
+
+      <div :class="$style.resize1" @mousedown="(e) => $util.dragResize(e, resize1)"></div>
+    </div>
+
+    <div class="flex-1 flex flex-col gap-4 py-4">
+
+      <div class="px-8 flex flex-row gap-8 items-center">
+        <button type="button" class="p-3" @click="config.params.openSidebar = !config.params.openSidebar">
+          <svg width="16" height="16" class="hover:fill-primary" :class="config.params.openSidebar ? 'fill-primary' : 'fill-text'" 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="M448 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V96C512 60.65 483.3 32 448 32zM136 336h-48C74.75 336 64 325.3 64 312C64 298.7 74.75 288 88 288h48C149.3 288 160 298.7 160 312C160 325.3 149.3 336 136 336zM136 240h-48C74.75 240 64 229.3 64 216C64 202.7 74.75 192 88 192h48C149.3 192 160 202.7 160 216C160 229.3 149.3 240 136 240zM136 144h-48C74.75 144 64 133.3 64 120C64 106.7 74.75 96 88 96h48C149.3 96 160 106.7 160 120C160 133.3 149.3 144 136 144zM464 416c0 8.822-7.176 16-16 16H224v-352h224c8.824 0 16 7.178 16 16V416z"/></svg>
+        </button>
+        <button type="button" class="flex flex-row gap-2 items-center">
+          <h5>{{ preset?.name }}</h5>
+          <svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432.6 209.3l-191.1 183.1C235.1 397.8 229.1 400 224 400s-11.97-2.219-16.59-6.688L15.41 209.3C5.814 200.2 5.502 184.1 14.69 175.4c9.125-9.625 24.38-9.938 33.91-.7187L224 342.8l175.4-168c9.5-9.219 24.78-8.906 33.91 .7187C442.5 184.1 442.2 200.2 432.6 209.3z"/></svg>
+          <button type="button" class="p-3" @click="load">
+            <svg width="14" height="14" class="fill-text hover: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="M468.9 32.11c13.87 0 27.18 10.77 27.18 27.04v145.9c0 10.59-8.584 19.17-19.17 19.17h-145.7c-16.28 0-27.06-13.32-27.06-27.2c0-6.634 2.461-13.4 7.96-18.9l45.12-45.14c-28.22-23.14-63.85-36.64-101.3-36.64c-88.09 0-159.8 71.69-159.8 159.8S167.8 415.9 255.9 415.9c73.14 0 89.44-38.31 115.1-38.31c18.48 0 31.97 15.04 31.97 31.96c0 35.04-81.59 70.41-147 70.41c-123.4 0-223.9-100.5-223.9-223.9S132.6 32.44 256 32.44c54.6 0 106.2 20.39 146.4 55.26l47.6-47.63C455.5 34.57 462.3 32.11 468.9 32.11z"/></svg>
+          </button>
+        </button>
+        <div class="flex-1"></div>
+
+        <button type="button" class="p-3" @click="config.params.openRightbar = !config.params.openRightbar">
+          <svg width="16" height="16" class="fill-text hover:fill-primary" :class="config.params.openRightbar ? 'fill-primary' : 'fill-text'" 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="M324.4 103.1L384 128l24.88 59.63C410.2 190.3 413 192 416 192s5.75-1.75 7.125-4.375L448 128l59.63-24.88C510.3 101.8 512 99 512 96s-1.75-5.75-4.375-7.125L448 64l-24.88-59.62C421.8 1.75 419 0 416 0s-5.75 1.75-7.125 4.375L384 64l-59.63 24.88C321.8 90.25 320 93 320 96S321.8 101.8 324.4 103.1zM507.6 408.9L448 384l-24.88-59.63C421.8 321.8 419 320 416 320s-5.75 1.75-7.125 4.375L384 384l-59.63 24.88C321.8 410.2 320 413 320 416s1.75 5.75 4.375 7.125L384 448l24.88 59.63C410.2 510.2 413 512 416 512s5.75-1.75 7.125-4.375L448 448l59.63-24.88C510.3 421.8 512 419 512 416S510.3 410.2 507.6 408.9zM384 255.6c0-6-3.375-11.62-8.875-14.38l-112.5-56.31L206.3 72.19c-5.375-10.88-23.13-10.88-28.5 0L121.4 184.9L8.875 241.2C3.375 244 0 249.6 0 255.6c0 6.125 3.375 11.62 8.875 14.38l112.5 56.37l56.38 112.7C180.4 444.4 185.1 447.9 192 447.9c5.999 0 11.62-3.512 14.25-8.887l56.38-112.7l112.5-56.37C380.6 267.2 384 261.8 384 255.6z"/></svg>
+        </button>
+      </div>
+
+      <div class="flex-1 overflow-y-auto px-8">
+        <component :is="component.type"
+                   v-for="component in components"
+                   :="component" />
+      </div>
+
+    </div>
+
+    <div v-if="config.params.openRightbar" class="w-[320px] bg-base-300 flex flex-col">
+
+      <div class="flex-1"></div>
+
+      <div class="p-3">
+        <Textarea placeholder="Ask anything...">
+          <template #end>
+            <div class="p-1">
+              <button class="p-2">
+                <svg width="14" height="14" 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="M511.1 255.1c0 12.8-7.625 24.38-19.41 29.41L44.6 477.4c-4.062 1.75-8.344 2.594-12.59 2.594c-8.625 0-17.09-3.5-23.28-10.05c-9.219-9.766-11.34-24.25-5.344-36.27l73.66-147.3l242.1-30.37L77.03 225.6l-73.66-147.3C-2.623 66.3-.4982 51.81 8.72 42.05c9.25-9.766 23.56-12.75 35.87-7.453L492.6 226.6C504.4 231.6 511.1 243.2 511.1 255.1z"/></svg>
+              </button>
+            </div>
+          </template>
+        </Textarea>
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+
+import {computed, inject, onMounted, ref, watch} from "vue";
+import DashboardConfigs from "./DashboardConfigs.vue";
+
+const { controller, presetKey } = defineProps({
+
+  controller: {
+    type: String,
+    required: true
+  },
+
+  presetKey: { type: String },
+
+})
+
+const alert = inject('alert')
+const loadConfig = inject('loadConfig')
+const saveConfig = inject('saveConfig')
+const useSocket = inject('useSocket')
+const socket = useSocket()
+
+const config = ref(Object.assign({
+  params: {},
+  presets: []
+}, presetKey ? await loadConfig(presetKey, {}) : {}))
+
+const data = ref({})
+
+const leftStyle = computed(() => {
+  if(!config.value.params.leftWidth)
+    config.value.params.leftWidth = 300
+
+  return {
+    width: `${config.value.params.leftWidth}px`
+  }
+})
+
+function load(){
+  if(!preset.value) return
+
+  socket.send(`${controller}.load`, preset.value.datasource)
+      .then(res => Object.assign(data.value, res))
+      .catch(err => alert(err))
+}
+
+function resize1(w){
+  if(config.value.params.leftWidth + w >= 100 && config.value.params.leftWidth + w <= 600){
+    config.value.params.leftWidth += w
+  }
+}
+
+const preset = computed(() => {
+  return (config.value.presets ?? []).find(_ => _.uid === config.value.params.presetUid)
+})
+
+const selectedPreset = computed(() => {
+  return (config.value.presets ?? []).find(_ => _.uid === config.value.params.selectedUid)
+})
+
+const compClasses = [
+  'aspectRatio', 'position', 'left', 'top', 'right', 'bottom',
+
+  'bdSize', 'bdColor', 'bdRadius', 'bdStyle',
+  'divideSize', 'divideColor', 'divideStyle',
+  'outlineWidth', 'outlineColor', 'outlineStyle',
+  'bgColors', 'bgSize', 'bgPosition', 'bgRepeat',
+  'textAlign', 'verticalAlign',
+  'gap',
+  'padding', 'margin',
+  'direction', 'columns', 'rows', 'display', 'wrap',
+  'width', 'minWidth', 'maxWidth',
+  'height', 'minHeight', 'maxHeight',
+  'fontFamily', 'fontSize', 'fontWeight', 'textColor', 'lineHeight', 'overflow',
+  'textTransform', 'whitespace', 'textOverflow', 'textDecoration',
+  'boxShadow', 'opacity',
+  'colSpan', 'rowSpan',
+  'flex', 'flexAlign', 'flexJustify', 'flexBasis', 'flexColumns', 'flexWrap',
+  'flexDirection',
+  'zIndex',
+
+  'autoFlow', 'alignItems', 'justifyContent',
+  'letterSpacing', 'lineClamp',
+
+  'animate',
+
+  'blur', 'grayscale',
+]
+const containerClasses = [
+  'containerVariant', 'containerGridColumn', 'containerGap'
+]
+const itemClasses = [
+  'itemMinWidth', 'itemRatio', 'itemVariant'
+]
+
+const components = computed(() => {
+  if(!selectedPreset.value) return
+
+  const getComponent = (component) => {
+    if (!component.uid) return
+    if (!component.props.enabled) return
+
+    const compUid = '_' + component.uid.substring(0, 4) + ' '
+
+    const instance = {
+      type: component.type,
+      uid: component.uid,
+
+      class: compUid + compClasses.map(key => {
+        return Array.isArray(component.props[key]) ? component.props[key].join(' ') : ''
+      })
+          .filter(_ => _)
+          .join(' '),
+
+      containerClass: containerClasses.map(key => {
+        return Array.isArray(component.props[key]) ? component.props[key].join(' ') : ''
+      })
+          .filter(_ => _)
+          .join(' '),
+
+      itemClass: itemClasses.map(key => {
+        return Array.isArray(component.props[key]) ? component.props[key].join(' ') : ''
+      })
+          .filter(_ => _)
+          .join(' ')
+    }
+
+    for (let key in component.props) {
+      if (!compClasses.includes(key) &&
+          !containerClasses.includes(key) &&
+          !itemClasses.includes(key) &&
+          !['enabled'].includes(key)) {
+        instance[key] = component.props[key]
+      }
+    }
+
+    const whitelistProps = [
+      'column', 'datasourceUid', 'rows', 'columns'
+    ]
+    whitelistProps.forEach((key) => {
+      if (component.props[key]) {
+        instance[key] = component.props[key]
+      }
+    })
+
+    if(data.value[component.uid]){
+      instance.items = data.value[component.uid].items
+    }
+    else if(Array.isArray(component.items)) {
+      instance.items = component.items.map((_) => getComponent(_)).filter(_ => _)
+    }
+
+    return instance
+  }
+
+  return selectedPreset.value.views.map(view => {
+    return getComponent(view)
+  })
+    .filter(_ => _)
+})
+
+if(presetKey){
+  console.log('Watch config changes')
+  watch(() => config, _ => saveConfig(presetKey, config.value), {
+    deep: true
+  })
+}
+
+onMounted(() => {
+  load()
+})
+
+</script>
+
+<style module>
+
+.comp {
+  @apply flex flex-row;
+}
+
+.resize1{
+  @apply w-[3px] cursor-ew-resize absolute top-0 right-0 bottom-0;
+}
+
+</style>

package/src/components/DashboardComponentSelector.vue

@@ -0,0 +1,96 @@
+<template>
+	<Modal ref="modal" width="360" height="480">
+	  <template v-slot:head>
+	    <div class="relative p-5">
+	      <h3>Select Component</h3>
+	      <div class="absolute top-0 right-0 p-2">
+	        <button type="button" class="p-2" @click="$refs.modal.close()">
+	          <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+	            <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+	          </svg>
+	        </button>
+	      </div>
+	    </div>
+	  </template>
+	  <template v-slot:foot>
+	    <div class="p-5">
+
+	    </div>
+	  </template>
+	  <div class="flex-1 divide-y divide-text-50">
+
+      <div class="flex flex-col">
+        <button v-for="component of components"
+                class="p-3 px-6 text-left"
+                @click="add(component)">
+          {{ component.type }}
+        </button>
+      </div>
+
+
+	  </div>
+	</Modal>
+</template>
+
+<script setup>
+
+import {ref, useTemplateRef} from "vue";
+import md5 from "md5";
+
+const modal = useTemplateRef('modal')
+const callback = ref(null)
+
+function open(_, cb){
+  callback.value = cb
+  modal.value.open()
+}
+
+function add(component){
+  if(typeof callback.value === 'function'){
+    const newComponent = JSON.parse(JSON.stringify(component))
+    newComponent.uid = md5(new Date().toString())
+    callback.value(newComponent)
+  }
+  modal.value.close()
+}
+
+const components = ref([
+  {
+    type: "Grid",
+    name: "Grid",
+    props: {
+      enabled: true
+    },
+    items: []
+  },
+  {
+    type: "VirtualTable",
+    name: "Virtual Table",
+    props: {
+      enabled: true,
+      class: "bg-base-500 max-h-[80vh]"
+    }
+  },
+  {
+    type: "Metric",
+    name: "Metric",
+    props: {
+      enabled: true,
+      class: "bg-base-500"
+    }
+  }
+])
+
+defineExpose({
+  open
+})
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>