Amir Component Library

A comprehensive Vue 3 component library with Persian/Farsi support, theming, and utility functions.

Installation

npm install amir-component

Quick Start

1. Install Dependencies

npm install vue@^3.4.0 vuetify@^3.6.0

2. Import and Use Components

import { createApp } from 'vue';
import { createAmirVuetify } from 'amir-component';
import App from './App.vue';

// Import shared components
import { 
  BaseIcon, 
  BaseBreadcrumb, 
  CustomDataTable, 
  DescriptionInput,
  MoneyInput,
  PdfViewer,
  ShamsiDatePicker,
  UiChildCard,
  UiParentCard,
  VPriceTextField,
  AppStepper,
  Loading
} from 'amir-component';

// Import themes
import { 
  ModernTheme, 
  PurpleTheme, 
  DarkModernTheme 
} from 'amir-component/themes';

// Import utilities
import { 
  convertToShamsi, 
  convertToGregorian,
  formatNumber,
  validateNationalCode 
} from 'amir-component/utils';

const app = createApp(App);

// Create Vuetify instance with themes
const vuetify = createAmirVuetify({
  theme: {
    defaultTheme: 'ModernTheme',
    themes: {
      ModernTheme,
      PurpleTheme,
      DarkModernTheme
    }
  }
});

app.use(vuetify);

// Register components globally (optional)
app.component('BaseIcon', BaseIcon);
app.component('BaseBreadcrumb', BaseBreadcrumb);
app.component('CustomDataTable', CustomDataTable);
// ... register other components as needed

app.mount('#app');

Available Components

Shared Components

• BaseIcon - Icon component with click handling
• BaseBreadcrumb - Breadcrumb navigation
• CustomDataTable - Enhanced data table
• DescriptionInput - Text area with description
• MoneyInput - Currency input field
• PdfViewer - PDF viewer component
• ShamsiDatePicker - Persian date picker
• UiChildCard - Child card component
• UiParentCard - Parent card component
• VPriceTextField - Price input field

Common Components

• AppStepper - Step-by-step navigation component
• Loading - Loading spinner component

Utilities

The library includes various utility functions:

Date Utilities

• convertToShamsi() - Convert Gregorian to Persian date
• convertToGregorian() - Convert Persian to Gregorian date

Number Utilities

• formatNumber() - Format numbers with Persian digits

Validation Utilities

• validateNationalCode() - Validate Iranian national code

Helper Utilities

• fetchWrapper - HTTP request wrapper
• fakeBackend - Mock backend for development

Theming

The library includes multiple built-in themes:

Light Themes

• ModernTheme
• PurpleTheme
• RedTheme
• OrangeTheme
• SteelTealGreen
• TealTheme
• SilverTheme

Dark Themes

• DarkModernTheme
• DarkOrangeTheme
• DarkPurpleTheme
• DarkSteelTealGreen
• DarkTealTheme
• DarkSilverTheme
• DarkRedTheme

Persian/Farsi Support

The library includes Persian date picker, number formatting, and RTL support for Persian language applications.

Usage Examples

Using Components

<template>
  <div>
    <BaseIcon icon="mdi-home" @click="handleClick" />
    <ShamsiDatePicker v-model="selectedDate" />
    <CustomDataTable :items="tableData" />
  </div>
</template>

<script setup>
import { BaseIcon, ShamsiDatePicker, CustomDataTable } from 'amir-component';
</script>

Using Utilities

import { convertToShamsi, formatNumber, validateNationalCode } from 'amir-component/utils';

// Convert date
const persianDate = convertToShamsi(new Date());

// Format number
const formattedNumber = formatNumber(1234567); // "۱,۲۳۴,۵۶۷"

// Validate national code
const isValid = validateNationalCode('1234567890');

License

MIT