@fesjs/fes-design/es/draggable/draggable.js

fes-design for PC

import { defineComponent, ref, computed, createVNode, cloneVNode } from 'vue';
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import { mergeWith } from 'lodash-es';
import getPrefixCls from '../_util/getPrefixCls';
import { useTheme } from '../_theme/useTheme';
import { flatten, isComment } from '../_util/vnode';
import { UPDATE_MODEL_EVENT, DRAG_START_EVENT, DRAG_END_EVENT, useDraggable } from './useDraggable';

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const prefixCls = getPrefixCls('draggable');
const draggableProps = {
  modelValue: {
    type: Array,
    default: []
  },
  droppable: Boolean,
  disabled: Boolean,
  beforeDragend: Function,
  tag: {
    type: String,
    default: 'div'
  }
};
var draggable = defineComponent({
  name: 'FDraggable',
  props: draggableProps,
  emits: [UPDATE_MODEL_EVENT, DRAG_START_EVENT, DRAG_END_EVENT],
  setup(props, ctx) {
    useTheme();
    const rootRef = ref();
    const propsRef = computed(() => ({
      droppable: props.droppable,
      disabled: props.disabled,
      list: [...props.modelValue],
      beforeDragend: props.beforeDragend
    }));
    const Tag = computed(() => props.tag);
    const {
      onAnimationEnd,
      onDragstart,
      onDragover,
      onDragend,
      onMousemove,
      draggableItems
    } = useDraggable(rootRef, propsRef, ctx);
    const renderItem = (item, index) => {
      var _flatten, _ctx$slots$default, _ctx$slots, _ctx$slots$item, _ctx$slots2, _vNodes$0$props, _draggableItems$index, _draggableItems$index2;
      const vNodes = (_flatten = flatten(((_ctx$slots$default = (_ctx$slots = ctx.slots).default) === null || _ctx$slots$default === void 0 ? void 0 : _ctx$slots$default.call(_ctx$slots, {
        item,
        index
      })) || ((_ctx$slots$item = (_ctx$slots2 = ctx.slots).item) === null || _ctx$slots$item === void 0 ? void 0 : _ctx$slots$item.call(_ctx$slots2, {
        item,
        index
      })) || [])) === null || _flatten === void 0 ? void 0 : _flatten.filter(node => !isComment(node));
      if (!vNodes || !vNodes.length) {
        return;
      }
      if (vNodes.length > 1) {
        console.warn('[FDraggable]: default slot must be a root element');
      }
      const style = _objectSpread({}, ((_vNodes$0$props = vNodes[0].props) === null || _vNodes$0$props === void 0 ? void 0 : _vNodes$0$props.style) || {});
      mergeWith(style, (_draggableItems$index = draggableItems[index]) === null || _draggableItems$index === void 0 ? void 0 : _draggableItems$index.style, (value, srcValue) => srcValue || value);
      return cloneVNode(vNodes[0], {
        key: index,
        draggable: (_draggableItems$index2 = draggableItems[index]) === null || _draggableItems$index2 === void 0 ? void 0 : _draggableItems$index2.draggable,
        style
      });
    };
    return () => createVNode(Tag.value, {
      "ref": rootRef,
      "class": [`${prefixCls}`, propsRef.value.disabled && `${prefixCls}-disabled`],
      "onMousedown": onDragstart,
      "onDragover": onDragover,
      "onDragend": onDragend,
      "onDrop": onDragend,
      "onMouseup": onDragend,
      "onMousemove": onMousemove,
      "onTransitionend": onAnimationEnd
    }, {
      default: () => [props.modelValue.map(renderItem)]
    });
  }
});

export { draggable as default, draggableProps };