Date Displays v1.0

<e-date-display />

<e-date-display
  :modelValue='new Date("1966-02-06T00:00:00.000Z")'
/>

<script lang="ts" setup>
import { computed } from 'vue';

import { useI18n } from 'vue-i18n';

import type { CardColors } from 'types/dashboard/cardColors';
import { getIconColor, getIconHoverColor } from 'utils/iconUtils';

import EIcon from '../e-icon/e-icon.vue';

export type Props = {
  modelValue?: Date | string;
  copyEnabled?: boolean;
  colorStyle?: CardColors;
};
defineOptions({
  inheritAttrs: false,
  customOptions: {}
});
const props = withDefaults(defineProps<Props>(), {
  modelValue: () => {
    return new Date();
  },
  copyEnabled: false,
  colorStyle: () => {
    return 'default';
  }
});

const { locale, t } = useI18n({ useScope: 'global' });

function CopyValue(textValue: string) {
  navigator.clipboard.writeText(textValue);
}

const iconColor = computed(() => {
  return getIconColor(props.colorStyle);
});

const iconColorHover = computed(() => {
  return getIconHoverColor(props.colorStyle);
});

const copySpanIconStyle = computed(() => {
  return {
    key: `copy-span-${props.colorStyle}`,
    state: {
      default: {
        colors: [iconColor.value],
        fillColors: [],
        strokeColors: []
      },
      disabled: {
        colors: ['var(--e-disabled)'],
        fillColors: [],
        strokeColors: []
      },
      hovered: {
        colors: [iconColorHover.value],
        fillColors: [],
        strokeColors: []
      }
    }
  };
});

const iconStyle = computed(() => {
  return `copy-span-${props.colorStyle}`;
});

const formattedDate = computed(() => {
  if (!props.modelValue) {
    return '-';
  }
  return new Date(props.modelValue).toLocaleDateString(locale.value);
});
</script>

<template>
  <div class="e-date-display">
    <span
      :aria-label="formattedDate"
      :title="formattedDate"
      v-text="formattedDate"
    />
    <e-icon
      v-if="modelValue && copyEnabled"
      class="copy-icon"
      :icon="['copy']"
      :custom-style="copySpanIconStyle"
      focusable
      :style-key="iconStyle"
      :aria-label="t('functions.copyX', [modelValue.toString()])"
      @click="CopyValue(modelValue.toString())"
    />
  </div>
</template>

<style scoped lang="scss">
$icon-size: 16px;

.e-date-display {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: left;
  font-size: 14px;
  gap: 4px;
  width: 100%;

  span {
    white-space: nowrap;
  }

  small {
    margin-top: 3px;
    padding-right: 10px;
    white-space: nowrap;
  }

  span:not(:first-child):not(:last-child) {
    transition: all ease-in-out 50ms;
    margin-left: 1rem;

    &:hover {
      margin-left: 1.5rem;
      font-size: 120%;
    }
  }

  > .copy-icon {
    flex: 0 0 auto;
    align-self: center;
    width: $icon-size;
    height: $icon-size;
    visibility: hidden;
  }

  &:hover {
    > svg {
      visibility: visible;
    }
  }
}
</style>