Chore(docs): update options section

Author: Godofbrowser

docs/.vuepress/client.js

@@ -19,6 +19,8 @@ export default defineClientConfig({
         registerComponent('FeaturesExampleConfirmHard')
         registerComponent('FeaturesExamplePrompt')
         registerComponent('FeaturesExampleDirective')
+        registerComponent('OptionsExampleAnimation')
+        registerComponent('OptionsExampleLoader')
     },
     setup() {},
     rootComponents: [],

docs/components/examples/FeaturesExamplePrompt.vue

@@ -16,9 +16,10 @@
     body: 'What is the most important thing in life?',
   }, {
     cancelText: 'Dismiss',
-    okText: 'Yes',
+    okText: 'Done',
     promptHelp: 'Type in the box below and click "[+:okText]"'
   }).then(result => {
-    console.log({ result })
+    if (result.canceled) return;
+    $dialog.alert(JSON.stringify(result))
   })
 </script>

docs/components/examples/OptionsExampleAnimation.vue

@@ -0,0 +1,24 @@
+<template>
+  <UIExamplesButton @click="openDialog('zoom')">Zoom</UIExamplesButton>&nbsp;
+  <UIExamplesButton @click="openDialog('fade')">Fade</UIExamplesButton>&nbsp;
+  <UIExamplesButton @click="openDialog('bounce')">Bounce</UIExamplesButton>
+</template>
+
+<script setup>
+  import {inject} from 'vue'
+  import {injectionKey} from "../../../src/plugin/index.ts";
+
+  defineOptions({
+    name: "OptionsExampleAnimation"
+  })
+
+  const $dialog = inject(injectionKey)
+  const openDialog = (animation) => $dialog.alert({
+    title: 'Alert example',
+    body: 'Session expired. Please login again to continue.',
+  }, {
+    okText: 'Dismiss',
+    animation,
+    backdropClose: true,
+  })
+</script>

docs/components/examples/OptionsExampleLoader.vue

@@ -0,0 +1,24 @@
+<template>
+  <UIExamplesButton @click="openDialog()">Show dialog</UIExamplesButton>
+</template>
+
+<script setup>
+  import {inject} from 'vue'
+  import {injectionKey} from "../../../src/plugin/index.ts";
+
+  defineOptions({
+    name: "OptionsExampleLoader"
+  })
+
+  const $dialog = inject(injectionKey)
+  const openDialog = () => $dialog.confirm({
+    title: 'Confirmation!',
+    body: 'Delete is permanent. Do you wish to proceed?',
+  }, {
+    okText: 'Delete',
+    loader: true,
+  }).then(({ canceled, close }) => {
+    if (canceled) return
+    setTimeout(close, 2000)
+  })
+</script>

docs/digging-deeper.md

@@ -1,8 +1,43 @@
 # Digging deeper
 
 ## Options
-### Custom Class
-### loader
+
+```typescript
+declare interface DialogOptions {
+    message: MessageWithTitle;
+    html: boolean;
+    loader: boolean;
+    reverse: boolean;
+    backdropClose: boolean;
+    okText: string;
+    cancelText: string;
+    type: ConfirmTypeEnum;
+    clicksCount: number;
+    animation: 'zoom' | 'bounce' | 'fade';
+    customClass: {
+        [k: string]: string;
+    };
+    verification: string;
+    verificationHelp: string;
+    promptHelp: string;
+}
+```
+
+### Animation
+There are three options to choose from so you have some flexibility with how the dialog transitions into view.
+
+<UIExamplesWrapper><OptionsExampleAnimation /></UIExamplesWrapper>
+@[code](components/examples/OptionsExampleAnimation.vue)
+
+
+### Loader
+You may use the loader option to indicate that an asynchronous task is being performed after the user decides to proceed.
+<UIExamplesWrapper><OptionsExampleLoader /></UIExamplesWrapper>
+@[code](components/examples/OptionsExampleLoader.vue)
+
+
+
 
 ## Custom component
+// Todo
 

docs/features.md

@@ -1,4 +1,4 @@
-# Features
+# Basic Features
 
 [[toc]]