knowyt/client/src/components/admin/PlayerDialog.vue

<template>
  <ModalDialog v-if="show" :title="title" @close="emit('close')">
    <label class="player-dialog__label">Name</label>
    <input class="player-dialog__input" v-model="player.name" size="40" />
    <label class="player-dialog__label">Score</label>
    <input class="player-dialog__input" v-model="player.score" size="40" maxlength="4" />
    <label class="player-dialog__label">Authcode</label>
    <input class="player-dialog__input" v-model="player.authcode" size="40" maxlength="6" />
    <div class="player-dialog__id-container" @click="showId = true">
      <span class="player-dialog__id" :class="{ 'player-dialog__id__show': showId }">{{ player.id }}</span>
    </div>
    <template v-slot:footer>
      <Button v-for="button in buttons" :key="button.id" class="player-dialog__button" :border="button.primary"
        @click="emit('submit', button.id)">{{ button.name }}</Button>
    </template>
  </ModalDialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { PlayerEdit } from '@/composables/engine.d'

type Button = {
  id: string
  name: string
  primary?: boolean
}

const props = defineProps<{
  title: string
  show: boolean
  buttons: Array<Button>
  player: PlayerEdit
}>()

const emit = defineEmits(['close', 'submit'])
const showId = ref(false)
watch([props], () => { showId.value = false })  // reset visibility each time the dialog is shown
</script>

<style lang="scss">
@import '~/assets/css/components';

.player-dialog {
  &__label {
    display: block;
    margin: 16px 0 4px 0;
  }

  &__input {
    border: 1px solid white;
    background-color: $modal-dialog-background-color;
    color: $modal-dialog-text-color;
    border-radius: 4px;
  }

  &__id-container {
    margin: 16px 0 0 0;
  }

  &__id {
    visibility: hidden;

    &__show {
      visibility: visible;
    }
  }

  &__button ~ &__button {
    margin-left: 16px;
  }
}
</style>