Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/leapt/slug-type-bundle
https://github.com/leapt/slug-type-bundle
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/leapt/slug-type-bundle
- Owner: leapt
- License: mit
- Created: 2023-02-17T13:59:29.000Z (almost 2 years ago)
- Default Branch: 1.x
- Last Pushed: 2024-05-22T21:22:52.000Z (7 months ago)
- Last Synced: 2024-05-22T21:45:43.166Z (7 months ago)
- Language: PHP
- Size: 278 KB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG-1.x.md
- License: LICENSE
Awesome Lists containing this project
README
# Leapt SlugType bundle
[](https://packagist.org/packages/leapt/slug-type-bundle)
[](https://github.com/leapt/slug-type-bundle/actions?query=workflow%3A%22Continuous+Integration%22)
[](LICENSE)
[](https://codecov.io/gh/leapt/slug-type-bundle/branch/1.x)
Leapt SlugType bundle makes a form field dynamically generate the slug based on the content of another text field.
## Requirements
- PHP ^8.2
- Symfony ^6.4 or ^7.0
- Webpack Encore & Stimulus bridge already present in your project
## Installation
```bash
composer require leapt/slug-type-bundle
# Don't forget to install the JavaScript dependencies as well and compile
npm install --force
npm run watch
# or use yarn
yarn install --force
yarn watch
```
Then, in your Twig configuration, add the form theme you want to apply:
```yaml
# config/packages/twig.yaml
twig:
form_themes:
- '@LeaptSlugType/bootstrap5_layout.html.twig'
```
There are currently 3 form themes available:
- `@LeaptSlugType/basic_layout.html.twig`
- `@LeaptSlugType/bootstrap4_layout.html.twig`
- `@LeaptSlugType/bootstrap5_layout.html.twig`
## Usage
In your form type, use the `SlugType` on the field that will handle the slug, and give it a `target` option that will be
used to generate the slug:
```php
add('name', TextType::class)
->add('slug', SlugType::class, [
'target' => 'name',
])
;
}
}
```
By default, for Bootstrap 4 & 5 themes, a `btn-secondary` class is applied to the lock button. You can change it
by using the `button_class` option for any form theme:
```php
$builder->add('slug', SlugType::class, [
'target' => 'name',
'button_class' => 'btn-warning',
]);
```
You can also customize the locked & unlocked icons. By default, it uses emojis, but if you use e.g. FontAwesome you can
override it:
```php
$builder->add('slug', SlugType::class, [
'target' => 'name',
'locked_icon' => '',
'unlocked_icon' => '',
]);
```
## Customizing the design
The bundle provides a default stylesheet in order to add a gray background to the readonly input.
You can disable it to add your own design if you wish.
In `assets/controllers.json`, disable the default stylesheet by switching the `@leapt/slug-type-bundle/dist/style.css`
autoimport to `false`:
```json
{
"controllers": {
"@leapt/slug-type-bundle": {
"slug": {
"enabled": true,
"fetch": "eager",
"autoimport": {
"@leapt/slug-type-bundle/dist/style.css": false
}
}
}
},
"entrypoints": []
}
```
Note: you should put the value to false and not remove the line so that Symfony Flex won't try to add the line again
in the future.
Once done, the default stylesheet won’t be used anymore, and you can implement your own CSS on top of the input.
## Contributing
Feel free to contribute, like sending [pull requests](https://github.com/leapt/slug-type-bundle/pulls) to add
features/tests or [creating issues](https://github.com/leapt/slug-type-bundle/issues) :)
Note there are a few helpers to maintain code quality, that you can run using these commands:
```bash
composer cs:dry # Code style check
composer cs:fix # Fix code style
composer phpstan # Static analysis
composer phpunit # Run tests
# Or run all cs:dry, phpstan & phpunit scripts using the following:
composer ci
```