Remove field components that we don't use
This commit is contained in:
Julian Stirling
parent
a5da5241ae
commit
758a5a73e9
9 changed files with 0 additions and 531 deletions
|
|
@ -1,70 +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"
|
||||
:value="option"
|
||||
:checked="value && value.includes(option)"
|
||||
v-bind="$attrs"
|
||||
@change="updateValue($event.target)"
|
||||
/>
|
||||
{{ option }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CheckList",
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
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)) {
|
||||
newSelected = newSelected.filter(function(value) {
|
||||
return value != target.value;
|
||||
});
|
||||
}
|
||||
}
|
||||
this.$emit("input", newSelected);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<p v-html="content"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "HtmlBlock",
|
||||
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "",
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<form @submit.prevent="handleMetadataSubmit">
|
||||
<div class="uk-margin-remove uk-flex uk-flex-middle">
|
||||
<div class="uk-margin-remove-top uk-padding-remove uk-grid-small uk-width-expand" uk-grid>
|
||||
<div class="uk-margin-remove uk-width-1-2">
|
||||
<input
|
||||
ref="textboxKey"
|
||||
v-model="newMetadata.key"
|
||||
class="uk-input uk-form-width-small uk-form-small"
|
||||
type="text"
|
||||
name="flavor"
|
||||
placeholder="Key"
|
||||
/>
|
||||
</div>
|
||||
<div class="uk-margin-remove uk-width-1-2">
|
||||
<input
|
||||
v-model="newMetadata.value"
|
||||
class="uk-input uk-form-width-small uk-form-small"
|
||||
type="text"
|
||||
name="flavor"
|
||||
placeholder="Value"
|
||||
@keyup.enter="handleMetadataSubmit()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="#" class="uk-icon uk-margin-left" @click="handleMetadataSubmit()"
|
||||
><span class="material-symbols-outlined">add_circle</span></a
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div
|
||||
v-for="(val, key) in value"
|
||||
:key="key"
|
||||
class="uk-width-1-1 uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-flex uk-flex-middle"
|
||||
>
|
||||
<div class="uk-margin-remove-top uk-padding-remove uk-width-expand">
|
||||
<labelInput :name="key" :label="key" :value="value[key]" @input="value[key] = $event" />
|
||||
</div>
|
||||
<a href="#" class="uk-icon uk-width-auto" @click="delMetadataKey(key)"
|
||||
><span class="material-symbols-outlined">delete</span></a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import labelInput from "../fieldComponents/labelInput";
|
||||
|
||||
export default {
|
||||
name: "KeyvalList",
|
||||
|
||||
components: {
|
||||
labelInput,
|
||||
},
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
newMetadata: {
|
||||
key: "",
|
||||
value: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleMetadataSubmit: function() {
|
||||
var newSelected = {};
|
||||
|
||||
if (this.value != null) {
|
||||
Object.assign(newSelected, this.value);
|
||||
}
|
||||
|
||||
newSelected[this.newMetadata.key] = this.newMetadata.value;
|
||||
this.newMetadata.key = "";
|
||||
this.newMetadata.value = "";
|
||||
|
||||
this.$emit("input", newSelected);
|
||||
|
||||
// Move focus back to key textbox
|
||||
if (this.$refs.textboxKey) {
|
||||
this.$refs.textboxKey.focus();
|
||||
}
|
||||
},
|
||||
|
||||
delMetadataKey: function(key) {
|
||||
var newSelected = {};
|
||||
|
||||
if (this.value != null) {
|
||||
Object.assign(newSelected, this.value);
|
||||
}
|
||||
|
||||
this.$delete(newSelected, key);
|
||||
|
||||
this.$emit("input", newSelected);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<label class="uk-form-label uk-text-bold">{{ label }}</label>
|
||||
|
||||
<div uk-tooltip="title: Click to edit value; delay: 250" @click="setEditing(true)">
|
||||
<div v-show="editing == false">
|
||||
<label> {{ value }} </label>
|
||||
</div>
|
||||
|
||||
<input
|
||||
v-show="editing == true"
|
||||
ref="textinput"
|
||||
class="uk-input uk-form-small"
|
||||
type="text"
|
||||
:name="name"
|
||||
:value="value"
|
||||
autofocus
|
||||
@blur="setEditing(false)"
|
||||
@keyup.enter="setEditing(false)"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "LabelInput",
|
||||
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
editing: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
setEditing(editing) {
|
||||
this.editing = editing;
|
||||
if (editing == true) {
|
||||
this.$nextTick(() => this.$refs.textinput.focus());
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<label class="uk-form-label">{{ label }}</label>
|
||||
|
||||
<input
|
||||
class="uk-input uk-form-small"
|
||||
type="number"
|
||||
:name="name"
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
v-bind="$attrs"
|
||||
@input="$emit('input', Number($event.target.value))"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "NumberInput",
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0,
|
||||
},
|
||||
placeholder: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,49 +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: {
|
||||
value: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "",
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<label class="uk-form-label">{{ label }}</label>
|
||||
|
||||
<select
|
||||
class="uk-select uk-form-small"
|
||||
:value="value"
|
||||
v-bind="$attrs"
|
||||
@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: {
|
||||
value: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "",
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<form @submit.prevent="handleTagSubmit">
|
||||
<div class="uk-margin-small uk-flex uk-flex-middle">
|
||||
<div class="uk-margin-remove-top uk-width-expand">
|
||||
<div class="uk-inline uk-width-1-1">
|
||||
<span class="uk-form-icon"><span class="material-symbols-outlined">label</span></span>
|
||||
<input
|
||||
v-model="newTag"
|
||||
class="uk-input uk-form-small"
|
||||
type="text"
|
||||
name="flavor"
|
||||
placeholder="Tag"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="#" class="uk-icon uk-margin-left" @click="handleTagSubmit()"
|
||||
><span class="material-symbols-outlined">add_circle</span></a
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<span
|
||||
v-for="tag in value"
|
||||
:key="tag"
|
||||
class="uk-label uk-margin-small-right deletable-label"
|
||||
@click="delTag(tag)"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TagList",
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
newTag: "",
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleTagSubmit: function() {
|
||||
var newSelected = this.value != null ? [...this.value] : []; // Clone value array
|
||||
|
||||
newSelected.push(this.newTag);
|
||||
this.newTag = "";
|
||||
|
||||
this.$emit("input", newSelected);
|
||||
},
|
||||
|
||||
delTag: function(tag) {
|
||||
var newSelected = this.value != null ? [...this.value] : []; // Clone value array
|
||||
|
||||
if (newSelected.includes(tag)) {
|
||||
newSelected = newSelected.filter(function(value) {
|
||||
return value != tag;
|
||||
});
|
||||
}
|
||||
|
||||
this.$emit("input", newSelected);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<label v-if="label" class="uk-form-label">{{ label }}</label>
|
||||
|
||||
<input
|
||||
class="uk-input uk-form-small"
|
||||
type="text"
|
||||
:name="name"
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
v-bind="$attrs"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TextInput",
|
||||
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue