diff options
Diffstat (limited to 'app/assets/javascripts/notebook/cells/output/index.vue')
-rw-r--r-- | app/assets/javascripts/notebook/cells/output/index.vue | 134 |
1 files changed, 69 insertions, 65 deletions
diff --git a/app/assets/javascripts/notebook/cells/output/index.vue b/app/assets/javascripts/notebook/cells/output/index.vue index 05af0bf1e8e..91b2269a83a 100644 --- a/app/assets/javascripts/notebook/cells/output/index.vue +++ b/app/assets/javascripts/notebook/cells/output/index.vue @@ -1,83 +1,87 @@ <script> -import CodeCell from '../code/index.vue'; -import Html from './html.vue'; -import Image from './image.vue'; + import CodeCell from '../code/index.vue'; + import Html from './html.vue'; + import Image from './image.vue'; -export default { - props: { - codeCssClass: { - type: String, - required: false, - default: '', + export default { + components: { + 'code-cell': CodeCell, + 'html-output': Html, + 'image-output': Image, }, - count: { - type: Number, - required: false, - default: 0, + props: { + codeCssClass: { + type: String, + required: false, + default: '', + }, + count: { + type: Number, + required: false, + default: 0, + }, + output: { + type: Object, + requred: true, + default: () => ({}), + }, }, - output: { - type: Object, - requred: true, - }, - }, - components: { - 'code-cell': CodeCell, - 'html-output': Html, - 'image-output': Image, - }, - data() { - return { - outputType: '', - }; - }, - computed: { - componentName() { - if (this.output.text) { - return 'code-cell'; - } else if (this.output.data['image/png']) { - this.outputType = 'image/png'; - - return 'image-output'; - } else if (this.output.data['text/html']) { - this.outputType = 'text/html'; + 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'; + } - return 'html-output'; - } else if (this.output.data['image/svg+xml']) { - this.outputType = 'image/svg+xml'; - - return 'html-output'; - } + return 'code-cell'; + }, + rawCode() { + if (this.output.text) { + return this.output.text.join(''); + } - this.outputType = 'text/plain'; - return 'code-cell'; - }, - rawCode() { - if (this.output.text) { - return this.output.text.join(''); - } + 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'; + } - return this.dataForType(this.outputType); + return 'text/plain'; + }, }, - }, - methods: { - dataForType(type) { - let data = this.output.data[type]; + methods: { + dataForType(type) { + let data = this.output.data[type]; - if (typeof data === 'object') { - data = data.join(''); - } + if (typeof data === 'object') { + data = data.join(''); + } - return data; + return data; + }, }, - }, -}; + }; </script> <template> - <component :is="componentName" + <component + :is="componentName" type="output" - :outputType="outputType" + :output-type="outputType" :count="count" :raw-code="rawCode" - :code-css-class="codeCssClass" /> + :code-css-class="codeCssClass" + /> </template> |