Tag Collector

کامپوننت x-tag-collector یک ورودی پیشرفته برای جمع‌آوری و مدیریت تگ‌ها (برچسب‌ها) در فرم‌ها است. این کامپوننت امکان افزودن، ویرایش و حذف تگ‌ها را با امکانات متنوعی مانند تعیین حداکثر تعداد، جلوگیری از تکرار، اعتبارسنجی مقدار، شخصی‌سازی فیلدهای عنوان و مقدار، تعیین پیشوند و پسوند، پیام راهنما، پیام خطا و ... فراهم می‌کند.

ویژگی‌ها

افزودن و حذف تگ‌ها به صورت داینامیک
تعیین حداکثر تعداد تگ (max)
جلوگیری از تکرار تگ‌ها (allowDuplicates)
اعتبارسنجی مقدار تگ با regex (regex)
شخصی‌سازی فیلد عنوان و مقدار هر تگ (labelFieldName, valueFieldName, labelFieldLabel, valueFieldLabel)
تعیین پیشوند و پسوند برای ورودی (prefix, suffix)
پشتیبانی از حالت فقط‌خواندنی (readonly)
پشتیبانی از پیام راهنما (hint)
نمایش پیام خطا و پیام‌های سفارشی با استایل‌های مختلف
امکان شخصی‌سازی کلاس‌های CSS برای خود و کانتینر
پشتیبانی از لیبل و فضای رزرو لیبل
نمایش پیام راهنما هنگام غیرفعال بودن (disabledTooltip)
پشتیبانی از مقدار اولیه (value یا values)
کنترل فعال/غیرفعال بودن ورودی (disabled)
پشتیبانی از autocomplete
قابلیت تعیین متن دکمه افزودن (buttonText)

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

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
`name`	`string`	—	نام فیلد (اجباری)
`label`	`string`	`null`	لیبل اصلی
`labelSpaceReserved`	`bool`	`false`	آیا فضای لیبل حتی بدون مقدار رزرو شود؟
`id`	`string`	`null`	شناسه یکتا برای ورودی
`placeholder`	`string`	`null`	placeholder برای ورودی
`class`	`string`	`null`	کلاس CSS سفارشی برای خود ورودی
`containerClass`	`string`	`null`	کلاس CSS سفارشی برای کانتینر
`itemClass`	`string`	`null`	کلاس CSS سفارشی برای آیتم‌ها
`value`	`string`	`null`	مقدار اولیه (در صورت تک مقدار)
`values`	`array`	`null`	آرایه مقادیر اولیه تگ‌ها
`required`	`bool`	`false`	اجباری بودن فیلد
`readonly`	`bool`	`false`	فقط‌خواندنی بودن ورودی
`disabled`	`bool`	`false`	غیرفعال بودن ورودی
`defaultMessage`	`string`	`null`	پیام پیش‌فرض برای نمایش
`messageStyle`	`string`/`enum`	`"message"`	استایل نمایش پیام (message, tooltip, ...)
`defaultMessageType`	`string`/`enum`	`"warning"`	نوع پیام پیش‌فرض (info, error, warning, ...)
`hint`	`string`	`null`	پیام راهنما یا توضیح کوتاه
`suppressLogicMessages`	`bool`	`false`	عدم نمایش پیام‌های منطقی
`autoComplete`	`bool`	`false`	فعال‌سازی autocomplete برای ورودی
`max`	`int`	`null`	حداکثر تعداد تگ مجاز
`prefix`	`string`	`null`	پیشوند برای ورودی
`suffix`	`string`	`null`	پسوند برای ورودی
`labelFieldLabel`	`string`	`"عنوان"`	لیبل فیلد عنوان تگ
`labelFieldName`	`string`	`"title"`	نام فیلد عنوان تگ
`valueFieldLabel`	`string`	`"مقدار"`	لیبل فیلد مقدار تگ
`valueFieldName`	`string`	`"value"`	نام فیلد مقدار تگ
`regex`	`string`	`null`	الگوی regex برای اعتبارسنجی مقدار تگ
`buttonText`	`string`	`"افزودن"`	متن دکمه افزودن
`allowDuplicates`	`bool`	`true`	اجازه تکرار تگ‌ها
`disabledTooltip`	`string`	`null`	پیام راهنما هنگام غیرفعال بودن ورودی

مثال‌ها

نمونه پایه

$value1 = [
    [
        'value' => 'نمونه اول',
        'example2' => 123,
    ],
    [
        'title' => 'نمونه دوم',
        'value' => 'مقدار نمونه دوم',
        'example3' => '2',
        'example4' => ['2'],
    ],
];

$selectItems = [
    [
        'id' => '1',
        'name' => 'تهران',
        'value' => '1',
        'selected' => false,
        'is_active' => true,
    ],
    [
        'id' => '2',
        'name' => 'مازندران',
        'value' => '2',
        'selected' => true,
        'is_active' => true,
    ],
    [
        'id' => '3',
        'name' => 'گلستان',
        'value' => '3',
        'selected' => false,
        'is_active' => true,
    ],
    [
        'id' => '4',
        'name' => 'خراسان رضوی',
        'value' => '4',
        'selected' => false,
        'is_active' => true,
    ],
];

$multiSelectItems = [
    [
        'id' => '1',
        'name' => 'تهران',
        'value' => '1',
        'selected' => false,
        'is_active' => true,
    ],
    [
        'id' => '2',
        'name' => 'مازندران',
        'value' => '2',
        'selected' => false,
        'is_active' => true,
    ],
    [
        'id' => '3',
        'name' => 'گلستان',
        'value' => '3',
        'selected' => false,
        'is_active' => true,
    ],
    [
        'id' => '4',
        'name' => 'خراسان رضوی',
        'value' => '4',
        'selected' => false,
        'is_active' => true,
    ],
];

<x-tag-collector
    label="منبع خبر"
    placeholder="تگ‌های مورد نظر را وارد کنید"
    prefix="تگ‌ها"
    suffix="URL"
    hint="برای ایجاد تگ‌ها از حروف انگلیسی استفاده کنید"
    name="tag_collector"
    max="3"
    label-field-max-length="10"
    :allow-duplicates="false"
    :values="$value1"
    label-field-container-class="col-md-6 -order-1"
    value-field-container-class="col-md-6 -order-4"
>
    <x-tag-collector.input
        label="نمونه اول"
        name="example"
        type="text"
        prefix="sample"
        label-suffix-slot="test"
        containerClass="col-md-6 -order-3"
    />

    <x-tag-collector.input label="نمونه دوم" name="example2" type="number" containerClass="col-md-6 -order-2" />

    <x-tag-collector.input label="نمونه سوم" name="example3" class="col-md-6" type="select" :items="$selectItems" />

    <x-tag-collector.input
        label="نمونه چهارم"
        name="example4"
        class="col-md-6"
        type="multiselect"
        :items="$multiSelectItems"
    />
</x-tag-collector>

ویژگی‌ها​

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

مثال‌ها​

نمونه پایه​

ویژگی‌ها

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

مثال‌ها

نمونه پایه