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.

Sign up for GitHub

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

[next] chore(docs): update documentation #6482

Open
wants to merge 10 commits into
base: next
Choose a base branch
from
+105 −88
Open

[next] chore(docs): update documentation #6482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a21c911
chore(docs): remove recommendation about Vue.prototype.OC
ShGKme Jan 26, 2025
e5af7da
chore(docs): remove useless --save from npm install
ShGKme Jan 26, 2025
2702b69
chore(docs): import documentation
ShGKme Jan 26, 2025
074fe4a
chore(docs): consistent badges
ShGKme Jan 26, 2025
4833915
chore(docs): update translation docs
ShGKme Jan 26, 2025
fcc5ef6
chore(docs): remove outdated Getting started
ShGKme Jan 26, 2025
e6bd456
chore(docs): update description and versions
ShGKme Jan 26, 2025
e7f8750
chore(docs): add emoji
ShGKme Jan 26, 2025
683de8b
chore(docs): restructure Development setup - Contributing section
ShGKme Jan 27, 2025
2e761e6
chore(docs): add How to contribute
ShGKme Jan 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 66 additions & 63 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,44 +3,75 @@
- SPDX-License-Identifier: AGPL-3.0-or-later
-->

# Vue components
# @nextcloud/vue

[![npm last version](https://img.shields.io/npm/v/@nextcloud/vue.svg?style=flat-square)](https://www.npmjs.com/package/@nextcloud/vue)
[![Dependabot status](https://img.shields.io/badge/Dependabot-enabled-brightgreen.svg?longCache=true&style=flat-square&logo=dependabot)](https://dependabot.com)
[![npm last version](https://img.shields.io/npm/v/@nextcloud/vue.svg?style=flat)](https://www.npmjs.com/package/@nextcloud/vue)
[![Dependabot status](https://img.shields.io/badge/Dependabot-enabled-brightgreen.svg?longCache=true&style=flat&logo=dependabot)](https://dependabot.com)

This repo contains the various Vue.js components that Nextcloud uses for its internal design and structure. It provides standardized UI elements for building Nextcloud app frontends with Vue.js.
> 🖼️ UI Kit for building Nextcloud apps with Vue

## Documentation
- ✨ Standardized UI Components
- 🛠️ Composables and frontend utilities
- 🔗 [Reference providers](https://docs.nextcloud.com/server/latest/developer_manual/digging_deeper/reference.html) utilities

A list of available components with examples to try out is available in the [documentation](https://nextcloud-vue-components.netlify.app).
## 📄 Documentation

The documentation is built from the latest development branch, for stable releases the documentation can be found matching the latest minor version:
| Version | Target | Documentation |
|----------------|-----------------------|-------------------------------------------------------|
| v9.x [next] | Nextcloud 30+ (Vue 3) | https://next--nextcloud-vue-components.netlify.app |
| v8.x [master] | Nextcloud 28+ (Vue 2) | https://nextcloud-vue-components.netlify.app |
| v7.x [stable7] | Nextcloud 25 - 27 | https://stable7--nextcloud-vue-components.netlify.app |
| v6.x [stable6] | Nextcloud 24 - 25 | https://stable6--nextcloud-vue-components.netlify.app |

- [master](https://nextcloud-vue-components.netlify.app).
- [7.x.x](https://stable7--nextcloud-vue-components.netlify.app/)
- [6.x.x](https://stable6--nextcloud-vue-components.netlify.app/)

## Getting started

### App example
If you want to check a real live example of a nextcloud app that uses this library, you can head over to https://github.com/skjnldsv/vueexample/
We will try to maintain this repository the best we can, but some example might be obsolete. Always check this [repository documentation](#documentation).

### Install the library
## 📦 Install

```bash
npm i @nextcloud/vue@next
```

### Usage
## 🚀 Usage

Import corresponding components and other modules on use. Check the documentation for more details.

```js
import NcButton from '@nextcloud/vue/components/NcButton'
import { useHotKey } from '@nextcloud/vue/composables/useHotKey'

// ⚠️ (REMOVED) In v8 the following import path could be used. It was deprecated and removed in v9.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And this as well 🙂

import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey.js'
```

To use a component, just import it:
Import from a single root is available as well. Use with caution: this might lead to slower build time and larger bundles in some cases.

```js
import { NcAppNavigation, NcActions, NcActionButton } from '@nextcloud/vue'
import { NcButton, useHotKey } from '@nextcloud/vue'
```

## Development setup
## 🤝 Contributing

### 📜 How to contribute

1. It's always good to check/create an issue first and discuss the problem or feature you want to work on
2. Fork the repository and create a new branch
3. Make the changes
4. Check the change in Vue-Styleguidist and/or Nextcloud apps
- Do not forget to `lint` and `test` your changes
- If possible, add tests for your changes
5. Commit and push your changes, create a Pull Request
- Make sure to follow the [Conventional Commits](https://www.conventionalcommits.org) in commit messages, and PR titles, for example:\
`fix(NcButton): correct layout on Safari`
- Make sure to follow the **Pull Request template**
- Sign-off you commits for the [Developer Certificate of Origin (DCO)](https://developercertificate.org/)
6. Get your PR reviewed
- If you don't receive a feedback in a week, feel free to mention the maintainers, for example, last developers worked on the module
7. Get your PR merged

Please read the [Code of Conduct](https://nextcloud.com/community/code-of-conduct/). This document offers some guidance to ensure Nextcloud participants can cooperate effectively in a positive and inspiring atmosphere and to explain how together we can strengthen and support each other.

More information on how to contribute: [https://nextcloud.com/contribute/](https://nextcloud.com/contribute/)

### 🧑‍💻 Development setup

If you want to work on improving the components it’s best to run the latest code and link it to your local Nextcloud installation:

Expand All @@ -54,64 +85,36 @@ If you want to work on improving the components it’s best to run the latest co
- In the repository of an app do `npm link @nextcloud/vue` (you need to re-link any time you do `npm ci` in the app)
4. Then build the app with: `npm run build` (or watch for changes with `npm run watch`)

## Translations
### 🌐 Translations

This library uses translated strings.
When you edit/create a translated string, you need to run `npm run l10n:extract` to update the source files.
Our awesome translation community will then be notified and a bot will sync those changes automatically.
Use `t` and `n` functions from `src/l10n.js` to display translated strings. They follow `gettext` and `ngettext` interface from [`@nextcloud/l10n/gettext`](https://nextcloud-libraries.github.io/nextcloud-l10n/modules/_nextcloud_l10n_gettext.html).

Nonetheless, it requires a bit of caution.
When you implement a translated string, import the `translate` or `translatePlural` and add it in your methods like so:
```vue
<script setup lang="ts">
import { t } from '../../l10n.js'
</script>

<template>
<element>
{{ t('Choose') }}
</element>
</template>

<script>
import { translate as t } from '@nextcloud/l10n'

export default {
methods: {
t,
},
}
</script>
```

Please note that using a translated string as an attribute will _NOT_ work.
But it will work if it's within an element (like the example above)
```vue
<template>
<element :prop="t('This will not work')" />
</template>
```

You will instead have to define the string in the data section and use the relevant variable reference.
```vue
<template>
<element :prop="chooseProp" />
</template>
When you edit/create a translated string, you need to update the l10n files.
Our awesome translation community will then be notified and a bot will sync translations automatically.

<script>
export default {
data() {
return {
chooseProp: t('Choose'),
},
}
}
</script>
```sh
npm run l10n:extract
```

## Styleguide
### 🐸 Styleguidist

When developing new components or extending components, make sure to also have some bits of related documentation like examples, where applicable.
To test components and the documentation in that context, you can run `npm run styleguide` to run a local server that serves the style guide
with all the components.

### Using vue-devtools in Firefox
#### Using vue-devtools in Firefox

If you want to use [vue-devtools](https://github.com/vuejs/vue-devtools) in Firefox, you need to:

Expand All @@ -137,7 +140,7 @@ index 0e3a6a705d..416b8b0fb9 100644
/** @var array Domains from which scripts can get loaded */
```

## Releasing a new version
## 📤 Releasing a new version

- Pull the latest changes from `master` or `stableX`
- Checkout a new branch with the tag name (e.g `v4.0.1`): `git checkout -b v<version>`
Expand Down
60 changes: 37 additions & 23 deletions docs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,42 +9,56 @@
- SPDX-License-Identifier: AGPL-3.0-or-later
-->

This repo contains the various Vue.js components that Nextcloud uses for its internal design and structure.
> 🖼️ Nextcloud UI Kit for building Nextcloud apps with Vue

# Installation
- ✨ Standardized UI Components
- 🛠️ Composables and frontend utilities
- 🔗 [Reference providers](https://docs.nextcloud.com/server/latest/developer_manual/digging_deeper/reference.html) utilities

## 📄 Documentation

| Version | Target | Documentation |
|----------------|-----------------------|-------------------------------------------------------|
| v9.x [next] | Nextcloud 30+ (Vue 3) | https://next--nextcloud-vue-components.netlify.app |
| v8.x [master] | Nextcloud 28+ (Vue 2) | https://nextcloud-vue-components.netlify.app |
| v7.x [stable7] | Nextcloud 25 - 27 | https://stable7--nextcloud-vue-components.netlify.app |
| v6.x [stable6] | Nextcloud 24 - 25 | https://stable6--nextcloud-vue-components.netlify.app |

## 📦 Install

```bash
npm i --save @nextcloud/vue
npm i @nextcloud/vue
```

# Usage
## 🚀 Usage

Import corresponding components and other modules on use. Check the documentation for more details.

```js static
import { NcAppNavigation } from '@nextcloud/vue'

export default {
name: 'MyComponent',
components: {
NcAppNavigation
}
}
```
import NcButton from '@nextcloud/vue/components/NcButton'
import { useHotKey } from '@nextcloud/vue/composables/useHotKey'

You can also import individual module without bundling the full library.
// (Deprecated) Old import path
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can also be removed for next.

import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey.js'
```

Import from a single root is available as well. Use with caution: this might lead to slower build time and larger bundles in some cases.

```js static
import NcAvatar from '@nextcloud/vue/components/NcAvatar'
import { NcButton, useHotKey } from '@nextcloud/vue'
```

## Recommendations
### (Deprecated) Registering all components
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this section can go now, no?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, I though, I checked every commit on backport 🙈


`NextcloudVuePlugin` registers all the components and directives globally.

Some components require Nextcloud functionality to work, so it is currently recommended to extend Vue with the following:
> ⚠️ This installation method leads to extremely large bundle and removed in v9.\
> If you don't want to import component on usage you may use [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) instead.

```js static
Vue.prototype.OC = window.OC
Vue.prototype.OCA = window.OCA
```
import Vue from 'vue'
import { NextcloudVuePlugin } from '@nextcloud/vue'

<a href="https://www.netlify.com">
<img src="https://www.netlify.com/img/global/badges/netlify-dark.svg"/>
</a>
Vue.use(NextcloudVuePlugin)
```
4 changes: 2 additions & 2 deletions styleguide.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ module.exports = async () => {
components: 'src/components/*/*.vue',
getComponentPathLine(componentPath) {
const name = path.basename(componentPath, '.vue')
return `import ${name} from '@nextcloud/vue/dist/Components/${name}.js'`
return `import ${name} from '@nextcloud/vue/components/${name}'`
},

enhancePreviewApp: path.resolve(__dirname, 'styleguide/preview.js'),
Expand All @@ -85,7 +85,7 @@ module.exports = async () => {
name: 'Versions',
sections: [
{
name: 'next v9.x (Nextcloud 28+ on Vue 3)',
name: 'next v9.x (Nextcloud 30+ on Vue 3)',
href: 'https://next--nextcloud-vue-components.netlify.app',
},
{
Expand Down
Loading