{"version":3,"file":"ColorPicker.mjs","sources":["../../../../src/components/color-picker-v3/src/ColorPicker.vue"],"sourcesContent":["<template>\r\n  <WrapContainer\r\n    v-model:active-key=\"state.activeKey\"\r\n    v-if=\"isWidget\"\r\n    :show-tab=\"useType === 'both'\"\r\n    @change=\"onActiveKeyChange\"\r\n    :style=\"{ zIndex: zIndex }\"\r\n  >\r\n    <component :is=\"getComponentName\" :key=\"getComponentName\" v-bind=\"getBindArgs\" />\r\n  </WrapContainer>\r\n\r\n  <template v-if=\"!isWidget\">\r\n    <div\r\n      class=\"vc-color-wrap transparent\"\r\n      :class=\"{ round: shape === 'circle' }\"\r\n      ref=\"colorCubeRef\"\r\n      v-bind=\"$attrs\"\r\n    >\r\n      <div class=\"current-color\" :style=\"getBgColorStyle\" @click=\"onShowPicker\"></div>\r\n    </div>\r\n\r\n    <teleport to=\"body\">\r\n      <div ref=\"pickerRef\" v-if=\"showPicker\" :style=\"{ zIndex: zIndex }\">\r\n        <WrapContainer\r\n          :show-tab=\"useType === 'both' && !state.isAdvanceMode\"\r\n          v-if=\"showPicker\"\r\n          v-model:active-key=\"state.activeKey\"\r\n          @change=\"onActiveKeyChange\"\r\n        >\r\n          <component :is=\"getComponentName\" :key=\"getComponentName\" v-bind=\"getBindArgs\" />\r\n        </WrapContainer>\r\n      </div>\r\n    </teleport>\r\n  </template>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\n  import {\r\n    computed,\r\n    defineComponent,\r\n    nextTick,\r\n    onMounted,\r\n    onUnmounted,\r\n    onUpdated,\r\n    provide,\r\n    reactive,\r\n    ref,\r\n    watch,\r\n    watchEffect,\r\n  } from 'vue';\r\n  import TkColorPicker from './tk/TkColorPicker.vue';\r\n  import ChromeColorPicker from './chrome/ChromeColorPicker.vue';\r\n  import GradientColorPicker from './gradient/GradientColorPicker.vue';\r\n  import WrapContainer from './common/WrapContainer.vue';\r\n  import tinycolor from 'tinycolor2';\r\n  import { Color, HistoryColorKey, MAX_STORAGE_LENGTH } from './utils/color';\r\n  import { onClickOutside, RemovableRef, useDebounceFn, useLocalStorage } from '@vueuse/core';\r\n  import { createPopper } from '@popperjs/core';\r\n  import { ColorPickerProviderKey } from './utils/type';\r\n  import { parse, stringify } from 'gradient-parser';\r\n  import type { GradientNode } from 'gradient-parser';\r\n  import type { ColorPickerProvider, SupportLang } from './utils/type';\r\n  import { colorPickerProps } from './props';\r\n  import { useInitColorPicker } from '../../../hooks';\r\n\r\n  export default defineComponent({\r\n    name: 'ColorPicker',\r\n    components: {\r\n      TkColorPicker,\r\n      ChromeColorPicker,\r\n      GradientColorPicker,\r\n      WrapContainer,\r\n    },\r\n    inheritAttrs: false,\r\n    props: colorPickerProps,\r\n    emits: [\r\n      'update:modelValue',\r\n      'on-undo',\r\n      'colorChange',\r\n      'afterColorChanged',\r\n      'update:activeKey',\r\n      'activeKeyChange',\r\n    ],\r\n    setup(props, { emit }) {\r\n      const { pureColor, gradientColor, last } = useInitColorPicker(props);\r\n      const lastColor = ref(last);\r\n\r\n      const state = reactive({\r\n        pureColor: pureColor,\r\n        activeKey: props.useType === 'gradient' ? 'gradient' : props.activeKey, //  \"pure\" | \"gradient\"\r\n        isAdvanceMode: false,\r\n      });\r\n\r\n      provide<ColorPickerProvider>(ColorPickerProviderKey, {\r\n        lang: computed(() => props.lang || 'ZH-cn'),\r\n      });\r\n\r\n      const instance = new Color(state.pureColor);\r\n      const colorInstance = ref(instance);\r\n\r\n      const startColor = new Color('#fff');\r\n      const endColor = new Color('#fff');\r\n      const gradientState = reactive({\r\n        startColor,\r\n        endColor,\r\n        startColorStop: 0,\r\n        endColorStop: 100,\r\n        angle: 0,\r\n        gradientColor: gradientColor,\r\n      });\r\n\r\n      // Ref\r\n      const showPicker = ref(false);\r\n      const colorCubeRef = ref<any>(null);\r\n      const pickerRef = ref<any>(null);\r\n\r\n      watchEffect(() => {\r\n        const { pureColor, gradientColor, last } = useInitColorPicker(props);\r\n        state.pureColor = pureColor;\r\n        gradientState.gradientColor = gradientColor;\r\n        lastColor.value = last;\r\n      });\r\n\r\n      watch(\r\n        () => showPicker.value,\r\n        () => {\r\n          console.log('showPicker.value ===> %o', showPicker.value);\r\n        },\r\n      );\r\n\r\n      const getBgColorStyle = computed(() => {\r\n        const bgColor =\r\n          state.activeKey !== 'gradient'\r\n            ? tinycolor(state.pureColor).toRgbString()\r\n            : gradientState.gradientColor;\r\n        return {\r\n          background: bgColor,\r\n        };\r\n      });\r\n\r\n      const getComponentName = computed(() => {\r\n        if (state.activeKey === 'gradient') {\r\n          return GradientColorPicker.name;\r\n        }\r\n        return props.pickerType === 'tk' ? TkColorPicker.name : ChromeColorPicker.name;\r\n      });\r\n\r\n      const getBindArgs = computed(() => {\r\n        if (state.activeKey === 'gradient') {\r\n          return {\r\n            startColor: gradientState.startColor,\r\n            endColor: gradientState.endColor,\r\n            onStartColorChange: (v: Color) => {\r\n              gradientState.startColor = v;\r\n              onGradientChange();\r\n            },\r\n            onEndColorChange: (v: Color) => {\r\n              gradientState.endColor = v;\r\n              onGradientChange();\r\n            },\r\n            angle: gradientState.angle,\r\n            startColorStop: gradientState.startColorStop,\r\n            endColorStop: gradientState.endColorStop,\r\n            onStartColorStopChange: (v: number) => {\r\n              gradientState.startColorStop = v;\r\n              onGradientChange();\r\n            },\r\n            onEndColorStopChange: (v: number) => {\r\n              gradientState.endColorStop = v;\r\n              onGradientChange();\r\n            },\r\n            onAngleChange: (v: number) => {\r\n              gradientState.angle = v;\r\n              onGradientChange();\r\n            },\r\n            onAdvanceChange: (v: boolean) => {\r\n              state.isAdvanceMode = v;\r\n            },\r\n          };\r\n        }\r\n        return {\r\n          disableAlpha: props.disableAlpha,\r\n          disableHistory: props.disableHistory,\r\n          roundHistory: props.roundHistory,\r\n          color: colorInstance.value,\r\n          onChange: onColorChange,\r\n          onAdvanceChange,\r\n        };\r\n      });\r\n\r\n      const onAdvanceChange = (isAdvance: boolean) => {\r\n        state.isAdvanceMode = isAdvance;\r\n      };\r\n\r\n      const onShowPicker = () => {\r\n        showPicker.value = true;\r\n        nextTick(() => {\r\n          createPopperInstance();\r\n        });\r\n      };\r\n\r\n      const onHidePicker = () => {\r\n        showPicker.value = false;\r\n        if (lastColor.value !== state.pureColor) {\r\n          const colorVal =\r\n            state.activeKey === 'gradient' ? gradientState.gradientColor : state.pureColor;\r\n          emit('on-undo', colorVal, lastColor.value);\r\n          emit('update:modelValue', colorVal);\r\n          emit('afterColorChanged', colorVal);\r\n          lastColor.value = colorVal;\r\n          updateColorHistoryFn();\r\n        }\r\n\r\n        // 销毁Popper\r\n        destroyPopperInstance();\r\n      };\r\n\r\n      const historyColors: RemovableRef<string[]> = useLocalStorage<string[]>(\r\n        HistoryColorKey,\r\n        [],\r\n        {},\r\n      );\r\n\r\n      const updateColorHistoryFn = useDebounceFn(() => {\r\n        console.log('updateColorHistoryFn===>');\r\n        debugger;\r\n        if (props.disableHistory) {\r\n          return;\r\n        }\r\n\r\n        const rgbString: any = state.pureColor;\r\n\r\n        historyColors.value = historyColors.value.filter((value: any) => {\r\n          return !tinycolor.equals(value, rgbString);\r\n        });\r\n\r\n        if (historyColors.value.includes(rgbString)) {\r\n          return;\r\n        }\r\n\r\n        while (historyColors.value.length > MAX_STORAGE_LENGTH) {\r\n          historyColors.value.pop();\r\n        }\r\n\r\n        historyColors.value.unshift(rgbString);\r\n      }, 500);\r\n\r\n      const parseGradientColor = () => {\r\n        try {\r\n          if (!gradientState.gradientColor) return;\r\n          const [colorNode] = parse(gradientState.gradientColor);\r\n          if (\r\n            colorNode &&\r\n            colorNode.type === 'linear-gradient' &&\r\n            colorNode.orientation?.type === 'angular' &&\r\n            colorNode.colorStops.length >= 2\r\n          ) {\r\n            const startColorVal = colorNode.colorStops[0];\r\n            const endColorVal = colorNode.colorStops[1];\r\n\r\n            gradientState.startColorStop = Number(startColorVal.length?.value) || 0;\r\n            gradientState.endColorStop = Number(endColorVal.length?.value) || 0;\r\n            gradientState.angle = Number(colorNode.orientation?.value) || 0;\r\n\r\n            const [r, g, b, a] = startColorVal.value;\r\n            const [r1, g1, b1, a1] = endColorVal.value;\r\n\r\n            gradientState.startColor = new Color({\r\n              r: Number(r),\r\n              g: Number(g),\r\n              b: Number(b),\r\n              a: Number(a),\r\n            });\r\n            gradientState.endColor = new Color({\r\n              r: Number(r1),\r\n              g: Number(g1),\r\n              b: Number(b1),\r\n              a: Number(a1),\r\n            });\r\n          }\r\n        } catch (e) {\r\n          console.log(`[Parse Color]: ${e}`);\r\n        }\r\n      };\r\n\r\n      const onGradientChange = useDebounceFn(() => {\r\n        const nodes = color2GradientNode();\r\n        try {\r\n          gradientState.gradientColor = stringify(nodes);\r\n          emit('update:modelValue', gradientState.gradientColor);\r\n          emit('colorChange', gradientState.gradientColor);\r\n        } catch (e) {\r\n          console.log(e);\r\n        }\r\n      }, 100);\r\n\r\n      const color2GradientNode = () => {\r\n        const nodes: GradientNode[] = [];\r\n        const startColorArr = gradientState.startColor.RGB.map((v) => v.toString());\r\n        const endColorArr = gradientState.endColor.RGB.map((v) => v.toString());\r\n\r\n        nodes.push({\r\n          type: 'linear-gradient',\r\n          orientation: { type: 'angular', value: gradientState.angle + '' },\r\n          colorStops: [\r\n            {\r\n              type: 'rgba',\r\n              value: [startColorArr[0], startColorArr[1], startColorArr[2], startColorArr[3]],\r\n              length: { value: gradientState.startColorStop + '', type: '%' },\r\n            },\r\n            {\r\n              type: 'rgba',\r\n              value: [endColorArr[0], endColorArr[1], endColorArr[2], endColorArr[3]],\r\n              length: { value: gradientState.endColorStop + '', type: '%' },\r\n            },\r\n          ],\r\n        });\r\n\r\n        return nodes;\r\n      };\r\n\r\n      let popperInstance: any = null;\r\n\r\n      const createPopperInstance = () => {\r\n        if (popperInstance) return;\r\n        if (colorCubeRef.value && pickerRef.value) {\r\n          const offsetParent = colorCubeRef.value.offsetParent;\r\n          const offsetTop = colorCubeRef.value.offsetTop || offsetParent?.offsetTop;\r\n          const offsetBottomHeight =\r\n            window.innerHeight - (offsetTop - window.pageYOffset) - colorCubeRef.value.offsetHeight;\r\n          createPopper(colorCubeRef.value, pickerRef.value, {\r\n            placement: props.placement,\r\n            modifiers: [\r\n              {\r\n                name: 'flip',\r\n                options: {\r\n                  enabled: true,\r\n                  boundary: offsetBottomHeight > 500 ? 'clippingParents' : colorCubeRef.value,\r\n                  fallbackPlacements: ['bottom', 'left'],\r\n                },\r\n              },\r\n            ],\r\n          });\r\n        }\r\n      };\r\n\r\n      const destroyPopperInstance = () => {\r\n        if (popperInstance) {\r\n          popperInstance.destroy();\r\n          popperInstance = null;\r\n        }\r\n      };\r\n\r\n      onUnmounted(() => {\r\n        destroyPopperInstance();\r\n      });\r\n\r\n      // const onInit = () => {\r\n      //   if (colorCubeRef.value && pickerRef.value) {\r\n      //     const offsetParent = colorCubeRef.value.offsetParent;\r\n      //     const offsetTop = colorCubeRef.value.offsetTop || offsetParent?.offsetTop;\r\n      //     const offsetBottomHeight =\r\n      //       window.innerHeight - (offsetTop - window.pageYOffset) - colorCubeRef.value.offsetHeight;\r\n      //     nextTick(() => {\r\n      //       createPopper(colorCubeRef.value, pickerRef.value, {\r\n      //         placement: props.placement,\r\n      //         modifiers: [\r\n      //           {\r\n      //             name: 'flip',\r\n      //             options: {\r\n      //               boundary: offsetBottomHeight > 500 ? 'clippingParents' : colorCubeRef.value,\r\n      //               fallbackPlacements: ['bottom', 'left'],\r\n      //             },\r\n      //           },\r\n      //         ],\r\n      //       });\r\n      //     });\r\n      //   }\r\n      // };\r\n\r\n      const onColorChange = (v: Color) => {\r\n        colorInstance.value = v;\r\n        state.pureColor = v.toString(props.format);\r\n        emitColorChange();\r\n      };\r\n\r\n      const emitColorChange = useDebounceFn(() => {\r\n        emit('update:modelValue', state.pureColor);\r\n        emit('colorChange', state.pureColor);\r\n      }, 100);\r\n\r\n      onClickOutside(pickerRef, () => {\r\n        console.log('onClickOutside ===>');\r\n        onHidePicker();\r\n      });\r\n\r\n      const onActiveKeyChange = (key: string) => {\r\n        state.activeKey = key;\r\n        emit('update:activeKey', key);\r\n        emit('activeKeyChange', key);\r\n      };\r\n\r\n      // tryOnMounted(() => {\r\n      //\r\n      // });\r\n\r\n      // watch(\r\n      //   () => pickerRef.value,\r\n      //   (val) => {\r\n      //     if (val) {\r\n      //       onInit();\r\n      //     }\r\n      //   },\r\n      // );\r\n\r\n      onMounted(() => {\r\n        parseGradientColor();\r\n        // emitColorChange();\r\n        // onGradientChange();\r\n      });\r\n\r\n      // onUpdated(() => {\r\n      //   const { pureColor, gradientColor, last } = useInitColorPicker(props);\r\n      //   state.pureColor = pureColor;\r\n      //   gradientState.gradientColor = gradientColor;\r\n      //   lastColor.value = last;\r\n      // });\r\n\r\n      watch(\r\n        () => gradientColor,\r\n        (value) => {\r\n          if (value !== gradientState.gradientColor) {\r\n            gradientState.gradientColor = value;\r\n          }\r\n        },\r\n      );\r\n\r\n      watch(\r\n        () => gradientState.gradientColor,\r\n        () => {\r\n          parseGradientColor();\r\n        },\r\n      );\r\n\r\n      watch(\r\n        () => props.activeKey,\r\n        (value) => {\r\n          state.activeKey = value;\r\n        },\r\n      );\r\n\r\n      watch(\r\n        () => props.useType,\r\n        (value) => {\r\n          if (state.activeKey !== 'gradient' && value === 'gradient') {\r\n            state.activeKey = 'gradient';\r\n          } else {\r\n            state.activeKey = 'pure';\r\n          }\r\n        },\r\n      );\r\n\r\n      watch(\r\n        () => pureColor,\r\n        (value) => {\r\n          const equal = tinycolor.equals(value, state.pureColor);\r\n\r\n          if (!equal) {\r\n            state.pureColor = value;\r\n            colorInstance.value = new Color(value);\r\n            emitColorChange();\r\n          }\r\n        },\r\n        { deep: true },\r\n      );\r\n\r\n      return {\r\n        colorCubeRef,\r\n        pickerRef,\r\n        showPicker,\r\n        colorInstance,\r\n        getBgColorStyle,\r\n        onColorChange,\r\n        onShowPicker,\r\n        onActiveKeyChange,\r\n        getComponentName,\r\n        getBindArgs,\r\n        state,\r\n      };\r\n    },\r\n  });\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n  .vc-color-wrap {\r\n    width: 50px;\r\n    height: 24px;\r\n    box-shadow: 3px 0 5px #00000014;\r\n    position: relative;\r\n    cursor: pointer;\r\n    overflow: hidden;\r\n    display: inline-block;\r\n    vertical-align: middle;\r\n\r\n    &.transparent {\r\n      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);\r\n      background-repeat: repeat;\r\n    }\r\n\r\n    &.round {\r\n      width: 22px;\r\n      height: 22px;\r\n      border-radius: 50%;\r\n      border: 1px solid #d8d8d8;\r\n    }\r\n\r\n    .current-color {\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n  }\r\n</style>\r\n"],"names":["_createElementBlock","_Fragment","_openBlock","_createBlock","_normalizeStyle","_createCommentVNode","_createElementVNode","_mergeProps","_Teleport"],"mappings":";;;;;;;sBACEA,kBAQgB,CAAAC,QAAA,EAAA,IAAA,EAAA;AAAA,IAPN,IAAA,CAAA,QAAA,IAAAC,SAAA,EAAA,EAAUC,YAAQ,wBAAS,EAAA;AAAA,MAAA,GAAA,EAAA,CAAA;AAElC,MAAA,YAAA,EAAU,IAAO,CAAA,KAAA,CAAA,SAAA;AAAA,MACjB,sBAAQ,MAAiB,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,KAAA,CAAA,SAAA,GAAA,MAAA,CAAA;AAAA,MACzB,UAAK,EAAA,IAAA,CAAA,OAAA,KAAA,MAAA;AAAA,MAAA,QAAA,EAAA,IAAA,CAAA,iBAAA;AAE2E,MAAA,KAAA,EAAAC,cAAA,CAAA,EAAA,MAAA,EAAA,IAAA,CAAA,MAAA,EAAA,CAAA;AAAA,KAAA,EAAA;;;;;AAGlE,KAAA,EAAA,CAAA,EAAQ,CAAzB,YAAA,EAAA,UAAA,EAAA,UAAA,EAAA,OAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,IACE,CAAA,IAAA,CAAA,QAAA,IAAAH,SAAA,iCACmC,EAChB,GAAA,EAAA,CAAA,EAAA,EAAA;AAAA,MAAAI,kBAAA,CACb,KAAc,EAAAC,UAAA,CAAA;AAAA,QAAA,KAAA,EACV,CAAM,2BAAA,EAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,KAAA,QAAA,EAAA,CAAA;AAAA,QAEd,GAAA,EAAA,cAAA;AAAA,OAAA,EAAA,IAAA,CAAK,MAAM,CAAA,EAAA;AAAA,QAAAD,kBAAA,CAAsB,KAAE,EAAA;AAAA,UAAkB,KAAK,EAAA,eAAA;AAAA,UAAA,KAAA,EAAAF,cAAA,CAAA,IAAA,CAAA,eAAA,CAAA;;AAG5D,SAAA,EAAA,IAAA,EAAA,CAAA,CAAA;AAAA,OAAA,EAC6B,EAAU,CAAA;AAAA,OAAAF,SAAA,EAAA,EAAAC,WAAA,CAArCK,QASM,EAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA;AAAA,QAAA,IAAA,CAAA,UAAA,IAAAN,SAAA,EATc,EAAAF,kBAAA,CAAA,KAAA,EAAA;AAAA,UAAoB,GAAK,EAAA,CAAA;AAAA,UAAA,GAAA,EAAA,WAAA;iBAGnCI,cAAU,CAAA,EAAA,MAAA,EAAA,IAAA,CAAA,MAAA,EAAA,CAAA;AAAA,SAAA,EAAA;AADP,UAAA,IAAA,CAAA,UAAA,IAAAF,SAAA,EAAA,EAAEC,YAAO,wBAAsB,EAAA;AAAA,YAEhC,GAAA,EAAA,CAAA;AAAA,YAAA,UAAA,EAAA,IAAA,CAAA,OAAA,KAAA,MAAA,IAAA,CAAA,IAAA,CAAA,KAAA,CAAA,aAAA;YACP,YAAQ,EAAA,IAAA,CAAA,KAAA,CAAA,SAAA;AAAA,YAAA,oBAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,MAAA,KAAA,IAAA,CAAA,KAAA,CAAA,SAAA,GAAA,MAAA,CAAA;;;;;;;;;;;;;;;;;"}