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

Progressing on the components with the Slider and the Switch

This commit is contained in:
Peaceultime 2024-10-29 17:36:15 +01:00
parent 97f8ca499a
commit f4f4be6b27
6 changed files with 48 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/SliderInput.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
<Label class="flex justify-center items-center my-2">{{ label }}
<SliderRoot class="ms-4 relative flex items-center select-none touch-none w-[160px] h-5" :default-value="model ? [model] : undefined" :v-model="[model]" @update:model-value="(value) => model = value ? value[0] : min" :min="min" :max="max" :step="step">
<SliderTrack class="bg-light-40 dark:bg-dark-40 relative h-1 w-full">
<SliderRange class="absolute bg-light-30 dark:bg-dark-30 h-full" />
</SliderTrack>
<SliderThumb class="block w-5 h-5 bg-light-50 dark:bg-dark-50 outline-none focus:shadow-raw transition-[box-shadow] focus:shadow-light-60 dark:focus:shadow-dark-60" />
</SliderRoot>
</Label>
</template>
<script setup lang="ts">
const { min = 0, max = 100, step = 1, label } = defineProps<{
min?: number
max?: number
step?: number
label?: string
}>();
const model = defineModel<number>()
</script>

21
components/SliderRangeInput.vue Normal file
View File

@ -0,0 +1,21 @@
<template>
<Label class="flex justify-center items-center my-2">{{ label }}
<SliderRoot class="ms-4 relative flex items-center select-none touch-none w-[160px] h-5" :default-value="model" :v-model="model":min="min" :max="max" :step="step">
<SliderTrack class="bg-light-40 dark:bg-dark-40 relative h-1 w-full">
<SliderRange class="absolute bg-light-30 dark:bg-dark-30 h-full" />
</SliderTrack>
<SliderThumb class="block w-5 h-5 bg-light-50 dark:bg-dark-50 outline-none focus:shadow-raw transition-[box-shadow] focus:shadow-light-60 dark:focus:shadow-dark-60" />
<SliderThumb class="block w-5 h-5 bg-light-50 dark:bg-dark-50 outline-none focus:shadow-raw transition-[box-shadow] focus:shadow-light-60 dark:focus:shadow-dark-60" />
</SliderRoot>
</Label>
</template>
<script setup lang="ts">
const { min = 0, max = 100, step = 1, label } = defineProps<{
min?: number
max?: number
step?: number
label?: string
}>();
const model = defineModel<number[]>()
</script>

6
components/Switch.vue
View File

@ -1,8 +1,8 @@
<template>
<div>
<Label class="flex justify-center items-center my-2">{{ label }}
<SwitchRoot v-model:checked="model" :disabled="disabled" class="ms-3 w-12 h-6 select-none border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 dark:hover:border-dark-35">
<SwitchThumb class="block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-70 dark:bg-dark-70 border border-light-50 dark:border-dark-50 data-[state=checked]:translate-x-[26px]"/>
<SwitchRoot v-model:checked="model" :disabled="disabled" class="ms-3 w-12 h-6 select-none transition-colors border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 dark:hover:border-dark-35 data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35">
<SwitchThumb class="block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-50 dark:bg-dark-50 data-[state=checked]:translate-x-[26px]"/>
</SwitchRoot>
</Label>
</div>
@ -10,7 +10,7 @@
<script setup lang="ts">
const { label, disabled } = defineProps<{
label: string
label?: string
disabled?: boolean
}>();
const model = defineModel<boolean>();

2
components/TextInput.vue
View File

@ -7,7 +7,7 @@
<script setup lang="ts">
const { type = 'text', label, disabled = false, placeholder } = defineProps<{
type?: 'text' | 'password' | 'email' | 'tel' | 'url'
label: string
label?: string
disabled?: boolean
placeholder?: string
}>();

0
components/todo/SliderInput.vue
View File

4
pages/index.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
const open = ref(false), username = ref("");
const open = ref(false), username = ref(""), price = ref(750);
</script>
<template>
@ -8,6 +8,8 @@ const open = ref(false), username = ref("");
</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" />
<SliderInput class="flex-col" :label="`Prix: ${price.toFixed(2)}€`" :min="0" :max="1500" :step="0.25" v-model="price" />
<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" />
<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>