Add a mini menu, make sync button a generic button, and allow reseting properties
This commit is contained in:
Julian Stirling
parent
ace42bcf2e
commit
a2ebed1006
6 changed files with 343 additions and 93 deletions
|
|
@ -1,11 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<label
|
||||
v-if="useDropdown"
|
||||
class="uk-form-label"
|
||||
:class="{ 'ofm-highlighted-label': isChangedFomDefault }"
|
||||
>
|
||||
{{ label }}
|
||||
<label v-if="useDropdown">
|
||||
<span class="uk-form-label" :class="{ 'ofm-highlighted-label': isChangedFomDefault }">
|
||||
{{ label }}
|
||||
</span>
|
||||
<div class="input-and-buttons-container">
|
||||
<select
|
||||
v-model="internalValue"
|
||||
|
|
@ -16,15 +14,36 @@
|
|||
{{ display }}
|
||||
</option>
|
||||
</select>
|
||||
<sync-property-button @click="requestUpdate" />
|
||||
<mini-menu v-slot="{ close }">
|
||||
<p>
|
||||
<icon-button
|
||||
icon="refresh"
|
||||
:show-label="true"
|
||||
label="Reset to default"
|
||||
@click="
|
||||
resetDefault();
|
||||
close();
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<icon-button
|
||||
icon="sync"
|
||||
:show-label="true"
|
||||
label="Re-sync value"
|
||||
@click="
|
||||
requestUpdate;
|
||||
close();
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
</mini-menu>
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
v-if="!useDropdown && dataType == 'number'"
|
||||
class="uk-form-label"
|
||||
:class="{ 'ofm-highlighted-label': isChangedFomDefault }"
|
||||
>
|
||||
{{ label }}
|
||||
<label v-if="!useDropdown && dataType == 'number'">
|
||||
<span class="uk-form-label" :class="{ 'ofm-highlighted-label': isChangedFomDefault }">
|
||||
{{ label }}
|
||||
</span>
|
||||
<div class="input-and-buttons-container">
|
||||
<div class="uk-inline number-wrapper">
|
||||
<input
|
||||
|
|
@ -50,14 +69,34 @@
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<sync-property-button @click="requestUpdate" />
|
||||
<mini-menu v-slot="{ close }">
|
||||
<p>
|
||||
<icon-button
|
||||
icon="refresh"
|
||||
:show-label="true"
|
||||
label="Reset to default"
|
||||
@click="
|
||||
resetDefault();
|
||||
close();
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<icon-button
|
||||
icon="sync"
|
||||
:show-label="true"
|
||||
label="Re-sync value"
|
||||
@click="
|
||||
requestUpdate;
|
||||
close();
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
</mini-menu>
|
||||
</div>
|
||||
</label>
|
||||
<div v-if="!useDropdown && dataType == 'boolean'" class="input-and-buttons-container">
|
||||
<label
|
||||
class="uk-form-label property-input"
|
||||
:class="{ 'ofm-highlighted-label': isChangedFomDefault }"
|
||||
>
|
||||
<label class="property-input">
|
||||
<input
|
||||
ref="checkbox"
|
||||
v-model="internalValue"
|
||||
|
|
@ -66,16 +105,39 @@
|
|||
type="checkbox"
|
||||
@change="sendValue"
|
||||
/>
|
||||
{{ label }}
|
||||
<span class="uk-form-label" :class="{ 'ofm-highlighted-label': isChangedFomDefault }">
|
||||
{{ label }}
|
||||
</span>
|
||||
</label>
|
||||
<sync-property-button @click="requestUpdate" />
|
||||
<mini-menu v-slot="{ close }">
|
||||
<p>
|
||||
<icon-button
|
||||
icon="refresh"
|
||||
:show-label="true"
|
||||
label="Reset to default"
|
||||
@click="
|
||||
resetDefault();
|
||||
close();
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<icon-button
|
||||
icon="sync"
|
||||
:show-label="true"
|
||||
label="Re-sync value"
|
||||
@click="
|
||||
requestUpdate;
|
||||
close();
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
</mini-menu>
|
||||
</div>
|
||||
<label
|
||||
v-if="!useDropdown && dataType == 'number_array'"
|
||||
class="uk-form-label"
|
||||
:class="{ 'ofm-highlighted-label': isChangedFomDefault }"
|
||||
>
|
||||
{{ label }}
|
||||
<label v-if="!useDropdown && dataType == 'number_array'">
|
||||
<span class="uk-form-label" :class="{ 'ofm-highlighted-label': isChangedFomDefault }">
|
||||
{{ label }}
|
||||
</span>
|
||||
<div class="input-and-buttons-container">
|
||||
<input
|
||||
v-for="i in valueLength"
|
||||
|
|
@ -90,15 +152,36 @@
|
|||
@keydown="keyDown"
|
||||
@animationend="animationEnd"
|
||||
/>
|
||||
<sync-property-button @click="requestUpdate" />
|
||||
<mini-menu v-slot="{ close }">
|
||||
<p>
|
||||
<icon-button
|
||||
icon="refresh"
|
||||
:show-label="true"
|
||||
label="Reset to default"
|
||||
@click="
|
||||
resetDefault();
|
||||
close();
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<icon-button
|
||||
icon="sync"
|
||||
:show-label="true"
|
||||
label="Re-sync value"
|
||||
@click="
|
||||
requestUpdate;
|
||||
close();
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
</mini-menu>
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
v-if="!useDropdown && dataType == 'number_object'"
|
||||
class="uk-form-label"
|
||||
:class="{ 'ofm-highlighted-label': isChangedFomDefault }"
|
||||
>
|
||||
{{ label }}
|
||||
<label v-if="!useDropdown && dataType == 'number_object'">
|
||||
<span class="uk-form-label" :class="{ 'ofm-highlighted-label': isChangedFomDefault }">
|
||||
{{ label }}
|
||||
</span>
|
||||
<div v-for="(val, key) in modelValue" :key="key">
|
||||
<label>{{ internalLabels[key] }}</label>
|
||||
<div class="input-and-buttons-container">
|
||||
|
|
@ -113,16 +196,37 @@
|
|||
@keydown="keyDown"
|
||||
@animationend="animationEnd"
|
||||
/>
|
||||
<sync-property-button @click="requestUpdate" />
|
||||
<mini-menu v-slot="{ close }">
|
||||
<p>
|
||||
<icon-button
|
||||
icon="refresh"
|
||||
:show-label="true"
|
||||
label="Reset to default"
|
||||
@click="
|
||||
resetDefault();
|
||||
close();
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<icon-button
|
||||
icon="sync"
|
||||
:show-label="true"
|
||||
label="Re-sync value"
|
||||
@click="
|
||||
requestUpdate;
|
||||
close();
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
</mini-menu>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
v-if="!useDropdown && dataType == 'string'"
|
||||
class="uk-form-label"
|
||||
:class="{ 'ofm-highlighted-label': isChangedFomDefault }"
|
||||
>
|
||||
{{ label }}
|
||||
<label v-if="!useDropdown && dataType == 'string'">
|
||||
<span class="uk-form-label" :class="{ 'ofm-highlighted-label': isChangedFomDefault }">
|
||||
{{ label }}
|
||||
</span>
|
||||
<div class="input-and-buttons-container">
|
||||
<input
|
||||
v-model="internalValue"
|
||||
|
|
@ -134,15 +238,36 @@
|
|||
@keydown="keyDown"
|
||||
@animationend="animationEnd"
|
||||
/>
|
||||
<sync-property-button @click="requestUpdate" />
|
||||
<mini-menu v-slot="{ close }">
|
||||
<p>
|
||||
<icon-button
|
||||
icon="refresh"
|
||||
:show-label="true"
|
||||
label="Reset to default"
|
||||
@click="
|
||||
resetDefault();
|
||||
close();
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<icon-button
|
||||
icon="sync"
|
||||
:show-label="true"
|
||||
label="Re-sync value"
|
||||
@click="
|
||||
requestUpdate;
|
||||
close();
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
</mini-menu>
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
v-if="!useDropdown && dataType == 'other'"
|
||||
class="uk-form-label"
|
||||
:class="{ 'ofm-highlighted-label': isChangedFomDefault }"
|
||||
>
|
||||
{{ label }}
|
||||
<label v-if="!useDropdown && dataType == 'other'">
|
||||
<span class="uk-form-label" :class="{ 'ofm-highlighted-label': isChangedFomDefault }">
|
||||
{{ label }}
|
||||
</span>
|
||||
<div class="input-and-buttons-container">
|
||||
<input
|
||||
v-model="internalValue"
|
||||
|
|
@ -156,13 +281,15 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import syncPropertyButton from "./syncPropertyButton.vue";
|
||||
import iconButton from "@/components/genericComponents/iconButton.vue";
|
||||
import MiniMenu from "@/components/genericComponents/miniMenu.vue";
|
||||
|
||||
export default {
|
||||
name: "InputFromSchema",
|
||||
|
||||
components: {
|
||||
syncPropertyButton,
|
||||
iconButton,
|
||||
MiniMenu,
|
||||
},
|
||||
props: {
|
||||
dataSchema: {
|
||||
|
|
@ -195,7 +322,7 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
emits: ["requestUpdate", "sendValue", "animationShown"],
|
||||
emits: ["requestUpdate", "resetDefault", "sendValue", "animationShown"],
|
||||
|
||||
compatConfig: { COMPONENT_V_MODEL: false },
|
||||
|
||||
|
|
@ -355,6 +482,11 @@ export default {
|
|||
this.internalValue = this.modelValue;
|
||||
this.$emit("requestUpdate");
|
||||
},
|
||||
resetDefault: async function () {
|
||||
if (this.isChangedFomDefault) {
|
||||
this.$emit("sendValue", this.dataSchema.default);
|
||||
}
|
||||
},
|
||||
sendValue: async function () {
|
||||
this.$emit("sendValue", this.internalValue);
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue