Bone Flow #036 - Select v1.1.22

SELECT / 親→子1階層Items / #020 Label / #019 Image / #002 Joint WAIT・FIFO・BLOCKED

Development Standard v1.0#019 Image v1.0.72#022 Hover Border Effect v1.0.10Dropdown = overlay

使用コンポーネント

#001 Bone Core確認中

#002 Bone Joint確認中

#017 Bone Text#020経由

#018 Bone Icon#019経由

#019 Bone Image確認中

#020 Bone Label確認中

#022 Hover Border Effect確認中

プロパティ設定

Property 表示言語

選択値 (value)

読み取り専用 (readonly)

無効 (disabled)

Label設定（#020 Bone Label）

Selectラベル

Label文字

Selectとラベルの余白 (px)

#020 Label フォントサイズ (px)

リスト設定

リスト項目ラベル

リスト文字 / アイコンサイズ (px)

Items（親項目 = グループ表示・選択不可 / 子項目 = 選択可能）

親 / 単体設定

親要素に依存ONでは単体の幅・高さ・表示位置・単体FITを描画へ使用しません。親吸着位置9方向はありません。

親要素に依存（親に合わせる）

親要素用FIT

単体幅 (px)

単体高さ (px)

単体表示位置（9方向）

単体FIT

親要素設定（継承確認用）

親依存ON時の実際の親要素をここで確認します。親吸着9方向は追加しません。

親の幅 (px)

親の高さ (px)

親のSelect位置

親の背景色

親の文字色

親の角丸 (px)

マウスオーバー時の枠Effect

各項目の枠Effect

Effect色

Effect方向

Effect速度

スピン外周幅 (px)

スピン発光量 (px)

URL OUT

Select Preview

#019 Image設定

対象項目

#019 Bone Image v1.0.72 の「基本」と「その他のアイコン設定」を、現在の対象Itemの image に結び付けます。

value-

OUT-

Dropdown

Untrusted IN / Security Test

Previewとは独立した専用Selectで検証します。null / 空文字 / items外value はBLOCKED、items内の存在valueだけをACCEPTED。暗黙変換せず、BLOCKED時はSecurity専用Selectの直前値を保持し、通常Previewは変更しません。

Source / Joint IN未実行#002 Joint

Select Security未実行検査待ち検査待ち

Selectalpha値変更なし

未実行

Result JSON: 未実行

接続イメージ

表示確認専用。#002 Bone Jointの実判定・実描画で、確定仕様の3ケース（正常接続 / IN型不一致 / OUT型不一致）のみを確認します。Select本体のstate / render / value / OUT / Deliveryへ接続しません。

IN 接続線

OUT 接続線

型不一致

OUT WAIT / BLOCKED - #002 Joint v1.1.36 Integration

Selectの選択確定OUTを#002正式Delivery Channelへ渡します。通常Previewとは分離した専用deliveryBoxを使用し、WAIT queue / FIFO / BLOCK後のTarget未配送を実動作で確認します。

READY ○Target受信 0件 / Queue 0

Select OUTselected string

TargetREADY

Target受信ログ: なし

Joint描画確認中...

3秒WAITで spinner → ○、線が切れず、待機OUTがFIFOで自動配送されたことを目視確認しました。 BLOCKで fa-ban + beat-fade、線は接続維持、TargetへBLOCK確認値が届かなかったことを目視確認しました。

Smoke Test / Validation Report

NOT RUN

実行日時-

検査件数0件

PASS0件

FAIL0件

実行時間0.0ms

Version1.1.22

Smoke Test 結果NOT RUN

Smoke Testは未実行です。

Validation 結果NOT RUN

Validationは未実行です。

コンポーネント完了管理

Smoke TestとValidation ReportがALL PASSになり、WAIT / BLOCKEDの目視確認が完了した後に完了できます。

Component#036 Bone Select

Version1.1.22

Completion Flagfalse

StatusDevelopment

ValidationNOT RUN

完了日時-

全テストALL PASS + WAIT/BLOCK目視確認後に完了できます。

属性	役割	値 / Default	説明
`class`	機能Class	`bone-html-class-use bone-...-...`	`bone-html-class-use` とClass一覧の機能Classを同じ `class=""` に設定します。対応Public APIと1対1です。
`data-bone-event`	起動タイミング	`load` / click / input / change / manual 等 Default: `load`	複数指定は空白またはカンマ区切り。`manual` は自動実行せず、Bridgeの `invoke()` から実行します。
`data-bone-args`	引数一括指定	JSON Array	Public APIの引数順そのままのJSON配列です。例: `["$self","$value",{}]`
`data-bone-arg-N`	引数個別指定	Nは0始まり	`data-bone-arg-0`, `data-bone-arg-1` のように1引数ずつ指定します。一括指定より個別値を補完できます。
`data-bone-once`	イベント1回限定	`true` / Default: false	click等のイベント監視を1回だけ実行したい場合に指定します。
`data-bone-append-result`	Element戻り値	`false` でappend停止 Default: append	Public APIがElementを返した場合、既定ではClass設定要素へappendします。
`data-bone-throw`	Debug再throw	`true` / Default: false	Class実行エラーをResultへ保存した後、Debug用に非同期で再throwします。

値	解決内容
`$self`	Classを設定したHTML要素そのものを渡します。element / target / root などの第1引数に使用します。
`$event`	Class起動の原因になったDOM Eventを渡します。click / input / change等のイベント情報が必要なAPI用です。
`$value`	input / textarea / select等の現在の value を渡します。
`$checked`	checkbox / radio等の現在の checked(Boolean)を渡します。
`$text`	Classを設定した要素の textContent を渡します。
`$dataset`	Classを設定した要素の dataset を通常Objectとして渡します。
`$files`	file input の FileList を渡します。
`$selector:...`	...をCSS selectorとして document.querySelector() で解決し、そのElementを渡します。
`$id:...`	...をDOM idとして document.getElementById() で解決し、そのElementを渡します。
`$global:...`	window / globalThis上の指定名の値を渡します。
`$handler:...`	window / globalThis上の指定名のFunctionをコールバック引数として渡します。

結果	内容	用途
`element.__boneClassResult`	Public APIの生の戻り値	JavaScript側で元のObject / Element / primitiveをそのまま参照します。
`data-bone-class-status`	`ok` / `error`	HTML属性だけで直近のClass実行成否を確認します。
`data-bone-class-result`	戻り値のserialize結果	DOM Inspectorやテストから結果概要を確認します。長い結果は1000文字で省略します。
`bone-html-class-result`	成功CustomEvent	`detail` に componentId / className / api / value を持ちます。
`bone-html-class-error`	失敗CustomEvent	`detail` に componentId / className / api / error を持ちます。

HTML Class	`bone-select-defaults`
対応Public API	`BoneSelect.defaults`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-normalize-options`
対応Public API	`BoneSelect.normalizeOptions`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-validate-value`
対応Public API	`BoneSelect.validateValue`
使用する場面	HTMLイベントから検証・解析を実行し、その結果をResultとして受け取りたいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

#	引数名	値の種類	HTMLでの渡し方	例
0	`value`	String / API許容値	`data-bone-arg-0` または `data-bone-args[0]`	`null`
1	`source`	String / API許容値	`data-bone-arg-1` または `data-bone-args[1]`	`"html-class"`

HTML Class	`bone-select-create`
対応Public API	`BoneSelect.create`
使用する場面	HTML上のホスト要素からUI生成・描画を開始したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

#	引数名	値の種類	HTMLでの渡し方	例
0	`input`	API定義値	`data-bone-arg-0` または `data-bone-args[0]`	`null`
1	`options`	Object	`data-bone-arg-1` または `data-bone-args[1]`	`{}`

HTML Class	`bone-select-is-instance`
対応Public API	`BoneSelect.isInstance`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-get-bone`
対応Public API	`BoneSelect.getBone`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-get-value`
対応Public API	`BoneSelect.getValue`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-get-items`
対応Public API	`BoneSelect.getItems`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-get-options`
対応Public API	`BoneSelect.getOptions`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-get-label`
対応Public API	`BoneSelect.getLabel`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-get-trigger`
対応Public API	`BoneSelect.getTrigger`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-get-dropdown`
対応Public API	`BoneSelect.getDropdown`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-open`
対応Public API	`BoneSelect.open`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-close`
対応Public API	`BoneSelect.close`
使用する場面	HTML操作を契機に対象の破棄・削除・切断・終了を行いたいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-toggle`
対応Public API	`BoneSelect.toggle`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-select`
対応Public API	`BoneSelect.select`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

#	引数名	値の種類	HTMLでの渡し方	例
0	`e`	API定義値	`data-bone-arg-0` または `data-bone-args[0]`	`"$self"`
1	`v`	API定義値	`data-bone-arg-1` または `data-bone-args[1]`	`null`

HTML Class	`bone-select-set-value`
対応Public API	`BoneSelect.setValue`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-build-output`
対応Public API	`BoneSelect.buildOutput`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-apply-joint-input`
対応Public API	`BoneSelect.applyJointInput`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-create-group-image-editor`
対応Public API	`BoneSelect.createGroupImageEditor`
使用する場面	HTML上のホスト要素からUI生成・描画を開始したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-create-item-image-editor`
対応Public API	`BoneSelect.createItemImageEditor`
使用する場面	HTML上のホスト要素からUI生成・描画を開始したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-sync-parent-style`
対応Public API	`BoneSelect.syncParentStyle`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-connect-output`
対応Public API	`BoneSelect.connectOutput`
使用する場面	HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-disconnect-output`
対応Public API	`BoneSelect.disconnectOutput`
使用する場面	HTML操作を契機に対象の破棄・削除・切断・終了を行いたいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-set-target-ready`
対応Public API	`BoneSelect.setTargetReady`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-clear-output-block`
対応Public API	`BoneSelect.clearOutputBlock`
使用する場面	HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-get-output-state`
対応Public API	`BoneSelect.getOutputState`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-get-output-queue`
対応Public API	`BoneSelect.getOutputQueue`
使用する場面	JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。

HTML Class	`bone-select-destroy`
対応Public API	`BoneSelect.destroy`
使用する場面	HTML操作を契機に対象の破棄・削除・切断・終了を行いたいとき。
起動方法	`data-bone-event` で load / click / input / change / manual 等を指定します。