@mixd-id/web-scaffold 0.1.230406311 → 0.1.230406313

package/src/widgets/WebPageBuilder4/TreeViewItem.vue

@@ -0,0 +1,298 @@
+<template>
+	<div :class="$style.comp">
+    <div ref="item"
+         :class="`${$style.item}${item.uid === value ? ' ' + $style.active : ''}`"
+         @click="$emit('change', item.uid)"
+         @mousedown="mouseDown"
+         @mousemove="hoverMouseOver"
+         @mouseout="hoverMouseOut">
+      <button type="button" class="p-1 px-2 w-[18px]"
+              v-if="Array.isArray((item ?? {}).items) && item.items.length > 0"
+              @click="currentConfig.childCollapsed = !currentConfig.childCollapsed">
+        <svg v-if="!currentConfig.childCollapsed" width="14" height="14" class="fill-text-300 pointer-events-none" 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>
+        <svg v-else width="14" height="14" class="fill-text-300 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>
+      </button>
+      <div class="flex-1 flex">
+        <slot name="item" :item="item" :parent="parent"></slot>
+      </div>
+    </div>
+
+    <div v-if="item.isContainer && !currentConfig.childCollapsed && Array.isArray(item.items) && item.items.length > 0"
+         ref="container"
+         class="ml-6 flex flex-col gap-1">
+      <TreeViewItem v-for="subItem in item.items"
+                    :parent="item.items"
+                    :config="config"
+                    @change="(uid) => $emit('change', uid)"
+                    :value="value"
+                    :item="subItem">
+        <template #item="{ item, parent }">
+          <slot name="item" :item="item" :parent="parent"></slot>
+        </template>
+      </TreeViewItem>
+    </div>
+	</div>
+</template>
+
+<script>
+
+let dragged = null
+let guide1 = null
+
+export default{
+  components: {
+    TreeViewItem: () => import('./TreeViewItem.vue')
+  },
+
+  emits: [ 'change' ],
+
+  name: 'TreeViewItem',
+
+  props: {
+    item: {
+      type: Object,
+      required: true,
+      validator(v){
+        return 'uid' in v
+      }
+    },
+    parent: Array,
+    config: Object,
+    value: String,
+  },
+
+  computed: {
+
+    currentConfig(){
+      if(!this.config[this.item.uid])
+        this.config[this.item.uid] = {}
+      return this.config[this.item.uid]
+    }
+
+  },
+
+  methods: {
+
+    createGuide(){
+      const el = document.createElement('div')
+      el.classList.add(this.$style.guide)
+      return el
+    },
+
+    hoverMouseOver(e){
+      if(!dragged) return
+      console.log(this.item.uid, dragged.item.uid)
+      if(this.item.uid === dragged.item.uid) return
+
+      // Drag to own child is not allowed
+      if(dragged.item.items && dragged.item.items.indexOf(this.item) > -1){
+        return
+      }
+
+      if(!guide1){
+        guide1 = this.createGuide()
+      }
+
+      if(dragged.target !== this.item){
+        const rect = this.$refs.item.getBoundingClientRect()
+        const hasChildItems = Array.isArray(this.item.items)
+
+        dragged.targetArea = hasChildItems ? [
+          Math.round(rect.y + (rect.height * (2 / 3))),
+          Math.round(rect.y + (rect.height * (1 / 3))),
+          0
+        ] : [
+          Math.round(rect.y + (rect.height * (1/2))),
+          0
+        ]
+        //dragged.centerY = rect.y + (rect.height / 2)
+      }
+
+      dragged.target = this.item
+      dragged.targetParent = this.parent
+
+      for(let i in dragged.targetArea){
+        if(e.clientY > dragged.targetArea[i]){
+          dragged.dragArea = dragged.targetArea.length - i
+          break
+        }
+      }
+      if(dragged.targetArea.length === 3){
+        dragged.dragArea = dragged.dragArea === 2 ? 3 :
+            (dragged.dragArea === 3 ? 2 : 1)
+      }
+
+      this.$refs.item.classList.remove(this.$style.dragInto)
+      if(dragged.dragArea === 1){
+        this.$el.insertBefore(guide1, this.$el.firstElementChild)
+      }
+      else if(dragged.dragArea === 2){
+        this.$el.insertBefore(guide1, null)
+      }
+      else if(dragged.dragArea === 3){
+
+        // Drag to own parent is not allowed
+        if(this.item.items && this.item.items.indexOf(dragged.item) > -1){
+          return
+        }
+
+        if(guide1.parentNode)
+          guide1.parentNode.removeChild(guide1)
+        this.$refs.item.classList.add(this.$style.dragInto)
+        dragged.targetParent = this.item.items
+        dragged.refItem = this.$refs.item
+      }
+
+    },
+
+    hoverMouseOut(e){
+      if(!dragged) return
+
+      delete dragged.target
+      delete dragged.targetParent
+    },
+
+    mouseDown(e){
+      if(!this.$el || this.$el.nodeType !== 1) return
+
+      e.preventDefault()
+
+      const startX = e.clientX
+      const startY = e.clientY
+      const rect = this.$el.getBoundingClientRect()
+
+      dragged = {
+        item: this.item,
+        parent: this.parent,
+        startY: e.clientY
+      }
+
+      const mouseMove = (e) => {
+        const distanceX = e.clientX - startX
+        const distanceY = e.clientY - startY
+
+        if(!dragged.cloned && Math.abs(distanceY) > 10){
+          const cloned = this.$el.cloneNode(true)
+          cloned.style.position = 'absolute'
+          cloned.style.left = rect.x + "px"
+          cloned.style.top = (e.clientY - 10) + "px"
+          cloned.style.width = this.$el.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 = (rect.x + distanceX) + "px"
+          dragged.cloned.style.top = (e.clientY - 10) + "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(dragged && dragged.parent && dragged.targetParent){
+
+          console.log(dragged, dragged.parent, dragged.targetParent)
+
+          const targetIdx = dragged.targetParent.indexOf(dragged.target)
+          const moveDirection = e.clientY < dragged.startY ? -1 : 1
+          const sameParent = dragged.parent === dragged.targetParent
+
+          let destIdx = undefined
+
+          if(dragged.dragArea === 1){
+            if(sameParent){
+              if(moveDirection === -1){
+                destIdx = targetIdx
+              }
+              else{
+                destIdx = targetIdx - 1
+              }
+            }
+            else{
+              destIdx = targetIdx
+            }
+          }
+          else if(dragged.dragArea === 2){
+            if(sameParent){
+              if(moveDirection === -1){
+                destIdx = targetIdx + 1
+              }
+              else{
+                destIdx = targetIdx
+              }
+            }
+            else{
+              if(moveDirection === -1){
+                destIdx = targetIdx + 1
+              }
+              else{
+                destIdx = targetIdx + 1
+              }
+            }
+          }
+
+          if(destIdx !== undefined){
+            dragged.targetParent.splice(destIdx, 0,
+                dragged.parent.splice(dragged.parent.indexOf(dragged.item), 1)[0])
+            this.$emit('change')
+          }
+          else if(dragged.dragArea === 3){
+            dragged.targetParent.push(dragged.parent.splice(dragged.parent.indexOf(dragged.item), 1)[0])
+            this.$emit('change')
+          }
+        }
+
+        if(guide1 && guide1.parentNode){
+          guide1.parentNode.removeChild(guide1)
+        }
+
+        document.querySelectorAll(`.${this.$style.dragInto}`).forEach((el) => {
+          el.classList.remove(this.$style.dragInto)
+        })
+
+        dragged = null
+      }
+
+      window.addEventListener('mousemove', mouseMove)
+      window.addEventListener('mouseup', mouseUp)
+    },
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-col gap-1;
+}
+
+.guide{
+  @apply h-[1px] bg-primary rounded-lg;
+}
+
+.item{
+  @apply flex flex-row items-center;
+  @apply bg-base-500 rounded-lg;
+}
+.item.active{
+  @apply bg-text-50;
+}
+.item.dragInto{
+  @apply border-[1px] border-primary;
+}
+
+</style>

package/src/widgets/WebPageBuilder4/WebPageComponentSelector.vue

@@ -0,0 +1,141 @@
+<template>
+	<Modal :state="state"
+         :hash="hash"
+         ref="modal"
+         width="520"
+         height="520"
+         @show="$refs.search.select()">
+	  <template v-slot:head>
+      <div class="relative p-6 pb-0 flex flex-col gap-4">
+	      <h3>Select Component</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>
+          <Textbox ref="search" v-model="search" :clearable="true"
+                   @clear="search = null"
+                   @keyup.enter="quickSelect">
+            <template #start>
+              <svg width="14" height="14" class="ml-3 fill-text-300" 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="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/></svg>
+            </template>
+          </Textbox>
+        </div>
+	    </div>
+	  </template>
+	  <div class="flex-1 p-6">
+
+      <div class="grid grid-cols-2 gap-2">
+
+        <button v-for="component in viewedComponents"
+                type="button"
+                class="flex flex-row gap-3 items-center cursor-pointer p-1 rounded-lg"
+                @click="select(component)">
+          <div class="w-[32px] h-[32px] rounded-lg bg-text-100"></div>
+          <div>
+            <strong>{{ component.type }}</strong>
+          </div>
+        </button>
+
+      </div>
+
+	  </div>
+	</Modal>
+</template>
+
+<script>
+
+import md5 from "md5";
+
+export default{
+
+  computed: {
+
+    viewedComponents(){
+      return this.components.filter(component => {
+        return this.search ?
+            component.type.toLowerCase().includes(this.search.toLowerCase()) :
+            true
+      })
+    }
+
+  },
+
+  data(){
+    return {
+      callback: null,
+      components: [
+        { type:'Button', name:'Button' },
+        { type:'Carousel', name:'Carousel' },
+        { type:'Image', name:'Image' },
+        { type:'Text', name:'Text' },
+
+        { type:'Flex', name:'Flex', isContainer:true },
+        { type:'Grid', name:'Grid', isContainer:true },
+      ],
+      instance: null,
+      search: null
+    }
+  },
+
+  emits: [ 'select' ],
+
+	inject: [ 'socketEmit2' ],
+
+  methods: {
+
+    open(callback){
+      this.callback = callback
+      this.$refs.modal.open()
+    },
+
+    close(){
+      this.$refs.modal.close()
+    },
+
+    select(component){
+      const item = JSON.parse(JSON.stringify(component))
+      if(!item.props) item.props = {}
+      item.uid = md5(JSON.stringify(component) + new Date().getTime())
+
+      if(!('enabled' in item.props))
+        item.props.enabled = true
+
+      if(item.isContainer && !Array.isArray(item.items))
+        item.items = []
+
+      if(typeof this.callback === 'function')
+        this.callback(item)
+      this.$emit('select', item)
+      this.close()
+    },
+
+    quickSelect(){
+      if(this.viewedComponents.length === 1)
+        this.select(this.viewedComponents[0])
+    }
+
+  },
+
+  name: 'WebPageComponentSelector',
+
+  props: {
+    state: Boolean,
+    hash: String
+  },
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/WebPageBuilder4/WebPagePropertySelector.vue

@@ -0,0 +1,172 @@
+<template>
+	<Modal :state="state"
+         :hash="hash"
+         ref="modal"
+         width="540"
+         height="540"
+         @show="$refs.search.select()"
+         :dismissable="dismissable">
+	  <template v-slot:head>
+	    <div class="relative p-6 pb-0 flex flex-col gap-4">
+	      <h3>{{ $t('Select Property') }}</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>
+          <Textbox ref="search" v-model="search" :clearable="true" @clear="search = null">
+            <template #start>
+              <svg width="14" height="14" class="ml-3 fill-text-300" 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="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/></svg>
+            </template>
+          </Textbox>
+        </div>
+	    </div>
+	  </template>
+	  <template v-slot:foot>
+	    <div class="p-6">
+        <Button class="w-[100px]" @click="apply()">
+          {{ $t('OK') }}
+        </Button>
+	    </div>
+	  </template>
+	  <div class="flex-1 p-6 flex flex-col gap-4">
+
+      <div class="grid grid-cols-2 gap-4">
+        <div v-for="(items, groupName) in grouped" class="mt-4">
+          <strong>{{ groupName }}</strong>
+
+          <div class="ml-0 flex flex-col gap-3 mt-3">
+            <div v-for="subItem in items"
+                 class="flex flex-row items-center">
+              <Checkbox name="selected"
+                        :value="subItem.name"
+                        v-model="selected" />
+              <label @click="applyOne(subItem.name)">
+                {{ $t(subItem.text) }}
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+
+	  </div>
+	</Modal>
+</template>
+
+<script>
+
+import Modal from "../../components/Modal.vue"
+
+export default{
+
+  components: { Modal },
+
+  computed: {
+
+    grouped(){
+
+      const groups = {}
+
+      for(let propName in this.properties){
+        const prop = this.properties[propName]
+
+        if(this.search){
+          if(!prop.text.toLowerCase().includes(this.search.toLowerCase()))
+            continue
+        }
+
+        let groupName = prop.group?.length > 0 ? prop.group : 'General'
+        if(!groups[groupName])
+          groups[groupName] = []
+
+        groups[groupName].push({
+          ...prop,
+          name: propName
+        })
+      }
+
+      return groups
+    }
+
+  },
+
+  data(){
+    return {
+      selected: [],
+      callback: null,
+      search: null
+    }
+  },
+
+  emits: [ 'apply' ],
+
+	inject: [ 'socketEmit2', 'viewTypes' ],
+
+  methods: {
+
+    applyOne(selected){
+      this.selected.push(selected)
+      this.apply()
+    },
+
+    apply(){
+
+      for(let propName in this.value){
+        if(!this.selected.includes(propName) && propName in this.properties)
+          delete this.value[propName]
+      }
+
+      for(let propName of this.selected){
+        if(!(propName in this.value))
+          this.value[propName] = this.viewTypes.map(_ => '')
+      }
+
+      this.close()
+    },
+
+    open(callback){
+      this.callback = callback
+      this.selected = Object.keys(this.value).filter(_ => _ in this.properties)
+      this.$refs.modal.open()
+    },
+
+    close(){
+      this.$refs.modal.close()
+    }
+
+  },
+
+  props: {
+
+    dismissable: {
+      type: Boolean,
+      default: true
+    },
+
+    hash: String,
+
+    state: Boolean,
+
+    properties: Object,
+
+    value: Object,
+
+  },
+
+
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>