@mixd-id/web-scaffold 0.1.230406153 → 0.1.230406155

package/package.json

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

package/src/components/Modal2.vue

@@ -126,7 +126,15 @@ export default{
 
     computedState(to, from){
       this.setState(to)
-    }
+    },
+
+    $route(to, from){
+      if(from.path !== to.path && !to.hash){
+        let overlay = document.querySelector('.bW9k')
+        if(overlay && overlay.classList.contains('bW9l'))
+          overlay.classList.remove('bW9l')
+      }
+    },
 
   },
 

package/src/components/Radio.vue

@@ -15,7 +15,7 @@ import {parseBoolean} from "../utils/helpers.mjs";
 
 export default{
 
-	emits: [ 'change' ],
+	emits: [ 'change', 'update:modelValue' ],
 
 	props:{
     name: String,

package/src/components/TreeViewItem.vue

@@ -41,8 +41,6 @@
 
 <script>
 
-import {copyToClipboard} from "../utils/helpers.mjs";
-
 let dragged = null
 let guide1 = null
 
@@ -145,14 +143,6 @@ export default{
 						}
 					}
 
-					/*console.log('#1', {
-						startIdx,
-						targetIdx,
-						destIdx,
-						moveDirection,
-						dragArea: dragged.dragArea
-					})*/
-
 					dragged.targetParent.splice(destIdx, 0, dragged.parent.splice(startIdx, 1)[0])
 
 					this.$emit('change')
@@ -181,7 +171,6 @@ export default{
 			if(dragged.target !== this.item){
 				const rect = this.$refs.item.getBoundingClientRect()
 				dragged.centerY = rect.y + (rect.height / 2)
-				//console.log('#BS', dragged.centerY, this.item.name)
 			}
 			dragged.target = this.item
 			dragged.targetParent = this.parent
@@ -194,8 +183,6 @@ export default{
 				this.$el.insertBefore(guide1, null)
 				dragged.dragArea = 1
 			}
-
-			//console.log('centerY', dragged.dragArea, e.clientY, dragged.centerY)
 		},
 
 		hoverMouseOut(e){
@@ -215,10 +202,14 @@ export default{
 
 	computed: {
 
+    isSelected(){
+      return this.selectedItem === this.item
+    },
+
 		itemClass(){
 			return [
 				this.$style.item,
-				this.selectedItem === this.item ? this.$style.active : '',
+				this.isSelected ? this.$style.active : '',
 				this.state === 3 ? this.$style.active : '',
 			]
 				.filter(_=>_)
@@ -232,7 +223,26 @@ export default{
 			childCollapsed: false,
 			hvm: null
 		}
-	}
+	},
+
+  watch: {
+
+    item: {
+      handler(){
+        this.childCollapsed = false
+      },
+      deep: true
+    },
+
+    isSelected(to){
+      if(to){
+        this.$el.scrollIntoView({
+          behavior: 'smooth',
+        })
+      }
+    }
+
+  },
 
 }
 

package/src/widgets/WebPageBuilder.vue

@@ -154,7 +154,7 @@
 						<div class="flex flex-row gap-2">
 							<label class="flex-1 text-text-400">{{ $t('Header')}}</label>
 							<button type="button" class="text-primary"
-											@click="$refs.webPageComponentSelector.open({ items:layout.headers })">
+											@click="$refs.webPageComponentSelector.open({ items:layout.headers, isLayout:true })">
 								Add Header
 							</button>
 						</div>
@@ -174,7 +174,7 @@
 						<div class="flex flex-row gap-2">
 							<label class="flex-1 text-text-400">{{ $t('Footer')}}</label>
 							<button type="button" class="text-primary"
-											@click="$refs.webPageComponentSelector.open({ items:layout.footers })">
+											@click="$refs.webPageComponentSelector.open({ items:layout.footers, isLayout:true })">
 								Add Footer
 							</button>
 						</div>
@@ -513,7 +513,7 @@ export default{
 
 	methods: {
 
-		addComponent({ type, items }){
+		addComponent({ type, items, isLayout }){
 
 			let obj = this.availableComponents.find((_) => _.type === type)
 			obj = JSON.parse(JSON.stringify(obj))
@@ -529,6 +529,8 @@ export default{
 			this.store.selectedComponent = [ obj.uid ]
 
 			this.$refs.webPageComponentSelector.close()
+
+      isLayout ? this.saveLayout() : this.save()
 		},
 
 		addDatasource(datasource){