import { defineComponent } from 'vue'; import { Form } from '@/scripts/form'; import * as os from '@/os'; export default function (data: { name: string; props?: () => T; }) { return defineComponent({ props: { widget: { type: Object, required: false }, settingCallback: { required: false } }, data() { return { props: this.widget ? JSON.parse(JSON.stringify(this.widget.data)) : {} }; }, computed: { id(): string { return this.widget ? this.widget.id : null; }, }, created() { this.mergeProps(); this.$watch('props', () => { this.mergeProps(); }, { deep: true }); if (this.settingCallback) this.settingCallback(this.setting); }, methods: { mergeProps() { if (data.props) { const defaultProps = data.props(); for (const prop of Object.keys(defaultProps)) { if (this.props.hasOwnProperty(prop)) continue; this.props[prop] = defaultProps[prop].default; } } }, async setting() { const form = data.props(); for (const item of Object.keys(form)) { form[item].default = this.props[item]; } const { canceled, result } = await os.form(data.name, form); if (canceled) return; for (const key of Object.keys(result)) { this.props[key] = result[key]; } this.save(); }, save() { if (this.widget) { this.$store.commit('deviceUser/updateWidget', { ...this.widget, data: this.props }); } } } }); }