آموزش فرم‌ها (Forms) در Filament

در این مقاله، به طور جامع و مرحله به مرحله، شما را با فرم‌ها (Forms) در Filament آشنا می‌کنیم. فرم‌ها یکی از اجزای اصلی برای دریافت و ارسال داده‌ها در وب‌اپلیکیشن‌ها هستند. این ابزار قدرتمند در Filament امکانات مختلفی را برای مدیریت، نمایش و اعتبارسنجی داده‌ها فراهم می‌کند. از آنجایی که فرم‌ها بخش مهمی از هر اپلیکیشن وب محسوب می‌شوند، آشنایی با فیلدها، اجزای لایه‌بندی، اعتبارسنجی و سایر ویژگی‌های فرم‌ها در Filament برای هر توسعه‌دهنده‌ای ضروری است. در آموزش Filament، شما می‌توانید با تمامی جنبه‌های این فریمورک آشنا شوید و فرم‌هایی قدرتمند و کاربردی بسازید.

فیلدهای فرم (Fields)

در Filament، فیلدهای فرم نقش اساسی در جمع‌آوری داده‌ها از کاربران دارند. این فیلدها انواع مختلفی دارند و هر کدام برای جمع‌آوری نوع خاصی از اطلاعات طراحی شده‌اند. آشنایی با انواع فیلدها و نحوه استفاده از آن‌ها به شما کمک می‌کند تا فرم‌هایی کاربرپسند و بهینه بسازید. در این بخش، به بررسی انواع مختلف فیلدهای فرم‌ها (Forms) در Filament می‌پردازیم و توضیح خواهیم داد که هرکدام چه کاربردهایی دارند.

TextInput (متن ساده)

فیلد TextInput یکی از ساده‌ترین و پرکاربردترین فیلدها در فرم‌ها است که به طور عمده برای وارد کردن داده‌های متنی کوتاه و ساده به کار می‌رود. این فیلد به طور معمول برای اطلاعاتی مانند نام کاربر، آدرس ایمیل، شماره تلفن، آدرس پستی و هر نوع ورودی متنی دیگر که طول آن نسبتاً کوتاه است، استفاده می‌شود. به دلیل سادگی و کاربری بالا، فیلد TextInput در اکثر فرم‌ها و اپلیکیشن‌ها مورد استفاده قرار می‌گیرد.

این فیلد در Filament به شما امکان می‌دهد تا ویژگی‌های مختلفی را برای بهبود تجربه کاربری و اعتبارسنجی داده‌ها به آن اضافه کنید. در ادامه، به بررسی جزئیات بیشتری درباره ویژگی‌ها و نحوه استفاده از TextInput در Filament خواهیم پرداخت.

ویژگی‌ها و قابلیت‌ها

برچسب (Label):
فیلد TextInput می‌تواند یک برچسب (Label) برای شفاف‌سازی نحوه پر کردن فیلد به کاربر داشته باشد. این برچسب معمولاً برای نمایش نوع داده‌ای که باید وارد شود (مثلاً “نام” یا “آدرس ایمیل”) استفاده می‌شود.

مثال:

TextInput::make('name')->label('نام')

الزامی بودن (Required):
اگر نیاز دارید که کاربر حتماً داده‌ای را در این فیلد وارد کند، می‌توانید ویژگی “الزامی بودن” را به آن اضافه کنید. این ویژگی به صورت خودکار از ارسال فرم بدون پر کردن این فیلد جلوگیری می‌کند.

مثال:

TextInput::make('name')
    ->label('نام')
    ->required()

الگو (Pattern):
یکی دیگر از ویژگی‌های مهم فیلد TextInput استفاده از الگوها (Pattern) است. با استفاده از این ویژگی، می‌توانید قوانین خاصی برای ورودی داده‌ها ایجاد کنید. برای مثال، می‌توانید یک الگو برای ورودی آدرس ایمیل، شماره تلفن یا حتی کدپستی تعریف کنید تا داده‌های وارد شده معتبر باشند.

مثال: برای اعتبارسنجی آدرس ایمیل:

TextInput::make('email')
    ->label('آدرس ایمیل')
    ->required()
    ->pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$')

حداکثر طول (Max Length):
برای جلوگیری از وارد شدن داده‌های بسیار طولانی که ممکن است مشکلاتی در نمایش یا ذخیره‌سازی ایجاد کنند، می‌توانید یک محدودیت برای طول ورودی‌ها تعیین کنید.

مثال:

TextInput::make('name')
    ->label('نام')
    ->maxLength(50)

نمایش مقدار پیش‌فرض (Default Value):
می‌توانید مقداری پیش‌فرض برای فیلد تعریف کنید که به صورت خودکار در فیلد وارد شود. این ویژگی زمانی مفید است که بخواهید مقداری پیش‌فرض را برای کاربر فراهم کنید یا داده‌ای خاص را از قبل در فیلد قرار دهید.

مثال:

TextInput::make('phone')
    ->label('شماره تلفن')
    ->default('09123456789')

نمایش به صورت مخفی (Password Field):
اگر فیلدی نیاز به وارد کردن اطلاعات حساس مثل رمز عبور دارد، می‌توانید ویژگی “رمز عبور” را فعال کنید. این کار باعث می‌شود که متن وارد شده در فیلد به صورت ستاره نمایش داده شود.

مثال:

TextInput::make('password')
    ->label('رمز عبور')
    ->password()

مثال‌های کاربردی

نمونه فیلد نام (TextInput): در یک فرم ساده که از کاربر می‌خواهد نام خود را وارد کند، می‌توانید از فیلد TextInput به شکل زیر استفاده کنید:

TextInput::make('name')
    ->label('نام')
    ->required()

نمونه فیلد ایمیل با اعتبارسنجی (Pattern): برای فیلد آدرس ایمیل، شما می‌توانید از ویژگی pattern برای مطابقت دادن ورودی با فرمت صحیح ایمیل استفاده کنید:

TextInput::make('email')
    ->label('آدرس ایمیل')
    ->required()
    ->pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$')

نمونه فیلد شماره تلفن با اعتبارسنجی طول (Max Length): در صورتی که بخواهید شماره تلفن را از کاربر دریافت کنید و محدودیتی برای تعداد ارقام وارد شده اعمال کنید:

TextInput::make('phone')
    ->label('شماره تلفن')
    ->required()
    ->maxLength(11)

Textarea (متن چندخطی)

فیلد Textarea برای وارد کردن داده‌های متنی طولانی‌تر از یک خط استفاده می‌شود. زمانی که نیاز به ذخیره یا نمایش توضیحات، نظرات یا اطلاعات متعدد دارید، این فیلد بهترین گزینه است. به طور کلی، فیلد Textarea برای وارد کردن محتوای متنی که دارای چندین خط است مانند توضیحات، نظرات کاربران، پیام‌ها، یا محتوای تکمیلی کاربرد دارد.

ویژگی‌ها و قابلیت‌ها

اندازه قابل تنظیم (Resizable):

یکی از ویژگی‌های مهم فیلد Textarea این است که می‌توانید اندازه آن را به راحتی تنظیم کنید. کاربر می‌تواند ابعاد فیلد را بزرگ یا کوچک کند تا بتواند بیشتر یا کمتر تایپ کند. این ویژگی به کاربر انعطاف بیشتری می‌دهد.

مثال:

Textarea::make('description')
    ->label('توضیحات')
    ->rows(4) // تعداد خطوط قابل مشاهده
    ->cols(50) // تعداد کاراکترهای قابل مشاهده در هر خط

حداکثر تعداد کاراکترها (Max Length):
می‌توانید یک محدودیت برای طول ورودی تعیین کنید تا از وارد کردن داده‌های بسیار طولانی که ممکن است در دیتابیس یا رابط کاربری مشکلی ایجاد کنند، جلوگیری کنید.

مثال:

Textarea::make('description')
    ->label('توضیحات')
    ->maxLength(500) // حداکثر تعداد کاراکترها

نمایش ویرایشگر (WYSIWYG):
فیلد Textarea می‌تواند به یک ویرایشگر متن پیشرفته (WYSIWYG) تبدیل شود که به کاربران اجازه می‌دهد متنی با فرمت‌های مختلف مانند بولد، ایتالیک، لینک و … وارد کنند. این ویژگی بسیار کاربردی است، به‌ویژه برای محتوای غنی مانند توضیحات و پست‌ها.

مثال با RichEditor:

Textarea::make('content')
    ->label('محتوا')
    ->editor()

محتوای پیش‌فرض (Default Value):
اگر می‌خواهید مقداری پیش‌فرض در فیلد وارد شود، می‌توانید آن را مشخص کنید. این ویژگی می‌تواند در مواردی که نیاز به نمایش مقداری از پیش تعیین شده در فیلد دارید مفید باشد.

مثال:

Textarea::make('description')
    ->label('توضیحات')
    ->default('این قسمت برای وارد کردن توضیحات شما است.')

ویژگی‌های CSS (Custom Styling):
از آنجا که فیلد Textarea یک عنصر HTML است، شما می‌توانید آن را با CSS سفارشی کنید. به عنوان مثال، می‌توانید رنگ پس‌زمینه، فونت یا ارتفاع آن را تغییر دهید تا ظاهر بهتری داشته باشد.

مثال:

Textarea::make('description')
    ->label('توضیحات')
    ->style('background-color: #f0f0f0; font-size: 14px')

مثال کاربردی:

فرض کنید می‌خواهید از فیلد Textarea برای وارد کردن توضیحات استفاده کنید که برای کاربران قابل مشاهده است و همچنین به ویژگی WYSIWYG مجهز است تا بتوانند متن را با فرمت‌های مختلف وارد کنند:

Textarea::make('description')
    ->label('توضیحات')
    ->rows(6) // تعداد خطوط قابل مشاهده
    ->maxLength(1000) // حداکثر طول
    ->editor() // فعال کردن ویرایشگر

 NumberInput (عدد)

فیلد NumberInput به طور خاص برای وارد کردن داده‌های عددی طراحی شده است. این فیلد برای مقادیری مثل سن، قیمت، تعداد، وزن و دیگر داده‌های عددی استفاده می‌شود. فیلد NumberInput به طور خودکار فقط مقادیر عددی را قبول می‌کند و برای جلوگیری از ورود داده‌های غیرمجاز می‌توانید ویژگی‌های مختلفی را به آن اضافه کنید.

ویژگی‌ها و قابلیت‌ها
محدودیت‌های عددی (Min/Max):
با استفاده از ویژگی‌های min و max، می‌توانید محدوده‌ای برای مقادیر وارد شده مشخص کنید. به این ترتیب، داده‌های خارج از این محدوده پذیرفته نخواهند شد.

مثال:

NumberInput::make('age')
    ->label('سن')
    ->min(18) // حداقل مقدار
    ->max(100) // حداکثر مقدار

افزایش/کاهش مقدار (Step):
فیلد NumberInput این امکان را می‌دهد که فقط مقادیری خاص (برای مثال اعداد فرد یا مقادیر خاص) وارد شود. این کار با استفاده از ویژگی step انجام می‌شود.

مثال:

NumberInput::make('price')
    ->label('قیمت')
    ->step(0.1) // مقادیر می‌توانند فقط در گام‌های 0.1 افزایش یابند

مقدار پیش‌فرض (Default Value):
می‌توانید یک مقدار پیش‌فرض برای فیلد تعیین کنید که به طور خودکار در هنگام بارگذاری فرم ظاهر می‌شود.

مثال:

NumberInput::make('quantity')
    ->label('تعداد')
    ->default(1)

فرمت ورودی (Placeholder & Format):
فیلد NumberInput می‌تواند از ویژگی‌های placeholder و format برای تغییر نحوه نمایش و راهنمایی کاربر استفاده کند.

مثال:

NumberInput::make('amount')
    ->label('مقدار')
    ->placeholder('مقدار را وارد کنید')
    ->format('%.2f') // نمایش تا دو رقم اعشار

مثال کاربردی:

برای وارد کردن قیمت یک محصول که باید بین 10 و 5000 باشد و با دقت 2 رقم اعشار نمایش داده شود:

NumberInput::make('price')
    ->label('قیمت')
    ->min(10)
    ->max(5000)
    ->step(0.01)
    ->format('%.2f') // نمایش دو رقم اعشار

 Checkbox (چک‌باکس)

فیلد Checkbox برای انتخاب یک یا چند گزینه استفاده می‌شود. این فیلد در فرم‌ها برای مواردی مانند تایید شرایط استفاده، عضویت در خبرنامه، یا انتخاب ویژگی‌ها کاربرد دارد. از Checkbox می‌توان برای شرایط انتخابی چندگانه استفاده کرد.

ویژگی‌ها و قابلیت‌ها
چندگانه (Multiple Options):
اگر نیاز به ایجاد چک‌باکس‌های متعدد دارید که کاربر بتواند بیشتر از یک گزینه را انتخاب کند، از این فیلد استفاده می‌شود.

مثال:

Checkbox::make('features')
    ->label('ویژگی‌ها')
    ->options([
        'feature_1' => 'ویژگی 1',
        'feature_2' => 'ویژگی 2',
        'feature_3' => 'ویژگی 3',
    ])

الزامی بودن (Required):
مانند سایر فیلدها، می‌توانید فیلد Checkbox را به صورت الزامی قرار دهید تا کاربر باید حداقل یک گزینه را انتخاب کند.

مثال:

Checkbox::make('terms')
    ->label('پذیرش شرایط')
    ->required()

مقدار پیش‌فرض (Default Value):
می‌توانید از مقدار پیش‌فرض برای چک‌باکس‌ها استفاده کنید تا برخی از گزینه‌ها از قبل انتخاب شده باشند.

مثال:

Checkbox::make('newsletter')
    ->label('عضویت در خبرنامه')
    ->default(true) // به طور پیش‌فرض چک شده است

مثال کاربردی:

برای فرم عضویت در خبرنامه که کاربر باید تایید کند که شرایط را پذیرفته است:

Checkbox::make('terms')
    ->label('پذیرش شرایط')
    ->required()

Checkbox::make('newsletter')
    ->label('عضویت در خبرنامه')
    ->default(true)

 Toggle (سوئیچ)

فیلد Toggle مشابه Checkbox است، اما به صورت یک سوئیچ گرافیکی نمایش داده می‌شود که به کاربر این امکان را می‌دهد تا بین دو حالت “فعال” و “غیرفعال” سوئیچ کند. این فیلد معمولاً در مواردی مانند فعال یا غیرفعال کردن ویژگی‌ها، تنظیمات باینری، یا تنظیمات “Yes/No” استفاده می‌شود.

ویژگی‌ها و قابلیت‌ها
حالت‌های فعال و غیرفعال (On/Off):
فیلد Toggle دارای دو حالت است که کاربر می‌تواند بین آن‌ها جابه‌جا شود. به طور پیش‌فرض، این سوئیچ می‌تواند “خاموش” (غیرفعال) باشد و کاربر می‌تواند آن را فعال کند. این سوئیچ‌ها معمولاً با دو کلمه “فعال” و “غیرفعال” یا “ON” و “OFF” مشخص می‌شوند.

مثال:

Toggle::make('active')
    ->label('فعال بودن')
    ->onLabel('فعال')  // برچسب فعال
    ->offLabel('غیرفعال')  // برچسب غیرفعال

پیش‌فرض‌های فعال یا غیرفعال:
به راحتی می‌توانید مقدار پیش‌فرض فیلد را مشخص کنید تا سوئیچ به صورت پیش‌فرض در وضعیت “فعال” یا “غیرفعال” قرار بگیرد.

مثال:

Toggle::make('newsletter_subscription')
    ->label('عضویت در خبرنامه')
    ->default(true) // پیش‌فرض: فعال است

ویژگی‌های شرطی:
همانطور که برای Checkbox می‌توانید از ویژگی‌های شرطی استفاده کنید، در Toggle نیز می‌توانید تصمیم بگیرید که این سوئیچ فقط در شرایط خاصی نمایش داده شود. این ویژگی می‌تواند برای تعاملات پیچیده‌تر و تنظیمات خاص بسیار مفید باشد.

مثال:

Toggle::make('active')
    ->label('فعال بودن')
    ->default(false)
    ->hidden(fn ($get) => !$get('some_field'))  // پنهان کردن سوئیچ براساس مقدار فیلد دیگر

استایل‌های سفارشی:
مانند سایر فیلدها، می‌توانید استایل‌های سفارشی برای سوئیچ Toggle تعیین کنید. می‌توانید رنگ پس‌زمینه، اندازه و حتی مکان سوئیچ را تغییر دهید.

مثال:

Toggle::make('active')
    ->label('فعال بودن')
    ->style('background-color: #f0f0f0; border-radius: 10px;')

مثال کاربردی:

فرض کنید می‌خواهید یک سوئیچ برای فعال/غیرفعال کردن حالت “دسته‌بندی ویژه” داشته باشید، که به صورت پیش‌فرض غیرفعال است و برچسب‌های سفارشی “فعال” و “غیرفعال” دارد:

Toggle::make('featured_category')
    ->label('دسته‌بندی ویژه')
    ->default(false) // پیش‌فرض غیرفعال
    ->onLabel('فعال') // برچسب "فعال"
    ->offLabel('غیرفعال') // برچسب "غیرفعال"

Radio (رادیو باتن)

فیلد Radio به کاربر این امکان را می‌دهد تا از میان چند گزینه، تنها یک گزینه را انتخاب کند. فیلد Radio به طور معمول برای انتخاب یک ویژگی یا دسته‌بندی که فقط یک گزینه از میان چندین گزینه ممکن است، استفاده می‌شود. برای مثال، این فیلد می‌تواند برای انتخاب جنسیت، وضعیت تأهل، یا وضعیت کاری در فرم‌ها استفاده شود.

ویژگی‌ها و قابلیت‌ها
انتخاب تنها یک گزینه:
فیلد Radio به گونه‌ای طراحی شده است که به کاربر اجازه می‌دهد فقط یک گزینه را از بین چندین گزینه انتخاب کند. به همین دلیل، این فیلد مناسب برای موقعیت‌هایی است که یک انتخاب از میان چند گزینه فقط ممکن است.

مثال:

Radio::make('gender')
    ->options([
        'male' => 'مرد',
        'female' => 'زن',
        'other' => 'سایر'
    ])
    ->label('جنسیت')

گزینه‌های سفارشی:
گزینه‌های فیلد Radio می‌توانند بر اساس نیاز شما سفارشی‌سازی شوند. شما می‌توانید مقادیر خاص و برچسب‌های شخصی‌سازی‌شده برای هر گزینه وارد کنید تا تجربه کاربری بهتر شود.

مثال:

Radio::make('marital_status')
    ->options([
        'single' => 'مجرد',
        'married' => 'متأهل',
        'divorced' => 'مطلقه'
    ])
    ->label('وضعیت تأهل')

حالت پیش‌فرض (Default Option):
مانند سایر فیلدها، می‌توانید یک گزینه پیش‌فرض برای انتخاب تعیین کنید. این گزینه به صورت خودکار هنگام بارگذاری فرم انتخاب می‌شود.

مثال:

Radio::make('payment_method')
    ->options([
        'credit_card' => 'کارت اعتباری',
        'paypal' => 'پی‌پال'
    ])
    ->label('روش پرداخت')
    ->default('credit_card') // گزینه پیش‌فرض

ویژگی‌های شرطی:
فیلد Radio نیز می‌تواند بر اساس شرایط خاصی نمایان یا پنهان شود، همانطور که در Checkbox و Toggle اشاره شد.

مثال:

Radio::make('membership_type')
    ->options([
        'basic' => 'پایه',
        'premium' => 'پریمیوم'
    ])
    ->label('نوع عضویت')
    ->hidden(fn ($get) => !$get('subscribe'))  // فقط در صورتی که گزینه "اشتراک" انتخاب شود

مثال کاربردی:
فرض کنید شما یک فرم ثبت‌نام دارید که از کاربر می‌خواهد وضعیت تأهل خود را انتخاب کند. می‌توانید از فیلد Radio استفاده کنید که گزینه‌های مجرد، متأهل و مطلقه را نشان دهد و یک گزینه پیش‌فرض نیز برای آن قرار دهید:

Radio::make('marital_status')
    ->options([
        'single' => 'مجرد',
        'married' => 'متأهل',
        'divorced' => 'مطلقه'
    ])
    ->label('وضعیت تأهل')
    ->default('single') // وضعیت پیش‌فرض

Select (انتخاب تکی)

فیلد Select به کاربر این امکان را می‌دهد که یک گزینه از میان چندین گزینه از یک لیست کشویی انتخاب کند. این فیلد در فرم‌ها برای انتخاب مواردی مانند دسته‌بندی‌ها، کشورهای مختلف، یا انواع دیگر داده‌هایی که محدود به یک انتخاب هستند، استفاده می‌شود.

ویژگی‌ها و قابلیت‌ها
لیست گزینه‌ها (Options List):
در فیلد Select، شما می‌توانید یک لیست از گزینه‌ها مشخص کنید که به کاربر اجازه می‌دهد تا از میان آن‌ها انتخاب کند.

مثال:

Select::make('country')
    ->options([
        'us' => 'آمریکا',
        'ca' => 'کانادا',
        'fr' => 'فرانسه',
        'de' => 'آلمان'
    ])
    ->label('کشور')

گزینه پیش‌فرض (Default Option):
می‌توانید گزینه‌ای را به‌طور پیش‌فرض انتخاب کنید، که در صورتی که کاربر انتخاب نکند، به طور خودکار انتخاب خواهد شد.

مثال:

Select::make('city')
    ->options([
        'tehran' => 'تهران',
        'shiraz' => 'شیراز',
        'isfahan' => 'اصفهان'
    ])
    ->label('شهر')
    ->default('tehran') // شهر پیش‌فرض تهران

ویژگی‌های شرطی:
شما می‌توانید از ویژگی‌های شرطی برای نمایش و پنهان کردن گزینه‌ها یا حتی خود فیلد Select استفاده کنید.

مثال:

Select::make('region')
    ->options([
        'north' => 'شمال',
        'south' => 'جنوب',
    ])
    ->label('منطقه')
    ->hidden(fn ($get) => !$get('country'))  // پنهان شدن فیلد براساس کشور انتخابی

مثال کاربردی:

برای یک فرم ثبت‌نام که در آن کاربر باید شهر خود را از میان لیستی از شهرها انتخاب کند، از فیلد Select می‌توانید استفاده کنید:

Select::make('city')
    ->options([
    'tehran' => 'تهران',
    'shiraz' => 'شیراز',
    'isfahan' => 'اصفهان',
    'tabriz' => 'تبریز'
])
->label('شهر')
->default('tehran') // پیش‌فرض: تهران

در این مثال، کاربر می‌تواند از میان چهار گزینه موجود یک شهر را انتخاب کند. گزینه پیش‌فرض برای این فیلد، تهران است که در صورتی که کاربر هیچ انتخابی انجام ندهد، به‌طور خودکار در فیلد نشان داده خواهد شد.

 MultiSelect (انتخاب چندتایی)

فیلد MultiSelect مشابه فیلد Select است، با این تفاوت که به کاربر این امکان را می‌دهد که چندین گزینه را به‌طور همزمان انتخاب کند. این فیلد معمولاً در مواقعی به‌کار می‌رود که نیاز به انتخاب چند گزینه از یک لیست وجود داشته باشد. مثلاً برای انتخاب برچسب‌ها، دسته‌بندی‌های مختلف، یا حتی مهارت‌ها.

ویژگی‌ها و قابلیت‌ها
انتخاب چند گزینه:
در فیلد MultiSelect، کاربر می‌تواند چندین گزینه را از میان لیست انتخاب کند. این قابلیت به کاربر اجازه می‌دهد تا انتخاب‌های بیشتری نسبت به فیلد Select داشته باشد.

مثال:

MultiSelect::make('skills')
    ->options([
        'php' => 'PHP',
        'laravel' => 'Laravel',
        'javascript' => 'JavaScript',
        'html' => 'HTML',
    ])
    ->label('مهارت‌ها')

ویژگی‌های پیش‌فرض (Default Value):
می‌توانید مقادیر پیش‌فرض برای MultiSelect تنظیم کنید که به‌طور خودکار در لیست انتخاب شده قرار می‌گیرند.

مثال:

MultiSelect::make('skills')
    ->options([
        'php' => 'PHP',
        'laravel' => 'Laravel',
        'javascript' => 'JavaScript',
        'html' => 'HTML',
    ])
    ->label('مهارت‌ها')
    ->default(['php', 'laravel']) // مهارت‌های پیش‌فرض: PHP و Laravel

امکان جستجو و فیلتر کردن:
فیلد MultiSelect معمولاً قابلیت جستجو و فیلتر کردن گزینه‌ها را دارد تا کاربر بتواند به راحتی گزینه‌های مورد نظر خود را پیدا کند، مخصوصاً اگر لیست گزینه‌ها طولانی باشد.

ویژگی‌های شرطی:
می‌توانید از ویژگی‌های شرطی برای نمایش و پنهان کردن فیلد MultiSelect یا حتی تغییر لیست گزینه‌ها بر اساس فیلدهای دیگر استفاده کنید.

مثال:

MultiSelect::make('categories')
    ->options([
        'technology' => 'فناوری',
        'science' => 'علم',
        'arts' => 'هنر',
    ])
    ->label('دسته‌بندی‌ها')
    ->hidden(fn ($get) => !$get('active')) // پنهان شدن فیلد براساس وضعیت فعال بودن

مثال کاربردی:

برای فرم‌هایی که نیاز به انتخاب چندین دسته‌بندی دارند (مثل یک فرم ارسال مقاله یا محصول)، می‌توانید از MultiSelect استفاده کنید:

MultiSelect::make('categories')
    ->options([
        'technology' => 'فناوری',
        'science' => 'علم',
        'arts' => 'هنر',
        'business' => 'کسب‌وکار',
        'health' => 'سلامت',
    ])
    ->label('دسته‌بندی‌ها')
    ->default(['technology', 'science']) // پیش‌فرض: فناوری و علم

TagsInput (تگ‌ها)

فیلد TagsInput به کاربر این امکان را می‌دهد که تگ‌ها یا کلمات کلیدی را وارد کند. این فیلد به‌ویژه برای وارد کردن دسته‌بندی‌ها، ویژگی‌ها یا برچسب‌های مرتبط با محتوا کاربرد دارد. فیلد TagsInput به کاربران اجازه می‌دهد تا کلمات کلیدی را به‌صورت مجزا وارد کرده و هر تگ جدید به‌طور خودکار در یک فیلد جداگانه قرار گیرد.

ویژگی‌ها و قابلیت‌ها
ورود تگ‌های متعدد:
به کمک فیلد TagsInput، کاربران می‌توانند به راحتی چندین تگ را وارد کنند. هر تگ به صورت جداگانه و به‌صورت خودکار در فرم ذخیره می‌شود.

مثال:

TagsInput::make('tags')
    ->label('تگ‌ها')

پیشنهاد تگ‌ها:
این فیلد به شما این امکان را می‌دهد که پیشنهادهایی برای تگ‌ها در زمان تایپ وارد کنید، که می‌تواند به کاربران کمک کند تا سریع‌تر و دقیق‌تر تگ‌های مرتبط را انتخاب کنند.

مثال:

TagsInput::make('tags')
    ->label('تگ‌ها')
    ->searchable() // جستجوی تگ‌ها
    ->placeholder('تگ‌های خود را وارد کنید')

استفاده در دسته‌بندی‌ها یا برچسب‌ها:
این فیلد معمولاً برای دسته‌بندی محتوا، وارد کردن مهارت‌ها، ویژگی‌ها یا سایر برچسب‌ها کاربرد دارد.

مثال:

TagsInput::make('keywords')
    ->label('کلمات کلیدی')
    ->placeholder('کلمات کلیدی خود را وارد کنید')

ویژگی‌های شرطی:
می‌توانید ویژگی‌های شرطی برای فیلد TagsInput نیز تعیین کنید، برای مثال، فیلد فقط در صورتی نمایش داده شود که فیلد دیگری پر شده باشد.

مثال:

TagsInput::make('related_tags')
    ->label('تگ‌های مرتبط')
    ->hidden(fn ($get) => !$get('has_related_content'))  // نمایش فیلد فقط اگر محتوای مرتبط انتخاب شود

مثال کاربردی:

اگر می‌خواهید فرم وارد کردن مقالاتی داشته باشید که تگ‌های مختلف را از کاربران بپذیرد، می‌توانید از فیلد TagsInput استفاده کنید:

TagsInput::make('tags')
    ->label('تگ‌ها')
    ->placeholder('تگ‌های مرتبط با مقاله را وارد کنید')
    ->searchable()  // فعال‌سازی جستجو برای پیشنهاد تگ‌ها

 DatePicker (انتخاب تاریخ)

فیلد DatePicker به کاربر این امکان را می‌دهد تا تاریخ خاصی را از یک تقویم انتخاب کند. این فیلد برای جمع‌آوری داده‌های مربوط به تاریخ، مانند تاریخ تولد، تاریخ ملاقات، یا تاریخ رویدادها، استفاده می‌شود.

ویژگی‌ها و قابلیت‌ها
انتخاب تاریخ از تقویم:
کاربران می‌توانند به‌راحتی یک تاریخ را از یک تقویم انتخاب کنند. فیلد DatePicker معمولاً به صورت گرافیکی یک تقویم به نمایش می‌گذارد که کاربر می‌تواند تاریخ دلخواه خود را انتخاب کند.

مثال:

DatePicker::make('start_date')
    ->label('تاریخ شروع')

فرمت تاریخ:
شما می‌توانید فرمت تاریخ را تنظیم کنید تا مطابق با نیازهای منطقه‌ای یا داخلی شما باشد.

مثال:

DatePicker::make('start_date')
    ->label('تاریخ شروع')
    ->format('Y-m-d') // فرمت تاریخ: سال-ماه-روز

ویژگی‌های شرطی:
مانند سایر فیلدها، می‌توانید برای DatePicker نیز ویژگی‌های شرطی تعیین کنید. مثلاً تاریخ انتخاب‌شده باید بعد از تاریخ خاصی باشد.

مثال:

DatePicker::make('end_date')
    ->label('تاریخ پایان')
    ->minDate(now()) // فقط تاریخ‌های آینده

مثال کاربردی:

برای فرم رزرو یا برنامه‌ریزی یک رویداد، می‌توانید از فیلد DatePicker برای انتخاب تاریخ استفاده کنید:

DatePicker::make('event_date')
    ->label('تاریخ رویداد')
    ->format('Y-m-d')  // انتخاب تاریخ به فرمت سال-ماه-روز
    ->minDate(now())   // فقط تاریخ‌های آینده قابل انتخاب هستند

DateTimePicker (انتخاب تاریخ و زمان)

فیلد DateTimePicker مشابه فیلد DatePicker است، با این تفاوت که به کاربر این امکان را می‌دهد تا تاریخ و زمان را همزمان انتخاب کند. این فیلد معمولاً در فرم‌هایی که نیاز به مشخص کردن تاریخ و زمان دقیق دارند، مانند فرم‌های رزرو، رویدادهای برنامه‌ریزی شده، یا فرم‌های مربوط به فعالیت‌های زمانی استفاده می‌شود.

ویژگی‌ها و قابلیت‌ها:
انتخاب همزمان تاریخ و زمان:
این فیلد به کاربر امکان می‌دهد که علاوه بر تاریخ، زمان دقیق را نیز به صورت جداگانه وارد کند. معمولاً به‌صورت یک تقویم همراه با یک انتخاب‌کننده ساعت و دقیقه به نمایش درمی‌آید.

مثال:

DateTimePicker::make('event_datetime')
    ->label('تاریخ و زمان رویداد')

فرمت تاریخ و زمان:
می‌توانید فرمت تاریخ و زمان را به دلخواه تنظیم کنید. برای مثال، انتخاب تاریخ و زمان به صورت Y-m-d H:i:s یا هر فرمت دیگری که متناسب با نیاز شما باشد.

مثال:

DateTimePicker::make('event_datetime')
    ->label('تاریخ و زمان رویداد')
    ->format('Y-m-d H:i') // فرمت تاریخ و زمان

ویژگی‌های شرطی:
مشابه سایر فیلدها، می‌توانید ویژگی‌های شرطی برای فیلد DateTimePicker نیز تعیین کنید. مثلاً فقط تاریخ‌هایی که بعد از تاریخ امروز باشند، قابل انتخاب هستند.

مثال:

DateTimePicker::make('event_datetime')
    ->label('تاریخ و زمان رویداد')
    ->minDate(now()) // تنها تاریخ‌های آینده قابل انتخاب هستند

کاربرد:
این فیلد معمولاً برای فرم‌هایی که نیاز به تعیین تاریخ و زمان خاص دارند (مثلاً تاریخ و زمان شروع یک رویداد، جلسه، یا رزرو) استفاده می‌شود.

 TimePicker (انتخاب زمان)

فیلد TimePicker به کاربر این امکان را می‌دهد تا زمان (ساعت و دقیقه) را در یک روز خاص انتخاب کند. این فیلد معمولاً برای فرم‌هایی استفاده می‌شود که نیاز به انتخاب زمان ملاقات، زمان شروع یا پایان یک رویداد، یا زمان کاری دارند.

ویژگی‌ها و قابلیت‌ها:
انتخاب زمان:
این فیلد فقط به انتخاب ساعت و دقیقه محدود می‌شود و تاریخ را شامل نمی‌شود. معمولاً به‌صورت یک انتخاب‌کننده زمان با امکان تنظیم ساعت و دقیقه به نمایش درمی‌آید.

مثال:

TimePicker::make('meeting_time')
    ->label('زمان ملاقات')

فرمت ۱۲ ساعته یا ۲۴ ساعته:
می‌توانید تنظیم کنید که زمان در قالب ۱۲ ساعته (AM/PM) یا ۲۴ ساعته نمایش داده شود.

مثال:

TimePicker::make('meeting_time')
    ->label('زمان ملاقات')
    ->format('H:i') // ۲۴ ساعته

حداقل و حداکثر زمان:
مشابه فیلدهای دیگر، می‌توانید حداقل و حداکثر زمان‌هایی که می‌توانند انتخاب شوند را تعیین کنید.

مثال:

TimePicker::make('meeting_time')
    ->label('زمان ملاقات')
    ->minTime('09:00') // زمان شروع از ساعت ۹ صبح
    ->maxTime('17:00') // حداکثر زمان انتخابی ساعت ۵ عصر

کاربرد:
این فیلد معمولاً در فرم‌هایی که نیاز به وارد کردن زمان دقیق دارند (مانند فرم‌های رزرو، زمان‌بندی جلسات، یا ثبت ساعت‌های کاری) استفاده می‌شود.

ColorPicker (انتخاب رنگ)

فیلد ColorPicker به کاربران این امکان را می‌دهد تا یک رنگ را انتخاب کنند. این فیلد معمولاً در فرم‌های طراحی، گرافیک، یا تنظیمات ظاهر (مثلاً برای انتخاب رنگ پس‌زمینه یا متن) کاربرد دارد.

ویژگی‌ها و قابلیت‌ها:
انتخاب رنگ:
این فیلد به صورت گرافیکی یک پالت رنگ نمایش می‌دهد که کاربر می‌تواند از میان رنگ‌های مختلف یکی را انتخاب کند. در برخی از پیاده‌سازی‌ها، کاربران می‌توانند رنگ مورد نظر خود را به‌صورت کد هگزادسیمال (Hex) وارد کنند.

مثال:

ColorPicker::make('color')
    ->label('رنگ')

کد هگزادسیمال و RGB:
کاربران می‌توانند رنگ انتخابی خود را به صورت کد هگزادسیمال یا RGB مشاهده و انتخاب کنند. این امکان برای طراحان وب یا افرادی که نیاز به انتخاب رنگ‌های دقیق دارند مفید است.

مثال:

ColorPicker::make('color')
    ->label('رنگ')
    ->default('#FF5733') // رنگ پیش‌فرض

ویژگی‌های شرطی:
می‌توانید ویژگی‌های شرطی نیز برای فیلد ColorPicker اعمال کنید. برای مثال، فیلد فقط در صورتی که گزینه خاصی انتخاب شود، نمایش داده شود.

مثال:

ColorPicker::make('background_color')
    ->label('رنگ پس‌زمینه')
    ->hidden(fn ($get) => !$get('use_custom_color')) // فقط اگر گزینه "استفاده از رنگ سفارشی" فعال باشد

کاربرد:
این فیلد بیشتر در فرم‌های گرافیکی یا طراحی، مانند انتخاب رنگ برای تم‌ها، پس‌زمینه‌ها، یا متن‌های وب‌سایت‌ها استفاده می‌شود.

 RichEditor (ویرایشگر متن پیشرفته)

فیلد RichEditor به کاربران این امکان را می‌دهد که متنی را با فرمت‌های مختلف مانند بولد، ایتالیک، لینک، لیست‌ها، و سایر امکانات ویرایشی وارد کنند. این فیلد بیشتر برای وارد کردن محتوای متنی غنی و پیچیده مانند مقالات، پست‌های بلاگ، توضیحات و غیره کاربرد دارد.

ویژگی‌ها و قابلیت‌ها:
فرمت‌های متنی:
کاربران می‌توانند متن را به صورت غنی و با فرمت‌های مختلف وارد کنند. این فرمت‌ها شامل بولد، ایتالیک، زیرخط، تغییر رنگ، لینک، لیست‌های ترتیبی و غیره هستند.

مثال:

RichEditor::make('content')
    ->label('محتوا')

ویرایشگر گرافیکی:
این فیلد معمولاً یک ویرایشگر گرافیکی را برای کاربر نمایش می‌دهد که امکان انتخاب ابزارهای ویرایشی مختلف را برای فرمت کردن متن فراهم می‌آورد.

امکان افزودن تصاویر یا فایل‌ها:
برخی از پیاده‌سازی‌ها به شما این امکان را می‌دهند که از طریق RichEditor، فایل‌ها یا تصاویر را نیز بارگذاری کرده و در داخل محتوای متنی قرار دهید.

مثال:

RichEditor::make('content')
    ->label('محتوا')
    ->toolbarButtons(['bold', 'italic', 'link', 'image']) // اضافه کردن دکمه‌های ویرایش

کاربرد:
این فیلد معمولاً در فرم‌هایی که نیاز به ورود محتوای متنی غنی دارند، مانند مقالات، پست‌های بلاگ، توضیحات محصول، و غیره استفاده می‌شود.

 MarkdownEditor (ویرایشگر مارک‌داون)

فیلد MarkdownEditor برای ویرایش متنی به فرمت مارک‌داون طراحی شده است. مارک‌داون یک زبان نشانه‌گذاری ساده است که برای ایجاد محتوای متنی با فرمت‌های مختلف مانند هدرها، لیست‌ها، لینک‌ها و تصاویر بدون نیاز به HTML پیچیده استفاده می‌شود. این فرمت به ویژه در وب‌سایت‌هایی که نیاز به وارد کردن محتوای متنی به صورت ساده و قابل تبدیل به HTML دارند، کاربرد دارد. از آن‌جایی که بسیاری از سیستم‌های مدیریت محتوا (CMS) و وب‌سایت‌ها از مارک‌داون پشتیبانی می‌کنند، فیلد MarkdownEditor در این نوع سیستم‌ها بسیار مفید است.

ویژگی‌ها و قابلیت‌ها:

فرمت مارک‌داون: با استفاده از فیلد MarkdownEditor، کاربران می‌توانند متنی را با فرمت مارک‌داون وارد کنند. مارک‌داون یکی از زبان‌های نشانه‌گذاری است که امکان ایجاد فرمت‌های ساده را فراهم می‌آورد، بدون اینکه نیازی به استفاده از تگ‌های پیچیده HTML باشد. در این فرمت می‌توان هدرها، پاراگراف‌ها، لیست‌ها، لینک‌ها و تصاویر را به سادگی اضافه کرد.

به عنوان مثال:

هدرها با علامت # مشخص می‌شوند.
لیست‌ها با – یا * ایجاد می‌شوند.
لینک‌ها با استفاده از []() فرمت می‌شوند.
مثال کد:

MarkdownEditor::make('description')
    ->label('توضیحات')

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

نمایش پیش‌نمایش: یکی از ویژگی‌های مفید فیلد MarkdownEditor این است که معمولاً پیش‌نمایشی از محتوای وارد شده را به صورت HTML به کاربر نمایش می‌دهد. این پیش‌نمایش به کاربران کمک می‌کند تا ببینند محتوای مارک‌داون آن‌ها در نهایت چگونه نمایش داده خواهد شد. به این ترتیب، کاربران می‌توانند قبل از ارسال داده‌ها، از صحت نمایش محتوای خود مطمئن شوند.

مثال: در برخی پیاده‌سازی‌ها، می‌توانید از ویژگی Preview استفاده کنید تا پیش‌نمایش زنده‌ای از متن مارک‌داون را مشاهده کنید و مطمئن شوید که محتوای شما به درستی رندر می‌شود.

مناسب برای بلاگ‌ها و سیستم‌های محتوا: این فیلد به‌ویژه در سیستم‌های مدیریت محتوا (CMS) و وبلاگ‌ها کاربرد دارد. در چنین سیستم‌هایی، محتوا معمولاً باید با استفاده از زبان‌های نشانه‌گذاری ساده و بدون نیاز به کدنویسی HTML وارد شود. مارک‌داون انتخابی محبوب برای نویسندگان، بلاگرها و سایر کاربران است که نیاز به وارد کردن متنی ساختارمند دارند.

در وب‌سایت‌ها و بلاگ‌ها، این امکان که نویسنده‌ها بتوانند از مارک‌داون استفاده کنند، به آن‌ها این اجازه را می‌دهد که با سرعت و بدون نیاز به وارد کردن کدهای پیچیده، محتوای خود را ساختاردهی کنند. این فیلد به‌ویژه برای افرادی که با HTML آشنا نیستند بسیار مناسب است.

ساده و کاربرپسند: یکی از دلایل محبوبیت مارک‌داون در میان کاربران، سادگی و خوانایی آن است. برخلاف HTML که می‌تواند پیچیده باشد، مارک‌داون بسیار ساده و طبیعی است و حتی برای افراد مبتدی نیز یادگیری آن آسان است. این ویژگی باعث می‌شود که کاربران بدون نگرانی از پیچیدگی‌های کدنویسی، به راحتی محتوای خود را وارد کنند.

مثال‌هایی از مارک‌داون:

هدر:

# این یک هدر است

لیست:

- مورد اول
- مورد دوم
- مورد سوم

لینک:

[Google](https://www.google.com)

پشتیبانی از فرمت‌های اضافی: برخی از پیاده‌سازی‌ها یا پلاگین‌های اضافی می‌توانند ویژگی‌های اضافی را به فیلد MarkdownEditor اضافه کنند، مانند پشتیبانی از تصاویر، جداول، فرمول‌های ریاضی (با استفاده از LaTeX) و حتی کدهای Syntax Highlighting برای زبان‌های برنامه‌نویسی مختلف.

این ویژگی‌ها به‌ویژه برای وب‌سایت‌هایی که نیاز به افزودن محتوای متنی پیچیده دارند، مانند ویکی‌ها یا داکیومنت‌های فنی، بسیار مفید است.

 CodeEditor (ویرایشگر کد)

فیلد CodeEditor به شما این امکان را می‌دهد که کدهای برنامه‌نویسی مختلف را وارد کنید. این فیلد معمولاً برای ویرایش و نمایش کدهای HTML، CSS، JavaScript، PHP و سایر زبان‌های برنامه‌نویسی به کار می‌رود. CodeEditor به دلیل پشتیبانی از برجسته‌سازی نحوی (syntax highlighting) و تکمیل خودکار، تجربه برنامه‌نویسی بهتری را برای کاربران فراهم می‌آورد.

ویژگی‌ها و قابلیت‌ها:
برجسته‌سازی نحوی (Syntax Highlighting):
این فیلد به‌طور خودکار کدهای وارد شده را تجزیه کرده و با رنگ‌های مختلف برای هر بخش از زبان برنامه‌نویسی، برجسته می‌کند. این ویژگی کمک می‌کند که کدها بهتر قابل درک و خوانا باشند.

مثال:

CodeEditor::make('code')
    ->label('کد')

پشتیبانی از زبان‌های مختلف:
این فیلد معمولاً از چندین زبان برنامه‌نویسی مختلف مانند HTML، CSS، JavaScript، PHP و غیره پشتیبانی می‌کند. شما می‌توانید زبان خاصی را برای کدگذاری مشخص کنید.

مثال:

CodeEditor::make('html_code')
    ->label('کد HTML')
    ->language('html') // زبان کدگذاری HTML

تکمیل خودکار (Autocomplete):
برخی پیاده‌سازی‌ها قابلیت تکمیل خودکار (Autocomplete) را برای زبان‌های برنامه‌نویسی فراهم می‌آورند، که به کاربر کمک می‌کند تا کدهای خود را سریعتر و بدون خطا وارد کند.

بررسی خطاها:
در برخی از پیاده‌سازی‌ها، فیلد CodeEditor امکان بررسی و نمایش خطاهای کد را دارد. این قابلیت به توسعه‌دهندگان کمک می‌کند تا سریع‌تر مشکلات کد خود را شناسایی و برطرف کنند.

کاربرد:
این فیلد معمولاً در فرم‌هایی که به توسعه‌دهندگان و برنامه‌نویسان نیاز دارند تا کدهای خود را وارد و ویرایش کنند، استفاده می‌شود. مثلاً در وب‌سایت‌های آموزشی، ویرایشگرهای آنلاین، سیستم‌های مدیریت محتوای فنی و سایر اپلیکیشن‌های مربوط به برنامه‌نویسی.

 Builder (ساختارهای تکراری)

فیلد Builder به شما این امکان را می‌دهد که بخش‌های تکراری فرم را ایجاد کنید. این فیلد معمولاً برای ایجاد ساختارهای پیچیده‌تر و آیتم‌های تکراری مانند لیست‌ها یا فرم‌های قابل گسترش استفاده می‌شود. به‌طور کلی، Builder به کاربران این امکان را می‌دهد که اجزای اضافی را به فرم اضافه کنند تا با توجه به نیازهای خاص خود، ساختارهای تکراری بسازند.

ویژگی‌ها و قابلیت‌ها:
ساختارهای تکراری:
فیلد Builder به شما این امکان را می‌دهد که داده‌هایی که ممکن است به صورت تکراری وارد شوند، مانند لیست‌ها، آیتم‌ها یا بخش‌های مشابه، ایجاد کنید. برای مثال، کاربر می‌تواند چندین آیتم در یک لیست اضافه کند و هرکدام را با فیلدهای مختلف پر کند.

مثال:

Builder::make('items')
    ->label('آیتم‌ها')
    ->fields([
        TextInput::make('name')->label('نام آیتم'),
        NumberInput::make('quantity')->label('تعداد')
    ])

پشتیبانی از فیلدهای پیچیده:
شما می‌توانید داخل Builder از انواع مختلف فیلدها (مانند فیلدهای متنی، عددی، چک‌باکس‌ها و غیره) استفاده کنید. این فیلد به شما اجازه می‌دهد که ساختارهای پیچیده‌تر را ایجاد کنید که در آن‌ها فیلدهای مختلف می‌توانند برای هر آیتم تکراری وارد شوند.

ویرایش و حذف:
کاربران می‌توانند آیتم‌های اضافه شده را ویرایش یا حذف کنند، که این ویژگی برای فرم‌های پیچیده و پویا مناسب است.

پشتیبانی از ترتیب‌دهی:
در برخی پیاده‌سازی‌ها، کاربران می‌توانند ترتیب آیتم‌های مختلف را تغییر دهند. این ویژگی به کاربران این امکان را می‌دهد که آیتم‌ها را به دلخواه مرتب کنند.

کاربرد:
این فیلد معمولاً در فرم‌هایی که نیاز به اضافه کردن داده‌های تکراری دارند (مانند فرم‌های سفارشات، فهرست‌های محصولات، یا فرم‌های جمع‌آوری داده‌های مشابه) استفاده می‌شود.

Repeater (فیلدهای تکرارشونده)

فیلد Repeater مشابه فیلد Builder است، با این تفاوت که بیشتر برای مواردی که نیاز به افزودن تعداد نامحدودی از فیلدهای مشابه دارند، طراحی شده است. این فیلد به شما امکان می‌دهد که فیلدهایی را به‌طور تکراری و پویا اضافه کنید تا داده‌های مشابه را از کاربر جمع‌آوری کنید.

ویژگی‌ها و قابلیت‌ها:
تکرار فیلدها:
با استفاده از فیلد Repeater، می‌توانید فیلدهای مختلف را به تعداد نامحدود تکرار کنید. این فیلد معمولاً برای جمع‌آوری داده‌هایی که برای هر ورودی نیاز به اطلاعات مشابه دارند، استفاده می‌شود.

مثال:

Repeater::make('contacts')
    ->label('مخاطبین')
    ->fields([
        TextInput::make('name')->label('نام'),
        TextInput::make('email')->label('ایمیل')
    ])

پشتیبانی از فیلدهای مختلف:
مشابه فیلد Builder، فیلد Repeater نیز از انواع مختلف فیلدها پشتیبانی می‌کند. شما می‌توانید فیلدهای متنی، عددی، چک‌باکس‌ها و غیره را در داخل Repeater استفاده کنید.

تعداد نامحدود ورودی‌ها:
برخلاف برخی فیلدهای دیگر که ممکن است تعداد ورودی‌ها محدود باشند، فیلد Repeater به کاربر این امکان را می‌دهد که به تعداد دلخواه فیلدهای تکراری اضافه کند.

ویرایش و حذف:
کاربران می‌توانند فیلدهای تکراری را ویرایش، حذف یا اضافه کنند.

کاربرد:
این فیلد بیشتر در فرم‌هایی که نیاز به جمع‌آوری داده‌های تکراری دارند (مانند فرم‌های فهرست تماس، فرم‌های سفارشات و غیره) استفاده می‌شود.

 KeyValue (کلید-مقدار)

فیلد KeyValue به شما این امکان را می‌دهد که جفت‌های کلید-مقدار را وارد کنید. این فیلد بیشتر برای ذخیره تنظیمات، پارامترهای مختلف یا داده‌هایی که به صورت کلید و مقدار ذخیره می‌شوند، مناسب است.

ویژگی‌ها و قابلیت‌ها:
ورود جفت‌های کلید-مقدار:
فیلد KeyValue به کاربر این امکان را می‌دهد که کلیدها و مقادیر مربوط به آن‌ها را وارد کند، که معمولاً برای ذخیره تنظیمات یا اطلاعات اضافی در برنامه‌ها استفاده می‌شود.

مثال:

KeyValue::make('settings')
    ->label('تنظیمات')

تنظیمات پویا:
شما می‌توانید این فیلد را طوری تنظیم کنید که کاربران بتوانند تعداد دلخواهی از جفت‌های کلید-مقدار اضافه کنند.

پشتیبانی از داده‌های مختلف:
فیلد KeyValue می‌تواند از انواع داده‌ها (مانند رشته، عدد و غیره) برای مقادیر پشتیبانی کند.

کاربرد:
این فیلد بیشتر برای فرم‌هایی که نیاز به ذخیره‌سازی داده‌های کلید-مقدار (مانند تنظیمات پیکربندی، پارامترهای سفارشی و غیره) دارند، استفاده می‌شود.

Hidden (فیلد مخفی)

فیلد Hidden به شما این امکان را می‌دهد که داده‌هایی را وارد کنید که برای کاربر قابل مشاهده نیستند. این فیلد معمولاً برای ذخیره اطلاعات پردازشی، تنظیمات پیش‌فرض یا اطلاعاتی که نباید توسط کاربر تغییر داده شوند، استفاده می‌شود. از آن‌جا که این فیلد برای کاربر مخفی است، اغلب در پردازش‌های داخلی، مانند شناسه‌های سیستم یا توکن‌های امنیتی به کار می‌رود.

ویژگی‌ها و قابلیت‌ها:
مخفی بودن فیلد:
داده‌های وارد شده در این فیلد برای کاربر قابل مشاهده نیستند. این فیلد می‌تواند در پس‌زمینه پردازش شود و تنها توسط سرور یا سیستم‌های دیگر استفاده شود.

مثال:

Hidden::make('user_id')
    ->label('شناسه کاربر')

استفاده در پردازش‌های داخلی:
این فیلد معمولاً برای ذخیره اطلاعاتی استفاده می‌شود که در فرآیندهای داخلی مورد نیاز هستند، مانند شناسه‌های کاربری، توکن‌های امنیتی، یا اطلاعاتی که به‌طور مستقیم با فرم و ورودی‌های کاربر ارتباط ندارند، اما برای پردازش‌های سیستم لازم است.

ارسال داده‌ها به سرور:
اگرچه فیلد Hidden برای کاربر قابل مشاهده نیست، اما اطلاعات وارد شده در آن به همراه دیگر فیلدها به سرور ارسال می‌شود، بنابراین می‌توان آن‌ها را در هنگام ارسال فرم بررسی یا استفاده کرد.

استفاده در فرم‌های پردازشی و انتقال داده‌ها:
این فیلد معمولاً برای نگهداری داده‌هایی استفاده می‌شود که باید در فرآیند پردازش یا انتقال اطلاعات به سرور بمانند، مانند شناسه جلسه، توکن‌های CSRF یا اطلاعات تایید هویت.

کاربرد:
این فیلد معمولاً در فرم‌هایی که نیاز به پردازش‌های داخلی دارند یا اطلاعاتی که برای کاربر قابل مشاهده نیست، مانند فرم‌های پرداخت آنلاین، فرم‌های ثبت‌نام یا مدیریت داده‌های حساس استفاده می‌شود.

 Placeholder (متن جایگزین)

فیلد Placeholder برای نمایش یک متن راهنما در داخل فیلد استفاده می‌شود. این متن به کاربر کمک می‌کند تا متوجه شود که چه نوع اطلاعاتی باید وارد کند و معمولاً قبل از شروع به تایپ، در داخل فیلد نمایش داده می‌شود. این ویژگی به‌خصوص برای فیلدهای متنی، ایمیل، شماره تلفن و دیگر فیلدهایی که نیاز به راهنمایی دارند، بسیار مفید است.

ویژگی‌ها و قابلیت‌ها:
نمایش متن راهنما:
Placeholder به‌عنوان یک متن راهنما داخل فیلد نمایش داده می‌شود تا کاربر را راهنمایی کند. پس از شروع تایپ در فیلد، این متن به‌طور خودکار ناپدید می‌شود.

مثال:

TextInput::make('email')
    ->placeholder('آدرس ایمیل خود را وارد کنید')

کاربرد در فیلدهای مختلف:
شما می‌توانید از Placeholder در فیلدهای مختلف مانند TextInput، NumberInput، DatePicker و دیگر فیلدهای متنی استفاده کنید. این ویژگی می‌تواند به کاربر کمک کند تا راحت‌تر فرم‌ها را پر کند.

راهنمایی و توضیحات:
متن placeholder می‌تواند به‌عنوان یک توضیح یا نکته برای کاربر باشد، مثلاً فرمت مورد انتظار برای یک فیلد یا نوع اطلاعات مورد نظر.

مثال:

TextInput::make('phone')
    ->placeholder('شماره تلفن خود را وارد کنید')

ویژگی‌های دینامیک:
در برخی پیاده‌سازی‌ها، می‌توانید از ویژگی‌های دینامیک برای نمایش placeholder استفاده کنید. به‌عنوان مثال، می‌توانید متنی را بر اساس ورودی‌های قبلی کاربر تغییر دهید.

کاربرد:
این ویژگی معمولاً برای فرم‌های ساده‌ای که نیاز به راهنمایی برای پر کردن فیلد دارند، مانند فرم‌های ثبت‌نام، ورود به سیستم یا فرم‌های تماس استفاده می‌شود.

اجزای لایه‌بندی (Layout Components)

در Filament، برای طراحی فرم‌ها، اجزای مختلفی وجود دارند که به شما کمک می‌کنند تا فرم‌ها را به روشی منظم، ساختارمند و کاربرپسند نمایش دهید. این اجزا به طراحان فرم این امکان را می‌دهند که بخش‌های مختلف فرم‌ها را گروه‌بندی کرده و اطلاعات را به راحتی از کاربران جمع‌آوری کنند. در این بخش، به توضیح هرکدام از اجزای لایه‌بندی خواهیم پرداخت.

 Section (بخش‌بندی عمودی)

فیلد Section به شما این امکان را می‌دهد که فرم‌ها را به بخش‌های مختلف تقسیم کنید. این بخش‌بندی به ویژه برای فرم‌هایی که دارای فیلدهای متعدد و اطلاعات پیچیده هستند، مفید است. بخش‌ها می‌توانند به کاربران کمک کنند که درک بهتری از نحوه پر کردن فرم داشته باشند و از سردرگمی جلوگیری کنند. به عنوان مثال، می‌توانید یک بخش برای اطلاعات شخصی، یک بخش برای اطلاعات تماس و یک بخش برای جزئیات حساب کاربری ایجاد کنید.

مزایا:

تقسیم فرم‌ها به بخش‌های قابل مدیریت و منطقی.
کمک به هدایت کاربران در فرآیند پر کردن فرم.
استفاده از عنوان‌ها برای هر بخش که به وضوح بیانگر محتوای آن است.
مثال کد:

Section::make('اطلاعات حساب')
    ->schema([
        TextInput::make('username')->label('نام کاربری'),
        TextInput::make('email')->label('آدرس ایمیل'),
    ]);

Tabs (تب‌ها)

فیلد Tabs به شما این امکان را می‌دهد که فرم‌ها را در قالب تب‌ها (برگه‌ها) دسته‌بندی کنید. هر تب می‌تواند محتوای خاصی را نشان دهد و این امر کمک می‌کند که فرم‌ها برای کاربران ساده‌تر و کم حجم‌تر شوند. این روش به ویژه برای فرم‌های طولانی و پیچیده که نیاز به وارد کردن اطلاعات مختلف دارند، بسیار مفید است. برای مثال، می‌توانید برای اطلاعات شخصی، اطلاعات تماس، و تنظیمات حساب از تب‌های مختلف استفاده کنید.

مزایا:

قابلیت دسته‌بندی محتوای فرم به تب‌های مختلف.
کاهش پیچیدگی فرم‌های بزرگ.
امکان مشاهده فقط یک بخش از فرم در هر زمان.
مثال کد:

Tabs::make('دسته‌بندی فرم')
    ->tabs([
        Tab::make('اطلاعات شخصی')->schema([
            TextInput::make('first_name')->label('نام'),
            TextInput::make('last_name')->label('نام خانوادگی'),
        ]),
        Tab::make('تنظیمات')->schema([
            TextInput::make('timezone')->label('منطقه زمانی'),
        ])
    ]);

Grid (جداول شبکه‌ای)

فیلد Grid به شما کمک می‌کند که فیلدها را در قالب یک شبکه‌بندی (Grid Layout) نمایش دهید. این ویژگی به شما این امکان را می‌دهد که فیلدها را در چندین ستون قرار دهید و به طراحی فرم‌های با چیدمان پیچیده و کاربرپسند کمک می‌کند. با استفاده از Grid، شما می‌توانید فرم‌ها را به صورت چند ستونه طراحی کنید تا فضای صفحه به شکل بهینه‌تری استفاده شود.

مزایا:

طراحی چند ستونه برای بهینه‌سازی فضا.
کاربرپسندی بیشتر با نمایش فیلدها در ستون‌های مختلف.
امکان تعیین تعداد ستون‌ها برای سفارشی‌سازی چیدمان.
مثال کد:

Grid::make(2) // دو ستون
    ->schema([
        TextInput::make('first_name')->label('نام'),
        TextInput::make('last_name')->label('نام خانوادگی'),
    ]);

 

Card (کارت محتوایی)

فیلد Card به شما این امکان را می‌دهد که فیلدهای فرم را در قالب یک کارت محتوایی قرار دهید. کارت‌ها به طور کلی برای گروه‌بندی اطلاعات به شیوه‌ای متمایز و زیبا استفاده می‌شوند. این روش به ویژه برای فرم‌هایی که نیاز به دسته‌بندی و تفکیک واضح دارند، مناسب است. به طور معمول، کارت‌ها به طور عمودی یا افقی قرار می‌گیرند و فیلدهای مرتبط را در داخل خود قرار می‌دهند.

مزایا:

تفکیک اطلاعات در کارت‌های جداگانه برای زیبایی و سازمان‌دهی بهتر.
مناسب برای فرم‌های پیچیده یا آن‌هایی که نیاز به دسته‌بندی دارند.
طراحی واضح و خوانا برای کاربران.
مثال کد:

Card::make()
    ->schema([
        TextInput::make('email')->label('آدرس ایمیل'),
        Password::make('password')->label('رمز عبور'),
    ]);

 

Fieldset (گروه‌بندی فیلدها)

فیلد Fieldset به شما این امکان را می‌دهد که فیلدهای مرتبط را در یک گروه قرار دهید. این گروه‌بندی می‌تواند با یک عنوان همراه باشد که به کاربر کمک می‌کند تا راحت‌تر فرم را پر کند. استفاده از Fieldset در فرم‌های پیچیده‌ای که شامل فیلدهای مختلف است، به شما این امکان را می‌دهد که بخش‌های مختلف فرم را به صورت منطقی و به راحتی گروه‌بندی کنید.

مزایا:

دسته‌بندی فیلدها به گروه‌های منطقی.
افزودن عنوان برای هر گروه که به راحتی کاربر را راهنمایی کند.
جلوگیری از اشتباهات وارد کردن داده‌ها.
مثال کد:

Fieldset::make('اطلاعات شخصی')
    ->schema([
        TextInput::make('name')->label('نام'),
        TextInput::make('email')->label('آدرس ایمیل'),
    ]);

Columns (ستون‌بندی)

فیلد Columns به شما کمک می‌کند تا فیلدها را در قالب چندین ستون در فرم نمایش دهید. این ویژگی به شما این امکان را می‌دهد که چیدمان فرم را به صورت ستونی انجام دهید، که باعث می‌شود فضای صفحه بهینه‌تر استفاده شود. استفاده از ستون‌ها کمک می‌کند تا فرم‌ها برای کاربران راحت‌تر و سریع‌تر پر شوند، زیرا همه فیلدها در یک نگاه قابل مشاهده هستند.

مزایا:

طراحی بهینه فرم‌ها با استفاده از ستون‌ها.
استفاده بهینه از فضای صفحه.
نمایش فیلدها در چندین ستون برای زیبایی و کارایی بیشتر.
مثال کد:

Columns::make(2) // دو ستون
    ->schema([
        TextInput::make('first_name')->label('نام'),
        TextInput::make('last_name')->label('نام خانوادگی'),
    ]);

Group (گروه فیلدها)

فیلد Group به شما این امکان را می‌دهد که چندین فیلد را در یک گروه قرار دهید. این ویژگی به ویژه زمانی مفید است که شما نیاز به ایجاد فرم‌های پیچیده دارید که شامل چندین فیلد مختلف است. گروه‌بندی فیلدها در یک دسته‌بندی مشترک باعث می‌شود که فرم‌ها ساختار بهتری پیدا کنند و برای کاربران راحت‌تر باشند.

مزایا:

گروه‌بندی فیلدهای مرتبط.
راحت‌تر شدن فرآیند پر کردن فرم برای کاربران.
استفاده از گروه‌ها برای مرتب‌سازی داده‌ها.
مثال کد:

Group::make([
    TextInput::make('username')->label('نام کاربری'),
    Password::make('password')->label('رمز عبور'),
]);

این اجزا کمک می‌کنند که فرم‌های پیچیده به صورت منظم و ساختارمند نمایش داده شوند، که باعث افزایش تجربه کاربری و سادگی در استفاده می‌شود. با استفاده از این ابزارها، می‌توانید فرم‌ها را به شیوه‌ای که متناسب با نیازهای خاص شما باشد طراحی کنید.

فیلدهای رسانه (Media Fields)

فیلدهای رسانه در Filament ابزارهایی بسیار قدرتمند و کاربرپسند برای تعامل با انواع رسانه‌ها (فایل‌ها و تصاویر) در فرم‌ها فراهم می‌آورند. این فیلدها به شما این امکان را می‌دهند که فایل‌ها و رسانه‌های مختلف را از کاربران دریافت کرده و آن‌ها را به‌راحتی ذخیره، مدیریت و نمایش دهید. در ادامه توضیحات بیشتری درباره ویژگی‌ها، کاربردها و امکانات هر یک از این فیلدها آورده شده است.

 FileUpload (آپلود فایل)

فیلد FileUpload یکی از مهم‌ترین فیلدهای رسانه‌ای است که امکان بارگذاری فایل‌ها از دستگاه کاربر به سرور را فراهم می‌کند. این فیلد می‌تواند برای بارگذاری هر نوع فایل مورد استفاده قرار گیرد، از جمله فایل‌های متنی (TXT، PDF، Word)، تصاویر (JPG، PNG)، اسناد (Excel، PowerPoint)، و حتی فایل‌های فشرده (ZIP، RAR).

ویژگی‌ها و قابلیت‌ها:

پشتیبانی از انواع مختلف فایل‌ها: این فیلد می‌تواند هر نوع فایل را بپذیرد، بنابراین برای انواع فرم‌ها و نیازهای مختلف بسیار مناسب است. همچنین، می‌توانید از ویژگی acceptedFileTypes استفاده کنید تا فقط انواع خاصی از فایل‌ها را بپذیرید.
اعتبارسنجی و محدودیت‌ها: امکان محدود کردن اندازه فایل‌ها، تعداد فایل‌های آپلودی و نوع فایل‌ها برای اطمینان از بارگذاری فایل‌های مناسب.
بارگذاری چندگانه: این فیلد از بارگذاری چندین فایل به طور همزمان پشتیبانی می‌کند. به این ترتیب کاربران می‌توانند چندین فایل را به صورت همزمان بارگذاری کنند.
امکان نمایش وضعیت بارگذاری: هنگام بارگذاری فایل‌ها، می‌توانید وضعیت بارگذاری را به صورت بصری نشان دهید که به کاربران کمک می‌کند از وضعیت فرایند آگاه شوند.
انتقال سریع داده‌ها: در صورتی که به اینترنت پرسرعت دسترسی داشته باشید، بارگذاری فایل‌ها به‌صورت آنلاین به سرعت انجام می‌شود.
مثال کد:

FileUpload::make('document')
    ->label('بارگذاری فایل')
    ->acceptedFileTypes(['application/pdf', 'image/*'])  // فقط فایل‌های PDF و تصاویر
    ->maxSize(10240) // اندازه حداکثر 10MB
    ->helperText('فقط فایل‌های PDF و تصاویر مجاز هستند.');

مزایا:

اطمینان از بارگذاری فایل‌های با فرمت‌های مشخص.
امکان بارگذاری سریع و کارآمد با قابلیت نمایش وضعیت.
پشتیبانی از انواع مختلف فایل‌ها.

ImageUpload (آپلود تصویر)

فیلد ImageUpload به طور خاص برای بارگذاری تصاویر طراحی شده است و معمولاً در فرم‌هایی که نیاز به بارگذاری تصاویر دارند، مانند پروفایل‌های کاربری، گالری‌های تصویری، فرم‌های آپلود محصول و غیره استفاده می‌شود. این فیلد علاوه بر دریافت تصاویر، قابلیت نمایش پیش‌نمایش تصویر به کاربر را نیز فراهم می‌آورد.

ویژگی‌ها و قابلیت‌ها:

پشتیبانی از فرمت‌های تصویری مختلف: فیلد ImageUpload از انواع مختلف فرمت‌های تصویری نظیر JPEG, PNG, GIF, WEBP و غیره پشتیبانی می‌کند.
نمایش پیش‌نمایش تصویر: این فیلد به طور خودکار یک پیش‌نمایش از تصویر بارگذاری‌شده را به کاربر نمایش می‌دهد، که به او کمک می‌کند تا قبل از ارسال تصویر، آن را بررسی کند.
اعتبارسنجی تصویر: می‌توانید محدودیت‌هایی مانند اندازه تصویر (مثلاً حداکثر 5MB) یا نوع تصویر (تنها تصاویر PNG یا JPG) را اعمال کنید.
ابزار ویرایش تصویر: در برخی پیاده‌سازی‌ها، می‌توانید از امکانات ویرایش تصویر مانند برش، چرخاندن یا تغییر اندازه استفاده کنید.
مثال کد:

ImageUpload::make('profile_picture')
    ->label('تصویر پروفایل')
    ->image()  // فقط تصاویر مجاز
    ->maxSize(5120)  // محدود کردن اندازه به 5MB
    ->helperText('تصاویر فقط باید با فرمت JPG یا PNG باشند.');

مزایا:

مناسب برای فرم‌هایی که نیاز به بارگذاری تصاویر دارند (مانند پروفایل‌ها، گالری‌ها و محصولات).
امکان پیش‌نمایش تصویر قبل از ارسال.
اعتبارسنجی فایل‌ها برای جلوگیری از بارگذاری تصاویر نامناسب.

SpatieMediaLibraryFileUpload (یکپارچه با Spatie Media Library)

فیلد SpatieMediaLibraryFileUpload به طور یکپارچه با پکیج Spatie Media Library در Laravel عمل می‌کند. این پکیج به شما کمک می‌کند که فایل‌ها و رسانه‌ها را در پایگاه‌داده ذخیره و مدیریت کنید و امکانات پیشرفته‌ای مانند مدیریت فایل‌ها، تبدیل تصاویر، ذخیره‌سازی در پوشه‌های مختلف و حتی امکان دسترسی به رسانه‌ها از طریق API را فراهم می‌آورد.

ویژگی‌ها و قابلیت‌ها:

یکپارچگی با Spatie Media Library: این فیلد به طور مستقیم با پکیج Spatie Media Library یکپارچه است. شما می‌توانید فایل‌ها و تصاویر را در Media Library ذخیره کنید و به راحتی مدیریت کنید.
مدیریت پیشرفته رسانه‌ها: این پکیج به شما امکان مدیریت و دسته‌بندی رسانه‌ها (تصاویر، ویدئوها، فایل‌ها) را به طور مؤثر می‌دهد. علاوه بر این، می‌توانید نسخه‌های مختلف از تصاویر (برای مثال، اندازه‌های مختلف) را ایجاد و ذخیره کنید.
پشتیبانی از تبدیل تصویر: این پکیج به طور خودکار قادر به تبدیل تصاویر به فرمت‌های مختلف یا تغییر اندازه آن‌ها برای استفاده در بخش‌های مختلف سایت است.
دستگاه‌های ذخیره‌سازی چندگانه: از قابلیت ذخیره‌سازی رسانه‌ها در سیستم‌های مختلف مانند Amazon S3، Cloudinary و سایر سیستم‌های ذخیره‌سازی ابری پشتیبانی می‌کند.
مثال کد:

SpatieMediaLibraryFileUpload::make('photo')
    ->label('تصویر')
    ->collection('profile_pictures')  // ذخیره تصاویر در یک مجموعه خاص
    ->acceptedFileTypes(['image/*'])  // فقط فایل‌های تصویری مجاز
    ->maxSize(10240); // حداکثر اندازه فایل 10MB

مزایا:

یکپارچگی کامل با پکیج Spatie Media Library.
مدیریت پیشرفته رسانه‌ها و فایل‌ها.
پشتیبانی از ذخیره‌سازی در پلتفرم‌های ابری و سیستم‌های ذخیره‌سازی مختلف.

فیلدهای رسانه در Filament ابزارهای قدرتمند و کاربرپسند هستند که به شما این امکان را می‌دهند تا به راحتی انواع فایل‌ها و تصاویر را از کاربران دریافت کنید و آن‌ها را به‌طور مؤثر مدیریت کنید. هر یک از این فیلدها ویژگی‌های خاص خود را دارند و می‌توانید بسته به نیاز پروژه‌تان، از آن‌ها برای بارگذاری و مدیریت رسانه‌ها در فرم‌ها استفاده کنید. از بارگذاری فایل‌های متنی گرفته تا تصاویر و فایل‌های چندرسانه‌ای، Filament امکانات گسترده‌ای برای رفع نیازهای مختلف شما فراهم کرده است.

اعتبارسنجی (Validation)

در Filament، سیستم اعتبارسنجی به شما این امکان را می‌دهد تا اطمینان حاصل کنید که داده‌های وارد شده در فرم‌ها دقیق، کامل و معتبر هستند. اعتبارسنجی داده‌ها یکی از مهم‌ترین قسمت‌های توسعه فرم‌هاست، زیرا به شما کمک می‌کند از ورود داده‌های نادرست یا غیرمنتظره جلوگیری کنید و تجربه کاربری بهتری برای کاربران فراهم نمایید. در اینجا به جزئیات روش‌ها و ویژگی‌های مختلف اعتبارسنجی در Filament پرداخته‌ایم.

 قوانین اعتبارسنجی پیشرفته

در Filament، می‌توانید از قوانین اعتبارسنجی پیشرفته و انعطاف‌پذیر برای فیلدهای مختلف استفاده کنید. این قوانین می‌توانند به شما کمک کنند تا از ورود داده‌های نامعتبر جلوگیری کنید، برای مثال از وارد کردن ایمیل نادرست، شماره تلفن اشتباه یا اطلاعات در قالبی غیر از آنچه که انتظار دارید.

ویژگی‌ها و قابلیت‌ها:

الزامی بودن (Required): می‌توانید یک فیلد را الزامی کرده و به کاربر اعلام کنید که نمی‌تواند آن را خالی بگذارد.
نوع داده‌ها: اعتبارسنجی داده‌ها بر اساس نوع آن‌ها، مانند ایمیل، شماره تلفن، تاریخ و غیره.
الگوهای سفارشی (Regex): می‌توانید از عبارات منظم (Regex) برای بررسی قالب دقیق داده‌ها مانند کد پستی، شماره تلفن، یا حتی فرمت تاریخ استفاده کنید.
محدودیت‌های طولی (Min/Max Length): برای هر فیلد می‌توانید طول ورودی را محدود کنید تا از وارد کردن داده‌های خیلی کوتاه یا خیلی طولانی جلوگیری شود.
اعتبارسنجی خاص: علاوه بر قوانین استاندارد، امکان ایجاد قوانین اختصاصی خودتان نیز وجود دارد. به عنوان مثال، می‌توانید بررسی کنید که یک فیلد حاوی اطلاعات خاصی باشد (مثلاً شماره کارت اعتباری معتبر).
مثال کد:

TextInput::make('email')
    ->required()          // الزامی بودن فیلد
    ->email()             // بررسی صحت فرمت ایمیل
    ->maxLength(255)      // محدودیت طول ورودی به ۲۵۵ کاراکتر
    ->label('آدرس ایمیل');

در این مثال، فیلد ایمیل الزامی است و همچنین بررسی می‌شود که ورودی یک آدرس ایمیل معتبر باشد و طول آن بیش از ۲۵۵ کاراکتر نباشد. این قوانین به کاربر کمک می‌کنند تا فرم را به درستی پر کند و از وارد کردن اطلاعات اشتباه جلوگیری شود.

پیام‌های سفارشی خطا

در Filament، می‌توانید پیام‌های خطا را به‌طور کامل سفارشی کنید. این ویژگی امکان نمایش پیام‌های خطای واضح و مفهومی را فراهم می‌کند که کاربران بتوانند سریعاً مشکل خود را شناسایی کرده و آن را اصلاح کنند. پیام‌های خطای سفارشی معمولاً شامل توضیحات دقیق‌تری هستند که به کاربر کمک می‌کنند تا علت اشتباه خود را درک کنند و نحوه اصلاح آن را بدانند.

ویژگی‌ها و قابلیت‌ها:

پیام‌های خطای اختصاصی: شما می‌توانید برای هر قانون اعتبارسنجی یک پیام خطای خاص و اختصاصی ایجاد کنید.
راهنمایی به کاربر: پیام‌ها می‌توانند شامل اطلاعات بیشتری باشند، مثلاً درصورتی‌که یک ایمیل معتبر وارد نشده باشد، می‌توانید توضیح دهید که «لطفاً از یک آدرس ایمیل معتبر استفاده کنید.»
متن‌های راهنما (Help Text): علاوه بر پیام‌های خطا، می‌توانید متن‌های کمکی برای فیلدها قرار دهید که به کاربر کمک کند تا درست‌تر و سریع‌تر فرم را پر کند.
مثال کد:

TextInput::make('email')
    ->required()          // الزامی بودن فیلد
    ->email()             // بررسی فرمت ایمیل
    ->label('آدرس ایمیل')
    ->help('لطفاً آدرس ایمیل معتبر وارد کنید.')  // راهنمایی برای کاربر
    ->errorMessage('آدرس ایمیل وارد شده معتبر نیست. لطفاً دوباره بررسی کنید.');  // پیام خطای سفارشی

در این مثال، پیام خطای سفارشی به کاربر نشان می‌دهد که آدرس ایمیل وارد شده معتبر نیست و باید دوباره آن را بررسی کند. علاوه بر آن، پیام کمکی برای کمک به کاربر نیز اضافه شده است.

مزایای پیام‌های سفارشی خطا:

ارائه پیام‌های واضح و قابل فهم به کاربر.
کمک به کاربران برای اصلاح خطاها و رفع مشکلات به‌صورت سریع‌تر و راحت‌تر.
امکان تنظیم پیام‌های خطا به زبان محلی یا زبان‌های مختلف.

اعتبارسنجی وابسته به فیلدها

در برخی از مواقع، اعتبارسنجی‌ها باید وابسته به انتخاب‌های قبلی کاربر باشند. به عبارت دیگر، اعتبارسنجی یک فیلد ممکن است بر اساسوضعیت یا مقدار فیلدهای دیگر متفاوت باشد. به‌عنوان‌مثال، ممکن است یک فیلد تنها زمانی که کاربر در فیلد دیگر وضعیت خاصی را انتخاب کرده باشد، الزامی شود.

ویژگی‌ها و قابلیت‌ها:

اعتبارسنجی پویا: می‌توانید اعتبارسنجی‌ها را به‌صورت داینامیک بر اساس مقادیر فیلدهای دیگر اعمال کنید. برای مثال، یک فیلد ممکن است فقط در صورتی الزامی باشد که فیلد دیگری مقدار خاصی را داشته باشد.
واکنش به تغییرات وضعیت فیلدها: با استفاده از ویژگی‌های واکنشی (reactive) می‌توانید اعتبارسنجی‌ها را به‌طور خودکار به‌روز کنید و تغییرات را به‌سرعت به فیلدهای دیگر منتقل کنید.
تخصیص مقادیر به فیلدها: امکان تنظیم مقادیر فیلدها به‌صورت خودکار زمانی که کاربر وضعیت خاصی را انتخاب می‌کند.
مثال کد:

Select::make('status')
    ->options(['active' => 'فعال', 'inactive' => 'غیرفعال'])
    ->reactive()  // امکان واکنش به تغییرات وضعیت
    ->afterStateUpdated(fn ($state, $set) => {
        if ($state === 'active') {
            $set('activation_date', now());  // در صورت انتخاب وضعیت "فعال"، تاریخ فعال‌سازی به تاریخ فعلی تنظیم می‌شود.
        }
    });

TextInput::make('activation_date')
    ->required(fn ($get) => $get('status') === 'active')  // الزامی بودن تاریخ فعال‌سازی فقط وقتی وضعیت "فعال" است
    ->label('تاریخ فعال‌سازی');

در این مثال، فیلد “تاریخ فعال‌سازی” تنها زمانی الزامی است که فیلد “وضعیت” مقدار “فعال” را انتخاب کرده باشد. این نوع اعتبارسنجی وابسته به فیلدها به شما این امکان را می‌دهد که فرم‌ها را دقیق‌تر و متناسب با انتخاب‌های کاربر طراحی کنید.

مزایای اعتبارسنجی وابسته به فیلدها:

ایجاد اعتبارسنجی‌های پویا که وابسته به انتخاب‌های کاربر هستند.
کاهش پیچیدگی فرم‌ها و فقط نمایش فیلدهای مورد نیاز به کاربر.
ایجاد تجربه کاربری بهتری با تنظیم فیلدهای مورد نیاز تنها زمانی که لازم است.

در Filament، اعتبارسنجی داده‌ها یکی از ویژگی‌های اساسی است که به شما این امکان را می‌دهد که اطلاعات ورودی کاربران را به‌طور مؤثر و دقیق بررسی کنید. با استفاده از قوانین اعتبارسنجی پیشرفته، پیام‌های خطای سفارشی و قابلیت اعتبارسنجی وابسته به فیلدها، می‌توانید فرم‌هایی بسازید که هم دقیق و هم کاربرپسند باشند. این ویژگی‌ها به شما کمک می‌کنند تا اطلاعات صحیح و مطابق با نیازهای سیستم را جمع‌آوری کرده و تجربه کاربری حرفه‌ای‌تر و موثرتری برای کاربران خود ایجاد کنید.

وابستگی فیلدها (Field Dependencies)

در هنگام طراحی فرم‌ها، گاهی اوقات نیاز داریم که رفتار یک فیلد وابسته به انتخاب یا ورودی فیلدهای دیگر باشد. این نوع وابستگی‌ها به‌ویژه در فرم‌های پیچیده کاربرد دارند، زیرا می‌توانند تجربه کاربری بهتری ایجاد کنند و تنها فیلدهای مورد نیاز را به کاربر نشان دهند. در این بخش، به بررسی انواع وابستگی‌های فیلدها در Filament خواهیم پرداخت.

 نمایش/پنهان کردن فیلدها بر اساس شرایط

یکی از معمول‌ترین سناریوهای وابستگی فیلدها، نمایش یا پنهان کردن فیلدها بر اساس وضعیت فیلدهای دیگر است. این ویژگی به شما امکان می‌دهد که فقط فیلدهای مرتبط با شرایط فعلی فرم را به کاربر نشان دهید و فیلدهای غیرضروری را پنهان کنید. این کار نه‌تنها باعث ساده‌تر شدن فرم می‌شود، بلکه باعث می‌شود که کاربر احساس سردرگمی نکند و فقط اطلاعاتی را وارد کند که برای او یا فرم مورد نیاز است.

ویژگی‌ها و قابلیت‌ها:

نمایش فیلدها به صورت داینامیک: با استفاده از شرایط، می‌توانید فیلدهایی را که برای تکمیل فرم ضروری هستند، نمایش دهید.
پنهان کردن فیلدها: فیلدهایی که در شرایط خاص نیاز نیستند، می‌توانند پنهان شوند تا فرم ساده و مرتب باقی بماند.
شرطی بودن وابسته به فیلدهای دیگر: به‌طور مثال، اگر فیلد «وضعیت» بر روی «فعال» باشد، فیلد «تاریخ فعال‌سازی» نمایش داده می‌شود، در غیر این صورت، پنهان می‌شود.
مثال کد:

TextInput::make('email')
    ->hidden(fn ($get) => $get('status') === 'inactive')  // پنهان کردن فیلد email زمانی که فیلد status برابر با "inactive" باشد
    ->label('آدرس ایمیل');

در این مثال، فیلد Email تنها زمانی نمایش داده می‌شود که وضعیت فیلد Status به مقدار inactive نباشد. این ویژگی می‌تواند برای فرم‌هایی که در آن‌ها فیلدهای خاصی به وابستگی به انتخاب‌های قبلی کاربر نمایش داده می‌شوند، بسیار مفید باشد.

مزایای این ویژگی:

سادگی فرم‌ها: تنها فیلدهای ضروری به کاربر نمایش داده می‌شود، که باعث می‌شود فرم‌ها ساده‌تر و کمتر شلوغ به نظر برسند.
کاهش اشتباهات: از آنجایی که فقط فیلدهای مرتبط به کاربر نشان داده می‌شوند، احتمال وارد کردن داده‌های نادرست کاهش می‌یابد.
بهینه‌سازی تجربه کاربری: کاربر تنها فیلدهایی را مشاهده می‌کند که به انتخاب‌های قبلی‌اش بستگی دارند و این امر باعث می‌شود فرم‌ها برای کاربر راحت‌تر و سریع‌تر پر شوند.

تغییر مقادیر پیش‌فرض بر اساس فیلدهای دیگر

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

در Filament، شما می‌توانید این تغییرات مقادیر پیش‌فرض را به‌صورت داینامیک بر اساس فیلدهای دیگر اعمال کنید. این قابلیت به شما کمک می‌کند تا فرم‌های خود را هوشمندتر و انعطاف‌پذیرتر بسازید.

ویژگی‌ها و قابلیت‌ها:

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

Select::make('status')
    ->options(['active' => 'فعال', 'inactive' => 'غیرفعال'])
    ->default(fn ($get) => $get('status') === 'active' ? 'فعال' : 'غیرفعال')  // تنظیم مقدار پیش‌فرض بر اساس وضعیت قبلی
    ->label('وضعیت');

در این مثال، مقدار پیش‌فرض فیلد Status به‌صورت داینامیک بر اساس وضعیت فیلد status تنظیم می‌شود. اگر کاربر وضعیت را به «فعال» تغییر دهد، مقدار پیش‌فرض برای فیلد status «فعال» خواهد بود و اگر «غیرفعال» باشد، مقدار پیش‌فرض «غیرفعال» خواهد بود.

مزایای این ویژگی:

سادگی برای کاربر: کاربر مجبور نیست مقادیر پیش‌فرض را وارد کند، زیرا بر اساس شرایط فرم به‌طور خودکار تنظیم می‌شود.
تجربه کاربری بهتر: تغییرات هوشمندانه مقادیر پیش‌فرض باعث می‌شود که فرم‌ها سریع‌تر تکمیل شوند.
کاهش خطای ورودی: به‌طور خودکار مقادیر پیش‌فرض تنظیم می‌شوند، بنابراین احتمال اشتباه در وارد کردن مقادیر کمتری وجود دارد.

اعمال قوانین اعتبارسنجی داینامیک بر اساس فیلدهای دیگر

در برخی موارد، ممکن است بخواهید قوانین اعتبارسنجی برای یک فیلد را بر اساس مقدار فیلدهای دیگر تغییر دهید. به‌عنوان‌مثال، اگر فیلد «وضعیت» برابر با «فعال» باشد، فیلد «تاریخ فعال‌سازی» ممکن است الزامی شود، در غیر این صورت، اعتبارسنجی آن غیرفعال شود.

این قابلیت به شما این امکان را می‌دهد که فرم‌هایی بسازید که اعتبارسنجی آن‌ها به‌طور پویا و داینامیک تغییر می‌کند و کاملاً به وضعیت فیلدهای دیگر بستگی دارد.

مثال کد:

TextInput::make('activation_date')
    ->required(fn ($get) => $get('status') === 'active')  // اعتبارسنجی برای تاریخ فعال‌سازی تنها زمانی که وضعیت "فعال" است
    ->label('تاریخ فعال‌سازی');

در این مثال، فیلد تاریخ فعال‌سازی تنها زمانی الزامی است که فیلد وضعیت مقدار «فعال» را داشته باشد. در غیر این صورت، اعتبارسنجی این فیلد غیرفعال می‌شود.

استفاده از وابستگی فیلدها در Filament به شما کمک می‌کند تا فرم‌هایی بسازید که به‌طور هوشمند و داینامیک به رفتار کاربر واکنش نشان دهند. این ویژگی‌ها به شما این امکان را می‌دهند که فیلدها را بر اساس شرایط خاص نشان دهید، مقادیر پیش‌فرض را به‌صورت خودکار تنظیم کنید و اعتبارسنجی‌ها را به‌طور داینامیک تغییر دهید. در نتیجه، تجربه کاربری بهتری خواهید داشت و فرم‌ها به‌صورت مؤثرتری طراحی خواهند شد.

کامپوننت‌های سفارشی (Custom Components)

در سیستم‌های مدیریت محتوا و فرم‌سازی مدرن، گاهی اوقات نیاز است که ویژگی‌هایی خاص و منحصربه‌فرد به فرم‌ها اضافه کنیم که نمی‌توانند به‌طور ساده با استفاده از فیلدهای پیش‌ساخته موجود انجام شوند. Filament به شما این امکان را می‌دهد که با ایجاد کامپوننت‌های سفارشی، قابلیت‌های خاصی را به فرم‌های خود اضافه کنید. این کامپوننت‌ها می‌توانند شامل فیلدهای جدید، ابزارهای واسط کاربری پیشرفته، یا تعاملات داینامیک با سایر بخش‌های فرم باشند.

کامپوننت‌های سفارشی به شما اجازه می‌دهند که طراحی و عملکرد فرم‌ها را دقیقاً مطابق با نیازهای پروژه خود تنظیم کنید. در این بخش به بررسی روش‌های ایجاد و استفاده از کامپوننت‌های سفارشی در Filament خواهیم پرداخت.

 ایجاد فیلدهای سفارشی

یکی از مزایای بزرگ Filament این است که به شما اجازه می‌دهد فیلدهای فرم سفارشی ایجاد کنید. این فیلدها می‌توانند به‌طور کامل از ابتدا طراحی شوند و رفتارهایی خاص مطابق با نیازهای پروژه داشته باشند. برای ایجاد فیلد سفارشی، می‌توانید از کلاس‌های سفارشی استفاده کنید که ویژگی‌ها و رفتارهای مورد نظر شما را پیاده‌سازی می‌کنند.

ویژگی‌ها و قابلیت‌ها:

ایجاد فیلدهای کاملاً جدید: با استفاده از کد PHP و Livewire می‌توانید فیلدهایی با ویژگی‌ها و تعاملات خاص طراحی کنید.
ترکیب فیلدهای سفارشی با فیلدهای استاندارد: شما می‌توانید فیلدهای سفارشی را در کنار فیلدهای پیش‌ساخته مانند TextInput، Select و غیره استفاده کنید.
پشتیبانی از اعتبارسنجی: فیلدهای سفارشی همچنان می‌توانند از قوانین اعتبارسنجی پیشرفته بهره‌مند شوند و می‌توانند در فرآیند ارسال فرم قرار بگیرند.
مثال کد:

CustomComponent::make('custom_field')
    ->label('فیلد سفارشی')
    ->default('مقدار پیش‌فرض')
    ->help('این یک فیلد سفارشی است.');

در این مثال، فیلد CustomComponent ایجاد شده که دارای ویژگی‌های پایه‌ای مثل label، default (مقدار پیش‌فرض) و help (کمک) است. این فیلد سفارشی می‌تواند هر نوع ویژگی و رفتار دیگری داشته باشد که نیازهای شما را برآورده کند.

مزایای استفاده از فیلدهای سفارشی:

انعطاف‌پذیری بالا: می‌توانید هر نوع فیلدی که نیاز دارید ایجاد کنید، مثلاً فیلدهایی که به داده‌ها محاسبات خاصی انجام می‌دهند یا ورودی‌های خاصی دارند.
تجربه کاربری بهینه: با طراحی فیلدهای سفارشی می‌توانید فرم‌هایی بسازید که دقیقاً با نیازهای کاربران و کاربردهای خاص پروژه سازگار هستند.
قابلیت استفاده مجدد: فیلدهای سفارشی می‌توانند به‌طور عمومی در پروژه استفاده شوند و قابلیت استفاده مجدد را فراهم کنند.

استفاده از کامپوننت‌های Livewire در فرم‌ها

Livewire یکی از ابزارهای اصلی در Filament برای ایجاد تعاملات داینامیک در صفحات وب است. با استفاده از Livewire، می‌توانید کامپوننت‌هایی بسازید که به‌طور داینامیک با تغییرات فرم تعامل داشته باشند. به‌عبارت‌دیگر، تغییرات در یک فیلد می‌تواند به‌طور خودکار به سایر فیلدها یا بخش‌های فرم منتقل شود، بدون اینکه نیاز به بارگذاری مجدد صفحه باشد.

این قابلیت به ویژه برای فرم‌هایی که نیاز به تعاملات پیچیده دارند (مانند فیلدهای وابسته، فیلدهای داینامیک و تعاملات با سرور) بسیار مفید است. در اینجا، شما می‌توانید به راحتی داده‌ها را به‌صورت زنده به‌روز کنید و بدون نیاز به بارگذاری مجدد صفحه، تجربه کاربری روان‌تری ارائه دهید.

ویژگی‌ها و قابلیت‌ها:

تعامل زنده با فرم‌ها: با Livewire، می‌توانید فرم‌ها و فیلدها را به‌صورت داینامیک و بدون نیاز به بارگذاری مجدد صفحه به‌روز کنید.
تعامل با سرور: با استفاده از Livewire می‌توانید داده‌ها را به سرور ارسال کنید و پاسخ‌ها را به‌طور زنده دریافت کنید.
پیاده‌سازی فیلدهای داینامیک: می‌توانید فیلدهایی بسازید که بر اساس ورودی‌های دیگر فیلدها به‌طور زنده تغییر کنند.
مثال کد:

Livewire::mount('form-component')->render();

در این مثال، کامپوننت Livewire به‌صورت داینامیک رندر می‌شود. این کامپوننت می‌تواند شامل فیلدهایی باشد که به‌طور زنده و تعاملی تغییر می‌کنند و کاربر می‌تواند فوراً بازخوردها را مشاهده کند.

مزایای استفاده از کامپوننت‌های Livewire:

تعاملات سریع: تمام تغییرات به‌طور زنده در فرم اعمال می‌شود، بدون نیاز به بارگذاری مجدد صفحه.
کاهش تاخیر: تعاملات با سرور در پس‌زمینه انجام می‌شود و کاربر می‌تواند فوراً نتایج را مشاهده کند.
آسانی در پیاده‌سازی: استفاده از Livewire در Filament بسیار ساده است و نیاز به کدنویسی پیچیده ندارد. تنها کافی است که کامپوننت‌های خود را طراحی کرده و آن‌ها را در فرم‌ها استفاده کنید.

استفاده از کامپوننت‌های سفارشی در Filament به شما این امکان را می‌دهد که فرم‌های خود را به‌طور کامل با نیازهای پروژه تنظیم کنید. با ایجاد فیلدهای سفارشی و استفاده از کامپوننت‌های Livewire می‌توانید تعاملات داینامیک و کاربرپسندی برای فرم‌های خود پیاده‌سازی کنید. این ویژگی‌ها به شما اجازه می‌دهند که فرم‌هایی پیچیده و با قابلیت‌های خاص ایجاد کنید که به‌طور کامل با نیازهای کاربران سازگار باشد و تجربه کاربری بهتری فراهم آورد.

یکپارچه‌سازی با پکیج‌ها (Integrations)

یکی از ویژگی‌های برجسته Filament توانایی یکپارچه‌سازی آسان و کارآمد با پکیج‌های خارجی است. این ویژگی به شما امکان می‌دهد که قابلیت‌های اضافی و پیشرفته‌تری به فرم‌ها و سایر اجزای پنل مدیریتی خود اضافه کنید. از آنجا که در دنیای توسعه وب، نیازهای خاص و سفارشی همیشه وجود دارد، توانایی اتصال به پکیج‌ها و ابزارهای دیگر، می‌تواند فرم‌ها و تجربه کاربری شما را بهبود بخشد. در این بخش، به بررسی چند پکیج معروف که می‌توانند به راحتی با Filament یکپارچه شوند، خواهیم پرداخت.

Select2

Select2 یک پکیج جاوااسکریپت است که برای ارتقاء قابلیت‌های لیست‌های انتخابی (dropdowns) استفاده می‌شود. این پکیج به شما این امکان را می‌دهد تا انتخاب‌هایی پیچیده‌تر و با امکانات بیشتری نسبت به selectهای استاندارد HTML داشته باشید. این امکانات شامل جستجوی درون‌متنی، قابلیت بارگذاری داده‌ها به‌طور دینامیک، و طراحی زیباتر و کاربرپسندتر است. استفاده از Select2 در Filament می‌تواند برای فرم‌هایی که نیاز به لیست‌های انتخابی طولانی و پیچیده دارند بسیار مفید باشد.

ویژگی‌ها و قابلیت‌ها:

جستجو در لیست‌ها: Select2 به کاربران این امکان را می‌دهد تا در لیست‌های انتخابی خود جستجو کنند، که برای فرم‌هایی با گزینه‌های زیاد و یا فیلدهای پیچیده بسیار مفید است.
بارگذاری داده به‌طور داینامیک: می‌توانید داده‌ها را به‌صورت دینامیک و از طریق API یا منابع خارجی بارگذاری کنید.
پشتیبانی از چندین انتخاب: به کاربران این امکان را می‌دهد تا چندین گزینه را به‌طور همزمان انتخاب کنند.
استفاده از آیکون‌ها و طراحی زیبا: طراحی‌های جذاب و آیکون‌ها به لیست‌های انتخابی شما ظاهری زیباتر و کاربردی‌تر می‌دهند.
مثال کد:

Select::make('category')
    ->options(function () {
        return Category::pluck('name', 'id');
    })
    ->searchable()
    ->label('دسته‌بندی')
    ->using(Select2::class);

در این مثال، فیلد Select برای انتخاب دسته‌بندی استفاده می‌شود که جستجو درون‌متنی را فعال کرده و از Select2 برای بهبود تجربه کاربری بهره می‌برد.

TinyMCE

TinyMCE یک ویرایشگر متن WYSIWYG (What You See Is What You Get) است که به کاربران این امکان را می‌دهد تا محتوا را به‌طور بصری و با استفاده از ابزارهای متنی و گرافیکی وارد کنند. این ویرایشگر به‌طور ویژه برای فیلدهایی مانند RichEditor که نیاز به ویرایش متنی پیشرفته دارند، طراحی شده است. TinyMCE قابلیت‌هایی مانند فونت‌ها، رنگ‌ها، لیست‌ها، لینک‌ها، و تصاویر را به کاربر می‌دهد تا به راحتی محتوای غنی و متنی خود را وارد کند.

ویژگی‌ها و قابلیت‌ها:

ویرایش بصری و آسان: ویرایشگر TinyMCE محیطی بصری برای ویرایش متن فراهم می‌آورد و به کاربران این امکان را می‌دهد که محتوا را به‌راحتی و بدون نیاز به نوشتن کد HTML وارد کنند.
پشتیبانی از انواع فرمت‌های متن: امکان افزودن متن بولد، ایتالیک، لینک، لیست‌های مرتب و نامرتب، جداول و تصاویر.
مدیریت تصاویر و رسانه‌ها: این ویرایشگر قابلیت بارگذاری و نمایش تصاویر و رسانه‌ها را نیز دارد.
سفارشی‌سازی: می‌توانید نوار ابزارهای ویرایشگر را به دلخواه خود سفارشی‌سازی کنید تا فقط ابزارهای مورد نیاز نمایش داده شوند.
مثال کد:

RichEditor::make('content')
    ->label('محتوا')
    ->toolbar([
        'bold', 'italic', 'underline', 'link', 'image'
    ])
    ->using(TinyMCE::class);

در این مثال، ویرایشگر RichEditor به فیلد content اضافه شده و از TinyMCE برای ویرایش متن استفاده می‌کند. ابزارهایی مانند bold، italic، underline و تصویر در نوار ابزار فعال شده است.

 Tiptap (برای RichEditor)

Tiptap یک ویرایشگر متن مدرن است که به‌طور ویژه برای ساختارهای ویرایشگرهای پیچیده‌تر طراحی شده است. برخلاف TinyMCE، که یک ویرایشگر آماده است، Tiptap به شما این امکان را می‌دهد که ویرایشگر خود را به‌طور کامل سفارشی کنید. این ویرایشگر از ProseMirror به عنوان هسته استفاده می‌کند که برای ویرایش متن‌های ساختاریافته و پیچیده طراحی شده است.

ویژگی‌ها و قابلیت‌ها:

سفارشی‌سازی کامل: شما می‌توانید تمامی ویژگی‌ها و رفتارهای ویرایشگر را تغییر دهید و ویژگی‌های جدیدی را اضافه کنید.
مدرن و قدرتمند: Tiptap مدرن‌تر از ویرایشگرهای قدیمی‌تر مانند TinyMCE است و پشتیبانی بسیار بهتری از ویژگی‌های جدید مانند کدگذاری HTML و پشتیبانی از ساختارهای پیچیده دارد.
تعامل داینامیک: Tiptap قابلیت‌های تعاملی بیشتری ارائه می‌دهد که می‌توانند به شما کمک کنند تا تجربه‌های کاربری بهتری بسازید.
پشتیبانی از افزونه‌ها: Tiptap به راحتی از افزونه‌ها پشتیبانی می‌کند که می‌توانند به ویرایشگر ویژگی‌های جدیدی مانند فرمت‌های خاص متن، ارجاع‌ها و غیره اضافه کنند.
مثال کد:

RichEditor::make('description')
    ->label('توضیحات')
    ->using(Tiptap::class);

در این مثال، فیلد RichEditor از Tiptap به عنوان ویرایشگر متن استفاده می‌کند. این انتخاب باعث می‌شود که ویرایشگر قدرتمندتر، مدرن‌تر و با امکانات پیشرفته‌تری برای ویرایش متن فراهم شود.

یکپارچه‌سازی با پکیج‌های مختلف در Filament به شما این امکان را می‌دهد که به راحتی قابلیت‌های پیشرفته‌ای به فرم‌ها و پروژه‌های خود اضافه کنید. Select2، TinyMCE و Tiptap هرکدام ابزارهای قدرتمند و منعطفی هستند که می‌توانند تجربه کاربری شما را بهبود بخشند و به شما امکان دهند تا فرم‌هایی با امکانات ویژه و تعاملات پیشرفته بسازید.

نتیجه‌گیری

در این مقاله، به بررسی ویژگی‌ها و قابلیت‌های Filament در طراحی فرم‌ها پرداختیم. این ابزار با ارائه امکانات متنوعی مانند فیلدهای مختلف ورودی، اجزای لایه‌بندی، قابلیت‌های اعتبارسنجی پیشرفته، و همچنین امکان یکپارچه‌سازی با پکیج‌های محبوب، به توسعه‌دهندگان این امکان را می‌دهد تا فرم‌های کاربرپسند و قدرتمند ایجاد کنند. علاوه بر این، Filament امکان استفاده از کامپوننت‌های سفارشی و تنظیمات پیشرفته را نیز فراهم می‌کند تا تجربه کاربری را به سطحی بالاتر ببرد.

اگر به دنبال ابزاری هستید که فرم‌ها و مدیریت داده‌ها را در پروژه‌های Laravel شما ساده‌تر و انعطاف‌پذیرتر کند، Filament گزینه‌ای مناسب است. از طریق قابلیت‌هایی همچون یکپارچه‌سازی با پکیج‌ها مانند Select2 و TinyMCE، می‌توانید فرم‌های پیچیده‌تری بسازید که به نیازهای خاص پروژه شما پاسخ دهند. با استفاده از این امکانات، می‌توانید فرآیند توسعه وب‌سایت‌های مدیریتی و فرم‌های پیچیده را به شکلی سریع‌تر و کارآمدتر به انجام رسانید.