chuijs 4.0.2 → 4.0.4

package/framework/components/chui_file_explorer/styles.css

@@ -7,14 +7,14 @@ chui_file_explorer {
     box-sizing: border-box;
     width: -webkit-fill-available;
     max-width: 100%;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
 }
 
 .file_explorer_title {
     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;
@@ -57,7 +57,7 @@ chui_file_explorer {
     margin: 0;
     padding: 0;
     border: none;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: transparent;
     color: var(--text_color);
     cursor: pointer;
@@ -108,9 +108,10 @@ chui_file_explorer {
     height: var(--control_height);
     margin: 0;
     /* Место под кнопку очистки, чтобы текст не заезжал под неё */
-    padding-block: 0 0; padding-inline: 12px 40px;
+    padding-block: 0 0;
+    padding-inline: 12px 40px;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     color: var(--text_color);
     font-family: inherit;
@@ -183,7 +184,7 @@ chui_file_explorer {
     max-width: 100%;
     overflow: hidden;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
 }
 
@@ -361,7 +362,7 @@ file_explorer_name {
 .file_explorer_error {
     padding: 10px 12px;
     border: 1px solid var(--badge_error_text);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     color: var(--badge_error_text);
     font-size: var(--font_labels_size);
 }

package/framework/components/chui_form/form.js

@@ -1,33 +1,35 @@
-const {Button} = require("../chui_button/button");
+const { Button } = require("../chui_button/button");
 
 class Form {
     #id = require("randomstring").generate();
-    #chui_form_main = document.createElement("chui_form_main")
-    #form = document.createElement("form")
+    #chuiFormMain = document.createElement("chui_form_main");
+    #form = document.createElement("form");
     #components = [];
-    #submit_event = undefined;
-    #validate_on_submit = true;
-    constructor(options = {
-        action: String(),
-        method: String(),
-        components: [],
-        submitEvent: () => {},
-        validateOnSubmit: Boolean()
-    }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Forms');
-        this.#chui_form_main.id = this.#id;
-        this.#chui_form_main.appendChild(this.#form);
+    #submitEvent = undefined;
+    #validateOnSubmit = true;
+    constructor(
+        options = {
+            action: String(),
+            method: String(),
+            components: [],
+            submitEvent: () => {},
+            validateOnSubmit: Boolean(),
+        }
+    ) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Forms");
+        this.#chuiFormMain.id = this.#id;
+        this.#chuiFormMain.appendChild(this.#form);
 
         // Установка компонентов в форму (частичный объект опций без components — пустая форма)
         this.#components = Array.isArray(options.components) ? options.components : [];
-        for (let component of this.#components) this.#form.appendChild(component.set());
+        for (const component of this.#components) this.#form.appendChild(component.set());
         // ===
 
         //Установка опций
         if (options.action) this.#form.action = options.action;
         if (options.method) this.#form.method = options.method;
-        if (options.validateOnSubmit !== undefined) this.#validate_on_submit = options.validateOnSubmit;
-        this.#submit_event = options.submitEvent;
+        if (options.validateOnSubmit !== undefined) this.#validateOnSubmit = options.validateOnSubmit;
+        this.#submitEvent = options.submitEvent;
         // Своя валидация вместо нативной: свои тексты ошибок и разметка
         this.#form.setAttribute("novalidate", "true");
         this.#form.addEventListener("submit", this.#onSubmit);
@@ -35,15 +37,15 @@ class Form {
     }
     #onSubmit = (event) => {
         event.preventDefault();
-        if (this.#validate_on_submit) {
+        if (this.#validateOnSubmit) {
             const result = this.validate();
             if (!result.valid) {
                 if (result.first !== undefined && typeof result.first.focus === "function") result.first.focus();
                 return;
             }
         }
-        if (this.#submit_event !== undefined) this.#submit_event(event, this.getValues(), this);
-    }
+        if (this.#submitEvent !== undefined) this.#submitEvent(event, this.getValues(), this);
+    };
     /** Проверить все поля формы: сами ошибки выставляются в поля */
     validate() {
         this.clearErrors();
@@ -54,7 +56,11 @@ class Form {
             const result = field.validate();
             if (!result.valid) {
                 if (typeof field.setError === "function") field.setError(result.message);
-                errors.push({ name: typeof field.getName === "function" ? field.getName() : undefined, message: result.message, rule: result.rule });
+                errors.push({
+                    name: typeof field.getName === "function" ? field.getName() : undefined,
+                    message: result.message,
+                    rule: result.rule,
+                });
                 if (first === undefined && typeof field.focus === "function") first = field;
             }
         }
@@ -111,9 +117,13 @@ class Form {
         return this;
     }
     //addSubmitEvent(listener = () => {}) { this.#form.addEventListener("submit", listener); }
-    set() { return this.#chui_form_main }
-    static SubmitButton(title = String()) { return new SubmitButton(title); }
-    static METHOD = { GET: "GET", POST: "POST" }
+    set() {
+        return this.#chuiFormMain;
+    }
+    static SubmitButton(title = String()) {
+        return new SubmitButton(title);
+    }
+    static METHOD = { GET: "GET", POST: "POST" };
 }
 
 /**
@@ -127,9 +137,11 @@ class Form {
 class SubmitButton {
     #button = undefined;
     constructor(title = String()) {
-        this.#button = new Button({title: title});
+        this.#button = new Button({ title: title });
+    }
+    set() {
+        return this.#button.set();
     }
-    set() { return this.#button.set(); }
 }
 
-exports.Form = Form
+exports.Form = Form;

package/framework/components/chui_form/styles.css

@@ -3,4 +3,4 @@ chui_form_main {
 }
 
 /* Своих правил для кнопки отправки нет: `SubmitButton` — это `Button`, у него вид
-   и состояния из framework/components/chui_button/styles.css */
+   и состояния из framework/components/chui_button/styles.css */

package/framework/components/chui_gantt/gantt.js

@@ -1,5 +1,5 @@
-const {setStyles, optionOr} = require('../../modules/chui_functions');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 /**
  * Диаграмма Ганта: задачи полосами по шкале времени.
@@ -39,7 +39,7 @@ class Gantt {
     static SCALE = {
         DAY: "day",
         WEEK: "week",
-        MONTH: "month"
+        MONTH: "month",
     };
     static DEFAULT_ROW_HEIGHT = 30;
     static DEFAULT_BAR_HEIGHT = 18;
@@ -48,7 +48,7 @@ class Gantt {
 
     #root = document.createElement("chui_gantt");
     #corner = document.createElement("gantt_corner");
-    #scale_row = document.createElement("gantt_scale");
+    #scaleRow = document.createElement("gantt_scale");
     #scroll = document.createElement("gantt_scroll");
     #rows = document.createElement("gantt_rows");
     #links = undefined;
@@ -57,32 +57,34 @@ class Gantt {
     #from = undefined;
     #to = undefined;
     #scale = undefined;
-    #first_day = 1;
-    #row_height = Gantt.DEFAULT_ROW_HEIGHT;
-    #bar_height = Gantt.DEFAULT_BAR_HEIGHT;
-    #label_width = Gantt.DEFAULT_LABEL_WIDTH;
-    #show_progress = true;
-    #show_links = true;
+    #firstDay = 1;
+    #rowHeight = Gantt.DEFAULT_ROW_HEIGHT;
+    #barHeight = Gantt.DEFAULT_BAR_HEIGHT;
+    #labelWidth = Gantt.DEFAULT_LABEL_WIDTH;
+    #showProgress = true;
+    #showLinks = true;
     #label = undefined;
-    #on_task_click = undefined;
-    #rows_layout = [];
-
-    constructor(options = {
-        id: String(),
-        tasks: [],
-        from: undefined,
-        to: undefined,
-        scale: String(),
-        firstDay: Number(),
-        rowHeight: Number(),
-        barHeight: Number(),
-        labelWidth: Number(),
-        height: String(),
-        showProgress: Boolean(),
-        showLinks: Boolean(),
-        label: String(),
-        onTaskClick: undefined
-    }) {
+    #onTaskClick = undefined;
+    #rowsLayout = [];
+
+    constructor(
+        options = {
+            id: String(),
+            tasks: [],
+            from: undefined,
+            to: undefined,
+            scale: String(),
+            firstDay: Number(),
+            rowHeight: Number(),
+            barHeight: Number(),
+            labelWidth: Number(),
+            height: String(),
+            showProgress: Boolean(),
+            showLinks: Boolean(),
+            label: String(),
+            onTaskClick: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_Gantt");
         Gantt.#counter += 1;
         this.#id = options.id === undefined ? `chui_gantt_${Gantt.#counter}` : options.id;
@@ -92,28 +94,28 @@ class Gantt {
         this.#from = options.from;
         this.#to = options.to;
         this.#scale = Gantt.#knownScale(options.scale);
-        this.#first_day = options.firstDay === undefined ? this.#first_day : options.firstDay;
-        this.#row_height = options.rowHeight === undefined ? this.#row_height : options.rowHeight;
-        this.#bar_height = options.barHeight === undefined ? this.#bar_height : options.barHeight;
-        this.#label_width = options.labelWidth === undefined ? this.#label_width : options.labelWidth;
-        this.#show_progress = options.showProgress !== false;
-        this.#show_links = options.showLinks !== false;
-        this.#on_task_click = options.onTaskClick;
+        this.#firstDay = options.firstDay === undefined ? this.#firstDay : options.firstDay;
+        this.#rowHeight = options.rowHeight === undefined ? this.#rowHeight : options.rowHeight;
+        this.#barHeight = options.barHeight === undefined ? this.#barHeight : options.barHeight;
+        this.#labelWidth = options.labelWidth === undefined ? this.#labelWidth : options.labelWidth;
+        this.#showProgress = options.showProgress !== false;
+        this.#showLinks = options.showLinks !== false;
+        this.#onTaskClick = options.onTaskClick;
         this.setLabel(optionOr(options.label, I18n.t("gantt.title")));
         this.setHeight(options.height);
         this.#corner.innerText = I18n.t("gantt.task");
         this.#corner.setAttribute("aria-hidden", "true");
         const head = document.createElement("gantt_head");
         head.appendChild(this.#corner);
-        head.appendChild(this.#scale_row);
+        head.appendChild(this.#scaleRow);
         this.#root.appendChild(head);
         this.#rows.appendChild(this.#createLinks());
         this.#scroll.appendChild(this.#rows);
         this.#root.appendChild(this.#scroll);
         this.#root.addEventListener("click", this.#onClick);
-        this.setProperty("--gantt_label_width", `${this.#label_width}px`);
-        this.#root.style.setProperty("--gantt_row_height", `${this.#row_height}px`);
-        this.#root.style.setProperty("--gantt_bar_height", `${this.#bar_height}px`);
+        this.setProperty("--gantt_label_width", `${this.#labelWidth}px`);
+        this.#root.style.setProperty("--gantt_row_height", `${this.#rowHeight}px`);
+        this.#root.style.setProperty("--gantt_bar_height", `${this.#barHeight}px`);
         this.#render();
     }
 
@@ -134,7 +136,7 @@ class Gantt {
     /** Показанный период (начало и конец диапазона) */
     getRange() {
         const range = this.#period();
-        return {from: range.from, to: range.to};
+        return { from: range.from, to: range.to };
     }
 
     /** Шкала: заданная или выбранная по длине периода */
@@ -151,11 +153,11 @@ class Gantt {
     }
 
     getRowHeight() {
-        return this.#row_height;
+        return this.#rowHeight;
     }
 
     getLabelWidth() {
-        return this.#label_width;
+        return this.#labelWidth;
     }
 
     /** Полоса задачи на диаграмме (если задача показана) */
@@ -271,13 +273,20 @@ class Gantt {
         const ends = this.#tasks.map((task) => Gantt.#taskEnd(task)).filter((date) => date !== undefined);
         let from = Gantt.#toDate(this.#from);
         let to = Gantt.#toDate(this.#to);
-        if (from === undefined) from = starts.length === 0 ? Gantt.#startOfDay(new Date()) : new Date(Math.min(...starts.map((date) => date.getTime())));
+        if (from === undefined)
+            from =
+                starts.length === 0
+                    ? Gantt.#startOfDay(new Date())
+                    : new Date(Math.min(...starts.map((date) => date.getTime())));
         if (to === undefined) {
-            const last = ends.length === 0 ? new Date(from.getTime() + 86400000) : new Date(Math.max(...ends.map((date) => date.getTime())));
+            const last =
+                ends.length === 0
+                    ? new Date(from.getTime() + 86400000)
+                    : new Date(Math.max(...ends.map((date) => date.getTime())));
             to = last;
         }
         if (to <= from) to = new Date(from.getTime() + 86400000);
-        return {from: Gantt.#startOfDay(from), to: Gantt.#startOfDay(to)};
+        return { from: Gantt.#startOfDay(from), to: Gantt.#startOfDay(to) };
     }
 
     /** Начало колонки шкалы, в которую попадает дата */
@@ -286,7 +295,7 @@ class Gantt {
         if (scale === Gantt.SCALE.MONTH) return new Date(date.getFullYear(), date.getMonth(), 1);
         const day = Gantt.#startOfDay(date);
         if (scale === Gantt.SCALE.WEEK) {
-            const offset = (day.getDay() - this.#first_day + 7) % 7;
+            const offset = (day.getDay() - this.#firstDay + 7) % 7;
             day.setDate(day.getDate() - offset);
         }
         return day;
@@ -308,7 +317,7 @@ class Gantt {
         let cursor = new Date(start);
         while (cursor <= last && columns.length < 400) {
             const next = this.#nextColumnStart(cursor);
-            columns.push({from: new Date(cursor), to: next});
+            columns.push({ from: new Date(cursor), to: next });
             cursor = next;
         }
         return columns;
@@ -319,7 +328,7 @@ class Gantt {
         const columns = this.#columns();
         const first = columns[0];
         const last = columns[columns.length - 1];
-        return {from: first.from, to: last.to, columns: columns};
+        return { from: first.from, to: last.to, columns: columns };
     }
 
     /** Доля позиции даты в периоде (0…1) */
@@ -334,11 +343,11 @@ class Gantt {
         const scale = this.getScale();
         const bounds = this.#periodBounds();
         if (scale === Gantt.SCALE.MONTH) {
-            return `${bounds.from.toLocaleString(I18n.getLocale(), {month: "long", year: "numeric"})} – ${new Date(bounds.to.getTime() - 1).toLocaleString(I18n.getLocale(), {month: "long", year: "numeric"})}`;
+            return `${bounds.from.toLocaleString(I18n.getLocale(), { month: "long", year: "numeric" })} – ${new Date(bounds.to.getTime() - 1).toLocaleString(I18n.getLocale(), { month: "long", year: "numeric" })}`;
         }
         const last = new Date(bounds.to.getTime() - 1);
-        const until = last.toLocaleString(I18n.getLocale(), {day: "numeric", month: "long", year: "numeric"});
-        const from = bounds.from.toLocaleString(I18n.getLocale(), {day: "numeric", month: "long"});
+        const until = last.toLocaleString(I18n.getLocale(), { day: "numeric", month: "long", year: "numeric" });
+        const from = bounds.from.toLocaleString(I18n.getLocale(), { day: "numeric", month: "long" });
         return `${from} – ${until}`;
     }
 
@@ -352,36 +361,37 @@ class Gantt {
 
     #renderScale(bounds = Object()) {
         const scale = this.getScale();
-        this.#scale_row.innerHTML = "";
-        this.#scale_row.style.gridTemplateColumns = `repeat(${bounds.columns.length}, minmax(0, 1fr))`;
+        this.#scaleRow.innerHTML = "";
+        this.#scaleRow.style.gridTemplateColumns = `repeat(${bounds.columns.length}, minmax(0, 1fr))`;
         this.#root.style.setProperty("--gantt_columns", String(bounds.columns.length));
         const today = Gantt.#startOfDay(new Date());
         for (const column of bounds.columns) {
             const cell = document.createElement("gantt_scale_cell");
             const label = document.createElement("gantt_scale_label");
             if (scale === Gantt.SCALE.MONTH) {
-                label.innerText = column.from.toLocaleString(I18n.getLocale(), {month: "short"});
+                label.innerText = column.from.toLocaleString(I18n.getLocale(), { month: "short" });
             } else if (scale === Gantt.SCALE.WEEK) {
-                label.innerText = column.from.toLocaleString(I18n.getLocale(), {day: "numeric", month: "short"});
+                label.innerText = column.from.toLocaleString(I18n.getLocale(), { day: "numeric", month: "short" });
             } else {
                 label.innerText = `${column.from.getDate()}.${String(column.from.getMonth() + 1).padStart(2, "0")}`;
             }
             cell.appendChild(label);
             // Выходные подсвечиваем только на дневной шкале: на недельной и месячной колонка — не день
-            if (scale === Gantt.SCALE.DAY && (column.from.getDay() === 0 || column.from.getDay() === 6)) cell.classList.add("gantt_weekend");
+            if (scale === Gantt.SCALE.DAY && (column.from.getDay() === 0 || column.from.getDay() === 6))
+                cell.classList.add("gantt_weekend");
             if (today >= column.from && today < column.to) cell.classList.add("gantt_today_cell");
-            this.#scale_row.appendChild(cell);
+            this.#scaleRow.appendChild(cell);
         }
     }
 
     #renderRows(bounds = Object()) {
         // Заглушка "задач нет" тоже пересобирается: иначе она оставалась бы на диаграмме после setTasks()
         this.#rows.querySelectorAll("gantt_row, gantt_group_row, gantt_empty").forEach((row) => row.remove());
-        this.#rows_layout = [];
+        this.#rowsLayout = [];
         const today = Gantt.#startOfDay(new Date());
         const todayFraction = today >= bounds.from && today < bounds.to ? this.#fraction(today, bounds) : undefined;
         let lastGroup = undefined;
-        for (const [task_index, task] of this.#tasks.entries()) {
+        for (const [taskIndex, task] of this.#tasks.entries()) {
             if (task.group !== undefined && task.group !== lastGroup) {
                 lastGroup = task.group;
                 this.#rows.appendChild(this.#createGroupRow(task.group));
@@ -400,7 +410,7 @@ class Gantt {
             if (start !== undefined && end !== undefined && end > bounds.from && start < bounds.to) {
                 const left = this.#fraction(start, bounds);
                 const right = this.#fraction(end, bounds);
-                track.appendChild(this.#createBar(task, start, end, left, Math.max(0.02, right - left), task_index));
+                track.appendChild(this.#createBar(task, start, end, left, Math.max(0.02, right - left), taskIndex));
             }
             if (todayFraction !== undefined) {
                 const line = document.createElement("gantt_today_line");
@@ -411,14 +421,17 @@ class Gantt {
             row.appendChild(label);
             row.appendChild(track);
             this.#rows.appendChild(row);
-            this.#rows_layout.push({task: task, row: row});
+            this.#rowsLayout.push({ task: task, row: row });
         }
         if (this.#tasks.length === 0) {
             const empty = document.createElement("gantt_empty");
             empty.innerText = I18n.t("gantt.empty");
             this.#rows.appendChild(empty);
         }
-        this.#rows.style.setProperty("--gantt_rows_height", `${Math.max(1, this.#rows_layout.length) * this.#row_height}px`);
+        this.#rows.style.setProperty(
+            "--gantt_rows_height",
+            `${Math.max(1, this.#rowsLayout.length) * this.#rowHeight}px`
+        );
     }
 
     #createGroupRow(title = String()) {
@@ -434,12 +447,19 @@ class Gantt {
 
     // `task_index` — номер задачи в данных: по нему клик находит именно ту задачу, чья полоса
     // нажата (у задач без id и `data-id` пустой, и поиск по нему возвращал бы первую такую)
-    #createBar(task = Object(), start = new Date(), end = new Date(), left = Number(), width = Number(), task_index = Number()) {
+    #createBar(
+        task = Object(),
+        start = new Date(),
+        end = new Date(),
+        left = Number(),
+        width = Number(),
+        taskIndex = Number()
+    ) {
         const bar = document.createElement("button");
         bar.type = "button";
         bar.className = "gantt_bar";
         bar.dataset.id = task.id === undefined ? "" : String(task.id);
-        bar.dataset.index = String(task_index);
+        bar.dataset.index = String(taskIndex);
         bar.style.left = `${left * 100}%`;
         bar.style.width = `${width * 100}%`;
         if (task.color !== undefined) bar.style.background = String(task.color);
@@ -447,7 +467,7 @@ class Gantt {
         title.innerText = task.title === undefined ? I18n.t("gantt.task") : String(task.title);
         bar.appendChild(title);
         const progress = this.#progress(task);
-        if (this.#show_progress && progress !== undefined) {
+        if (this.#showProgress && progress !== undefined) {
             const fill = document.createElement("gantt_bar_progress");
             fill.style.width = `${progress}%`;
             bar.appendChild(fill);
@@ -463,10 +483,14 @@ class Gantt {
     }
 
     #barLabel(task = Object(), start = new Date(), end = new Date(), progress = undefined) {
-        const format = (date) => date.toLocaleString(I18n.getLocale(), {day: "numeric", month: "long"});
-        const parts = [task.title === undefined ? I18n.t("gantt.task") : String(task.title), `${format(start)} – ${format(end)}`];
-        if (progress !== undefined) parts.push(I18n.t("gantt.progress", {progress: progress}));
-        if (Array.isArray(task.dependencies) && task.dependencies.length > 0) parts.push(I18n.t("gantt.dependsOn", {tasks: task.dependencies.join(", ")}));
+        const format = (date) => date.toLocaleString(I18n.getLocale(), { day: "numeric", month: "long" });
+        const parts = [
+            task.title === undefined ? I18n.t("gantt.task") : String(task.title),
+            `${format(start)} – ${format(end)}`,
+        ];
+        if (progress !== undefined) parts.push(I18n.t("gantt.progress", { progress: progress }));
+        if (Array.isArray(task.dependencies) && task.dependencies.length > 0)
+            parts.push(I18n.t("gantt.dependsOn", { tasks: task.dependencies.join(", ") }));
         return parts.join(", ");
     }
 
@@ -486,18 +510,18 @@ class Gantt {
     #renderLinks(bounds = Object()) {
         if (this.#links === undefined) return;
         this.#links.innerHTML = "";
-        if (!this.#show_links) return;
-        const index = new Map(this.#rows_layout.map((entry, position) => [String(entry.task.id), position]));
-        const height = Math.max(1, this.#rows_layout.length) * this.#row_height;
+        if (!this.#showLinks) return;
+        const index = new Map(this.#rowsLayout.map((entry, position) => [String(entry.task.id), position]));
+        const height = Math.max(1, this.#rowsLayout.length) * this.#rowHeight;
         this.#links.setAttribute("viewBox", `0 0 100 ${height}`);
         this.#links.style.height = `${height}px`;
-        for (const {task} of this.#rows_layout) {
+        for (const { task } of this.#rowsLayout) {
             const dependencies = Array.isArray(task.dependencies) ? task.dependencies : [];
             if (dependencies.length === 0) continue;
             const start = Gantt.#taskStart(task);
             if (start === undefined) continue;
             const x2 = this.#fraction(start, bounds) * 100;
-            const y2 = (index.get(String(task.id)) + 0.5) * this.#row_height;
+            const y2 = (index.get(String(task.id)) + 0.5) * this.#rowHeight;
             for (const dependency of dependencies) {
                 const position = index.get(String(dependency));
                 if (position === undefined) continue;
@@ -505,7 +529,7 @@ class Gantt {
                 const end = source === undefined ? undefined : Gantt.#taskEnd(source);
                 if (end === undefined) continue;
                 const x1 = this.#fraction(end, bounds) * 100;
-                const y1 = (position + 0.5) * this.#row_height;
+                const y1 = (position + 0.5) * this.#rowHeight;
                 // Колено всегда справа от конца предшественника: при наложении линия уйдёт назад
                 const elbow = x1 + 1.5;
                 const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
@@ -531,8 +555,8 @@ class Gantt {
         const bar = target.closest(".gantt_bar");
         if (bar === null) return;
         const task = this.#tasks[Number(bar.dataset.index)];
-        if (this.#on_task_click !== undefined) this.#on_task_click(task, bar);
+        if (this.#onTaskClick !== undefined) this.#onTaskClick(task, bar);
     };
 }
 
-exports.Gantt = Gantt
+exports.Gantt = Gantt;

package/framework/components/chui_gantt/styles.css

@@ -9,12 +9,12 @@ chui_gantt {
     flex-direction: column;
     width: -webkit-fill-available;
     box-sizing: border-box;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_default_size);
     background: var(--element_background_2);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     overflow: hidden;
 }
 
@@ -128,7 +128,7 @@ button.gantt_bar {
     padding: 0 6px;
     overflow: hidden;
     border: none;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--blue_prime_background);
     color: var(--text_color_hover);
     font-family: inherit;
@@ -163,7 +163,7 @@ gantt_bar_progress {
     inset-inline-start: 0;
     top: 0;
     bottom: 0;
-    background: rgba(0, 0, 0, 0.28);
+    background: var(--overlay_dim);
     pointer-events: none;
 }
 
@@ -199,7 +199,7 @@ svg.gantt_links circle.gantt_link_dot {
 
 gantt_empty {
     display: block;
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     color: var(--text_color_disabled);
     text-align: center;
 }