lato 3.8.1 → 3.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d798ee21a2e9f1ebb6667f39ce4de775fa45ab1e4f31769dadf7699ed3bc902c
-  data.tar.gz: 60876444bb2a4c459913b529c333b1053890c9289875b58ac9167a8909c5c821
+  metadata.gz: 4c10619ad47c6b8d2300673db8875efccd74a6b31c0f831384590b137e679329
+  data.tar.gz: 99551763a78949b665938487a5be4ac0dec5c873b23788838574aa1a955affa6
 SHA512:
-  metadata.gz: 5c14287d5f9366e89a72c4b3c8a7849567218fe143899a3dffe30128f51247831d25834a95dfe6757c2665ff301d0daf0553fae6f6e131efb2f3fea9cf64c351
-  data.tar.gz: 35a7b17307b370392d54be93cdf509b480f4901dc3a45f4ca37bcba50cb3109dbc5f5daf6fd4138cd3a41d27cdec8062dddc296a30d644cf6bc8088f273ffbbf
+  metadata.gz: 85e1478ee97be8b46f57dd8b771c549f87092856f5bce9aa72e71c41545e5c37cb1ae3d31ffa5c2478fcf8018c09ea69a5df7948ee9af6aa612a0a8e1110170f
+  data.tar.gz: 76b35dc8048537b9f37d792a0442b72b0989be7c3028d77f1c7b774c6af90434ea4b62a9f1ba09f9a5e3de05468d094e60f93712b47cd7e8e5e1d94a0aa3cf00

data/app/assets/javascripts/lato/controllers/lato_input_autocomplete2_controller.js

@@ -0,0 +1,115 @@
+import { Controller } from "@hotwired/stimulus"
+import _ from 'lodash'
+
+export default class extends Controller {
+  static values = {
+    path: String
+  }
+
+  /**
+   * Stimulus
+   */
+
+  connect() {
+    this.search = _.debounce(this.search, 500)
+
+    this.realInput = document.createElement('input')
+    this.realInput.type = 'hidden'
+    this.realInput.name = this.element.getAttribute('name')
+    this.realInput.value = this.element.value
+    this.element.insertAdjacentElement('afterend', this.realInput)
+
+    if (this.element.value) {
+      this.setDefaultElementValue()
+    }
+
+    this.element.addEventListener('keyup', (e) => {
+      this.search(e.target.value)
+    })
+
+    window.addEventListener('click', this.onWindowClick.bind(this))
+    window.addEventListener('scroll', this.onWindowScroll.bind(this))
+    window.addEventListener('resize', this.onWindowResize.bind(this))
+  }
+
+  disconnect() {
+    this.realInput.remove()
+    this.suggestHide()
+
+    window.removeEventListener('click', this.onWindowClick.bind(this))
+    window.removeEventListener('scroll', this.onWindowScroll.bind(this))
+    window.removeEventListener('resize', this.onWindowResize.bind(this))
+  }
+
+  async search(value) {
+    this.realInput.value = ''
+    if (!value || value.length < 3) return
+
+    try {
+      const response = await fetch(this.pathValue + '?q=' + value)
+      const data = await response.json()
+      this.suggestShow(data)
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  suggestShow(data = []) {
+    if (this.optionsList) this.optionsList.remove()
+    this.optionsList = document.createElement('ul')
+    this.optionsList.classList.add('list-group')
+    this.optionsList.style.position = 'fixed'
+    this.optionsList.style.width = this.element.offsetWidth + 'px'
+    this.optionsList.style.maxHeight = '200px'
+    this.optionsList.style.overflowY = 'auto'
+    this.optionsList.style.zIndex = 9999
+
+    const elementRect = this.element.getBoundingClientRect()
+    this.optionsList.style.top = elementRect.bottom + 'px'
+    this.optionsList.style.left = elementRect.left + 'px'
+    
+    data.forEach((option) => {
+      const li = document.createElement('li')
+      li.classList.add('list-group-item')
+      li.classList.add('list-group-item-action')
+      li.style.cursor = 'pointer'
+      li.innerText = typeof option == 'string' ? option : option.label
+      li.addEventListener('click', () => {
+        this.element.value = typeof option == 'string' ? option : option.label
+        this.realInput.value = typeof option == 'string' ? option : option.value
+        this.suggestHide()
+      })
+      this.optionsList.appendChild(li)
+    })
+
+    document.body.appendChild(this.optionsList)
+  }
+
+  suggestHide() {
+    if (this.optionsList) this.optionsList.remove()
+  }
+
+  async setDefaultElementValue() {
+    try {
+      const response = await fetch(this.pathValue + '?value=' + this.element.value)
+      const data = await response.json()
+      this.element.value = data?.label || this.element.value
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  onWindowClick(event) {
+    if (!this.element.contains(event.target)) {
+      this.suggestHide()
+    }
+  }
+
+  onWindowScroll(event) {
+    this.suggestHide()
+  }
+
+  onWindowResize(event) {
+    this.suggestHide()
+  }
+}

data/app/assets/javascripts/lato/controllers/lato_input_autocomplete_controller.js

@@ -40,7 +40,7 @@ export default class extends Controller {
 
     data.forEach((item) => {
       const option = document.createElement('option')
-      option.value = item
+      option.value = typeof item === 'string' ? item : item.label
       this.datalist.appendChild(option)
     })
   }

data/app/views/layouts/lato/application.html.erb

@@ -39,7 +39,7 @@
       </aside>
     <% end %>
 
-    <main class="<%= @layout_sidebar && 'layout_sidebar' %>">
+    <main class="<%= @layout_sidebar ? 'layout_sidebar' : '' %>">
       <%= render 'layouts/lato/content' %>
     </main>
   </div>

data/lib/lato/version.rb

@@ -1,3 +1,3 @@
 module Lato
-  VERSION = "3.8.1"
+  VERSION = "3.9.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: lato
 version: !ruby/object:Gem::Version
-  version: 3.8.1
+  version: 3.9.0
 platform: ruby
 authors:
 - Gregorio Galante
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-06-07 00:00:00.000000000 Z
+date: 2024-07-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -159,6 +159,7 @@ files:
 - app/assets/javascripts/lato/controllers/lato_feedback_controller.js
 - app/assets/javascripts/lato/controllers/lato_form_controller.js
 - app/assets/javascripts/lato/controllers/lato_hello_controller.js
+- app/assets/javascripts/lato/controllers/lato_input_autocomplete2_controller.js
 - app/assets/javascripts/lato/controllers/lato_input_autocomplete_controller.js
 - app/assets/javascripts/lato/controllers/lato_network_controller.js
 - app/assets/javascripts/lato/controllers/lato_operation_controller.js