1
0
mirror of https://github.com/robonen/tools.git synced 2026-03-20 10:54:44 +00:00

feat(vue/primitives): implement pagination components with accessibility and testing

This commit is contained in:
2026-03-08 04:18:10 +07:00
parent 41d5e18f6b
commit bcc9cb2915
28 changed files with 2175 additions and 960 deletions

View File

@@ -0,0 +1,42 @@
<script lang="ts">
import type { PrimitiveProps } from '@/primitive';
export interface PaginationPrevProps extends PrimitiveProps {}
</script>
<script setup lang="ts">
import { computed } from 'vue';
import { useForwardExpose } from '@robonen/vue';
import { Primitive } from '@/primitive';
import { injectPaginationContext } from './context';
const { as = 'button' as const } = defineProps<PaginationPrevProps>();
const { forwardRef } = useForwardExpose();
const ctx = injectPaginationContext();
const disabled = computed(() => ctx.isFirstPage.value || ctx.disabled.value);
const attrs = computed(() => ({
'aria-label': 'Previous Page',
'type': as === 'button' ? 'button' as const : undefined,
'disabled': disabled.value,
}));
function handleClick() {
if (!disabled.value) {
ctx.onPageChange(ctx.currentPage.value - 1);
}
}
</script>
<template>
<Primitive
:ref="forwardRef"
:as
v-bind="attrs"
@click="handleClick"
>
<slot>Prev page</slot>
</Primitive>
</template>