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

package/src/web/modal/modal.vue

@@ -0,0 +1,344 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="isOpen"
+      ref="rootRef"
+      :class="[`ttdk-modal-portal ${className || ''}`.trim(), $attrs.class]"
+      role="dialog"
+      :aria-modal="modal !== false ? 'true' : 'false'"
+      :tabIndex="-1"
+      :style="{
+        ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+      }"
+    >
+      <!-- 1. Backdrop Overlay -->
+      <div
+        v-if="overlay !== false"
+        :class="[`ttdk-modal-overlay ${overlayClass || ''}`.trim()]"
+        :style="{
+          ...buildUiVars(overlayStyle),
+        }"
+        @click="handleOverlayClick"
+      />
+
+      <!-- 2. Modal Dialog Card -->
+      <div
+        ref="dialogRef"
+        :class="[
+          'ttdk-modal-dialog',
+          isAnimDone ? 'ttdk-modal-anim-done' : '',
+          isShaking ? 'ttdk-modal-shake' : '',
+          contentClass || ''
+        ].filter(Boolean).join(' ').trim()"
+        :data-size="size || 'md'"
+        :data-fullscreen="fullscreen ? 'true' : undefined"
+        :data-scrollable="scrollable !== false ? 'true' : undefined"
+        :style="{
+          ...buildUiVars(contentStyle),
+        }"
+      >
+        <!-- Slot: Full content override -->
+        <slot name="content" :close="() => closeModal(true)">
+          <!-- Modal Header -->
+          <div
+            v-if="hasHeader"
+            :class="[`ttdk-modal-header ${headerClass || ''}`.trim()]"
+            :style="{
+              ...buildUiVars(headerStyle),
+            }"
+          >
+            <slot name="header" :close="() => closeModal(true)">
+              <div class="ttdk-modal-header-info">
+                <h3 v-if="title" class="ttdk-modal-title">{{ title }}</h3>
+                <p v-if="description" class="ttdk-modal-description">{{ description }}</p>
+              </div>
+
+              <slot name="close" :close="() => closeModal(true)">
+                <button
+                  v-if="close !== false"
+                  type="button"
+                  class="ttdk-modal-close"
+                  aria-label="Tutup modal"
+                  @click="closeModal(true)"
+                >
+                  <component :is="closeIcon" v-if="closeIcon" />
+                  <svg
+                    v-else
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                  >
+                    <line x1="18" y1="6" x2="6" y2="18" />
+                    <line x1="6" y1="6" x2="18" y2="18" />
+                  </svg>
+                </button>
+              </slot>
+            </slot>
+          </div>
+
+          <!-- Modal Body -->
+          <div
+            :class="[`ttdk-modal-body ${bodyClass || ''}`.trim()]"
+            :style="{
+              ...buildUiVars(bodyStyle),
+            }"
+          >
+            <slot name="body" :close="() => closeModal(true)">
+              <slot :close="() => closeModal(true)" />
+            </slot>
+          </div>
+
+          <!-- Modal Footer -->
+          <div
+            v-if="hasFooter"
+            :class="[`ttdk-modal-footer ${footerClass || ''}`.trim()]"
+            :style="{
+              ...buildUiVars(footerStyle),
+            }"
+          >
+            <slot name="footer" :close="() => closeModal(true)" />
+          </div>
+        </slot>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted, useSlots, computed } from "vue";
+import { buildUiVars, type UiProps } from "../../core/types";
+
+export type ModalSize =
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | '4xl'
+  | '5xl'
+  | 'full';
+
+export type ModalUiProps = UiProps;
+
+export interface ModalProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  title?: string;
+  description?: string;
+  close?: boolean | any;
+  closeIcon?: any;
+  fullscreen?: boolean;
+  size?: ModalSize;
+  dismissible?: boolean;
+  preventClose?: boolean;
+  overlay?: boolean;
+  modal?: boolean;
+  scrollable?: boolean;
+  preventScroll?: boolean;
+  lockScroll?: boolean;
+  ui?: ModalUiProps;
+  className?: string;
+  class?: string;
+  style?: any;
+  overlayClass?: string;
+  overlayStyle?: UiProps;
+  contentClass?: string;
+  contentStyle?: UiProps;
+  headerClass?: string;
+  headerStyle?: UiProps;
+  bodyClass?: string;
+  bodyStyle?: UiProps;
+  footerClass?: string;
+  footerStyle?: UiProps;
+  onUpdateOpen?: (open: boolean) => void;
+  onOpenChange?: (open: boolean) => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+  onClosePrevent?: () => void;
+}
+
+const props = withDefaults(defineProps<ModalProps>(), {
+  defaultOpen: false,
+  close: true,
+  fullscreen: false,
+  size: "md",
+  dismissible: true,
+  preventClose: false,
+  overlay: true,
+  modal: true,
+  scrollable: true,
+  preventScroll: true,
+  lockScroll: true,
+});
+
+const emit = defineEmits<{
+  (e: "update:open", value: boolean): void;
+  (e: "update:modelValue", value: boolean): void;
+  (e: "open"): void;
+  (e: "close"): void;
+  (e: "close:prevent"): void;
+}>();
+
+const slots = useSlots();
+const rootRef = ref<HTMLElement | null>(null);
+const dialogRef = ref<HTMLElement | null>(null);
+
+const isOpen = ref(props.open !== undefined ? props.open : props.defaultOpen);
+const isShaking = ref(false);
+const isAnimDone = ref(false);
+let shakeTimer: any = null;
+let animTimer: any = null;
+
+const hasHeader = computed(() => {
+  return Boolean(slots.header || props.title || props.description || props.close !== false);
+});
+
+const hasFooter = computed(() => {
+  return Boolean(slots.footer);
+});
+
+let lockCount = 0;
+let originalOverflow = "";
+let originalPaddingRight = "";
+
+function lockBodyScroll() {
+  if (typeof document === "undefined") return;
+  if (lockCount === 0) {
+    originalOverflow = document.body.style.overflow;
+    originalPaddingRight = document.body.style.paddingRight;
+    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.overflow = "hidden";
+    if (scrollBarWidth > 0) {
+      document.body.style.paddingRight = scrollBarWidth + "px";
+    }
+  }
+  lockCount++;
+}
+
+function unlockBodyScroll() {
+  if (typeof document === "undefined") return;
+  lockCount = Math.max(0, lockCount - 1);
+  if (lockCount === 0) {
+    document.body.style.overflow = originalOverflow;
+    document.body.style.paddingRight = originalPaddingRight;
+  }
+}
+
+let isScrollLocked = false;
+function applyScrollLock(shouldLock: boolean) {
+  if (shouldLock && !isScrollLocked) {
+    lockBodyScroll();
+    isScrollLocked = true;
+  } else if (!shouldLock && isScrollLocked) {
+    unlockBodyScroll();
+    isScrollLocked = false;
+  }
+}
+
+function isDismissible() {
+  if (props.preventClose === true) return false;
+  return props.dismissible !== false;
+}
+
+function triggerShake() {
+  if (shakeTimer) clearTimeout(shakeTimer);
+  isAnimDone.value = true;
+  isShaking.value = true;
+  shakeTimer = setTimeout(() => {
+    isShaking.value = false;
+    shakeTimer = null;
+  }, 400);
+}
+
+function openModal() {
+  if (!isOpen.value) {
+    isOpen.value = true;
+    emit("update:open", true);
+    emit("update:modelValue", true);
+    emit("open");
+    if (props.onOpen) props.onOpen();
+    if (props.onUpdateOpen) props.onUpdateOpen(true);
+    if (props.onOpenChange) props.onOpenChange(true);
+  }
+}
+
+function closeModal(force?: boolean) {
+  if (!isDismissible() && !force) {
+    triggerShake();
+    emit("close:prevent");
+    if (props.onClosePrevent) props.onClosePrevent();
+    return;
+  }
+  if (isOpen.value) {
+    isOpen.value = false;
+    emit("update:open", false);
+    emit("update:modelValue", false);
+    emit("close");
+    if (props.onClose) props.onClose();
+    if (props.onUpdateOpen) props.onUpdateOpen(false);
+    if (props.onOpenChange) props.onOpenChange(false);
+  }
+}
+
+function handleOverlayClick() {
+  closeModal();
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (!isOpen.value) return;
+  if (event.key === "Escape") {
+    closeModal();
+  }
+}
+
+watch(
+  () => props.open,
+  (val) => {
+    if (val !== undefined && val !== isOpen.value) {
+      if (val) {
+        openModal();
+      } else {
+        closeModal(true);
+      }
+    }
+  }
+);
+
+watch(
+  isOpen,
+  (val) => {
+    const shouldLock = Boolean(props.preventScroll !== false && props.lockScroll !== false);
+    if (val) {
+      isAnimDone.value = false;
+      if (animTimer) clearTimeout(animTimer);
+      animTimer = setTimeout(() => {
+        isAnimDone.value = true;
+      }, 250);
+      if (shouldLock) applyScrollLock(true);
+      if (typeof document !== "undefined") {
+        document.addEventListener("keydown", handleKeyDown, true);
+      }
+    } else {
+      isAnimDone.value = false;
+      applyScrollLock(false);
+      if (typeof document !== "undefined") {
+        document.removeEventListener("keydown", handleKeyDown, true);
+      }
+    }
+  },
+  { immediate: true }
+);
+
+onUnmounted(() => {
+  if (shakeTimer) clearTimeout(shakeTimer);
+  applyScrollLock(false);
+  if (typeof document !== "undefined") {
+    document.removeEventListener("keydown", handleKeyDown, true);
+  }
+});
+</script>

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

@@ -0,0 +1,64 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, type UiProps } from "../../core/types";
+
+export type ModalSize =
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | '4xl'
+  | '5xl'
+  | 'full';
+
+export type ModalUiProps = UiProps;
+
+export interface ModalProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  title?: string;
+  description?: string;
+  close?: boolean | any;
+  closeIcon?: any;
+  fullscreen?: boolean;
+  size?: ModalSize;
+  dismissible?: boolean;
+  preventClose?: boolean;
+  overlay?: boolean;
+  modal?: boolean;
+  scrollable?: boolean;
+  preventScroll?: boolean;
+  lockScroll?: boolean;
+  ui?: ModalUiProps;
+  className?: string;
+  class?: string;
+  style?: any;
+  overlayClass?: string;
+  overlayStyle?: UiProps;
+  contentClass?: string;
+  contentStyle?: UiProps;
+  headerClass?: string;
+  headerStyle?: UiProps;
+  bodyClass?: string;
+  bodyStyle?: UiProps;
+  footerClass?: string;
+  footerStyle?: UiProps;
+  onUpdateOpen?: (open: boolean) => void;
+  onOpenChange?: (open: boolean) => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+  onClosePrevent?: () => void;
+}
+
+declare const component: DefineComponent<ModalProps, {}, {}, {}, {}, {}, {}, {
+  (e: "update:open", value: boolean): void;
+  (e: "update:modelValue", value: boolean): void;
+  (e: "open"): void;
+  (e: "close"): void;
+  (e: "close:prevent"): void;
+}>;
+export default component;

package/src/web/pagination/AI_GUIDE.md

@@ -0,0 +1,148 @@
+# <Pagination /> — TTDK Component Reference
+
+Komponen Pagination navigasi halaman dengan dukungan Compound API (ala Shadcn UI) dan Props-driven mode.
+
+## 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/pagination/pagination.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Pagination from "@ttdk-design-system/library-react/web/pagination";
+
+// Vue 3
+import Pagination from "@ttdk-design-system/library-vue/web/pagination";
+
+// Svelte
+import Pagination from "@ttdk-design-system/library-svelte/web/pagination";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `page?` | `number` | `1` | Nomor halaman saat ini (1-indexed). |
+| `maxPages?` | `number` | `1` | Jumlah total halaman maksimum (alias untuk totalPages). |
+| `totalPages?` | `number` | `1` | Jumlah total halaman (alias maxPages). |
+| `limit?` | `number` | `10` | Jumlah baris/item data per halaman (page size). |
+| `onLimitChange?` | `(limit: number) => void` | `-` | Callback saat jumlah baris per halaman diubah via select box. |
+| `limitOptions?` | `number[]` | `[10, 20, 50, 100]` | Pilihan angka baris per halaman pada select box. |
+| `canPrevPage?` | `boolean` | `false` | Menentukan apakah navigasi ke halaman sebelumnya diizinkan (false = tombol Previous dinonaktifkan). |
+| `canNextPage?` | `boolean` | `false` | Menentukan apakah navigasi ke halaman berikutnya diizinkan (false = tombol Next dinonaktifkan). |
+| `onFirstPage?` | `() => void` | `-` | Callback saat tombol First Page (halaman pertama) diklik. |
+| `onPrevPage?` | `() => void` | `-` | Callback saat tombol Previous Page (halaman sebelumnya) diklik. |
+| `onNextPage?` | `() => void` | `-` | Callback saat tombol Next Page (halaman selanjutnya) diklik. |
+| `onLastPage?` | `() => void` | `-` | Callback saat tombol Last Page (halaman terakhir) diklik. |
+| `onPageChange?` | `(page: number) => void` | `-` | Callback saat nomor halaman tertentu diklik. |
+| `siblingCount?` | `number` | `1` | Jumlah tetangga nomor halaman di samping kiri dan kanan halaman aktif. |
+| `showEdges?` | `boolean` | `false` | Menampilkan tombol First (<<) dan Last (>>). |
+| `showPageNumbers?` | `boolean` | `true` | Menampilkan nomor halaman terpaginasi (1, 2, 3...). |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Skala ukuran pagination: - `'sm'`: 28px - `'md'`: 36px (standar) - `'lg'`: 44px |
+| `style?` | `any` | `-` | Inline CSS style object native. |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular root kontainer pagination (UiProps). |
+| `contentStyle?` | `UiProps` | `-` | Style kustom untuk kontainer daftar pagination content (ul.ttdk-pagination-content). |
+| `contentClass?` | `string` | `-` | Class CSS kustom untuk kontainer daftar pagination content. |
+| `linkStyle?` | `UiProps` | `-` | Style kustom untuk tombol link nomor halaman / navigasi. |
+| `linkClass?` | `string` | `-` | Class CSS kustom untuk tombol link nomor halaman / navigasi. |
+| `activeLinkStyle?` | `UiProps` | `-` | Style kustom untuk tombol nomor halaman saat aktif. |
+| `activeLinkClass?` | `string` | `-` | Class CSS kustom untuk tombol nomor halaman saat aktif. |
+| `limitStyle?` | `UiProps` | `-` | Style kustom untuk kontainer baris per halaman (limit). |
+| `limitClass?` | `string` | `-` | Class CSS kustom untuk kontainer baris per halaman (limit). |
+| `limitSelectStyle?` | `UiProps` | `-` | Style kustom untuk elemen Selectbox baris per halaman (limit). |
+| `limitSlot?` | `any` | `-` | Slot kustom untuk menggantikan elemen limit selector bawaan. |
+| `showLimit?` | `boolean` | `-` | Menentukan apakah kontrol baris per halaman (limit selectbox) ditampilkan. Jika tidak disetel, otomatis mengikuti keberadaan callback onLimitChange. |
+| `showLimitLabel?` | `boolean` | `true` | Menentukan apakah teks label 'Baris per halaman:' ditampilkan di samping selectbox limit. |
+| `limitLabel?` | `string` | `Baris per halaman:` | Teks label untuk opsi baris per halaman. |
+| `firstIcon?` | `any` | `-` | Ikon kustom untuk tombol halaman pertama (first page, menggantikan <<). |
+| `prevIcon?` | `any` | `-` | Ikon kustom untuk tombol halaman sebelumnya (previous page, menggantikan <). |
+| `nextIcon?` | `any` | `-` | Ikon kustom untuk tombol halaman selanjutnya (next page, menggantikan >). |
+| `lastIcon?` | `any` | `-` | Ikon kustom untuk tombol halaman terakhir (last page, menggantikan >>). |
+| `ellipsisIcon?` | `any` | `-` | Ikon kustom untuk separator elipsis (menggantikan ...). |
+| `prevText?` | `string` | `Previous` | Label teks tombol Previous. |
+| `nextText?` | `string` | `Next` | Label teks tombol Next. |
+| `iconOnly?` | `boolean` | `false` | Mode hanya menampilkan ikon pada tombol Previous dan Next tanpa teks label. |
+| `className?` | `string` | `-` | Class CSS kustom. |
+| `children?` | `any` | `-` | Konten kustom atau subkomponen compound (PaginationContent, PaginationItem, dll). |
+
+### Sub-interface: `PaginationPageItem`
+
+| Field | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `type` | `'page' | 'ellipsis'` | `-` |  |
+| `value` | `number | string` | `-` |  |
+| `key` | `string` | `-` |  |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import { useState } from "react";
+import Pagination from "@ttdk-design-system/library-react/pagination";
+import "@ttdk-design-system/library-react/pagination/pagination.css";
+
+export function Example() {
+  const [page, setPage] = useState(1);
+  const [limit, setLimit] = useState(10);
+
+  return (
+    <Pagination
+      page={page}
+      totalPages={15}
+      limit={limit}
+      limitOptions={[10, 25, 50, 100]}
+      canPrevPage={page > 1}
+      canNextPage={page < 15}
+      onPageChange={(p) => setPage(p)}
+      onLimitChange={(l) => setLimit(l)}
+    />
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import Pagination from "@ttdk-design-system/library-vue/pagination";
+import "@ttdk-design-system/library-vue/pagination/pagination.css";
+
+const page = ref(1);
+const limit = ref(10);
+</script>
+
+<template>
+  <Pagination
+    :page="page"
+    :total-pages="15"
+    :limit="limit"
+    :limit-options="[10, 25, 50, 100]"
+    :can-prev-page="page > 1"
+    :can-next-page="page < 15"
+    @page-change="(p: number) => (page = p)"
+    @limit-change="(l: number) => (limit = l)"
+  />
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Pagination from "@ttdk-design-system/library-svelte/pagination";
+  import "@ttdk-design-system/library-svelte/pagination/pagination.css";
+
+  let page = 1;
+  let limit = 10;
+</script>
+
+<Pagination
+  {page}
+  totalPages={15}
+  {limit}
+  limitOptions={[10, 25, 50, 100]}
+  canPrevPage={page > 1}
+  canNextPage={page < 15}
+  on:pageChange={(e) => (page = e.detail)}
+  on:limitChange={(e) => (limit = e.detail)}
+/>
+```

package/src/web/pagination/index.ts

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