chore(directives): add docs

docs/directives.md

@@ -1,63 +1,31 @@
-## Tooltip
-
 <!--
- - SPDX-FileCopyrightText: 2020-2024 Nextcloud GmbH and Nextcloud contributors
+ - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-```js static
-import { Tooltip } from '@nextcloud/vue'
+### Registration
 
-Vue.directive('tooltip', Tooltip)
-```
+To use any directive, import and register it locally, for example:
 
-The tooltip directive is based on v-tooltip. For a full feature list see the projects [README](https://github.com/Akryum/v-tooltip/blob/master/README.md#directive)
-
-In the template, use the `v-tooltip` directive:
+```js static
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
-```vue
-<a v-tooltip="'You have new messages.'">Hover me</a>
+export default {
+    directives: {
+        Tooltip,
+    },
+}
 ```
+or in `<script setup>`:
 
-Of course, you can use a reactive property:
-
-```vue
-    <template>
-        <a v-tooltip="tooltipContent">Hover me</a>
-    </template>
-    <script>
-        export default {
-            computed: {
-                tooltipContent: () => 'You have new messages.'
-            }
-        }
-    </script>
+```js static
+import vTooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 ```
 
-You can specify the tooltip position as a modifier:
+You can also register any directive globally. But it is not recommended.
 
-```vue
-<a v-tooltip.bottom="'You have new messages.'">Hover me</a>
-```
-The available positions are:
- - `'auto'`
- - `'auto-start'`
- - `'auto-end'`
- - `'top'`
- - `'top-start'`
- - `'top-end'`
- - `'right'`
- - `'right-start'`
- - `'right-end'`
- - `'bottom'`
- - `'bottom-start'`
- - `'bottom-end'`
- - `'left'`
- - `'left-start'`
- - `'left-end'`
-
-```vue
-<button v-tooltip="{content: 'I\'m a tooltip', show: true, placement: 'right'}">
-    I'm a button with a tooltip
-</button>
+```js static
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+
+Vue.directive('Tooltip', Tooltip)
 ```

docs/directives/focus.md

@@ -0,0 +1,14 @@
+<!--
+ - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+```js static
+import Focus from '@nextcloud/vue/dist/Directives/Focus.js'
+```
+
+Focus an element when it is mounted to DOM.
+
+```vue
+<input v-focus placeholder="I'm focused" />
+```

docs/directives/linkify.md

@@ -0,0 +1,18 @@
+<!--
+ - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+```js static
+import Linkify from '@nextcloud/vue/dist/Directives/Linkify.js'
+```
+
+Automatically make links in rendered text clickable.
+
+To use the directive, bind object with `linkify === true` and the text in the `text` property:
+
+```vue
+<template>
+    <p v-linkify="{ linkify: true, text: 'Read more about Nextcloud on https://nextcloud.com' }"></p>
+</template>
+```

docs/directives/tooltip.md

@@ -0,0 +1,55 @@
+<!--
+ - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+```js static
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+```
+
+Tooltip directive based on [v-tooltip](https://github.com/Akryum/v-tooltip).
+
+Note: it's preferred to use [native HTML title attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) instead for accessibility.
+
+## Usage
+
+In a component register the directive and use the `v-tooltip` in the template with static or dynamic value:
+
+```vue
+<template>
+    <button v-tooltip="'A tooltip text'">Hover me</button>
+</template>
+```
+
+You can specify the tooltip position as a modifier:
+
+```vue
+<button v-tooltip.bottom="'You have new messages.'">Hover me</button>
+```
+
+The available positions are:
+ - `'auto'`
+ - `'auto-start'`
+ - `'auto-end'`
+ - `'top'`
+ - `'top-start'`
+ - `'top-end'`
+ - `'right'`
+ - `'right-start'`
+ - `'right-end'`
+ - `'bottom'`
+ - `'bottom-start'`
+ - `'bottom-end'`
+ - `'left'`
+ - `'left-start'`
+ - `'left-end'`
+
+You can also specify more options. 
+
+```vue
+<button v-tooltip="{ content: 'I\'m a tooltip', show: true, placement: 'right' }">
+    I'm a button with a tooltip
+</button>
+```
+
+For a full documentation see: [v-tooltip/README](https://github.com/Akryum/v-tooltip/blob/master/README.md#directive).

styleguide.config.js

@@ -92,6 +92,21 @@ module.exports = async () => {
 			{
 				name: 'Directives',
 				content: 'docs/directives.md',
+				sectionDepth: 1,
+				sections: [
+					{
+						name: 'Focus',
+						content: 'docs/directives/focus.md',
+					},
+					{
+						name: 'Linkify',
+						content: 'docs/directives/linkify.md',
+					},
+					{
+						name: 'Tooltip',
+						content: 'docs/directives/tooltip.md',
+					},
+				],
 			},
 			{
 				name: 'Functions',

styleguide/global.requires.js

@@ -8,8 +8,9 @@ import Vue from 'vue'
 import { isA11yActivation } from '../src/functions/a11y/index.ts'
 import { EmojiSkinTone, emojiSearch, emojiAddRecent, getCurrentSkinTone, setCurrentSkinTone } from '../src/functions/emoji/index.ts'
 import usernameToColor from '../src/functions/usernameToColor/index.js'
-
-import VTooltip from './../src/directives/Tooltip/index.js'
+import Tooltip from './../src/directives/Tooltip/index.js'
+import Focus from './../src/directives/Focus/index.js'
+import Linkify from './../src/directives/Linkify/index.js'
 
 import axios from '@nextcloud/axios'
 
@@ -157,7 +158,7 @@ window.NextcloudVueDocs = {
 	tags: '<?xml version="1.0"?><d:multistatus xmlns:d="DAV:" xmlns:s="http://sabredav.org/ns" xmlns:oc="http://owncloud.org/ns" xmlns:nc="http://nextcloud.org/ns"><d:response><d:href>/remote.php/dav/systemtags/</d:href><d:propstat><d:prop><oc:id/><oc:display-name/><oc:user-visible/><oc:user-assignable/><oc:can-assign/></d:prop><d:status>HTTP/1.1 404 Not Found</d:status></d:propstat></d:response><d:response><d:href>/remote.php/dav/systemtags/7</d:href><d:propstat><d:prop><oc:id>7</oc:id><oc:display-name>tag1</oc:display-name><oc:user-visible>true</oc:user-visible><oc:user-assignable>true</oc:user-assignable><oc:can-assign>true</oc:can-assign></d:prop><d:status>HTTP/1.1 200 OK</d:status></d:propstat></d:response><d:response><d:href>/remote.php/dav/systemtags/2</d:href><d:propstat><d:prop><oc:id>2</oc:id><oc:display-name>tag2</oc:display-name><oc:user-visible>false</oc:user-visible><oc:user-assignable>true</oc:user-assignable><oc:can-assign>true</oc:can-assign></d:prop><d:status>HTTP/1.1 200 OK</d:status></d:propstat></d:response><d:response><d:href>/remote.php/dav/systemtags/3</d:href><d:propstat><d:prop><oc:id>3</oc:id><oc:display-name>tag3</oc:display-name><oc:user-visible>true</oc:user-visible><oc:user-assignable>true</oc:user-assignable><oc:can-assign>true</oc:can-assign></d:prop><d:status>HTTP/1.1 200 OK</d:status></d:propstat></d:response><d:response><d:href>/remote.php/dav/systemtags/4</d:href><d:propstat><d:prop><oc:id>4</oc:id><oc:display-name>important</oc:display-name><oc:user-visible>true</oc:user-visible><oc:user-assignable>true</oc:user-assignable><oc:can-assign>true</oc:can-assign></d:prop><d:status>HTTP/1.1 200 OK</d:status></d:propstat></d:response><d:response><d:href>/remote.php/dav/systemtags/1</d:href><d:propstat><d:prop><oc:id>1</oc:id><oc:display-name>secret</oc:display-name><oc:user-visible>true</oc:user-visible><oc:user-assignable>false</oc:user-assignable><oc:can-assign>true</oc:can-assign></d:prop><d:status>HTTP/1.1 200 OK</d:status></d:propstat></d:response><d:response><d:href>/remote.php/dav/systemtags/5</d:href><d:propstat><d:prop><oc:id>5</oc:id><oc:display-name>test</oc:display-name><oc:user-visible>true</oc:user-visible><oc:user-assignable>false</oc:user-assignable><oc:can-assign>true</oc:can-assign></d:prop><d:status>HTTP/1.1 200 OK</d:status></d:propstat></d:response><d:response><d:href>/remote.php/dav/systemtags/6</d:href><d:propstat><d:prop><oc:id>6</oc:id><oc:display-name>test2</oc:display-name><oc:user-visible>false</oc:user-visible><oc:user-assignable>false</oc:user-assignable><oc:can-assign>true</oc:can-assign></d:prop><d:status>HTTP/1.1 200 OK</d:status></d:propstat></d:response></d:multistatus>',
 }
 
-// Exported Functions
+// Functions
 window.isA11yActivation = isA11yActivation
 window.EmojiSkinTone = EmojiSkinTone
 window.emojiSearch = emojiSearch
@@ -166,4 +167,7 @@ window.getCurrentSkinTone = getCurrentSkinTone
 window.setCurrentSkinTone = setCurrentSkinTone
 window.usernameToColor = usernameToColor
 
-Vue.directive('tooltip', VTooltip)
+// Directives
+Vue.directive('Tooltip', Tooltip)
+Vue.directive('Focus', Focus)
+Vue.directive('Linkify', Linkify)