| |
| |
| |
| |
| |
| |
|
|
| <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'; |
| |
| |
| 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[]) { |
| |
| 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> |
|
|
