github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-02-16 03:55:19 -05:00
Code Issues Packages Projects Releases Wiki Activity

Support link-modules and add docs link (#368)

Browse Source 
* Allow link type modules

* Add docs module

* Allow buttons to render as <a>

* Update button readme

* Use link buttons in module sidebar when needed
This commit is contained in:
Rijk van Zanten
2020-04-09 10:23:07 -04:00
committed by GitHub
parent f2034f7ade
commit 7a2ee0215f
9 changed files with 55 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/v-button/readme.md
View File

@@ -60,7 +60,8 @@ The loading slot is rendered _on top_ of the content that was there before. Make
| `small` | Render small | `false` |
| `large` | Render large | `false` |
| `x-large` | Render extra large | `false` |
| `to` | Render as vue router-link | `false` |
| `to` | Render as vue router-link | `null` |
| `href` | Render as anchor | `null` |
| `align` | Align content in button. One of `left | center | right` | `'center'` |
| `dashed` | Render the border dashed. Meant to be used with `outlined`. | `false` |
| `tile` | Render without border radius | `false` |

14
src/components/v-button/v-button.vue
View File

@@ -23,6 +23,9 @@
:type="type"
:disabled="disabled"
:to="to"
:href="href"
:target="component === 'a' ? '_blank' : null"
:ref="component === 'a' ? 'noopener noreferer' : null"
@click="onClick"
>
<span class="content" :class="{ invisible: loading }">
@@ -43,6 +46,7 @@ import { defineComponent, computed, PropType } from '@vue/composition-api';
import { Location } from 'vue-router';
import useSizeClass, { sizeProps } from '@/compositions/size-class';
import { useGroupable } from '@/compositions/groupable';
import { notEmpty } from '@/utils/is-empty';
export default defineComponent({
props: {
@@ -78,6 +82,10 @@ export default defineComponent({
type: [String, Object] as PropType<string | Location>,
default: null,
},
href: {
type: String,
default: null,
},
exact: {
type: Boolean,
default: false,
@@ -108,7 +116,11 @@ export default defineComponent({
setup(props, { emit }) {
const sizeClass = useSizeClass(props);
const component = computed<string>(() => (props.to ? 'router-link' : 'button'));
const component = computed<'a' | 'router-link' | 'button'>(() => {
if (notEmpty(props.href)) return 'a';
if (notEmpty(props.to)) return 'router-link';
return 'button';
});
const { active, toggle } = useGroupable(props.value, 'button-group');
return { sizeClass, onClick, component, active, toggle };