Peaceultime
/
obsidian-visualiser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Peaceultime:f80c6d5326029378bb12075ade8a8f50df2c2bf3
Branches Tags
Peaceultime:master
Peaceultime:dev
Peaceultime:dev_fix
Peaceultime:character
Peaceultime:rework
..
compare: Peaceultime:4c8fb0ff779567e01efe124bef3e385f7270ac2d
Branches Tags
Peaceultime:dev
Peaceultime:dev_fix
Peaceultime:character
Peaceultime:master
Peaceultime:rework

No commits in common. "f80c6d5326029378bb12075ade8a8f50df2c2bf3" and "4c8fb0ff779567e01efe124bef3e385f7270ac2d" have entirely different histories.
f80c6d5326 ... 4c8fb0ff77

15 changed files with 13 additions and 137 deletions
Show Stats Expand all files Collapse all files

21
components/HoverCard.vue
View File

@ -1,21 +0,0 @@
<template>
<HoverCardRoot :open-delay="delay">
<HoverCardTrigger class="inline-block cursor-help outline-none" asChild>
<slot></slot>
</HoverCardTrigger>
<HoverCardPortal :disabled="disabled">
<HoverCardContent :side="side" class="data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] bg-light-10 dark:bg-dark-10 border border-light-35 dark:border-dark-35 p-5 data-[state=open]:transition-all text-light-100 dark:text-dark-100" >
<slot name="content"></slot>
<HoverCardArrow class="fill-light-35 dark:fill-dark-35" />
</HoverCardContent>
</HoverCardPortal>
</HoverCardRoot>
</template>
<script setup lang="ts">
const { delay = 500, disabled = false, side = 'bottom' } = defineProps<{
delay?: number
disabled?: boolean
side?: 'top' | 'right' | 'bottom' | 'left'
}>();
</script>

23
components/NumberPicker.vue
View File

@ -1,23 +0,0 @@
<template>
<Label class="my-2 flex">{{ label }}
<NumberFieldRoot :min="min" :max="max" v-model="model" :disabled="disabled" :step="step" class="ms-4 flex justify-center border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20
data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
<NumberFieldDecrement class="data-[disabled]:opacity-50 px-1"><Icon icon="radix-icons:minus" :inline="true" class="w-6 text-light-100 dark:text-dark-100 opacity-100" /></NumberFieldDecrement>
<NumberFieldInput class="text-sm tabular-nums w-20 appearance-none bg-transparent px-2 py-1 outline-none caret-light-50 dark:caret-dark-50" />
<NumberFieldIncrement class="data-[disabled]:opacity-50 px-1"><Icon icon="radix-icons:plus" :inline="true" class="w-6 text-light-100 dark:text-dark-100 opacity-100" /></NumberFieldIncrement>
</NumberFieldRoot>
</Label>
</template>
<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';
const { min = 0, max = 100, disabled = false, step = 1, label } = defineProps<{
min?: number
max?: number
disabled?: boolean
step?: number
label?: string
}>();
const model = defineModel<number>();
</script>

20
components/PinPicker.vue
View File

@ -1,20 +0,0 @@
<template>
<Label class="my-2">{{ label }}
<PinInputRoot :disabled="disabled" :default-value="model?.split('')" @update:model-value="(v) => model = v.join('')" @complete="() => emit('complete')" class="flex gap-2 items-center mt-1">
<PinInputInput :type="hidden ? 'password' : undefined" v-for="(id, index) in amount" :key="id" :index="index" class="border border-light-35 dark:border-dark-35 w-10 h-10 outline-none
bg-light-20 dark:bg-dark-20 text-center text-light-100 dark:text-dark-100 placeholder:text-light-60 dark:placeholder:text-dark-60 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20
data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40 caret-light-50 dark:caret-dark-50" />
</PinInputRoot>
</Label>
</template>
<script setup lang="ts">
const { hidden = false, amount, label, disabled = false } = defineProps<{
hidden?: boolean
label?: string
amount: number
disabled?: boolean
}>();
const model = defineModel<string>();
const emit = defineEmits(['complete']);
</script>

13
components/Progress.vue
View File

@ -1,13 +0,0 @@
<template>
<ProgressRoot :max="max" v-model="model" class="my-2 relative overflow-hidden bg-light-25 dark:bg-dark-25 w-48 h-3 data-[shape=thin]:h-1 data-[shape=large]:h-6" :data-shape="shape" style="transform: translateZ(0)" >
<ProgressIndicator class="bg-light-50 dark:bg-dark-50 h-full transition-[width] duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]" :style="`width: ${((model ?? 0) / max) * 100}%`" />
</ProgressRoot>
</template>
<script setup lang="ts">
const { max = 100, shape = 'normal' } = defineProps<{
max?: number
shape?: 'thin' | 'normal' | 'large'
}>();
const model = defineModel<number>();
</script>

2
components/TextInput.vue
View File

@ -1,5 +1,5 @@
<template>
<Label class="px-4 my-2">{{ label }}
<Label class="px-4">{{ label }}
<input :placeholder="placeholder" :disabled="disabled"
class="mx-4 caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50
bg-light-20 dark:bg-dark-20 appearance-none outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40

21
components/TimerProgress.vue
View File

@ -1,21 +0,0 @@
<template>
<ProgressRoot class="my-2 relative overflow-hidden bg-light-25 dark:bg-dark-25 w-48 h-3 data-[shape=thin]:h-1 data-[shape=large]:h-6" :data-shape="shape" style="transform: translateZ(0)" >
<ProgressIndicator class="bg-light-50 dark:bg-dark-50 h-full w-0 transition-[width] ease-linear" :style="`transition-duration: ${delay}ms; width: ${progress ? 100 : 0}%`" />
</ProgressRoot>
</template>
<script setup lang="ts">
const { delay = 1500, decreasing = false, shape = 'normal' } = defineProps<{
delay?: number
decreasing?: boolean
shape?: 'thin' | 'normal' | 'large'
}>();
const emit = defineEmits(['finish']);
const progress = ref(false);
nextTick(() => {
progress.value = true;
setTimeout(emit, delay, 'finish');
});
</script>

5
components/Tooltip.vue
View File

@ -1,5 +1,5 @@
<template>
<TooltipRoot :delay-duration="delay" :disabled="disabled">
<TooltipRoot :delay-duration="delay">
<TooltipTrigger asChild>
<span tabindex="0"><slot></slot></span>
</TooltipTrigger>
@ -15,8 +15,7 @@
<script setup lang="ts">
const { message, delay = 300, side } = defineProps<{
message: string
delay?: number,
disabled?: boolean
delay?: number
side?: 'left' | 'right' | 'top' | 'bottom'
}>();
</script>

0
components/todo/Avatar.vue → components/todo/HoverCard.vue
View File

0
components/todo/Icon.vue Normal file
View File

0
components/todo/NumberPicker.vue Normal file
View File

0
components/todo/Pagination.vue Normal file
View File

0
components/todo/PinPicker.vue Normal file
View File

0
components/todo/Progress.vue Normal file
View File

24
nuxt.config.ts
View File

@ -16,30 +16,6 @@ export default defineNuxtConfig({
boxShadow: {
raw: '0 0 0 2px var(--tw-shadow-color)'
},
keyframes: {
slideDownAndFade: {
from: { opacity: '0', transform: 'translateY(-2px)' },
to: { opacity: '1', transform: 'translateY(0)' },
},
slideLeftAndFade: {
from: { opacity: '0', transform: 'translateX(2px)' },
to: { opacity: '1', transform: 'translateX(0)' },
},
slideUpAndFade: {
from: { opacity: '0', transform: 'translateY(2px)' },
to: { opacity: '1', transform: 'translateY(0)' },
},
slideRightAndFade: {
from: { opacity: '0', transform: 'translateX(-2px)' },
to: { opacity: '1', transform: 'translateX(0)' },
},
},
animation: {
slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
},
},
colors: {
transparent: 'transparent',

21
pages/index.vue
View File

@ -1,25 +1,24 @@
<script setup lang="ts">
const open = ref(false), username = ref(""), price = ref(750), disabled = ref(false);
const open = ref(false), username = ref(""), price = ref(750);
</script>
<template>
<Head>
<Title>Accueil</Title>
</Head>
<div class="h-100 w-100 flex flex-1 flex-col justify-center items-center">
<div class="w-1/2 flex flex-1 flex-col justify-center items-center">
<Switch label="Test" v-model="disabled" />
<SliderInput :disabled="disabled" :label="`Prix: ${price.toFixed(2)}€`" :min="0" :max="1500" :step="0.25"
<Switch label="Test" />
<SliderInput :label="`Prix: ${price.toFixed(2)}€`" :min="0" :max="1500" :step="0.25"
v-model="price" />
<TextInput label="Saisir un pseudonyme" :disabled="disabled" v-model="username" />
<NumberPicker label="Age" :disabled="disabled" />
<TextInput label="Saisir un pseudonyme" v-model="username" />
<Separator decorative orientation="horizontal" class="h-px w-96 my-2 bg-light-30 dark:bg-dark-30" />
<HoverCard>
<span>Texte</span>
<template v-slot:content>
<div>Test de HoverCard</div>
</template>
</HoverCard>
<Tooltip message="Vas y, ajoute stp" side="top"><button @click="open = !!username && !open"
class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Ajouter</button>
</Tooltip>
<Toast v-model="open" :title="`Bienvenue ${username}`" content="Vous êtes maintenant connecté"
:duration="5000" />
</div>
</div>
</template>