iking-template-inset 0.0.4 → 0.0.6

package/dist/iking-template-inset.d.ts

@@ -4,7 +4,7 @@
  * @description  : 
  * @updateInfo   : 
  * @Date         : 2022-11-21 10:28:10
- * @LastEditTime : 2022-11-28 11:40:01
+ * @LastEditTime : 2022-11-28 12:09:42
  */
 /// <reference types="vite/client" />
 
@@ -23,6 +23,8 @@ declare module 'iking-template-inset' {
     border: string;
     // 排列方式
     horizontal: Boolean
+    // placeholder
+    placeholder: string
   }>
   export default component
 }

package/dist/ikingtemplateinset.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as h, useCssVars as b, ref as i, watch as k, openBlock as u, createElementBlock as c, normalizeStyle as $, createElementVNode as v, Fragment as f, renderList as x, renderSlot as I, createTextVNode as S, toDisplayString as w, withKeys as N, withModifiers as T, nextTick as V } from "vue";
-const C = { class: "left-template-tag" }, L = ["onClick"], A = /* @__PURE__ */ h({
+import { defineComponent as k, useCssVars as x, ref as i, watch as S, openBlock as c, createElementBlock as d, normalizeStyle as m, createElementVNode as f, Fragment as y, renderList as b, renderSlot as A, createTextVNode as w, toDisplayString as I, withDirectives as V, withKeys as B, withModifiers as C, vModelText as z } from "vue";
+const F = ["onClick"], K = ["placeholder"], N = /* @__PURE__ */ k({
   __name: "App",
   props: {
     modelVlaue: {
@@ -19,77 +19,89 @@ const C = { class: "left-template-tag" }, L = ["onClick"], A = /* @__PURE__ */ h
     horizontal: {
       type: Boolean,
       default: !0
+    },
+    placeholder: {
+      type: String,
+      default: "\u8BF7\u8F93\u5165\u6216\u70B9\u51FB\u63D2\u5165\u53C2\u6570"
     }
   },
-  emits: ["update:modelVlaue"],
-  setup(n, { emit: d }) {
-    const a = n;
-    b((e) => ({
-      "47b9f5d6": n.border
+  emits: ["update:modelVlaue", "origional"],
+  setup(l, { emit: s }) {
+    const r = l;
+    x((e) => ({
+      "7ec6a286": l.border
     }));
-    const l = i(-1), r = i(), p = () => {
-      const e = document.getSelection();
-      l.value = e != null && e.baseNode ? e != null && e.baseOffset ? e == null ? void 0 : e.baseOffset : 0 : -1;
-    }, t = i(""), _ = i("");
-    k(t, (e) => {
-      d("update:modelVlaue", e);
+    const o = i(-1), u = () => {
+      var t;
+      const e = (t = p.value) == null ? void 0 : t.selectionStart;
+      o.value = e ? e || 0 : -1;
+    }, a = i(""), g = i(""), p = i(null), h = /【\S.*?\$/g;
+    S(a, (e) => {
+      s("update:modelVlaue", e.replaceAll(h, "$").replaceAll("\u3011", "")), s("origional", e);
     });
-    const y = (e) => {
-      const o = document.getSelection();
-      p(), V(() => {
-        t.value = e.target.innerHTML, _.value = o.baseNode.data;
-      });
-    }, g = (e) => {
-      const o = `\u3010${e.label}\${${e.value}}\u3011`;
-      if (l.value === -1)
-        t.value = `${t.value}${o}`;
-      else if (l.value === 0)
-        t.value = `${o}${t.value}`;
+    const _ = (e) => {
+      var t;
+      u(), g.value = (t = p.value) == null ? void 0 : t.selectionStart;
+    }, $ = (e) => {
+      const t = `\u3010${e.label}\${${e.value}}\u3011`;
+      if (o.value === -1)
+        a.value = `${a.value}${t}`;
+      else if (o.value === 0)
+        a.value = `${t}${a.value}`;
       else {
-        const s = t.value;
-        t.value = s.substring(0, l.value) + o + s.substring(l.value);
+        const n = a.value;
+        a.value = n.substring(0, o.value) + t + n.substring(o.value);
       }
-      r.value.innerHTML = t.value;
     };
-    return (e, o) => (u(), c("div", {
+    return (e, t) => (c(), d("div", {
       class: "msg-template",
-      style: $({ "flex-direction": a.horizontal ? "row" : "column", height: `${a.height}px` })
+      style: m({
+        "flex-direction": r.horizontal ? "row" : "column",
+        height: `${r.height}px`
+      })
     }, [
-      v("div", C, [
-        (u(!0), c(f, null, x(n.tagList, (s, m) => (u(), c("div", {
-          onClick: (B) => g(s),
-          key: m
+      f("div", {
+        class: "left-template-tag",
+        style: m({ "margin-right": r.horizontal ? "16px" : "0" })
+      }, [
+        (c(!0), d(y, null, b(l.tagList, (n, v) => (c(), d("div", {
+          onClick: (L) => $(n),
+          key: v
         }, [
-          e.$slots.item ? I(e.$slots, "item", {
+          e.$slots.item ? A(e.$slots, "item", {
             key: 0,
-            item: { ...s, index: m }
-          }, void 0, !0) : (u(), c(f, { key: 1 }, [
-            S(w(s.label), 1)
+            item: { ...n, index: v }
+          }, void 0, !0) : (c(), d(y, { key: 1 }, [
+            w(I(n.label), 1)
           ], 64))
-        ], 8, L))), 128))
-      ]),
-      v("div", {
-        ref_key: "insetDom",
-        ref: r,
-        class: "right-template",
-        contenteditable: "",
-        onKeydown: o[0] || (o[0] = N(T(() => {
+        ], 8, F))), 128))
+      ], 4),
+      V(f("textarea", {
+        ref_key: "refArea",
+        ref: p,
+        "onUpdate:modelValue": t[0] || (t[0] = (n) => a.value = n),
+        onKeyup: _,
+        onClick: u,
+        onKeydown: t[1] || (t[1] = B(C(() => {
         }, ["prevent"]), ["enter"])),
-        onKeyup: y,
-        onClick: p
-      }, null, 544)
+        class: "right-template",
+        placeholder: l.placeholder
+      }, `
+    `, 40, K), [
+        [z, a.value]
+      ])
     ], 4));
   }
 });
-const K = (n, d) => {
-  const a = n.__vccOpts || n;
-  for (const [l, r] of d)
-    a[l] = r;
-  return a;
-}, z = /* @__PURE__ */ K(A, [["__scopeId", "data-v-dc887f16"]]), M = (n) => {
-  n.component("IkingTemplateInset", z);
+const T = (l, s) => {
+  const r = l.__vccOpts || l;
+  for (const [o, u] of s)
+    r[o] = u;
+  return r;
+}, D = /* @__PURE__ */ T(N, [["__scopeId", "data-v-c0c17efa"]]), M = (l) => {
+  l.component("IkingTemplateInset", D);
 };
 export {
-  z as default,
+  D as default,
   M as install
 };

package/dist/ikingtemplateinset.umd.js

@@ -1 +1,2 @@
-(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.IkingTemplateInset={},o.Vue))})(this,function(o,e){"use strict";const m={class:"left-template-tag"},_=["onClick"],y=e.defineComponent({__name:"App",props:{modelVlaue:{type:String,default:""},height:{type:Number,default:300},width:{type:Number,default:600},tagList:{type:Array,default:()=>[]},border:{type:String,default:"1px solid #dcdfe6"},horizontal:{type:Boolean,default:!0}},emits:["update:modelVlaue"],setup(l,{emit:d}){const r=l;e.useCssVars(t=>({"47b9f5d6":l.border}));const a=e.ref(-1),c=e.ref(),f=()=>{const t=document.getSelection();a.value=t!=null&&t.baseNode?t!=null&&t.baseOffset?t==null?void 0:t.baseOffset:0:-1},n=e.ref(""),h=e.ref("");e.watch(n,t=>{d("update:modelVlaue",t)});const k=t=>{const s=document.getSelection();f(),e.nextTick(()=>{n.value=t.target.innerHTML,h.value=s.baseNode.data})},b=t=>{const s=`\u3010${t.label}\${${t.value}}\u3011`;if(a.value===-1)n.value=`${n.value}${s}`;else if(a.value===0)n.value=`${s}${n.value}`;else{const i=n.value;n.value=i.substring(0,a.value)+s+i.substring(a.value)}c.value.innerHTML=n.value};return(t,s)=>(e.openBlock(),e.createElementBlock("div",{class:"msg-template",style:e.normalizeStyle({"flex-direction":r.horizontal?"row":"column",height:`${r.height}px`})},[e.createElementVNode("div",m,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.tagList,(i,u)=>(e.openBlock(),e.createElementBlock("div",{onClick:B=>b(i),key:u},[t.$slots.item?e.renderSlot(t.$slots,"item",{key:0,item:{...i,index:u}},void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(i.label),1)],64))],8,_))),128))]),e.createElementVNode("div",{ref_key:"insetDom",ref:c,class:"right-template",contenteditable:"",onKeydown:s[0]||(s[0]=e.withKeys(e.withModifiers(()=>{},["prevent"]),["enter"])),onKeyup:k,onClick:f},null,544)],4))}}),$="",x="",p=((l,d)=>{const r=l.__vccOpts||l;for(const[a,c]of d)r[a]=c;return r})(y,[["__scopeId","data-v-dc887f16"]]),g=l=>{l.component("IkingTemplateInset",p)};o.default=p,o.install=g,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a.IkingTemplateInset={},a.Vue))})(this,function(a,e){"use strict";const m=["onClick"],y=["placeholder"],g=e.defineComponent({__name:"App",props:{modelVlaue:{type:String,default:""},height:{type:Number,default:300},width:{type:Number,default:600},tagList:{type:Array,default:()=>[]},border:{type:String,default:"1px solid #dcdfe6"},horizontal:{type:Boolean,default:!0},placeholder:{type:String,default:"\u8BF7\u8F93\u5165\u6216\u70B9\u51FB\u63D2\u5165\u53C2\u6570"}},emits:["update:modelVlaue","origional"],setup(n,{emit:c}){const i=n;e.useCssVars(t=>({"7ec6a286":n.border}));const s=e.ref(-1),d=()=>{var l;const t=(l=p.value)==null?void 0:l.selectionStart;s.value=t?t||0:-1},o=e.ref(""),h=e.ref(""),p=e.ref(null),k=/【\S.*?\$/g;e.watch(o,t=>{c("update:modelVlaue",t.replaceAll(k,"$").replaceAll("\u3011","")),c("origional",t)});const $=t=>{var l;d(),h.value=(l=p.value)==null?void 0:l.selectionStart},x=t=>{const l=`\u3010${t.label}\${${t.value}}\u3011`;if(s.value===-1)o.value=`${o.value}${l}`;else if(s.value===0)o.value=`${l}${o.value}`;else{const r=o.value;o.value=r.substring(0,s.value)+l+r.substring(s.value)}};return(t,l)=>(e.openBlock(),e.createElementBlock("div",{class:"msg-template",style:e.normalizeStyle({"flex-direction":i.horizontal?"row":"column",height:`${i.height}px`})},[e.createElementVNode("div",{class:"left-template-tag",style:e.normalizeStyle({"margin-right":i.horizontal?"16px":"0"})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.tagList,(r,f)=>(e.openBlock(),e.createElementBlock("div",{onClick:I=>x(r),key:f},[t.$slots.item?e.renderSlot(t.$slots,"item",{key:0,item:{...r,index:f}},void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(r.label),1)],64))],8,m))),128))],4),e.withDirectives(e.createElementVNode("textarea",{ref_key:"refArea",ref:p,"onUpdate:modelValue":l[0]||(l[0]=r=>o.value=r),onKeyup:$,onClick:d,onKeydown:l[1]||(l[1]=e.withKeys(e.withModifiers(()=>{},["prevent"]),["enter"])),class:"right-template",placeholder:n.placeholder},`
+    `,40,y),[[e.vModelText,o.value]])],4))}}),B="",S="",u=((n,c)=>{const i=n.__vccOpts||n;for(const[s,d]of c)i[s]=d;return i})(g,[["__scopeId","data-v-c0c17efa"]]),_=n=>{n.component("IkingTemplateInset",u)};a.default=u,a.install=_,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/style.css

@@ -1 +1 @@
-.__templeate_param_tag{display:inline-block;padding:2px;background:#dfdfdf;font-size:13px;border-radius:4px;margin-right:2px}.msg-template[data-v-dc887f16]{display:flex;width:100%;margin-bottom:8px;justify-content:space-between}.msg-template>div[data-v-dc887f16]{flex:1;border:var(--47b9f5d6);border-radius:4px;padding:8px;height:100%;min-height:50px;width:calc(100% - 16px)}.msg-template .left-template-tag[data-v-dc887f16]{display:flex;flex-wrap:wrap}.msg-template .left-template-tag div[data-v-dc887f16]{cursor:pointer;user-select:none;padding:3px 8px;margin:3px 1px 3px 3px;width:100px;border-radius:4px;background:#edebeb}.msg-template .right-template[data-v-dc887f16]{counter-increment:true}.msg-template .right-template[data-v-dc887f16]:focus-visible{outline:none}
+.__templeate_param_tag{display:inline-block;padding:2px;background:#dfdfdf;font-size:13px;border-radius:4px;margin-right:2px}.msg-template[data-v-c0c17efa]{display:flex;width:100%;margin-bottom:8px;justify-content:space-between}.msg-template>div[data-v-c0c17efa],.msg-template textarea[data-v-c0c17efa]{flex:1;border:var(--7ec6a286);border-radius:4px;padding:8px;height:100%;min-height:50px;width:calc(100% - 16px)}.msg-template .left-template-tag div[data-v-c0c17efa]{display:inline-flex;align-items:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;flex-wrap:wrap;cursor:pointer;user-select:none;padding:3px 8px;width:100px;border-radius:4px;background:#edebeb;margin-right:8px;margin-bottom:8px;height:24px;color:#464646}.msg-template .right-template[data-v-c0c17efa]{background:rgba(255,255,255,0)}.msg-template .right-template[data-v-c0c17efa]:focus-visible{outline:none}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "iking-template-inset",
   "private": false,
-  "version": "0.0.4",
+  "version": "0.0.6",
   "main": "./dist/ikingtemplateinset.umd.js",
   "module": "./dist/ikingtemplateinset.es.js",
   "author": "金合研究院",