shadcn_phlexcomponents 0.1.9 → 0.1.11

data/lib/shadcn_phlexcomponents/components/dropdown_menu_sub.rb

@@ -0,0 +1,135 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DropdownMenuSub < Base
+    def initialize(aria_id: nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def trigger(**attributes, &)
+      DropdownMenuSubTrigger(aria_id: @aria_id, **attributes, &)
+    end
+
+    def content(**attributes, &)
+      DropdownMenuSubContent(aria_id: @aria_id, **attributes, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "dropdown-menu-sub",
+          action: "keydown.left->dropdown-menu-sub#closeOnLeftKeydown:prevent",
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class DropdownMenuSubTrigger < Base
+    class_variants(
+      base: <<~HEREDOC,
+        focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground
+        flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8
+      HEREDOC
+    )
+
+    def initialize(aria_id: nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(**@attributes) do
+        yield
+
+        icon("chevron-right", class: "ml-auto size-4")
+      end
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-trigger",
+        role: "menuitem",
+        aria: {
+          haspopup: "menu",
+          expanded: false,
+          controls: "#{@aria_id}-content",
+        },
+        tabindex: -1,
+        data: {
+          state: "closed",
+          dropdown_menu_sub_target: "trigger",
+          dropdown_menu_target: "item",
+          action: <<~HEREDOC,
+            focus->dropdown-menu#onItemFocus
+            blur->dropdown-menu#onItemBlur
+            keydown.up->dropdown-menu#focusItem:prevent
+            keydown.down->dropdown-menu#focusItem:prevent
+            mouseover->dropdown-menu#focusItem
+            mouseover->dropdown-menu-sub#open
+            click->dropdown-menu-sub#open
+            keydown.right->dropdown-menu-sub#open:prevent
+            keydown.space->dropdown-menu-sub#open:prevent
+            keydown.enter->dropdown-menu-sub#open:prevent
+            keydown.left->dropdown-menu-sub#closeParentSubMenu
+          HEREDOC
+        },
+      }
+    end
+  end
+
+  class DropdownMenuSubContent < Base
+    class_variants(
+      base: <<~HEREDOC,
+        bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out
+        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 z-50 min-w-[8rem]
+        origin-(--radix-popper-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg outline-none
+      HEREDOC
+    )
+
+    def initialize(aria_id: nil, side: :right, align: :start, **attributes)
+      @side = side
+      @align = align
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-content",
+        tabindex: -1,
+        role: "menu",
+        aria: {
+          labelledby: "#{@aria_id}-trigger",
+          orientation: "vertical",
+        },
+        data: {
+          state: "closed",
+          side: @side,
+          align: @align,
+          dropdown_menu_sub_target: "content",
+          action: <<~HEREDOC,
+            mouseover->dropdown-menu-sub#open#{" "}
+            keydown.up->dropdown-menu-sub#focusItemByIndex:prevent:self
+            keydown.down->dropdown-menu-sub#focusItemByIndex:prevent:self
+          HEREDOC
+        },
+      }
+    end
+
+    def view_template(&)
+      div(
+        class: "hidden fixed top-0 left-0 w-max z-50",
+        data: { dropdown_menu_sub_target: "contentContainer" },
+      ) do
+        div(**@attributes, &)
+      end
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/form/form_checkbox.rb

@@ -20,21 +20,20 @@ module ShadcnPhlexcomponents
       @method = method
       @model = model
       @object_name = object_name
-      @value = value
-      @model_value = model&.public_send(method)
+      @value = value || "1"
       @name = name
       @id = id
       @label = label
-      @error = error || (model ? model.errors.full_messages_for(method).first : nil)
+      @error = default_error(error, method)
       @hint = hint
       @aria_id = "form-field-#{SecureRandom.hex(5)}"
-      @checked = checked
+      @checked = default_checked(checked, method)
       super(**attributes)
     end
 
     def label_attributes(use_label_styles: false, **attributes)
       attributes[:class] = [
-        use_label_styles ? Label::STYLES : nil,
+        use_label_styles ? Label.new.class_variants : nil,
         "ml-6",
         attributes[:class],
       ].compact.join(" ")
@@ -64,8 +63,8 @@ module ShadcnPhlexcomponents
             Checkbox(
               id: @id,
               name: @name,
-              value: @value || "1",
-              checked: @checked || !!@model_value,
+              value: @value,
+              checked: @checked,
               aria: aria_attributes,
               disabled: @disabled,
               **@attributes,

data/lib/shadcn_phlexcomponents/components/form/form_checkbox_group.rb

@@ -46,7 +46,7 @@ module ShadcnPhlexcomponents
       @name = name
       @id = id
       @label = label
-      @error = error || (model ? model.errors.full_messages_for(method).first : nil)
+      @error = default_error(error, method)
       @hint = hint
       @disabled_items = disabled_items
       @aria_id = "form-field-#{SecureRandom.hex(5)}"
@@ -89,7 +89,6 @@ module ShadcnPhlexcomponents
           name: @name,
           value: @value || @model_value || [],
           aria: aria_attributes,
-          item_id_prefix: @id,
           **@attributes,
         ) do |c|
           c.items(
@@ -97,6 +96,7 @@ module ShadcnPhlexcomponents
             value_method: @value_method,
             text_method: @text_method,
             disabled_items: @disabled_items,
+            id_prefix: @id,
           ) do
             if @checkbox_attributes
               c.checkbox(**@checkbox_attributes)

data/lib/shadcn_phlexcomponents/components/form/form_date_picker.rb

@@ -19,12 +19,11 @@ module ShadcnPhlexcomponents
       @method = method
       @model = model
       @object_name = object_name
-      @value = value
-      @model_value = model&.public_send(method)
+      @value = default_value(value, method)
       @name = name
       @id = id
       @label = label
-      @error = error || (model ? model.errors.full_messages_for(method).first : nil)
+      @error = default_error(error, method)
       @hint = hint
       @aria_id = "form-field-#{SecureRandom.hex(5)}"
       super(**attributes)
@@ -38,7 +37,7 @@ module ShadcnPhlexcomponents
 
       div(class: "space-y-2", data: label_and_hint_container_attributes) do
         render_label(&)
-        DatePicker(id: @id, name: @name, value: @value || @model_value, aria: aria_attributes, **@attributes)
+        DatePicker(id: @id, name: @name, value: @value, aria: aria_attributes, **@attributes)
         render_hint(&)
         render_error
       end

data/lib/shadcn_phlexcomponents/components/form/form_date_range_picker.rb

@@ -5,36 +5,35 @@ module ShadcnPhlexcomponents
     include FormHelpers
 
     def initialize(
-      start_date_method,
-      end_date_method,
+      method,
+      end_method,
       model: false,
       object_name: nil,
-      start_date: nil,
-      end_date: nil,
-      start_date_name: nil,
-      end_date_name: nil,
+      value: nil,
+      name: nil,
       id: nil,
       label: nil,
-      start_date_error: nil,
-      end_date_error: nil,
+      error: nil,
       hint: nil,
       **attributes
     )
-      @start_date_method = start_date_method
-      @end_date_method = end_date_method
+      @method = method
+      @end_method = end_method
       @model = model
       @object_name = object_name
-      @start_date = start_date
-      @end_date = start_date
-      @start_date_model_value = model&.public_send(start_date_method)
-      @end_date_model_value = model&.public_send(end_date_method)
-      @start_date_name = start_date_name
-      @end_date_name = end_date_name
+
+      @value = [
+        default_value(value ? value[0] : nil, method),
+        default_value(value ? value[1] : nil, end_method),
+      ]
+      @error = [
+        default_error(error ? error[0] : nil, method),
+        default_error(error ? error[1] : nil, end_method),
+      ].compact
+
+      @name = name
       @id = id
       @label = label
-      @start_date_error = start_date_error || (model ? model.errors.full_messages_for(start_date_method).first : nil)
-      @end_date_error = end_date_error || (model ? model.errors.full_messages_for(end_date_method).first : nil)
-      @error = (@start_date_error || @end_date_error).present?
       @hint = hint
       @aria_id = "form-field-#{SecureRandom.hex(5)}"
       super(**attributes)
@@ -52,39 +51,26 @@ module ShadcnPhlexcomponents
         Label(**attrs) { @label }
       elsif @label != false
         attrs = label_attributes(use_label_styles: true)
-        rails_label(@object_name, [@start_date_method, @end_date_method].to_sentence, nil, **attrs)
-      end
-    end
-
-    def render_error
-      if @start_date_error && @end_date_error
-        FormError(nil, aria_id: @aria_id) do
-          span { @start_date_error }
-          br
-          span { @end_date_error }
-        end
-      elsif @start_date_error
-        FormError(@start_date_error, aria_id: @aria_id)
-      elsif @end_date_error
-        FormError(@end_date_error, aria_id: @aria_id)
+        rails_label(@object_name, [@method, @end_method].to_sentence, nil, **attrs)
       end
     end
 
     def view_template(&)
       vanish(&)
 
-      @id ||= field_id(@object_name, @start_date_method)
-      @start_date_name ||= field_name(@object_name, @start_date_method)
-      @end_date_name ||= field_name(@object_name, @end_date_method)
+      @id ||= field_id(@object_name, @method)
+      @name ||=
+        [
+          field_name(@object_name, @method),
+          field_name(@object_name, @end_method),
+        ]
 
       div(class: "space-y-2", data: label_and_hint_container_attributes) do
         render_label(&)
         DateRangePicker(
           id: @id,
-          start_date_name: @start_date_name,
-          end_date_name: @end_date_name,
-          start_date: @start_date || @start_date_model_value,
-          end_date: @end_date || @end_date_model_value,
+          name: @name,
+          value: @value,
           aria: aria_attributes,
           **@attributes,
         )

data/lib/shadcn_phlexcomponents/components/form/form_error.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class FormError < Base
-    STYLES = "text-[0.8rem] font-medium text-destructive"
+    class_variants(base: "text-destructive text-sm")
 
     def initialize(message, aria_id: nil, **attributes)
       @message = message

data/lib/shadcn_phlexcomponents/components/form/form_helpers.rb

@@ -64,15 +64,23 @@ module ShadcnPhlexcomponents
     end
 
     def render_error
-      if @error
-        FormError(@error, aria_id: @aria_id)
+      if @error.present?
+        if @error.is_a?(Array)
+          FormError(nil, aria_id: @aria_id, class: "space-y-0.5") do
+            @error.each do |error|
+              span(class: "block") { error }
+            end
+          end
+        else
+          FormError(@error, aria_id: @aria_id)
+        end
       end
     end
 
     def label_attributes(use_label_styles: false, **attributes)
       attributes[:class] = [
-        use_label_styles ? Label::STYLES : nil,
-        @error ? "text-destructive" : nil,
+        use_label_styles ? Label.new.class_variants : nil,
+        @error.present? ? "text-destructive" : nil,
         attributes[:class],
       ].compact.join(" ")
       attributes[:for] ||= @id
@@ -92,17 +100,44 @@ module ShadcnPhlexcomponents
     def aria_attributes
       {
         describedby: describedby,
-        invalid: @error.present?,
-      }.compact
+        invalid: @error.present?.to_s,
+      }
     end
 
     def describedby
-      return if !@hint && !@error
+      return if !@hint && !@error.present?
 
       [
         @hint ? "#{@aria_id}-description" : nil,
-        @error ? "#{@aria_id}-message" : nil,
+        @error.present? ? "#{@aria_id}-message" : nil,
       ].compact.join(" ")
     end
+
+    def default_value(value, method)
+      return value unless value.nil?
+      return unless @model
+
+      if @model.respond_to?(method)
+        @model.public_send(method)
+      end
+    end
+
+    def default_checked(checked, method)
+      return checked if [true, false].include?(checked)
+      return unless @model
+
+      if @model.respond_to?(method)
+        !!@model.public_send(method)
+      end
+    end
+
+    def default_error(error, method)
+      return error unless error.nil?
+      return unless @model
+
+      if @model.respond_to?(:errors)
+        @model.errors.full_messages_for(method).first
+      end
+    end
   end
 end

data/lib/shadcn_phlexcomponents/components/form/form_hint.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class FormHint < Base
-    STYLES = "text-[0.8rem] text-muted-foreground"
+    class_variants(base: "text-muted-foreground text-sm")
 
     def initialize(message = nil, aria_id: nil, **attributes)
       @message = message

data/lib/shadcn_phlexcomponents/components/form/form_input.rb

@@ -21,12 +21,11 @@ module ShadcnPhlexcomponents
       @model = model
       @object_name = object_name
       @type = type.to_sym
-      @value = value
-      @model_value = model&.public_send(method)
+      @value = default_value(value, method)
       @name = name
       @id = id
       @label = label
-      @error = error || (model ? model.errors.full_messages_for(method).first : nil)
+      @error = default_error(error, method)
       @hint = hint
       @aria_id = "form-field-#{SecureRandom.hex(5)}"
       super(**attributes)
@@ -40,7 +39,7 @@ module ShadcnPhlexcomponents
 
       div(class: "space-y-2", data: label_and_hint_container_attributes) do
         render_label(&)
-        Input(type: @type, id: @id, name: @name, value: @value || @model_value, aria: aria_attributes, **@attributes)
+        Input(type: @type, id: @id, name: @name, value: @value, aria: aria_attributes, **@attributes)
         render_hint(&)
         render_error
       end

data/lib/shadcn_phlexcomponents/components/form/form_radio_group.rb

@@ -32,12 +32,11 @@ module ShadcnPhlexcomponents
 
       @value_method = value_method
       @text_method = text_method
-      @value = value
-      @model_value = model&.public_send(method)
+      @value = default_value(value, method)
       @name = name
       @id = id
       @label = label
-      @error = error || (model ? model.errors.full_messages_for(method).first : nil)
+      @error = default_error(error, method)
       @hint = hint
       @disabled_items = disabled_items
       @aria_id = "form-field-#{SecureRandom.hex(5)}"
@@ -78,9 +77,8 @@ module ShadcnPhlexcomponents
         RadioGroup(
           name: @name,
           id: @id,
-          value: @value || @model_value,
+          value: @value,
           aria: aria_attributes,
-          item_id_prefix: @id,
           **@attributes,
         ) do |c|
           c.items(
@@ -88,6 +86,7 @@ module ShadcnPhlexcomponents
             value_method: @value_method,
             text_method: @text_method,
             disabled_items: @disabled_items,
+            id_prefix: @id,
           ) do
             if @radio_attributes
               c.radio(**@radio_attributes)

data/lib/shadcn_phlexcomponents/components/form/form_select.rb

@@ -32,12 +32,11 @@ module ShadcnPhlexcomponents
 
       @value_method = value_method
       @text_method = text_method
-      @value = value
-      @model_value = model&.public_send(method)
+      @value = default_value(value, method)
       @name = name
       @id = id
       @label = label
-      @error = error || (model ? model.errors.full_messages_for(method).first : nil)
+      @error = default_error(error, method)
       @hint = hint
       @disabled_items = disabled_items
       @aria_id = "form-field-#{SecureRandom.hex(5)}"
@@ -53,7 +52,7 @@ module ShadcnPhlexcomponents
       div(class: "space-y-2", data: label_and_hint_container_attributes) do
         render_label(&)
 
-        Select(id: @id, name: @name, value: @value || @model_value, aria: aria_attributes, **@attributes) do |s|
+        Select(id: @id, name: @name, value: @value, aria: aria_attributes, **@attributes) do |s|
           s.items(@collection, value_method: @value_method, text_method: @text_method, disabled_items: @disabled_items)
         end
 

data/lib/shadcn_phlexcomponents/components/form/form_slider.rb

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class FormSlider < Base
+    include FormHelpers
+
+    def initialize(
+      method,
+      end_method = nil,
+      model: false,
+      object_name: nil,
+      range: false,
+      value: nil,
+      name: nil,
+      id: nil,
+      label: nil,
+      error: nil,
+      hint: nil,
+      **attributes
+    )
+      @method = method
+      @end_method = end_method
+      @model = model
+      @object_name = object_name
+      @range = range
+
+      if @range
+        @value = [
+          default_value(value ? value[0] : nil, method),
+          default_value(value ? value[1] : nil, end_method),
+        ]
+        @error = [
+          default_error(error ? error[0] : nil, method),
+          default_error(error ? error[1] : nil, end_method),
+        ].compact
+      else
+        @value = default_value(value, method)
+        @error = default_error(error, method)
+      end
+
+      @name = name
+      @id = id
+      @label = label
+      @hint = hint
+      @aria_id = "form-field-#{SecureRandom.hex(5)}"
+      super(**attributes)
+    end
+
+    def render_label(&)
+      # It's currently not possible to separate the content of the yield in Phlex.
+      # So we use Javascript to remove the duplicated hint or label.
+      if @yield_label && @yield_hint
+        div(data: { remove_hint: true }, &)
+      elsif @yield_label
+        yield
+      elsif @label
+        attrs = label_attributes(use_label_styles: false)
+        Label(**attrs) { @label }
+      elsif @label != false
+        attrs = label_attributes(use_label_styles: true)
+        label_text = @range ? [@method, @end_method].to_sentence : @method
+        rails_label(@object_name, label_text, nil, **attrs)
+      end
+    end
+
+    def view_template(&)
+      vanish(&)
+
+      @id ||= field_id(@object_name, @method)
+
+      if @name.blank?
+        @name =
+          if @range
+            [
+              field_name(@object_name, @method),
+              field_name(@object_name, @end_method),
+            ]
+          else
+            field_name(@object_name, @method)
+          end
+      end
+
+      div(class: "space-y-2", data: label_and_hint_container_attributes) do
+        render_label(&)
+        Slider(id: @id, name: @name, value: @value, aria: aria_attributes, range: @range, **@attributes)
+        render_hint(&)
+        render_error
+      end
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/form/form_switch.rb

@@ -14,25 +14,26 @@ module ShadcnPhlexcomponents
       label: nil,
       error: nil,
       hint: nil,
+      checked: nil,
       **attributes
     )
       @method = method
       @model = model
       @object_name = object_name
-      @value = value
-      @model_value = model&.public_send(method)
+      @value = value || "1"
       @name = name
       @id = id
       @label = label
-      @error = error || (model ? model.errors.full_messages_for(method).first : nil)
+      @error = default_error(error, method)
       @hint = hint
       @aria_id = "form-field-#{SecureRandom.hex(5)}"
+      @checked = default_checked(checked, method)
       super(**attributes)
     end
 
     def label_attributes(use_label_styles: false, **attributes)
       attributes[:class] = [
-        use_label_styles ? Label::STYLES : nil,
+        use_label_styles ? Label.new.class_variants : nil,
         attributes[:class],
       ].compact.join(" ")
       attributes[:for] ||= @id
@@ -50,8 +51,8 @@ module ShadcnPhlexcomponents
           Switch(
             id: @id,
             name: @name,
-            value: @value || "1",
-            checked: !!@model_value,
+            value: @value,
+            checked: @checked,
             aria: aria_attributes,
             disabled: @disabled,
             **@attributes,

data/lib/shadcn_phlexcomponents/components/form/form_textarea.rb

@@ -19,12 +19,11 @@ module ShadcnPhlexcomponents
       @method = method
       @model = model
       @object_name = object_name
-      @value = value
-      @model_value = model&.public_send(method)
+      @value = default_value(value, method)
       @name = name
       @id = id
       @label = label
-      @error = error || (model ? model.errors.full_messages_for(method).first : nil)
+      @error = default_error(error, method)
       @hint = hint
       @aria_id = "form-field-#{SecureRandom.hex(5)}"
       super(**attributes)
@@ -46,7 +45,7 @@ module ShadcnPhlexcomponents
             type: @type,
             id: @id,
             name: @name,
-            value: @value || @model_value,
+            value: @value,
             aria: aria_attributes,
             **@attributes,
           )