93 lines
1.8 KiB
Vue
93 lines
1.8 KiB
Vue
<template>
|
|
<q-dialog ref="dialog">
|
|
<q-card :style="'width:' + props.width">
|
|
<q-card-section
|
|
v-if="props.dialogLabel"
|
|
class="text-h6 text-center"
|
|
:class="'text-' + props.labelColor"
|
|
>{{ props.dialogLabel }}</q-card-section
|
|
>
|
|
<q-card-section v-if="props.text" class="text-center" style="white-space: pre-line">{{
|
|
props.text
|
|
}}</q-card-section>
|
|
<q-card-actions align="right" class="text-primary">
|
|
<q-btn
|
|
v-if="props.buttonCancelLabel"
|
|
:flat="props.buttonCancelFlat"
|
|
:label="props.buttonCancelLabel"
|
|
v-close-popup
|
|
>
|
|
</q-btn>
|
|
<q-btn
|
|
v-if="props.buttonOkLabel"
|
|
:flat="props.buttonOkFlat"
|
|
:label="props.buttonOkLabel"
|
|
:color="props.buttonOkColor"
|
|
v-close-popup
|
|
@click="confirm"
|
|
>
|
|
</q-btn>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
|
|
const props = defineProps({
|
|
buttonOkLabel: {
|
|
type: String,
|
|
default: 'OK',
|
|
},
|
|
buttonOkColor: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
buttonOkFlat: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
labelColor: {
|
|
type: String,
|
|
default: 'primary',
|
|
},
|
|
dialogLabel: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
text: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
buttonCancelLabel: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
buttonCancelFlat: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '300px',
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['update-confirm']);
|
|
|
|
const dialog = ref();
|
|
const localInput = ref();
|
|
|
|
const open = (input?: unknown) => {
|
|
localInput.value = input;
|
|
dialog.value?.show();
|
|
};
|
|
|
|
const confirm = () => {
|
|
emit('update-confirm', localInput.value);
|
|
};
|
|
|
|
defineExpose({ open });
|
|
</script>
|