Skip to content

Commit

Permalink
Merge pull request #1143 from bildvitta/feature/resign-inputs
Browse files Browse the repository at this point in the history
Redesign v3
  • Loading branch information
DouglasCalora authored Aug 16, 2024
2 parents d2d0f29 + 29bb51b commit ad28b79
Show file tree
Hide file tree
Showing 101 changed files with 2,156 additions and 518 deletions.
92 changes: 90 additions & 2 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,96 @@ Neste arquivo (CHANGELOG.MD) você encontrará somente as mudanças referentes a
Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de serem pequenas, podem alterar o comportamento da funcionalidade caso não seja feita uma atualização, **preste muita atenção** nas breaking changes dentro das versões quando existirem.

## Não publicado
### Corrigido
- Corrigido tamanho dos botões do `QasActions` em casos de telas pequenas, no qual se deve ficar tamanho total da largura.
## BREAKING CHANGES
- `A fazer`:
- Substituir todos `QToggle` por `QasToggle`.
- Substituir todos `QRadio` por `QasRadio`.
- Substituir todos `QasCheckboxGroup` por `QasCheckbox`.
- Substituir todos `QasHeaderActions` por `QasHeader`.
- Revisar todos os `QasHeaderActions/QasHeader` se atentando as mudanças principalmente referente aos slots e propriedade `alignColumns`.
- Atentar-se para prop `headerActionsProps` no componente `QasPageHeader`.
- Remover TODOS `QChip` de slot do `QasSelect`.
- Caso esteja usando `QChip` (fora do QasSelect) substituir o uso pelo `QasBadge` com a prop `removable`.
- Atentar-se para possíveis breaking changes nos inputs: `QasToggle`, `QasCheckbox`, e `QasRadio`, validar nos formulários dos produtos.
- Verificar todos os lugares que estão usando contadores no `QasTabsGenerator` se não estão tratando ele antes de passar.
- Verificar todos os lugares que utilizam `QasGridGenerator` para possíveis breaking changes de estilos.

- `QasHeaderActions/QasHeader`:
- renomeado para `QasHeader`.
- alterado propriedade `text` para `description`.
- removido propriedade `alignColumns`.
- removido slots `right` e `left` em favor de utilizar novos slots.

- `QasGridGenerator`:
- modificado tipografia;
- utilizando novo componente `QasGridItem`.

- `QasInput`: adicionado contado no type`textarea`, então caso exista lugares com contadores de caracteres, é necessário remover para não duplicar.
- `QasCheckboxGroup/QasCheckbox`: renomeado para `QasCheckbox`.
- `QasPageHeader`: alterada propriedade `headerActionsProps` para `headerProps` para se adequar ao novo nome do componente `QasHeader`.
- `QasTabsGenerator`: agora o contador implementa a função `decimal` do asteroid, então caso esteja tratando esse valor por fora, remover.

### Adicionado
- `QasRadio`: adicionado novo componente.
- `QasToggle`: adicionado novo componente.
- `QasGridItem`: adicionado novo componente.
- `QasInfo`: adicionado novo componente.
- `QasNestedFields`: adicionado nova propriedade `useBox`.
- `QasBox`: adicionado novas propriedades `useSpacing`, `spacingX` e `spacingY`.
- `QasInput`: adicionado novas propriedades `icon` e `iconRight` para não precisar abrir slots nestes casos.
- `QasNumericInput`: adicionado novas propriedades `icon` e `iconRight` para não precisar abrir slots nestes casos.
- `QasGridGenerator`: adicionado 2 novos slots, `content-field-[nome-da-chave]` e `header-field-[nome-da-chave]`.

- `QasHeaderActions/QasHeader`:
- adicionado novas propriedades `labelProps` e `badges`.
- adicionado novos slots `actions`, `description` e `label`.

- `QasFormGenerator`:
- adicionado recurso no fieldset para dividir colunas entre eles.
- adicionado novas propriedades `useBox` e `boxProps`.

- `QasBadge`:
- adicionado propriedades para renderizar `QChip` (`removable`, `tabindex`, `modelValue`).
- adicionado eventos para renderizar `QChip` (`remove`, `update:modelValue`).

### Modificado
- `QasHeaderActions`: renomeado para `QasHeader`.
- `QasChartView`: adequado ao componente `QasHeader`.
- `QasSelect`: alterado layout.
- `QasNestedFields`: alterado layout.
- `QasInput`: alterado layout.
- `QasSearchInput`: alterado layout.
- `QasField`: alterações para layout e novos componentes.
- `QasHeaderActions/QasHeader`: alterado propriedade `text` para `description`.
- `QasTabsGenerator`: agora o contador implementa a função `decimal` do asteroid.
- `QasBadge`: modificado altura minima de 24px para para 20px e espaçamento vertical de 4px para 2px.
- `QasPageHeader`: alterado espaçamento do `bottom` de `lg` para `md`.
- `QasGalleryCard`: adicionado componente `QasBox` e sempre adicionado estilo de "borda" quando estiver box dentro de box.
- `QasCard`: adicionado componente `QasBox` e sempre adicionado estilo de "borda" quando estiver box dentro de box.

- `QasGridGenerator`:
- modificado tipografia;
- utilizando novo componente `QasGridItem`.

- adicionado placeholder padrão:
- `QasDatetimeInput`.
- `QasInput`.
- `QasNumericInput`.

- `QasFilters`:
- alterado layout.
- utilizando `QasBadge` ao invés de `QChip`.

- `QasCheckboxGroup/QasCheckbox`:
- renomeado para `QasCheckbox`.
- agora quando não é passado `options` o componente opera em modo "single".

### Removido
- `QasPageHeader`: alterada propriedade `headerActionsProps` para `headerProps` para se adequar ao novo nome do componente `QasHeader`.
- `QasHeaderActions/QasHeader`:
- alterado propriedade `text` para `description`.
- removido propriedade `alignColumns`.
- removido slots `right` e `left` em favor de utilizar novos slots.

## [3.16.1-beta.0] - 15-08-2024
### Corrigido
Expand Down
1 change: 1 addition & 0 deletions REDESIGN-NEXT-STEPS.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- [] Possibilidade de variação de tamanho de ícone nos botões;
20 changes: 18 additions & 2 deletions docs/src/assets/menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -184,8 +184,12 @@ module.exports = [
path: '/components/grid-generator'
},
{
name: 'HeaderActions',
path: '/components/header-actions'
name: 'GridItem',
path: '/components/grid-item'
},
{
name: 'Header',
path: '/components/header'
},
{
name: 'InfiniteScroll',
Expand All @@ -195,6 +199,10 @@ module.exports = [
name: 'Input',
path: '/components/input'
},
{
name: 'Info',
path: '/components/info'
},
{
name: 'Label',
path: '/components/label'
Expand Down Expand Up @@ -247,6 +255,10 @@ module.exports = [
name: 'Profile',
path: '/components/profile'
},
{
name: 'Radio',
path: '/components/radio'
},
{
name: 'Resizer',
path: '/components/resizer'
Expand Down Expand Up @@ -311,6 +323,10 @@ module.exports = [
name: 'TextTruncate',
path: '/components/text-truncate'
},
{
name: 'Toggle',
path: '/components/toggle'
},
{
name: 'ToggleVisibility',
path: '/components/toggle-visibility'
Expand Down
27 changes: 27 additions & 0 deletions docs/src/examples/QasBadge/Removable.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<template>
<div class="container q-gutter-md q-py-lg">
<qas-badge v-for="(key, value) in badges" :key="value" :color="value" :label="value" removable :text-color="key" />
</div>
</template>

<script>
export default {
computed: {
badges () {
return {
'light-blue-2': 'black',
'green-14': 'white',
'blue-8': 'white',
'grey-10': 'white',
'orange-8': 'white',
'red-14': 'white',
'yellow-14': 'white',
'grey-7': 'white',
'purple-7': 'white',
'amber-2': 'black',
'green-11': 'black'
}
}
}
}
</script>
2 changes: 1 addition & 1 deletion docs/src/examples/QasCard/Basic.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</div>

<div class="col-4">
<qas-card :expansion-props="expansionProps" :route="{ name: 'Root' }" title="Titulo" use-expansion>
<qas-card :expansion-props="expansionProps" :route="{ name: 'Root' }" title="Titulo">
<template #default>
<div>
Meu conteúdo
Expand Down
69 changes: 69 additions & 0 deletions docs/src/examples/QasCard/Box.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<template>
<div class="container spaced">
<qas-box>
<qas-label label="Título" />

<div class="q-col-gutter-md row">
<div class="col-4">
<qas-card :route="{ name: 'Root' }" title="Titulo">
<template #default>
<div>
Meu conteúdo
</div>
</template>
</qas-card>
</div>

<div class="col-4">
<qas-card :expansion-props="expansionProps" :route="{ name: 'Root' }" title="Titulo">
<template #default>
<div>
Meu conteúdo
</div>
</template>
</qas-card>
</div>

<div class="col-4">
<qas-card
:actions-menu-props="actionsMenuProps" :expansion-props="expansionProps" :route="{ name: 'Root' }"
status-color="red-14" title="Titulo" use-expansion
>
<template #default>
<div>
Meu conteúdo
</div>
</template>
</qas-card>
</div>
</div>
</qas-box>
</div>
</template>

<script>
export default {
computed: {
actionsMenuProps () {
return {
show: {
label: 'Ir para detalhes',
icon: 'sym_r_visibility'
},
edit: {
label: 'Editar',
icon: 'sym_r_edit'
}
}
},
expansionProps () {
return {
label: 'Ver mais',
content: 'Conteúdo do menu expansivo'
}
}
}
}
</script>
34 changes: 34 additions & 0 deletions docs/src/examples/QasCheckbox/Children.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<template>
<div class="container spaced">
<qas-checkbox v-model="model" label="Aceitar" :options="optionsChildren" />

<div class="q-mt-lg">
model: {{ model }}
</div>
</div>
</template>

<script setup>
import { ref } from 'vue'
defineOptions({ name: 'Children' })
const model = ref([])
const optionsChildren = [
{
label: 'Opção 1',
value: 1,
children: [
{
label: 'Opção 2',
value: 2
},
{
label: 'Opção 3',
value: 3
}
]
}
]
</script>
32 changes: 32 additions & 0 deletions docs/src/examples/QasCheckbox/Options.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<template>
<div class="container spaced">
<qas-checkbox v-model="model" :options />

<div class="q-mt-lg">
model: {{ model }}
</div>
</div>
</template>

<script setup>
import { ref } from 'vue'
defineOptions({ name: 'Options' })
const model = ref([])
const options = [
{
label: 'Opção 1',
value: 1
},
{
label: 'Opção 2',
value: 2
},
{
label: 'Opção 3',
value: 3
}
]
</script>
17 changes: 17 additions & 0 deletions docs/src/examples/QasCheckbox/Single.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<template>
<div class="container spaced">
<qas-checkbox v-model="model" :false-value="false" label="Aceitar" :true-value="true" />

<div class="q-mt-lg">
model: {{ model }}
</div>
</div>
</template>

<script setup>
import { ref } from 'vue'
defineOptions({ name: 'Single' })
const model = ref(false)
</script>
Loading

0 comments on commit ad28b79

Please sign in to comment.