Remove obsolete concept of dialog root

KittyGiraudel · morkro · commit 2bd05b6ed511 · 2022-01-25T22:01:01.000+01:00
diff --git a/README.md b/README.md
@@ -50,8 +50,6 @@ Then use it as follows:
 
     <a11y-dialog
       id="app-dialog"
-      app-root="#app"
-      dialog-root="#dialog-root"
       @dialog-ref="assignDialogRef"
     >
       <template v-slot:title>
@@ -95,7 +93,6 @@ In your `index.html`, add a container where your dialog will be rendered into.
   <body>
     <div id="app"></div>
     <!-- built files will be auto injected -->
-    <div id="dialog-root"></div>
   </body>
 </html>
 ```
@@ -131,8 +128,6 @@ In your `<template>`:
     <!-- First dialog -->
     <a11y-dialog
       id="first-dialog"
-      app-root="#app"
-      dialog-root="#dialog-root"
       @dialog-ref="dialog => assignDialogRef('first', dialog)"
     >
       <template v-slot:title>
@@ -146,8 +141,6 @@ In your `<template>`:
     <!-- Second dialog -->
     <a11y-dialog
       id="second-dialog"
-      app-root="#app"
-      dialog-root="#dialog-root"
       @dialog-ref="dialog => assignDialogRef('second', dialog)"
     >
       <template v-slot:title>
@@ -198,25 +191,12 @@ export default {
 </a11y-dialog>
 ```
 
-### `app-root`
-
-- **Property**: `app-root`
-- **Type**: `String`, `Array<String>` — CSS Selector string.
-- **Required**: `true`
-- **Description**: The selector(s) `a11y-dialog` needs to disable when the dialog is open.
-- **Usage**:
-
-```html
-<a11y-dialog app-root="#app">
-  <!-- ... -->
-</a11y-dialog>
-```
-
 ### `dialog-root`
 
 - **Property**: `dialog-root`
 - **Type**: `String` — CSS Selector string.
-- **Required**: `true`
+- **Required**: `false`
+- **Default**: `'body'`
 - **Description**: The container for the dialog to be rendered into.
 - **Usage**:
 
diff --git a/src/A11yDialog.vue b/src/A11yDialog.vue
@@ -59,13 +59,10 @@
         type: String,
         required: true,
       },
-      appRoot: {
-        type: String,
-        required: true,
-      },
       dialogRoot: {
         type: String,
-        required: true,
+        default: 'body',
+        required: false,
       },
       /**
        * Object representing the classes for each HTML element of the dialog
@@ -116,7 +113,7 @@
       const rootElement = ref(null)
 
       const portalTarget = computed(() => {
-        return props.dialogRoot || props.appRoot
+        return props.dialogRoot || 'body'
       })
 
       const fullTitleId = computed(() => {
@@ -131,10 +128,7 @@
 
       const instantiateDialog = async () => {
         await nextTick()
-        dialog = new A11yDialog(
-          rootElement.value,
-          portalTarget.value || props.appRoot
-        )
+        dialog = new A11yDialog(rootElement.value)
         emit('dialog-ref', dialog)
       }
 
diff --git a/src/Demo.vue b/src/Demo.vue
@@ -1,7 +1,4 @@
 <template>
-  <!-- Required to be here instead of index.html for Cypress -->
-  <div id="dialog-root" />
-
   <header>
     <h1>A11yDialog Demo</h1>
   </header>
@@ -45,8 +42,6 @@
 
   <a11y-dialog
     id="a11y-dialog"
-    app-root="#app"
-    dialog-root="#dialog-root"
     close-button-label="My close button label"
     :close-button-position="closePosition"
     title-id="uniqueTitleId"
