@mixd-id/web-scaffold 0.1.230406149 → 0.1.230406151

package/package.json

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

package/src/components/Alert.vue

@@ -131,7 +131,9 @@ export default{
 				this.alert
 
 			if(err.errors){
-				return Object.values(err.errors).join("\n")
+				return typeof err.errors === 'object' && Object.keys(err.errors).length > 0 ?
+            Object.values(err.errors).join("\n") :
+            err.errors
 			}
 			else if(err.message){
 				return err.message

package/src/components/Article.vue

@@ -1,6 +1,6 @@
 <template>
 	<div :class="$style.comp">
-    <article :class="$style.article"
+    <article ref="article" :class="$style.article"
              v-html="htmlText"
              :contenteditable="editMode"
              @input="onInput"
@@ -27,7 +27,7 @@ export default{
 	methods: {
 
 		getSelection(){
-			const { text = '', href = '', target = '' } = saveSelection(this.$el)
+			const { text = '', href = '', target = '' } = saveSelection(this.$refs.article)
 			return {
 				text,
 				href,
@@ -55,7 +55,7 @@ export default{
 
 		onClick(){
 			if(this.editMode){
-				let { element } = getSelection(this.$el)
+				let { element } = getSelection(this.$refs.article)
 
 				const table = this.closest(element, 'table')
 
@@ -81,7 +81,7 @@ export default{
 				uid: this.uid,
 				type: 'setProp',
 				value: {
-					htmlText: this.$el.innerHTML
+					htmlText: this.$refs.article.innerHTML
 				}
 			}, '*')
 		},
@@ -100,7 +100,7 @@ export default{
 
 		addTableColumn(){
 
-			let { element } = getSelection(this.$el)
+			let { element } = getSelection(this.$refs.article)
 			if(element.nodeType !== 1)
 				element = element.parentNode
 			const table = this.closest(element, 'table')
@@ -129,7 +129,7 @@ export default{
 
 		addTableRow(){
 
-			let { element } = getSelection(this.$el)
+			let { element } = getSelection(this.$refs.article)
 			if(element.nodeType !== 1)
 				element = element.parentNode
 			const table = this.closest(element, 'table')
@@ -153,7 +153,7 @@ export default{
 
 		removeTableRow(){
 
-			let { element } = getSelection(this.$el)
+			let { element } = getSelection(this.$refs.article)
 			if(element.nodeType !== 1)
 				element = element.parentNode
 			const table = this.closest(element, 'table')
@@ -170,7 +170,7 @@ export default{
 
 		removeTableColumn(){
 
-			let { element } = getSelection(this.$el)
+			let { element } = getSelection(this.$refs.article)
 			if(element.nodeType !== 1)
 				element = element.parentNode
 			const table = this.closest(element, 'table')
@@ -231,7 +231,7 @@ export default{
 
 						case 'saveSelection':
 						case 'getSelection':
-							const sel = saveSelection(this.$el)
+							const sel = saveSelection(this.$refs.article)
 							const { text, target, href } = sel
 							result = {
 								text,
@@ -256,7 +256,7 @@ export default{
 							break
 
 						case 'removeLink':
-							const { element } = getSelection(this.$el)
+							const { element } = getSelection(this.$refs.article)
 
 							let a = element
 							while(a && a.tagName !== 'A'){

package/src/components/Modal.vue

@@ -239,7 +239,7 @@ export default{
 }
 
 .modalBody{
-	@apply flex-1 min-h-0 overflow-y-auto flex bg-base-400;
+	@apply flex-1 min-h-0 overflow-y-auto flex;
 }
 
 .overlay{

package/src/mixin/component.js

@@ -2,6 +2,8 @@
 import { inject } from 'vue'
 import {parseBoolean} from "../utils/helpers.mjs";
 
+let guide, guide2
+
 export const componentMixin = {
 
   props: {
@@ -89,17 +91,41 @@ export const componentMixin = {
     },
 
     componentMouseOver(e){
-      //e.stopPropagation()
-      //e.preventDefault()
+      e.stopPropagation()
+      e.preventDefault()
 
-      //this.lastStyle.position = this.$el.style.position
-      //this.$el.style.position = 'relative'
+      this.lastStyle.position = this.$el.style.position
+      this.$el.style.position = 'relative'
 
-      //this.$el.appendChild(this.getGuide())
+      this.$el.appendChild(this.getGuide())
     },
 
     componentMouseOut(e){
-      //this.$el.style.position = this.lastStyle.position
+      this.$el.style.position = this.lastStyle.position
+    },
+
+    getGuide(){
+      if(!guide){
+        guide = document.createElement('div')
+        guide.className = "absolute top-0 left-0 right-0 bottom-0 border-[3px] border-blue-600" +
+          " pointer-events-none"
+      }
+
+      return guide
+    },
+
+    getGuide2(){
+      if(!guide2){
+        guide2 = document.createElement('div')
+        guide2.className = "absolute top-0 left-0 right-0 bottom-0 border-[3px] border-blue-600" +
+          " pointer-events-none"
+      }
+
+      return guide2
+    },
+
+    select(){
+      this.$el.appendChild(this.getGuide2())
     },
 
   },
@@ -115,16 +141,19 @@ export const componentMixin = {
     if('edit-mode' in this.$route.query){
       this.editMode = true
       this.editModeClick = inject('editModeClick', () => {})
+      this.editRegisterComponent = inject('editRegisterComponent', () => {})
 
       if(parseBoolean(this.editSelectable)){
         this.$el.addEventListener('click', this.componentClick)
         this.$el.addEventListener('mouseover', this.componentMouseOver)
         this.$el.addEventListener('mouseout', this.componentMouseOut)
       }
+
+      this.editRegisterComponent(this.uid, this)
     }
   },
 
-  unmounted() {
+  unmounted(){
     this.$el.removeEventListener('click', this.componentClick)
   },
 

package/src/widgets/IconList.vue

@@ -3,7 +3,7 @@
 		<div v-for="(icon, index) in icons" :key="index" class="text-center p-3">
 			<router-link :to="icon.target ?? ''">
 				<Image :src="imageUrl(icon)" class="inline-block aspect-square w-[90%] md:w-[95%] max-w-[64px] rounded-xl"
-							 spinner-type="shimmer"/>
+							 spinner-type="shimmer" edit-selectable="false"/>
 				<small class="block mt-1 text-center text-xs md:text-sm">{{ icon.text }}</small>
 			</router-link>
 		</div>

package/src/widgets/Review.vue

@@ -51,7 +51,7 @@
 							<p>{{ review.details ?? review.text }}</p>
 						</div>
 						<div v-if="review.imageUrl">
-							<Image :src="imageSrc(review.imageUrl)" class="w-[80px] aspect-square rounded-lg" />
+							<Image :src="imageSrc(review.imageUrl)" class="w-[80px] aspect-square rounded-lg" edit-selectable="false" />
 						</div>
 					</div>
 					<div class="flex flex-row gap-2">

package/src/widgets/WebDatasourceSelector.vue

@@ -35,6 +35,14 @@
 
 export default{
 
+  inject: [ 'alert', 'socketEmit2' ],
+
+  props: {
+
+    useDatasource: String
+
+  },
+
 	methods: {
 
 		apply(datasource){
@@ -47,21 +55,26 @@ export default{
 		},
 
 		open(){
+      this.load()
 			this.isOpen = true
 		},
 
+    load(){
+      if(this.useDatasource){
+        this.socketEmit2(this.useDatasource, {})
+          .then(res => {
+            this.datasources = res
+          })
+          .catch(err => this.alert(err))
+      }
+    },
+
 	},
 
 	data(){
 		return {
 			isOpen: false,
-
-			datasources: [
-				{ label:"Product", name:"product.load", params:{} },
-				{ label:"Warehouse", name:"warehouse.load", params:{} },
-				{ label:"Variant", name:"variant.load", params:{} },
-				{ label:"Customer", name:"customer.load", params:{} },
-			],
+			datasources: null
 		}
 	},
 

package/src/widgets/WebPageBuilder.vue

@@ -165,7 +165,7 @@
 											@change="saveLayout">
 							<template #default="{ item }">
 								<component :is="`${(item ?? {}).type}Item`" :item="item"
-													 @click="store.selectedComponent = [ item.uid ]"/>
+													 @click="select(item.uid)"/>
 							</template>
 						</TreeView>
 					</div>
@@ -185,7 +185,7 @@
 											@change="saveLayout">
 							<template #default="{ item }">
 								<component :is="`${(item ?? {}).type}Item`" :item="item"
-													 @click="store.selectedComponent = [ item.uid ]"/>
+													 @click="select(item.uid)"/>
 							</template>
 						</TreeView>
 					</div>
@@ -205,7 +205,7 @@
 											@change="save">
 							<template #default="{ item }">
 								<component :is="`${(item ?? {}).type}Item`" :item="item"
-													 @click="store.selectedComponent = [ item.uid ]"/>
+													 @click="select(item.uid)"/>
 							</template>
 						</TreeView>
 					</div>
@@ -236,7 +236,9 @@
 						</button>
 					</div>
 
-					<WebDatasourceSelector ref="webDatasourceSelector" @apply="addDatasource"/>
+					<WebDatasourceSelector ref="webDatasourceSelector"
+                                 @apply="addDatasource"
+                                 :use-datasource="useDatasource" />
 
 				</div>
 
@@ -567,7 +569,7 @@ export default{
 
 					const comp = this.findItemByUid(this.currentItem.uid)
 					comp.items.splice(comp.items.indexOf(comp.item) + 1, 0, item)
-					this.store.selectedComponent = [ item.uid ]
+					this.select(item.uid)
 					comp.type === 'components' ? this.save() : this.saveLayout()
 				}
 				catch(e){
@@ -912,7 +914,7 @@ export default{
 					break
 
 				case 'component-click':
-					this.store.selectedComponent = [ uid ]
+          this.select(uid)
 					break
 			}
 		},
@@ -1007,10 +1009,10 @@ export default{
 
 		onKeyDown(e){
 			if(e.keyCode === 67 && (e.metaKey || e.ctrlKey)){
-				this.copy()
+				//this.copy()
 			}
 			else if(e.keyCode === 86 && (e.metaKey || e.ctrlKey)){
-				this.paste(e)
+				//this.paste(e)
 			}
 			/*else if(e.keyCode === 8){
 				if(this.currentItem){
@@ -1019,6 +1021,15 @@ export default{
 			}*/
 		},
 
+    select(uid){
+      this.store.selectedComponent = [ uid ]
+
+      this.$refs.iframe.contentWindow.postMessage({
+        action: 'select',
+        uid
+      }, '*')
+    }
+
 	},
 
 	computed: {