feat: circle progress slot docs

.github/workflows/build.yml

@@ -11,14 +11,14 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: 16.15
+          node-version: 22
 
       - name: Install dependencies
         run: npm ci

.github/workflows/deploy.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 16.15
+          node-version: 22
 
       - name: Install dependencies
         run: npm ci

docs/.vuepress/client.js

@@ -41,6 +41,9 @@ import GapAnimation from "./theme/components/examples/gap/GapAnimation.vue";
 import Dash from "./theme/components/examples/dash/Dash.vue";
 import Dot from "./theme/components/examples/dot/Dot.vue";
 import "@iconscout/unicons/css/line.css";
+import PolygonProgress from "./theme/components/examples/slots/PolygonProgress.vue";
+import CustomSvgExamples from "./theme/components/examples/slots/CustomSvgExamples.vue";
+
 const components = [
   Slider,
   VEP,
@@ -82,6 +85,8 @@ const components = [
   EmptyColorFillGradient,
   EmptyColorFillGradientCrazy,
   EmptyColorFillRandom,
+  PolygonProgress,
+  CustomSvgExamples,
 ];
 
 export default defineClientConfig({

docs/.vuepress/config.js

@@ -1,6 +1,7 @@
-import { defaultTheme } from "vuepress";
+import { viteBundler } from "@vuepress/bundler-vite";
+import { defaultTheme } from "@vuepress/theme-default";
 import { searchPlugin } from "@vuepress/plugin-search";
-import { viteBundler } from "vuepress";
+import { prismjsPlugin } from "@vuepress/plugin-prismjs";
 
 const isDevMode = process.env.NODE_ENV === "development";
 const basePath = process.env.BASE_PATH || "/vue-ellipse-progress-docs/";
@@ -10,11 +11,6 @@ export default {
   title: "vue-ellipse-progress",
   description: "Beautiful and smooth circular progress bars for your Vue app",
   base: isDevMode ? "/" : basePath,
-  markdown: {
-    code: {
-      lineNumbers: false,
-    },
-  },
   bundler: viteBundler({
     viteOptions: {
       ssr: {
@@ -33,7 +29,7 @@ export default {
         link: "/guide/",
       },
     ],
-    sidebarDepth: 3,
+    sidebarDepth: 1,
     sidebar: {
       "/guide/": [
         {
@@ -174,7 +170,29 @@ export default {
                 },
               ],
             },
-            "/guide/slots.md",
+            {
+              isGroup: true,
+              text: "Slots",
+              collapsible: true,
+              children: [
+                {
+                  text: "default",
+                  link: "/guide/slots/default.md",
+                },
+                {
+                  text: "legend-caption",
+                  link: "/guide/slots/legend-caption.md",
+                },
+                {
+                  text: "circle-progress",
+                  link: "/guide/slots/circle-progress.md",
+                },
+                {
+                  text: "legend",
+                  link: "/guide/slots/legend.md",
+                },
+              ],
+            },
           ],
         },
         "/guide/compatibility.md",
@@ -188,5 +206,8 @@ export default {
     searchPlugin({
       isSearchable: (page) => page.path !== "/",
     }),
+    prismjsPlugin({
+      lineNumbers: false,
+    }),
   ],
 };

docs/.vuepress/styles/index.scss

@@ -4,12 +4,13 @@
 
 :root {
   scroll-behavior: smooth;
+  --content-width: 1000px;
 }
 * {
   box-sizing: border-box;
 }
 
-.custom-container {
+.hint-container {
   border-left: none !important;
   border-radius: 0.5rem;
   position: relative;

docs/.vuepress/styles/palette.scss

@@ -1,29 +1,83 @@
+// === colors ===
 :root {
-  // brand colors
-  --c-brand: #265cff;
-  --c-brand-light: #265cff;
+  // accent colors
+  --vp-c-accent: #265cff;
+  --vp-c-accent-bg: #265cff;
+  --vp-c-accent-hover: #265cff;
+  --vp-c-accent-text: var(--vp-c-white);
+  --vp-c-accent-soft: rgb(38 92 255 / 14%);
 
   // background colors
-  --c-bg: #ffffff;
-  --c-bg-light: #f3f4f5;
-  --c-bg-lighter: #eeeeee;
-  --c-bg-navbar: var(--c-bg);
-  --c-bg-sidebar: var(--c-bg);
-  --c-bg-arrow: #cccccc;
+  --vp-c-bg: #fff;
+  --vp-c-bg-alt: #f6f6f7;
+  --vp-c-bg-elv: #fff;
 
   // text colors
-  --c-text: #2c3e50;
-  --c-text-accent: var(--c-brand);
-  --c-text-light: #3a5169;
-  --c-text-lighter: #4e6e8e;
-  --c-text-lightest: #6a8bad;
-  --c-text-quote: #999999;
+  --vp-c-text: rgb(60 60 67);
+  --vp-c-text-mute: rgb(60 60 67 / 78%);
+  --vp-c-text-subtle: rgb(60 60 67 / 56%);
 
   // border colors
-  --c-border: #eaecef;
-  --c-border-dark: #dfe2e5;
+  --vp-c-gutter: #e2e2e3;
+  --vp-c-border: #c2c2c4;
+  --vp-c-border-hard: #b8b8ba;
+
+  // shadow colors
+  --vp-c-shadow: rgb(0 0 0 / 15%);
+
+  // control colors
+  --vp-c-control: rgb(142 150 170 / 10%);
+  --vp-c-control-hover: rgb(142 150 170 / 16%);
+  --vp-c-control-disabled: #eaeaea;
+
+  // layout colors
+  --vp-navbar-c-bg: var(--vp-c-bg);
+  --vp-sidebar-c-bg: var(--vp-c-bg);
+
+  // code group colors
+  --vp-c-code-tab-title: var(--code-c-text, rgb(255 255 255 / 90%));
+  --vp-c-code-tab-bg: var(--code-bg-color, var(--code-c-bg));
+  --vp-c-code-tab-active: var(--vp-c-accent);
+
+  // badge colors
+  --badge-c-tip-text: var(--vp-c-green-text);
+  --badge-c-tip-bg: var(--vp-c-green-soft);
+  --badge-c-warning-text: var(--vp-c-yellow-text);
+  --badge-c-warning-bg: var(--vp-c-yellow-soft);
+  --badge-c-danger-text: var(--vp-c-red-text);
+  --badge-c-danger-bg: var(--vp-c-red-soft);
+  --badge-c-important-text: var(--vp-c-purple-text);
+  --badge-c-important-bg: var(--vp-c-purple-soft);
+  --badge-c-info-text: var(--vp-c-indigo-text);
+  --badge-c-info-bg: var(--vp-c-indigo-soft);
+  --badge-c-note-text: var(--vp-c-grey-text);
+  --badge-c-note-bg: var(--vp-c-grey-soft);
+
+  // font vars
+  --font-family: "Quicksand", sans-serif;
+  --font-family-code: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+
+  // layout vars
+  --navbar-height: 3.6rem;
+  --navbar-padding-v: 0.7rem;
+  --navbar-padding-h: 1.5rem;
+  --sidebar-width: 20rem;
+  --sidebar-width-mobile: calc(var(--sidebar-width) * 0.82);
+  --content-width: 740px;
+  --homepage-width: 960px;
+
+  // header offset
+  --header-offset: var(--navbar-height);
+
+  // transition vars
+  --vp-t-color: 0.3s ease;
+  --vp-t-transform: 0.3s ease;
 
-  // custom container colors
+  // external-link-icon
+  --external-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z'/%3E%3C/svg%3E");
+  --external-link-c-icon: var(--vp-c-text-mute);
+
+  // hint container colors
   --c-tip: #42b983;
   --c-tip-bg: var(--c-bg-light);
   --c-tip-title: var(--c-text);
@@ -40,110 +94,39 @@
   --c-danger-text: #660000;
   --c-danger-text-accent: var(--c-text);
   --c-details-bg: #eeeeee;
-
-  // badge component colors
-  --c-badge-tip: var(--c-tip);
-  --c-badge-warning: var(--c-warning);
-  --c-badge-danger: var(--c-danger);
-
-  // code blocks vars
-  --code-bg-color: #282c34;
-  --code-hl-bg-color: rgba(0, 0, 0, 0.66);
-  --code-ln-color: #9e9e9e;
-  --code-ln-wrapper-width: 3.5rem;
-
-  // font vars
-  --font-family: "Quicksand", sans-serif;
-  --font-family-code: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
-
-  // layout vars
-  --navbar-height: 3.6rem;
-  --navbar-padding-v: 0.7rem;
-  --navbar-padding-h: 1.5rem;
-  --sidebar-width: 20rem;
-  --sidebar-width-mobile: calc(var(--sidebar-width) * 0.82);
-  --content-width: 1040px;
-  --homepage-width: 960px;
-}
-
-// plugin-back-to-top
-.back-to-top {
-  --back-to-top-color: var(--c-brand);
-  --back-to-top-color-hover: var(--c-brand-light);
-}
-
-// plugin-docsearch
-.DocSearch {
-  --docsearch-primary-color: var(--c-brand);
-  --docsearch-text-color: var(--c-text);
-  --docsearch-highlight-color: var(--c-brand);
-  --docsearch-muted-color: var(--c-text-quote);
-  --docsearch-container-background: rgba(9, 10, 17, 0.8);
-  --docsearch-modal-background: var(--c-bg-light);
-  --docsearch-searchbox-background: var(--c-bg-lighter);
-  --docsearch-searchbox-focus-background: var(--c-bg);
-  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--c-brand);
-  --docsearch-hit-color: var(--c-text-light);
-  --docsearch-hit-active-color: var(--c-bg);
-  --docsearch-hit-background: var(--c-bg);
-  --docsearch-hit-shadow: 0 1px 3px 0 var(--c-border-dark);
-  --docsearch-footer-background: var(--c-bg);
-}
-
-// plugin-medium-zoom
-.medium-zoom-overlay {
-  --medium-zoom-bg-color: var(--c-bg);
 }
 
-// plugin-nprogress
-#nprogress {
-  --nprogress-color: var(--c-brand);
-}
-
-// plugin-pwa-popup
-.pwa-popup {
-  --pwa-popup-text-color: var(--c-text);
-  --pwa-popup-bg-color: var(--c-bg);
-  --pwa-popup-border-color: var(--c-brand);
-  --pwa-popup-shadow: 0 4px 16px var(--c-brand);
-  --pwa-popup-btn-text-color: var(--c-bg);
-  --pwa-popup-btn-bg-color: var(--c-brand);
-  --pwa-popup-btn-hover-bg-color: var(--c-brand-light);
-}
-
-// plugin-search
-.search-box {
-  --search-bg-color: var(--c-bg);
-  --search-accent-color: var(--c-brand);
-  --search-text-color: var(--c-text);
-  --search-border-color: var(--c-border);
-
-  --search-item-text-color: var(--c-text-lighter);
-  --search-item-focus-bg-color: var(--c-bg-light);
-}
-
-//DARK THEME
-html.dark {
+[data-theme='dark'] {
   // brand colors
-  --c-brand: #265cff;
-  --c-brand-light: #265cff;
+  --vp-c-accent: #265cff;
+  --vp-c-accent-bg: #265cff;
+  --vp-c-accent-hover: #265cff;
+  --vp-c-accent-soft: rgb(38 92 255 / 14%);
 
   // background colors
-  --c-bg: #22272e;
-  --c-bg-light: #2b313a;
-  --c-bg-lighter: #262c34;
+  --vp-c-bg: #1b1b1f;
+  --vp-c-bg-alt: #161618;
+  --vp-c-bg-elv: #202127;
 
   // text colors
-  --c-text: #adbac7;
-  --c-text-light: #96a7b7;
-  --c-text-lighter: #8b9eb0;
-  --c-text-lightest: #8094a8;
+  --vp-c-text: rgb(235 235 245 / 86%);
+  --vp-c-text-mute: rgb(235 235 245 / 60%);
+  --vp-c-text-subtle: rgb(235 235 245 / 38%);
 
   // border colors
-  --c-border: #3e4c5a;
-  --c-border-dark: #34404c;
+  --vp-c-gutter: #000;
+  --vp-c-border: #3c3f44;
+  --vp-c-border-hard: #45484e;
+
+  // shadow color
+  --vp-c-shadow: rgb(0 0 0 / 30%);
+
+  // control colors
+  --vp-c-control: rgb(101 117 133 / 12%);
+  --vp-c-control-hover: rgb(101 117 133 / 18%);
+  --vp-c-control-disabled: #363636;
 
-  // custom container colors
+  // hint container colors
   --c-tip: #318a62;
   --c-warning: #ceab00;
   --c-warning-bg: #434131;
@@ -154,18 +137,4 @@ html.dark {
   --c-danger-title: #940000;
   --c-danger-text: #3a0000;
   --c-details-bg: #323843;
-
-  // code blocks vars
-  --code-hl-bg-color: #363b46;
-}
-
-// plugin-docsearch
-html.dark .DocSearch {
-  --docsearch-logo-color: var(--c-text);
-  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
-  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
-    0 2px 2px 0 rgba(3, 4, 9, 0.3);
-  --docsearch-key-gradient: linear-gradient(-225deg, #444950, #1c1e21);
-  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
-    0 -4px 8px 0 rgba(0, 0, 0, 0.2);
 }

docs/.vuepress/theme/components/Base/CardLink.vue

@@ -35,7 +35,7 @@ export default {
   // padding: 14px;
   .card-link-content {
     font-size: 1rem;
-    color: var(--c-text-lighter);
+    color: var(--vp-c-text);
   }
 }
 .card-link-title {