Skip to content

Commit 306715c

Browse files
hmbanan666hmbanan666
authored
chore: inputs rework (#100)
1 parent ca02361 commit 306715c

10 files changed

Lines changed: 101 additions & 86 deletions

File tree

‎apps/atrium-telegram/app/app.config.ts‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,25 @@
11
export default defineAppConfig({
22
ui: {
3+
input: {
4+
slots: {
5+
base: '!ring-muted',
6+
},
7+
},
8+
inputMenu: {
9+
slots: {
10+
base: '!ring-muted',
11+
},
12+
},
13+
selectMenu: {
14+
slots: {
15+
base: '!ring-muted',
16+
},
17+
},
18+
textarea: {
19+
slots: {
20+
base: '!ring-muted',
21+
},
22+
},
323
button: {
424
slots: {
525
base: 'font-semibold',
@@ -28,7 +48,7 @@ export default defineAppConfig({
2848
slots: {
2949
content: 'divide-y-0 !ring-muted/50',
3050
header: 'pb-0 min-h-12',
31-
title: 'text-lg/5 font-semibold',
51+
title: 'font-semibold',
3252
},
3353
},
3454
navigationMenu: {

‎apps/atrium-telegram/app/app.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
<UApp
33
:locale="locales[locale]"
44
:tooltip="{ delayDuration: 0 }"
5-
:toaster="{ position: 'top-center' }"
5+
:toaster="{
6+
position: 'top-center',
7+
class: 'mt-16',
8+
}"
69
class="min-h-svh"
710
>
811
<NuxtLoadingIndicator :color="false" class="bg-primary h-[2px]" />

‎apps/atrium-telegram/app/components/Navigation.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ const mainRoutes = computed(() => [
4545
{
4646
path: '/epic',
4747
name: 'quests',
48-
title: 'Секрет',
49-
icon: 'i-lucide-lock',
48+
title: 'Эпики',
49+
icon: 'i-lucide-crown',
5050
},
5151
{
5252
path: '/secret1',

‎apps/atrium-telegram/app/components/form/CompleteTask.vue‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<UTextarea
1919
v-model="state.report"
2020
:rows="4"
21-
size="lg"
21+
size="xl"
2222
class="w-full"
2323
/>
2424
</UFormField>
@@ -27,7 +27,7 @@
2727
type="submit"
2828
variant="solid"
2929
color="secondary"
30-
size="lg"
30+
size="xl"
3131
trailing-icon="i-lucide-flag"
3232
block
3333
:label="$t('app.update.task.close')"
@@ -49,9 +49,7 @@ const { taskId } = defineProps<{
4949
5050
const emit = defineEmits(['success', 'submitted'])
5151
52-
const { t } = useI18n()
5352
const { vibrate } = useFeedback()
54-
const actionToast = useActionToast()
5553
const userStore = useUserStore()
5654
const taskStore = useTaskStore()
5755
@@ -63,7 +61,6 @@ const state = ref<Partial<CompleteTask>>({
6361
})
6462
6563
async function onSubmit(event: FormSubmitEvent<CompleteTask>) {
66-
const toastId = actionToast.start()
6764
emit('submitted')
6865
6966
try {
@@ -80,12 +77,10 @@ async function onSubmit(event: FormSubmitEvent<CompleteTask>) {
8077
userStore.update(),
8178
])
8279
83-
actionToast.success(toastId, t('toast.task-completed'))
8480
vibrate('success')
8581
emit('success')
8682
} catch (error) {
8783
console.error(error)
88-
actionToast.error(toastId)
8984
vibrate('error')
9085
}
9186
}

‎apps/atrium-telegram/app/components/form/CreateTask.vue‎

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<UInput
1414
v-model="state.name"
1515
:placeholder="$t('app.task.name-placeholder')"
16-
size="lg"
16+
size="xl"
1717
class="w-full items-center justify-center"
1818
/>
1919
</UFormField>
@@ -22,7 +22,7 @@
2222
<UTextarea
2323
v-model="state.description"
2424
:rows="4"
25-
size="lg"
25+
size="xl"
2626
class="w-full"
2727
/>
2828
</UFormField>
@@ -36,44 +36,42 @@
3636
:content="{
3737
side: 'top',
3838
}"
39-
size="lg"
39+
size="xl"
4040
class="w-full"
4141
/>
4242
</UFormField>
4343

44-
<div class="grid grid-cols-1 md:grid-cols-2">
45-
<UPopover>
46-
<UFormField :label="$t('common.date')" name="date">
47-
<UInput
48-
:value="selectedDate ? df.format(selectedDate.toDate(getLocalTimeZone())) : ''"
49-
placeholder="Выберите дату"
50-
size="lg"
51-
class="w-full items-center justify-center cursor-pointer"
52-
:ui="{ trailing: 'pe-1.5' }"
53-
>
54-
<template v-if="selectedDate" #trailing>
55-
<UButton
56-
color="neutral"
57-
variant="ghost"
58-
size="md"
59-
icon="i-lucide-x"
60-
@click="selectedDate = undefined"
61-
/>
62-
</template>
63-
</UInput>
64-
</UFormField>
65-
66-
<template #content>
67-
<UCalendar v-model="selectedDate" class="p-2" />
68-
</template>
69-
</UPopover>
70-
</div>
44+
<UPopover>
45+
<UFormField :label="$t('common.date')" name="date">
46+
<UInput
47+
:value="selectedDate ? df.format(selectedDate.toDate(getLocalTimeZone())) : ''"
48+
placeholder="Выберите дату"
49+
size="xl"
50+
class="w-full items-center justify-center cursor-pointer"
51+
:ui="{ trailing: 'pe-2' }"
52+
>
53+
<template v-if="selectedDate" #trailing>
54+
<UButton
55+
color="neutral"
56+
variant="ghost"
57+
size="md"
58+
icon="i-lucide-x"
59+
@click="selectedDate = undefined"
60+
/>
61+
</template>
62+
</UInput>
63+
</UFormField>
64+
65+
<template #content>
66+
<UCalendar v-model="selectedDate" class="p-2" />
67+
</template>
68+
</UPopover>
7169

7270
<UButton
7371
type="submit"
7472
variant="solid"
7573
color="secondary"
76-
size="lg"
74+
size="xl"
7775
block
7876
class="mt-3"
7977
:label="$t('common.create')"

‎apps/atrium-telegram/app/components/form/CreateTaskList.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<UFormField :label="$t('common.title')" name="name">
99
<UInput
1010
v-model="state.name"
11-
size="lg"
11+
size="xl"
1212
class="w-full items-center justify-center"
1313
/>
1414
</UFormField>
@@ -17,7 +17,7 @@
1717
<UInput
1818
v-model="state.description"
1919
placeholder="Для чего создан и что в нем будет"
20-
size="lg"
20+
size="xl"
2121
class="w-full items-center justify-center"
2222
/>
2323
</UFormField>
@@ -32,7 +32,7 @@
3232
side: 'top',
3333
}"
3434
multiple
35-
size="lg"
35+
size="xl"
3636
class="w-full"
3737
/>
3838
</UFormField>
@@ -41,7 +41,7 @@
4141
type="submit"
4242
variant="solid"
4343
color="secondary"
44-
size="lg"
44+
size="xl"
4545
block
4646
class="mt-3"
4747
:label="$t('common.create')"

‎apps/atrium-telegram/app/components/form/UpdateTask.vue‎

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
>
1313
<UInput
1414
v-model="state.name"
15-
size="lg"
15+
size="xl"
1616
class="w-full items-center justify-center"
1717
/>
1818
</UFormField>
@@ -21,7 +21,7 @@
2121
<UTextarea
2222
v-model="state.description"
2323
:rows="4"
24-
size="lg"
24+
size="xl"
2525
class="w-full"
2626
/>
2727
</UFormField>
@@ -32,45 +32,43 @@
3232
:items="availablePerformersItems"
3333
:avatar="selectedPerformer?.avatar"
3434
:placeholder="$t('common.select')"
35-
size="lg"
35+
size="xl"
3636
class="w-full"
3737
/>
3838
</UFormField>
3939

40-
<div class="grid grid-cols-1">
41-
<UPopover>
42-
<UFormField :label="$t('common.date')" name="date">
43-
<UInput
44-
:value="selectedDate ? df.format(selectedDate.toDate(getLocalTimeZone())) : ''"
45-
placeholder="Выберите дату"
46-
size="lg"
47-
class="w-full items-center justify-center cursor-pointer"
48-
:ui="{ trailing: 'pe-1.5' }"
49-
>
50-
<template v-if="selectedDate" #trailing>
51-
<UButton
52-
color="neutral"
53-
variant="ghost"
54-
size="md"
55-
icon="i-lucide-x"
56-
@click="selectedDate = undefined"
57-
/>
58-
</template>
59-
</UInput>
60-
</UFormField>
61-
62-
<template #content>
63-
<UCalendar v-model="selectedDate" class="p-2" />
64-
</template>
65-
</UPopover>
66-
</div>
40+
<UPopover>
41+
<UFormField :label="$t('common.date')" name="date">
42+
<UInput
43+
:value="selectedDate ? df.format(selectedDate.toDate(getLocalTimeZone())) : ''"
44+
placeholder="Выберите дату"
45+
size="xl"
46+
class="w-full items-center justify-center cursor-pointer"
47+
:ui="{ trailing: 'pe-2' }"
48+
>
49+
<template v-if="selectedDate" #trailing>
50+
<UButton
51+
color="neutral"
52+
variant="ghost"
53+
size="md"
54+
icon="i-lucide-x"
55+
@click="selectedDate = undefined"
56+
/>
57+
</template>
58+
</UInput>
59+
</UFormField>
60+
61+
<template #content>
62+
<UCalendar v-model="selectedDate" class="p-2" />
63+
</template>
64+
</UPopover>
6765

6866
<UFormField label="В проекте" name="listId">
6967
<USelectMenu
7068
v-model="selectedList"
7169
:items="availableLists"
7270
:placeholder="$t('common.select')"
73-
size="lg"
71+
size="xl"
7472
class="w-full"
7573
/>
7674
</UFormField>
@@ -80,15 +78,15 @@
8078
type="submit"
8179
variant="solid"
8280
color="secondary"
83-
size="lg"
81+
size="xl"
8482
block
8583
:label="$t('common.update')"
8684
/>
8785

8886
<UButton
8987
variant="soft"
9088
color="error"
91-
size="lg"
89+
size="xl"
9290
icon="i-lucide-trash-2"
9391
class="aspect-square justify-center"
9492
@click="onDelete"

‎apps/atrium-telegram/app/components/form/UpdateTaskList.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<UFormField :label="$t('common.title')" name="name">
99
<UInput
1010
v-model="state.name"
11-
size="lg"
11+
size="xl"
1212
class="w-full items-center justify-center"
1313
/>
1414
</UFormField>
@@ -17,7 +17,7 @@
1717
<UInput
1818
v-model="state.description"
1919
placeholder="Для чего создан и что в нем будет"
20-
size="lg"
20+
size="xl"
2121
class="w-full items-center justify-center"
2222
/>
2323
</UFormField>
@@ -32,7 +32,7 @@
3232
side: 'top',
3333
}"
3434
multiple
35-
size="lg"
35+
size="xl"
3636
class="w-full"
3737
/>
3838
</UFormField>
@@ -42,15 +42,15 @@
4242
type="submit"
4343
variant="solid"
4444
color="secondary"
45-
size="lg"
45+
size="xl"
4646
block
4747
:label="$t('common.update')"
4848
/>
4949

5050
<UButton
5151
variant="soft"
5252
color="error"
53-
size="lg"
53+
size="xl"
5454
icon="i-lucide-trash-2"
5555
class="aspect-square justify-center"
5656
@click="onDelete"

0 commit comments

Comments
 (0)