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

package/dist/web/pagination/index.d.ts

@@ -0,0 +1,19 @@
+export { default as Pagination } from './pagination.svelte';
+export { default as PaginationContent } from './pagination-content.svelte';
+export { default as PaginationItem } from './pagination-item.svelte';
+export { default as PaginationLink } from './pagination-link.svelte';
+export { default as PaginationPrevious } from './pagination-previous.svelte';
+export { default as PaginationNext } from './pagination-next.svelte';
+export { default as PaginationFirst } from './pagination-first.svelte';
+export { default as PaginationLast } from './pagination-last.svelte';
+export { default as PaginationEllipsis } from './pagination-ellipsis.svelte';
+export * from './pagination.svelte';
+export * from './pagination-content.svelte';
+export * from './pagination-item.svelte';
+export * from './pagination-link.svelte';
+export * from './pagination-previous.svelte';
+export * from './pagination-next.svelte';
+export * from './pagination-first.svelte';
+export * from './pagination-last.svelte';
+export * from './pagination-ellipsis.svelte';
+export { default } from './pagination.svelte';

package/dist/web/pagination/index.js

@@ -0,0 +1,19 @@
+export { default as Pagination } from './pagination.svelte';
+export { default as PaginationContent } from './pagination-content.svelte';
+export { default as PaginationItem } from './pagination-item.svelte';
+export { default as PaginationLink } from './pagination-link.svelte';
+export { default as PaginationPrevious } from './pagination-previous.svelte';
+export { default as PaginationNext } from './pagination-next.svelte';
+export { default as PaginationFirst } from './pagination-first.svelte';
+export { default as PaginationLast } from './pagination-last.svelte';
+export { default as PaginationEllipsis } from './pagination-ellipsis.svelte';
+export * from './pagination.svelte';
+export * from './pagination-content.svelte';
+export * from './pagination-item.svelte';
+export * from './pagination-link.svelte';
+export * from './pagination-previous.svelte';
+export * from './pagination-next.svelte';
+export * from './pagination-first.svelte';
+export * from './pagination-last.svelte';
+export * from './pagination-ellipsis.svelte';
+export { default } from './pagination.svelte';

package/dist/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/dist/web/pagination/pagination-content.svelte

@@ -0,0 +1,25 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let className = void 0;
+export let ui = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+</script>
+
+<ul
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    })}
+  class={`ttdk-pagination-content ${className || ""}`.trim()}
+>
+  <slot />
+</ul>

package/dist/web/pagination/pagination-content.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponent } from "svelte";
+export interface PaginationContentProps {
+    /**
+     * Kustomisasi visual granular ul.ttdk-pagination-content (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Konten pagination content (kumpulan PaginationItem).
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        className?: PaginationContentProps["className"];
+        ui?: PaginationContentProps["ui"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type PaginationContentProps_ = typeof __propDef.props;
+export type PaginationContentEvents = typeof __propDef.events;
+export type PaginationContentSlots = typeof __propDef.slots;
+export default class PaginationContent extends SvelteComponent<PaginationContentProps_, PaginationContentEvents, PaginationContentSlots> {
+}
+export {};

package/dist/web/pagination/pagination-ellipsis.svelte

@@ -0,0 +1,38 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let className = void 0;
+export let ui = void 0;
+export let icon = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+</script>
+
+<span
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    })}
+  aria-hidden="true"
+  class={`ttdk-pagination-ellipsis ${className || ""}`.trim()}
+>
+  {#if icon}
+    {icon}
+  {/if}
+  {#if !icon}
+    <svg class="ttdk-pagination-icon" viewBox="0 0 24 24" fill="none"
+      ><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle
+        cx="5"
+        cy="12"
+        r="1"
+      /></svg
+    >
+  {/if}<span class="ttdk-sr-only">More pages</span></span
+>

package/dist/web/pagination/pagination-ellipsis.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponent } from "svelte";
+export interface PaginationEllipsisProps {
+    /**
+     * Kustomisasi visual granular elipsis (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Ikon kustom untuk pemisah elipsis (menggantikan ...).
+     */
+    icon?: any;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        className?: PaginationEllipsisProps["className"];
+        ui?: PaginationEllipsisProps["ui"];
+        icon?: PaginationEllipsisProps["icon"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type PaginationEllipsisProps_ = typeof __propDef.props;
+export type PaginationEllipsisEvents = typeof __propDef.events;
+export type PaginationEllipsisSlots = typeof __propDef.slots;
+export default class PaginationEllipsis extends SvelteComponent<PaginationEllipsisProps_, PaginationEllipsisEvents, PaginationEllipsisSlots> {
+}
+export {};