Merge branch 'release/v0.19.1'

holtwick · May 19, 2024 · 0b588b0 · 0b588b0
2 parents 3a3fe7c + 7bc3974
commit 0b588b0
Show file tree

Hide file tree

Showing 13 changed files with 32 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no, maximum-scale=1, minimum-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no, maximum-scale=1, minimum-scale=1, height=device-height">    
     <title>Oui</title>
     <link rel="icon" href="/favicon.ico" sizes="any">
     <link rel="icon" href="/logo.svg" type="image/svg+xml">

diff --git a/lib/index.styl b/lib/index.styl
@@ -3,3 +3,4 @@
 @require "./modal/index.styl";
 @require "./notification/index.styl";
 @require "./object/index.styl";
+@require "./mobile/index.styl";
diff --git a/lib/lib.ts b/lib/lib.ts
@@ -3,3 +3,4 @@ export * from './float'
 export * from './modal'
 export * from './notification'
 export * from './object'
+export * from './mobile'
diff --git a/lib/mobile/index.styl b/lib/mobile/index.styl
@@ -0,0 +1 @@
+@require "./oui-mobile.styl";
diff --git a/lib/mobile/index.ts b/lib/mobile/index.ts
@@ -0,0 +1 @@
+export { default as OuiMobileActivator } from './oui-mobile.vue'
diff --git a/lib/mobile/oui-mobile.demo.vue b/lib/mobile/oui-mobile.demo.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div>
+    Enables fixes for use on mobiles, especially for virtual keyboards and scrolling issues on iOS.
+  </div>
+</template>
diff --git a/lib/mobile/oui-mobile.md b/lib/mobile/oui-mobile.md
@@ -0,0 +1,7 @@
+# oui-mobile
+
+Place it somewhere to let the magic happen:
+
+```vue
+<OuiMobileActivator />
+```
diff --git a/src/oui-mobile.styl → lib/mobile/oui-mobile.styl b/src/oui-mobile.styl → lib/mobile/oui-mobile.styl
@@ -1,21 +1,20 @@
 @require "../stylus/index.styl";
 
 html.oui-mobile {
-  height: 100%;
-
   &, body {
     /* This seems to fix overscrolling */
     /* https://www.bram.us/2016/05/02/prevent-overscroll-bounce-in-ios-mobilesafari-pure-css/ */
     overflow: hidden;
+    height: 100%;
   }
 
   & {
     /* https://forums.developer.apple.com/forums/thread/48088 */
     transition: height 400ms cubic-bezier(0.38, 0.7, 0.125, 1);
   }
 
-  body {
-    /* Should avoids overflow */
+  & {
+    /* Avoids bouncy scrolling */
     -webkit-overflow-scrolling: none;
     overscroll-behavior: none;
   }

diff --git a/src/oui-mobile.vue → lib/mobile/oui-mobile.vue b/src/oui-mobile.vue → lib/mobile/oui-mobile.vue
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "oui-kit",
   "type": "module",
-  "version": "0.19.0",
+  "version": "0.19.1",
   "author": {
     "email": "[email protected]",
     "name": "Dirk Holtwick",
@@ -81,7 +81,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^2.18.1",
     "@antfu/ni": "^0.21.12",
-    "@shikijs/markdown-it": "^1.5.2",
+    "@shikijs/markdown-it": "^1.6.0",
     "@tsconfig/node18": "^18.2.4",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.12.12",

diff --git a/src/app-mobile-using-oui.vue b/src/app-mobile-using-oui.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-import OuiMobile from './oui-mobile.vue'
+import { OuiMobileActivator } from '@/lib'
+
 import './app-mobile-using-oui.styl'
 </script>
 
 <template>
-  <OuiMobile />
+  <OuiMobileActivator />
   <div class="app-mobile">
     <header>
       Header

diff --git a/src/app-mobile.styl b/src/app-mobile.styl
@@ -72,7 +72,7 @@ footer {
   }
 }
 
-body {
+html {
   /* Avoids overflow */
   -webkit-overflow-scrolling: none;
   overscroll-behavior: none;

diff --git a/src/app.vue b/src/app.vue
@@ -3,8 +3,7 @@ import { useLocalStorage } from '@vueuse/core'
 import { computed, onMounted, ref } from 'vue'
 import { last, sortedOrderby } from 'zeed'
 import pkg from '../package.json'
-import OuiMobile from './oui-mobile.vue'
-import { OuiButton, OuiCheckbox, OuiNotice, OuiResizeable, OuiText, OuiTooltipActivator } from '@/lib'
+import { OuiButton, OuiCheckbox, OuiMobileActivator, OuiNotice, OuiResizeable, OuiText, OuiTooltipActivator } from '@/lib'
 
 import './app.styl'
 
@@ -141,5 +140,5 @@ function toggleDark() {
     </div>
   </div>
   <OuiTooltipActivator />
-  <OuiMobile />
+  <OuiMobileActivator />
 </template>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as OuiMobileActivator } from './oui-mobile.vue'
-Original file line number
+Diff line change
@@ Expand Up / @@ -72,7 +72,7 @@ footer { @@
       }
     }
-    body {
+    html {
       /* Avoids overflow */
       -webkit-overflow-scrolling: none;
       overscroll-behavior: none;
@@ Expand Down @@