Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge 1cb4d281ec into 3eaef4a748

Browse Source
This commit is contained in:
MrYpma 2024-12-20 18:11:28 +02:00 committed by GitHub
commit dc0f3d2ded
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/www/src/content/docs/components/progress.md
View File

@ -44,6 +44,6 @@ import { Progress } from '@/components/ui/progress'
</script> </script>
<template> <template>
<Progress :model-value="33" /> <Progress :model-value="33" :max="50" />
</template> </template>
``` ```

3
apps/www/src/lib/registry/default/ui/progress/Progress.vue
View File

@ -11,6 +11,7 @@ const props = withDefaults(
defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(), defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),
{ {
modelValue: 0, modelValue: 0,
max: 100
}, },
) )
@ -33,7 +34,7 @@ const delegatedProps = computed(() => {
> >
<ProgressIndicator <ProgressIndicator
class="h-full w-full flex-1 bg-primary transition-all" class="h-full w-full flex-1 bg-primary transition-all"
:style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`" :style="`transform: translateX(-${100 - (props.modelValue ?? 0) * 100 / props.max}%);`"
/> />
</ProgressRoot> </ProgressRoot>
</template> </template>

3
apps/www/src/lib/registry/new-york/ui/progress/Progress.vue
View File

@ -11,6 +11,7 @@ const props = withDefaults(
defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(), defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),
{ {
modelValue: 0, modelValue: 0,
max: 100
}, },
) )
@ -33,7 +34,7 @@ const delegatedProps = computed(() => {
> >
<ProgressIndicator <ProgressIndicator
class="h-full w-full flex-1 bg-primary transition-all" class="h-full w-full flex-1 bg-primary transition-all"
:style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`" :style="`transform: translateX(-${100 - (props.modelValue ?? 0) * 100 / props.max}%);`"
/> />
</ProgressRoot> </ProgressRoot>
</template> </template>