chuijs 4.0.2 → 4.0.4

package/framework/components/chui_json_editor/json_editor.js

@@ -1,16 +1,16 @@
-const {setStyles} = require("../../modules/chui_functions");
-const {Validate} = require("../../modules/chui_validate/chui_validate");
-const {Json} = require("../../modules/chui_json/chui_json");
-const {RovingKeyboard} = require("../../modules/chui_a11y/chui_a11y");
-const {CodeEditor} = require("../chui_code_editor/code_editor");
-const {JsonViewer} = require("../chui_json_viewer/json_viewer");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
+const { setStyles } = require("../../modules/chui_functions");
+const { Validate } = require("../../modules/chui_validate/chui_validate");
+const { Json } = require("../../modules/chui_json/chui_json");
+const { RovingKeyboard } = require("../../modules/chui_a11y/chui_a11y");
+const { CodeEditor } = require("../chui_code_editor/code_editor");
+const { JsonViewer } = require("../chui_json_viewer/json_viewer");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /** Кнопки панели: ключ подписи, ключ подсказки и действие */
 const ACTIONS = [
-    {id: "format", labelKey: "jsonEditor.format", hintKey: "jsonEditor.formatHint"},
-    {id: "minify", labelKey: "jsonEditor.minify", hintKey: "jsonEditor.minifyHint"},
-    {id: "check", labelKey: "jsonEditor.check", hintKey: "jsonEditor.checkHint"}
+    { id: "format", labelKey: "jsonEditor.format", hintKey: "jsonEditor.formatHint" },
+    { id: "minify", labelKey: "jsonEditor.minify", hintKey: "jsonEditor.minifyHint" },
+    { id: "check", labelKey: "jsonEditor.check", hintKey: "jsonEditor.checkHint" },
 ];
 
 /**
@@ -54,64 +54,66 @@ 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;
-
-    constructor(options = {
-        id: String(),
-        name: String(),
-        title: String(),
-        label: String(),
-        hint: String(),
-        value: String(),
-        data: undefined,
-        height: String(),
-        width: String(),
-        indent: Number(),
-        toolbar: Boolean(),
-        preview: Boolean(),
-        maxLength: Number(),
-        disabled: Boolean(),
-        readOnly: Boolean(),
-        required: Boolean(),
-        messages: Object(),
-        changeListener: undefined,
-        onChange: undefined
-    }) {
+    #onChange = undefined;
+    #notifyPaused = false;
+
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            label: String(),
+            hint: String(),
+            value: String(),
+            data: undefined,
+            height: String(),
+            width: String(),
+            indent: Number(),
+            toolbar: Boolean(),
+            preview: Boolean(),
+            maxLength: Number(),
+            disabled: Boolean(),
+            readOnly: Boolean(),
+            required: Boolean(),
+            messages: Object(),
+            changeListener: undefined,
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_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;
@@ -120,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";
@@ -136,28 +138,28 @@ 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};
+                if (result.rule === "validate") return { valid: false, rule: "json", message: result.message };
                 return result;
             }
             const text = this.getValue();
@@ -165,11 +167,11 @@ class JsonEditor {
             if (text.trim() === "") return result;
             const state = Json.parse(text);
             if (state.ok) return result;
-            return {valid: false, rule: "json", message: Json.errorText(state.error)};
+            return { valid: false, rule: "json", message: Json.errorText(state.error) };
         };
         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);
     }
 
@@ -183,11 +185,11 @@ class JsonEditor {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     /** Текст JSON как есть */
@@ -203,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() {
@@ -217,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() {
@@ -241,7 +243,7 @@ class JsonEditor {
     }
 
     isReadOnly() {
-        return this.#read_only;
+        return this.#readOnly;
     }
 
     getDisabled() {
@@ -277,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;
@@ -292,7 +294,7 @@ class JsonEditor {
 
     /** Имя поля, когда подписи в разметке нет */
     setLabel(text = undefined) {
-        this.#label_text = text;
+        this.#labelText = text;
         this.#syncLabel();
         return this;
     }
@@ -314,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;
     }
@@ -329,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;
     }
@@ -363,27 +365,32 @@ 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("aria-label", this.#preview_on ? I18n.t("jsonEditor.showText") : I18n.t("jsonEditor.showTree"));
-            this.#tree_button.innerText = this.#preview_on ? I18n.t("jsonEditor.textShort") : I18n.t("jsonEditor.treeShort");
+        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.#previewOn ? I18n.t("jsonEditor.showText") : I18n.t("jsonEditor.showTree")
+            );
+            this.#treeButton.innerText = this.#previewOn
+                ? I18n.t("jsonEditor.textShort")
+                : I18n.t("jsonEditor.treeShort");
         }
         return this;
     }
 
     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;
     }
 
@@ -406,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;
     }
@@ -432,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;
     }
@@ -450,7 +457,7 @@ class JsonEditor {
             value: "",
             height: this.#height,
             lineNumbers: true,
-            onChange: () => this.#onInput()
+            onChange: () => this.#onInput(),
         });
         this.#editor.setLabel(this.#accessibleName());
         const area = this.#editor.getTextArea();
@@ -473,20 +480,20 @@ 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"});
+        new RovingKeyboard(this.#toolbar, { itemSelector: "button" });
         return this;
     }
 
@@ -498,18 +505,18 @@ class JsonEditor {
         }
         this.#viewer = new JsonViewer({
             id: `${this.#id}_tree`,
-            label: I18n.t("jsonEditor.treeLabel", {name: this.#accessibleName()}),
+            label: I18n.t("jsonEditor.treeLabel", { name: this.#accessibleName() }),
             value: this.getParsed(),
-            emptyText: I18n.t("jsonEditor.unparsed")
+            emptyText: I18n.t("jsonEditor.unparsed"),
         });
         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();
@@ -541,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;
     }
 
@@ -576,25 +583,26 @@ 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) this.#viewer.setLabel(I18n.t("jsonEditor.treeLabel", {name: this.#accessibleName()}));
+        if (this.#viewer !== undefined)
+            this.#viewer.setLabel(I18n.t("jsonEditor.treeLabel", { name: this.#accessibleName() }));
         return this;
     }
 
     #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;
     }
 
@@ -609,13 +617,15 @@ 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") : Json.errorText(state.error);
+            : state.ok
+              ? I18n.t("jsonEditor.correct")
+              : Json.errorText(state.error);
         this.#syncCount();
         if (this.#viewer !== undefined && this.#viewer.set().hidden === false) this.#viewer.setValue(this.#parsed);
         return this;
@@ -629,15 +639,15 @@ 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();
     };
 }
 
-exports.JsonEditor = JsonEditor
+exports.JsonEditor = JsonEditor;

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);
 }