From 96f331e2e33e077766937c9dfc0324bbf75abfc6 Mon Sep 17 00:00:00 2001
From: Dirk Holtwick <dirk.holtwick@gmail.com>
Date: Wed, 7 Aug 2024 16:31:53 +0200
Subject: [PATCH 1/3] fix: oui-draggable

---
 lib/basic/oui-draggable.demo.vue | 48 ++++++++++++++++++++++++++++++++
 lib/basic/oui-draggable.vue      | 26 ++++++++---------
 lib/mobile/oui-mobile.vue        |  3 +-
 3 files changed, 63 insertions(+), 14 deletions(-)
 create mode 100644 lib/basic/oui-draggable.demo.vue

diff --git a/lib/basic/oui-draggable.demo.vue b/lib/basic/oui-draggable.demo.vue
new file mode 100644
index 0000000..8cc6997
--- /dev/null
+++ b/lib/basic/oui-draggable.demo.vue
@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import type { OuiDraggableEvent } from '@/lib'
+import { OuiDemo, OuiDraggable, OuiInputNumber } from '@/lib'
+
+const state = reactive({
+  x: 100,
+  y: 100,
+})
+
+const data = ref({})
+
+function move(e: OuiDraggableEvent) {
+  data.value = e
+  state.x += e.deltaX
+  state.y += e.deltaY
+}
+</script>
+
+<template>
+  <h2>Draggable</h2>
+
+  <OuiDraggable
+    class="app-draggable-box"
+    :style="{
+      left: `${state.x}px`,
+      top: `${state.y}px`,
+    }"
+    @move="move"
+  >
+    {{ data }}
+  </OuiDraggable>
+
+  <OuiDemo :state="state">
+    <OuiInputNumber v-model="state.x" title="X" />
+    <OuiInputNumber v-model="state.y" title="Y" />
+  </OuiDemo>
+</template>
+
+<style>
+.app-draggable-box {
+  background: purple;
+  color: white;
+  position: absolute;
+  width: 200px;
+  height:200px;
+}
+</style>
diff --git a/lib/basic/oui-draggable.vue b/lib/basic/oui-draggable.vue
index f0131a3..05d6484 100644
--- a/lib/basic/oui-draggable.vue
+++ b/lib/basic/oui-draggable.vue
@@ -24,8 +24,8 @@ let lastY = 0
 let deltaX = 0
 let deltaY = 0
 
-function translateMouseEvent(e: MouseEvent): OuiDraggableEvent {
-  const { pageX, pageY } = e
+function translateTouchEvent(e: TouchEvent): OuiDraggableEvent {
+  const { pageX, pageY } = e?.touches?.[0] ?? e
   deltaX = pageX - lastX
   deltaY = pageY - lastY
   lastX = pageX
@@ -46,37 +46,37 @@ function translateMouseEvent(e: MouseEvent): OuiDraggableEvent {
   return info
 }
 
-function cancelEvent(e: MouseEvent) {
+function cancelEvent(e: TouchEvent) {
   // log('sep cancel')
   e?.stopPropagation()
   e?.preventDefault()
 }
 
-function onMouseDown(e: MouseEvent) {
+function onMouseDown(e: TouchEvent) {
   log('down')
-  const { pageX, pageY } = e
+  const { pageX, pageY } = e?.touches?.[0] ?? e
   dragging = true
   startX = pageX
   startY = pageY
   lastX = pageX
   lastY = pageY
-  emit('moveStart', translateMouseEvent(e))
+  emit('moveStart', translateTouchEvent(e))
   bindEvents()
   return cancelEvent(e)
 }
 
-function onMouseMove(e: MouseEvent) {
-  log('move')
+function onMouseMove(e: TouchEvent) {
+  log('move', dragging, e)
   if (!dragging)
     return
-  emit('move', translateMouseEvent(e))
+  emit('move', translateTouchEvent(e))
   return cancelEvent(e)
 }
 
-function onMouseUp(e: MouseEvent) {
+function onMouseUp(e: TouchEvent) {
   log('up')
   dragging = false
-  emit('moveEnd', translateMouseEvent(e))
+  emit('moveEnd', translateTouchEvent(e))
   unbindEvents()
   return cancelEvent(e)
 }
@@ -88,7 +88,7 @@ function onDblClick() {
 const mouseOptions = { passive: false }
 
 useEventListener(el, 'mousedown', onMouseDown)
-useEventListener(el, 'touchdown', onMouseDown)
+useEventListener(el, 'touchstart', onMouseDown)
 useEventListener(el, 'dblclick', onDblClick)
 
 let docListeners: any[] = []
@@ -110,7 +110,7 @@ function unbindEvents() {
 </script>
 
 <template>
-  <div ref="el">
+  <div ref="el" data-noscroll="true">
     <slot />
   </div>
 </template>
diff --git a/lib/mobile/oui-mobile.vue b/lib/mobile/oui-mobile.vue
index 79995f1..a4d9135 100644
--- a/lib/mobile/oui-mobile.vue
+++ b/lib/mobile/oui-mobile.vue
@@ -75,7 +75,8 @@ if (useSingleton('oui-mobile')) {
       while (el != null) {
         if (el.dataset.noscroll === 'true') {
           log('exit noscroll')
-          break
+          return
+          // break
         }
         if (el.tagName === 'BODY') {
           log('exit body')

From 2a2edc0c1c11316d9bdc7fffb582123d5469620e Mon Sep 17 00:00:00 2001
From: Dirk Holtwick <dirk.holtwick@gmail.com>
Date: Wed, 7 Aug 2024 17:23:28 +0200
Subject: [PATCH 2/3] feat: drag close modal

---
 lib/basic/_types.ts         |  1 +
 lib/basic/oui-draggable.vue | 40 +++++++++++++++++++++++++++++--------
 lib/mobile/drag-util.ts     | 33 ++++++++++++++++++++++++++++++
 lib/mobile/oui-mobile.vue   | 24 ++++------------------
 lib/modal/oui-modal.vue     | 35 ++++++++++++++++++++++++++------
 5 files changed, 99 insertions(+), 34 deletions(-)
 create mode 100644 lib/mobile/drag-util.ts

diff --git a/lib/basic/_types.ts b/lib/basic/_types.ts
index 35f53e8..3624786 100644
--- a/lib/basic/_types.ts
+++ b/lib/basic/_types.ts
@@ -36,6 +36,7 @@ export interface OuiDraggableEvent {
   deltaY: number
   moveX: number
   moveY: number
+  timeMS: number
   // page: OuiDraggablePosition
   // delta: OuiDraggablePosition
   // pos: OuiDraggablePosition
diff --git a/lib/basic/oui-draggable.vue b/lib/basic/oui-draggable.vue
index 05d6484..68f1974 100644
--- a/lib/basic/oui-draggable.vue
+++ b/lib/basic/oui-draggable.vue
@@ -1,10 +1,15 @@
 <script lang="ts" setup>
-import { useEventListener } from '@vueuse/core'
+import { timestamp, useEventListener } from '@vueuse/core'
 import { ref } from 'vue'
 import type { LoggerInterface } from 'zeed'
-import { Logger } from 'zeed'
+import { Logger, getTimestamp } from 'zeed'
+import { isInsideScrollable } from '../mobile/drag-util'
 import type { OuiDraggableEvent } from './_types'
 
+const props = defineProps<{
+  onlyTouch?: boolean
+}>()
+
 const emit = defineEmits<{
   moveStart: [OuiDraggableEvent]
   move: [OuiDraggableEvent]
@@ -15,6 +20,7 @@ const log: LoggerInterface = Logger('oui-draggable')
 
 const el = ref()
 
+let timeStart = 0
 let dragging = false
 let collapsed = false
 let startX = 0
@@ -23,6 +29,7 @@ let lastX = 0
 let lastY = 0
 let deltaX = 0
 let deltaY = 0
+let lastEvent: OuiDraggableEvent | undefined
 
 function translateTouchEvent(e: TouchEvent): OuiDraggableEvent {
   const { pageX, pageY } = e?.touches?.[0] ?? e
@@ -32,7 +39,7 @@ function translateTouchEvent(e: TouchEvent): OuiDraggableEvent {
   lastY = pageY
   const moveX = startX - pageX
   const moveY = startY - pageY
-  const info = {
+  const info: OuiDraggableEvent = {
     startX,
     startY,
     pageX,
@@ -41,8 +48,10 @@ function translateTouchEvent(e: TouchEvent): OuiDraggableEvent {
     deltaY,
     moveX,
     moveY,
+    timeMS: getTimestamp() - timeStart,
   }
   log('event', info)
+  lastEvent = info
   return info
 }
 
@@ -53,8 +62,12 @@ function cancelEvent(e: TouchEvent) {
 }
 
 function onMouseDown(e: TouchEvent) {
+  if (e.target && el.value && isInsideScrollable(e.target as any, el.value))
+    return
+
   log('down')
   const { pageX, pageY } = e?.touches?.[0] ?? e
+  timeStart = getTimestamp()
   dragging = true
   startX = pageX
   startY = pageY
@@ -76,7 +89,10 @@ function onMouseMove(e: TouchEvent) {
 function onMouseUp(e: TouchEvent) {
   log('up')
   dragging = false
-  emit('moveEnd', translateTouchEvent(e))
+  if (lastEvent)
+    lastEvent.timeMS = getTimestamp() - timeStart
+  emit('moveEnd', lastEvent ?? translateTouchEvent(e))
+  lastEvent = undefined
   unbindEvents()
   return cancelEvent(e)
 }
@@ -87,20 +103,28 @@ function onDblClick() {
 
 const mouseOptions = { passive: false }
 
-useEventListener(el, 'mousedown', onMouseDown)
+if (!props.onlyTouch) {
+  useEventListener(el, 'mousedown', onMouseDown)
+  useEventListener(el, 'dblclick', onDblClick)
+}
+
 useEventListener(el, 'touchstart', onMouseDown)
-useEventListener(el, 'dblclick', onDblClick)
 
 let docListeners: any[] = []
 
 // https://github.com/antoniandre/splitpanes/blob/master/src/components/splitpanes/splitpanes.vue
 function bindEvents() {
   docListeners = [
-    useEventListener(document, 'mousemove', onMouseMove, mouseOptions),
-    useEventListener(document, 'mouseup', onMouseUp),
     useEventListener(document, 'touchmove', onMouseMove, mouseOptions),
     useEventListener(document, 'touchend', onMouseUp),
   ]
+
+  if (!props.onlyTouch) {
+    docListeners.push(
+      useEventListener(document, 'mousemove', onMouseMove, mouseOptions),
+      useEventListener(document, 'mouseup', onMouseUp),
+    )
+  }
 }
 
 function unbindEvents() {
diff --git a/lib/mobile/drag-util.ts b/lib/mobile/drag-util.ts
new file mode 100644
index 0000000..90c5125
--- /dev/null
+++ b/lib/mobile/drag-util.ts
@@ -0,0 +1,33 @@
+import type { LoggerInterface } from 'zeed'
+import { Logger } from 'zeed'
+
+const log: LoggerInterface = Logger('drag-util')
+
+export function isInsideScrollable(el?: HTMLElement | null, childOf?: HTMLElement) {
+  // Figure out, if we are inside an element with custom scrolling
+
+  // log('isInsideScrollable', el, childOf, childOf?.contains(el))
+  while (el != null) {
+    if (childOf && (!childOf?.contains(el) || childOf.isSameNode(el)))
+      return false
+
+    if (el.dataset.noscroll === 'true') {
+      log('exit noscroll')
+      return true
+      // break
+    }
+    if (el.tagName === 'BODY') {
+      log('exit body')
+      return true
+    }
+    const { overflow } = window.getComputedStyle(el)
+    if (overflow.split(' ').some(o => o === 'auto' || o === 'scroll')) {
+      log('exit scroll', el.scrollTop, overflow)
+      // if (el.scrollTop <= 0)
+      //   return false
+      return true
+    }
+    el = el.parentElement
+  }
+  return false
+}
diff --git a/lib/mobile/oui-mobile.vue b/lib/mobile/oui-mobile.vue
index a4d9135..346d731 100644
--- a/lib/mobile/oui-mobile.vue
+++ b/lib/mobile/oui-mobile.vue
@@ -6,6 +6,7 @@ import { Logger } from 'zeed'
 import { useSingleton } from '../basic/singleton'
 
 import './oui-mobile.styl'
+import { isInsideScrollable } from './drag-util'
 
 const props = defineProps<{
   mode?: 'app' | 'body'
@@ -70,26 +71,9 @@ if (useSingleton('oui-mobile')) {
       // if (virtualKeyboardActive === false)
       //   return
 
-      // Figure out, if we are inside an element with custom scrolling
-      let el = ev.target as HTMLElement | undefined | null
-      while (el != null) {
-        if (el.dataset.noscroll === 'true') {
-          log('exit noscroll')
-          return
-          // break
-        }
-        if (el.tagName === 'BODY') {
-          log('exit body')
-          return
-        }
-        const { overflow } = window.getComputedStyle(el)
-        if (overflow.split(' ').some(o => o === 'auto' || o === 'scroll')) {
-          log('exit scroll', overflow)
-          return
-        }
-        el = el.parentElement
-      }
-
+      if (isInsideScrollable(ev.target as any))
+        return
+      
       log('prevent scroll')
       // If not avoid scrolling
       ev.preventDefault()
diff --git a/lib/modal/oui-modal.vue b/lib/modal/oui-modal.vue
index ff80340..6bf1d6f 100644
--- a/lib/modal/oui-modal.vue
+++ b/lib/modal/oui-modal.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-import { onKeyStroke, useScrollLock } from '@vueuse/core'
-import { onBeforeUnmount, ref, watch } from 'vue'
+import { onKeyStroke, useScrollLock, useWindowSize } from '@vueuse/core'
+import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import type { OuiDraggableEvent } from '../basic'
 import { OuiClose } from '../basic'
+import OuiDraggable from '../basic/oui-draggable.vue'
 import { vFocustrap } from './oui-modal.focustrap'
 
 import './oui-modal.styl'
@@ -49,7 +51,7 @@ let scrollOffset: any
 const scrollElement = document.scrollingElement as HTMLElement
 
 function blockScrolling() {
-  // scrollOffset = window.pageYOffset
+  // scrollOffset = window.moveYOffset
 
   // if (scrollElement) {
   //   scrollElement.style.overflow = 'hidden'
@@ -92,7 +94,6 @@ function didOpen() {
 }
 
 function triggerActiveClass(active: boolean = false) {
-  
   scrollLock.value = active
   if (active)
     document.documentElement.classList.add('oui-modal-active')
@@ -105,6 +106,21 @@ watch(_active, triggerActiveClass, { immediate: true })
 onBeforeUnmount(doClose)
 
 const name = 'oui-modal' // computed(() => String(attrs.class || 'oui-modal').split(/\s+/gim)?.[0])
+
+//
+
+const { height } = useWindowSize()
+
+const dragY = ref(0)
+
+async function checkClose(e: OuiDraggableEvent) {
+  // console.log('checkclose', dragY.value, e.timeMS, height.value / 3, e)
+  if (dragY.value > (height.value / 3) || (dragY.value > 40 && e.timeMS < 500))
+    doClose()
+
+  await nextTick()
+  dragY.value = 0
+}
 </script>
 
 <template>
@@ -136,7 +152,14 @@ const name = 'oui-modal' // computed(() => String(attrs.class || 'oui-modal').sp
           aria-label="Close"
           @click="doCancel"
         />
-        <div v-focustrap class="_modal_container">
+        <OuiDraggable
+          v-focustrap
+          class="_modal_container"
+          only-touch
+          :style="{ transform: `translateY(${dragY}px)` }"
+          @move="e => dragY = -e.moveY"
+          @move-end="checkClose"
+        >
           <button
             v-if="close"
             tooltip="Close"
@@ -161,7 +184,7 @@ const name = 'oui-modal' // computed(() => String(attrs.class || 'oui-modal').sp
           <footer v-if="$slots.footer" class="oui-modal-footer footer _modal_footer">
             <slot name="footer" />
           </footer>
-        </div>
+        </OuiDraggable>
       </div>
     </Transition>
   </Teleport>

From bbc21f1ada88ddfa32b9d7c108f3f761da953d2c Mon Sep 17 00:00:00 2001
From: Dirk Holtwick <dirk.holtwick@gmail.com>
Date: Wed, 7 Aug 2024 17:23:32 +0200
Subject: [PATCH 3/3] 0.22.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5978f70..cef5059 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "oui-kit",
   "type": "module",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "author": {
     "email": "dirk.holtwick@gmail.com",
     "name": "Dirk Holtwick",