text-input-guard 1.2.2 → 1.3.0

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

@@ -12,10 +12,10 @@
  * SwapState
  *
  * separateValue.mode="swap" のときに使用する
- * 元 input 要素の状態スナップショットおよび復元ロジックを管理するクラス
+ * 元 input/textarea 要素の状態スナップショットおよび復元ロジックを管理するクラス
  *
  * 役割
- *  - swap前の input の属性状態を保持する
+ *  - swap前の input/textarea の属性状態を保持する
  *  - raw化および display生成時に必要な属性を適用する
  *  - detach時に元の状態へ復元する
  *
@@ -91,16 +91,16 @@ class SwapState {
 	 * swap時に生成された display 用 input 要素
 	 * detach時に削除するため保持する
 	 *
-	 * @type {HTMLInputElement|null}
+	 * @type {HTMLInputElement|HTMLTextAreaElement|null}
 	 */
 	createdDisplay;
 
 	/**
-	 * @param {HTMLInputElement} input
+	 * @param {HTMLInputElement|HTMLTextAreaElement} input
 	 * swap前の元 input 要素
 	 */
 	constructor(input) {
-		this.originalType = input.type;
+		this.originalType = input.type || "";
 		this.originalId = input.getAttribute("id");
 		this.originalName = input.getAttribute("name");
 		this.originalClass = input.className;
@@ -111,22 +111,30 @@ class SwapState {
 		this.createdDisplay = null;
 
 		const UI_ATTRS = [
-			"placeholder",
+			// input 有
 			"list",
+			"size",
+			"pattern",
+
+			// input / textarea 共有
+			"placeholder",
 			"inputmode",
 			"autocomplete",
 			"autocapitalize",
 			"autocorrect",
 			"minlength",
 			"maxlength",
-			"size",
-			"pattern",
 			"dir",
 			"title",
 			"tabindex",
 			"style",
 			"enterkeyhint",
-			"spellcheck"
+			"spellcheck",
+
+			// textarea 用
+			"rows",
+			"cols",
+			"wrap"
 		];
 
 		const UI_BOOL_ATTRS = [
@@ -162,12 +170,17 @@ class SwapState {
 	 * raw 元input を hidden 化する
 	 * 送信担当要素として扱う
 	 *
-	 * @param {HTMLInputElement} input
+	 * @param {HTMLInputElement|HTMLTextAreaElement} input
 	 * @returns {void}
 	 */
 	applyToRaw(input) {
 		// raw化（送信担当）
-		input.type = "hidden";
+		if (input instanceof HTMLInputElement) {
+			input.type = "hidden";
+		} else if (input instanceof HTMLTextAreaElement) {
+			input.setAttribute("hidden", "");
+			input.style.display = "none";
+		}
 		input.removeAttribute("id");
 		input.removeAttribute("class");
 		input.className = "";
@@ -188,12 +201,22 @@ class SwapState {
 	/**
 	 * display用 input を生成し UI属性 aria属性 data属性を適用
 	 *
-	 * @param {HTMLInputElement} raw hidden化された元input
-	 * @returns {HTMLInputElement}
+	 * @param {HTMLInputElement|HTMLTextAreaElement} raw hidden化された元input
+	 * @returns {HTMLInputElement|HTMLTextAreaElement}
 	 */
 	createDisplay(raw) {
-		const display = document.createElement("input");
-		display.type = "text";
+		/**
+		 * @type {HTMLInputElement|HTMLTextAreaElement}
+		 */
+		let display;
+		if (raw instanceof HTMLInputElement) {
+			display = document.createElement("input");
+			display.type = "text";
+		} else if (raw instanceof HTMLTextAreaElement) {
+			display = document.createElement("textarea");
+		} else {
+			throw new Error("Unsupported element type for display creation");
+		}
 		display.dataset.tigRole = "display";
 
 		if (this.originalId) {
@@ -242,11 +265,16 @@ class SwapState {
 	/**
 	 * raw hidden化された元input を元の状態へ復元する
 	 *
-	 * @param {HTMLInputElement} raw
+	 * @param {HTMLInputElement|HTMLTextAreaElement} raw
 	 * @returns {void}
 	 */
 	restoreRaw(raw) {
-		raw.type = this.originalType;
+		if (raw instanceof HTMLInputElement) {
+			raw.type = this.originalType;
+		} else if (raw instanceof HTMLTextAreaElement) {
+			raw.removeAttribute("hidden");
+			raw.style.display = "";
+		}
 
 		if (this.originalId) {
 			raw.setAttribute("id", this.originalId);
@@ -359,7 +387,7 @@ class SwapState {
  * @typedef {Object} GuardContext
  * @property {HTMLElement} hostElement - 元の要素（swap時はraw側）
  * @property {HTMLElement} displayElement - ユーザーが操作する表示要素
- * @property {HTMLInputElement|null} rawElement - 送信用hidden要素（swap時のみ）
+ * @property {HTMLInputElement|HTMLTextAreaElement|null} rawElement - 送信用hidden要素（swap時のみ）
  * @property {ElementKind} kind - 要素種別（input / textarea）
  * @property {boolean} warn - warnログを出すかどうか
  * @property {string} invalidClass - エラー時に付与するclass名
@@ -730,7 +758,7 @@ class InputGuard {
 		/**
 		 * swap時に生成される hidden(raw) input
 		 * swapしない場合は null
-		 * @type {HTMLInputElement|null}
+		 * @type {HTMLInputElement|HTMLTextAreaElement|null}
 		 */
 		this.rawElement = null;
 
@@ -949,7 +977,7 @@ class InputGuard {
 
 	/**
 	 * separateValue.mode="swap" のとき、input を hidden(raw) にして display(input[type=text]) を生成する
-	 * - textarea は非対応（warnして無視）
+	 * - textarea も対応（hidden属性とdisplay:noneを使用）
 	 * @returns {void}
 	 */
 	applySeparateValue() {
@@ -965,25 +993,20 @@ class InputGuard {
 			return;
 		}
 
-		if (this.kind !== "input") {
-			warnLog('[text-input-guard] separateValue.mode="swap" is not supported for <textarea>. ignored.', this.warn);
-			return;
-		}
-
-		const input = /** @type {HTMLInputElement} */ (this.originalElement);
+		const element = this.originalElement;
 
-		const state = new SwapState(input);
-		state.applyToRaw(input);
+		const state = new SwapState(element);
+		state.applyToRaw(element);
 
-		const display = state.createDisplay(input);
-		input.after(display);
+		const display = state.createDisplay(element);
+		element.after(display);
 
 		this.swapState = state;
 
 		// elements更新
-		this.hostElement = input;      // raw
+		this.hostElement = element;      // raw
 		this.displayElement = display; // display
-		this.rawElement = input;
+		this.rawElement = element;
 
 		// revert 機構
 		this.lastAcceptedValue = display.value;
@@ -2427,7 +2450,7 @@ function numeric(options = {}) {
 
 	return {
 		name: "numeric",
-		targets: ["input"],
+		targets: ["input", "textarea"],
 
 		/**
 		 * 文字単位の正規化（全角→半角、記号統一、不要文字の除去）
@@ -2776,7 +2799,6 @@ function roundFraction(intPart, fracPart, fracLimit) {
  * @returns {Rule}
  */
 function digits(options = {}) {
-	/** @type {DigitsRuleOptions} */
 	const opt = {
 		int: typeof options.int === "number" ? options.int : undefined,
 		frac: typeof options.frac === "number" ? options.frac : undefined,
@@ -2790,7 +2812,7 @@ function digits(options = {}) {
 
 	return {
 		name: "digits",
-		targets: ["input"],
+		targets: ["input", "textarea"],
 
 		/**
 		 * 桁数チェック（入力中：エラーを積むだけ）
@@ -3043,7 +3065,7 @@ digits.fromDataset = function fromDataset(dataset, _el) {
 function comma() {
 	return {
 		name: "comma",
-		targets: ["input"],
+		targets: ["input", "textarea"],
 
 		/**
 		 * 表示整形（確定時のみ）
@@ -7522,7 +7544,7 @@ function prefix(options) {
 
 	return {
 		name: "prefix",
-		targets: ["input"],
+		targets: ["input", "textarea"],
 
 		/**
 		 * 手動入力された prefix を除去
@@ -7616,7 +7638,7 @@ function suffix(options) {
 
 	return {
 		name: "suffix",
-		targets: ["input"],
+		targets: ["input", "textarea"],
 
 		/**
 		 * 手動入力された suffix を除去
@@ -7782,11 +7804,11 @@ const rules = {
 
 /**
  * バージョン（ビルド時に置換したいならここを差し替える）
- * 例: rollup replace で ""1.2.2"" を package.json の version に置換
+ * 例: rollup replace で ""1.3.0"" を package.json の version に置換
  */
 // @ts-ignore
 // eslint-disable-next-line no-undef
-const version = "1.2.2" ;
+const version = "1.3.0" ;
 
 /**
  * UMD公開時のグローバルオブジェクト