From 5f1473899a16dac9905f6e0150b591822a54da0f Mon Sep 17 00:00:00 2001 From: Edrich Chua Date: Sun, 1 Oct 2023 16:38:06 +0800 Subject: [PATCH 01/10] feat: add roundedLineCap property --- .../src/lib/components/ProgressRadial/ProgressRadial.svelte | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte b/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte index 91fffcdba..09f283a57 100644 --- a/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte +++ b/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte @@ -15,6 +15,8 @@ export let stroke = 40; // px /** Sets the base font size. Scales responsively. */ export let font = 56; // px + /** Sets whether the stoke-linecap of the radial is rounded or not */ + export let roundedLineCap: boolean = false; // Props (styles) /** Provide classes to set the width. */ @@ -85,6 +87,7 @@ style:stroke-dasharray="{circumference} {circumference}" style:stroke-dashoffset={dashoffset} + stroke-linecap={roundedLineCap ? 'round' : 'butt'} /> From aa5d65e77302808c54186c3e5dc6fecc5ae1cb95 Mon Sep 17 00:00:00 2001 From: Edrich Chua Date: Sun, 1 Oct 2023 16:39:37 +0800 Subject: [PATCH 02/10] fix: offset radius of progress radial meter --- .../src/lib/components/ProgressRadial/ProgressRadial.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte b/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte index 09f283a57..0923ef6d4 100644 --- a/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte +++ b/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte @@ -75,13 +75,13 @@ - +

Styling

- Use the stroke meter or trackproperties to style the + Use the stroke meter track or roundedLineCap properties to style the radial.

- +

Primary

- +

Secondary

- +

Tertiary

- +

Success

- +

Warning

- +

Error

 -
+
+ Rounded
`} + code={``} /> From 9affbdce7e2b891bbab2f15e6537a2febec4a575 Mon Sep 17 00:00:00 2001 From: Edrich Chua Date: Sun, 1 Oct 2023 17:05:48 +0800 Subject: [PATCH 05/10] chore: run format --- .../ProgressRadial/ProgressRadial.test.ts | 2 +- .../components/progress-radials/+page.svelte | 58 ++++++++++++++++--- 2 files changed, 51 insertions(+), 9 deletions(-) diff --git a/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.test.ts b/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.test.ts index 7b6f62954..cec95add4 100644 --- a/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.test.ts +++ b/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.test.ts @@ -19,7 +19,7 @@ describe('ProgressRadial.svelte', () => { color: 'fill-black dark:fill-white', font: 56, label: 'testProgressRadial1', - roundedLineCap: true, + roundedLineCap: true } }); expect(getByTestId('progress-radial')).toBeTruthy(); diff --git a/sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte index 3a6e92c38..d05ad1db9 100644 --- a/sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte +++ b/sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte @@ -45,34 +45,76 @@

Styling

- Use the stroke meter track or roundedLineCap properties to style the - radial. + Use the stroke meter track or + roundedLineCap properties to style the radial.

- +

Primary

- +

Secondary

- +

Tertiary

- +

Success

- +

Warning

- +

Error

From 60bcde07be807cf52248b3d267a6faced65c780f Mon Sep 17 00:00:00 2001 From: Edrich Chua Date: Sun, 1 Oct 2023 17:05:58 +0800 Subject: [PATCH 06/10] chore: run changeset --- .changeset/little-dingos-repeat.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/little-dingos-repeat.md diff --git a/.changeset/little-dingos-repeat.md b/.changeset/little-dingos-repeat.md new file mode 100644 index 000000000..7668280e7 --- /dev/null +++ b/.changeset/little-dingos-repeat.md @@ -0,0 +1,6 @@ +--- +"skeleton.dev": patch +"@skeletonlabs/skeleton": patch +--- + +add roundedLineCap prop to progress radial From 3438f46ae6d665a2ba81eba41297f580ae5d9c14 Mon Sep 17 00:00:00 2001 From: Edrich Chua Date: Sun, 1 Oct 2023 17:13:15 +0800 Subject: [PATCH 07/10] fix: add offset to the radius --- .../src/lib/components/ProgressRadial/ProgressRadial.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte b/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte index 0923ef6d4..99eb442b9 100644 --- a/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte +++ b/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte @@ -39,7 +39,7 @@ // Calculated Values const baseSize = 512; // px - const radius: number = baseSize / 2; + const radius: number = baseSize / 2 - stroke / 2; let circumference: number = radius; let dashoffset: number; @@ -75,13 +75,13 @@ - + diff --git a/sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte index d05ad1db9..b779e725a 100644 --- a/sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte +++ b/sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte @@ -3,7 +3,7 @@ import { DocsFeature, type DocsShellSettings } from '$lib/layouts/DocsShell/types'; import DocsPreview from '$lib/components/DocsPreview/DocsPreview.svelte'; // Components - import { ProgressRadial, CodeBlock, SlideToggle } from '@skeletonlabs/skeleton'; + import { ProgressRadial, CodeBlock } from '@skeletonlabs/skeleton'; // Sveld import sveldProgressRadial from '@skeletonlabs/skeleton/components/ProgressRadial/ProgressRadial.svelte?raw&sveld'; @@ -20,7 +20,7 @@ // Reactive $: props = { value: 50, max: 100, step: 10 }; - $: strokeProps = { value: 100, max: 400, step: 20, roundedLineCap: true }; + $: strokeProps = { value: 100, max: 400, step: 20, strokeLinecap: 'butt' }; @@ -45,8 +45,8 @@

Styling

- Use the stroke meter track or - roundedLineCap properties to style the radial. + Use the meter, or track, stroke, + strokeLinecap properties to style the radial.

@@ -57,7 +57,7 @@ meter="stroke-primary-500" track="stroke-primary-500/30" width="w-full" - roundedLineCap={strokeProps.roundedLineCap} + strokeLinecap={strokeProps.strokeLinecap} value={50} />

Primary

@@ -68,7 +68,7 @@ meter="stroke-secondary-500" track="stroke-secondary-500/30" width="w-full" - roundedLineCap={strokeProps.roundedLineCap} + strokeLinecap={strokeProps.strokeLinecap} value={50} />

Secondary

@@ -79,7 +79,7 @@ meter="stroke-tertiary-500" track="stroke-tertiary-500/30" width="w-full" - roundedLineCap={strokeProps.roundedLineCap} + strokeLinecap={strokeProps.strokeLinecap} value={50} />

Tertiary

@@ -90,7 +90,7 @@ meter="stroke-success-500" track="stroke-success-500/30" width="w-full" - roundedLineCap={strokeProps.roundedLineCap} + strokeLinecap={strokeProps.strokeLinecap} value={50} />

Success

@@ -101,7 +101,7 @@ meter="stroke-warning-500" track="stroke-warning-500/30" width="w-full" - roundedLineCap={strokeProps.roundedLineCap} + strokeLinecap={strokeProps.strokeLinecap} value={50} />

Warning

@@ -112,7 +112,7 @@ meter="stroke-error-500" track="stroke-error-500/30" width="w-full" - roundedLineCap={strokeProps.roundedLineCap} + strokeLinecap={strokeProps.strokeLinecap} value={50} />

Error

@@ -120,15 +120,21 @@
-
- - Rounded +
+
+ +
+
`} + code={``} /> From 313a4a7c2aa9d1f77961f2781377f5da7d26b905 Mon Sep 17 00:00:00 2001 From: endigo9740 Date: Fri, 6 Oct 2023 12:02:16 -0500 Subject: [PATCH 09/10] Resolve type error --- .../components/progress-radials/+page.svelte | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte index b779e725a..00e4363a0 100644 --- a/sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte +++ b/sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte @@ -21,6 +21,7 @@ // Reactive $: props = { value: 50, max: 100, step: 10 }; $: strokeProps = { value: 100, max: 400, step: 20, strokeLinecap: 'butt' }; + let strokeLinecap: 'butt' | 'round' | 'square' = 'butt'; @@ -57,7 +58,7 @@ meter="stroke-primary-500" track="stroke-primary-500/30" width="w-full" - strokeLinecap={strokeProps.strokeLinecap} + {strokeLinecap} value={50} />

Primary

@@ -68,7 +69,7 @@ meter="stroke-secondary-500" track="stroke-secondary-500/30" width="w-full" - strokeLinecap={strokeProps.strokeLinecap} + {strokeLinecap} value={50} />

Secondary

@@ -79,7 +80,7 @@ meter="stroke-tertiary-500" track="stroke-tertiary-500/30" width="w-full" - strokeLinecap={strokeProps.strokeLinecap} + {strokeLinecap} value={50} />

Tertiary

@@ -90,7 +91,7 @@ meter="stroke-success-500" track="stroke-success-500/30" width="w-full" - strokeLinecap={strokeProps.strokeLinecap} + {strokeLinecap} value={50} />

Success

@@ -101,7 +102,7 @@ meter="stroke-warning-500" track="stroke-warning-500/30" width="w-full" - strokeLinecap={strokeProps.strokeLinecap} + {strokeLinecap} value={50} />

Warning

@@ -112,7 +113,7 @@ meter="stroke-error-500" track="stroke-error-500/30" width="w-full" - strokeLinecap={strokeProps.strokeLinecap} + {strokeLinecap} value={50} />

Error

@@ -124,7 +125,7 @@
- {#each ['butt', 'round', 'square'] as v} {/each} @@ -134,7 +135,7 @@ `} + code={``} /> From 638b7c099555099e0314664b4d6af96625f07611 Mon Sep 17 00:00:00 2001 From: endigo9740 Date: Fri, 6 Oct 2023 12:02:36 -0500 Subject: [PATCH 10/10] ... --- .../src/routes/(inner)/components/progress-radials/+page.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte index 00e4363a0..d9b229f27 100644 --- a/sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte +++ b/sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte @@ -20,7 +20,7 @@ // Reactive $: props = { value: 50, max: 100, step: 10 }; - $: strokeProps = { value: 100, max: 400, step: 20, strokeLinecap: 'butt' }; + $: strokeProps = { value: 100, max: 400, step: 20 }; let strokeLinecap: 'butt' | 'round' | 'square' = 'butt';