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

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

@@ -0,0 +1,247 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+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;
+}
+
+declare const component: DefineComponent<PaginationProps>;
+export default component;

package/src/web/popover/AI_GUIDE.md

@@ -0,0 +1,163 @@
+# <Popover /> — TTDK Component Reference
+
+Komponen Popover TTDK Design System — Selaras dengan Spesifikasi Nuxt UI Popover (UPopover): - Mendukung mode 'click' dan mode 'hover' dengan configurable openDelay dan closeDelay - Floating UI otomatis (computePosition, autoUpdate, flip, shift, offset, arrow) - Posisi cerdas (top, bottom, left, right, start, end) - Elemen panah (arrow) penunjuk arah dinamis - Mode modal dengan backdrop overlay - Penanganan dismissible & closePrevent (Esc key, outside click) - Dukungan controlled state (v-model:open) dan uncontrolled defaultOpen
+
+## 1. Stylesheets & Theming (Pure CSS)
+Import the corresponding stylesheet for the theme you wish to use:
+- **COMMON Theme**: `import "@ttdk-design-system/library-<react|vue|svelte>/web/popover/popover.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Popover from "@ttdk-design-system/library-react/web/popover";
+
+// Vue 3
+import Popover from "@ttdk-design-system/library-vue/web/popover";
+
+// Svelte
+import Popover from "@ttdk-design-system/library-svelte/web/popover";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `open?` | `boolean` | `-` | Status visibilitas popover (mode terkontrol / controlled state). Mendukung `v-model:open` pada Vue 3 dan controlled prop `open` pada React. |
+| `defaultOpen?` | `boolean` | `false` | Status visibilitas awal saat pertama kali dirender (mode tidak terkontrol / uncontrolled initial state). |
+| `arrow?` | `boolean` | `false` | Menampilkan elemen panah (arrow) penunjuk arah yang menunjuk ke elemen pemicu. |
+| `dismissible?` | `boolean` | `true` | Mengizinkan popover ditutup saat pengguna mengeklik area di luar popover atau menekan tombol `Escape`. Jika bernilai `false`, popover tidak akan tertutup dan event `onClosePrevent` akan dipanggil. |
+| `modal?` | `boolean` | `false` | Mengaktifkan mode modal dengan menampilkan lapisan latar belakang redup (backdrop overlay) serta memblokir interaksi di luar popover dan mengunci scroll latar belakang. |
+| `preventScroll?` | `boolean` | `false` | Mengunci pengguliran halaman web (body scroll lock) saat popover sedang terbuka, sehingga pengguna tidak dapat menggulir halaman di latar belakang. Otomatis aktif saat `modal={true}` kecuali dinyatakan `false`. |
+| `lockScroll?` | `boolean` | `false` | Alias untuk `preventScroll`. |
+| `disabled?` | `boolean` | `false` | Menonaktifkan pemicu sehingga popover tidak dapat dibuka. |
+| `content?` | `PopoverContentOptions | any` | `-` | Opsi konfigurasi penempatan dan benturan popover (side, align, sideOffset, dsb.) ATAU elemen konten popover secara langsung jika tidak menggunakan slot/children. |
+| `panel?` | `any` | `-` | Konten kustom panel popover (alias untuk konten popover jika `content` dipakai untuk konfigurasi). Menerima ReactNode, VNode, string, atau render function `({ close }) => ReactNode`. |
+| `panelContent?` | `any` | `-` | Konten kustom panel popover (kompatibilitas selaras dengan Dropdown panelContent). Menerima ReactNode, VNode, string, atau render function `({ close }) => ReactNode`. |
+| `placement?` | `| 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'` | `bottom` | Pintasan posisi penempatan panel popover Floating UI ('top', 'bottom', 'left', 'right', dsb.) Selaras dengan konfigurasi content.side dan content.align. |
+| `offsetDistance?` | `number` | `8` | Jarak offset dalam pixel dari elemen pemicu (shorthand untuk content.sideOffset). |
+| `block?` | `boolean` | `false` | Menjadikan popover memenuhi lebar kontainer penuh (full width 100%). |
+| `ui?` | `PopoverUiProps` | `-` | Kustomisasi visual granular wrapper utama (UiProps). |
+| `style?` | `any` | `-` | Style inline CSS native untuk wrapper luar. |
+| `className?` | `string` | `-` | Class CSS kustom untuk wrapper luar. |
+| `triggerClass?` | `string` | `-` | Class CSS kustom untuk pemicu (trigger container). |
+| `triggerStyle?` | `UiProps` | `-` | Style kustom untuk pemicu (UiProps). |
+| `contentClass?` | `string` | `-` | Class CSS kustom untuk panel popover konten. |
+| `contentStyle?` | `UiProps` | `-` | Style kustom untuk panel popover konten (UiProps). |
+| `arrowClass?` | `string` | `-` | Class CSS kustom untuk elemen panah (arrow). |
+| `arrowStyle?` | `UiProps` | `-` | Style kustom untuk elemen panah (UiProps). |
+| `overlayClass?` | `string` | `-` | Class CSS kustom untuk lapisan latar belakang redup (modal overlay). |
+| `overlayStyle?` | `UiProps` | `-` | Style kustom untuk lapisan latar belakang redup (UiProps). |
+| `onUpdateOpen?` | `(open: boolean) => void` | `-` | Callback event saat status terbuka/tertutup berubah (kompatibel dengan v-model:open pada Vue 3). |
+| `onOpenChange?` | `(open: boolean) => void` | `-` | Callback event saat status terbuka/tertutup berubah (alias standar React). |
+| `onOpen?` | `() => void` | `-` | Callback event saat popover terbuka. |
+| `onClose?` | `() => void` | `-` | Callback event saat popover ditutup. |
+| `onClosePrevent?` | `() => void` | `-` | Callback event saat pengguna mencoba menutup popover tetapi dicegah karena dismissible={false}. |
+| `children?` | `any` | `-` | Elemen pemicu (trigger), tombol, atau komponen anak lainnya. |
+
+### Sub-interface: `PopoverContentOptions`
+
+| Field | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `side?` | `'top' | 'right' | 'bottom' | 'left'` | `bottom` | Sisi penempatan relatif terhadap elemen pemicu (trigger). |
+| `align?` | `'start' | 'center' | 'end'` | `center` | Penjajaran di sepanjang sumbu sisi yang dipilih. |
+| `sideOffset?` | `number` | `8` | Jarak offset dalam pixel dari elemen pemicu (trigger). |
+| `alignOffset?` | `number` | `0` | Offset dalam pixel di sepanjang sumbu penjajaran (alignment axis). |
+| `avoidCollisions?` | `boolean` | `true` | Mencegah popover terpotong keluar dari batas viewport layar dengan memanfaatkan middleware flip dan shift. |
+| `collisionBoundary?` | `any` | `-` | Batas kontainer pendeteksi benturan viewport. |
+| `collisionPadding?` | `number` | `8` | Jarak padding minimal dalam pixel dari tepi layar saat terjadi benturan. |
+| `arrowPadding?` | `number` | `8` | Jarak padding minimal dalam pixel untuk elemen panah (arrow) dari sudut popover. |
+| `sticky?` | `'partial' | 'always'` | `-` | Perilaku popover saat elemen pemicu tergulung keluar layar ('partial' | 'always'). |
+| `hideWhenDetached?` | `boolean` | `false` | Sembunyikan popover ketika pemicu terpisah atau tidak terlihat di viewport. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import { useState } from "react";
+import Popover from "@ttdk-design-system/library-react/web/popover";
+import Button from "@ttdk-design-system/library-react/button";
+import "@ttdk-design-system/library-react/web/popover/popover.css";
+import "@ttdk-design-system/library-react/button/button.css";
+
+export function Example() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={setOpen}
+      arrow={true}
+      content={{ side: "bottom", align: "center", sideOffset: 8 }}
+      panel={
+        <div style={{ padding: "8px", maxWidth: "260px" }}>
+          <h4 style={{ margin: "0 0 6px 0", fontSize: "14px", fontWeight: 600 }}>Informasi Pasien</h4>
+          <p style={{ margin: 0, fontSize: "13px", color: "#6b7280" }}>
+            Data rekam medis terhubung langsung ke SATUSEHAT HL7 FHIR.
+          </p>
+        </div>
+      }
+    >
+      <Button variant="primary">Buka Popover</Button>
+    </Popover>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import Popover from "@ttdk-design-system/library-vue/web/popover";
+import Button from "@ttdk-design-system/library-vue/button";
+import "@ttdk-design-system/library-vue/web/popover/popover.css";
+import "@ttdk-design-system/library-vue/button/button.css";
+
+const isOpen = ref(false);
+</script>
+
+<template>
+  <Popover v-model:open="isOpen" arrow :content="{ side: 'bottom', align: 'center', sideOffset: 8 }">
+    <Button variant="primary">Buka Popover</Button>
+    <template #content="{ close }">
+      <div style="padding: 8px; max-width: 260px">
+        <h4 style="margin: 0 0 6px 0; font-size: 14px; font-weight: 600">Informasi Pasien</h4>
+        <p style="margin: 0 0 12px 0; font-size: 13px; color: #6b7280">
+          Data rekam medis terhubung langsung ke SATUSEHAT HL7 FHIR.
+        </p>
+        <Button size="sm" variant="outline" @click="close">Tutup</Button>
+      </div>
+    </template>
+  </Popover>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Popover from "@ttdk-design-system/library-svelte/web/popover";
+  import Button from "@ttdk-design-system/library-svelte/button";
+  import "@ttdk-design-system/library-svelte/web/popover/popover.css";
+  import "@ttdk-design-system/library-svelte/button/button.css";
+
+  let isOpen = false;
+</script>
+
+<Popover
+  open={isOpen}
+  arrow={true}
+  panel="Data rekam medis terintegrasi HL7 FHIR SATUSEHAT."
+>
+  <Button variant="primary">Buka Popover</Button>
+</Popover>
+```

package/src/web/popover/index.ts

@@ -0,0 +1,3 @@
+export { default } from "./popover.vue";
+export { default as Popover } from "./popover.vue";
+export * from "./popover.vue";