iking-template-inset 0.0.2 → 0.0.4

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 11:40:01
  */
 /// <reference types="vite/client" />
 
@@ -13,16 +13,16 @@ 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
   }>
   export default component
 }

package/dist/ikingtemplateinset.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as g, ref as r, watch as k, openBlock as u, createElementBlock as c, createElementVNode as _, Fragment as m, renderList as h, renderSlot as b, createTextVNode as $, toDisplayString as I, withKeys as N, withModifiers as T, nextTick as w } from "vue";
-const x = { class: "msg-template" }, L = { class: "left-template-tag" }, S = ["onClick"], V = /* @__PURE__ */ g({
+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({
   __name: "App",
   props: {
     modelVlaue: {
@@ -11,70 +11,85 @@ const x = { class: "msg-template" }, L = { class: "left-template-tag" }, S = ["o
     tagList: {
       type: Array,
       default: () => []
+    },
+    border: {
+      type: String,
+      default: "1px solid #dcdfe6"
+    },
+    horizontal: {
+      type: Boolean,
+      default: !0
     }
   },
   emits: ["update:modelVlaue"],
-  setup(o, { emit: d }) {
-    const n = r(-1), a = r(), i = () => {
+  setup(n, { emit: d }) {
+    const a = n;
+    b((e) => ({
+      "47b9f5d6": n.border
+    }));
+    const l = i(-1), r = i(), p = () => {
       const e = document.getSelection();
-      n.value = e != null && e.baseNode ? e != null && e.baseOffset ? e == null ? void 0 : e.baseOffset : 0 : -1;
-    }, t = r(""), v = r("");
+      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 f = (e) => {
-      const s = document.getSelection();
-      i(), w(() => {
-        t.value = e.target.innerHTML, v.value = s.baseNode.data;
+    const y = (e) => {
+      const o = document.getSelection();
+      p(), V(() => {
+        t.value = e.target.innerHTML, _.value = o.baseNode.data;
       });
-    }, y = (e) => {
-      const s = `\u3010${e.label}\${${e.value}}\u3011`;
-      if (n.value === -1)
-        t.value = `${t.value}${s}`;
-      else if (n.value === 0)
-        t.value = `${s}${t.value}`;
+    }, 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}`;
       else {
-        const l = t.value;
-        t.value = l.substring(0, n.value) + s + l.substring(n.value);
+        const s = t.value;
+        t.value = s.substring(0, l.value) + o + s.substring(l.value);
       }
-      a.value.innerHTML = t.value;
+      r.value.innerHTML = t.value;
     };
-    return (e, s) => (u(), c("div", x, [
-      _("div", L, [
-        (u(!0), c(m, null, h(o.tagList, (l, p) => (u(), c("div", {
-          onClick: (K) => y(l),
-          key: p
+    return (e, o) => (u(), c("div", {
+      class: "msg-template",
+      style: $({ "flex-direction": a.horizontal ? "row" : "column", height: `${a.height}px` })
+    }, [
+      v("div", C, [
+        (u(!0), c(f, null, x(n.tagList, (s, m) => (u(), c("div", {
+          onClick: (B) => g(s),
+          key: m
         }, [
-          e.$slots.item ? b(e.$slots, "item", {
+          e.$slots.item ? I(e.$slots, "item", {
             key: 0,
-            item: { ...l, index: p }
-          }, void 0, !0) : (u(), c(m, { key: 1 }, [
-            $(I(l.label), 1)
+            item: { ...s, index: m }
+          }, void 0, !0) : (u(), c(f, { key: 1 }, [
+            S(w(s.label), 1)
           ], 64))
-        ], 8, S))), 128))
+        ], 8, L))), 128))
       ]),
-      _("div", {
+      v("div", {
         ref_key: "insetDom",
-        ref: a,
+        ref: r,
         class: "right-template",
         contenteditable: "",
-        onKeydown: s[0] || (s[0] = N(T(() => {
+        onKeydown: o[0] || (o[0] = N(T(() => {
         }, ["prevent"]), ["enter"])),
-        onKeyup: f,
-        onClick: i
+        onKeyup: y,
+        onClick: p
       }, null, 544)
-    ]));
+    ], 4));
   }
 });
-const A = (o, d) => {
-  const n = o.__vccOpts || o;
-  for (const [a, i] of d)
-    n[a] = i;
-  return n;
-}, C = /* @__PURE__ */ A(V, [["__scopeId", "data-v-18f96dd0"]]), M = (o) => {
-  o.component("IkingTemplateInset", C);
+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);
 };
 export {
-  C as default,
+  z as default,
   M as install
 };

package/dist/ikingtemplateinset.umd.js

@@ -1 +1 @@
-(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 f={class:"msg-template"},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:()=>[]}},emits:["update:modelVlaue"],setup(a,{emit:d}){const l=e.ref(-1),c=e.ref(),r=()=>{const t=document.getSelection();l.value=t!=null&&t.baseNode?t!=null&&t.baseOffset?t==null?void 0:t.baseOffset:0:-1},n=e.ref(""),g=e.ref("");e.watch(n,t=>{d("update:modelVlaue",t)});const h=t=>{const s=document.getSelection();r(),e.nextTick(()=>{n.value=t.target.innerHTML,g.value=s.baseNode.data})},b=t=>{const s=`\u3010${t.label}\${${t.value}}\u3011`;if(l.value===-1)n.value=`${n.value}${s}`;else if(l.value===0)n.value=`${s}${n.value}`;else{const i=n.value;n.value=i.substring(0,l.value)+s+i.substring(l.value)}c.value.innerHTML=n.value};return(t,s)=>(e.openBlock(),e.createElementBlock("div",f,[e.createElementVNode("div",m,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.tagList,(i,u)=>(e.openBlock(),e.createElementBlock("div",{onClick:I=>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:h,onClick:r},null,544)]))}}),v="",T="",p=((a,d)=>{const l=a.__vccOpts||a;for(const[c,r]of d)l[c]=r;return l})(y,[["__scopeId","data-v-18f96dd0"]]),k=a=>{a.component("IkingTemplateInset",p)};o.default=p,o.install=k,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(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"}})});

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-18f96dd0]{display:flex}.msg-template>div[data-v-18f96dd0]{flex:1;border:1px solid #9d9393;border-radius:4px;padding:8px;margin-right:16px}.msg-template .left-template-tag[data-v-18f96dd0]{display:flex;flex-wrap:wrap}.msg-template .left-template-tag div[data-v-18f96dd0]{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-18f96dd0]{counter-increment:true}.msg-template .right-template[data-v-18f96dd0]: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-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}

package/package.json

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