mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-05 18:23:48 +00:00
92 lines
2.2 KiB
Vue
92 lines
2.2 KiB
Vue
<template>
|
|
<div>
|
|
<div class="flex items-center mb-4 rounded dark:bg-2x-dark-foreground bg-light-300">
|
|
<div v-for="(chart, i) in data" :key="i" :style="{width: chart.progress + '%'}" class="chart-wrapper">
|
|
<!--<DotLabel class="label" :class="{'offset-top': chart.progress < 5}" :color="chart.color" :title="chart.value" />-->
|
|
|
|
<!--Only singe line-->
|
|
<span
|
|
v-if="data.length === 1"
|
|
:class="[{
|
|
'border-r-2 dark:border-gray-800 border-white rounded-tl-lg rounded-bl-lg': chart.progress < 100,
|
|
'border-none rounded-lg': chart.progress >= 100
|
|
}, chart.color]"
|
|
class="chart-progress w-full h-2.5 block"
|
|
>
|
|
|
|
</span>
|
|
|
|
<!--Multiple line-->
|
|
<span
|
|
v-if="data.length > 1"
|
|
:class="[{
|
|
'rounded-tl-lg rounded-bl-lg border-r-2 dark:border-gray-800 border-white': i === 0,
|
|
'border-r-2 dark:border-gray-800 border-white': i < (data.length - 1),
|
|
'rounded-tr-lg rounded-br-lg': i === (data.length - 1),
|
|
}, chart.color]"
|
|
class="chart-progress w-full h-2.5 block"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="flex items-center">
|
|
<DotLabel v-for="(chart, i) in data" :key="i" :color="chart.color" :title="chart.title" class="mr-5" />
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import DotLabel from "./DotLabel";
|
|
|
|
export default {
|
|
name: 'ProgressLine',
|
|
props: [
|
|
'data',
|
|
],
|
|
components: {
|
|
DotLabel,
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.chart-progress {
|
|
&.success {
|
|
background: #0ABB87;
|
|
box-shadow: 0 3px 10px rgba(#0ABB87, 0.5);
|
|
}
|
|
|
|
&.danger {
|
|
background: #fd397a;
|
|
box-shadow: 0 3px 10px rgba(#fd397a, 0.5);
|
|
}
|
|
|
|
&.warning {
|
|
background: #ffb822;
|
|
box-shadow: 0 3px 10px rgba(#ffb822, 0.5);
|
|
}
|
|
|
|
&.info {
|
|
background: #5578eb;
|
|
box-shadow: 0 3px 10px rgba(#5578eb, 0.5);
|
|
}
|
|
|
|
&.purple {
|
|
background: #9d66fe;
|
|
box-shadow: 0 3px 10px rgba(#9d66fe, 0.5);
|
|
}
|
|
|
|
&.secondary {
|
|
background: #e1e1ef;
|
|
box-shadow: 0 3px 10px rgba(#e1e1ef, 0.5);
|
|
}
|
|
}
|
|
|
|
.dark .chart-progress {
|
|
&.secondary {
|
|
background: #282A2F !important;
|
|
box-shadow: 0 3px 10px rgba(#282A2F, 0.5) !important;
|
|
}
|
|
}
|
|
</style>
|