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

package/src/web/pagination/manifest.json

@@ -0,0 +1,432 @@
+{
+  "name": "@ttdk-design-system/pagination",
+  "component": "Pagination",
+  "folder": "pagination",
+  "description": "Komponen Pagination navigasi halaman dengan dukungan Compound API (ala Shadcn UI) dan Props-driven mode.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "pagination.css",
+      "importPath": "web/pagination/pagination.css"
+    }
+  ],
+  "props": {
+    "page": {
+      "name": "page",
+      "type": "number",
+      "optional": true,
+      "default": "1",
+      "description": "Nomor halaman saat ini (1-indexed).",
+      "example": null,
+      "param": null
+    },
+    "maxPages": {
+      "name": "maxPages",
+      "type": "number",
+      "optional": true,
+      "default": "1",
+      "description": "Jumlah total halaman maksimum (alias untuk totalPages).",
+      "example": null,
+      "param": null
+    },
+    "totalPages": {
+      "name": "totalPages",
+      "type": "number",
+      "optional": true,
+      "default": "1",
+      "description": "Jumlah total halaman (alias maxPages).",
+      "example": null,
+      "param": null
+    },
+    "limit": {
+      "name": "limit",
+      "type": "number",
+      "optional": true,
+      "default": "10",
+      "description": "Jumlah baris/item data per halaman (page size).",
+      "example": null,
+      "param": null
+    },
+    "onLimitChange": {
+      "name": "onLimitChange",
+      "type": "(limit: number) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback saat jumlah baris per halaman diubah via select box.",
+      "example": null,
+      "param": null
+    },
+    "limitOptions": {
+      "name": "limitOptions",
+      "type": "number[]",
+      "optional": true,
+      "default": "[10, 20, 50, 100]",
+      "description": "Pilihan angka baris per halaman pada select box.",
+      "example": null,
+      "param": null
+    },
+    "canPrevPage": {
+      "name": "canPrevPage",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menentukan apakah navigasi ke halaman sebelumnya diizinkan (false = tombol Previous dinonaktifkan).",
+      "example": null,
+      "param": null
+    },
+    "canNextPage": {
+      "name": "canNextPage",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menentukan apakah navigasi ke halaman berikutnya diizinkan (false = tombol Next dinonaktifkan).",
+      "example": null,
+      "param": null
+    },
+    "onFirstPage": {
+      "name": "onFirstPage",
+      "type": "() => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback saat tombol First Page (halaman pertama) diklik.",
+      "example": null,
+      "param": null
+    },
+    "onPrevPage": {
+      "name": "onPrevPage",
+      "type": "() => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback saat tombol Previous Page (halaman sebelumnya) diklik.",
+      "example": null,
+      "param": null
+    },
+    "onNextPage": {
+      "name": "onNextPage",
+      "type": "() => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback saat tombol Next Page (halaman selanjutnya) diklik.",
+      "example": null,
+      "param": null
+    },
+    "onLastPage": {
+      "name": "onLastPage",
+      "type": "() => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback saat tombol Last Page (halaman terakhir) diklik.",
+      "example": null,
+      "param": null
+    },
+    "onPageChange": {
+      "name": "onPageChange",
+      "type": "(page: number) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback saat nomor halaman tertentu diklik.",
+      "example": null,
+      "param": null
+    },
+    "siblingCount": {
+      "name": "siblingCount",
+      "type": "number",
+      "optional": true,
+      "default": "1",
+      "description": "Jumlah tetangga nomor halaman di samping kiri dan kanan halaman aktif.",
+      "example": null,
+      "param": null
+    },
+    "showEdges": {
+      "name": "showEdges",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan tombol First (<<) dan Last (>>).",
+      "example": null,
+      "param": null
+    },
+    "showPageNumbers": {
+      "name": "showPageNumbers",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Menampilkan nomor halaman terpaginasi (1, 2, 3...).",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg'",
+      "optional": true,
+      "default": "md",
+      "description": "Skala ukuran pagination: - `'sm'`: 28px - `'md'`: 36px (standar) - `'lg'`: 44px",
+      "example": null,
+      "param": null
+    },
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Inline CSS style object native.",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular root kontainer pagination (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "contentStyle": {
+      "name": "contentStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk kontainer daftar pagination content (ul.ttdk-pagination-content).",
+      "example": null,
+      "param": null
+    },
+    "contentClass": {
+      "name": "contentClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk kontainer daftar pagination content.",
+      "example": null,
+      "param": null
+    },
+    "linkStyle": {
+      "name": "linkStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk tombol link nomor halaman / navigasi.",
+      "example": null,
+      "param": null
+    },
+    "linkClass": {
+      "name": "linkClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk tombol link nomor halaman / navigasi.",
+      "example": null,
+      "param": null
+    },
+    "activeLinkStyle": {
+      "name": "activeLinkStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk tombol nomor halaman saat aktif.",
+      "example": null,
+      "param": null
+    },
+    "activeLinkClass": {
+      "name": "activeLinkClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk tombol nomor halaman saat aktif.",
+      "example": null,
+      "param": null
+    },
+    "limitStyle": {
+      "name": "limitStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk kontainer baris per halaman (limit).",
+      "example": null,
+      "param": null
+    },
+    "limitClass": {
+      "name": "limitClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk kontainer baris per halaman (limit).",
+      "example": null,
+      "param": null
+    },
+    "limitSelectStyle": {
+      "name": "limitSelectStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen Selectbox baris per halaman (limit).",
+      "example": null,
+      "param": null
+    },
+    "limitSlot": {
+      "name": "limitSlot",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Slot kustom untuk menggantikan elemen limit selector bawaan.",
+      "example": null,
+      "param": null
+    },
+    "showLimit": {
+      "name": "showLimit",
+      "type": "boolean",
+      "optional": true,
+      "default": null,
+      "description": "Menentukan apakah kontrol baris per halaman (limit selectbox) ditampilkan. Jika tidak disetel, otomatis mengikuti keberadaan callback onLimitChange.",
+      "example": null,
+      "param": null
+    },
+    "showLimitLabel": {
+      "name": "showLimitLabel",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Menentukan apakah teks label 'Baris per halaman:' ditampilkan di samping selectbox limit.",
+      "example": null,
+      "param": null
+    },
+    "limitLabel": {
+      "name": "limitLabel",
+      "type": "string",
+      "optional": true,
+      "default": "Baris per halaman:",
+      "description": "Teks label untuk opsi baris per halaman.",
+      "example": null,
+      "param": null
+    },
+    "firstIcon": {
+      "name": "firstIcon",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Ikon kustom untuk tombol halaman pertama (first page, menggantikan <<).",
+      "example": null,
+      "param": null
+    },
+    "prevIcon": {
+      "name": "prevIcon",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Ikon kustom untuk tombol halaman sebelumnya (previous page, menggantikan <).",
+      "example": null,
+      "param": null
+    },
+    "nextIcon": {
+      "name": "nextIcon",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Ikon kustom untuk tombol halaman selanjutnya (next page, menggantikan >).",
+      "example": null,
+      "param": null
+    },
+    "lastIcon": {
+      "name": "lastIcon",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Ikon kustom untuk tombol halaman terakhir (last page, menggantikan >>).",
+      "example": null,
+      "param": null
+    },
+    "ellipsisIcon": {
+      "name": "ellipsisIcon",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Ikon kustom untuk separator elipsis (menggantikan ...).",
+      "example": null,
+      "param": null
+    },
+    "prevText": {
+      "name": "prevText",
+      "type": "string",
+      "optional": true,
+      "default": "Previous",
+      "description": "Label teks tombol Previous.",
+      "example": null,
+      "param": null
+    },
+    "nextText": {
+      "name": "nextText",
+      "type": "string",
+      "optional": true,
+      "default": "Next",
+      "description": "Label teks tombol Next.",
+      "example": null,
+      "param": null
+    },
+    "iconOnly": {
+      "name": "iconOnly",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Mode hanya menampilkan ikon pada tombol Previous dan Next tanpa teks label.",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten kustom atau subkomponen compound (PaginationContent, PaginationItem, dll).",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {
+    "PaginationPageItem": {
+      "type": {
+        "name": "type",
+        "type": "'page' | 'ellipsis'",
+        "optional": false,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      },
+      "value": {
+        "name": "value",
+        "type": "number | string",
+        "optional": false,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      },
+      "key": {
+        "name": "key",
+        "type": "string",
+        "optional": false,
+        "default": null,
+        "description": "",
+        "example": null,
+        "param": null
+      }
+    }
+  },
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/pagination/pagination-content.vue

@@ -0,0 +1,42 @@
+<template>
+  <ul
+    :class="`ttdk-pagination-content ${className || ''}`.trim()"
+    :style="{
+      ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+  >
+    <slot />
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface PaginationContentProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * Kustomisasi visual granular ul.ttdk-pagination-content (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten pagination content (kumpulan PaginationItem).
+   */
+  children?: any;
+}
+
+/**
+ * Komponen kontainer daftar halaman `<ul>` (Compound PaginationContent ala Shadcn UI).
+ */
+
+const props = defineProps<PaginationContentProps>();
+</script>

package/src/web/pagination/pagination-content.vue.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface PaginationContentProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * Kustomisasi visual granular ul.ttdk-pagination-content (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten pagination content (kumpulan PaginationItem).
+   */
+  children?: any;
+}
+
+declare const component: DefineComponent<PaginationContentProps>;
+export default component;

package/src/web/pagination/pagination-ellipsis.vue

@@ -0,0 +1,55 @@
+<template>
+  <span
+    aria-hidden="true"
+    :class="`ttdk-pagination-ellipsis ${className || ''}`.trim()"
+    :style="{
+      ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+  >
+    <template v-if="icon">
+      {{ icon }}
+    </template>
+
+    <template v-if="!icon">
+      <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>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface PaginationEllipsisProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * Kustomisasi visual granular elipsis (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Ikon kustom untuk pemisah elipsis (menggantikan ...).
+   */
+  icon?: any;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+}
+
+/**
+ * Komponen pemisah elipsis `...` (Compound PaginationEllipsis ala Shadcn UI).
+ */
+
+const props = defineProps<PaginationEllipsisProps>();
+</script>

package/src/web/pagination/pagination-ellipsis.vue.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface PaginationEllipsisProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * Kustomisasi visual granular elipsis (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Ikon kustom untuk pemisah elipsis (menggantikan ...).
+   */
+  icon?: any;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+}
+
+declare const component: DefineComponent<PaginationEllipsisProps>;
+export default component;