lesli_view 0.1.0 → 1.0.1

data/lib/lesli_view/elements/table.scss

@@ -0,0 +1,153 @@
+/*
+
+Lesli
+
+Copyright (c) 2023, Lesli Technologies, S. A.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program. If not, see http://www.gnu.org/licenses/.
+
+Lesli · Ruby on Rails SaaS development platform.
+
+Made with ♥ by https://www.lesli.tech
+Building a better future, one line of code at a time.
+
+@contact  hello@lesli.tech
+@website  https://www.lesli.tech
+@license  GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// ·  
+*/
+
+
+// ·  
+@use "lesli-css" as lesli;
+
+
+// · 
+table.lesli-table {
+    display: table;
+    @include lesli.lesli-shadow();
+
+    // standard padding
+    // normally used in tables for index views
+    --table-cell-padding: 1rem;
+
+    // narrow padding
+    // normally used in panels or components where the table is secondary
+    &.is-narrow {
+        --table-cell-padding: 0.25em 0.5em;
+    }
+
+    thead {
+        border-radius: 10px 10px 0 0;
+        background-color: #E2E6F6;
+
+        th {
+            border: none;
+            font-weight: 700;
+            vertical-align: middle;
+        }
+
+        // keep text and icons in the same line
+        .icon-text {
+            flex-wrap: nowrap;
+            span {
+                white-space: nowrap;
+            }
+            &:hover {
+                cursor: pointer;
+            }
+        }
+    }
+
+    tbody {
+
+        tr.is-danger {
+            --bulma-table-cell-background-color: var(--bulma-danger-90);
+        }
+
+        tr.is-warning {
+            --bulma-table-cell-background-color: var(--bulma-warning-90);
+        }
+
+        tr.is-info {
+            --bulma-table-cell-background-color: var(--bulma-info-90);
+        }
+
+        // default styles for cell containers
+        td {
+            vertical-align: middle;
+
+            // if cell has a child link, remove padding 
+            // due <a> will include the corresponding padding
+            // currently only supported by webkit, bug this is part
+            // of the standard so other engines will support soon
+            // ** currently not supported by firefox **
+            &:has(a) {
+                padding: 0 !important;
+
+                // apply styles only to direct anchor elements 
+                & > a {
+                    display: block;
+                    padding: var(--table-cell-padding);
+                }
+            }
+        }
+    }
+
+    // icon to show detail row if detail slot is provided
+    td.detail-row {
+        width: 40px;
+    }
+
+    td.options {
+        .dropdown {
+            .button {
+                background-color: transparent;
+                border: none;
+            }
+            .dropdown-content {
+                padding: 0;
+            }
+            .dropdown-item {
+                display: flex;
+                padding: .8rem;
+                .material-icons {
+                    margin-right: 8px;
+                }
+            }
+        }
+    }
+}
+
+
+@include lesli.lesli-breakpoint-until-tablet {
+    .lesli-table-container {
+        overflow: auto;
+        overflow-y: auto;
+        overflow-y: hidden;
+        max-width: 100%;
+        margin-bottom: .8rem;
+    }    
+}
+
+/*
+td:has(~ td:hover), / * previous sibling cells * /
+table:has(td:nth-of-type(3):hover) / * column cells * /
+tr:not(:first-of-type):has(~ tr:hover)
+td:nth-of-type(3) {
+  background: silver !important;
+}
+*/

data/lib/lesli_view/forms/builder.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+=begin 
+
+Lesli
+
+Copyright (c) 2025, Lesli Technologies, S. A.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program. If not, see http://www.gnu.org/licenses/.
+
+Lesli · Ruby on Rails SaaS Development Framework.
+
+Made with ♥ by LesliTech
+Building a better future, one line of code at a time.
+
+@contact  hello@lesli.tech
+@website  https://www.lesli.tech
+@license  GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+=end
+
+module LesliView
+    module Forms
+        class Builder < ActionView::Helpers::FormBuilder
+            def css_category category=nil 
+                return "is-#{category}"
+            end 
+
+            include LesliView::Forms::Fields
+            include LesliView::Forms::Inputs
+            include LesliView::Forms::Fieldset
+        end
+    end
+end

data/lib/lesli_view/forms/builder_horizontal.rb

@@ -0,0 +1,25 @@
+module LesliView
+    module Forms
+        class BuilderHorizontal < Builder
+            def field_control(attribute, label: nil, message:nil, category:nil, icon:nil)
+                super(attribute, label:label, message:message, category:category, icon:icon, horizontal:true)
+            end
+
+            def field_select(attribute, choices, options = {}, html_options = {}, label: nil, humanize: true)
+                super(attribute, choices, options, html_options, label: label, humanize: humanize, horizontal: true)
+            end
+
+            def field_control_submit(value = nil, options = {})
+                super(value, options, horizontal:true)
+            end
+
+            def field_control_button(value = nil, options = {}, icon:nil, horizontal: false)
+                super(value, options, icon:icon, horizontal:true)
+            end 
+
+            def field_control_select(attribute, choices, label: nil, message:nil, category:nil, icon:nil, humanize:true)
+                super(attribute, choices, label:label, message:message, category:category, icon:icon, horizontal:true, humanize:humanize)
+            end 
+        end
+    end
+end

data/lib/lesli_view/forms/fields.rb

@@ -0,0 +1,144 @@
+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)
+            end
+
+            def field_control_checkbox(attribute, label: nil, message:nil, category:nil, icon:nil, horizontal: false)
+                label_html = label(attribute, label)
+                text_field_html = check_box(attribute, {}, true, false)
+
+                field_control_builder(
+                    label_html: label_html,
+                    control_html: text_field_html,
+                    horizontal: horizontal
+                )
+            end
+
+            def field_control_text(attribute, label: nil, message:nil, category:nil, icon:nil, horizontal: false)
+                label_html = label(attribute, label)
+                text_field_html = text_field(attribute)
+
+                field_control_builder(
+                    label_html: label_html,
+                    control_html: text_field_html,
+                    horizontal: horizontal
+                )
+            end
+
+            def field_control_email(attribute, label: nil, message:nil, category:nil, icon:nil, horizontal: false)
+                label_html = label(attribute, label)
+                control_html = email_field(attribute)
+
+                field_control_builder(
+                    label_html: label_html,
+                    control_html: control_html,
+                    horizontal: horizontal,
+                    icon:icon
+                )
+            end
+
+            def field_text_editor(attribute, label:nil, message:nil, category:nil, icon:nil, horizontal: false)
+
+                label_html = label(attribute, label)
+                control_html = text_editor(attribute)
+
+                field_control_builder(
+                    label_html: label_html,
+                    control_html: control_html,
+                    horizontal: horizontal,
+                    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)
+                label_html = label(attribute, label)
+                select_html = select(attribute, choices, {}, { value: value })
+
+                field_control_builder(
+                    label_html: label_html,
+                    control_html: @template.content_tag(:div, select_html, class: "select is-fullwidth"),
+                    horizontal: horizontal
+                )
+            end
+
+            def field_control_submit(value = nil, options = {}, horizontal: false)
+                submit_html = submit(value, options)
+                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}"]
+
+                button_html = @template.content_tag(:button, class: button_classes, type: type, **options.except(:class)) do
+                    html = "".html_safe
+                    if icon.present?
+                        html << @template.content_tag(:span, class: "icon") do
+                            @template.content_tag(:span, icon, class: "material-icons")
+                        end
+                    end
+                    html << @template.content_tag(:span, value) if value.present?
+                    html
+                end
+                field_control_builder(control_html: button_html, icon:nil, horizontal: horizontal)
+            end
+
+            def field_control_builder(
+                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
+                        end
+                    end
+                end
+            end
+
+            private
+
+            def icon_html(icon_class, position)
+                return ''.html_safe unless icon_class
+
+                @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-icons")
+                end
+            end          
+        end
+    end
+end  

data/lib/lesli_view/forms/fieldset.rb

@@ -0,0 +1,15 @@
+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?
+
+                @template.content_tag(:fieldset, options) do
+                    legend_html = legend.present? ? @template.content_tag(:h5, legend, class: ["is-size-5", "mb-5", "ml-2"]) : nil
+                    @template.safe_join([legend_html, @template.capture(&block)].compact)
+                end
+            end
+        end
+    end
+end

data/lib/lesli_view/forms/form.scss

@@ -0,0 +1,87 @@
+/*
+
+Lesli
+
+Copyright (c) 2023, Lesli Technologies, S. A.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program. If not, see http://www.gnu.org/licenses/.
+
+Lesli · Ruby on Rails SaaS Development Framework.
+
+Made with ♥ by LesliTech
+Building a better future, one line of code at a time.
+
+@contact  hello@lesli.tech
+@website  https://www.lesli.tech
+@license  GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+*/
+
+
+// · 
+.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;
+}

data/lib/lesli_view/forms/inputs.rb

@@ -0,0 +1,46 @@
+module LesliView
+    module Forms
+        module Inputs
+            def label(method, text = nil, options = {})
+                super(method, text, options.merge(class: 'label'))
+            end
+
+            def check_box(method, options = {}, checked_value = "1", unchecked_value = "0")
+                value = @object.send(method)
+                super(method, options, checked_value, unchecked_value)
+            end
+
+            def text_field(method, options = {})
+                value = @object.send(method)
+                super(method, options.merge(value: value, class: 'input'))
+            end
+
+            def text_editor(method, options = {})
+                input_id = "#{object_name}_#{method}"
+                editor_id = "#{input_id}_editor"
+                
+                hidden_field(method) +
+                @template.content_tag("trix-toolbar", "", id: editor_id) +
+                @template.content_tag("trix-editor", "", toolbar: editor_id, input: input_id)
+            end
+
+            def email_field(method, options = {})
+                value = @object.send(method)
+                super(method, options.merge(value: value, class: 'input'))
+            end
+
+            def password_field(method, options = {})
+                value = @object.send(method)
+                super(method, options.merge(value: value, class: 'input'))
+            end
+
+            def submit(value=nil, options = {})
+                # Extract and merge classes properly
+                default_classes = "button is-primary is-outlined"
+                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/layout/container.html.erb

@@ -1,5 +1,7 @@
 
 <!-- app/components/lesli_application_container_component.html.erb -->
-<turbo-frame id="<%= turbo_frame_id %>" class="lesli-application-container container <%= 'is-fluid' if dashboard %>">
-    <%= content %>  
-</section>
+<turbo-frame
+    id="<%= turbo_frame_id %>"
+    class="lesli-application-container container <%= 'is-fluid' if dashboard %>">
+    <%= content %>
+</turbo-frame>

data/lib/lesli_view/version.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
 module LesliView
-  VERSION = "0.1.0"
+    VERSION = "1.0.1"
+    BUILD = "1752158466"
 end

data/lib/lesli_view.rb

@@ -12,12 +12,34 @@ require "lesli_view/engine"
 require "lesli_view/layout/container"
 
 
+# loading components
+require "lesli_view/components/tabs"
+require "lesli_view/components/panel"
+require "lesli_view/components/header"
+require "lesli_view/components/toolbar"
+require "lesli_view/components/timeline"
+
+
 # loading elements
-require "lesli_view/element/header"
-require "lesli_view/element/table"
-require "lesli_view/element/button"
-require "lesli_view/element/toolbar"
-require "lesli_view/element/form"
+require "lesli_view/elements/empty"
+require "lesli_view/elements/table"
+require "lesli_view/elements/avatar"
+require "lesli_view/elements/button"
+
+
+# loading charts
+require "lesli_view/charts/general"
+require "lesli_view/charts/bar"
+require "lesli_view/charts/line"
+
+
+# loading forms
+require "lesli_view/forms/fields"
+require "lesli_view/forms/inputs"
+require "lesli_view/forms/fieldset"
+
+require "lesli_view/forms/builder"
+require "lesli_view/forms/builder_horizontal"
 
 module LesliView
     class Error < StandardError; end

data/readme.md

@@ -1,13 +1,12 @@
-
-<div align="center">
-    <img width="100" alt="LesliView logo" src="./docs/view-logo.svg" />
-    <h3 align="center">View elements & components for The Lesli Framework.</h3>
+<div align="center" class="documentation-header">
+    <img width="100" alt="LesliView logo" src="./docs/images/view-logo.svg" />
+    <h3 align="center">Web Elements & Components for The Lesli Framework.</h3>
 </div>
 
 <br />
 <hr/>
 
-<p align="center" class="is-flex is-justify-content-center">
+<div align="center" class="documentation-statics">
     <a target="blank" href="https://rubygems.org/gems/lesli">
         <img height="22" alt="Gem Version" src="https://badge.fury.io/rb/lesli.svg"/>
     </a>
@@ -17,11 +16,12 @@
     <a href="https://codecov.io/github/LesliTech/LesliBabel"> 
         <img height="22" src="https://sonarcloud.io/api/project_badges/measure?project=LesliTech_LesliBabel&metric=sqale_rating"/> 
     </a>
-</p>
+</div>
 
 <hr/>
 <br />
 
+
 ### Quick start
 
 ```shell
@@ -29,35 +29,33 @@
 bundle add lesli_view
 ```
 
-```erb
-<%# index.html.erb %>
-<%= render LesliView::Layout::Container.new("shield-sessions") do %>
-    <%= render LesliView::Element::Header.new(title: "Sessions", back: true) do %>
-        <%= render(LesliView::Element::Button.new(icon: "add", solid:true)) do %>
-            Add new
-        <% end %>
-        <%= render(LesliView::Element::Button.new(icon: "refresh")) do %>
-            Reload
-        <% end %>
-    <% end %>
-    <%= render LesliView::Element::Toolbar.new() %>
-    <%= render(LesliView::Element::Table.new(
-        columns: columns,
-        records: @sessions[:records]
-    )) %>
-<% end %> 
-```
+
+### Usage 
 
 ```erb
-<%# single component %>
-<%= render(LesliView::Element::Button.new(icon: "refresh")) do %>
-    Reload
+# app/views/lesli_support/tickets/index.html.erb
+
+<%= render(LesliView::Layout::Container.new("support-tickets")) do %>
+
+    <%= render(LesliView::Components::Header.new("Tickets")) %>
+    <%= render(LesliView::Components::Toolbar.new()) %>
+
+    <%= render(LesliView::Elements::Table.new(
+        :columns => columns,
+        :records => @tickets.dig(:records),
+        link: -> (ticket) { ticket_path(ticket.id) }
+    )) %>
 <% end %>
 ```
 
+
 ### Documentation
+- **Components:**
+    - [Header](https://www.lesli.dev/gems/view/component-header)
+
+
+### Lesli Documentation
 * [website](https://www.lesli.dev/)
-* [database](./docs/database.md)
 * [documentation](https://www.lesli.dev/gems/view/)
 
 
@@ -88,8 +86,7 @@ along with this program. If not, see http://www.gnu.org/licenses/.
 <hr />
 <br />
 
-<p align="center">
+<div align="center" class="has-text-centered">
     <img width="200" alt="Lesli logo" src="https://cdn.lesli.tech/lesli/brand/app-logo.svg" />
-    <h4 align="center">Ruby on Rails SaaS Development Framework.</h4>
-</p>
-
+    <h4 align="center" class="mt-0">Ruby on Rails SaaS Development Framework.</h4>
+</div>