224 lines
5.1 KiB
Vue
224 lines
5.1 KiB
Vue
<template>
|
|
<XModalWindow
|
|
ref="dialog"
|
|
:width="450"
|
|
:can-close="false"
|
|
:with-ok-button="true"
|
|
:ok-button-disabled="false"
|
|
@click="cancel()"
|
|
@ok="ok()"
|
|
@close="cancel()"
|
|
@closed="$emit('closed')"
|
|
>
|
|
<template #header>
|
|
{{ title }}
|
|
</template>
|
|
|
|
<MkSpacer :margin-min="20" :margin-max="32">
|
|
<div class="_formRoot">
|
|
<template
|
|
v-for="item in Object.keys(form).filter(
|
|
(item) => !form[item].hidden,
|
|
)"
|
|
>
|
|
<FormInput
|
|
v-if="form[item].type === 'number'"
|
|
v-model="values[item]"
|
|
type="number"
|
|
:step="form[item].step || 1"
|
|
class="_formBlock"
|
|
>
|
|
<template #label
|
|
><span v-text="form[item].label || item"></span
|
|
><span v-if="form[item].required === false">
|
|
({{ i18n.ts.optional }})</span
|
|
></template
|
|
>
|
|
<template v-if="form[item].description" #caption>{{
|
|
form[item].description
|
|
}}</template>
|
|
</FormInput>
|
|
<FormInput
|
|
v-else-if="
|
|
form[item].type === 'string' &&
|
|
!form[item].multiline
|
|
"
|
|
v-model="values[item]"
|
|
type="text"
|
|
class="_formBlock"
|
|
>
|
|
<template #label
|
|
><span v-text="form[item].label || item"></span
|
|
><span v-if="form[item].required === false">
|
|
({{ i18n.ts.optional }})</span
|
|
></template
|
|
>
|
|
<template v-if="form[item].description" #caption>{{
|
|
form[item].description
|
|
}}</template>
|
|
</FormInput>
|
|
<FormTextarea
|
|
v-else-if="
|
|
form[item].type === 'string' && form[item].multiline
|
|
"
|
|
v-model="values[item]"
|
|
class="_formBlock"
|
|
>
|
|
<template #label
|
|
><span v-text="form[item].label || item"></span
|
|
><span v-if="form[item].required === false">
|
|
({{ i18n.ts.optional }})</span
|
|
></template
|
|
>
|
|
<template v-if="form[item].description" #caption>{{
|
|
form[item].description
|
|
}}</template>
|
|
</FormTextarea>
|
|
<FormSwitch
|
|
v-else-if="form[item].type === 'boolean'"
|
|
v-model="values[item]"
|
|
class="_formBlock"
|
|
>
|
|
<span v-text="form[item].label || item"></span>
|
|
<template v-if="form[item].description" #caption>{{
|
|
form[item].description
|
|
}}</template>
|
|
</FormSwitch>
|
|
<FormSelect
|
|
v-else-if="form[item].type === 'enum'"
|
|
v-model="values[item]"
|
|
class="_formBlock"
|
|
>
|
|
<template #label
|
|
><span v-text="form[item].label || item"></span
|
|
><span v-if="form[item].required === false">
|
|
({{ i18n.ts.optional }})</span
|
|
></template
|
|
>
|
|
<option
|
|
v-for="item in form[item].enum"
|
|
:key="item.value"
|
|
:value="item.value"
|
|
>
|
|
{{ item.label }}
|
|
</option>
|
|
</FormSelect>
|
|
<FormRadios
|
|
v-else-if="form[item].type === 'radio'"
|
|
v-model="values[item]"
|
|
class="_formBlock"
|
|
>
|
|
<template #label
|
|
><span v-text="form[item].label || item"></span
|
|
><span v-if="form[item].required === false">
|
|
({{ i18n.ts.optional }})</span
|
|
></template
|
|
>
|
|
<option
|
|
v-for="item in form[item].options"
|
|
:key="item.value"
|
|
:value="item.value"
|
|
>
|
|
{{ item.label }}
|
|
</option>
|
|
</FormRadios>
|
|
<FormRange
|
|
v-else-if="form[item].type === 'range'"
|
|
v-model="values[item]"
|
|
:min="form[item].min"
|
|
:max="form[item].max"
|
|
:step="form[item].step"
|
|
:text-converter="form[item].textConverter"
|
|
class="_formBlock"
|
|
>
|
|
<template #label
|
|
><span v-text="form[item].label || item"></span
|
|
><span v-if="form[item].required === false">
|
|
({{ i18n.ts.optional }})</span
|
|
></template
|
|
>
|
|
<template v-if="form[item].description" #caption>{{
|
|
form[item].description
|
|
}}</template>
|
|
</FormRange>
|
|
<MkButton
|
|
v-else-if="form[item].type === 'button'"
|
|
class="_formBlock"
|
|
@click="form[item].action($event, values)"
|
|
>
|
|
<span v-text="form[item].content || item"></span>
|
|
</MkButton>
|
|
</template>
|
|
</div>
|
|
</MkSpacer>
|
|
</XModalWindow>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import FormInput from "./form/input.vue";
|
|
import FormTextarea from "./form/textarea.vue";
|
|
import FormSwitch from "./form/switch.vue";
|
|
import FormSelect from "./form/select.vue";
|
|
import FormRange from "./form/range.vue";
|
|
import MkButton from "./MkButton.vue";
|
|
import FormRadios from "./form/radios.vue";
|
|
import XModalWindow from "@/components/MkModalWindow.vue";
|
|
import { i18n } from "@/i18n";
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
XModalWindow,
|
|
FormInput,
|
|
FormTextarea,
|
|
FormSwitch,
|
|
FormSelect,
|
|
FormRange,
|
|
MkButton,
|
|
FormRadios,
|
|
},
|
|
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
form: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
},
|
|
|
|
emits: ["done"],
|
|
|
|
data() {
|
|
return {
|
|
values: {},
|
|
i18n,
|
|
};
|
|
},
|
|
|
|
created() {
|
|
for (const item in this.form) {
|
|
this.values[item] = this.form[item].default ?? null;
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
ok() {
|
|
this.$emit("done", {
|
|
result: this.values,
|
|
});
|
|
this.$refs.dialog.close();
|
|
},
|
|
|
|
cancel() {
|
|
this.$emit("done", {
|
|
canceled: true,
|
|
});
|
|
this.$refs.dialog.close();
|
|
},
|
|
},
|
|
});
|
|
</script>
|