chuijs 4.0.2 → 4.0.4

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

@@ -4,11 +4,11 @@ chui_chips {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     display: block;
     /* fill-available учитывает собственный margin, 100% — нет */
     width: -webkit-fill-available;
-    margin: var(--margin);
+    margin: var(--block_margin);
     font-size: var(--font_default_size);
     color: var(--text_color);
 }
@@ -16,7 +16,7 @@ chui_chips {
 chips_title {
     display: block;
     width: max-content;
-    margin: 0 0 var(--margin);
+    margin: 0 0 var(--block_margin);
     font-size: var(--font_labels_size);
     font-weight: 500;
     color: var(--text_color);
@@ -37,7 +37,7 @@ chips_field {
     height: var(--control_height);
     padding: 3px 6px;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     cursor: text;
 }
@@ -67,7 +67,8 @@ chips_item {
     box-sizing: border-box;
     flex: none;
     height: 21px;
-    padding-block: 0 0; padding-inline: 8px 2px;
+    padding-block: 0 0;
+    padding-inline: 8px 2px;
     /* Скругление контрола (--radius_sm), как у полей и кнопок: капсула (--radius_pill)
        на невысокой метке читалась отдельным от полей элементом и выглядела тяжёлой.
        Заливка как у выбранных значений MultiComboBox: непрозрачная поверхность читается
@@ -98,7 +99,8 @@ chips_more {
     box-sizing: border-box;
     flex: none;
     height: 21px;
-    padding-block: 0 0; padding-inline: 7px 7px;
+    padding-block: 0 0;
+    padding-inline: 7px 7px;
     border: 1px solid transparent;
     border-radius: var(--radius_sm);
     background: var(--element_background_hover);
@@ -191,7 +193,7 @@ chips_dropdown {
     overflow: hidden auto;
     padding: var(--control_padding);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--header_background);
     backdrop-filter: var(--global_blur);
     box-shadow: var(--box_shadow_drop);
@@ -202,6 +204,29 @@ chips_dropdown[hidden] {
     display: none;
 }
 
+/* Уход метки: она гаснет и сжимается, а из строки убирается по концу кадра */
+.chips_item_leaving {
+    animation: chui_leave_up var(--motion_fast) var(--motion_ease) forwards;
+}
+
+/* Появление списка подсказок: общий кадр панели — он же проигрывается заново при снятии
+   `hidden`. Прежде список брал только общий кадр строки на быстром времени, и открытие
+   читалось рывком рядом с остальными дропдаунами */
+chips_dropdown {
+    animation: chui_panel_in var(--motion_base) var(--motion_spring);
+}
+
+/* Появление метки: она встаёт на место, а не возникает рывком. Класс снимается по концу
+   кадра, поэтому пересборка списка метки не переигрывает */
+.chips_item_appearing {
+    animation: chui_appear_up var(--motion_base) var(--motion_ease);
+}
+
+/* Уход: список гаснет и сходит вверх, `hidden` возвращается по концу кадра */
+.chips_dropdown_leaving {
+    animation: chui_leave_up var(--motion_fast) var(--motion_ease) forwards;
+}
+
 .chips_option {
     padding: 6px 8px;
     border-radius: var(--radius_sm);

package/framework/components/chui_inputs/chui_color_picker/color_picker.js

@@ -1,6 +1,7 @@
-const {setStyles, optionOr} = require('../../../modules/chui_functions');
-const {Validate} = require('../../../modules/chui_validate/chui_validate');
-const {I18n} = require('../../../modules/chui_i18n/chui_i18n');
+const { setStyles, optionOr } = require("../../../modules/chui_functions");
+const { Validate } = require("../../../modules/chui_validate/chui_validate");
+const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
+const { paletteColor } = require("../../../modules/chui_palette/palette");
 
 // Формат, который принимает и поле, и разбор значения: три или шесть знаков после «#»
 const HEX_PATTERN = "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
@@ -41,7 +42,11 @@ const HEX_PATTERN = "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$";
  * Слушателей и таймеров вне своих узлов нет, поэтому `destroy()` не нужен.
  */
 class ColorPicker {
-    static PALETTE = ["#ff3b30", "#ff9500", "#ffcc00", "#34c759", "#007aff", "#5856d6", "#af52de", "#8e8e93"];
+    /* Готовые цвета — из общей палитры (светлая колонка: набор предлагается человеку,
+       а не подстраивается под схему окна) */
+    static PALETTE = ["red", "orange", "yellow", "green", "blue", "indigo", "purple", "gray"].map((name) =>
+        paletteColor(name, { scheme: "light" })
+    );
     static #counter = 0;
 
     #root = document.createElement("chui_color_picker");
@@ -55,36 +60,38 @@ class ColorPicker {
     #id = undefined;
     #name = undefined;
     #label = undefined;
-    #title_text = undefined;
+    #titleText = undefined;
     #value = ColorPicker.PALETTE[4];
     #initial = ColorPicker.PALETTE[4];
     #items = [];
     #buttons = [];
-    #show_input = true;
+    #showInput = true;
     #disabled = false;
     #listeners = [];
-    #on_change = undefined;
-
-    constructor(options = {
-        id: String(),
-        name: String(),
-        title: String(),
-        label: String(),
-        value: String(),
-        presets: undefined,
-        showInput: Boolean(),
-        disabled: Boolean(),
-        changeListener: undefined,
-        onChange: undefined
-    }) {
+    #onChange = undefined;
+
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            label: String(),
+            value: String(),
+            presets: undefined,
+            showInput: Boolean(),
+            disabled: Boolean(),
+            changeListener: undefined,
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_ColorPicker");
         ColorPicker.#counter += 1;
         this.#id = options.id === undefined ? `chui_color_picker_${ColorPicker.#counter}` : options.id;
         this.#root.id = this.#id;
         this.#name = options.name;
         this.#label = options.label;
-        this.#show_input = options.showInput !== false;
-        this.#on_change = options.onChange;
+        this.#showInput = options.showInput !== false;
+        this.#onChange = options.onChange;
         if (options.changeListener !== undefined) this.addChangeListener(options.changeListener);
         // Явно переданный цвет разбирается сразу: молча подменять его дефолтным нельзя,
         // а пустая заготовка `value: String()` из описания опций означает «цвет не задан»
@@ -102,7 +109,7 @@ class ColorPicker {
         this.#swatch.addEventListener("input", this.#onSwatchInput);
         this.#swatch.addEventListener("change", this.#onSwatchChange);
         this.#row.appendChild(this.#swatch);
-        if (this.#show_input) {
+        if (this.#showInput) {
             this.#field.className = "color_picker_field";
             this.#hex.type = "text";
             this.#hex.className = "color_picker_hex";
@@ -128,8 +135,15 @@ class ColorPicker {
         else this.#title.hidden = true;
         this.setLabel(optionOr(options.label, I18n.t("forms.colorPickerLabel")));
         // Правила валидации: свой формат можно переопределить опцией pattern
-        const rules = Object.assign({pattern: HEX_PATTERN}, options);
-        Validate.installField(this, rules, this.#root, undefined, () => this.#validateValue(), this.#show_input ? this.#field : this.#row);
+        const rules = Object.assign({ pattern: HEX_PATTERN }, options);
+        Validate.installField(
+            this,
+            rules,
+            this.#root,
+            undefined,
+            () => this.#validateValue(),
+            this.#showInput ? this.#field : this.#row
+        );
         this.setPresets(options.presets === undefined ? ColorPicker.PALETTE : options.presets);
         this.setDisabled(options.disabled === true);
         this.#render();
@@ -145,7 +159,7 @@ class ColorPicker {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     /** Доступное имя образца, заданное в `label` */
@@ -196,7 +210,7 @@ class ColorPicker {
 
     /** Подпись над контролом; `undefined` её убирает */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#title.hidden = true;
             this.#title.innerText = "";
@@ -212,8 +226,9 @@ class ColorPicker {
         this.#label = text;
         if (text === undefined) this.#swatch.removeAttribute("aria-label");
         else this.#swatch.setAttribute("aria-label", String(text));
-        const hex_label = text === undefined ? I18n.t("forms.colorPickerHex") : I18n.t("forms.colorPickerHexOf", {label: text});
-        this.#hex.setAttribute("aria-label", hex_label);
+        const hexLabel =
+            text === undefined ? I18n.t("forms.colorPickerHex") : I18n.t("forms.colorPickerHexOf", { label: text });
+        this.#hex.setAttribute("aria-label", hexLabel);
         return this;
     }
 
@@ -247,10 +262,12 @@ class ColorPicker {
 
     /** Готовые цвета: строки `#rrggbb` или `{value, title}`; пустой массив убирает палитру */
     setPresets(presets = Array()) {
-        this.#items = (Array.isArray(presets) ? presets : []).map((item) => {
-            if (typeof item === "string") return {value: ColorPicker.parse(item), title: undefined};
-            return {value: ColorPicker.parse(item.value), title: item.title};
-        }).filter((item) => item.value !== undefined);
+        this.#items = (Array.isArray(presets) ? presets : [])
+            .map((item) => {
+                if (typeof item === "string") return { value: ColorPicker.parse(item), title: undefined };
+                return { value: ColorPicker.parse(item.value), title: item.title };
+            })
+            .filter((item) => item.value !== undefined);
         this.#renderPresets();
         this.#render();
         return this;
@@ -275,7 +292,7 @@ class ColorPicker {
     /** Фокус на поле HEX (или на образец, если поля нет): `Form` зовёт это при ошибке */
     focus() {
         if (this.#disabled) return this;
-        if (this.#show_input) this.#hex.focus();
+        if (this.#showInput) this.#hex.focus();
         else this.#swatch.focus();
         return this;
     }
@@ -288,7 +305,7 @@ class ColorPicker {
     // === ВНУТРЕННЕЕ ===
     // Что проверяют правила: текст поля (то, что ввёл человек), иначе — само значение
     #validateValue() {
-        if (!this.#show_input) return this.#value;
+        if (!this.#showInput) return this.#value;
         return this.#hex.value === undefined ? "" : this.#hex.value;
     }
 
@@ -330,7 +347,7 @@ class ColorPicker {
         this.#render();
         if (!changed) return;
         // Фокус остаётся на кнопке палитры: о смене цвета сообщает live-регион
-        this.#status.innerText = I18n.t("forms.colorPickerApplied", {value: value});
+        this.#status.innerText = I18n.t("forms.colorPickerApplied", { value: value });
         this.#notify();
     }
 
@@ -347,7 +364,7 @@ class ColorPicker {
 
     #notify() {
         for (const listener of [...this.#listeners]) listener(this.#value, this);
-        if (this.#on_change !== undefined) this.#on_change(this.#value, this);
+        if (this.#onChange !== undefined) this.#onChange(this.#value, this);
     }
 
     // Системная палитра шлёт input на каждое движение, change — когда цвет выбран
@@ -372,4 +389,4 @@ class ColorPicker {
     };
 }
 
-exports.ColorPicker = ColorPicker
+exports.ColorPicker = ColorPicker;

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

@@ -5,11 +5,11 @@ chui_color_picker {
        карточку. Токены переопределены у корня поля, поэтому действуют только внутри него
        (тот же приём у полосы меню-бара). */
     --control_padding: var(--control_padding_sm);
-    --main_padding: var(--main_padding_sm);
+    --block_padding: var(--block_padding_sm);
     display: block;
     width: max-content;
     max-width: 100%;
-    margin: var(--margin);
+    margin: var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_default_size);
 }
@@ -17,7 +17,7 @@ chui_color_picker {
 .color_picker_title {
     display: block;
     width: max-content;
-    margin: 0 0 var(--margin);
+    margin: 0 0 var(--block_margin);
     color: var(--text_color);
     font-size: var(--font_labels_size);
     font-weight: 500;
@@ -41,7 +41,7 @@ chui_color_picker {
     height: var(--control_height);
     padding: 0;
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
     cursor: pointer;
     -webkit-appearance: none;
@@ -54,7 +54,7 @@ chui_color_picker {
 
 .color_picker_swatch::-webkit-color-swatch {
     border: none;
-    border-radius: calc(var(--border_radius) - 1px);
+    border-radius: calc(var(--radius_sm) - 1px);
 }
 
 .color_picker_swatch:focus-visible {
@@ -74,9 +74,9 @@ chui_color_picker {
     box-sizing: border-box;
     min-width: 104px;
     height: var(--control_height);
-    padding: var(--main_padding);
+    padding: var(--block_padding);
     border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
+    border-radius: var(--radius_sm);
     background: var(--element_background);
 }