Chore(ts): more ts support

Author: Godofbrowser

docs/.vuepress/client.js

@@ -1,6 +1,6 @@
 import {defineAsyncComponent} from "vue";
 import { defineClientConfig } from 'vuepress/client'
-import DialogPlugin from "../../src/plugin/index";
+import {PromiseDialog} from "../../src/plugin/index";
 
 
 export default defineClientConfig({
@@ -10,7 +10,7 @@ export default defineClientConfig({
             defineAsyncComponent(() => import(`../components/examples/${fileName}.vue`))
         )
 
-        app.use(DialogPlugin, {})
+        app.use(PromiseDialog)
         registerComponent('UIExamplesButton')
         registerComponent('UIExamplesWrapper')
         registerComponent('FeaturesExampleAlert')

docs/components/examples/FeaturesExampleAlert.vue

@@ -4,12 +4,13 @@
 
 <script setup>
   import {inject} from 'vue'
+  import {injectionKey} from "../../../src/plugin/index.ts";
 
   defineOptions({
     name: "FeaturesExampleAlert"
   })
 
-  const $dialog = inject('$dialog')
+  const $dialog = inject(injectionKey)
   const openDialog = () => $dialog.alert({
     title: 'Alert example',
     body: 'Session expired. Please login again to continue.',

docs/components/examples/FeaturesExampleConfirm.vue

@@ -4,12 +4,13 @@
 
 <script setup>
   import {inject} from 'vue'
+  import {injectionKey} from "../../../src/plugin/index.ts";
 
   defineOptions({
     name: "FeaturesExampleConfirm"
   })
 
-  const $dialog = inject('$dialog')
+  const $dialog = inject(injectionKey)
   const openDialog = () => $dialog.confirm({
     title: 'Confirm example',
     body: 'The is a low risk operation. Single click required to confirm.',

docs/components/examples/FeaturesExampleConfirmHard.vue

@@ -1,20 +1,22 @@
 <template>
-  <UIExamplesButton @click="openDialog">Show confirm | basic</UIExamplesButton>
+  <UIExamplesButton @click="openDialog">Show confirm | hard</UIExamplesButton>
 </template>
 
 <script setup>
   import {inject} from 'vue'
+  import {injectionKey} from "../../../src/plugin/index.ts";
 
   defineOptions({
     name: "FeaturesExampleConfirm"
   })
 
-  const $dialog = inject('$dialog')
+  const $dialog = inject(injectionKey)
   const openDialog = () => $dialog.confirm({
     title: 'Confirm example',
     body: 'The requested resource is no longer available. It may have been moved or deleted',
   }, {
     cancelText: 'No',
-    okText: 'Yes'
+    okText: 'Yes',
+    type: 'hard'
   })
 </script>

docs/components/examples/FeaturesExampleConfirmSoft.vue

@@ -4,12 +4,13 @@
 
 <script setup>
   import {inject} from 'vue'
+  import {injectionKey} from "../../../src/plugin/index.ts";
 
   defineOptions({
     name: "FeaturesExampleConfirmSoft"
   })
 
-  const $dialog = inject('$dialog')
+  const $dialog = inject(injectionKey)
   const openDialog = () => $dialog.confirm({
     title: 'Soft confirm example',
     body: 'This is a medium risk action. Multiple clicks required to confirm',

docs/components/examples/FeaturesExamplePrompt.vue

@@ -4,12 +4,13 @@
 
 <script setup>
   import {inject} from 'vue'
+  import {injectionKey} from "../../../src/plugin/index.ts";
 
   defineOptions({
     name: "FeaturesExamplePrompt"
   })
 
-  const $dialog = inject('$dialog')
+  const $dialog = inject(injectionKey)
   const openDialog = () => $dialog.prompt({
     title: 'Prompt Example',
     body: 'What is the most important thing in life?',

docs/index.md

@@ -69,6 +69,35 @@ app.mount('#app')
 <!--// Tell Vue to install the plugin.-->
 <!--window.Vue.use(VuejsDialog.main.default)-->
 <!--</script>-->
+
+
+// <link href="./path/to/vuejs-dialog.min.css" rel="stylesheet">
+// <script src="https://unpkg.com/vue@3.5.4/dist/vue.global.js"></script>
+// <script src="../vuejs-dialog.umd.js"></script>
+//
+// ...then...
+//
+// <div id="app">{{ message }}</div>
+// <script>
+// // Create Vue 3 app
+// const app = Vue.createApp({
+//     data() {
+//         return {
+//             message: 'Hello Vue 3!',
+//         };
+//     },
+// });
+//
+// app.use(window.VuejsDialog.PromiseDialog, {
+//     message: {
+//         title: 'Quick one',
+//         body: 'Please confirm that you wish to proceed'
+//     }
+// })
+//
+// // Mount the app to the DOM element
+// app.mount('#app');
+// </script>
 ```
 
 ## Opening a dialog