@mixd-id/web-scaffold 0.1.230406113 → 0.1.230406114

package/package.json

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

package/src/components/Alert.vue

@@ -68,7 +68,10 @@ export default{
 
 			if(this.state && this.state.title){
 				if(typeof this.state.title === 'object'){
-					if(this.state.title.type === 'ValidationError'){
+					if(this.state.title.response){
+						title = this.state.title.response.data.message
+					}
+					else if(this.state.title.type === 'ValidationError'){
 						title = 'Validation error'
 					}
 					else if(this.state.title.status){
@@ -90,14 +93,20 @@ export default{
 			let description
 
 			if(this.state){
-
 				if(typeof this.state.title === 'object'){
-					if(this.state.title.type === 'ValidationError'){
+					if(this.state.title.response || this.state.title.type === 'ValidationError'){
+						const errors = this.state.title.response.data.errors ?? this.state.title.errors
+
 						description = {}
-						for(let key in this.state.title.errors){
-							this.state.title.errors[key].forEach((text) => {
-								description[text] = 1
-							})
+						for(let key in errors){
+							if(Array.isArray(errors[key])){
+								errors[key].forEach((text) => {
+									description[text] = 1
+								})
+							}
+							else{
+								errors[errors[key]] = 1
+							}
 						}
 						description = Object.keys(description).join("\n")
 					}

package/src/components/Button.vue

@@ -1,6 +1,6 @@
 <template>
 	<button :class="compClass" :disabled="isDisabled" @click="onClick">
-		<div>
+		<div :class="itemClass">
 			<slot>{{ text }}</slot>
 		</div>
 		<div v-if="isLoading" :class="$style.loadingPane">
@@ -36,6 +36,8 @@ export default{
 
 		target: String,
 
+		targetType: String,
+
 		width: Array,
 
 	},
@@ -98,9 +100,28 @@ export default{
 
 		onClick(){
 			if(this.target){
-				this.$router.push(this.target)
+				switch(this.targetType){
+
+					case 'section':
+						this.scrollTo(this.target)
+						break
+
+					default:
+						this.$router.push(this.target)
+						break
+				}
 			}
-		}
+		},
+
+		scrollTo(exp){
+			const el = document.querySelector('._' + exp.substring(0, 4))
+			if(el){
+				window.scrollTo({
+					top: el.offsetTop - 100,
+					behavior: 'smooth'
+				});
+			}
+		},
 
 	}
 

package/src/components/ErrorText.vue

@@ -4,7 +4,12 @@
 			<div v-if="typeof error.response.data.errors === 'string'">{{ error.response.data.errors }}</div>
 			<div v-else v-for="(text, key) in error.response.data.errors">
 				<div v-if="!errorKey || key === errorKey">
-					<div v-for="txt in text">{{ txt }}</div>
+					<div v-if="Array.isArray(text)">
+						<div v-for="txt in text">{{ txt }}</div>
+					</div>
+					<div v-else>
+						{{ text }}
+					</div>
 				</div>
 			</div>
 		</div>
@@ -49,4 +54,4 @@ export default{
 	@apply text-red-500;
 }
 
-</style>
+</style>

package/src/components/Image.vue

@@ -214,9 +214,7 @@ export default{
 				reader.readAsDataURL(this.src)
 				this.status = 1
 			}
-      else{
-        this.actualSrc = this.defaultSrc
-			}
+
 		},
 
 		onClick(){

package/src/components/Testimonial.vue

@@ -14,7 +14,7 @@
 				</div>
 				<div class="h-[1px] bg-gray-200"></div>
 				<div class="flex flex-row items-center gap-2">
-					<Image class="w-[36px] aspect-square"
+					<Image class="w-[36px] aspect-square rounded-full"
 								 :src="imageSrc(item.imageUrl)" />
 					<div class="flex-1 flex flex-col leading-tight">
 						<div class="text-sm text-ellipsis overflow-hidden whitespace-nowrap">
@@ -62,11 +62,11 @@ export default{
 <style module>
 
 .comp{
-	@apply flex-1 flex flex-col gap-4 bg-gray-100 overflow-hidden;
+	@apply flex-1 bg-gray-100 overflow-hidden;
 }
 
 .head{
-	@apply text-center md:text-left;
+	@apply text-center md:text-left mb-6;
 }
 
 .container{

package/src/components/TreeViewItem.vue

@@ -10,7 +10,7 @@
 				<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="pl-1"></div>
+			<div v-else class="px-1"></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>
@@ -113,12 +113,11 @@ export default{
 
 			const rect = this.$el.getBoundingClientRect()
 			const startX = e.clientX
-			const startY = e.clientY
 
 			const cloned = this.$el.cloneNode(true)
 			cloned.style.position = 'absolute'
 			cloned.style.left = rect.x + "px"
-			cloned.style.top = rect.y + "px"
+			cloned.style.top = (e.clientY - 10) + "px"
 			cloned.style.width = this.$el.clientWidth + "px"
 			cloned.style.pointerEvents = 'none'
 			document.body.appendChild(cloned)
@@ -130,9 +129,8 @@ export default{
 
 			const mouseMove = (e) => {
 				const distanceX = e.clientX - startX
-				const distanceY = e.clientY - startY
 				cloned.style.left = (rect.x + distanceX) + "px"
-				cloned.style.top = (rect.y + distanceY) + "px"
+				cloned.style.top = (e.clientY - 10) + "px"
 			}
 
 			const mouseUp = (e) => {

package/src/components/TreeViewItem1.vue

@@ -0,0 +1,282 @@
+<template>
+	<div @mouseover="hoverMouseOver"
+			 @mouseout="hoverMouseOut"
+			 @mouseup="hoverMouseUp">
+		<div ref="item" :class="itemClass"
+				 @copy.stop.prevent="copy"
+				 @mousedown="mouseDown">
+			<button type="button" class="py-2" 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="pl-1"></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>
+		<div ref="container" v-if="item && Array.isArray(item.items) && !childCollapsed" class="ml-4">
+			<TreeViewItem v-for="(subItem, index) in item.items"
+										:item="subItem"
+										:parent="item.items"
+										:selected-item="selectedItem"
+										@moveup="moveUp(subItem)"
+										@movedown="moveDown(subItem)"
+										@remove="confirm($t('Remove this item?'), { onConfirm: () => { item.items.splice(index, 1);$emit('change') }})"
+										@add="(items) => $emit('add', items)"
+										@change="$emit('change')"
+										@paste.stop.prevent="(e) => paste(e, subItem)"
+										@item-paste="(p1, p2, p3) => $emit('item-paste', p1, p2, p3)">
+				<template #default="{ item }">
+					<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>
+
+<script>
+
+import {copyToClipboard} from "../utils/helpers.mjs";
+
+const createGuide = () => {
+	const div = document.createElement('div')
+	div.classList.add('treeview-guide')
+	return div
+}
+
+let dragged = null
+let guide1 = createGuide()
+let guide2 = createGuide()
+
+export default{
+
+	emits: [ 'add', 'change', 'moveup', 'movedown', 'remove', 'item-paste' ],
+
+	inject: [ 'confirm', 'toast' ],
+
+	props: {
+		item: Object,
+
+		parent: Array,
+
+		selectedItem: Object,
+
+		state: {
+			type: [ Number, String ],
+			default: 1
+		},
+	},
+
+	methods: {
+
+		copy(){
+			alert('cop')
+			copyToClipboard(JSON.stringify(this.item))
+			this.toast(this.item.type + ' copied')
+		},
+
+		paste(event, subItem){
+			const clipboardData = event.clipboardData || window.clipboardData;
+			const pastedText = clipboardData.getData('text');
+
+			try{
+				const newItem = JSON.parse(pastedText)
+				this.$emit('item-paste', this.item.items, subItem, newItem)
+			}
+			catch(e){
+
+			}
+		},
+
+		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)
+		},
+
+		mouseDown(e){
+			e.preventDefault()
+
+			const rect = this.$el.getBoundingClientRect()
+			const startX = e.clientX
+			const startY = e.clientY
+
+			const cloned = this.$el.cloneNode(true)
+			cloned.style.position = 'absolute'
+			cloned.style.left = rect.x + "px"
+			cloned.style.top = rect.y + "px"
+			cloned.style.width = this.$el.clientWidth + "px"
+			cloned.style.pointerEvents = 'none'
+			cloned.style.opacity = '0.7'
+			document.body.appendChild(cloned)
+
+			dragged = {
+				item: this.item,
+				parent: this.parent
+			}
+
+			const mouseMove = (e) => {
+				const distanceX = e.clientX - startX
+				const distanceY = e.clientY - startY
+				cloned.style.left = (rect.x + distanceX) + "px"
+				cloned.style.top = (rect.y + distanceY) + "px"
+			}
+
+			const mouseUp = (e) => {
+				document.body.removeChild(cloned)
+				window.removeEventListener('mousemove', mouseMove)
+				window.removeEventListener('mouseup', mouseUp)
+			}
+
+			window.addEventListener('mousemove', mouseMove)
+			window.addEventListener('mouseup', mouseUp)
+		},
+
+		hoverMouseUp(e){
+
+			/*if(dragged && dragged.targetParent){
+				const targetIdx = dragged.targetParent.indexOf(dragged.target)
+				const startIdx = dragged.parent.indexOf(dragged.item)
+
+				if(targetIdx >= -1 && (targetIdx !== startIdx || dragged.parent !== dragged.targetParent)){
+
+					if(dragged.parent === dragged.targetParent){
+						dragged.parent.splice(targetIdx, 0, dragged.parent.splice(startIdx, 1)[0])
+					}
+					else{
+						dragged.targetParent.splice(targetIdx, 0, dragged.parent.splice(startIdx, 1)[0])
+					}
+
+					this.$emit('change')
+				}
+			}*/
+
+			if(this.$refs.item){
+				this.$refs.item.classList.remove(this.$style.itemMouseOver)
+			}
+			window.removeEventListener('mouseup', this.hoverMouseUp)
+			dragged = null
+
+			if(guide1.parentNode){
+				guide1.parentNode.removeChild(guide1)
+			}
+			if(guide2.parentNode){
+				guide2.parentNode.removeChild(guide2)
+			}
+			guide1.removeEventListener('mouseover', this.hoverMouseOver)
+			guide2.removeEventListener('mouseover', this.hoverMouseOver)
+		},
+
+		hoverMouseOver(e){
+
+			if(dragged && dragged.item !== this.item){
+				//this.$refs.item.classList.add(this.$style.itemMouseOver)
+
+				const parent = this.$refs.item.parentNode
+				parent.insertBefore(guide1, this.$el.firstElementChild)
+				parent.insertBefore(guide2, null)
+
+				guide1.addEventListener('mouseover', this.guideMouseOver)
+				guide2.addEventListener('mouseover', this.guideMouseOver)
+
+				/*dragged.target = this.item
+				dragged.targetParent = this.parent
+				window.addEventListener('mouseup', this.hoverMouseUp)*/
+			}
+
+		},
+
+		guideMouseOver(e){
+			console.log('guideMouseOver', e.target)
+		},
+
+		hoverMouseOut(e){
+
+			/*if(dragged){
+				this.$refs.item.classList.remove(this.$style.itemMouseOver)
+				delete dragged.target
+				delete dragged.targetParent
+			}*/
+
+			if(guide1.parentNode){
+				guide1.parentNode.removeChild(guide1)
+			}
+			if(guide2.parentNode){
+				guide2.parentNode.removeChild(guide2)
+			}
+			guide1.removeEventListener('mouseover', this.hoverMouseOver)
+			guide2.removeEventListener('mouseover', this.hoverMouseOver)
+		}
+
+	},
+
+	computed: {
+
+		itemClass(){
+			return [
+				this.$style.item,
+				this.selectedItem === this.item ? this.$style.active : '',
+				this.state === 3 ? this.$style.active : '',
+			]
+				.filter(_=>_)
+				.join(' ')
+		}
+
+	},
+
+	data(){
+		return {
+			childCollapsed: false
+		}
+	}
+
+}
+
+</script>
+
+<style>
+
+.treeview-guide{
+	@apply w-full h-[5px] bg-primary my-1;
+}
+
+</style>
+
+<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 border-[1px] border-transparent cursor-pointer;
+}
+.item.active{
+	@apply border-primary;
+}
+
+.itemMouseOver{
+	@apply !bg-primary;
+}
+
+</style>

package/src/utils/helpers.mjs

@@ -213,6 +213,26 @@ const copyToClipboard = function(obj){
   })
 }
 
+const getComponentUids = function(components, excepts = []){
+
+  const arr = []
+
+  for(let comp of components){
+    if(!excepts.includes(comp.uid)){
+      arr.push({
+        uid: comp.uid,
+        name: comp.props.name ?? comp.type
+      })
+
+      if(Array.isArray(comp.items)){
+        arr.push(...getComponentUids(comp.items))
+      }
+    }
+  }
+
+  return arr
+}
+
 export {
   downsizeImage,
   uid,
@@ -224,7 +244,8 @@ export {
   accessNestedObject,
   mediaPrefixes,
   _applyClass,
-  copyToClipboard
+  copyToClipboard,
+  getComponentUids
 }
 
 function observeInit(){

package/src/widgets/ButtonSetting.vue

@@ -8,7 +8,24 @@
 
 		<div>
 			<label class="flex-1 text-text-400">Target</label>
-			<Textbox v-model="item.props.target" @keyup.enter="$emit('change')"/>
+			<div class="flex flex-row items-center gap-2">
+				<Dropdown class="w-[70px]"
+									v-model="item.props.targetType"
+									@change="item.props.target= ''; $emit('change')">
+					<option value="">URL</option>
+					<option value="section">Section</option>
+				</Dropdown>
+				<Dropdown v-if="item.props.targetType === 'section'"
+									v-model="item.props.target"
+									@change="$emit('change')"
+									class="flex-1">
+					<option value="" disabled>-Select-</option>
+					<option v-for="comp in compUids" :value="comp.uid">{{ comp.name }}</option>
+				</Dropdown>
+				<Textbox class="flex-1" v-else v-model="item.props.target"
+								 @keyup.enter="$emit('change')"
+								 @blur="$emit('change')"/>
+			</div>
 		</div>
 
 		<div>
@@ -35,6 +52,8 @@
 
 <script>
 
+import {getComponentUids} from "../utils/helpers.mjs";
+
 export default{
 
 	emits: [ 'change' ],
@@ -57,10 +76,21 @@ export default{
 		}
 	},
 
-	inject: [ 'confirm', 'imageSrc' ],
+	inject: [ 'confirm', 'imageSrc', 'getPage' ],
 
-	methods: {
+	computed: {
+
+		compUids(){
+			if(this.item.props.targetType === 'section'){
+				const page = this.getPage()
+				const components = page.components
+				return getComponentUids(components, [ this.item.uid ])
+			}
+		}
 
+	},
+
+	methods: {
 
 	}
 

package/src/widgets/WebPageBuilder.vue

@@ -22,7 +22,7 @@
 					<div class="flex flex-row gap-4" v-if="!page.isSystem">
 						<div class="flex flex-col gap-1">
 							<label class="text-text-400 w-[40px]">{{ $t('Active')}}</label>
-							<Switch v-model="page.isActive" />
+							<Switch v-model="page.isActive" @change="save"/>
 						</div>
 
 						<div class="flex-1">