fix(Modal): move classes to DialogPanel

nuxt · Apr 28, 2022 · dfe86f0 · dfe86f0
1 parent 6532b4b
commit dfe86f0
Showing 1 changed file with 51 additions and 50 deletions.
diff --git a/src/runtime/components/overlays/Modal.vue b/src/runtime/components/overlays/Modal.vue
@@ -1,55 +1,51 @@
 <template>
   <TransitionRoot :appear="appear" :show="isOpen" as="template">
-    <Dialog @close="close">
-      <div class="fixed z-20 inset-0 overflow-y-auto">
-        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-          <TransitionChild
-            as="template"
-            :appear="appear"
-            enter="ease-out duration-300"
-            enter-from="opacity-0"
-            enter-to="opacity-100"
-            leave="ease-in duration-200"
-            leave-from="opacity-100"
-            leave-to="opacity-0"
-          >
-            <div class="fixed inset-0 bg-gray-500/75 dark:bg-gray-600/75 transition-opacity" />
-          </TransitionChild>
+    <Dialog class="relative z-20" @close="close">
+      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+        <TransitionChild
+          as="template"
+          :appear="appear"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div class="fixed inset-0 bg-gray-500/75 dark:bg-gray-600/75 transition-opacity" />
+        </TransitionChild>
 
-          <div class="fixed inset-0 overflow-y-auto">
-            <div class="flex min-h-full items-center justify-center p-4 text-center">
-              <TransitionChild
-                as="template"
-                :appear="appear"
-                enter="ease-out duration-300"
-                enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                enter-to="opacity-100 translate-y-0 sm:scale-100"
-                leave="ease-in duration-200"
-                leave-from="opacity-100 translate-y-0 sm:scale-100"
-                leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              >
-                <DialogPanel>
-                  <Card
-                    :base-class="baseClass"
-                    :background-class="backgroundClass"
-                    :shadow-class="shadowClass"
-                    :ring-class="ringClass"
-                    :rounded-class="roundedClass"
-                    :class="modalClass"
-                    padded
-                    v-bind="$attrs"
-                  >
-                    <template v-if="$slots.header" #header>
-                      <slot name="header" />
-                    </template>
-                    <slot />
-                    <template v-if="$slots.footer" #footer>
-                      <slot name="footer" />
-                    </template>
-                  </Card>
-                </DialogPanel>
-              </TransitionChild>
-            </div>
+        <div class="fixed inset-0 overflow-y-auto">
+          <div class="flex min-h-full items-center justify-center p-4 text-center">
+            <TransitionChild
+              as="template"
+              :appear="appear"
+              enter="ease-out duration-300"
+              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enter-to="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leave-from="opacity-100 translate-y-0 sm:scale-100"
+              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <DialogPanel :class="modalClass">
+                <Card
+                  base-class
+                  background-class
+                  shadow-class
+                  ring-class
+                  rounded-class
+                  v-bind="$attrs"
+                >
+                  <template v-if="$slots.header" #header>
+                    <slot name="header" />
+                  </template>
+                  <slot />
+                  <template v-if="$slots.footer" #footer>
+                    <slot name="footer" />
+                  </template>
+                </Card>
+              </DialogPanel>
+            </TransitionChild>
           </div>
         </div>
       </div>
@@ -123,7 +119,12 @@ export default {
 
     const modalClass = computed(() => {
       return classNames(
-        `sm:${props.widthClass}`
+        props.baseClass,
+        `sm:${props.widthClass}`,
+        props.backgroundClass,
+        props.shadowClass,
+        props.ringClass,
+        props.roundedClass
       )
     })