element-plus/es/components/color-picker-panel/src/composables/use-sv-panel.mjs.map

A Component Library for Vue 3

{"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<HTMLElement>()\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<typeof useSvPanel>,\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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"}