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

103 lines
2.3 KiB
Vue
Raw Normal View History

2017-08-17 22:00:37 +05:30
<script>
2019-03-02 22:35:43 +05:30
import CodeOutput from '../code/index.vue';
import HtmlOutput from './html.vue';
import ImageOutput from './image.vue';
2021-03-08 18:12:59 +05:30
import LatexOutput from './latex.vue';
2017-08-17 22:00:37 +05:30
2018-12-13 13:39:08 +05:30
export default {
props: {
codeCssClass: {
type: String,
required: false,
default: '',
2017-08-17 22:00:37 +05:30
},
2018-12-13 13:39:08 +05:30
count: {
type: Number,
required: false,
default: 0,
2017-08-17 22:00:37 +05:30
},
2019-03-02 22:35:43 +05:30
outputs: {
type: Array,
2019-02-15 15:39:39 +05:30
required: true,
2018-12-13 13:39:08 +05:30
},
2019-12-21 20:55:43 +05:30
metadata: {
type: Object,
default: () => ({}),
2020-04-22 19:07:51 +05:30
required: false,
2019-12-21 20:55:43 +05:30
},
2018-12-13 13:39:08 +05:30
},
2019-03-02 22:35:43 +05:30
methods: {
2019-07-07 11:18:12 +05:30
outputType(output) {
if (output.text) {
return 'text/plain';
} else if (output.data['image/png']) {
return 'image/png';
2021-02-22 17:27:13 +05:30
} else if (output.data['image/jpeg']) {
return 'image/jpeg';
2019-07-07 11:18:12 +05:30
} else if (output.data['text/html']) {
return 'text/html';
2021-03-08 18:12:59 +05:30
} else if (output.data['text/latex']) {
return 'text/latex';
2019-07-07 11:18:12 +05:30
} else if (output.data['image/svg+xml']) {
return 'image/svg+xml';
}
return 'text/plain';
},
2019-03-02 22:35:43 +05:30
dataForType(output, type) {
let data = output.data[type];
2017-08-17 22:00:37 +05:30
2019-03-02 22:35:43 +05:30
if (typeof data === 'object') {
data = data.join('');
2018-12-13 13:39:08 +05:30
}
2019-03-02 22:35:43 +05:30
return data;
2018-12-13 13:39:08 +05:30
},
2019-03-02 22:35:43 +05:30
getComponent(output) {
if (output.text) {
return CodeOutput;
} else if (output.data['image/png']) {
return ImageOutput;
2021-02-22 17:27:13 +05:30
} else if (output.data['image/jpeg']) {
return ImageOutput;
2019-03-02 22:35:43 +05:30
} else if (output.data['text/html']) {
return HtmlOutput;
2021-03-08 18:12:59 +05:30
} else if (output.data['text/latex']) {
return LatexOutput;
2019-03-02 22:35:43 +05:30
} else if (output.data['image/svg+xml']) {
return HtmlOutput;
2018-12-13 13:39:08 +05:30
}
2017-08-17 22:00:37 +05:30
2019-03-02 22:35:43 +05:30
return CodeOutput;
2017-08-17 22:00:37 +05:30
},
2019-03-02 22:35:43 +05:30
rawCode(output) {
if (output.text) {
2020-05-24 23:13:21 +05:30
if (typeof output.text === 'string') {
return output.text;
}
2019-03-02 22:35:43 +05:30
return output.text.join('');
2018-12-13 13:39:08 +05:30
}
2017-08-17 22:00:37 +05:30
2019-07-07 11:18:12 +05:30
return this.dataForType(output, this.outputType(output));
2017-08-17 22:00:37 +05:30
},
2018-12-13 13:39:08 +05:30
},
};
2017-08-17 22:00:37 +05:30
</script>
2018-03-17 18:26:18 +05:30
<template>
2019-03-02 22:35:43 +05:30
<div>
<component
:is="getComponent(output)"
v-for="(output, index) in outputs"
:key="index"
type="output"
2019-07-07 11:18:12 +05:30
:output-type="outputType(output)"
2019-03-02 22:35:43 +05:30
:count="count"
:index="index"
:raw-code="rawCode(output)"
2019-12-21 20:55:43 +05:30
:metadata="metadata"
2019-03-02 22:35:43 +05:30
:code-css-class="codeCssClass"
/>
</div>
2018-03-17 18:26:18 +05:30
</template>