plus-pro-components/es/components/table/src/table-column-drag-sort.vue2.mjs

Page level components developed based on Element Plus.

import { defineComponent, watch, openBlock, createBlock, unref, mergeProps, withCtx, createElementVNode, renderSlot, createTextVNode } from 'vue';
import Sortable from 'sortablejs';
import '../../utils/index.mjs';
import '../../../hooks/index.mjs';
import { ElTableColumn } from 'element-plus';
import { useLocale } from '../../../hooks/useLocale.mjs';
import { isPlainObject } from '../../utils/is.mjs';

const _hoisted_1 = { class: "plus-table-column-drag-icon" };
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "PlusTableColumnDragSort"
  },
  __name: "table-column-drag-sort",
  props: {
    sortable: { type: Boolean, default: true },
    tableInstance: { default: null },
    dragSortableTableColumnProps: { default: () => ({}) }
  },
  emits: ["dragSortEnd"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const { t } = useLocale();
    watch(
      () => props.tableInstance,
      (val) => {
        if (val && props.sortable) {
          rowDrop();
        }
      }
    );
    const rowDrop = () => {
      var _a, _b;
      const tbody = (_b = (_a = props.tableInstance) == null ? void 0 : _a.$el) == null ? void 0 : _b.querySelector(".el-table__body-wrapper tbody");
      if (!tbody) return;
      let config = {
        handle: ".plus-table-column-drag-icon",
        animation: 150,
        group: "box",
        easing: "cubic-bezier(1, 0, 0, 1)",
        chosenClass: "sortable-chosen",
        forceFallback: true,
        onEnd({ newIndex, oldIndex }) {
          emit("dragSortEnd", newIndex, oldIndex);
        }
      };
      if (isPlainObject(props.sortable)) {
        config = { ...config, ...props.sortable };
      }
      Sortable.create(tbody, config);
    };
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(ElTableColumn), mergeProps({
        key: "dragSort",
        label: unref(t)("plus.table.sort"),
        width: "60",
        "class-name": "plus-table-column-drag-sort"
      }, _ctx.dragSortableTableColumnProps), {
        default: withCtx(() => [
          createElementVNode("span", _hoisted_1, [
            renderSlot(_ctx.$slots, "drag-sort-icon", {}, () => [
              createTextVNode("\u2637")
            ])
          ])
        ]),
        _: 3
        /* FORWARDED */
      }, 16, ["label"]);
    };
  }
});

export { _sfc_main as default };