arthur/website
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website.git synced 2026-01-14 20:19:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

lint code

Browse Source 
Signed-off-by: Arthur DANJOU <arthurdanjou@outlook.fr>
This commit is contained in:
Arthur Danjou
2024-04-20 01:12:41 +02:00
parent c698bfec8a
commit 4574a7dccd
69 changed files with 3110 additions and 3013 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
components/header/ThemePicker.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import {useColorStore} from '~/store/color'
import {ColorsTheme} from '~~/types'
import { useColorStore } from '~/store/color'
import { ColorsTheme } from '~~/types'
const colors = Object.values(ColorsTheme)
@@ -9,80 +9,80 @@ const { getColor, setColor } = useColorStore()
const colorMode = useColorMode()
const isDark = ref(colorMode.value === 'dark')
watch(isDark, () => {
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
})
</script>
<template>
<UPopover
mode="hover"
:ui="{
background: 'bg-white dark:bg-stone-900',
ring: 'ring-1 ring-gray-200 dark:ring-stone-800',
container: 'z-30',
}"
>
<template #default="{ open }">
<UButton
color="gray"
variant="ghost"
square
size="lg"
:class="[open && 'bg-gray-50 dark:bg-gray-800']"
aria-label="Color picker"
>
<UIcon
class="w-5 h-5 text-primary-500 dark:text-primary-400"
name="i-ph-paint-brush-bold"
/>
</UButton>
</template>
<UPopover
mode="hover"
:ui="{
background: 'bg-white dark:bg-stone-900',
ring: 'ring-1 ring-gray-200 dark:ring-stone-800',
container: 'z-30',
}"
>
<template #default="{ open }">
<UButton
color="gray"
variant="ghost"
square
size="lg"
:class="[open && 'bg-gray-50 dark:bg-gray-800']"
aria-label="Color picker"
>
<UIcon
class="w-5 h-5 text-primary-500 dark:text-primary-400"
name="i-ph-paint-brush-bold"
/>
</UButton>
</template>
<template #panel>
<div class="p-2">
<div class="grid grid-cols-5 gap-px">
<UTooltip
v-for="color in colors"
:key="color"
:open-delay="500"
:text="color"
class="capitalize"
>
<UButton
color="gray"
square
:ui="{
color: {
white: {
solid: 'ring-0 bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800',
ghost: 'hover:bg-gray-50 dark:hover:bg-gray-800/50',
},
},
}"
:variant="color === getColor ? 'solid' : 'ghost'"
@click.stop.prevent="setColor(color)"
>
<span
:class="`bg-${color}-500/80 border-${color}-500`"
class="flex items-center justify-center w-3 h-3 rounded-full border text-white"
>
<UIcon
v-if="color === getColor"
name="i-ic-round-check"
/>
</span>
</UButton>
</UTooltip>
</div>
<UDivider class="my-2" />
<div>
<UToggle
v-model="isDark"
on-icon="i-heroicons-moon-20-solid"
off-icon="i-heroicons-sun-20-solid"
/>
</div>
</div>
</template>
</UPopover>
<template #panel>
<div class="p-2">
<div class="grid grid-cols-5 gap-px">
<UTooltip
v-for="color in colors"
:key="color"
:open-delay="500"
:text="color"
class="capitalize"
>
<UButton
color="gray"
square
:ui="{
color: {
white: {
solid: 'ring-0 bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800',
ghost: 'hover:bg-gray-50 dark:hover:bg-gray-800/50',
},
},
}"
:variant="color === getColor ? 'solid' : 'ghost'"
@click.stop.prevent="setColor(color)"
>
<span
:class="`bg-${color}-500/80 border-${color}-500`"
class="flex items-center justify-center w-3 h-3 rounded-full border text-white"
>
<UIcon
v-if="color === getColor"
name="i-ic-round-check"
/>
</span>
</UButton>
</UTooltip>
</div>
<UDivider class="my-2" />
<div>
<UToggle
v-model="isDark"
on-icon="i-heroicons-moon-20-solid"
off-icon="i-heroicons-sun-20-solid"
/>
</div>
</div>
</template>
</UPopover>
</template>