chuijs 4.0.3 → 4.0.4

package/framework/components/chui_inputs/chui_toggle/styles.css

@@ -3,7 +3,7 @@
     width: 50px;
     height: 25px;
     border-radius: var(--radius_pill);
-    margin: var(--margin);
+    margin: var(--block_margin);
     background: var(--element_background);
     border: none;
     box-shadow: 0 0 1px 0 var(--border_color);
@@ -51,8 +51,15 @@
     bottom: 5px;
     border-radius: var(--radius_circle);
     background-color: var(--text_color_hover);
-    /* Тень как у бегунка ползунка: поднятая белая деталь на дорожке */
-    box-shadow: 0 1px 3px rgb(0 0 0 / 16%);
+    /* Тень как у бегунка ползунка: поднятая белая деталь на дорожке — общий ключ
+       контролов */
+    box-shadow: var(--box_shadow_control);
+    /* Ручка едет пружиной: лёгкий перелёт читается как щелчок переключателя.
+       Свой список перехода заменяет общий, поэтому цвет и тень перечислены рядом */
+    transition:
+        transform var(--motion_base) var(--motion_spring),
+        background-color var(--motion_fast) var(--motion_ease),
+        box-shadow var(--motion_fast) var(--motion_ease);
 }
 
 input:checked + .slider:before {

package/framework/components/chui_inputs/chui_toggle/toggle.js

@@ -2,21 +2,21 @@ const { Validate } = require("../../../modules/chui_validate/chui_validate");
 
 class Toggle {
     #Toggle = document.createElement("label");
-    #toggle_span = document.createElement("span");
-    #toggle_input = document.createElement("input");
+    #toggleSpan = document.createElement("span");
+    #toggleInput = document.createElement("input");
     #label = undefined;
     constructor(options = { label: String(), name: String(), value: Boolean(), disabled: Boolean() }) {
         // Валидация: required для переключателя — «должен быть включён»
-        Validate.installField(this, options, this.#Toggle, undefined, () => this.#toggle_input.checked);
+        Validate.installField(this, options, this.#Toggle, undefined, () => this.#toggleInput.checked);
         require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Toggle");
         this.#Toggle.className = "switch";
-        this.#toggle_input.type = "checkbox";
-        this.#toggle_span.className = "slider round";
-        if (options.name !== undefined) this.#toggle_input.name = options.name;
+        this.#toggleInput.type = "checkbox";
+        this.#toggleSpan.className = "slider round";
+        if (options.name !== undefined) this.#toggleInput.name = options.name;
         // В разметке переключателя нет текста, поэтому подпись уходит в aria-label
         this.setLabel(options.label);
-        this.#Toggle.appendChild(this.#toggle_input);
-        this.#Toggle.appendChild(this.#toggle_span);
+        this.#Toggle.appendChild(this.#toggleInput);
+        this.#Toggle.appendChild(this.#toggleSpan);
         if (options.value !== undefined) this.setValue(options.value === true);
         if (options.disabled !== undefined) this.setDisabled(options.disabled === true);
     }
@@ -30,7 +30,7 @@ class Toggle {
         this.#Toggle.id = id;
     }
     getName() {
-        return this.#toggle_input.name;
+        return this.#toggleInput.name;
     }
     /** Подпись для скринридера: в самой разметке переключателя текста нет */
     getLabel() {
@@ -38,26 +38,26 @@ class Toggle {
     }
     setLabel(label = String()) {
         this.#label = label === undefined || label === "" ? undefined : label;
-        if (this.#label === undefined) this.#toggle_input.removeAttribute("aria-label");
-        else this.#toggle_input.setAttribute("aria-label", this.#label);
+        if (this.#label === undefined) this.#toggleInput.removeAttribute("aria-label");
+        else this.#toggleInput.setAttribute("aria-label", this.#label);
         return this;
     }
     getDisabled() {
-        return this.#toggle_input.disabled;
+        return this.#toggleInput.disabled;
     }
     setDisabled(boolean = Boolean()) {
-        this.#toggle_input.disabled = boolean;
+        this.#toggleInput.disabled = boolean;
         this.#Toggle.classList.toggle("switch_disabled", boolean);
         return this;
     }
     addChangeListener(listener) {
-        this.#toggle_input.addEventListener("change", listener);
+        this.#toggleInput.addEventListener("change", listener);
     }
     getValue() {
-        return this.#toggle_input.checked;
+        return this.#toggleInput.checked;
     }
     setValue(boolean) {
-        this.#toggle_input.checked = boolean;
+        this.#toggleInput.checked = boolean;
     }
     set() {
         return this.#Toggle;

package/framework/components/chui_json_editor/json_editor.js

@@ -54,32 +54,32 @@ class JsonEditor {
     #panes = document.createElement("json_editor_panes");
     #editor = undefined;
     #viewer = undefined;
-    #tree_button = undefined;
+    #treeButton = undefined;
     #actions = new Map();
     #state = document.createElement("json_editor_state");
-    #parse_line = document.createElement("json_editor_parse");
+    #parseLine = document.createElement("json_editor_parse");
     #count = document.createElement("json_editor_count");
     #hint = document.createElement("json_editor_hint");
     #status = document.createElement("json_editor_status");
     #error = document.createElement("chui_error_message");
     #id = undefined;
     #name = undefined;
-    #title_text = undefined;
-    #label_text = undefined;
+    #titleText = undefined;
+    #labelText = undefined;
     #indent = 4;
-    #preview_enabled = false;
-    #preview_on = false;
-    #max_length = undefined;
+    #previewEnabled = false;
+    #previewOn = false;
+    #maxLength = undefined;
     #width = undefined;
     #height = "260px";
     #disabled = false;
-    #read_only = false;
-    #toolbar_shown = true;
+    #readOnly = false;
+    #toolbarShown = true;
     #parsed = undefined;
-    #error_object = undefined;
+    #errorObject = undefined;
     #listeners = [];
-    #on_change = undefined;
-    #notify_paused = false;
+    #onChange = undefined;
+    #notifyPaused = false;
 
     constructor(
         options = {
@@ -108,12 +108,12 @@ class JsonEditor {
         JsonEditor.#counter += 1;
         this.#id = options.id === undefined ? `chui_json_editor_${JsonEditor.#counter}` : options.id;
         this.#name = options.name;
-        this.#label_text = options.label;
-        this.#on_change = options.onChange;
+        this.#labelText = options.label;
+        this.#onChange = options.onChange;
         this.#indent = options.indent === undefined ? 4 : Number(options.indent);
-        this.#preview_enabled = options.preview === true;
-        this.#toolbar_shown = options.toolbar !== false;
-        this.#max_length = options.maxLength === undefined ? undefined : Number(options.maxLength);
+        this.#previewEnabled = options.preview === true;
+        this.#toolbarShown = options.toolbar !== false;
+        this.#maxLength = options.maxLength === undefined ? undefined : Number(options.maxLength);
         this.#root.id = this.#id;
         this.#label.className = "json_editor_label";
         this.#label.hidden = true;
@@ -122,7 +122,7 @@ class JsonEditor {
         this.#toolbar.setAttribute("aria-label", I18n.t("jsonEditor.actions"));
         this.#panes.className = "json_editor_panes";
         this.#state.className = "json_editor_state";
-        this.#parse_line.className = "json_editor_parse";
+        this.#parseLine.className = "json_editor_parse";
         this.#count.className = "json_editor_count";
         this.#count.setAttribute("aria-hidden", "true");
         this.#hint.className = "json_editor_hint";
@@ -138,26 +138,26 @@ class JsonEditor {
         this.#root.appendChild(this.#toolbar);
         this.#root.appendChild(this.#panes);
         // Состояние разбора и счётчик знаков — одна строка под полем
-        this.#state.appendChild(this.#parse_line);
+        this.#state.appendChild(this.#parseLine);
         this.#state.appendChild(this.#count);
         this.#root.appendChild(this.#state);
         this.#root.appendChild(this.#hint);
         this.#root.appendChild(this.#status);
         if (options.title !== undefined) this.setTitle(options.title);
-        this.setLabel(this.#label_text === undefined ? I18n.t("jsonEditor.text") : this.#label_text);
+        this.setLabel(this.#labelText === undefined ? I18n.t("jsonEditor.text") : this.#labelText);
         if (options.hint !== undefined) this.setHint(options.hint);
         if (options.width !== undefined) this.setWidth(options.width);
         this.setHeight(options.height === undefined ? this.#height : options.height);
         if (options.data !== undefined) this.setData(options.data);
         else this.setValue(options.value === undefined ? "" : options.value);
         Validate.installField(this, options, this.#root, this.#error, () => this.getValue(), this.#panes);
-        const base_validate = this.validate;
+        const baseValidate = this.validate;
         // Разбор JSON — обязательное правило поля: неразобранный текст не проходит проверку,
         // даже если своих правил у поля нет. Правило называется `json`, чтобы по имени было
         // видно причину, а правила формы и своё правило из опций при этом сохраняются
         // (своё правило из опций тоже приходит сюда как `validate` — и тоже зовётся `json`)
         this.validate = () => {
-            const result = base_validate();
+            const result = baseValidate();
             if (result.valid === false) {
                 if (result.rule === "validate") return { valid: false, rule: "json", message: result.message };
                 return result;
@@ -171,7 +171,7 @@ class JsonEditor {
         };
         this.setReadOnly(options.readOnly === true);
         this.setDisabled(options.disabled === true);
-        this.setToolbar(this.#toolbar_shown);
+        this.setToolbar(this.#toolbarShown);
         if (options.changeListener !== undefined) this.addChangeListener(options.changeListener);
     }
 
@@ -185,11 +185,11 @@ class JsonEditor {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     /** Текст JSON как есть */
@@ -205,13 +205,13 @@ class JsonEditor {
 
     /** Место ошибки разбора: `{line, column, offset}` или `undefined` (у ошибки может не быть места) */
     getErrorPlace() {
-        if (this.#error_object === undefined || this.#error_object.offset === undefined) return undefined;
-        return { line: this.#error_object.line, column: this.#error_object.column, offset: this.#error_object.offset };
+        if (this.#errorObject === undefined || this.#errorObject.offset === undefined) return undefined;
+        return { line: this.#errorObject.line, column: this.#errorObject.column, offset: this.#errorObject.offset };
     }
 
     /** Текст ошибки разбора словами (пустая строка, если разбор прошёл) */
     getErrorText() {
-        return Json.errorText(this.#error_object);
+        return Json.errorText(this.#errorObject);
     }
 
     isValid() {
@@ -219,15 +219,15 @@ class JsonEditor {
     }
 
     isPreview() {
-        return this.#preview_on;
+        return this.#previewOn;
     }
 
     isPreviewEnabled() {
-        return this.#preview_enabled;
+        return this.#previewEnabled;
     }
 
     getMaxLength() {
-        return this.#max_length;
+        return this.#maxLength;
     }
 
     getHeight() {
@@ -243,7 +243,7 @@ class JsonEditor {
     }
 
     isReadOnly() {
-        return this.#read_only;
+        return this.#readOnly;
     }
 
     getDisabled() {
@@ -279,7 +279,7 @@ class JsonEditor {
     }
 
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#label.innerText = "";
             this.#label.hidden = true;
@@ -294,7 +294,7 @@ class JsonEditor {
 
     /** Имя поля, когда подписи в разметке нет */
     setLabel(text = undefined) {
-        this.#label_text = text;
+        this.#labelText = text;
         this.#syncLabel();
         return this;
     }
@@ -316,10 +316,10 @@ class JsonEditor {
     setValue(value = String(), silent = false) {
         const text = value === undefined || value === null ? "" : String(value);
         // В тихом режиме (так зовёт Form.setValues) слишком длинный текст не подставляем
-        if (silent === true && this.#max_length !== undefined && text.length > this.#max_length) return this;
-        this.#notify_paused = true;
+        if (silent === true && this.#maxLength !== undefined && text.length > this.#maxLength) return this;
+        this.#notifyPaused = true;
         this.#editor.setValue(text);
-        this.#notify_paused = false;
+        this.#notifyPaused = false;
         this.#refresh();
         return this;
     }
@@ -331,9 +331,9 @@ class JsonEditor {
 
     /** Очистка для форм */
     clear() {
-        this.#notify_paused = true;
+        this.#notifyPaused = true;
         this.#editor.setValue("");
-        this.#notify_paused = false;
+        this.#notifyPaused = false;
         this.#refresh();
         return this;
     }
@@ -365,18 +365,18 @@ class JsonEditor {
 
     /** Предпросмотр деревом (`JsonViewer`) вместо поля */
     setPreview(on = Boolean()) {
-        if (!this.#preview_enabled) return this;
-        this.#preview_on = on === true;
-        if (this.#preview_on) this.#buildViewer();
-        this.#editor.set().hidden = this.#preview_on;
-        if (this.#viewer !== undefined) this.#viewer.set().hidden = !this.#preview_on;
-        if (this.#tree_button !== undefined) {
-            this.#tree_button.setAttribute("aria-pressed", this.#preview_on ? "true" : "false");
-            this.#tree_button.setAttribute(
+        if (!this.#previewEnabled) return this;
+        this.#previewOn = on === true;
+        if (this.#previewOn) this.#buildViewer();
+        this.#editor.set().hidden = this.#previewOn;
+        if (this.#viewer !== undefined) this.#viewer.set().hidden = !this.#previewOn;
+        if (this.#treeButton !== undefined) {
+            this.#treeButton.setAttribute("aria-pressed", this.#previewOn ? "true" : "false");
+            this.#treeButton.setAttribute(
                 "aria-label",
-                this.#preview_on ? I18n.t("jsonEditor.showText") : I18n.t("jsonEditor.showTree")
+                this.#previewOn ? I18n.t("jsonEditor.showText") : I18n.t("jsonEditor.showTree")
             );
-            this.#tree_button.innerText = this.#preview_on
+            this.#treeButton.innerText = this.#previewOn
                 ? I18n.t("jsonEditor.textShort")
                 : I18n.t("jsonEditor.treeShort");
         }
@@ -384,13 +384,13 @@ class JsonEditor {
     }
 
     togglePreview() {
-        return this.setPreview(!this.#preview_on);
+        return this.setPreview(!this.#previewOn);
     }
 
     /** Панель действий: `false` её убирает, поле остаётся полем */
     setToolbar(shown = Boolean()) {
-        this.#toolbar_shown = shown !== false;
-        this.#toolbar.hidden = !this.#toolbar_shown;
+        this.#toolbarShown = shown !== false;
+        this.#toolbar.hidden = !this.#toolbarShown;
         return this;
     }
 
@@ -413,10 +413,10 @@ class JsonEditor {
         return this;
     }
 
-    setReadOnly(read_only = Boolean()) {
-        this.#read_only = read_only === true;
-        this.#root.classList.toggle("json_editor_readonly", this.#read_only);
-        this.#editor.setReadOnly(this.#read_only);
+    setReadOnly(readOnly = Boolean()) {
+        this.#readOnly = readOnly === true;
+        this.#root.classList.toggle("json_editor_readonly", this.#readOnly);
+        this.#editor.setReadOnly(this.#readOnly);
         this.#actionState();
         return this;
     }
@@ -439,7 +439,7 @@ class JsonEditor {
     /** Фокус в поле (из предпросмотра поле возвращается) */
     focus() {
         if (this.#disabled) return this;
-        if (this.#preview_on) this.setPreview(false);
+        if (this.#previewOn) this.setPreview(false);
         this.#editor.focus();
         return this;
     }
@@ -480,17 +480,17 @@ class JsonEditor {
             this.#actions.set(action.id, button);
             this.#toolbar.appendChild(button);
         }
-        if (this.#preview_enabled) {
-            this.#tree_button = document.createElement("button");
-            this.#tree_button.type = "button";
-            this.#tree_button.className = "json_editor_action json_editor_tree";
-            this.#tree_button.setAttribute("aria-pressed", "false");
-            this.#tree_button.setAttribute("aria-label", I18n.t("jsonEditor.showTree"));
+        if (this.#previewEnabled) {
+            this.#treeButton = document.createElement("button");
+            this.#treeButton.type = "button";
+            this.#treeButton.className = "json_editor_action json_editor_tree";
+            this.#treeButton.setAttribute("aria-pressed", "false");
+            this.#treeButton.setAttribute("aria-label", I18n.t("jsonEditor.showTree"));
             // `aria-controls` появится в `#buildViewer()`: до первого показа дерева узла
             // нет, а ссылка на несуществующий id — висячая
-            this.#tree_button.innerText = I18n.t("jsonEditor.treeShort");
-            this.#tree_button.addEventListener("click", () => this.togglePreview());
-            this.#toolbar.appendChild(this.#tree_button);
+            this.#treeButton.innerText = I18n.t("jsonEditor.treeShort");
+            this.#treeButton.addEventListener("click", () => this.togglePreview());
+            this.#toolbar.appendChild(this.#treeButton);
         }
         // Панель — одна остановка обхода: по кнопкам ходят стрелки/Home/End
         new RovingKeyboard(this.#toolbar, { itemSelector: "button" });
@@ -511,12 +511,12 @@ class JsonEditor {
         });
         this.#viewer.set().hidden = true;
         this.#panes.appendChild(this.#viewer.set());
-        this.#tree_button.setAttribute("aria-controls", this.#viewer.getId());
+        this.#treeButton.setAttribute("aria-controls", this.#viewer.getId());
         return this;
     }
 
     #runAction(id = String()) {
-        if (this.#disabled || this.#read_only) return this;
+        if (this.#disabled || this.#readOnly) return this;
         if (id === "format") this.format();
         else if (id === "minify") this.minify();
         else if (id === "check") this.check();
@@ -548,17 +548,17 @@ class JsonEditor {
     }
 
     #refuseAction(error = Object()) {
-        this.#error_object = error;
-        this.#parse_line.classList.add("json_editor_parse_error");
-        this.#parse_line.innerText = Json.errorText(error);
+        this.#errorObject = error;
+        this.#parseLine.classList.add("json_editor_parse_error");
+        this.#parseLine.innerText = Json.errorText(error);
         this.#announce(Json.errorText(error));
         return this;
     }
 
     #actionState() {
-        const off = this.#disabled || this.#read_only;
+        const off = this.#disabled || this.#readOnly;
         for (const button of this.#actions.values()) button.disabled = off;
-        if (this.#tree_button !== undefined) this.#tree_button.disabled = this.#disabled;
+        if (this.#treeButton !== undefined) this.#treeButton.disabled = this.#disabled;
         return this;
     }
 
@@ -583,7 +583,7 @@ class JsonEditor {
         area.id = `${this.#id}_input`;
         // Подпись — настоящий <label>: связь с полем держим всегда, а видимость — по подписи
         this.#label.setAttribute("for", area.id);
-        if (this.#title_text !== undefined && this.#title_text !== "") area.removeAttribute("aria-label");
+        if (this.#titleText !== undefined && this.#titleText !== "") area.removeAttribute("aria-label");
         else area.setAttribute("aria-label", this.#accessibleName());
         this.#syncDescribedBy();
         if (this.#viewer !== undefined)
@@ -592,17 +592,17 @@ class JsonEditor {
     }
 
     #accessibleName() {
-        if (this.#title_text !== undefined && this.#title_text !== "") return this.#title_text;
-        if (this.#label_text !== undefined && this.#label_text !== "") return this.#label_text;
+        if (this.#titleText !== undefined && this.#titleText !== "") return this.#titleText;
+        if (this.#labelText !== undefined && this.#labelText !== "") return this.#labelText;
         return I18n.t("jsonEditor.text");
     }
 
     #syncCount() {
-        const has_limit = this.#max_length !== undefined;
-        this.#count.hidden = !has_limit;
-        if (!has_limit) return this;
-        this.#count.innerText = `${this.getValue().length} / ${this.#max_length}`;
-        this.#count.classList.toggle("json_editor_count_over", this.getValue().length > this.#max_length);
+        const hasLimit = this.#maxLength !== undefined;
+        this.#count.hidden = !hasLimit;
+        if (!hasLimit) return this;
+        this.#count.innerText = `${this.getValue().length} / ${this.#maxLength}`;
+        this.#count.classList.toggle("json_editor_count_over", this.getValue().length > this.#maxLength);
         return this;
     }
 
@@ -617,11 +617,11 @@ class JsonEditor {
         const state = Json.parse(text);
         // Пустое поле — не ошибка разбора (так же считает и `validate` ниже): `JSON.parse("")`
         // бросает исключение, но показывать его как ошибку нельзя — поле просто пустое
-        this.#error_object = state.ok || blank ? undefined : state.error;
+        this.#errorObject = state.ok || blank ? undefined : state.error;
         this.#parsed = state.ok ? state.value : undefined;
-        this.#parse_line.classList.toggle("json_editor_parse_error", !state.ok && blank === false);
-        this.#parse_line.classList.toggle("json_editor_parse_ok", state.ok && blank === false);
-        this.#parse_line.innerText = blank
+        this.#parseLine.classList.toggle("json_editor_parse_error", !state.ok && blank === false);
+        this.#parseLine.classList.toggle("json_editor_parse_ok", state.ok && blank === false);
+        this.#parseLine.innerText = blank
             ? I18n.t("jsonEditor.empty")
             : state.ok
               ? I18n.t("jsonEditor.correct")
@@ -639,13 +639,13 @@ class JsonEditor {
     #notify() {
         const value = this.getValue();
         for (const listener of [...this.#listeners]) listener(value, this);
-        if (this.#on_change !== undefined) this.#on_change(value, this);
+        if (this.#onChange !== undefined) this.#onChange(value, this);
         return this;
     }
 
     #onInput = () => {
         this.#refresh();
-        if (this.#notify_paused) return;
+        if (this.#notifyPaused) return;
         this.#notify();
     };
 }

package/framework/components/chui_json_editor/styles.css

@@ -8,14 +8,14 @@ chui_json_editor {
     width: -webkit-fill-available;
     max-width: 100%;
     height: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
 }
 
 .json_editor_label {
     display: block;
     width: max-content;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_labels_size);
     font-weight: 500;
@@ -34,7 +34,7 @@ chui_json_editor {
     padding: 4px;
     border: 1px solid var(--border_color);
     border-bottom: none;
-    border-radius: var(--border_radius) var(--border_radius) 0 0;
+    border-radius: var(--radius_sm) var(--radius_sm) 0 0;
     background: var(--element_background_2);
 }
 
@@ -44,7 +44,7 @@ chui_json_editor {
 
 /* Скрытая панель не оставляет углов: поле занимает всю рамку само */
 .json_editor_toolbar[hidden] + .json_editor_panes {
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
 }
 
 .json_editor_action {
@@ -91,7 +91,7 @@ chui_json_editor {
     box-sizing: border-box;
     overflow: hidden;
     border: 1px solid var(--border_color);
-    border-radius: 0 0 var(--border_radius) var(--border_radius);
+    border-radius: 0 0 var(--radius_sm) var(--radius_sm);
     background: var(--element_background);
 }