maglevcms 3.0.0.beta2 → 3.0.0

data/app/assets/javascripts/maglev/editor/controllers/shared/submit_button_controller.js

@@ -1,25 +1,41 @@
 import { Controller } from "@hotwired/stimulus"
 import { sleep } from"maglev-controllers/utils"
+import TurboDelayedStreams from 'maglev-patches/turbo_delayed_streams'
 
 export default class extends Controller {
 
   initialize() {
     this._start = this.start.bind(this)
     this._end = this.end.bind(this)
+    this._cancel = this.cancel.bind(this)    
   }
 
   connect() {
+    this.canceled = false
     this.formElement = this.element.closest('form')
     this.formElement.addEventListener('turbo:submit-start', this._start)
     this.formElement.addEventListener('turbo:submit-end', this._end)
+    document.addEventListener("turbo:before-cache", this._cancel)
   }
 
   disconnect() {
+    this.canceled = true
+    this.requestId = null
     this.formElement.removeEventListener('turbo:submit-start', this._start)
-    this.formElement.removeEventListener('turbo:submit-end', this._end)
+    this.formElement.removeEventListener('turbo:submit-end', this._end)    
   }
 
-  start() {
+  cancel() {
+    this.canceled = true
+    this.element.disabled = false
+    this.formElement.classList.remove('is-pending', 'is-success', 'is-error')
+    this.formElement.classList.add('is-default')    
+  }
+
+  start(event) {
+    // the requestId is set by the turbo:before-fetch-request listener. We need it if there are delayed streams to render
+    this.requestId = event.detail.formSubmission.fetchRequest.fetchOptions.turboRequestId
+
     this.formElement.classList.add('is-pending')
     this.startedAt = Date.now()
   }
@@ -30,16 +46,24 @@ export default class extends Controller {
 
     // on an UX standpoint, we want to show the pending state for a short time to avoid flickering
     // if the submit (call to the server) took less than 800ms, we wait for 800ms to show the pending state
-    if (Date.now() - this.startedAt < 800) await sleep(800)
+    if (Date.now() - this.startedAt < 600) await sleep(600)
+
+    if (this.canceled) return
 
     this.formElement.classList.remove('is-pending')
-    this.formElement.classList.add(event.detail.success ? 'is-success' : 'is-error')      
+    this.formElement.classList.add(event.detail.success ? 'is-success' : 'is-error')
     
     // wait for 2 seconds and then remove the success or error class and add the default class
-    await sleep(1600)
+    await sleep(1400)
+
+    if (this.canceled) return
     
     this.formElement.classList.remove(event.detail.success ? 'is-success' : 'is-error')
     this.formElement.classList.add('is-default')
     this.element.disabled = false
+
+    // render the delayed turbo stream messages from the request
+    // use the requestId to identify the request and render the turbo stream messages
+    TurboDelayedStreams.render(this.requestId)
   }
 }

data/app/assets/javascripts/maglev/editor/controllers/utils.js

@@ -5,6 +5,44 @@ export const isSamePath = (targetPath) => {
   return current.pathname === target.pathname
 }
 
+const getParentEditorConfig = () => {
+  try {
+    return window.parent?.maglevEditorConfig
+  } catch (_) {
+    return undefined
+  }
+}
+
+const getEditorConfig = () => {
+  return window.maglevEditorConfig || getParentEditorConfig() || {}
+}
+
+export const isEditorJsLogsEnabled = () => {
+  return getEditorConfig().jsLogsEnabled === true
+}
+
+export const log = (...args) => {
+  if (isEditorJsLogsEnabled()) {
+    console.log(...args)
+  }
+}
+
 export const sleep = (ms) => {
   return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+function uuidv4() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, c => {
+    const r = Math.random() * 16 | 0
+    const v = c === "x" ? r : (r & 0x3 | 0x8)
+    return v.toString(16)
+  })
+}
+
+export function generateRequestId() {
+  // use the native randomUUID function if available (Browsers don't expose it for non-secure domains)
+  if (window.crypto?.randomUUID) {
+    return window.crypto.randomUUID()
+  }
+  return uuidv4()
 }

data/app/assets/javascripts/maglev/editor/index.js

@@ -1,8 +1,10 @@
 import "@hotwired/turbo-rails"
 import "maglev-controllers"
-import { PageRenderer, StreamActions } from '@hotwired/turbo'
+import "maglev-patches/page_renderer_patch"
+import "maglev-patches/turbo_stream_patch"
+import { log } from "maglev-controllers/utils"
 
-console.log('Maglev Editor v2 ⚡️')
+console.log('Maglev Editor v3 ⚡️')
 
 // We need to set the content locale in the headers for each Turbo request
 document.addEventListener("turbo:before-fetch-request", (event) => {
@@ -22,45 +24,4 @@ document.addEventListener("click", (event) => {
   if (current.pathname === target.pathname && current.search === target.search) {
     link.dataset.turboAction = "replace"
   }
-})
-
-// iFrames will always be reloaded even if we mark them as turbo-permanent. 
-// In the context of the Editor, the workaround is to replace the content of another DIV (#root) 
-// instead of the body and put the preview iframe as a sibling of the root DIV.
-PageRenderer.prototype.assignNewBody = function() {
-  const body = document.querySelector("#root")
-  const el   = this.newElement.querySelector("#root")
-
-  // replace all the data attributes of the BODY tag with the data attributes of the newElement
-  // This is because the BODY tag carries the current page id in one of the controller values
-  const bodyDataAttributes = document.body.dataset
-  const newElementDataAttributes = this.newElement.dataset
-  Object.keys(newElementDataAttributes).forEach(key => {
-    bodyDataAttributes[key] = newElementDataAttributes[key]
-  })
-
-  // now replace the "body" with the newElement
-  if (body && el) {
-    body.replaceWith(el)
-    return
-  } else if (document.body && this.newElement instanceof HTMLBodyElement) {
-    document.body.replaceWith(this.newElement)
-  } else {
-    document.documentElement.appendChild(this.newElement)
-  }
-}
-
-// Custom stream actions
- 
-StreamActions.console_log = function() {
-  const message = this.getAttribute("message")
-  console.log(message)
-}
-
-StreamActions.dispatch_event = function() {
-  const type = this.getAttribute("type")
-  const payload = this.getAttribute("payload")
-  console.log('dispatchEvent', type, payload, `dispatcher:${type}`)
-  const event = new CustomEvent(`dispatcher:${type}`, { detail: JSON.parse(payload) })
-  window.dispatchEvent(event)
-}
+})

data/app/assets/javascripts/maglev/editor/patches/page_renderer_patch.js

@@ -0,0 +1,47 @@
+import { PageRenderer } from '@hotwired/turbo'
+
+// iFrames will always be reloaded even if we mark them as turbo-permanent. 
+// In the context of the Editor, the workaround is to replace the content of another DIV (#root) 
+// instead of the body and put the preview iframe as a sibling of the root DIV.
+// assignNewBody is the right function to patch because it's called by both the PageRenderer and the SnapshotRenderer.
+
+// Inspirations: 
+// - https://github.com/hotwired/turbo/pull/711/files
+// - https://github.com/Challenge-Guy/turbo-cfm1/commit/2a3b0acfe0367f32c9d1635ff7c6fd7d87d2a2cd
+PageRenderer.prototype.assignNewBody = function() {
+  const body = document.querySelector("#root")
+  const el   = this.newElement.querySelector("#root")
+
+  // Only update sync elements during snapshot preview render
+  // those elements are permanent during the snapshot preview render and updated when we've got the new snapshot
+  if (this.isPreview) {
+    const syncElements = document.querySelectorAll('[data-turbo-sync]')
+    syncElements.forEach(element => {
+      const currentElement = document.querySelector(`#${element.id}`)
+      const newElement = this.newElement.querySelector(`#${element.id}`)
+      
+      if (currentElement && newElement) {
+        // sync the innerHTML of the newElement with the currentElement
+        newElement.innerHTML = currentElement.innerHTML
+      }
+    })    
+  }
+
+  // replace all the data attributes of the BODY tag with the data attributes of the newElement
+  // This is because the BODY tag carries the current page id in one of the controller values
+  const bodyDataAttributes = document.body.dataset
+  const newElementDataAttributes = this.newElement.dataset
+  Object.keys(newElementDataAttributes).forEach(key => {
+    bodyDataAttributes[key] = newElementDataAttributes[key]
+  })
+
+  // now replace the "body" with the newElement
+  if (body && el) {
+    body.replaceWith(el)
+    return
+  } else if (document.body && this.newElement instanceof HTMLBodyElement) {
+    document.body.replaceWith(this.newElement)
+  } else {
+    document.documentElement.appendChild(this.newElement)
+  }
+}

data/app/assets/javascripts/maglev/editor/patches/turbo_delayed_streams.js

@@ -0,0 +1,35 @@
+// Delayed Turbo streams are streams that are not rendered immediately, but are rendered later manually by the application
+// It's used by the SubmitButton controller for instance
+
+class TurboDelayedStream {
+  constructor(maxElements = 10) {
+    this.maxElements = maxElements
+    this.elements = new Map()
+  }
+
+  add(requestId, render) {
+    if (this.elements.has(requestId)) {
+      this.elements.get(requestId).push(render)
+    } else {
+      this.elements.set(requestId, [render])
+    }
+
+    if (this.elements.size > this.maxElements) {
+      this.elements.delete(this.elements.keys().next().value)
+    }
+  }
+
+  render(requestId) {
+    if (!this.elements.has(requestId)) return
+
+    const renderFns = this.elements.get(requestId)
+
+    // render all the turbo streams for this request
+    renderFns.forEach(render => render())
+    
+    // remove the element from the list
+    this.elements.delete(requestId)
+  }
+}
+
+export default new TurboDelayedStream()

data/app/assets/javascripts/maglev/editor/patches/turbo_stream_patch.js

@@ -0,0 +1,50 @@
+
+import { StreamActions } from '@hotwired/turbo'
+import TurboDelayedStreams from 'maglev-patches/turbo_delayed_streams'
+import { generateRequestId, log } from 'maglev-controllers/utils'
+
+// Custom stream actions
+StreamActions.console_log = function() {
+  const message = this.getAttribute("message")
+  log(message)
+}
+
+StreamActions.dispatch_event = function() {
+  const type = this.getAttribute("type")
+  const payload = this.getAttribute("payload")
+  log('dispatchEvent', type, payload, `dispatcher:${type}`)
+  const event = new CustomEvent(`dispatcher:${type}`, { detail: JSON.parse(payload) })
+  window.dispatchEvent(event)
+}
+
+// Handle delayed streams through Turbo events
+
+document.addEventListener("turbo:before-stream-render", (event) => {
+  const delayedStream = (
+    event.detail.newStream.templateContent.querySelector('meta[name="turbo-delayed-stream"]')?.content ?? event.detail.newStream.getAttribute('delayed')
+  ) === 'true'
+  const requestId = (
+    event.detail.newStream.templateContent.querySelector('meta[name="turbo-request-id"]')?.content ?? event.detail.newStream.getAttribute('request-id')
+  )?.split(',')?.[0]
+
+  if (delayedStream) {
+    // Keep the stream in the queue to be rendered later
+    TurboDelayedStreams.add(requestId, () => {
+      // console.log('rendering delayed stream', requestId, event.detail.newStream)
+      event.detail.render(event.detail.newStream)
+    })
+          
+    // Cancel Turbo's rendering for this stream
+    event.preventDefault()
+  }    
+})
+
+document.addEventListener('turbo:before-fetch-request', (event) => {
+  const requestId = generateRequestId()
+
+  // Attach to headers (for server → client stream correlation)
+  event.detail.fetchOptions.headers["X-Turbo-Request-ID"] = requestId
+
+  // Attach to the fetchRequest instance
+  event.detail.fetchOptions.turboRequestId = requestId
+})

data/app/assets/stylesheets/maglev/application.css

@@ -10,8 +10,6 @@
  * files in this directory. Styles in this file should be added after the last require_* statement.
  * It is generally better to create a new file per style scope.
  *
- *= require_tree .
- *= require_self
  */
 
 @keyframes slide-out {

data/app/assets/stylesheets/maglev/tailwind.css.erb

@@ -8,7 +8,13 @@
   --color-editor-primary: var(--editor-color-primary);
 }
 
-@source "../../../";  
+/* Empty-state overlay in #root: visible when the preview Stimulus shell has .is-empty */
+@custom-variant editor-preview-empty (body:has([data-controller~="editor-page-preview"].is-empty) &);
+
+@source "<%= Maglev::Engine.root.join('app') %>";
+@source "<%= Maglev::Engine.root.join('lib') %>";
+@source "<%= Maglev::Engine.root.join('spec/components/previews/maglev/uikit') %>";
+
 <% Maglev.config.tailwindcss_folders.each do |folder| %>
 @source "<%= folder %>";
 <% end %>
@@ -26,6 +32,10 @@
 }
 
 @layer base {
+  .turbo-progress-bar {
+    background-color: var(--editor-color-primary) !important;
+  }
+
   /* Tiptap / ProseMirror */
   .ProseMirror {
     @apply block py-2 px-3 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50 placeholder-gray-500;
@@ -141,7 +151,6 @@
       td,
       th {
         min-width: 1em;
-        // border: 2px solid $color-grey;
         @apply border-2;
         @apply border-solid;
         padding: 3px 5px;

data/app/components/maglev/content/link.rb

@@ -4,7 +4,7 @@ module Maglev
   module Content
     class Link < Base
       def href
-        link[:href]
+        link[:href] || '#'
       end
 
       def text

data/app/components/maglev/editor/settings/link/link_component.rb

@@ -6,12 +6,18 @@ module Maglev
       module Link
         class LinkComponent < Maglev::Editor::Settings::BaseComponent
           def edit_link_path
-            fetch_path(:edit_link_path, { value: value, input_name: input_name })
+            fetch_path(:edit_link_path, { value: value || default_value, input_name: input_name })
           end
 
           def after_initialize
             @value = value&.with_indifferent_access
           end
+
+          private
+
+          def default_value
+            { link_type: 'url' }
+          end
         end
       end
     end

data/app/components/maglev/section_component.rb

@@ -1,5 +1,10 @@
 # frozen_string_literal: true
 
+# NOTE: this class is too long (but not too complex),
+# we need to move it along with the PageComponent and BlockComponent
+# to a separate folder (content?)
+
+# rubocop:disable Metrics/ClassLength
 module Maglev
   class SectionComponent < BaseComponent
     include TagHelper
@@ -31,7 +36,7 @@ module Maglev
     end
 
     def lock_version
-      @lock_version ||= attributes[:lock_version] || '0'
+      @lock_version ||= lock_source&.lock_version || '0'
     end
 
     def dom_data
@@ -63,6 +68,10 @@ module Maglev
 
     private
 
+    def lock_source
+      definition&.site_scoped? ? site : page
+    end
+
     def build_block_list
       build_blocks(attributes[:blocks])
     end
@@ -131,3 +140,4 @@ module Maglev
     end
   end
 end
+# rubocop:enable Metrics/ClassLength

data/app/components/maglev/uikit/app_layout/sidebar/link_component.html.erb

@@ -1,5 +1,5 @@
 <li>
-  <%= link_to path, class: link_classes(active: active?), data: data do %>
+  <%= link_to path, link_html_options do %>
     <%= render Maglev::Uikit::IconComponent.new(name: icon, size: icon_size) %>
   <% end %>
 </li>

data/app/components/maglev/uikit/app_layout/sidebar/link_component.rb

@@ -5,12 +5,24 @@ module Maglev
     module AppLayout
       module Sidebar
         class LinkComponent < Maglev::Uikit::BaseComponent
-          attr_reader :path, :icon, :icon_size, :active, :data
+          LINK_BASE_CLASSES = [
+            'relative flex w-full min-h-11 items-center justify-center rounded py-3',
+            'outline-none transition-colors duration-200',
+            'focus-visible:ring-2 focus-visible:ring-editor-primary/50',
+            'focus-visible:ring-offset-2 focus-visible:ring-offset-white'
+          ].join(' ')
 
-          def initialize(path:, icon:, active: false, options: {})
+          LINK_ACTIVE_CLASSES = 'bg-gray-100 text-editor-primary hover:bg-gray-100'
+
+          LINK_INACTIVE_CLASSES = 'text-black hover:bg-gray-100'
+
+          attr_reader :path, :icon, :icon_size, :active, :data, :label
+
+          def initialize(path:, icon:, active: false, label: nil, options: {})
             @path = path
             @active = active
             @icon = icon
+            @label = label
             @icon_size = options[:icon_size] || '1.5rem'
             @position = options[:position] || :top
             @data = options[:data]
@@ -24,15 +36,33 @@ module Maglev
             @position == :top
           end
 
+          def link_html_options
+            {
+              class: link_classes(active: active?),
+              data: data,
+              title: label.presence,
+              aria: link_aria_attributes
+            }.compact
+          end
+
           def link_classes(...)
             class_variants(
-              base: 'flex justify-center py-5 -ml-4 -mr-4 hover:bg-gray-100 transition-colors duration-200',
+              base: LINK_BASE_CLASSES,
               variants: {
-                active: 'bg-gray-100',
-                '!active': 'bg-white'
+                active: LINK_ACTIVE_CLASSES,
+                '!active': LINK_INACTIVE_CLASSES
               }
             ).render(...)
           end
+
+          private
+
+          def link_aria_attributes
+            aria = {}
+            aria[:label] = label.presence
+            aria[:current] = 'page' if active?
+            aria.compact.presence
+          end
         end
       end
     end

data/app/components/maglev/uikit/app_layout/sidebar_component.html.erb

@@ -2,15 +2,14 @@
   id="app-layout-sidebar"
   class="w-16 flex-shrink-0 flex content-center h-full border-r border-gray-200 relative z-20 bg-white"
 >
-  <nav class="w-16 flex flex-col justify-between">
-    <ol class="divide-y divide-gray-300 px-4">
+  <nav class="flex h-full w-16 flex-col justify-between py-2">
+    <ol class="flex flex-col gap-1 px-2">
       <% links.each do |link| %>
         <%= link if link.top? %>
       <% end %>      
     </ol>
 
-    <ol class="divide-y divide-gray-300 px-4">
-      <li></li>
+    <ol class="flex flex-col gap-1 px-2">
       <% links.each do |link| %>
         <%= link unless link.top? %>
       <% end %>      

data/app/components/maglev/uikit/app_layout/topbar/logo_component.html.erb

@@ -1,3 +1,3 @@
-<%= link_to root_path, class: "w-16 h-full flex justify-center items-center border-r border-gray-200 shrink-0" do %>
+<%= link_to root_path, class: "w-16 h-full flex justify-center items-center border-r border-gray-200 shrink-0", data: { controller: 'prevent-same-path' } do %>
   <%= image_tag logo_url, class: "w-2/4", id: 'editor-logo-image', data: { turbo_permanent: true } %>
 <% end %>

data/app/components/maglev/uikit/app_layout/topbar/page_info_component.html.erb

@@ -4,7 +4,7 @@
   <div class="flex flex-row items-center h-full w-full px-4 overflow-hidden">
     <div class="flex flex-col leading-none overflow-hidden">
       <div class="flex items-center">
-        <%= render Maglev::Uikit::IconComponent.new(name: icon_name, size: '1.1rem', class_names: 'shrink-0 text-gray-900') %>
+        <%= helpers.maglev_page_icon(page, size: '1.1rem', wrapper_class_names: 'text-gray-900') %>
         <div class="text-base font-semibold truncate ml-1 mr-3">
           <%= page.title.presence || page.default_title %>
         </div>

data/app/components/maglev/uikit/app_layout/topbar_component.html.erb

@@ -9,7 +9,7 @@
     <%= render Maglev::Uikit::DeviceTogglerComponent.new %>
   </div>
 
-  <div class="col-span-2 flex justify-end h-full">
+  <div class="col-span-2 flex justify-end h-full items-center">
     <%= actions %>
   </div>
 </div>

data/app/components/maglev/uikit/app_layout/topbar_component.rb

@@ -5,7 +5,7 @@ module Maglev
     module AppLayout
       class TopbarComponent < ViewComponent::Base
         renders_one :logo, 'Maglev::Uikit::AppLayout::Topbar::LogoComponent'
-        # -> { Maglev::Uikit::AppLayout::Topbar::LogoComponent.new(root_path: root_path, logo_url: logo_url) }
+
         renders_one :page_info
         renders_one :actions
 

data/app/components/maglev/uikit/button_group_component/button_group_component.html.erb

@@ -0,0 +1,5 @@
+<div class="[&>*:first-child]:rounded-l-sm [&>*:last-child]:rounded-r-sm inline-flex items-center text-white divide-x divide-white/15">
+  <% buttons.each do |button| %>
+    <%= button %>    
+  <% end %>
+</div>

data/app/components/maglev/uikit/button_group_component.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    class ButtonGroupComponent < Maglev::Uikit::BaseComponent
+      renders_many :buttons
+
+      attr_reader :color, :size
+
+      def initialize(color: nil, size: nil)
+        @color = color || :primary
+        @size = size || :medium
+      end
+
+      # rubocop:disable Metrics/MethodLength
+      def button_classes
+        class_variants(
+          base: %(
+            inline-flex items-center justify-center cursor-pointer
+            group-[.is-success]/form:bg-green-500/95 group-[.is-success]/form:hover:bg-green-500/100
+            group-[.is-success]/form:disabled:bg-green-500/75
+            group-[.is-error]/form:bg-red-500/95 group-[.is-error]/form:hover:bg-red-500/100
+            group-[.is-error]/form:disabled:bg-red-500/75
+          ),
+          variants: {
+            size: {
+              medium: 'inline-flex items-center justify-center px-4 h-10'
+            },
+            color: {
+              primary: 'text-white bg-editor-primary hover:bg-editor-primary/90 disabled:bg-editor-primary/75',
+              secondary: 'text-gray-800 hover:bg-gray-100'
+            }
+          }
+        ).render(color: color, size: size)
+      end
+      # rubocop:enable Metrics/MethodLength
+
+      # rubocop:disable Metrics/MethodLength
+      def wrapper_classes(**args)
+        class_variants(
+          base: %(
+            inline-flex items-center transition-colors duration-200 h-full
+            [.is-success]:bg-green-500/95 [.is-success]:hover:bg-green-500/100
+            [.is-success]:disabled:bg-green-500/75
+            [.is-error]:bg-red-500/95 [.is-error]:hover:bg-red-500/100
+            [.is-error]:disabled:bg-red-500/75
+          ),
+          variants: {
+            color: {
+              primary: 'text-white bg-editor-primary hover:bg-editor-primary/90 has-[:disabled]:bg-editor-primary/75',
+              secondary: 'text-gray-800 hover:bg-gray-100'
+            }
+          }
+        ).render(color: color, **args)
+      end
+      # rubocop:enable Metrics/MethodLength
+
+      def wrapped_button_classes(**args)
+        class_variants(
+          base: 'cursor-pointer',
+          variants: {
+            size: {
+              medium: 'inline-flex items-center justify-center px-4 h-10'
+            }
+          }
+        ).render(size: size, **args)
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/device_toggler_component.rb

@@ -5,13 +5,22 @@ module Maglev
     class DeviceTogglerComponent < Maglev::Uikit::BaseComponent
       def toggler_classes(...)
         class_variants(
-          base: 'cursor-pointer hover:bg-gray-100 h-10 w-10 flex items-center justify-center',
+          base: base_classes,
           variants: {
             active: active_classes
           }
         ).render(...)
       end
 
+      def base_classes
+        [
+          'cursor-pointer hover:bg-gray-100 h-10 w-10 flex items-center justify-center rounded',
+          'outline-none transition-colors duration-200',
+          'focus-visible:ring-2 focus-visible:ring-editor-primary/50',
+          'focus-visible:ring-offset-2 focus-visible:ring-offset-white'
+        ].join(' ').freeze
+      end
+
       def active_classes
         'bg-gray-100'
       end

data/app/components/maglev/uikit/dropdown_component/dropdown_component.html.erb

@@ -1,5 +1,5 @@
 <%= tag.div(
-  class: 'relative',
+  class: wrapper_classes,
   data: {
     controller: 'uikit-dropdown',
     'uikit-dropdown-placement-value': placement
@@ -8,7 +8,7 @@
   <%= trigger %>
 
   <div 
-    class="hidden z-50 opacity-0 scale-95 shadow-lg rounded p-1 text-sm bg-white w-max fixed" 
+    class="hidden z-50 opacity-0 scale-95 shadow-lg rounded text-sm bg-white w-max fixed" 
     data-aria-orientation="vertical"
     data-aria-labelledby="dropdown-button"
     data-uikit-dropdown-target="content"