@1024pix/pix-ui 20.1.0 → 20.2.1
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/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# Pix-UI Changelog
|
|
2
2
|
|
|
3
|
+
## v20.2.1 (28/10/2022)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### :bug: Correction
|
|
7
|
+
- [#268](https://github.com/1024pix/pix-ui/pull/268) [BUGFIX] Empêcher la propagation des événements dans tous les enfants sur la Tooltip (PIX-6149)
|
|
8
|
+
|
|
9
|
+
## v20.2.0 (25/10/2022)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
### :rocket: Amélioration
|
|
13
|
+
- [#267](https://github.com/1024pix/pix-ui/pull/267) [FEATURE] Gérer l'échappement de la tooltip (PIX-6114)
|
|
14
|
+
|
|
3
15
|
## v20.1.0 (13/10/2022)
|
|
4
16
|
|
|
5
17
|
|
|
@@ -1,6 +1,16 @@
|
|
|
1
|
-
<span
|
|
1
|
+
<span
|
|
2
|
+
class="pix-tooltip"
|
|
3
|
+
{{on-escape-action this.hideTooltip}}
|
|
4
|
+
{{on "mouseover" this.showTooltip}}
|
|
5
|
+
{{on "mouseleave" this.hideTooltipOnMouseOut}}
|
|
6
|
+
{{on "focusin" this.showTooltip}}
|
|
7
|
+
{{on "focusout" this.hideTooltip}}
|
|
8
|
+
...attributes
|
|
9
|
+
>
|
|
2
10
|
{{#if (has-block "triggerElement")}}
|
|
3
|
-
{{
|
|
11
|
+
<div class={{if this.isVisible "pix-tooltip--visible" ""}}>
|
|
12
|
+
{{yield to="triggerElement"}}
|
|
13
|
+
</div>
|
|
4
14
|
{{/if}}
|
|
5
15
|
|
|
6
16
|
{{#if (has-block "tooltip")}}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import Component from '@glimmer/component';
|
|
2
|
+
import { action } from '@ember/object';
|
|
3
|
+
import { tracked } from '@glimmer/tracking';
|
|
2
4
|
|
|
3
5
|
export default class PixTooltip extends Component {
|
|
6
|
+
@tracked isVisible = false;
|
|
7
|
+
|
|
4
8
|
get position() {
|
|
5
9
|
const correctsPosition = [
|
|
6
10
|
'top',
|
|
@@ -18,4 +22,25 @@ export default class PixTooltip extends Component {
|
|
|
18
22
|
get display() {
|
|
19
23
|
return typeof this.args.hide === 'undefined' || !this.args.hide;
|
|
20
24
|
}
|
|
25
|
+
|
|
26
|
+
@action
|
|
27
|
+
showTooltip() {
|
|
28
|
+
this.isVisible = true;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@action
|
|
32
|
+
hideTooltip() {
|
|
33
|
+
this.isVisible = false;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@action
|
|
37
|
+
hideTooltipOnMouseOut(event) {
|
|
38
|
+
const isFocused = event.target.contains(document.activeElement);
|
|
39
|
+
|
|
40
|
+
if (isFocused) {
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
this.hideTooltip(event);
|
|
45
|
+
}
|
|
21
46
|
}
|
|
@@ -6,8 +6,10 @@
|
|
|
6
6
|
justify-content: center;
|
|
7
7
|
align-items: center;
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.pix-tooltip--visible {
|
|
12
|
+
+ .pix-tooltip__content {
|
|
11
13
|
display: block;
|
|
12
14
|
opacity: 1;
|
|
13
15
|
}
|
|
@@ -46,6 +46,27 @@ const TemplateWithHTMLElement = (args) => {
|
|
|
46
46
|
};
|
|
47
47
|
};
|
|
48
48
|
|
|
49
|
+
const TemplateWithIconElement = (args) => {
|
|
50
|
+
return {
|
|
51
|
+
template: hbs`
|
|
52
|
+
<PixTooltip
|
|
53
|
+
@id={{this.id}}
|
|
54
|
+
@isInline=true>
|
|
55
|
+
<:triggerElement>
|
|
56
|
+
<button style='padding:0; margin-left:4px; line-height:0;'>
|
|
57
|
+
<FaIcon class="external-link" @icon="up-right-from-square" />
|
|
58
|
+
</button>
|
|
59
|
+
</:triggerElement>
|
|
60
|
+
|
|
61
|
+
<:tooltip>
|
|
62
|
+
{{this.text}}
|
|
63
|
+
</:tooltip>
|
|
64
|
+
</PixTooltip>
|
|
65
|
+
`,
|
|
66
|
+
context: args,
|
|
67
|
+
};
|
|
68
|
+
};
|
|
69
|
+
|
|
49
70
|
export const Default = Template.bind({});
|
|
50
71
|
Default.args = {
|
|
51
72
|
text: 'Hello World',
|
|
@@ -113,6 +134,12 @@ WithHTML.args = {
|
|
|
113
134
|
label: 'À survoler pour voir la tooltip',
|
|
114
135
|
};
|
|
115
136
|
|
|
137
|
+
export const WithIcon = TemplateWithIconElement.bind({});
|
|
138
|
+
Default.args = {
|
|
139
|
+
text: 'Hello World',
|
|
140
|
+
label: 'À survoler pour voir la tooltip',
|
|
141
|
+
};
|
|
142
|
+
|
|
116
143
|
export const argTypes = {
|
|
117
144
|
id: {
|
|
118
145
|
name: 'id',
|