Commit 88959e87 authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch '3612-update-script-template-order-in-vue-files' into 'master'

Re-arrange <script> tags before <template> tags in .vue files

Closes #38743

See merge request gitlab-org/gitlab-ce!14671
parents 12d275ad b88f7060
<template>
<div class="cell">
<code-cell
type="input"
:raw-code="rawInputCode"
:count="cell.execution_count"
:code-css-class="codeCssClass" />
<output-cell
v-if="hasOutput"
:count="cell.execution_count"
:output="output"
:code-css-class="codeCssClass" />
</div>
</template>
<script> <script>
import CodeCell from './code/index.vue'; import CodeCell from './code/index.vue';
import OutputCell from './output/index.vue'; import OutputCell from './output/index.vue';
...@@ -51,6 +36,21 @@ export default { ...@@ -51,6 +36,21 @@ export default {
}; };
</script> </script>
<template>
<div class="cell">
<code-cell
type="input"
:raw-code="rawInputCode"
:count="cell.execution_count"
:code-css-class="codeCssClass" />
<output-cell
v-if="hasOutput"
:count="cell.execution_count"
:output="output"
:code-css-class="codeCssClass" />
</div>
</template>
<style scoped> <style scoped>
.cell { .cell {
flex-direction: column; flex-direction: column;
......
<template>
<div :class="type">
<prompt
:type="promptType"
:count="count" />
<pre
class="language-python"
:class="codeCssClass"
ref="code"
v-text="code">
</pre>
</div>
</template>
<script> <script>
import Prism from '../../lib/highlight'; import Prism from '../../lib/highlight';
import Prompt from '../prompt.vue'; import Prompt from '../prompt.vue';
...@@ -55,3 +41,17 @@ ...@@ -55,3 +41,17 @@
}, },
}; };
</script> </script>
<template>
<div :class="type">
<prompt
:type="promptType"
:count="count" />
<pre
class="language-python"
:class="codeCssClass"
ref="code"
v-text="code">
</pre>
</div>
</template>
<template>
<div class="cell text-cell">
<prompt />
<div class="markdown" v-html="markdown"></div>
</div>
</template>
<script> <script>
/* global katex */ /* global katex */
import marked from 'marked'; import marked from 'marked';
...@@ -95,6 +88,13 @@ ...@@ -95,6 +88,13 @@
}; };
</script> </script>
<template>
<div class="cell text-cell">
<prompt />
<div class="markdown" v-html="markdown"></div>
</div>
</template>
<style> <style>
.markdown .katex { .markdown .katex {
display: block; display: block;
......
<template>
<div class="output">
<prompt />
<div v-html="rawCode"></div>
</div>
</template>
<script> <script>
import Prompt from '../prompt.vue'; import Prompt from '../prompt.vue';
...@@ -20,3 +13,10 @@ export default { ...@@ -20,3 +13,10 @@ export default {
}, },
}; };
</script> </script>
<template>
<div class="output">
<prompt />
<div v-html="rawCode"></div>
</div>
</template>
<template>
<div class="output">
<prompt />
<img
:src="'data:' + outputType + ';base64,' + rawCode" />
</div>
</template>
<script> <script>
import Prompt from '../prompt.vue'; import Prompt from '../prompt.vue';
...@@ -25,3 +17,11 @@ export default { ...@@ -25,3 +17,11 @@ export default {
}, },
}; };
</script> </script>
<template>
<div class="output">
<prompt />
<img
:src="'data:' + outputType + ';base64,' + rawCode" />
</div>
</template>
<template>
<component :is="componentName"
type="output"
:outputType="outputType"
:count="count"
:raw-code="rawCode"
:code-css-class="codeCssClass" />
</template>
<script> <script>
import CodeCell from '../code/index.vue'; import CodeCell from '../code/index.vue';
import Html from './html.vue'; import Html from './html.vue';
...@@ -81,3 +72,12 @@ export default { ...@@ -81,3 +72,12 @@ export default {
}, },
}; };
</script> </script>
<template>
<component :is="componentName"
type="output"
:outputType="outputType"
:count="count"
:raw-code="rawCode"
:code-css-class="codeCssClass" />
</template>
<template>
<div class="prompt">
<span v-if="type && count">
{{ type }} [{{ count }}]:
</span>
</div>
</template>
<script> <script>
export default { export default {
props: { props: {
...@@ -21,6 +13,14 @@ ...@@ -21,6 +13,14 @@
}; };
</script> </script>
<template>
<div class="prompt">
<span v-if="type && count">
{{ type }} [{{ count }}]:
</span>
</div>
</template>
<style scoped> <style scoped>
.prompt { .prompt {
padding: 0 10px; padding: 0 10px;
......
<template>
<div v-if="hasNotebook">
<component
v-for="(cell, index) in cells"
:is="cellType(cell.cell_type)"
:cell="cell"
:key="index"
:code-css-class="codeCssClass" />
</div>
</template>
<script> <script>
import { import {
MarkdownCell, MarkdownCell,
...@@ -59,6 +48,17 @@ ...@@ -59,6 +48,17 @@
}; };
</script> </script>
<template>
<div v-if="hasNotebook">
<component
v-for="(cell, index) in cells"
:is="cellType(cell.cell_type)"
:cell="cell"
:key="index"
:code-css-class="codeCssClass" />
</div>
</template>
<style> <style>
.cell, .cell,
.input, .input,
......
<template>
<div class="pdf-viewer" v-if="hasPDF">
<page v-for="(page, index) in pages"
:key="index"
:v-if="!loading"
:page="page"
:number="index + 1" />
</div>
</template>
<script> <script>
import pdfjsLib from 'vendor/pdf'; import pdfjsLib from 'vendor/pdf';
import workerSrc from 'vendor/pdf.worker.min'; import workerSrc from 'vendor/pdf.worker.min';
...@@ -64,6 +54,16 @@ ...@@ -64,6 +54,16 @@
}; };
</script> </script>
<template>
<div class="pdf-viewer" v-if="hasPDF">
<page v-for="(page, index) in pages"
:key="index"
:v-if="!loading"
:page="page"
:number="index + 1" />
</div>
</template>
<style> <style>
.pdf-viewer { .pdf-viewer {
background: url('./assets/img/bg.gif'); background: url('./assets/img/bg.gif');
......
<template>
<canvas
class="pdf-page"
ref="canvas"
:data-page="number" />
</template>
<script> <script>
export default { export default {
props: { props: {
...@@ -48,6 +41,13 @@ ...@@ -48,6 +41,13 @@
}; };
</script> </script>
<template>
<canvas
class="pdf-page"
ref="canvas"
:data-page="number" />
</template>
<style> <style>
.pdf-page { .pdf-page {
margin: 8px auto 0 auto; margin: 8px auto 0 auto;
......
---
title: Re-arrange <script> tags before <template> tags in .vue files
merge_request: 14671
author:
type: changed
...@@ -470,7 +470,25 @@ On those a default key should not be provided. ...@@ -470,7 +470,25 @@ On those a default key should not be provided.
``` ```
#### Ordering #### Ordering
1. Order for a Vue Component:
1. Tag order in `.vue` file
```
<script>
// ...
</script>
<template>
// ...
</template>
// We don't use scoped styles but there are few instances of this
<style>
// ...
</style>
```
1. Properties in a Vue Component:
1. `name` 1. `name`
1. `props` 1. `props`
1. `mixins` 1. `mixins`
...@@ -490,6 +508,7 @@ On those a default key should not be provided. ...@@ -490,6 +508,7 @@ On those a default key should not be provided.
1. `beforeDestroy` 1. `beforeDestroy`
1. `destroyed` 1. `destroyed`
#### Vue and Bootstrap #### Vue and Bootstrap
1. Tooltips: Do not rely on `has-tooltip` class name for Vue components 1. Tooltips: Do not rely on `has-tooltip` class name for Vue components
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment