Slug Input

کامپوننت x-slug-input یک ورودی پیشرفته برای تولید و ویرایش اسلاگ (slug) در فرم‌ها است. این کامپوننت به طور خودکار مقدار اسلاگ را بر اساس مقدار یک فیلد والد (مانند عنوان) تولید می‌کند و امکانات متنوعی مانند تعیین جداکننده، حذف کلمات توقف، حذف اعداد، حالت فقط‌خواندنی، پیشوند و پسوند، پیام راهنما، پیام خطا و ... را ارائه می‌دهد.

ویژگی‌ها

تولید خودکار اسلاگ بر اساس مقدار یک فیلد والد (parent)
امکان تعیین جداکننده اسلاگ (separator)
حذف کلمات توقف (removeStopWords)
در صورت فعال بودن این گزینه، کلمات توقف زیر حذف می‌شوند:
["and", "a", "or", "the", "is", "in", "on", "at", "to"]
این قابلیت باعث می‌شود اسلاگ‌های تولیدشده کوتاه‌تر، خواناتر و مناسب‌تر برای SEO باشند.
حذف اعداد از اسلاگ (removeNumbers)
تعیین حالت تولید اسلاگ (mode: عادی یا حرفه‌ای)
پشتیبانی از پیشوند (prefix) و پسوند (suffix)
پشتیبانی از حالت فقط‌خواندنی (readonly)
پشتیبانی از پیام راهنما (hint)
نمایش پیام خطا و پیام‌های سفارشی با استایل‌های مختلف
امکان شخصی‌سازی کلاس‌های CSS برای خود و کانتینر
پشتیبانی از لیبل و فضای رزرو لیبل
نمایش پیام راهنما هنگام غیرفعال بودن (disabledTooltip)
پشتیبانی از مقدار اولیه (value)
کنترل فعال/غیرفعال بودن ورودی (disabled)
پشتیبانی از autocomplete

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

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
`name`	`string`	—	نام فیلد (اجباری)
`parentId`	`string`	—	شناسه فیلد والد (اجباری، معمولاً فیلد عنوان)
`label`	`string`	`null`	لیبل اصلی
`labelSpaceReserved`	`bool`	`false`	آیا فضای لیبل حتی بدون مقدار رزرو شود؟
`id`	`string`	`null`	شناسه یکتا برای ورودی
`placeholder`	`string`	`null`	placeholder برای ورودی
`class`	`string`	`null`	کلاس CSS سفارشی برای خود ورودی
`containerClass`	`string`	`null`	کلاس CSS سفارشی برای کانتینر
`value`	`string`	`null`	مقدار اولیه اسلاگ
`required`	`bool`	`false`	اجباری بودن فیلد
`readonly`	`bool`	`false`	فقط‌خواندنی بودن ورودی
`disabled`	`bool`	`false`	غیرفعال بودن ورودی
`defaultMessage`	`string`	`null`	پیام پیش‌فرض برای نمایش
`messageStyle`	`string`/`enum`	`"message"`	استایل نمایش پیام (message, tooltip, ...)
`defaultMessageType`	`string`/`enum`	`"info"`	نوع پیام پیش‌فرض (info, error, warning, ...)
`hint`	`string`	`null`	پیام راهنما یا توضیح کوتاه
`suppressLogicMessages`	`bool`	`false`	عدم نمایش پیام‌های منطقی
`autoComplete`	`bool`	`false`	فعال‌سازی autocomplete برای ورودی
`removeStopWords`	`bool`	`false`	حذف کلمات توقف از اسلاگ (کلمات توقف: `and`, `a`, `or`, `the`, `is`, `in`, `on`, `at`, `to`)
`removeNumbers`	`bool`	`false`	حذف اعداد از اسلاگ
`separator`	`string`	`"-"`	جداکننده بین کلمات اسلاگ (مثلاً `-` یا `_`)
`mode`	`string`	`"normal"`	حالت تولید اسلاگ (`normal` یا `advanced`)
`prefix`	`string`	`null`	پیشوند برای ورودی
`suffix`	`string`	`null`	پسوند برای ورودی
`disabledTooltip`	`string`	`null`	پیام راهنما هنگام غیرفعال بودن ورودی

مثال‌ها

نمونه پایه

<x-text-input
    container-class="col-md-6"
    id="slug-text-input"
    name="slug-text-input"
    label="درج عنوان"
    hint="لطفا عنوان مورد نظر را وارد کنید"
/>

<x-slug-input
    container-class="col-md-6"
    id="slug-input"
    name="slug-sample"
    label="درج اسلاگ"
    hint="لطفا اسلاگ مورد نظر را وارد کنید"
    parent-id="slug-text-input"
/>

ویژگی‌ها​

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

مثال‌ها​

نمونه پایه​

ویژگی‌ها

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

مثال‌ها

نمونه پایه