@shenjipo/mention-vue2 2.4.0 → 2.6.0
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.
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +58 -57
- package/package.json +2 -2
package/dist/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var $=Object.defineProperty;var y=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable;var h=(n,e,t)=>e in n?$(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,M=(n,e)=>{for(var t in e||(e={}))q.call(e,t)&&h(n,t,e[t]);if(y)for(var t of y(e))b.call(e,t)&&h(n,t,e[t]);return n};var C=(n,e,t)=>new Promise((l,u)=>{var
|
|
1
|
+
"use strict";var $=Object.defineProperty;var y=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable;var h=(n,e,t)=>e in n?$(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,M=(n,e)=>{for(var t in e||(e={}))q.call(e,t)&&h(n,t,e[t]);if(y)for(var t of y(e))b.call(e,t)&&h(n,t,e[t]);return n};var C=(n,e,t)=>new Promise((l,u)=>{var s=o=>{try{d(t.next(o))}catch(a){u(a)}},r=o=>{try{d(t.throw(o))}catch(a){u(a)}},d=o=>o.done?l(o.value):Promise.resolve(o.value).then(s,r);d((t=t.apply(n,e)).next())});Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("@shenjipo/mention-editor"),i=require("vue-demi"),v=require("@floating-ui/dom"),w=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},E=w(k);function m(n,e,t,l,u,s,r,d){var o=typeof n=="function"?n.options:n;e&&(o.render=e,o.staticRenderFns=t,o._compiled=!0),l&&(o.functional=!0),s&&(o._scopeId="data-v-"+s);var a;if(r?(a=function(c){c=c||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!c&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(c=__VUE_SSR_CONTEXT__),u&&u.call(this,c),c&&c._registeredComponents&&c._registeredComponents.add(r)},o._ssrRegister=a):u&&(a=d?function(){u.call(this,(o.functional?this.parent:this).$root.$options.shadowRoot)}:u),a)if(o.functional){o._injectStyles=a;var f=o.render;o.render=function(g,p){return a.call(p),f(g,p)}}else{var _=o.beforeCreate;o.beforeCreate=_?[].concat(_,a):[a]}return{exports:n,options:o}}const R={name:"MEditorVue2",props:{value:{type:String,default:""},options:{type:Object,default:()=>({placeholder:"请输入内容，可粘贴图片到此处，按下/唤起快捷指令，"})}},emits:["input","fileReject","imageInput","deleteMention"],setup(n,{emit:e,expose:t}){const l=i.ref(null),u=i.ref(null);i.provide("editor",l),i.onMounted(()=>{u.value&&(l.value=new E.default({element:u.value,content:n.value,placeholder:n.options.placeholder,onChange:r=>{e("input",r)},onFileInput:r=>{e("fileInput",r)},onMentionDelete(r){e("deleteMention",r)}}))});const s=()=>{l.value.clear(),e("update:modelValue","")};return t({editor:l,clear:s}),{editor:l,editorRef:u,clear:s}}};var x=function(){var e=this,t=e._self._c;return t("div",{staticClass:"mention-editor-wrapper"},[e._t("header"),t("div",{ref:"editorRef",staticClass:"mention-editor"},[e.editor?e._t("default"):e._e()],2),e._t("footer")],2)},F=[],Q=m(R,x,F,!1,null,"66f3cc4e",null,null);const S=Q.exports;const U={name:"SuggestionMenu",props:{items:{type:Array,required:!0},loadingState:{type:String,default:"idle"},selectedIndex:{type:Number,default:0}},methods:{handleItemClick(n){this.$emit("itemClick",n)}}};var D=function(){var e=this,t=e._self._c;return t("div",{staticClass:"bn-suggestion-menu"},[e.items.length?e._l(e.items,function(l,u){return t("div",{key:l.id,staticClass:"suggestion-menu-item",class:{active:u===e.selectedIndex},on:{mousedown:function(s){return s.preventDefault(),e.handleItemClick(l)}}},[e._v(" "+e._s(l.label)+" ")])}):t("div",{staticClass:"suggestion-menu-item disabled"},[e._v("无数据")])],2)},A=[],L=m(U,D,A,!1,null,"af9205e7",null,null);const N=L.exports;function V(n,e,t,l){const u=i.ref(0),s=r=>r.key==="ArrowUp"?(r.preventDefault(),t.value&&t.value.length&&(u.value=(u.value-1+t.value.length)%t.value.length),!0):r.key==="ArrowDown"?(r.preventDefault(),t.value&&t.value.length&&(u.value=(u.value+1)%t.value.length),!0):r.key==="Enter"&&!r.isComposing?(r.preventDefault(),t.value&&t.value.length&&l&&l(t.value[u.value]),!0):!1;return i.onMounted(()=>{n&&n.domElement&&n.domElement.addEventListener("keydown",s,!0)}),i.onBeforeUnmount(()=>{n&&n.domElement&&n.domElement.removeEventListener("keydown",s,!0)}),i.watch(()=>e,()=>{u.value=0}),u}function T(n,e,t,l=8){const u=i.ref(0);return i.watch([n,e],([s,r])=>{r!=null&&(s&&s.length>0?u.value=r.length:r.length-u.value>l&&t())}),{lastUsefulQueryLength:u}}const W={name:"SuggestionMenuWrapper",components:{SuggestionMenu:N},props:{query:{type:String,required:!0},getItems:{type:Function,required:!0},onItemClick:{type:Function},closeMenu:{type:Function,required:!0},clearQuery:{type:Function,required:!0},insertMention:{type:Function,required:!0}},setup(n){const e=i.ref([]),t=i.ref("idle"),l=i.ref(""),u=i.inject("editor"),s=o=>{n.closeMenu(),n.clearQuery(),n.insertMention(o)},r=V(u.value,n.query,e,s);T(e,l,n.closeMenu);const d=()=>{const o=n.query;l.value=n.query,t.value="loading",n.getItems(n.query).then(a=>{l.value===o&&(e.value=a,t.value="loaded")})};return i.onMounted(d),i.watch(()=>n.query,()=>{d()}),{items:e,loadingState:t,selectedIndex:r,onItemClickInternal:s}}};var j=function(){var e=this,t=e._self._c;return t("SuggestionMenu",{attrs:{items:e.items,"loading-state":e.loadingState,"selected-index":e.selectedIndex},on:{itemClick:e.onItemClickInternal}})},O=[],P=m(W,j,O,!1,null,"e4189e8f",null,null);const B=P.exports;function z(n,e,t,l={}){const u=i.ref(null),s=i.ref(null),r=i.ref({});let d=null;i.watch(e,c=>{c&&(u.value={getBoundingClientRect:()=>c},o())},{immediate:!0}),i.watch(n,c=>C(this,null,function*(){if(!c){f();return}yield i.nextTick(),!(!u.value||!s.value)&&(o(),a())}));const o=()=>{const c=u.value,g=s.value;!c||!g||v.computePosition(c,g,{placement:l.placement||"bottom-start",middleware:[v.offset(l.offset||8),v.flip(),v.shift({padding:8})]}).then(({x:p,y:I})=>{r.value={position:"absolute",left:`${p}px`,top:`${I}px`}})};function a(){!u.value||!s.value||(d=v.autoUpdate(u.value,s.value,o))}function f(){d&&(d(),d=null)}const _=i.computed(()=>M({display:"flex",zIndex:t},r.value));return{floatingRef:s,style:_}}const K={name:"SuggestionMenuController",components:{SuggestionMenuWrapper:B},props:{triggerCharacter:{type:String,required:!0},minQueryLength:{type:Number},getItems:{type:Function,required:!0},onItemClick:{type:Function}},setup(n){const e=i.inject("editor"),t=i.ref(null),l=i.computed(()=>{var _;const f=((_=t.value)==null?void 0:_.show)&&(!n.minQueryLength||t.value.ignoreQueryLength||!t.value.query.startsWith(" ")&&t.value.query.length>=n.minQueryLength);return f!=null?f:!1}),{floatingRef:u,style:s}=z(()=>l.value,()=>{var f;return((f=t.value)==null?void 0:f.referencePos)||null},2e3,{placement:"bottom-start",middleware:[v.offset(10),v.flip({mainAxis:!0,crossAxis:!1}),v.shift(),v.size({apply({availableHeight:f,elements:_}){Object.assign(_.floating.style,{maxHeight:`${f-10}px`})}})],onDismiss(){}});let r=null;return i.onMounted(()=>{r=e.value.suggestionMenus.onUpdate(n.triggerCharacter,f=>{t.value=f})}),i.onBeforeUnmount(()=>{r&&r()}),{state:t,floatingRef:u,style:s,showDom:l,closeMenu:()=>{e.value.suggestionMenus.closeMenu()},clearQuery:()=>{e.value.suggestionMenus.clearQuery()},insertMention:f=>{e.value.suggestionMenus.insertMention(f)}}}};var X=function(){var e=this,t=e._self._c;return e.showDom?t("div",{ref:"floatingRef",style:e.style},[t("SuggestionMenuWrapper",{attrs:{query:e.state.query,getItems:e.getItems,onItemClick:e.onItemClick,closeMenu:e.closeMenu,clearQuery:e.clearQuery,insertMention:e.insertMention}})],1):e._e()},H=[],G=m(K,X,H,!1,null,"f5b73a66",null,null);const J=G.exports;exports.MEditorVue2=S;exports.SuggestionMenuController=J;exports.default=S;
|
package/dist/index.esm.js
CHANGED
|
@@ -13,54 +13,54 @@ var I = (n, e, t) => new Promise((o, u) => {
|
|
|
13
13
|
var s = (l) => {
|
|
14
14
|
try {
|
|
15
15
|
d(t.next(l));
|
|
16
|
-
} catch (
|
|
17
|
-
u(
|
|
16
|
+
} catch (i) {
|
|
17
|
+
u(i);
|
|
18
18
|
}
|
|
19
19
|
}, r = (l) => {
|
|
20
20
|
try {
|
|
21
21
|
d(t.throw(l));
|
|
22
|
-
} catch (
|
|
23
|
-
u(
|
|
22
|
+
} catch (i) {
|
|
23
|
+
u(i);
|
|
24
24
|
}
|
|
25
25
|
}, d = (l) => l.done ? o(l.value) : Promise.resolve(l.value).then(s, r);
|
|
26
26
|
d((t = t.apply(n, e)).next());
|
|
27
27
|
});
|
|
28
28
|
import Q from "@shenjipo/mention-editor";
|
|
29
|
-
import { ref as f, provide as U, onMounted as p, onBeforeUnmount as S, watch as
|
|
30
|
-
import { computePosition as A, offset as
|
|
29
|
+
import { ref as f, provide as U, onMounted as p, onBeforeUnmount as S, watch as v, inject as $, nextTick as D, computed as q } from "vue-demi";
|
|
30
|
+
import { computePosition as A, offset as b, flip as k, shift as R, autoUpdate as L, size as N } from "@floating-ui/dom";
|
|
31
31
|
function y(n, e, t, o, u, s, r, d) {
|
|
32
32
|
var l = typeof n == "function" ? n.options : n;
|
|
33
33
|
e && (l.render = e, l.staticRenderFns = t, l._compiled = !0), o && (l.functional = !0), s && (l._scopeId = "data-v-" + s);
|
|
34
|
-
var
|
|
35
|
-
if (r ? (
|
|
36
|
-
|
|
34
|
+
var i;
|
|
35
|
+
if (r ? (i = function(a) {
|
|
36
|
+
a = a || // cached call
|
|
37
37
|
this.$vnode && this.$vnode.ssrContext || // stateful
|
|
38
|
-
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !
|
|
39
|
-
}, l._ssrRegister =
|
|
38
|
+
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !a && typeof __VUE_SSR_CONTEXT__ != "undefined" && (a = __VUE_SSR_CONTEXT__), u && u.call(this, a), a && a._registeredComponents && a._registeredComponents.add(r);
|
|
39
|
+
}, l._ssrRegister = i) : u && (i = d ? function() {
|
|
40
40
|
u.call(
|
|
41
41
|
this,
|
|
42
42
|
(l.functional ? this.parent : this).$root.$options.shadowRoot
|
|
43
43
|
);
|
|
44
|
-
} : u),
|
|
44
|
+
} : u), i)
|
|
45
45
|
if (l.functional) {
|
|
46
|
-
l._injectStyles =
|
|
46
|
+
l._injectStyles = i;
|
|
47
47
|
var c = l.render;
|
|
48
|
-
l.render = function(
|
|
49
|
-
return
|
|
48
|
+
l.render = function(g, m) {
|
|
49
|
+
return i.call(m), c(g, m);
|
|
50
50
|
};
|
|
51
51
|
} else {
|
|
52
52
|
var _ = l.beforeCreate;
|
|
53
|
-
l.beforeCreate = _ ? [].concat(_,
|
|
53
|
+
l.beforeCreate = _ ? [].concat(_, i) : [i];
|
|
54
54
|
}
|
|
55
55
|
return {
|
|
56
56
|
exports: n,
|
|
57
57
|
options: l
|
|
58
58
|
};
|
|
59
59
|
}
|
|
60
|
-
const
|
|
60
|
+
const V = {
|
|
61
61
|
name: "MEditorVue2",
|
|
62
62
|
props: {
|
|
63
|
-
|
|
63
|
+
value: { type: String, default: "" },
|
|
64
64
|
options: {
|
|
65
65
|
type: Object,
|
|
66
66
|
default: () => ({
|
|
@@ -68,21 +68,22 @@ const N = {
|
|
|
68
68
|
})
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
|
-
emits: ["
|
|
71
|
+
emits: ["input", "fileReject", "imageInput", "deleteMention"],
|
|
72
72
|
setup(n, { emit: e, expose: t }) {
|
|
73
73
|
const o = f(null), u = f(null);
|
|
74
74
|
U("editor", o), p(() => {
|
|
75
75
|
u.value && (o.value = new Q({
|
|
76
76
|
element: u.value,
|
|
77
|
+
content: n.value,
|
|
77
78
|
placeholder: n.options.placeholder,
|
|
78
79
|
onChange: (r) => {
|
|
79
|
-
e("
|
|
80
|
+
e("input", r);
|
|
80
81
|
},
|
|
81
|
-
|
|
82
|
-
e("
|
|
82
|
+
onFileInput: (r) => {
|
|
83
|
+
e("fileInput", r);
|
|
83
84
|
},
|
|
84
|
-
|
|
85
|
-
e("
|
|
85
|
+
onMentionDelete(r) {
|
|
86
|
+
e("deleteMention", r);
|
|
86
87
|
}
|
|
87
88
|
}));
|
|
88
89
|
});
|
|
@@ -99,18 +100,18 @@ const N = {
|
|
|
99
100
|
var W = function() {
|
|
100
101
|
var e = this, t = e._self._c;
|
|
101
102
|
return t("div", { staticClass: "mention-editor-wrapper" }, [e._t("header"), t("div", { ref: "editorRef", staticClass: "mention-editor" }, [e.editor ? e._t("default") : e._e()], 2), e._t("footer")], 2);
|
|
102
|
-
}, T = [],
|
|
103
|
-
|
|
103
|
+
}, T = [], O = /* @__PURE__ */ y(
|
|
104
|
+
V,
|
|
104
105
|
W,
|
|
105
106
|
T,
|
|
106
107
|
!1,
|
|
107
108
|
null,
|
|
108
|
-
"
|
|
109
|
+
"66f3cc4e",
|
|
109
110
|
null,
|
|
110
111
|
null
|
|
111
112
|
);
|
|
112
|
-
const ce =
|
|
113
|
-
const
|
|
113
|
+
const ce = O.exports;
|
|
114
|
+
const P = {
|
|
114
115
|
name: "SuggestionMenu",
|
|
115
116
|
props: {
|
|
116
117
|
items: { type: Array, required: !0 },
|
|
@@ -123,7 +124,7 @@ const O = {
|
|
|
123
124
|
}
|
|
124
125
|
}
|
|
125
126
|
};
|
|
126
|
-
var
|
|
127
|
+
var j = function() {
|
|
127
128
|
var e = this, t = e._self._c;
|
|
128
129
|
return t("div", { staticClass: "bn-suggestion-menu" }, [e.items.length ? e._l(e.items, function(o, u) {
|
|
129
130
|
return t("div", { key: o.id, staticClass: "suggestion-menu-item", class: { active: u === e.selectedIndex }, on: { mousedown: function(s) {
|
|
@@ -131,8 +132,8 @@ var P = function() {
|
|
|
131
132
|
} } }, [e._v(" " + e._s(o.label) + " ")]);
|
|
132
133
|
}) : t("div", { staticClass: "suggestion-menu-item disabled" }, [e._v("无数据")])], 2);
|
|
133
134
|
}, z = [], B = /* @__PURE__ */ y(
|
|
134
|
-
O,
|
|
135
135
|
P,
|
|
136
|
+
j,
|
|
136
137
|
z,
|
|
137
138
|
!1,
|
|
138
139
|
null,
|
|
@@ -147,7 +148,7 @@ function X(n, e, t, o) {
|
|
|
147
148
|
n && n.domElement && n.domElement.addEventListener("keydown", s, !0);
|
|
148
149
|
}), S(() => {
|
|
149
150
|
n && n.domElement && n.domElement.removeEventListener("keydown", s, !0);
|
|
150
|
-
}),
|
|
151
|
+
}), v(
|
|
151
152
|
() => e,
|
|
152
153
|
() => {
|
|
153
154
|
u.value = 0;
|
|
@@ -156,7 +157,7 @@ function X(n, e, t, o) {
|
|
|
156
157
|
}
|
|
157
158
|
function H(n, e, t, o = 8) {
|
|
158
159
|
const u = f(0);
|
|
159
|
-
return
|
|
160
|
+
return v(
|
|
160
161
|
[n, e],
|
|
161
162
|
([s, r]) => {
|
|
162
163
|
r != null && (s && s.length > 0 ? u.value = r.length : r.length - u.value > o && t());
|
|
@@ -190,11 +191,11 @@ const G = {
|
|
|
190
191
|
H(e, o, n.closeMenu);
|
|
191
192
|
const d = () => {
|
|
192
193
|
const l = n.query;
|
|
193
|
-
o.value = n.query, t.value = "loading", n.getItems(n.query).then((
|
|
194
|
-
o.value === l && (e.value =
|
|
194
|
+
o.value = n.query, t.value = "loading", n.getItems(n.query).then((i) => {
|
|
195
|
+
o.value === l && (e.value = i, t.value = "loaded");
|
|
195
196
|
});
|
|
196
197
|
};
|
|
197
|
-
return p(d),
|
|
198
|
+
return p(d), v(
|
|
198
199
|
() => n.query,
|
|
199
200
|
() => {
|
|
200
201
|
d();
|
|
@@ -224,32 +225,32 @@ const ee = Z.exports;
|
|
|
224
225
|
function te(n, e, t, o = {}) {
|
|
225
226
|
const u = f(null), s = f(null), r = f({});
|
|
226
227
|
let d = null;
|
|
227
|
-
|
|
228
|
+
v(
|
|
228
229
|
e,
|
|
229
|
-
(
|
|
230
|
-
|
|
231
|
-
getBoundingClientRect: () =>
|
|
230
|
+
(a) => {
|
|
231
|
+
a && (u.value = {
|
|
232
|
+
getBoundingClientRect: () => a
|
|
232
233
|
}, l());
|
|
233
234
|
},
|
|
234
235
|
{ immediate: !0 }
|
|
235
|
-
),
|
|
236
|
+
), v(
|
|
236
237
|
n,
|
|
237
|
-
(
|
|
238
|
-
if (!
|
|
238
|
+
(a) => I(this, null, function* () {
|
|
239
|
+
if (!a) {
|
|
239
240
|
c();
|
|
240
241
|
return;
|
|
241
242
|
}
|
|
242
|
-
yield
|
|
243
|
+
yield D(), !(!u.value || !s.value) && (l(), i());
|
|
243
244
|
})
|
|
244
245
|
);
|
|
245
246
|
const l = () => {
|
|
246
|
-
const
|
|
247
|
-
!
|
|
247
|
+
const a = u.value, g = s.value;
|
|
248
|
+
!a || !g || A(a, g, {
|
|
248
249
|
placement: o.placement || "bottom-start",
|
|
249
250
|
middleware: [
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
251
|
+
b(o.offset || 8),
|
|
252
|
+
k(),
|
|
253
|
+
R({ padding: 8 })
|
|
253
254
|
]
|
|
254
255
|
}).then(({ x: m, y: x }) => {
|
|
255
256
|
r.value = {
|
|
@@ -259,13 +260,13 @@ function te(n, e, t, o = {}) {
|
|
|
259
260
|
};
|
|
260
261
|
});
|
|
261
262
|
};
|
|
262
|
-
function
|
|
263
|
-
!u.value || !s.value || (d =
|
|
263
|
+
function i() {
|
|
264
|
+
!u.value || !s.value || (d = L(u.value, s.value, l));
|
|
264
265
|
}
|
|
265
266
|
function c() {
|
|
266
267
|
d && (d(), d = null);
|
|
267
268
|
}
|
|
268
|
-
const _ =
|
|
269
|
+
const _ = q(() => C({
|
|
269
270
|
display: "flex",
|
|
270
271
|
zIndex: t
|
|
271
272
|
}, r.value));
|
|
@@ -286,7 +287,7 @@ const ne = {
|
|
|
286
287
|
onItemClick: { type: Function }
|
|
287
288
|
},
|
|
288
289
|
setup(n) {
|
|
289
|
-
const e = $("editor"), t = f(null), o =
|
|
290
|
+
const e = $("editor"), t = f(null), o = q(() => {
|
|
290
291
|
var _;
|
|
291
292
|
const c = ((_ = t.value) == null ? void 0 : _.show) && (!n.minQueryLength || t.value.ignoreQueryLength || !t.value.query.startsWith(" ") && t.value.query.length >= n.minQueryLength);
|
|
292
293
|
return c != null ? c : !1;
|
|
@@ -300,10 +301,10 @@ const ne = {
|
|
|
300
301
|
{
|
|
301
302
|
placement: "bottom-start",
|
|
302
303
|
middleware: [
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
304
|
+
b(10),
|
|
305
|
+
k({ mainAxis: !0, crossAxis: !1 }),
|
|
306
|
+
R(),
|
|
307
|
+
N({
|
|
307
308
|
apply({ availableHeight: c, elements: _ }) {
|
|
308
309
|
Object.assign(_.floating.style, {
|
|
309
310
|
maxHeight: `${c - 10}px`
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shenjipo/mention-vue2",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.6.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"@floating-ui/dom": "^1.1.9",
|
|
28
28
|
"vue": "^2.7.7",
|
|
29
29
|
"vue-demi": "^0.14.10",
|
|
30
|
-
"@shenjipo/mention-editor": "2.
|
|
30
|
+
"@shenjipo/mention-editor": "2.6.0"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@types/node": "^16.11.45",
|