@mixd-id/web-scaffold 0.1.230406358 → 0.1.230406360

package/package.json

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

package/src/components/Datepicker.vue

@@ -266,7 +266,7 @@ export default{
 .datepicker {
 	@apply min-h-[var(--h-cp)];
 	@apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
-  @apply border-[1px] border-text-200;
+  @apply border-[1px] border-text-200 bg-base-500 rounded-lg;
 	@apply cursor-pointer;
 }
 .datepicker:not(.readonly){
@@ -290,12 +290,18 @@ export default{
 .button{
 	@apply rounded-full aspect-square;
 }
+.button:hover{
+  @apply bg-primary-200;
+}
+.button.selected{
+  @apply bg-primary text-white;
+}
 .button.otherMonth{
 	@apply text-text-300;
 }
 
 .arrow{
-	@apply absolute right-0 pointer-events-none bg-base-50 px-2;
+	@apply absolute right-0 pointer-events-none px-2;
 	top: 50%;
 	transform: translate3d(0, -50%, 0);
 }
@@ -303,10 +309,6 @@ export default{
 	@apply block fill-text-300;
 }
 
-.selected{
-	@apply bg-primary;
-}
-
 .mode-calendar{
   @apply p-2 h-auto;
 }

package/src/components/List.vue

@@ -368,7 +368,6 @@ export default{
           itemsPerPage: this.data.itemsPerPage,
         })
             .then(data => {
-              console.log(data)
               generatePivotColumns(this.preset, data.items)
               generateTotalColumns(this.preset, data.items)
               this.loadEnums(data.items)
@@ -388,8 +387,6 @@ export default{
           ((this.data ?? {}).hasNext !== false) &&
           !(this.preset.pivot ?? {}).enabled) {
 
-        //console.log('last id', this.dataItems[this.dataItems.length - 1].id)
-
         this.readyState = 4
         this.socket.send(this.src, {
           ...this.preset,
@@ -397,7 +394,6 @@ export default{
           afterItem: this.data.items[this.data.items.length - 1],
         })
             .then(data => {
-              //console.log('next id', data.items[0].id)
 
               this.data.items.push(...data.items)
               this.loadEnums(data.items)
@@ -505,10 +501,10 @@ export default{
         ],
         pivot: null
       })
-        .then((res) => {
-          this.data.extItems = res.items
-        })
-        .finally(_ => this.readyState = 1)
+          .then((res) => {
+            this.data.extItems = res.items
+          })
+          .finally(_ => this.readyState = 1)
     },
 
     loadExtNext(){
@@ -600,12 +596,12 @@ export default{
             ...this.preset,
             [key]: items.map(item => item[key])
           })
-            .then(({ items:nextItems }) => {
-              nextItems.forEach(item => this.$util.unshift(this.data.items, item, { highlight: true }))
+              .then(({ items:nextItems }) => {
+                nextItems.forEach(item => this.$util.unshift(this.data.items, item, { highlight: true }))
 
-              const destroyedItems = items.filter(_ => !nextItems.find(i => i[key] === _[key]))
-              this.$util.remove(this.data.items, destroyedItems)
-            })
+                const destroyedItems = items.filter(_ => !nextItems.find(i => i[key] === _[key]))
+                this.$util.remove(this.data.items, destroyedItems)
+              })
           break
       }
 

package/src/widgets/UserActionBuilder/UserActionCondition.vue

@@ -0,0 +1,96 @@
+<template>
+	<Modal ref="modal"
+         width="380"
+         height="420">
+	  <template v-slot:head>
+	    <div class="relative p-6">
+	      <h3>Condition</h3>
+	      <div class="absolute top-0 right-0 p-2">
+	        <button type="button" class="p-2" @click="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-6">
+        <Button class="w-[90px]" @click="apply">OK</Button>
+	    </div>
+	  </template>
+	  <div class="flex-1 p-6">
+
+      <div class="flex flex-col gap-6">
+
+        <div>
+          <label>Key</label>
+          <Dropdown v-model="instance.key" class="mt-1">
+            <option value="text">Text</option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <label>Operator</label>
+          <Dropdown v-model="instance.op" class="mt-1">
+            <option value="=">Equal</option>
+            <option value="intent">Intent</option>
+            <option value="extractVariables">Extract Information</option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <label>Value</label>
+          <Textarea v-model="instance.value" rows="3" class="mt-1"/>
+        </div>
+
+      </div>
+
+	  </div>
+	</Modal>
+</template>
+
+<script>
+
+export default{
+
+	inject: [ 'socketEmit2' ],
+
+	data(){
+		return {
+      callback: null,
+      instance: null,
+		}
+	},
+
+	methods: {
+
+    apply(){
+      if(typeof this.callback === 'function')
+        this.callback(this.instance)
+      this.close()
+    },
+
+		open(instance, callback){
+      this.instance = instance
+      this.callback = callback
+      this.$refs.modal.open()
+		},
+
+		close(){
+      this.$refs.modal.close()
+		},
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/UserActionBuilder/UserActionConsole.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="h-[200px] panel-400 border-[1px] border-text-50 flex flex-col relative">
+
+    <div class="flex-1 overflow-y-auto flex flex-col-reverse px-3 gap-2">
+      <div v-for="_message in reversedMessages"
+           class="p-1 bg-text-50 self-start"
+           :class="_message.direction === 2 ? 'ml-5' : ''">
+        {{ _message.body }}
+      </div>
+    </div>
+
+    <div class="absolute top-0 right-0 p-3">
+      <button type="button" class="text-primary" @click="clear">Clear</button>
+    </div>
+
+    <div class="p-2 flex flex-row gap-2">
+      <Textbox v-model="message.body" class="flex-1" />
+      <Button class="px-4" @click="send">Send</Button>
+      <Button class="px-3" variant="secondary" @click="reset">Reset</Button>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default{
+
+  emits: [ 'test-message', 'test-reset' ],
+
+  computed: {
+
+    reversedMessages(){
+      return this.messages.slice().reverse()
+    }
+
+  },
+
+  data(){
+    return {
+      message: {},
+      messages: []
+    }
+  },
+
+  methods: {
+
+    addMessage(message){
+      this.messages.push(message)
+    },
+
+    clear(){
+      this.messages = []
+    },
+
+    reset(){
+      this.$emit('test-reset')
+    },
+
+    send(){
+      this.$emit('test-message', this.message)
+      this.messages.push(this.message)
+      this.message = {}
+    },
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/UserActionBuilder/UserActionItem.vue

@@ -0,0 +1,270 @@
+<template>
+	<div v-if="item"
+       class="flex flex-row items-start relative">
+
+    <div ref="outer" class="flex-1 flex flex-row items-start">
+      <div class="flex flex-col self-stretch" :class="debug ? '' : ''">
+
+        <div class="flex flex-row items-center">
+          <div class="bg-primary-300 h-[1px]" :style="{ width:`${size[2]}px` }"></div>
+
+          <div :style="{ width:`${size[0]}px` }"
+               ref="item"
+               @mousedown="mouseDown"
+               @mouseover="hoverMouseOver">
+            <div class="rounded-xl p-3 border-[1px] flex relative overflow-hidden"
+                 :class="isSelected ? 'border-primary bg-base-500' : 'border-primary-300 bg-base-400'"
+                 @click="$emit('select', item)" :style="{  }">
+              <div class="flex-1 flex flex-row">
+                <div class="flex-1 cursor-default whitespace-nowrap overflow-hidden text-ellipsis">
+                  {{ item.name }}
+                </div>
+                <button v-if="isSelected && removable" class="text-primary" type="button" @click="$emit('remove')">
+                  <svg width="16" height="16" class="fill-text-200 hover:fill-red-600" 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 256C397.4 512 512 397.4 512 256S397.4 0 256 0zM336.1 303c9.375 9.375 9.375 24.56 0 33.94c-9.381 9.381-24.56 9.373-33.94 0L256 289.9l-47.03 47.03c-9.381 9.381-24.56 9.373-33.94 0c-9.375-9.375-9.375-24.56 0-33.94l47.03-47.03L175 208.1c-9.375-9.375-9.375-24.56 0-33.94s24.56-9.375 33.94 0L256 222.1l47.03-47.03c9.375-9.375 24.56-9.375 33.94 0s9.375 24.56 0 33.94l-47.03 47.03L336.1 303z"/></svg>
+                </button>
+              </div>
+
+              <div v-if="item.isFallback" :class="$style.isFallback"></div>
+            </div>
+          </div>
+
+          <div v-if="hasChildren && (item.items ?? []).length < 1 && !item.isFallback"
+               class="flex flex-row items-center"
+               :style="{ width:`${size[2] * 1.2}px` }">
+            <div class="flex-1 bg-primary-300 h-[1px]"></div>
+            <button type="button"
+                    @click="addItem(item)">
+              <svg width="16" height="16" class="fill-primary-600" 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 256C397.4 512 512 397.4 512 256S397.4 0 256 0zM352 280H280V352c0 13.2-10.8 24-23.1 24C242.8 376 232 365.2 232 352V280H160C146.8 280 136 269.2 136 256c0-13.2 10.8-24 24-24H232V160c0-13.2 10.8-24 24-24C269.2 136 280 146.8 280 160v72h72C365.2 232 376 242.8 376 256C376 269.2 365.2 280 352 280z"/></svg>
+            </button>
+          </div>
+          <div v-else-if="hasChildren && !item.isFallback" class="flex flex-row items-center" :style="{ width:`${size[2]}px` }">
+            <div class="flex-1 bg-primary-300 h-[1px]"></div>
+          </div>
+        </div>
+
+        <div class="flex-1 flex flex-row items-start">
+          <div :style="{ width:`${size[2]}px` }"></div>
+
+          <div v-if="useAdd" class="self-stretch flex flex-col items-center" :style="{ width:`${size[0]}px`, height:`${size[2] * 1.2}px` }">
+            <div class="flex-1 w-[1px] bg-primary-300"></div>
+            <button type="button" v-if="useAdd" @click="$emit('add')">
+              <svg width="16" height="16" class="fill-primary-600" 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 256C397.4 512 512 397.4 512 256S397.4 0 256 0zM352 280H280V352c0 13.2-10.8 24-23.1 24C242.8 376 232 365.2 232 352V280H160C146.8 280 136 269.2 136 256c0-13.2 10.8-24 24-24H232V160c0-13.2 10.8-24 24-24C269.2 136 280 146.8 280 160v72h72C365.2 232 376 242.8 376 256C376 269.2 365.2 280 352 280z"/></svg>
+            </button>
+            <div class="flex-1"></div>
+          </div>
+          <div v-else class="flex flex-col items-center" :style="{ width:`${size[0]}px`, height:`${size[2]}px` }">
+
+          </div>
+
+          <div :style="{ width:`${size[2]}px` }"></div>
+        </div>
+
+      </div>
+
+      <div v-if="hasChildren" class="flex flex-col relative" :class="debug ? '' : ''">
+
+        <UserActionItem v-for="(subItem, idx) in item.items"
+                        :config="config"
+                        :item="subItem"
+                        :level="level + 1"
+                        :index="idx"
+                        :parent="item.items"
+                        :isLast="idx === item.items.length - 1"
+                        @select="(item) => $emit('select', item)"
+                        @remove="item.items.splice(idx, 1)"
+                        :useAdd="idx === (item.items ?? []).length - 1"
+                        @add="addItem(item)" />
+      </div>
+    </div>
+
+    <div v-if="level > 0 && index > 0" class="absolute w-[1px] bg-primary-300" :style="vBorder0"></div>
+    <div v-if="level > 0 && !isLast" class="absolute w-[1px] bg-primary-300" :style="vBorder"></div>
+
+	</div>
+</template>
+
+<script>
+
+import md5 from "md5";
+
+let dragged = null
+let guide1 = null
+
+export default{
+
+  computed: {
+
+    debug(){
+      return this.item.name === 'Tea'
+    },
+
+    isSelected(){
+      return this.config.selectedUid === this.item.uid
+    },
+
+    vBorder(){
+      let bottom = `${(this.size[2] * 1.2) + (this.size[1] * .5)}px`
+
+      return {
+        top:'20px',
+        bottom: 0
+      }
+    },
+
+    vBorder0(){
+      return {
+        top: 0,
+        height: '20px'
+      }
+    }
+
+  },
+
+  emits: [ 'add', 'remove', 'select' ],
+
+  methods: {
+
+    addItem(item){
+      if(!Array.isArray(item.items))
+        item.items = []
+
+      const uid = md5(Date.now())
+
+      item.items.push({
+        name: 'Untitled',
+        parentId: item.id,
+        uid,
+        enabled: true
+      })
+
+      this.config.selectedUid = uid
+    },
+
+    hoverMouseOver(e){
+      if(!dragged) return
+
+      const from = this.parent.indexOf(dragged.item)
+      const to = this.parent.indexOf(this.item)
+      this.parent.splice(to, 0, this.parent.splice(from, 1)[0]);
+    },
+
+    mouseDown(e){
+      if(!this.$el || this.$el.nodeType !== 1) return
+
+      e.preventDefault()
+
+      const startY = e.clientY
+
+      dragged = {
+        item: this.item,
+        parent: this.parent,
+        startY: e.clientY,
+        index: this.parent?.indexOf(this.item)
+      }
+
+      const mouseMove = (e) => {
+        const distanceY = e.clientY - startY
+
+        if(!dragged.cloned && Math.abs(distanceY) > 10){
+          const cloned = this.$refs.outer.cloneNode(true)
+          cloned.style.position = 'fixed'
+          cloned.style.width = this.$refs.item.clientWidth + "px"
+          cloned.style.pointerEvents = 'none'
+          cloned.style.opacity = '0.5'
+          document.body.appendChild(cloned)
+
+          dragged.cloned = cloned
+        }
+
+        if(dragged.cloned){
+          dragged.cloned.style.left = (e.clientX + 3) + "px"
+          dragged.cloned.style.top = (e.clientY + 3) + "px"
+        }
+
+        dragged.clientY = e.clientY
+      }
+
+      const mouseUp = (e) => {
+        if(dragged?.cloned){
+          document.body.removeChild(dragged.cloned)
+        }
+
+        window.removeEventListener('mousemove', mouseMove)
+        window.removeEventListener('mouseup', mouseUp)
+
+        if(guide1 && guide1.parentNode){
+          guide1.parentNode.removeChild(guide1)
+        }
+
+        dragged = null
+      }
+
+      const keyUp = (e) => {
+        if(e.keyCode === 27){
+          if(dragged && this.parent){
+            const from = this.parent.indexOf(this.item)
+            const to = this.parent.indexOf(dragged.item)
+            this.parent.splice(to, 0, this.parent.splice(from, 1)[0]);
+          }
+
+          mouseUp(e)
+        }
+      }
+
+      window.addEventListener('mousemove', mouseMove)
+      window.addEventListener('mouseup', mouseUp)
+      window.addEventListener('keyup', keyUp)
+    },
+
+  },
+
+  props: {
+
+    config: Object,
+
+    index: {
+      type: Number,
+      default: 0
+    },
+
+    isLast: Boolean,
+
+    item: Object,
+
+    level: {
+      type: Number,
+      default: 0
+    },
+
+    useAdd: undefined,
+
+    parent: Array,
+
+    removable: {
+      type: Boolean,
+      default: true
+    },
+
+    size: {
+      type: Array,
+      default: [ 160, 60, 24 ]
+    },
+
+    hasChildren: {
+      type: Boolean,
+      default: true
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.isFallback{
+  @apply absolute bottom-0 left-0 right-0 h-[4px] bg-primary;
+}
+
+</style>

package/src/widgets/UserActionBuilder/UserActionOutput.vue

@@ -0,0 +1,152 @@
+<template>
+	<Modal :state="state"
+         :hash="hash"
+         ref="modal"
+         :width="width"
+         :height="height">
+
+	  <template v-slot:head>
+	    <div class="relative p-6">
+	      <h3 v-if="!instance.type">{{ $t('Select Type') }}</h3>
+	      <h3 v-else>{{ $t(instance.text) }}</h3>
+	      <div class="absolute top-0 right-0 p-2">
+	        <button type="button" class="p-2" @click="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 v-if="instance.type" class="p-6 flex flex-row gap-4 items-end">
+        <div class="flex-1">
+          <Button class="w-[100px]" :state="canApply ? 1 : -1" @click="apply">
+            {{ $t('OK') }}
+          </Button>
+        </div>
+        <div class="flex flex-row gap-2 items-center">
+          <Switch v-model="instance.params.passthrough" />
+          <label>Passthrough</label>
+        </div>
+	    </div>
+	  </template>
+
+	  <div class="flex-1">
+
+      <div v-if="!instance.type" class="flex-1">
+
+        <div class="flex flex-col divide-text-50 border-t-[1px] border-b-[1px] border-text-50">
+          <button v-for="output in outputs"
+                  type="button"
+                  class="p-3 px-6 text-left"
+                  @click="Object.assign(instance, output)">
+            {{ output.text }}
+          </button>
+        </div>
+
+      </div>
+
+      <div v-else>
+        <component :is="componentName" :output="instance"></component>
+      </div>
+
+    </div>
+
+	</Modal>
+</template>
+
+<script>
+
+import Modal from "../../components/Modal.vue"
+import {capitalize} from "../../utils/helpers.mjs";
+import {defineAsyncComponent} from "vue";
+
+export default{
+
+  components: {
+    Modal,
+    UserActionOutputReply: defineAsyncComponent(() => import('./UserActionOutputReply.vue')),
+  },
+
+  computed: {
+
+    canApply(){
+      return this.instance?.type
+    },
+
+    componentName(){
+      return this.instance._component?.name ?
+          this.instance._component?.name :
+          `UserActionOutput${capitalize(this.instance?.type)}`
+    },
+
+    height(){
+      return this.instance?.type ? 480 : 300
+    },
+
+    width(){
+      return this.instance?.type ? 420 : 300
+    },
+
+  },
+
+  emits: [ 'apply' ],
+
+	inject: [ 'socketEmit2' ],
+
+  props: {
+    state: Boolean,
+    hash: String,
+
+    outputs: Array
+  },
+
+	data(){
+		return {
+      id: null,
+      instance: null,
+		}
+	},
+
+	methods: {
+
+    apply(){
+      this.close()
+      this.$emit('apply', this.instance, this.id)
+    },
+
+		create(){
+      this.instance = {
+        params: {
+          passthrough: true
+        }
+      }
+      this.id = null
+      this.$refs.modal.open()
+		},
+
+		open(instance, id){
+      this.instance = instance
+      this.id = id
+      this.$refs.modal.open()
+		},
+
+		close(){
+      this.$refs.modal.close()
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>