{"version":3,"file":"use-sv-panel.mjs","sources":["../../../../../../../packages/components/color-picker-panel/src/composables/use-sv-panel.ts"],"sourcesContent":["import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { useNamespace } from '@element-plus/hooks'\nimport { addUnit, getClientXY, getEventCode } from '@element-plus/utils'\nimport { draggable } from '../utils/draggable'\n\nimport type { SvPanelProps } from '../props/sv-panel'\n\nexport const useSvPanel = (props: SvPanelProps) => {\n const instance = getCurrentInstance()!\n\n const cursorRef = ref()\n const cursorTop = ref(0)\n const cursorLeft = ref(0)\n const background = ref('hsl(0, 100%, 50%)')\n\n const saturation = computed(() => props.color.get('saturation'))\n const brightness = computed(() => props.color.get('value'))\n const hue = computed(() => props.color.get('hue'))\n\n function handleClick(event: MouseEvent | TouchEvent) {\n if (props.disabled) return\n const target = event.target\n\n if (target !== cursorRef.value) {\n handleDrag(event)\n }\n cursorRef.value?.focus({ preventScroll: true })\n }\n\n function handleDrag(event: MouseEvent | TouchEvent) {\n if (props.disabled) return\n\n const el = instance.vnode.el!\n const rect = el.getBoundingClientRect()\n const { clientX, clientY } = getClientXY(event)\n\n let left = clientX - rect.left\n let top = clientY - rect.top\n left = Math.max(0, left)\n left = Math.min(left, rect.width)\n\n top = Math.max(0, top)\n top = Math.min(top, rect.height)\n\n cursorLeft.value = left\n cursorTop.value = top\n props.color.set({\n saturation: (left / rect.width) * 100,\n value: 100 - (top / rect.height) * 100,\n })\n }\n\n function handleKeydown(event: KeyboardEvent) {\n if (props.disabled) return\n const { shiftKey } = event\n const code = getEventCode(event)\n const step = shiftKey ? 10 : 1\n let isPreventDefault = true\n\n switch (code) {\n case EVENT_CODE.left:\n incrementSaturation(-step)\n break\n case EVENT_CODE.right:\n incrementSaturation(step)\n break\n case EVENT_CODE.up:\n incrementBrightness(step)\n break\n case EVENT_CODE.down:\n incrementBrightness(-step)\n break\n default:\n isPreventDefault = false\n break\n }\n\n isPreventDefault && event.preventDefault()\n }\n\n function incrementSaturation(step: number) {\n let next = saturation.value + step\n next = next < 0 ? 0 : next > 100 ? 100 : next\n props.color.set('saturation', next)\n }\n\n function incrementBrightness(step: number) {\n let next = brightness.value + step\n next = next < 0 ? 0 : next > 100 ? 100 : next\n props.color.set('value', next)\n }\n\n return {\n cursorRef,\n cursorTop,\n cursorLeft,\n background,\n saturation,\n brightness,\n hue,\n handleClick,\n handleDrag,\n handleKeydown,\n }\n}\n\nexport const useSvPanelDOM = (\n props: SvPanelProps,\n {\n cursorTop,\n cursorLeft,\n background,\n handleDrag,\n }: Pick<\n ReturnType,\n 'cursorTop' | 'cursorLeft' | 'background' | 'handleDrag'\n >\n) => {\n const instance = getCurrentInstance()!\n const ns = useNamespace('color-svpanel')\n\n function update() {\n const saturation = props.color.get('saturation')\n const brightness = props.color.get('value')\n\n const el = instance.vnode.el!\n const { clientWidth: width, clientHeight: height } = el\n\n cursorLeft.value = (saturation * width) / 100\n cursorTop.value = ((100 - brightness) * height) / 100\n\n background.value = `hsl(${props.color.get('hue')}, 100%, 50%)`\n }\n\n onMounted(() => {\n draggable(instance.vnode.el as HTMLElement, {\n drag: (event) => {\n handleDrag(event)\n },\n end: (event) => {\n handleDrag(event)\n },\n })\n\n update()\n })\n\n watch(\n [\n () => props.color.get('hue'),\n () => props.color.get('value'),\n () => props.color.value,\n ],\n () => update()\n )\n\n const rootKls = computed(() => ns.b())\n const cursorKls = computed(() => ns.e('cursor'))\n const rootStyle = computed(() => ({\n backgroundColor: background.value,\n }))\n const cursorStyle = computed(() => ({\n top: addUnit(cursorTop.value),\n left: addUnit(cursorLeft.value),\n }))\n\n return {\n rootKls,\n cursorKls,\n rootStyle,\n cursorStyle,\n update,\n }\n}\n"],"names":[],"mappings":"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"}