iking-template-inset 0.0.7 → 0.0.9
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,6 +1,6 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
const
|
|
3
|
-
__name: "
|
|
1
|
+
import { defineComponent as S, useCssVars as b, ref as u, watch as I, openBlock as c, createElementBlock as d, normalizeStyle as f, createElementVNode as v, Fragment as h, renderList as C, renderSlot as w, createTextVNode as V, toDisplayString as B, withDirectives as F, withKeys as T, withModifiers as A, vModelText as z } from "vue";
|
|
2
|
+
const E = ["onClick"], K = ["placeholder"], N = /* @__PURE__ */ S({
|
|
3
|
+
__name: "iking-template-inset",
|
|
4
4
|
props: {
|
|
5
5
|
modelValue: {
|
|
6
6
|
type: String,
|
|
@@ -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 a =
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
setup(n, { emit: s }) {
|
|
34
|
+
const a = n;
|
|
35
|
+
b((e) => ({
|
|
36
|
+
"6f41ec5e": n.border
|
|
37
37
|
}));
|
|
38
|
-
const o =
|
|
38
|
+
const o = u(-1), i = () => {
|
|
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
|
-
|
|
42
|
+
}, l = u(""), y = u(""), p = u(null), _ = /『\S.*?\$/g;
|
|
43
|
+
I(l, (e) => {
|
|
44
44
|
a.trigger === "change" && g(e);
|
|
45
45
|
});
|
|
46
|
-
const
|
|
47
|
-
a.trigger === "blur" && g(
|
|
46
|
+
const k = (e) => {
|
|
47
|
+
a.trigger === "blur" && g(l.value);
|
|
48
48
|
}, g = (e) => {
|
|
49
|
-
|
|
49
|
+
if (!e)
|
|
50
|
+
return;
|
|
51
|
+
const t = e.replaceAll(_, "$").replaceAll("\u300F", "");
|
|
50
52
|
s("update:modelValue", t), s("change", e);
|
|
51
|
-
},
|
|
53
|
+
}, $ = (e) => {
|
|
52
54
|
var t;
|
|
53
|
-
|
|
54
|
-
},
|
|
55
|
-
const t = `\
|
|
55
|
+
i(), y.value = (t = p.value) == null ? void 0 : t.selectionStart;
|
|
56
|
+
}, x = (e) => {
|
|
57
|
+
const t = `\u300E${e.label}\${${e.value}}\u300F`;
|
|
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 r =
|
|
62
|
-
|
|
63
|
+
const r = l.value;
|
|
64
|
+
l.value = r.substring(0, o.value) + t + r.substring(o.value);
|
|
63
65
|
}
|
|
64
66
|
};
|
|
65
67
|
return (e, t) => (c(), d("div", {
|
|
66
68
|
class: "msg-template",
|
|
67
|
-
style:
|
|
69
|
+
style: f({
|
|
68
70
|
"flex-direction": a.horizontal ? "row" : "column",
|
|
69
71
|
height: `${a.height}px`
|
|
70
72
|
})
|
|
71
73
|
}, [
|
|
72
|
-
|
|
74
|
+
v("div", {
|
|
73
75
|
class: "left-template-tag",
|
|
74
|
-
style:
|
|
76
|
+
style: f({ "margin-right": a.horizontal ? "16px" : "0" })
|
|
75
77
|
}, [
|
|
76
|
-
(c(!0), d(h, null, C(
|
|
77
|
-
onClick: (M) =>
|
|
78
|
-
key:
|
|
78
|
+
(c(!0), d(h, null, C(n.tagList, (r, m) => (c(), d("div", {
|
|
79
|
+
onClick: (M) => x(r),
|
|
80
|
+
key: m
|
|
79
81
|
}, [
|
|
80
82
|
e.$slots.item ? w(e.$slots, "item", {
|
|
81
83
|
key: 0,
|
|
82
|
-
item: { ...r, index:
|
|
84
|
+
item: { ...r, index: m }
|
|
83
85
|
}, void 0, !0) : (c(), d(h, { key: 1 }, [
|
|
84
|
-
|
|
86
|
+
V(B(r.label), 1)
|
|
85
87
|
], 64))
|
|
86
|
-
], 8,
|
|
88
|
+
], 8, E))), 128))
|
|
87
89
|
], 4),
|
|
88
|
-
|
|
90
|
+
F(v("textarea", {
|
|
89
91
|
ref_key: "refArea",
|
|
90
92
|
ref: p,
|
|
91
|
-
"onUpdate:modelValue": t[0] || (t[0] = (r) =>
|
|
92
|
-
onKeyup:
|
|
93
|
-
onClick:
|
|
94
|
-
onKeydown: t[1] || (t[1] =
|
|
93
|
+
"onUpdate:modelValue": t[0] || (t[0] = (r) => l.value = r),
|
|
94
|
+
onKeyup: $,
|
|
95
|
+
onClick: i,
|
|
96
|
+
onKeydown: t[1] || (t[1] = T(A(() => {
|
|
95
97
|
}, ["prevent"]), ["enter"])),
|
|
96
|
-
onChange:
|
|
98
|
+
onChange: k,
|
|
97
99
|
class: "right-template",
|
|
98
|
-
placeholder:
|
|
100
|
+
placeholder: n.placeholder
|
|
99
101
|
}, `
|
|
100
|
-
`, 40,
|
|
101
|
-
[
|
|
102
|
+
`, 40, K), [
|
|
103
|
+
[z, l.value]
|
|
102
104
|
])
|
|
103
105
|
], 4));
|
|
104
106
|
}
|
|
105
107
|
});
|
|
106
|
-
const
|
|
107
|
-
const a =
|
|
108
|
-
for (const [o,
|
|
109
|
-
a[o] =
|
|
108
|
+
const D = (n, s) => {
|
|
109
|
+
const a = n.__vccOpts || n;
|
|
110
|
+
for (const [o, i] of s)
|
|
111
|
+
a[o] = i;
|
|
110
112
|
return a;
|
|
111
|
-
}, L = /* @__PURE__ */
|
|
112
|
-
|
|
113
|
+
}, L = /* @__PURE__ */ D(N, [["__scopeId", "data-v-f89a7746"]]), 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:"
|
|
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:"iking-template-inset",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=>({"6f41ec5e":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),S=/『\S.*?\$/g;e.watch(n,t=>{a.trigger==="change"&&f(t)});const $=t=>{a.trigger==="blur"&&f(n.value)},f=t=>{if(!t)return;const l=t.replaceAll(S,"$").replaceAll("\u300F","");c("update:modelValue",l),c("change",t)},b=t=>{var l;d(),k.value=(l=u.value)==null?void 0:l.selectionStart},x=t=>{const l=`\u300E${t.label}\${${t.value}}\u300F`;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:b,onClick:d,onKeydown:l[1]||(l[1]=e.withKeys(e.withModifiers(()=>{},["prevent"]),["enter"])),onChange:$,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-f89a7746"]]),_=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-f89a7746]{display:flex;width:100%;margin-bottom:8px;justify-content:space-between}.msg-template>div[data-v-f89a7746],.msg-template textarea[data-v-f89a7746]{flex:1;border:var(--6f41ec5e);border-radius:4px;padding:8px;height:100%;min-height:50px;width:calc(100% - 16px)}.msg-template .left-template-tag div[data-v-f89a7746]{display:inline-flex;align-items:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;flex-wrap:wrap;cursor:pointer;user-select:none;padding:0 8px;width:100px;border-radius:4px;background:#edebeb;margin-right:8px;margin-bottom:8px;height:32px;color:#464646}.msg-template .right-template[data-v-f89a7746]{background:rgba(255,255,255,0);font-size:inherit;font-family:inherit;color:inherit}.msg-template .right-template[data-v-f89a7746]:focus-visible{outline:none}
|