diff --git a/README.md b/README.md index 01378de7..feddfaed 100644 --- a/README.md +++ b/README.md @@ -140,238 +140,238 @@ export default component$(() => { - Qwik Accordion + Qwik Accordion - Qwik Alert + Qwik Alert - Qwik Avatar + Qwik Avatar - Qwik Badge + Qwik Badge - Qwik Banner + Qwik Banner - Qwik Blockquote + Qwik Blockquote - Qwik Breadcrumb + Qwik Breadcrumb - Qwik Button + Qwik Button - Qwik ButtonGroup + Qwik ButtonGroup - Qwik Card + Qwik Card - Qwik Carousel + Qwik Carousel - Qwik Checkbox + Qwik Checkbox - Qwik Clipboard + Qwik Clipboard - Qwik DatePicker + Qwik DatePicker - Qwik Drawer + Qwik Drawer - Qwik Dropdown + Qwik Dropdown - Qwik Footer + Qwik Footer - Qwik HR + Qwik HR - Qwik Heading + Qwik Heading - Qwik Input + Qwik Input - Qwik Jumbotron + Qwik Jumbotron - Qwik Kbd + Qwik Kbd - Qwik Link + Qwik Link - Qwik List + Qwik List - Qwik ListGroup + Qwik ListGroup - Qwik Modal + Qwik Modal - Qwik Navbar + Qwik Navbar - Qwik Pagination + Qwik Pagination - Qwik ProgressBar + Qwik ProgressBar - Qwik Radio + Qwik Radio - Qwik Range + Qwik Range - Qwik Rating + Qwik Rating - Qwik Select + Qwik Select - Qwik Sidebar + Qwik Sidebar - Qwik Spinner + Qwik Spinner - Qwik Table + Qwik Table - Qwik Tabs + Qwik Tabs - Qwik Textarea + Qwik Textarea - Qwik Timeline + Qwik Timeline - Qwik ToastList + Qwik ToastList - Qwik Toggle + Qwik Toggle - Qwik Tooltip + Qwik Tooltip diff --git a/apps/web/src/components/CodeBlock/CodeBlock.tsx b/apps/web/src/components/CodeBlock/CodeBlock.tsx index 44ee5b37..d9215e0e 100644 --- a/apps/web/src/components/CodeBlock/CodeBlock.tsx +++ b/apps/web/src/components/CodeBlock/CodeBlock.tsx @@ -60,7 +60,7 @@ export const CodeBlock = component$(({ content, language, expand onClick$={copy$} color="light" size="xs" - class="rounded-l-none rounded-r-none border-b-0 border-r-0 border-t-0" + class="rounded-l-none rounded-r-none border-b-0 border-r-0 border-t-0 hover:text-purple-600" prefix={IconCopySolid} title="Copy to clipboard" > @@ -78,7 +78,7 @@ export const CodeBlock = component$(({ content, language, expand color="light" size="md" full - class="rounded-t-none border-t border-gray-200 bg-gray-100 text-gray-800 dark:border-gray-600 dark:bg-gray-800 dark:text-white" + class="rounded-t-none border-t border-gray-200 bg-gray-100 text-gray-800 hover:text-purple-600 dark:border-gray-600 dark:bg-gray-800 dark:text-white" onClick$={toggle$} > {isCollapsed.value ? 'Expand code' : 'Collapse code'} diff --git a/apps/web/src/components/ComponentDocPage/ComponentDocPage.tsx b/apps/web/src/components/ComponentDocPage/ComponentDocPage.tsx index ee72b95e..d803e144 100644 --- a/apps/web/src/components/ComponentDocPage/ComponentDocPage.tsx +++ b/apps/web/src/components/ComponentDocPage/ComponentDocPage.tsx @@ -53,31 +53,33 @@ export const ComponentDocPage = component$(({ name }) => { <> {previewItems.value ? (
-
-
- +
+
+ Qwik {name} - Flowbite -
+
- {previewItems.value?.map((item, i) => ( - - ))} +
+ {previewItems.value?.map((item, i) => ( + + ))} +
- diff --git a/apps/web/src/components/DocumentPage/DocumentPage.css b/apps/web/src/components/DocumentPage/DocumentPage.css index 7b77ebe7..daf30226 100644 --- a/apps/web/src/components/DocumentPage/DocumentPage.css +++ b/apps/web/src/components/DocumentPage/DocumentPage.css @@ -1,17 +1,17 @@ .doc-page h1 { - @apply mb-2; + @apply mb-2 text-3xl font-extrabold; } .doc-page h2 { - @apply mt-8 mb-2 scroll-m-16; + @apply mb-2 mt-8 scroll-m-16 text-2xl font-bold; } .doc-page h3 { - @apply mt-8 mb-2; + @apply mb-2 mt-8 text-xl; } .doc-page h4 { - @apply mt-8 mb-2; + @apply mb-2 mt-8 text-lg; } .doc-page p { @@ -19,11 +19,11 @@ } .doc-page ul { - @apply mt-4 list-disc list-inside; + @apply mt-4 list-inside list-disc; } .doc-page ol { - @apply mt-4 list-decimal list-inside; + @apply mt-4 list-inside list-decimal; } .doc-page hr { @@ -31,5 +31,5 @@ } .doc-page em { - @apply text-purple-700 dark:text-purple-300 not-italic; + @apply not-italic text-purple-700 dark:text-purple-300; } diff --git a/apps/web/src/components/DocumentPage/DocumentPages.tsx b/apps/web/src/components/DocumentPage/DocumentPages.tsx index 7c59ab10..b11ee56d 100644 --- a/apps/web/src/components/DocumentPage/DocumentPages.tsx +++ b/apps/web/src/components/DocumentPage/DocumentPages.tsx @@ -64,13 +64,13 @@ export const DocumentPage = component$(() => { return (
-
+
- diff --git a/apps/web/src/components/NavbarPage/NavbarPage.css b/apps/web/src/components/NavbarPage/NavbarPage.css index 19d43c21..ad909182 100644 --- a/apps/web/src/components/NavbarPage/NavbarPage.css +++ b/apps/web/src/components/NavbarPage/NavbarPage.css @@ -11,7 +11,7 @@ } .DocSearch.DocSearch-Button { - @apply m-0 ml-0 flex h-[34px] w-[34px] !border !border-gray-300 border-solid dark:text-white items-center justify-center rounded-lg bg-white shadow-none hover:bg-gray-100 hover:shadow-none focus:shadow-none focus:outline-none focus:ring-4 focus:ring-gray-200 md:mr-0 md:w-52 md:justify-between md:border-solid md:border-gray-300 md:bg-gray-50 xl:w-64 xl:pl-4; + @apply m-0 ml-0 flex h-[34px] w-[34px] items-center justify-center rounded-lg !border border-solid !border-gray-300 bg-white shadow-none hover:bg-gray-100 hover:shadow-none focus:shadow-none focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-white max-sm:border-none md:mr-8 md:w-40 md:justify-between md:border-solid md:border-gray-300 md:bg-gray-50 xl:w-64 xl:pl-4; } .DocSearch .DocSearch-Button-Placeholder { @@ -48,11 +48,11 @@ } .DocSearch .DocSearch-Hits mark { - @apply text-cyan-600 decoration-cyan-600 decoration-2 underline-offset-2; + @apply text-purple-600 decoration-purple-600 decoration-2 underline-offset-2; } .DocSearch .DocSearch-Hit[aria-selected='true'] a { - @apply bg-cyan-700; + @apply bg-purple-700; } .DocSearch .DocSearch-Hit-source { @@ -143,7 +143,8 @@ /* DARK MODE */ .dark { .DocSearch.DocSearch-Button { - @apply bg-gray-800 hover:bg-gray-600 focus:bg-gray-600 focus:ring-gray-700 !border md:bg-gray-700 !border-gray-600; + background: #111827; + @apply !border !border-gray-600 hover:bg-gray-600 focus:bg-gray-600 focus:ring-gray-700 md:bg-gray-700; } .DocSearch .DocSearch-Button-Placeholder { diff --git a/apps/web/src/components/NavbarPage/NavbarPage.tsx b/apps/web/src/components/NavbarPage/NavbarPage.tsx index 231be4ba..16598d20 100644 --- a/apps/web/src/components/NavbarPage/NavbarPage.tsx +++ b/apps/web/src/components/NavbarPage/NavbarPage.tsx @@ -1,21 +1,17 @@ -import { component$, useVisibleTask$ } from '@builder.io/qwik' +import { component$, Slot, useComputed$, useVisibleTask$ } from '@builder.io/qwik' import { Link, useLocation } from '@builder.io/qwik-city' import { Badge, Navbar, Tooltip, useDarkMode } from 'flowbite-qwik' -import { IconDiscordSolid, IconGithubSolid, IconMoonSolid, IconSearchOutline, IconSunSolid } from 'flowbite-qwik-icons' +import { IconDiscordSolid, IconGithubSolid, IconMoonSolid, IconSunSolid } from 'flowbite-qwik-icons' import pkg from 'flowbite-qwik/package.json' import './NavbarPage.css' import docsearch from '@docsearch/js' -type NavbarPageProps = { - fullWidth?: boolean - withSidebar?: boolean - withCollapse?: boolean -} - -export const NavbarPage = component$(({ fullWidth = false, withCollapse = false, withSidebar = false }) => { +export const NavbarPage = component$(() => { const { isDark, setDarkModeValue } = useDarkMode() const location = useLocation() + const isHomePage = useComputed$(() => location.url.pathname === '/') + useVisibleTask$(() => { docsearch({ appId: 'KGN2EXYVMH', @@ -26,47 +22,47 @@ export const NavbarPage = component$(({ fullWidth = false, with }) return ( - +
- {withCollapse && } + + Flowbite qwik small logo - - Flowbite - + Flowbite Qwik
- \n )\n})', + 'import { component$ } from \'@builder.io/qwik\'\nimport { Banner, Button } from \'flowbite-qwik\'\nimport { IconCloseSolid } from \'flowbite-qwik-icons\'\n\nexport default component$(() => {\n return (\n
\n \n
\n
\n \n Flowbite Logo\n Flowbite\n \n

\n Build websites even faster with components on top of Tailwind CSS\n

\n
\n
\n \n \n \n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n Loading...\n
\n
\n
\n \n
\n Loading...\n
\n
\n
\n
\n
\n
\n
\n
\n
\n Loading...\n
\n
\n
\n
\n
\n
\n Loading...\n
\n
\n
\n )\n})', height: '450', }, { @@ -311,7 +311,7 @@ export const examples: Record = { 'This example can be used to encourage your website visitors to sign up to your email newsletter by showing an inline form inside the sticky banner on the top side of your page.', url: '/examples/[theme-rtl]/banner/04-banner-newsletter-signup', content: - 'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Banner, Button, Input } from \'flowbite-qwik\'\nimport { IconCloseSolid } from \'flowbite-qwik-icons\'\n\nexport default component$(() => {\n const email = useSignal(\'\')\n\n return (\n
\n \n
\n
\n
\n \n \n \n
\n
\n \n \n \n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n Loading...\n
\n
\n
\n \n
\n Loading...\n
\n
\n
\n
\n
\n
\n
\n
\n
\n Loading...\n
\n
\n
\n
\n
\n
\n Loading...\n
\n
\n
\n )\n})', + 'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Banner, Button, Input } from \'flowbite-qwik\'\nimport { IconCloseSolid } from \'flowbite-qwik-icons\'\n\nexport default component$(() => {\n const email = useSignal(\'\')\n\n return (\n
\n \n
\n
\n
\n \n \n \n
\n
\n \n \n \n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n Loading...\n
\n
\n
\n \n
\n Loading...\n
\n
\n
\n
\n
\n
\n
\n
\n
\n Loading...\n
\n
\n
\n
\n
\n
\n Loading...\n
\n
\n
\n )\n})', height: '450', }, ], @@ -389,7 +389,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/breadcrumb/01-default-breadcrumb', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Breadcrumb } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n
\n \n \n Home\n \n Projects\n Flowbite\n \n
\n )\n})', - height: '200', + height: '100', }, { title: 'Solid Breadcrumb', @@ -397,7 +397,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/breadcrumb/02-solid-breadcrumb', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Breadcrumb } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n
\n \n \n Home\n \n Projects\n Flowbite\n \n
\n )\n})', - height: '200', + height: '100', }, { title: 'Breadcrumb with Custom Icons', @@ -405,7 +405,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/breadcrumb/03-custom-icons', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Breadcrumb } from \'flowbite-qwik\'\nimport { IconArrowLeftOutline, IconBarsOutline } from \'flowbite-qwik-icons\'\n\nexport default component$(() => {\n return (\n
\n \n \n Home\n \n \n Projects\n \n Flowbite\n \n
\n )\n})', - height: '200', + height: '100', }, ], button: [ @@ -415,7 +415,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button/01-default-button', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Button } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n
\n \n \n \n \n \n \n \n \n \n
\n )\n})', - height: '200', + height: '150', }, { title: 'Button sizes', @@ -423,7 +423,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button/02-button-size', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Button } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n
\n \n \n \n \n \n
\n )\n})', - height: '200', + height: '150', }, { title: 'Button pills', @@ -431,7 +431,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button/03-button-pill', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Button } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n
\n \n \n \n \n \n \n \n \n
\n )\n})', - height: '200', + height: '150', }, { title: 'Button gradient monochrome', @@ -440,7 +440,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button/04-button-gradient-monochrome', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Button } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n
\n \n \n \n \n \n \n \n \n
\n )\n})', - height: '200', + height: '150', }, { title: 'Button gradient duotone', @@ -448,7 +448,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button/05-button-gradient-duotone', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Button } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n
\n \n \n \n \n \n \n \n
\n )\n})', - height: '200', + height: '150', }, { title: 'Button outline', @@ -456,7 +456,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button/06-button-outline', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Button } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n
\n \n \n \n \n \n \n
\n )\n})', - height: '200', + height: '150', }, { title: 'Button outline gradient', @@ -465,7 +465,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button/07-button-outline-gradient', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Button } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n
\n \n \n \n \n \n \n \n
\n )\n})', - height: '200', + height: '150', }, { title: 'Button colored shadows', @@ -481,7 +481,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button/09-button-square', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Button } from \'flowbite-qwik\'\nimport { IconArrowLeftOutline, IconArrowRightOutline } from \'flowbite-qwik-icons\'\n\nexport default component$(() => {\n return (\n
\n \n \n \n \n
\n )\n})', - height: '200', + height: '150', }, { title: 'Button loading', @@ -489,7 +489,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button/10-button-loading', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Button, useToggle } from \'flowbite-qwik\'\nimport { IconArrowLeftOutline } from \'flowbite-qwik-icons\'\n\nexport default component$(() => {\n const { value: loading, toggle$ } = useToggle()\n\n return (\n
\n \n \n \n \n \n
\n )\n})', - height: '200', + height: '150', }, { title: 'Button disabled', @@ -498,7 +498,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button/11-button-disabled', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Button } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n
\n \n \n \n \n \n
\n )\n})', - height: '200', + height: '150', }, { title: 'Button as link', @@ -506,7 +506,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button/12-button-as-link', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Link, StaticGenerateHandler } from \'@builder.io/qwik-city\'\nimport { Button } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n
\n \n \n \n
\n )\n})', - height: '200', + height: '150', }, { title: 'Button full option', @@ -514,7 +514,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button/13-button-full', content: "import { component$ } from '@builder.io/qwik'\nimport { Button } from 'flowbite-qwik'\nimport { IconHomeOutline } from 'flowbite-qwik-icons'\n\nexport default component$(() => {\n return (\n
\n \n
\n )\n})", - height: '200', + height: '150', }, { title: 'Button slot default', @@ -522,7 +522,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button/14-button-slot-default', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Button } from \'flowbite-qwik\'\nimport { IconArrowRightOutline, IconArrowRightSolid } from \'flowbite-qwik-icons\'\n\nexport default component$(() => {\n return (\n
\n \n \n \n \n
\n )\n})', - height: '200', + height: '150', }, { title: 'Button slot prefix', @@ -530,7 +530,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button/15-button-slot-prefix', content: "import { component$ } from '@builder.io/qwik'\nimport { Button } from 'flowbite-qwik'\nimport { IconHomeOutline } from 'flowbite-qwik-icons'\n\nexport default component$(() => {\n return (\n
\n \n
\n )\n})", - height: '200', + height: '150', }, { title: 'Button slot suffix', @@ -538,7 +538,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button/16-button-slot-suffix', content: "import { component$ } from '@builder.io/qwik'\nimport { Button } from 'flowbite-qwik'\nimport { IconArrowRightOutline } from 'flowbite-qwik-icons'\n\nexport default component$(() => {\n return (\n
\n \n
\n )\n})", - height: '200', + height: '150', }, { title: 'Button with custom tag', @@ -546,7 +546,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button/17-button-with-custom-tag', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Button } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n
\n \n \n
\n )\n})', - height: '200', + height: '150', }, ], 'button-group': [ @@ -557,7 +557,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button-group/01-default-button-group', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Button, ButtonGroup } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n \n \n \n \n \n )\n})', - height: '200', + height: '100', }, { title: 'Button group with icons', @@ -566,7 +566,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button-group/02-button-group-with-icons', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Button, ButtonGroup } from \'flowbite-qwik\'\nimport { IconDownloadOutline, IconFileSearchOutline, IconProfileCardOutline } from \'flowbite-qwik-icons\'\n\nexport default component$(() => {\n return (\n \n \n \n \n \n )\n})', - height: '200', + height: '100', }, { title: 'Button group as links', @@ -574,7 +574,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button-group/03-button-group-as-links', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Button, ButtonGroup } from \'flowbite-qwik\'\nimport { IconDownloadOutline, IconFileSearchOutline, IconProfileCardOutline } from \'flowbite-qwik-icons\'\n\nexport default component$(() => {\n return (\n \n \n \n \n \n )\n})', - height: '200', + height: '100', }, { title: 'Button group Outline', @@ -582,7 +582,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button-group/04-button-group-outline', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Button, ButtonGroup } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n \n \n \n \n \n )\n})', - height: '200', + height: '100', }, { title: 'Outlined with icon', @@ -590,7 +590,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button-group/05-button-group-outline-with-icons', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Button, ButtonGroup } from \'flowbite-qwik\'\nimport { IconDownloadOutline, IconFileSearchOutline, IconProfileCardOutline } from \'flowbite-qwik-icons\'\n\nexport default component$(() => {\n return (\n \n \n \n \n \n )\n})', - height: '200', + height: '100', }, { title: 'Button group event handler', @@ -598,7 +598,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/button-group/06-button-group-event-handler', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Button, ButtonGroup } from \'flowbite-qwik\'\nimport { IconDownloadOutline, IconFileSearchOutline, IconProfileCardOutline } from \'flowbite-qwik-icons\'\n\nexport default component$(() => {\n return (\n \n \n \n \n \n )\n})', - height: '200', + height: '100', }, ], card: [ @@ -828,7 +828,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/clipboard/01-default', content: 'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Clipboard, Input } from \'flowbite-qwik\'\n\nexport default component$(() => {\n const inputValue = useSignal(\'\')\n return (\n <>\n
\n \n \n
\n \n )\n})', - height: '200', + height: '150', }, { title: 'Input with copy button', @@ -837,7 +837,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/clipboard/02-with-icon', content: 'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Clipboard, Input } from \'flowbite-qwik\'\n\nexport default component$(() => {\n const inputValue = useSignal(\'\')\n return (\n
\n
\n \n\n \n
\n
\n )\n})', - height: '200', + height: '150', }, { title: 'Copy button with text', @@ -846,7 +846,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/clipboard/03-with-icon-text', content: 'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Clipboard, Input } from \'flowbite-qwik\'\n\nexport default component$(() => {\n const inputValue = useSignal(\'\')\n return (\n
\n
\n \n\n \n
\n
\n )\n})', - height: '200', + height: '150', }, { title: 'Custom Tooltip', @@ -854,7 +854,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/clipboard/04-custom-tooltip', content: 'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Clipboard, Input } from \'flowbite-qwik\'\n\nexport default component$(() => {\n const inputValue = useSignal(\'\')\n return (\n <>\n
\n \n \n
\n \n )\n})', - height: '200', + height: '150', }, ], 'date-picker': [ @@ -1034,8 +1034,8 @@ export const examples: Record = { description: 'Use this footer component to show a copyright notice and some helpful website links.', url: '/examples/[theme-rtl]/footer/01-default', content: - 'import { component$ } from \'@builder.io/qwik\'\nimport { Footer } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n
\n \n \n About\n Privacy Policy\n Licensing\n Contact\n \n
\n )\n})', - height: '400', + 'import { component$ } from \'@builder.io/qwik\'\nimport { Footer } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n
\n \n\n \n About\n Privacy Policy\n Licensing\n Contact\n \n
\n )\n})', + height: '150', }, { title: 'Default with Logo', @@ -1043,7 +1043,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/footer/02-footer-with-logo', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Footer } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n
\n
\n
\n \n \n About\n Privacy Policy\n Licensing\n Contact\n \n
\n \n \n
\n
\n )\n})', - height: '400', + height: '200', }, { title: 'Social media icons', @@ -1052,7 +1052,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/footer/03-footer-with-sitemap-links', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Footer } from \'flowbite-qwik\'\nimport { IconFacebookSolid, IconGithubSolid, IconDribbbleSolid, IconLinkedinSolid } from \'flowbite-qwik-icons\'\n\nexport default component$(() => {\n return (\n
\n
\n
\n
\n \n
\n
\n
\n \n \n Flowbite\n Tailwind CSS\n \n
\n
\n \n \n Github\n Discord\n \n
\n
\n \n \n Privacy Policy\n Terms & Conditions\n \n
\n
\n
\n \n
\n \n
\n \n \n \n \n
\n
\n
\n
\n )\n})', - height: '400', + height: '300', }, { title: 'Sitemap links', @@ -1061,7 +1061,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/footer/04-footer-with-socials', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Footer } from \'flowbite-qwik\'\nimport { IconFacebookSolid, IconGithubSolid, IconDribbbleSolid, IconLinkedinSolid } from \'flowbite-qwik-icons\'\n\nexport default component$(() => {\n return (\n
\n
\n
\n
\n \n \n About\n Careers\n Brand Center\n Blog\n \n
\n
\n \n \n Discord Server\n Twitter\n Facebook\n Contact Us\n \n
\n
\n \n \n Privacy Policy\n Licensing\n Terms & Conditions\n \n
\n
\n \n \n iOS\n Android\n Windows\n MacOS\n \n
\n
\n
\n \n
\n \n \n \n \n
\n
\n
\n
\n )\n})', - height: '400', + height: '600', }, ], heading: [ @@ -1266,7 +1266,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/kbd/01-default-kbd', content: "import { component$ } from '@builder.io/qwik'\nimport { Kbd } from 'flowbite-qwik'\n\nexport default component$(() => {\n return (\n
\n Shift\n Ctrl\n Tab\n Caps Lock\n Esc\n Spacebar\n Enter\n
\n )\n})", - height: '200', + height: '150', }, { title: 'KBD inside text', @@ -1274,7 +1274,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/kbd/02-kbd-inside-text', content: "import { component$ } from '@builder.io/qwik'\nimport { Kbd } from 'flowbite-qwik'\n\nexport default component$(() => {\n return (\n <>\n Please press Ctrl + Shift + R to re-render an MDN page.\n \n )\n})", - height: '200', + height: '150', }, { title: 'KBD inside table', @@ -1290,7 +1290,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/kbd/04-kbd-arrow-keys', content: "import { component$ } from '@builder.io/qwik'\nimport { Kbd } from 'flowbite-qwik'\nimport { IconAngleDownSolid, IconAngleLeftSolid, IconAngleRightSolid, IconAngleUpSolid } from 'flowbite-qwik-icons'\n\nexport default component$(() => {\n return (\n
\n \n \n \n \n
\n )\n})", - height: '200', + height: '150', }, { title: 'Letter Keys', @@ -1298,7 +1298,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/kbd/05-kbd-letter-keys', content: "import { component$ } from '@builder.io/qwik'\nimport { Kbd } from 'flowbite-qwik'\n\nexport default component$(() => {\n return (\n
\n Q\n W\n E\n R\n T\n Y\n I\n O\n P\n A\n S\n D\n F\n G\n H\n J\n K\n L\n Z\n X\n C\n V\n B\n N\n M\n
\n )\n})", - height: '200', + height: '150', }, { title: 'Number Keys', @@ -1306,7 +1306,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/kbd/06-kbd-number-keys', content: "import { component$ } from '@builder.io/qwik'\nimport { Kbd } from 'flowbite-qwik'\n\nexport default component$(() => {\n return (\n
\n 1\n 2\n 3\n 4\n 5\n 6\n 7\n 8\n 9\n 0\n
\n )\n})", - height: '200', + height: '150', }, { title: 'Function keys', @@ -1314,7 +1314,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/kbd/07-kbd-function-keys', content: "import { component$ } from '@builder.io/qwik'\nimport { Kbd } from 'flowbite-qwik'\n\nexport default component$(() => {\n return (\n
\n F1\n F2\n F3\n F4\n F5\n F6\n F7\n F8\n F9\n F10\n F11\n F12\n
\n )\n})", - height: '200', + height: '150', }, ], link: [ @@ -1558,7 +1558,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/pagination/01-default', content: "import { component$, useSignal } from '@builder.io/qwik'\nimport { Pagination } from 'flowbite-qwik'\n\nexport default component$(() => {\n const currentPage = useSignal(1)\n\n return (\n <>\n
\n \n
\n \n )\n})", - height: '200', + height: '150', }, { title: 'Pagination with icons', @@ -1566,7 +1566,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/pagination/02-with-icons', content: 'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Pagination } from \'flowbite-qwik\'\n\nexport default component$(() => {\n const currentPage = useSignal(1)\n\n return (\n <>\n
\n \n
\n \n )\n})', - height: '200', + height: '150', }, { title: 'Pagination with icons only', @@ -1574,7 +1574,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/pagination/03-with-icons-only', content: "import { component$, useSignal } from '@builder.io/qwik'\nimport { Pagination } from 'flowbite-qwik'\n\nexport default component$(() => {\n const currentPage = useSignal(1)\n\n return (\n <>\n
\n \n
\n \n )\n})", - height: '200', + height: '150', }, { title: 'Pagination with custom icons', @@ -1582,7 +1582,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/pagination/04-with-custom-icons', content: "import { component$, useSignal } from '@builder.io/qwik'\nimport { Pagination } from 'flowbite-qwik'\nimport { IconArrowLeftSolid, IconArrowRightSolid } from 'flowbite-qwik-icons'\n\nexport default component$(() => {\n const currentPage = useSignal(1)\n\n return (\n <>\n
\n \n
\n \n )\n})", - height: '200', + height: '150', }, { title: 'Table data navigation', @@ -1590,7 +1590,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/pagination/05-table-layout', content: 'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Pagination } from \'flowbite-qwik\'\n\nexport default component$(() => {\n const currentPage = useSignal(1)\n\n return (\n <>\n
\n \n
\n \n )\n})', - height: '200', + height: '150', }, { title: 'Table data navigation with icons', @@ -1598,7 +1598,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/pagination/06-table-layout-with-icons', content: 'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Pagination } from \'flowbite-qwik\'\n\nexport default component$(() => {\n const currentPage = useSignal(1)\n\n return (\n <>\n
\n \n
\n \n )\n})', - height: '200', + height: '150', }, { title: 'With custom button', @@ -1606,7 +1606,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/pagination/07-with-custom-button', content: "import { component$, useSignal, Slot } from '@builder.io/qwik'\nimport { Pagination, PaginationButtonProps } from 'flowbite-qwik'\n\nconst CustomButton = component$(({ active, ...props }) => {\n return (\n \n \n \n )\n})\nexport default component$(() => {\n const currentPage = useSignal(1)\n\n return (\n <>\n
\n \n
\n \n )\n})", - height: '200', + height: '150', }, ], 'progress-bar': [ @@ -1755,7 +1755,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/rating/01-default', content: "import { component$ } from '@builder.io/qwik'\nimport { Rating } from 'flowbite-qwik'\n\nexport default component$(() => {\n return (\n
\n \n
\n )\n})", - height: '200', + height: '150', }, { title: 'Rating with text', @@ -1763,7 +1763,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/rating/02-with-text', content: 'import { component$ } from \'@builder.io/qwik\'\nimport { Rating } from \'flowbite-qwik\'\n\nexport default component$(() => {\n return (\n
\n \n

\n 4.75 out of 5\n

\n \n
\n )\n})', - height: '200', + height: '150', }, { title: 'Rating with review link', @@ -1771,7 +1771,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/rating/03-with-review-link', content: "import { component$ } from '@builder.io/qwik'\nimport { Rating } from 'flowbite-qwik'\n\nexport default component$(() => {\n return (\n
\n \n
\n )\n})", - height: '200', + height: '150', }, { title: 'Stars sizes', @@ -1779,7 +1779,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/rating/04-with-sizes', content: "import { component$ } from '@builder.io/qwik'\nimport { Rating, RatingSize } from 'flowbite-qwik'\n\nexport default component$(() => {\n return (\n
\n {(['sm', 'md', 'lg'] as RatingSize[]).map((size) => (\n \n ))}\n
\n )\n})", - height: '200', + height: '150', }, ], select: [ @@ -1831,7 +1831,7 @@ export const examples: Record = { 'Use this example to show a list of navigation menu items by adding children components inside the component and pass the href prop to set a URL and icon to apply any icons from the flowbite-qwik-icons icon library. You can also add a text label as a badge by using the label prop from Qwik and the labelColor to set the color of the label background.', url: '/examples/[theme-rtl]/sidebar/01-default', content: - 'import { component$ } from \'@builder.io/qwik\'\nimport { Sidebar, useSidebarOpen } from \'flowbite-qwik\'\nimport { IconHomeOutline, IconInboxOutline, IconUserCircleOutline, IconShoppingBagOutline, IconChartBars3FromLeftSolid } from \'flowbite-qwik-icons\'\n\nexport default component$(() => {\n const { setIsOpen } = useSidebarOpen()\n\n return (\n
\n {\n setIsOpen(true)\n }}\n type="button"\n class="ms-3 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 sm:hidden"\n >\n Open sidebar\n \n \n \n \n Dashboard\n inbox\n Users\n Products\n \n \n
\n )\n})', + 'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Sidebar } from \'flowbite-qwik\'\nimport { IconHomeOutline, IconInboxOutline, IconUserCircleOutline, IconShoppingBagOutline, IconChartBars3FromLeftSolid } from \'flowbite-qwik-icons\'\n\nexport default component$(() => {\n const collapsed = useSignal(false)\n\n return (\n
\n {\n collapsed.value = true\n }}\n type="button"\n class="ms-3 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 sm:hidden"\n >\n Open sidebar\n \n \n \n \n Dashboard\n inbox\n Users\n Products\n \n \n
\n )\n})', height: '500', }, { @@ -1840,7 +1840,7 @@ export const examples: Record = { "The chevronIcon property offers customization for the chevron icon. Alternatively, for more complex scenarios, the renderChevronIcon option can be utilized. Here's an example.", url: '/examples/[theme-rtl]/sidebar/02-with-group', content: - 'import { component$ } from \'@builder.io/qwik\'\nimport { Sidebar, useSidebarOpen } from \'flowbite-qwik\'\nimport {\n IconHomeOutline,\n IconInboxOutline,\n IconUserCircleOutline,\n IconShoppingBagOutline,\n IconFileEditSolid,\n IconAdressBookOutline,\n IconGearSolid,\n IconAtomSolid,\n IconAdjustmentsHorizontalSolid,\n IconChartBars3FromLeftSolid,\n} from \'flowbite-qwik-icons\'\n\nexport default component$(() => {\n const { setIsOpen } = useSidebarOpen()\n\n return (\n
\n {\n setIsOpen(true)\n }}\n type="button"\n class="ms-3 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 sm:hidden"\n >\n Open sidebar\n \n \n \n \n Dashboard\n inbox\n Users\n Products\n \n\n \n Documentation\n Help\n Settings\n Details\n\n \n Dashboard\n inbox\n Users\n Products\n \n \n \n
\n )\n})', + 'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Sidebar } from \'flowbite-qwik\'\nimport {\n IconHomeOutline,\n IconInboxOutline,\n IconUserCircleOutline,\n IconShoppingBagOutline,\n IconFileEditSolid,\n IconAdressBookOutline,\n IconGearSolid,\n IconAtomSolid,\n IconAdjustmentsHorizontalSolid,\n IconChartBars3FromLeftSolid,\n} from \'flowbite-qwik-icons\'\n\nexport default component$(() => {\n const collapsed = useSignal(false)\n\n return (\n
\n {\n collapsed.value = true\n }}\n type="button"\n class="ms-3 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 sm:hidden"\n >\n Open sidebar\n \n \n \n \n Dashboard\n inbox\n Users\n Products\n \n\n \n Documentation\n Help\n Settings\n Details\n\n \n Dashboard\n inbox\n Users\n Products\n \n \n \n
\n )\n})', height: '500', }, { @@ -1848,7 +1848,7 @@ export const examples: Record = { description: 'This example can be used to show a call to action button inside the sidebar next to the menu items.', url: '/examples/[theme-rtl]/sidebar/03-with-cta', content: - 'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Sidebar, Badge, useSidebarOpen } from \'flowbite-qwik\'\nimport {\n IconHomeOutline,\n IconInboxOutline,\n IconUserCircleOutline,\n IconShoppingBagOutline,\n IconFileEditSolid,\n IconAdressBookOutline,\n IconGearSolid,\n IconAtomSolid,\n IconAdjustmentsHorizontalSolid,\n IconChartBars3FromLeftSolid,\n} from \'flowbite-qwik-icons\'\n\nexport default component$(() => {\n const isCtaVisible = useSignal(true)\n const { setIsOpen } = useSidebarOpen()\n\n return (\n
\n {\n setIsOpen(true)\n }}\n type="button"\n class="ms-3 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 sm:hidden"\n >\n Open sidebar\n \n \n \n \n Dashboard\n inbox\n Users\n Products\n \n\n \n Documentation\n Help\n Settings\n Details\n\n \n Dashboard\n inbox\n Users\n Products\n \n \n {isCtaVisible.value && (\n (isCtaVisible.value = false)}>\n \n\n

\n Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a limited time in your profile.\n

\n \n Turn new navigation off\n \n \n )}\n \n
\n )\n})', + 'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Sidebar, Badge } from \'flowbite-qwik\'\nimport {\n IconHomeOutline,\n IconInboxOutline,\n IconUserCircleOutline,\n IconShoppingBagOutline,\n IconFileEditSolid,\n IconAdressBookOutline,\n IconGearSolid,\n IconAtomSolid,\n IconAdjustmentsHorizontalSolid,\n IconChartBars3FromLeftSolid,\n} from \'flowbite-qwik-icons\'\n\nexport default component$(() => {\n const isCtaVisible = useSignal(true)\n const collapsed = useSignal(false)\n\n return (\n
\n {\n collapsed.value = true\n }}\n type="button"\n class="ms-3 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 sm:hidden"\n >\n Open sidebar\n \n \n \n \n Dashboard\n inbox\n Users\n Products\n \n\n \n Documentation\n Help\n Settings\n Details\n\n \n Dashboard\n inbox\n Users\n Products\n \n \n {isCtaVisible.value && (\n (isCtaVisible.value = false)}>\n \n\n

\n Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a limited time in your profile.\n

\n \n Turn new navigation off\n \n \n )}\n \n
\n )\n})', height: '500', }, { @@ -1856,15 +1856,7 @@ export const examples: Record = { description: 'Use this example to show a navbar together with a sidebar layout for your web application.', url: '/examples/[theme-rtl]/sidebar/04-sidebar-with-navbar', content: - "import { component$ } from '@builder.io/qwik'\nimport { Sidebar } from 'flowbite-qwik'\nimport { IconHomeOutline, IconInboxOutline, IconUserCircleOutline, IconShoppingBagOutline } from 'flowbite-qwik-icons'\nimport { NavbarPage } from '~/components/NavbarPage/NavbarPage'\n\nexport default component$(() => {\n return (\n <>\n \n\n \n \n Dashboard\n inbox\n Users\n Products\n \n \n \n )\n})", - height: '500', - }, - { - title: 'With close button', - description: 'Use this example to show a close button on top of the navbar', - url: '/examples/[theme-rtl]/sidebar/05-sidebar-with-close-button', - content: - 'import { component$ } from \'@builder.io/qwik\'\nimport { Sidebar, useSidebarOpen } from \'flowbite-qwik\'\nimport { IconHomeOutline, IconInboxOutline, IconUserCircleOutline, IconShoppingBagOutline, IconChartBars3FromLeftSolid } from \'flowbite-qwik-icons\'\n\nexport default component$(() => {\n const { setIsOpen } = useSidebarOpen()\n\n return (\n
\n {\n setIsOpen(true)\n }}\n type="button"\n class="ms-3 inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 sm:hidden"\n >\n Open sidebar\n \n \n \n \n Dashboard\n inbox\n Users\n Products\n \n \n
\n )\n})', + 'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Sidebar } from \'flowbite-qwik\'\nimport {\n IconHomeOutline,\n IconInboxOutline,\n IconUserCircleOutline,\n IconShoppingBagOutline,\n IconCloseSolid,\n IconChartBars3FromLeftSolid,\n} from \'flowbite-qwik-icons\'\nimport { NavbarPage } from \'~/components/NavbarPage/NavbarPage\'\n\nexport default component$(() => {\n const collapsed = useSignal(false)\n\n return (\n <>\n \n {\n collapsed.value = !collapsed.value\n }}\n >\n {collapsed.value ? : }\n Open sidebar\n \n \n\n \n \n Dashboard\n inbox\n Users\n Products\n \n \n \n )\n})', height: '500', }, ], @@ -1876,7 +1868,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/spinner/01-default', content: "import { component$ } from '@builder.io/qwik'\nimport { Spinner } from 'flowbite-qwik'\n\nexport default component$(() => {\n return (\n
\n \n
\n )\n})", - height: '200', + height: '100', }, { title: 'Spinner colors', @@ -1884,7 +1876,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/spinner/02-color', content: "import { component$ } from '@builder.io/qwik'\nimport { Spinner, SpinnerColor } from 'flowbite-qwik'\n\nexport default component$(() => {\n return (\n
\n {(['blue', 'gray', 'green', 'red', 'yellow', 'pink', 'purple', 'white'] as SpinnerColor[]).map((color) => (\n \n ))}\n
\n )\n})", - height: '200', + height: '100', }, { title: 'Sizing options', @@ -1892,7 +1884,7 @@ export const examples: Record = { url: '/examples/[theme-rtl]/spinner/03-size', content: "import { component$ } from '@builder.io/qwik'\nimport { Spinner, SpinnerSize } from 'flowbite-qwik'\n\nexport default component$(() => {\n return (\n
\n {(['0', '0.5', '1', '1.5', '2', '2.5', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as SpinnerSize[]).map((size) => (\n \n ))}\n
\n )\n})", - height: '200', + height: '150', }, ], table: [ diff --git a/apps/web/src/global.css b/apps/web/src/global.css index 399dfbbf..29863232 100644 --- a/apps/web/src/global.css +++ b/apps/web/src/global.css @@ -4,6 +4,8 @@ html { @apply scroll-smooth; + font-family: "Inter", sans-serif; + font-optical-sizing: auto; } .dark { diff --git a/apps/web/src/routes/docs/customize/theme/index.tsx b/apps/web/src/routes/docs/customize/theme/index.tsx index 34d56863..f9da386a 100644 --- a/apps/web/src/routes/docs/customize/theme/index.tsx +++ b/apps/web/src/routes/docs/customize/theme/index.tsx @@ -40,10 +40,7 @@ export default component$(() => { />
-

- As you can see, you can can change the global theme in the header but this component bellow will never be affected as it's listening to - it's own theme reference. -

+

The Theme provider is a component that allows you to set a default theme for all of its child components.
diff --git a/apps/web/src/routes/docs/layout.tsx b/apps/web/src/routes/docs/layout.tsx index f17b55de..52f35911 100644 --- a/apps/web/src/routes/docs/layout.tsx +++ b/apps/web/src/routes/docs/layout.tsx @@ -1,13 +1,15 @@ -import { component$, PrefetchServiceWorker, Slot, useComputed$ } from '@builder.io/qwik' +import { component$, PrefetchServiceWorker, Slot, useComputed$, useSignal, useTask$ } from '@builder.io/qwik' import { Sidebar } from 'flowbite-qwik' import { NavLink } from '~/components/NavLink/NavLink' import { allDocs } from '~/generated-docs' import { toPascalCase } from '~/utils/case' import { NavbarPage } from '~/components/NavbarPage/NavbarPage' import { useLocation } from '@builder.io/qwik-city' +import { IconChartBars3FromLeftSolid, IconCloseSolid } from 'flowbite-qwik-icons' export default component$(() => { const location = useLocation() + const collapsed = useSignal(false) const isGettingStartedOpened = useComputed$(() => location.url.pathname.startsWith('/docs/getting-started')) const isComponentsOpened = useComputed$(() => location.url.pathname.startsWith('/docs/components')) @@ -15,76 +17,75 @@ export default component$(() => { const isFormsOpened = useComputed$(() => location.url.pathname.startsWith('/docs/forms')) const isTypographyOpened = useComputed$(() => location.url.pathname.startsWith('/docs/typography')) - const collapseClasses = 'text-sm tracking-wide hover:bg-transparent dark:hover:bg-transparent hover:text-purple-600 dark:hover:text-purple-400' - const itemClasses = - 'bg-transparent pl-2 text-sm capitalize text-gray-500 hover:bg-transparent hover:text-gray-900 dark:bg-transparent dark:text-gray-400 dark:hover:bg-transparent dark:hover:text-white' - const itemActiveClasses = - 'text-purple-600 dark:text-purple-400 dark:hover:text-purple-400 hover:text-purple-600 bg-transparent hover:bg-transparent' + useTask$(({ track }) => { + track(() => location.isNavigating) + collapsed.value = false + }) return (
- + + + -
- +
+ - + {allDocs['getting-started'].map((component) => ( - + {component} ))} - + {allDocs['customize'].map((component) => ( - + {component} ))} - + {allDocs.components.map((component) => ( - + {toPascalCase(component)} ))} - + {allDocs.forms.map((component) => ( - + {component} ))} - + {allDocs.typography.map((component) => ( - + {component} ))} @@ -92,9 +93,7 @@ export default component$(() => { -
- -
+
{import.meta.env.PROD && ( diff --git a/apps/web/src/routes/examples/[theme-rtl]/avatar/11-avatar-override-image/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/avatar/11-avatar-override-image/index.tsx index 06e35721..cecd7596 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/avatar/11-avatar-override-image/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/avatar/11-avatar-override-image/index.tsx @@ -1,7 +1,7 @@ /** * title: Override image element * description: You can override the default image element by passing the img prop to the component. This is useful if you want to use a different image element like - * height: 200 + * height: 100 */ import { component$ } from '@builder.io/qwik' diff --git a/apps/web/src/routes/examples/[theme-rtl]/badge/01-default-badge/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/badge/01-default-badge/index.tsx index f4b23831..771ddb0c 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/badge/01-default-badge/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/badge/01-default-badge/index.tsx @@ -1,6 +1,7 @@ /** * title: Default Badge * description: Use the following badge elements to indicate counts or labels inside or outside components. + * height: 100 */ import { component$ } from '@builder.io/qwik' import { StaticGenerateHandler } from '@builder.io/qwik-city' diff --git a/apps/web/src/routes/examples/[theme-rtl]/badge/02-props-bordered/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/badge/02-props-bordered/index.tsx index 44aa427d..fdc99d98 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/badge/02-props-bordered/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/badge/02-props-bordered/index.tsx @@ -1,6 +1,7 @@ /** * title: Bordered badge * description: This example can be used to add a border accent to the badge component. + * height: 100 */ import { component$ } from '@builder.io/qwik' import { StaticGenerateHandler } from '@builder.io/qwik-city' diff --git a/apps/web/src/routes/examples/[theme-rtl]/badge/03-props-pills/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/badge/03-props-pills/index.tsx index d57011e2..b7cb644b 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/badge/03-props-pills/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/badge/03-props-pills/index.tsx @@ -1,6 +1,7 @@ /** * title: Pills badge * description: Use this example to make the corners even more rounded like pills for the badge component. + * height: 100 */ import { component$ } from '@builder.io/qwik' import { StaticGenerateHandler } from '@builder.io/qwik-city' diff --git a/apps/web/src/routes/examples/[theme-rtl]/badge/04-as-link/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/badge/04-as-link/index.tsx index 1a4db2e9..e0bf3f5e 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/badge/04-as-link/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/badge/04-as-link/index.tsx @@ -1,6 +1,7 @@ /** * title: Badges as links * description: You can also use badges as anchor elements to link to another page. Prop – href + * height: 100 */ import { component$ } from '@builder.io/qwik' import { StaticGenerateHandler } from '@builder.io/qwik-city' diff --git a/apps/web/src/routes/examples/[theme-rtl]/badge/05-props-size/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/badge/05-props-size/index.tsx index 35a7fec4..d71e4021 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/badge/05-props-size/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/badge/05-props-size/index.tsx @@ -1,6 +1,7 @@ /** * title: Large badge * description: Use size prop to change the size of the badge component. + * height: 100 */ import { component$ } from '@builder.io/qwik' import { StaticGenerateHandler } from '@builder.io/qwik-city' diff --git a/apps/web/src/routes/examples/[theme-rtl]/badge/06-with-icon/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/badge/06-with-icon/index.tsx index 2022ee1d..27f57c11 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/badge/06-with-icon/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/badge/06-with-icon/index.tsx @@ -1,6 +1,7 @@ /** * title: Badge with Icon * description: You can also use SVG icons inside the badge elements. + * height: 100 */ import { component$ } from '@builder.io/qwik' import { StaticGenerateHandler } from '@builder.io/qwik-city' diff --git a/apps/web/src/routes/examples/[theme-rtl]/badge/07-props-chips/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/badge/07-props-chips/index.tsx index c5ee81c5..0a1bc58d 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/badge/07-props-chips/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/badge/07-props-chips/index.tsx @@ -1,6 +1,7 @@ /** * title: Chips (dismissible badges) * description: This example can be used to make badges dismissible by adding a close button. + * height: 200 */ import { component$ } from '@builder.io/qwik' import { StaticGenerateHandler } from '@builder.io/qwik-city' diff --git a/apps/web/src/routes/examples/[theme-rtl]/badge/08-with-icon-only/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/badge/08-with-icon-only/index.tsx index e3c59138..5dd7f4f7 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/badge/08-with-icon-only/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/badge/08-with-icon-only/index.tsx @@ -1,6 +1,7 @@ /** * title: Badge with Icon only * description: You can also use badge with only icon. + * height: 100 */ import { component$ } from '@builder.io/qwik' import { StaticGenerateHandler } from '@builder.io/qwik-city' diff --git a/apps/web/src/routes/examples/[theme-rtl]/banner/03-banner-marketing-cta/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/banner/03-banner-marketing-cta/index.tsx index 9256174f..b40d71cb 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/banner/03-banner-marketing-cta/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/banner/03-banner-marketing-cta/index.tsx @@ -14,7 +14,7 @@ export default component$(() => { return (
-
+
Flowbite Logo @@ -24,9 +24,9 @@ export default component$(() => { Build websites even faster with components on top of Tailwind CSS

-
+
- +
diff --git a/apps/web/src/routes/examples/[theme-rtl]/banner/04-banner-newsletter-signup/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/banner/04-banner-newsletter-signup/index.tsx index 3cf510ff..eded2083 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/banner/04-banner-newsletter-signup/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/banner/04-banner-newsletter-signup/index.tsx @@ -17,16 +17,21 @@ export default component$(() => {
-
-
-
diff --git a/apps/web/src/routes/examples/[theme-rtl]/blockquote/01-default-blockquote/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/blockquote/01-default-blockquote/index.tsx index 1e9f1f02..d871b265 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/blockquote/01-default-blockquote/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/blockquote/01-default-blockquote/index.tsx @@ -1,6 +1,7 @@ /** * title: Default blockquote * description: Use this example to quote an external source inside a
component. + * */ import { component$ } from '@builder.io/qwik' diff --git a/apps/web/src/routes/examples/[theme-rtl]/breadcrumb/01-default-breadcrumb/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/breadcrumb/01-default-breadcrumb/index.tsx index e81278c4..5ca621a8 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/breadcrumb/01-default-breadcrumb/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/breadcrumb/01-default-breadcrumb/index.tsx @@ -1,6 +1,7 @@ /** * title: Default Breadcrumb * description: Use the following breadcrumb example to show the hierarchical structure of pages. + * height: 100 */ import { component$ } from '@builder.io/qwik' diff --git a/apps/web/src/routes/examples/[theme-rtl]/breadcrumb/02-solid-breadcrumb/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/breadcrumb/02-solid-breadcrumb/index.tsx index e5999e04..d0f885e7 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/breadcrumb/02-solid-breadcrumb/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/breadcrumb/02-solid-breadcrumb/index.tsx @@ -1,6 +1,7 @@ /** * title: Solid Breadcrumb * description: You can alternatively also use the breadcrumb components with a solid background. + * height: 100 */ import { component$ } from '@builder.io/qwik' diff --git a/apps/web/src/routes/examples/[theme-rtl]/breadcrumb/03-custom-icons/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/breadcrumb/03-custom-icons/index.tsx index 10f64ad0..0c007d7e 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/breadcrumb/03-custom-icons/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/breadcrumb/03-custom-icons/index.tsx @@ -1,6 +1,7 @@ /** * title: Breadcrumb with Custom Icons * description: You can customize the icons for the home and arrow icons in the breadcrumb component. + * height: 100 */ import { component$ } from '@builder.io/qwik' diff --git a/apps/web/src/routes/examples/[theme-rtl]/button-group/01-default-button-group/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/button-group/01-default-button-group/index.tsx index 92e460c1..c4e9b073 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/button-group/01-default-button-group/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/button-group/01-default-button-group/index.tsx @@ -1,6 +1,7 @@ /** * title: Default button group * description: Use this example of the component by adding the Button component as a child element and stack them together. You can also use the color prop to change the color of the buttons. + * height: 100 */ import { component$ } from '@builder.io/qwik' diff --git a/apps/web/src/routes/examples/[theme-rtl]/button-group/02-button-group-with-icons/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/button-group/02-button-group-with-icons/index.tsx index 2beba277..536561a1 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/button-group/02-button-group-with-icons/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/button-group/02-button-group-with-icons/index.tsx @@ -1,6 +1,7 @@ /** * title: Button group with icons * description: Import one of the icons from the flowbite-qwik-icons library and add it as a child element to the - + Dashboard inbox diff --git a/apps/web/src/routes/examples/[theme-rtl]/sidebar/02-with-group/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/sidebar/02-with-group/index.tsx index c342f8b7..335422e7 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/sidebar/02-with-group/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/sidebar/02-with-group/index.tsx @@ -4,8 +4,8 @@ * height: 500 */ -import { component$ } from '@builder.io/qwik' -import { Sidebar, useSidebarOpen } from 'flowbite-qwik' +import { component$, useSignal } from '@builder.io/qwik' +import { Sidebar } from 'flowbite-qwik' import { IconHomeOutline, IconInboxOutline, @@ -22,13 +22,13 @@ import { staticGenerateHandler } from '~/routes/examples/layout' import { StaticGenerateHandler } from '@builder.io/qwik-city' export default component$(() => { - const { setIsOpen } = useSidebarOpen() + const collapsed = useSignal(false) return (
- + Dashboard inbox diff --git a/apps/web/src/routes/examples/[theme-rtl]/sidebar/03-with-cta/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/sidebar/03-with-cta/index.tsx index 0997defd..d776f63f 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/sidebar/03-with-cta/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/sidebar/03-with-cta/index.tsx @@ -5,7 +5,7 @@ */ import { component$, useSignal } from '@builder.io/qwik' -import { Sidebar, Badge, useSidebarOpen } from 'flowbite-qwik' +import { Sidebar, Badge } from 'flowbite-qwik' import { IconHomeOutline, IconInboxOutline, @@ -23,13 +23,13 @@ import { StaticGenerateHandler } from '@builder.io/qwik-city' export default component$(() => { const isCtaVisible = useSignal(true) - const { setIsOpen } = useSidebarOpen() + const collapsed = useSignal(false) return (
- + Dashboard inbox diff --git a/apps/web/src/routes/examples/[theme-rtl]/sidebar/04-sidebar-with-navbar/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/sidebar/04-sidebar-with-navbar/index.tsx index 107746d8..730d43ff 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/sidebar/04-sidebar-with-navbar/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/sidebar/04-sidebar-with-navbar/index.tsx @@ -4,19 +4,45 @@ * height: 500 */ -import { component$ } from '@builder.io/qwik' +import { component$, useSignal } from '@builder.io/qwik' import { Sidebar } from 'flowbite-qwik' -import { IconHomeOutline, IconInboxOutline, IconUserCircleOutline, IconShoppingBagOutline } from 'flowbite-qwik-icons' +import { + IconHomeOutline, + IconInboxOutline, + IconUserCircleOutline, + IconShoppingBagOutline, + IconCloseSolid, + IconChartBars3FromLeftSolid, +} from 'flowbite-qwik-icons' import { staticGenerateHandler } from '~/routes/examples/layout' import { StaticGenerateHandler } from '@builder.io/qwik-city' import { NavbarPage } from '~/components/NavbarPage/NavbarPage' export default component$(() => { + const collapsed = useSignal(false) + return ( <> - + + + - + Dashboard inbox diff --git a/apps/web/src/routes/examples/[theme-rtl]/sidebar/05-sidebar-with-close-button/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/sidebar/05-sidebar-with-close-button/index.tsx deleted file mode 100644 index d5b8b3ab..00000000 --- a/apps/web/src/routes/examples/[theme-rtl]/sidebar/05-sidebar-with-close-button/index.tsx +++ /dev/null @@ -1,42 +0,0 @@ -/** - * title: With close button - * description: Use this example to show a close button on top of the navbar - * height: 500 - */ - -import { component$ } from '@builder.io/qwik' -import { Sidebar, useSidebarOpen } from 'flowbite-qwik' -import { IconHomeOutline, IconInboxOutline, IconUserCircleOutline, IconShoppingBagOutline, IconChartBars3FromLeftSolid } from 'flowbite-qwik-icons' -import { staticGenerateHandler } from '~/routes/examples/layout' -import { StaticGenerateHandler } from '@builder.io/qwik-city' - -export default component$(() => { - const { setIsOpen } = useSidebarOpen() - - return ( -
- - - - Dashboard - inbox - Users - Products - - -
- ) -}) - -export const onStaticGenerate: StaticGenerateHandler = async () => { - return staticGenerateHandler() -} diff --git a/apps/web/src/routes/examples/[theme-rtl]/spinner/01-default/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/spinner/01-default/index.tsx index fef8c91b..2447fdc1 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/spinner/01-default/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/spinner/01-default/index.tsx @@ -1,6 +1,7 @@ /** * title: Default spinner * description: Use the default spinner element by adding the Qwik component inside your code and integrate the aria-label attribute to allow screen readers parse the component for accessibility + * height: 100 */ import { component$ } from '@builder.io/qwik' diff --git a/apps/web/src/routes/examples/[theme-rtl]/spinner/02-color/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/spinner/02-color/index.tsx index 60489a17..1b1cedae 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/spinner/02-color/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/spinner/02-color/index.tsx @@ -1,6 +1,7 @@ /** * title: Spinner colors * description: Update the colors of the loading spinner by using the color Qwik prop. + * height: 100 */ import { component$ } from '@builder.io/qwik' diff --git a/apps/web/src/routes/examples/[theme-rtl]/spinner/03-size/index.tsx b/apps/web/src/routes/examples/[theme-rtl]/spinner/03-size/index.tsx index 4c17549c..d8854d10 100644 --- a/apps/web/src/routes/examples/[theme-rtl]/spinner/03-size/index.tsx +++ b/apps/web/src/routes/examples/[theme-rtl]/spinner/03-size/index.tsx @@ -1,6 +1,7 @@ /** * title: Sizing options * description: Make the size of the spinner smaller or larger by using the size prop. Choose from xs, sm, md, lg, or xl. + * height: 150 */ import { component$ } from '@builder.io/qwik' diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx index 7347166c..b8d25b3a 100644 --- a/apps/web/src/routes/index.tsx +++ b/apps/web/src/routes/index.tsx @@ -14,7 +14,7 @@ import { HeroSection } from '~/components/homepage/HeroSection/HeroSection' export default component$(() => { return (
- +
diff --git a/packages/lib/README.md b/packages/lib/README.md index 01378de7..feddfaed 100644 --- a/packages/lib/README.md +++ b/packages/lib/README.md @@ -140,238 +140,238 @@ export default component$(() => { - Qwik Accordion + Qwik Accordion - Qwik Alert + Qwik Alert - Qwik Avatar + Qwik Avatar - Qwik Badge + Qwik Badge - Qwik Banner + Qwik Banner - Qwik Blockquote + Qwik Blockquote - Qwik Breadcrumb + Qwik Breadcrumb - Qwik Button + Qwik Button - Qwik ButtonGroup + Qwik ButtonGroup - Qwik Card + Qwik Card - Qwik Carousel + Qwik Carousel - Qwik Checkbox + Qwik Checkbox - Qwik Clipboard + Qwik Clipboard - Qwik DatePicker + Qwik DatePicker - Qwik Drawer + Qwik Drawer - Qwik Dropdown + Qwik Dropdown - Qwik Footer + Qwik Footer - Qwik HR + Qwik HR - Qwik Heading + Qwik Heading - Qwik Input + Qwik Input - Qwik Jumbotron + Qwik Jumbotron - Qwik Kbd + Qwik Kbd - Qwik Link + Qwik Link - Qwik List + Qwik List - Qwik ListGroup + Qwik ListGroup - Qwik Modal + Qwik Modal - Qwik Navbar + Qwik Navbar - Qwik Pagination + Qwik Pagination - Qwik ProgressBar + Qwik ProgressBar - Qwik Radio + Qwik Radio - Qwik Range + Qwik Range - Qwik Rating + Qwik Rating - Qwik Select + Qwik Select - Qwik Sidebar + Qwik Sidebar - Qwik Spinner + Qwik Spinner - Qwik Table + Qwik Table - Qwik Tabs + Qwik Tabs - Qwik Textarea + Qwik Textarea - Qwik Timeline + Qwik Timeline - Qwik ToastList + Qwik ToastList - Qwik Toggle + Qwik Toggle - Qwik Tooltip + Qwik Tooltip diff --git a/packages/lib/package.json b/packages/lib/package.json index bdd18b6c..2375d6f9 100644 --- a/packages/lib/package.json +++ b/packages/lib/package.json @@ -1,6 +1,6 @@ { "name": "flowbite-qwik", - "version": "0.35.1", + "version": "0.35.2", "description": "Unofficial Qwik components built for Flowbite and Tailwind CSS", "keywords": [ "design-system", diff --git a/packages/lib/src/components/Alert/Alert.tsx b/packages/lib/src/components/Alert/Alert.tsx index 41d4e7c8..53c6e9e9 100644 --- a/packages/lib/src/components/Alert/Alert.tsx +++ b/packages/lib/src/components/Alert/Alert.tsx @@ -1,8 +1,9 @@ -import { Component, component$, JSXOutput, PropsOf, Slot } from '@builder.io/qwik' +import { Component, component$, JSXOutput, PropsOf, Slot, useComputed$ } from '@builder.io/qwik' import { twMerge } from 'tailwind-merge' import clsx from 'clsx' import type { IconProps } from 'flowbite-qwik-icons' import { IconCloseSolid } from 'flowbite-qwik-icons' +import { useFlowbiteThemable } from '../FlowbiteThemable' type AlertColor = | 'info' @@ -74,12 +75,15 @@ const AlertColorsClasses: Record = { } export const Alert = component$( - ({ additionalContent, class: className, color = 'info', icon: Icon, onDismiss$, rounded = true, withBorderAccent, ...attrs }) => { + ({ additionalContent, class: className, color, icon: Icon, onDismiss$, rounded = true, withBorderAccent, ...attrs }) => { + const { themeName } = useFlowbiteThemable() + + const internalColor = useComputed$(() => color ?? (AlertColorsClasses.hasOwnProperty(themeName.value) ? (themeName.value as AlertColor) : 'info')) return (
( {onDismiss$ && ( - )} + diff --git a/packages/lib/src/components/Sidebar/SidebarCollapse.tsx b/packages/lib/src/components/Sidebar/SidebarCollapse.tsx index a3db1c78..7725041f 100644 --- a/packages/lib/src/components/Sidebar/SidebarCollapse.tsx +++ b/packages/lib/src/components/Sidebar/SidebarCollapse.tsx @@ -7,6 +7,7 @@ import { getChild } from '~/utils/children-inspector' import { useToggle } from '~/composables' import { twMerge } from 'tailwind-merge' import clsx from 'clsx' +import { useSidebarContext } from '~/components/Sidebar/composables/use-sidebar-context' type SidebarCollapseProps = PropsOf<'div'> & { label: string @@ -31,6 +32,7 @@ export const SidebarCollapse: FunctionComponent = ({ child export const InternalSidebarCollapse = component$(({ label, opened = false, icon, class: className }) => { const { value: isOpen, toggle$ } = useToggle(opened) const id = useId() + const { theme } = useSidebarContext() return (
  • @@ -39,19 +41,14 @@ export const InternalSidebarCollapse = component$(({ label tag="button" onClick$={toggle$} id={`flowbite-sidebar-collapse-${id}`} - class={twMerge('font-medium', clsx(className))} + class={twMerge('flex gap-1 font-medium', clsx(className), clsx(theme.value?.collapse?.main))} > {label} - + diff --git a/packages/lib/src/components/Sidebar/SidebarCta.tsx b/packages/lib/src/components/Sidebar/SidebarCta.tsx index 0d02fba3..66e709bb 100644 --- a/packages/lib/src/components/Sidebar/SidebarCta.tsx +++ b/packages/lib/src/components/Sidebar/SidebarCta.tsx @@ -6,17 +6,17 @@ type SidebarCtaProps = { export const SidebarCta = component$(({ onClose$ }) => { return ( -
  • - - - -
    • - ) - }, -) +export const SidebarItem = component$((attrs) => { + return ( +
  • + + + +
    • + ) +}) export const InnerSidebarItem = component$( - ({ tag: Tag = 'a', class: classNames, activeClass, href, isCollapse, icon: Icon, onClick$, ...attrs }) => { - const InternalTag = href ? Tag : 'button' + ({ tag: Tag = 'a', class: classNames, href, isCollapse, icon: Icon, onClick$, ...attrs }) => { + const { theme } = useSidebarContext() - const { setIsOpen } = useSidebarOpen() + const InternalTag = href ? Tag : 'button' return ( ( class={twMerge( 'group flex w-full items-center rounded-lg p-2 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700', isCollapse ? 'pl-11' : '', + clsx(theme.value?.item?.main), clsx(classNames), )} // @ts-expect-error fine - activeClass={twMerge('bg-gray-200 dark:bg-gray-600', clsx(activeClass))} - onClick$={() => { - if (href) setIsOpen(false) - onClick$?.() - }} + activeClass={twMerge('bg-gray-200 dark:bg-gray-600', clsx(theme.value?.item?.active))} + onClick$={onClick$} > {!!Icon && !isCollapse && ( diff --git a/packages/lib/src/components/Sidebar/composables/use-open-sidebar.tsx b/packages/lib/src/components/Sidebar/composables/use-open-sidebar.tsx deleted file mode 100644 index af88544e..00000000 --- a/packages/lib/src/components/Sidebar/composables/use-open-sidebar.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { $, createContextId, useComputed$, useContext } from '@builder.io/qwik' - -type SidebarContextProps = { isOpen: boolean } -export const sidebarContext = createContextId('FLOWBITE_QWIK_SIDEBAR_CONTEXT') - -export function useSidebarOpen() { - const state = useContext(sidebarContext) - - const isOpen = useComputed$(() => state.isOpen) - const setIsOpen = $((value: boolean) => { - state.isOpen = value - }) - - return { - isOpen, - setIsOpen, - } -} diff --git a/packages/lib/src/components/Sidebar/composables/use-sidebar-context.tsx b/packages/lib/src/components/Sidebar/composables/use-sidebar-context.tsx new file mode 100644 index 00000000..462b6ce8 --- /dev/null +++ b/packages/lib/src/components/Sidebar/composables/use-sidebar-context.tsx @@ -0,0 +1,15 @@ +import { createContextId, useComputed$, useContext } from '@builder.io/qwik' +import { SidebarTheme } from '~/components/Sidebar/Sidebar' + +type SidebarContextProps = { theme?: SidebarTheme } +export const sidebarContext = createContextId('FLOWBITE_QWIK_SIDEBAR_CONTEXT') + +export function useSidebarContext() { + const state = useContext(sidebarContext) + + const theme = useComputed$(() => state.theme) + + return { + theme, + } +} diff --git a/packages/lib/src/components/Sidebar/index.ts b/packages/lib/src/components/Sidebar/index.ts index 31e711f4..7aaa98a6 100644 --- a/packages/lib/src/components/Sidebar/index.ts +++ b/packages/lib/src/components/Sidebar/index.ts @@ -4,8 +4,6 @@ import { SidebarItemGroup } from './SidebarItemGroup' import { SidebarCollapse } from './SidebarCollapse' import { SidebarCta } from './SidebarCta' -export { sidebarContext, useSidebarOpen } from './composables/use-open-sidebar' - export const Sidebar = Object.assign(SidebarRoot, { Item: SidebarItem, ItemGroup: SidebarItemGroup, diff --git a/packages/lib/src/components/Tooltip/Tooltip.tsx b/packages/lib/src/components/Tooltip/Tooltip.tsx index 5a3e61f2..87cdb6ed 100644 --- a/packages/lib/src/components/Tooltip/Tooltip.tsx +++ b/packages/lib/src/components/Tooltip/Tooltip.tsx @@ -1,55 +1,62 @@ -import { PropsOf, Slot, component$, useSignal } from '@builder.io/qwik' +import { $, ClassList, PropsOf, Slot, component$, useSignal } from '@builder.io/qwik' import { Placement } from '@floating-ui/dom' import { TooltipStyle } from './tooltip-types' import { FloatingTrigger } from '../Floating/floating-types' import { RenderFloatingArrow, RenderFloatingElement } from '../Floating/Floating' import { useFloating } from '~/composables/use-floating' +import { twMerge } from 'tailwind-merge' +import clsx from 'clsx' +import { useDocumentOuterClick } from '~/composables' + +type TooltipTheme = { + element?: ClassList + arrow?: ClassList +} type TooltipProps = PropsOf<'div'> & { placement?: Placement style?: TooltipStyle trigger?: FloatingTrigger noArrow?: boolean + theme?: TooltipTheme } -export const Tooltip = component$(({ placement = 'top', class: className, trigger = 'hover', style = 'auto', noArrow = false }) => { - const isVisible = useSignal(false) - const { floatingRef, arrowRef, triggerRef } = useFloating(placement, trigger, noArrow, isVisible) +export const Tooltip = component$( + ({ placement = 'top', class: className, trigger = 'hover', style = 'auto', noArrow = false, theme }) => { + const isVisible = useSignal(false) + const { floatingRef, arrowRef, triggerRef } = useFloating(placement, trigger, noArrow, isVisible) + + useDocumentOuterClick( + [triggerRef], + $(() => { + isVisible.value = false + }), + isVisible, + ) - return ( - <> -
    - -
    + return ( + <> +
    + +
    - - + + - {!noArrow && ( - - )} - - - ) -}) + {!noArrow && } + + + ) + }, +) diff --git a/packages/lib/src/composables/use-floating.ts b/packages/lib/src/composables/use-floating.ts index 81bb01cd..cb5cecc2 100644 --- a/packages/lib/src/composables/use-floating.ts +++ b/packages/lib/src/composables/use-floating.ts @@ -2,26 +2,11 @@ import { $, Signal, useComputed$, useSignal, useVisibleTask$ } from '@builder.io import { useDocumentOuterClick } from './use-outer-click' import { computePosition, arrow, flip, shift, offset, Placement, autoUpdate } from '@floating-ui/dom' -export function useFloating(placement: Placement = 'top', trigger = 'hover', noArrow = false, isVisible: Signal) { +export function useFloating(internalPlacement: Placement = 'top', trigger = 'hover', noArrow = false, isVisible: Signal) { const floatingRef = useSignal() const arrowRef = useSignal() const triggerRef = useSignal() - const leftPosition = useSignal(0) - const topPosition = useSignal(0) - - const arrowLeftPosition = useSignal() - const arrowTopPosition = useSignal() - - const staticSide = useComputed$(() => { - return { - top: 'bottom', - right: 'left', - bottom: 'top', - left: 'right', - }[placement.split('-')[0]] as 'top' | 'right' | 'bottom' | 'left' - }) - const set$ = $((val: boolean) => { isVisible.value = val }) @@ -72,26 +57,34 @@ export function useFloating(placement: Placement = 'top', trigger = 'hover', noA if (!floatingRef.value || !triggerRef.value) return computePosition(triggerRef.value, floatingRef.value, { - placement, + placement: internalPlacement, middleware: [ + flip(), + shift(), !noArrow && !!arrowRef.value && arrow({ element: arrowRef.value, }), - flip(), - shift(), + offset(8), ], - }).then(({ x, y, middlewareData }) => { + }).then(({ x, y, middlewareData, placement }) => { if (floatingRef.value) { floatingRef.value.style.left = `${x}px` floatingRef.value.style.top = `${y}px` } if (arrowRef.value) { + const staticSide = { + top: 'bottom', + right: 'left', + bottom: 'top', + left: 'right', + }[placement.split('-')[0]] as 'top' | 'bottom' | 'left' | 'right' + arrowRef.value.style.left = `${middlewareData.arrow?.x}px` arrowRef.value.style.top = `${middlewareData.arrow?.y}px` - arrowRef.value.style[staticSide.value] = '-4px' + arrowRef.value.style[staticSide] = '-4px' } }) } @@ -106,11 +99,6 @@ export function useFloating(placement: Placement = 'top', trigger = 'hover', noA ) return { - leftPosition, - topPosition, - arrowLeftPosition, - arrowTopPosition, - staticSide, floatingRef, arrowRef, triggerRef, diff --git a/packages/lib/src/scripts/do-readme-components.ts b/packages/lib/src/scripts/do-readme-components.ts index b68a076c..f0ddfe1a 100644 --- a/packages/lib/src/scripts/do-readme-components.ts +++ b/packages/lib/src/scripts/do-readme-components.ts @@ -79,7 +79,7 @@ export function generate() { (comp: string) => ` - Qwik ${comp} + Qwik ${comp} `, )