Input Date v1.0

<e-input-date
  id="dateInputWithOptions"
  value="-"
/>

<e-input-date
  id="dateInputWithLabel"
  label="dateInput with Label"
  value="-"
/>

<div class="input-example-field">
  <e-input-label
    id="dateInputWithExternalLabel"
    value="dateInput with Label"
  />
  <e-input-date
    id="dateInputWithExternalLabel"
    value="-"
  />
</div>

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

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

export type Props = EInput_Date;
const props = withDefaults(defineProps<Props>(), {
  value: new Date().toDateString(),
  name: '',
  label: '',
  id: '',
  placeholder: '',
  required: false,
  disabled: false,
  meta: () => {
    return {
      disabled: false,
      min: '1970-01-01',
      max: '9999-12-31'
    };
  }
});

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());
const datePattern = ref('YYYY-MM-DD');

const localDate = useDateFormat(localValue.value, datePattern.value);

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

const minDate = computed(() => props.meta?.min || '1970-01-01');
const maxDate = computed(() => props.meta?.max || '9999-12-31');

const dateInputData = computed(() => {
  return {
    id: props.id,
    name: props.name,
    inputValue: localDate.value,
    disabled: isDisabled.value,
    placeholder: props.placeholder,
    type: 'date',
    pattern: datePattern.value,
    required: props.required,
    min: minDate.value,
    max: maxDate.value
  };
});

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

async function setLocalDate(event: InputEvent) {
  const target = event.target as HTMLInputElement;
  const isValid = target.checkValidity();

  if (isValid) {
    updateLocalValue(target.valueAsDate.toString());

    emitUpdate();
  }
}

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

function emitUpdate() {
  const dateString = localValue.value.toDateString();

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

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

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

<style scoped lang="scss">
.e-input-date {
  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);
  }

  &:not(:disabled) {
    cursor: pointer;
  }

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

  &:disabled {
    color: var(--e-disabled);
    cursor: not-allowed;
    user-input: none;

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

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