renusify 2.5.2 → 3.0.0

package/components/form/colorInput/picker.vue

@@ -4,21 +4,21 @@
   >
     <div class="color-set">
       <Saturation
-          ref="saturation"
+          ref="saturationRef"
           :hsv="{h:h,s:s,v:v}"
           :color="rgbaString"
           :size="200"
           @selectSaturation="selectSaturation"
       />
       <Hue
-          ref="hue"
+          ref="hueRef"
           :hsv="{h:h,s:s,v:v}"
           :width="15"
           :height="200"
           @selectHue="selectHue"
       />
       <Alpha
-          ref="alpha"
+          ref="alphaRef"
           :color="rgbaString"
           :rgba="rgba"
           :width="15"
@@ -49,119 +49,124 @@
     <slot></slot>
   </div>
 </template>
+<script setup>
+import {nextTick, ref, computed, watch} from 'vue'
+import {rgb2hex, setColorValue} from './useColor.js'
+import Saturation from "./Saturation.vue";
+import Hue from "./Hue.vue";
+import Alpha from "./Alpha.vue";
+import Preview from "./Preview.vue";
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: '#2F1DCC',
+  }
+})
+const emit = defineEmits(['changeColor'])
+const r = ref(0)
+const g = ref(0)
+const b = ref(0)
+const a = ref(1)
+const h = ref(0)
+const s = ref(0)
+const v = ref(0)
+
+const saturationRef = ref(null)
+const hueRef = ref(null)
+const alphaRef = ref(null)
+
+const rgba = computed(() => ({
+  r: r.value,
+  g: g.value,
+  b: b.value,
+  a: a.value
+}))
+const rgbaString = computed(() =>
+    `rgba(${r.value}, ${g.value}, ${b.value}, ${a.value})`
+)
+
+const hexString = computed(() =>
+    rgb2hex(rgba.value, true)
+)
+
+watch(() => props.color, (newColor) => {
+  setColorValue(newColor, {
+    r, g, b, a, h, s, v
+  })
+})
+
+watch(rgba, () => {
+  emit('changeColor', {
+    rgba: rgbaString.value,
+    hex: hexString.value,
+  })
+})
+
+function selectSaturation(color) {
+  setColorValue(color, {
+    r, g, b, a, h, s, v
+  })
+}
 
-<script>
-import {defineAsyncComponent} from 'vue'
-import {color} from './mixin.js'
-
-export default {
-  components: {
-    Saturation: defineAsyncComponent(() => import('./Saturation.vue')),
-    Hue: defineAsyncComponent(() => import('./Hue.vue')),
-    Alpha: defineAsyncComponent(() => import('./Alpha.vue')),
-    Preview: defineAsyncComponent(() => import('./Preview.vue'))
-  },
-  mixins: [color],
-  props: {
-    color: {
-      type: String,
-      default: '#2F1DCC',
-    }
-  },
-  emits: ['changeColor'],
-  data() {
-    return {
-      r: 0,
-      g: 0,
-      b: 0,
-      a: 1,
-      h: 0,
-      s: 0,
-      v: 0
-    }
-  },
-  computed: {
-    rgba() {
-      return {
-        r: this.r,
-        g: this.g,
-        b: this.b,
-        a: this.a
-      }
-    },
-
-    rgbaString() {
-      return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a})`
-    },
-    hexString() {
-      return this.rgb2hex(this.rgba, true)
-    },
-  },
-  created() {
-    this.setColorValue(this.color)
-  },
-  watch: {
-    color: function () {
-      this.setColorValue(this.color)
-    },
-    rgba: function () {
-      this.$emit('changeColor', {
-        rgba: this.rgbaString,
-        hex: this.hexString,
-      })
-    }
-  },
-  methods: {
-    selectSaturation(color) {
-      this.setColorValue(color)
-    },
-    selectHue(color) {
-      this.setColorValue(color)
-      this.$nextTick(() => {
-
-        this.$refs.saturation.renderColor()
-
-        this.$refs.saturation.renderSlide()
-      })
-    },
-    selectAlpha(a) {
-      this.a = a
-    },
-    inputHex(color) {
-      const value = color.target.value
-      this.setColorValue(value)
-      this.$nextTick(() => {
-
-        this.$refs.saturation.renderColor()
-
-        this.$refs.saturation.renderSlide()
-
-        this.$refs.hue.renderSlide()
-      })
-    },
-    inputRgba(color) {
-      const value = color.target.value
-      this.setColorValue(value)
-      this.$nextTick(() => {
-        this.$refs.saturation.renderColor()
-
-        this.$refs.saturation.renderSlide()
-
-        this.$refs.hue.renderSlide()
-      })
-    }
-  },
+function selectHue(color) {
+  setColorValue(color, {
+    r, g, b, a, h, s, v
+  })
+  nextTick(() => {
+
+    saturationRef.value.renderColor()
+
+    saturationRef.value.renderSlide()
+  })
+}
+
+function selectAlpha(e) {
+  a.value = e
 }
+
+function inputHex(color) {
+  const value = color.target.value
+  setColorValue(value, {
+    r, g, b, a, h, s, v
+  })
+  nextTick(() => {
+
+    saturationRef.value.renderColor()
+
+    saturationRef.value.renderSlide()
+
+    hueRef.value.renderSlide()
+  })
+}
+
+function inputRgba(color) {
+  const value = color.target.value
+  setColorValue(value, {
+    r, g, b, a, h, s, v
+  })
+  nextTick(() => {
+    saturationRef.value.renderColor()
+
+    saturationRef.value.renderSlide()
+
+    hueRef.value.renderSlide()
+  })
+}
+
+setColorValue(props.color, {
+  r, g, b, a, h, s, v
+})
 </script>
 
 <style lang="scss">
 @use "sass:map";
-@use "../../../style/variables/base";
+@use "../../../style" as *;
 
 
 .color-box {
   padding: 10px;
-  border-radius: map.get(base.$borders, 'sm');
+  border-radius: map.get($borders, 'sm');
   box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
   z-index: 1;
 

package/components/form/colorInput/useColor.js

@@ -0,0 +1,153 @@
+export const useColor = () => {
+    const setColorValue = (color, component) => {
+        let rgba = {r: 0, g: 0, b: 0, a: 1}
+        const rgbRegex = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*((?:\d*\.)?\d+(?:%?))\s*)?\)$/i;
+        const hexRegex = /^#([a-f0-9]{6}|[a-f0-9]{8})$/i
+
+        if (hexRegex.test(color)) {
+            rgba = hex2rgba(color)
+        } else if (rgbRegex.test(color)) {
+            rgba = rgb2rgba(color)
+        } else if (Object.prototype.toString.call(color) === '[object Object]') {
+            rgba = color
+        } else {
+            return
+        }
+
+        component.r.value = rgba.r
+        component.g.value = rgba.g
+        component.b.value = rgba.b
+
+        if (rgba.a >= 0 && rgba.a <= 1) {
+            component.a.value = rgba.a
+        } else {
+            component.a.value = 1
+        }
+
+        setHSV(rgba, component)
+    }
+
+    const createAlphaSquare = (size) => {
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+        const doubleSize = size * 2
+        canvas.width = doubleSize
+        canvas.height = doubleSize
+
+        ctx.fillStyle = '#ffffff'
+        ctx.fillRect(0, 0, doubleSize, doubleSize)
+        ctx.fillStyle = '#ccd5db'
+        ctx.fillRect(0, 0, size, size)
+        ctx.fillRect(size, size, size, size)
+
+        return canvas
+    }
+
+    const createLinearGradient = (direction, ctx, width, height, color1, color2) => {
+        const isL = direction === 'l'
+        const gradient = ctx.createLinearGradient(
+            0,
+            0,
+            isL ? width : 0,
+            isL ? 0 : height
+        )
+        gradient.addColorStop(0.01, color1)
+        gradient.addColorStop(0.99, color2)
+        ctx.fillStyle = gradient
+        ctx.fillRect(0, 0, width, height)
+    }
+
+    const rgb2hex = ({r, g, b, a}, toUpper = false) => {
+        const change = (val) => {
+            const hex = Math.round(val).toString(16)
+            return hex.length === 1 ? '0' + hex : hex
+        }
+
+        let color = `#${change(r)}${change(g)}${change(b)}`
+
+        if (a !== undefined && a !== 1) {
+            const alpha = Math.round(a * 255)
+            color += change(alpha)
+        }
+
+        return toUpper ? color.toUpperCase() : color
+    }
+
+    const hex2rgba = (hex) => {
+        hex = hex.slice(1)
+        const change = (val) => parseInt(val, 16) || 0
+        const r = change(hex.slice(0, 2))
+        const g = change(hex.slice(2, 4))
+        const b = change(hex.slice(4, 6))
+
+        let a = 1
+        if (hex.length === 8) {
+            const alphaHex = hex.slice(6, 8)
+            a = parseFloat((parseInt(alphaHex, 16) / 255).toFixed(2))
+        }
+
+        return {r, g, b, a}
+    }
+
+    const rgb2rgba = (rgba) => {
+        rgba = (/rgba?\((.*?)\)/.exec(rgba) || ['', '0,0,0,1'])[1].split(',')
+        return {
+            r: Number(rgba[0]) || 0,
+            g: Number(rgba[1]) || 0,
+            b: Number(rgba[2]) || 0,
+            a: Number(rgba[3] ? rgba[3] : 1),
+        }
+    }
+
+    const setHSV = ({r, g, b}, component) => {
+        r = r / 255
+        g = g / 255
+        b = b / 255
+        const max = Math.max(r, g, b)
+        const min = Math.min(r, g, b)
+        const delta = max - min
+        let h = 0
+
+        if (max === min) {
+            h = 0
+        } else if (max === r) {
+            if (g >= b) {
+                h = (60 * (g - b)) / delta
+            } else {
+                h = (60 * (g - b)) / delta + 360
+            }
+        } else if (max === g) {
+            h = (60 * (b - r)) / delta + 120
+        } else if (max === b) {
+            h = (60 * (r - g)) / delta + 240
+        }
+
+        h = Math.floor(h)
+        let s = parseFloat((max === 0 ? 0 : 1 - min / max).toFixed(2))
+        let v = parseFloat(max.toFixed(2))
+
+        component.h.value = h
+        component.s.value = s
+        component.v.value = v
+    }
+
+    return {
+        setColorValue,
+        createAlphaSquare,
+        createLinearGradient,
+        rgb2hex,
+        hex2rgba,
+        rgb2rgba,
+        setHSV
+    }
+}
+
+export const {
+    setColorValue,
+    createAlphaSquare,
+    createLinearGradient,
+    rgb2hex,
+    hex2rgba,
+    rgb2rgba,
+    setHSV
+} = useColor()