feat(VSparkline): Initial component migration

[blalan05]

<template>
  <v-container fluid>
    <v-sparkline
      :fill="fill"
      :gradient="selectedGradient"
      :line-width="width"
      :padding="padding"
      :smooth="radius || false"
      :model-value="value"
      auto-draw
      type="bar"
    />
    <v-sparkline
      :fill="fill"
      :gradient="selectedGradient"
      :line-width="width"
      :padding="padding"
      :smooth="radius || false"
      :model-value="value"
      auto-draw
    />

    <v-divider />

    <v-row>
      <v-col
        cols="12"
        md="6"
      >
        <v-row
          class="fill-height"
          align="center"
        >
          <v-item-group
            v-model="selectedGradient"
            mandatory
          >
            <v-row>
              <v-item
                v-for="(gradient, i) in gradients"
                :key="i"
                v-slot="{ active, toggle }"
                :value="gradient"
              >
                <v-card
                  :style="{
                    background: gradient.length > 1
                      ? `linear-gradient(180deg, ${gradient})`
                      : gradient[0],
                    border: '2px solid',
                    borderColor: active ? '#222' : 'white'
                  }"
                  width="30"
                  height="30"
                  class="me-2"
                  @click="toggle"
                />
              </v-item>
            </v-row>
          </v-item-group>
        </v-row>
      </v-col>

      <v-col
        cols="12"
        md="6"
      >
        <v-slider
          v-model="width"
          label="Width"
          min="0.1"
          max="10"
          step="0.1"
          thumb-label
        />
      </v-col>

      <v-col cols="6">
        <v-row
          class="fill-height"
          align="center"
        >
          <v-switch
            v-model="fill"
            label="Filled"
          />
        </v-row>
      </v-col>

      <v-col
        cols="12"
        md="6"
      >
        <v-slider
          v-model="radius"
          label="Radius"
          min="0"
          max="25"
          thumb-label
        />
      </v-col>

      <v-col
        cols="12"
        md="6"
        offset-md="6"
      >
        <v-slider
          v-model="padding"
          label="Padding"
          min="0"
          max="25"
          thumb-label
        />
      </v-col>
    </v-row>
  </v-container>
</template>
<script setup>
  import { ref } from 'vue'

  const gradients = [
    ['#222'],
    ['#42b3f4'],
    ['red', 'orange', 'yellow'],
    ['purple', 'violet'],
    ['#00c6ff', '#F0F', '#FF0'],
    ['#f72047', '#ffd200', '#1feaea'],
  ]
  const fill = ref(true)
  const selectedGradient = ref(gradients[4])
  const padding = ref(8)
  const radius = ref(10)
  const value = ref([0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0])
  const width = ref(2)
</script>