@vchasno/ui-kit 0.3.15 → 0.3.17
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 +17 -0
- package/dist/Datepicker/index.cjs.js +1 -1
- package/dist/Datepicker/index.js +1 -1
- package/dist/Datepicker/types/components/Alert/Alert.d.ts +4 -3
- package/dist/Datepicker/types/components/Input/Input.d.ts +1 -0
- package/dist/Menu/types/components/Alert/Alert.d.ts +4 -3
- package/dist/Menu/types/components/Input/Input.d.ts +1 -0
- package/dist/ProjectsPopover/types/components/Alert/Alert.d.ts +4 -3
- package/dist/ProjectsPopover/types/components/Input/Input.d.ts +1 -0
- package/dist/Select/index.cjs.js +38 -125
- package/dist/Select/index.cjs.js.map +1 -1
- package/dist/Select/index.js +38 -125
- package/dist/Select/index.js.map +1 -1
- package/dist/Select/types/components/Alert/Alert.d.ts +4 -3
- package/dist/Select/types/components/Input/Input.d.ts +1 -0
- package/dist/SelectCreatable/index.cjs.js +38 -125
- package/dist/SelectCreatable/index.cjs.js.map +1 -1
- package/dist/SelectCreatable/index.js +38 -125
- package/dist/SelectCreatable/index.js.map +1 -1
- package/dist/SelectCreatable/types/components/Alert/Alert.d.ts +4 -3
- package/dist/SelectCreatable/types/components/Input/Input.d.ts +1 -0
- package/dist/Snackbar/index.cjs.js +8 -8
- package/dist/Snackbar/index.cjs.js.map +1 -1
- package/dist/Snackbar/index.js +8 -8
- package/dist/Snackbar/index.js.map +1 -1
- package/dist/Snackbar/types/components/Alert/Alert.d.ts +4 -3
- package/dist/Snackbar/types/components/Input/Input.d.ts +1 -0
- package/dist/css/_theme.css +9 -7
- package/dist/index.d.ts +5 -3
- package/dist/index.js +22 -26
- package/dist/index.js.map +1 -1
- package/dist/types/components/Alert/Alert.d.ts +4 -3
- package/dist/types/components/Input/Input.d.ts +1 -0
- package/package.json +2 -2
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './Alert.global.css';
|
|
3
|
-
type AlertType = 'error' | 'warning' | 'success' | 'info';
|
|
4
|
-
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success';
|
|
3
|
+
type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
|
|
4
|
+
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
|
|
5
5
|
export interface AlertProps {
|
|
6
6
|
type?: AlertType;
|
|
7
|
-
icon?: IconType
|
|
7
|
+
icon?: IconType;
|
|
8
|
+
customIcon?: React.ReactNode;
|
|
8
9
|
leftBorder?: boolean;
|
|
9
10
|
className?: string;
|
|
10
11
|
onClose?: VoidFunction;
|
|
@@ -9,6 +9,7 @@ export interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedba
|
|
|
9
9
|
startElement?: string | React.ReactElement;
|
|
10
10
|
endElement?: string | React.ReactElement;
|
|
11
11
|
labelProps?: InputHTMLAttributes<HTMLLabelElement>;
|
|
12
|
+
hideEmptyMeta?: boolean;
|
|
12
13
|
children: React.ReactHTMLElement<HTMLInputElement> | React.ReactElement | JSX.Element[];
|
|
13
14
|
}
|
|
14
15
|
export declare const Input: React.FC<InputProps>;
|
package/dist/css/_theme.css
CHANGED
|
@@ -47,14 +47,16 @@
|
|
|
47
47
|
--vchasno-ui-text-success-color: #1cb800;
|
|
48
48
|
--vchasno-ui-text-warning-color: #ffb200;
|
|
49
49
|
--vchasno-ui-text-error-color: #ff5937;
|
|
50
|
-
--vchasno-ui-alert-info-color: #
|
|
51
|
-
--vchasno-ui-alert-info-bg: #
|
|
50
|
+
--vchasno-ui-alert-info-color: #006be9;
|
|
51
|
+
--vchasno-ui-alert-info-bg: #ecf4ff;
|
|
52
52
|
--vchasno-ui-alert-warning-color: #ffb200;
|
|
53
|
-
--vchasno-ui-alert-warning-bg:
|
|
54
|
-
--vchasno-ui-alert-error-color: #
|
|
55
|
-
--vchasno-ui-alert-error-bg:
|
|
56
|
-
--vchasno-ui-alert-success-color: #
|
|
57
|
-
--vchasno-ui-alert-success-bg:
|
|
53
|
+
--vchasno-ui-alert-warning-bg: #fff2d6;
|
|
54
|
+
--vchasno-ui-alert-error-color: #e73434;
|
|
55
|
+
--vchasno-ui-alert-error-bg: #ffeded;
|
|
56
|
+
--vchasno-ui-alert-success-color: #00b700;
|
|
57
|
+
--vchasno-ui-alert-success-bg: #e7f3d9;
|
|
58
|
+
--vchasno-ui-alert-config-color: #006be9;
|
|
59
|
+
--vchasno-ui-alert-config-bg: #f3f6f8;
|
|
58
60
|
--vchasno-ui-tabs-active-color: #087dc1;
|
|
59
61
|
--vchasno-ui-pagination-border-color: #6b5fff;
|
|
60
62
|
--vchasno-ui-pagination-hover-bg-color: rgb(0 0 0 / 10%);
|
package/dist/index.d.ts
CHANGED
|
@@ -66,6 +66,7 @@ interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedback & Er
|
|
|
66
66
|
startElement?: string | React.ReactElement;
|
|
67
67
|
endElement?: string | React.ReactElement;
|
|
68
68
|
labelProps?: InputHTMLAttributes<HTMLLabelElement>;
|
|
69
|
+
hideEmptyMeta?: boolean;
|
|
69
70
|
children: React.ReactHTMLElement<HTMLInputElement> | React.ReactElement | JSX.Element[];
|
|
70
71
|
}
|
|
71
72
|
declare const Input: React.FC<InputProps>;
|
|
@@ -130,11 +131,12 @@ interface TextAreaInputProps extends TextareaAutosizeProps, Omit<InputProps, 'ch
|
|
|
130
131
|
}
|
|
131
132
|
declare const TextAreaInput: React.ForwardRefExoticComponent<TextAreaInputProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
132
133
|
|
|
133
|
-
type AlertType = 'error' | 'warning' | 'success' | 'info';
|
|
134
|
-
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success';
|
|
134
|
+
type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
|
|
135
|
+
type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
|
|
135
136
|
interface AlertProps {
|
|
136
137
|
type?: AlertType;
|
|
137
|
-
icon?: IconType
|
|
138
|
+
icon?: IconType;
|
|
139
|
+
customIcon?: React.ReactNode;
|
|
138
140
|
leftBorder?: boolean;
|
|
139
141
|
className?: string;
|
|
140
142
|
onClose?: VoidFunction;
|
package/dist/index.js
CHANGED
|
@@ -236,7 +236,7 @@ var Spinner = function (_a) {
|
|
|
236
236
|
React$1.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
237
237
|
};
|
|
238
238
|
|
|
239
|
-
var css_248z$l = ".vchasno-ui-button {\n display: inline-flex;\n min-height: 50px;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 8px;\n background-color: var(--vchasno-ui-btn-default-bg);\n color: var(--vchasno-ui-btn-default-color);\n font-size: var(--vchasno-ui-btn-font-size);\n font-weight: 700;\n gap: 5px;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n}\n\n.vchasno-ui-button:disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n.vchasno-ui-button:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-default-hover-color);\n cursor: pointer;\n}\n\n.vchasno-ui-button.--sm {\n padding: 0 15px;\n}\n\n.vchasno-ui-button.--md {\n min-width: 145px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--lg {\n min-width: 200px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--wide {\n width: 100%;\n}\n\n.vchasno-ui-button.--primary {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-primary-bg);\n box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color:
|
|
239
|
+
var css_248z$l = ".vchasno-ui-button {\n display: inline-flex;\n min-height: 50px;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 8px;\n background-color: var(--vchasno-ui-btn-default-bg);\n color: var(--vchasno-ui-btn-default-color);\n font-size: var(--vchasno-ui-btn-font-size);\n font-weight: 700;\n gap: 5px;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n}\n\n.vchasno-ui-button:disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n.vchasno-ui-button:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-default-hover-color);\n cursor: pointer;\n}\n\n.vchasno-ui-button.--sm {\n padding: 0 15px;\n}\n\n.vchasno-ui-button.--md {\n min-width: 145px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--lg {\n min-width: 200px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--wide {\n width: 100%;\n}\n\n.vchasno-ui-button.--primary {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-primary-bg);\n box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary {\n background-color: var(--vchasno-ui-btn-secondary-bg);\n box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button:disabled.--primary,\n.vchasno-ui-button:disabled.--secondary {\n border-color: #b6cadb;\n background-color: #b6cadb;\n box-shadow: inset 0 -2px 0 rgb(139 163 182 / 50%);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-primary-hover-bg);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary.--outline {\n border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--secondary:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-secondary-hover-bg);\n color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button.--secondary.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n background-color: rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--danger {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: var(--vchasno-ui-btn-danger-bg, rgb(239 101 98 / 20%));\n box-shadow: none;\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--danger.--outline {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button:disabled.--danger {\n border: 1px solid #b6cadb;\n background-color: rgb(182 202 219 / 20%);\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--danger:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-danger-hover-bg, #ef6562);\n color: var(--vchasno-ui-btn-danger-hover-color, #fff);\n}\n\n.vchasno-ui-button.--danger.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--transparent .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-btn-default-color);\n transition: stroke var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-button.--transparent:hover .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-btn-default-hover-color);\n}\n\n.vchasno-ui-button:disabled.--transparent {\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--light {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-light-bg, #fff);\n box-shadow: 0 2px 4px rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-light-color);\n}\n\n.vchasno-ui-button:disabled.--light {\n border: none;\n background-color: rgb(182 202 219 / 20%);\n box-shadow: 0 2px 4px rgb(0 0 0 / 10%);\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--light.--outline {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-primary-color);\n box-shadow: none;\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--light:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-light-hover-bg);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n";
|
|
240
240
|
styleInject(css_248z$l);
|
|
241
241
|
|
|
242
242
|
var Button = React$1.forwardRef(function (_a, ref) {
|
|
@@ -261,7 +261,7 @@ var InputMeta = function (_a) {
|
|
|
261
261
|
error && React$1.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
|
|
262
262
|
};
|
|
263
263
|
|
|
264
|
-
var css_248z$j = ".vchasno-ui-label-text {\n position: absolute;\n z-index:
|
|
264
|
+
var css_248z$j = ".vchasno-ui-label-text {\n position: absolute;\n z-index: 1;\n top: 50%;\n left: 12px;\n display: inline-flex;\n max-width: calc(100% - 20px);\n align-self: flex-start;\n padding: 0 4px;\n background-color: var(--vchasno-ui-input-bg-color);\n color: var(--vchasno-ui-label-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n gap: 3px;\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n pointer-events: none;\n text-overflow: ellipsis;\n transform: translate(0, -50%);\n transition:\n color var(--vchasno-ui-transition-duration-sec, 0.3s),\n top 0.3s,\n font-size 0.3s;\n white-space: nowrap;\n}\n\n.vchasno-ui-select .vchasno-ui-label-text {\n max-width: calc(100% - 40px);\n}\n\n.vchasno-ui-select__floating-label,\n[class^='vchasno-ui-']:not(:placeholder-shown) + .vchasno-ui-label-text,\n[class^='vchasno-ui-']:focus:not(.--disabled) + .vchasno-ui-label-text {\n top: 0;\n font-size: 12px;\n}\n\nlabel[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n color: var(--vchasno-ui-label-color-focused);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n color: var(--vchasno-ui-input-color-error);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n cursor: text;\n}\n\n.vchasno-ui-label-text sup {\n position: relative;\n top: -0.2em;\n display: none;\n color: var(--vchasno-ui-input-color-error);\n font-size: calc(var(--vchasno-ui-input-font-size) * 1.4);\n vertical-align: top;\n}\n\nlabel[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n display: none;\n color: var(--vchasno-ui-label-color-default);\n transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n display: block;\n}\n\n.vchasno-ui-label-text__content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
|
|
265
265
|
styleInject(css_248z$j);
|
|
266
266
|
|
|
267
267
|
var LabelText = function (_a) {
|
|
@@ -282,7 +282,7 @@ var css_248z$i = ".vchasno-ui-input {\n display: inline-flex;\n max-width:
|
|
|
282
282
|
styleInject(css_248z$i);
|
|
283
283
|
|
|
284
284
|
var Input = function (_a) {
|
|
285
|
-
var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, labelProps = _a.labelProps, children = _a.children;
|
|
285
|
+
var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, labelProps = _a.labelProps, _b = _a.hideEmptyMeta, hideEmptyMeta = _b === void 0 ? false : _b, children = _a.children;
|
|
286
286
|
return (React$1.createElement("label", __assign({ className: cn('vchasno-ui-input', {
|
|
287
287
|
'--required': required,
|
|
288
288
|
'--disabled': disabled,
|
|
@@ -295,7 +295,7 @@ var Input = function (_a) {
|
|
|
295
295
|
React$1.createElement(LabelText, null, label),
|
|
296
296
|
React$1.createElement("span", { className: "vchasno-ui-input__feedback" }, loading && React$1.createElement(Spinner, { height: "100%" })),
|
|
297
297
|
endElement),
|
|
298
|
-
React$1.createElement(InputMeta, { error: error, hint: hint })));
|
|
298
|
+
hideEmptyMeta && !error && !hint ? null : React$1.createElement(InputMeta, { error: error, hint: hint })));
|
|
299
299
|
};
|
|
300
300
|
Input.displayName = 'Input';
|
|
301
301
|
|
|
@@ -398,9 +398,9 @@ var css_248z$f = ".vchasno-ui-text-input {\n font-size: var(--vchasno-ui-inpu
|
|
|
398
398
|
styleInject(css_248z$f);
|
|
399
399
|
|
|
400
400
|
var TextInput = React$1.forwardRef(function (_a, ref) {
|
|
401
|
-
var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, inputClassName = _a.inputClassName, labelProps = _a.labelProps, _b = _a.placeholder, placeholder = _b === void 0 ? ' ' : _b, //need "space" for correct label working
|
|
402
|
-
rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "inputClassName", "labelProps", "placeholder"]);
|
|
403
|
-
return (React$1.createElement(Input, { required: required, wide: wide, className: className, loading: loading, disabled: disabled, label: label, error: error, hint: hint, endElement: endElement, startElement: startElement, labelProps: labelProps },
|
|
401
|
+
var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, inputClassName = _a.inputClassName, labelProps = _a.labelProps, hideEmptyMeta = _a.hideEmptyMeta, _b = _a.placeholder, placeholder = _b === void 0 ? ' ' : _b, //need "space" for correct label working
|
|
402
|
+
rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "inputClassName", "labelProps", "hideEmptyMeta", "placeholder"]);
|
|
403
|
+
return (React$1.createElement(Input, { required: required, wide: wide, className: className, loading: loading, disabled: disabled, label: label, error: error, hint: hint, endElement: endElement, startElement: startElement, labelProps: labelProps, hideEmptyMeta: hideEmptyMeta },
|
|
404
404
|
React$1.createElement("input", __assign({ disabled: disabled, className: cn('vchasno-ui-text-input', inputClassName), required: required, ref: ref, placeholder: placeholder }, rest))));
|
|
405
405
|
});
|
|
406
406
|
TextInput.displayName = 'TextInput';
|
|
@@ -562,37 +562,33 @@ var TextAreaInput = React$1.forwardRef(function (_a, ref) {
|
|
|
562
562
|
});
|
|
563
563
|
TextAreaInput.displayName = 'TextAreaInput';
|
|
564
564
|
|
|
565
|
-
var css_248z$9 = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n align-items: center;\n padding:
|
|
565
|
+
var css_248z$9 = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n align-items: center;\n padding: 12px 16px;\n border-radius: 4px;\n border-left: 3px solid transparent;\n font-size: 14px;\n gap: 12px;\n line-height: 20px;\n}\n\n.vchasno-ui-alert strong,\n.vchasno-ui-alert b {\n font-weight: 700;\n}\n\n.vchasno-ui-alert.--wide {\n width: 100%;\n}\n\n.vchasno-ui-alert.--left-border {\n border-left-width: 4px;\n}\n\n.vchasno-ui-alert__icon-wrapper,\n.vchasno-ui-alert__close-icon {\n display: flex;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n line-height: 20px;\n}\n\n.vchasno-ui-alert.--info {\n border-color: var(--vchasno-ui-alert-info-color, #006be9);\n background-color: var(--vchasno-ui-alert-info-bg, #ecf4ff);\n}\n\n.vchasno-ui-alert.--warning {\n border-color: var(--vchasno-ui-alert-warning-color, #ffb200);\n background-color: var(--vchasno-ui-alert-warning-bg, #fff2d6);\n}\n\n.vchasno-ui-alert.--error {\n border-color: var(--vchasno-ui-alert-error-color, #e73434);\n background-color: var(--vchasno-ui-alert-error-bg, #ffeded);\n}\n\n.vchasno-ui-alert.--success {\n border-color: var(--vchasno-ui-alert-success-color, #00b700);\n background-color: var(--vchasno-ui-alert-success-bg, #e7f3d9);\n}\n\n.vchasno-ui-alert.--config {\n border-color: var(--vchasno-ui-alert-config-color, #006be9);\n background-color: var(--vchasno-ui-alert-config-bg, #f3f6f8);\n}\n\n.vchasno-ui-alert__close-icon {\n width: 30px;\n height: 30px;\n border-radius: 4px;\n transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-alert__close-icon:hover {\n background-color: rgb(255 255 255 / 50%);\n cursor: pointer;\n}\n\n.vchasno-ui-alert.--close {\n display: none;\n}\n";
|
|
566
566
|
styleInject(css_248z$9);
|
|
567
567
|
|
|
568
568
|
var iconMap = {
|
|
569
|
-
info: function () { return
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
warning: function () { return (React$1.createElement("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
576
|
-
React$1.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15 7.5C15 11.6421 11.6421 15 7.5 15C3.35786 15 0 11.6421 0 7.5C0 3.35786 3.35786 0 7.5 0C11.6421 0 15 3.35786 15 7.5ZM6.5625 8.125C6.5625 8.64277 6.98223 9.0625 7.5 9.0625C8.01777 9.0625 8.4375 8.64277 8.4375 8.125V3.75C8.4375 3.23223 8.01777 2.8125 7.5 2.8125C6.98223 2.8125 6.5625 3.23223 6.5625 3.75V8.125ZM6.5625 11.25C6.5625 11.7678 6.98223 12.1875 7.5 12.1875C8.01777 12.1875 8.4375 11.7678 8.4375 11.25C8.4375 10.7322 8.01777 10.3125 7.5 10.3125C6.98223 10.3125 6.5625 10.7322 6.5625 11.25Z", fill: "currentColor" }))); },
|
|
577
|
-
success: function () { return (React$1.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
578
|
-
React$1.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 15.5C12.1421 15.5 15.5 12.1421 15.5 8C15.5 3.85786 12.1421 0.5 8 0.5C3.85786 0.5 0.5 3.85786 0.5 8C0.5 12.1421 3.85786 15.5 8 15.5ZM10.427 5.39255C10.7106 5.0916 11.2362 5.14816 11.5278 5.39255C11.8534 5.66547 11.7932 6.11611 11.5278 6.39768L7.56268 10.6053C7.30802 10.8756 6.71524 10.8875 6.46185 10.6053L4.46953 8.38686C4.19295 8.07889 4.16113 7.68848 4.46953 7.38172C4.73477 7.1179 5.31108 7.09302 5.57035 7.38172L7.02551 9.00207L10.427 5.39255Z", fill: "currentColor" }))); },
|
|
569
|
+
info: function () { return React$1.createElement(React$1.Fragment, null, "\uD83E\uDD14"); },
|
|
570
|
+
cross: function () { return React$1.createElement(React$1.Fragment, null, "\u274C"); },
|
|
571
|
+
error: function () { return React$1.createElement(React$1.Fragment, null, "\u2757\uFE0F"); },
|
|
572
|
+
warning: function () { return React$1.createElement(React$1.Fragment, null, "\u26A0\uFE0F"); },
|
|
573
|
+
success: function () { return React$1.createElement(React$1.Fragment, null, "\u2705"); },
|
|
574
|
+
config: function () { return React$1.createElement(React$1.Fragment, null, "\u2699\uFE0F"); },
|
|
579
575
|
};
|
|
580
576
|
var Alert = function (_a) {
|
|
581
|
-
var _b = _a.type, type = _b === void 0 ? 'info' : _b, _c = _a.leftBorder, leftBorder = _c === void 0 ? true : _c, icon = _a.icon, className = _a.className, children = _a.children, onClose = _a.onClose, wide = _a.wide, _d = _a.close, close = _d === void 0 ? false : _d;
|
|
577
|
+
var _b = _a.type, type = _b === void 0 ? 'info' : _b, _c = _a.leftBorder, leftBorder = _c === void 0 ? true : _c, icon = _a.icon, className = _a.className, children = _a.children, onClose = _a.onClose, wide = _a.wide, _d = _a.close, close = _d === void 0 ? false : _d, customIcon = _a.customIcon;
|
|
582
578
|
var iconNode = null;
|
|
583
|
-
if (
|
|
584
|
-
|
|
579
|
+
if (customIcon) {
|
|
580
|
+
iconNode = React$1.createElement("span", { className: "vchasno-ui-alert__icon-wrapper" }, customIcon);
|
|
581
|
+
}
|
|
582
|
+
else {
|
|
583
|
+
var Icon = iconMap[icon || type];
|
|
585
584
|
iconNode = (React$1.createElement("span", { className: "vchasno-ui-alert__icon-wrapper" },
|
|
586
585
|
React$1.createElement(Icon, null)));
|
|
587
586
|
}
|
|
588
|
-
else if (icon) {
|
|
589
|
-
iconNode = React$1.createElement("span", { className: "vchasno-ui-alert__icon-wrapper" }, icon);
|
|
590
|
-
}
|
|
591
587
|
var closeNode = null;
|
|
592
588
|
if (typeof onClose === 'function') {
|
|
593
|
-
var CrossSvg = iconMap.cross;
|
|
594
589
|
closeNode = (React$1.createElement("span", { className: "vchasno-ui-alert__close-icon", onClick: onClose },
|
|
595
|
-
React$1.createElement(
|
|
590
|
+
React$1.createElement("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
591
|
+
React$1.createElement("path", { d: "M6.4 5L9.7 1.7C10.1 1.3 10.1 0.7 9.7 0.3C9.3 -0.1 8.7 -0.1 8.3 0.3L5 3.6L1.7 0.3C1.3 -0.1 0.7 -0.1 0.3 0.3C-0.1 0.7 -0.1 1.3 0.3 1.7L3.6 5L0.3 8.3C-0.1 8.7 -0.1 9.3 0.3 9.7C0.5 9.9 0.7 10 1 10C1.3 10 1.5 9.9 1.7 9.7L5 6.4L8.3 9.7C8.5 9.9 8.7 10 9 10C9.3 10 9.5 9.9 9.7 9.7C10.1 9.3 10.1 8.7 9.7 8.3L6.4 5Z", fill: "currentColor" }))));
|
|
596
592
|
}
|
|
597
593
|
return (React$1.createElement("span", { className: cn('vchasno-ui-alert', "--".concat(type), { '--close': close }, { '--wide': wide }, { '--left-border': leftBorder }, className) },
|
|
598
594
|
iconNode,
|