Create ODS files list component

[exalate-issue-sync]

User stories

• As a web developer I want to reuse the files list component in my extension so that I don't have to copy it from somewhere or write my own (hard to maintain and possibly error prone). -> this also creates the need to have dynamic definition of columns. component needs to live in ODS.
• As a web developer I want to be able to provide a dynamic set of columns and renderers, so that the layout and content rendering is entirely under my control. I want to have standard components for standard column types (plain strings or numbers, dates, ...) -> slots or components for cell rendering.
• As a blind / visually impaired person I want to be able to navigate through the files list via keyboard in a way that feels natural to me. Without it I am not able to use the most important part of the web UI in an efficient way. (same applies for power users)

Acceptance criteria

• accessibility tests for the component
• unit tests for the component

[exalate-issue-sync]

Benedikt Kulmann commented: Collected all our current use cases of tables in a figma:
https://www.figma.com/file/UHlzUG3YfPY3XAw4yn7pTj

Collected ideas for features, researched mechanics of other table components out there (vuetable2, bootstrap table). Decided to go with a data driven field layout that is rendered into the respective columns. Supported field types (as a start) are plain, callback (for simple data transformation) and slot. Decided that we want to build different selection modes into the table component natively (none, single (with radiobuttons), multi (with checkboxes)).

Researched keyboard navigation and clarified with Marcus Herrmann how it should work. Apparently native html elements are sufficient and don't need special magic for keyboard navigation that works for screen readers. Details in owncloud/web#4330

First draft PR here: owncloud/owncloud-design-system#1034

[exalate-issue-sync]

Benedikt Kulmann commented: Added:

• more interactive examples in the docs of the table component
• styling for table component
• hover, highlighted, cell alignment and cell width props for table and table-cell components
• an oc-table-simple component which can be used for manually creating a table layout with the other available table components
• first unit tests

[exalate-issue-sync]

Benedikt Kulmann commented: Changes on 08th of January 2021:

• configurable vertical alignment for cells
• slots for header cells
• removal of moment.js as dependency, replaced with luxon
• first draft of oc-table-files component, which internally uses the oc-table component

Changes on 11th of January 2021:

• OcResource component, which is used in a slot of oc-table-files
• OcStatusIndicators component, which is used in OcResource
• handle displaying shortened paths in views like trashbin or favorites
• add full path as tooltip for shortened paths
• show formatted size and date columns

Changes on 12th of January 2021:

• people column for oc-table-files
• owner column for oc-table-files
• add examples in oc-table-files documentation
• slot for the status column in oc-table-files (free to use by consuming code)
• highlighting for file list rows
• offer checkboxes for selection and handle selection in v-model

[exalate-issue-sync]

Benedikt Kulmann commented: Changes on 13th of January 2021:

• sticky header for oc-table, default enabled in oc-table-files
• configurable fixed row height for oc-table
• more unit test coverage
• fix luxon usage
• first a11y tests (static checks on html)

Changes on 14th of January 2021:

• fix routing when clicking on folder
• fix triggering actions
• allow to disable click on resource

[exalate-issue-sync]

Benedikt Kulmann commented: Changes on 15th of January 2021:

• extend OcResource component for non-clickable resource
• translations and l10n extraction (WIP)
• changelog