mirror of
https://github.com/unraid/api.git
synced 2026-01-04 15:39: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 -->
27 lines
776 B
Vue
27 lines
776 B
Vue
<script lang="ts" setup>
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
import { Select } from '@unraid/ui';
|
|
import { useDummyServerStore } from '~/_data/serverState';
|
|
|
|
const store = useDummyServerStore();
|
|
|
|
const { selector, serverState } = storeToRefs(store);
|
|
|
|
const items = [
|
|
{ value: 'default', label: 'Default' },
|
|
{ value: 'oemActiviation', label: 'OEM Activation' },
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col gap-2 border-solid border-2 p-2 border-r-2">
|
|
<h1 class="text-lg">Server State Selection</h1>
|
|
<details>
|
|
<summary>Initial Server State: {{ selector }}</summary>
|
|
<pre>{{ JSON.stringify(serverState, null, 4) }}</pre>
|
|
</details>
|
|
<Select v-model="selector" :items="items" placeholder="Select an initial state" />
|
|
</div>
|
|
</template>
|