<template>
  <q-tab-pane :name="name" :keep-alive="keepAlive">
    <div-form-layout v-if="!loading" columns="2" class="q-mt-sm">
      <slot />
    </div-form-layout>
    <q-inner-loading :visible="loading">
      <q-spinner-gears color="primary" size="50px" />
    </q-inner-loading>
  </q-tab-pane>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import DivFormLayout from './DivFormLayout.vue';

@Component({
  components: { DivFormLayout },
})
export default class ArmTabPane extends Vue {
  @Prop() private name: string;
  @Prop() private keepAlive: boolean;

  @Prop() private schema: any;

  private get loading() {
    return this.schema && this.schema.loading;
  }
}
</script>

<style scoped></style>
