diff --git a/Gemfile.lock b/Gemfile.lock index 53c7e27..2c65ec3 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -14,7 +14,7 @@ GIT GIT remote: https://github.com/ruby-ui/ruby_ui.git - revision: aa983e83f1ece8a3f62c4e816c07d2a2f17b6b90 + revision: 6c79d377e1c550b606f28987c8e04587cb7221ac branch: main specs: ruby_ui (1.0.0.beta1) diff --git a/README.md b/README.md index 1267f55..fb1e72a 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ To contribute to this project, it's recommended to install the gem locally and p ```ruby gem "ruby_ui", path: "../ruby_ui" ``` + ## Working with Components ### Component Development Workflow diff --git a/app/components/ruby_ui/switch.rb b/app/components/ruby_ui/switch.rb new file mode 100644 index 0000000..1dcf275 --- /dev/null +++ b/app/components/ruby_ui/switch.rb @@ -0,0 +1,24 @@ +# frozen_string_literal: true + +module RubyUI + class Switch < Base + def initialize(include_hidden: true, checked_value: "1", unchecked_value: "0", **attrs) + @include_hidden = include_hidden + @checked_value = checked_value + @unchecked_value = unchecked_value + super(**attrs) + end + + def view_template + label( + role: "switch", + class: "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 bg-input has-[:checked]:bg-primary" + ) do + input(type: "hidden", name: attrs[:name], value: @unchecked_value) if @include_hidden + input(**attrs.merge(type: "checkbox", class: "hidden peer", value: @checked_value)) + + span(class: "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform translate-x-0 peer-checked:translate-x-5 ") + end + end + end +end diff --git a/app/controllers/docs_controller.rb b/app/controllers/docs_controller.rb index 5d3ea92..fdbda68 100644 --- a/app/controllers/docs_controller.rb +++ b/app/controllers/docs_controller.rb @@ -162,6 +162,10 @@ def shortcut_key render Docs::ShortcutKeyView.new end + def switch + render Docs::SwitchView.new + end + def table render Docs::TableView.new end diff --git a/app/views/components/shared/menu.rb b/app/views/components/shared/menu.rb index 385a918..60d4ae6 100644 --- a/app/views/components/shared/menu.rb +++ b/app/views/components/shared/menu.rb @@ -93,6 +93,7 @@ def components {name: "Select", path: helpers.docs_select_path, badge: "New"}, {name: "Sheet", path: helpers.docs_sheet_path}, {name: "Shortcut Key", path: helpers.docs_shortcut_key_path}, + {name: "Switch", path: helpers.docs_switch_path}, {name: "Table", path: helpers.docs_table_path}, {name: "Tabs", path: helpers.docs_tabs_path}, {name: "Textarea", path: helpers.docs_textarea_path}, diff --git a/app/views/docs/switch_view.rb b/app/views/docs/switch_view.rb new file mode 100644 index 0000000..da7fab4 --- /dev/null +++ b/app/views/docs/switch_view.rb @@ -0,0 +1,40 @@ +# frozen_string_literal: true + +class Docs::SwitchView < ApplicationView + def view_template + component = "Switch" + + div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do + render Docs::Header.new(title: "Switch", description: "A control that allows the user to toggle between checked and not checked.") + + Heading(level: 2) { "Usage" } + + render Docs::VisualCodeExample.new(title: "Default", context: self) do + <<~RUBY + Switch(name: "switch") + RUBY + end + + render Docs::VisualCodeExample.new(title: "Checked", context: self) do + <<~RUBY + Switch(name: "switch", checked: true) + RUBY + end + + render Docs::VisualCodeExample.new(title: "Disabled", context: self) do + <<~RUBY + Switch(name: "switch", disabled: true) + RUBY + end + + render Docs::VisualCodeExample.new(title: "With flag include_hidden false", context: self) do + <<~RUBY + # Supports the creation of a hidden input to be used in forms inspired by the Ruby on Rails implementation of check_box. Default is true. + Switch(name: "switch", include_hidden: false) + RUBY + end + + render Docs::ComponentsTable.new(component_files(component)) + end + end +end diff --git a/config/routes.rb b/config/routes.rb index f39d20d..077996c 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -46,6 +46,7 @@ get "select", to: "docs#select", as: :docs_select get "sheet", to: "docs#sheet", as: :docs_sheet get "shortcut_key", to: "docs#shortcut_key", as: :docs_shortcut_key + get "switch", to: "docs#switch", as: :docs_switch get "table", to: "docs#table", as: :docs_table get "tabs", to: "docs#tabs", as: :docs_tabs get "textarea", to: "docs#textarea", as: :docs_textarea