Skip to content
Snippets Groups Projects
FormGroup.vue 1.96 KiB
Newer Older
  • Learn to ignore specific revisions
  • <template>
      <div class="form-group tw-block" :class="formGroupClass">
    
          :for="id"
          class="tw-text-gray-500 tw-font-medium tw-pt-1 tw-flex tw-gap-2 tw-items-center"
        >
          <span>{{ label }}</span>
          <button v-if="withEditButton" type="button" class="btn btn-sm tw-p-0" @click="emit('edit')">
            <icon-system-uicons-pen />
          </button>
        </label>
    
        <div class="tw-flex tw-flex-col">
          <slot v-bind="controlAttributes" />
    
          <div
            v-if="hasErrors"
            :id="errorsId"
            class="invalid-feedback"
            :class="{ 'tw-block': hasErrors }"
          >
    
            <template v-for="(error, index) in errorList" :key="index">
    
              <p class="last:tw-mb-0">
                {{
                  error.code
                    ? t(`error.${error.code}`)
                    : error.message
                    ? error.message
                    : t('error.unknown')
                }}
              </p>
    
            </template>
          </div>
        </div>
      </div>
    </template>
    
    <script lang="ts" setup>
    import { computed, inject } from 'vue'
    import { useId } from '@/util'
    import { useI18n } from '@/i18n'
    
    
    defineOptions({ compatConfig: { MODE: 3 } })
    
    
    type Error = {
    
    }
    
    const props = defineProps<{
    
      customControl?: boolean
    
      errors?: undefined | (Error | undefined | null)[]
    
      withEditButton?: boolean
    }>()
    const emit = defineEmits<{
      edit: []
    
    }>()
    
    const { t } = useI18n()
    const formGroupClass = inject('formGroupClass', undefined)
    const id = useId('form-group-control')
    const errorsId = useId('form-group-errors')
    
    const errorList = computed<Error[]>(() => (props.errors ?? []).filter((e): e is Error => !!e))
    
    const hasErrors = computed(() => errorList.value.length > 0)
    const controlAttributes = computed(() => ({
      class: [
        'tw-order-first',
        { 'is-invalid': hasErrors.value, 'form-control': !props.customControl },
      ],
      'aria-describedby': hasErrors.value ? errorsId.value : '',
      id: id.value,
    }))
    </script>