chuijs 3.6.2 → 3.6.4

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

@@ -1,58 +1,58 @@
-chui_area_input {
-    display: flex;
-    flex-direction: column;
-    width: 200px;
-    height: max-content;
-    margin: var(--margin);
-}
-
-.resize_off {
-    resize: none
-}
-
-.resize_on {
-    resize: auto
-}
-
-.area_input {
-    height: inherit;
-    width: -webkit-fill-available;
-    border-radius: var(--border_radius);
-    padding: var(--main_padding);
-    font-size: var(--font_default_size);
-    color: var(--text_color);
-    background: var(--element_background);
-    border: 1px solid var(--border_color);
-}
-
-.textarea_label {
-    height: max-content;
-    width: max-content;
-    margin: var(--margin);
-    font-size: var(--font_labels_size);
-    font-weight:500;
-    color: var(--text_color)
-}
-
-/* DISABLED STYLES */
-.area_input_disabled {
-    cursor: not-allowed;
-    height: inherit;
-    width: -webkit-fill-available;
-    border-radius: var(--border_radius);
-    padding: var(--main_padding);
-    font-size: var(--font_default_size);
-    color: var(--text_color_disabled);
-    background: var(--element_background_disabled);
-    border: 1px solid var(--border_color);
-}
-
-.textarea_label_disabled {
-    cursor: not-allowed;
-    height: max-content;
-    width: max-content;
-    margin: var(--margin);
-    font-size: var(--font_labels_size);
-    font-weight:500;
-    color: var(--text_color_disabled)
+chui_area_input {
+    display: flex;
+    flex-direction: column;
+    width: var(--control_width);
+    height: max-content;
+    margin: var(--margin);
+}
+
+.resize_off {
+    resize: none
+}
+
+.resize_on {
+    resize: auto
+}
+
+.area_input {
+    height: inherit;
+    width: -webkit-fill-available;
+    border-radius: var(--border_radius);
+    padding: var(--main_padding);
+    font-size: var(--font_default_size);
+    color: var(--text_color);
+    background: var(--element_background);
+    border: 1px solid var(--border_color);
+}
+
+.textarea_label {
+    height: max-content;
+    width: max-content;
+    margin: var(--margin);
+    font-size: var(--font_labels_size);
+    font-weight:500;
+    color: var(--text_color)
+}
+
+/* DISABLED STYLES */
+.area_input_disabled {
+    cursor: not-allowed;
+    height: inherit;
+    width: -webkit-fill-available;
+    border-radius: var(--border_radius);
+    padding: var(--main_padding);
+    font-size: var(--font_default_size);
+    color: var(--text_color_disabled);
+    background: var(--element_background_disabled);
+    border: 1px solid var(--border_color);
+}
+
+.textarea_label_disabled {
+    cursor: not-allowed;
+    height: max-content;
+    width: max-content;
+    margin: var(--margin);
+    font-size: var(--font_labels_size);
+    font-weight:500;
+    color: var(--text_color_disabled)
 }

package/framework/components/chui_inputs/chui_text_area/text_area.js

@@ -1,61 +1,61 @@
-class TextArea {
-    #id = require("randomstring").generate();
-    #chui_text_input = document.createElement('chui_area_input');
-    #text_area = document.createElement('textarea');
-    #label = document.createElement('label');
-    #title = undefined;
-    constructor(options = {
-        name: String(), title: String(), placeholder: String(),
-        width: String(), height: String(), required: Boolean()
-    }) {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_TextArea');
-        this.#text_area.classList.add('area_input', 'resize_off');
-        this.#text_area.id = this.#id;
-        if (options.name !== undefined) this.#text_area.name = options.name;
-        if (options.required !== undefined) this.#text_area.required = options.required;
-        if (options.title !== undefined) {
-            this.#title = options.title;
-            this.#label.innerText = options.title;
-            this.#label.classList.add('textarea_label')
-            this.#label.setAttribute('for', this.#id);
-            this.#chui_text_input.appendChild(this.#label);
-        }
-        if (options.placeholder !== undefined) this.#text_area.placeholder = options.placeholder;
-        if (options.width !== undefined) this.#chui_text_input.style.width = options.width;
-        if (options.height !== undefined) this.#chui_text_input.style.height = options.height;
-        this.#text_area.addEventListener('focus', () => {
-            this.#text_area.style.border = '1px solid var(--blue_prime_background)';
-            if (options.title !== undefined) {
-                this.#label.style.color = 'var(--blue_prime_background)';
-            }
-        })
-        this.#text_area.addEventListener('blur', () => {
-            this.#text_area.removeAttribute("style");
-            if (options.title !== undefined) {
-                this.#label.removeAttribute("style");
-            }
-        })
-        this.#chui_text_input.appendChild(this.#text_area);
-    }
-    getName() { return this.#text_area.name; }
-    getTitle() { return this.#title; }
-    getValue() { return this.#text_area.value; }
-    setValue(text = String()) { this.#text_area.value = text; }
-    setDisabled(boolean = Boolean()) {
-        this.#text_area.disabled = boolean
-        if (boolean) {
-            this.#text_area.classList.remove("area_input")
-            this.#text_area.classList.add("area_input_disabled")
-            this.#label.classList.remove("textarea_label")
-            this.#label.classList.add("textarea_label_disabled")
-        } else {
-            this.#text_area.classList.add("area_input")
-            this.#text_area.classList.remove("area_input_disabled")
-            this.#label.classList.add("textarea_label")
-            this.#label.classList.remove("textarea_label_disabled")
-        }
-    }
-    set() { return this.#chui_text_input; }
-}
-
-exports.TextArea = TextArea
+class TextArea {
+    #id = require("randomstring").generate();
+    #chui_text_input = document.createElement('chui_area_input');
+    #text_area = document.createElement('textarea');
+    #label = document.createElement('label');
+    #title = undefined;
+    constructor(options = {
+        name: String(), title: String(), placeholder: String(),
+        width: String(), height: String(), required: Boolean()
+    }) {
+        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_TextArea');
+        this.#text_area.classList.add('area_input', 'resize_off');
+        this.#text_area.id = this.#id;
+        if (options.name !== undefined) this.#text_area.name = options.name;
+        if (options.required !== undefined) this.#text_area.required = options.required;
+        if (options.title !== undefined) {
+            this.#title = options.title;
+            this.#label.innerText = options.title;
+            this.#label.classList.add('textarea_label')
+            this.#label.setAttribute('for', this.#id);
+            this.#chui_text_input.appendChild(this.#label);
+        }
+        if (options.placeholder !== undefined) this.#text_area.placeholder = options.placeholder;
+        if (options.width !== undefined) this.#chui_text_input.style.width = options.width;
+        if (options.height !== undefined) this.#chui_text_input.style.height = options.height;
+        this.#text_area.addEventListener('focus', () => {
+            this.#text_area.style.border = '1px solid var(--blue_prime_background)';
+            if (options.title !== undefined) {
+                this.#label.style.color = 'var(--blue_prime_background)';
+            }
+        })
+        this.#text_area.addEventListener('blur', () => {
+            this.#text_area.removeAttribute("style");
+            if (options.title !== undefined) {
+                this.#label.removeAttribute("style");
+            }
+        })
+        this.#chui_text_input.appendChild(this.#text_area);
+    }
+    getName() { return this.#text_area.name; }
+    getTitle() { return this.#title; }
+    getValue() { return this.#text_area.value; }
+    setValue(text = String()) { this.#text_area.value = text; }
+    setDisabled(boolean = Boolean()) {
+        this.#text_area.disabled = boolean
+        if (boolean) {
+            this.#text_area.classList.remove("area_input")
+            this.#text_area.classList.add("area_input_disabled")
+            this.#label.classList.remove("textarea_label")
+            this.#label.classList.add("textarea_label_disabled")
+        } else {
+            this.#text_area.classList.add("area_input")
+            this.#text_area.classList.remove("area_input_disabled")
+            this.#label.classList.add("textarea_label")
+            this.#label.classList.remove("textarea_label_disabled")
+        }
+    }
+    set() { return this.#chui_text_input; }
+}
+
+exports.TextArea = TextArea

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

@@ -1,62 +1,67 @@
-.switch {
-    display: inline-block;
-    width: 50px;
-    height: 25px;
-    border-radius: 50px;
-    margin: var(--margin);
-    background: var(--element_background);
-    border: none;
-    box-shadow: 0 0 1px 0 var(--element_background_2);
-}
-
-.switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-.slider {
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--element_background);
-}
-
-.slider:before {
-    position: absolute;
-    content: '';
-    height: 15px;
-    width: 15px;
-    left: 5px;
-    bottom: 5px;
-    background-color: var(--text_color);
-}
-
-input:checked + .slider:before {
-    position: absolute;
-    content: '';
-    height: 15px;
-    width: 15px;
-    left: 5px;
-    bottom: 5px;
-    background-color: var(--text_color_hover);
-}
-
-input:checked + .slider {
-    background: var(--blue_prime_background);
-}
-
-input:checked + .slider:before {
-    transform: translateX(26px);
-}
-
-.slider.round {
-    border-radius: 50px;
-}
-
-.slider.round:before {
-    border-radius: 50px;
+.switch {
+    display: inline-block;
+    width: 50px;
+    height: 25px;
+    border-radius: var(--radius_pill);
+    margin: var(--margin);
+    background: var(--element_background);
+    border: none;
+    box-shadow: 0 0 1px 0 var(--border_color);
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--element_background);
+}
+
+.slider:before {
+    position: absolute;
+    content: '';
+    height: 15px;
+    width: 15px;
+    left: 5px;
+    bottom: 5px;
+    background-color: var(--text_color);
+}
+
+input:checked + .slider:before {
+    position: absolute;
+    content: '';
+    height: 15px;
+    width: 15px;
+    left: 5px;
+    bottom: 5px;
+    background-color: var(--text_color_hover);
+}
+
+input:checked + .slider {
+    background: var(--blue_prime_background);
+}
+
+input:checked + .slider:before {
+    transform: translateX(26px);
+}
+
+.slider.round {
+    border-radius: var(--radius_pill);
+}
+
+.slider.round:before {
+    border-radius: var(--radius_circle);
+}
+
+.switch:has(input:focus-visible) {
+    outline: var(--focus_outline);
+    outline-offset: var(--focus_outline_offset);
 }

package/framework/components/chui_inputs/chui_toggle/toggle.js

@@ -1,36 +1,36 @@
-class Toggle {
-    #Toggle = document.createElement('label');
-    #toggle_span = document.createElement('span');
-    #toggle_input = document.createElement('input');
-    constructor() {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", "chUiJS_Toggle")
-        this.#Toggle.className = 'switch';
-        this.#toggle_input.type = 'checkbox';
-        this.#toggle_span.className = 'slider round';
-        this.#Toggle.appendChild(this.#toggle_input);
-        this.#Toggle.appendChild(this.#toggle_span);
-    }
-    setMargin(pos = { top: undefined, bottom: undefined, left: undefined, right: undefined }) {
-        if (pos.top !== undefined) this.#Toggle.style.marginTop = pos.top
-        if (pos.bottom !== undefined) this.#Toggle.style.marginBottom = pos.bottom
-        if (pos.left !== undefined) this.#Toggle.style.marginLeft = pos.left
-        if (pos.right !== undefined) this.#Toggle.style.marginRight = pos.right
-    }
-    setId(id) {
-        this.#Toggle.id = id;
-    }
-    addChangeListener (listener) {
-        this.#toggle_input.addEventListener('change', listener);
-    }
-    getValue() {
-        return this.#toggle_input.checked;
-    }
-    setValue(boolean) {
-        this.#toggle_input.checked = boolean;
-    }
-    set() {
-        return this.#Toggle;
-    }
-}
-
-exports.Toggle = Toggle
+class Toggle {
+    #Toggle = document.createElement('label');
+    #toggle_span = document.createElement('span');
+    #toggle_input = document.createElement('input');
+    constructor() {
+        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", "chUiJS_Toggle")
+        this.#Toggle.className = 'switch';
+        this.#toggle_input.type = 'checkbox';
+        this.#toggle_span.className = 'slider round';
+        this.#Toggle.appendChild(this.#toggle_input);
+        this.#Toggle.appendChild(this.#toggle_span);
+    }
+    setMargin(pos = { top: undefined, bottom: undefined, left: undefined, right: undefined }) {
+        if (pos.top !== undefined) this.#Toggle.style.marginTop = pos.top
+        if (pos.bottom !== undefined) this.#Toggle.style.marginBottom = pos.bottom
+        if (pos.left !== undefined) this.#Toggle.style.marginLeft = pos.left
+        if (pos.right !== undefined) this.#Toggle.style.marginRight = pos.right
+    }
+    setId(id) {
+        this.#Toggle.id = id;
+    }
+    addChangeListener (listener) {
+        this.#toggle_input.addEventListener('change', listener);
+    }
+    getValue() {
+        return this.#toggle_input.checked;
+    }
+    setValue(boolean) {
+        this.#toggle_input.checked = boolean;
+    }
+    set() {
+        return this.#Toggle;
+    }
+}
+
+exports.Toggle = Toggle

package/framework/components/chui_label/label.js

@@ -1,55 +1,55 @@
-const {setStyles, htmlToMarkdown, markdownToHtml} = require('../../modules/chui_functions');
-
-class Label {
-    #chui_label = document.createElement(`chui_label`);
-    constructor(options = {
-        id: String(),
-        text: String(),
-        markdownText: String(),
-        textAlign: String(),
-        wordBreak: String(),
-        width: String(),
-        fontSize: String(),
-    }) {
-        setStyles(__dirname + "/styles.css", 'chUiJS_Label');
-        // Стили текста лейбла
-        if (options.text !== undefined && options.markdownText !== undefined) {
-            throw new Error("Должна быть установлена одна опция text или markdownText");
-        } else {
-            if (options.text !== undefined) this.#chui_label.innerText = options.text;
-            if (options.markdownText !== undefined) this.#chui_label.innerHTML = markdownToHtml(options.markdownText);
-        }
-        //
-        if (options.id !== undefined) this.#chui_label.id = options.id;
-        if (options.textAlign !== undefined) this.#chui_label.style.textAlign = options.textAlign;
-        if (options.wordBreak !== undefined) this.#chui_label.style.wordBreak = options.wordBreak;
-        if (options.width !== undefined) this.#chui_label.style.width = options.width;
-        if (options.fontSize !== undefined) this.#chui_label.style.fontSize = options.fontSize;
-    }
-    // GET
-    getId() {
-        return this.#chui_label.id;
-    }
-    getText() {
-        return this.#chui_label.innerText;
-    }
-    getMarkdownText() {
-        return htmlToMarkdown(this.#chui_label.innerHTML);
-    }
-    // SET
-    setId(id = String()) {
-        this.#chui_label.id = id;
-    }
-    setText(text = String()) {
-        this.#chui_label.innerText = text;
-    }
-    setMarkdownText(text = String()) {
-        this.#chui_label.innerHTML = markdownToHtml(text);
-    }
-    // RENDER
-    set() {
-        return this.#chui_label;
-    }
-}
-
+const {setStyles, htmlToMarkdown, markdownToHtml} = require('../../modules/chui_functions');
+
+class Label {
+    #chui_label = document.createElement(`chui_label`);
+    constructor(options = {
+        id: String(),
+        text: String(),
+        markdownText: String(),
+        textAlign: String(),
+        wordBreak: String(),
+        width: String(),
+        fontSize: String(),
+    }) {
+        setStyles(__dirname + "/styles.css", 'chUiJS_Label');
+        // Стили текста лейбла
+        if (options.text !== undefined && options.markdownText !== undefined) {
+            throw new Error("Должна быть установлена одна опция text или markdownText");
+        } else {
+            if (options.text !== undefined) this.#chui_label.innerText = options.text;
+            if (options.markdownText !== undefined) this.#chui_label.innerHTML = markdownToHtml(options.markdownText);
+        }
+        //
+        if (options.id !== undefined) this.#chui_label.id = options.id;
+        if (options.textAlign !== undefined) this.#chui_label.style.textAlign = options.textAlign;
+        if (options.wordBreak !== undefined) this.#chui_label.style.wordBreak = options.wordBreak;
+        if (options.width !== undefined) this.#chui_label.style.width = options.width;
+        if (options.fontSize !== undefined) this.#chui_label.style.fontSize = options.fontSize;
+    }
+    // GET
+    getId() {
+        return this.#chui_label.id;
+    }
+    getText() {
+        return this.#chui_label.innerText;
+    }
+    getMarkdownText() {
+        return htmlToMarkdown(this.#chui_label.innerHTML);
+    }
+    // SET
+    setId(id = String()) {
+        this.#chui_label.id = id;
+    }
+    setText(text = String()) {
+        this.#chui_label.innerText = text;
+    }
+    setMarkdownText(text = String()) {
+        this.#chui_label.innerHTML = markdownToHtml(text);
+    }
+    // RENDER
+    set() {
+        return this.#chui_label;
+    }
+}
+
 exports.Label = Label

package/framework/components/chui_label/styles.css

@@ -1,12 +1,12 @@
-chui_label {
-    height: max-content;
-    width: max-content;
-    margin: var(--margin);
-    font-size: var(--font_default_size);
-    font-weight:500;
-    color: var(--text_color);
-}
-
-chui_label p {
-    margin: 0;
+chui_label {
+    height: max-content;
+    width: max-content;
+    margin: var(--margin);
+    font-size: var(--font_default_size);
+    font-weight:500;
+    color: var(--text_color);
+}
+
+chui_label p {
+    margin: 0;
 }