3f0d7e1c45d3453f50bd6cdca18dc27bb6bcb486b7ffa63490c3994049e1760d4c6fdd8a6f39ce665568fc4bbf313f766f4b113dca7988edc1237f5d761439 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. import { computed, ref, watch, onBeforeUnmount } from 'vue';
  2. import { useWindowSize, clamp, useEventListener } from '@vueuse/core';
  3. import { addUnit } from '../../../../utils/dom/style.mjs';
  4. function useResizable(props, target) {
  5. const { width, height } = useWindowSize();
  6. const isHorizontal = computed(() => ["ltr", "rtl"].includes(props.direction));
  7. const sign = computed(() => ["ltr", "ttb"].includes(props.direction) ? 1 : -1);
  8. const windowSize = computed(() => isHorizontal.value ? width.value : height.value);
  9. const getSize = computed(() => {
  10. return clamp(startSize.value + sign.value * offset.value, 4, windowSize.value);
  11. });
  12. const startSize = ref(0);
  13. const offset = ref(0);
  14. const isResizing = ref(false);
  15. const hasStartedDragging = ref(false);
  16. let startPos = [];
  17. let cleanups = [];
  18. const getActualSize = () => {
  19. var _a;
  20. const drawerEl = (_a = target.value) == null ? void 0 : _a.closest('[aria-modal="true"]');
  21. if (drawerEl) {
  22. return isHorizontal.value ? drawerEl.offsetWidth : drawerEl.offsetHeight;
  23. }
  24. return 100;
  25. };
  26. watch(() => [props.size, props.resizable], () => {
  27. hasStartedDragging.value = false;
  28. startSize.value = 0;
  29. offset.value = 0;
  30. onMouseUp();
  31. });
  32. const onMousedown = (e) => {
  33. if (!props.resizable)
  34. return;
  35. if (!hasStartedDragging.value) {
  36. startSize.value = getActualSize();
  37. hasStartedDragging.value = true;
  38. }
  39. startPos = [e.pageX, e.pageY];
  40. isResizing.value = true;
  41. cleanups.push(useEventListener(window, "mouseup", onMouseUp), useEventListener(window, "mousemove", onMouseMove));
  42. };
  43. const onMouseMove = (e) => {
  44. const { pageX, pageY } = e;
  45. const offsetX = pageX - startPos[0];
  46. const offsetY = pageY - startPos[1];
  47. offset.value = isHorizontal.value ? offsetX : offsetY;
  48. };
  49. const onMouseUp = () => {
  50. startPos = [];
  51. startSize.value = getSize.value;
  52. offset.value = 0;
  53. isResizing.value = false;
  54. cleanups.forEach((cleanup2) => cleanup2 == null ? void 0 : cleanup2());
  55. cleanups = [];
  56. };
  57. const cleanup = useEventListener(target, "mousedown", onMousedown);
  58. onBeforeUnmount(() => {
  59. cleanup();
  60. onMouseUp();
  61. });
  62. return {
  63. size: computed(() => {
  64. return hasStartedDragging.value ? `${getSize.value}px` : addUnit(props.size);
  65. }),
  66. isResizing,
  67. isHorizontal
  68. };
  69. }
  70. export { useResizable };
  71. //# sourceMappingURL=useResizable.mjs.map