avo 2.5.2.pre.6 → 2.5.2.pre.7

data/app/components/avo/views/resource_edit_component.html.erb

@@ -1,6 +1,4 @@
-<div data-model-id="<%= @resource.model.id %>"
-  class="space-y-8"
->
+<div data-model-id="<%= @resource.model.id %>">
   <% @resource.panels.each do |resource_panel| %>
     <%= form_with model: @resource.model,
         scope: @resource.form_scope,
@@ -11,17 +9,11 @@
       <%= render Avo::ReferrerParamsComponent.new back_path: back_path %>
       <%= render Avo::PanelComponent.new(title: resource_panel[:name], description: @resource.resource_description, display_breadcrumbs: true) do |c| %>
         <% c.tools do %>
-          <%= a_link back_path,
-            style: :text,
-            icon: 'arrow-left' do %>
+          <%= a_link back_path, icon: 'arrow-left' do %>
             <%= t('avo.cancel').capitalize %>
           <% end %>
           <% if can_see_the_save_button? %>
-            <%= a_button color: :primary,
-              style: :primary,
-              loading: true,
-              type: :submit,
-              icon: 'save' do %>
+            <%= a_button color: :green, loading: true, type: :submit, icon: 'save' do %>
               <%= t('avo.save').capitalize %>
             <% end %>
           <% end %>
@@ -48,21 +40,4 @@
       <% end %>
     <% end %>
   <% end %>
-  <% if @reflection.blank? %>
-    <% if has_one_panels.present? %>
-      <% has_one_panels.each_with_index do |field, index| %>
-        <%= render field.component_for_view(:show).new(field: field, resource: @resource, index: index) %>
-      <% end %>
-    <% end %>
-    <% if has_many_panels.present? %>
-      <% has_many_panels.each_with_index do |field, index| %>
-        <%= render field.component_for_view(:show).new(field: field, resource: @resource, index: index) %>
-      <% end %>
-    <% end %>
-    <% if has_as_belongs_to_many_panels.present? %>
-      <% has_as_belongs_to_many_panels.each_with_index do |field, index| %>
-        <%= render field.component_for_view(:show).new(field: field, resource: @resource, index: index) %>
-      <% end %>
-    <% end %>
-  <% end %>
 </div>

data/app/components/avo/views/resource_edit_component.rb

@@ -4,12 +4,8 @@ class Avo::Views::ResourceEditComponent < Avo::ResourceComponent
   include Avo::ResourcesHelper
   include Avo::ApplicationHelper
 
-  attr_reader :fields_by_panel, :has_one_panels, :has_many_panels, :has_as_belongs_to_many_panels
-
   def initialize(resource: nil)
     @resource = resource
-
-    split_panel_fields
   end
 
   def back_path
@@ -25,4 +21,10 @@ class Avo::Views::ResourceEditComponent < Avo::ResourceComponent
   def can_see_the_save_button?
     @resource.authorization.authorize_action :edit, raise_exception: false
   end
+
+  private
+
+  def via_resource?
+    params[:via_resource_class].present? && params[:via_resource_id].present?
+  end
 end

data/app/components/avo/views/resource_index_component.html.erb

@@ -1,28 +1,19 @@
 <div>
   <%= render Avo::PanelComponent.new(title: title, description: description, data: { component: 'resources-index' }, display_breadcrumbs: @reflection.blank?) do |c| %>
     <% c.tools do %>
-      <% if can_attach? %>
-        <%= a_link attach_path,
-          icon: 'heroicons/outline/link',
-          color: :primary,
-          style: :text,
-          'data-turbo-frame': 'attach_modal',
-          'data-target': 'attach' do %>
-          <%= t('avo.attach_item', item: singular_resource_name).capitalize %>
-        <% end %>
-      <% end %>
       <% if can_see_the_actions_button? %>
         <%= render Avo::ActionsComponent.new actions: @actions, resource: @resource %>
       <% end %>
       <% if can_see_the_create_button? %>
-        <%= a_link create_path,
-          icon: 'heroicons/outline/plus',
-          'data-target': 'create',
-          style: :primary,
-          color: :primary do %>
+        <%= a_link create_path, icon: 'heroicons/outline/plus', 'data-target': 'create', color: :primary do %>
           <%= t('avo.create_new_item', item: singular_resource_name.downcase ) %>
         <% end %>
       <% end %>
+      <% if can_attach? %>
+        <%= a_link attach_path, icon: 'heroicons/outline/link', color: :primary, 'data-turbo-frame': 'attach_modal', 'data-target': 'attach' do %>
+          <%= t('avo.attach_item', item: singular_resource_name).capitalize %>
+        <% end %>
+      <% end %>
     <% end %>
     <% c.body do %>
       <div class="flex flex-col xs:flex-row xs:justify-between space-y-2 xs:space-y-0 py-4 <%= 'hidden' if @resource.search_query.nil? && @filters.empty? && available_view_types.count <= 1 %>"
@@ -59,14 +50,15 @@
     <% c.bare_content do %>
       <% if view_type.to_sym == :table %>
         <% if @models.present? %>
-          <div class="mt-4">
+          <div class="mt-8">
             <%= render Avo::PaginatorComponent.new pagy: @pagy, turbo_frame: @turbo_frame || 'none', index_params: @index_params, resource: @resource, parent_model: @parent_model %>
           </div>
         <% end %>
       <% end %>
+
       <% if view_type.to_sym == :grid %>
         <%= render Avo::Index::ResourceGridComponent.new(resources: @resources, resource: @resource, reflection: @reflection, parent_model: @parent_model) %>
-        <div class="mt-6">
+        <div class="mt-14">
           <%= render Avo::PaginatorComponent.new pagy: @pagy, turbo_frame: @turbo_frame || 'none', index_params: @index_params, resource: @resource, parent_model: @parent_model %>
         </div>
       <% end %>

data/app/components/avo/views/resource_new_component.html.erb

@@ -14,17 +14,11 @@
       <%= render Avo::PanelComponent.new(title: resource_panel[:name], description: @resource.resource_description, display_breadcrumbs: true) do |c| %>
         <% c.tools do %>
           <div class="flex justify-end space-x-2">
-            <%= a_link back_path,
-              style: :text,
-              icon: 'arrow-left' do %>
+            <%= a_link back_path, icon: 'arrow-left' do %>
               <%= t('avo.cancel').capitalize %>
             <% end %>
             <% if can_see_the_save_button? %>
-              <%= a_button color: :primary,
-                style: :primary,
-                loading: true,
-                type: :submit,
-                icon: 'save' do %>
+              <%= a_button color: 'green', loading: true, type: :submit, icon: 'save' do %>
                 <%= t('avo.save').capitalize %>
               <% end %>
             <% end %>

data/app/components/avo/views/resource_show_component.html.erb

@@ -1,45 +1,39 @@
 <div data-model-id="<%= @resource.model.id %>"
   data-selected-resources-name="<%= @resource.model_key %>"
   data-selected-resources='["<%= @resource.model.id %>"]'
-  class="space-y-12"
+  class="space-y-8"
 >
   <% @resource.panels.each_with_index do |resource_panel, index| %>
     <%= render Avo::PanelComponent.new(title: title, description: @resource.resource_description, display_breadcrumbs: @reflection.blank?, index: index) do |c| %>
       <% c.tools do %>
         <% if resource_panel[:name] == @resource.default_panel_name %>
           <% if @reflection.present? && @resource.model.present? %>
+            <%= render Avo::ActionsComponent.new actions: @actions, resource: @resource %>
             <% if can_detach? %>
               <%= a_button url: detach_path,
                 icon: 'detach',
                 method: :delete,
                 form_class: 'flex flex-col sm:flex-row sm:inline-flex',
-                style: :text,
                 data: {
                   confirm: "Are you sure you want to detach this #{@reflection.name.to_s}."
                 } do %>
                 <%= t('avo.detach_item', item: @reflection.name.to_s).capitalize %>
               <% end %>
-              <%= render Avo::ActionsComponent.new actions: @actions, resource: @resource %>
             <% end %>
             <% if can_see_the_edit_button? %>
-              <%= a_link edit_path,
-                color: :primary,
-                style: :primary,
-                icon: 'edit' do %>
+              <%= a_link edit_path, color: :primary, icon: 'edit' do %>
                 <%= t('avo.edit').capitalize %>
               <% end %>
             <% end %>
           <% else %>
-            <%= a_link back_path,
-              style: :text,
-              icon: 'arrow-left' do %>
+            <%= a_link back_path, icon: 'arrow-left' do %>
               <%= t('avo.go_back') %>
             <% end %>
+            <%= render Avo::ActionsComponent.new actions: @actions, resource: @resource %>
             <% if can_see_the_destroy_button? %>
               <%= a_button url: helpers.resource_path(model: @resource.model, resource: @resource),
                 method: :delete,
                 local: true,
-                style: :text,
                 title: t('avo.delete_item', item: @resource.model.model_name.name.downcase).capitalize,
                 loading: true,
                 confirm: t('avo.are_you_sure', item: @resource.model.model_name.name.downcase),
@@ -54,12 +48,8 @@
                 <%= t('avo.delete').capitalize %>
               <% end %>
             <% end %>
-            <%= render Avo::ActionsComponent.new actions: @actions, resource: @resource %>
             <% if @resource.authorization.authorize_action(:edit, raise_exception: false) %>
-              <%= a_link edit_path,
-                color: :primary,
-                style: :primary,
-                icon: 'edit' do %>
+              <%= a_link edit_path, color: :primary, icon: 'edit' do %>
                 <%= t('avo.edit').capitalize %>
               <% end %>
             <% end %>

data/app/components/avo/views/resource_show_component.rb

@@ -44,8 +44,53 @@ class Avo::Views::ResourceShowComponent < Avo::ResourceComponent
     helpers.edit_resource_path(model: @resource.model, resource: @resource, **args)
   end
 
+  def detach_path
+    helpers.resource_detach_path(params[:resource_name], params[:id], @reflection.name.to_s, @resource.model.id)
+  end
+
+  def destroy_path
+    helpers.resource_path(model: @resource.model, resource: @resource)
+  end
+
+  def can_detach?
+    authorize_association_for("detach")
+  end
+
+  def can_see_the_edit_button?
+    @resource.authorization.authorize_action(:edit, raise_exception: false)
+  end
+
+  def can_see_the_destroy_button?
+    @resource.authorization.authorize_action(:destroy, raise_exception: false)
+  end
+
   private
 
+  def via_resource?
+    params[:via_resource_class].present? && params[:via_resource_id].present?
+  end
+
+  def split_panel_fields
+    @fields_by_panel = {}
+    @has_one_panels = []
+    @has_many_panels = []
+    @has_as_belongs_to_many_panels = []
+
+    @resource.get_fields.each do |field|
+      case field.class.to_s
+      when "Avo::Fields::HasOneField"
+        @has_one_panels << field
+      when "Avo::Fields::HasManyField"
+        @has_many_panels << field
+      when "Avo::Fields::HasAndBelongsToManyField"
+        @has_as_belongs_to_many_panels << field
+      else
+        @fields_by_panel[field.panel_name] ||= []
+        @fields_by_panel[field.panel_name] << field
+      end
+    end
+  end
+
   # In development and test environments we shoudl show the invalid field errors
   def should_display_invalid_fields_errors?
     (Rails.env.development? || Rails.env.test?) && @resource.invalid_fields.present?

data/app/controllers/avo/actions_controller.rb

@@ -14,12 +14,14 @@ module Avo
       resource_ids = action_params[:fields][:resource_ids].split(",")
       models = @resource.class.find_scope.find resource_ids
 
-      fields = action_params[:fields].except("resource_ids")
+      fields = action_params[:fields].select do |key, value|
+        key != "resource_ids"
+      end
 
       args = {
         fields: fields,
         current_user: _current_user,
-        resource: resource
+        resource: resource,
       }
 
       args[:models] = models unless @action.standalone
@@ -47,7 +49,8 @@ module Avo
 
     def respond(response)
       response[:type] ||= :reload
-      messages = get_messages response
+      response[:message_type] ||= :notice
+      response[:message] ||= I18n.t("avo.action_ran_successfully")
 
       if response[:type] == :download
         return send_data response[:path], filename: response[:filename]
@@ -55,11 +58,6 @@ module Avo
 
       respond_to do |format|
         format.html do
-          # Flash the messages collected from the action
-          messages.each do |message|
-            flash[message[:type]] = message[:body]
-          end
-
           if response[:type] == :redirect
             path = response[:path]
 
@@ -67,25 +65,12 @@ module Avo
               path = instance_eval(&path)
             end
 
-            redirect_to path
+            redirect_to path, "#{response[:message_type]}": response[:message]
           elsif response[:type] == :reload
-            redirect_back fallback_location: resources_path(resource: @resource)
+            redirect_back fallback_location: resources_path(resource: @resource), "#{response[:message_type]}": response[:message]
           end
         end
       end
     end
-
-    private
-
-    def get_messages(response)
-      default_message = {
-        type: :info,
-        body: I18n.t("avo.action_ran_successfully")
-      }
-
-      return [default_message] if response[:messages].blank?
-
-      response[:messages]
-    end
   end
 end

data/app/controllers/avo/associations_controller.rb

@@ -46,8 +46,8 @@ module Avo
         query = @authorization.apply_policy @attachment_class
 
         # Add the association scope to the query scope
-        if @field.attach_scope.present?
-          query = Avo::Hosts::AssociationScopeHost.new(block: @field.attach_scope, query: query, parent: @model).handle
+        if @field.scope.present?
+          query = Avo::Hosts::AssociationScopeHost.new(block: @field.scope, query: query, parent: @model).handle
         end
 
         @options = query.all.map do |model|
@@ -65,7 +65,7 @@ module Avo
 
       respond_to do |format|
         if @model.save
-          format.html { redirect_back fallback_location: resource_path(model: @model, resource: @resource), notice: t("avo.attachment_class_attached", attachment_class: @related_resource.name) }
+          format.html { redirect_to resource_path(model: @model, resource: @resource), notice: t("avo.attachment_class_attached", attachment_class: @related_resource.name) }
         else
           format.html { render :new }
         end

data/app/controllers/avo/base_controller.rb

@@ -11,8 +11,8 @@ module Avo
     before_action :set_edit_title_and_breadcrumbs, only: [:edit, :update]
     before_action :fill_model, only: [:create, :update]
     before_action :authorize_action
-    # before_action :reset_pagination_if_filters_changed, only: :index
-    # before_action :cache_applied_filters, only: :index
+    before_action :reset_pagination_if_filters_changed, only: :index
+    before_action :cache_applied_filters, only: :index
 
     def index
       @page_title = @resource.plural_name.humanize
@@ -49,10 +49,10 @@ module Avo
         # Check if the sortable field option is actually a proc and we need to do a custom sort
         field_id = @index_params[:sort_by].to_sym
         field = @resource.get_field_definitions.find { |field| field.id == field_id }
-        @query = if field&.sortable.is_a?(Proc)
-          field.sortable.call(@query, @index_params[:sort_direction])
+        if field&.sortable.is_a?(Proc)
+          @query = field.sortable.call(@query, @index_params[:sort_direction])
         else
-          @query.order("#{@resource.model_class.table_name}.#{@index_params[:sort_by]} #{@index_params[:sort_direction]}")
+          @query = @query.order("#{@resource.model_class.table_name}.#{@index_params[:sort_by]} #{@index_params[:sort_direction]}")
         end
       end
 
@@ -61,14 +61,7 @@ module Avo
         @query = filter_class.safe_constantize.new.apply_query request, @query, filter_value
       end
 
-      extra_pagy_params = {}
-
-      # Reset open filters when a user navigates to a new page
-      extra_pagy_params[:keep_filters_panel_open] = if params[:keep_filters_panel_open] == "1"
-        "0"
-      end
-
-      @pagy, @models = pagy(@query, items: @index_params[:per_page], link_extra: "data-turbo-frame=\"#{params[:turbo_frame]}\"", size: [1, 2, 2, 1], params: extra_pagy_params)
+      @pagy, @models = pagy(@query, items: @index_params[:per_page], link_extra: "data-turbo-frame=\"#{params[:turbo_frame]}\"", size: [1, 2, 2, 1])
 
       # Create resources for each model
       @resources = @models.map do |model|
@@ -361,21 +354,19 @@ module Avo
     end
 
     # Caching these so we know when the filters have changed so we reset the pagination
-    # def cache_applied_filters
-    #   # puts ["Rails.session->", session].inspect
-    #   session[:avo_applied_filters] = params[:filters]
-    #   # ::Avo::App.cache_store.delete(applied_filters_cache_key) if params[:filters].nil?
+    def cache_applied_filters
+      ::Avo::App.cache_store.delete applied_filters_cache_key if params[:filters].nil?
 
-    #   # ::Avo::App.cache_store.write(applied_filters_cache_key, params[:filters], expires_in: 1.day)
-    # end
+      ::Avo::App.cache_store.write(applied_filters_cache_key, params[:filters], expires_in: 1.day)
+    end
 
-    # def reset_pagination_if_filters_changed
-    #   params[:page] = 1 if params[:filters] != session[:avo_applied_filters]
-    # end
+    def reset_pagination_if_filters_changed
+      params[:page] = 1 if params[:filters] != ::Avo::App.cache_store.read(applied_filters_cache_key)
+    end
 
-    # def applied_filters_cache_key
-    #   "avo.base_controller.#{@resource.model_key}.applied_filters"
-    # end
+    def applied_filters_cache_key
+      "avo.base_controller.#{@resource.model_key}.applied_filters"
+    end
 
     def set_edit_title_and_breadcrumbs
       @resource = @resource.hydrate(model: @model, view: :edit, user: _current_user)

data/app/controllers/avo/private_controller.rb

@@ -3,7 +3,6 @@ require_dependency "avo/application_controller"
 module Avo
   class PrivateController < ApplicationController
     def design
-      @page_title = "Design [Private]"
     end
   end
 end

data/app/controllers/avo/search_controller.rb

@@ -51,12 +51,12 @@ module Avo
         # Fetch the field
         field = belongs_to_field
 
-        if field.attach_scope.present?
+        if field.scope.present?
           # Fetch the parent
           parent = params[:via_reflection_class].safe_constantize.find params[:via_reflection_id]
 
           # Add to the query
-          query = Avo::Hosts::AssociationScopeHost.new(block: belongs_to_field.attach_scope, query: query, parent: parent).handle
+          query = Avo::Hosts::AssociationScopeHost.new(block: belongs_to_field.scope, query: query, parent: parent).handle
         end
       end
 

data/app/helpers/avo/application_helper.rb

@@ -118,7 +118,7 @@ module Avo
     end
 
     def input_classes(extra_classes = "", has_error: false)
-      classes = "appearance-none inline-flex bg-gray-25 disabled:cursor-not-allowed text-gray-600 disabled:opacity-50 rounded py-2 px-3 leading-tight border focus:border-gray-600 focus-visible:ring-0 focus:text-gray-700"
+      classes = "appearance-none inline-flex bg-gray-100 disabled:cursor-not-allowed text-gray-600 disabled:opacity-50 rounded py-2 px-3 leading-tight border focus:border-gray-600 focus-visible:ring-0 focus:text-gray-700"
 
       classes += if has_error
         " border-red-600"

data/app/javascript/js/application.js

@@ -4,7 +4,7 @@ import { Application } from '@hotwired/stimulus'
 const application = Application.start()
 
 // Configure Stimulus development experience
-application.debug = false
+application.debug = window?.localStorage.getItem('avo.debug')
 window.Stimulus = application
 
 // Register stimulus-components controller

data/app/javascript/js/controllers/alerts_controller.js

@@ -0,0 +1,26 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['container']
+
+  connect() {
+    window.toastr[this.type](this.message)
+  }
+
+  get type() {
+    const typeMap = {
+      info: 'info',
+      warning: 'warning',
+      success: 'success',
+      error: 'error',
+      notice: 'info',
+      alert: 'error',
+    }
+
+    return typeMap[this.containerTarget.dataset.alertType]
+  }
+
+  get message() {
+    return this.containerTarget.innerHTML
+  }
+}

data/app/javascript/js/controllers/base_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  /**
+  * Helper that parses the data attribute value to JSON
+  */
+  getJsonAttribute(target, attribute, defaultValue = []) {
+    let result = defaultValue
+    try {
+      result = JSON.parse(target.getAttribute(attribute))
+    } catch (error) {}
+
+    return result
+  }
+
+  /**
+  * Parses the attribute to boolean
+  */
+  getBooleanAttribute(target, attribute) {
+    return target.getAttribute(attribute) === '1'
+  }
+}

data/app/javascript/js/controllers/fields/key_value_controller.js

@@ -110,7 +110,7 @@ export default class extends Controller {
 
   inputField(id = 'key', index, key, value) {
     return `<input
-  class="${this.options.inputClasses} focus:bg-gray-100 !rounded-none border-gray-600 border-r border-l-0 border-b-0 border-t-0 focus:border-gray-300 w-1/2 focus:outline-none outline-none key-value-input-${id}"
+  class="${this.options.inputClasses} !rounded-none border-gray-600 border-r border-l-0 border-b-0 border-t-0 focus:border-gray-300 w-1/2 focus:outline-none outline-none key-value-input-${id}"
   data-action="input->key-value#${id}FieldUpdated"
   placeholder="${this.options[`${id}_label`]}"
   data-index="${index}"

data/app/javascript/js/controllers/fields/tags_field_controller.js

@@ -0,0 +1,86 @@
+import { first, isObject, merge } from 'lodash'
+import Tagify from '@yaireo/tagify'
+
+import BaseController from '../base_controller'
+
+import { suggestionItemTemplate, tagTemplate } from './tags_field_helpers'
+
+export default class extends BaseController {
+  static targets = ['input', 'fakeInput'];
+
+  tagify = null;
+
+  get whitelistItems() {
+    return this.getJsonAttribute(this.inputTarget, 'data-whitelist-items', [])
+  }
+
+  get blacklistItems() {
+    return this.getJsonAttribute(this.inputTarget, 'data-blacklist-items', [])
+  }
+
+  get enforceSuggestions() {
+    return this.getBooleanAttribute(this.inputTarget, 'data-enforce-suggestions')
+  }
+
+  get closeOnSelect() {
+    return this.getBooleanAttribute(this.inputTarget, 'data-close-on-select')
+  }
+
+  get delimiters() {
+    return this.getJsonAttribute(this.inputTarget, 'data-delimiters', [])
+  }
+
+  get suggestionsAreObjects() {
+    return isObject(first(this.whitelistItems))
+  }
+
+  get tagifyOptions() {
+    let options = {
+      whitelist: this.whitelistItems,
+      blacklist: this.blacklistItems,
+      enforceWhitelist: this.enforceSuggestions,
+      delimiters: this.delimiters.join('|'),
+      maxTags: 10,
+      dropdown: {
+        maxItems: 20,
+        enabled: 0,
+        closeOnSelect: this.closeOnSelect,
+      },
+    }
+
+    if (this.suggestionsAreObjects) {
+      options = merge(options, {
+        tagTextProp: 'label',
+        dropdown: {
+          searchKeys: ['label'],
+        },
+        templates: {
+          tag: tagTemplate,
+          dropdownItem: suggestionItemTemplate,
+        },
+      })
+    }
+
+    return options
+  }
+
+  connect() {
+    if (this.hasInputTarget) {
+      this.hideFakeInput()
+      this.showRealInput()
+      this.initTagify()
+    }
+  }
+
+  initTagify() {
+    this.tagify = new Tagify(this.inputTarget, this.tagifyOptions)
+  }
+
+  hideFakeInput() {
+    this.fakeInputTarget.classList.add('hidden')
+  }
+
+  showRealInput() {
+    this.inputTarget.classList.remove('hidden')
+  }
+}

data/app/javascript/js/controllers/fields/tags_field_helpers.js

@@ -0,0 +1,47 @@
+export function tagTemplate(tagData) {
+  const suggestions = this.settings.whitelist || []
+
+  const possibleSuggestion = suggestions.find(
+    // eslint-disable-next-line eqeqeq
+    (item) => item.value == tagData.value,
+  )
+  const possibleLabel = possibleSuggestion
+    ? possibleSuggestion.label
+    : tagData.value
+
+  return `
+<tag title="${tagData.value}"
+  contenteditable='false'
+  spellcheck='false'
+  tabIndex="-1"
+  class="tagify__tag ${tagData.class ? tagData.class : ''}"
+  ${this.getAttributes(tagData)}
+>
+  <x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>
+  <div>
+      <span class='tagify__tag-text'>${possibleLabel}</span>
+  </div>
+</tag>
+`
+}
+
+export function suggestionItemTemplate(tagData) {
+  return `
+<div ${this.getAttributes(tagData)}
+  class='tagify__dropdown__item flex items-center ${
+  tagData.class ? tagData.class : ''
+}'
+  tabindex="0"
+  role="option">
+  ${
+  tagData.avatar
+    ? `
+  <div class='rounded w-8 h-8 block mr-2'>
+      <img onerror="this.style.visibility='hidden'" class="w-full" src="${tagData.avatar}">
+  </div>`
+    : ''
+}
+  <span>${tagData.label}</span>
+</div>
+`
+}