iking-template-inset 0.0.4 → 0.0.5

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 u, watch as $, openBlock as i, createElementBlock as d, normalizeStyle as m, createElementVNode as f, Fragment as y, renderList as b, renderSlot as S, createTextVNode as w, toDisplayString as I, withDirectives as V, withKeys as A, withModifiers as B, vModelText as C } from "vue";
+const z = ["onClick"], F = ["placeholder"], K = /* @__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
+  setup(l, { emit: c }) {
+    const s = l;
+    x((t) => ({
+      "8d8ff372": 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 a = u(-1), r = () => {
+      var e;
+      const t = (e = p.value) == null ? void 0 : e.selectionStart;
+      a.value = t ? t || 0 : -1;
+    }, n = u(""), h = u(""), p = u(null);
+    $(n, (t) => {
+      c("update:modelVlaue", t);
     });
-    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 _ = (t) => {
+      var e;
+      r(), h.value = (e = p.value) == null ? void 0 : e.selectionStart;
+    }, g = (t) => {
+      const e = `\u3010${t.label}\${${t.value}}\u3011`;
+      if (a.value === -1)
+        n.value = `${n.value}${e}`;
+      else if (a.value === 0)
+        n.value = `${e}${n.value}`;
       else {
-        const s = t.value;
-        t.value = s.substring(0, l.value) + o + s.substring(l.value);
+        const o = n.value;
+        n.value = o.substring(0, a.value) + e + o.substring(a.value);
       }
-      r.value.innerHTML = t.value;
     };
-    return (e, o) => (u(), c("div", {
+    return (t, e) => (i(), d("div", {
       class: "msg-template",
-      style: $({ "flex-direction": a.horizontal ? "row" : "column", height: `${a.height}px` })
+      style: m({
+        "flex-direction": s.horizontal ? "row" : "column",
+        height: `${s.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": s.horizontal ? "16px" : "0" })
+      }, [
+        (i(!0), d(y, null, b(l.tagList, (o, v) => (i(), d("div", {
+          onClick: (D) => g(o),
+          key: v
         }, [
-          e.$slots.item ? I(e.$slots, "item", {
+          t.$slots.item ? S(t.$slots, "item", {
             key: 0,
-            item: { ...s, index: m }
-          }, void 0, !0) : (u(), c(f, { key: 1 }, [
-            S(w(s.label), 1)
+            item: { ...o, index: v }
+          }, void 0, !0) : (i(), d(y, { key: 1 }, [
+            w(I(o.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, z))), 128))
+      ], 4),
+      V(f("textarea", {
+        ref_key: "refArea",
+        ref: p,
+        "onUpdate:modelValue": e[0] || (e[0] = (o) => n.value = o),
+        onKeyup: _,
+        onClick: r,
+        onKeydown: e[1] || (e[1] = A(B(() => {
         }, ["prevent"]), ["enter"])),
-        onKeyup: y,
-        onClick: p
-      }, null, 544)
+        class: "right-template",
+        placeholder: l.placeholder
+      }, `
+    `, 40, F), [
+        [C, n.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 N = (l, c) => {
+  const s = l.__vccOpts || l;
+  for (const [a, r] of c)
+    s[a] = r;
+  return s;
+}, T = /* @__PURE__ */ N(K, [["__scopeId", "data-v-8e5e4859"]]), E = (l) => {
+  l.component("IkingTemplateInset", T);
 };
 export {
-  z as default,
-  M as install
+  T as default,
+  E 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"],_=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"],setup(n,{emit:c}){const i=n;e.useCssVars(l=>({"8d8ff372":n.border}));const s=e.ref(-1),d=()=>{var t;const l=(t=p.value)==null?void 0:t.selectionStart;s.value=l?l||0:-1},o=e.ref(""),g=e.ref(""),p=e.ref(null);e.watch(o,l=>{c("update:modelVlaue",l)});const k=l=>{var t;d(),g.value=(t=p.value)==null?void 0:t.selectionStart},x=l=>{const t=`\u3010${l.label}\${${l.value}}\u3011`;if(s.value===-1)o.value=`${o.value}${t}`;else if(s.value===0)o.value=`${t}${o.value}`;else{const r=o.value;o.value=r.substring(0,s.value)+t+r.substring(s.value)}};return(l,t)=>(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:b=>x(r),key:f},[l.$slots.item?e.renderSlot(l.$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":t[0]||(t[0]=r=>o.value=r),onKeyup:k,onClick:d,onKeydown:t[1]||(t[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})(_,[["__scopeId","data-v-8e5e4859"]]),h=n=>{n.component("IkingTemplateInset",u)};a.default=u,a.install=h,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-8e5e4859]{display:flex;width:100%;margin-bottom:8px;justify-content:space-between}.msg-template>div[data-v-8e5e4859],.msg-template textarea[data-v-8e5e4859]{flex:1;border:var(--8d8ff372);border-radius:4px;padding:8px;height:100%;min-height:50px;width:calc(100% - 16px)}.msg-template .left-template-tag div[data-v-8e5e4859]{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-8e5e4859]{background:rgba(255,255,255,0)}.msg-template .right-template[data-v-8e5e4859]:focus-visible{outline:none}

package/package.json

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