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:
26
src/App.vue
26
src/App.vue
@@ -51,8 +51,8 @@
|
||||
<p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
|
||||
|
||||
<button
|
||||
@click="close(notification.id)"
|
||||
class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-slate-200 text-slate-600"
|
||||
@click="close(notification.id)"
|
||||
>
|
||||
<font-awesome icon="xmark" class="fa-fw"></font-awesome>
|
||||
</button>
|
||||
@@ -77,8 +77,8 @@
|
||||
<p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
|
||||
|
||||
<button
|
||||
@click="close(notification.id)"
|
||||
class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-emerald-200 text-emerald-600"
|
||||
@click="close(notification.id)"
|
||||
>
|
||||
<font-awesome icon="xmark" class="fa-fw"></font-awesome>
|
||||
</button>
|
||||
@@ -103,8 +103,8 @@
|
||||
<p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
|
||||
|
||||
<button
|
||||
@click="close(notification.id)"
|
||||
class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-amber-200 text-amber-600"
|
||||
@click="close(notification.id)"
|
||||
>
|
||||
<font-awesome icon="xmark" class="fa-fw"></font-awesome>
|
||||
</button>
|
||||
@@ -129,8 +129,8 @@
|
||||
<p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
|
||||
|
||||
<button
|
||||
@click="close(notification.id)"
|
||||
class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-rose-200 text-rose-600"
|
||||
@click="close(notification.id)"
|
||||
>
|
||||
<font-awesome icon="xmark" class="fa-fw"></font-awesome>
|
||||
</button>
|
||||
@@ -186,11 +186,11 @@
|
||||
|
||||
<button
|
||||
v-if="notification.onYes"
|
||||
class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
|
||||
@click="
|
||||
notification.onYes();
|
||||
close(notification.id);
|
||||
"
|
||||
class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
|
||||
>
|
||||
Yes{{
|
||||
notification.yesText ? ", " + notification.yesText : ""
|
||||
@@ -199,12 +199,12 @@
|
||||
|
||||
<button
|
||||
v-if="notification.onNo"
|
||||
class="block w-full text-center text-md font-bold uppercase bg-yellow-600 text-white px-2 py-2 rounded-md mb-2"
|
||||
@click="
|
||||
notification.onNo(stopAsking);
|
||||
close(notification.id);
|
||||
stopAsking = false; // reset value
|
||||
"
|
||||
class="block w-full text-center text-md font-bold uppercase bg-yellow-600 text-white px-2 py-2 rounded-md mb-2"
|
||||
>
|
||||
No{{ notification.noText ? ", " + notification.noText : "" }}
|
||||
</button>
|
||||
@@ -221,8 +221,8 @@
|
||||
<div class="relative ml-2">
|
||||
<!-- input -->
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="stopAsking"
|
||||
type="checkbox"
|
||||
name="stopAsking"
|
||||
class="sr-only"
|
||||
/>
|
||||
@@ -236,6 +236,7 @@
|
||||
</label>
|
||||
|
||||
<button
|
||||
class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
|
||||
@click="
|
||||
notification.onCancel
|
||||
? notification.onCancel(stopAsking)
|
||||
@@ -243,7 +244,6 @@
|
||||
close(notification.id);
|
||||
stopAsking = false; // reset value for next time they open this modal
|
||||
"
|
||||
class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
|
||||
>
|
||||
{{ notification.onYes ? "Cancel" : "Close" }}
|
||||
</button>
|
||||
@@ -282,8 +282,8 @@
|
||||
Until I turn it back on
|
||||
</button>
|
||||
<button
|
||||
@click="close(notification.id)"
|
||||
class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
|
||||
@click="close(notification.id)"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
@@ -304,17 +304,17 @@
|
||||
</p>
|
||||
|
||||
<button
|
||||
class="block w-full text-center text-md font-bold uppercase bg-rose-600 text-white px-2 py-2 rounded-md mb-2"
|
||||
@click="
|
||||
close(notification.id);
|
||||
turnOffNotifications(notification);
|
||||
"
|
||||
class="block w-full text-center text-md font-bold uppercase bg-rose-600 text-white px-2 py-2 rounded-md mb-2"
|
||||
>
|
||||
Turn Off Notification
|
||||
</button>
|
||||
<button
|
||||
@click="close(notification.id)"
|
||||
class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
|
||||
@click="close(notification.id)"
|
||||
>
|
||||
Leave it On
|
||||
</button>
|
||||
@@ -327,8 +327,6 @@
|
||||
</NotificationGroup>
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component } from "vue-facing-decorator";
|
||||
import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "./db/index";
|
||||
@@ -538,3 +536,5 @@ export default class App extends Vue {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
||||
Reference in New Issue
Block a user