nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 08:12:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

vue components refactoring

Browse Source
This commit is contained in:
Čarodej
2022-04-13 16:19:10 +02:00
parent 6a4bfa8bfe
commit 338f8664b7
251 changed files with 1068 additions and 1943 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
resources/js/components/UI/ProgressChart/ProgressLine.vue Normal file
View File

@@ -0,0 +1,102 @@
<template>
<div>
<div class="mb-4 flex h-2.5 items-center rounded bg-light-300 dark:bg-2x-dark-foreground">
<div
v-for="(chart, i) in data"
:key="i"
:style="{
width: (chart.progress > 1 ? chart.progress : 0) + '%',
}"
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="[
{
'rounded-tl-lg rounded-bl-lg border-r-2 border-white dark:border-gray-800':
chart.progress < 100,
'rounded-lg border-none': chart.progress >= 100,
},
chart.color,
]"
class="chart-progress block h-2.5 w-full"
>
</span>
<!--Multiple line-->
<span
v-if="data.length > 1 && chart.progress > 0"
:class="[
{
'rounded-tl-lg rounded-bl-lg border-r-2 border-white dark:border-gray-800': i === 0,
'border-r-2 border-white dark:border-gray-800': i < data.length - 1,
'rounded-tr-lg rounded-br-lg': i === data.length - 1,
},
chart.color,
]"
class="chart-progress block h-2.5 w-full"
></span>
</div>
</div>
<footer class="flex w-full items-center overflow-x-auto">
<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>