Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@awes-io/ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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

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

Setup

Nuxt.js

Add the module to your nuxt.config.js:

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:

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:

Atoms - Basic building blocks (inputs, buttons, icons)
Molecules - Simple combinations of atoms
Organisms - Complex, feature-specific components
Pages - Complete page layouts
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 for complete component listing.

Quick Start

Basic Usage

<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

<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 - Complete component reference
Examples - Live usage examples
Configuration Guide - 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

# Install dependencies
yarn install

# Run examples
cd examples
yarn dev

License

See LICENSE file for details.