@onereach/ui-components 4.17.1-beta.3096.0 → 4.18.0

package/dist/bundled/v2/components/OrBottomSheetV3/OrBottomSheet.js

@@ -1,16 +1,11 @@
-import { o as onClickOutside } from '../../index-509d77a1.js';
-import { defineComponent, ref, toRef, watch, computed } from 'vue-demi';
+import { g as usePointerSwipe, o as onClickOutside, S as SwipeDirection } from '../../index-760079e7.js';
+import { defineComponent, ref, computed, toRef, watch, unref } from 'vue-demi';
 import { BottomSheetVariant } from './props.js';
-import { BottomSheet, BottomSheetVariants, BottomSheetHandle, BottomSheetHeader, BottomSheetContent } from './styles.js';
-import useBottomSheetSwipeState from './hooks/useBottomSheetSwipeState.js';
+import { BottomSheet, BottomSheetVariants, BottomSheetHandle, BottomSheetHeader } from './styles.js';
 import __vue_component__$1 from '../OrOverlayV3/OrOverlay.js';
 import { usePopoverState } from '../../hooks/usePopoverState.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../../index-ec92055d.js';
-import '../../hooks/useTheme.js';
-import '../../_commonjsHelpers-48a9cab9.js';
-import 'node:tty';
-import 'node:util';
 import '../OrOverlayV3/styles.js';
 import '../OrTeleportV3/OrTeleport.js';
 import 'vue';
@@ -39,6 +34,10 @@ var script = defineComponent({
     // Refs
     const root = ref();
     const content = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-bottom-sheet-v3', ...BottomSheet, ...BottomSheetVariants[props.variant]]);
+    const handleStyles = computed(() => [...BottomSheetHandle]);
+    const headerStyles = computed(() => [...BottomSheetHeader]);
     // State
     const {
       state,
@@ -47,17 +46,64 @@ var script = defineComponent({
       toggle
     } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     const fullscreen = ref(false);
-    // Effects
-    // #region Swipe
-    const {
-      rootInlineStyles
-    } = useBottomSheetSwipeState(root, content, fullscreen, toRef(props, 'variant'), close);
-    // #endregion
     watch(state, value => {
       if (value === 'closed') {
         fullscreen.value = false;
       }
     });
+    const isEventSkipped = event => {
+      return event.composedPath().includes(content.value) && fullscreen.value;
+    };
+    // Effects
+    // #region Swipe
+    const swipeOptions = {
+      threshold: 4,
+      onSwipe(event) {
+        if (isEventSkipped(event)) {
+          return;
+        }
+        if (props.variant === BottomSheetVariant.Advanced) {
+          const rootElement = unref(root);
+          Object.assign(rootElement.style, {
+            transitionProperty: 'none',
+            minHeight: `${rootElement.clientHeight - event.offsetY}px`,
+            maxHeight: `${rootElement.clientHeight - event.offsetY}px`
+          });
+        }
+      },
+      onSwipeEnd(event, direction) {
+        if (isEventSkipped(event)) {
+          return;
+        }
+        if (props.variant === BottomSheetVariant.Advanced) {
+          const rootElement = unref(root);
+          switch (direction) {
+            case SwipeDirection.UP:
+              Object.assign(rootElement.style, {
+                transitionProperty: 'min-height, max-height',
+                minHeight: '100%',
+                maxHeight: '100%'
+              });
+              fullscreen.value = true;
+              break;
+            case SwipeDirection.DOWN:
+              Object.assign(rootElement.style, {
+                transitionProperty: 'min-height, max-height',
+                minHeight: '0',
+                maxHeight: '50%'
+              });
+              if (fullscreen.value) {
+                fullscreen.value = false;
+              } else {
+                close();
+              }
+              break;
+          }
+        }
+      }
+    };
+    usePointerSwipe(root, swipeOptions);
+    // #endregion
     // #region Click Outside
     onClickOutside(root, event => {
       const path = event.composedPath();
@@ -71,17 +117,10 @@ var script = defineComponent({
       }
     });
     // #endregion
-    // Styles
-    const rootStyles = computed(() => ['or-bottom-sheet-v3', ...BottomSheet, ...BottomSheetVariants[props.variant]]);
-    const handleStyles = computed(() => [...BottomSheetHandle]);
-    const headerStyles = computed(() => [...BottomSheetHeader]);
-    const contentStyles = computed(() => [...BottomSheetContent, fullscreen.value || props.variant === BottomSheetVariant.Basic ? 'overflow-y-auto' : 'overflow-hidden']);
     return {
       root,
       content,
       rootStyles,
-      rootInlineStyles,
-      contentStyles,
       handleStyles,
       headerStyles,
       state,
@@ -107,15 +146,14 @@ var __vue_render__ = function () {
     }
   }, [_c('div', _vm._b({
     ref: "root",
-    class: _vm.rootStyles,
-    style: _vm.rootInlineStyles
+    class: _vm.rootStyles
   }, 'div', _vm.$attrs, false), [_vm.variant === 'advanced' ? [_c('div', {
     class: _vm.handleStyles
   })] : _vm._e(), _vm._v(" "), _c('div', {
     class: _vm.headerStyles
   }, [_vm._t("header")], 2), _vm._v(" "), _c('div', {
     ref: "content",
-    class: _vm.contentStyles
+    class: [_vm.fullscreen ? 'overflow-y-auto' : 'overflow-hidden']
   }, [_vm._t("default")], 2)], 2)]) : _vm._e();
 };
 var __vue_staticRenderFns__ = [];