From 2e13923d44e47dceb6fb349a6131abe65308090d Mon Sep 17 00:00:00 2001 From: Shinichi Okada <147320+shinokada@users.noreply.github.com> Date: Sun, 27 Oct 2024 17:44:02 +0100 Subject: [PATCH] fix: #1470 move $$props.classxxx to export let --- src/lib/accordion/Accordion.svelte | 6 +- src/lib/banner/Banner.svelte | 8 ++- src/lib/bottom-navigation/BottomNav.svelte | 12 +++- .../bottom-navigation/BottomNavHeader.svelte | 8 ++- src/lib/breadcrumb/Breadcrumb.svelte | 4 +- src/lib/breadcrumb/BreadcrumbItem.svelte | 12 +++- src/lib/device-mockups/Android.svelte | 22 ++++-- src/lib/device-mockups/DefaultMockup.svelte | 20 ++++-- src/lib/device-mockups/Desktop.svelte | 12 +++- src/lib/device-mockups/Ios.svelte | 20 ++++-- src/lib/device-mockups/Laptop.svelte | 12 +++- src/lib/device-mockups/Smartwatch.svelte | 20 ++++-- src/lib/device-mockups/Tablet.svelte | 20 ++++-- src/lib/footer/FooterBrand.svelte | 12 +++- src/lib/footer/FooterCopyright.svelte | 10 ++- src/lib/footer/FooterLink.svelte | 8 ++- src/lib/forms/Input.svelte | 11 ++- src/lib/navbar/NavHamburger.svelte | 4 +- src/lib/progress/Progressbar.svelte | 4 +- src/lib/rating/AdvancedRating.svelte | 15 ++-- src/lib/rating/Review.svelte | 24 +++++-- src/lib/table/Table.svelte | 8 ++- src/lib/table/TableSearch.svelte | 8 ++- src/lib/timeline/ActivityItem.svelte | 32 ++++++--- src/lib/timeline/Group.svelte | 12 +++- src/lib/timeline/GroupItem.svelte | 20 ++++-- src/lib/timeline/TimelineItem.svelte | 16 +++-- src/lib/typography/Hr.svelte | 12 +++- .../component-data/FloatingLabelInput.json | 71 +++---------------- src/routes/layouts/component/+page.svelte | 1 + src/routes/utils/ExampleWrapper.svelte | 1 + 31 files changed, 288 insertions(+), 157 deletions(-) diff --git a/src/lib/accordion/Accordion.svelte b/src/lib/accordion/Accordion.svelte index 2d174b82e..23cc620b3 100644 --- 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 index 7ee8d8f86..b67d7dbc0 100644 --- 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 index 44de246e6..bb18040a2 100644 --- 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', { 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);
diff --git a/src/lib/bottom-navigation/BottomNavHeader.svelte b/src/lib/bottom-navigation/BottomNavHeader.svelte index 79addd227..5bbcafe07 100644 --- a/src/lib/bottom-navigation/BottomNavHeader.svelte +++ b/src/lib/bottom-navigation/BottomNavHeader.svelte @@ -5,14 +5,18 @@ interface $$Props extends HTMLAttributes { 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'] = ''; -
-
+
+
diff --git a/src/lib/breadcrumb/Breadcrumb.svelte b/src/lib/breadcrumb/Breadcrumb.svelte index c367f0881..849d51ae5 100644 --- a/src/lib/breadcrumb/Breadcrumb.svelte +++ b/src/lib/breadcrumb/Breadcrumb.svelte @@ -8,6 +8,7 @@ solidClass?: string; olClass?: string; ariaLabel?: string; + classOl?: string; } export let solid: $$Props['solid'] = false; @@ -15,11 +16,12 @@ 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; diff --git a/src/lib/breadcrumb/BreadcrumbItem.svelte b/src/lib/breadcrumb/BreadcrumbItem.svelte index 5b97f9e41..e129894aa 100644 --- a/src/lib/breadcrumb/BreadcrumbItem.svelte +++ b/src/lib/breadcrumb/BreadcrumbItem.svelte @@ -8,6 +8,9 @@ linkClass?: string; spanClass?: string; homeClass?: string; + classHome?: string; + classLink?: string; + classSpan?: string; } export let home: $$Props['home'] = false; @@ -15,11 +18,14 @@ 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'] = '';
  • {#if home} - + {#if $$slots.icon} {:else} @@ -38,11 +44,11 @@ {/if} {#if href} - + {:else} - + {/if} diff --git a/src/lib/device-mockups/Android.svelte b/src/lib/device-mockups/Android.svelte index efaaca604..805b056d2 100644 --- 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'] = '';
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    diff --git a/src/lib/device-mockups/DefaultMockup.svelte b/src/lib/device-mockups/DefaultMockup.svelte index c9654b2a9..226eba182 100644 --- 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'] = '';
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    diff --git a/src/lib/device-mockups/Desktop.svelte b/src/lib/device-mockups/Desktop.svelte index dfa72caf6..7aa7e14a7 100644 --- 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'] = '';
    -
    +
    -
    -
    +
    +