mirror of
https://github.com/versia-pub/frontend.git
synced 2026-03-13 03:29:16 +01:00
style: 🎨 Format code with Biome
This commit is contained in:
Jesse Wierzbinski
parent
7ff9d2302a
commit
3627ac0ef8
296 changed files with 3257 additions and 2808 deletions
|
|
@ -1,17 +1,43 @@
|
|||
<template>
|
||||
<section class="space-y-2">
|
||||
<CardTitle class="text-xs">
|
||||
{{ name }}
|
||||
</CardTitle>
|
||||
<CardTitle class="text-xs">{{ name }}</CardTitle>
|
||||
<Card class="p-0 gap-0">
|
||||
<div v-for="preference of preferences" :key="preference">
|
||||
<TextPreferenceVue v-if="(prefs[preference] instanceof TextPreference)" :pref="(prefs[preference] as TextPreference)" :name="preference" />
|
||||
<BooleanPreferenceVue v-else-if="(prefs[preference] instanceof BooleanPreference)" :pref="(prefs[preference] as BooleanPreference)" :name="preference" />
|
||||
<SelectPreferenceVue v-else-if="(prefs[preference] instanceof SelectPreference)" :pref="(prefs[preference] as SelectPreference<string>)" :name="preference" />
|
||||
<NumberPreferenceVue v-else-if="(prefs[preference] instanceof NumberPreference)" :pref="(prefs[preference] as NumberPreference)" :name="preference" />
|
||||
<MultiSelectPreferenceVue v-else-if="(prefs[preference] instanceof MultiSelectPreference)" :pref="(prefs[preference] as MultiSelectPreference<string>)" :name="preference" />
|
||||
<CodePreferenceVue v-else-if="(prefs[preference] instanceof CodePreference)" :pref="(prefs[preference] as CodePreference)" :name="preference" />
|
||||
<UrlPreferenceVue v-else-if="(prefs[preference] instanceof UrlPreference)" :pref="(prefs[preference] as UrlPreference)" :name="preference" />
|
||||
<TextPreferenceVue
|
||||
v-if="(prefs[preference] instanceof TextPreference)"
|
||||
:pref="(prefs[preference] as TextPreference)"
|
||||
:name="preference"
|
||||
/>
|
||||
<BooleanPreferenceVue
|
||||
v-else-if="(prefs[preference] instanceof BooleanPreference)"
|
||||
:pref="(prefs[preference] as BooleanPreference)"
|
||||
:name="preference"
|
||||
/>
|
||||
<SelectPreferenceVue
|
||||
v-else-if="(prefs[preference] instanceof SelectPreference)"
|
||||
:pref="(prefs[preference] as SelectPreference<string>)"
|
||||
:name="preference"
|
||||
/>
|
||||
<NumberPreferenceVue
|
||||
v-else-if="(prefs[preference] instanceof NumberPreference)"
|
||||
:pref="(prefs[preference] as NumberPreference)"
|
||||
:name="preference"
|
||||
/>
|
||||
<MultiSelectPreferenceVue
|
||||
v-else-if="(prefs[preference] instanceof MultiSelectPreference)"
|
||||
:pref="(prefs[preference] as MultiSelectPreference<string>)"
|
||||
:name="preference"
|
||||
/>
|
||||
<CodePreferenceVue
|
||||
v-else-if="(prefs[preference] instanceof CodePreference)"
|
||||
:pref="(prefs[preference] as CodePreference)"
|
||||
:name="preference"
|
||||
/>
|
||||
<UrlPreferenceVue
|
||||
v-else-if="(prefs[preference] instanceof UrlPreference)"
|
||||
:pref="(prefs[preference] as UrlPreference)"
|
||||
:name="preference"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
<template>
|
||||
<Card class="grid gap-3 text-sm">
|
||||
<dl class="grid gap-3">
|
||||
<div v-for="[key, value] of data" :key="key" class="flex flex-row items-baseline justify-between gap-4 truncate">
|
||||
<dt class="text-muted-foreground">
|
||||
{{ key }}
|
||||
</dt>
|
||||
<dd class="font-mono" v-if="typeof value === 'string'">{{ value }}</dd>
|
||||
<div
|
||||
v-for="[key, value] of data"
|
||||
:key="key"
|
||||
class="flex flex-row items-baseline justify-between gap-4 truncate"
|
||||
>
|
||||
<dt class="text-muted-foreground">{{ key }}</dt>
|
||||
<dd class="font-mono" v-if="typeof value === 'string'">
|
||||
{{ value }}
|
||||
</dd>
|
||||
<dd class="font-mono" v-else>
|
||||
<component :is="value" />
|
||||
<component :is="value"/>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
|
|
|||
|
|
@ -77,46 +77,70 @@ useListen("preferences:open", () => {
|
|||
|
||||
<template>
|
||||
<Dialog v-model:open="open" v-if="authStore.isSignedIn">
|
||||
<DialogContent class="md:max-w-5xl w-full h-full p-0 md:max-h-[70dvh] overflow-hidden">
|
||||
<Tabs class="md:grid-cols-[auto_minmax(0,1fr)] !grid gap-2 *:p-4 overflow-hidden *:overflow-y-auto *:h-full" orientation="vertical"
|
||||
:default-value="pages[0]">
|
||||
<DialogHeader class="gap-6 grid grid-rows-[auto_minmax(0,1fr)] border-b md:border-b-0 md:border-r min-w-60 text-left">
|
||||
<div class="grid gap-3 items-center grid-cols-[auto_minmax(0,1fr)]">
|
||||
<Avatar :name="authStore.account!.display_name || authStore.account!.username"
|
||||
:src="authStore.account!.avatar" />
|
||||
<DialogContent
|
||||
class="md:max-w-5xl w-full h-full p-0 md:max-h-[70dvh] overflow-hidden"
|
||||
>
|
||||
<Tabs
|
||||
class="md:grid-cols-[auto_minmax(0,1fr)] !grid gap-2 *:p-4 overflow-hidden *:overflow-y-auto *:h-full"
|
||||
orientation="vertical"
|
||||
:default-value="pages[0]"
|
||||
>
|
||||
<DialogHeader
|
||||
class="gap-6 grid grid-rows-[auto_minmax(0,1fr)] border-b md:border-b-0 md:border-r min-w-60 text-left"
|
||||
>
|
||||
<div
|
||||
class="grid gap-3 items-center grid-cols-[auto_minmax(0,1fr)]"
|
||||
>
|
||||
<Avatar
|
||||
:name="authStore.account!.display_name || authStore.account!.username"
|
||||
:src="authStore.account!.avatar"
|
||||
/>
|
||||
<DialogTitle>Preferences</DialogTitle>
|
||||
</div>
|
||||
<DialogDescription class="sr-only">
|
||||
Make changes to your preferences here.
|
||||
</DialogDescription>
|
||||
<TabsList class="md:grid md:grid-cols-1 w-full h-fit *:justify-start !justify-start">
|
||||
<TabsTrigger v-for="page in pages" :key="page" :value="page">
|
||||
<component :is="icons[page]" class="size-4 mr-2" />
|
||||
<TabsList
|
||||
class="md:grid md:grid-cols-1 w-full h-fit *:justify-start !justify-start"
|
||||
>
|
||||
<TabsTrigger
|
||||
v-for="page in pages"
|
||||
:key="page"
|
||||
:value="page"
|
||||
>
|
||||
<component :is="icons[page]" class="size-4 mr-2"/>
|
||||
{{ page }}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</DialogHeader>
|
||||
<TabsContent v-for="page in pages.filter(p => !extraPages.includes(p))" :key="page" :value="page"
|
||||
as-child>
|
||||
<TabsContent
|
||||
v-for="page in pages.filter(p => !extraPages.includes(p))"
|
||||
:key="page"
|
||||
:value="page"
|
||||
as-child
|
||||
>
|
||||
<Page :title="page">
|
||||
<Category v-for="category in categories[page]" :key="category"
|
||||
<Category
|
||||
v-for="category in categories[page]"
|
||||
:key="category"
|
||||
:preferences="Object.entries(preferences).filter(([, p]) => p.options.category === `${page}/${category}`).map(([k,]) => k as keyof typeof preferences)"
|
||||
:name="category" />
|
||||
:name="category"
|
||||
/>
|
||||
</Page>
|
||||
</TabsContent>
|
||||
<TabsContent value="Emojis" as-child>
|
||||
<Page title="Emojis">
|
||||
<Emojis />
|
||||
<Emojis/>
|
||||
</Page>
|
||||
</TabsContent>
|
||||
<TabsContent value="Account" as-child>
|
||||
<Page title="Account">
|
||||
<Profile />
|
||||
<Profile/>
|
||||
</Page>
|
||||
</TabsContent>
|
||||
<TabsContent value="Developer" as-child>
|
||||
<Page title="Developer">
|
||||
<Developer />
|
||||
<Developer/>
|
||||
</Page>
|
||||
</TabsContent>
|
||||
<TabsContent value="About" as-child>
|
||||
|
|
@ -126,25 +150,53 @@ useListen("preferences:open", () => {
|
|||
{{ pkg.description }}
|
||||
</p>
|
||||
|
||||
<Stats />
|
||||
<Stats/>
|
||||
</section>
|
||||
<Separator />
|
||||
<Separator/>
|
||||
<section class="space-y-2">
|
||||
<h3 class="text-lg font-semibold tracking-tight">Developers</h3>
|
||||
<div class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-4">
|
||||
<TinyCard v-if="author1" :account="author1" domain="vs.cpluspatch.com" />
|
||||
<TinyCard v-if="author2" :account="author2" domain="social.lysand.org" />
|
||||
<TinyCard v-if="author3" :account="author3" domain="social.lysand.org" />
|
||||
<TinyCard v-if="author4" :account="author4" domain="v.everypizza.im" />
|
||||
<h3 class="text-lg font-semibold tracking-tight">
|
||||
Developers
|
||||
</h3>
|
||||
<div
|
||||
class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-4"
|
||||
>
|
||||
<TinyCard
|
||||
v-if="author1"
|
||||
:account="author1"
|
||||
domain="vs.cpluspatch.com"
|
||||
/>
|
||||
<TinyCard
|
||||
v-if="author2"
|
||||
:account="author2"
|
||||
domain="social.lysand.org"
|
||||
/>
|
||||
<TinyCard
|
||||
v-if="author3"
|
||||
:account="author3"
|
||||
domain="social.lysand.org"
|
||||
/>
|
||||
<TinyCard
|
||||
v-if="author4"
|
||||
:account="author4"
|
||||
domain="v.everypizza.im"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<Separator />
|
||||
<Separator/>
|
||||
<section class="space-y-2">
|
||||
<h3 class="text-lg font-semibold tracking-tight">Dependencies</h3>
|
||||
<ul class="grid lg:grid-cols-2 gap-2 grid-cols-1 items-center justify-center list-disc ml-6">
|
||||
<li v-for="[dep, version] in Object.entries(pkg.dependencies)" :key="dep">
|
||||
<h3 class="text-lg font-semibold tracking-tight">
|
||||
Dependencies
|
||||
</h3>
|
||||
<ul
|
||||
class="grid lg:grid-cols-2 gap-2 grid-cols-1 items-center justify-center list-disc ml-6"
|
||||
>
|
||||
<li
|
||||
v-for="[dep, version] in Object.entries(pkg.dependencies)"
|
||||
:key="dep"
|
||||
>
|
||||
<code
|
||||
class="rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs font-semibold">
|
||||
class="rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs font-semibold"
|
||||
>
|
||||
{{ dep }}@{{ version }}
|
||||
</code>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<slot />
|
||||
<slot/>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent class="min-w-48">
|
||||
<DropdownMenuContent class="min-w-48">
|
||||
<DropdownMenuItem @click="deleteAll" :disabled="!canEdit">
|
||||
<Delete />
|
||||
<Delete/>
|
||||
{{ m.tense_quick_cod_favor() }}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,18 @@
|
|||
<template>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="ghost" size="icon" title="Open menu" class="size-8 p-0">
|
||||
<MoreHorizontal class="size-4" />
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
title="Open menu"
|
||||
class="size-8 p-0"
|
||||
>
|
||||
<MoreHorizontal class="size-4"/>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent class="min-w-48">
|
||||
<DropdownMenuContent class="min-w-48">
|
||||
<DropdownMenuItem @click="editName">
|
||||
<TextCursorInput />
|
||||
<TextCursorInput/>
|
||||
{{ m.cuddly_such_swallow_hush() }}
|
||||
</DropdownMenuItem>
|
||||
<!-- <DropdownMenuItem @click="editCaption">
|
||||
|
|
@ -16,7 +21,7 @@
|
|||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator /> -->
|
||||
<DropdownMenuItem @click="_delete">
|
||||
<Delete />
|
||||
<Delete/>
|
||||
{{ m.tense_quick_cod_favor() }}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div v-if="authStore.emojis.length > 0" class="grow">
|
||||
<Table :emojis="authStore.emojis" :can-upload="canUpload" />
|
||||
</div>
|
||||
<div v-if="authStore.emojis.length > 0" class="grow">
|
||||
<Table :emojis="authStore.emojis" :can-upload="canUpload"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -282,27 +282,34 @@ const table = useVueTable({
|
|||
<template>
|
||||
<div class="w-full">
|
||||
<div class="flex gap-2 items-center py-4">
|
||||
<Input class="max-w-52 mr-auto" placeholder="Filter emojis..."
|
||||
<Input
|
||||
class="max-w-52 mr-auto"
|
||||
placeholder="Filter emojis..."
|
||||
:model-value="(table.getColumn('shortcode')?.getFilterValue() as string)"
|
||||
@update:model-value="table.getColumn('shortcode')?.setFilterValue($event)" />
|
||||
@update:model-value="table.getColumn('shortcode')?.setFilterValue($event)"
|
||||
/>
|
||||
<Uploader v-if="props.canUpload">
|
||||
<Button variant="outline" size="icon" title="Upload emoji">
|
||||
<Plus class="size-4" />
|
||||
<Plus class="size-4"/>
|
||||
</Button>
|
||||
</Uploader>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="outline">
|
||||
Columns
|
||||
<ChevronDown class="ml-2 size-4" />
|
||||
<ChevronDown class="ml-2 size-4"/>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuCheckboxItem
|
||||
v-for="column in table.getAllColumns().filter((column) => column.getCanHide())" :key="column.id"
|
||||
class="capitalize" :model-value="column.getIsVisible()" @update:model-value="(value) => {
|
||||
v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
|
||||
:key="column.id"
|
||||
class="capitalize"
|
||||
:model-value="column.getIsVisible()"
|
||||
@update:model-value="(value) => {
|
||||
column.toggleVisibility(!!value)
|
||||
}">
|
||||
}"
|
||||
>
|
||||
{{ column.id }}
|
||||
</DropdownMenuCheckboxItem>
|
||||
</DropdownMenuContent>
|
||||
|
|
@ -311,19 +318,40 @@ const table = useVueTable({
|
|||
<div class="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
|
||||
<TableHead v-for="header in headerGroup.headers" :key="header.id" class="">
|
||||
<FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header"
|
||||
:props="header.getContext()" />
|
||||
<TableRow
|
||||
v-for="headerGroup in table.getHeaderGroups()"
|
||||
:key="headerGroup.id"
|
||||
>
|
||||
<TableHead
|
||||
v-for="header in headerGroup.headers"
|
||||
:key="header.id"
|
||||
class=""
|
||||
>
|
||||
<FlexRender
|
||||
v-if="!header.isPlaceholder"
|
||||
:render="header.column.columnDef.header"
|
||||
:props="header.getContext()"
|
||||
/>
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<template v-if="table.getRowModel().rows?.length">
|
||||
<template v-for="row in table.getRowModel().rows" :key="row.id">
|
||||
<TableRow :data-state="row.getIsSelected() && 'selected'">
|
||||
<TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
|
||||
<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
|
||||
<template
|
||||
v-for="row in table.getRowModel().rows"
|
||||
:key="row.id"
|
||||
>
|
||||
<TableRow
|
||||
:data-state="row.getIsSelected() && 'selected'"
|
||||
>
|
||||
<TableCell
|
||||
v-for="cell in row.getVisibleCells()"
|
||||
:key="cell.id"
|
||||
>
|
||||
<FlexRender
|
||||
:render="cell.column.columnDef.cell"
|
||||
:props="cell.getContext()"
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow v-if="row.getIsExpanded()">
|
||||
|
|
@ -335,7 +363,10 @@ const table = useVueTable({
|
|||
</template>
|
||||
|
||||
<TableRow v-else>
|
||||
<TableCell :colspan="columns.length" class="h-24 text-center">
|
||||
<TableCell
|
||||
:colspan="columns.length"
|
||||
class="h-24 text-center"
|
||||
>
|
||||
No results.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
|
@ -345,15 +376,24 @@ const table = useVueTable({
|
|||
|
||||
<div class="flex items-center justify-end space-x-2 py-4">
|
||||
<div class="flex-1 text-sm text-muted-foreground">
|
||||
{{ table.getFilteredSelectedRowModel().rows.length }} of
|
||||
{{ table.getFilteredRowModel().rows.length }} row(s) selected.
|
||||
{{ table.getFilteredSelectedRowModel().rows.length }}of
|
||||
{{ table.getFilteredRowModel().rows.length }}row(s) selected.
|
||||
</div>
|
||||
<div class="space-x-2">
|
||||
<Button variant="outline" size="sm" :disabled="!table.getCanPreviousPage()"
|
||||
@click="table.previousPage()">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="!table.getCanPreviousPage()"
|
||||
@click="table.previousPage()"
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" :disabled="!table.getCanNextPage()" @click="table.nextPage()">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="!table.getCanNextPage()"
|
||||
@click="table.nextPage()"
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
<template>
|
||||
<Dialog v-model:open="open">
|
||||
<DialogTrigger>
|
||||
<slot />
|
||||
<slot/>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogTitle>
|
||||
{{ m.whole_icy_puffin_smile() }}
|
||||
</DialogTitle>
|
||||
<DialogTitle>{{ m.whole_icy_puffin_smile() }}</DialogTitle>
|
||||
<DialogDescription class="sr-only">
|
||||
{{ m.frail_great_marten_pet() }}
|
||||
</DialogDescription>
|
||||
|
|
@ -20,28 +18,28 @@
|
|||
class="h-full object-cover"
|
||||
:src="createObjectURL(values.image as File)"
|
||||
:alt="values.alt"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
<div class="bg-zinc-700">
|
||||
<img
|
||||
class="h-full object-cover"
|
||||
:src="createObjectURL(values.image as File)"
|
||||
:alt="values.alt"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
<div class="bg-zinc-400">
|
||||
<img
|
||||
class="h-full object-cover"
|
||||
:src="createObjectURL(values.image as File)"
|
||||
:alt="values.alt"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
<div class="bg-foreground">
|
||||
<img
|
||||
class="h-full object-cover"
|
||||
:src="createObjectURL(values.image as File)"
|
||||
:alt="values.alt"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -68,15 +66,13 @@
|
|||
<FormDescription>
|
||||
{{ m.lime_late_millipede_urge() }}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="shortcode">
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{{ m.happy_mild_fox_gleam() }}
|
||||
</FormLabel>
|
||||
<FormLabel>{{ m.happy_mild_fox_gleam() }}</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
v-bind="componentField"
|
||||
|
|
@ -86,7 +82,7 @@
|
|||
<FormDescription>
|
||||
{{ m.glad_day_kestrel_amaze() }}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
|
|
@ -101,7 +97,7 @@
|
|||
:disabled="isSubmitting"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
|
|
@ -120,7 +116,7 @@
|
|||
<FormDescription>
|
||||
{{ m.weird_fun_jurgen_arise() }}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
|
|
@ -130,7 +126,10 @@
|
|||
name="global"
|
||||
as-child
|
||||
>
|
||||
<FormSwitch :title="m.pink_sharp_carp_work()" :description="m.dark_pretty_hyena_link()">
|
||||
<FormSwitch
|
||||
:title="m.pink_sharp_carp_work()"
|
||||
:description="m.dark_pretty_hyena_link()"
|
||||
>
|
||||
<Switch
|
||||
:model-value="value"
|
||||
@update:model-value="handleChange"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<Dialog />
|
||||
<Dialog/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
<template>
|
||||
<section class="gap-4 flex flex-col">
|
||||
<h2 class="text-xl font-bold tracking-tight">
|
||||
{{ title }}
|
||||
</h2>
|
||||
<h2 class="text-xl font-bold tracking-tight">{{ title }}</h2>
|
||||
|
||||
<slot />
|
||||
<slot/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,20 @@
|
|||
<template>
|
||||
<form class="grid gap-6" @submit="save">
|
||||
<Transition name="slide-up">
|
||||
<Alert v-if="dirty" class="absolute bottom-2 z-10 inset-x-2 w-[calc(100%-1rem)] grid-cols-[calc(var(--spacing)*4)_1fr_auto]!">
|
||||
<SaveOff class="size-4" />
|
||||
<Alert
|
||||
v-if="dirty"
|
||||
class="absolute bottom-2 z-10 inset-x-2 w-[calc(100%-1rem)] grid-cols-[calc(var(--spacing)*4)_1fr_auto]!"
|
||||
>
|
||||
<SaveOff class="size-4"/>
|
||||
<AlertTitle>Unsaved changes</AlertTitle>
|
||||
<Button variant="secondary" class="w-full row-span-2" type="button" :disabled="submitting">Apply</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
class="w-full row-span-2"
|
||||
type="button"
|
||||
:disabled="submitting"
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
<AlertDescription>
|
||||
Click "apply" to save your changes.
|
||||
</AlertDescription>
|
||||
|
|
@ -12,55 +22,101 @@
|
|||
</Transition>
|
||||
|
||||
<FormField v-slot="{ handleChange, handleBlur }" name="banner">
|
||||
<TextInput :title="m.bright_late_osprey_renew()" :description="m.great_level_lamb_sway()">
|
||||
<Input type="file" accept="image/*" @change="handleChange" @blur="handleBlur" />
|
||||
<TextInput
|
||||
:title="m.bright_late_osprey_renew()"
|
||||
:description="m.great_level_lamb_sway()"
|
||||
>
|
||||
<Input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
@change="handleChange"
|
||||
@blur="handleBlur"
|
||||
/>
|
||||
</TextInput>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ setValue }" name="avatar">
|
||||
<TextInput :title="m.safe_icy_bulldog_quell()">
|
||||
<ImageUploader v-model:image="authStore.account!.avatar" @submit-file="(file) => setValue(file)"
|
||||
@submit-url="(url) => setValue(url)" />
|
||||
<ImageUploader
|
||||
v-model:image="authStore.account!.avatar"
|
||||
@submit-file="(file) => setValue(file)"
|
||||
@submit-url="(url) => setValue(url)"
|
||||
/>
|
||||
</TextInput>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="name">
|
||||
<TextInput :title="m.mild_known_mallard_jolt()" :description="m.lime_dry_skunk_loop()">
|
||||
<Input v-bind="componentField" />
|
||||
<TextInput
|
||||
:title="m.mild_known_mallard_jolt()"
|
||||
:description="m.lime_dry_skunk_loop()"
|
||||
>
|
||||
<Input v-bind="componentField"/>
|
||||
</TextInput>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="username">
|
||||
<TextInput :title="m.neat_silly_dog_prosper()" :description="m.petty_plane_tadpole_earn()">
|
||||
<Input v-bind="componentField" />
|
||||
<TextInput
|
||||
:title="m.neat_silly_dog_prosper()"
|
||||
:description="m.petty_plane_tadpole_earn()"
|
||||
>
|
||||
<Input v-bind="componentField"/>
|
||||
</TextInput>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="bio">
|
||||
<TextInput :title="m.next_caring_ladybug_hack()" :description="m.stale_just_anaconda_earn()">
|
||||
<Textarea rows="10" v-bind="componentField" />
|
||||
<TextInput
|
||||
:title="m.next_caring_ladybug_hack()"
|
||||
:description="m.stale_just_anaconda_earn()"
|
||||
>
|
||||
<Textarea rows="10" v-bind="componentField"/>
|
||||
</TextInput>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ value, handleChange }" name="fields">
|
||||
<Fields :title="m.aqua_mealy_toucan_pride()" :value="value" @update:value="handleChange" />
|
||||
<Fields
|
||||
:title="m.aqua_mealy_toucan_pride()"
|
||||
:value="value"
|
||||
@update:value="handleChange"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ value, handleChange }" name="bot" as-child>
|
||||
<SwitchInput :title="m.gaudy_each_opossum_play()" :description="m.grassy_acidic_gadfly_cure()">
|
||||
<Switch :model-value="value" @update:model-value="handleChange" />
|
||||
<SwitchInput
|
||||
:title="m.gaudy_each_opossum_play()"
|
||||
:description="m.grassy_acidic_gadfly_cure()"
|
||||
>
|
||||
<Switch
|
||||
:model-value="value"
|
||||
@update:model-value="handleChange"
|
||||
/>
|
||||
</SwitchInput>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ value, handleChange }" name="locked" as-child>
|
||||
<SwitchInput :title="m.dirty_moving_shark_emerge()" :description="m.bright_fun_mouse_boil()">
|
||||
<Switch :model-value="value" @update:model-value="handleChange" />
|
||||
<SwitchInput
|
||||
:title="m.dirty_moving_shark_emerge()"
|
||||
:description="m.bright_fun_mouse_boil()"
|
||||
>
|
||||
<Switch
|
||||
:model-value="value"
|
||||
@update:model-value="handleChange"
|
||||
/>
|
||||
</SwitchInput>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ value, handleChange }" name="discoverable" as-child>
|
||||
<SwitchInput :title="m.red_vivid_cuckoo_spark()" :description="m.plain_zany_donkey_dart()">
|
||||
<Switch :model-value="value" @update:model-value="handleChange" />
|
||||
<FormField
|
||||
v-slot="{ value, handleChange }"
|
||||
name="discoverable"
|
||||
as-child
|
||||
>
|
||||
<SwitchInput
|
||||
:title="m.red_vivid_cuckoo_spark()"
|
||||
:description="m.plain_zany_donkey_dart()"
|
||||
>
|
||||
<Switch
|
||||
:model-value="value"
|
||||
@update:model-value="handleChange"
|
||||
/>
|
||||
</SwitchInput>
|
||||
</FormField>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -2,30 +2,64 @@
|
|||
<FormItem>
|
||||
<FormLabel>
|
||||
{{ title }}
|
||||
<Button type="button" variant="secondary" size="icon" class="ml-auto" @click="addField()" :title="m.front_north_eel_gulp()">
|
||||
<Plus />
|
||||
<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 />
|
||||
<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="
|
||||
<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="
|
||||
"
|
||||
/>
|
||||
<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
|
||||
type="button"
|
||||
variant="secondary"
|
||||
size="icon"
|
||||
@click="removeField(index)"
|
||||
>
|
||||
<Trash/>
|
||||
</Button>
|
||||
</div>
|
||||
</VueDraggable>
|
||||
<FormMessage />
|
||||
<FormMessage/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,18 +6,16 @@
|
|||
variant="ghost"
|
||||
class="h-fit w-fit p-0 m-0 relative group border overflow-hidden"
|
||||
>
|
||||
<Avatar class="size-32" :src="image" :name="displayName" />
|
||||
<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 />
|
||||
<Upload/>
|
||||
</div>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogTitle>
|
||||
{{ m.due_hour_husky_prosper() }}
|
||||
</DialogTitle>
|
||||
<DialogTitle>{{ m.due_hour_husky_prosper() }}</DialogTitle>
|
||||
<DialogDescription class="sr-only">
|
||||
{{ m.suave_broad_albatross_drop() }}
|
||||
</DialogDescription>
|
||||
|
|
@ -58,7 +56,7 @@
|
|||
<FormDescription>
|
||||
{{ m.lime_late_millipede_urge() }}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</TabsContent>
|
||||
|
|
@ -83,12 +81,14 @@
|
|||
placeholder="peter.griffin@fox.com"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
<FormMessage/>
|
||||
<div v-if="value" class="grid gap-4 !mt-4">
|
||||
<Label>{{
|
||||
<Label>
|
||||
{{
|
||||
m.witty_honest_wallaby_support()
|
||||
}}</Label>
|
||||
<Avatar class="size-32" :src="gravatarUrl" />
|
||||
}}
|
||||
</Label>
|
||||
<Avatar class="size-32" :src="gravatarUrl"/>
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
|
@ -109,12 +109,14 @@
|
|||
placeholder="https://mysite.com/avatar.webp"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
<FormMessage/>
|
||||
<div v-if="value" class="grid gap-4 !mt-4">
|
||||
<Label>{{
|
||||
<Label>
|
||||
{{
|
||||
m.witty_honest_wallaby_support()
|
||||
}}</Label>
|
||||
<Avatar class="size-32" :src="value" />
|
||||
}}
|
||||
</Label>
|
||||
<Avatar class="size-32" :src="value"/>
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
<template>
|
||||
<Card class="grid gap-3 text-sm max-w-sm">
|
||||
<dl class="grid gap-3">
|
||||
<div v-for="[key, value] of data" :key="key" class="flex flex-row items-baseline justify-between gap-4 truncate">
|
||||
<dt class="text-muted-foreground">
|
||||
{{ key }}
|
||||
</dt>
|
||||
<dd class="font-mono" v-if="typeof value === 'string'">{{ value }}</dd>
|
||||
<div
|
||||
v-for="[key, value] of data"
|
||||
:key="key"
|
||||
class="flex flex-row items-baseline justify-between gap-4 truncate"
|
||||
>
|
||||
<dt class="text-muted-foreground">{{ key }}</dt>
|
||||
<dd class="font-mono" v-if="typeof value === 'string'">
|
||||
{{ value }}
|
||||
</dd>
|
||||
<dd class="font-mono" v-else>
|
||||
<component :is="value" />
|
||||
<component :is="value"/>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<Base :pref="pref" :name="name" v-slot="{ setValue, value }">
|
||||
<Switch @update:model-value="setValue" :model-value="value" />
|
||||
</Base>
|
||||
<TypeBase :pref="pref" :name="name" v-slot="{ setValue, value }">
|
||||
<Switch @update:model-value="setValue" :model-value="value"/>
|
||||
</TypeBase>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Switch } from "~/components/ui/switch";
|
||||
import type { preferences as prefs } from "../preferences";
|
||||
import type { BooleanPreference } from "../types";
|
||||
import Base from "./base.vue";
|
||||
import TypeBase from "./type-base.vue";
|
||||
|
||||
const { pref, name } = defineProps<{
|
||||
pref: BooleanPreference;
|
||||
|
|
|
|||
|
|
@ -1,19 +1,21 @@
|
|||
<template>
|
||||
<Collapsible as-child>
|
||||
<Base :name="name" :pref="pref">
|
||||
<template #default>
|
||||
<CollapsibleTrigger as-child>
|
||||
<Button variant="outline">
|
||||
Open code
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
</template>
|
||||
<template #extra="{ setValue, value }">
|
||||
<CollapsibleContent class="col-span-2 mt-2">
|
||||
<Textarea :rows="10" :model-value="value" @update:model-value="setValue" />
|
||||
</CollapsibleContent>
|
||||
</template>
|
||||
</Base>
|
||||
<TypeBase :name="name" :pref="pref">
|
||||
<template #default>
|
||||
<CollapsibleTrigger as-child>
|
||||
<Button variant="outline">Open code</Button>
|
||||
</CollapsibleTrigger>
|
||||
</template>
|
||||
<template #extra="{ setValue, value }">
|
||||
<CollapsibleContent class="col-span-2 mt-2">
|
||||
<Textarea
|
||||
:rows="10"
|
||||
:model-value="value"
|
||||
@update:model-value="setValue"
|
||||
/>
|
||||
</CollapsibleContent>
|
||||
</template>
|
||||
</TypeBase>
|
||||
</Collapsible>
|
||||
</template>
|
||||
|
||||
|
|
@ -27,7 +29,7 @@ import {
|
|||
import { Textarea } from "~/components/ui/textarea";
|
||||
import type { preferences as prefs } from "../preferences";
|
||||
import type { CodePreference } from "../types";
|
||||
import Base from "./base.vue";
|
||||
import TypeBase from "./type-base.vue";
|
||||
|
||||
const { pref, name } = defineProps<{
|
||||
pref: CodePreference;
|
||||
|
|
|
|||
|
|
@ -1,25 +1,27 @@
|
|||
<template>
|
||||
<Base :pref="pref" :name="name" v-slot="{ setValue, value }">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="outline">
|
||||
Pick
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent class="w-56">
|
||||
<DropdownMenuCheckboxItem v-for="[option, title] in Object.entries(pref.options.options)" :key="option"
|
||||
:model-value="value.includes(option)" @update:model-value="checked => {
|
||||
<TypeBase :pref="pref" :name="name" v-slot="{ setValue, value }">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="outline">Pick</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent class="w-56">
|
||||
<DropdownMenuCheckboxItem
|
||||
v-for="[option, title] in Object.entries(pref.options.options)"
|
||||
:key="option"
|
||||
:model-value="value.includes(option)"
|
||||
@update:model-value="checked => {
|
||||
if (checked) {
|
||||
setValue([...value, option]);
|
||||
} else {
|
||||
setValue(value.filter((v: any) => v !== option));
|
||||
}
|
||||
}">
|
||||
{{ title }}
|
||||
</DropdownMenuCheckboxItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</Base>
|
||||
}"
|
||||
>
|
||||
{{ title }}
|
||||
</DropdownMenuCheckboxItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TypeBase>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -32,7 +34,7 @@ import {
|
|||
} from "~/components/ui/dropdown-menu";
|
||||
import type { preferences as prefs } from "../preferences";
|
||||
import type { MultiSelectPreference } from "../types";
|
||||
import Base from "./base.vue";
|
||||
import TypeBase from "./type-base.vue";
|
||||
|
||||
const { pref, name } = defineProps<{
|
||||
pref: MultiSelectPreference<string>;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,19 @@
|
|||
<template>
|
||||
<Base :pref="pref" :name="name" v-slot="{ setValue, value }">
|
||||
<NumberField :model-value="value" @update:model-value="setValue" :min="pref.options.min" :max="pref.options.max" :step="pref.options.integer ? 1 : pref.options.step">
|
||||
<TypeBase :pref="pref" :name="name" v-slot="{ setValue, value }">
|
||||
<NumberField
|
||||
:model-value="value"
|
||||
@update:model-value="setValue"
|
||||
:min="pref.options.min"
|
||||
:max="pref.options.max"
|
||||
:step="pref.options.integer ? 1 : pref.options.step"
|
||||
>
|
||||
<NumberFieldContent>
|
||||
<NumberFieldDecrement />
|
||||
<NumberFieldInput />
|
||||
<NumberFieldIncrement />
|
||||
<NumberFieldDecrement/>
|
||||
<NumberFieldInput/>
|
||||
<NumberFieldIncrement/>
|
||||
</NumberFieldContent>
|
||||
</NumberField>
|
||||
</Base>
|
||||
</TypeBase>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -20,7 +26,7 @@ import {
|
|||
} from "~/components/ui/number-field";
|
||||
import type { preferences as prefs } from "../preferences";
|
||||
import type { NumberPreference } from "../types";
|
||||
import Base from "./base.vue";
|
||||
import TypeBase from "./type-base.vue";
|
||||
|
||||
const { pref, name } = defineProps<{
|
||||
pref: NumberPreference;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,21 @@
|
|||
<template>
|
||||
<Base :pref="pref" :name="name" v-slot="{ setValue, value }">
|
||||
<TypeBase :pref="pref" :name="name" v-slot="{ setValue, value }">
|
||||
<Select :model-value="value" @update:model-value="setValue">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select an option" />
|
||||
<SelectValue placeholder="Select an option"/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem v-for="[val, title] in Object.entries(pref.options.options)" :value="val">
|
||||
<SelectItem
|
||||
v-for="[val, title] in Object.entries(pref.options.options)"
|
||||
:value="val"
|
||||
>
|
||||
{{ title }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Base>
|
||||
</TypeBase>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -26,7 +29,7 @@ import {
|
|||
} from "~/components/ui/select";
|
||||
import type { preferences as prefs } from "../preferences";
|
||||
import type { SelectPreference } from "../types";
|
||||
import Base from "./base.vue";
|
||||
import TypeBase from "./type-base.vue";
|
||||
|
||||
const { pref, name } = defineProps<{
|
||||
pref: SelectPreference<string>;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,18 @@
|
|||
<template>
|
||||
<Base :pref="pref" :name="name" v-slot="{ setValue, value }">
|
||||
<Input placeholder="Content here..." :model-value="value" @update:model-value="setValue" />
|
||||
</Base>
|
||||
<TypeBase :pref="pref" :name="name" v-slot="{ setValue, value }">
|
||||
<Input
|
||||
placeholder="Content here..."
|
||||
:model-value="value"
|
||||
@update:model-value="setValue"
|
||||
/>
|
||||
</TypeBase>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Input } from "~/components/ui/input";
|
||||
import type { preferences as prefs } from "../preferences";
|
||||
import type { TextPreference } from "../types";
|
||||
import Base from "./base.vue";
|
||||
import TypeBase from "./type-base.vue";
|
||||
|
||||
const { pref, name } = defineProps<{
|
||||
pref: TextPreference;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,22 @@
|
|||
<template>
|
||||
<div class="grid grid-cols-[minmax(0,1fr)_auto] gap-2 hover:bg-muted/40 duration-75 p-4">
|
||||
<div
|
||||
class="grid grid-cols-[minmax(0,1fr)_auto] gap-2 hover:bg-muted/40 duration-75 p-4"
|
||||
>
|
||||
<div class="flex flex-col gap-1">
|
||||
<h3 class="text-sm font-semibold tracking-tight">{{ pref.options.name }}</h3>
|
||||
<small v-if="pref.options.description" class="text-xs font-medium leading-none text-muted-foreground">{{
|
||||
pref.options.description }}</small>
|
||||
<h3 class="text-sm font-semibold tracking-tight">
|
||||
{{ pref.options.name }}
|
||||
</h3>
|
||||
<small
|
||||
v-if="pref.options.description"
|
||||
class="text-xs font-medium leading-none text-muted-foreground"
|
||||
>{{
|
||||
pref.options.description }}</small
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center justify-end">
|
||||
<slot :value="value" :set-value="setValue" />
|
||||
<slot :value="value" :set-value="setValue"/>
|
||||
</div>
|
||||
<slot name="extra" :value="value" :set-value="setValue" />
|
||||
<slot name="extra" :value="value" :set-value="setValue"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -1,19 +1,21 @@
|
|||
<template>
|
||||
<Collapsible as-child>
|
||||
<Base :pref="pref" :name="name">
|
||||
<template #default>
|
||||
<CollapsibleTrigger as-child>
|
||||
<Button variant="outline">
|
||||
Edit URL
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
</template>
|
||||
<template #extra="{ setValue, value }">
|
||||
<CollapsibleContent class="col-span-2 mt-2">
|
||||
<UrlInput placeholder="Type URL or domain here..." :model-value="value" @update:model-value="setValue" />
|
||||
</CollapsibleContent>
|
||||
</template>
|
||||
</Base>
|
||||
<TypeBase :pref="pref" :name="name">
|
||||
<template #default>
|
||||
<CollapsibleTrigger as-child>
|
||||
<Button variant="outline">Edit URL</Button>
|
||||
</CollapsibleTrigger>
|
||||
</template>
|
||||
<template #extra="{ setValue, value }">
|
||||
<CollapsibleContent class="col-span-2 mt-2">
|
||||
<UrlInput
|
||||
placeholder="Type URL or domain here..."
|
||||
:model-value="value"
|
||||
@update:model-value="setValue"
|
||||
/>
|
||||
</CollapsibleContent>
|
||||
</template>
|
||||
</TypeBase>
|
||||
</Collapsible>
|
||||
</template>
|
||||
|
||||
|
|
@ -27,7 +29,7 @@ import {
|
|||
import { Input, UrlInput } from "~/components/ui/input";
|
||||
import type { preferences as prefs } from "../preferences";
|
||||
import type { TextPreference } from "../types";
|
||||
import Base from "./base.vue";
|
||||
import TypeBase from "./type-base.vue";
|
||||
|
||||
const { pref, name } = defineProps<{
|
||||
pref: TextPreference;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue