Add Gradient Support

[kerimovok]

Here's a sample message for a pull request to add the gradient support feature to the qrcode.vue component:

---

Add Gradient Support to QRCodeVue Component

Summary

This PR introduces gradient support for the qrcode.vue component, allowing users to generate QR codes with gradient fills. The enhancement includes new props to configure gradient types and colors, applicable to both SVG and Canvas renderings.

Changes

1. New Props:

   • gradient: Boolean to enable/disable gradient fill.
   • gradientType: Type of gradient (linear or radial).
   • gradientStartColor: Start color of the gradient.
   • gradientEndColor: End color of the gradient.

2. SVG Renderer:

   • Added gradient definitions in the SVG output.
   • Applied gradient fill to the QR code path.

3. Canvas Renderer:

   • Created gradient objects using createLinearGradient or createRadialGradient.
   • Applied gradient fill to the QR code rectangles.

Usage Examples

Without Gradient:

<template>
  <qrcode-vue
    :size="size"
    :value="fullUrl"
    :level="level"
    :margin="margin"
    :render-as="renderAs"
    :background="background"
    :foreground="foreground"
  />
</template>

<script>
export default {
  data() {
    return {
      size: 200,
      fullUrl: 'https://example.com',
      level: 'H',
      margin: 4,
      renderAs: 'svg', // or 'canvas'
      background: '#ffffff',
      foreground: '#000000',
    }
  },
}
</script>

With Gradient:

<template>
  <qrcode-vue
    :size="size"
    :value="fullUrl"
    :level="level"
    :margin="margin"
    :render-as="renderAs"
    :background="background"
    :gradient="true"
    :gradient-type="gradientType"
    :gradient-start-color="gradientStartColor"
    :gradient-end-color="gradientEndColor"
  />
</template>

<script>
export default {
  data() {
    return {
      size: 200,
      fullUrl: 'https://example.com',
      level: 'H',
      margin: 4,
      renderAs: 'svg', // or 'canvas'
      background: '#ffffff',
      gradient: true,
      gradientType: 'linear', // or 'radial'
      gradientStartColor: '#ff0000', // Start color of the gradient
      gradientEndColor: '#0000ff', // End color of the gradient
    }
  },
}
</script>

Documentation

Updated the README.md to include the new props and usage examples for both plain color and gradient QR codes.

Testing

• Verified that the gradient properties work correctly for both SVG and Canvas renderings.
• Ensured backward compatibility with existing usage that does not utilize gradient features.

Review

Please review the changes and provide feedback. Looking forward to your comments and suggestions.

Thank you!