satis 2.1.6 → 2.1.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b5d37ea4bc5bcbf39336bf85e880827d7431a601fde0a1ff08caf96f0fb52c3e
-  data.tar.gz: 5d11ce8f1e7177d5b864230787a1804e65ce0d1245764c73142e20a23e50107d
+  metadata.gz: 3ea32c052f123438b8208bfd8fa7dccfa23f09021f9c7033c5432663dbf719e1
+  data.tar.gz: 73a82438192349081cc304038a73db04cb3b1a1fb503b5170e27c4e9c5568369
 SHA512:
-  metadata.gz: 55ff583894557956618c0a183422c92e55ff2da16cfdf3e2757c63acb0e9f7b34fc92938efdfbd67e00fda47e88c93d132b9ad3971da067bad68a3358ca03c9c
-  data.tar.gz: d16b710b624a602d9e5e5e77b4f3c1d280e6fc97b6e898bc0752b356dcd351498531028a6f3025ff11cc183e2b5a7cb1bdd370e39b6aec806e0079d7f1ba68f4
+  metadata.gz: 1521ccc6f5a19ac00f532b04ee1e794ba051e956bc95c9ca39b96919f81455130101e69fd09eb452fd51dbcc313041266da24abac4321955cc9b188303dd6e0e
+  data.tar.gz: b4d56886421bcd276828a103bf1611ebe4d3812aa997d5cac043303187cfd8d6846c5e24022f7d8330fb4f6e1e4a13a0975710dcc2ac0ffb510aabf41d174bc8

data/app/components/satis/dropdown/component_controller.js

@@ -615,6 +615,32 @@ export default class DropdownComponentController extends ApplicationController {
             this.selectItem(dataDiv)
             this.setSelectedItem(dataDiv.getAttribute("data-satis-dropdown-item-value"))
             this.searchQueryValue = ""
+          } else if(this.searchQueryValue?.length > 0) {
+            // hide all items that don't match the search query
+            const searchValue = this.searchQueryValue
+            let matches = []
+            this.itemTargets.forEach((item) => {
+              const text = item.getAttribute("data-satis-dropdown-item-text")
+              const matched = this.needsExactMatchValue
+                ? searchValue.localeCompare(text, undefined, { sensitivity: "base" }) === 0
+                : new RegExp(searchValue, "i").test(text)
+
+              const isHidden = item.classList.contains("hidden")
+              if (!isHidden) {
+                if (matched) {
+                  matches.push(item)
+                } else {
+                  item.classList.toggle("hidden", true)
+                }
+              }
+            })
+
+            // don't show results
+            if (matches.length > 0) {
+              this.showResultsList(event)
+            } else {
+              if (!this.showSelectedItem()) this.hideResultsList(event)
+            }
           }
 
           if (itemCount > 0) {

data/app/components/satis/sidebar_menu_item/component.css

@@ -9,6 +9,10 @@
     }
   }
 
+  &.active > [data-satis-sidebar-menu-item-target="link"] [data-satis-sidebar-menu-item-target="indicator"] {
+    @apply rotate-90;
+  }
+
   &__link {
     @apply text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500
   }

data/app/components/satis/sidebar_menu_item/component_controller.js

@@ -1,87 +1,118 @@
 import ApplicationController from "satis/controllers/application_controller"
-import { debounce } from "satis/utils"
+import {debounce} from "satis/utils"
 
 export default class SidebarMenuItemComponentController extends ApplicationController {
   static targets = ["link", "indicator", "submenu"]
 
   connect() {
     super.connect()
-
-    // Primitive, yes
-    Array.from(this.element.querySelectorAll('[data-satis-sidebar-menu-item-target="link"]')).forEach((el) => {
-      if (el.href.length > 0 && window.location.href.indexOf(el.href) >= 0) {
-        let sidebar = el.closest("nav.sidebar")
-        if(sidebar.querySelectorAll('.active').length > 0){
-          sidebar.querySelectorAll('.active').forEach((ele) => {
-            ele.classList.remove("active")
-            ele.classList.remove("focus")
-          })
-        }
-        el.classList.add("active")
-      }
-    })
-
-    if (this.isActive) {
-      this.linkTarget.classList.add("active")
-
-      if (this.hasSubmenuTarget) {
-        this.submenuTarget.classList.remove("hidden")
-        if(!this.submenuTarget.classList.contains("hidden") && !this.indicatorTarget.hasAttribute("data-fa-transform")){
-          this.indicatorTarget.setAttribute("data-fa-transform", "rotate-90")
-        }
-        if (this.linkTarget){
-          this.linkTarget.classList.add("focus")
-        }
-      } else {
-        this.linkTarget.classList.add("focus")
+    if (this.hasSubmenuTarget) {
+      const active = this.isActive
+      if (active) {
+        this.showSubmenu()
       }
     }
+
+    this.boundUpdateFocus = this.updateFocus.bind(this)
+    this.boundOpenListener = this.openListener.bind(this)
+
+    this.updateFocus(true)
+    this.element.addEventListener('sts-sidebar-menu-item:open', this.boundOpenListener)
+    window.addEventListener('popstate', debounce(this.boundUpdateFocus, 200))
+  }
+
+  disconnect() {
+    super.disconnect()
+    this.element.removeEventListener('sts-sidebar-menu-item:open', this.boundOpenListener)
+    window.removeEventListener('popstate', debounce(this.boundUpdateFocus, 200))
   }
 
   open(event) {
-    if (!this.isActive && this.hasSubmenuTarget) {
-      if (this.hasSubmenuTarget) {
-        this.submenuTarget.classList.remove("hidden")
-        this.indicatorTarget.setAttribute("data-fa-transform", "rotate-90")
+    if (this.hasSubmenuTarget) {
+      const sidebar = this.element.closest('nav.sidebar')
+      sidebar.dispatchEvent(new CustomEvent('sts-sidebar-menu-item:open', { detail: { element: this.element } }))
+
+      if (!this.isSubmenuVisible) {
+        this.showSubmenu()
+        event.preventDefault()
+      } else {
+        this.hideSubmenu()
+      }
+
+      if (this.linkTarget.classList.contains("focus")) {
+        event.preventDefault()
+      } else {
+        this.linkTarget.classList.toggle("focus", true)
       }
-      event.preventDefault()
     }
-    else {
-        if(this.linkInUrl || (this.linkTarget.href.length <= 0 && !this.hasActiveLinks)){
-          if (this.hasSubmenuTarget){
-            this.submenuTarget.classList.toggle("hidden")
-            if(!this.submenuTarget.classList.contains("hidden") && !this.indicatorTarget.hasAttribute("data-fa-transform")){
-              this.indicatorTarget.setAttribute("data-fa-transform", "rotate-90")
-            } else{
-              this.indicatorTarget.removeAttribute("data-fa-transform", "rotate-90")
-            }
-            event.preventDefault()
-
-          }
-        }
+  }
+
+  openListener(event) {
+    if (event.detail.element !== this.element && !this.element.contains(event.detail.element)) {
+      this.hideSubmenu()
+      this.linkTarget.classList.toggle("focus", false)
     }
   }
 
-  get linkInUrl() {
-    return this.linkTarget.href.length > 0 && window.location.href.indexOf(this.linkTarget.href) >= 0
+  // This method is used to show the submenu
+  showSubmenu() {
+    if (!this.hasSubmenuTarget || this.isSubmenuVisible) return
+
+    this.submenuTarget.classList.toggle("hidden", false)
+    this.element.classList.toggle("active", true)
+  }
+
+  // This method is used to hide the submenu
+  hideSubmenu() {
+    if (!this.hasSubmenuTarget || !this.isSubmenuVisible) return
+
+    this.submenuTarget.classList.toggle("hidden", true)
+    this.element.classList.toggle("active", false)
+  }
+
+  updateFocus(scroll = false) {
+    if (!this.hasLinkTarget) return
+    const focusedItem =  this.element.closest('nav.sidebar').querySelector('a.focus')
+    const linkInUrl = this.linkInUrl()
+    if (linkInUrl && (!focusedItem || linkInUrl > this.linkInUrl(focusedItem))) {
+      focusedItem?.classList.toggle("focus", false)
+      this.linkTarget.classList.toggle("focus", true)
+      if (scroll) this.linkTarget.scrollIntoView({ behavior: 'instant', block: 'nearest' })
+    } else
+      this.linkTarget.classList.toggle("focus", false)
+  }
+
+  linkInUrl(target = this.linkTarget) {
+    if(!target || target.href.length === 0  || target.pathname !== window.location.pathname || target.origin !== window.location.origin)
+      return 0
+
+    let c = 1;
+    if(target.hash === window.location.hash) c++
+    window.location.search.split('&').forEach((param) => {if (target.search.includes(param)) c+=2})
+    return c
   }
 
   get isActive() {
-    return this.linkInUrl || this.hasOpenSubmenus || this.hasActiveLinks
+    return this.linkInUrl() || this.element.classList.contains("active")
+      || Array.from(this.element.querySelectorAll('a[data-satis-sidebar-menu-item-target="link"]'))
+        .some((link) => link.classList.contains("active") || this.linkInUrl(link))
+  }
+
+  get isSubmenuVisible() {
+    return !this.submenuTarget.classList.contains("hidden")
   }
 
   get hasOpenSubmenus() {
-    return Array.from(this.element.querySelectorAll('[data-satis-sidebar-menu-item-target="submenu"]')).some((el) => {
-      return !el.classList.contains("hidden")
-      // return Array.from(el.querySelectorAll('[data-satis-sidebar-menu-item-target="submenu"]')).some((el) => {
-      //   return !el.classList.contains("hidden")
-      // })
-    })
+    return this.openSubmenus.length > 0
   }
 
-  get hasActiveLinks() {
-    return Array.from(this.element.querySelectorAll('[data-satis-sidebar-menu-item-target="link"]')).some((el) => {
-      return el.classList.contains("active")
-    })
+  /**
+   * Get a list of all open submenus
+   * @returns {NodeListOf<Element>}
+   */
+  get openSubmenus() {
+    // scope to first match. check if there are any submenus that are not hidden
+    return this.element.querySelectorAll('[data-satis-sidebar-menu-item-target="submenu"]:not([class*="hidden"])')
   }
+
 }

data/lib/satis/version.rb

@@ -1,3 +1,3 @@
 module Satis
-  VERSION = "2.1.6"
+  VERSION = "2.1.8"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: satis
 version: !ruby/object:Gem::Version
-  version: 2.1.6
+  version: 2.1.8
 platform: ruby
 authors:
 - Tom de Grunt
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-04-18 00:00:00.000000000 Z
+date: 2024-04-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: browser