rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added new generic field components

Browse source
This commit is contained in:
Joel Collins 2019-06-26 14:40:07 +01:00
parent 05d71344a0
commit 463bec6e18
11 changed files with 159 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/pluginComponents/formComponents/JsonForm.vue → src/components/pluginComponents/JsonForm.vue
View file

@ -41,14 +41,16 @@
<script>
import axios from 'axios'
import numberInput from "./fieldComponents/numberInput";
import selectList from "./fieldComponents/selectList";
import textInput from "./fieldComponents/textInput";
import htmlBlock from "./fieldComponents/htmlBlock";
import radioList from "./fieldComponents/radioList";
import checkList from "./fieldComponents/checkList"
import numberInput from "../fieldComponents/numberInput"
import selectList from "../fieldComponents/selectList"
import textInput from "../fieldComponents/textInput"
import htmlBlock from "../fieldComponents/htmlBlock"
import radioList from "../fieldComponents/radioList"
import checkList from "../fieldComponents/checkList"
import tagList from "../fieldComponents/tagList"
import keyvalList from "../fieldComponents/keyvalList"
import progressBar from "../../genericComponents/progressBar"
import progressBar from "../genericComponents/progressBar"
export default {
name: 'JsonForm',
@ -60,6 +62,8 @@ export default {
htmlBlock,
radioList,
checkList,
tagList,
keyvalList,
progressBar
},

52
src/components/pluginComponents/formComponents/fieldComponents/checkList.vue
View file

@ -1,52 +0,0 @@
<template>
<div>
<label>{{label}}</label>
<div class="uk-form-controls">
<div v-for="option in options" :key="option">
<label>
<input class="uk-checkbox" type="checkbox" v-bind:value="option" v-bind:checked="(value && value.includes(option))" @change="updateValue($event.target)">
{{ option }}
</label>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'checkList',
props: [
'options',
'name',
'label',
'value'
],
methods: {
updateValue(target) {
var newSelected = this.value != null ? [...this.value] : [] // Clone value array
if (target.checked) {
if (!newSelected.includes(target.value)) {
newSelected.push(target.value)
}
}
else {
if (newSelected.includes(target.value)) {
var newSelected = newSelected.filter(function(value, index, arr){
return value != target.value;
})
}
}
this.$emit('input', newSelected)
}
}
}
</script>
<style scoped></style>

19
src/components/pluginComponents/formComponents/fieldComponents/htmlBlock.vue
View file

@ -1,19 +0,0 @@
<template>
<div>
<p v-html="content"></p>
</div>
</template>
<script>
export default {
name: 'htmlBlock',
props: [
'label',
'name',
'content'
]
}
</script>
<style scoped></style>

33
src/components/pluginComponents/formComponents/fieldComponents/numberInput.vue
View file

@ -1,33 +0,0 @@
<template>
<div>
<label class="uk-form-label">{{label}}</label>
<input
class="uk-input uk-form-small"
type="number"
:name="name"
:value="value"
@input="$emit('input', $event.target.value)"
:placeholder="placeholder"
>
</div>
</template>
<script>
export default {
name: 'numberInput',
props: [
'placeholder',
'label',
'name',
'value'
]
}
</script>
<style scoped></style>

29
src/components/pluginComponents/formComponents/fieldComponents/radioList.vue
View file

@ -1,29 +0,0 @@
<template>
<div>
<label>{{label}}</label>
<div class="uk-form-controls">
<div v-for="option in options" :key="option">
<label><input class="uk-radio" type="radio" :name="name" :value="option" :checked="value==option" @input="$emit('input', $event.target.value)"> {{ option }}</label>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'radioList',
props: [
'options',
'name',
'label',
'value'
]
}
</script>
<style scoped></style>

33
src/components/pluginComponents/formComponents/fieldComponents/selectList.vue
View file

@ -1,33 +0,0 @@
<template>
<div>
<label class="uk-form-label">{{label}}</label>
<select
class="uk-select uk-form-small"
:multiple="multi"
:value="value"
@input="$emit('input', $event.target.value)"
>
<option v-for="option in options" :key="option">
{{option}}
</option>
</select>
</div>
</template>
<script>
export default {
name: 'selectList',
props: [
'multi',
'options',
'name',
'label',
'value'
]
}
</script>
<style scoped></style>

30
src/components/pluginComponents/formComponents/fieldComponents/textInput.vue
View file

@ -1,30 +0,0 @@
<template>
<div>
<label class="uk-form-label">{{label}}</label>
<input
class="uk-input uk-form-small"
type="text"
v-bind:name="name"
v-bind:value="value"
v-bind:placeholder="placeholder"
@input="$emit('input',$event.target.value)"
>
</div>
</template>
<script>
export default {
name: 'textInput',
props: [
'placeholder',
'label',
'name',
'value'
]
}
</script>
<style scoped></style>