{"version":3,"file":"Hue.mjs","sources":["../../../../../src/components/color-picker-v3/src/common/Hue.vue"],"sourcesContent":["<template>\n  <div :class=\"['vc-hue-slider', { 'small-slider': size === 'small' }]\">\n    <div ref=\"barElement\" class=\"vc-hue-slider__bar\" @click=\"onClickSider\">\n      <div\n        :class=\"['vc-hue-slider__bar-pointer', { 'small-bar': size === 'small' }]\"\n        ref=\"cursorElement\"\n        :style=\"getCursorStyle\"\n      >\n        <div class=\"vc-hue-slider__bar-handle\"></div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, onMounted, reactive, ref, watch } from 'vue';\n  import propTypes from 'vue-types';\n  import { Color } from '../utils/color';\n  import { tryOnMounted } from '@vueuse/core';\n  import { DOMUtils } from '@aesoper/normal-utils';\n  import type { DragEventOptions } from '@aesoper/normal-utils';\n  import { merge } from 'lodash-es';\n\n  export default defineComponent({\n    name: 'Hue',\n    props: {\n      color: propTypes.instanceOf(Color),\n      size: propTypes.oneOf(['small', 'default']).def('default'),\n    },\n    emits: ['change'],\n    setup(props, { emit }) {\n      const barElement = ref<any | null>(null);\n      const cursorElement = ref<any | null>(null);\n\n      let color = props.color || new Color();\n\n      const state = reactive({\n        hue: color.hue || 0,\n      });\n\n      watch(\n        () => props.color,\n        (value) => {\n          if (value) {\n            color = value;\n            merge(state, { hue: color.hue });\n          }\n        },\n        { deep: true },\n      );\n\n      const getCursorLeft = () => {\n        if (barElement.value && cursorElement.value) {\n          const rect = barElement.value.getBoundingClientRect();\n          const offsetWidth = cursorElement.value.offsetWidth;\n          if (state.hue === 360) {\n            return rect.width - offsetWidth / 2;\n          }\n          return ((state.hue % 360) * (rect.width - offsetWidth)) / 360 + offsetWidth / 2;\n        }\n\n        return 0;\n      };\n\n      const getCursorStyle = computed(() => {\n        const left = getCursorLeft();\n        return {\n          left: left + 'px',\n          top: 0,\n        };\n      });\n\n      const onClickSider = (event: Event) => {\n        const target = event.target;\n\n        if (target !== barElement.value) {\n          onMoveBar(event as MouseEvent);\n        }\n      };\n\n      const onMoveBar = (event: MouseEvent) => {\n        event.stopPropagation();\n        if (barElement.value && cursorElement.value) {\n          const rect = barElement.value.getBoundingClientRect();\n\n          const offsetWidth = cursorElement.value.offsetWidth;\n\n          let left = event.clientX - rect.left;\n          left = Math.min(left, rect.width - offsetWidth / 2);\n          left = Math.max(offsetWidth / 2, left);\n\n          const hue = Math.round(((left - offsetWidth / 2) / (rect.width - offsetWidth)) * 360);\n          color.hue = hue;\n          state.hue = hue;\n          emit('change', hue);\n        }\n      };\n\n      onMounted(() => {\n        const dragConfig: DragEventOptions = {\n          drag: (event: Event) => {\n            onMoveBar(event as MouseEvent);\n          },\n          end: (event: Event) => {\n            onMoveBar(event as MouseEvent);\n          },\n        };\n\n        if (barElement.value && cursorElement.value) {\n          DOMUtils.triggerDragEvent(barElement.value, dragConfig);\n        }\n      });\n\n      return { barElement, cursorElement, getCursorStyle, onClickSider };\n    },\n  });\n</script>\n\n<style lang=\"scss\">\n  .vc-hue-slider {\n    position: relative;\n    margin-bottom: 15px;\n    width: 100%;\n    height: 14px;\n    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);\n    border-radius: 15px;\n\n    &.is-vertical {\n      width: 14px;\n      height: 100%;\n      display: inline-block;\n      transform: rotate(180deg);\n    }\n\n    &.transparent {\n      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);\n      background-repeat: repeat;\n    }\n\n    &__bar {\n      position: relative;\n      width: 100%;\n      height: 100%;\n      border-radius: 15px;\n\n      background: -moz-linear-gradient(\n        left,\n        rgb(255, 0, 0) 0%,\n        rgb(255, 255, 0) 16.66%,\n        rgb(0, 255, 0) 33.33%,\n        rgb(0, 255, 255) 50%,\n        rgb(0, 0, 255) 66.66%,\n        rgb(255, 0, 255) 83.33%,\n        rgb(255, 0, 0) 100%\n      );\n      background: -ms-linear-gradient(\n        left,\n        rgb(255, 0, 0) 0%,\n        rgb(255, 255, 0) 16.66%,\n        rgb(0, 255, 0) 33.33%,\n        rgb(0, 255, 255) 50%,\n        rgb(0, 0, 255) 66.66%,\n        rgb(255, 0, 255) 83.33%,\n        rgb(255, 0, 0) 100%\n      );\n      background: -webkit-linear-gradient(\n        left,\n        rgb(255, 0, 0) 0%,\n        rgb(255, 255, 0) 16.66%,\n        rgb(0, 255, 0) 33.33%,\n        rgb(0, 255, 255) 50%,\n        rgb(0, 0, 255) 66.66%,\n        rgb(255, 0, 255) 83.33%,\n        rgb(255, 0, 0) 100%\n      );\n\n      &-pointer {\n        position: absolute;\n        width: 14px;\n        height: 14px;\n      }\n\n      &-handle {\n        width: 14px;\n        height: 14px;\n        border-radius: 6px;\n        transform: translate(-7px, -2px);\n        background-color: #f8f8f8;\n        margin-top: 2px;\n        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);\n        cursor: pointer;\n\n        &.vertical {\n          transform: translate(0, -7px);\n          margin-top: 0;\n        }\n      }\n    }\n\n    &.small-slider {\n      height: 10px !important;\n\n      .small-bar {\n        height: 10px !important;\n        width: 10px !important;\n\n        div {\n          width: 12px !important;\n          height: 12px !important;\n          border-radius: 5px !important;\n          transform: translate(-6px, -2px);\n          margin-top: 1px !important;\n        }\n      }\n    }\n  }\n</style>\n"],"names":["_createElementVNode","_normalizeClass"],"mappings":";;;;;MAQQ,UAA6C,mBAAAA,kBAAA,CAAA,KAAA,EAAA,EAAA,KAAA,EAAA,2BAAA,EAAA,EAAA,IAAA,EAAA,CAAA,CAAA,CAAA,CAAA;;;;SAPxC,WAAsC,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;;IAC/C,KAQM,EAAAC,cAAA,CAAA,CAAA,eAAA,EAAA,EAAA,cAAA,EAAA,IAAA,CAAA,IAAA,KAAA,OAAA,EAAA,CAAA,CAAA;AAAA,GAAA,EAAA;AARsB,IAAAD,kBAAA,CAAA,KAAA,EAAA;AAAA,MAAsB,GAAA,EAAA,YAAA;AAAA,MAAA,KAAA,EAAA,oBAAA;MAChD,OAMM,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,YAAA,IAAA,IAAA,CAAA,YAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,KAAA,EAAA;yBAJA,KAAe,EAAA;AAAA,QAClB,KAAA,EAAKC,eAAE,CAAc,4BAAA,EAAA,EAAA,WAAA,EAAA,IAAA,CAAA,IAAA,KAAA,OAAA,EAAA,CAAA,CAAA;AAAA,QAAA,GAAA,EAAA,eAAA;;;;;;;;;;"}