38 lines
2.1 KiB
Vue
38 lines
2.1 KiB
Vue
<template>
|
|
<template v-if="model && model.people !== undefined">
|
|
<div class="flex flex-1 gap-12 px-2 py-4 justify-center items-center sticky top-0 bg-light-0 dark:bg-dark-0 w-full z-10">
|
|
<Label class="flex items-center justify-between gap-2">
|
|
<span class="pb-1 mx-2 md:p-0">Physique</span>
|
|
<NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
|
|
<NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
|
|
</NumberFieldRoot>
|
|
</Label>
|
|
<Label class="flex items-center justify-between gap-2">
|
|
<span class="pb-1 mx-2 md:p-0">Mental</span>
|
|
<NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
|
|
<NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
|
|
</NumberFieldRoot>
|
|
</Label>
|
|
<Label class="flex items-center justify-between gap-2">
|
|
<span class="pb-1 mx-2 md:p-0">Caractère</span>
|
|
<NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
|
|
<NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
|
|
</NumberFieldRoot>
|
|
</Label>
|
|
<Button @click="emit('next')" :disabled="model.aspect === undefined">Enregistrer</Button>
|
|
</div>
|
|
<div class="flex flex-col flex-1 gap-4 mx-8 my-4">
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Character, CharacterConfig } from '~/types/character';
|
|
|
|
const { config } = defineProps<{
|
|
config: CharacterConfig,
|
|
}>();
|
|
const model = defineModel<Character>({ required: true });
|
|
|
|
const emit = defineEmits(['next']);
|
|
</script> |