@nixweb/nixloc-ui 1.8.0 → 1.9.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/package.json
CHANGED
|
@@ -72,6 +72,7 @@ export default {
|
|
|
72
72
|
propsParams: Object,
|
|
73
73
|
value: Object,
|
|
74
74
|
changed: Function,
|
|
75
|
+
cleaned: Function,
|
|
75
76
|
nameNewRegister: String,
|
|
76
77
|
showNewRegister: {
|
|
77
78
|
type: Boolean,
|
|
@@ -210,6 +211,8 @@ export default {
|
|
|
210
211
|
let obj = { fieldTarget: this.fieldTarget, value: "" };
|
|
211
212
|
this.addFilter(obj);
|
|
212
213
|
}
|
|
214
|
+
|
|
215
|
+
if (this.cleaned) this.cleaned();
|
|
213
216
|
},
|
|
214
217
|
loadingMore() {
|
|
215
218
|
this.baseParams.currentPage++;
|
|
@@ -38,6 +38,7 @@ export default {
|
|
|
38
38
|
required: Boolean,
|
|
39
39
|
maxLength: Number,
|
|
40
40
|
value: String,
|
|
41
|
+
changed: Function,
|
|
41
42
|
},
|
|
42
43
|
data() {
|
|
43
44
|
return {
|
|
@@ -78,6 +79,7 @@ export default {
|
|
|
78
79
|
this.validate();
|
|
79
80
|
this.formDirty = true;
|
|
80
81
|
this.updateFormDirty(true);
|
|
82
|
+
if (this.changed) this.changed();
|
|
81
83
|
},
|
|
82
84
|
notifications() {
|
|
83
85
|
let self = this;
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<span ref="trigger" class="nx-tooltip-trigger" @mouseenter="showTooltip" @mouseleave="hideTooltip">
|
|
3
|
+
<slot />
|
|
4
|
+
</span>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script>
|
|
8
|
+
export default {
|
|
9
|
+
name: "Tooltip",
|
|
10
|
+
props: {
|
|
11
|
+
title: {
|
|
12
|
+
type: String,
|
|
13
|
+
default: "",
|
|
14
|
+
},
|
|
15
|
+
placement: {
|
|
16
|
+
type: String,
|
|
17
|
+
default: "top", // top | bottom | left | right
|
|
18
|
+
},
|
|
19
|
+
offset: {
|
|
20
|
+
type: Number,
|
|
21
|
+
default: 14, // distância entre o trigger e o tooltip
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
data() {
|
|
25
|
+
return {
|
|
26
|
+
tooltipEl: null,
|
|
27
|
+
};
|
|
28
|
+
},
|
|
29
|
+
methods: {
|
|
30
|
+
showTooltip() {
|
|
31
|
+
if (!this.title || this.title.trim() === "") return; // ✔ só mostra se title tiver conteúdo
|
|
32
|
+
|
|
33
|
+
if (!this.tooltipEl) this.createTooltip();
|
|
34
|
+
this.positionTooltip();
|
|
35
|
+
this.tooltipEl.style.opacity = "1";
|
|
36
|
+
},
|
|
37
|
+
|
|
38
|
+
hideTooltip() {
|
|
39
|
+
if (this.tooltipEl) this.tooltipEl.style.opacity = "0";
|
|
40
|
+
},
|
|
41
|
+
|
|
42
|
+
createTooltip() {
|
|
43
|
+
const el = document.createElement("div");
|
|
44
|
+
el.className = "nx-tooltip-floating";
|
|
45
|
+
el.dataset.placement = this.placement;
|
|
46
|
+
|
|
47
|
+
el.innerHTML = `
|
|
48
|
+
<span class="nx-tooltip-floating__text">${this.title}</span>
|
|
49
|
+
<span class="nx-tooltip-floating__arrow"></span>
|
|
50
|
+
`;
|
|
51
|
+
|
|
52
|
+
el.style.position = "fixed";
|
|
53
|
+
el.style.opacity = "0";
|
|
54
|
+
el.style.zIndex = "999999";
|
|
55
|
+
el.style.pointerEvents = "none";
|
|
56
|
+
el.style.transition = "opacity .15s ease";
|
|
57
|
+
|
|
58
|
+
document.body.appendChild(el);
|
|
59
|
+
this.tooltipEl = el;
|
|
60
|
+
},
|
|
61
|
+
|
|
62
|
+
positionTooltip() {
|
|
63
|
+
if (!this.tooltipEl) return;
|
|
64
|
+
|
|
65
|
+
const trigger = this.$refs.trigger.getBoundingClientRect();
|
|
66
|
+
const tip = this.tooltipEl.getBoundingClientRect();
|
|
67
|
+
const gap = this.offset; // ✔ distância ajustável
|
|
68
|
+
|
|
69
|
+
let top = 0,
|
|
70
|
+
left = 0;
|
|
71
|
+
|
|
72
|
+
switch (this.placement) {
|
|
73
|
+
case "bottom":
|
|
74
|
+
top = trigger.bottom + gap;
|
|
75
|
+
left = trigger.left + trigger.width / 2 - tip.width / 2;
|
|
76
|
+
break;
|
|
77
|
+
|
|
78
|
+
case "left":
|
|
79
|
+
top = trigger.top + trigger.height / 2 - tip.height / 2;
|
|
80
|
+
left = trigger.left - tip.width - gap;
|
|
81
|
+
break;
|
|
82
|
+
|
|
83
|
+
case "right":
|
|
84
|
+
top = trigger.top + trigger.height / 2 - tip.height / 2;
|
|
85
|
+
left = trigger.right + gap;
|
|
86
|
+
break;
|
|
87
|
+
|
|
88
|
+
case "top":
|
|
89
|
+
default:
|
|
90
|
+
top = trigger.top - tip.height - gap;
|
|
91
|
+
left = trigger.left + trigger.width / 2 - tip.width / 2;
|
|
92
|
+
break;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
this.tooltipEl.style.top = `${top}px`;
|
|
96
|
+
this.tooltipEl.style.left = `${left}px`;
|
|
97
|
+
},
|
|
98
|
+
},
|
|
99
|
+
|
|
100
|
+
beforeDestroy() {
|
|
101
|
+
if (this.tooltipEl) this.tooltipEl.remove();
|
|
102
|
+
},
|
|
103
|
+
};
|
|
104
|
+
</script>
|
|
105
|
+
|
|
106
|
+
<style>
|
|
107
|
+
.nx-tooltip-floating {
|
|
108
|
+
background: #111827;
|
|
109
|
+
color: #f9fafb;
|
|
110
|
+
padding: 6px 10px;
|
|
111
|
+
border-radius: 10px;
|
|
112
|
+
font-size: 12px;
|
|
113
|
+
white-space: nowrap;
|
|
114
|
+
position: fixed;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.nx-tooltip-floating__arrow {
|
|
118
|
+
position: absolute;
|
|
119
|
+
width: 0;
|
|
120
|
+
height: 0;
|
|
121
|
+
border-style: solid;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.nx-tooltip-floating[data-placement="top"] .nx-tooltip-floating__arrow {
|
|
125
|
+
bottom: -5px;
|
|
126
|
+
left: 50%;
|
|
127
|
+
transform: translateX(-50%);
|
|
128
|
+
border-width: 5px 5px 0 5px;
|
|
129
|
+
border-color: #111827 transparent transparent transparent;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.nx-tooltip-floating[data-placement="bottom"] .nx-tooltip-floating__arrow {
|
|
133
|
+
top: -5px;
|
|
134
|
+
left: 50%;
|
|
135
|
+
transform: translateX(-50%);
|
|
136
|
+
border-width: 0 5px 5px 5px;
|
|
137
|
+
border-color: transparent transparent #111827 transparent;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.nx-tooltip-floating[data-placement="left"] .nx-tooltip-floating__arrow {
|
|
141
|
+
top: 50%;
|
|
142
|
+
right: -5px;
|
|
143
|
+
transform: translateY(-50%);
|
|
144
|
+
border-width: 5px 0 5px 5px;
|
|
145
|
+
border-color: transparent transparent transparent #111827;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.nx-tooltip-floating[data-placement="right"] .nx-tooltip-floating__arrow {
|
|
149
|
+
top: 50%;
|
|
150
|
+
left: -5px;
|
|
151
|
+
transform: translateY(-50%);
|
|
152
|
+
border-width: 5px 5px 5px 0;
|
|
153
|
+
border-color: transparent #111827 transparent transparent;
|
|
154
|
+
}
|
|
155
|
+
</style>
|
|
@@ -2,22 +2,31 @@
|
|
|
2
2
|
<div>
|
|
3
3
|
<div class="side-by-side" v-for="item in actions" :key="item.type">
|
|
4
4
|
|
|
5
|
-
<Button v-if="item.type === 'delete'" tooltip="Gerar Retorno" key="remove" classIcon="fa-solid fa-trash"
|
|
6
|
-
type="danger" size="small" :params="item" :clicked="() => $emit('confirm', item)" />
|
|
5
|
+
<Button v-if="item.type === 'delete'" tooltip="Gerar Retorno" key="remove" classIcon="fa-solid fa-trash"
|
|
6
|
+
:title="item.title" type="danger" size="small" :params="item" :clicked="() => $emit('confirm', item)" />
|
|
7
7
|
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
<Tooltip :title="item.tooltip">
|
|
9
|
+
<Button v-if="item.type === 'component'" key="component" :title="item.title" :classIcon="item.classIcon"
|
|
10
|
+
:type="item.backgroundColor ? '' : 'primary'" size="small" :params="item" color="white"
|
|
11
|
+
:backGroundColor="item.backgroundColor ? item.backgroundColor : ''"
|
|
12
|
+
:clicked="() => $emit('confirm', item)" />
|
|
13
|
+
</Tooltip>
|
|
14
|
+
|
|
15
|
+
<Tooltip :title="item.tooltip">
|
|
16
|
+
<Button v-if="item.type === 'options'" key="options" :title="item.title" :classIcon="item.classIcon"
|
|
17
|
+
:type="item.backgroundColor ? '' : 'primary'" size="small" :params="item" color="white"
|
|
18
|
+
:backGroundColor="item.backgroundColor ? item.backgroundColor : ''"
|
|
19
|
+
:clicked="() => $emit('confirm', item)" />
|
|
20
|
+
</Tooltip>
|
|
21
|
+
|
|
22
|
+
<Tooltip :title="item.tooltip">
|
|
23
|
+
<Button v-if="item.type === 'event'" :eventName="item.eventName" key="event" :title="item.title"
|
|
24
|
+
:classIcon="item.classIcon" :type="item.backgroundColor ? '' : 'primary'" size="small"
|
|
25
|
+
:params="item" color="white" tooltip="Gerar Retorno"
|
|
26
|
+
:backGroundColor="item.backgroundColor ? item.backgroundColor : ''" />
|
|
27
|
+
</Tooltip>
|
|
12
28
|
|
|
13
|
-
<Button v-if="item.type === 'options'" key="options" :title="item.title" :classIcon="item.classIcon"
|
|
14
|
-
:type="item.backgroundColor ? '' : 'primary'" size="small" :params="item" color="white"
|
|
15
|
-
:backGroundColor="item.backgroundColor ? item.backgroundColor : ''"
|
|
16
|
-
:clicked="() => $emit('confirm', item)" />
|
|
17
29
|
|
|
18
|
-
<Button v-if="item.type === 'event'" :eventName="item.eventName" key="event" :title="item.title"
|
|
19
|
-
:classIcon="item.classIcon" :type="item.backgroundColor ? '' : 'primary'" size="small" :params="item"
|
|
20
|
-
color="white" :backGroundColor="item.backgroundColor ? item.backgroundColor : ''" />
|
|
21
30
|
|
|
22
31
|
</div>
|
|
23
32
|
</div>
|
|
@@ -25,12 +34,13 @@
|
|
|
25
34
|
|
|
26
35
|
<script>
|
|
27
36
|
import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
|
|
37
|
+
import Tooltip from "@nixweb/nixloc-ui/src/component/layout/Tooltip";
|
|
28
38
|
|
|
29
39
|
import { mapMutations } from "vuex";
|
|
30
40
|
|
|
31
41
|
export default {
|
|
32
42
|
name: "ActionButtons",
|
|
33
|
-
components: { Button },
|
|
43
|
+
components: { Button, Tooltip },
|
|
34
44
|
props: {
|
|
35
45
|
actions: { type: Array, default: () => [] },
|
|
36
46
|
},
|