DigitalConsumer.FixMyGlass/src/ux-components/list-button-horizontal/list-button-horizontal.vue

<template>
  <div 
    class="list-group list-button-horizontal d-flex flex-column w-100 mb-2" 
    @mouseup="handleClick(value)" 
    @keyup.space="handleClick(value)"
  >
    <input 
      :type="isMultiSelect ? 'checkbox' : 'radio'" 
      :id="buttonID" 
      :name="groupName" 
      :value="buttonID" 
      :aria-required="isRequired" 
      :data-focus-target="groupName" 
      v-model="modelValue" 
    />
    <label 
      tabindex="-1" 
      :for="buttonID" 
      :aria-labelledby="buttonID" 
      class="d-flex flex-column justify-content-center py-3 px-4"
    >
      <span 
        class="m-0" 
        :class="textPosition"
      >
        {{buttonLabel}}
      </span>
      <span 
        v-if="buttonLabelSubCopy" 
        class="m-0 small" 
        :class="textPosition"
      >
        {{buttonLabelSubCopy}}
      </span>
      <span v-if="screenReaderOnlyText" class="sr-only">
        {{screenReaderOnlyText}}
      </span>
      <loader 
        v-if="isLoaderDisplayed && !isMultiSelect" 
        :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" 
        :class="[loaderColor, loaderPosition]" 
      />
    </label>
  </div>
</template>

<script>
import { toRefs } from "vue";
import { useField } from "vee-validate";
import loader from "@/ux-components/loader/loader";

export default {
  name: "listButtonHorizontal",
  props: {
    isMultiSelect: Boolean,
    groupName: String,
    buttonID: String,
    buttonLabel: String,
    buttonLabelSubCopy: String,
    screenReaderOnlyText: String,
    textPosition: String,
    loaderEnabled: Boolean,
    loaderColor: String,
    loaderPosition: String,
    sizeInRem: [Number, String],
    isRequired: Boolean,
    value: {
      // Field initial value
      type: String,
      default: "",
    },
    modelValue: false,
  },
  data() {
    return {
      isLoaderDisplayed: false,
    };
  },
  methods: {
    displayLoader() {
      this.isLoaderDisplayed = true;
    },
    handleClick(value) {
      if (this.loaderEnabled) {
        this.displayLoader();
      }
      this.handleChange(value);
    },
  },
  watch: {
    modelValue(){
      this.$emit('isChecked', this.modelValue);
    }
  },
  components: {
    loader,
  },
  setup(props) {
    const { groupName, value } = toRefs(props);
    const inputType = props.isMultiSelect ? "checkbox" : "radio";
    const { checked, handleChange, errorMessage } = useField(
      groupName,
      undefined,
      {
        type: inputType,
        checkedValue: value,
      }
    );
    return {
      checked,
      handleChange,
      errorMessage,
    };
  },
};
</script>

<style lang="scss">
.list-button-horizontal {
  input[type="radio"],
  input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    &:focus-visible + label {
      box-shadow: 0 0 0 2px $blue;
    }
    &:focus + label {
      box-shadow: 0 0 0 2px $blue;
    }
    &:checked + label {
      background: $blue-100;
      box-shadow: 0 0 0 1px $blue;
    }
    &:checked + label p:first-child {
      font-weight: 500;
    }
  }
  label {
    position: relative;
    background: $white;
    transition: all 150ms linear;
    border: 1px solid $gray-500;
    border-radius: 0;
    width: 100%;
    &:hover {
      box-shadow: 0 0 0 4px $blue-100;
      cursor: pointer;
      z-index: 2;
    }
    + p {
      display: none;
    }
  }
  &:first-of-type {
    label {
      border-bottom-left-radius: 0.5rem;
      border-top-left-radius: 0.5rem;
    }
  }
  &:last-of-type {
    label {
      border-bottom-right-radius: 0.5rem;
      border-top-right-radius: 0.5rem;
    }
  }
}
</style>