jacksleight / statamic-miniset
Installs: 3 380
Dependents: 0
Suggesters: 0
Security: 0
Stars: 10
Watchers: 1
Forks: 2
Open Issues: 1
pkg:composer/jacksleight/statamic-miniset
Requires
- statamic/cms: ^4.0|^5.0
README
Miniset
Miniset allows you to create compact sets of fields that either combine into a string of classes, or return a simple array of values.
Miniset includes the following components:
- Miniset
A general purpose fieldtype for creating a compact set of fields that return a simple array of values. - Miniset Classes
A class specific fieldtype for creating a compact set of fields that combine into a string of classes, including variant options. Works great with Tailwind CSS.
Installation
You can search for this addon in the Tools > Addons section of the Statamic control panel and click install, or run the following command from your project root:
composer require jacksleight/statamic-miniset
Creating a Miniset Field
Create a Miniset field and add your nested fields. Miniset is intended for simple data (single or multiple scalar values) and only officially supports these nested fieldtypes:
- Select (inc. multiple)
- Button Group
- Checkboxes
- Radio
- Text
- Textarea
- Toggle
- Range
Other fieldtypes can be added but will not have a compact style.
Miniset returns a simple array of values which can either be output in its entirety, or individual values can be output by referencing their key:
{{ my_options | json }}
{{ my_options.theme }}
Creating a Miniset Classes Field
Create a Miniset Classes field and add your nested fields and variants. Miniset Classes only supports the following nested fieldtypes:
- Select (inc. multiple)
- Button Group
- Checkboxes
- Radio
- Text (not
jit_safecompatible) - Textarea (not
jit_safecompatible)
Other fieldtypes should not be added and may cause errors or unexpected results.
Variants will be offered as options when adding groups of fields. By default the variant keys will be prepended to the class value and seperated with a colon:
lg / w-32 --> lg:w-32
If you're not using this convention you can customize the behaviour by including an ampersand in your variant keys. The ampersand will be replaced with the class value when augmented:
&@large / width-half --> width-half@large
Miniset Classes will return a single string of classes that can be output in a class attribute:
<div class="{{ my_classes }}">
Using jit_safe mode with Tailwind
When using Tailwind the JIT compiler scans your content for classes, and this will need to include any classes that could be selected by users in the control panel. To simplify this process Miniset has a jit_safe mode. To enable this publish the config:
php please vendor:publish --tag=statamic-miniset-config
Then open config/statamic/miniset.php and set the jit_safe.enable option to true:
'jit_safe' => [ 'enable' => true, 'file' => resource_path('css/statamic/miniset_classes.yaml'), ],
Once enabled Miniset will scan your fields and save a full list of possible classes to resources/css/statamic/miniset_classes.yaml whenever you update a blueprint or fieldset.
You can then tell Tailwind to search this file in your tailwind.config.js:
content: [ './resources/css/statamic/miniset_classes.yaml', ],
You can also manually run this scan on all fieldsets and blueprints via the command line using php please miniset:jit-safe-scan.