fix: #1470 move $$props.classxxx to export let

themesberg · Oct 27, 2024 · 2e13923 · 2e13923
1 parent 1c29350
commit 2e13923
Show file tree

Hide file tree

Showing 31 changed files with 288 additions and 157 deletions.
diff --git a/src/lib/accordion/Accordion.svelte b/src/lib/accordion/Accordion.svelte
@@ -31,11 +31,13 @@
   export let activeClass: $$Props['activeClass'] = 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800';
   export let inactiveClass: $$Props['inactiveClass'] = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
   export let defaultClass: $$Props['defaultClass'] = 'text-gray-500 dark:text-gray-400';
+  export let classActive: $$Props['classActive'] = '';
+  export let classInactive: $$Props['classInactive'] = '';
 
   const ctx: AccordionCtxType = {
     flush,
-    activeClass: twMerge(activeClass, $$props.classActive),
-    inactiveClass: twMerge(inactiveClass, $$props.classInactive),
+    activeClass: twMerge(activeClass, classActive),
+    inactiveClass: twMerge(inactiveClass, classInactive),
     selected: multiple ? undefined : writable()
   };
 

diff --git a/src/lib/banner/Banner.svelte b/src/lib/banner/Banner.svelte
@@ -15,6 +15,8 @@
     bannerStatus?: boolean;
     transition?: TransitionFunc;
     params?: object;
+    classDiv?: string;
+    classInner?: string;
   }
 
   export let position: $$Props['position'] = 'sticky';
@@ -25,6 +27,8 @@
   export let bannerStatus: $$Props['bannerStatus'] = true;
   export let transition: NonNullable<$$Props['transition']> = fade;
   export let params: $$Props['params'] = {};
+  export let classDiv: $$Props['classDiv'] = '';
+  export let classInner: $$Props['classInner'] = '';
 
   const divClasses = {
     default: 'top-0 start-0 w-full border-b border-gray-200 bg-gray-50',
@@ -42,8 +46,8 @@
     info: 'items-center flex-shrink-0'
   };
 
-  $: divClass = twMerge(position, divClass, divClasses[bannerType], $$props.classDiv);
-  $: div2Class = twMerge(innerClass, insideDivClasses[bannerType], $$props.classInner);
+  $: divClass = twMerge(position, divClass, divClasses[bannerType], classDiv);
+  $: div2Class = twMerge(innerClass, insideDivClasses[bannerType], classInner);
 
   function close(e: MouseEvent) {
     e.preventDefault();

diff --git a/src/lib/bottom-navigation/BottomNav.svelte b/src/lib/bottom-navigation/BottomNav.svelte
@@ -19,6 +19,9 @@
     outerClass?: string;
     innerClass?: string;
     activeClass?: string;
+    classActive?: string;
+    classOuter?: string;
+    classInner?: string;
   }
 
   export let activeUrl: $$Props['activeUrl'] = '';
@@ -27,12 +30,15 @@
   export let outerClass: $$Props['outerClass'] = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
   export let innerClass: $$Props['innerClass'] = 'grid h-full max-w-lg mx-auto';
   export let activeClass: $$Props['activeClass'] = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
+  export let classActive: $$Props['classActive'] = '';
+  export let classOuter: $$Props['classOuter'] = '';
+  export let classInner: $$Props['classInner'] = '';
 
   let activeCls = '';
 
   const activeUrlStore = writable('');
 
-  activeCls = twMerge(activeClass, $$props.classActive);
+  activeCls = twMerge(activeClass, classActive);
   setContext('navType', navType);
   setContext<BottomNavType>('bottomNavType', { activeClass: activeCls });
 
@@ -63,8 +69,8 @@
     video: 'flex items-center w-full'
   };
 
-  $: outerCls = twMerge(position, outerClass, outerDivClasses[navType], $$props.classOuter);
-  $: innerCls = twMerge(innerClass, innerDivClasses[navType], $$props.classInner);
+  $: outerCls = twMerge(position, outerClass, outerDivClasses[navType], classOuter);
+  $: innerCls = twMerge(innerClass, innerDivClasses[navType], classInner);
 </script>
 
 <div {...$$restProps} class={outerCls}>

diff --git a/src/lib/bottom-navigation/BottomNavHeader.svelte b/src/lib/bottom-navigation/BottomNavHeader.svelte
@@ -5,14 +5,18 @@
   interface $$Props extends HTMLAttributes<HTMLDivElement> {
     outerClass?: string;
     innerClass?: string;
+    classOuter?: string;
+    classInner?: string;
   }
 
   export let outerClass: $$Props['outerClass'] = 'w-full';
   export let innerClass: $$Props['innerClass'] = 'grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600';
+  export let classOuter: $$Props['classOuter'] = '';
+  export let classInner: $$Props['classInner'] = '';
 </script>
 
-<div {...$$restProps} class={twMerge(outerClass, $$props.classOuter)} >
-  <div class={twMerge(innerClass, $$props.classInner)} role="group">
+<div {...$$restProps} class={twMerge(outerClass, classOuter)} >
+  <div class={twMerge(innerClass, classInner)} role="group">
     <slot />
   </div>
 </div>

diff --git a/src/lib/breadcrumb/Breadcrumb.svelte b/src/lib/breadcrumb/Breadcrumb.svelte
@@ -8,18 +8,20 @@
     solidClass?: string;
     olClass?: string;
     ariaLabel?: string;
+    classOl?: string;
   }
 
   export let solid: $$Props['solid'] = false;
   export let navClass: NonNullable<$$Props['navClass']> = 'flex';
   export let solidClass: NonNullable<$$Props['solidClass']> = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
   export let olClass: $$Props['olClass'] = 'inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse';
   export let ariaLabel: $$Props['ariaLabel'] = 'Breadcrumb';
+  export let classOl: $$Props['classOl'] = '';
   let classNav: string = solid ? solidClass : navClass;
 </script>
 
 <nav aria-label={ariaLabel} {...$$restProps} class={twMerge(classNav, $$props.class)}>
-  <ol class={twMerge(olClass, $$props.classOl)}>
+  <ol class={twMerge(olClass, classOl)}>
     <slot />
   </ol>
 </nav>

diff --git a/src/lib/breadcrumb/BreadcrumbItem.svelte b/src/lib/breadcrumb/BreadcrumbItem.svelte
@@ -8,18 +8,24 @@
     linkClass?: string;
     spanClass?: string;
     homeClass?: string;
+    classHome?: string;
+    classLink?: string;
+    classSpan?: string;
   }
   
   export let home: $$Props['home'] = false;
   export let href: $$Props['href'] = undefined;
   export let linkClass: $$Props['linkClass'] = 'ms-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400 dark:hover:text-white';
   export let spanClass: $$Props['spanClass'] = 'ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400';
   export let homeClass: $$Props['homeClass'] = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
+  export let classHome: $$Props['classHome'] = '';
+  export let classLink: $$Props['classLink'] = '';
+  export let classSpan: $$Props['classSpan'] = '';
 </script>
 
 <li {...$$restProps} class={twMerge('inline-flex items-center', $$props.class)}>
   {#if home}
-    <a class={twMerge(homeClass, $$props.classHome)} {href}>
+    <a class={twMerge(homeClass, classHome)} {href}>
       {#if $$slots.icon}
         <slot name="icon" />
       {:else}
@@ -38,11 +44,11 @@
       </svg>
     {/if}
     {#if href}
-      <a class={twMerge(linkClass, $$props.classLink)} {href}>
+      <a class={twMerge(linkClass, classLink)} {href}>
         <slot />
       </a>
     {:else}
-      <span class={twMerge(spanClass, $$props.classSpan)}>
+      <span class={twMerge(spanClass, classSpan)}>
         <slot />
       </span>
     {/if}

diff --git a/src/lib/device-mockups/Android.svelte b/src/lib/device-mockups/Android.svelte
@@ -9,6 +9,11 @@
     leftMid?: string;
     leftBot?: string;
     right?: string;
+    classTop?: string;
+    classLeftTop?: string;
+    classLeftMid?: string;
+    classLeftBot?: string;
+    classRight?: string;
   }
 
   export let div: $$Props['div'] = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl';
@@ -18,15 +23,20 @@
   export let leftMid: $$Props['leftMid'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
   export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
   export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+  export let classTop: $$Props['classTop'] = '';
+  export let classLeftTop: $$Props['classLeftTop'] = '';
+  export let classLeftMid: $$Props['classLeftMid'] = '';
+  export let classLeftBot: $$Props['classLeftBot'] = '';
+  export let classRight: $$Props['classRight'] = '';
 </script>
 
 <div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(top, $$props.classTop)}></div>
-  <div class={twMerge(leftTop, $$props.classLeftTop)}></div>
-  <div class={twMerge(leftMid, $$props.classLeftMid)}></div>
-  <div class={twMerge(leftBot, $$props.classLeftBot)}></div>
-  <div class={twMerge(right, $$props.classRight)}></div>
-  <div class={twMerge(slot, $$props.classSlot)}>
+  <div class={twMerge(top, classTop)}></div>
+  <div class={twMerge(leftTop, classLeftTop)}></div>
+  <div class={twMerge(leftMid, classLeftMid)}></div>
+  <div class={twMerge(leftBot, classLeftBot)}></div>
+  <div class={twMerge(right, classRight)}></div>
+  <div class={twMerge(slot, classSlot)}>
     <slot></slot>
   </div>
 </div>

diff --git a/src/lib/device-mockups/DefaultMockup.svelte b/src/lib/device-mockups/DefaultMockup.svelte
@@ -8,6 +8,11 @@
     leftTop?: string;
     leftBot?: string;
     right?: string;
+    classTop?: string;
+    classLeftTop?: string;
+    classLeftBot?: string;
+    classRight?: string;
+    classSlot?: string;
   }
 
   export let div: $$Props['div'] = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]';
@@ -16,14 +21,19 @@
   export let leftTop: $$Props['leftTop'] = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
   export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
   export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+  export let classTop: $$Props['classTop'] = '';
+  export let classLeftTop: $$Props['classLeftTop'] = '';
+  export let classLeftBot: $$Props['classLeftBot'] = '';
+  export let classRight: $$Props['classRight'] = '';
+  export let classSlot: $$Props['classSlot'] = '';
 </script>
 
 <div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(top, $$props.classTop)}></div>
-  <div class={twMerge(leftTop, $$props.classLeftTop)}></div>
-  <div class={twMerge(leftBot, $$props.classLeftBot)}></div>
-  <div class={twMerge(right, $$props.classRight)}></div>
-  <div class={twMerge(slot, $$props.classSlot)}>
+  <div class={twMerge(top, classTop)}></div>
+  <div class={twMerge(leftTop, classLeftTop)}></div>
+  <div class={twMerge(leftBot, classLeftBot)}></div>
+  <div class={twMerge(right, classRight)}></div>
+  <div class={twMerge(slot, classSlot)}>
     <slot></slot>
   </div>
 </div>

diff --git a/src/lib/device-mockups/Desktop.svelte b/src/lib/device-mockups/Desktop.svelte
@@ -6,21 +6,27 @@
     bot?: string;
     botUnder?: string;
     div?: string;
+    classInner?: string;
+    classBot?: string;
+    classBotUnder?: string;
   }
 
   export let inner: $$Props['inner'] = 'rounded-xl overflow-hidden h-[140px] md:h-[262px]';
   export let bot: $$Props['bot'] = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl h-[24px] max-w-[301px] md:h-[42px] md:max-w-[512px]';
   export let botUnder: $$Props['botUnder'] = 'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]';
   export let div: $$Props['div'] = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[16px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
+  export let classInner: $$Props['classInner'] = '';
+  export let classBot: $$Props['classBot'] = '';
+  export let classBotUnder: $$Props['classBotUnder'] = '';
 </script>
 
 <div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(inner, $$props.classInner)}>
+  <div class={twMerge(inner, classInner)}>
     <slot></slot>
   </div>
 </div>
-<div class={twMerge(bot, $$props.classBot)}></div>
-<div class={twMerge(botUnder, $$props.classBotUnder)}></div>
+<div class={twMerge(bot, classBot)}></div>
+<div class={twMerge(botUnder, classBotUnder)}></div>
 
 <!--
 @component

diff --git a/src/lib/device-mockups/Ios.svelte b/src/lib/device-mockups/Ios.svelte
@@ -8,6 +8,11 @@
     leftTop?: string;
     leftBot?: string;
     right?: string;
+    classTop?: string;
+    classLeftTop?: string;
+    classLeftBot?: string;
+    classRight?: string;
+    classSlot?: string;
   }
 
   export let div: $$Props['div'] = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl';
@@ -16,14 +21,19 @@
   export let leftTop: $$Props['leftTop'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
   export let leftBot: $$Props['leftBot'] = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
   export let right: $$Props['right'] = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+  export let classTop: $$Props['classTop'] = '';
+  export let classLeftTop: $$Props['classLeftTop'] = '';
+  export let classLeftBot: $$Props['classLeftBot'] = '';
+  export let classRight: $$Props['classRight'] = '';
+  export let classSlot: $$Props['classSlot'] = '';
 </script>
 
 <div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(top, $$props.classTop)}></div>
-  <div class={twMerge(leftTop, $$props.classLeftTop)}></div>
-  <div class={twMerge(leftBot, $$props.classLeftBot)}></div>
-  <div class={twMerge(right, $$props.classRight)}></div>
-  <div class={twMerge(slot, $$props.classSlot)}>
+  <div class={twMerge(top, classTop)}></div>
+  <div class={twMerge(leftTop, classLeftTop)}></div>
+  <div class={twMerge(leftBot, classLeftBot)}></div>
+  <div class={twMerge(right, classRight)}></div>
+  <div class={twMerge(slot, classSlot)}>
     <slot></slot>
   </div>
 </div>

diff --git a/src/lib/device-mockups/Laptop.svelte b/src/lib/device-mockups/Laptop.svelte
@@ -6,21 +6,27 @@
     inner?: string;
     bot?: string;
     botCen?: string;
+    classInner?: string;
+    classBot?: string;
+    classBotCen?: string;
   }
   export let div: $$Props['div'] = 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[8px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]';
   export let inner: $$Props['inner'] = 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800';
   export let bot: $$Props['bot'] = 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl rounded-t-sm h-[17px] max-w-[351px] md:h-[21px] md:max-w-[597px]';
   export let botCen: $$Props['botCen'] = 'absolute left-1/2 top-0 -translate-x-1/2 rounded-b-xl w-[56px] h-[5px] md:w-[96px] md:h-[8px] bg-gray-800';
+  export let classInner: $$Props['classInner'] = '';
+  export let classBot: $$Props['classBot'] = '';
+  export let classBotCen: $$Props['classBotCen'] = '';
 </script>
 
 <div class={twMerge(div, $$props.class)}>
-  <div class={twMerge(inner, $$props.classInner)}>
+  <div class={twMerge(inner, classInner)}>
     <slot></slot>
   </div>
 </div>
 
-<div class={twMerge(bot, $$props.classBot)}>
-  <div class={twMerge(botCen, $$props.classBotCen)}></div>
+<div class={twMerge(bot, classBot)}>
+  <div class={twMerge(botCen, classBotCen)}></div>
 </div>
 
 <!--

diff --git a/src/lib/device-mockups/Smartwatch.svelte b/src/lib/device-mockups/Smartwatch.svelte
@@ -8,24 +8,34 @@
     rightBot?: string;
     top?: string;
     bot?: string;
+    classTop?: string;
+    classRightTop?: string;
+    classRightBot?: string;
+    classSlot?: string;
+    classBot?: string;
   }
   export let div: $$Props['div'] = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]';
   export let slot: $$Props['slot'] = 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]';
   export let rightTop: $$Props['rightTop'] = 'h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg';
   export let rightBot: $$Props['rightBot'] = 'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg';
   export let top: $$Props['top'] = 'relative mx-auto border-gray-900 dark:bg-gray-800 dark:border-gray-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]';
   export let bot: $$Props['bot'] = 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]';
+  export let classTop: $$Props['classTop'] = '';
+  export let classRightTop: $$Props['classRightTop'] = '';
+  export let classRightBot: $$Props['classRightBot'] = '';
+  export let classSlot: $$Props['classSlot'] = '';
+  export let classBot: $$Props['classBot'] = '';
 </script>
 
 <div class={twMerge(div, $$props.class)}></div>
-<div class={twMerge(top, $$props.classTop)}>
-  <div class={twMerge(rightTop, $$props.classRightTop)}></div>
-  <div class={twMerge(rightBot, $$props.classRightBot)}></div>
-  <div class={twMerge(slot, $$props.classSlot)}>
+<div class={twMerge(top, classTop)}>
+  <div class={twMerge(rightTop, classRightTop)}></div>
+  <div class={twMerge(rightBot, classRightBot)}></div>
+  <div class={twMerge(slot, classSlot)}>
     <slot></slot>
   </div>
 </div>
-<div class={twMerge(bot, $$props.classBot)}></div>
+<div class={twMerge(bot, classBot)}></div>
 
 <!--
 @component