28 lines
1.8 KiB
Vue
28 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { MAIN_STATS, mainStatTexts, type CharacterConfig } from '~/types/character';
|
|
import PreviewA from './prose/PreviewA.vue';
|
|
|
|
const { config } = defineProps<{
|
|
config: CharacterConfig
|
|
}>();
|
|
|
|
const position = ref(0);
|
|
</script>
|
|
|
|
<template>
|
|
<TabsRoot class="flex flex-1 flex-row justify-start items-stretch w-full" :default-value="MAIN_STATS[0]">
|
|
<TabsList class="flex flex-col gap-3 relative">
|
|
<TabsTrigger v-for="(stat, i) of MAIN_STATS" :value="stat" class="block w-2.5 h-2.5 m-px outline outline-1 outline-transparent hover:outline-light-70 dark:hover:outline-dark-70 rounded-full bg-light-40 dark:bg-dark-40 cursor-pointer" @click="position = i"></TabsTrigger>
|
|
<!-- <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> -->
|
|
<span :style="{ 'top': position * 1.5 + 'em' }" :data-text="mainStatTexts[MAIN_STATS[position]]" class="rounded-full w-3 h-3 bg-accent-blue absolute transition-[top]
|
|
after:content-[attr(data-text)] after:absolute after:-top-2 after:left-4 after:p-px after:bg-light-0 dark:after:bg-dark-0"></span>
|
|
</TabsList>
|
|
<TabsContent v-for="(stat) of MAIN_STATS" :value="stat" class="flex-1">
|
|
<div class="flex flex-row overflow-x-auto w-full flex-nowrap gap-4">
|
|
<div class="w-96 flex flex-col gap-4 justify-between" v-for="(level) of config.training[stat]">
|
|
<div class="border border-light-35 dark:border-dark-35 px-3 py-1" v-for="(option) of level"><MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" /></div>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
</TabsRoot>
|
|
</template> |