taiga-family / maskito Goto Github PK

View Code? Open in Web Editor NEW

557.0 10.0 18.0 67.83 MB

Collection of libraries to create an input mask which ensures that user types value according to predefined format.

Home Page: https://maskito.dev

License: Apache License 2.0

JavaScript 0.21% Shell 0.02% TypeScript 91.53% HTML 7.90% Less 0.21% CSS 0.12%

angular input-mask inputmask mask typescript input-formatting text-mask hacktoberfest

maskito's Introduction

Maskito

Documentation • Submit an Issue • Contact Us

Maskito is a collection of libraries, built with TypeScript. It helps you to create an input mask which ensures that users type values according to predefined format.

Why Maskito

Maskito supports all user’s interactions with text fields: basic typing and deleting via keyboard, pasting, dropping text inside with a pointer, browser autofill, predictive text from mobile native keyboard.
Maskito is robust. The whole project is developed with strict TypeScript mode. Our code is covered by hundreds of Cypress tests.
Server Side Rendering and Shadow DOM support.
You can use it with HTMLInputElement or HTMLTextAreaElement or even with [contenteditable] element.
Maskito core is zero-dependency package. You can mask input in your vanilla JavaScript project. However, we have separate packages for Angular, React and Vue as well.
Maskito includes optional framework-agnostic package with configurable ready-to-use masks.

No text field with invalid value! Use Maskito. Mask it! Learn more about the library in our documentation.

Contributing

If you have suggestions for how Maskito could be improved, or want to report a bug, open an issue! We'd love all and any contributions.

For more, check out the Contributing Guide.

Maintained

Maskito is a part of Taiga UI libraries family which is backed and used by a large enterprise. This means you can rely on timely support and continuous development.

License

🆓 Feel free to use our library in your commercial and private applications

All Maskito packages are covered by Apache 2.0

maskito's People

Contributors

Stargazers

Watchers

Forkers

ippatev anteaterkit nextzed sean-perkins demensky viocassel dmorosinotto si9urd woodenpc namereva aktanoff othree mehdirhifar rikusen0335 krollikroddzer yanix177 das-dasein mithun522

maskito's Issues

🐞 - Incorrect caret position after `Paste`-event

🐞 Bug report

Reproduction

Open https://tinkoff.github.io/maskito/
Copy (ctrl + c) +7 (900) 222-33-55
Focus InputPhone-input
Press ctrl + a
Press Backspace
Press ctrl + v

Expected behavior

Caret position at the end of the inserted text.

📚 - Add Favicon support for Safari

What is the affected URL?

https://tinkoff.github.io/maskito

Description

https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs

Which browsers have you used?

Chrome
Firefox
Safari
Edge

Which operating systems have you used?

🐞 Bug report

Reproduction

Run nx serve-ssr.

The mask throws error:

ERROR TypeError: this.element.setSelectionRange is not a function

ERROR TypeError: this.element.setSelectionRange is not a function
    at Maskito.updateSelectionRange (/Users/n.barsukov/WebstormProjects/maskito/dist/demo/server/main.js:227322:26)
    at Maskito.conformValueToMask (/Users/n.barsukov/WebstormProjects/maskito/dist/demo/server/main.js:227265:14)
    at new Maskito (/Users/n.barsukov/WebstormProjects/maskito/dist/demo/server/main.js:227176:14)
    at SandboxComponent.ngAfterViewInit (/Users/n.barsukov/WebstormProjects/maskito/dist/demo/server/main.js:227914:33)
    at callHook (/Users/n.barsukov/WebstormProjects/maskito/dist/demo/server/main.js:50534:22)
    at callHooks (/Users/n.barsukov/WebstormProjects/maskito/dist/demo/server/main.js:50503:17)
    at executeInitAndCheckHooks (/Users/n.barsukov/WebstormProjects/maskito/dist/demo/server/main.js:50454:9)
    at refreshView (/Users/n.barsukov/WebstormProjects/maskito/dist/demo/server/main.js:57551:21)
    at refreshEmbeddedViews (/Users/n.barsukov/WebstormProjects/maskito/dist/demo/server/main.js:58605:17)
    at refreshView (/Users/n.barsukov/WebstormProjects/maskito/dist/demo/server/main.js:57504:9)

🐞 - Predictive text from native mobile keyboards

🐞 Bug report

Description

https://github.com/Tinkoff/maskito/blob/6b1e753524d7a66e07ed506daae914f45e4d31a2/projects/core/src/lib/mask.ts#L34-L36

Which package(s) are relevant/related to the feature request?

@maskito/kit

Description

We should create mask for InputDateRange.
In the most cases the new mask should behave in the same way as Date-mask.

Proposed API

import {Maskito} from '@maskito/core';
import {maskitoDateRangeOptionsGenerator} from '@maskito/kit';

const inputDateRange = new Maskito(
    element,
    maskitoDateRangeOptionsGenerator({
        mode: 'YMD',
        separator: '.',
        // ...
    })
)

Configurable options

`mode`

Possible values:

DMY - dd.mm.yyyy
MDY - mm.dd.yyyy
YMD - yyyy.mm.dd

Default value: DMY.

`separator`

Symbol for separating date-segments (days, months, years).
Default value: . (dot).

`min`

Accepts native Date.
Validates value ONLY when value is fully completed (after user input).
Default value: null.

`max`

Accepts native Date.
Validates value ONLY when value is fully completed (after user input).
Default value: null.

`minLength`

Accepts ??? .
Minimal length of range
Default value: null.

`maxLength`

Accepts ??? .
Maximal length of range
Default value: null.

🚀 - Add IME composition support

Which package(s) are relevant/related to the feature request?

@maskito/core

Description

insertFromComposition inputType
https://github.com/Tinkoff/maskito/blob/e5b40d1a05e1072ddc7735c82e276c0817526baf/projects/core/src/lib/types/typed-input-event.ts#L10
compositionstart / compositionend events

🐞 - `Number` should accept hyphen, en-dash and em-dash as minus sign

Which package(s) are the source of the bug?

@maskito/kit

Description

https://tinkoff.github.io/maskito/kit/number

Maskito version

0.1.1

Which browsers have you used?

Chrome
Firefox
Safari
Edge

Which operating systems have you used?

🐞 - `Number` ignores `decimalZeroPadding: true` if integer part is deleted

Which package(s) are the source of the bug?

@maskito/kit

Description

Open https://tinkoff.github.io/maskito/kit/number#decimal-zero-padding
Delete all characters before decimal separator (integer part)
Move caret to the end of element
Press backspace

Actual behaviour:
We can delete decimal characters ( but decimalZeroPadding: true!).

Expected bahaviour:
We cannot delete decimal characters.
After pressing Backspace, caret is just moved left by 1 index (replacing deleted character with zero).

Maskito version

0.0.0

Which browsers have you used?

Chrome
Firefox
Safari
Edge

Which operating systems have you used?

🚀 - Add `Ctrl` + `Z` / `Ctrl` + `Shift` + `Z` support

🚀 Feature request

Add Undo/Redo shortcuts support.

Which package(s) are relevant/related to the feature request?

@maskito/kit

Description

We should create mask for InputDateTime.

In the most cases the new mask should behave in the same way as Date + Time masks.

`@Input()`-s

dateMode
timeMode
dateSeparator
min
(btw, native Date can accepts hours, minutes ...)
max

🐞 - `DateRange` broken paste from clipboard

Which package(s) are the source of the bug?

@maskito/kit

Description

Open https://tinkoff.github.io/maskito/kit/date-range/API
Type 06.02.2023 – 07.02.2023
Select and cut all text
Press Ctrl + V

Actual behaviour:
Nothing happened

Expected behaviour:
Input's value is 06.02.2023 – 07.02.2023

Maskito version

0.0.0

Which browsers have you used?

Chrome
Firefox
Safari
Edge

Which operating systems have you used?

Which package(s) are relevant/related to the feature request?

Don't known / other

Description

Create new documentation page Card (section Recipes).

It can be cool to reproduce this example: https://taiga-ui.dev/components/input-card#group
(without icons).

This page should just show how it is easy to create mask to input bank card digits.

Acceptance criteria:

tui-doc-example with all code tabs
Cypress tests
Investigate is it possible to use Date-mask for "expire-date"-field

🐞 - `Number` "not-empty interger part"-rule can be violated via paste

Which package(s) are the source of the bug?

@maskito/kit

Description

Open https://tinkoff.github.io/maskito/kit/number/API?precision=2
Paste from clipboard a.

Expected behaviour: 0,

Actual behaviour: ,

Proposed solution: improve preprocessor createNotEmptyIntegerPartPreprocessor.

Maskito version

0.3.0

Which browsers have you used?

Chrome
Firefox
Safari
Edge

Which operating systems have you used?

🐞 - `DataRange` documentation example throws `RangeError: Invalid time value`

Which package(s) are the source of the bug?

@maskito/kit

Description

Open the first example https://tinkoff.github.io/maskito/kit/date-range#date-localization
Focus input and press Backspace many times

Maskito version

0.0.0

Which browsers have you used?

Chrome
Firefox
Safari
Edge

Which operating systems have you used?

🐞 - Show fixed character only if there are other not-fixed characters after it

🐞 Bug report

Description

Invalid:

Valid:

🚀 - Cypress tests should fail on SSR error

🚀 Feature request

Is your feature request related to a problem?

#32

Describe the solution you'd like

Github job with cypress tests should fails if it gets any server-error.

🐞 - `Number` breaks when caret is `0`-index + `Backspace`

Which package(s) are the source of the bug?

@maskito/kit

Description

Open https://tinkoff.github.io/maskito/kit/number/API
Type 111
Move caret at 0-index
Press Backspace * 4

Maskito version

0.0.0

Which browsers have you used?

Chrome
Firefox
Safari
Edge

Which operating systems have you used?

🐞 Bug report

Description

https://en.wikipedia.org/wiki/Delete_key

Expected behavior

Delete-key works correctly.

📚 - `Number` improve example `Dynamic decimal zero padding`

Which package(s) are relevant/related to the feature request?

Don't known / other

Description

Open https://tinkoff.github.io/maskito/kit/number#dynamic-decimal-zero-padding

Add these logic:

42.|00 => Backspace => turn off `decimalZeroPadding` => 42|00

🐞 - Unable to install `@maskito/kit` without `--force` flag

Which package(s) are the source of the bug?

@maskito/kit

Description

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @maskito/[email protected]
npm ERR! node_modules/@maskito/core
npm ERR!   @maskito/core@"0.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @maskito/core@"^0.0.1" from @maskito/[email protected]
npm ERR! node_modules/@maskito/kit
npm ERR!   @maskito/kit@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

I believe you need to update @maskito/core version in @maskito/kit peerDependencies

Maskito version

0.2.0

Which browsers have you used?

Chrome
Firefox
Safari
Edge

Which operating systems have you used?

🚀 - `Time` supports `SS.MSS` & `MM.SS.MSS` modes

#37 (comment)

🐞 - Project does not start with Angular 15

Which package(s) are the source of the bug?

@maskito/core

Description

Cannot start project with Angular 15.

./node_modules/@maskito/core/src/index.js:1:0 - Error: Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> export { MASKITO_DEFAULT_OPTIONS } from './lib/constants';
| export { Maskito } from './lib/mask';
| export { maskitoPipe } from './lib/utils';

Used @angular-devkit/build-angular version: 15.1.4

Maskito version

0.1.0

Which browsers have you used?

Chrome
Firefox
Safari
Edge

Which operating systems have you used?

🐞 - `DateRange` don't prevent input of invalid date for the 2nd date

Which package(s) are the source of the bug?

@maskito/kit

Description

https://github.com/Tinkoff/maskito/blob/09cd47cb98b75ecfb8ada3c32a474f0d8b226c67/projects/demo-integrations/cypress/tests/kit/date-range/date-range-basic.cy.ts#L90-L101

Actual behaviour:
it replaces invalid digit with zero

Expected behaviour:
It prevent change

Maskito version

0.0.0

Which browsers have you used?

Chrome
Firefox
Safari
Edge

Which operating systems have you used?

🐞 - `Number` broken mask if `decimalSeparator` is a dot

Which package(s) are the source of the bug?

@maskito/kit

Description

Open example: https://tinkoff.github.io/maskito/kit/number#decimal-zero-padding (decimalSeparator: '.')
Try insert ,

Maskito version

0.0.0

Which browsers have you used?

Chrome
Firefox
Safari
Edge

Which operating systems have you used?

Which package(s) are relevant/related to the feature request?

@maskito/kit

Description

We should create mask for InputNumber.
Overwrite-mode is equal to shift.

Proposed API

import {Maskito} from `@maskito/core`;
import {maskitoNumberOptionsGenerator} from `@maskito/kit`;

const inputNumber = new Maskito(
    element,
    maskitoNumberOptionsGenerator({
        min: -5000,
        max: 5000,
        precision: 0, 
        zeroPadding: false,
        decimalSeparator: ',', // comma
        thousandSeparator: ' ', // space 
    })
)

Configurable options

`min`

Default value: Number.MIN_SAFE_INTEGER.

`max`

Default value: Number.MAX_SAFE_INTEGER.

`precision`

A number of digits after decimalSeparator.
Default value: 0 (no digits after decimalSeparator are allowed).

`decimalSeparator`

This parameter makes sense only if precision > 0.

Symbol for separating fraction.
Default value: , (comma).

`zeroPadding`

This parameter makes sense only if precision > 0.

Possible values:

true - number of digits after decimalSeparator ALWAYS is equal to the precision.
it is not possible for user to delete digits after decimalSeparator!
If user press Backspace / Delete, mask should replace deleted digits with zeroes and place caret to the left/right.
false - number of digits after decimalSeparator can equal or less to to the precision.
User can leave decimals with tailing zeroes. For example (precision: 4), 3.4300.
User can delete tailing character. For example (precision: 4), 3.43.
The only restriction in this mode: user cannot insert more digits (after decimalSeparator) than precision.
Default value: false.

`thousandSeparator`

Symbol for separating thousands.
Default value: \u00A0 (Non-breaking space).

Additional requirements for new mask

To make decimalSeparator (dot, comma etc) autocorrect, if none of these symbols is used as thousands separator.
For examples, decimalSeparator: ',' and user presses dot, the should replace typed dot with comma.
Add example with custom zero-padding to documentation-page: "add zeroPadding only if user insert something for fraction (decimal separator of the first fraction digit); don't add zero padding for another cases".

It would be great to be able to replace chars seamlessly, like decimal point from , to . and vice versa, or maybe autocorrection for typing Russian chars into "international passport name" and things like that.

📚 - Add `Angular` documentation

Which package(s) are relevant/related to the feature request?

Don't known / other

Description

Add documentation about @maskito/angular

🚀 Add Firebase preview deployment

🚀 Feature request

Describe the solution you'd like

https://firebase.google.com/docs/hosting/github-integration

See Taiga UI repo:
https://github.com/Tinkoff/taiga-ui/blob/main/.github/workflows/deploy-preview.yml

🐞 - `Date` should accept segment-separator as valid input

Which package(s) are the source of the bug?

@maskito/kit

Description

Open Date or DateRange.
Type 30
Type . (default date-segments separator)

Actual behaviour:
Nothing happens

Expected behaviour:
30.| (dot is inserted, cursor after the dot)

Additional requirements:

Add cypress test

Maskito version

0.0.0

Which browsers have you used?

Chrome
Firefox
Safari
Edge

Which operating systems have you used?

🐞 - Pattern mask rejects inserting new character if it is equal to the previous fixed character

Which package(s) are the source of the bug?

@maskito/core

Description

Reproduction

Example 1

Open https://tinkoff.github.io/maskito/recipes/phone#us
Clear all value and type 11

Expected behaviour: the value is +1 (1.
Actual behaviour: the value is +1.

Example 2

Open https://tinkoff.github.io/maskito/recipes/phone#ru
Focus and press 7

Expected behaviour: the value is +7 (7.
Actual behaviour: the value is +7.

Maskito version

0.0.0

Which browsers have you used?

Chrome
Firefox
Safari
Edge

Which operating systems have you used?

🚀 - Autofill

Keep in mind browser autofills, it can be tricky, especially with fixed chars like in phone numbers.

🚀 - Validate `Drag`-event

🚀 Feature request

🚀 - Add `deleteWordBackward` & `deleteWordForward` support

Which package(s) are relevant/related to the feature request?

@maskito/core

Description

Delete a word directly before the caret position:

Ctrl + Backspace (windows)
Option + Backspace (mac os)

https://github.com/Tinkoff/maskito/blob/e5b40d1a05e1072ddc7735c82e276c0817526baf/projects/core/src/lib/mask.ts#L58

Delete a word directly after the caret position:

Ctrl + Backspace (windows)
Option + Fn + Backspace (mac os)
https://github.com/Tinkoff/maskito/blob/e5b40d1a05e1072ddc7735c82e276c0817526baf/projects/core/src/lib/mask.ts#L62

🐞 - `@maskito/angular` no formControl changes

🐞 Bug report

Description

Typing new value does not update Angular FormControl.

Reproduction

https://tinkoff.github.io/maskito/kit/time

🚀 - min segments value for Date-related masks

Which package(s) are relevant/related to the feature request?

@maskito/kit

Description

Add min value (01) for date-segments

Value has to be replaced to 01 if:

New segment value consists of only zeros
Caret not at start of segment

examples:

01|. -> backspace -> 0|1.
0|1. -> delete -> 01|.
2|0. -> backspace -> |00.
|20. -> delete -> 0|1

📚 - `Stackblitz` basic input css-customization

What is the affected URL?

https://tinkoff.github.io/maskito/stackblitz

Description

Add more styles (for example, to be similar to Taiga UI input: border + box-shadow + border-radius etc)
https://github.com/Tinkoff/maskito/blob/c9b859f1612060c62b344d784e8531c5dcf1401e/projects/demo/src/pages/stackblitz/files/styles.css#L1-L2

🐞 - Input is not formatting when setting `FormControl` value programmatically

Which package(s) are the source of the bug?

@maskito/angular

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-jlgxte

Description

Input is not formatted after setting value via FormControl methods setValue, patchValue, reset.

Maskito version

0.4.0

Which browsers have you used?

Chrome
Firefox
Safari
Edge

Which operating systems have you used?

🚀 - `Time`-mask (`@maskito/kit`)

Developing mask for InputTime-component.

Proposed API

import {Maskito} from '@maskito/core';
import {maskitoTimeOptionsGenerator} from '@maskito/kit';

const inputElement = document.querySelector('input#time');

const inputTime = new Maskito(
    inputElement,
    maskitoTimeOptionsGenerator({
        mode: 'HH:MM:SS',
        maxValues: {HH: 23, MM: 59, SS: 59, MS: 999}, // default value
        // ... (more options?)
    }),
);

Problems:

It is not obvious for user what maxValues-option means!
For example, maxValues: {HH: 11, MM: 30}. Okey, 11:31 is obviously invalid value. What's about 10:31 ?
We should think about better naming (now it can be confused with max allowable point in the time).

Acceptance criteria

Minutes and seconds cannot be greater than or 59. Millisecond – 999.
Hour cannot be greater than maxValues['HH'], minutes – maxValues['MM'], seconds – maxValues['SS'], millisecond - maxValues['MS'].
If the first typed digit for time-segment (hours | minutes | seconds | ms) is already exceeds limits, mask adds 0.
For example, you type 11:7. Seventy-hours are not allowable. Mask should guess that you mean 11:07.
User cannot type anything excepts digits (and fixed values, of course).

🤖 - Parallelize e2e tests across different jobs

Which package(s) are relevant/related to the feature request?

Don't known / other

Description

See example in Taiga UI Repo.

Proposed jobs

E2E/date (~ 1 min 23 sec)
E2E/date-range (~ 2 min 42 sec)
E2E/date-time (~ 26 sec)
E2E/number (~ 3 min 11 sec)
E2E/time (~ 1 min 37 sec)
E2E/recipes (~ 2 min 30 sec)
E2E/other (~ 19 sec)

🚀 - `Phone` recipe

Which package(s) are relevant/related to the feature request?

Don't known / other

Description

Create new documentation page Phone (section Recipes).
See: https://taiga-ui.dev/components/input-phone

This page should just show how it is easy to create mask for phone of any country.
For example, create two examples: "Russian" and "American"

Acceptance criteria:

tui-doc-example-s with all code tabs
Cypress tests
Use the following tests
https://github.com/Tinkoff/maskito/blob/08cfa5b7ac89b9c8449f9582eea17a1cebeca65e/projects/demo-integrations/cypress/tests/sandbox/input-phone.cy.ts#L3-L5
(+ move these tests inside recipe-folder: projects/demo-integrations/cypress/tests/recipes/phone.cy.ts)
Input initially is empty
Input add country prefix (+7) on focus
Input removes country prefix (+7) on blur (if there are NO other digits)
If input is focused, the country prefix is not removable
See https://github.com/Tinkoff/maskito/blob/08cfa5b7ac89b9c8449f9582eea17a1cebeca65e/projects/demo/src/app/modules/sandbox/masks/phone-mask.ts#L17-L21

🚀 - `Date`-mask

Which package(s) are relevant/related to the feature request?

@maskito/kit

Description

We should create mask for InputDate.

Proposed API

import {Maskito} from '@maskito/core';
import {maskitoDateOptionsGenerator} from '@maskito/kit';

const inputDate = new Maskito(
    element,
    maskitoDateOptionsGenerator({
        mode: 'YMD',
        separator: '.',
    })
)

Configurable options

`mode`

Possible values:

DMY - dd.mm.yyyy
MDY - mm.dd.yyyy
YMD - yyyy.mm.dd

Default value: DMY.

`separator`

Symbol for separating date-segments (days, months, years).
Default value: . (dot).

`min`

Accepts native Date.
Validates value ONLY when value is fully completed (after user input).
Default value: null.

`max`

Accepts native Date.
Validates value ONLY when value is fully completed (after user input).
Default value: null.

Additional requirements for new mask

overwriteMode is equal to replace
2|6.01.2023 => Type 2 => 22.|01.2023
when user deletes character in the middle of string
Acceptable soultion – always replace deleted character with zero.
26|.01.2023 => Backspace => 2|0.01.2023
31.05|.2023 => Backspace => 31.0|0.2023
The best solution (can be done in another issue) – replace deleted character with 0 | 1.
26|.01.2023 => Backspace => 2|0.01.2023
31.05|.2023 => Backspace => 31.0|1.2023
If user type 4 | 5 | 6 | 7 | 8 | 9 for the first digit of days/months => pad it with zero.
For example: Empty input => User types 9 => Input's value is 09|
Cannot type days more than 31.
Cannot type months more than 12.

📚 - Add `Changelog` page

Which package(s) are relevant/related to the feature request?

Don't known / other

Description

See example: https://taiga-ui.dev/changelog

🐞 - `Number` mask throws an error on empty string in `thousandSeparator`

Which package(s) are the source of the bug?

@maskito/kit

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-qaunei

Description

ERROR
Error: Invalid regular expression: /^\−?[\d\]*$/: Unterminated character class

Maskito version

0.4.0

Which browsers have you used?

Chrome
Firefox
Safari
Edge

Which operating systems have you used?

🐞 - `Number` broken `Delete`-button navigation if `decimalZeroPadding=true`

Which package(s) are the source of the bug?

@maskito/kit

Description

Open https://tinkoff.github.io/maskito/kit/number/API?precision=4&decimalZeroPadding=true
Inserts 0,0000
0,|0000 => Delete

Expected: 0,0|000
Actual: nothing happened

Maskito version

0.4.0

Which browsers have you used?

Chrome
Firefox
Safari
Edge

Which operating systems have you used?

📚 - `Element state` topic inside `Core Concepts` section

What is the affected URL?

https://tinkoff.github.io/maskito/core-concepts/element-state

Description

https://tinkoff.github.io/maskito/core-concepts/element-state

Which browsers have you used?

Chrome
Firefox
Safari
Edge

Which operating systems have you used?

🐞 - Add line-break support for `TextArea`

🐞 Bug report

Description

Can't add line break via Enter for TextArea.

Reproduction

Open https://tinkoff.github.io/maskito
Focus to HTMLTextAreaElement
The TextArea uses this mask (this reg exp accepts line-break \n):
https://github.com/Tinkoff/maskito/blob/084755181bac4e568caf02c815388ac32a34fa9b/projects/demo/src/app/modules/sandbox/masks.ts#L22
Press Enter

Actual behavior: nothing happens
Exprected behavior: it adds new line

🚀 – `@maskito/angular` improve DI-approach

🚀 Feature request

We should improve DI-approach:
https://github.com/Tinkoff/maskito/blob/1855c3587b70522b0d1c196d1fe036e8bc11ae71/projects/angular/src/lib/maskito.directive.ts#L17-L28

It has significant drawback:
https://github.com/Tinkoff/maskito/blob/1855c3587b70522b0d1c196d1fe036e8bc11ae71/projects/angular/src/lib/maskito.directive.ts#L29

Proposed solution

We should use controllers-concept.
We should replace MASKITO_OPTIONS-token with MaskitoOptionsDirective.

🚀 - Add `deleteSoftLineBackward` & `deleteSoftLineForward` support

Which package(s) are the source of the bug?

Don't known / other

Description

Delete all text in input using CMD + Backspace doesn't work on MacOS.
Checked on Chrome 110 and Safari 16.3

Tested in demo page

Maskito version

0.3.0

Which browsers have you used?

Chrome
Firefox
Safari
Edge

Which operating systems have you used?

🛠 - [EPIC] New Mask Development (PoC)

This repository is devoted to development of input’s mask .

What is input mask ?

Mask is a tool to constrain user input.
It is an expression (defined by developer) that helps to define what type of contact is allowed in a given field on a template.

Why do need it ?

Taiga UI’s team is going to develop this new library.
New mask is required for many our inputs:

See full lists with masked Taiga’s inputs:

Taiga UI is currently using text-mask-library.
This mask is no longer maintained. It is written in Javascript (no Typescript!).
It uses Angular 4 and published with legacy View Engine.
Also, we have many issues with this mask.

See this issue:

taiga-family/taiga-ui#120

What are the requirements for a new mask?

Proposed repository structure

We are going to publish 4 libraries under the same scope @maskito.

@maskito/core. It contains zero-deps Typescript-library. This library exports only class new Mask(…) and some typescript interfaces. All magic happens in this library.
@maskito/angular. It requires @maskito/core and @angular/* as peer-dependencies. It exports directive for input/textarea-masking.
@maskito/kit. It contains a lot of ready-made solutions of input-masking. For example, utils to create masks for numbers, phone, time, date and etc.
@maskito/react. This package is under consideration. If there will be demand on this package, we will consider developing it. It exports hook for functional-component development.

Proposed API

Public API:

export interface MaskitoOptions {
    // type MaskExpression = Array<RegExp | string> | RegExp;
    mask: MaskExpression | (() => MaskExpression);
    // more options
}

export declare class Maskito {
    constructor(element: HTMLInputElement | HTMLTextAreaElement, options: MaskitoOptions);
    destroy(): void;
}

Usage examples

1. InputPhone

import { Maskito } from '@maskito/core';

const inputRef: HTMLInputElement = document.querySelector('input.css-selector');

const inputPhone = new Maskito(
    this.inputRef,
    { mask: [ '+', '7', '(', /\d/, /\d/, /\d/, ')', /\d/, /\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/ ] }
);

2. InputNumber

import { Maskito } from '@maskito/core';

const inputRef: HTMLInputElement = document.querySelector('input.css-selector');

const inputNumber = new Maskito(
    this.inputRef,
    { mask: /^\d+(\.\d*)?$/ }
);

3. InputDate

import {Maskito, MaskitoOptions} from '@maskito/core';

const inputRef: HTMLInputElement = document.querySelector('input.css-selector');

const generateDateMaskExpression = (dateMode: 'DMY' | 'YMD' | 'MDY'): MaskitoOptions['mask'] => {
    switch (dateMode) {
        case 'MDY':
            return []; // Array<RegExp | string>
        case "YMD":
            return /.../; // RegExp
        default:
            return []; // Array<RegExp | string>
    }
}

const inputDate = new Maskito(
    this.inputRef,
    { mask: generateDateMaskExpression('DMY') }
);

📚 - Add `Stackblitz` integration for examples

Which package(s) are relevant/related to the feature request?

Don't known / other

taiga-family / maskito Goto Github PK

maskito's Introduction

Maskito

Why Maskito

Contributing

Maintained

License

maskito's People

Contributors

Stargazers

Watchers

Forkers

maskito's Issues

🐞 Bug report

Reproduction

Expected behavior

What is the affected URL?

Description

Which browsers have you used?

Which operating systems have you used?

🐞 Bug report

Reproduction

🐞 Bug report

Description

Which package(s) are relevant/related to the feature request?

Description

Proposed API

Configurable options

mode

separator

min

max

minLength

maxLength

Which package(s) are relevant/related to the feature request?

Description

Which package(s) are the source of the bug?

Description

Maskito version

Which browsers have you used?

Which operating systems have you used?

Which package(s) are the source of the bug?

Description

Maskito version

Which browsers have you used?

Which operating systems have you used?

🚀 Feature request

Which package(s) are relevant/related to the feature request?

Description

@Input()-s

Which package(s) are the source of the bug?

Description

Maskito version

Which browsers have you used?

Which operating systems have you used?

Which package(s) are relevant/related to the feature request?

Description

Which package(s) are the source of the bug?

Description

Maskito version

Which browsers have you used?

Which operating systems have you used?

Which package(s) are the source of the bug?

Description

Maskito version

Which browsers have you used?

Which operating systems have you used?

🐞 Bug report

Description

🚀 Feature request

Is your feature request related to a problem?

Describe the solution you'd like

Which package(s) are the source of the bug?

Description

Maskito version

Which browsers have you used?

Which operating systems have you used?

🐞 Bug report

Description

Expected behavior

`mode`

`separator`

`min`

`max`

`minLength`

`maxLength`

`@Input()`-s

`min`

`max`

`precision`

`decimalSeparator`

`zeroPadding`

`thousandSeparator`