Mirrors/wg-portal
1
0
Fork 0
mirror of https://github.com/h44z/wg-portal.git synced 2025-10-06 00:16:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

change tagged-input-field component, allow to paste multiple values (#365)

Browse Source
This commit is contained in:
Christoph
2025-04-19 17:43:51 +02:00
parent 6681dfa96f
commit 1d94f6baaf
7 changed files with 304 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/PeerMultiCreateModal.vue
View File

@@ -5,7 +5,7 @@ import {interfaceStore} from "@/stores/interfaces";
import {computed, ref} from "vue";
import { useI18n } from 'vue-i18n';
import { notify } from "@kyvg/vue3-notification";
import Vue3TagsInput from "vue3-tags-input";
import { VueTagsInput } from '@vojtechlanka/vue-tags-input';
import { freshInterface } from '@/helpers/models';
const { t } = useI18n()
@@ -36,6 +36,7 @@ function freshForm() {
}
}
const currentTag = ref("")
const formData = ref(freshForm())
const title = computed(() => {
@@ -55,7 +56,7 @@ function close() {
}
function handleChangeUserIdentifiers(tags) {
formData.value.Identifiers = tags
formData.value.Identifiers = tags.map(tag => tag.text)
}
async function save() {
@@ -89,10 +90,14 @@ async function save() {
<fieldset>
<div class="form-group">
<label class="form-label mt-4">{{ $t('modals.peer-multi-create.identifiers.label') }}</label>
<vue3-tags-input class="form-control" :tags="formData.Identifiers"
:placeholder="$t('modals.peer-multi-create.identifiers.placeholder')"
:add-tag-on-keys="[13, 188, 32, 9]"
@on-tags-changed="handleChangeUserIdentifiers"/>
<vue-tags-input class="form-control" v-model="currentTag"
:tags="formData.Identifiers.map(str => ({ text: str }))"
:placeholder="$t('modals.peer-multi-create.identifiers.placeholder')"
:add-on-key="[13, 188, 32, 9]"
:save-on-key="[13, 188, 32, 9]"
:allow-edit-tags="true"
:separators="[',', ';', ' ']"
@tags-changed="handleChangeUserIdentifiers"/>
<small class="form-text text-muted">{{ $t('modals.peer-multi-create.identifiers.description') }}</small>
</div>
<div class="form-group">