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