feat: added color-picker-converter.vue

pages/tools/converter/color-picker-converter.vue

@@ -0,0 +1,190 @@
+<template>
+  <ToolWrapper :config="config()">
+    <v-row no-gutters align="center" align-content="center" justify="center">
+      <v-col cols="12" sm="6" align="center">
+        <v-color-picker
+          v-model="rgbPicker"
+          flat
+          canvas-height="300"
+          hide-inputs
+          mode="rgba"
+          @input="(v) => updateColors(v, 'picker')"
+        />
+      </v-col>
+      <v-col cols="12" sm="6" align="center">
+        <v-text-field
+          ref="hex"
+          outlined
+          label="hex"
+          :value="hex"
+          :rules="rules.hex"
+          append-icon="mdi-content-copy"
+          @input="(v) => updateColors(v, 'hex')"
+          @click:append="copy(hex)"
+        />
+        <v-text-field
+          ref="rgb"
+          outlined
+          label="rgb"
+          :value="rgb"
+          :rules="rules.rgb"
+          append-icon="mdi-content-copy"
+          @input="(v) => updateColors(v, 'rgb')"
+          @click:append="copy(rgb)"
+        />
+        <v-text-field
+          ref="hsl"
+          outlined
+          label="hsl"
+          :value="hsl"
+          :rules="rules.hsl"
+          append-icon="mdi-content-copy"
+          @input="(v) => updateColors(v, 'hsl')"
+          @click:append="copy(hsl)"
+        />
+        <v-combobox
+          ref="keyword"
+          :value="keyword"
+          outlined
+          label="css keyword"
+          :items="colorsName"
+          :rules="rules.keyword"
+          no-data-text="This is not an authorized color name."
+          append-icon="mdi-content-copy"
+          @change="(v) => updateColors(v, 'keyword')"
+          @click:append="copy(keyword)"
+        />
+      </v-col>
+    </v-row>
+  </ToolWrapper>
+</template>
+
+<script lang="ts">
+
+import {Component} from 'nuxt-property-decorator'
+import colors from 'color-name'
+import convert from 'color-convert'
+import {CopyableMixin} from '~/mixins/copyable.mixin'
+import Tool from '~/components/Tool.vue'
+import {ToolConfig} from '~/types/ToolConfig'
+import type {VForm} from '~/types/VForm'
+
+const required = (v: unknown) => !!v || 'A value is required'
+
+@Component({
+  mixins: [CopyableMixin]
+})
+export default class ColorPickerConverter extends Tool {
+  config(): ToolConfig {
+    return {
+      title: 'Color picker/converter',
+      description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus distinctio dolor dolorum eaque eligendi, facilis impedit laboriosam odit placeat.',
+      icon: 'mdi-palette',
+      keywords: ['rgb', 'hsl', 'hex', 'keyword', 'css', 'picker']
+    }
+  }
+
+  rgbPicker = {
+    r: 76,
+    g: 175,
+    b: 80
+  }
+
+  colorsName = Object.keys(colors).sort()
+  valid = true
+  rules = {
+    hex: [
+      required,
+      (v: string) => /^#(?:[0-9a-fA-F]{6})$/.test(v) || 'Format should be like #112233'
+    ],
+    rgb: [
+      required,
+      (v: string) => /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/.test(v) || 'Format should be like rgb(255, 0, 0)'
+    ],
+    hsl: [
+      required,
+      (v: string) => /^hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)$/.test(v) || 'Format should be like hsl(360, 100%, 50%)'
+    ],
+    keywords: [
+      required,
+      (v: string) => this.colorsName.includes(v) || 'Value should be from the list'
+    ]
+  }
+
+  hex = '#4CAF50'
+  rgb = 'rgb(76, 175, 80)'
+  hsl = 'hsl(122, 39%, 49%)'
+  keyword = 'mediumseagreen'
+
+  setHSL(r: number, g: number, b: number) {
+    const [h, s, l] = convert.rgb.hsl(r, g, b)
+    this.hsl = `hsl(${Math.floor(h)}, ${Math.floor(s)}%, ${Math.floor(l)}%)`
+  }
+
+  setRGB(r: number, g: number, b: number) {
+    this.rgb = `rgb(${r}, ${g}, ${b})`
+  }
+
+  setHEX(r: number, g: number, b: number) {
+    const result = convert.rgb.hex(r, g, b)
+    this.hex = `#${result}`
+  }
+
+  setKeyword(r: number, g: number, b: number) {
+    this.keyword = convert.rgb.keyword(r, g, b)
+  }
+
+  updateColors(value: string, fromType: string) {
+    if (fromType === 'picker' || (this.$refs[fromType] as VForm)?.validate()) {
+      if (fromType === 'rgb') {
+        const [r, g, b] = value.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)?.slice(1).map(v => parseInt(v)) ?? [0, 0, 0]
+        this.rgbPicker = {r, g, b}
+        this.setHEX(r, g, b)
+        this.setHSL(r, g, b)
+        this.setKeyword(r, g, b)
+      } else if (fromType === 'hex') {
+        const [r, g, b] = convert.hex.rgb(value.replace(/#/g, ''))
+        this.rgbPicker = {r, g, b}
+        this.setRGB(r, g, b)
+        this.setHSL(r, g, b)
+        this.setKeyword(r, g, b)
+      } else if (fromType === 'hsl') {
+        const [h, s, l] = value.match(/^hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)$/)?.slice(1).map(v => parseInt(v)) ?? [0, 0, 0]
+        // @ts-ignore
+        const [r, g, b] = convert.hsl.rgb(h, s, l)
+        this.rgbPicker = {r, g, b}
+        this.setRGB(r, g, b)
+        this.setHEX(r, g, b)
+        this.setKeyword(r, g, b)
+      } else if (fromType === 'keyword') {
+        try {
+          // @ts-ignore
+          const [r, g, b] = convert.keyword.rgb(value)
+          this.rgbPicker = {r, g, b}
+          this.setRGB(r, g, b)
+          this.setHEX(r, g, b)
+          this.setHSL(r, g, b)
+        } catch (ignored) {
+          // ignored
+        }
+      } else if (fromType === 'picker') {
+        const {r, g, b} = value as unknown as { r: number, g: number, b: number }
+        this.setRGB(r, g, b)
+        this.setHEX(r, g, b)
+        this.setHSL(r, g, b)
+        this.setKeyword(r, g, b)
+      }
+    }
+  }
+
+  mounted() {
+    this.updateColors(this.hex, 'hex')
+  }
+}
+</script>
+
+<style scoped lang="less">
+::v-deep .v-input__icon {
+  height: 18px !important;
+}
+</style>