shadcn_phlexcomponents 0.1.11 → 0.1.16

data/lib/shadcn_phlexcomponents/components/alert_dialog.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class AlertDialog < Base
-    class_variants(base: "inline-block max-w-fit")
+    class_variants(base: "inline-flex max-w-fit")
 
     def initialize(open: false, **attributes)
       @open = open
@@ -49,14 +49,18 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         data: {
-          controller: "dialog",
-          dialog_is_open_value: @open.to_s,
-        },
-      }
+          controller: "alert-dialog",
+          alert_dialog_is_open_value: @open.to_s
+        }
+      }  
     end
 
     def view_template(&)
-      div(**@attributes, &)
+      div(**@attributes) do
+        overlay("alert-dialog")
+
+        yield
+      end
     end
   end
 
@@ -75,10 +79,10 @@ module ShadcnPhlexcomponents
           expanded: "false",
           controls: "#{@aria_id}-content",
         },
-        data: {
-          action: "click->dialog#open",
-          dialog_target: "trigger",
+        data: { 
           as_child: @as_child.to_s,
+          alert_dialog_target: "trigger",
+          action: "click->alert-dialog#open"
         },
       }
     end
@@ -106,7 +110,7 @@ module ShadcnPhlexcomponents
         data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
         data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)]
         translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg
-        pointer-events-auto
+        pointer-events-auto outline-none
       HEREDOC
     )
 
@@ -126,14 +130,13 @@ module ShadcnPhlexcomponents
         },
         data: {
           state: "closed",
-          dialog_target: "content",
+          alert_dialog_target: "content"
         },
       }
     end
 
     def view_template(&)
-      @class = @attributes.delete(:class)
-      div(class: "#{@class} hidden", **@attributes, &)
+      div(style: { display: "none" }, **@attributes, &)
     end
   end
 
@@ -201,7 +204,7 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         data: {
-          action: "click->dialog#close",
+          action: "click->alert-dialog#close",
         },
       }
     end
@@ -222,7 +225,7 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         data: {
-          action: "click->dialog#close",
+          action: "click->alert-dialog#close",
         },
       }
     end

data/lib/shadcn_phlexcomponents/components/base.rb

@@ -141,5 +141,19 @@ module ShadcnPhlexcomponents
         disabled
       end
     end
+
+    def overlay(component)
+      div(
+        style: { display: "none" },
+        class: "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 pointer-events-auto",
+        aria: {
+          hidden: true,
+        },
+        data: {
+          state: "closed",
+          "#{component}-target" => "overlay"
+        }
+      )
+    end
   end
 end

data/lib/shadcn_phlexcomponents/components/collapsible.rb

@@ -84,8 +84,7 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      @class = @attributes.delete(:class)
-      div(class: "#{@class} hidden", **@attributes, &)
+      div(style: { display: "none" }, **@attributes, &)
     end
   end
 end

data/lib/shadcn_phlexcomponents/components/combobox.rb

@@ -9,18 +9,24 @@ module ShadcnPhlexcomponents
       name: nil,
       value: nil,
       placeholder: nil,
-      dir: "ltr",
       include_blank: false,
       disabled: false,
+      search_path: nil,
+      search_error_text: "Something went wrong, please try again.",
+      search_empty_text: "No results found",
+      search_placeholder_text: "Search...",
       **attributes
     )
       @id = id
       @name = name
       @value = value
       @placeholder = placeholder
-      @dir = dir
       @include_blank = include_blank
       @disabled = disabled
+      @search_path = search_path
+      @search_error_text = search_error_text
+      @search_empty_text = search_empty_text
+      @search_placeholder_text = search_placeholder_text
       @aria_id = "combobox-#{SecureRandom.hex(5)}"
       super(**attributes)
     end
@@ -29,7 +35,6 @@ module ShadcnPhlexcomponents
       ComboboxTrigger(
         id: @id,
         aria_id: @aria_id,
-        dir: @dir,
         value: @value,
         placeholder: @placeholder,
         disabled: @disabled,
@@ -39,7 +44,13 @@ module ShadcnPhlexcomponents
 
     def content(**attributes, &)
       ComboboxContent(
-        aria_id: @aria_id, dir: @dir, include_blank: @include_blank, **attributes, &
+        include_blank: @include_blank,
+        search_error_text: @search_error_text,
+        search_empty_text: @search_empty_text,
+        search_placeholder_text: @search_placeholder_text,
+        aria_id: @aria_id, 
+        **attributes, 
+        &
       )
     end
 
@@ -69,13 +80,18 @@ module ShadcnPhlexcomponents
       ComboboxTrigger(
         id: @id,
         aria_id: @aria_id,
-        dir: @dir,
         value: @value,
         placeholder: @placeholder,
         disabled: @disabled,
       )
 
-      ComboboxContent(aria_id: @aria_id, dir: @dir, include_blank: @include_blank) do
+      ComboboxContent(
+        aria_id: @aria_id, 
+        include_blank: @include_blank, 
+        search_error_text: @search_error_text, 
+        search_empty_text: @search_empty_text,
+        search_placeholder_text: @search_placeholder_text
+      ) do
         collection.each do |item|
           value = item.public_send(value_method)
           text = item.public_send(text_method)
@@ -103,6 +119,7 @@ module ShadcnPhlexcomponents
         data: {
           aria_id: @aria_id,
           controller: "combobox",
+          search_path: @search_path,
           combobox_selected_value: @value,
         },
       }
@@ -117,25 +134,22 @@ module ShadcnPhlexcomponents
         aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex items-center
         justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs
         transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50
-        data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[combobox-target=triggerText]:line-clamp-1#{" "}
-        *:data-[combobox-target=triggerText]:flex *:data-[combobox-target=triggerText]:items-center *:data-[combobox-target=triggerText]:gap-2
-        [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
-        data-[placeholder]:data-[has-value=false]:text-muted-foreground w-full
+        h-9 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
+        data-[placeholder]:data-[has-value=false]:text-muted-foreground w-full disabled:dark:hover:bg-input/30
       HEREDOC
     )
 
-    def initialize(id: nil, value: nil, placeholder: nil, dir: "ltr", aria_id: nil, **attributes)
+    def initialize(id: nil, value: nil, placeholder: nil, aria_id: nil, **attributes)
       @id = id
       @value = value
       @placeholder = placeholder
-      @dir = dir
       @aria_id = aria_id
       super(**attributes)
     end
 
     def view_template
       button(**@attributes) do
-        span(class: "pointer-events-none", data: { combobox_target: "triggerText" }) do
+        span(class: "pointer-events-none line-clamp-1 flex items-center gap-2", data: { combobox_target: "triggerText" }) do
           @value || @placeholder
         end
 
@@ -147,7 +161,6 @@ module ShadcnPhlexcomponents
       {
         type: "button",
         id: @id,
-        dir: @dir,
         role: "combobox",
         aria: {
           autocomplete: "none",
@@ -159,8 +172,6 @@ module ShadcnPhlexcomponents
           has_value: @value.present?.to_s,
           action: <<~HEREDOC,
             click->combobox#toggle
-            keydown.space->combobox#open
-            keydown.enter->combobox#open
             keydown.down->combobox#open:prevent
           HEREDOC
           combobox_target: "trigger",
@@ -176,27 +187,44 @@ module ShadcnPhlexcomponents
         data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
         data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2
         data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50
-        max-h-(--radix-popper-available-height) min-w-[8rem] origin-(--radix-popper-transform-origin)
-        overflow-x-hidden overflow-y-auto rounded-md border shadow-md pointer-events-auto outline-none
+        min-w-[8rem] origin-(--radix-popper-transform-origin)
+        rounded-md border shadow-md pointer-events-auto outline-none
       HEREDOC
     )
 
-    def initialize(include_blank: false, dir: "ltr", side: :bottom, align: :center, aria_id: nil, search_placeholder: "Search...", **attributes)
+    def initialize(
+      include_blank: false, 
+      side: :bottom, 
+      align: :center, 
+      aria_id: nil, 
+      search_error_text: nil,
+      search_empty_text: nil,
+      search_placeholder_text: nil,
+      **attributes
+    )
       @include_blank = include_blank
-      @dir = dir
       @side = side
       @align = align
-      @search_placeholder = search_placeholder
+      @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
 
     def view_template(&)
       div(
-        class: "hidden fixed top-0 left-0 w-max z-50",
+        style: { display: "none" },
+        class: "fixed top-0 left-0 w-max z-50",
         data: { combobox_target: "contentContainer" },
       ) do
         div(**@attributes) do
+          template do
+            ComboboxGroup do
+              ComboboxLabel { "" }
+            end 
+          end
+
           label(
             class: "sr-only",
             id: "#{@aria_id}-search-label",
@@ -224,19 +252,29 @@ module ShadcnPhlexcomponents
               },
               data: {
                 combobox_target: "searchInput",
-                action: "input->combobox#search",
+                action: "keydown->combobox#inputKeydown input->combobox#search",
               },
             )
           end
 
-          div(class: "p-1 max-h-80 overflow-y-auto", id: "#{@aria_id}-list", data: { combobox_target: "list" }) do
-            if @include_blank
-              ComboboxItem(aria_id: @aria_id, value: "", class: "h-8", hide_icon: true) do
-                @include_blank.is_a?(String) ? @include_blank : ""
+          div(class: "p-1 max-h-80 overflow-y-auto", data: { combobox_target: "listContainer"})  do
+            ComboboxText(target: "empty") { @search_empty_text }
+            ComboboxText(target: "error") { @search_error_text }
+            ComboboxText(target: "loading") do
+              div(class: "flex justify-center", aria: { label: "Loading" }) do
+                icon("loader-circle", class: "animate-spin")
               end
             end
 
-            div(data: { combobox_target: "results" }, &)
+            div(id: "#{@aria_id}-list", data: { combobox_target: "list" }) do
+              if @include_blank
+                ComboboxItem(aria_id: @aria_id, value: "", class: "h-8") do
+                  @include_blank.is_a?(String) ? @include_blank : ""
+                end
+              end
+
+              yield
+            end
           end
         end
       end
@@ -245,7 +283,6 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         id: "#{@aria_id}-content",
-        dir: @dir,
         tabindex: -1,
         role: "listbox",
         aria: {
@@ -261,7 +298,7 @@ module ShadcnPhlexcomponents
             combobox:click:outside->combobox#clickOutside
             keydown.up->combobox#highlightItem:prevent
             keydown.down->combobox#highlightItem:prevent
-            keydown.enter->combobox#select
+            keydown.enter->combobox#select:prevent
           HEREDOC
         },
       }
@@ -280,14 +317,6 @@ module ShadcnPhlexcomponents
     def view_template(&)
       div(**@attributes, &)
     end
-
-    def default_attributes
-      {
-        data: {
-          combobox_target: "label",
-        },
-      }
-    end
   end
 
   class ComboboxItem < Base
@@ -365,34 +394,35 @@ module ShadcnPhlexcomponents
     end
   end
 
-  class ComboboxSeparator < Base
-    class_variants(base: "bg-border pointer-events-none -mx-1 my-1 h-px")
-
-    def view_template(&)
-      div(**@attributes, &)
-    end
-
-    def default_attributes
-      { aria: { hidden: "true" } }
-    end
-  end
-
-  class ComboboxEmpty < Base
+  class ComboboxText < Base
     class_variants(base: "py-6 text-center text-sm hidden")
+    
+    def initialize(target:, **attributes)
+      @target = target
+      super(**attributes)
+    end
 
     def default_attributes
       {
         role: "presentation",
-        data: { combobox_target: "empty" },
+        data: { combobox_target: @target },
       }
     end
 
     def view_template(&)
-      if block_given?
-        div(**@attributes, &)
-      else
-        div(**@attributes) { "No results found" }
-      end
+      div(**@attributes, &)
+    end
+  end
+
+  class ComboboxSeparator < Base
+    class_variants(base: "bg-border pointer-events-none -mx-1 my-1 h-px")
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+
+    def default_attributes
+      { aria: { hidden: "true" } }
     end
   end
 end

data/lib/shadcn_phlexcomponents/components/command.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class Command < Base
-    class_variants(base: "inline-block max-w-fit")
+    class_variants(base: "inline-flex max-w-fit")
 
     MODIFIER_KEYS = [
       :ctrl,
@@ -10,7 +10,16 @@ module ShadcnPhlexcomponents
       :shift,
     ]
 
-    def initialize(modifier_key: nil, shortcut_key: nil, search_path: nil, open: false, **attributes)
+    def initialize(
+      open: false, 
+      modifier_key: nil, 
+      shortcut_key: nil, 
+      search_path: nil,
+      search_error_text: "Something went wrong, please try again.",
+      search_empty_text: "No results found",
+      search_placeholder_text: "Search...",
+      **attributes
+    )
       if modifier_key && !MODIFIER_KEYS.include?(modifier_key)
         raise ArgumentError, "Expected one of #{MODIFIER_KEYS} for \"modifier_key\", got #{modifier_key}"
       end
@@ -19,6 +28,9 @@ module ShadcnPhlexcomponents
       @modifier_key = modifier_key
       @shortcut_key = shortcut_key
       @search_path = search_path
+      @search_error_text = search_error_text
+      @search_empty_text = search_empty_text
+      @search_placeholder_text = search_placeholder_text
       @aria_id = "command-#{SecureRandom.hex(5)}"
       super(**attributes)
     end
@@ -28,7 +40,14 @@ module ShadcnPhlexcomponents
     end
 
     def content(**attributes, &)
-      CommandContent(aria_id: @aria_id, **attributes, &)
+      CommandContent(
+        search_error_text: @search_error_text,
+        search_empty_text: @search_empty_text,
+        search_placeholder_text: @search_placeholder_text,
+        aria_id: @aria_id, 
+        **attributes, 
+        &
+      )
     end
 
     def item(**attributes, &)
@@ -43,24 +62,24 @@ module ShadcnPhlexcomponents
       CommandGroup(aria_id: @aria_id, **attributes, &)
     end
 
-    def empty(**attributes, &)
-      CommandEmpty(**attributes, &)
-    end
-
     def default_attributes
       {
         data: {
           controller: "command",
+          command_is_open_value: @open.to_s,
           modifier_key: @modifier_key,
           shortcut_key: @shortcut_key,
-          search_path: @search_path,
-          command_is_open_value: @open.to_s,
-        },
+          search_path: @search_path
+        }
       }
     end
 
     def view_template(&)
-      div(**@attributes, &)
+      div(**@attributes) do
+        overlay("command")
+
+        yield
+      end
     end
   end
 
@@ -91,9 +110,8 @@ module ShadcnPhlexcomponents
           controls: "#{@aria_id}-content",
         },
         data: {
-          action: "click->command#open",
           command_target: "trigger",
-          as_child: @as_child.to_s,
+          action: "click->command#open"
         },
       }
     end
@@ -123,18 +141,27 @@ module ShadcnPhlexcomponents
         bg-background bg-clip-padding dark:bg-neutral-900 dark:ring-neutral-800 data-[state=closed]:animate-out#{" "}
         data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0
         data-[state=open]:zoom-in-95 duration-200 fixed gap-4 grid left-[50%] max-w-[calc(100%-2rem)] p-2 pb-11 ring-4 ring-neutral-200/80
-        rounded-xl shadow-2xl sm:max-w-lg top-[50%] translate-x-[-50%] translate-y-[-50%] w-full z-50 pointer-events-auto
+        rounded-xl shadow-2xl sm:max-w-lg top-[50%] translate-x-[-50%] translate-y-[-50%] w-full z-50 pointer-events-auto outline-none
       HEREDOC
     )
 
-    def initialize(search_placeholder: "Search...", aria_id: nil, **attributes)
-      @search_placeholder = search_placeholder
+    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
 
     def default_attributes
       {
+        style: { display: "none" },
         id: "#{@aria_id}-content",
         tabindex: -1,
         role: "dialog",
@@ -143,26 +170,29 @@ module ShadcnPhlexcomponents
           labelledby: "#{@aria_id}-title",
         },
         data: {
-          command_target: "content",
           state: "closed",
+          command_target: "content",
           action: <<~HEREDOC,
-            command:click:outside->command#close
+            command:click:outside->command#clickOutside
             keydown.up->command#highlightItem:prevent
             keydown.down->command#highlightItem:prevent
             keydown.enter->command#select
           HEREDOC
-
         },
       }
     end
 
     def view_template(&)
-      @class = @attributes.delete(:class)
+      div(**@attributes) do
+        template do
+          CommandGroup do
+            CommandLabel { "" }
+          end 
+        end
 
-      div(class: "#{@class} hidden", **@attributes) do
         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 }
+            h2(id: "#{@aria_id}-title") { @search_placeholder_text }
             p(id: "#{@aria_id}-description") { "Search for a command to run..." }
           end
 
@@ -170,7 +200,7 @@ module ShadcnPhlexcomponents
             class: "sr-only",
             id: "#{@aria_id}-search-label",
             for: "#{@aria_id}-search",
-          ) { @search_placeholder }
+          ) { @search_placeholder_text }
 
           div(class: "flex h-9 items-center gap-2 border px-3 bg-input/50 border-input rounded-md") do
             icon("search", class: "size-4 shrink-0 opacity-50")
@@ -179,7 +209,7 @@ module ShadcnPhlexcomponents
               class: "placeholder:text-muted-foreground flex w-full rounded-md bg-transparent py-3 text-sm
               outline-hidden disabled:cursor-not-allowed disabled:opacity-50 h-9",
               id: "#{@aria_id}-search",
-              placeholder: @search_placeholder,
+              placeholder: @search_placeholder_text,
               type: :text,
               autocomplete: "off",
               autocorrect: "off",
@@ -193,13 +223,21 @@ module ShadcnPhlexcomponents
               },
               data: {
                 command_target: "searchInput",
-                action: "input->command#search",
+                action: "keydown->command#inputKeydown input->command#search",
               },
             )
           end
 
-          div(class: "p-1 max-h-80 min-h-80 overflow-y-auto", id: "#{@aria_id}-list", data: { command_target: "list" }) do
-            div(data: { command_target: "results" }, &)
+          div(class: "mt-3 p-1 max-h-80 min-h-80 overflow-y-auto", data: { command_target: "listContainer"})  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()
@@ -251,30 +289,21 @@ module ShadcnPhlexcomponents
   end
 
   class CommandLabel < Base
-    class_variants(base: "text-muted-foreground text-xs p-3 pb-1 text-xs font-medium")
+    class_variants(base: "text-muted-foreground text-xs px-3 pb-1 text-xs font-medium")
 
-    def initialize(aria_id: nil, **attributes)
-      @aria_id = aria_id
+    def initialize( **attributes)
       super(**attributes)
     end
 
     def view_template(&)
       div(**@attributes, &)
     end
-
-    def default_attributes
-      {
-        data: {
-          command_target: "label",
-        },
-      }
-    end
   end
 
   class CommandGroup < Base
-    class_variants(base: "scroll-mt-16")
+    class_variants(base: "scroll-mt-16 first:pt-0 pt-3")
 
-    def initialize(aria_id:, **attributes)
+    def initialize(aria_id: nil, **attributes)
       @aria_id = aria_id
       super(**attributes)
     end
@@ -296,22 +325,23 @@ module ShadcnPhlexcomponents
     end
   end
 
-  class CommandEmpty < Base
+  class CommandText < Base
     class_variants(base: "py-6 text-center text-sm hidden")
+    
+    def initialize(target:, **attributes)
+      @target = target
+      super(**attributes)
+    end
 
     def default_attributes
       {
         role: "presentation",
-        data: { command_target: "empty" },
+        data: { command_target: @target },
       }
     end
 
     def view_template(&)
-      if block_given?
-        div(**@attributes, &)
-      else
-        div(**@attributes) { "No results found" }
-      end
+      div(**@attributes, &)
     end
   end