mirror of
https://github.com/versia-pub/frontend.git
synced 2026-03-13 19:49:16 +01:00
chore: ⬆️ Upgrade to Nuxt 4
Some checks failed
Some checks failed
This commit is contained in:
Jesse Wierzbinski
parent
8debe97f63
commit
7f7cf20311
386 changed files with 2376 additions and 2332 deletions
104
app/components/preferences/profile/fields.vue
Normal file
104
app/components/preferences/profile/fields.vue
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{{ title }}
|
||||
<Button type="button" variant="secondary" size="icon" class="ml-auto" @click="addField()" :title="m.front_north_eel_gulp()">
|
||||
<Plus />
|
||||
</Button>
|
||||
</FormLabel>
|
||||
|
||||
<FormControl>
|
||||
<VueDraggable class="grid gap-4" v-model="list" :animation="200" handle=".drag-handle">
|
||||
<div v-for="(field, index) in list" :key="field.id"
|
||||
class="grid items-center grid-cols-[auto_repeat(3,minmax(0,1fr))_auto] gap-2">
|
||||
<Button as="span" variant="ghost" size="icon" class="drag-handle cursor-grab">
|
||||
<GripVertical />
|
||||
</Button>
|
||||
<Input :model-value="field.name" placeholder="Name" @update:model-value="
|
||||
(e) => updateKey(index, String(e))
|
||||
" />
|
||||
<Input :model-value="field.value" placeholder="Value" class="col-span-2" @update:model-value="
|
||||
(e) => updateValue(index, String(e))
|
||||
" />
|
||||
<Button type="button" variant="secondary" size="icon" @click="removeField(index)">
|
||||
<Trash />
|
||||
</Button>
|
||||
</div>
|
||||
</VueDraggable>
|
||||
<FormMessage />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { GripVertical, Plus, Trash } from "lucide-vue-next";
|
||||
import { VueDraggable } from "vue-draggable-plus";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import {
|
||||
FormControl,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "~/components/ui/form";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import * as m from "~~/paraglide/messages.js";
|
||||
|
||||
const { title } = defineProps<{
|
||||
title: string;
|
||||
}>();
|
||||
|
||||
const value = defineModel<{ name: string; value: string }[]>("value", {
|
||||
default: [],
|
||||
});
|
||||
|
||||
const list = ref<
|
||||
{
|
||||
id: string;
|
||||
name: string;
|
||||
value: string;
|
||||
}[]
|
||||
>(
|
||||
value.value.map((item, index) => ({
|
||||
id: String(index),
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
})),
|
||||
);
|
||||
|
||||
watch(
|
||||
list,
|
||||
(newList) => {
|
||||
value.value = newList.map((item) => ({
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
}));
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
|
||||
const updateKey = (index: number, key: string) => {
|
||||
if (!list.value[index]) {
|
||||
return;
|
||||
}
|
||||
|
||||
list.value[index].name = key;
|
||||
};
|
||||
|
||||
const updateValue = (index: number, val: string) => {
|
||||
if (!list.value[index]) {
|
||||
return;
|
||||
}
|
||||
|
||||
list.value[index].value = val;
|
||||
};
|
||||
|
||||
const removeField = (index: number) => {
|
||||
list.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const addField = () => {
|
||||
list.value.push({ name: "", value: "", id: String(list.value.length) });
|
||||
};
|
||||
</script>
|
||||
243
app/components/preferences/profile/image-uploader.vue
Normal file
243
app/components/preferences/profile/image-uploader.vue
Normal file
|
|
@ -0,0 +1,243 @@
|
|||
<template>
|
||||
<Dialog v-model:open="open">
|
||||
<DialogTrigger :as-child="true">
|
||||
<Button
|
||||
v-bind="$attrs"
|
||||
variant="ghost"
|
||||
class="h-fit w-fit p-0 m-0 relative group border overflow-hidden"
|
||||
>
|
||||
<Avatar class="size-32" :src="image" :name="displayName" />
|
||||
<div
|
||||
class="absolute inset-0 bg-background/80 flex group-hover:opacity-100 opacity-0 duration-200 items-center justify-center"
|
||||
>
|
||||
<Upload />
|
||||
</div>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogTitle>
|
||||
{{ m.due_hour_husky_prosper() }}
|
||||
</DialogTitle>
|
||||
<DialogDescription class="sr-only">
|
||||
{{ m.suave_broad_albatross_drop() }}
|
||||
</DialogDescription>
|
||||
<form class="grid gap-6" @submit="submit">
|
||||
<Tabs
|
||||
default-value="upload"
|
||||
class="mt-2 *:data-[slot=tabs-content]:mt-2"
|
||||
>
|
||||
<TabsList class="w-full *:w-full">
|
||||
<TabsTrigger value="upload">
|
||||
{{ m.flat_safe_haddock_gaze() }}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="gravatar">
|
||||
{{ m.inclusive_long_lizard_boost() }}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="url">
|
||||
{{ m.proud_next_elk_beam() }}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="upload">
|
||||
<FormField
|
||||
v-slot="{ handleChange, handleBlur }"
|
||||
name="image"
|
||||
>
|
||||
<FormItem>
|
||||
<FormLabel class="sr-only">
|
||||
{{ m.flat_safe_haddock_gaze() }}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
@change="handleChange"
|
||||
@blur="handleBlur"
|
||||
:disabled="isSubmitting"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
{{ m.lime_late_millipede_urge() }}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</TabsContent>
|
||||
<TabsContent value="gravatar">
|
||||
<FormField
|
||||
v-slot="{ componentField, value }"
|
||||
name="email"
|
||||
@update:model-value="
|
||||
async (value) => {
|
||||
gravatarUrl = await emailToGravatar(value);
|
||||
}
|
||||
"
|
||||
>
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{{ m.lower_formal_kudu_lift() }}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
v-bind="componentField"
|
||||
:disabled="isSubmitting"
|
||||
placeholder="peter.griffin@fox.com"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
<div v-if="value" class="grid gap-4 !mt-4">
|
||||
<Label>{{
|
||||
m.witty_honest_wallaby_support()
|
||||
}}</Label>
|
||||
<Avatar class="size-32" :src="gravatarUrl" />
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</TabsContent>
|
||||
<TabsContent value="url">
|
||||
<FormField
|
||||
v-slot="{ componentField, value }"
|
||||
name="url"
|
||||
>
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{{ m.proud_next_elk_beam() }}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
v-bind="componentField"
|
||||
:disabled="isSubmitting"
|
||||
placeholder="https://mysite.com/avatar.webp"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
<div v-if="value" class="grid gap-4 !mt-4">
|
||||
<Label>{{
|
||||
m.witty_honest_wallaby_support()
|
||||
}}</Label>
|
||||
<Avatar class="size-32" :src="value" />
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
<DialogFooter>
|
||||
<DialogClose :as-child="true">
|
||||
<Button variant="outline" :disabled="isSubmitting">
|
||||
{{ m.soft_bold_ant_attend() }}
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="default"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
{{ m.teary_antsy_panda_aid() }}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { toTypedSchema } from "@vee-validate/zod";
|
||||
import { Upload } from "lucide-vue-next";
|
||||
import { useForm } from "vee-validate";
|
||||
import { z } from "zod";
|
||||
import Avatar from "~/components/profiles/avatar.vue";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "~/components/ui/dialog";
|
||||
import {
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "~/components/ui/form";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { Label } from "~/components/ui/label";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
|
||||
import * as m from "~~/paraglide/messages.js";
|
||||
|
||||
const { maxSize } = defineProps<{
|
||||
displayName?: string;
|
||||
maxSize?: number;
|
||||
}>();
|
||||
|
||||
const image = defineModel<string>("image", {
|
||||
required: true,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
submitFile: [file: File];
|
||||
submitUrl: [url: string];
|
||||
}>();
|
||||
|
||||
const schema = toTypedSchema(
|
||||
z
|
||||
.object({
|
||||
image: z
|
||||
.instanceof(File, {
|
||||
message: m.sound_topical_gopher_offer(),
|
||||
})
|
||||
.refine(
|
||||
(v) => v.size <= (maxSize ?? Number.MAX_SAFE_INTEGER),
|
||||
m.zippy_caring_raven_edit({
|
||||
size: maxSize ?? Number.MAX_SAFE_INTEGER,
|
||||
}),
|
||||
),
|
||||
})
|
||||
.or(
|
||||
z.object({
|
||||
url: z.string().url(),
|
||||
}),
|
||||
)
|
||||
.or(
|
||||
z.object({
|
||||
email: z.string().email(),
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
const emailToGravatar = async (email: string) => {
|
||||
const sha256 = await crypto.subtle.digest(
|
||||
"SHA-256",
|
||||
new TextEncoder().encode(email),
|
||||
);
|
||||
|
||||
return `https://www.gravatar.com/avatar/${Array.from(new Uint8Array(sha256))
|
||||
.map((b) => b.toString(16).padStart(2, "0"))
|
||||
.join("")}?size=512`;
|
||||
};
|
||||
|
||||
const open = ref(false);
|
||||
const gravatarUrl = ref<string | undefined>(undefined);
|
||||
|
||||
const { handleSubmit, isSubmitting } = useForm({
|
||||
validationSchema: schema,
|
||||
});
|
||||
|
||||
const submit = handleSubmit(async (values) => {
|
||||
if ((values as { image: File }).image) {
|
||||
emit("submitFile", (values as { image: File }).image);
|
||||
} else if ((values as { url: string }).url) {
|
||||
emit("submitUrl", (values as { url: string }).url);
|
||||
} else if ((values as { email: string }).email) {
|
||||
emit(
|
||||
"submitUrl",
|
||||
await emailToGravatar((values as { email: string }).email),
|
||||
);
|
||||
}
|
||||
|
||||
open.value = false;
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue