lesli_view 1.0.6 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 23e41118aed61f81b4b11d893ac216ce39589c80fedf71717295702a05b69c13
-  data.tar.gz: a35dbb7d5035e99900eac523d10804309d63e69da2c6fc5d5e958db4ea468b77
+  metadata.gz: dea27d123b49acd9375db16afb5ad126fb232e5b639c0f9699dc2c4825117fdf
+  data.tar.gz: a86fa765debb5db1d8b5a0ec487e8ee01ded407f9e6e14d32118ca8ec8ef7ca8
 SHA512:
-  metadata.gz: 81ce9692655a2c0c07bdb28ed47444ab232aa3a090fabb55e2935bddc6a3578df1fa55904d87ae6976389b551fe3c8e030e9a880f9ff4dd7421dff32c473cdcd
-  data.tar.gz: 6f53d41293f5486972a5295a84b56a25fce059ffed8fa4cd72b0e98d71db3636e9d19681c1066a7c5903e6633732cba2c76722b1c9c2e2eccc9bce4deea641c3
+  metadata.gz: 8974bf2767aabad29a0606509bffb635e8f6d2384e1ffaca68dff3fa495763108178e1afc46941e55bcf0592ea9530b7015c2fe2608bc609b6a38d9dc41d03e1
+  data.tar.gz: 8c2d7fb73fecf7a251defb3010a45f68f2cfb1f3a77c091890e899a469e407298dbe623adb4499cf3ea748e493ecc8ef591864f753ef1b1266d40e7aad32b0be

data/Rakefile

@@ -1,8 +1,6 @@
-# frozen_string_literal: true
+require "bundler/setup"
 
-require "bundler/gem_tasks"
-require "rspec/core/rake_task"
-
-RSpec::Core::RakeTask.new(:spec)
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
 
-task default: :spec
+require "bundler/gem_tasks"

data/lib/lesli_view/charts/general.html.erb

@@ -1,89 +1,47 @@
-<script>
-document.addEventListener("turbo:load", () => {
-    const chartId = "<%= id %>";
-    const chartElement = document.getElementById(chartId);
+<%#
 
-    if (!chartElement) {
-        ///console.warn("Chart element not found:", chartId);
-        return;
-    }
+Lesli
 
-    // Clear previous chart instance (important for Turbo re-renders)
-    chartElement.innerHTML = "";
+Copyright (c) 2026, Lesli Technologies, S. A.
 
-    var options = {
-        series: <%= raw(series.to_json) %>,
-        labels: <%= raw(labels.to_json) %>,
-        grid: {
-            show: false,
-            padding: { top: 0, right: 0, bottom: 0, left: 0 }
-        },
-        chart: {
-            type: "<%= type %>",
-            height: "<%= height %>",
-            toolbar: { show: false },
-            events: {
-                markerClick: function(event, chartContext, { seriesIndex, dataPointIndex }) {
-                    emit("markerClick", { seriesIndex, dataPointIndex });
-                }
-            }
-        },
-        legend: {
-            show: true,
-            position: "top",
-            horizontalAlign: "center"
-        },
-        plotOptions: {
-            bar: {
-                borderRadius: 6,
-                borderRadiusApplication: 'end',
-                dataLabels: {
-                    position: 'top', // top, center, bottom
-                },
-            }
-        },
-        dataLabels: { enabled: true },
-        stroke: {
-            show: true,
-            curve: "smooth",
-            lineCap: "round"
-        },
-        xaxis: {
-            categories: <%= raw(labels.to_json) %>,
-            tickPlacement: "between",
-            labels: {
-                show: true,
-                rotate: -65,
-                rotateAlways: false,
-                trim: false,
-                offsetY: 5,
-                style: { fontSize: "15px" }
-            }
-        },
-        yaxis: { show: true }
-    };
+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.
 
-    // Overrides for compact view
-    <% if compact %>
-        options.chart.sparkline = { enabled: true };
+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.
 
-        <% if type == "bar" %>
-            options.dataLabels.formatter= function (value, { seriesIndex, dataPointIndex, w }) {
-                const label = w.globals.labels[dataPointIndex]; 
-                return `${label}: ${value}`;
-            }
-        <% elsif type == "line" %>
-            options.grid.padding = { top: 14, right: 0, bottom: 6, left: 0 }
-        <% end %>
+You should have received a copy of the GNU General Public License
+along with this program. If not, see http://www.gnu.org/licenses/.
 
-    <% end %>
+Lesli · Ruby on Rails SaaS Development Framework.
+
+Made with ♥ by LesliTech
+Building a better future, one line of code at a time.
 
-    const chart = new ApexCharts(chartElement, options);
-    chart.render()
+@contact  hello@lesli.tech
+@website  https://www.lesli.tech
+@license  GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+%>
+<script>
+document.addEventListener("turbo:load", () => {
+    new LesliChart({
+        id: "<%= id %>",
+        type: "<%= type %>",
+        datasets: <%= raw(datasets.to_json) %>,
+        labels: <%= raw(labels.to_json) %>,
+        compact: <%= compact ? "true" : "false" %>
+    });
 });
 </script>
 
-<div class="lesli-charts lesli-charts-<%= type %> section box mb-0 p-0 pt-1">
+<div class="lesli-charts lesli-charts-<%= type %> section box m-0 p-2">
 
     <% if title.present? %>
         <%= tag.h3(title, class: (compact ? "is-size-7 has-text-centered" : "ml-2")) %>
@@ -93,5 +51,5 @@ document.addEventListener("turbo:load", () => {
         <p class="ml-2"><b><%= subtitle %></b></p>
     <% end %>
 
-    <div id="<%= id %>"></div>
+    <div id="<%= id %>" style="min-height:<%= height %>"></div>
 </div>

data/lib/lesli_view/charts/general.rb

@@ -39,33 +39,85 @@ module LesliView
                 :title, 
                 :subtitle, 
                 :labels, 
-                :series, 
+                :datasets, 
                 :height, 
                 :compact
             )
 
             def initialize(
-                id: nil, 
-                title: nil, 
-                subtitle: nil, 
+                id:nil, 
+                title:nil, 
+                subtitle:nil, 
                 labels:nil, 
-                series:nil, 
-                serie: nil, 
-                height: "300px", 
-                compact: false
+                dataset:nil,
+                datasets:nil, 
+                database_to_dataset:nil,
+                database_to_datasets:nil,
+                height:"400px",
+                compact:false
             )
-                @id = id || "lesli-chart-#{rand(100)}" 
+                @id = id || "lesli-chart-#{rand(1000)}" 
                 @title = title
                 @subtitle = subtitle
                 @labels = labels
-                @series = series || [{ name: title, data: serie }]
+                @datasets = datasets
                 @height = height
                 @compact = compact
+
+                @datasets = [{ name: title, data: dataset }] if dataset
+                @datasets = database_to_dataset(database_to_dataset) if database_to_dataset
+                @datasets = database_to_datasets(database_to_datasets) if database_to_datasets
             end
 
             def type
                 nil
             end
+
+            def database_to_dataset(data)
+                [{ data: data.map { |d| { x: d['xaxiskey'], y: d['yaxiskey'] }}}]
+            end
+
+            # Transforms a database query result into a structure compatible with Chart.js
+            #
+            # Expected input:
+            #   An enumerable of records responding to:
+            #     - :name  → series name (ex: browser, category, status)
+            #     - :label → x-axis value (ex: date, category label)
+            #     - :data  → y-axis value (numeric)
+            #
+            #   Example: 
+            #       browsers = current_user.account.audit.account_devices
+            #       .group(:agent_browser, :created_at)
+            #       .select(
+            #           'created_at as label',
+            #           'agent_browser as name',
+            #           'sum(agent_count) as data'
+            #       )
+            #
+            def database_to_datasets(data)
+
+                # Group records by series name
+                # Example: group all "Chrome" rows together
+                data
+                .group_by { |records| records['dataname'] }
+                .map do |name, records|
+                    {
+                        # Series name (used in legend and tooltips)
+                        label: name,
+
+                        # Convert each database row into an (x, y) point
+                        data: records.map do |record|
+                            {
+                                # X-axis value (date, category, etc.)
+                                x: record['xaxiskey'],
+
+                                # Y-axis value (must be numeric)
+                                y: record['yaxiskey']
+                            }
+                        end
+                    }
+                end
+            end
         end
     end
 end

data/lib/lesli_view/components/header.html.erb

@@ -13,7 +13,9 @@
                 <h1 class="subtitle is-size-3 mb-1"><%= title %></h1>
             <% end %>
         </div>
-        <p><%= subtitle %>&nbsp;</p>
+        <% if subtitle.present? %>
+            <p><%= subtitle %></p>
+        <% end %>
     </div>
     <div class="lesli-element-header-items is-flex is-flex-grow-1 is-justify-content-end">
         <% if new_path %>

data/lib/lesli_view/components/timeline.html.erb

@@ -1,19 +1,22 @@
-
 <div class="lesli-timelines">
-    <div class="py-6 pl-4">
+    <div class="py-6 pl-6">
         <ul class="lesli-timeline lesli-timeline-split">
             <% @activities.each do |activity| %>
                 <li class="lesli-timeline-item">
                     <div class="lesli-timeline-info">
-                        <span><%= activity[:date] %></span>
+                        <span><%= activity['date'] %></span>
+                    </div>
+                    <div class="lesli-timeline-marker">
+                        <span class="material-symbols-outlined">
+                            <%= @icons.dig(activity['icon']&.to_sym) || 'radio_button_checked' %>
+                        </span>
                     </div>
-                    <div class="lesli-timeline-marker"></div>
                     <div class="lesli-timeline-content">
-                        <h3 class="lesli-timeline-title">
-                            <%= activity[:title] %>
-                        </h3>
+                        <h6 class="lesli-timeline-title">
+                            <%= activity['operation'] %>
+                        </h6>
                         <p>
-                            <%= activity[:description] %>
+                            <%= activity['description'] %>
                         </p>
                     </div>
                 </li>

data/lib/lesli_view/components/timeline.rb

@@ -35,9 +35,10 @@ Building a better future, one line of code at a time.
 module LesliView
     module Components
         class Timeline < ViewComponent::Base
-            attr_reader :activities
+            attr_reader :activities, :icons
 
-            def initialize(activities: nil)
+            def initialize(activities: nil, icons:{})
+                @icons=icons
                 @activities = activities
             end
         end  

data/lib/lesli_view/components/timeline.scss

@@ -2,78 +2,76 @@
 .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;
+        line-height: 1.4em;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        width: 100%;
     }
 
     /*----- TIMELINE ITEM -----*/
     .lesli-timeline-item {
-    padding-left: 40px;
-    position: relative;
+        padding-left: 40px;
+        position: relative;
     }
     .lesli-timeline-item:last-child {
-    padding-bottom: 0;
+        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;
+        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;
+        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:before2 {
+        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;
+        content: "";
+        width: 2px;
+        background: #ccd5db;
+        display: block;
+        position: absolute;
+        top: 24px;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin-left: auto;
+        margin-right: auto;
     }
+
     .lesli-timeline-item:last-child .lesli-timeline-marker:after {
-    content: none;
+        content: none;
     }
 
     .lesli-timeline-item:not(.period):hover .lesli-timeline-marker:before {
-    background: transparent;
-    border: 3px solid #ff6b6b;
+        background: transparent;
+        border: 3px solid #ff6b6b;
     }
 
     /*----- TIMELINE CONTENT -----*/

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

@@ -1,26 +1,35 @@
-<% 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-symbols"><%= icon %></span>
-        </span>
-        <% unless icon_only? %>
-            <span><%= label %></span>
-        <% end %>
-    <% else %>
-        <%= label %>
+
+
+<% if mode == :button_to %>
+
+    <%= button_to(
+        @url,
+        method: @method,
+        params: @params,
+        class: html_classes,
+        data: { turbo_frame: "_top" },
+        **alpine_attributes) do %>
+        <%= button_content %>
+    <% end %>
+
+<% elsif mode == :link %>
+
+    <%= link_to(
+        @url,
+        class: html_classes,
+        data: { turbo_frame: "_top" },
+        **alpine_attributes) do %>
+        <%= button_content %>
     <% end %>
+
+<% else %>
+
+    <%= content_tag(
+        :button,
+        type: "button",
+        class: html_classes,
+        **alpine_attributes) do %>
+        <%= button_content %>
+    <% end %>
+
 <% end %>

data/lib/lesli_view/elements/button.rb

@@ -35,7 +35,7 @@ Building a better future, one line of code at a time.
 module LesliView
     module Elements
         class Button < ViewComponent::Base
-            attr_reader :label, :url, :icon, :loading, :solid, :info, :success, :warning, :danger, :small, :type, :dispatch
+            attr_reader :label, :url, :icon, :loading, :solid, :info, :success, :warning, :danger, :small, :dispatch, :method, :params, :css_class
 
             # Adds two numbers together.
             # @param [Integer] a The first number.
@@ -52,8 +52,10 @@ module LesliView
                 warning: false, 
                 danger: false, 
                 small: false,
-                type: "button",
-                dispatch:nil
+                dispatch:nil,
+                method: nil,
+                params:nil,
+                css_class:nil
             )
                 @label = label
                 @url = url
@@ -65,15 +67,33 @@ module LesliView
                 @warning = warning
                 @danger = danger
                 @small = small
-                @type = type
                 @dispatch = dispatch
+                @method = method
+                @params = params
+                @css_class = css_class
             end
 
-            def button_classes
+            def mode
+                return :button_to if @method.present?
+                return :link if @url.present?
+                :button
+            end
+
+            def alpine_attributes
+                return {} unless @dispatch
+
+                {
+                "x-data": "",
+                "@click": "$dispatch('#{@dispatch}')"
+                }
+            end
+
+            def html_classes
                 classes = ["button", button_variant]
                 classes << "is-light" << "is-outlined" unless solid
                 classes << "is-loading" if loading
                 classes << "is-small" if small
+                classes << css_class 
                 classes.join(" ")
             end
 
@@ -88,6 +108,20 @@ module LesliView
             def icon_only?
                 icon && !label
             end
+
+            def button_content
+                if @icon
+                    safe_join([
+                        content_tag(:span,
+                            content_tag(:span, @icon, class: "material-symbols"),
+                            class: "icon #{'is-small' if @small}"
+                        ),
+                        (@icon_only ? nil : content_tag(:span, @label))
+                    ].compact)
+                else
+                    @label
+                end
+            end
         end  
     end
 end

data/lib/lesli_view/engine.rb

@@ -33,12 +33,5 @@ Building a better future, one line of code at a time.
 module LesliView
     class Engine < ::Rails::Engine
         isolate_namespace LesliView
-
-        initializer "lesli_view" do |app|
-
-            # autoloading sass style sheet files
-            app.config.assets.precompile += %w[lesli_view/lesli_view.scss]
-
-        end
     end
 end

data/lib/lesli_view/forms/fields.rb

@@ -39,19 +39,6 @@ module LesliView
                 )
             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)
@@ -65,6 +52,19 @@ module LesliView
                 )
             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)
+
+                field_control_builder(
+                    label_html: label_html,
+                    control_html: control_html,
+                    horizontal: horizontal,
+                    icon:icon
+                )
+            end
+
             def field_control_submit(value = nil, options = {}, horizontal: false)
                 submit_html = submit(value, options)
                 field_control_builder(control_html: submit_html, horizontal: horizontal)

data/lib/lesli_view/forms/inputs.rb

@@ -11,7 +11,7 @@ module LesliView
             end
 
             def text_field(method, options = {})
-                value = @object.send(method)
+                value = @object.send(method) if @object
                 super(method, options.merge(value: value, class: 'input'))
             end
 
@@ -24,6 +24,7 @@ module LesliView
                 @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'))
@@ -36,7 +37,7 @@ module LesliView
 
             def submit(value=nil, options = {})
                 # Extract and merge classes properly
-                default_classes = "button is-primary is-outlined"
+                default_classes = "button is-primary"
                 custom_classes = options[:class] || ""
                 merged_classes = "#{default_classes} #{custom_classes}".strip
                 super(value, options.merge(class: merged_classes))