@avakhula/ui 0.0.199 → 0.0.200

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.
Files changed (7) hide show
  1. package/dist/index.js +9 -9
  2. package/dist/index.umd.cjs +9 -9
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
  5. package/src/components/Tooltip/Tooltip.vue +22 -21
  6. package/src/directives/tooltip/TooltipController.js +8 -8
  7. package/src/directives/tooltip/tooltip.stories.js +38 -11
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@avakhula/ui",
3
- "version": "0.0.199",
3
+ "version": "0.0.200",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.umd.cjs",
6
6
  "source": "src/index.js",
package/src/components/Tooltip/Tooltip.vue CHANGED
@@ -86,6 +86,7 @@ export default {
86
86
  border-width: 4px 4px 0 4px;
87
87
  border-color: #fff transparent transparent transparent;
88
88
  position: absolute;
89
+ transform: none !important;
89
90
  }
90
91
 
91
92
  &.top-left {
@@ -97,77 +98,77 @@ export default {
97
98
  &.top-center {
98
99
  &::before {
99
100
  bottom: -4px;
100
- right: 50%;
101
- transform: translateX(50%);
101
+ right: 50%;
102
+ transform: translateX(50%) !important;
102
103
  }
103
104
  }
104
105
  &.top-right {
105
106
  &::before {
106
107
  bottom: -4px;
107
- left: 10px;
108
+ left: 10px;
108
109
  }
109
110
  }
110
111
  &.right-top {
111
112
  &::before {
112
113
  left: -6px;
113
- bottom: 10px;
114
- transform: rotate(90deg);
114
+ bottom: 10px;
115
+ transform: rotate(90deg) !important;
115
116
  }
116
117
  }
117
118
  &.right-center {
118
119
  &::before {
119
120
  left: -8px;
120
- top: 50%;
121
- transform: rotate(90deg) translateY(-50%);
121
+ top: 50%;
122
+ transform: rotate(90deg) translateY(-50%) !important;
122
123
  }
123
124
  }
124
125
  &.right-bottom {
125
126
  &::before {
126
127
  top: 10px;
127
- left: -6px;
128
- transform: rotate(90deg);
128
+ left: -6px;
129
+ transform: rotate(90deg) !important;
129
130
  }
130
131
  }
131
132
  &.bottom-left {
132
133
  &::before {
133
134
  top: -4px;
134
- right: 10px;
135
- transform: rotate(180deg);
135
+ right: 10px;
136
+ transform: rotate(180deg) !important;
136
137
  }
137
138
  }
138
139
  &.bottom-center {
139
140
  &::before {
140
141
  top: -4px;
141
- right: 50%;
142
- transform: rotate(180deg) translateX(-50%);
142
+ right: 50%;
143
+ transform: rotate(180deg) translateX(-50%) !important;
143
144
  }
144
145
  }
145
146
  &.bottom-right {
146
147
  &::before {
147
148
  top: -4px;
148
- left: 10px;
149
- transform: rotate(180deg);
149
+ left: 10px;
150
+ transform: rotate(180deg) !important;
150
151
  }
151
152
  }
152
153
  &.left-top {
153
154
  &::before {
154
155
  right: -6px;
155
- bottom: 10px;
156
- transform: rotate(-90deg);
156
+ bottom: 10px;
157
+ transform: rotate(-90deg) !important;
157
158
  }
158
159
  }
159
160
  &.left-center {
160
161
  &::before {
161
162
  right: -8px;
162
- top: 50%;
163
- transform: rotate(-90deg) translateY(-50%);
163
+ top: 50%;
164
+ transform: rotate(-90deg) translateY(-50%) !important;
164
165
  }
165
166
  }
166
167
  &.left-bottom {
167
168
  &::before {
168
169
  top: 10px;
169
- right: -6px;
170
- transform: rotate(-90deg);
170
+ right: -6px;
171
+ transform: rotate(-90deg) !important;
171
172
  }
172
173
  }
173
174
  }
package/src/directives/tooltip/TooltipController.js CHANGED
@@ -94,25 +94,25 @@ export default class Tooltip {
94
94
  case "bottomLeft":
95
95
  styles =
96
96
  styles +
97
- `left: ${right - tooltipWidth - width / 2 + 5}px!important;
97
+ `left: ${right - tooltipWidth - width / 2 + 14}px!important;
98
98
  top: ${bottom + scrollTop + 5}px!important;`;
99
99
  break;
100
100
  case "bottomRight":
101
101
  styles =
102
102
  styles +
103
- `left: ${left + width / 2 - 5}px!important;
103
+ `left: ${left + width / 2 - 14}px!important;
104
104
  top: ${bottom + scrollTop + 5}px!important;`;
105
105
  break;
106
106
  case "topLeft":
107
107
  styles =
108
108
  styles +
109
- `left: ${right - tooltipWidth - width / 2 + 5}px!important;
109
+ `left: ${right - tooltipWidth - width / 2 + 14}px!important;
110
110
  top: ${top - tooltipHeight + scrollTop - 5}px!important;`;
111
111
  break;
112
112
  case "topRight":
113
113
  styles =
114
114
  styles +
115
- `left: ${left + width / 2 - 5}px!important;
115
+ `left: ${left + width / 2 - 14}px!important;
116
116
  top: ${top - tooltipHeight + scrollTop - 5}px!important;`;
117
117
  break;
118
118
  case "leftTop":
@@ -120,7 +120,7 @@ export default class Tooltip {
120
120
  styles +
121
121
  `left: ${left - tooltipWidth - 5}px!important;
122
122
  top: ${
123
- bottom - tooltipHeight - height / 2 + scrollTop + 9
123
+ bottom - tooltipHeight - height / 2 + scrollTop + 12
124
124
  }px!important`;
125
125
  break;
126
126
  case "leftCenter":
@@ -135,14 +135,14 @@ export default class Tooltip {
135
135
  styles =
136
136
  styles +
137
137
  `left: ${left - tooltipWidth - 5}px!important;
138
- top: ${bottom + scrollTop - height / 2 - 9}px!important;`;
138
+ top: ${bottom + scrollTop - height / 2 - 12}px!important;`;
139
139
  break;
140
140
  case "rightTop":
141
141
  styles =
142
142
  styles +
143
143
  `left: ${right + 5}px!important;
144
144
  top: ${
145
- bottom - tooltipHeight - height / 2 + scrollTop + 9
145
+ bottom - tooltipHeight - height / 2 + scrollTop + 12
146
146
  }px!important`;
147
147
  break;
148
148
  case "rightCenter":
@@ -158,7 +158,7 @@ export default class Tooltip {
158
158
  styles =
159
159
  styles +
160
160
  `left: ${right + 5}px!important;
161
- top: ${bottom + scrollTop - height / 2 - 9}px!important`;
161
+ top: ${bottom + scrollTop - height / 2 - 12}px!important`;
162
162
  break;
163
163
  default:
164
164
  styles =
package/src/directives/tooltip/tooltip.stories.js CHANGED
@@ -1,4 +1,6 @@
1
1
  import IbButton from "../../components/Button/Button.vue";
2
+ import IbIconButton from "../../components/IconButton/IconButton.vue";
3
+
2
4
  import { TooltipDirective } from "./tooltip";
3
5
  import readme from "./readme.mdx";
4
6
 
@@ -13,52 +15,77 @@ export default {
13
15
  };
14
16
 
15
17
  const Template = (args) => ({
16
- components: { IbButton },
18
+ components: { IbButton, IbIconButton },
17
19
  directives: { tooltip: TooltipDirective },
18
20
  setup() {
19
21
  return { args };
20
22
  },
21
23
  template: `
22
24
  <div style="display:flex;flex-wrap:wrap;">
23
- <div style="margin:20px">
24
- <ib-button v-tooltip.bottomLeft="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(bottomLeft)</ib-button>
25
+
26
+ <div style="margin:20px">
27
+ bottomLeft
28
+ <ib-button v-tooltip.bottomLeft="'Tooltip Content Content Content Content'" v-bind="args">aaaabaaaa</ib-button>
29
+ <ib-icon-button v-tooltip.bottomLeft="'Tooltip Content Content Content Content'"> <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
25
30
  </div>
26
31
  <div style="margin:20px">
27
- <ib-button v-tooltip.bottomCenter="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(bottomCenter)</ib-button>
32
+ bottomCenter
33
+ <ib-button v-tooltip.bottomCenter="'Tooltip Content Content Content Content'" v-bind="args">aaaabaaaa</ib-button>
34
+ <ib-icon-button v-tooltip.bottomCenter="'Tooltip Content Content Content Content'"> <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
28
35
  </div>
29
36
  <div style="margin:20px">
30
- <ib-button v-tooltip.bottomRight="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(bottomRight)</ib-button>
37
+ bottomRight
38
+ <ib-button v-tooltip.bottomRight="'Tooltip Content Content Content Content'" v-bind="args">aaaabaaaa</ib-button>
39
+ <ib-icon-button v-tooltip.bottomRight="'Tooltip Content Content Content Content'"> <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
31
40
  </div>
32
41
 
33
42
  <div style="margin:20px">
34
- <ib-button v-tooltip.topLeft="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(topLeft)</ib-button>
43
+ topLeft
44
+ <ib-button v-tooltip.topLeft="'Tooltip Content Content Content Content'" v-bind="args">aaaabaaaa</ib-button>
45
+ <ib-icon-button v-tooltip.topLeft="'Tooltip Content Content Content Content'"> <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
35
46
  </div>
36
47
  <div style="margin:20px">
37
48
  <ib-button v-tooltip="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(default)</ib-button>
38
49
  </div>
39
50
  <div style="margin:20px">
40
- <ib-button v-tooltip.topRight="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(topRight)</ib-button>
51
+ topRight
52
+ <ib-button v-tooltip.topRight="'Tooltip Content Content Content Content'" v-bind="args">aaaabaaaa</ib-button>
53
+ <ib-icon-button v-tooltip.topRight="'Tooltip Content Content Content Content'"> <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
41
54
  </div>
42
55
 
43
56
  <div style="margin:20px">
44
- <ib-button v-tooltip.leftTop="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(leftTop)</ib-button>
57
+ leftTop
58
+ <ib-button v-tooltip.leftTop="'Tooltip Content Content Content Content'" v-bind="args">aaaabaaaa</ib-button>
59
+ <ib-icon-button v-tooltip.leftTop="'Tooltip Content Content Content Content'"> <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
45
60
  </div>
46
61
  <div style="margin:20px">
47
- <ib-button v-tooltip.leftCenter="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(leftCenter)</ib-button>
62
+ leftCenter
63
+ <ib-button v-tooltip.leftCenter="'Tooltip Content Content Content Content'" v-bind="args">aaaabaaaa</ib-button>
64
+ <ib-icon-button v-tooltip.leftCenter="'Tooltip Content Content Content Content'"> <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
48
65
  </div>
49
66
  <div style="margin:20px">
67
+ leftBottom
68
+ <ib-button v-tooltip.leftBottom="'Tooltip Content Content Content Content'" v-bind="args">aaaabaaaa</ib-button>
69
+ <ib-icon-button v-tooltip.leftBottom="'Tooltip Content Content Content Content'"> <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
50
70
  <ib-button v-tooltip.leftBottom="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(leftBottom)</ib-button>
51
71
  </div>
52
72
 
53
73
 
54
74
  <div style="margin:20px">
55
- <ib-button v-tooltip.rightTop="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(rightTop)</ib-button>
75
+ rightTop
76
+ <ib-button v-tooltip.rightTop="'Tooltip Content Content Content Content'" v-bind="args">aaaabaaaa</ib-button>
77
+ <ib-icon-button v-tooltip.rightTop="'Tooltip Content Content Content Content'"> <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
56
78
  </div>
57
79
  <div style="margin:20px">
80
+ rightCenter
81
+ <ib-button v-tooltip.rightCenter="'Tooltip Content Content Content Content'" v-bind="args">aaaabaaaa</ib-button>
82
+ <ib-icon-button v-tooltip.rightCenter="'Tooltip Content Content Content Content'"> <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
58
83
  <ib-button v-tooltip.rightCenter="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(rightCenter)</ib-button>
59
84
  </div>
60
85
  <div style="margin:20px">
61
- <ib-button v-tooltip.rightBottom="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(rightBottom)</ib-button>
86
+ rightBottom
87
+ <ib-icon-button v-tooltip.rightBottom="'Tooltip Content Content Content Content'"> <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
88
+ <ib-button v-tooltip.rightBottom="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(rightCenter)</ib-button>
62
89
  </div>
63
90
 
64
91