@vchasno/ui-kit 0.1.5 → 0.1.7

package/CHANGELOG.md

@@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.1.7] - 2024-01-16
+
+## Added
+
+- improve DatePicker component, add mask properties, add multiple date formats
+
+## Fixed
+
+- fix typos in package.json
+
+## [0.1.6] - 2023-10-23
+
+## Fixed
+
+- fix --vchasno-ui-pagination-size css variable
+
 ## [0.1.5] - 2023-10-19
 
 ## Fixed

package/dist/css/_theme.css

@@ -24,7 +24,7 @@
     --vchasno-ui-input-bg-error: rgb(239 101 98 / 10%);
     --vchasno-ui-input-font-size: 14px;
     --vchasno-ui-input-font-color: #333;
-    --vchasno-ui-label-color-default:  #6b8091;
+    --vchasno-ui-label-color-default: #6b8091;
     --vchasno-ui-label-color-focused: #6b5fff;
     --vchasno-ui-checkbox-bg-color: #604adf;
     --vchasno-ui-checkbox-disabled-bg: #b6cadb;
@@ -51,4 +51,5 @@
     --vchasno-ui-alert-success-bg: rgb(28 184 0 / 10%);
     --vchasno-ui-tabs-active-color: #087dc1;
     --vchasno-ui-pagination-border-color: #6b5fff;
+    --vchasno-ui-pagination-size: 32px;
 }

package/dist/index.d.ts

@@ -157,6 +157,9 @@ declare const Alert: React.FC<AlertProps>;
 interface DatePickerProps extends ReactDatePickerProps, Partial<LoadingFeedback & WithHint & ErrorFeedback> {
     label?: string;
     className?: string;
+    showMask?: boolean;
+    mask?: MaskedInputProps['mask'];
+    onChange: ReactDatePickerProps['onChange'];
 }
 /** Компонент вводу дати/часу */
 declare const DatePicker: React.FC<DatePickerProps>;

package/dist/index.js

@@ -265,7 +265,7 @@ var composePaginationSteps = function (total, current) {
     return display;
 };
 
-var css_248z$b = ".vchasno-ui-pagination {\n    --pagination-size: 32px;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    font-size: 14px;\n    gap: 10px;\n}\n\n.vchasno-ui-pagination__item {\n    min-width: var(--vchasno-ui-pagination-size);\n    height: var(--vchasno-ui-pagination-size);\n    flex-grow: 0;\n    flex-shrink: 0;\n    border: 1px solid transparent;\n    border-radius: 6px;\n    background-color: #fff;\n    cursor: pointer;\n    line-height: calc(var(--vchasno-ui-pagination-size) - 2px);\n    outline: 0;\n    text-align: center;\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        border var(--vchasno-ui-transition-duration-sec, 0.3s);\n    user-select: none;\n    vertical-align: middle;\n}\n\n.vchasno-ui-pagination__item-arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.vchasno-ui-pagination__item:not(.vchasno-ui-pagination__item-disabled):hover {\n    background-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-pagination__item-active {\n    border-color: var(--vchasno-ui-pagination-border-color, #6b5fff);\n}\n\n.vchasno-ui-pagination__item-disabled {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n";
+var css_248z$b = ".vchasno-ui-pagination {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    font-size: 14px;\n    gap: 10px;\n}\n\n.vchasno-ui-pagination__item {\n    min-width: var(--vchasno-ui-pagination-size);\n    height: var(--vchasno-ui-pagination-size);\n    flex-grow: 0;\n    flex-shrink: 0;\n    border: 1px solid transparent;\n    border-radius: 6px;\n    background-color: #fff;\n    cursor: pointer;\n    line-height: calc(var(--vchasno-ui-pagination-size) - 2px);\n    outline: 0;\n    text-align: center;\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        border var(--vchasno-ui-transition-duration-sec, 0.3s);\n    user-select: none;\n    vertical-align: middle;\n}\n\n.vchasno-ui-pagination__item-arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.vchasno-ui-pagination__item:not(.vchasno-ui-pagination__item-disabled):hover {\n    background-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-pagination__item-active {\n    border-color: var(--vchasno-ui-pagination-border-color, #6b5fff);\n}\n\n.vchasno-ui-pagination__item-disabled {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n";
 styleInject(css_248z$b);
 
 var Pagination = function (_a) {
@@ -18314,9 +18314,22 @@ styleInject(css_248z$3);
 
 var SvgCalendar = function () { return (React__default.createElement("svg", { width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
     React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16 4h1c.6 0 1 .4 1 1v10c0 1.7-1.3 3-3 3H5c-1.7 0-3-1.3-3-3V5c0-.6.4-1 1-1h1V3c0-.6.4-1 1-1s1 .4 1 1v1h8V3c0-.6.4-1 1-1s1 .4 1 1v1zm-1 12c.6 0 1-.4 1-1V6H4v9c0 .6.4 1 1 1h10zM8 9a1 1 0 11-2 0 1 1 0 012 0zm2 1a1 1 0 100-2 1 1 0 000 2zm4-1a1 1 0 11-2 0 1 1 0 012 0zm-7 5a1 1 0 100-2 1 1 0 000 2zm4-1a1 1 0 11-2 0 1 1 0 012 0z", fill: "currentColor" }))); };
+var DATE_FORMATS = ['dd.MM.yyyy', 'dd-MM-yyyy', 'dd/MM/yyyy', 'dd.MM.yy', 'dd-MM-yy', 'dd/MM/yy'];
+var defaultMask = [
+    /\d/,
+    /\d/,
+    '.',
+    /\d/,
+    /\d/,
+    '.',
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+];
 /** Компонент вводу дати/часу */
 var DatePicker = function (_a) {
-    var label = _a.label, disabled = _a.disabled, required = _a.required, loading = _a.loading, hint = _a.hint, error = _a.error, _b = _a.dateFormat, dateFormat = _b === void 0 ? 'dd/MM/yyyy' : _b, className = _a.className, _c = _a.timeCaption, timeCaption = _c === void 0 ? 'Час' : _c, _d = _a.enableTabLoop, enableTabLoop = _d === void 0 ? false : _d, _e = _a.locale, locale = _e === void 0 ? uk : _e, rest = __rest(_a, ["label", "disabled", "required", "loading", "hint", "error", "dateFormat", "className", "timeCaption", "enableTabLoop", "locale"]);
+    var label = _a.label, disabled = _a.disabled, required = _a.required, loading = _a.loading, hint = _a.hint, error = _a.error, _b = _a.dateFormat, dateFormat = _b === void 0 ? DATE_FORMATS : _b, className = _a.className, _c = _a.timeCaption, timeCaption = _c === void 0 ? 'Час' : _c, _d = _a.enableTabLoop, enableTabLoop = _d === void 0 ? false : _d, _e = _a.locale, locale = _e === void 0 ? uk : _e, _f = _a.showMask, showMask = _f === void 0 ? false : _f, _g = _a.mask, mask = _g === void 0 ? defaultMask : _g, rest = __rest(_a, ["label", "disabled", "required", "loading", "hint", "error", "dateFormat", "className", "timeCaption", "enableTabLoop", "locale", "showMask", "mask"]);
     return (React__default.createElement("label", { className: cn('vchasno-ui-date-picker', {
             '--loading': loading,
             '--required': required,
@@ -18324,7 +18337,7 @@ var DatePicker = function (_a) {
         }, className) },
         React__default.createElement(LabelText, null, label),
         React__default.createElement("span", { className: "vchasno-ui-date-picker__wrapper" },
-            React__default.createElement(zt, __assign({ enableTabLoop: enableTabLoop, locale: locale, timeCaption: timeCaption, disabled: disabled, placeholderText: " ", className: "vchasno-ui-date-picker__picker", dateFormat: dateFormat }, rest)),
+            React__default.createElement(zt, __assign({ enableTabLoop: enableTabLoop, locale: locale, timeCaption: timeCaption, disabled: disabled, placeholderText: " ", className: "vchasno-ui-date-picker__picker", dateFormat: dateFormat, customInput: showMask ? React__default.createElement(MaskedInput, { inputMode: "text", mask: mask, showMask: true }) : undefined }, rest)),
             loading ? React__default.createElement(Spinner, { height: "18px" }) : React__default.createElement(SvgCalendar, null)),
         React__default.createElement(InputMeta, { hint: hint, error: error })));
 };