@mixd-id/web-scaffold 0.1.230406169 → 0.1.230406171

package/package.json

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

package/src/components/Button.vue

@@ -1,8 +1,6 @@
 <template>
 	<button :class="compClass" :disabled="isDisabled" @click="onClick">
-		<div :class="itemClass">
-			<slot>{{ text }}</slot>
-		</div>
+    <slot>{{ text }}</slot>
 		<div v-if="isLoading" :class="$style.loadingPane">
 			<svg :class="$style.spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
 				<circle :class="$style.svgBg" cx="12" cy="12" r="10" stroke-width="4"></circle>

package/src/components/Modal.vue

@@ -3,7 +3,7 @@
     <Teleport to=".bW9k">
       <Transition :name="transition"
 									appear
-									@after-leave="onAfterLeave"
+									@after-leave="onAfterLeave(); $emit('hide')"
 									@after-enter="$emit('show')">
         <div v-if="currentState"
              ref="modal"
@@ -14,7 +14,7 @@
             <div class="modal-head">
               <slot name="head" :context="context"></slot>
             </div>
-            <div :class="modalBodyClass">
+            <div :class="$style.modalBody">
               <slot :context="context"></slot>
             </div>
             <div class="modal-foot">
@@ -26,7 +26,7 @@
 						<div class="modal-head">
 							<slot name="head" :context="context"></slot>
 						</div>
-						<div :class="modalBodyClass">
+						<div :class="$style.modalBody">
 							<slot :context="context"></slot>
 						</div>
 						<div class="modal-foot">
@@ -66,21 +66,30 @@ export default{
 	emits: [ 'submit', 'dismiss', 'show', 'hide' ],
 
   props:{
-		bodyClass:{ type: String, default: '' },
     class:{ type: String, default: '' },
+
 		dismissable: undefined,
-		height: String,
-		position: {
+
+    hash: String,
+
+    height: String,
+
+    position: {
 			type: String,
 			default: 'bottom'
 		},
-		state: [ Number, Boolean, String ],
-		transition: { type: String, default: 'slideup' },
-		width: String,
-		useForm: {
+
+    state: [ Number, Boolean, String ],
+
+    transition: { type: String, default: 'slideup' },
+
+    width: String,
+
+    useForm: {
 			type: Boolean,
 			default: false
 		},
+
     mode: 'v-if', // v-if or v-show
   },
 
@@ -98,20 +107,15 @@ export default{
 		onAfterLeave(){
 			let overlay = document.querySelector('.bW9k')
 			if(overlay){
-
 				let hasTrueState = false
-
 				for(let i = 0 ; i < overlay.children.length ; i++){
 					if(overlay.children[i].getAttribute('data-state') === '1'){
 						hasTrueState = true
 					}
 				}
-
 				if(!hasTrueState){
 					overlay.classList.remove('bW9l')
 				}
-
-				this.$emit('hide')
 			}
 		},
 
@@ -134,32 +138,25 @@ export default{
 					overlay.classList.add('bW9l')
 				}
 
-        this.$emit('show')
-
 				registerModal(this)
+
+        if(this.mode === 'v-show'){
+          this.$emit('show')
+        }
 			}
 			else{
-        this.$emit('hide')
-
-        if(this.mode === 'v-show')
-          this.$nextTick(() => this.onAfterLeave())
-
+        this.$nextTick(() => this.onAfterLeave())
 				unRegisterModal(this)
+
+        if(this.mode === 'v-show') {
+          this.$emit('hide')
+        }
 			}
 		}
 	},
 
   computed:{
 
-    modalBodyClass(){
-      return [
-        this.$style.modalBody,
-				this.bodyClass
-      ]
-        .join(' ')
-        .trim()
-    },
-
     computedClass(){
       return [
         this.$style.modal,
@@ -204,6 +201,12 @@ export default{
 			this.setState(to)
     },
 
+    '$route.hash'(to){
+      if(this.hash !== null){
+        this._state = to === this.hash
+      }
+    }
+
   },
 
 	mounted() {
@@ -214,6 +217,10 @@ export default{
 			if(this.computedState){
 				this.setState(this.computedState)
 			}
+
+      if(this.hash !== null){
+        this._state = this.$route.hash === this.hash
+      }
 		})
 	},
 
@@ -245,10 +252,13 @@ export default{
 }
 
 .modal.v-show{
+  transition: all 200ms cubic-bezier(0.25, 1, 0.5, 1);
   transform: scale(0);
+  opacity: 0;
 }
 .modal.v-show.open{
   transform: scale(1);
+  opacity: 1;
 }
 
 .modal form{

package/src/components/TreeViewItem.vue

@@ -1,20 +1,39 @@
 <template>
-	<div @mousemove.stop="hoverMouseOver"
-			 @mouseout.stop="hoverMouseOut">
-		<div ref="item" :class="itemClass"
+	<div @mousemove="hoverMouseOver"
+			 @mouseout="hoverMouseOut">
+		<div ref="item"
+         :class="itemClass"
 				 @mousedown="mouseDown">
-			<button type="button" class="py-2" v-if="Array.isArray((item ?? {}).items) && item.items.length > 0"
+
+      <button type="button" class="py-1" v-if="Array.isArray((item ?? {}).items) && item.items.length > 0"
 							@click="childCollapsed = !childCollapsed">
 				<svg v-if="!childCollapsed" width="16" height="16" class="fill-text-300" 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="16" height="16" class="fill-text-300" 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 v-else class="px-1"></div>
+			<div v-else class="px-2"></div>
+
 			<slot :item="item"></slot>
-			<button type="button" class="py-2" @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 class="flex flex-row gap-2 items-center">
+        <button v-if="item && Array.isArray(item.items)"
+                type="button"
+                class="py-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="py-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>
+
 		</div>
-		<div ref="container" v-if="item && Array.isArray(item.items) && !childCollapsed" class="ml-4">
+		<div ref="container"
+         v-if="item && Array.isArray(item.items) && !childCollapsed" class="ml-4"
+         @mousemove.stop=""
+         @mouseout.stop="">
 			<TreeViewItem v-for="(subItem, index) in item.items"
 										:item="subItem"
 										:parent="item.items"
@@ -28,13 +47,6 @@
 					<slot :item="item"></slot>
 				</template>
 			</TreeViewItem>
-
-			<div class="flex flex-row items-center justify-center mb-2">
-				<button type="button" class="p-1 text-primary flex flex-row gap-1 items-center" @click="add">
-					<svg width="14" height="14" 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>
-					Add
-				</button>
-			</div>
 		</div>
 	</div>
 </template>
@@ -46,9 +58,11 @@ let guide1 = null
 
 export default{
 
+  name: 'TreeViewItem',
+
 	emits: [ 'add', 'change', 'moveup', 'movedown', 'remove' ],
 
-	inject: [ 'confirm', 'toast' ],
+	inject: [ 'confirm', 'toast', 'store' ],
 
 	props: {
 		item: Object,
@@ -83,22 +97,15 @@ export default{
 
 		add(){
 			this.$emit('add', this.item.items)
+      this.childCollapsed = false
 		},
 
 		mouseDown(e){
 			e.preventDefault()
 
-			const rect = this.$el.getBoundingClientRect()
 			const startX = e.clientX
-
-			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)
+			const startY = e.clientY
+      const rect = this.$el.getBoundingClientRect()
 
 			dragged = {
 				item: this.item,
@@ -108,50 +115,96 @@ export default{
 
 			const mouseMove = (e) => {
 				const distanceX = e.clientX - startX
-				cloned.style.left = (rect.x + distanceX) + "px"
-				cloned.style.top = (e.clientY - 10) + "px"
+				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) => {
-				document.body.removeChild(cloned)
+        if(dragged.cloned){
+          document.body.removeChild(dragged.cloned)
+        }
+
 				window.removeEventListener('mousemove', mouseMove)
 				window.removeEventListener('mouseup', mouseUp)
 
 				if(dragged && dragged.parent && dragged.targetParent){
 
-					const startIdx = dragged.targetParent.indexOf(dragged.item)
 					const targetIdx = dragged.targetParent.indexOf(dragged.target)
 					const moveDirection = e.clientY < dragged.startY ? -1 : 1
-
-					let destIdx
-					if(moveDirection === -1){
-						if(dragged.parent === dragged.targetParent){
-							destIdx = dragged.dragArea === -1 ? targetIdx : targetIdx + 1
-						}
-						else{
-							destIdx = dragged.dragArea === -1 ? targetIdx : targetIdx + 1
-						}
-					}
-					else{
-						if(dragged.parent === dragged.targetParent) {
-							destIdx = dragged.dragArea === -1 ? targetIdx - 1 : targetIdx
-						}
-						else{
-							destIdx = dragged.dragArea === -1 ? targetIdx : targetIdx + 1
-						}
-					}
-
-					dragged.targetParent.splice(destIdx, 0, dragged.parent.splice(startIdx, 1)[0])
-
-					this.$emit('change')
+          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
 			}
 
@@ -161,28 +214,67 @@ export default{
 
 		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()
-				dragged.centerY = rect.y + (rect.height / 2)
+        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
 
-			if(e.clientY < dragged.centerY){
-				this.$el.insertBefore(guide1, this.$el.firstElementChild)
-				dragged.dragArea = -1
-			}
-			else{
-				this.$el.insertBefore(guide1, null)
-				dragged.dragArea = 1
-			}
+      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){
@@ -202,6 +294,15 @@ export default{
 
 	computed: {
 
+    componentStore(){
+      if(this.store && this.store.components){
+        if(!this.store.components.treeviewitem)
+          this.store.components.treeviewitem = {}
+
+        return this.store.components.treeviewitem
+      }
+    },
+
     isSelected(){
       return this.selectedItem === this.item
     },
@@ -220,11 +321,19 @@ export default{
 
 	data(){
 		return {
-			childCollapsed: false,
+			childCollapsed: true,
 			hvm: null
 		}
 	},
 
+  mounted() {
+
+    if(this.componentStore){
+      this.childCollapsed = this.componentStore[this.item.uid] ?? this.childCollapsed
+    }
+
+  },
+
   watch: {
 
     item: {
@@ -234,6 +343,18 @@ export default{
       deep: true
     },
 
+    childCollapsed(to){
+      if(this.item.uid && this.componentStore){
+        this.componentStore[this.item.uid] = to
+      }
+      else{
+        console.warn('[TreeviewItem] not saving collapsed state', {
+          uid: this.item.uid,
+          componentStore: this.componentStore,
+        })
+      }
+    },
+
     isSelected(to){
       /*if(to){
         this.$el.scrollIntoView({
@@ -251,7 +372,7 @@ export default{
 <style module>
 
 .item{
-	@apply bg-base-300 dark:bg-base-400 flex flex-row gap-2 px-2 items-center rounded-lg mb-1;
+	@apply bg-base-300 dark:bg-base-400 flex flex-row gap-2 px-2 py-1 items-center rounded-lg mb-1;
 	@apply border-[1px] border-transparent cursor-pointer;
 }
 .item.active{
@@ -266,4 +387,8 @@ export default{
 	@apply h-[1px] bg-primary rounded-lg;
 }
 
+.item.dragInto{
+  @apply border-[1px] border-primary;
+}
+
 </style>

package/src/mixin/component.js

@@ -48,10 +48,13 @@ export const componentMixin = {
 
     boxShadow: Array,
     opacity: Array,
+    itemRatio: Array,
 
     containerClass: String,
     itemClass: String,
 
+    htmlText: String,
+
     editSelectable: {
       type: undefined,
       default: true

package/src/widgets/AhrefSetting.vue

@@ -1,38 +1,45 @@
 <template>
 	<div :class="$style.comp">
 
-		<div>
-			<label class="flex-1 text-text-400">Text</label>
-			<Textbox v-model="item.props.text" @keyup.enter="$emit('change')"/>
-		</div>
-
-		<div>
-			<label class="flex-1 text-text-400">Href</label>
-			<Textbox v-model="item.props.href" @keyup.enter="$emit('change')"/>
-		</div>
-
-		<div>
-			<label class="flex-1 text-text-400">Target</label>
-			<Dropdown v-model="item.props.target" @change="$emit('change')">
-				<option value="_self">Self</option>
-				<option value="_blank">Blank</option>
-				<option value="_parent">Parent</option>
-				<option value="_top">Top</option>
-			</Dropdown>
-		</div>
-
-		<div>
-			<label class="flex-1 text-text-400">Variant</label>
-			<Dropdown v-model="item.props.variant"
-								@change="$emit('change')">
-				<option value="primary">Primary</option>
-				<option value="secondary">Secondary</option>
-				<option value="red">Red</option>
-				<option value="minimal">Minimal</option>
-				<option value="outline">Outline</option>
-				<option value="">Not Set</option>
-			</Dropdown>
-		</div>
+		<div class="flex flex-col gap-4">
+      <div>
+        <strong class="flex-1 text-text-400">Ahref</strong>
+        <div class="h-[1px] bg-text-100 mt-2"></div>
+      </div>
+
+      <div>
+        <label class="flex-1 text-text-400">Text</label>
+        <Textbox v-model="item.props.text" @keyup.enter="$emit('change')"/>
+      </div>
+
+      <div>
+        <label class="flex-1 text-text-400">Href</label>
+        <Textbox v-model="item.props.href" @keyup.enter="$emit('change')"/>
+      </div>
+
+      <div>
+        <label class="flex-1 text-text-400">Target</label>
+        <Dropdown v-model="item.props.target" @change="$emit('change')">
+          <option value="_self">Self</option>
+          <option value="_blank">Blank</option>
+          <option value="_parent">Parent</option>
+          <option value="_top">Top</option>
+        </Dropdown>
+      </div>
+
+      <div>
+        <label class="flex-1 text-text-400">Variant</label>
+        <Dropdown v-model="item.props.variant"
+                  @change="$emit('change')">
+          <option value="primary">Primary</option>
+          <option value="secondary">Secondary</option>
+          <option value="red">Red</option>
+          <option value="minimal">Minimal</option>
+          <option value="outline">Outline</option>
+          <option value="">Not Set</option>
+        </Dropdown>
+      </div>
+    </div>
 
 		<ComponentSetting :item="item"
 											:view-type="viewType"
@@ -85,7 +92,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col gap-4;
+	@apply flex flex-col gap-6;
 }
 
 </style>

package/src/widgets/ArticleSetting.vue

@@ -2,6 +2,10 @@
 	<div :class="$style.comp">
 
     <div class="flex flex-col gap-4" v-if="viewType === ''">
+      <div>
+        <strong class="flex-1 text-text-400">Article</strong>
+        <div class="h-[1px] bg-text-100 mt-2"></div>
+      </div>
 
       <div class="overflow-x-auto">
         <label class="text-text-400">Action</label>
@@ -541,7 +545,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col gap-4;
+	@apply flex flex-col gap-6;
 }
 
 </style>