docs: update docs

hunterliu1003 · hunterliu1003 · commit 58fc90429c23 · 2022-11-08T02:40:10.000+08:00
diff --git a/.npmignore b/.npmignore
@@ -1,4 +1,3 @@
 node_modules
 .cache
-dist
-docs
+dist
diff --git a/packages/docs/content/2.get-started/1.guide/2.concepts.md b/packages/docs/content/2.get-started/1.guide/2.concepts.md
@@ -13,8 +13,8 @@ These are the core concepts you need to know about vue-final-modal and its appro
 ::list{type=success}
   - SSR (Nuxt 3) support. [Teleport](/api/components/vue-final-modal#teleportto) your modals to `'body'`{lang=ts} by default.
   - `useModal()`{lang=ts} composable to manage your modal programmatically.
-  - [focusTrap](/api/components/vue-final-modal#focustrap) for better web accessibility.
-  - Full control to the zIndex of the nested modals with [zIndexFn prop](/api/components/vue-final-modal#zindexfn).
+  - 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).
 ::
diff --git a/packages/docs/content/3.api/1.components/1.vue-final-modal.md b/packages/docs/content/3.api/1.components/1.vue-final-modal.md
@@ -27,107 +27,159 @@ It will be helpful for understanding the naming of [props](#props).
   - Description: 
     - Set `null | false` to disable teleport.
     - Checkout the [Nuxt 3 teleport](https://v3.nuxtjs.org/api/components/teleports/#teleport) for the reason why the default value have to be `'body'`{lang=ts}.
-  - Type: `[String, null, Boolean, Object] as PropType<string | RendererElement | null | false>`{lang=ts}
+  - Type: 
+    - JS: `[String, null, Boolean, Object]`{lang=ts}
+    - TS: `PropType<string | RendererElement | null | false>`{lang=ts}
   - Default: `'body'`{lang=ts}
 
-### modalId
+### modalId (optional)
 
 `modalId` should be an uniq value for the operation of a modal via [useVfm()](/api/composables/use-vfm#usevfm).
-  - Type: `[String, Number, Symbol] as PropType<ModalId>`{lang=ts}
-    ```ts
-    export type ModalId = number | string | symbol
-    ```
+  - Type: 
+    - JS: `[String, Number, Symbol]`{lang=ts}
+    - TS: `PropType<ModalId>`{lang=ts}
+      ```ts
+      export type ModalId = number | string | symbol
+      ```
+
+      ```ts
+      import { ModalId } from 'vue-final-modal'
+      ```
   - Default: `undefined`{lang=ts}
   
-### modelValue
+### modelValue (optional)
 
 Display the modal or not.
-  - Type: `Boolean as PropType<boolean>`{lang=ts}
+  - Type:
+    - JS: `Boolean`{lang=ts}
+    - TS: `PropType<boolean>`{lang=ts}
   - Default: `undefined`{lang=ts}
   
 ### displayDirective
 
 Render the modal content via `'if'`{lang=ts} or `'show'`{lang=ts} directive.
-  - Type: `String as PropType<'if' | 'show'>`{lang=ts}
+  - Type:
+    - JS: `'if' | 'show'`{lang=ts}
+    - TS: `PropType<'if' | 'show'>`{lang=ts}
   - Default: `'if'`{lang=ts}
   
 ### hideOverlay
 
 Hide the overlay or not.
-  - Type: `Boolean as PropType<boolean>`{lang=ts}
+  - Type:
+    - JS: `Boolean`{lang=ts}
+    - TS: `PropType<boolean>`{lang=ts}
   - Default: `undefined`{lang=ts}
   
 ### overlayTransition
 
 Customize the overlay transition.
-  - Type: `Object as PropType<TransitionProps>`{lang=ts}
+  - Type:
+    - JS: `Object`{lang=ts}
+    - TS: `PropType<TransitionProps>`{lang=ts}
+      - see interface [TransitionProps](https://vuejs.org/api/built-in-components.html#transition)
   - Default: `() => ({ name: 'vfm' })`{lang=ts}
   
 ### contentTransition
 
 Customize the content transition.
-  - Type: `Object as PropType<TransitionProps>`{lang=ts}
+  - Type:
+    - JS: `Object`{lang=ts}
+    - TS: `PropType<TransitionProps>`{lang=ts}
+      - see interface [TransitionProps](https://vuejs.org/api/built-in-components.html#transition)
   - Default: `() => ({ name: 'vfm' })`{lang=ts}
   
 ### overlayClass
 
 Bind class to `.vfm__overlay`{lang=ts} element.
-  - Type: `undefined as unknown as PropType<any>`{lang=ts}
+  - Type:
+    - JS: `[Object, Array, String]`{lang=ts}
+    - TS: `[Object, Array, String] as unknown as PropType<any>`{lang=ts}
   - Default: `undefined`{lang=ts}
   
 ### contentClass
 
 Bind class to `.vfm__content`{lang=ts} element.
-  - Type: `undefined as unknown as PropType<any>`{lang=ts}
+  - Type:
+    - JS: `[Object, Array, String]`{lang=ts}
+    - TS: `[Object, Array, String] as unknown as PropType<any>`{lang=ts}
   - Default: `undefined`{lang=ts}
   
 ### overlayStyle
 
 Bind style to `.vfm__overlay`{lang=ts} element.
-  - Type: `[String, Object, Array] as PropType<StyleValue>`{lang=ts}
+  - 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}
   
 ### contentStyle
 
 Bind style to `.vfm__content`{lang=ts} element.
-  - Type: `[String, Object, Array] as PropType<StyleValue>`{lang=ts}
+  - 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}
   
 ### clickToClose
 
 Can be closed by clicking the `.vfm`{lang=ts} element.
-  - Type: `Boolean as PropType<boolean>`{lang=ts}
+  - Type:
+    - JS: `Boolean`{lang=ts}
+    - TS: `PropType<boolean>`{lang=ts}
   - Default: `true`{lang=ts}
   
 ### escToClose
 
 Can be closed by keypress `esc`{lang=ts}.
-  - Type: `Boolean as PropType<boolean>`{lang=ts}
+  - Type:
+    - JS: `Boolean`{lang=ts}
+    - TS: `PropType<boolean>`{lang=ts}
   - Default: `true`{lang=ts}
   
 ### background
 
 Is it allow to interact with background of the modal.
-  - Type: `String as PropType<'interactive' | 'non-interactive'>`{lang=ts}
+  - Type:
+    - JS: `'interactive' | 'non-interactive'`{lang=ts}
+    - TS: `PropType<'interactive' | 'non-interactive'>`{lang=ts}
   - Default: `'non-interactive'`{lang=ts}
   
 ### focusTrap
   - Description:
-    - Use `{ disabled: true }`{lang=ts} to disable the focusTrap. 
-    - For more information on what options can be passed, see [createOptions](https://github.com/focus-trap/focus-trap#createoptions) in the [focus-trap](https://github.com/focus-trap/focus-trap) documentation.
-  - Type: `Object as PropType<Options & { disabled?: true }>`{lang=ts}
+    - Set `false`{lang=ts} to disable the focusTrap. 
+    - For more information on what `options` can be passed, see [createOptions](https://github.com/focus-trap/focus-trap#createoptions) in the [focus-trap](https://github.com/focus-trap/focus-trap) documentation.
+  - Type:
+    - JS: `[Boolean, Object]`{lang=ts}
+    - TS: `PropType<false | Options>`{lang=ts}
   - Default: `() => ({ allowOutsideClick: true })`{lang=ts}
   
 ### lockScroll
 
 Lock body scroll or not when the modal is opened.
-  - Type: `Boolean as PropType<boolean>`{lang=ts}
+  - Type:
+    - JS: `Boolean`{lang=ts}
+    - TS: `PropType<boolean>`{lang=ts}
   - Default: `true`{lang=ts}
   
 ### zIndexFn
 
 Define how to increase the zIndex when there are nested modals.
-  - Type: `Function as PropType<(context: { index: number }) => number | undefined>`{lang=ts}
+  - Type:
+    - JS: `Function`{lang=ts}
+    - TS: `PropType<(context: { index: number }) => number | undefined>`{lang=ts}
   - Default: `({ index }: { index: number }) => 1000 + 2 * index`{lang=ts} 
     - `index`{lang=ts} is the index order of the opened modals
 ## Events
diff --git a/packages/docs/content/3.api/1.components/2.v-full-screen.md b/packages/docs/content/3.api/1.components/2.v-full-screen.md
@@ -28,43 +28,63 @@ It will be helpful for understanding the naming of [props](#props).
 ### hideOverlay
 
 Hide the overlay or not.
-  - Type: `Boolean as PropType<boolean>`{lang=ts}
+  - Type:
+    - JS: `Boolean`{lang=ts}
+    - TS: `PropType<boolean>`{lang=ts}
   - Default: `true`{lang=ts}
 
 ### fullscreenClass
 
 Bind class to `.vfm-fullscreen-content`{lang=ts} element.
-  - Type: `undefined as unknown as PropType<any>`{lang=ts}
+  - 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: `[String, Object, Array] as PropType<StyleValue>`{lang=ts}
+  - 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
-  - Type: `String as PropType<'NONE' | 'RIGHT' | 'LEFT'>`{lang=ts}
+  - Type:
+    - JS: `'NONE' | 'RIGHT' | 'LEFT'`{lang=ts}
+    - TS: `PropType<'NONE' | 'RIGHT' | 'LEFT'>`{lang=ts}
   - Default: `'NONE'`
 
 ### threshold
 
 Threshold for swipe to close
-  - Type: `Number as PropType<number>`{lang=ts}
+  - Type:
+    - JS: `Number`{lang=ts}
+    - TS: `PropType<number>`{lang=ts}
   - Default: `30`
 
 ### showSwipeBanner
 
 If set `:showSwipeBanner="true"`{lang=ts}, only allow clicking `swipe-banner` slot to swipe to close
-  - Type: `Boolean as PropType<boolean>`{lang=ts}
+  - Type:
+    - JS: `Boolean`{lang=ts}
+    - TS: `PropType<boolean>`{lang=ts}
   - Default: `undefined`
 
 ### preventNavigationGestures
 
 When set `:preventNavigationGestures="true"`{lang=ts}, there will be two invisible bars for prevent navigation gestures including swiping back/forward on mobile webkit. For example: Safari mobile.
-  - Type: `Boolean as PropType<boolean>`{lang=ts}
+  - Type:
+    - JS: `Boolean`{lang=ts}
+    - TS: `PropType<boolean>`{lang=ts}
   - Default: `undefined`
 
 ## Events
diff --git a/packages/docs/content/3.api/1.components/3.v-bottom-sheet.md b/packages/docs/content/3.api/1.components/3.v-bottom-sheet.md
@@ -28,25 +28,39 @@ It will be helpful for understanding the naming of [props](#props).
 ### bottomSheetClass
 
 Bind class to `.vfm-bottom-sheet-content`{lang=ts} element.
-  - Type: `undefined as unknown as PropType<any>`{lang=ts}
+  - 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: `[String, Object, Array] as PropType<StyleValue>`{lang=ts}
+  - 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
-  - Type: `String as PropType<'NONE' | 'DOWN'>`{lang=ts}
+  - Type:
+    - JS: `'NONE' | 'DOWN'`{lang=ts}
+    - TS: `PropType<'NONE' | 'DOWN'>`{lang=ts}
   - Default: `'DOWN'`
 
 ### threshold
 
 Threshold for swipe to close
-  - Type: `Number as PropType<number>`{lang=ts}
+  - Type:
+    - JS: `Number`{lang=ts}
+    - TS: `PropType<number>`{lang=ts}
   - Default: `30`
 
 ## Events
diff --git a/packages/vue-final-modal/src/components/CoreModal/CoreModalProps.ts b/packages/vue-final-modal/src/components/CoreModal/CoreModalProps.ts
@@ -136,7 +136,7 @@ export const coreModalProps = {
    * @default `{ allowOutsideClick: true }`
    */
   focusTrap: {
-    type: Object as PropType<Options & { disabled?: true }>,
+    type: [Boolean, Object] as PropType<false | Options>,
     default: () => ({
       allowOutsideClick: true,
     }),
diff --git a/packages/vue-final-modal/src/components/CoreModal/useFocusTrap.ts b/packages/vue-final-modal/src/components/CoreModal/useFocusTrap.ts
@@ -11,7 +11,7 @@ export function useFocusTrap(
     openedModals: ComputedRef<Modal>[]
   },
 ) {
-  if (props.focusTrap?.disabled) {
+  if (props.focusTrap === false) {
     return {
       focus() {},
       focusLast() {},
diff --git a/packages/vue-final-modal/test/VueFinalModal.test.ts b/packages/vue-final-modal/test/VueFinalModal.test.ts
@@ -34,7 +34,7 @@ describe('tests VueFinalModal', () => {
   it('basic', async () => {
     const wrapper = mount(VueFinalModal, {
       props: {
-        focusTrap: { disabled: true },
+        focusTrap: false,
       },
       global: {
         plugins: [createVfm()],
@@ -53,7 +53,7 @@ describe('tests VueFinalModal', () => {
     const wrapper = mount(VueFinalModal, {
       props: {
         displayDirective: 'show',
-        focusTrap: { disabled: true },
+        focusTrap: false,
       },
       global: {
         plugins: [createVfm()],

-Original file line number
+Diff line change
@@ @@ -1,4 +1,3 @@ @@
 node_modules
 .cache
 -dist
 -docs
 +dist