julian/LiteRequest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix settings select

Browse Source
This commit is contained in:
Julian Freeman
2025-12-01 09:49:56 -04:00
parent c5d82a710d
commit d6dda10d2f
2 changed files with 22 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/CustomSelect.vue
View File

@@ -31,11 +31,10 @@ const normalizedOptions = computed(() => {
const selectedLabel = computed(() => {
const found = normalizedOptions.value.find(o => o.value === props.modelValue);
return found ? (found.label || found.value) : props.placeholder || '';
});
const toggle = () => {
isOpen.value = !isOpen.value;
return found ? (found.label || found.value) : (props.modelValue || props.placeholder || '');
});
const toggle = () => { isOpen.value = !isOpen.value;
};
const select = (value: string) => {

31
src/components/SettingsModal.vue
View File

@@ -1,6 +1,8 @@
<script setup lang="ts">
import { useSettingsStore } from '../stores/settingsStore';
import CustomSelect from './CustomSelect.vue';
import { X } from 'lucide-vue-next';
import { computed } from 'vue';
const emit = defineEmits(['close']);
const settings = useSettingsStore();
@@ -12,13 +14,20 @@ const fontOptions = [
"Monaco, Menlo, 'Ubuntu Mono', monospace",
"Arial, sans-serif"
];
const displayFontOptions = computed(() => {
return fontOptions.map(font => ({
value: font,
label: font.split(',')[0].replace(/['"]/g, '')
}));
});
</script>
<template>
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" @click.self="emit('close')">
<div class="bg-slate-900 border border-slate-700 rounded-xl shadow-2xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in-95 duration-200">
<div class="bg-slate-900 border border-slate-700 rounded-xl shadow-2xl w-full max-w-md animate-in fade-in zoom-in-95 duration-200">
<!-- Header -->
<div class="flex items-center justify-between px-6 py-4 border-b border-slate-800 bg-slate-950/50">
<div class="flex items-center justify-between px-6 py-4 border-b border-slate-800 bg-slate-950/50 rounded-t-xl">
<h2 class="text-lg font-semibold text-slate-100">Editor Settings</h2>
<button
@click="emit('close')"
@@ -52,18 +61,14 @@ const fontOptions = [
<div class="space-y-3">
<label class="text-sm font-medium text-slate-300">Font Family</label>
<div class="space-y-2">
<select
<CustomSelect
v-model="settings.editorFontFamily"
class="w-full bg-slate-950 border border-slate-700 text-slate-300 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block p-2.5"
>
<option v-for="font in fontOptions" :key="font" :value="font">
{{ font.split(',')[0].replace(/['"]/g, '') }}
</option>
<option value="custom">Custom...</option>
</select>
:options="displayFontOptions"
:full-width="true"
placeholder="Select or enter font family"
/>
<input
v-if="settings.editorFontFamily === 'custom' || !fontOptions.includes(settings.editorFontFamily)"
v-if="!fontOptions.includes(settings.editorFontFamily)"
type="text"
v-model="settings.editorFontFamily"
placeholder="e.g. 'JetBrains Mono', monospace"
@@ -74,7 +79,7 @@ const fontOptions = [
</div>
<!-- Footer -->
<div class="px-6 py-4 bg-slate-950/50 border-t border-slate-800 flex justify-end">
<div class="px-6 py-4 bg-slate-950/50 border-t border-slate-800 flex justify-end rounded-b-xl">
<button
@click="emit('close')"
class="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-200 text-sm font-medium rounded-lg transition-colors border border-slate-700"