mealie/frontend/src/components/UI/Dialogs/BaseDialog.vue

<template>
  <div>
    <slot name="open" v-bind="{ open }"> </slot>
    <v-dialog v-model="dialog" :width="modalWidth + 'px'" :content-class="top ? 'top-dialog' : undefined">
      <v-card class="pb-10" height="100%">
        <v-app-bar dark :color="color" class="mt-n1 mb-2">
          <v-icon large left>
            {{ titleIcon }}
          </v-icon>
          <v-toolbar-title class="headline"> {{ title }} </v-toolbar-title>
          <v-spacer></v-spacer>
        </v-app-bar>
        <v-progress-linear v-if="loading" indeterminate color="primary"></v-progress-linear>
        <slot> </slot>
        <v-card-actions>
          <slot name="card-actions">
            <v-btn text color="grey" @click="dialog = false">
              {{ $t("general.cancel") }}
            </v-btn>
            <v-spacer></v-spacer>
            <v-btn color="success" @click="submitEvent">
              {{ $t("general.submit") }}
            </v-btn>
          </slot>
        </v-card-actions>

        <slot name="below-actions"> </slot>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
export default {
  props: {
    color: {
      default: "primary",
    },
    title: {
      default: "Modal Title",
    },
    titleIcon: {
      default: "mdi-account",
    },
    modalWidth: {
      default: "500",
    },
    loading: {
      default: false,
    },
    top: {
      default: false,
    },
  },
  data() {
    return {
      dialog: false,
    };
  },
  methods: {
    submitEvent() {
      this.$emit("submit");
      this.close();
    },
    open() {
      this.dialog = true;
    },
    close() {
      this.dialog = false;
    },
  },
};
</script>

<style scoped>
.top-dialog {
  align-self: flex-start;
}
</style>