@bagelink/vue 1.15.96 → 1.15.98
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/dist/components/Swiper.vue.d.ts +1 -0
- package/dist/components/Swiper.vue.d.ts.map +1 -1
- package/dist/index.cjs +9 -9
- package/dist/index.mjs +613 -609
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/Swiper.vue +23 -10
package/package.json
CHANGED
|
@@ -74,6 +74,10 @@ const props = withDefaults(
|
|
|
74
74
|
// Pagination
|
|
75
75
|
pagination?: boolean | PaginationOptions
|
|
76
76
|
|
|
77
|
+
// Pill-style pagination: the active bullet stretches into a pill
|
|
78
|
+
// (animated width) instead of staying a circle. Pairs with `pagination`.
|
|
79
|
+
pillDots?: boolean
|
|
80
|
+
|
|
77
81
|
// Autoplay
|
|
78
82
|
autoplay?: boolean | AutoplayOptions
|
|
79
83
|
|
|
@@ -105,6 +109,7 @@ const props = withDefaults(
|
|
|
105
109
|
autoHeight: false,
|
|
106
110
|
navigation: undefined,
|
|
107
111
|
pagination: undefined,
|
|
112
|
+
pillDots: false,
|
|
108
113
|
autoplay: undefined,
|
|
109
114
|
coverflowEffect: undefined,
|
|
110
115
|
breakpoints: undefined,
|
|
@@ -416,7 +421,7 @@ defineExpose({
|
|
|
416
421
|
</script>
|
|
417
422
|
|
|
418
423
|
<template>
|
|
419
|
-
<div class="swi-wrap">
|
|
424
|
+
<div class="swi-wrap" :class="{ 'pill-dots': pillDots }">
|
|
420
425
|
<Swiper
|
|
421
426
|
v-bind="swiperVueProps" class="swiper" @swiper="onSwiper" @slide-change="updateNavigationState"
|
|
422
427
|
@reach-beginning="updateNavigationState" @reach-end="updateNavigationState"
|
|
@@ -459,11 +464,6 @@ defineExpose({
|
|
|
459
464
|
width: 100%;
|
|
460
465
|
}
|
|
461
466
|
|
|
462
|
-
:root {
|
|
463
|
-
--swiper-navigation-color: white;
|
|
464
|
-
--swiper-pagination-color: white;
|
|
465
|
-
}
|
|
466
|
-
|
|
467
467
|
/* Pagination: keep Swiper's own horizontal centering (left:50% + translateX),
|
|
468
468
|
just give the wrapper a sane bottom offset and consistent bullet sizing so
|
|
469
469
|
consumers don't need :deep() overrides to fix position. Override the bullet
|
|
@@ -471,15 +471,28 @@ width: 100%;
|
|
|
471
471
|
.swi-wrap .swiper-pagination-bullets {
|
|
472
472
|
bottom: 8px;
|
|
473
473
|
}
|
|
474
|
+
.artSwiper .swiper { padding-bottom: 3rem; }
|
|
475
|
+
|
|
474
476
|
.swi-wrap .swiper-pagination-bullet {
|
|
475
|
-
width: var(--swiper-pagination-bullet-width,
|
|
476
|
-
height: var(--swiper-pagination-bullet-height,
|
|
477
|
-
background: var(--swiper-pagination-bullet-inactive-color,
|
|
477
|
+
width: var(--swiper-pagination-bullet-width, 10px);
|
|
478
|
+
height: var(--swiper-pagination-bullet-height, 10px);
|
|
479
|
+
background: var(--swiper-pagination-bullet-inactive-color, var(--bgl-gray));
|
|
478
480
|
opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.6);
|
|
479
481
|
}
|
|
480
482
|
.swi-wrap .swiper-pagination-bullet-active {
|
|
481
483
|
opacity: 1;
|
|
482
|
-
background: var(--swiper-pagination-color,
|
|
484
|
+
background: var(--swiper-pagination-color, var(--bgl-primary));
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
/* Pill dots: the active bullet stretches into a pill (animated width). The
|
|
488
|
+
width it grows to is configurable via --swiper-pagination-bullet-active-width
|
|
489
|
+
(defaults to ~2.6x the bullet width). */
|
|
490
|
+
.swi-wrap.pill-dots .swiper-pagination-bullet {
|
|
491
|
+
border-radius: 50px;
|
|
492
|
+
transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out, background 0.3s ease-in-out;
|
|
493
|
+
}
|
|
494
|
+
.swi-wrap.pill-dots .swiper-pagination-bullet-active {
|
|
495
|
+
width: var(--swiper-pagination-bullet-active-width, 26px);
|
|
483
496
|
}
|
|
484
497
|
|
|
485
498
|
.swi-ctrl {
|