@thinkpixellab-public/px-vue 4.0.1 → 4.0.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.
@@ -340,7 +340,7 @@ export default {
340
340
  .dp-day-disabled {
341
341
  background: transparent !important;
342
342
  color: $dp-fg-subtle !important;
343
- &:before {
343
+ &::before {
344
344
  content: '';
345
345
  position: absolute;
346
346
  width: 100%;
@@ -217,19 +217,19 @@ export default {
217
217
  &__hand-min,
218
218
  &__hand-min-hover {
219
219
  @include abs;
220
- &:before,
221
- &:after {
220
+ &::before,
221
+ &::after {
222
222
  content: '';
223
223
  display: block;
224
224
  position: absolute;
225
225
  }
226
- &:before {
226
+ &::before {
227
227
  border-radius: 50%;
228
228
  top: 50%;
229
229
  left: 50%;
230
230
  transform: translate(-50%, -50%);
231
231
  }
232
- &:after {
232
+ &::after {
233
233
  bottom: 50%;
234
234
  left: 50%;
235
235
  transform: translateX(-50%);
@@ -239,12 +239,12 @@ export default {
239
239
  &__hand-hour-shadow,
240
240
  &__hand-hour-hover,
241
241
  &__hand-hour {
242
- &:before {
242
+ &::before {
243
243
  width: $hour-width + 4px;
244
244
  height: $hour-width + 4px;
245
245
  background-color: $hour-color;
246
246
  }
247
- &:after {
247
+ &::after {
248
248
  height: $hour-height;
249
249
  width: $hour-width;
250
250
  background-color: $hour-color;
@@ -253,20 +253,20 @@ export default {
253
253
  }
254
254
 
255
255
  &__hand-hour-hover {
256
- &:before,
257
- &:after {
256
+ &::before,
257
+ &::after {
258
258
  background-color: $hour-hover;
259
259
  }
260
260
  }
261
261
 
262
262
  &__hand-hour-shadow {
263
263
  margin-top: 3px;
264
- &:before {
264
+ &::before {
265
265
  background-color: rgba(black, 0.5);
266
266
  box-shadow: 0px 0px 4px black;
267
267
  opacity: 0.25;
268
268
  }
269
- &:after {
269
+ &::after {
270
270
  background-color: rgba(black, 0.5);
271
271
  box-shadow: 0px 0px 4px black;
272
272
  opacity: 0.25;
@@ -275,12 +275,12 @@ export default {
275
275
 
276
276
  &__hand-min,
277
277
  &__hand-min-hover {
278
- &:before {
278
+ &::before {
279
279
  width: $min-width + 2px;
280
280
  height: $min-width + 2px;
281
281
  background-color: $min-color;
282
282
  }
283
- &:after {
283
+ &::after {
284
284
  height: $min-height;
285
285
  width: $min-width;
286
286
  background-color: $min-color;
@@ -289,8 +289,8 @@ export default {
289
289
  }
290
290
 
291
291
  &__hand-min-hover {
292
- &:before,
293
- &:after {
292
+ &::before,
293
+ &::after {
294
294
  background-color: $min-hover;
295
295
  }
296
296
  }
@@ -426,7 +426,7 @@ export default {
426
426
 
427
427
  &__hour {
428
428
  text-align: right;
429
- &:before {
429
+ &::before {
430
430
  // derive a fixed size from this
431
431
  content: '10';
432
432
  color: transparent;
@@ -439,7 +439,7 @@ export default {
439
439
 
440
440
  &__min {
441
441
  text-align: center;
442
- &:before {
442
+ &::before {
443
443
  // derive a fixed size from this
444
444
  content: '00';
445
445
  color: transparent;
@@ -450,11 +450,11 @@ export default {
450
450
  }
451
451
  }
452
452
 
453
- &__hour:after {
453
+ &__hour::after {
454
454
  background-color: $hour-color;
455
455
  }
456
456
 
457
- &__min:after {
457
+ &__min::after {
458
458
  background-color: $min-color;
459
459
  }
460
460
 
@@ -47,7 +47,7 @@ export default {
47
47
 
48
48
  &:hover {
49
49
  @include bem(check) {
50
- &:after {
50
+ &::after {
51
51
  opacity: 0.5;
52
52
  }
53
53
  }
@@ -74,7 +74,7 @@ export default {
74
74
  }
75
75
 
76
76
  &--checked {
77
- &:after {
77
+ &::after {
78
78
  opacity: 1 !important;
79
79
  }
80
80
  }
@@ -139,7 +139,7 @@ export default {
139
139
  }
140
140
 
141
141
  &--resizing {
142
- &:after {
142
+ &::after {
143
143
  border: 1px dashed accent();
144
144
  border-radius: inherit;
145
145
  }
@@ -203,22 +203,25 @@ export default {
203
203
  if (check !== this.lethargyPrevCheck) {
204
204
  if (check) {
205
205
  if (check > 0) {
206
- this.previous();
206
+ this.previous(false);
207
207
  } else {
208
- this.next();
208
+ this.next(false);
209
209
  }
210
210
  }
211
211
  }
212
212
 
213
213
  this.lethargyPrevCheck = check;
214
+
215
+ e.stopPropagation();
216
+ e.preventDefault();
214
217
  },
215
218
 
216
- next() {
217
- this.selectOffsetSafe(1, this.loop);
219
+ next(loopOverride = null) {
220
+ this.selectOffsetSafe(1, loopOverride === null ? this.loop : loopOverride);
218
221
  },
219
222
 
220
- previous() {
221
- this.selectOffsetSafe(-1, this.loop);
223
+ previous(loopOverride = null) {
224
+ this.selectOffsetSafe(-1, loopOverride === null ? this.loop : loopOverride);
222
225
  },
223
226
 
224
227
  // returns the index of the item relative to the selected item, if looped
@@ -85,8 +85,8 @@ export default {
85
85
  }
86
86
 
87
87
  &__spinner,
88
- &__spinner:before,
89
- &__spinner:after {
88
+ &__spinner::before,
89
+ &__spinner::after {
90
90
  position: absolute;
91
91
  top: -2.5em;
92
92
  width: 2.5em;
@@ -103,17 +103,17 @@ export default {
103
103
  transform: translateZ(0);
104
104
  animation-delay: ($dur * -0.088888888);
105
105
  }
106
- &__spinner:before,
107
- &__spinner:after {
106
+ &__spinner::before,
107
+ &__spinner::after {
108
108
  content: '';
109
109
  position: absolute;
110
110
  top: 0;
111
111
  }
112
- &__spinner:before {
112
+ &__spinner::before {
113
113
  left: -5em;
114
114
  animation-delay: ($dur * -0.088888888 * 2);
115
115
  }
116
- &__spinner:after {
116
+ &__spinner::after {
117
117
  left: 5em;
118
118
  }
119
119
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thinkpixellab-public/px-vue",
3
- "version": "4.0.1",
3
+ "version": "4.0.3",
4
4
  "description": "General purpose Vue components and helpers that can be used across projects.",
5
5
  "author": "Pixel Lab",
6
6
  "license": "MIT",
@@ -16,7 +16,7 @@
16
16
  },
17
17
  "dependencies": {
18
18
  "@floating-ui/dom": "^1.1.1",
19
- "@thinkpixellab-public/px-styles": "^3.7.6",
19
+ "@thinkpixellab-public/px-styles": "^3.7.9",
20
20
  "@thinkpixellab-public/vue-resize-directive": "^1.2.2",
21
21
  "body-scroll-lock": "^4.0.0-beta.0",
22
22
  "mitt": "^3.0.0",
package/plugins/common.js CHANGED
@@ -48,7 +48,7 @@ export default {
48
48
 
49
49
  // $eventBus is only client-side but we want to avoid warnings about missing $eventBus
50
50
  // for inject called during setup on server-side.
51
- if (process.server) {
51
+ if (isServer()) {
52
52
  app.provide('$eventBus', null);
53
53
  }
54
54
  },