-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
47 changed files
with
1,686 additions
and
378 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| { | ||
| "name": "carousel", | ||
| "dependencies": [ | ||
| "embla-carousel-solid" | ||
| ], | ||
| "files": [ | ||
| { | ||
| "name": "carousel.tsx", | ||
| "content": "import { cn } from \"@/lib/cn\"\r\nimport type { CreateEmblaCarouselType } from \"embla-carousel-solid\"\r\nimport createEmblaCarousel from \"embla-carousel-solid\"\r\n\r\nimport type {\r\n\tAccessor,\r\n\tComponentProps,\r\n\tParentComponent,\r\n\tVoidComponent,\r\n} from \"solid-js\"\r\nimport {\r\n\tcreateContext,\r\n\tcreateEffect,\r\n\tcreateMemo,\r\n\tcreateSignal,\r\n\tmergeProps,\r\n\tsplitProps,\r\n\tuseContext,\r\n} from \"solid-js\"\r\nimport { Button } from \"./button\"\r\n\r\nexport type CarouselApi = CreateEmblaCarouselType[1]\r\ntype UseCarouselParameters = Parameters<typeof createEmblaCarousel>\r\ntype CarouselOptions = NonNullable<UseCarouselParameters[0]>\r\ntype CarouselPlugin = NonNullable<UseCarouselParameters[1]>\r\n\r\ntype CarouselProps = {\r\n\topts?: ReturnType<CarouselOptions>\r\n\tplugins?: ReturnType<CarouselPlugin>\r\n\torientation?: \"horizontal\" | \"vertical\"\r\n\tsetApi?: (api: CarouselApi) => void\r\n}\r\n\r\ntype CarouselContextProps = {\r\n\tcarouselRef: ReturnType<typeof createEmblaCarousel>[0]\r\n\tapi: ReturnType<typeof createEmblaCarousel>[1]\r\n\tscrollPrev: () => void\r\n\tscrollNext: () => void\r\n\tcanScrollPrev: Accessor<boolean>\r\n\tcanScrollNext: Accessor<boolean>\r\n} & CarouselProps\r\n\r\nconst CarouselContext = createContext<Accessor<CarouselContextProps> | null>(\r\n\tnull\r\n)\r\n\r\nconst useCarousel = () => {\r\n\tconst context = useContext(CarouselContext)\r\n\r\n\tif (!context) {\r\n\t\tthrow new Error(\"useCarousel must be used within a <Carousel />\")\r\n\t}\r\n\r\n\treturn context()\r\n}\r\n\r\nexport const Carousel: ParentComponent<\r\n\tComponentProps<\"div\"> & CarouselProps\r\n> = (props) => {\r\n\tconst merge = mergeProps(\r\n\t\t{ orientation: \"horizontal\" } as CarouselProps,\r\n\t\tprops\r\n\t)\r\n\tconst [local, rest] = splitProps(merge, [\r\n\t\t\"orientation\",\r\n\t\t\"opts\",\r\n\t\t\"setApi\",\r\n\t\t\"plugins\",\r\n\t\t\"class\",\r\n\t\t\"children\",\r\n\t])\r\n\r\n\tconst [carouselRef, api] = createEmblaCarousel(\r\n\t\t() => ({\r\n\t\t\t...local.opts,\r\n\t\t\taxis: local.orientation === \"horizontal\" ? \"x\" : \"y\",\r\n\t\t}),\r\n\t\t() => (local.plugins === undefined ? [] : local.plugins)\r\n\t)\r\n\tconst [canScrollPrev, setCanScrollPrev] = createSignal(false)\r\n\tconst [canScrollNext, setCanScrollNext] = createSignal(false)\r\n\r\n\tconst onSelect = (api: NonNullable<ReturnType<CarouselApi>>) => {\r\n\t\tsetCanScrollPrev(api.canScrollPrev())\r\n\t\tsetCanScrollNext(api.canScrollNext())\r\n\t}\r\n\r\n\tconst scrollPrev = () => {\r\n\t\tapi()?.scrollPrev()\r\n\t}\r\n\r\n\tconst scrollNext = () => {\r\n\t\tapi()?.scrollNext()\r\n\t}\r\n\r\n\tconst handleKeyDown = (event: KeyboardEvent) => {\r\n\t\tif (event.key === \"ArrowLeft\") {\r\n\t\t\tevent.preventDefault()\r\n\t\t\tscrollPrev()\r\n\t\t} else if (event.key === \"ArrowRight\") {\r\n\t\t\tevent.preventDefault()\r\n\t\t\tscrollNext()\r\n\t\t}\r\n\t}\r\n\r\n\tcreateEffect(() => {\r\n\t\tif (!api() || !local.setApi) {\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\tlocal.setApi(api)\r\n\t})\r\n\r\n\tcreateEffect(() => {\r\n\t\tif (!api()) {\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\tonSelect(api()!)\r\n\t\tapi()!.on(\"reInit\", onSelect)\r\n\t\tapi()!.on(\"select\", onSelect)\r\n\r\n\t\treturn () => {\r\n\t\t\tapi()?.off(\"select\", onSelect)\r\n\t\t}\r\n\t})\r\n\r\n\tconst value = createMemo(\r\n\t\t() =>\r\n\t\t\t({\r\n\t\t\t\tcarouselRef,\r\n\t\t\t\tapi,\r\n\t\t\t\topts: local.opts,\r\n\t\t\t\torientation:\r\n\t\t\t\t\tlocal.orientation ||\r\n\t\t\t\t\t(local.opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\r\n\t\t\t\tscrollPrev,\r\n\t\t\t\tscrollNext,\r\n\t\t\t\tcanScrollPrev,\r\n\t\t\t\tcanScrollNext,\r\n\t\t\t}) satisfies CarouselContextProps\r\n\t)\r\n\r\n\treturn (\r\n\t\t<CarouselContext.Provider value={value}>\r\n\t\t\t<div\r\n\t\t\t\tonKeyDown={handleKeyDown}\r\n\t\t\t\tclass={cn(\"relative\", local.class)}\r\n\t\t\t\trole=\"region\"\r\n\t\t\t\taria-roledescription=\"carousel\"\r\n\t\t\t\t{...rest}\r\n\t\t\t>\r\n\t\t\t\t{local.children}\r\n\t\t\t</div>\r\n\t\t</CarouselContext.Provider>\r\n\t)\r\n}\r\n\r\nexport const CarouselContent: ParentComponent<ComponentProps<\"div\">> = (\r\n\tprops\r\n) => {\r\n\tconst [local, rest] = splitProps(props, [\"class\"])\r\n\tconst { carouselRef, orientation } = useCarousel()\r\n\r\n\treturn (\r\n\t\t<div ref={carouselRef} class=\"overflow-hidden\">\r\n\t\t\t<div\r\n\t\t\t\tclass={cn(\r\n\t\t\t\t\t\"flex\",\r\n\t\t\t\t\torientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\r\n\t\t\t\t\tlocal.class\r\n\t\t\t\t)}\r\n\t\t\t\t{...rest}\r\n\t\t\t/>\r\n\t\t</div>\r\n\t)\r\n}\r\n\r\nexport const CarouselItem: ParentComponent<ComponentProps<\"div\">> = (props) => {\r\n\tconst [local, rest] = splitProps(props, [\"class\"])\r\n\tconst { orientation } = useCarousel()\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\trole=\"group\"\r\n\t\t\taria-roledescription=\"slide\"\r\n\t\t\tclass={cn(\r\n\t\t\t\t\"min-w-0 shrink-0 grow-0 basis-full\",\r\n\t\t\t\torientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\r\n\t\t\t\tlocal.class\r\n\t\t\t)}\r\n\t\t\t{...rest}\r\n\t\t/>\r\n\t)\r\n}\r\n\r\nexport const CarouselPrevious: VoidComponent<ComponentProps<typeof Button>> = (\r\n\tprops\r\n) => {\r\n\tconst merge = mergeProps(\r\n\t\t{ variant: \"outline\", size: \"icon\" } as ComponentProps<typeof Button>,\r\n\t\tprops\r\n\t)\r\n\tconst [local, rest] = splitProps(merge, [\"class\", \"variant\", \"size\"])\r\n\tconst { orientation, scrollPrev, canScrollPrev } = useCarousel()\r\n\r\n\treturn (\r\n\t\t<Button\r\n\t\t\tvariant={local.variant}\r\n\t\t\tsize={local.size}\r\n\t\t\tclass={cn(\r\n\t\t\t\t\"absolute h-8 w-8 rounded-full\",\r\n\t\t\t\torientation === \"horizontal\"\r\n\t\t\t\t\t? \"-left-12 top-1/2 -translate-y-1/2\"\r\n\t\t\t\t\t: \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\r\n\t\t\t\tlocal.class\r\n\t\t\t)}\r\n\t\t\tdisabled={!canScrollPrev()}\r\n\t\t\tonClick={scrollPrev}\r\n\t\t\t{...rest}\r\n\t\t>\r\n\t\t\t<span class=\"icon-[tabler--arrow-left] h-4 w-4\" />\r\n\t\t\t<span class=\"sr-only\">Previous slide</span>\r\n\t\t</Button>\r\n\t)\r\n}\r\n\r\nexport const CarouselNext: VoidComponent<ComponentProps<typeof Button>> = (\r\n\tprops\r\n) => {\r\n\tconst merge = mergeProps(\r\n\t\t{ variant: \"outline\", size: \"icon\" } as ComponentProps<typeof Button>,\r\n\t\tprops\r\n\t)\r\n\tconst [local, rest] = splitProps(merge, [\"class\", \"variant\", \"size\"])\r\n\tconst { orientation, scrollNext, canScrollNext } = useCarousel()\r\n\r\n\treturn (\r\n\t\t<Button\r\n\t\t\tvariant={local.variant}\r\n\t\t\tsize={local.size}\r\n\t\t\tclass={cn(\r\n\t\t\t\t\"absolute h-8 w-8 rounded-full\",\r\n\t\t\t\torientation === \"horizontal\"\r\n\t\t\t\t\t? \"-right-12 top-1/2 -translate-y-1/2\"\r\n\t\t\t\t\t: \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\r\n\t\t\t\tlocal.class\r\n\t\t\t)}\r\n\t\t\tdisabled={!canScrollNext()}\r\n\t\t\tonClick={scrollNext}\r\n\t\t\t{...rest}\r\n\t\t>\r\n\t\t\t<span class=\"icon-[tabler--arrow-right] h-4 w-4\" />\r\n\t\t\t<span class=\"sr-only\">Next slide</span>\r\n\t\t</Button>\r\n\t)\r\n}\r\n" | ||
| } | ||
| ], | ||
| "type": "components:ui" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| { | ||
| "name": "pagination", | ||
| "dependencies": [ | ||
| "@kobalte/core" | ||
| ], | ||
| "files": [ | ||
| { | ||
| "name": "pagination.tsx", | ||
| "content": "import { cn } from \"@/lib/cn\"\r\nimport { Pagination as PaginationPrimitive } from \"@kobalte/core\"\r\nimport type { VariantProps } from \"class-variance-authority\"\r\nimport type { VoidComponent } from \"solid-js\"\r\nimport { mergeProps, splitProps, type ParentComponent } from \"solid-js\"\r\nimport { buttonVariants } from \"./button\"\r\n\r\nexport const PaginationItems = PaginationPrimitive.Items\r\n\r\nexport const Pagination: ParentComponent<\r\n\tPaginationPrimitive.PaginationRootProps\r\n> = (props) => {\r\n\tconst [local, rest] = splitProps(props, [\"class\"])\r\n\r\n\treturn (\r\n\t\t<PaginationPrimitive.Root\r\n\t\t\tclass={cn(\r\n\t\t\t\t\"mx-auto flex w-full justify-center [&>ul]:flex [&>ul]:flex-row [&>ul]:items-center [&>ul]:gap-1\",\r\n\t\t\t\tlocal.class\r\n\t\t\t)}\r\n\t\t\t{...rest}\r\n\t\t/>\r\n\t)\r\n}\r\n\r\nexport const PaginationItem: ParentComponent<\r\n\tPaginationPrimitive.PaginationItemProps &\r\n\t\tPick<VariantProps<typeof buttonVariants>, \"size\">\r\n> = (props) => {\r\n\tconst merge = mergeProps(\r\n\t\t{ size: \"icon\" } satisfies Pick<\r\n\t\t\tVariantProps<typeof buttonVariants>,\r\n\t\t\t\"size\"\r\n\t\t>,\r\n\t\tprops\r\n\t)\r\n\tconst [local, rest] = splitProps(merge, [\"class\", \"size\"])\r\n\r\n\treturn (\r\n\t\t<PaginationPrimitive.Item\r\n\t\t\tclass={cn(\r\n\t\t\t\tbuttonVariants({\r\n\t\t\t\t\tvariant: \"ghost\",\r\n\t\t\t\t\tsize: local.size,\r\n\t\t\t\t}),\r\n\t\t\t\t\"aria-[current=page]:border aria-[current=page]:border-input aria-[current=page]:bg-background aria-[current=page]:shadow-sm aria-[current=page]:hover:bg-accent aria-[current=page]:hover:text-accent-foreground\",\r\n\t\t\t\tlocal.class\r\n\t\t\t)}\r\n\t\t\t{...rest}\r\n\t\t/>\r\n\t)\r\n}\r\n\r\nexport const PaginationEllipsis: VoidComponent<\r\n\tPaginationPrimitive.PaginationEllipsisProps\r\n> = (props) => {\r\n\tconst [local, rest] = splitProps(props, [\"class\"])\r\n\r\n\treturn (\r\n\t\t<PaginationPrimitive.Ellipsis\r\n\t\t\tclass={cn(\"flex h-9 w-9 items-center justify-center\", local.class)}\r\n\t\t\t{...rest}\r\n\t\t>\r\n\t\t\t<span class=\"icon-[tabler--dots] h-4 w-4\" />\r\n\t\t\t<span class=\"sr-only\">More pages</span>\r\n\t\t</PaginationPrimitive.Ellipsis>\r\n\t)\r\n}\r\n\r\nexport const PaginationPrevious: VoidComponent<\r\n\tPaginationPrimitive.PaginationPreviousProps &\r\n\t\tPick<VariantProps<typeof buttonVariants>, \"size\">\r\n> = (props) => {\r\n\tconst merge = mergeProps(\r\n\t\t{ size: \"icon\" } satisfies Pick<\r\n\t\t\tVariantProps<typeof buttonVariants>,\r\n\t\t\t\"size\"\r\n\t\t>,\r\n\t\tprops\r\n\t)\r\n\tconst [local, rest] = splitProps(merge, [\"class\", \"size\"])\r\n\r\n\treturn (\r\n\t\t<PaginationPrimitive.Previous\r\n\t\t\tclass={cn(\r\n\t\t\t\tbuttonVariants({\r\n\t\t\t\t\tvariant: \"ghost\",\r\n\t\t\t\t\tsize: local.size,\r\n\t\t\t\t}),\r\n\t\t\t\t\"aria-[current=page]:border aria-[current=page]:border-input aria-[current=page]:bg-background aria-[current=page]:shadow-sm aria-[current=page]:hover:bg-accent aria-[current=page]:hover:text-accent-foreground\",\r\n\t\t\t\tlocal.class\r\n\t\t\t)}\r\n\t\t\t{...rest}\r\n\t\t>\r\n\t\t\t<span class=\"icon-[tabler--chevron-left] h-4 w-4\" />\r\n\t\t</PaginationPrimitive.Previous>\r\n\t)\r\n}\r\n\r\nexport const PaginationNext: VoidComponent<\r\n\tPaginationPrimitive.PaginationNextProps &\r\n\t\tPick<VariantProps<typeof buttonVariants>, \"size\">\r\n> = (props) => {\r\n\tconst merge = mergeProps(\r\n\t\t{ size: \"icon\" } satisfies Pick<\r\n\t\t\tVariantProps<typeof buttonVariants>,\r\n\t\t\t\"size\"\r\n\t\t>,\r\n\t\tprops\r\n\t)\r\n\tconst [local, rest] = splitProps(merge, [\"class\", \"size\"])\r\n\r\n\treturn (\r\n\t\t<PaginationPrimitive.Next\r\n\t\t\tclass={cn(\r\n\t\t\t\tbuttonVariants({\r\n\t\t\t\t\tvariant: \"ghost\",\r\n\t\t\t\t\tsize: local.size,\r\n\t\t\t\t}),\r\n\t\t\t\t\"aria-[current=page]:border aria-[current=page]:border-input aria-[current=page]:bg-background aria-[current=page]:shadow-sm aria-[current=page]:hover:bg-accent aria-[current=page]:hover:text-accent-foreground\",\r\n\t\t\t\tlocal.class\r\n\t\t\t)}\r\n\t\t\t{...rest}\r\n\t\t>\r\n\t\t\t<span class=\"icon-[tabler--chevron-right] h-4 w-4\" />\r\n\t\t</PaginationPrimitive.Next>\r\n\t)\r\n}\r\n" | ||
| } | ||
| ], | ||
| "type": "components:ui" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
60 changes: 60 additions & 0 deletions
60
apps/www/src/registry/default/example/carousel-api-demo.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import { Index, createEffect, createSignal } from "solid-js" | ||
| import { Card, CardContent } from "../ui/card" | ||
| import { | ||
| Carousel, | ||
| CarouselContent, | ||
| CarouselItem, | ||
| CarouselNext, | ||
| CarouselPrevious, | ||
| type CarouselApi, | ||
| } from "../ui/carousel" | ||
|
|
||
| const CarouselApiDemo = () => { | ||
| const [api, setApi] = createSignal<ReturnType<CarouselApi>>() | ||
| const [current, setCurrent] = createSignal(0) | ||
| const [count, setCount] = createSignal(0) | ||
|
|
||
| const onSelect = () => { | ||
| setCurrent(api()!.selectedScrollSnap() + 1) | ||
| } | ||
|
|
||
| createEffect(() => { | ||
| if (!api()) { | ||
| return | ||
| } | ||
|
|
||
| setCount(api()!.scrollSnapList().length) | ||
| setCurrent(api()!.selectedScrollSnap() + 1) | ||
|
|
||
| api()!.on("select", onSelect) | ||
| }) | ||
|
|
||
| return ( | ||
| <div> | ||
| <Carousel setApi={setApi} class="w-full max-w-xs"> | ||
| <CarouselContent> | ||
| <Index each={Array.from({ length: 5 })}> | ||
| {(_, index) => ( | ||
| <CarouselItem> | ||
| <Card> | ||
| <CardContent class="flex aspect-square items-center justify-center p-6"> | ||
| <span class="text-4xl font-semibold"> | ||
| {index + 1} | ||
| </span> | ||
| </CardContent> | ||
| </Card> | ||
| </CarouselItem> | ||
| )} | ||
| </Index> | ||
| </CarouselContent> | ||
| <CarouselPrevious /> | ||
| <CarouselNext /> | ||
| </Carousel> | ||
| <div class="py-2 text-center text-sm text-muted-foreground"> | ||
| Slide {current()} of {count()} | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default CarouselApiDemo |
Oops, something went wrong.