# @awes-io/ui

UI component library for AwesCode UI applications built with Vue.js and Nuxt.js.

## Overview

This package provides a comprehensive set of reusable UI components organized using atomic design principles. Components are categorized into atoms, molecules, organisms, pages, and layouts, each serving a specific purpose in building user interfaces.

## Installation

```bash
npm install @awes-io/ui
# or
yarn add @awes-io/ui
```

## Setup

### Nuxt.js

Add the module to your `nuxt.config.js`:

```javascript
export default {
  modules: [
    '@awes-io/ui'
  ],
  
  // Required: Enable components
  components: true,
  
  // Required: Enable Vuex store
  store: true
}
```

### Configuration

Create an `awes.config.js` file in your project root to customize component defaults:

```javascript
export default {
  // Default theme configuration
  logo: {
    src: '/logo.svg',
    alt: 'My App'
  },
  
  // Component-specific configuration
  AwButton: {
    size: 'md',
    color: 'accent',
    theme: 'solid'
  },
  
  // Dark theme overrides
  dark: {
    logo: {
      src: '/logo-dark.svg'
    }
  }
}
```

## Component System

### Architecture

Components are organized into 5 categories:

1. **Atoms** - Basic building blocks (inputs, buttons, icons)
2. **Molecules** - Simple combinations of atoms
3. **Organisms** - Complex, feature-specific components
4. **Pages** - Complete page layouts
5. **Layouts** - Root-level layout components

### Import Methods

- **Global**: Atoms and most molecules are automatically registered and available everywhere
- **Dynamic**: Organisms, pages, and layouts are dynamically imported for better performance

See [docs/index.md](docs/index.md) for complete component listing.

## Quick Start

### Basic Usage

```markup
<template>
  <AwPage title="My Page">
    <AwCard title="Card Title">
      <AwInput v-model="name" label="Name" />
      <AwButton @click="submit">Submit</AwButton>
    </AwCard>
  </AwPage>
</template>
```

### With Layout

```markup
<template>
  <AwLayout>
    <AwPage title="Dashboard">
      <!-- page content -->
    </AwPage>
  </AwLayout>
</template>
```

## Features

- **Atomic Design** - Organized component hierarchy
- **Global & Dynamic Imports** - Optimized loading strategy
- **Vuex Integration** - Built-in store module for navigation and state
- **Dark Theme Support** - Automatic theme switching
- **Responsive Design** - Mobile-first with breakpoint utilities
- **TypeScript Ready** - Full TypeScript support
- **Accessible** - ARIA attributes and keyboard navigation
- **Customizable** - Extensive configuration options

## Documentation

- **[Component Documentation](docs/index.md)** - Complete component reference
- **[Examples](../examples)** - Live usage examples
- **[Configuration Guide](components/_config.js)** - Default configurations

## Store Module

The library includes a Vuex store module (`awesIo`) that manages:

- Navigation menus
- Route tracking
- Dark theme state
- Screen breakpoints
- User profile data

Access via `$store.getters['awesIo/mainMenu']` or use the provided getters.

## Plugins

The module automatically registers several Nuxt plugins:

- **Core** - `$awes` config and `$notify` notifications
- **Screen** - `$screen` responsive breakpoints
- **Router** - Extended router methods
- **Dark Theme** - Theme management
- **Permissions** - CASL integration
- **Day.js** - Date handling

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Development

```bash
# Install dependencies
yarn install

# Run examples
cd examples
yarn dev
```

## License

See LICENSE file for details.