trentlarson/crowd-funder-from-jason
1
0
Fork 0
forked from jsnbuchanan/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

style: reorder v-model and v-bind directives

Browse Source 
Changes:
- Move v-model directives before other attributes
- Move v-bind directives before event handlers
- Reorder attributes for better readability
- Fix template attribute ordering across components
- Improve eslint rules
- add default vite config for testing (handles nostr error too)
This follows Vue.js style guide recommendations for attribute
ordering and improves template consistency.
This commit is contained in:
Matthew Raymer
2025-02-26 09:27:04 +00:00
parent 03178d35e7
commit 3dbb836ae5
62 changed files with 487 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ChoiceButtonDialog.vue
View File

@@ -29,29 +29,29 @@
<p class="text-sm mb-2">{{ text }}</p>
<button
@click="handleOption1(close)"
class="block w-full text-center text-md font-bold capitalize bg-blue-800 text-white px-2 py-2 rounded-md mb-2"
@click="handleOption1(close)"
>
{{ option1Text }}
</button>
<button
@click="handleOption2(close)"
class="block w-full text-center text-md font-bold capitalize bg-blue-700 text-white px-2 py-2 rounded-md mb-2"
@click="handleOption2(close)"
>
{{ option2Text }}
</button>
<button
@click="handleOption3(close)"
class="block w-full text-center text-md font-bold capitalize bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
@click="handleOption3(close)"
>
{{ option3Text }}
</button>
<button
@click="handleCancel(close)"
class="block w-full text-center text-md font-bold capitalize bg-slate-600 text-white px-2 py-2 rounded-md"
@click="handleCancel(close)"
>
Cancel
</button>

2
src/components/ContactNameDialog.vue
View File

@@ -6,10 +6,10 @@
{{ message }}
Note that their name is only stored on this device.
<input
v-model="newText"
type="text"
placeholder="Name"
class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
v-model="newText"
/>
<div class="mt-8">

2
src/components/EntityIcon.vue
View File

@@ -1,5 +1,5 @@
<template>
<div v-html="generateIcon()" class="w-fit"></div>
<div class="w-fit" v-html="generateIcon()"></div>
</template>
<script lang="ts">
import { createAvatar, StyleOptions } from "@dicebear/core";

4
src/components/FeedFilters.vue
View File

@@ -16,8 +16,8 @@
<div class="relative ml-2">
<!-- input -->
<input
type="checkbox"
v-model="hasVisibleDid"
type="checkbox"
name="toggleFilterFromMyContacts"
class="sr-only"
/>
@@ -46,8 +46,8 @@
<div v-if="hasSearchBox" class="relative ml-2">
<!-- input -->
<input
type="checkbox"
v-model="isNearby"
type="checkbox"
name="toggleFilterNearby"
class="sr-only"
/>

4
src/components/GiftedDialog.vue
View File

@@ -5,10 +5,10 @@
{{ customTitle }}
</h1>
<input
v-model="description"
type="text"
class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
:placeholder="prompt || 'What was given?'"
v-model="description"
/>
<div class="flex flex-row justify-center">
<span
@@ -25,9 +25,9 @@
</div>
<input
id="inputGivenAmount"
v-model="amountInput"
type="number"
class="border border-r-0 border-slate-400 px-2 py-2 text-center w-20"
v-model="amountInput"
/>
<div
class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"

8
src/components/HiddenDidDialog.vue
View File

@@ -7,7 +7,7 @@
<!-- Header -->
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold capitalize">{{ roleName }} Details</h2>
<button @click="close" class="text-gray-500 hover:text-gray-700">
<button class="text-gray-500 hover:text-gray-700" @click="close">
<font-awesome icon="times" />
</button>
</div>
@@ -69,7 +69,7 @@
<div class="mt-4">
<span v-if="canShare">
If you'd like an introduction,
<a @click="onClickShareClaim()" class="text-blue-500"
<a class="text-blue-500" @click="onClickShareClaim()"
>click here to share the information with them and ask if they'll
tell you more about the {{ roleName }}.</a
>
@@ -77,8 +77,8 @@
<span v-else>
If you'd like an introduction,
<a
@click="copyToClipboard('A link to this page', windowLocation)"
class="text-blue-500"
@click="copyToClipboard('A link to this page', windowLocation)"
>click here to copy this page, paste it into a message, and ask if
they'll tell you more about the {{ roleName }}.</a
>
@@ -89,8 +89,8 @@
<!-- Footer -->
<div class="flex justify-end">
<button
@click="close"
class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
@click="close"
>
Close
</button>

2
src/components/ImageMethodDialog.vue
View File

@@ -31,7 +31,7 @@
<div class="mt-4">
<span class="mt-2">
... or paste a URL:
<input type="text" v-model="imageUrl" class="border-2" />
<input v-model="imageUrl" type="text" class="border-2" />
</span>
<span class="ml-2">
<font-awesome

2
src/components/ImageViewer.vue
View File

@@ -27,8 +27,8 @@
<img
:src="imageUrl"
class="max-h-[calc(100vh-5rem)] w-full h-full object-contain"
@click.stop
alt="expanded shared content"
@click.stop
/>
</div>
</div>

4
src/components/InviteDialog.vue
View File

@@ -8,18 +8,18 @@
If you want to store your own way, the invitation ID is:
{{ inviteIdentifier }}
<input
v-model="text"
type="text"
placeholder="Notes"
class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
v-model="text"
/>
<!-- Add date selection element -->
Expiration
<input
v-model="expiresAt"
type="date"
class="block rounded border border-slate-400 mb-4 px-3 py-2"
v-model="expiresAt"
/>
<div class="mt-8">

14
src/components/MembersList.vue
View File

@@ -63,9 +63,9 @@
<div class="flex justify-center">
<!-- always have at least one refresh button even without members in case the organizer changes the password -->
<button
@click="fetchMembers"
class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
title="Refresh members list"
@click="fetchMembers"
>
<font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
</button>
@@ -83,22 +83,22 @@
class="flex justify-end"
>
<button
@click="addAsContact(member)"
class="ml-2 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800 transition-colors"
title="Add as contact"
@click="addAsContact(member)"
>
<font-awesome icon="circle-user" class="text-xl" />
</button>
</div>
<button
v-if="member.did !== activeDid"
class="ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 transition-colors"
title="Contact info"
@click="
informAboutAddingContact(
getContactFor(member.did) !== undefined,
)
"
class="ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 transition-colors"
title="Contact info"
>
<font-awesome icon="circle-info" class="text-base" />
</button>
@@ -111,11 +111,11 @@
class="flex items-center"
>
<button
@click="checkWhetherContactBeforeAdmitting(member)"
class="mr-2 w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
:title="
member.member.admitted ? 'Remove member' : 'Admit member'
"
@click="checkWhetherContactBeforeAdmitting(member)"
>
<font-awesome
:icon="member.member.admitted ? 'minus' : 'plus'"
@@ -123,9 +123,9 @@
/>
</button>
<button
@click="informAboutAdmission()"
class="mr-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 transition-colors"
title="Admission info"
@click="informAboutAdmission()"
>
<font-awesome icon="circle-info" class="text-base" />
</button>
@@ -138,9 +138,9 @@
</div>
<div v-if="membersToShow().length > 0" class="flex justify-center mt-4">
<button
@click="fetchMembers"
class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
title="Refresh members list"
@click="fetchMembers"
>
<font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
</button>

6
src/components/OfferDialog.vue
View File

@@ -3,11 +3,11 @@
<div class="dialog">
<h1 class="text-xl font-bold text-center mb-4">Offer Help</h1>
<input
v-model="description"
type="text"
data-testId="inputDescription"
class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
placeholder="Description of what is offered"
v-model="description"
/>
<div class="flex flex-row mt-2">
<span
@@ -17,17 +17,17 @@
{{ libsUtil.UNIT_SHORT[amountUnitCode] }}
</span>
<div
v-if="amountInput !== '0'"
class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
@click="decrement()"
v-if="amountInput !== '0'"
>
<font-awesome icon="chevron-left" />
</div>
<input
v-model="amountInput"
data-testId="inputOfferAmount"
type="number"
class="w-full border border-r-0 border-slate-400 px-2 py-2 text-center"
v-model="amountInput"
/>
<div
class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"

16
src/components/PhotoDialog.vue
View File

@@ -28,7 +28,7 @@
<div v-else-if="blob">
<div v-if="crop">
<VuePictureCropper
:boxStyle="{
:box-style="{
backgroundColor: '#f8f8f8',
margin: 'auto',
}"
@@ -56,8 +56,8 @@
</div>
<div class="absolute bottom-[1rem] left-[1rem] px-2 py-1">
<button
@click="uploadImage"
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white py-1 px-2 rounded-md"
@click="uploadImage"
>
<span>Upload</span>
</button>
@@ -67,8 +67,8 @@
class="absolute bottom-[1rem] right-[1rem] px-2 py-1"
>
<button
@click="retryImage"
class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white py-1 px-2 rounded-md"
@click="retryImage"
>
<span>Retry</span>
</button>
@@ -81,17 +81,17 @@
:resolution="{ width: 375, height: 812 }"
-->
<camera
facingMode="environment"
autoplay
ref="camera"
facing-mode="environment"
autoplay
@started="cameraStarted()"
>
<div
class="absolute portrait:bottom-0 portrait:left-0 portrait:right-0 portrait:pb-2 landscape:right-0 landscape:top-0 landscape:bottom-0 landscape:pr-4 flex landscape:flex-row justify-center items-center"
>
<button
@click="takeImage()"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
@click="takeImage()"
>
<font-awesome icon="camera" class="w-[1em]"></font-awesome>
</button>
@@ -100,16 +100,16 @@
class="absolute portrait:bottom-2 portrait:right-16 landscape:right-0 landscape:bottom-16 landscape:pr-4 flex justify-center items-center"
>
<button
@click="swapMirrorClass()"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
@click="swapMirrorClass()"
>
<font-awesome icon="left-right" class="w-[1em]"></font-awesome>
</button>
</div>
<div v-if="numDevices > 1" class="absolute bottom-2 right-4">
<button
@click="switchCamera()"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
@click="switchCamera()"
>
<font-awesome icon="rotate" class="w-[1em]"></font-awesome>
</button>

4
src/components/ProjectIcon.vue
View File

@@ -5,12 +5,12 @@
target="_blank"
class="h-full w-full object-contain"
>
<div v-html="generateIdenticon()" class="h-full w-full object-contain" />
<div class="h-full w-full object-contain" v-html="generateIdenticon()" />
</a>
<div
v-else
v-html="generateIdenticon()"
class="h-full w-full object-contain"
v-html="generateIdenticon()"
/>
</template>
<script lang="ts">

14
src/components/PushNotificationPermission.vue
View File

@@ -54,16 +54,16 @@
<span class="flex flex-row justify-center">
<span class="mt-2">... at: </span>
<input
type="number"
@change="checkHourInput"
class="rounded-l border border-r-0 border-slate-400 ml-2 mt-2 px-2 py-2 text-center w-20"
v-model="hourInput"
type="number"
class="rounded-l border border-r-0 border-slate-400 ml-2 mt-2 px-2 py-2 text-center w-20"
@change="checkHourInput"
/>
<input
type="number"
@change="checkMinuteInput"
class="border border-slate-400 mt-2 px-2 py-2 text-center w-20"
v-model="minuteInput"
type="number"
class="border border-slate-400 mt-2 px-2 py-2 text-center w-20"
@change="checkMinuteInput"
/>
<span
class="rounded-r border border-slate-400 bg-slate-200 text-center text-blue-500 mt-2 px-2 py-2 w-20"
@@ -88,8 +88,8 @@
</div>
<button
@click="close()"
class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white mt-4 px-2 py-2 rounded-md"
@click="close()"
>
No, Not Now
</button>

2
src/components/UserNameDialog.vue
View File

@@ -6,10 +6,10 @@
{{ sharingExplanation }}
<input
v-model="givenName"
type="text"
placeholder="Name"
class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
v-model="givenName"
/>
<div class="mt-8">