xdesign-vue-next/cjs/drawer/hooks.js

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @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);

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 x = e.x,
      y = e.y;
    var maxHeight = document.documentElement.clientHeight;
    var maxWidth = document.documentElement.clientWidth;
    var offsetHeight = 8;
    var offsetWidth = 8;
    if (isSizeDragging.value && props.sizeDraggable) {
      if (props.placement === "right") {
        var moveLeft = Math.min(Math.max(maxWidth - x + offsetWidth, offsetWidth), maxWidth);
        draggedSizeValue.value = "".concat(moveLeft, "px");
      }
      if (props.placement === "left") {
        var moveRight = Math.min(Math.max(x + offsetWidth, offsetWidth), maxWidth);
        draggedSizeValue.value = "".concat(moveRight, "px");
      }
      if (props.placement === "top") {
        var moveBottom = Math.min(Math.max(y + offsetHeight, offsetHeight), maxHeight);
        draggedSizeValue.value = "".concat(moveBottom, "px");
      }
      if (props.placement === "bottom") {
        var moveTop = Math.min(Math.max(maxHeight - y + offsetHeight, offsetHeight), maxHeight);
        draggedSizeValue.value = "".concat(moveTop, "px");
      }
    }
  };
  var draggableLineStyles = vue.computed(function () {
    var _ref;
    var isHorizontal = ["right", "left"].includes(props.placement);
    var oppositeMap = {
      left: "right",
      right: "left",
      top: "bottom",
      bottom: "top"
    };
    return _ref = {
      zIndex: 1,
      position: "absolute",
      background: "transparent"
    }, _defineProperty__default["default"](_ref, oppositeMap[props.placement], 0), _defineProperty__default["default"](_ref, "width", isHorizontal ? "16px" : "100%"), _defineProperty__default["default"](_ref, "height", isHorizontal ? "100%" : "16px"), _defineProperty__default["default"](_ref, "cursor", isHorizontal ? "col-resize" : "row-resize"), _ref;
  });
  return {
    draggedSizeValue: draggedSizeValue,
    enableDrag: enableDrag,
    draggableLineStyles: draggableLineStyles
  };
};

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