app_vue2/components/Ui/ExpansionPanel.vue

<!--
Panneaux déroulants de type "accordéon"

@see https://vuetifyjs.com/en/components/expansion-panels/
-->

<template>
  <v-expansion-panel :id="id">
    <v-expansion-panel-header color="ot_light_grey">
      <v-icon class="ot_white--text ot_green icon">
        {{ icon }}
      </v-icon>
      {{ $t(id) }}
    </v-expansion-panel-header>
    <v-expansion-panel-content>
      <slot />
    </v-expansion-panel-content>
  </v-expansion-panel>
</template>

<script lang="ts">
export default {
  props: {
    id: {
      type: String,
      required: true
    },
    icon: {
      type: String,
      required: false,
      default: null
    }
  }
}
</script>

<style scoped>
  .icon{
    width: 47px;
    height: 47px;
    padding: 10px;
    margin-right: 10px;
    flex: none !important;
  }
  .v-expansion-panel-header{
    padding: 0;
    padding-right: 20px;
  }
  .v-expansion-panel--active > .v-expansion-panel-header{
    min-height: 47px;
  }
</style>