Skip to content

Commit

Permalink
chore: update pagination & breadcrumbs components
Browse files Browse the repository at this point in the history
  • Loading branch information
@BayBreezy
BayBreezy committed Dec 24, 2024
1 parent 4e16781 commit 3d1c515
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 10 deletions.
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 8 additions & 8 deletions src/comps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,7 @@ export default [
fileName: "Breadcrumbs.vue",
dirPath: "app/components/Ui",
fileContent:
'<template>\n <div :class="styles({ class: props.class })">\n <template v-for="(item, i) in items" :key="i">\n <div class="flex items-center gap-3">\n <div class="flex cursor-pointer items-center gap-2">\n <slot name="crumbIcon" :item="item" :index="i">\n <Icon\n v-if="item.icon"\n :name="item.icon"\n :class="[!isNotLastItem(i) && \'text-primary\']"\n />\n </slot>\n <slot :item="item" :is-not-last-item="isNotLastItem" :index="i" name="link">\n <NuxtLink\n v-if="item.label"\n :to="!item?.disabled ? item.link : \'\'"\n :class="[\n isNotLastItem(i)\n ? \'text-muted-foreground hover:underline\'\n : \'font-semibold text-primary\',\n ]"\n class="text-sm text-foreground"\n @click="item?.click?.()"\n >{{ item.label }}</NuxtLink\n >\n </slot>\n </div>\n <slot name="separator" :item="item" :index="i">\n <Icon v-if="isNotLastItem(i)" :name="separator" class="h-3 w-3 text-muted-foreground" />\n </slot>\n </div>\n </template>\n </div>\n</template>\n\n<script setup lang="ts">\n export interface Crumbs {\n label: string;\n icon?: string;\n link?: string;\n disabled?: boolean;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\n click?: Function;\n }\n const props = withDefaults(\n defineProps<{\n /**\n * The items to display in the breadcrumbs.\n */\n items?: Crumbs[];\n /**\n * The separator to use between each breadcrumb.\n */\n separator?: string;\n class?: any;\n }>(),\n {\n separator: "heroicons:chevron-right",\n items: () => [],\n class: undefined,\n }\n );\n\n const isNotLastItem = (index: number) => {\n return index !== props?.items?.length - 1;\n };\n\n const styles = tv({\n base: "flex w-full items-center gap-4",\n });\n</script>\n',
'<template>\n <div :class="styles({ class: props.class })">\n <template v-for="(item, i) in items" :key="i">\n <slot :name="item.slot || \'default\'">\n <div class="flex items-center gap-3">\n <div class="group flex items-center gap-2">\n <slot name="crumbIcon" :item="item" :index="i">\n <Icon\n v-if="item.icon"\n :name="item.icon"\n :class="[\n isNotLastItem(i)\n ? \'text-muted-foreground group-hover:text-foreground\'\n : \'text-primary\',\n ]"\n />\n </slot>\n <slot :item="item" :is-not-last-item="isNotLastItem" :index="i" name="link">\n <NuxtLink\n v-if="item.label"\n :to="!item?.disabled ? item.link : \'\'"\n :class="[\n item.link && !item.disabled && \'underline-offset-2 group-hover:underline\',\n isNotLastItem(i)\n ? \'text-muted-foreground group-hover:text-foreground\'\n : \'font-semibold text-primary\',\n ]"\n class="text-sm text-foreground transition-colors"\n @click="item?.click?.()"\n >{{ item.label }}</NuxtLink\n >\n </slot>\n </div>\n </div>\n </slot>\n <slot name="separator" :item="item" :index="i">\n <Icon v-if="isNotLastItem(i)" :name="separator" class="h-3 w-3 text-muted-foreground" />\n </slot>\n </template>\n </div>\n</template>\n\n<script setup lang="ts">\n export interface Crumbs {\n label?: string;\n icon?: string;\n link?: string;\n disabled?: boolean;\n slot?: string;\n // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\n click?: Function;\n }\n const props = withDefaults(\n defineProps<{\n /**\n * The items to display in the breadcrumbs.\n */\n items?: Crumbs[];\n /**\n * The separator to use between each breadcrumb.\n */\n separator?: string;\n class?: any;\n }>(),\n {\n separator: "heroicons:chevron-right",\n items: () => [],\n class: undefined,\n }\n );\n\n const isNotLastItem = (index: number) => {\n return index !== props?.items?.length - 1;\n };\n\n const styles = tv({\n base: "flex w-full items-center gap-4",\n });\n</script>\n',
},
],
utils: [],
Expand Down Expand Up @@ -1710,13 +1710,13 @@ export default [
fileName: "Pagination/Ellipsis.vue",
dirPath: "app/components/Ui",
fileContent:
'<template>\n <PaginationEllipsis v-bind="forwarded">\n <slot>\n <div v-if="icon" class="inline-flex h-9 w-9 items-center justify-center hover:bg-transparent">\n <Icon :name="icon" />\n </div>\n </slot>\n </PaginationEllipsis>\n</template>\n\n<script lang="ts" setup>\n import { PaginationEllipsis } from "radix-vue";\n import type { PaginationEllipsisProps } from "radix-vue";\n\n const props = defineProps<\n PaginationEllipsisProps & {\n /** Icon to show */\n icon?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "icon");\n</script>\n',
'<template>\n <PaginationEllipsis v-bind="forwarded">\n <slot>\n <div v-if="icon" class="inline-flex h-9 w-9 items-center justify-center hover:bg-transparent">\n <Icon :name="icon" />\n </div>\n </slot>\n </PaginationEllipsis>\n</template>\n\n<script lang="ts" setup>\n import { reactiveOmit } from "@vueuse/core";\n import { PaginationEllipsis } from "radix-vue";\n import type { PaginationEllipsisProps } from "radix-vue";\n\n const props = defineProps<\n PaginationEllipsisProps & {\n /** Icon to show */\n icon?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "icon");\n</script>\n',
},
{
fileName: "Pagination/First.vue",
dirPath: "app/components/Ui",
fileContent:
'<template>\n <PaginationFirst v-bind="forwarded">\n <slot>\n <UiButton v-if="icon" variant="ghost" size="icon-sm">\n <Icon :name="icon" />\n </UiButton>\n </slot>\n </PaginationFirst>\n</template>\n\n<script lang="ts" setup>\n import { PaginationFirst } from "radix-vue";\n import type { PaginationFirstProps } from "radix-vue";\n\n const props = defineProps<\n PaginationFirstProps & {\n /** Icon to show */\n icon?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "icon");\n</script>\n',
'<template>\n <PaginationFirst v-bind="forwarded">\n <slot>\n <UiButton v-if="icon" variant="ghost" size="icon-sm">\n <Icon :name="icon" />\n </UiButton>\n </slot>\n </PaginationFirst>\n</template>\n\n<script lang="ts" setup>\n import { reactiveOmit } from "@vueuse/core";\n import { PaginationFirst } from "radix-vue";\n import type { PaginationFirstProps } from "radix-vue";\n\n const props = defineProps<\n PaginationFirstProps & {\n /** Icon to show */\n icon?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "icon");\n</script>\n',
},
{
fileName: "Pagination/Item.vue",
Expand All @@ -1728,31 +1728,31 @@ export default [
fileName: "Pagination/Last.vue",
dirPath: "app/components/Ui",
fileContent:
'<template>\n <PaginationLast v-bind="forwarded">\n <slot>\n <UiButton v-if="icon" variant="ghost" size="icon-sm">\n <Icon :name="icon" />\n </UiButton>\n </slot>\n </PaginationLast>\n</template>\n\n<script lang="ts" setup>\n import { PaginationLast } from "radix-vue";\n import type { PaginationLastProps } from "radix-vue";\n\n const props = defineProps<\n PaginationLastProps & {\n /** Icon to show */\n icon?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "icon");\n</script>\n',
'<template>\n <PaginationLast v-bind="forwarded">\n <slot>\n <UiButton v-if="icon" variant="ghost" size="icon-sm">\n <Icon :name="icon" />\n </UiButton>\n </slot>\n </PaginationLast>\n</template>\n\n<script lang="ts" setup>\n import { reactiveOmit } from "@vueuse/core";\n import { PaginationLast } from "radix-vue";\n import type { PaginationLastProps } from "radix-vue";\n\n const props = defineProps<\n PaginationLastProps & {\n /** Icon to show */\n icon?: string;\n }\n >();\n const forwarded = reactiveOmit(props, "icon");\n</script>\n',
},
{
fileName: "Pagination/List.vue",
dirPath: "app/components/Ui",
fileContent:
'<template>\n <PaginationList v-slot="{ items }" :class="styles({ class: props.class })" v-bind="forwarded">\n <slot :items="items" />\n </PaginationList>\n</template>\n\n<script lang="ts" setup>\n import { PaginationList } from "radix-vue";\n import type { PaginationListProps } from "radix-vue";\n\n const props = defineProps<\n PaginationListProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "flex items-center gap-1",\n });\n</script>\n',
'<template>\n <PaginationList v-slot="{ items }" :class="styles({ class: props.class })" v-bind="forwarded">\n <slot :items="items" />\n </PaginationList>\n</template>\n\n<script lang="ts" setup>\n import { reactiveOmit } from "@vueuse/core";\n import { PaginationList } from "radix-vue";\n import type { PaginationListProps } from "radix-vue";\n\n const props = defineProps<\n PaginationListProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n const forwarded = reactiveOmit(props, "class");\n const styles = tv({\n base: "flex items-center gap-1",\n });\n</script>\n',
},
{
fileName: "Pagination/Next.vue",
dirPath: "app/components/Ui",
fileContent:
'<template>\n <PaginationNext v-bind="props">\n <slot>\n <UiButton v-if="icon" variant="ghost" size="icon-sm">\n <Icon :name="icon" />\n </UiButton>\n </slot>\n </PaginationNext>\n</template>\n\n<script lang="ts" setup>\n import { PaginationNext } from "radix-vue";\n import type { PaginationNextProps } from "radix-vue";\n\n const props = defineProps<\n PaginationNextProps & {\n /** Icon to show */\n icon?: string;\n }\n >();\n</script>\n',
'<template>\n <PaginationNext v-bind="forwarded">\n <slot>\n <UiButton v-if="icon" variant="ghost" size="icon-sm">\n <Icon :name="icon" />\n </UiButton>\n </slot>\n </PaginationNext>\n</template>\n\n<script lang="ts" setup>\n import { reactiveOmit } from "@vueuse/core";\n import { PaginationNext } from "radix-vue";\n import type { PaginationNextProps } from "radix-vue";\n\n const props = defineProps<\n PaginationNextProps & {\n /** Icon to show */\n icon?: string;\n }\n >();\n\n const forwarded = reactiveOmit(props, "icon");\n</script>\n',
},
{
fileName: "Pagination/Pagination.vue",
dirPath: "app/components/Ui",
fileContent:
'<template>\n <PaginationRoot v-bind="forwarded">\n <slot>\n <UiPaginationList v-slot="{ items }">\n <slot name="first"><UiPaginationFirst as-child :icon="firstIcon" /> </slot>\n <slot name="prev"><UiPaginationPrev as-child :icon="prevIcon" /> </slot>\n\n <template v-for="(page, index) in items" :key="index">\n <UiPaginationItem v-if="page.type === \'page\'" as-child v-bind="page" />\n <UiPaginationEllipsis\n v-else-if="page.type === \'ellipsis\'"\n as-child\n v-bind="page"\n :icon="ellipsisIcon"\n />\n </template>\n <slot name="next"><UiPaginationNext as-child :icon="nextIcon" /> </slot>\n <slot name="last"><UiPaginationLast as-child :icon="lastIcon" /></slot>\n </UiPaginationList>\n </slot>\n </PaginationRoot>\n</template>\n\n<script lang="ts" setup>\n import { PaginationRoot, useForwardPropsEmits } from "radix-vue";\n import type { PaginationRootEmits, PaginationRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PaginationRootProps & {\n ellipsisIcon?: string;\n firstIcon?: string;\n lastIcon?: string;\n nextIcon?: string;\n prevIcon?: string;\n }\n >(),\n {\n defaultPage: 1,\n total: 10,\n itemsPerPage: 10,\n siblingCount: 3,\n showEdges: true,\n ellipsisIcon: "lucide:more-horizontal",\n firstIcon: "lucide:chevrons-left",\n lastIcon: "lucide:chevrons-right",\n nextIcon: "lucide:chevron-right",\n prevIcon: "lucide:chevron-left",\n }\n );\n\n const emits = defineEmits<PaginationRootEmits>();\n const forwarded = useForwardPropsEmits(\n reactiveOmit(props, "ellipsisIcon", "firstIcon", "lastIcon", "nextIcon", "prevIcon"),\n emits\n );\n</script>\n',
'<template>\n <PaginationRoot v-bind="forwarded">\n <slot>\n <UiPaginationList v-slot="{ items }">\n <slot name="first"><UiPaginationFirst as-child :icon="firstIcon" /> </slot>\n <slot name="prev"><UiPaginationPrev as-child :icon="prevIcon" /> </slot>\n\n <template v-for="(page, index) in items" :key="index">\n <UiPaginationItem v-if="page.type === \'page\'" as-child v-bind="page" />\n <UiPaginationEllipsis\n v-else-if="page.type === \'ellipsis\'"\n as-child\n v-bind="page"\n :icon="ellipsisIcon"\n />\n </template>\n <slot name="next"><UiPaginationNext as-child :icon="nextIcon" /> </slot>\n <slot name="last"><UiPaginationLast as-child :icon="lastIcon" /></slot>\n </UiPaginationList>\n </slot>\n </PaginationRoot>\n</template>\n\n<script lang="ts" setup>\n import { reactiveOmit } from "@vueuse/core";\n import { PaginationRoot, useForwardPropsEmits } from "radix-vue";\n import type { PaginationRootEmits, PaginationRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PaginationRootProps & {\n ellipsisIcon?: string;\n firstIcon?: string;\n lastIcon?: string;\n nextIcon?: string;\n prevIcon?: string;\n }\n >(),\n {\n defaultPage: 1,\n total: 10,\n itemsPerPage: 10,\n siblingCount: 3,\n showEdges: true,\n ellipsisIcon: "lucide:more-horizontal",\n firstIcon: "lucide:chevrons-left",\n lastIcon: "lucide:chevrons-right",\n nextIcon: "lucide:chevron-right",\n prevIcon: "lucide:chevron-left",\n }\n );\n\n const emits = defineEmits<PaginationRootEmits>();\n const forwarded = useForwardPropsEmits(\n reactiveOmit(props, "ellipsisIcon", "firstIcon", "lastIcon", "nextIcon", "prevIcon"),\n emits\n );\n</script>\n',
},
{
fileName: "Pagination/Prev.vue",
dirPath: "app/components/Ui",
fileContent:
'<template>\n <PaginationPrev v-bind="forwarded">\n <slot>\n <UiButton v-if="icon" variant="ghost" size="icon-sm">\n <Icon :name="icon" />\n </UiButton>\n </slot>\n </PaginationPrev>\n</template>\n\n<script lang="ts" setup>\n import { PaginationPrev } from "radix-vue";\n import type { PaginationPrevProps } from "radix-vue";\n\n const props = defineProps<\n PaginationPrevProps & {\n /** Icon to show */\n icon?: string;\n }\n >();\n\n const forwarded = reactiveOmit(props, "icon");\n</script>\n',
'<template>\n <PaginationPrev v-bind="forwarded">\n <slot>\n <UiButton v-if="icon" variant="ghost" size="icon-sm">\n <Icon :name="icon" />\n </UiButton>\n </slot>\n </PaginationPrev>\n</template>\n\n<script lang="ts" setup>\n import { reactiveOmit } from "@vueuse/core";\n import { PaginationPrev } from "radix-vue";\n import type { PaginationPrevProps } from "radix-vue";\n\n const props = defineProps<\n PaginationPrevProps & {\n /** Icon to show */\n icon?: string;\n }\n >();\n\n const forwarded = reactiveOmit(props, "icon");\n</script>\n',
},
],
utils: [],
Expand Down

0 comments on commit 3d1c515

Please sign in to comment.