Files
directus/docs/app/data-model/fields/selection.md
Connor 92621429ee Linting and Formatting Upgrade (#18892)
* add docs to eslint

* update prettier ignore

* fix vitepress linting

* eslint ignore fixes

* prettier run

* update prettier ignore

* fix formatting

* enable linting of markdown files

* revert format command change

* fix irregular whitespace

* update dictionary

* (Changelog) Create four-boxes-shake.md

* Rework ESLint / Prettier setup

- Disable js/ts/vue files for Prettier to ensure linting/formatting is
  only happening via ESLint
- Rework formatting of code blocks in md files
  - Disable formatting of code blocks in md files under '/docs' by Prettier
  - Instead use "eslint-plugin-markdown" to format & __lint__ js*/ts*/vue such code blocks
  - Replace unmaintained "eslint-plugin-md" plugin by official "eslint-plugin-markdown" plugin
  - I'll check whether we can use this to format other code blocks
    (json, html, ...) as well
- Restructure, clean-up and apply some fixes to the ESLint config
  (Note: Not ready for flat config yet since not supported by
  vscode-eslint)
- Enable cache for ESLint / Prettier in scripts
- Clean-up ignore file
  - Explicit folder declaration (.../)
  - Don't ignore all 'extensions' folders in ESLint (only
    '/api/extensions/')
  - Enable formatting in '/.github' folder

* Fix all formatting issues with Prettier

* Update md files under /docs/.typedocs

* Fix lint issues in vue/js files

* ESLint / Prettier config revision v2

Enable Prettier for md code blocks, but only as warnings since it can
get into the way with Vitepress md extensions like '[!code ...]'
comments

* Remove prettier-ignore comments

* Make spellchecker happy

* Remove changeset

* Revert lint setup for code blocks

There are many cases in the docs where linting / formatting of code
blocks doesn't make
sense:
- Code block is only an excerpt - linter fails
- Code block contains special comments (e.g. markdown extensions) which
  needs to remain at the same place - formatting would break it
- ...

* Apply lint issues / formatting from temp lint setup

* Run formatter

* Fix merge failure

* Simplify & modernize ESLint / Prettier setup

No longer run Prettier via ESLint. Nowadays, this is the recommended
setup. There's no real need to run it this way, it's just an additional
layer.

Add VS Code settings to make the work with the new setup easier.

* Remove unused eslint disable directives

* Make editorconfig more useful

* Fix formatting issues reported by editorconfig

* Format files with Prettier

* Enable formatting of source translations file

* Format source translations file

* Remove unnecessary console error

* Remove unnecessary line

* Only ignore md files under .changeset

* Add CI reporter for Prettier

* Fail job on wrongly formatted files

* Fix format

* Test Prettier action on changed/added file

* Use simple CI format check for now & no cache

* Revert "Test Prettier action on changed/added file"

This reverts commit 4f7d8826ad.

* Introduce code blocks check for docs

* Fix code block issues

* Ignore auto-generated packages dir

* Fix comment position

* Also lint `/app/.storybook`

* Reformat modified files

---------

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
2023-06-29 11:54:01 +02:00

7.0 KiB

Selection

Interfaces are how users interact with fields on the Item Detail page. These are the standard Selection interfaces.

Toggle

A toggle form input with label named "Enabled"

A checkbox input that allows user to toggle value between on and off / true and false.

  • Types: Boolean
  • Default Value: true, false, null
  • Icon On: Icon that shows whenever the toggle is enabled.
  • Icon Off: Icon that shows whenever the toggle is disabled.
  • Color On: Color of the icon whenever the toggle is enabled.
  • Color Off: Color of the icon whenever the toggle is disabled.
  • Label: The text displayed to the user beside the toggle.

Datetime

A date picker input. User can select a calendar date and input a time.

Date picker input that allows user to select a date and time.

  • Types: DateTime, Date, Time, Timestamp
  • Include Seconds: Show seconds in the interface
  • Use 24-Hour Format: Use 24 hour time system instead of 12 hour

Repeater

A standard form text input

A standard form text input

Interface for repeating groups of fields.

You can use any Text & Number, Selection, or Other fields within a Repeater. Relational, Presentation, or Group fields are not allowed.

Value is stored as a JSON array of objects.

  • Types: JSON
  • Template: Add a JSON template that users that add to the field with a button click.
  • "Create New" Label: Label for the Create New button below the field on Item Detail page.
  • Sort: Method of sorting the items groups within the repeater.
  • Edit Fields: The configuration for fields within the Repeater.
    • Field: Name of the field.
    • Field Width: Width of field on the Item Detail page.
    • Type: Type of value.
    • Interface: The interface to use for the fields.
    • Note: A helpful note for the user.
    • Options: Option configuration for the selected Interface.

Map

An interactive map interface that shows a single point on the east coast of the United States. Map has buttons for zoom, search, and full screen.

Interface that shows geospatial data on an interactive map.

  • Types: Point, LineString, Polygon, Multipoint, MultiLineString, MultiPolygon, Geometry (All), JSON
  • Default View: The default location and zoom settings on the map to show by default

Color

A text input for color hex codes that allows user to select color modes

A color picker interface that allows users to input color codes and convert between different color modes.

  • Types: String
  • Opacity: Enable opacity values to be adjusted by the user.
  • Preset Colors: Preset colors that users can select.

Dropdown

A select input with a dropdown of options.

Input that allows user to select a value from a list of options.

  • Types: String, Integer, Big Integer, Float
  • Choices: Options for the dropdown.
    • Text: Label the user sees.
    • Value: Raw value that gets stored.
  • Allow Other: Allow user to enter custom values other than preset values.
  • Allow None: Allow user to deselect an option.
  • Icon: Icon displayed beside the dropdown.
  • Placeholder: Placeholder text for the dropdown.

Icon

A select input with a dropdown grid of icon choices.

Search input that allows user to select from a list of icons.

  • Types: String

Checkboxes

A form input with multiple checkboxes.

Input that allows user to select multiple checkboxes.

  • Types: JSON, CSV
  • Choices: Options for the checkboxes.
    • Text: Label the user sees.
    • Value: Raw value that gets stored.
  • Allow Other: Allow user to enter custom values other than preset Choices.
  • Color: Color of the checkboxes.
  • Icon On: Icon that shows whenever a checkbox is checked.
  • Icon Off: Icon that shows whenever a checkbox is unchecked.
  • Items Shown: Number of checkboxes shown.

Checkboxes (Tree)

A form input with a nested tree of multiple parent and child checkboxes.

Nested tree of checkboxes that can be expanded or collapsed.

  • Types: JSON, CSV
  • Choices: Options for the checkbox tree.
    • Text: Label the user sees.
    • Value: Raw value that gets stored.
    • Children: Child checkboxes nested below the current choice.
  • Value Combining: Controls what value is stored when nested selections are made.

Dropdown (Multiple)

A select input where user can select multiple options from a dropdown.

Input that allows user to select multiple values from a list of options.

  • Types: JSON, CSV
  • Choices: Options for the dropdown.
    • Text: Label the user sees.
    • Value: Raw value that gets stored.
  • Allow Other: Allow user to enter custom values other than preset choices.
  • Allow None: Allow user to deselect an option.
  • Icon: Icon displayed beside the dropdown.
  • Placeholder: Placeholder text for the dropdown.

Radio Buttons

A radio button form input with different options to select

Radio button input that allows users to select a single value from multiple choices.

  • Types: String, Integer, Big Integer, Float
  • Choices: Options for the radio buttons.
    • Text: Label the user sees.
    • Value: Raw value that gets stored.
  • Allow Other: Allow user to enter custom values other than preset choices.
  • Color: Color of the radio buttons.
  • Icon On: Icon that shows whenever a radio buttons is checked.
  • Icon Off: Icon that shows whenever a radio buttons is unchecked.