Here is my problem:
I typically have a paginated datagrid with a lot of rows. I want to be able to edit the data for each row of course but I have 2 constraints on this:
I need the edition form to replace the content of the page (I don't want a popup, modal dialog or side panel)
I don't want to lose the state of the datagrid: maybe I navigated down 5 pages in the datagrid and I don't want to be reloaded on the first page. And actually, I'd rather not reload the data I already had (the edited data will be updated automatically by my persistence layer anyway).
Ideally, I would have liked to have some kind of subrouter but I'm not sure how it would fit the first requirement. Otherwise, I could have a component that would be hidden by default and positions itself on top of the datagrid view when necessary but that feels quite hacky and forces me to have everything in the same template. And I will have to handle a stack of these components if I have several different 'full-screen panel'...
Any idea on a correct way to implement this?
Thanks!
I tried different solutions to no avail unfortunately. I had a long discussion with #Kukks on gitter and we agreed that using subrouters and viewports might be a bit overkill for my use case.
I reverted to my original idea of using absolutely positioned components to hide the previous one in a kind of "deck layout". This is not ideal as I would have liked completely separated views and using components forces me to declare them in the main view but it works well and is very easy to implement...
So: not as clean as I would have liked but much easier to implement and less convoluted.
Consider using Router View Ports
http://aurelia.io/hub.html#/doc/article/aurelia/router/latest/router-configuration/9
Related
I'm adding accessibility to my project and I have a basic vuetify data table, just like this example, but I can't find a way to make the checkboxes accessible using the tab key on the keyboard, Is there any way to do this? I know there's something called 'tabIndex' and I've used it before, but I don't know how to use it here. Can you guys help me or guide me on how to do it? Thanks!
It is very difficult to impossible to “add accessibility” at the end of a project.
Getting keyboard navigation and aria attributes right in 3rd party components is nearly impossible. You’d need to apply plenty of hacks or bind deeply into the component’s DOM, which breaks once the library gets updated.
With Vuetify you chose a library that has accessibility on top of their list, but unfortunately the data table with checkboxes cannot be used by keyboard at all, and is lacking plenty of other ARIA attributes. They don’t seem to keep up to that promise for that component.
As with any 3rd party library, if you find an issue, you should try to report a bug upstream and fix it together with their developers.
Correct behaviour of data grids
The expected behaviour of tables in web applications is that of a Data Grid.
A data grid is a composite UI component, so it’s expected that the whole component receives focus only once by means of Tab. Then, you’d navigate with arrow keys inside the table, using Space to select rows or Enter to interact with a cell.
See Keyboard Navigation Inside Components
You can try keyboard navigation in AG-Grid
The pattern to apply in code would be a roving tab index:
Only one child element of the table has tabindex="0", while all others have tabindex="-1". Key bindings then will move the 0 around in the component.
So this is quite some effort to implement.
Simple Alternative
As far as I known, it is acceptable—sometimes even expected—by concerned users, for web applications to behave more like websites, where everything is focussed by means of Tab.
This might be ok if the only possible interaction in your table is to select checkboxes, and if you provide possibilities to Bypass Blocks by offering landmarks or headlines. You should test it with some screen reader users.
For this to work, you would indeed only need to add tabindex="0" to the checkbox.
Then, again, the checkbox does not expose any other accessibility information, it’s an ignorant <div>. It should at least be:
<div role="checkbox" aria-label="Select row 5" aria-checked="false" tabindex="0">
See the Checkbox Pattern
All this might be possible, see Vuetify Accessibility (a11y)
Other Accessibility Criteria
Right now, you mention keyboard navigation. This is a great place to start with, since it is the foundation necessary for most assistive technology.
The Web Content Accessibility Guidelines (WCAG) are the reference to look for if you want to achieve compliance. Level AA (including level A) is the one recommended as a baseline.
But be aware that keyboard navigation is only one of 13 guidelines. Exposing state (checked, selected) to assistive technology, or getting contrasts right are examples for other criteria.
For web applications, it’s a good approach to advance the improvements based on critical paths in the story map, similar to an MVP, meaning that you would advance per process/task and make sure that each step in that process is accessible to the audience you prioritised based on the nature of the application.
Usability testing with people with disabilities is also a very good approach that can be applied in parallel, which centres the initiative more on the actual use cases.
In my app there's a page where I am showing several snackbars depending on results from server.
There can be several triggered by the server's result. They are also triggered from different components, so I don't have a single controller that could render them where I want.
So, they all display at once and overlap each other. I linked the official Vuetify docs page because the problem is clearly visible there. Just click on two of the buttons in short enough succession.
Is there any way I could render them such that they would stack one above the other instead of all bottom-centering over each other?
I was thinking I'd need a way to tell them the component that would be their rendering parent. But I can't seem to find a way to do this. Slots don't seem to be much help with this either since I can't declare global ones.
Is there any way I can do this?
Not really a code problem more a discussion/brainstroming-post.
I would like to build some light CMS in Vue/Nuxt, which will output a static website in the end.
So I thought about going for one Nuxt-page (does not have to be a Nuxt-page necessarily) containing all the CMS-related stuff and handle the actual website inside a nuxt-child component to keep code tidy.
Problem is, that i can not access the inner Nuxt page, so any editing will be impossible (I want to achieve some simple inline-editing).
For visualization the editor of webflow may be helpful (Directlink to the video). What i want to achieve is a similar version. I would like to have the page separated from the CMS. The CMS would be the lower bottom-bar and provide stuff like the editor for the inline-editing.
Currently my best solution was to define the editing directly inside the page, which is working, but needs to be stripped out for production and makes a future separation impossible.
Is there any solution for this? Or am I thinking the wrong way?
Can I link both instances with a common vuex-store?
You could created two seperate components, one for editing and one for rendering.
These could utilize components themselves to keep the overhead to a minimun.
You could also use the same component, but lazy load the editor features based on some condition like:
If youre fine with having the Editor only available during development you can create an env variable and check for process.env.NODE_ENV !== 'production'
Another way would be to have some sort of authorization that combined with v-if would show the editor or hide it.
I have strange (at least to me) problem with multiple checkboxes with v-model. When using multiple checkboxes that are v-model'ed to one property then normal array is produced which is done with code below:
.form-check
input.form-check-input(type=“checkbox” name=“checkbox” v-model=“methodology” value=“issue tracking tool”)
label.form-check-label issue tracking tool
However, when I try to move it to Single File Component I had to copy some magical tricks from Vue.js forum to make it work. I still suspect that there must be easier way to achieve it. I can’t imagine that it wasn’t solved with simple solutions since it’s quite a common pattern (checkbox in a component - nothing exotic, right?). Any help appreciated!
Here is the working jsfiddle - please have in mind that there is no errors. I just want to know if that really has to be that complicated.
The answer is, no. You may be able to do this magic differently, but it needs to be done.
Vue has to do magic behind the scenes for checkbox because unlike all the other inputs, which have a single item that gets updated, the checkbox has to manage whether the a value is in an array. This means that the listeners and values have to be patched between the wrapper and input.
I have started to build apps with vuejs recently and have one small issue that I can't get around:
I am using vue-router to jump between pages and lets say I have a huge list where additional items may be injected with ajax, user has to scroll, he click on item, see the details (is in new route) and when gets back list is reinitialized and has to scroll again to be at the point he was previously. Do I have some possibility to keep the state of given component (and view like scroll position) while using vue-router or do I have to keep some cache-instance in main app component and then map it on init?
Thank you.
Essentially, the issue is that your component stores state internally. Navigating away clears the state. There are two ways I see this could be handled.
1) (quickfix) instead of redirecting use another way of displaying the item details (modal, or expand come to mind). This way the state of the component is not lost
2) (the "proper way") store the state. Inevitably, you'll come up against this sooner or later and the best way to deal with storing a state is vuex. https://vuex.vuejs.org/en/intro.html Initially, this will require a bit of learning and add some complexity, but it is a worthwhile investment