feat: add on_close prop for passing in a callback to perform when ResponsiveSlideover close is triggered

Author: jacob-8

src/index.md

@@ -1,17 +1,6 @@
-<script lang="ts">
-	import Button from '$lib/ui/Button.svelte';
-	import { toast } from '$lib/ui/Toasts.svelte';
-</script>
-
 # Svelte Pieces
 
 Install with `npm i -D svelte-pieces`.
 
-Built using Kitbook, Windicss, and Iconify icons - you don't need Tailwind nor Windi installed for these components to work properly as the classes get generated at packaging time.
-
-## Smoke Test
-<Button onclick={() => toast('hello')}>Push Toast</Button>
+Built using Kitbook, UnoCSS, and Iconify icons - you don't need UnoCSS installed for these components to work properly as the classes get generated at packaging time thanks to `@unocss/svelte-scoped`'s [preprocessor](https://unocss.dev/integrations/svelte-scoped#svelte-preprocessor).
 
-{#await import('$lib/ui/Toasts.svelte') then { default: Toasts }}
-	<Toasts />
-{/await}

src/lib/ui/ResponsiveSlideover.composition

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import ShowHide from '$lib/functions/ShowHide.svelte';
+  import Button from './Button.svelte';
+  import ResponsiveSlideover from './ResponsiveSlideover.svelte';
+
+  let size: 'sm' | 'md' | 'lg' | 'xl' = 'xl';
+</script>
+
+<ShowHide let:show let:toggle>
+  <Button color="primary" onclick={toggle}>Show Slideover</Button>
+  <Button form="menu" active={size === 'sm'} onclick={() => size = 'sm'}>Size: sm</Button>
+  <Button form="menu" active={size === 'md'} onclick={() => size = 'md'}>Size: md</Button>
+  <Button form="menu" active={size === 'lg'} onclick={() => size = 'lg'}>Size: lg</Button>
+  <Button form="menu" active={size === 'xl'} onclick={() => size = 'xl'}>Size: xl</Button>
+  
+  <ResponsiveSlideover showWidth={size} open={show} on_close={toggle}>
+    <div slot="title">Universal Title</div>
+    <div class="p-3 border-b font-semibold" slot="heading">Universal Heading</div>
+    <div class="p-3 border-b font-semibold" slot="desktopHeading">Desktop Heading</div>
+    <div class="p-3 border-b font-semibold" slot="mobileHeading">Mobile Heading</div>
+    <div class="p-3 hover:bg-gray-100">Menu Item</div>
+    <div class="p-3 hover:bg-gray-100">Menu Item</div>
+    <div class="p-3 hover:bg-gray-100">Menu Item</div>
+    <div class="p-3 hover:bg-gray-100">Menu Item</div>
+  </ResponsiveSlideover>
+</ShowHide>

src/lib/ui/ResponsiveSlideover.md

@@ -13,6 +13,7 @@
   export let mobileClasses = '';
 
   export let open = false;
+  export let on_close: () => void = undefined
 </script>
 
 <div
@@ -47,7 +48,7 @@
       {side}
       {widthRem}
       {maxWidthPercentage}
-      on:close={() => (open = false)}
+      on:close={on_close}
     >
       <svelte:fragment slot="heading">
         {#if $$slots.mobileTitle}
@@ -56,7 +57,7 @@
               <slot name="mobileTitle" />
             </h3>
             <button
-              on:click={() => (open = false)}
+              on:click={on_close}
               type="button"
               class="text-gray-400 px-3 py-4 flex hover:text-gray-500 focus:outline-none
     focus:text-gray-500 transition ease-in-out duration-150"