forked from jsnbuchanan/crowd-funder-for-time-pwa
style: reorder v-model and v-bind directives
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:
@@ -56,13 +56,13 @@
|
||||
class="block w-full text-center text-md bg-amber-200 border border-dashed border-slate-400 px-1.5 py-2 rounded-md mb-2"
|
||||
>
|
||||
<button
|
||||
class="inline-block text-md uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
|
||||
@click="
|
||||
() =>
|
||||
(this.$refs.userNameDialog as UserNameDialog).open(
|
||||
(name) => (this.givenName = name),
|
||||
($refs.userNameDialog as UserNameDialog).open(
|
||||
(name) => (givenName = name),
|
||||
)
|
||||
"
|
||||
class="inline-block text-md uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
|
||||
>
|
||||
Set Your Name
|
||||
</button>
|
||||
@@ -72,14 +72,14 @@
|
||||
<span v-if="profileImageUrl" class="flex justify-between">
|
||||
<EntityIcon
|
||||
:icon-size="96"
|
||||
:profileImageUrl="profileImageUrl"
|
||||
:profile-image-url="profileImageUrl"
|
||||
class="inline-block align-text-bottom border border-slate-300 rounded"
|
||||
@click="showLargeIdenticonUrl = profileImageUrl"
|
||||
/>
|
||||
<font-awesome
|
||||
icon="trash-can"
|
||||
@click="confirmDeleteImage"
|
||||
class="text-red-500 fa-fw ml-8 mt-8 w-12 h-12"
|
||||
@click="confirmDeleteImage"
|
||||
/>
|
||||
</span>
|
||||
<div v-else class="text-center">
|
||||
@@ -104,8 +104,8 @@
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<EntityIcon
|
||||
:entityId="activeDid"
|
||||
:iconSize="64"
|
||||
:entity-id="activeDid"
|
||||
:icon-size="64"
|
||||
class="inline-block align-middle border border-slate-300 rounded-md mr-1"
|
||||
@click="showLargeIdenticonId = activeDid"
|
||||
/>
|
||||
@@ -119,9 +119,9 @@
|
||||
class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
|
||||
>
|
||||
<EntityIcon
|
||||
:entityId="showLargeIdenticonId"
|
||||
:iconSize="512"
|
||||
:profileImageUrl="showLargeIdenticonUrl"
|
||||
:entity-id="showLargeIdenticonId"
|
||||
:icon-size="512"
|
||||
:profile-image-url="showLargeIdenticonUrl"
|
||||
class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
|
||||
@click="
|
||||
showLargeIdenticonId = undefined;
|
||||
@@ -138,10 +138,10 @@
|
||||
>
|
||||
<code class="truncate">{{ activeDid }}</code>
|
||||
<button
|
||||
class="ml-2"
|
||||
@click="
|
||||
doCopyTwoSecRedo(activeDid, () => (showDidCopy = !showDidCopy))
|
||||
"
|
||||
class="ml-2"
|
||||
>
|
||||
<font-awesome icon="copy" class="text-slate-400 fa-fw"></font-awesome>
|
||||
</button>
|
||||
@@ -200,7 +200,7 @@
|
||||
@click="showReminderNotificationChoice()"
|
||||
>
|
||||
<!-- input -->
|
||||
<input type="checkbox" v-model="notifyingReminder" class="sr-only" />
|
||||
<input v-model="notifyingReminder" type="checkbox" class="sr-only" />
|
||||
<!-- line -->
|
||||
<div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
|
||||
<!-- dot -->
|
||||
@@ -230,8 +230,8 @@
|
||||
>
|
||||
<!-- input -->
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="notifyingNewActivity"
|
||||
type="checkbox"
|
||||
class="sr-only"
|
||||
/>
|
||||
<!-- line -->
|
||||
@@ -295,9 +295,9 @@
|
||||
|
||||
<div class="flex items-center mb-4" @click="toggleUserProfileLocation">
|
||||
<input
|
||||
v-model="includeUserProfileLocation"
|
||||
type="checkbox"
|
||||
class="mr-2"
|
||||
v-model="includeUserProfileLocation"
|
||||
/>
|
||||
<label for="includeUserProfileLocation">Include Location</label>
|
||||
</div>
|
||||
@@ -333,17 +333,16 @@
|
||||
<div v-if="!loadingProfile && !savingProfile">
|
||||
<div class="flex justify-between items-center">
|
||||
<button
|
||||
@click="saveProfile"
|
||||
class="mt-2 px-4 py-2 bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-md"
|
||||
:disabled="loadingProfile || savingProfile"
|
||||
:class="{
|
||||
'opacity-50 cursor-not-allowed': loadingProfile || savingProfile,
|
||||
}"
|
||||
@click="saveProfile"
|
||||
>
|
||||
Save Profile
|
||||
</button>
|
||||
<button
|
||||
@click="confirmDeleteProfile"
|
||||
class="mt-2 px-4 py-2 bg-gradient-to-b from-red-400 to-red-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-md"
|
||||
:disabled="loadingProfile || savingProfile"
|
||||
:class="{
|
||||
@@ -352,6 +351,7 @@
|
||||
savingProfile ||
|
||||
(!userProfileDesc && !includeUserProfileLocation),
|
||||
}"
|
||||
@click="confirmDeleteProfile"
|
||||
>
|
||||
Delete Profile
|
||||
</button>
|
||||
@@ -426,15 +426,15 @@
|
||||
>
|
||||
<div class="mb-2 font-bold">Data Export</div>
|
||||
<router-link
|
||||
:to="{ name: 'seed-backup' }"
|
||||
v-if="activeDid"
|
||||
:to="{ name: 'seed-backup' }"
|
||||
class="block w-full text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-2 mt-2"
|
||||
>
|
||||
Backup Identifier Seed
|
||||
</router-link>
|
||||
|
||||
<button
|
||||
v-bind:class="computedStartDownloadLinkClassNames()"
|
||||
:class="computedStartDownloadLinkClassNames()"
|
||||
class="block w-full text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
|
||||
@click="exportDatabase()"
|
||||
>
|
||||
@@ -444,7 +444,7 @@
|
||||
</button>
|
||||
<a
|
||||
ref="downloadLink"
|
||||
v-bind:class="computedDownloadLinkClassNames()"
|
||||
:class="computedDownloadLinkClassNames()"
|
||||
class="block w-full text-center text-md bg-gradient-to-b from-green-500 to-green-800 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
|
||||
>
|
||||
If no download happened yet, click again here to download now.
|
||||
@@ -476,7 +476,7 @@
|
||||
>
|
||||
Advanced
|
||||
</h3>
|
||||
<div id="sectionAdvanced" v-if="showAdvanced || showGeneralAdvanced">
|
||||
<div v-if="showAdvanced || showGeneralAdvanced" id="sectionAdvanced">
|
||||
<p class="text-rose-600 mb-8">
|
||||
Beware: the features here can be confusing and even change data in ways
|
||||
you do not expect. But we support your freedom!
|
||||
@@ -496,10 +496,10 @@
|
||||
>
|
||||
<code class="truncate">{{ publicBase64 }}</code>
|
||||
<button
|
||||
class="ml-2"
|
||||
@click="
|
||||
doCopyTwoSecRedo(publicBase64, () => (showB64Copy = !showB64Copy))
|
||||
"
|
||||
class="ml-2"
|
||||
>
|
||||
<font-awesome
|
||||
icon="copy"
|
||||
@@ -515,10 +515,10 @@
|
||||
>
|
||||
<code class="truncate">{{ publicHex }}</code>
|
||||
<button
|
||||
class="ml-2"
|
||||
@click="
|
||||
doCopyTwoSecRedo(publicHex, () => (showPubCopy = !showPubCopy))
|
||||
"
|
||||
class="ml-2"
|
||||
>
|
||||
<font-awesome
|
||||
icon="copy"
|
||||
@@ -535,13 +535,13 @@
|
||||
>
|
||||
<code class="truncate">{{ derivationPath }}</code>
|
||||
<button
|
||||
class="ml-2"
|
||||
@click="
|
||||
doCopyTwoSecRedo(
|
||||
derivationPath,
|
||||
() => (showDerCopy = !showDerCopy),
|
||||
)
|
||||
"
|
||||
class="ml-2"
|
||||
>
|
||||
<font-awesome
|
||||
icon="copy"
|
||||
@@ -573,7 +573,7 @@
|
||||
</h2>
|
||||
|
||||
<div class="ml-4 mt-2">
|
||||
<input type="file" @change="uploadImportFile" class="ml-2" />
|
||||
<input type="file" class="ml-2" @change="uploadImportFile" />
|
||||
<transition
|
||||
enter-active-class="transform ease-out duration-300 transition"
|
||||
enter-from-class="translate-y-2 opacity-0 sm:translate-y-4"
|
||||
@@ -620,8 +620,8 @@
|
||||
<div class="relative ml-2">
|
||||
<!-- input -->
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="showContactGives"
|
||||
type="checkbox"
|
||||
name="showContactGives"
|
||||
class="sr-only"
|
||||
/>
|
||||
@@ -638,9 +638,9 @@
|
||||
<h2 class="text-slate-500 text-sm font-bold mt-4">Claim Server</h2>
|
||||
<div class="px-4 py-4">
|
||||
<input
|
||||
v-model="apiServerInput"
|
||||
type="text"
|
||||
class="block w-full rounded border border-slate-400 px-4 py-2"
|
||||
v-model="apiServerInput"
|
||||
/>
|
||||
<button
|
||||
v-if="apiServerInput != apiServer"
|
||||
@@ -683,7 +683,7 @@
|
||||
<!-- toggle -->
|
||||
<div class="relative ml-2">
|
||||
<!-- input -->
|
||||
<input type="checkbox" v-model="warnIfProdServer" class="sr-only" />
|
||||
<input v-model="warnIfProdServer" type="checkbox" class="sr-only" />
|
||||
<!-- line -->
|
||||
<div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
|
||||
<!-- dot -->
|
||||
@@ -703,7 +703,7 @@
|
||||
<!-- toggle -->
|
||||
<div class="relative ml-2">
|
||||
<!-- input -->
|
||||
<input type="checkbox" v-model="warnIfTestServer" class="sr-only" />
|
||||
<input v-model="warnIfTestServer" type="checkbox" class="sr-only" />
|
||||
<!-- line -->
|
||||
<div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
|
||||
<!-- dot -->
|
||||
@@ -719,9 +719,9 @@
|
||||
</h2>
|
||||
<div class="px-3 py-4">
|
||||
<input
|
||||
v-model="webPushServerInput"
|
||||
type="text"
|
||||
class="block w-full rounded border border-slate-400 px-3 py-2"
|
||||
v-model="webPushServerInput"
|
||||
/>
|
||||
<button
|
||||
v-if="webPushServerInput != webPushServer"
|
||||
@@ -753,7 +753,7 @@
|
||||
Use Test 2
|
||||
</button>
|
||||
</div>
|
||||
<span class="px-4 text-sm" v-if="!webPushServerInput">
|
||||
<span v-if="!webPushServerInput" class="px-4 text-sm">
|
||||
When that setting is blank, this app will use the default web push
|
||||
server URL:
|
||||
{{ DEFAULT_PUSH_SERVER }}
|
||||
@@ -762,9 +762,9 @@
|
||||
<h2 class="text-slate-500 text-sm font-bold mb-2">Partner Server URL</h2>
|
||||
<div class="px-3 py-4">
|
||||
<input
|
||||
v-model="partnerApiServerInput"
|
||||
type="text"
|
||||
class="block w-full rounded border border-slate-400 px-3 py-2"
|
||||
v-model="partnerApiServerInput"
|
||||
/>
|
||||
<button
|
||||
v-if="partnerApiServerInput != partnerApiServer"
|
||||
@@ -796,7 +796,7 @@
|
||||
Use Local
|
||||
</button>
|
||||
</div>
|
||||
<span class="px-4 text-sm" v-if="!partnerApiServerInput">
|
||||
<span v-if="!partnerApiServerInput" class="px-4 text-sm">
|
||||
When that setting is blank, this app will use the default partner server
|
||||
URL:
|
||||
{{ DEFAULT_PARTNER_API_SERVER }}
|
||||
@@ -821,8 +821,8 @@
|
||||
<div class="relative ml-2">
|
||||
<!-- input -->
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="hideRegisterPromptOnNewContact"
|
||||
type="checkbox"
|
||||
class="sr-only"
|
||||
/>
|
||||
<!-- line -->
|
||||
@@ -846,7 +846,7 @@
|
||||
<!-- toggle -->
|
||||
<div class="relative ml-2">
|
||||
<!-- input -->
|
||||
<input type="checkbox" v-model="showShortcutBvc" class="sr-only" />
|
||||
<input v-model="showShortcutBvc" type="checkbox" class="sr-only" />
|
||||
<!-- line -->
|
||||
<div class="block bg-slate-500 w-14 h-8 rounded-full" />
|
||||
<!-- dot -->
|
||||
@@ -879,9 +879,9 @@
|
||||
</span>
|
||||
<div class="relative ml-2">
|
||||
<input
|
||||
v-model="passkeyExpirationMinutes"
|
||||
type="number"
|
||||
class="border border-slate-400 rounded px-2 py-2 text-center w-20"
|
||||
v-model="passkeyExpirationMinutes"
|
||||
@change="updatePasskeyExpiration"
|
||||
/>
|
||||
</div>
|
||||
@@ -900,8 +900,8 @@
|
||||
<div class="relative ml-2">
|
||||
<!-- input -->
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="showGeneralAdvanced"
|
||||
type="checkbox"
|
||||
class="sr-only"
|
||||
/>
|
||||
<!-- line -->
|
||||
|
||||
Reference in New Issue
Block a user