versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: ♻️ Refine emoji uploader and table UI

Browse source
This commit is contained in:
Jesse Wierzbinski 2025-04-30 16:44:31 +02:00
parent 17bb75733c
commit 412e49dfe2
No known key found for this signature in database
3 changed files with 55 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
components/form/switch.vue Normal file
View file

@ -0,0 +1,28 @@
<template>
<Card class="p-4">
<FormItem class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2">
<CardHeader class="flex flex-col gap-1.5 p-0">
<FormLabel class="font-semibold tracking-tight" :as="CardTitle">
{{ title }}
</FormLabel>
<CardDescription class="text-xs leading-none" v-if="description">
{{ description }}
</CardDescription>
</CardHeader>
<FormControl>
<slot />
</FormControl>
<FormMessage />
</FormItem>
</Card>
</template>
<script lang="ts" setup>
import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card";
import { FormControl, FormItem, FormLabel, FormMessage } from "../ui/form";
const { title, description } = defineProps<{
title: string;
description?: string;
}>();
</script>

18
components/preferences2/emojis/table.vue
View file

@ -35,6 +35,8 @@ import {
} from "@tanstack/vue-table";
import type { Emoji } from "@versia/client/types";
import {
ArrowDownAZ,
ArrowUpAz,
ArrowUpDown,
ChevronDown,
Ellipsis,
@ -112,7 +114,13 @@ const columns: ColumnDef<Emoji>[] = [
}
>
Shortcode
<ArrowUpDown class="ml-2 size-4" />
{column.getIsSorted() === false ? (
<ArrowUpDown class="ml-2 size-4" />
) : column.getIsSorted() === "asc" ? (
<ArrowDownAZ class="ml-2 size-4" />
) : (
<ArrowUpAz class="ml-2 size-4" />
)}
</Button>
);
},
@ -133,7 +141,13 @@ const columns: ColumnDef<Emoji>[] = [
}
>
Category
<ArrowUpDown class="ml-2 size-4" />
{column.getIsSorted() === false ? (
<ArrowUpDown class="ml-2 size-4" />
) : column.getIsSorted() === "asc" ? (
<ArrowDownAZ class="ml-2 size-4" />
) : (
<ArrowUpAz class="ml-2 size-4" />
)}
</Button>
);
},

35
components/preferences2/emojis/uploader.vue
View file

@ -10,7 +10,7 @@
<DialogDescription class="sr-only">
{{ m.frail_great_marten_pet() }}
</DialogDescription>
<form class="p-4 grid gap-6" @submit="submit">
<form class="grid gap-6" @submit="submit">
<div
v-if="values.image"
class="flex items-center justify-around *:size-20 *:p-2 *:rounded *:border *:shadow"
@ -125,32 +125,18 @@
</FormField>
<FormField
v-slot="{ componentField, value, handleChange }"
v-slot="{ value, handleChange }"
v-if="hasEmojiAdmin"
name="global"
:as="Card"
as-child
>
<FormItem
class="grid grid-cols-[1fr_auto] items-center gap-2"
>
<CardHeader class="space-y-0.5 p-0">
<FormLabel :as="CardTitle">
{{ m.pink_sharp_carp_work() }}
</FormLabel>
<CardDescription>
{{ m.dark_pretty_hyena_link() }}
</CardDescription>
</CardHeader>
<FormControl>
<Switch
:checked="value"
@update:checked="handleChange"
v-bind="componentField"
:disabled="isSubmitting"
/>
</FormControl>
<FormMessage />
</FormItem>
<FormSwitch :title="m.pink_sharp_carp_work()" :description="m.dark_pretty_hyena_link()">
<Switch
:model-value="value"
@update:model-value="handleChange"
:disabled="isSubmitting"
/>
</FormSwitch>
</FormField>
<DialogFooter>
@ -178,6 +164,7 @@ import { RolePermission } from "@versia/client/types";
import { useForm } from "vee-validate";
import { toast } from "vue-sonner";
import { z } from "zod";
import FormSwitch from "~/components/form/switch.vue";
import { Button } from "~/components/ui/button";
import {
Card,