chuijs 3.6.2 → 3.6.4

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

@@ -1,129 +1,164 @@
-date_input_controls {
-    display: flex;
-    justify-content: center;
-    align-items: center
-}
-
-chui_date_input {
-    display: flex;
-    flex-direction: column;
-    width: max-content;
-    height: max-content;
-    margin: var(--margin);
-}
-
-::-webkit-calendar-picker-indicator {
-    display: none
-}
-
-::-webkit-datetime-edit-text {
-    padding: 0;
-    width: 100%
-}
-
-date_select_dropdown {
-    display: none;
-    flex-direction: column;
-    color: var(--text_color);
-    padding: var(--test_padding);
-    background: var(--element_background);
-    border: 1px solid var(--border_color);
-    border-radius: var(--border_radius);
-    position:absolute;
-    top: -2px;
-    left: -2px;
-    z-index: 1;
-    box-shadow: var(--box_shadow_main);
-}
-
-date_week {
-    display: flex;
-}
-
-date_day {
-    cursor: pointer;
-    display: block;
-    width: 20px;
-    border-radius: var(--border_radius);
-    padding: var(--test_padding);
-    text-align: center
-}
-
-.date_day:hover {
-    background: var(--blue_prime_background);
-    color: var(--text_color_hover);
-}
-
-date_dropdown_open {
-    cursor: pointer;
-    padding: var(--test_padding) 10px var(--test_padding) 0;
-    height: auto;
-    margin: 0;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--badge_cancel_text)
-}
-
-date_main_block {
-    height: max-content;
-    width: max-content;
-    border-radius: var(--border_radius);
-    font-size: var(--font_default_size);
-    color: var(--text_color);
-    position: relative;
-    display: flex;
-    background: var(--element_background);
-    border: 1px solid var(--border_color);
-}
-
-.date_input {
-    width:100%;
-    display: block;
-    text-align: center;
-    margin: 0;
-    padding: var(--test_padding) 0;
-    background: transparent;
-    color: var(--text_color);
-    border: none;
-    font-size: var(--font_default_size);
-}
-
-.date_input_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 */
-.date_main_block_disabled {
-    cursor: not-allowed;
-    background: var(--element_background_disabled);
-    border: 1px solid var(--border_color);
-}
-
-.date_input_label_disabled {
-    cursor: not-allowed;
-    color: var(--text_color_disabled);
-    height: max-content;
-    width: max-content;
-    margin: var(--margin);
-    font-size: var(--font_labels_size);
-    font-weight:500
-}
-
-.date_input_disabled {
-    cursor: not-allowed;
-    color: var(--text_color_disabled);
-    width:100%;
-    display: block;
-    text-align: center;
-    margin: 0;
-    padding: var(--test_padding) 0;
-    background: transparent;
-    border: none;
-    font-size: var(--font_default_size);
+chui_date_input {
+    display: flex;
+    flex-direction: column;
+    width: max-content;
+    height: max-content;
+    margin: var(--margin);
+}
+
+::-webkit-calendar-picker-indicator {
+    display: none
+}
+
+::-webkit-datetime-edit-text {
+    padding: 0;
+    width: 100%
+}
+
+date_select_dropdown {
+    display: none;
+    flex-direction: column;
+    color: var(--text_color);
+    padding: var(--test_padding);
+    background: var(--header_background);
+    backdrop-filter: var(--global_blur);
+    -webkit-backdrop-filter: var(--global_blur);
+    border: 1px solid var(--border_color);
+    border-radius: var(--border_radius);
+    position:absolute;
+    top: -2px;
+    left: -2px;
+    z-index: 1;
+    box-shadow: var(--box_shadow_main);
+}
+
+date_calendar_header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--test_padding);
+}
+
+date_calendar_nav {
+    cursor: pointer;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    padding: 4px;
+    border-radius: var(--radius_sm);
+    color: var(--text_color);
+}
+
+date_calendar_nav:hover {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+date_calendar_nav:active {
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
+}
+
+date_calendar_title {
+    font-weight: 500;
+    color: var(--text_color);
+    user-select: none;
+    white-space: nowrap;
+}
+
+date_week {
+    display: flex;
+}
+
+date_day {
+    cursor: pointer;
+    display: block;
+    width: 20px;
+    border-radius: var(--border_radius);
+    padding: var(--test_padding);
+    text-align: center
+}
+
+.date_day:hover {
+    background: var(--blue_prime_background);
+    color: var(--text_color_hover);
+}
+
+.date_day:active {
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
+}
+
+date_dropdown_open {
+    cursor: pointer;
+    padding: var(--test_padding) 10px var(--test_padding) 0;
+    height: auto;
+    margin: 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--badge_cancel_text)
+}
+
+date_main_block {
+    height: max-content;
+    width: max-content;
+    border-radius: var(--border_radius);
+    font-size: var(--font_default_size);
+    color: var(--text_color);
+    position: relative;
+    display: flex;
+    background: var(--element_background);
+    border: 1px solid var(--border_color);
+}
+
+.date_input {
+    width:100%;
+    display: block;
+    text-align: center;
+    margin: 0;
+    padding: var(--test_padding) 0;
+    background: transparent;
+    color: var(--text_color);
+    border: none;
+    font-size: var(--font_default_size);
+}
+
+.date_input_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 */
+.date_main_block_disabled {
+    cursor: not-allowed;
+    background: var(--element_background_disabled);
+    border: 1px solid var(--border_color);
+}
+
+.date_input_label_disabled {
+    cursor: not-allowed;
+    color: var(--text_color_disabled);
+    height: max-content;
+    width: max-content;
+    margin: var(--margin);
+    font-size: var(--font_labels_size);
+    font-weight:500
+}
+
+.date_input_disabled {
+    cursor: not-allowed;
+    color: var(--text_color_disabled);
+    width:100%;
+    display: block;
+    text-align: center;
+    margin: 0;
+    padding: var(--test_padding) 0;
+    background: transparent;
+    border: none;
+    font-size: var(--font_default_size);
 }

package/framework/components/chui_inputs/chui_email/email.js

@@ -1,61 +1,61 @@
-class EmailInput {
-    #id = require("randomstring").generate();
-    #chui_email_input = document.createElement('chui_email_input');
-    #chui_email_main = document.createElement('chui_email_main');
-    #label = document.createElement('label');
-    #input = document.createElement('input');
-    #title = undefined;
-    constructor(options = {
-        name: String(),
-        title: String(),
-        placeholder: String(),
-        width: String(),
-        required: Boolean()
-    }) {
-        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_EmailInput');
-        this.#title = options.title;
-        this.#input.type = 'email';
-        this.#input.className = 'email_input'
-        this.#input.id = this.#id;
-        if (options.name !== undefined) this.#input.name = options.name;
-        this.#input.pattern = '^([a-zA-Z0-9_\.\-+])+@[a-zA-Z0-9-.]+\.[a-zA-Z0-9-]{2,}$'
-        if (options.required !== undefined) this.#input.required = options.required;
-        if (options.title !== undefined) {
-            this.#label.innerText = options.title;
-            this.#label.classList.add('email_label')
-            this.#label.setAttribute('for', this.#id);
-            this.#chui_email_input.appendChild(this.#label);
-        }
-        if (options.placeholder !== undefined) this.#input.placeholder = options.placeholder;
-        if (options.width !== undefined) this.#chui_email_input.style.width = options.width;
-        this.#input.addEventListener('focus', () => {
-            this.#chui_email_main.style.border = '1px solid var(--blue_prime_background)';
-            this.#label.style.color = 'var(--blue_prime_background)';
-        })
-        this.#input.addEventListener('blur', () => {
-            this.#chui_email_main.removeAttribute("style");
-            this.#label.removeAttribute("style");
-        })
-        this.#chui_email_main.appendChild(this.#input);
-        this.#chui_email_input.appendChild(this.#chui_email_main);
-    }
-    getName() { return this.#input.name; }
-    getTitle() { return this.#title; }
-    getValue() { return this.#input.value; }
-    setValue(text = String()) { this.#input.value = text; }
-    setDisabled(boolean = Boolean()) {
-        this.#input.disabled = boolean
-        if (boolean) {
-            this.#chui_email_main.classList.add("chui_email_main_disabled")
-            this.#input.className = "email_input_disabled"
-            this.#label.className = "email_label_disabled"
-        } else {
-            this.#chui_email_main.classList.remove("chui_email_main_disabled")
-            this.#input.className = "email_input"
-            this.#label.className = "email_label"
-        }
-    }
-    set() { return this.#chui_email_input; }
-}
-
-exports.EmailInput = EmailInput
+class EmailInput {
+    #id = require("randomstring").generate();
+    #chui_email_input = document.createElement('chui_email_input');
+    #chui_email_main = document.createElement('chui_email_main');
+    #label = document.createElement('label');
+    #input = document.createElement('input');
+    #title = undefined;
+    constructor(options = {
+        name: String(),
+        title: String(),
+        placeholder: String(),
+        width: String(),
+        required: Boolean()
+    }) {
+        require('../../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_EmailInput');
+        this.#title = options.title;
+        this.#input.type = 'email';
+        this.#input.className = 'email_input'
+        this.#input.id = this.#id;
+        if (options.name !== undefined) this.#input.name = options.name;
+        this.#input.pattern = '^([a-zA-Z0-9_\.\-+])+@[a-zA-Z0-9-.]+\.[a-zA-Z0-9-]{2,}$'
+        if (options.required !== undefined) this.#input.required = options.required;
+        if (options.title !== undefined) {
+            this.#label.innerText = options.title;
+            this.#label.classList.add('email_label')
+            this.#label.setAttribute('for', this.#id);
+            this.#chui_email_input.appendChild(this.#label);
+        }
+        if (options.placeholder !== undefined) this.#input.placeholder = options.placeholder;
+        if (options.width !== undefined) this.#chui_email_input.style.width = options.width;
+        this.#input.addEventListener('focus', () => {
+            this.#chui_email_main.style.border = '1px solid var(--blue_prime_background)';
+            this.#label.style.color = 'var(--blue_prime_background)';
+        })
+        this.#input.addEventListener('blur', () => {
+            this.#chui_email_main.removeAttribute("style");
+            this.#label.removeAttribute("style");
+        })
+        this.#chui_email_main.appendChild(this.#input);
+        this.#chui_email_input.appendChild(this.#chui_email_main);
+    }
+    getName() { return this.#input.name; }
+    getTitle() { return this.#title; }
+    getValue() { return this.#input.value; }
+    setValue(text = String()) { this.#input.value = text; }
+    setDisabled(boolean = Boolean()) {
+        this.#input.disabled = boolean
+        if (boolean) {
+            this.#chui_email_main.classList.add("chui_email_main_disabled")
+            this.#input.className = "email_input_disabled"
+            this.#label.className = "email_label_disabled"
+        } else {
+            this.#chui_email_main.classList.remove("chui_email_main_disabled")
+            this.#input.className = "email_input"
+            this.#label.className = "email_label"
+        }
+    }
+    set() { return this.#chui_email_input; }
+}
+
+exports.EmailInput = EmailInput

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

@@ -1,72 +1,70 @@
-chui_email_input {
-    display: flex;
-    flex-direction: column;
-    width: 200px;
-    height: max-content;
-    margin: var(--margin);
-}
-
-chui_email_main {
-    display: flex;
-    width: -webkit-fill-available;
-    height: max-content;
-    margin: 0;
-    border-radius: var(--border_radius);
-    color: var(--text_color);
-    align-items: center;
-    position: relative;
-    padding: var(--main_padding);
-    background: var(--element_background);
-    border: 1px solid var(--border_color);
-}
-
-.email_input {
-    width: -webkit-fill-available;
-    margin: 0;
-    padding: 0;
-    background: transparent;
-    color: var(--text_color);
-    text-align: start;
-    border: none;
-    font-size: var(--font_default_size);
-}
-
-email_input .email_input:valid {}
-
-.email_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 */
-.email_input_disabled {
-    cursor: not-allowed;
-    width: -webkit-fill-available;
-    margin: 0;
-    padding: 0;
-    background: transparent;
-    color: var(--text_color_disabled);
-    text-align: start;
-    border: none;
-    font-size: var(--font_default_size);
-}
-
-.email_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_email_main_disabled {
-    cursor: not-allowed;
-    background: var(--element_background_disabled);
-    border: 1px solid var(--border_color);
+chui_email_input {
+    display: flex;
+    flex-direction: column;
+    width: var(--control_width);
+    height: max-content;
+    margin: var(--margin);
+}
+
+chui_email_main {
+    display: flex;
+    width: -webkit-fill-available;
+    height: max-content;
+    margin: 0;
+    border-radius: var(--border_radius);
+    color: var(--text_color);
+    align-items: center;
+    position: relative;
+    padding: var(--main_padding);
+    background: var(--element_background);
+    border: 1px solid var(--border_color);
+}
+
+.email_input {
+    width: -webkit-fill-available;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    color: var(--text_color);
+    text-align: start;
+    border: none;
+    font-size: var(--font_default_size);
+}
+
+.email_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 */
+.email_input_disabled {
+    cursor: not-allowed;
+    width: -webkit-fill-available;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    color: var(--text_color_disabled);
+    text-align: start;
+    border: none;
+    font-size: var(--font_default_size);
+}
+
+.email_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_email_main_disabled {
+    cursor: not-allowed;
+    background: var(--element_background_disabled);
+    border: 1px solid var(--border_color);
 }