98 lines
2.0 KiB
Vue
98 lines
2.0 KiB
Vue
<template>
|
|
<div class="content-form-section">
|
|
<h2 class="content-form-section__heading">
|
|
<component
|
|
class="content-form-section__icon"
|
|
:is="icon"
|
|
/> <span class="content-form-section__title">{{ title }}</span>
|
|
</h2>
|
|
|
|
<content-element-actions
|
|
class="content-form-section__actions"
|
|
:actions="actions"
|
|
v-if="actions"
|
|
@remove="$emit('remove')"
|
|
@move-top="$emit('top')"
|
|
@move-up="$emit('up')"
|
|
@move-down="$emit('down')"
|
|
@move-bottom="$emit('bottom')"
|
|
/>
|
|
<div class="content-form-section__content">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import formElementIcons from '@/components/ui/form-element-icons.js';
|
|
import ContentElementActions from '@/components/content-block-form/ContentElementActions.vue';
|
|
import {ActionOptions} from "@/@types";
|
|
|
|
|
|
export default {
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
icon: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
actions: {
|
|
type: Object as () => ActionOptions,
|
|
default: () => {}
|
|
}
|
|
},
|
|
components: {
|
|
ContentElementActions,
|
|
...formElementIcons
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '~styles/helpers';
|
|
|
|
.content-form-section {
|
|
@include default-box-shadow;
|
|
border-radius: $default-border-radius;
|
|
padding: $small-spacing $medium-spacing;
|
|
margin-bottom: $medium-spacing;
|
|
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: auto;
|
|
grid-template-areas: 'h a' 'c c';
|
|
align-items: center;
|
|
grid-row-gap: $medium-spacing;
|
|
|
|
&__heading {
|
|
display: flex;
|
|
align-items: center;
|
|
grid-area: h;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&__actions {
|
|
grid-area: a;
|
|
justify-self: end;
|
|
}
|
|
|
|
&__title {
|
|
@include heading-4;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&__icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-right: $small-spacing;
|
|
}
|
|
|
|
&__content {
|
|
grid-area: c;
|
|
}
|
|
}
|
|
</style>
|