Packages
mishka_chelekom
0.0.9
0.0.10-alpha.5
0.0.10-alpha.4
0.0.10-alpha.3
0.0.10-alpha.2
0.0.10-alpha.1
0.0.9
0.0.9-rc.2
0.0.9-rc.1
0.0.9-beta.5
0.0.9-beta.4
0.0.9-beta.3
0.0.9-beta.2
0.0.9-beta.1
0.0.9-alpha.20
0.0.9-alpha.18
0.0.9-alpha.17
0.0.9-alpha.16
0.0.9-alpha.15
0.0.9-alpha.14
0.0.9-alpha.13
0.0.9-alpha.12
0.0.9-alpha.11
0.0.9-alpha.10
0.0.9-alpha.9
0.0.9-alpha.8
0.0.9-alpha.7
0.0.9-alpha.6
0.0.9-alpha.5
0.0.9-alpha.4
0.0.9-alpha.3
0.0.9-alpha.2
0.0.9-alpha.1
0.0.8
0.0.8-rc.2
0.0.8-rc.1
0.0.8-beta.5
0.0.8-beta.4
0.0.8-beta.3
0.0.8-beta.2
0.0.8-beta.1
0.0.8-alpha.4
0.0.8-alpha.3
0.0.8-alpha.2
0.0.8-alpha.1
0.0.7
0.0.6
0.0.6-alpha.2
0.0.6-alpha.1
0.0.5
0.0.5-beta.2
0.0.5-beta.1
0.0.5-alpha.12
0.0.5-alpha.11
0.0.5-alpha.10
0.0.5-alpha.9
0.0.5-alpha.8
0.0.5-alpha.7
0.0.5-alpha.6
0.0.5-alpha.5
0.0.5-alpha.4
0.0.5-alpha.3
0.0.5-alpha.2
0.0.5-alpha.1
0.0.4
0.0.4-beta.3
0.0.4-beta.2
0.0.4-beta.1
0.0.4-alpha.9
0.0.4-alpha.8
0.0.4-alpha.7
0.0.4-alpha.6
0.0.4-alpha.5
0.0.4-alpha.4
0.0.4-alpha.3
0.0.4-alpha.2
0.0.4-alpha.1
0.0.3
0.0.3-alpha.3
0.0.3-alpha.2
0.0.3-alpha.1
0.0.2
0.0.2-rc.2
0.0.2-rc.1
0.0.2-beta.4
0.0.2-beta.3
0.0.2-beta.2
0.0.2-beta.1
0.0.2-alpha.3
0.0.2-alpha.2
0.0.2-alpha.1
0.0.1
Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView
Current section
Files
Jump to
Current section
Files
usage-rules/docs/component-macro.md
# The `component` macro (MishkaChelekom.Component)
One declarative macro for **both** styled and headless components, with Pyro-style overrides
and class-merging built in. Original Mishka design.
```elixir
use MishkaChelekom.Component
```
> Trade-off: components authored with this macro use `mishka_chelekom` at **runtime** (like
> Doggo/Pyro). It is the opt-in alternative to the zero-runtime-dependency `mix mishka.ui.gen.*`
> generators. `phoenix_live_view` is an optional dependency; host Phoenix apps already provide it.
## Styled
```elixir
defmodule MyAppWeb.Components.Button do
use MishkaChelekom.Component
component :button,
tag: :button,
base: "inline-flex items-center font-medium rounded-md",
variants: [
color: [primary: "bg-primary text-primary-content", ghost: "bg-transparent hover:bg-base-200"],
size: [sm: "h-8 px-3 text-xs", md: "h-9 px-4 text-sm", lg: "h-11 px-6"]
],
defaults: [color: :primary, size: :md]
end
```
```heex
<.button color={:ghost} size={:lg} class="px-6">Save</.button>
```
* `variants:` become real `attr`s with allowed values; `defaults:` set them.
* classes compose as `base ++ variant ++ project-override ++ caller-class` through
`MishkaChelekom.Overrides` + `MishkaChelekom.CSS` (the caller's class wins).
* a `default` naming an undeclared value **fails at compile time**.
## Headless
```elixir
component :dialog,
headless: true,
hook: "FocusTrap",
parts: [
trigger: [tag: :button, slot: true, aria: [haspopup: "dialog"]],
backdrop: [tag: :div, aria: [hidden: "true"]],
popup: [tag: :div, role: "dialog", state: true,
aria: [modal: "true", labelledby: {:ref, :title}],
children: [
title: [tag: :h2, id: true, slot: true],
content: [tag: :div, slot: :inner_block]
]]
]
```
```heex
<.dialog id="confirm" open={@open}>
<:trigger>Open</:trigger>
<:title>Confirm</:title>
Body
</.dialog>
```
Generates `chelekom-dialog__<part>` classes, `data-part`, ARIA, paired-presence
`data-open`/`data-closed`, the JS `hook`, and named slots.
### Part options
| Option | Meaning |
|---|---|
| `tag:` | HTML tag (default `:div`) |
| `role:` | ARIA role |
| `aria:` | keyword of `aria-*`; value `{:ref, :other_part}` → `"#{@id}-other_part"` (id wiring) |
| `state: true` | emit `data-open`/`data-closed` from the `open` assign |
| `id: true` | give the part `id="#{@id}-<part>"` |
| `slot: true` | render the named `<:part>` slot here |
| `slot: :inner_block` | render the default slot here |
| `children:` | nested parts |
The root automatically gets `id={@id}`, the `phx-hook`, `class` (merged with the caller's),
`data-open`/`data-closed` (if any part uses `state`), and the global `@rest`.