chuijs 3.6.2 → 3.6.4

package/framework/components/chui_icons/styles.css

@@ -1,14 +1,14 @@
-chui_icon {
-    font-family: 'chui_mir';
-    font-weight: normal;
-    font-style: normal;
-    font-size: var(--header_icon_size);
-    display: inherit;
-    text-transform: none;
-    word-wrap: normal;
-    white-space: nowrap;
-    direction: ltr;
-    color: var(--text_color);
-    pointer-events: none;
-    transition: all var(--transition_time);
+chui_icon {
+    font-family: 'chui_mir';
+    font-weight: normal;
+    font-style: normal;
+    font-size: var(--header_icon_size);
+    display: inherit;
+    text-transform: none;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+    color: var(--text_color);
+    pointer-events: none;
+    transition: all var(--transition_time);
 }

package/framework/components/chui_inputs/chui_check_box/check_box.js

@@ -1,33 +1,33 @@
-class CheckBox {
-    #id = require("randomstring").generate();
-    #checkBox = document.createElement('checkbox');
-    #input = document.createElement('input');
-    #label = document.createElement('label');
-    constructor(options = { name: String(), title: String(), required: Boolean(), changeListener: () => {} }) {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Checkbox');
-        this.#input.classList.add('checkbox');
-        this.#input.type = 'checkbox';
-        this.#input.classList.add('checkbox_input');
-        this.#input.id = this.#id;
-        this.#label.setAttribute('for', this.#id);
-        this.#label.classList.add('labelz')
-        // Установка опций
-        if (options.name !== undefined) this.#input.name = options.name;
-        if (options.title !== undefined) this.#label.innerText = options.title;
-        if (options.required !== undefined) this.#input.required = options.required;
-        if (options.changeListener !== undefined) this.#input.addEventListener('change', options.changeListener);
-    }
-    getName() { return this.#input.name; }
-    getValue() { return this.#input.checked; }
-    getTitle() { return this.#label.innerText; }
-    setValue(value = Boolean()) { this.#input.checked = value; }
-    addChangeListener(listener = () => {}) { this.#input.addEventListener('change', listener); }
-    setDisabled(boolean = Boolean()) { this.#input.disabled = boolean; }
-    set() {
-        this.#checkBox.appendChild(this.#input);
-        this.#checkBox.appendChild(this.#label);
-        return this.#checkBox;
-    }
-}
-
+class CheckBox {
+    #id = require("randomstring").generate();
+    #checkBox = document.createElement('checkbox');
+    #input = document.createElement('input');
+    #label = document.createElement('label');
+    constructor(options = { name: String(), title: String(), required: Boolean(), changeListener: () => {} }) {
+        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Checkbox');
+        this.#input.classList.add('checkbox');
+        this.#input.type = 'checkbox';
+        this.#input.classList.add('checkbox_input');
+        this.#input.id = this.#id;
+        this.#label.setAttribute('for', this.#id);
+        this.#label.classList.add('labelz')
+        // Установка опций
+        if (options.name !== undefined) this.#input.name = options.name;
+        if (options.title !== undefined) this.#label.innerText = options.title;
+        if (options.required !== undefined) this.#input.required = options.required;
+        if (options.changeListener !== undefined) this.#input.addEventListener('change', options.changeListener);
+    }
+    getName() { return this.#input.name; }
+    getValue() { return this.#input.checked; }
+    getTitle() { return this.#label.innerText; }
+    setValue(value = Boolean()) { this.#input.checked = value; }
+    addChangeListener(listener = () => {}) { this.#input.addEventListener('change', listener); }
+    setDisabled(boolean = Boolean()) { this.#input.disabled = boolean; }
+    set() {
+        this.#checkBox.appendChild(this.#input);
+        this.#checkBox.appendChild(this.#label);
+        return this.#checkBox;
+    }
+}
+
 exports.CheckBox = CheckBox

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

@@ -1,87 +1,92 @@
-checkbox {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: var(--font_default_size);
-    margin: var(--margin);
-    width: max-content
-}
-
-.checkbox {
-    position: absolute;
-    z-index: -1;
-    opacity: 0
-}
-
-.checkbox+label {
-    display: inline-flex;
-    align-items: center;
-    color:var(--text_color)
-}
-
-.checkbox+label::before {
-    font-size: var(--font_default_size);
-    content: '';
-    display: flex;
-    width: 1.2em;
-    height: 1.2em;
-    flex-shrink: 0;
-    flex-grow: 0;
-    border-radius: 25%;
-    margin-right: 10px;
-    align-items: center;
-    justify-content: center;
-    color: var(--element_background_2);
-    font-family: 'chui_Ubuntu', serif;
-    background: var(--element_background);
-    border: none;
-    box-shadow: 0 0 1px 0 var(--element_background_2);
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 50% 50%;
-}
-
-.checkbox:not(:disabled):not(:checked):hover::before {}
-
-.checkbox:disabled:not(:checked)+label::before {
-    cursor: not-allowed;
-    background: var(--element_background_disabled);
-    border: none;
-    box-shadow: 0 0 1px 0 var(--element_background_disabled_2);
-    color: var(--text_color_disabled);
-}
-
-.checkbox:disabled:checked+label::before {
-    cursor: not-allowed;
-    color: var(--text_color_disabled);
-    background: var(--element_background_disabled);
-    border: none;
-    box-shadow: 0 0 1px 0 var(--element_background_disabled_2);
-}
-
-.checkbox:not(:disabled):active+label::before {
-    background-color: var(--blue_prime_background);
-    color:var(--text_color_disabled);
-    border: none;
-    box-shadow: 0 0 1px 0 var(--element_background_disabled_2);
-}
-
-.checkbox:focus+label::before {}
-
-.checkbox:checked+label::before {
-    background-color: var(--blue_prime_background);
-    color:var(--text_color_hover);
-    border: none;
-    box-shadow: 0 0 1px 0 var(--blue_prime_background);
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
-}
-
-.labelz {
-    cursor: pointer;
-    font-size: var(--font_default_size)
-}
-
-.checkbox:disabled+label {
-    cursor: not-allowed;
-    color: var(--text_color_disabled);
+checkbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--font_default_size);
+    margin: var(--margin);
+    width: max-content
+}
+
+.checkbox {
+    position: absolute;
+    z-index: -1;
+    opacity: 0
+}
+
+.checkbox+label {
+    display: inline-flex;
+    align-items: center;
+    color:var(--text_color)
+}
+
+.checkbox+label::before {
+    font-size: var(--font_default_size);
+    content: '';
+    display: flex;
+    width: 1.2em;
+    height: 1.2em;
+    flex-shrink: 0;
+    flex-grow: 0;
+    border-radius: 25%;
+    margin-right: 10px;
+    align-items: center;
+    justify-content: center;
+    color: var(--element_background_2);
+    font-family: 'chui_I';
+    background: var(--element_background);
+    border: none;
+    box-shadow: 0 0 1px 0 var(--border_color);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 50% 50%;
+}
+
+.checkbox:not(:disabled):not(:checked)+label:hover::before {
+    background: var(--element_background_hover);
+}
+
+.checkbox:disabled:not(:checked)+label::before {
+    cursor: not-allowed;
+    background: var(--element_background_disabled);
+    border: none;
+    box-shadow: 0 0 1px 0 var(--border_color);
+    color: var(--text_color_disabled);
+}
+
+.checkbox:disabled:checked+label::before {
+    cursor: not-allowed;
+    color: var(--text_color_disabled);
+    background: var(--element_background_disabled);
+    border: none;
+    box-shadow: 0 0 1px 0 var(--border_color);
+}
+
+.checkbox:not(:disabled):active+label::before {
+    background-color: var(--blue_prime_background);
+    color:var(--text_color_disabled);
+    border: none;
+    box-shadow: 0 0 1px 0 var(--border_color);
+}
+
+.checkbox:focus-visible+label::before {
+    outline: var(--focus_outline);
+    outline-offset: var(--focus_outline_offset);
+}
+
+.checkbox:checked+label::before {
+    background-color: var(--blue_prime_background);
+    color:var(--text_color_hover);
+    border: none;
+    box-shadow: 0 0 1px 0 var(--blue_prime_background);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
+}
+
+.labelz {
+    cursor: pointer;
+    font-size: var(--font_default_size)
+}
+
+.checkbox:disabled+label {
+    cursor: not-allowed;
+    color: var(--text_color_disabled);
 }

package/framework/components/chui_inputs/chui_combo_box/combo_box.js

@@ -1,151 +1,167 @@
-const { Animation } = require('../../../modules/chui_animations/animations');
-const { Icon, Icons } = require('../../chui_icons/icons');
-
-class ComboBox {
-    #id = require("randomstring").generate();
-    #id_cb = require("randomstring").generate();
-    #ComboBox_main = document.createElement('chui_combobox');
-    #ComboBox_second = document.createElement('combobox');
-    #label = document.createElement('label');
-    #input = document.createElement('input');
-    #button_open = document.createElement('combo_button_open');
-    #button_open_disabled = document.createElement('combo_button_open');
-    #dropdown = document.createElement('combobox_dropdown');
-    constructor(options = {
-        name: String(),
-        title: String(),
-        placeholder: String(),
-        width: String(),
-        required: Boolean(),
-        optionsLen: String(),
-    }) {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_ComboBox');
-        if (options.placeholder !== undefined) this.#input.placeholder = options.placeholder;
-        if (options.width !== undefined) this.#ComboBox_main.style.width = options.width;
-        if (options.title !== undefined) {
-            this.#label.classList.add('combobox_label')
-            this.#label.innerText = options.title;
-            this.#label.setAttribute('for', this.#id_cb);
-            this.#ComboBox_main.appendChild(this.#label);
-        }
-        if (options.optionsLen !== undefined) {
-            this.#dropdown.style.height = (33 * options.optionsLen) + "px";
-        } else {
-            this.#dropdown.style.height = "max-content";
-        }
-        if (options.name !== undefined) this.#input.name = options.name;
-        if (options.required !== undefined) this.#input.required = options.required;
-        this.#input.setAttribute('id', this.#id_cb);
-        this.#input.style.boxShadow = 'none';
-        this.#input.classList.add('combobox_input');
-        this.#input.type = 'text';
-        this.#input.addEventListener('focus', () => {
-            this.#ComboBox_second.style.border = '1px solid var(--blue_prime_background)';
-            this.#label.style.color = 'var(--blue_prime_background)';
-        })
-        this.#input.addEventListener('blur', () => {
-            this.#ComboBox_second.removeAttribute("style");
-            this.#label.removeAttribute("style");
-        })
-        this.#button_open.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN, undefined, "var(--blue_prime_background)").getHTML();
-        this.#button_open_disabled.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN, undefined, "var(--text_color_disabled)").getHTML();
-        this.#button_open_disabled.style.cursor = "not-allowed";
-        this.#dropdown.setAttribute('id', this.#id);
-        this.#ComboBox_second.appendChild(this.#input)
-        this.#ComboBox_second.appendChild(this.#button_open)
-        this.#ComboBox_second.appendChild(this.#dropdown)
-        //LISTENERS
-        this.#input.addEventListener('focus', () => {
-            this.#button_open.style.transform = 'rotate(180deg)'
-            this.#ComboBox_second.style.border = '1px solid var(--blue_prime_background)';
-            this.#dropdown.style.height = (33 * options.optionsLen) + "px"
-        })
-        this.#input.addEventListener('blur', () => {
-            this.#button_open.style.transform = 'rotate(0deg)'
-            this.#ComboBox_second.removeAttribute('style')
-            this.#dropdown.style.height = (33 * options.optionsLen) + "px"
-        })
-        this.#ComboBox_second.addEventListener('click', (event) => {
-            if (!this.#input.disabled) {
-                if (event.target.parentNode === this.#ComboBox_second) {
-                    this.#input.focus()
-                    new Animation(this.#dropdown).fadeIn();
-                    setOptionDisplay(document.getElementById(this.#id));
-                }
-            }
-        });
-        window.addEventListener('click', (event) => {
-            if (event.target.parentNode !== this.#ComboBox_second) {
-                new Animation(this.#dropdown).fadeOut();
-            }
-        });
-
-        this.#input.addEventListener('input', (event) => {
-            let dropdown = document.getElementById(this.#id);
-            for (let option of dropdown.childNodes) {
-                if (!option.getAttribute('option_title').toLowerCase().includes(event.target.value.toLowerCase())) {
-                    option.style.display = 'none'
-                    dropdown.style.height = 'max-content'
-                } else {
-                    option.style.display = 'block'
-                    dropdown.style.height = (33 * options.optionsLen) + "px"
-                }
-            }
-        });
-        this.#ComboBox_main.appendChild(this.#ComboBox_second)
-    }
-    addValueChangeListener(listener = () => {}) {
-        this.#ComboBox_main.addEventListener("chui_combo_option_changed", listener)
-    }
-    addOptions(...options) {
-        for (let opt of options) {
-            let option = document.createElement(`combobox_option`);
-            option.innerHTML = opt.title;
-            option.setAttribute('option_title', opt.title);
-            option.setAttribute('option_value', opt.value);
-            option.addEventListener('click', () => {
-                const eventAwesome = new CustomEvent("chui_combo_option_changed", {
-                    detail: {
-                        title: option.getAttribute('option_title'),
-                        value: option.getAttribute('option_value')
-                    },
-                });
-                this.#ComboBox_main.dispatchEvent(eventAwesome)
-                this.#input.value = option.getAttribute('option_title');
-                this.#ComboBox_main.setAttribute("option_title", option.getAttribute('option_title'));
-                this.#ComboBox_main.setAttribute("option_value", option.getAttribute('option_value'));
-            });
-            this.#dropdown.appendChild(option);
-        }
-    }
-    getName() { return this.#input.name; }
-    getValue() { return this.#ComboBox_main.getAttribute("option_value"); }
-    setDisabled(boolean = Boolean()) {
-        this.#input.disabled = boolean
-        if (boolean) {
-            this.#ComboBox_second.classList.add("combobox_disabled")
-            this.#input.className = "combobox_input_disabled"
-            this.#label.className = "combobox_label_disabled"
-            this.#button_open.remove();
-            this.#ComboBox_second.appendChild(this.#button_open_disabled);
-        } else {
-            this.#ComboBox_second.classList.remove("combobox_disabled")
-            this.#input.className = "combobox_input"
-            this.#label.className = "combobox_label"
-            this.#button_open_disabled.remove();
-            this.#ComboBox_second.appendChild(this.#button_open);
-        }
-    }
-    clear() {
-        this.#ComboBox_main.removeAttribute("option_title");
-        this.#ComboBox_main.removeAttribute("option_value");
-        this.#input.value = ""
-    }
-    set() { return this.#ComboBox_main; }
-}
-
-function setOptionDisplay(element) {
-    for (let option of element.childNodes) { option.style.display = 'block'; }
-}
-
+const { Animation } = require('../../../modules/chui_animations/animations');
+const { shouldOpenDropdownUp } = require('../../../modules/chui_functions');
+const { Icon, Icons } = require('../../chui_icons/icons');
+
+const OPTION_ROW_HEIGHT = 33;
+
+class ComboBox {
+    #id = require("randomstring").generate();
+    #id_cb = require("randomstring").generate();
+    #ComboBox_main = document.createElement('chui_combobox');
+    #ComboBox_second = document.createElement('combobox');
+    #label = document.createElement('label');
+    #input = document.createElement('input');
+    #button_open = document.createElement('combo_button_open');
+    #button_open_disabled = document.createElement('combo_button_open');
+    #dropdown = document.createElement('combobox_dropdown');
+    #dropdown_height = "max-content";
+    constructor(options = {
+        name: String(),
+        title: String(),
+        placeholder: String(),
+        width: String(),
+        required: Boolean(),
+        optionsLen: String(),
+    }) {
+        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_ComboBox');
+        if (options.placeholder !== undefined) this.#input.placeholder = options.placeholder;
+        if (options.width !== undefined) this.#ComboBox_main.style.width = options.width;
+        if (options.title !== undefined) {
+            this.#label.classList.add('combobox_label')
+            this.#label.innerText = options.title;
+            this.#label.setAttribute('for', this.#id_cb);
+            this.#ComboBox_main.appendChild(this.#label);
+        }
+        if (options.optionsLen !== undefined) {
+            this.#dropdown_height = (OPTION_ROW_HEIGHT * options.optionsLen) + "px";
+        }
+        this.#dropdown.style.height = this.#dropdown_height;
+        if (options.name !== undefined) this.#input.name = options.name;
+        if (options.required !== undefined) this.#input.required = options.required;
+        this.#input.setAttribute('id', this.#id_cb);
+        this.#input.style.boxShadow = 'none';
+        this.#input.classList.add('combobox_input');
+        this.#input.type = 'text';
+        this.#input.addEventListener('focus', () => {
+            this.#ComboBox_second.style.border = '1px solid var(--blue_prime_background)';
+            this.#label.style.color = 'var(--blue_prime_background)';
+        })
+        this.#input.addEventListener('blur', () => {
+            this.#ComboBox_second.removeAttribute("style");
+            this.#label.removeAttribute("style");
+        })
+        this.#button_open.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN, undefined, "var(--blue_prime_background)").getHTML();
+        this.#button_open_disabled.innerHTML = new Icon(Icons.HARDWARE.KEYBOARD_ARROW_DOWN, undefined, "var(--text_color_disabled)").getHTML();
+        this.#button_open_disabled.style.cursor = "not-allowed";
+        this.#dropdown.setAttribute('id', this.#id);
+        this.#ComboBox_second.appendChild(this.#input)
+        this.#ComboBox_second.appendChild(this.#button_open)
+        this.#ComboBox_second.appendChild(this.#dropdown)
+        //LISTENERS
+        this.#input.addEventListener('focus', () => {
+            this.#button_open.style.transform = 'rotate(180deg)'
+            this.#ComboBox_second.style.border = '1px solid var(--blue_prime_background)';
+            this.#dropdown.style.height = this.#dropdown_height
+        })
+        this.#input.addEventListener('blur', () => {
+            this.#button_open.style.transform = 'rotate(0deg)'
+            this.#ComboBox_second.removeAttribute('style')
+            this.#dropdown.style.height = this.#dropdown_height
+        })
+        this.#ComboBox_second.addEventListener('click', (event) => {
+            if (!this.#input.disabled) {
+                if (event.target.parentNode === this.#ComboBox_second) {
+                    this.#input.focus()
+                    new Animation(this.#dropdown).fadeIn();
+                    setOptionDisplay(document.getElementById(this.#id));
+                    this.#setDropdownDirection();
+                    window.addEventListener('click', this.#window_click_event);
+                }
+            }
+        });
+
+        this.#input.addEventListener('input', (event) => {
+            let dropdown = document.getElementById(this.#id);
+            let query = event.target.value.toLowerCase();
+            for (let option of dropdown.childNodes) {
+                if (typeof option.getAttribute !== "function") continue;
+                let title = option.getAttribute('option_title');
+                if (title === null) continue;
+                if (!title.toLowerCase().includes(query)) {
+                    option.style.display = 'none'
+                    dropdown.style.height = 'max-content'
+                } else {
+                    option.style.display = 'block'
+                    dropdown.style.height = this.#dropdown_height
+                }
+            }
+        });
+        this.#ComboBox_main.appendChild(this.#ComboBox_second)
+    }
+    addValueChangeListener(listener = () => {}) {
+        this.#ComboBox_main.addEventListener("chui_combo_option_changed", listener)
+    }
+    addOptions(...options) {
+        for (let opt of options) {
+            let option = document.createElement(`combobox_option`);
+            option.innerHTML = opt.title;
+            option.setAttribute('option_title', opt.title);
+            option.setAttribute('option_value', opt.value);
+            option.addEventListener('click', () => {
+                const eventAwesome = new CustomEvent("chui_combo_option_changed", {
+                    detail: {
+                        title: option.getAttribute('option_title'),
+                        value: option.getAttribute('option_value')
+                    },
+                });
+                this.#ComboBox_main.dispatchEvent(eventAwesome)
+                this.#input.value = option.getAttribute('option_title');
+                this.#ComboBox_main.setAttribute("option_title", option.getAttribute('option_title'));
+                this.#ComboBox_main.setAttribute("option_value", option.getAttribute('option_value'));
+            });
+            this.#dropdown.appendChild(option);
+        }
+    }
+    getName() { return this.#input.name; }
+    getValue() { return this.#ComboBox_main.getAttribute("option_value"); }
+    setDisabled(boolean = Boolean()) {
+        this.#input.disabled = boolean
+        if (boolean) {
+            this.#ComboBox_second.classList.add("combobox_disabled")
+            this.#input.className = "combobox_input_disabled"
+            this.#label.className = "combobox_label_disabled"
+            this.#button_open.remove();
+            this.#ComboBox_second.appendChild(this.#button_open_disabled);
+        } else {
+            this.#ComboBox_second.classList.remove("combobox_disabled")
+            this.#input.className = "combobox_input"
+            this.#label.className = "combobox_label"
+            this.#button_open_disabled.remove();
+            this.#ComboBox_second.appendChild(this.#button_open);
+        }
+    }
+    clear() {
+        this.#ComboBox_main.removeAttribute("option_title");
+        this.#ComboBox_main.removeAttribute("option_value");
+        this.#input.value = ""
+    }
+    #window_click_event = (event) => {
+        if (event.target.parentNode !== this.#ComboBox_second) {
+            window.removeEventListener('click', this.#window_click_event);
+            new Animation(this.#dropdown).fadeOut();
+        }
+    }
+    #setDropdownDirection() {
+        const openUp = shouldOpenDropdownUp(this.#dropdown, this.#ComboBox_second);
+        this.#dropdown.style.top = openUp ? 'auto' : '';
+        this.#dropdown.style.bottom = openUp ? '100%' : '';
+        this.#dropdown.style.marginTop = openUp ? '0' : '';
+    }
+    set() { return this.#ComboBox_main; }
+}
+
+function setOptionDisplay(element) {
+    for (let option of element.childNodes) { option.style.display = 'block'; }
+}
+
 exports.ComboBox = ComboBox