Refactor form-dialog.vue to use Composition API

This commit is contained in:
Norm 2022-07-20 18:15:55 -04:00
parent a988f6bda0
commit d29a0dad8f

View file

@ -35,11 +35,11 @@
</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"> ({{ $ts.optional }})</span></template>
<option v-for="item in form[item].enum" :key="item.value" :value="item.value">{{ item.label }}</option>
<option v-for="blockItem in form[item].enum" :key="blockItem.value" :value="blockItem.value">{{ blockItem.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"> ({{ $ts.optional }})</span></template>
<option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option>
<option v-for="blockItem in form[item].options" :key="blockItem.value" :value="blockItem.value">{{ blockItem.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"> ({{ $ts.optional }})</span></template>
@ -54,8 +54,7 @@
</XModalWindow>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import FormInput from './form/input.vue';
import FormTextarea from './form/textarea.vue';
import FormSwitch from './form/switch.vue';
@ -65,63 +64,56 @@ import MkButton from './ui/button.vue';
import FormRadios from './form/radios.vue';
import XModalWindow from '@/components/ui/modal-window.vue';
export default defineComponent({
components: {
XModalWindow,
FormInput,
FormTextarea,
FormSwitch,
FormSelect,
FormRange,
MkButton,
FormRadios,
},
let dialog = $ref<InstanceType<typeof XModalWindow>>();
let values: object = $ref({});
props: {
title: {
type: String,
required: true,
},
form: {
type: Object,
required: true,
},
},
const props = defineProps<{
title: string,
form: object,
}>();
emits: ['done'],
const emit = defineEmits<{
(ev: 'done', v: { result?: object, canceled?: boolean }): void,
(ev: 'closed'): void
}>();
data() {
return {
values: {},
};
},
function ok(): void {
emit('done', {
result: values,
});
dialog.close();
}
created() {
for (const item in this.form) {
this.values[item] = this.form[item].default ?? null;
}
},
function cancel(): void {
emit('done', {
canceled: true,
});
dialog.close();
}
methods: {
ok() {
this.$emit('done', {
result: this.values,
});
this.$refs.dialog.close();
},
for (const item in props.form) {
values[item] = props.form[item].default ?? null;
}
cancel() {
this.$emit('done', {
canceled: true,
});
this.$refs.dialog.close();
},
},
});
// export default defineComponent({
// components: {
// XModalWindow,
// FormInput,
// FormTextarea,
// FormSwitch,
// FormSelect,
// FormRange,
// MkButton,
// FormRadios,
// },
// created() {
// for (const item in this.form) {
// this.values[item] = this.form[item].default ?? null;
// }
// },
// });
</script>
<style lang="scss" scoped>
.xkpnjxcv {
}
</style>