vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactored font settings

pull/7035/merge
Cagatay Civici 2025-01-01 14:44:27 +03:00
parent 681af3955c
commit e630a39d50
4 changed files with 21 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/showcase/components/layout/AppDesigner.vue
View File

@ -107,8 +107,7 @@ export default {
body: { body: {
key: theme.key, key: theme.key,
preset: theme.preset, preset: theme.preset,
config: theme.config, config: theme.config
license_key: this.$appState.designer.licenseKey
} }
}); });
@ -168,15 +167,14 @@ export default {
} }
}, },
async loadFont(fontFamily, weight) { async loadFont(fontFamily, weight) {
const fontFamilyPath = fontFamily.toLowerCase().replace(/\s+/g, '-');
const fontUrl = `https://fonts.bunny.net/${fontFamilyPath}/files/${fontFamilyPath}-latin-${weight}-normal.woff2`;
const font = new FontFace(fontFamily, `url(${fontUrl})`, {
weight: weight.toString(),
style: 'normal'
});
try { try {
const fontFamilyPath = fontFamily.toLowerCase().replace(/\s+/g, '-');
const fontUrl = `https://fonts.bunny.net/${fontFamilyPath}/files/${fontFamilyPath}-latin-${weight}-normal.woff2`;
const font = new FontFace(fontFamily, `url(${fontUrl})`, {
weight: weight.toString(),
style: 'normal'
});
const loadedFont = await font.load(); const loadedFont = await font.load();
document.fonts.add(loadedFont); document.fonts.add(loadedFont);

12
apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
View File

@ -108,8 +108,8 @@ export default {
name: this.themeName, name: this.themeName,
preset: newPreset, preset: newPreset,
config: { config: {
font_size: '14px', fontSize: '14px',
font_family: 'Inter var' fontFamily: 'Inter var'
} }
} }
}); });
@ -136,8 +136,8 @@ export default {
name: this.themeName, name: this.themeName,
figma_tokens: this.figmaData, figma_tokens: this.figmaData,
config: { config: {
font_size: '14px', fontSize: '14px',
font_family: 'Inter var' fontFamily: 'Inter var'
} }
} }
}); });
@ -179,8 +179,8 @@ export default {
key: t_key, key: t_key,
preset: preset, preset: preset,
config: { config: {
font_size: '14px', fontSize: '14px',
font_family: 'Inter var' fontFamily: 'Inter var'
} }
}; };
this.design; this.design;

4
apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
View File

@ -188,8 +188,8 @@ export default {
}; };
usePreset(this.$appState.designer.theme.preset); usePreset(this.$appState.designer.theme.preset);
this.designerService.applyFont(this.$appState.designer.theme.config.font_family); this.designerService.applyFont(this.$appState.designer.theme.config.fontFamily);
document.documentElement.style.fontSize = this.$appState.designer.theme.config.font_size; document.documentElement.style.fontSize = this.$appState.designer.theme.config.fontSize;
this.designerService.refreshACTokens(); this.designerService.refreshACTokens();
this.$appState.designer.activeView = 'editor'; this.$appState.designer.activeView = 'editor';
} }

16
apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue
View File

@ -5,14 +5,14 @@
<div class="flex gap-4"> <div class="flex gap-4">
<div class="mb-4"> <div class="mb-4">
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Base</div> <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Base</div>
<select v-model="$appState.designer.theme.config.font_size" @change="changeBaseFontSize" class="appearance-none px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 w-20"> <select v-model="$appState.designer.theme.config.fontSize" @change="changeBaseFontSize" class="appearance-none px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 w-20">
<option v-for="fontSize of fontSizes" :key="fontSize" :value="fontSize">{{ fontSize }}</option> <option v-for="fontSize of fontSizes" :key="fontSize" :value="fontSize">{{ fontSize }}</option>
</select> </select>
</div> </div>
<div> <div>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Family</div> <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Family</div>
<select v-model="$appState.designer.theme.config.font_family" @change="changeFont" class="appearance-none px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 w-48"> <select v-model="$appState.designer.theme.config.fontFamily" @change="changeFont" class="appearance-none px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 w-48">
<option v-for="font of fonts" :key="font" :value="font">{{ font }}</option> <option v-for="font of fonts" :key="font" :value="font">{{ font }}</option>
</select> </select>
</div> </div>
@ -77,16 +77,16 @@ export default {
missingTokens: [], missingTokens: [],
status: null, status: null,
fontSizes: ['12px', '13px', '14px', '15px', '16px'], fontSizes: ['12px', '13px', '14px', '15px', '16px'],
fonts: ['DM Sans', 'Inter var', 'Figtree', 'Lato', 'Lexend', 'Poppins', 'Public Sans', 'Raleway', 'Roboto', 'Open Sans', 'Quicksand'] fonts: ['DM Sans', 'Inter var', 'Figtree', 'Lato', 'Lexend', 'Montserrat', 'Poppins', 'Public Sans', 'Raleway', 'Roboto', 'Open Sans', 'Quicksand']
}; };
}, },
methods: { methods: {
changeFont() { changeFont() {
this.designerService.applyFont(this.$appState.designer.theme.config.font_size); this.designerService.applyFont(this.$appState.designer.theme.config.fontFamily);
this.designerService.saveTheme(this.$appState.designer.theme); this.designerService.saveTheme(this.$appState.designer.theme);
}, },
changeBaseFontSize() { changeBaseFontSize() {
document.documentElement.style.fontSize = this.$appState.designer.theme.config.font_family; document.documentElement.style.fontSize = this.$appState.designer.theme.config.fontSize;
this.designerService.saveTheme(this.$appState.designer.theme); this.designerService.saveTheme(this.$appState.designer.theme);
}, },
async preview() { async preview() {
@ -95,9 +95,6 @@ export default {
headers: { headers: {
Authorization: `Bearer ${this.$appState.designer.ticket}`, Authorization: `Bearer ${this.$appState.designer.ticket}`,
'X-License-Key': this.$appState.designer.licenseKey 'X-License-Key': this.$appState.designer.licenseKey
},
body: {
license_key: this.$appState.designer.licenseKey
} }
}); });
@ -131,9 +128,6 @@ export default {
headers: { headers: {
Authorization: `Bearer ${this.$appState.designer.ticket}`, Authorization: `Bearer ${this.$appState.designer.ticket}`,
'X-License-Key': this.$appState.designer.licenseKey 'X-License-Key': this.$appState.designer.licenseKey
},
body: {
license_key: this.$appState.designer.licenseKey
} }
}); });