@haluo/biz 2.0.15 → 2.0.16

package/dist/haluo-biz.js

@@ -1890,13 +1890,22 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         }
       });
     };
-    const changeBrandId = () => {
+    const changeBrandId = (val) => {
       selectData.goodId = "";
       selectData.carId = "";
+      if (!val) {
+        goodList.value = [];
+        carList.value = [];
+        return;
+      }
       getGoodList();
     };
-    const changeGoodId = () => {
+    const changeGoodId = (val) => {
       selectData.carId = "";
+      if (!val) {
+        carList.value = [];
+        return;
+      }
       getCarList();
     };
     const activeTab = ref("1");
@@ -2082,6 +2091,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                     placeholder: "\u8BF7\u9009\u62E9\u54C1\u724C",
                     size: "large",
                     class: "select_1",
+                    filterable: "",
+                    clearable: "",
                     onChange: changeBrandId
                   }, {
                     default: withCtx(() => [
@@ -2101,6 +2112,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                     placeholder: "\u8BF7\u9009\u62E9\u8F66\u578B",
                     size: "large",
                     class: "select_1",
+                    filterable: "",
+                    clearable: "",
                     onChange: changeGoodId
                   }, {
                     default: withCtx(() => [
@@ -2119,7 +2132,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                     "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => selectData.carId = $event),
                     placeholder: "\u8BF7\u9009\u62E9\u6B3E\u578B",
                     size: "large",
-                    class: "select_2"
+                    class: "select_2",
+                    filterable: "",
+                    clearable: ""
                   }, {
                     default: withCtx(() => [
                       (openBlock(true), createElementBlock(Fragment, null, renderList(carList.value, (item, index) => {
@@ -2509,7 +2524,10 @@ const _sfc_main = {
       replaceSeamless: 0,
       seamlessCount: 0,
       overLine: "",
-      currentVideo: null
+      lasteDropDom: "",
+      currentVideo: null,
+      targetMove: "",
+      moverClasses: ["halo-img-content", "halo-video-content"]
     };
   },
   computed: {
@@ -2796,8 +2814,11 @@ const _sfc_main = {
             this.parseGood(node);
           } else if (node.classList.contains("halo-img-content")) {
             const img = node.querySelector("img");
-            img.setAttribute("tabindex", -1);
+            node.setAttribute("tabindex", -1);
+            node.setAttribute("draggable", true);
+            node.setAttribute("contenteditable", false);
             img.setAttribute("draggable", false);
+            this.setDragMove(node);
             const desc = img.dataset.desc;
             img.style.margin = "0";
             const seamlessFlag = ((_a = JSON.parse(img.getAttribute("data"))) == null ? void 0 : _a.seamlessFlag) || "0";
@@ -2859,6 +2880,9 @@ const _sfc_main = {
       const replaceBtn = me2.insertVideoBtns(me2.editor, video);
       node.appendChild(delBtn);
       node.appendChild(replaceBtn);
+      node.setAttribute("tabindex", -1);
+      node.setAttribute("draggable", true);
+      me2.setDragMove(node);
     },
     async parseArticle(node) {
       const data = JSON.parse(node.dataset.article);
@@ -3240,6 +3264,57 @@ const _sfc_main = {
         this.styleStatus.size = parseInt(this.fontInfo.size) === 100 ? 17 : this.fontInfo.size;
         this.styleStatus.color = this.fontInfo.color;
       });
+      editorDom.ondragover = function(e) {
+        if (me2.targetMove && me2.moverClasses.includes(me2.targetMove.className)) {
+          if (e.target.offsetParent === editorDom) {
+            me2.overLine = e.target.offsetHeight + e.target.offsetTop + "px";
+            me2.lasteDropDom = e.target;
+          }
+          e.preventDefault();
+        }
+      };
+      editorDom.ondrop = function(e) {
+        if (me2.targetMove && me2.moverClasses.includes(me2.targetMove.className)) {
+          const target = me2.lasteDropDom || e.target;
+          if (target.parentNode !== editorDom) {
+            return;
+          }
+          if (target === editorDom) {
+            target.appendChild(me2.targetMove);
+          } else {
+            target.after(me2.targetMove);
+          }
+          me2.targetMove = "";
+          me2.lasteDropDom = "";
+          e.preventDefault();
+        }
+        me2.overLine = "";
+      };
+      me2.editor.addEventListener("dragover", (event) => {
+        event.preventDefault();
+      });
+      me2.editor.addEventListener("drop", (event) => {
+        const clipboardData = event.dataTransfer || {};
+        const files = clipboardData.files;
+        if (files && files.length) {
+          files.forEach((file) => {
+            if (file.type.includes("image")) {
+              me2.$emit("insertImgs", [file], "img", (type, src) => {
+                me2.visibleImg = false;
+                me2.imgUploadHandler(type, src);
+              });
+            }
+            if (file.type.includes("video")) {
+              me2.uploadVideo({
+                target: {
+                  files: [file]
+                }
+              });
+            }
+          });
+          event.preventDefault();
+        }
+      });
       me2.editor.addEventListener("willPaste", function(type, handler) {
         function validateDom() {
           const fragment = type && type.fragment || {};
@@ -3357,8 +3432,10 @@ const _sfc_main = {
         var p = this.createElement("div", {
           "class": "halo-img-content",
           "contenteditable": "false",
-          "draggable": "false"
+          "draggable": "true",
+          "tabindex": "-1"
         }, [...childList]);
+        me2.setDragMove(p);
         this.insertElement(p, range);
         if (isSeameless) {
           me2.removeDefault(p, "nextElementSibling");
@@ -3417,31 +3494,7 @@ const _sfc_main = {
         p.onclick = function() {
           me2.setToast("\u4E0D\u652F\u6301\u64AD\u653E");
         };
-        let targetMove = "";
-        p.ondragstart = function(e) {
-          if (!(e.target.className.indexOf("halo-video-content") < 0)) {
-            e.dataTransfer.setData("text/html", e.target);
-            e.dataTransfer.effectAllowed = "move";
-            e.dataTransfer.dropEffect = "move";
-            targetMove = e.target;
-          }
-        };
-        editorDom.ondragover = function(e) {
-          if (targetMove && !(targetMove.className.indexOf("halo-video-content") < 0)) {
-            e.preventDefault();
-          }
-        };
-        editorDom.ondrop = function(e) {
-          if (targetMove && !(targetMove.className.indexOf("halo-video-content") < 0)) {
-            if (e.target === editorDom) {
-              e.target.appendChild(targetMove);
-            } else {
-              e.target.after(targetMove);
-            }
-            targetMove = "";
-            e.preventDefault();
-          }
-        };
+        me2.setDragMove(p);
         this.insertElement(p);
         setTimeout(() => {
           document.documentElement.scrollTop = scrollTop;
@@ -3465,6 +3518,18 @@ const _sfc_main = {
       };
       me2.sticky();
     },
+    setDragMove(p) {
+      const className = p.getAttribute("class");
+      const me2 = this;
+      p.ondragstart = function(e) {
+        if (!(e.target.className.indexOf(className) < 0)) {
+          e.dataTransfer.setData("text/html", e.target);
+          e.dataTransfer.effectAllowed = "move";
+          e.dataTransfer.dropEffect = "move";
+          me2.targetMove = e.target;
+        }
+      };
+    },
     removeDefault(next, key) {
       const me2 = this;
       const cur = next[key];
@@ -3899,9 +3964,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     withDirectives(createElementVNode("div", {
       style: normalizeStyle({ textAlign: $options.align }),
       class: "placeholder"
-    }, "\u8BF7\u8F93\u5165\u6B63\u6587", 4), [
+    }, "\u8BF7\u8F93\u5165\u6B63\u6587 ", 4), [
       [vShow, !$options.isInputing && !$data.titleCount && !$data.hasArticleCard]
     ]),
+    $data.overLine ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      class: "overline",
+      style: normalizeStyle({ top: $data.overLine })
+    }, null, 4)) : createCommentVNode("", true),
     createElementVNode("div", {
       id: "editor-content",
       style: normalizeStyle({ cursor: $data.cursorStyle }),

package/dist/haluo-biz.umd.cjs

@@ -1892,13 +1892,22 @@
           }
         });
       };
-      const changeBrandId = () => {
+      const changeBrandId = (val) => {
         selectData.goodId = "";
         selectData.carId = "";
+        if (!val) {
+          goodList.value = [];
+          carList.value = [];
+          return;
+        }
         getGoodList();
       };
-      const changeGoodId = () => {
+      const changeGoodId = (val) => {
         selectData.carId = "";
+        if (!val) {
+          carList.value = [];
+          return;
+        }
         getCarList();
       };
       const activeTab = vue.ref("1");
@@ -2084,6 +2093,8 @@
                       placeholder: "\u8BF7\u9009\u62E9\u54C1\u724C",
                       size: "large",
                       class: "select_1",
+                      filterable: "",
+                      clearable: "",
                       onChange: changeBrandId
                     }, {
                       default: vue.withCtx(() => [
@@ -2103,6 +2114,8 @@
                       placeholder: "\u8BF7\u9009\u62E9\u8F66\u578B",
                       size: "large",
                       class: "select_1",
+                      filterable: "",
+                      clearable: "",
                       onChange: changeGoodId
                     }, {
                       default: vue.withCtx(() => [
@@ -2121,7 +2134,9 @@
                       "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => selectData.carId = $event),
                       placeholder: "\u8BF7\u9009\u62E9\u6B3E\u578B",
                       size: "large",
-                      class: "select_2"
+                      class: "select_2",
+                      filterable: "",
+                      clearable: ""
                     }, {
                       default: vue.withCtx(() => [
                         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(carList.value, (item, index) => {
@@ -2511,7 +2526,10 @@
         replaceSeamless: 0,
         seamlessCount: 0,
         overLine: "",
-        currentVideo: null
+        lasteDropDom: "",
+        currentVideo: null,
+        targetMove: "",
+        moverClasses: ["halo-img-content", "halo-video-content"]
       };
     },
     computed: {
@@ -2798,8 +2816,11 @@
               this.parseGood(node);
             } else if (node.classList.contains("halo-img-content")) {
               const img = node.querySelector("img");
-              img.setAttribute("tabindex", -1);
+              node.setAttribute("tabindex", -1);
+              node.setAttribute("draggable", true);
+              node.setAttribute("contenteditable", false);
               img.setAttribute("draggable", false);
+              this.setDragMove(node);
               const desc = img.dataset.desc;
               img.style.margin = "0";
               const seamlessFlag = ((_a = JSON.parse(img.getAttribute("data"))) == null ? void 0 : _a.seamlessFlag) || "0";
@@ -2861,6 +2882,9 @@
         const replaceBtn = me2.insertVideoBtns(me2.editor, video);
         node.appendChild(delBtn);
         node.appendChild(replaceBtn);
+        node.setAttribute("tabindex", -1);
+        node.setAttribute("draggable", true);
+        me2.setDragMove(node);
       },
       async parseArticle(node) {
         const data = JSON.parse(node.dataset.article);
@@ -3242,6 +3266,57 @@
           this.styleStatus.size = parseInt(this.fontInfo.size) === 100 ? 17 : this.fontInfo.size;
           this.styleStatus.color = this.fontInfo.color;
         });
+        editorDom.ondragover = function(e) {
+          if (me2.targetMove && me2.moverClasses.includes(me2.targetMove.className)) {
+            if (e.target.offsetParent === editorDom) {
+              me2.overLine = e.target.offsetHeight + e.target.offsetTop + "px";
+              me2.lasteDropDom = e.target;
+            }
+            e.preventDefault();
+          }
+        };
+        editorDom.ondrop = function(e) {
+          if (me2.targetMove && me2.moverClasses.includes(me2.targetMove.className)) {
+            const target = me2.lasteDropDom || e.target;
+            if (target.parentNode !== editorDom) {
+              return;
+            }
+            if (target === editorDom) {
+              target.appendChild(me2.targetMove);
+            } else {
+              target.after(me2.targetMove);
+            }
+            me2.targetMove = "";
+            me2.lasteDropDom = "";
+            e.preventDefault();
+          }
+          me2.overLine = "";
+        };
+        me2.editor.addEventListener("dragover", (event) => {
+          event.preventDefault();
+        });
+        me2.editor.addEventListener("drop", (event) => {
+          const clipboardData = event.dataTransfer || {};
+          const files = clipboardData.files;
+          if (files && files.length) {
+            files.forEach((file) => {
+              if (file.type.includes("image")) {
+                me2.$emit("insertImgs", [file], "img", (type, src) => {
+                  me2.visibleImg = false;
+                  me2.imgUploadHandler(type, src);
+                });
+              }
+              if (file.type.includes("video")) {
+                me2.uploadVideo({
+                  target: {
+                    files: [file]
+                  }
+                });
+              }
+            });
+            event.preventDefault();
+          }
+        });
         me2.editor.addEventListener("willPaste", function(type, handler) {
           function validateDom() {
             const fragment = type && type.fragment || {};
@@ -3359,8 +3434,10 @@
           var p = this.createElement("div", {
             "class": "halo-img-content",
             "contenteditable": "false",
-            "draggable": "false"
+            "draggable": "true",
+            "tabindex": "-1"
           }, [...childList]);
+          me2.setDragMove(p);
           this.insertElement(p, range);
           if (isSeameless) {
             me2.removeDefault(p, "nextElementSibling");
@@ -3419,31 +3496,7 @@
           p.onclick = function() {
             me2.setToast("\u4E0D\u652F\u6301\u64AD\u653E");
           };
-          let targetMove = "";
-          p.ondragstart = function(e) {
-            if (!(e.target.className.indexOf("halo-video-content") < 0)) {
-              e.dataTransfer.setData("text/html", e.target);
-              e.dataTransfer.effectAllowed = "move";
-              e.dataTransfer.dropEffect = "move";
-              targetMove = e.target;
-            }
-          };
-          editorDom.ondragover = function(e) {
-            if (targetMove && !(targetMove.className.indexOf("halo-video-content") < 0)) {
-              e.preventDefault();
-            }
-          };
-          editorDom.ondrop = function(e) {
-            if (targetMove && !(targetMove.className.indexOf("halo-video-content") < 0)) {
-              if (e.target === editorDom) {
-                e.target.appendChild(targetMove);
-              } else {
-                e.target.after(targetMove);
-              }
-              targetMove = "";
-              e.preventDefault();
-            }
-          };
+          me2.setDragMove(p);
           this.insertElement(p);
           setTimeout(() => {
             document.documentElement.scrollTop = scrollTop;
@@ -3467,6 +3520,18 @@
         };
         me2.sticky();
       },
+      setDragMove(p) {
+        const className = p.getAttribute("class");
+        const me2 = this;
+        p.ondragstart = function(e) {
+          if (!(e.target.className.indexOf(className) < 0)) {
+            e.dataTransfer.setData("text/html", e.target);
+            e.dataTransfer.effectAllowed = "move";
+            e.dataTransfer.dropEffect = "move";
+            me2.targetMove = e.target;
+          }
+        };
+      },
       removeDefault(next, key) {
         const me2 = this;
         const cur = next[key];
@@ -3901,9 +3966,14 @@
       vue.withDirectives(vue.createElementVNode("div", {
         style: vue.normalizeStyle({ textAlign: $options.align }),
         class: "placeholder"
-      }, "\u8BF7\u8F93\u5165\u6B63\u6587", 4), [
+      }, "\u8BF7\u8F93\u5165\u6B63\u6587 ", 4), [
         [vue.vShow, !$options.isInputing && !$data.titleCount && !$data.hasArticleCard]
       ]),
+      $data.overLine ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        class: "overline",
+        style: vue.normalizeStyle({ top: $data.overLine })
+      }, null, 4)) : vue.createCommentVNode("", true),
       vue.createElementVNode("div", {
         id: "editor-content",
         style: vue.normalizeStyle({ cursor: $data.cursorStyle }),

package/dist/style.css

@@ -806,6 +806,7 @@
   position: relative;
   text-align: center;
   left: 250px;
+  outline: none;
 }
 .editor #editor-content .halo-img-content .img-loading,
 .editor #editor-content .halo-img-content .img-fail {
@@ -936,6 +937,7 @@
   margin: 5px;
   padding-right: 5px;
   position: relative;
+  outline: none;
 }
 .editor #editor-content .halo-video-content .video-delete {
   width: 18px;
@@ -1063,6 +1065,14 @@
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.3);
 }
+.editor .overline {
+  position: absolute;
+  z-index: 50;
+  pointer-events: none;
+  background-color: #1a74ff;
+  width: 100%;
+  height: 1px;
+}
 .video-progress {
   width: 440px;
   height: 220px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@haluo/biz",
   "description": "rich text",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "type": "module",
   "module": "./dist/haluo-biz.js",
   "main": "./dist/haluo-biz.umd.cjs",