Skip to content

Commit c9f2f61

Browse files
wmertenswmertens
committed
lib: workaround for QwikDev/qwik#7665 
1 parent fea7425 commit c9f2f61

File tree

17 files changed

+85
-95
lines changed

17 files changed

+85
-95
lines changed

‎apps/web/src/components/Preview/Preview.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ type PreviewDisplaySize = 'mobile' | 'tablet' | 'desktop'
1717

1818
const liveDir = 'https://github.com/qwikerx/flowbite-qwik/tree/main/apps/web/src/routes'
1919

20-
export const Preview = component$<PreviewProps>(({ url, class: classNames, height = 200, title, codeContent, ...props }) => {
20+
export const Preview = component$<PreviewProps>(({ url, class: classNames, height = 200, title, codeContent, ...rest }) => {
2121
useStyles$(styles)
2222

2323
const { isDark } = useDarkMode()
@@ -49,7 +49,7 @@ export const Preview = component$<PreviewProps>(({ url, class: classNames, heigh
4949
#
5050
</Link>
5151
</Heading>
52-
{props.description && <p class="mb-8 text-gray-600 dark:text-gray-400">{props.description}</p>}
52+
{rest.description && <p class="mb-8 text-gray-600 dark:text-gray-400">{rest.description}</p>}
5353
<div class="relative flex w-full justify-between rounded-t-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-600 dark:bg-gray-700">
5454
<Button
5555
color="light"
@@ -151,7 +151,7 @@ export const Preview = component$<PreviewProps>(({ url, class: classNames, heigh
151151
},
152152
]}
153153
>
154-
<iframe loading="lazy" ref={iframe} src={iframeSrc.value} height={height} {...props} title={title} class={['w-full', classNames]} />
154+
<iframe loading="lazy" ref={iframe} src={iframeSrc.value} height={height} {...rest} title={title} class={['w-full', classNames]} />
155155
</div>
156156
</div>
157157

‎apps/web/src/generated-examples.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1630,7 +1630,7 @@ export const examples: Record<string, Example[]> = {
16301630
description: 'Customize the pagination buttons by passing a custom button component.',
16311631
url: '/examples/[theme-rtl]/pagination/07-with-custom-button',
16321632
content:
1633-
"import { component$, useSignal, Slot } from '@builder.io/qwik'\nimport { Pagination, PaginationButtonProps } from 'flowbite-qwik'\n\nconst CustomButton = component$<PaginationButtonProps>(({ active, ...props }) => {\n return (\n <button\n type=\"button\"\n class={[\n 'h-10 w-12 border border-gray-300 bg-white py-2 leading-tight text-gray-500 enabled:hover:bg-gray-100 enabled:hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:enabled:hover:bg-gray-700 dark:enabled:hover:text-white',\n {\n 'bg-orange-500 text-white hover:bg-orange-600 hover:text-white dark:bg-orange-500 dark:text-white dark:hover:bg-orange-600 dark:hover:text-white':\n active,\n },\n ]}\n {...props}\n >\n <Slot />\n </button>\n )\n})\nexport default component$(() => {\n const currentPage = useSignal(1)\n\n return (\n <>\n <div class=\"flex gap-3 p-3 text-center\">\n <Pagination totalPages={100} currentPage={currentPage} paginationButton={CustomButton} />\n </div>\n </>\n )\n})",
1633+
"import { component$, useSignal, Slot } from '@builder.io/qwik'\nimport { Pagination, PaginationButtonProps } from 'flowbite-qwik'\n\nconst CustomButton = component$<PaginationButtonProps>(({ active, ...rest }) => {\n return (\n <button\n type=\"button\"\n class={[\n 'h-10 w-12 border border-gray-300 bg-white py-2 leading-tight text-gray-500 enabled:hover:bg-gray-100 enabled:hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:enabled:hover:bg-gray-700 dark:enabled:hover:text-white',\n {\n 'bg-orange-500 text-white hover:bg-orange-600 hover:text-white dark:bg-orange-500 dark:text-white dark:hover:bg-orange-600 dark:hover:text-white':\n active,\n },\n ]}\n {...rest}\n >\n <Slot />\n </button>\n )\n})\nexport default component$(() => {\n const currentPage = useSignal(1)\n\n return (\n <>\n <div class=\"flex gap-3 p-3 text-center\">\n <Pagination totalPages={100} currentPage={currentPage} paginationButton={CustomButton} />\n </div>\n </>\n )\n})",
16341634
height: '150',
16351635
},
16361636
],

‎apps/web/src/routes/examples/[theme-rtl]/pagination/07-with-custom-button/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { staticGenerateHandler } from '~/routes/examples/layout'
99
import { StaticGenerateHandler } from '@builder.io/qwik-city'
1010
import { Pagination, PaginationButtonProps } from 'flowbite-qwik'
1111

12-
const CustomButton = component$<PaginationButtonProps>(({ active, ...props }) => {
12+
const CustomButton = component$<PaginationButtonProps>(({ active, ...rest }) => {
1313
return (
1414
<button
1515
type="button"
@@ -20,7 +20,7 @@ const CustomButton = component$<PaginationButtonProps>(({ active, ...props }) =>
2020
active,
2121
},
2222
]}
23-
{...props}
23+
{...rest}
2424
>
2525
<Slot />
2626
</button>

‎apps/web/vite.config.ts‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,6 @@ const isDuringVercelDeployment = Boolean(process.env.VERCEL)
2929
export default defineConfig(({ command, mode }): UserConfig => {
3030
return {
3131
plugins: [
32-
{
33-
name: 'spy',
34-
resolveId: {
35-
order: 'pre',
36-
handler: (...args) => {
37-
console.log('resolveId', ...args)
38-
},
39-
},
40-
},
4132
qwikCity({ trailingSlash: false }),
4233
tailwindcss(),
4334
qwikVite({

‎packages/lib/src/components/Badge/Badge.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@ import { component$ } from '@builder.io/qwik'
22
import { BadgeClassesProps, useBadgeClasses } from './composables/use-badge-classes'
33
import { IconCloseOutline } from 'flowbite-qwik-icons'
44

5-
export const Badge = component$<BadgeClassesProps>(({ icon: Icon, tag = 'a', onClose$, ...props }) => {
6-
const { badgeClasses, badgeChipsClasses } = useBadgeClasses(props)
5+
export const Badge = component$<BadgeClassesProps>(({ icon: Icon, tag = 'a', onClose$, ...rest }) => {
6+
const { badgeClasses, badgeChipsClasses } = useBadgeClasses(rest)
77

88
const LinkComponent = tag !== 'a' ? tag : 'a'
9-
const BadgeComponent = props.href ? LinkComponent : 'span'
9+
const BadgeComponent = rest.href ? LinkComponent : 'span'
1010

1111
return (
12-
<BadgeComponent {...props} class={badgeClasses.value}>
12+
<BadgeComponent {...rest} class={badgeClasses.value}>
1313
{!!Icon && <Icon />}
14-
{props.content}
14+
{rest.content}
1515

16-
{props.chips && (
16+
{rest.chips && (
1717
<button onClick$={onClose$} type="button" class={badgeChipsClasses.value} aria-label="Remove">
18-
<IconCloseOutline class="w-2 h-2" />
18+
<IconCloseOutline class="h-2 w-2" />
1919
<span class="sr-only">Remove badge</span>
2020
</button>
2121
)}

‎packages/lib/src/components/Banner/Banner.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ type BannerProps = PropsOf<'div'> & {
66
sticky?: 'top' | 'bottom'
77
}
88

9-
export const Banner = component$<BannerProps>(({ sticky, class: className, ...props }) => {
9+
export const Banner = component$<BannerProps>(({ sticky, class: className, ...rest }) => {
1010
return (
1111
<div
1212
role="banner"
1313
tabIndex={-1}
1414
class={twMerge(sticky && 'fixed left-0 z-50 w-full', sticky === 'top' && 'top-0', sticky === 'bottom' && 'bottom-0', clsx(className))}
15-
{...props}
15+
{...rest}
1616
>
1717
<Slot />
1818
</div>

‎packages/lib/src/components/ButtonGroup/ButtonGroup.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ type ButtonGroupProps = PropsOf<'div'> & {
1919
outline?: boolean
2020
}
2121

22-
export const ButtonGroup: FunctionComponent<ButtonGroupProps> = ({ children, ...props }) => {
22+
export const ButtonGroup: FunctionComponent<ButtonGroupProps> = ({ children, ...rest }) => {
2323
const childrenToProcess = Array.isArray(children) ? [...children] : [children]
2424

2525
const components: ComponentType[] = []
@@ -30,7 +30,7 @@ export const ButtonGroup: FunctionComponent<ButtonGroupProps> = ({ children, ...
3030
foundComponentCallback: (child, index) => {
3131
const position = index === 0 ? 'start' : index === childrenToProcess.length - 1 ? 'end' : 'middle'
3232

33-
if (props.outline) {
33+
if (rest.outline) {
3434
child.props['outline'] = true
3535
}
3636
// hack for qwik v1, check if this works in v2
@@ -45,7 +45,7 @@ export const ButtonGroup: FunctionComponent<ButtonGroupProps> = ({ children, ...
4545
},
4646
])
4747

48-
return <InnerButtonGroup components={components} {...props} />
48+
return <InnerButtonGroup components={components} {...rest} />
4949
}
5050

5151
/**
@@ -56,9 +56,9 @@ type InnerButtonGroupProps = ButtonGroupProps & {
5656
components: ComponentType[]
5757
}
5858

59-
const InnerButtonGroup = component$<InnerButtonGroupProps>(({ components, class: className, ...props }) => {
59+
const InnerButtonGroup = component$<InnerButtonGroupProps>(({ components, class: className, ...rest }) => {
6060
return (
61-
<div class={twMerge('inline-flex', clsx(className))} role="group" {...props}>
61+
<div class={twMerge('inline-flex', clsx(className))} role="group" {...rest}>
6262
{components.map((comp) => (
6363
<Fragment key={comp.id}>{comp.button}</Fragment>
6464
))}

‎packages/lib/src/components/Carousel/Carousel.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ type CarouselProps = PropsOf<'div'> & {
3333
pauseOnHover?: boolean
3434
onSlideChanged$?: () => void
3535
}
36-
export const Carousel: FunctionComponent<CarouselProps> = ({ children, ...props }) => {
36+
export const Carousel: FunctionComponent<CarouselProps> = ({ children, ...rest }) => {
3737
const components: ComponentType[] = []
3838
const classesToAdd = 'absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2'
3939

@@ -71,7 +71,7 @@ export const Carousel: FunctionComponent<CarouselProps> = ({ children, ...props
7171
},
7272
])
7373

74-
return <InnerCarousel components={components} {...props} />
74+
return <InnerCarousel components={components} {...rest} />
7575
}
7676

7777
type CarouselSlideProps = PropsOf<'div'>

‎packages/lib/src/components/Checkbox/Checkbox.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,22 @@ type CheckboxProps = Omit<PropsOf<'input'>, 'children'> & {
1111
}
1212

1313
// eslint-disable-next-line @typescript-eslint/no-unused-vars
14-
export const Checkbox = component$<CheckboxProps>(({ color, class: classNames, onChange$, children, ...props }) => {
14+
export const Checkbox = component$<CheckboxProps>(({ color, class: classNames, onChange$, children, ...rest }) => {
1515
const internalColor = useComputed$(() => color)
1616
const { checkboxClasses, labelClasses } = useCheckboxClasses(internalColor)
1717

18-
const checked = useSignal(Boolean(props.checked))
18+
const checked = useSignal(Boolean(rest.checked))
1919
useTask$(({ track }) => {
20-
const innerChecked = track(() => props.checked)
20+
const innerChecked = track(() => rest.checked)
2121
checked.value = Boolean(innerChecked)
2222
})
2323

2424
return (
2525
<label class={['flex items-center justify-start gap-3', labelClasses.value]}>
2626
<input
27-
{...props}
27+
{...rest}
2828
type="checkbox"
29-
bind:checked={props['bind:checked'] || checked}
29+
bind:checked={rest['bind:checked'] || checked}
3030
class={twMerge(checkboxClasses.value, clsx(classNames))}
3131
onChange$={(_, elm) => {
3232
onChange$?.(elm.checked, elm.value)

‎packages/lib/src/components/Dropdown/Dropdown.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -193,11 +193,11 @@ type InnerDropdownItemProps = PropsOf<'button'> & {
193193
icon?: Component<IconProps>
194194
onClick$?: () => void
195195
}
196-
const InnerDropdownItem = component$<InnerDropdownItemProps>(({ icon: Icon, onClick$, ...props }) => {
196+
const InnerDropdownItem = component$<InnerDropdownItemProps>(({ icon: Icon, onClick$, ...rest }) => {
197197
const { dropdownItemClasses } = useDropdownClasses()
198198

199199
return (
200-
<button type="button" class={dropdownItemClasses.value} onClick$={onClick$} disabled={props.disabled}>
200+
<button type="button" class={dropdownItemClasses.value} onClick$={onClick$} disabled={rest.disabled}>
201201
{Icon && <Icon class="mr-2 h-4 w-4" />}
202202
<Slot />
203203
</button>

0 commit comments

Comments
 (0)