Skip to content

Commit 49c2e82

Browse files
stevethomasstevethomas
committed
add pagination
1 parent 54a6e0a commit 49c2e82

File tree

17 files changed

+378
-50
lines changed

17 files changed

+378
-50
lines changed

‎add‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,11 @@ mkdir -p src/components/$COMPONENT
2828

2929
# Move files from ui directory to components directory
3030
if [ -d "src/components/ui/$COMPONENT" ]; then
31-
echo "Moving files from src/components/ui/$COMPONENT to src/components/$COMPONENT"
32-
mv -f src/components/ui/$COMPONENT/* src/components/$COMPONENT/
33-
34-
# Remove the now empty ui directory for this component
35-
rmdir src/components/ui/$COMPONENT 2>/dev/null
31+
# this is a necessary workaround because shadcn-vue won't write
32+
# to src/components due to a bug (refer to components.json)
33+
echo "Moving files from src/components/ui to src/components"
34+
rsync -a src/components/ui/ src/components/
35+
rm -r src/components/ui
3636

3737
echo "Component $COMPONENT successfully installed and moved to the correct location"
3838
else

‎app/pages/components/Pagination.vue‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script setup lang="ts">
2+
import { ref } from "vue"
3+
import {
4+
Pagination,
5+
PaginationContent,
6+
PaginationEllipsis,
7+
PaginationItem,
8+
PaginationNext,
9+
PaginationPrevious,
10+
} from "@/components/pagination"
11+
12+
const state = ref(false)
13+
</script>
14+
15+
<template>
16+
<Pagination v-slot="{ page }" :items-per-page="10" :total="30" :default-page="2">
17+
<PaginationContent v-slot="{ items }">
18+
<PaginationPrevious />
19+
20+
<template v-for="(item, index) in items" :key="index">
21+
<PaginationItem
22+
v-if="item.type === 'page'"
23+
:value="item.value"
24+
:is-active="item.value === page"
25+
>
26+
{{ item.value }}
27+
</PaginationItem>
28+
</template>
29+
30+
<PaginationEllipsis :index="4" />
31+
32+
<PaginationNext />
33+
</PaginationContent>
34+
</Pagination>
35+
</template>

‎app/pages/contribution-guide.md‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,13 @@
33
## Adding Components
44
Gooey is built primarily with [Shadcdn-vue](https://www.shadcn-vue.com/) components.
55

6-
Components can be installed into the project using the `./add <component>` command, which handles the installation and file movement automatically:
6+
Components can be installed into the project following the standard installation method, eg. `npx shadcn-vue@latest add sidebar`.
77

8-
```bash
9-
./add <component-name>
10-
```
11-
12-
Alternatively, you can use the standard installation method, eg. `npx shadcn-vue@latest add <component-name>`.
13-
14-
Note that due to an ongoing bug in shadcn-vue and the `components.json` `aliases.ui` value, components will not install directly to `./src/components`. The `./add` script handles this automatically, but if you're using the standard method, you should copy the component up one level manually.
8+
Note that due to an ongoing bug in shadcn-vue and the `components.json` `aliases.ui` value, components will not install directly to `./src/components`. After installing, you should copy the component up one level, eg. `
159

1610
When adding a component, ensure you do these things:
1711

18-
1. Install the component using `./add <component-name>` or from shadcn-vue directly with `npx shadcn-vue@latest add <component-name>`
12+
1. Install from shadcn-vue, eg. `npx shadcn-vue@latest add sidebar`
1913
2. Register the component in `src/index.ts`
2014
3. Create a vue file matching the component name in app/components, and register it in `app/pages/index.ts`
2115
4. Register the documentation route in `app/router/index.ts`

‎app/pages/index.ts‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,46 @@
1-
// getting started
21
export { default as Index } from "./Index.vue"
2+
3+
// getting started
34
export { default as ContributionGuide } from "./contribution-guide.md"
45
export { default as Installation } from "./installation.md"
56
export { default as Theme } from "./theme.md"
67

7-
// demos
8-
export { default as TwoColumnLayoutDemo } from "./demo/TwoColumnLayoutDemo.vue"
9-
108
// components
11-
export { default as AlertDialog } from "./components/AlertDialog.vue"
129
export { default as Accord } from "./components/Accord.vue"
1310
export { default as Avatar } from "./components/Avatar.vue"
1411
export { default as Badge } from "./components/Badge.vue"
1512
export { default as Button } from "./components/Button.vue"
16-
export { default as Card } from "./components/Card.vue"
1713
export { default as Carousel } from "./components/Carousel.vue"
18-
export { default as Checkbox } from "./components/Checkbox.vue"
1914
export { default as Command } from "./components/Command.vue"
20-
export { default as Dialog } from "./components/Dialog.vue"
2115
export { default as DropdownMenu } from "./components/DropdownMenu.vue"
2216
export { default as Flasher } from "./components/Flasher.vue"
23-
export { default as Heading } from "./components/Heading.vue"
24-
export { default as Input } from "./components/Input.vue"
25-
export { default as Label } from "./components/Label.vue"
17+
export { default as Pagination } from "./components/Pagination.vue"
2618
export { default as Popover } from "./components/Popover.vue"
2719
export { default as Progress } from "./components/Progress.vue"
28-
export { default as Select } from "./components/Select.vue"
29-
export { default as Sheet } from "./components/Sheet.vue"
3020
export { default as Skeleton } from "./components/Skeleton.vue"
21+
export { default as Toast } from "./components/Toast.vue"
22+
export { default as Tip } from "./components/Tip.vue"
23+
24+
// forms
25+
export { default as Checkbox } from "./components/Checkbox.vue"
26+
export { default as Input } from "./components/Input.vue"
27+
export { default as Label } from "./components/Label.vue"
28+
export { default as Select } from "./components/Select.vue"
3129
export { default as Slider } from "./components/Slider.vue"
3230
export { default as Switch } from "./components/Switch.vue"
31+
export { default as Textarea } from "./components/Textarea.vue"
32+
33+
// page layout
34+
export { default as AlertDialog } from "./components/AlertDialog.vue"
35+
export { default as Card } from "./components/Card.vue"
36+
export { default as Dialog } from "./components/Dialog.vue"
37+
export { default as Heading } from "./components/Heading.vue"
38+
export { default as Sheet } from "./components/Sheet.vue"
3339
export { default as Table } from "./components/Table.vue"
3440
export { default as Tabs } from "./components/Tabs.vue"
35-
export { default as Textarea } from "./components/Textarea.vue"
36-
export { default as Toast } from "./components/Toast.vue"
37-
export { default as Tip } from "./components/Tip.vue"
41+
42+
// layouts
3843
export { default as TwoColumnLayout } from "./components/TwoColumnLayout.vue"
44+
45+
// demos
46+
export { default as TwoColumnLayoutDemo } from "./demo/TwoColumnLayoutDemo.vue"

‎app/router/index.ts‎

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,38 +8,45 @@ import {
88
ContributionGuide,
99
Theme,
1010

11-
// demos
12-
TwoColumnLayoutDemo,
13-
1411
// components
1512
Accord,
1613
Avatar,
17-
AlertDialog,
1814
Badge,
1915
Button,
20-
Card,
2116
Carousel,
22-
Checkbox,
2317
Command,
24-
Dialog,
2518
DropdownMenu,
2619
Flasher,
27-
Heading,
28-
Input,
29-
Label,
20+
Pagination,
3021
Popover,
3122
Progress,
32-
Select,
33-
Sheet,
3423
Skeleton,
24+
Toast,
25+
Tip,
26+
27+
// forms
28+
Checkbox,
29+
Input,
30+
Label,
31+
Select,
3532
Slider,
3633
Switch,
34+
Textarea,
35+
36+
// page layout
37+
AlertDialog,
38+
Card,
39+
Dialog,
40+
Heading,
41+
Sheet,
3742
Table,
3843
Tabs,
39-
Textarea,
40-
Toast,
41-
Tip,
44+
45+
// layouts
4246
TwoColumnLayout,
47+
48+
// demos
49+
TwoColumnLayoutDemo,
4350
} from "@app/pages"
4451
import ArticleLayout from "@app/layouts/ArticleLayout.vue"
4552
import ComponentLayout from "@app/layouts/ComponentLayout.vue"
@@ -121,6 +128,12 @@ const routes = [
121128
component: Flasher,
122129
meta: { layout: ComponentLayout },
123130
},
131+
{
132+
name: "Pagination",
133+
path: "/components/pagination",
134+
component: Pagination,
135+
meta: { layout: ComponentLayout, shadcn: true },
136+
},
124137
{
125138
name: "Popover",
126139
path: "/components/popover",

‎components.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"components": "@/components",
1414
"composables": "@/composables",
1515
"utils": "@/lib/utils",
16-
"ui": "@/components/ui",
16+
"ui": "@/components",
1717
"lib": "@/lib"
1818
},
1919
"iconLibrary": "lucide"

‎src/components/button/Button.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script setup lang="ts">
22
import type { HTMLAttributes } from "vue"
3-
import { Primitive, type PrimitiveProps } from "radix-vue"
4-
import { type ButtonVariants, buttonVariants } from "."
3+
import { Primitive, type PrimitiveProps } from "reka-ui"
54
import { cn } from "@/lib/utils"
5+
import { type ButtonVariants, buttonVariants } from "."
66
77
interface Props extends PrimitiveProps {
88
variant?: ButtonVariants["variant"]

‎src/components/button/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { type VariantProps, cva } from "class-variance-authority"
1+
import { cva, type VariantProps } from "class-variance-authority"
22

33
export { default as Button } from "./Button.vue"
44

55
export const buttonVariants = cva(
6-
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
6+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
77
{
88
variants: {
99
variant: {

‎src/components/pagination/Pagination.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script setup lang="ts">
2+
import type { HTMLAttributes } from "vue"
3+
import { reactiveOmit } from "@vueuse/core"
4+
import {
5+
PaginationRoot,
6+
type PaginationRootEmits,
7+
type PaginationRootProps,
8+
useForwardPropsEmits,
9+
} from "reka-ui"
10+
import { cn } from "@/lib/utils"
11+
12+
const props = defineProps<
13+
PaginationRootProps & {
14+
class?: HTMLAttributes["class"]
15+
}
16+
>()
17+
const emits = defineEmits<PaginationRootEmits>()
18+
19+
const delegatedProps = reactiveOmit(props, "class")
20+
const forwarded = useForwardPropsEmits(delegatedProps, emits)
21+
</script>
22+
23+
<template>
24+
<PaginationRoot
25+
v-slot="slotProps"
26+
data-slot="pagination"
27+
v-bind="forwarded"
28+
:class="cn('mx-auto flex w-full justify-center', props.class)"
29+
>
30+
<slot v-bind="slotProps" />
31+
</PaginationRoot>
32+
</template>

‎src/components/pagination/PaginationContent.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script setup lang="ts">
2+
import type { HTMLAttributes } from "vue"
3+
import { reactiveOmit } from "@vueuse/core"
4+
import { PaginationList, type PaginationListProps } from "reka-ui"
5+
import { cn } from "@/lib/utils"
6+
7+
const props = defineProps<PaginationListProps & { class?: HTMLAttributes["class"] }>()
8+
9+
const delegatedProps = reactiveOmit(props, "class")
10+
</script>
11+
12+
<template>
13+
<PaginationList
14+
v-slot="slotProps"
15+
data-slot="pagination-content"
16+
v-bind="delegatedProps"
17+
:class="cn('flex flex-row items-center gap-1', props.class)"
18+
>
19+
<slot v-bind="slotProps" />
20+
</PaginationList>
21+
</template>

0 commit comments

Comments
 (0)