text-input-guard 0.1.5 → 0.2.0

package/dist/cjs/text-input-guard.cjs

@@ -288,6 +288,26 @@ class SwapState {
  * @property {any} [detail] - 追加情報（制限値など）
  */
 
+/**
+ * バリデーションがどの評価タイミングから呼び出されたかを表す識別子
+ *
+ * - "input"  : 入力中の評価（inputイベントなど）
+ * - "commit" : 確定時の評価（blurなど）
+ *
+ * @typedef {"input"|"commit"} ValidateSource
+ */
+
+/**
+ * バリデーション結果を表すオブジェクト
+ * - 各ルールの評価が完了したタイミングでコールバックに渡される
+ *
+ * @typedef {Object} ValidateResult
+ * @property {Guard} guard - この結果を発生させた Guard インスタンス
+ * @property {ValidateSource} source - 評価が実行されたタイミング（input / commit）
+ * @property {TigError[]} errors - 発生したエラー一覧
+ * @property {boolean} isValid - エラーが存在しない場合は true
+ */
+
 /**
  * setValue で設定できる値型
  * - number は String に変換して設定する
@@ -380,6 +400,7 @@ class SwapState {
  * @property {boolean} [warn] - 非対応ルールなどを console.warn するか
  * @property {string} [invalidClass] - エラー時に付けるclass名
  * @property {SeparateValueOptions} [separateValue] - 表示値と内部値の分離設定
+ * @property {(result: ValidateResult) => void} [onValidate] - 評価完了時の通知（input/commitごと）
  */
 
 /**
@@ -434,7 +455,7 @@ function warnLog(msg, warn) {
 function attach(element, options = {}) {
 	const guard = new InputGuard(element, options);
 	guard.init();
-	return guard.toGuard();
+	return guard.getGuard();
 }
 
 /**
@@ -514,6 +535,12 @@ class InputGuard {
 		 */
 		this.rules = Array.isArray(options.rules) ? options.rules : [];
 
+		/**
+		 * attach時に登録されたバリデーション結果コールバック
+		 * @type {(result: ValidateResult) => void | undefined}
+		 */
+		this.onValidate = options.onValidate;
+
 		/**
 		 * 実際に送信を担う要素（swap時は hidden(raw) 側）
 		 * swapしない場合は originalElement と同一
@@ -549,6 +576,12 @@ class InputGuard {
 		 */
 		this.errors = [];
 
+		/**
+		 * attach の返却値
+		 * @type {Guard|null}
+		 */
+		this._guard = null;
+
 		// --------------------------------------------------
 		// pipeline（フェーズごとのルール配列）
 		// --------------------------------------------------
@@ -921,8 +954,8 @@ class InputGuard {
 	 * ルール実行に渡すコンテキストを作る（pushErrorで errors に積める）
 	 * @returns {GuardContext}
 	 */
-	createCtx() {
-		const snap = this.beforeInputSnapshot;
+	createCtx({ useSnapshot = true } = {}) {
+		const snap = useSnapshot ? this.beforeInputSnapshot : null;
 		const inputType = snap?.inputType ?? "";
 		const insertedText = snap?.insertedText ?? "";
 
@@ -1018,6 +1051,31 @@ class InputGuard {
 		this.errors = [];
 	}
 
+	/**
+	 * バリデーション結果をコールバックへ通知する
+	 *
+	 * - attach() の options.onValidate が指定されている場合のみ呼び出す
+	 * - evaluateInput / evaluateCommit の評価完了時に実行される
+	 * - エラーが存在しない場合でも呼び出される
+	 *
+	 * @param {ValidateSource} source - 評価が実行されたタイミング（"input" | "commit"）
+	 * @returns {void}
+	 */
+	notifyValidate(source) {
+		if (!this.onValidate) {
+			return;
+		}
+
+		const errors = this.getErrors();
+
+		this.onValidate({
+			guard: this.getGuard(),
+			source,
+			errors,
+			isValid: errors.length === 0
+		});
+	}
+
 	/**
 	 * normalize.char フェーズを実行する（文字の正規化）
 	 * @param {string} value
@@ -1202,6 +1260,8 @@ class InputGuard {
 		const current = display.value;
 
 		const ctx = this.createCtx();
+
+		ctx.beforeText = "";
 		ctx.afterText = current;
 
 		let v = current;
@@ -1385,6 +1445,9 @@ class InputGuard {
 		// 受理値は常にrawとして保存（revert先・getRawValueの一貫性）
 		this.lastAcceptedValue = raw;
 		this.lastAcceptedSelection = this.readSelection(display);
+
+		// コールバック関数処理
+		this.notifyValidate("input");
 	}
 
 	/**
@@ -1402,10 +1465,11 @@ class InputGuard {
 		this.revertRequest = null;
 
 		const display = /** @type {HTMLInputElement|HTMLTextAreaElement} */ (this.displayElement);
-		const ctx = this.createCtx();
+		const ctx = this.createCtx({ useSnapshot: false });
 
 		// 1) raw候補（displayから取得）
 		let raw = display.value;
+		ctx.beforeText = "";
 		ctx.afterText = raw;
 
 		// 2) 正規化（rawとして扱う形に揃える）
@@ -1448,6 +1512,9 @@ class InputGuard {
 		// 8) 受理値は raw を保持（revertやgetRawValueが安定する）
 		this.lastAcceptedValue = raw;
 		this.lastAcceptedSelection = this.readSelection(display);
+
+		// コールバック関数処理
+		this.notifyValidate("commit");
 	}
 
 	/**
@@ -1523,8 +1590,13 @@ class InputGuard {
 	 * - InputGuard 自体を公開せず、最小の操作だけを渡す
 	 * @returns {Guard}
 	 */
-	toGuard() {
-		return {
+	getGuard() {
+		if (this._guard) {
+			return this._guard;
+		}
+
+		// ここで “this” を閉じ込めた関数群を一度だけ作る
+		this._guard = {
 			detach: () => this.detach(),
 			isValid: () => this.isValid(),
 			getErrors: () => this.getErrors(),
@@ -1536,6 +1608,8 @@ class InputGuard {
 			commit: () => this.evaluateCommit(),
 			setValue: (value, mode) => this.setValue(value, mode)
 		};
+
+		return this._guard;
 	}
 }
 
@@ -2165,8 +2239,8 @@ numeric.fromDataset = function fromDataset(dataset, _el) {
  * @property {boolean} [countLeadingZeros=true] - 整数部の先頭ゼロを桁数に含める
  * @property {"none"|"truncateLeft"|"truncateRight"|"clamp"} [fixIntOnBlur="none"] - blur時の整数部補正
  * @property {"none"|"truncate"|"round"} [fixFracOnBlur="none"] - blur時の小数部補正
- * @property {"none"|"block"} [overflowInputInt="none"] - 入力中：整数部が最大桁を超える入力をブロックする
- * @property {"none"|"block"} [overflowInputFrac="none"] - 入力中：小数部が最大桁を超える入力をブロックする
+ * @property {"block"|"error"} [modeInt="block"] - 整数部が最大桁を超える入力の挙動
+ * @property {"block"|"error"} [modeFrac="block"] - 小数部が最大桁を超える入力の挙動
  * @property {boolean} [forceFracOnBlur=false] - blur時に小数部を必ず表示（frac桁まで0埋め）
  */
 
@@ -2308,8 +2382,8 @@ function digits(options = {}) {
 		countLeadingZeros: options.countLeadingZeros ?? true,
 		fixIntOnBlur: options.fixIntOnBlur ?? "none",
 		fixFracOnBlur: options.fixFracOnBlur ?? "none",
-		overflowInputInt: options.overflowInputInt ?? "none",
-		overflowInputFrac: options.overflowInputFrac ?? "none",
+		modeInt: options.modeInt ?? "block",
+		modeFrac: options.modeFrac ?? "block",
 		forceFracOnBlur: options.forceFracOnBlur ?? false
 	};
 
@@ -2336,7 +2410,7 @@ function digits(options = {}) {
 				const intDigits = countIntDigits(intPart, opt.countLeadingZeros);
 				if (intDigits > opt.int) {
 					// 入力ブロック（int）
-					if (opt.overflowInputInt === "block") {
+					if (opt.modeInt === "block") {
 						ctx.requestRevert({
 							reason: "digits.int_overflow",
 							detail: { limit: opt.int, actual: intDigits }
@@ -2359,7 +2433,7 @@ function digits(options = {}) {
 				const fracDigits = (fracPart ?? "").length;
 				if (fracDigits > opt.frac) {
 					// 入力ブロック（frac）
-					if (opt.overflowInputFrac === "block") {
+					if (opt.modeFrac === "block") {
 						ctx.requestRevert({
 							reason: "digits.frac_overflow",
 							detail: { limit: opt.frac, actual: fracDigits }
@@ -2476,8 +2550,8 @@ function digits(options = {}) {
  * - data-tig-rules-digits-count-leading-zeros      -> dataset.tigRulesDigitsCountLeadingZeros
  * - data-tig-rules-digits-fix-int-on-blur          -> dataset.tigRulesDigitsFixIntOnBlur
  * - 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-mode-int                 -> dataset.tigRulesDigitsModeInt
+ * - data-tig-rules-digits-mode-frac                -> dataset.tigRulesDigitsModeFrac
  * - data-tig-rules-digits-force-frac-on-blur       -> dataset.tigRulesDigitsForceFracOnBlur
  *
  * @param {DOMStringMap} dataset
@@ -2530,15 +2604,15 @@ digits.fromDataset = function fromDataset(dataset, _el) {
 		options.fixFracOnBlur = fixFrac;
 	}
 
-	// overflowInputInt / overflowInputFrac
-	const ovInt = parseDatasetEnum(dataset.tigRulesDigitsOverflowInputInt, ["none", "block"]);
-	if (ovInt != null) {
-		options.overflowInputInt = ovInt;
+	// modeInt / modeFrac
+	const modeInt = parseDatasetEnum(dataset.tigRulesDigitsModeInt, ["block", "error"]);
+	if (modeInt != null) {
+		options.modeInt = modeInt;
 	}
 
-	const ovFrac = parseDatasetEnum(dataset.tigRulesDigitsOverflowInputFrac, ["none", "block"]);
-	if (ovFrac != null) {
-		options.overflowInputFrac = ovFrac;
+	const modeFrac = parseDatasetEnum(dataset.tigRulesDigitsModeFrac, ["block", "error"]);
+	if (modeFrac != null) {
+		options.modeFrac = modeFrac;
 	}
 
 	// forceFracOnBlur
@@ -5768,13 +5842,10 @@ function kana(options = {}) {
 			}
 			s = Mojix.toKatakana(s);
 			if (opt.target === "katakana-full") {
-				s = Mojix.toFullWidthSpace(s);
 				s = Mojix.toFullWidthKana(s);
 			} else if (opt.target === "katakana-half") {
-				s = Mojix.toHalfWidthSpace(s);
 				s = Mojix.toHalfWidthKana(s);
 			} else {
-				s = Mojix.toFullWidthSpace(s);
 				s = Mojix.toFullWidthKana(s);
 				s = Mojix.toHiragana(s);
 			}
@@ -5918,6 +5989,23 @@ ascii.fromDataset = function fromDataset(dataset, _el) {
  */
 
 
+/**
+ * filter ルールのオプション
+ * - category は和集合で扱う（複数指定OK）
+ * - allow は追加許可（和集合）
+ * - deny は除外（差集合）
+ *
+ * allowed = (category の和集合 ∪ allow) − deny
+ *
+ * @typedef {Object} FilterRuleOptions
+ * @property {"block"|"error"} [mode="block"] - 不要文字を入力中した場合の挙動
+ * @property {FilterCategory[]} [category] - カテゴリ（配列）
+ * @property {RegExp|string} [allow] - 追加で許可する正規表現（1文字にマッチさせる想定）
+ * @property {string} [allowFlags] - allow が文字列のときの flags（"iu" など。g/y は無視）
+ * @property {RegExp|string} [deny] - 除外する正規表現（1文字にマッチさせる想定）
+ * @property {string} [denyFlags] - deny が文字列のときの flags（"iu" など。g/y は無視）
+ */
+
 /**
  * filter ルールのカテゴリ名
  *
@@ -5956,28 +6044,6 @@ const FILTER_CATEGORIES = [
 	"single-codepoint-only"
 ];
 
-/**
- * filter ルールの動作モード
- * @typedef {"drop"|"error"} FilterMode
- */
-
-/**
- * filter ルールのオプション
- * - category は和集合で扱う（複数指定OK）
- * - allow は追加許可（和集合）
- * - deny は除外（差集合）
- *
- * allowed = (category の和集合 ∪ allow) − deny
- *
- * @typedef {Object} FilterRuleOptions
- * @property {FilterMode} [mode="drop"] - drop: 不要文字を削除 / error: 削除せずエラーを積む
- * @property {FilterCategory[]} [category] - カテゴリ（配列）
- * @property {RegExp|string} [allow] - 追加で許可する正規表現（1文字にマッチさせる想定）
- * @property {string} [allowFlags] - allow が文字列のときの flags（"iu" など。g/y は無視）
- * @property {RegExp|string} [deny] - 除外する正規表現（1文字にマッチさせる想定）
- * @property {string} [denyFlags] - deny が文字列のときの flags（"iu" など。g/y は無視）
- */
-
 /**
  * /g や /y は lastIndex の罠があるので除去して使う
  * @param {string} flags
@@ -6179,16 +6245,13 @@ const scanByAllowed = function (value, isAllowed, maxInvalidChars = 20) {
 
 /**
  * filter ルールを生成する
- * - mode="drop": 不要文字を落とすだけ
- * - mode="error": 文字は落とさず validate でエラーを積む
- *
  * @param {FilterRuleOptions} [options]
  * @returns {Rule}
  */
 function filter(options = {}) {
 	/** @type {FilterRuleOptions} */
 	const opt = {
-		mode: options.mode ?? "drop",
+		mode: options.mode ?? "block",
 		category: options.category ?? [],
 		allow: options.allow,
 		allowFlags: options.allowFlags,
@@ -6273,7 +6336,7 @@ function filter(options = {}) {
  *
  * 対応する data 属性（dataset 名）
  * - data-tig-rules-filter               -> dataset.tigRulesFilter
- * - data-tig-rules-filter-mode          -> dataset.tigRulesFilterMode ("drop"|"error")
+ * - data-tig-rules-filter-mode          -> dataset.tigRulesFilterMode
  * - data-tig-rules-filter-category      -> dataset.tigRulesFilterCategory ("a,b,c")
  * - data-tig-rules-filter-allow         -> dataset.tigRulesFilterAllow
  * - data-tig-rules-filter-allow-flags   -> dataset.tigRulesFilterAllowFlags
@@ -6292,7 +6355,7 @@ filter.fromDataset = function fromDataset(dataset, _el) {
 	/** @type {FilterRuleOptions} */
 	const options = {};
 
-	const mode = parseDatasetEnum(dataset.tigRulesFilterMode, ["drop", "error"]);
+	const mode = parseDatasetEnum(dataset.tigRulesFilterMode, ["block", "error"]);
 	if (mode != null) {
 		options.mode = mode;
 	}
@@ -6348,11 +6411,8 @@ filter.fromDataset = function fromDataset(dataset, _el) {
  * length ルールのオプション
  * @typedef {Object} LengthRuleOptions
  * @property {number} [max] - 最大長（グラフェム数）。未指定なら制限なし
- * @property {"block"|"error"} [overflowInput="block"] - 入力中に最大長を超えたときの挙動
+ * @property {"block"|"error"} [mode="block"] - 入力中に最大長を超えたときの挙動
  * @property {"grapheme"|"utf-16"|"utf-32"} [unit="grapheme"] - 長さの単位
- *
- * block   : 最大長を超える部分を切る
- * error   : エラーを積むだけ（値は変更しない）
  */
 
 /**
@@ -6386,7 +6446,7 @@ const getTextLengthByUnit = function(text, unit) {
  * @param {number} max
  * @returns {string}
  */
-const cutTextByUnit = function(text, unit, max) {
+const cutTextByUnit$1 = function(text, unit, max) {
 	/**
 	 * グラフェムの配列
 	 * @type {Grapheme[]}
@@ -6446,13 +6506,13 @@ const cutTextByUnit = function(text, unit, max) {
  * @returns {string} 追加するテキストを切ったもの（切る必要がない場合は insertedText をそのまま返す）
  */
 const cutLength = function(beforeText, insertedText, unit, max) {
-	const orgLen = getTextLengthByUnit(beforeText, unit);
+	const beforeTextLen = getTextLengthByUnit(beforeText, unit);
 
 	// すでに最大長を超えている場合は追加のテキストを全て切る
-	if (orgLen >= max) { return ""; }
+	if (beforeTextLen >= max) { return ""; }
 
-	const addLen = getTextLengthByUnit(insertedText, unit);
-	const totalLen = orgLen + addLen;
+	const insertedTextLen = getTextLengthByUnit(insertedText, unit);
+	const totalLen = beforeTextLen + insertedTextLen;
 
 	if (totalLen <= max) {
 		// 今回の追加で範囲内に収まるなら何もしない
@@ -6460,8 +6520,8 @@ const cutLength = function(beforeText, insertedText, unit, max) {
 	}
 
 	// 超える場合は追加のテキストを切る
-	const allowedAddLen = max - orgLen;
-	return cutTextByUnit(insertedText, unit, allowedAddLen);
+	const allowedAddLen = max - beforeTextLen;
+	return cutTextByUnit$1(insertedText, unit, allowedAddLen);
 };
 
 /**
@@ -6473,7 +6533,7 @@ function length(options = {}) {
 	/** @type {LengthRuleOptions} */
 	const opt = {
 		max: typeof options.max === "number" ? options.max : undefined,
-		overflowInput: options.overflowInput ?? "block",
+		mode: options.mode ?? "block",
 		unit: options.unit ?? "grapheme"
 	};
 
@@ -6483,7 +6543,7 @@ function length(options = {}) {
 
 		normalizeChar(value, ctx) {
 			// block 以外は何もしない
-			if (opt.overflowInput !== "block") {
+			if (opt.mode !== "block") {
 				return value;
 			}
 			// max 未指定なら制限なし
@@ -6491,20 +6551,14 @@ function length(options = {}) {
 				return value;
 			}
 
-			const beforeText = ctx.beforeText;
-			const insertedText = ctx.insertedText;
-			if (insertedText === "") {
-				return value;
-			}
-
-			const cutText = cutLength(beforeText, insertedText, opt.unit, opt.max);
+			const cutText = cutLength(ctx.beforeText, value, opt.unit, opt.max);
 			return cutText;
 		},
 
 		validate(value, ctx) {
 			// error 以外は何もしない
-			if (opt.overflowInput !== "error") {
-				return value;
+			if (opt.mode !== "error") {
+				return;
 			}
 			// max 未指定なら制限なし
 			if (typeof opt.max !== "number") {
@@ -6517,7 +6571,7 @@ function length(options = {}) {
 					code: "length.max_overflow",
 					rule: "length",
 					phase: "validate",
-					detail: { max: opt.max, actual: len }
+					detail: { limit: opt.max, actual: len }
 				});
 			}
 		}
@@ -6532,7 +6586,7 @@ function length(options = {}) {
  * 対応する data 属性（dataset 名）
  * - data-tig-rules-length                     -> dataset.tigRulesLength
  * - data-tig-rules-length-max                 -> dataset.tigRulesLengthMax
- * - data-tig-rules-length-overflow-input      -> dataset.tigRulesLengthOverflowInput
+ * - data-tig-rules-length-mode                -> dataset.tigRulesLengthMode
  * - data-tig-rules-length-unit                -> dataset.tigRulesLengthUnit
  *
  * @param {DOMStringMap} dataset
@@ -6553,12 +6607,9 @@ length.fromDataset = function fromDataset(dataset, _el) {
 		options.max = max;
 	}
 
-	const overflowInput = parseDatasetEnum(
-		dataset.tigRulesLengthOverflowInput,
-		["block", "error"]
-	);
-	if (overflowInput != null) {
-		options.overflowInput = overflowInput;
+	const mode = parseDatasetEnum(dataset.tigRulesLengthMode, ["block", "error"]);
+	if (mode != null) {
+		options.mode = mode;
 	}
 
 	const unit = parseDatasetEnum(
@@ -6572,6 +6623,364 @@ length.fromDataset = function fromDataset(dataset, _el) {
 	return length(options);
 };
 
+/**
+ * The script is part of TextInputGuard.
+ *
+ * AUTHOR:
+ *  natade-jp (https://github.com/natade-jp)
+ *
+ * LICENSE:
+ *  The MIT license https://opensource.org/licenses/MIT
+ */
+
+
+/**
+ * width ルールのオプション
+ * @typedef {Object} WidthRuleOptions
+ * @property {number} [max] - 最大長（全角は2, 半角は1）
+ * @property {"block"|"error"} [mode="block"] - 入力中に最大長を超えたときの挙動
+ */
+
+/**
+ * width ルールを生成する
+ * @param {WidthRuleOptions} [options]
+ * @returns {Rule}
+ */
+function width(options = {}) {
+	/** @type {WidthRuleOptions} */
+	const opt = {
+		max: typeof options.max === "number" ? options.max : undefined,
+		mode: options.mode ?? "block"
+	};
+
+	return {
+		name: "length",
+		targets: ["input", "textarea"],
+
+		normalizeChar(value, ctx) {
+			// block 以外は何もしない
+			if (opt.mode !== "block") {
+				return value;
+			}
+			// max 未指定なら制限なし
+			if (typeof opt.max !== "number") {
+				return value;
+			}
+
+			/*
+			 * 指定したテキストを切り出す
+			 * - 0幅 ... グラフェムを構成する要素
+			 *           （結合文字, 異体字セレクタ, スキントーン修飾子,
+			 *            Tag Sequence 構成文字, ZWSP, ZWNJ, ZWJ, WJ）
+			 * - 1幅 ... ASCII文字, 半角カタカナ, Regional Indicator（単体）
+			 * - 2幅 ... 上記以外
+			 * ※ Unicode が配布してる EastAsianWidth.txt は使用していません。
+			 * （目的としては Shift_JIS 時代の半角全角だと思われるため）
+			 */
+			const cutText = Mojix.cutTextForWidth(value, 0, opt.max);
+			return cutText;
+		},
+
+		validate(value, ctx) {
+			// error 以外は何もしない
+			if (opt.mode !== "error") {
+				return;
+			}
+			// max 未指定なら制限なし
+			if (typeof opt.max !== "number") {
+				return;
+			}
+
+			/*
+			* 指定したテキストの横幅を半角／全角でカウント
+			* - 0幅 ... グラフェムを構成する要素
+			*           （結合文字, 異体字セレクタ, スキントーン修飾子,
+			*            Tag Sequence 構成文字, ZWSP, ZWNJ, ZWJ, WJ）
+			* - 1幅 ... ASCII文字, 半角カタカナ, Regional Indicator（単体）
+			* - 2幅 ... 上記以外
+			* ※ Unicode が配布してる EastAsianWidth.txt は使用していません。
+			* （目的としては Shift_JIS 時代の半角全角だと思われるため）
+			*/
+			const len = Mojix.getWidth(value);
+			if (len > opt.max) {
+				ctx.pushError({
+					code: "width.max_overflow",
+					rule: "width",
+					phase: "validate",
+					detail: { limit: opt.max, actual: len }
+				});
+			}
+		}
+	};
+}
+
+/**
+ * datasetから length ルールを生成する
+ * - data-tig-rules-length が無ければ null
+ * - オプションは data-tig-rules-length-xxx から読む
+ *
+ * 対応する data 属性（dataset 名）
+ * - data-tig-rules-length                     -> dataset.tigRulesWidth
+ * - data-tig-rules-length-max                 -> dataset.tigRulesWidthMax
+ * - data-tig-rules-length-mode                -> dataset.tigRulesWidthMode
+ *
+ * @param {DOMStringMap} dataset
+ * @param {HTMLInputElement|HTMLTextAreaElement} _el
+ * @returns {Rule|null}
+ */
+width.fromDataset = function fromDataset(dataset, _el) {
+	// ON判定
+	if (dataset.tigRulesWidth == null) {
+		return null;
+	}
+
+	/** @type {WidthRuleOptions} */
+	const options = {};
+
+	const max = parseDatasetNumber(dataset.tigRulesWidthMax);
+	if (max != null) {
+		options.max = max;
+	}
+
+	const mode = parseDatasetEnum(dataset.tigRulesWidthMode, ["block", "error"]);
+	if (mode != null) {
+		options.mode = mode;
+	}
+
+	return width(options);
+};
+
+/**
+ * The script is part of TextInputGuard.
+ *
+ * AUTHOR:
+ *  natade-jp (https://github.com/natade-jp)
+ *
+ * LICENSE:
+ *  The MIT license https://opensource.org/licenses/MIT
+ */
+
+
+/**
+ * bytes ルールのオプション
+ * @typedef {Object} BytesRuleOptions
+ * @property {number} [max] - 最大長（グラフェム数）。未指定なら制限なし
+ * @property {"block"|"error"} [mode="block"] - 入力中に最大長を超えたときの挙動
+ * @property {"utf-8"|"utf-16"|"utf-32"|"sjis"|"cp932"} [unit="utf-8"] - サイズの単位(sjis系を使用する場合はfilterも必須)
+ */
+
+/**
+ * グラフェム（1グラフェムは、UTF-32の配列）
+ * @typedef {number[]} Grapheme
+ */
+
+/**
+ * グラフェム/UTF-16コード単位/UTF-32コード単位の長さを調べる
+ * @param {string} text
+ * @param {"utf-8"|"utf-16"|"utf-32"|"sjis"|"cp932"} unit
+ * @returns {number}
+ */
+const getTextBytesByUnit = function(text, unit) {
+	if (text.length === 0) {
+		return 0;
+	}
+	if (unit === "utf-8") {
+		return Mojix.toUTF8Array(text).length;
+	} else if (unit === "utf-16") {
+		return Mojix.toUTF16Array(text).length * 2;
+	} else if (unit === "utf-32") {
+		return Mojix.toUTF32Array(text).length * 4;
+	} else if (unit === "sjis" || unit === "cp932") {
+		return Mojix.encode(text, "Shift_JIS").length;
+	} else {
+		// ここには来ない
+		throw new Error(`Invalid unit: ${unit}`);
+	}
+};
+
+/**
+ * グラフェム/UTF-16コード単位/UTF-32コード単位でテキストを切る
+ * @param {string} text
+ * @param {"utf-8"|"utf-16"|"utf-32"|"sjis"|"cp932"} unit
+ * @param {number} max
+ * @returns {string}
+ */
+const cutTextByUnit = function(text, unit, max) {
+	/**
+	 * グラフェムの配列
+	 * @type {Grapheme[]}
+	 */
+	const graphemeArray = Mojix.toMojiArrayFromString(text);
+
+	/**
+	 * 現在の位置
+	 */
+	let count = 0;
+
+	/**
+	 * グラフェムの配列（出力用）
+	 * @type {Grapheme[]}
+	 */
+	const outputGraphemeArray = [];
+
+	for (let i = 0; i < graphemeArray.length; i++) {
+		const g = graphemeArray[i];
+
+		// 1グラフェムあたりの長さ
+		let byteCount = 0;
+		if (unit === "utf-8") {
+			byteCount = Mojix.toUTF8Array(Mojix.toStringFromMojiArray([g])).length;
+		} else if (unit === "utf-16") {
+			byteCount = Mojix.toUTF16Array(Mojix.toStringFromMojiArray([g])).length * 2;
+		} else if (unit === "utf-32") {
+			byteCount = Mojix.toUTF32Array(Mojix.toStringFromMojiArray([g])).length * 4;
+		} else if (unit === "sjis" || unit === "cp932") {
+			byteCount = Mojix.encode(Mojix.toStringFromMojiArray([g]), "Shift_JIS").length;
+		}
+
+		if (count + byteCount > max) {
+			// 空配列を渡すとNUL文字を返すため、空配列のときは空文字を返す
+			if (outputGraphemeArray.length === 0) {
+				return "";
+			}
+			// 超える前の位置で文字列化して返す
+			return Mojix.toStringFromMojiArray(outputGraphemeArray);
+		}
+
+		count += byteCount;
+		outputGraphemeArray.push(g);
+	}
+
+	// 全部入るなら元の text を返す
+	return text;
+};
+
+/**
+ * 元のテキストと追加のテキストの合計が max を超える場合、追加のテキストを切って合計が max に収まるようにする
+ * @param {string} beforeText 元のテキスト
+ * @param {string} insertedText 追加するテキスト
+ * @param {"utf-8"|"utf-16"|"utf-32"|"sjis"|"cp932"} unit
+ * @param {number} max
+ * @returns {string} 追加するテキストを切ったもの（切る必要がない場合は insertedText をそのまま返す）
+ */
+const cutBytes = function(beforeText, insertedText, unit, max) {
+	const beforeTextLen = getTextBytesByUnit(beforeText, unit);
+
+	// すでに最大長を超えている場合は追加のテキストを全て切る
+	if (beforeTextLen >= max) { return ""; }
+
+	const insertedTextLen = getTextBytesByUnit(insertedText, unit);
+	const totalLen = beforeTextLen + insertedTextLen;
+
+	if (totalLen <= max) {
+		// 今回の追加で範囲内に収まるなら何もしない
+		return insertedText;
+	}
+
+	// 超える場合は追加のテキストを切る
+	const allowedAddLen = max - beforeTextLen;
+	return cutTextByUnit(insertedText, unit, allowedAddLen);
+};
+
+/**
+ * bytes ルールを生成する
+ * @param {BytesRuleOptions} [options]
+ * @returns {Rule}
+ */
+function bytes(options = {}) {
+	/** @type {BytesRuleOptions} */
+	const opt = {
+		max: typeof options.max === "number" ? options.max : undefined,
+		mode: options.mode ?? "block",
+		unit: options.unit ?? "utf-8"
+	};
+
+	return {
+		name: "bytes",
+		targets: ["input", "textarea"],
+
+		normalizeChar(value, ctx) {
+			// block 以外は何もしない
+			if (opt.mode !== "block") {
+				return value;
+			}
+			// max 未指定なら制限なし
+			if (typeof opt.max !== "number") {
+				return value;
+			}
+
+			const cutText = cutBytes(ctx.beforeText, value, opt.unit, opt.max);
+			return cutText;
+		},
+
+		validate(value, ctx) {
+			// error 以外は何もしない
+			if (opt.mode !== "error") {
+				return;
+			}
+			// max 未指定なら制限なし
+			if (typeof opt.max !== "number") {
+				return;
+			}
+
+			const len = getTextBytesByUnit(value, opt.unit);
+			if (len > opt.max) {
+				ctx.pushError({
+					code: "bytes.max_overflow",
+					rule: "bytes",
+					phase: "validate",
+					detail: { max: opt.max, actual: len }
+				});
+			}
+		}
+	};
+}
+
+/**
+ * datasetから bytes ルールを生成する
+ * - data-tig-rules-bytes が無ければ null
+ * - オプションは data-tig-rules-bytes-xxx から読む
+ *
+ * 対応する data 属性（dataset 名）
+ * - data-tig-rules-bytes                     -> dataset.tigRulesBytes
+ * - data-tig-rules-bytes-max                 -> dataset.tigRulesBytesMax
+ * - data-tig-rules-bytes-mode                -> dataset.tigRulesBytesMode
+ * - data-tig-rules-bytes-unit                -> dataset.tigRulesBytesUnit
+ *
+ * @param {DOMStringMap} dataset
+ * @param {HTMLInputElement|HTMLTextAreaElement} _el
+ * @returns {Rule|null}
+ */
+bytes.fromDataset = function fromDataset(dataset, _el) {
+	// ON判定
+	if (dataset.tigRulesBytes == null) {
+		return null;
+	}
+
+	/** @type {BytesRuleOptions} */
+	const options = {};
+
+	const max = parseDatasetNumber(dataset.tigRulesBytesMax);
+	if (max != null) {
+		options.max = max;
+	}
+
+	const mode = parseDatasetEnum(dataset.tigRulesBytesMode, ["block", "error"]);
+	if (mode != null) {
+		options.mode = mode;
+	}
+
+	const unit = parseDatasetEnum(
+		dataset.tigRulesBytesUnit,
+		["utf-8", "utf-16", "utf-32", "sjis", "cp932"]
+	);
+	if (unit != null) {
+		options.unit = unit;
+	}
+
+	return bytes(options);
+};
+
 /**
  * The script is part of TextInputGuard.
  *
@@ -6831,6 +7240,8 @@ const auto = new InputGuardAutoAttach(attach, [
 	{ name: "ascii", fromDataset: ascii.fromDataset },
 	{ name: "filter", fromDataset: filter.fromDataset },
 	{ name: "length", fromDataset: length.fromDataset },
+	{ name: "width", fromDataset: width.fromDataset },
+	{ name: "bytes", fromDataset: bytes.fromDataset },
 	{ name: "prefix", fromDataset: prefix.fromDataset },
 	{ name: "suffix", fromDataset: suffix.fromDataset },
 	{ name: "trim", fromDataset: trim.fromDataset }
@@ -6853,6 +7264,8 @@ const rules = {
 	ascii,
 	filter,
 	length,
+	width,
+	bytes,
 	prefix,
 	suffix,
 	trim
@@ -6860,16 +7273,17 @@ const rules = {
 
 /**
  * バージョン（ビルド時に置換したいならここを差し替える）
- * 例: rollup replace で ""0.1.5"" を package.json の version に置換
+ * 例: rollup replace で ""0.2.0"" を package.json の version に置換
  */
 // @ts-ignore
 // eslint-disable-next-line no-undef
-const version = "0.1.5" ;
+const version = "0.2.0" ;
 
 exports.ascii = ascii;
 exports.attach = attach;
 exports.attachAll = attachAll;
 exports.autoAttach = autoAttach;
+exports.bytes = bytes;
 exports.comma = comma;
 exports.digits = digits;
 exports.filter = filter;
@@ -6881,3 +7295,4 @@ exports.rules = rules;
 exports.suffix = suffix;
 exports.trim = trim;
 exports.version = version;
+exports.width = width;