lesli_view 1.1.2 → 1.1.4

data/lib/lesli_view/forms/fields.rb

@@ -1,67 +1,113 @@
 module LesliView
     module Forms
         module Fields
-            def field_control(attribute, label: nil, message:nil, category:nil, icon:nil, horizontal: false)
-                field_control_text(attribute, label:label, message:message, category:category, icon:icon, horizontal:horizontal)
+            def field_control(attribute, label: nil, message: nil, category: nil, icon: nil, horizontal: false, **options)
+                field_control_text(attribute, label: label, message: message, category: category, icon: icon, horizontal: horizontal, **options)
             end
 
-            def field_control_checkbox(attribute, label: nil, message:nil, category:nil, icon:nil, horizontal: false)
+            def field_control_checkbox(attribute, label: nil, message: nil, category: nil, icon: nil, horizontal: false, **options)
+                label_text = label.presence || attribute.to_s.humanize
+                checkbox_html = check_box(attribute, options, true, false)
+                control_html = @template.content_tag(:label, class: "lesli-form-checkbox-label") do
+                    @template.safe_join([
+                        checkbox_html,
+                        @template.content_tag(:span, label_text)
+                    ])
+                end
+
+                field_control_builder(
+                    control_html: control_html,
+                    message_text: message,
+                    category: category,
+                    horizontal: horizontal
+                )
+            end
+
+            def field_control_password(attribute, label: nil, message: nil, category: nil, icon: nil, horizontal: false, **options)
                 label_html = label(attribute, label)
-                text_field_html = check_box(attribute, {}, true, false)
+                control_html = password_field(attribute, options)
 
                 field_control_builder(
                     label_html: label_html,
-                    control_html: text_field_html,
+                    control_html: control_html,
+                    message_text: message,
+                    category: category,
+                    icon: icon,
                     horizontal: horizontal
                 )
             end
 
-            def field_control_text(attribute, label: nil, message:nil, category:nil, icon:nil, horizontal: false)
+            def field_control_text(attribute, label: nil, message: nil, category: nil, icon: nil, horizontal: false, **options)
                 label_html = label(attribute, label)
-                text_field_html = text_field(attribute)
+                control_html = text_field(attribute, options)
 
                 field_control_builder(
                     label_html: label_html,
-                    control_html: text_field_html,
+                    control_html: control_html,
+                    message_text: message,
+                    category: category,
+                    icon: icon,
                     horizontal: horizontal
                 )
             end
 
-            def field_control_email(attribute, label: nil, message:nil, category:nil, icon:nil, horizontal: false)
+            def field_control_email(attribute, label: nil, message: nil, category: nil, icon: nil, horizontal: false, **options)
                 label_html = label(attribute, label)
-                control_html = email_field(attribute)
+                control_html = email_field(attribute, options)
 
                 field_control_builder(
                     label_html: label_html,
                     control_html: control_html,
+                    message_text: message,
+                    category: category,
                     horizontal: horizontal,
-                    icon:icon
+                    icon: icon
                 )
             end
 
-            def field_control_select(attribute, choices, label: nil, message:nil, category:nil, icon:nil, horizontal: false, humanize:true)
-                choices = choices.map { |k, v| [k.humanize.capitalize, v] } if humanize
-                value = @object.send(attribute)
+            def field_control_select(attribute, choices, label: nil, message: nil, category: nil, icon: nil, horizontal: false, humanize: true, options: {}, html_options: {})
+                choices = choices.map { |text, value| [text.to_s.humanize, value] } if humanize
                 label_html = label(attribute, label)
-                select_html = select(attribute, choices, {}, { value: value })
+                select_html = select(attribute, choices, options, html_options)
 
                 field_control_builder(
                     label_html: label_html,
-                    control_html: @template.content_tag(:div, select_html, class: "select is-fullwidth"),
+                    control_html: @template.content_tag(:div, select_html, class: "lesli-form-select-wrapper"),
+                    message_text: message,
+                    category: category,
+                    icon: icon,
                     horizontal: horizontal
                 )
             end
 
-            def field_control_textarea(attribute, label:nil, message:nil, category:nil, icon:nil, horizontal: false)
-
-                label_html = label == false ? '' : label(attribute, label)
-                control_html = rich_textarea(attribute)
+            def field_control_textarea(attribute, label: nil, message: nil, category: nil, icon: nil, horizontal: false, **options)
+                label_html = label == false ? nil : label(attribute, label)
+                control_html = rich_textarea(attribute, options)
 
                 field_control_builder(
                     label_html: label_html,
                     control_html: control_html,
+                    message_text: message,
+                    category: category,
                     horizontal: horizontal,
-                    icon:icon
+                    icon: icon
+                )
+            end
+
+            # Backward-compatible shorthand used by older Lesli forms.
+            def field_textarea(attribute, **options)
+                field_control_textarea(attribute, **options)
+            end
+
+            def field_select(attribute, choices, options = {}, html_options = {}, label: nil, humanize: true, **field_options)
+                field_control_select(
+                    attribute,
+                    choices,
+                    label: label,
+                    humanize: humanize,
+                    options: options,
+                    html_options: html_options,
+                    **field_options
                 )
             end
 
@@ -70,75 +116,62 @@ module LesliView
                 field_control_builder(control_html: submit_html, horizontal: horizontal)
             end
 
-            def field_control_button(value = nil, options = {}, category:"primary", icon:nil, type:"submit", horizontal: false)
-                # Merge user-provided classes with default button classes
-                button_classes = ["button", "is-#{category}"]
+            def field_control_button(value = nil, options = {}, category: "primary", icon: nil, type: "submit", horizontal: false)
+                options = options.symbolize_keys
+                button_classes = merge_css_classes("lesli-form-button", css_category(category), options.delete(:class))
 
-                button_html = @template.content_tag(:button, class: button_classes, type: type, **options.except(:class)) do
-                    html = "".html_safe
+                button_html = @template.content_tag(:button, class: button_classes, type: type, **options) do
+                    content = []
                     if icon.present?
-                        html << @template.content_tag(:span, class: "icon") do
+                        content << @template.content_tag(:span, class: "lesli-form-button-icon", aria: { hidden: true }) do
                             @template.content_tag(:span, icon, class: "material-symbols")
                         end
                     end
-                    html << @template.content_tag(:span, value) if value.present?
-                    html
+                    content << @template.content_tag(:span, value) if value.present?
+                    @template.safe_join(content)
                 end
-                field_control_builder(control_html: button_html, icon:nil, horizontal: horizontal)
+                field_control_builder(control_html: button_html, horizontal: horizontal)
             end
 
             def field_control_builder(
-                label_html:nil, 
-                control_html:nil, 
-                message_text:nil,
-                horizontal:false, 
-                category:nil,
-                icon:nil, 
+                label_html: nil,
+                control_html: nil,
+                message_text: nil,
+                horizontal: false,
+                category: nil,
+                icon: nil,
                 &block
             )
-
-                icon_left = icon
-                icon_right = nil
-
-                # Conditionally add 'is-horizontal' if horizontal is true
-                field_classes = ['field']
-                field_classes << 'is-horizontal' if horizontal
-
-                control_classes = ['control']
-                control_classes << 'has-icons-left' if icon_left
-                control_classes << 'has-icons-right' if icon_right
-
-                help_class = ""
-
-                @template.content_tag(:div, class: 'lesli-form-field mb-3') do
-                    @template.content_tag(:div, class: field_classes.join(' ')) do
-                        @template.content_tag(:div, label_html, class: 'field-label is-normal mb-1') +
-                        @template.content_tag(:div, class: 'field-body') do
-                            @template.content_tag(:div, class: 'field') do
-                                control_html = @template.content_tag(:div, class: control_classes.join(' ')) do
-                                    content = ''.html_safe
-                                    content << (block_given? ? @template.capture(&block) : control_html)
-                                    content << icon_html(icon_left, 'left') if icon_left
-                                    content << icon_html(icon_right, 'right') if icon_right
-                                    content
-                                end
-                                control_html + @template.content_tag(:p, message_text, class: "help #{css_category(category)}")
-                            end
+                field_classes = merge_css_classes("lesli-form-field", horizontal && "is-horizontal", css_category(category))
+                control_classes = merge_css_classes("lesli-form-control", icon.present? && "has-icon")
+                captured_control = block_given? ? @template.capture(&block) : control_html
+
+                @template.content_tag(:div, class: field_classes) do
+                    content = []
+                    content << @template.content_tag(:div, label_html, class: "lesli-form-label-wrapper") if label_html.present?
+                    content << @template.content_tag(:div, class: "lesli-form-field-body") do
+                        body = []
+                        body << @template.content_tag(:div, class: control_classes) do
+                            @template.safe_join([captured_control, icon_html(icon)].compact)
                         end
+                        if message_text.present?
+                            body << @template.content_tag(:p, message_text, class: merge_css_classes("lesli-form-help", css_category(category)))
+                        end
+                        @template.safe_join(body)
                     end
+                    @template.safe_join(content)
                 end
             end
 
             private
 
-            def icon_html(icon_class, position)
-                return ''.html_safe unless icon_class
+            def icon_html(icon_name)
+                return unless icon_name.present?
 
-                @template.content_tag(:span, class: "icon is-small is-#{position}") do
-                    #@template.content_tag(:i, '', class: icon_class)
-                    @template.content_tag(:span, icon_class, class: "material-symbols-outlined")
+                @template.content_tag(:span, class: "lesli-form-icon", aria: { hidden: true }) do
+                    @template.content_tag(:span, icon_name, class: "material-symbols-outlined")
                 end
-            end          
+            end
         end
     end
 end  

data/lib/lesli_view/forms/fieldset.rb

@@ -2,11 +2,11 @@ module LesliView
     module Forms
         module Fieldset
             def fieldset(legend = "", options = {}, category: nil, &block)
-                options[:class] = ["lesli-form-fieldset", "box", "pr-6", "is-#{category}"]
-                options[:class].push("pt-5") unless legend.present?
+                options = options.symbolize_keys
+                options[:class] = merge_css_classes("lesli-form-fieldset", css_category(category), options[:class])
 
                 @template.content_tag(:fieldset, options) do
-                    legend_html = legend.present? ? @template.content_tag(:h5, legend, class: ["is-size-5", "mb-5", "ml-2"]) : nil
+                    legend_html = legend.present? ? @template.content_tag(:legend, legend, class: "lesli-form-legend") : nil
                     @template.safe_join([legend_html, @template.capture(&block)].compact)
                 end
             end

data/lib/lesli_view/forms/form.css

@@ -0,0 +1,171 @@
+/* Tailwind styles for LesliView::Forms builders. */
+
+@layer components {
+    .lesli-form-field {
+        @apply mb-4;
+    }
+
+    .lesli-form-label-wrapper {
+        @apply mb-2;
+    }
+
+    .lesli-form-label {
+        @apply block text-sm font-medium leading-5 text-slate-700;
+    }
+
+    .lesli-form-field-body {
+        @apply min-w-0;
+    }
+
+    .lesli-form-control {
+        @apply relative;
+    }
+
+    .lesli-form-input,
+    .lesli-form-select,
+    .lesli-form-control textarea,
+    .lesli-form-control trix-editor {
+        @apply block w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-sm text-slate-900 shadow-sm outline-none transition placeholder:text-slate-400 hover:border-slate-400 focus:border-sky-500 focus:ring-4 focus:ring-sky-500/10 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-500 disabled:opacity-75;
+    }
+
+    .lesli-form-input,
+    .lesli-form-select {
+        @apply h-11;
+    }
+
+    .lesli-form-control textarea,
+    .lesli-form-control trix-editor {
+        @apply min-h-32 resize-y;
+    }
+
+    .lesli-form-select-wrapper {
+        @apply relative;
+    }
+
+    .lesli-form-select {
+        @apply cursor-pointer appearance-none pr-10;
+    }
+
+    .lesli-form-select-wrapper::after {
+        @apply pointer-events-none absolute right-3.5 top-1/2 h-2 w-2 -translate-y-2 rotate-45 border-b-2 border-r-2 border-slate-400 content-[''];
+    }
+
+    .lesli-form-checkbox {
+        @apply h-4 w-4 cursor-pointer rounded border-slate-300 accent-sky-600 focus:ring-2 focus:ring-sky-500/30 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
+    }
+
+    .lesli-form-checkbox-label {
+        @apply inline-flex cursor-pointer items-center gap-2.5 text-sm text-slate-600;
+    }
+
+    .lesli-form-control.has-icon .lesli-form-input,
+    .lesli-form-control.has-icon .lesli-form-select {
+        @apply pl-11;
+    }
+
+    .lesli-form-icon {
+        @apply pointer-events-none absolute left-3.5 top-1/2 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center text-slate-400;
+    }
+
+    .lesli-form-icon .material-symbols-outlined {
+        @apply text-xl leading-none;
+    }
+
+    .lesli-form-help {
+        @apply mt-2 text-sm leading-5 text-slate-500;
+    }
+
+    .lesli-form-field.is-danger .lesli-form-input,
+    .lesli-form-field.is-danger .lesli-form-select,
+    .lesli-form-field.is-danger textarea,
+    .lesli-form-field.is-danger trix-editor {
+        @apply border-rose-400 focus:border-rose-500 focus:ring-rose-500/10;
+    }
+
+    .lesli-form-help.is-danger {
+        @apply text-rose-700;
+    }
+
+    .lesli-form-help.is-warning {
+        @apply text-amber-700;
+    }
+
+    .lesli-form-help.is-success {
+        @apply text-emerald-700;
+    }
+
+    .lesli-form-help.is-info {
+        @apply text-sky-700;
+    }
+
+    .lesli-form-button {
+        @apply inline-flex h-11 cursor-pointer items-center justify-center gap-2 rounded-xl border border-transparent px-4 text-sm font-semibold shadow-sm transition focus:outline-none focus:ring-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50;
+    }
+
+    .lesli-form-button.is-primary,
+    .lesli-form-button.is-info {
+        @apply bg-sky-600 text-white hover:bg-sky-700 focus:ring-sky-500/20;
+    }
+
+    .lesli-form-button.is-success {
+        @apply bg-emerald-600 text-white hover:bg-emerald-700 focus:ring-emerald-500/20;
+    }
+
+    .lesli-form-button.is-warning {
+        @apply bg-amber-500 text-amber-950 hover:bg-amber-600 focus:ring-amber-500/20;
+    }
+
+    .lesli-form-button.is-danger {
+        @apply bg-rose-600 text-white hover:bg-rose-700 focus:ring-rose-500/20;
+    }
+
+    .lesli-form-button.is-fullwidth {
+        @apply w-full;
+    }
+
+    .lesli-form-button-icon {
+        @apply inline-flex h-5 w-5 items-center justify-center;
+    }
+
+    .lesli-form-button-icon .material-symbols {
+        @apply text-xl leading-none;
+    }
+
+    .lesli-form-fieldset {
+        @apply mb-6 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm;
+    }
+
+    .lesli-form-legend {
+        @apply -ml-1 mb-5 px-1 text-lg font-semibold text-slate-800;
+    }
+
+    .lesli-form-fieldset.is-info {
+        @apply border-sky-200 bg-sky-50/40;
+    }
+
+    .lesli-form-fieldset.is-success {
+        @apply border-emerald-200 bg-emerald-50/40;
+    }
+
+    .lesli-form-fieldset.is-warning {
+        @apply border-amber-200 bg-amber-50/50;
+    }
+
+    .lesli-form-fieldset.is-danger {
+        @apply border-rose-200 bg-rose-50/40;
+    }
+
+    @media (min-width: 768px) {
+        .lesli-form-field.is-horizontal {
+            @apply grid grid-cols-[minmax(8rem,1fr)_minmax(0,3fr)] items-start gap-5;
+        }
+
+        .lesli-form-field.is-horizontal > .lesli-form-label-wrapper {
+            @apply mb-0 pt-2.5 text-right;
+        }
+
+        .lesli-form-field.is-horizontal > .lesli-form-field-body {
+            @apply col-start-2;
+        }
+    }
+}

data/lib/lesli_view/forms/form.scss

@@ -31,57 +31,5 @@ Building a better future, one line of code at a time.
 */
 
 
-// · 
-.lesli-form-field {
-    .field:not(.is-horizontal) {
-        .field-label {
-            text-align: left;
-        }
-    }
-}
-
-
-.lesli-form-fieldset {
-    padding: 2.5rem 2rem;
-    border-radius: 5px;
-    //border: 1px solid #ccc;
-    background-color: #fff;
-    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
-
-    fieldset {
-        padding: 1.2rem;
-        border-radius: 5px;
-        border: 1px solid #ccc;
-        margin-bottom: 1rem;
-    }
-}
-
-
-form fieldset.is-warning {
-    border: 2px solid var(--bulma-warning);
-    background-color: var(--bulma-warning-95);
-}
-form fieldset.is-warning h5 {
-    color: var(--bulma-warning-bold);
-    font-weight: 600;
-}
-
-
-form fieldset.is-info {
-    border: 2px solid var(--bulma-info);
-    background-color: var(--bulma-info-95);
-}
-form fieldset.is-info h5 {
-    color: var(--bulma-info-bold);
-    font-weight: 600;
-}
-
-
-form fieldset.is-danger {
-    border: 2px solid var(--bulma-danger);
-    background-color: var(--bulma-danger-95);
-}
-form fieldset.is-danger h5 {
-    color: var(--bulma-danger-bold);
-    font-weight: 600;
-}
+// LesliView forms have migrated to Tailwind.
+// See lib/lesli_view/forms/form.css.

data/lib/lesli_view/forms/inputs.rb

@@ -2,17 +2,21 @@ module LesliView
     module Forms
         module Inputs
             def label(method, text = nil, options = {})
-                super(method, text, options.merge(class: 'label'))
+                options = options.symbolize_keys
+                options[:class] = merge_css_classes("lesli-form-label", options[:class])
+                super(method, text, options)
             end
 
             def check_box(method, options = {}, checked_value = "1", unchecked_value = "0")
-                value = @object.send(method)
+                options = options.symbolize_keys
+                options[:class] = merge_css_classes("lesli-form-checkbox", options[:class])
                 super(method, options, checked_value, unchecked_value)
             end
 
             def text_field(method, options = {})
-                value = @object.send(method) if @object
-                super(method, options.merge(value: value, class: 'input'))
+                options = options.symbolize_keys
+                options[:class] = merge_css_classes("lesli-form-input", options[:class])
+                super(method, options)
             end
 
             def text_editor(method, options = {})
@@ -26,22 +30,30 @@ module LesliView
 
 
             def email_field(method, options = {})
-                value = @object.send(method)
-                super(method, options.merge(value: value, class: 'input'))
+                options = options.symbolize_keys
+                options[:class] = merge_css_classes("lesli-form-input", options[:class])
+                super(method, options)
             end
 
             def password_field(method, options = {})
-                value = @object.send(method)
-                super(method, options.merge(value: value, class: 'input'))
+                options = options.symbolize_keys
+                options[:class] = merge_css_classes("lesli-form-input", options[:class])
+                options[:value] = @object.public_send(method) if @object && !options.key?(:value)
+                super(method, options)
+            end
+
+            def select(method, choices = nil, options = {}, html_options = {}, &block)
+                html_options = html_options.symbolize_keys
+                html_options[:class] = merge_css_classes("lesli-form-select", html_options[:class])
+                super(method, choices, options, html_options, &block)
+            end
+
+            def submit(value = nil, options = {})
+                options = options.symbolize_keys
+                options[:class] = merge_css_classes("lesli-form-button is-primary", options[:class])
+                super(value, options)
             end
 
-            def submit(value=nil, options = {})
-                # Extract and merge classes properly
-                default_classes = "button is-primary"
-                custom_classes = options[:class] || ""
-                merged_classes = "#{default_classes} #{custom_classes}".strip
-                super(value, options.merge(class: merged_classes))
-            end 
         end
     end
 end

data/lib/lesli_view/items/activities.html.erb

@@ -29,10 +29,8 @@ Building a better future, one line of code at a time.
 // · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
 // · 
 %>
-
-
-
-<article class="lesli-items-activities" id="lesli-items-activities">
-    <%= render(LesliView::Components::Timeline.new(activities:@activities, icons:@icons)) %>
+<article
+    class="lesli-items-activities bg-white p-4 sm:p-8"
+    id="lesli-items-activities">
+    <%= render(LesliView::Components::Timeline.new(activities: @activities, icons: @icons)) %>
 </article>
-

data/lib/lesli_view/items/discussion.html.erb

@@ -1,9 +1,10 @@
-<div class="lesli-items-discussions-comments-comment is-flex mb-6">
-    <div class="has-text-right">
-        <strong>Luis Donis</strong> <br>
+<li class="lesli-items-discussions-comments-comment flex flex-col gap-3 border-b border-slate-200 pb-6 last:border-b-0 last:pb-0 sm:flex-row sm:gap-4">
+    <div class="shrink-0 text-sm leading-5 text-slate-500 sm:w-40 sm:text-right">
+        <strong class="block font-semibold text-slate-800">Luis Donis</strong>
         <%= discussion['created_at_string'] || Date2.new.date_time %>
     </div>
-    <div class="ml-4 is-fullwidth lexxy-content">
+
+    <div class="lexxy-content min-w-0 flex-1 break-words text-slate-700">
         <%== discussion.message %>
     </div>
-</div>
+</li>

data/lib/lesli_view/items/discussions.html.erb

@@ -29,8 +29,8 @@ Building a better future, one line of code at a time.
 // · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
 // · 
 %>
-<article class="lesli-items-discussions" id="lesli-items-discussions">
-    <div class="lesli-items-discussions-form">
+<article class="lesli-items-discussions bg-white p-4 sm:p-8" id="lesli-items-discussions">
+    <div class="lesli-items-discussions-form p-4">
         <% discussion_class = "#{@resource.class.name.deconstantize}::Items::Discussion".constantize %>
         <% scope_key = ActiveSupport::Inflector.underscore(discussion_class.name).tr("/", "_") %>
         <%= form_with(
@@ -45,13 +45,15 @@ Building a better future, one line of code at a time.
             <%= form.field_control_submit("Add comment") %>
         <% end %>
     </div>
-    <hr />
-    <div class="lesli-items-discussions-container">
-        <ul id="<%="#{scope_key}-lesli-items-discussions-list"%>">
+    <hr class="my-6 border-0 border-t border-slate-200">
+
+    <div class="lesli-items-discussions-container p-4">
+        <ul
+            id="<%= "#{scope_key}-lesli-items-discussions-list" %>"
+            class="m-0 list-none space-y-6 p-0">
             <% @resource.discussions.order(created_at: :desc).each do |comment| %>
                 <%= render(LesliView::Items::Discussion.new(comment)) %>
             <% end %>
         </ul>
     </div>
 </article>
-