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

package/src/web/input/input.vue

@@ -0,0 +1,521 @@
+<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-input-wrapper ${wrapperClass || ''}`.trim()"
+      :data-filled="Boolean(value || defaultValue)"
+      :data-error="Boolean(error || errorMessage)"
+      :data-disabled="Boolean(disabled)"
+      :data-size="size || 'md'"
+      :data-rounded="rounded || 'md'"
+      :style="{
+        ...buildUiVars(wrapperStyle),
+      }"
+    >
+      <template v-if="addonLeft">
+        <div class="ttdk-input-addon ttdk-input-addon-left">
+          {{ addonLeft }}
+        </div>
+      </template>
+
+      <div class="ttdk-input-inner">
+        <template v-if="iconLeft">
+          <span
+            class="ttdk-input-icon ttdk-input-icon-left"
+            aria-hidden="true"
+            >{{ iconLeft }}</span
+          >
+        </template>
+
+        <input
+          ref="inputRef"
+          :class="`ttdk-input-control ${inputClass || ''}`.trim()"
+          :type="type || 'text'"
+          :name="name"
+          :id="id"
+          :value="value !== undefined ? value : defaultValue"
+          :placeholder="placeholder"
+          :disabled="disabled"
+          :readOnly="readOnly"
+          :required="required"
+          :autocomplete="autoComplete"
+          :maxLength="maxLength"
+          :minLength="minLength"
+          :min="min"
+          :max="max"
+          :aria-invalid="Boolean(error || errorMessage)"
+          :style="{
+            ...buildUiVars(inputStyle),
+          }"
+          @change="async (e) => onChange && onChange(e)"
+          @input="async (e) => onInput && onInput(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)"
+        />
+        <template v-if="loading">
+          <span
+            class="ttdk-input-icon ttdk-input-icon-right ttdk-input-spinner"
+            aria-hidden="true"
+            ><svg viewBox="0 0 24 24">
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.175"
+                transform="rotate(0 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.25"
+                transform="rotate(30 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.325"
+                transform="rotate(60 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.4"
+                transform="rotate(90 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.475"
+                transform="rotate(120 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.55"
+                transform="rotate(150 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.625"
+                transform="rotate(180 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.7"
+                transform="rotate(210 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.775"
+                transform="rotate(240 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.85"
+                transform="rotate(270 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.925"
+                transform="rotate(300 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="1"
+                transform="rotate(330 12 12)"
+              ></line></svg
+          ></span>
+        </template>
+
+        <template v-if="!loading && iconRight">
+          <span
+            class="ttdk-input-icon ttdk-input-icon-right"
+            aria-hidden="true"
+            >{{ iconRight }}</span
+          >
+        </template>
+      </div>
+      <template v-if="addonRight">
+        <div class="ttdk-input-addon ttdk-input-addon-right">
+          {{ addonRight }}
+        </div>
+      </template>
+    </div>
+    <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>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+export type InputUiProps = UiProps;
+export interface InputProps {
+  /**
+   * Teks label judul field yang ditampilkan di atas input (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 input wrapper (UiProps).
+   */
+  wrapperStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen kontainer input wrapper.
+   */
+  wrapperClass?: string;
+
+  /**
+   * Style kustom untuk elemen input control HTML (UiProps).
+   */
+  inputStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen input control HTML.
+   */
+  inputClass?: 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;
+
+  /**
+   * 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 input kosong (#9698A2).
+   */
+  placeholder?: string;
+
+  /**
+   * Nilai terkontrol (controlled value) pada input.
+   */
+  value?: string | number;
+
+  /**
+   * Nilai awal tidak terkontrol (uncontrolled initial value).
+   */
+  defaultValue?: string | number;
+
+  /**
+   * Tipe field input HTML standar.
+   * @default 'text'
+   */
+  type?: string;
+
+  /**
+   * Nama form field HTML untuk integrasi formulir.
+   */
+  name?: string;
+
+  /**
+   * Identifier unik elemen input.
+   */
+  id?: string;
+
+  /**
+   * Status apakah input 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 input field.
+   * - `'sm'`: 36px
+   * - `'md'`: 48px (standar)
+   * - `'lg'`: 56px
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Bentuk sudut kelengkungan input.
+   * - `'none'`: 0px
+   * - `'sm'`: 4px
+   * - `'md'`: 8px (standar desain)
+   * - `'lg'`: 12px
+   * - `'full'`: 9999px (kapsul)
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Menjadikan lebar field input 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;
+
+  /**
+   * Ikon di sebelah kiri dalam input (ukuran 20-24px, misal: Calendar, Search, User).
+   */
+  iconLeft?: any;
+
+  /**
+   * Ikon di sebelah kanan dalam input (ukuran 20-24px, misal: Chevron-down, Eye, Close).
+   */
+  iconRight?: any;
+
+  /**
+   * Addon / teks prefix di sebelah kiri luar input (misal: 'Text', '+62 (IDN)').
+   */
+  addonLeft?: string | any;
+
+  /**
+   * Addon / teks suffix di sebelah kanan luar input (misal: 'Text', '.com', 'kg').
+   */
+  addonRight?: string | any;
+
+  /**
+   * Konfigurasi atribut autocomplete HTML.
+   */
+  autoComplete?: string;
+
+  /**
+   * Batas maksimum panjang karakter.
+   */
+  maxLength?: number;
+
+  /**
+   * Batas minimum panjang karakter.
+   */
+  minLength?: number;
+
+  /**
+   * Nilai minimum untuk input bertipe number atau date.
+   */
+  min?: number | string;
+
+  /**
+   * Nilai maksimum untuk input bertipe number atau date.
+   */
+  max?: number | string;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: any;
+
+  /**
+   * Kustomisasi visual granular root / form-item (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Callback event saat nilai input berubah.
+   */
+  onChange?: (event: any) => void;
+
+  /**
+   * Callback event saat pengguna mengetik (input event).
+   */
+  onInput?: (event: any) => void;
+
+  /**
+   * Callback event saat field input kehilangan fokus.
+   */
+  onBlur?: (event: any) => void;
+
+  /**
+   * Callback event saat field input mendapatkan fokus.
+   */
+  onFocus?: (event: any) => void;
+
+  /**
+   * Ref instance elemen input 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 spinner dan menonaktifkan interaksi field sementara menunggu proses async.
+   * @default false
+   */
+  loading?: boolean;
+}
+
+/**
+ * Komponen Input TTDK sesuai spesifikasi Anatomy Desain:
+ * 1. Field title (14px Semibold, #141313)
+ * 2. (Opsional) label (12px Regular, #9698A2)
+ * 3. Border radius 8px
+ * 4. Icon left / right (24px)
+ * 5. Field content (14px Regular, #141313, placeholder #9698A2)
+ * 6. Additional information / Helper text (12px Regular, #3C4245)
+ */
+
+const props = defineProps<InputProps>();
+</script>