LukeParke/skeleton
1
0
Fork 0
mirror of https://github.com/LukeHagar/skeleton.git synced 2025-12-06 12:47:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat/improve progress radial (#2093)

Browse Source 
Co-authored-by: endigo9740 <gundamx9740@gmail.com>
This commit is contained in:
Edrich Hans Chua
2023-10-07 01:05:03 +08:00
committed by GitHub
parent e71f935540
commit 7286219751
4 changed files with 74 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/little-dingos-repeat.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@skeletonlabs/skeleton": patch
---
feat: Added a `strokeLinecap` property to to Progress Radials, enabling rounded styling

9
packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte
View File

@@ -15,6 +15,8 @@
export let stroke = 40; // px
/** Sets the base font size. Scales responsively. */
export let font = 56; // px
/** Sets the stoke-linecap value */
export let strokeLinecap: 'butt' | 'round' | 'square' = 'butt';
// Props (styles)
/** Provide classes to set the width. */
@@ -37,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;
@@ -73,18 +75,19 @@
<!-- Draw SVG -->
<svg viewBox="0 0 {baseSize} {baseSize}" class="rounded-full" class:animate-spin={value === undefined}>
<!-- Track -->
<circle class="progress-radial-track {cBaseTrack} {track}" stroke-width={stroke} r={baseSize / 2} cx="50%" cy="50%" />
<circle class="progress-radial-track {cBaseTrack} {track}" stroke-width={stroke} r={radius} cx="50%" cy="50%" />
<!-- Meter -->
<circle
class="progress-radial-meter {cBaseMeter} {meter}"
stroke-width={stroke}
r={baseSize / 2}
r={radius}
cx="50%"
cy="50%"
style:stroke-dasharray="{circumference}
{circumference}"
style:stroke-dashoffset={dashoffset}
stroke-linecap={strokeLinecap}
/>
<!-- Center Text -->

3
packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.test.ts
View File

@@ -18,7 +18,8 @@ describe('ProgressRadial.svelte', () => {
meter: 'stroke-black dark:stroke-white',
color: 'fill-black dark:fill-white',
font: 56,
label: 'testProgressRadial1'
label: 'testProgressRadial1',
roundedLineCap: true
}
});
expect(getByTestId('progress-radial')).toBeTruthy();

70
sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte
View File

@@ -21,6 +21,7 @@
// Reactive
$: props = { value: 50, max: 100, step: 10 };
$: strokeProps = { value: 100, max: 400, step: 20 };
let strokeLinecap: 'butt' | 'round' | 'square' = 'butt';
</script>
<DocsShell {settings}>
@@ -45,47 +46,96 @@
<section class="space-y-4">
<h2 class="h2">Styling</h2>
<p>
Use the <code class="code">stroke</code> <code class="code">meter</code> or <code class="code">track</code>properties to style the
radial.
Use the <code class="code">meter</code>, or <code class="code">track</code>, <code class="code">stroke</code>,
<code class="code">strokeLinecap</code> properties to style the radial.
</p>
<DocsPreview background="neutral">
<svelte:fragment slot="preview">
<div class="w-full grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2 text-center">
<div class="p-4 space-y-2">
<ProgressRadial stroke={strokeProps.value} meter="stroke-primary-500" track="stroke-primary-500/30" width="w-full" />
<ProgressRadial
stroke={strokeProps.value}
meter="stroke-primary-500"
track="stroke-primary-500/30"
width="w-full"
{strokeLinecap}
value={50}
/>
<p>Primary</p>
</div>
<div class="p-4 space-y-2">
<ProgressRadial stroke={strokeProps.value} meter="stroke-secondary-500" track="stroke-secondary-500/30" width="w-full" />
<ProgressRadial
stroke={strokeProps.value}
meter="stroke-secondary-500"
track="stroke-secondary-500/30"
width="w-full"
{strokeLinecap}
value={50}
/>
<p>Secondary</p>
</div>
<div class="p-4 space-y-2">
<ProgressRadial stroke={strokeProps.value} meter="stroke-tertiary-500" track="stroke-tertiary-500/30" width="w-full" />
<ProgressRadial
stroke={strokeProps.value}
meter="stroke-tertiary-500"
track="stroke-tertiary-500/30"
width="w-full"
{strokeLinecap}
value={50}
/>
<p>Tertiary</p>
</div>
<div class="p-4 space-y-2">
<ProgressRadial stroke={strokeProps.value} meter="stroke-success-500" track="stroke-success-500/30" width="w-full" />
<ProgressRadial
stroke={strokeProps.value}
meter="stroke-success-500"
track="stroke-success-500/30"
width="w-full"
{strokeLinecap}
value={50}
/>
<p>Success</p>
</div>
<div class="p-4 space-y-2">
<ProgressRadial stroke={strokeProps.value} meter="stroke-warning-500" track="stroke-warning-500/30" width="w-full" />
<ProgressRadial
stroke={strokeProps.value}
meter="stroke-warning-500"
track="stroke-warning-500/30"
width="w-full"
{strokeLinecap}
value={50}
/>
<p>Warning</p>
</div>
<div class="p-4 space-y-2">
<ProgressRadial stroke={strokeProps.value} meter="stroke-error-500" track="stroke-error-500/30" width="w-full" />
<ProgressRadial
stroke={strokeProps.value}
meter="stroke-error-500"
track="stroke-error-500/30"
width="w-full"
{strokeLinecap}
value={50}
/>
<p>Error</p>
</div>
</div>
</svelte:fragment>
<svelte:fragment slot="footer">
<div class="w-48 mx-auto">
<div class="flex justify-between items-center gap-4">
<div class="w-60">
<input type="range" min="20" max={strokeProps.max} step={strokeProps.step} bind:value={strokeProps.value} />
</div>
<select bind:value={strokeLinecap} class="select w-auto">
{#each ['butt', 'round', 'square'] as v}
<option value={v}>{v}</option>
{/each}
</select>
</div>
</svelte:fragment>
<svelte:fragment slot="source">
<CodeBlock
language="html"
code={`<ProgressRadial ... stroke={${strokeProps.value}} meter="stroke-primary-500" track="stroke-primary-500/30" />`}
code={`<ProgressRadial ... stroke={${strokeProps.value}} meter="stroke-primary-500" track="stroke-primary-500/30" strokeLinecap={${strokeLinecap}} />`}
/>
</svelte:fragment>
</DocsPreview>