Skip to content

Commit eb55ff5

Browse files
author
Gurgen
committed
perf(v1-components): UiDate & tests
1 parent 39781d1 commit eb55ff5

File tree

5 files changed

+93
-71
lines changed

5 files changed

+93
-71
lines changed

‎packages/v1-components/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@
9090
"vite-plugin-dts": "^4.3.0",
9191
"vite-svg-loader": "^5.1.0",
9292
"vue": "^3.5.12",
93+
"vue-i18n": "10",
9394
"vue3-perfect-scrollbar": "^1.6.0"
9495
}
9596
}

‎packages/v1-components/src/host.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ export { default as UiAvatar } from '@/host/components/avatar/UiAvatar.vue'
22
export { default as UiAvatarList } from '@/host/components/avatar/UiAvatarList.vue'
33
export { default as UiButton } from '@/host/components/button/UiButton.vue'
44
export { default as UiCheckbox } from '@/host/components/checkbox/UiCheckbox.vue'
5-
export { default as UiDate } from '@/host/components/checkbox/UiDate.vue'
5+
export { default as UiDate } from '@/host/components/date/UiDate.vue'
66
export { default as UiError } from '@/host/components/error/UiError.vue'
77
export { default as UiImage } from '@/host/components/image/UiImage.vue'
88
export { default as UiLink } from '@/host/components/link/UiLink.vue'

‎packages/v1-components/storybook/stories/UiDate.mdx‎

Lines changed: 20 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,36 @@
11
import ToReact from '../ToReact.ts'
2-
32
import UiDate from '@/host/components/date/UiDate.vue'
43

5-
<ToReact is={UiDate} date={'2024-03-12'} />
6-
7-
# Функции форматирования даты и времени
8-
9-
В этой документации описывается работа функций `formatDate()`, `formatDateTime()` и `formatTime()` с различными локализациями в нашем приложении.
10-
11-
## formatDate(value)
12-
13-
Функция `formatDate()` форматирует даты в соответствии с текущими настройками локализации. Принимает два параметра:
14-
15-
- `value`: Строка с датой или объект Date
16-
17-
### Примеры использования
18-
19-
```javascript
20-
// Предположим, что дата "2024-01-22"
21-
const date = new Date('2024-01-22')
22-
23-
// Для локали ru_RU
24-
formatDate(date) // "22.01.24"
25-
26-
// Для локали en_GB
27-
formatDate(date) // "22/01/24"
28-
29-
// Для локали es_ES
30-
formatDate(date) // "22/01/24"
31-
```
32-
33-
### Шаблоны форматирования по локалям
34-
35-
| Локаль | Стандартный формат |
36-
| ------ | ------------------ |
37-
| ru_RU | dd.mm.yy |
38-
| en_GB | dd/mm/yy |
39-
| es_ES | dd/mm/yy |
40-
41-
## formatDateTime(value)
42-
43-
Функция `formatDateTime()` объединяет форматирование даты и времени. Использует формат даты в соответствии с локалью и добавляет время в 24-часовом формате.
44-
45-
### Примеры использования
4+
# UiDate
465

47-
```javascript
48-
// Предположим, что дата и время "2024-01-22 15:30:00"
49-
const datetime = new Date('2024-01-22 15:30:00')
6+
Компонент `UiDate` является обёрткой над HTML-элементом `<time>`. Он отображает отформатированные значения даты или даты и времени и поддерживает локализацию. Вы также можете включить или отключить отображение времени.
507

51-
// Для локали ru_RU
52-
formatDateTime(datetime) // Вернёт "22.01.24 15:30"
8+
### Подробности о пропсах
539

54-
// Для локали en_GB
55-
formatDateTime(datetime) // Вернёт "22/01/24 15:30"
10+
| Пропс | Тип | Значение по умолчанию | Описание |
11+
|------------|---------------|-----------------------|------------------------------------------------------------|
12+
| `date` | `Date|string` | `new Date()` | Значение даты или даты и времени, которое нужно отобразить. |
13+
| `locale` | `string` | `'en-GB'` | Локаль, используемая для форматирования. Поддерживаются `'en-GB'`, `'es-ES'`, и `'ru-RU'`. |
14+
| `withTime` | `boolean` | `false` | Указывает, отображать ли время вместе с датой. |
5615

57-
// Для локали es_ES
58-
formatDateTime(datetime) // Вернёт "22/01/24 15:30"
59-
```
6016

61-
## formatTime(value)
17+
Этот пример отображает только дату, используя локаль по умолчанию (`en-GB`).
6218

63-
Функция `formatTime()` форматирует время в 24-часовом формате (HH:mm). Работает с разными типами входных данных.
19+
<ToReact is={UiDate} date={new Date()} />
6420

65-
### Параметры
21+
### С отображением времени
6622

67-
- `value`: может быть строкой, объектом Date, null или undefined
23+
Этот пример показывает, как отобразить дату вместе с временем.
6824

69-
### Примеры использования
25+
<ToReact is={UiDate} date={new Date()} withTime />
7026

71-
```javascript
72-
// С объектом Date
73-
const date = new Date('2024-01-22 15:30:00')
74-
formatTime(date) // Вернёт "15:30"
27+
---
7528

76-
// Со строкой
77-
formatTime('2024-01-22 15:30:00') // Вернёт "15:30"
29+
### Использование
7830

79-
// С невалидными значениями
80-
formatTime(null) // Вернёт ""
81-
formatTime(undefined) // Вернёт ""
82-
```
31+
Пример использования компонента `UiDate` в вашем проекте:
8332

33+
```vue
34+
<template>
35+
<UiDate :date="new Date()" locale="ru-RU" :withTime="true" />
36+
</template>

‎packages/v1-components/tests/common/formatters/date.test.ts‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ import {
88
formatTime,
99
} from '../../../src/common/formatters/date'
1010

11-
import { getCurrentInstance } from 'vue'
11+
import { ComponentInternalInstance, getCurrentInstance } from 'vue'
12+
import { createI18n, I18n } from 'vue-i18n'
13+
1214

1315
vi.mock('vue', () => ({
1416
getCurrentInstance: vi.fn(),
@@ -26,6 +28,31 @@ describe('common/formatters/date', () => {
2628
vi.mocked(getCurrentInstance).mockReturnValue(null)
2729
})
2830

31+
32+
test('formatDateTime with vue-i18n instance and locale detection', () => {
33+
const i18n: I18n = createI18n({
34+
locale: 'en-GB',
35+
fallbackLocale: 'ru-RU',
36+
messages: {},
37+
})
38+
39+
const mockInstance = {
40+
proxy: {
41+
$i18n: i18n.global,
42+
},
43+
}
44+
45+
vi.mocked(getCurrentInstance).mockReturnValue(mockInstance as ComponentInternalInstance)
46+
47+
const result = formatDateTime(new Date('2024-01-01T12:30:00'))
48+
expect(result).toMatch(/01\/01\/2024/) // en-GB format
49+
expect(result).toMatch(/12:30/)
50+
51+
// Verify vue-i18n is detected
52+
expect(mockInstance.proxy.$i18n.locale).toBe('en-GB')
53+
expect(mockInstance.proxy.$i18n.fallbackLocale).toBe('ru-RU')
54+
})
55+
2956
test('formatDateLat formats with en-GB style', () => {
3057
expect(formatDateLat(new Date('2024-01-01T12:30:00'))).toBe('01/01/2024')
3158
})

‎yarn.lock‎

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -936,6 +936,33 @@ __metadata:
936936
languageName: node
937937
linkType: hard
938938

939+
"@intlify/core-base@npm:10.0.5":
940+
version: 10.0.5
941+
resolution: "@intlify/core-base@npm:10.0.5"
942+
dependencies:
943+
"@intlify/message-compiler": "npm:10.0.5"
944+
"@intlify/shared": "npm:10.0.5"
945+
checksum: 10/d0680074ca5abc26c348976047001fda76045917fabcbe041fa662c2ca66dc6d22570ebf5e198f718e8b98c3d662e29d824f891183f51ff6b888c7c68db5e4fd
946+
languageName: node
947+
linkType: hard
948+
949+
"@intlify/message-compiler@npm:10.0.5":
950+
version: 10.0.5
951+
resolution: "@intlify/message-compiler@npm:10.0.5"
952+
dependencies:
953+
"@intlify/shared": "npm:10.0.5"
954+
source-map-js: "npm:^1.0.2"
955+
checksum: 10/3e386b042ac6dd98533b6ea2b4af610999236a1eb7ff4d77762cd06cae1858a53735b0b7e60828c569c715a9f0ae588aaaf8496f9a4b287a44e7f0fd470857ff
956+
languageName: node
957+
linkType: hard
958+
959+
"@intlify/shared@npm:10.0.5":
960+
version: 10.0.5
961+
resolution: "@intlify/shared@npm:10.0.5"
962+
checksum: 10/64552b8770ad236c11893837e95e4e2ea7c947396cfcee797bf8e26afea6d06f707178f4aa36b0b416d89800ba9cd058e6742bf2ebdd7c7ff7f9fc1ec9bc7b48
963+
languageName: node
964+
linkType: hard
965+
939966
"@isaacs/cliui@npm:^8.0.2":
940967
version: 8.0.2
941968
resolution: "@isaacs/cliui@npm:8.0.2"
@@ -1155,6 +1182,7 @@ __metadata:
11551182
vite-svg-loader: "npm:^5.1.0"
11561183
vitest: "npm:^3.0.2"
11571184
vue: "npm:^3.5.12"
1185+
vue-i18n: "npm:10"
11581186
vue3-perfect-scrollbar: "npm:^1.6.0"
11591187
peerDependencies:
11601188
vue: ^3.5
@@ -2701,7 +2729,7 @@ __metadata:
27012729
languageName: node
27022730
linkType: hard
27032731

2704-
"@vue/devtools-api@npm:^6.6.3":
2732+
"@vue/devtools-api@npm:^6.5.0, @vue/devtools-api@npm:^6.6.3":
27052733
version: 6.6.4
27062734
resolution: "@vue/devtools-api@npm:6.6.4"
27072735
checksum: 10/0fca4912b6ae0185b9375f5d113d417984077db0681c74cf39eb8522eb82c27f662a72e1ae3e0d79e105fdd0a99a7cbd65ed111465d238f60cce10922e02a812
@@ -8841,7 +8869,7 @@ __metadata:
88418869
languageName: node
88428870
linkType: hard
88438871

8844-
"source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.0, source-map-js@npm:^1.2.1":
8872+
"source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.0, source-map-js@npm:^1.2.1":
88458873
version: 1.2.1
88468874
resolution: "source-map-js@npm:1.2.1"
88478875
checksum: 10/ff9d8c8bf096d534a5b7707e0382ef827b4dd360a577d3f34d2b9f48e12c9d230b5747974ee7c607f0df65113732711bb701fe9ece3c7edbd43cb2294d707df3
@@ -10327,6 +10355,19 @@ __metadata:
1032710355
languageName: node
1032810356
linkType: hard
1032910357

10358+
"vue-i18n@npm:10":
10359+
version: 10.0.5
10360+
resolution: "vue-i18n@npm:10.0.5"
10361+
dependencies:
10362+
"@intlify/core-base": "npm:10.0.5"
10363+
"@intlify/shared": "npm:10.0.5"
10364+
"@vue/devtools-api": "npm:^6.5.0"
10365+
peerDependencies:
10366+
vue: ^3.0.0
10367+
checksum: 10/557c00fbce207a1eaa836894d4a5140be7c9df546168dac1e14dec7b04f2ecc351161ac11e9cc31eb34da408f863f7371477ab3947ae89f9480ad531c24db1f2
10368+
languageName: node
10369+
linkType: hard
10370+
1033010371
"vue-inbrowser-compiler-independent-utils@npm:^4.69.0":
1033110372
version: 4.71.1
1033210373
resolution: "vue-inbrowser-compiler-independent-utils@npm:4.71.1"

0 commit comments

Comments
 (0)