wave-ui 1.44.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 (11) 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 +20 -18
  4. package/dist/wave-ui.umd.js +1 -1
  5. package/package.json +7 -7
  6. package/src/wave-ui/components/w-menu.vue +1 -1
  7. package/src/wave-ui/components/w-table.vue +17 -13
  8. package/src/wave-ui/components/w-tooltip.vue +94 -94
  9. package/src/wave-ui/scss/_base.scss +0 -21
  10. package/src/wave-ui/scss/_variables.scss +4 -0
  11. package/src/wave-ui/scss/index.scss +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "wave-ui",
3
- "version": "1.44.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",
@@ -44,16 +44,16 @@
44
44
  ],
45
45
  "devDependencies": {
46
46
  "@babel/core": "^7.16.0",
47
- "@babel/eslint-parser": "^7.16.0",
47
+ "@babel/eslint-parser": "^7.16.3",
48
48
  "@babel/plugin-proposal-class-properties": "^7.16.0",
49
49
  "@mdi/font": "^5.9.55",
50
- "@vitejs/plugin-vue": "^1.9.4",
50
+ "@vitejs/plugin-vue": "^1.10.1",
51
51
  "autoprefixer": "^10.4.0",
52
52
  "axios": "^0.21.4",
53
- "core-js": "^3.19.0",
53
+ "core-js": "^3.19.1",
54
54
  "eslint": "^7.32.0",
55
55
  "eslint-config-standard": "^16.0.3",
56
- "eslint-plugin-import": "^2.25.2",
56
+ "eslint-plugin-import": "^2.25.3",
57
57
  "eslint-plugin-node": "^11.1.0",
58
58
  "eslint-plugin-promise": "^5.1.1",
59
59
  "eslint-plugin-vue": "^7.20.0",
@@ -63,10 +63,10 @@
63
63
  "ionicons": "^4.6.3",
64
64
  "material-design-icons": "^3.0.1",
65
65
  "rollup-plugin-delete": "^2.0.0",
66
- "sass": "^1.43.4",
66
+ "sass": "^1.43.5",
67
67
  "simple-syntax-highlighter": "^1.5.0",
68
68
  "splitpanes": "^2.3.8",
69
- "vite": "^2.6.13",
69
+ "vite": "^2.6.14",
70
70
  "vite-plugin-pug": "^0.3.0",
71
71
  "vite-plugin-vue2": "^1.9.0",
72
72
  "vue": "^2.6.14",
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-table.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  @mousedown="onMouseDown"
6
6
  @mouseover="onMouseOver"
7
7
  @mouseout="onMouseOut")
8
- colgroup
8
+ colgroup(ref="colgroup")
9
9
  col.w-table__col(
10
10
  v-for="(header, i) in headers"
11
11
  :key="i"
@@ -43,7 +43,7 @@
43
43
  .w-table__loading-text
44
44
  slot(name="loading") Loading...
45
45
  //- No data.
46
- tr.no-data(v-if="!tableItems.length")
46
+ tr.no-data(v-else-if="!tableItems.length")
47
47
  td.w-table__cell.text-center(:colspan="headers.length")
48
48
  slot(name="no-data") No data to show.
49
49
 
@@ -57,13 +57,13 @@
57
57
  :item="item"
58
58
  :index="i + 1"
59
59
  :select="() => doSelectRow(item, i)"
60
- :classes="{ 'w-table__row': true, 'w-table__row--selected': selectedRowsByUid[item._uid] !== undefined, 'w-table__row--has-expanded': expandedRowsByUid[item._uid] !== undefined }")
60
+ :classes="{ 'w-table__row': true, 'w-table__row--selected': selectedRowsByUid[item._uid] !== undefined, 'w-table__row--expanded': expandedRowsByUid[item._uid] !== undefined }")
61
61
 
62
62
  tr.w-table__row(
63
63
  v-else
64
64
  :key="i"
65
65
  @click="doSelectRow(item, i)"
66
- :class="{ 'w-table__row--selected': selectedRowsByUid[item._uid] !== undefined, 'w-table__row--has-expanded': expandedRowsByUid[item._uid] !== undefined }")
66
+ :class="{ 'w-table__row--selected': selectedRowsByUid[item._uid] !== undefined, 'w-table__row--expanded': expandedRowsByUid[item._uid] !== undefined }")
67
67
  template(v-for="(header, j) in headers")
68
68
  td.w-table__cell(
69
69
  v-if="$scopedSlots[`item-cell.${header.key}`] || $scopedSlots[`item-cell.${j + 1}`] || $scopedSlots['item-cell']"
@@ -106,13 +106,14 @@
106
106
  :class="{ 'w-table__col-resizer--hover': colResizing.hover === j, 'w-table__col-resizer--active': colResizing.columnIndex === j }")
107
107
 
108
108
  //- Expanded row.
109
- tr.w-table__row.w-table__row--expanded(v-if="expandedRowsByUid[item._uid]")
109
+ tr.w-table__row.w-table__row--expansion(v-if="expandedRowsByUid[item._uid]")
110
110
  td.w-table__cell(:colspan="headers.length")
111
- div(v-if="expandedRowsByUid[item._uid]")
112
- slot(name="expanded-row" :item="item" :index="i + 1")
113
- span.w-table__col-resizer(
114
- v-if="j < headers.length - 1 && resizableColumns"
115
- :class="{ 'w-table__col-resizer--hover': colResizing.hover === j, 'w-table__col-resizer--active': colResizing.columnIndex === j }")
111
+ w-transition-expand(y)
112
+ div(v-if="expandedRowsByUid[item._uid]")
113
+ slot(name="row-expansion" :item="item" :index="i + 1")
114
+ span.w-table__col-resizer(
115
+ v-if="i < headers.length - 1 && resizableColumns"
116
+ :class="{ 'w-table__col-resizer--hover': colResizing.hover === i, 'w-table__col-resizer--active': colResizing.columnIndex === j }")
116
117
  </template>
117
118
 
118
119
  <script>
@@ -174,7 +175,7 @@ export default {
174
175
  resizableColumns: { type: Boolean }
175
176
  },
176
177
 
177
- emits: ['row-select', 'row-expand', 'row-click', 'update:sort', 'update:selected-rows', 'update:expanded-rows'],
178
+ emits: ['row-select', 'row-expand', 'row-click', 'update:sort', 'update:selected-rows', 'update:expanded-rows', 'column-resize'],
178
179
 
179
180
  data: () => ({
180
181
  activeSorting: [],
@@ -202,8 +203,7 @@ export default {
202
203
  },
203
204
 
204
205
  filteredItems () {
205
- if (typeof this.filter === 'function') return this.tableItems.filter(this.filter)
206
- return this.tableItems
206
+ return typeof this.filter === 'function' ? this.tableItems.filter(this.filter) : this.tableItems
207
207
  },
208
208
 
209
209
  sortedItems () {
@@ -436,6 +436,10 @@ export default {
436
436
  // cell after resizing.
437
437
  // (releasing the mouse on table header triggers a click event captured by the sorting feature)
438
438
  setTimeout(() => {
439
+ // On Mouse up, emit an event containing all the new widths of the columns.
440
+ const widths = [...this.$refs.colgroup.childNodes].map(column => column.style?.width || column.offsetWidth)
441
+ this.$emit('column-resize', { index: this.colResizing.columnIndex, widths })
442
+
439
443
  this.colResizing.dragging = false
440
444
  this.colResizing.columnIndex = null
441
445
  this.colResizing.startCursorX = 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
 
package/src/wave-ui/scss/_base.scss CHANGED
@@ -10,24 +10,3 @@ a {text-decoration: none;}
10
10
  padding-left: 3 * $base-increment;
11
11
  padding-right: 3 * $base-increment;
12
12
  }
13
-
14
- .nav-menu ~ .main-content {padding-left: 4em;}
15
-
16
- footer {
17
- margin-top: 5em;
18
-
19
- .nav-drawer ~ & {padding-left: 12px;}
20
-
21
- .heart:hover {animation: heartbeat 1s infinite;}
22
- small {font-size: 10px;}
23
- .caption {padding-top: 1px;}
24
- }
25
-
26
- @keyframes heartbeat {
27
- 0%, 30%, 60%, 100% {transform: scale(1);}
28
- 15%, 45% {transform: scale(1.2);}
29
- }
30
-
31
- @media screen and (max-width: 560px) {
32
- button.go-top {display: none;}
33
- }
package/src/wave-ui/scss/_variables.scss CHANGED
@@ -57,3 +57,7 @@ $textarea-line-height: 1.2;
57
57
  $tooltip-bg-color: #fff;
58
58
  $tooltip-color: rgba(0, 0, 0, 0.7);
59
59
  // --------------------------------------------------------
60
+
61
+ // Mixins.
62
+ // --------------------------------------------------------
63
+ @import './mixins';
package/src/wave-ui/scss/index.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  @import './variables';
2
- @import './mixins';
3
2
  @import './base';
4
3
  @import './typography';
5
4
  @import './layout';