chuijs 3.6.2 → 3.6.4

package/framework/components/chui_custom_element/custom_element.js

@@ -1,25 +1,25 @@
-class CustomElement {
-    #chui_custom_element = undefined
-    constructor(options = {
-        tag: String(), id: String(), className: String(), pathToCSS: String()
-    }) {
-        if (options.tag === undefined) throw new Error("Не установлен тэг элемента")
-        this.#chui_custom_element = document.createElement(options.tag);
-        if (options.id === undefined) throw new Error("Не установлен идентификатор элемента")
-        require('../../modules/chui_functions').setStyles(options.pathToCSS, `chUiJS_CustomElement_${options.id}`)
-        this.#chui_custom_element.id = options.id
-        this.#chui_custom_element.className = options.className
-    }
-    addEventListener(type = String(), listener = () => {}) {
-        this.#chui_custom_element.addEventListener(type, listener)
-    }
-    innerText(innerText = String()) {
-        this.#chui_custom_element.innerText = innerText
-    }
-    innerHTML(innerHTML = String()) {
-        this.#chui_custom_element.innerHTML = innerHTML
-    }
-    set() { return this.#chui_custom_element }
-}
-
+class CustomElement {
+    #chui_custom_element = undefined
+    constructor(options = {
+        tag: String(), id: String(), className: String(), pathToCSS: String()
+    }) {
+        if (options.tag === undefined) throw new Error("Не установлен тэг элемента")
+        this.#chui_custom_element = document.createElement(options.tag);
+        if (options.id === undefined) throw new Error("Не установлен идентификатор элемента")
+        require('../../modules/chui_functions').setStyles(options.pathToCSS, `chUiJS_CustomElement_${options.id}`)
+        this.#chui_custom_element.id = options.id
+        this.#chui_custom_element.className = options.className
+    }
+    addEventListener(type = String(), listener = () => {}) {
+        this.#chui_custom_element.addEventListener(type, listener)
+    }
+    innerText(innerText = String()) {
+        this.#chui_custom_element.innerText = innerText
+    }
+    innerHTML(innerHTML = String()) {
+        this.#chui_custom_element.innerHTML = innerHTML
+    }
+    set() { return this.#chui_custom_element }
+}
+
 exports.CustomElement = CustomElement

package/framework/components/chui_details/details.js

@@ -1,86 +1,86 @@
-const {Icon, Icons} = require("../chui_icons/icons");
-
-class Details {
-    #name = require("randomstring").generate();
-    #chui_details = document.createElement(`chui_details`);
-    //
-    #ab = document.createElement('details_button')
-    #bt = document.createElement('details_button_text')
-    #barrow = document.createElement('details_button_arrow')
-    //
-    #ap = document.createElement('details_panel')
-    #html = document.createElement('details_panel_html')
-    #direction;
-    #wrap;
-    #align;
-    #justify;
-    #width;
-    constructor(options = {
-        title: String(), contenteditable: Boolean(),
-        direction: String(), wrap: String(), align: String(),
-        justify: String(), width: String()
-    }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Details');
-        this.#direction = options.direction;
-        this.#wrap = options.wrap;
-        this.#align = options.align;
-        this.#justify = options.justify;
-        this.#width = options.width;
-        this.#html.setAttribute('contenteditable', options.contenteditable);
-
-        if (this.#direction !== undefined) this.#html.style.flexDirection = this.#direction;
-        if (this.#wrap !== undefined) this.#html.style.flexWrap = this.#wrap;
-        if (this.#align !== undefined) this.#html.style.alignItems = this.#align;
-        if (this.#justify !== undefined) this.#html.style.justifyContent = this.#justify;
-        if (this.#width !== undefined) {
-            this.#chui_details.style.width = this.#width;
-            this.#ab.style.width = this.#width;
-            this.#ap.style.width = this.#width;
-            this.#html.style.width = this.#width;
-        }
-
-        this.#ab.setAttribute('name', this.#name)
-        this.#bt.innerText = options.title;
-        this.#barrow.style.marginLeft = 'auto'
-        this.#barrow.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN).getHTML();
-        this.#ab.appendChild(this.#bt)
-        this.#ab.appendChild(this.#barrow)
-        this.#ap.appendChild(this.#html)
-        this.#chui_details.appendChild(this.#ab)
-        this.#chui_details.appendChild(this.#ap)
-
-        //ФУНКЦИИ
-        let test = this.#chui_details.children;
-        let i;
-        for (i = 0; i < test.length; i++) {
-            let elem = test[i];
-            if (elem.tagName === 'DETAILS_BUTTON') {
-                elem.addEventListener('click', () => {
-                    elem.classList.toggle('details_active')
-                    let panel = elem.nextElementSibling;
-                    if (panel.style.maxHeight) {
-                        elem.children[1].children[0].style.transform = 'rotate(0deg)'
-                        panel.style.maxHeight = null;
-                        elem.style.borderBottomLeftRadius = 'var(--border_radius)'
-                        elem.style.borderBottomRightRadius = 'var(--border_radius)'
-                    } else {
-                        elem.children[1].children[0].style.transform = 'rotate(180deg)'
-                        elem.style.borderBottomLeftRadius = '0px'
-                        elem.style.borderBottomRightRadius = '0px'
-                        panel.style.maxHeight = panel.scrollHeight + "px";
-                    }
-                })
-            }
-        }
-    }
-    add(...components) {
-        for (let component of components) {
-            this.#html.appendChild(component.set());
-        }
-    }
-    set() {
-        return this.#chui_details;
-    }
-}
-
+const {Icon, Icons} = require("../chui_icons/icons");
+
+class Details {
+    #name = require("randomstring").generate();
+    #chui_details = document.createElement(`chui_details`);
+    //
+    #ab = document.createElement('details_button')
+    #bt = document.createElement('details_button_text')
+    #barrow = document.createElement('details_button_arrow')
+    //
+    #ap = document.createElement('details_panel')
+    #html = document.createElement('details_panel_html')
+    #direction;
+    #wrap;
+    #align;
+    #justify;
+    #width;
+    constructor(options = {
+        title: String(), contenteditable: Boolean(),
+        direction: String(), wrap: String(), align: String(),
+        justify: String(), width: String()
+    }) {
+        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Details');
+        this.#direction = options.direction;
+        this.#wrap = options.wrap;
+        this.#align = options.align;
+        this.#justify = options.justify;
+        this.#width = options.width;
+        this.#html.setAttribute('contenteditable', options.contenteditable);
+
+        if (this.#direction !== undefined) this.#html.style.flexDirection = this.#direction;
+        if (this.#wrap !== undefined) this.#html.style.flexWrap = this.#wrap;
+        if (this.#align !== undefined) this.#html.style.alignItems = this.#align;
+        if (this.#justify !== undefined) this.#html.style.justifyContent = this.#justify;
+        if (this.#width !== undefined) {
+            this.#chui_details.style.width = this.#width;
+            this.#ab.style.width = this.#width;
+            this.#ap.style.width = this.#width;
+            this.#html.style.width = this.#width;
+        }
+
+        this.#ab.setAttribute('name', this.#name)
+        this.#bt.innerText = options.title;
+        this.#barrow.style.marginLeft = 'auto'
+        this.#barrow.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN).getHTML();
+        this.#ab.appendChild(this.#bt)
+        this.#ab.appendChild(this.#barrow)
+        this.#ap.appendChild(this.#html)
+        this.#chui_details.appendChild(this.#ab)
+        this.#chui_details.appendChild(this.#ap)
+
+        //ФУНКЦИИ
+        let test = this.#chui_details.children;
+        let i;
+        for (i = 0; i < test.length; i++) {
+            let elem = test[i];
+            if (elem.tagName === 'DETAILS_BUTTON') {
+                elem.addEventListener('click', () => {
+                    elem.classList.toggle('details_active')
+                    let panel = elem.nextElementSibling;
+                    if (panel.style.maxHeight) {
+                        elem.children[1].children[0].style.transform = 'rotate(0deg)'
+                        panel.style.maxHeight = null;
+                        elem.style.borderBottomLeftRadius = 'var(--border_radius)'
+                        elem.style.borderBottomRightRadius = 'var(--border_radius)'
+                    } else {
+                        elem.children[1].children[0].style.transform = 'rotate(180deg)'
+                        elem.style.borderBottomLeftRadius = '0px'
+                        elem.style.borderBottomRightRadius = '0px'
+                        panel.style.maxHeight = panel.scrollHeight + "px";
+                    }
+                })
+            }
+        }
+    }
+    add(...components) {
+        for (let component of components) {
+            this.#html.appendChild(component.set());
+        }
+    }
+    set() {
+        return this.#chui_details;
+    }
+}
+
 exports.Details = Details

package/framework/components/chui_details/styles.css

@@ -1,67 +1,71 @@
-chui_details {
-    display: flex;
-    flex-direction: column;
-    height: max-content;
-    width: max-content;
-    margin: var(--margin);
-    font-size: var(--font_default_size);
-    font-weight:400;
-    border-radius: var(--border_radius);
-    border: none;
-}
-
-details_button {
-    background: var(--element_background);
-    cursor: pointer;
-    padding: var(--main_padding);
-    font-size: var(--font_default_size);
-    width: -webkit-fill-available;
-    text-align: left;
-    outline: none;
-    display: flex;
-    align-items: center;
-    border-radius: var(--border_radius);
-    color: var(--text_color);
-    border: none;
-}
-
-details_panel {
-    background: var(--header_background);
-    padding: 0 10px;
-    display: block;
-    overflow: hidden;
-    width: -webkit-fill-available;
-    max-height: 0;
-    border-bottom-right-radius: var(--border_radius);
-    border-bottom-left-radius: var(--border_radius);
-    color: var(--text_color);
-    border: none;
-}
-
-details_panel_html {
-    padding: 8px 0;
-    width: -webkit-fill-available;
-    display: flex
-}
-
-details_button:hover {
-    background: var(--blue_prime_background);
-}
-
-details_button:hover details_button_text {
-    color: var(--text_color_hover);
-}
-
-details_button:hover chui_icon {
-    color: var(--text_color_hover);
-}
-
-.details_active {
-    background: var(--blue_prime_background);
-    color: var(--text_color_hover);
-}
-
-.details_active chui_icon {
-    background: transparent;
-    color: var(--text_color_hover);
+chui_details {
+    display: flex;
+    flex-direction: column;
+    height: max-content;
+    width: max-content;
+    margin: var(--margin);
+    font-size: var(--font_default_size);
+    font-weight:400;
+    border-radius: var(--border_radius);
+    border: none;
+}
+
+details_button {
+    background: var(--element_background);
+    cursor: pointer;
+    padding: var(--main_padding);
+    font-size: var(--font_default_size);
+    width: -webkit-fill-available;
+    text-align: left;
+    outline: none;
+    display: flex;
+    align-items: center;
+    border-radius: var(--border_radius);
+    color: var(--text_color);
+    border: none;
+}
+
+details_panel {
+    background: var(--element_background);
+    padding: 0 10px;
+    display: block;
+    overflow: hidden;
+    width: -webkit-fill-available;
+    max-height: 0;
+    border-bottom-right-radius: var(--border_radius);
+    border-bottom-left-radius: var(--border_radius);
+    color: var(--text_color);
+    border: none;
+}
+
+details_panel_html {
+    padding: 8px 0;
+    width: -webkit-fill-available;
+    display: flex
+}
+
+details_button:hover {
+    background: var(--blue_prime_background);
+}
+
+details_button:active {
+    background: var(--element_background_prime);
+}
+
+details_button:hover details_button_text {
+    color: var(--text_color_hover);
+}
+
+details_button:hover chui_icon {
+    color: var(--text_color_hover);
+}
+
+.details_active {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+.details_active chui_icon {
+    background: transparent;
+    color: var(--text_color_hover);
 }

package/framework/components/chui_fieldset/fieldset.js

@@ -1,41 +1,41 @@
-class FieldSet {
-    #chui_fieldset = document.createElement('chui_fieldset');
-    #fieldset = document.createElement("fieldset")
-    #legend = document.createElement("legend")
-    constructor(options = {
-        id: String(), name: String(), title: String(),
-        style: {
-            width: String(), height: String(),
-            direction: String(), wrap: String(),
-            align: String(), justify: String(),
-        },
-        components: []
-    }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_FieldSet');
-        if (options.id !== undefined) this.#fieldset.id = options.id;
-        if (options.name !== undefined) this.#fieldset.name = options.name;
-        this.#legend.innerText = options.title;
-        // Установка стилей
-        if (options.style !== undefined) {
-            // Размер
-            if (options.style.width !== undefined) this.#chui_fieldset.style.width = options.style.width;
-            if (options.style.height !== undefined) this.#fieldset.style.height = options.style.height;
-            // Расположение
-            if (options.style.direction !== undefined) this.#fieldset.style.flexDirection = options.style.direction;
-            if (options.style.wrap !== undefined) this.#fieldset.style.flexWrap = options.style.wrap;
-            if (options.style.align !== undefined) this.#fieldset.style.alignItems = options.style.align;
-            if (options.style.justify !== undefined) this.#fieldset.style.justifyContent = options.style.justify;
-        }
-        //
-        this.#fieldset.appendChild(this.#legend);
-        this.#chui_fieldset.appendChild(this.#fieldset);
-        if (options.components.length !== 0) for (let component of options.components) this.#fieldset.appendChild(component.set());
-    }
-    getId() { return this.#fieldset.id; }
-    getLegend() { return this.#legend.innerText; }
-    setLegend(text = String()) { return this.#legend.innerText = text; }
-    add(...components) { for (let component of components) this.#fieldset.appendChild(component.set()); }
-    set() { return this.#chui_fieldset; }
-}
-
+class FieldSet {
+    #chui_fieldset = document.createElement('chui_fieldset');
+    #fieldset = document.createElement("fieldset")
+    #legend = document.createElement("legend")
+    constructor(options = {
+        id: String(), name: String(), title: String(),
+        style: {
+            width: String(), height: String(),
+            direction: String(), wrap: String(),
+            align: String(), justify: String(),
+        },
+        components: []
+    }) {
+        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_FieldSet');
+        if (options.id !== undefined) this.#fieldset.id = options.id;
+        if (options.name !== undefined) this.#fieldset.name = options.name;
+        this.#legend.innerText = options.title;
+        // Установка стилей
+        if (options.style !== undefined) {
+            // Размер
+            if (options.style.width !== undefined) this.#chui_fieldset.style.width = options.style.width;
+            if (options.style.height !== undefined) this.#fieldset.style.height = options.style.height;
+            // Расположение
+            if (options.style.direction !== undefined) this.#fieldset.style.flexDirection = options.style.direction;
+            if (options.style.wrap !== undefined) this.#fieldset.style.flexWrap = options.style.wrap;
+            if (options.style.align !== undefined) this.#fieldset.style.alignItems = options.style.align;
+            if (options.style.justify !== undefined) this.#fieldset.style.justifyContent = options.style.justify;
+        }
+        //
+        this.#fieldset.appendChild(this.#legend);
+        this.#chui_fieldset.appendChild(this.#fieldset);
+        if (options.components.length !== 0) for (let component of options.components) this.#fieldset.appendChild(component.set());
+    }
+    getId() { return this.#fieldset.id; }
+    getLegend() { return this.#legend.innerText; }
+    setLegend(text = String()) { return this.#legend.innerText = text; }
+    add(...components) { for (let component of components) this.#fieldset.appendChild(component.set()); }
+    set() { return this.#chui_fieldset; }
+}
+
 exports.FieldSet = FieldSet

package/framework/components/chui_fieldset/styles.css

@@ -1,25 +1,25 @@
-chui_fieldset {
-    height: max-content;
-    width: max-content;
-    border-radius: var(--border_radius);
-    margin: var(--margin);
-}
-
-fieldset {
-    height: -webkit-fill-available;
-    width: -webkit-fill-available;
-    border: none;
-    border-radius: var(--border_radius);
-    padding: 0 6px 6px 6px;
-    display: flex;
-}
-
-legend {
-    color: var(--blue_prime_background);
-    padding: var(--test_padding);
-    font-size: var(--font_default_size);
-    font-weight: 500;
-    border: none;
-    border-radius: var(--border_radius);
-    margin-left: var(--margin);
+chui_fieldset {
+    height: max-content;
+    width: max-content;
+    border-radius: var(--border_radius);
+    margin: var(--margin);
+}
+
+fieldset {
+    height: -webkit-fill-available;
+    width: -webkit-fill-available;
+    border: none;
+    border-radius: var(--border_radius);
+    padding: 0 6px 6px 6px;
+    display: flex;
+}
+
+legend {
+    color: var(--blue_prime_background);
+    padding: var(--test_padding);
+    font-size: var(--font_default_size);
+    font-weight: 500;
+    border: none;
+    border-radius: var(--border_radius);
+    margin-left: var(--margin);
 }

package/framework/components/chui_form/form.js

@@ -1,41 +1,41 @@
-class Form {
-    #id = require("randomstring").generate();
-    #chui_form_main = document.createElement("chui_form_main")
-    #form = document.createElement("form")
-    constructor(options = {
-        action: String(),
-        method: String(),
-        components: [],
-        submitEvent: () => {}
-    }) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Forms');
-        this.#chui_form_main.id = this.#id;
-        this.#chui_form_main.appendChild(this.#form);
-
-        // Установка компонентов в форму
-        for (let component of options.components) this.#form.appendChild(component.set());
-        // ===
-
-        //Установка опций
-        if (options.action) this.#form.action = options.action;
-        if (options.method) this.#form.method = options.method;
-        if (options.submitEvent !== undefined) this.#form.addEventListener("submit", options.submitEvent);
-        // ===
-    }
-    //addSubmitEvent(listener = () => {}) { this.#form.addEventListener("submit", listener); }
-    set() { return this.#chui_form_main }
-    static SubmitButton(title = String()) { return new SubmitButton(title); }
-    static METHOD = { GET: "GET", POST: "POST" }
-}
-
-class SubmitButton {
-    #submit = document.createElement("input")
-    constructor(title = String()) {
-        this.#submit.classList.add("chui_form_submit_button")
-        this.#submit.type = 'submit';
-        this.#submit.value = title;
-    }
-    set() { return this.#submit; }
-}
-
+class Form {
+    #id = require("randomstring").generate();
+    #chui_form_main = document.createElement("chui_form_main")
+    #form = document.createElement("form")
+    constructor(options = {
+        action: String(),
+        method: String(),
+        components: [],
+        submitEvent: () => {}
+    }) {
+        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Forms');
+        this.#chui_form_main.id = this.#id;
+        this.#chui_form_main.appendChild(this.#form);
+
+        // Установка компонентов в форму
+        for (let component of options.components) this.#form.appendChild(component.set());
+        // ===
+
+        //Установка опций
+        if (options.action) this.#form.action = options.action;
+        if (options.method) this.#form.method = options.method;
+        if (options.submitEvent !== undefined) this.#form.addEventListener("submit", options.submitEvent);
+        // ===
+    }
+    //addSubmitEvent(listener = () => {}) { this.#form.addEventListener("submit", listener); }
+    set() { return this.#chui_form_main }
+    static SubmitButton(title = String()) { return new SubmitButton(title); }
+    static METHOD = { GET: "GET", POST: "POST" }
+}
+
+class SubmitButton {
+    #submit = document.createElement("input")
+    constructor(title = String()) {
+        this.#submit.classList.add("chui_form_submit_button")
+        this.#submit.type = 'submit';
+        this.#submit.value = title;
+    }
+    set() { return this.#submit; }
+}
+
 exports.Form = Form

package/framework/components/chui_form/styles.css

@@ -1,22 +1,22 @@
-chui_form_main {
-    color: var(--text_color);
-}
-
-.chui_form_submit_button {
-    border: none;
-    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;
-    margin: var(--margin);
-    background: var(--element_background_2);
-    color: var(--text_color);
-}
-
-.chui_form_submit_button:hover {
-    background: var(--blue_prime_background);
-    color: var(--text_color_hover);
+chui_form_main {
+    color: var(--text_color);
+}
+
+.chui_form_submit_button {
+    border: none;
+    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;
+    margin: var(--margin);
+    background: var(--button_background);
+    color: var(--text_color);
+}
+
+.chui_form_submit_button:hover {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
 }