fangguo-component 1.1.2 → 1.1.4

package/dist/CustomMultipleInput-DRMTUtkE.js

@@ -0,0 +1,125 @@
+import { ElInput, ElDialog, ElButton } from "element-plus/es";
+import { defineComponent, ref, watch, openBlock, createElementBlock, createVNode, withKeys, createSlots, withCtx, createElementVNode, createTextVNode, createCommentVNode } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
+import './CustomMultipleInput.css';const _hoisted_1 = { class: "w-full" };
+const _hoisted_2 = { key: 0 };
+const _hoisted_3 = { class: "pt-[24px] pb-[12px]" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "CustomMultipleInput",
+  props: {
+    name: {
+      type: String,
+      default: "请输入"
+    },
+    modelValue: {
+      type: String,
+      required: true
+    },
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    clear: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["update:modelValue", "enter"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const inputValue = ref("");
+    watch(() => props.modelValue, (e) => inputValue.value = e, { immediate: true });
+    const inputChange = (e) => emit("update:modelValue", e);
+    const moreValue = ref("");
+    const moreShow = ref(false);
+    const open = () => {
+      moreValue.value = inputValue.value;
+      moreShow.value = true;
+    };
+    const save = () => {
+      emit("update:modelValue", moreValue.value);
+      moreShow.value = false;
+    };
+    const search = () => emit("enter");
+    return (_ctx, _cache) => {
+      const _component_el_input = ElInput;
+      const _component_el_button = ElButton;
+      const _component_el_dialog = ElDialog;
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_component_el_input, {
+          class: "custom-input",
+          modelValue: inputValue.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
+          placeholder: `${__props.name}${__props.multiple ? "，多个用逗号或空格分隔" : ""}`,
+          clearable: "",
+          onChange: inputChange,
+          onKeydown: withKeys(search, ["enter"])
+        }, createSlots({ _: 2 }, [
+          __props.multiple ? {
+            name: "append",
+            fn: withCtx(() => [
+              createElementVNode("span", { onClick: open }, "•••")
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["modelValue", "placeholder"]),
+        __props.multiple ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createVNode(_component_el_dialog, {
+            class: "order-dialog",
+            modelValue: moreShow.value,
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => moreShow.value = $event),
+            width: "480px",
+            title: __props.name,
+            "align-center": "",
+            draggable: "",
+            "close-on-click-modal": false
+          }, {
+            footer: withCtx(() => [
+              createElementVNode("div", _hoisted_3, [
+                createVNode(_component_el_button, {
+                  type: "info",
+                  plain: "",
+                  onClick: _cache[2] || (_cache[2] = ($event) => moreShow.value = false)
+                }, {
+                  default: withCtx(() => [..._cache[4] || (_cache[4] = [
+                    createTextVNode("取消", -1)
+                  ])]),
+                  _: 1
+                }),
+                createVNode(_component_el_button, {
+                  class: "!ml-[14px]",
+                  type: "primary",
+                  onClick: save
+                }, {
+                  default: withCtx(() => [..._cache[5] || (_cache[5] = [
+                    createTextVNode("确认", -1)
+                  ])]),
+                  _: 1
+                })
+              ])
+            ]),
+            default: withCtx(() => [
+              _cache[6] || (_cache[6] = createElementVNode("div", {
+                class: "py-[12px] text-fill-900",
+                style: { "font-family": "MicrosoftYaHei, sans-serif" }
+              }, " 多个值以逗号隔开或空格隔开 ", -1)),
+              createVNode(_component_el_input, {
+                modelValue: moreValue.value,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => moreValue.value = $event),
+                type: "textarea",
+                autosize: { minRows: 3, maxRows: 5 },
+                placeholder: "多个用逗号或空格分隔"
+              }, null, 8, ["modelValue"])
+            ]),
+            _: 1
+          }, 8, ["modelValue", "title"])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const CustomMultipleInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5686d705"]]);
+export {
+  CustomMultipleInput as C
+};

package/dist/CustomMultipleInput.css

@@ -1 +1,8 @@
-.custom-input[data-v-5686d705]{width:100%}.custom-input[data-v-5686d705] .el-input-group__append{cursor:pointer;padding-left:8px;padding-right:8px}
+.custom-input[data-v-5686d705] {
+    width: 100%
+}
+.custom-input[data-v-5686d705] .el-input-group__append {
+    cursor: pointer;
+    padding-left: 8px;
+    padding-right: 8px
+}

package/dist/DragResizable.css

@@ -1 +1,126 @@
-@charset "UTF-8";.customer-move-dialog{position:relative;z-index:99;overflow:hidden;background:#f1f3f9;border-radius:4px;box-sizing:border-box}.customer-move-dialog.floating{position:fixed;background-color:#fff;border:1px solid #b9bec7;box-shadow:0 0 8px 2px rgba(0,0,0,.16)}.customer-move-dialog.parent-constrained{position:absolute!important}.customer-move-dialog .drag-header{width:100%;height:15px}.customer-move-dialog .drag-header.draggable{cursor:move}.resize-handle{position:absolute;z-index:99;box-sizing:border-box}.resize-handle-t{top:0;right:0;left:0;height:6px;cursor:row-resize}.resize-handle-t:hover{border-top:2px solid #2779ff}.resize-handle-t:hover .resize-handle-area{display:block}.resize-handle-r{top:0;right:0;bottom:0;width:6px;cursor:col-resize}.resize-handle-r:hover{border-right:2px solid #2779ff}.resize-handle-b{right:0;bottom:0;left:0;height:6px;cursor:row-resize}.resize-handle-b:hover{border-bottom:2px solid #2779ff}.resize-handle-l{top:0;bottom:0;left:0;width:6px;cursor:col-resize}.resize-handle-l:hover{border-left:2px solid #2779ff}.resize-handle-rt{top:0;right:0;width:8px;height:8px;cursor:ne-resize}.resize-handle-rb{right:0;bottom:0;width:8px;height:8px;cursor:se-resize}.resize-handle-lb{bottom:0;left:0;width:8px;height:8px;cursor:sw-resize}.resize-handle-lt{top:0;left:0;width:8px;height:8px;cursor:nw-resize}.resize-handle-rt:hover,.resize-handle-rb:hover,.resize-handle-lb:hover,.resize-handle-lt:hover{background-color:#2779ff}.resize-handle-rt:after,.resize-handle-rb:after,.resize-handle-lb:after,.resize-handle-lt:after{position:absolute;top:50%;left:50%;width:6px;height:6px;background-color:transparent;border-radius:50%;content:"";transform:translate(-50%,-50%)}.dialog-content{height:calc(100% - 15px)}
+@charset "UTF-8";
+.customer-move-dialog {
+  position: relative;
+  z-index: 99;
+  overflow: hidden;
+  background: #f1f3f9;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+.customer-move-dialog.floating {
+  position: fixed;
+  background-color: #fff;
+  border: 1px solid #b9bec7;
+  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.16);
+}
+.customer-move-dialog.parent-constrained {
+  position: absolute !important;
+}
+.customer-move-dialog .drag-header {
+  width: 100%;
+  height: 15px;
+}
+.customer-move-dialog .drag-header.draggable {
+  cursor: move;
+}
+
+/* 调整大小的句柄样式 */
+.resize-handle {
+  position: absolute;
+  z-index: 99;
+  box-sizing: border-box;
+}
+.resize-handle-t {
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 6px;
+  cursor: row-resize;
+}
+.resize-handle-t:hover {
+  border-top: 2px solid #2779ff;
+}
+.resize-handle-t:hover .resize-handle-area {
+  display: block;
+}
+.resize-handle-r {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+}
+.resize-handle-r:hover {
+  border-right: 2px solid #2779ff;
+}
+.resize-handle-b {
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 6px;
+  cursor: row-resize;
+}
+.resize-handle-b:hover {
+  border-bottom: 2px solid #2779ff;
+}
+.resize-handle-l {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 6px;
+  cursor: col-resize;
+}
+.resize-handle-l:hover {
+  border-left: 2px solid #2779ff;
+}
+.resize-handle-rt {
+  top: 0;
+  right: 0;
+  width: 8px;
+  height: 8px;
+  cursor: ne-resize;
+}
+.resize-handle-rb {
+  right: 0;
+  bottom: 0;
+  width: 8px;
+  height: 8px;
+  cursor: se-resize;
+}
+.resize-handle-lb {
+  bottom: 0;
+  left: 0;
+  width: 8px;
+  height: 8px;
+  cursor: sw-resize;
+}
+.resize-handle-lt {
+  top: 0;
+  left: 0;
+  width: 8px;
+  height: 8px;
+  cursor: nw-resize;
+}
+.resize-handle-rt:hover,
+.resize-handle-rb:hover,
+.resize-handle-lb:hover,
+.resize-handle-lt:hover {
+  background-color: #2779ff;
+}
+.resize-handle-rt::after,
+.resize-handle-rb::after,
+.resize-handle-lb::after,
+.resize-handle-lt::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 6px;
+  height: 6px;
+  background-color: transparent;
+  border-radius: 50%;
+  content: "";
+  transform: translate(-50%, -50%);
+}
+.dialog-content {
+  height: calc(100% - 15px);
+}

package/dist/DragResizable.vue_vue_type_style_index_0_lang-BePpQHve.js

@@ -0,0 +1,331 @@
+import { defineComponent, ref, onMounted, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createElementVNode, createCommentVNode, renderSlot } from "vue";
+import './DragResizable.css';const _hoisted_1 = ["data-direction"];
+const _hoisted_2 = { class: "dialog-content" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "DragResizable",
+  props: {
+    width: { default: 100 },
+    height: { default: 100 },
+    minWidth: { default: 100 },
+    minHeight: { default: 100 },
+    maxWidth: {},
+    maxHeight: {},
+    left: {},
+    top: {},
+    handles: { default: () => ["t", "r", "b", "l", "rt", "rb", "lb", "lt"] },
+    draggable: { type: Boolean, default: true },
+    resizable: { type: Boolean, default: true },
+    overflowScreen: { type: Boolean, default: false },
+    floating: { type: Boolean, default: true },
+    parentSelector: { default: "" }
+  },
+  emits: ["resizing", "dragging", "resizeStop", "dragStop"],
+  setup(__props, { emit: __emit }) {
+    const moveDialogRef = ref();
+    const props = __props;
+    const emit = __emit;
+    let dialog = null;
+    let startX, startY, startWidth, startHeight, startTop, startLeft, direction, originalLeft, originalTop;
+    let isResizing = false;
+    let isDragging = false;
+    const getParentBounds = () => {
+      if (!props.parentSelector) {
+        return {
+          left: 0,
+          top: 0,
+          right: window.innerWidth,
+          bottom: window.innerHeight,
+          width: window.innerWidth,
+          height: window.innerHeight
+        };
+      }
+      const parent = document.querySelector(props.parentSelector);
+      if (!parent) {
+        return {
+          left: 0,
+          top: 0,
+          right: window.innerWidth,
+          bottom: window.innerHeight,
+          width: window.innerWidth,
+          height: window.innerHeight
+        };
+      }
+      const parentRect = parent.getBoundingClientRect();
+      return {
+        left: 0,
+        // 相对于父元素的左边距
+        top: 0,
+        // 相对于父元素的上边距
+        right: parentRect.width,
+        bottom: parentRect.height,
+        width: parentRect.width,
+        height: parentRect.height
+      };
+    };
+    const init = () => {
+      var _a, _b;
+      dialog = moveDialogRef.value;
+      if (!dialog) return;
+      let data = {
+        left: (_a = props.left) != null ? _a : window.innerWidth - props.width,
+        top: (_b = props.top) != null ? _b : window.innerHeight - props.height,
+        width: props.width,
+        height: props.height
+      };
+      data = limitScreen(data.left, data.top, data.width, data.height);
+      data = limitParent(data.left, data.top, data.width, data.height);
+      data = applyDimensionLimits(data.left, data.top, data.width, data.height);
+      if (props.floating) {
+        dialog.style.left = `${data.left}px`;
+        dialog.style.top = `${data.top}px`;
+        dialog.style.height = `${data.height}px`;
+      } else {
+        dialog.style.height = "100%";
+      }
+      if (props.parentSelector) {
+        const parent = document.querySelector(props.parentSelector);
+        if (parent) {
+          const parentStyle = window.getComputedStyle(parent);
+          if (parentStyle.position === "static") {
+            parent.style.position = "relative";
+          }
+        }
+      }
+      dialog.style.width = `${data.width}px`;
+      applySizeConstraintsToElement();
+      data.width;
+      data.height;
+      data.left;
+      data.top;
+    };
+    const applyDimensionLimits = (newLeft, newTop, newWidth, newHeight) => {
+      let width = Math.max(newWidth, props.minWidth);
+      let height = Math.max(newHeight, props.minHeight);
+      if (props.maxWidth != null) {
+        width = Math.min(width, props.maxWidth);
+      }
+      if (props.maxHeight != null) {
+        height = Math.min(height, props.maxHeight);
+      }
+      return {
+        left: newLeft,
+        top: newTop,
+        width,
+        height
+      };
+    };
+    const applySizeConstraintsToElement = () => {
+      dialog.style.minWidth = `${props.minWidth}px`;
+      dialog.style.minHeight = `${props.minHeight}px`;
+      if (props.maxWidth != null) {
+        dialog.style.maxWidth = `${props.maxWidth}px`;
+      }
+      if (props.maxHeight != null) {
+        dialog.style.maxHeight = `${props.maxHeight}px`;
+      }
+    };
+    function startResize(e) {
+      e.preventDefault();
+      isResizing = true;
+      direction = e.target.getAttribute("data-direction");
+      startX = e.clientX;
+      startY = e.clientY;
+      startWidth = dialog.offsetWidth;
+      startHeight = dialog.offsetHeight;
+      startTop = dialog.offsetTop;
+      startLeft = dialog.offsetLeft;
+      document.addEventListener("mousemove", resize);
+      document.addEventListener("mouseup", stopResize);
+      dialog.classList.add("resizing");
+    }
+    function resize(e) {
+      if (!isResizing) return;
+      let newWidth = startWidth;
+      let newHeight = startHeight;
+      let newTop = startTop;
+      let newLeft = startLeft;
+      const clientX = e.clientX;
+      const clientY = e.clientY;
+      const deltaX = clientX - startX;
+      const deltaY = clientY - startY;
+      if (direction.includes("t")) {
+        newHeight = startHeight - deltaY;
+        newTop = startTop + deltaY;
+      } else if (direction.includes("r")) {
+        newWidth = startWidth + deltaX;
+      } else if (direction.includes("b")) {
+        newHeight = startHeight + deltaY;
+        console.log(newHeight, deltaY, 1111);
+      } else if (direction.includes("l")) {
+        newWidth = startWidth - deltaX;
+        newLeft = startLeft + deltaX;
+      }
+      if (direction.length === 2) {
+        if (direction === "rt") {
+          newHeight = startHeight - deltaY;
+          newTop = startTop + deltaY;
+          newWidth = startWidth + deltaX;
+        } else if (direction === "rb") {
+          newWidth = startWidth + deltaX;
+          newHeight = startHeight + deltaY;
+        } else if (direction === "lb") {
+          newWidth = startWidth - deltaX;
+          newLeft = startLeft + deltaX;
+          newHeight = startHeight + deltaY;
+        } else if (direction === "lt") {
+          newWidth = startWidth - deltaX;
+          newHeight = startHeight - deltaY;
+          newLeft = startLeft + deltaX;
+          newTop = startTop + deltaY;
+        }
+      }
+      let data = {
+        left: newLeft,
+        top: newTop,
+        width: newWidth,
+        height: newHeight
+      };
+      data = limitScreen(data.left, data.top, data.width, data.height);
+      data = limitParent(data.left, data.top, data.width, data.height);
+      data = applyDimensionLimits(data.left, data.top, data.width, data.height);
+      dialog.style.width = `${data.width}px`;
+      dialog.style.height = `${data.height}px`;
+      console.log(data.height, 2222);
+      if (props.floating) {
+        dialog.style.top = `${data.top}px`;
+        dialog.style.left = `${data.left}px`;
+      }
+      data.width;
+      data.height;
+      data.left;
+      data.top;
+      emit("resizing", data);
+    }
+    function stopResize() {
+      isResizing = false;
+      document.removeEventListener("mousemove", resize);
+      document.removeEventListener("mouseup", stopResize);
+      dialog.classList.remove("resizing");
+      emit("resizeStop", {
+        width: dialog.offsetWidth,
+        height: dialog.offsetHeight,
+        left: dialog.offsetLeft,
+        top: dialog.offsetTop
+      });
+    }
+    function startDrag(e) {
+      if (!props.draggable) return;
+      e.preventDefault();
+      isDragging = true;
+      originalLeft = dialog.offsetLeft;
+      originalTop = dialog.offsetTop;
+      startX = e.clientX;
+      startY = e.clientY;
+      document.addEventListener("mousemove", drag);
+      document.addEventListener("mouseup", stopDrag);
+      dialog.classList.add("dragging");
+    }
+    function drag(e) {
+      if (!props.floating) return;
+      if (!isDragging) return;
+      let data = {
+        left: originalLeft + (e.clientX - startX),
+        top: originalTop + (e.clientY - startY),
+        width: dialog.offsetWidth,
+        height: dialog.offsetHeight
+      };
+      data = limitScreen(data.left, data.top, data.width, data.height);
+      data = limitParent(data.left, data.top, data.width, data.height);
+      data = applyDimensionLimits(data.left, data.top, data.width, data.height);
+      dialog.style.left = `${data.left}px`;
+      dialog.style.top = `${data.top}px`;
+      data.left;
+      data.top;
+      emit("dragging", {
+        left: data.left,
+        top: data.top,
+        width: data.width,
+        height: data.height
+      });
+    }
+    function stopDrag() {
+      isDragging = false;
+      document.removeEventListener("mousemove", drag);
+      document.removeEventListener("mouseup", stopDrag);
+      dialog.classList.remove("dragging");
+      emit("dragStop", {
+        left: dialog.offsetLeft,
+        top: dialog.offsetTop,
+        width: dialog.offsetWidth,
+        height: dialog.offsetHeight
+      });
+    }
+    const limitScreen = (newLeft, newTop, newWidth, newHeight) => {
+      if (!props.overflowScreen && props.floating) {
+        newLeft = Math.min(Math.max(newLeft, 0), window.innerWidth - dialog.offsetWidth);
+        newTop = Math.min(Math.max(newTop, 0), window.innerHeight - dialog.offsetHeight);
+        newWidth = Math.min(newWidth, window.innerWidth - newLeft);
+        newHeight = Math.min(newHeight, window.innerHeight - newTop);
+      }
+      return {
+        left: newLeft,
+        top: newTop,
+        width: newWidth,
+        height: newHeight
+      };
+    };
+    const limitParent = (newLeft, newTop, newWidth, newHeight) => {
+      if (props.parentSelector) {
+        const parentBounds = getParentBounds();
+        newLeft = Math.min(newLeft, parentBounds.width - dialog.offsetWidth);
+        newTop = Math.min(newTop, parentBounds.height - dialog.offsetHeight);
+        newLeft = Math.max(newLeft, 0);
+        newTop = Math.max(newTop, 0);
+        newWidth = Math.min(newWidth, parentBounds.width - newLeft);
+        newHeight = Math.min(newHeight, parentBounds.height - newTop);
+      }
+      return {
+        left: newLeft,
+        top: newTop,
+        width: newWidth,
+        height: newHeight
+      };
+    };
+    onMounted(() => {
+      init();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["customer-move-dialog", { floating: __props.floating, "parent-constrained": __props.floating && __props.parentSelector }]),
+        ref_key: "moveDialogRef",
+        ref: moveDialogRef
+      }, [
+        __props.resizable ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(__props.handles, (handle, index) => {
+          return openBlock(), createElementBlock("div", {
+            class: normalizeClass(["resize-handle", `resize-handle-${handle}`]),
+            "data-direction": handle,
+            key: index,
+            onMousedown: startResize
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass(["resize-handle-area", `resize-handle-area-${handle}`])
+            }, null, 2)
+          ], 42, _hoisted_1);
+        }), 128)) : createCommentVNode("", true),
+        __props.floating ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: normalizeClass(["drag-header", __props.draggable ? "draggable" : ""]),
+          onMousedown: startDrag
+        }, [
+          renderSlot(_ctx.$slots, "header")
+        ], 34)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2, [
+          renderSlot(_ctx.$slots, "default")
+        ])
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/DragSort-5WetnkmW.js

@@ -0,0 +1,98 @@
+import { ElScrollbar } from "element-plus/es";
+import { defineComponent, ref, watch, openBlock, createBlock, withCtx, createElementVNode, createVNode, TransitionGroup, createElementBlock, Fragment, renderList, withModifiers, normalizeClass, renderSlot } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
+import './DragSort.css';const _hoisted_1 = { class: "drag-list" };
+const _hoisted_2 = ["draggable", "onDragstart", "onDragenter"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "DragSort",
+  props: {
+    list: { default: () => [] },
+    props: { default: () => {
+      return { id: "id" };
+    } }
+  },
+  emits: ["sortChange"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const sortList = ref(props.list);
+    let oldId = null;
+    let newId = null;
+    const dragend = (event) => {
+      event.preventDefault();
+      let oldIndex = null;
+      let newIndex = null;
+      let newData = {};
+      const newArr = [...sortList.value];
+      sortList.value.forEach((item, index) => {
+        if ((item[props.props.id] || item) === oldId) {
+          oldIndex = index;
+          newData = item;
+        }
+        if ((item[props.props.id] || item) === newId) {
+          newIndex = index;
+        }
+      });
+      newArr.splice(oldIndex, 1);
+      newArr.splice(newIndex, 0, newData);
+      sortList.value = newArr;
+      oldId = null;
+      newId = null;
+      emit("sortChange", sortList.value);
+    };
+    const dragstart = (event, data) => {
+      oldId = data[props.props.id] || data;
+    };
+    const dragleave = (event) => {
+      event.preventDefault();
+    };
+    const dragenter = (event, data) => {
+      event.preventDefault();
+      newId = data[props.props.id] || data;
+    };
+    watch(props, (newVal) => {
+      sortList.value = newVal.list;
+    });
+    const $getSort = () => {
+      emit("sortChange", sortList.value);
+    };
+    __expose({ $getSort, sortList });
+    return (_ctx, _cache) => {
+      const _component_el_scrollbar = ElScrollbar;
+      return openBlock(), createBlock(_component_el_scrollbar, null, {
+        default: withCtx(() => [
+          createElementVNode("ul", _hoisted_1, [
+            createVNode(TransitionGroup, null, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(sortList.value, (item, index) => {
+                  return openBlock(), createElementBlock("li", {
+                    key: item[props.props.id] || item,
+                    class: normalizeClass(["drag-container drag-list-item flex justify-between", { "cursor-move": !item.noSort }]),
+                    draggable: item.noSort ? false : true,
+                    onDragstart: ($event) => dragstart($event, item),
+                    onDragend: _cache[0] || (_cache[0] = ($event) => dragend($event)),
+                    onDragover: _cache[1] || (_cache[1] = withModifiers(() => {
+                    }, ["prevent"])),
+                    onDragenter: ($event) => dragenter($event, item),
+                    onDragleave: _cache[2] || (_cache[2] = ($event) => dragleave($event))
+                  }, [
+                    renderSlot(_ctx.$slots, "main", {
+                      data: item,
+                      index
+                    }, void 0, true)
+                  ], 42, _hoisted_2);
+                }), 128))
+              ]),
+              _: 3
+            })
+          ])
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+const DragSort = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b9b2c678"]]);
+export {
+  DragSort as D
+};

package/dist/DragSort.css

@@ -1 +1,5 @@
-.drag-container[data-v-b9b2c678]{padding:10px 5px;cursor:move;transition:all .3s}
+.drag-container[data-v-b9b2c678] {
+  padding: 10px 5px;
+  cursor: move;
+  transition: all 0.3s;
+}