{"version":3,"file":"use-alpha-slider.mjs","sources":["../../../../../../../../packages/components/color-picker-panel/src/composables/use-alpha-slider.ts"],"sourcesContent":["import {\n  computed,\n  getCurrentInstance,\n  onMounted,\n  ref,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { addUnit, getClientXY, getEventCode } from '@hd-front-end/utils'\nimport { useLocale, useNamespace } from '@hd-front-end/hooks'\nimport { EVENT_CODE } from '@hd-front-end/constants'\nimport { draggable } from '../utils/draggable'\n\nimport type { AlphaSliderProps } from '../props/alpha-slider'\n\nexport const useAlphaSlider = (props: AlphaSliderProps) => {\n  const instance = getCurrentInstance()!\n  const { t } = useLocale()\n\n  const thumb = shallowRef<HTMLElement>()\n  const bar = shallowRef<HTMLElement>()\n\n  const alpha = computed(() => props.color.get('alpha'))\n  const alphaLabel = computed(() => t('el.colorpicker.alphaLabel'))\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\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      props.color.set(\n        'alpha',\n        Math.round(\n          ((left - thumb.value.offsetWidth / 2) /\n            (rect.width - thumb.value.offsetWidth)) *\n            100\n        )\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      props.color.set(\n        'alpha',\n        Math.round(\n          ((top - thumb.value.offsetHeight / 2) /\n            (rect.height - thumb.value.offsetHeight)) *\n            100\n        )\n      )\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\n    switch (code) {\n      case EVENT_CODE.left:\n      case EVENT_CODE.down:\n        event.preventDefault()\n        event.stopPropagation()\n        incrementPosition(-step)\n        break\n      case EVENT_CODE.right:\n      case EVENT_CODE.up:\n        event.preventDefault()\n        event.stopPropagation()\n        incrementPosition(step)\n        break\n    }\n  }\n\n  function incrementPosition(step: number) {\n    let next = alpha.value + step\n    next = next < 0 ? 0 : next > 100 ? 100 : next\n    props.color.set('alpha', next)\n  }\n\n  return {\n    thumb,\n    bar,\n    alpha,\n    alphaLabel,\n    handleDrag,\n    handleClick,\n    handleKeydown,\n  }\n}\n\nexport const useAlphaSliderDOM = (\n  props: AlphaSliderProps,\n  {\n    bar,\n    thumb,\n    handleDrag,\n  }: Pick<ReturnType<typeof useAlphaSlider>, 'bar' | 'thumb' | 'handleDrag'>\n) => {\n  const instance = getCurrentInstance()!\n\n  const ns = useNamespace('color-alpha-slider')\n  // refs\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 alpha = props.color.get('alpha')\n\n    if (!el) return 0\n    return Math.round(\n      (alpha * (el.offsetWidth - thumb.value.offsetWidth / 2)) / 100\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 alpha = props.color.get('alpha')\n\n    if (!el) return 0\n    return Math.round(\n      (alpha * (el.offsetHeight - thumb.value.offsetHeight / 2)) / 100\n    )\n  }\n\n  function getBackground() {\n    if (props.color && props.color.value) {\n      const { r, g, b } = props.color.toRgb()\n      return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`\n    }\n    return ''\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(\n    () => props.color.get('alpha'),\n    () => 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 { rootKls, barKls, barStyle, thumbKls, thumbStyle, update }\n}\n"],"names":[],"mappings":"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"}