Something went wrong. Try again.
shadcn-ui for Phoenix shadix.workinghypothes.is
elixir phoenix shadcn
Something went wrong. Try again.
12345678910111213141516171819202122232425{ "default_style": "nova", "files": [ { "content": "defmodule Shadix.Components.Command do\n @moduledoc \"\"\"\n A command palette / filterable list adapted from shadcn/ui (new-york-v4).\n\n shadcn builds this on the `cmdk` primitive; we reimplement the essential\n behaviour with a small LiveView hook. The `command/1` root carries the\n `ShadixCommand` hook (assets/ts/command.ts), which on mount focuses the search\n input, filters the `[role=\\\"option\\\"]` items by the input's text (matching each\n option's `textContent`, toggling the Tailwind `hidden` class), shows the\n `command_empty/1` slot when nothing matches, and provides arrow/Home/End\n keyboard navigation over the *visible* options with Enter activating the\n focused option via `.click()`.\n\n Pass the command's required `:id` to both `command_input/1` and `command_list/1`.\n They derive matching `*-input` and `*-list` ids, while the hook locates elements\n by their `data-slot` attributes.\n\n Styling lives in colocated CSS (`priv/styles/<skin>/command.css`), keyed off each\n element's stable `data-slot`. Caller-supplied `class` is appended last; Tailwind\n cascade layers ensure it wins over the defaults.\n \"\"\"\n use Phoenix.Component\n\n @doc \"\"\"\n The command root: a rounded, bordered panel hosting the `ShadixCommand` hook.\n\n Compose `command_input/1`, `command_list/1` (with `command_group/1`,\n `command_item/1`, `command_empty/1`, `command_separator/1`) inside its\n `inner_block`.\n \"\"\"\n attr(:id, :string, required: true)\n attr(:class, :string, default: nil)\n attr(:rest, :global)\n slot(:inner_block, required: true)\n\n def command(assigns) do\n ~H\"\"\"\n <%!-- shadix:colocated-css --%>\n <div\n id={@id}\n data-slot=\"command\"\n phx-hook=\"ShadixCommand\"\n class={@class}\n {@rest}\n >\n {render_slot(@inner_block)}\n </div>\n \"\"\"\n end\n\n @doc \"\"\"\n The search input. `:id` is the *command's* id; the input gets `#\\#{id}-input`,\n a `data-command-search` marker the hook keys off, and a leading search icon.\n \"\"\"\n attr(:id, :string, required: true)\n attr(:placeholder, :string, default: \"Type a command or search...\")\n attr(:class, :string, default: nil)\n\n attr(:rest, :global,\n include:\n ~w(name value disabled readonly autocomplete autofocus required min max step pattern inputmode maxlength minlength multiple size list form)\n )\n\n def command_input(assigns) do\n ~H\"\"\"\n <div data-slot=\"command-input-wrapper\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"size-4 shrink-0 opacity-50\"\n >\n <circle cx=\"11\" cy=\"11\" r=\"8\" />\n <path d=\"m21 21-4.3-4.3\" />\n </svg>\n <input\n id={\"#{@id}-input\"}\n type=\"text\"\n role=\"combobox\"\n data-slot=\"command-input\"\n data-command-search\n aria-label=\"Search\"\n aria-autocomplete=\"list\"\n aria-expanded=\"true\"\n aria-controls={\"#{@id}-list\"}\n autocomplete=\"off\"\n spellcheck=\"false\"\n placeholder={@placeholder}\n class={@class}\n {@rest}\n />\n </div>\n \"\"\"\n end\n\n @doc \"\"\"\n A scrollable container holding the command groups, items, and empty state.\n\n `:id` is the *command's* id; the list gets `#\\#{id}-list`, matching the\n `aria-controls` emitted by `command_input/1`.\n \"\"\"\n attr(:id, :string, required: true)\n attr(:class, :string, default: nil)\n attr(:rest, :global)\n slot(:inner_block, required: true)\n\n def command_list(assigns) do\n ~H\"\"\"\n <div\n id={\"#{@id}-list\"}\n role=\"listbox\"\n aria-label=\"Suggestions\"\n data-slot=\"command-list\"\n class={@class}\n {@rest}\n >\n {render_slot(@inner_block)}\n </div>\n \"\"\"\n end\n\n @doc \"\"\"\n A labelled group of items. `:heading` renders a small muted label above the\n items.\n \"\"\"\n attr(:heading, :string, default: nil)\n attr(:class, :string, default: nil)\n attr(:rest, :global)\n slot(:inner_block, required: true)\n\n def command_group(assigns) do\n ~H\"\"\"\n <div\n role=\"group\"\n aria-label={@heading}\n data-slot=\"command-group\"\n class={@class}\n {@rest}\n >\n <div\n :if={@heading}\n aria-hidden=\"true\"\n data-slot=\"command-group-heading\"\n >\n {@heading}\n </div>\n {render_slot(@inner_block)}\n </div>\n \"\"\"\n end\n\n @doc \"\"\"\n A selectable option. `:value` is the option's value (mirrored to `data-value`);\n wire `phx-click` (or any handler) via `:rest`.\n \"\"\"\n attr(:value, :string, default: nil)\n attr(:class, :string, default: nil)\n attr(:rest, :global)\n slot(:inner_block, required: true)\n\n def command_item(assigns) do\n ~H\"\"\"\n <div\n role=\"option\"\n tabindex=\"-1\"\n data-slot=\"command-item\"\n data-value={@value}\n class={[\"group/command-item\", @class]}\n {@rest}\n >\n {render_slot(@inner_block)}\n </div>\n \"\"\"\n end\n\n @doc \"\"\"\n The empty state, shown by the hook when no options match the search. It remains\n a disabled `role=\"option\"` so the parent listbox always has a permitted child.\n \"\"\"\n attr(:class, :string, default: nil)\n attr(:rest, :global)\n slot(:inner_block, required: true)\n\n def command_empty(assigns) do\n ~H\"\"\"\n <div\n role=\"option\"\n aria-disabled=\"true\"\n tabindex=\"-1\"\n data-command-empty\n data-slot=\"command-empty\"\n class={[\"hidden\", @class]}\n {@rest}\n >\n {render_slot(@inner_block)}\n </div>\n \"\"\"\n end\n\n @doc \"A horizontal separator between command sections.\"\n attr(:class, :string, default: nil)\n attr(:rest, :global)\n\n def command_separator(assigns) do\n ~H\"\"\"\n <div\n aria-hidden=\"true\"\n data-slot=\"command-separator\"\n class={@class}\n {@rest}\n />\n \"\"\"\n end\n\n @doc \"A trailing keyboard-shortcut hint within a command item.\"\n attr(:class, :string, default: nil)\n attr(:rest, :global)\n slot(:inner_block, required: true)\n\n def command_shortcut(assigns) do\n ~H\"\"\"\n <span\n data-slot=\"command-shortcut\"\n class={@class}\n {@rest}\n >\n {render_slot(@inner_block)}\n </span>\n \"\"\"\n end\nend\n", "path": "command.ex" } ], "hooks": [ { "content": "interface CommandHook {\n el: HTMLElement;\n mounted(): void;\n beforeUpdate(): void;\n updated(): void;\n destroyed(): void;\n preparePatch?: () => void;\n}\n\nexport const ShadixCommand = {\n mounted(this: CommandHook) {\n const root = this.el;\n let input = root.querySelector<HTMLInputElement>(\"[data-command-search]\");\n let list = root.querySelector<HTMLElement>('[data-slot=\"command-list\"]');\n let empty = root.querySelector<HTMLElement>('[data-slot=\"command-empty\"]');\n const generatedIds = new WeakMap<HTMLElement, string>();\n\n const allOptions = () =>\n Array.from(root.querySelectorAll<HTMLElement>('[role=\"option\"]:not([data-command-empty])'));\n const visibleOptions = () =>\n allOptions().filter((o) => !o.classList.contains(\"hidden\"));\n\n // Wire the combobox<->listbox relationship for assistive technology.\n // Focus stays on the input; the active option is conveyed via\n // aria-activedescendant (APG editable-combobox pattern) rather than by\n // moving DOM focus, so screen readers announce the current option.\n // Idempotent, and re-run after server patches replace the option nodes\n // (which drops the ids we assign).\n const ensureIds = () => {\n if (list && !list.id) list.id = `${root.id}-list`;\n if (input && list) input.setAttribute(\"aria-controls\", list.id);\n allOptions().forEach((o, i) => {\n if (!o.id) {\n o.id = `${root.id}-option-${i}`;\n generatedIds.set(o, o.id);\n }\n });\n };\n\n // Client ids must not replace LiveView's server identity while morphing\n // skipped static options. Restore them in updated(), preserving caller ids.\n this.preparePatch = () => {\n for (const option of allOptions()) {\n if (generatedIds.get(option) === option.id) option.removeAttribute(\"id\");\n }\n };\n\n const markActive = (target: HTMLElement | null) => {\n for (const o of allOptions()) {\n o.removeAttribute(\"data-selected\");\n o.setAttribute(\"aria-selected\", \"false\");\n }\n if (target) {\n target.setAttribute(\"data-selected\", \"true\");\n target.setAttribute(\"aria-selected\", \"true\");\n input?.setAttribute(\"aria-activedescendant\", target.id);\n } else {\n input?.removeAttribute(\"aria-activedescendant\");\n }\n };\n\n const activeIndex = () => {\n const list = visibleOptions();\n return list.findIndex((o) => o.getAttribute(\"data-selected\") === \"true\");\n };\n\n const focusAt = (i: number) => {\n const list = visibleOptions();\n if (!list.length) {\n markActive(null);\n return;\n }\n const next = list[((i % list.length) + list.length) % list.length];\n markActive(next);\n next.scrollIntoView({ block: \"nearest\" });\n };\n\n const filter = () => {\n const query = (input?.value ?? \"\").trim().toLowerCase();\n let matches = 0;\n for (const option of allOptions()) {\n const text = (option.textContent ?? \"\").trim().toLowerCase();\n const value = (option.getAttribute(\"data-value\") ?? \"\").toLowerCase();\n const hit = query === \"\" || text.includes(query) || value.includes(query);\n option.classList.toggle(\"hidden\", !hit);\n if (hit) matches += 1;\n }\n if (empty) empty.classList.toggle(\"hidden\", matches > 0);\n // Keep a sensible active option among the survivors.\n const list = visibleOptions();\n markActive(list.find((o) => o.getAttribute(\"data-selected\") === \"true\") ?? list[0] ?? null);\n };\n\n // Re-establish the ids + active highlight. Server-side filtering\n // (phx-change) re-renders the option list on every keystroke; that DOM\n // patch drops the client-set ids and the data-selected highlight, so we\n // re-apply them after each update (and once on mount). Without this, fast\n // typing can leave the top result unhighlighted (though Enter still falls\n // back to the first option).\n const refresh = () => {\n const currentInput = root.querySelector<HTMLInputElement>(\"[data-command-search]\");\n if (currentInput !== input) {\n input?.removeEventListener(\"input\", onInput);\n input = currentInput;\n input?.addEventListener(\"input\", onInput);\n }\n list = root.querySelector<HTMLElement>('[data-slot=\"command-list\"]');\n empty = root.querySelector<HTMLElement>('[data-slot=\"command-empty\"]');\n ensureIds();\n filter();\n };\n\n const onInput = () => filter();\n\n const onKeydown = (e: KeyboardEvent) => {\n switch (e.key) {\n case \"ArrowDown\":\n e.preventDefault();\n focusAt(activeIndex() + 1);\n break;\n case \"ArrowUp\":\n e.preventDefault();\n focusAt(activeIndex() - 1);\n break;\n case \"Home\":\n e.preventDefault();\n focusAt(0);\n break;\n case \"End\":\n e.preventDefault();\n focusAt(visibleOptions().length - 1);\n break;\n case \"Enter\": {\n const list = visibleOptions();\n const idx = activeIndex();\n const target = idx >= 0 ? list[idx] : list[0];\n if (target) {\n e.preventDefault();\n target.click();\n }\n break;\n }\n }\n };\n\n input?.addEventListener(\"input\", onInput);\n root.addEventListener(\"keydown\", onKeydown);\n\n // Initial state: focus the input, wire aria + run the filter (no query =>\n // all visible).\n refresh();\n window.requestAnimationFrame(() => input?.focus());\n\n (root as unknown as { _refresh?: () => void })._refresh = refresh;\n (root as unknown as { _cleanup?: () => void })._cleanup = () => {\n input?.removeEventListener(\"input\", onInput);\n root.removeEventListener(\"keydown\", onKeydown);\n };\n },\n beforeUpdate(this: CommandHook) {\n this.preparePatch?.();\n },\n updated(this: CommandHook) {\n (this.el as unknown as { _refresh?: () => void })._refresh?.();\n },\n destroyed(this: CommandHook) {\n (this.el as unknown as { _cleanup?: () => void })._cleanup?.();\n },\n};\n", "name": "ShadixCommand", "path": "command.ts" } ], "name": "command", "npm_deps": [], "registry_deps": [ "colocated_css" ], "styles": { "nova": "@layer components {\n [data-slot=\"command\"] {\n @apply flex size-full flex-col overflow-hidden bg-popover text-popover-foreground rounded-xl! p-1;\n }\n\n [data-slot=\"command-input-wrapper\"] {\n @apply flex items-center gap-2 p-1 pb-0;\n }\n\n [data-slot=\"command-input\"] {\n @apply outline-hidden disabled:cursor-not-allowed disabled:opacity-50 w-full text-sm;\n }\n\n [data-slot=\"command-list\"] {\n @apply overflow-x-hidden overflow-y-auto no-scrollbar max-h-72 scroll-py-1 outline-none;\n }\n\n [data-slot=\"command-empty\"] {\n @apply py-6 text-center text-sm;\n }\n\n [data-slot=\"command-group\"] {\n @apply text-foreground overflow-hidden p-1;\n }\n\n [data-slot=\"command-group-heading\"] {\n @apply text-muted-foreground px-2 py-1.5 text-xs font-medium;\n }\n\n [data-slot=\"command-separator\"] {\n @apply bg-border -mx-1 h-px;\n }\n\n [data-slot=\"command-item\"] {\n @apply data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_svg:not([class*='size-'])]:size-4;\n }\n\n [data-slot=\"command-shortcut\"] {\n @apply text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest;\n }\n}\n", "vega": "@layer components {\n [data-slot=\"command\"] {\n @apply flex size-full flex-col overflow-hidden bg-popover text-popover-foreground rounded-xl! p-1;\n }\n\n [data-slot=\"command-input-wrapper\"] {\n @apply flex items-center gap-2 p-1 pb-0;\n }\n\n [data-slot=\"command-input\"] {\n @apply outline-hidden disabled:cursor-not-allowed disabled:opacity-50 w-full text-sm;\n }\n\n [data-slot=\"command-list\"] {\n @apply overflow-x-hidden overflow-y-auto no-scrollbar max-h-72 scroll-py-1 outline-none;\n }\n\n [data-slot=\"command-empty\"] {\n @apply py-6 text-center text-sm;\n }\n\n [data-slot=\"command-group\"] {\n @apply text-foreground overflow-hidden p-1;\n }\n\n [data-slot=\"command-group-heading\"] {\n @apply text-muted-foreground px-2 py-1.5 text-xs font-medium;\n }\n\n [data-slot=\"command-separator\"] {\n @apply bg-border -mx-1 h-px w-auto;\n }\n\n [data-slot=\"command-item\"] {\n @apply data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_svg:not([class*='size-'])]:size-4;\n }\n\n [data-slot=\"command-shortcut\"] {\n @apply text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest;\n }\n}\n" }}