feat(Panel): accept custom css classes for internal containers

Author: bnjm

src/components/Dialog.vue

@@ -9,6 +9,8 @@ import {
 import AButton from './Button.vue'
 import APanel from './Panel.vue'
 
+type ClassValue = string | string[] | Record<string, boolean>
+
 export default defineComponent({
   name: 'ADialog',
   components: { HlDialog, HlDialogPanel, HlDialogTitle, AButton, APanel },
@@ -36,6 +38,20 @@ export default defineComponent({
     position: {
       type: String as PropType<'top' | 'center' | 'bottom'>,
       default: 'top'
+    },
+    /**
+     * Custom classes for internal panel containers. Passed through to APanel.
+     * - `title`: merged with panel title defaults
+     * - `body`: merged with panel body defaults
+     * - `actions`: merged with panel actions defaults
+     */
+    classes: {
+      type: Object as PropType<{
+        title?: ClassValue
+        body?: ClassValue
+        actions?: ClassValue
+      }>,
+      default: () => ({})
     }
   },
   emits: ['close'],
@@ -70,7 +86,7 @@ export default defineComponent({
         <slot></slot>
       </HlDialogPanel>
       <HlDialogPanel v-else class="contents">
-        <APanel class="m-[5rem] min-w-[20rem] overflow-auto">
+        <APanel class="m-[5rem] min-w-[20rem] overflow-auto" :classes="classes">
           <!-- this snippet passes up all the wrapper component's slots -->
           <template v-for="(_, slot) in $slots" #[slot]="scope">
             <slot :name="slot" v-bind="scope || {}" />

src/components/Panel.vue

@@ -1,6 +1,8 @@
 <script lang="ts">
 import { defineComponent, PropType, Component } from 'vue'
 
+type ClassValue = string | string[] | Record<string, boolean>
+
 export default defineComponent({
   name: 'APanel',
   props: {
@@ -15,13 +17,27 @@ export default defineComponent({
     as: {
       type: [Object, String] as PropType<Component | keyof HTMLElementTagNameMap>,
       default: 'div'
+    },
+    /**
+     * Custom classes for internal containers. Merged with default classes.
+     * - `title`: merged with (min-h-10 px-6 pt-2 heading-sm)
+     * - `body`: merged with (overflow-auto px-6 py-4 body-md)
+     * - `actions`: merged with (mt-auto flex h-16 items-center gap-2 rounded-b border-t border-gray bg-athens px-6 py-3)
+     */
+    classes: {
+      type: Object as PropType<{
+        title?: ClassValue
+        body?: ClassValue
+        actions?: ClassValue
+      }>,
+      default: () => ({})
     }
   }
 })
 </script>
 <template>
   <div class="a-panel-lg flex flex-col whitespace-pre-line rounded bg-white">
-    <div v-if="$slots.title || title" class="min-h-10 px-6 pt-2 heading-sm">
+    <div v-if="$slots.title || title" class="min-h-10 px-6 pt-2 heading-sm" :class="classes.title">
       <!--
         @slot #title
         For simple strings, use the `title` prop.
@@ -31,7 +47,7 @@ export default defineComponent({
         {{ title }}
       </slot>
     </div>
-    <div class="overflow-auto px-6 py-4 body-md">
+    <div class="overflow-auto px-6 py-4 body-md" :class="classes.body">
       <!--
         @slot #body
         This is a padded container with typography styles 
@@ -40,7 +56,8 @@ export default defineComponent({
     </div>
     <div
       v-if="$slots.actions"
-      class="mt-auto flex h-16 items-center gap-2 rounded-b border-t border-gray bg-athens px-6 py-3">
+      class="mt-auto flex h-16 items-center gap-2 rounded-b border-t border-gray bg-athens px-6 py-3"
+      :class="classes.actions">
       <!--
           @slot #actions
           Use the slot to provide buttons for user actions.