fix mixed bindings
This commit is contained in:
@@ -4,11 +4,7 @@ window.app.component('lnbits-dialog', {
|
|||||||
props: {
|
props: {
|
||||||
show: {
|
show: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: undefined
|
default: false
|
||||||
},
|
|
||||||
modelValue: {
|
|
||||||
type: Boolean,
|
|
||||||
default: undefined
|
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
@@ -40,7 +36,7 @@ window.app.component('lnbits-dialog', {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
emits: ['update:show', 'update:model-value', 'hide', 'cancel', 'action'],
|
emits: ['update:show', 'hide', 'cancel', 'action'],
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
hasAction() {
|
hasAction() {
|
||||||
@@ -52,27 +48,15 @@ window.app.component('lnbits-dialog', {
|
|||||||
return {
|
return {
|
||||||
label: action.label || 'Action',
|
label: action.label || 'Action',
|
||||||
color: action.color || 'primary',
|
color: action.color || 'primary',
|
||||||
outline: !!action.outline,
|
|
||||||
flat: !!action.flat,
|
|
||||||
unelevated: !!action.unelevated,
|
|
||||||
noCaps: !!action.noCaps,
|
|
||||||
icon: action.icon || undefined,
|
|
||||||
loading: !!action.loading,
|
loading: !!action.loading,
|
||||||
disable: !!action.disable
|
disable: !!action.disable
|
||||||
}
|
}
|
||||||
},
|
|
||||||
|
|
||||||
dialogShow() {
|
|
||||||
if (typeof this.show === 'boolean') return this.show
|
|
||||||
if (typeof this.modelValue === 'boolean') return this.modelValue
|
|
||||||
return false
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
handleModelUpdate(value) {
|
handleModelUpdate(value) {
|
||||||
this.$emit('update:show', value)
|
this.$emit('update:show', value)
|
||||||
this.$emit('update:model-value', value)
|
|
||||||
},
|
},
|
||||||
|
|
||||||
handleHide() {
|
handleHide() {
|
||||||
@@ -84,9 +68,10 @@ window.app.component('lnbits-dialog', {
|
|||||||
this.$emit('cancel')
|
this.$emit('cancel')
|
||||||
},
|
},
|
||||||
|
|
||||||
handleAction() {
|
async handleAction() {
|
||||||
|
try {
|
||||||
if (this.action && typeof this.action.handler === 'function') {
|
if (this.action && typeof this.action.handler === 'function') {
|
||||||
this.action.handler()
|
await this.action.handler()
|
||||||
}
|
}
|
||||||
|
|
||||||
this.$emit('action')
|
this.$emit('action')
|
||||||
@@ -94,6 +79,9 @@ window.app.component('lnbits-dialog', {
|
|||||||
if (this.action && this.action.closeOnClick) {
|
if (this.action && this.action.closeOnClick) {
|
||||||
this.handleModelUpdate(false)
|
this.handleModelUpdate(false)
|
||||||
}
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('lnbits-dialog action handler failed', error)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
:model-value="show"
|
:model-value="show"
|
||||||
:position="position"
|
:position="position"
|
||||||
:persistent="persistent"
|
:persistent="persistent"
|
||||||
@update:model-value="$emit('update:show', $event)"
|
@update:model-value="handleModelUpdate"
|
||||||
@hide="handleHide"
|
@hide="handleHide"
|
||||||
>
|
>
|
||||||
<q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
|
<q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
|
||||||
@@ -17,31 +17,26 @@
|
|||||||
<slot></slot>
|
<slot></slot>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
|
|
||||||
<!-- Footer actions -->
|
<q-card-actions
|
||||||
<q-card-actions class="q-mt-lg" align="right">
|
v-if="showCancel || hasAction"
|
||||||
<!-- Left-aligned buttons -->
|
class="q-mt-lg"
|
||||||
|
align="right"
|
||||||
|
>
|
||||||
<q-btn
|
<q-btn
|
||||||
v-if="showCancel"
|
v-if="showCancel"
|
||||||
v-close-popup
|
v-close-popup
|
||||||
flat
|
flat
|
||||||
:color="cancelColor"
|
:color="cancelColor"
|
||||||
:label="cancelLabel"
|
:label="cancelLabel"
|
||||||
:class="{'q-ml-sm': hasActionsSlot}"
|
|
||||||
@click="handleCancel"
|
@click="handleCancel"
|
||||||
></q-btn>
|
></q-btn>
|
||||||
|
|
||||||
<q-space></q-space>
|
<q-space></q-space>
|
||||||
|
|
||||||
<!-- Right-aligned primary action -->
|
|
||||||
<q-btn
|
<q-btn
|
||||||
v-if="hasAction"
|
v-if="hasAction"
|
||||||
:outline="actionProps.outline"
|
|
||||||
:flat="actionProps.flat"
|
|
||||||
:unelevated="actionProps.unelevated"
|
|
||||||
:no-caps="actionProps.noCaps"
|
|
||||||
:color="actionProps.color"
|
:color="actionProps.color"
|
||||||
:label="actionProps.label"
|
:label="actionProps.label"
|
||||||
:icon="actionProps.icon"
|
|
||||||
:loading="actionProps.loading"
|
:loading="actionProps.loading"
|
||||||
:disable="actionProps.disable"
|
:disable="actionProps.disable"
|
||||||
@click="handleAction"
|
@click="handleAction"
|
||||||
|
|||||||
Reference in New Issue
Block a user