mirror of
https://github.com/zammad/zammad
synced 2026-05-24 09:48:36 +00:00
15fd306513
Co-authored-by: Dominik Klein <dk@zammad.com> Co-authored-by: Benjamin Scharf <bs@zammad.com> Co-authored-by: Dusan Vuckovic <dv@zammad.com> Co-authored-by: Florian Liebe <fl@zammad.com> Co-authored-by: Joe Schroecker <js@zammad.com> Co-authored-by: Mantas Masalskis <mm@zammad.com>
44 lines
961 B
Vue
44 lines
961 B
Vue
<!-- Copyright (C) 2012-2026 Zammad Foundation, https://zammad-foundation.org/ -->
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
import { getProgressBarClasses } from './initializeProgressBarClasses.ts'
|
|
|
|
export interface Props {
|
|
value?: string
|
|
max?: string
|
|
size?: 'small' | 'normal'
|
|
variant?: 'primary' | 'inverted'
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
size: 'normal',
|
|
variant: 'primary',
|
|
})
|
|
|
|
const size = computed(() => {
|
|
switch (props.size) {
|
|
case 'small':
|
|
return 'h-1'
|
|
case 'normal':
|
|
default:
|
|
return 'h-2'
|
|
}
|
|
})
|
|
|
|
const variantClass = computed(() => `progress-bar--${props.variant}`)
|
|
|
|
const classes = getProgressBarClasses()
|
|
</script>
|
|
|
|
<template>
|
|
<progress
|
|
class="progress-bar w-full appearance-none overflow-hidden rounded-full"
|
|
:class="[size, variantClass, classes]"
|
|
tabindex="0"
|
|
:aria-label="$t('Indicating progress')"
|
|
:value="value"
|
|
:max="max"
|
|
/>
|
|
</template>
|