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

Add PinPicker and NumberPicker

This commit is contained in:
Peaceultime 2024-10-30 13:24:21 +01:00
parent f37c3e4cc9
commit a5a9086eb7
7 changed files with 49 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components/NumberPicker.vue Normal file
View File

@ -0,0 +1,23 @@
<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 Normal file
View File

@ -0,0 +1,20 @@
<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>

2
components/TextInput.vue
View File

@ -1,5 +1,5 @@
<template>
<Label class="px-4">{{ label }}
<Label class="px-4 my-2">{{ 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

0
components/todo/NumberPicker.vue
View File

0
components/todo/Pagination.vue
View File

0
components/todo/PinPicker.vue
View File

10
pages/index.vue
View File

@ -1,18 +1,18 @@
<script setup lang="ts">
const open = ref(false), username = ref(""), price = ref(750);
const open = ref(false), username = ref(""), price = ref(750), disabled = ref(false);
</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" />
<SliderInput :label="`Prix: ${price.toFixed(2)}€`" :min="0" :max="1500" :step="0.25"
<Switch label="Test" v-model="disabled" />
<SliderInput :disabled="disabled" :label="`Prix: ${price.toFixed(2)}€`" :min="0" :max="1500" :step="0.25"
v-model="price" />
<TextInput label="Saisir un pseudonyme" v-model="username" />
<TextInput label="Saisir un pseudonyme" :disabled="disabled" v-model="username" />
<NumberPicker label="Age" :disabled="disabled" />
<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>