mirror of
https://github.com/n8n-io/n8n.git
synced 2025-03-05 20:50:17 -08:00
13659d036f
* ensure that eslint runs on all frontend code * remove tslint from `design-system` * enable prettier and eslint-prettier for `design-system` * Delete tslint.json * use a single editorconfig for the repo * enable prettier for all code in `design-system` * more linting fixes on design-system * ignore coverage for git and prettier * lintfix on editor-ui
124 lines
2.7 KiB
Vue
124 lines
2.7 KiB
Vue
<template>
|
|
<span :class="$style.container">
|
|
<el-dropdown
|
|
:placement="placement"
|
|
:size="size"
|
|
trigger="click"
|
|
@click.native.stop
|
|
@command="onCommand"
|
|
@visible-change="onVisibleChange"
|
|
>
|
|
<span :class="{ [$style.button]: true, [$style[theme]]: !!theme }">
|
|
<component :is="$options.components.N8nIcon" icon="ellipsis-v" :size="iconSize" />
|
|
</span>
|
|
<el-dropdown-menu slot="dropdown" data-test-id="action-toggle-dropdown">
|
|
<el-dropdown-item
|
|
v-for="action in actions"
|
|
:key="action.value"
|
|
:command="action.value"
|
|
:disabled="action.disabled"
|
|
>
|
|
{{ action.label }}
|
|
<div :class="$style.iconContainer">
|
|
<component
|
|
v-if="action.type === 'external-link'"
|
|
:is="$options.components.N8nIcon"
|
|
icon="external-link-alt"
|
|
size="xsmall"
|
|
color="text-base"
|
|
/>
|
|
</div>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</span>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import ElDropdown from 'element-ui/lib/dropdown';
|
|
import ElDropdownMenu from 'element-ui/lib/dropdown-menu';
|
|
import ElDropdownItem from 'element-ui/lib/dropdown-item';
|
|
import N8nIcon from '../N8nIcon';
|
|
import Vue from 'vue';
|
|
|
|
export default Vue.extend({
|
|
name: 'n8n-action-toggle',
|
|
components: {
|
|
ElDropdown, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
|
|
ElDropdownMenu, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
|
|
ElDropdownItem, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
|
|
N8nIcon,
|
|
},
|
|
props: {
|
|
actions: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
placement: {
|
|
type: String,
|
|
default: 'bottom',
|
|
validator: (value: string): boolean =>
|
|
['top', 'top-end', 'top-start', 'bottom', 'bottom-end', 'bottom-start'].includes(value),
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: 'medium',
|
|
validator: (value: string): boolean => ['mini', 'small', 'medium'].includes(value),
|
|
},
|
|
iconSize: {
|
|
type: String,
|
|
},
|
|
theme: {
|
|
type: String,
|
|
default: 'default',
|
|
validator: (value: string): boolean => ['default', 'dark'].includes(value),
|
|
},
|
|
},
|
|
methods: {
|
|
onCommand(value: string) {
|
|
this.$emit('action', value);
|
|
},
|
|
onVisibleChange(value: boolean) {
|
|
this.$emit('visible-change', value);
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
.container > * {
|
|
line-height: 1;
|
|
}
|
|
|
|
.button {
|
|
cursor: pointer;
|
|
padding: var(--spacing-4xs);
|
|
border-radius: var(--border-radius-base);
|
|
|
|
&:hover {
|
|
color: var(--color-primary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:focus {
|
|
color: var(--color-primary);
|
|
}
|
|
}
|
|
|
|
.dark {
|
|
color: var(--color-text-dark);
|
|
|
|
&:focus {
|
|
background-color: var(--color-background-xlight);
|
|
}
|
|
}
|
|
|
|
.iconContainer {
|
|
display: inline;
|
|
}
|
|
|
|
li:hover .iconContainer svg {
|
|
color: var(--color-primary-tint-1);
|
|
}
|
|
</style>
|