mirror of
https://github.com/unraid/api.git
synced 2025-12-30 13:09:52 -06:00
86b6c4f85b
Added a Vite plugin to automatically inject the Tailwind CSS import into the `unraid-components.client.js` entry file, enhancing the integration of Tailwind CSS within the application. This change improves the setup for styling components consistently across the project. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added automated validation to ensure Tailwind CSS styles are correctly included in the custom elements build output. * **Chores** * Updated the build process to include a CSS validation step after manifest generation. * Enhanced development build configuration to enable CSS source maps and optimize Tailwind CSS injection into web components. * Extended CSS theme with new responsive breakpoint variables. * Improved CSS class specificity in user profile, server state, and update modal components for consistent styling. * Removed redundant style blocks and global CSS imports from multiple components to streamline styling and reduce duplication. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
33 lines
940 B
Vue
33 lines
940 B
Vue
<script lang="ts" setup>
|
|
import { useI18n } from 'vue-i18n';
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
import { BrandButton } from '@unraid/ui';
|
|
|
|
import { useServerStore } from '~/store/server';
|
|
|
|
const { t } = useI18n();
|
|
|
|
const serverStore = useServerStore();
|
|
const { authAction, stateData } = storeToRefs(serverStore);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="whitespace-normal flex flex-col gap-y-4 max-w-3xl">
|
|
<span v-if="stateData.error" class="text-unraid-red font-semibold">
|
|
<h3 class="text-base mb-2">{{ t(stateData.heading) }}</h3>
|
|
<span class="text-sm" v-html="t(stateData.message)" />
|
|
</span>
|
|
<span v-if="authAction">
|
|
<BrandButton
|
|
:disabled="authAction?.disabled"
|
|
:icon="authAction.icon"
|
|
size="12px"
|
|
:text="t(authAction.text)"
|
|
:title="authAction?.title ? t(authAction?.title) : undefined"
|
|
@click="authAction.click?.()"
|
|
/>
|
|
</span>
|
|
</div>
|
|
</template>
|