Packages
corex
0.1.0
0.1.2
0.1.1
0.1.0
0.1.0-rc.1
0.1.0-rc.0
0.1.0-beta.5
0.1.0-beta.4
0.1.0-beta.3
0.1.0-beta.2
0.1.0-beta.1
0.1.0-alpha.33
0.1.0-alpha.32
0.1.0-alpha.31
0.1.0-alpha.30
0.1.0-alpha.29
0.1.0-alpha.28
0.1.0-alpha.27
0.1.0-alpha.26
0.1.0-alpha.25
0.1.0-alpha.24
0.1.0-alpha.23
0.1.0-alpha.22
0.1.0-alpha.21
0.1.0-alpha.20
0.1.0-alpha.19
0.1.0-alpha.18
0.1.0-alpha.17
0.1.0-alpha.16
0.1.0-alpha.15
0.1.0-alpha.14
0.1.0-alpha.13
0.1.0-alpha.12
0.1.0-alpha.11
0.1.0-alpha.10
0.1.0-alpha.9
0.1.0-alpha.8
0.1.0-alpha.7
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
Accessible and unstyled UI components library written in Elixir and TypeScript that integrates Zag.js state machines into the Phoenix Framework.
Current section
Files
Jump to
Current section
Files
lib/components/toggle_group/connect.ex
defmodule Corex.ToggleGroup.Connect do
@moduledoc false
alias Corex.Selectors
alias Corex.ToggleGroup.Anatomy.{Item, Props, Root}
alias Phoenix.LiveView.JS
import Corex.Helpers,
only: [
get_boolean: 1,
joined_csv_values: 1,
controlled_dataset_values: 2,
maybe_put_data_dir_from: 2,
maybe_put_dir_from: 2
]
@spec props(Props.t()) :: map()
def props(assigns) do
joined = joined_csv_values(assigns.value || [])
{value_str, default_value_str} =
controlled_dataset_values(assigns.controlled, joined)
%{
"id" => assigns.id,
"data-deselectable" => get_boolean(assigns.deselectable),
"data-loop-focus" => get_boolean(assigns.loopFocus),
"data-roving-focus" => get_boolean(assigns.rovingFocus),
"data-controlled" => get_boolean(assigns.controlled),
"data-value" => value_str,
"data-default-value" => default_value_str,
"data-disabled" => get_boolean(assigns.disabled),
"data-multiple" => get_boolean(assigns.multiple),
"data-orientation" => Map.get(assigns, :orientation, "vertical"),
"data-on-value-change" => assigns.on_value_change,
"data-on-value-change-client" => assigns.on_value_change_client
}
|> maybe_put_data_dir_from(assigns)
end
@spec root(Root.t()) :: map()
def root(assigns) do
base =
%{
"data-scope" => "toggle-group",
"data-part" => "root",
"data-orientation" => Map.get(assigns, :orientation, "vertical"),
"id" => "toggle-group:#{assigns.id}",
"data-disabled" => assigns.disabled,
"style" => "outline: none;"
}
|> maybe_put_dir_from(assigns)
case Map.get(assigns, :aria_labelledby) do
id when is_binary(id) -> Map.put(base, "aria-labelledby", id)
_ -> base
end
end
def ignore_root(assigns) do
JS.ignore_attributes(Root.ignored_attrs(),
to: Selectors.css_id("toggle-group:#{assigns.id}")
)
end
@spec item(Item.t()) :: map()
def item(assigns) do
value = assigns.value
data_state = if(value in assigns.values, do: "on", else: "off")
aria_label = assigns.aria_label || value
%{
"data-scope" => "toggle-group",
"data-part" => "item",
"data-value" => value,
"data-orientation" => Map.get(assigns, :orientation, "vertical"),
"type" => "button",
"data-disabled" => assigns.disabled_root || assigns.disabled,
"data-ownedby" => "toggle-group:#{assigns.id}",
"disabled" => assigns.disabled_root || assigns.disabled,
"data-state" => data_state,
"id" => "toggle-group:#{assigns.id}:#{value}",
"aria-label" => aria_label
}
|> maybe_put_dir_from(assigns)
end
def ignore_item(assigns) do
value = assigns.value
JS.ignore_attributes(Item.ignored_attrs(),
to: Selectors.css_id("toggle-group:#{assigns.id}:#{value}")
)
end
end