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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"}