<!-- 
    filename: GradientText.vue
    author: liubin
    date: 2024-04-24 16:33:25
    description: 
-->

<template>
  <svg :height="size + 8" width="100%">
    <defs>
      <linearGradient id="smoke-text" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color: #00fff4; stop-opacity: 1" />
        <stop offset="100%" style="stop-color: #37bdfe; stop-opacity: 1" />
      </linearGradient>
    </defs>
    <text
      x="0"
      :y="size"
      fill="url(#smoke-text)"
      :style="{
        fontSize: `${size}px`,
        letterSpacing: spacing || '2px',
        fontFamily: 'Calibri, Verdana, sans-serif',
      }"
    >
      {{ text | numberFilter }}
    </text>
  </svg>
</template>

<script>
export default {
  name: "GradientText",
  components: {},
  props: {
    text: {
      type: String,
      default: "Test",
    },
    spacing: {
      type: String,
      default: "1px",
    },
    size: {
      type: Number,
      default: 24,
    },
  },
  filters: {
    numberFilter(value) {
      if (value != null && !isNaN(parseInt(value))) {
        return parseInt(value).toLocaleString();
      } else {
        return value;
      }
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped lang="scss"></style>
