diff --git a/lnbits/static/js/components/linbits-dialog.js b/lnbits/static/js/components/linbits-dialog.js deleted file mode 100644 index c12c6482b..000000000 --- a/lnbits/static/js/components/linbits-dialog.js +++ /dev/null @@ -1,85 +0,0 @@ -window.app.component('lnbits-dialog', { - template: '#lnbits-dialog', - - props: { - show: { - type: Boolean, - required: true - }, - title: { - type: String, - default: '' - }, - position: { - type: String, - default: 'top' - }, - persistent: { - type: Boolean, - default: true - }, - showCancel: { - type: Boolean, - default: true - }, - cancelLabel: { - type: String, - default: 'Close' - }, - cancelColor: { - type: String, - default: 'grey' - }, - showConfirm: { - type: Boolean, - default: false - }, - confirmLabel: { - type: String, - default: 'Confirm' - }, - confirmColor: { - type: String, - default: 'primary' - }, - confirmOutline: { - type: Boolean, - default: false - }, - confirmFlat: { - type: Boolean, - default: false - }, - confirmLoading: { - type: Boolean, - default: false - }, - confirmDisable: { - type: Boolean, - default: false - } - }, - - emits: ['update:show', 'hide', 'cancel', 'confirm'], - - computed: { - hasActionsSlot() { - return !!this.$slots.actions - } - }, - - methods: { - handleHide() { - this.$emit('update:show', false) - this.$emit('hide') - }, - - handleCancel() { - this.$emit('cancel') - }, - - handleConfirm() { - this.$emit('confirm') - } - } -}) diff --git a/lnbits/static/js/components/lnbits-dialog.js b/lnbits/static/js/components/lnbits-dialog.js new file mode 100644 index 000000000..f0245f6c2 --- /dev/null +++ b/lnbits/static/js/components/lnbits-dialog.js @@ -0,0 +1,103 @@ +window.app.component('lnbits-dialog', { + template: '#lnbits-dialog', + + props: { + show: { + type: Boolean, + default: undefined + }, + modelValue: { + type: Boolean, + default: undefined + }, + title: { + type: String, + default: '' + }, + position: { + type: String, + default: 'top' + }, + persistent: { + type: Boolean, + default: true + }, + showCancel: { + type: Boolean, + default: true + }, + cancelLabel: { + type: String, + default: 'Close' + }, + cancelColor: { + type: String, + default: 'grey' + }, + action: { + type: Object, + default: null + } + }, + + emits: ['update:show', 'update:model-value', 'hide', 'cancel', 'action'], + + computed: { + hasActionsSlot() { + return !!this.$slots.actions + }, + + hasAction() { + return !!(this.action && this.action.label) + }, + + actionProps() { + const action = this.action || {} + return { + label: action.label || 'Action', + color: action.color || 'primary', + outline: !!action.outline, + flat: !!action.flat, + unelevated: !!action.unelevated, + noCaps: !!action.noCaps, + icon: action.icon || null, + loading: !!action.loading, + disable: !!action.disable + } + }, + + dialogShow() { + if (typeof this.show === 'boolean') return this.show + if (typeof this.modelValue === 'boolean') return this.modelValue + return false + } + }, + + methods: { + handleModelUpdate(value) { + this.$emit('update:show', value) + this.$emit('update:model-value', value) + }, + + handleHide() { + this.handleModelUpdate(false) + this.$emit('hide') + }, + + handleCancel() { + this.$emit('cancel') + }, + + handleAction() { + if (this.action && typeof this.action.handler === 'function') { + this.action.handler() + } + + this.$emit('action') + + if (this.action && this.action.closeOnClick) { + this.handleModelUpdate(false) + } + } + } +}) diff --git a/lnbits/static/vendor.json b/lnbits/static/vendor.json index 41751b9b7..69e13e8bd 100644 --- a/lnbits/static/vendor.json +++ b/lnbits/static/vendor.json @@ -95,8 +95,12 @@ "js/components/lnbits-label-selector.js", "js/components/extension-settings.js", "js/components/data-fields.js", + "js/components/lnbits-dialog.js", "js/components.js", "js/init-app.js" ], - "css": ["vendor/quasar.css", "css/base.css"] -} + "css": [ + "vendor/quasar.css", + "css/base.css" + ] +} \ No newline at end of file diff --git a/lnbits/templates/components.vue b/lnbits/templates/components.vue index 3aa97f337..8c008f620 100644 --- a/lnbits/templates/components.vue +++ b/lnbits/templates/components.vue @@ -30,7 +30,8 @@ include('components/lnbits-wallet-share.vue') %} {% include('components/lnbits-wallet-charts.vue') %} {% include('components/lnbits-wallet-paylinks.vue') %} {% include('components/lnbits-wallet-extra.vue') %} {% -include('components/lnbits-error.vue') %} +include('components/lnbits-error.vue') %} {% +include('components/lnbits-dialog.vue') %} diff --git a/package.json b/package.json index f2a7778c3..06aa6603c 100644 --- a/package.json +++ b/package.json @@ -123,6 +123,7 @@ "js/components/admin/lnbits-admin-site-customisation.js", "js/components/admin/lnbits-admin-assets-config.js", "js/components/admin/lnbits-admin-audit.js", + "js/components/lnbits-dialog.js", "js/components/lnbits-wallet-charts.js", "js/components/lnbits-wallet-api-docs.js", "js/components/lnbits-wallet-icon.js", @@ -156,4 +157,4 @@ "css/base.css" ] } -} +} \ No newline at end of file