@onereach/ui-components 4.18.0 → 4.18.1-beta.3095.0

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

@@ -1,11 +1,16 @@
-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 { o as onClickOutside } from '../../index-509d77a1.js';
+import { defineComponent, ref, toRef, watch, computed } from 'vue-demi';
 import { BottomSheetVariant } from './props.js';
-import { BottomSheet, BottomSheetVariants, BottomSheetHandle, BottomSheetHeader } from './styles.js';
+import { BottomSheet, BottomSheetVariants, BottomSheetHandle, BottomSheetHeader, BottomSheetContent } from './styles.js';
+import useBottomSheetSwipeState from './hooks/useBottomSheetSwipeState.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';
@@ -34,10 +39,6 @@ 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,
@@ -46,64 +47,17 @@ 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();
@@ -117,10 +71,17 @@ 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,
@@ -146,14 +107,15 @@ 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', {
     class: _vm.headerStyles
   }, [_vm._t("header")], 2), _vm._v(" "), _c('div', {
     ref: "content",
-    class: [_vm.fullscreen ? 'overflow-y-auto' : 'overflow-hidden']
+    class: _vm.contentStyles
   }, [_vm._t("default")], 2)], 2)]) : _vm._e();
 };
 var __vue_staticRenderFns__ = [];