apply component setttings classes for Card (#590)

* apply component setttings classes for Card

* fix(Card): Support passing classes from settings() to underlying header, content, and actions components

---------

Co-authored-by: linhua <linhua@mbp.lan>
Co-authored-by: Sean Lynch <techniq35@gmail.com>

Author: 3 people

.changeset/cruel-olives-tell.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+fix(Card): Support passing classes from settings() to underlying header, content, and actions components

packages/svelte-ux/src/lib/components/Card.svelte

@@ -4,7 +4,7 @@
   import ProgressCircle from './ProgressCircle.svelte';
   import Header from './Header.svelte';
   import Overlay from './Overlay.svelte';
-  import { cls } from '@layerstack/tailwind';
+  import { cls, clsMerge } from '@layerstack/tailwind';
   import { getComponentClasses } from './theme.js';
 
   export let title: string | string[] | null = null;
@@ -48,23 +48,23 @@
   {/if}
 
   {#if title || subheading || $$slots.header}
-    <div class={cls('p-4', classes.headerContainer)}>
+    <div class={cls('p-4', settingsClasses.headerContainer, classes.headerContainer)}>
       <slot name="header">
-        <Header {title} {subheading} classes={classes.header} />
+        <Header {title} {subheading} classes={clsMerge(settingsClasses.header, classes.header)} />
       </slot>
     </div>
   {/if}
 
   <slot />
 
   {#if $$slots.contents}
-    <div class={cls('px-4 flex-1', classes.content)}>
+    <div class={cls('px-4 flex-1', settingsClasses.content, classes.content)}>
       <slot name="contents" />
     </div>
   {/if}
 
   {#if $$slots.actions}
-    <div class={cls('py-2 px-1', classes.actions)}>
+    <div class={cls('py-2 px-1', settingsClasses.actions, classes.actions)}>
       <slot name="actions" />
     </div>
   {/if}

packages/svelte-ux/src/routes/docs/components/Card/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { mdiDotsVertical } from '@mdi/js';
 
-  import { Avatar, Button, Card, Header } from 'svelte-ux';
+  import { Avatar, Button, Card, Header, Settings } from 'svelte-ux';
   import Preview from '$lib/components/Preview.svelte';
 </script>
 
@@ -125,3 +125,17 @@
 <Preview>
   <Card class="elevation-none">Contents</Card>
 </Preview>
+
+<h2>Settings</h2>
+
+<Settings
+  components={{
+    Card: {
+      classes: { headerContainer: 'bg-surface-300 border-b', header: { title: 'text-3xl' } },
+    },
+  }}
+>
+  <Card title="Title" subheading="Subheading">
+    <div slot="contents">Contents</div>
+  </Card>
+</Settings>