iking-template-inset 0.0.13 → 0.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { defineComponent as E, ref as g, openBlock as v, createElementBlock as y, normalizeStyle as H, createElementVNode as
|
|
2
|
-
const C = { class: "left" }, I = ["onClick"],
|
|
1
|
+
import { defineComponent as E, ref as g, openBlock as v, createElementBlock as y, normalizeStyle as H, createElementVNode as h, Fragment as M, renderList as O, toDisplayString as S } from "vue";
|
|
2
|
+
const C = { class: "left" }, I = ["onClick"], V = ["innerHTML"], w = /* @__PURE__ */ E({
|
|
3
3
|
__name: "iking-template-inset",
|
|
4
4
|
props: {
|
|
5
5
|
template: {
|
|
@@ -23,92 +23,92 @@ const C = { class: "left" }, I = ["onClick"], w = ["innerHTML"], V = /* @__PURE_
|
|
|
23
23
|
},
|
|
24
24
|
tagStyle: {
|
|
25
25
|
type: String,
|
|
26
|
-
default: "color:
|
|
26
|
+
default: "color: var(--ik-pagin-text-color, #464646);background:var(--ik-border-color, #029EF7);border-radius:5px;padding:8px 0;margin:0 4px;user-select: none;"
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
emits: ["change"],
|
|
30
|
-
setup(a, { expose:
|
|
31
|
-
const r = a, l = g(""), p = g(""),
|
|
30
|
+
setup(a, { expose: m, emit: u }) {
|
|
31
|
+
const r = a, l = g(""), p = g(""), o = g(0), T = /\$\{(.*?)\}/g, x = /【(.*?)】/g, $ = /<span.*?>【.+?\((.*?)\)】<\/span>/g, k = r.tagStyle;
|
|
32
32
|
((n) => {
|
|
33
33
|
const e = n.replace(T, (t, c, d) => {
|
|
34
|
-
const
|
|
35
|
-
return
|
|
34
|
+
const s = r.list.find((i) => i[r.paramProps.key] == c);
|
|
35
|
+
return s ? `<span contenteditable="false" style="${k}">\u3010${s[r.paramProps.name]}(${c})\u3011</span>` : t;
|
|
36
36
|
});
|
|
37
37
|
l.value = e;
|
|
38
38
|
})(r.template);
|
|
39
|
-
const
|
|
40
|
-
if (
|
|
39
|
+
const b = (n) => {
|
|
40
|
+
if (o.value === -1)
|
|
41
41
|
return;
|
|
42
|
-
const e = `<span contenteditable="false" style="${
|
|
43
|
-
l.value = p.value.slice(0,
|
|
42
|
+
const e = `<span contenteditable="false" style="${k}">\u3010${n[r.paramProps.name]}(${n[r.paramProps.key]})\u3011</span>`;
|
|
43
|
+
l.value = p.value.slice(0, o.value) + e + p.value.slice(o.value), u("change", l.value.replace($, "$${$1}"));
|
|
44
44
|
}, L = (n) => {
|
|
45
45
|
p.value = n.target.innerHTML;
|
|
46
46
|
}, P = (n) => n.split(/(<span.*?>.*?<\/span>)/).filter((e) => e !== ""), _ = (n) => {
|
|
47
47
|
var c, d;
|
|
48
48
|
const e = window.getSelection();
|
|
49
49
|
if (n.target.tagName === "SPAN") {
|
|
50
|
-
|
|
50
|
+
o.value = -1;
|
|
51
51
|
return;
|
|
52
52
|
}
|
|
53
53
|
p.value = n.target.innerHTML;
|
|
54
54
|
const t = e == null ? void 0 : e.baseNode;
|
|
55
55
|
if (t != null && t.data) {
|
|
56
56
|
if (t != null && t.previousSibling) {
|
|
57
|
-
const
|
|
58
|
-
if (
|
|
59
|
-
|
|
57
|
+
const s = t.previousSibling.outerHTML, i = `${s}${(c = e == null ? void 0 : e.baseNode) == null ? void 0 : c.nodeValue}`, f = n.target.innerHTML.indexOf(i);
|
|
58
|
+
if (f !== -1) {
|
|
59
|
+
o.value = f + (e == null ? void 0 : e.baseOffset) + s.length;
|
|
60
60
|
return;
|
|
61
61
|
}
|
|
62
62
|
} else if (t != null && t.nextSibling) {
|
|
63
|
-
const
|
|
64
|
-
if (
|
|
65
|
-
|
|
63
|
+
const s = t.nextSibling.outerHTML, i = `${(d = e == null ? void 0 : e.baseNode) == null ? void 0 : d.nodeValue}${s}`, f = n.target.innerHTML.indexOf(i);
|
|
64
|
+
if (f !== -1) {
|
|
65
|
+
o.value = (e == null ? void 0 : e.baseOffset) + f;
|
|
66
66
|
return;
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
} else {
|
|
70
|
-
|
|
71
|
-
const
|
|
70
|
+
o.value = 0;
|
|
71
|
+
const s = P(n.target.innerHTML);
|
|
72
72
|
let i = 0;
|
|
73
73
|
for (; i < e.baseOffset; )
|
|
74
|
-
|
|
74
|
+
o.value += s[i].length, i++;
|
|
75
75
|
return n.keyCode === 8, void 0;
|
|
76
76
|
}
|
|
77
|
-
|
|
77
|
+
o.value = e == null ? void 0 : e.baseOffset, u("change", p.value.replace(x, "$${$1}"));
|
|
78
78
|
};
|
|
79
|
-
return
|
|
79
|
+
return m({
|
|
80
80
|
clearValue: () => {
|
|
81
81
|
l.value = "";
|
|
82
82
|
},
|
|
83
83
|
template: l.value,
|
|
84
|
-
value: l.value.replace(
|
|
84
|
+
value: l.value.replace($, "$${$1}")
|
|
85
85
|
}), (n, e) => (v(), y("div", {
|
|
86
86
|
class: "container",
|
|
87
87
|
style: H({ height: `${a.height}px` })
|
|
88
88
|
}, [
|
|
89
|
-
|
|
89
|
+
h("div", C, [
|
|
90
90
|
(v(!0), y(M, null, O(a.list, (t) => (v(), y("span", {
|
|
91
|
-
onClick: (c) =>
|
|
91
|
+
onClick: (c) => b(t),
|
|
92
92
|
key: t[a.paramProps.key]
|
|
93
93
|
}, S(t[a.paramProps.name]) + "(" + S(t[a.paramProps.key]) + ")", 9, I))), 128))
|
|
94
94
|
]),
|
|
95
|
-
|
|
95
|
+
h("div", {
|
|
96
96
|
class: "right",
|
|
97
97
|
innerHTML: l.value,
|
|
98
98
|
contenteditable: "",
|
|
99
99
|
onKeyup: L,
|
|
100
100
|
onKeydown: _,
|
|
101
101
|
onClick: _
|
|
102
|
-
}, null, 40,
|
|
102
|
+
}, null, 40, V)
|
|
103
103
|
], 4));
|
|
104
104
|
}
|
|
105
105
|
});
|
|
106
|
-
const R = (a,
|
|
106
|
+
const R = (a, m) => {
|
|
107
107
|
const u = a.__vccOpts || a;
|
|
108
|
-
for (const [r, l] of
|
|
108
|
+
for (const [r, l] of m)
|
|
109
109
|
u[r] = l;
|
|
110
110
|
return u;
|
|
111
|
-
}, G = /* @__PURE__ */ R(
|
|
111
|
+
}, G = /* @__PURE__ */ R(w, [["__scopeId", "data-v-28e8fa3d"]]), F = (a) => {
|
|
112
112
|
a.component("IkingTemplateInset", G);
|
|
113
113
|
};
|
|
114
114
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(p,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(p=typeof globalThis<"u"?globalThis:p||self,t(p.IkingTemplateInset={},p.Vue))})(this,function(p,t){"use strict";const $={class:"left"},S=["onClick"],T=["innerHTML"],
|
|
1
|
+
(function(p,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(p=typeof globalThis<"u"?globalThis:p||self,t(p.IkingTemplateInset={},p.Vue))})(this,function(p,t){"use strict";const $={class:"left"},S=["onClick"],T=["innerHTML"],x=t.defineComponent({__name:"iking-template-inset",props:{template:{type:String,default:""},list:{type:Array,default:()=>[]},paramProps:{type:Object,default:()=>({key:"key",name:"name"})},height:{type:String,default:300},tagStyle:{type:String,default:"color: var(--ik-pagin-text-color, #464646);background:var(--ik-border-color, #029EF7);border-radius:5px;padding:8px 0;margin:0 4px;user-select: none;"}},emits:["change"],setup(l,{expose:g,emit:f}){const r=l,o=t.ref(""),d=t.ref(""),i=t.ref(0),E=/\$\{(.*?)\}/g,M=/【(.*?)】/g,_=/<span.*?>【.+?\((.*?)\)】<\/span>/g,h=r.tagStyle;(a=>{const e=a.replace(E,(n,u,y)=>{const s=r.list.find(c=>c[r.paramProps.key]==u);return s?`<span contenteditable="false" style="${h}">\u3010${s[r.paramProps.name]}(${u})\u3011</span>`:n});o.value=e})(r.template);const P=a=>{if(i.value===-1)return;const e=`<span contenteditable="false" style="${h}">\u3010${a[r.paramProps.name]}(${a[r.paramProps.key]})\u3011</span>`;o.value=d.value.slice(0,i.value)+e+d.value.slice(i.value),f("change",o.value.replace(_,"$${$1}"))},L=a=>{d.value=a.target.innerHTML},H=a=>a.split(/(<span.*?>.*?<\/span>)/).filter(e=>e!==""),v=a=>{var u,y;const e=window.getSelection();if(a.target.tagName==="SPAN"){i.value=-1;return}d.value=a.target.innerHTML;const n=e==null?void 0:e.baseNode;if(n!=null&&n.data){if(n!=null&&n.previousSibling){const s=n.previousSibling.outerHTML,c=`${s}${(u=e==null?void 0:e.baseNode)==null?void 0:u.nodeValue}`,m=a.target.innerHTML.indexOf(c);if(m!==-1){i.value=m+(e==null?void 0:e.baseOffset)+s.length;return}}else if(n!=null&&n.nextSibling){const s=n.nextSibling.outerHTML,c=`${(y=e==null?void 0:e.baseNode)==null?void 0:y.nodeValue}${s}`,m=a.target.innerHTML.indexOf(c);if(m!==-1){i.value=(e==null?void 0:e.baseOffset)+m;return}}}else{i.value=0;const s=H(a.target.innerHTML);let c=0;for(;c<e.baseOffset;)i.value+=s[c].length,c++;return a.keyCode===8,void 0}i.value=e==null?void 0:e.baseOffset,f("change",d.value.replace(M,"$${$1}"))};return g({clearValue:()=>{o.value=""},template:o.value,value:o.value.replace(_,"$${$1}")}),(a,e)=>(t.openBlock(),t.createElementBlock("div",{class:"container",style:t.normalizeStyle({height:`${l.height}px`})},[t.createElementVNode("div",$,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(l.list,n=>(t.openBlock(),t.createElementBlock("span",{onClick:u=>P(n),key:n[l.paramProps.key]},t.toDisplayString(n[l.paramProps.name])+"("+t.toDisplayString(n[l.paramProps.key])+")",9,S))),128))]),t.createElementVNode("div",{class:"right",innerHTML:o.value,contenteditable:"",onKeyup:L,onKeydown:v,onClick:v},null,40,T)],4))}}),O="",k=((l,g)=>{const f=l.__vccOpts||l;for(const[r,o]of g)f[r]=o;return f})(x,[["__scopeId","data-v-28e8fa3d"]]),b=l=>{l.component("IkingTemplateInset",k)};p.default=k,p.install=b,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.container[data-v-
|
|
1
|
+
.container[data-v-28e8fa3d]{display:flex;align-items:center;justify-content:center}.container .left[data-v-28e8fa3d],.container .right[data-v-28e8fa3d]{flex:1;height:100%;border:1px solid var(--ik-border-color, #ddd);color:var(--ik-pagin-text-color, #464646);border-radius:4px;box-sizing:border-box;outline:none}.container .right[data-v-28e8fa3d]{padding:5px;line-height:40px;word-break:break-all}.container .left[data-v-28e8fa3d]{margin-right:16px}.container .left span[data-v-28e8fa3d]{background-color:var(--ik-border-color, #ededed);color:var(--ik-pagin-text-color, #464646);display:inline-block;padding:5px 10px;margin:5px;border-radius:4px;cursor:pointer;transition:all .25s}.container .left span[data-v-28e8fa3d]:hover{background-color:var(--ik-main-iconbg-color, #029EF7);color:#fff}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "iking-template-inset",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.14",
|
|
5
5
|
"main": "./dist/ikingtemplateinset.umd.js",
|
|
6
6
|
"module": "./dist/ikingtemplateinset.es.js",
|
|
7
7
|
"author": "金合研究院",
|
|
@@ -27,7 +27,8 @@
|
|
|
27
27
|
"scripts": {
|
|
28
28
|
"dev": "vite",
|
|
29
29
|
"build": "vue-tsc && vite build",
|
|
30
|
-
"preview": "vite preview"
|
|
30
|
+
"preview": "vite preview",
|
|
31
|
+
"pub": "npm publish --access public"
|
|
31
32
|
},
|
|
32
33
|
"keywords": [
|
|
33
34
|
"金合",
|