📚 نحوه استفاده از لایبری کامپوننت‌ها

🚀 نصب و راه‌اندازی

1. Build کردن لایبری:

npm run lib:build

2. Import کردن کامپوننت‌ها:

// Import از لایبری
import { BaseIcon, BaseBreadcrumb, CustomDataTable } from '@/lib/components';

// یا import مستقیم
import { BaseIcon } from '@/lib/components/shared/BaseIcon.vue';

🎯 مثال استفاده از BaseIcon

Template:

<template>
  <div>
    <!-- BaseIcon با کلیک -->
    <BaseIcon 
      icon="mdi-heart" 
      :emitFunc="handleIconClick" 
      :rowData="{ type: 'heart', message: 'Heart clicked!' }"
      class="text-red"
    />
    
    <!-- BaseIcon با تنظیمات -->
    <BaseIcon 
      icon="mdi-star" 
      :emitFunc="handleIconClick" 
      :rowData="{ type: 'star', message: 'Star clicked!' }"
      buttonClass="custom-button"
    />
  </div>
</template>

Script:

<script setup>
import { BaseIcon } from '@/lib/components';

// Function برای handle کردن کلیک
const handleIconClick = (data) => {
  console.log('Icon clicked:', data);
  // منطق سفارشی شما
};
</script>

📋 Props موجود در BaseIcon

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | icon | String | ❌ | - | نام آیکون (مثل mdi-heart) | | buttonClass | String | ❌ | '' | کلاس CSS اضافی | | emitFunc | Function | ✅ | - | Function که هنگام کلیک اجرا می‌شود | | rowData | Object | ❌ | - | داده‌ای که به emitFunc پاس داده می‌شود |

🎨 استایل‌دهی

<BaseIcon 
  icon="mdi-settings" 
  :emitFunc="handleClick" 
  :rowData="{ type: 'settings' }"
  class="text-blue text-h4"
  buttonClass="custom-icon-button"
/>

🔧 کامپوننت‌های موجود در لایبری

Shared Components:

• BaseIcon - آیکون کلیک‌پذیر
• BaseBreadcrumb - نان برشی
• CustomDataTable - جدول داده
• DescriptionInput - ورودی توضیحات
• MoneyInput - ورودی پول
• PdfViewer - نمایش PDF
• ShamsiDatePicker - انتخابگر تاریخ شمسی
• UiChildCard - کارت فرزند
• UiParentCard - کارت والد
• VPriceTextField - فیلد قیمت

Common Components:

• AppStepper - استپر برنامه
• Loading - کامپوننت لودینگ

🚀 نحوه تست

1. شروع dev server:

   npm run dev

2. رفتن به داشبورد:

   • به صفحه داشبورد بروید
   • بخش "تست کامپوننت لایبری" را ببینید
   • روی آیکون‌ها کلیک کنید
   • در کنسول مرورگر پیام‌ها را ببینید

📝 نکات مهم

• ✅ Auto-sync: تغییرات در src/components/ خودکار به src/lib/ کپی می‌شود
• ✅ Watch mode: npm run lib:dev برای همگام‌سازی خودکار
• ✅ Build جداگانه: npm run lib:build برای build لایبری
• ❌ مخلوط نکنید: کامپوننت‌های اصلی و لایبری جدا هستند

🎉 مثال کامل

<template>
  <v-card>
    <v-card-title>
      <BaseIcon 
        icon="mdi-package-variant" 
        :emitFunc="handlePackageClick" 
        :rowData="{ package: 'amir-component' }"
        class="text-success mr-3"
      />
      تست لایبری
    </v-card-title>
    <v-card-text>
      <p>کامپوننت BaseIcon از لایبری با موفقیت import شده!</p>
    </v-card-text>
  </v-card>
</template>

<script setup>
import { BaseIcon } from '@/lib/components';

const handlePackageClick = (data) => {
  console.log('Package clicked:', data);
  // منطق سفارشی
};
</script>