toggle-components-library 1.39.20-beta.2 → 1.39.20-beta.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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/percentagebar/TogglePercentageBar.vue +12 -2
  3. package/src/sass/includes/_as_percentagebar.scss +5 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "toggle-components-library",
3
- "version": "1.39.20-beta.2",
3
+ "version": "1.39.20-beta.3",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
package/src/components/percentagebar/TogglePercentageBar.vue CHANGED
@@ -30,7 +30,7 @@
30
30
  <div
31
31
  v-if="fillWidthPercent > 0"
32
32
  class="toggle-percentage-bar__track-fill"
33
- :style="{ width: fillWidthPercent + '%' }"
33
+ :style="trackFillStyle"
34
34
  >
35
35
  <div
36
36
  v-for="(row, visibleIndex) in visibleDisplayRows"
@@ -67,6 +67,9 @@ function segmentValue(entry) {
67
67
  return Number.isFinite(v) ? Math.max(0, v) : 0;
68
68
  }
69
69
 
70
+ // Per-segment expand length; delay is index * this so segments run left-to-right. Keep fallback in _as_percentagebar.scss in sync.
71
+ const SEGMENT_EXPAND_DURATION_S = 0.3;
72
+
70
73
  export default {
71
74
  name: 'TogglePercentageBar',
72
75
  props: {
@@ -135,6 +138,13 @@ export default {
135
138
  }
136
139
  return { backgroundColor: v };
137
140
  },
141
+ trackFillStyle() {
142
+ const style = { width: `${this.fillWidthPercent}%` };
143
+ if (this.animateSegments) {
144
+ style['--toggle-pct-bar-segment-duration'] = `${SEGMENT_EXPAND_DURATION_S}s`;
145
+ }
146
+ return style;
147
+ },
138
148
  normalizedValues() {
139
149
  if (this.total <= 0 || !this.segments.length) {
140
150
  return [];
@@ -221,7 +231,7 @@ export default {
221
231
  backgroundColor: row.colour
222
232
  };
223
233
  if (this.animateSegments) {
224
- style['--toggle-pct-bar-segment-delay'] = `${visibleIndex * 55}ms`;
234
+ style['--toggle-pct-bar-segment-index'] = visibleIndex;
225
235
  }
226
236
  return style;
227
237
  },
package/src/sass/includes/_as_percentagebar.scss CHANGED
@@ -129,8 +129,11 @@
129
129
  }
130
130
 
131
131
  .toggle-percentage-bar:not(.toggle-percentage-bar--static-segments) .toggle-percentage-bar__segment {
132
- animation: toggle-percentage-bar-segment-expand 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
133
- animation-delay: var(--toggle-pct-bar-segment-delay, 0ms);
132
+ animation: toggle-percentage-bar-segment-expand var(--toggle-pct-bar-segment-duration, 0.3s)
133
+ cubic-bezier(0.22, 1, 0.36, 1) both;
134
+ animation-delay: calc(
135
+ var(--toggle-pct-bar-segment-index, 0) * var(--toggle-pct-bar-segment-duration, 0.3s)
136
+ );
134
137
  }
135
138
 
136
139
  .toggle-percentage-bar--static-segments .toggle-percentage-bar__segment {