iking-template-inset 0.0.6 → 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.
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* @description :
|
|
5
5
|
* @updateInfo :
|
|
6
6
|
* @Date : 2022-11-21 10:28:10
|
|
7
|
-
* @LastEditTime : 2022-11-28
|
|
7
|
+
* @LastEditTime : 2022-11-28 14:33:34
|
|
8
8
|
*/
|
|
9
9
|
/// <reference types="vite/client" />
|
|
10
10
|
|
|
@@ -25,6 +25,7 @@ declare module 'iking-template-inset' {
|
|
|
25
25
|
horizontal: Boolean
|
|
26
26
|
// placeholder
|
|
27
27
|
placeholder: string
|
|
28
|
+
trigger: 'change' | 'blur'
|
|
28
29
|
}>
|
|
29
30
|
export default component
|
|
30
31
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
const
|
|
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
|
+
const N = ["onClick"], T = ["placeholder"], D = /* @__PURE__ */ x({
|
|
3
3
|
__name: "App",
|
|
4
4
|
props: {
|
|
5
|
-
|
|
5
|
+
modelValue: {
|
|
6
6
|
type: String,
|
|
7
7
|
default: ""
|
|
8
8
|
},
|
|
@@ -23,85 +23,97 @@ const F = ["onClick"], K = ["placeholder"], N = /* @__PURE__ */ k({
|
|
|
23
23
|
placeholder: {
|
|
24
24
|
type: String,
|
|
25
25
|
default: "\u8BF7\u8F93\u5165\u6216\u70B9\u51FB\u63D2\u5165\u53C2\u6570"
|
|
26
|
+
},
|
|
27
|
+
trigger: {
|
|
28
|
+
type: String,
|
|
29
|
+
default: "blur"
|
|
26
30
|
}
|
|
27
31
|
},
|
|
28
|
-
emits: ["update:
|
|
29
|
-
setup(
|
|
30
|
-
const r =
|
|
31
|
-
|
|
32
|
-
"
|
|
32
|
+
emits: ["update:modelValue", "change"],
|
|
33
|
+
setup(n, { emit: s }) {
|
|
34
|
+
const r = n;
|
|
35
|
+
S((e) => ({
|
|
36
|
+
"0c9f0fb8": n.border
|
|
33
37
|
}));
|
|
34
38
|
const o = i(-1), u = () => {
|
|
35
39
|
var t;
|
|
36
40
|
const e = (t = p.value) == null ? void 0 : t.selectionStart;
|
|
37
41
|
o.value = e ? e || 0 : -1;
|
|
38
|
-
},
|
|
39
|
-
|
|
40
|
-
|
|
42
|
+
}, l = i(""), y = i(""), p = i(null), _ = /【\S.*?\$/g;
|
|
43
|
+
A(l, (e) => {
|
|
44
|
+
r.trigger === "change" && g(e);
|
|
41
45
|
});
|
|
42
|
-
const
|
|
43
|
-
|
|
44
|
-
|
|
46
|
+
const b = (e) => {
|
|
47
|
+
r.trigger === "blur" && g(l.value);
|
|
48
|
+
}, g = (e) => {
|
|
49
|
+
if (!e)
|
|
50
|
+
return;
|
|
51
|
+
const t = e.replaceAll(_, "$").replaceAll("\u3011", "");
|
|
52
|
+
s("update:modelValue", t), s("change", e);
|
|
45
53
|
}, $ = (e) => {
|
|
54
|
+
var t;
|
|
55
|
+
u(), y.value = (t = p.value) == null ? void 0 : t.selectionStart;
|
|
56
|
+
}, k = (e) => {
|
|
46
57
|
const t = `\u3010${e.label}\${${e.value}}\u3011`;
|
|
47
58
|
if (o.value === -1)
|
|
48
|
-
|
|
59
|
+
l.value = `${l.value}${t}`;
|
|
49
60
|
else if (o.value === 0)
|
|
50
|
-
|
|
61
|
+
l.value = `${t}${l.value}`;
|
|
51
62
|
else {
|
|
52
|
-
const
|
|
53
|
-
|
|
63
|
+
const a = l.value;
|
|
64
|
+
l.value = a.substring(0, o.value) + t + a.substring(o.value);
|
|
54
65
|
}
|
|
55
66
|
};
|
|
56
67
|
return (e, t) => (c(), d("div", {
|
|
57
68
|
class: "msg-template",
|
|
58
|
-
style:
|
|
69
|
+
style: f({
|
|
59
70
|
"flex-direction": r.horizontal ? "row" : "column",
|
|
60
71
|
height: `${r.height}px`
|
|
61
72
|
})
|
|
62
73
|
}, [
|
|
63
|
-
|
|
74
|
+
m("div", {
|
|
64
75
|
class: "left-template-tag",
|
|
65
|
-
style:
|
|
76
|
+
style: f({ "margin-right": r.horizontal ? "16px" : "0" })
|
|
66
77
|
}, [
|
|
67
|
-
(c(!0), d(
|
|
68
|
-
onClick: (
|
|
78
|
+
(c(!0), d(h, null, C(n.tagList, (a, v) => (c(), d("div", {
|
|
79
|
+
onClick: (M) => k(a),
|
|
69
80
|
key: v
|
|
70
81
|
}, [
|
|
71
|
-
e.$slots.item ?
|
|
82
|
+
e.$slots.item ? w(e.$slots, "item", {
|
|
72
83
|
key: 0,
|
|
73
|
-
item: { ...
|
|
74
|
-
}, void 0, !0) : (c(), d(
|
|
75
|
-
|
|
84
|
+
item: { ...a, index: v }
|
|
85
|
+
}, void 0, !0) : (c(), d(h, { key: 1 }, [
|
|
86
|
+
I(V(a.label), 1)
|
|
76
87
|
], 64))
|
|
77
|
-
], 8,
|
|
88
|
+
], 8, N))), 128))
|
|
78
89
|
], 4),
|
|
79
|
-
|
|
90
|
+
B(m("textarea", {
|
|
80
91
|
ref_key: "refArea",
|
|
81
92
|
ref: p,
|
|
82
|
-
"onUpdate:modelValue": t[0] || (t[0] = (
|
|
83
|
-
onKeyup:
|
|
93
|
+
"onUpdate:modelValue": t[0] || (t[0] = (a) => l.value = a),
|
|
94
|
+
onKeyup: $,
|
|
84
95
|
onClick: u,
|
|
85
|
-
onKeydown: t[1] || (t[1] =
|
|
96
|
+
onKeydown: t[1] || (t[1] = z(F(() => {
|
|
86
97
|
}, ["prevent"]), ["enter"])),
|
|
98
|
+
onChange: b,
|
|
87
99
|
class: "right-template",
|
|
88
|
-
placeholder:
|
|
100
|
+
placeholder: n.placeholder
|
|
89
101
|
}, `
|
|
90
|
-
`, 40,
|
|
91
|
-
[
|
|
102
|
+
`, 40, T), [
|
|
103
|
+
[K, l.value]
|
|
92
104
|
])
|
|
93
105
|
], 4));
|
|
94
106
|
}
|
|
95
107
|
});
|
|
96
|
-
const
|
|
97
|
-
const r =
|
|
108
|
+
const E = (n, s) => {
|
|
109
|
+
const r = n.__vccOpts || n;
|
|
98
110
|
for (const [o, u] of s)
|
|
99
111
|
r[o] = u;
|
|
100
112
|
return r;
|
|
101
|
-
},
|
|
102
|
-
|
|
113
|
+
}, L = /* @__PURE__ */ E(D, [["__scopeId", "data-v-bd87b88c"]]), O = (n) => {
|
|
114
|
+
n.component("IkingTemplateInset", L);
|
|
103
115
|
};
|
|
104
116
|
export {
|
|
105
|
-
|
|
106
|
-
|
|
117
|
+
L as default,
|
|
118
|
+
O as install
|
|
107
119
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
`,40,
|
|
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}
|