mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 12:57:28 +00:00
refactor: tidy up vue components folder
This commit is contained in:
Valentin Kaelin
parent
5a0830b8d5
commit
9bf781aa55
28 changed files with 63 additions and 62 deletions
|
|
@ -12,8 +12,8 @@
|
|||
import { mapActions } from 'vuex'
|
||||
import Default from '@/layouts/Default.vue'
|
||||
import Home from '@/layouts/Home.vue'
|
||||
import NotificationsContainer from '@/components/NotificationsContainer.vue'
|
||||
import SVGContainer from '@/components/SVGContainer.vue'
|
||||
import NotificationsContainer from '@/components/Global/NotificationsContainer.vue'
|
||||
import SVGContainer from '@/components/Global/SVGContainer.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -3,16 +3,16 @@
|
|||
<!-- trigger -->
|
||||
<div
|
||||
ref="trigger"
|
||||
@mouseenter="showDropdown"
|
||||
@mouseenter="showTooltip"
|
||||
@mousemove="mousemove"
|
||||
@mouseleave="hideDropdown"
|
||||
@mouseleave="hideTooltip"
|
||||
:aria-expanded="isOpen"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<slot name="trigger"></slot>
|
||||
</div>
|
||||
|
||||
<!-- dropdown content -->
|
||||
<!-- tooltip content -->
|
||||
<div
|
||||
v-show="isOpen"
|
||||
ref="content"
|
||||
|
|
@ -58,7 +58,7 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
checkDropdownVisibility() {
|
||||
checkTooltipVisibility() {
|
||||
this.directionChecked = true
|
||||
const contentRect = this.$refs.content.getBoundingClientRect()
|
||||
const triggerRect = this.$refs.trigger.getBoundingClientRect()
|
||||
|
|
@ -74,7 +74,7 @@ export default {
|
|||
height() {
|
||||
return this.$refs.content ? this.$refs.content.clientHeight : 0
|
||||
},
|
||||
hideDropdown() {
|
||||
hideTooltip() {
|
||||
this.isOpen = false
|
||||
this.directionBottom = true
|
||||
this.directionRight = true
|
||||
|
|
@ -86,10 +86,10 @@ export default {
|
|||
|
||||
if (!this.directionChecked) {
|
||||
await this.$nextTick()
|
||||
this.checkDropdownVisibility()
|
||||
this.checkTooltipVisibility()
|
||||
}
|
||||
},
|
||||
showDropdown(event) {
|
||||
showTooltip(event) {
|
||||
this.left = event.clientX
|
||||
this.top = event.clientY
|
||||
this.isOpen = true
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
|
||||
<script>
|
||||
import { mapActions, mapState } from 'vuex'
|
||||
import SearchFormDropdown from '@/components/SearchFormDropdown.vue'
|
||||
import SearchFormDropdown from '@/components/Form/SearchFormDropdown.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import SearchFormDropdownPlayer from '@/components/SearchFormDropdownPlayer.vue'
|
||||
import SearchFormDropdownPlayer from '@/components/Form/SearchFormDropdownPlayer.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import PopupNotification from '@/components/PopupNotification.vue'
|
||||
import PopupNotification from '@/components/Global/PopupNotification.vue'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
import { mapState } from 'vuex'
|
||||
import DetailedMatchGlobalStats from '@/components/Match/DetailedMatchGlobalStats.vue'
|
||||
import DetailedMatchTeam from '@/components/Match/DetailedMatchTeam.vue'
|
||||
import SwitchToggle from '@/components/SwitchToggle.vue'
|
||||
import SwitchToggle from '@/components/Form/SwitchToggle.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div :class="allyTeam ? 'text-left' : 'text-right'">
|
||||
<div v-if="team.bans">
|
||||
<Dropdown
|
||||
<Tooltip
|
||||
v-for="ban in team.bans"
|
||||
:key="'ban-' + ban.pickTurn"
|
||||
:class="{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}"
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<div>{{ ban.champion.id ? ban.champion.name : 'No ban' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
:class="allyTeam ? 'text-left' : 'text-right flex-row-reverse'"
|
||||
|
|
@ -73,11 +73,11 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Dropdown from '@/components/Dropdown'
|
||||
import Tooltip from '@/components/Common/Tooltip.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Dropdown,
|
||||
Tooltip,
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="ml-1 flex flex-col justify-around">
|
||||
<Dropdown>
|
||||
<Tooltip>
|
||||
<template v-slot:trigger>
|
||||
<div
|
||||
:style="{backgroundImage: `url(${player.firstSum ? player.firstSum.icon : null})`}"
|
||||
|
|
@ -91,8 +91,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
<Dropdown>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<template v-slot:trigger>
|
||||
<div
|
||||
:style="{backgroundImage: `url(${player.secondSum ? player.secondSum.icon : null})`}"
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="ml-2px flex flex-col justify-around">
|
||||
<div
|
||||
|
|
@ -204,14 +204,14 @@
|
|||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import DotsLoader from '@/components/DotsLoader'
|
||||
import Dropdown from '@/components/Dropdown'
|
||||
import MatchItems from '@/components/Match/MatchItems'
|
||||
import DotsLoader from '@/components/Common/DotsLoader.vue'
|
||||
import Tooltip from '@/components/Common/Tooltip.vue'
|
||||
import MatchItems from '@/components/Match/MatchItems.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DotsLoader,
|
||||
Dropdown,
|
||||
Tooltip,
|
||||
MatchItems,
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@
|
|||
<div class="ml-auto flex flex-col items-center justify-center">
|
||||
<img class="w-5 h-5" src="@/assets/img/icons/Stopwatch.svg" alt="Stopwatch" />
|
||||
<div class="text-lg text-teal-400 font-medium">{{ data.time|secToTime }}</div>
|
||||
<Dropdown>
|
||||
<Tooltip>
|
||||
<template v-slot:trigger>
|
||||
<div class="text-xs text-white font-medium">{{ data.date }}</div>
|
||||
</template>
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
<div>{{ data.fullDate.time }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -151,15 +151,15 @@
|
|||
|
||||
<script>
|
||||
import { mapActions, mapState, mapGetters } from 'vuex'
|
||||
import Dropdown from '@/components/Dropdown'
|
||||
import DetailedMatch from '@/components/Match/DetailedMatch'
|
||||
import MatchItems from '@/components/Match/MatchItems'
|
||||
import Ripple from '@/components/Ripple.vue'
|
||||
import Tooltip from '@/components/Common/Tooltip.vue'
|
||||
import DetailedMatch from '@/components/Match/DetailedMatch.vue'
|
||||
import MatchItems from '@/components/Match/MatchItems.vue'
|
||||
import Ripple from '@/components/Common/Ripple.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DetailedMatch,
|
||||
Dropdown,
|
||||
Tooltip,
|
||||
MatchItems,
|
||||
Ripple,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div :class="oneRow ? 'ml-2 items-center' : 'items-2-rows flex-wrap'" class="flex">
|
||||
<Dropdown v-for="(item, index) in items" :key="index">
|
||||
<Tooltip v-for="(item, index) in items" :key="index">
|
||||
<template v-slot:trigger>
|
||||
<div
|
||||
:style="{backgroundImage: item ? `url('${item.image}')` : null}"
|
||||
|
|
@ -24,16 +24,16 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Dropdown from '@/components/Dropdown.vue'
|
||||
import Tooltip from '@/components/Common/Tooltip.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Dropdown
|
||||
Tooltip
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Ripple from '@/components/Ripple.vue'
|
||||
import Ripple from '@/components/Common/Ripple.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<use xlink:href="#layers" />
|
||||
</svg>
|
||||
<div class="absolute right-0 top-0 mt-3 mr-2">
|
||||
<Dropdown>
|
||||
<Tooltip>
|
||||
<template v-slot:trigger>
|
||||
<svg class="w-4 h-4 cursor-pointer">
|
||||
<use xlink:href="#info" />
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="stats.champion.length">
|
||||
|
|
@ -87,11 +87,11 @@
|
|||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import Dropdown from '@/components/Dropdown.vue'
|
||||
import Tooltip from '@/components/Common/Tooltip.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Dropdown,
|
||||
Tooltip,
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
>{{ mate.name }}</router-link>
|
||||
<div class="w-1/4">{{ mate.wins }} / {{ mate.losses }}</div>
|
||||
<div class="w-1/4">
|
||||
<Dropdown>
|
||||
<Tooltip>
|
||||
<template v-slot:trigger>
|
||||
<div class="bg-blue-900 rounded-full h-2 cursor-pointer">
|
||||
<div
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -64,11 +64,11 @@
|
|||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import Dropdown from '@/components/Dropdown.vue'
|
||||
import Tooltip from '@/components/Common/Tooltip.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Dropdown,
|
||||
Tooltip,
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<use xlink:href="#graph" />
|
||||
</svg>
|
||||
<div class="absolute right-0 top-0 mt-3 mr-2">
|
||||
<Dropdown>
|
||||
<Tooltip>
|
||||
<template v-slot:trigger>
|
||||
<svg class="w-4 h-4 cursor-pointer">
|
||||
<use xlink:href="#info" />
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center py-2">
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
:key="index"
|
||||
class="flex flex-col items-center w-1/5"
|
||||
>
|
||||
<Dropdown>
|
||||
<Tooltip>
|
||||
<template v-slot:trigger>
|
||||
<div class="flex flex-col justify-end w-2 h-12 bg-blue-900 rounded-full cursor-pointer">
|
||||
<div
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
>{{ calculateWinrate(role.wins, role.count).winrate|round }}%</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</Tooltip>
|
||||
<div
|
||||
:style="{backgroundImage: `url(${require('@/assets/img/roles/' + role.role + '.png')})`}"
|
||||
class="mt-1 w-4 h-4 bg-center bg-cover"
|
||||
|
|
@ -226,12 +226,12 @@
|
|||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import Dropdown from '@/components/Dropdown.vue'
|
||||
import Tooltip from '@/components/Common/Tooltip.vue'
|
||||
import { gameModes } from '@/data/data.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Dropdown,
|
||||
Tooltip,
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
class="ml-1 flex flex-col flex-wrap"
|
||||
style="width: calc(20px * 15); height: calc(20px * 7)"
|
||||
>
|
||||
<Dropdown v-for="(day, index) in gridDays.slice(indexFirstMonday)" :key="day.timestamp">
|
||||
<Tooltip v-for="(day, index) in gridDays.slice(indexFirstMonday)" :key="day.timestamp">
|
||||
<template v-slot:trigger>
|
||||
<div
|
||||
:class="[getCaseMargin(index), getCaseColor(day.matches)]"
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -55,11 +55,11 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Dropdown from '@/components/Dropdown.vue'
|
||||
import Tooltip from '@/components/Common/Tooltip.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Dropdown,
|
||||
Tooltip,
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@
|
|||
|
||||
<script>
|
||||
import { timeDifference } from '@/helpers/functions.js'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
color: {
|
||||
|
|
|
|||
|
|
@ -127,10 +127,10 @@
|
|||
<script>
|
||||
import { mapState, mapActions, mapGetters } from 'vuex'
|
||||
import FilterSeason from '@/components/Summoner/FilterSeason.vue'
|
||||
import LazyBackground from '@/components/LazyBackgroundImage.vue'
|
||||
import MainFooter from '@/components/MainFooter.vue'
|
||||
import LazyBackground from '@/components/Common/LazyBackgroundImage.vue'
|
||||
import MainFooter from '@/components/Layout/MainFooter.vue'
|
||||
import RecentActivity from '@/components/Summoner/RecentActivity.vue'
|
||||
import SearchForm from '@/components/SearchForm.vue'
|
||||
import SearchForm from '@/components/Form/SearchForm.vue'
|
||||
import HeaderLoader from '@/components/Summoner/HeaderLoader.vue'
|
||||
import SummonerRanked from '@/components/Summoner/SummonerRanked.vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import LazyBackground from '@/components/LazyBackgroundImage.vue'
|
||||
import SearchForm from '@/components/SearchForm.vue'
|
||||
import LazyBackground from '@/components/Common/LazyBackgroundImage.vue'
|
||||
import SearchForm from '@/components/Form/SearchForm.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<SummonerMates />
|
||||
</div>
|
||||
<div class="w-9/12">
|
||||
<div v-if="current" class="mb-4">
|
||||
<div v-if="current && current.participants" class="mb-4">
|
||||
<LiveMatch />
|
||||
</div>
|
||||
<div v-if="overview.matches.length">
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
<script>
|
||||
import { mapState, mapActions, mapGetters } from 'vuex'
|
||||
import LiveMatch from '@/components/Match/LiveMatch.vue'
|
||||
import LoadingButton from '@/components/LoadingButton.vue'
|
||||
import LoadingButton from '@/components/Form/LoadingButton.vue'
|
||||
import Match from '@/components/Match/Match.vue'
|
||||
import OverviewLoader from '@/components/Summoner/Overview/OverviewLoader.vue'
|
||||
import SummonerChampions from '@/components/Summoner/Overview/SummonerChampions.vue'
|
||||
|
|
|
|||
Loading…
Reference in a new issue