pro-design-vue 0.0.1-beta.1

package/es/components/table/src/components/ColumnSetting/GroupCheckboxList.vue.mjs

@@ -0,0 +1,46 @@
+import _sfc_main from './GroupCheckboxList.vue2.mjs';
+import { resolveComponent, createElementBlock, openBlock, normalizeClass, createVNode } from 'vue';
+import _export_sfc from '../../../../../_virtual/_plugin-vue_export-helper.mjs';
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CheckboxList = resolveComponent("CheckboxList");
+  return openBlock(), createElementBlock(
+    "div",
+    {
+      class: normalizeClass(_ctx.listClass)
+    },
+    [
+      createVNode(_component_CheckboxList, {
+        title: _ctx.intl.getMessage("tableToolBar.leftFixedTitle", "\u56FA\u5B9A\u5728\u5DE6\u4FA7"),
+        list: _ctx.leftList,
+        checkable: _ctx.checkable,
+        draggable: _ctx.draggable,
+        className: _ctx.className,
+        listsHeight: _ctx.listsHeight
+      }, null, 8, ["title", "list", "checkable", "draggable", "className", "listsHeight"]),
+      createVNode(_component_CheckboxList, {
+        title: _ctx.intl.getMessage("tableToolBar.noFixedTitle", "\u4E0D\u56FA\u5B9A"),
+        list: _ctx.list,
+        checkable: _ctx.checkable,
+        draggable: _ctx.draggable,
+        className: _ctx.className,
+        showTitle: _ctx.showLeft || _ctx.showRight,
+        listsHeight: _ctx.listsHeight
+      }, null, 8, ["title", "list", "checkable", "draggable", "className", "showTitle", "listsHeight"]),
+      createVNode(_component_CheckboxList, {
+        title: _ctx.intl.getMessage("tableToolBar.rightFixedTitle", "\u56FA\u5B9A\u5728\u53F3\u4FA7"),
+        list: _ctx.rightList,
+        checkable: _ctx.checkable,
+        draggable: _ctx.draggable,
+        className: _ctx.className,
+        listsHeight: _ctx.listsHeight
+      }, null, 8, ["title", "list", "checkable", "draggable", "className", "listsHeight"])
+    ],
+    2
+    /* CLASS */
+  );
+}
+var GroupCheckboxList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { GroupCheckboxList as default };
+//# sourceMappingURL=GroupCheckboxList.vue.mjs.map

package/es/components/table/src/components/ColumnSetting/GroupCheckboxList.vue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupCheckboxList.vue.mjs","sources":["../../../../../../../../packages/components/table/src/components/ColumnSetting/GroupCheckboxList.vue"],"sourcesContent":["<!--\n * @Author: shen\n * @Date: 2023-11-18 20:37:59\n * @LastEditors: shen\n * @LastEditTime: 2025-08-27 13:44:52\n * @Description:\n-->\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { defineComponent, ref, watch, computed } from 'vue'\nimport { useIntl } from '@pro-design-vue/components/config-provider'\nimport CheckboxList from './CheckboxList.vue'\n\nexport default defineComponent({\n  name: 'GroupCheckboxList',\n  components: { CheckboxList },\n  inheritAttrs: false,\n  props: {\n    className: String,\n    checkable: {\n      type: Boolean,\n      default: true,\n    },\n    draggable: {\n      type: Boolean,\n      default: true,\n    },\n    listsHeight: {\n      type: Number,\n      default: undefined,\n    },\n    localColumns: {\n      type: Array as PropType<any[]>,\n      default: () => [],\n    },\n  },\n  setup(props) {\n    const intl = useIntl()\n    const rightList = ref<any[]>([])\n    const leftList = ref<any[]>([])\n    const list = ref<any[]>([])\n\n    watch(\n      () => props.localColumns,\n      () => {\n        const right: any[] = []\n        const left: any[] = []\n        const center: any[] = []\n        props.localColumns.forEach((item: any) => {\n          /** 不在 setting 中展示的 */\n          if (item.hideInSetting) {\n            return\n          }\n          const { fixed } = item\n          if (fixed === 'left' || fixed === true) {\n            left.push(item)\n            return\n          }\n          if (fixed === 'right') {\n            right.push(item)\n            return\n          }\n          center.push(item)\n        })\n        rightList.value = right\n        leftList.value = left\n        list.value = center\n      },\n      {\n        immediate: true,\n      },\n    )\n\n    const showRight = computed(() => rightList.value && rightList.value.length > 0)\n    const showLeft = computed(() => leftList.value && leftList.value.length > 0)\n\n    const listClass = computed(() => ({\n      [`${props.className}-list`]: true,\n      [`${props.className}-list-group`]: showRight.value || showLeft.value,\n    }))\n    return { intl, showRight, showLeft, rightList, leftList, list, listClass }\n  },\n})\n</script>\n\n<template>\n  <div :class=\"listClass\">\n    <CheckboxList\n      :title=\"intl.getMessage('tableToolBar.leftFixedTitle', '固定在左侧')\"\n      :list=\"leftList\"\n      :checkable=\"checkable\"\n      :draggable=\"draggable\"\n      :className=\"className\"\n      :listsHeight=\"listsHeight\"\n    />\n    <CheckboxList\n      :title=\"intl.getMessage('tableToolBar.noFixedTitle', '不固定')\"\n      :list=\"list\"\n      :checkable=\"checkable\"\n      :draggable=\"draggable\"\n      :className=\"className\"\n      :showTitle=\"showLeft || showRight\"\n      :listsHeight=\"listsHeight\"\n    />\n    <CheckboxList\n      :title=\"intl.getMessage('tableToolBar.rightFixedTitle', '固定在右侧')\"\n      :list=\"rightList\"\n      :checkable=\"checkable\"\n      :draggable=\"draggable\"\n      :className=\"className\"\n      :listsHeight=\"listsHeight\"\n    />\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_createVNode"],"mappings":";;;;;;AAsFE,EAAA,OAAAA,WAAA,EAAAC,kBAAA;AAAA,IA0BM,KAAA;AAAA,IAAA;AAAA,MA1BA,KAAA,EAAKC,cAAA,CAAE,IAAA,CAAA,SAAS;AAAA,KAAA;AAAA;MACpBC,YAOE,uBAAA,EAAA;AAAA,QANC,KAAA,EAAO,IAAA,MAAK,UAAA,CAAU,+BAAA,gCAAA,CAAA;AAAA,QACtB,MAAM,IAAA,CAAA,QAAA;AAAA,QACN,WAAW,IAAA,CAAA,SAAA;AAAA,QACX,WAAW,IAAA,CAAA,SAAA;AAAA,QACX,WAAW,IAAA,CAAA,SAAA;AAAA,QACX,aAAa,IAAA,CAAA;AAAA,OAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,OAAA,EAAA,QAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,CAAA,CAAA;AAAA,MAEhBA,YAQE,uBAAA,EAAA;AAAA,QAPC,KAAA,EAAO,IAAA,MAAK,UAAA,CAAU,6BAAA,oBAAA,CAAA;AAAA,QACtB,MAAM,IAAA,CAAA,IAAA;AAAA,QACN,WAAW,IAAA,CAAA,SAAA;AAAA,QACX,WAAW,IAAA,CAAA,SAAA;AAAA,QACX,WAAW,IAAA,CAAA,SAAA;AAAA,QACX,SAAA,EAAW,IAAA,CAAA,QAAA,IAAY,IAAA,CAAA,SAAA;AAAA,QACvB,aAAa,IAAA,CAAA;AAAA,OAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,CAAA,CAAA;AAAA,MAEhBA,YAOE,uBAAA,EAAA;AAAA,QANC,KAAA,EAAO,IAAA,MAAK,UAAA,CAAU,gCAAA,gCAAA,CAAA;AAAA,QACtB,MAAM,IAAA,CAAA,SAAA;AAAA,QACN,WAAW,IAAA,CAAA,SAAA;AAAA,QACX,WAAW,IAAA,CAAA,SAAA;AAAA,QACX,WAAW,IAAA,CAAA,SAAA;AAAA,QACX,aAAa,IAAA,CAAA;AAAA,OAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,OAAA,EAAA,QAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,CAAA;AAAA;;;;;;;;;"}

package/es/components/table/src/components/ColumnSetting/GroupCheckboxList.vue2.mjs

@@ -0,0 +1,73 @@
+import { defineComponent, ref, watch, computed } from 'vue';
+import CheckboxList from './CheckboxList.vue.mjs';
+import { useIntl } from '../../../../config-provider/src/useIntl.mjs';
+
+var _sfc_main = defineComponent({
+  name: "GroupCheckboxList",
+  components: { CheckboxList },
+  inheritAttrs: false,
+  props: {
+    className: String,
+    checkable: {
+      type: Boolean,
+      default: true
+    },
+    draggable: {
+      type: Boolean,
+      default: true
+    },
+    listsHeight: {
+      type: Number,
+      default: void 0
+    },
+    localColumns: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(props) {
+    const intl = useIntl();
+    const rightList = ref([]);
+    const leftList = ref([]);
+    const list = ref([]);
+    watch(
+      () => props.localColumns,
+      () => {
+        const right = [];
+        const left = [];
+        const center = [];
+        props.localColumns.forEach((item) => {
+          if (item.hideInSetting) {
+            return;
+          }
+          const { fixed } = item;
+          if (fixed === "left" || fixed === true) {
+            left.push(item);
+            return;
+          }
+          if (fixed === "right") {
+            right.push(item);
+            return;
+          }
+          center.push(item);
+        });
+        rightList.value = right;
+        leftList.value = left;
+        list.value = center;
+      },
+      {
+        immediate: true
+      }
+    );
+    const showRight = computed(() => rightList.value && rightList.value.length > 0);
+    const showLeft = computed(() => leftList.value && leftList.value.length > 0);
+    const listClass = computed(() => ({
+      [`${props.className}-list`]: true,
+      [`${props.className}-list-group`]: showRight.value || showLeft.value
+    }));
+    return { intl, showRight, showLeft, rightList, leftList, list, listClass };
+  }
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=GroupCheckboxList.vue2.mjs.map

package/es/components/table/src/components/ColumnSetting/GroupCheckboxList.vue2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupCheckboxList.vue2.mjs","sources":["../../../../../../../../packages/components/table/src/components/ColumnSetting/GroupCheckboxList.vue"],"sourcesContent":["<!--\n * @Author: shen\n * @Date: 2023-11-18 20:37:59\n * @LastEditors: shen\n * @LastEditTime: 2025-08-27 13:44:52\n * @Description:\n-->\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { defineComponent, ref, watch, computed } from 'vue'\nimport { useIntl } from '@pro-design-vue/components/config-provider'\nimport CheckboxList from './CheckboxList.vue'\n\nexport default defineComponent({\n  name: 'GroupCheckboxList',\n  components: { CheckboxList },\n  inheritAttrs: false,\n  props: {\n    className: String,\n    checkable: {\n      type: Boolean,\n      default: true,\n    },\n    draggable: {\n      type: Boolean,\n      default: true,\n    },\n    listsHeight: {\n      type: Number,\n      default: undefined,\n    },\n    localColumns: {\n      type: Array as PropType<any[]>,\n      default: () => [],\n    },\n  },\n  setup(props) {\n    const intl = useIntl()\n    const rightList = ref<any[]>([])\n    const leftList = ref<any[]>([])\n    const list = ref<any[]>([])\n\n    watch(\n      () => props.localColumns,\n      () => {\n        const right: any[] = []\n        const left: any[] = []\n        const center: any[] = []\n        props.localColumns.forEach((item: any) => {\n          /** 不在 setting 中展示的 */\n          if (item.hideInSetting) {\n            return\n          }\n          const { fixed } = item\n          if (fixed === 'left' || fixed === true) {\n            left.push(item)\n            return\n          }\n          if (fixed === 'right') {\n            right.push(item)\n            return\n          }\n          center.push(item)\n        })\n        rightList.value = right\n        leftList.value = left\n        list.value = center\n      },\n      {\n        immediate: true,\n      },\n    )\n\n    const showRight = computed(() => rightList.value && rightList.value.length > 0)\n    const showLeft = computed(() => leftList.value && leftList.value.length > 0)\n\n    const listClass = computed(() => ({\n      [`${props.className}-list`]: true,\n      [`${props.className}-list-group`]: showRight.value || showLeft.value,\n    }))\n    return { intl, showRight, showLeft, rightList, leftList, list, listClass }\n  },\n})\n</script>\n\n<template>\n  <div :class=\"listClass\">\n    <CheckboxList\n      :title=\"intl.getMessage('tableToolBar.leftFixedTitle', '固定在左侧')\"\n      :list=\"leftList\"\n      :checkable=\"checkable\"\n      :draggable=\"draggable\"\n      :className=\"className\"\n      :listsHeight=\"listsHeight\"\n    />\n    <CheckboxList\n      :title=\"intl.getMessage('tableToolBar.noFixedTitle', '不固定')\"\n      :list=\"list\"\n      :checkable=\"checkable\"\n      :draggable=\"draggable\"\n      :className=\"className\"\n      :showTitle=\"showLeft || showRight\"\n      :listsHeight=\"listsHeight\"\n    />\n    <CheckboxList\n      :title=\"intl.getMessage('tableToolBar.rightFixedTitle', '固定在右侧')\"\n      :list=\"rightList\"\n      :checkable=\"checkable\"\n      :draggable=\"draggable\"\n      :className=\"className\"\n      :listsHeight=\"listsHeight\"\n    />\n  </div>\n</template>\n"],"names":[],"mappings":";;;;AAaA,gBAAe,eAAA,CAAgB;AAAA,EAC7B,IAAA,EAAM,mBAAA;AAAA,EACN,UAAA,EAAY,EAAE,YAAA,EAAa;AAAA,EAC3B,YAAA,EAAc,KAAA;AAAA,EACd,KAAA,EAAO;AAAA,IACL,SAAA,EAAW,MAAA;AAAA,IACX,SAAA,EAAW;AAAA,MACT,IAAA,EAAM,OAAA;AAAA,MACN,OAAA,EAAS;AAAA,KACX;AAAA,IACA,SAAA,EAAW;AAAA,MACT,IAAA,EAAM,OAAA;AAAA,MACN,OAAA,EAAS;AAAA,KACX;AAAA,IACA,WAAA,EAAa;AAAA,MACX,IAAA,EAAM,MAAA;AAAA,MACN,OAAA,EAAS;AAAA,KACX;AAAA,IACA,YAAA,EAAc;AAAA,MACZ,IAAA,EAAM,KAAA;AAAA,MACN,OAAA,EAAS,MAAM;AAAC;AAClB,GACF;AAAA,EACA,MAAM,KAAA,EAAO;AACX,IAAA,MAAM,OAAO,OAAA,EAAQ;AACrB,IAAA,MAAM,SAAA,GAAY,GAAA,CAAW,EAAE,CAAA;AAC/B,IAAA,MAAM,QAAA,GAAW,GAAA,CAAW,EAAE,CAAA;AAC9B,IAAA,MAAM,IAAA,GAAO,GAAA,CAAW,EAAE,CAAA;AAE1B,IAAA,KAAA;AAAA,MACE,MAAM,KAAA,CAAM,YAAA;AAAA,MACZ,MAAM;AACJ,QAAA,MAAM,QAAe,EAAC;AACtB,QAAA,MAAM,OAAc,EAAC;AACrB,QAAA,MAAM,SAAgB,EAAC;AACvB,QAAA,KAAA,CAAM,YAAA,CAAa,OAAA,CAAQ,CAAC,IAAA,KAAc;AAExC,UAAA,IAAI,KAAK,aAAA,EAAe;AACtB,YAAA;AAAA,UACF;AACA,UAAA,MAAM,EAAE,OAAM,GAAI,IAAA;AAClB,UAAA,IAAI,KAAA,KAAU,MAAA,IAAU,KAAA,KAAU,IAAA,EAAM;AACtC,YAAA,IAAA,CAAK,KAAK,IAAI,CAAA;AACd,YAAA;AAAA,UACF;AACA,UAAA,IAAI,UAAU,OAAA,EAAS;AACrB,YAAA,KAAA,CAAM,KAAK,IAAI,CAAA;AACf,YAAA;AAAA,UACF;AACA,UAAA,MAAA,CAAO,KAAK,IAAI,CAAA;AAAA,QAClB,CAAC,CAAA;AACD,QAAA,SAAA,CAAU,KAAA,GAAQ,KAAA;AAClB,QAAA,QAAA,CAAS,KAAA,GAAQ,IAAA;AACjB,QAAA,IAAA,CAAK,KAAA,GAAQ,MAAA;AAAA,MACf,CAAA;AAAA,MACA;AAAA,QACE,SAAA,EAAW;AAAA;AACb,KACF;AAEA,IAAA,MAAM,SAAA,GAAY,SAAS,MAAM,SAAA,CAAU,SAAS,SAAA,CAAU,KAAA,CAAM,SAAS,CAAC,CAAA;AAC9E,IAAA,MAAM,QAAA,GAAW,SAAS,MAAM,QAAA,CAAS,SAAS,QAAA,CAAS,KAAA,CAAM,SAAS,CAAC,CAAA;AAE3E,IAAA,MAAM,SAAA,GAAY,SAAS,OAAO;AAAA,MAChC,CAAC,CAAA,EAAG,KAAA,CAAM,SAAS,OAAO,GAAG,IAAA;AAAA,MAC7B,CAAC,GAAG,KAAA,CAAM,SAAS,aAAa,GAAG,SAAA,CAAU,SAAS,QAAA,CAAS;AAAA,KACjE,CAAE,CAAA;AACF,IAAA,OAAO,EAAE,IAAA,EAAM,SAAA,EAAW,UAAU,SAAA,EAAW,QAAA,EAAU,MAAM,SAAA,EAAU;AAAA,EAC3E;AACF,CAAC,CAAA;;;;"}

package/es/components/table/src/components/Drag/RowHandler.vue.d.ts

@@ -0,0 +1,27 @@
+import type { PropType } from 'vue';
+import type { ColumnType, DefaultRecordType, Key } from '../interface';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    columnKey: (StringConstructor | NumberConstructor)[];
+    disabled: BooleanConstructor;
+    column: PropType<ColumnType<DefaultRecordType>>;
+}>, {
+    dragIcon: string;
+    dragging: import("vue").Ref<boolean, boolean>;
+    className: import("vue").ComputedRef<{
+        [x: string]: boolean;
+    }>;
+    spanRef: import("vue").Ref<HTMLSpanElement | undefined, HTMLSpanElement | undefined>;
+    top: import("vue").Ref<number, number>;
+    height: import("vue").Ref<number, number>;
+    rowKey: import("vue").Ref<Key, Key>;
+    rowKeyType: import("vue").ComputedRef<"string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function">;
+    onMousedown: (event: MouseEvent) => void;
+    onTouchStart: (event: TouchEvent) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    columnKey: (StringConstructor | NumberConstructor)[];
+    disabled: BooleanConstructor;
+    column: PropType<ColumnType<DefaultRecordType>>;
+}>> & Readonly<{}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/components/table/src/components/Drag/RowHandler.vue.mjs

@@ -0,0 +1,25 @@
+import _sfc_main from './RowHandler.vue2.mjs';
+import { createElementBlock, openBlock, withModifiers, normalizeClass } from 'vue';
+import _export_sfc from '../../../../../_virtual/_plugin-vue_export-helper.mjs';
+
+const _hoisted_1 = ["aria-grabbed", "data-scroll-top", "data-height", "data-row-key", "data-row-key-type", "innerHTML"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", {
+    ref: "spanRef",
+    class: normalizeClass(_ctx.className),
+    "aria-grabbed": _ctx.dragging,
+    "aria-hidden": true,
+    "data-scroll-top": _ctx.top,
+    "data-height": _ctx.height,
+    "data-row-key": _ctx.rowKey,
+    "data-row-key-type": _ctx.rowKeyType,
+    innerHTML: _ctx.dragIcon,
+    unselectable: "on",
+    onMousedown: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.onMousedown && _ctx.onMousedown(...args), ["stop"])),
+    "on:touchstartPassive": _cache[1] || (_cache[1] = (...args) => _ctx.onTouchStart && _ctx.onTouchStart(...args))
+  }, null, 42, _hoisted_1);
+}
+var RowHandler = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { RowHandler as default };
+//# sourceMappingURL=RowHandler.vue.mjs.map

package/es/components/table/src/components/Drag/RowHandler.vue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowHandler.vue.mjs","sources":["../../../../../../../../packages/components/table/src/components/Drag/RowHandler.vue"],"sourcesContent":["<!--\n * @Author: shen\n * @Date: 2023-11-06 16:03:18\n * @LastEditors: shen\n * @LastEditTime: 2025-08-29 13:59:21\n * @Description:\n-->\n<script lang=\"ts\">\nimport type { PropType, VNode } from 'vue'\nimport type { ColumnType, DefaultRecordType, DragRowEventInfo, Key } from '../interface'\nimport type { RafFrame } from '../../utils/raf'\n\nimport {\n  defineComponent,\n  ref,\n  computed,\n  watch,\n  onMounted,\n  onBeforeUnmount,\n  render,\n  shallowRef,\n  createVNode,\n  reactive,\n} from 'vue'\nimport { useInjectTable } from '../context/TableContext'\nimport { useInjectBody } from '../context/BodyContext'\nimport { useInjectBodyRow } from '../context/BodyRowsContext'\nimport { useInjectSlots } from '../context/TableSlotsContext'\nimport {\n  ICON_TYPE_DOWN,\n  ICON_TYPE_FORBID,\n  ICON_TYPE_UP,\n  OFFSET_X,\n  OFFSET_Y,\n  DOWN,\n  UP,\n} from './constant'\nimport { dragForbidIcon, dragUpAndDownIcon, dragIcon } from './icon'\nimport { eventsClose } from '../../utils/util'\nimport { useAutoScroll } from '../../hooks/useAutoScroll'\nimport raf from '../../utils/raf'\n\nexport default defineComponent({\n  name: 'RowDragHandler',\n  props: {\n    columnKey: [String, Number],\n    disabled: Boolean,\n    column: Object as PropType<ColumnType<DefaultRecordType>>,\n  },\n  setup(props, { slots }) {\n    const dragging = ref(false)\n    const spanRef = ref<HTMLSpanElement>()\n\n    const {\n      prefixCls,\n      dragRowsHandle,\n      draggingRowKey,\n      insertToRowKey,\n      onRowDragEnd,\n      scrollTo,\n      bodyMaxWidth,\n      isMyChildren,\n      getRecordByKey,\n      getIndexsByKey,\n      childrenColumnName,\n      getKeyByIndexs,\n      scrollTop,\n      scrollLeft,\n      showVerticalScrollbar,\n      showHorizontalScrollbar,\n    } = useInjectTable()\n    const { dragRowPlaceholderRef, bodyRef } = useInjectBody()\n    const { height, top, rowKey } = useInjectBodyRow()\n    const tableSlotsContext = useInjectSlots()\n\n    let rafFrame: RafFrame\n    const clientY = ref()\n    const clientX = ref()\n    const clientY2 = ref()\n    const dragGhostDom = document.createElement('div')\n    const allowed = ref(true)\n    let cacheMouseEvent: MouseEvent | null = null\n    let bodyRect: DOMRect | Record<string, any> = {}\n    let parentOffsetWidth = 0\n    const destroyHandlers: Array<() => void> = []\n    let dragGhostImage: VNode | null = null\n    const iconType = ref(ICON_TYPE_DOWN)\n    const fromIndexs = computed(() => getIndexsByKey(rowKey.value))\n\n    onMounted(() => {\n      if (dragRowsHandle.has(props.columnKey!)) {\n        dragRowsHandle.get?.(props.columnKey!)?.add(spanRef.value!)\n      } else {\n        dragRowsHandle.set(props.columnKey!, new Set([spanRef.value!]))\n      }\n    })\n    onBeforeUnmount(() => {\n      dragRowsHandle.get(props.columnKey!)?.delete(spanRef.value!)\n      if (dragRowsHandle.get(props.columnKey!)?.size === 0) {\n        dragRowsHandle.delete(props.columnKey!)\n      }\n      raf.cancel(rafFrame)\n      render(null, dragGhostDom)\n    })\n\n    const batchEvent = (eventList: any) => {\n      eventList.forEach((config: any) => {\n        const { target, type, listener, options } = config\n        target.addEventListener(type, listener, options)\n      })\n      destroyHandlers.push(() => {\n        eventList.forEach((config: any) => {\n          const { target, type, listener, options } = config\n          target.removeEventListener(type, listener, options)\n        })\n      })\n    }\n    const rowDragEvent = shallowRef<MouseEvent | Touch>()\n    const handleMouseMoveOrTouchMove = (\n      event: MouseEvent | Touch,\n      cacheEvent: MouseEvent | Touch,\n    ) => {\n      rowDragEvent.value = event\n      if (!dragging.value) {\n        if (eventsClose(event, cacheEvent, 4)) {\n          return\n        }\n        dragging.value = true\n        clientY2.value = event.clientY\n        draggingRowKey.value = rowKey.value\n        parentOffsetWidth = spanRef.value!.parentElement!.offsetWidth\n        getRootDocument().appendChild(dragGhostDom)\n        renderDragGhost()\n      }\n      allowed.value = true\n      clientX.value = event.clientX\n      clientY.value = event.clientY\n      ;(() => {\n        const { y, height } = bodyRect\n        const pageYOffset = window.pageYOffset || document.documentElement.scrollTop\n        return clientY.value + 10 <= y\n          ? ((dragGhostDom.style.top = y + pageYOffset - 20 + 'px'), true)\n          : clientY.value > y + height &&\n              ((dragGhostDom.style.top = y + pageYOffset + height - OFFSET_Y + 'px'), true)\n      })()\n        ? ((allowed.value = false), ensureCleared())\n        : (check(event, false), (dragGhostDom.style.top = event.pageY - OFFSET_Y + 'px'))\n      ;(() => {\n        const { x, width } = bodyRect\n        const left = window.pageXOffset || document.documentElement.scrollLeft\n        return clientX.value + OFFSET_X <= x\n          ? ((dragGhostDom.style.left = x + left - 20 + 'px'), true)\n          : clientX.value + OFFSET_X >= x + width &&\n              ((dragGhostDom.style.left = x + left + width - 20 + 'px'), true)\n      })()\n        ? (allowed.value = false)\n        : (dragGhostDom.style.left = event.pageX - OFFSET_X + 'px')\n    }\n\n    let cacheStartTouch: TouchList[number] | null | undefined\n    let cacheTouch: TouchList[number] | null | undefined\n    const getTouch = (touches: TouchList) => {\n      for (let i = 0; i < touches.length; i++) {\n        if (touches[i]?.identifier === cacheTouch?.identifier) {\n          return touches[i]\n        }\n      }\n      return null\n    }\n\n    const handleMouseUpOrToucheEnd = (event: MouseEvent | Touch) => {\n      if (dragging.value) {\n        dragging.value = false\n        getRootDocument().removeChild(dragGhostDom)\n      }\n      rowDragEvent.value = event\n      cacheMouseEvent = null\n      cacheTouch = null\n      cacheStartTouch = null\n      ensureCleared()\n      draggingRowKey.value = null\n      insertToRowKey.value = null\n      dragRowPlaceholderRef.value!.style.opacity = '0'\n      destroyHandlers.forEach((fn) => fn())\n      destroyHandlers.length = 0\n      raf.cancel(rafFrame)\n    }\n\n    const documentTouchMoveHandler = (event: TouchEvent) => {\n      event.cancelable && event.preventDefault()\n    }\n    const touchMoveHandler = (event: TouchEvent) => {\n      const touch = getTouch(event.touches)\n      touch && handleMouseMoveOrTouchMove(touch, cacheTouch!)\n    }\n    const touchEndHandler = (event: TouchEvent) => {\n      let touch = getTouch(event.touches)\n      if (!touch) {\n        touch = cacheStartTouch\n      }\n      handleMouseUpOrToucheEnd(touch!)\n    }\n\n    const contextmenuHandler = (event: MouseEvent) => event.preventDefault()\n    const mouseMoveHandler = (event: MouseEvent) => {\n      handleMouseMoveOrTouchMove(event, cacheMouseEvent!)\n    }\n    const mouseUpHandler = (event: MouseEvent) => {\n      handleMouseUpOrToucheEnd(event)\n    }\n\n    const renderDragGhostImage = () => {\n      let dragIcon = dragUpAndDownIcon\n      if (iconType.value === ICON_TYPE_FORBID) {\n        dragIcon = dragForbidIcon\n      }\n      if (tableSlotsContext.rowDragGhost) {\n        if ('preTargetInfo' in dragRowEventInfo) {\n          return tableSlotsContext.rowDragGhost({\n            record: getRecordByKey(rowKey.value),\n            preTargetInfo: dragRowEventInfo.preTargetInfo,\n            nextTargetInfo: dragRowEventInfo.nextTargetInfo,\n            column: props.column!,\n            icon: createVNode(\n              'span',\n              { class: `${prefixCls.value}-drag-ghost-image-icon`, innerHTML: dragIcon },\n              null,\n            ),\n            allowed: allowed.value,\n            dragging: dragging.value,\n            event: rowDragEvent.value!,\n          })\n        }\n      }\n      return [\n        createVNode(\n          'span',\n          { class: `${prefixCls.value}-drag-ghost-image-icon`, innerHTML: dragIcon },\n          null,\n        ),\n        createVNode(\n          'span',\n          {\n            class: `${prefixCls.value}-drag-ghost-image-label`,\n            style: { maxWidth: `${parentOffsetWidth}px` },\n          },\n          [slots.label?.()],\n        ),\n      ]\n    }\n\n    const renderDragGhost = () => {\n      if (!dragGhostImage) {\n        dragGhostImage = createVNode(renderDragGhostImage)\n      }\n      render(dragGhostImage, dragGhostDom)\n    }\n\n    watch(\n      [prefixCls],\n      () => {\n        dragGhostDom.className = `${prefixCls.value}-drag-ghost-image`\n      },\n      { immediate: true },\n    )\n    const dragRowEventInfo = reactive<DragRowEventInfo>({} as DragRowEventInfo)\n    const getRootDocument = () => document.fullscreenElement || document.body\n\n    const getDragDirection = () => {\n      const { top } = spanRef.value!.getBoundingClientRect()\n      return clientY.value - top >= 0 ? DOWN : UP\n    }\n\n    const handleDraging = () => {\n      const { preTargetInfo, nextTargetInfo } = dragRowEventInfo\n      if (isMyChildren(rowKey.value, preTargetInfo?.rowKey || '') || !allowed.value) {\n        dragRowPlaceholderRef.value!.style.opacity = '0'\n        insertToRowKey.value = null\n        return\n      }\n      let nextTargetRowKey: any = null\n      const preTargetParentIndexs = preTargetInfo ? preTargetInfo.indexs.slice(0, -1) : []\n      let preTargetParentRowKey = preTargetParentIndexs.length\n        ? getKeyByIndexs(preTargetParentIndexs.join('-'))\n        : null\n      if (nextTargetInfo) {\n        const { y, centerY, record, rowKey: nextRowKey } = nextTargetInfo\n        if (\n          record[childrenColumnName.value] &&\n          clientY.value > y + OFFSET_Y &&\n          clientY.value < centerY\n        ) {\n          nextTargetRowKey = nextRowKey\n        }\n      }\n      if (preTargetInfo && nextTargetRowKey === null) {\n        if (\n          (nextTargetInfo &&\n            !isMyChildren(preTargetInfo.rowKey, nextTargetInfo.rowKey) &&\n            nextTargetInfo.indexs.slice(0, -1).join('-') !==\n              preTargetInfo.indexs.slice(0, -1).join('-')) ||\n          !nextTargetInfo\n        ) {\n          const { centerY, height, y } = preTargetInfo\n          if (clientY.value < centerY + height / 4) {\n            nextTargetRowKey = preTargetParentIndexs.length\n              ? getKeyByIndexs(preTargetParentIndexs.join('-'))\n              : null\n          } else if (\n            clientY.value < y + height &&\n            (!nextTargetInfo || nextTargetInfo.indexs.length < preTargetInfo.indexs.length)\n          ) {\n            const preTargetParentParentIndexs = preTargetParentIndexs.slice(0, -1)\n            nextTargetRowKey = preTargetParentParentIndexs.length\n              ? getKeyByIndexs(preTargetParentParentIndexs.join('-'))\n              : null\n            preTargetParentRowKey = nextTargetRowKey\n          } else {\n            preTargetParentRowKey = null\n          }\n        } else {\n          isMyChildren(preTargetInfo.rowKey, nextTargetInfo.rowKey) &&\n            (nextTargetRowKey = preTargetInfo.rowKey)\n        }\n      }\n\n      nextTargetRowKey === rowKey.value && (nextTargetRowKey = null)\n      if (nextTargetRowKey !== nextTargetInfo?.rowKey) {\n        dragRowPlaceholderRef.value!.style.opacity = '1'\n        dragRowPlaceholderRef.value!.style.top = `${preTargetInfo ? preTargetInfo.top + preTargetInfo.height : 0}px`\n        dragRowPlaceholderRef.value!.style.width = `${bodyMaxWidth.value}px`\n        if (!nextTargetInfo && preTargetInfo) {\n          dragRowPlaceholderRef.value!.style.top =\n            preTargetInfo.top +\n            preTargetInfo.height -\n            dragRowPlaceholderRef.value!.offsetHeight +\n            'px'\n        } else if (!preTargetInfo) {\n          dragRowPlaceholderRef.value!.style.top = `0px`\n        }\n      } else {\n        dragRowPlaceholderRef.value!.style.opacity = '0'\n      }\n      dragRowEventInfo.insertToRowKey = (nextTargetRowKey ?? preTargetParentRowKey) as Key\n      insertToRowKey.value = dragRowEventInfo.insertToRowKey\n    }\n\n    watch([dragging, clientY, allowed], () => {\n      raf.cancel(rafFrame)\n      rafFrame = raf(() => {\n        dragging.value && !allowed.value && (iconType.value = ICON_TYPE_FORBID)\n        if (dragging.value && allowed.value) {\n          const dir = getDragDirection()\n          iconType.value = dir === DOWN ? ICON_TYPE_DOWN : ICON_TYPE_UP\n          const targetInfos: any[] = []\n          for (const dragHandle of dragRowsHandle.get(props.columnKey!)!.values()) {\n            const { y } = dragHandle.getBoundingClientRect()\n            const top = +dragHandle.getAttribute('data-scroll-top')!\n            const height = +dragHandle.getAttribute('data-height')!\n            const rowKeyType = dragHandle.getAttribute('data-row-key-type')\n            let rowKey: Key = dragHandle.getAttribute('data-row-key')!\n            rowKey = rowKeyType === 'number' ? +rowKey : rowKey\n            targetInfos.push({\n              y,\n              top,\n              height,\n              rowKey,\n              record: getRecordByKey(rowKey),\n              indexs: getIndexsByKey(rowKey),\n              centerY: y + height / 2,\n            })\n          }\n          targetInfos.sort((a, b) => a.centerY - b.centerY)\n          let preTargetInfo = targetInfos[targetInfos.length - 1] || null\n          let nextTargetInfo = null\n          const currentClientY = clientY.value\n          for (let i = 0, len = targetInfos.length; i < len; i++) {\n            const targetInfo = targetInfos[i]\n            const { centerY } = targetInfo\n            if (currentClientY <= centerY) {\n              preTargetInfo = targetInfos[i - 1] || null\n              nextTargetInfo = targetInfo\n              break\n            }\n          }\n\n          const newDragRowEventInfo = {\n            record: getRecordByKey(rowKey.value),\n            top: top.value,\n            height: height.value,\n            dir,\n            rowKey: rowKey.value,\n            event: rowDragEvent.value,\n            column: props.column,\n            preTargetInfo,\n            nextTargetInfo,\n            fromIndexs: fromIndexs.value,\n            insertToRowKey: undefined,\n          }\n          Object.assign(dragRowEventInfo, newDragRowEventInfo)\n          handleDraging()\n        } else {\n          dragRowPlaceholderRef.value!.style.opacity = '0'\n        }\n      })\n    })\n\n    const { check, ensureCleared } = useAutoScroll({\n      scrollContainer: bodyRef,\n      scrollAxis: 'y',\n      getVerticalPosition: () => scrollTop.value,\n      setVerticalPosition: (pos: number) => {\n        scrollTo(pos)\n      },\n      getHorizontalPosition: () => scrollLeft.value,\n      setHorizontalPosition: (pos: number) => scrollTo({ left: pos }),\n      showVerticalScrollbar: showVerticalScrollbar,\n      showHorizontalScrollbar: showHorizontalScrollbar,\n    })\n\n    watch(dragging, () => {\n      if (!dragging.value && allowed.value) {\n        onRowDragEnd(Object.assign({}, dragRowEventInfo, { event: rowDragEvent.value }))\n      }\n    })\n\n    const className = computed(() => ({\n      [`${prefixCls.value}-drag-handle`]: true,\n      [`${prefixCls.value}-drag-handle-disabled`]: props.disabled,\n      [`${prefixCls.value}-drag-dragging`]: dragging.value,\n    }))\n\n    return {\n      dragIcon,\n      dragging,\n      className,\n      spanRef,\n      top,\n      height,\n      rowKey,\n      rowKeyType: computed(() => typeof rowKey.value),\n      onMousedown: (event: MouseEvent) => {\n        event.preventDefault()\n        if (props.disabled) {\n          return\n        }\n        dragging.value = false\n        cacheMouseEvent = event\n        bodyRect = bodyRef.value!.getBoundingClientRect()\n        batchEvent([\n          { target: document, type: 'mousemove', listener: mouseMoveHandler },\n          { target: document, type: 'mouseup', listener: mouseUpHandler },\n          { target: document, type: 'contextmenu', listener: contextmenuHandler },\n        ])\n      },\n      onTouchStart: (event: TouchEvent) => {\n        if (props.disabled) return\n        dragging.value = false\n        const touch = event.touches[0]\n        cacheStartTouch = touch\n        cacheTouch = touch\n        bodyRect = bodyRef.value!.getBoundingClientRect()\n        const spanDom = spanRef.value\n        const eventList = [\n          {\n            target: document,\n            type: 'touchmove',\n            listener: documentTouchMoveHandler,\n            options: { passive: false },\n          },\n          {\n            target: spanDom,\n            type: 'touchmove',\n            listener: touchMoveHandler,\n            options: { passive: true },\n          },\n          {\n            target: spanDom,\n            type: 'touchend',\n            listener: touchEndHandler,\n            options: { passive: true },\n          },\n          {\n            target: spanDom,\n            type: 'touchcancel',\n            listener: touchEndHandler,\n            options: { passive: true },\n          },\n        ]\n        batchEvent(eventList)\n      },\n    }\n  },\n})\n</script>\n\n<template>\n  <span\n    ref=\"spanRef\"\n    :class=\"className\"\n    :aria-grabbed=\"dragging\"\n    :aria-hidden=\"true\"\n    :data-scroll-top=\"top\"\n    :data-height=\"height\"\n    :data-row-key=\"rowKey\"\n    :data-row-key-type=\"rowKeyType\"\n    :innerHTML=\"dragIcon\"\n    unselectable=\"on\"\n    @mousedown.stop=\"onMousedown\"\n    @touchstartPassive=\"onTouchStart\"\n  >\n  </span>\n</template>\n"],"names":["_createElementBlock","_normalizeClass"],"mappings":";;;;;;sBAifEA,kBAAA,CAcO,MAAA,EAAA;AAAA,IAbL,GAAA,EAAI,SAAA;AAAA,IACH,KAAA,EAAKC,cAAA,CAAE,IAAA,CAAA,SAAS,CAAA;AAAA,IAChB,gBAAc,IAAA,CAAA,QAAA;AAAA,IACd,aAAA,EAAa,IAAA;AAAA,IACb,mBAAiB,IAAA,CAAA,GAAA;AAAA,IACjB,eAAa,IAAA,CAAA,MAAA;AAAA,IACb,gBAAc,IAAA,CAAA,MAAA;AAAA,IACd,qBAAmB,IAAA,CAAA,UAAA;AAAA,IACnB,WAAW,IAAA,CAAA,QAAA;AAAA,IACZ,YAAA,EAAa,IAAA;AAAA,IACZ,aAAS,MAAA,+CAAO,IAAA,CAAA,WAAA,IAAA,KAAA,WAAA,CAAA,GAAA,IAAA,CAAA,EAAW,CAAA,MAAA,CAAA,CAAA,CAAA;AAAA,IAC3B,sBAAA,EAAiB,MAAA,CAAA,CAAA,CAAA,KAAA,OAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAE,IAAA,CAAA,YAAA,IAAA,IAAA,CAAA,YAAA,CAAA,GAAA,IAAA,CAAA;AAAA,GAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,CAAA;;;;;;"}

package/es/components/table/src/components/Drag/RowHandler.vue2.mjs

@@ -0,0 +1,413 @@
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, render, shallowRef, watch, reactive, createVNode } from 'vue';
+import { useInjectTable } from '../context/TableContext.mjs';
+import { useInjectBody } from '../context/BodyContext.mjs';
+import { useInjectBodyRow } from '../context/BodyRowsContext.mjs';
+import { useInjectSlots } from '../context/TableSlotsContext.mjs';
+import { ICON_TYPE_DOWN, ICON_TYPE_FORBID, ICON_TYPE_UP, DOWN, UP, OFFSET_Y, OFFSET_X } from './constant.mjs';
+import { dragIcon, dragUpAndDownIcon, dragForbidIcon } from './icon.mjs';
+import { eventsClose } from '../../utils/util.mjs';
+import { useAutoScroll } from '../../hooks/useAutoScroll.mjs';
+import raf from '../../utils/raf.mjs';
+
+var _sfc_main = defineComponent({
+  name: "RowDragHandler",
+  props: {
+    columnKey: [String, Number],
+    disabled: Boolean,
+    column: Object
+  },
+  setup(props, { slots }) {
+    const dragging = ref(false);
+    const spanRef = ref();
+    const {
+      prefixCls,
+      dragRowsHandle,
+      draggingRowKey,
+      insertToRowKey,
+      onRowDragEnd,
+      scrollTo,
+      bodyMaxWidth,
+      isMyChildren,
+      getRecordByKey,
+      getIndexsByKey,
+      childrenColumnName,
+      getKeyByIndexs,
+      scrollTop,
+      scrollLeft,
+      showVerticalScrollbar,
+      showHorizontalScrollbar
+    } = useInjectTable();
+    const { dragRowPlaceholderRef, bodyRef } = useInjectBody();
+    const { height, top, rowKey } = useInjectBodyRow();
+    const tableSlotsContext = useInjectSlots();
+    let rafFrame;
+    const clientY = ref();
+    const clientX = ref();
+    const clientY2 = ref();
+    const dragGhostDom = document.createElement("div");
+    const allowed = ref(true);
+    let cacheMouseEvent = null;
+    let bodyRect = {};
+    let parentOffsetWidth = 0;
+    const destroyHandlers = [];
+    let dragGhostImage = null;
+    const iconType = ref(ICON_TYPE_DOWN);
+    const fromIndexs = computed(() => getIndexsByKey(rowKey.value));
+    onMounted(() => {
+      var _a, _b;
+      if (dragRowsHandle.has(props.columnKey)) {
+        (_b = (_a = dragRowsHandle.get) == null ? void 0 : _a.call(dragRowsHandle, props.columnKey)) == null ? void 0 : _b.add(spanRef.value);
+      } else {
+        dragRowsHandle.set(props.columnKey, /* @__PURE__ */ new Set([spanRef.value]));
+      }
+    });
+    onBeforeUnmount(() => {
+      var _a, _b;
+      (_a = dragRowsHandle.get(props.columnKey)) == null ? void 0 : _a.delete(spanRef.value);
+      if (((_b = dragRowsHandle.get(props.columnKey)) == null ? void 0 : _b.size) === 0) {
+        dragRowsHandle.delete(props.columnKey);
+      }
+      raf.cancel(rafFrame);
+      render(null, dragGhostDom);
+    });
+    const batchEvent = (eventList) => {
+      eventList.forEach((config) => {
+        const { target, type, listener, options } = config;
+        target.addEventListener(type, listener, options);
+      });
+      destroyHandlers.push(() => {
+        eventList.forEach((config) => {
+          const { target, type, listener, options } = config;
+          target.removeEventListener(type, listener, options);
+        });
+      });
+    };
+    const rowDragEvent = shallowRef();
+    const handleMouseMoveOrTouchMove = (event, cacheEvent) => {
+      rowDragEvent.value = event;
+      if (!dragging.value) {
+        if (eventsClose(event, cacheEvent, 4)) {
+          return;
+        }
+        dragging.value = true;
+        clientY2.value = event.clientY;
+        draggingRowKey.value = rowKey.value;
+        parentOffsetWidth = spanRef.value.parentElement.offsetWidth;
+        getRootDocument().appendChild(dragGhostDom);
+        renderDragGhost();
+      }
+      allowed.value = true;
+      clientX.value = event.clientX;
+      clientY.value = event.clientY;
+      (() => {
+        const { y, height: height2 } = bodyRect;
+        const pageYOffset = window.pageYOffset || document.documentElement.scrollTop;
+        return clientY.value + 10 <= y ? (dragGhostDom.style.top = y + pageYOffset - 20 + "px", true) : clientY.value > y + height2 && (dragGhostDom.style.top = y + pageYOffset + height2 - OFFSET_Y + "px", true);
+      })() ? (allowed.value = false, ensureCleared()) : (check(event, false), dragGhostDom.style.top = event.pageY - OFFSET_Y + "px");
+      (() => {
+        const { x, width } = bodyRect;
+        const left = window.pageXOffset || document.documentElement.scrollLeft;
+        return clientX.value + OFFSET_X <= x ? (dragGhostDom.style.left = x + left - 20 + "px", true) : clientX.value + OFFSET_X >= x + width && (dragGhostDom.style.left = x + left + width - 20 + "px", true);
+      })() ? allowed.value = false : dragGhostDom.style.left = event.pageX - OFFSET_X + "px";
+    };
+    let cacheStartTouch;
+    let cacheTouch;
+    const getTouch = (touches) => {
+      var _a;
+      for (let i = 0; i < touches.length; i++) {
+        if (((_a = touches[i]) == null ? void 0 : _a.identifier) === (cacheTouch == null ? void 0 : cacheTouch.identifier)) {
+          return touches[i];
+        }
+      }
+      return null;
+    };
+    const handleMouseUpOrToucheEnd = (event) => {
+      if (dragging.value) {
+        dragging.value = false;
+        getRootDocument().removeChild(dragGhostDom);
+      }
+      rowDragEvent.value = event;
+      cacheMouseEvent = null;
+      cacheTouch = null;
+      cacheStartTouch = null;
+      ensureCleared();
+      draggingRowKey.value = null;
+      insertToRowKey.value = null;
+      dragRowPlaceholderRef.value.style.opacity = "0";
+      destroyHandlers.forEach((fn) => fn());
+      destroyHandlers.length = 0;
+      raf.cancel(rafFrame);
+    };
+    const documentTouchMoveHandler = (event) => {
+      event.cancelable && event.preventDefault();
+    };
+    const touchMoveHandler = (event) => {
+      const touch = getTouch(event.touches);
+      touch && handleMouseMoveOrTouchMove(touch, cacheTouch);
+    };
+    const touchEndHandler = (event) => {
+      let touch = getTouch(event.touches);
+      if (!touch) {
+        touch = cacheStartTouch;
+      }
+      handleMouseUpOrToucheEnd(touch);
+    };
+    const contextmenuHandler = (event) => event.preventDefault();
+    const mouseMoveHandler = (event) => {
+      handleMouseMoveOrTouchMove(event, cacheMouseEvent);
+    };
+    const mouseUpHandler = (event) => {
+      handleMouseUpOrToucheEnd(event);
+    };
+    const renderDragGhostImage = () => {
+      var _a;
+      let dragIcon2 = dragUpAndDownIcon;
+      if (iconType.value === ICON_TYPE_FORBID) {
+        dragIcon2 = dragForbidIcon;
+      }
+      if (tableSlotsContext.rowDragGhost) {
+        if ("preTargetInfo" in dragRowEventInfo) {
+          return tableSlotsContext.rowDragGhost({
+            record: getRecordByKey(rowKey.value),
+            preTargetInfo: dragRowEventInfo.preTargetInfo,
+            nextTargetInfo: dragRowEventInfo.nextTargetInfo,
+            column: props.column,
+            icon: createVNode(
+              "span",
+              { class: `${prefixCls.value}-drag-ghost-image-icon`, innerHTML: dragIcon2 },
+              null
+            ),
+            allowed: allowed.value,
+            dragging: dragging.value,
+            event: rowDragEvent.value
+          });
+        }
+      }
+      return [
+        createVNode(
+          "span",
+          { class: `${prefixCls.value}-drag-ghost-image-icon`, innerHTML: dragIcon2 },
+          null
+        ),
+        createVNode(
+          "span",
+          {
+            class: `${prefixCls.value}-drag-ghost-image-label`,
+            style: { maxWidth: `${parentOffsetWidth}px` }
+          },
+          [(_a = slots.label) == null ? void 0 : _a.call(slots)]
+        )
+      ];
+    };
+    const renderDragGhost = () => {
+      if (!dragGhostImage) {
+        dragGhostImage = createVNode(renderDragGhostImage);
+      }
+      render(dragGhostImage, dragGhostDom);
+    };
+    watch(
+      [prefixCls],
+      () => {
+        dragGhostDom.className = `${prefixCls.value}-drag-ghost-image`;
+      },
+      { immediate: true }
+    );
+    const dragRowEventInfo = reactive({});
+    const getRootDocument = () => document.fullscreenElement || document.body;
+    const getDragDirection = () => {
+      const { top: top2 } = spanRef.value.getBoundingClientRect();
+      return clientY.value - top2 >= 0 ? DOWN : UP;
+    };
+    const handleDraging = () => {
+      const { preTargetInfo, nextTargetInfo } = dragRowEventInfo;
+      if (isMyChildren(rowKey.value, (preTargetInfo == null ? void 0 : preTargetInfo.rowKey) || "") || !allowed.value) {
+        dragRowPlaceholderRef.value.style.opacity = "0";
+        insertToRowKey.value = null;
+        return;
+      }
+      let nextTargetRowKey = null;
+      const preTargetParentIndexs = preTargetInfo ? preTargetInfo.indexs.slice(0, -1) : [];
+      let preTargetParentRowKey = preTargetParentIndexs.length ? getKeyByIndexs(preTargetParentIndexs.join("-")) : null;
+      if (nextTargetInfo) {
+        const { y, centerY, record, rowKey: nextRowKey } = nextTargetInfo;
+        if (record[childrenColumnName.value] && clientY.value > y + OFFSET_Y && clientY.value < centerY) {
+          nextTargetRowKey = nextRowKey;
+        }
+      }
+      if (preTargetInfo && nextTargetRowKey === null) {
+        if (nextTargetInfo && !isMyChildren(preTargetInfo.rowKey, nextTargetInfo.rowKey) && nextTargetInfo.indexs.slice(0, -1).join("-") !== preTargetInfo.indexs.slice(0, -1).join("-") || !nextTargetInfo) {
+          const { centerY, height: height2, y } = preTargetInfo;
+          if (clientY.value < centerY + height2 / 4) {
+            nextTargetRowKey = preTargetParentIndexs.length ? getKeyByIndexs(preTargetParentIndexs.join("-")) : null;
+          } else if (clientY.value < y + height2 && (!nextTargetInfo || nextTargetInfo.indexs.length < preTargetInfo.indexs.length)) {
+            const preTargetParentParentIndexs = preTargetParentIndexs.slice(0, -1);
+            nextTargetRowKey = preTargetParentParentIndexs.length ? getKeyByIndexs(preTargetParentParentIndexs.join("-")) : null;
+            preTargetParentRowKey = nextTargetRowKey;
+          } else {
+            preTargetParentRowKey = null;
+          }
+        } else {
+          isMyChildren(preTargetInfo.rowKey, nextTargetInfo.rowKey) && (nextTargetRowKey = preTargetInfo.rowKey);
+        }
+      }
+      nextTargetRowKey === rowKey.value && (nextTargetRowKey = null);
+      if (nextTargetRowKey !== (nextTargetInfo == null ? void 0 : nextTargetInfo.rowKey)) {
+        dragRowPlaceholderRef.value.style.opacity = "1";
+        dragRowPlaceholderRef.value.style.top = `${preTargetInfo ? preTargetInfo.top + preTargetInfo.height : 0}px`;
+        dragRowPlaceholderRef.value.style.width = `${bodyMaxWidth.value}px`;
+        if (!nextTargetInfo && preTargetInfo) {
+          dragRowPlaceholderRef.value.style.top = preTargetInfo.top + preTargetInfo.height - dragRowPlaceholderRef.value.offsetHeight + "px";
+        } else if (!preTargetInfo) {
+          dragRowPlaceholderRef.value.style.top = `0px`;
+        }
+      } else {
+        dragRowPlaceholderRef.value.style.opacity = "0";
+      }
+      dragRowEventInfo.insertToRowKey = nextTargetRowKey != null ? nextTargetRowKey : preTargetParentRowKey;
+      insertToRowKey.value = dragRowEventInfo.insertToRowKey;
+    };
+    watch([dragging, clientY, allowed], () => {
+      raf.cancel(rafFrame);
+      rafFrame = raf(() => {
+        dragging.value && !allowed.value && (iconType.value = ICON_TYPE_FORBID);
+        if (dragging.value && allowed.value) {
+          const dir = getDragDirection();
+          iconType.value = dir === DOWN ? ICON_TYPE_DOWN : ICON_TYPE_UP;
+          const targetInfos = [];
+          for (const dragHandle of dragRowsHandle.get(props.columnKey).values()) {
+            const { y } = dragHandle.getBoundingClientRect();
+            const top2 = +dragHandle.getAttribute("data-scroll-top");
+            const height2 = +dragHandle.getAttribute("data-height");
+            const rowKeyType = dragHandle.getAttribute("data-row-key-type");
+            let rowKey2 = dragHandle.getAttribute("data-row-key");
+            rowKey2 = rowKeyType === "number" ? +rowKey2 : rowKey2;
+            targetInfos.push({
+              y,
+              top: top2,
+              height: height2,
+              rowKey: rowKey2,
+              record: getRecordByKey(rowKey2),
+              indexs: getIndexsByKey(rowKey2),
+              centerY: y + height2 / 2
+            });
+          }
+          targetInfos.sort((a, b) => a.centerY - b.centerY);
+          let preTargetInfo = targetInfos[targetInfos.length - 1] || null;
+          let nextTargetInfo = null;
+          const currentClientY = clientY.value;
+          for (let i = 0, len = targetInfos.length; i < len; i++) {
+            const targetInfo = targetInfos[i];
+            const { centerY } = targetInfo;
+            if (currentClientY <= centerY) {
+              preTargetInfo = targetInfos[i - 1] || null;
+              nextTargetInfo = targetInfo;
+              break;
+            }
+          }
+          const newDragRowEventInfo = {
+            record: getRecordByKey(rowKey.value),
+            top: top.value,
+            height: height.value,
+            dir,
+            rowKey: rowKey.value,
+            event: rowDragEvent.value,
+            column: props.column,
+            preTargetInfo,
+            nextTargetInfo,
+            fromIndexs: fromIndexs.value,
+            insertToRowKey: void 0
+          };
+          Object.assign(dragRowEventInfo, newDragRowEventInfo);
+          handleDraging();
+        } else {
+          dragRowPlaceholderRef.value.style.opacity = "0";
+        }
+      });
+    });
+    const { check, ensureCleared } = useAutoScroll({
+      scrollContainer: bodyRef,
+      scrollAxis: "y",
+      getVerticalPosition: () => scrollTop.value,
+      setVerticalPosition: (pos) => {
+        scrollTo(pos);
+      },
+      getHorizontalPosition: () => scrollLeft.value,
+      setHorizontalPosition: (pos) => scrollTo({ left: pos }),
+      showVerticalScrollbar,
+      showHorizontalScrollbar
+    });
+    watch(dragging, () => {
+      if (!dragging.value && allowed.value) {
+        onRowDragEnd(Object.assign({}, dragRowEventInfo, { event: rowDragEvent.value }));
+      }
+    });
+    const className = computed(() => ({
+      [`${prefixCls.value}-drag-handle`]: true,
+      [`${prefixCls.value}-drag-handle-disabled`]: props.disabled,
+      [`${prefixCls.value}-drag-dragging`]: dragging.value
+    }));
+    return {
+      dragIcon,
+      dragging,
+      className,
+      spanRef,
+      top,
+      height,
+      rowKey,
+      rowKeyType: computed(() => typeof rowKey.value),
+      onMousedown: (event) => {
+        event.preventDefault();
+        if (props.disabled) {
+          return;
+        }
+        dragging.value = false;
+        cacheMouseEvent = event;
+        bodyRect = bodyRef.value.getBoundingClientRect();
+        batchEvent([
+          { target: document, type: "mousemove", listener: mouseMoveHandler },
+          { target: document, type: "mouseup", listener: mouseUpHandler },
+          { target: document, type: "contextmenu", listener: contextmenuHandler }
+        ]);
+      },
+      onTouchStart: (event) => {
+        if (props.disabled) return;
+        dragging.value = false;
+        const touch = event.touches[0];
+        cacheStartTouch = touch;
+        cacheTouch = touch;
+        bodyRect = bodyRef.value.getBoundingClientRect();
+        const spanDom = spanRef.value;
+        const eventList = [
+          {
+            target: document,
+            type: "touchmove",
+            listener: documentTouchMoveHandler,
+            options: { passive: false }
+          },
+          {
+            target: spanDom,
+            type: "touchmove",
+            listener: touchMoveHandler,
+            options: { passive: true }
+          },
+          {
+            target: spanDom,
+            type: "touchend",
+            listener: touchEndHandler,
+            options: { passive: true }
+          },
+          {
+            target: spanDom,
+            type: "touchcancel",
+            listener: touchEndHandler,
+            options: { passive: true }
+          }
+        ];
+        batchEvent(eventList);
+      }
+    };
+  }
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=RowHandler.vue2.mjs.map