feat: added picker color component

[baiwusanyu-c]

close: #409

preview

demo

<script lang="ts">
  import { KColorPicker } from "@ikun-ui/color-picker";
  let value = "#1677FF"
  const handleChange = (e) => {
    console.log(e.detail)
    value = e.detail
  }

  let resolveValue = "#f8a153"
  const handleChangeComplete = (e) => {
    console.log(21)
    console.log(e.detail)
    resolveValue = e.detail
  }

  let hRValue = 0
  function handleInput(e: CustomEvent, type: 'hr' | 'sg' | 'vb' | 'a' | 'hex') {
    if (type === 'hr') {
      hRValue = e.detail;
    }
  }

  const presets = [
    {
      "label": "primary",
      "colors": [
        "#e6f4ff",
        "#bae0ff",
        "#91caff",
        "#69b1ff",
        "#4096ff",
        "#1677ff",
        "#0958d9",
        "#003eb3",
        "#002c8c",
        "#001d66",
      ]
    },
    {
      "label": "red",
      "colors": [
        "#fff1f0",
        "#ffccc7",
        "#ffa39e",
        "#ff7875",
        "#ff4d4f",
        "#f5222d",
        "#cf1322",
        "#a8071a",
        "#820014",
        "#5c0011"
      ],
      defaultOpen:true
    },
    {
      "label": "green",
      "colors": [
        "#f6ffed",
        "#d9f7be",
        "#b7eb8f",
        "#95de64",
        "#73d13d",
        "#52c41a",
        "#389e0d",
        "#237804",
        "#135200",
        "#092b00"
      ]
    }
  ]
</script>

<KColorPicker defaultValue="#1677FF"
              {value}
              title="ikun color picker"
              size="sm"
              format="hsv"
              {presets}
              allowClear
              showText
              on:change={handleChange}
              on:changeComplete={handleChangeComplete}>
</KColorPicker>

<KColorPicker defaultValue="#1677FF"
              {value}
              title="ikun color picker"
              format="hsv"
              {presets}
              allowClear
              showText
              on:change={handleChange}
              on:changeComplete={handleChangeComplete}>
</KColorPicker>

<KColorPicker defaultValue="#1677FF"
              {value}
              title="ikun color picker"
              format="hsv"
              {presets}
              size="lg"
              allowClear
              showText
              on:change={handleChange}
              on:changeComplete={handleChangeComplete}>
</KColorPicker>

[netlify]

✅ Deploy Preview for ikun-ui canceled.

Name	Link
🔨 Latest commit	1940573
🔍 Latest deploy log	https://app.netlify.com/sites/ikun-ui/deploys/65f8020fd1a9c2000874da88