@brandup/ui-kit 1.0.43 → 1.0.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +43 -1
  2. package/package.json +2 -2
  3. package/source/index.ts +1 -0
  4. package/source/modal.ts +3 -1
  5. package/source/utils/text.ts +20 -0
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  [![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)
4
4
 
5
- Базовый пакет UI-кита: сброс стилей, типографика, стили полей ввода, PopupManager и middleware для `@brandup/ui-app`.
5
+ Базовый пакет UI-кита: сброс стилей, типографика, стили полей ввода, модальное окно, PopupManager и middleware для `@brandup/ui-app`.
6
6
 
7
7
  ## Установка
8
8
 
@@ -57,6 +57,48 @@ PopupManager.close();
57
57
  PopupManager.isOpened(); // boolean
58
58
  ```
59
59
 
60
+ ## Modal
61
+
62
+ Базовое модальное окно: затемнение, шапка с заголовком и крестиком, тело. Наследник наполняет `body` в своём конструкторе и живёт до `close()`; само окно знает только про рамку, слои и закрытие.
63
+
64
+ ```typescript
65
+ import { Modal } from "@brandup/ui-kit";
66
+
67
+ class ConfirmModal extends Modal {
68
+ constructor() {
69
+ super({ title: "Удалить?", className: "confirm-modal", closeOnBackdrop: false });
70
+
71
+ this.body.append(/* ... */);
72
+ }
73
+ }
74
+
75
+ const modal = new ConfirmModal();
76
+ modal.onClosed(() => {
77
+ /* отпустить то, что придержали на время окна */
78
+ });
79
+ ```
80
+
81
+ | Член | Описание |
82
+ | --- | --- |
83
+ | `body` | Тело окна — его наполняет наследник |
84
+ | `close()` | Закрыть окно (то же делают крестик, Esc и клик по подложке) |
85
+ | `onClose()` | Хук наследника перед закрытием |
86
+ | `onClosed(handler)` | Подписка на закрытие: срабатывает ровно один раз, чем бы окно ни кончилось; на уже закрытом окне — сразу |
87
+
88
+ Закрытие идёт через систему команд кита (`ui-modal-close`), поэтому свои кнопки закрытия достаточно объявить тем же `data-command`. Пока окно открыто, на `<body>` висит класс `ui-modal-opened` — страница под ним не прокручивается.
89
+
90
+ ## Прокручиваемые области
91
+
92
+ Класс `ui-scrollable` оформляет полосу прокрутки одинаково во всех компонентах кита — тонкая, без стрелок, со скруглённым ползунком. Размер и цвет переопределяются CSS-переменными `--scrollbar-size`, `--scrollbar-thumb` и `--scrollbar-thumb-radius` прямо на элементе.
93
+
94
+ ```typescript
95
+ import { SCROLLABLE_CLASS } from "@brandup/ui-kit";
96
+
97
+ const list = DOM.tag("div", { class: SCROLLABLE_CLASS });
98
+ ```
99
+
100
+ Оформление держится на `::-webkit-scrollbar`: стандартные `scrollbar-width`/`scrollbar-color` не задаются намеренно — Blink при них отдаёт системную полосу со стрелками. Браузерам без `::-webkit-scrollbar` (Firefox) стандартные свойства выдаются отдельным правилом.
101
+
60
102
  ## Утилиты
61
103
 
62
104
  ```typescript
package/package.json CHANGED
@@ -25,11 +25,11 @@
25
25
  },
26
26
  "type": "module",
27
27
  "license": "Apache-2.0",
28
- "version": "1.0.43",
28
+ "version": "1.0.45",
29
29
  "main": "source/index.ts",
30
30
  "types": "source/index.ts",
31
31
  "dependencies": {
32
- "@brandup/ui-app": "^2.0.7"
32
+ "@brandup/ui-app": "^2.0.9"
33
33
  },
34
34
  "files": [
35
35
  "source",
package/source/index.ts CHANGED
@@ -9,6 +9,7 @@ export const SCROLLABLE_CLASS = "ui-scrollable";
9
9
 
10
10
  export { default as Modal, MODAL_CLASS, MODAL_OPENED_CLASS, MODAL_CLOSE_COMMAND, type ModalOptions } from "./modal";
11
11
  export { IS_TOUCH_DEVICE } from "./utils/compatibility";
12
+ export { textTag } from "./utils/text";
12
13
  import "./styles.less";
13
14
 
14
15
  export const uiKitMiddlewareFactory = () => new UiKitMiddleware();
package/source/modal.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import "./modal.less"; // стили окна
2
2
 
3
3
  import { DOM, UIElement } from "@brandup/ui";
4
+ import { textTag } from "./utils/text";
4
5
  import closeIcon from "../svg/x.svg";
5
6
 
6
7
  export const MODAL_CLASS = "ui-modal";
@@ -53,7 +54,8 @@ export default abstract class Modal extends UIElement {
53
54
  ),
54
55
  DOM.tag("div", { class: "modal-window", role: "dialog", "aria-modal": "true" }, [
55
56
  DOM.tag("div", { class: "modal-header" }, [
56
- options.title ? DOM.tag("div", { class: "modal-title" }, options.title) : null,
57
+ // the title is host data — text, not markup (see textTag)
58
+ options.title ? textTag("div", { class: "modal-title" }, options.title) : null,
57
59
  DOM.tag(
58
60
  "button",
59
61
  { type: "button", class: "modal-close", title: "Закрыть", command: MODAL_CLOSE_COMMAND },
package/source/utils/text.ts ADDED
@@ -0,0 +1,20 @@
1
+ import { DOM, type ElementOptions } from "@brandup/ui";
2
+
3
+ /**
4
+ * Creates an element holding `text` as text, never as markup.
5
+ *
6
+ * A string child of `DOM.tag` is inserted as HTML — that is how svg icons reach buttons. Anything
7
+ * coming from the user or from the host markup (message text, variable names and keys, window
8
+ * titles) must go through here instead: otherwise an `<img onerror>` typed into a field would
9
+ * execute once it is shown back.
10
+ */
11
+ export function textTag<T extends keyof HTMLElementTagNameMap>(
12
+ tagName: T,
13
+ options: ElementOptions | null,
14
+ text: string
15
+ ): HTMLElementTagNameMap[T] {
16
+ const elem = DOM.tag(tagName, options);
17
+ elem.textContent = text;
18
+
19
+ return elem;
20
+ }