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

Add RadioGroup and style for disabled fields

This commit is contained in:
Peaceultime 2024-10-30 00:07:49 +01:00
parent f4f4be6b27
commit 4c8fb0ff77
15 changed files with 142 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

30
components/RadioInput.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<RadioGroupRoot :disabled="disabled" v-model="model" class="flex flex-col gap-2 p-2">
<Label v-for="option in options" class="flex items-center gap-2">
<RadioGroupItem :disabled="(option as RadioOption).disabled ?? false"
:value="(option as RadioOption).value ?? option"
class="border border-light-60 dark:border-dark-35 bg-light-20 dark:bg-dark-25 w-5 h-5 outline-none cursor-default hover:border-light-70 dark:hover:border-dark-40
focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40 data-[disabled]:bg-light-10 dark:data-[disabled]:bg-dark-10 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20">
<RadioGroupIndicator>
<Icon icon="radix-icons:check" class="relative w-5 h-5 -top-px -left-px" />
</RadioGroupIndicator>
</RadioGroupItem>
{{ (option as RadioOption).label ?? option }}
</Label>
</RadioGroupRoot>
</template>
<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';
export interface RadioOption {
label: string
value: string
disabled?: boolean
}
const { disabled = false, options } = defineProps<{
disabled?: boolean
options: string[] | RadioOption[]
}>();
const model = defineModel<string>();
</script>

39
components/Select.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<Label>{{ label }}
<SelectRoot :v-model="model">
<SelectTrigger :disabled="disabled" class="mx-4 inline-flex min-w-[160px] items-center justify-between px-3 text-sm font-semibold leading-none h-8 gap-1
bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 outline-none data-[placeholder]:font-normal
data-[placeholder]:text-light-50 dark:data-[placeholder]:text-dark-50 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
hover:border-light-50 dark:hover:border-dark-50">
<SelectValue :placeholder="placeholder" />
<Icon icon="radix-icons:caret-down" class="h-4 w-4" />
</SelectTrigger>
<SelectPortal :disabled="disabled">
<SelectContent :position="position"
class="min-w-[160px] bg-light-20 dark:bg-dark-20 will-change-[opacity,transform] z-40">
<SelectScrollUpButton>
<Icon icon="radix-icons:chevron-up" />
</SelectScrollUpButton>
<SelectViewport class="p-1">
<slot></slot>
</SelectViewport>
<SelectScrollDownButton>
<Icon icon="radix-icons:chevron-down" />
</SelectScrollDownButton>
</SelectContent>
</SelectPortal>
</SelectRoot>
</Label>
</template>
<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';
const { placeholder, disabled = false, position = 'popper', label } = defineProps<{
placeholder?: string
disabled?: boolean
position?: 'item-aligned' | 'popper'
label?: string
}>();
const model = defineModel();
</script>

14
components/SelectGroup.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<SelectGroup :disabled="disabled" class="">
<SelectLabel class="">{{ label }}</SelectLabel>
<slot></slot>
</SelectGroup>
</template>
<script setup lang="ts">
import { SelectGroup } from 'radix-vue';
const { label, disabled = false } = defineProps<{
label: string
disabled?: boolean
}>();
</script>

18
components/SelectItem.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<SelectItem :value="value" :disabled="disabled" class="">
<SelectItemText class="">{{ label }}</SelectItemText>
<SelectItemIndicator class="">
<Icon icon="radix-icons:check" />
</SelectItemIndicator>
</SelectItem>
</template>
<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';
import { SelectItem } from 'radix-vue';
const { disabled = false, value } = defineProps<{
disabled?: boolean
value: NonNullable<any>
label: string
}>();
</script>

7
components/SelectSeparator.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<SelectSeparator class="" />
</template>
<script setup lang="ts">
import { SelectSeparator } from 'radix-vue';
</script>

15
components/SliderInput.vue
View File

@ -1,20 +1,25 @@
<template> <template>
<Label class="flex justify-center items-center my-2">{{ label }} <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"> <SliderRoot class="mx-4 relative flex items-center select-none touch-none w-[160px] h-5"
<SliderTrack class="bg-light-40 dark:bg-dark-40 relative h-1 w-full"> :default-value="model ? [model] : undefined" :v-model="[model]" :disabled="disabled"
<SliderRange class="absolute bg-light-30 dark:bg-dark-30 h-full" /> @update:model-value="(value) => model = value ? value[0] : min" :min="min" :max="max" :step="step">
<SliderTrack class="bg-light-30 dark:bg-dark-30 relative h-1 w-full data-[disabled]:bg-light-10 dark:data-[disabled]:bg-dark-10">
<SliderRange class="absolute bg-light-40 dark:bg-dark-40 h-full data-[disabled]:bg-light-30 dark:data-[disabled]:bg-dark-30" />
</SliderTrack> </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 border border-light-50 dark:border-dark-50
hover:border-light-60 dark:hover:border-dark-60 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20" />
</SliderRoot> </SliderRoot>
</Label> </Label>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const { min = 0, max = 100, step = 1, label } = defineProps<{ const { min = 0, max = 100, step = 1, label, disabled = false } = defineProps<{
min?: number min?: number
max?: number max?: number
step?: number step?: number
label?: string label?: string
disabled?: boolean
}>(); }>();
const model = defineModel<number>() const model = defineModel<number>()
</script> </script>

21
components/SliderRangeInput.vue
View File

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

11
components/Switch.vue
View File

@ -1,11 +1,16 @@
<template> <template>
<div> <div>
<Label class="flex justify-center items-center my-2">{{ label }} <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 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"> <SwitchRoot v-model:checked="model" :disabled="disabled"
<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]"/> class="mx-3 w-12 h-6 select-none transition-colors border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 outline-none
data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35 hover:border-light-50 dark:hover:border-dark-50 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20">
<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]
data-[disabled]:bg-light-30 dark:data-[disabled]:bg-dark-30 data-[disabled]:border-light-30 dark:data-[disabled]:border-dark-30" />
</SwitchRoot> </SwitchRoot>
</Label> </Label>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

6
components/TextInput.vue
View File

@ -1,6 +1,10 @@
<template> <template>
<Label class="px-4">{{ label }} <Label class="px-4">{{ label }}
<input :placeholder="placeholder" :disabled="disabled" class="ms-3 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 border border-light-35 dark:border-dark-35" :type="type" v-model="model"> <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
border border-light-35 dark:border-dark-35 hover:border-light-50 dark:hover:border-dark-50 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20"
:type="type" v-model="model" :data-disabled="disabled || undefined">
</Label> </Label>
</template> </template>

0
components/todo/RadioInput.vue
View File

0
components/todo/SelectInput.vue
View File

4
nuxt.config.ts
View File

@ -6,7 +6,7 @@ export default defineNuxtConfig({
'nuxt-security', 'nuxt-security',
'@nuxtjs/tailwindcss', '@nuxtjs/tailwindcss',
'@vueuse/nuxt', '@vueuse/nuxt',
'radix-vue/nuxt', 'radix-vue/nuxt'
], ],
tailwindcss: { tailwindcss: {
viewer: false, viewer: false,
@ -14,7 +14,7 @@ export default defineNuxtConfig({
theme: { theme: {
extend: { extend: {
boxShadow: { boxShadow: {
raw: '0 0 0 3px var(--tw-shadow-color)' raw: '0 0 0 2px var(--tw-shadow-color)'
}, },
}, },
colors: { colors: {

1
package.json
View File

@ -3,6 +3,7 @@
"private": true, "private": true,
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@iconify/vue": "^4.1.2",
"@nuxtjs/color-mode": "^3.5.2", "@nuxtjs/color-mode": "^3.5.2",
"@nuxtjs/tailwindcss": "^6.12.2", "@nuxtjs/tailwindcss": "^6.12.2",
"@vueuse/nuxt": "^11.1.0", "@vueuse/nuxt": "^11.1.0",

11
pages/index.vue
View File

@ -3,17 +3,22 @@ const open = ref(false), username = ref(""), price = ref(750);
</script> </script>
<template> <template>
<Head> <Head>
<Title>Accueil</Title> <Title>Accueil</Title>
</Head> </Head>
<div class="h-100 w-100 flex flex-1 flex-col justify-center items-center"> <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"> <div class="w-1/2 flex flex-1 flex-col justify-center items-center">
<Switch label="Test" /> <Switch label="Test" />
<SliderInput class="flex-col" :label="`Prix: ${price.toFixed(2)}€`" :min="0" :max="1500" :step="0.25" v-model="price" /> <SliderInput :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" v-model="username" />
<Separator decorative orientation="horizontal" class="h-px w-96 my-2 bg-light-30 dark:bg-dark-30" /> <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> <Tooltip message="Vas y, ajoute stp" side="top"><button @click="open = !!username && !open"
<Toast v-model="open" :title="`Bienvenue ${username}`" content="Vous êtes maintenant connecté" :duration="5000" /> 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>
</div> </div>
</template> </template>