Miniset

Addon by Jack Sleight

Miniset Main Screenshot

Create compact sets of fields that either combine into a string of classes, or return values.

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_safe compatible)
  • Textarea (not jit_safe compatible)

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.