{"version":3,"file":"hue-slider.js","sources":["../../../../../../../packages/components/color-picker-panel/src/components/hue-slider.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b(), ns.is('vertical', vertical)]\">\n    <div ref=\"bar\" :class=\"ns.e('bar')\" @click=\"handleClick\" />\n    <div\n      ref=\"thumb\"\n      :class=\"ns.e('thumb')\"\n      :style=\"{\n        left: thumbLeft + 'px',\n        top: thumbTop + 'px',\n      }\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  onMounted,\n  ref,\n  watch,\n} from 'vue'\nimport { getClientXY } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { draggable } from '../utils/draggable'\n\nimport type { PropType } from 'vue'\nimport type Color from '../utils/color'\n\nexport default defineComponent({\n  name: 'ElColorHueSlider',\n\n  props: {\n    color: {\n      type: Object as PropType<Color>,\n      required: true,\n    },\n\n    vertical: Boolean,\n    disabled: Boolean,\n  },\n  setup(props) {\n    const ns = useNamespace('color-hue-slider')\n    const instance = getCurrentInstance()!\n\n    // ref\n    const thumb = ref<HTMLElement>()\n    const bar = ref<HTMLElement>()\n    // data\n    const thumbLeft = ref(0)\n    const thumbTop = ref(0)\n    // computed\n    const hueValue = computed(() => {\n      return props.color.get('hue')\n    })\n    // watch\n    watch(\n      () => hueValue.value,\n      () => {\n        update()\n      }\n    )\n\n    // methods\n    function handleClick(event: MouseEvent | TouchEvent) {\n      if (props.disabled) return\n      const target = event.target\n\n      if (target !== thumb.value) {\n        handleDrag(event)\n      }\n    }\n\n    function handleDrag(event: MouseEvent | TouchEvent) {\n      if (!bar.value || !thumb.value || props.disabled) return\n\n      const el = instance.vnode.el as HTMLElement\n      const rect = el.getBoundingClientRect()\n      const { clientX, clientY } = getClientXY(event)\n      let hue\n\n      if (!props.vertical) {\n        let left = clientX - rect.left\n        left = Math.min(left, rect.width - thumb.value.offsetWidth / 2)\n        left = Math.max(thumb.value.offsetWidth / 2, left)\n\n        hue = Math.round(\n          ((left - thumb.value.offsetWidth / 2) /\n            (rect.width - thumb.value.offsetWidth)) *\n            360\n        )\n      } else {\n        let top = clientY - rect.top\n\n        top = Math.min(top, rect.height - thumb.value.offsetHeight / 2)\n        top = Math.max(thumb.value.offsetHeight / 2, top)\n        hue = Math.round(\n          ((top - thumb.value.offsetHeight / 2) /\n            (rect.height - thumb.value.offsetHeight)) *\n            360\n        )\n      }\n      props.color.set('hue', hue)\n    }\n\n    function getThumbLeft() {\n      if (!thumb.value) return 0\n\n      const el = instance.vnode.el\n\n      if (props.vertical) return 0\n      const hue = props.color.get('hue')\n\n      if (!el) return 0\n      return Math.round(\n        (hue * (el.offsetWidth - thumb.value.offsetWidth / 2)) / 360\n      )\n    }\n\n    function getThumbTop() {\n      if (!thumb.value) return 0\n\n      const el = instance.vnode.el as HTMLElement\n      if (!props.vertical) return 0\n      const hue = props.color.get('hue')\n\n      if (!el) return 0\n      return Math.round(\n        (hue * (el.offsetHeight - thumb.value.offsetHeight / 2)) / 360\n      )\n    }\n\n    function update() {\n      thumbLeft.value = getThumbLeft()\n      thumbTop.value = getThumbTop()\n    }\n\n    // mounded\n    onMounted(() => {\n      if (!bar.value || !thumb.value || props.disabled) return\n\n      const dragConfig = {\n        drag: (event: MouseEvent | TouchEvent) => {\n          handleDrag(event)\n        },\n        end: (event: MouseEvent | TouchEvent) => {\n          handleDrag(event)\n        },\n      }\n\n      draggable(bar.value, dragConfig)\n      draggable(thumb.value, dragConfig)\n      update()\n    })\n\n    return {\n      bar,\n      thumb,\n      thumbLeft,\n      thumbTop,\n      hueValue,\n      handleClick,\n      update,\n      ns,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","useNamespace","getCurrentInstance","ref","computed","watch","getClientXY","onMounted","draggable","_createElementVNode","_normalizeClass","_normalizeStyle","_export_sfc"],"mappings":"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"}