mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-01-05 16:09:49 -06:00
Code Issues Packages Projects Releases Wiki Activity

chore: lint unraid ui (#1638)

Browse Source 
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- New Features
- Fullscreen dialogs now use dedicated open/close animations for
smoother transitions.

- UX
- Added a “Loading Notifications...” message while notifications are
being fetched.

- Style
- Standardized Tailwind utility class ordering across numerous
components for consistent styling; no functional or visual changes
expected.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Eli Bosley
2025-08-29 14:48:14 -04:00
committed by GitHub
parent a1ee915ca5
commit 6356f9c41d
64 changed files with 105 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
unraid-ui/src/components/brand/BrandButton.vue
View File

@@ -70,14 +70,14 @@ const needsBrandGradientBackground = computed(() => {
>
<div
v-if="variant === 'fill'"
class="absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-linear-to-r from-unraid-red to-orange opacity-100 transition-all rounded-md group-hover:!opacity-60 group-focus:!opacity-60"
class="from-unraid-red to-orange absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 rounded-md bg-linear-to-r opacity-100 transition-all group-hover:!opacity-60 group-focus:!opacity-60"
/>
<!-- gives outline buttons the brand gradient background -->
<div
v-if="needsBrandGradientBackground"
:class="[
'absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-linear-to-r from-unraid-red to-orange transition-all pointer-events-none',
'from-unraid-red to-orange pointer-events-none absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-linear-to-r transition-all',
variant === 'outline-primary' ? 'rounded-sm' : 'rounded-md',
'opacity-0 group-hover:!opacity-100 group-focus:!opacity-100',
]"
@@ -99,7 +99,7 @@ const needsBrandGradientBackground = computed(() => {
:class="[
classes.icon,
iconRightHoverDisplay &&
'opacity-0 group-hover:!opacity-100 group-focus:!opacity-100 transition-all',
'opacity-0 transition-all group-hover:!opacity-100 group-focus:!opacity-100',
]"
:style="{ '--icon-size': classes.iconSize }"
/>

2
unraid-ui/src/components/common/dialog/Dialog.vue
View File

@@ -83,7 +83,7 @@ const sizeClasses = {
cn(
sizeClasses[size],
size === 'full'
? 'fixed inset-0 translate-x-0 translate-y-0 max-w-none rounded-none border-0'
? 'fixed inset-0 max-w-none translate-x-0 translate-y-0 rounded-none border-0'
: ''
)
"

2
unraid-ui/src/components/common/loading/Bar.vue
View File

@@ -5,7 +5,7 @@ const props = withDefaults(defineProps<{ class?: string }>(), { class: '' });
</script>
<template>
<div
:class="cn('h-5 animate-pulse bg-gray-300 w-full', props.class)"
:class="cn('h-5 w-full animate-pulse bg-gray-300', props.class)"
role="progressbar"
aria-label="Loading"
/>

4
unraid-ui/src/components/common/loading/Error.vue
View File

@@ -34,7 +34,7 @@ const props = withDefaults(
defineEmits(['retry']);
</script>
<template>
<div :class="cn('h-full flex flex-col items-center justify-center gap-3', props.class)">
<div :class="cn('flex h-full flex-col items-center justify-center gap-3', props.class)">
<!-- Loading State -->
<div v-if="loading" class="contents">
<LoadingSpinner />
@@ -43,7 +43,7 @@ defineEmits(['retry']);
<!-- Error State -->
<div v-else-if="error" class="space-y-3">
<div class="flex justify-center">
<ShieldExclamationIcon class="h-10 text-unraid-red" />
<ShieldExclamationIcon class="text-unraid-red h-10" />
</div>
<div>
<h3 class="font-bold">{{ `Error` }}</h3>

2
unraid-ui/src/components/common/loading/Spinner.vue
View File

@@ -8,7 +8,7 @@ const props = withDefaults(defineProps<{ class?: string }>(), { class: '' });
<div
:class="
cn(
'inline-block h-8 w-8 animate-spin rounded-full border-2 border-solid border-current border-e-transparent align-[-0.125em] text-primary motion-reduce:animate-[spin_1.5s_linear_infinite]',
'text-primary inline-block h-8 w-8 animate-spin rounded-full border-2 border-solid border-current border-e-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]',
props.class
)
"

2
unraid-ui/src/components/common/popover/PopoverContent.vue
View File

@@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="{ ...forwarded, ...$attrs }"
:class="
cn(
'z-50 w-72 rounded-md bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md p-4 shadow-md outline-hidden',
props.class
)
"

4
unraid-ui/src/components/common/scroll-area/ScrollBar.vue
View File

@@ -23,13 +23,13 @@ const delegatedProps = computed(() => {
v-bind="delegatedProps"
:class="
cn(
'flex touch-none select-none transition-colors',
'flex touch-none transition-colors select-none',
orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',
orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-px',
props.class
)
"
>
<ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
<ScrollAreaThumb class="bg-border relative flex-1 rounded-full" />
</ScrollAreaScrollbar>
</template>

6
unraid-ui/src/components/common/sheet/SheetContent.vue
View File

@@ -46,14 +46,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
<template>
<DialogPortal :disabled="disabled" :force-mount="forceMount" :to="teleportTarget">
<DialogOverlay
class="fixed inset-0 z-50 bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/60"
/>
<DialogContent :class="sheetClass" v-bind="forwarded">
<slot />
<DialogClose
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
>
<X class="w-4 h-4 text-muted-foreground" />
<X class="text-muted-foreground h-4 w-4" />
</DialogClose>
</DialogContent>
</DialogPortal>

2
unraid-ui/src/components/common/sheet/SheetDescription.vue
View File

@@ -13,7 +13,7 @@ const delegatedProps = computed(() => {
</script>
<template>
<DialogDescription :class="cn('text-sm text-muted-foreground', props.class)" v-bind="delegatedProps">
<DialogDescription :class="cn('text-muted-foreground text-sm', props.class)" v-bind="delegatedProps">
<slot />
</DialogDescription>
</template>

2
unraid-ui/src/components/common/sheet/SheetTitle.vue
View File

@@ -13,7 +13,7 @@ const delegatedProps = computed(() => {
</script>
<template>
<DialogTitle :class="cn('text-lg font-medium text-foreground', props.class)" v-bind="delegatedProps">
<DialogTitle :class="cn('text-foreground text-lg font-medium', props.class)" v-bind="delegatedProps">
<slot />
</DialogTitle>
</template>

2
unraid-ui/src/components/common/stepper/StepperDescription.vue
View File

@@ -19,7 +19,7 @@ const forwarded = useForwardProps(delegatedProps);
<StepperDescription
v-slot="slotProps"
v-bind="forwarded"
:class="cn('text-xs text-muted-foreground', props.class)"
:class="cn('text-muted-foreground text-xs', props.class)"
>
<slot v-bind="slotProps" />
</StepperDescription>

2
unraid-ui/src/components/common/stepper/StepperIndicator.vue
View File

@@ -20,7 +20,7 @@ const forwarded = useForwardProps(delegatedProps);
v-bind="forwarded"
:class="
cn(
'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-10 h-10',
'text-muted-foreground/50 inline-flex h-10 w-10 items-center justify-center rounded-full',
// Disabled
'group-data-disabled:text-muted-foreground group-data-disabled:opacity-50',
// Active

2
unraid-ui/src/components/common/stepper/StepperSeparator.vue
View File

@@ -20,7 +20,7 @@ const forwarded = useForwardProps(delegatedProps);
v-bind="forwarded"
:class="
cn(
'hidden md:block bg-muted md:w-24 md:h-px md:my-0',
'bg-muted hidden md:my-0 md:block md:h-px md:w-24',
// Disabled
'group-data-disabled:bg-muted group-data-disabled:opacity-75',
// Completed

2
unraid-ui/src/components/common/stepper/StepperTrigger.vue
View File

@@ -20,7 +20,7 @@ const forwarded = useForwardProps(delegatedProps);
v-bind="forwarded"
:class="
cn(
'flex flex-col items-center justify-center text-center gap-2 rounded-md w-full md:w-auto',
'flex w-full flex-col items-center justify-center gap-2 rounded-md text-center md:w-auto',
props.class
)
"

2
unraid-ui/src/components/common/tabs/TabsContent.vue
View File

@@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
v-bind="delegatedProps"
:class="
cn(
'flex mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
'ring-offset-background focus-visible:ring-ring mt-2 flex focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',
props.class
)
"

2
unraid-ui/src/components/common/tabs/TabsList.vue
View File

@@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
v-bind="delegatedProps"
:class="
cn(
'inline-flex items-center justify-center rounded-md bg-input p-1.5 text-foreground',
'bg-input text-foreground inline-flex items-center justify-center rounded-md p-1.5',
props.class
)
"

2
unraid-ui/src/components/common/tabs/TabsTrigger.vue
View File

@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps);
v-bind="forwardedProps"
:class="
cn(
'inline-flex items-center justify-center whitespace-nowrap rounded px-4.5 py-2.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs',
'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center rounded px-4.5 py-2.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-xs',
props.class
)
"

2
unraid-ui/src/components/common/tooltip/TooltipContent.vue
View File

@@ -38,7 +38,7 @@ const { teleportTarget } = useTeleport();
v-bind="{ ...forwarded, ...$attrs }"
:class="
cn(
'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
'bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md',
props.class
)
"

4
unraid-ui/src/components/form/combobox/ComboboxGroup.vue
View File

@@ -23,12 +23,12 @@ const delegatedProps = computed(() => {
v-bind="delegatedProps"
:class="
cn(
'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
props.class
)
"
>
<ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
<ComboboxLabel v-if="heading" class="text-muted-foreground px-2 py-1.5 text-xs font-medium">
{{ heading }}
</ComboboxLabel>
<slot />

2
unraid-ui/src/components/form/combobox/ComboboxInput.vue
View File

@@ -30,7 +30,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="forwarded"
:class="
cn(
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
props.class
)
"

2
unraid-ui/src/components/form/combobox/ComboboxItem.vue
View File

@@ -21,7 +21,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="forwarded"
:class="
cn(
'relative flex cursor-default gap-2 select-none justify-between items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0',
'data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0',
props.class
)
"

2
unraid-ui/src/components/form/combobox/ComboboxList.vue
View File

@@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="{ ...forwarded, ...$attrs }"
:class="
cn(
'z-50 w-[200px] rounded-md border bg-popover text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-[200px] rounded-md border shadow-md outline-hidden',
position === 'popper' &&
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
props.class

2
unraid-ui/src/components/form/combobox/ComboboxSeparator.vue
View File

@@ -14,7 +14,7 @@ const delegatedProps = computed(() => {
</script>
<template>
<ComboboxSeparator v-bind="delegatedProps" :class="cn('-mx-1 h-px bg-border', props.class)">
<ComboboxSeparator v-bind="delegatedProps" :class="cn('bg-border -mx-1 h-px', props.class)">
<slot />
</ComboboxSeparator>
</template>

2
unraid-ui/src/components/form/input/Input.vue
View File

@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
v-model="modelValue"
:class="
cn(
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
props.class
)
"

2
unraid-ui/src/components/form/label/Label.vue
View File

@@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
v-bind="delegatedProps"
:class="
cn(
'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
'text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
props.class
)
"

2
unraid-ui/src/components/form/lightswitch/Lightswitch.vue
View File

@@ -18,7 +18,7 @@ const checked = ref(false);
v-model="checked"
:class="[
checked ? 'bg-green-500' : 'bg-gray-200',
'relative inline-flex h-6 w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-hidden focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2',
'relative inline-flex h-6 w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:outline-hidden',
]"
>
<span

2
unraid-ui/src/components/form/number/NumberField.vue
View File

@@ -20,7 +20,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<NumberFieldRoot v-bind="forwarded" :class="cn('grid gap-1.5 relative', props.class)">
<NumberFieldRoot v-bind="forwarded" :class="cn('relative grid gap-1.5', props.class)">
<slot />
</NumberFieldRoot>
</template>

2
unraid-ui/src/components/form/number/NumberFieldContent.vue
View File

@@ -12,7 +12,7 @@ const props = defineProps<{
<div
:class="
cn(
'relative has-data-[slot=increment]:*:data-[slot=input]:pr-5 has-data-[slot=decrement]:*:data-[slot=input]:pl-5',
'relative has-data-[slot=decrement]:*:data-[slot=input]:pl-5 has-data-[slot=increment]:*:data-[slot=input]:pr-5',
props.class
)
"

2
unraid-ui/src/components/form/number/NumberFieldDecrement.vue
View File

@@ -22,7 +22,7 @@ const forwarded = useForwardProps(delegatedProps);
v-bind="forwarded"
:class="
cn(
'absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20',
'absolute top-1/2 left-0 -translate-y-1/2 p-3 disabled:cursor-not-allowed disabled:opacity-20',
props.class
)
"

2
unraid-ui/src/components/form/number/NumberFieldIncrement.vue
View File

@@ -22,7 +22,7 @@ const forwarded = useForwardProps(delegatedProps);
v-bind="forwarded"
:class="
cn(
'absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3',
'absolute top-1/2 right-0 -translate-y-1/2 p-3 disabled:cursor-not-allowed disabled:opacity-20',
props.class
)
"

2
unraid-ui/src/components/form/number/NumberFieldInput.vue
View File

@@ -13,7 +13,7 @@ const props = defineProps<{
data-slot="input"
:class="
cn(
'flex h-10 w-full rounded-md border border-input bg-background py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border py-2 text-center text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
props.class
)
"

4
unraid-ui/src/components/form/switch/Switch.vue
View File

@@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="forwarded"
:class="
cn(
'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
'peer focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
props.class
)
"
@@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
<SwitchThumb
:class="
cn(
'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
'bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
)
"
/>

6
unraid-ui/src/components/layout/CardWrapper.vue
View File

@@ -19,13 +19,13 @@ withDefaults(
<template>
<div
class="group/card text-left relative flex flex-col flex-1 border-2 border-solid rounded-md shadow-md"
class="group/card relative flex flex-1 flex-col rounded-md border-2 border-solid text-left shadow-md"
:class="[
padding && 'p-4',
increasedPadding && 'md:p-6',
hover && 'hover:shadow-orange/50 transition-all',
error && 'text-white bg-unraid-red border-unraid-red',
warning && 'text-black bg-yellow-100 border-yellow-100',
error && 'bg-unraid-red border-unraid-red text-white',
warning && 'border-yellow-100 bg-yellow-100 text-black',
!error && !warning && 'text-foreground bg-background border-muted',
]"
>

2
unraid-ui/src/components/layout/PageContainer.vue
View File

@@ -10,7 +10,7 @@ withDefaults(
</script>
<template>
<div class="grid gap-y-6 w-full mx-auto px-4" :class="maxWidth">
<div class="mx-auto grid w-full gap-y-6 px-4" :class="maxWidth">
<slot />
</div>
</template>

2
unraid-ui/src/components/layout/SettingsGrid.vue
View File

@@ -10,7 +10,7 @@ const props = defineProps<{
<div
:class="
cn(
'grid grid-cols-1 md:grid-cols-[35%_1fr] [&>*:nth-child(odd)]:text-end gap-2 items-baseline md:gap-x-3 md:gap-y-6',
'grid grid-cols-1 items-baseline gap-2 md:grid-cols-[35%_1fr] md:gap-x-3 md:gap-y-6 [&>*:nth-child(odd)]:text-end',
props.class
)
"

4
unraid-ui/src/components/ui/accordion/AccordionContent.vue
View File

@@ -12,9 +12,9 @@ const delegatedProps = reactiveOmit(props, 'class');
<template>
<AccordionContent
v-bind="delegatedProps"
class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all"
>
<div :class="cn('pb-4 pt-0', props.class)">
<div :class="cn('pt-0 pb-4', props.class)">
<slot />
</div>
</AccordionContent>

8
unraid-ui/src/components/ui/dialog/DialogContent.vue
View File

@@ -33,13 +33,13 @@ const { teleportTarget } = useTeleport();
<template>
<DialogPortal :to="props.to || teleportTarget || 'body'">
<DialogOverlay
class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
/>
<DialogContent
v-bind="forwarded"
:class="
cn(
'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg rounded-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed top-1/2 left-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg duration-200',
// Only apply zoom and slide animations if not fullscreen
!props.class?.includes('min-h-screen') &&
'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
@@ -54,9 +54,9 @@ const { teleportTarget } = useTeleport();
<DialogClose
v-if="showCloseButton !== false"
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
>
<X class="w-4 h-4" />
<X class="h-4 w-4" />
<span class="sr-only">Close</span>
</DialogClose>
</DialogContent>

2
unraid-ui/src/components/ui/dialog/DialogDescription.vue
View File

@@ -12,7 +12,7 @@ const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<DialogDescription v-bind="forwardedProps" :class="cn('text-sm text-muted-foreground', props.class)">
<DialogDescription v-bind="forwardedProps" :class="cn('text-muted-foreground text-sm', props.class)">
<slot />
</DialogDescription>
</template>

8
unraid-ui/src/components/ui/dialog/DialogScrollContent.vue
View File

@@ -32,12 +32,12 @@ const { teleportTarget } = useTeleport();
<template>
<DialogPortal :to="props.to || teleportTarget">
<DialogOverlay
class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80"
>
<DialogContent
:class="
cn(
'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
'border-border bg-background relative z-50 my-8 grid w-full max-w-lg gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
props.class
)
"
@@ -59,9 +59,9 @@ const { teleportTarget } = useTeleport();
<DialogClose
v-if="showCloseButton !== false"
class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
class="hover:bg-secondary absolute top-3 right-3 rounded-md p-0.5 transition-colors"
>
<X class="w-4 h-4" />
<X class="h-4 w-4" />
<span class="sr-only">Close</span>
</DialogClose>
</DialogContent>

2
unraid-ui/src/components/ui/dialog/DialogTitle.vue
View File

@@ -14,7 +14,7 @@ const forwardedProps = useForwardProps(delegatedProps);
<template>
<DialogTitle
v-bind="forwardedProps"
:class="cn('text-lg font-semibold leading-none tracking-tight', props.class)"
:class="cn('text-lg leading-none font-semibold tracking-tight', props.class)"
>
<slot />
</DialogTitle>

4
unraid-ui/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
View File

@@ -24,14 +24,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="forwarded"
:class="
cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
props.class
)
"
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuItemIndicator>
<Check class="w-4 h-4" />
<Check class="h-4 w-4" />
</DropdownMenuItemIndicator>
</span>
<slot />

2
unraid-ui/src/components/ui/dropdown-menu/DropdownMenuContent.vue
View File

@@ -32,7 +32,7 @@ const { teleportTarget } = useTeleport();
v-bind="forwarded"
:class="
cn(
'z-50 min-w-32 overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-lg border p-1 shadow-md',
props.class
)
"

2
unraid-ui/src/components/ui/dropdown-menu/DropdownMenuItem.vue
View File

@@ -18,7 +18,7 @@ const forwardedProps = useForwardProps(delegatedProps);
v-bind="forwardedProps"
:class="
cn(
'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
inset && 'pl-8',
props.class
)

2
unraid-ui/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
View File

@@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="forwarded"
:class="
cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
props.class
)
"

2
unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
View File

@@ -14,5 +14,5 @@ const delegatedProps = reactiveOmit(props, 'class');
</script>
<template>
<DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
<DropdownMenuSeparator v-bind="delegatedProps" :class="cn('bg-muted -mx-1 my-1 h-px', props.class)" />
</template>

2
unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
View File

@@ -22,7 +22,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="forwarded"
:class="
cn(
'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',
props.class
)
"

2
unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
View File

@@ -17,7 +17,7 @@ const forwardedProps = useForwardProps(delegatedProps);
v-bind="forwardedProps"
:class="
cn(
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent',
'focus:bg-accent data-[state=open]:bg-accent flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none',
props.class
)
"

2
unraid-ui/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
View File

@@ -8,7 +8,7 @@ const forwardedProps = useForwardProps(props);
<template>
<DropdownMenuTrigger
class="outline-hidden cursor-pointer data-[state=open]:cursor-pointer"
class="cursor-pointer outline-hidden data-[state=open]:cursor-pointer"
v-bind="forwardedProps"
>
<slot />

2
unraid-ui/src/components/ui/select/SelectContent.vue
View File

@@ -35,7 +35,7 @@ const { teleportTarget } = useTeleport();
v-bind="{ ...forwarded, ...$attrs }"
:class="
cn(
'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md',
position === 'popper' &&
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
props.class

2
unraid-ui/src/components/ui/select/SelectGroup.vue
View File

@@ -10,7 +10,7 @@ const delegatedProps = reactiveOmit(props, 'class');
</script>
<template>
<SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
<SelectGroup :class="cn('w-full p-1', props.class)" v-bind="delegatedProps">
<slot />
</SelectGroup>
</template>

2
unraid-ui/src/components/ui/select/SelectItem.vue
View File

@@ -23,7 +23,7 @@ const forwardedProps = useForwardProps(delegatedProps);
v-bind="forwardedProps"
:class="
cn(
'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50',
props.class
)
"

2
unraid-ui/src/components/ui/select/SelectLabel.vue
View File

@@ -7,7 +7,7 @@ const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }
</script>
<template>
<SelectLabel :class="cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)">
<SelectLabel :class="cn('py-1.5 pr-2 pl-8 text-sm font-semibold', props.class)">
<slot />
</SelectLabel>
</template>

2
unraid-ui/src/components/ui/select/SelectSeparator.vue
View File

@@ -10,5 +10,5 @@ const delegatedProps = reactiveOmit(props, 'class');
</script>
<template>
<SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
<SelectSeparator v-bind="delegatedProps" :class="cn('bg-muted -mx-1 my-1 h-px', props.class)" />
</template>

4
unraid-ui/src/components/ui/select/SelectTrigger.vue
View File

@@ -17,14 +17,14 @@ const forwardedProps = useForwardProps(delegatedProps);
v-bind="forwardedProps"
:class="
cn(
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
'border-input bg-background ring-offset-background data-placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-start text-sm focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate',
props.class
)
"
>
<slot />
<SelectIcon as-child>
<ChevronDown class="w-4 h-4 opacity-50 shrink-0" />
<ChevronDown class="h-4 w-4 shrink-0 opacity-50" />
</SelectIcon>
</SelectTrigger>
</template>

8
unraid-ui/src/forms/AccordionLayout.vue
View File

@@ -5,19 +5,19 @@
v-for="(element, index) in elements"
:key="`${layout.path || ''}-${index}`"
:value="`item-${index}`"
class="border rounded-lg bg-background"
class="bg-background rounded-lg border"
>
<AccordionTrigger class="px-4 py-3 hover:bg-muted/50 [&[data-state=open]>svg]:rotate-180">
<AccordionTrigger class="hover:bg-muted/50 px-4 py-3 [&[data-state=open]>svg]:rotate-180">
<div class="flex flex-col items-start space-y-1 text-left">
<span class="font-medium">
{{ getAccordionTitle(element, index) }}
</span>
<span v-if="getAccordionDescription(element, index)" class="text-sm text-muted-foreground">
<span v-if="getAccordionDescription(element, index)" class="text-muted-foreground text-sm">
{{ getAccordionDescription(element, index) }}
</span>
</div>
</AccordionTrigger>
<AccordionContent class="px-4 pb-4 pt-0">
<AccordionContent class="px-4 pt-0 pb-4">
<div class="space-y-4">
<DispatchRenderer
:schema="layout.schema"

6
unraid-ui/src/forms/ComboBoxField.vue
View File

@@ -90,7 +90,7 @@ if (control.value.data !== undefined && control.value.data !== null) {
</ComboboxTrigger>
</ComboboxAnchor>
<ComboboxList>
<ComboboxEmpty class="p-2 text-sm text-muted-foreground"> No suggestions found </ComboboxEmpty>
<ComboboxEmpty class="text-muted-foreground p-2 text-sm"> No suggestions found </ComboboxEmpty>
<template v-for="suggestion in suggestions" :key="suggestion.value">
<TooltipProvider v-if="suggestion.tooltip">
@@ -99,7 +99,7 @@ if (control.value.data !== undefined && control.value.data !== null) {
<ComboboxItem
:value="suggestion.value"
@select="handleSelect"
class="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden hover:bg-accent hover:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground"
class="hover:bg-accent hover:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none"
>
<span>{{ suggestion.label || suggestion.value }}</span>
</ComboboxItem>
@@ -113,7 +113,7 @@ if (control.value.data !== undefined && control.value.data !== null) {
v-else
:value="suggestion.value"
@select="handleSelect"
class="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden hover:bg-accent hover:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground"
class="hover:bg-accent hover:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none"
>
<span>{{ suggestion.label || suggestion.value }}</span>
</ComboboxItem>

2
unraid-ui/src/forms/FormErrors.vue
View File

@@ -12,7 +12,7 @@ const normalizedErrors = computed(() => {
</script>
<template>
<div v-if="normalizedErrors.length > 0" class="mt-2 text-red-500 text-sm">
<div v-if="normalizedErrors.length > 0" class="mt-2 text-sm text-red-500">
<p v-for="error in normalizedErrors" :key="error">{{ error }}</p>
</div>
</template>

2
unraid-ui/src/forms/HorizontalLayout.vue
View File

@@ -31,7 +31,7 @@ const elements = computed(() => {
</script>
<template>
<div v-if="isVisible" class="flex flex-row gap-2 items-baseline">
<div v-if="isVisible" class="flex flex-row items-baseline gap-2">
<template v-for="(element, _i) in elements" :key="_i">
<DispatchRenderer
:schema="layout.layout.value.schema"

2
unraid-ui/src/forms/LabelRenderer.vue
View File

@@ -74,7 +74,7 @@ const descriptionClass = computed(() => {
<template>
<!-- Use the computed isVisible based on renderer.value.visible -->
<div class="flex flex-col gap-2 shrink-0">
<div class="flex shrink-0 flex-col gap-2">
<!-- Replace native label with the Label component -->
<Label v-if="labelText" :class="labelClass">{{ labelText }}</Label>
<!-- Use v-html with the parsedDescription ref -->

16
unraid-ui/src/forms/MultiSelect.vue
View File

@@ -100,7 +100,7 @@ const placeholder = computed(() => {
<button
v-if="!isReadonly"
@click.stop="removeValue(value)"
class="ml-1 hover:text-destructive"
class="hover:text-destructive ml-1"
type="button"
>
<XMarkIcon class="h-3 w-3" />
@@ -119,7 +119,7 @@ const placeholder = computed(() => {
<ChevronDownIcon class="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent class="w-56 max-h-[20rem] overflow-y-auto">
<DropdownMenuContent class="max-h-[20rem] w-56 overflow-y-auto">
<DropdownMenuLabel>Select Items</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuCheckboxItem
@@ -139,7 +139,7 @@ const placeholder = computed(() => {
>
<div class="flex flex-col">
<span>{{ option.label }}</span>
<span v-if="option.description" class="text-xs text-muted-foreground">
<span v-if="option.description" class="text-muted-foreground text-xs">
{{ option.description }}
</span>
</div>
@@ -172,13 +172,13 @@ const placeholder = computed(() => {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent class="w-full max-h-[20rem] overflow-y-auto">
<DropdownMenuLabel class="flex justify-between items-center">
<DropdownMenuContent class="max-h-[20rem] w-full overflow-y-auto">
<DropdownMenuLabel class="flex items-center justify-between">
<span>Select Items</span>
<button
v-if="selectedValues.length > 0"
@click="clearAll"
class="text-xs text-muted-foreground hover:text-foreground"
class="text-muted-foreground hover:text-foreground text-xs"
type="button"
>
Clear all
@@ -203,7 +203,7 @@ const placeholder = computed(() => {
>
<div class="flex flex-col">
<span>{{ option.label }}</span>
<span v-if="option.description" class="text-xs text-muted-foreground">
<span v-if="option.description" class="text-muted-foreground text-xs">
{{ option.description }}
</span>
</div>
@@ -211,7 +211,7 @@ const placeholder = computed(() => {
<template v-if="selectedValues.length > 0">
<DropdownMenuSeparator />
<div class="px-2 py-2 text-sm text-muted-foreground">{{ selectedValues.length }} selected</div>
<div class="text-muted-foreground px-2 py-2 text-sm">{{ selectedValues.length }} selected</div>
</template>
</DropdownMenuContent>
</DropdownMenuRoot>

18
unraid-ui/src/forms/ObjectArrayField.vue
View File

@@ -168,7 +168,7 @@ const updateItem = (index: number, newValue: unknown) => {
<template>
<div class="w-full">
<Tabs v-if="items.length > 0" v-model="activeTab" class="w-full">
<div class="flex items-center gap-2 mb-4">
<div class="mb-4 flex items-center gap-2">
<TabsList class="flex-1 flex-wrap">
<TabsTrigger
v-for="(item, index) in items"
@@ -196,8 +196,8 @@ const updateItem = (index: number, newValue: unknown) => {
:value="String(index)"
class="mt-0 w-full"
>
<div class="border rounded-lg p-1 sm:p-6 w-full">
<div class="flex justify-end mb-4">
<div class="w-full rounded-lg border p-1 sm:p-6">
<div class="mb-4 flex justify-end">
<Button
v-if="!isItemProtected(item)"
variant="ghost"
@@ -206,7 +206,7 @@ const updateItem = (index: number, newValue: unknown) => {
:disabled="!control.enabled"
@click="removeItem(index)"
>
<X class="h-4 w-4 mr-2" />
<X class="mr-2 h-4 w-4" />
Remove {{ getItemLabel(item, index) }}
</Button>
</div>
@@ -214,13 +214,13 @@ const updateItem = (index: number, newValue: unknown) => {
<!-- Show warning if item matches protected condition -->
<div
v-if="getItemWarning(item)"
class="mb-4 p-3 bg-warning/10 border border-warning/20 rounded-lg"
class="bg-warning/10 border-warning/20 mb-4 rounded-lg border p-3"
>
<div class="flex items-start gap-2">
<span class="text-warning">⚠️</span>
<div>
<div class="font-medium text-warning">{{ getItemWarning(item)?.title }}</div>
<div class="text-sm text-muted-foreground mt-1">
<div class="text-warning font-medium">{{ getItemWarning(item)?.title }}</div>
<div class="text-muted-foreground mt-1 text-sm">
{{ getItemWarning(item)?.description }}
</div>
</div>
@@ -240,10 +240,10 @@ const updateItem = (index: number, newValue: unknown) => {
</TabsContent>
</Tabs>
<div v-else class="text-center py-8 border-2 border-dashed rounded-lg">
<div v-else class="rounded-lg border-2 border-dashed py-8 text-center">
<p class="text-muted-foreground mb-4">No {{ itemTypeName.toLowerCase() }}s configured</p>
<Button variant="outline" size="md" :disabled="!control.enabled" @click="addItem">
<Plus class="h-4 w-4 mr-2" />
<Plus class="mr-2 h-4 w-4" />
Add First {{ itemTypeName }}
</Button>
</div>

4
unraid-ui/src/forms/PreconditionsLabel.vue
View File

@@ -32,8 +32,8 @@ const description = computed(() => props.uischema.options?.description);
<p v-if="description" class="mb-2">{{ description }}</p>
<ul class="list-none space-y-1">
<li v-for="(item, index) in items" :key="index" class="flex items-center">
<span v-if="item.status" class="text-green-500 mr-2 font-bold">✓</span>
<span v-else class="text-red-500 mr-2 font-extrabold">✕</span>
<span v-if="item.status" class="mr-2 font-bold text-green-500">✓</span>
<span v-else class="mr-2 font-extrabold text-red-500">✕</span>
<span>{{ item.text }}</span>
</li>
</ul>

4
unraid-ui/src/forms/SteppedLayout.vue
View File

@@ -141,13 +141,13 @@ const getStepState = (stepIndex: number): StepState => {
>
{{ step.label }}
</StepperTitle>
<StepperDescription v-if="step.description" class="text-xs font-normal text-muted-foreground">
<StepperDescription v-if="step.description" class="text-muted-foreground text-xs font-normal">
{{ step.description }}
</StepperDescription>
</div>
<StepperSeparator
v-if="index < stepsConfig.length - 1"
class="absolute left-1/2 top-4 -z-10 ml-[calc(var(--separator-offset,0rem)+10px)] h-0.5 w-[calc(100%-20px)] bg-border data-[state=active]:bg-primary data-[state=completed]:bg-primary"
class="bg-border data-[state=active]:bg-primary data-[state=completed]:bg-primary absolute top-4 left-1/2 -z-10 ml-[calc(var(--separator-offset,0rem)+10px)] h-0.5 w-[calc(100%-20px)]"
/>
</StepperItem>
</Stepper>

2
unraid-ui/src/forms/StringArrayField.vue
View File

@@ -62,7 +62,7 @@ const placeholder = computed(() => control.value.uischema?.options?.placeholder
<Button
variant="outline"
size="md"
class="text-sm rounded-sm"
class="rounded-sm text-sm"
:disabled="!control.enabled"
@click="addItem"
>