chuijs 3.6.3 → 3.6.5

package/framework/components/chui_popups/styles.css

@@ -1,116 +1,101 @@
-chui_popup {
-    display: none;
-    position: fixed;
-    z-index: 1000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: var(--header_background);
-    padding: 0;
-    border: none;
-    backdrop-filter: var(--global_blur);
-}
-
-popup_content {
-    margin: 60px auto;
-    width: 325px;
-    height: max-content;
-    display: flex;
-    flex-direction: column;
-    border-radius: var(--border_radius);
-    color: var(--text_color);
-    background: var(--main_background);
-    box-shadow: 0 2px 10px 2px rgb(0 0 0 / 25%);
-    border: none;
-}
-
-popup_body {
-    padding: 10px;
-    display: flex;
-    height: -webkit-fill-available;
-    width: -webkit-fill-available;
-    overflow: auto;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-popup_buttons {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    padding: 8px;
-}
-
-popup_title {
-    display: block;
-    text-align: center;
-    font-size: var(--font_default_size);
-    font-weight: 500;
-    padding: 6px;
-}
-
-popup_message {
-    display: block;
-    text-align: center;
-    font-size: var(--font_labels_size);
-    font-weight: 500;
-    padding: 6px;
-}
-/* ALERT */
-popup_button_ok {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: -webkit-fill-available;
-    padding: 10px;
-    border-radius: var(--border_radius);
-    color: var(--text_color);
-    font-weight: 500;
-    font-size: var(--font_default_size);
-}
-
-popup_button_ok:hover {
-    color: var(--text_color_hover);
-    background: var(--blue_prime_background);
-}
-/* CONFIRM */
-popup_button_accept {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: -webkit-fill-available;
-    padding: 10px;
-    border-radius: var(--border_radius);
-    color: var(--text_color);
-    font-weight: 500;
-    font-size: var(--font_default_size);
-}
-
-popup_button_accept:hover {
-    color: var(--text_color_hover);
-    background: var(--blue_prime_background);
-}
-
-popup_button_cancel {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: -webkit-fill-available;
-    padding: 10px;
-    border-radius: var(--border_radius);
-    color: var(--text_color);
-    font-weight: 500;
-    font-size: var(--font_default_size);
-}
-
-popup_button_cancel:hover {
-    color: var(--text_color_hover);
-    background: var(--red_prime_background);
+chui_popup {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: var(--modal_scrim);
+    padding: 0;
+    border: none;
+    backdrop-filter: var(--global_blur);
+}
+
+popup_content {
+    margin: 60px auto;
+    width: 325px;
+    max-width: calc(100% - (var(--margin) * 2));
+    height: max-content;
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--radius_md);
+    color: var(--text_color);
+    background: var(--modal_background);
+    box-shadow: var(--box_shadow_modal);
+    border: 1px solid var(--border_color);
+    backdrop-filter: var(--global_blur);
+}
+
+popup_body {
+    padding: var(--test_padding);
+    display: flex;
+    height: -webkit-fill-available;
+    width: -webkit-fill-available;
+    overflow: auto;
+    flex-direction: column;
+    justify-content: center;
+    /* stretch, а не center: поле ввода в prompt заполняет карточку,
+       а центрирование текста задаётся через text-align у title/message */
+    align-items: stretch;
+}
+
+popup_buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: var(--test_padding);
+}
+
+popup_title {
+    display: block;
+    text-align: center;
+    font-size: var(--font_default_size);
+    font-weight: 500;
+    padding: var(--margin);
+}
+
+popup_message {
+    display: block;
+    text-align: center;
+    font-size: var(--font_labels_size);
+    font-weight: 400;
+    padding: var(--margin);
+}
+/* Кнопки — как .chui_button: заполненный контрол с хайрлайном, но равной ширины */
+popup_button_ok,
+popup_button_accept,
+popup_button_cancel {
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: -webkit-fill-available;
+    padding: var(--main_padding);
+    margin: var(--margin);
+    border-radius: var(--border_radius);
+    background: var(--button_background);
+    border: 1px solid var(--button_border_color);
+    color: var(--text_color);
+    font-weight: 400;
+    font-size: var(--font_default_size);
+}
+
+popup_button_ok:hover,
+popup_button_accept:hover,
+popup_button_cancel:hover {
+    background: var(--button_background_hover);
+    border: 1px solid var(--button_border_color_hover);
+    color: var(--text_color_hover);
+}
+
+popup_button_ok:active,
+popup_button_accept:active,
+popup_button_cancel:active {
+    background: var(--element_background_prime);
+    border: 1px solid var(--button_border_color_hover);
+    color: var(--text_color_hover);
 }

package/framework/components/chui_progress_bar/progress_bar.js

@@ -1,29 +1,29 @@
-class ProgressBar {
-    #id = require("randomstring").generate();
-    #ProgressBar = document.createElement(`progress`);
-    #main = document.createElement("progress_block");
-    #progress_count = document.createElement('progress_count');
-    #progress_text = document.createElement('progress_text');
-    constructor(options = { max: Number() }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_ProgressBar');
-        if (options.max !== undefined) this.#ProgressBar.max = options.max;
-        this.#ProgressBar.id = this.#id;
-        this.#progress_count.setAttribute('for', this.#id);
-        this.#progress_text.setAttribute('for', this.#id);
-        this.#progress_text.style.width = '-webkit-fill-available';
-        this.#progress_text.style.display = 'block';
-        this.#progress_text.style.margin = '0px 10px';
-        this.#progress_text.style.textAlign = 'initial';
-        this.#main.appendChild(this.#progress_count)
-        this.#main.appendChild(this.#ProgressBar)
-        this.#main.appendChild(this.#progress_text)
-    }
-    setMax(max = Number()) { this.#ProgressBar.max = max; }
-    setWidth(width = String()) { this.#main.style.width = width; }
-    setProgressCountText(text = String()) { this.#progress_count.innerText = text; }
-    setValue(value = Number()) { this.#ProgressBar.value = value; }
-    setProgressText(text = String()) { this.#progress_text.innerText = text; }
-    set() { return this.#main; }
-}
-
+class ProgressBar {
+    #id = require("randomstring").generate();
+    #ProgressBar = document.createElement(`progress`);
+    #main = document.createElement("progress_block");
+    #progress_count = document.createElement('progress_count');
+    #progress_text = document.createElement('progress_text');
+    constructor(options = { max: Number() }) {
+        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_ProgressBar');
+        if (options.max !== undefined) this.#ProgressBar.max = options.max;
+        this.#ProgressBar.id = this.#id;
+        this.#progress_count.setAttribute('for', this.#id);
+        this.#progress_text.setAttribute('for', this.#id);
+        this.#progress_text.style.width = '-webkit-fill-available';
+        this.#progress_text.style.display = 'block';
+        this.#progress_text.style.margin = '0px 10px';
+        this.#progress_text.style.textAlign = 'initial';
+        this.#main.appendChild(this.#progress_count)
+        this.#main.appendChild(this.#ProgressBar)
+        this.#main.appendChild(this.#progress_text)
+    }
+    setMax(max = Number()) { this.#ProgressBar.max = max; }
+    setWidth(width = String()) { this.#main.style.width = width; }
+    setProgressCountText(text = String()) { this.#progress_count.innerText = text; }
+    setValue(value = Number()) { this.#ProgressBar.value = value; }
+    setProgressText(text = String()) { this.#progress_text.innerText = text; }
+    set() { return this.#main; }
+}
+
 exports.ProgressBar = ProgressBar

package/framework/components/chui_progress_bar/styles.css

@@ -1,29 +1,29 @@
-progress_block {
-    width: max-content;
-    height: max-content;
-    margin: var(--margin);
-    font-size: var(--font_labels_size);
-    color: var(--text_color);
-    text-align: center;
-    font-weight: 500
-}
-
-progress {
-    border-radius: 50px;
-    text-align: start;
-    margin: var(--margin);
-    width: -webkit-fill-available;
-    height: 15px;
-    border: none;
-}
-
-progress::-webkit-progress-bar {
-    background: var(--element_background);
-    border-radius: 50px;
-    border: none;
-}
-
-progress::-webkit-progress-value {
-    background: var(--blue_prime_background);
-    border-radius: 50px;
+progress_block {
+    width: max-content;
+    height: max-content;
+    margin: var(--margin);
+    font-size: var(--font_labels_size);
+    color: var(--text_color);
+    text-align: center;
+    font-weight: 500
+}
+
+progress {
+    border-radius: var(--radius_pill);
+    text-align: start;
+    margin: var(--margin);
+    width: -webkit-fill-available;
+    height: 15px;
+    border: none;
+}
+
+progress::-webkit-progress-bar {
+    background: var(--element_background);
+    border-radius: var(--radius_pill);
+    border: none;
+}
+
+progress::-webkit-progress-value {
+    background: var(--blue_prime_background);
+    border-radius: var(--radius_pill);
 }

package/framework/components/chui_radio_group/radio_group.js

@@ -1,58 +1,58 @@
-const {RadioButton} = require("../chui_inputs/chui_radio_button/radio_button");
-
-class RadioGroup {
-    #id = require("randomstring").generate();
-    #name = require("randomstring").generate();
-    #RadioGroup = document.createElement('chui_radio_group');
-    #groupForm = document.createElement('form');
-    //Стили
-    #direction = undefined;
-    #wrap = undefined;
-    #align = undefined;
-    #justify = undefined;
-    #width = undefined;
-    constructor(options = {
-        styles: {
-            direction: undefined,
-            wrap: undefined,
-            align: undefined,
-            justify: undefined,
-            width: undefined
-        }
-    }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", "chUiJS_RadioGroup")
-        this.#groupForm.classList.add('radioGroupForm')
-        this.#direction = options.styles.direction;
-        this.#wrap = options.styles.wrap;
-        this.#align = options.styles.align;
-        this.#justify = options.styles.justify;
-        this.#width = options.styles.width;
-        if (this.#width !== undefined) this.#RadioGroup.style.width = this.#width;
-        if (this.#direction !== undefined) this.#groupForm.style.flexDirection = this.#direction;
-        if (this.#wrap !== undefined) this.#groupForm.style.flexWrap = this.#wrap;
-        if (this.#align !== undefined) this.#groupForm.style.alignItems = this.#align;
-        if (this.#justify !== undefined) this.#groupForm.style.justifyContent = this.#justify;
-        this.#RadioGroup.id = this.#id;
-        this.#RadioGroup.appendChild(this.#groupForm)
-    }
-    addOptions(options = [{ name: String(), value: String() }]) {
-        options.forEach(option => {
-            const radio = new RadioButton({ title: option.name, stringValue: option.value, name: this.#name })
-            this.#groupForm.appendChild(radio.set())
-        })
-    }
-    addChangeListener(listener = () => {}) {
-        this.#groupForm.addEventListener("change", listener)
-    }
-    clear() {
-        for (let test of this.#groupForm.children) test.children.item(0).checked = false
-    }
-    getValue() {
-        return new FormData(this.#groupForm).entries().next().value[1]
-    }
-    set() {
-        return this.#RadioGroup;
-    }
-}
-
+const {RadioButton} = require("../chui_inputs/chui_radio_button/radio_button");
+
+class RadioGroup {
+    #id = require("randomstring").generate();
+    #name = require("randomstring").generate();
+    #RadioGroup = document.createElement('chui_radio_group');
+    #groupForm = document.createElement('form');
+    //Стили
+    #direction = undefined;
+    #wrap = undefined;
+    #align = undefined;
+    #justify = undefined;
+    #width = undefined;
+    constructor(options = {
+        styles: {
+            direction: undefined,
+            wrap: undefined,
+            align: undefined,
+            justify: undefined,
+            width: undefined
+        }
+    }) {
+        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", "chUiJS_RadioGroup")
+        this.#groupForm.classList.add('radioGroupForm')
+        this.#direction = options.styles.direction;
+        this.#wrap = options.styles.wrap;
+        this.#align = options.styles.align;
+        this.#justify = options.styles.justify;
+        this.#width = options.styles.width;
+        if (this.#width !== undefined) this.#RadioGroup.style.width = this.#width;
+        if (this.#direction !== undefined) this.#groupForm.style.flexDirection = this.#direction;
+        if (this.#wrap !== undefined) this.#groupForm.style.flexWrap = this.#wrap;
+        if (this.#align !== undefined) this.#groupForm.style.alignItems = this.#align;
+        if (this.#justify !== undefined) this.#groupForm.style.justifyContent = this.#justify;
+        this.#RadioGroup.id = this.#id;
+        this.#RadioGroup.appendChild(this.#groupForm)
+    }
+    addOptions(options = [{ name: String(), value: String() }]) {
+        options.forEach(option => {
+            const radio = new RadioButton({ title: option.name, stringValue: option.value, name: this.#name })
+            this.#groupForm.appendChild(radio.set())
+        })
+    }
+    addChangeListener(listener = () => {}) {
+        this.#groupForm.addEventListener("change", listener)
+    }
+    clear() {
+        for (let test of this.#groupForm.children) test.children.item(0).checked = false
+    }
+    getValue() {
+        return new FormData(this.#groupForm).entries().next().value[1]
+    }
+    set() {
+        return this.#RadioGroup;
+    }
+}
+
 exports.RadioGroup = RadioGroup

package/framework/components/chui_radio_group/styles.css

@@ -1,4 +1,4 @@
-.radioGroupForm {
-    display: flex;
-    width: inherit;
+.radioGroupForm {
+    display: flex;
+    width: inherit;
 }

package/framework/components/chui_slideshow/slideshow.js

@@ -1,76 +1,76 @@
-const {Icon, Icons} = require("../chui_icons/icons");
-const {Animation} = require("../../modules/chui_animations/animations");
-
-class SlideShow {
-    #default_slide = 0;
-    #chui_slides_main = document.createElement('chui_slides_main');
-    //
-    #chui_slides_list = document.createElement("chui_slides_list")
-    #chui_next_slide = document.createElement('chui_next_slide');
-    #chui_prev_slide = document.createElement('chui_prev_slide');
-    //
-    #slides_list = undefined;
-    constructor(options = {
-        width: String(), height: String(),
-        autoplay: { status: Boolean(), interval: Number(10) },
-        slides: []
-    }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_SlideShow');
-        this.#chui_slides_main.style.width = options.width;
-        this.#chui_slides_main.style.height = options.height;
-
-        this.#slides_list = options.slides;
-        this.#chui_next_slide.addEventListener("click", () => this.#changeSlide(1))
-        this.#chui_prev_slide.addEventListener("click", () => this.#changeSlide(-1))
-        this.#chui_slides_main.appendChild(this.#chui_slides_list);
-        this.#chui_next_slide.appendChild(new Icon(Icons.CONTENT.REDO, "14pt", "var(--button_text_color)").set());
-        this.#chui_prev_slide.appendChild(new Icon(Icons.CONTENT.UNDO, "14pt", "var(--button_text_color)").set());
-        this.#chui_slides_main.appendChild(this.#chui_next_slide);
-        this.#chui_slides_main.appendChild(this.#chui_prev_slide);
-        if (options.autoplay.status) setInterval(() => this.#changeSlide(1), options.autoplay.interval * 1000);
-        //
-        let slide = this.#slides_list[0].set();
-        slide.style.display = 'flex';
-        this.#chui_slides_list.appendChild(slide)
-        new Animation(slide).fadeIn()
-        //
-    }
-    #changeSlide(n = Number()) {
-        let sum_slides = this.#slides_list.length;
-        this.#default_slide = this.#default_slide + n;
-        if (this.#default_slide > (sum_slides - 1)) this.#default_slide = 0;
-        if (this.#default_slide < 0) this.#default_slide = sum_slides - 1;
-        for (let child of this.#chui_slides_list.childNodes) { this.#chui_slides_list.removeChild(child); }
-        let slide = this.#slides_list[this.#default_slide].set();
-        this.#chui_slides_list.appendChild(slide)
-        slide.style.display = 'none';
-        new Animation(slide).fadeIn()
-    }
-    set() {
-        return this.#chui_slides_main;
-    }
-    static SLIDE(options = { width: String(), height: String(), components: [] }) {
-        return new Slide(options)
-    }
-}
-exports.SlideShow = SlideShow
-
-class Slide {
-    #chui_slide = document.createElement('chui_slide');
-    #chui_slide_content = document.createElement('chui_slide_content');
-    constructor(options = {
-        size: { width: String(), height: String() },
-        style: { direction: String(), wrap: String(), align: String(), justify: String() },
-        components: []
-    }) {
-        if (options.size.width !== undefined) this.#chui_slide_content.style.width = options.size.width;
-        if (options.size.height !== undefined) this.#chui_slide_content.style.height = options.size.height;
-        if (options.style.direction !== undefined) this.#chui_slide_content.style.flexDirection = options.style.direction;
-        if (options.style.wrap !== undefined) this.#chui_slide_content.style.flexWrap = options.style.wrap;
-        if (options.style.align !== undefined) this.#chui_slide_content.style.alignItems = options.style.align;
-        if (options.style.justify !== undefined) this.#chui_slide_content.style.justifyContent = options.style.justify;
-        for (let child of options.components) this.#chui_slide_content.appendChild(child.set())
-        this.#chui_slide.appendChild(this.#chui_slide_content)
-    }
-    set() { return this.#chui_slide }
+const {Icon, Icons} = require("../chui_icons/icons");
+const {Animation} = require("../../modules/chui_animations/animations");
+
+class SlideShow {
+    #default_slide = 0;
+    #chui_slides_main = document.createElement('chui_slides_main');
+    //
+    #chui_slides_list = document.createElement("chui_slides_list")
+    #chui_next_slide = document.createElement('chui_next_slide');
+    #chui_prev_slide = document.createElement('chui_prev_slide');
+    //
+    #slides_list = undefined;
+    constructor(options = {
+        width: String(), height: String(),
+        autoplay: { status: Boolean(), interval: Number(10) },
+        slides: []
+    }) {
+        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_SlideShow');
+        this.#chui_slides_main.style.width = options.width;
+        this.#chui_slides_main.style.height = options.height;
+
+        this.#slides_list = options.slides;
+        this.#chui_next_slide.addEventListener("click", () => this.#changeSlide(1))
+        this.#chui_prev_slide.addEventListener("click", () => this.#changeSlide(-1))
+        this.#chui_slides_main.appendChild(this.#chui_slides_list);
+        this.#chui_next_slide.appendChild(new Icon(Icons.CONTENT.REDO, "14pt", "var(--button_text_color)").set());
+        this.#chui_prev_slide.appendChild(new Icon(Icons.CONTENT.UNDO, "14pt", "var(--button_text_color)").set());
+        this.#chui_slides_main.appendChild(this.#chui_next_slide);
+        this.#chui_slides_main.appendChild(this.#chui_prev_slide);
+        if (options.autoplay.status) setInterval(() => this.#changeSlide(1), options.autoplay.interval * 1000);
+        //
+        let slide = this.#slides_list[0].set();
+        slide.style.display = 'flex';
+        this.#chui_slides_list.appendChild(slide)
+        new Animation(slide).fadeIn()
+        //
+    }
+    #changeSlide(n = Number()) {
+        let sum_slides = this.#slides_list.length;
+        this.#default_slide = this.#default_slide + n;
+        if (this.#default_slide > (sum_slides - 1)) this.#default_slide = 0;
+        if (this.#default_slide < 0) this.#default_slide = sum_slides - 1;
+        for (let child of this.#chui_slides_list.childNodes) { this.#chui_slides_list.removeChild(child); }
+        let slide = this.#slides_list[this.#default_slide].set();
+        this.#chui_slides_list.appendChild(slide)
+        slide.style.display = 'none';
+        new Animation(slide).fadeIn()
+    }
+    set() {
+        return this.#chui_slides_main;
+    }
+    static SLIDE(options = { width: String(), height: String(), components: [] }) {
+        return new Slide(options)
+    }
+}
+exports.SlideShow = SlideShow
+
+class Slide {
+    #chui_slide = document.createElement('chui_slide');
+    #chui_slide_content = document.createElement('chui_slide_content');
+    constructor(options = {
+        size: { width: String(), height: String() },
+        style: { direction: String(), wrap: String(), align: String(), justify: String() },
+        components: []
+    }) {
+        if (options.size.width !== undefined) this.#chui_slide_content.style.width = options.size.width;
+        if (options.size.height !== undefined) this.#chui_slide_content.style.height = options.size.height;
+        if (options.style.direction !== undefined) this.#chui_slide_content.style.flexDirection = options.style.direction;
+        if (options.style.wrap !== undefined) this.#chui_slide_content.style.flexWrap = options.style.wrap;
+        if (options.style.align !== undefined) this.#chui_slide_content.style.alignItems = options.style.align;
+        if (options.style.justify !== undefined) this.#chui_slide_content.style.justifyContent = options.style.justify;
+        for (let child of options.components) this.#chui_slide_content.appendChild(child.set())
+        this.#chui_slide.appendChild(this.#chui_slide_content)
+    }
+    set() { return this.#chui_slide }
 }