chore: prettier code

Author: Qiu-Jun

lib/src/components/ColorPicker/components/GradientBar.vue

@@ -29,7 +29,9 @@
 <script lang="ts" setup>
 import { getHandleValue } from '@/utils/utils'
 
-const { colorState, handleGradient, addPoint, setSelectColorIdx } = inject('colorProvider') as any
+const { colorState, handleGradient, addPoint, setSelectColorIdx } = inject(
+  'colorProvider',
+) as any
 const leftMultiplyer = (colorState.width - 18) / 100
 
 const backgroundImage = computed(() => {

lib/src/components/ColorPicker/components/Inputs/components/CMYKInputs.vue

@@ -31,7 +31,7 @@ import { round } from '@/utils/format'
 import { rgb2cmyk, cmykToRgb } from '@/utils/convert'
 import { InputType } from '@/enums'
 
-const { colorState, changeColor } =  inject('colorProvider') as any
+const { colorState, changeColor } = inject('colorProvider') as any
 
 const handleCmyk = (value: any) => {
   const { r, g, b } = cmykToRgb(value)

lib/src/components/ColorPicker/components/Inputs/components/HSLInputs.vue

@@ -27,7 +27,7 @@ import { InputType } from '@/enums'
 
 const sVal = ref(0)
 const lVal = ref(0)
-const { colorState, changeColor, tinycolor } =  inject('colorProvider') as any
+const { colorState, changeColor, tinycolor } = inject('colorProvider') as any
 
 const handleSl = (value: any) => {
   const { r, g, b } = tc(value).toRgb()

lib/src/components/ColorPicker/components/Inputs/components/HSVInputs.vue

@@ -34,7 +34,7 @@ import { InputType } from '@/enums'
 
 const sVal = ref(0)
 const vVal = ref(0)
-const { colorState, changeColor } =  inject('colorProvider') as any
+const { colorState, changeColor } = inject('colorProvider') as any
 
 const handleSV = (value: any) => {
   const { r, g, b } = tc(value).toRgb()

lib/src/components/ColorPicker/components/Operation.vue

@@ -86,7 +86,9 @@ import { config } from '@/constants'
 import type { IMode } from '@/interfaces'
 
 const { defaultColor, defaultGradient } = config
-const { colorState, isGradient, setInputType, setMode, setValue } = inject('colorProvider') as any
+const { colorState, isGradient, setInputType, setMode, setValue } = inject(
+  'colorProvider',
+) as any
 
 // input type
 const showInputTypes = ref(false)

lib/src/components/ColorPicker/components/OperationGradient.vue

@@ -71,7 +71,13 @@ const handleChangeType = debounce(function (type: GradientType) {
   type === GradientType.linear && setLinear()
   type === GradientType.radial && setRadial()
   colorState.gradientColors &&
-    setValue(createGradientStr(colorState.gradientColors, unref(gradientType), colorState))
+    setValue(
+      createGradientStr(
+        colorState.gradientColors,
+        unref(gradientType),
+        colorState,
+      ),
+    )
 }, 250)
 
 // 角度设置

lib/src/components/ColorPicker/components/PickerArea.vue

@@ -37,7 +37,9 @@ import { computePickerPosition, computeSquareXY } from '@/utils/utils'
 import { config } from '@/constants'
 import tc from 'tinycolor2'
 
-const { colorState, isGradient, setValue, updateSelectColor } = inject('colorProvider') as any
+const { colorState, isGradient, setValue, updateSelectColor } = inject(
+  'colorProvider',
+) as any
 const { crossSize } = config
 
 const canvasRef = ref<HTMLCanvasElement | null>(null)

lib/src/components/ColorPicker/components/Preview.vue

@@ -35,7 +35,9 @@
 <script lang="ts" setup>
 import { debounce } from 'lodash-es'
 
-const { colorState, isGradient, changeColor, setValue } = inject('colorProvider') as any
+const { colorState, isGradient, changeColor, setValue } = inject(
+  'colorProvider',
+) as any
 
 const colorValue = computed(() => {
   if (unref(isGradient)) {

lib/src/components/ColorPicker/index.vue

@@ -55,7 +55,12 @@ import tc from 'tinycolor2'
 import { InputType, GradientType, Modes } from '@/enums'
 import { cloneDeep } from 'lodash-es'
 import { createGradientStr } from '@/utils/color'
-import type { IColor, ColorPickerProps, GradientProps, IMode } from '@/interfaces'
+import type {
+  IColor,
+  ColorPickerProps,
+  GradientProps,
+  IMode,
+} from '@/interfaces'
 
 const emits = defineEmits(['update:value', 'change'])
 // const { init, colorState, isGradient } = useColor()
@@ -106,7 +111,6 @@ const colorState = reactive<ColorPickerProps>({
 const gradientType = ref<GradientType>(GradientType.linear)
 const tinycolor = ref<typeof tc | null>(null)
 
-
 const onChange = (val: IColor) => {
   emits('update:value', val.color)
   emits('change', { ...val })
@@ -129,7 +133,11 @@ const setValue = (color?: string) => {
   if (unref(isGradient)) {
     colorState.degreesStr = degreeStr
     colorState.gradientColors = colors
-    colorState.gradientColor = createGradientStr(colors, unref(gradientType), colorState)
+    colorState.gradientColor = createGradientStr(
+      colors,
+      unref(gradientType),
+      colorState,
+    )
     tinycolor.value = tc(
       colorState.gradientColors[colorState.gradientColorsIdx!].value,
     )
@@ -165,126 +173,126 @@ const setValue = (color?: string) => {
 }
 
 const updateSelectColor = (value: string) => {
-    const colors = colorState.gradientColors || []
-    const colorValue = colors[colorState.gradientColorsIdx!]
-    if (!colorValue) return
-    colorValue.value = value
-    const newGradStr = createGradientStr(colors, unref(gradientType), colorState)
-    setValue(newGradStr)
-  }
-
-  const handleGradient = (newColor: string, left?: number) => {
-    const colors = colorState.gradientColors || []
-    const colorValue = colors[colorState.gradientColorsIdx!]
-    if (!colorValue) return
-    colorValue.left = left ?? colorValue.left
-    colorValue.value = newColor
-    const newGradStr = createGradientStr(colors, unref(gradientType), colorState)
-    setValue(newGradStr)
-  }
+  const colors = colorState.gradientColors || []
+  const colorValue = colors[colorState.gradientColorsIdx!]
+  if (!colorValue) return
+  colorValue.value = value
+  const newGradStr = createGradientStr(colors, unref(gradientType), colorState)
+  setValue(newGradStr)
+}
 
+const handleGradient = (newColor: string, left?: number) => {
+  const colors = colorState.gradientColors || []
+  const colorValue = colors[colorState.gradientColorsIdx!]
+  if (!colorValue) return
+  colorValue.left = left ?? colorValue.left
+  colorValue.value = newColor
+  const newGradStr = createGradientStr(colors, unref(gradientType), colorState)
+  setValue(newGradStr)
+}
 
-  const changeColor = (newColor: string) => {
-    if (unref(isGradient)) {
-      handleGradient(newColor)
-    } else {
-      setValue(newColor)
-    }
+const changeColor = (newColor: string) => {
+  if (unref(isGradient)) {
+    handleGradient(newColor)
+  } else {
+    setValue(newColor)
   }
+}
 
-  const setHcH = (h: number) => {
-    if (colorState.hc?.h) {
-      colorState.hc.h = h
-    }
+const setHcH = (h: number) => {
+  if (colorState.hc?.h) {
+    colorState.hc.h = h
   }
+}
 
-  const setSelectColorIdx = (idx: number) => {
-    colorState.gradientColorsIdx = idx
-    // warning: Here is update hc， but not need to handle onChange
-    tinycolor.value = tc(
-      colorState.gradientColors![colorState.gradientColorsIdx!].value,
-    )
-    const rgba = tinycolor.value.toRgb()
-    const hsv = tinycolor.value.toHsv()
-    colorState.hc = { ...rgba, ...hsv }
-  }
+const setSelectColorIdx = (idx: number) => {
+  colorState.gradientColorsIdx = idx
+  // warning: Here is update hc， but not need to handle onChange
+  tinycolor.value = tc(
+    colorState.gradientColors![colorState.gradientColorsIdx!].value,
+  )
+  const rgba = tinycolor.value.toRgb()
+  const hsv = tinycolor.value.toHsv()
+  colorState.hc = { ...rgba, ...hsv }
+}
 
-  // 设置inputs的类型
-  const setInputType = (type: InputType) => {
-    colorState.inputType = type
-  }
+// 设置inputs的类型
+const setInputType = (type: InputType) => {
+  colorState.inputType = type
+}
 
-  // 设置线性渐变
-  const setLinear = () => {
-    const value = colorState.gradientColor?.split(/,(.+)/)[1]
-    value && setValue(`linear-gradient(90deg, ${value}`)
-    gradientType.value = GradientType.linear
-  }
+// 设置线性渐变
+const setLinear = () => {
+  const value = colorState.gradientColor?.split(/,(.+)/)[1]
+  value && setValue(`linear-gradient(90deg, ${value}`)
+  gradientType.value = GradientType.linear
+}
 
-  // 设置径向渐变
-  const setRadial = () => {
-    const value = colorState.gradientColor?.split(/,(.+)/)[1]
-    value && setValue(`radial-gradient(circle, ${value}`)
-    gradientType.value = GradientType.radial
-  }
+// 设置径向渐变
+const setRadial = () => {
+  const value = colorState.gradientColor?.split(/,(.+)/)[1]
+  value && setValue(`radial-gradient(circle, ${value}`)
+  gradientType.value = GradientType.radial
+}
 
-  // 设置角度
-  const setDegrees = (val: number) => {
-    if (gradientType.value !== GradientType.linear)
-      return console.log(
-        'Warning: you are updating degrees when the gradient type is not linear. This will change the gradients type which may be undesired',
-      )
-
-    const remaining = colorState.gradientColor?.split(/,(.+)/)[1]
-    if (!remaining) return
-    colorState.degrees = val
-    setValue(
-      `linear-gradient(${formatInputValues(val, 0, 360)}deg, ${remaining}`,
+// 设置角度
+const setDegrees = (val: number) => {
+  if (gradientType.value !== GradientType.linear)
+    return console.log(
+      'Warning: you are updating degrees when the gradient type is not linear. This will change the gradients type which may be undesired',
     )
-  }
 
-  // 添加渐变点
-  const addPoint = (left: number) => {
-    if (!left && left !== 0) {
-      console.log(
-        'You did not pass a stop value (left amount) for the new color point so it defaulted to 50',
-      )
-    }
-    const colors = cloneDeep(colorState.gradientColors!)
-    const curColorValue = colors[colorState.gradientColorsIdx!]
-
-    const newColors = [
-      ...colors?.map((c: GradientProps) => ({
-        ...c,
-        value: low(c),
-      })),
-      { value: curColorValue.value, left: left },
-    ]?.sort((a: any, b: any) => a.left - b.left)
-
-    colorState.gradientColorsIdx = newColors.findIndex((i) => i.left === left)
-    const color = createGradientStr(newColors, unref(gradientType), colorState)
-    setValue(color)
-  }
+  const remaining = colorState.gradientColor?.split(/,(.+)/)[1]
+  if (!remaining) return
+  colorState.degrees = val
+  setValue(`linear-gradient(${formatInputValues(val, 0, 360)}deg, ${remaining}`)
+}
 
-  // 删除渐变点
-  const deletePoint = (index?: number) => {
-    const colors = colorState.gradientColors
-    if (colors && colors?.length > 2) {
-      const pointToDelete = index ?? colorState.gradientColorsIdx
-      const remaining = colors?.filter(
-        (rc: GradientProps, i: number) => i !== pointToDelete,
-      )
-      colorState.gradientColors = cloneDeep(remaining)
-
-      const newGradientColor = createGradientStr(remaining, unref(gradientType), colorState)
-      setValue(newGradientColor)
-    } else {
-      console.log(
-        'A gradient must have atleast two colors, disable your delete button when necessary',
-      )
-    }
+// 添加渐变点
+const addPoint = (left: number) => {
+  if (!left && left !== 0) {
+    console.log(
+      'You did not pass a stop value (left amount) for the new color point so it defaulted to 50',
+    )
   }
+  const colors = cloneDeep(colorState.gradientColors!)
+  const curColorValue = colors[colorState.gradientColorsIdx!]
+
+  const newColors = [
+    ...colors?.map((c: GradientProps) => ({
+      ...c,
+      value: low(c),
+    })),
+    { value: curColorValue.value, left: left },
+  ]?.sort((a: any, b: any) => a.left - b.left)
+
+  colorState.gradientColorsIdx = newColors.findIndex((i) => i.left === left)
+  const color = createGradientStr(newColors, unref(gradientType), colorState)
+  setValue(color)
+}
+
+// 删除渐变点
+const deletePoint = (index?: number) => {
+  const colors = colorState.gradientColors
+  if (colors && colors?.length > 2) {
+    const pointToDelete = index ?? colorState.gradientColorsIdx
+    const remaining = colors?.filter(
+      (rc: GradientProps, i: number) => i !== pointToDelete,
+    )
+    colorState.gradientColors = cloneDeep(remaining)
 
+    const newGradientColor = createGradientStr(
+      remaining,
+      unref(gradientType),
+      colorState,
+    )
+    setValue(newGradientColor)
+  } else {
+    console.log(
+      'A gradient must have atleast two colors, disable your delete button when necessary',
+    )
+  }
+}
 
 const init = () => {
   Object.assign(colorState, props)
@@ -319,7 +327,7 @@ const colorProvider = {
   setDegrees,
   setSelectColorIdx,
   addPoint,
-  deletePoint
+  deletePoint,
 }
 
 init()

lib/src/utils/color.ts

@@ -2,11 +2,17 @@ import { GradientProps, ColorPickerProps } from '@/interfaces'
 import { GradientType } from '@/enums'
 
 // 生成渐变色string
-export function createGradientStr(newColors: GradientProps[], gradientType: GradientType, colorState: ColorPickerProps) {
-    const sorted = newColors.sort(
-        (a: GradientProps, b: GradientProps) => a.left! - b.left!,
-    )
-    const colorString = sorted?.map((cc: any) => `${cc?.value} ${cc.left}%`)
-    const newGrade = `${gradientType}-gradient(${`${colorState.degreesStr}`}, ${colorString.join(', ')})`
-    return newGrade
-}
+export function createGradientStr(
+  newColors: GradientProps[],
+  gradientType: GradientType,
+  colorState: ColorPickerProps,
+) {
+  const sorted = newColors.sort(
+    (a: GradientProps, b: GradientProps) => a.left! - b.left!,
+  )
+  const colorString = sorted?.map((cc: any) => `${cc?.value} ${cc.left}%`)
+  const newGrade = `${gradientType}-gradient(${`${colorState.degreesStr}`}, ${colorString.join(
+    ', ',
+  )})`
+  return newGrade
+}