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

package/src/web/checkbox/checkbox.vue

@@ -0,0 +1,304 @@
+<template>
+  <label
+    :class="
+      `ttdk-checkbox-wrapper ttdk-checkbox-root ${className || ''}`.trim()
+    "
+    :data-size="size || 'md'"
+    :data-variant="variant || 'primary'"
+    :data-rounded="rounded || 'md'"
+    :data-disabled="disabled ? 'true' : 'false'"
+    :data-checked="checked ? 'true' : 'false'"
+    :data-state="
+      indeterminate ? 'indeterminate' : checked ? 'checked' : 'unchecked'
+    "
+    :data-indeterminate="indeterminate ? 'true' : 'false'"
+    :data-error="Boolean(errorMessage || error) ? 'true' : 'false'"
+    :data-has-description="
+      Boolean(description || helperText) ? 'true' : 'false'
+    "
+    :style="{
+      ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+    ><input
+      type="checkbox"
+      class="ttdk-checkbox-native ttdk-checkbox-input"
+      :id="id"
+      :name="name"
+      :value="value"
+      :checked="checked"
+      :disabled="disabled"
+      :required="required"
+      @change="
+        async (event) => {
+          onChange?.(event.target.checked, event);
+        }
+      "
+    /><span
+      :class="`ttdk-checkbox-control ${controlClass || ''}`.trim()"
+      :style="{
+        ...buildUiVars(controlStyle),
+      }"
+    >
+      <template v-if="indeterminate">
+        <svg class="ttdk-checkbox-icon" viewBox="0 0 24 24">
+          <line x1="5" y1="12" x2="19" y2="12"></line>
+        </svg>
+      </template>
+
+      <template v-if="!indeterminate && checked">
+        <svg class="ttdk-checkbox-icon" viewBox="0 0 24 24">
+          <polyline points="20 6 9 17 4 12"></polyline>
+        </svg>
+      </template>
+    </span>
+    <template
+      v-if="
+        label ||
+        description ||
+        helperText ||
+        $slots.default ||
+        errorMessage ||
+        (typeof error === 'string' && error)
+      "
+    >
+      <div class="ttdk-checkbox-label-wrapper">
+        <template v-if="label || $slots.default">
+          <span
+            :class="`ttdk-checkbox-label ${labelClass || ''}`.trim()"
+            :style="{
+              ...buildUiVars(labelStyle),
+            }"
+            >{{ label }}<slot
+          /></span>
+        </template>
+
+        <template v-if="helperText || description">
+          <span
+            :class="
+              `ttdk-checkbox-desc ttdk-checkbox-helper-text ${
+                helperTextClass || descClass || ''
+              }`.trim()
+            "
+            :style="{
+              ...buildUiVars(helperTextStyle || descStyle),
+            }"
+            @click="
+              async (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }
+            "
+            >{{ helperText || description }}</span
+          >
+        </template>
+
+        <template v-if="errorMessage || (typeof error === 'string' && error)">
+          <span
+            role="alert"
+            :class="`ttdk-checkbox-error-msg ${errorMessageClass || ''}`.trim()"
+            :style="{
+              ...buildUiVars(errorMessageStyle),
+            }"
+            @click="
+              async (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }
+            "
+            >{{
+              errorMessage || (typeof error === "string" ? error : "")
+            }}</span
+          >
+        </template>
+      </div>
+    </template>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+export type CheckboxUiProps = UiProps;
+export interface CheckboxProps {
+  /**
+   * Status apakah checkbox sedang dalam kondisi terpilih (checked).
+   *
+   * @default false
+   */
+  checked?: boolean;
+
+  /**
+   * Status apakah checkbox dalam kondisi parsial / indeterminate (menampilkan tanda strip '-').
+   *
+   * @default false
+   */
+  indeterminate?: boolean;
+
+  /**
+   * Teks label utama yang ditampilkan di samping kotak checkbox.
+   */
+  label?: string;
+
+  /**
+   * Deskripsi atau teks bantuan yang ditampilkan di bawah label.
+   */
+  description?: string;
+
+  /**
+   * Teks bantuan atau keterangan di bawah label (dapat digunakan bergantian dengan description).
+   */
+  helperText?: string;
+
+  /**
+   * Status error visual atau string pesan error.
+   */
+  error?: boolean | string;
+
+  /**
+   * Pesan error yang ditampilkan jika validasi form gagal.
+   */
+  errorMessage?: string;
+
+  /**
+   * Skala ukuran checkbox:
+   * - `'sm'`: Kotak 16px, font 12px.
+   * - `'md'`: Kotak 18px, font 14px (standar).
+   * - `'lg'`: Kotak 22px, font 16px.
+   *
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Varian warna semantik saat checkbox dicentang:
+   * - `'primary'`: Aksen toska aksi (#16b3ac, standar).
+   * - `'info'`: Aksen biru informasi (#2196f3).
+   * - `'success'`: Warna hijau sukses (#047b5d).
+   * - `'warning'`: Warna peringatan kuning/oranye (#fb8c00).
+   * - `'danger'`: Warna bahaya merah (#c50a24).
+   * - `'neutral'`: Warna abu-abu netral (#4a4f53).
+   *
+   * @default 'primary'
+   */
+  variant?: "primary" | "info" | "success" | "warning" | "danger" | "neutral";
+
+  /**
+   * Sudut kelengkungan kotak checkbox:
+   * - `'none'`: Kotak tajam 0px.
+   * - `'sm'`: Radius halus 2px.
+   * - `'md'`: Radius sedang 4px (standar).
+   * - `'full'`: Lingkaran penuh 9999px.
+   *
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "full";
+
+  /**
+   * Menonaktifkan interaksi pada checkbox.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Menandakan bahwa field checkbox wajib diisi (required) pada formulir.
+   *
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * Name atribut untuk elemen HTML `<input type="checkbox">`.
+   */
+  name?: string;
+
+  /**
+   * Value atribut untuk elemen HTML input.
+   */
+  value?: string;
+
+  /**
+   * Identifier unik elemen checkbox (untuk kaitan dengan label form).
+   */
+  id?: string;
+
+  /**
+   * Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active).
+   */
+  ui?: UiProps;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: any;
+
+  /**
+   * Style kustom untuk kotak kontrol checkbox (UiProps).
+   */
+  controlStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk kotak kontrol checkbox (Tailwind / class kustom).
+   */
+  controlClass?: string;
+
+  /**
+   * Style kustom untuk teks label checkbox (UiProps).
+   */
+  labelStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks label checkbox (Tailwind / class kustom).
+   */
+  labelClass?: string;
+
+  /**
+   * Style kustom untuk teks deskripsi bantuan (UiProps).
+   */
+  descStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks deskripsi bantuan (Tailwind / class kustom).
+   */
+  descClass?: string;
+
+  /**
+   * Style kustom untuk elemen helper text (UiProps).
+   */
+  helperTextStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen helper text.
+   */
+  helperTextClass?: string;
+
+  /**
+   * Style kustom untuk teks pesan error validasi (UiProps).
+   */
+  errorMessageStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks pesan error validasi (Tailwind / class kustom).
+   */
+  errorMessageClass?: string;
+
+  /**
+   * Event handler yang dipanggil saat nilai checkbox berubah.
+   * Mengembalikan `(checked: boolean, event: Event)`.
+   */
+  onChange?: (checked: boolean, event?: any) => void;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Slot konten label kustom yang menggantikan prop `label`.
+   */
+  children?: any;
+}
+
+const props = defineProps<CheckboxProps>();
+</script>

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

@@ -0,0 +1,189 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export type CheckboxUiProps = UiProps;
+
+export interface CheckboxProps {
+  /**
+   * Status apakah checkbox sedang dalam kondisi terpilih (checked).
+   *
+   * @default false
+   */
+  checked?: boolean;
+
+  /**
+   * Status apakah checkbox dalam kondisi parsial / indeterminate (menampilkan tanda strip '-').
+   *
+   * @default false
+   */
+  indeterminate?: boolean;
+
+  /**
+   * Teks label utama yang ditampilkan di samping kotak checkbox.
+   */
+  label?: string;
+
+  /**
+   * Deskripsi atau teks bantuan yang ditampilkan di bawah label.
+   */
+  description?: string;
+
+  /**
+   * Teks bantuan atau keterangan di bawah label (dapat digunakan bergantian dengan description).
+   */
+  helperText?: string;
+
+  /**
+   * Status error visual atau string pesan error.
+   */
+  error?: boolean | string;
+
+  /**
+   * Pesan error yang ditampilkan jika validasi form gagal.
+   */
+  errorMessage?: string;
+
+  /**
+   * Skala ukuran checkbox:
+   * - `'sm'`: Kotak 16px, font 12px.
+   * - `'md'`: Kotak 18px, font 14px (standar).
+   * - `'lg'`: Kotak 22px, font 16px.
+   *
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Varian warna semantik saat checkbox dicentang:
+   * - `'primary'`: Aksen toska aksi (#16b3ac, standar).
+   * - `'info'`: Aksen biru informasi (#2196f3).
+   * - `'success'`: Warna hijau sukses (#047b5d).
+   * - `'warning'`: Warna peringatan kuning/oranye (#fb8c00).
+   * - `'danger'`: Warna bahaya merah (#c50a24).
+   * - `'neutral'`: Warna abu-abu netral (#4a4f53).
+   *
+   * @default 'primary'
+   */
+  variant?: "primary" | "info" | "success" | "warning" | "danger" | "neutral";
+
+  /**
+   * Sudut kelengkungan kotak checkbox:
+   * - `'none'`: Kotak tajam 0px.
+   * - `'sm'`: Radius halus 2px.
+   * - `'md'`: Radius sedang 4px (standar).
+   * - `'full'`: Lingkaran penuh 9999px.
+   *
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "full";
+
+  /**
+   * Menonaktifkan interaksi pada checkbox.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Menandakan bahwa field checkbox wajib diisi (required) pada formulir.
+   *
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * Name atribut untuk elemen HTML `<input type="checkbox">`.
+   */
+  name?: string;
+
+  /**
+   * Value atribut untuk elemen HTML input.
+   */
+  value?: string;
+
+  /**
+   * Identifier unik elemen checkbox (untuk kaitan dengan label form).
+   */
+  id?: string;
+
+  /**
+   * Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active).
+   */
+  ui?: UiProps;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: any;
+
+  /**
+   * Style kustom untuk kotak kontrol checkbox (UiProps).
+   */
+  controlStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk kotak kontrol checkbox (Tailwind / class kustom).
+   */
+  controlClass?: string;
+
+  /**
+   * Style kustom untuk teks label checkbox (UiProps).
+   */
+  labelStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks label checkbox (Tailwind / class kustom).
+   */
+  labelClass?: string;
+
+  /**
+   * Style kustom untuk teks deskripsi bantuan (UiProps).
+   */
+  descStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks deskripsi bantuan (Tailwind / class kustom).
+   */
+  descClass?: string;
+
+  /**
+   * Style kustom untuk elemen helper text (UiProps).
+   */
+  helperTextStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen helper text.
+   */
+  helperTextClass?: string;
+
+  /**
+   * Style kustom untuk teks pesan error validasi (UiProps).
+   */
+  errorMessageStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks pesan error validasi (Tailwind / class kustom).
+   */
+  errorMessageClass?: string;
+
+  /**
+   * Event handler yang dipanggil saat nilai checkbox berubah.
+   * Mengembalikan `(checked: boolean, event: Event)`.
+   */
+  onChange?: (checked: boolean, event?: any) => void;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Slot konten label kustom yang menggantikan prop `label`.
+   */
+  children?: any;
+}
+
+declare const component: DefineComponent<CheckboxProps>;
+export default component;

package/src/web/checkbox/index.ts

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