Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VaGrid component #3771

Open
m0ksem opened this issue Aug 29, 2023 · 0 comments
Open

VaGrid component #3771

m0ksem opened this issue Aug 29, 2023 · 0 comments
Labels
component Is a new component or part of existing one d3: medium No cheats. Monsters a bit faster. good first issue Right issue if you're new to vuestic v1: minor This might be helpful, but not really

Comments

@m0ksem
Copy link
Contributor

m0ksem commented Aug 29, 2023

Let's have a component that allow user to build components that behaves as grid. We will use it later in DatePicker.

Usage example:
image

We can take existing code from VaDatePicker.

  • We need: VaGrid, VaGridRow, VaGridCell components.
  • VaGrid must have focusable prop and isFocused in slot <VaGridCell focusable="boolean" #default="{ isFocused }" />
  • Keyboard navigation must be implemented with Arrows.
  • Aria roles must be applied.

Please, connect in Discord before implementation!

I checked out that gridcell must be used in row. It is a requirement, otherwise gridcell will not be recognized. We're using css grid here, so we don't have an actual row element... 

I think we need to change component layout from css grid, to more general approach with row

roles:
```
grid
  row
     columnheader <- weekdays
  rowgroup
     row
       gridcell <- date
 ```
 
What if we make VaGrid component, which will implement all of these with keyboard navigation? I think it might be useful for people who make something like cinema chair picker or whatever requires navigation with grid. We could reuse VaGrid in DatePicker. I think for this PR we can simply remove wrong roles and implement VaGrid component later.

Originally posted by @m0ksem in #3747 (comment)

@m0ksem m0ksem added component Is a new component or part of existing one d3: medium No cheats. Monsters a bit faster. v1: minor This might be helpful, but not really good first issue Right issue if you're new to vuestic labels Aug 29, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component Is a new component or part of existing one d3: medium No cheats. Monsters a bit faster. good first issue Right issue if you're new to vuestic v1: minor This might be helpful, but not really
Projects
None yet
Development

No branches or pull requests

1 participant