Skip to content

Commit 1a4ba26

Browse files
committed
fix: ensure typography preset updates trigger live preview update
1 parent d894825 commit 1a4ba26

File tree

2 files changed

+45
-14
lines changed

2 files changed

+45
-14
lines changed

resources/assets/editor/components/TypographyPresetEditor.vue

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,41 @@ const fontPickerModel = computed({
116116
},
117117
});
118118
119+
const fontStyleModel = computed({
120+
get: () => model.value.fontStyle,
121+
set: (value) => {
122+
model.value = { ...model.value, fontStyle: value };
123+
},
124+
});
125+
126+
const fontSizeModel = computed({
127+
get: () => model.value.fontSize,
128+
set: (value) => {
129+
model.value = { ...model.value, fontSize: value };
130+
},
131+
});
132+
133+
const lineHeightModel = computed({
134+
get: () => model.value.lineHeight,
135+
set: (value) => {
136+
model.value = { ...model.value, lineHeight: value };
137+
},
138+
});
139+
140+
const letterSpacingModel = computed({
141+
get: () => model.value.letterSpacing,
142+
set: (value) => {
143+
model.value = { ...model.value, letterSpacing: value };
144+
},
145+
});
146+
147+
const textTransformModel = computed({
148+
get: () => model.value.textTransform,
149+
set: (value) => {
150+
model.value = { ...model.value, textTransform: value };
151+
},
152+
});
153+
119154
</script>
120155

121156
<template>
@@ -129,31 +164,31 @@ const fontPickerModel = computed({
129164
<!-- Font Style -->
130165
<PropertyField
131166
:field="fontStyleField"
132-
v-model="model.fontStyle"
167+
v-model="fontStyleModel"
133168
/>
134169

135170
<!-- Font Size (Responsive via PropertyField) -->
136171
<PropertyField
137172
:field="fontSizeField"
138-
v-model="model.fontSize"
173+
v-model="fontSizeModel"
139174
/>
140175

141176
<!-- Line Height (Responsive via PropertyField) -->
142177
<PropertyField
143178
:field="lineHeightField"
144-
v-model="model.lineHeight"
179+
v-model="lineHeightModel"
145180
/>
146181

147182
<!-- Letter Spacing -->
148183
<PropertyField
149184
:field="letterSpacingField"
150-
v-model="model.letterSpacing"
185+
v-model="letterSpacingModel"
151186
/>
152187

153188
<!-- Text Transform -->
154189
<PropertyField
155190
:field="textTransformField"
156-
v-model="model.textTransform"
191+
v-model="textTransformModel"
157192
/>
158193

159194
<!-- Delete Preset Button -->

resources/assets/editor/components/TypographyPresets.vue

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ interface Props {
2020
2121
const props = defineProps<Props>();
2222
const model = defineModel<Record<string, TypographyPresetData>>();
23-
const emit = defineEmits(['update:modelValue']);
2423
2524
const { t } = useI18n();
2625
@@ -40,7 +39,7 @@ const editingPresetValue = computed({
4039
},
4140
set(value: TypographyPresetData | null) {
4241
if (!editingPreset.value || !value) return;
43-
model.value![editingPreset.value] = value;
42+
model.value = { ...model.value, [editingPreset.value]: value };
4443
}
4544
});
4645
@@ -49,17 +48,15 @@ function onEditPreset(id: string) {
4948
editModalOpen.value = true;
5049
}
5150
52-
function onUpdate() {
53-
emit('update:modelValue', model.value);
54-
}
55-
5651
function onAddPreset() {
5752
const keys = Object.keys(model.value!);
5853
const id = `typography-${keys.length + 1}`;
5954
60-
model.value![id] = structuredClone(toRaw(model.value![keys[0]]));
55+
model.value = {
56+
...model.value,
57+
[id]: structuredClone(toRaw(model.value![keys[0]]))
58+
};
6159
62-
onUpdate();
6360
onEditPreset(id);
6461
}
6562
@@ -153,7 +150,6 @@ const canDeleteCurrentPreset = computed(() => {
153150
v-if="editingPreset && editingPresetValue"
154151
v-model="editingPresetValue"
155152
:can-delete="canDeleteCurrentPreset"
156-
@update="onUpdate"
157153
@delete="handleEditorDelete"
158154
/>
159155
</div>

0 commit comments

Comments
 (0)