mirror of
https://github.com/unraid/api.git
synced 2026-05-03 13:40:36 -05:00
Eli Bosley
2c62e0ad09
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Streamlined Tailwind CSS integration using Vite plugin, eliminating the need for separate Tailwind config files. * Updated theme and color variables for improved consistency and maintainability. * **Style** * Standardized spacing, sizing, and font classes across all components using Tailwind’s default scale. * Reduced excessive gaps, padding, and font sizes for a more compact and cohesive UI. * Updated gradient, border, and shadow classes to match Tailwind v4 conventions. * Replaced custom pixel-based classes with Tailwind’s bracketed arbitrary value syntax where needed. * Replaced focus outline styles from `outline-none` to `outline-hidden` for consistent focus handling. * Updated flex shrink/grow utility classes to use newer shorthand forms. * Converted several component templates to use self-closing tags for cleaner markup. * Adjusted icon sizes and spacing for improved visual balance. * **Chores** * Removed legacy Tailwind/PostCSS configuration files and related scripts. * Updated and cleaned up package dependencies for Tailwind v4 and related plugins. * Removed unused or redundant build scripts and configuration exports. * Updated documentation to reflect new Tailwind v4 usage. * Removed Prettier Tailwind plugin from formatting configurations. * Removed Nuxt Tailwind module in favor of direct Vite plugin integration. * Cleaned up ESLint config by removing Prettier integration. * **Bug Fixes** * Corrected invalid or outdated Tailwind class names and syntax. * Fixed issues with max-width and other utility classes for improved layout consistency. * **Tests** * Updated test assertions to match new class names and styling conventions. * **Documentation** * Revised README and internal notes to clarify Tailwind v4 adoption and configuration changes. * Added new development notes emphasizing Tailwind v4 usage and documentation references. * **UI Components** * Enhanced BrandButton stories with detailed variant, size, and padding showcases for better visual testing. * Improved theme store to apply dark mode class on both `<html>` and `<body>` elements for compatibility. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
116 lines
2.9 KiB
Vue
116 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { CheckIcon, KeyIcon, ServerStackIcon } from '@heroicons/vue/24/outline';
|
|
import {
|
|
KeyIcon as KeyIconSolid,
|
|
LockClosedIcon,
|
|
ServerStackIcon as ServerStackIconSolid,
|
|
} from '@heroicons/vue/24/solid';
|
|
import {
|
|
Button,
|
|
Stepper,
|
|
StepperDescription,
|
|
StepperItem,
|
|
StepperTitle,
|
|
StepperTrigger,
|
|
} from '@unraid/ui';
|
|
|
|
import type { Component } from 'vue';
|
|
|
|
type StepState = 'inactive' | 'active' | 'completed';
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
activeStep?: number;
|
|
}>(),
|
|
{
|
|
activeStep: 1,
|
|
}
|
|
);
|
|
|
|
interface Step {
|
|
step: number;
|
|
title: string;
|
|
description: string;
|
|
icon: {
|
|
inactive: Component;
|
|
active: Component;
|
|
completed: Component;
|
|
};
|
|
}
|
|
const steps: readonly Step[] = [
|
|
{
|
|
step: 1,
|
|
title: 'Create Device Password',
|
|
description: 'Secure your device',
|
|
icon: {
|
|
inactive: LockClosedIcon,
|
|
active: LockClosedIcon,
|
|
completed: CheckIcon,
|
|
},
|
|
},
|
|
{
|
|
step: 2,
|
|
title: 'Activate License',
|
|
description: 'Create an Unraid.net account and activate your key',
|
|
icon: {
|
|
inactive: KeyIcon,
|
|
active: KeyIconSolid,
|
|
completed: CheckIcon,
|
|
},
|
|
},
|
|
{
|
|
step: 3,
|
|
title: 'Unleash Your Hardware',
|
|
description: 'Device is ready to configure',
|
|
icon: {
|
|
inactive: ServerStackIcon,
|
|
active: ServerStackIconSolid,
|
|
completed: CheckIcon,
|
|
},
|
|
},
|
|
] as const;
|
|
</script>
|
|
|
|
<template>
|
|
<Stepper :default-value="activeStep" class="text-foreground flex w-full items-start gap-2 text-base">
|
|
<StepperItem
|
|
v-for="step in steps"
|
|
:key="step.step"
|
|
v-slot="{ state }: { state: StepState }"
|
|
class="relative flex w-full flex-col items-center justify-center data-disabled:opacity-100"
|
|
:step="step.step"
|
|
:disabled="true"
|
|
>
|
|
<StepperTrigger>
|
|
<div class="flex items-center justify-center">
|
|
<Button
|
|
:variant="state === 'completed' ? 'primary' : state === 'active' ? 'primary' : 'outline'"
|
|
size="md"
|
|
:class="`z-10 rounded-full ${
|
|
state !== 'inactive'
|
|
? 'ring-2 ring-offset-2 ring-offset-background *:cursor-default ' +
|
|
(state === 'completed' ? 'ring-success' : 'ring-primary')
|
|
: ''
|
|
}`"
|
|
:disabled="state === 'inactive'"
|
|
>
|
|
<component :is="step.icon[state]" class="size-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div class="mt-2 flex flex-col items-center text-center">
|
|
<StepperTitle
|
|
:class="[state === 'active' && 'text-primary']"
|
|
class="text-2xs font-semibold transition"
|
|
>
|
|
{{ step.title }}
|
|
</StepperTitle>
|
|
<StepperDescription class="text-2xs font-normal">
|
|
{{ step.description }}
|
|
</StepperDescription>
|
|
</div>
|
|
</StepperTrigger>
|
|
</StepperItem>
|
|
</Stepper>
|
|
</template>
|