diff --git a/docs/directives.md b/docs/directives.md index b7de2411e5..ad60eccc79 100644 --- a/docs/directives.md +++ b/docs/directives.md @@ -1,63 +1,31 @@ -## Tooltip - -```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 -Hover me +export default { + directives: { + Tooltip, + }, +} ``` +or in ` +```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 -Hover me -``` -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 - +```js static +import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js' + +Vue.directive('Tooltip', Tooltip) ``` diff --git a/docs/directives/focus.md b/docs/directives/focus.md new file mode 100644 index 0000000000..e17c4365ca --- /dev/null +++ b/docs/directives/focus.md @@ -0,0 +1,14 @@ + + +```js static +import Focus from '@nextcloud/vue/dist/Directives/Focus.js' +``` + +Focus an element when it is mounted to DOM. + +```vue + +``` diff --git a/docs/directives/linkify.md b/docs/directives/linkify.md new file mode 100644 index 0000000000..6f727762c9 --- /dev/null +++ b/docs/directives/linkify.md @@ -0,0 +1,18 @@ + + +```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 + +``` \ No newline at end of file diff --git a/docs/directives/tooltip.md b/docs/directives/tooltip.md new file mode 100644 index 0000000000..7373bdb9df --- /dev/null +++ b/docs/directives/tooltip.md @@ -0,0 +1,55 @@ + + +```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 + +``` + +You can specify the tooltip position as a modifier: + +```vue + +``` + +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 + +``` + +For a full documentation see: [v-tooltip/README](https://github.com/Akryum/v-tooltip/blob/master/README.md#directive). diff --git a/styleguide.config.js b/styleguide.config.js index decf4978db..fbbd5cafca 100644 --- a/styleguide.config.js +++ b/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', diff --git a/styleguide/global.requires.js b/styleguide/global.requires.js index ce4e02f686..1c20d3bccf 100644 --- a/styleguide/global.requires.js +++ b/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: '/remote.php/dav/systemtags/HTTP/1.1 404 Not Found/remote.php/dav/systemtags/77tag1truetruetrueHTTP/1.1 200 OK/remote.php/dav/systemtags/22tag2falsetruetrueHTTP/1.1 200 OK/remote.php/dav/systemtags/33tag3truetruetrueHTTP/1.1 200 OK/remote.php/dav/systemtags/44importanttruetruetrueHTTP/1.1 200 OK/remote.php/dav/systemtags/11secrettruefalsetrueHTTP/1.1 200 OK/remote.php/dav/systemtags/55testtruefalsetrueHTTP/1.1 200 OK/remote.php/dav/systemtags/66test2falsefalsetrueHTTP/1.1 200 OK', } -// 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)