Re-arrange <script> tags before <template> tags in .vue files
Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/38743
This commit is contained in:
Eric Eastwood
parent
aec1586c05
commit
b88f70606d
|
|
@ -1,18 +1,3 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -1,17 +1,3 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,3 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,3 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,3 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,3 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,3 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,3 @@
|
|||
<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,
|
||||
|
|
|
|||
|
|
@ -1,13 +1,3 @@
|
|||
<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');
|
||||
|
|
|
|||
|
|
@ -1,10 +1,3 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
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.
|
|||
```
|
||||
|
||||
#### 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
|
||||
|
|
|
|||
Loading…
Reference in New Issue