|
@@ -1,15 +1,29 @@
|
|
|
<template>
|
|
|
<nav class="node-view-child-list-group">
|
|
|
- <b-list-group>
|
|
|
- <b-list-group-item
|
|
|
- v-for="child in children" :key="child.id"
|
|
|
- :variant="child.variant"
|
|
|
- href="javascript:;"
|
|
|
- @click="$parent.$emit('open-child', { childId: child.id })"
|
|
|
- >
|
|
|
- {{ $t('variants.' + child.variant) }}
|
|
|
- </b-list-group-item>
|
|
|
- </b-list-group>
|
|
|
+ <b-collapse :id="'collapse-child-list-' + id" v-model="visible">
|
|
|
+ <b-list-group>
|
|
|
+ <b-list-group-item
|
|
|
+ v-for="child in children" :key="child.id"
|
|
|
+ :variant="child.variant"
|
|
|
+ href="javascript:;"
|
|
|
+ @click="$parent.$emit('open-child', { childId: child.id })"
|
|
|
+ >
|
|
|
+ {{ $t('variants.' + child.variant) }}
|
|
|
+ </b-list-group-item>
|
|
|
+ </b-list-group>
|
|
|
+ </b-collapse>
|
|
|
+
|
|
|
+ <b-button
|
|
|
+ class="btn-children"
|
|
|
+ :class="visible ? null : 'collapsed'"
|
|
|
+ :aria-expanded="visible ? 'true' : 'false'"
|
|
|
+ :aria-controls="'collapse-child-list-' + id"
|
|
|
+ @click.stop="visible = !visible"
|
|
|
+ variant="dark"
|
|
|
+ block
|
|
|
+ >
|
|
|
+ {{ $t('children')}} <span class="collapse-icon" :class="{ collapsed: !visible }">></span>
|
|
|
+ </b-button>
|
|
|
</nav>
|
|
|
</template>
|
|
|
|
|
@@ -18,7 +32,14 @@ export default {
|
|
|
name: 'NodeViewChildListGroup',
|
|
|
|
|
|
props: {
|
|
|
- children: { type: Array, required: true }
|
|
|
+ children: { type: Array, required: true },
|
|
|
+ id: { type: Number, required: true }
|
|
|
+ },
|
|
|
+
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ visible: window.innerWidth > 769
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -35,9 +56,26 @@ export default {
|
|
|
@include media-breakpoint-up($size-bp) {
|
|
|
font-size: 1.75rem;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- &-item {
|
|
|
+ .btn-children {
|
|
|
+ display: flex;
|
|
|
+ border-radius: 0 !important;
|
|
|
+ font-weight: $font-weight-bold;
|
|
|
+ padding: $list-group-item-padding-y $list-group-item-padding-x;
|
|
|
+
|
|
|
+ .collapse-icon {
|
|
|
+ font-weight: inherit;
|
|
|
+ margin-left: auto;
|
|
|
+ transform: translate(15px, 0px) rotate(270deg);
|
|
|
+
|
|
|
+ &.collapsed {
|
|
|
+ transform: translate(-3px, 0px) rotate(90deg) ;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ @include media-breakpoint-up('tb') {
|
|
|
+ display: none;
|
|
|
}
|
|
|
}
|
|
|
}
|