jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #96 from hirakei1203/add/khirano/add_new_progress_component

Browse Source 
Add progress bar component (Issue #68)
This commit is contained in:
Ilya Artamonov
2022-11-20 21:01:29 +03:00
committed by GitHub
parent a71aaa7dd9 7f2c03024c
commit 3f5a4e169f
12 changed files with 233 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.node-version Normal file
View File

@@ -0,0 +1 @@
16.6.2

2
docs/.vitepress/config.ts
View File

@@ -42,6 +42,7 @@ function getComponents() {
{ text: 'Button Group', link: '/components/buttonGroup/buttonGroup.md' },
{ text: 'Card', link: 'components/card/card.md' },
{ text: 'Dropdown', link: '/components/dropdown/dropdown.md' },
{ text: 'Progress', link: 'components/progress/progress.md' },
{ text: 'Spinner', link: '/components/spinner/spinner.md' },
{ text: 'Tabs', link: '/components/tabs/tabs.md' },
{ text: 'ListGroup', link: 'components/listGroup/listGroup.md' },
@@ -53,7 +54,6 @@ function getComponents() {
{ text: '- Carousel', link: 'components/carousel/carousel.md' },
{ text: '- Footer', link: 'components/footer/footer.md' },
{ text: '- Pagination', link: 'components/pagination/pagination.md' },
{ text: '- Progress', link: 'components/progress/progress.md' },
{ text: '- Rating', link: 'components/rating/rating.md' },
{ text: '- Sidebar', link: 'components/sidebar/sidebar.md' },
{ text: '- Table', link: 'components/table/table.md' },

15
docs/components/progress/examples/ProgressColorExample.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div class="vp-raw flex flex-col grid gap-4">
<Progress label="Default" progress="45"></Progress>
<Progress color="dark" label="Dark" progress="45"></Progress>
<Progress color="blue" label="Blue" progress="45"></Progress>
<Progress color="red" label="Red" progress="45"></Progress>
<Progress color="green" label="Green" progress="45"></Progress>
<Progress color="yellow" label="Yellow" progress="45"></Progress>
<Progress color="indigo" label="Indigo" progress="45"></Progress>
<Progress color="purple" label="Purple" progress="45"></Progress>
</div>
</template>
<script setup>
import { Progress } from '../../../../src/index'
</script>

2
docs/components/progress/examples/ProgressExample.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="vp-raw flex flex-col">
<Progress></Progress>
<Progress progress="45"></Progress>
</div>
</template>
<script setup>

6
docs/components/progress/examples/ProgressInsideLabelExample.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<Progress labelProgress="true" labelPosition="inside" size="lg" progress="45"></Progress>
</template>
<script setup>
import { Progress } from 'flowbite-vue'
</script>

6
docs/components/progress/examples/ProgressOutsideLabelExample.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<Progress labelProgress="true" labelPosition="outside" label="Flowbite Vue 3" progress="45"></Progress>
</template>
<script setup>
import { Progress } from 'flowbite-vue'
</script>

11
docs/components/progress/examples/ProgressSizeExample.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<div class="flex flex-col grid gap-4">
<Progress size="sm" label="Small" progress="45"></Progress>
<Progress size="md" label="Medium" progress="45"></Progress>
<Progress size="lg" label="Large" progress="45"></Progress>
<Progress size="xl" label="Extra Large" progress="45"></Progress>
</div>
</template>
<script setup>
import { Progress } from 'flowbite-vue'
</script>

89
docs/components/progress/progress.md
View File

@@ -1,15 +1,102 @@
<script setup>
import ProgressExample from './examples/ProgressExample.vue'
import ProgressSizeExample from './examples/ProgressSizeExample.vue'
import ProgressInsideLabelExample from './examples/ProgressInsideLabelExample.vue'
import ProgressOutsideLabelExample from './examples/ProgressOutsideLabelExample.vue'
import ProgressColorExample from './examples/ProgressColorExample.vue'
</script>
# Vue Progress Bar Component - Flowbite
## Default
```vue
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
<Progress></Progress>
<Progress progress="45"></Progress>
</template>
```
<ProgressExample />
## Sizes
You can also use different sizes by using various sizing.
```vue
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
<!-- small size -->
<Progress size="sm" label="Small" progress="45"></Progress>
<!-- medium size -->
<Progress size="md" label="Medium" progress="45"></Progress>
<!-- large size -->
<Progress size="lg" label="Large" progress="45"></Progress>
<!-- extra large size -->
<Progress size="xl" label="Extra Large" progress="45"></Progress>
</template>
```
<ProgressSizeExample />
## With label inside
Here is an example of using a progress bar with the label inside the bar.
```vue
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
<Progress labelProgress="true" labelPosition="inside" size="lg" progress="45"></Progress>
</template>
```
<ProgressInsideLabelExample />
## With label outside
And this is an example of using a progress bar outside the bar.
```vue
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
<Progress labelProgress="true" labelPosition="outside" label="Flowbite Vue 3" progress="45"></Progress>
</template>
```
<ProgressOutsideLabelExample />
## Colors
You can also apply color.
```vue
<script setup>
import { Progress } from 'flowbite-vue'
</script>
<template>
<!-- Default color -->
<Progress label="Default" progress="45"></Progress>
<!-- Dark -->
<Progress color="dark" label="Dark" progress="45"></Progress>
<!-- Blue -->
<Progress color="blue" label="Blue" progress="45"></Progress>
<!-- Red -->
<Progress color="red" label="Red" progress="45"></Progress>
<!-- Green -->
<Progress color="green" label="Green" progress="45"></Progress>
<!-- Yellow -->
<Progress color="yellow" label="Yellow" progress="45"></Progress>
<!-- Indigo -->
<Progress color="indigo" label="Indigo" progress="45"></Progress>
<!-- Purple -->
<Progress color="purple" label="Purple" progress="45"></Progress>
</template>
```
<ProgressColorExample />

1
src/components/Button/composables/useButtonClasses.ts
View File

@@ -122,7 +122,6 @@ const buttonOutlineGradientClasses: ButtonClassMap<ButtonDuotoneGradient> = {
},
}
const buttonSizeClasses: Record<ButtonSize, string> = {
xs: 'text-xs px-2 py-1',
sm: 'text-sm px-3 py-1.5',

30
src/components/Progress/Progress.vue
View File

@@ -1,23 +1,37 @@
<template>
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
<div>
<template v-if="label || (labelProgress && labelPosition === 'outside')">
<div class="flex justify-between mb-1">
<span class="text-base font-medium" :class="outsideLabelClasses">{{ label }}</span>
<span v-if="labelProgress && labelPosition === 'outside'" class="text-sm font-medium" :class="outsideLabelClasses">{{ progress }}%</span>
</div>
</template>
<div class="w-full bg-gray-200 rounded-full dark:bg-gray-700" :class="outerClasses">
<div class="rounded-full font-medium text-blue-100 text-center p-0.5" :class="innerClasses" :style="{ width: progress + '%' }">
<template v-if="labelProgress && labelPosition === 'inside'">
{{ progress }}%
</template>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed, toRefs } from 'vue'
import { toRefs } from 'vue'
import type { PropType } from 'vue'
import { useProgressClasses } from './composables/useProgressClasses'
import type { ProgressLabelPosition, ProgressSize, ProgressVariant } from './types'
const props = defineProps({
color: {
type: String, // 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple'
default: 'blue',
type: String as PropType<ProgressVariant>,
default: 'default',
},
label: {
type: String,
default: 'progressbar',
default: '',
},
labelPosition: {
type: String, // 'inside' | 'outside' | 'none'
type: String as PropType<ProgressLabelPosition>,
default: 'none',
},
labelProgress: {
@@ -34,4 +48,6 @@ const props = defineProps({
},
})
const { innerClasses, outerClasses, outsideLabelClasses } = useProgressClasses(toRefs(props))
</script>

78
src/components/Progress/composables/useProgressClasses.ts Normal file
View File

@@ -0,0 +1,78 @@
import type { Ref } from 'vue'
import { computed } from 'vue'
import classNames from 'classnames'
import type { ProgressVariant, ProgressSize, ProgressLabelPosition } from '../types'
const barColorClasses: Record<ProgressVariant, string> = {
default: 'bg-blue-600 dark:bg-blue-600',
blue: 'bg-blue-600 dark:bg-blue-600',
dark: 'bg-gray-600 dark:bg-gray-300',
green: 'bg-green-600 dark:bg-green-500',
red: 'bg-red-600 dark:bg-red-500',
yellow: 'bg-yellow-400',
indigo: 'bg-indigo-600 dark:bg-indigo-500',
purple: 'bg-purple-600 dark:bg-purple-500',
}
const outsideTextColorClasses: Record<ProgressVariant, string> = {
default: '',
blue: 'text-blue-700 dark:text-blue-500',
dark: 'dark:text-white',
green: 'text-green-700 dark:text-green-500',
red: 'text-red-700 dark:text-red-500',
yellow: 'text-yellow-700 dark:text-yellow-500',
indigo: 'text-indigo-700 dark:text-indigo-500',
purple: 'text-purple-700 dark:text-purple-500',
}
const progressSizeClasses: Record<ProgressSize, string> = {
sm: 'h-1.5 text-xs leading-none',
md: 'h-2.5 text-xs leading-none',
lg: 'h-4 text-sm leading-none',
xl: 'h-6 text-base leading-tight',
}
export type UseProgressClassesProps = {
color: Ref<ProgressVariant>
size: Ref<ProgressSize>
labelPosition: Ref<ProgressLabelPosition>
}
export function useProgressClasses(props: UseProgressClassesProps): { innerClasses: Ref<string>, outerClasses: Ref<string>, outsideLabelClasses: Ref<string>} {
const bindClasses = computed(() => {
let colorClass = ''
colorClass = barColorClasses[props.color.value]
let sizeClass = ''
sizeClass = progressSizeClasses[props.size.value]
return classNames(
colorClass,
sizeClass,
)
})
const outerClasses = computed(() => {
let outerSizeClass = ''
outerSizeClass = progressSizeClasses[props.size.value]
return classNames(
outerSizeClass
)
})
const outsideLabelClasses = computed(() => {
let outsideLabelClass = ''
outsideLabelClass = outsideTextColorClasses[props.color.value]
return classNames(
outsideLabelClass
)
})
return {
innerClasses: bindClasses,
outerClasses,
outsideLabelClasses
}
}

3
src/components/Progress/types.ts Normal file
View File

@@ -0,0 +1,3 @@
export type ProgressVariant = 'default' | 'dark' | 'green' | 'red' | 'yellow' | 'purple' | 'blue' | 'indigo'
export type ProgressSize = 'sm' | 'md' | 'lg' | 'xl'
export type ProgressLabelPosition = 'inside' | 'outside' | 'none'