egirlskey/packages/frontend/src/widgets/widget.ts

74 lines
1.7 KiB
TypeScript
Raw Normal View History

import { reactive, watch } from 'vue';
import { throttle } from 'throttle-debounce';
import { Form, GetFormResultType } from '@/scripts/form';
import * as os from '@/os';
2022-11-17 00:31:07 +00:00
import { deepClone } from '@/scripts/clone';
export type Widget<P extends Record<string, unknown>> = {
id: string;
data: Partial<P>;
};
export type WidgetComponentProps<P extends Record<string, unknown>> = {
widget?: Widget<P>;
};
export type WidgetComponentEmits<P extends Record<string, unknown>> = {
(ev: 'updateProps', props: P);
};
export type WidgetComponentExpose = {
name: string;
id: string | null;
configure: () => void;
};
export const useWidgetPropsManager = <F extends Form & Record<string, { default: any; }>>(
name: string,
propsDef: F,
props: Readonly<WidgetComponentProps<GetFormResultType<F>>>,
emit: WidgetComponentEmits<GetFormResultType<F>>,
): {
widgetProps: GetFormResultType<F>;
save: () => void;
configure: () => void;
} => {
2022-11-17 00:31:07 +00:00
const widgetProps = reactive(props.widget ? deepClone(props.widget.data) : {});
const mergeProps = () => {
for (const prop of Object.keys(propsDef)) {
2022-07-04 14:39:04 +00:00
if (typeof widgetProps[prop] === 'undefined') {
widgetProps[prop] = propsDef[prop].default;
}
}
};
watch(widgetProps, () => {
mergeProps();
2022-11-17 00:31:07 +00:00
}, { deep: true, immediate: true });
const save = throttle(3000, () => {
emit('updateProps', widgetProps);
});
const configure = async () => {
2022-11-17 00:31:07 +00:00
const form = deepClone(propsDef);
for (const item of Object.keys(form)) {
form[item].default = widgetProps[item];
}
const { canceled, result } = await os.form(name, form);
if (canceled) return;
for (const key of Object.keys(result)) {
widgetProps[key] = result[key];
}
save();
};
return {
widgetProps,
save,
configure,
};
};