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

package/src/web/textarea/textarea.vue

@@ -0,0 +1,458 @@
+<template>
+  <div
+    :class="`ttdk-form-item ${className || ''}`.trim()"
+    :data-disabled="disabled"
+    :data-error="Boolean(error || errorMessage)"
+    :data-size="size || 'md'"
+    :data-block="block ? 'true' : undefined"
+    :style="{
+      ...buildUiVars(ui),
+      ...(ui || {}),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+  >
+    <template v-if="label">
+      <label
+        :class="`ttdk-form-label ${labelClass || ''}`.trim()"
+        :for="id"
+        :style="{
+          ...buildUiVars(labelStyle),
+        }"
+        ><span>{{ label }}</span>
+        <template v-if="required">
+          <span class="ttdk-form-required" aria-hidden="true"> * </span>
+        </template>
+
+        <template v-if="optional">
+          <span class="ttdk-form-optional">{{
+            optionalText || "(Opsional)"
+          }}</span>
+        </template>
+      </label>
+    </template>
+
+    <template v-if="helperText && helperTextPosition === 'top'">
+      <div
+        :class="`ttdk-form-helper-text ${helperTextClass || ''}`.trim()"
+        :style="{
+          ...buildUiVars(helperTextStyle),
+        }"
+      >
+        {{ helperText }}
+      </div>
+    </template>
+
+    <div
+      :class="`ttdk-textarea-wrapper ${wrapperClass || ''}`.trim()"
+      :data-filled="Boolean(value !== undefined ? value : innerValue)"
+      :data-error="Boolean(error || errorMessage)"
+      :data-disabled="Boolean(disabled)"
+      :data-size="size || 'md'"
+      :data-rounded="rounded || 'md'"
+      :style="{
+        ...buildUiVars(wrapperStyle),
+      }"
+    >
+      <textarea
+        ref="inputRef"
+        :class="`ttdk-textarea-control ${textareaClass || ''}`.trim()"
+        :name="name"
+        :id="id"
+        :value="value !== undefined ? value : innerValue"
+        :placeholder="placeholder"
+        :rows="rows || 4"
+        :disabled="disabled"
+        :readOnly="readOnly"
+        :required="required"
+        :autocomplete="autoComplete"
+        :maxLength="maxLength"
+        :minLength="minLength"
+        :aria-invalid="Boolean(error || errorMessage)"
+        :style="{
+          resize: resize || 'vertical',
+          ...buildUiVars(textareaStyle),
+        }"
+        @change="async (e) => handleChange(e)"
+        @input="async (e) => handleInput(e)"
+        @blur="async (e) => onBlur && onBlur(e)"
+        @focus="async (e) => onFocus && onFocus(e)"
+        @keydown="async (e) => onKeyDown && onKeyDown(e)"
+        @keyup="async (e) => onKeyUp && onKeyUp(e)"
+      ></textarea>
+    </div>
+    <template
+      v-if="
+        (helperText && helperTextPosition !== 'top') ||
+        (errorMessage && (error || errorMessage)) ||
+        showCount
+      "
+    >
+      <div class="ttdk-form-footer">
+        <template
+          v-if="
+            (helperText && helperTextPosition !== 'top') ||
+            (errorMessage && (error || errorMessage))
+          "
+        >
+          <div class="ttdk-form-footer-message">
+            <template v-if="helperText && helperTextPosition !== 'top'">
+              <div
+                :class="`ttdk-form-helper-text ${helperTextClass || ''}`.trim()"
+                :style="{
+                  ...buildUiVars(helperTextStyle),
+                }"
+              >
+                {{ helperText }}
+              </div>
+            </template>
+
+            <template v-if="errorMessage && (error || errorMessage)">
+              <div
+                role="alert"
+                :class="`ttdk-form-error-msg ${errorMessageClass || ''}`.trim()"
+                :style="{
+                  ...buildUiVars(errorMessageStyle),
+                }"
+              >
+                <span>{{ errorMessage }}</span>
+              </div>
+            </template>
+          </div>
+        </template>
+
+        <template v-if="showCount">
+          <div
+            aria-live="polite"
+            :class="`ttdk-form-char-count ${charCountClass || ''}`.trim()"
+            :style="{
+              ...buildUiVars(charCountStyle),
+            }"
+          >
+            {{ currentLength }}
+            <template v-if="maxLength">
+              {{ ` / ${maxLength}` }}
+            </template>
+
+            <template v-else>
+              <div _text=""></div>
+            </template>
+          </div>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+export type TextareaUiProps = UiProps;
+export interface TextareaProps {
+  /**
+   * Teks label judul field yang ditampilkan di atas textarea (14px Semibold, #141313).
+   */
+  label?: string;
+
+  /**
+   * Style kustom untuk elemen label judul field (UiProps).
+   */
+  labelStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen label judul field.
+   */
+  labelClass?: string;
+
+  /**
+   * Style kustom untuk elemen kontainer textarea wrapper (UiProps).
+   */
+  wrapperStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen kontainer textarea wrapper.
+   */
+  wrapperClass?: string;
+
+  /**
+   * Style kustom untuk elemen textarea control HTML (UiProps).
+   */
+  textareaStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen textarea control HTML.
+   */
+  textareaClass?: string;
+
+  /**
+   * Style kustom untuk elemen pesan error validasi (UiProps).
+   */
+  errorMessageStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen pesan error validasi.
+   */
+  errorMessageClass?: string;
+
+  /**
+   * Style kustom untuk elemen helper text (UiProps).
+   */
+  helperTextStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen helper text.
+   */
+  helperTextClass?: string;
+
+  /**
+   * Style kustom untuk elemen penghitung karakter (UiProps).
+   */
+  charCountStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen penghitung karakter.
+   */
+  charCountClass?: string;
+
+  /**
+   * Menandai field sebagai opsi opsional dengan menambahkan teks '(Opsional)' (12px Regular, #9698A2).
+   */
+  optional?: boolean;
+
+  /**
+   * Kustomisasi teks keterangan opsional.
+   * @default '(Opsional)'
+   */
+  optionalText?: string;
+
+  /**
+   * Nilai teks placeholder saat textarea kosong (#9698A2).
+   */
+  placeholder?: string;
+
+  /**
+   * Nilai terkontrol (controlled value) pada textarea.
+   */
+  value?: string;
+
+  /**
+   * Nilai awal tidak terkontrol (uncontrolled initial value).
+   */
+  defaultValue?: string;
+
+  /**
+   * Jumlah baris default yang ditampilkan.
+   * @default 4
+   */
+  rows?: number;
+
+  /**
+   * Nama form field HTML untuk integrasi formulir.
+   */
+  name?: string;
+
+  /**
+   * Identifier unik elemen textarea.
+   */
+  id?: string;
+
+  /**
+   * Kontrol orientasi resize oleh pengguna.
+   * - `'none'`: Tidak dapat di-resize
+   * - `'vertical'`: Hanya dapat di-resize vertikal (standar)
+   * - `'horizontal'`: Hanya dapat di-resize horizontal
+   * - `'both'`: Bebas di-resize kedua arah
+   * @default 'vertical'
+   */
+  resize?: "none" | "vertical" | "horizontal" | "both";
+
+  /**
+   * Status apakah textarea sedang dalam kondisi error / tidak valid.
+   * @default false
+   */
+  error?: boolean;
+
+  /**
+   * Pesan teks penjelasan kesalahan validasi di bawah field.
+   */
+  errorMessage?: string;
+
+  /**
+   * Teks petunjuk atau keterangan bantuan di bawah field (12px Regular, #3C4245).
+   */
+  helperText?: string;
+
+  /**
+   * Posisi teks helper
+   */
+  helperTextPosition?: "top" | "bottom";
+
+  /**
+   * Skala ukuran textarea.
+   * - `'sm'`: Padding rapat
+   * - `'md'`: Standar
+   * - `'lg'`: Padding lapang
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Bentuk sudut kelengkungan textarea.
+   * - `'none'`: 0px
+   * - `'sm'`: 4px
+   * - `'md'`: 8px (standar desain)
+   * - `'lg'`: 12px
+   * - `'full'`: 16px
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Menjadikan lebar field textarea memenuhi kontainer penuh (full-width 100%).
+   * @default false
+   */
+  block?: boolean;
+
+  /**
+   * Status apakah field dinonaktifkan (disabled).
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Status apakah field bersifat hanya-baca (readonly).
+   * @default false
+   */
+  readOnly?: boolean;
+
+  /**
+   * Menandai field sebagai input wajib diisi (menampilkan tanda bintang merah *).
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * Konfigurasi atribut autocomplete HTML.
+   */
+  autoComplete?: string;
+
+  /**
+   * Batas maksimum panjang karakter.
+   */
+  maxLength?: number;
+
+  /**
+   * Batas minimum panjang karakter.
+   */
+  minLength?: number;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: any;
+
+  /**
+   * Kustomisasi visual granular root / form-item (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Callback event saat nilai textarea berubah.
+   */
+  onChange?: (event: any) => void;
+
+  /**
+   * Callback event saat pengguna mengetik (input event).
+   */
+  onInput?: (event: any) => void;
+
+  /**
+   * Callback event saat textarea kehilangan fokus (blur).
+   */
+  onBlur?: (event: any) => void;
+
+  /**
+   * Callback event saat textarea mendapatkan fokus.
+   */
+  onFocus?: (event: any) => void;
+
+  /**
+   * Ref instance elemen textarea HTML untuk akses kontrol DOM langsung (focus, blur, select).
+   */
+  inputRef?: any;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Callback event tombol keyboard ditekan.
+   */
+  onKeyDown?: (event: any) => void;
+
+  /**
+   * Callback event tombol keyboard dilepaskan.
+   */
+  onKeyUp?: (event: any) => void;
+
+  /**
+   * Menampilkan penghitung karakter di bawah textarea (format: `x / maxLength`).
+   * Memerlukan prop `maxLength` untuk berfungsi.
+   * @default false
+   */
+  showCount?: boolean;
+}
+
+/**
+ * Komponen Textarea TTDK sesuai spesifikasi Anatomy Desain:
+ * 1. Field title (14px Semibold, #141313)
+ * 2. (Opsional) label (12px Regular, #9698A2)
+ * 3. Border radius 8px
+ * 4. Field content (14px Regular, #141313, placeholder #9698A2)
+ * 5. Additional information / Helper text (12px Regular, #3C4245)
+ */
+
+const props = defineProps<TextareaProps>();
+const innerValue = ref(
+  props.value !== undefined
+    ? String(props.value)
+    : props.defaultValue !== undefined
+    ? String(props.defaultValue)
+    : ""
+);
+
+const currentLength = computed(() => {
+  if (props.value !== undefined) {
+    return String(props.value).length;
+  }
+  return innerValue.value.length;
+});
+
+watch(
+  () => [props.value],
+  () => {
+    if (props.value !== undefined) {
+      innerValue.value = String(props.value);
+    }
+  },
+  { immediate: true }
+);
+function handleInput(e: any) {
+  if (props.value === undefined) {
+    innerValue.value = e.target.value;
+  }
+  if (props.onInput) {
+    props.onInput(e);
+  }
+}
+function handleChange(e: any) {
+  if (props.value === undefined) {
+    innerValue.value = e.target.value;
+  }
+  if (props.onChange) {
+    props.onChange(e);
+  }
+}
+</script>

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

@@ -0,0 +1,265 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export type TextareaUiProps = UiProps;
+
+export interface TextareaProps {
+  /**
+   * Teks label judul field yang ditampilkan di atas textarea (14px Semibold, #141313).
+   */
+  label?: string;
+
+  /**
+   * Style kustom untuk elemen label judul field (UiProps).
+   */
+  labelStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen label judul field.
+   */
+  labelClass?: string;
+
+  /**
+   * Style kustom untuk elemen kontainer textarea wrapper (UiProps).
+   */
+  wrapperStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen kontainer textarea wrapper.
+   */
+  wrapperClass?: string;
+
+  /**
+   * Style kustom untuk elemen textarea control HTML (UiProps).
+   */
+  textareaStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen textarea control HTML.
+   */
+  textareaClass?: string;
+
+  /**
+   * Style kustom untuk elemen pesan error validasi (UiProps).
+   */
+  errorMessageStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen pesan error validasi.
+   */
+  errorMessageClass?: string;
+
+  /**
+   * Style kustom untuk elemen helper text (UiProps).
+   */
+  helperTextStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen helper text.
+   */
+  helperTextClass?: string;
+
+  /**
+   * Style kustom untuk elemen penghitung karakter (UiProps).
+   */
+  charCountStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen penghitung karakter.
+   */
+  charCountClass?: string;
+
+  /**
+   * Menandai field sebagai opsi opsional dengan menambahkan teks '(Opsional)' (12px Regular, #9698A2).
+   */
+  optional?: boolean;
+
+  /**
+   * Kustomisasi teks keterangan opsional.
+   * @default '(Opsional)'
+   */
+  optionalText?: string;
+
+  /**
+   * Nilai teks placeholder saat textarea kosong (#9698A2).
+   */
+  placeholder?: string;
+
+  /**
+   * Nilai terkontrol (controlled value) pada textarea.
+   */
+  value?: string;
+
+  /**
+   * Nilai awal tidak terkontrol (uncontrolled initial value).
+   */
+  defaultValue?: string;
+
+  /**
+   * Jumlah baris default yang ditampilkan.
+   * @default 4
+   */
+  rows?: number;
+
+  /**
+   * Nama form field HTML untuk integrasi formulir.
+   */
+  name?: string;
+
+  /**
+   * Identifier unik elemen textarea.
+   */
+  id?: string;
+
+  /**
+   * Kontrol orientasi resize oleh pengguna.
+   * - `'none'`: Tidak dapat di-resize
+   * - `'vertical'`: Hanya dapat di-resize vertikal (standar)
+   * - `'horizontal'`: Hanya dapat di-resize horizontal
+   * - `'both'`: Bebas di-resize kedua arah
+   * @default 'vertical'
+   */
+  resize?: "none" | "vertical" | "horizontal" | "both";
+
+  /**
+   * Status apakah textarea sedang dalam kondisi error / tidak valid.
+   * @default false
+   */
+  error?: boolean;
+
+  /**
+   * Pesan teks penjelasan kesalahan validasi di bawah field.
+   */
+  errorMessage?: string;
+
+  /**
+   * Teks petunjuk atau keterangan bantuan di bawah field (12px Regular, #3C4245).
+   */
+  helperText?: string;
+
+  /**
+   * Posisi teks helper
+   */
+  helperTextPosition?: "top" | "bottom";
+
+  /**
+   * Skala ukuran textarea.
+   * - `'sm'`: Padding rapat
+   * - `'md'`: Standar
+   * - `'lg'`: Padding lapang
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Bentuk sudut kelengkungan textarea.
+   * - `'none'`: 0px
+   * - `'sm'`: 4px
+   * - `'md'`: 8px (standar desain)
+   * - `'lg'`: 12px
+   * - `'full'`: 16px
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Menjadikan lebar field textarea memenuhi kontainer penuh (full-width 100%).
+   * @default false
+   */
+  block?: boolean;
+
+  /**
+   * Status apakah field dinonaktifkan (disabled).
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Status apakah field bersifat hanya-baca (readonly).
+   * @default false
+   */
+  readOnly?: boolean;
+
+  /**
+   * Menandai field sebagai input wajib diisi (menampilkan tanda bintang merah *).
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * Konfigurasi atribut autocomplete HTML.
+   */
+  autoComplete?: string;
+
+  /**
+   * Batas maksimum panjang karakter.
+   */
+  maxLength?: number;
+
+  /**
+   * Batas minimum panjang karakter.
+   */
+  minLength?: number;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: any;
+
+  /**
+   * Kustomisasi visual granular root / form-item (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Callback event saat nilai textarea berubah.
+   */
+  onChange?: (event: any) => void;
+
+  /**
+   * Callback event saat pengguna mengetik (input event).
+   */
+  onInput?: (event: any) => void;
+
+  /**
+   * Callback event saat textarea kehilangan fokus (blur).
+   */
+  onBlur?: (event: any) => void;
+
+  /**
+   * Callback event saat textarea mendapatkan fokus.
+   */
+  onFocus?: (event: any) => void;
+
+  /**
+   * Ref instance elemen textarea HTML untuk akses kontrol DOM langsung (focus, blur, select).
+   */
+  inputRef?: any;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Callback event tombol keyboard ditekan.
+   */
+  onKeyDown?: (event: any) => void;
+
+  /**
+   * Callback event tombol keyboard dilepaskan.
+   */
+  onKeyUp?: (event: any) => void;
+
+  /**
+   * Menampilkan penghitung karakter di bawah textarea (format: `x / maxLength`).
+   * Memerlukan prop `maxLength` untuk berfungsi.
+   * @default false
+   */
+  showCount?: boolean;
+}
+
+declare const component: DefineComponent<TextareaProps>;
+export default component;