text: <template>
    <div class="b-builder-settings-bar">
      <button class="b-builder-settings-bar__closer" @click="$emit('requestClose')">
        <icon-base width="10" height="10" name="close"/>
      </button>
      <h6 class="b-builder-settings-bar__title">
        {{ label }}
      </h6>
      <div v-if="title" class="b-builder-settings-bar__contents">
        <component :is="settingComponent" :builder="builder"/>
      </div>
    </div>
  </template>
  
  <script>
  import BuilderSettingsBarSection from './BuilderSettingsBarSection'
  import BuilderSettingsBarElement from './BuilderSettingsBarElement'
  
  import { mapState } from 'vuex'
  
  export default {
    name: 'BuilderSettingsBar',
  
    props: {
      title: {
        required: true,
        type: String
      },
      builder: {
        type: Object,
        required: true
      }
    },
  
    computed: {
      ...mapState('Sidebar', ['settingObjectType', 'settingObjectLabel']),
  
      label () {
        if (this.settingObjectLabel) {
          return this.settingObjectLabel
        }
        return (this.elementSettings) ? this.settingObjectType : this.title
      },
  
      settingComponent () {
        const suffix = this.settingObjectType === 'section' ? 'Section' : 'Element'
        return `BuilderSettingsBar${suffix}`
      },
  
      elementSettings () {
        return this.settingObjectType !== 'section'
      }
    },
  
    components: {
      BuilderSettingsBarSection,
      BuilderSettingsBarElement
    }
  }
  </script>
  
  <style lang="sass" scoped>
  @import '../../assets/sass/_colors.sass'
  @import '../../assets/sass/_variables.sass'
  
  .b-builder-settings-bar
    position: relative
    width: $size-step*9
    height: 100%
    padding: 2.8rem 0
  
    display: flex
    flex-direction: column
  
    background: $white
    box-shadow: 0px 0.4rem 1rem rgba($black, 0.35)
    &__title
      min-width: 28rem
      margin: 0 0 2.8rem 0
      padding: 0 2.4rem
      color: #272727
      font-size: 1.8rem
      font-weight: bold
      &:first-letter
        text-transform: uppercase
      &.subtitle
        color: rgba(39, 39, 39, 0.5)
        font-size: 1.4rem
        font-weight: normal
        margin: 0 0 1rem
    &__closer
      position: absolute
      right: 1rem
      top: 1rem
      padding: 0.6rem 1rem
      border: 0
      background: transparent
      cursor: pointer
    &__contents
      display: flex
      flex-grow: 2
      overflow: auto
  </style>
  