12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- <template>
- <nav class="node-view-child-list" :class="{ 'smartphone': smartphone }">
- <ul>
- <li
- v-for="(child, i) in children" :key="child.id"
- class="node-view-child-list-item"
- >
- <dot-button
- @click="onOpen(child.id)"
- :variant="child.variant"
- :active="activeNodes.includes(child.id)"
- dot-only
- :pos="smartphone ? getDir(i) : 'left'"
- >
- {{ $t('variants.' + child.variant) }}
- </dot-button>
- </li>
- </ul>
- </nav>
- </template>
- <script>
- import { mapGetters } from 'vuex'
- export default {
- name: 'NodeViewChildList',
- props: {
- children: { type: Array, required: true },
- smartphone: { type: Boolean, default: false }
- },
- data () {
- return {
- }
- },
- computed: {
- ...mapGetters(['activeNodes'])
- },
- methods: {
- getDir (index) {
- const len = this.children.length
- if (index === 0) return 'right'
- if (index === this.children.length - 1) return 'left'
- return 'middle'
- },
- onOpen (childId) {
- this.$emit('open-child', { childId })
- }
- },
- mounted () {
- }
- }
- </script>
- <style lang="scss" scoped>
- .node-view-child-list {
- ul {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 26px;
- padding: 0;
- margin: 0;
- list-style: none;
- }
- &-item {
- margin-right: 20px;
- line-height: 0;
- }
- &.smartphone {
- padding: $node-view-spacer-sm-y $node-view-spacer-sm-x;
- background-color: $white;
- position: sticky;
- top: 0;
- z-index: 1;
- ul {
- justify-content: space-between;
- }
- @include media-breakpoint-up($layout-bp) {
- display: none;
- }
- }
- }
- </style>
|