Skip to content

Instantly share code, notes, and snippets.

@taxilian
Created February 22, 2023 17:18
Show Gist options
  • Save taxilian/ce68f1d759b5f736938fc00fe6fa3fbe to your computer and use it in GitHub Desktop.
Save taxilian/ce68f1d759b5f736938fc00fe6fa3fbe to your computer and use it in GitHub Desktop.
<template>
<v-card>
<v-card-title>
<slot name="title">
<span class="headline" v-text="dialogTitle"></span>
</slot>
</v-card-title>
<v-card-subtitle>
<slot name="subtitle">
<span v-text="$props.dialogSubtitle" />
</slot>
</v-card-subtitle>
<v-card-text>
<v-list-item two-line>
<v-list-item-avatar size="24">
<font-awesome-icon :icon="['fad', 'map-marker-alt']" size="lg" />
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="addr.addr"></v-list-item-title>
<v-list-item-subtitle v-text="cityStateZip"></v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-card-text>
<v-card-actions>
<v-btn color="blue darken-1" text @click="submit(false)" v-text="$props.buttonFalseText"></v-btn>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="submit(true)" :disabled="$v.$invalid" v-text="$props.buttonTrueText"></v-btn>
</v-card-actions>
</v-card>
</template>
<script lang="ts" setup>
import { AddressValidateResponse } from '@shared/apiShared';
import { computed } from 'vue';
const props = withDefaults(defineProps<{
addr: AddressValidateResponse;
dialogTitle: string;
dialogSubtitle: string;
buttonFalseText: string;
buttonTrueText: string;
}>(), {
dialogTitle: 'Is this your address?',
dialogSubtitle: 'We ran your address past the USPS and this is what they returned.',
buttonFalseText: 'No',
buttonTrueText: 'Yes',
});
const emit = defineEmits<{
(e: 'value', param: boolean | null): void;
}>();
// emits('value', props.addr);
function submit(val: boolean | null) {
emit('value', val);
}
const addr = computed(() => props.addr);
const cityStateZip = computed(() => {
let str = `${addr.value.city}, ${addr.value.state} ${addr.value.zip}`;
if (addr.value.zip4) {
str += `-${addr.value.zip4}`;
}
return str;
});
</script>
<style lang="scss">
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment