feat(component): add support for button custom labels

Author: fabiobiondi

apps/website/src/routes/docs/tailwind/(components)/pagination/index.tsx

@@ -135,6 +135,7 @@ export default component$(() => {
           boundaryCount={boundaryCount.value}
           activeClass="!bg-cyan-500"
           defaultClass="bg-cyan-200"
+          labels={{ prev: '⬅️', next: '➡️', first: 'START', last: 'END' }}
         />
       </div>
     </div>

packages/kit-headless/src/components/pagination/pagination.tsx

@@ -7,14 +7,14 @@ import { Button as HeadlessButton } from '@qwik-ui/primitives';
  *
  * PROPS
  * pageIndex: default pagination value
- * activeStyles: The styles of the active page button
- * normalStyles: The styles of the inactive page buttons
+ * V activeStyles: The styles of the active page button
+ * V normalStyles: The styles of the inactive page buttons
+ * V customArrowTexts: { previous, next }
  * disabled: enable/disable paginator
  * color: primary | secondary
  * variant: outlined (show border without bg)
  * shape: rounded | square
  * size: 'sm' | 'md' | 'lg'
- * customArrowTexts: { previous, next }
  * paginationRange (see https://mui.com/material-ui/react-pagination/#pagination-ranges)
  *
  * EVENTS
@@ -38,8 +38,16 @@ export interface IRenderPaginationItemProps {
   key?: string | number;
   activeClass?: string;
   defaultClass?: string;
+  labels?: TPaginationLabels;
 }
 
+export type TPaginationLabels = {
+  first?: string;
+  last?: string;
+  next?: string;
+  prev?: string;
+};
+
 export type TPaginationItemValue =
   | 'prev'
   | 'next'
@@ -79,11 +87,13 @@ export interface IGetPaginationItemsOptions {
   showLastButton?: boolean;
   activeClass?: string;
   defaultClass?: string;
+  labels?: TPaginationLabels;
 }
 
 export const getPaginationItems = (
   page: IGetPaginationItems['page'],
   count: IGetPaginationItems['count'],
+  labels: TPaginationLabels | undefined,
   {
     boundaryCount = 1,
     siblingCount = 1,
@@ -185,9 +195,10 @@ export const Pagination = component$(
     pages,
     activeClass,
     defaultClass,
+    labels,
     ...rest
   }: IPaginationProps) => {
-    const pagi = getPaginationItems(page, pages, rest);
+    const pagi = getPaginationItems(page, pages, labels, rest);
 
     const _onPaging$ = $((page: number) => {
       if (page < 1 || page > pages) return;
@@ -206,6 +217,7 @@ export const Pagination = component$(
                   activeClass={activeClass}
                   defaultClass={defaultClass}
                   key={i}
+                  labels={labels}
                   onClick$={() =>
                     _onPaging$(
                       (() => {

packages/kit-tailwind/src/components/pagination/pagination.tsx

@@ -32,7 +32,23 @@ export const RenderPaginationItem = component$(
     value,
     activeClass,
     defaultClass,
+    labels,
   }: IRenderPaginationItemProps) => {
+    function getLabel() {
+      switch (value) {
+        case 'prev':
+          return labels?.prev || '‹';
+        case 'next':
+          return labels?.next || '›';
+        case 'first':
+          return labels?.first || 'first';
+        case 'last':
+          return labels?.last || 'last';
+        default:
+          return value;
+      }
+    }
+
     return (
       <Button
         onClick$={onClick$}
@@ -44,7 +60,7 @@ export const RenderPaginationItem = component$(
         circle
         class={ariaCurrent ? activeClass : defaultClass}
       >
-        {value === 'prev' ? '‹' : value === 'next' ? '›' : value}
+        {getLabel()}
       </Button>
     );
   }