feat: #274 improve DOM architecture of VFullscreen, VBottomSheet

Author: hunterliu1003

packages/docs/components/content/FullScreen.vue

@@ -8,7 +8,8 @@ const emit = defineEmits<{
 
 <template>
   <VFullscreen
-    fullscreen-class="p-4 bg-primary-50 dark:bg-gray-800"
+    content-class="p-4 bg-primary-50 dark:bg-gray-800"
+    close-direction="RIGHT"
     @update:model-value="val => emit('update:modelValue', val)"
   >
     <h1 class="mb-4 text-2xl">

packages/docs/content/3.api/1.components/2.v-full-screen.md

@@ -33,28 +33,6 @@ Hide the overlay or not.
     - TS: `PropType<boolean>`{lang=ts}
   - Default: `true`{lang=ts}
 
-### fullscreenClass
-
-Bind class to `.vfm-fullscreen-content`{lang=ts} element.
-  - Type:
-    - JS: `[Object, Array, String]`{lang=ts}
-    - TS: `[Object, Array, String] as unknown as PropType<any>`{lang=ts}
-  - Default: `undefined`{lang=ts}
-
-### fullscreenStyle
-
-Bind style to `.vfm-fullscreen-content`{lang=ts} element.
-  - Type:
-    - JS: `[String, Object, Array]`{lang=ts}
-    - TS: `PropType<StyleValue>`{lang=ts}
-      ```ts
-      export type StyleValue = string | CSSProperties | (string | CSSProperties)[]
-      ```
-      ```ts
-      import { StyleValue } from 'vue-final-modal'
-      ```
-  - Default: `undefined`{lang=ts}
-
 ### closeDirection
 
 The direction of swiping to close the full screen modal
@@ -69,7 +47,7 @@ Threshold for swipe to close
   - Type:
     - JS: `Number`{lang=ts}
     - TS: `PropType<number>`{lang=ts}
-  - Default: `30`
+  - Default: `0`
 
 ### showSwipeBanner
 

packages/docs/content/3.api/1.components/3.v-bottom-sheet.md

@@ -25,28 +25,6 @@ It will be helpful for understanding the naming of [props](#props).
 
 `<VBottomSheet>`{lang=ts} also provides the following properties:
 
-### bottomSheetClass
-
-Bind class to `.vfm-bottom-sheet-content`{lang=ts} element.
-  - Type:
-    - JS: `[Object, Array, String]`{lang=ts}
-    - TS: `[Object, Array, String] as unknown as PropType<any>`{lang=ts}
-  - Default: `undefined`{lang=ts}
-
-### bottomSheetStyle
-
-Bind style to `.vfm-bottom-sheet-content`{lang=ts} element.
-  - Type:
-    - JS: `[String, Object, Array]`{lang=ts}
-    - TS: `PropType<StyleValue>`{lang=ts}
-      ```ts
-      export type StyleValue = string | CSSProperties | (string | CSSProperties)[]
-      ```
-      ```ts
-      import { StyleValue } from 'vue-final-modal'
-      ```
-  - Default: `undefined`{lang=ts}
-
 ### closeDirection
 
 The direction of swiping to close the bottom sheet modal
@@ -61,7 +39,7 @@ Threshold for swipe to close
   - Type:
     - JS: `Number`{lang=ts}
     - TS: `PropType<number>`{lang=ts}
-  - Default: `30`
+  - Default: `0`
 
 ## Events
 

packages/viteplay/src/components/VBottomSheet/Basic.example.vue

@@ -15,7 +15,7 @@ const bottomSheet = useModal<
   component: markRaw(VBottomSheet),
   attrs: {
     background: 'interactive',
-    bottomSheetStyle: {
+    contentStyle: {
       backgroundColor: '#fff',
     },
   },
@@ -51,24 +51,23 @@ function beforeOpen(e: any) {
     <VBottomSheet
       v-model="show"
       :modal-id="theModalId"
+      content-style="background-color: #fff; border-top-left-radius: 12px; border-top-right-radius: 12px;"
       @before-open="beforeOpen"
     >
-      <div style="background-color: #fff; height: 500px; border-top-left-radius: 12px; border-top-right-radius: 12px;">
-        <div>Direct use vfm</div>
-        <button @click="() => toggle(theModalId)">
-          close modal by modal modalId
-        </button>
-        <button @click="show = false">
-          close
-        </button>
-      </div>
-      <!-- <div style="background-color: #fff; height: 500px">
+      <div>Direct use vfm</div>
+      <button @click="() => toggle(theModalId)">
+        close modal by modal modalId
+      </button>
+      <button @click="show = false">
+        close
+      </button>
+      <div style="height: 300px">
         Direct use vfm
-      </div> -->
-      <!-- <div style="background-color: #fff; height: 500px">
+      </div>
+      <!-- <div style="min-height: 500px">
         Direct use vfm
-      </div> -->
-      <!-- <div style="background-color: #fff; height: 500px">
+      </div>
+      <div style="min-height: 500px">
         Direct use vfm
       </div> -->
     </VBottomSheet>

packages/viteplay/src/components/VFullScreen/Basic.example.vue

@@ -15,8 +15,8 @@ const fullscreenModal = useModal<
     attrs: {
       background: 'interactive',
       closeDirection: 'RIGHT',
-      showSwipeBanner: true,
-      fullscreenStyle: {
+      // showSwipeBanner: true,
+      contentStyle: {
         backgroundColor: '#fff',
       },
     },
@@ -50,14 +50,14 @@ const fullscreenModal = useModal<
     <VFullscreen
       v-model="show"
       :modal-id="theModalId"
-      fullscreen-style="background-color: #fff;"
       close-direction="RIGHT"
+      content-style="background-color: #fff;"
+      :show-swipe-banner="true"
       :prevent-navigation-gestures-on-mobile-webkit="true"
     >
-      <!-- :show-swipe-banner="true" -->
-      <!-- <template #swipe-banner>
+      <template #swipe-banner>
         <div style="position: absolute; height: 100%; top: 0; left: 0; width: 20px; background-color: pink;" />
-      </template> -->
+      </template>
       <div style="height: 500px">
         <div>Direct use vfm</div>
         <button @click="() => toggle(theModalId)">

packages/vue-final-modal/src/components/CoreModal/CoreModal.vue

@@ -132,6 +132,12 @@ onBeforeUnmount(() => {
   focusLast()
   openLastOverlay()
 })
+
+const vfmContentEl = ref<HTMLDivElement>()
+
+defineExpose({
+  vfmContentEl,
+})
 </script>
 
 <template>
@@ -161,10 +167,12 @@ onBeforeUnmount(() => {
     <Transition v-bind="contentTransition" v-on="contentListeners">
       <div
         v-show="contentVisible"
+        ref="vfmContentEl"
         class="vfm__content vfm--outline-none"
         :class="[contentClass, { 'vfm--prevent-auto': background === 'interactive' }]"
         :style="contentStyle"
         tabindex="0"
+        v-bind="bindContent"
         @mousedown="() => onMousedown()"
       >
         <slot />

packages/vue-final-modal/src/components/CoreModal/CoreModalProps.ts

@@ -104,6 +104,10 @@ export const coreModalProps = {
     type: [String, Object, Array] as PropType<StyleValue>,
     default: undefined,
   },
+  bindContent: {
+    type: Object as PropType<any>,
+    default: undefined,
+  },
   /**
    * @description Is it allow to close the modal by clicking the overlay.
    * @default `true`

packages/vue-final-modal/src/components/VBottomSheet/VBottomSheet.vue

@@ -31,9 +31,14 @@ const contentTransition = computed<undefined | TransitionProps>(() => {
     return props.contentTransition
 })
 
-const vfmBottomSheetContentEl = ref<HTMLDivElement>()
+const VueFinalModalComp = ref<InstanceType<typeof VueFinalModal>>()
+const vfmContentEl = computed(() => VueFinalModalComp.value?.vfmContentEl)
 
-const { offset, isSwiping } = useSwipeToClose(vfmBottomSheetContentEl, {
+defineExpose({
+  vfmContentEl,
+})
+
+const { offset, isSwiping } = useSwipeToClose(vfmContentEl, {
   direction: props.closeDirection,
   threshold: props.threshold,
   close: () => emit('update:modelValue', false),
@@ -46,24 +51,28 @@ watch(
       offset.value = 0
   },
 )
+
+const bindContent = computed(() => {
+  if (props.closeDirection === 'NONE')
+    return {}
+  return {
+    class: { 'vfm-bounce-back': !isSwiping.value },
+    style: isSwiping.value ? { transform: `translateY(${-offset.value}px)` } : '',
+  }
+})
 </script>
 
 <template>
   <VueFinalModal
+    ref="VueFinalModalComp"
     v-bind="{
       ...vfmAttrs,
       contentTransition,
+      bindContent,
     }"
     class="vfm-bottom-sheet"
   >
-    <div
-      ref="vfmBottomSheetContentEl"
-      class="vfm-bottom-sheet-content"
-      :class="[{ 'vfm-bounce-back': !isSwiping }, bottomSheetClass]"
-      :style="[{ transform: `translateY(${-offset}px)` }, bottomSheetStyle || {}]"
-    >
-      <slot />
-    </div>
+    <slot />
   </VueFinalModal>
 </template>
 
@@ -76,8 +85,6 @@ watch(
     flex-direction: column;
     width: 100%;
     max-height: 90%;
-  }
-  .vfm-bottom-sheet-content {
     overflow-y: auto;
   }
 

packages/vue-final-modal/src/components/VBottomSheet/VBottomSheetProps.ts

@@ -1,25 +1,8 @@
 import type { PropType } from 'vue'
 import { vueFinalModalProps } from '../VueFinalModal/VueFinalModalProps'
-import type { StyleValue } from '~/Modal'
 
 export const vBottomSheetProps = {
   ...vueFinalModalProps,
-  /**
-   * @description Bind class to `vfm-bottom-sheet-content`.
-   * @default `undefined`
-   */
-  bottomSheetClass: {
-    type: undefined as unknown as PropType<any>,
-    default: undefined,
-  },
-  /**
-   * @description Bind style to `vfm-bottom-sheet-content`.
-   * @default `undefined`
-   */
-  bottomSheetStyle: {
-    type: [String, Object, Array] as PropType<StyleValue>,
-    default: undefined,
-  },
   /**
    * @description The direction of swiping to close the bottom sheet modal
    * @default `DOWN`
@@ -36,10 +19,10 @@ export const vBottomSheetProps = {
   },
   /**
    * @description Threshold for swipe to close
-   * @default `30`
+   * @default `0`
    */
   threshold: {
     type: Number as PropType<number>,
-    default: 30,
+    default: 0,
   },
 } as const