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

A Component Library for Vue 3

{"version":3,"file":"use-slider.mjs","sources":["../../../../../../../packages/components/color-picker-panel/src/composables/use-slider.ts"],"sourcesContent":["import {\n  computed,\n  getCurrentInstance,\n  onMounted,\n  ref,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { addUnit, getClientXY, getEventCode } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { draggable } from '../utils/draggable'\n\nimport type { AlphaSliderProps } from '../props/slider'\n\ninterface UseSliderOptions {\n  key: 'hue' | 'alpha'\n  minValue: number\n  maxValue: number\n}\n\nexport const useSlider = (\n  props: AlphaSliderProps,\n  { key, minValue, maxValue }: UseSliderOptions\n) => {\n  const instance = getCurrentInstance()!\n\n  const thumb = shallowRef<HTMLElement>()\n  const bar = shallowRef<HTMLElement>()\n\n  const currentValue = computed(() => props.color.get(key))\n\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    thumb.value?.focus()\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 value\n\n    if (!props.vertical) {\n      let left = clientX - rect.left\n      left = Math.max(thumb.value.offsetWidth / 2, left)\n      left = Math.min(left, rect.width - thumb.value.offsetWidth / 2)\n\n      value = Math.round(\n        ((left - thumb.value.offsetWidth / 2) /\n          (rect.width - thumb.value.offsetWidth)) *\n          maxValue\n      )\n    } else {\n      let top = clientY - rect.top\n      top = Math.max(thumb.value.offsetHeight / 2, top)\n      top = Math.min(top, rect.height - thumb.value.offsetHeight / 2)\n\n      value = Math.round(\n        ((top - thumb.value.offsetHeight / 2) /\n          (rect.height - thumb.value.offsetHeight)) *\n          maxValue\n      )\n    }\n    props.color.set(key, value)\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    // NOTE: The hue-slider is opposite in direction to the regular slider, so the hue slider has been reversed here.\n    // But this is not the best way to handle it.\n    const reverse = key === 'hue' ? -1 : 1\n    let isPreventDefault = true\n\n    switch (code) {\n      case EVENT_CODE.left:\n      case EVENT_CODE.down:\n        incrementPosition(-step * reverse)\n        break\n      case EVENT_CODE.right:\n      case EVENT_CODE.up:\n        incrementPosition(step * reverse)\n        break\n      case EVENT_CODE.home:\n        props.color.set(key, key === 'hue' ? maxValue : minValue)\n        break\n      case EVENT_CODE.end:\n        props.color.set(key, key === 'hue' ? minValue : maxValue)\n        break\n      case EVENT_CODE.pageDown:\n        incrementPosition(-4 * reverse)\n        break\n      case EVENT_CODE.pageUp:\n        incrementPosition(4 * reverse)\n        break\n      default:\n        isPreventDefault = false\n        break\n    }\n\n    isPreventDefault && event.preventDefault()\n  }\n\n  function incrementPosition(step: number) {\n    let next = currentValue.value + step\n    next = next < minValue ? minValue : next > maxValue ? maxValue : next\n    props.color.set(key, next)\n  }\n\n  return {\n    thumb,\n    bar,\n    currentValue,\n    handleDrag,\n    handleClick,\n    handleKeydown,\n  }\n}\n\ninterface UseSliderDOMOptions extends Pick<\n  ReturnType<typeof useSlider>,\n  'bar' | 'thumb' | 'currentValue' | 'handleDrag'\n> {\n  namespace: string\n  maxValue: number\n  getBackground?: () => string\n}\n\nexport const useSliderDOM = (\n  props: AlphaSliderProps,\n  {\n    namespace,\n    maxValue,\n    bar,\n    thumb,\n    currentValue,\n    handleDrag,\n    getBackground,\n  }: UseSliderDOMOptions\n) => {\n  const instance = getCurrentInstance()!\n  const ns = useNamespace(namespace)\n\n  const thumbLeft = ref(0)\n  const thumbTop = ref(0)\n  const background = ref<string>()\n\n  function getThumbLeft() {\n    if (!thumb.value) return 0\n\n    if (props.vertical) return 0\n    const el = instance.vnode.el\n    const value = currentValue.value\n\n    if (!el) return 0\n    return Math.round(\n      (value * (el.offsetWidth - thumb.value.offsetWidth / 2)) / maxValue\n    )\n  }\n\n  function getThumbTop() {\n    if (!thumb.value) return 0\n\n    const el = instance.vnode.el\n    if (!props.vertical) return 0\n    const value = currentValue.value\n\n    if (!el) return 0\n    return Math.round(\n      (value * (el.offsetHeight - thumb.value.offsetHeight / 2)) / maxValue\n    )\n  }\n\n  function update() {\n    thumbLeft.value = getThumbLeft()\n    thumbTop.value = getThumbTop()\n    background.value = getBackground?.()\n  }\n\n  onMounted(() => {\n    if (!bar.value || !thumb.value) 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  watch(currentValue, () => update())\n\n  watch(\n    () => props.color.value,\n    () => update()\n  )\n\n  const rootKls = computed(() => [\n    ns.b(),\n    ns.is('vertical', props.vertical),\n    ns.is('disabled', props.disabled),\n  ])\n  const barKls = computed(() => ns.e('bar'))\n  const thumbKls = computed(() => ns.e('thumb'))\n  const barStyle = computed(() => ({ background: background.value }))\n  const thumbStyle = computed(() => ({\n    left: addUnit(thumbLeft.value),\n    top: addUnit(thumbTop.value),\n  }))\n\n  return {\n    rootKls,\n    barKls,\n    barStyle,\n    thumbKls,\n    thumbStyle,\n    thumbLeft,\n    thumbTop,\n    update,\n  }\n}\n"],"names":[],"mappings":"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"}