371 lines
14 KiB
Markdown
371 lines
14 KiB
Markdown
# UiType
|
||
|
||
**コントロール機能**：すべての入力コントロールの基底クラス。共通の値取得、設定、リセット、無効化などのメソッドを提供します。
|
||
**タイプ**：通常コントロール
|
||
**親クラスコントロール**：`bricks.Layout`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ | 型 | 説明 |
|
||
|------|------|------|
|
||
| `name` | string | コントロール名（必須） |
|
||
| `value` / `defaultvalue` | any | デフォルト値 |
|
||
| `required` | boolean | 必須項目かどうか。デフォルトは `false` |
|
||
|
||
## 主なイベント
|
||
|
||
- `changed`：コントロールの値が変更されたときに発生。現在のコントロールのキーと値のペアデータを含みます。
|
||
- `blur`：フォーカスを失ったときに発生する可能性があります（サブクラスで実装されます）。
|
||
|
||
---
|
||
|
||
# UiHide
|
||
|
||
**コントロール機能**：非表示フィールドコントロール。表示されないデータを格納するために使用され、DOM 上では `display: none` として表示されます。
|
||
**タイプ**：通常コントロール
|
||
**親クラスコントロール**：`UiType`
|
||
|
||
## 初期化パラメータ
|
||
|
||
`UiType` から継承。追加のパラメータはありません。
|
||
|
||
## 主なイベント
|
||
|
||
- `changed`：値が変更されたときに発生。
|
||
|
||
---
|
||
|
||
# UiStr
|
||
|
||
**コントロール機能**：単一行テキスト入力ボックス。テキストの配置、文字数制限、プレースホルダーなどの機能をサポートします。
|
||
**タイプ**：通常コントロール
|
||
**親クラスコントロール**：`UiType`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ | 型 | 説明 |
|
||
|------|------|------|
|
||
| `align` | string | テキストの配置方法：`left`, `center`, `right` |
|
||
| `length` | number | 最大文字数（maxlength） |
|
||
| `minlength` | number | 最小文字数（minlength） |
|
||
| `tip` | string | ヒント情報（未使用） |
|
||
| `width` | string | 入力ボックスの幅（例：`'200px'`） |
|
||
| `readonly` | string/boolean | 読み取り専用かどうか |
|
||
| `required` | boolean | 必須項目かどうか |
|
||
| `placeholder` | string | プレースホルダーテキスト（国際化対応） |
|
||
| `css` | string | カスタムCSSクラス名 |
|
||
| `dynsize` | boolean | フォントサイズを動的に調整するか。デフォルトは `true` |
|
||
| `cfontsize` | number | フォントサイズの拡大縮小比率 |
|
||
|
||
## 主なイベント
|
||
|
||
- `focus`：フォーカスを得たときに発生。
|
||
- `blur`：フォーカスを失ったときに発生。
|
||
- `changed`：入力内容が変更され、正規表現による検証を通過した後に発生。
|
||
- `keydown`：Enterキー押下時にblurイベントを発生。
|
||
|
||
---
|
||
|
||
# UiPassword
|
||
|
||
**コントロール機能**：パスワード入力ボックス。`UiStr` を継承し、入力内容はマスク表示されます。
|
||
**タイプ**：通常コントロール
|
||
**親クラスコントロール**：`UiStr`
|
||
|
||
## 初期化パラメータ
|
||
|
||
`UiStr` と同じ。
|
||
|
||
## 主なイベント
|
||
|
||
`UiStr` と同じ。
|
||
|
||
---
|
||
|
||
# UiInt
|
||
|
||
**コントロール機能**：整数入力ボックス。数字のみの入力を自動制限。右揃えで表示されます。
|
||
**タイプ**：通常コントロール
|
||
**親クラスコントロール**：`UiStr`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ | 型 | 説明 |
|
||
|------|------|------|
|
||
| `length` | number | 入力最大桁数（任意） |
|
||
|
||
## 主なイベント
|
||
|
||
- `changed`：有効な整数が入力されたときに発生。
|
||
- 値は常に整数形式で返される（`parseInt` を呼び出す）。
|
||
|
||
---
|
||
|
||
# UiFloat
|
||
|
||
**コントロール機能**：浮動小数点数入力ボックス。小数点以下の桁数制御およびステップ値の設定をサポートします。
|
||
**タイプ**：通常コントロール
|
||
**親クラスコントロール**：`UiInt`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ | 型 | 説明 |
|
||
|------|------|------|
|
||
| `dec_len` | number | 小数点以下に保持する桁数。デフォルトは2 |
|
||
|
||
## 主なイベント
|
||
|
||
- `changed`：有効な浮動小数点数が入力されたときに発生。
|
||
- 返り値は `parseFloat(this.value)` になります。
|
||
|
||
---
|
||
|
||
# UiTel
|
||
|
||
**コントロール機能**：電話番号入力ボックス。`<input type="tel">` を使用。カスタム pattern の設定に対応。
|
||
**タイプ**：通常コントロール
|
||
**親クラスコントロール**：`UiStr`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ | 型 | 説明 |
|
||
|------|------|------|
|
||
| `pattern` | string | 正規表現文字列。入力フォーマットの検証に使用 |
|
||
|
||
## 主なイベント
|
||
|
||
- `changed`：入力が pattern に一致した場合に発生。
|
||
|
||
---
|
||
|
||
# UiEmail
|
||
|
||
**コントロール機能**：メールアドレス入力ボックス。`<input type="email">` を使用。カスタム pattern の追加設定も可能。
|
||
**タイプ**：通常コントロール
|
||
**親クラスコントロール**：`UiStr`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ | 型 | 説明 |
|
||
|------|------|------|
|
||
| `pattern` | string | オプションのカスタム正規表現による検証ルール |
|
||
|
||
## 主なイベント
|
||
|
||
- `changed`：有効なメールアドレス形式が入力されたときに発生。
|
||
|
||
---
|
||
|
||
# UiFile
|
||
|
||
**コントロール機能**：ファイルアップロードコントロール。ドラッグ＆ドロップアップロード、クリックでのファイル選択をサポート。ファイルタイプの制限および複数選択の可否を設定可能。
|
||
**タイプ**：コンテナコントロール
|
||
**親クラスコントロール**：`VBox`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ | 型 | 説明 |
|
||
|------|------|------|
|
||
| `accept` | string | 受け入れるMIMEタイプの接頭辞。例：`'image/'`, `'audio/'` |
|
||
| `multiple` | boolean | 複数ファイルのアップロードを許可するか |
|
||
| `width` | string | コンテナの幅。デフォルトは `'100%'` |
|
||
|
||
## 主なイベント
|
||
|
||
- `dragenter` / `dragover` / `dragleave` / `drop`：ドラッグ関連イベント。ハイライト表示やファイル受信処理に使用。
|
||
- `changed`：ファイルを選択またはドラッグインした後に発生。ファイルオブジェクトまたは配列を渡す。
|
||
- `input`：ネイティブの input change イベントリスナー。
|
||
|
||
---
|
||
|
||
# UiImage
|
||
|
||
**コントロール機能**：画像アップロードコントロール。ドラッグ・クリックでのアップロード、カメラ撮影ボタンをサポート。アップロード後は画像のプレビューが可能。
|
||
**タイプ**：コンテナコントロール
|
||
**親クラスコントロール**：`UiFile`
|
||
|
||
## 初期化パラメータ
|
||
|
||
`UiFile` と同じ。デフォルトで `accept='image/'`。
|
||
|
||
## 主なイベント
|
||
|
||
- `changed`：ファイル選択または撮影完了後に発生。File オブジェクトを付与。
|
||
- `shot`：撮影完了イベント。`SysCamera` によって発行され、キャッチされる。
|
||
|
||
---
|
||
|
||
# UiAudio
|
||
|
||
**コントロール機能**：音声アップロードコントロール。録音機能（マイク）をサポート。アップロード後は再生によるプレビューが可能。
|
||
**タイプ**：コンテナコントロール
|
||
**親クラスコントロール**：`UiFile`
|
||
|
||
## 初期化パラメータ
|
||
|
||
`UiFile` と同じ。デフォルトで `accept='audio/'`。
|
||
|
||
## 主なイベント
|
||
|
||
- `changed`：ファイル選択または録音完了後に発生。
|
||
- `record_end`：録音終了イベント。`SysAudioRecorder` によって発行される。
|
||
|
||
---
|
||
|
||
# UiVideo
|
||
|
||
**コントロール機能**：動画アップロードコントロール。動画録画機能（カメラ）をサポート。アップロード後は再生によるプレビューが可能。
|
||
**タイプ**：コンテナコントロール
|
||
**親クラスコントロール**：`UiFile`
|
||
|
||
## 初期化パラメータ
|
||
|
||
`UiFile` と同じ。デフォルトで `accept='video/'`。
|
||
|
||
## 主なイベント
|
||
|
||
- `changed`：ファイル選択または録画完了後に発生。
|
||
- `record_end`：録画終了イベント。`SysVideoRecorder` によって発行される。
|
||
|
||
---
|
||
|
||
# UiCheck
|
||
|
||
**コントロール機能**：チェックボックスコントロール（視覚的にはアイコンの切り替え）。ブール状態（true/false）を表す。
|
||
**タイプ**：通常コントロール
|
||
**親クラスコントロール**：`UiType`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ | 型 | 説明 |
|
||
|------|------|------|
|
||
| `value` | boolean | 初期状態で選択されているかどうか |
|
||
|
||
## 主なイベント
|
||
|
||
- `changed`：状態が切り替わったときに発生。`{name: true/false}` 形式のデータを送信。
|
||
- `state_changed`：アイコンの状態変更イベント（`MultipleStateIcon` から発行）。
|
||
|
||
---
|
||
|
||
# UiCheckBox
|
||
|
||
**コントロール機能**：複数選択／単一選択グループコントロール。データに基づいて複数の `UiCheck` ＋ テキストラベルを生成。静的データまたはリモートからの読み込みに対応。
|
||
**タイプ**：コンテナコントロール
|
||
**親クラスコントロール**：`UiType`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ | 型 | 説明 |
|
||
|------|------|------|
|
||
| `label` | string | グループタイトル |
|
||
| `data` | array | 静的なオプションリスト `[ {text:'', value:''} ]` |
|
||
| `dataurl` | string | リモートデータのURL |
|
||
| `method` | string | リクエスト方式。デフォルトは GET |
|
||
| `params` | object | リクエストパラメータ |
|
||
| `textField` | string | 表示フィールド名。デフォルトは `'text'` |
|
||
| `valueField` | string | 値フィールド名。デフォルトは `'value'` |
|
||
| `value` / `defaultValue` | string/array | デフォルト選択値（単一選択は文字列、複数選択は配列） |
|
||
|
||
> 注：`multicheck` 属性が存在し真の場合、複数選択モードとなります。
|
||
|
||
## 主なイベント
|
||
|
||
- `changed`：いずれかのオプションの状態が変化したときに発生。`{name: selectedValue(s)}` を送信。
|
||
- 内部で `UiCheck` の `changed` イベントをバインドし、値の更新を行う。
|
||
|
||
---
|
||
|
||
# UiDate
|
||
|
||
**コントロール機能**：日付選択コントロール。ネイティブの `<input type="date">` を使用。最小・最大日付の制限をサポート。
|
||
**タイプ**：通常コントロール
|
||
**親クラスコントロール**：`UiStr`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ | 型 | 説明 |
|
||
|------|------|------|
|
||
| `max_date` | string | 許容される最大日付（形式：YYYY-MM-DD） |
|
||
| `min_date` | string | 許容される最小日付（形式：YYYY-MM-DD） |
|
||
|
||
## 主なイベント
|
||
|
||
- `changed`：日付が変更されたときに発生。
|
||
- `blur` / `focus`：フォーカスイベントは親クラスによりサポート。
|
||
|
||
---
|
||
|
||
# UiText
|
||
|
||
**コントロール機能**：複数行テキストエリア（textarea）。Tabによるインデント、Enterによる改行、フォントサイズの動的適応をサポート。
|
||
**タイプ**：通常コントロール
|
||
**親クラスコントロール**：`UiType`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ | 型 | 説明 |
|
||
|------|------|------|
|
||
| `rows` | number | 行数。デフォルトは5 |
|
||
| `cols` | number | 列数。デフォルトは40 |
|
||
| `readonly` | boolean | 読み取り専用かどうか |
|
||
| `required` | boolean | 必須項目かどうか |
|
||
| `value` / `defaultvalue` | string | デフォルトのテキスト内容 |
|
||
|
||
## 主なイベント
|
||
|
||
- `input`：内容が変更されたときに内部値を更新。
|
||
- `keydown`：TabキーとEnterキーをインターセプトし、スマートインデントと改行を実現。
|
||
- `changed`：内容が変更されたときに手動で発行。
|
||
|
||
---
|
||
|
||
# UiCode
|
||
|
||
**コントロール機能**：ドロップダウン選択ボックス（`<select>`）。コードテーブル選択に使用。ローカルデータまたは非同期読み込みに対応。
|
||
**タイプ**：通常コントロール
|
||
**親クラスコントロール**：`UiType`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ | 型 | 説明 |
|
||
|------|------|------|
|
||
| `data` | array | 静的なオプションデータ `[ {text:'', value:''} ]` |
|
||
| `dataurl` | string | オプションを非同期取得するAPIアドレス |
|
||
| `method` | string | リクエストメソッド。デフォルトはGET |
|
||
| `params` | object | リクエストパラメータ |
|
||
| `textField` | string | 表示フィールド名。デフォルトは `'text'` |
|
||
| `valueField` | string | 値フィールド名。デフォルトは `'value'` |
|
||
| `nullable` | boolean | 空の選択肢を許可するか（先頭に空項目を追加） |
|
||
| `value` / `defaultvalue` | string | デフォルト選択値 |
|
||
|
||
## 主なイベント
|
||
|
||
- `input`：選択項目が変更されたときに発生。値を更新し、`changed` を発行。
|
||
- `changed`：値が変更された後、外部へ通知。
|
||
- 外部イベントによるデータの再読み込みをサポート（例：連動フィルタリングなど）。
|
||
|
||
---
|
||
|
||
# UiSearch
|
||
|
||
**コントロール機能**：検索選択コントロール。アイコンクリックでポップアップウィンドウを開き、テーブルから選択できるようにします。関連検索によく使用されます。
|
||
**タイプ**：コンテナコントロール
|
||
**親クラスコントロール**：`HBox`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ | 型 | 説明 |
|
||
|------|------|------|
|
||
| `search_url` | string | ポップアップ内に読み込むページのURL |
|
||
| `valueField` | string | 戻り値に対応するフィールド名 |
|
||
| `textField` | string | 表示テキストに対応するフィールド名 |
|
||
| `popup_options` | object | ポップアップの設定パラメータ |
|
||
| `value` | string | 初期値 |
|
||
| `text` | string | 初期表示テキスト |
|
||
|
||
## 主なイベント
|
||
|
||
- アイコンの `click`：検索ポップアップを開く。
|
||
- `changed`：ポップアップ内でレコードを選択した後に発生。選択された値を返す。
|
||
- `dismiss`：ポップアップを閉じたときのイベント。 |