ivyforms / frontend / src / composables / useStyleWatcherRegistries.ts

useStyleWatcherRegistries.ts in The Innovative Form Builder – IvyForms 1.0, at frontend/src/composables/useStyleWatcherRegistries.ts

114 lines 2.7 KB

Raw Download Zip

1	import { watch, type Ref } from 'vue'
2	import {
3	buildDimensionString,
4	createDimensionWatcher,
5	createStyleWatcher,
6	} from '@/utils/styleUtils.ts'
7	import type { FormBuilderStore } from '@/utils/styleUtils.ts'
8
9	export type StoreStyleWatcherEntry = {
10	ref: Ref<unknown>
11	storePath: string
12	syncPaths: string[]
13	}
14
15	export type StoreDimensionWatcherEntry = {
16	valueRef: Ref<number \| null>
17	unitRef: Ref<string>
18	storePath: string
19	syncPaths: string[]
20	}
21
22	export type CallbackStyleWatcherEntry = {
23	watchRef: Ref<string>
24	getCurrentValue: () => string \| undefined
25	onChange: () => void
26	}
27
28	export type CallbackDimensionWatcherEntry = {
29	valueRef: Ref<number \| null>
30	unitRef: Ref<string>
31	getCurrentValue: () => string \| undefined
32	onChange: () => void
33	}
34
35	export const registerDeferredWatchGroup = (
36	sources: ReadonlyArray<Ref<unknown>>,
37	isSyncingFromStore: Ref<boolean>,
38	onChange: () => void,
39	) => {
40	watch(sources, () => {
41	if (isSyncingFromStore.value) return
42	setTimeout(() => {
43	onChange()
44	}, 0)
45	})
46	}
47
48	export const registerStoreStyleWatchers = (
49	entries: StoreStyleWatcherEntry[],
50	formBuilderStore: FormBuilderStore,
51	isSyncingFromStore: Ref<boolean>,
52	) => {
53	entries.forEach((entry) => {
54	createStyleWatcher({
55	ref: entry.ref,
56	storePath: entry.storePath,
57	syncPaths: entry.syncPaths,
58	formBuilderStore,
59	isSyncingFromStore,
60	})
61	})
62	}
63
64	export const registerStoreDimensionWatchers = (
65	entries: StoreDimensionWatcherEntry[],
66	formBuilderStore: FormBuilderStore,
67	isSyncingFromStore: Ref<boolean>,
68	) => {
69	entries.forEach((entry) => {
70	createDimensionWatcher(
71	entry.valueRef as unknown as Ref<number>,
72	entry.unitRef,
73	entry.storePath,
74	entry.syncPaths,
75	formBuilderStore,
76	isSyncingFromStore,
77	)
78	})
79	}
80
81	export const registerCallbackStyleWatchers = (
82	entries: CallbackStyleWatcherEntry[],
83	isSyncingFromStore: Ref<boolean>,
84	) => {
85	entries.forEach((entry) => {
86	watch(entry.watchRef, (newValue) => {
87	if (isSyncingFromStore.value) return
88	setTimeout(() => {
89	if (newValue !== entry.getCurrentValue()) {
90	entry.onChange()
91	}
92	}, 0)
93	})
94	})
95	}
96
97	export const registerCallbackDimensionWatchers = (
98	entries: CallbackDimensionWatcherEntry[],
99	isSyncingFromStore: Ref<boolean>,
100	) => {
101	entries.forEach((entry) => {
102	watch([entry.valueRef, entry.unitRef], () => {
103	if (isSyncingFromStore.value) return
104	setTimeout(() => {
105	const currentValue = entry.getCurrentValue()
106	const newValue = buildDimensionString(entry.valueRef.value, entry.unitRef.value)
107	if (newValue !== '' && newValue !== currentValue) {
108	entry.onChange()
109	}
110	}, 0)
111	})
112	})
113	}
114