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","names":[],"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"],"mappings":"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"}