From edfa4318ea7abdf47dc8447fa26929e4a8922af2 Mon Sep 17 00:00:00 2001 From: demensky <dmytro@demensky.dev> Date: Fri, 14 Jun 2024 01:57:39 +0300 Subject: [PATCH] docs(kit): `maskitoParseTime`/`maskitoStringifyTime` examples --- .../maskito-parse-stringify-time-demo.md | 10 ++++++++++ .../pages/kit/time/time-mask-doc.component.ts | 7 ++++++- .../pages/kit/time/time-mask-doc.template.html | 17 +++++++++++++++++ 3 files changed, 33 insertions(+), 1 deletion(-) create mode 100644 projects/demo/src/pages/kit/time/examples/maskito-parse-stringify-time-demo.md diff --git a/projects/demo/src/pages/kit/time/examples/maskito-parse-stringify-time-demo.md b/projects/demo/src/pages/kit/time/examples/maskito-parse-stringify-time-demo.md new file mode 100644 index 000000000..e1548fe25 --- /dev/null +++ b/projects/demo/src/pages/kit/time/examples/maskito-parse-stringify-time-demo.md @@ -0,0 +1,10 @@ +```ts +import {maskitoTimeOptionsGenerator, maskitoParseTime, maskitoStringifyTime} from '@maskito/kit'; + +const options = maskitoTimeOptionsGenerator({mode: 'HH:MM:SS.MSS'}); + +maskitoParseTime('23:59:59.999', options); // 86399999 +maskitoParseTime('12:3', options); // 43380000 (parsed like '12:30:00.000') + +maskitoStringifyTime(86399999, options); // '23:59:59.999' +``` diff --git a/projects/demo/src/pages/kit/time/time-mask-doc.component.ts b/projects/demo/src/pages/kit/time/time-mask-doc.component.ts index 65a148b43..ad9a4f05f 100644 --- a/projects/demo/src/pages/kit/time/time-mask-doc.component.ts +++ b/projects/demo/src/pages/kit/time/time-mask-doc.component.ts @@ -7,7 +7,7 @@ import type {MaskitoTimeMode, MaskitoTimeSegments} from '@maskito/kit'; import {maskitoTimeOptionsGenerator} from '@maskito/kit'; import type {TuiDocExample} from '@taiga-ui/addon-doc'; import {TuiAddonDocModule} from '@taiga-ui/addon-doc'; -import {TuiTextfieldControllerModule} from '@taiga-ui/core'; +import {TuiNotificationModule, TuiTextfieldControllerModule} from '@taiga-ui/core'; import {TuiInputModule} from '@taiga-ui/kit'; import {TimeMaskDocExample1} from './examples/1-modes/component'; @@ -28,12 +28,17 @@ type GeneratorOptions = Required<Parameters<typeof maskitoTimeOptionsGenerator>[ TimeMaskDocExample1, TimeMaskDocExample2, TimeMaskDocExample3, + TuiNotificationModule, ], templateUrl: './time-mask-doc.template.html', styleUrls: ['./time-mask-doc.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class TimeMaskDocComponent implements GeneratorOptions { + protected readonly maskitoParseStringifyTimeDemo = import( + './examples/maskito-parse-stringify-time-demo.md?raw' + ); + protected readonly modeExample1: TuiDocExample = { [DocExamplePrimaryTab.MaskitoOptions]: import('./examples/1-modes/mask.ts?raw'), }; diff --git a/projects/demo/src/pages/kit/time/time-mask-doc.template.html b/projects/demo/src/pages/kit/time/time-mask-doc.template.html index d74b36e0e..68b3019ea 100644 --- a/projects/demo/src/pages/kit/time/time-mask-doc.template.html +++ b/projects/demo/src/pages/kit/time/time-mask-doc.template.html @@ -7,6 +7,23 @@ <code>maskitoTimeOptionsGenerator</code> to create a mask for time input. + <tui-notification class="tui-space_top-4"> + Despite the name of the mask, element's raw value is still string. + + <p> + Use + <code>maskitoParseTime</code> + to get milliseconds from masked string. + </p> + <p> + Use + <code>maskitoStringifyTime</code> + to get the masked string from milliseconds. + </p> + + <tui-doc-code [code]="maskitoParseStringifyTimeDemo" /> + </tui-notification> + <tui-doc-example id="mode" heading="Mode"