@mixd-id/web-scaffold 0.1.230406202 → 0.1.230406204

package/package.json

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

package/src/components/Carousel.vue

@@ -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/components/Textarea.vue

@@ -160,7 +160,7 @@ export default{
 .size-sm textarea{ @apply text-sm; }
 
 .size-lg{ @apply min-h-[var(--h-cp-lg)]; }
-.size-lg textarea{ @apply text-lg p-3; }
+.size-lg textarea{ @apply text-lg p-2; }
 
 
 .active{

package/src/components/Textbox.vue

@@ -187,7 +187,7 @@ export default{
 
 
 .textbox>input{
-	@apply flex-1 outline-none p-3 bg-transparent;
+	@apply flex-1 outline-none p-2 bg-transparent;
 	font-size: inherit;
 }
 

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