@mixd-id/web-scaffold 0.2.250801010 → 0.2.250801012

package/src/components/TreeViewItem.vue

@@ -1,453 +0,0 @@
-<template>
-	<div @mousemove="hoverMouseOver"
-			 @mouseout="hoverMouseOut">
-		<div ref="item"
-         :class="itemClass"
-				 @mousedown="mouseDown">
-
-      <button type="button" class="p-1 w-[18px]"
-              v-if="Array.isArray((item ?? {}).items) && item.items.length > 0"
-							@click="childCollapsed = !childCollapsed">
-				<svg v-if="!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>
-
-      <slot name="item" :item="item" :parent="parent" :depth="depth">
-        <div class="flex-1 flex px-3">
-          <slot :item="item" :parent="parent"></slot>
-        </div>
-
-        <div class="flex flex-row items-center">
-          <button v-if="item && Array.isArray(item.items)"
-                  type="button"
-                  class="p-1"
-                  @click="add">
-            <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"/></svg>
-          </button>
-
-          <button type="button" class="p-1" @click="duplicate">
-            <svg class="fill-text-300 hover:fill-primary" width="13" height="13" 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="M502.6 70.63l-61.25-61.25C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.0195 256C192 355.4 220.7 384 256 384h192c35.2 0 64-28.8 64-64V93.25C512 84.77 508.6 76.63 502.6 70.63zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16L239.1 64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1V320zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16L47.98 192.1c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64l.0098 256C.002 483.3 28.66 512 64 512h192c35.2 0 64-28.8 64-64v-32h-47.1L272 448z"/></svg>
-          </button>
-
-          <button type="button"
-                  class="p-1"
-                  @click="$emit('remove')">
-            <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>
-          </button>
-        </div>
-      </slot>
-
-		</div>
-    <div ref="container"
-         v-show="item && Array.isArray(item.items) && !childCollapsed" class="ml-6"
-         @mousemove.stop=""
-         @mouseout.stop="">
-      <TreeViewItem v-for="(subItem, index) in item.items"
-                    :item="subItem"
-                    :parent="item.items"
-                    :depth="depth + 1"
-                    :selected-item="selectedItem"
-                    @moveup="moveUp(subItem)"
-                    @movedown="moveDown(subItem)"
-                    @remove="item.items.splice(index, 1); $emit('change')"
-                    @add="(items) => $emit('add', items)"
-                    @duplicate="(parent, item) => $emit('duplicate', parent, item)"
-                    @change="$emit('change')">
-        <template #default="{ item, parent, depth }">
-          <slot :item="item" :parent="parent" :depth="depth"></slot>
-        </template>
-
-        <template #item="{ item, parent, depth }">
-          <slot name="item" :item="item" :parent="parent" :depth="depth"></slot>
-        </template>
-      </TreeViewItem>
-    </div>
-	</div>
-</template>
-
-<script>
-
-let dragged = null
-let guide1 = null
-
-export default{
-
-  name: 'TreeViewItem',
-
-	emits: [ 'add', 'change', 'duplicate', 'moveup', 'movedown', 'remove' ],
-
-	inject: [ 'toast', 'store' ],
-
-	props: {
-		item: Object,
-
-		parent: Array,
-
-		selectedItem: Object,
-
-		state: {
-			type: [ Number, String ],
-			default: 1
-		},
-
-    depth: Number
-	},
-
-	methods: {
-
-		moveDown(item){
-			const idx = this.item.items.indexOf(item)
-			if(idx < this.item.items.length - 1){
-				this.item.items.splice(idx + 1, 0, this.item.items.splice(idx, 1)[0])
-				this.$emit('change')
-			}
-		},
-
-		moveUp(item){
-			const idx = this.item.items.indexOf(item)
-			if(idx - 1 >= 0){
-				this.item.items.splice(idx - 1, 0, this.item.items.splice(idx, 1)[0])
-				this.$emit('change')
-			}
-		},
-
-		add(){
-			this.$emit('add', this.item.items)
-      this.childCollapsed = false
-		},
-
-    duplicate(){
-      this.$emit('duplicate', this.parent, this.item)
-    },
-
-		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){
-
-					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)
-		},
-
-		hoverMouseOver(e){
-			if(!dragged) return
-			if(this.item === dragged.item) 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
-		},
-
-		createGuide(){
-			const el = document.createElement('div')
-			el.classList.add(this.$style.guide)
-			return el
-		},
-
-	},
-
-	computed: {
-
-    componentStore(){
-      if(!this.store) return this.store
-
-      if(!this.store.components)
-        this.store.components = {}
-
-      if(!this.store.components.treeviewitem)
-        this.store.components.treeviewitem = {}
-
-      return this.store.components.treeviewitem
-    },
-
-    isSelected(){
-      return this.selectedItem === this.item
-    },
-
-		itemClass(){
-			return [
-				this.$style.item,
-				this.isSelected ? this.$style.active : '',
-				this.state === 3 ? this.$style.active : '',
-			]
-				.filter(_=>_)
-				.join(' ')
-		}
-
-	},
-
-	data(){
-		return {
-			childCollapsed: true,
-			hvm: null
-		}
-	},
-
-  mounted() {
-    if(this.componentStore){
-      this.childCollapsed = this.componentStore[this.item.uid] ?? this.childCollapsed
-    }
-  },
-
-  watch: {
-
-    item: {
-      handler(){
-        if(this.componentStore){
-          this.childCollapsed = this.componentStore[this.item.uid] ?? this.childCollapsed
-        }
-      },
-      deep: true
-    },
-
-    childCollapsed(to){
-      if(this.item.uid && this.componentStore){
-        this.componentStore[this.item.uid] = to
-
-        const keys = Object.keys(this.componentStore)
-        if(keys.length > 100){
-          const removedKeys = keys.slice(0, keys.length - 100)
-          for(let i in removedKeys){
-            delete this.componentStore[removedKeys[i]]
-          }
-        }
-      }
-      else{
-        console.warn('[TreeviewItem] not saving collapsed state', {
-          uid: this.item.uid,
-          componentStore: this.componentStore,
-        })
-      }
-    },
-
-    isSelected(to){
-      if(to){
-
-        // Expand all parents
-        let parent = this.$parent
-        while('childCollapsed' in parent){
-          parent.childCollapsed = false
-          parent = parent.$parent
-        }
-
-        // Scroll into view
-        this.$nextTick(() => {
-          let parentContainer = this.$el.parentNode
-          do{
-            if([ 'auto' ].includes(window.getComputedStyle(parentContainer).overflowY)){
-              break
-            }
-            parentContainer = parentContainer.parentNode
-          }
-          while(parentContainer && parentContainer.tagName !== 'BODY')
-
-          let isInViewPort = this.$el.offsetTop > parentContainer.scrollTop &&
-              this.$el.offsetTop < (parentContainer.scrollTop + parentContainer.clientHeight)
-
-          if(!isInViewPort){
-            this.$el.scrollIntoView({
-              behavior: 'smooth',
-            })
-          }
-        })
-
-      }
-    }
-
-  },
-
-}
-
-</script>
-
-<style module>
-
-.item{
-	@apply bg-base-300 hover:bg-text-50 flex flex-row py-1 items-center rounded-lg mb-1;
-	@apply border-[1px] border-transparent cursor-pointer;
-}
-.item.active{
-	@apply border-primary;
-}
-
-.itemMouseOver{
-	@apply !bg-primary;
-}
-
-.guide{
-	@apply h-[1px] bg-primary rounded-lg;
-}
-
-.item.dragInto{
-  @apply border-[1px] border-primary;
-}
-
-</style>