chuijs 4.0.3 → 4.0.4

package/framework/components/chui_form/form.js

@@ -2,11 +2,11 @@ const { Button } = require("../chui_button/button");
 
 class Form {
     #id = require("randomstring").generate();
-    #chui_form_main = document.createElement("chui_form_main");
+    #chuiFormMain = document.createElement("chui_form_main");
     #form = document.createElement("form");
     #components = [];
-    #submit_event = undefined;
-    #validate_on_submit = true;
+    #submitEvent = undefined;
+    #validateOnSubmit = true;
     constructor(
         options = {
             action: String(),
@@ -17,19 +17,19 @@ class Form {
         }
     ) {
         require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Forms");
-        this.#chui_form_main.id = this.#id;
-        this.#chui_form_main.appendChild(this.#form);
+        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);
@@ -37,14 +37,14 @@ 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() {
@@ -118,7 +118,7 @@ class Form {
     }
     //addSubmitEvent(listener = () => {}) { this.#form.addEventListener("submit", listener); }
     set() {
-        return this.#chui_form_main;
+        return this.#chuiFormMain;
     }
     static SubmitButton(title = String()) {
         return new SubmitButton(title);

package/framework/components/chui_gantt/gantt.js

@@ -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,15 +57,15 @@ 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 = [];
+    #onTaskClick = undefined;
+    #rowsLayout = [];
 
     constructor(
         options = {
@@ -94,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();
     }
 
@@ -153,11 +153,11 @@ class Gantt {
     }
 
     getRowHeight() {
-        return this.#row_height;
+        return this.#rowHeight;
     }
 
     getLabelWidth() {
-        return this.#label_width;
+        return this.#labelWidth;
     }
 
     /** Полоса задачи на диаграмме (если задача показана) */
@@ -295,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;
@@ -361,8 +361,8 @@ 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) {
@@ -380,18 +380,18 @@ class Gantt {
             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));
@@ -410,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");
@@ -421,7 +421,7 @@ 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");
@@ -430,7 +430,7 @@ class Gantt {
         }
         this.#rows.style.setProperty(
             "--gantt_rows_height",
-            `${Math.max(1, this.#rows_layout.length) * this.#row_height}px`
+            `${Math.max(1, this.#rowsLayout.length) * this.#rowHeight}px`
         );
     }
 
@@ -453,13 +453,13 @@ class Gantt {
         end = new Date(),
         left = Number(),
         width = Number(),
-        task_index = 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);
@@ -467,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);
@@ -510,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;
@@ -529,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");
@@ -555,7 +555,7 @@ 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);
     };
 }
 

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