@brandup/ui-textbox 1.0.39 → 1.0.41

package/package.json

@@ -24,15 +24,15 @@
     "email": "it@brandup.online"
   },
   "license": "Apache-2.0",
-  "version": "1.0.39",
+  "version": "1.0.41",
   "main": "source/index.ts",
   "types": "source/index.ts",
   "dependencies": {
     "@brandup/ui": "^2.0.7",
     "@brandup/ui-helpers": "^2.0.7",
-    "@brandup/ui-input": "^1.0.39",
-    "@brandup/ui-kit": "^1.0.39",
-    "@brandup/ui-richeditor": "^1.0.39"
+    "@brandup/ui-input": "^1.0.41",
+    "@brandup/ui-kit": "^1.0.41",
+    "@brandup/ui-richeditor": "^1.0.41"
   },
   "files": [
     "source",

package/source/textbox.less

@@ -49,26 +49,7 @@
 		z-index: 2;
 		margin-right: 5px;
 		padding-right: calc(var(--input-padding-lr) - 5px);
-		scrollbar-width: 6px;
-		overflow-y: auto;
-
-		&::-webkit-scrollbar {
-			width: 6px;
-			background: none;
-		}
-
-		&::-webkit-scrollbar-track {
-			border-radius: 3px;
-			background-color: transparent;
-			margin: 6px 0;
-			cursor: default;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background-color: #8696a0;
-			border-radius: 3px;
-			cursor: default;
-		}
+		overflow-y: auto; // полоса прокрутки — общая, от .ui-scrollable кита
 	}
 
 	// редактор (@brandup/ui-richeditor) — занимает доступное место; внутреннее оформление в richeditor.less

package/source/textbox.ts

@@ -1,7 +1,7 @@
 import "./textbox.less"; // стили компонента
 
 import { InputControl } from "@brandup/ui-input";
-import { IS_TOUCH_DEVICE } from "@brandup/ui-kit";
+import { IS_TOUCH_DEVICE, SCROLLABLE_CLASS } from "@brandup/ui-kit";
 import { DOM } from "@brandup/ui";
 import { FuncHelper } from "@brandup/ui-helpers";
 import RichEditor, {
@@ -102,15 +102,16 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		// форматирование доступно только для обычного текстового ввода
 		const format = type === "text" && valueElem.hasAttribute("data-format");
 		const formatStorage: FormatStorage =
-			valueElem.getAttribute("data-format-storage") === "markdown" ? "markdown" : "html";
-		const formatTools = format ? parseFormatTools(valueElem.getAttribute("data-format-tools")) : [];
+			valueElem.dataset.formatStorage === "markdown" ? "markdown" : "html";
+		const formatTools = format ? parseFormatTools(valueElem.dataset.formatTools ?? null) : [];
 		// кнопки действий панели (очистка формата, отмена, повтор) — подключаются явно
-		const editorActions = format ? parseEditorActions(valueElem.getAttribute("data-editor-actions")) : [];
+		const editorActions = format ? parseEditorActions(valueElem.dataset.editorActions ?? null) : [];
 
 		// markdown-маркеры с дефолтами, переопределяются атрибутами data-format-md-<tool>
 		const formatMarkers = defaultFormatMarkers();
 		if (format) {
 			for (const tool of Object.keys(formatMarkers) as FormatTool[]) {
+				// имя атрибута собирается на ходу: у dataset оно потребовало бы ручного camelCase
 				const marker = valueElem.getAttribute(`data-format-md-${tool}`)?.trim();
 				if (marker) formatMarkers[tool] = marker;
 			}
@@ -122,7 +123,7 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 
 		const container = DOM.tag("div", { class: ROOT_CLASS }, [
 			DOM.tag("div", { class: "decorator" }),
-			DOM.tag("div", { class: "editor" }, [inputElem, symbolsCountElem]),
+			DOM.tag("div", { class: ["editor", SCROLLABLE_CLASS] }, [inputElem, symbolsCountElem]),
 			actionsElem,
 		]);
 
@@ -139,7 +140,7 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 			// команда объявляется атрибутом data-command — по нему её ищет обработчик @brandup/ui
 			const buttonElem = DOM.tag(
 				"button",
-				{ "data-command": "copy-text", title: "Скопировать в буфер обмена" },
+				{ command: "copy-text", title: "Скопировать в буфер обмена" },
 				copyIcon
 			);
 			if (disabled) buttonElem.disabled = true;
@@ -189,7 +190,7 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 			toolbarContainer: container,
 			value: valueElem.value,
 			onReject: () => this.__toIncorrect(),
-			onEnter: () => this.__submitForm(),
+			onEnter: () => this.__requestSubmit(),
 		};
 
 		// допустим ли вводимый символ по типу.
@@ -328,6 +329,23 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 	// валидация, отправка формы, сбор FormData.
 	protected override __syncValue(): void {
 		this.__editor.flushChange();
+		this.__refreshValidity();
+	}
+
+	/**
+	 * Собственное ограничение контрола объявляем полю через setCustomValidity — дальше всё
+	 * делает браузер, как с нативными `required` и `pattern`: блокирует отправку и поднимает
+	 * invalid. Иначе правило работало бы только в нашем validate(), а форма уезжала бы.
+	 *
+	 * Длину меряем по видимому тексту, а не по значению: при format/html в нём теги, в multiline —
+	 * разделители абзацев. Нативный maxLength здесь не помощник: он ограничивает набор, но не
+	 * помечает значение, выставленное из кода.
+	 */
+	private __refreshValidity(): void {
+		if (this.maxlength <= 0) return;
+
+		const tooLong = this.maxlength < this.__editor.getLength();
+		this.__valueElem.setCustomValidity(tooLong ? `Не больше ${this.maxlength} символов.` : "");
 	}
 
 	private __toIncorrect() {