Data Display

کامپوننت x-data-display برای نمایش داده‌های ساختارمند (مانند مشخصات، ویژگی‌ها یا اطلاعات کلیدی) به صورت جدولی یا لیستی در صفحات Blade استفاده می‌شود. این کامپوننت امکان نمایش داده‌ها در چند ستون، تعیین نوع حاشیه، چینش دلخواه و شخصی‌سازی کامل ظاهر را فراهم می‌کند و برای نمایش اطلاعات پروفایل، جزئیات آیتم‌ها، خلاصه داده‌ها و ... مناسب است.

---

ویژگی‌ها

• نمایش داده‌ها در قالب چند ستونه (تعیین تعداد ستون با cols)
• پشتیبانی از انواع حاشیه: همه خانه‌ها (all)، فقط آیتم‌ها (items)، فقط بیرون (outside)، بدون حاشیه (none)
• امکان تراز کردن مقادیر (alignValues)
• تعیین عرض لیبل‌ها (labelWidth)
• قابلیت ریسپانسیو و سطرشکن (wrap)
• تعیین فاصله بین آیتم‌ها (gap)
• شخصی‌سازی کلاس ظرف اصلی و کلاس کلی
• کاملاً قابل شخصی‌سازی و واکنش‌گرا

---

ورودی‌های کامپوننت

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
bordered	string	'all'	نوع حاشیه: 'all', 'items', 'none', 'outside'
containerClass	string	null	کلاس CSS اضافی برای ظرف اصلی
cols	int	2	تعداد ستون‌های نمایش داده
alignValues	bool	false	تراز کردن مقادیر
labelWidth	int	null	عرض لیبل‌ها (بر حسب پیکسل)
class	string	''	کلاس CSS اضافی برای خود کامپوننت
wrap	bool	false	فعال‌سازی سطرشکنی آیتم‌ها (در حالت ریسپانسیو)
gap	int	null	فاصله بین آیتم‌ها (بر حسب پیکسل، اختیاری)

نکات مهم

• مقدار bordered فقط باید یکی از 'all'، 'items'، 'none' یا 'outside' باشد. مقدار نامعتبر باعث خطا می‌شود.
• اگر wrap فعال باشد، آیتم‌ها در سطرهای جدید قرار می‌گیرند.
• برای شخصی‌سازی بیشتر، می‌توانید از کلاس‌های سفارشی استفاده کنید.

---

کامپوننت‌های فرزند: Data Item و Data List

x-data-item

کامپوننت x-data-item برای نمایش یک آیتم داده با لیبل و مقدار (و امکانات جانبی مانند نشان، آیکن، پیشوند/پسوند و ...) در ساختار data-display یا به صورت مستقل استفاده می‌شود. این کامپوننت برای نمایش اطلاعات کلیدی، ویژگی‌ها یا مشخصات به صورت سطری یا ستونی مناسب است.

ویژگی‌ها و ورودی‌ها

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
label	string	null	متن لیبل آیتم
labelTooltip	string	null	راهنمای لیبل (tooltip)
value	string	مقدار پیش‌فرض	مقدار آیتم (در صورت خالی بودن، مقدار پیش‌فرض از کانفیگ خوانده می‌شود)
badge	bool	false	نمایش مقدار به صورت نشان (badge)
badgeSize	string	'md'	اندازه نشان: xs, sm, md, lg
badgeVariant	string	'primary'	رنگ نشان
badgeAppearance	string	'solid'	ظاهر نشان: solid, light, outline
badgeIcon	string	null	آیکن داخل نشان
badgeIconPosition	string	null	موقعیت آیکن در نشان
class	string	null	کلاس CSS اضافی برای آیتم
span	string	null	تعداد ستون (در حالت چندستونه)
href	string	null	لینک برای مقدار
orientation	string	'horizontal'	جهت نمایش: horizontal یا vertical
suffix	string	null	پسوند مقدار
prefix	string	null	پیشوند مقدار
icon	string	null	آیکن کنار مقدار
iconColor	string	null	رنگ آیکن
dir	string	null	جهت متن
valueClass	string	null	کلاس CSS برای مقدار
labelClass	string	null	کلاس CSS برای لیبل
suffixClass	string	null	کلاس CSS برای پسوند
prefixClass	string	null	کلاس CSS برای پیشوند
showColon	bool	true	نمایش دو نقطه بعد از لیبل
badgeCustomColor	string	null	رنگ سفارشی برای نشان

نکات مهم

• اگر مقدار value خالی باشد، مقدار پیش‌فرض از کانفیگ خوانده می‌شود.
• پراپ‌های مربوط به badge فقط در صورت فعال بودن badge اعمال می‌شوند.
• می‌توانید از کلاس‌های سفارشی برای شخصی‌سازی ظاهر استفاده کنید.

---

x-data-list

کامپوننت x-data-list برای نمایش یک لیست از مقادیر (آرایه‌ای از داده‌ها) با لیبل و امکانات مشابه data-item استفاده می‌شود. این کامپوننت برای نمایش مجموعه‌ای از مقادیر مرتبط با یک ویژگی (مثلاً لیست شماره‌ها، ایمیل‌ها، برچسب‌ها و ...) مناسب است.

ویژگی‌ها و ورودی‌ها

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
value	array	-	آرایه مقادیر (اجباری)
label	string	null	متن لیبل لیست
labelTooltip	string	null	راهنمای لیبل (tooltip)
badge	bool	false	نمایش مقادیر به صورت نشان (badge)
badgeSize	string	null	اندازه نشان
badgeVariant	string	'primary'	رنگ نشان
badgeAppearance	string	'solid'	ظاهر نشان: solid, light, outline
badgeIcon	string	null	آیکن داخل نشان
badgeIconPosition	string	null	موقعیت آیکن در نشان
class	string	null	کلاس CSS اضافی برای آیتم
span	string	null	تعداد ستون (در حالت چندستونه)
separator	string	null	جداکننده بین مقادیر
orientation	string	'horizontal'	جهت نمایش: horizontal یا vertical
suffix	string	null	پسوند مقدار
prefix	string	null	پیشوند مقدار
icon	string	null	آیکن کنار مقدار
iconColor	string	null	رنگ آیکن
dir	string	null	جهت متن
valueClass	string	null	کلاس CSS برای مقدار
labelClass	string	null	کلاس CSS برای لیبل
suffixClass	string	null	کلاس CSS برای پسوند
prefixClass	string	null	کلاس CSS برای پیشوند
showColon	bool	true	نمایش دو نقطه بعد از لیبل
badgeCustomColor	string	null	رنگ سفارشی برای نشان

نکات مهم

• پراپ value باید آرایه باشد و مقداردهی آن الزامی است.
• پراپ‌های مربوط به badge فقط در صورت فعال بودن badge اعمال می‌شوند.
• می‌توانید با separator جداکننده دلخواه بین مقادیر قرار دهید.

---

مثال‌ها

نمونه پایه

<x-data-display bordered="all" cols="4">
    
    <x-data-item 
        label="نوع پروژه"
        href="https://www.dornica.net"
        value="ساختمانی" 
    />
    
    <x-data-item
        label="وضعیت پروژه"
        value="در حال انجام"
        href="https://www.dornica.net"
        badge="true"
        badgeVariant="warning"
    />
    
    <x-data-item 
        label="مدیر پروژه"
        value="مهندس احمدی"
    />
    <x-data-item 
        label="تاریخ شروع"
        value="۱۴۰۲/۰۱/۱۵" 
        badge="true" 
        badgeSize="sm"
        badgeVariant="dark" 
    />
    
    <x-data-item 
        label="بودجه اختصاص یافته"
        value="۵۰۰ میلیون تومان" 
    />
    
    <x-data-list
        label="مکان پروژه"
        :value="[
            ['text' => 'تهران', 'href' => 'https://www.dornica.net', 'dir' => 'ltr'],
            ['text' => 'مشهد'],
            ['text' => 'شیراز'],
        ]"
        separator=" | "
    />
    
    <x-data-item 
        label="تعداد کارکنان"
        value="۵۰ نفر"
    />
    
    <x-data-list
        label="پیشرفت پروژه"
        :value="[
            ['text' => '۷۵٪', 'badge' => true, 'badgeVariant' => 'primary'],
            ['text' => '۸۰٪', 'badge' => true, 'badgeVariant' => 'light-info-2'],
        ]"
        badge="true"
        badgeVariant="primary"
    />
    
    <x-data-item label="تعداد کارکنان" span="full" orientation="vertical">
        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
    </x-data-item>
    
</x-data-display>