tdesign-vue-next/es/hooks/useDragSort.mjs

TDesign Component for vue-next

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

import { onUnmounted } from 'vue';

function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
var traversalTabNavs = function traversalTabNavs(tabNavs, fn) {
  var _iterator = _createForOfIteratorHelper(tabNavs),
    _step;
  try {
    for (_iterator.s(); !(_step = _iterator.n()).done;) {
      var itemNode = _step.value;
      if (itemNode.getAttribute("draggable")) {
        fn(itemNode);
      }
    }
  } catch (err) {
    _iterator.e(err);
  } finally {
    _iterator.f();
  }
};
var handleTarget = function handleTarget(target, tabNavs) {
  var resultTarget;
  traversalTabNavs(tabNavs, function (itemNode) {
    if (itemNode.contains(target)) {
      resultTarget = itemNode;
    }
  });
  return resultTarget;
};
function useDragSort(props) {
  var navsWrap = null;
  var dragged;
  var enterTargets = [];
  var dragstart = function dragstart(event) {
    var target = event.target;
    dragged = target;
    target.style.opacity = "0.5";
  };
  var dragend = function dragend(event) {
    event.target.style.opacity = "";
  };
  var dragover = function dragover(event) {
    event.preventDefault();
  };
  var dragenter = function dragenter(event) {
    var target = handleTarget(event.target, navsWrap.children);
    if (target && target !== dragged && target.draggable) {
      target.firstChild.style.outline = "1px dashed #0052d9";
      if (!enterTargets.includes(target)) {
        enterTargets.push(target);
      }
    }
  };
  var dragleave = function dragleave(event) {
    var target = event.target;
    for (var _i = 0, _enterTargets = enterTargets; _i < _enterTargets.length; _i++) {
      var enterTarget = _enterTargets[_i];
      if (!enterTarget.contains(target)) {
        enterTarget.firstChild.style.outline = "none";
      }
    }
  };
  var drop = function drop(event) {
    event.preventDefault();
    traversalTabNavs(navsWrap.children, function (tabNav) {
      tabNav.firstChild.style.outline = "none";
    });
    var target = handleTarget(event.target, navsWrap.children);
    if (target && target.parentNode !== dragged && target.draggable) {
      var _props$onDragSort;
      var dragIndex = [].indexOf.call(navsWrap.children, dragged);
      var targetIndex = [].indexOf.call(navsWrap.children, target);
      if (targetIndex > dragIndex) {
        target = navsWrap.children[targetIndex + 1];
      }
      var currentIndex = props.theme === "card" ? dragIndex : dragIndex - 1;
      var endIndex = props.theme === "card" ? targetIndex : targetIndex - 1;
      (_props$onDragSort = props.onDragSort) === null || _props$onDragSort === void 0 || _props$onDragSort.call(props, {
        currentIndex: currentIndex,
        current: props.panels[currentIndex].value,
        targetIndex: endIndex,
        target: props.panels[endIndex].value
      });
    }
  };
  function setNavsWrap(val) {
    navsWrap = val;
    navsWrap.addEventListener("dragstart", dragstart, false);
    navsWrap.addEventListener("dragend", dragend, false);
    navsWrap.addEventListener("dragover", dragover, false);
    navsWrap.addEventListener("dragenter", dragenter, false);
    document.addEventListener("dragleave", dragleave, false);
    document.addEventListener("mousemove", dragleave, false);
    navsWrap.addEventListener("drop", drop, false);
  }
  onUnmounted(function () {
    navsWrap.removeEventListener("dragstart", dragstart);
    navsWrap.removeEventListener("dragend", dragend);
    navsWrap.removeEventListener("dragover", dragover);
    navsWrap.removeEventListener("dragenter", dragenter);
    document.removeEventListener("dragleave", dragleave);
    document.removeEventListener("mousemove", dragleave);
    navsWrap.removeEventListener("drop", drop);
  });
  return {
    setNavsWrap: setNavsWrap
  };
}

export { useDragSort as default };
//# sourceMappingURL=useDragSort.mjs.map