File size: 2,622 Bytes
da96562 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | <!--
Matomo - free/libre analytics platform
@link https://matomo.org
@license https://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
-->
<template>
<div class="fieldArray form-group">
<div
class="fieldArrayTable multiple valign-wrapper"
v-for="(item, index) in modelValue"
:class="{[`fieldArrayTable${index}`]: true}"
:key="index"
>
<div
v-if="field.uiControl"
class="fieldUiControl"
>
<Field
:full-width="true"
:model-value="item"
:options="field.availableValues"
@update:modelValue="onEntryChange($event, index)"
:model-modifiers="field.modelModifiers"
:placeholder="' '"
:uicontrol="field.uiControl"
:title="field.title"
:name="`${name}-${index}`"
:id="`${id}-${index}`"
:template-file="field.templateFile"
:component="field.component"
>
</Field>
</div>
<span
@click="removeEntry(index)"
class="icon-minus valign"
v-show="index + 1 !== modelValue.length"
:title="translate('General_Remove')"
/>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import useExternalPluginComponent from '../useExternalPluginComponent';
// async since this is a recursive component
const Field = useExternalPluginComponent('CorePluginsAdmin', 'Field');
export default defineComponent({
props: {
modelValue: Array,
name: String,
id: String,
field: Object,
rows: String,
},
components: {
Field,
},
emits: ['update:modelValue'],
watch: {
modelValue(newValue) {
this.checkEmptyModelValue(newValue);
},
},
mounted() {
this.checkEmptyModelValue(this.modelValue);
},
methods: {
checkEmptyModelValue(newValue?: unknown[]) {
// make sure there is always an empty new value
if ((!newValue || !newValue.length || newValue.slice(-1)[0] !== '')
&& (!this.rows || (this.modelValue || []).length < parseInt(this.rows, 10))) {
this.$emit('update:modelValue', [...(newValue || []), '']);
}
},
onEntryChange(newValue: unknown, index: number) {
const newArrayValue = [...(this.modelValue || [])];
newArrayValue[index] = newValue;
this.$emit('update:modelValue', newArrayValue);
},
removeEntry(index: number) {
if (index > -1 && this.modelValue) {
const newValue = this.modelValue.filter((x, i) => i !== index);
this.$emit('update:modelValue', newValue);
}
},
},
});
</script>
|