@studiolxd/brand 41.1.0 → 43.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +118 -0
- package/dist/_shared/datepicker.js +75 -78
- package/dist/_types/atoms/AsyncMultiSelect/AsyncMultiSelect.d.ts +28 -5
- package/dist/_types/atoms/AsyncSelect/AsyncSelect.d.ts +26 -6
- package/dist/_types/atoms/InputPhone/InputPhone.d.ts +15 -4
- package/dist/_types/atoms/MultiSelect/MultiSelect.d.ts +20 -1
- package/dist/_types/atoms/NumberInput/NumberInput.d.ts +14 -4
- package/dist/_types/atoms/OtpInput/OtpInput.d.ts +15 -4
- package/dist/_types/atoms/Select/Select.d.ts +18 -1
- package/dist/_types/atoms/TimeSelect/TimeSelect.d.ts +34 -6
- package/dist/_types/messages/BrandMessages.d.ts +31 -1
- package/dist/_types/messages/index.d.ts +1 -1
- package/dist/_types/molecules/Calendar/Calendar.d.ts +44 -13
- package/dist/_types/molecules/DatePicker/DatePicker.d.ts +56 -26
- package/dist/_types/molecules/DatePicker/dateMask.d.ts +9 -2
- package/dist/_types/molecules/DateTimeField/DateTimeField.d.ts +12 -12
- package/dist/_types/molecules/DocsSearch/DocsSearch.d.ts +31 -12
- package/dist/_types/molecules/FilterBar/FilterBar.d.ts +10 -1
- package/dist/_types/molecules/InputField/InputField.d.ts +16 -2
- package/dist/_types/molecules/MultiSelectField/MultiSelectField.d.ts +9 -1
- package/dist/_types/molecules/PasswordField/PasswordField.d.ts +22 -2
- package/dist/_types/molecules/SearchForm/SearchForm.d.ts +18 -6
- package/dist/_types/molecules/SelectField/SelectField.d.ts +5 -0
- package/dist/_types/molecules/TimeField/TimeField.d.ts +9 -2
- package/dist/_types/molecules/_shared/calendarGrid.d.ts +6 -2
- package/dist/async-multi-select.js +50 -49
- package/dist/async-select.js +89 -88
- package/dist/calendar.js +87 -86
- package/dist/docs-search.js +38 -37
- package/dist/filter-bar.css +1 -1
- package/dist/filter-bar.js +19 -17
- package/dist/input-field.js +66 -65
- package/dist/input-phone.js +39 -38
- package/dist/multi-select.js +109 -108
- package/dist/number-input.js +61 -60
- package/dist/otp-input.js +86 -85
- package/dist/password-field.js +46 -45
- package/dist/search-form.js +35 -34
- package/dist/select.js +75 -71
- package/dist/time-select.js +57 -56
- package/package.json +1 -1
|
@@ -1,4 +1,26 @@
|
|
|
1
1
|
import './TimeSelect.css';
|
|
2
|
+
/**
|
|
3
|
+
* El cromo de la hora: cómo se llaman los dos desplegables y qué pone dentro
|
|
4
|
+
* mientras no hay hora elegida.
|
|
5
|
+
*
|
|
6
|
+
* **Las dos máscaras también son idioma, no formato.** `HH` y `MM` parecen
|
|
7
|
+
* notación técnica, pero son la inicial de una palabra —hora y minuto— y
|
|
8
|
+
* cambian con ella: en alemán se escriben `SS`/`MM` (*Stunde*, *Minute*). Lo
|
|
9
|
+
* que NO se traduce es el dibujo: dos cifras, la hora antes que el minuto y
|
|
10
|
+
* los dos puntos en medio; eso no lo decide ni la prop ni el catálogo.
|
|
11
|
+
*
|
|
12
|
+
* Las **cifras de las opciones** (`00`…`23`) tampoco están aquí: son datos.
|
|
13
|
+
*/
|
|
14
|
+
export interface TimeSelectMessages {
|
|
15
|
+
/** Nombre accesible del desplegable de horas. */
|
|
16
|
+
hours: string;
|
|
17
|
+
/** Nombre accesible del desplegable de minutos. */
|
|
18
|
+
minutes: string;
|
|
19
|
+
/** Máscara del desplegable de horas sin valor: `HH`. */
|
|
20
|
+
maskHours: string;
|
|
21
|
+
/** Máscara del desplegable de minutos sin valor: `MM`. */
|
|
22
|
+
maskMinutes: string;
|
|
23
|
+
}
|
|
2
24
|
export interface TimeValue {
|
|
3
25
|
h: number;
|
|
4
26
|
m: number;
|
|
@@ -27,18 +49,24 @@ export interface TimeSelectProps {
|
|
|
27
49
|
/** Se añade DESPUÉS de las clases propias del componente. */
|
|
28
50
|
className?: string;
|
|
29
51
|
/**
|
|
30
|
-
* aria-label del selector de horas.
|
|
31
|
-
*
|
|
52
|
+
* aria-label del selector de horas. **Sin default**: sin él, el texto sale
|
|
53
|
+
* de `timeSelect.hours` del `BrandMessagesProvider`.
|
|
32
54
|
*/
|
|
33
55
|
hoursLabel?: string;
|
|
34
56
|
/**
|
|
35
|
-
* aria-label del selector de minutos.
|
|
36
|
-
*
|
|
57
|
+
* aria-label del selector de minutos. **Sin default**: sin él, sale de
|
|
58
|
+
* `timeSelect.minutes` del `BrandMessagesProvider`.
|
|
37
59
|
*/
|
|
38
60
|
minutesLabel?: string;
|
|
39
|
-
/**
|
|
61
|
+
/**
|
|
62
|
+
* Máscara del selector de horas. **Sin default**: sin ella, sale de
|
|
63
|
+
* `timeSelect.maskHours` del `BrandMessagesProvider`.
|
|
64
|
+
*/
|
|
40
65
|
hoursPlaceholder?: string;
|
|
41
|
-
/**
|
|
66
|
+
/**
|
|
67
|
+
* Máscara del selector de minutos. **Sin default**: sin ella, sale de
|
|
68
|
+
* `timeSelect.maskMinutes` del `BrandMessagesProvider`.
|
|
69
|
+
*/
|
|
42
70
|
minutesPlaceholder?: string;
|
|
43
71
|
}
|
|
44
72
|
/**
|
|
@@ -1,6 +1,21 @@
|
|
|
1
1
|
import type { PaginationMessages } from '../molecules/Pagination/Pagination';
|
|
2
2
|
import type { TableMessages } from '../molecules/Table/Table';
|
|
3
3
|
import type { DataTableMessages } from '../organisms/DataTable/DataTable';
|
|
4
|
+
import type { InputFieldMessages } from '../molecules/InputField/InputField';
|
|
5
|
+
import type { PasswordFieldMessages } from '../molecules/PasswordField/PasswordField';
|
|
6
|
+
import type { SelectMessages } from '../atoms/Select/Select';
|
|
7
|
+
import type { MultiSelectMessages } from '../atoms/MultiSelect/MultiSelect';
|
|
8
|
+
import type { NumberInputMessages } from '../atoms/NumberInput/NumberInput';
|
|
9
|
+
import type { OtpInputMessages } from '../atoms/OtpInput/OtpInput';
|
|
10
|
+
import type { InputPhoneMessages } from '../atoms/InputPhone/InputPhone';
|
|
11
|
+
import type { AsyncSelectMessages } from '../atoms/AsyncSelect/AsyncSelect';
|
|
12
|
+
import type { AsyncMultiSelectMessages } from '../atoms/AsyncMultiSelect/AsyncMultiSelect';
|
|
13
|
+
import type { DocsSearchMessages } from '../molecules/DocsSearch/DocsSearch';
|
|
14
|
+
import type { SearchFormMessages } from '../molecules/SearchForm/SearchForm';
|
|
15
|
+
import type { FilterBarMessages } from '../molecules/FilterBar/FilterBar';
|
|
16
|
+
import type { CalendarMessages } from '../molecules/Calendar/Calendar';
|
|
17
|
+
import type { DatePickerMessages } from '../molecules/DatePicker/DatePicker';
|
|
18
|
+
import type { TimeSelectMessages } from '../atoms/TimeSelect/TimeSelect';
|
|
4
19
|
/**
|
|
5
20
|
* El contrato de textos de la librería: un espacio por componente, y dentro
|
|
6
21
|
* de cada espacio **todas las claves obligatorias**.
|
|
@@ -26,5 +41,20 @@ export interface BrandMessages {
|
|
|
26
41
|
pagination: PaginationMessages;
|
|
27
42
|
table: TableMessages;
|
|
28
43
|
dataTable: DataTableMessages;
|
|
44
|
+
inputField: InputFieldMessages;
|
|
45
|
+
passwordField: PasswordFieldMessages;
|
|
46
|
+
select: SelectMessages;
|
|
47
|
+
multiSelect: MultiSelectMessages;
|
|
48
|
+
numberInput: NumberInputMessages;
|
|
49
|
+
otpInput: OtpInputMessages;
|
|
50
|
+
inputPhone: InputPhoneMessages;
|
|
51
|
+
asyncSelect: AsyncSelectMessages;
|
|
52
|
+
asyncMultiSelect: AsyncMultiSelectMessages;
|
|
53
|
+
docsSearch: DocsSearchMessages;
|
|
54
|
+
searchForm: SearchFormMessages;
|
|
55
|
+
filterBar: FilterBarMessages;
|
|
56
|
+
calendar: CalendarMessages;
|
|
57
|
+
datePicker: DatePickerMessages;
|
|
58
|
+
timeSelect: TimeSelectMessages;
|
|
29
59
|
}
|
|
30
|
-
export type { PaginationMessages, TableMessages, DataTableMessages };
|
|
60
|
+
export type { PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, TimeSelectMessages, };
|
|
@@ -2,4 +2,4 @@ export { BrandMessagesProvider } from './BrandMessagesProvider';
|
|
|
2
2
|
export type { BrandMessagesProviderProps } from './BrandMessagesProvider';
|
|
3
3
|
export { useBrandMessages } from './BrandMessagesContext';
|
|
4
4
|
export type { BrandMessagesReader } from './BrandMessagesContext';
|
|
5
|
-
export type { BrandMessages, PaginationMessages, TableMessages, DataTableMessages, } from './BrandMessages';
|
|
5
|
+
export type { BrandMessages, PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, TimeSelectMessages, } from './BrandMessages';
|
|
@@ -1,4 +1,32 @@
|
|
|
1
1
|
import './Calendar.css';
|
|
2
|
+
/**
|
|
3
|
+
* El cromo del calendario: las dos flechas —que cambian de nombre según la
|
|
4
|
+
* vista— y el rótulo de la rejilla de años. Dicen lo mismo en toda la suite,
|
|
5
|
+
* así que salen del catálogo y no de una prop por uso.
|
|
6
|
+
*
|
|
7
|
+
* **Lo que NO está aquí, y no es olvido:** los nombres de los meses, los de
|
|
8
|
+
* los días de la semana, las cifras del año y el nombre accesible de cada
|
|
9
|
+
* celda («lunes, 15 de enero de 2025»). Eso no es texto de interfaz sino
|
|
10
|
+
* **formato de fecha**: sale de `locale` con `Intl`, que además es quien sabe
|
|
11
|
+
* en qué día empieza la semana y con qué cifras se escribe el año. Traducirlo
|
|
12
|
+
* por catálogo sería reescribir a mano lo que el navegador ya trae bien.
|
|
13
|
+
*
|
|
14
|
+
* Tampoco está `gridLabel`: nombra a ESTE calendario («Fecha de alta»), que
|
|
15
|
+
* es contenido de la pantalla. Sin él la rejilla toma como nombre el título
|
|
16
|
+
* del mes visible, que ya viene del locale.
|
|
17
|
+
*/
|
|
18
|
+
export interface CalendarMessages {
|
|
19
|
+
/** Nombre accesible de la flecha de retroceso sobre la rejilla de días. */
|
|
20
|
+
previousMonth: string;
|
|
21
|
+
/** Nombre accesible de la flecha de avance sobre la rejilla de días. */
|
|
22
|
+
nextMonth: string;
|
|
23
|
+
/** Nombre accesible de la flecha de retroceso sobre la rejilla de años. */
|
|
24
|
+
previousYears: string;
|
|
25
|
+
/** Nombre accesible de la flecha de avance sobre la rejilla de años. */
|
|
26
|
+
nextYears: string;
|
|
27
|
+
/** Nombre accesible de la rejilla de años. */
|
|
28
|
+
yearGrid: string;
|
|
29
|
+
}
|
|
2
30
|
export interface CalendarProps {
|
|
3
31
|
/** Fecha seleccionada (modo controlado) */
|
|
4
32
|
value?: Date | null;
|
|
@@ -21,34 +49,37 @@ export interface CalendarProps {
|
|
|
21
49
|
/** Locale para nombres de mes y día. Default: 'es-ES' */
|
|
22
50
|
locale?: string;
|
|
23
51
|
/**
|
|
24
|
-
* aria-label del botón de mes anterior.
|
|
25
|
-
*
|
|
52
|
+
* aria-label del botón de mes anterior. **Sin default**: sin él, el texto
|
|
53
|
+
* sale de `calendar.previousMonth` del `BrandMessagesProvider`.
|
|
26
54
|
*/
|
|
27
55
|
previousMonthLabel?: string;
|
|
28
56
|
/**
|
|
29
|
-
* aria-label del botón de mes siguiente.
|
|
30
|
-
*
|
|
57
|
+
* aria-label del botón de mes siguiente. **Sin default**: sin él, el texto
|
|
58
|
+
* sale de `calendar.nextMonth` del `BrandMessagesProvider`.
|
|
31
59
|
*/
|
|
32
60
|
nextMonthLabel?: string;
|
|
33
61
|
/**
|
|
34
|
-
* aria-label del botón de retroceso **en la vista de años**.
|
|
35
|
-
*
|
|
62
|
+
* aria-label del botón de retroceso **en la vista de años**. **Sin
|
|
63
|
+
* default**: sin él, sale de `calendar.previousYears` del
|
|
64
|
+
* `BrandMessagesProvider`.
|
|
36
65
|
*/
|
|
37
66
|
previousYearsLabel?: string;
|
|
38
67
|
/**
|
|
39
|
-
* aria-label del botón de avance en la vista de años.
|
|
40
|
-
*
|
|
68
|
+
* aria-label del botón de avance en la vista de años. **Sin default**: sin
|
|
69
|
+
* él, sale de `calendar.nextYears` del `BrandMessagesProvider`.
|
|
41
70
|
*/
|
|
42
71
|
nextYearsLabel?: string;
|
|
43
72
|
/**
|
|
44
|
-
* aria-label de la rejilla de años.
|
|
73
|
+
* aria-label de la rejilla de años. **Sin default**: sin él, sale de
|
|
74
|
+
* `calendar.yearGrid` del `BrandMessagesProvider`.
|
|
45
75
|
*/
|
|
46
76
|
yearGridLabel?: string;
|
|
47
77
|
/**
|
|
48
|
-
* aria-label de la rejilla de días.
|
|
49
|
-
*
|
|
50
|
-
* nombre
|
|
51
|
-
*
|
|
78
|
+
* aria-label de la rejilla de días. **No sale del catálogo**: nombra a ESTE
|
|
79
|
+
* calendario («Fecha de alta»), que es contenido de la pantalla. Sin ella,
|
|
80
|
+
* la rejilla toma como nombre el título del mes visible. Cuando el
|
|
81
|
+
* calendario vive dentro de un panel con nombre propio (el `Popover` de
|
|
82
|
+
* `DatePicker`), conviene pasarlo aquí.
|
|
52
83
|
*/
|
|
53
84
|
gridLabel?: string;
|
|
54
85
|
/** Tamaño del componente. Default: 'md' */
|
|
@@ -1,6 +1,38 @@
|
|
|
1
1
|
import type { CalendarProps } from '../Calendar/Calendar';
|
|
2
2
|
import { type DateMaskLetters } from './dateMask';
|
|
3
3
|
import './DatePicker.css';
|
|
4
|
+
/**
|
|
5
|
+
* El cromo del selector de fecha: el botón que abre el calendario, el aviso de
|
|
6
|
+
* fecha incompleta, el nombre del panel y **las letras de la máscara**.
|
|
7
|
+
*
|
|
8
|
+
* Las letras están aquí a propósito, y son el caso interesante de esta
|
|
9
|
+
* familia. `dd/mm/aaaa` tiene dos mitades que no se deciden igual:
|
|
10
|
+
*
|
|
11
|
+
* - **El orden y el separador son formato**: que `es` escriba 25/09/2026,
|
|
12
|
+
* `en-US` 09/25/2026 y `de` 25.09.2026 sale del `locale` con `Intl`
|
|
13
|
+
* (`dateMask.ts`), no de una prop ni del catálogo. Una app en inglés
|
|
14
|
+
* mostrando fechas españolas las quiere en orden español.
|
|
15
|
+
* - **Las letras son idioma**: `aaaa` es «año», `yyyy` es *year* y `jjjj` es
|
|
16
|
+
* *Jahr*. Son la abreviatura de una palabra, así que se traducen — y por eso
|
|
17
|
+
* son cromo y salen del catálogo, como cualquier otro rótulo.
|
|
18
|
+
*
|
|
19
|
+
* Por eso el catálogo trae solo las tres letras y no la máscara montada: la
|
|
20
|
+
* máscara la arma el componente poniendo las letras en el orden del locale.
|
|
21
|
+
*/
|
|
22
|
+
export interface DatePickerMessages {
|
|
23
|
+
/** Nombre accesible del botón que abre el calendario. */
|
|
24
|
+
openCalendar: string;
|
|
25
|
+
/** Aviso de fecha incompleta o inexistente, anunciado con `role="alert"`. */
|
|
26
|
+
invalid: string;
|
|
27
|
+
/** Nombre accesible del panel del calendario (`role="dialog"`). */
|
|
28
|
+
calendar: string;
|
|
29
|
+
/**
|
|
30
|
+
* Las letras de la máscara, una por parte: `{ day: 'dd', month: 'mm',
|
|
31
|
+
* year: 'aaaa' }`. El orden y el separador NO están aquí: salen del
|
|
32
|
+
* `locale`.
|
|
33
|
+
*/
|
|
34
|
+
maskLetters: DateMaskLetters;
|
|
35
|
+
}
|
|
4
36
|
export interface DatePickerProps {
|
|
5
37
|
value?: Date | null;
|
|
6
38
|
/**
|
|
@@ -9,23 +41,28 @@ export interface DatePickerProps {
|
|
|
9
41
|
*/
|
|
10
42
|
onChange?: (date: Date | null) => void;
|
|
11
43
|
/**
|
|
12
|
-
* Pista dentro del campo.
|
|
13
|
-
*
|
|
14
|
-
*
|
|
44
|
+
* Pista dentro del campo. Sin ella, la máscara del locale con las letras
|
|
45
|
+
* del catálogo (`dd/mm/aaaa`, `mm/dd/aaaa` en `en-US`). Es la anulación
|
|
46
|
+
* puntual: un campo que quiere decir otra cosa («Desde») la pasa.
|
|
15
47
|
*/
|
|
16
48
|
placeholder?: string;
|
|
17
49
|
/**
|
|
18
|
-
* Letras de la máscara del marcador de posición.
|
|
19
|
-
*
|
|
20
|
-
* son props: salen del `locale` con
|
|
50
|
+
* Letras de la máscara del marcador de posición. **Sin default**: sin
|
|
51
|
+
* ellas, salen de `datePicker.maskLetters` del `BrandMessagesProvider`. El
|
|
52
|
+
* orden y el separador no son props ni catálogo: salen del `locale` con
|
|
53
|
+
* `Intl`.
|
|
21
54
|
*/
|
|
22
55
|
maskLetters?: DateMaskLetters;
|
|
23
56
|
/**
|
|
24
|
-
* Mensaje cuando lo escrito no es una fecha completa y válida.
|
|
25
|
-
*
|
|
57
|
+
* Mensaje cuando lo escrito no es una fecha completa y válida. **Sin
|
|
58
|
+
* default**: sin él, sale de `datePicker.invalid` del
|
|
59
|
+
* `BrandMessagesProvider`; se anuncia con `role="alert"`.
|
|
26
60
|
*/
|
|
27
61
|
invalidMessage?: string;
|
|
28
|
-
/**
|
|
62
|
+
/**
|
|
63
|
+
* Nombre accesible del botón que abre el calendario. **Sin default**: sin
|
|
64
|
+
* él, sale de `datePicker.openCalendar` del `BrandMessagesProvider`.
|
|
65
|
+
*/
|
|
29
66
|
openCalendarLabel?: string;
|
|
30
67
|
minDate?: CalendarProps['minDate'];
|
|
31
68
|
maxDate?: CalendarProps['maxDate'];
|
|
@@ -43,29 +80,22 @@ export interface DatePickerProps {
|
|
|
43
80
|
'aria-describedby'?: string;
|
|
44
81
|
/** Nombre accesible cuando el control va suelto. En un campo lo nombra la etiqueta. */
|
|
45
82
|
'aria-label'?: string;
|
|
46
|
-
/** Nombre accesible del panel del calendario (`role="dialog"`). */
|
|
47
|
-
calendarLabel?: string;
|
|
48
83
|
/**
|
|
49
|
-
*
|
|
50
|
-
*
|
|
84
|
+
* Nombre accesible del panel del calendario (`role="dialog"`). **Sin
|
|
85
|
+
* default**: sin él, sale de `datePicker.calendar` del
|
|
86
|
+
* `BrandMessagesProvider`. En un campo lo pone la etiqueta del campo, que es
|
|
87
|
+
* contenido de la pantalla y gana como cualquier prop.
|
|
51
88
|
*/
|
|
89
|
+
calendarLabel?: string;
|
|
90
|
+
/** aria-label del botón de mes anterior. Sin él, `calendar.previousMonth`. */
|
|
52
91
|
previousMonthLabel?: CalendarProps['previousMonthLabel'];
|
|
53
|
-
/**
|
|
54
|
-
* aria-label del botón de mes siguiente. Default: «Mes siguiente»
|
|
55
|
-
* (castellano).
|
|
56
|
-
*/
|
|
92
|
+
/** aria-label del botón de mes siguiente. Sin él, `calendar.nextMonth`. */
|
|
57
93
|
nextMonthLabel?: CalendarProps['nextMonthLabel'];
|
|
58
|
-
/**
|
|
59
|
-
* aria-label del botón de retroceso **en la vista de años**. Default: «Años
|
|
60
|
-
* anteriores» (castellano).
|
|
61
|
-
*/
|
|
94
|
+
/** aria-label del retroceso en la vista de años. Sin él, `calendar.previousYears`. */
|
|
62
95
|
previousYearsLabel?: CalendarProps['previousYearsLabel'];
|
|
63
|
-
/**
|
|
64
|
-
* aria-label del botón de avance en la vista de años. Default: «Años
|
|
65
|
-
* siguientes» (castellano).
|
|
66
|
-
*/
|
|
96
|
+
/** aria-label del avance en la vista de años. Sin él, `calendar.nextYears`. */
|
|
67
97
|
nextYearsLabel?: CalendarProps['nextYearsLabel'];
|
|
68
|
-
/** aria-label de la rejilla de años.
|
|
98
|
+
/** aria-label de la rejilla de años. Sin él, `calendar.yearGrid`. */
|
|
69
99
|
yearGridLabel?: CalendarProps['yearGridLabel'];
|
|
70
100
|
/**
|
|
71
101
|
* aria-label de la rejilla de días. Por defecto toma `calendarLabel`, que ya
|
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
export type DatePartName = 'day' | 'month' | 'year';
|
|
2
|
-
/**
|
|
2
|
+
/**
|
|
3
|
+
* Letras de la máscara del marcador de posición, una por parte.
|
|
4
|
+
*
|
|
5
|
+
* **No hay juego por defecto, y es deliberado**: las letras se traducen
|
|
6
|
+
* (`aaaa` es «año», `yyyy` es *year*, `jjjj` es *Jahr*), así que salen del
|
|
7
|
+
* catálogo de la aplicación —`datePicker.maskLetters`— igual que cualquier
|
|
8
|
+
* otro rótulo. Lo que este módulo decide es el **orden** y el **separador**,
|
|
9
|
+
* que son formato y salen del `locale`.
|
|
10
|
+
*/
|
|
3
11
|
export interface DateMaskLetters {
|
|
4
12
|
day: string;
|
|
5
13
|
month: string;
|
|
6
14
|
year: string;
|
|
7
15
|
}
|
|
8
|
-
export declare const SPANISH_MASK_LETTERS: DateMaskLetters;
|
|
9
16
|
export interface DateMask {
|
|
10
17
|
/** Orden de las partes en ese locale, p. ej. `['day', 'month', 'year']`. */
|
|
11
18
|
order: DatePartName[];
|
|
@@ -33,29 +33,29 @@ export interface DateTimeFieldProps {
|
|
|
33
33
|
locale?: string;
|
|
34
34
|
/** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
|
|
35
35
|
className?: string;
|
|
36
|
-
/** Nombre accesible del panel del calendario.
|
|
36
|
+
/** Nombre accesible del panel del calendario. Sin él, la etiqueta del campo. */
|
|
37
37
|
calendarLabel?: DatePickerProps['calendarLabel'];
|
|
38
|
-
/** Nombre accesible del botón que abre el calendario.
|
|
38
|
+
/** Nombre accesible del botón que abre el calendario. Sin él, `datePicker.openCalendar`. */
|
|
39
39
|
openCalendarLabel?: DatePickerProps['openCalendarLabel'];
|
|
40
|
-
/** Mensaje de fecha incompleta del campo de texto.
|
|
40
|
+
/** Mensaje de fecha incompleta del campo de texto. Sin él, `datePicker.invalid`. */
|
|
41
41
|
invalidMessage?: DatePickerProps['invalidMessage'];
|
|
42
|
-
/** Letras de la máscara del marcador de posición.
|
|
42
|
+
/** Letras de la máscara del marcador de posición. Sin ellas, `datePicker.maskLetters`. */
|
|
43
43
|
maskLetters?: DatePickerProps['maskLetters'];
|
|
44
|
-
/** aria-label del botón de mes anterior
|
|
44
|
+
/** aria-label del botón de mes anterior. Sin él, `calendar.previousMonth`. */
|
|
45
45
|
previousMonthLabel?: DatePickerProps['previousMonthLabel'];
|
|
46
|
-
/** aria-label del botón de mes siguiente.
|
|
46
|
+
/** aria-label del botón de mes siguiente. Sin él, `calendar.nextMonth`. */
|
|
47
47
|
nextMonthLabel?: DatePickerProps['nextMonthLabel'];
|
|
48
|
-
/** aria-label del
|
|
48
|
+
/** aria-label del retroceso en la vista de años. Sin él, `calendar.previousYears`. */
|
|
49
49
|
previousYearsLabel?: DatePickerProps['previousYearsLabel'];
|
|
50
|
-
/** aria-label del
|
|
50
|
+
/** aria-label del avance en la vista de años. Sin él, `calendar.nextYears`. */
|
|
51
51
|
nextYearsLabel?: DatePickerProps['nextYearsLabel'];
|
|
52
|
-
/** aria-label de la rejilla de años.
|
|
52
|
+
/** aria-label de la rejilla de años. Sin él, `calendar.yearGrid`. */
|
|
53
53
|
yearGridLabel?: DatePickerProps['yearGridLabel'];
|
|
54
|
-
/** aria-label de la rejilla de días.
|
|
54
|
+
/** aria-label de la rejilla de días. Sin él, el nombre del panel. */
|
|
55
55
|
gridLabel?: DatePickerProps['gridLabel'];
|
|
56
|
-
/** aria-label del desplegable de horas.
|
|
56
|
+
/** aria-label del desplegable de horas. Sin él, `timeSelect.hours`. */
|
|
57
57
|
hoursLabel?: string;
|
|
58
|
-
/** aria-label del desplegable de minutos.
|
|
58
|
+
/** aria-label del desplegable de minutos. Sin él, `timeSelect.minutes`. */
|
|
59
59
|
minutesLabel?: string;
|
|
60
60
|
onChange?: (date: Date | null) => void;
|
|
61
61
|
/** Se llama al salir de cualquiera de los dos controles: el campo de fecha (un `<input>`) o los desplegables de hora (dos `<button>`). */
|
|
@@ -17,6 +17,27 @@ export type DocsSearchRenderLinkProps = React.AnchorHTMLAttributes<HTMLAnchorEle
|
|
|
17
17
|
href: string;
|
|
18
18
|
className: string;
|
|
19
19
|
};
|
|
20
|
+
/**
|
|
21
|
+
* Los textos que el buscador emite por su cuenta. Los seis son cromo: en toda
|
|
22
|
+
* la suite el buscador de la documentación se llama igual y avisa igual. Los
|
|
23
|
+
* **resultados** no están aquí — son datos que llegan por `results`.
|
|
24
|
+
*
|
|
25
|
+
* El nombre del aspa tampoco: el aspa es la del `InputField` que hay debajo y
|
|
26
|
+
* sale de `inputField.clear`. Es la misma palabra y el mismo botón; darle una
|
|
27
|
+
* clave propia solo obligaría a traducir «Borrar» dos veces.
|
|
28
|
+
*/
|
|
29
|
+
export interface DocsSearchMessages {
|
|
30
|
+
/** Etiqueta del campo, que nombra también el punto de referencia. */
|
|
31
|
+
label: string;
|
|
32
|
+
/** Pista dentro del campo. */
|
|
33
|
+
placeholder: string;
|
|
34
|
+
/** Nombre accesible de la lista de resultados. */
|
|
35
|
+
results: string;
|
|
36
|
+
/** Aviso cuando la búsqueda no encuentra nada. */
|
|
37
|
+
empty: string;
|
|
38
|
+
/** Aviso mientras se busca. */
|
|
39
|
+
loading: string;
|
|
40
|
+
}
|
|
20
41
|
export interface DocsSearchProps {
|
|
21
42
|
/** `id` del campo. Ata la etiqueta con el campo y el campo con la lista. */
|
|
22
43
|
id?: string;
|
|
@@ -29,15 +50,14 @@ export interface DocsSearchProps {
|
|
|
29
50
|
/** Hay una búsqueda en curso: el aviso de estado lo dice. */
|
|
30
51
|
loading?: boolean;
|
|
31
52
|
/**
|
|
32
|
-
* Etiqueta del campo.
|
|
33
|
-
*
|
|
53
|
+
* Etiqueta del campo. **Sin default**: sale de `docsSearch.label` del
|
|
54
|
+
* `BrandMessagesProvider`.
|
|
34
55
|
*/
|
|
35
56
|
label?: string;
|
|
36
57
|
/** Oculta la etiqueta a la vista; el lector de pantalla la sigue leyendo. */
|
|
37
58
|
labelHidden?: boolean;
|
|
38
59
|
/**
|
|
39
|
-
* Pista dentro del campo.
|
|
40
|
-
* @default 'Buscar…'
|
|
60
|
+
* Pista dentro del campo. **Sin default**: sale de `docsSearch.placeholder`.
|
|
41
61
|
*/
|
|
42
62
|
placeholder?: string;
|
|
43
63
|
/**
|
|
@@ -47,23 +67,22 @@ export interface DocsSearchProps {
|
|
|
47
67
|
*/
|
|
48
68
|
clearable?: boolean;
|
|
49
69
|
/**
|
|
50
|
-
* Nombre accesible del botón de borrado.
|
|
51
|
-
*
|
|
70
|
+
* Nombre accesible del botón de borrado. Reenvío puro al `InputField`: sin
|
|
71
|
+
* él, el texto sale de `inputField.clear` del `BrandMessagesProvider`.
|
|
52
72
|
*/
|
|
53
73
|
clearLabel?: string;
|
|
54
74
|
/**
|
|
55
|
-
* Nombre accesible de la lista de resultados.
|
|
56
|
-
*
|
|
75
|
+
* Nombre accesible de la lista de resultados. **Sin default**: sale de
|
|
76
|
+
* `docsSearch.results`.
|
|
57
77
|
*/
|
|
58
78
|
resultsLabel?: string;
|
|
59
79
|
/**
|
|
60
|
-
* Aviso cuando la búsqueda no encuentra nada.
|
|
61
|
-
*
|
|
80
|
+
* Aviso cuando la búsqueda no encuentra nada. **Sin default**: sale de
|
|
81
|
+
* `docsSearch.empty`.
|
|
62
82
|
*/
|
|
63
83
|
emptyLabel?: string;
|
|
64
84
|
/**
|
|
65
|
-
* Aviso mientras se busca.
|
|
66
|
-
* @default 'Buscando…'
|
|
85
|
+
* Aviso mientras se busca. **Sin default**: sale de `docsSearch.loading`.
|
|
67
86
|
*/
|
|
68
87
|
loadingLabel?: string;
|
|
69
88
|
/** Talla del campo. */
|
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
|
|
2
2
|
import './FilterBar.css';
|
|
3
|
+
/**
|
|
4
|
+
* El único texto que la barra emite por su cuenta: su nombre accesible como
|
|
5
|
+
* punto de referencia de búsqueda. Los rótulos de los filtros no están aquí —
|
|
6
|
+
* los escribe cada campo, y dicen qué filtran.
|
|
7
|
+
*/
|
|
8
|
+
export interface FilterBarMessages {
|
|
9
|
+
/** Nombre accesible del punto de referencia `search` que es la barra. */
|
|
10
|
+
label: string;
|
|
11
|
+
}
|
|
3
12
|
export interface FilterBarProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
|
|
4
13
|
/**
|
|
5
14
|
* El buscador: el campo de búsqueda del sistema —un `InputField kind="search"`,
|
|
@@ -22,7 +31,7 @@ export interface FilterBarProps extends Omit<ComponentPropsWithoutRef<'div'>, 'c
|
|
|
22
31
|
actions?: ReactNode;
|
|
23
32
|
/**
|
|
24
33
|
* Nombre accesible del punto de referencia `search` que es la barra.
|
|
25
|
-
*
|
|
34
|
+
* **Sin default**: sale de `filterBar.label` del `BrandMessagesProvider`.
|
|
26
35
|
*/
|
|
27
36
|
ariaLabel?: string;
|
|
28
37
|
/** Se añade DESPUÉS de las clases propias. */
|
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
import { type ComponentPropsWithoutRef } from 'react';
|
|
2
2
|
import './InputField.css';
|
|
3
|
+
/**
|
|
4
|
+
* El único texto que el campo emite por su cuenta: el nombre accesible del
|
|
5
|
+
* aspa de borrado. Es cromo —dice la misma cosa en toda la suite—, así que
|
|
6
|
+
* sale del catálogo común y no de quien monta el campo.
|
|
7
|
+
*
|
|
8
|
+
* El `label`, el `placeholder`, el `helperText` y el `errorMessage` NO están
|
|
9
|
+
* aquí: son el contenido de ESTE campo, y ningún catálogo común puede saber
|
|
10
|
+
* qué dicen.
|
|
11
|
+
*/
|
|
12
|
+
export interface InputFieldMessages {
|
|
13
|
+
/** Nombre accesible del botón que vacía un campo de búsqueda. */
|
|
14
|
+
clear: string;
|
|
15
|
+
}
|
|
3
16
|
export interface InputFieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'value' | 'defaultValue'> {
|
|
4
17
|
id: string;
|
|
5
18
|
label: string;
|
|
@@ -33,8 +46,9 @@ export interface InputFieldProps extends Omit<ComponentPropsWithoutRef<'input'>,
|
|
|
33
46
|
*/
|
|
34
47
|
clearable?: boolean;
|
|
35
48
|
/**
|
|
36
|
-
* Nombre accesible del botón de borrado.
|
|
37
|
-
*
|
|
49
|
+
* Nombre accesible del botón de borrado. **Sin default**: sale de
|
|
50
|
+
* `inputField.clear` del `BrandMessagesProvider`, y esta prop es la
|
|
51
|
+
* anulación puntual de un uso concreto.
|
|
38
52
|
*/
|
|
39
53
|
clearLabel?: string;
|
|
40
54
|
/** Se llama tras vaciar el campo desde el aspa, ya con el foco devuelto. */
|
|
@@ -15,6 +15,11 @@ export interface MultiSelectFieldProps {
|
|
|
15
15
|
options: MultiSelectOption[];
|
|
16
16
|
value?: string[];
|
|
17
17
|
defaultValue?: string[];
|
|
18
|
+
/**
|
|
19
|
+
* Marcador de sitio del control sin valor elegido. Reenvío puro al `MultiSelect`:
|
|
20
|
+
* sin él, el texto sale de `multiSelect.placeholder` del `BrandMessagesProvider`.
|
|
21
|
+
* Se pasa solo cuando el marcador dice algo de ESTE campo.
|
|
22
|
+
*/
|
|
18
23
|
placeholder?: string;
|
|
19
24
|
/** Nombre del campo en el formulario: se monta un input oculto por valor elegido. */
|
|
20
25
|
name?: string;
|
|
@@ -29,7 +34,10 @@ export interface MultiSelectFieldProps {
|
|
|
29
34
|
size?: 'sm' | 'md' | 'lg';
|
|
30
35
|
/** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
|
|
31
36
|
className?: string;
|
|
32
|
-
/**
|
|
37
|
+
/**
|
|
38
|
+
* aria-label del botón que quita un valor. Reenvío puro al `MultiSelect`:
|
|
39
|
+
* sin él, el texto sale de `multiSelect.remove` del `BrandMessagesProvider`.
|
|
40
|
+
*/
|
|
33
41
|
removeLabel?: (label: string) => string;
|
|
34
42
|
onValueChange?: (value: string[]) => void;
|
|
35
43
|
onBlur?: React.FocusEventHandler<HTMLDivElement>;
|
|
@@ -1,4 +1,18 @@
|
|
|
1
1
|
import './PasswordField.css';
|
|
2
|
+
/**
|
|
3
|
+
* Los dos textos que el campo emite por su cuenta: las dos caras del
|
|
4
|
+
* interruptor de mostrar/ocultar. Son cromo —dicen lo mismo en toda la
|
|
5
|
+
* suite—, y por eso salen del catálogo común.
|
|
6
|
+
*
|
|
7
|
+
* El `label`, el `placeholder`, el `helperText` y el `errorMessage` no están
|
|
8
|
+
* aquí: son el contenido de ESTE campo.
|
|
9
|
+
*/
|
|
10
|
+
export interface PasswordFieldMessages {
|
|
11
|
+
/** Nombre accesible del interruptor con la contraseña oculta. */
|
|
12
|
+
show: string;
|
|
13
|
+
/** Nombre accesible del interruptor con la contraseña a la vista. */
|
|
14
|
+
hide: string;
|
|
15
|
+
}
|
|
2
16
|
export interface PasswordFieldProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'type'> {
|
|
3
17
|
/**
|
|
4
18
|
* Etiqueta del campo. **Opcional**: si se omite, el componente renderiza solo
|
|
@@ -18,9 +32,15 @@ export interface PasswordFieldProps extends Omit<React.ComponentPropsWithoutRef<
|
|
|
18
32
|
action?: React.ReactNode;
|
|
19
33
|
/** Tamaño del campo. */
|
|
20
34
|
size?: 'sm' | 'md' | 'lg';
|
|
21
|
-
/**
|
|
35
|
+
/**
|
|
36
|
+
* aria-label del toggle cuando la contraseña está oculta. **Sin default**:
|
|
37
|
+
* sale de `passwordField.show` del `BrandMessagesProvider`.
|
|
38
|
+
*/
|
|
22
39
|
showPasswordLabel?: string;
|
|
23
|
-
/**
|
|
40
|
+
/**
|
|
41
|
+
* aria-label del toggle cuando la contraseña es visible. **Sin default**:
|
|
42
|
+
* sale de `passwordField.hide` del `BrandMessagesProvider`.
|
|
43
|
+
*/
|
|
24
44
|
hidePasswordLabel?: string;
|
|
25
45
|
/**
|
|
26
46
|
* Se añade DESPUÉS de las clases propias, sobre el wrapper raíz `.password-field`.
|
|
@@ -1,4 +1,17 @@
|
|
|
1
1
|
import './SearchForm.css';
|
|
2
|
+
/**
|
|
3
|
+
* Los tres textos que el buscador emite por su cuenta. Son cromo: el buscador
|
|
4
|
+
* de sitio se llama igual en toda la suite, y ni el rótulo ni la pista dicen
|
|
5
|
+
* nada de lo que se busca en ESTA pantalla.
|
|
6
|
+
*/
|
|
7
|
+
export interface SearchFormMessages {
|
|
8
|
+
/** Etiqueta del campo; nombra también el punto de referencia `search`. */
|
|
9
|
+
label: string;
|
|
10
|
+
/** Pista dentro del campo. */
|
|
11
|
+
placeholder: string;
|
|
12
|
+
/** Nombre accesible del botón de envío. */
|
|
13
|
+
submit: string;
|
|
14
|
+
}
|
|
2
15
|
export interface SearchFormProps {
|
|
3
16
|
/** `id` del campo. Si no se pasa, el componente genera uno estable. */
|
|
4
17
|
id?: string;
|
|
@@ -28,8 +41,7 @@ export interface SearchFormProps {
|
|
|
28
41
|
method?: 'get' | 'post';
|
|
29
42
|
/**
|
|
30
43
|
* Etiqueta del campo. Nombra también el punto de referencia `search`.
|
|
31
|
-
*
|
|
32
|
-
* @default 'Buscar'
|
|
44
|
+
* **Sin default**: sale de `searchForm.label` del `BrandMessagesProvider`.
|
|
33
45
|
*/
|
|
34
46
|
label?: string;
|
|
35
47
|
/**
|
|
@@ -38,13 +50,13 @@ export interface SearchFormProps {
|
|
|
38
50
|
*/
|
|
39
51
|
labelHidden?: boolean;
|
|
40
52
|
/**
|
|
41
|
-
* Pista dentro del campo.
|
|
42
|
-
*
|
|
53
|
+
* Pista dentro del campo. **Sin default**: sale de
|
|
54
|
+
* `searchForm.placeholder`.
|
|
43
55
|
*/
|
|
44
56
|
placeholder?: string;
|
|
45
57
|
/**
|
|
46
|
-
* Nombre accesible del botón de envío.
|
|
47
|
-
*
|
|
58
|
+
* Nombre accesible del botón de envío. **Sin default**: sale de
|
|
59
|
+
* `searchForm.submit`.
|
|
48
60
|
*/
|
|
49
61
|
submitLabel?: string;
|
|
50
62
|
/**
|
|
@@ -19,6 +19,11 @@ export interface SelectFieldProps {
|
|
|
19
19
|
options: SelectOptionOrGroup[];
|
|
20
20
|
value?: string;
|
|
21
21
|
defaultValue?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Marcador de sitio del control sin valor elegido. Reenvío puro al `Select`:
|
|
24
|
+
* sin él, el texto sale de `select.placeholder` del `BrandMessagesProvider`.
|
|
25
|
+
* Se pasa solo cuando el marcador dice algo de ESTE campo.
|
|
26
|
+
*/
|
|
22
27
|
placeholder?: string;
|
|
23
28
|
/** Nombre del campo en el formulario: Base UI monta un input oculto con el valor. */
|
|
24
29
|
name?: string;
|