plugins/CorePluginsAdmin/vue/src/Field/Field.vue

<!--
  Matomo - free/libre analytics platform

  @link    https://matomo.org
  @license https://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
-->

<template>
  <FormField
    :form-field="field"
    :model-value="modelValue"
    @update:model-value="onChange($event)"
    @check:is-valid="onCheckIsValid($event)"
    :model-modifiers="modelModifiers"
  >
    <template v-slot:inline-help>
      <slot name="inline-help"></slot>
    </template>
  </FormField>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import FormField from '../FormField/FormField.vue';

const UI_CONTROLS_TO_TYPE: Record<string, string> = {
  multiselect: 'array',
  checkbox: 'boolean',
  site: 'object',
  number: 'integer',
};

export default defineComponent({
  props: {
    modelValue: null,
    modelModifiers: Object,
    errorMessage: String,
    uicontrol: String,
    name: String,
    id: {
      type: String,
      default: () => '',
    },
    defaultValue: null,
    options: [Object, Array],
    description: String,
    introduction: String,
    title: String,
    searchOnGroup: Boolean,
    inlineHelp: [String, Object],
    inlineHelpBind: Object,
    disabled: Boolean,
    uiControlAttributes: {
      type: Object,
      default: () => ({}),
    },
    uiControlOptions: {
      type: Object,
      default: () => ({}),
    },
    autocomplete: String,
    varType: String,
    autofocus: Boolean,
    tabindex: Number,
    fullWidth: Boolean,
    maxlength: Number,
    required: Boolean,
    placeholder: String,
    rows: Number,
    min: Number,
    max: Number,
    component: null,
    extraMetadata: {
      type: Object,
      default: () => ({}),
    },
  },
  emits: ['update:modelValue', 'check:isValid'],
  components: {
    FormField,
  },
  computed: {
    type() {
      if (this.varType) {
        return this.varType;
      }

      const uicontrol = this.uicontrol as string;
      if (uicontrol && UI_CONTROLS_TO_TYPE[uicontrol]) {
        return UI_CONTROLS_TO_TYPE[uicontrol];
      }

      return 'string';
    },
    field() {
      return {
        uiControl: this.uicontrol,
        type: this.type,
        name: this.name,
        id: this.id ? this.id : this.name,
        defaultValue: this.defaultValue,
        availableValues: this.options,
        description: this.description,
        introduction: this.introduction,
        inlineHelp: this.inlineHelp,
        inlineHelpBind: this.inlineHelpBind,
        errorMessage: this.errorMessage,
        title: this.title,
        searchOnGroup: this.searchOnGroup,
        component: this.component,
        uiControlAttributes: {
          ...this.uiControlAttributes,
          disabled: this.disabled,
          autocomplete: this.autocomplete,
          tabindex: this.tabindex,
          autofocus: this.autofocus,
          rows: this.rows,
          required: this.required,
          maxlength: this.maxlength,
          placeholder: this.placeholder,
          min: this.min,
          max: this.max,
        },
        fullWidth: this.fullWidth,
        uiControlOptions: this.uiControlOptions,
        extraMetadata: this.extraMetadata,
      };
    },
  },
  methods: {
    onChange(newValue: unknown) {
      this.$emit('update:modelValue', newValue);
    },
    onCheckIsValid(isValid: boolean) {
      this.$emit('check:isValid', isValid);
    },
  },
});
</script>