Componente

Introducción

Este componente renderiza un checkbox que por defecto tiene valor false.

Uso

Es importante recalcar el nombre del componente IrCheckbox a nivel de código, ya que este deberá usarse para llamar al componente para renderizarlo, ya sea individiualmente o en un IrForm.

Ejemplo

Propiedades

Propiedad	Tipo	Default	Descripción
readonly	Boolean	false	El valor readonly = true, establecerá al campo como solo lectura.
hint	String	``	Establece un texto de ayuda para el campo.
value	Boolean	false	El valor por defecto determina si el checkbox está inicialmente activo o no.
required	Boolean	false	En valor true, define que el componente debe ser valorizado para ser válido.
true-value	any	true	Determina el valor cuando el checkbox está seleccionado.
false-value	any	false	Determina el valor cuando el checkbox no está seleccionado.

Código fuente

<template>
  <ir-checkbox-bone v-bind="$attrs">
    <div
      ref="checkbox"
      slot-scope="{
        falseValue,
        rules,
        manageMessage,
        label,
        linked,
        comportamientos,
        comportamientosPositions,
        id_resolver
      }"
    >
      <v-checkbox
        :ref="irCheckboxRef"
        v-model="componentValue"
        :label="label"
        :name="`chBox-${nameRandom}`"
        :class="checkboxClasses"
        :style="
          isNewDesign ? 'margin: 0px !important; padding: 0px !important;' : ''
        "
        :false-value="falseValue"
        class="align-center"
        v-bind="getFilteredProps"
        :messages="manageMessage"
        :rules="rules"
        :hide-details="hideDetails"
        @change="(e) => updateValue(e, linked)"
        v-on="$listeners"
      >
        <template
          v-for="(position, k) in comportamientosPositions"
          #[position]
        >
          <div
            :key="'slot-comportamientos-cb-' + k"
            class="d-flex align-center"
            style="gap: 10px"
          >
            <template v-for="(comportamiento, i) in comportamientos">
              <ir-comportamiento
                v-if="
                  (typeof comportamiento.visible === 'undefined' ||
                    comportamiento.visible) &&
                  comportamiento.position === position
                "
                :key="'comportamiento-checkbox-' + i"
                :value="value"
                v-bind="comportamiento"
                :father-component-name="checkboxComponentName"
                :current_id_resolver="id_resolver"
                @changeFieldValue="(e) => updateValue(e, linked)"
              />
            </template>
          </div>
        </template>
      </v-checkbox>
    </div>
    <template #label>
      <label :for="`chBox-${nameRandom}`">{{ label }}</label>
    </template>
  </ir-checkbox-bone>
</template>

<script>
import IrCheckboxBone from './IrCheckboxBone.vue'
import { checkboxComponentName } from '../../../constants'
import focusAndScrollMixin from '../../../mixins/focusAndScroll'
import { filterProps } from '../../../helpers/filterProps'
export default {
  name: checkboxComponentName,
  components: {
    IrCheckboxBone
  },
  mixins: [focusAndScrollMixin],
  inheritAttrs: false,
  props: {
    value: {
      type: undefined,
      required: true
    },
    hideDetails: {
      type: Boolean,
      default: true
    },
    isFocused: {
      type: Boolean,
      default: false
    },
    isNewDesign: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      irCheckboxRef: checkboxComponentName,
      checkboxComponentName: checkboxComponentName,
      nameRandom: Math.floor(Math.random() * 100000),
      componentValue: this.value,
      otherProps: this.attrs
    }
  },
  computed: {
    getFilteredProps() {
      return filterProps(this.$refs[this.irCheckboxRef], this.handledAttrs, [
        'data-cy'
      ])
    },
    checkboxClasses() {
      let checkedValue =
        typeof this.$attrs['true-value'] !== 'undefined'
          ? this.$attrs['true-value']
          : true
      if (this.componentValue === checkedValue) {
        return 'selected'
      }
      return ''
    },
    handledAttrs() {
      let aux = { ...this.otherProps, ...this.$attrs }
      delete aux.value
      delete aux.falseValue
      delete aux.label
      delete aux.required
      return aux
    }
  },
  watch: {
    value(isValue) {
      // Sincroniza el valor del componente de vuetify con el valor de la propiedad
      this.componentValue = isValue
      this.$emit('input', isValue)
    }
  },
  mounted() {
    if (this.isFocused) {
      let element = this.$refs.checkbox.querySelector('input')
      this.focusAndScroll(element)
    }
    this.otherProps = { ...this.$attrs }
  },
  methods: {
    updateValue(newValue, linked) {
      this.$emit('input', newValue)
      this.$nextTick(() => {
        if (linked) this.$emit('change-linked-value')
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>