avo 3.30.4 → 4.0.0.beta.1

data/app/components/avo/u_i/dropdown_component.html.erb

@@ -0,0 +1,14 @@
+<%= content_tag :div, class: class_names("dropdown"), data: do %>
+  <%= trigger %>
+
+  <% if items.present? %>
+    <%= render Avo::UI::DropdownMenuComponent.new(
+      data: {dropdown_menu_target: "menu"}.merge(@data),
+      classes: @classes,
+      dropdown_menu_classes: @dropdown_menu_classes,
+      open: @open
+    ) do %>
+      <%= items %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/avo/u_i/dropdown_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+class Avo::UI::DropdownComponent < Avo::BaseComponent
+  prop :classes
+  prop :data, default: {}.freeze
+  prop :wrapper_data, default: {}.freeze
+  prop :open, default: false
+  prop :dropdown_menu_classes, default: ""
+
+  renders_one :trigger
+  renders_one :items
+
+  # this is used to trigger the dropdown menu from trigger element
+  # data: {action: component.action} => click->dropdown-menu#toggle
+  def action
+    @action ||= "click->dropdown-menu#toggle"
+  end
+
+  def data
+    return {} if items.blank?
+
+    {
+      controller: "dropdown-menu",
+    }.merge(@wrapper_data)
+  end
+end

data/app/components/avo/u_i/dropdown_menu_component.html.erb

@@ -0,0 +1,16 @@
+<%= content_tag :dialog,
+  class: class_names(
+    "dropdown-popover",
+    "css-animate-dialog-slide-down",
+    @classes
+  ), 
+  open: @open,
+  data: @data do %>
+  <div class="dropdown-menu <%= @dropdown_menu_classes %>">
+    <div class="dropdown-menu__group">
+      <div class="dropdown-menu__list">
+        <%= content %>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/components/avo/u_i/dropdown_menu_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class Avo::UI::DropdownMenuComponent < Avo::BaseComponent
+  prop :data, default: {}.freeze
+  prop :classes
+  prop :open, default: false
+  prop :dropdown_menu_classes, default: ""
+end

data/app/components/avo/u_i/file_upload_input_component.html.erb

@@ -0,0 +1,26 @@
+<%= content_tag :label, for: @id, class: class_names(
+    "file-upload-input",
+    "file-upload-input--#{@size}",
+    {
+      "file-upload-input--disabled": @disabled
+    },
+    @classes) do %>
+  <span class="file-upload-input__icon" aria-hidden="true">
+    <%= svg "tabler/outline/upload" %>
+  </span>
+
+  <% if @size != :sm %>
+    <span class="file-upload-input__content">
+      <span class="file-upload-input__title">
+        <%= @title %>
+        <span class="file-upload-input__subtitle"><%= @subtitle %></span>
+      </span>
+
+      <%= content_tag(:span, @description, class: "file-upload-input__description") %>
+    </span>
+  <% end %>
+
+  <div class="file-upload-input__native-input">
+    <%= content if content.present? %>
+  </div>
+<% end %>

data/app/components/avo/u_i/file_upload_input_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class Avo::UI::FileUploadInputComponent < Avo::BaseComponent
+  VALID_SIZES = %i[sm md lg].freeze unless defined?(VALID_SIZES)
+
+  prop :id
+  prop :title, default: "Click to upload"
+  prop :subtitle, default: "or drag and drop"
+  prop :description
+  prop :size, default: :lg do |value|
+    VALID_SIZES.include?(value) ? value : :lg
+  end
+  prop :disabled, default: false
+  prop :classes
+end

data/app/components/avo/u_i/file_upload_item_component.html.erb

@@ -0,0 +1,48 @@
+<%= content_tag :div, class: class_names("file-upload-item",{
+  "file-upload-item--uploading": show_progress?,
+}, @classes) do %>
+  <span
+    class="file-upload-item__progress"
+    style="width: <%= progress_percentage %>%;"
+    aria-hidden="true">
+  </span>
+
+  <div class="file-upload-item__body">
+    <p class="file-upload-item__title" title="<%= @title %>"><%= @title %></p>
+
+    <div class="file-upload-item__meta">
+      <span class="file-upload-item__size">
+        <% if @state == :error || @state == :failed %>
+          Upload failed.
+        <% else %>
+          <%= @size_label %>
+        <% end %>
+      </span>
+
+      <% if show_progress? %>
+        <span aria-hidden="true">|</span>
+
+        <% if @state == :complete %>
+          <span class="file-upload-item__status file-upload-item__status--complete">
+          <%= svg("tabler/outline/circle-check", class: "file-upload-item__status-icon") %>
+            <span class="file-upload-item__status-label">Complete</span>
+          </span>
+        <% end %>
+        <% if @state == :error || @state == :failed %>
+          <span class="file-upload-item__status file-upload-item__status--error">
+            <%= svg("tabler/outline/circle-x", class: "file-upload-item__status-icon") %>
+            <span class="file-upload-item__status-label">Try again</span>
+          </span>
+        <% end %>
+        <% if @state == :uploading %>
+          <span class="file-upload-item__status file-upload-item__status--uploading">
+            <%= svg("tabler/outline/upload", class: "file-upload-item__status-icon") %>
+            <span class="file-upload-item__status-label"><%= progress_percentage %>%</span>
+          </span>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+
+  <%= content_tag :div, content, class: "file-upload-item__actions" if content.present? %>
+<% end %>

data/app/components/avo/u_i/file_upload_item_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class Avo::UI::FileUploadItemComponent < Avo::BaseComponent
+  prop :title
+  prop :size_label
+  prop :progress, default: 0
+  prop :classes
+  prop :state, default: :default # :uploading, :complete, :error, :failed after we wull implement the states dynamically
+
+  def show_progress?
+    @progress.to_i > 0 || @state != :default
+  end
+
+  def progress_percentage
+    @progress.to_i.clamp(0, 100)
+  end
+end

data/app/components/avo/u_i/icon_button_component.html.erb

@@ -0,0 +1,7 @@
+<%= tag.button(
+  type: @type,
+  class: button_classes,
+  data: data
+) do %>
+  <%= svg(@icon) %>
+<% end %>

data/app/components/avo/u_i/icon_button_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class Avo::UI::IconButtonComponent < Avo::BaseComponent
+  prop :icon
+  prop :action
+  prop :classes
+  prop :type, default: :button
+  prop :data, default: {}.freeze
+
+  def data
+    {
+      action: @action
+    }.merge(@data)
+  end
+
+  def button_classes
+    class_names(
+      "inline-flex items-center justify-center rounded-md p-1 cursor-pointer",
+      @classes
+    )
+  end
+end

data/app/components/avo/u_i/panel_component.html.erb

@@ -0,0 +1,49 @@
+<%= tag.div class: class_names(
+  "panel",
+  @class,
+  "panel--has-sidebar": sidebar?,
+  "has-cover": has_cover?,
+), data: {
+  **@data,
+  component_name:,
+  "item-index": @index
+} do %>
+  <% if cover? %>
+    <div class="panel__cover"><%= cover %></div>
+  <% end %>
+
+  <% if header? %>
+    <div class="panel__header"><%= header %></div>
+  <% elsif title.present? || description.present? || controls? %>
+    <div class="panel__header">
+      <%= render ui.panel_header(
+        title:,
+        description:,
+      ) do |header| %>
+        <% if controls? %>
+          <% header.with_controls do %>
+            <%= controls %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+
+  <div class="panel__content">
+    <div class="panel__body">
+      <% if card? %>
+        <div class="panel__card"><%= card %></div>
+      <% else %>
+        <%= body %>
+      <% end %>
+
+      <% if footer? %>
+        <div class="panel__footer"><%= footer %></div>
+      <% end %>
+    </div>
+
+    <% if sidebar? %>
+      <div class="panel__sidebar"><%= sidebar %></div>
+    <% end %>
+  </div>
+<% end %>

data/app/components/avo/u_i/panel_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class Avo::UI::PanelComponent < Avo::BaseComponent
+  prop :title, reader: :public
+  prop :description, reader: :public
+  prop :external_link
+  prop :args, kind: :**, default: {}.freeze
+  prop :avatar
+  prop :cover
+  prop :class
+  prop :index
+  prop :data, default: -> { {}.freeze }
+
+  renders_one :header
+  renders_one :controls
+  renders_one :cover
+  renders_one :sidebar
+  renders_one :body
+  renders_one :card, "Avo::UI::CardComponent" # wraps content into a card automatically
+  renders_one :footer
+
+  def has_cover?
+    @cover.present?
+  end
+
+  def has_avatar?
+    @avatar.present?
+  end
+end

data/app/components/avo/u_i/panel_header_component.html.erb

@@ -0,0 +1,37 @@
+<%= tag.div class: class_names(
+  @class,
+  "header",
+  "header--size-medium": size_medium?,
+  "header--size-small": size_small?
+), data: { "item-index": @index }.compact_blank do %>
+  <div class="header__main">
+    <div class="header__content">
+      <% if avatar? %>
+        <div class="header__avatar"><%= avatar %></div>
+      <% end %>
+
+      <div class="header__text">
+        <div class="header__title">
+          <% if @url.present? %>
+            <%= link_to @title, @url, target: @target %>
+          <% else %>
+            <%= @title %>
+          <% end %>
+          <%= title_slot %>
+        </div>
+
+        <% if @description.present? %>
+          <p class="header__description"><%= @description %></p>
+        <% end %>
+
+      <% if discreet_information? %>
+        <div class="header__discreet-information mt-2"><%= discreet_information %></div>
+      <% end %>
+      </div>
+    </div>
+
+    <% if controls? %>
+      <div class="header__controls"><%= controls %></div>
+    <% end %>
+  </div>
+<% end %>

data/app/components/avo/u_i/panel_header_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class Avo::UI::PanelHeaderComponent < Avo::BaseComponent
+  prop :title
+  prop :description
+  prop :size, default: :medium
+  prop :url
+  prop :target
+  prop :index
+  prop :class
+
+  renders_one :title_slot
+  renders_one :avatar
+  renders_one :controls
+  renders_one :discreet_information
+
+  def size_medium?
+    @size == :medium
+  end
+
+  def size_small?
+    @size == :small
+  end
+end

data/app/components/avo/u_i/search_input_component.html.erb

@@ -0,0 +1,28 @@
+<%= content_tag :div, class: "search-input" do %>
+  <%= search_field_tag @name, @value,
+    id: @id,
+    placeholder: @placeholder,
+    class: class_names(
+      "search-input__input",
+      {"search-input__input--with-shortcut": @with_shortcut},
+      @classes
+    ),
+    disabled: @disabled,
+    autocomplete: "off",
+    data: @data
+  %>
+
+  <span class="search-input__prefix" aria-hidden="true">
+    <%= helpers.svg "tabler/outline/search" %>
+  </span>
+
+  <% if @with_shortcut %>
+    <span class="search-input__suffix" aria-hidden="true">
+      <kbd class="search-input__shortcut">
+        <abbr title="Command" class="no-underline os-pc:hidden">⌘</abbr>
+        <abbr title="CTRL" class="no-underline os-mac:hidden">CTRL</abbr>
+      </kbd>
+      <kbd class="search-input__shortcut">K</kbd>
+    </span>
+  <% end %>
+<% end %>

data/app/components/avo/u_i/search_input_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class Avo::UI::SearchInputComponent < Avo::BaseComponent
+  prop :name, default: "q"
+  prop :id
+  prop :value
+  prop :placeholder
+  prop :disabled, default: false
+  prop :with_shortcut, default: false
+  prop :classes
+  prop :data, default: -> { {} }
+end

data/app/components/avo/u_i/tabs/tab_component.html.erb

@@ -0,0 +1,26 @@
+<%= content_tag :div, class: class_names(
+  "tabs__item-wrapper",
+  "tabs__item-wrapper--#{@variant}",
+  "#{ACTIVE_CLASS}": @variant == :scope && @active
+) do %>
+  <%= link_to(@href,
+    class: class_names(
+      @classes,
+      "tabs__item",
+      "tabs__item--group": @variant == :group,
+      "tabs__item--disabled": @disabled,
+      "#{ACTIVE_CLASS}": @active
+    ),
+    data: @data,
+    title: @title,
+    role: "tab",
+    id: @id,
+    "aria-selected": @active,
+    "aria-controls": @aria_controls,
+    "aria-disabled": @disabled,
+    tabindex: @disabled ? -1 : 0
+  ) do %>
+    <%= svg @icon, class: "tabs__item-icon", "aria-hidden": "true" if @icon.present? %>
+    <%= tag.span @label, class: "tabs__item-label" if @label.present? %>
+  <% end %>
+<% end %>

data/app/components/avo/u_i/tabs/tab_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Avo
+  module UI
+    module Tabs
+      class TabComponent < Avo::BaseComponent
+        include Avo::ApplicationHelper
+
+        ACTIVE_CLASS = "tabs__item--active"
+
+        prop :label
+        prop :variant, default: :scope
+        prop :active, default: false
+        prop :icon
+        prop :href, default: "#"
+        prop :id, default: -> { "tab-#{object_id}" }
+        prop :disabled, default: false
+        prop :aria_controls, default: -> { "#{@id}-panel" }
+        prop :data, default: {}.freeze
+        prop :classes
+        prop :title
+      end
+    end
+  end
+end

data/app/components/avo/u_i/tabs/tabs_component.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag :div,
+  class: "tabs",
+  role: :tablist,
+  id: @id,
+  "aria-label": @aria_label do %>
+  <%= content %>
+<% end %>

data/app/components/avo/u_i/tabs/tabs_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Avo
+  module UI
+    module Tabs
+      class TabsComponent < Avo::BaseComponent
+        prop :variant, default: :scope
+        prop :aria_label, default: "Tabs navigation"
+        prop :id, default: -> { "tabs-#{object_id}" }
+      end
+    end
+  end
+end

data/app/components/avo/view_types/base_view_type_component.rb

@@ -0,0 +1,26 @@
+class Avo::ViewTypes::BaseViewTypeComponent < Avo::BaseComponent
+  extend PropInitializer::Properties
+
+  prop :resources
+  prop :resource
+  prop :reflection
+  prop :parent_record
+  prop :parent_resource
+  prop :actions, reader: :public
+  prop :pagy
+  prop :query
+  prop :turbo_frame
+  prop :index_params
+
+  def paginator_component
+    Avo::PaginatorComponent.new(
+      pagy: @pagy,
+      turbo_frame: @turbo_frame,
+      index_params: @index_params,
+      resource: @resource,
+      parent_record: @parent_record,
+      parent_resource: @parent_resource,
+      discreet_pagination: field&.discreet_pagination
+    )
+  end
+end

data/app/components/avo/view_types/grid_component.html.erb

@@ -0,0 +1,18 @@
+<turbo-frame id="<%= @resource.model_key %>_list" target="_top" class="relative flex w-full flex-col">
+  <%= content_tag :div,
+    class:"grid-wrapper",
+    data: {
+      component_name: self.class.to_s.underscore,
+      selected_resources_name: @resource.model_key,
+      selected_resources: [],
+      **(try(:drag_reorder_data_attributes) || {})
+    } do %>
+    <% @resources.each_with_index do |resource, index| %>
+      <% cache_if Avo.configuration.cache_resources_on_index_view, resource.cache_hash(@parent_record) do %>
+        <%= render(resource.resolve_component(Avo::Index::GridItemComponent).new(resource: resource, reflection: @reflection, parent_record: @parent_record, parent_resource: @parent_resource, actions: actions)) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <div class="mt-6"><%= render paginator_component %></div>
+</turbo-frame>

data/app/components/avo/view_types/grid_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Avo::ViewTypes::GridComponent < Avo::ViewTypes::BaseViewTypeComponent
+end

data/app/components/avo/view_types/map_component.html.erb

@@ -0,0 +1,17 @@
+<% if @resources.present? %>
+  <div class="map-view-container grid <%= grid_layout_classes %> w-full gap-4">
+    <%= tag.div class: class_names("map-component rounded-2xl overflow-hidden", map_component_order_class), data: { controller: "map-dark-mode" } do %>
+      <%= js_map(resource_location_markers, **resource_mapkick_options) %>
+    <% end %>
+
+    <% if render_table? %>
+      <div class="overflow-auto <%= table_component_order_class %>">
+        <%= render(@resource.resolve_component(Avo::ViewTypes::TableComponent).new(resources: @resources, resource: @resource, reflection: @reflection, parent_record: @parent_record, parent_resource: @parent_resource, pagy: @pagy, query: @query, actions: @actions, turbo_frame: @turbo_frame, index_params: @index_params)) %>
+      </div>
+    <% end %>
+  </div>
+<% else %>
+  <div class="rounded-sm bg-white shadow-panel">
+    <%= helpers.empty_state by_association: params[:related_name].present? %>
+  </div>
+<% end %>

data/app/components/avo/view_types/map_component.rb

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+# Render a map view for a list of resources, where each resource is
+# expected to have an attribute/attribute set representing its location.
+class Avo::ViewTypes::MapComponent < Avo::ViewTypes::BaseViewTypeComponent
+  attr_reader :resources
+
+  delegate :js_map, to: :helpers
+
+  def grid_layout_classes
+    return unless render_table?
+
+    if horizontal_layout?
+      "grid-flow-row sm:grid-flow-col grid-rows-1 auto-cols-fr"
+    elsif vertical_layout?
+      "grid-flow-row grid-cols-1"
+    end
+  end
+
+  def horizontal_layout?
+    %i[left right].include?(map_position)
+  end
+
+  def vertical_layout?
+    %i[bottom top].include?(map_position)
+  end
+
+  def map_component_order_class
+    if render_table? && table_positioned_at_the_start?
+      "order-last"
+    else
+      "order-first"
+    end
+  end
+
+  def table_component_order_class
+    if table_positioned_at_the_start?
+      "order-first"
+    else
+      "order-last"
+    end
+  end
+
+  def table_positioned_at_the_start?
+    %i[right bottom].include?(map_position)
+  end
+
+  def map_position
+    map_options.dig(:map, :position)
+  end
+
+  def resource_location_markers
+    # If we have no proc and no default location method, don't try to create markers
+    return [] unless resource_mappable?
+
+    records_markers = resources
+      .map do |resource|
+        Avo::ExecutionContext.new(target: marker_proc, record: resource.record).handle
+      end
+      .compact
+      .filter do |coordinates|
+        coordinates[:latitude].present? && coordinates[:longitude].present?
+      end
+
+    return records_markers if map_options[:extra_markers].nil?
+
+    records_markers + Avo::ExecutionContext.new(target: map_options[:extra_markers]).handle
+  end
+
+  def resource_mapkick_options
+    options = map_options[:mapkick_options] || {}
+
+    options[:height] = if horizontal_layout?
+      "100%"
+    else
+      "26rem"
+    end
+
+    options[:style] ||= "mapbox://styles/mapbox/light-v11"
+
+    options
+  end
+
+  def render_table?
+    map_options.dig(:table, :visible)
+  end
+
+  private
+
+  def default_record_marker_proc
+    lambda {
+      {
+        latitude: record.coordinates.first,
+        longitude: record.coordinates.last
+      }
+    }
+  end
+
+  def map_options
+    @resource.map_view || {}
+  end
+
+  def marker_proc
+    map_options[:record_marker] || default_record_marker_proc
+  end
+
+  def resource_mappable?
+    map_options[:record_marker].present? || map_options[:extra_markers].present? || @resources.first.record.respond_to?(:coordinates)
+  end
+end