lesli_view 1.1.2 → 1.1.4

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

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

@@ -1,7 +1,7 @@
-<figure class="lesli-element-avatar has-background-grey-lighter" style="<%= avatar_style %>">
+<figure class="lesli-element-avatar <%= avatar_size %> flex shrink-0 items-center justify-center overflow-hidden rounded-full border-[0.1px] border-slate-400 bg-slate-100">
     <% if image %>
-        <img src="<%= image %>" alt="Avatar image">
+        <img class="h-full w-full object-cover" src="<%= image %>" alt="Avatar image">
     <% else %>
-        <span class="has-text-weight-bold <%= font_size %>"><%= letter %></span>
+        <span class="font-bold text-slate-700 <%= font_size %>"><%= letter %></span>
     <% end %>
 </figure>

data/lib/lesli_view/elements/avatar.rb

@@ -32,7 +32,7 @@ Building a better future, one line of code at a time.
 module LesliView
     module Elements
         class Avatar < ViewComponent::Base
-            attr_reader :image, :name, :size, :letter, :font_size, :avatar_style
+            attr_reader :image, :name, :size, :letter, :font_size, :avatar_size
 
             def initialize(image: nil, name: "", size: "medium")
                 @image = image
@@ -40,7 +40,7 @@ module LesliView
                 @size = size
                 @letter = ""
                 @font_size = ""
-                @avatar_style = ""
+                @avatar_size = ""
                 calculate_size
                 get_letter unless @image
             end
@@ -51,14 +51,14 @@ module LesliView
             def calculate_size
                 case size
                 when "small"
-                    @font_size = "is-size-5"
-                    @avatar_style = "height: 60px; width: 60px;"
+                    @font_size = "text-xl"
+                    @avatar_size = "size-[60px]"
                 when "medium"
-                    @font_size = "is-size-3"
-                    @avatar_style = "height: 120px; width: 120px;"
+                    @font_size = "text-[2rem]"
+                    @avatar_size = "size-[120px]"
                 when "large"
-                    @font_size = "is-size-1"
-                    @avatar_style = "height: 180px; width: 180px;"
+                    @font_size = "text-5xl"
+                    @avatar_size = "size-[180px]"
                 else
                     raise ArgumentError, "Invalid size: #{size}"
                 end

data/lib/lesli_view/elements/button.css

@@ -0,0 +1,357 @@
+/*!
+
+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
+
+// · ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~     ~·~
+// · 
+*/
+
+
+@layer components {
+    .lesli-button:hover {
+        cursor: pointer;
+    }
+    .lesli-button {
+        @apply
+            cursor-pointer
+            inline-flex
+            items-center
+            justify-center
+            gap-2
+            border
+            rounded-lg
+            h-10
+            px-4
+            text-sm
+            font-medium
+            whitespace-nowrap
+            transition-colors
+            duration-150
+            focus:outline-none
+            focus-visible:ring-2
+            focus-visible:ring-offset-2
+            disabled:pointer-events-none
+            disabled:opacity-50;
+    }
+
+    .lesli-button.is-small {
+        @apply
+            h-8
+            rounded-md
+            px-3
+            text-xs;
+    }
+
+    .lesli-button.is-icon-only {
+        @apply
+            w-10
+            px-0;
+    }
+
+    .lesli-button.is-icon-only.is-small {
+        @apply
+            w-8
+            px-0;
+    }
+
+    .lesli-button.is-loading {
+        @apply
+            pointer-events-none
+            cursor-wait
+            opacity-80;
+    }
+
+    .lesli-button.is-loading::before {
+        width: 1rem;
+        height: 1rem;
+        content: "";
+        border: 2px solid currentColor;
+        border-right-color: transparent;
+        border-radius: 9999px;
+        animation: lesli-button-spin .65s linear infinite;
+    }
+
+    /*
+     * Solid variants
+     */
+
+    .lesli-button.is-primary {
+        @apply
+            border-blue-600
+            bg-blue-600
+            text-white
+            hover:border-blue-700
+            hover:bg-blue-700
+            focus-visible:ring-blue-500;
+    }
+
+    .lesli-button.is-info {
+        @apply
+            border-sky-600
+            bg-sky-600
+            text-white
+            hover:border-sky-700
+            hover:bg-sky-700
+            focus-visible:ring-sky-500;
+    }
+
+    .lesli-button.is-success {
+        @apply
+            border-emerald-600
+            bg-emerald-600
+            text-white
+            hover:border-emerald-700
+            hover:bg-emerald-700
+            focus-visible:ring-emerald-500;
+    }
+
+    .lesli-button.is-warning {
+        @apply
+            border-amber-500
+            bg-amber-500
+            text-amber-950
+            hover:border-amber-600
+            hover:bg-amber-600
+            focus-visible:ring-amber-500;
+    }
+
+    .lesli-button.is-danger {
+        @apply
+            border-rose-600
+            bg-rose-600
+            text-white
+            hover:border-rose-700
+            hover:bg-rose-700
+            focus-visible:ring-rose-500;
+    }
+
+    /*
+     * Light variants
+     *
+     * These must come after solid variants.
+     */
+
+    .lesli-button.is-primary.is-light {
+        @apply
+            border-blue-100
+            bg-blue-50
+            text-blue-700
+            hover:border-blue-200
+            hover:bg-blue-100
+            focus-visible:ring-blue-500;
+    }
+
+    .lesli-button.is-info.is-light {
+        @apply
+            border-sky-100
+            bg-sky-50
+            text-sky-700
+            hover:border-sky-200
+            hover:bg-sky-100
+            focus-visible:ring-sky-500;
+    }
+
+    .lesli-button.is-success.is-light {
+        @apply
+            border-emerald-100
+            bg-emerald-50
+            text-emerald-700
+            hover:border-emerald-200
+            hover:bg-emerald-100
+            focus-visible:ring-emerald-500;
+    }
+
+    .lesli-button.is-warning.is-light {
+        @apply
+            border-amber-100
+            bg-amber-50
+            text-amber-700
+            hover:border-amber-200
+            hover:bg-amber-100
+            focus-visible:ring-amber-500;
+    }
+
+    .lesli-button.is-danger.is-light {
+        @apply
+            border-rose-100
+            bg-rose-50
+            text-rose-700
+            hover:border-rose-200
+            hover:bg-rose-100
+            focus-visible:ring-rose-500;
+    }
+
+    /*
+     * Outlined variants
+     *
+     * These must come after solid and light variants.
+     */
+
+    .lesli-button.is-primary.is-outlined {
+        @apply
+            border-blue-300
+            bg-transparent
+            text-blue-700
+            hover:border-blue-400
+            hover:bg-blue-50
+            focus-visible:ring-blue-500;
+    }
+
+    .lesli-button.is-info.is-outlined {
+        @apply
+            border-sky-300
+            bg-transparent
+            text-sky-700
+            hover:border-sky-400
+            hover:bg-sky-50
+            focus-visible:ring-sky-500;
+    }
+
+    .lesli-button.is-success.is-outlined {
+        @apply
+            border-emerald-300
+            bg-transparent
+            text-emerald-700
+            hover:border-emerald-400
+            hover:bg-emerald-50
+            focus-visible:ring-emerald-500;
+    }
+
+    .lesli-button.is-warning.is-outlined {
+        @apply
+            border-amber-300
+            bg-transparent
+            text-amber-700
+            hover:border-amber-400
+            hover:bg-amber-50
+            focus-visible:ring-amber-500;
+    }
+
+    .lesli-button.is-danger.is-outlined {
+        @apply
+            border-rose-300
+            bg-transparent
+            text-rose-700
+            hover:border-rose-400
+            hover:bg-rose-50
+            focus-visible:ring-rose-500;
+    }
+
+    /*
+     * Optional: light + outlined
+     */
+
+    .lesli-button.is-light.is-outlined {
+        @apply
+            bg-transparent;
+    }
+}
+
+@keyframes lesli-button-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+
+
+@layer components {
+    .lesli-icon {
+        @apply
+            inline-flex
+            items-center
+            justify-center
+            shrink-0
+            h-6
+            w-6
+            text-[1.5rem]
+            leading-none;
+    }
+
+    .lesli-icon.is-small {
+        @apply
+            h-4
+            w-4
+            text-[1rem];
+    }
+
+    .lesli-icon.is-medium {
+        @apply
+            h-8
+            w-8
+            text-[2rem];
+    }
+
+    .lesli-icon.is-large {
+        @apply
+            h-12
+            w-12
+            text-[3rem];
+    }
+
+    .lesli-icon .material-symbols,
+    .lesli-icon .material-symbols-outlined,
+    .lesli-icon .material-symbols-rounded,
+    .lesli-icon .material-symbols-sharp {
+        @apply
+            block
+            text-inherit
+            leading-none;
+    }
+
+    /*
+     * Button-specific icon sizing.
+     * This keeps icons visually balanced inside .lesli-button.
+     */
+    .lesli-button .lesli-icon {
+        @apply
+            h-5
+            w-5
+            text-[1.25rem];
+    }
+
+    .lesli-button.is-small .lesli-icon {
+        @apply
+            h-4
+            w-4
+            text-[1rem];
+    }
+
+    .lesli-button.is-icon-only .lesli-icon {
+        @apply
+            h-5
+            w-5
+            text-[1.25rem];
+    }
+
+    .lesli-button.is-icon-only.is-small .lesli-icon {
+        @apply
+            h-4
+            w-4
+            text-[1rem];
+    }
+}

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

@@ -6,29 +6,32 @@
         @url,
         method: @method,
         params: @params,
-        class: html_classes,
-        data: { turbo_frame: "_top" },
-        **alpine_attributes) do %>
+        disabled: disabled?,
+        **common_attributes
+    ) do %>
         <%= button_content %>
     <% end %>
 
 <% elsif mode == :link %>
 
-    <%= link_to(
-        @url,
-        class: html_classes,
-        data: { turbo_frame: "_top" },
-        **alpine_attributes) do %>
-        <%= button_content %>
+    <% if disabled? %>
+        <%= content_tag(:span, role: "link", tabindex: -1, **common_attributes) do %>
+            <%= button_content %>
+        <% end %>
+    <% else %>
+        <%= link_to(@url, **common_attributes) do %>
+            <%= button_content %>
+        <% end %>
     <% end %>
 
 <% else %>
 
     <%= content_tag(
         :button,
-        type: "button",
-        class: html_classes,
-        **alpine_attributes) do %>
+        type: button_type,
+        disabled: disabled?,
+        **common_attributes
+    ) do %>
         <%= button_content %>
     <% end %>