tdesign-vue-next/cjs/drawer/hooks/index.js

TDesign Component for vue-next

/**
 * tdesign v1.11.5
 * (c) 2025 tdesign
 * @license MIT
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var Vue = require('vue');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);

function getSizeDraggable(sizeDraggable, limit) {
  if (typeof sizeDraggable === "boolean") {
    return {
      allowSizeDraggable: sizeDraggable,
      max: limit.max,
      min: limit.min
    };
  }
  return {
    allowSizeDraggable: true,
    max: sizeDraggable.max,
    min: sizeDraggable.min
  };
}
function calcSizeRange(size, min, max) {
  return Math.min(Math.max(size, min), max);
}
function calcMoveSize(placement, opts) {
  var x = opts.x,
    y = opts.y,
    max = opts.max,
    min = opts.min,
    maxWidth = opts.maxWidth,
    maxHeight = opts.maxHeight;
  var moveSize;
  switch (placement) {
    case "right":
      moveSize = calcSizeRange(maxWidth - x, min, max);
      break;
    case "left":
      moveSize = calcSizeRange(x, min, max);
      break;
    case "top":
      moveSize = calcSizeRange(y, min, max);
      break;
    case "bottom":
      moveSize = calcSizeRange(maxHeight - y, min, max);
      break;
    default:
      return moveSize;
  }
  return moveSize;
}

var useDrag = function useDrag(props) {
  var isSizeDragging = Vue.ref(false);
  var draggedSizeValue = Vue.ref(null);
  var enableDrag = function enableDrag() {
    document.addEventListener("mouseup", _handleMouseup, true);
    document.addEventListener("mousemove", handleMousemove, true);
    isSizeDragging.value = true;
  };
  var _handleMouseup = function handleMouseup() {
    document.removeEventListener("mouseup", _handleMouseup, true);
    document.removeEventListener("mousemove", handleMousemove, true);
    isSizeDragging.value = false;
  };
  var handleMousemove = function handleMousemove(e) {
    var _props$onSizeDragEnd;
    var x = e.x,
      y = e.y;
    var maxHeight = document.documentElement.clientHeight;
    var maxWidth = document.documentElement.clientWidth;
    var offsetHeight = 8;
    var offsetWidth = 8;
    var max = props.placement === "left" || props.placement === "right" ? maxWidth : maxHeight;
    var min = props.placement === "left" || props.placement === "right" ? offsetWidth : offsetHeight;
    var _getSizeDraggable = getSizeDraggable(props.sizeDraggable, {
        max: max,
        min: min
      }),
      allowSizeDraggable = _getSizeDraggable.allowSizeDraggable,
      limitMax = _getSizeDraggable.max,
      limitMin = _getSizeDraggable.min;
    if (!allowSizeDraggable || !isSizeDragging.value) return;
    var moveSize = calcMoveSize(props.placement, {
      x: x,
      y: y,
      maxWidth: maxWidth,
      maxHeight: maxHeight,
      max: limitMax,
      min: limitMin
    });
    if (typeof moveSize === "undefined") return;
    draggedSizeValue.value = "".concat(moveSize, "px");
    (_props$onSizeDragEnd = props.onSizeDragEnd) === null || _props$onSizeDragEnd === void 0 || _props$onSizeDragEnd.call(props, {
      e: e,
      size: moveSize
    });
  };
  var draggableLineStyles = Vue.computed(function () {
    var isHorizontal = ["right", "left"].includes(props.placement);
    var oppositeMap = {
      left: "right",
      right: "left",
      top: "bottom",
      bottom: "top"
    };
    return _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"]({
      zIndex: 1,
      position: "absolute",
      background: "transparent"
    }, oppositeMap[props.placement], 0), "width", isHorizontal ? "16px" : "100%"), "height", isHorizontal ? "100%" : "16px"), "cursor", isHorizontal ? "col-resize" : "row-resize");
  });
  return {
    draggedSizeValue: draggedSizeValue,
    enableDrag: enableDrag,
    draggableLineStyles: draggableLineStyles
  };
};

exports.useDrag = useDrag;
//# sourceMappingURL=index.js.map