lesli_view 0.1.0 → 1.0.1

data/lib/lesli_view/components/timeline.scss

@@ -0,0 +1,218 @@
+
+.lesli-timelines {
+
+    .lesli-timeline {
+    line-height: 1.4em;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    }
+    .lesli-timeline h1,
+    .lesli-timeline h2,
+    .lesli-timeline h3,
+    .lesli-timeline h4,
+    .lesli-timeline h5,
+    .lesli-timeline h6 {
+    line-height: inherit;
+    }
+
+    /*----- TIMELINE ITEM -----*/
+    .lesli-timeline-item {
+    padding-left: 40px;
+    position: relative;
+    }
+    .lesli-timeline-item:last-child {
+    padding-bottom: 0;
+    }
+
+    /*----- TIMELINE INFO -----*/
+    .lesli-timeline-info {
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 3px;
+    margin: 0 0 0.5em 0;
+    text-transform: uppercase;
+    white-space: nowrap;
+    }
+
+    /*----- TIMELINE MARKER -----*/
+    .lesli-timeline-marker {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 15px;
+    }
+    .lesli-timeline-marker:before {
+    background: #ff6b6b;
+    border: 3px solid transparent;
+    border-radius: 100%;
+    content: "";
+    display: block;
+    height: 15px;
+    position: absolute;
+    top: 4px;
+    left: 0;
+    width: 15px;
+    transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
+    }
+    .lesli-timeline-marker:after {
+    content: "";
+    width: 3px;
+    background: #ccd5db;
+    display: block;
+    position: absolute;
+    top: 24px;
+    bottom: 0;
+    left: 6px;
+    }
+    .lesli-timeline-item:last-child .lesli-timeline-marker:after {
+    content: none;
+    }
+
+    .lesli-timeline-item:not(.period):hover .lesli-timeline-marker:before {
+    background: transparent;
+    border: 3px solid #ff6b6b;
+    }
+
+    /*----- TIMELINE CONTENT -----*/
+    .lesli-timeline-content {
+    padding-bottom: 40px;
+    }
+    .lesli-timeline-content p:last-child {
+    margin-bottom: 0;
+    }
+
+    /*----- TIMELINE PERIOD -----*/
+    .period {
+    padding: 0;
+    }
+    .period .lesli-timeline-info {
+    display: none;
+    }
+    .period .lesli-timeline-marker:before {
+    background: transparent;
+    content: "";
+    width: 15px;
+    height: auto;
+    border: none;
+    border-radius: 0;
+    top: 0;
+    bottom: 30px;
+    position: absolute;
+    border-top: 3px solid #ccd5db;
+    border-bottom: 3px solid #ccd5db;
+    }
+    .period .lesli-timeline-marker:after {
+    content: "";
+    height: 32px;
+    top: auto;
+    }
+    .period .lesli-timeline-content {
+    padding: 40px 0 70px;
+    }
+    .period .timeline-title {
+    margin: 0;
+    }
+
+    /*----------------------------------------------
+    MOD: TIMELINE SPLIT
+    ----------------------------------------------*/
+    @media (min-width: 768px) {
+    .lesli-timeline-split .timeline, .timeline-centered .lesli-timeline {
+    display: table;
+    }
+    .lesli-timeline-split .lesli-timeline-item, .timeline-centered .lesli-timeline-item {
+    display: table-row;
+    padding: 0;
+    }
+    .lesli-timeline-split .lesli-timeline-info, .timeline-centered .lesli-timeline-info,
+    .lesli-timeline-split .lesli-timeline-marker,
+    .timeline-centered .lesli-timeline-marker,
+    .lesli-timeline-split .lesli-timeline-content,
+    .timeline-centered .lesli-timeline-content,
+    .lesli-timeline-split .period .lesli-timeline-info {
+    display: table-cell;
+    vertical-align: top;
+    }
+    .lesli-timeline-split .lesli-timeline-marker, .timeline-centered .lesli-timeline-marker {
+    position: relative;
+    }
+    .lesli-timeline-split .lesli-timeline-content, .timeline-centered .lesli-timeline-content {
+    padding-left: 30px;
+    }
+    .lesli-timeline-split .lesli-timeline-info, .timeline-centered .lesli-timeline-info {
+    padding-right: 30px;
+    }
+    .lesli-timeline-split .period .timeline-title, .timeline-centered .period .timeline-title {
+    position: relative;
+    left: -45px;
+    }
+    }
+
+    /*----------------------------------------------
+    MOD: TIMELINE CENTERED
+    ----------------------------------------------*/
+    @media (min-width: 992px) {
+    .timeline-centered,
+    .timeline-centered .lesli-timeline-item,
+    .timeline-centered .lesli-timeline-info,
+    .timeline-centered .lesli-timeline-marker,
+    .timeline-centered .lesli-timeline-content {
+    display: block;
+    margin: 0;
+    padding: 0;
+    }
+    .timeline-centered .lesli-timeline-item {
+    padding-bottom: 40px;
+    overflow: hidden;
+    }
+    .timeline-centered .lesli-timeline-marker {
+    position: absolute;
+    left: 50%;
+    margin-left: -7.5px;
+    }
+    .timeline-centered .lesli-timeline-info,
+    .timeline-centered .lesli-timeline-content {
+    width: 50%;
+    }
+    .timeline-centered > .lesli-timeline-item:nth-child(odd) .lesli-timeline-info {
+    float: left;
+    text-align: right;
+    padding-right: 30px;
+    }
+    .timeline-centered > .lesli-timeline-item:nth-child(odd) .lesli-timeline-content {
+    float: right;
+    text-align: left;
+    padding-left: 30px;
+    }
+    .timeline-centered > .lesli-timeline-item:nth-child(even) .lesli-timeline-info {
+    float: right;
+    text-align: left;
+    padding-left: 30px;
+    }
+    .timeline-centered > .lesli-timeline-item:nth-child(even) .lesli-timeline-content {
+    float: left;
+    text-align: right;
+    padding-right: 30px;
+    }
+    .timeline-centered > .lesli-timeline-item.period .lesli-timeline-content {
+    float: none;
+    padding: 0;
+    width: 100%;
+    text-align: center;
+    }
+    .timeline-centered .lesli-timeline-item.period {
+    padding: 50px 0 90px;
+    }
+    .timeline-centered .period .lesli-timeline-marker:after {
+    height: 30px;
+    bottom: 0;
+    top: auto;
+    }
+    .timeline-centered .period .timeline-title {
+    left: auto;
+    }
+    }
+}

data/lib/lesli_view/{element → components}/toolbar.rb

@@ -33,7 +33,7 @@ Building a better future, one line of code at a time.
 =end
 
 module LesliView
-    module Element
+    module Components
         class Toolbar < ViewComponent::Base
             attr_reader :search_placeholder, :initial_value, :pagination
         

data/lib/lesli_view/components/toolbar.scss

@@ -0,0 +1,54 @@
+/*
+
+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
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// ·  
+*/
+
+
+// ·  
+//@import "../../scss/component";
+
+
+// · 
+.lesli-toolbar {
+
+    // General styles
+    input,
+    .select select {
+        border-radius: 6px;
+        border: 1px solid lesli-css-color(silver);
+    }
+
+    // search input
+    input::placeholder {
+        color: lesli-css-color(silver, 500);
+        opacity: 1;
+    }
+
+}

data/lib/lesli_view/elements/avatar.html.erb

@@ -0,0 +1,7 @@
+<figure class="lesli-element-avatar has-background-grey-lighter" style="<%= avatar_style %>">
+    <% if image %>
+        <img src="<%= image %>" alt="Avatar image">
+    <% else %>
+        <span class="has-text-weight-bold <%= font_size %>"><%= letter %></span>
+    <% end %>
+</figure>

data/lib/lesli_view/elements/avatar.rb

@@ -0,0 +1,76 @@
+=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 Elements
+        class Avatar < ViewComponent::Base
+            attr_reader :image, :name, :size, :letter, :font_size, :avatar_style
+
+            def initialize(image: nil, name: "", size: "medium")
+                @image = image
+                @name = name
+                @size = size
+                @letter = ""
+                @font_size = ""
+                @avatar_style = ""
+                calculate_size
+                get_letter unless @image
+            end
+
+            private
+
+            # Calculate the size of the avatar and set styles accordingly
+            def calculate_size
+                case size
+                when "small"
+                    @font_size = "is-size-5"
+                    @avatar_style = "height: 60px; width: 60px;"
+                when "medium"
+                    @font_size = "is-size-3"
+                    @avatar_style = "height: 120px; width: 120px;"
+                when "large"
+                    @font_size = "is-size-1"
+                    @avatar_style = "height: 180px; width: 180px;"
+                else
+                    raise ArgumentError, "Invalid size: #{size}"
+                end
+            end
+
+            # Calculate the initials based on the name
+            def get_letter
+                return @letter = "" if name.strip.empty?
+
+                words = name.strip.split(/\s+/)
+                @letter = words.first(2).map { |word| word[0].upcase }.join
+            end
+        end
+    end
+end

data/lib/lesli_view/elements/avatar.scss

@@ -0,0 +1,50 @@
+/*
+
+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
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// ·  
+*/
+
+.lesli-element-avatar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    background-color: lesli-css-color(silver, 100);
+
+    & > img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 50%;
+    }
+
+    & > span {
+        color: lesli-css-color(silver, 700);
+    }
+}

data/lib/lesli_view/elements/button.html.erb

@@ -0,0 +1,24 @@
+<% tag_name = url.present? ? :a : :button %>
+
+<% attributes = {
+  class: button_classes,
+  data: {}
+} %>
+
+<% attributes[:href] = url if url.present? %>
+<% attributes[:data][:turbo_frame] = "_top" if url.present? %>
+
+<%# Add Alpine.js properties %>
+<% attributes[:"x-data"] = "" if dispatch %>
+<% attributes[:"@click"] = "$dispatch('#{ dispatch }')" if dispatch %>
+
+<%= content_tag(tag_name, **attributes) do %>
+    <% if icon %>
+        <span class="icon <%= 'is-small' if small %>">
+            <span class="material-icons"><%= icon %></span>
+        </span>
+    <% end %>
+    <% unless icon_only? %>
+        <span><%= label %></span>
+    <% end %>
+<% end %>

data/lib/lesli_view/{element → elements}/button.rb

@@ -33,11 +33,30 @@ Building a better future, one line of code at a time.
 =end
 
 module LesliView
-    module Element
+    module Elements
         class Button < ViewComponent::Base
-            attr_reader :icon, :loading, :solid, :info, :success, :warning, :danger, :small
+            attr_reader :label, :url, :icon, :loading, :solid, :info, :success, :warning, :danger, :small, :type, :dispatch
 
-            def initialize(icon: nil, loading: false, solid: false, info: false, success: false, warning: false, danger: false, small: false)
+            # Adds two numbers together.
+            # @param [Integer] a The first number.
+            # @param [Integer] b The second number.
+            # @return [Integer] The sum of the two numbers.
+            def initialize(
+                label=nil, 
+                url:nil,
+                icon: nil, 
+                loading: false, 
+                solid: false, 
+                info: false, 
+                success: false, 
+                warning: false, 
+                danger: false, 
+                small: false,
+                type: "button",
+                dispatch:nil
+            )
+                @label = label
+                @url = url
                 @icon = icon
                 @loading = loading
                 @solid = solid
@@ -46,6 +65,8 @@ module LesliView
                 @warning = warning
                 @danger = danger
                 @small = small
+                @type = type
+                @dispatch = dispatch
             end
 
             def button_classes
@@ -64,8 +85,8 @@ module LesliView
                 "is-primary"
             end
 
-            def icon_only?(content_present)
-                icon && !content_present
+            def icon_only?
+                icon && !label
             end
         end  
     end

data/lib/lesli_view/elements/empty.html.erb

@@ -0,0 +1,8 @@
+
+<div class="lesli-empty has-text-centered">
+    <svg width="184" height="184" viewBox="0 0 184 184" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M145.271 90.6522H142.735V89.528C142.735 83.9793 138.222 79.4655 132.673 79.4655H85.7357C84.255 79.4655 82.1132 78.0942 81.4922 76.7515L76.1878 65.2544C74.1523 60.8499 68.9629 57.5293 64.1128 57.5293H39.7012C34.1524 57.5293 29.6387 62.043 29.6387 67.5918V151.809C29.6387 157.358 34.1524 161.872 39.7012 161.872H53.3459C53.5357 161.883 53.7139 161.932 53.9065 161.932H112.945V153.307H108.831H53.9065C53.7197 153.307 53.6219 153.278 53.5587 153.247C53.527 153.232 53.4897 153.215 53.481 153.206C53.458 153.181 53.412 153.045 53.4609 152.772L63.1985 101.419C63.4027 100.338 64.6849 99.2772 65.7803 99.2772H134.11H142.735H145.271C145.553 99.2772 145.679 99.349 145.697 99.3749C145.714 99.4008 145.766 99.533 145.714 99.809L142.735 115.524L135.979 151.159C135.775 152.24 134.493 153.301 133.395 153.301H121.964V161.926H133.395C138.621 161.926 143.48 157.904 144.455 152.767L154.189 101.413C154.713 98.6648 154.037 95.9163 152.341 93.8693C150.645 91.8281 148.069 90.6522 145.271 90.6522ZM134.11 90.6522H65.7832C60.5593 90.6522 55.7005 94.6743 54.7259 99.8119L44.9883 151.168C44.856 151.864 44.8043 152.56 44.8244 153.247H39.7012C38.922 153.247 38.2637 152.588 38.2637 151.809V67.5918C38.2637 66.8127 38.922 66.1543 39.7012 66.1543H64.1128C65.5934 66.1543 67.7353 67.5257 68.3563 68.8683L73.6607 80.3654C75.6962 84.7699 80.8855 88.0905 85.7357 88.0905H132.673C133.452 88.0905 134.11 88.7489 134.11 89.528V90.6522Z" fill="#BDBDBD"/>
+        <path d="M145.7 50.5227L153.201 43.0219C154.805 41.4176 154.739 38.7525 153.054 37.0677C151.369 35.383 148.704 35.3197 147.1 36.9211L139.599 44.422L132.098 36.9211C130.494 35.3169 127.829 35.383 126.144 37.0677C124.459 38.7525 124.396 41.4176 125.997 43.0219L133.498 50.5227L125.997 58.0236C124.393 59.6279 124.459 62.293 126.144 63.9777C127.829 65.6625 130.494 65.7257 132.098 64.1244L139.599 56.6235L147.1 64.1244C148.704 65.7286 151.369 65.6625 153.054 63.9777C154.739 62.293 154.802 59.6279 153.201 58.0236L145.7 50.5227Z" fill="#BDBDBD"/>
+    </svg>
+    <p class="has-text-grey"><%= @text %></p>
+</div>

data/lib/lesli_view/elements/empty.rb

@@ -0,0 +1,40 @@
+=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 Elements
+        class Empty < ViewComponent::Base
+            def initialize(text: "No data found")
+                @text = text
+            end
+        end
+    end
+end

data/lib/lesli_view/elements/table.html.erb

@@ -0,0 +1,48 @@
+<div class="lesli-table-container table-container">
+    <table id="<%= id %>" class="table is-fullwidth lesli-table mb-5 <%= class_name %>">
+        <% unless headless %>
+            <thead>
+                <tr>
+                    <% columns.each do |column| %>
+                        <th 
+                            width="<%= column[:width] %>" 
+                            class="<%= table_header_class(column) %>" 
+                            data-action="click->table#sort" 
+                            data-field="<%= column[:field] %>">
+                            <% if column[:sort] %>
+                                <span class="icon-text">
+                                    <span><%= column[:label] %></span>
+                                    <span class="icon">
+                                        <span class="material-icons"><%= column[:field] == @current_sort ? (current_sort_dir(column) == "asc" ? "arrow_upward" : "arrow_downward") : "sort" %></span>
+                                    </span>
+                                </span>
+                            <% else %>
+                                <%= column[:label] %>
+                            <% end %>
+                        </th>
+                    <% end %>
+                </tr>
+            </thead>
+        <% end %>
+        <tbody>
+            <% if records %>
+                <% records.each_with_index do |record, i| %>
+                    <tr>
+                        <% columns.each do |column| %>
+                            <td class="<%= table_body_class(column) %>">
+                                <% if link %>
+                                    <%= link_to(record[column[:field]] || "", link.call(record), class: "link", data: { turbo_frame: '_top' }) %>
+                                <% else %>
+                                    <%= record[column[:field]] %>
+                                <% end %>
+                            </td>
+                        <% end %>
+                    </tr>
+                <% end %>
+            <% end %>
+            <% rows.each do |row| %>
+                <%= row %>
+            <% end %>
+        </tbody>
+    </table>
+</div>

data/lib/lesli_view/{element → elements}/table.rb

@@ -1,6 +1,4 @@
-# frozen_string_literal: true
-
-=begin 
+=begin
 
 Lesli
 
@@ -33,11 +31,13 @@ Building a better future, one line of code at a time.
 =end
 
 module LesliView
-    module Element
+    module Elements
         class Table < ViewComponent::Base
             attr_reader :id, :class_name, :pagination, :loading, :headless, :columns, :records, :link
 
-            def initialize(id: nil, class_name: "is-striped", pagination: nil, loading: false, headless: false, columns:, records:, link: nil)
+            renders_many :rows, "TableRow"
+
+            def initialize(columns: nil, records: nil, id: nil, class_name: "is-striped", pagination: nil, loading: false, headless: false, link: nil)
                 @id = id
                 @class_name = class_name
                 @pagination = pagination
@@ -56,22 +56,30 @@ module LesliView
                 column[:field] == "id" || column[:align] == "center" ? "has-text-centered" : ""
             end
 
-            def current_sort_dir(column)
-                @current_sort_dir ||= {}
-                @current_sort_dir[column[:field]] || "asc"
-            end
-
-            def toggle_sort_dir(column)
-                current_sort_dir(column) == "asc" ? "desc" : "asc"
-            end
-
-            def render_head_slot(column)
-                content_for?(:"head_#{column[:field]}") ? content_for(:"head_#{column[:field]}") : column[:label]
-            end
-
-            def detail_active?(record)
-                record[:detail_active]
+            class TableRow < ViewComponent::Base
+                renders_many :cells, "TableData"
+
+                def initialize(css_class: "")
+                    @css_class = css_class
+                end
+
+                def call
+                    # safe_joins ensure multiple <td> elements render correctly
+                    content_tag(:tr, safe_join(cells), class:@css_class)
+                end
+
+                class TableData < ViewComponent::Base
+                    attr_reader :css_class
+
+                    def initialize(css_class: "")
+                        @css_class = css_class
+                    end
+                    
+                    def call
+                        content_tag :td, content, class: css_class
+                    end
+                end
             end
-        end  
+        end
     end
 end