@brandup/ui-input 1.0.26 → 1.0.30

package/README.md

@@ -1,18 +1,76 @@
-# brandup-ui-input
+# @brandup/ui-input
 
-[![Build Status](https://dev.azure.com/brandup/BrandUp%20Core/_apis/build/status%2FBrandUp%2Fbrandup-ui-kit?branchName=master)]()
+[![Build Status](https://dev.azure.com/brandup/BrandUp%20Core/_apis/build/status%2FBrandUp%2Fbrandup-ui-kit?branchName=main)](https://dev.azure.com/brandup/BrandUp%20Core/_build/latest?definitionId=81&branchName=main)
 
-## Installation
+Абстрактный базовый класс для компонентов ввода в форме. Обеспечивает единый интерфейс для `HTMLInputElement`, `HTMLTextAreaElement` и `HTMLSelectElement`.
 
-Install NPM package [@brandup/ui](https://www.npmjs.com/package/@brandup/ui-kit).
+## Установка
 
 ```
-npm i @brandup/ui-kit@latest
+npm i @brandup/ui-input
 ```
 
 ## InputControl
 
-`InputControl<InputType>` - это базовый абстрактный класс для элементов пользовательсково ввода в форме. Реализуется 
-относительно `HTMLInputElement`, `HTMLTextAreaElement`, `HTMLSelectElement`.
+`InputControl<T, TEvents>` — абстрактный класс, от которого наследуются все компоненты ввода (`TextBox`, `DropDown`). Расширяет `UIElementBound` из `@brandup/ui`.
 
-`InputControl` наследует интерфейс `IInputControl`, чтобы можно было абстрагироваться от реализации.
+### Свойства
+
+| Свойство | Тип | Описание |
+|---|---|---|
+| `form` | `HTMLFormElement \| null` | Форма, к которой привязан элемент |
+| `disabled` | `boolean` | Элемент отключён |
+| `required` | `boolean` | Элемент обязателен для заполнения |
+| `readonly` | `boolean` | Элемент только для чтения (`readonly` или `data-readonly`) |
+
+### Методы
+
+| Метод | Описание |
+|---|---|
+| `validate(): boolean` | Проверяет значение через нативный `checkValidity()`. Возвращает `true`, если значение валидно |
+| `focus(): void` | Устанавливает фокус и прокручивает элемент в видимую область |
+| `destroy(): void` | Снимает все обработчики и освобождает ресурсы |
+
+### Поведение
+
+- Добавляет CSS-класс `ui-input` на корневой элемент.
+- При инициализации добавляет классы `required`, `readonly`, `disabled` в зависимости от состояния элемента.
+- Перехватывает событие `invalid` нативного поля и делегирует валидацию через `validate()`.
+- Перехватывает `submit` формы: если элемент невалиден — останавливает отправку и вызывает `focus()`.
+
+### Интерфейс IInputControl
+
+```typescript
+import { IInputControl } from "@brandup/ui-input";
+
+interface IInputControl {
+    get form(): HTMLFormElement | null;
+    get disabled(): boolean;
+    get required(): boolean;
+    get readonly(): boolean;
+
+    validate(): boolean;
+    focus(): void;
+    destroy(): void;
+}
+```
+
+### Создание собственного компонента
+
+```typescript
+import { InputControl } from "@brandup/ui-input";
+
+class MyInput extends InputControl<HTMLInputElement> {
+    constructor(inputElem: HTMLInputElement) {
+        const wrapper = document.createElement("div");
+        inputElem.insertAdjacentElement("afterend", wrapper);
+        wrapper.appendChild(inputElem);
+
+        super("MyInput", wrapper, inputElem);
+    }
+
+    getValue(): string {
+        return this.__valueElem.value;
+    }
+}
+```

package/package.json

@@ -21,12 +21,12 @@
     "email": "it@brandup.online"
   },
   "license": "Apache-2.0",
-  "version": "1.0.26",
+  "version": "1.0.30",
   "main": "source/index.ts",
   "types": "source/index.ts",
   "dependencies": {
-    "@brandup/ui": "^1.0.44",
-    "@brandup/ui-kit": "^1.0.26"
+    "@brandup/ui": "^2.0.3",
+    "@brandup/ui-kit": "^1.0.30"
   },
   "files": [
     "source",

package/source/index.ts

@@ -1 +1 @@
-export * from "./input"
+export * from "./input";

package/source/input.ts

@@ -1,4 +1,4 @@
-import { UIElement } from "@brandup/ui";
+import { UIElementBound } from "@brandup/ui";
 import "./input.less";
 
 type InputType = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
@@ -6,37 +6,55 @@ type FormInput<T> = T extends InputType ? T : never;
 
 export const INPUT_CSS_CLASS = "ui-input";
 
-export abstract class InputControl<T extends InputType> extends UIElement implements IInputControl {
+export abstract class InputControl<T extends InputType, TEvents = {}>
+	extends UIElementBound<TEvents>
+	implements IInputControl
+{
 	protected __valueElem: FormInput<T>;
 	protected __submitEvent?: (e: SubmitEvent) => void;
+	private __invalidEvent?: (e: Event) => void;
 	private __isValidating?: boolean; // true, когда выполняется checkValidity в validate.
 
-	constructor(valueElem: FormInput<T>) {
-		super();
+	constructor(typeName: string, elem: HTMLElement, valueElem: FormInput<T>) {
+		super(typeName, elem);
 
 		this.__valueElem = valueElem;
 
+		// то, что раньше делал _onRenderElement-override; теперь применяем после super, чтобы видеть valueElem
+		elem.classList.add(INPUT_CSS_CLASS);
+		if (this.required) elem.classList.add("required");
+		if (this.readonly) elem.classList.add("readonly");
+		if (this.disabled) elem.classList.add("disabled");
+
 		this.__initForm();
 	}
 
-	get form(): HTMLFormElement | null { return this.__valueElem.form; }
-	get disabled(): boolean { return this.__valueElem.disabled; }
-	get required(): boolean { return this.__valueElem.required; }
-	get readonly(): boolean { return this.__valueElem.hasAttribute("readonly") || this.__valueElem.hasAttribute("data-readonly"); }
+	get form(): HTMLFormElement | null {
+		return this.__valueElem.form;
+	}
+	get disabled(): boolean {
+		return this.__valueElem.disabled;
+	}
+	get required(): boolean {
+		return this.__valueElem.required;
+	}
+	get readonly(): boolean {
+		return this.__valueElem.hasAttribute("readonly") || this.__valueElem.hasAttribute("data-readonly");
+	}
 
 	private __initForm() {
-		this.__valueElem.addEventListener("invalid", (e: Event) => {
+		this.__invalidEvent = (e: Event) => {
 			e.preventDefault();
 
 			this.__submitForm();
-		});
+		};
+		this.__valueElem.addEventListener("invalid", this.__invalidEvent);
 
 		this.__submitEvent = (e: SubmitEvent) => {
-			if ((<HTMLButtonElement>e.submitter).formNoValidate || (<HTMLFormElement>e.target).noValidate)
+			if ((e.submitter as HTMLButtonElement | null)?.formNoValidate || (<HTMLFormElement>e.target).noValidate)
 				return; // Не делаем валидацию, если она отключена в форме или в инициаторе события submit
 
-			if (this.disabled)
-				return;
+			if (this.disabled) return;
 
 			if (!this.validate()) {
 				if (!e.defaultPrevented) {
@@ -49,8 +67,7 @@ export abstract class InputControl<T extends InputType> extends UIElement implem
 			}
 		};
 
-		if (this.form)
-			this.form.addEventListener("submit", this.__submitEvent);
+		if (this.form) this.form.addEventListener("submit", this.__submitEvent);
 	}
 
 	protected __submitForm() {
@@ -59,20 +76,8 @@ export abstract class InputControl<T extends InputType> extends UIElement implem
 			form.dispatchEvent(new SubmitEvent("submit", { submitter: form, cancelable: true }));
 	}
 
-	protected override _onRenderElement(elem: HTMLElement) {
-		elem.classList.add(INPUT_CSS_CLASS);
-
-		if (this.required)
-			elem.classList.add("required");
-		if (this.readonly)
-			elem.classList.add("readonly");
-		if (this.disabled)
-			elem.classList.add("disabled");
-	}
-
 	validate(): boolean {
-		if (this.__isValidating)
-			return true;
+		if (this.__isValidating) return true;
 
 		this.__isValidating = true;
 		const result = this.__valueElem.checkValidity();
@@ -83,12 +88,13 @@ export abstract class InputControl<T extends InputType> extends UIElement implem
 
 	focus(): void {
 		this.__valueElem.focus();
-		this.element?.scrollIntoView({ block: "center", inline: "center" });
+		this.element.scrollIntoView({ block: "center", inline: "center" });
 	}
 
 	override destroy() {
-		if (this.form && this.__submitEvent)
-			this.form.removeEventListener("submit", this.__submitEvent);
+		if (this.form && this.__submitEvent) this.form.removeEventListener("submit", this.__submitEvent);
+
+		if (this.__invalidEvent) this.__valueElem.removeEventListener("invalid", this.__invalidEvent);
 
 		super.destroy();
 	}
@@ -103,4 +109,4 @@ export interface IInputControl {
 	validate(): boolean;
 	focus(): void;
 	destroy(): void;
-}
+}