forked from frappe/builder
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathuseBuilderVariable.ts
More file actions
105 lines (93 loc) · 3.08 KB
/
useBuilderVariable.ts
File metadata and controls
105 lines (93 loc) · 3.08 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import builderVariableStore from "@/data/builderVariable";
import { BuilderVariable } from "@/types/Builder/BuilderVariable";
import { toKebabCase } from "@/utils/helpers";
import { computed } from "vue";
export const defaultBuilderVariable = {
variable_name: "",
value: "#000000",
type: "Color" as const,
dark_value: undefined as string | undefined,
};
let instance: ReturnType<typeof builderVariableComposable> | null = null;
function builderVariableComposable() {
const cssVariables = computed(() => {
return builderVariableStore.data.reduce(
(obj: Record<string, string>, builderVariable: BuilderVariable) => {
if (!builderVariable.variable_name) return obj;
const cssVariableName = toKebabCase(builderVariable.variable_name);
if (builderVariable.value) {
obj[`--${cssVariableName}`] = builderVariable.value;
}
return obj;
},
{},
);
});
const darkCssVariables = computed(() => {
return builderVariableStore.data.reduce(
(obj: Record<string, string>, builderVariable: BuilderVariable) => {
if (!builderVariable.variable_name) return obj;
const cssVariableName = toKebabCase(builderVariable.variable_name);
if (builderVariable.dark_value) {
obj[`--${cssVariableName}`] = builderVariable.dark_value;
}
return obj;
},
{},
);
});
const resolveVariableValue = (value: string, isDarkMode = false): string => {
if (value.startsWith("#")) {
return value;
}
let variableName = value;
if (variableName.startsWith("var(--")) {
const match = variableName.match(/^var\(\s*([^) ,]+)/);
variableName = match ? match[1] : variableName;
} else if (!variableName.startsWith("--")) {
variableName = `--${toKebabCase(variableName)}`;
}
const variables = isDarkMode ? darkCssVariables.value : cssVariables.value;
return variables[variableName] ?? cssVariables.value[variableName] ?? value;
};
const createVariable = async (builderVariable: Partial<BuilderVariable>) => {
if (!builderVariable.variable_name || !builderVariable.value) {
throw new Error("Variable name and value are required");
}
return await builderVariableStore.insert.submit({
...defaultBuilderVariable,
...builderVariable,
});
};
const updateVariable = async (builderVariable: Partial<BuilderVariable>) => {
if (!builderVariable.name || !builderVariable.variable_name || !builderVariable.value) {
throw new Error("Variable name, id and value are required");
}
return await builderVariableStore.setValue.submit(builderVariable);
};
const deleteVariable = async (name: string) => {
if (!name) {
throw new Error("Variable name is required");
}
await builderVariableStore.delete.submit(name);
};
return {
cssVariables,
darkCssVariables,
resolveVariableValue,
createVariable,
updateVariable,
deleteVariable,
variables: computed({
get: () => (builderVariableStore.data as BuilderVariable[]) || [],
set: (value: BuilderVariable[]) => {
builderVariableStore.data = value;
},
}),
};
}
export function useBuilderVariable() {
if (instance) return instance;
instance = builderVariableComposable();
return instance;
}