f3c7413f52
- Move most GUI related code to /presentation - Move components to /components (separate from bootstrap and style) - Move shared components helpers to /components/shared - Rename Bootstrapping to bootstrapping to enforce same naming convention in /presentation
48 lines
1.2 KiB
Vue
48 lines
1.2 KiB
Vue
<template>
|
|
<div id="node">
|
|
<div class="item text">{{ this.data.text }}</div>
|
|
<RevertToggle
|
|
class="item"
|
|
v-if="data.isReversible"
|
|
:node="data" />
|
|
<DocumentationUrls
|
|
class="item"
|
|
v-if="data.documentationUrls && data.documentationUrls.length > 0"
|
|
:documentationUrls="this.data.documentationUrls" />
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
|
import { INode } from './INode';
|
|
import RevertToggle from './RevertToggle.vue';
|
|
import DocumentationUrls from './DocumentationUrls.vue';
|
|
/** Wrapper for Liquor Tree, reveals only abstracted INode for communication */
|
|
@Component({
|
|
components: {
|
|
RevertToggle,
|
|
DocumentationUrls,
|
|
},
|
|
})
|
|
export default class Node extends Vue {
|
|
@Prop() public data: INode;
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/presentation/styles/colors.scss";
|
|
#node {
|
|
display:flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
.text {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.item:not(:first-child) {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
</style> |