nocodb/packages/nc-gui/components/project/spreadsheet/overlay/additinalFeatures.vue

<template>
  <v-overlay
    align="center"
    :color="$store.state.windows.darkTheme ? 'white' : 'black'"
    :dark="$store.state.windows.darkTheme"
    :light="!$store.state.windows.darkTheme"
    absolute v-if="show" opacity=".75" z-index="9">
    <div class="d-flex">
      <v-spacer>
      </v-spacer>
      <v-icon color="red" x-large class="close-icon" @click="show=false">
        mdi-close-circle
      </v-icon>
    </div>
    <div style="width:95%; margin: 0 2.5%" class=" feat-container">
      <!--    <v-card max-height="100%" min-width="95%" max-width="100%" style="overflow: auto">-->
      <!--      <v-card-text>-->

      <table-acl
        v-if="type === 'acl'"
        :nodes="nodes">
      </table-acl>
      <columns
        :deleteTable="deleteTable"
        v-else-if="type === 'columns'"
        :nodes="nodes">
      </columns>
      <indexes
        :deleteTable="deleteTable"
        v-else-if="type === 'indexes'"
        :nodes="nodes">
      </indexes>
      <triggers
        v-else-if="type === 'triggers'"
        :nodes="nodes">
      </triggers>
      <webhooks
        v-else-if="type === 'webhooks'"
        :nodes="nodes">
      </webhooks>
      <validation
        v-else-if="type === 'validators'"
        :nodes="nodes">
      </validation>





      <table-acl
        v-else-if="type === 'view-acl'"
        :nodes="nodes">
      </table-acl>
      <view-columns
        v-else-if="type === 'view-columns'"
        :nodes="nodes">
      </view-columns>

      <shared-views-list
        v-else-if="type === 'shared-views'"
        :model-name="this.table"
        :nodes="nodes">
      </shared-views-list>

      <!--      </v-card-text>-->
      <!--    </v-card>-->
    </div>

  </v-overlay>
  <span v-else></span>
</template>

<script>
import TableAcl from "@/components/project/tableTabs/tableAcl";
import Columns from "@/components/project/tableTabs/columns";
import Indexes from "@/components/project/tableTabs/indexes";
import Triggers from "@/components/project/tableTabs/triggers";
import Webhooks from "@/components/project/tableTabs/webhooks";
import Validation from "@/components/project/tableTabs/validation";
import ViewColumns from "@/components/project/viewTabs/viewColumns";
import SharedViewsList from "@/components/project/spreadsheet/components/sharedViewsList";

export default {
  name: "additional-features",
  components: {SharedViewsList, ViewColumns, Validation, Webhooks, Triggers, Indexes, Columns, TableAcl},
  props: ['value', 'nodes', 'type', 'deleteTable', 'table'],
  computed: {
    show: {
      set(v) {
        this.$emit('input', v);
      }, get() {
        return this.value;
      }
    }
  }
}
</script>

<style scoped>
/deep/ .v-overlay__content {
  width: 100%;
  /*align-self: flex-start;*/
  /*position: relative;*/
  height: 100%;
  display: flex;
}

.close-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 99999;
}

.feat-container {
  position: relative;
  align-self: center;
  margin:auto !important;
}
</style>