From d8595e9db93a3728dadd561cfa9de6f3e7e410bd Mon Sep 17 00:00:00 2001 From: "Max G." Date: Fri, 20 Dec 2024 09:49:06 +0100 Subject: [PATCH 01/14] init --- src/lib/componentRegistry.types.ts | 40 +++- .../breadcrumbs/breadcrumb-01.todo.svelte | 0 .../breadcrumbs/breadcrumb-02.todo.svelte | 0 .../breadcrumbs/breadcrumb-03.todo.svelte | 0 .../breadcrumbs/breadcrumb-04.todo.svelte | 0 .../breadcrumbs/breadcrumb-05.todo.svelte | 0 .../breadcrumbs/breadcrumb-06.todo.svelte | 0 .../breadcrumbs/breadcrumb-07.todo.svelte | 0 .../breadcrumbs/breadcrumb-08.todo.svelte | 0 .../paginations/pagination-01.todo.svelte | 0 .../paginations/pagination-02.todo.svelte | 0 .../paginations/pagination-03.todo.svelte | 0 .../paginations/pagination-04.todo.svelte | 0 .../paginations/pagination-05.todo.svelte | 0 .../paginations/pagination-06.todo.svelte | 0 .../paginations/pagination-07.todo.svelte | 0 .../paginations/pagination-08.todo.svelte | 0 .../paginations/pagination-09.todo.svelte | 0 .../paginations/pagination-10.todo.svelte | 0 .../paginations/pagination-11.todo.svelte | 0 .../paginations/pagination-12.todo.svelte | 0 src/lib/components/ui/pagination/index.ts | 27 +++ .../ui/pagination/pagination-content.svelte | 17 ++ .../ui/pagination/pagination-ellipsis.svelte | 24 ++ .../ui/pagination/pagination-item.svelte | 14 ++ .../ui/pagination/pagination-link.svelte | 40 ++++ .../pagination/pagination-next-button.svelte | 27 +++ .../pagination/pagination-prev-button.svelte | 27 +++ .../ui/pagination/pagination.svelte | 27 +++ src/lib/config/routes.ts | 218 ++++++++++-------- src/routes/+page.svelte | 2 +- 31 files changed, 359 insertions(+), 104 deletions(-) create mode 100644 src/lib/components/breadcrumbs/breadcrumb-01.todo.svelte create mode 100644 src/lib/components/breadcrumbs/breadcrumb-02.todo.svelte create mode 100644 src/lib/components/breadcrumbs/breadcrumb-03.todo.svelte create mode 100644 src/lib/components/breadcrumbs/breadcrumb-04.todo.svelte create mode 100644 src/lib/components/breadcrumbs/breadcrumb-05.todo.svelte create mode 100644 src/lib/components/breadcrumbs/breadcrumb-06.todo.svelte create mode 100644 src/lib/components/breadcrumbs/breadcrumb-07.todo.svelte create mode 100644 src/lib/components/breadcrumbs/breadcrumb-08.todo.svelte create mode 100644 src/lib/components/paginations/pagination-01.todo.svelte create mode 100644 src/lib/components/paginations/pagination-02.todo.svelte create mode 100644 src/lib/components/paginations/pagination-03.todo.svelte create mode 100644 src/lib/components/paginations/pagination-04.todo.svelte create mode 100644 src/lib/components/paginations/pagination-05.todo.svelte create mode 100644 src/lib/components/paginations/pagination-06.todo.svelte create mode 100644 src/lib/components/paginations/pagination-07.todo.svelte create mode 100644 src/lib/components/paginations/pagination-08.todo.svelte create mode 100644 src/lib/components/paginations/pagination-09.todo.svelte create mode 100644 src/lib/components/paginations/pagination-10.todo.svelte create mode 100644 src/lib/components/paginations/pagination-11.todo.svelte create mode 100644 src/lib/components/paginations/pagination-12.todo.svelte create mode 100644 src/lib/components/ui/pagination/index.ts create mode 100644 src/lib/components/ui/pagination/pagination-content.svelte create mode 100644 src/lib/components/ui/pagination/pagination-ellipsis.svelte create mode 100644 src/lib/components/ui/pagination/pagination-item.svelte create mode 100644 src/lib/components/ui/pagination/pagination-link.svelte create mode 100644 src/lib/components/ui/pagination/pagination-next-button.svelte create mode 100644 src/lib/components/ui/pagination/pagination-prev-button.svelte create mode 100644 src/lib/components/ui/pagination/pagination.svelte diff --git a/src/lib/componentRegistry.types.ts b/src/lib/componentRegistry.types.ts index 9b02c13..5c6fbca 100644 --- a/src/lib/componentRegistry.types.ts +++ b/src/lib/componentRegistry.types.ts @@ -2,7 +2,7 @@ /** * !!!!!!!!!! * This file is auto-generated. Do not edit manually - * Last generated at: 12/19/2024, 11:23:18 AM + * Last generated at: 12/20/2024, 9:47:23 AM * @version 0.0.1 * !!!!!!!!!! */ @@ -114,6 +114,19 @@ export const OUI_DIRECTORIES = { 'banner-11.svelte' ] }, + BREADCRUMBS: { + directory: 'breadcrumbs', + components: [ + 'breadcrumb-01.todo.svelte', + 'breadcrumb-02.todo.svelte', + 'breadcrumb-03.todo.svelte', + 'breadcrumb-04.todo.svelte', + 'breadcrumb-05.todo.svelte', + 'breadcrumb-06.todo.svelte', + 'breadcrumb-07.todo.svelte', + 'breadcrumb-08.todo.svelte' + ] + }, BUTTONS: { directory: 'buttons', components: [ @@ -333,6 +346,23 @@ export const OUI_DIRECTORIES = { 'notification-23.svelte' ] }, + PAGINATIONS: { + directory: 'paginations', + components: [ + 'pagination-01.todo.svelte', + 'pagination-02.todo.svelte', + 'pagination-03.todo.svelte', + 'pagination-04.todo.svelte', + 'pagination-05.todo.svelte', + 'pagination-06.todo.svelte', + 'pagination-07.todo.svelte', + 'pagination-08.todo.svelte', + 'pagination-09.todo.svelte', + 'pagination-10.todo.svelte', + 'pagination-11.todo.svelte', + 'pagination-12.todo.svelte' + ] + }, POPOVERS: { directory: 'popovers', components: [ @@ -496,6 +526,8 @@ export type OUIAlertsComponents = (typeof OUI_DIRECTORIES)['ALERTS']['components export type OUIAvatarsComponents = (typeof OUI_DIRECTORIES)['AVATARS']['components'][number]; export type OUIBadgesComponents = (typeof OUI_DIRECTORIES)['BADGES']['components'][number]; export type OUIBannersComponents = (typeof OUI_DIRECTORIES)['BANNERS']['components'][number]; +export type OUIBreadcrumbsComponents = + (typeof OUI_DIRECTORIES)['BREADCRUMBS']['components'][number]; export type OUIButtonsComponents = (typeof OUI_DIRECTORIES)['BUTTONS']['components'][number]; export type OUICheckboxesComponents = (typeof OUI_DIRECTORIES)['CHECKBOXES']['components'][number]; export type OUIDialogsComponents = (typeof OUI_DIRECTORIES)['DIALOGS']['components'][number]; @@ -504,6 +536,8 @@ export type OUIHovercardsComponents = (typeof OUI_DIRECTORIES)['HOVER-CARDS']['c export type OUIInputsComponents = (typeof OUI_DIRECTORIES)['INPUTS']['components'][number]; export type OUINotificationsComponents = (typeof OUI_DIRECTORIES)['NOTIFICATIONS']['components'][number]; +export type OUIPaginationsComponents = + (typeof OUI_DIRECTORIES)['PAGINATIONS']['components'][number]; export type OUIPopoversComponents = (typeof OUI_DIRECTORIES)['POPOVERS']['components'][number]; export type OUIRadiosComponents = (typeof OUI_DIRECTORIES)['RADIOS']['components'][number]; export type OUISlidersComponents = (typeof OUI_DIRECTORIES)['SLIDERS']['components'][number]; @@ -518,6 +552,7 @@ export type OUIComponent = Prettify< | OUIAvatarsComponents | OUIBadgesComponents | OUIBannersComponents + | OUIBreadcrumbsComponents | OUIButtonsComponents | OUICheckboxesComponents | OUIDialogsComponents @@ -525,6 +560,7 @@ export type OUIComponent = Prettify< | OUIHovercardsComponents | OUIInputsComponents | OUINotificationsComponents + | OUIPaginationsComponents | OUIPopoversComponents | OUIRadiosComponents | OUISlidersComponents @@ -540,6 +576,7 @@ export interface OUIDirectoryToComponent { avatars: OUIAvatarsComponents; badges: OUIBadgesComponents; banners: OUIBannersComponents; + breadcrumbs: OUIBreadcrumbsComponents; buttons: OUIButtonsComponents; checkboxes: OUICheckboxesComponents; dialogs: OUIDialogsComponents; @@ -547,6 +584,7 @@ export interface OUIDirectoryToComponent { 'hover-cards': OUIHovercardsComponents; inputs: OUIInputsComponents; notifications: OUINotificationsComponents; + paginations: OUIPaginationsComponents; popovers: OUIPopoversComponents; radios: OUIRadiosComponents; sliders: OUISlidersComponents; diff --git a/src/lib/components/breadcrumbs/breadcrumb-01.todo.svelte b/src/lib/components/breadcrumbs/breadcrumb-01.todo.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/components/breadcrumbs/breadcrumb-02.todo.svelte b/src/lib/components/breadcrumbs/breadcrumb-02.todo.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/components/breadcrumbs/breadcrumb-03.todo.svelte b/src/lib/components/breadcrumbs/breadcrumb-03.todo.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/components/breadcrumbs/breadcrumb-04.todo.svelte b/src/lib/components/breadcrumbs/breadcrumb-04.todo.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/components/breadcrumbs/breadcrumb-05.todo.svelte b/src/lib/components/breadcrumbs/breadcrumb-05.todo.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/components/breadcrumbs/breadcrumb-06.todo.svelte b/src/lib/components/breadcrumbs/breadcrumb-06.todo.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/components/breadcrumbs/breadcrumb-07.todo.svelte b/src/lib/components/breadcrumbs/breadcrumb-07.todo.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/components/breadcrumbs/breadcrumb-08.todo.svelte b/src/lib/components/breadcrumbs/breadcrumb-08.todo.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/components/paginations/pagination-01.todo.svelte b/src/lib/components/paginations/pagination-01.todo.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/components/paginations/pagination-02.todo.svelte b/src/lib/components/paginations/pagination-02.todo.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/components/paginations/pagination-03.todo.svelte b/src/lib/components/paginations/pagination-03.todo.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/components/paginations/pagination-04.todo.svelte b/src/lib/components/paginations/pagination-04.todo.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/components/paginations/pagination-05.todo.svelte b/src/lib/components/paginations/pagination-05.todo.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/components/paginations/pagination-06.todo.svelte b/src/lib/components/paginations/pagination-06.todo.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/components/paginations/pagination-07.todo.svelte b/src/lib/components/paginations/pagination-07.todo.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/components/paginations/pagination-08.todo.svelte b/src/lib/components/paginations/pagination-08.todo.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/components/paginations/pagination-09.todo.svelte b/src/lib/components/paginations/pagination-09.todo.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/components/paginations/pagination-10.todo.svelte b/src/lib/components/paginations/pagination-10.todo.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/components/paginations/pagination-11.todo.svelte b/src/lib/components/paginations/pagination-11.todo.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/components/paginations/pagination-12.todo.svelte b/src/lib/components/paginations/pagination-12.todo.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/components/ui/pagination/index.ts b/src/lib/components/ui/pagination/index.ts new file mode 100644 index 0000000..57233d7 --- /dev/null +++ b/src/lib/components/ui/pagination/index.ts @@ -0,0 +1,27 @@ +/* eslint-disable perfectionist/sort-named-exports */ + +import Content from './pagination-content.svelte'; +import Ellipsis from './pagination-ellipsis.svelte'; +import Item from './pagination-item.svelte'; +import Link from './pagination-link.svelte'; +import NextButton from './pagination-next-button.svelte'; +import PrevButton from './pagination-prev-button.svelte'; +import Root from './pagination.svelte'; + +export { + Root, + Content, + Item, + Link, + PrevButton, + NextButton, + Ellipsis, + // + Root as Pagination, + Content as PaginationContent, + Item as PaginationItem, + Link as PaginationLink, + PrevButton as PaginationPrevButton, + NextButton as PaginationNextButton, + Ellipsis as PaginationEllipsis +}; diff --git a/src/lib/components/ui/pagination/pagination-content.svelte b/src/lib/components/ui/pagination/pagination-content.svelte new file mode 100644 index 0000000..4f2c003 --- /dev/null +++ b/src/lib/components/ui/pagination/pagination-content.svelte @@ -0,0 +1,17 @@ + + + diff --git a/src/lib/components/ui/pagination/pagination-ellipsis.svelte b/src/lib/components/ui/pagination/pagination-ellipsis.svelte new file mode 100644 index 0000000..f4f21e7 --- /dev/null +++ b/src/lib/components/ui/pagination/pagination-ellipsis.svelte @@ -0,0 +1,24 @@ + + + diff --git a/src/lib/components/ui/pagination/pagination-item.svelte b/src/lib/components/ui/pagination/pagination-item.svelte new file mode 100644 index 0000000..c9a9015 --- /dev/null +++ b/src/lib/components/ui/pagination/pagination-item.svelte @@ -0,0 +1,14 @@ + + +
  • + {@render children?.()} +
    • diff --git a/src/lib/components/ui/pagination/pagination-link.svelte b/src/lib/components/ui/pagination/pagination-link.svelte new file mode 100644 index 0000000..89e2c52 --- /dev/null +++ b/src/lib/components/ui/pagination/pagination-link.svelte @@ -0,0 +1,40 @@ + + +{#snippet Fallback()} + {page.value} +{/snippet} + + diff --git a/src/lib/components/ui/pagination/pagination-next-button.svelte b/src/lib/components/ui/pagination/pagination-next-button.svelte new file mode 100644 index 0000000..e23a994 --- /dev/null +++ b/src/lib/components/ui/pagination/pagination-next-button.svelte @@ -0,0 +1,27 @@ + + +{#snippet Fallback()} + Next + +{/snippet} + + diff --git a/src/lib/components/ui/pagination/pagination-prev-button.svelte b/src/lib/components/ui/pagination/pagination-prev-button.svelte new file mode 100644 index 0000000..51f162d --- /dev/null +++ b/src/lib/components/ui/pagination/pagination-prev-button.svelte @@ -0,0 +1,27 @@ + + +{#snippet Fallback()} + Previous + +{/snippet} + + diff --git a/src/lib/components/ui/pagination/pagination.svelte b/src/lib/components/ui/pagination/pagination.svelte new file mode 100644 index 0000000..35ab7ce --- /dev/null +++ b/src/lib/components/ui/pagination/pagination.svelte @@ -0,0 +1,27 @@ + + + diff --git a/src/lib/config/routes.ts b/src/lib/config/routes.ts index 25c2c44..9173094 100644 --- a/src/lib/config/routes.ts +++ b/src/lib/config/routes.ts @@ -1,3 +1,4 @@ +/* eslint-disable perfectionist/sort-objects */ import type { OUIDirectory } from '$lib/componentRegistry.types'; type MetadataVariables = { @@ -19,70 +20,28 @@ type ComponentRoutes = { title: string; }; label: string; - order: number; path: string; seo: SEOMetadata; }; export const COMPONENT_ROUTES = { - accordions: { - componentDirectory: ['accordions'], - header: { - description: - 'A growing collection of ${count} accordion components built with Svelte and TailwindCSS.', - title: 'Accordion' - }, - label: 'Accordions', - order: 8, - path: 'accordions', - seo: { - description: - 'An extensive collection of copy-and-paste Accordion components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', - keywords: 'accordion, collapsible, component, svelte, tailwindcss', - title: 'Accordions', - twitterDescription: - 'An extensive collection of copy-and-paste Accordion components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', - twitterTitle: 'Accordions' - } - }, - alertsNotificationsBanners: { - componentDirectory: ['alerts', 'notifications', 'banners'], - header: { - description: - 'A growing collection of ${count} alert, notification, and banner components built with Svelte and TailwindCSS.', - title: 'Alert, Notification, and Banner' - }, - label: 'Alerts, Notifications, and Banners', - order: 6, - path: 'alerts-notifications-banners', - seo: { - description: - 'An extensive collection of copy-and-paste Alert, Notification, and Banner components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', - keywords: 'alert, notification, banner, component, svelte, tailwindcss', - title: 'Alerts, Notifications, and Banners', - twitterDescription: - 'An extensive collection of copy-and-paste Alert, Notification, and Banner components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', - twitterTitle: 'Alerts, Notifications, and Banners' - } - }, - avatarAndBadges: { - componentDirectory: ['avatars', 'badges'], + inputsTextareas: { + componentDirectory: ['inputs', 'textareas'], header: { description: - 'A growing collection of ${count} avatar and badge components built with Svelte and TailwindCSS.', - title: 'Avatar and Badges' + 'A growing collection of over ${count} input and textarea components built with Svelte and TailwindCSS.', + title: 'Input' }, - label: 'Avatar and Badges', - order: 11, - path: 'avatar-badges', + label: 'Inputs', + path: 'inputs', seo: { description: - 'An extensive collection of copy-and-paste Tooltip and Hover Card components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', - keywords: 'avatar, badge, component, svelte, tailwindcss', - title: 'Avatar and Badges', + 'An extensive collection of copy-and-paste Input and Textarea components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', + keywords: 'input, textarea, component, svelte, tailwindcss', + title: 'Inputs and Textareas', twitterDescription: - 'An extensive collection of copy-and-paste Avatar and Badge components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', - twitterTitle: 'Avatar and Badges' + 'An extensive collection of copy-and-paste Input and Textarea components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', + twitterTitle: 'Inputs and Textareas' } }, buttons: { @@ -93,7 +52,6 @@ export const COMPONENT_ROUTES = { title: 'Button' }, label: 'Buttons', - order: 2, path: 'buttons', seo: { description: @@ -105,6 +63,7 @@ export const COMPONENT_ROUTES = { twitterTitle: 'Buttons' } }, + checkboxesRadiosSwitches: { componentDirectory: ['checkboxes', 'radios', 'switches'], header: { @@ -113,7 +72,6 @@ export const COMPONENT_ROUTES = { title: 'Checkbox' }, label: 'Checkboxes, Radios, and Switches', - order: 3, path: 'checks-radios-switches', seo: { description: @@ -125,6 +83,49 @@ export const COMPONENT_ROUTES = { twitterTitle: 'Checkboxes, Radios, and Switches' } }, + /* + TODO: Add Selects + */ + + sliders: { + componentDirectory: ['sliders'], + header: { + description: + 'A growing collection of over ${count} slider components built with Svelte and TailwindCSS.', + title: 'Slider' + }, + label: 'Sliders', + path: 'sliders', + seo: { + description: + 'An extensive collection of copy-and-paste Slider components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', + keywords: 'slider, component, svelte, tailwindcss', + title: 'Sliders', + twitterDescription: + 'An extensive collection of copy-and-paste Slider components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', + twitterTitle: 'Sliders' + } + }, + + alertsNotificationsBanners: { + componentDirectory: ['alerts', 'notifications', 'banners'], + header: { + description: + 'A growing collection of ${count} alert, notification, and banner components built with Svelte and TailwindCSS.', + title: 'Alert, Notification, and Banner' + }, + label: 'Alerts, Notifications, and Banners', + path: 'alerts-notifications-banners', + seo: { + description: + 'An extensive collection of copy-and-paste Alert, Notification, and Banner components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', + keywords: 'alert, notification, banner, component, svelte, tailwindcss', + title: 'Alerts, Notifications, and Banners', + twitterDescription: + 'An extensive collection of copy-and-paste Alert, Notification, and Banner components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', + twitterTitle: 'Alerts, Notifications, and Banners' + } + }, dialogs: { componentDirectory: ['dialogs'], header: { @@ -133,7 +134,6 @@ export const COMPONENT_ROUTES = { title: 'Dialog' }, label: 'Dialogs', - order: 7, path: 'dialogs', seo: { description: @@ -145,6 +145,44 @@ export const COMPONENT_ROUTES = { twitterTitle: 'Dialogs' } }, + accordions: { + componentDirectory: ['accordions'], + header: { + description: + 'A growing collection of ${count} accordion components built with Svelte and TailwindCSS.', + title: 'Accordion' + }, + label: 'Accordions', + path: 'accordions', + seo: { + description: + 'An extensive collection of copy-and-paste Accordion components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', + keywords: 'accordion, collapsible, component, svelte, tailwindcss', + title: 'Accordions', + twitterDescription: + 'An extensive collection of copy-and-paste Accordion components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', + twitterTitle: 'Accordions' + } + }, + tooltipsHovercards: { + componentDirectory: ['tooltips', 'hover-cards'], + header: { + description: + 'A growing collection of ${count} tooltip and hover card components built with Svelte and TailwindCSS.', + title: 'Tooltip' + }, + label: 'Tooltips', + path: 'tooltips', + seo: { + description: + 'An extensive collection of copy-and-paste Tooltip and Hover Card components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', + keywords: 'tooltip, hover card, component, svelte, tailwindcss', + title: 'Tooltips and Hover Cards', + twitterDescription: + 'An extensive collection of copy-and-paste Tooltip and Hover Card components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', + twitterTitle: 'Tooltips and Hover Cards' + } + }, dropdownsPopovers: { componentDirectory: ['dropdowns', 'popovers'], header: { @@ -153,7 +191,6 @@ export const COMPONENT_ROUTES = { title: 'Dropdown and Popover' }, label: 'Dropdowns and Popovers', - order: 10, path: 'dropdowns-popovers', seo: { description: @@ -165,44 +202,23 @@ export const COMPONENT_ROUTES = { twitterTitle: 'Dropdowns and Popovers' } }, - inputsTextareas: { - componentDirectory: ['inputs', 'textareas'], - header: { - description: - 'A growing collection of over ${count} input and textarea components built with Svelte and TailwindCSS.', - title: 'Input' - }, - label: 'Inputs', - order: 1, - path: 'inputs', - seo: { - description: - 'An extensive collection of copy-and-paste Input and Textarea components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', - keywords: 'input, textarea, component, svelte, tailwindcss', - title: 'Inputs and Textareas', - twitterDescription: - 'An extensive collection of copy-and-paste Input and Textarea components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', - twitterTitle: 'Inputs and Textareas' - } - }, - sliders: { - componentDirectory: ['sliders'], + avatarAndBadges: { + componentDirectory: ['avatars', 'badges'], header: { description: - 'A growing collection of over ${count} slider components built with Svelte and TailwindCSS.', - title: 'Slider' + 'A growing collection of ${count} avatar and badge components built with Svelte and TailwindCSS.', + title: 'Avatar and Badges' }, - label: 'Sliders', - order: 5, - path: 'sliders', + label: 'Avatar and Badges', + path: 'avatar-badges', seo: { description: - 'An extensive collection of copy-and-paste Slider components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', - keywords: 'slider, component, svelte, tailwindcss', - title: 'Sliders', + 'An extensive collection of copy-and-paste Tooltip and Hover Card components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', + keywords: 'avatar, badge, component, svelte, tailwindcss', + title: 'Avatar and Badges', twitterDescription: - 'An extensive collection of copy-and-paste Slider components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', - twitterTitle: 'Sliders' + 'An extensive collection of copy-and-paste Avatar and Badge components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', + twitterTitle: 'Avatar and Badges' } }, tabs: { @@ -213,7 +229,6 @@ export const COMPONENT_ROUTES = { title: 'Tabs' }, label: 'Tabs', - order: 11, path: 'tabs', seo: { description: @@ -225,24 +240,23 @@ export const COMPONENT_ROUTES = { twitterTitle: 'Tabs' } }, - tooltipsHovercards: { - componentDirectory: ['tooltips', 'hover-cards'], + breadcrumbsAndPaginations: { + componentDirectory: ['breadcrumbs', 'paginations'], header: { description: - 'A growing collection of ${count} tooltip and hover card components built with Svelte and TailwindCSS.', - title: 'Tooltip' + 'A growing collection of ${count} breadcrumb and pagination components built with Svelte and TailwindCSS.', + title: 'Breadcrumb and Pagination' }, - label: 'Tooltips', - order: 9, - path: 'tooltips', + label: 'Breadcrumbs and Paginations', + path: 'breadcrumbs-paginations', seo: { description: - 'An extensive collection of copy-and-paste Tooltip and Hover Card components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', - keywords: 'tooltip, hover card, component, svelte, tailwindcss', - title: 'Tooltips and Hover Cards', + 'An extensive collection of copy-and-paste Breadcrumb and Pagination components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', + keywords: 'breadcrumb, pagination, component, svelte, tailwindcss', + title: 'Breadcrumbs and Paginations', twitterDescription: - 'An extensive collection of copy-and-paste Tooltip and Hover Card components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', - twitterTitle: 'Tooltips and Hover Cards' + 'An extensive collection of copy-and-paste Breadcrumb and Pagination components built with Svelte and TailwindCSS. Open-source and ready to drop into your projects.', + twitterTitle: 'Breadcrumbs and Paginations' } } } as const satisfies Record; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index c728a78..cee2d3a 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -78,7 +78,7 @@

    Latest components

    From 5b0f94efd1398e7fc339b40b7810c8ff0ebc558f Mon Sep 17 00:00:00 2001 From: "Max G." Date: Mon, 23 Dec 2024 12:32:55 +0100 Subject: [PATCH 13/14] feat: add pagination components 1-12 and update component registry --- src/lib/componentRegistry.types.ts | 26 ++-- .../paginations/pagination-01.svelte | 42 ++++++ .../paginations/pagination-01.todo.svelte | 0 .../paginations/pagination-02.svelte | 50 +++++++ .../paginations/pagination-02.todo.svelte | 0 .../paginations/pagination-03.svelte | 61 +++++++++ .../paginations/pagination-03.todo.svelte | 0 .../paginations/pagination-04.svelte | 50 +++++++ .../paginations/pagination-04.todo.svelte | 0 .../paginations/pagination-05.svelte | 46 +++++++ .../paginations/pagination-05.todo.svelte | 0 .../paginations/pagination-06.svelte | 78 +++++++++++ .../paginations/pagination-06.todo.svelte | 0 .../paginations/pagination-07.svelte | 112 +++++++++++++++ .../paginations/pagination-07.todo.svelte | 0 .../paginations/pagination-08.svelte | 115 ++++++++++++++++ .../paginations/pagination-08.todo.svelte | 0 .../paginations/pagination-09.svelte | 129 ++++++++++++++++++ .../paginations/pagination-09.todo.svelte | 0 .../paginations/pagination-10.svelte | 115 ++++++++++++++++ .../paginations/pagination-10.todo.svelte | 0 .../paginations/pagination-11.svelte | 99 ++++++++++++++ .../paginations/pagination-11.todo.svelte | 0 .../paginations/pagination-12.svelte | 97 +++++++++++++ .../paginations/pagination-12.todo.svelte | 0 25 files changed, 1007 insertions(+), 13 deletions(-) create mode 100644 src/lib/components/paginations/pagination-01.svelte delete mode 100644 src/lib/components/paginations/pagination-01.todo.svelte create mode 100644 src/lib/components/paginations/pagination-02.svelte delete mode 100644 src/lib/components/paginations/pagination-02.todo.svelte create mode 100644 src/lib/components/paginations/pagination-03.svelte delete mode 100644 src/lib/components/paginations/pagination-03.todo.svelte create mode 100644 src/lib/components/paginations/pagination-04.svelte delete mode 100644 src/lib/components/paginations/pagination-04.todo.svelte create mode 100644 src/lib/components/paginations/pagination-05.svelte delete mode 100644 src/lib/components/paginations/pagination-05.todo.svelte create mode 100644 src/lib/components/paginations/pagination-06.svelte delete mode 100644 src/lib/components/paginations/pagination-06.todo.svelte create mode 100644 src/lib/components/paginations/pagination-07.svelte delete mode 100644 src/lib/components/paginations/pagination-07.todo.svelte create mode 100644 src/lib/components/paginations/pagination-08.svelte delete mode 100644 src/lib/components/paginations/pagination-08.todo.svelte create mode 100644 src/lib/components/paginations/pagination-09.svelte delete mode 100644 src/lib/components/paginations/pagination-09.todo.svelte create mode 100644 src/lib/components/paginations/pagination-10.svelte delete mode 100644 src/lib/components/paginations/pagination-10.todo.svelte create mode 100644 src/lib/components/paginations/pagination-11.svelte delete mode 100644 src/lib/components/paginations/pagination-11.todo.svelte create mode 100644 src/lib/components/paginations/pagination-12.svelte delete mode 100644 src/lib/components/paginations/pagination-12.todo.svelte diff --git a/src/lib/componentRegistry.types.ts b/src/lib/componentRegistry.types.ts index b4a2760..b1446d9 100644 --- a/src/lib/componentRegistry.types.ts +++ b/src/lib/componentRegistry.types.ts @@ -2,7 +2,7 @@ /** * !!!!!!!!!! * This file is auto-generated. Do not edit manually - * Last generated at: 12/22/2024, 9:24:34 AM + * Last generated at: 12/23/2024, 12:32:27 PM * @version 0.0.1 * !!!!!!!!!! */ @@ -349,18 +349,18 @@ export const OUI_DIRECTORIES = { PAGINATIONS: { directory: 'paginations', components: [ - 'pagination-01.todo.svelte', - 'pagination-02.todo.svelte', - 'pagination-03.todo.svelte', - 'pagination-04.todo.svelte', - 'pagination-05.todo.svelte', - 'pagination-06.todo.svelte', - 'pagination-07.todo.svelte', - 'pagination-08.todo.svelte', - 'pagination-09.todo.svelte', - 'pagination-10.todo.svelte', - 'pagination-11.todo.svelte', - 'pagination-12.todo.svelte' + 'pagination-01.svelte', + 'pagination-02.svelte', + 'pagination-03.svelte', + 'pagination-04.svelte', + 'pagination-05.svelte', + 'pagination-06.svelte', + 'pagination-07.svelte', + 'pagination-08.svelte', + 'pagination-09.svelte', + 'pagination-10.svelte', + 'pagination-11.svelte', + 'pagination-12.svelte' ] }, POPOVERS: { diff --git a/src/lib/components/paginations/pagination-01.svelte b/src/lib/components/paginations/pagination-01.svelte new file mode 100644 index 0000000..868bc14 --- /dev/null +++ b/src/lib/components/paginations/pagination-01.svelte @@ -0,0 +1,42 @@ + + + + + + + + + + + + diff --git a/src/lib/components/paginations/pagination-01.todo.svelte b/src/lib/components/paginations/pagination-01.todo.svelte deleted file mode 100644 index e69de29..0000000 diff --git a/src/lib/components/paginations/pagination-02.svelte b/src/lib/components/paginations/pagination-02.svelte new file mode 100644 index 0000000..e1e7e31 --- /dev/null +++ b/src/lib/components/paginations/pagination-02.svelte @@ -0,0 +1,50 @@ + + + + + + + + + + + + diff --git a/src/lib/components/paginations/pagination-02.todo.svelte b/src/lib/components/paginations/pagination-02.todo.svelte deleted file mode 100644 index e69de29..0000000 diff --git a/src/lib/components/paginations/pagination-03.svelte b/src/lib/components/paginations/pagination-03.svelte new file mode 100644 index 0000000..89791ef --- /dev/null +++ b/src/lib/components/paginations/pagination-03.svelte @@ -0,0 +1,61 @@ + + + + + + + + + +

    + Page {currentPage} of{' '} + {totalPages} +

    +     + + + + +     +     diff --git a/src/lib/components/paginations/pagination-03.todo.svelte b/src/lib/components/paginations/pagination-03.todo.svelte deleted file mode 100644 index e69de29..0000000 diff --git a/src/lib/components/paginations/pagination-04.svelte b/src/lib/components/paginations/pagination-04.svelte new file mode 100644 index 0000000..00c68b3 --- /dev/null +++ b/src/lib/components/paginations/pagination-04.svelte @@ -0,0 +1,50 @@ + + + + + + + + + +

    + Page {currentPage} of{' '} + {totalPages} +

    +     + + + + +     +     diff --git a/src/lib/components/paginations/pagination-04.todo.svelte b/src/lib/components/paginations/pagination-04.todo.svelte deleted file mode 100644 index e69de29..0000000 diff --git a/src/lib/components/paginations/pagination-05.svelte b/src/lib/components/paginations/pagination-05.svelte new file mode 100644 index 0000000..1ff1b6b --- /dev/null +++ b/src/lib/components/paginations/pagination-05.svelte @@ -0,0 +1,46 @@ + + +
    +

    + Page {currentPage} of + {totalPages} +

    + + + + + + + + + + + + +
    diff --git a/src/lib/components/paginations/pagination-05.todo.svelte b/src/lib/components/paginations/pagination-05.todo.svelte deleted file mode 100644 index e69de29..0000000 diff --git a/src/lib/components/paginations/pagination-06.svelte b/src/lib/components/paginations/pagination-06.svelte new file mode 100644 index 0000000..eac1164 --- /dev/null +++ b/src/lib/components/paginations/pagination-06.svelte @@ -0,0 +1,78 @@ + + + + + + + + + + + {#if pagination.showLeftEllipsis} + + + + {/if} + + + {#each pagination.pages as page} + + + {page} + + + {/each} + + + {#if pagination.showRightEllipsis} + + + + {/if} + + + + + + + diff --git a/src/lib/components/paginations/pagination-06.todo.svelte b/src/lib/components/paginations/pagination-06.todo.svelte deleted file mode 100644 index e69de29..0000000 diff --git a/src/lib/components/paginations/pagination-07.svelte b/src/lib/components/paginations/pagination-07.svelte new file mode 100644 index 0000000..d8cf862 --- /dev/null +++ b/src/lib/components/paginations/pagination-07.svelte @@ -0,0 +1,112 @@ + + + + + + + + + + + + + + + + + + {#if pagination.showLeftEllipsis} + + + + {/if} + + + {#each pagination.pages as page} + + + {page} + + + {/each} + + + {#if pagination.showRightEllipsis} + + + + {/if} + + + + + + + + + + + + + + diff --git a/src/lib/components/paginations/pagination-07.todo.svelte b/src/lib/components/paginations/pagination-07.todo.svelte deleted file mode 100644 index e69de29..0000000 diff --git a/src/lib/components/paginations/pagination-08.svelte b/src/lib/components/paginations/pagination-08.svelte new file mode 100644 index 0000000..d7c8fa7 --- /dev/null +++ b/src/lib/components/paginations/pagination-08.svelte @@ -0,0 +1,115 @@ + + + + + + + svg]:opacity-50' + )} + href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`} + aria-label="Go to previous page" + aria-disabled={currentPage === 1 ? true : undefined} + role={currentPage === 1 ? 'link' : undefined} + > + + + + + {#if pagination.showLeftEllipsis} + + + + {/if} + + + {#each pagination.pages as page} + + + {page} + + + {/each} + + + {#if pagination.showRightEllipsis} + + + + {/if} + + + + svg]:opacity-50' + )} + href={currentPage === totalPages ? undefined : `#/page/${currentPage + 1}`} + aria-label="Go to next page" + aria-disabled={currentPage === totalPages ? true : undefined} + role={currentPage === totalPages ? 'link' : undefined} + > + + + + diff --git a/src/lib/components/paginations/pagination-08.todo.svelte b/src/lib/components/paginations/pagination-08.todo.svelte deleted file mode 100644 index e69de29..0000000 diff --git a/src/lib/components/paginations/pagination-09.svelte b/src/lib/components/paginations/pagination-09.svelte new file mode 100644 index 0000000..3e9e691 --- /dev/null +++ b/src/lib/components/paginations/pagination-09.svelte @@ -0,0 +1,129 @@ + + +
    + +

    + Page {currentPage} of + {totalPages} +

    + +
    + + + + + + + + + + + + + + + + {#if pagination.showLeftEllipsis} + + + + {/if} + + + {#each pagination.pages as page} + + + {page} + + + {/each} + + + {#if pagination.showRightEllipsis} + + + + {/if} + + + + + + + + +
    + +
    + +
    +
    diff --git a/src/lib/components/paginations/pagination-09.todo.svelte b/src/lib/components/paginations/pagination-09.todo.svelte deleted file mode 100644 index e69de29..0000000 diff --git a/src/lib/components/paginations/pagination-10.svelte b/src/lib/components/paginations/pagination-10.svelte new file mode 100644 index 0000000..5a2d63a --- /dev/null +++ b/src/lib/components/paginations/pagination-10.svelte @@ -0,0 +1,115 @@ + + +
    + +
    + + +
    + + +
    +

    + 1-25 of{' '} + 100 +

    +
    + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    diff --git a/src/lib/components/paginations/pagination-10.todo.svelte b/src/lib/components/paginations/pagination-10.todo.svelte deleted file mode 100644 index e69de29..0000000 diff --git a/src/lib/components/paginations/pagination-11.svelte b/src/lib/components/paginations/pagination-11.svelte new file mode 100644 index 0000000..0218fce --- /dev/null +++ b/src/lib/components/paginations/pagination-11.svelte @@ -0,0 +1,99 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/components/paginations/pagination-11.todo.svelte b/src/lib/components/paginations/pagination-11.todo.svelte deleted file mode 100644 index e69de29..0000000 diff --git a/src/lib/components/paginations/pagination-12.svelte b/src/lib/components/paginations/pagination-12.svelte new file mode 100644 index 0000000..faa31e9 --- /dev/null +++ b/src/lib/components/paginations/pagination-12.svelte @@ -0,0 +1,97 @@ + + +
    + +
    + + + + + + + + + + {#if pagination.showLeftEllipsis} + + + + {/if} + + + {#each pagination.pages as page} + + + {page} + + + {/each} + + + {#if pagination.showRightEllipsis} + + + + {/if} + + + + + + + + +
    + + +
    + + +
    +
    diff --git a/src/lib/components/paginations/pagination-12.todo.svelte b/src/lib/components/paginations/pagination-12.todo.svelte deleted file mode 100644 index e69de29..0000000 From 10fcb981a207e884b01db4a3f77cb9fbe709d143 Mon Sep 17 00:00:00 2001 From: "Max G." Date: Mon, 23 Dec 2024 12:35:22 +0100 Subject: [PATCH 14/14] chore: remove navigation order property from README and update related notes --- README.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/README.md b/README.md index ba53987..dbe455d 100644 --- a/README.md +++ b/README.md @@ -500,7 +500,6 @@ The project includes an automatic code collapsing system for better readability title: 'Your Category' }, label: 'Your Category', // Navigation label - order: 12, // Navigation order (increment from last) path: 'your-category', // URL path seo: { description: 'An extensive collection of copy-and-paste components built with Svelte and TailwindCSS.', @@ -519,9 +518,6 @@ The project includes an automatic code collapsing system for better readability path: 'combined-category' ``` -> [!NOTE] -> The `order` property determines the navigation menu order. Check existing routes for the next available number. - 2. **Component Requirements** - Resemble the original component as closely as possible @@ -578,7 +574,6 @@ The project includes an automatic code collapsing system for better readability - If adding a new category: - Add entry to `src/lib/config/routes.ts` - Configure SEO metadata - - Set correct navigation order - For existing categories: - Ensure component follows naming pattern - Update component count in route description