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

package/src/web/card/card.vue

@@ -0,0 +1,423 @@
+<template>
+  <div
+    :class="`ttdk-card ${className || ''}`.trim()"
+    :data-variant="variant || 'default'"
+    :data-size="size || 'md'"
+    :data-rounded="rounded || 'md'"
+    :data-width="cardWidth || 'auto'"
+    :data-hoverable="hoverable ? 'true' : 'false'"
+    :data-clickable="clickable || onClick ? 'true' : 'false'"
+    :data-disabled="disabled ? 'true' : 'false'"
+    :data-loading="loading ? 'true' : 'false'"
+    :tabIndex="clickable || onClick ? 0 : undefined"
+    :role="clickable || onClick ? 'button' : undefined"
+    @click="
+      async (event) => {
+        if (disabled || loading) return;
+        if (onClick) onClick(event);
+      }
+    "
+    @keydown="
+      async (event) => {
+        if (disabled || loading) return;
+        if (
+          (clickable || onClick) &&
+          (event.key === 'Enter' || event.key === ' ')
+        ) {
+          event.preventDefault();
+          if (onClick) onClick(event);
+        }
+      }
+    "
+    :style="{
+      ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+  >
+    <template v-if="cover && (!coverPosition || coverPosition === 'top')">
+      <div
+        :class="
+          `ttdk-card-cover ttdk-card-cover-top ${coverClass || ''}`.trim()
+        "
+        :style="{
+          ...buildUiVars(coverStyle),
+        }"
+      >
+        <template v-if="typeof cover === 'string'">
+          <img :src="cover" :alt="coverAlt || ''" />
+        </template>
+
+        <template v-if="typeof cover !== 'string'">
+          {{ cover }}
+        </template>
+      </div>
+    </template>
+
+    <template v-if="loading">
+      <div class="ttdk-card-skeleton">
+        <div class="ttdk-card-skeleton-header">
+          <div class="ttdk-card-skeleton-avatar"></div>
+          <div class="ttdk-card-skeleton-title-group">
+            <div
+              class="ttdk-card-skeleton-line ttdk-card-skeleton-line-title"
+            ></div>
+            <div
+              class="ttdk-card-skeleton-line ttdk-card-skeleton-line-subtitle"
+            ></div>
+          </div>
+        </div>
+        <div class="ttdk-card-skeleton-body">
+          <div
+            class="ttdk-card-skeleton-line"
+            :style="{
+              width: '100%',
+            }"
+          ></div>
+          <div
+            class="ttdk-card-skeleton-line"
+            :style="{
+              width: '85%',
+            }"
+          ></div>
+          <div
+            class="ttdk-card-skeleton-line"
+            :style="{
+              width: '60%',
+            }"
+          ></div>
+        </div>
+      </div>
+    </template>
+
+    <template v-if="!loading">
+      <template v-if="title || subtitle || extra">
+        <div
+          :class="
+            `ttdk-card-header ${
+              headerBorder !== false ? 'ttdk-card-header-bordered' : ''
+            } ${headerClass || ''}`.trim()
+          "
+          :style="{
+            ...buildUiVars(headerStyle),
+          }"
+        >
+          <div class="ttdk-card-header-main">
+            <template v-if="title">
+              <div
+                :class="`ttdk-card-title ${titleClass || ''}`.trim()"
+                :style="{
+                  ...buildUiVars(titleStyle),
+                }"
+              >
+                {{ title }}
+              </div>
+            </template>
+
+            <template v-if="subtitle">
+              <div
+                :class="`ttdk-card-subtitle ${subtitleClass || ''}`.trim()"
+                :style="{
+                  ...buildUiVars(subtitleStyle),
+                }"
+              >
+                {{ subtitle }}
+              </div>
+            </template>
+          </div>
+          <template v-if="extra">
+            <div
+              :class="`ttdk-card-extra ${extraClass || ''}`.trim()"
+              :style="{
+                ...buildUiVars(extraStyle),
+              }"
+            >
+              {{ extra }}
+            </div>
+          </template>
+        </div>
+      </template>
+
+      <div
+        :class="`ttdk-card-body ${bodyClass || ''}`.trim()"
+        :style="{
+          ...buildUiVars(bodyStyle),
+        }"
+      >
+        <slot />
+      </div>
+
+      <template v-if="footer || actions">
+        <div
+          :class="
+            `ttdk-card-footer ${
+              footerBorder !== false ? 'ttdk-card-footer-bordered' : ''
+            } ${footerClass || ''}`.trim()
+          "
+          :style="{
+            ...buildUiVars(footerStyle),
+          }"
+        >
+          <template v-if="footer">
+            <div class="ttdk-card-footer-content">{{ footer }}</div>
+          </template>
+
+          <template v-if="actions">
+            <div class="ttdk-card-actions">{{ actions }}</div>
+          </template>
+        </div>
+      </template>
+    </template>
+
+    <template v-if="cover && coverPosition === 'bottom'">
+      <div
+        :class="
+          `ttdk-card-cover ttdk-card-cover-bottom ${coverClass || ''}`.trim()
+        "
+        :style="{
+          ...buildUiVars(coverStyle),
+        }"
+      >
+        <template v-if="typeof cover === 'string'">
+          <img :src="cover" :alt="coverAlt || ''" />
+        </template>
+
+        <template v-if="typeof cover !== 'string'">
+          {{ cover }}
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+export type CardUiProps = UiProps;
+export interface CardProps {
+  /**
+   * Gaya varian visual kartu.
+   * - 'bordered': Kartu dengan border halus dan background card standar.
+   * - 'elevated': Kartu dengan bayangan elevasi bertingkat (shadow).
+   * - 'flat': Kartu dengan latar netral subtle tanpa bayangan.
+   * - 'ghost': Kartu transparan minimalis tanpa border atau bayangan.
+   *
+   * @default 'default'
+   */
+  variant?: "bordered" | "elevated" | "flat" | "ghost";
+
+  /**
+   * Kepadatan padding internal kartu.
+   * - 'sm': Padding kompak (12px / 16px).
+   * - 'md': Padding proporsional standar (20px / 24px).
+   * - 'lg': Padding lapang / hero (28px / 32px).
+   *
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Preset batas lebar kartu sesuai standar token TTDK.
+   * - 'auto': Fleksibel mengikuti lebar kontainer parent.
+   * - 'full': Lebar penuh 100%.
+   * - '1-1': 1128px (Grid Desktop Maksimal).
+   * - '1-2': 552px (Grid 1/2).
+   * - '1-3': 360px (Grid 1/3).
+   * - '1-4': 264px (Grid 1/4).
+   * - 'mobile': 328px (Optimal Layar Seluler).
+   *
+   * @default 'auto'
+   */
+  cardWidth?: "auto" | "full" | "1-1" | "1-2" | "1-3" | "1-4" | "mobile";
+
+  /**
+   * Sudut kelengkungan radius kartu.
+   *
+   * @default 'md'
+   */
+  rounded?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
+
+  /**
+   * Menambahkan efek hover interaktif (elevasi bayangan naik + border highlight + pointer kursor).
+   *
+   * @default false
+   */
+  hoverable?: boolean;
+
+  /**
+   * Menjadikan kartu sebagai elemen interaktif yang dapat diklik.
+   *
+   * @default false
+   */
+  clickable?: boolean;
+
+  /**
+   * Menampilkan efek placeholder shimmer / skeleton loader saat kartu dalam proses memuat data.
+   *
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Menonaktifkan interaksi kartu dan meredupkan opacity.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Judul kartu pada area header.
+   */
+  title?: any;
+
+  /**
+   * Subjudul atau teks deskripsi singkat di bawah judul.
+   */
+  subtitle?: any;
+
+  /**
+   * Konten pelengkap di sudut kanan atas header kartu (badge, menu tombol, link aksi).
+   */
+  extra?: any;
+
+  /**
+   * Media gambar cover atau banner visual kartu (berupa URL string gambar atau elemen/node kustom).
+   */
+  cover?: any;
+
+  /**
+   * Alt text untuk gambar cover jika `cover` berupa URL string.
+   */
+  coverAlt?: string;
+
+  /**
+   * Posisi media cover pada kartu ('top' atau 'bottom').
+   *
+   * @default 'top'
+   */
+  coverPosition?: "top" | "bottom";
+
+  /**
+   * Grup tombol aksi terstruktur di area footer kartu.
+   */
+  actions?: any;
+
+  /**
+   * Konten kustom untuk area footer kartu.
+   */
+  footer?: any;
+
+  /**
+   * Menampilkan garis pembatas divider di bawah header kartu.
+   *
+   * @default true
+   */
+  headerBorder?: boolean;
+
+  /**
+   * Menampilkan garis pembatas divider di atas footer kartu.
+   *
+   * @default true
+   */
+  footerBorder?: boolean;
+
+  /**
+   * Callback event saat kartu diklik.
+   */
+  onClick?: (event: any) => void;
+
+  /**
+   * Kustomisasi visual granular root kontainer kartu (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: any;
+
+  /**
+   * Class CSS kustom untuk root kontainer kartu.
+   */
+  className?: string;
+
+  /**
+   * Style kustom untuk area header kartu (UiProps).
+   */
+  headerStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk area header kartu.
+   */
+  headerClass?: string;
+
+  /**
+   * Style kustom untuk teks judul kartu (UiProps).
+   */
+  titleStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks judul kartu.
+   */
+  titleClass?: string;
+
+  /**
+   * Style kustom untuk teks subjudul / deskripsi header (UiProps).
+   */
+  subtitleStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks subjudul / deskripsi header.
+   */
+  subtitleClass?: string;
+
+  /**
+   * Style kustom untuk elemen extra di sudut kanan header (UiProps).
+   */
+  extraStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen extra di sudut kanan header.
+   */
+  extraClass?: string;
+
+  /**
+   * Style kustom untuk area body / konten utama kartu (UiProps).
+   */
+  bodyStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk area body / konten utama kartu.
+   */
+  bodyClass?: string;
+
+  /**
+   * Style kustom untuk area footer kartu (UiProps).
+   */
+  footerStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk area footer kartu.
+   */
+  footerClass?: string;
+
+  /**
+   * Style kustom untuk area media cover kartu (UiProps).
+   */
+  coverStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk area media cover kartu.
+   */
+  coverClass?: string;
+
+  /**
+   * Konten anak atau slot kustom (children).
+   */
+  children?: any;
+}
+
+const props = withDefaults(defineProps<CardProps>(), {
+  headerBorder: true,
+  footerBorder: true,
+});
+</script>

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

@@ -0,0 +1,232 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export type CardUiProps = UiProps;
+
+export interface CardProps {
+  /**
+   * Gaya varian visual kartu.
+   * - 'bordered': Kartu dengan border halus dan background card standar.
+   * - 'elevated': Kartu dengan bayangan elevasi bertingkat (shadow).
+   * - 'flat': Kartu dengan latar netral subtle tanpa bayangan.
+   * - 'ghost': Kartu transparan minimalis tanpa border atau bayangan.
+   *
+   * @default 'default'
+   */
+  variant?: "bordered" | "elevated" | "flat" | "ghost";
+
+  /**
+   * Kepadatan padding internal kartu.
+   * - 'sm': Padding kompak (12px / 16px).
+   * - 'md': Padding proporsional standar (20px / 24px).
+   * - 'lg': Padding lapang / hero (28px / 32px).
+   *
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Preset batas lebar kartu sesuai standar token TTDK.
+   * - 'auto': Fleksibel mengikuti lebar kontainer parent.
+   * - 'full': Lebar penuh 100%.
+   * - '1-1': 1128px (Grid Desktop Maksimal).
+   * - '1-2': 552px (Grid 1/2).
+   * - '1-3': 360px (Grid 1/3).
+   * - '1-4': 264px (Grid 1/4).
+   * - 'mobile': 328px (Optimal Layar Seluler).
+   *
+   * @default 'auto'
+   */
+  cardWidth?: "auto" | "full" | "1-1" | "1-2" | "1-3" | "1-4" | "mobile";
+
+  /**
+   * Sudut kelengkungan radius kartu.
+   *
+   * @default 'md'
+   */
+  rounded?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
+
+  /**
+   * Menambahkan efek hover interaktif (elevasi bayangan naik + border highlight + pointer kursor).
+   *
+   * @default false
+   */
+  hoverable?: boolean;
+
+  /**
+   * Menjadikan kartu sebagai elemen interaktif yang dapat diklik.
+   *
+   * @default false
+   */
+  clickable?: boolean;
+
+  /**
+   * Menampilkan efek placeholder shimmer / skeleton loader saat kartu dalam proses memuat data.
+   *
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Menonaktifkan interaksi kartu dan meredupkan opacity.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Judul kartu pada area header.
+   */
+  title?: any;
+
+  /**
+   * Subjudul atau teks deskripsi singkat di bawah judul.
+   */
+  subtitle?: any;
+
+  /**
+   * Konten pelengkap di sudut kanan atas header kartu (badge, menu tombol, link aksi).
+   */
+  extra?: any;
+
+  /**
+   * Media gambar cover atau banner visual kartu (berupa URL string gambar atau elemen/node kustom).
+   */
+  cover?: any;
+
+  /**
+   * Alt text untuk gambar cover jika `cover` berupa URL string.
+   */
+  coverAlt?: string;
+
+  /**
+   * Posisi media cover pada kartu ('top' atau 'bottom').
+   *
+   * @default 'top'
+   */
+  coverPosition?: "top" | "bottom";
+
+  /**
+   * Grup tombol aksi terstruktur di area footer kartu.
+   */
+  actions?: any;
+
+  /**
+   * Konten kustom untuk area footer kartu.
+   */
+  footer?: any;
+
+  /**
+   * Menampilkan garis pembatas divider di bawah header kartu.
+   *
+   * @default true
+   */
+  headerBorder?: boolean;
+
+  /**
+   * Menampilkan garis pembatas divider di atas footer kartu.
+   *
+   * @default true
+   */
+  footerBorder?: boolean;
+
+  /**
+   * Callback event saat kartu diklik.
+   */
+  onClick?: (event: any) => void;
+
+  /**
+   * Kustomisasi visual granular root kontainer kartu (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: any;
+
+  /**
+   * Class CSS kustom untuk root kontainer kartu.
+   */
+  className?: string;
+
+  /**
+   * Style kustom untuk area header kartu (UiProps).
+   */
+  headerStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk area header kartu.
+   */
+  headerClass?: string;
+
+  /**
+   * Style kustom untuk teks judul kartu (UiProps).
+   */
+  titleStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks judul kartu.
+   */
+  titleClass?: string;
+
+  /**
+   * Style kustom untuk teks subjudul / deskripsi header (UiProps).
+   */
+  subtitleStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks subjudul / deskripsi header.
+   */
+  subtitleClass?: string;
+
+  /**
+   * Style kustom untuk elemen extra di sudut kanan header (UiProps).
+   */
+  extraStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen extra di sudut kanan header.
+   */
+  extraClass?: string;
+
+  /**
+   * Style kustom untuk area body / konten utama kartu (UiProps).
+   */
+  bodyStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk area body / konten utama kartu.
+   */
+  bodyClass?: string;
+
+  /**
+   * Style kustom untuk area footer kartu (UiProps).
+   */
+  footerStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk area footer kartu.
+   */
+  footerClass?: string;
+
+  /**
+   * Style kustom untuk area media cover kartu (UiProps).
+   */
+  coverStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk area media cover kartu.
+   */
+  coverClass?: string;
+
+  /**
+   * Konten anak atau slot kustom (children).
+   */
+  children?: any;
+}
+
+declare const component: DefineComponent<CardProps>;
+export default component;

package/src/web/card/index.ts

@@ -0,0 +1,3 @@
+export { default } from './card.vue';
+export { default as Card } from './card.vue';
+export * from './card.vue';