共通コンポーネントプロパティタイプ

// コンポーネントプロパティの値を取得
export function getAttribute(){
  // Text コンポーネントの content プロパティを取得しコンソールに出力
  const content = this.$('text_kyz78exo').get('content')
  console.log( `text content: ${content}` );
}

// コンポーネントプロパティの値を設定
export function setAttribute(){
  // Text コンポーネントの maxLine プロパティを設定
  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'; // バリデーションタイプ
  message: string | I18n; // エラーメッセージ
  param: number | (value: any) => boolean; // バリデーションパラメータ。type が customValidate の場合はカスタム関数です。
}

interface DataSource {
  text: string | I18n; // 表示コンテンツ
  value: string; // 送信データ
}

interface CascadeDataSource {
  label: string | I18n; // 表示コンテンツ
  value: string; // 送信データ
  chidren?: CascadeDataSource[]
}

interface SliderDataSource {
  src: string; // カルーセル画像の URL
  title?: string | I18n; // カルーセルのタイトル
  link?: string; // 画像クリック時のリダイレクト先リンク
}

interface StepsDataSource {
  title: string;
  content: string;
  status?: '' | 'wait' | 'process' | 'finish'; // 現在のステップのステータス
  customSwitcher?: boolean; // カスタムレンダリングを有効にするかどうか
  customRender?: (item: StepsDataSource) => ReactNode; // カスタムレンダリング関数
  icon?: string; // ステップアイコン
  percent?: number; // 現在のステップの進捗率。1〜100 の数値。
  disabled?: boolean; // ステップを無効にするかどうか
}

interface TimelineDataSource {
  title: string | I18n; // タイトル
  time: string; // 時刻
  icon?: string; // 表示するアイコン
  state?: '' | 'process' | 'success' | 'error'; // 現在のノードのステータス
  timeLeft?: () => ReactNode; // 左側の時刻表示
  doc?: () => ReactNode; // カスタムタイムラインノード。icon プロパティより優先されます。
  content?: () => ReactNode; // 右側のカスタムコンテンツ
}

interface TreeDataSource {
  key: string;
  label: string;
  children?: TreeDataSource[]; // 子ノード
}

interface MenuDataSource {
  label: string;
  key: string;
  chidlren?: MenuDataSource[]; // 子ノード
}

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

interface TabItem {
  title: string; // タブ名
  primaryKey: string; // タブの一意な識別子
  disabled?: boolean; // タブを無効にするかどうか
  customKey？: string; // カスタムキー
}

interface TableColumn {
  dataKey: string; // データフィールド
  title: string | I18n; // 列ヘッダーのタイトル
  width?: string; // 列幅。px または % で指定可能。
  dataType: 'text' | 'link' | 'file' | 'image' | 'timestamp' | 'cascadeTimestamp' | 'employee' | 'money' | 'moneyRange' | 'enum' | 'custom'; // データ型
  float?: '' | 'left' | 'right'; // 画像のフロート（モバイルカードモードでのみ有効）
  imageProps?: React.CSSProperties; // 画像のスタイル
  imageWrapProps?: React.CSSProperties; // 画像コンテナのスタイル
  imageOnClick?: (e: Event, column: number) => void; // 画像クリック時のコールバック
  enumBadgeType?: '' | 'color' | 'background'; // enum のスタイル
  enumData?: any; // enum データ
  editType?: 'text' | 'link' | 'file' | 'image' | 'timestamp' | 'cascadeTimestamp' | 'employee' | 'money' | 'moneyRange' | 'enum' | 'custom'; // 編集フォーマット
  timeFormatter?: 'YYYY-MM-DD HH:mm:ss' | 'YYYY-MM-DD HH:mm' | 'YYYY-MM-DD' | 'YYYY-MM' | 'YYYY'; // 時刻フォーマット
  align?: 'left' | 'center' | 'right'; // 揃え
  lock?: 'none' | 'left' | 'right'; // 列のロック
  groupName?: string; // グループタイトル
  message?: string; // ユーザー向けヒント
  sortable?: boolean; // 列をソート可能にするかどうか
  highlight?: boolean; // ハイライトするかどうか。モバイルカードモードでのみ有効。
  hidden?: boolean; // 列を非表示にするかどうか。
  resizable?: boolean; // 列幅を調整可能にするかどうか。列幅リセット時にトリガーされるイベントと併用する必要があります。
  titleRender?: (title: string) => ReactNode; // タイトルのカスタムレンダリング
  render?: (value: any, index: number, rowData) => ReactNode; // コンテンツのカスタムレンダリング
  canEdit?: boolean; // 列を編集可能にするかどうか
  renderField?: (props: any, value: any, rowData: any) => ReactNode; // 編集状態でのカスタムレンダリング
  editProps?: any; // 編集設定
  filters?: {
    label: string;
    value: string;
  }[];
  filterMode?: 'multiple' | 'single'; // フィルターモード
}

interface FilterConfig {
  title: string; // タイトル
  id: string;
  fieldId: string;
  componentName: string;
  prevComponentName: string;
  colspan?: number;
  isAdvanced?: boolean;
}

interface ScanCodeConfig {
  enable: boolean;
  type: 'all' | 'barCode' | 'qrCode';
  editable: boolean; // スキャン結果を編集可能にするかどうか
}

interface UploadConfig {
  inputName?: string; // アップロード用の file input の name 属性。デフォルトは file。
  actionUrl: string; // アップロードエンドポイント
  formatResult?: (response: any) => any; // レスポンスデータの処理
  errorCallback?: () => void; // エラーコールバック
  progressCallback?: () => void; // アップロード進捗のコールバック
  headers?: Record<string, string>; // 画像アップロードのリクエストヘッダー設定
}