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

View file

@ -7,7 +7,7 @@
:class="{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}"
class="inline-block"
>
<template v-slot:trigger>
<template #trigger>
<div
:class="[allyTeam ? 'ban-blue border-teal-500' : 'ban-red border-red-500']"
class="relative border-2 rounded-full cursor-pointer ban"
@ -22,7 +22,7 @@
>{{ ban.pickTurn }}</div>
</div>
</template>
<template v-slot:default>
<template #default>
<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>

View file

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

View file

@ -158,10 +158,10 @@
</svg>
<div class="text-lg font-medium text-teal-400">{{ data.time|secToTime }}</div>
<Tooltip>
<template v-slot:trigger>
<template #trigger>
<div class="text-xs font-medium text-white">{{ data.date }}</div>
</template>
<template v-slot:default>
<template #default>
<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">
<use xlink:href="#time" />

View file

@ -4,7 +4,7 @@
class="flex"
>
<Tooltip v-for="(item, index) in items" :key="index">
<template v-slot:trigger>
<template #trigger>
<div class="relative">
<div
:style="{ backgroundImage: itemLink(item) }"
@ -26,7 +26,7 @@
></div>
</div>
</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
:style="{ backgroundImage: itemLink(item) }"

View file

@ -24,7 +24,7 @@
<div class="flex space-x-4">
<ul v-for="runeId in category" :key="`slot-${runeId}`">
<Tooltip>
<template v-slot:trigger>
<template #trigger>
<li
:style="{
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"
></li>
</template>
<template v-slot:default>
<template #default>
<div
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}`">
<Tooltip>
<template v-slot:trigger>
<template #trigger>
<li
:style="{
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"
></li>
</template>
<template v-slot:default>
<template #default>
<div
class="flex max-w-md p-2 text-sm text-left text-white select-none"
>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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