{"version":3,"file":"Lightness.mjs","sources":["../../../../../src/components/color-picker-v3/src/common/Lightness.vue"],"sourcesContent":["<template>\n  <div :class=\"['vc-lightness-slider', { 'small-slider': size === 'small' }]\">\n    <div\n      ref=\"barElement\"\n      class=\"vc-lightness-slider__bar\"\n      :style=\"getBackgroundStyle\"\n      @click=\"onClickSider\"\n    >\n      <div\n        :class=\"['vc-lightness-slider__bar-pointer', { 'small-bar': size === 'small' }]\"\n        ref=\"cursorElement\"\n        :style=\"getCursorStyle\"\n      >\n        <div class=\"vc-lightness-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 type { CSSProperties } 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  import tinycolor from 'tinycolor2';\n\n  export default defineComponent({\n    name: 'Lightness',\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      const [h, s, l] = color.HSL;\n\n      const state = reactive({\n        hue: h,\n        saturation: s,\n        lightness: l,\n      });\n\n      watch(\n        () => props.color,\n        (value) => {\n          if (value) {\n            color = value;\n            const [hue, saturation, lightness] = color.HSL;\n            merge(state, {\n              hue,\n              saturation,\n              lightness,\n            });\n          }\n        },\n        { deep: true },\n      );\n\n      const getBackgroundStyle = computed(() => {\n        const color1 = tinycolor({\n          h: state.hue,\n          s: state.saturation,\n          l: 0.8,\n        }).toPercentageRgbString();\n        const color2 = tinycolor({\n          h: state.hue,\n          s: state.saturation,\n          l: 0.6,\n        }).toPercentageRgbString();\n        const color3 = tinycolor({\n          h: state.hue,\n          s: state.saturation,\n          l: 0.4,\n        }).toPercentageRgbString();\n        const color4 = tinycolor({\n          h: state.hue,\n          s: state.saturation,\n          l: 0.2,\n        }).toPercentageRgbString();\n        return {\n          background: [\n            `-webkit-linear-gradient(left, rgb(255, 255, 255), ${color1}, ${color2}, ${color3}, ${color4}, rgb(0, 0, 0))`,\n            `-moz-linear-gradient(left, rgb(255, 255, 255), ${color1}, ${color2}, ${color3}, ${color4}, rgb(0, 0, 0))`,\n            `-ms-linear-gradient(left, rgb(255, 255, 255), ${color1}, ${color2}, ${color3}, ${color4}, rgb(0, 0, 0))`,\n          ],\n        } as any as CSSProperties;\n      });\n\n      const getCursorLeft = () => {\n        if (barElement.value && cursorElement.value) {\n          const lightness = state.lightness;\n          const rect = barElement.value.getBoundingClientRect();\n          const offsetWidth = cursorElement.value.offsetWidth;\n\n          return (1 - lightness) * (rect.width - offsetWidth) + 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.max(offsetWidth / 2, left);\n          left = Math.min(left, rect.width - offsetWidth / 2);\n\n          const light = 1 - (left - offsetWidth / 2) / (rect.width - offsetWidth);\n          color.lightness = light;\n          emit('change', light);\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, getBackgroundStyle, onClickSider };\n    },\n  });\n</script>\n\n<style lang=\"scss\">\n  .vc-lightness-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      &-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","_normalizeStyle"],"mappings":";;;;;MAaQ,UAAmD,mBAAAA,kBAAA,CAAA,KAAA,EAAA,EAAA,KAAA,EAAA,iCAAA,EAAA,EAAA,IAAA,EAAA,CAAA,CAAA,CAAA,CAAA;;;;AAZ9C,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;;IACT,KAaM,EAAAC,cAAA,CAAA,CAAA,qBAAA,EAAA,EAAA,cAAA,EAAA,IAAA,CAAA,IAAA,KAAA,OAAA,EAAA,CAAA,CAAA;AAAA,GAAA,EAAA;AAXE,IAAAD,kBAAA,CAAA,KAAA,EAAA;AAAA,MACL,GAAK,EAAA,YAAA;AAAA,MACL,KAAK,EAAA,0BAAA;AAAA,MAAA,KAAA,EAAAE,cAAA,CAAA,IAAA,CAAA,kBAAA,CAAA;MAEN,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,EAAKD,eAAE,CAAc,kCAAA,EAAA,EAAA,WAAA,EAAA,IAAA,CAAA,IAAA,KAAA,OAAA,EAAA,CAAA,CAAA;AAAA,QAAA,GAAA,EAAA,eAAA;;;;;;;;;;"}