BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit b88f7060 by Eric Eastwood
Options

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

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/38743
parent aec1586c
Showing with 121 additions and 97 deletions
app/assets/javascripts/notebook/cells/code.vue
<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>
import CodeCell from './code/index.vue';
import OutputCell from './output/index.vue';
......@@ -51,6 +36,21 @@ export default {
};
</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>
.cell {
flex-direction: column;
......
app/assets/javascripts/notebook/cells/code/index.vue
<template>
<div :class="type">
<prompt
:type="promptType"
:count="count" />
<pre
class="language-python"
:class="codeCssClass"
ref="code"
v-text="code">
</pre>
</div>
</template>
<script>
import Prism from '../../lib/highlight';
import Prompt from '../prompt.vue';
......@@ -55,3 +41,17 @@
},
};
</script>
<template>
<div :class="type">
<prompt
:type="promptType"
:count="count" />
<pre
class="language-python"
:class="codeCssClass"
ref="code"
v-text="code">
</pre>
</div>
</template>
app/assets/javascripts/notebook/cells/markdown.vue
<template>
<div class="cell text-cell">
<prompt />
<div class="markdown" v-html="markdown"></div>
</div>
</template>
<script>
/* global katex */
import marked from 'marked';
......@@ -95,6 +88,13 @@
};
</script>
<template>
<div class="cell text-cell">
<prompt />
<div class="markdown" v-html="markdown"></div>
</div>
</template>
<style>
.markdown .katex {
display: block;
......
app/assets/javascripts/notebook/cells/output/html.vue
<template>
<div class="output">
<prompt />
<div v-html="rawCode"></div>
</div>
</template>
<script>
import Prompt from '../prompt.vue';
......@@ -20,3 +13,10 @@ export default {
},
};
</script>
<template>
<div class="output">
<prompt />
<div v-html="rawCode"></div>
</div>
</template>
app/assets/javascripts/notebook/cells/output/image.vue
<template>
<div class="output">
<prompt />
<img
:src="'data:' + outputType + ';base64,' + rawCode" />
</div>
</template>
<script>
import Prompt from '../prompt.vue';
......@@ -25,3 +17,11 @@ export default {
},
};
</script>
<template>
<div class="output">
<prompt />
<img
:src="'data:' + outputType + ';base64,' + rawCode" />
</div>
</template>
app/assets/javascripts/notebook/cells/output/index.vue
<template>
<component :is="componentName"
type="output"
:outputType="outputType"
:count="count"
:raw-code="rawCode"
:code-css-class="codeCssClass" />
</template>
<script>
import CodeCell from '../code/index.vue';
import Html from './html.vue';
......@@ -81,3 +72,12 @@ export default {
},
};
</script>
<template>
<component :is="componentName"
type="output"
:outputType="outputType"
:count="count"
:raw-code="rawCode"
:code-css-class="codeCssClass" />
</template>
app/assets/javascripts/notebook/cells/prompt.vue
<template>
<div class="prompt">
<span v-if="type && count">
{{ type }} [{{ count }}]:
</span>
</div>
</template>
<script>
export default {
props: {
......@@ -21,6 +13,14 @@
};
</script>
<template>
<div class="prompt">
<span v-if="type && count">
{{ type }} [{{ count }}]:
</span>
</div>
</template>
<style scoped>
.prompt {
padding: 0 10px;
......
app/assets/javascripts/notebook/index.vue
<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>
import {
MarkdownCell,
......@@ -59,6 +48,17 @@
};
</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>
.cell,
.input,
......
app/assets/javascripts/pdf/index.vue
<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>
import pdfjsLib from 'vendor/pdf';
import workerSrc from 'vendor/pdf.worker.min';
......@@ -64,6 +54,16 @@
};
</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>
.pdf-viewer {
background: url('./assets/img/bg.gif');
......
app/assets/javascripts/pdf/page/index.vue
<template>
<canvas
class="pdf-page"
ref="canvas"
:data-page="number" />
</template>
<script>
export default {
props: {
......@@ -48,6 +41,13 @@
};
</script>
<template>
<canvas
class="pdf-page"
ref="canvas"
:data-page="number" />
</template>
<style>
.pdf-page {
margin: 8px auto 0 auto;
......
changelogs/unreleased/3612-update-script-template-order-in-vue-files.yml 0 → 100644
---
title: Re-arrange <script> tags before <template> tags in .vue files
merge_request: 14671
author:
type: changed
doc/development/fe_guide/style_guide_js.md
......@@ -470,7 +470,25 @@ On those a default key should not be provided.
```
#### 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. `props`
1. `mixins`
......@@ -490,6 +508,7 @@ On those a default key should not be provided.
1. `beforeDestroy`
1. `destroyed`
#### Vue and Bootstrap
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