@onereach/ui-components 4.16.0 → 4.16.1-beta.3079.0

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

@@ -3,6 +3,7 @@ import { defineComponent, ref, computed, toRef, watch, unref } from 'vue-demi';
 import { BottomSheetVariant } from './props.js';
 import { BottomSheet, BottomSheetVariants, BottomSheetHandle, BottomSheetHeader } from './styles.js';
 import __vue_component__$1 from '../OrOverlayV3/OrOverlay.js';
+import { useTheme } from '../../hooks/useTheme.js';
 import { usePopoverState } from '../../hooks/usePopoverState.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../../index-ec92055d.js';
@@ -11,6 +12,9 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
+import '../../_commonjsHelpers-48a9cab9.js';
+import 'node:tty';
+import 'node:util';
 
 var script = defineComponent({
   name: 'OrBottomSheet',
@@ -34,6 +38,9 @@ var script = defineComponent({
     // Refs
     const root = ref();
     const content = ref();
+    const inlineSwipingStyles = ref({});
+    const skipSwipe = ref(false);
+    const theme = useTheme();
     // Styles
     const rootStyles = computed(() => ['or-bottom-sheet-v3', ...BottomSheet, ...BottomSheetVariants[props.variant]]);
     const handleStyles = computed(() => [...BottomSheetHandle]);
@@ -56,19 +63,19 @@ var script = defineComponent({
     };
     // Effects
     // #region Swipe
-    const swipeOptions = {
-      threshold: 4,
+    const {
+      isSwiping
+    } = usePointerSwipe(root, {
+      threshold: 12,
       onSwipe(event) {
-        if (isEventSkipped(event)) {
-          return;
-        }
+        skipSwipe.value = isEventSkipped(event);
         if (props.variant === BottomSheetVariant.Advanced) {
           const rootElement = unref(root);
-          Object.assign(rootElement.style, {
+          inlineSwipingStyles.value = {
             transitionProperty: 'none',
             minHeight: `${rootElement.clientHeight - event.offsetY}px`,
             maxHeight: `${rootElement.clientHeight - event.offsetY}px`
-          });
+          };
         }
       },
       onSwipeEnd(event, direction) {
@@ -76,22 +83,11 @@ var script = defineComponent({
           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 {
@@ -101,9 +97,19 @@ var script = defineComponent({
           }
         }
       }
-    };
-    usePointerSwipe(root, swipeOptions);
+    });
     // #endregion
+    const rootInlineStyles = computed(() => {
+      return isSwiping.value && !skipSwipe.value ? inlineSwipingStyles.value : fullscreen.value ? {
+        transitionProperty: 'min-height, max-height',
+        minHeight: `calc(100% - ${theme.spacing.xl})`,
+        maxHeight: `calc(100% - ${theme.spacing.xl})`
+      } : {
+        transitionProperty: 'min-height, max-height',
+        minHeight: '0',
+        maxHeight: '50%'
+      };
+    });
     // #region Click Outside
     onClickOutside(root, event => {
       const path = event.composedPath();
@@ -121,6 +127,7 @@ var script = defineComponent({
       root,
       content,
       rootStyles,
+      rootInlineStyles,
       handleStyles,
       headerStyles,
       state,
@@ -146,7 +153,8 @@ var __vue_render__ = function () {
     }
   }, [_c('div', _vm._b({
     ref: "root",
-    class: _vm.rootStyles
+    class: _vm.rootStyles,
+    style: _vm.rootInlineStyles
   }, 'div', _vm.$attrs, false), [_vm.variant === 'advanced' ? [_c('div', {
     class: _vm.handleStyles
   })] : _vm._e(), _vm._v(" "), _c('div', {