Summary of essential components about nextcloud-vue HOT 37 CLOSED

Something that came up in Mail: a moment-js-like timestamp, like x seconds ago.

https://github.com/brockpetrie/vue-moment https://github.com/egoist/vue-timeago looks good for that. Should we just keep a list of recommended vue libs for small stuff like that? I don't think it is worth to add a wrapper for it to the nextcloud vue components.

from nextcloud-vue.

Implemented :)

from nextcloud-vue.

I think we could still provide a basic tab component with slots for the content. So devs at least don't need to mess with the tab switching for example.

from nextcloud-vue.

Will Dialog also cover in-dialog input fields like here?

from nextcloud-vue.

@dartcafe the idea is not to port other components into nextcloud. Let's keep our simplified and unified design. :)
If you find any other reusable components we use on nc or associated apps then let's add them on this list ;)

from nextcloud-vue.

There should also be components for list elements, and grid view elements, right?

We already use the list view in lots of places. And the grid view is being experimented with in Bookmarks: http://github.com/nextcloud/bookmarks/ and Files: nextcloud/server#11050

from nextcloud-vue.

And let’s make sure that these components use HTML standard elements as much as possible. Buttons/links instead of divs etc – so we get a lot of the accessibility parts for free.

from nextcloud-vue.

Content list is very simple, you have like 5 différents options, tops.
The file list is crazy complicated. And having everything in a single component would greatly lower down the possibilities of working with all the vue features.

Remember, that for those components, you cannot edit the inner data or structure. You just give it an object ant vue does the rest. This exclude all custom ideas you might want to add into your app or other complex methods.

And as a developer, I really like the idea of having small snippets/components to speed up the development of my app, but I would totally hate having an entire structured component preventing me from doing whatever I want to do.

from nextcloud-vue.

Did we mention a sharing component?

from nextcloud-vue.

Ok 👍

from nextcloud-vue.

This one:

I think it would be helpful to have this componement to select users from a list.

from nextcloud-vue.

Suggestion: KeyboardShortcuts, FilePicker, buttons, checkboxes

from nextcloud-vue.

ContentList https://docs.nextcloud.com/server/14/developer_manual/design/list.html

In this context we should think about a refresh/reload mechanism that might be used by some apps (e.g. load new messages in Mail, pull in synced contacts in Contacts).

from nextcloud-vue.

ContentList: https://github.com/nextcloud/contacts/blob/6713a73479c9cb054034e3466ffa2167a9f74055/src/components/ContentList.vue
https://github.com/nextcloud/contacts/blob/6713a73479c9cb054034e3466ffa2167a9f74055/src/components/ContentList/ContentListItem.vue

Needs to be adapted for more standardised variables name (no contacts), but works fine :)
I still need to add custom options and such. I'll probably work on it Thursday of something :)

from nextcloud-vue.

I would add a date and a time picker to get rid of using jQuery with vue.

from nextcloud-vue.

Something that came up in Mail: a moment-js-like timestamp, like x seconds ago.

from nextcloud-vue.

@georgehrke the idea is to support the same features as the designer guide :)

from nextcloud-vue.

https://github.com/egoist/vue-timeago looks good for that.

Works 👍, but l10n is pain to use as it requires you to load the translations from another package: https://github.com/egoist/vue-timeago#usage.

from nextcloud-vue.

Any good datepicker? :)

from nextcloud-vue.

An autocomplete component would be highly appreciated :)
with label, value, and avatar / icon / plain color.

from nextcloud-vue.

@georgehrke with dropdown?
vue-multiselect is already here for that :)

from nextcloud-vue.

What about vuetify? OK, it could start a new discussion about using material design, but it has many useful components.

from nextcloud-vue.

Date-time picker? https://mengxiong10.github.io/vue2-datepicker/demo/index.html
That's the only one I found that seems to fit our need :/

Material: https://github.com/mariomka/vue-datetime
Findings: https://vuejsexamples.com/tag/picker/

from nextcloud-vue.

@jancborchardt I'm not sure. The idea is small individuals components that are simple and reusable everywhere. Big lists or stuff like that can be standardised for the html/css but will be far too complicated for a vue component.

from nextcloud-vue.

Hm – I would say it’s very comparable to the ContentList component though? https://docs.nextcloud.com/server/14/developer_manual/design/list.html

And of course "grid view" is a bit of a big part. But a component would be a "tiled element", or "preview component with a title component below and action menu right next to it".

from nextcloud-vue.

And of course "grid view" is a bit of a big part. But a component would be a "tiled element", or "preview component with a title component below and action menu right next to it".

But small stuff like that, yes definitely 😬 👍 💯

from nextcloud-vue.

Sidebar with SidebarTab would be nice too.

from nextcloud-vue.

@splitt3r again, complicated components. :)
Let's only focus on simple and reusable ones.

@dartcafe what do you mean?

from nextcloud-vue.

@splitt3r though, we have a pending discussion to standardise the sidebar ;)
nextcloud/server#10289

from nextcloud-vue.

Also, we can just have separate tickets for these kinds of components that would be nice to have, but are not essential right now? I mean we're happy for all feedback and I'm sure the number of components will grow over time, so there's nothing wrong with proposing (exotic) ones right now 😉

from nextcloud-vue.

@ChristophWurst Yes! If the component is not something that is used by almost all of the apps, then please create a new issue :)

from nextcloud-vue.

@juliushaertl yes for the tabs, seems simple enough :)

from nextcloud-vue.

About some external components, like the date-time picker for example : https://github.com/mengxiong10/vue2-datepicker

How should we handle theming?
Should we create a component that just forward everything to this component? Should we fork it?
I like the idea of just creating a "fake" component that provide all the data from the datepicker and we just add our css on top and ship it like it is our component. We'd still have to update the datepicker from the origin repo once in a while, but dependabot sure can manage that? :)

from nextcloud-vue.

I like the idea of just creating a "fake" component that provide all the data from the datepicker and we just add our css on top and ship it like it is our component. We'd still have to update the datepicker from the origin repo once in a while, but dependabot sure can manage that

👍 on that. Let's try to reuse as much as possible without forking/duplicating.

from nextcloud-vue.

@skjnldsv the datepicker look different from the one in core, like top bar arrows are different, week day names are too present? The design should at least start out with the way it currently is. 🙂

from nextcloud-vue.

@jancborchardt I used most of the design we had on the one we added on server, but there was a lot of part missing (year pick, month pick)!
But I really feel like it fit our current design and it's a nice improvement. I find this one far cleaner and easy to use compare to the jQuery one ;)
Could you do a review of it and create a new issue here to follow what we can do to improve it? :)
You can try this datepicker in the new contacts alpha if you want :)

from nextcloud-vue.

Closing now, most of them have their own issue or already exists :)

from nextcloud-vue.