set ssr prop default to true, set attach prop default to false

hunterliu1003 · hunterliu1003 · commit 82bb57129a4e · 2020-08-26T19:07:05.000+08:00
diff --git a/README.md b/README.md
@@ -82,7 +82,7 @@ export default {
 
 | Name | Type | Required | Default | Description |
 | ---  | ---  | ---      | ---     | ---         |
-| ssr | Boolean | --- | false | use v-if(true) or v-show(false) |
+| ssr | Boolean | --- | true | use v-show(true) or v-if(false) |
 | classes | [String, Object, Array] | --- | '' | custom class names for Modal container element |
 | contentClass | [String, Object, Array] | --- | '' | custom class names for Modal content element |
 | lockScroll | Boolean | --- | true | whether scroll of body is disabled while Dialog is displayed |
@@ -92,7 +92,7 @@ export default {
 | overlayClass | String | --- | '' | Add classes to the overlay element. |
 | transition | String | --- | 'vfm' | CSS transition applied to the modal window. |
 | overlayTransition | String | --- | 'vfm' | CSS transition applied to the overlay (background). |
-| attach | any | --- | 'body' | Specifies which DOM element that this component should detach to. Set `false` will disabled this feature. String can be any valid querySelector and Object can be any valid Node.  This will attach to the <body> element by default. |
+| attach | any | --- | false | Specifies which DOM element that this component should detach to. String can be any valid querySelector and Object can be any valid Node. |
 
 ### Slots
 
diff --git a/docs/components/global/BaseExample.vue b/docs/components/global/BaseExample.vue
@@ -11,7 +11,7 @@
       :hide-overlay="false"
       :click-to-close="true"
       :prevent-click="false"
-      attach="body"
+      :attach="false"
       :z-index="1000"
     >
       <span class="text-2xl mb-2">Hello, world!</span>
diff --git a/docs/components/global/BaseExampleAttach.vue b/docs/components/global/BaseExampleAttach.vue
@@ -14,7 +14,9 @@
     <div
       id="attach"
       class="relative flex justify-center items-center w-full h-64 dark:bg-gray-700 border dark:border-gray-700"
-    ></div>
+    >
+      #attach
+    </div>
   </div>
 </template>
 
diff --git a/docs/components/global/BaseExampleAttachFalse.vue b/docs/components/global/BaseExampleAttachFalse.vue
diff --git a/docs/content/en/examples.md b/docs/content/en/examples.md
@@ -13,6 +13,5 @@ category: Getting Start
     <base-example-prevent-click></base-example-prevent-click>
     <base-example-stackable></base-example-stackable>
     <base-example-scroll></base-example-scroll>
-    <base-example-attach-false></base-example-attach-false>
     <base-example-attach></base-example-attach>
 </div>
diff --git a/docs/content/en/properties.md b/docs/content/en/properties.md
@@ -8,7 +8,7 @@ category: Getting Start
 ## `ssr`
 
 - Type: `Boolean`
-- Default: `false`
+- Default: `true`
 
 Use `v-if` (false) or `v-show` (true) to display the modal.
 
@@ -79,14 +79,12 @@ The click event will not be blocked by overlay.
 ## `attach`
 
 - Type: `Any`
-- Default: `'body'`
+- Default: `false`
 
 Specifies which DOM element that this component should detach to.
 
-1. By default, the modal will be attached to the `<body>` element.
-2. Set `false` will disabled this feature. 
-3. String can be any valid `querySelector`
-4. Object can be any valid `Node`. 
+1. String can be any valid `querySelector`.
+2. Object can be any valid `Node`. 
 
 ## `zIndex`
 
@@ -113,7 +111,7 @@ Set `z-index` to both of the modal container and overlay elements.
       :hide-overlay="false"
       :click-to-close="true"
       :prevent-click="false"
-      attach="body"
+      :attach="false"
       :z-index="1000"
     >
       <span class="text-2xl mb-2">Hello, world!</span>
diff --git a/lib/VueFinalModal.vue b/lib/VueFinalModal.vue
@@ -12,7 +12,7 @@
         :style="{ zIndex }"
         class="vfm__overlay"
         :class="[
-          { 'vfm__overlay--attach': attach !== 'body' },
+          { 'vfm__overlay--attach': attach !== false },
           { 'vfm__overlay--prevent-click': preventClick },
           overlayClass
         ]"
@@ -31,7 +31,7 @@
         class="vfm__container"
         :class="[
           {
-            'vfm__container--attach': attach !== 'body',
+            'vfm__container--attach': attach !== false,
             'vfm__container--prevent-click': preventClick
           },
           classes
@@ -67,19 +67,27 @@ const TransitionState = {
   Leaving: 'leavng'
 }
 
+function validateAttachTarget(val) {
+  const type = typeof val
+
+  if (type === 'boolean' || type === 'string') return true
+
+  return val.nodeType === Node.ELEMENT_NODE
+}
+
 export default {
   name: 'VueFinalModal',
   props: {
     value: { type: Boolean, default: false },
-    ssr: { type: Boolean, default: false },
+    ssr: { type: Boolean, default: true },
     classes: { type: [String, Object, Array], default: '' },
     contentClass: { type: [String, Object, Array], default: '' },
     lockScroll: { type: Boolean, default: true },
     hideOverlay: { type: Boolean, default: false },
     clickToClose: { type: Boolean, default: true },
     preventClick: { type: Boolean, default: false },
     overlayClass: { type: String, default: '' },
-    attach: { type: null, default: 'body' },
+    attach: { type: null, default: false, validator: validateAttachTarget },
     transition: { type: String, default: 'vfm' },
     overlayTransition: { type: String, default: 'vfm' },
     zIndex: { type: [String, Number], default: 1000 }

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`:hide-overlay="false"`
`12`	`12`	`:click-to-close="true"`
`13`	`13`	`:prevent-click="false"`
`14`		`- attach="body"`
	`14`	`+ :attach="false"`
`15`	`15`	`:z-index="1000"`
`16`	`16`	`>`
`17`	`17`	`<span class="text-2xl mb-2">Hello, world!</span>`