mirror of
https://github.com/n8n-io/n8n.git
synced 2025-02-02 07:01:30 -08:00
Make TagsDropdown component more flexible and reusable
• Make createTag prop optional • Add eventBus prop to TagsDropdown • Update TagsInput to use TagsDropdown • Remove unnecessary class in TagsInput • Adjust prop types and imports
This commit is contained in:
parent
4155ae8d5a
commit
26d7fa7378
|
@ -12,11 +12,11 @@ import { useToast } from '@/composables/useToast';
|
|||
interface TagsDropdownProps {
|
||||
placeholder: string;
|
||||
modelValue: string[];
|
||||
createTag: (name: string) => Promise<ITag>;
|
||||
eventBus: EventBus | null;
|
||||
allTags: ITag[];
|
||||
isLoading: boolean;
|
||||
tagsById: Record<string, ITag>;
|
||||
createTag?: (name: string) => Promise<ITag>;
|
||||
}
|
||||
|
||||
const i18n = useI18n();
|
||||
|
@ -109,6 +109,8 @@ function filterOptions(value = '') {
|
|||
}
|
||||
|
||||
async function onCreate() {
|
||||
if (!props.createTag) return;
|
||||
|
||||
const name = filter.value;
|
||||
try {
|
||||
const newTag = await props.createTag(name);
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import type { ITag } from '@/Interface';
|
||||
import { createEventBus } from 'n8n-design-system';
|
||||
import { computed } from 'vue';
|
||||
|
||||
export interface TagsInputProps {
|
||||
|
@ -25,6 +26,7 @@ const props = withDefaults(defineProps<TagsInputProps>(), {
|
|||
|
||||
const emit = defineEmits<{ 'update:modelValue': [value: TagsInputProps['modelValue']] }>();
|
||||
|
||||
const tagsEventBus = createEventBus();
|
||||
const getTagName = computed(() => (tagId: string) => {
|
||||
return props.tagsById[tagId]?.name ?? '';
|
||||
});
|
||||
|
@ -60,8 +62,8 @@ function updateTags(tags: string[]) {
|
|||
:all-tags="allTags"
|
||||
:is-loading="isLoading"
|
||||
:tags-by-id="tagsById"
|
||||
class="tags-edit"
|
||||
data-test-id="workflow-tags-dropdown"
|
||||
:event-bus="tagsEventBus"
|
||||
@update:model-value="updateTags"
|
||||
@esc="cancelEditing('tags')"
|
||||
@blur="saveChanges('tags')"
|
||||
|
|
Loading…
Reference in a new issue