Skip to content

Commit e5fff1f

Browse files
zackhazackha
committed
feat: automatic class sorting with Prettier
1 parent c90729a commit e5fff1f

File tree

6 files changed

+52
-52
lines changed

6 files changed

+52
-52
lines changed

‎app.vue‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
<template>
22
<div class="flex">
3-
<div class="p-1 box-content w-[calc(100%+40px)] mx-auto max-w-[935px] grow">
3+
<div class="mx-auto box-content w-[calc(100%+40px)] max-w-[935px] grow p-1">
44
<Header />
5-
<div role="tablist" class="mb-4 flex items-stretch flex-col max-w-full">
6-
<div class="flex-row flex-nowrap flex items-center gap-4">
7-
<div class="flex-grow flex-shrink flex flex-col text-neutral-300 font-medium">
5+
<div role="tablist" class="mb-4 flex max-w-full flex-col items-stretch">
6+
<div class="flex flex-row flex-nowrap items-center gap-4">
7+
<div class="flex flex-shrink flex-grow flex-col font-medium text-neutral-300">
88
<form
9-
class="flex-grow flex bg-white/10 h-10 transition-all pl-4 pr-3 rounded-xl border border-transparent hover:border-neutral-600 focus-within:border-neutral-600 focus-within:bg-neutral-800/30 group">
10-
<div class="flex items-center gap-4 w-full">
9+
class="group flex h-10 flex-grow rounded-xl border border-transparent bg-white/10 pl-4 pr-3 transition-all focus-within:border-neutral-600 focus-within:bg-neutral-800/30 hover:border-neutral-600">
10+
<div class="flex w-full items-center gap-4">
1111
<div class="flex text-neutral-500">
1212
<Icon name="majesticons:search-line" size="22"></Icon>
1313
</div>
1414
<div class="flex w-full">
1515
<input
16-
class="placeholder:text-neutral-500 bg-transparent outline-none w-full py-2"
16+
class="w-full bg-transparent py-2 outline-none placeholder:text-neutral-500"
1717
v-model="searchTerm"
1818
:placeholder="selectedCategory ? `Search in ${selectedCategory}` : 'Search'" />
1919
</div>
20-
<div @click="searchTerm = ''" class="flex transition-all cursor-pointer text-neutral-500 group-focus-within:visible invisible">
20+
<div @click="searchTerm = ''" class="invisible flex cursor-pointer text-neutral-500 transition-all group-focus-within:visible">
2121
<Icon v-if="!loading" name="solar:close-square-bold" size="24" />
2222
<Icon v-else-if="loading" name="Loading" size="20" />
2323
</div>
@@ -29,18 +29,18 @@
2929
isDropdownCategory = !isDropdownCategory;
3030
isDropdownSortBy = false;
3131
"
32-
class="items-center text-sm justify-center cursor-pointer select-none font-semibold relative">
33-
<div class="flex box-border items-center active:scale-95 bg-white/10 hover:bg-white/20 h-10 transition-all py-1.5 pr-3 pl-4 rounded-xl">
32+
class="relative cursor-pointer select-none items-center justify-center text-sm font-semibold">
33+
<div class="box-border flex h-10 items-center rounded-xl bg-white/10 py-1.5 pl-4 pr-3 transition-all hover:bg-white/20 active:scale-95">
3434
<span class="mr-3">{{ selectedCategory || 'All Categories' }}</span>
3535
<Icon name="ion:chevron-down-outline" size="14" />
3636
</div>
3737
<Transition>
3838
<div
3939
v-if="isDropdownCategory"
40-
class="absolute top-full z-10 text-[13px] font-medium rounded-xl dark:bg-neutral-800/80 border border-white/10 backdrop-blur-xl left-0 mt-3">
41-
<div class="w-44 m-2">
42-
<div @click="selectedCategory = ''" class="py-2 px-3 rounded-lg hover:bg-white/5 transition-all duration-300">
43-
<div class="flex justify-between items-center">
40+
class="absolute left-0 top-full z-10 mt-3 rounded-xl border border-white/10 text-[13px] font-medium backdrop-blur-xl dark:bg-neutral-800/80">
41+
<div class="m-2 w-44">
42+
<div @click="selectedCategory = ''" class="rounded-lg px-3 py-2 transition-all duration-300 hover:bg-white/5">
43+
<div class="flex items-center justify-between">
4444
<div class="mr-4 w-full">All Categories</div>
4545
<Icon v-if="selectedCategory === ''" name="mingcute:check-line" size="16" />
4646
</div>
@@ -49,8 +49,8 @@
4949
v-for="category in categories"
5050
:key="category.id"
5151
@click="selectedCategory = category.name"
52-
class="py-2 px-3 rounded-lg hover:bg-white/5 transition-all duration-300">
53-
<div class="flex justify-between items-center">
52+
class="rounded-lg px-3 py-2 transition-all duration-300 hover:bg-white/5">
53+
<div class="flex items-center justify-between">
5454
<div class="mr-4 w-full">{{ category.name }}</div>
5555
<Icon v-if="selectedCategory === category.name" name="mingcute:check-line" size="16" />
5656
</div>
@@ -64,22 +64,22 @@
6464
isDropdownSortBy = !isDropdownSortBy;
6565
isDropdownCategory = false;
6666
"
67-
class="items-center text-sm justify-center cursor-pointer select-none font-semibold relative">
68-
<div class="flex box-border items-center active:scale-95 bg-white/10 hover:bg-white/20 h-10 transition-all py-1.5 pr-3 pl-4 rounded-xl">
67+
class="relative cursor-pointer select-none items-center justify-center text-sm font-semibold">
68+
<div class="box-border flex h-10 items-center rounded-xl bg-white/10 py-1.5 pl-4 pr-3 transition-all hover:bg-white/20 active:scale-95">
6969
<span class="mr-3">{{ selectedOption }}</span>
7070
<Icon name="ion:chevron-down-outline" size="14" />
7171
</div>
7272
<Transition>
7373
<div
7474
v-if="isDropdownSortBy"
75-
class="absolute top-full z-10 text-[13px] font-medium rounded-xl dark:bg-neutral-800/80 border border-white/10 backdrop-blur-xl right-0 mt-3">
76-
<div class="w-44 m-2">
75+
class="absolute right-0 top-full z-10 mt-3 rounded-xl border border-white/10 text-[13px] font-medium backdrop-blur-xl dark:bg-neutral-800/80">
76+
<div class="m-2 w-44">
7777
<div
7878
v-for="(option, index) in options"
7979
:key="index"
8080
@click="selectedOption = option.value"
81-
class="py-2 px-3 rounded-lg hover:bg-white/5 transition-all duration-300">
82-
<div class="flex justify-between items-center">
81+
class="rounded-lg px-3 py-2 transition-all duration-300 hover:bg-white/5">
82+
<div class="flex items-center justify-between">
8383
<div class="mr-4 w-full">{{ option.value }}</div>
8484
<Icon v-if="selectedOption === option.value" name="mingcute:check-line" size="16" />
8585
</div>
@@ -90,43 +90,43 @@
9090
</div>
9191
</div>
9292
</div>
93-
<div class="grid gap-4 grid-cols-3">
93+
<div class="grid grid-cols-3 gap-4">
9494
<div
9595
v-for="node in products"
9696
:key="node.id"
97-
class="p-2 border border-neutral-800 rounded-2xl group cursor-pointer transition-all hover:bg-neutral-800/40 hover:border-neutral-600">
98-
<div class="relative pb-[133%] mb-3">
97+
class="group cursor-pointer rounded-2xl border border-neutral-800 p-2 transition-all hover:border-neutral-600 hover:bg-neutral-800/40">
98+
<div class="relative mb-3 pb-[133%]">
9999
<NuxtImg
100100
loading="lazy"
101101
:title="node.name"
102102
:alt="node.image.altText || node.name"
103103
:src="node.galleryImages.nodes[0].sourceUrl"
104-
class="object-cover w-full h-full absolute rounded-lg bg-neutral-800" />
104+
class="absolute h-full w-full rounded-lg bg-neutral-800 object-cover" />
105105
<NuxtImg
106106
loading="lazy"
107107
:title="node.name"
108108
:alt="node.image.altText || node.name"
109109
:src="node.image.sourceUrl"
110-
class="object-cover w-full h-full absolute rounded-lg bg-neutral-800 transition-opacity duration-300 group-hover:opacity-0" />
110+
class="absolute h-full w-full rounded-lg bg-neutral-800 object-cover transition-opacity duration-300 group-hover:opacity-0" />
111111
</div>
112-
<div class="px-2 mb-1 text-sm font-semibold gap-6 grid-flow-col grid">
113-
<div class="flex flex-col min-w-0 justify-between gap-1">
114-
<div class="text-neutral-400 text-xs">
112+
<div class="mb-1 grid grid-flow-col gap-6 px-2 text-sm font-semibold">
113+
<div class="flex min-w-0 flex-col justify-between gap-1">
114+
<div class="text-xs text-neutral-400">
115115
{{ node.allPaUrunTipi.nodes[0].name }}
116116
</div>
117-
<div :title="node.name" class="text-ellipsis whitespace-nowrap overflow-hidden">
117+
<div :title="node.name" class="overflow-hidden text-ellipsis whitespace-nowrap">
118118
{{ node.name }}
119119
</div>
120120
</div>
121-
<div class="text-right gap-1 flex flex-col">
122-
<div class="line-through text-neutral-400 text-xs" v-html="node.regularPrice"></div>
123-
<div class="text-[#ff0000] font-bold" v-html="node.salePrice"></div>
121+
<div class="flex flex-col gap-1 text-right">
122+
<div class="text-xs text-neutral-400 line-through" v-html="node.regularPrice"></div>
123+
<div class="font-bold text-[#ff0000]" v-html="node.salePrice"></div>
124124
</div>
125125
</div>
126126
</div>
127127
<ProductSkeleton v-if="loading" />
128128
</div>
129-
<div v-if="!empty && !loading" class="text-lg text-center p-6">
129+
<div v-if="!empty && !loading" class="p-6 text-center text-lg">
130130
<Icon name="heroicons-outline:magnifying-glass" size="99"></Icon>
131131
<div class="py-4">
132132
<span v-if="selectedCategory">
@@ -265,7 +265,7 @@ watch([selectedOption, searchTerm, selectedCategory], ([newSelectedOption, newSe
265265
color-scheme: dark;
266266
}
267267
.v-enter-active {
268-
@apply transition ease-out duration-200;
268+
@apply transition duration-200 ease-out;
269269
}
270270
.v-enter-from,
271271
.v-leave-to {
@@ -276,6 +276,6 @@ watch([selectedOption, searchTerm, selectedCategory], ([newSelectedOption, newSe
276276
@apply transform opacity-100;
277277
}
278278
.v-leave-active {
279-
@apply transition ease-in duration-150;
279+
@apply transition duration-150 ease-in;
280280
}
281281
</style>

‎components/ProductSkeleton.vue‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<template>
2-
<div v-for="i in 9" :key="i" class="p-2 border border-neutral-800 rounded-2xl animate-pulse">
3-
<div class="relative pb-[133%] mb-3">
4-
<div class="w-full h-full absolute rounded-lg bg-neutral-800"></div>
2+
<div v-for="i in 9" :key="i" class="animate-pulse rounded-2xl border border-neutral-800 p-2">
3+
<div class="relative mb-3 pb-[133%]">
4+
<div class="absolute h-full w-full rounded-lg bg-neutral-800"></div>
55
</div>
6-
<div class="px-2 mb-1 grid grid-flow-row-dense grid-cols-3">
7-
<div class="flex flex-col min-w-0 justify-between gap-2 col-span-2">
8-
<div class="bg-neutral-800 w-2/4 h-8 rounded"></div>
9-
<div class="bg-neutral-800 w-full h-full rounded"></div>
6+
<div class="mb-1 grid grid-flow-row-dense grid-cols-3 px-2">
7+
<div class="col-span-2 flex min-w-0 flex-col justify-between gap-2">
8+
<div class="h-8 w-2/4 rounded bg-neutral-800"></div>
9+
<div class="h-full w-full rounded bg-neutral-800"></div>
1010
</div>
11-
<div class="gap-2 flex flex-col items-end">
12-
<div class="bg-neutral-800 w-2/3 h-8 rounded"></div>
13-
<div class="bg-neutral-800 w-3/4 h-full rounded"></div>
11+
<div class="flex flex-col items-end gap-2">
12+
<div class="h-8 w-2/3 rounded bg-neutral-800"></div>
13+
<div class="h-full w-3/4 rounded bg-neutral-800"></div>
1414
</div>
1515
</div>
1616
</div>

‎components/footer/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<button @click="toggleDark" class="flex box-border items-center active:scale-95 dark:bg-white/10 hover:dark:bg-white/20 h-8 transition-all rounded-lg p-2">
2+
<button @click="toggleDark" class="box-border flex h-8 items-center rounded-lg p-2 transition-all active:scale-95 dark:bg-white/10 hover:dark:bg-white/20">
33
<Icon :name="colorModeIcon" size="16"></Icon>
44
</button>
55
</template>

‎components/header/Date.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="mt-4 font-mono">
3-
<div class="text-sm text-center m-auto">{{ time }}</div>
3+
<div class="m-auto text-center text-sm">{{ time }}</div>
44
</div>
55
</template>
66

‎components/header/Logo.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<span class="flex items-center justify-center">
33
<NuxtLink to="/">
4-
<NuxtImg class="my-0 mx-auto h-14" src="https://seeklogo.com/images/S/supreme-ny-logo-AAF66BE276-seeklogo.com.png" />
4+
<NuxtImg class="mx-auto my-0 h-14" src="https://seeklogo.com/images/S/supreme-ny-logo-AAF66BE276-seeklogo.com.png" />
55
</NuxtLink>
66
</span>
77
</template>

‎components/header/index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<div class="pb-11 pt-7 flex justify-center">
3-
<div class="my-0 mx-auto">
2+
<div class="flex justify-center pb-11 pt-7">
3+
<div class="mx-auto my-0">
44
<HeaderLogo />
55
<HeaderDate />
66
</div>

0 commit comments

Comments
 (0)