├── .gitignore
├── CHANGELOG.md
├── LICENCE
├── README.md
├── assets
    └── progress.gif
├── components
    └── Progress.vue
├── example.md
├── global-top.vue
├── package-lock.json
├── package.json
├── public
    └── logo.png
└── styles
    └── index.css


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | components.d.ts
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw*
23 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | ### 1.1.0 (2024-04-02)
  2 | 
  3 | ##### Chores
  4 | 
  5 | *  update deps ([1a2fd1f3](https://github.com/Smile-SA/slidev-component-progress/commit/1a2fd1f3dd7d36c7f0c52ad0203f08ada6e31bce))
  6 | *  update license ([4c6915cf](https://github.com/Smile-SA/slidev-component-progress/commit/4c6915cfc6a0d3d2a1a82bc471ed1e5dd7940bf0))
  7 | 
  8 | #### 1.0.3 (2023-04-20)
  9 | 
 10 | ##### Bug Fixes
 11 | 
 12 | *  vite 4.3 compatibility ([29f4203d](https://github.com/Smile-SA/slidev-component-progress/commit/29f4203d53e0fc2f3a4d902ff345dc99642608e4))
 13 | 
 14 | #### 1.0.2 (2023-02-10)
 15 | 
 16 | ##### Bug Fixes
 17 | 
 18 | *  size bug with new version of slidev ([c00498ab](https://github.com/Smile-SA/slidev-component-progress/commit/c00498abe9a95e0cb813736c74719ffa9084e787))
 19 | 
 20 | #### 1.0.1 (2023-01-10)
 21 | 
 22 | ##### Bug Fixes
 23 | 
 24 | *  error accessing  variable ([0245db59](https://github.com/Smile-SA/slidev-component-progress/commit/0245db59a6489fc055c5004b2daac2bc9a2ee6f5))
 25 | 
 26 | ## 1.0.0 (2022-05-20)
 27 | 
 28 | ##### Refactors
 29 | 
 30 | *  switch to use the new slidev addon system ([80952648](https://github.com/Smile-SA/slidev-component-progress/commit/809526483a685fc79ed0e405b012cdaa193a9647))
 31 | 
 32 | #### 0.5.1 (2022-05-06)
 33 | 
 34 | ##### Chores
 35 | 
 36 | *  update packages ([f4787518](https://github.com/Smile-SA/slidev-component-progress/commit/f478751851a78ab298d983963aa5b79d08e8e156))
 37 | 
 38 | ### 0.5.0 (2022-04-14)
 39 | 
 40 | ##### New Features
 41 | 
 42 | *  use slidev new Titles component ([7a04f1c1](https://github.com/Smile-SA/slidev-component-progress/commit/7a04f1c1047bf36ab0130e1e433737dfc25c9a04))
 43 | 
 44 | #### 0.4.2 (2022-02-28)
 45 | 
 46 | ##### Bug Fixes
 47 | 
 48 | *  error when tree is empty ([06caefec](https://github.com/Smile-SA/slidev-component-progress/commit/06caefec689a6e1094cbc084ec033aee91e7fb75))
 49 | 
 50 | #### 0.4.1 (2022-02-28)
 51 | 
 52 | ##### Bug Fixes
 53 | 
 54 | *  divide by zero ([0887a06c](https://github.com/Smile-SA/slidev-component-progress/commit/0887a06c9d4b4802dd6818eac23cfc4645f42552))
 55 | 
 56 | ### 0.4.0 (2022-02-28)
 57 | 
 58 | ##### New Features
 59 | 
 60 | *  add classe on circles, remove DOM elements, fix right margin ([a0b6fd13](https://github.com/Smile-SA/slidev-component-progress/commit/a0b6fd13dfde69d44a1fa26a948be4127e181d4a))
 61 | 
 62 | ##### Bug Fixes
 63 | 
 64 | *  calculate bar gradient width depending on the current slide ([55cd02f1](https://github.com/Smile-SA/slidev-component-progress/commit/55cd02f13c733b8a3af5390adfec4facbf821e8d))
 65 | 
 66 | #### 0.3.4 (2022-02-25)
 67 | 
 68 | ##### Bug Fixes
 69 | 
 70 | *  styles ([38b3dd80](https://github.com/Smile-SA/slidev-component-progress/commit/38b3dd8012af0080df9ac5f0553ef380ea6522d8))
 71 | 
 72 | #### 0.3.3 (2022-02-09)
 73 | 
 74 | ##### Bug Fixes
 75 | 
 76 | *  first slide progress ([ffe0c7c4](https://github.com/Smile-SA/slidev-component-progress/commit/ffe0c7c4cd47b7df0e2a2ada37cad8fc965083e7))
 77 | 
 78 | #### 0.3.2 (2022-02-09)
 79 | 
 80 | ##### Bug Fixes
 81 | 
 82 | *  add background for better readability ([79f47960](https://github.com/Smile-SA/slidev-component-progress/commit/79f47960e0fb2a873e0e0befdab744800c37aade))
 83 | 
 84 | #### 0.3.1 (2022-02-08)
 85 | 
 86 | ##### New Features
 87 | 
 88 | *  hide the component in print mode ([226240b5](https://github.com/Smile-SA/slidev-component-progress/commit/226240b53748996fbd0edaafcd34194af985f70e))
 89 | 
 90 | ### 0.3.0 (2022-02-04)
 91 | 
 92 | ##### New Features
 93 | 
 94 | *  add currentLayout as class variant ([e931ae5e](https://github.com/Smile-SA/slidev-component-progress/commit/e931ae5e56f77fda9a7391e215bb29a066a6a029))
 95 | *  add tooltips ([b5ca59cd](https://github.com/Smile-SA/slidev-component-progress/commit/b5ca59cd3bee9ea57cdf9e9eb4ba17674a36d807))
 96 | *  update styles ([b1be88b0](https://github.com/Smile-SA/slidev-component-progress/commit/b1be88b02cea30e79c54255c2af1b8d6c9987ab8))
 97 | 
 98 | ### 0.2.0 (2022-01-27)
 99 | 
100 | ##### Bug Fixes
101 | 
102 | *  level depth ([b6aee8a4](https://github.com/Smile-SA/slidev-component-progress/commit/b6aee8a43cd5e493a13f40932e8e0954ec16ff60))
103 | *  remove console.log ([06099782](https://github.com/Smile-SA/slidev-component-progress/commit/060997828ae44e2cbe9b516b45e3f60e14ad3c8d))
104 | 
105 | ##### Other Changes
106 | 
107 | *  add image examples in readme ([fc01f900](https://github.com/Smile-SA/slidev-component-progress/commit/fc01f90024397cf60fb4e9eaa8ba3ed48bf4bb7c))
108 | 
109 | ### 0.1.0 (2022-01-21)
110 | 
111 | ##### New Features
112 | 
113 | *  initialize progress component ([76281e9b](https://github.com/Smile-SA/slidev-component-progress/commit/76281e9bd6195c842a3b0b6095b9effb4376c1d8))
114 | 
115 | ##### Other Changes
116 | 
117 | *  add badge ([832b80ae](https://github.com/Smile-SA/slidev-component-progress/commit/832b80ae64c115e96bae67b598d99329ab97f0b9))
118 | 
119 | 


--------------------------------------------------------------------------------
/LICENCE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) Smile.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # slidev-component-progress
 2 | 
 3 | [![NPM version](https://img.shields.io/npm/v/slidev-component-progress?color=3AB9D4&label=)](https://www.npmjs.com/package/slidev-component-progress)
 4 | 
 5 | Progress component for Slidev `Slidev`.  
 6 | Shows a progress bar that represents the completed percentage of the presentation.
 7 | 
 8 | ![Progress demo](./assets/progress.gif)
 9 | 
10 | ## Installation
11 | 
12 | ```bash
13 | npm i slidev-component-progress
14 | ```
15 | 
16 | ## Configuration
17 | 
18 | Define this package into your slidev addons.
19 | 
20 | In your slides metadata (using frontmatter):
21 | ```
22 | ---
23 | addons:
24 |   - slidev-component-progress
25 | ---
26 | ```
27 | 
28 | Or in your `package.json`:
29 | ```json
30 | {
31 |   "slidev": {
32 |     "addons": [
33 |       "slidev-component-progress"
34 |     ]
35 |   }
36 | }
37 | ```
38 | 
39 | ## Usage
40 | 
41 | Create a `./global-top.vue` file in your `Slidev` project and use the component:
42 | ```vue
43 | <template>
44 |   <Progress level="2"/>
45 | </template>
46 | ```
47 | 
48 | ## Components
49 | 
50 | ### Progress
51 | 
52 | Component that displays the slides progress:
53 | ```vue
54 | <Progress level="2"/>
55 | ```
56 | 
57 | Parameters:
58 | 
59 | * `activeColor` (type: `string`, default: `'#ffffff'` (light) or `'#000000'` (dark)): The color of the active item
60 | * `barColor` (type: `string`): The color of the progress bar, by default, it will use the `--slidev-theme-primary` CSS variable
61 | * `height` (type: `string`): Height of the progress bar, by default it is the minimum possible height depending of the `level`
62 | * `level` (type: `number | string`, default: `1`): Title level to show in the progress bar with informations from the Table Of Content
63 | * `opacity`  (type: `number | string`, default: `0.5`): Opacity of the progress bar when not hovered
64 | * `position` (type: `'top' | bottom'`, default: `'top'`): Position of the progress bar in the slide
65 | * `strokeColor` (type: `string`, default: `'#000000'`(light) or `'#ffffff'` (dark)): The stroke color for the items
66 | * `thickness` (type: `string`, default: `2px`)
67 | * `transitionDuration` (type: `string`, default: `200ms`): CSS transition durations
68 | 


--------------------------------------------------------------------------------
/assets/progress.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Smile-SA/slidev-component-progress/27615f9efbe7d97f3617af1807a2f042f2bb2a99/assets/progress.gif


--------------------------------------------------------------------------------
/components/Progress.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { computed } from "vue";
  3 | import { useNav } from "@slidev/client"
  4 | 
  5 | import type { TocItem } from "@slidev/types";
  6 | 
  7 | import { slides } from "#slidev/slides";
  8 | import Titles from "#slidev/title-renderer";
  9 | 
 10 | const { currentPage, currentLayout, tocTree, total } = useNav()
 11 | 
 12 | const props = defineProps<{
 13 |   activeColor?: string;
 14 |   barColor?: string;
 15 |   height?: number;
 16 |   level?: number | string;
 17 |   opacity?: number | string;
 18 |   position?: "top" | "bottom";
 19 |   strokeColor?: string;
 20 |   thickness?: string;
 21 |   transitionDuration?: string;
 22 | }>();
 23 | 
 24 | const {
 25 |   activeColor,
 26 |   barColor,
 27 |   level = 1,
 28 |   opacity,
 29 |   strokeColor,
 30 |   thickness,
 31 |   transitionDuration,
 32 | } = props;
 33 | 
 34 | const tree = computed(() => getTree(tocTree.value));
 35 | 
 36 | const maxLevel = computed(() =>
 37 |   Math.max(...tree.value.map((item) => item.level))
 38 | );
 39 | 
 40 | const minHeight = computed(() => maxLevel.value * 4);
 41 | 
 42 | const height = computed(() => Math.max(props.height || 0, minHeight.value));
 43 | 
 44 | const gradientWidth = computed(() =>
 45 |   currentPage.value === 1
 46 |     ? "var(--margin)"
 47 |     : (1 / (currentPage.value - 1)) * 100 + "%"
 48 | );
 49 | 
 50 | const rightMargin = computed(() =>
 51 |   tree.value[tree.value.length - 1]
 52 |     ? (height.value / 2 - (tree.value[tree.value.length - 1].level - 1) * 2) * 2
 53 |     : 0
 54 | );
 55 | 
 56 | const cssVars = computed(() =>
 57 |   removeEmptyValues({
 58 |     "--active-color": activeColor,
 59 |     "--bar-color": barColor,
 60 |     "--height": height.value + "px",
 61 |     "--opacity": opacity,
 62 |     "--stroke-color": strokeColor,
 63 |     "--thickness": thickness,
 64 |     "--transition-duration": transitionDuration,
 65 |     "--right-margin": rightMargin.value + "px",
 66 |     display:
 67 |       window.location.search.indexOf("print") !== -1 ? "none" : undefined,
 68 |   })
 69 | );
 70 | 
 71 | const lastActiveRoute = computed(() =>
 72 |   getLastActiveRoute(
 73 |     currentPage.value ?? 0
 74 |   )
 75 | );
 76 | 
 77 | const previousRoutes = computed(() => getPreviousRoutes(lastActiveRoute.value));
 78 | 
 79 | function removeEmptyValues(obj: Record<string, any>): Record<string, any> {
 80 |   return Object.fromEntries(Object.entries(obj).filter(([, value]) => value));
 81 | }
 82 | 
 83 | function getTree(tree: TocItem[], lvl: number = 1): TocItem[] {
 84 |   if (lvl > Number(level)) {
 85 |     return [];
 86 |   }
 87 |   if (lvl === Number(level)) {
 88 |     return tree;
 89 |   }
 90 |   return tree.reduce((acc, item) => {
 91 |     acc.push(item);
 92 |     if (item.children) {
 93 |       acc = acc.concat(getTree(item.children, lvl + 1));
 94 |     }
 95 |     return acc;
 96 |   }, [] as TocItem[]);
 97 | }
 98 | 
 99 | function getRouteIndex(no: number): number {
100 |   return slides.value.findIndex((route) => route.no === no);
101 | }
102 | 
103 | function isRouteActive(item: TocItem, no: number): boolean {
104 |   if (item.no === no) {
105 |     return true;
106 |   }
107 |   if (item.children && item.children.length > 0) {
108 |     return item.children.some((child) => isRouteActive(child, no));
109 |   }
110 |   return false;
111 | }
112 | 
113 | function getLastActiveRoute(no: number): TocItem {
114 |   return tree.value.reduce(
115 |     (acc: TocItem, item: TocItem) => (isRouteActive(item, no) ? item : acc),
116 |     tree.value[0]
117 |   );
118 | }
119 | 
120 | function getPreviousRoutes(item: null | TocItem): TocItem[] {
121 |   if (!item) {
122 |     return [];
123 |   }
124 | 
125 |   const index = tree.value.indexOf(item);
126 |   return tree.value.reduce((acc, item) => {
127 |     if (tree.value.indexOf(item) < index) {
128 |       acc.push(item);
129 |     }
130 |     return acc;
131 |   }, [] as TocItem[]);
132 | }
133 | 
134 | function handleClick() {
135 |   (document.activeElement as HTMLAnchorElement).blur();
136 | }
137 | </script>
138 | 
139 | <style>
140 | .progress {
141 |   --bar-color: var(--slidev-theme-primary);
142 |   --opacity: 0.5;
143 |   --thickness: 2px;
144 |   --transition-duration: 200ms;
145 |   --line-height: 1.5em;
146 |   --margin: 2px;
147 |   --padding: 8px;
148 | 
149 |   position: absolute;
150 |   top: 0;
151 |   right: 0;
152 |   left: 0;
153 |   height: 0 !important;
154 |   padding-bottom: calc(var(--margin) * 2 + var(--height));
155 |   overflow: visible;
156 |   font-size: 80%;
157 |   line-height: var(--line-height);
158 |   background-color: inherit;
159 |   background-clip: content-box;
160 |   box-sizing: content-box;
161 |   -webkit-mask-image: linear-gradient(
162 |     to bottom,
163 |     rgba(0, 0, 0, 1),
164 |     rgba(0, 0, 0, 1)
165 |       calc(
166 |         var(--margin) + var(--height) + var(--padding) + var(--line-height) -
167 |           5px
168 |       ),
169 |     transparent
170 |       calc(
171 |         var(--margin) * 2 + var(--height) * 2 + var(--padding) +
172 |           var(--line-height)
173 |       )
174 |   );
175 |   mask-image: linear-gradient(
176 |     to bottom,
177 |     rgba(0, 0, 0, 1),
178 |     rgba(0, 0, 0, 1)
179 |       calc(
180 |         var(--margin) + var(--height) + var(--padding) + var(--line-height) -
181 |           5px
182 |       ),
183 |     transparent
184 |       calc(
185 |         var(--margin) * 2 + var(--height) * 2 + var(--padding) +
186 |           var(--line-height)
187 |       )
188 |   );
189 |   opacity: var(--opacity);
190 |   transition: opacity var(--transition-duration),
191 |     padding var(--transition-duration), height var(--transition-duration);
192 | 
193 |   &:hover {
194 |     padding: 0;
195 |     opacity: 1;
196 |     height: calc(
197 |       var(--margin) * 2 + var(--height) * 2 + var(--padding) +
198 |         var(--line-height)
199 |     ) !important;
200 |   }
201 | }
202 | 
203 | .progress--bottom {
204 |   top: initial;
205 |   bottom: 0;
206 | }
207 | 
208 | .progress--cover,
209 | .progress--end {
210 |   display: none;
211 | }
212 | 
213 | .progress__container {
214 |   position: absolute;
215 |   top: 0;
216 |   right: 0;
217 |   left: 0;
218 |   height: var(--height);
219 |   margin: var(--margin);
220 |   margin-right: calc(var(--margin) + var(--right-margin));
221 | }
222 | 
223 | .progress__bar {
224 |   position: absolute;
225 |   left: 0;
226 |   top: 50%;
227 |   transform: translateY(-50%);
228 |   height: var(--thickness);
229 |   margin: 0 calc((var(--margin) + var(--right-margin)) * -1) 0
230 |     calc(var(--margin) * -1);
231 |   background-color: var(--bar-color, #000000);
232 |   transition: width var(--transition-duration);
233 | }
234 | 
235 | .progress--first .progress__bar,
236 | .progress__bar--next {
237 |   -webkit-mask-image: linear-gradient(
238 |     to left,
239 |     transparent,
240 |     rgba(0, 0, 0, 1) calc(v-bind(gradientWidth) - var(--margin)),
241 |     rgba(0, 0, 0, 1) 100%
242 |   );
243 |   mask-image: linear-gradient(
244 |     to left,
245 |     transparent,
246 |     rgba(0, 0, 0, 1) calc(v-bind(gradientWidth) - var(--margin)),
247 |     rgba(0, 0, 0, 1) 100%
248 |   );
249 | }
250 | 
251 | .progress__active {
252 |   position: absolute;
253 |   top: 50%;
254 |   transform: translate(var(--height), -50%);
255 |   border-radius: 50%;
256 |   background-color: var(--bar-color, #000000);
257 | }
258 | 
259 | .dark .progress__bar,
260 | .dark .progress__active {
261 |   background-color: var(--bar-color, #ffffff);
262 | }
263 | 
264 | .progress__part {
265 |   position: absolute;
266 |   top: 0;
267 |   right: 0;
268 |   bottom: 0;
269 |   z-index: 1;
270 | }
271 | 
272 | .progress__link,
273 | .progress__step {
274 |   display: block;
275 |   width: var(--height);
276 | }
277 | 
278 | .progress__circle {
279 |   fill: transparent;
280 |   stroke: var(--stroke-color, #000000);
281 |   transition: fill var(--transition-duration);
282 | }
283 | 
284 | .dark .progress__circle {
285 |   stroke: var(--stroke-color, #ffffff);
286 | }
287 | 
288 | .progress__circle--active,
289 | .progress__circle--next {
290 |   fill: var(--active-color, #ffffff);
291 | }
292 | 
293 | .dark .progress__circle--active,
294 | .dark .progress__circle--next {
295 |   fill: var(--active-color, #000000);
296 | }
297 | 
298 | .progress__circle--prev {
299 |   fill: var(--bar-color, #000000);
300 | }
301 | 
302 | .dark .progress__circle--prev {
303 |   fill: var(--bar-color, #ffffff);
304 | }
305 | 
306 | .progress__link {
307 |   position: relative;
308 | 
309 |   &::before {
310 |     content: "";
311 |     position: absolute;
312 |     bottom: 0;
313 |     left: 50%;
314 |     width: 1px;
315 |     height: 5px;
316 |     background-color: var(--stroke-color, #000000);
317 |     transform: translate(-50%, 7px);
318 |     visibility: hidden;
319 |     opacity: 0;
320 |     transition: visibility var(--transition-duration),
321 |       opacity var(--transition-duration);
322 |   }
323 | }
324 | 
325 | .dark .progress__link::before {
326 |   background-color: var(--stroke-color, #ffffff);
327 | }
328 | 
329 | .progress__tooltip {
330 |   position: absolute;
331 |   width: max-content;
332 |   left: 50%;
333 |   bottom: 0;
334 |   transform: translate(-50%, 100%);
335 |   white-space: nowrap;
336 |   padding-top: var(--padding);
337 |   visibility: hidden;
338 |   opacity: 0;
339 |   transition: visibility var(--transition-duration),
340 |     opacity var(--transition-duration);
341 | }
342 | 
343 | .progress__link:hover::before,
344 | .progress__link:hover .progress__tooltip {
345 |   visibility: visible;
346 |   opacity: 1;
347 | }
348 | 
349 | .progress__link--start .progress__tooltip {
350 |   left: 0;
351 |   transform: translate(0, 100%);
352 | }
353 | 
354 | .progress__link--end .progress__tooltip {
355 |   left: 100%;
356 |   transform: translate(-100%, 100%);
357 | }
358 | </style>
359 | 
360 | <template>
361 |   <div
362 |     class="progress"
363 |     :class="{
364 |       'progress--bottom': position === 'bottom',
365 |       'progress--first': currentPage === 1,
366 |       [`progress--${currentLayout}`]: currentLayout,
367 |     }"
368 |     :style="cssVars"
369 |   >
370 |     <div class="progress__container">
371 |       <div
372 |         v-for="item in tree"
373 |         :key="item.path"
374 |         class="progress__part"
375 |         :style="{
376 |           width: (1 - getRouteIndex(item.no) / total) * 100 + '%',
377 |         }"
378 |       >
379 |         <RouterLink
380 |           class="progress__link"
381 |           :class="{
382 |             'progress__link--start':
383 |               item.no - 1 < total / 5,
384 |             'progress__link--end':
385 |               item.no - 1 > (4 * total) / 5,
386 |           }"
387 |           :to="item.path"
388 |           @click="handleClick()"
389 |         >
390 |           <svg class="progress__step" :width="height" :height="height">
391 |             <circle
392 |               v-for="level in maxLevel - item.level + 1"
393 |               :key="level"
394 |               class="progress__circle"
395 |               :class="{
396 |                 'progress__circle--active': item === lastActiveRoute,
397 |                 'progress__circle--prev': previousRoutes.includes(item),
398 |                 'progress__circle--next':
399 |                   !previousRoutes.includes(item) && item !== lastActiveRoute,
400 |               }"
401 |               :r="height / 2 - (item.level + level - 2) * 2"
402 |               :cx="height / 2"
403 |               :cy="height / 2"
404 |             />
405 |           </svg>
406 |           <div class="progress__tooltip">
407 |             <Titles :no="item.no" />
408 |           </div>
409 |         </RouterLink>
410 |       </div>
411 |       <div
412 |         class="progress__active"
413 |         :style="{
414 |           right: `calc(${
415 |             (1 - getRouteIndex(lastActiveRoute?.no) / total) * 100
416 |           }% + ${(lastActiveRoute?.level - 2) * 2}px)`,
417 |           width: `${height - (lastActiveRoute?.level - 1) * 4 + 4}px`,
418 |           height: `${height - (lastActiveRoute?.level - 1) * 4 + 4}px`,
419 |         }"
420 |       ></div>
421 |       <div
422 |         class="progress__bar"
423 |         :class="{
424 |           'progress__bar--next':
425 |             lastActiveRoute?.no < currentPage,
426 |         }"
427 |         :style="{
428 |           width: `calc(${
429 |             ((currentPage - 1) / total) * 100
430 |           }% + 6px)`,
431 |         }"
432 |       ></div>
433 |     </div>
434 |   </div>
435 | </template>
436 | 


--------------------------------------------------------------------------------
/example.md:
--------------------------------------------------------------------------------
   1 | ---
   2 | theme: default
   3 | layout: cover
   4 | hideInToc: true
   5 | ---
   6 | 
   7 | # Example slides
   8 | 
   9 | ---
  10 | layout: intro
  11 | class: bg-red-100
  12 | ---
  13 | 
  14 | # **Part 1**
  15 | 
  16 | ---
  17 | 
  18 | ## Part 1.1 ![Logo slidev](https://sli.dev/logo-title.png)
  19 | 
  20 | ---
  21 | 
  22 | ## `Part 1.2`
  23 | 
  24 | ---
  25 | 
  26 | ## Part 1.3 ![Logo Smile](/logo.png)
  27 | 
  28 | ---
  29 | 
  30 | ### Part 1.3.1
  31 | 
  32 | ---
  33 | 
  34 | ### Part 1.3.2
  35 | 
  36 | ---
  37 | 
  38 | ### Part 1.3.3
  39 | 
  40 | ---
  41 | layout: intro
  42 | class: bg-red-900 text-white dark
  43 | ---
  44 | 
  45 | # Part 2
  46 | 
  47 | ---
  48 | 
  49 | ## Part 2.1
  50 | 
  51 | ---
  52 | 
  53 | ## Part 2.2
  54 | 
  55 | ---
  56 | 
  57 | ## Part 2.3
  58 | 
  59 | ---
  60 | layout: intro
  61 | ---
  62 | 
  63 | # Part 3
  64 | 
  65 | ---
  66 | layout: intro
  67 | class: bg-red-100
  68 | ---
  69 | 
  70 | # Part 4
  71 | 
  72 | ---
  73 | 
  74 | ## Part 4.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
  75 | 
  76 | ---
  77 | 
  78 | ## Part 4.2
  79 | 
  80 | ---
  81 | 
  82 | ## Part 4.3
  83 | 
  84 | ---
  85 | 
  86 | ### Part 4.3.1
  87 | 
  88 | ---
  89 | 
  90 | ### Part 4.3.2
  91 | 
  92 | ---
  93 | 
  94 | ### Part 4.3.3
  95 | 
  96 | ---
  97 | layout: intro
  98 | class: bg-red-900 text-white dark
  99 | ---
 100 | 
 101 | # Part 5
 102 | 
 103 | ---
 104 | 
 105 | ## Part 5.1
 106 | 
 107 | ---
 108 | 
 109 | ## Part 5.2
 110 | 
 111 | ---
 112 | 
 113 | ## Part 5.3
 114 | 
 115 | ---
 116 | layout: intro
 117 | ---
 118 | 
 119 | # Part 6
 120 | 
 121 | ---
 122 | layout: intro
 123 | class: bg-red-100
 124 | ---
 125 | 
 126 | # Part 7
 127 | 
 128 | ---
 129 | 
 130 | ## Part 7.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
 131 | 
 132 | ---
 133 | 
 134 | ## Part 7.2
 135 | 
 136 | ---
 137 | 
 138 | ## Part 7.3
 139 | 
 140 | ---
 141 | 
 142 | ### Part 7.3.1
 143 | 
 144 | ---
 145 | 
 146 | ### Part 7.3.2
 147 | 
 148 | ---
 149 | 
 150 | ### Part 7.3.3
 151 | 
 152 | ---
 153 | layout: intro
 154 | class: bg-red-900 text-white dark
 155 | ---
 156 | 
 157 | # Part 8
 158 | 
 159 | ---
 160 | 
 161 | ## Part 8.1
 162 | 
 163 | ---
 164 | 
 165 | ## Part 8.2
 166 | 
 167 | ---
 168 | 
 169 | ## Part 9.3
 170 | 
 171 | ---
 172 | layout: intro
 173 | ---
 174 | 
 175 | # Part 9
 176 | 
 177 | ---
 178 | layout: intro
 179 | class: bg-red-100
 180 | ---
 181 | 
 182 | # Part 10
 183 | 
 184 | ---
 185 | 
 186 | ## Part 10.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
 187 | 
 188 | ---
 189 | 
 190 | ## Part 10.2
 191 | 
 192 | ---
 193 | 
 194 | ## Part 10.3
 195 | 
 196 | ---
 197 | 
 198 | ### Part 10.3.1
 199 | 
 200 | ---
 201 | 
 202 | ### Part 10.3.2
 203 | 
 204 | ---
 205 | 
 206 | ### Part 10.3.3
 207 | 
 208 | ---
 209 | layout: intro
 210 | class: bg-red-100
 211 | ---
 212 | 
 213 | # Part 11
 214 | 
 215 | ---
 216 | 
 217 | ## Part 11.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
 218 | 
 219 | ---
 220 | 
 221 | ## Part 11.2
 222 | 
 223 | ---
 224 | 
 225 | ## Part 11.3
 226 | 
 227 | ---
 228 | 
 229 | ### Part 11.3.1
 230 | 
 231 | ---
 232 | 
 233 | ### Part 11.3.2
 234 | 
 235 | ---
 236 | 
 237 | ### Part 11.3.3
 238 | 
 239 | ---
 240 | layout: intro
 241 | class: bg-red-900 text-white dark
 242 | ---
 243 | 
 244 | # Part 12
 245 | 
 246 | ---
 247 | 
 248 | ## Part 12.1
 249 | 
 250 | ---
 251 | 
 252 | ## Part 12.2
 253 | 
 254 | ---
 255 | 
 256 | ## Part 12.3
 257 | 
 258 | ---
 259 | layout: intro
 260 | ---
 261 | 
 262 | # Part 13
 263 | 
 264 | ---
 265 | layout: intro
 266 | class: bg-red-100
 267 | ---
 268 | 
 269 | # Part 14
 270 | 
 271 | ---
 272 | 
 273 | ## Part 14.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
 274 | 
 275 | ---
 276 | 
 277 | ## Part 14.2
 278 | 
 279 | ---
 280 | 
 281 | ## Part 14.3
 282 | 
 283 | ---
 284 | 
 285 | ### Part 14.3.1
 286 | 
 287 | ---
 288 | 
 289 | ### Part 14.3.2
 290 | 
 291 | ---
 292 | 
 293 | ### Part 14.3.3
 294 | 
 295 | ---
 296 | layout: intro
 297 | class: bg-red-900 text-white dark
 298 | ---
 299 | 
 300 | # Part 15
 301 | 
 302 | ---
 303 | 
 304 | ## Part 15.1
 305 | 
 306 | ---
 307 | 
 308 | ## Part 15.2
 309 | 
 310 | ---
 311 | 
 312 | ## Part 15.3
 313 | 
 314 | ---
 315 | layout: intro
 316 | ---
 317 | 
 318 | # Part 16
 319 | 
 320 | ---
 321 | layout: intro
 322 | class: bg-red-100
 323 | ---
 324 | 
 325 | # Part 17
 326 | 
 327 | ---
 328 | 
 329 | ## Part 17.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
 330 | 
 331 | ---
 332 | 
 333 | ## Part 17.2
 334 | 
 335 | ---
 336 | 
 337 | ## Part 17.3
 338 | 
 339 | ---
 340 | 
 341 | ### Part 17.3.1
 342 | 
 343 | ---
 344 | 
 345 | ### Part 17.3.2
 346 | 
 347 | ---
 348 | 
 349 | ### Part 17.3.3
 350 | 
 351 | ---
 352 | layout: intro
 353 | class: bg-red-900 text-white dark
 354 | ---
 355 | 
 356 | # Part 18
 357 | 
 358 | ---
 359 | 
 360 | ## Part 18.1
 361 | 
 362 | ---
 363 | 
 364 | ## Part 18.2
 365 | 
 366 | ---
 367 | 
 368 | ## Part 19.3
 369 | 
 370 | ---
 371 | layout: intro
 372 | ---
 373 | 
 374 | # Part 19
 375 | 
 376 | ---
 377 | layout: intro
 378 | class: bg-red-100
 379 | ---
 380 | 
 381 | # Part 20
 382 | 
 383 | ---
 384 | 
 385 | ## Part 20.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
 386 | 
 387 | ---
 388 | 
 389 | ## Part 20.2
 390 | 
 391 | ---
 392 | 
 393 | ## Part 20.3
 394 | 
 395 | ---
 396 | 
 397 | ### Part 20.3.1
 398 | 
 399 | ---
 400 | 
 401 | ### Part 20.3.2
 402 | 
 403 | ---
 404 | 
 405 | ### Part 20.3.3
 406 | 
 407 | ---
 408 | layout: intro
 409 | class: bg-red-100
 410 | ---
 411 | 
 412 | # Part 21
 413 | 
 414 | ---
 415 | 
 416 | ## Part 21.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
 417 | 
 418 | ---
 419 | 
 420 | ## Part 21.2
 421 | 
 422 | ---
 423 | 
 424 | ## Part 21.3
 425 | 
 426 | ---
 427 | 
 428 | ### Part 21.3.1
 429 | 
 430 | ---
 431 | 
 432 | ### Part 21.3.2
 433 | 
 434 | ---
 435 | 
 436 | ### Part 21.3.3
 437 | 
 438 | ---
 439 | layout: intro
 440 | class: bg-red-900 text-white dark
 441 | ---
 442 | 
 443 | # Part 22
 444 | 
 445 | ---
 446 | 
 447 | ## Part 22.1
 448 | 
 449 | ---
 450 | 
 451 | ## Part 22.2
 452 | 
 453 | ---
 454 | 
 455 | ## Part 22.3
 456 | 
 457 | ---
 458 | layout: intro
 459 | ---
 460 | 
 461 | # Part 23
 462 | 
 463 | ---
 464 | layout: intro
 465 | class: bg-red-100
 466 | ---
 467 | 
 468 | # Part 24
 469 | 
 470 | ---
 471 | 
 472 | ## Part 24.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
 473 | 
 474 | ---
 475 | 
 476 | ## Part 24.2
 477 | 
 478 | ---
 479 | 
 480 | ## Part 24.3
 481 | 
 482 | ---
 483 | 
 484 | ### Part 24.3.1
 485 | 
 486 | ---
 487 | 
 488 | ### Part 24.3.2
 489 | 
 490 | ---
 491 | 
 492 | ### Part 24.3.3
 493 | 
 494 | ---
 495 | layout: intro
 496 | class: bg-red-900 text-white dark
 497 | ---
 498 | 
 499 | # Part 25
 500 | 
 501 | ---
 502 | 
 503 | ## Part 25.1
 504 | 
 505 | ---
 506 | 
 507 | ## Part 25.2
 508 | 
 509 | ---
 510 | 
 511 | ## Part 25.3
 512 | 
 513 | ---
 514 | layout: intro
 515 | ---
 516 | 
 517 | # Part 26
 518 | 
 519 | ---
 520 | layout: intro
 521 | class: bg-red-100
 522 | ---
 523 | 
 524 | # Part 27
 525 | 
 526 | ---
 527 | 
 528 | ## Part 27.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
 529 | 
 530 | ---
 531 | 
 532 | ## Part 27.2
 533 | 
 534 | ---
 535 | 
 536 | ## Part 27.3
 537 | 
 538 | ---
 539 | 
 540 | ### Part 27.3.1
 541 | 
 542 | ---
 543 | 
 544 | ### Part 27.3.2
 545 | 
 546 | ---
 547 | 
 548 | ### Part 27.3.3
 549 | 
 550 | ---
 551 | layout: intro
 552 | class: bg-red-900 text-white dark
 553 | ---
 554 | 
 555 | # Part 28
 556 | 
 557 | ---
 558 | 
 559 | ## Part 28.1
 560 | 
 561 | ---
 562 | 
 563 | ## Part 28.2
 564 | 
 565 | ---
 566 | 
 567 | ## Part 29.3
 568 | 
 569 | ---
 570 | layout: intro
 571 | ---
 572 | 
 573 | # Part 29
 574 | 
 575 | ---
 576 | layout: intro
 577 | class: bg-red-100
 578 | ---
 579 | 
 580 | # Part 30
 581 | 
 582 | ---
 583 | 
 584 | ## Part 30.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
 585 | 
 586 | ---
 587 | 
 588 | ## Part 30.2
 589 | 
 590 | ---
 591 | 
 592 | ## Part 30.3
 593 | 
 594 | ---
 595 | 
 596 | ### Part 30.3.1
 597 | 
 598 | ---
 599 | 
 600 | ### Part 30.3.2
 601 | 
 602 | ---
 603 | 
 604 | ### Part 30.3.3
 605 | 
 606 | ---
 607 | layout: intro
 608 | class: bg-red-100
 609 | ---
 610 | 
 611 | # Part 31
 612 | 
 613 | ---
 614 | 
 615 | ## Part 31.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
 616 | 
 617 | ---
 618 | 
 619 | ## Part 31.2
 620 | 
 621 | ---
 622 | 
 623 | ## Part 31.3
 624 | 
 625 | ---
 626 | 
 627 | ### Part 31.3.1
 628 | 
 629 | ---
 630 | 
 631 | ### Part 31.3.2
 632 | 
 633 | ---
 634 | 
 635 | ### Part 31.3.3
 636 | 
 637 | ---
 638 | layout: intro
 639 | class: bg-red-900 text-white dark
 640 | ---
 641 | 
 642 | # Part 32
 643 | 
 644 | ---
 645 | 
 646 | ## Part 32.1
 647 | 
 648 | ---
 649 | 
 650 | ## Part 32.2
 651 | 
 652 | ---
 653 | 
 654 | ## Part 32.3
 655 | 
 656 | ---
 657 | layout: intro
 658 | ---
 659 | 
 660 | # Part 33
 661 | 
 662 | ---
 663 | layout: intro
 664 | class: bg-red-100
 665 | ---
 666 | 
 667 | # Part 34
 668 | 
 669 | ---
 670 | 
 671 | ## Part 34.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
 672 | 
 673 | ---
 674 | 
 675 | ## Part 34.2
 676 | 
 677 | ---
 678 | 
 679 | ## Part 34.3
 680 | 
 681 | ---
 682 | 
 683 | ### Part 34.3.1
 684 | 
 685 | ---
 686 | 
 687 | ### Part 34.3.2
 688 | 
 689 | ---
 690 | 
 691 | ### Part 34.3.3
 692 | 
 693 | ---
 694 | layout: intro
 695 | class: bg-red-900 text-white dark
 696 | ---
 697 | 
 698 | # Part 35
 699 | 
 700 | ---
 701 | 
 702 | ## Part 35.1
 703 | 
 704 | ---
 705 | 
 706 | ## Part 35.2
 707 | 
 708 | ---
 709 | 
 710 | ## Part 35.3
 711 | 
 712 | ---
 713 | layout: intro
 714 | ---
 715 | 
 716 | # Part 36
 717 | 
 718 | ---
 719 | layout: intro
 720 | class: bg-red-100
 721 | ---
 722 | 
 723 | # Part 37
 724 | 
 725 | ---
 726 | 
 727 | ## Part 37.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
 728 | 
 729 | ---
 730 | 
 731 | ## Part 37.2
 732 | 
 733 | ---
 734 | 
 735 | ## Part 37.3
 736 | 
 737 | ---
 738 | 
 739 | ### Part 37.3.1
 740 | 
 741 | ---
 742 | 
 743 | ### Part 37.3.2
 744 | 
 745 | ---
 746 | 
 747 | ### Part 37.3.3
 748 | 
 749 | ---
 750 | layout: intro
 751 | class: bg-red-900 text-white dark
 752 | ---
 753 | 
 754 | # Part 38
 755 | 
 756 | ---
 757 | 
 758 | ## Part 38.1
 759 | 
 760 | ---
 761 | 
 762 | ## Part 38.2
 763 | 
 764 | ---
 765 | 
 766 | ## Part 39.3
 767 | 
 768 | ---
 769 | layout: intro
 770 | ---
 771 | 
 772 | # Part 39
 773 | 
 774 | ---
 775 | layout: intro
 776 | class: bg-red-100
 777 | ---
 778 | 
 779 | # Part 40
 780 | 
 781 | ---
 782 | 
 783 | ## Part 40.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
 784 | 
 785 | ---
 786 | 
 787 | ## Part 40.2
 788 | 
 789 | ---
 790 | 
 791 | ## Part 40.3
 792 | 
 793 | ---
 794 | 
 795 | ### Part 40.3.1
 796 | 
 797 | ---
 798 | 
 799 | ### Part 40.3.2
 800 | 
 801 | ---
 802 | 
 803 | ### Part 40.3.3
 804 | 
 805 | ---
 806 | layout: intro
 807 | class: bg-red-100
 808 | ---
 809 | 
 810 | # Part 41
 811 | 
 812 | ---
 813 | 
 814 | ## Part 41.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
 815 | 
 816 | ---
 817 | 
 818 | ## Part 41.2
 819 | 
 820 | ---
 821 | 
 822 | ## Part 41.3
 823 | 
 824 | ---
 825 | 
 826 | ### Part 41.3.1
 827 | 
 828 | ---
 829 | 
 830 | ### Part 41.3.2
 831 | 
 832 | ---
 833 | 
 834 | ### Part 41.3.3
 835 | 
 836 | ---
 837 | layout: intro
 838 | class: bg-red-900 text-white dark
 839 | ---
 840 | 
 841 | # Part 42
 842 | 
 843 | ---
 844 | 
 845 | ## Part 42.1
 846 | 
 847 | ---
 848 | 
 849 | ## Part 2.2
 850 | 
 851 | ---
 852 | 
 853 | ## Part 42.3
 854 | 
 855 | ---
 856 | layout: intro
 857 | ---
 858 | 
 859 | # Part 43
 860 | 
 861 | ---
 862 | layout: intro
 863 | class: bg-red-100
 864 | ---
 865 | 
 866 | # Part 44
 867 | 
 868 | ---
 869 | 
 870 | ## Part 44.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
 871 | 
 872 | ---
 873 | 
 874 | ## Part 44.2
 875 | 
 876 | ---
 877 | 
 878 | ## Part 44.3
 879 | 
 880 | ---
 881 | 
 882 | ### Part 44.3.1
 883 | 
 884 | ---
 885 | 
 886 | ### Part 44.3.2
 887 | 
 888 | ---
 889 | 
 890 | ### Part 44.3.3
 891 | 
 892 | ---
 893 | layout: intro
 894 | class: bg-red-900 text-white dark
 895 | ---
 896 | 
 897 | # Part 45
 898 | 
 899 | ---
 900 | 
 901 | ## Part 45.1
 902 | 
 903 | ---
 904 | 
 905 | ## Part 45.2
 906 | 
 907 | ---
 908 | 
 909 | ## Part 45.3
 910 | 
 911 | ---
 912 | layout: intro
 913 | ---
 914 | 
 915 | # Part 46
 916 | 
 917 | ---
 918 | layout: intro
 919 | class: bg-red-100
 920 | ---
 921 | 
 922 | # Part 47
 923 | 
 924 | ---
 925 | 
 926 | ## Part 47.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
 927 | 
 928 | ---
 929 | 
 930 | ## Part 47.2
 931 | 
 932 | ---
 933 | 
 934 | ## Part 47.3
 935 | 
 936 | ---
 937 | 
 938 | ### Part 47.3.1
 939 | 
 940 | ---
 941 | 
 942 | ### Part 47.3.2
 943 | 
 944 | ---
 945 | 
 946 | ### Part 47.3.3
 947 | 
 948 | ---
 949 | layout: intro
 950 | class: bg-red-900 text-white dark
 951 | ---
 952 | 
 953 | # Part 48
 954 | 
 955 | ---
 956 | 
 957 | ## Part 48.1
 958 | 
 959 | ---
 960 | 
 961 | ## Part 48.2
 962 | 
 963 | ---
 964 | 
 965 | ## Part 49.3
 966 | 
 967 | ---
 968 | layout: intro
 969 | ---
 970 | 
 971 | # Part 49
 972 | 
 973 | ---
 974 | layout: intro
 975 | class: bg-red-100
 976 | ---
 977 | 
 978 | # Part 50
 979 | 
 980 | ---
 981 | 
 982 | ## Part 50.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
 983 | 
 984 | ---
 985 | 
 986 | ## Part 50.2
 987 | 
 988 | ---
 989 | 
 990 | ## Part 50.3
 991 | 
 992 | ---
 993 | 
 994 | ### Part 50.3.1
 995 | 
 996 | ---
 997 | 
 998 | ### Part 50.3.2
 999 | 
1000 | ---
1001 | 
1002 | ### Part 50.3.3
1003 | 
1004 | ---
1005 | layout: intro
1006 | class: bg-red-100
1007 | ---
1008 | 
1009 | # Part 51
1010 | 
1011 | ---
1012 | 
1013 | ## Part 51.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
1014 | 
1015 | ---
1016 | 
1017 | ## Part 51.2
1018 | 
1019 | ---
1020 | 
1021 | ## Part 51.3
1022 | 
1023 | ---
1024 | 
1025 | ### Part 51.3.1
1026 | 
1027 | ---
1028 | 
1029 | ### Part 51.3.2
1030 | 
1031 | ---
1032 | 
1033 | ### Part 51.3.3
1034 | 
1035 | ---
1036 | layout: intro
1037 | class: bg-red-900 text-white dark
1038 | ---
1039 | 
1040 | # Part 52
1041 | 
1042 | ---
1043 | 
1044 | ## Part 52.1
1045 | 
1046 | ---
1047 | 
1048 | ## Part 52.2
1049 | 
1050 | ---
1051 | 
1052 | ## Part 52.3
1053 | 
1054 | ---
1055 | layout: intro
1056 | ---
1057 | 
1058 | # Part 53
1059 | 
1060 | ---
1061 | layout: intro
1062 | class: bg-red-100
1063 | ---
1064 | 
1065 | # Part 54
1066 | 
1067 | ---
1068 | 
1069 | ## Part 54.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
1070 | 
1071 | ---
1072 | 
1073 | ## Part 54.2
1074 | 
1075 | ---
1076 | 
1077 | ## Part 54.3
1078 | 
1079 | ---
1080 | 
1081 | ### Part 54.3.1
1082 | 
1083 | ---
1084 | 
1085 | ### Part 54.3.2
1086 | 
1087 | ---
1088 | 
1089 | ### Part 54.3.3
1090 | 
1091 | ---
1092 | layout: intro
1093 | class: bg-red-900 text-white dark
1094 | ---
1095 | 
1096 | # Part 55
1097 | 
1098 | ---
1099 | 
1100 | ## Part 55.1
1101 | 
1102 | ---
1103 | 
1104 | ## Part 55.2
1105 | 
1106 | ---
1107 | 
1108 | ## Part 55.3
1109 | 
1110 | ---
1111 | layout: intro
1112 | ---
1113 | 
1114 | # Part 56
1115 | 
1116 | ---
1117 | layout: intro
1118 | class: bg-red-100
1119 | ---
1120 | 
1121 | # Part 57
1122 | 
1123 | ---
1124 | 
1125 | ## Part 57.1 <img alt="" src="https://sli.dev/logo-title.png" class="inline h-1em" />
1126 | 
1127 | ---
1128 | 
1129 | ## Part 57.2
1130 | 
1131 | ---
1132 | 
1133 | ## Part 57.3
1134 | 
1135 | ---
1136 | 
1137 | ### Part 57.3.1
1138 | 
1139 | ---
1140 | 
1141 | ### Part 57.3.2
1142 | 
1143 | ---
1144 | 
1145 | ### Part 57.3.3
1146 | 
1147 | ---
1148 | layout: intro
1149 | class: bg-red-900 text-white dark
1150 | ---
1151 | 
1152 | # Part 58
1153 | 
1154 | ---
1155 | 
1156 | ## Part 58.1
1157 | 
1158 | ---
1159 | 
1160 | ## Part 58.2
1161 | 
1162 | ---
1163 | 
1164 | ## Part 59.3
1165 | 
1166 | ---
1167 | layout: intro
1168 | ---
1169 | 
1170 | # Part 59
1171 | 


--------------------------------------------------------------------------------
/global-top.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <Progress bar-color="#ff8054" level="2"/>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "slidev-component-progress",
 3 |   "version": "1.1.0",
 4 |   "description": "Progress component for Slidev",
 5 |   "homepage": "https://github.com/Smile-SA/slidev-component-progress",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git@github.com:Smile-SA/slidev-component-progress.git"
 9 |   },
10 |   "bugs": {
11 |     "url": "https://github.com/Smile-SA/slidev-component-progress/issues"
12 |   },
13 |   "files": [
14 |     "components/*",
15 |     "styles/*"
16 |   ],
17 |   "scripts": {
18 |     "dev": "slidev example.md --open",
19 |     "release:major": "changelog -M && git add CHANGELOG.md && git commit -m 'feat(docs): updated CHANGELOG.md' && npm version major && git push origin && git push origin --tags",
20 |     "release:minor": "changelog -m && git add CHANGELOG.md && git commit -m 'feat(docs): updated CHANGELOG.md' && npm version minor && git push origin && git push origin --tags",
21 |     "release:patch": "changelog -p && git add CHANGELOG.md && git commit -m 'feat(docs): updated CHANGELOG.md' && npm version patch && git push origin && git push origin --tags"
22 |   },
23 |   "keywords": [
24 |     "vuejs",
25 |     "slidev",
26 |     "progress"
27 |   ],
28 |   "author": {
29 |     "name": "Tony Cabaye",
30 |     "email": "tonai59+github@gmail.com",
31 |     "url": "https://github.com/tonai"
32 |   },
33 |   "license": "MIT",
34 |   "engines": {
35 |     "node": ">=14.0.0",
36 |     "slidev": ">=0.48.0"
37 |   },
38 |   "peerDependencies": {
39 |     "vue": "^3.2.34",
40 |     "@slidev/client": "^0.48.0"
41 |   },
42 |   "devDependencies": {
43 |     "@slidev/cli": "^0.48.0",
44 |     "@slidev/theme-default": "latest",
45 |     "@vueuse/shared": "^8.5.0",
46 |     "generate-changelog": "^1.8.0",
47 |     "vue": "^3.2.34"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Smile-SA/slidev-component-progress/27615f9efbe7d97f3617af1807a2f042f2bb2a99/public/logo.png


--------------------------------------------------------------------------------
/styles/index.css:
--------------------------------------------------------------------------------
1 | h1, h2, h3, h4, h5, h6, .progress__tooltip {
2 |   img {
3 |     display: inline-block;
4 |     height: 1em;
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------