Input Radio v1.0

The <e-input-radio> component is a component that can be used for .

Usage

An e-input-radio has attributes that must be provided,

<e-input-radio
  id=""
  label=""
  :options=""
  :meta=""
/>

Attributes

id | Type: String | required
label | Type: String | Default: ''
options | Type: Array | Default: radioOptions

const radioOptions = [
  {
    id: 0,
    text: 'Example Option 1',
    value: 'exampleOption1',
    description: '',
    disabled: false
  },
  {
    id: 1,
    text: 'Example Option 2',
    value: 'exampleOption2',
    description: '',
    disabled: false
  }
]

Examples

Below a few interactive examples of e-input-radio can be found.

Default

<e-input-radio
  id='radioInputWithOptions'
  :value="'exampleOption1'"
  :options='radioOptions'
/>

<e-input-radio
  id='radioInputDefault'
  :value="'exampleOption1'"
  :meta='{
    options: radioOptions
  }'
/>

Example Option 1

Example Option 2

No options, options='[]'

<e-input-radio
  id='radioInputNoOptions'
  :value="'noOptionsExample'"
  :options='[]'
/>

<e-input-radio
  id='radioInputNoOptions'
  :value="'noOptionsExample'"
  :meta='{
    options: []
  }'
/>

no options for input.

Labelled, label='radioInput with Label'

<div class="input-example-field">
  <e-input-label
    :id="'radioInputWithLabel'"
    :value="'radioInput with Label'"
  />
  <e-input-radio
    id="radioInputWithLabel"
    :label="'radioInput with Label'"
    :value="'exampleOption1'"
    :options="radioOptions"
  />
</div>

radioInput with Label

Example Option 1

Example Option 2

Source Code

e-input-radio.vue

<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import { isEmpty } from 'lodash-es';

import { EFormFieldOptionType } from 'types/form/EFormFieldOptionType';

import { EInput_Radio } from 'types/e-input/interfaces/EInput_Radio';

export type Props = EInput_Radio;
const props = withDefaults(defineProps<Props>(), {
  id: '',
  showLabel: true,
  required: false,
  disabled: false,
  options: () => {
    return [] as EFormFieldOptionType[];
  },
  meta: () => {
    return {
      disabled: false,
      options: [] as EFormFieldOptionType[]
    };
  }
});

const emit = defineEmits<{
  (e: 'blur', event: FocusEvent): void;
  (e: 'keyup.enter', event: KeyboardEvent): void;
  (e: 'update:value', value: string): void;
  (e: 'cancel'): void;
}>();

const isDisabled = computed(() => props.disabled ?? props.meta?.disabled);

const activeOption = ref(props.value);

const inputOptions = computed(() => {
  let result = [] as EFormFieldOptionType[];

  if (!isEmpty(props.options)) {
    result = props.options;
  } else if (!isEmpty(props.meta?.options)) {
    result = props.meta.options as EFormFieldOptionType[];
  }

  return result;
});

const noOptions = computed(() => isEmpty(inputOptions.value));

const emitUpdate = (option: EFormFieldOptionType) => {
  activeOption.value = option.value;

  emit('update:value', option.value);
};

watch(
  () => props.value,
  newValue => {
    if (newValue) {
      activeOption.value = newValue;
    }
  },
  {
    immediate: true
  }
);
</script>

<template>
  <div class="e-radio-input">
    <div class="input-container">
      <span
        v-if="noOptions"
        v-text="'no options for input.'"
      />

      <div
        v-for="(option, oIndex) in inputOptions"
        :key="oIndex"
        class="option"
        :class="{
          disabled: option.disabled || isDisabled
        }"
      >
        <input
          :id="`${id}-${oIndex}`"
          v-model="activeOption"
          type="radio"
          :value="option.value"
          :checked="activeOption === option.value"
          :disabled="option.disabled || isDisabled"
          :name="id"
          @change="emitUpdate(option)"
        />
        <label
          :for="`${id}-${oIndex}`"
          :title="option.text"
          v-text="option.text"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.e-radio-input {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border: none;

  .input-label {
    cursor: text;
    width: 40%;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0;
    align-self: flex-start;
  }

  .input-container {
    align-items: flex-start;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 0 0 0 10px;
    gap: 5px;

    .option {
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;

      input,
      label {
        margin: 0;
      }

      &.disabled {
        color: var(--e-disabled);
      }
    }
  }
}
</style>