Class: ShadcnPhlexcomponents::CommandContent

Inherits:
Base
  • Object
show all
Defined in:
lib/shadcn_phlexcomponents/components/command.rb

Constant Summary

Constants inherited from Base

Base::SANITIZER_ALLOWED_ATTRIBUTES, Base::SANITIZER_ALLOWED_TAGS, Base::TAILWIND_MERGER

Instance Method Summary collapse

Methods inherited from Base

#before_template, #convert_collection_hash_to_struct, #find_as_child, #icon, #item_disabled?, #merge_default_attributes, #merged_as_child_attributes, #nokogiri_attributes_to_hash, #overlay, #sanitize_as_child

Constructor Details

#initialize(search_error_text: nil, search_empty_text: nil, search_placeholder_text: nil, aria_id: nil, **attributes) ⇒ CommandContent

Returns a new instance of CommandContent.



160
161
162
163
164
165
166
167
168
169
170
171
172
 
# File 'lib/shadcn_phlexcomponents/components/command.rb', line 160

def initialize(
  search_error_text: nil,
  search_empty_text: nil,
  search_placeholder_text: nil,
  aria_id: nil,
  **attributes
)
  @search_error_text = search_error_text
  @search_empty_text = search_empty_text
  @search_placeholder_text = search_placeholder_text
  @aria_id = aria_id
  super(**attributes)
end

Instance Method Details

#default_attributes ⇒ Object 



174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
 
# File 'lib/shadcn_phlexcomponents/components/command.rb', line 174

def default_attributes
  {
    style: { display: "none" },
    id: "#{@aria_id}-content",
    tabindex: -1,
    role: "dialog",
    aria: {
      describedby: "#{@aria_id}-description",
      labelledby: "#{@aria_id}-title",
    },
    data: {
      state: "closed",
      command_target: "content",
      action: <<~HEREDOC,
        command:click:outside->command#clickOutside
        keydown.up->command#highlightItem:prevent
        keydown.down->command#highlightItem:prevent
        keydown.enter->command#select
      HEREDOC
    },
  }
end

#view_template ⇒ Object 



197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
 
# File 'lib/shadcn_phlexcomponents/components/command.rb', line 197

def view_template(&)
  div(**@attributes) do
    template do
      CommandGroup do
        CommandLabel { "" }
      end
    end

    div(class: "text-popover-foreground flex h-full w-full flex-col overflow-hidden bg-transparent") do
      div(class: "sr-only") do
        h2(id: "#{@aria_id}-title") { @search_placeholder_text }
        p(id: "#{@aria_id}-description") { "Search for a command to run..." }
      end

      label(
        class: "sr-only",
        id: "#{@aria_id}-search-label",
        for: "#{@aria_id}-search",
      ) { @search_placeholder_text }

      CommandSearchInputContainer do
        icon("search", class: "size-4 shrink-0 opacity-50")

        CommandSearchInput(aria_id: @aria_id, search_placeholder_text: @search_placeholder_text)
      end

      CommandListContainer do
        CommandText(target: "empty") { @search_empty_text }
        CommandText(target: "error") { @search_error_text }
        CommandText(target: "loading") do
          div(class: "flex justify-center", aria: { label: "Loading" }) do
            icon("loader-circle", class: "animate-spin")
          end
        end

        div(id: "#{@aria_id}-list", data: { command_target: "list" }, &)
      end

      CommandFooter()
    end
  end
end