mirror of
https://github.com/directus/directus.git
synced 2026-04-03 03:00:39 -04:00
Actions presentation interface (#3677)
* Adding actions interface * Do not use v-button-group * Add open in new window; Use injected values instead of $parent * Simplify and rename interface Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
This commit is contained in:
Adrian Dimitrov
101
app/src/interfaces/button-links/button-links.vue
Normal file
101
app/src/interfaces/button-links/button-links.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="button-links">
|
||||
<v-button
|
||||
v-for="(link, index) in linksParsed"
|
||||
:key="index"
|
||||
class="action"
|
||||
:class="[link.type]"
|
||||
:secondary="link.type !== 'primary'"
|
||||
:disabled="disabled"
|
||||
:icon="!link.label"
|
||||
:href="link.url"
|
||||
>
|
||||
<v-icon left v-if="link.icon" :name="link.icon" />
|
||||
<span v-if="link.label">{{ link.label }}</span>
|
||||
</v-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType, ref, inject, computed } from '@vue/composition-api';
|
||||
import { render } from 'micromustache';
|
||||
|
||||
type Link = {
|
||||
icon: string;
|
||||
label: string;
|
||||
type: string;
|
||||
url: string;
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
links: {
|
||||
type: Array as PropType<Link[]>,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const values = inject('values', ref<Record<string, any>>({}));
|
||||
|
||||
const linksParsed = computed(() => {
|
||||
return props.links.map((link) => ({
|
||||
...link,
|
||||
url: render(link.url, values.value),
|
||||
}));
|
||||
});
|
||||
|
||||
return {
|
||||
linksParsed,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.button-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.action {
|
||||
& + & {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&.info {
|
||||
--v-button-icon-color: var(--primary);
|
||||
--v-button-background-color: var(--primary-alt);
|
||||
--v-button-background-color-hover: var(--primary-25);
|
||||
--v-button-color: var(--primary);
|
||||
--v-button-color-hover: var(--primary-150);
|
||||
}
|
||||
|
||||
&.success {
|
||||
--v-button-icon-color: var(--success);
|
||||
--v-button-background-color: var(--success-alt);
|
||||
--v-button-background-color-hover: var(--success-25);
|
||||
--v-button-color: var(--success);
|
||||
--v-button-color-hover: var(--success-150);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
--v-button-icon-color: var(--warning);
|
||||
--v-button-background-color: var(--warning-alt);
|
||||
--v-button-background-color-hover: var(--warning-25);
|
||||
--v-button-color: var(--warning);
|
||||
--v-button-color-hover: var(--warning-150);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
--v-button-icon-color: var(--danger);
|
||||
--v-button-background-color: var(--danger-alt);
|
||||
--v-button-background-color-hover: var(--danger-25);
|
||||
--v-button-color: var(--danger);
|
||||
--v-button-color-hover: var(--danger-150);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
88
app/src/interfaces/button-links/index.ts
Normal file
88
app/src/interfaces/button-links/index.ts
Normal file
@@ -0,0 +1,88 @@
|
||||
import { defineInterface } from '@/interfaces/define';
|
||||
import InterfaceButtonLinks from './button-links.vue';
|
||||
|
||||
export default defineInterface(({ i18n }) => ({
|
||||
id: 'button-links',
|
||||
name: i18n.t('interfaces.button-links.button-links'),
|
||||
description: i18n.t('interfaces.button-links.description'),
|
||||
icon: 'smart_button',
|
||||
component: InterfaceButtonLinks,
|
||||
hideLabel: true,
|
||||
hideLoader: true,
|
||||
types: ['alias'],
|
||||
groups: ['presentation'],
|
||||
options: [
|
||||
{
|
||||
field: 'links',
|
||||
type: 'json',
|
||||
name: i18n.t('interfaces.button-links.links'),
|
||||
meta: {
|
||||
width: 'full',
|
||||
interface: 'repeater',
|
||||
options: {
|
||||
placeholder: i18n.t('title'),
|
||||
template: '{{ label }}',
|
||||
fields: [
|
||||
{
|
||||
field: 'label',
|
||||
type: 'string',
|
||||
name: i18n.t('label'),
|
||||
meta: {
|
||||
width: 'full',
|
||||
interface: 'text-input',
|
||||
options: {
|
||||
placeholder: i18n.t('label'),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'icon',
|
||||
name: i18n.t('icon'),
|
||||
type: 'string',
|
||||
meta: {
|
||||
width: 'half',
|
||||
interface: 'icon',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'type',
|
||||
name: i18n.t('type'),
|
||||
type: 'string',
|
||||
meta: {
|
||||
width: 'half',
|
||||
interface: 'dropdown',
|
||||
default_value: 'normal',
|
||||
options: {
|
||||
choices: [
|
||||
{ text: i18n.t('primary'), value: 'primary' },
|
||||
{ text: i18n.t('normal'), value: 'normal' },
|
||||
{ text: i18n.t('info'), value: 'info' },
|
||||
{ text: i18n.t('success'), value: 'success' },
|
||||
{ text: i18n.t('warning'), value: 'warning' },
|
||||
{ text: i18n.t('danger'), value: 'danger' },
|
||||
],
|
||||
},
|
||||
},
|
||||
schema: {
|
||||
default_value: 'normal',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'url',
|
||||
type: 'string',
|
||||
name: i18n.t('url'),
|
||||
meta: {
|
||||
width: 'full',
|
||||
interface: 'text-input',
|
||||
options: {
|
||||
font: 'monospace',
|
||||
placeholder: 'https://example.com/articles/{{ id }}/{{ slug }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}));
|
||||
@@ -25,6 +25,7 @@ connection_excellent: Excellent Connection
|
||||
connection_good: Good Connection
|
||||
connection_fair: Fair Connection
|
||||
connection_poor: Poor Connection
|
||||
primary: Primary
|
||||
rename_folder: Rename Folder
|
||||
delete_folder: Delete Folder
|
||||
prefix: Prefix
|
||||
@@ -801,6 +802,15 @@ view_project: View Project
|
||||
weeks: {}
|
||||
report_error: Report Error
|
||||
interfaces:
|
||||
button-links:
|
||||
button-links: Button Links
|
||||
links: Links
|
||||
description: Configurable link buttons for launching dynamic URLs
|
||||
style: Style
|
||||
primary: Primary
|
||||
link: Links
|
||||
button: Buttons
|
||||
error: Cannot perform action
|
||||
checkboxes:
|
||||
checkboxes: Checkboxes
|
||||
description: Choose between multiple options via checkboxes
|
||||
|
||||
Reference in New Issue
Block a user