Skip to content

Commit 829c3ca

Browse files
posvaposva
committed
style: format devtools
1 parent 1657258 commit 829c3ca

20 files changed

+85
-93
lines changed

‎devtools/src/PCDevtoolsWrapper.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@ onMounted(() => {
4242
// prefetch the custom element
4343
// FIXME: it would be nice to do some prefetching in vite
4444
// https://github.com/vitejs/vite/issues/10600
45-
const idleCallback
46-
= typeof requestIdleCallback === 'function' ? requestIdleCallback : requestAnimationFrame // not a replacement but until Safari supports
45+
const idleCallback =
46+
typeof requestIdleCallback === 'function' ? requestIdleCallback : requestAnimationFrame // not a replacement but until Safari supports
4747
idleCallback(() => {
4848
import('@pinia/colada-devtools/panel')
4949
})
@@ -60,7 +60,7 @@ onMounted(() => {
6060
title="Open Pinia Colada Devtools"
6161
@click="openDevtools()"
6262
>
63-
<img :src="logoURL" alt="Pinia Colada Devtools Logo">
63+
<img :src="logoURL" alt="Pinia Colada Devtools Logo" />
6464
</button>
6565
<PiniaColadaDevtools v-if="isCEDefined && areDevtoolsOpen" @close="areDevtoolsOpen = false" />
6666
</ClientOnly>

‎devtools/src/PiniaColadaDevtools.vue

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@ queryCache.$onAction(({ name, after, onError, args }) => {
2020
transmitter.emit('queries:delete', createQueryEntryPayload(entry))
2121
})
2222
} else if (
23-
name === 'track'
24-
|| name === 'untrack'
25-
|| name === 'cancel'
26-
|| name === 'invalidate'
27-
|| name === 'fetch'
28-
|| name === 'setEntryState'
23+
name === 'track' ||
24+
name === 'untrack' ||
25+
name === 'cancel' ||
26+
name === 'invalidate' ||
27+
name === 'fetch' ||
28+
name === 'setEntryState'
2929
) {
3030
const [entry] = args
3131
@@ -44,9 +44,9 @@ queryCache.$onAction(({ name, after, onError, args }) => {
4444
4545
// emit an update when the data becomes stale
4646
if (
47-
name === 'fetch'
48-
&& entry.options?.staleTime != null
49-
&& Number.isFinite(entry.options.staleTime)
47+
name === 'fetch' &&
48+
entry.options?.staleTime != null &&
49+
Number.isFinite(entry.options.staleTime)
5050
) {
5151
setTimeout(() => {
5252
transmitter.emit('queries:update', createQueryEntryPayload(entry))

‎devtools/src/app/api/contacts.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ export function searchContacts(
102102
perPage?: number | string
103103
} & Partial<Contact> = {},
104104
options?: Options<'response'>,
105-
): Promise<{ total: number, results: Contact[] }> {
105+
): Promise<{ total: number; results: Contact[] }> {
106106
const query: Record<string, string | null | undefined | number | boolean> = filterInfo as Record<
107107
string,
108108
string | boolean | number | null

‎devtools/src/app/app.vue

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,9 @@ import { PiniaColadaDevtools } from '@pinia/colada-devtools'
66
<header>
77
<div class="wrapper">
88
<nav>
9-
<RouterLink to="/contacts">
10-
Contacts
11-
</RouterLink>
9+
<RouterLink to="/contacts"> Contacts </RouterLink>
1210
|
13-
<RouterLink to="/multi-types">
14-
Multi types
15-
</RouterLink>
11+
<RouterLink to="/multi-types"> Multi types </RouterLink>
1612
</nav>
1713
</div>
1814
</header>

‎devtools/src/app/components/ContactCard.vue

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -36,29 +36,25 @@ function randomizeAvatar() {
3636
<template>
3737
<div class="space-y-6">
3838
<div v-if="isEditing && copy" class="flex flex-col items-center mx-auto">
39-
<img :key="copy.photoURL" class="w-40 h-40 mx-auto rounded-full" :src="copy.photoURL">
40-
<button class="mt-1" @click="randomizeAvatar">
41-
Randomize photo
42-
</button>
39+
<img :key="copy.photoURL" class="w-40 h-40 mx-auto rounded-full" :src="copy.photoURL" />
40+
<button class="mt-1" @click="randomizeAvatar">Randomize photo</button>
4341
</div>
44-
<img v-else class="w-40 h-40 mx-auto rounded-full" :src="contact.photoURL">
42+
<img v-else class="w-40 h-40 mx-auto rounded-full" :src="contact.photoURL" />
4543

4644
<div class="space-y-2">
4745
<div class="space-y-1 font-medium leading-6 text-center">
4846
<form v-if="copy" class="flex flex-col max-w-md mx-auto" @submit.prevent="saveEdits()">
4947
<label for="contact-edit-first-name"> First Name </label>
50-
<input id="contact-edit-first-name" v-model="copy.firstName" type="text">
48+
<input id="contact-edit-first-name" v-model="copy.firstName" type="text" />
5149
<label for="contact-edit-last-name"> Last Name </label>
52-
<input id="contact-edit-last-name" v-model="copy.lastName" type="text">
50+
<input id="contact-edit-last-name" v-model="copy.lastName" type="text" />
5351
<label for="contact-edit-bio"> Bio: </label>
5452
<textarea id="contact-edit-bio" v-model="copy.bio" cols="30" rows="5" />
5553

56-
<hr>
54+
<hr />
5755

5856
<button>Save</button>
59-
<button type="button" @click="cancelEdit()">
60-
Cancel
61-
</button>
57+
<button type="button" @click="cancelEdit()">Cancel</button>
6258
</form>
6359

6460
<template v-else>
@@ -74,12 +70,10 @@ function randomizeAvatar() {
7470
</div>
7571

7672
<template v-if="!isEditing">
77-
<hr>
73+
<hr />
7874

7975
<div class="flex justify-end px-6 mx-auto space-x-2">
80-
<button @click="startEdit()">
81-
Edit
82-
</button>
76+
<button @click="startEdit()">Edit</button>
8377
</div>
8478
</template>
8579
</div>

‎devtools/src/app/pages/contacts.vue

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,16 @@ async function prefetchContact(id: number) {
1414

1515
<template>
1616
<main class="big-layout">
17-
<h1 class="mb-12">
18-
📇 My Contacts
19-
</h1>
17+
<h1 class="mb-12">📇 My Contacts</h1>
2018

2119
<div>
22-
<button @click="prefetchContact(2)">
23-
Prefetch Contact 2
24-
</button>
20+
<button @click="prefetchContact(2)">Prefetch Contact 2</button>
2521
</div>
2622

2723
<div class="gap-4 contacts-search md:flex">
2824
<div>
2925
<form class="space-x-2" @submit.prevent>
30-
<input v-model="searchText" autofocus type="search" placeholder="Eduardo">
26+
<input v-model="searchText" autofocus type="search" placeholder="Eduardo" />
3127
<div v-if="asyncStatus === 'loading'">
3228
<span class="spinner" /><span> Fetching...</span>
3329
</div>
@@ -40,7 +36,7 @@ async function prefetchContact(id: number) {
4036
v-if="contact.photoURL"
4137
:src="contact.photoURL"
4238
class="inline-block w-8 rounded-full"
43-
>
39+
/>
4440
{{ contact.firstName }} {{ contact.lastName }}
4541
</router-link>
4642
</li>

‎devtools/src/app/pages/multi-types.vue

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,7 @@ const { data } = useQuery({
4444

4545
<template>
4646
<main class="big-layout">
47-
<h1 class="mb-12">
48-
All types display test
49-
</h1>
47+
<h1 class="mb-12">All types display test</h1>
5048

5149
<p>Data requires custom serialization. Has data: {{ !!data }}</p>
5250
</main>

‎devtools/src/button-style.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
color-scheme: light dark;
1515

1616
--bg-color: light-dark(rgb(225, 255, 255), rgb(0, 20, 30));
17-
--fg-color: light-dark( rgb(0, 20, 30), rgb(225, 255, 255));
17+
--fg-color: light-dark(rgb(0, 20, 30), rgb(225, 255, 255));
1818

1919
padding: 5px 5px;
2020
border-radius: 50%;
@@ -41,7 +41,8 @@
4141
outline-offset: 2px;
4242
}
4343

44-
&:hover, &:focus {
44+
&:hover,
45+
&:focus {
4546
cursor: pointer;
4647
border-width: 2px;
4748
border-color: color-mix(in srgb, var(--fg-color), black 10%);

‎devtools/src/panel/components/ListQueryEntry.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -97,12 +97,12 @@ const status = computed(() => getQueryStatus(entry))
9797
</div>
9898
<div
9999
v-else-if="
100-
!entry.active
101-
&& entry.gcTimeout
102-
&& entry.devtools.inactiveAt
103-
&& typeof entry.options?.gcTime === 'number'
104-
&& Number.isFinite(entry.options.gcTime)
105-
&& entry.options.gcTime <= 30_000
100+
!entry.active &&
101+
entry.gcTimeout &&
102+
entry.devtools.inactiveAt &&
103+
typeof entry.options?.gcTime === 'number' &&
104+
Number.isFinite(entry.options.gcTime) &&
105+
entry.options.gcTime <= 30_000
106106
"
107107
title="This query will be garbage collected"
108108
>

‎devtools/src/panel/components/ResizablePanel.vue

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,21 @@ function startResizing() {
2121
isResizing.value = true
2222
}
2323
24-
useEventListener(window, 'mousemove', (e: MouseEvent) => {
25-
if (!isResizing.value) return
26-
27-
// Clamp the translate value between 20vh and 80% of the viewport height
28-
const maxTranslate = window.innerHeight * 0.8
29-
const minTranslate = window.innerHeight * 0.2
30-
const rawTranslate = window.innerHeight - e.clientY
31-
32-
translate.value = Math.min(maxTranslate, Math.max(minTranslate, rawTranslate))
33-
}, { passive: true })
24+
useEventListener(
25+
window,
26+
'mousemove',
27+
(e: MouseEvent) => {
28+
if (!isResizing.value) return
29+
30+
// Clamp the translate value between 20vh and 80% of the viewport height
31+
const maxTranslate = window.innerHeight * 0.8
32+
const minTranslate = window.innerHeight * 0.2
33+
const rawTranslate = window.innerHeight - e.clientY
34+
35+
translate.value = Math.min(maxTranslate, Math.max(minTranslate, rawTranslate))
36+
},
37+
{ passive: true },
38+
)
3439
3540
useEventListener(window, 'mouseup', () => {
3641
isResizing.value = false

0 commit comments

Comments
 (0)