rudeshark.net/packages/client/src/components/MkFormDialog.vue
2023-04-07 17:01:42 -07:00

229 lines
5.2 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="xkpnjxcv _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>
<style lang="scss" scoped>
.xkpnjxcv {
}
</style>