@mixd-id/web-scaffold 0.1.230406149 → 0.1.230406150

package/package.json

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

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/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
 			}
 		},
@@ -1019,6 +1021,15 @@ export default{
 			}*/
 		},
 
+    select(uid){
+      this.store.selectedComponent = [ uid ]
+
+      this.$refs.iframe.contentWindow.postMessage({
+        action: 'select',
+        uid
+      }, '*')
+    }
+
 	},
 
 	computed: {