docs: add basic example

playground/src/App.vue

@@ -1,8 +1,24 @@
 <template>
   <div id="playground">
     <main id="main">
+      <button @click="basicDialog = true">Open basic Dialog</button>
       <button @click="isOpen = !isOpen">Default</button>
       <button style="visibility:hidden">Default</button>
+
+      <BasicDialog
+        :open="basicDialog"
+        @close="basicDialog = false"
+        @confirm="basicDialog = false"
+      >
+        <template v-slot:title>
+          Your markup,
+          <strong>your rules</strong>
+        </template>
+        <template v-slot:default>
+          Are you sure you want to be overriding CSS or pass a thousand props again?
+        </template>
+      </BasicDialog>
+
       <DialogExample
         :open="isOpen"
         @close="isOpen = false"
@@ -107,16 +123,19 @@
 import 'focus-visible'
 import { PortalTarget } from "portal-vue";
 import DialogExample from "./components/DialogExample.vue";
+import BasicDialog from "./components/BasicDialog.vue";
 
 
 export default {
   name: "Playground",
   components: {
+    BasicDialog,
     DialogExample,
     PortalTarget,
     // A11yDialog
   },
   data: () => ({
+    basicDialog: false,
     last: false,
     exOpen: false,
     exOpenTwo: false,

playground/src/components/BasicDialog.vue

@@ -0,0 +1,121 @@
+<template>
+  <a11y-dialog
+    v-bind="$attrs"
+    v-on="$listeners"
+    #default="{
+      open,
+      closeFn,
+      backdropRef,
+      dialogRef,
+      titleRef,
+      closeRef,
+    }"
+  >
+    <portal to="a11y-vue-dialogs" v-if="open">
+      <div
+        class="dialog"
+        v-bind="backdropRef.props"
+        v-on="backdropRef.listeners"
+      >
+        <div
+          class="dialog__inner"
+          v-bind="dialogRef.props"
+          v-on="dialogRef.listeners"
+        >
+          <header class="dialog__header">
+            <h1 v-bind="titleRef.props">
+              <slot name="title" />
+            </h1>
+            <button v-bind="closeRef.props" v-on="closeRef.listeners">x</button>
+          </header>
+          <section class="dialog__body">
+            <slot />
+          </section>
+          <footer class="dialog__footer">
+            <button @click="closeFn" class="btn btn-danger">Cancel</button>
+            <button
+              class="btn btn-sucess"
+              @click="$emit('confirm', { life: 42 })"
+            >
+              Confirm
+            </button>
+          </footer>
+        </div>
+      </div>
+    </portal>
+  </a11y-dialog>
+</template>
+
+<script>
+import { A11yDialog } from '../../../src/index'
+import { Portal } from "@linusborg/vue-simple-portal";
+export default {
+  name: "BasicDialog",
+  components: {
+    A11yDialog,
+    Portal
+  },
+  props: {
+    title: {
+      type: String,
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  place-items: center;
+  place-content: center;
+  text-align: left;
+}
+
+.dialog__inner {
+  background: white;
+  max-width: 400px;
+}
+
+.dialog__header,
+.dialog__body,
+.dialog__footer {
+  padding: 10px 20px;
+}
+
+.dialog__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid whitesmoke;
+
+  h1 {
+    font-size: 20px;
+    margin-right: 20px;
+    margin-bottom: 0px;
+    margin-top: 0px;
+  }
+}
+
+.dialog__body {
+  padding: 30px 20px;
+}
+
+.dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  background-color: whitesmoke;
+}
+
+.btn-sucess {
+  background-color: lime;
+}
+</style>
+