v12 (#5712)

Co-authored-by: MeiMei <30769358+mei23@users.noreply.github.com>
Co-authored-by: Satsuki Yanagi <17376330+u1-liquid@users.noreply.github.com>

src/client/widgets/define.ts

@@ -0,0 +1,58 @@
+import Vue from 'vue';
+
+export default function <T extends object>(data: {
+	name: string;
+	props?: () => T;
+}) {
+	return Vue.extend({
+		props: {
+			widget: {
+				type: Object
+			},
+			isCustomizeMode: {
+				type: Boolean,
+				default: false
+			}
+		},
+
+		computed: {
+			id(): string {
+				return this.widget.id;
+			},
+
+			props(): T {
+				return this.widget.data;
+			}
+		},
+
+		data() {
+			return {
+				bakedOldProps: null
+			};
+		},
+
+		created() {
+			this.mergeProps();
+
+			this.$watch('props', () => {
+				this.mergeProps();
+			});
+		},
+
+		methods: {
+			mergeProps() {
+				if (data.props) {
+					const defaultProps = data.props();
+					for (const prop of Object.keys(defaultProps)) {
+						if (this.props.hasOwnProperty(prop)) continue;
+						Vue.set(this.props, prop, defaultProps[prop]);
+					}
+				}
+			},
+
+			save() {
+				this.$store.dispatch('settings/updateWidget', this.widget);
+			}
+		}
+	});
+}