mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-01-02 22:50:02 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update dropdown menus

Browse Source
This commit is contained in:
mdatelle
2025-07-31 16:01:24 -04:00
committed by Eli Bosley
parent 4f8fd18a39
commit 59b257a50f
2 changed files with 54 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
web/components/Docker/HeaderContent.vue
View File

@@ -2,17 +2,32 @@
interface Props {
autostartValue?: boolean;
showAutostart?: boolean;
manageActions?: Array<{ label: string; icon: string; onClick?: () => void }>;
manageActions?: Array<Array<{ label: string; icon: string; onClick?: () => void }>>;
}
const _props = withDefaults(defineProps<Props>(), {
autostartValue: true,
showAutostart: true,
manageActions: () => [
{ label: 'Edit', icon: 'i-lucide-edit' },
{ label: 'Remove', icon: 'i-lucide-trash-2' },
{ label: 'Restart', icon: 'i-lucide-refresh-cw' },
{ label: 'Force Update', icon: 'i-lucide-download' },
[
{ label: 'Start', icon: 'i-lucide-play' },
{ label: 'Stop', icon: 'i-lucide-square' },
{ label: 'Pause', icon: 'i-lucide-pause' },
{ label: 'Restart', icon: 'i-lucide-refresh-cw' },
],
[
{ label: 'Update', icon: 'i-lucide-download' },
{ label: 'Force Update', icon: 'i-lucide-download-cloud' },
{ label: 'Remove', icon: 'i-lucide-trash-2' },
],
[
{ label: 'Docker Allocations', icon: 'i-lucide-hard-drive' },
],
[
{ label: 'Project Page', icon: 'i-lucide-external-link' },
{ label: 'Support', icon: 'i-lucide-help-circle' },
{ label: 'More Info', icon: 'i-lucide-info' },
],
],
});
@@ -33,7 +48,13 @@ const handleManageAction = (action: { label: string; icon: string }) => {
<USwitch :model-value="autostartValue" @update:model-value="$emit('update:autostart', $event)" />
</div>
<UDropdownMenu :items="[manageActions]" @click="handleManageAction">
<UDropdownMenu
:items="manageActions.map(group => group.map(action => ({
...action,
onSelect: () => handleManageAction(action)
})))"
size="md"
>
<UButton variant="subtle" color="primary" size="sm" trailing-icon="i-lucide-chevron-down">
Manage
</UButton>

39
web/components/LayoutViews/Detail/DetailLeftNavigation.vue
View File

@@ -10,7 +10,7 @@ interface Props {
selectedItems: string[];
expandedGroups: Record<string, boolean>;
showHeader?: boolean;
manageActions?: Array<{ label: string; icon: string; onClick?: () => void }>;
manageActions?: Array<Array<{ label: string; icon: string; onClick?: () => void }>>;
navigationLabel?: string;
}
@@ -18,10 +18,23 @@ const props = withDefaults(defineProps<Props>(), {
title: 'Service Name',
showHeader: true,
manageActions: () => [
{ label: 'Start', icon: 'i-lucide-play' },
{ label: 'Stop', icon: 'i-lucide-square' },
{ label: 'Restart', icon: 'i-lucide-refresh-cw' },
{ label: 'Remove', icon: 'i-lucide-trash-2' },
[
{ label: 'Sort Alpha Asc', icon: 'i-lucide-arrow-up-a-z' },
{ label: 'Sort Alpha Dec', icon: 'i-lucide-arrow-down-z-a' },
],
[
{ label: 'Start Selected', icon: 'i-lucide-play' },
{ label: 'Stop Selected', icon: 'i-lucide-square' },
{ label: 'Pause Selected', icon: 'i-lucide-pause' },
{ label: 'Restart Selected', icon: 'i-lucide-refresh-cw' },
{ label: 'Autostart Selected', icon: 'i-lucide-timer' },
],
[
{ label: 'Check for Updates', icon: 'i-lucide-refresh-ccw' },
{ label: 'Update Selected', icon: 'i-lucide-download' },
{ label: 'Remove Selected', icon: 'i-lucide-trash-2' },
],
[{ label: 'Add Container', icon: 'i-lucide-plus' }],
],
navigationLabel: 'Select Item',
});
@@ -164,11 +177,13 @@ const handleManageAction = (action: { label: string; icon: string }) => {
};
const dropdownItems = computed(() =>
props.manageActions.map((action) => ({
label: action.label,
icon: action.icon,
onSelect: () => handleManageAction(action),
}))
props.manageActions.map((group) =>
group.map((action) => ({
label: action.label,
icon: action.icon,
onSelect: () => handleManageAction(action),
}))
)
);
</script>
@@ -200,7 +215,7 @@ const dropdownItems = computed(() =>
@click="allItemsSelected ? $emit('clearAll') : $emit('selectAll')"
/>
<UDropdownMenu :items="dropdownItems">
<UDropdownMenu :items="dropdownItems" size="md">
<UButton
variant="subtle"
color="primary"
@@ -283,7 +298,7 @@ const dropdownItems = computed(() =>
@click="allItemsSelected ? $emit('clearAll') : $emit('selectAll')"
/>
<UDropdownMenu :items="dropdownItems">
<UDropdownMenu :items="dropdownItems" size="md">
<UButton
variant="subtle"
color="primary"