@mixd-id/web-scaffold 0.1.230406139 → 0.1.230406141

package/package.json

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

package/src/components/Modal.vue

@@ -80,6 +80,64 @@ export default{
 		}
   },
 
+	methods: {
+
+		open(context = {}){
+			this.context = context
+			this._state = true
+		},
+
+		close(){
+			this._state = false
+		},
+
+		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')
+			}
+		},
+
+		onDismiss(e){
+			if(this.computedState && this.dismissable && this.$refs.modal && e.target.classList.contains('bW9k')){
+				this.$emit('dismiss')
+			}
+		},
+
+		onKeyDown(e){
+			if(this.dismissable && this.$refs.modal && e.keyCode === 27){
+				this.$emit('dismiss')
+			}
+		},
+
+		setState(to){
+			if(to){
+				let overlay = document.querySelector('.bW9k')
+				if(overlay){
+					overlay.classList.add('bW9l')
+				}
+
+				registerModal(this)
+			}
+			else{
+				unRegisterModal(this)
+			}
+		}
+	},
+
   computed:{
 
     modalBodyClass(){
@@ -126,7 +184,15 @@ export default{
 
     computedState(to, from){
 			this.setState(to)
-    }
+    },
+
+		$route(to, from){
+			if(from.href !== to.href && !to.hash){
+				let overlay = document.querySelector('.bW9k')
+				if(overlay && overlay.classList.contains('bW9l'))
+					overlay.classList.remove('bW9l')
+			}
+		},
 
   },
 
@@ -141,63 +207,7 @@ export default{
 		})
 	},
 
-	methods: {
-
-		open(context = {}){
-			this.context = context
-			this._state = true
-		},
-
-		close(){
-			this._state = false
-		},
 
-    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')
-      }
-    },
-
-		onDismiss(e){
-			if(this.computedState && this.dismissable && this.$refs.modal && e.target.classList.contains('bW9k')){
-				this.$emit('dismiss')
-			}
-		},
-
-		onKeyDown(e){
-			if(this.dismissable && this.$refs.modal && e.keyCode === 27){
-				this.$emit('dismiss')
-			}
-		},
-
-		setState(to){
-			if(to){
-				let overlay = document.querySelector('.bW9k')
-				if(overlay){
-					overlay.classList.add('bW9l')
-				}
-
-				registerModal(this)
-			}
-			else{
-				unRegisterModal(this)
-			}
-		}
-  }
 
 }
 

package/src/widgets/FAQ.vue

@@ -38,6 +38,7 @@ export default{
 <style module>
 
 .comp{
+	@apply w-full mx-auto max-w-screen-md;
 	background-image: v-bind(bgImages[0]);
 }
 

package/src/widgets/FeatureList.vue

@@ -1,12 +1,14 @@
 <template>
 	<div :class="$style.comp" v-if="Array.isArray(items) && items.length > 0">
 		<div v-if="id" :id="id" :class="$style.anchor"></div>
-		<h3>{{ title ?? '' }}</h3>
-		<p v-if="description" class="mt-2 text-lg">{{ description }}</p>
+		<div class="mb-8">
+			<h3>{{ title ?? '' }}</h3>
+			<p v-if="description" class="mt-2 text-lg">{{ description }}</p>
+		</div>
 		<div :class="computedContainerClass">
 			<div v-for="item in items" class="flex gap-4" :class="computedItemClass">
 				<div>
-					<Image :src="imageUrl(item.imageUrl)" :class="`object-contain ${item.sizeClass}`" />
+					<Image :src="imageUrl(item.imageUrl)" :class="`object-contain ${item.sizeClass} rounded-xl`" />
 				</div>
 				<div class="flex-1 flex flex-col gap-1" v-if="item.title || item.description">
 					<h5 v-if="item.title">{{ item.title }}</h5>
@@ -77,6 +79,7 @@ export default{
 
 .comp{
 	@apply relative;
+	@apply w-full max-w-screen-xl mx-auto p-6;
 	background-image: v-bind(bgImages[0]);
 }
 

package/src/widgets/Review.vue

@@ -113,7 +113,7 @@ export default{
 
 .review{
 	@apply relative flex flex-col gap-4;
-	@apply w-full mx-auto max-w-screen-xl;
+	@apply w-full mx-auto max-w-screen-xl p-6;
 	background-image: v-bind(bgImages[0]);
 }
 

package/src/widgets/WebPageBuilder.vue

@@ -314,9 +314,9 @@
 		<div v-if="currentItem" class="flex flex-col bg-base-400 dark:bg-base-300"
 			:style="section3Style">
 
-			<div class="p-6 bg-base-300">
+			<div class="p-6">
 				<strong>
-					{{ currentItem.type  }}
+					{{ currentItem.type }}
 				</strong>
 			</div>