debian-mirror-gitlab/app/assets/javascripts/notebook/cells/output/index.vue

88 lines
1.9 KiB
Vue
Raw Normal View History

2017-08-17 22:00:37 +05:30
<script>
2018-03-17 18:26:18 +05:30
import CodeCell from '../code/index.vue';
import Html from './html.vue';
import Image from './image.vue';
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
export default {
components: {
'code-cell': CodeCell,
'html-output': Html,
'image-output': Image,
2017-08-17 22:00:37 +05:30
},
2018-03-17 18:26:18 +05:30
props: {
codeCssClass: {
type: String,
required: false,
default: '',
},
count: {
type: Number,
required: false,
default: 0,
},
output: {
type: Object,
requred: true,
default: () => ({}),
},
2017-08-17 22:00:37 +05:30
},
2018-03-17 18:26:18 +05:30
computed: {
componentName() {
if (this.output.text) {
return 'code-cell';
} else if (this.output.data['image/png']) {
return 'image-output';
} else if (this.output.data['text/html']) {
return 'html-output';
} else if (this.output.data['image/svg+xml']) {
return 'html-output';
}
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
return 'code-cell';
},
rawCode() {
if (this.output.text) {
return this.output.text.join('');
}
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
return this.dataForType(this.outputType);
},
outputType() {
if (this.output.text) {
return '';
} else if (this.output.data['image/png']) {
return 'image/png';
} else if (this.output.data['text/html']) {
return 'text/html';
} else if (this.output.data['image/svg+xml']) {
return 'image/svg+xml';
}
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
return 'text/plain';
},
2017-08-17 22:00:37 +05:30
},
2018-03-17 18:26:18 +05:30
methods: {
dataForType(type) {
let data = this.output.data[type];
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
if (typeof data === 'object') {
data = data.join('');
}
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
return data;
},
2017-08-17 22:00:37 +05:30
},
2018-03-17 18:26:18 +05:30
};
2017-08-17 22:00:37 +05:30
</script>
2018-03-17 18:26:18 +05:30
<template>
<component
:is="componentName"
type="output"
:output-type="outputType"
:count="count"
:raw-code="rawCode"
:code-css-class="codeCssClass"
/>
</template>