{"version":3,"file":"use-sv-panel.mjs","names":[],"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"],"mappings":"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"}