avo 3.30.4 → 4.0.0.beta.2

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

@@ -17,7 +17,7 @@ export function tagTemplate(tagData) {
   class="tagify__tag ${tagData.class ? tagData.class : ''}"
   ${this.getAttributes(tagData)}
 >
-  <x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>
+  <x title='' class=' tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>
   <div>
       <span class='tagify__tag-text'>${possibleLabel}</span>
   </div>
@@ -28,15 +28,13 @@ export function tagTemplate(tagData) {
 export function suggestionItemTemplate(tagData) {
   return `
 <div ${this.getAttributes(tagData)}
-  class='tagify__dropdown__item flex items-center ${
-  tagData.class ? tagData.class : ''
+  class='tagify__dropdown__item dropdown-menu__item ${tagData.class ? tagData.class : ''
 }'
   tabindex="0"
   role="option">
-  ${
-  tagData.avatar
+  ${tagData.avatar
     ? `
-  <div class='rounded w-8 h-8 block mr-2'>
+  <div class='rounded-sm w-8 h-8 block me-2'>
       <img onerror="this.style.visibility='hidden'" class="w-full" src="${tagData.avatar}">
   </div>`
     : ''

data/app/javascript/js/controllers/grid_cover_empty_state_controller.js

@@ -0,0 +1,42 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Connects to data-controller="grid-cover-empty-state"
+export default class extends Controller {
+  static targets = ['icon']
+
+  mousemove(event) {
+    const maxDist = 90
+    const maxPush = 30
+    const cursorX = event.clientX
+    const cursorY = event.clientY
+
+    this.iconTargets.forEach((icon) => {
+      const r = icon.getBoundingClientRect()
+      const cx = r.left + r.width / 2
+      const cy = r.top + r.height / 2
+      const dx = cx - cursorX
+      const dy = cy - cursorY
+      const dist = Math.sqrt(dx * dx + dy * dy)
+
+      if (dist < maxDist && dist > 0) {
+        const scale = parseFloat(icon.dataset.repulsionScale ?? 1)
+        const force = (1 - dist / maxDist) * maxPush * scale
+        icon.style.setProperty('--tx', `${(dx / dist) * force}px`)
+        icon.style.setProperty('--ty', `${(dy / dist) * force}px`)
+        icon.classList.add('grid-card__icon--repelling')
+      } else {
+        icon.style.setProperty('--tx', '0px')
+        icon.style.setProperty('--ty', '0px')
+        icon.classList.remove('grid-card__icon--repelling')
+      }
+    })
+  }
+
+  mouseleave() {
+    this.iconTargets.forEach((icon) => {
+      icon.style.setProperty('--tx', '0px')
+      icon.style.setProperty('--ty', '0px')
+      icon.classList.remove('grid-card__icon--repelling')
+    })
+  }
+}

data/app/javascript/js/controllers/item_selector_controller.js

@@ -78,7 +78,6 @@ export default class extends Controller {
       // Enable only if is on the same resource context
       // Avoiding to enable unrelated actions when selecting items on a has many table
       if (link.dataset.resourceName === this.resourceName) {
-        link.classList.add(link.dataset.enabledClasses)
         link.classList.remove(link.dataset.disabledClasses)
         link.setAttribute('data-href', link.getAttribute('href'))
         link.dataset.disabled = false
@@ -91,7 +90,6 @@ export default class extends Controller {
       // Disable only if is on the same resource context
       // Avoiding to disable unrelated actions when selecting items on a has many table
       if (link.dataset.resourceName === this.resourceName) {
-        link.classList.remove(link.dataset.enabledClasses)
         link.classList.add(link.dataset.disabledClasses)
         link.setAttribute('href', link.getAttribute('data-href'))
         link.dataset.disabled = true

data/app/javascript/js/controllers/loading_button_controller.js

@@ -2,11 +2,7 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-  spinnerMarkup = `
-    <div class="button-spinner">
-      <div class="double-bounce1"></div>
-      <div class="double-bounce2"></div>
-    </div>`
+  spinnerMarkup = '<span class="loading-spinner" aria-hidden="true"></span>'
 
   static values = {
     confirmationMessage: String,

data/app/javascript/js/controllers/map_dark_mode_controller.js

@@ -0,0 +1,131 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  connect() {
+    this.observer = new MutationObserver(() => this.updateMapStyle())
+    this.observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    })
+
+    this.waitForMap().then(() => this.updateMapStyle())
+  }
+
+  disconnect() {
+    if (this.observer) {
+      this.observer.disconnect()
+    }
+  }
+
+  waitForMap() {
+    return new Promise((resolve) => {
+      const check = () => {
+        if (this.mapkickInstance?.map) {
+          resolve()
+        } else {
+          requestAnimationFrame(check)
+        }
+      }
+      check()
+    })
+  }
+
+  get mapkickInstance() {
+    const mapDiv = this.element.querySelector('[id^="map-"]') || this.element.querySelector('[id]')
+    if (!mapDiv?.id) return null
+
+    return window.Mapkick?.maps?.[mapDiv.id]
+  }
+
+  get isDark() {
+    return document.documentElement.classList.contains('dark')
+  }
+
+  updateMapStyle() {
+    const instance = this.mapkickInstance
+    if (!instance?.map) return
+
+    const map = instance.map
+    const style = map.getStyle()
+    if (!style) return
+
+    const targetStyle = this.isDark
+      ? 'mapbox://styles/mapbox/dark-v11'
+      : 'mapbox://styles/mapbox/light-v11'
+
+    // Detect current style from the sprite URL or stylesheet name
+    const styleName = style.name || style.sprite || ''
+    const currentIsDark = /dark/i.test(styleName)
+    if (this.isDark === currentIsDark) return
+
+    // Save custom sources and layers added by Mapkick before the style swap
+    const snapshot = this.captureMapkickState(map)
+
+    map.setStyle(targetStyle)
+
+    // Restore sources, layers, and marker images after the new style loads
+    map.once('style.load', () => {
+      this.restoreMapkickState(map, snapshot)
+    })
+  }
+
+  captureMapkickState(map) {
+    const style = map.getStyle()
+    const sources = {}
+    const layers = []
+    const images = []
+
+    // Capture Mapkick's custom sources (e.g. "objects", "trails", labels)
+    for (const [name, source] of Object.entries(style.sources)) {
+      // Skip Mapbox's built-in sources (composite, mapbox-)
+      if (name === 'composite' || name.startsWith('mapbox')) continue
+
+      sources[name] = {
+        type: source.type,
+        data: source.data,
+      }
+    }
+
+    // Capture layers that reference our custom sources
+    for (const layer of style.layers) {
+      if (layer.source && sources[layer.source]) {
+        layers.push(layer)
+      }
+    }
+
+    // Capture marker images (mapkick-{id}-15 pattern)
+    for (const id of Object.keys(map.style?.imageManager?.images || {})) {
+      if (id.startsWith('mapkick-')) {
+        const image = map.style.imageManager.images[id]
+        if (image) {
+          images.push({ id, data: image.data, pixelRatio: image.pixelRatio || 1 })
+        }
+      }
+    }
+
+    return { sources, layers, images }
+  }
+
+  restoreMapkickState(map, snapshot) {
+    // Re-add marker images
+    for (const img of snapshot.images) {
+      if (!map.hasImage(img.id)) {
+        map.addImage(img.id, img.data, { pixelRatio: img.pixelRatio })
+      }
+    }
+
+    // Re-add sources
+    for (const [name, config] of Object.entries(snapshot.sources)) {
+      if (!map.getSource(name)) {
+        map.addSource(name, config)
+      }
+    }
+
+    // Re-add layers in original order
+    for (const layer of snapshot.layers) {
+      if (!map.getLayer(layer.id)) {
+        map.addLayer(layer)
+      }
+    }
+  }
+}

data/app/javascript/js/controllers/menu_controller.js

@@ -1,11 +1,12 @@
 import { Controller } from '@hotwired/stimulus'
-import { enter, leave } from 'el-transition'
 
 export default class extends Controller {
-  static targets = ['svg', 'items', 'self']
+  static targets = ['svg', 'items', 'self', 'trigger']
 
   collapsed = true
 
+  transitionClass = 'css-animate-slide-down'
+
   get key() {
     return this.selfTarget.getAttribute('data-menu-key-param')
   }
@@ -49,27 +50,48 @@ export default class extends Controller {
 
   updateDom() {
     if (this.collapsed) {
-      this.markCollapsed(true)
+      this.markCollapsed()
     } else {
-      this.markExpanded(true)
+      this.markExpanded()
     }
   }
 
-  markCollapsed(animate = false) {
+  markCollapsed() {
     this.svgTarget.classList.add('rotate-90')
-    if (animate) {
-      leave(this.itemsTarget)
-    } else {
-      this.itemsTarget.classList.add('hidden')
-    }
+    if (this.hasTriggerTarget) this.triggerTarget.setAttribute('aria-expanded', 'false')
+    this.leave(this.itemsTarget)
   }
 
-  markExpanded(animate = false) {
+  markExpanded() {
     this.svgTarget.classList.remove('rotate-90')
-    if (animate) {
-      enter(this.itemsTarget)
-    } else {
-      this.itemsTarget.classList.remove('hidden')
-    }
+    if (this.hasTriggerTarget) this.triggerTarget.setAttribute('aria-expanded', 'true')
+    this.enter(this.itemsTarget)
+  }
+
+  async toggle(element) {
+    element.toggleAttribute('hidden')
+    await this.animateTransition(element)
+  }
+
+  async leave(element) {
+    element.setAttribute('hidden', true)
+    await this.animateTransition(element)
+  }
+
+  async enter(element) {
+    element.removeAttribute('hidden')
+    await this.animateTransition(element)
+  }
+
+  async animateTransition(element) {
+    element.classList.add(this.transitionClass)
+    await this.onTransitionsEnded(element)
+    element.classList.remove(this.transitionClass)
+  }
+
+  onTransitionsEnded(node) {
+    return Promise.allSettled(
+      node.getAnimations().map((animation) => animation.finished),
+    )
   }
 }

data/app/javascript/js/controllers/modal_controller.js

@@ -8,6 +8,22 @@ export default class extends Controller {
     closeModalOnBackdropClick: true,
   }
 
+  connect() {
+    document.body.classList.add('modal-open')
+    this.handleKeydown = this.handleKeydown.bind(this)
+    document.addEventListener('keydown', this.handleKeydown)
+  }
+
+  disconnect() {
+    document.removeEventListener('keydown', this.handleKeydown)
+  }
+
+  handleKeydown(event) {
+    if (event.key === 'Escape' && this.closeModalOnBackdropClickValue) {
+      this.closeModal()
+    }
+  }
+
   close(event) {
     if (event.target === this.backdropTarget && !this.closeModalOnBackdropClickValue) return
 

data/app/javascript/js/controllers/modal_size_controller.js

@@ -0,0 +1,83 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Connects to data-controller="modal-size"
+export default class extends Controller {
+  static targets = ['container']
+
+  static values = {
+    currentWidth: String,
+    currentHeight: String,
+  }
+
+  connect() {
+    this.modalElement = this.element
+    this.updateWidthClass(this.currentWidthValue)
+    this.updateHeightClass(this.currentHeightValue)
+  }
+
+  changeWidth(event) {
+    const newWidth = event.currentTarget.dataset.width
+    this.updateWidthClass(newWidth)
+    this.currentWidthValue = newWidth
+  }
+
+  changeHeight(event) {
+    const newHeight = event.currentTarget.dataset.height
+    this.updateHeightClass(newHeight)
+    this.currentHeightValue = newHeight
+  }
+
+  updateWidthClass(width) {
+    // Remove all modal width classes from the modal element
+    this.modalElement.classList.remove(
+      'modal--width-sm',
+      'modal--width-md',
+      'modal--width-lg',
+      'modal--width-xl',
+      'modal--width-2xl',
+      'modal--width-3xl',
+      'modal--width-4xl',
+      'modal--width-full',
+      'modal--width-25',
+      'modal--width-50',
+      'modal--width-75',
+      'modal--width-100',
+    )
+
+    // Remove all width classes from the container
+    this.containerTarget.classList.remove('w-sm', 'w-md', 'w-lg', 'w-xl', 'w-2xl', 'w-3xl', 'w-4xl', 'w-full')
+
+    // Add the new modal width class to the modal element
+    this.modalElement.classList.add(`modal--width-${width}`)
+
+    // Add the corresponding width class to the container
+    if (width === 'full') {
+      this.containerTarget.classList.add('w-full')
+    } else {
+      this.containerTarget.classList.add(`w-${width}`)
+    }
+  }
+
+  updateHeightClass(height) {
+    // Remove all modal height classes from the modal element
+    this.modalElement.classList.remove(
+      'modal--height-auto',
+      'modal--height-sm',
+      'modal--height-md',
+      'modal--height-lg',
+      'modal--height-xl',
+      'modal--height-2xl',
+      'modal--height-3xl',
+      'modal--height-4xl',
+      'modal--height-full',
+      'modal--height-25',
+      'modal--height-50',
+      'modal--height-75',
+      'modal--height-100',
+    )
+
+    // Add the new modal height class to the modal element
+    // The CSS will handle applying the appropriate height to .modal__card
+    this.modalElement.classList.add(`modal--height-${height}`)
+  }
+}

data/app/javascript/js/controllers/nested_form_controller.js

@@ -22,7 +22,7 @@ export default class extends NestedForm {
   }
 
   remove(event) {
-    if (confirm(this.confirmMessageValue)) {
+    if (window.confirm(this.confirmMessageValue)) {
       super.remove(event)
       this.toggleAddButton()
     }
@@ -30,7 +30,7 @@ export default class extends NestedForm {
 
   toggleAddButton() {
     if (this.limitValue > 0) {
-      this.addButtonTarget.classList.toggle('hidden', this.nestedRecordTargets.length >= this.limitValue)
+      this.addButtonTarget.classList.toggle('!hidden', this.nestedRecordTargets.length >= this.limitValue)
     }
   }
 }

data/app/javascript/js/controllers/password_visibility_controller.js

@@ -0,0 +1,13 @@
+import PasswordVisibility from '@stimulus-components/password-visibility'
+
+export default class extends PasswordVisibility {
+  toggle(event) {
+    // Check if the input is disabled before allowing toggle
+    if (this.inputTarget.disabled) {
+      return
+    }
+
+    // Call the parent toggle method if input is not disabled
+    super.toggle(event)
+  }
+}

data/app/javascript/js/controllers/preview_controller.js

@@ -7,12 +7,12 @@ export default class extends Controller {
   }
 
   connect() {
-    const vm = this;
+    const vm = this
 
     this.tippyInstance = tippy(vm.context.element, {
       content: "loading...",
       allowHTML: true,
-      theme: 'light',
+      theme: 'basic',
       maxWidth: 550,
       async onShow(instance) {
         const response = await fetch(vm.urlValue)

data/app/javascript/js/controllers/resource_search_controller.js

@@ -0,0 +1,123 @@
+import { Controller } from '@hotwired/stimulus'
+import { get } from '@rails/request.js'
+
+export default class extends Controller {
+  static targets = ['input', 'overlay']
+
+  static values = {
+    debounce: { type: Number, default: 300 },
+    url: String,
+  }
+
+  connect() {
+    this.#clearSpinnerTimer()
+    this.#removeSpinner()
+  }
+
+  disconnect() {
+    this.#clearSpinnerTimer()
+    this.#removeSpinner()
+  }
+
+  search() {
+    this.debouncedSearch()
+  }
+
+  debouncedSearch = this.debounce(this.performSearch, this.debounceValue)
+
+  async performSearch() {
+    const query = this.inputTarget.value
+
+    const [pathName, queryString] = this.urlValue.split('?')
+    const newUrl = this.buildSearchUrl(pathName, queryString, query)
+
+    // Replace current URL without affecting browser history
+    if (!queryString || !queryString.includes('turbo_frame')) {
+      window.history.replaceState({}, '', newUrl)
+    }
+
+    try {
+      // Show a spinner if the request takes longer than 300ms (after debounce)
+      this.#startSpinnerTimer()
+
+      await get(newUrl, {
+        responseKind: 'turbo-stream',
+        headers: {
+          Accept: 'text/vnd.turbo-stream.html',
+          'X-Search-Request': 'resource-search-controller',
+        },
+      })
+    } catch (error) {
+      // Silently fail; network errors are surfaced via Turbo stream failures
+    } finally {
+      this.#stopSpinner()
+    }
+  }
+
+  // Utility function to build search URL with query and pagination reset
+  buildSearchUrl(pathname, currentSearch, query) {
+    const searchParams = new URLSearchParams(currentSearch)
+
+    if (query) {
+      searchParams.set('q', query)
+    } else {
+      searchParams.delete('q')
+    }
+
+    searchParams.set('page', '1')
+
+    return `${pathname}?${searchParams.toString()}`
+  }
+
+  debounce(func, wait) {
+    let timeout
+
+    return function executedFunction(...args) {
+      const later = () => {
+        clearTimeout(timeout)
+        func.apply(this, args)
+      }
+      clearTimeout(timeout)
+      timeout = setTimeout(later, wait)
+    }
+  }
+
+  // Private
+
+  #spinnerTimer = null
+
+  #spinnerEl = null
+
+  #spinnerDelayMs = 500
+
+  #startSpinnerTimer() {
+    this.#clearSpinnerTimer()
+    this.#spinnerTimer = setTimeout(() => this.#showSpinner(), this.#spinnerDelayMs)
+  }
+
+  #clearSpinnerTimer() {
+    if (this.#spinnerTimer) {
+      clearTimeout(this.#spinnerTimer)
+      this.#spinnerTimer = null
+    }
+  }
+
+  #showSpinner() {
+    // Add a body class to signal loading (used by tests/possible styles)
+    document.body.classList.add('search-loading')
+
+    this.overlayTarget.classList.add('is-active')
+    this.#spinnerEl = this.overlayTarget
+  }
+
+  #removeSpinner() {
+    document.body.classList.remove('search-loading')
+    if (this.#spinnerEl) this.#spinnerEl.classList.remove('is-active')
+    this.#spinnerEl = null
+  }
+
+  #stopSpinner() {
+    this.#clearSpinnerTimer()
+    this.#removeSpinner()
+  }
+}

data/app/javascript/js/controllers/search_controller.js

@@ -1,5 +1,9 @@
+// Only used for searchable fields
+
+// This controller is currently only used for searchable fields, it keeps the old search controller without any changes
+// Possibly have much more logic that it uses, but it's not worth the effort to refactor it since we're going to replace it with a new searchable fields way
+
 /* eslint-disable no-underscore-dangle */
-import * as Mousetrap from 'mousetrap'
 import { Controller } from '@hotwired/stimulus'
 import { Turbo } from '@hotwired/turbo-rails'
 import { autocomplete } from '@algolia/autocomplete-js'
@@ -9,9 +13,8 @@ import debouncePromise from '../helpers/debounce_promise'
 
 /**
  * The search controller is used in three places.
- * 1. Global search (on the top navbar) and can search through multiple resources.
- * 2. Resource search (on the Index page on top of the table panel) and will search one resource
- * 3. belongs_to field. This requires a bit more cleanup because the user will not navigate away from the page.
+ * 1. Resource search (on the Index page on top of the table panel) and will search one resource
+ * 2. belongs_to field. This requires a bit more cleanup because the user will not navigate away from the page.
  * It will replace the id and label in some fields on the page and also needs a "clear" button which clears the information so the user can submit the form without a value.
  */
 export default class extends Controller {
@@ -59,11 +62,8 @@ export default class extends Controller {
     return this.dataset.viaAssociation === 'has_many'
   }
 
-  get isGlobalSearch() {
-    return this.dataset.searchResource === 'global'
-  }
-
   connect() {
+    console.log('search controller connected')
     const that = this
 
     this.buttonTarget.onclick = () => this.showSearchPanel()
@@ -74,16 +74,6 @@ export default class extends Controller {
       }
     })
 
-    if (this.isGlobalSearch) {
-      Mousetrap.bind(['command+k', 'ctrl+k'], (e) => {
-        // Prevent browser from focusing the address bar
-        e.preventDefault()
-        e.stopPropagation()
-        this.showSearchPanel()
-        return false
-      })
-    }
-
     // This line fixes a bug where the search box would be duplicated on back navigation.
     this.autocompleteTarget.innerHTML = ''
 
@@ -162,7 +152,7 @@ export default class extends Controller {
                 classes = 'rounded-full'
                 break
               case 'rounded':
-                classes = 'rounded'
+                classes = 'rounded-sm'
                 break
               case 'square':
                 classes = 'rounded-none'
@@ -173,7 +163,7 @@ export default class extends Controller {
               createElement('img', {
                 src: item._avatar,
                 alt: item._label,
-                class: `flex-shrink-0 w-8 h-8 my-[2px] inline mr-2 ${classes}`,
+                class: `shrink-0 w-8 h-8 my-[2px] inline me-2 ${classes}`,
               }),
             )
           }
@@ -256,10 +246,6 @@ export default class extends Controller {
       'search',
     ]
 
-    if (this.isGlobalSearch) {
-      segments = ['avo_api', 'search']
-    }
-
     return segments
   }
 
@@ -267,14 +253,9 @@ export default class extends Controller {
     let params = {
       ...Object.fromEntries(new URLSearchParams(window.location.search)),
       q: query,
-      global: false,
       ...this.extraParamsValue,
     }
 
-    if (this.isGlobalSearch) {
-      params.global = true
-    }
-
     if (this.isBelongsToSearch || this.isHasManySearch) {
       params = this.addAssociationParams(params)
       params = this.addReflectionParams(params)