Chore(docs): add examples wrapper and document directive

Author: Godofbrowser

docs/.vuepress/client.js

@@ -7,16 +7,18 @@ export default defineClientConfig({
     enhance({ app, router, siteData }) {
         const registerComponent = (fileName) => app.component(
             fileName,
-            defineAsyncComponent(() => import((`../components/examples/${fileName}.vue`)))
+            defineAsyncComponent(() => import(`../components/examples/${fileName}.vue`))
         )
 
         app.use(DialogPlugin, {})
         registerComponent('UIExamplesButton')
+        registerComponent('UIExamplesWrapper')
         registerComponent('FeaturesExampleAlert')
         registerComponent('FeaturesExampleConfirm')
         registerComponent('FeaturesExampleConfirmSoft')
         registerComponent('FeaturesExampleConfirmHard')
         registerComponent('FeaturesExamplePrompt')
+        registerComponent('FeaturesExampleDirective')
     },
     setup() {},
     rootComponents: [],

docs/components/examples/FeaturesExampleConfirm.vue

@@ -12,7 +12,7 @@
   const $dialog = inject('$dialog')
   const openDialog = () => $dialog.confirm({
     title: 'Confirm example',
-    body: 'The requested resource is no longer available. It may have been moved or deleted',
+    body: 'The is a low risk operation. Single click required to confirm.',
   }, {
     cancelText: 'No',
     okText: 'Yes'

docs/components/examples/FeaturesExampleDirective.vue

@@ -0,0 +1,10 @@
+<template>
+  <a href="https://example.com"
+     target="_blank"
+     v-confirm="'Confirming this dialog will take you to an external website'"
+  >A link</a>
+  <span> or a </span>
+  <button v-confirm="'Confirm to change button text to \'Already clicked\''"
+          @click="($event) => $event.target.textContent = 'Already clicked'"
+  >button</button>
+</template>

docs/components/examples/UIExamplesButton.vue

@@ -3,8 +3,6 @@
 </template>
 
 <script setup>
-import {ref} from 'vue'
-
 defineEmits({
   click: () => true,
 })
@@ -32,5 +30,8 @@ button {
   appearance: none;
   font-size: 16px;
   font-weight: 700;
+
+  color: white;
+  background-color: var(--vp-c-accent);
 }
 </style>

docs/components/examples/UIExamplesWrapper.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="examples-wrapper"><slot></slot></div>
+</template>
+
+<style lang="scss">
+  h1, h2, h3, h4 {
+    ~ .examples-wrapper {
+      margin-top: 0.75rem;
+    }
+  }
+</style>
+
+<style lang="scss">
+.examples-wrapper {
+  border: 1px solid var(--vp-c-gutter);
+  padding: 1rem;
+  border-radius: 4px;
+}
+</style>

docs/content/features/README.md

@@ -3,7 +3,7 @@
 ## Alert
 An alert dialog can be triggered using the `$dialog.alert()` method. This method returns a promise which resolves when the dialog is dismissed.
 
-<FeaturesExampleAlert />
+<UIExamplesWrapper><FeaturesExampleAlert /></UIExamplesWrapper>
 @[code](../../components/examples/FeaturesExampleAlert.vue)
 
 
@@ -14,36 +14,30 @@ In this section we shall explore how to create a basic confirm dialog as well as
 
 
 ### Basic confirm dialog
-
-
-<FeaturesExampleConfirm />
+<UIExamplesWrapper><FeaturesExampleConfirm /></UIExamplesWrapper>
 @[code](../../components/examples/FeaturesExampleConfirm.vue)
 
 
 ### Soft confirm dialog
-<FeaturesExampleConfirmSoft />
+<UIExamplesWrapper><FeaturesExampleConfirmSoft /></UIExamplesWrapper>
 @[code](../../components/examples/FeaturesExampleConfirmSoft.vue)
 
 
 ### Hard confirm dialog
-<FeaturesExampleConfirmHard />
+<UIExamplesWrapper><FeaturesExampleConfirmHard /></UIExamplesWrapper>
 @[code](../../components/examples/FeaturesExampleConfirmHard.vue)
 
 
 ## Prompt
 The `$dialog.prompt()` method creates a prompt dialog. Use the prompt dialog to ask user directly for input.
 
-<FeaturesExamplePrompt />
+<UIExamplesWrapper><FeaturesExamplePrompt /></UIExamplesWrapper>
 @[code](../../components/examples/FeaturesExamplePrompt.vue)
 
 
+
 ## Confirm directive
-Sample code block
-```ts title=".vuepress/config.ts"
-this.$dialog.alert({
-    title: 'Request failed',
-    body: 'The requested resource is no longer available. It may have been moved or deleted',
-}, {
-    okText: 'Dismiss'
-})
-```
+Add the `v-confirm` directive to any element to instantly cause it to trigger a confirm dialog. This dialog upon confirmation will trigger the default action or the provided callback when available.
+
+<UIExamplesWrapper><FeaturesExampleDirective /></UIExamplesWrapper>
+@[code](../../components/examples/FeaturesExampleDirective.vue)