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

package/src/web/table/table-body.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 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;
+}
+
+declare const component: DefineComponent<TableBodyProps>;
+export default component;

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

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

package/src/web/table/table-caption.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 TableCaptionProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * Kustomisasi visual granular caption (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten caption tabel.
+   */
+  children?: any;
+}
+
+declare const component: DefineComponent<TableCaptionProps>;
+export default component;

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

@@ -0,0 +1,71 @@
+<template>
+  <td
+    :class="`ttdk-table-cell ${className || ''}`.trim()"
+    :colSpan="colSpan"
+    :rowSpan="rowSpan"
+    :style="{
+      textAlign: align || 'left',
+      ...(width
+        ? {
+            width: width,
+          }
+        : {}),
+      ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+  >
+    <slot />
+  </td>
+</template>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface TableCellProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * Penyelarasan teks sel ('left' | 'center' | 'right').
+   * @default 'left'
+   */
+  align?: "left" | "center" | "right";
+
+  /**
+   * Lebar sel kustom.
+   */
+  width?: string;
+
+  /**
+   * Jumlah span kolom (colspan).
+   */
+  colSpan?: number;
+
+  /**
+   * Jumlah span baris (rowspan).
+   */
+  rowSpan?: number;
+
+  /**
+   * Kustomisasi visual granular td (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten di dalam sel tabel.
+   */
+  children?: any;
+}
+
+/**
+ * Komponen sel data tabel `<td>` (Compound TableCell).
+ */
+
+const props = defineProps<TableCellProps>();
+</script>

package/src/web/table/table-cell.vue.d.ts

@@ -0,0 +1,49 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface TableCellProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * Penyelarasan teks sel ('left' | 'center' | 'right').
+   * @default 'left'
+   */
+  align?: "left" | "center" | "right";
+
+  /**
+   * Lebar sel kustom.
+   */
+  width?: string;
+
+  /**
+   * Jumlah span kolom (colspan).
+   */
+  colSpan?: number;
+
+  /**
+   * Jumlah span baris (rowspan).
+   */
+  rowSpan?: number;
+
+  /**
+   * Kustomisasi visual granular td (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten di dalam sel tabel.
+   */
+  children?: any;
+}
+
+declare const component: DefineComponent<TableCellProps>;
+export default component;

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

@@ -0,0 +1,105 @@
+<template>
+  <tr
+    :class="`ttdk-table-row ttdk-table-empty-row ${className || ''}`.trim()"
+    :style="{
+      ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+  >
+    <td class="ttdk-table-cell" :colSpan="colSpan || 10">
+      <div class="ttdk-table-empty-wrapper">
+        <template v-if="title || description">
+          <p class="ttdk-table-empty-title">
+            {{ title || "Tidak ada dataset yang cocok" }}
+          </p>
+
+          <template v-if="description">
+            <p class="ttdk-table-empty-desc">{{ description }}</p>
+          </template>
+
+          <template v-if="actionLabel">
+            <button
+              type="button"
+              class="ttdk-table-empty-action"
+              @click="
+                async (event) => {
+                  if (onAction) {
+                    onAction();
+                  }
+                }
+              "
+            >
+              {{ actionLabel }}
+            </button>
+          </template>
+
+          <slot />
+        </template>
+
+        <template v-else>
+          <slot />
+        </template>
+      </div>
+    </td>
+  </tr>
+</template>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface TableEmptyProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * Jumlah span kolom (colspan).
+   * @default 10
+   */
+  colSpan?: number;
+
+  /**
+   * Judul pesan data kosong.
+   * @default 'Tidak ada dataset yang cocok'
+   */
+  title?: string;
+
+  /**
+   * Deskripsi penjelasan data kosong.
+   * @default 'Atur ulang filter atau ubah kata kunci pencarian.'
+   */
+  description?: string;
+
+  /**
+   * Teks tombol aksi reset / refresh.
+   * @default 'Atur ulang'
+   */
+  actionLabel?: string;
+
+  /**
+   * Callback ketika tombol aksi diklik.
+   */
+  onAction?: () => void;
+
+  /**
+   * Kustomisasi visual granular wadah tr empty (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten kustom di dalam wadah empty state.
+   */
+  children?: any;
+}
+
+/**
+ * Komponen status data kosong tabel (Compound TableEmpty).
+ */
+
+const props = defineProps<TableEmptyProps>();
+</script>

package/src/web/table/table-empty.vue.d.ts

@@ -0,0 +1,57 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface TableEmptyProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * Jumlah span kolom (colspan).
+   * @default 10
+   */
+  colSpan?: number;
+
+  /**
+   * Judul pesan data kosong.
+   * @default 'Tidak ada dataset yang cocok'
+   */
+  title?: string;
+
+  /**
+   * Deskripsi penjelasan data kosong.
+   * @default 'Atur ulang filter atau ubah kata kunci pencarian.'
+   */
+  description?: string;
+
+  /**
+   * Teks tombol aksi reset / refresh.
+   * @default 'Atur ulang'
+   */
+  actionLabel?: string;
+
+  /**
+   * Callback ketika tombol aksi diklik.
+   */
+  onAction?: () => void;
+
+  /**
+   * Kustomisasi visual granular wadah tr empty (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten kustom di dalam wadah empty state.
+   */
+  children?: any;
+}
+
+declare const component: DefineComponent<TableEmptyProps>;
+export default component;

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

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

package/src/web/table/table-footer.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 TableFooterProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * Kustomisasi visual granular tfoot (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten baris footer (TableRow).
+   */
+  children?: any;
+}
+
+declare const component: DefineComponent<TableFooterProps>;
+export default component;

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

@@ -0,0 +1,78 @@
+<template>
+  <th
+    :class="`ttdk-table-head ${className || ''}`.trim()"
+    :data-sortable="sortable ? 'true' : 'false'"
+    :style="{
+      textAlign: align || 'left',
+      ...(width
+        ? {
+            width: width,
+          }
+        : {}),
+      ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+    @click="
+      async (e) => {
+        if (onClick) {
+          onClick(e);
+        }
+      }
+    "
+  >
+    <slot />
+  </th>
+</template>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface TableHeadProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * Penyelarasan teks header ('left' | 'center' | 'right').
+   * @default 'left'
+   */
+  align?: "left" | "center" | "right";
+
+  /**
+   * Lebar kolom (misal: '120px', '25%').
+   */
+  width?: string;
+
+  /**
+   * Menandakan kolom dapat disortir secara interaktif.
+   * @default false
+   */
+  sortable?: boolean;
+
+  /**
+   * Kustomisasi visual granular th (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Fungsi callback saat header kolom diklik.
+   */
+  onClick?: (event: any) => void;
+
+  /**
+   * Konten teks atau komponen di dalam header kolom.
+   */
+  children?: any;
+}
+
+/**
+ * Komponen sel header tabel `<th>` (Compound TableHead).
+ */
+
+const props = defineProps<TableHeadProps>();
+</script>

package/src/web/table/table-head.vue.d.ts

@@ -0,0 +1,50 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface TableHeadProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * Penyelarasan teks header ('left' | 'center' | 'right').
+   * @default 'left'
+   */
+  align?: "left" | "center" | "right";
+
+  /**
+   * Lebar kolom (misal: '120px', '25%').
+   */
+  width?: string;
+
+  /**
+   * Menandakan kolom dapat disortir secara interaktif.
+   * @default false
+   */
+  sortable?: boolean;
+
+  /**
+   * Kustomisasi visual granular th (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Fungsi callback saat header kolom diklik.
+   */
+  onClick?: (event: any) => void;
+
+  /**
+   * Konten teks atau komponen di dalam header kolom.
+   */
+  children?: any;
+}
+
+declare const component: DefineComponent<TableHeadProps>;
+export default component;

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

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

package/src/web/table/table-header.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 TableHeaderProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * Kustomisasi visual granular thead (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten baris header (TableRow).
+   */
+  children?: any;
+}
+
+declare const component: DefineComponent<TableHeaderProps>;
+export default component;