iking-template-inset 0.0.3 → 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-21 10:28:43
+ * @LastEditTime : 2022-11-28 12:09:42
  */
 /// <reference types="vite/client" />
 
@@ -13,16 +13,18 @@ declare module 'iking-template-inset' {
   const component: Component<{
     width: number; // 宽度
     height: number; // 高度
-    show: boolean;// 是否显示
-    sliderSize: number; // 滑块大小
-    scale: number; // 滑块缩放比例
-    range: number; // 误差范围
-    images: string[] | null; // 自定义图片数组
-    successText: string; // 校验通过文字
-    failText: string; // 校验失败文字
-    sliderText: string; // 滑块文字
-    padding: number; // 内边距
-    el: HTMLBaseElement | string //CSS 选择器字符串或者一个真实的 DOM 节点
+    // 参数列表
+    tagList: Array<{
+      label: string;
+      value: string;
+      [key: string]: any;
+    }[]>,
+    // "1px solid #dcdfe6"
+    border: string;
+    // 排列方式
+    horizontal: Boolean
+    // placeholder
+    placeholder: string
   }>
   export default component
 }

package/dist/ikingtemplateinset.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as b, ref as r, watch as k, openBlock as c, createElementBlock as u, normalizeClass as h, createElementVNode as v, Fragment as _, renderList as $, renderSlot as I, createTextVNode as N, toDisplayString as S, withKeys as T, withModifiers as w, nextTick as x } from "vue";
-const C = { class: "left-template-tag" }, L = ["onClick"], V = /* @__PURE__ */ b({
+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: {
@@ -12,75 +12,96 @@ const C = { class: "left-template-tag" }, L = ["onClick"], V = /* @__PURE__ */ b
       type: Array,
       default: () => []
     },
-    class: {
+    border: {
       type: String,
-      default: ""
+      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(s, { emit: d }) {
-    const o = s, l = r(-1), i = r(), p = () => {
-      const e = document.getSelection();
-      l.value = e != null && e.baseNode ? e != null && e.baseOffset ? e == null ? void 0 : e.baseOffset : 0 : -1;
-    }, t = r(""), f = r("");
-    k(t, (e) => {
-      d("update:modelVlaue", e);
+  setup(l, { emit: c }) {
+    const s = l;
+    x((t) => ({
+      "8d8ff372": l.border
+    }));
+    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 n = document.getSelection();
-      p(), x(() => {
-        t.value = e.target.innerHTML, f.value = n.baseNode.data;
-      });
-    }, g = (e) => {
-      const n = `\u3010${e.label}\${${e.value}}\u3011`;
-      if (l.value === -1)
-        t.value = `${t.value}${n}`;
-      else if (l.value === 0)
-        t.value = `${n}${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 a = t.value;
-        t.value = a.substring(0, l.value) + n + a.substring(l.value);
+        const o = n.value;
+        n.value = o.substring(0, a.value) + e + o.substring(a.value);
       }
-      i.value.innerHTML = t.value;
     };
-    return (e, n) => (c(), u("div", {
-      class: h(`msg-template ${o.class}`)
+    return (t, e) => (i(), d("div", {
+      class: "msg-template",
+      style: m({
+        "flex-direction": s.horizontal ? "row" : "column",
+        height: `${s.height}px`
+      })
     }, [
-      v("div", C, [
-        (c(!0), u(_, null, $(s.tagList, (a, m) => (c(), u("div", {
-          onClick: (D) => g(a),
-          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: { ...a, index: m }
-          }, void 0, !0) : (c(), u(_, { key: 1 }, [
-            N(S(a.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: i,
-        class: "right-template",
-        contenteditable: "",
-        onKeydown: n[0] || (n[0] = T(w(() => {
+        ], 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)
-    ], 2));
+        class: "right-template",
+        placeholder: l.placeholder
+      }, `
+    `, 40, F), [
+        [C, n.value]
+      ])
+    ], 4));
   }
 });
-const A = (s, d) => {
-  const o = s.__vccOpts || s;
-  for (const [l, i] of d)
-    o[l] = i;
-  return o;
-}, K = /* @__PURE__ */ A(V, [["__scopeId", "data-v-fd1bc07f"]]), O = (s) => {
-  s.component("IkingTemplateInset", K);
+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 {
-  K as default,
-  O as install
+  T as default,
+  E as install
 };

package/dist/ikingtemplateinset.umd.js

@@ -1 +1,2 @@
-(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.IkingTemplateInset={},l.Vue))})(this,function(l,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:()=>[]},class:{type:String,default:""}},emits:["update:modelVlaue"],setup(s,{emit:d}){const c=s,a=e.ref(-1),r=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(""),k=e.ref("");e.watch(n,t=>{d("update:modelVlaue",t)});const b=t=>{const o=document.getSelection();f(),e.nextTick(()=>{n.value=t.target.innerHTML,k.value=o.baseNode.data})},h=t=>{const o=`\u3010${t.label}\${${t.value}}\u3011`;if(a.value===-1)n.value=`${n.value}${o}`;else if(a.value===0)n.value=`${o}${n.value}`;else{const i=n.value;n.value=i.substring(0,a.value)+o+i.substring(a.value)}r.value.innerHTML=n.value};return(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`msg-template ${c.class}`)},[e.createElementVNode("div",m,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.tagList,(i,u)=>(e.openBlock(),e.createElementBlock("div",{onClick:I=>h(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:r,class:"right-template",contenteditable:"",onKeydown:o[0]||(o[0]=e.withKeys(e.withModifiers(()=>{},["prevent"]),["enter"])),onKeyup:b,onClick:f},null,544)],2))}}),$="",T="",p=((s,d)=>{const c=s.__vccOpts||s;for(const[a,r]of d)c[a]=r;return c})(y,[["__scopeId","data-v-fd1bc07f"]]),g=s=>{s.component("IkingTemplateInset",p)};l.default=p,l.install=g,Object.defineProperties(l,{__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-fd1bc07f]{display:flex;width:100%;margin-bottom:8px}.msg-template>div[data-v-fd1bc07f]{flex:1;border:1px solid #9d9393;border-radius:4px;padding:8px}.msg-template .left-template-tag[data-v-fd1bc07f]{display:flex;flex-wrap:wrap;margin-right:16px}.msg-template .left-template-tag div[data-v-fd1bc07f]{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-fd1bc07f]{counter-increment:true}.msg-template .right-template[data-v-fd1bc07f]: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.3",
+  "version": "0.0.5",
   "main": "./dist/ikingtemplateinset.umd.js",
   "module": "./dist/ikingtemplateinset.es.js",
   "author": "金合研究院",