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

added prettier

Browse Source
This commit is contained in:
Čarodej
2022-02-01 12:21:38 +01:00
parent 5ae875233b
commit b38b532cbe
284 changed files with 25410 additions and 25338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
resources/js/components/UI/Bar.vue
View File

@@ -1,40 +1,30 @@
<template>
<div
class="2xl:w-3 lg:w-2 block lg:mr-2 relative cursor-pointer"
:style="{height: bar.percentage + '%'}"
@mouseover="isVisible = true"
@mouseleave="isVisible = false"
>
<div
v-if="isVisible"
class="absolute transform -translate-y-full -translate-x-1/2 -top-4 ml-1.5 dark:bg-white bg-gray-800 rounded-lg shadow-lg py-2 px-3 z-10"
>
<b class="dark:text-gray-800 text-white text-xs whitespace-nowrap block mb-2">
{{ bar.created_at }}
</b>
<div class="flex items-center pb-1">
<span class="w-3 h-3 block bg-theme mr-2 rounded"></span>
<b class="dark:text-gray-800 text-white text-xs whitespace-nowrap">
{{ bar.amount }}
</b>
</div>
<div class="w-5 overflow-hidden inline-block absolute -bottom-2.5 left-0 right-0 mx-auto">
<div class="h-3 w-3 dark:bg-white bg-gray-800 -rotate-45 transform origin-top-left"></div>
</div>
</div>
<span class="bg-theme w-full h-full block rounded-lg"></span>
</div>
<div class="relative block cursor-pointer lg:mr-2 lg:w-2 2xl:w-3" :style="{ height: bar.percentage + '%' }" @mouseover="isVisible = true" @mouseleave="isVisible = false">
<div v-if="isVisible" class="absolute -top-4 z-10 ml-1.5 -translate-y-full -translate-x-1/2 transform rounded-lg bg-gray-800 py-2 px-3 shadow-lg dark:bg-white">
<b class="mb-2 block whitespace-nowrap text-xs text-white dark:text-gray-800">
{{ bar.created_at }}
</b>
<div class="flex items-center pb-1">
<span class="bg-theme mr-2 block h-3 w-3 rounded"></span>
<b class="whitespace-nowrap text-xs text-white dark:text-gray-800">
{{ bar.amount }}
</b>
</div>
<div class="absolute -bottom-2.5 left-0 right-0 mx-auto inline-block w-5 overflow-hidden">
<div class="h-3 w-3 origin-top-left -rotate-45 transform bg-gray-800 dark:bg-white"></div>
</div>
</div>
<span class="bg-theme block h-full w-full rounded-lg"></span>
</div>
</template>
<script>
export default {
name: 'Bar',
props: [
'bar',
],
data() {
return {
isVisible: false,
}
},
}
</script>
export default {
name: 'Bar',
props: ['bar'],
data() {
return {
isVisible: false,
}
},
}
</script>

60
resources/js/components/UI/BarChart.vue
View File

@@ -1,38 +1,32 @@
<template>
<div class="lg:flex lg:items-end lg:justify-between grid grid-flow-col lg:gap-0 sm:gap-2 gap-1 items-end sm:h-28 h-20">
<!--Data bar-->
<Bar
v-for="(item, i) in data"
:key="i"
:bar="item"
/>
<div class="grid h-20 grid-flow-col items-end gap-1 sm:h-28 sm:gap-2 lg:flex lg:items-end lg:justify-between lg:gap-0">
<!--Data bar-->
<Bar v-for="(item, i) in data" :key="i" :bar="item" />
<!--Ghost bar-->
<span
v-if="ghostLength > 0"
class="2xl:w-3 lg:w-2 block lg:mr-2 relative cursor-pointer dark:bg-gray-800 bg-gray-100"
v-for="(ghost, i) in ghostLength"
:style="{height: '7%'}"
:key="i">
</span>
</div>
<!--Ghost bar-->
<span
v-if="ghostLength > 0"
class="relative block cursor-pointer bg-gray-100 dark:bg-gray-800 lg:mr-2 lg:w-2 2xl:w-3"
v-for="(ghost, i) in ghostLength"
:style="{ height: '7%' }"
:key="i"
>
</span>
</div>
</template>
<script>
import Bar from "./Bar";
import Bar from './Bar'
export default {
name: 'BarChart',
props: [
'color',
'data',
],
components: {
Bar,
},
computed: {
ghostLength() {
return 45 - this.data.length
}
},
}
</script>
export default {
name: 'BarChart',
props: ['color', 'data'],
components: {
Bar,
},
computed: {
ghostLength() {
return 45 - this.data.length
},
},
}
</script>