Fix#3106/modal redesign (#3561)

* docs(modal): docs issues * docs(modal): update examples * fix(modal): expose all slot methods
epicmaxco · Jul 3, 2023 · da5a358 · da5a358
1 parent e757573
commit da5a358
Show file tree

Hide file tree

Showing 15 changed files with 183 additions and 75 deletions.
diff --git a/packages/docs/config/vuestic-config.ts b/packages/docs/config/vuestic-config.ts
@@ -19,6 +19,7 @@ export const VuesticConfig = defineVuesticConfig({
     },
     VaDropdown: {
       target: scrollWrapperSelector,
+      teleport: 'body',
     },
     VaBacktop: {
       target: scrollWrapperSelector,

diff --git a/packages/docs/page-config/ui-elements/modal/api-options.ts b/packages/docs/page-config/ui-elements/modal/api-options.ts
@@ -10,16 +10,16 @@ export default defineManualApi({
       types: "() => void",
     },
     beforeOpen: {
-      types: "() => HTMLElement",
+      types: "(el: HTMLElement) => void",
     },
     open: {
-      types: "() => HTMLElement",
+      types: "(el: HTMLElement) => void",
     },
     beforeClose: {
-      types: "() => HTMLElement",
+      types: "(el: HTMLElement) => void",
     },
     close: {
-      types: "() => HTMLElement",
+      types: "(el: HTMLElement) => void",
     },
   },
   methods: {

diff --git a/packages/docs/page-config/ui-elements/modal/examples/CloseButton.vue b/packages/docs/page-config/ui-elements/modal/examples/CloseButton.vue
@@ -0,0 +1,27 @@
+<template>
+  <va-button @click="showModal = true">
+    Show modal with close icon
+  </va-button>
+  <va-modal
+    v-model="showModal"
+    close-button
+  >
+    <h3 class="va-h3">
+      Title
+    </h3>
+    <p>
+      Classic modal overlay which represents a dialog box or other interactive
+      component, such as a dismissible alert, sub-window, etc.
+    </p>
+  </va-modal>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showModal: false,
+    };
+  },
+};
+</script>
diff --git a/packages/docs/page-config/ui-elements/modal/examples/CustomContent.vue b/packages/docs/page-config/ui-elements/modal/examples/CustomContent.vue
@@ -1,7 +1,8 @@
 <template>
   <va-button @click="showCustomContent = !showCustomContent">
-    Show custom content modal
+    Show custom content modal (with image)
   </va-button>
+
   <va-modal
     v-model="showCustomContent"
     no-padding
@@ -11,16 +12,13 @@
         :ratio="16 / 9"
         src="https://picsum.photos/1500"
       />
-      <va-card-title> Title! </va-card-title>
       <va-card-content>
         Classic modal overlay which represents a dialog box or other interactive
         component, such as a dismissible alert, sub-window, etc.
       </va-card-content>
       <va-card-actions>
-        <va-button
-          @click="ok"
-        >
-          Ok!
+        <va-button @click="ok">
+          Apply
         </va-button>
       </va-card-actions>
     </template>

diff --git a/packages/docs/page-config/ui-elements/modal/examples/Customization.vue b/packages/docs/page-config/ui-elements/modal/examples/Customization.vue
@@ -9,7 +9,7 @@
     overlay-opacity="0.2"
   >
     <template #header>
-      <h2>Custom header</h2>
+      <h3>Custom header</h3>
     </template>
     <div>{{ message }}</div>
     <template #footer>

diff --git a/packages/docs/page-config/ui-elements/modal/examples/Fullscreen.vue b/packages/docs/page-config/ui-elements/modal/examples/Fullscreen.vue
@@ -2,22 +2,47 @@
   <va-button @click="showModal = !showModal">
     Show modal (fullscreen)
   </va-button>
+
   <va-modal
     v-model="showModal"
     fullscreen
     :message="message"
     hide-default-actions
-  />
+  >
+    <div class="flex flex-col gap-2">
+      <h3 class="va-h3">
+        Full screen modal
+      </h3>
+
+      <p>
+        Classic modal overlay which represents a dialog box or other interactive
+        component, such as a dismissible alert, sub-window, etc.
+      </p>
+
+      <va-image
+        src="https://picsum.photos/1500"
+        :ratio="16 / 9"
+      />
+
+      <p>
+        Under the hood, the fullscreen modal is just a regular modal with a
+        fullscreen prop. It also has a message prop which can be used to display
+        a message in the modal's footer.
+      </p>
+
+      <va-alert>
+        Notice that on mobile devices, the modal will be displayed in fullscreen
+        by default.
+      </va-alert>
+    </div>
+  </va-modal>
 </template>
 
 <script>
-import message from "./popup-message";
-
 export default {
   data() {
     return {
       showModal: false,
-      message,
     };
   },
 };

diff --git a/packages/docs/page-config/ui-elements/modal/examples/ModalSizing.vue b/packages/docs/page-config/ui-elements/modal/examples/ModalSizing.vue
@@ -13,37 +13,65 @@
     Show modal size medium (default)
   </va-button>
 
-  <va-button class="my-1" @click="showModalSizeLarge = !showModalSizeLarge">
+  <va-button
+    class="my-1"
+    @click="showModalSizeLarge = !showModalSizeLarge"
+  >
     Show modal size large
   </va-button>
 
-  <va-modal v-model="showModalSizeSmall" message="Would you like to save?" />
+  <va-modal
+    v-model="showModalSizeSmall"
+    message="Would you like to save?"
+    ok-text="Save"
+  />
 
-  <va-modal v-model="showModalSizeMedium" size="small">
-    <h2 class="va-h2">Medium</h2>
+  <va-modal
+    v-model="showModalSizeMedium"
+    size="small"
+  >
+    <h3 class="va-h3">
+      Medium
+    </h3>
     <p>
       Classic modal overlay which represents a dialog box or other interactive
       component, such as a dismissible alert, sub-window, etc.
     </p>
   </va-modal>
 
-  <va-modal v-model="showModalSizeLarge" size="large">
-    <h2 class="va-h2">Party Hard</h2>
+  <va-modal
+    v-model="showModalSizeLarge"
+    size="large"
+  >
+    <h3 class="va-h3">
+      Party Hard
+    </h3>
 
-    <p>Select users to go to a party.</p>
+    <p class="va-text">
+      Select users to go to a party.
+    </p>
 
     <va-data-table
       style="width: 1000px"
       :items="[
-        { name: 'John', age: 21, email: 'john@example.com', verified: true },
-        { name: 'Jane', age: 22, email: 'jane@example.com', verified: false },
-        { name: 'Joe', age: 23, email: 'joe@example.com', verified: true },
+        { name: 'Marcus Claus', email: 'marcus@epicmax.co', status: 'verified', balance: '$34.15' },
+        { name: 'Moo Farah', email: 'moo@epicmax.co', status: 'pending', balance: '$199.0' },
+        { name: 'Stan Brass', email: 'stan@epicmax.co', status: 'blocked', balance: '$0.00' },
+        { name: 'Usan Jahallah', email: 'usan@epicmax.co', status: 'verified', balance: '$23 000.00' },
       ]"
     >
-      <template #cell(verified)="{ rowData }">
-        <va-chip :color="rowData.verified ? 'success' : 'danger'">
-          <va-icon name="check" v-if="rowData.verified" />
-          <va-icon name="close" v-else />
+      <template #cell(status)="{ rowData }">
+        <va-chip
+          :color="({
+            verified: 'primary',
+            pending: 'secondary',
+            blocked: 'danger',
+          })[rowData.status]"
+          class="va-text-uppercase"
+          size="small"
+          square
+        >
+          {{ rowData.status }}
         </va-chip>
       </template>
     </va-data-table>

diff --git a/packages/docs/page-config/ui-elements/modal/examples/NestedModals.vue b/packages/docs/page-config/ui-elements/modal/examples/NestedModals.vue
@@ -1,9 +1,17 @@
 <template>
-  <va-button @click="showFirstModal = !showFirstModal"> Show modal </va-button>
+  <va-button @click="showFirstModal = !showFirstModal">
+    Show modal
+  </va-button>
 
-  <va-modal v-model="showFirstModal" hide-default-actions>
+  <va-modal
+    v-slot="{ hide }"
+    v-model="showFirstModal"
+    hide-default-actions
+  >
     <div class="flex flex-col items-start gap-2">
-      <h2 class="va-h2">Nested Modal</h2>
+      <h3 class="va-h3">
+        Nested Modal
+      </h3>
 
       <va-date-input prevent-overflow />
 
@@ -13,6 +21,14 @@
     </div>
 
     <div class="flex justify-end mt-2">
+      <va-button
+        preset="secondary"
+        color="secondary"
+        class="mr-2"
+        @click="hide()"
+      >
+        Cancel
+      </va-button>
       <va-button
         @click="showSecondModal = !showSecondModal"
       >
@@ -21,7 +37,12 @@
     </div>
   </va-modal>
 
-  <va-modal v-model="showSecondModal" message="Would you like to save?" @ok="showFirstModal = false" />
+  <va-modal
+    v-model="showSecondModal"
+    message="Are you sure you want to save it?"
+    ok-text="Save"
+    @ok="showFirstModal = false"
+  />
 </template>
 
 <script>

diff --git a/packages/docs/page-config/ui-elements/modal/examples/Overview.vue b/packages/docs/page-config/ui-elements/modal/examples/Overview.vue
@@ -4,7 +4,7 @@
   </va-button>
 
   <va-modal v-model="showModal">
-    <h2 class="va-h2">Title</h2>
+    <h3 class="va-h3">Title</h3>
     <p>
       Classic modal overlay which represents a dialog box or other interactive
       component, such as a dismissible alert, sub-window, etc.

diff --git a/packages/docs/page-config/ui-elements/modal/examples/Stateful.vue b/packages/docs/page-config/ui-elements/modal/examples/Stateful.vue
@@ -5,19 +5,13 @@
   <va-modal
     ref="modal"
     stateful
-    :message="message"
-  />
+  >
+    <h3 class="va-h3">
+      Title
+    </h3>
+    <p>
+      Classic modal overlay which represents a dialog box or other interactive
+      component, such as a dismissible alert, sub-window, etc.
+    </p>
+  </va-modal>
 </template>
-
-<script>
-import message from "./popup-message";
-
-export default {
-  data() {
-    return {
-      showModal: false,
-      message,
-    };
-  },
-};
-</script>
diff --git a/packages/docs/page-config/ui-elements/modal/examples/ToggleVisibility.vue b/packages/docs/page-config/ui-elements/modal/examples/ToggleVisibility.vue
@@ -6,7 +6,7 @@
   </va-button>
 
   <va-modal v-model="doShowModal" ref="modal">
-    <h2 class="va-h2">Title</h2>
+    <h3 class="va-h3">Title</h3>
     <p>
       Classic modal overlay which represents a dialog box or other interactive
       component, such as a dismissible alert, sub-window, etc.