CRUD / foldkit-mixins-crud
A look for each view
The views draw unstyled Slots. foldkit-mixins-crud/recipes gives each a look over
the theme's tokens, as foldkit-mixins-ui's Recipes do for its components:
ts
import { Style } from 'foldkit-mixins'
import { ConfirmSlots, EditorSlots, ListSlots, ListView } from 'foldkit-mixins-crud'
import { Confirm, Editor, List } from 'foldkit-mixins-crud/recipes'
const PostTable = ListView.forMessages<Message>()
.define(PostList)
.pipe(Style.attach(Style.forSlots(ListSlots)(List({}))))List({ open })is a quiet table: small headings over rows divided by a line, each lit under the pointer.open: 'row'(the default) stretches the way into a row across it, so a press anywhere on the row opens it;open: 'link'keeps it to the title, drawn as a link, for rows with controls of their own. Nothing to list says so in a dashed box; a wait says so only once it is noticeable.RowList({})isRowListView's rows as lines divided by a rule, each a finger's height, its parts side by side; a row the list opens is a button across it. It says whatListsays in place of its rows.Editor({})is a card: the title, what the editor says (a failure in the error's ink), the form, and the actions.Confirm({})asks, with the yes in the error's fill.Toolbar({})lays the controls in a row that wraps, the search widest.
Adjust one with .extend, never a fork: List.extend({ base: { cell: { padding:
'1rem 0.5rem' } } })({}), as the CMS example does for roomier rows.