chore(client): update dependencies and use new v-slot syntax

This commit is contained in:
Valentin Kaelin 2021-04-03 17:18:24 +02:00
parent 7315c177a4
commit f98238ebd0
13 changed files with 5366 additions and 3743 deletions

9013
client/package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -13,20 +13,20 @@
"vue": "^2.6.12", "vue": "^2.6.12",
"vue-content-loader": "^0.2.3", "vue-content-loader": "^0.2.3",
"vue-meta": "^2.4.0", "vue-meta": "^2.4.0",
"vue-plausible": "^1.1.3", "vue-plausible": "^1.1.4",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vue-sticky-sidebar": "^1.0.5", "vue-sticky-sidebar": "^1.0.5",
"vuex": "^3.6.2" "vuex": "^3.6.2"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/custom-forms": "^0.2.1", "@tailwindcss/custom-forms": "^0.2.1",
"@vue/cli-plugin-babel": "^3.12.1", "@vue/cli-plugin-babel": "^4.5.12",
"@vue/cli-plugin-eslint": "^3.12.1", "@vue/cli-plugin-eslint": "^4.5.12",
"@vue/cli-service": "^3.12.1", "@vue/cli-service": "^4.5.12",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"babel-plugin-transform-remove-console": "^6.9.4", "babel-plugin-transform-remove-console": "^6.9.4",
"eslint": "^5.16.0", "eslint": "^7.23.0",
"eslint-plugin-vue": "^5.2.3", "eslint-plugin-vue": "^7.8.0",
"tailwindcss": "^1.9.6", "tailwindcss": "^1.9.6",
"vue-template-compiler": "^2.6.12" "vue-template-compiler": "^2.6.12"
} }

View file

@ -7,7 +7,7 @@
:class="{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}" :class="{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}"
class="inline-block" class="inline-block"
> >
<template v-slot:trigger> <template #trigger>
<div <div
:class="[allyTeam ? 'ban-blue border-teal-500' : 'ban-red border-red-500']" :class="[allyTeam ? 'ban-blue border-teal-500' : 'ban-red border-red-500']"
class="relative border-2 rounded-full cursor-pointer ban" class="relative border-2 rounded-full cursor-pointer ban"
@ -22,7 +22,7 @@
>{{ ban.pickTurn }}</div> >{{ ban.pickTurn }}</div>
</div> </div>
</template> </template>
<template v-slot:default> <template #default>
<div class="px-2 text-xs leading-tight text-center text-white select-none"> <div class="px-2 text-xs leading-tight text-center text-white select-none">
<div>{{ ban.champion.id ? ban.champion.name : 'No ban' }}</div> <div>{{ ban.champion.id ? ban.champion.name : 'No ban' }}</div>
</div> </div>

View file

@ -87,7 +87,7 @@
</div> </div>
<div class="flex flex-col justify-around ml-1"> <div class="flex flex-col justify-around ml-1">
<Tooltip> <Tooltip>
<template v-slot:trigger> <template #trigger>
<div <div
:style="{ :style="{
backgroundImage: `url(${ backgroundImage: `url(${
@ -98,7 +98,7 @@
class="w-4 h-4 bg-center bg-cover rounded-md bg-blue-1000" class="w-4 h-4 bg-center bg-cover rounded-md bg-blue-1000"
></div> ></div>
</template> </template>
<template v-if="player.firstSum" v-slot:default> <template v-if="player.firstSum" #default>
<div <div
class="flex max-w-sm p-2 text-xs text-left text-white select-none" class="flex max-w-sm p-2 text-xs text-left text-white select-none"
> >
@ -120,7 +120,7 @@
</template> </template>
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>
<template v-slot:trigger> <template #trigger>
<div <div
:style="{ :style="{
backgroundImage: `url(${ backgroundImage: `url(${
@ -131,7 +131,7 @@
class="w-4 h-4 bg-center bg-cover rounded-md bg-blue-1000" class="w-4 h-4 bg-center bg-cover rounded-md bg-blue-1000"
></div> ></div>
</template> </template>
<template v-if="player.secondSum" v-slot:default> <template v-if="player.secondSum" #default>
<div <div
class="flex max-w-sm p-2 text-xs text-left text-white select-none" class="flex max-w-sm p-2 text-xs text-left text-white select-none"
> >
@ -154,7 +154,7 @@
</Tooltip> </Tooltip>
</div> </div>
<Tooltip> <Tooltip>
<template v-slot:trigger> <template #trigger>
<div <div
@click="selectRunes(player)" @click="selectRunes(player)"
:class="{ 'cursor-pointer': player.perks }" :class="{ 'cursor-pointer': player.perks }"
@ -182,7 +182,7 @@
></div> ></div>
</div> </div>
</template> </template>
<template v-if="player.perks" v-slot:default> <template v-if="player.perks" #default>
<div <div
class="px-2 text-sm leading-relaxed text-center text-white select-none" class="px-2 text-sm leading-relaxed text-center text-white select-none"
> >

View file

@ -158,10 +158,10 @@
</svg> </svg>
<div class="text-lg font-medium text-teal-400">{{ data.time|secToTime }}</div> <div class="text-lg font-medium text-teal-400">{{ data.time|secToTime }}</div>
<Tooltip> <Tooltip>
<template v-slot:trigger> <template #trigger>
<div class="text-xs font-medium text-white">{{ data.date }}</div> <div class="text-xs font-medium text-white">{{ data.date }}</div>
</template> </template>
<template v-slot:default> <template #default>
<div class="px-2 text-xs leading-tight text-center text-white select-none"> <div class="px-2 text-xs leading-tight text-center text-white select-none">
<svg class="w-4 h-4 mx-auto text-teal-400"> <svg class="w-4 h-4 mx-auto text-teal-400">
<use xlink:href="#time" /> <use xlink:href="#time" />

View file

@ -4,7 +4,7 @@
class="flex" class="flex"
> >
<Tooltip v-for="(item, index) in items" :key="index"> <Tooltip v-for="(item, index) in items" :key="index">
<template v-slot:trigger> <template #trigger>
<div class="relative"> <div class="relative">
<div <div
:style="{ backgroundImage: itemLink(item) }" :style="{ backgroundImage: itemLink(item) }"
@ -26,7 +26,7 @@
></div> ></div>
</div> </div>
</template> </template>
<template v-if="item !== null" v-slot:default> <template v-if="item !== null" #default>
<div class="flex max-w-md p-2 text-xs text-left text-white select-none"> <div class="flex max-w-md p-2 text-xs text-left text-white select-none">
<div <div
:style="{ backgroundImage: itemLink(item) }" :style="{ backgroundImage: itemLink(item) }"

View file

@ -24,7 +24,7 @@
<div class="flex space-x-4"> <div class="flex space-x-4">
<ul v-for="runeId in category" :key="`slot-${runeId}`"> <ul v-for="runeId in category" :key="`slot-${runeId}`">
<Tooltip> <Tooltip>
<template v-slot:trigger> <template #trigger>
<li <li
:style="{ :style="{
backgroundImage: `url('${createCDragonAssetUrl( backgroundImage: `url('${createCDragonAssetUrl(
@ -39,7 +39,7 @@
class="w-12 h-12 bg-center bg-cover border-2 border-gray-700 rounded-full cursor-pointer" class="w-12 h-12 bg-center bg-cover border-2 border-gray-700 rounded-full cursor-pointer"
></li> ></li>
</template> </template>
<template v-slot:default> <template #default>
<div <div
class="flex max-w-md p-2 text-sm text-left text-white select-none" class="flex max-w-md p-2 text-sm text-left text-white select-none"
> >
@ -78,7 +78,7 @@
> >
<ul v-for="(kStat, i) in row" :key="`${kStat}-${i}`"> <ul v-for="(kStat, i) in row" :key="`${kStat}-${i}`">
<Tooltip> <Tooltip>
<template v-slot:trigger> <template #trigger>
<li <li
:style="{ :style="{
backgroundImage: `url('${createCDragonAssetUrl( backgroundImage: `url('${createCDragonAssetUrl(
@ -93,7 +93,7 @@
class="w-8 h-8 bg-gray-900 bg-center bg-cover border-2 border-gray-700 rounded-full cursor-pointer" class="w-8 h-8 bg-gray-900 bg-center bg-cover border-2 border-gray-700 rounded-full cursor-pointer"
></li> ></li>
</template> </template>
<template v-slot:default> <template #default>
<div <div
class="flex max-w-md p-2 text-sm text-left text-white select-none" class="flex max-w-md p-2 text-sm text-left text-white select-none"
> >

View file

@ -8,10 +8,10 @@
type="checkbox" type="checkbox"
/> />
<Tooltip> <Tooltip>
<template v-slot:trigger> <template #trigger>
<label for="onlyMostPlayed" class="cursor-pointer select-none">Only most played</label> <label for="onlyMostPlayed" class="cursor-pointer select-none">Only most played</label>
</template> </template>
<template v-slot:default> <template #default>
<div class="px-2 text-xs text-center text-white"> <div class="px-2 text-xs text-center text-white">
Hide champions with less than Hide champions with less than
<br /> <br />

View file

@ -10,12 +10,12 @@
</svg> </svg>
<div class="absolute top-0 right-0 mt-3 mr-2"> <div class="absolute top-0 right-0 mt-3 mr-2">
<Tooltip> <Tooltip>
<template v-slot:trigger> <template #trigger>
<svg class="w-4 h-4 cursor-pointer"> <svg class="w-4 h-4 cursor-pointer">
<use xlink:href="#info" /> <use xlink:href="#info" />
</svg> </svg>
</template> </template>
<template v-slot:default> <template #default>
<div class="px-2 text-sm text-center text-white select-none"> <div class="px-2 text-sm text-center text-white select-none">
<div>Stats based on</div> <div>Stats based on</div>
<div> <div>

View file

@ -29,7 +29,7 @@
<div class="w-1/4">{{ mate.wins }} / {{ mate.losses }}</div> <div class="w-1/4">{{ mate.wins }} / {{ mate.losses }}</div>
<div class="w-1/4"> <div class="w-1/4">
<Tooltip> <Tooltip>
<template v-slot:trigger> <template #trigger>
<div class="h-2 bg-blue-900 rounded-full cursor-pointer"> <div class="h-2 bg-blue-900 rounded-full cursor-pointer">
<div <div
:class="getWinrateColor(mate.wins, mate.count)" :class="getWinrateColor(mate.wins, mate.count)"
@ -38,7 +38,7 @@
></div> ></div>
</div> </div>
</template> </template>
<template v-slot:default> <template #default>
<div class="px-2 text-xs text-center text-white"> <div class="px-2 text-xs text-center text-white">
<div>Winrate</div> <div>Winrate</div>
<div> <div>

View file

@ -10,12 +10,12 @@
</svg> </svg>
<div class="absolute top-0 right-0 mt-3 mr-2"> <div class="absolute top-0 right-0 mt-3 mr-2">
<Tooltip> <Tooltip>
<template v-slot:trigger> <template #trigger>
<svg class="w-4 h-4 cursor-pointer"> <svg class="w-4 h-4 cursor-pointer">
<use xlink:href="#info" /> <use xlink:href="#info" />
</svg> </svg>
</template> </template>
<template v-slot:default> <template #default>
<div class="px-2 text-sm text-center text-white select-none"> <div class="px-2 text-sm text-center text-white select-none">
<div>Stats based on</div> <div>Stats based on</div>
<div> <div>
@ -37,7 +37,7 @@
class="flex flex-col items-center w-1/5" class="flex flex-col items-center w-1/5"
> >
<Tooltip> <Tooltip>
<template v-slot:trigger> <template #trigger>
<div class="flex flex-col justify-end w-2 h-12 bg-blue-900 rounded-full cursor-pointer"> <div class="flex flex-col justify-end w-2 h-12 bg-blue-900 rounded-full cursor-pointer">
<div <div
:style="{height: (role.count * 3 / mostPlayedRole) * role.wins / role.count + 'rem'}" :style="{height: (role.count * 3 / mostPlayedRole) * role.wins / role.count + 'rem'}"
@ -51,7 +51,7 @@
></div> ></div>
</div> </div>
</template> </template>
<template v-slot:default> <template #default>
<div class="px-2 text-sm text-center text-white select-none"> <div class="px-2 text-sm text-center text-white select-none">
<div>{{ role.role|capitalize }}</div> <div>{{ role.role|capitalize }}</div>
<span <span

View file

@ -34,13 +34,13 @@
style="width: calc(20px * 15); height: calc(20px * 7)" style="width: calc(20px * 15); height: calc(20px * 7)"
> >
<Tooltip 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> <template #trigger>
<div <div
:class="[getCaseMargin(index), getCaseColor(day.matches)]" :class="[getCaseMargin(index), getCaseColor(day.matches)]"
class="w-4 h-4 ml-1 cursor-pointer" class="w-4 h-4 ml-1 cursor-pointer"
/> />
</template> </template>
<template v-slot:default> <template #default>
<div class="px-2 text-xs text-center text-white"> <div class="px-2 text-xs text-center text-white">
<div>{{ day.date }}</div> <div>{{ day.date }}</div>
<div> <div>

View file

@ -54,12 +54,12 @@
<div> <div>
<div class="flex items-center mt-2"> <div class="flex items-center mt-2">
<Tooltip> <Tooltip>
<template v-slot:trigger> <template #trigger>
<h1 class="text-4xl font-extrabold"> <h1 class="text-4xl font-extrabold">
{{ basic.account.name }} {{ basic.account.name }}
</h1> </h1>
</template> </template>
<template v-slot:default> <template #default>
<div <div
v-if="basic.account.names.length > 1" v-if="basic.account.names.length > 1"
class="px-2 text-sm text-center text-white select-none" class="px-2 text-sm text-center text-white select-none"