text-input-guard 0.0.1 → 0.1.1

package/dist/esm/text-input-guard.js

@@ -1,3 +1,246 @@
+/**
+ * The script is part of TextInputGuard.
+ *
+ * AUTHOR:
+ *  natade-jp (https://github.com/natade-jp)
+ *
+ * LICENSE:
+ *  The MIT license https://opensource.org/licenses/MIT
+ */
+
+/**
+ * SwapState
+ *
+ * separateValue.mode="swap" のときに使用する
+ * 元 input 要素の状態スナップショットおよび復元ロジックを管理するクラス
+ *
+ * 役割
+ *  - swap前の input の属性状態を保持する
+ *  - raw化および display生成時に必要な属性を適用する
+ *  - detach時に元の状態へ復元する
+ *
+ * 設計方針
+ *  - 送信用属性は raw に残す
+ *  - UIおよびアクセシビリティ属性は display に適用する
+ *  - tig内部用の data-* は display にコピーしない
+ */
+class SwapState {
+	/**
+	 * 元 input の type 属性
+	 * detach時に復元するため保持する
+	 * @type {string}
+	 */
+	originalType;
+
+	/**
+	 * 元 input の id 属性
+	 * swap時に display へ移し detach時に rawへ戻す
+	 * @type {string|null}
+	 */
+	originalId;
+
+	/**
+	 * 元 input の name 属性
+	 * 送信用属性のため raw側に残すが
+	 * detach時の整合性のため保持する
+	 * @type {string|null}
+	 */
+	originalName;
+
+	/**
+	 * 元 input の class 属性
+	 * swap時に display へ移す
+	 * @type {string}
+	 */
+	originalClass;
+
+	/**
+	 * UI系属性のスナップショット
+	 * placeholder inputmode required などを保持する
+	 *
+	 * key 属性名
+	 * value 属性値 未指定の場合は null
+	 *
+	 * @type {Object.<string, string|null>}
+	 */
+	originalUiAttrs;
+
+	/**
+	 * aria-* 属性のスナップショット
+	 * アクセシビリティ維持のため display に適用する
+	 *
+	 * key aria属性名 例 aria-label
+	 * value 属性値
+	 *
+	 * @type {Object.<string, string>}
+	 */
+	originalAriaAttrs;
+
+	/**
+	 * tig 以外の data-* 属性のスナップショット
+	 * swap後も display へ引き継ぐ
+	 *
+	 * key datasetキー camelCase
+	 * value 属性値
+	 *
+	 * @type {Object.<string, string>}
+	 */
+	originalDataset;
+
+	/**
+	 * swap時に生成された display 用 input 要素
+	 * detach時に削除するため保持する
+	 *
+	 * @type {HTMLInputElement|null}
+	 */
+	createdDisplay;
+
+	/**
+	 * @param {HTMLInputElement} input
+	 * swap前の元 input 要素
+	 */
+	constructor(input) {
+		this.originalType = input.type;
+		this.originalId = input.getAttribute("id");
+		this.originalName = input.getAttribute("name");
+		this.originalClass = input.className;
+
+		this.originalUiAttrs = {};
+		this.originalAriaAttrs = {};
+		this.originalDataset = {};
+		this.createdDisplay = null;
+
+		const UI_ATTRS = [
+			"placeholder",
+			"inputmode",
+			"autocomplete",
+			"required",
+			"minlength",
+			"maxlength",
+			"pattern",
+			"title",
+			"tabindex"
+		];
+
+		for (const name of UI_ATTRS) {
+			this.originalUiAttrs[name] =
+				input.hasAttribute(name) ? input.getAttribute(name) : null;
+		}
+
+		for (const attr of input.attributes) {
+			if (attr.name.startsWith("aria-")) {
+				this.originalAriaAttrs[attr.name] = attr.value ?? "";
+			}
+		}
+
+		for (const [k, v] of Object.entries(input.dataset)) {
+			if (k.startsWith("tig")) { continue; }
+			this.originalDataset[k] = v;
+		}
+	}
+
+	/**
+	 * raw 元input を hidden 化する
+	 * 送信担当要素として扱う
+	 *
+	 * @param {HTMLInputElement} input
+	 * @returns {void}
+	 */
+	applyToRaw(input) {
+		// raw化（送信担当）
+		input.type = "hidden";
+		input.removeAttribute("id");
+		input.className = "";
+		input.dataset.tigRole = "raw";
+
+		// 元idのメタを残す（デバッグ/参照用）
+		if (this.originalId) {
+			input.dataset.tigOriginalId = this.originalId;
+		}
+		if (this.originalName) {
+			input.dataset.tigOriginalName = this.originalName;
+		}
+	}
+
+	/**
+	 * display用 input を生成し UI属性 aria属性 data属性を適用
+	 *
+	 * @param {HTMLInputElement} raw hidden化された元input
+	 * @returns {HTMLInputElement}
+	 */
+	createDisplay(raw) {
+		const display = document.createElement("input");
+		display.type = "text";
+		display.dataset.tigRole = "display";
+
+		if (this.originalId) {
+			display.id = this.originalId;
+		}
+
+		display.className = this.originalClass ?? "";
+		display.value = raw.value;
+
+		for (const [name, v] of Object.entries(this.originalUiAttrs)) {
+			if (v == null) {
+				display.removeAttribute(name);
+			} else {
+				display.setAttribute(name, v);
+			}
+		}
+
+		for (const [name, v] of Object.entries(this.originalAriaAttrs)) {
+			display.setAttribute(name, v);
+		}
+
+		for (const [k, v] of Object.entries(this.originalDataset)) {
+			display.dataset[k] = v;
+		}
+
+		this.createdDisplay = display;
+		return display;
+	}
+
+	/**
+	 * detach時に display 要素を削除する
+	 *
+	 * @returns {void}
+	 */
+	removeDisplay() {
+		if (this.createdDisplay?.parentNode) {
+			this.createdDisplay.parentNode.removeChild(this.createdDisplay);
+		}
+		this.createdDisplay = null;
+	}
+
+	/**
+	 * raw hidden化された元input を元の状態へ復元する
+	 *
+	 * @param {HTMLInputElement} raw
+	 * @returns {void}
+	 */
+	restoreRaw(raw) {
+		raw.type = this.originalType;
+
+		if (this.originalId) {
+			raw.setAttribute("id", this.originalId);
+		} else {
+			raw.removeAttribute("id");
+		}
+
+		if (this.originalName) {
+			raw.setAttribute("name", this.originalName);
+		} else {
+			raw.removeAttribute("name");
+		}
+
+		raw.className = this.originalClass ?? "";
+
+		delete raw.dataset.tigRole;
+		delete raw.dataset.tigOriginalId;
+		delete raw.dataset.tigOriginalName;
+	}
+}
+
 /**
  * The script is part of JPInputGuard.
  *
@@ -8,6 +251,7 @@
  *  The MIT license https://opensource.org/licenses/MIT
  */
 
+
 /**
  * 対象要素の種別（現在は input と textarea のみ対応）
  * @typedef {"input"|"textarea"} ElementKind
@@ -35,7 +279,9 @@
  * @property {() => boolean} isValid - 現在エラーが無いかどうか
  * @property {() => TigError[]} getErrors - エラー一覧を取得
  * @property {() => string} getRawValue - 送信用の正規化済み値を取得
- * @property {() => HTMLInputElement|HTMLTextAreaElement} getDisplayElement - ユーザーが実際に操作している要素（swap時はdisplay側）
+ * @property {() => string} getDisplayValue - ユーザーが実際に操作している要素の値を取得
+ * @property {() => HTMLInputElement|HTMLTextAreaElement} getRawElement - 送信用の正規化済み値の要素
+ * @property {() => HTMLInputElement|HTMLTextAreaElement} getDisplayElement - ユーザーが実際に操作している要素（swap時はdisplay専用）
  */
 
 /**
@@ -84,17 +330,6 @@
  * @property {SeparateValueOptions} [separateValue] - 表示値と内部値の分離設定
  */
 
-/**
- * swap時に退避する元inputの情報
- * detach時に元の状態へ復元するために使用する
- * @typedef {Object} SwapState
- * @property {string} originalType - 元のinput.type
- * @property {string|null} originalId - 元のid属性
- * @property {string|null} originalName - 元のname属性
- * @property {string} originalClass - 元のclass文字列
- * @property {HTMLInputElement} createdDisplay - 生成した表示用input
- */
-
 /**
  * selection（カーソル/選択範囲）の退避情報
  * @typedef {Object} SelectionState
@@ -200,7 +435,7 @@ class InputGuard {
 
 		const kind = detectKind(element);
 		if (!kind) {
-			throw new TypeError("[jp-input-guard] attach() expects an <input> or <textarea> element.");
+			throw new TypeError("[text-input-guard] attach() expects an <input> or <textarea> element.");
 		}
 
 		/**
@@ -432,67 +667,25 @@ class InputGuard {
 		}
 
 		if (this.kind !== "input") {
-			warnLog('[jp-input-guard] separateValue.mode="swap" is not supported for <textarea>. ignored.', this.warn);
+			warnLog('[text-input-guard] separateValue.mode="swap" is not supported for <textarea>. ignored.', this.warn);
 			return;
 		}
 
 		const input = /** @type {HTMLInputElement} */ (this.originalElement);
 
-		// 退避（detachで戻すため）
-		/** @type {SwapState} */
-		this.swapState = {
-			originalType: input.type,
-			originalId: input.getAttribute("id"),
-			originalName: input.getAttribute("name"),
-			originalClass: input.className,
-			// 必要になったらここに placeholder/aria/data を追加していく
-			createdDisplay: null
-		};
-
-		// raw化（送信担当）
-		input.type = "hidden";
-		input.removeAttribute("id"); // displayに引き継ぐため
-		input.dataset.tigRole = "raw";
-
-		// 元idのメタを残す（デバッグ/参照用）
-		if (this.swapState.originalId) {
-			input.dataset.tigOriginalId = this.swapState.originalId;
-		}
-
-		if (this.swapState.originalName) {
-			input.dataset.tigOriginalName = this.swapState.originalName;
-		}
-
-		// display生成（ユーザー入力担当）
-		const display = document.createElement("input");
-		display.type = "text";
-		display.dataset.tigRole = "display";
-
-		// id は display に移す
-		if (this.swapState.originalId) {
-			display.id = this.swapState.originalId;
-		}
-
-		// name は付けない（送信しない）
-		display.removeAttribute("name");
+		const state = new SwapState(input);
+		state.applyToRaw(input);
 
-		// class は display に
-		display.className = this.swapState.originalClass;
-		input.className = "";
-
-		// value 初期同期
-		display.value = input.value;
-
-		// DOMに挿入（rawの直後）
+		const display = state.createDisplay(input);
 		input.after(display);
 
+		this.swapState = state;
+
 		// elements更新
-		this.hostElement = input;
-		this.displayElement = display;
+		this.hostElement = input;      // raw
+		this.displayElement = display; // display
 		this.rawElement = input;
 
-		this.swapState.createdDisplay = display;
-
 		// revert 機構
 		this.lastAcceptedValue = display.value;
 		this.lastAcceptedSelection = this.readSelection(display);
@@ -512,10 +705,10 @@ class InputGuard {
 
 		// rawは元の input（hidden化されている）
 		const raw = /** @type {HTMLInputElement} */ (this.hostElement);
-		const display = state.createdDisplay;
 
 		// displayが存在するなら、最新表示値をrawに同期してから消す（安全策）
 		// ※ rawは常に正規化済みを持つ設計だけど、念のため
+		const display = state.createdDisplay;
 		if (display) {
 			try {
 				raw.value = raw.value || display.value;
@@ -525,39 +718,18 @@ class InputGuard {
 		}
 
 		// display削除
-		if (display && display.parentNode) {
-			display.parentNode.removeChild(display);
-		}
+		state.removeDisplay();
 
 		// rawを元に戻す（type）
-		raw.type = state.originalType;
-
-		// id を戻す
-		if (state.originalId) {
-			raw.setAttribute("id", state.originalId);
-		} else {
-			raw.removeAttribute("id");
-		}
-
-		// name を戻す（swap中は残している想定だが、念のため）
-		if (state.originalName) {
-			raw.setAttribute("name", state.originalName);
-		} else {
-			raw.removeAttribute("name");
-		}
-
-		// class を戻す
-		raw.className = state.originalClass ?? "";
-
-		// data属性（tig用）は消しておく
-		delete raw.dataset.tigRole;
-		delete raw.dataset.tigOriginalId;
-		delete raw.dataset.tigOriginalName;
+		state.restoreRaw(raw);
 
 		// elements参照を original に戻す
 		this.hostElement = this.originalElement;
 		this.displayElement = this.originalElement;
 		this.rawElement = null;
+
+		// swapState破棄
+		this.swapState = null;
 	}
 
 	/**
@@ -569,8 +741,6 @@ class InputGuard {
 		this.unbindEvents();
 		// swap復元
 		this.restoreSeparateValue();
-		// swapState破棄
-		this.swapState = null;
 		// 以後このインスタンスは利用不能にしてもいいが、今回は明示しない
 	}
 
@@ -593,7 +763,7 @@ class InputGuard {
 
 			if (!supports) {
 				warnLog(
-					`[jp-input-guard] Rule "${rule.name}" is not supported for <${this.kind}>. skipped.`,
+					`[text-input-guard] Rule "${rule.name}" is not supported for <${this.kind}>. skipped.`,
 					this.warn
 				);
 				continue;
@@ -678,9 +848,7 @@ class InputGuard {
 		// 連鎖防止（次の処理に持ち越さない）
 		this.revertRequest = null;
 
-		if (this.warn) {
-			console.log(`[jp-input-guard] reverted: ${req.reason}`, req.detail);
-		}
+		if (this.warn) ;
 	}
 
 	/**
@@ -824,7 +992,7 @@ class InputGuard {
 	 * @returns {void}
 	 */
 	onCompositionStart() {
-		console.log("[jp-input-guard] compositionstart");
+		// console.log("[text-input-guard] compositionstart");
 		this.composing = true;
 	}
 
@@ -834,7 +1002,7 @@ class InputGuard {
 	 * @returns {void}
 	 */
 	onCompositionEnd() {
-		console.log("[jp-input-guard] compositionend");
+		// console.log("[text-input-guard] compositionend");
 		this.composing = false;
 
 		// compositionend後に input が来ない環境向けのフォールバック
@@ -854,7 +1022,7 @@ class InputGuard {
 	 * @returns {void}
 	 */
 	onInput() {
-		console.log("[jp-input-guard] input");
+		// console.log("[text-input-guard] input");
 		// compositionend後に input が来た場合、フォールバックを無効化
 		this.pendingCompositionCommit = false;
 		this.evaluateInput();
@@ -865,7 +1033,7 @@ class InputGuard {
 	 * @returns {void}
 	 */
 	onBlur() {
-		console.log("[jp-input-guard] blur");
+		// console.log("[text-input-guard] blur");
 		this.evaluateCommit();
 	}
 
@@ -1082,9 +1250,14 @@ class InputGuard {
 	 * @returns {string}
 	 */
 	getRawValue() {
-		if (this.rawElement) {
-			return this.rawElement.value;
-		}
+		return /** @type {HTMLInputElement|HTMLTextAreaElement} */ (this.hostElement).value;
+	}
+
+	/**
+	 * 表示用の値を返す（displayの値）
+	 * @returns {string}
+	 */
+	getDisplayValue() {
 		return /** @type {HTMLInputElement|HTMLTextAreaElement} */ (this.displayElement).value;
 	}
 
@@ -1099,6 +1272,8 @@ class InputGuard {
 			isValid: () => this.isValid(),
 			getErrors: () => this.getErrors(),
 			getRawValue: () => this.getRawValue(),
+			getDisplayValue: () => this.getDisplayValue(),
+			getRawElement: () => /** @type {HTMLInputElement|HTMLTextAreaElement} */ (this.hostElement),
 			getDisplayElement: () => /** @type {HTMLInputElement|HTMLTextAreaElement} */ (this.displayElement)
 		};
 	}
@@ -1114,6 +1289,63 @@ class InputGuard {
  *  The MIT license https://opensource.org/licenses/MIT
  */
 
+/**
+ * datasetのboolean値を解釈する
+ * - 未指定なら undefined
+ * - "" / "true" / "1" / "yes" / "on" は true
+ * - "false" / "0" / "no" / "off" は false
+ * @param {string|undefined} v
+ * @returns {boolean|undefined}
+ */
+function parseDatasetBool(v) {
+	if (v == null) { return; }
+	const s = String(v).trim().toLowerCase();
+	if (s === "" || s === "true" || s === "1" || s === "yes" || s === "on") { return true; }
+	if (s === "false" || s === "0" || s === "no" || s === "off") { return false; }
+	return;
+}
+
+/**
+ * datasetのnumber値を解釈する（整数想定）
+ * - 未指定/空なら undefined
+ * - 数値でなければ undefined
+ * @param {string|undefined} v
+ * @returns {number|undefined}
+ */
+function parseDatasetNumber(v) {
+	if (v == null) { return; }
+	const s = String(v).trim();
+	if (s === "") { return; }
+	const n = Number(s);
+	return Number.isFinite(n) ? n : undefined;
+}
+
+/**
+ * enumを解釈する（未指定なら undefined）
+ * @template {string} T
+ * @param {string|undefined} v
+ * @param {readonly T[]} allowed
+ * @returns {T|undefined}
+ */
+function parseDatasetEnum(v, allowed) {
+	if (v == null) { return; }
+	const s = String(v).trim();
+	if (s === "") { return; }
+	// 大文字小文字を区別したいならここを変える（今は厳密一致）
+	return /** @type {T|undefined} */ (allowed.includes(/** @type {any} */ (s)) ? s : undefined);
+}
+
+/**
+ * The script is part of TextInputGuard.
+ *
+ * AUTHOR:
+ *  natade-jp (https://github.com/natade-jp)
+ *
+ * LICENSE:
+ *  The MIT license https://opensource.org/licenses/MIT
+ */
+
+
 /**
  * @typedef {GuardGroup} GuardGroup
  * @typedef {Guard} Guard
@@ -1128,19 +1360,6 @@ class InputGuard {
  * @property {(dataset: DOMStringMap, el: HTMLInputElement|HTMLTextAreaElement) => Rule|null} fromDataset
  */
 
-/**
- * Boolean系のdata値を解釈する（未指定なら undefined を返す）
- * @param {string|undefined} v
- * @returns {boolean|undefined}
- */
-function parseBool(v) {
-	if (v == null) { return; }
-	const s = String(v).trim().toLowerCase();
-	if (s === "" || s === "true" || s === "1" || s === "yes" || s === "on") { return true; }
-	if (s === "false" || s === "0" || s === "no" || s === "off") { return false; }
-	return;
-}
-
 /**
  * separate mode を解釈する（未指定は "auto"）
  * @param {string|undefined} v
@@ -1244,7 +1463,7 @@ class InputGuardAutoAttach {
 			const options = {};
 
 			// warn / invalidClass
-			const warn = parseBool(ds.tigWarn);
+			const warn = parseDatasetBool(ds.tigWarn);
 			if (warn != null) { options.warn = warn; }
 
 			if (ds.tigInvalidClass != null && String(ds.tigInvalidClass).trim() !== "") {
@@ -1264,7 +1483,7 @@ class InputGuardAutoAttach {
 				} catch (e) {
 					const w = options.warn ?? true;
 					if (w) {
-						console.warn(`[jp-input-guard] autoAttach: rule "${fac.name}" fromDataset() threw an error.`, e);
+						console.warn(`[text-input-guard] autoAttach: rule "${fac.name}" fromDataset() threw an error.`, e);
 					}
 				}
 			}
@@ -1290,62 +1509,6 @@ class InputGuardAutoAttach {
 	}
 }
 
-/**
- * The script is part of TextInputGuard.
- *
- * AUTHOR:
- *  natade-jp (https://github.com/natade-jp)
- *
- * LICENSE:
- *  The MIT license https://opensource.org/licenses/MIT
- */
-
-/**
- * datasetのboolean値を解釈する
- * - 未指定なら undefined
- * - "" / "true" / "1" / "yes" / "on" は true
- * - "false" / "0" / "no" / "off" は false
- * @param {string|undefined} v
- * @returns {boolean|undefined}
- */
-function parseDatasetBool(v) {
-	if (v == null) { return; }
-	const s = String(v).trim().toLowerCase();
-	if (s === "" || s === "true" || s === "1" || s === "yes" || s === "on") { return true; }
-	if (s === "false" || s === "0" || s === "no" || s === "off") { return false; }
-	return;
-}
-
-/**
- * datasetのnumber値を解釈する（整数想定）
- * - 未指定/空なら undefined
- * - 数値でなければ undefined
- * @param {string|undefined} v
- * @returns {number|undefined}
- */
-function parseDatasetNumber(v) {
-	if (v == null) { return; }
-	const s = String(v).trim();
-	if (s === "") { return; }
-	const n = Number(s);
-	return Number.isFinite(n) ? n : undefined;
-}
-
-/**
- * enumを解釈する（未指定なら undefined）
- * @template {string} T
- * @param {string|undefined} v
- * @param {readonly T[]} allowed
- * @returns {T|undefined}
- */
-function parseDatasetEnum(v, allowed) {
-	if (v == null) { return; }
-	const s = String(v).trim();
-	if (s === "") { return; }
-	// 大文字小文字を区別したいならここを変える（今は厳密一致）
-	return /** @type {T|undefined} */ (allowed.includes(/** @type {any} */ (s)) ? s : undefined);
-}
-
 /**
  * The script is part of TextInputGuard.
  *
@@ -1363,6 +1526,7 @@ function parseDatasetEnum(v, allowed) {
  * @property {boolean} [allowFullWidth=true] - 全角数字/記号を許可して半角へ正規化する
  * @property {boolean} [allowMinus=false] - マイナス記号を許可する（先頭のみ）
  * @property {boolean} [allowDecimal=false] - 小数点を許可する（1つだけ）
+ * @property {boolean} [allowEmpty=true] - 空文字を許可するか
  */
 
 /**
@@ -1378,7 +1542,8 @@ function numeric(options = {}) {
 	const opt = {
 		allowFullWidth: options.allowFullWidth ?? true,
 		allowMinus: options.allowMinus ?? false,
-		allowDecimal: options.allowDecimal ?? false
+		allowDecimal: options.allowDecimal ?? false,
+		allowEmpty: options.allowEmpty ?? true
 	};
 
 	/** @type {Set<string>} */
@@ -1536,9 +1701,14 @@ function numeric(options = {}) {
 		fix(value) {
 			let v = String(value);
 
+			// 空文字の扱い
+			if (v === "") {
+				return opt.allowEmpty ? "" : "0";
+			}
+
 			// 未完成な数値は空にする
 			if (v === "-" || v === "." || v === "-.") {
-				return "";
+				return opt.allowEmpty ? "" : "0";
 			}
 
 			// "-.1" → "-0.1"
@@ -1610,6 +1780,7 @@ function numeric(options = {}) {
  * - data-tig-rules-numeric-allow-full-width      -> dataset.tigRulesNumericAllowFullWidth
  * - data-tig-rules-numeric-allow-minus           -> dataset.tigRulesNumericAllowMinus
  * - data-tig-rules-numeric-allow-decimal         -> dataset.tigRulesNumericAllowDecimal
+ * - data-tig-rules-numeric-allow-empty           -> dataset.tigRulesNumericAllowEmpty
  *
  * @param {DOMStringMap} dataset
  * @param {HTMLInputElement|HTMLTextAreaElement} _el
@@ -1642,6 +1813,12 @@ numeric.fromDataset = function fromDataset(dataset, _el) {
 		options.allowDecimal = allowDecimal;
 	}
 
+	// data-tig-rules-numeric-allow-empty（未指定なら numeric側デフォルト true）
+	const allowEmpty = parseDatasetBool(dataset.tigRulesNumericAllowEmpty);
+	if (allowEmpty != null) {
+		options.allowEmpty = allowEmpty;
+	}
+
 	return numeric(options);
 };
 
@@ -1666,6 +1843,7 @@ numeric.fromDataset = function fromDataset(dataset, _el) {
  * @property {"none"|"truncate"|"round"} [fixFracOnBlur="none"] - blur時の小数部補正
  * @property {"none"|"block"} [overflowInputInt="none"] - 入力中：整数部が最大桁を超える入力をブロックする
  * @property {"none"|"block"} [overflowInputFrac="none"] - 入力中：小数部が最大桁を超える入力をブロックする
+ * @property {boolean} [forceFracOnBlur=false] - blur時に小数部を必ず表示（frac桁まで0埋め）
  */
 
 /**
@@ -1806,7 +1984,8 @@ function digits(options = {}) {
 		fixIntOnBlur: options.fixIntOnBlur ?? "none",
 		fixFracOnBlur: options.fixFracOnBlur ?? "none",
 		overflowInputInt: options.overflowInputInt ?? "none",
-		overflowInputFrac: options.overflowInputFrac ?? "none"
+		overflowInputFrac: options.overflowInputFrac ?? "none",
+		forceFracOnBlur: options.forceFracOnBlur ?? false
 	};
 
 	return {
@@ -1923,14 +2102,39 @@ function digits(options = {}) {
 				}
 			}
 
-			// 組み立て（frac=0 のときは "." を残すか？は方針次第だが、ここでは消す）
-			if (!hasDot || typeof opt.frac !== "number") {
+			if (opt.forceFracOnBlur && typeof opt.frac === "number" && opt.frac > 0) {
+				const limit = opt.frac;
+				// "." が無いなら作る（12 → 12.00）
+				if (!hasDot) {
+					fracPart = "";
+				}
+				// 足りない分を 0 埋め（12.3 → 12.30 / 12. → 12.00）
+				const f = fracPart ?? "";
+				if (f.length < limit) {
+					fracPart = f + "0".repeat(limit - f.length);
+				}
+			}
+
+			// 組み立て
+			if (typeof opt.frac !== "number") {
+				// frac未指定なら、dot があっても digits は触らず intだけ返す方針（現状維持）
 				return `${sign}${intPart}`;
 			}
+
 			if (opt.frac === 0) {
+				// 小数0桁なら常に整数表示
 				return `${sign}${intPart}`;
 			}
-			return `${sign}${intPart}.${fracPart}`;
+
+			// frac 指定あり（1以上）
+			if (hasDot || (opt.forceFracOnBlur && opt.frac > 0)) {
+				// "." が無いけど forceFracOnBlur の場合もここに来る
+				const f = fracPart ?? "";
+				return `${sign}${intPart}.${f}`;
+			}
+
+			// "." が無くて force もしないなら整数表示
+			return `${sign}${intPart}`;
 		}
 	};
 }
@@ -1949,6 +2153,7 @@ function digits(options = {}) {
  * - data-tig-rules-digits-fix-frac-on-blur         -> dataset.tigRulesDigitsFixFracOnBlur
  * - data-tig-rules-digits-overflow-input-int       -> dataset.tigRulesDigitsOverflowInputInt
  * - data-tig-rules-digits-overflow-input-frac      -> dataset.tigRulesDigitsOverflowInputFrac
+ * - data-tig-rules-digits-force-frac-on-blur       -> dataset.tigRulesDigitsForceFracOnBlur
  *
  * @param {DOMStringMap} dataset
  * @param {HTMLInputElement|HTMLTextAreaElement} _el
@@ -2011,6 +2216,12 @@ digits.fromDataset = function fromDataset(dataset, _el) {
 		options.overflowInputFrac = ovFrac;
 	}
 
+	// forceFracOnBlur
+	const forceFrac = parseDatasetBool(dataset.tigRulesDigitsForceFracOnBlur);
+	if (forceFrac != null) {
+		options.forceFracOnBlur = forceFrac;
+	}
+
 	return digits(options);
 };
 
@@ -2036,6 +2247,11 @@ function comma() {
 
 		/**
 		 * 表示整形（確定時のみ）
+		 *
+		 * 前提:
+		 * - numeric / digits 等で正規化済みの数値文字列が渡される
+		 * - 整数部・小数部・符号のみを含む（カンマは含まない想定）
+		 *
 		 * @param {string} value
 		 * @returns {string}
 		 */
@@ -2123,10 +2339,10 @@ const rules = {
 
 /**
  * バージョン（ビルド時に置換したいならここを差し替える）
- * 例: rollup replace で ""0.0.1"" を package.json の version に置換
+ * 例: rollup replace で ""0.1.0"" を package.json の version に置換
  */
 // @ts-ignore
 // eslint-disable-next-line no-undef
-const version = "0.0.1" ;
+const version = "0.1.0" ;
 
 export { attach, attachAll, autoAttach, comma, digits, numeric, rules, version };