123 lines
3.1 KiB
Vue
123 lines
3.1 KiB
Vue
<template>
|
|
<div>
|
|
<div class="artifact-container">
|
|
<div v-for="artifact in artifacts" class="artifact" @click="toggleSelection(artifact)">
|
|
<div class="artifact-header">
|
|
<input
|
|
type="checkbox"
|
|
v-model="selected"
|
|
:value="artifact.id"
|
|
:id="artifact.id" />
|
|
<strong><label :for="artifact.id">{{artifact.name}}</label></strong>
|
|
</div>
|
|
<div class="artifact-description" v-if="artifact.description">{{artifact.description}}</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="extra-class language-gradle selected-artifacts"
|
|
v-if="selected.length > 0"
|
|
@click="selectAll"
|
|
>
|
|
<div class="selected-artifact-script">
|
|
<span class="token keyword">final def</span> markwon_version = <span class="token string">'latest_version'</span>
|
|
</div>
|
|
<br>
|
|
<div class="selected-artifact-script" v-for="artifact in selectedArtifacts">
|
|
<span>implementation </span><span class="token string">"{{artifact.group}}:{{artifact.id}}:</span><span>$markwon_version</span><span class="token string">"</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import {artifacts} from '../.artifacts.js';
|
|
|
|
if (!artifacts) {
|
|
throw 'Artifacts not found. Use `collectArtifacts.js` script to obtain artifacts metadata.'
|
|
}
|
|
|
|
export default {
|
|
name: "ArtifactPicker",
|
|
data() {
|
|
return {
|
|
artifacts,
|
|
selected: ['core']
|
|
};
|
|
},
|
|
methods: {
|
|
selectAll(e) {
|
|
let el = e.target;
|
|
while (!el.classList.contains("selected-artifacts")) {
|
|
el = el.parentElement;
|
|
}
|
|
|
|
if (document.body.createTextRange) {
|
|
const range = document.body.createTextRange();
|
|
range.moveToElementText(el);
|
|
range.select();
|
|
} else if (window.getSelection) {
|
|
const selection = window.getSelection();
|
|
const range = document.createRange();
|
|
range.selectNodeContents(el);
|
|
selection.removeAllRanges();
|
|
selection.addRange(range);
|
|
}
|
|
},
|
|
toggleSelection(artifact) {
|
|
const index = this.selected.indexOf(artifact.id)
|
|
if (index < 0) {
|
|
this.selected.push(artifact.id);
|
|
} else {
|
|
this.selected.splice(index, 1);
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
selectedArtifacts() {
|
|
return this.artifacts.filter(a => this.selected.indexOf(a.id) >= 0);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.artifact-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
margin-top: 0.5em;
|
|
}
|
|
.artifact {
|
|
flex: 1;
|
|
border: 1px #ccc solid;
|
|
background-color: #fafafa;
|
|
padding: 0.5em;
|
|
margin: 0.2em;
|
|
border-radius: 0.25em;
|
|
min-width: 10em;
|
|
max-width: 10em;
|
|
}
|
|
.artifact-description {
|
|
font-size: 0.85em;
|
|
margin-top: 0.5em;
|
|
}
|
|
.selected-artifacts {
|
|
color: white;
|
|
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
|
|
monospace;
|
|
padding: 16px;
|
|
text-align: left;
|
|
word-spacing: normal;
|
|
word-break: normal;
|
|
word-wrap: normal;
|
|
line-height: 1.5;
|
|
-moz-tab-size: 4;
|
|
hyphens: none;
|
|
font-size: 0.85em;
|
|
margin-top: 0.5em;
|
|
}
|
|
.selected-artifact-script {
|
|
display: block;
|
|
}
|
|
</style> |