nocodb/packages/nc-gui/components/global/NcSlider.vue

<template>
  <div class="nc-container" :class="{active:modal}" @click="modal=false">
    <div class="nc-content elevation-3 pa-4" @click.stop>
      <slot />
    </div>
  </div>
</template>

<script>

export default {
  name: 'NcSlider',
  props: {
    value: Boolean
  },
  computed: {
    modal: {
      get() {
        return this.value
      },
      set(v) {
        this.$emit('input', v)
      }
    }
  },
  mounted() {
    (document.querySelector('[data-app]') || this.$root.$el).append(this.$el)
  },
  destroyed() {
    this.$el.parentNode && this.$el.parentNode.removeChild(this.$el)
  },
  created() {
    document.body.addEventListener('keyup', this.onKeyup, true)
  },
  beforeDestroy() {
    document.body.removeEventListener('keyup', this.onKeyup, true)
  },

  methods: {
    onKeyup(e) {
      if (e.key === 'Escape') {
        this.modal = false
      }
    }
  }
}
</script>

<style scoped lang="scss">

.nc-container {
  position: fixed;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  right: 0;
  top: 0;

  .nc-content {
    background-color: var(--v-backgroundColorDefault-base);
    height: 100%;
    width: max(50%, 700px);
    position: absolute;
    bottom: 0;
    top: 0;
    right: min(-50%, -700px);
    transition: .3s right;
    overflow-y: auto;
  }

  &.active {
    pointer-events: all;

    & > .nc-content {
      right: 0
    }
  }
}
</style>