feat(Pagination): new component

Resolves #11

src/runtime/components/Pagination.vue

@@ -0,0 +1,121 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { PaginationRootProps, PaginationRootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/pagination'
+import type { ButtonProps, IconProps } from '#ui/types'
+
+const appConfig = _appConfig as AppConfig & { ui: { pagination: Partial<typeof theme> } }
+
+const pagination = tv({ extend: tv(theme), ...(appConfig.ui?.pagination || {}) })
+
+export interface PaginationProps extends Omit<PaginationRootProps, 'asChild'> {
+  firstIcon?: IconProps['name']
+  prevIcon?: IconProps['name']
+  nextIcon?: IconProps['name']
+  lastIcon?: IconProps['name']
+  ellipsisIcon?: IconProps['name']
+  color?: ButtonProps['color']
+  variant?: ButtonProps['variant']
+  activeColor?: ButtonProps['color']
+  activeVariant?: ButtonProps['variant']
+  showControls?: boolean
+  size?: ButtonProps['size']
+  class?: any
+  ui?: Partial<typeof pagination.slots>
+}
+
+export interface PaginationEmits extends PaginationRootEmits {}
+
+export interface PaginationSlots {
+  first(): any
+  prev(): any
+  next(): any
+  last(): any
+  ellipsis(): any
+  item(props: {
+    page: number
+    pageCount: number
+    item: {
+      type: 'ellipsis'
+    } | {
+      type: 'page'
+      value: number
+    }
+    index: number
+  }): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { PaginationRoot, PaginationList, PaginationListItem, PaginationFirst, PaginationPrev, PaginationEllipsis, PaginationNext, PaginationLast, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+
+const props = withDefaults(defineProps<PaginationProps>(), {
+  color: 'white',
+  activeColor: 'black',
+  variant: 'solid',
+  activeVariant: 'solid',
+  showControls: true
+})
+const emits = defineEmits<PaginationEmits>()
+defineSlots<PaginationSlots>()
+
+const appConfig = useAppConfig()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultPage', 'disabled', 'itemsPerPage', 'page', 'showEdges', 'siblingCount', 'total'), emits)
+
+const ui = computed(() => tv({ extend: pagination, slots: props.ui })())
+</script>
+
+<template>
+  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: props.class })">
+    <PaginationList v-slot="{ items }" :class="ui.list()">
+      <PaginationFirst v-if="showControls || $slots.first" as-child>
+        <slot name="first">
+          <UButton :color="color" :variant="variant" :size="size" :icon="firstIcon || appConfig.ui.icons.chevronDoubleLeft" />
+        </slot>
+      </PaginationFirst>
+      <PaginationPrev v-if="showControls || $slots.prev" as-child>
+        <slot name="prev">
+          <UButton :color="color" :variant="variant" :size="size" :icon="prevIcon || appConfig.ui.icons.chevronLeft" />
+        </slot>
+      </PaginationPrev>
+
+      <template v-for="(item, index) in items">
+        <PaginationListItem v-if="item.type === 'page'" :key="index" as-child :value="item.value">
+          <slot name="item" v-bind="{ item, index, page, pageCount }">
+            <UButton
+              :color="page === item.value ? activeColor : color"
+              :variant="page === item.value ? activeVariant : variant"
+              :size="size"
+              :label="String(item.value)"
+              :ui="{ label: ui.label() }"
+              square
+            />
+          </slot>
+        </PaginationListItem>
+
+        <PaginationEllipsis v-else :key="item.type" :index="index" as-child>
+          <slot name="ellipsis">
+            <UButton :color="color" :variant="variant" :size="size" :icon="ellipsisIcon || appConfig.ui.icons.ellipsis" :class="ui.ellipsis()" />
+          </slot>
+        </PaginationEllipsis>
+      </template>
+
+      <PaginationNext v-if="showControls || $slots.next" as-child>
+        <slot name="next">
+          <UButton :color="color" :variant="variant" :size="size" :icon="nextIcon || appConfig.ui.icons.chevronRight" />
+        </slot>
+      </PaginationNext>
+      <PaginationLast v-if="showControls || $slots.last" as-child>
+        <slot name="last">
+          <UButton :color="color" :variant="variant" :size="size" :icon="lastIcon || appConfig.ui.icons.chevronDoubleRight" />
+        </slot>
+      </PaginationLast>
+    </PaginationList>
+  </PaginationRoot>
+</template>

src/runtime/types/index.d.ts

@@ -20,6 +20,7 @@ export * from '../components/Kbd.vue'
 export * from '../components/Link.vue'
 export * from '../components/Modal.vue'
 export * from '../components/NavigationMenu.vue'
+export * from '../components/Pagination.vue'
 export * from '../components/Popover.vue'
 export * from '../components/RadioGroup.vue'
 export * from '../components/Separator.vue'

src/theme/icons.ts

@@ -2,8 +2,11 @@ export default {
   chevronDown: 'i-heroicons-chevron-down-20-solid',
   chevronLeft: 'i-heroicons-chevron-left-20-solid',
   chevronRight: 'i-heroicons-chevron-right-20-solid',
+  chevronDoubleLeft: 'i-heroicons-chevron-double-left-20-solid',
+  chevronDoubleRight: 'i-heroicons-chevron-double-right-20-solid',
   check: 'i-heroicons-check-20-solid',
   close: 'i-heroicons-x-mark-20-solid',
+  ellipsis: 'i-heroicons-ellipsis-horizontal-20-solid',
   empty: 'i-heroicons-circle-stack-20-solid',
   loading: 'i-heroicons-arrow-path-20-solid',
   minus: 'i-heroicons-minus-20-solid',

src/theme/index.ts

@@ -18,6 +18,7 @@ export { default as kbd } from './kbd'
 export { default as link } from './link'
 export { default as modal } from './modal'
 export { default as navigationMenu } from './navigation-menu'
+export { default as pagination } from './pagination'
 export { default as popover } from './popover'
 export { default as radioGroup } from './radio-group'
 export { default as separator } from './separator'

src/theme/pagination.ts

@@ -0,0 +1,8 @@
+export default {
+  slots: {
+    root: '',
+    list: 'flex items-center gap-1',
+    ellipsis: 'pointer-events-none',
+    label: 'min-w-5'
+  }
+}