refactor: update modal | add useProgrammatic composable (#623)

* refactor: update modal * feat: add useProgrammatic composable * refactor: prop descriptions * update(notification): example * fix(modal): destroyOnHide * update(modal): add activeClass * fix: #334
oruga-ui · Oct 15, 2023 · fd7f324 · fd7f324
1 parent 4d8d58f
commit fd7f324
Show file tree

Hide file tree

Showing 21 changed files with 744 additions and 616 deletions.
diff --git a/packages/docs-next/.vitepress/theme/examples/modal/_modal-form-async.vue b/packages/docs-next/.vitepress/theme/examples/modal/_modal-form-async.vue
@@ -1,13 +1,7 @@
 <script setup>
 defineProps({
-    title: {
-        type: String,
-        default: "",
-    },
-    message: {
-        type: String,
-        default: "",
-    },
+    title: { type: String, default: "" },
+    message: { type: String, default: "" },
 });
 
 defineEmits(["close"]);

diff --git a/packages/docs-next/.vitepress/theme/examples/modal/_modal-form.vue b/packages/docs-next/.vitepress/theme/examples/modal/_modal-form.vue
@@ -1,13 +1,7 @@
 <script setup>
 defineProps({
-    email: {
-        type: String,
-        default: "",
-    },
-    password: {
-        type: String,
-        default: "",
-    },
+    email: { type: String, default: "" },
+    password: { type: String, default: "" },
 });
 
 defineEmits(["close"]);
@@ -43,7 +37,7 @@ defineEmits(["close"]);
                 </o-field>
 
                 <o-field>
-                    <o-checkbox>Remember me</o-checkbox>
+                    <o-checkbox label="Remember me" />
                 </o-field>
             </section>
             <footer class="modal-card-foot">

diff --git a/packages/docs-next/.vitepress/theme/examples/modal/inspector.vue b/packages/docs-next/.vitepress/theme/examples/modal/inspector.vue
@@ -15,6 +15,13 @@ const inspectData = [
         description: "Class of modal component when on mobile",
         warning: "Switch to mobile view to see it in action!",
     },
+    {
+        class: "activeClass",
+        description: "Class of modal component when its active",
+        action: () => {
+            isImageModalActive.value = true;
+        },
+    },
     {
         class: "overlayClass",
         description: "Class of the modal overlay",

diff --git a/packages/docs-next/.vitepress/theme/examples/modal/programmatically-async.vue b/packages/docs-next/.vitepress/theme/examples/modal/programmatically-async.vue
@@ -12,6 +12,7 @@ const promptModal = async () => {
             message: "Do you really want me to ship the selected sprockets?",
         },
         trapFocus: true,
+        destroyOnHide: true,
     });
     // Note utilizing the promise requires Promise be supported by the browser
     // If you are running Vue 2 on IE 11 this will not be the case unless you
@@ -36,13 +37,12 @@ const promptModalCloseAll = async () => {
                 "There is a 3 second timeout that will close all programmatic modals",
         },
         trapFocus: true,
+        destroyOnHide: true,
     });
 
     setTimeout(() => oruga.modal.closeAll({ action: "closeAll" }), 3 * 1000);
 
-    // Note utilizing the promise requires Promise be supported by the browser
-    // If you are running Vue 2 on IE 11 this will not be the case unless you
-    // add a polyfill in your build.
+    // wait until the modal got closed
     const result = await instance.promise;
 
     oruga.notification.open({

diff --git a/packages/docs-next/.vitepress/theme/examples/modal/programmatically.vue b/packages/docs-next/.vitepress/theme/examples/modal/programmatically.vue
@@ -13,13 +13,15 @@ function imageModal() {
     ]);
     oruga.modal.open({
         content: [vnode],
+        destroyOnHide: true,
     });
 }
 
 function cardModal() {
     oruga.modal.open({
         component: ModalForm,
         trapFocus: true,
+        destroyOnHide: false,
     });
 }
 </script>

diff --git a/packages/docs-next/.vitepress/theme/examples/notification/_notification-form.vue b/packages/docs-next/.vitepress/theme/examples/notification/_notification-form.vue
@@ -16,7 +16,9 @@ defineEmits(["close"]);
                     clickable
                     native-type="button"
                     icon="times"
-                    @click="$emit('close')" />
+                    @click="
+                        $emit('close', { action: 'cancel', method: 'x' })
+                    " />
             </header>
             <section class="modal-card-body">
                 <o-field label="Email">
@@ -41,7 +43,12 @@ defineEmits(["close"]);
                 </o-field>
             </section>
             <footer class="modal-card-foot">
-                <o-button label="Close" type="button" @click="$emit('close')" />
+                <o-button
+                    label="Close"
+                    type="button"
+                    @click="
+                        $emit('close', { action: 'cancel', method: 'close' })
+                    " />
                 <o-button label="Login" variant="primary" />
             </footer>
         </div>

diff --git a/packages/docs-next/.vitepress/theme/examples/notification/index.vue b/packages/docs-next/.vitepress/theme/examples/notification/index.vue
@@ -1,6 +1,6 @@
 <script setup>
-import ProgrammaticallyOpening from "./programmatically-opening.vue";
-import ProgrammaticallyOpeningCode from "./programmatically-opening.vue?raw";
+import Programmatically from "./programmatically.vue";
+import ProgrammaticallyCode from "./programmatically.vue?raw";
 
 import Base from "./base.vue";
 import BaseCode from "./base.vue?raw";
@@ -29,7 +29,5 @@ import AddCustomButtonsCode from "./add-custom-buttons.vue?raw";
     <ExampleViewer :component="AddCustomButtons" :code="AddCustomButtonsCode" />
 
     <h3 id="programmatically">Programmatically opening</h3>
-    <ExampleViewer
-        :component="ProgrammaticallyOpening"
-        :code="ProgrammaticallyOpeningCode" />
+    <ExampleViewer :component="Programmatically" :code="ProgrammaticallyCode" />
 </template>
diff --git a/...notification/programmatically-opening.vue → ...xamples/notification/programmatically.vue b/...notification/programmatically-opening.vue → ...xamples/notification/programmatically.vue
@@ -46,13 +46,24 @@ function danger() {
     });
 }
 
-function component() {
-    oruga.notification.open({
+async function component() {
+    const instance = oruga.notification.open({
         component: NotificationForm,
         position: "bottom-right",
         variant: "warning",
         indefinite: true,
     });
+
+    // wait until the notification got closed
+    const result = await instance.promise;
+
+    oruga.notification.open({
+        duration: 5000,
+        message: "Modal dialog returned " + JSON.stringify(result),
+        variant: "info",
+        position: "top",
+        closable: true,
+    });
 }
 </script>
 

diff --git a/packages/docs-next/components/Loading.md b/packages/docs-next/components/Loading.md
@@ -38,31 +38,32 @@ title: Loading
 
 ### Props
 
-| Prop name  | Description                                                                                                    | Type        | Values                     | Default                                                                                                                                              |
-| ---------- | -------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| active     | Whether loading is active or not, use v-model:active to make it two-way binding.                               | boolean     | -                          | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                          |
-| animation  | Custom animation (transition name)                                                                             | string      | -                          | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;animation: "fade"<br>}</code>  |
-| cancelable | Can cancle Loading by pressing escape or clicking outside.                                                     | boolean     | -                          | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                          |
-| container  | DOM element where the loading component will be created on.<br/>Note that this also changes fullPage to false. | HTMLElement | -                          |                                                                                                                                                      |
-| fullPage   | Loader will overlay the full page.                                                                             | boolean     | -                          | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                           |
-| icon       | Icon name to show, unnecessary when default slot is used.                                                      | string      | -                          | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;icon: "loading"<br>}</code>    |
-| iconSize   | Icon size                                                                                                      | string      | `small`, `medium`, `large` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;iconSize: "medium"<br>}</code> |
-| iconSpin   | Enable spin effect on icon                                                                                     | boolean     | -                          | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;iconSpin: true<br>}</code>     |
-| label      | Notification label, unnecessary when default slot is used.                                                     | string      | -                          |                                                                                                                                                      |
-| onCancle   | Callback function to call after user canceled (pressed escape / clicked outside).                              | func        | -                          | Default function (see source code)                                                                                                                   |
+| Prop name  | Description                                                                                                                             | Type                  | Values                     | Default                                                                                                                                              |
+| ---------- | --------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| active     | Whether loading is active or not, use v-model:active to make it two-way binding.                                                        | boolean               | -                          | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                          |
+| animation  | Custom animation (transition name)                                                                                                      | string                | -                          | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;animation: "fade"<br>}</code>  |
+| cancelable | Is Loading cancable by pressing escape or clicking outside.                                                                             | boolean               | -                          | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                          |
+| container  | DOM element where the loading component will be created on (for programmatic usage).<br/>Note that this also changes fullPage to false. | string \| HTMLElement | -                          | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;container: "body"<br>}</code>  |
+| fullPage   | Loader will overlay the full page.                                                                                                      | boolean               | -                          | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                           |
+| icon       | Icon name to show, unnecessary when default slot is used.                                                                               | string                | -                          | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;icon: "loading"<br>}</code>    |
+| iconSize   | Icon size                                                                                                                               | string                | `small`, `medium`, `large` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;iconSize: "medium"<br>}</code> |
+| iconSpin   | Enable spin effect on icon                                                                                                              | boolean               | -                          | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>loading: {<br>&nbsp;&nbsp;iconSpin: true<br>}</code>     |
+| label      | Notification label, unnecessary when default slot is used.                                                                              | string                | -                          |                                                                                                                                                      |
+| onCancel   | Callback function to call after user canceled (pressed escape / clicked outside).                                                       | () =&gt; void         | -                          | Default function (see source code)                                                                                                                   |
+| onClose    | Callback function to call after close (programmatically close or user canceled).                                                        | () =&gt; void         | -                          | Default function (see source code)                                                                                                                   |
 
 ### Events
 
 | Event name    | Properties                                | Description                 |
 | ------------- | ----------------------------------------- | --------------------------- |
 | update:active | **value** `boolean` - updated active prop | active prop two-way binding |
-| close         | **value** `any` -                         | on loading close event      |
+| close         | **value** `any` - close event data        | on component close event    |
 
 ### Slots
 
-| Name    | Description             | Bindings |
-| ------- | ----------------------- | -------- |
-| default | Override icon and label |          |
+| Name    | Description             | Bindings                                            |
+| ------- | ----------------------- | --------------------------------------------------- |
+| default | Override icon and label | **close** `close` - function to close the component |
 
 </div>