Verified Commit 94601344 authored by Connor Shea's avatar Connor Shea 🏄

Basic implementation of an editable list of features.

parent d8b0fd72
Pipeline #26352296 passed with stage
in 1 minute and 15 seconds
......@@ -9,12 +9,6 @@
<script src="<%= htmlWebpackPlugin.files.js %>"></script>
</head>
<body>
<h1>MDN BCD File Creator</h1>
<div class="json-structure"></div>
<pre class="output-json">
{{ output }}
</pre>
<div id="app"></div>
</body>
</html>
<template>
<div>
<h1>MDN BCD File Creator</h1>
<CompatData></CompatData>
<CompatDataOutput></CompatDataOutput>
</div>
</template>
<script>
import CompatData from './CompatData.vue'
import CompatDataOutput from './CompatDataOutput.vue'
export default {
components: {
CompatData,
CompatDataOutput
},
data() {
return {
test: "test"
}
},
methods: {
setCategory(category) {
console.log("test2");
}
}
}
</script>
<template>
<div>
<ul v-for="category in categories" :key="category.id">
<li> {{ category.name }} </li>
</ul>
<select v-model="category">
<option v-for="category in categories" v-bind:key="category.value" v-bind:value="category.value">
{{ category.name }}
</option>
</select>
<span>{{ category }}</span>
<FeatureList></FeatureList>
</div>
</template>
<script>
import FeatureList from './FeatureList.vue'
export default {
components: {
FeatureList
},
data() {
return {
category: "api",
categories: [
{
id: "api",
value: "api",
name: "API"
},
{
id: "css",
value: "css",
name: "CSS"
},
{
id: "html",
value: "html",
name: "HTML"
},
{
id: "mathml",
value: "mathml",
name: "MathML"
},
{
id: "webextensions",
value: "webextensions",
name: "WebExtensions"
}
]
}
},
methods: {
setCategory(category) {
console.log("test");
}
}
}
}
</script>
<template>
<pre>
{{ test }}
</pre>
</template>
<script>
export default {
data() {
return {
test: "test"
}
},
methods: {
setCategory(category) {
console.log("test2");
}
}
}
</script>
<template>
<input
type="text"
class="input"
:value="value"
v-on="listeners"
>
</template>
<script>
export default {
props: {
value: {
type: String,
default: '',
}
},
computed: {
listeners () {
return {
// Pass all component listeners directly to input
...this.$listeners,
// Override input listener to work with v-model
input: event => this.$emit('input', event.target.value)
}
}
}
}
</script>
<template>
<div>
<FeatureInput
v-model="newFeatureText"
placeholder="New feature"
@keydown.enter="addFeature"
/>
<ul v-if="features.length">
<FeatureListItem
v-for="feature in features"
:key="feature.id"
:feature="feature"
@remove="removeFeature"
/>
</ul>
<p v-else>
No features.
</p>
</div>
</template>
<script>
import FeatureInput from './FeatureInput.vue';
import FeatureListItem from './FeatureListItem.vue';
let nextFeatureId = 1;
export default {
components: {
FeatureInput,
FeatureListItem
},
data () {
return {
newFeatureText: '',
features: [
{
id: nextFeatureId++,
text: 'Feature Name'
}
]
}
},
methods: {
addFeature () {
const trimmedText = this.newFeatureText.trim()
if (trimmedText) {
this.features.push({
id: nextFeatureId++,
text: trimmedText
})
this.newFeatureText = ''
}
},
removeFeature (idToRemove) {
this.features = this.features.filter(feature => {
return feature.id !== idToRemove
})
}
}
}
</script>
<template>
<li>
{{ feature.text }}
<button @click="$emit('remove', feature.id)">
X
</button>
</li>
</template>
<script>
export default {
props: {
feature: {
type: Object,
required: true
}
}
}
</script>
import Vue from 'vue';
import CompatData from './CompatData.vue';
import App from './App.vue';
window.onload = function() {
new Vue({
el: '.json-structure',
template: '<CompatData/>',
components: { CompatData }
})
let app = new Vue({
el: '#app',
template: '<App/>',
components: { App }
});
}
console.log("test");
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