Skip to content

Commit

Permalink
refactor: use defineComponent instead of Vue.extend
Browse files Browse the repository at this point in the history
And fix revealed TypeScript errors
  • Loading branch information
davidsandoz committed Feb 16, 2024
1 parent e06527f commit 488d4d7
Show file tree
Hide file tree
Showing 101 changed files with 410 additions and 303 deletions.
12 changes: 8 additions & 4 deletions components/competitions/st-match-event-small.vue
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
<template>
<st-event-small
:start-date="match.parsedDate()"
:name="`${match.home_team.name} - ${match.away_team.name}`"
v-if="match.parsedDate"
:start-date="match.parsedDate"
:name="matchName"
:details="details"
:to="to"
/>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';
import { defineComponent, PropType } from 'vue';
import Match from '~/models/match.model';
import stEventSmall from '~/components/events/st-event-small.vue';
import CompetitionEdition from '~/models/competition-edition.model';
export default Vue.extend({
export default defineComponent({
components: { stEventSmall },
props: {
match: {
Expand All @@ -39,6 +40,9 @@ export default Vue.extend({
},
});
},
matchName(): string {
return `${this.match.home_team?.name} - ${this.match.away_team?.name}`;
},
},
});
</script>
4 changes: 2 additions & 2 deletions components/competitions/st-match-result-list.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';
import { defineComponent, PropType } from 'vue';
import stMatchResult from '~/components/competitions/st-match-result.vue';
import Match from '~/models/match.model';
export default Vue.extend({
export default defineComponent({
components: {
stMatchResult,
},
Expand Down
4 changes: 2 additions & 2 deletions components/competitions/st-match-result.vue
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,10 @@
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';
import { defineComponent, PropType } from 'vue';
import Match from '~/models/match.model';
export default Vue.extend({
export default defineComponent({
props: {
match: {
type: Object as PropType<Match>,
Expand Down
4 changes: 2 additions & 2 deletions components/competitions/st-upcoming-matches.vue
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
</template>

<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import Match from '~/models/match.model';
import stMatchEventSmall from '~/components/competitions/st-match-event-small.vue';
import Phase from '~/models/phase.model';
Expand All @@ -48,7 +48,7 @@ import Round from '~/models/round.model';
import CompetitionEdition from '~/models/competition-edition.model';
import { NationalCompetitionEdition } from '~/plugins/cms-service';
export default Vue.extend({
export default defineComponent({
components: { stMatchEventSmall },
data() {
return {
Expand Down
4 changes: 2 additions & 2 deletions components/events/st-calendar-nav.vue
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@
</template>

<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
export default Vue.extend({
export default defineComponent({
props: {
month: {
type: Number,
Expand Down
4 changes: 2 additions & 2 deletions components/events/st-event-date.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';
import { defineComponent, PropType } from 'vue';
import { isSameDay, isSameMonth, isSameYear } from 'date-fns';
export default Vue.extend({
export default defineComponent({
props: {
startDate: {
type: Date as PropType<Date>,
Expand Down
4 changes: 2 additions & 2 deletions components/events/st-event-list.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';
import { defineComponent, PropType } from 'vue';
import stEvent from '~/components/events/st-event.vue';
import { CalendarEvent } from '~/plugins/cms-service';
export default Vue.extend({
export default defineComponent({
components: {
stEvent,
},
Expand Down
4 changes: 2 additions & 2 deletions components/events/st-event-small.vue
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';
import { defineComponent, PropType } from 'vue';
import { isSameDay, isSameMonth } from 'date-fns';
export default Vue.extend({
export default defineComponent({
props: {
startDate: {
type: Date as PropType<Date>,
Expand Down
10 changes: 5 additions & 5 deletions components/events/st-event.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<st-cancelled-label v-if="isCancelled" class="c-event__cancelled-label" />
</h3>
<nuxt-link
v-if="eventType.name"
v-if="eventType && eventType.name"
:to="
localePath({ name: 'events-slug', params: { slug: `${eventType.id}-${$slugify(eventType.name_plural)}` } })
"
Expand Down Expand Up @@ -71,15 +71,15 @@
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';
import { defineComponent, PropType } from 'vue';
// import { Location } from 'vue-router';
import { Store } from 'vuex';
import { CalendarEvent } from '~/plugins/cms-service';
import { EventType, EventTypes, RootState } from '~/store/state';
import { getAssetSrcSet, getAssetURL } from '~/plugins/directus';
import stEventDate from '~/components/events/st-event-date.vue';
export default Vue.extend({
export default defineComponent({
components: { stEventDate },
props: {
event: {
Expand Down Expand Up @@ -154,9 +154,9 @@ export default Vue.extend({
mainImageDescription(): string {
return this.event?.image?.description || this.eventType?.image?.description || '';
},
mapsUrl(): string | null {
mapsUrl(): string | undefined {
if (!this.event.venue) {
return null;
return undefined;
}
// This link will fallback to Google Maps if Apple Maps is not available
return `//maps.apple.com/?q=${this.event.venue.address?.replace('\n', ', ')}`;
Expand Down
4 changes: 2 additions & 2 deletions components/events/st-month-calendar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';
import { defineComponent, PropType } from 'vue';
import {
addDays,
differenceInCalendarDays,
Expand All @@ -68,7 +68,7 @@ interface CalendarDays {
[key: string]: CalendarDay;
}
export default Vue.extend({
export default defineComponent({
props: {
month: {
type: Number,
Expand Down
4 changes: 2 additions & 2 deletions components/icon/st-custom-icon.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
import { defineComponent } from 'vue';
export default defineComponent({
props: {
iconName: {
type: String,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,12 @@
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';
import { defineComponent, PropType } from 'vue';
import { NationalTeamForCompetition } from './st-national-teams.prop';
import StPlayer from '~/components/national-teams/st-player.vue';
import StPerson from '~/components/people/st-person.vue';
export default Vue.extend({
export default defineComponent({
components: { StPerson, StPlayer },
props: {
teams: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
<select
v-model="filters.selectedTeamId"
class="c-national-team-competition-update-list__team-filter"
:aria-label="$t('internationalCompetition.live.updates.filters.teams')"
:aria-label="$t('internationalCompetition.live.updates.filters.teams').toString()"
>
<option :value="undefined">{{ $t('internationalCompetition.live.updates.filters.noTeamFilter') }}</option>
<option v-for="team of teams" :key="team.id" :value="team.id">{{ team.name }}</option>
Expand Down Expand Up @@ -85,14 +85,14 @@
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';
import { defineComponent, PropType } from 'vue';
import { NationalTeamCompetitionUpdate } from './st-national-teams.prop';
import StNationalTeamCompetitionUpdate from '~/components/national-teams/st-national-team-competition-update.vue';
const UPDATES_PER_PAGE = 10;
const REFRESH_INTERVAL = 30; // In seconds
export default Vue.extend({
export default defineComponent({
components: {
StNationalTeamCompetitionUpdate,
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,13 @@
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';
import { defineComponent, PropType } from 'vue';
import { differenceInDays } from 'date-fns';
import linkifyString from 'linkify-string';
import { getAssetSrcSet, getAssetURL } from '~/plugins/directus';
import { NationalTeamCompetitionUpdate } from '~/components/national-teams/st-national-teams.prop';
export default Vue.extend({
export default defineComponent({
props: {
update: {
type: Object as PropType<NationalTeamCompetitionUpdate>,
Expand Down
28 changes: 16 additions & 12 deletions components/national-teams/st-national-teams.prop.ts
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
import { PartialItem } from '@directus/sdk';
import { Gender, Role } from '~/plugins/cms-service';
import { DirectusImage } from '~/plugins/directus';
import { DirectusImage, DirectusPerson } from '~/plugins/directus';

export interface Player {
id: number;
first_name: string;
last_name: string;
number: number;
number?: number;
is_captain: boolean;
birth_year: number;
gender: Gender;
club: {
birth_year?: number;
gender?: Gender;
club?: {
name: string;
};
positions: string[];
date_start: string;
date_end: string;
track_record: string;
portrait_square_head: string;
positions: number[];
date_start?: string;
date_end?: string;
track_record?: string;
portrait_square_head?: string;
}

export interface NationalTeamCompetition {
Expand Down Expand Up @@ -72,7 +73,10 @@ export interface NationalTeam {
export interface NationalTeamForCompetition {
id: number;
competition: NationalTeamCompetition;
team: Pick<NationalTeam, 'name'>;
team: Pick<NationalTeam, 'name' | 'slug'>;
players: Player[];
coaches: number[];
coaches: PartialItem<DirectusPerson>[];
}

// Just to clear a Nuxt warning.
export default {};
8 changes: 4 additions & 4 deletions components/national-teams/st-player.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';
import { defineComponent, PropType } from 'vue';
import stPerson, { PersonDetail } from '~/components/people/st-person.vue';
import { Player } from '~/components/national-teams/st-national-teams.prop';
import { Gender } from '~/plugins/cms-service';
export default Vue.extend({
export default defineComponent({
components: { stPerson },
props: {
player: {
Expand All @@ -22,8 +22,8 @@ export default Vue.extend({
},
},
computed: {
subName(): string | null {
return this.player.is_captain ? this.$t('nationalTeams.captain').toString() : null;
subName(): string | undefined {
return this.player.is_captain ? this.$t('nationalTeams.captain').toString() : undefined;
},
details(): PersonDetail[] {
const details = [];
Expand Down
4 changes: 2 additions & 2 deletions components/news/st-news-list.vue
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,14 @@
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';
import { defineComponent, PropType } from 'vue';
import { NewsEntry } from '~/components/news/st-news';
import { Domain } from '~/plugins/cms-service';
import { getAssetSrcSet, getAssetURL } from '~/plugins/directus';
const MAX_NEWS_PER_ROW = 4;
export default Vue.extend({
export default defineComponent({
props: {
news: {
type: Array as PropType<NewsEntry[]>,
Expand Down
4 changes: 2 additions & 2 deletions components/news/st-news.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,13 @@
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';
import { defineComponent, PropType } from 'vue';
import { NewsEntry } from '~/components/news/st-news';
import { BreadcrumbItem } from '~/components/st-breadcrumb.vue';
import { Domain } from '~/plugins/cms-service';
import { getAssetURL, getAssetSrcSet } from '~/plugins/directus';
export default Vue.extend({
export default defineComponent({
props: {
newsEntry: {
type: Object as PropType<NewsEntry>,
Expand Down
6 changes: 3 additions & 3 deletions components/people/st-person.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
v-if="avatarAssetId"
:src="avatarSrc"
:srcset="avatarSrcSet"
:alt="$t('person.photoOf', { name })"
:alt="$t('person.photoOf', { name }).toString()"
class="c-person__avatar"
/>
<div v-else class="c-person__avatar">
Expand All @@ -30,7 +30,7 @@
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';
import { defineComponent, PropType } from 'vue';
import { getAssetURL } from '~/plugins/directus';
export interface PersonDetail {
Expand All @@ -40,7 +40,7 @@ export interface PersonDetail {
href?: string;
}
export default Vue.extend({
export default defineComponent({
props: {
avatarAssetId: {
type: String,
Expand Down
Loading

0 comments on commit 488d4d7

Please sign in to comment.