40 lines
2.1 KiB
Vue
40 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import characterConfig from '#shared/character-config.json';
|
|
import { Icon } from '@iconify/vue/dist/iconify.js';
|
|
import type { CharacterConfig } from '~/types/character';
|
|
|
|
//@ts-ignore
|
|
const config = ref<CharacterConfig>(characterConfig);
|
|
|
|
function copy()
|
|
{
|
|
navigator.clipboard.writeText(JSON.stringify(config.value));
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Head>
|
|
<Title>d[any] - Edition de données</Title>
|
|
</Head>
|
|
<TabsRoot class="flex flex-1 max-w-full flex-col gap-8 justify-start items-center px-8 w-full" default-value="training">
|
|
<TabsList class="flex flex-row gap-4 self-center relative px-4">
|
|
<TabsIndicator class="absolute left-0 h-[3px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] transition-[width,transform] duration-300 bg-accent-blue"></TabsIndicator>
|
|
<TabsTrigger value="peoples" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Peuples</TabsTrigger>
|
|
<TabsTrigger value="training" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Entrainement</TabsTrigger>
|
|
<TabsTrigger value="abilities" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Compétences</TabsTrigger>
|
|
<TabsTrigger value="spells" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Sorts</TabsTrigger>
|
|
<Tooltip message="Copier le JSON" side="right"><Button icon @click="copy" class="p-2"><Icon icon="radix-icons:clipboard-copy" /></Button></Tooltip>
|
|
</TabsList>
|
|
<TabsContent value="peoples" class="flex-1 outline-none max-w-full w-full">
|
|
</TabsContent>
|
|
<TabsContent value="training" class="flex-1 outline-none max-w-full w-full">
|
|
<TrainingEditor :config="config" />
|
|
</TabsContent>
|
|
<TabsContent value="abilities" class="flex-1 outline-none max-w-full w-full">
|
|
|
|
</TabsContent>
|
|
<TabsContent value="spells" class="flex-1 outline-none max-w-full w-full">
|
|
|
|
</TabsContent>
|
|
</TabsRoot>
|
|
</template> |