paragraph
code()
line 1 line 2``` ### 3.2 入力用要素 ```html ``` `input` で `text / number / password` 以外を指定すると `BONE_TEXT_HTML_CLASS_INPUT_TYPE_INVALID` です。 ### 3.3 対応しない要素 ```html ``` `button` など表示用8要素でも `input` でもない要素は通常利用対象外です。`BONE_TEXT_HTML_CLASS_ELEMENT_UNSUPPORTED` として扱います。 ## 4. 最小HTML ### 4.1 文字を表示する ```html ABC ``` ### 4.2 段落を表示する ```html
Bone Flow Text sample.
``` ### 4.3 文字を入力する ```html ``` ### 4.4 Placeholderを使う ```html ``` ### 4.5 Required / Readonly ```html ``` ## 5. 実表示 `bf-text` は元HTMLを読み取り、BoneText Runtimeが生成した要素へ置き換えます。 表示用要素では要素内の文字が初期値です。 ```html 重要 ``` 入力では `value` が初期値です。 ```html ``` 入力中はRuntimeが `bone-text-input` CustomEventを発行します。特別な独自キーボード編集ルールを追加せず、通常のHTML input操作を維持します。 ## 6. 設定付きHTML ### 6.1 表示属性を設定する ```html1行目 2行目
``` ### 6.2 入力の見た目と操作を設定する ```html ``` ### 6.3 numberを右寄せにする `type="number"` で `text-align` を指定しない場合、Runtimeの `inputAlign:auto` により右寄せになります。 ```html ``` ## 7. HTML各指定の説明 ### 7.1 `class="bf-text"` 必須の通常利用入口です。 ```html ABC ``` ### 7.2 `id` HTML直接指定可能です。生成後の要素へ維持されます。 ```html READY ``` ### 7.3 `role` / `aria-label` アクセシビリティ用の標準属性です。 ```html READY ``` ### 7.4 `title` / `lang` / `dir` HTML直接指定可能です。 ```html ABC ``` `dir` は `ltr / rtl / auto` です。 ### 7.5 `hidden` HTML標準の `hidden` を利用できます。 ```html 非表示 ``` ### 7.6 `tabindex` Functional Classは標準属性として入力要素へ引き継ぎます。 ```html ``` ### 7.7 `style="white-space: ..."` 表示用8要素では、次の6値をinline CSSからRuntimeへ渡せます。 ```htmlA B``` 対応値は `normal / nowrap / pre / pre-wrap / pre-line / break-spaces` です。 ### 7.8 `type` 入力用 `` では `text / number / password` のみです。 ```html ``` ### 7.9 `placeholder` 入力用でHTML直接指定可能です。 ```html ``` ### 7.10 `readonly` / `required` 入力用でHTML直接指定可能です。 ```html ``` ### 7.11 `text-align` 入力用で `left / center / right` を直接指定できます。未指定時はRuntimeの `auto` です。 ```html ``` ### 7.12 Font CSS 入力用では次のinline CSSを読み取ります。 - `font-family` - `font-size` - `font-weight` - `font-style` - `color` - `background-color` ```html ``` ### 7.13 HTML直接指定不可のRuntime設定 次は `bf-text` の通常HTML変換では専用 `data-*` を勝手に発明して指定しません。必要ならProperty Editorまたは `BoneText` Public APIを利用します。 - `prefix` - `suffix` - `emptyText` - `formatter` - `overflow` - `maxLines` - `position` - `selectable` - Gradient形式の `inputFont.color / backgroundColor` ## 8. Runtime Default全件 Runtime Defaultと、現在の#017 Property Editor初期値・選択肢を混同しません。 ### 8.1 Display / Common - `tag`: Runtime Default `span`。Property Editorでは通常直接編集しません。 - `className`: `""`。 - `id`: `""`。 - `role`: `""`。 - `ariaLabel`: `""`。 - `title`: `""`。 - `lang`: `""`。 - `direction`: `auto`。 - `whitespace`: `normal`。 - `overflow`: `wrap`。 - `selectable`: `true`。 - `hidden`: `false`。 - `maxLines`: `0`（制限なし）。 - `emptyText`: `""`。 - `prefix`: `""`。 - `suffix`: `""`。 - `formatter`: `null`。 ### 8.2 Input - `valueType`: Runtime Default `text`。Property Editor初期値も `text`。 - `position`: Runtime Default `center`。現在のProperty Editorでは直接変更しません。 - `inputAlign`: Runtime Default `auto`。Property Editor初期値も `auto`。 - `placeholder`: `""`。 - `readOnly`: `false`。 - `required`: `false`。 - `inheritParent`: `true`。親要素の利用可能幅へ吸着する基本設定です。 ### 8.3 inputFont - `family`: Runtime Default `system-ui, sans-serif`。Property Editor初期値も同値。 - `size`: Runtime Default `16` px。Runtimeは **0より大きい有限数**。現在のProperty Editor UIは `8～72px` に制限。 - `weight`: Runtime Default `400`。Runtimeは keyword + 100～900。現在のProperty Editorは `400 / 600 / 700`。 - `style`: Runtime Default `normal`。Property Editorは `normal / italic / oblique`。 - `color`: Runtime Default `#111111`。Property Editorでは #040 ColorPickerを使用。 - `backgroundColor`: Runtime Default `#ffffff`。Property Editorでは #040 ColorPickerを使用。 ## 9. Property詳細全件 ### 正式Property定義（Runtime Schema） Property定義の正本はRuntimeです。画面やGuideへ別定義を持たせません。 - `BoneText.getPropertySchema()` — 全Property定義を返す。 - `BoneText.getPropertyDefaults()` — Runtime Default一式を返す。 - `BoneText.getPropertyDefinition(key)` — 指定Propertyの定義を返す。存在しないkeyは `null`。 テスト画面の「正式Property定義（Runtime Schema）」一覧も `getPropertySchema()` の実値から生成します。 ### `inheritParent` — 親に吸着 - 型: `boolean` - Runtime Default: `true` - `true`: Text / Text Editorを親要素の利用可能幅へ吸着し、親のpaddingを含むcontent領域に従います。 - `false`: Text自身の内容幅を基準にします。 - HTML Functional Classでは `data-inherit-parent="true|false"` で指定します。属性省略時は `true` です。 - `true` ではText / Editor自身を `display:block; width:100%` として親のcontent幅へ実際に吸着します。`false` ではこのdisplay/width指定を解除し、内容幅を基準に戻します。 ```html ABC ``` ### 9.1 `tag` 表示要素の種類です。Runtimeは8値。生成後に別tagへ変更しようとすると `BONE_TEXT_TAG_IMMUTABLE` です。 ### 9.2 `className` Runtime生成要素へ付ける追加Classです。HTMLでは `class="bf-text 任意Class"` として利用できます。 ```html OK ``` ### 9.3 `id` / `role` / `ariaLabel` / `title` / `lang` 標準HTML情報です。文字列で指定します。Functional Classでは対応するHTML属性から読み取ります。 ### 9.4 `direction` 文字方向です。`ltr / rtl / auto`。 ### 9.5 `whitespace` 改行・空白の扱いです。6値すべてをRuntimeが受け付けます。 ### 9.6 `overflow` `wrap / ellipsis / clip`。Functional Classの通常HTMLから専用属性は提供しません。Public APIで指定します。 ### 9.7 `selectable` `true / false`。選択可否です。Runtime Defaultは `true`。 ### 9.8 `hidden` `true / false`。HTMLの `hidden` と連動できます。 ### 9.9 `maxLines` 0以上の整数。`0` は行数制限なしです。 ### 9.10 `emptyText` `null / undefined` を表示するときの代替文字です。 ### 9.11 `prefix` / `suffix` 表示文字の前後へ加える文字列です。 ### 9.12 `formatter` `function` または `null`。HTMLへ関数を埋め込む専用属性は提供しません。 ### 9.13 `valueType` `text / number / password`。入力用要素のtypeへ対応します。 ### 9.14 `position` 9方向。Runtime状態として保持します。通常HTML利用では独自 `data-position` 契約を追加しません。 ### 9.15 `inputAlign` `auto / left / center / right`。`auto` は `number` が右、text/passwordが左です。 ### 9.16 `placeholder` 入力が空のときの案内文字です。 ### 9.17 `readOnly` `true` なら編集不可です。 ### 9.18 `required` `true` ならHTML inputのrequired状態になります。 ### 9.19 `inputFont.family` 空ではない文字列。HTMLでは `font-family` から取得します。 ### 9.20 `inputFont.size` Runtimeは0より大きい有限数。単位はpxです。Property Editorは安全な編集範囲として8～72pxを提供します。 ### 9.21 `inputFont.weight` Runtimeは `normal / bold / bolder / lighter / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900`。 ### 9.22 `inputFont.style` `normal / italic / oblique`。 ### 9.23 `inputFont.color` Runtimeは単色、`transparent`、正式Gradient値を扱います。Property Editorの選択UIは#040です。 ### 9.24 `inputFont.backgroundColor` 文字入力欄の背景。Runtimeは単色、`transparent`、正式Gradient値を扱います。Property Editorの選択UIは#040です。 ## 10. 列挙値全件 ### 10.1 tag 8件 - `span`: 行内の標準Text。 - `p`: 段落。 - `div`: ブロック。 - `small`: 補助・小さな文脈。 - `strong`: 強調。 - `em`: 強勢。 - `code`: コード表現。 - `pre`: 改行・空白を維持する文脈。 ### 10.2 valueType 3件 - `text`: 通常文字。 - `number`: 数値input。 - `password`: パスワードinput。 ### 10.3 position 9件 - `top-left`: 上・左。 - `top-center`: 上・中央。 - `top-right`: 上・右。 - `middle-left`: 中央高・左。 - `center`: 中央。 - `middle-right`: 中央高・右。 - `bottom-left`: 下・左。 - `bottom-center`: 下・中央。 - `bottom-right`: 下・右。 ### 10.4 inputAlign 4件 - `auto`: text/passwordは左、numberは右。 - `left`: 左寄せ。 - `center`: 中央寄せ。 - `right`: 右寄せ。 ### 10.5 direction 3件 - `ltr`: Left-to-Right。 - `rtl`: Right-to-Left。 - `auto`: ブラウザ判定。 ### 10.6 whitespace 6件 - `normal`: 通常の空白処理。 - `nowrap`: 折返さない。 - `pre`: 空白・改行維持、通常は折返さない。 - `pre-wrap`: 空白・改行維持 + 折返し。 - `pre-line`: 改行維持、連続空白は通常処理。 - `break-spaces`: 空白を維持し、空白位置でも折返し可能。 ### 10.7 overflow 3件 - `wrap`: 通常折返し。 - `ellipsis`: はみ出しを省略記号表示。 - `clip`: はみ出しを切る。 ### 10.8 Font Weight 全件 `normal / bold / bolder / lighter / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900` Property Editorの選択肢は `400 / 600 / 700` です。Runtimeの許容値と同一ではありません。 ### 10.9 Font Style 3件 `normal / italic / oblique` ## 11. 操作方法 ### 表示Text 表示用要素はユーザー入力を受けません。値変更は `BoneText.setText()` / `update()` などのAPI、または上位UIから行います。 ### 入力Text `input.bf-text` は通常のinputとしてフォーカス、選択、編集、IME入力を使います。 ```html ``` `readonly` は編集を止め、`required` はHTML validation状態へ反映します。 ## 12. Keyboard #017 Textは独自のEnter確定、Esc取消、矢印キー移動などを勝手に定義しません。入力操作はブラウザの標準 `input` 動作です。 - Tab: ブラウザ標準のフォーカス移動。 - 文字キー: 通常入力。 - Backspace/Delete: 通常編集。 - IME: ブラウザ標準入力。 入力値の変化を監視する場合は `bone-text-input` eventを利用します。 ```javascript const input = document.querySelector('.bf-text'); input.addEventListener('bone-text-input', (event) => { console.log(event.detail.value); }); ``` ## 13. ColorPicker #017のProperty Editorで文字色・背景色を選ぶUIは **#040 ColorPicker** を使います。#017独自のColorPickerを作りません。 - Text側: triggerとProperty値を所有。 - #040側: Picker Overlay、選択、RETURNを所有。 HTMLを直接書く場合、単色とtransparentは標準CSSで指定できます。 ```html ``` GradientをRuntimeへ設定する高度な利用は、#040で得た正式値を `BoneText.setOptions()` へ渡します。#040内部DOM/CSSを#017から参照しません。 ## 14. Joint Jointは **#002 Bone Joint** の責務です。#017の通常HTML使用とは別の、Flow接続を行う場合に確認します。 #017側で独自の線、独自の×、独自WAIT/BLOCKED markerを作りません。 確認対象: - 正常 IN / OUT - Target Field不存在 - 型不一致 - 接続エラー - WAIT / FIFO / BLOCKED `bf-text` の基本利用を覚えるためにJoint設定は必須ではありません。Flow接続が必要なときだけ #002 のGuideと #017テストページの接続イメージを参照してください。 ## 15. Smoke / Validation `bone-text.html` のSmoke TestはRuntime、依存、Preview、HTML Functional Class、Joint/ColorPicker連携などを確認します。 ValidationはSmokeの結果を前提に、重複ID、責務分離、DOC導線、Completion gateなどを確認します。 テストを実行していない状態は `NOT RUN` です。ボタンを押して初めて実行します。 ## 16. Completion Completionは以下を満たした後だけ可能です。 1. Smoke Test ALL PASS。 2. Validation ALL PASS。 3. WAIT → READY → FIFOを目視確認。 4. BLOCKEDでTargetへ配送されないことを目視確認。 5. ユーザーlocalhostで表示と操作を確認。 Candidateを自動的にCompleted / Specification Frozenへ昇格させません。 ## 17. Public API Public APIは高度な利用向けです。通常利用は `bf-text` を優先します。 ### 17.1 `normalizeValue(value, emptyText?)` Textへ表示できる値を文字列化します。 ### 17.2 `normalizeOptions(options)` Runtime Optionを検証・正規化します。 ### 17.3 `create(value, options)` 表示要素を生成します。 ```javascript const el = BoneText.create('ABC', { tag: 'strong' }); document.body.appendChild(el); ``` ### 17.4 `createEditor(value, options)` input editorを生成します。 ```javascript const input = BoneText.createEditor('ABC', { valueType: 'text' }); document.body.appendChild(input); ``` ### 17.5 `render(target, value, options)` 生成した表示要素をtargetへappendします。 ### 17.6 `renderEditor(target, value, options)` 生成したeditorをtargetへappendします。 ### 17.7 `update(element, value, options)` 既存BoneText instanceを更新します。 ### 17.8 `setText(element, value)` 値を更新します。 ### 17.9 `getText(element)` 現在の表示/入力文字列を取得します。 ### 17.10 `getValue(element)` Runtimeが保持する元値を取得します。 ### 17.11 `getOptions(element)` 現在Optionのsnapshotを取得します。 ### 17.12 `setOptions(element, options)` Optionを更新します。 ### 17.13 `destroy(element)` Runtime instanceを破棄します。 ### 17.14 `isInstance(element)` BoneText Runtime管理要素か確認します。 ### 17.15 `getCompletionState()` #017のCompletion状態を取得します。 ### 17.16 `complete(validation)` Smoke / ValidationのALL PASS結果を伴うときだけCompletion状態へ変更します。 ### 17.17 `reopen()` Completion状態をDevelopmentへ戻します。 ## 18. Error / Troubleshooting ### `BONE_TEXT_HTML_CLASS_RUNTIME_UNAVAILABLE` `bf-text` より前にBoneText Runtimeが利用可能になっているか確認します。 ### `BONE_TEXT_HTML_CLASS_INPUT_TYPE_INVALID` `input.bf-text` の `type` が `text / number / password` のいずれかか確認します。 ### `BONE_TEXT_HTML_CLASS_ELEMENT_UNSUPPORTED` `bf-text` を表示用8要素またはinput以外へ付けていないか確認します。 ### `BONE_TEXT_TAG_INVALID` Runtime APIで `tag` に8種類以外を指定していないか確認します。 ### `BONE_TEXT_VALUE_TYPE_INVALID` `valueType` を `text / number / password` から選びます。 ### `BONE_TEXT_POSITION_INVALID` position 9値の綴りを確認します。 ### `BONE_TEXT_INPUT_ALIGN_INVALID` `auto / left / center / right` か確認します。 ### `BONE_TEXT_DIRECTION_INVALID` `ltr / rtl / auto` か確認します。 ### `BONE_TEXT_WHITESPACE_INVALID` whitespace 6値のいずれかか確認します。 ### `BONE_TEXT_OVERFLOW_INVALID` `wrap / ellipsis / clip` か確認します。 ### `BONE_TEXT_MAX_LINES_INVALID` 0以上の整数を指定します。 ### `BONE_TEXT_FONT_SIZE_INVALID` Runtimeでは0より大きい有限数を指定します。Property Editorでは8～72pxの範囲を使います。 ### `BONE_TEXT_FONT_WEIGHT_INVALID` 許可済みkeywordまたは100～900を指定します。 ### `BONE_TEXT_FONT_STYLE_INVALID` `normal / italic / oblique` を指定します。 ### `BONE_TEXT_TARGET_INVALID` `render / renderEditor` のtargetにElementを渡します。 ### `BONE_TEXT_INSTANCE_INVALID` BoneTextが生成・管理していない要素へinstance APIを使っていないか確認します。 ### `BONE_TEXT_COMPLETION_VALIDATION_REQUIRED` Smoke / Validation ALL PASS前にCompletionしようとしていないか確認します。 ### 画面が崩れた場合 Test期待値を弱めてPASSにせず、Console、Smoke、Validation、Joint診断、DOC routeを確認して原因を修正します。 ## 19. そのまま使えるサンプル ### Status表示 ```html READY ``` ### 複数行説明 ```html