lesli_view 1.1.2 → 1.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 57b0a11628317815d5fa6dad2de504adc413f303a84162d4d2761b07b515879c
-  data.tar.gz: de041c2dbecf1fc19004151eb81f59d420812bec6f7fd3c9bf3be11978b0c6a0
+  metadata.gz: 9c372c2ae1e73b645cbac17d23b504506b5c0a530de4ad3b9af37ac3f19ce338
+  data.tar.gz: d296585f3691d21398b81803cb3c616233b74e313df210c50434ec0adbc12418
 SHA512:
-  metadata.gz: d2d9b44c26f6dfb0f6ed8c67483809f5b30b8c44d73800d6516c7803127a034bf8c7ab9ed700823244bcf7ca10bb4fd063ff97c25f538767fde0833ee8de6666
-  data.tar.gz: 3037e1d9a13c02d2032429d2322a88597be41effb626137c39780176b1b827a45605a94cbc7c694d5613f4231d492e93cb90f863819c276b23742f40f519ddae
+  metadata.gz: 906c140274216c77a9ff864dde9b2423919f947cadf4a02e0d327f5d5bd0c3bf9e97bacca7841f48256218a8f1394499ecb3febdd3936e3b665055ea378b3896
+  data.tar.gz: 7e914034819645b537b4b157eea35d847f4cb806ac544402cbe099be80dfda12ec4e2fa593bf0813d397df0ba412daa33c4624fcc6c9333304f95096b749b009

data/lib/lesli_view/charts/bar.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 =begin
 
 Lesli
@@ -36,6 +38,14 @@ module LesliView
             def type
                 "bar"
             end
+
+            def dataset_defaults
+                {
+                    backgroundColor: "rgba(14, 165, 233, 0.72)",
+                    borderColor: "rgb(2, 132, 199)",
+                    borderWidth: 1
+                }
+            end
         end
     end
 end

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

@@ -1,55 +1,41 @@
-<%#
-
-Lesli
-
-Copyright (c) 2026, 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
-
-// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
-// · 
-%>
-<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 m-0 p-2">
-
-    <% if title.present? %>
-        <%= tag.h3(title, class: (compact ? "is-size-7 has-text-centered" : "ml-2")) %>
+<div
+    class="lesli-chart lesli-chart-<%= type %> flex h-full min-w-0 flex-col"
+    <% if title.present? %>aria-labelledby="<%= title_id %>"<% end %>>
+
+    <% if title.present? || subtitle.present? %>
+        <div class="mb-3">
+            <% if title.present? %>
+                <h3
+                    id="<%= title_id %>"
+                    class="<%= compact ? 'text-center text-xs font-medium text-slate-500' : 'text-base font-semibold text-slate-700' %>">
+                    <%= title %>
+                </h3>
+            <% end %>
+
+            <% if subtitle.present? %>
+                <p class="mt-1 text-sm leading-5 text-slate-500"><%= subtitle %></p>
+            <% end %>
+        </div>
     <% end %>
 
-    <% if subtitle.present? %>
-        <p class="ml-2"><b><%= subtitle %></b></p>
-    <% end %>
-
-    <div id="<%= id %>" style="min-height:<%= height %>"></div>
+    <div
+        id="<%= id %>"
+        class="min-w-0 flex-1"
+        style="min-height: <%= height %>"></div>
 </div>
+
+<script data-lesli-chart-config="<%= chart_config.to_json %>">
+(() => {
+    const script = document.currentScript;
+    const renderChart = () => {
+        if (!window.LesliChart || !script) return;
+        new window.LesliChart(JSON.parse(script.dataset.lesliChartConfig));
+    };
+
+    if (document.readyState === "loading") {
+        document.addEventListener("turbo:load", renderChart, { once: true });
+    } else {
+        renderChart();
+    }
+})();
+</script>

data/lib/lesli_view/charts/general.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 =begin
 
 Lesli
@@ -33,48 +35,62 @@ Building a better future, one line of code at a time.
 module LesliView
     module Charts
         class General < ViewComponent::Base
-
             attr_reader(
-                :id, 
-                :title, 
-                :subtitle, 
-                :labels, 
-                :datasets, 
-                :height, 
+                :id,
+                :title,
+                :subtitle,
+                :labels,
+                :datasets,
+                :height,
                 :compact
             )
 
             def initialize(
-                id:nil, 
-                title:nil, 
-                subtitle:nil, 
-                labels:nil, 
-                dataset:nil,
-                datasets:nil, 
-                database_to_dataset:nil,
-                database_to_datasets:nil,
-                height:"400px",
-                compact:false
+                id: nil,
+                title: nil,
+                subtitle: nil,
+                labels: nil,
+                dataset: nil,
+                datasets: nil,
+                database_to_dataset: nil,
+                database_to_datasets: nil,
+                height: "400px",
+                compact: false
             )
-                @id = id || "lesli-chart-#{rand(1000)}" 
+                @id = id.presence || "lesli-chart-#{object_id}"
                 @title = title
                 @subtitle = subtitle
-                @labels = labels
-                @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
+                @labels = Array(labels)
+                @height = normalize_height(height)
+                @compact = !!compact
+
+                source_datasets = datasets
+                source_datasets = [{ label: title, data: dataset }] unless dataset.nil?
+                source_datasets = convert_database_to_dataset(database_to_dataset) if database_to_dataset
+                source_datasets = convert_database_to_datasets(database_to_datasets) if database_to_datasets
+                @datasets = normalize_datasets(source_datasets)
             end
 
             def type
                 nil
             end
 
-            def database_to_dataset(data)
-                [{ data: data.map { |d| { x: d['xaxiskey'], y: d['yaxiskey'] }}}]
+            def chart_config
+                {
+                    id: id,
+                    type: type,
+                    datasets: datasets,
+                    labels: labels,
+                    compact: compact
+                }
+            end
+
+            def title_id
+                @title_id ||= "#{id}-title"
+            end
+
+            def convert_database_to_dataset(data)
+                [{ label: title, data: data.map { |record| { x: record["xaxiskey"], y: record["yaxiskey"] } } }]
             end
 
             # Transforms a database query result into a structure compatible with Chart.js
@@ -94,8 +110,7 @@ module LesliView
             #           'sum(agent_count) as data'
             #       )
             #
-            def database_to_datasets(data)
-
+            def convert_database_to_datasets(data)
                 # Group records by series name
                 # Example: group all "Chrome" rows together
                 data
@@ -118,6 +133,30 @@ module LesliView
                     }
                 end
             end
+
+            # Preserve the original public conversion helpers.
+            alias_method :database_to_dataset, :convert_database_to_dataset
+            alias_method :database_to_datasets, :convert_database_to_datasets
+
+            def dataset_defaults
+                {}
+            end
+
+            private
+
+            def normalize_datasets(value)
+                Array(value).map do |dataset|
+                    attributes = dataset.respond_to?(:to_h) ? dataset.to_h.symbolize_keys : { data: Array(dataset) }
+                    dataset_defaults.merge(attributes)
+                end
+            end
+
+            def normalize_height(value)
+                value = value.to_s
+                return value if value.match?(/\A\d+(?:\.\d+)?(?:px|rem|em|vh|vw|%)\z/)
+
+                "400px"
+            end
         end
     end
 end

data/lib/lesli_view/charts/line.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 =begin
 
 Lesli
@@ -36,6 +38,20 @@ module LesliView
             def type
                 "line"
             end
+
+            def dataset_defaults
+                {
+                    backgroundColor: "rgba(14, 165, 233, 0.12)",
+                    borderColor: "rgb(2, 132, 199)",
+                    borderWidth: 2,
+                    fill: true,
+                    pointBackgroundColor: "rgb(2, 132, 199)",
+                    pointBorderColor: "rgb(255, 255, 255)",
+                    pointBorderWidth: 2,
+                    pointRadius: 3,
+                    pointHoverRadius: 5
+                }
+            end
         end
     end
 end

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

@@ -1,29 +1,54 @@
-<section class="lesli-element-header is-flex">
-    <div class="lesli-element-header-title">
-        <div class="is-flex">
-            <% if back %>
+
+<section
+    class="mx-auto my-8 flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between"
+    <% if title.present? %>aria-labelledby="<%= title_id %>"<% end %>>
+
+    <div class="min-w-0">
+        <div class="flex items-start gap-4">
+
+            <% if back? %>
                 <%= link_to(
-                    back || request.referer || root_path, 
-                    class: "button is-info is-outlined mr-4 mb-1",
-                    data: { turbo_frame: '_top' }) do %>
-                    <span class="material-symbols">arrow_back</span>
+                    back_path,
+                    class: "mt-1 inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl border border-sky-600 bg-white text-sky-700 shadow-sm transition hover:bg-sky-50 hover:text-sky-800 focus:outline-none focus:ring-2 focus:ring-sky-500/30",
+                    aria: { label: I18n.t("actions.back", default: "Go back") },
+                    data: { turbo_frame: "_top" }
+                ) do %>
+                    <span class="material-symbols-rounded text-[26px] leading-none" aria-hidden="true">arrow_back</span>
                 <% end %>
             <% end %>
-            <% if title.present? %>
-                <h1 class="subtitle is-size-3 mb-1"><%= title %></h1>
-            <% end %>
+
+            <div class="min-w-0">
+                <% if title.present? %>
+                    <h1 id="<%= title_id %>" class="text-3xl tracking-tight text-slate-700 sm:text-4xl">
+                        <%= title %>
+                    </h1>
+                <% end %>
+
+                <% if subtitle.present? %>
+                    <p class="mt-2 max-w-2xl text-sm leading-6 text-slate-500 sm:text-base">
+                        <%= subtitle %>
+                    </p>
+                <% end %>
+            </div>
+
         </div>
-        <% 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 %>
-            <%= render ::LesliView::Elements::Button.new(
-                "Nuevo", url:new_path, icon:"add", solid:true
-            ) %>
-        <% end %>
-        <%= content %>
     </div>
-</section>
 
+    <% if actions? %>
+        <div
+            class="flex shrink-0 flex-wrap items-center gap-3 sm:justify-end"
+            role="group"
+            aria-label="<%= I18n.t('actions.label', default: 'Page actions') %>">
+            <% if new_path.present? %>
+                <%= render ::LesliView::Elements::Button.new(
+                    new_button_label,
+                    url: new_path,
+                    icon: "add",
+                    solid: true
+                ) %>
+            <% end %>
+
+            <%= content if content? %>
+        </div>
+    <% end %>
+</section>

data/lib/lesli_view/components/header.rb

@@ -35,13 +35,46 @@ Building a better future, one line of code at a time.
 module LesliView
     module Components
         class Header < ViewComponent::Base
-            attr_reader :title, :subtitle, :back, :new_path
+            attr_reader :title, :subtitle, :back, :new_path, :new_label
+
+            def initialize(title, subtitle = nil, new_path: nil, new_label: nil, back: nil)
+                # Support the legacy positional options hash:
+                # Header.new("Title", back: path)
+                if subtitle.is_a?(Hash)
+                    legacy_options = subtitle.symbolize_keys
+                    subtitle = legacy_options[:subtitle]
+                    new_path ||= legacy_options[:new_path]
+                    new_label ||= legacy_options[:new_label]
+                    back ||= legacy_options[:back]
+                end
 
-            def initialize(title, subtitle="", new_path:nil, back:nil)
                 @title = title
                 @subtitle = subtitle
                 @back = back
                 @new_path = new_path
+                @new_label = new_label
+            end
+
+            def back?
+                back.present?
+            end
+
+            def back_path
+                return back unless back == true
+
+                request.referer.presence || "/"
+            end
+
+            def new_button_label
+                new_label.presence || I18n.t("actions.new", default: "New")
+            end
+
+            def actions?
+                new_path.present? || content?
+            end
+
+            def title_id
+                @title_id ||= "lesli-header-title-#{object_id}"
             end
         end
     end

data/lib/lesli_view/components/toolbar.css

@@ -0,0 +1,52 @@
+/* Tailwind styles for LesliView::Components::Toolbar. */
+
+@layer components {
+    .lesli-toolbar {
+        @apply mb-6 flex w-full flex-col gap-2 sm:flex-row sm:items-center;
+    }
+
+    .lesli-toolbar__form {
+        @apply flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center;
+    }
+
+    .lesli-toolbar__search {
+        @apply relative min-w-0 flex-1;
+    }
+
+    .lesli-toolbar__input {
+        @apply h-10 w-full rounded-lg border border-slate-300 bg-white py-2 pl-10 pr-10 text-sm text-slate-900 outline-none transition placeholder:text-slate-400 hover:border-slate-400 focus:border-sky-500 focus:ring-2 focus:ring-sky-500/10;
+    }
+
+    .lesli-toolbar__search-icon {
+        @apply pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-lg leading-none text-slate-400;
+    }
+
+    .lesli-toolbar__clear {
+        @apply absolute right-1.5 top-1/2 inline-flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-md text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/30;
+    }
+
+    .lesli-toolbar__clear .material-symbols {
+        @apply text-lg leading-none;
+    }
+
+    .lesli-toolbar__filters {
+        @apply flex flex-wrap items-center gap-2;
+    }
+
+    .lesli-toolbar__filters select,
+    .lesli-toolbar__filters input {
+        @apply h-10 rounded-lg border border-slate-300 bg-white px-3 text-sm text-slate-700 outline-none transition hover:border-slate-400 focus:border-sky-500 focus:ring-2 focus:ring-sky-500/10;
+    }
+
+    .lesli-toolbar__submit {
+        @apply inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-slate-300 bg-white text-slate-500 transition hover:border-sky-300 hover:bg-sky-50 hover:text-sky-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/20;
+    }
+
+    .lesli-toolbar__submit .material-symbols {
+        @apply text-xl leading-none;
+    }
+
+    .lesli-toolbar__actions {
+        @apply flex shrink-0 flex-wrap items-center gap-2;
+    }
+}

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

@@ -1,25 +1,40 @@
-<section class="lesli-toolbar mb-5">
-    <div class="field is-grouped">
-        <div class="control is-expanded has-icons-right has-icons-left">
-            <%= text_field_tag(:search, initial_value, 
-                placeholder: search_placeholder,
-                class: "input is-shadowless",
-                data: { action: "input->toolbar#search" } 
-            )%>
-            <span class="icon is-small is-left has-text-grey-light">
-                <span class="material-symbols">
-                    search
-                </span>
-            </span>
-            <span class="icon is-right">
-                <a class="delete" data-action="click->toolbar#clearSearch"></a>
-            </span>
+<section class="lesli-toolbar" aria-label="<%= search_label %>">
+    <%= form_with(url: form_url, method: :get, local: true, class: "lesli-toolbar__form", role: "search") do %>
+        <div class="lesli-toolbar__search">
+            <%= label_tag(search_name, search_label, class: "sr-only") %>
+
+            <span class="lesli-toolbar__search-icon material-symbols" aria-hidden="true">search</span>
+
+            <%= text_field_tag(
+                search_name,
+                search_value,
+                placeholder: placeholder,
+                class: "lesli-toolbar__input",
+                autocomplete: "off"
+            ) %>
+
+            <% if searching? %>
+                <%= link_to(clear_url, class: "lesli-toolbar__clear", aria: { label: clear_label }, title: clear_label) do %>
+                    <span class="material-symbols" aria-hidden="true">close</span>
+                <% end %>
+            <% end %>
         </div>
-        <%= content %> 
-        <% if pagination %>
-            <div class="select">
-                <%= select_tag :pagination, options_for_select([10, 20]), class: "select" %>
+
+        <% if filters? %>
+            <div class="lesli-toolbar__filters">
+                <%= filters %>
             </div>
         <% end %>
-    </div>
+
+        <button class="lesli-toolbar__submit" type="submit">
+            <span class="material-symbols" aria-hidden="true">search</span>
+            <span class="sr-only"><%= search_label %></span>
+        </button>
+    <% end %>
+
+    <% if actions? %>
+        <div class="lesli-toolbar__actions" role="group" aria-label="<%= I18n.t('lesli_view.toolbar.actions', default: 'Toolbar actions') %>">
+            <%= actions %>
+        </div>
+    <% end %>
 </section>

data/lib/lesli_view/components/toolbar.rb

@@ -35,12 +35,49 @@ Building a better future, one line of code at a time.
 module LesliView
     module Components
         class Toolbar < ViewComponent::Base
-            attr_reader :search_placeholder, :initial_value, :pagination
-        
-            def initialize(search_placeholder = "Search...", initial_value: nil, pagination: true)
+            renders_one :filters
+            renders_one :actions
+
+            attr_reader :search_placeholder, :initial_value, :url, :search_name
+
+            def initialize(search_placeholder = nil, initial_value: nil, url: nil, search_name: :search)
                 @search_placeholder = search_placeholder
                 @initial_value = initial_value
-                @pagination = pagination
+                @url = url
+                @search_name = search_name
+            end
+
+            def form_url
+                url.presence || request.path
+            end
+
+            def search_value
+                return initial_value unless initial_value.nil?
+
+                request.query_parameters[search_name.to_s]
+            end
+
+            def searching?
+                search_value.present?
+            end
+
+            def clear_url
+                query = request.query_parameters.except(search_name.to_s)
+                return form_url if query.empty?
+
+                "#{form_url}?#{query.to_query}"
+            end
+
+            def placeholder
+                search_placeholder.presence || I18n.t("lesli_view.toolbar.placeholder", default: "Search...")
+            end
+
+            def search_label
+                I18n.t("lesli_view.toolbar.search", default: "Search")
+            end
+
+            def clear_label
+                I18n.t("lesli_view.toolbar.clear", default: "Clear search")
             end
         end
     end