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

package/src/web/sonner/sonner.vue

@@ -0,0 +1,180 @@
+<template>
+  <div
+    aria-hidden="true"
+    :class="`ttdk-sonner-wrapper ${className || ''}`"
+    :style="{
+      display: 'none',
+      ...(typeof style === 'object' ? style : {}),
+    }"
+  ></div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, watch } from "vue";
+import toastModule from "sonner-js";
+
+export type SonnerPosition =
+  | "top-left"
+  | "top-center"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-center"
+  | "bottom-right";
+export type SonnerTheme = "light" | "dark" | "system";
+export interface SonnerProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * Posisi penempatan toast pada layar.
+   * - 'top-left', 'top-center', 'top-right'
+   * - 'bottom-left', 'bottom-center', 'bottom-right'
+   *
+   * @default 'bottom-right'
+   */
+  position?:
+    | "top-left"
+    | "top-center"
+    | "top-right"
+    | "bottom-left"
+    | "bottom-center"
+    | "bottom-right";
+
+  /**
+   * Menampilkan warna semantik kaya (rich colors) untuk jenis status (sukses hijau, error merah, info biru, warning kuning).
+   *
+   * @default true
+   */
+  richColors?: boolean;
+
+  /**
+   * Menampilkan tombol silang penutup (close button) pada setiap kartu toast.
+   *
+   * @default true
+   */
+  closeButton?: boolean;
+
+  /**
+   * Menentukan tema visual kontainer toast ('light', 'dark', atau 'system').
+   *
+   * @default 'light'
+   */
+  theme?: "light" | "dark" | "system";
+
+  /**
+   * Membuka semua tumpukan toast secara melebar (expanded) secara default saat muncul.
+   *
+   * @default false
+   */
+  expand?: boolean;
+
+  /**
+   * Durasi tampilan toast dalam milidetik sebelum otomatis menghilang.
+   *
+   * @default 4000
+   */
+  duration?: number;
+
+  /**
+   * Jumlah maksimum kartu toast yang terlihat bertumpuk secara bersamaan di layar.
+   *
+   * @default 3
+   */
+  visibleToasts?: number;
+
+  /**
+   * Jarak vertikal antar kartu toast dalam piksel.
+   *
+   * @default 14
+   */
+  gap?: number;
+
+  /**
+   * Jarak offset tepi layar dalam piksel.
+   *
+   * @default 24
+   */
+  offset?: number;
+
+  /**
+   * Jarak offset pada perangkat seluler / mobile dalam piksel.
+   *
+   * @default 16
+   */
+  mobileOffset?: number;
+
+  /**
+   * Arah teks layout tata letak ('ltr' atau 'rtl').
+   *
+   * @default 'ltr'
+   */
+  dir?: "ltr" | "rtl";
+
+  /**
+   * Kelas CSS kustom tambahan untuk wadah toaster.
+   */
+  className?: string;
+}
+
+/**
+ * Komponen Sonner / Toaster untuk sistem notifikasi toast mengambang yang ringkas, kaya warna, dan responsif.
+ */
+const props = defineProps<SonnerProps>();
+
+function getToastInstance(): any {
+  const t = toastModule as any;
+  if (t && typeof t.default === "function") {
+    return t.default;
+  }
+  if (typeof t === "function") {
+    return t;
+  }
+  return t?.default || t;
+}
+
+function updateSonnerConfig() {
+  if (typeof window === "undefined" || typeof document === "undefined") return;
+  const instance = getToastInstance();
+  if (instance && typeof instance.config === "function") {
+    instance.config({
+      theme: props.theme === "dark" ? "dark" : "light",
+      expand: props.expand ?? false,
+      visibleToasts: props.visibleToasts ?? 3,
+      gap: props.gap ?? 14,
+      offset: props.offset ?? 24,
+      mobileOffset: props.mobileOffset ?? 16,
+      dir: props.dir ?? "ltr",
+      toastOptions: {
+        position: props.position ?? "bottom-right",
+        closeButton: props.closeButton ?? true,
+        richColors: props.richColors ?? true,
+        duration: props.duration ?? 4000,
+      },
+    });
+  }
+}
+
+onMounted(() => {
+  updateSonnerConfig();
+});
+
+watch(
+  () => [
+    props.position,
+    props.richColors,
+    props.closeButton,
+    props.theme,
+    props.expand,
+    props.duration,
+    props.visibleToasts,
+    props.gap,
+    props.offset,
+    props.mobileOffset,
+    props.dir,
+  ],
+  () => {
+    updateSonnerConfig();
+  }
+);
+</script>

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

@@ -0,0 +1,113 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import toastModule from "sonner-js";
+
+export type SonnerPosition =
+  | "top-left"
+  | "top-center"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-center"
+  | "bottom-right";
+
+export type SonnerTheme = "light" | "dark" | "system";
+
+export interface SonnerProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * Posisi penempatan toast pada layar.
+   * - 'top-left', 'top-center', 'top-right'
+   * - 'bottom-left', 'bottom-center', 'bottom-right'
+   *
+   * @default 'bottom-right'
+   */
+  position?:
+    | "top-left"
+    | "top-center"
+    | "top-right"
+    | "bottom-left"
+    | "bottom-center"
+    | "bottom-right";
+
+  /**
+   * Menampilkan warna semantik kaya (rich colors) untuk jenis status (sukses hijau, error merah, info biru, warning kuning).
+   *
+   * @default true
+   */
+  richColors?: boolean;
+
+  /**
+   * Menampilkan tombol silang penutup (close button) pada setiap kartu toast.
+   *
+   * @default true
+   */
+  closeButton?: boolean;
+
+  /**
+   * Menentukan tema visual kontainer toast ('light', 'dark', atau 'system').
+   *
+   * @default 'light'
+   */
+  theme?: "light" | "dark" | "system";
+
+  /**
+   * Membuka semua tumpukan toast secara melebar (expanded) secara default saat muncul.
+   *
+   * @default false
+   */
+  expand?: boolean;
+
+  /**
+   * Durasi tampilan toast dalam milidetik sebelum otomatis menghilang.
+   *
+   * @default 4000
+   */
+  duration?: number;
+
+  /**
+   * Jumlah maksimum kartu toast yang terlihat bertumpuk secara bersamaan di layar.
+   *
+   * @default 3
+   */
+  visibleToasts?: number;
+
+  /**
+   * Jarak vertikal antar kartu toast dalam piksel.
+   *
+   * @default 14
+   */
+  gap?: number;
+
+  /**
+   * Jarak offset tepi layar dalam piksel.
+   *
+   * @default 24
+   */
+  offset?: number;
+
+  /**
+   * Jarak offset pada perangkat seluler / mobile dalam piksel.
+   *
+   * @default 16
+   */
+  mobileOffset?: number;
+
+  /**
+   * Arah teks layout tata letak ('ltr' atau 'rtl').
+   *
+   * @default 'ltr'
+   */
+  dir?: "ltr" | "rtl";
+
+  /**
+   * Kelas CSS kustom tambahan untuk wadah toaster.
+   */
+  className?: string;
+}
+
+declare const component: DefineComponent<SonnerProps>;
+export default component;

package/src/web/table/AI_GUIDE.md

@@ -0,0 +1,145 @@
+# <Table /> — TTDK Component Reference
+
+Komponen kontainer utama tabel (Compound Table ala Shadcn UI).
+
+## 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/table/table.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Table from "@ttdk-design-system/library-react/web/table";
+
+// Vue 3
+import Table from "@ttdk-design-system/library-vue/web/table";
+
+// Svelte
+import Table from "@ttdk-design-system/library-svelte/web/table";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `variant?` | `'default' | 'striped' | 'clean'` | `default` | Varian tampilan visual tabel. - `'default'`: Tampilan standar dengan latar bersih dan bingkai kartu. - `'striped'`: Tampilan selang-seling (zebra). - `'clean'`: Tampilan minimalis tanpa border luar dan tanpa shadow. |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Kerapatan / ukuran tinggi baris tabel. - `'sm'`: Kompak (padat). - `'md'`: Standar. - `'lg'`: Lega. |
+| `rounded?` | `'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | (string & {}) | number` | `sm` | Sudut kelengkungan radius tabel. - Preset: `'none'` | `'xs'` | `'sm'` | `'md'` | `'lg'` | `'xl'` | `'full'` - Nilai custom: `'12px'`, `'1rem'`, atau angka `12` |
+| `shadow?` | `'none' | 'sm' | 'md' | 'lg' | (string & {})` | `sm` | Bayangan elevasi kontainer tabel. - Preset: `'none'` | `'sm'` | `'md'` | `'lg'` - Nilai custom: CSS box-shadow string (contoh: `'0 4px 20px rgba(0,0,0,0.1)'`) |
+| `minWidth?` | `string | number` | `-` | Lebar minimum elemen table di dalam wrapper untuk menjaga susunan kolom dan memicu horizontal scroll. Contoh: `700`, `'700px'`, `'max-content'` |
+| `maxHeight?` | `string | number` | `-` | Ketinggian maksimum kontainer tabel untuk memicu scroll vertikal internal (sangat direkomendasikan saat stickyHeader aktif). Contoh: `280`, `'280px'`, `'50vh'` |
+| `hoverable?` | `boolean` | `true` | Efek hover saat kursor melayang di atas baris tabel. |
+| `stickyHeader?` | `boolean` | `false` | Membuat header tabel menempel di atas (sticky) saat konten di-scroll. |
+| `loading?` | `boolean` | `false` | Menampilkan spinner loading overlay di atas tabel. |
+| `caption?` | `string` | `-` | Teks caption aksesibilitas untuk tabel (dirender sebagai elemen `<caption>`). |
+| `style?` | `any` | `-` | Inline CSS style object native. |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular root kontainer wrapper (.ttdk-table-wrapper) melalui UiProps. |
+| `tableStyle?` | `UiProps` | `-` | Style kustom untuk elemen table (table.ttdk-table) melalui UiProps. |
+| `tableClass?` | `string` | `-` | Class CSS kustom untuk elemen table (table.ttdk-table). |
+| `className?` | `string` | `-` | Class CSS kustom untuk kontainer wrapper luar. |
+| `children?` | `any` | `-` | Konten anak (TableHeader, TableBody, TableFooter, TableCaption). |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import Table from "@ttdk-design-system/library-react/table";
+import "@ttdk-design-system/library-react/table/table.css";
+
+export function Example() {
+  return (
+    <Table variant="striped" size="md">
+      <thead>
+        <tr>
+          <th>Kode Faskes</th>
+          <th>Nama Fasilitas</th>
+          <th>Jenis</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>P320101</td>
+          <td>Puskesmas Cibinong</td>
+          <td>Puskesmas</td>
+          <td>Aktif</td>
+        </tr>
+        <tr>
+          <td>RS320102</td>
+          <td>RSUD Ciawi</td>
+          <td>Rumah Sakit</td>
+          <td>Aktif</td>
+        </tr>
+      </tbody>
+    </Table>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import Table from "@ttdk-design-system/library-vue/table";
+import "@ttdk-design-system/library-vue/table/table.css";
+</script>
+
+<template>
+  <Table variant="striped" size="md">
+    <thead>
+      <tr>
+        <th>Kode Faskes</th>
+        <th>Nama Fasilitas</th>
+        <th>Jenis</th>
+        <th>Status</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>P320101</td>
+        <td>Puskesmas Cibinong</td>
+        <td>Puskesmas</td>
+        <td>Aktif</td>
+      </tr>
+      <tr>
+        <td>RS320102</td>
+        <td>RSUD Ciawi</td>
+        <td>Rumah Sakit</td>
+        <td>Aktif</td>
+      </tr>
+    </tbody>
+  </Table>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Table from "@ttdk-design-system/library-svelte/table";
+  import "@ttdk-design-system/library-svelte/table/table.css";
+</script>
+
+<Table variant="striped" size="md">
+  <thead>
+    <tr>
+      <th>Kode Faskes</th>
+      <th>Nama Fasilitas</th>
+      <th>Jenis</th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>P320101</td>
+      <td>Puskesmas Cibinong</td>
+      <td>Puskesmas</td>
+      <td>Aktif</td>
+    </tr>
+    <tr>
+      <td>RS320102</td>
+      <td>RSUD Ciawi</td>
+      <td>Rumah Sakit</td>
+      <td>Aktif</td>
+    </tr>
+  </tbody>
+</Table>
+```

package/src/web/table/index.ts

@@ -0,0 +1,34 @@
+export { default as Table } from './table.vue';
+export { default as TableHeader } from './table-header.vue';
+export { default as TableBody } from './table-body.vue';
+export { default as TableFooter } from './table-footer.vue';
+export { default as TableRow } from './table-row.vue';
+export { default as TableHead } from './table-head.vue';
+export { default as TableCell } from './table-cell.vue';
+export { default as TableCaption } from './table-caption.vue';
+export { default as TableEmpty } from './table-empty.vue';
+
+export * from './table.vue';
+export * from './table-header.vue';
+export * from './table-body.vue';
+export * from './table-footer.vue';
+export * from './table-row.vue';
+export * from './table-head.vue';
+export * from './table-cell.vue';
+export * from './table-caption.vue';
+export * from './table-empty.vue';
+
+// Re-export TanStack VUE Table (All core + framework adapter hooks & renderers)
+export {
+  useVueTable,
+  FlexRender,
+  createColumnHelper,
+  getCoreRowModel,
+  getSortedRowModel,
+  getPaginationRowModel,
+  getFilteredRowModel,
+  getExpandedRowModel,
+  getGroupedRowModel,
+} from '@tanstack/vue-table';
+export * from '@tanstack/vue-table';
+export { default } from './table.vue';

package/src/web/table/manifest.json

@@ -0,0 +1,168 @@
+{
+  "name": "@ttdk-design-system/table",
+  "component": "Table",
+  "folder": "table",
+  "description": "Komponen kontainer utama tabel (Compound Table ala Shadcn UI).",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "table.css",
+      "importPath": "web/table/table.css"
+    }
+  ],
+  "props": {
+    "variant": {
+      "name": "variant",
+      "type": "'default' | 'striped' | 'clean'",
+      "optional": true,
+      "default": "default",
+      "description": "Varian tampilan visual tabel. - `'default'`: Tampilan standar dengan latar bersih dan bingkai kartu. - `'striped'`: Tampilan selang-seling (zebra). - `'clean'`: Tampilan minimalis tanpa border luar dan tanpa shadow.",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg'",
+      "optional": true,
+      "default": "md",
+      "description": "Kerapatan / ukuran tinggi baris tabel. - `'sm'`: Kompak (padat). - `'md'`: Standar. - `'lg'`: Lega.",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | (string & {}) | number",
+      "optional": true,
+      "default": "sm",
+      "description": "Sudut kelengkungan radius tabel. - Preset: `'none'` | `'xs'` | `'sm'` | `'md'` | `'lg'` | `'xl'` | `'full'` - Nilai custom: `'12px'`, `'1rem'`, atau angka `12`",
+      "example": null,
+      "param": null
+    },
+    "shadow": {
+      "name": "shadow",
+      "type": "'none' | 'sm' | 'md' | 'lg' | (string & {})",
+      "optional": true,
+      "default": "sm",
+      "description": "Bayangan elevasi kontainer tabel. - Preset: `'none'` | `'sm'` | `'md'` | `'lg'` - Nilai custom: CSS box-shadow string (contoh: `'0 4px 20px rgba(0,0,0,0.1)'`)",
+      "example": null,
+      "param": null
+    },
+    "minWidth": {
+      "name": "minWidth",
+      "type": "string | number",
+      "optional": true,
+      "default": null,
+      "description": "Lebar minimum elemen table di dalam wrapper untuk menjaga susunan kolom dan memicu horizontal scroll. Contoh: `700`, `'700px'`, `'max-content'`",
+      "example": null,
+      "param": null
+    },
+    "maxHeight": {
+      "name": "maxHeight",
+      "type": "string | number",
+      "optional": true,
+      "default": null,
+      "description": "Ketinggian maksimum kontainer tabel untuk memicu scroll vertikal internal (sangat direkomendasikan saat stickyHeader aktif). Contoh: `280`, `'280px'`, `'50vh'`",
+      "example": null,
+      "param": null
+    },
+    "hoverable": {
+      "name": "hoverable",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Efek hover saat kursor melayang di atas baris tabel.",
+      "example": null,
+      "param": null
+    },
+    "stickyHeader": {
+      "name": "stickyHeader",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Membuat header tabel menempel di atas (sticky) saat konten di-scroll.",
+      "example": null,
+      "param": null
+    },
+    "loading": {
+      "name": "loading",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan spinner loading overlay di atas tabel.",
+      "example": null,
+      "param": null
+    },
+    "caption": {
+      "name": "caption",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Teks caption aksesibilitas untuk tabel (dirender sebagai elemen `<caption>`).",
+      "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 wrapper (.ttdk-table-wrapper) melalui UiProps.",
+      "example": null,
+      "param": null
+    },
+    "tableStyle": {
+      "name": "tableStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen table (table.ttdk-table) melalui UiProps.",
+      "example": null,
+      "param": null
+    },
+    "tableClass": {
+      "name": "tableClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen table (table.ttdk-table).",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk kontainer wrapper luar.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten anak (TableHeader, TableBody, TableFooter, TableCaption).",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/table/table-body.vue

@@ -0,0 +1,42 @@
+<template>
+  <tbody
+    :class="`ttdk-table-body ${className || ''}`.trim()"
+    :style="{
+      ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+  >
+    <slot />
+  </tbody>
+</template>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface TableBodyProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * Kustomisasi visual granular tbody (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten baris data (TableRow).
+   */
+  children?: any;
+}
+
+/**
+ * Komponen badan tabel `<tbody>` (Compound TableBody).
+ */
+
+const props = defineProps<TableBodyProps>();
+</script>