iking-template-inset 0.0.7 → 0.0.8
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,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as x, useCssVars as S, ref as i, watch as A, openBlock as c, createElementBlock as d, normalizeStyle as
|
|
1
|
+
import { defineComponent as x, useCssVars as S, ref as i, watch as A, openBlock as c, createElementBlock as d, normalizeStyle as f, createElementVNode as m, Fragment as h, renderList as C, renderSlot as w, createTextVNode as I, toDisplayString as V, withDirectives as B, withKeys as z, withModifiers as F, vModelText as K } from "vue";
|
|
2
2
|
const N = ["onClick"], T = ["placeholder"], D = /* @__PURE__ */ x({
|
|
3
3
|
__name: "App",
|
|
4
4
|
props: {
|
|
@@ -30,86 +30,88 @@ const N = ["onClick"], T = ["placeholder"], D = /* @__PURE__ */ x({
|
|
|
30
30
|
}
|
|
31
31
|
},
|
|
32
32
|
emits: ["update:modelValue", "change"],
|
|
33
|
-
setup(
|
|
34
|
-
const
|
|
33
|
+
setup(n, { emit: s }) {
|
|
34
|
+
const r = n;
|
|
35
35
|
S((e) => ({
|
|
36
|
-
|
|
36
|
+
"0c9f0fb8": n.border
|
|
37
37
|
}));
|
|
38
38
|
const o = i(-1), u = () => {
|
|
39
39
|
var t;
|
|
40
40
|
const e = (t = p.value) == null ? void 0 : t.selectionStart;
|
|
41
41
|
o.value = e ? e || 0 : -1;
|
|
42
|
-
},
|
|
43
|
-
A(
|
|
44
|
-
|
|
42
|
+
}, l = i(""), y = i(""), p = i(null), _ = /【\S.*?\$/g;
|
|
43
|
+
A(l, (e) => {
|
|
44
|
+
r.trigger === "change" && g(e);
|
|
45
45
|
});
|
|
46
|
-
const
|
|
47
|
-
|
|
46
|
+
const b = (e) => {
|
|
47
|
+
r.trigger === "blur" && g(l.value);
|
|
48
48
|
}, g = (e) => {
|
|
49
|
+
if (!e)
|
|
50
|
+
return;
|
|
49
51
|
const t = e.replaceAll(_, "$").replaceAll("\u3011", "");
|
|
50
52
|
s("update:modelValue", t), s("change", e);
|
|
51
|
-
},
|
|
53
|
+
}, $ = (e) => {
|
|
52
54
|
var t;
|
|
53
55
|
u(), y.value = (t = p.value) == null ? void 0 : t.selectionStart;
|
|
54
56
|
}, k = (e) => {
|
|
55
57
|
const t = `\u3010${e.label}\${${e.value}}\u3011`;
|
|
56
58
|
if (o.value === -1)
|
|
57
|
-
|
|
59
|
+
l.value = `${l.value}${t}`;
|
|
58
60
|
else if (o.value === 0)
|
|
59
|
-
|
|
61
|
+
l.value = `${t}${l.value}`;
|
|
60
62
|
else {
|
|
61
|
-
const
|
|
62
|
-
|
|
63
|
+
const a = l.value;
|
|
64
|
+
l.value = a.substring(0, o.value) + t + a.substring(o.value);
|
|
63
65
|
}
|
|
64
66
|
};
|
|
65
67
|
return (e, t) => (c(), d("div", {
|
|
66
68
|
class: "msg-template",
|
|
67
|
-
style:
|
|
68
|
-
"flex-direction":
|
|
69
|
-
height: `${
|
|
69
|
+
style: f({
|
|
70
|
+
"flex-direction": r.horizontal ? "row" : "column",
|
|
71
|
+
height: `${r.height}px`
|
|
70
72
|
})
|
|
71
73
|
}, [
|
|
72
|
-
|
|
74
|
+
m("div", {
|
|
73
75
|
class: "left-template-tag",
|
|
74
|
-
style:
|
|
76
|
+
style: f({ "margin-right": r.horizontal ? "16px" : "0" })
|
|
75
77
|
}, [
|
|
76
|
-
(c(!0), d(h, null, C(
|
|
77
|
-
onClick: (M) => k(
|
|
78
|
+
(c(!0), d(h, null, C(n.tagList, (a, v) => (c(), d("div", {
|
|
79
|
+
onClick: (M) => k(a),
|
|
78
80
|
key: v
|
|
79
81
|
}, [
|
|
80
82
|
e.$slots.item ? w(e.$slots, "item", {
|
|
81
83
|
key: 0,
|
|
82
|
-
item: { ...
|
|
84
|
+
item: { ...a, index: v }
|
|
83
85
|
}, void 0, !0) : (c(), d(h, { key: 1 }, [
|
|
84
|
-
I(V(
|
|
86
|
+
I(V(a.label), 1)
|
|
85
87
|
], 64))
|
|
86
88
|
], 8, N))), 128))
|
|
87
89
|
], 4),
|
|
88
|
-
B(
|
|
90
|
+
B(m("textarea", {
|
|
89
91
|
ref_key: "refArea",
|
|
90
92
|
ref: p,
|
|
91
|
-
"onUpdate:modelValue": t[0] || (t[0] = (
|
|
92
|
-
onKeyup:
|
|
93
|
+
"onUpdate:modelValue": t[0] || (t[0] = (a) => l.value = a),
|
|
94
|
+
onKeyup: $,
|
|
93
95
|
onClick: u,
|
|
94
96
|
onKeydown: t[1] || (t[1] = z(F(() => {
|
|
95
97
|
}, ["prevent"]), ["enter"])),
|
|
96
|
-
onChange:
|
|
98
|
+
onChange: b,
|
|
97
99
|
class: "right-template",
|
|
98
|
-
placeholder:
|
|
100
|
+
placeholder: n.placeholder
|
|
99
101
|
}, `
|
|
100
102
|
`, 40, T), [
|
|
101
|
-
[K,
|
|
103
|
+
[K, l.value]
|
|
102
104
|
])
|
|
103
105
|
], 4));
|
|
104
106
|
}
|
|
105
107
|
});
|
|
106
|
-
const E = (
|
|
107
|
-
const
|
|
108
|
+
const E = (n, s) => {
|
|
109
|
+
const r = n.__vccOpts || n;
|
|
108
110
|
for (const [o, u] of s)
|
|
109
|
-
|
|
110
|
-
return
|
|
111
|
-
}, L = /* @__PURE__ */ E(D, [["__scopeId", "data-v-
|
|
112
|
-
|
|
111
|
+
r[o] = u;
|
|
112
|
+
return r;
|
|
113
|
+
}, L = /* @__PURE__ */ E(D, [["__scopeId", "data-v-bd87b88c"]]), O = (n) => {
|
|
114
|
+
n.component("IkingTemplateInset", L);
|
|
113
115
|
};
|
|
114
116
|
export {
|
|
115
117
|
L as default,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.IkingTemplateInset={},r.Vue))})(this,function(r,e){"use strict";const g=["onClick"],h=["placeholder"],y=e.defineComponent({__name:"App",props:{modelValue:{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"},trigger:{type:String,default:"blur"}},emits:["update:modelValue","change"],setup(
|
|
2
|
-
`,40,h),[[e.vModelText,
|
|
1
|
+
(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.IkingTemplateInset={},r.Vue))})(this,function(r,e){"use strict";const g=["onClick"],h=["placeholder"],y=e.defineComponent({__name:"App",props:{modelValue:{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"},trigger:{type:String,default:"blur"}},emits:["update:modelValue","change"],setup(o,{emit:c}){const a=o;e.useCssVars(t=>({"0c9f0fb8":o.border}));const i=e.ref(-1),d=()=>{var l;const t=(l=u.value)==null?void 0:l.selectionStart;i.value=t?t||0:-1},n=e.ref(""),k=e.ref(""),u=e.ref(null),b=/【\S.*?\$/g;e.watch(n,t=>{a.trigger==="change"&&f(t)});const S=t=>{a.trigger==="blur"&&f(n.value)},f=t=>{if(!t)return;const l=t.replaceAll(b,"$").replaceAll("\u3011","");c("update:modelValue",l),c("change",t)},$=t=>{var l;d(),k.value=(l=u.value)==null?void 0:l.selectionStart},x=t=>{const l=`\u3010${t.label}\${${t.value}}\u3011`;if(i.value===-1)n.value=`${n.value}${l}`;else if(i.value===0)n.value=`${l}${n.value}`;else{const s=n.value;n.value=s.substring(0,i.value)+l+s.substring(i.value)}};return(t,l)=>(e.openBlock(),e.createElementBlock("div",{class:"msg-template",style:e.normalizeStyle({"flex-direction":a.horizontal?"row":"column",height:`${a.height}px`})},[e.createElementVNode("div",{class:"left-template-tag",style:e.normalizeStyle({"margin-right":a.horizontal?"16px":"0"})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.tagList,(s,m)=>(e.openBlock(),e.createElementBlock("div",{onClick:v=>x(s),key:m},[t.$slots.item?e.renderSlot(t.$slots,"item",{key:0,item:{...s,index:m}},void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(s.label),1)],64))],8,g))),128))],4),e.withDirectives(e.createElementVNode("textarea",{ref_key:"refArea",ref:u,"onUpdate:modelValue":l[0]||(l[0]=s=>n.value=s),onKeyup:$,onClick:d,onKeydown:l[1]||(l[1]=e.withKeys(e.withModifiers(()=>{},["prevent"]),["enter"])),onChange:S,class:"right-template",placeholder:o.placeholder},`
|
|
2
|
+
`,40,h),[[e.vModelText,n.value]])],4))}}),B="",I="",p=((o,c)=>{const a=o.__vccOpts||o;for(const[i,d]of c)a[i]=d;return a})(y,[["__scopeId","data-v-bd87b88c"]]),_=o=>{o.component("IkingTemplateInset",p)};r.default=p,r.install=_,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/dist/style.css
CHANGED
|
@@ -1 +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-
|
|
1
|
+
.__templeate_param_tag{display:inline-block;padding:2px;background:#dfdfdf;font-size:13px;border-radius:4px;margin-right:2px}.msg-template[data-v-bd87b88c]{display:flex;width:100%;margin-bottom:8px;justify-content:space-between}.msg-template>div[data-v-bd87b88c],.msg-template textarea[data-v-bd87b88c]{flex:1;border:var(--0c9f0fb8);border-radius:4px;padding:8px;height:100%;min-height:50px;width:calc(100% - 16px)}.msg-template .left-template-tag div[data-v-bd87b88c]{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:32px;color:#464646}.msg-template .right-template[data-v-bd87b88c]{background:rgba(255,255,255,0)}.msg-template .right-template[data-v-bd87b88c]:focus-visible{outline:none}
|