Bone Flow #029 - NumberBox v1.0.20
数値入力・編集 / 右寄せ入力 / 計算小数桁・表示小数桁・3桁カンマ・丸め方式 / 伝票モード / min・max・step Validation / Untrusted IN防御 / #002 Joint WAIT・BLOCKED OUT配送統合テスト
使用コンポーネント
UI Dependency Tree — #029 NumberBox
- #001 Bone Core — Runtime
- #002 Bone Joint — IN / OUT, WAIT / FIFO / BLOCKED
- #022 Hover Border Effect — Active
- #040 ColorPicker — Property chooser
- #020 Label — #040表示依存
- #118 Transition — #040 OPEN / CLOSE
#017 Text は表示構成の参照のみ（Runtime非依存）。#027/#028は設計比較で直接依存ではありません。直下の子のみ表示します。
プロパティ設定
単体時の表示設定（#017 Text基準）
親要素に依存がONの時、この幅・高さ・表示位置・入力時文字位置は無視されます。
伝票モード
通常は入力モード。伝票モードONではフォーカスを失うと右寄り均等割り付け表示へ切替え、マウスオーバーで入力モードへ戻ります。
親要素設定（継承確認用）
テスト用親要素の設定。親依存ONではNumberBoxは親の幅・高さ100%、背景・文字色・角丸・文字位置へ追従し、自身の通常枠は持ちません。
アクティブ時の枠Effect
#040/#118連携：未初期化
背景色・親背景色は単色/linear-gradient対応。枠Effect色・文字色・伝票罫線色は描画APIの契約上、単色のみです。#118は#040の実Overlayを開閉するために渡します。
NumberBox Preview
HTML Functional Class
通常利用は bf-numberbox 1個です。<input class="bf-numberbox" type="number" value="1234.5"> のように宣言し、属性から実 BoneNumberBox v1.0.19 を生成します。旧 bone-html-class-use / API別Class方式は通常利用仕様ではありません。
<input class="bf-numberbox" type="number" value="-1234567.89" data-display-decimal-places="2" data-use-grouping="true" data-voucher-mode="true" data-voucher-yen-mark="true" data-voucher-negative-red="true" data-theme="neon">全48 Property、15 JavaScript Callback、44 Public API、50 Runtime Error、Security / WAIT / FIFO / BLOCKED、伝票モードの詳細はDOC-0029で説明します。
#029 NumberBox — HTML Functional Class ガイド / Guide
通常利用のHTML classは bf-numberbox。専用Bridge JSとRuntime JSを読み込んでください。伝票モードも同じclassで設定します。
<input class="bf-numberbox" type="number" value="1234.5" data-decimal-places="2" data-display-decimal-places="2" data-use-grouping="true" data-rounding-mode="half-up" data-voucher-mode="true" data-voucher-yen-mark="true"> <script src="/boneflow/js/bone-numberbox.js"></script> <script src="/boneflow/js/bone-numberbox-functional-class.js"></script> <script>BoneNumberBoxFunctionalClass.mountAll();</script>
数値のOUTは有限numberまたはnullのまま。3桁カンマ・￥・罫線は表示専用です。#040はテスト画面の色選択UIで、HTML classの属性ではありません。#118はColorPicker OPEN/CLOSE側の責務です。
Use the bf-numberbox class with the NumberBox Runtime and HTML Functional Class bridge. All voucher formatting remains presentation-only.
<input class="bf-numberbox" type="number" value="1000" data-display-decimal-places="2" data-use-grouping="true" data-voucher-mode="true" data-voucher-yen-mark="true"> <script src="/boneflow/js/bone-numberbox.js"></script> <script src="/boneflow/js/bone-numberbox-functional-class.js"></script> <script>BoneNumberBoxFunctionalClass.mountAll();</script>
Only finite numbers and null are delivered through OUT. The #040 ColorPicker and #118 Transition are test-page integrations, not unsupported HTML attributes.
詳細な属性、Error Codes、JA/ENのLive Samplesは同梱の docs/doc/content/DOC-0029/ を参照。
Untrusted IN / Security Test
通常Previewとは独立したSecurity専用NumberBoxで検証します。finite number / nullのみPASSし、numeric string・HTML風string・getter・Proxy・Infinity・objectはBLOCKEDとして直前値を保持します。通常Previewのvalue / editing / committed / OUTには干渉しません。
接続イメージ
#021 Shape v1.0.24 と同じ Bone Joint 接続状態イメージです。中央表示のみ「NumberBox」に合わせています。
OUT WAIT / BLOCKED - #002 Joint v1.1.36 Integration
NumberBoxはcommitまでを担当し、待機キュー・FIFO・BLOCK判定後の配送停止は#002 Jointへ委譲します。ここは専用のDelivery Test NumberBoxを使用し、NumberBox Preview本体には一切干渉しません。下の線・端点・spinner / ban はすべて BoneJoint.drawLine の実描画です。
#029 統合回帰テスト（実Runtime / Actual Runtime）
#001/#002/#022/#020/#040/#118/#029を実DOM上で検査。Smoke/Validationとは別に実行します。OPEN/CLOSE・Effect表示・HTML Class・DOC Guide・累積導線を検査します。
Smoke Test / Validation Report
NOT RUN
Smoke Test 結果NOT RUN
Smoke Testは未実行です。
Validation 結果NOT RUN
Validationは未実行です。