wave-ui 1.45.2 → 1.45.3

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/wave-ui.cjs.js +1 -1
  2. package/dist/wave-ui.css +1 -1
  3. package/dist/wave-ui.es.js +9 -8
  4. package/dist/wave-ui.umd.js +1 -1
  5. package/package.json +1 -1
  6. package/src/wave-ui/components/w-menu.vue +1 -1
  7. package/src/wave-ui/components/w-tooltip.vue +94 -94
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "wave-ui",
3
- "version": "1.45.2",
3
+ "version": "1.45.3",
4
4
  "description": "An emerging UI framework for Vue.js & Vue 3 with only the bright side. :sunny:",
5
5
  "author": "Antoni Andre <antoniandre.web@gmail.com>",
6
6
  "main": "./dist/wave-ui.umd.js",
package/src/wave-ui/components/w-menu.vue CHANGED
@@ -197,7 +197,7 @@ export default {
197
197
  }
198
198
  },
199
199
 
200
- // The floatting menu styles.
200
+ // The floating menu styles.
201
201
  styles () {
202
202
  return {
203
203
  zIndex: this.zIndex || this.zIndex === 0 || (this.overlay && !this.zIndex && 200) || null,
package/src/wave-ui/components/w-tooltip.vue CHANGED
@@ -1,13 +1,9 @@
1
1
  <template lang="pug">
2
- .w-tooltip-wrap(ref="wrapper" :class="{ 'w-tooltip-wrap--attached': !detachTo }")
2
+ .w-tooltip-wrap(:class="{ 'w-tooltip-wrap--attached': !detachTo }")
3
3
  slot(name="activator" :on="eventHandlers")
4
4
  transition(:name="transitionName" appear)
5
5
  .w-tooltip(ref="tooltip" v-show="showTooltip" :class="classes" :style="styles")
6
- //- When there is a bg color, another div wrapper is needed for the triangle
7
- //- to inherit the current color.
8
- div(v-if="bgColor" :class="color")
9
- slot
10
- slot(v-else)
6
+ slot
11
7
  </template>
12
8
 
13
9
  <script>
@@ -95,7 +91,7 @@ export default {
95
91
 
96
92
  // DOM element that will receive the tooltip.
97
93
  tooltipParentEl () {
98
- return this.detachTo ? this.detachToTarget : this.$refs.wrapper
94
+ return this.detachTo ? this.detachToTarget : this.$el
99
95
  },
100
96
 
101
97
  position () {
@@ -140,8 +136,8 @@ export default {
140
136
 
141
137
  classes () {
142
138
  return {
143
- [this.color]: !this.bgColor,
144
- [`${this.bgColor} ${this.bgColor}--bg`]: this.bgColor,
139
+ [this.color]: this.color,
140
+ [`${this.bgColor}--bg`]: this.bgColor,
145
141
  ...this.tooltipClasses,
146
142
  [`w-tooltip--${this.position}`]: true,
147
143
  'w-tooltip--tile': this.tile,
@@ -154,11 +150,13 @@ export default {
154
150
  }
155
151
  },
156
152
 
153
+ // The tooltip styles.
157
154
  styles () {
158
155
  return {
159
156
  zIndex: this.zIndex || this.zIndex === 0 || null,
160
- top: `${~~this.tooltipCoordinates.top}px`,
161
- left: `${~~this.tooltipCoordinates.left}px`
157
+ top: (this.tooltipCoordinates.top && `${~~this.tooltipCoordinates.top}px`) || null,
158
+ left: (this.tooltipCoordinates.left && `${~~this.tooltipCoordinates.left}px`) || null,
159
+ '--w-tooltip-bg-color': this.$waveui.colors[this.bgColor || 'white']
162
160
  }
163
161
  },
164
162
 
@@ -267,7 +265,7 @@ export default {
267
265
  },
268
266
 
269
267
  insertTooltip () {
270
- const wrapper = this.$refs.wrapper
268
+ const wrapper = this.$el
271
269
  this.tooltipEl = this.$refs.tooltip.$el || this.$refs.tooltip
272
270
 
273
271
  // Unwrap the activator element.
@@ -285,7 +283,7 @@ export default {
285
283
  },
286
284
 
287
285
  mounted () {
288
- this.activatorEl = this.$refs.wrapper.firstElementChild
286
+ this.activatorEl = this.$el.firstElementChild
289
287
  if (this.detachTo) this.insertTooltip()
290
288
 
291
289
  if (this.value) this.toggle({ type: 'click', target: this.activatorEl })
@@ -361,93 +359,95 @@ export default {
361
359
 
362
360
  &--custom-transition {transform: none;}
363
361
 
364
- &:after {
365
- content: '';
366
- position: absolute;
367
- width: 0;
368
- height: 0;
369
- border: 6px solid transparent;
370
- }
371
- &--top:after {
372
- top: 100%;
373
- left: 50%;
374
- border-top-color: $tooltip-bg-color;
375
- transform: translateX(-50%);
376
- margin-top: 1px;
377
- }
378
- &--bottom:after {
379
- bottom: 100%;
380
- left: 50%;
381
- border-bottom-color: $tooltip-bg-color;
382
- transform: translateX(-50%);
383
- margin-bottom: 1px;
384
- }
385
- &--left:after {
386
- left: 100%;
387
- top: 50%;
388
- border-left-color: $tooltip-bg-color;
389
- transform: translateY(-50%);
390
- margin-left: 1px;
391
- }
392
- &--right:after {
393
- right: 100%;
394
- top: 50%;
395
- border-right-color: $tooltip-bg-color;
396
- transform: translateY(-50%);
397
- margin-right: 1px;
398
- }
362
+ // &:after {
363
+ // content: '';
364
+ // position: absolute;
365
+ // width: 0;
366
+ // height: 0;
367
+ // border: 6px solid transparent;
368
+ // }
369
+ // &--top:after {
370
+ // top: 100%;
371
+ // left: 50%;
372
+ // border-top-color: $tooltip-bg-color;
373
+ // transform: translateX(-50%);
374
+ // margin-top: 1px;
375
+ // }
376
+ // &--bottom:after {
377
+ // bottom: 100%;
378
+ // left: 50%;
379
+ // border-bottom-color: $tooltip-bg-color;
380
+ // transform: translateX(-50%);
381
+ // margin-bottom: 1px;
382
+ // }
383
+ // &--left:after {
384
+ // left: 100%;
385
+ // top: 50%;
386
+ // border-left-color: $tooltip-bg-color;
387
+ // transform: translateY(-50%);
388
+ // margin-left: 1px;
389
+ // }
390
+ // &--right:after {
391
+ // right: 100%;
392
+ // top: 50%;
393
+ // border-right-color: $tooltip-bg-color;
394
+ // transform: translateY(-50%);
395
+ // margin-right: 1px;
396
+ // }
399
397
 
400
398
  // Tooltip without border.
401
399
  // --------------------------------------------------------
402
- &--no-border.w-tooltip--top:after {margin-top: -1px;border-top-color: inherit;}
403
- &--no-border.w-tooltip--bottom:after {margin-bottom: -1px;border-bottom-color: inherit;}
404
- &--no-border.w-tooltip--left:after {margin-left: -1px;border-left-color: inherit;}
405
- &--no-border.w-tooltip--right:after {margin-right: -1px;border-right-color: inherit;}
400
+ &--no-border {
401
+ @include triangle(var(--w-tooltip-bg-color), '.w-tooltip', 7px, 0);
402
+ }
403
+ &:not(&--no-border) {
404
+ @include triangle(var(--w-tooltip-bg-color), '.w-tooltip', 7px);
405
+ }
406
406
 
407
407
  // Tooltip with border.
408
408
  // --------------------------------------------------------
409
- &:not(&--no-border).w-tooltip--top:after {margin-top: -1px;}
410
- &:not(&--no-border).w-tooltip--bottom:after {margin-bottom: -1px;}
411
- &:not(&--no-border).w-tooltip--left:after {margin-left: -1px;}
412
- &:not(&--no-border).w-tooltip--right:after {margin-right: -1px;}
413
-
414
- &:not(&--no-border) {
415
- &:before {
416
- content: '';
417
- position: absolute;
418
- width: 0;
419
- height: 0;
420
- border: 7px solid transparent;
421
- }
422
- &.w-tooltip--top:before {
423
- top: 100%;
424
- left: 50%;
425
- border-top-color: inherit;
426
- transform: translateX(-50%);
427
- margin-top: 0;
428
- }
429
- &.w-tooltip--bottom:before {
430
- bottom: 100%;
431
- left: 50%;
432
- border-bottom-color: inherit;
433
- transform: translateX(-50%);
434
- margin-bottom: 0;
435
- }
436
- &.w-tooltip--left:before {
437
- left: 100%;
438
- top: 50%;
439
- border-left-color: inherit;
440
- transform: translateY(-50%);
441
- margin-left: 0;
442
- }
443
- &.w-tooltip--right:before {
444
- right: 100%;
445
- top: 50%;
446
- border-right-color: inherit;
447
- transform: translateY(-50%);
448
- margin-right: 0;
449
- }
450
- }
409
+ // &:not(&--no-border).w-tooltip--top:after {margin-top: -1px;}
410
+ // &:not(&--no-border).w-tooltip--bottom:after {margin-bottom: -1px;}
411
+ // &:not(&--no-border).w-tooltip--left:after {margin-left: -1px;}
412
+ // &:not(&--no-border).w-tooltip--right:after {margin-right: -1px;}
413
+
414
+ // &:not(&--no-border) {
415
+ // &:before {
416
+ // content: '';
417
+ // position: absolute;
418
+ // width: 0;
419
+ // height: 0;
420
+ // border: 7px solid transparent;
421
+ // }
422
+ // &.w-tooltip--top:before {
423
+ // top: 100%;
424
+ // left: 50%;
425
+ // border-top-color: inherit;
426
+ // transform: translateX(-50%);
427
+ // margin-top: 0;
428
+ // }
429
+ // &.w-tooltip--bottom:before {
430
+ // bottom: 100%;
431
+ // left: 50%;
432
+ // border-bottom-color: inherit;
433
+ // transform: translateX(-50%);
434
+ // margin-bottom: 0;
435
+ // }
436
+ // &.w-tooltip--left:before {
437
+ // left: 100%;
438
+ // top: 50%;
439
+ // border-left-color: inherit;
440
+ // transform: translateY(-50%);
441
+ // margin-left: 0;
442
+ // }
443
+ // &.w-tooltip--right:before {
444
+ // right: 100%;
445
+ // top: 50%;
446
+ // border-right-color: inherit;
447
+ // transform: translateY(-50%);
448
+ // margin-right: 0;
449
+ // }
450
+ // }
451
451
  // --------------------------------------------------------
452
452
  }
453
453