@maskito/kit - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

package.json

 {
   "name": "@maskito/kit",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "The optional framework-agnostic Maskito's package with ready-to-use masks",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -6,7 +6,14 @@ # @maskito/kit
 
-[Documentation](https://tinkoff.github.io/maskito) •
-[Submit an Issue](https://github.com/Tinkoff/maskito/issues/new/choose) • [Contact Us](https://t.me/taiga_ui)
+<p align="center">
+    <img src="https://raw.githubusercontent.com/Tinkoff/maskito/main/projects/demo/src/assets/icons/maskito.svg" alt="Maskito logo" height="120px">
+</p>
 
-> The optional framework-agnostic Maskito's package. It contains ready-to-use masks with configurable parameters.
+<p align="center">
+    <a href="https://tinkoff.github.io/maskito">Documentation</a> •
+    <a href="https://github.com/Tinkoff/maskito/issues/new/choose">Submit an Issue</a> •
+    <a href="https://t.me/taiga_ui">Contact Us</a>
+</p>
 
+> The optional framework-agnostic Maskito's package.<br />It contains ready-to-use masks with configurable parameters.
+
 ## How to install
@@ -13,0 +20,0 @@

src/index.d.ts

 export * from './lib/masks/date';
 export * from './lib/masks/date-range';
+export * from './lib/masks/date-time';
 export * from './lib/masks/number';
 export * from './lib/masks/time';
-export { MaskitoDateMode, MaskitoDateSegments } from './lib/types';
+export { MaskitoDateMode, MaskitoDateSegments, MaskitoTimeMode, MaskitoTimeSegments, } from './lib/types';
 //# sourceMappingURL=index.d.ts.map

src/index.js

 export * from './lib/masks/date';
 export * from './lib/masks/date-range';
+export * from './lib/masks/date-time';
 export * from './lib/masks/number';
 export * from './lib/masks/time';
 //# sourceMappingURL=index.js.map

src/lib/constants/index.d.ts

 export * from './default-min-max-dates';
+export * from './default-time-segment-max-values';
 export * from './possible-dates-separator';
+export * from './time-fixed-characters';
+export * from './time-segment-value-lengths';
 export * from './unicode-characters';
 //# sourceMappingURL=index.d.ts.map

src/lib/constants/index.js

 export * from './default-min-max-dates';
+export * from './default-time-segment-max-values';
 export * from './possible-dates-separator';
+export * from './time-fixed-characters';
+export * from './time-segment-value-lengths';
 export * from './unicode-characters';
 //# sourceMappingURL=index.js.map

src/lib/constants/possible-dates-separator.d.ts

 export declare const POSSIBLE_DATES_SEPARATOR: string[];
+export declare const POSSIBLE_DATE_TIME_SEPARATOR: string[];
 //# sourceMappingURL=possible-dates-separator.d.ts.map

src/lib/constants/possible-dates-separator.js

@@ -8,2 +8,3 @@ import { CHAR_EM_DASH, CHAR_EN_DASH, CHAR_HYPHEN, CHAR_MINUS } from './unicode-characters';
 ];
+export const POSSIBLE_DATE_TIME_SEPARATOR = [',', ' '];
 //# sourceMappingURL=possible-dates-separator.js.map

src/lib/masks/date-range/min-max-range-length-postprocessor.js

 import { DEFAULT_MAX_DATE } from '../../constants';
-import { appendDate, clamp, dateToSegments, isDateStringCompleted, isEmpty, parseDateRangeString, parseDateString, segmentsToDate, toDateString, } from '../../utils';
+import { appendDate, clamp, dateToSegments, isDateStringComplete, isEmpty, parseDateRangeString, parseDateString, segmentsToDate, toDateString, } from '../../utils';
 export function createMinMaxRangeLengthPostprocessor({ dateModeTemplate, datesSeparator, minLength, maxLength, max = DEFAULT_MAX_DATE, }) {
@@ -10,3 +10,3 @@ if (isEmpty(minLength) && isEmpty(maxLength)) {
         if (dateStrings.length !== 2 ||
-            dateStrings.some(date => !isDateStringCompleted(date, dateModeTemplate))) {
+            dateStrings.some(date => !isDateStringComplete(date, dateModeTemplate))) {
             return { value, selection };
@@ -13,0 +13,0 @@ }

src/lib/masks/number/number-mask.js

 import { maskitoPipe } from '@maskito/core';
-import { CHAR_NO_BREAK_SPACE } from '../../constants';
-import { createDecimalZeroPaddingPostprocessor, createLeadingZeroesValidationPostprocessor, createMaxValidationPostprocessor, createNotEmptyIntegerPartPreprocessor, createPseudoSeparatorsPreprocessor, createSeparatorDeletionPreprocessor, createThousandSeparatorPostprocessor, } from './processors';
+import { CHAR_EM_DASH, CHAR_EN_DASH, CHAR_HYPHEN, CHAR_MINUS, CHAR_NO_BREAK_SPACE, } from '../../constants';
+import { createDecimalZeroPaddingPostprocessor, createLeadingZeroesValidationPostprocessor, createMaxValidationPostprocessor, createNotEmptyIntegerPartPreprocessor, createPseudoCharactersPreprocessor, createSeparatorDeletionPreprocessor, createThousandSeparatorPostprocessor, } from './processors';
 import { generateMaskExpression, getDefaultPseudoSeparators } from './utils';
@@ -9,2 +9,3 @@ export function maskitoNumberOptionsGenerator({ max = Number.MAX_SAFE_INTEGER, isNegativeAllowed = true, precision = 0, thousandSeparator = CHAR_NO_BREAK_SPACE, decimalSeparator = ',', decimalPseudoSeparators = getDefaultPseudoSeparators({
 }), decimalZeroPadding = false, } = {}) {
+    const pseudoMinuses = [CHAR_HYPHEN, CHAR_EN_DASH, CHAR_EM_DASH].filter(char => char !== thousandSeparator && char !== decimalSeparator);
     return {
@@ -17,3 +18,3 @@ mask: generateMaskExpression({
         }),
-        preprocessor: maskitoPipe(createPseudoSeparatorsPreprocessor(decimalSeparator, decimalPseudoSeparators), createNotEmptyIntegerPartPreprocessor({ decimalSeparator, precision }), createSeparatorDeletionPreprocessor({
+        preprocessor: maskitoPipe(createPseudoCharactersPreprocessor(CHAR_MINUS, pseudoMinuses), createPseudoCharactersPreprocessor(decimalSeparator, decimalPseudoSeparators), createNotEmptyIntegerPartPreprocessor({ decimalSeparator, precision }), createSeparatorDeletionPreprocessor({
             decimalSeparator,
@@ -20,0 +21,0 @@ decimalZeroPadding,

src/lib/masks/number/processors/index.d.ts

@@ -5,5 +5,5 @@ export * from './decimal-zero-padding-postprocessor';
 export * from './not-empty-integer-part-preprocessor';
-export * from './preudo-separators-preprocessor';
+export * from './preudo-character-preprocessor';
 export * from './separator-deletion-preprocessor';
 export * from './thousand-separator-postprocessor';
 //# sourceMappingURL=index.d.ts.map

src/lib/masks/number/processors/index.js

@@ -5,5 +5,5 @@ export * from './decimal-zero-padding-postprocessor';
 export * from './not-empty-integer-part-preprocessor';
-export * from './preudo-separators-preprocessor';
+export * from './preudo-character-preprocessor';
 export * from './separator-deletion-preprocessor';
 export * from './thousand-separator-postprocessor';
 //# sourceMappingURL=index.js.map

src/lib/masks/number/processors/thousand-separator-postprocessor.js

@@ -0,1 +1,2 @@
+import { CHAR_MINUS } from '../../../constants';
 /**
@@ -10,3 +11,3 @@ * It adds symbol for separating thousands.
         let [from, to] = selection;
-        const processedIntegerPart = Array.from(integerPart.replace(/^-/, '')).reduceRight((formattedValuePart, char, i) => {
+        const processedIntegerPart = Array.from(integerPart.replace(new RegExp(`^\\${CHAR_MINUS}`), '')).reduceRight((formattedValuePart, char, i) => {
             const isPositionForSeparator = formattedValuePart.length && (formattedValuePart.length + 1) % 4 === 0;
@@ -37,3 +38,3 @@ if (char === thousandSeparator && isPositionForSeparator) {
         return {
-            value: (value.startsWith('-') ? '-' : '') +
+            value: (value.startsWith(CHAR_MINUS) ? CHAR_MINUS : '') +
                 processedIntegerPart +
@@ -40,0 +41,0 @@ (value.includes(decimalSeparator) ? decimalSeparator : '') +

src/lib/masks/number/utils/generate-mask-expression.js

@@ -0,4 +1,5 @@
+import { CHAR_MINUS } from '../../../constants';
 export function generateMaskExpression({ decimalSeparator, isNegativeAllowed, precision, thousandSeparator, }) {
     const digit = '\\d';
-    const optionalMinus = isNegativeAllowed ? '-?' : '';
+    const optionalMinus = isNegativeAllowed ? `\\${CHAR_MINUS}?` : '';
     const integerPart = `[${digit}\\${thousandSeparator}]*`;
@@ -5,0 +6,0 @@ const decimalPart = `(\\${decimalSeparator}${digit}{0,${precision}})?`;

src/lib/masks/time/index.d.ts

 export { maskitoTimeOptionsGenerator } from './time-mask';
-export { MaskitoTimeMode, MaskitoTimeSegments } from './types';
 //# sourceMappingURL=index.d.ts.map

src/lib/masks/time/processors/max-validation-preprocessor.d.ts

 import { MaskitoOptions } from '@maskito/core';
-import { MaskitoTimeSegments } from '../types';
+import { MaskitoTimeSegments } from '../../../types';
 export declare function createMaxValidationPreprocessor(timeSegmentMaxValues: MaskitoTimeSegments<number>): NonNullable<MaskitoOptions['preprocessor']>;
 //# sourceMappingURL=max-validation-preprocessor.d.ts.map

src/lib/masks/time/processors/max-validation-preprocessor.js

@@ -1,4 +0,2 @@
-import { padWithZeroesUntilValid } from '../../../utils';
-import { TIME_SEGMENT_VALUE_LENGTHS } from '../constants';
-import { padTimeSegments, parseTimeString, toTimeString } from '../utils';
+import { padTimeSegments, validateTimeString } from '../../../utils/time';
 export function createMaxValidationPreprocessor(timeSegmentMaxValues) {
@@ -15,30 +13,19 @@ const paddedMaxValues = padTimeSegments(timeSegmentMaxValues);
         const newPossibleValue = value.slice(0, from) + newCharacters + value.slice(to);
-        const possibleTimeSegments = Object.entries(parseTimeString(newPossibleValue));
-        const validatedTimeSegments = {};
-        for (const [segmentName, segmentValue] of possibleTimeSegments) {
-            const validatedTime = toTimeString(validatedTimeSegments);
-            const maxSegmentValue = paddedMaxValues[segmentName];
-            const fantomSeparator = validatedTime.length && 1;
-            const lastSegmentDigitIndex = validatedTime.length +
-                fantomSeparator +
-                TIME_SEGMENT_VALUE_LENGTHS[segmentName];
-            const isLastSegmentDigitAdded = lastSegmentDigitIndex >= from && lastSegmentDigitIndex <= to;
-            if (isLastSegmentDigitAdded &&
-                Number(segmentValue) > Number(maxSegmentValue)) {
-                // 2|0:00 => Type 9 => 2|0:00
-                return { elementState, data: '' }; // prevent changes
-            }
-            const { validatedSegmentValue, prefixedZeroesCount } = padWithZeroesUntilValid(segmentValue, maxSegmentValue);
-            to += prefixedZeroesCount;
-            validatedTimeSegments[segmentName] = validatedSegmentValue;
+        const { validatedTimeString, updatedTimeSelection } = validateTimeString({
+            timeString: newPossibleValue,
+            paddedMaxValues,
+            offset: 0,
+            selection: [from, to],
+        });
+        if (newPossibleValue && !validatedTimeString) {
+            return { elementState, data: '' }; // prevent changes
         }
-        const finalTimeString = toTimeString(validatedTimeSegments);
-        to = finalTimeString.length - value.slice(to).length;
-        const newData = finalTimeString.slice(from, to);
+        to = updatedTimeSelection[1];
+        const newData = validatedTimeString.slice(from, to);
         return {
             elementState: {
                 selection,
-                value: finalTimeString.slice(0, from) +
+                value: validatedTimeString.slice(0, from) +
                     '0'.repeat(newData.length) +
-                    finalTimeString.slice(to),
+                    validatedTimeString.slice(to),
             },
@@ -45,0 +32,0 @@ data: newData,

src/lib/masks/time/time-mask.d.ts

 import { MaskitoOptions } from '@maskito/core';
-import { MaskitoTimeMode, MaskitoTimeSegments } from './types';
+import { MaskitoTimeMode, MaskitoTimeSegments } from '../../types';
 export declare function maskitoTimeOptionsGenerator({ mode, timeSegmentMaxValues, }: {
@@ -4,0 +4,0 @@ mode: MaskitoTimeMode;

src/lib/masks/time/time-mask.js

 import { maskitoPipe } from '@maskito/core';
+import { DEFAULT_TIME_SEGMENT_MAX_VALUES, TIME_FIXED_CHARACTERS } from '../../constants';
 import { createZeroPlaceholdersPreprocessor } from '../../processors';
-import { DEFAULT_TIME_SEGMENT_MAX_VALUES, TIME_FIXED_CHARACTERS } from './constants';
 import { createMaxValidationPreprocessor } from './processors';
@@ -5,0 +5,0 @@ export function maskitoTimeOptionsGenerator({ mode, timeSegmentMaxValues = {}, }) {

src/lib/processors/min-max-date-postprocessor.js

 import { DEFAULT_MAX_DATE, DEFAULT_MIN_DATE } from '../constants';
-import { clamp, dateToSegments, isDateStringCompleted, parseDateRangeString, parseDateString, segmentsToDate, toDateString, } from '../utils';
+import { clamp, dateToSegments, isDateStringComplete, parseDateRangeString, parseDateString, segmentsToDate, toDateString, } from '../utils';
 export function createMinMaxDatePostprocessor({ dateModeTemplate, min = DEFAULT_MIN_DATE, max = DEFAULT_MAX_DATE, datesSeparator = '', }) {
@@ -10,3 +10,3 @@ return ({ value, selection }) => {
             validatedValue += validatedValue ? datesSeparator : '';
-            if (!isDateStringCompleted(dateString, dateModeTemplate)) {
+            if (!isDateStringComplete(dateString, dateModeTemplate)) {
                 validatedValue += dateString;
@@ -13,0 +13,0 @@ continue;

src/lib/processors/valid-date-preprocessor.js

@@ -6,6 +6,6 @@ import { POSSIBLE_DATES_SEPARATOR } from '../constants';
         const { value, selection } = elementState;
-        if (data === dateSegmentsSeparator && value.length === selection[0]) {
+        if (data === dateSegmentsSeparator) {
             return {
                 elementState,
-                data,
+                data: selection[0] === value.length ? data : '',
             };
@@ -12,0 +12,0 @@ }

src/lib/types/index.d.ts

 export * from './date-mode';
 export * from './date-segments';
+export * from './time-mode';
+export * from './time-segments';
 //# sourceMappingURL=index.d.ts.map

src/lib/types/index.js

 export * from './date-mode';
 export * from './date-segments';
+export * from './time-mode';
+export * from './time-segments';
 //# sourceMappingURL=index.js.map

src/lib/utils/date/date-to-segments.d.ts

@@ -1,3 +0,3 @@
-import { MaskitoDateSegments } from '../../types';
-export declare function dateToSegments(date: Date): MaskitoDateSegments;
+import { MaskitoDateSegments, MaskitoTimeSegments } from '../../types';
+export declare function dateToSegments(date: Date): MaskitoDateSegments & MaskitoTimeSegments;
 //# sourceMappingURL=date-to-segments.d.ts.map

src/lib/utils/date/date-to-segments.js

@@ -6,4 +6,8 @@ export function dateToSegments(date) {
         year: String(date.getFullYear()).padStart(4, '0'),
+        hours: String(date.getHours()).padStart(2, '0'),
+        minutes: String(date.getMinutes()).padStart(2, '0'),
+        seconds: String(date.getSeconds()).padStart(2, '0'),
+        milliseconds: String(date.getMilliseconds()).padStart(3, '0'),
     };
 }
 //# sourceMappingURL=date-to-segments.js.map

src/lib/utils/date/segments-to-date.d.ts

@@ -1,3 +0,3 @@
-import { MaskitoDateSegments } from '../../types';
-export declare function segmentsToDate(parsedDate: Partial<MaskitoDateSegments>): Date;
+import { MaskitoDateSegments, MaskitoTimeSegments } from '../../types';
+export declare function segmentsToDate(parsedDate: Partial<MaskitoDateSegments>, parsedTime?: Partial<MaskitoTimeSegments>): Date;
 //# sourceMappingURL=segments-to-date.d.ts.map

src/lib/utils/date/segments-to-date.js

@@ -1,6 +0,9 @@
-export function segmentsToDate(parsedDate) {
-    var _a, _b, _c;
+export function segmentsToDate(parsedDate, parsedTime) {
+    var _a, _b, _c, _d, _e, _f, _g;
     const year = ((_a = parsedDate.year) === null || _a === void 0 ? void 0 : _a.length) === 2 ? `20${parsedDate.year}` : parsedDate.year;
-    return new Date(Number(year !== null && year !== void 0 ? year : '0'), Number((_b = parsedDate.month) !== null && _b !== void 0 ? _b : '1') - 1, Number((_c = parsedDate.day) !== null && _c !== void 0 ? _c : '1'));
+    const date = new Date(Number(year !== null && year !== void 0 ? year : '0'), Number((_b = parsedDate.month) !== null && _b !== void 0 ? _b : '1') - 1, Number((_c = parsedDate.day) !== null && _c !== void 0 ? _c : '1'), Number((_d = parsedTime === null || parsedTime === void 0 ? void 0 : parsedTime.hours) !== null && _d !== void 0 ? _d : '0'), Number((_e = parsedTime === null || parsedTime === void 0 ? void 0 : parsedTime.minutes) !== null && _e !== void 0 ? _e : '0'), Number((_f = parsedTime === null || parsedTime === void 0 ? void 0 : parsedTime.seconds) !== null && _f !== void 0 ? _f : '0'), Number((_g = parsedTime === null || parsedTime === void 0 ? void 0 : parsedTime.milliseconds) !== null && _g !== void 0 ? _g : '0'));
+    // needed for years less than 1900
+    date.setUTCFullYear(Number(year !== null && year !== void 0 ? year : '0'));
+    return date;
 }
 //# sourceMappingURL=segments-to-date.js.map

src/lib/utils/date/to-date-string.d.ts

@@ -1,3 +0,3 @@
-import { MaskitoDateSegments } from '../../types';
-export declare function toDateString({ day, month, year }: Partial<MaskitoDateSegments<string>>, mode: string): string;
+import { MaskitoDateSegments, MaskitoTimeSegments } from '../../types';
+export declare function toDateString({ day, month, year, hours, minutes, seconds, milliseconds, }: Partial<MaskitoDateSegments<string> & Partial<MaskitoTimeSegments>>, dateMode: string, timeMode?: string): string;
 //# sourceMappingURL=to-date-string.d.ts.map

src/lib/utils/date/to-date-string.js

@@ -1,8 +0,14 @@
-export function toDateString({ day, month, year }, mode) {
+import { DATE_TIME_SEPARATOR } from '../../masks/date-time/constants';
+export function toDateString({ day, month, year, hours, minutes, seconds, milliseconds, }, dateMode, timeMode) {
     var _a;
-    const safeYear = ((_a = mode.match(/y/g)) === null || _a === void 0 ? void 0 : _a.length) === 2 ? year === null || year === void 0 ? void 0 : year.slice(-2) : year;
-    return mode
+    const safeYear = ((_a = dateMode.match(/y/g)) === null || _a === void 0 ? void 0 : _a.length) === 2 ? year === null || year === void 0 ? void 0 : year.slice(-2) : year;
+    const fullMode = dateMode + (timeMode ? DATE_TIME_SEPARATOR + timeMode : '');
+    return fullMode
         .replace(/d+/g, day !== null && day !== void 0 ? day : '')
         .replace(/m+/g, month !== null && month !== void 0 ? month : '')
         .replace(/y+/g, safeYear !== null && safeYear !== void 0 ? safeYear : '')
+        .replace(/H+/g, hours !== null && hours !== void 0 ? hours : '')
+        .replace(/MSS/g, milliseconds !== null && milliseconds !== void 0 ? milliseconds : '')
+        .replace(/M+/g, minutes !== null && minutes !== void 0 ? minutes : '')
+        .replace(/S+/g, seconds !== null && seconds !== void 0 ? seconds : '')
         .replace(/^\D+/g, '')
@@ -9,0 +15,0 @@ .replace(/\D+$/g, '');

src/lib/utils/index.d.ts

@@ -5,3 +5,3 @@ export * from './clamp';
 export * from './date/date-to-segments';
-export * from './date/is-date-string-completed';
+export * from './date/is-date-string-complete';
 export * from './date/parse-date-range-string';
@@ -8,0 +8,0 @@ export * from './date/parse-date-string';

src/lib/utils/index.js

@@ -5,3 +5,3 @@ export * from './clamp';
 export * from './date/date-to-segments';
-export * from './date/is-date-string-completed';
+export * from './date/is-date-string-complete';
 export * from './date/parse-date-range-string';
@@ -8,0 +8,0 @@ export * from './date/parse-date-string';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

191228

increased by24.32%

Number of package files

278

increased by16.81%

Lines of code

1275

increased by22.48%

Number of lines in readme file

23

increased by43.75%

No dependency changes