chuijs 4.0.3 → 4.0.4

package/framework/components/chui_tour/tour.js

@@ -66,28 +66,28 @@ class Tour {
     #popover = undefined;
     #head = document.createElement("tour_head");
     #title = document.createElement("tour_title");
-    #close_button = document.createElement("button");
+    #closeButton = document.createElement("button");
     #text = document.createElement("tour_text");
     #footer = document.createElement("tour_footer");
     #counter = document.createElement("tour_counter");
-    #skip_button = document.createElement("button");
-    #prev_button = document.createElement("button");
-    #next_button = document.createElement("button");
+    #skipButton = document.createElement("button");
+    #prevButton = document.createElement("button");
+    #nextButton = document.createElement("button");
     /** Значок кнопки «Далее»: на последнем шаге меняется на галочку «Готово» */
-    #next_icon = undefined;
+    #nextIcon = undefined;
     #steps = [];
     #active = [];
     #index = 0;
     #mask = true;
     #closable = true;
     #keyboard = true;
-    #scroll_into_view = true;
+    #scrollIntoViewEnabled = true;
     #label = undefined;
-    #is_open = false;
+    #isOpen = false;
     #a11y = undefined;
-    #on_finish = undefined;
-    #on_close = undefined;
-    #on_change = undefined;
+    #onFinish = undefined;
+    #onClose = undefined;
+    #onChange = undefined;
     #destroyed = false;
 
     constructor(
@@ -113,11 +113,11 @@ class Tour {
         if (options.mask !== undefined) this.#mask = options.mask !== false;
         if (options.closable !== undefined) this.#closable = options.closable !== false;
         if (options.keyboard !== undefined) this.#keyboard = options.keyboard !== false;
-        if (options.scrollIntoView !== undefined) this.#scroll_into_view = options.scrollIntoView !== false;
+        if (options.scrollIntoView !== undefined) this.#scrollIntoViewEnabled = options.scrollIntoView !== false;
         this.#label = options.label;
-        this.#on_finish = options.onFinish;
-        this.#on_close = options.onClose;
-        this.#on_change = options.onChange;
+        this.#onFinish = options.onFinish;
+        this.#onClose = options.onClose;
+        this.#onChange = options.onChange;
 
         this.#layer.id = this.#id;
         this.#layer.dataset.mask = this.#mask ? "true" : "false";
@@ -126,32 +126,32 @@ class Tour {
         this.#title.id = `${this.#id}_title`;
         this.#text.id = `${this.#id}_text`;
         // Кнопки создаются один раз: шаги только меняют их значки, имена и видимость
-        this.#close_button.type = "button";
-        this.#close_button.className = "tour_button tour_close";
-        this.#close_button.appendChild(new Icon(Icons.NAVIGATION.CLOSE, "18px").set());
-        this.#skip_button.type = "button";
-        this.#skip_button.className = "tour_button tour_skip";
-        this.#skip_button.appendChild(new Icon(Tour.#ICONS.skip, "18px").set());
-        this.#prev_button.type = "button";
-        this.#prev_button.className = "tour_button tour_prev";
-        this.#prev_button.appendChild(new Icon(Tour.#ICONS.prev, "18px").set());
-        this.#next_button.type = "button";
-        this.#next_button.className = "tour_button tour_next";
-        this.#next_icon = new Icon(Tour.#ICONS.next, "18px");
-        this.#next_button.appendChild(this.#next_icon.set());
-        this.#nameButton(this.#skip_button, "feedback.tourSkip");
-        this.#nameButton(this.#prev_button, "feedback.tourPrev");
-        this.#nameButton(this.#next_button, "feedback.tourNext");
-        this.#close_button.addEventListener("click", this.#onCloseClick);
-        this.#skip_button.addEventListener("click", this.#onCloseClick);
-        this.#prev_button.addEventListener("click", this.#onPrevClick);
-        this.#next_button.addEventListener("click", this.#onNextClick);
+        this.#closeButton.type = "button";
+        this.#closeButton.className = "tour_button tour_close";
+        this.#closeButton.appendChild(new Icon(Icons.NAVIGATION.CLOSE, "18px").set());
+        this.#skipButton.type = "button";
+        this.#skipButton.className = "tour_button tour_skip";
+        this.#skipButton.appendChild(new Icon(Tour.#ICONS.skip, "18px").set());
+        this.#prevButton.type = "button";
+        this.#prevButton.className = "tour_button tour_prev";
+        this.#prevButton.appendChild(new Icon(Tour.#ICONS.prev, "18px").set());
+        this.#nextButton.type = "button";
+        this.#nextButton.className = "tour_button tour_next";
+        this.#nextIcon = new Icon(Tour.#ICONS.next, "18px");
+        this.#nextButton.appendChild(this.#nextIcon.set());
+        this.#nameButton(this.#skipButton, "feedback.tourSkip");
+        this.#nameButton(this.#prevButton, "feedback.tourPrev");
+        this.#nameButton(this.#nextButton, "feedback.tourNext");
+        this.#closeButton.addEventListener("click", this.#onCloseClick);
+        this.#skipButton.addEventListener("click", this.#onCloseClick);
+        this.#prevButton.addEventListener("click", this.#onPrevClick);
+        this.#nextButton.addEventListener("click", this.#onNextClick);
         this.#head.appendChild(this.#title);
-        this.#head.appendChild(this.#close_button);
+        this.#head.appendChild(this.#closeButton);
         this.#footer.appendChild(this.#counter);
-        this.#footer.appendChild(this.#skip_button);
-        this.#footer.appendChild(this.#prev_button);
-        this.#footer.appendChild(this.#next_button);
+        this.#footer.appendChild(this.#skipButton);
+        this.#footer.appendChild(this.#prevButton);
+        this.#footer.appendChild(this.#nextButton);
         this.#layer.appendChild(this.#highlight);
         this.#layer.appendChild(this.#status);
         // Подсказка — готовый Popover: он сам держит место у цели, следит за прокруткой
@@ -171,8 +171,8 @@ class Tour {
             onEscape: () => this.close(),
         });
         this.#a11y.setLabel(this.#label === undefined ? I18n.t("feedback.tourLabel") : this.#label);
-        this.#close_button.setAttribute("aria-label", I18n.t("a11y.closeDialog"));
-        this.#close_button.setAttribute("title", I18n.t("a11y.closeDialog"));
+        this.#closeButton.setAttribute("aria-label", I18n.t("a11y.closeDialog"));
+        this.#closeButton.setAttribute("title", I18n.t("a11y.closeDialog"));
         this.#layer.addEventListener("keydown", this.#onKeyDown);
         window.addEventListener("resize", this.#onWindowChange);
         window.addEventListener("scroll", this.#onWindowChange, true);
@@ -181,20 +181,20 @@ class Tour {
     // ПОКАЗ / СКРЫТИЕ
     /** Начать знакомство с первого шага; шаги без найденной цели в него не попадают */
     start() {
-        if (this.#destroyed || this.#is_open) return this;
+        if (this.#destroyed || this.#isOpen) return this;
         this.#active = this.#steps.filter(
             (step) =>
                 step !== undefined && step !== null && (step.target === undefined || this.#targetOf(step) !== undefined)
         );
         if (this.#active.length === 0) return this;
         this.#index = 0;
-        this.#is_open = true;
+        this.#isOpen = true;
         this.#layer.style.display = "flex";
         // Тексты берём в момент запуска: язык мог смениться после создания компонента
         this.#a11y.setLabel(this.#label === undefined ? I18n.t("feedback.tourLabel") : this.#label);
-        this.#close_button.setAttribute("aria-label", I18n.t("a11y.closeDialog"));
-        this.#close_button.setAttribute("title", I18n.t("a11y.closeDialog"));
-        this.#nameButton(this.#skip_button, "feedback.tourSkip");
+        this.#closeButton.setAttribute("aria-label", I18n.t("a11y.closeDialog"));
+        this.#closeButton.setAttribute("title", I18n.t("a11y.closeDialog"));
+        this.#nameButton(this.#skipButton, "feedback.tourSkip");
         this.#a11y.open();
         this.#applyStep(true);
         return this;
@@ -202,7 +202,7 @@ class Tour {
 
     /** Следующий шаг или завершение, если он последний */
     next() {
-        if (!this.#is_open) return this;
+        if (!this.#isOpen) return this;
         if (this.#index >= this.#active.length - 1) return this.finish();
         this.#index += 1;
         this.#applyStep(false);
@@ -210,14 +210,14 @@ class Tour {
     }
 
     prev() {
-        if (!this.#is_open || this.#index === 0) return this;
+        if (!this.#isOpen || this.#index === 0) return this;
         this.#index -= 1;
         this.#applyStep(false);
         return this;
     }
 
     goTo(index = Number()) {
-        if (!this.#is_open) return this;
+        if (!this.#isOpen) return this;
         const position = Math.max(0, Math.min(Number(index) || 0, this.#active.length - 1));
         if (position === this.#index) return this;
         this.#index = position;
@@ -236,7 +236,7 @@ class Tour {
     }
 
     isOpen() {
-        return this.#is_open;
+        return this.#isOpen;
     }
     /** Номер текущего шага; вне знакомства — 0 */
     getIndex() {
@@ -260,12 +260,12 @@ class Tour {
         window.removeEventListener("resize", this.#onWindowChange);
         window.removeEventListener("scroll", this.#onWindowChange, true);
         this.#layer.removeEventListener("keydown", this.#onKeyDown);
-        this.#close_button.removeEventListener("click", this.#onCloseClick);
-        this.#skip_button.removeEventListener("click", this.#onCloseClick);
-        this.#prev_button.removeEventListener("click", this.#onPrevClick);
-        this.#next_button.removeEventListener("click", this.#onNextClick);
-        if (this.#is_open) {
-            this.#is_open = false;
+        this.#closeButton.removeEventListener("click", this.#onCloseClick);
+        this.#skipButton.removeEventListener("click", this.#onCloseClick);
+        this.#prevButton.removeEventListener("click", this.#onPrevClick);
+        this.#nextButton.removeEventListener("click", this.#onNextClick);
+        if (this.#isOpen) {
+            this.#isOpen = false;
             this.#popover.close();
             this.#a11y.close();
         }
@@ -290,17 +290,17 @@ class Tour {
     }
 
     #end(completed = false) {
-        if (!this.#is_open) return this;
+        if (!this.#isOpen) return this;
         const index = this.#index;
-        this.#is_open = false;
+        this.#isOpen = false;
         this.#popover.close();
         this.#clearTriggerAria();
         this.#a11y.close();
         this.#layer.style.display = "none";
         if (completed) {
-            if (this.#on_finish !== undefined) this.#on_finish();
-        } else if (this.#on_close !== undefined) {
-            this.#on_close(index);
+            if (this.#onFinish !== undefined) this.#onFinish();
+        } else if (this.#onClose !== undefined) {
+            this.#onClose(index);
         }
         return this;
     }
@@ -322,22 +322,22 @@ class Tour {
             this.#popover.set().setAttribute("aria-labelledby", this.#title.id);
             this.#popover.set().removeAttribute("aria-label");
         }
-        const has_text = step.text !== undefined || step.markdownText !== undefined;
+        const hasText = step.text !== undefined || step.markdownText !== undefined;
         if (step.markdownText !== undefined) this.#text.innerHTML = markdownToHtml(step.markdownText);
         else if (step.text !== undefined) this.#text.innerText = String(step.text);
         // Счётчик, значки и видимость закрывающих кнопок
         this.#counter.innerText = I18n.t("feedback.tourStepOf", { index: this.#index + 1, total: this.#active.length });
-        this.#nameButton(this.#prev_button, "feedback.tourPrev");
+        this.#nameButton(this.#prevButton, "feedback.tourPrev");
         // Последний шаг: «Далее» становится «Готово» — вместе с именем меняется и значок
-        this.#nameButton(this.#next_button, last ? "feedback.tourFinish" : "feedback.tourNext");
-        this.#next_icon.set().textContent = last ? Tour.#ICONS.finish : Tour.#ICONS.next;
-        this.#skip_button.style.display = this.#closable ? "" : "none";
-        this.#close_button.style.display = this.#closable ? "" : "none";
-        this.#prev_button.style.display = this.#index === 0 ? "none" : "";
-        this.#popover.setContent([this.#head, has_text ? this.#text : undefined, this.#footer]);
+        this.#nameButton(this.#nextButton, last ? "feedback.tourFinish" : "feedback.tourNext");
+        this.#nextIcon.set().textContent = last ? Tour.#ICONS.finish : Tour.#ICONS.next;
+        this.#skipButton.style.display = this.#closable ? "" : "none";
+        this.#closeButton.style.display = this.#closable ? "" : "none";
+        this.#prevButton.style.display = this.#index === 0 ? "none" : "";
+        this.#popover.setContent([this.#head, hasText ? this.#text : undefined, this.#footer]);
         if (previous !== undefined) {
             if (this.#layer.contains(previous)) previous.focus();
-            else this.#next_button.focus();
+            else this.#nextButton.focus();
         }
         this.#announce(
             `${this.#counter.innerText}${this.#title.innerText.trim() === "" ? "" : ". " + this.#title.innerText}`
@@ -351,7 +351,7 @@ class Tour {
         // Подсветка — не триггер: подсказку открывает знакомство, а не клик по окну
         this.#clearTriggerAria();
         if (step.onEnter !== undefined) step.onEnter(step, this.#index);
-        if (this.#on_change !== undefined) this.#on_change(step, this.#index);
+        if (this.#onChange !== undefined) this.#onChange(step, this.#index);
     }
 
     /** Снять с подсветки aria триггера: поповер ставит их сам при показе и скрытии */
@@ -374,7 +374,7 @@ class Tour {
     }
 
     #scrollIntoView(step) {
-        if (!this.#scroll_into_view) return;
+        if (!this.#scrollIntoViewEnabled) return;
         const node = this.#targetOf(step);
         if (node === undefined) return;
         node.scrollIntoView({ block: "center", inline: "nearest" });
@@ -429,7 +429,7 @@ class Tour {
         }
     };
     #onWindowChange = () => {
-        if (!this.#is_open) return;
+        if (!this.#isOpen) return;
         this.#syncGeometry();
     };
 }

package/framework/components/chui_transfer/styles.css

@@ -4,13 +4,13 @@ chui_transfer {
     flex-direction: column;
     width: max-content;
     max-width: 100%;
-    margin: var(--margin);
+    margin: var(--block_margin);
 }
 
 .transfer_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;
@@ -33,7 +33,7 @@ chui_transfer {
     border: none;
     outline: 1px solid var(--red_prime_background);
     outline-offset: 4px;
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
 }
 
 .transfer_pane {
@@ -75,11 +75,11 @@ chui_transfer {
     min-height: var(--control_height);
     margin: 0;
     /* Место под кнопку очистки, чтобы текст не заезжал под неё; слева 11 px — как
-       у текстовых полей (--main_padding_sm) */
+       у текстовых полей (--block_padding_sm) */
     padding-block: 0 0;
     padding-inline: 11px 30px;
     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;
@@ -147,7 +147,7 @@ chui_transfer {
     padding: 4px;
     overflow: auto;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
 }