Editable

クリック（または表示切替）でテキストを「表示専用」から「編集可能」へ切り替える inline 編集部品です。preview/edit の 2 モードを anatomy 全体で切り替え、確定・キャンセルの 2 操作をトリガーとして提供します。

fandhe-frontend-headless-ui の editable mod が提供する構造・アクセシビリティ（WAI-ARIA・キーボード操作）・表示状態（data-*）のみを持つ unstyled 部品です。Themes 版が備える見た目は持たず、anatomy・data-* のみを提供します（本部品はネイティブ要素の標準操作以外に固有の ARIA を持ちません）。CSS は利用者が当てます。

スタイル済みの表示例は Editable を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Display name

Ada Lovelace

Features

root/label/area/input/preview/control/edit_trigger/submit_trigger/cancel_trigger の anatomy を持ち、EditMode（Preview/Edit）で表示専用と編集可能を切り替える（editable.rs:96-135）。
input（<input type="text">）は preview モード時に hidden、preview（<span>）は edit モード時に hidden を出力する（全パーツを DOM に掲載し hidden で切り替える方針、editable.rs:270-322）。
edit_trigger/submit_trigger/cancel_trigger はいずれも <button type="button"> で、表示は現在モードに応じて hidden 切り替えされる（editable.rs:343-410）。
activationMode/submitMode の実際の DOM 配線（focus/dblclick 起動・Enter/Escape/blur）は wasm-full 側の後続責務であり、本モジュールは data-activation-mode/data-submit-mode という SSR 静的ヒントのみを提供する（editable.rs:86-95）。

Anatomy

root
  label
  area
    preview
    input
  control
    edit-trigger
    submit-trigger
    cancel-trigger

API Reference

Arguments

Name	Type	Description
root(mode, disabled, readonly, activation_mode, submit_mode)	EditMode, bool, bool, EditableActivationMode, EditableSubmitMode	現在モード・無効化・読み取り専用と、起動・確定方式の SSR 静的ヒント（editable.rs:184-201）。
input(mode, name, value, props, flags)	EditMode, &str, &str, EditableInputProps, EditableInputFlags	<input type="text"> の name/value と id/placeholder/maxlength・disabled/readonly/required（editable.rs:265-317）。
edit_trigger(mode, disabled) / submit_trigger(mode, disabled) / cancel_trigger(mode, disabled)	EditMode, bool	各トリガー（<button type="button">）の表示モード切り替えと無効化（editable.rs:343-410、同型の 3 関数のため 1 行に集約）。
attrs / children	Vec<(&str, &str)> / Vec<Node>	各パーツ共通の追加属性・子ノード（代表 1 行に集約）。

Data Attributes

Part	Attribute	Observed Values
area	data-state	preview
cancel-trigger	data-state	preview
control	data-state	preview
edit-trigger	data-state	preview
input	data-state	preview
label	data-state	preview
preview	data-state	preview
root	data-activation-mode	focus
root	data-state	preview
root	data-submit-mode	both
submit-trigger	data-state	preview

Examples

Edit mode

maxlength 付きの edit モード（submit/cancel トリガー表示）の例です。

edit モード（maxlength="20" 付き）の Editable の組み立て例です。

Nickname

Accessibility

Keyboard Interactions

Key	Description
Tab / 文字入力	input パーツが実際に <input type="text"> を出力するため、ブラウザ標準のテキスト編集・フォーカス移動が働く（editable.rs:272）。edit_trigger/submit_trigger/cancel_trigger は <button type="button"> のためネイティブの Space/Enter による活性化が働く（editable.rs:343-410）。