Input Time v1.0

<e-input-time
  id="timeInputWithOptions"
  value="-"
/>

<e-input-time
  id="timeInputWithLabel"
  label="timeInput with Label"
  value="-"
/>

<div class="input-example-field">
  <e-input-label
    id="timeInputWithExternalLabel"
    value="timeInput with Label"
  />
  <e-input-time
    id="timeInputWithExternalLabel"
    value="-"
  />
</div>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import { useDateFormat } from '@vueuse/core';

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

export type Props = EInput_Time;
const props = withDefaults(defineProps<Props>(), {
  value: new Date().toTimeString(),
  name: '',
  label: '',
  id: '',
  placeholder: '',
  required: false,
  disabled: false,
  meta: () => {
    return {
      disabled: false,
      min: '00:00',
      max: '23:59'
    };
  }
});

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

const input = ref<HTMLInputElement>();

const localValue = ref(new Date(props.value));
const timePattern = ref('HH:mm');

const localTime = useDateFormat(localValue, timePattern);

const minTime = computed(() => props.meta?.min || '00:00');
const maxTime = computed(() => props.meta?.max || '23:59');

const timeInputData = computed(() => {
  return {
    id: props.id,
    name: props.name,
    inputValue: localTime.value,
    disabled: isDisabled.value,
    placeholder: props.placeholder,
    type: 'time',
    required: props.required,
    pattern: timePattern.value,
    min: minTime.value,
    max: maxTime.value
  };
});

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

const stateClasses = computed(() => {
  return {
    required: props.required,
    disabled: isDisabled.value
  };
});

function setLocalValue(timeString: string) {
  const currentDate = new Date();

  const isValidTime = timeString.match(timeStringRegex);
  const time = isValidTime
    ? timeString.split(':')
    : [`${currentDate.getUTCHours()}`, `${currentDate.getUTCMinutes()}`];

  const newHours = Number.parseInt(time[0]);
  const newMinutes = Number.parseInt(time[1]);
  localValue.value.setUTCHours(newHours, newMinutes, 0);
}

function setLocalTime(event: InputEvent) {
  const target = event.target as HTMLInputElement;
  const newValue = target.value;

  const isValid = target.checkValidity();

  if (isValid && Date.parse(newValue)) {
    setLocalValue(target.value);
    emitUpdate();
  }
}

function updateLocalValue(newValue: string) {
  localValue.value = new Date(newValue);
  localValue.value.setSeconds(0);
}

const emitUpdate = () => {
  const newValue = localValue.value;

  const hours = newValue.getUTCHours();
  const minutes = newValue.getUTCMinutes();
  const UTCTime = `${hours}:${minutes}`;

  emit('update:value', UTCTime);
};

watch(
  () => props.value,
  (newValue, oldValue) => {
    if (Date.parse(newValue) && oldValue !== newValue) {
      updateLocalValue(newValue);
    }
  },
  {
    immediate: true
  }
);
</script>

<template>
  <input
    :id="timeInputData.id"
    ref="input"
    class="e-input-time"
    :classes="stateClasses"
    :name="timeInputData.name"
    :value="timeInputData.inputValue"
    :disabled="timeInputData.disabled"
    :placeholder="timeInputData.placeholder"
    :type="timeInputData.type"
    :required="timeInputData.required"
    :pattern="timeInputData.pattern"
    :min="timeInputData.min"
    :max="timeInputData.max"
    @input="setLocalTime"
    @blur="emit('blur', $event)"
    @keyup.enter="emit('keyup.enter', $event)"
  />
</template>

<style scoped lang="scss">
.e-input-time {
  background-color: var(--e-input-background);
  border: none;
  border-radius: 15px;
  color: var(--e-body-font-color);
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  font: normal normal normal 16px/20px var(--e-body-font-family);
  gap: 10px;
  height: 50px;
  padding: 15px;

  &::placeholder {
    color: var(--e-gray-300);
  }

  &:focus {
    background-color: var(--e-input-focus-background);
  }

  &:user-invalid,
  &:out-of-range {
    color: var(--e-red);
  }

  &:disabled {
    color: var(--e-disabled);

    ::-webkit-calendar-picker-indicator {
      color: var(--e-disabled);
    }
  }

  &[required] {
    + label::after {
      content: '*';
      padding-left: 2px;
      color: var(--e-required);
      font-weight: bold;
    }
  }
}
</style>