forked from jsnbuchanan/crowd-funder-for-time-pwa
3b4f4dc125
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.
103 lines
2.5 KiB
Vue
103 lines
2.5 KiB
Vue
<!-- similar to UserNameDialog -->
|
|
<template>
|
|
<div v-if="visible" class="dialog-overlay">
|
|
<div class="dialog">
|
|
<h1 class="text-xl font-bold text-center mb-4">{{ title }}</h1>
|
|
{{ 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"
|
|
/>
|
|
|
|
<div class="mt-8">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
|
<button
|
|
type="button"
|
|
class="block w-full text-center text-lg font-bold 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-2 py-3 rounded-md mb-2"
|
|
@click="onClickSaveChanges()"
|
|
>
|
|
Save
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
|
|
@click="onClickCancel()"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue, Component } from "vue-facing-decorator";
|
|
|
|
@Component
|
|
export default class ContactNameDialog extends Vue {
|
|
cancelCallback: () => void = () => {};
|
|
saveCallback: (name?: string) => void = () => {};
|
|
message = "";
|
|
newText = "";
|
|
title = "Contact Name";
|
|
visible = false;
|
|
|
|
async open(
|
|
title?: string,
|
|
message?: string,
|
|
saveCallback?: (name?: string) => void,
|
|
cancelCallback?: () => void,
|
|
defaultName?: string,
|
|
) {
|
|
this.cancelCallback = cancelCallback || this.cancelCallback;
|
|
this.saveCallback = saveCallback || this.saveCallback;
|
|
this.message = message ?? this.message;
|
|
this.newText = defaultName ?? "";
|
|
this.title = title ?? this.title;
|
|
this.visible = true;
|
|
}
|
|
|
|
async onClickSaveChanges() {
|
|
this.visible = false;
|
|
if (this.saveCallback) {
|
|
this.saveCallback(this.newText);
|
|
}
|
|
}
|
|
|
|
onClickCancel() {
|
|
this.visible = false;
|
|
if (this.cancelCallback) {
|
|
this.cancelCallback();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.dialog-overlay {
|
|
z-index: 50;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.dialog {
|
|
background-color: white;
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
}
|
|
</style>
|