refactor: rename VBottomSheet and VFullScreen to ModalBottom and ModalFullscreen

hunterliu1003 · hunterliu1003 · commit 28289704ef36 · 2022-12-26T12:55:31.000+08:00
diff --git a/docs/components/content/BottomSheet.vue b/docs/components/content/BottomSheet.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { VBottomSheet } from 'vue-final-modal'
+import { ModalBottom } from 'vue-final-modal'
 
 const emit = defineEmits<{
   (e: 'update:modelValue', modelValue: boolean): void
 }>()
 </script>
 
 <template>
-  <VBottomSheet
+  <ModalBottom
     @update:model-value="val => emit('update:modelValue', val)"
   >
     <div class="flex justify-center items-center h-60 bg-primary-100 dark:bg-gray-800">
       <VButton @click="emit('update:modelValue', false)">
         Close
       </VButton>
     </div>
-  </VBottomSheet>
+  </ModalBottom>
 </template>
diff --git a/docs/components/content/Fullscreen.vue b/docs/components/content/Fullscreen.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { VFullscreen } from 'vue-final-modal'
+import { ModalFullscreen } from 'vue-final-modal'
 
 const emit = defineEmits<{
   (e: 'update:modelValue', modelValue: boolean): void
 }>()
 </script>
 
 <template>
-  <VFullscreen
+  <ModalFullscreen
     content-class="p-4 bg-primary-50 dark:bg-gray-800"
     @update:model-value="val => emit('update:modelValue', val)"
   >
@@ -17,5 +17,5 @@ const emit = defineEmits<{
     <VButton @click="emit('update:modelValue', false)">
       Close
     </VButton>
-  </VFullscreen>
+  </ModalFullscreen>
 </template>
diff --git a/docs/content/1.index.md b/docs/content/1.index.md
@@ -79,7 +79,7 @@ Powerful Features
   #title
   Built-in HOCs
   #description
-  Provide Higher-Order Components including `<VFullscreen>`{lang=ts}, `<VBottomSheet>`{lang=ts}.
+  Provide Higher-Order Components including `<ModalFullscreen>`{lang=ts}, `<ModalBottom>`{lang=ts}.
   ::
 
   ::card
diff --git a/docs/content/2.get-started/1.guide/1.concepts.md b/docs/content/2.get-started/1.guide/1.concepts.md
@@ -20,7 +20,7 @@ These are the core concepts you need to know about vue-final-modal and its appro
   - Trap keyboard focus within modal element (uses [focus-trap]([/api/components/vue-final-modal#focustrap](https://github.com/focus-trap/focus-trap)) for best web accessibility).
   - Full control to the zIndex of the nested modals (see [zIndexFn prop](/api/components/vue-final-modal#zindexfn)).
   - Customizable `<Transition>` for the modal content and overlay.
-  - Provide Higher order components including [VFullscreen](/api/components/v-fullscreen) and [VBottomSheet](/api/components/v-bottom-sheet).
+  - Provide Higher order components including [ModalFullscreen](/api/components/v-fullscreen) and [ModalBottom](/api/components/v-bottom-sheet).
   - Fully tree-shakable! Only what you use will get imported.
   - Tiny footprint! Only 4.x kB! Vue Final Modal focuses on the core functionality of modals, leaves the complex CSS up to the developer.
 ::
diff --git a/docs/content/3.api/1.components/2.v-full-screen.md b/docs/content/3.api/1.components/2.v-full-screen.md
@@ -1,11 +1,11 @@
-# `<VFullscreen>`
+# `<ModalFullscreen>`
 
 ## Template structure
 
-This is the simplify template of the `<VFullscreen>`{lang=ts}.
+This is the simplify template of the `<ModalFullscreen>`{lang=ts}.
 It will be helpful for understanding the naming of [props](#props).
 
-```html [VFullscreen.vue]
+```html [ModalFullscreen.vue]
 <template>
   <div class="vfm">
     <div class=vfm__content>
@@ -20,10 +20,10 @@ It will be helpful for understanding the naming of [props](#props).
 ## Props
 
 ::alert{type=info}
-`<VFullscreen>`{lang=ts} extends all [props](/api/components/vue-final-modal#props) from `<VueFinalModal>`{lang=ts}.
+`<ModalFullscreen>`{lang=ts} extends all [props](/api/components/vue-final-modal#props) from `<VueFinalModal>`{lang=ts}.
 ::
 
-`<VFullscreen>`{lang=ts} also provides the following properties:
+`<ModalFullscreen>`{lang=ts} also provides the following properties:
 
 ### hideOverlay
 
@@ -68,7 +68,7 @@ When set `:preventNavigationGestures="true"`{lang=ts}, there will be two invisib
 ## Events
 
 ::alert{type=info}
-`<VFullscreen>`{lang=ts} extends all [events](/api/components/vue-final-modal#events) from `<VueFinalModal>`{lang=ts}.
+`<ModalFullscreen>`{lang=ts} extends all [events](/api/components/vue-final-modal#events) from `<VueFinalModal>`{lang=ts}.
 ::
 
 ## Slots
diff --git a/docs/content/3.api/1.components/3.modal-bottom.md b/docs/content/3.api/1.components/3.modal-bottom.md
@@ -1,11 +1,11 @@
-# `<VBottomSheet>`
+# `<ModalBottom>`
 
 ## Template structure
 
-This is the simplify template of the `<VBottomSheet>`{lang=ts}.
+This is the simplify template of the `<ModalBottom>`{lang=ts}.
 It will be helpful for understanding the naming of [props](#props).
 
-```html [VBottomSheet.vue]
+```html [ModalBottom.vue]
 <template>
   <div class="vfm">
     <div class=vfm__content>
@@ -20,10 +20,10 @@ It will be helpful for understanding the naming of [props](#props).
 ## Props
 
 ::alert{type=info}
-`<VBottomSheet>`{lang=ts} extends all [props](/api/components/vue-final-modal#props) from `<VueFinalModal>`{lang=ts}.
+`<ModalBottom>`{lang=ts} extends all [props](/api/components/vue-final-modal#props) from `<VueFinalModal>`{lang=ts}.
 ::
 
-`<VBottomSheet>`{lang=ts} also provides the following properties:
+`<ModalBottom>`{lang=ts} also provides the following properties:
 
 ### closeDirection
 
@@ -44,7 +44,7 @@ Threshold for swipe to close
 ## Events
 
 ::alert{type=info}
-`<VBottomSheet>`{lang=ts} extends all [events](/api/components/vue-final-modal#events) from `<VueFinalModal>`{lang=ts}.
+`<ModalBottom>`{lang=ts} extends all [events](/api/components/vue-final-modal#events) from `<VueFinalModal>`{lang=ts}.
 ::
 
 ## Slots
diff --git a/docs/content/4.use-cases/6.fullscreen-modal.md b/docs/content/4.use-cases/6.fullscreen-modal.md
@@ -4,7 +4,7 @@ head.title: 'Fullscreen Modal | Examples'
 
 # Fullscreen Modal
 
-Create a `<Fullscreen>` component with `<VFullscreen>` and TailwindCSS.
+Create a `<Fullscreen>` component with `<ModalFullscreen>` and TailwindCSS.
 
 ## `<Fullscreen>` component
 
diff --git a/docs/content/4.use-cases/7.bottom-sheet-modal.md b/docs/content/4.use-cases/7.bottom-sheet-modal.md
@@ -4,7 +4,7 @@ head.title: 'Bottom Sheet Modal | Examples'
 
 # Bottom Sheet Modal
 
-Create a `<BottomSheet>` component with `<VBottomSheet>` and TailwindCSS.
+Create a `<BottomSheet>` component with `<ModalBottom>` and TailwindCSS.
 
 ## `<BottomSheet>` component
 
diff --git a/packages/vue-final-modal/src/components/ModalBottom/ModalBottom.vue b/packages/vue-final-modal/src/components/ModalBottom/ModalBottom.vue
@@ -4,19 +4,19 @@ import { computed, ref, watch } from 'vue'
 import type { VueFinalModalEmits } from '../VueFinalModal/VueFinalModal.vue'
 import VueFinalModal from '../VueFinalModal/VueFinalModal.vue'
 import { vueFinalModalProps } from '../VueFinalModal/VueFinalModalProps'
-import { vBottomSheetProps } from './VBottomSheetProps'
+import { modalBottomProps } from './ModalBottomProps'
 import { useSwipeToClose } from '~/useSwipeToClose'
 import { useVfmAttrs } from '~/useApi'
 
-export interface VBottomSheetEmits extends VueFinalModalEmits {}
+export interface ModalBottomEmits extends VueFinalModalEmits {}
 
 defineOptions({
   inheritAttrs: false,
 })
 
 // eslint-disable-next-line vue/define-macros-order
-const props = defineProps(vBottomSheetProps)
-const emit = defineEmits<VBottomSheetEmits>()
+const props = defineProps(modalBottomProps)
+const emit = defineEmits<ModalBottomEmits>()
 
 const vfmAttrs = useVfmAttrs({
   props,
diff --git a/packages/vue-final-modal/src/components/ModalBottom/ModalBottomProps.ts b/packages/vue-final-modal/src/components/ModalBottom/ModalBottomProps.ts
@@ -1,7 +1,7 @@
 import type { PropType } from 'vue'
 import { vueFinalModalProps } from '../VueFinalModal/VueFinalModalProps'
 
-export const vBottomSheetProps = {
+export const modalBottomProps = {
   ...vueFinalModalProps,
   /**
    * @description The direction of swiping to close the bottom sheet modal
diff --git a/packages/vue-final-modal/src/components/ModalFullscreen/ModalFullscreen.vue b/packages/vue-final-modal/src/components/ModalFullscreen/ModalFullscreen.vue
@@ -4,19 +4,19 @@ import { computed, ref, watch } from 'vue'
 import type { VueFinalModalEmits } from '../VueFinalModal/VueFinalModal.vue'
 import VueFinalModal from '../VueFinalModal/VueFinalModal.vue'
 import { vueFinalModalProps } from '../VueFinalModal/VueFinalModalProps'
-import { vFullscreenProps } from './VFullscreenProps'
+import { modalFullscreenProps } from './ModalFullscreenProps'
 import { useSwipeToClose } from '~/useSwipeToClose'
 import { useVfmAttrs } from '~/useApi'
 
-export interface VFullscreenEmits extends VueFinalModalEmits {}
+export interface ModalFullscreenEmits extends VueFinalModalEmits {}
 
 defineOptions({
   inheritAttrs: false,
 })
 
 // eslint-disable-next-line vue/define-macros-order
-const props = defineProps(vFullscreenProps)
-const emit = defineEmits<VFullscreenEmits>()
+const props = defineProps(modalFullscreenProps)
+const emit = defineEmits<ModalFullscreenEmits>()
 
 const vfmAttrs = useVfmAttrs({
   props,
diff --git a/packages/vue-final-modal/src/components/ModalFullscreen/ModalFullscreenProps.ts b/packages/vue-final-modal/src/components/ModalFullscreen/ModalFullscreenProps.ts
@@ -1,7 +1,7 @@
 import type { PropType } from 'vue'
 import { vueFinalModalProps } from '../VueFinalModal/VueFinalModalProps'
 
-export const vFullscreenProps = {
+export const modalFullscreenProps = {
   ...vueFinalModalProps,
   /**
    * @description Hide the overlay or not.
@@ -46,7 +46,7 @@ export const vFullscreenProps = {
    * :showSwipeBanner="true"
    * ```
    * ```html
-   * <VFullscreen
+   * <ModalFullscreen
    *   ...
    *   closeDirection="RIGHT"
    *   :showSwipeBanner="true"
@@ -55,7 +55,7 @@ export const vFullscreenProps = {
    *     <div style="position: absolute; height: 100%; top: 0; left: 0; width: 10px;" />
    *   </template>
    *   ...modal content
-   * </VFullscreen>
+   * </ModalFullscreen>
    * ```
    */
   showSwipeBanner: {
diff --git a/packages/vue-final-modal/src/index.ts b/packages/vue-final-modal/src/index.ts
@@ -1,8 +1,8 @@
 import ModalsContainer from './components/ModalsContainer.vue'
 import CoreModal from './components/CoreModal/CoreModal.vue'
 import VueFinalModal from './components/VueFinalModal/VueFinalModal.vue'
-import VFullscreen from './components/VFullscreen/VFullscreen.vue'
-import VBottomSheet from './components/VBottomSheet/VBottomSheet.vue'
+import ModalFullscreen from './components/ModalFullscreen/ModalFullscreen.vue'
+import ModalBottom from './components/ModalBottom/ModalBottom.vue'
 
 /** Types */
 export * from './Modal'
@@ -15,18 +15,18 @@ export {
   ModalsContainer,
   CoreModal,
   VueFinalModal,
-  VBottomSheet,
-  VFullscreen,
+  ModalBottom,
+  ModalFullscreen,
 }
 
 export { coreModalProps } from './components/CoreModal/CoreModalProps'
 export { vueFinalModalProps } from './components/VueFinalModal/VueFinalModalProps'
-export { vFullscreenProps } from './components/VFullscreen/VFullscreenProps'
-export { vBottomSheetProps } from './components/VBottomSheet/VBottomSheetProps'
+export { modalFullscreenProps } from './components/ModalFullscreen/ModalFullscreenProps'
+export { modalBottomProps } from './components/ModalBottom/ModalBottomProps'
 
 export type { VueFinalModalEmits } from './components/VueFinalModal/VueFinalModal.vue'
-export type { VFullscreenEmits } from './components/VFullscreen/VFullscreen.vue'
-export type { VBottomSheetEmits } from './components/VBottomSheet/VBottomSheet.vue'
+export type { ModalFullscreenEmits } from './components/ModalFullscreen/ModalFullscreen.vue'
+export type { ModalBottomEmits } from './components/ModalBottom/ModalBottom.vue'
 
 /** Composables */
 export { useVfm, useModal, useVfmAttrs } from './useApi'
diff --git a/viteplay/src/components/ModalBottom/Basic.example.vue b/viteplay/src/components/ModalBottom/Basic.example.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { markRaw, ref } from 'vue'
-import { ModalsContainer, VBottomSheet, useModal, useVfm } from 'vue-final-modal'
+import { ModalsContainer, ModalBottom, useModal, useVfm } from 'vue-final-modal'
 import DefaultSlot from '../DefaultSlot.vue'
 
 const show = ref(false)
@@ -9,10 +9,10 @@ const theModalId = Symbol('theModalId')
 const { toggle } = useVfm()
 
 const bottomSheet = useModal<
-  InstanceType<typeof VBottomSheet>['$props'],
+  InstanceType<typeof ModalBottom>['$props'],
   InstanceType<typeof DefaultSlot>['$props']
 >({
-  component: markRaw(VBottomSheet),
+  component: markRaw(ModalBottom),
   attrs: {
     background: 'interactive',
     contentStyle: {
@@ -48,7 +48,7 @@ function beforeOpen(e: any) {
     <button @click="() => bottomSheet.open()">
       create bottom sheet component
     </button>
-    <VBottomSheet
+    <ModalBottom
       v-model="show"
       :modal-id="theModalId"
       content-style="background-color: #fff; border-top-left-radius: 12px; border-top-right-radius: 12px;"
@@ -70,7 +70,7 @@ function beforeOpen(e: any) {
       <div style="min-height: 500px">
         Direct use vfm
       </div> -->
-    </VBottomSheet>
+    </ModalBottom>
   </div>
 
   <div v-for="i in 1000" :key="i">
diff --git a/viteplay/src/components/ModalFullscreen/Basic.example.vue b/viteplay/src/components/ModalFullscreen/Basic.example.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import { markRaw, ref } from 'vue'
-import { ModalsContainer, VFullscreen, useModal, useVfm } from 'vue-final-modal'
+import { ModalsContainer, ModalFullscreen, useModal, useVfm } from 'vue-final-modal'
 import DefaultSlot from '../DefaultSlot.vue'
 
 const show = ref(false)
 const theModalId = Symbol('theModalId')
 const { toggle } = useVfm()
 
 const fullscreenModal = useModal<
-    InstanceType<typeof VFullscreen>['$props'],
+    InstanceType<typeof ModalFullscreen>['$props'],
     InstanceType<typeof DefaultSlot>['$props']
   >({
-    component: markRaw(VFullscreen),
+    component: markRaw(ModalFullscreen),
     attrs: {
       background: 'interactive',
       closeDirection: 'RIGHT',
@@ -47,7 +47,7 @@ const fullscreenModal = useModal<
     <button @click="() => fullscreenModal.open()">
       create full screen component
     </button>
-    <VFullscreen
+    <ModalFullscreen
       v-model="show"
       :modal-id="theModalId"
       close-direction="RIGHT"
@@ -76,7 +76,7 @@ const fullscreenModal = useModal<
       <div style="height: 500px">
         Direct use vfm
       </div>
-    </VFullscreen>
+    </ModalFullscreen>
   </div>
 
   <div v-for="i in 1000" :key="i">
diff --git a/viteplay/vite.config.ts b/viteplay/vite.config.ts
@@ -27,14 +27,14 @@ export default defineConfig({
           examples: `${examplesPath}/VueFinalModal/*.example.vue`,
         },
         {
-          title: 'VBottomSheet',
-          component: `${componentPath}/VBottomSheet/VBottomSheet.vue`,
-          examples: `${examplesPath}/VBottomSheet/*.example.vue`,
+          title: 'ModalBottom',
+          component: `${componentPath}/ModalBottom/ModalBottom.vue`,
+          examples: `${examplesPath}/ModalBottom/*.example.vue`,
         },
         {
-          title: 'VFullscreen',
-          component: `${componentPath}/VFullscreen/VFullscreen.vue`,
-          examples: `${examplesPath}/VFullscreen/*.example.vue`,
+          title: 'ModalFullscreen',
+          component: `${componentPath}/ModalFullscreen/ModalFullscreen.vue`,
+          examples: `${examplesPath}/ModalFullscreen/*.example.vue`,
         },
       ],
       // base route for the development pages
