helene/FoundKey
2
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactor form-dialog.vue to use Composition API

Browse source
This commit is contained in:
Norm 2022-07-20 18:15:55 -04:00
parent a988f6bda0
commit d29a0dad8f
1 changed files with 46 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
packages/client/src/components/form-dialog.vue
View file

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