@mixd-id/web-scaffold 0.1.230406203 → 0.1.230406205

package/package.json

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

package/src/components/Carousel.vue

@@ -205,10 +205,10 @@ export default{
       const ix = parseInt(this._props['ix'] + dx)
 
       if(!this._props['direction']){
-        if(Math.abs(dy) > 10){
+        if(Math.abs(dy) > 3){
           this._props['direction'] = 'vertical'
         }
-        else if(Math.abs(dx) > 15){
+        else if(Math.abs(dx) > 3){
           this._props['direction'] = 'horizontal'
           this.disableBodyScroll()
         }
@@ -251,17 +251,21 @@ export default{
     },
 
     disableBodyScroll(){
-      this.scrollPosition = window.pageYOffset || document.documentElement.offsetTop
-      document.body.classList.add(this.$style.htmlNoScroll)
-      document.body.classList.add(this.$style.bodyNoScroll)
-      document.body.style.top = `-${this.scrollPosition}px`;
+      if(this.$isTouchSupported()){
+        this.scrollPosition = window.pageYOffset || document.documentElement.offsetTop
+        document.body.classList.add(this.$style.htmlNoScroll)
+        document.body.classList.add(this.$style.bodyNoScroll)
+        document.body.style.top = `-${this.scrollPosition}px`;
+      }
     },
 
     enableBodyScroll(){
-      document.body.style.removeProperty('top');
-      document.body.classList.remove(this.$style.bodyNoScroll)
-      document.body.classList.remove(this.$style.htmlNoScroll)
-      window.scrollTo(0, this.scrollPosition);
+      if(this.$isTouchSupported()){
+        document.body.style.removeProperty('top');
+        document.body.classList.remove(this.$style.bodyNoScroll)
+        document.body.classList.remove(this.$style.htmlNoScroll)
+        window.scrollTo(0, this.scrollPosition);
+      }
     },
 
     mouseDown(e){
@@ -360,23 +364,21 @@ export default{
 	@apply bg-primary-500;
 }
 
-@media screen and (max-width: 768px){
-  .htmlNoScroll{
-    min-height: 100.3%;
-    overscroll-behavior-y: none;
-    height: 100%;
-    overflow: hidden;
-  }
-  .bodyNoScroll{
-    overscroll-behavior: none;
-    overscroll-behavior-y: none;
-    overflow: hidden;
-    position: fixed;
-    width: 100%;
-    margin: 0;
-    max-height: 100%;
-    -webkit-overflow-scrolling: touch;
-  }
+.htmlNoScroll{
+  min-height: 100.3%;
+  overscroll-behavior-y: none;
+  height: 100%;
+  overflow: hidden;
+}
+.bodyNoScroll{
+  overscroll-behavior: none;
+  overscroll-behavior-y: none;
+  overflow: hidden;
+  position: fixed;
+  width: 100%;
+  margin: 0;
+  max-height: 100%;
+  -webkit-overflow-scrolling: touch;
 }
 
 

package/src/components/Image.vue

@@ -94,8 +94,8 @@ export default{
 
   mounted(){
 		this.$observe.once(this.$el, () => {
-			this.isVisible = true
-			this.loadSrc()
+      this.isVisible = true
+      this.loadSrc()
 		})
 
 		this.$resize(this.onResize)
@@ -168,7 +168,7 @@ export default{
 
 					let imgSrc
 					for(const b in screens){
-						if(window.innerWidth > b && screens[b] in src){
+						if(document.documentElement.clientWidth > b && screens[b] in src){
 							imgSrc = src[screens[b]]
 						}
 					}
@@ -201,7 +201,7 @@ export default{
 
 				let imgSrc
 				for(const b in screens){
-					if(window.innerWidth > b && screens[b] in src){
+					if(document.documentElement.clientWidth > b && screens[b] in src){
 						imgSrc = src[screens[b]]
 					}
 				}
@@ -260,7 +260,7 @@ export default{
 	watch:{
 
 		src(to, from){
-			this.loadSrc()
+      this.loadSrc()
 		},
 
 	}

package/src/index.js

@@ -266,6 +266,10 @@ const util = {
 
 }
 
+const isTouchSupported = () => {
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
+}
+
 export default{
 
   install: (app, options) => {
@@ -339,6 +343,7 @@ export default{
     app.config.globalProperties.time = consoleTime
     app.config.globalProperties.timeLog = consoleTimeLog
     app.config.globalProperties.timeEnd = consoleTimeEnd
+    app.config.globalProperties.$isTouchSupported = isTouchSupported
 
     app.config.globalProperties.$isDev = () => import.meta.env.DEV
 

package/src/widgets/FAQ.vue

@@ -3,8 +3,8 @@
 		<h3>{{ title }}</h3>
 		<div :class="$style.items">
 			<div v-for="(item, idx) in items" :class="$style.item">
-				<input type="checkbox" :name="$style.comp" :id="`${$style.comp}${idx}`" />
-				<label :for="`${$style.comp}${idx}`" class="text-lg">{{ item.question }}</label>
+				<input type="checkbox" :name="$style.comp" :id="`${$style.comp}${id}${idx}`" />
+				<label :for="`${$style.comp}${id}${idx}`" class="text-lg">{{ item.question }}</label>
 				<div>
 					<div class="p-4 pt-0 pb-8 text-lg" v-html="item.answer"></div>
 				</div>
@@ -29,7 +29,13 @@ export default{
 	props:{
 		title: String,
 		items: Array
-	}
+	},
+
+  data(){
+    return {
+      id: this.uniqid()
+    }
+  }
 
 }