@eturnity/eturnity_reusable_components 8.26.11--EPDM-16005.1 → 8.26.11-EPDM-15023.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/main.es12.js +2 -2
- package/dist/main.es13.js +3 -3
- package/dist/main.es14.js +2 -2
- package/dist/main.es15.js +227 -21
- package/dist/main.es16.js +19 -1051
- package/dist/main.es17.js +1044 -215
- package/dist/main.es18.js +197 -69
- package/dist/main.es19.js +99 -2
- package/dist/main.es20.js +2 -541
- package/dist/main.es21.js +530 -188
- package/dist/main.es22.js +150 -15
- package/dist/main.es23.js +60 -212
- package/dist/main.es24.js +2 -2
- package/dist/main.es5.js +3 -3
- package/dist/main.es6.js +4 -4
- package/dist/main.es9.js +1 -1
- package/package.json +1 -1
- package/src/components/barchart/BottomFields.vue +32 -2
- package/src/components/barchart/index.vue +5 -0
- package/src/components/buttons/mainButton/index.vue +18 -1
- package/src/components/infoText/index.vue +4 -1
- package/src/components/inputs/inputNumber/index.vue +45 -4
- package/src/components/tableDropdown/index.vue +1 -21
package/dist/main.es21.js
CHANGED
@@ -1,201 +1,543 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
}
|
9
|
-
const
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
const NO = () => false;
|
14
|
-
const onRE = /^on[^a-z]/;
|
15
|
-
const isOn = (key) => onRE.test(key);
|
16
|
-
const isModelListener = (key) => key.startsWith("onUpdate:");
|
17
|
-
const extend = Object.assign;
|
18
|
-
const remove = (arr, el) => {
|
19
|
-
const i = arr.indexOf(el);
|
20
|
-
if (i > -1) {
|
21
|
-
arr.splice(i, 1);
|
22
|
-
}
|
23
|
-
};
|
24
|
-
const hasOwnProperty = Object.prototype.hasOwnProperty;
|
25
|
-
const hasOwn = (val, key) => hasOwnProperty.call(val, key);
|
26
|
-
const isArray = Array.isArray;
|
27
|
-
const isMap = (val) => toTypeString(val) === "[object Map]";
|
28
|
-
const isSet = (val) => toTypeString(val) === "[object Set]";
|
29
|
-
const isFunction = (val) => typeof val === "function";
|
30
|
-
const isString = (val) => typeof val === "string";
|
31
|
-
const isObject = (val) => val !== null && typeof val === "object";
|
32
|
-
const isPromise = (val) => {
|
33
|
-
return isObject(val) && isFunction(val.then) && isFunction(val.catch);
|
34
|
-
};
|
35
|
-
const objectToString = Object.prototype.toString;
|
36
|
-
const toTypeString = (value) => objectToString.call(value);
|
37
|
-
const toRawType = (value) => {
|
38
|
-
return toTypeString(value).slice(8, -1);
|
39
|
-
};
|
40
|
-
const isPlainObject = (val) => toTypeString(val) === "[object Object]";
|
41
|
-
const isReservedProp = /* @__PURE__ */ makeMap(
|
42
|
-
// the leading comma is intentional so empty string "" is also included
|
43
|
-
",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"
|
44
|
-
);
|
45
|
-
const isBuiltInDirective = /* @__PURE__ */ makeMap(
|
46
|
-
"bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo"
|
47
|
-
);
|
48
|
-
const cacheStringFunction = (fn) => {
|
49
|
-
const cache = /* @__PURE__ */ Object.create(null);
|
50
|
-
return (str) => {
|
51
|
-
const hit = cache[str];
|
52
|
-
return hit || (cache[str] = fn(str));
|
53
|
-
};
|
54
|
-
};
|
55
|
-
const camelizeRE = /-(\w)/g;
|
56
|
-
const camelize = cacheStringFunction((str) => {
|
57
|
-
return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
|
58
|
-
});
|
59
|
-
const hyphenateRE = /\B([A-Z])/g;
|
60
|
-
const hyphenate = cacheStringFunction(
|
61
|
-
(str) => str.replace(hyphenateRE, "-$1").toLowerCase()
|
62
|
-
);
|
63
|
-
const capitalize = cacheStringFunction(
|
64
|
-
(str) => str.charAt(0).toUpperCase() + str.slice(1)
|
65
|
-
);
|
66
|
-
const toHandlerKey = cacheStringFunction(
|
67
|
-
(str) => str ? `on${capitalize(str)}` : ``
|
68
|
-
);
|
69
|
-
const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
|
70
|
-
const invokeArrayFns = (fns, arg) => {
|
71
|
-
for (let i = 0; i < fns.length; i++) {
|
72
|
-
fns[i](arg);
|
73
|
-
}
|
74
|
-
};
|
75
|
-
const def = (obj, key, value) => {
|
76
|
-
Object.defineProperty(obj, key, {
|
77
|
-
configurable: true,
|
78
|
-
enumerable: false,
|
79
|
-
value
|
80
|
-
});
|
81
|
-
};
|
82
|
-
const looseToNumber = (val) => {
|
83
|
-
const n = parseFloat(val);
|
84
|
-
return isNaN(n) ? val : n;
|
1
|
+
import "./main.es3.js";
|
2
|
+
import _sfc_main$1 from "./main.es24.js";
|
3
|
+
import styled from "./main.es7.js";
|
4
|
+
import theme from "./main.es8.js";
|
5
|
+
import _export_sfc from "./main.es11.js";
|
6
|
+
import { computed, onMounted, onUnmounted, watch, nextTick, resolveComponent, openBlock, createBlock, withCtx, createElementVNode as createBaseVNode, createVNode, createElementBlock, createTextVNode, createCommentVNode, Fragment, renderSlot, Teleport } from "./main.es6.js";
|
7
|
+
import { toDisplayString, normalizeStyle } from "./main.es22.js";
|
8
|
+
import { ref } from "./main.es17.js";
|
9
|
+
const TextOverlayAttrs = {
|
10
|
+
appTheme: String,
|
11
|
+
image: Boolean,
|
12
|
+
width: Number
|
85
13
|
};
|
86
|
-
|
87
|
-
|
88
|
-
|
14
|
+
const TextOverlay = styled("div", TextOverlayAttrs)`
|
15
|
+
color: ${(props) => props.image ? props.theme.colors.grey1 : props.theme.colors.black};
|
16
|
+
font-size: ${(props) => props.image ? "12px" : "13px"};
|
17
|
+
border-radius: 4px;
|
18
|
+
padding: 10px;
|
19
|
+
word-wrap: break-word;
|
20
|
+
overflow-wrap: break-word;
|
21
|
+
white-space: normal;
|
22
|
+
width: ${(props) => props.width ? `${props.width}px` : "100%"};
|
23
|
+
box-shadow: ${(props) => props.image ? "0 2px 10px rgba(0, 0, 0, 0.1)" : "none"};
|
24
|
+
|
25
|
+
a {
|
26
|
+
color: ${(props) => props.theme.colors.blue};
|
27
|
+
}
|
28
|
+
|
29
|
+
img + span {
|
30
|
+
margin-top: 10px;
|
31
|
+
display: block;
|
32
|
+
}
|
33
|
+
`;
|
34
|
+
const PageContainer = styled("div")`
|
35
|
+
display: ${(props) => props.type === "dot" ? "unset" : "inline-block"};
|
36
|
+
position: relative;
|
37
|
+
`;
|
38
|
+
const TextWrapper = styled("div")`
|
39
|
+
z-index: 9999999999;
|
40
|
+
position: absolute;
|
41
|
+
`;
|
42
|
+
const OverlayImage = styled("img")`
|
43
|
+
width: 100%;
|
44
|
+
height: auto;
|
45
|
+
`;
|
46
|
+
const Dot = styled("div")`
|
47
|
+
width: 5px;
|
48
|
+
height: 5px;
|
49
|
+
background-color: ${(props) => props.color};
|
50
|
+
border-radius: 50%;
|
51
|
+
`;
|
52
|
+
const IconWrapperAttrs = {
|
53
|
+
backgroundColor: String,
|
54
|
+
borderRadius: String,
|
55
|
+
padding: String,
|
56
|
+
hoveredIcon: Boolean,
|
57
|
+
isActive: Boolean,
|
58
|
+
isDisabled: Boolean
|
89
59
|
};
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
60
|
+
const IconWrapper = styled("div", IconWrapperAttrs)`
|
61
|
+
display: flex;
|
62
|
+
align-items: center;
|
63
|
+
justify-content: center;
|
64
|
+
gap: 6px;
|
65
|
+
white-space: nowrap;
|
66
|
+
background-color: ${(props) => props.backgroundColor};
|
67
|
+
border-radius: ${(props) => props.hoveredIcon ? "6px" : props.borderRadius};
|
68
|
+
padding: ${(props) => props.padding};
|
69
|
+
width: ${(props) => props.hoveredIcon ? "32px" : ""};
|
70
|
+
height: ${(props) => props.hoveredIcon ? "32px" : ""};
|
71
|
+
cursor: pointer;
|
72
|
+
background-color: ${(props) => props.isActive ? props.theme.colors.transparentWhite2 : ""};
|
73
|
+
cursor: ${(props) => props.isDisabled ? "not-allowed" : "pointer"};
|
74
|
+
&:hover {
|
75
|
+
background-color: ${(props) => props.hoveredIcon ? props.theme.colors.transparentWhite2 : ""};
|
101
76
|
}
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
}
|
109
|
-
|
110
|
-
|
111
|
-
const
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
77
|
+
`;
|
78
|
+
const LabelWrapperAttrs = {
|
79
|
+
size: String,
|
80
|
+
color: String
|
81
|
+
};
|
82
|
+
const LabelWrapper = styled("div", LabelWrapperAttrs)`
|
83
|
+
font-size: ${(props) => props.size};
|
84
|
+
color: ${(props) => props.color};
|
85
|
+
`;
|
86
|
+
const _sfc_main = {
|
87
|
+
name: "InfoText",
|
88
|
+
components: {
|
89
|
+
IconComponent: _sfc_main$1,
|
90
|
+
TextOverlay,
|
91
|
+
// Arrow,
|
92
|
+
Dot,
|
93
|
+
PageContainer,
|
94
|
+
TextWrapper,
|
95
|
+
OverlayImage,
|
96
|
+
IconWrapper,
|
97
|
+
LabelWrapper
|
98
|
+
},
|
99
|
+
props: {
|
100
|
+
text: {
|
101
|
+
required: false,
|
102
|
+
default: "",
|
103
|
+
type: String
|
104
|
+
},
|
105
|
+
isActive: {
|
106
|
+
required: false,
|
107
|
+
default: false,
|
108
|
+
type: Boolean
|
109
|
+
},
|
110
|
+
labelText: {
|
111
|
+
required: false,
|
112
|
+
default: "",
|
113
|
+
type: String
|
114
|
+
},
|
115
|
+
size: {
|
116
|
+
type: String,
|
117
|
+
default: "14px"
|
118
|
+
},
|
119
|
+
infoPosition: {
|
120
|
+
required: false,
|
121
|
+
default: null,
|
122
|
+
type: String
|
123
|
+
},
|
124
|
+
maxWidth: {
|
125
|
+
default: "400px",
|
126
|
+
type: String
|
127
|
+
},
|
128
|
+
openTrigger: {
|
129
|
+
type: String,
|
130
|
+
default: "onHover",
|
131
|
+
validator: (value) => ["onHover", "onClick"].includes(value)
|
132
|
+
},
|
133
|
+
buttonType: {
|
134
|
+
type: String,
|
135
|
+
default: "regular",
|
136
|
+
validator: (value) => ["regular", "error"].includes(value)
|
137
|
+
},
|
138
|
+
image: {
|
139
|
+
type: String,
|
140
|
+
default: ""
|
141
|
+
},
|
142
|
+
iconName: {
|
143
|
+
type: String,
|
144
|
+
default: "info"
|
145
|
+
},
|
146
|
+
iconColor: {
|
147
|
+
type: String,
|
148
|
+
default: null,
|
149
|
+
required: false
|
150
|
+
},
|
151
|
+
isDisabled: {
|
152
|
+
type: Boolean,
|
153
|
+
default: false,
|
154
|
+
required: false
|
155
|
+
},
|
156
|
+
dotColor: {
|
157
|
+
type: String,
|
158
|
+
required: false,
|
159
|
+
default: theme.semanticColors.blue[400]
|
160
|
+
},
|
161
|
+
type: {
|
162
|
+
type: String,
|
163
|
+
required: false,
|
164
|
+
default: "info"
|
165
|
+
// info, dot
|
166
|
+
},
|
167
|
+
appTheme: {
|
168
|
+
type: String,
|
169
|
+
default: "light",
|
170
|
+
// light or dark
|
171
|
+
required: false
|
172
|
+
},
|
173
|
+
labelAlign: {
|
174
|
+
type: String,
|
175
|
+
default: "right",
|
176
|
+
required: false
|
177
|
+
},
|
178
|
+
backgroundColor: {
|
179
|
+
type: String,
|
180
|
+
default: "",
|
181
|
+
required: false
|
182
|
+
},
|
183
|
+
contentBackgroundColor: {
|
184
|
+
type: String,
|
185
|
+
default: "",
|
186
|
+
required: false
|
187
|
+
},
|
188
|
+
borderRadius: {
|
189
|
+
type: String,
|
190
|
+
default: "",
|
191
|
+
required: false
|
192
|
+
},
|
193
|
+
padding: {
|
194
|
+
type: String,
|
195
|
+
default: "",
|
196
|
+
required: false
|
197
|
+
},
|
198
|
+
labelSize: {
|
199
|
+
type: String,
|
200
|
+
default: "12px",
|
201
|
+
required: false
|
202
|
+
},
|
203
|
+
noIcon: {
|
204
|
+
type: Boolean,
|
205
|
+
default: false,
|
206
|
+
required: false
|
207
|
+
},
|
208
|
+
hoveredIcon: {
|
209
|
+
type: Boolean,
|
210
|
+
default: false,
|
211
|
+
required: false
|
212
|
+
},
|
213
|
+
hideInfoText: {
|
214
|
+
type: Boolean,
|
215
|
+
default: false,
|
216
|
+
required: false
|
118
217
|
}
|
119
|
-
}
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
218
|
+
},
|
219
|
+
setup(props) {
|
220
|
+
const isVisible = ref(false);
|
221
|
+
const container = ref(null);
|
222
|
+
const icon = ref(null);
|
223
|
+
const infoBox = ref(null);
|
224
|
+
const textContent = ref(null);
|
225
|
+
const infoImage = ref(null);
|
226
|
+
const infoBoxWidth = ref(0);
|
227
|
+
const infoBoxHeight = ref(0);
|
228
|
+
const boxStyle = ref({});
|
229
|
+
const arrowStyle = ref({});
|
230
|
+
const wrapperStyle = ref({});
|
231
|
+
const isMobile = ref(window.innerWidth <= 768);
|
232
|
+
const textStyle = computed(() => ({
|
233
|
+
fontSize: props.image ? "12px" : "13px",
|
234
|
+
color: props.image ? theme.colors.grey1 : props.appTheme === "dark" ? theme.colors.black : theme.colors.white,
|
235
|
+
textAlign: props.image ? "right" : "left"
|
236
|
+
}));
|
237
|
+
const calculatePosition = (width) => {
|
238
|
+
if (!icon.value || !width)
|
239
|
+
return {};
|
240
|
+
const iconRect = icon.value.getBoundingClientRect();
|
241
|
+
const windowHeight = window.innerHeight;
|
242
|
+
const windowWidth = window.innerWidth;
|
243
|
+
const spaceBelow = windowHeight - iconRect.bottom - 10;
|
244
|
+
const spaceAbove = iconRect.top - 10;
|
245
|
+
const spaceRight = windowWidth - iconRect.right - 10;
|
246
|
+
const spaceLeft = iconRect.left - 10;
|
247
|
+
const positions = [{
|
248
|
+
position: "bottom",
|
249
|
+
space: spaceBelow
|
250
|
+
}, {
|
251
|
+
position: "top",
|
252
|
+
space: spaceAbove
|
253
|
+
}, {
|
254
|
+
position: "right",
|
255
|
+
space: spaceRight
|
256
|
+
}, {
|
257
|
+
position: "left",
|
258
|
+
space: spaceLeft
|
259
|
+
}].sort((a, b) => b.space - a.space);
|
260
|
+
const bestPosition = props.infoPosition ? props.infoPosition : positions[0].position;
|
261
|
+
let top, left, arrowPosition;
|
262
|
+
switch (bestPosition) {
|
263
|
+
case "bottom":
|
264
|
+
top = Math.round(iconRect.bottom + 10);
|
265
|
+
left = Math.round(Math.min(iconRect.left, windowWidth - width - 10));
|
266
|
+
arrowPosition = {
|
267
|
+
left: `${Math.round(Math.min(Math.max(iconRect.left - left + iconRect.width / 2 - 8, 2), width - 18))}px`,
|
268
|
+
top: "-7px",
|
269
|
+
bottom: "auto",
|
270
|
+
transform: "rotate(180deg)"
|
271
|
+
};
|
272
|
+
break;
|
273
|
+
case "top":
|
274
|
+
top = Math.round(iconRect.top - infoBoxHeight.value - 10);
|
275
|
+
left = Math.round(Math.min(iconRect.left, windowWidth - width - 10));
|
276
|
+
arrowPosition = {
|
277
|
+
left: `${Math.round(Math.min(Math.max(iconRect.left - left + iconRect.width / 2 - 8, 2), width - 18))}px`,
|
278
|
+
top: "auto",
|
279
|
+
bottom: "-7px",
|
280
|
+
transform: "none"
|
281
|
+
};
|
282
|
+
break;
|
283
|
+
case "right":
|
284
|
+
top = Math.round(Math.max(Math.min(iconRect.top - (infoBoxHeight.value - iconRect.height) / 2, windowHeight - infoBoxHeight.value - 10), 10));
|
285
|
+
left = Math.round(iconRect.right + 10);
|
286
|
+
arrowPosition = {
|
287
|
+
left: "-7px",
|
288
|
+
top: `${Math.round(Math.min(Math.max(iconRect.top - top + iconRect.height / 2 - 8, 2), infoBoxHeight.value - 18))}px`,
|
289
|
+
bottom: "auto",
|
290
|
+
transform: "rotate(90deg)"
|
291
|
+
};
|
292
|
+
break;
|
293
|
+
case "left":
|
294
|
+
top = Math.round(Math.max(Math.min(iconRect.top - (infoBoxHeight.value - iconRect.height) / 2, windowHeight - infoBoxHeight.value - 10), 10));
|
295
|
+
left = Math.round(iconRect.left - width - 10);
|
296
|
+
arrowPosition = {
|
297
|
+
left: "auto",
|
298
|
+
right: "-7px",
|
299
|
+
top: `${Math.round(Math.min(Math.max(iconRect.top - top + iconRect.height / 2 - 8, 2), infoBoxHeight.value - 18))}px`,
|
300
|
+
bottom: "auto",
|
301
|
+
transform: "rotate(-90deg)"
|
302
|
+
};
|
303
|
+
break;
|
131
304
|
}
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
305
|
+
arrowStyle.value = arrowPosition;
|
306
|
+
wrapperStyle.value = {
|
307
|
+
position: "fixed",
|
308
|
+
top: `${top}px`,
|
309
|
+
left: `${left}px`,
|
310
|
+
transform: "none",
|
311
|
+
width: `${width}px`
|
312
|
+
};
|
313
|
+
return {
|
314
|
+
width: "100%",
|
315
|
+
maxWidth: props.maxWidth,
|
316
|
+
overflowY: "auto",
|
317
|
+
backgroundColor: props.contentBackgroundColor ? props.contentBackgroundColor : props.image ? theme.colors.white : props.appTheme === "light" ? theme.colors.black : theme.colors.grey5
|
318
|
+
};
|
319
|
+
};
|
320
|
+
const showInfo = async () => {
|
321
|
+
isVisible.value = !props.hideInfoText;
|
322
|
+
await nextTick();
|
323
|
+
await nextTick();
|
324
|
+
await updatePosition();
|
325
|
+
};
|
326
|
+
const hideInfo = () => {
|
327
|
+
isVisible.value = false;
|
328
|
+
infoBoxWidth.value = 0;
|
329
|
+
};
|
330
|
+
const toggleInfo = () => {
|
331
|
+
isVisible.value ? hideInfo() : showInfo();
|
332
|
+
};
|
333
|
+
const handleScroll = () => {
|
334
|
+
if (isVisible.value) {
|
335
|
+
hideInfo();
|
336
|
+
}
|
337
|
+
updatePosition();
|
338
|
+
};
|
339
|
+
const isIconInView = () => {
|
340
|
+
if (!icon.value)
|
341
|
+
return false;
|
342
|
+
const rect = icon.value.getBoundingClientRect();
|
343
|
+
return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
|
344
|
+
};
|
345
|
+
const updatePosition = async () => {
|
346
|
+
if (!infoBox.value || !textContent.value)
|
347
|
+
return;
|
348
|
+
if (infoBox.value.$el) {
|
349
|
+
infoBox.value.$el.style.visibility = "hidden";
|
350
|
+
infoBox.value.$el.style.display = "block";
|
351
|
+
}
|
352
|
+
await nextTick();
|
353
|
+
if (!isIconInView()) {
|
354
|
+
if (isVisible.value)
|
355
|
+
hideInfo();
|
356
|
+
return;
|
357
|
+
}
|
358
|
+
const clone = textContent.value.cloneNode(true);
|
359
|
+
clone.style.position = "absolute";
|
360
|
+
clone.style.visibility = "hidden";
|
361
|
+
clone.style.width = "auto";
|
362
|
+
clone.style.maxWidth = "none";
|
363
|
+
clone.style.whiteSpace = "nowrap";
|
364
|
+
document.body.appendChild(clone);
|
365
|
+
const contentWidth = clone.offsetWidth;
|
366
|
+
document.body.removeChild(clone);
|
367
|
+
const calculatedWidth = Math.min(Math.max(contentWidth, 230), parseInt(props.maxWidth, 10));
|
368
|
+
infoBoxWidth.value = calculatedWidth;
|
369
|
+
await nextTick();
|
370
|
+
infoBoxHeight.value = infoBox.value.$el.offsetHeight;
|
371
|
+
boxStyle.value = calculatePosition(calculatedWidth);
|
372
|
+
if (isVisible.value && infoBox.value.$el) {
|
373
|
+
infoBox.value.$el.style.visibility = "visible";
|
374
|
+
}
|
375
|
+
};
|
376
|
+
const onImageLoad = () => {
|
377
|
+
if (infoImage.value) {
|
378
|
+
infoBoxHeight.value = infoBox.value.$el.offsetHeight;
|
379
|
+
updatePosition();
|
380
|
+
}
|
381
|
+
};
|
382
|
+
const handleClickOutside = (event) => {
|
383
|
+
if ((props.openTrigger === "onClick" || isMobile.value) && isVisible.value) {
|
384
|
+
const clickedElement = event.target;
|
385
|
+
if (infoBox.value && !infoBox.value.$el.contains(clickedElement) && !icon.value.contains(clickedElement)) {
|
386
|
+
hideInfo();
|
387
|
+
}
|
137
388
|
}
|
138
|
-
}
|
139
|
-
}
|
140
|
-
return res.trim();
|
141
|
-
}
|
142
|
-
const toDisplayString = (val) => {
|
143
|
-
return isString(val) ? val : val == null ? "" : isArray(val) || isObject(val) && (val.toString === objectToString || !isFunction(val.toString)) ? JSON.stringify(val, replacer, 2) : String(val);
|
144
|
-
};
|
145
|
-
const replacer = (_key, val) => {
|
146
|
-
if (val && val.__v_isRef) {
|
147
|
-
return replacer(_key, val.value);
|
148
|
-
} else if (isMap(val)) {
|
149
|
-
return {
|
150
|
-
[`Map(${val.size})`]: [...val.entries()].reduce((entries, [key, val2]) => {
|
151
|
-
entries[`${key} =>`] = val2;
|
152
|
-
return entries;
|
153
|
-
}, {})
|
154
389
|
};
|
155
|
-
|
390
|
+
const handleResize = () => {
|
391
|
+
isMobile.value = window.innerWidth <= 768;
|
392
|
+
updatePosition();
|
393
|
+
};
|
394
|
+
onMounted(() => {
|
395
|
+
window.addEventListener("scroll", handleScroll, {
|
396
|
+
passive: true
|
397
|
+
});
|
398
|
+
window.addEventListener("resize", handleResize);
|
399
|
+
document.addEventListener("scroll", handleScroll, {
|
400
|
+
passive: true,
|
401
|
+
capture: true
|
402
|
+
});
|
403
|
+
document.addEventListener("click", handleClickOutside);
|
404
|
+
});
|
405
|
+
onUnmounted(() => {
|
406
|
+
window.removeEventListener("scroll", handleScroll);
|
407
|
+
window.removeEventListener("resize", handleResize);
|
408
|
+
document.removeEventListener("scroll", handleScroll, {
|
409
|
+
capture: true
|
410
|
+
});
|
411
|
+
document.removeEventListener("click", handleClickOutside);
|
412
|
+
});
|
413
|
+
watch(isVisible, (newValue) => {
|
414
|
+
if (newValue) {
|
415
|
+
updatePosition();
|
416
|
+
}
|
417
|
+
});
|
156
418
|
return {
|
157
|
-
|
419
|
+
isVisible,
|
420
|
+
boxStyle,
|
421
|
+
arrowStyle,
|
422
|
+
showInfo,
|
423
|
+
hideInfo,
|
424
|
+
toggleInfo,
|
425
|
+
container,
|
426
|
+
icon,
|
427
|
+
infoBox,
|
428
|
+
textContent,
|
429
|
+
infoImage,
|
430
|
+
infoBoxWidth,
|
431
|
+
infoBoxHeight,
|
432
|
+
wrapperStyle,
|
433
|
+
textStyle,
|
434
|
+
onImageLoad,
|
435
|
+
isMobile
|
158
436
|
};
|
159
|
-
}
|
160
|
-
|
437
|
+
},
|
438
|
+
computed: {
|
439
|
+
computedIconColor() {
|
440
|
+
return this.buttonType === "error" ? theme.colors.red : theme.colors.mediumGray;
|
441
|
+
}
|
161
442
|
}
|
162
|
-
return val;
|
163
443
|
};
|
444
|
+
const _hoisted_1 = {
|
445
|
+
ref: "icon",
|
446
|
+
"data-test-id": "infoText_trigger"
|
447
|
+
};
|
448
|
+
const _hoisted_2 = ["innerHTML"];
|
449
|
+
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
450
|
+
const _component_LabelWrapper = resolveComponent("LabelWrapper");
|
451
|
+
const _component_Dot = resolveComponent("Dot");
|
452
|
+
const _component_IconComponent = resolveComponent("IconComponent");
|
453
|
+
const _component_IconWrapper = resolveComponent("IconWrapper");
|
454
|
+
const _component_OverlayImage = resolveComponent("OverlayImage");
|
455
|
+
const _component_TextOverlay = resolveComponent("TextOverlay");
|
456
|
+
const _component_TextWrapper = resolveComponent("TextWrapper");
|
457
|
+
const _component_PageContainer = resolveComponent("PageContainer");
|
458
|
+
return openBlock(), createBlock(_component_PageContainer, {
|
459
|
+
ref: "container",
|
460
|
+
"data-test-id": "infoText_container",
|
461
|
+
type: $props.type,
|
462
|
+
onClick: _cache[0] || (_cache[0] = ($event) => {
|
463
|
+
($setup.isMobile || $props.openTrigger === "onClick") && $setup.toggleInfo();
|
464
|
+
}),
|
465
|
+
onMouseenter: _cache[1] || (_cache[1] = ($event) => !$setup.isMobile && $props.openTrigger === "onHover" && $setup.showInfo()),
|
466
|
+
onMouseleave: _cache[2] || (_cache[2] = ($event) => !$setup.isMobile && $props.openTrigger === "onHover" && $setup.hideInfo())
|
467
|
+
}, {
|
468
|
+
default: withCtx(() => [createBaseVNode("div", _hoisted_1, [createVNode(_component_IconWrapper, {
|
469
|
+
"background-color": $props.backgroundColor,
|
470
|
+
"border-radius": $props.borderRadius,
|
471
|
+
"hovered-icon": $props.hoveredIcon,
|
472
|
+
"is-active": $props.isActive,
|
473
|
+
"is-disabled": $props.isDisabled,
|
474
|
+
padding: $props.padding
|
475
|
+
}, {
|
476
|
+
default: withCtx(() => [!_ctx.$slots.trigger ? (openBlock(), createElementBlock(Fragment, {
|
477
|
+
key: 0
|
478
|
+
}, [$props.labelText && $props.labelAlign === "left" ? (openBlock(), createBlock(_component_LabelWrapper, {
|
479
|
+
key: 0,
|
480
|
+
color: $props.iconColor || $options.computedIconColor,
|
481
|
+
size: $props.labelSize
|
482
|
+
}, {
|
483
|
+
default: withCtx(() => [createTextVNode(toDisplayString($props.labelText), 1)]),
|
484
|
+
_: 1
|
485
|
+
}, 8, ["color", "size"])) : createCommentVNode("", true), createTextVNode(), $props.type === "dot" ? (openBlock(), createBlock(_component_Dot, {
|
486
|
+
key: 1,
|
487
|
+
color: $props.dotColor,
|
488
|
+
"data-test-id": "infoText_dot"
|
489
|
+
}, null, 8, ["color"])) : !$props.noIcon ? (openBlock(), createBlock(_component_IconComponent, {
|
490
|
+
key: 2,
|
491
|
+
color: $props.iconColor || $options.computedIconColor,
|
492
|
+
cursor: $props.isDisabled ? "not-allowed" : "pointer",
|
493
|
+
disabled: $props.isDisabled,
|
494
|
+
"hovered-color": $props.iconColor || $options.computedIconColor,
|
495
|
+
name: $props.iconName,
|
496
|
+
size: $props.size
|
497
|
+
}, null, 8, ["color", "cursor", "disabled", "hovered-color", "name", "size"])) : createCommentVNode("", true), createTextVNode(), $props.labelText && $props.labelAlign === "right" ? (openBlock(), createBlock(_component_LabelWrapper, {
|
498
|
+
key: 3,
|
499
|
+
color: $props.iconColor || $options.computedIconColor,
|
500
|
+
size: $props.labelSize
|
501
|
+
}, {
|
502
|
+
default: withCtx(() => [createTextVNode(toDisplayString($props.labelText), 1)]),
|
503
|
+
_: 1
|
504
|
+
}, 8, ["color", "size"])) : createCommentVNode("", true)], 64)) : createCommentVNode("", true), createTextVNode(), renderSlot(_ctx.$slots, "trigger")]),
|
505
|
+
_: 3
|
506
|
+
}, 8, ["background-color", "border-radius", "hovered-icon", "is-active", "is-disabled", "padding"])], 512), createTextVNode(), !$props.hideInfoText && $setup.isVisible && (!!$props.text || _ctx.$slots.default) ? (openBlock(), createBlock(Teleport, {
|
507
|
+
key: 0,
|
508
|
+
to: "body"
|
509
|
+
}, [createVNode(_component_TextWrapper, {
|
510
|
+
"data-test-id": "info_text_wrapper",
|
511
|
+
style: normalizeStyle($setup.wrapperStyle)
|
512
|
+
}, {
|
513
|
+
default: withCtx(() => [createVNode(_component_TextOverlay, {
|
514
|
+
ref: "infoBox",
|
515
|
+
"app-theme": $props.appTheme,
|
516
|
+
image: $props.image,
|
517
|
+
style: normalizeStyle($setup.boxStyle),
|
518
|
+
width: $setup.infoBoxWidth
|
519
|
+
}, {
|
520
|
+
default: withCtx(() => [$props.image ? (openBlock(), createBlock(_component_OverlayImage, {
|
521
|
+
key: 0,
|
522
|
+
ref: "infoImage",
|
523
|
+
alt: "Info Image",
|
524
|
+
src: $props.image,
|
525
|
+
onLoad: $setup.onImageLoad
|
526
|
+
}, null, 8, ["src", "onLoad"])) : createCommentVNode("", true), createTextVNode(), !$props.hideInfoText ? (openBlock(), createElementBlock("span", {
|
527
|
+
key: 1,
|
528
|
+
ref: "textContent",
|
529
|
+
style: normalizeStyle($setup.textStyle)
|
530
|
+
}, [renderSlot(_ctx.$slots, "default", {}, () => [createBaseVNode("span", {
|
531
|
+
innerHTML: $props.text
|
532
|
+
}, null, 8, _hoisted_2)])], 4)) : createCommentVNode("", true)]),
|
533
|
+
_: 3
|
534
|
+
}, 8, ["app-theme", "image", "style", "width"]), createTextVNode()]),
|
535
|
+
_: 3
|
536
|
+
}, 8, ["style"])])) : createCommentVNode("", true)]),
|
537
|
+
_: 3
|
538
|
+
}, 8, ["type"]);
|
539
|
+
}
|
540
|
+
const InfoText = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
164
541
|
export {
|
165
|
-
|
166
|
-
EMPTY_OBJ,
|
167
|
-
NO,
|
168
|
-
NOOP,
|
169
|
-
camelize,
|
170
|
-
capitalize,
|
171
|
-
def,
|
172
|
-
extend,
|
173
|
-
getGlobalThis,
|
174
|
-
hasChanged,
|
175
|
-
hasOwn,
|
176
|
-
hyphenate,
|
177
|
-
invokeArrayFns,
|
178
|
-
isArray,
|
179
|
-
isBuiltInDirective,
|
180
|
-
isFunction,
|
181
|
-
isMap,
|
182
|
-
isModelListener,
|
183
|
-
isObject,
|
184
|
-
isOn,
|
185
|
-
isPlainObject,
|
186
|
-
isPromise,
|
187
|
-
isReservedProp,
|
188
|
-
isSet,
|
189
|
-
isString,
|
190
|
-
looseToNumber,
|
191
|
-
makeMap,
|
192
|
-
normalizeClass,
|
193
|
-
normalizeStyle,
|
194
|
-
objectToString,
|
195
|
-
parseStringStyle,
|
196
|
-
remove,
|
197
|
-
toDisplayString,
|
198
|
-
toHandlerKey,
|
199
|
-
toRawType,
|
200
|
-
toTypeString
|
542
|
+
InfoText as default
|
201
543
|
};
|