SpatieTags

Tags field for Spatie Laravel Tags with auto search

Features

• auto search
• support for tag types
• save tags in different languages
• keyDown = space to add a tag. This is to avoid conflict with the default enter key to submit the form.
• Typing a comma separated string (without space) like; "Apple,Orange,Banana" will generate a tag for each word.

Requirements

• Requires Spatie Laravel Tags

Tested with:

• "spatie/laravel-tags": "^2.7.2|^3.0.2"
• "spatie/laravel-translatable": "^4.5.0|^4.6.0"
• php@7.4 and php@8.0

Default settings

• placeholder = "Add tag ..."
• rule = 'string|between:3,50'
• :attribute = 'tag'

Example

SpatieTags::make('Tags')
    ->type('categories')
    ->placeholder('Click to add tag ...') //default = "Add tag ..."
    ->suffix('user')
    ->help('Press SPACE to create a new tag, or SELECT an existing tag by CLICKING on it.')//we use space to avoid conflict with enter to submit form
    ->rules('string|between:3,60') //default: 'string|between:3,50'
    //example custom error message
    ->errorMsg('The tag must be between 3 to 60 chars long and only consist of alpha-numeric characters.') //default = :attribute is set to 'tag'

Saving/Syncing the tags

• If the $model->exists the package takes care of syncing the tags, you do not have to do anything.
• If the !$model->exists, does not exist The form component supplies a syncTags() method that you must add to the forms onCreateModel() method.
• If your form has multiple tag fields you must call the syncTags() method for each field.

syncTags($field, $tagType)

Example for an Article model with two tag fields

    public function onCreateModel($validated_data)
    {
        $this->model = User::create($validated_data); //the model must exist before the tags can be synced

        //You only need add the syncTags() if the model didn't exist when loading the form
        $this->syncTags('categories', 'article-category'); // this form has two tags fields
        $this->syncTags('tags', 'article-tag'); // you must call the syncTags for each field.
    }

Declaration WITHOUT tag type

SpatieTags::make('Tags')
    ->help('Press SPACE to create a new tag, or SELECT an existing tag by CLICKING on it.'),

Declaration WITH tag type

SpatieTags::make('Categories')
    ->type('article-category')
    ->help('Press SPACE to create a new tag, or SELECT an existing tag by CLICKING on it.'),

Declaration WITH tag type and tag type SUFFIX

• Important to note is that the suffix option in this example does not save the tags in any particular language.

SpatieTags::make('Swedish Categories', 'tags-sv')
    ->type('categories') 
    ->suffix('sv') //this will be saved with tag type "categories-sv"
    ->help('Press SPACE to create a new tag, or SELECT an existing tag by CLICKING on it.'),

SpatieTags::make('English Categories', 'tags-en')
    ->type('categories')
    ->suffix('en') //this will be saved with tag type "categories-en"
    ->help('Press SPACE to create a new tag, or SELECT an existing tag by CLICKING on it.'),

Translated tags

Spatie Laravel Tags uses Spatie Laravel Translatable. If you want to let the user create tags in a specific language you have to set the locale before each field is saved. It is handled automatically by this package, you only have to set the locale() in the field declaration.

SpatieTags::make('Swedish Categories', 'tags-sv')
    ->type('categories') 
    ->locale('sv')
    ->help('Press SPACE to create a new tag, or SELECT an existing tag by CLICKING on it.'),

SpatieTags::make('English Categories', 'tags-en')
    ->type('categories')
    ->locale('en')
    ->help('Press SPACE to create a new tag, or SELECT an existing tag by CLICKING on it.'),

Theme

    /* Tags */
    .tf-tags-color {
        @apply tf-bg-primary text-white;
    }
    .tf-tags-x-color {
        @apply text-gray-200;
    }

Options in config

//Spatie tags, search input error translation, applied as trans(...) or @lang(...)
'spatie-tags-search-error' => 'fields.tag_search_error',

SimpleTags field

• I am planning to make a simpleTags field, with tag styling that returns a comma-separated string value.