Bone Flow #029 - NumberBox Package 1.0.35 Runtime 1.0.19
数値入力・計算桁数・表示桁数・伝票モードの設定と実動作テスト
プロパティ設定
単体時の表示設定（#017 Text基準）
親要素に依存がONの時、この幅・高さ・表示位置・入力時文字位置は無視されます。
伝票モード
通常は入力モード。伝票モードONではフォーカスを失うと右寄り均等割り付け表示へ切替え、マウスオーバーで入力モードへ戻ります。
親要素設定（継承確認用）
テスト用親要素の設定。親依存ONではNumberBoxは親の幅・高さ100%、背景・文字色・角丸・文字位置へ追従し、自身の通常枠は持ちません。
アクティブ時の枠Effect
#040/#118連携：未初期化
背景色・親背景色は単色/linear-gradient対応。枠Effect色・文字色・伝票罫線色は描画APIの契約上、単色のみです。#118は#040の実Overlayを開閉するために渡します。
NumberBox Preview
Runtime状態・JSON詳細を表示
開発者用：HTML 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で説明します。
開発者用：HTML Class属性コード（JA / EN）
通常利用のHTML classは bf-numberbox。実際に利用する場合は#001 Core、#022 Effect、#029 RuntimeとBridgeを読み込んでください。完全なHTMLは上部の「HTML Class ガイド」でコピーできます。伝票モードも同じ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.scan(document);</script>
数値のOUTは有限numberまたはnullのまま。3桁カンマ・￥・罫線は表示専用です。#040はテスト画面の色選択UIで、HTML classの属性ではありません。#118はColorPicker OPEN/CLOSE側の責務です。
Use the bf-numberbox class with the #001 Core and #022 Effect dependencies, #029 Runtime and its HTML Class bridge. See the top HTML Class guide for a complete page. Voucher formatting is 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.scan(document);</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/ を参照。
使用コンポーネント
直接依存のみ表示・間接依存は展開UI Dependency Tree・間接依存・#017参照構成を表示
- #001 Bone Core — Runtime
- #002 Bone Joint — IN / OUT, WAIT / FIFO / BLOCKED
- #022 Hover Border Effect — Active
- #040 ColorPicker — Property chooser
- #020 Label — 読み込み中
- #118 Transition — 読み込み中／OPEN・CLOSE
#017 Text は表示構成の参照のみ（Runtime非依存）。#027/#028は設計比較で、#029の直接依存ではありません。
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には干渉しません。
接続イメージ
#002 Bone Jointの接続構造を用いた 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は未実行です。