@ttdk-design-system/library-vue 0.0.0-stage → 1.0.0

package/src/web/pagination/pagination.vue

@@ -0,0 +1,730 @@
+<template>
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    :class="`ttdk-pagination ${className || ''}`.trim()"
+    :data-size="size || 'md'"
+    :style="{
+      ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+  >
+    <template v-if="$slots.default">
+      <slot />
+    </template>
+
+    <template v-if="!$slots.default">
+      <div class="ttdk-pagination-auto-wrapper">
+        <template v-if="getShouldShowLimit()">
+          <div
+            :class="`ttdk-pagination-limit ${limitClass || ''}`.trim()"
+            :style="{
+              ...buildUiVars(limitStyle),
+            }"
+          >
+            <template v-if="showLimitLabel !== false">
+              <span class="ttdk-pagination-limit-label">{{
+                limitLabel || "Baris per halaman:"
+              }}</span>
+            </template>
+
+            <template v-if="limitSlot">
+              {{ limitSlot }}
+            </template>
+
+            <template v-if="!limitSlot">
+              <Selectbox
+                :size="size === 'lg' ? 'md' : 'sm'"
+                :value="limit || 10"
+                :options="getLimitOptions()"
+                :onChange="(val) => handleLimitChange(val)"
+                :controlStyle="{
+                  minWidth: '70px',
+                  width: '76px',
+                  height:
+                    size === 'sm' ? '28px' : size === 'lg' ? '44px' : '36px',
+                  minHeight:
+                    size === 'sm' ? '28px' : size === 'lg' ? '44px' : '36px',
+                  padding: '0 8px',
+                  fontSize: '12px',
+                  ...buildUiVars(limitSelectStyle),
+                }"
+              ></Selectbox>
+            </template>
+          </div>
+        </template>
+
+        <ul
+          :class="`ttdk-pagination-content ${contentClass || ''}`.trim()"
+          :style="{
+            ...buildUiVars(contentStyle),
+          }"
+        >
+          <template v-if="showEdges || Boolean(onFirstPage)">
+            <li class="ttdk-pagination-item">
+              <button
+                type="button"
+                aria-label="Go to first page"
+                :class="
+                  `ttdk-pagination-link ttdk-pagination-first ${
+                    linkClass || ''
+                  }`.trim()
+                "
+                :data-size="size || 'md'"
+                :data-disabled="!getCanPrev() ? 'true' : 'false'"
+                :disabled="!getCanPrev()"
+                @click="
+                  async (event) => {
+                    if (onFirstPage) {
+                      onFirstPage();
+                    } else if (onPageChange) {
+                      onPageChange(1);
+                    }
+                  }
+                "
+                :style="{
+                  ...buildUiVars(linkStyle),
+                }"
+              >
+                <template v-if="firstIcon">
+                  {{ firstIcon }}
+                </template>
+
+                <template v-if="!firstIcon">
+                  <svg
+                    class="ttdk-pagination-icon"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    aria-hidden="true"
+                  >
+                    <polyline points="11 17 6 12 11 7"></polyline>
+                    <polyline points="18 17 13 12 18 7"></polyline>
+                  </svg>
+                </template>
+              </button>
+            </li>
+          </template>
+
+          <li class="ttdk-pagination-item">
+            <button
+              type="button"
+              aria-label="Go to previous page"
+              :class="
+                `ttdk-pagination-link ttdk-pagination-prev ${
+                  linkClass || ''
+                }`.trim()
+              "
+              :data-size="size || 'md'"
+              :data-disabled="!getCanPrev() ? 'true' : 'false'"
+              :disabled="!getCanPrev()"
+              @click="
+                async (event) => {
+                  if (onPrevPage) {
+                    onPrevPage();
+                  } else if (onPageChange) {
+                    onPageChange(Math.max(1, getCurrentPage() - 1));
+                  }
+                }
+              "
+              :style="{
+                ...buildUiVars(linkStyle),
+              }"
+            >
+              <template v-if="prevIcon">
+                {{ prevIcon }}
+              </template>
+
+              <template v-if="!prevIcon">
+                <svg
+                  class="ttdk-pagination-icon"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  aria-hidden="true"
+                >
+                  <polyline points="15 18 9 12 15 6"></polyline>
+                </svg>
+              </template>
+
+              <template v-if="!iconOnly">
+                <span class="ttdk-pagination-prev-text">{{
+                  prevText || "Previous"
+                }}</span>
+              </template>
+            </button>
+          </li>
+          <template v-if="showPageNumbers !== false">
+            <template :key="item.key" v-for="(item, index) in getPageRange()">
+              <li class="ttdk-pagination-item">
+                <template v-if="item.type === 'ellipsis'">
+                  <span aria-hidden="true" class="ttdk-pagination-ellipsis">
+                    <template v-if="ellipsisIcon">
+                      {{ ellipsisIcon }}
+                    </template>
+
+                    <template v-if="!ellipsisIcon">
+                      <svg
+                        class="ttdk-pagination-icon"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                      >
+                        <circle cx="12" cy="12" r="1"></circle>
+                        <circle cx="19" cy="12" r="1"></circle>
+                        <circle cx="5" cy="12" r="1"></circle>
+                      </svg>
+                    </template>
+
+                    <span class="ttdk-sr-only">More pages</span></span
+                  >
+                </template>
+
+                <template v-if="item.type === 'page'">
+                  <button
+                    type="button"
+                    :class="
+                      `ttdk-pagination-link ${linkClass || ''} ${
+                        item.value === getCurrentPage()
+                          ? activeLinkClass || ''
+                          : ''
+                      }`.trim()
+                    "
+                    :aria-current="
+                      item.value === getCurrentPage() ? 'page' : undefined
+                    "
+                    :data-active="
+                      item.value === getCurrentPage() ? 'true' : 'false'
+                    "
+                    :data-size="size || 'md'"
+                    @click="
+                      async (event) => {
+                        if (onPageChange) {
+                          onPageChange(Number(item.value));
+                        }
+                      }
+                    "
+                    :style="{
+                      ...buildUiVars(linkStyle),
+                      ...(item.value === getCurrentPage()
+                        ? buildUiVars(activeLinkStyle)
+                        : {}),
+                    }"
+                  >
+                    {{ item.value }}
+                  </button>
+                </template>
+              </li>
+            </template>
+          </template>
+
+          <li class="ttdk-pagination-item">
+            <button
+              type="button"
+              aria-label="Go to next page"
+              :class="
+                `ttdk-pagination-link ttdk-pagination-next ${
+                  linkClass || ''
+                }`.trim()
+              "
+              :data-size="size || 'md'"
+              :data-disabled="!getCanNext() ? 'true' : 'false'"
+              :disabled="!getCanNext()"
+              @click="
+                async (event) => {
+                  if (onNextPage) {
+                    onNextPage();
+                  } else if (onPageChange) {
+                    onPageChange(
+                      Math.min(getTotalPages(), getCurrentPage() + 1)
+                    );
+                  }
+                }
+              "
+              :style="{
+                ...buildUiVars(linkStyle),
+              }"
+            >
+              <template v-if="!iconOnly">
+                <span class="ttdk-pagination-next-text">{{
+                  nextText || "Next"
+                }}</span>
+              </template>
+
+              <template v-if="nextIcon">
+                {{ nextIcon }}
+              </template>
+
+              <template v-if="!nextIcon">
+                <svg
+                  class="ttdk-pagination-icon"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  aria-hidden="true"
+                >
+                  <polyline points="9 18 15 12 9 6"></polyline>
+                </svg>
+              </template>
+            </button>
+          </li>
+          <template v-if="showEdges || Boolean(onLastPage)">
+            <li class="ttdk-pagination-item">
+              <button
+                type="button"
+                aria-label="Go to last page"
+                :class="
+                  `ttdk-pagination-link ttdk-pagination-last ${
+                    linkClass || ''
+                  }`.trim()
+                "
+                :data-size="size || 'md'"
+                :data-disabled="!getCanNext() ? 'true' : 'false'"
+                :disabled="!getCanNext()"
+                @click="
+                  async (event) => {
+                    if (onLastPage) {
+                      onLastPage();
+                    } else if (onPageChange) {
+                      onPageChange(getTotalPages());
+                    }
+                  }
+                "
+                :style="{
+                  ...buildUiVars(linkStyle),
+                }"
+              >
+                <template v-if="lastIcon">
+                  {{ lastIcon }}
+                </template>
+
+                <template v-if="!lastIcon">
+                  <svg
+                    class="ttdk-pagination-icon"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    aria-hidden="true"
+                  >
+                    <polyline points="13 17 18 12 13 7"></polyline>
+                    <polyline points="6 17 11 12 6 7"></polyline>
+                  </svg>
+                </template>
+              </button>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </template>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { getCurrentInstance } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+import Selectbox from "../selectbox/selectbox.vue";
+
+export type PaginationUiProps = UiProps;
+export interface PaginationPageItem {
+  type: "page" | "ellipsis";
+  value: number | string;
+  key: string;
+}
+export interface PaginationProps {
+  /**
+   * Nomor halaman saat ini (1-indexed).
+   * @default 1
+   */
+  page?: number;
+
+  /**
+   * Jumlah total halaman maksimum (alias untuk totalPages).
+   * @default 1
+   */
+  maxPages?: number;
+
+  /**
+   * Jumlah total halaman (alias maxPages).
+   * @default 1
+   */
+  totalPages?: number;
+
+  /**
+   * Jumlah baris/item data per halaman (page size).
+   * @default 10
+   */
+  limit?: number;
+
+  /**
+   * Callback saat jumlah baris per halaman diubah via select box.
+   */
+  onLimitChange?: (limit: number) => void;
+
+  /**
+   * Pilihan angka baris per halaman pada select box.
+   * @default [10, 20, 50, 100]
+   */
+  limitOptions?: number[];
+
+  /**
+   * Menentukan apakah navigasi ke halaman sebelumnya diizinkan (false = tombol Previous dinonaktifkan).
+   * @default false
+   */
+  canPrevPage?: boolean;
+
+  /**
+   * Menentukan apakah navigasi ke halaman berikutnya diizinkan (false = tombol Next dinonaktifkan).
+   * @default false
+   */
+  canNextPage?: boolean;
+
+  /**
+   * Callback saat tombol First Page (halaman pertama) diklik.
+   */
+  onFirstPage?: () => void;
+
+  /**
+   * Callback saat tombol Previous Page (halaman sebelumnya) diklik.
+   */
+  onPrevPage?: () => void;
+
+  /**
+   * Callback saat tombol Next Page (halaman selanjutnya) diklik.
+   */
+  onNextPage?: () => void;
+
+  /**
+   * Callback saat tombol Last Page (halaman terakhir) diklik.
+   */
+  onLastPage?: () => void;
+
+  /**
+   * Callback saat nomor halaman tertentu diklik.
+   */
+  onPageChange?: (page: number) => void;
+
+  /**
+   * Jumlah tetangga nomor halaman di samping kiri dan kanan halaman aktif.
+   * @default 1
+   */
+  siblingCount?: number;
+
+  /**
+   * Menampilkan tombol First (<<) dan Last (>>).
+   * @default false
+   */
+  showEdges?: boolean;
+
+  /**
+   * Menampilkan nomor halaman terpaginasi (1, 2, 3...).
+   * @default true
+   */
+  showPageNumbers?: boolean;
+
+  /**
+   * Skala ukuran pagination:
+   * - `'sm'`: 28px
+   * - `'md'`: 36px (standar)
+   * - `'lg'`: 44px
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: any;
+
+  /**
+   * Kustomisasi visual granular root kontainer pagination (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Style kustom untuk kontainer daftar pagination content (ul.ttdk-pagination-content).
+   */
+  contentStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk kontainer daftar pagination content.
+   */
+  contentClass?: string;
+
+  /**
+   * Style kustom untuk tombol link nomor halaman / navigasi.
+   */
+  linkStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk tombol link nomor halaman / navigasi.
+   */
+  linkClass?: string;
+
+  /**
+   * Style kustom untuk tombol nomor halaman saat aktif.
+   */
+  activeLinkStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk tombol nomor halaman saat aktif.
+   */
+  activeLinkClass?: string;
+
+  /**
+   * Style kustom untuk kontainer baris per halaman (limit).
+   */
+  limitStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk kontainer baris per halaman (limit).
+   */
+  limitClass?: string;
+
+  /**
+   * Style kustom untuk elemen Selectbox baris per halaman (limit).
+   */
+  limitSelectStyle?: UiProps;
+
+  /**
+   * Slot kustom untuk menggantikan elemen limit selector bawaan.
+   */
+  limitSlot?: any;
+
+  /**
+   * Menentukan apakah kontrol baris per halaman (limit selectbox) ditampilkan.
+   * Jika tidak disetel, otomatis mengikuti keberadaan callback onLimitChange.
+   */
+  showLimit?: boolean;
+
+  /**
+   * Menentukan apakah teks label 'Baris per halaman:' ditampilkan di samping selectbox limit.
+   * @default true
+   */
+  showLimitLabel?: boolean;
+
+  /**
+   * Teks label untuk opsi baris per halaman.
+   * @default 'Baris per halaman:'
+   */
+  limitLabel?: string;
+
+  /**
+   * Ikon kustom untuk tombol halaman pertama (first page, menggantikan <<).
+   */
+  firstIcon?: any;
+
+  /**
+   * Ikon kustom untuk tombol halaman sebelumnya (previous page, menggantikan <).
+   */
+  prevIcon?: any;
+
+  /**
+   * Ikon kustom untuk tombol halaman selanjutnya (next page, menggantikan >).
+   */
+  nextIcon?: any;
+
+  /**
+   * Ikon kustom untuk tombol halaman terakhir (last page, menggantikan >>).
+   */
+  lastIcon?: any;
+
+  /**
+   * Ikon kustom untuk separator elipsis (menggantikan ...).
+   */
+  ellipsisIcon?: any;
+
+  /**
+   * Label teks tombol Previous.
+   * @default 'Previous'
+   */
+  prevText?: string;
+
+  /**
+   * Label teks tombol Next.
+   * @default 'Next'
+   */
+  nextText?: string;
+
+  /**
+   * Mode hanya menampilkan ikon pada tombol Previous dan Next tanpa teks label.
+   * @default false
+   */
+  iconOnly?: boolean;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten kustom atau subkomponen compound (PaginationContent, PaginationItem, dll).
+   */
+  children?: any;
+}
+
+/**
+ * Komponen Pagination navigasi halaman dengan dukungan Compound API (ala Shadcn UI) dan Props-driven mode.
+ */
+
+const props = withDefaults(defineProps<PaginationProps>(), {
+  showPageNumbers: true,
+  showLimitLabel: true,
+  showEdges: false,
+  page: 1,
+  limit: 10,
+  siblingCount: 1,
+  size: "md",
+  prevText: "Previous",
+  nextText: "Next",
+});
+
+function getCurrentPage() {
+  return props.page !== undefined ? props.page : 1;
+}
+function getTotalPages() {
+  if (props.maxPages !== undefined) return props.maxPages;
+  if (props.totalPages !== undefined) return props.totalPages;
+  return 1;
+}
+function getCanPrev() {
+  const instance = getCurrentInstance();
+  const vnodeProps = instance?.vnode?.props || {};
+  if ("canPrevPage" in vnodeProps || "can-prev-page" in vnodeProps) {
+    return Boolean(props.canPrevPage);
+  }
+  return getCurrentPage() > 1;
+}
+function getCanNext() {
+  const instance = getCurrentInstance();
+  const vnodeProps = instance?.vnode?.props || {};
+  if ("canNextPage" in vnodeProps || "can-next-page" in vnodeProps) {
+    return Boolean(props.canNextPage);
+  }
+  return getCurrentPage() < getTotalPages();
+}
+function getShouldShowLimit() {
+  const instance = getCurrentInstance();
+  const vnodeProps = instance?.vnode?.props || {};
+  if ("showLimit" in vnodeProps || "show-limit" in vnodeProps) {
+    return Boolean(props.showLimit);
+  }
+  return Boolean(
+    props.onLimitChange ||
+      vnodeProps.onLimitChange ||
+      vnodeProps["onLimit-change"] ||
+      vnodeProps["onUpdate:limit"],
+  );
+}
+function getLimitOptions() {
+  const opts = props.limitOptions || [10, 20, 50, 100];
+  return opts.map((opt: number) => ({
+    label: String(opt),
+    value: opt,
+  }));
+}
+function getPageRange() {
+  const total = getTotalPages();
+  const current = getCurrentPage();
+  const sibling = props.siblingCount !== undefined ? props.siblingCount : 1;
+  if (total <= 1) {
+    return [
+      {
+        type: "page",
+        value: 1,
+        key: "page-1",
+      },
+    ];
+  }
+  const totalPageNumbers = sibling * 2 + 5;
+  if (total <= totalPageNumbers) {
+    const pages: PaginationPageItem[] = [];
+    for (let i = 1; i <= total; i++) {
+      pages.push({
+        type: "page",
+        value: i,
+        key: `page-${i}`,
+      });
+    }
+    return pages;
+  }
+  const leftSiblingIndex = Math.max(current - sibling, 1);
+  const rightSiblingIndex = Math.min(current + sibling, total);
+  const shouldShowLeftDots = leftSiblingIndex > 2;
+  const shouldShowRightDots = rightSiblingIndex < total - 1;
+  if (!shouldShowLeftDots && shouldShowRightDots) {
+    const leftItemCount = 3 + 2 * sibling;
+    const pages: PaginationPageItem[] = [];
+    for (let i = 1; i <= leftItemCount; i++) {
+      pages.push({
+        type: "page",
+        value: i,
+        key: `page-${i}`,
+      });
+    }
+    pages.push({
+      type: "ellipsis",
+      value: "...",
+      key: "ellipsis-right",
+    });
+    pages.push({
+      type: "page",
+      value: total,
+      key: `page-${total}`,
+    });
+    return pages;
+  }
+  if (shouldShowLeftDots && !shouldShowRightDots) {
+    const rightItemCount = 3 + 2 * sibling;
+    const pages: PaginationPageItem[] = [
+      {
+        type: "page",
+        value: 1,
+        key: "page-1",
+      },
+      {
+        type: "ellipsis",
+        value: "...",
+        key: "ellipsis-left",
+      },
+    ];
+    for (let i = total - rightItemCount + 1; i <= total; i++) {
+      pages.push({
+        type: "page",
+        value: i,
+        key: `page-${i}`,
+      });
+    }
+    return pages;
+  }
+  const pages: PaginationPageItem[] = [
+    {
+      type: "page",
+      value: 1,
+      key: "page-1",
+    },
+    {
+      type: "ellipsis",
+      value: "...",
+      key: "ellipsis-left",
+    },
+  ];
+  for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+    pages.push({
+      type: "page",
+      value: i,
+      key: `page-${i}`,
+    });
+  }
+  pages.push({
+    type: "ellipsis",
+    value: "...",
+    key: "ellipsis-right",
+  });
+  pages.push({
+    type: "page",
+    value: total,
+    key: `page-${total}`,
+  });
+  return pages;
+}
+function handleLimitChange(val: any) {
+  if (props.onLimitChange) {
+    props.onLimitChange(Number(val));
+  }
+}
+</script>