chuijs 3.6.3 → 3.6.4

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

@@ -1,236 +1,213 @@
-chui_multicombobox {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    height: max-content;
-    margin: var(--margin);
-    width: 200px
-}
-
-multicombobox {
-    position: relative;
-    display: flex;
-    height: max-content;
-    width: -webkit-fill-available;
-    border-radius: var(--border_radius);
-    padding: 0;
-    font-size: var(--font_default_size);
-    background: var(--element_background);
-    border: 1px solid var(--border_color);
-}
-
-multicombobox_options {
-    display: flex;
-    flex-direction: column;
-}
-
-.multicombobox_input {
-    width: 100%;
-    margin: 0;
-    padding: var(--test_padding) 0 var(--test_padding) 10px;
-    background: transparent;
-    color: var(--text_color);
-    border: none;
-    font-size: var(--font_default_size);
-}
-
-multicombobox_dropdown {
-    background: var(--element_background);
-    position: absolute;
-    display: none;
-    height: max-content;
-    border-radius: var(--border_radius);
-    margin-top: 36px;
-    padding: var(--test_padding);
-    font-size: var(--font_default_size);
-    flex-direction: column;
-    z-index: 1;
-    width: -webkit-fill-available;
-    overflow: hidden hidden;
-    box-shadow: var(--box_shadow_main);
-    border: 1px solid var(--border_color);
-}
-
-multicombobox_dropdown:hover {
-    overflow: hidden overlay
-}
-
-.multicombobox_label {
-    height: max-content;
-    width: max-content;
-    margin: var(--margin);
-    font-size: var(--font_labels_size);
-    font-weight:500;
-    color: var(--text_color)
-}
-
-multicombo_button_open {
-    cursor: pointer;
-    padding: var(--main_padding);
-    color: var(--blue_prime_background);
-    justify-content: center;
-    align-items: center;
-    display: flex;
-}
-
-.option_input_label {
-    padding: var(--test_padding);
-    width: -webkit-fill-available;
-    text-align: start;
-}
-
-.multi_combobox_option {
-    display: flex;
-    flex-direction: row;
-    border-radius: var(--border_radius);
-    color: var(--text_color);
-    justify-content: center;
-    align-items: center;
-    width: -webkit-fill-available;
-}
-
-.multi_combobox_option:hover {
-    background: var(--blue_prime_background);
-    color: var(--text_color_hover);
-}
-
-/* DISABLED STYLES */
-.multicombobox_disabled {
-    cursor: not-allowed;
-    background: var(--element_background_disabled);
-    border: 1px solid var(--border_color);
-}
-
-.multicombobox_input_disabled {
-    cursor: not-allowed;
-    background: transparent;
-    color: var(--text_color_disabled);
-    text-align: start;
-    width: 100%;
-    margin: 0;
-    padding: var(--test_padding) 0 var(--test_padding) 10px;
-    border: none;
-    font-size: var(--font_default_size);
-}
-
-.multicombobox_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)
-}
-
-multicombobox_option_added_main {
-    color: var(--text_color);
-    display: flex;
-    flex-direction: row;
-    height: max-content;
-    margin: 3px;
-    width: max-content;
-    background: var(--ap_slider_background);
-    border-radius: var(--border_radius);
-    font-weight: 500;
-    justify-content: center;
-    align-items: center;
-}
-
-multicombobox_option_added_body {
-    padding: 5px 8px;
-    width: max-content;
-    height: max-content;
-}
-
-multicombobox_option_added_remove {
-    width: max-content;
-    height: max-content;
-    font-weight: 600;
-    padding: 5px 8px 5px 0px;
-}
-
-label input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-}
-
-.checkmark {
-    margin: 8px 0px 8px 8px;
-    font-size: var(--font_default_size);
-    content: '';
-    display: flex;
-    width: 1.2em;
-    height: 1.2em;
-    flex-shrink: 0;
-    flex-grow: 0;
-    border-radius: 25%;
-    align-items: center;
-    justify-content: center;
-    color: var(--ap_slider_background);
-    font-family: 'chui_I';
-    background: var(--ap_slider_background);
-    border: none;
-    box-shadow: 0 0 1px 0 var(--ap_slider_background);
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 50% 50%;
-}
-
-/* On mouse-over, add a grey background color */
-label:hover input ~ .checkmark {
-    background-color: var(--ap_slider_background);
-}
-
-/* When the checkbox is checked, add a blue background */
-label input:checked ~ .checkmark {
-    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");
-}
-
-/* Create the checkmark/indicator (hidden when not checked) */
-.checkmark:after {
-    content: "";
-    position: absolute;
-    display: none;
-}
-
-/* Show the checkmark when checked */
-.container input:checked ~ .checkmark:after {
-    display: block;
-}
-
-/* Style the checkmark/indicator */
-.container .checkmark:after {
-    left: 9px;
-    top: 5px;
-    width: 5px;
-    height: 10px;
-    border: solid white;
-    border-width: 0 3px 3px 0;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-}
-
-.multi_combobox_section {
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    flex-direction: column;
-    width: -webkit-fill-available;
-    height: max-content;
-}
-
-.multi_combobox_section_title {
-    color: var(--text_color);
-    font-weight: 500;
-    font-size: 11pt;
-    padding: 6px;
+chui_multicombobox {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: max-content;
+    margin: var(--margin);
+    width: var(--control_width)
+}
+
+multicombobox {
+    position: relative;
+    display: flex;
+    height: max-content;
+    width: -webkit-fill-available;
+    border-radius: var(--border_radius);
+    padding: 0;
+    font-size: var(--font_default_size);
+    background: var(--element_background);
+    border: 1px solid var(--border_color);
+}
+
+multicombobox_options {
+    display: flex;
+    flex-direction: column;
+}
+
+.multicombobox_input {
+    width: 100%;
+    margin: 0;
+    padding: var(--test_padding) 0 var(--test_padding) 10px;
+    background: transparent;
+    color: var(--text_color);
+    border: none;
+    font-size: var(--font_default_size);
+}
+
+multicombobox_dropdown {
+    background: var(--header_background);
+    backdrop-filter: var(--global_blur);
+    -webkit-backdrop-filter: var(--global_blur);
+    position: absolute;
+    display: none;
+    height: max-content;
+    border-radius: var(--border_radius);
+    margin-top: 36px;
+    padding: var(--test_padding);
+    font-size: var(--font_default_size);
+    flex-direction: column;
+    z-index: 1;
+    width: -webkit-fill-available;
+    overflow: hidden hidden;
+    box-shadow: var(--box_shadow_main);
+    border: 1px solid var(--border_color);
+}
+
+multicombobox_dropdown:hover {
+    overflow: hidden overlay
+}
+
+.multicombobox_label {
+    height: max-content;
+    width: max-content;
+    margin: var(--margin);
+    font-size: var(--font_labels_size);
+    font-weight:500;
+    color: var(--text_color)
+}
+
+multicombo_button_open {
+    cursor: pointer;
+    padding: var(--main_padding);
+    color: var(--blue_prime_background);
+    justify-content: center;
+    align-items: center;
+    display: flex;
+}
+
+.option_input_label {
+    padding: var(--test_padding);
+    width: -webkit-fill-available;
+    text-align: start;
+}
+
+.multi_combobox_option {
+    display: flex;
+    flex-direction: row;
+    border-radius: var(--border_radius);
+    color: var(--text_color);
+    justify-content: center;
+    align-items: center;
+    width: -webkit-fill-available;
+}
+
+.multi_combobox_option:hover {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+/* DISABLED STYLES */
+.multicombobox_disabled {
+    cursor: not-allowed;
+    background: var(--element_background_disabled);
+    border: 1px solid var(--border_color);
+}
+
+.multicombobox_input_disabled {
+    cursor: not-allowed;
+    background: transparent;
+    color: var(--text_color_disabled);
+    text-align: start;
+    width: 100%;
+    margin: 0;
+    padding: var(--test_padding) 0 var(--test_padding) 10px;
+    border: none;
+    font-size: var(--font_default_size);
+}
+
+.multicombobox_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)
+}
+
+multicombobox_option_added_main {
+    color: var(--text_color);
+    display: flex;
+    flex-direction: row;
+    height: max-content;
+    margin: 3px;
+    width: max-content;
+    background: var(--element_background_2);
+    border-radius: var(--border_radius);
+    font-weight: 500;
+    justify-content: center;
+    align-items: center;
+}
+
+multicombobox_option_added_body {
+    padding: 5px 8px;
+    width: max-content;
+    height: max-content;
+}
+
+multicombobox_option_added_remove {
+    width: max-content;
+    height: max-content;
+    font-weight: 600;
+    padding: 5px 8px 5px 0px;
+}
+
+label input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+}
+
+.checkmark {
+    margin: 8px 0 8px 8px;
+    display: flex;
+    width: 1.2em;
+    height: 1.2em;
+    flex-shrink: 0;
+    flex-grow: 0;
+    border-radius: var(--radius_sm);
+    align-items: center;
+    justify-content: center;
+    color: transparent;
+    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%;
+}
+
+.multi_combobox_option:hover .checkmark {
+    background-color: var(--element_background_hover);
+}
+
+.multi_combobox_option input:checked ~ .checkmark {
+    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");
+}
+
+.multi_combobox_option input:focus-visible ~ .checkmark {
+    outline: var(--focus_outline);
+    outline-offset: var(--focus_outline_offset);
+}
+
+.multi_combobox_section {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    flex-direction: column;
+    width: -webkit-fill-available;
+    height: max-content;
+}
+
+.multi_combobox_section_title {
+    color: var(--text_color);
+    font-weight: 500;
+    font-size: 11pt;
+    padding: 6px;
 }

package/framework/components/chui_inputs/chui_number/number.js

@@ -1,108 +1,108 @@
-const { Icon, Icons } = require('../../chui_icons/icons');
-
-class NumberInput {
-    #chui_number_input = document.createElement('chui_number_input');
-    #number_main = document.createElement("number_main");
-    #number_button_minus = document.createElement("number_button_minus");
-    #number_button_plus = document.createElement("number_button_plus");
-    #number_button_minus_disabled = document.createElement("number_button_minus");
-    #number_button_plus_disabled = document.createElement("number_button_plus");
-    #title = undefined;
-    #id = require("randomstring").generate();
-    #input = document.createElement('input');
-    #label = document.createElement('label');
-    constructor(options = { name: String(), title: String(), required: Boolean(), width: String() }) {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_NumberInput');
-        this.#title = options.title;
-
-        this.#number_button_plus.style.right = '0';
-        this.#number_button_plus.className = 'number_buttons';
-        this.#number_button_plus.innerHTML = new Icon(Icons.CONTENT.ADD, undefined, "var(--blue_prime_background)").getHTML();
-        this.#number_button_minus.style.left = '0';
-        this.#number_button_minus.className = 'number_buttons';
-        this.#number_button_minus.innerHTML = new Icon(Icons.CONTENT.REMOVE, undefined, "var(--blue_prime_background)").getHTML();
-
-        // Выключенные кнопки
-        this.#number_button_plus_disabled.style.right = '0';
-        this.#number_button_plus_disabled.className = 'number_buttons';
-        this.#number_button_plus_disabled.innerHTML = new Icon(Icons.CONTENT.ADD, undefined, "var(--text_color_disabled)").getHTML();
-        this.#number_button_plus_disabled.style.cursor = "not-allowed";
-        this.#number_button_minus_disabled.style.left = '0';
-        this.#number_button_minus_disabled.className = 'number_buttons';
-        this.#number_button_minus_disabled.innerHTML = new Icon(Icons.CONTENT.REMOVE, undefined, "var(--text_color_disabled)").getHTML();
-        this.#number_button_minus_disabled.style.cursor = "not-allowed";
-        //
-
-        this.#input.type = 'number';
-        this.#input.className = 'number_input';
-        this.#input.value = '0';
-        this.#input.id = this.#id;
-        if (options.name !== undefined) this.#input.name = options.name;
-        if (options.required !== undefined) this.#input.required = options.required;
-        if (options.title !== undefined) {
-            this.#label.innerText = options.title;
-            this.#label.classList.add('number_label')
-            this.#label.setAttribute('for', this.#id);
-            this.#chui_number_input.appendChild(this.#label);
-        }
-        if (options.width !== undefined) this.#chui_number_input.style.width = options.width;
-        this.#input.addEventListener('focus', () => {
-            this.#number_main.style.border = '1px solid var(--blue_prime_background)';
-            this.#label.style.color = 'var(--blue_prime_background)';
-        })
-        this.#input.addEventListener('blur', () => {
-            this.#number_main.removeAttribute("style");
-            this.#label.removeAttribute("style");
-        })
-
-        this.#number_main.appendChild(this.#number_button_minus);
-        this.#number_main.appendChild(this.#input);
-        this.#number_main.appendChild(this.#number_button_plus);
-        this.#chui_number_input.appendChild(this.#number_main);
-
-        this.#number_button_plus.addEventListener('mousedown', (event) => {
-            event.preventDefault();
-            return false;
-        });
-        this.#number_button_minus.addEventListener('mousedown', (event) => {
-            event.preventDefault();
-            return false;
-        });
-
-        this.#number_button_plus.addEventListener('click', () => {
-            this.#input.focus();
-            this.#input.value++
-        });
-        this.#number_button_minus.addEventListener('click', () => {
-            this.#input.focus();
-            this.#input.value--;
-        });
-    }
-    getName() { return this.#input.name; }
-    getTitle() { return this.#title; }
-    getValue() { return this.#input.value; }
-    setValue(num = Number()) { this.#input.value = num; }
-    setDisabled(boolean = Boolean()) {
-        this.#input.disabled = boolean
-        if (boolean) {
-            this.#number_main.classList.add("number_main_disabled")
-            this.#input.className = "number_input_disabled"
-            this.#label.className = "number_label_disabled"
-            this.#number_button_minus.remove();
-            this.#number_button_plus.remove();
-            this.#number_main.appendChild(this.#number_button_minus_disabled);
-            this.#number_main.appendChild(this.#number_button_plus_disabled);
-        } else {
-            this.#number_main.classList.remove("number_main_disabled")
-            this.#input.className = "number_input"
-            this.#label.className = "number_label"
-            this.#number_button_minus_disabled.remove();
-            this.#number_button_plus_disabled.remove();
-            this.#number_main.appendChild(this.#number_button_minus);
-            this.#number_main.appendChild(this.#number_button_plus);
-        }
-    }
-    set() { return this.#chui_number_input; }
-}
-
-exports.NumberInput = NumberInput
+const { Icon, Icons } = require('../../chui_icons/icons');
+
+class NumberInput {
+    #chui_number_input = document.createElement('chui_number_input');
+    #number_main = document.createElement("number_main");
+    #number_button_minus = document.createElement("number_button_minus");
+    #number_button_plus = document.createElement("number_button_plus");
+    #number_button_minus_disabled = document.createElement("number_button_minus");
+    #number_button_plus_disabled = document.createElement("number_button_plus");
+    #title = undefined;
+    #id = require("randomstring").generate();
+    #input = document.createElement('input');
+    #label = document.createElement('label');
+    constructor(options = { name: String(), title: String(), required: Boolean(), width: String() }) {
+        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_NumberInput');
+        this.#title = options.title;
+
+        this.#number_button_plus.style.right = '0';
+        this.#number_button_plus.className = 'number_buttons';
+        this.#number_button_plus.innerHTML = new Icon(Icons.CONTENT.ADD, undefined, "var(--blue_prime_background)").getHTML();
+        this.#number_button_minus.style.left = '0';
+        this.#number_button_minus.className = 'number_buttons';
+        this.#number_button_minus.innerHTML = new Icon(Icons.CONTENT.REMOVE, undefined, "var(--blue_prime_background)").getHTML();
+
+        // Выключенные кнопки
+        this.#number_button_plus_disabled.style.right = '0';
+        this.#number_button_plus_disabled.className = 'number_buttons';
+        this.#number_button_plus_disabled.innerHTML = new Icon(Icons.CONTENT.ADD, undefined, "var(--text_color_disabled)").getHTML();
+        this.#number_button_plus_disabled.style.cursor = "not-allowed";
+        this.#number_button_minus_disabled.style.left = '0';
+        this.#number_button_minus_disabled.className = 'number_buttons';
+        this.#number_button_minus_disabled.innerHTML = new Icon(Icons.CONTENT.REMOVE, undefined, "var(--text_color_disabled)").getHTML();
+        this.#number_button_minus_disabled.style.cursor = "not-allowed";
+        //
+
+        this.#input.type = 'number';
+        this.#input.className = 'number_input';
+        this.#input.value = '0';
+        this.#input.id = this.#id;
+        if (options.name !== undefined) this.#input.name = options.name;
+        if (options.required !== undefined) this.#input.required = options.required;
+        if (options.title !== undefined) {
+            this.#label.innerText = options.title;
+            this.#label.classList.add('number_label')
+            this.#label.setAttribute('for', this.#id);
+            this.#chui_number_input.appendChild(this.#label);
+        }
+        if (options.width !== undefined) this.#chui_number_input.style.width = options.width;
+        this.#input.addEventListener('focus', () => {
+            this.#number_main.style.border = '1px solid var(--blue_prime_background)';
+            this.#label.style.color = 'var(--blue_prime_background)';
+        })
+        this.#input.addEventListener('blur', () => {
+            this.#number_main.removeAttribute("style");
+            this.#label.removeAttribute("style");
+        })
+
+        this.#number_main.appendChild(this.#number_button_minus);
+        this.#number_main.appendChild(this.#input);
+        this.#number_main.appendChild(this.#number_button_plus);
+        this.#chui_number_input.appendChild(this.#number_main);
+
+        this.#number_button_plus.addEventListener('mousedown', (event) => {
+            event.preventDefault();
+            return false;
+        });
+        this.#number_button_minus.addEventListener('mousedown', (event) => {
+            event.preventDefault();
+            return false;
+        });
+
+        this.#number_button_plus.addEventListener('click', () => {
+            this.#input.focus();
+            this.#input.value++
+        });
+        this.#number_button_minus.addEventListener('click', () => {
+            this.#input.focus();
+            this.#input.value--;
+        });
+    }
+    getName() { return this.#input.name; }
+    getTitle() { return this.#title; }
+    getValue() { return this.#input.value; }
+    setValue(num = Number()) { this.#input.value = num; }
+    setDisabled(boolean = Boolean()) {
+        this.#input.disabled = boolean
+        if (boolean) {
+            this.#number_main.classList.add("number_main_disabled")
+            this.#input.className = "number_input_disabled"
+            this.#label.className = "number_label_disabled"
+            this.#number_button_minus.remove();
+            this.#number_button_plus.remove();
+            this.#number_main.appendChild(this.#number_button_minus_disabled);
+            this.#number_main.appendChild(this.#number_button_plus_disabled);
+        } else {
+            this.#number_main.classList.remove("number_main_disabled")
+            this.#input.className = "number_input"
+            this.#label.className = "number_label"
+            this.#number_button_minus_disabled.remove();
+            this.#number_button_plus_disabled.remove();
+            this.#number_main.appendChild(this.#number_button_minus);
+            this.#number_main.appendChild(this.#number_button_plus);
+        }
+    }
+    set() { return this.#chui_number_input; }
+}
+
+exports.NumberInput = NumberInput