chuijs 4.0.2 → 4.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +61 -0
- package/README.md +43 -644
- package/framework/appLayout/default/chui_app_layout.js +308 -260
- package/framework/appLayout/default/global_style.css +85 -48
- package/framework/components/chui_accordion/accordion.js +29 -26
- package/framework/components/chui_accordion/styles.css +6 -5
- package/framework/components/chui_action_sheet/action_sheet.js +59 -33
- package/framework/components/chui_action_sheet/styles.css +2 -1
- package/framework/components/chui_affix/affix.js +11 -6
- package/framework/components/chui_alert/alert.js +23 -14
- package/framework/components/chui_avatar/avatar.js +23 -22
- package/framework/components/chui_avatar_group/avatar_group.js +21 -19
- package/framework/components/chui_backtop/backtop.js +35 -19
- package/framework/components/chui_badge/badge.js +15 -13
- package/framework/components/chui_breadcrumb/breadcrumb.js +15 -13
- package/framework/components/chui_button/button.js +42 -22
- package/framework/components/chui_button/styles.css +2 -2
- package/framework/components/chui_calendar/calendar.js +12 -10
- package/framework/components/chui_card/card.js +43 -23
- package/framework/components/chui_chat/chat.js +72 -33
- package/framework/components/chui_clipboard_history/clipboard_history.js +30 -21
- package/framework/components/chui_clipboard_history/styles.css +4 -2
- package/framework/components/chui_code/code.js +2 -2
- package/framework/components/chui_code/styles.css +2 -2
- package/framework/components/chui_code_editor/code_editor.js +47 -31
- package/framework/components/chui_code_editor/styles.css +3 -2
- package/framework/components/chui_command_palette/command_palette.js +60 -37
- package/framework/components/chui_console/console.js +5 -5
- package/framework/components/chui_console/styles.css +1 -1
- package/framework/components/chui_content_block/content_block.js +33 -19
- package/framework/components/chui_content_block/styles.css +2 -2
- package/framework/components/chui_context_menu/context_menu.js +9 -4
- package/framework/components/chui_custom_element/custom_element.js +22 -15
- package/framework/components/chui_data_grid/data_grid.js +396 -234
- package/framework/components/chui_data_grid/styles.css +10 -8
- package/framework/components/chui_descriptions/descriptions.js +34 -17
- package/framework/components/chui_details/details.js +32 -26
- package/framework/components/chui_details/styles.css +5 -4
- package/framework/components/chui_diff_viewer/diff_viewer.js +91 -66
- package/framework/components/chui_diff_viewer/styles.css +1 -1
- package/framework/components/chui_divider/divider.js +13 -11
- package/framework/components/chui_drawer/drawer.js +27 -25
- package/framework/components/chui_drop_zone/drop_zone.js +31 -21
- package/framework/components/chui_empty_state/empty_state.js +20 -15
- package/framework/components/chui_fieldset/fieldset.js +37 -20
- package/framework/components/chui_fieldset/styles.css +1 -1
- package/framework/components/chui_file_explorer/file_explorer.js +157 -86
- package/framework/components/chui_file_explorer/styles.css +2 -1
- package/framework/components/chui_form/form.js +31 -19
- package/framework/components/chui_form/styles.css +1 -1
- package/framework/components/chui_gantt/gantt.js +64 -40
- package/framework/components/chui_graphs/graphs.js +301 -200
- package/framework/components/chui_graphs/styles.css +1 -1
- package/framework/components/chui_hero/hero.js +40 -22
- package/framework/components/chui_html_block/html_block.js +6 -6
- package/framework/components/chui_html_block/styles.css +2 -2
- package/framework/components/chui_hx/hx.js +3 -3
- package/framework/components/chui_hx/styles.css +11 -4
- package/framework/components/chui_icons/icons.js +2109 -2109
- package/framework/components/chui_icons/styles.css +2 -2
- package/framework/components/chui_inputs/chui_check_box/check_box.js +31 -19
- package/framework/components/chui_inputs/chui_check_box/styles.css +18 -18
- package/framework/components/chui_inputs/chui_chips/chips.js +50 -40
- package/framework/components/chui_inputs/chui_chips/styles.css +4 -2
- package/framework/components/chui_inputs/chui_color_picker/color_picker.js +36 -24
- package/framework/components/chui_inputs/chui_combo_box/combo_box.js +100 -82
- package/framework/components/chui_inputs/chui_combo_box/styles.css +14 -12
- package/framework/components/chui_inputs/chui_date/date.js +102 -66
- package/framework/components/chui_inputs/chui_date/styles.css +12 -11
- package/framework/components/chui_inputs/chui_date_range/date_range.js +40 -29
- package/framework/components/chui_inputs/chui_datetime/datetime.js +35 -27
- package/framework/components/chui_inputs/chui_email/email.js +43 -31
- package/framework/components/chui_inputs/chui_email/styles.css +5 -5
- package/framework/components/chui_inputs/chui_file/file.js +68 -41
- package/framework/components/chui_inputs/chui_file/styles.css +13 -12
- package/framework/components/chui_inputs/chui_hotkey/hotkey.js +61 -36
- package/framework/components/chui_inputs/chui_masked/masked.js +39 -28
- package/framework/components/chui_inputs/chui_mention/mention.js +77 -30
- package/framework/components/chui_inputs/chui_multi_combo_box/multi_combo_box.js +173 -153
- package/framework/components/chui_inputs/chui_multi_combo_box/styles.css +9 -7
- package/framework/components/chui_inputs/chui_number/number.js +58 -41
- package/framework/components/chui_inputs/chui_number/styles.css +7 -7
- package/framework/components/chui_inputs/chui_otp/otp.js +38 -29
- package/framework/components/chui_inputs/chui_password/password.js +58 -36
- package/framework/components/chui_inputs/chui_password/styles.css +8 -8
- package/framework/components/chui_inputs/chui_radio_button/radio_button.js +37 -25
- package/framework/components/chui_inputs/chui_radio_button/styles.css +20 -20
- package/framework/components/chui_inputs/chui_rating/rating.js +26 -22
- package/framework/components/chui_inputs/chui_select_box/select_box.js +102 -78
- package/framework/components/chui_inputs/chui_select_box/styles.css +11 -11
- package/framework/components/chui_inputs/chui_slider/slider.js +29 -26
- package/framework/components/chui_inputs/chui_slider/styles.css +2 -1
- package/framework/components/chui_inputs/chui_text/styles.css +8 -8
- package/framework/components/chui_inputs/chui_text/text.js +65 -44
- package/framework/components/chui_inputs/chui_text_area/styles.css +6 -6
- package/framework/components/chui_inputs/chui_text_area/text_area.js +51 -28
- package/framework/components/chui_inputs/chui_time/styles.css +5 -3
- package/framework/components/chui_inputs/chui_time/time.js +38 -27
- package/framework/components/chui_inputs/chui_toggle/styles.css +3 -3
- package/framework/components/chui_inputs/chui_toggle/toggle.js +16 -16
- package/framework/components/chui_json_editor/json_editor.js +53 -43
- package/framework/components/chui_json_viewer/json_viewer.js +52 -33
- package/framework/components/chui_json_viewer/styles.css +3 -2
- package/framework/components/chui_kanban/kanban.js +52 -34
- package/framework/components/chui_kbd/kbd.js +12 -10
- package/framework/components/chui_label/label.js +14 -12
- package/framework/components/chui_label/styles.css +2 -2
- package/framework/components/chui_link/link.js +27 -20
- package/framework/components/chui_list/list.js +31 -27
- package/framework/components/chui_list/styles.css +2 -1
- package/framework/components/chui_markdown_editor/markdown_editor.js +60 -44
- package/framework/components/chui_media/audio.js +326 -227
- package/framework/components/chui_media/audio_styles.css +40 -21
- package/framework/components/chui_media/image.js +70 -38
- package/framework/components/chui_media/image_compare.js +52 -21
- package/framework/components/chui_media/image_styles.css +3 -3
- package/framework/components/chui_media/video.js +155 -62
- package/framework/components/chui_media/video_styles.css +33 -16
- package/framework/components/chui_menu_bar/menu_bar.js +26 -24
- package/framework/components/chui_menu_bar/styles.css +4 -2
- package/framework/components/chui_modal/modal.js +44 -43
- package/framework/components/chui_modal/styles.css +3 -2
- package/framework/components/chui_notification/notification.js +50 -34
- package/framework/components/chui_notification/notification_download.js +31 -25
- package/framework/components/chui_notification/notification_download_progress.css +3 -2
- package/framework/components/chui_notification/notification_download_progress.js +47 -41
- package/framework/components/chui_notification/notification_update.js +23 -16
- package/framework/components/chui_notification/status_plate.js +2 -2
- package/framework/components/chui_notification/styles_download.css +1 -1
- package/framework/components/chui_notification/styles_update.css +1 -1
- package/framework/components/chui_org_chart/org_chart.js +74 -35
- package/framework/components/chui_pagination/pagination.js +62 -27
- package/framework/components/chui_paragraph/paragraph.js +2 -2
- package/framework/components/chui_paragraph/styles.css +1 -1
- package/framework/components/chui_popover/popover.js +49 -28
- package/framework/components/chui_popups/popups.js +137 -108
- package/framework/components/chui_popups/styles.css +2 -2
- package/framework/components/chui_print_button/print_button.js +33 -23
- package/framework/components/chui_progress_bar/progress_bar.js +23 -15
- package/framework/components/chui_progress_bar/styles.css +2 -2
- package/framework/components/chui_progress_ring/progress_ring.js +17 -15
- package/framework/components/chui_qrcode/qrcode.js +75 -31
- package/framework/components/chui_query_builder/query_builder.js +216 -123
- package/framework/components/chui_radio_group/radio_group.js +36 -26
- package/framework/components/chui_radio_group/styles.css +1 -1
- package/framework/components/chui_result/result.js +26 -16
- package/framework/components/chui_scheduler/scheduler.js +57 -35
- package/framework/components/chui_scheduler/styles.css +6 -2
- package/framework/components/chui_segmented_control/segmented_control.js +27 -21
- package/framework/components/chui_settings/settings.js +122 -48
- package/framework/components/chui_shortcut_help/shortcut_help.js +55 -32
- package/framework/components/chui_sidebar_nav/sidebar_nav.js +33 -23
- package/framework/components/chui_skeleton/skeleton.js +29 -24
- package/framework/components/chui_slideshow/slideshow.js +60 -41
- package/framework/components/chui_slideshow/styles.css +18 -12
- package/framework/components/chui_spinner/spinner.js +8 -8
- package/framework/components/chui_spinner/styles.css +0 -1
- package/framework/components/chui_split_button/split_button.js +23 -18
- package/framework/components/chui_split_button/styles.css +1 -1
- package/framework/components/chui_splitter/splitter.js +35 -28
- package/framework/components/chui_statistic/statistic.js +65 -38
- package/framework/components/chui_status_bar/status_bar.js +11 -9
- package/framework/components/chui_stepper/stepper.js +27 -22
- package/framework/components/chui_sticky_bar/sticky_bar.js +9 -4
- package/framework/components/chui_sticky_bar/styles.css +3 -1
- package/framework/components/chui_tabs/chui_tabs.js +28 -22
- package/framework/components/chui_tabs/styles.css +3 -3
- package/framework/components/chui_text_editor/styles.css +20 -19
- package/framework/components/chui_text_editor/text_editor.js +85 -61
- package/framework/components/chui_text_editor/text_editor_panel.js +346 -284
- package/framework/components/chui_theme_toggle/theme_toggle.js +27 -22
- package/framework/components/chui_timeline/timeline.js +14 -12
- package/framework/components/chui_toast_queue/toast_queue.js +52 -46
- package/framework/components/chui_toolbar/toolbar.js +20 -13
- package/framework/components/chui_tooltip/tooltip.js +37 -24
- package/framework/components/chui_tour/styles.css +8 -3
- package/framework/components/chui_tour/tour.js +61 -27
- package/framework/components/chui_transfer/styles.css +2 -1
- package/framework/components/chui_transfer/transfer.js +75 -42
- package/framework/components/chui_tree_table/tree_table.js +43 -29
- package/framework/components/chui_tree_view/styles.css +4 -2
- package/framework/components/chui_tree_view/tree_view.js +142 -99
- package/framework/components/chui_watermark/watermark.js +24 -16
- package/framework/components/chui_webview/styles.css +2 -2
- package/framework/components/chui_webview/webview.js +62 -50
- package/framework/components/telegram_bot/chui_telegram_bot.js +71 -64
- package/framework/modules/chui_a11y/chui_a11y.js +77 -46
- package/framework/modules/chui_animations/animations.js +42 -42
- package/framework/modules/chui_animations/styles.css +1 -1
- package/framework/modules/chui_bridge/preload.js +36 -25
- package/framework/modules/chui_functions.js +52 -50
- package/framework/modules/chui_highlight/chui_highlight.js +25 -22
- package/framework/modules/chui_i18n/chui_i18n.js +9 -7
- package/framework/modules/chui_i18n/locales/a11y.js +5 -5
- package/framework/modules/chui_i18n/locales/app_layout.js +5 -5
- package/framework/modules/chui_i18n/locales/calendar.js +3 -3
- package/framework/modules/chui_i18n/locales/common.js +3 -3
- package/framework/modules/chui_i18n/locales/data.js +36 -26
- package/framework/modules/chui_i18n/locales/editors.js +40 -13
- package/framework/modules/chui_i18n/locales/feedback.js +3 -3
- package/framework/modules/chui_i18n/locales/forms.js +8 -8
- package/framework/modules/chui_i18n/locales/graphics.js +8 -8
- package/framework/modules/chui_i18n/locales/media.js +4 -4
- package/framework/modules/chui_i18n/locales/navigation.js +8 -8
- package/framework/modules/chui_i18n/locales/validate.js +3 -3
- package/framework/modules/chui_json/chui_json.js +9 -9
- package/framework/modules/chui_layout/chui_layout.js +12 -10
- package/framework/modules/chui_logger/chui_logger.js +29 -25
- package/framework/modules/chui_page/page.js +33 -27
- package/framework/modules/chui_qr/chui_qr.js +158 -67
- package/framework/modules/chui_scrollbar/chui_scrollbar.js +35 -24
- package/framework/modules/chui_scrollbar/styles.css +3 -1
- package/framework/modules/chui_services/chui_channels.js +27 -13
- package/framework/modules/chui_services/chui_services.js +39 -31
- package/framework/modules/chui_services/desktop.js +32 -31
- package/framework/modules/chui_sortable/chui_sortable.js +17 -12
- package/framework/modules/chui_validate/chui_validate.js +7 -4
- package/framework/tray_bar/chui_menu_items.js +136 -46
- package/index.d.ts +4814 -0
- package/index.js +385 -292
- package/package.json +79 -68
|
@@ -1,33 +1,35 @@
|
|
|
1
|
-
const {Validate} = require(
|
|
1
|
+
const { Validate } = require("../../../modules/chui_validate/chui_validate");
|
|
2
2
|
|
|
3
3
|
class EmailInput {
|
|
4
4
|
#id = require("randomstring").generate();
|
|
5
|
-
#chui_email_input = document.createElement(
|
|
6
|
-
#chui_email_main = document.createElement(
|
|
7
|
-
#label = document.createElement(
|
|
8
|
-
#input = document.createElement(
|
|
5
|
+
#chui_email_input = document.createElement("chui_email_input");
|
|
6
|
+
#chui_email_main = document.createElement("chui_email_main");
|
|
7
|
+
#label = document.createElement("label");
|
|
8
|
+
#input = document.createElement("input");
|
|
9
9
|
#title = undefined;
|
|
10
|
-
constructor(
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
10
|
+
constructor(
|
|
11
|
+
options = {
|
|
12
|
+
name: String(),
|
|
13
|
+
title: String(),
|
|
14
|
+
placeholder: String(),
|
|
15
|
+
width: String(),
|
|
16
|
+
required: Boolean(),
|
|
17
|
+
}
|
|
18
|
+
) {
|
|
19
|
+
require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_EmailInput");
|
|
18
20
|
this.#title = options.title;
|
|
19
|
-
this.#input.type =
|
|
20
|
-
this.#input.className =
|
|
21
|
+
this.#input.type = "email";
|
|
22
|
+
this.#input.className = "email_input";
|
|
21
23
|
this.#input.id = this.#id;
|
|
22
24
|
if (options.name !== undefined) this.#input.name = options.name;
|
|
23
|
-
this.#input.pattern =
|
|
25
|
+
this.#input.pattern = "^([a-zA-Z0-9_.+-])+@[a-zA-Z0-9-.]+\\.[a-zA-Z0-9-]{2,}$";
|
|
24
26
|
if (options.required !== undefined) this.#input.required = options.required;
|
|
25
27
|
// Валидация: email-формат проверяется правилом type: 'email'
|
|
26
28
|
Validate.installField(this, options, this.#chui_email_main, undefined, () => this.#input.value);
|
|
27
29
|
if (options.title !== undefined) {
|
|
28
30
|
this.#label.innerText = options.title;
|
|
29
|
-
this.#label.classList.add(
|
|
30
|
-
this.#label.setAttribute(
|
|
31
|
+
this.#label.classList.add("email_label");
|
|
32
|
+
this.#label.setAttribute("for", this.#id);
|
|
31
33
|
this.#chui_email_input.appendChild(this.#label);
|
|
32
34
|
}
|
|
33
35
|
if (options.placeholder !== undefined) this.#input.placeholder = options.placeholder;
|
|
@@ -38,23 +40,33 @@ class EmailInput {
|
|
|
38
40
|
this.#chui_email_main.appendChild(this.#input);
|
|
39
41
|
this.#chui_email_input.appendChild(this.#chui_email_main);
|
|
40
42
|
}
|
|
41
|
-
getName() {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
43
|
+
getName() {
|
|
44
|
+
return this.#input.name;
|
|
45
|
+
}
|
|
46
|
+
getTitle() {
|
|
47
|
+
return this.#title;
|
|
48
|
+
}
|
|
49
|
+
getValue() {
|
|
50
|
+
return this.#input.value;
|
|
51
|
+
}
|
|
52
|
+
setValue(text = String()) {
|
|
53
|
+
this.#input.value = text;
|
|
54
|
+
}
|
|
45
55
|
setDisabled(boolean = Boolean()) {
|
|
46
|
-
this.#input.disabled = boolean
|
|
56
|
+
this.#input.disabled = boolean;
|
|
47
57
|
if (boolean) {
|
|
48
|
-
this.#chui_email_main.classList.add("chui_email_main_disabled")
|
|
49
|
-
this.#input.className = "email_input_disabled"
|
|
50
|
-
this.#label.className = "email_label_disabled"
|
|
58
|
+
this.#chui_email_main.classList.add("chui_email_main_disabled");
|
|
59
|
+
this.#input.className = "email_input_disabled";
|
|
60
|
+
this.#label.className = "email_label_disabled";
|
|
51
61
|
} else {
|
|
52
|
-
this.#chui_email_main.classList.remove("chui_email_main_disabled")
|
|
53
|
-
this.#input.className = "email_input"
|
|
54
|
-
this.#label.className = "email_label"
|
|
62
|
+
this.#chui_email_main.classList.remove("chui_email_main_disabled");
|
|
63
|
+
this.#input.className = "email_input";
|
|
64
|
+
this.#label.className = "email_label";
|
|
55
65
|
}
|
|
56
66
|
}
|
|
57
|
-
set() {
|
|
67
|
+
set() {
|
|
68
|
+
return this.#chui_email_input;
|
|
69
|
+
}
|
|
58
70
|
}
|
|
59
71
|
|
|
60
|
-
exports.EmailInput = EmailInput
|
|
72
|
+
exports.EmailInput = EmailInput;
|
|
@@ -42,8 +42,8 @@ chui_email_main {
|
|
|
42
42
|
width: max-content;
|
|
43
43
|
margin: 0 0 var(--margin);
|
|
44
44
|
font-size: var(--font_labels_size);
|
|
45
|
-
font-weight:500;
|
|
46
|
-
color: var(--text_color)
|
|
45
|
+
font-weight: 500;
|
|
46
|
+
color: var(--text_color);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
/* DISABLED STYLES */
|
|
@@ -65,12 +65,12 @@ chui_email_main {
|
|
|
65
65
|
width: max-content;
|
|
66
66
|
margin: 0 0 var(--margin);
|
|
67
67
|
font-size: var(--font_labels_size);
|
|
68
|
-
font-weight:500;
|
|
69
|
-
color: var(--text_color_disabled)
|
|
68
|
+
font-weight: 500;
|
|
69
|
+
color: var(--text_color_disabled);
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
.chui_email_main_disabled {
|
|
73
73
|
cursor: not-allowed;
|
|
74
74
|
background: var(--element_background_disabled);
|
|
75
75
|
border: 1px solid var(--border_color);
|
|
76
|
-
}
|
|
76
|
+
}
|
|
@@ -2,76 +2,103 @@
|
|
|
2
2
|
|
|
3
3
|
class AcceptTypes {
|
|
4
4
|
//Изображения
|
|
5
|
-
static ALL_IMAGE = "image/*"
|
|
6
|
-
static PNG = "image/png"
|
|
7
|
-
static GIF = "image/gif"
|
|
8
|
-
static JPEG = "image/jpeg"
|
|
5
|
+
static ALL_IMAGE = "image/*";
|
|
6
|
+
static PNG = "image/png";
|
|
7
|
+
static GIF = "image/gif";
|
|
8
|
+
static JPEG = "image/jpeg";
|
|
9
9
|
//===========
|
|
10
10
|
//Аудио
|
|
11
|
-
static ALL_AUDIO = "audio/*"
|
|
11
|
+
static ALL_AUDIO = "audio/*";
|
|
12
12
|
//===========
|
|
13
13
|
//Видео
|
|
14
|
-
static ALL_VIDEO = "video/*"
|
|
14
|
+
static ALL_VIDEO = "video/*";
|
|
15
15
|
//===========
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
exports.AcceptTypes = AcceptTypes
|
|
18
|
+
exports.AcceptTypes = AcceptTypes;
|
|
19
19
|
|
|
20
20
|
class FileInput {
|
|
21
|
-
#chui_file_main = document.createElement(
|
|
22
|
-
#chui_file_input = document.createElement(
|
|
21
|
+
#chui_file_main = document.createElement("chui_file_main");
|
|
22
|
+
#chui_file_input = document.createElement("chui_file_input");
|
|
23
23
|
#id = require("randomstring").generate();
|
|
24
24
|
#title = String();
|
|
25
|
-
#input = document.createElement(
|
|
26
|
-
#label = document.createElement(
|
|
27
|
-
constructor(
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
25
|
+
#input = document.createElement("input");
|
|
26
|
+
#label = document.createElement("label");
|
|
27
|
+
constructor(
|
|
28
|
+
options = {
|
|
29
|
+
name: String(),
|
|
30
|
+
title: String(),
|
|
31
|
+
accept: [],
|
|
32
|
+
required: Boolean(),
|
|
33
|
+
disableFocus: Boolean(),
|
|
34
|
+
multiple: Boolean(),
|
|
35
|
+
changeListener: () => {},
|
|
36
|
+
focusListener: () => {},
|
|
37
|
+
blurListener: () => {},
|
|
38
|
+
}
|
|
39
|
+
) {
|
|
40
|
+
require("../../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_fileInput");
|
|
41
|
+
this.#input.type = "file";
|
|
42
|
+
this.#input.className = "file_input";
|
|
35
43
|
this.#input.id = this.#id;
|
|
36
44
|
//Options
|
|
37
45
|
if (options.name !== undefined) this.#input.name = options.name;
|
|
38
|
-
if (options.changeListener !== undefined) this.#input.addEventListener(
|
|
39
|
-
if (options.focusListener !== undefined) this.#input.addEventListener(
|
|
40
|
-
if (options.blurListener !== undefined) this.#input.addEventListener(
|
|
46
|
+
if (options.changeListener !== undefined) this.#input.addEventListener("change", options.changeListener);
|
|
47
|
+
if (options.focusListener !== undefined) this.#input.addEventListener("focus", options.focusListener);
|
|
48
|
+
if (options.blurListener !== undefined) this.#input.addEventListener("blur", options.blurListener);
|
|
41
49
|
if (options.required !== undefined) this.#input.required = options.required;
|
|
42
|
-
if (options.disableFocus !== undefined)
|
|
50
|
+
if (options.disableFocus !== undefined)
|
|
51
|
+
this.#input.addEventListener("mousedown", () => {
|
|
52
|
+
return false;
|
|
53
|
+
});
|
|
43
54
|
if (options.accept) this.#input.accept = options.accept.join(", ");
|
|
44
55
|
if (options.multiple) this.#input.multiple = options.multiple;
|
|
45
56
|
if (options.title !== undefined) {
|
|
46
57
|
this.#title = options.title;
|
|
47
58
|
this.#label.innerText = options.title;
|
|
48
|
-
this.#label.className =
|
|
49
|
-
this.#label.setAttribute(
|
|
59
|
+
this.#label.className = "input_label";
|
|
60
|
+
this.#label.setAttribute("for", this.#id);
|
|
50
61
|
this.#chui_file_input.appendChild(this.#label);
|
|
51
62
|
}
|
|
52
63
|
this.#chui_file_main.appendChild(this.#input);
|
|
53
64
|
this.#chui_file_input.appendChild(this.#chui_file_main);
|
|
54
65
|
}
|
|
55
|
-
addChangeListener(listener = () => {}) {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
66
|
+
addChangeListener(listener = () => {}) {
|
|
67
|
+
this.#input.addEventListener("change", listener);
|
|
68
|
+
}
|
|
69
|
+
addFocusListener(listener = () => {}) {
|
|
70
|
+
this.#input.addEventListener("focus", listener);
|
|
71
|
+
}
|
|
72
|
+
addBlurListener(listener = () => {}) {
|
|
73
|
+
this.#input.addEventListener("blur", listener);
|
|
74
|
+
}
|
|
75
|
+
getName() {
|
|
76
|
+
return this.#input.name;
|
|
77
|
+
}
|
|
78
|
+
getTitle() {
|
|
79
|
+
return this.#title;
|
|
80
|
+
}
|
|
81
|
+
getFile(index = Number()) {
|
|
82
|
+
return this.#input.files[index];
|
|
83
|
+
}
|
|
84
|
+
getFiles() {
|
|
85
|
+
return this.#input.files;
|
|
86
|
+
}
|
|
62
87
|
setDisabled(value = Boolean()) {
|
|
63
|
-
this.#input.disabled = value
|
|
88
|
+
this.#input.disabled = value;
|
|
64
89
|
if (value) {
|
|
65
|
-
this.#chui_file_main.classList.add("chui_file_main_disabled")
|
|
66
|
-
this.#input.className = "file_input_disabled"
|
|
67
|
-
this.#label.className = "input_label_disabled"
|
|
90
|
+
this.#chui_file_main.classList.add("chui_file_main_disabled");
|
|
91
|
+
this.#input.className = "file_input_disabled";
|
|
92
|
+
this.#label.className = "input_label_disabled";
|
|
68
93
|
} else {
|
|
69
|
-
this.#chui_file_main.classList.remove("chui_file_main_disabled")
|
|
70
|
-
this.#input.className = "file_input"
|
|
71
|
-
this.#label.className = "input_label"
|
|
94
|
+
this.#chui_file_main.classList.remove("chui_file_main_disabled");
|
|
95
|
+
this.#input.className = "file_input";
|
|
96
|
+
this.#label.className = "input_label";
|
|
72
97
|
}
|
|
73
98
|
}
|
|
74
|
-
set() {
|
|
99
|
+
set() {
|
|
100
|
+
return this.#chui_file_input;
|
|
101
|
+
}
|
|
75
102
|
}
|
|
76
103
|
|
|
77
|
-
exports.FileInput = FileInput
|
|
104
|
+
exports.FileInput = FileInput;
|
|
@@ -9,7 +9,7 @@ chui_file_input {
|
|
|
9
9
|
flex-direction: column;
|
|
10
10
|
width: max-content;
|
|
11
11
|
height: max-content;
|
|
12
|
-
margin: var(--margin)
|
|
12
|
+
margin: var(--margin);
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
chui_file_main {
|
|
@@ -48,8 +48,8 @@ chui_file_main {
|
|
|
48
48
|
width: max-content;
|
|
49
49
|
margin: 0 0 var(--margin);
|
|
50
50
|
font-size: var(--font_labels_size);
|
|
51
|
-
font-weight:500;
|
|
52
|
-
color: var(--text_color_disabled)
|
|
51
|
+
font-weight: 500;
|
|
52
|
+
color: var(--text_color_disabled);
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
.file_input {
|
|
@@ -67,11 +67,11 @@ chui_file_main {
|
|
|
67
67
|
width: max-content;
|
|
68
68
|
margin: 0 0 var(--margin);
|
|
69
69
|
font-size: var(--font_labels_size);
|
|
70
|
-
font-weight:500;
|
|
71
|
-
color: var(--text_color)
|
|
70
|
+
font-weight: 500;
|
|
71
|
+
color: var(--text_color);
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
-
input[type=file]::file-selector-button {
|
|
74
|
+
input[type="file"]::file-selector-button {
|
|
75
75
|
cursor: pointer;
|
|
76
76
|
height: max-content;
|
|
77
77
|
width: max-content;
|
|
@@ -79,28 +79,29 @@ input[type=file]::file-selector-button {
|
|
|
79
79
|
padding: var(--main_padding);
|
|
80
80
|
font-size: var(--font_default_size);
|
|
81
81
|
font-weight: 400;
|
|
82
|
-
margin-block: 0 0;
|
|
82
|
+
margin-block: 0 0;
|
|
83
|
+
margin-inline: 0 var(--margin);
|
|
83
84
|
color: var(--text_color);
|
|
84
85
|
transition: all var(--transition_time);
|
|
85
|
-
font-family:
|
|
86
|
+
font-family: "chui_I";
|
|
86
87
|
background: var(--button_background);
|
|
87
88
|
border: 1px solid var(--button_border_color);
|
|
88
89
|
}
|
|
89
90
|
|
|
90
|
-
input[type=file]::file-selector-button:hover {
|
|
91
|
+
input[type="file"]::file-selector-button:hover {
|
|
91
92
|
background: var(--element_background_hover);
|
|
92
93
|
color: var(--text_color);
|
|
93
94
|
border: 1px solid var(--button_border_color_hover);
|
|
94
95
|
}
|
|
95
96
|
|
|
96
|
-
input[type=file]:disabled::file-selector-button {
|
|
97
|
+
input[type="file"]:disabled::file-selector-button {
|
|
97
98
|
cursor: not-allowed;
|
|
98
99
|
color: var(--text_color_disabled);
|
|
99
100
|
background: var(--button_background_disabled);
|
|
100
101
|
border: 1px solid var(--border_color);
|
|
101
102
|
}
|
|
102
103
|
|
|
103
|
-
input[type=file]:disabled::file-selector-button:hover {
|
|
104
|
+
input[type="file"]:disabled::file-selector-button:hover {
|
|
104
105
|
background: var(--button_background_disabled);
|
|
105
106
|
color: var(--text_color_disabled);
|
|
106
|
-
}
|
|
107
|
+
}
|
|
@@ -1,22 +1,28 @@
|
|
|
1
|
-
const {setStyles, optionOr} = require(
|
|
2
|
-
const {Kbd} = require(
|
|
3
|
-
const {Icon, Icons} = require(
|
|
4
|
-
const {Validate} = require(
|
|
5
|
-
const {I18n} = require(
|
|
1
|
+
const { setStyles, optionOr } = require("../../../modules/chui_functions");
|
|
2
|
+
const { Kbd } = require("../../chui_kbd/kbd");
|
|
3
|
+
const { Icon, Icons } = require("../../chui_icons/icons");
|
|
4
|
+
const { Validate } = require("../../../modules/chui_validate/chui_validate");
|
|
5
|
+
const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
|
|
6
6
|
|
|
7
7
|
// Канонический вид сочетания: только буквы, цифры и «+» между клавишами
|
|
8
8
|
const HOTKEY_PATTERN = "^[A-Za-z0-9]+(\\+[A-Za-z0-9]+)*$";
|
|
9
9
|
/** Порядок модификаторов в записи сочетания — один и тот же, как его ни набери */
|
|
10
10
|
const MODIFIER_ORDER = ["Ctrl", "Alt", "Shift", "Meta"];
|
|
11
11
|
const MODIFIER_ALIASES = {
|
|
12
|
-
ctrl: "Ctrl",
|
|
13
|
-
|
|
12
|
+
ctrl: "Ctrl",
|
|
13
|
+
control: "Ctrl",
|
|
14
|
+
alt: "Alt",
|
|
15
|
+
option: "Alt",
|
|
14
16
|
shift: "Shift",
|
|
15
|
-
meta: "Meta",
|
|
17
|
+
meta: "Meta",
|
|
18
|
+
cmd: "Meta",
|
|
19
|
+
command: "Meta",
|
|
20
|
+
super: "Meta",
|
|
21
|
+
win: "Meta",
|
|
16
22
|
};
|
|
17
23
|
// Как эти же клавиши называет ARIA в aria-keyshortcuts
|
|
18
|
-
const ARIA_MODIFIERS = {Ctrl: "Control", Alt: "Alt", Shift: "Shift", Meta: "Meta"};
|
|
19
|
-
const KEY_ALIASES = {space: "Space", enter: "Enter", return: "Enter", tab: "Tab", escape: "Escape", esc: "Escape"};
|
|
24
|
+
const ARIA_MODIFIERS = { Ctrl: "Control", Alt: "Alt", Shift: "Shift", Meta: "Meta" };
|
|
25
|
+
const KEY_ALIASES = { space: "Space", enter: "Enter", return: "Enter", tab: "Tab", escape: "Escape", esc: "Escape" };
|
|
20
26
|
|
|
21
27
|
/**
|
|
22
28
|
* Поле горячей клавиши: нажатое сочетание записывается в значение.
|
|
@@ -67,20 +73,22 @@ class HotkeyInput {
|
|
|
67
73
|
#listeners = [];
|
|
68
74
|
#on_change = undefined;
|
|
69
75
|
|
|
70
|
-
constructor(
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
76
|
+
constructor(
|
|
77
|
+
options = {
|
|
78
|
+
id: String(),
|
|
79
|
+
name: String(),
|
|
80
|
+
title: String(),
|
|
81
|
+
label: String(),
|
|
82
|
+
hint: String(),
|
|
83
|
+
value: String(),
|
|
84
|
+
allowSingle: Boolean(),
|
|
85
|
+
readOnly: Boolean(),
|
|
86
|
+
disabled: Boolean(),
|
|
87
|
+
size: String(),
|
|
88
|
+
changeListener: undefined,
|
|
89
|
+
onChange: undefined,
|
|
90
|
+
}
|
|
91
|
+
) {
|
|
84
92
|
setStyles(__dirname + "/styles.css", "chUiJS_HotkeyInput");
|
|
85
93
|
HotkeyInput.#counter += 1;
|
|
86
94
|
this.#id = options.id === undefined ? `chui_hotkey_input_${HotkeyInput.#counter}` : options.id;
|
|
@@ -99,7 +107,7 @@ class HotkeyInput {
|
|
|
99
107
|
this.#field.addEventListener("keydown", this.#onKeyDown);
|
|
100
108
|
this.#field.addEventListener("focus", () => this.#field.classList.add("hotkey_field_focused"));
|
|
101
109
|
this.#field.addEventListener("blur", () => this.#field.classList.remove("hotkey_field_focused"));
|
|
102
|
-
this.#kbd = new Kbd({keys: []});
|
|
110
|
+
this.#kbd = new Kbd({ keys: [] });
|
|
103
111
|
const keys = this.#kbd.set();
|
|
104
112
|
// Клавиши — внешний вид: имя и значение несёт само поле
|
|
105
113
|
keys.setAttribute("aria-hidden", "true");
|
|
@@ -117,9 +125,7 @@ class HotkeyInput {
|
|
|
117
125
|
});
|
|
118
126
|
this.#hint.id = `${this.#id}_hint`;
|
|
119
127
|
this.#hint.className = "hotkey_hint";
|
|
120
|
-
this.#hint.innerText = options.hint === undefined
|
|
121
|
-
? I18n.t("forms.hotkeyHint")
|
|
122
|
-
: String(options.hint);
|
|
128
|
+
this.#hint.innerText = options.hint === undefined ? I18n.t("forms.hotkeyHint") : String(options.hint);
|
|
123
129
|
this.#field.setAttribute("aria-describedby", this.#hint.id);
|
|
124
130
|
// Единственный live-регион: без него о записи узнать неоткуда
|
|
125
131
|
this.#status.classList.add("chui_visually_hidden");
|
|
@@ -134,8 +140,14 @@ class HotkeyInput {
|
|
|
134
140
|
this.#root.appendChild(this.#hint);
|
|
135
141
|
this.#root.appendChild(this.#status);
|
|
136
142
|
this.setLabel(optionOr(options.label, I18n.t("forms.hotkeyLabel")));
|
|
137
|
-
Validate.installField(
|
|
138
|
-
|
|
143
|
+
Validate.installField(
|
|
144
|
+
this,
|
|
145
|
+
Object.assign({ pattern: HOTKEY_PATTERN }, options),
|
|
146
|
+
this.#root,
|
|
147
|
+
undefined,
|
|
148
|
+
() => this.#value,
|
|
149
|
+
this.#field
|
|
150
|
+
);
|
|
139
151
|
if (options.value !== undefined && options.value !== "") this.setValue(options.value);
|
|
140
152
|
this.setReadOnly(options.readOnly === true);
|
|
141
153
|
this.setDisabled(options.disabled === true);
|
|
@@ -189,7 +201,10 @@ class HotkeyInput {
|
|
|
189
201
|
*/
|
|
190
202
|
static parse(value = String()) {
|
|
191
203
|
if (typeof value !== "string") return undefined;
|
|
192
|
-
const parts = value
|
|
204
|
+
const parts = value
|
|
205
|
+
.split("+")
|
|
206
|
+
.map((part) => part.trim())
|
|
207
|
+
.filter((part) => part !== "");
|
|
193
208
|
const modifiers = [];
|
|
194
209
|
let main = undefined;
|
|
195
210
|
for (const part of parts) {
|
|
@@ -204,7 +219,9 @@ class HotkeyInput {
|
|
|
204
219
|
}
|
|
205
220
|
// Одни модификаторы — ещё не сочетание
|
|
206
221
|
if (main === undefined) return undefined;
|
|
207
|
-
return MODIFIER_ORDER.filter((modifier) => modifiers.includes(modifier))
|
|
222
|
+
return MODIFIER_ORDER.filter((modifier) => modifiers.includes(modifier))
|
|
223
|
+
.concat(main)
|
|
224
|
+
.join("+");
|
|
208
225
|
}
|
|
209
226
|
|
|
210
227
|
// SET
|
|
@@ -354,7 +371,11 @@ class HotkeyInput {
|
|
|
354
371
|
this.#value = value;
|
|
355
372
|
this.#render();
|
|
356
373
|
if (!changed || notify !== true) return;
|
|
357
|
-
this.#announce(
|
|
374
|
+
this.#announce(
|
|
375
|
+
value === ""
|
|
376
|
+
? I18n.t("forms.hotkeyCleared")
|
|
377
|
+
: I18n.t("forms.hotkeyRecorded", { value: value.split("+").join(" + ") })
|
|
378
|
+
);
|
|
358
379
|
for (const listener of [...this.#listeners]) listener(value, this);
|
|
359
380
|
if (this.#on_change !== undefined) this.#on_change(value, this);
|
|
360
381
|
}
|
|
@@ -371,7 +392,9 @@ class HotkeyInput {
|
|
|
371
392
|
|
|
372
393
|
// Синтаксис ARIA: модификаторы называются Control, Meta и т.д.
|
|
373
394
|
#ariaShortcut() {
|
|
374
|
-
return this.getKeys()
|
|
395
|
+
return this.getKeys()
|
|
396
|
+
.map((key) => (ARIA_MODIFIERS[key] === undefined ? key : ARIA_MODIFIERS[key]))
|
|
397
|
+
.join("+");
|
|
375
398
|
}
|
|
376
399
|
|
|
377
400
|
#announce(text = String()) {
|
|
@@ -398,7 +421,9 @@ class HotkeyInput {
|
|
|
398
421
|
const main = HotkeyInput.#canonicalKey(event.key);
|
|
399
422
|
if (main === undefined) {
|
|
400
423
|
// Нажаты только модификаторы: ждём основную клавишу
|
|
401
|
-
this.#announce(
|
|
424
|
+
this.#announce(
|
|
425
|
+
modifiers.length === 0 ? "" : I18n.t("forms.hotkeyModifiers", { value: modifiers.join(" + ") })
|
|
426
|
+
);
|
|
402
427
|
return;
|
|
403
428
|
}
|
|
404
429
|
if (modifiers.length === 0 && !this.#allow_single) {
|
|
@@ -426,4 +451,4 @@ class HotkeyInput {
|
|
|
426
451
|
}
|
|
427
452
|
}
|
|
428
453
|
|
|
429
|
-
exports.HotkeyInput = HotkeyInput
|
|
454
|
+
exports.HotkeyInput = HotkeyInput;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
const {setStyles} = require("../../../modules/chui_functions");
|
|
2
|
-
const {Validate} = require("../../../modules/chui_validate/chui_validate");
|
|
3
|
-
const {I18n} = require("../../../modules/chui_i18n/chui_i18n");
|
|
1
|
+
const { setStyles } = require("../../../modules/chui_functions");
|
|
2
|
+
const { Validate } = require("../../../modules/chui_validate/chui_validate");
|
|
3
|
+
const { I18n } = require("../../../modules/chui_i18n/chui_i18n");
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Поле с маской: позиции значения заданы шаблоном, литералы маски подставляются сами.
|
|
@@ -162,20 +162,22 @@ class MaskedInput {
|
|
|
162
162
|
#listeners = [];
|
|
163
163
|
#on_change = undefined;
|
|
164
164
|
|
|
165
|
-
constructor(
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
165
|
+
constructor(
|
|
166
|
+
options = {
|
|
167
|
+
id: String(),
|
|
168
|
+
name: String(),
|
|
169
|
+
title: String(),
|
|
170
|
+
label: String(),
|
|
171
|
+
hint: String(),
|
|
172
|
+
mask: String(),
|
|
173
|
+
placeholder: String(),
|
|
174
|
+
value: String(),
|
|
175
|
+
disabled: Boolean(),
|
|
176
|
+
readOnly: Boolean(),
|
|
177
|
+
changeListener: undefined,
|
|
178
|
+
onChange: undefined,
|
|
179
|
+
}
|
|
180
|
+
) {
|
|
179
181
|
setStyles(__dirname + "/styles.css", "chUiJS_MaskedInput");
|
|
180
182
|
MaskedInput.#counter += 1;
|
|
181
183
|
this.#id = options.id === undefined ? `chui_masked_input_${MaskedInput.#counter}` : options.id;
|
|
@@ -211,16 +213,24 @@ class MaskedInput {
|
|
|
211
213
|
else this.#label.hidden = true;
|
|
212
214
|
this.setLabel(this.#label_text === undefined ? I18n.t("forms.maskedLabel") : this.#label_text);
|
|
213
215
|
if (options.hint !== undefined) this.setHint(options.hint);
|
|
214
|
-
this.setPlaceholder(
|
|
215
|
-
? MaskedInput.placeholderText(this.#mask) : options.placeholder
|
|
216
|
+
this.setPlaceholder(
|
|
217
|
+
options.placeholder === undefined ? MaskedInput.placeholderText(this.#mask) : options.placeholder
|
|
218
|
+
);
|
|
216
219
|
// Флаг ставим после `setPlaceholder`: он же отмечает образец как заданный вручную
|
|
217
220
|
this.#placeholder_default = options.placeholder === undefined;
|
|
218
221
|
// Текст «неверный формат» у маски значит «поле не дозаполнено» — так и говорим
|
|
219
|
-
const messages = Object.assign({pattern: I18n.t("forms.maskedIncomplete")}, options.messages);
|
|
220
|
-
Validate.installField(
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
222
|
+
const messages = Object.assign({ pattern: I18n.t("forms.maskedIncomplete") }, options.messages);
|
|
223
|
+
Validate.installField(
|
|
224
|
+
this,
|
|
225
|
+
Object.assign({}, options, {
|
|
226
|
+
pattern: MaskedInput.maskPattern(this.#mask),
|
|
227
|
+
messages: messages,
|
|
228
|
+
}),
|
|
229
|
+
this.#root,
|
|
230
|
+
this.#error,
|
|
231
|
+
() => this.#rendered,
|
|
232
|
+
this.#main
|
|
233
|
+
);
|
|
224
234
|
if (options.value !== undefined && options.value !== "") this.setValue(options.value);
|
|
225
235
|
this.setReadOnly(options.readOnly === true);
|
|
226
236
|
this.setDisabled(options.disabled === true);
|
|
@@ -503,10 +513,11 @@ class MaskedInput {
|
|
|
503
513
|
this.#input.setSelectionRange(caret, caret);
|
|
504
514
|
// Отклонённый символ и заполненная маска иначе не заметны: поле просто ничего не делает.
|
|
505
515
|
// Литералы самой маски («-», «(») за отказ не считаем — их место в шаблоне.
|
|
506
|
-
const junk = [...inserted_text].filter(
|
|
507
|
-
symbol !== "" && !this.#accepts(symbol) && !this.#mask.includes(symbol)
|
|
516
|
+
const junk = [...inserted_text].filter(
|
|
517
|
+
(symbol) => symbol !== "" && !this.#accepts(symbol) && !this.#mask.includes(symbol)
|
|
518
|
+
);
|
|
508
519
|
if (junk.length > 0) {
|
|
509
|
-
this.#announce(I18n.t("forms.maskedAllowedOnly", {value: this.#allowedText()}));
|
|
520
|
+
this.#announce(I18n.t("forms.maskedAllowedOnly", { value: this.#allowedText() }));
|
|
510
521
|
} else if (!complete_before && this.isComplete()) {
|
|
511
522
|
this.#announce(I18n.t("forms.maskedComplete"));
|
|
512
523
|
} else if (this.#status.innerText !== "") {
|
|
@@ -542,4 +553,4 @@ class MaskedInput {
|
|
|
542
553
|
};
|
|
543
554
|
}
|
|
544
555
|
|
|
545
|
-
exports.MaskedInput = MaskedInput
|
|
556
|
+
exports.MaskedInput = MaskedInput;
|