element-plus/es/components/drawer/src/composables/useResizable.mjs.map

A Component Library for Vue 3

{"version":3,"file":"useResizable.mjs","names":[],"sources":["../../../../../../../packages/components/drawer/src/composables/useResizable.ts"],"sourcesContent":["import { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { addUnit } from '@element-plus/utils'\nimport { clamp, useEventListener, useWindowSize } from '@vueuse/core'\n\nimport type { Ref, SetupContext } from 'vue'\nimport type { DrawerEmits, DrawerProps } from '../drawer'\n\nexport function useResizable(\n  props: DrawerProps & Required<Pick<DrawerProps, 'direction'>>,\n  target: Ref<HTMLElement | undefined>,\n  emit: SetupContext<DrawerEmits>['emit']\n) {\n  const { width, height } = useWindowSize()\n\n  const isHorizontal = computed(() => ['ltr', 'rtl'].includes(props.direction))\n  const sign = computed(() =>\n    ['ltr', 'ttb'].includes(props.direction) ? 1 : -1\n  )\n  const windowSize = computed(() =>\n    isHorizontal.value ? width.value : height.value\n  )\n  const getSize = computed(() => {\n    return clamp(\n      startSize.value + sign.value * offset.value,\n      4,\n      windowSize.value\n    )\n  })\n\n  const startSize = ref(0)\n  const offset = ref(0)\n  const isResizing = ref(false)\n  const hasStartedDragging = ref(false)\n  let startPos: number[] = []\n  let cleanups: (() => void)[] = []\n\n  const getActualSize = () => {\n    const drawerEl = target.value?.closest('[aria-modal=\"true\"]') as HTMLElement\n    if (drawerEl) {\n      return isHorizontal.value ? drawerEl.offsetWidth : drawerEl.offsetHeight\n    }\n    return 100\n  }\n\n  watch(\n    () => [props.size, props.resizable] as const,\n    () => {\n      hasStartedDragging.value = false\n      startSize.value = 0\n      offset.value = 0\n      onMouseUp()\n    }\n  )\n\n  const onMousedown = (e: MouseEvent) => {\n    if (!props.resizable) return\n\n    if (!hasStartedDragging.value) {\n      startSize.value = getActualSize()\n      hasStartedDragging.value = true\n    }\n\n    startPos = [e.pageX, e.pageY]\n    isResizing.value = true\n    emit('resize-start', e, startSize.value)\n    cleanups.push(\n      useEventListener(window, 'mouseup', onMouseUp),\n      useEventListener(window, 'mousemove', onMouseMove)\n    )\n  }\n\n  const onMouseMove = (e: MouseEvent) => {\n    const { pageX, pageY } = e\n    const offsetX = pageX - startPos[0]\n    const offsetY = pageY - startPos[1]\n    offset.value = isHorizontal.value ? offsetX : offsetY\n    emit('resize', e, getSize.value)\n  }\n\n  const onMouseUp = (e?: MouseEvent) => {\n    // premature interruption\n    // avoid triggering meaningless execution due to watch size/resizable constraints.\n    if (!isResizing.value) return\n\n    startPos = []\n    startSize.value = getSize.value\n    offset.value = 0\n    isResizing.value = false\n    cleanups.forEach((cleanup) => cleanup?.())\n    cleanups = []\n    if (e) {\n      emit('resize-end', e, startSize.value)\n    }\n  }\n\n  const cleanup = useEventListener(target, 'mousedown', onMousedown)\n\n  onBeforeUnmount(() => {\n    cleanup()\n    onMouseUp()\n  })\n\n  return {\n    size: computed(() => {\n      return hasStartedDragging.value\n        ? `${getSize.value}px`\n        : addUnit(props.size)\n    }),\n    isResizing,\n    isHorizontal,\n  }\n}\n"],"mappings":";;;;;AAOA,SAAgB,aACd,OACA,QACA,MACA;CACA,MAAM,EAAE,OAAO,WAAW,eAAe;CAEzC,MAAM,eAAe,eAAe,CAAC,OAAO,MAAM,CAAC,SAAS,MAAM,UAAU,CAAC;CAC7E,MAAM,OAAO,eACX,CAAC,OAAO,MAAM,CAAC,SAAS,MAAM,UAAU,GAAG,IAAI,GAChD;CACD,MAAM,aAAa,eACjB,aAAa,QAAQ,MAAM,QAAQ,OAAO,MAC3C;CACD,MAAM,UAAU,eAAe;AAC7B,SAAO,MACL,UAAU,QAAQ,KAAK,QAAQ,OAAO,OACtC,GACA,WAAW,MACZ;GACD;CAEF,MAAM,YAAY,IAAI,EAAE;CACxB,MAAM,SAAS,IAAI,EAAE;CACrB,MAAM,aAAa,IAAI,MAAM;CAC7B,MAAM,qBAAqB,IAAI,MAAM;CACrC,IAAI,WAAqB,EAAE;CAC3B,IAAI,WAA2B,EAAE;CAEjC,MAAM,sBAAsB;EAC1B,MAAM,WAAW,OAAO,OAAO,QAAQ,wBAAsB;AAC7D,MAAI,SACF,QAAO,aAAa,QAAQ,SAAS,cAAc,SAAS;AAE9D,SAAO;;AAGT,aACQ,CAAC,MAAM,MAAM,MAAM,UAAU,QAC7B;AACJ,qBAAmB,QAAQ;AAC3B,YAAU,QAAQ;AAClB,SAAO,QAAQ;AACf,aAAW;GAEd;CAED,MAAM,eAAe,MAAkB;AACrC,MAAI,CAAC,MAAM,UAAW;AAEtB,MAAI,CAAC,mBAAmB,OAAO;AAC7B,aAAU,QAAQ,eAAe;AACjC,sBAAmB,QAAQ;;AAG7B,aAAW,CAAC,EAAE,OAAO,EAAE,MAAM;AAC7B,aAAW,QAAQ;AACnB,OAAK,gBAAgB,GAAG,UAAU,MAAM;AACxC,WAAS,KACP,iBAAiB,QAAQ,WAAW,UAAU,EAC9C,iBAAiB,QAAQ,aAAa,YAAY,CACnD;;CAGH,MAAM,eAAe,MAAkB;EACrC,MAAM,EAAE,OAAO,UAAU;EACzB,MAAM,UAAU,QAAQ,SAAS;EACjC,MAAM,UAAU,QAAQ,SAAS;AACjC,SAAO,QAAQ,aAAa,QAAQ,UAAU;AAC9C,OAAK,UAAU,GAAG,QAAQ,MAAM;;CAGlC,MAAM,aAAa,MAAmB;AAGpC,MAAI,CAAC,WAAW,MAAO;AAEvB,aAAW,EAAE;AACb,YAAU,QAAQ,QAAQ;AAC1B,SAAO,QAAQ;AACf,aAAW,QAAQ;AACnB,WAAS,SAAS,YAAY,WAAW,CAAC;AAC1C,aAAW,EAAE;AACb,MAAI,EACF,MAAK,cAAc,GAAG,UAAU,MAAM;;CAI1C,MAAM,UAAU,iBAAiB,QAAQ,aAAa,YAAY;AAElE,uBAAsB;AACpB,WAAS;AACT,aAAW;GACX;AAEF,QAAO;EACL,MAAM,eAAe;AACnB,UAAO,mBAAmB,QACtB,GAAG,QAAQ,MAAM,MACjB,QAAQ,MAAM,KAAK;IACvB;EACF;EACA;EACD"}