website·Indexed 30 days ago
https://anu-vue.netlify.app/A Vue component library featuring a comprehensive set of UI elements including ATable, AInput, AButton, ASelect, and ACard. The library provides a grid system based on CSS Grid Layout, integration with Nuxt via @anu-vue/nuxt, and utility composables such as useAnu, useSelection, and useIndeterminateCheckbox. It leverages UnoCSS for icons and arbitrary sizing flexibility.
ABadge component wraps an element (like an icon, button, or avatar) to display a notification badge. By default, the badge color is primary.<template>
<ABadge :content="9">
<i class="i-bx-bell w-6 h-6" />
</ABadge>
</template>AAvatar component is used to display user avatars using text, icons, or images. The default variant is light. You can change the avatar's color using the color prop. If the component is used within an AMenu component, the default slot is typically used to show the menu, which may cause some props to be ignored.<template>
<div class="flex flex-wrap gap-4">
<!-- Using content prop -->
<AAvatar content="A" />
<!-- Using default slot -->
<AAvatar color="success">
JD
</AAvatar>
<!-- Using icon prop -->
<AAvatar
color="info"
icon="i-bx-support"
/>
<!-- Using image src prop -->
<AAvatar src="/images/demo/portrait-1.jpg" />
</div>
</template>presetAnu provides the core functional styles (non-visual), while presetThemeDefault handles the visual styling and look-and-feel of the components. This system is powered by UnoCSS, allowing developers to replicate design systems like Bootstrap or Material Design.Anu provides two table variations depending on the required functionality:
ATable: A lightweight component for simple row and column rendering. It supports custom column content via slots and extra columns.ADataTable: An advanced table built on top of ATable that includes sorting, searching, and pagination, specifically designed for rendering data fetched from an API.text-sm, text-lg, text-2xl). To increase the gap between each rating icon, use padding utilities with the all: variant (e.g., all:px-3).<template>
<ARating
v-model="rating"
class="text-2xl"
/>
</template>Use the loading prop (boolean) to indicate a background process. When true, the button displays a loading spinner (typically ALoading or ASpinner) instead of the icon and/or label.
Note: If the loading prop is set to any boolean value (true or false), the component will render the spinner logic. If left undefined, the spinner is not rendered at all.
<script lang="ts" setup>
import { ref } from 'vue'
const isLoading = ref(false)
</script>
<template>
<ABtn :loading="isLoading" @click="isLoading = !isLoading">
Click to load
</ABtn>
</template>#title slot to render custom content in the card header, such as adding action icons or links next to the title. To add content to the right of both the title and subtitle, use the header-right slot.<ACard subtitle="Subtitle text" text="Body text">
<template #title>
<div class="flex justify-between items-center">
<span>Card title</span>
<a href="#" class="text-sm">Link</a>
</div>
</template>
</ACard>Anu provides two primary methods for customizing the look and feel of components. The choice depends on whether the change should be reactive to the current theme:
dismissible prop adds a close icon to the alert. To programmatically control the visibility of the alert or respond to the close action, use v-model (which maps to the modelValue prop). You can customize the close icon using the append-icon prop.<script setup lang="ts">
import { ref } from 'vue'
const isVisible = ref(true)
</script>
<template>
<!-- Dismissible alert controlled by v-model -->
<AAlert v-model="isVisible" dismissible>
<span>This alert can be dismissed.</span>
</AAlert>
<!-- Dismissible alert with custom close icon -->
<AAlert
v-model="isVisible"
dismissible
variant="fill"
append-icon="i-bx-block"
>
<span>Custom close icon alert</span>
</AAlert>
<ABtn @click="isVisible = !isVisible">Toggle visibility</ABtn>
</template>