d850cc31ae72fd78da2bbcdd8b8c27c17dcde6d7e597220bbd46ca24a749bd18e67d97919cbb7bbee8fddd935c84edcb60da7aa87e4095b96d3f7f14ee3d62 2.5 KB

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