diff --git a/Gemfile.lock b/Gemfile.lock index aa5a2f29..64072907 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -14,7 +14,7 @@ GIT GIT remote: https://github.com/ruby-ui/ruby_ui.git - revision: d29fac6edc255c352beb688c38e8365c1b277c4b + revision: 500b8d98fbee73f15a3182feb4eca8e8e146d6b5 branch: main specs: ruby_ui (1.0.0.beta1) diff --git a/app/components/ruby_ui/progress.rb b/app/components/ruby_ui/progress.rb new file mode 100644 index 00000000..ecccf714 --- /dev/null +++ b/app/components/ruby_ui/progress.rb @@ -0,0 +1,37 @@ +# frozen_string_literal: true + +module RubyUI + class Progress < Base + def initialize(value: 0, **attrs) + @value = value.to_f.clamp(0, 100) + + super(**attrs) + end + + def view_template + div(**attrs) do + div(**indicator_attrs) + end + end + + private + + def default_attrs + { + role: "progressbar", + aria_valuenow: @value, + aria_valuemin: 0, + aria_valuemax: 100, + aria_valuetext: "#{@value}%", + class: "relative h-2 overflow-hidden rounded-full bg-primary/20 [&>*]:bg-primary" + } + end + + def indicator_attrs + { + class: "h-full w-full flex-1", + style: "transform: translateX(-#{100 - @value}%)" + } + end + end +end diff --git a/app/controllers/docs_controller.rb b/app/controllers/docs_controller.rb index ddc2f97b..52d1dd1e 100644 --- a/app/controllers/docs_controller.rb +++ b/app/controllers/docs_controller.rb @@ -150,6 +150,10 @@ def popover render Docs::PopoverView.new end + def progress + render Docs::ProgressView.new + end + def radio_button render Docs::RadioButtonView.new end diff --git a/app/views/components/shared/menu.rb b/app/views/components/shared/menu.rb index ab67304d..d1c97992 100644 --- a/app/views/components/shared/menu.rb +++ b/app/views/components/shared/menu.rb @@ -90,6 +90,7 @@ def components {name: "Masked Input", path: helpers.masked_input_path}, {name: "Pagination", path: helpers.docs_pagination_path, badge: "New"}, {name: "Popover", path: helpers.docs_popover_path}, + {name: "Progress", path: helpers.docs_progress_path, badge: "New"}, {name: "Radio Button", path: helpers.docs_radio_button_path, badge: "New"}, {name: "Select", path: helpers.docs_select_path, badge: "New"}, {name: "Sheet", path: helpers.docs_sheet_path}, diff --git a/app/views/docs/progress_view.rb b/app/views/docs/progress_view.rb new file mode 100644 index 00000000..b8dd1862 --- /dev/null +++ b/app/views/docs/progress_view.rb @@ -0,0 +1,27 @@ +# frozen_string_literal: true + +class Docs::ProgressView < ApplicationView + def view_template + component = "Progress" + + div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do + render Docs::Header.new(title: "Progress", description: "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.") + + render Docs::VisualCodeExample.new(title: "Example", context: self) do + <<~RUBY + Progress(value: 50, class: "w-[60%]") + RUBY + end + + render Docs::VisualCodeExample.new(title: "With custom indicator color", context: self) do + <<~RUBY + Progress(value: 35, class: "w-[60%] [&>*]:bg-success") + RUBY + end + + render Components::ComponentSetup::Tabs.new(component_name: component) + + render Docs::ComponentsTable.new(component_files(component)) + end + end +end diff --git a/config/routes.rb b/config/routes.rb index 12fe7a86..5a2700b4 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -43,6 +43,7 @@ get "masked_input", to: "docs#masked_input", as: :masked_input get "pagination", to: "docs#pagination", as: :docs_pagination get "popover", to: "docs#popover", as: :docs_popover + get "progress", to: "docs#progress", as: :docs_progress get "radio_button", to: "docs#radio_button", as: :docs_radio_button get "select", to: "docs#select", as: :docs_select get "sheet", to: "docs#sheet", as: :docs_sheet