@ostack.tech/ui 0.11.0 → 0.11.1
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/dist/locales/pt-PT.js +2 -2
- package/dist/locales/pt-PT.js.map +1 -1
- package/dist/ostack-ui.css +10 -7
- package/dist/ostack-ui.js +9 -9
- package/dist/ostack-ui.js.map +1 -1
- package/package.json +1 -1
- package/scss/components/DataTable/_DataTable-variables.scss +8 -5
- package/scss/components/DataTable/_DataTable.scss +2 -0
- package/scss/components/DateRangeInput/_DateRangeInput.scss +6 -1
- package/scss/components/FeedbackList/_FeedbackList.scss +1 -0
- package/scss/components/Stepper/_Stepper.scss +4 -4
- package/scss/components/Tabs/_Tabs-variables.scss +1 -0
- package/scss/components/Tabs/_Tabs.scss +1 -0
package/dist/locales/pt-PT.js
CHANGED
|
@@ -44,8 +44,8 @@ const locale = {
|
|
|
44
44
|
emptyMessage: "Nada a mostrar."
|
|
45
45
|
},
|
|
46
46
|
DataTableFilter: {
|
|
47
|
-
"aria-label": "
|
|
48
|
-
placeholder: "
|
|
47
|
+
"aria-label": "Pesquisar tabela",
|
|
48
|
+
placeholder: "Pesquisar…"
|
|
49
49
|
},
|
|
50
50
|
DataTablePagination: {
|
|
51
51
|
"aria-label": "Paginação da tabela",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pt-PT.js","sources":["../../src/locales/pt-PT.tsx"],"sourcesContent":["import { pt as dayPickerPt } from \"react-day-picker/locale\";\n\nimport type { LocalizationObject } from \"../providers/LocalizationProvider\";\nimport { IS_APPLE } from \"../utils/platformUtils.ts\";\n\n/** `pt-PT` locale. */\nexport const locale: LocalizationObject = {\n languageTag: \"pt-PT\",\n dayPickerLocale: dayPickerPt,\n AlertDialog: {\n okText: \"OK\",\n },\n Calendar: {\n monthSelectLabel: \"Mês\",\n yearSelectLabel: \"Ano\",\n previousMonthLabel: \"Mês anterior\",\n nextMonthLabel: \"Próximo mês\",\n },\n CloseButton: {\n label: \"Fechar\",\n },\n CollapsibleTrigger: {\n expandLabel: \"Mostrar\",\n collapseLabel: \"Ocultar\",\n },\n CommandMenu: {\n searchPlaceholder: \"Pesquisar…\",\n listLabel: \"Sugestões\",\n loadingLabel: \"A carregar…\",\n emptyMessage: \"Nenhum resultado encontrado.\",\n },\n CommandMenuDialog: {\n title: \"Paleta de comandos\",\n description: \"Pesquise por um comando…\",\n },\n ConfirmDialog: {\n cancelText: \"Cancelar\",\n },\n ControlCode: {\n visuallyHiddenPrefix: \"Campo\",\n },\n DataTable: {\n selectAllRowsLabel: \"Selecionar tudo\",\n selectRowLabel: \"Selecionar\",\n },\n DataTableContent: {\n emptyMessage: \"Nada a mostrar.\",\n },\n DataTableFilter: {\n \"aria-label\": \"
|
|
1
|
+
{"version":3,"file":"pt-PT.js","sources":["../../src/locales/pt-PT.tsx"],"sourcesContent":["import { pt as dayPickerPt } from \"react-day-picker/locale\";\n\nimport type { LocalizationObject } from \"../providers/LocalizationProvider\";\nimport { IS_APPLE } from \"../utils/platformUtils.ts\";\n\n/** `pt-PT` locale. */\nexport const locale: LocalizationObject = {\n languageTag: \"pt-PT\",\n dayPickerLocale: dayPickerPt,\n AlertDialog: {\n okText: \"OK\",\n },\n Calendar: {\n monthSelectLabel: \"Mês\",\n yearSelectLabel: \"Ano\",\n previousMonthLabel: \"Mês anterior\",\n nextMonthLabel: \"Próximo mês\",\n },\n CloseButton: {\n label: \"Fechar\",\n },\n CollapsibleTrigger: {\n expandLabel: \"Mostrar\",\n collapseLabel: \"Ocultar\",\n },\n CommandMenu: {\n searchPlaceholder: \"Pesquisar…\",\n listLabel: \"Sugestões\",\n loadingLabel: \"A carregar…\",\n emptyMessage: \"Nenhum resultado encontrado.\",\n },\n CommandMenuDialog: {\n title: \"Paleta de comandos\",\n description: \"Pesquise por um comando…\",\n },\n ConfirmDialog: {\n cancelText: \"Cancelar\",\n },\n ControlCode: {\n visuallyHiddenPrefix: \"Campo\",\n },\n DataTable: {\n selectAllRowsLabel: \"Selecionar tudo\",\n selectRowLabel: \"Selecionar\",\n },\n DataTableContent: {\n emptyMessage: \"Nada a mostrar.\",\n },\n DataTableFilter: {\n \"aria-label\": \"Pesquisar tabela\",\n placeholder: \"Pesquisar…\",\n },\n DataTablePagination: {\n \"aria-label\": \"Paginação da tabela\",\n rowsRangeSelectLabel: (total) => `Linhas visíveis de um total de ${total}`,\n rowsRange: (range, total) => (\n <>\n Linhas {range} de {total}\n </>\n ),\n previousPageButtonLabel: \"Página anterior\",\n nextPageButtonLabel: \"Próxima página\",\n },\n DataTableRowsPerPage: {\n label: \"Linhas por página:\",\n },\n DateInput: {\n placeholder: \"dia/mês/ano\",\n formatDescription:\n \"Introduza a data no formato, D D barra M M barra A A A A.\",\n selectedDateDescription: (date) => `Data selecionada, ${date}`,\n calendarButtonLabel: \"Abrir calendário\",\n },\n DateRangeInput: {\n startInputLabel: \"Data de início\",\n endInputLabel: \"Data de fim\",\n selectedDateRangeDescription: ({ start, end }) =>\n `Período selecionado, ${start || \"data de início ausente\"} a ${\n end || \"data de fim ausente\"\n }`,\n },\n ErrorBoundary: {\n fallbackMessage: (\n <>\n Algo correu mal.\n <br />\n Pressione o botão à direita para tentar novamente. Se o problema\n persistir, volte a tentar mais tarde.\n </>\n ),\n resetButtonLabel: \"Tentar novamente\",\n },\n Feedback: {\n visuallyHiddenPrefix: (type) =>\n type === \"error\" ? \"Erro,\" : type === \"warning\" ? \"Alerta,\" : null,\n },\n FeedbackPopover: {\n label: \"Mostrar observações\",\n },\n FieldGroupHeader: {\n visuallyHiddenCodePrefix: \"Secção\",\n },\n Input: {\n loadingDescription: \"A carregar…\",\n clearButtonLabel: \"Limpar\",\n },\n Keybinds: {\n keybindsSeparatorLabel: \"ou\",\n keyPressesSeparatorLabel: \"seguido de\",\n keySymbols: {\n Space: \"Espaço\",\n },\n keyLabels: {\n Meta: IS_APPLE ? undefined : \"Tecla Windows\",\n Space: \"Espaço\",\n ArrowUp: \"Seta para cima\",\n ArrowDown: \"Seta para baixo\",\n ArrowLeft: \"Seta para esquerda\",\n ArrowRight: \"Seta para direita\",\n Enter: IS_APPLE ? \"Retorno\" : undefined,\n Home: \"Início\",\n End: \"Fim\",\n PageUp: \"Página para cima\",\n PageDown: \"Página para baixo\",\n },\n },\n Label: {\n helperButtonLabel: \"Mostrar ajuda\",\n },\n NumericInput: {\n decimalSeparator: \",\",\n groupingStyle: \"thousand\",\n groupSeparator: \"\\u00A0\",\n },\n RadioGroup: {\n clearDescription: \"Pressione Backspace ou Delete para limpar.\",\n },\n Select: {\n placeholder: \"Selecionar…\",\n clearDescription: \"Pressione Backspace ou Delete para limpar.\",\n searchLabel: \"Pesquisar opções\",\n optionsLabel: \"Opções\",\n valueTagCloseButtonLabel: \"Remover\",\n },\n Step: {\n stepNumberLabel: (number) => `Passo ${number}`,\n completedLabel: \"Concluído\",\n },\n StepperFinishTrigger: {\n label: \"Concluir\",\n },\n StepperNextTrigger: {\n label: \"Seguinte\",\n },\n StepperPreviousTrigger: {\n label: \"Anterior\",\n },\n TableColumn: {\n helperButtonLabel: \"Mostrar ajuda\",\n },\n TableHead: {\n sortByColumnDescription: (columnName, sortDirection) =>\n sortDirection === null\n ? `Deixar de ordenar tabela pela coluna “${columnName}”`\n : `Ordenar tabela pela coluna “${columnName}” em ordem ${\n sortDirection === \"asc\" ? \"ascendente\" : \"descendente\"\n }`,\n },\n TabList: {\n scrollLeftButtonLabel: \"Deslocar para a esquerda\",\n scrollRightButtonLabel: \"Deslocar para a direita\",\n },\n ToastProvider: {\n label: \"Notificação\",\n },\n ToastViewport: {\n label: \"Notificações ({hotkey})\",\n },\n};\n"],"names":["dayPickerPt"],"mappings":"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"}
|
package/dist/ostack-ui.css
CHANGED
|
@@ -1702,8 +1702,6 @@ a > .o-ui-code {
|
|
|
1702
1702
|
}
|
|
1703
1703
|
.o-ui-data-table__rows-per-page-label {
|
|
1704
1704
|
margin-right: var(--o-ui-space);
|
|
1705
|
-
font-size: var(--o-ui-font-size-sm);
|
|
1706
|
-
line-height: var(--o-ui-line-height-sm);
|
|
1707
1705
|
font-weight: 400 !important;
|
|
1708
1706
|
}
|
|
1709
1707
|
.o-ui-data-table__rows-per-page-select-root, .o-ui-data-table__pagination-select-root {
|
|
@@ -1715,6 +1713,7 @@ a > .o-ui-code {
|
|
|
1715
1713
|
align-items: center;
|
|
1716
1714
|
font-size: var(--o-ui-font-size-sm);
|
|
1717
1715
|
line-height: var(--o-ui-line-height-sm);
|
|
1716
|
+
font-weight: 400;
|
|
1718
1717
|
}
|
|
1719
1718
|
.o-ui-data-table__pagination-arrows {
|
|
1720
1719
|
margin-left: calc(var(--o-ui-space) * 2);
|
|
@@ -1987,12 +1986,15 @@ a > .o-ui-code {
|
|
|
1987
1986
|
.o-ui-date-range-input__container[data-variant=cell] {
|
|
1988
1987
|
height: 100%;
|
|
1989
1988
|
}
|
|
1989
|
+
.o-ui-date-range-input__popover-anchor {
|
|
1990
|
+
box-shadow: none;
|
|
1991
|
+
}
|
|
1990
1992
|
.o-ui-date-range-input__popover-anchor > .o-ui-date-range-input__container {
|
|
1991
1993
|
margin: calc(var(--o-ui-control-border-width) * -1);
|
|
1992
|
-
background: none;
|
|
1993
1994
|
}
|
|
1994
1995
|
.o-ui-date-range-input__popover-anchor > .o-ui-date-range-input__container:not([data-focused]) {
|
|
1995
1996
|
border-color: transparent;
|
|
1997
|
+
background: none;
|
|
1996
1998
|
}
|
|
1997
1999
|
.o-ui-date-range-input__popover-anchor > .o-ui-date-range-input__container:not(:first-child) {
|
|
1998
2000
|
border-top-left-radius: 0;
|
|
@@ -2149,6 +2151,7 @@ a > .o-ui-code {
|
|
|
2149
2151
|
}
|
|
2150
2152
|
.o-ui-feedback-list > .o-ui-feedback {
|
|
2151
2153
|
margin-left: calc(var(--o-ui-space) * 3.5) !important;
|
|
2154
|
+
text-align: left !important;
|
|
2152
2155
|
}
|
|
2153
2156
|
.o-ui-feedback-list > .o-ui-feedback ~ .o-ui-feedback {
|
|
2154
2157
|
margin-top: calc(var(--o-ui-space) * 0.5);
|
|
@@ -3588,10 +3591,10 @@ a > .o-ui-code {
|
|
|
3588
3591
|
.o-ui-stepper__step[data-status]::before {
|
|
3589
3592
|
background-color: var(--o-ui-accent-a3);
|
|
3590
3593
|
}
|
|
3591
|
-
.o-ui-stepper__step:is([data-completed], [data-
|
|
3594
|
+
.o-ui-stepper__step:is([data-completed], [data-current])::before {
|
|
3592
3595
|
background-color: var(--o-ui-primary-a9);
|
|
3593
3596
|
}
|
|
3594
|
-
.o-ui-stepper__step:is([data-completed], [data-
|
|
3597
|
+
.o-ui-stepper__step:is([data-completed], [data-current])[data-status]::before {
|
|
3595
3598
|
background-color: var(--o-ui-accent-a9);
|
|
3596
3599
|
}
|
|
3597
3600
|
.o-ui-stepper__step-button {
|
|
@@ -3604,7 +3607,7 @@ a > .o-ui-code {
|
|
|
3604
3607
|
margin-bottom: calc(var(--o-ui-space) * 2);
|
|
3605
3608
|
text-align: center;
|
|
3606
3609
|
}
|
|
3607
|
-
.o-ui-stepper__step-label:not([data-completed], [data-
|
|
3610
|
+
.o-ui-stepper__step-label:not([data-completed], [data-current]) {
|
|
3608
3611
|
color: var(--o-ui-neutral-a9);
|
|
3609
3612
|
}
|
|
3610
3613
|
.o-ui-stepper__step-content-label {
|
|
@@ -3633,7 +3636,7 @@ a > .o-ui-code {
|
|
|
3633
3636
|
outline: 2px solid var(--o-ui-primary-8);
|
|
3634
3637
|
}
|
|
3635
3638
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
3636
|
-
.o-ui-stepper__step-content[data-
|
|
3639
|
+
.o-ui-stepper__step-content[data-current] {
|
|
3637
3640
|
animation: o-ui-fade-in var(--o-ui-animation-fade-duration) var(--o-ui-animation-fade-timing-function);
|
|
3638
3641
|
}
|
|
3639
3642
|
}
|
package/dist/ostack-ui.js
CHANGED
|
@@ -6098,7 +6098,7 @@ const ScrolledDataTablePagination = forwardRef(function ScrolledDataTablePaginat
|
|
|
6098
6098
|
return /* @__PURE__ */ jsxs(
|
|
6099
6099
|
"div",
|
|
6100
6100
|
{
|
|
6101
|
-
className: cx(prefix("data-table__pagination"), className),
|
|
6101
|
+
className: cx(prefix("data-table__pagination-label"), className),
|
|
6102
6102
|
...otherProps,
|
|
6103
6103
|
"data-prefer-right-alignment": boolDataAttr(preferRightAlignment),
|
|
6104
6104
|
ref: forwardedRef,
|
|
@@ -12693,7 +12693,7 @@ const Step = forwardRef(function Step2({
|
|
|
12693
12693
|
completedLabel ??= locale7.Step.completedLabel;
|
|
12694
12694
|
const prefix = usePrefix();
|
|
12695
12695
|
const { store } = useStepperContext();
|
|
12696
|
-
const
|
|
12696
|
+
const isActiveStep = useStore$1(store, (state) => state.activeStep() === index);
|
|
12697
12697
|
const isCompleted = useStore$1(
|
|
12698
12698
|
store,
|
|
12699
12699
|
(state) => completed ?? state.activeStep() > index
|
|
@@ -12722,7 +12722,7 @@ const Step = forwardRef(function Step2({
|
|
|
12722
12722
|
{
|
|
12723
12723
|
className: cx(prefix("stepper__step"), className),
|
|
12724
12724
|
"data-completed": boolDataAttr(isCompleted),
|
|
12725
|
-
"data-
|
|
12725
|
+
"data-current": boolDataAttr(isActiveStep),
|
|
12726
12726
|
"data-status": status,
|
|
12727
12727
|
"data-accent": controlStatusToAccent(
|
|
12728
12728
|
status,
|
|
@@ -12735,7 +12735,7 @@ const Step = forwardRef(function Step2({
|
|
|
12735
12735
|
Label,
|
|
12736
12736
|
{
|
|
12737
12737
|
"data-completed": boolDataAttr(isCompleted),
|
|
12738
|
-
"data-
|
|
12738
|
+
"data-current": boolDataAttr(isActiveStep),
|
|
12739
12739
|
...labelProps,
|
|
12740
12740
|
id: labelId,
|
|
12741
12741
|
className: cx(prefix("stepper__step-label"), labelProps?.className),
|
|
@@ -12756,19 +12756,19 @@ const Step = forwardRef(function Step2({
|
|
|
12756
12756
|
/* @__PURE__ */ jsx(
|
|
12757
12757
|
Button,
|
|
12758
12758
|
{
|
|
12759
|
-
variant: variant ?? (isCompleted ||
|
|
12759
|
+
variant: variant ?? (isCompleted || isActiveStep ? "solid" : "subtle"),
|
|
12760
12760
|
color: controlStatusToAccent(
|
|
12761
12761
|
status,
|
|
12762
|
-
isCompleted ||
|
|
12762
|
+
isCompleted || isActiveStep ? "primary" : "neutral"
|
|
12763
12763
|
),
|
|
12764
12764
|
"data-completed": boolDataAttr(isCompleted),
|
|
12765
|
-
"data-
|
|
12765
|
+
"data-current": boolDataAttr(isActiveStep),
|
|
12766
12766
|
"data-status": status,
|
|
12767
12767
|
loading,
|
|
12768
12768
|
showSpinner,
|
|
12769
12769
|
"aria-disabled": disabled,
|
|
12770
|
-
"aria-current":
|
|
12771
|
-
"aria-controls":
|
|
12770
|
+
"aria-current": isActiveStep ? "step" : void 0,
|
|
12771
|
+
"aria-controls": isActiveStep ? stepContentInfo?.id : void 0,
|
|
12772
12772
|
...buttonProps,
|
|
12773
12773
|
id: buttonId,
|
|
12774
12774
|
className: cx(prefix("stepper__step-button"), buttonProps?.className),
|