Tipe Properti Komponen Umum

// Ambil nilai properti komponen
export function getAttribute(){
  // Ambil properti content dari komponen Text dan cetak ke console
  const content = this.$('text_kyz78exo').get('content')
  console.log( `text content: ${content}` );
}

// Atur nilai properti komponen
export function setAttribute(){
  // Atur properti maxLine dari komponen Text
  this.$('text_kyz78exo').set('maxLine', 5);
}

inerface I18n {
  zh_CN: string;
  en_US: string;
  type: 'i18n';
}

type Behavior = 'NORMAL' | 'DISABLED' | 'READONLY' | 'HIDDEN';

type Size = 'small' | 'medium' | 'large';

type LabelTipsTypes = 'none' | 'text' | 'render';

interface Validation {
  type: 'required' | 'minValue' | 'maxValue' | 'minLength' | 'maxLength' | 'customValidate'; // Tipe validasi
  message: string | I18n; // Pesan error
  param: number | (value: any) => boolean; // Parameter validasi. Jika type bernilai customValidate, parameter ini berupa fungsi kustom.
}

interface DataSource {
  text: string | I18n; // Konten yang ditampilkan
  value: string; // Data yang dikirimkan
}

interface CascadeDataSource {
  label: string | I18n; // Konten yang ditampilkan
  value: string; // Data yang dikirimkan
  chidren?: CascadeDataSource[]
}

interface SliderDataSource {
  src: string; // URL gambar carousel
  title?: string | I18n; // Judul carousel
  link?: string; // Tautan pengalihan saat gambar diklik
}

interface StepsDataSource {
  title: string;
  content: string;
  status?: '' | 'wait' | 'process' | 'finish'; // Status langkah saat ini
  customSwitcher?: boolean; // Apakah rendering kustom diaktifkan
  customRender?: (item: StepsDataSource) => ReactNode; // Fungsi rendering kustom
  icon?: string; // Ikon langkah
  percent?: number; // Persentase progres langkah saat ini. Berupa angka antara 1 dan 100.
  disabled?: boolean; // Apakah langkah dinonaktifkan
}

interface TimelineDataSource {
  title: string | I18n; // Judul
  time: string; // Waktu
  icon?: string; // Ikon yang ditampilkan
  state?: '' | 'process' | 'success' | 'error'; // Status node saat ini
  timeLeft?: () => ReactNode; // Tampilan waktu di sebelah kiri
  doc?: () => ReactNode; // Node lini masa kustom. Diprioritaskan di atas properti icon.
  content?: () => ReactNode; // Konten kustom di sebelah kanan
}

interface TreeDataSource {
  key: string;
  label: string;
  children?: TreeDataSource[]; // Node anak
}

interface MenuDataSource {
  label: string;
  key: string;
  chidlren?: MenuDataSource[]; // Node anak
}

interface SearchDataSource {
  label: string;
  value: string;
}

interface TabItem {
  title: string; // Nama tab
  primaryKey: string; // Identifikator unik tab
  disabled?: boolean; // Apakah tab dinonaktifkan
  customKey？: string; // Key kustom
}

interface TableColumn {
  dataKey: string; // Bidang data
  title: string | I18n; // Judul header kolom
  width?: string; // Lebar kolom. Dinyatakan dalam px atau %.
  dataType: 'text' | 'link' | 'file' | 'image' | 'timestamp' | 'cascadeTimestamp' | 'employee' | 'money' | 'moneyRange' | 'enum' | 'custom'; // Tipe data
  float?: '' | 'left' | 'right'; // Pengambangan gambar (hanya berlaku pada mode kartu mobile)
  imageProps?: React.CSSProperties; // Gaya gambar
  imageWrapProps?: React.CSSProperties; // Gaya kontainer gambar
  imageOnClick?: (e: Event, column: number) => void; // Callback klik gambar
  enumBadgeType?: '' | 'color' | 'background'; // Gaya enum
  enumData?: any; // Data enum
  editType?: 'text' | 'link' | 'file' | 'image' | 'timestamp' | 'cascadeTimestamp' | 'employee' | 'money' | 'moneyRange' | 'enum' | 'custom'; // Format edit
  timeFormatter?: 'YYYY-MM-DD HH:mm:ss' | 'YYYY-MM-DD HH:mm' | 'YYYY-MM-DD' | 'YYYY-MM' | 'YYYY'; // Format waktu
  align?: 'left' | 'center' | 'right'; // Perataan
  lock?: 'none' | 'left' | 'right'; // Kunci kolom
  groupName?: string; // Judul grup
  message?: string; // Tips untuk pengguna
  sortable?: boolean; // Apakah kolom dapat diurutkan
  highlight?: boolean; // Apakah kolom disorot. Hanya berlaku pada mode kartu mobile.
  hidden?: boolean; // Apakah kolom disembunyikan.
  resizable?: boolean; // Apakah Lebar kolom dapat disesuaikan. Harus digunakan bersama peristiwa yang dipicu saat lebar kolom diatur ulang.
  titleRender?: (title: string) => ReactNode; // Rendering judul kustom
  render?: (value: any, index: number, rowData) => ReactNode; // Rendering konten kustom
  canEdit?: boolean; // Apakah kolom dapat diedit
  renderField?: (props: any, value: any, rowData: any) => ReactNode; // Rendering kustom dalam status edit
  editProps?: any; // Konfigurasi edit
  filters?: {
    label: string;
    value: string;
  }[];
  filterMode?: 'multiple' | 'single'; // Mode filter
}

interface FilterConfig {
  title: string; // Judul
  id: string;
  fieldId: string;
  componentName: string;
  prevComponentName: string;
  colspan?: number;
  isAdvanced?: boolean;
}

interface ScanCodeConfig {
  enable: boolean;
  type: 'all' | 'barCode' | 'qrCode';
  editable: boolean; // Apakah hasil pemindaian dapat dimodifikasi
}

interface UploadConfig {
  inputName?: string; // Atribut name dari input file untuk unggah. Default-nya file.
  actionUrl: string; // Endpoint unggah
  formatResult?: (response: any) => any; // Pemrosesan data respons
  errorCallback?: () => void; // Callback error
  progressCallback?: () => void; // Callback progres unggah
  headers?: Record<string, string>; // Header permintaan untuk unggah gambar
}