diff --git a/lib/ruby_ui/calendar/calendar_days.rb b/lib/ruby_ui/calendar/calendar_days.rb index 83954bfb..fd65184b 100644 --- a/lib/ruby_ui/calendar/calendar_days.rb +++ b/lib/ruby_ui/calendar/calendar_days.rb @@ -2,7 +2,13 @@ module RubyUI class CalendarDays < Base - BASE_CLASS = "inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100" + BASE_CLASSES = [ + "inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors h-8 w-8 p-0 font-normal", + "aria-selected:opacity-100", + "disabled:pointer-events-none disabled:opacity-50", + "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed", + "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" + ].freeze def view_template render_selected_date_template @@ -19,11 +25,12 @@ def render_selected_date_template data_day: "{{day}}", data_action: "click->ruby-ui--calendar#selectDay", name: "day", - class: - [ - BASE_CLASS, - "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground" - ], + class: [ + BASE_CLASSES, + "bg-primary text-primary-foreground", + "hover:bg-primary hover:text-primary-foreground", + "focus:bg-primary focus:text-primary-foreground" + ], role: "gridcell", tabindex: "0", type: "button", @@ -38,11 +45,12 @@ def render_today_date_template data_day: "{{day}}", data_action: "click->ruby-ui--calendar#selectDay", name: "day", - class: - [ - BASE_CLASS, - "bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" - ], + class: [ + BASE_CLASSES, + "bg-accent text-accent-foreground", + "hover:bg-accent hover:text-accent-foreground", + "focus:bg-accent focus:text-accent-foreground" + ], role: "gridcell", tabindex: "-1", type: "button" @@ -56,11 +64,12 @@ def render_current_month_date_template data_day: "{{day}}", data_action: "click->ruby-ui--calendar#selectDay", name: "day", - class: - [ - BASE_CLASS, - "bg-background text-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" - ], + class: [ + BASE_CLASSES, + "bg-background text-foreground", + "hover:bg-accent hover:text-accent-foreground", + "focus:bg-accent focus:text-accent-foreground" + ], role: "gridcell", tabindex: "-1", type: "button" @@ -72,13 +81,14 @@ def render_other_month_date_template date_template("otherMonthDateTemplate") do button( data_day: "{{day}}", - data_action: " click->ruby-ui--calendar#selectDay", + data_action: "click->ruby-ui--calendar#selectDay", name: "day", - class: - [ - BASE_CLASS, - "bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" - ], + class: [ + BASE_CLASSES, + "bg-background text-muted-foreground", + "hover:bg-accent hover:text-accent-foreground", + "focus:bg-accent focus:text-accent-foreground" + ], role: "gridcell", tabindex: "-1", type: "button" @@ -89,8 +99,11 @@ def render_other_month_date_template def date_template(target, &block) template(data: {ruby_ui__calendar_target: target}) do td( - class: - "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected])]:rounded-md", + class: [ + "relative p-0 text-center text-sm", + "focus-within:relative focus-within:z-20", + "[&:has([aria-selected])]:bg-accent [&:has([aria-selected])]:rounded-md" + ], role: "presentation", &block ) diff --git a/lib/ruby_ui/calendar/calendar_next.rb b/lib/ruby_ui/calendar/calendar_next.rb index d3644fe4..724168ff 100644 --- a/lib/ruby_ui/calendar/calendar_next.rb +++ b/lib/ruby_ui/calendar/calendar_next.rb @@ -20,8 +20,7 @@ def icon class: "h-4 w-4" ) do |s| s.path( - d: - "M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z", + d: "M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z", fill: "currentColor", fill_rule: "evenodd", clip_rule: "evenodd" @@ -33,8 +32,13 @@ def default_attrs { name: "next-month", aria_label: "Go to next month", - class: - "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1", + class: [ + "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors border border-input h-7 w-7 bg-transparent p-0 opacity-50 absolute right-1", + "disabled:pointer-events-none disabled:opacity-50", + "hover:bg-accent hover:text-accent-foreground hover:opacity-100", + "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed", + "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" + ], type: "button", data_action: "click->ruby-ui--calendar#nextMonth" } diff --git a/lib/ruby_ui/calendar/calendar_prev.rb b/lib/ruby_ui/calendar/calendar_prev.rb index 4bd462a8..88af0819 100644 --- a/lib/ruby_ui/calendar/calendar_prev.rb +++ b/lib/ruby_ui/calendar/calendar_prev.rb @@ -20,8 +20,7 @@ def icon class: "h-4 w-4" ) do |s| s.path( - d: - "M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z", + d: "M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z", fill: "currentColor", fill_rule: "evenodd", clip_rule: "evenodd" @@ -33,8 +32,13 @@ def default_attrs { name: "previous-month", aria_label: "Go to previous month", - class: - "rdp-button_reset rdp-button inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1", + class: [ + "rdp-button_reset rdp-button inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors border border-input h-7 w-7 bg-transparent p-0 opacity-50 absolute left-1", + "disabled:pointer-events-none disabled:opacity-50", + "hover:bg-accent hover:text-accent-foreground hover:opacity-100", + "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed", + "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" + ], type: "button", data_action: "click->ruby-ui--calendar#prevMonth" }