fchat-rising/components/character_link.vue

<template>
    <span :class="linkClasses" v-if="character">
        <slot v-if="deleted">[Deleted] {{ name }}</slot>
        <a :href="characterUrl" class="characterLinkLink" v-else :target="target"><slot>{{ name }}</slot></a>
    </span>
</template>

<script lang="ts">
    import {Component, Prop} from '@f-list/vue-ts';
    import Vue from 'vue';
    import {SimpleCharacter} from '../interfaces';
    import * as Utils from '../site/utils';

    @Component
    export default class CharacterLink extends Vue {
        @Prop({required: true})
        readonly character!: SimpleCharacter | string;
        @Prop({default: '_blank'})
        readonly target!: string;

        get deleted(): boolean {
            return typeof(this.character) === 'string' ? false : this.character.deleted;
        }

        get linkClasses(): string {
            return this.deleted ? 'characterLinkDeleted' : 'characterLink';
        }

        get characterUrl(): string {
            return Utils.characterURL(this.name);
        }

        get name(): string {
            return typeof(this.character) === 'string' ? this.character : this.character.name;
        }
    }
</script>