<template>
  <div :style="containerStyle" :class="containerClass"></div>
</template>

<script>
export default {
  name: 'NvSkeleton',
  props: {
    shape: {
      type: String,
      default: 'rectangle'
    },
    size: {
      type: String,
      default: null
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '1rem'
    },
    borderRadius: {
      type: String,
      default: '0.25rem'
    },
    animation: {
      type: String,
      default: 'wave'
    }
  },
  computed: {
    containerClass() {
      return ['nv-skeleton', {
        'nv-skeleton-circle': this.shape === 'circle',
        'nv-skeleton-none': this.animation === 'none'
      }];
    },
    containerStyle() {
      if (this.size)
        return {width: this.size, height: this.size, borderRadius: this.borderRadius};
      else
        return {width: this.width, height: this.height, borderRadius: this.borderRadius};
    }
  }
}
</script>

<style lang="scss">
.nv-skeleton {
  @apply relative overflow-hidden bg-gray-200;
  //background-color: #dee2e6;

  &:after {
    content: "";
    animation: nv-skeleton-animation 1.2s infinite;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(-100%);
    z-index: 1;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  }

  &.nv-skeleton-circle {
    border-radius: 50% !important;
    flex-shrink: 0;
  }

  &.nv-skeleton-none::after {
    animation: none;
  }
}

@keyframes nv-skeleton-animation {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
</style>
