1 files changed, 22 insertions, 15 deletions
diff --git a/src/client/widgets/define.ts b/src/client/widgets/define.ts
index 50c9b10e81..c199d38e72 100644
--- a/src/client/widgets/define.ts
+++ b/src/client/widgets/define.ts
@@ -1,30 +1,32 @@
-import Vue from 'vue';
-import { Form } from '../scripts/form';
+import { defineComponent } from 'vue';
+import { Form } from '@/scripts/form';
+import * as os from '@/os';
 
 export default function <T extends Form>(data: {
 	name: string;
 	props?: () => T;
 }) {
-	return Vue.extend({
+	return defineComponent({
 		props: {
 			widget: {
 				type: Object,
 				required: false
 			},
-			isCustomizeMode: {
-				type: Boolean,
-				default: 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;
 			},
-
-			props(): Record<string, any> {
-				return this.widget ? this.widget.data : {};
-			}
 		},
 
 		created() {
@@ -32,7 +34,9 @@ export default function <T extends Form>(data: {
 
 			this.$watch('props', () => {
 				this.mergeProps();
-			});
+			}, { deep: true });
+
+			if (this.settingCallback) this.settingCallback(this.setting);
 		},
 
 		methods: {
@@ -41,7 +45,7 @@ export default function <T extends Form>(data: {
 					const defaultProps = data.props();
 					for (const prop of Object.keys(defaultProps)) {
 						if (this.props.hasOwnProperty(prop)) continue;
-						Vue.set(this.props, prop, defaultProps[prop].default);
+						this.props[prop] = defaultProps[prop].default;
 					}
 				}
 			},
@@ -51,11 +55,11 @@ export default function <T extends Form>(data: {
 				for (const item of Object.keys(form)) {
 					form[item].default = this.props[item];
 				}
-				const { canceled, result } = await this.$root.form(data.name, form);
+				const { canceled, result } = await os.form(data.name, form);
 				if (canceled) return;
 
 				for (const key of Object.keys(result)) {
-					Vue.set(this.props, key, result[key]);
+					this.props[key] = result[key];
 				}
 
 				this.save();
@@ -63,7 +67,10 @@ export default function <T extends Form>(data: {
 
 			save() {
 				if (this.widget) {
-					this.$store.commit('deviceUser/updateWidget', this.widget);
+					this.$store.commit('deviceUser/updateWidget', {
+						...this.widget,
+						data: this.props
+					});
 				}
 			}
 		}