chuijs 3.6.3 → 3.6.4

package/framework/components/chui_badge/styles.css

@@ -1,30 +1,30 @@
-chui_badge {
-    font-weight: 400;
-    height: max-content;
-    width: max-content;
-    padding: var(--main_padding);
-    margin: var(--margin);
-    border-radius: var(--border_radius);
-    font-size: var(--font_default_size);
-    background: var(--badge_cancel_back);
-    color: var(--badge_cancel_text);
-}
-
-chui_badge p {
-    margin: 0;
-}
-
-.badge_error {
-    background: var(--badge_error_back);
-    color: var(--badge_error_text);
-}
-
-.badge_success {
-    background: var(--badge_success_back);
-    color: var(--badge_success_text);
-}
-
-.badge_warning {
-    background: var(--badge_warning_back);
-    color: var(--badge_warning_text);
+chui_badge {
+    font-weight: 400;
+    height: max-content;
+    width: max-content;
+    padding: var(--main_padding);
+    margin: var(--margin);
+    border-radius: var(--border_radius);
+    font-size: var(--font_default_size);
+    background: var(--badge_cancel_back);
+    color: var(--badge_cancel_text);
+}
+
+chui_badge p {
+    margin: 0;
+}
+
+.badge_error {
+    background: var(--badge_error_back);
+    color: var(--badge_error_text);
+}
+
+.badge_success {
+    background: var(--badge_success_back);
+    color: var(--badge_success_text);
+}
+
+.badge_warning {
+    background: var(--badge_warning_back);
+    color: var(--badge_warning_text);
 }

package/framework/components/chui_button/button.js

@@ -1,49 +1,49 @@
-const {Icon} = require("../chui_icons/icons");
-
-class Button {
-    #chui_button = document.createElement('chui_button');
-    #button = document.createElement('button');
-    #button_text = document.createElement('button_text');
-    #button_icon = document.createElement('button_icon');
-    constructor(options = { reverse: Boolean(), title: String(), icon: undefined, clickEvent: () => {} }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", "chUiJS_Button")
-
-        this.#button.className = "chui_button"
-        this.#button_text.className = "chui_button_text"
-
-        if (options.title !== undefined) this.#button_text.innerText = options.title;
-        if (options.icon !== undefined) this.#button_icon.innerHTML = new Icon(options.icon, "var(--header_icon_size)").getHTML();
-
-        if (options.title !== undefined && options.icon === undefined) {
-            this.#button.appendChild(this.#button_text);
-        } else if (options.title === undefined && options.icon !== undefined) {
-            this.#button.style.padding = "var(--test_padding)"
-            this.#button.appendChild(this.#button_icon);
-        } else {
-            if (options.reverse) {
-                this.#button.appendChild(this.#button_icon);
-                this.#button_text.style.marginLeft = "var(--test_padding)";
-                this.#button.appendChild(this.#button_text);
-            } else {
-                this.#button.appendChild(this.#button_text);
-                this.#button_icon.style.marginLeft = "var(--test_padding)";
-                this.#button.appendChild(this.#button_icon);
-            }
-        }
-
-        if (options.clickEvent !== undefined) this.#button.addEventListener('click', options.clickEvent);
-        this.#button.addEventListener("mousedown", () => {
-            return false
-        })
-        this.#chui_button.appendChild(this.#button)
-    }
-    getText() { return this.#button.innerText; }
-    setText(text = String()) { this.#button.innerText = text; }
-    addClickListener(listener = () => {}) { this.#button.addEventListener('click', listener); }
-    setDisabled(boolean = Boolean()) {
-        this.#button.disabled = boolean
-    }
-    set() { return this.#chui_button; }
-}
-
+const {Icon} = require("../chui_icons/icons");
+
+class Button {
+    #chui_button = document.createElement('chui_button');
+    #button = document.createElement('button');
+    #button_text = document.createElement('button_text');
+    #button_icon = document.createElement('button_icon');
+    constructor(options = { reverse: Boolean(), title: String(), icon: undefined, clickEvent: () => {} }) {
+        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", "chUiJS_Button")
+
+        this.#button.className = "chui_button"
+        this.#button_text.className = "chui_button_text"
+
+        if (options.title !== undefined) this.#button_text.innerText = options.title;
+        if (options.icon !== undefined) this.#button_icon.innerHTML = new Icon(options.icon, "var(--header_icon_size)").getHTML();
+
+        if (options.title !== undefined && options.icon === undefined) {
+            this.#button.appendChild(this.#button_text);
+        } else if (options.title === undefined && options.icon !== undefined) {
+            this.#button.style.padding = "var(--test_padding)"
+            this.#button.appendChild(this.#button_icon);
+        } else {
+            if (options.reverse) {
+                this.#button.appendChild(this.#button_icon);
+                this.#button_text.style.marginLeft = "var(--test_padding)";
+                this.#button.appendChild(this.#button_text);
+            } else {
+                this.#button.appendChild(this.#button_text);
+                this.#button_icon.style.marginLeft = "var(--test_padding)";
+                this.#button.appendChild(this.#button_icon);
+            }
+        }
+
+        if (options.clickEvent !== undefined) this.#button.addEventListener('click', options.clickEvent);
+        this.#button.addEventListener("mousedown", () => {
+            return false
+        })
+        this.#chui_button.appendChild(this.#button)
+    }
+    getText() { return this.#button.innerText; }
+    setText(text = String()) { this.#button.innerText = text; }
+    addClickListener(listener = () => {}) { this.#button.addEventListener('click', listener); }
+    setDisabled(boolean = Boolean()) {
+        this.#button.disabled = boolean
+    }
+    set() { return this.#chui_button; }
+}
+
 exports.Button = Button

package/framework/components/chui_button/styles.css

@@ -1,71 +1,76 @@
-chui_button {
-    cursor: pointer;
-    height: max-content;
-    width: max-content;
-    border-radius: var(--border_radius);
-    margin: var(--margin);
-}
-
-.chui_button {
-    cursor: pointer;
-    height: max-content;
-    width: max-content;
-    border-radius: var(--border_radius);
-    padding: var(--main_padding);
-    font-size: var(--font_default_size);
-    font-weight: 400;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    background: var(--button_background);
-    border: 1px solid var(--button_border_color);
-}
-
-.chui_button:hover {
-    background: var(--button_background_hover);
-    border: 1px solid var(--button_border_color_hover);
-}
-
-.chui_button_text {
-    color: var(--text_color);
-}
-
-.chui_button:hover .chui_button_text {
-    color: var(--text_color_hover);
-}
-
-.chui_button button_icon chui_icon {
-    color: var(--text_color);
-}
-
-.chui_button:hover button_icon chui_icon {
-    color: var(--text_color_hover);
-}
-/* DISABLED STYLES */
-.chui_button:disabled {
-    cursor: not-allowed;
-    color: var(--text_color_disabled);
-    background: var(--button_background_disabled);
-    border: 1px solid var(--button_border_color);
-}
-.chui_button:disabled:hover {
-    background: var(--button_background_disabled);
-    color: var(--text_color_disabled);
-}
-
-.chui_button:disabled .chui_button_text {
-    color: var(--text_color_disabled);
-}
-
-.chui_button:disabled:hover .chui_button_text {
-    color: var(--text_color_disabled);
-}
-
-.chui_button:disabled button_icon chui_icon {
-    color: var(--text_color_disabled);
-}
-
-.chui_button:disabled:hover button_icon chui_icon {
-    color: var(--text_color_disabled);
+chui_button {
+    cursor: pointer;
+    height: max-content;
+    width: max-content;
+    border-radius: var(--border_radius);
+    margin: var(--margin);
+}
+
+.chui_button {
+    cursor: pointer;
+    height: max-content;
+    width: max-content;
+    border-radius: var(--border_radius);
+    padding: var(--main_padding);
+    font-size: var(--font_default_size);
+    font-weight: 400;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    background: var(--button_background);
+    border: 1px solid var(--button_border_color);
+}
+
+.chui_button:hover {
+    background: var(--button_background_hover);
+    border: 1px solid var(--button_border_color_hover);
+}
+
+.chui_button:active:not(:disabled) {
+    background: var(--element_background_prime);
+    border: 1px solid var(--button_border_color_hover);
+}
+
+.chui_button_text {
+    color: var(--text_color);
+}
+
+.chui_button:hover .chui_button_text {
+    color: var(--text_color_hover);
+}
+
+.chui_button button_icon chui_icon {
+    color: var(--text_color);
+}
+
+.chui_button:hover button_icon chui_icon {
+    color: var(--text_color_hover);
+}
+/* DISABLED STYLES */
+.chui_button:disabled {
+    cursor: not-allowed;
+    color: var(--text_color_disabled);
+    background: var(--button_background_disabled);
+    border: 1px solid var(--button_border_color);
+}
+.chui_button:disabled:hover {
+    background: var(--button_background_disabled);
+    color: var(--text_color_disabled);
+}
+
+.chui_button:disabled .chui_button_text {
+    color: var(--text_color_disabled);
+}
+
+.chui_button:disabled:hover .chui_button_text {
+    color: var(--text_color_disabled);
+}
+
+.chui_button:disabled button_icon chui_icon {
+    color: var(--text_color_disabled);
+}
+
+.chui_button:disabled:hover button_icon chui_icon {
+    color: var(--text_color_disabled);
 }

package/framework/components/chui_calendar/calendar.js

@@ -1,98 +1,98 @@
-class Calendar {
-    constructor(year, month) {
-        this.year = year;
-        this.month = month - 1;
-        this.calendar = [
-            new Array(7),
-            new Array(7),
-            new Array(7),
-            new Array(7),
-            new Array(7),
-            new Array(7),
-            new Array(7)
-        ];
-
-        for (let i = 0; i < 35; i++) {
-            let dayzz = new Date(this.year, this.month, i+1);
-            if (dayzz.getDay() === 0) {
-                this.calendar[0][0] = dayzz.toLocaleString("default", { weekday: 'short' }).toUpperCase();
-            }
-            if (dayzz.getDay() === 1) {
-                this.calendar[0][1] = dayzz.toLocaleString("default", { weekday: 'short' }).toUpperCase();
-            }
-            if (dayzz.getDay() === 2) {
-                this.calendar[0][2] = dayzz.toLocaleString("default", { weekday: 'short' }).toUpperCase();
-            }
-            if (dayzz.getDay() === 3) {
-                this.calendar[0][3] = dayzz.toLocaleString("default", { weekday: 'short' }).toUpperCase();
-            }
-            if (dayzz.getDay() === 4) {
-                this.calendar[0][4] = dayzz.toLocaleString("default", { weekday: 'short' }).toUpperCase();
-            }
-            if (dayzz.getDay() === 5) {
-                this.calendar[0][5] = dayzz.toLocaleString("default", { weekday: 'short' }).toUpperCase();
-            }
-            if (dayzz.getDay() === 6) {
-                this.calendar[0][6] = dayzz.toLocaleString("default", { weekday: 'short' }).toUpperCase();
-            }
-        }
-
-        this.list = [];
-        this.date = new Date(this.year, this.month, 1);
-        /*let optionz = {
-            era: 'long',
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-            weekday: 'long',
-            timezone: 'UTC',
-            hour: 'numeric',
-            minute: 'numeric',
-            second: 'numeric'
-        };*/
-        while (this.date.getMonth() === this.month) {
-            let dayToPush = this.date;
-            let days = [];
-            days.push(dayToPush.toLocaleString('default', {day: 'numeric'}));
-            days.push(dayToPush.toLocaleString('default', {weekday: 'short'}).toUpperCase());
-            days.push(dayToPush.toLocaleString('default', {month: 'long'}).toUpperCase());
-            this.date.setDate(this.date.getDate() + 1);
-            this.list.push(days)
-        }
-        let index = 1;
-        for (let day of this.list) {
-            for (let name_day of this.calendar[0]) {
-                let indexz = this.calendar[0].indexOf(name_day);
-                if (day[1].includes(name_day)) {
-                    this.calendar[index][indexz] = day[0];
-                    if (indexz === 6) {
-                        index++;
-                    }
-                }
-            }
-        }
-    }
-    getDateNow() {
-        return new Date();
-    }
-    getMonthName() {
-        return new Date(this.year, this.month).toLocaleString('default', {month: 'long'}).toUpperCase();
-    }
-    getDayName() {
-        return new Date(this.year, this.month).toLocaleString("default", { weekday: 'long' }).toUpperCase();
-    }
-    getDate() {
-        return new Date(this.year, this.month).getDate();
-    }
-    getMonth() {
-        return new Date(this.year, this.month).getMonth();
-    }
-    getYear() {
-        return new Date(this.year, this.month).getFullYear();
-    }
-    getCalendar() {
-        return this.calendar;
-    }
-}
-
+class Calendar {
+    constructor(year, month) {
+        this.year = year;
+        this.month = month - 1;
+        this.calendar = [
+            new Array(7),
+            new Array(7),
+            new Array(7),
+            new Array(7),
+            new Array(7),
+            new Array(7),
+            new Array(7)
+        ];
+
+        for (let i = 0; i < 35; i++) {
+            let dayzz = new Date(this.year, this.month, i+1);
+            if (dayzz.getDay() === 0) {
+                this.calendar[0][0] = dayzz.toLocaleString("default", { weekday: 'short' }).toUpperCase();
+            }
+            if (dayzz.getDay() === 1) {
+                this.calendar[0][1] = dayzz.toLocaleString("default", { weekday: 'short' }).toUpperCase();
+            }
+            if (dayzz.getDay() === 2) {
+                this.calendar[0][2] = dayzz.toLocaleString("default", { weekday: 'short' }).toUpperCase();
+            }
+            if (dayzz.getDay() === 3) {
+                this.calendar[0][3] = dayzz.toLocaleString("default", { weekday: 'short' }).toUpperCase();
+            }
+            if (dayzz.getDay() === 4) {
+                this.calendar[0][4] = dayzz.toLocaleString("default", { weekday: 'short' }).toUpperCase();
+            }
+            if (dayzz.getDay() === 5) {
+                this.calendar[0][5] = dayzz.toLocaleString("default", { weekday: 'short' }).toUpperCase();
+            }
+            if (dayzz.getDay() === 6) {
+                this.calendar[0][6] = dayzz.toLocaleString("default", { weekday: 'short' }).toUpperCase();
+            }
+        }
+
+        this.list = [];
+        this.date = new Date(this.year, this.month, 1);
+        /*let optionz = {
+            era: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            weekday: 'long',
+            timezone: 'UTC',
+            hour: 'numeric',
+            minute: 'numeric',
+            second: 'numeric'
+        };*/
+        while (this.date.getMonth() === this.month) {
+            let dayToPush = this.date;
+            let days = [];
+            days.push(dayToPush.toLocaleString('default', {day: 'numeric'}));
+            days.push(dayToPush.toLocaleString('default', {weekday: 'short'}).toUpperCase());
+            days.push(dayToPush.toLocaleString('default', {month: 'long'}).toUpperCase());
+            this.date.setDate(this.date.getDate() + 1);
+            this.list.push(days)
+        }
+        let index = 1;
+        for (let day of this.list) {
+            for (let name_day of this.calendar[0]) {
+                let indexz = this.calendar[0].indexOf(name_day);
+                if (day[1].includes(name_day)) {
+                    this.calendar[index][indexz] = day[0];
+                    if (indexz === 6) {
+                        index++;
+                    }
+                }
+            }
+        }
+    }
+    getDateNow() {
+        return new Date();
+    }
+    getMonthName() {
+        return new Date(this.year, this.month).toLocaleString('default', {month: 'long'}).toUpperCase();
+    }
+    getDayName() {
+        return new Date(this.year, this.month).toLocaleString("default", { weekday: 'long' }).toUpperCase();
+    }
+    getDate() {
+        return new Date(this.year, this.month).getDate();
+    }
+    getMonth() {
+        return new Date(this.year, this.month).getMonth();
+    }
+    getYear() {
+        return new Date(this.year, this.month).getFullYear();
+    }
+    getCalendar() {
+        return this.calendar;
+    }
+}
+
 exports.Calendar = Calendar

package/framework/components/chui_card/card.js

@@ -0,0 +1,87 @@
+const {Icon} = require("../chui_icons/icons");
+
+class Card {
+    #chui_card = document.createElement("chui_card");
+    #head;
+    #icon;
+    #titles;
+    #title;
+    #description;
+    #body = document.createElement("card_body");
+    constructor(options = {
+        id: String(),
+        title: String(),
+        description: String(),
+        icon: String(),
+        width: String(),
+        height: String(),
+        style: String(),
+        components: []
+    }) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", 'chUiJS_Card');
+        if (options.id !== undefined) this.#chui_card.id = options.id;
+        if (options.style !== undefined) this.#chui_card.classList.add(options.style);
+        if (options.width !== undefined) this.#chui_card.style.width = options.width;
+        if (options.height !== undefined) this.#chui_card.style.height = options.height;
+        this.#chui_card.appendChild(this.#body);
+        if (options.icon !== undefined) this.setIcon(options.icon);
+        if (options.title !== undefined) this.setTitle(options.title);
+        if (options.description !== undefined) this.setDescription(options.description);
+        if (options.components !== undefined) this.add(...options.components);
+    }
+    // GET
+    getId() { return this.#chui_card.id; }
+    getTitle() { return this.#title === undefined ? "" : this.#title.innerText; }
+    getDescription() { return this.#description === undefined ? "" : this.#description.innerText; }
+    getBody() { return this.#body; }
+    // SET
+    setId(id = String()) { this.#chui_card.id = id; }
+    setStyle(style = String()) { this.#chui_card.classList.add(style); }
+    setWidth(width = String()) { this.#chui_card.style.width = width; }
+    setHeight(height = String()) { this.#chui_card.style.height = height; }
+    setIcon(icon = String()) {
+        if (this.#icon === undefined) {
+            this.#icon = document.createElement("card_icon");
+            this.#headNode().prepend(this.#icon);
+        }
+        this.#icon.innerHTML = new Icon(icon, "20px").getHTML();
+    }
+    setTitle(text = String()) {
+        if (this.#title === undefined) {
+            this.#title = document.createElement("card_title");
+            this.#titlesNode().appendChild(this.#title);
+        }
+        this.#title.innerText = text;
+    }
+    setDescription(text = String()) {
+        if (this.#description === undefined) {
+            this.#description = document.createElement("card_description");
+            this.#titlesNode().appendChild(this.#description);
+        }
+        this.#description.innerText = text;
+    }
+    // FUNCTIONS
+    add(...components) {
+        for (let component of components) this.#body.appendChild(component.set());
+    }
+    clear() { this.#body.innerHTML = ""; }
+    // Шапка создаётся при первом обращении и всегда стоит выше тела
+    #headNode() {
+        if (this.#head === undefined) {
+            this.#head = document.createElement("card_head");
+            this.#chui_card.prepend(this.#head);
+        }
+        return this.#head;
+    }
+    #titlesNode() {
+        if (this.#titles === undefined) {
+            this.#titles = document.createElement("card_titles");
+            this.#headNode().appendChild(this.#titles);
+        }
+        return this.#titles;
+    }
+    // RENDER
+    set() { return this.#chui_card; }
+}
+
+exports.Card = Card

package/framework/components/chui_card/styles.css

@@ -0,0 +1,72 @@
+chui_card {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    box-sizing: border-box;
+    width: max-content;
+    height: max-content;
+    padding: 14px 16px 16px 16px;
+    border: 1px solid var(--border_color);
+    border-radius: var(--radius_md);
+    background: var(--element_background_2);
+    box-shadow: var(--box_shadow_main);
+    font-size: var(--font_default_size);
+    color: var(--text_color);
+    text-align: left;
+}
+
+chui_card card_head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--border_color);
+}
+
+chui_card card_icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: 36px;
+    height: 36px;
+    border-radius: var(--radius_sm);
+    background: var(--button_background);
+}
+
+chui_card card_icon chui_icon {
+    font-size: 20px;
+    color: var(--blue_prime_background);
+}
+
+chui_card card_titles {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    min-width: 0;
+}
+
+chui_card card_title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--text_color);
+}
+
+chui_card card_description {
+    font-size: 12px;
+    color: var(--text_color_disabled);
+}
+
+chui_card card_body {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    width: -webkit-fill-available;
+}
+
+/* У <p> из chui_paragraph ширина max-content, поэтому абзац растягиваем по карточке */
+chui_card card_body > p {
+    align-self: stretch;
+    width: -webkit-fill-available;
+}