feat(VColorInput): add new component

[webdevnerdstuff]

Description

Adding a Color Input field

Markup:

<template>
  <v-app>
    <div>
      <v-color-input
        v-model="displayColor"
        v-bind="colorInputProps"
      />
    </div>
  </v-app>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { VColorInput } from '../src/components/VColorInput'

  const displayColor = ref<string | undefined>(undefined)

  const colorPickerProps = {
    // border: 'xl', // ?
    // canvasHeight: '400px', // *
    // dotSize: 50, // *
    // elevation: 10, // *
    // hideCanvas: true, // *
    // hideInputs: true,
    // hideSliders: true,
    mode: 'hex', // *
    modes: ['rgb', 'hsl', 'hex'], // *
    // showSwatches: true, // *
    // swatches: [ // *
    // ['#FF0000', '#AA0000', '#550000'],
    // ['#FFFF00', '#AAAA00', '#555500'],
    // ['#00FF00', '#00AA00', '#005500'],
    // ['#00FFFF', '#00AAAA', '#005555'],
    // ['#0000FF', '#0000AA', '#000055'],
    // ],
    // swatchesMaxHeight: 10, // *
    // tag: 'section', // *
  }

  const textFieldProps = {
    // active: true, // *
    // appendIcon: '$vuetify', // *
    // appendInnerIcon: '$vuetify', // *
    // autoFocus: true, // *
    // baseColor: 'error', // *
    // bgColor: 'warning', // *
    // centerAffix: true, // ?
    // clearable: true, // *
    // clearIcon: '$vuetify', // *
    // colorPip: false, // *
    color: 'primary', // *
    // counter: true, // *
    // counterValue: 1100, // *
    // density: 'compact', // *
    // direction: 'vertical', // *
    // dirty: true,
    // disabled: true, // *
    // error: true, // *
    // errorMessages: ['error 1', 'error 2'], // *
    // flat: true, // ?
    // focused: true, // *
    // hideSpinButtons: true, // *
    // hint: 'foobar hint', // *
    label: 'Color', // ?
    // loading: true, // *
    // location: 'tbd', // ?
    // maxErrors: 2, // *
    // messages: ['message', 'message 2'], // *
    // persistentClear: true, // *
    // persistentHint: true, // *
    // persistentPlaceholder: true, // ?
    // placeholder: 'foobar placeholder', // *
    // persistentCounter: true, // *
    // prefix: 'prefix', // *
    // prependIcon: '$vuetify', // *
    // prependInnerIcon: null, // *
    // readonly: true, // *
    // readonlyInput: true, // *
    // reverse: true, // *
    // role: 'foobar role', // *
    // rules: [(v: string) => !!v || 'Required'], // *
    // singleLine: false, // *
    // suffix: 'suffix', // *
    // title: 'foobar title', // *
    // type: 'text', // *
    // validateOn: 'input', // ?
    // variant: 'outlined', // *
  }

  const sharedProps = {
  // rounded: 'pill', // *
  // tile: true, // *
  // width: '500px', // *
  // theme: 'dark', // *
  }

  const colorInputProps = {
    ...colorPickerProps,
    ...textFieldProps,
    ...sharedProps,
  // maxWidth: '100px', // ? * VTF, ? VCP uses width
  // minWidth: '1000px', // ? * VTF, ? VCP uses width
  }

</script>

<style scoped></style>

```vue