vitta-health / vi-ui Goto Github PK

ViToggle when disable has an green circle that can be confusing for users on bad displays:

Describe the bug
When Vi-Select is loading and the spinner is shown, the dropdown arrow overlaps the spinner.

To Reproduce
Steps to reproduce the behavior:

1. Enter in Vi-Select field
2. Type something
3. Make him load and show the spinner
4. See error

Expected behavior
The dropdown arrow should disappear

Screenshots

Desktop (please complete the following information):

• OS: [ Linux Ubuntu 18.10 ]
• Browser [ chrome, firefox ]
• Version [ 70.0.3538.102, 63.0 ]

Is your feature request related to a problem? Please describe.
Cover Tooltip component with unit tests

Describe the bug
It show this error when loading an empty array.

The error is:
Uncaught TypeError: Cannot read property 'clientWidth' of undefined at o.setWidthOptions

To Reproduce
Steps to reproduce the behavior:

1. Add a vi-select
2. Set a empty array in the prop options
3. See error

Expected behavior
It shouldn't show error.

Is your feature request related to a problem? Please describe.
Cover Loading component with unit tests

Is your feature request related to a problem? Please describe.
The site and docs don't work correctly on small screen sizes because they aren't thought to work on mobile devices despite the UI elements was made to work fine on them.

Describe the solution you'd like
The site and documentation mobile ready.

Describe alternatives you've considered
None.

Additional context
None.

I won't download and use your project if i can't see what it looks like...

Is your feature request related to a problem? Please describe.
Refactor the Input style to apply the new design:
https://www.figma.com/file/8PQca3p8kGfLrJBc2kbwVm/ViUI

Additional context
Maybe the design doesn't include all the variations, if that's the case we can discuss the solution

[Edit issue to add details later]

Is your feature request related to a problem? Please describe.
We don't have a contribution guide.

Describe the solution you'd like
We have a contribution guide internally at Vitta, but we need to make a public, in english guide so people can easily contribute to or the Vi-Ui lib.

Describe alternatives you've considered
Maybe the contribution option at settings menu can solve if we write it.

Additional context
None.

Is your feature request related to a problem? Please describe.
Refactor the typography to apply the new design:
https://www.figma.com/file/8PQca3p8kGfLrJBc2kbwVm/ViUI

What we'll need for the next task's:

• Change font-family
• Change color palette

Is your feature request related to a problem? Please describe.
I like v-calendar brings too much stuff we don't use. We probably could make it leaner.

Describe the solution you'd like
Remove it's dependency on v-calendar but keep the same functionality and IO of the actual ViCalendar.

Describe alternatives you've considered
What I would like is to not have an external dependency on this component.

Additional context
A more concise design, but similar to what is now.

Is your feature request related to a problem? Please describe.
The tootip.js dependency brings too much unwanted stuff to or code base.

Describe the solution you'd like
Remove it's tootip.js dependency while keeping a similar behavior: Change side if it's on edges of the screen, timed event close, etc.

Describe alternatives you've considered
What I would like is to not have an external dependency on this component.

Additional context
A better design and animation if possible would be really good.

Is your feature request related to a problem? Please describe.
Cover Tabs component with unit tests

Describe the bug
When model is updated the state value of the component is not updated so there's no visual feedback.

To Reproduce
Steps to reproduce the behavior:

1. Add a vi-toggle
2. Change model dynamically
3. See there's no change

Is your feature request related to a problem? Please describe.
Cover Badge component with unit tests

Is your feature request related to a problem? Please describe.
Cover Modal component with unit tests

The contents of the tooltip do not update.
I sent the value of a computed to the prop of the tooltip, and it did not update.

Describe the bug
Quando não informamos o total de registros a paginação corre infinitamente, até ai td certo. O problema eh que ela continua mesmo quando termina os registros. Seria interessante verificar se a quantidade de registros é inferior ao total por paginas, assim sabemos que os registros acabaram e nao precisa habilitar o next page ;)

Na descrição curta do projeto possui esse link https://viui.dev , porém ao acessar ele redireciona para uma página de erro, porém no README possui um link para a documentação https://vitta-health.github.io/Vi-Ui/ , acredito que esse seja o link correto. Ou seria outra página que era para ser exibida naquele link?

Is your feature request related to a problem? Please describe.
Cover ButtonGroup component with unit tests.

Describe the bug
When I run the project using the command "npm run styleguide", I get the following error:

To Reproduce
Steps to reproduce the behavior:

1. Run "npm run styleguide"

Expected behavior
The project should run and open the documentation

When using ViSelect by passing an object, it is necessary to inform the track-by attribute, otherwise it is not possible to unselect options individually.

Is your feature request related to a problem? Please describe.
It would be nice if there was also a component where the user could turn on / off, the checkbox is useful, but his intention is more to select items than to switch on / off.

Describe the solution you'd like
The idea is simply a checkbox but with a different style so that it fails to understand that this item is actually enabled or not.

Describe the bug
When the component Vi-Wrapper don't have another component, tag or content inside it, it breaks.

To Reproduce
Steps to reproduce the behavior:

1. Put the empty component somewhere
2. Open it on a browser

Expected behavior
I should do anything if empty.

Desktop:

• OS: MacOS
• Browser: Chrome
• Version: 71

Describe the bug
Then using 2 components inside ViWrapper, they get a strange width

To Reproduce
Put a ViSelect and a ViButton inside ViWrapper

Expected behavior
I don't know exactly what should happen, but the components should not break like this. Perhaps the button height should not be altered. And both'em get the same width (50% / 50%)

Screenshots

Is your feature request related to a problem? Please describe.
No, just a feature.

Describe the solution you'd like
A slide the tabs to the left and to the right when switching between tabs relative to the actual tab

Describe alternatives you've considered
None.

Additional context
None.

Is your feature request related to a problem? Please describe.
The actual icon set, isn't good enough. Also, we don't have the setup to generate new icons. We are stuck on what we have right now.

Describe the solution you'd like
A new icon set, made in svg. Generated as font on a cli comand.

Describe alternatives you've considered
A open source line icon font. As long it has all the same icons on the actual font, except the for Vitta logo obviously.

Is your feature request related to a problem? Please describe.
Cover Pagination component with unit tests

Describe the bug
When we open ViSelect to select an option, the height of the component grows a little and push down the sibling components

Expected behavior
The height should stay fixed and the siblings components shouldn't move

Screenshots
If applicable, add screenshots to help explain your problem.

Describe the bug
When you pass a decimal number to the "step" prop it is interpreted as 1.

To Reproduce
Steps to reproduce the behavior:

1. Place this code <vi-input label="Price" v-model="product.Price" type="number" step="0.01"></vi-input>
2. Try to insert a decimal number in the input and check if form is valid
3. Form isn't valid

Expected behavior
"Step" prop should accept decimals.

Describe the bug
Using Datepicker, when I pass "disabled: true" the behavior of the component doesn't change, it still allows me to pick a date

To Reproduce
Steps to reproduce the behavior:

1. Pass "disabled"
2. Click on the input
3. Verify that you can still pick a date

Expected behavior
The component should be disabled, just like ViInput is when it's disabled

Screenshots
Actual:

Suggested:

Describe the solution you'd like
A colorpicker with a hex field. and lightness slider.

Describe alternatives you've considered
A native solution would be nice as well, but you alread can do that and it don't work for IE11 users. Also, we can inprove on the design.

Additional context
Can I use about color input
The design reference to create something similar:

Is your feature request related to a problem? Please describe.
Refactor the Button style to apply the new design:
https://www.figma.com/file/8PQca3p8kGfLrJBc2kbwVm/ViUI

p.s: Would be nice if you refactor the ButtonGroup too.
Additional context
Maybe the design doesn't include all the variations, if that's the case we can discuss the solution

Is your feature request related to a problem? Please describe.
The actual documentation is in portuguese. And I didn't prepare the vue-styleguidist (tool we use to document the components) to be in english.

Describe the solution you'd like
We want to be more accessible to everyone, making the documentation also in english would be one of the ways to that.

Describe alternatives you've considered
Only preparing the documentation to be localized is good enough for me.

Additional context
Nothing right now. I will update here if needed.

@beeblebrox3 calling you out so you know it's still on my mind. 😂

Is your feature request related to a problem? Please describe.
This Issue consists in cover the ViAlert component with tests

Describe the solution you'd like
Create tests for testing the above features

• colors
• formats
• state
• event behaviours

Additional context

• colors
• formats
• state
• event behaviours

Description

Foi criado um um arquivo de exportação de todos os componentes do framework,
esse arquivo está localizado em src/componentes/index.js, o motivo pelo qual esse
arquivo foi criado é para ter uma centralização de todos os componentes que estão
sendo utilizado nos framework. Esse arquivo também ajudará no processo de instalação
dos componentes.

Foi modificado o arquivo que registra os componentes do Framework. Assim conseguindo
maior agilidade no registro de componentes já que basta exporta-lo no arquivo citado
acima. Com esse processo também facilitou a configuração do Frawework durante a
instalação.

Todos

Fill out or remove list items as needed

• Criar arquivo de exportação de todos os componentes
• Criar registro automático dos componentes
• Facilitando a configuração do Framework

src/components/index.js

// Exportando todos os componentes que estarão disponíveis no framework
export * from './Alert'
export * from './Badge'
export * from './Button'
export * from './ButtonGroup'
export * from './Card'
export * from './Icon'
export * from './Input'
export * from './InputDatepicker'
export * from './InputFile'
export * from './InputRadioCheckbox'
export * from './InputSelect'
export * from './Loading'
export * from './Modal'
export * from './Pagination'
export * from './Table'
export * from './Tabs'
export * from './ToggleSwitch'
export * from './Tooltip'
export * from './Wrapper'

src/index.js

import * as components from './components'

const ViUi = {
  /**
   * Método responsável por registrar o framework no Vue
   * @param Vue -> instância do Vue em qual o framework será instalado
   * @param Options -> Configurações que poderão ser utilizadas na instalação do framework.
   *  Ex.: A La-carte components e configurações de tema via JS.
   */
  install(Vue, Options) {

    // Instalando os componentes do Framework na instância Vue
    Object.keys(components).forEach(component => {
      let componentName = components[component].name
      // Registrando o componente. Aqui seria interessante fazer a utilização do "A La-Carte componente", o componente
      // só sera registrado caso esteja na lista de componentes informado em Options.
      Vue.component(componentName, components[component])
    })

    // Abaixo fica livre para instalar Vue.directive, Vue.filter e etc.

  },
};

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(ViUi);
}

export default ViUi;

Is your feature request related to a problem? Please describe.
Cover Table component with unit test

Is your feature request related to a problem? Please describe.
Refactor the Alert style to apply the new design:
https://www.figma.com/file/8PQca3p8kGfLrJBc2kbwVm/ViUI

Additional context
Maybe the design doesn't include all the variations, if that's the case we can discuss the solution

Describe the bug
ViButton is misaligned on chrome 83. Firefox and older versions are ok. This can be seen in the ViUi docs.

To Reproduce
Open ViButton docs on chrome 83.

Expected behavior
It should be aligned.

Screenshots

Describe the bug
When we don't set the total number of records, the pagination runs infinitely. We should check if all the records exist and then disable the pagination to where it doesn't exist.

To Reproduce
Steps to reproduce the behavior:

1. Don't set "totalPages"
2. the number of pages goes to infinity, even when there are no more records.

Expected behavior
You should display the navigation buttons with the total number of views per page, but limiting to display only the the records that exist.

Desktop (please complete the following information):

• Google Chrome (Version 62.0.3202.94 (Version oficial) 64 bits)