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

package/src/web/alert/alert.vue

@@ -0,0 +1,290 @@
+<template>
+  <template v-if="isVisible">
+    <div
+      role="alert"
+      :class="`ttdk-alert ${className || ''}`.trim()"
+      :data-variant="variant || 'neutral'"
+      :data-appearance="appearance || 'soft'"
+      :data-rounded="rounded || 'md'"
+      :data-block="block ? 'true' : 'false'"
+      :style="{
+        ...buildUiVars(ui),
+        ...(iconColor
+          ? {
+              '--ttdk-ui-icon-color': iconColor,
+            }
+          : {}),
+        ...(iconSize
+          ? {
+              '--ttdk-ui-icon-size': iconSize,
+            }
+          : {}),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+    >
+      <template v-if="!hideIcon && icon !== false">
+        <div
+          :class="`ttdk-alert-icon-wrapper ${iconClass || ''}`.trim()"
+          :style="{
+            ...buildUiVars(iconStyle),
+          }"
+        >
+          <template v-if="icon && typeof icon !== 'boolean'">
+            <span class="ttdk-alert-icon">{{ icon }}</span>
+          </template>
+
+          <template v-if="!icon || icon === true">
+            <template v-if="variant === 'success'">
+              <svg class="ttdk-alert-icon" viewBox="0 0 24 24" fill="none">
+                <circle cx="12" cy="12" r="10"></circle>
+                <polyline points="9 12 11 14 15 10"></polyline>
+              </svg>
+            </template>
+
+            <template v-if="variant === 'warning'">
+              <svg class="ttdk-alert-icon" viewBox="0 0 24 24" fill="none">
+                <path
+                  d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"
+                ></path>
+                <line x1="12" y1="9" x2="12" y2="13"></line>
+                <line x1="12" y1="17" x2="12.01" y2="17"></line>
+              </svg>
+            </template>
+
+            <template v-if="variant === 'danger'">
+              <svg class="ttdk-alert-icon" viewBox="0 0 24 24" fill="none">
+                <circle cx="12" cy="12" r="10"></circle>
+                <line x1="12" y1="8" x2="12" y2="12"></line>
+                <line x1="12" y1="16" x2="12.01" y2="16"></line>
+              </svg>
+            </template>
+
+            <template v-if="variant === 'info'">
+              <svg class="ttdk-alert-icon" viewBox="0 0 24 24" fill="none">
+                <circle cx="12" cy="12" r="10"></circle>
+                <line x1="12" y1="16" x2="12" y2="12"></line>
+                <line x1="12" y1="8" x2="12.01" y2="8"></line>
+              </svg>
+            </template>
+
+            <template v-if="!variant || variant === 'neutral'">
+              <svg class="ttdk-alert-icon" viewBox="0 0 24 24" fill="none">
+                <path
+                  d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
+                ></path>
+              </svg>
+            </template>
+          </template>
+        </div>
+      </template>
+
+      <div class="ttdk-alert-content">
+        <template v-if="title">
+          <div
+            :class="`ttdk-alert-title ${titleClass || ''}`.trim()"
+            :style="{
+              ...buildUiVars(titleStyle),
+            }"
+          >
+            {{ title }}
+          </div>
+        </template>
+
+        <template v-if="description">
+          <div
+            :class="`ttdk-alert-description ${descClass || ''}`.trim()"
+            :style="{
+              ...buildUiVars(descStyle),
+            }"
+          >
+            {{ description }}
+          </div>
+        </template>
+
+        <slot />
+      </div>
+      <template v-if="closable">
+        <button
+          type="button"
+          aria-label="Tutup notifikasi"
+          :class="`ttdk-alert-close-btn ${closableClass || ''}`.trim()"
+          :style="{
+            ...buildUiVars(closableStyle),
+          }"
+          @click="async (event) => handleDismiss(event)"
+        >
+          <svg viewBox="0 0 24 24" fill="none">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      </template>
+    </div>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+export type AlertUiProps = UiProps;
+export interface AlertProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * Judul utama alert.
+   */
+  title?: string;
+
+  /**
+   * Deskripsi atau pesan teks penjelasan alert.
+   */
+  description?: string;
+
+  /**
+   * Varian warna semantik alert:
+   * - `'neutral'`: Netral (border hitam/putih, background base).
+   * - `'info'`: Biru informasi (#2196F3).
+   * - `'success'`: Hijau konfirmasi keberhasilan (#04B761).
+   * - `'warning'`: Kuning / amber peringatan (#F88000).
+   * - `'danger'`: Merah kesalahan / bahaya (#D0021B).
+   *
+   * @default 'neutral'
+   */
+  variant?: "neutral" | "info" | "success" | "warning" | "danger";
+
+  /**
+   * Gaya tampilan visual alert:
+   * - `'soft'`: Latar belakang warna transparan lembut (standar).
+   * - `'solid'`: Latar belakang warna solid pekat dengan teks putih.
+   * - `'outline'`: Garis tepi dengan latar belakang transparan.
+   * - `'subtle'`: Latar belakang abu netral dengan aksen border tipis.
+   *
+   * @default 'soft'
+   */
+  appearance?: "soft" | "solid" | "outline" | "subtle";
+
+  /**
+   * Sudut kelengkungan alert:
+   * - `'none'`: Sudut tajam 0px.
+   * - `'sm'`: Radius halus 4px.
+   * - `'md'`: Radius sedang 8px (standar).
+   * - `'lg'`: Radius melengkung 12px.
+   * - `'full'`: Lingkaran penuh 9999px.
+   *
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Ikon SVG kustom yang menggantikan ikon bawaan, atau boolean untuk menampilkan/menyembunyikan ikon.
+   * @default true
+   */
+  icon?: any;
+
+  /**
+   * Warna ikon kustom secara langsung.
+   */
+  iconColor?: string;
+
+  /**
+   * Ukuran ikon kustom secara langsung (misal: '20px', '1.5rem').
+   */
+  iconSize?: string;
+
+  /**
+   * Menyembunyikan ikon pada alert.
+   * @default false
+   */
+  hideIcon?: boolean;
+
+  /**
+   * Menampilkan tombol tutup (silang) untuk menutup alert secara interaktif.
+   * @default false
+   */
+  closable?: boolean;
+
+  /**
+   * Callback saat tombol tutup diklik.
+   */
+  onClose?: (event: any) => void;
+
+  /**
+   * Membuat alert memenuhi lebar kontainer (100%).
+   * @default false
+   */
+  block?: boolean;
+
+  /**
+   * Style kustom untuk judul alert (UiProps / style object + pseudo support).
+   */
+  titleStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk judul alert.
+   */
+  titleClass?: string;
+
+  /**
+   * Style kustom untuk deskripsi alert (UiProps / style object + pseudo support).
+   */
+  descStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk deskripsi alert.
+   */
+  descClass?: string;
+
+  /**
+   * Style kustom untuk ikon alert (UiProps / style object + pseudo support).
+   */
+  iconStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk ikon alert.
+   */
+  iconClass?: string;
+
+  /**
+   * Style kustom untuk tombol tutup alert (UiProps / style object + pseudo support).
+   */
+  closableStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk tombol tutup alert.
+   */
+  closableClass?: string;
+
+  /**
+   * Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten kustom tambahan di dalam alert.
+   */
+  children?: any;
+}
+
+/**
+ * Komponen Alert untuk menampilkan pesan umpan balik kontekstual statis, instruksi peringatan, atau status penting pada halaman.
+ */
+
+const props = defineProps<AlertProps>();
+const isVisible = ref(true);
+
+function handleDismiss(event: any) {
+  isVisible.value = false;
+  if (props.onClose) {
+    props.onClose(event);
+  }
+}
+</script>

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

@@ -0,0 +1,154 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export type AlertUiProps = UiProps;
+
+export interface AlertProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * Judul utama alert.
+   */
+  title?: string;
+
+  /**
+   * Deskripsi atau pesan teks penjelasan alert.
+   */
+  description?: string;
+
+  /**
+   * Varian warna semantik alert:
+   * - `'neutral'`: Netral (border hitam/putih, background base).
+   * - `'info'`: Biru informasi (#2196F3).
+   * - `'success'`: Hijau konfirmasi keberhasilan (#04B761).
+   * - `'warning'`: Kuning / amber peringatan (#F88000).
+   * - `'danger'`: Merah kesalahan / bahaya (#D0021B).
+   *
+   * @default 'neutral'
+   */
+  variant?: "neutral" | "info" | "success" | "warning" | "danger";
+
+  /**
+   * Gaya tampilan visual alert:
+   * - `'soft'`: Latar belakang warna transparan lembut (standar).
+   * - `'solid'`: Latar belakang warna solid pekat dengan teks putih.
+   * - `'outline'`: Garis tepi dengan latar belakang transparan.
+   * - `'subtle'`: Latar belakang abu netral dengan aksen border tipis.
+   *
+   * @default 'soft'
+   */
+  appearance?: "soft" | "solid" | "outline" | "subtle";
+
+  /**
+   * Sudut kelengkungan alert:
+   * - `'none'`: Sudut tajam 0px.
+   * - `'sm'`: Radius halus 4px.
+   * - `'md'`: Radius sedang 8px (standar).
+   * - `'lg'`: Radius melengkung 12px.
+   * - `'full'`: Lingkaran penuh 9999px.
+   *
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Ikon SVG kustom yang menggantikan ikon bawaan, atau boolean untuk menampilkan/menyembunyikan ikon.
+   * @default true
+   */
+  icon?: any;
+
+  /**
+   * Warna ikon kustom secara langsung.
+   */
+  iconColor?: string;
+
+  /**
+   * Ukuran ikon kustom secara langsung (misal: '20px', '1.5rem').
+   */
+  iconSize?: string;
+
+  /**
+   * Menyembunyikan ikon pada alert.
+   * @default false
+   */
+  hideIcon?: boolean;
+
+  /**
+   * Menampilkan tombol tutup (silang) untuk menutup alert secara interaktif.
+   * @default false
+   */
+  closable?: boolean;
+
+  /**
+   * Callback saat tombol tutup diklik.
+   */
+  onClose?: (event: any) => void;
+
+  /**
+   * Membuat alert memenuhi lebar kontainer (100%).
+   * @default false
+   */
+  block?: boolean;
+
+  /**
+   * Style kustom untuk judul alert (UiProps / style object + pseudo support).
+   */
+  titleStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk judul alert.
+   */
+  titleClass?: string;
+
+  /**
+   * Style kustom untuk deskripsi alert (UiProps / style object + pseudo support).
+   */
+  descStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk deskripsi alert.
+   */
+  descClass?: string;
+
+  /**
+   * Style kustom untuk ikon alert (UiProps / style object + pseudo support).
+   */
+  iconStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk ikon alert.
+   */
+  iconClass?: string;
+
+  /**
+   * Style kustom untuk tombol tutup alert (UiProps / style object + pseudo support).
+   */
+  closableStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk tombol tutup alert.
+   */
+  closableClass?: string;
+
+  /**
+   * Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten kustom tambahan di dalam alert.
+   */
+  children?: any;
+}
+
+declare const component: DefineComponent<AlertProps>;
+export default component;

package/src/web/alert/index.ts

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

package/src/web/alert/manifest.json

@@ -0,0 +1,240 @@
+{
+  "name": "@ttdk-design-system/alert",
+  "component": "Alert",
+  "folder": "alert",
+  "description": "Komponen Alert untuk menampilkan pesan umpan balik kontekstual statis, instruksi peringatan, atau status penting pada halaman.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "alert.css",
+      "importPath": "web/alert/alert.css"
+    }
+  ],
+  "props": {
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Inline CSS style kustom.",
+      "example": null,
+      "param": null
+    },
+    "title": {
+      "name": "title",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Judul utama alert.",
+      "example": null,
+      "param": null
+    },
+    "description": {
+      "name": "description",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Deskripsi atau pesan teks penjelasan alert.",
+      "example": null,
+      "param": null
+    },
+    "variant": {
+      "name": "variant",
+      "type": "| 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'",
+      "optional": true,
+      "default": "neutral",
+      "description": "Varian warna semantik alert: - `'neutral'`: Netral (border hitam/putih, background base). - `'info'`: Biru informasi (#2196F3). - `'success'`: Hijau konfirmasi keberhasilan (#04B761). - `'warning'`: Kuning / amber peringatan (#F88000). - `'danger'`: Merah kesalahan / bahaya (#D0021B).",
+      "example": null,
+      "param": null
+    },
+    "appearance": {
+      "name": "appearance",
+      "type": "'soft' | 'solid' | 'outline' | 'subtle'",
+      "optional": true,
+      "default": "soft",
+      "description": "Gaya tampilan visual alert: - `'soft'`: Latar belakang warna transparan lembut (standar). - `'solid'`: Latar belakang warna solid pekat dengan teks putih. - `'outline'`: Garis tepi dengan latar belakang transparan. - `'subtle'`: Latar belakang abu netral dengan aksen border tipis.",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'sm' | 'md' | 'lg' | 'full'",
+      "optional": true,
+      "default": "md",
+      "description": "Sudut kelengkungan alert: - `'none'`: Sudut tajam 0px. - `'sm'`: Radius halus 4px. - `'md'`: Radius sedang 8px (standar). - `'lg'`: Radius melengkung 12px. - `'full'`: Lingkaran penuh 9999px.",
+      "example": null,
+      "param": null
+    },
+    "icon": {
+      "name": "icon",
+      "type": "any",
+      "optional": true,
+      "default": "true",
+      "description": "Ikon SVG kustom yang menggantikan ikon bawaan, atau boolean untuk menampilkan/menyembunyikan ikon.",
+      "example": null,
+      "param": null
+    },
+    "iconColor": {
+      "name": "iconColor",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Warna ikon kustom secara langsung.",
+      "example": null,
+      "param": null
+    },
+    "iconSize": {
+      "name": "iconSize",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Ukuran ikon kustom secara langsung (misal: '20px', '1.5rem').",
+      "example": null,
+      "param": null
+    },
+    "hideIcon": {
+      "name": "hideIcon",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menyembunyikan ikon pada alert.",
+      "example": null,
+      "param": null
+    },
+    "closable": {
+      "name": "closable",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan tombol tutup (silang) untuk menutup alert secara interaktif.",
+      "example": null,
+      "param": null
+    },
+    "onClose": {
+      "name": "onClose",
+      "type": "(event: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback saat tombol tutup diklik.",
+      "example": null,
+      "param": null
+    },
+    "block": {
+      "name": "block",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Membuat alert memenuhi lebar kontainer (100%).",
+      "example": null,
+      "param": null
+    },
+    "titleStyle": {
+      "name": "titleStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk judul alert (UiProps / style object + pseudo support).",
+      "example": null,
+      "param": null
+    },
+    "titleClass": {
+      "name": "titleClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk judul alert.",
+      "example": null,
+      "param": null
+    },
+    "descStyle": {
+      "name": "descStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk deskripsi alert (UiProps / style object + pseudo support).",
+      "example": null,
+      "param": null
+    },
+    "descClass": {
+      "name": "descClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk deskripsi alert.",
+      "example": null,
+      "param": null
+    },
+    "iconStyle": {
+      "name": "iconStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk ikon alert (UiProps / style object + pseudo support).",
+      "example": null,
+      "param": null
+    },
+    "iconClass": {
+      "name": "iconClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk ikon alert.",
+      "example": null,
+      "param": null
+    },
+    "closableStyle": {
+      "name": "closableStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk tombol tutup alert (UiProps / style object + pseudo support).",
+      "example": null,
+      "param": null
+    },
+    "closableClass": {
+      "name": "closableClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk tombol tutup alert.",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active).",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten kustom tambahan di dalam alert.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}