Update Settings component to expose each settings value as its own co…

…mponent prop (#177)
techniq · Jan 4, 2024 · 7e57344 · 7e57344
1 parent b2683fb
commit 7e57344
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 14 deletions.
diff --git a/.changeset/chilled-dingos-sell.md b/.changeset/chilled-dingos-sell.md
@@ -0,0 +1,5 @@
+---
+"svelte-ux": minor
+---
+
+Update Settings component to expose each settings key as a component prop
diff --git a/packages/svelte-ux/src/lib/components/Settings.svelte b/packages/svelte-ux/src/lib/components/Settings.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
   import ThemeInit from './ThemeInit.svelte';
-  import { settings as setSettings, type Settings } from './settings';
+  import { settings as setSettings, type SettingsInput } from './settings';
+
+  type $$Props = SettingsInput & { themeInit?: boolean };
 
-  export let settings: Settings;
   /** Include the ThemeInit component to improve SSR compatibility. */
   export let themeInit = true;
 
-  setSettings(settings);
+  setSettings($$restProps);
 </script>
 
 {#if themeInit}

diff --git a/packages/svelte-ux/src/routes/docs/components/ResponsiveMenu/+page.svelte b/packages/svelte-ux/src/routes/docs/components/ResponsiveMenu/+page.svelte
@@ -185,11 +185,9 @@ to add `pb-safe` util class
 
 <Preview>
   <Settings
-    settings={{
-      theme: {
-        Drawer:
-          '[&.ResponsiveMenu]:rounded-t-xl [&.ResponsiveMenu]:py-2 [&.ResponsiveMenu]:pb-[env(safe-area-inset-bottom)]',
-      },
+    classes={{
+      Drawer:
+        '[&.ResponsiveMenu]:rounded-t-xl [&.ResponsiveMenu]:py-2 [&.ResponsiveMenu]:pb-[env(safe-area-inset-bottom)]',
     }}
   >
     <Toggle let:on={open} let:toggle let:toggleOff>

diff --git a/packages/svelte-ux/src/routes/docs/components/Settings/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Settings/+page.svelte
@@ -13,12 +13,10 @@
 
 <Preview>
   <Settings
-    settings={{
-      theme: {
-        Button: 'border-2 font-bold',
-        Menu: 'shadow-xl border-gray-500',
-        MenuItem: 'font-bold',
-      },
+    classes={{
+      Button: 'border-2 font-bold',
+      Menu: 'shadow-xl border-gray-500',
+      MenuItem: 'font-bold',
     }}
   >
     <Toggle let:on={open} let:toggle>