Command

1import { css, html, LitElement, nothing, type PropertyValues } from "lit";
2import { customElement, property, query, state } from "lit/decorators.js";
3import { unsafeSVG } from "lit/directives/unsafe-svg.js";
4import { Search } from "lucide-static";
5import { TW } from "@/registry/lib/tailwindMixin";
6import { cn } from "@/registry/lib/utils";
7 
8// Type definitions
9export type FilterFunction = (
10  value: string,
11  search: string,
12  keywords?: string[],
13) => number;
14 
15// Default filter function (similar to cmdk)
16const defaultFilter: FilterFunction = (value, search, keywords = []) => {
17  const searchLower = search.toLowerCase().trim();
18  if (!searchLower) return 1;
19 
20  const valueLower = value.toLowerCase();
21  const keywordsLower = keywords.map((k) => k.toLowerCase());
22 
23  // Exact match = highest score
24  if (valueLower === searchLower) return 2;
25 
26  // Starts with = high score
27  if (valueLower.startsWith(searchLower)) return 1.5;
28 
29  // Contains = medium score
30  if (valueLower.includes(searchLower)) return 1;
31 
32  // Check keywords
33  for (const keyword of keywordsLower) {
34    if (keyword.includes(searchLower)) return 0.8;
35  }
36 
37  return 0; // No match
38};
39 
40// Component properties interfaces
41export interface CommandProperties {
42  value?: string;
43  filter?: FilterFunction;
44  shouldFilter?: boolean;
45  loop?: boolean;
46  label?: string;
47}
48 
49export interface CommandInputProperties {
50  value?: string;
51  placeholder?: string;
52}
53 
54export interface CommandItemProperties {
55  value?: string;
56  keywords?: string[];
57  disabled?: boolean;
58  forceMount?: boolean;
59}
60 
61export interface CommandGroupProperties {
62  heading?: string;
63  forceMount?: boolean;
64}
65 
66// Helper type for items with internal state
67export type CommandItemWithState = CommandItem & {
68  _score: number;
69  _highlighted: boolean;
70};
71 
72/**
73 * Main Command component - root container
74 */
75@customElement("ui-command")
76export class Command extends TW(LitElement) implements CommandProperties {
77  static styles = css`
78    :host {
79      display: contents;
80    }
81  `;
82 
83  @property({ type: String, reflect: true }) value = "";
84  @property({ type: Boolean, attribute: "should-filter" }) shouldFilter = true;
85  @property({ type: Boolean }) loop = false;
86  @property({ type: String }) label = "Command Menu";
87  @property({ attribute: false }) filter?: FilterFunction;
88 
89  @state() private _search = "";
90  @state() private _filteredCount = 0;
91  @state() private _statusMessage = "";
92 
93  // Store references to all items and groups for filtering
94// … truncated