zoeissleeping/veridian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: dropdown settings buttons | fix: improve model selector

Browse Source 
I should have split this into two commits, but I found the issue with the
settings buttons *after* I changed how the model selector worked, so its
all in this single commit.
This commit is contained in:
Zoe
2026-02-25 16:12:51 +00:00
parent f6dc4c1ee9
commit 62f1fe1c27
8 changed files with 157 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TODO.md
+1 -1
View File
@@ -3,7 +3,7 @@
- [x] Standardize on one icon set rather than 4 (lmao) - [x] Standardize on one icon set rather than 4 (lmao)
- [-] Make dropdowns a singleton component (work in progress) - [-] Make dropdowns a singleton component (work in progress)
- [ ] Make the sidebar better :kekdoggo:. It's annoying to manage across routes - [ ] Make the sidebar better :kekdoggo:. It's annoying to manage across routes
- [ ] Make topics manually renameable - [x] Make topics manually renameable
- [ ] Improve latex rendering, make single line equations work _well_, and likely make it configurable - [ ] Improve latex rendering, make single line equations work _well_, and likely make it configurable
- [x] Implement appearence settings - [x] Implement appearence settings
- [x] Accent colors - [x] Accent colors
app/components/Dialog/Settings.vue
+17 -10
View File
@@ -32,19 +32,24 @@ const PAGES_CONFIG = {
}, },
} as const; } as const;
const { currentPage, pageParams, setPage, close } = useSettings(); const props = defineProps<{
page: keyof typeof PAGES_CONFIG;
params?: string;
}>();
const { close, setOptions } = useDialog();
const runtimePage = computed(() => { const runtimePage = computed(() => {
// 1. Get the base config (e.g., 'providers' or 'general') // 1. Get the base config (e.g., 'providers' or 'general')
const config = PAGES_CONFIG[currentPage.value as keyof typeof PAGES_CONFIG] || PAGES_CONFIG.general; const config = PAGES_CONFIG[props.page as keyof typeof PAGES_CONFIG] || PAGES_CONFIG.general;
// 2. Determine the actual component to show // 2. Determine the actual component to show
let component = config.component; let component = config.component;
let label = config.label as string; let label = config.label as string;
if (currentPage.value === 'providers' && pageParams.value.length > 0) { if (props.page === 'providers' && props.params) {
component = AIServiceProvider; component = AIServiceProvider;
const providerId = pageParams.value[0]; const providerId = props.params;
const provider = providers.value!.find(p => p.id === providerId); const provider = providers.value!.find(p => p.id === providerId);
label = provider ? provider.name : 'Unknown Provider'; label = provider ? provider.name : 'Unknown Provider';
} }
@@ -53,13 +58,13 @@ const runtimePage = computed(() => {
...config, ...config,
label, label,
component, component,
params: pageParams.value, params: props.params,
} as { } as {
label: string; label: string;
icon: string; icon: string;
component: Component; component: Component;
sidebar?: Component; sidebar?: Component;
params: string[]; params: string;
}; };
}); });
</script> </script>
@@ -68,10 +73,11 @@ const runtimePage = computed(() => {
<div class="p-2 flex w-full"> <div class="p-2 flex w-full">
<nav class="w-64 flex flex-col gap-1 mr-2 overflow-y-auto"> <nav class="w-64 flex flex-col gap-1 mr-2 overflow-y-auto">
<!-- If the page has a custom sidebar (for nested lists), show it; otherwise show default nav --> <!-- If the page has a custom sidebar (for nested lists), show it; otherwise show default nav -->
<component v-if="runtimePage?.sidebar" :is="runtimePage.sidebar" @navigate="setPage" /> <component v-if="runtimePage?.sidebar" :is="runtimePage.sidebar"
@navigate="(p: string, params?: string) => setOptions({ page: p, params })" :params="props.params" />
<button v-else v-for="(config, id) in PAGES_CONFIG" :key="id" @click="setPage(id)" <button v-else v-for="(config, id) in PAGES_CONFIG" :key="id" @click="setOptions({ page: id })"
:class="[currentPage === id ? 'bg-[var(--color-hover)]' : 'hover:bg-[var(--color-hover)]', 'flex justify-between items-center shrink-0 px-1 rounded-lg transition-colors cursor-pointer h-9']"> :class="[page === id ? 'bg-[var(--color-hover)]' : 'hover:bg-[var(--color-hover)]', 'flex justify-between items-center shrink-0 px-1 rounded-lg transition-colors cursor-pointer h-9']">
<div class="flex items-center gap-2 max-w-full flex-1"> <div class="flex items-center gap-2 max-w-full flex-1">
<Icon :name="config.icon" class="w-5 h-5" /> <Icon :name="config.icon" class="w-5 h-5" />
{{ config.label }} {{ config.label }}
@@ -90,7 +96,8 @@ const runtimePage = computed(() => {
<Icon name="mynaui:x-solid" /> <Icon name="mynaui:x-solid" />
</button> </button>
</header> </header>
<component @navigate="setPage" :is="runtimePage.component" /> <component @navigate="(p: string, params?: string) => setOptions({ page: p, params })"
:is="runtimePage.component" :params="props.params" />
</main> </main>
</div> </div>
</template> </template>
app/components/Dialog/index.vue
+1 -1
View File
@@ -41,7 +41,7 @@ onUnmounted(() => {
<div class="absolute w-[85vw] max-w-6xl h-[70vh] bg-[var(--bg-base)] rounded-2xl shadow-2xl border border-[var(--color-border)] <div class="absolute w-[85vw] max-w-6xl h-[70vh] bg-[var(--bg-base)] rounded-2xl shadow-2xl border border-[var(--color-border)]
overflow-hidden flex max-h-[90vh]"> overflow-hidden flex max-h-[90vh]">
<KeepAlive> <KeepAlive>
<Settings v-if="page === DialogType.Settings" /> <Settings v-if="page === DialogType.Settings" :page="data.page" :params="data.params" />
<Textbox v-else-if="page === DialogType.Textbox" v-bind="data" @confirm="confirm" @cancel="close" /> <Textbox v-else-if="page === DialogType.Textbox" v-bind="data" @confirm="confirm" @cancel="close" />
</KeepAlive> </KeepAlive>
app/components/ModelSelector.vue
+111 -75
View File
@@ -5,25 +5,51 @@ import type schema from '#triplit/schema';
import type { ModelWithProvider, ProviderWithModels } from '~/composables/useModels'; import type { ModelWithProvider, ProviderWithModels } from '~/composables/useModels';
import { sortByReleaseDate } from '~/utils/sort'; import { sortByReleaseDate } from '~/utils/sort';
const { setPage } = useSettings(); const { openDialog } = useDialog();
const { allModels } = await useModels(); const { allModels } = await useModels();
const props = defineProps<{ const props = defineProps<{
providers: ProviderWithModels[]; providers: ProviderWithModels[];
}>(); }>();
const isOpen = ref(false); const modelSelectorState = reactive({
open: false,
direction: 'up',
x: 0,
y: 0,
});
const selectedModel = defineModel<ModelWithProvider | null>(); const selectedModel = defineModel<ModelWithProvider | null>();
const dropdownRef = ref<HTMLDivElement | null>(null); const dropdownContentRef = ref<HTMLDivElement | null>(null);
const dropdownButton = ref<HTMLButtonElement | null>(null); const dropdownButton = ref<HTMLButtonElement | null>(null);
const searchInputRef = ref<HTMLInputElement | null>(null); const searchInputRef = ref<HTMLInputElement | null>(null);
const dropdownDirection = ref<'up' | 'down'>('up');
const dropdownMaxHeight = ref<number | undefined>(undefined); const dropdownMaxHeight = ref<number | undefined>(undefined);
const navigatingWithKeyboard = ref(false); const navigatingWithKeyboard = ref(false);
const focusedOptionId = ref<string | null>(null); const focusedOptionId = ref<string | null>(null);
const toggleDropdown = () => {
if (modelSelectorState.open) {
closeDropdown();
return;
}
const buttonRect = dropdownButton.value?.getBoundingClientRect();
if (!buttonRect) return;
modelSelectorState.x = buttonRect.left;
if (modelSelectorState.direction === 'up') {
const pageHeight = document.body.scrollHeight;
modelSelectorState.y = (pageHeight - buttonRect.top) + 6;
} else {
modelSelectorState.y = buttonRect.bottom - 6;
}
modelSelectorState.open = true;
setTimeout(() => {
document.body.addEventListener('click', closeDropdown);
});
}
const findContainer = (startingElement: HTMLElement): HTMLElement | null => { const findContainer = (startingElement: HTMLElement): HTMLElement | null => {
let container: HTMLElement | null = startingElement; let container: HTMLElement | null = startingElement;
while (container) { while (container) {
@@ -48,10 +74,10 @@ const calculateDropdownPosition = () => {
const spaceBelow = containerRect.bottom - buttonRect.bottom; const spaceBelow = containerRect.bottom - buttonRect.bottom;
if (spaceAbove > spaceBelow) { if (spaceAbove > spaceBelow) {
dropdownDirection.value = 'up'; modelSelectorState.direction = 'up';
dropdownMaxHeight.value = Math.min(spaceAbove - 20, 460); dropdownMaxHeight.value = Math.min(spaceAbove - 20, 460);
} else { } else {
dropdownDirection.value = 'down'; modelSelectorState.direction = 'down';
dropdownMaxHeight.value = Math.min(spaceBelow - 20, 460); dropdownMaxHeight.value = Math.min(spaceBelow - 20, 460);
} }
}; };
@@ -119,7 +145,7 @@ watch(() => props.providers, () => {
} }
}) })
watch(isOpen, (open) => { watch(() => modelSelectorState.open, (open) => {
if (open) { if (open) {
calculateDropdownPosition(); calculateDropdownPosition();
nextTick(() => { nextTick(() => {
@@ -132,7 +158,9 @@ watch(isOpen, (open) => {
}); });
const closeDropdown = () => { const closeDropdown = () => {
isOpen.value = false; document.body.removeEventListener('click', closeDropdown);
modelSelectorState.open = false;
navigatingWithKeyboard.value = false; navigatingWithKeyboard.value = false;
}; };
@@ -186,88 +214,96 @@ const handleSearchKeyDown = (event: KeyboardEvent) => {
break; break;
} }
}; };
useClickOutside(dropdownRef, closeDropdown);
</script> </script>
<template> <template>
<div ref="dropdownRef" class="relative"> <div role="button" @click="toggleDropdown()" ref="dropdownButton"
<div role="button" @click="isOpen = !isOpen" ref="dropdownButton" class="cursor-pointer flex items-center w-fit select-none gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors duration-200"
class="cursor-pointer flex items-center w-fit select-none gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors duration-200" :class="[
:class="[ modelSelectorState.open
isOpen ? 'bg-[var(--color-hover)] text-[var(--text-primary)]'
? 'bg-[var(--color-hover)] text-[var(--text-primary)]' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--color-hover)]',
: 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--color-hover)]', ]">
]"> <ModelIcon v-if="selectedModel" class="text-white" :avatar="true" variant="color"
<ModelIcon v-if="selectedModel" class="text-white" :avatar="true" variant="color" :model-id="selectedModel.externalId" size="22" />
:model-id="selectedModel.externalId" size="22" /> <span class="max-w-fulltruncate">
<span class="max-w-[150px] truncate"> {{ selectedModel ? selectedModel.name : 'Select a model' }}
{{ selectedModel ? selectedModel.name : 'Select a model' }} </span>
</span> <Icon name="mynaui:chevron-down" class="text-3.5 transition-transform duration-200"
<Icon name="mynaui:chevron-down" class="text-3.5 transition-transform duration-200" :class="{ 'rotate-180': modelSelectorState.open }" />
:class="{ 'rotate-180': isOpen }" /> </div>
</div>
<Teleport to="body">
<Transition enter-active-class="transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]" <Transition enter-active-class="transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
enter-from-class="opacity-0 scale-95 translate-y-1" enter-to-class="opacity-100 scale-100 translate-y-0" enter-from-class="opacity-0 scale-95 translate-y-1" enter-to-class="opacity-100 scale-100 translate-y-0"
leave-active-class="transition-all duration-100 ease-[cubic-bezier(0.5,_1,_0.89,_1)]" leave-active-class="transition-all duration-100 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
leave-from-class="opacity-100 scale-100 translate-y-0" leave-to-class="opacity-0 scale-95 translate-y-1"> leave-from-class="opacity-100 scale-100 translate-y-0" leave-to-class="opacity-0 scale-95 translate-y-1">
<div v-if="isOpen" ref="dropdownContentRef" role="listbox" aria-label="Select model" <KeepAlive>
:aria-activedescendant="focusedOptionId ? `model-option-${focusedOptionId}` : undefined" :class="[ <div v-if="modelSelectorState.open" ref="dropdownContentRef" role="listbox" aria-label="Select model"
dropdownDirection === 'up' ? 'bottom-full mb-2 origin-bottom' : 'top-full mt-2 origin-top', :aria-activedescendant="focusedOptionId ? `model-option-${focusedOptionId}` : undefined" :style="{
]" :style="{ maxHeight: dropdownMaxHeight ? `${dropdownMaxHeight}px` : '460px', height: 'auto' }" position: 'absolute',
class="absolute left-0 max-w-[420px] w-full flex flex-col rounded-xl border border-[var(--color-border)] bg-[var(--bg-surface)] shadow-lg overflow-hidden z-50"> top: modelSelectorState.direction === 'down' ? `${modelSelectorState.y}px` : '',
<div> bottom: modelSelectorState.direction === 'up' ? `${modelSelectorState.y}px` : '',
<div class="relative"> left: `${modelSelectorState.x}px`,
<Icon name="mynaui:search" maxHeight: dropdownMaxHeight ? `${dropdownMaxHeight}px` : '460px',
class="absolute left-3 top-1/2 -translate-y-1/2 text-4 text-[var(--text-secondary)]" /> height: 'auto'
<input ref="searchInputRef" v-model="searchQuery" autocomplete="off" name="search" }"
@keydown="handleSearchKeyDown" type="text" placeholder="Search models..." class="absolute left-0 max-w-[420px] w-full flex flex-col rounded-xl border border-[var(--color-border)] bg-[var(--bg-surface)] shadow-lg overflow-hidden z-50"
class="placeholder:text-[var(--text-tertiary)] w-full pl-9 pr-3 py-2 text-sm text-[var(--text-primary)] bg-transparent placeholder-[var(--text-secondary)] outline-none" /> :class="modelSelectorState.direction === 'up' ? 'transform-origin-bottom-center' : 'transform-origin-top-center'">
</div> <div>
</div> <div class="relative">
<Icon name="mynaui:search"
<div class="flex-1 overflow-y-auto [scrollbar-width:thin] py-2 select-none max-w-full overflow-hidden"> class="absolute left-3 top-1/2 -translate-y-1/2 text-4 text-[var(--text-secondary)]" />
<div v-if="filteredProviders.length === 0" <input ref="searchInputRef" v-model="searchQuery" autocomplete="off" name="search"
class="px-4 py-8 text-center text-sm text-[var(--text-secondary)]"> @keydown="handleSearchKeyDown" type="text" placeholder="Search models..."
No models found class="placeholder:text-[var(--text-tertiary)] w-full pl-9 pr-3 py-2 text-sm text-[var(--text-primary)] bg-transparent placeholder-[var(--text-secondary)] outline-none" />
</div>
</div> </div>
<div v-for="provider in filteredProviders" :key="provider.id" class="mb-2"> <div
<div v-if="provider.models.filter(m => m.enabled).length > 0" class="flex-1 overflow-y-auto [scrollbar-width:thin] py-2 select-none max-w-full overflow-hidden">
class="px-4 py-1.5 text-[13px] font-medium text-[var(--text-secondary)] capitalize tracking-wider flex justify-between"> <div v-if="filteredProviders.length === 0"
{{ provider.name }} class="px-4 py-8 text-center text-sm text-[var(--text-secondary)]">
<button @click="isOpen = true; setPage('providers', provider.id)" No models found
class="flex h-5 w-5 items-center justify-center hover:bg-[var(--color-hover)] rounded transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<Icon name="mynaui:cog-four" class="text-4" />
</button>
</div> </div>
<button v-for="model in provider.models.filter(m => m.enabled).sort(sortByReleaseDate)" <div v-for="provider in filteredProviders" :key="provider.id" class="mb-2">
:key="model.id" :id="`model-option-${model.id}`" role="option" <div v-if="provider.models.filter(m => m.enabled).length > 0"
:aria-selected="focusedOptionId === model.id" class="px-4 py-1.5 text-[13px] font-medium text-[var(--text-secondary)] capitalize tracking-wider flex justify-between">
@click="selectModel(model, provider); isOpen = false" {{ provider.name }}
class="text-white w-full min-h-9 px-4 py-2 flex items-center justify-between hover:bg-[var(--color-hover)] transition-colors duration-150" <button
:class="{ @click="modelSelectorState.open = true; openDialog(DialogType.Settings, undefined, { page: 'providers', params: provider.id })"
'bg-[var(--color-hover)]': selectedModel?.id === model.id, class="flex h-5 w-5 items-center justify-center hover:bg-[var(--color-hover)] rounded transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
'ring-2 ring-inset ring-[var(--color-accent)]': focusedOptionId === model.id && navigatingWithKeyboard <Icon name="mynaui:cog-four" class="text-4" />
}"> </button>
<ModelInfo :model="model" size="medium" /> </div>
<button v-for="model in provider.models.filter(m => m.enabled).sort(sortByReleaseDate)"
:key="model.id" :id="`model-option-${model.id}`" role="option"
:aria-selected="focusedOptionId === model.id"
@click="selectModel(model, provider); modelSelectorState.open = false"
class="text-white w-full min-h-9 px-4 py-2 flex items-center justify-between hover:bg-[var(--color-hover)] transition-colors duration-150"
:class="{
'bg-[var(--color-hover)]': selectedModel?.id === model.id,
'ring-2 ring-inset ring-[var(--color-accent)]': focusedOptionId === model.id && navigatingWithKeyboard
}">
<ModelInfo :model="model" size="medium" />
</button>
</div>
</div>
<div class="p-1 border-t border-[var(--color-border)]">
<button
class="flex w-full items-center gap-2 px-3 py-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150"
@click="modelSelectorState.open = false; openDialog(DialogType.Settings, undefined, { page: 'providers' });">
<Icon name="mynaui:cog-four" class="text-4.5" />
<span>Manage Providers</span>
<Icon name="mynaui:arrow-right" class="text-4 ml-auto" />
</button> </button>
</div> </div>
</div> </div>
</KeepAlive>
<div class="p-1 border-t border-[var(--color-border)]">
<button
class="flex w-full items-center gap-2 px-3 py-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150"
@click="isOpen = false; setPage('providers');">
<Icon name="mynaui:cog-four" class="text-4.5" />
<span>Manage Providers</span>
<Icon name="mynaui:arrow-right" class="text-4 ml-auto" />
</button>
</div>
</div>
</Transition> </Transition>
</div> </Teleport>
</template> </template>
app/components/Settings/AIServiceProvider.vue
+8 -5
View File
@@ -7,14 +7,17 @@ import ModelItem from './ModelItem.vue';
import RowVirtualizerDynamic from '../RowVirtualizerDynamic.vue'; import RowVirtualizerDynamic from '../RowVirtualizerDynamic.vue';
const triplit = useTriplitClient(); const triplit = useTriplitClient();
const { pageParams } = useSettings(); const props = defineProps<{
params?: string;
}>();
const { providers } = useModels(); const { providers } = useModels();
const scrollContainerRef = ref<HTMLDivElement | null>(null); const scrollContainerRef = ref<HTMLDivElement | null>(null);
const provider = computed(() => { const provider = computed(() => {
if (pageParams.value.length === 0) return null; if (props.params === undefined) return null;
return providers.value!.find(p => p.id === pageParams.value[0]); return providers.value!.find(p => p.id === props.params);
}); });
watch(provider, async () => { watch(provider, async () => {
@@ -28,8 +31,8 @@ const apiKey = ref('');
const apiProxyUrl = ref(provider.value?.config.apiProxyUrl ?? ''); const apiProxyUrl = ref(provider.value?.config.apiProxyUrl ?? '');
const modelSearch = ref(''); const modelSearch = ref('');
watch(pageParams, () => { watch(() => props.params, () => {
if (pageParams.value.length === 0) return; if (props.params === undefined) return;
console.log(scrollContainerRef.value); console.log(scrollContainerRef.value);
apiKey.value = provider.value?.config.apiKey ?? ''; apiKey.value = provider.value?.config.apiKey ?? '';
apiProxyUrl.value = provider.value?.config.apiProxyUrl ?? ''; apiProxyUrl.value = provider.value?.config.apiProxyUrl ?? '';
app/components/Settings/ProviderSidebar.vue
+6 -4
View File
@@ -1,8 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { providerIcons } from '~/utils/model-mapping'; import { providerIcons } from '~/utils/model-mapping';
const { pageParams } = useSettings(); defineProps<{
const { providers } = await useModels(); params?: string;
}>();
const { providers } = useModels();
defineEmits(['navigate']); defineEmits(['navigate']);
</script> </script>
@@ -22,7 +24,7 @@ defineEmits(['navigate']);
<div class="px-2 py-4 font-bold text-xs uppercase opacity-50">Enabled Providers</div> <div class="px-2 py-4 font-bold text-xs uppercase opacity-50">Enabled Providers</div>
<button v-for="p in providers?.filter(p => p.enabled)" :key="p.id" @click="$emit('navigate', 'providers', p.id)" <button v-for="p in providers?.filter(p => p.enabled)" :key="p.id" @click="$emit('navigate', 'providers', p.id)"
:class="['capitalize flex items-center justify-between p-2 hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg', p.id === pageParams[0] ? 'bg-[var(--color-hover)]' : '']"> :class="['capitalize flex items-center justify-between p-2 hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg', p.id === params ? 'bg-[var(--color-hover)]' : '']">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]" <component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]"
class="w-4 h-4 text-[var(--text-primary)]" /> class="w-4 h-4 text-[var(--text-primary)]" />
@@ -34,7 +36,7 @@ defineEmits(['navigate']);
<button v-for="p in providers?.filter(p => !p.enabled)" :key="p.id" <button v-for="p in providers?.filter(p => !p.enabled)" :key="p.id"
@click="$emit('navigate', 'providers', p.id)" @click="$emit('navigate', 'providers', p.id)"
:class="['capitalize flex items-center justify-between p-2 hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg', p.id === pageParams[0] ? 'bg-[var(--color-hover)]' : '']"> :class="['capitalize flex items-center justify-between p-2 hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg', p.id === params ? 'bg-[var(--color-hover)]' : '']">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]" <component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]"
class="w-4 h-4 text-[var(--text-primary)]" /> class="w-4 h-4 text-[var(--text-primary)]" />
app/composables/useDialog.ts
+5
View File
@@ -26,6 +26,10 @@ export const useDialog = () => {
actionCallback = cb; actionCallback = cb;
}; };
const setOptions = (options: DialogOptions) => {
data.value = options;
};
const confirm = (result: any) => { const confirm = (result: any) => {
open.value = false; open.value = false;
if (actionCallback === undefined) return; if (actionCallback === undefined) return;
@@ -47,6 +51,7 @@ export const useDialog = () => {
page: readonly(page), page: readonly(page),
data: readonly(data), data: readonly(data),
openDialog, openDialog,
setOptions,
confirm, confirm,
close, close,
}; };
nuxt.config.ts
+8 -8
View File
@@ -70,14 +70,14 @@ export default defineNuxtConfig({
tagPosition: 'bodyOpen', tagPosition: 'bodyOpen',
type: 'text/javascript', type: 'text/javascript',
}, },
// { {
// src: 'https://cdn.jsdelivr.net/npm/eruda', src: 'https://cdn.jsdelivr.net/npm/eruda',
// }, },
// { {
// innerHTML: ` innerHTML: `
// eruda.init(); eruda.init();
// `, `,
// } }
] ]
}, },
}, },