fix: Dropdown change to component prop since $$restProps does not work

pietervdvn · Jun 29, 2024 · b047d31 · b047d31
1 parent 81f01f2
commit b047d31
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 46 deletions.
diff --git a/src/lib/dropdown/Dropdown.svelte b/src/lib/dropdown/Dropdown.svelte
@@ -5,11 +5,12 @@
 </script>
 
 <script lang="ts">
+  import type { Placement } from '@floating-ui/dom';
   import { twMerge } from 'tailwind-merge';
   import Popper from '$lib/utils/Popper.svelte';
-  import type { ComponentProps } from 'svelte';
   import { setContext } from 'svelte';
   import { writable } from 'svelte/store';
+  import type {FrameColor} from '$lib/utils/Frame.svelte';
 
   const activeUrlStore = writable('');
 
@@ -23,6 +24,12 @@
   export let classFooter: string | undefined = undefined;
   export let activeClass: string = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
   export let classActive: string | undefined = undefined;
+  export let arrow: boolean = false;
+  export let trigger: 'hover' | 'click' | 'focus' = 'click';
+  export let placement: Placement = 'bottom';
+  export let color: FrameColor = 'dropdown';
+  export let shadow: boolean = true;
+  export let rounded: boolean = true;
 
   let activeCls = twMerge(activeClass, classActive);
 
@@ -32,36 +39,17 @@
 
   setContext('activeUrl', activeUrlStore);
   // propagate props type from underlying Frame
-  interface $$Props extends ComponentProps<Popper> {
-    activeUrl?: string;
-    containerClass?: string;
-    classContainer?: string;
-    headerClass?: string;
-    classHeader?: string;
-    footerClass?: string;
-    classFooter?: string;
-    activeClass?: string;
-    classActive?: string;
-  }
+ 
 
   $: containerCls = twMerge(containerClass, classContainer);
   $: headerCls = twMerge(headerClass, classHeader);
   $: ulCls = twMerge('py-1', $$props.class);
   $: footerCls = twMerge(footerClass, classFooter);
-
-
-  $: {
-    // set default values
-    $$restProps.arrow = $$restProps.arrow ?? false;
-    $$restProps.trigger = $$restProps.trigger ?? 'click';
-    $$restProps.placement = $$restProps.placement ?? 'bottom';
-    $$restProps.color = $$restProps.color ?? 'dropdown';
-    $$restProps.shadow = $$restProps.shadow ?? true;
-    $$restProps.rounded = $$restProps.rounded ?? true;
-  }
+  // let arrow, trigger, placement, color, shadow, rounded;
+  
 </script>
 
-<Popper activeContent {...$$restProps} class={containerCls} on:show bind:open>
+<Popper activeContent {...$$restProps} {trigger} {arrow} {placement} {shadow} {rounded} {color} class={containerCls} on:show bind:open>
   {#if $$slots.header}
     <div class={headerCls}>
       <slot name="header" />

diff --git a/src/lib/utils/Frame.svelte b/src/lib/utils/Frame.svelte
@@ -1,3 +1,27 @@
+<script context="module" lang="ts">
+  export type FrameColor = keyof typeof bgColors;
+  const bgColors = {
+    gray: 'bg-gray-50 dark:bg-gray-800',
+    red: 'bg-red-50 dark:bg-gray-800',
+    yellow: 'bg-yellow-50 dark:bg-gray-800 ',
+    green: 'bg-green-50 dark:bg-gray-800 ',
+    indigo: 'bg-indigo-50 dark:bg-gray-800 ',
+    purple: 'bg-purple-50 dark:bg-gray-800 ',
+    pink: 'bg-pink-50 dark:bg-gray-800 ',
+    blue: 'bg-blue-50 dark:bg-gray-800 ',
+    light: 'bg-gray-50 dark:bg-gray-700',
+    dark: 'bg-gray-50 dark:bg-gray-800',
+    default: 'bg-white dark:bg-gray-800',
+    dropdown: 'bg-white dark:bg-gray-700',
+    navbar: 'bg-white dark:bg-gray-900',
+    navbarUl: 'bg-gray-50 dark:bg-gray-800',
+    form: 'bg-gray-50 dark:bg-gray-700',
+    primary: 'bg-primary-50 dark:bg-gray-800 ',
+    orange: 'bg-orange-50 dark:bg-orange-800',
+    none: ''
+  };
+</script>
+
 <script lang="ts">
   import { createEventDispatcher, setContext } from 'svelte';
   import { twMerge } from 'tailwind-merge';
@@ -8,7 +32,7 @@
 
   const noop = () => {};
 
-  type FrameColor = keyof typeof bgColors;
+  
   type TransitionFunc = (node: HTMLElement, params: any) => TransitionConfig;
 
   interface $$Props extends HTMLAnchorAttributes {
@@ -58,26 +82,7 @@
   $: setContext('color', color);
 
   // your script goes here
-  const bgColors = {
-    gray: 'bg-gray-50 dark:bg-gray-800',
-    red: 'bg-red-50 dark:bg-gray-800',
-    yellow: 'bg-yellow-50 dark:bg-gray-800 ',
-    green: 'bg-green-50 dark:bg-gray-800 ',
-    indigo: 'bg-indigo-50 dark:bg-gray-800 ',
-    purple: 'bg-purple-50 dark:bg-gray-800 ',
-    pink: 'bg-pink-50 dark:bg-gray-800 ',
-    blue: 'bg-blue-50 dark:bg-gray-800 ',
-    light: 'bg-gray-50 dark:bg-gray-700',
-    dark: 'bg-gray-50 dark:bg-gray-800',
-    default: 'bg-white dark:bg-gray-800',
-    dropdown: 'bg-white dark:bg-gray-700',
-    navbar: 'bg-white dark:bg-gray-900',
-    navbarUl: 'bg-gray-50 dark:bg-gray-800',
-    form: 'bg-gray-50 dark:bg-gray-700',
-    primary: 'bg-primary-50 dark:bg-gray-800 ',
-    orange: 'bg-orange-50 dark:bg-orange-800',
-    none: ''
-  };
+  
 
   const textColors = {
     gray: 'text-gray-800 dark:text-gray-300',

diff --git a/src/routes/docs/components/dropdown.md b/src/routes/docs/components/dropdown.md
@@ -380,7 +380,7 @@ Show a list of toggle switch elements inside the dropdown menu to enable a yes o
   <NavUl {hidden} class="ms-3 pt-6">
     <NavLi href="/" active={true}>Home</NavLi>
     <NavLi class="cursor-pointer">
-      Dropdown<ChevronDownOutline class="w-6 h-6 ms-2 text-white dark:text-white" />
+      Dropdown<ChevronDownOutline class="w-6 h-6 ms-2 text-primary-800 dark:text-white inline" />
     </NavLi>
     <Dropdown>
       <DropdownItem>Dashboard</DropdownItem>