satis 2.2.1 → 2.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bc8a747e29a45e624073337280b37554f1851e5ff22e641e2a17a8262b388c63
-  data.tar.gz: a2ce937edd7e9cce042dd8d39eb78a550ed378f9848cee6f63f2927b79b97768
+  metadata.gz: 0a216f52695555dd93f0a81cd4bccbfd12a2a35e4c66d27ecb9b9d47a13230ab
+  data.tar.gz: 2c91093bfbdf423497d7be8cd3f369a7532576b2df54fcacd1819db96c1b24f0
 SHA512:
-  metadata.gz: 64bed36f5052bf1edd2e0daf82baf3e1c133e4c5a37f040d073bbb15f288317e12ef0d36e00e2eb5deca69124857717b814e6142d787e253ce0a41e8afb277b5
-  data.tar.gz: 60d56b431a5b98bd734a6782c5fb726febf6891ba6f797f74db0980c20fd1692f0bc48da704aab11e0fb065852458fb2237dac6beb7792d2475c13a68c6a0df5
+  metadata.gz: 5e5993a3ddbad93c31e40f16020d5fa449414124c8eb2cdd8340d171798a36591d348bd58e431667771e085b7e7163e362840eeb566fa6e40b0fa2a7bd8562ad
+  data.tar.gz: faf38d6365356096841ac530334082d83bd1088190da0c1560800c174af553fc5ffe8591dfee14d2c3f81c35cd5cd96e10150c538fc44286bcb6030d2f2ebeb9

data/README.md

@@ -5,11 +5,15 @@ We use:
 
 - [TailwindCSS](https://tailwindcss.com)
 - [TailwindUI](https://tailwindui.com)
-- [FontAwesome 6](https://fontawesome.com/v6.0/)
+- [FontAwesome 7](https://fontawesome.com/v7.0/)
 - [ViewComponent](https://viewcomponent.org)
 - [HotWired](https://hotwired.dev)
 - [BEM](https://cssguidelin.es/#bem-like-naming)
 
+## Upgrade
+
+* From 2.3.0 onwards, we will no longer ship Fontawesome free. It conflicts with Fontawesome Pro. You can easily add the javascript files, you can download them from here: https://fontawesome.com/download. Use the files from the `js` folder. Put these in a folder which is in your manifest and it should just work.
+
 ## Installation
 
 Your main app needs to have at least the following config/postcss.config.js:

data/app/assets/config/satis_manifest.js

@@ -1,5 +1,4 @@
 //= link_tree ../images
-//= link_directory ../fontawesome
 //= link_directory ../../javascript/satis .js
 //= link_directory ../../javascript/satis/controllers .js
 //= link_directory ../../javascript/satis/elements .js

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

@@ -5,6 +5,14 @@
     @apply px-4 py-5 sm:px-6 dark:bg-gray-900 bg-white dark:border-gray-700 dark:text-gray-300;
   }
 
+  &__header--compact {
+    @apply px-3 py-3 sm:px-4;
+  }
+
+  &[data-satis-card-collapsible-value="true"] .sts-card__header {
+    @apply cursor-pointer select-none;
+  }
+
   &__tabs {
     @apply bg-white px-4 border-b border-gray-200 sm:px-5 bg-white dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300;
 

data/app/components/satis/card/component.html.slim

@@ -1,38 +1,45 @@
-.sts-card data-controller="satis-tabs" data-satis-tabs-persist-value=persist data-satis-tabs-key-value=key id=identifier
+.sts-card data-controller="satis-card satis-tabs" data-satis-tabs-persist-value=persist data-satis-tabs-key-value=key data-satis-card-collapsible-value=collapsible data-satis-card-collapsed-value=collapsed data-satis-card-identifier-value=identifier id=identifier
   - if header?
-    .sts-card__header class="#{tabs? ? '' : 'border-b border-gray-200'}"
+    .sts-card__header class=header_classes data-action="#{collapsible ? 'click->satis-card#toggle' : ''}"
       .-ml-4.-mt-4.flex.justify-between.items-center.flex-wrap.sm:flex-nowrap
         - if icon
           .ml-4.mt-4.flex-shrink-0.text-primary-600.dark:text-gray-300
             i class=icon
         .ml-4.mt-4.flex-1
-          h3.text-lg.leading-6.font-medium.text-gray-900.dark:text-white
+          h3 class=title_classes
             = title
           - if description.present?
             p.mt-1.text-sm.text-gray-500.dark:text-gray-500
               = description
 
         - if actions.present? || initial_actions.present?
-          .ml-4.mt-4.flex-shrink-0
+          .ml-4.mt-4.flex-shrink-0 data-satis-card-target="actions"
             .grid.grid-flow-row.gap-1.sm:grid-flow-col
               - initial_actions.each do |action|
                 = action
               - actions.each do |action|
                 = action
 
+        - if collapsible
+          .ml-4.mt-4.flex-shrink-0
+            button.text-gray-400.hover:text-gray-600.dark:hover:text-gray-200.transition-transform.duration-200 type="button" data-satis-card-target="collapseIcon"
+              i.fas.fa-chevron-down
+
         - if menu
           .ml-4.mt-2.flex-shrink-0
             = render(Satis::Menu::Component.new(menu))
 
-  - if tabs?
-    = render Satis::Tabs::Component.new(custom_link: custom_tabs_link).tap {|c| c.original_view_context = view_context } do |t|
-      - tabs.each_with_index do |ta, i|
-        - t.with_tab ta.name, id: ta.id, icon: ta.icon, padding: ta.padding, badge: ta.badge, menu: ta.menu, dirty: ta.dirty, title: ta.title, responsive: ta.responsive, selected_tab_index: ta.selected_tab_index do
-          = ta
+  div data-satis-card-target="body"
+    - if tabs?
+      = render Satis::Tabs::Component.new(custom_link: custom_tabs_link).tap {|c| c.original_view_context = view_context } do |t|
+        - tabs.each_with_index do |ta, i|
+          - t.with_tab ta.name, id: ta.id, icon: ta.icon, padding: ta.padding, badge: ta.badge, menu: ta.menu, dirty: ta.dirty, title: ta.title, responsive: ta.responsive, selected_tab_index: ta.selected_tab_index do
+            = ta
 
-  - else
-    div class="#{content_padding ? 'px-6 py-6' : ''}"
-      = content
+    - else
+      div class=content_classes style=content_style
+        = content
 
   - if footer
-    = footer
+    div data-satis-card-target="footer"
+      = footer

data/app/components/satis/card/component.rb

@@ -7,7 +7,8 @@ module Satis
       renders_many :tabs, Tab::Component
       renders_one :footer
 
-      attr_reader :identifier, :icon, :description, :menu, :content_padding, :header_background_color, :initial_actions, :persist, :key
+      attr_reader :identifier, :icon, :description, :menu, :content_padding, :header_background_color, :initial_actions, :persist, :key,
+                  :collapsible, :collapsed, :height, :min_height, :max_height, :padding, :compact
       attr_writer :scope
 
       def initialize(identifier = nil,
@@ -23,7 +24,14 @@ module Satis
                      scope: [],
                      actions: [],
                      key: nil,
-                     persist: true)
+                     persist: true,
+                     collapsible: false,
+                     collapsed: false,
+                     height: nil,
+                     min_height: nil,
+                     max_height: nil,
+                     padding: nil,
+                     compact: false)
         super
 
         if identifier.blank?
@@ -43,6 +51,13 @@ module Satis
         @key = key
         @custom_tabs_link = custom_tabs_link
         @scope = scope.present? ? scope : identifier
+        @collapsible = collapsible
+        @collapsed = collapsed
+        @height = height
+        @min_height = min_height
+        @max_height = max_height
+        @padding = padding
+        @compact = compact
       end
 
       # def key
@@ -70,6 +85,38 @@ module Satis
       def header?
         icon.present? || title.present? || description.present? || menu
       end
+
+      def content_style
+        styles = []
+        styles << "height: #{height}" if height
+        styles << "min-height: #{min_height}" if min_height
+        styles << "max-height: #{max_height}; overflow-y: auto" if max_height
+        styles.join('; ')
+      end
+
+      def content_classes
+        classes = []
+        if padding
+          classes << padding
+        elsif content_padding
+          classes << (compact ? 'px-4 py-3' : 'px-6 py-6')
+        end
+        classes.join(' ')
+      end
+
+      def header_classes
+        base = tabs? ? '' : 'border-b border-gray-200'
+        base += ' sts-card__header--compact' if compact
+        base
+      end
+
+      def title_classes
+        if compact
+          'text-sm leading-5 font-medium text-gray-900 dark:text-white'
+        else
+          'text-lg leading-6 font-medium text-gray-900 dark:text-white'
+        end
+      end
     end
   end
 end

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

@@ -0,0 +1,78 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["body", "collapseIcon", "actions", "footer"]
+  static values = {
+    collapsible: { type: Boolean, default: false },
+    collapsed: { type: Boolean, default: false },
+    identifier: String
+  }
+
+  connect() {
+    if (this.collapsibleValue) {
+      this._restoreState()
+      this._applyState(false)
+    }
+  }
+
+  toggle(event) {
+    if (!this.collapsibleValue) return
+
+    // Don't toggle when clicking on actions, buttons, links, or menus inside the header
+    if (event.target.closest('a, button:not([data-satis-card-target="collapseIcon"]), .sts-menu, [data-action]')) {
+      if (!event.target.closest('[data-satis-card-target="collapseIcon"]')) return
+    }
+
+    this.collapsedValue = !this.collapsedValue
+    this._applyState(true)
+    this._saveState()
+  }
+
+  _applyState(animate) {
+    const collapsed = this.collapsedValue
+
+    if (this.hasBodyTarget) {
+      if (animate) {
+        this.bodyTarget.style.transition = "max-height 0.2s ease-in-out, opacity 0.2s ease-in-out"
+      }
+
+      if (collapsed) {
+        this.bodyTarget.style.maxHeight = "0px"
+        this.bodyTarget.style.opacity = "0"
+        this.bodyTarget.style.overflow = "hidden"
+      } else {
+        this.bodyTarget.style.maxHeight = ""
+        this.bodyTarget.style.opacity = ""
+        this.bodyTarget.style.overflow = ""
+      }
+    }
+
+    if (this.hasFooterTarget) {
+      this.footerTarget.style.display = collapsed ? "none" : ""
+    }
+
+    // Actions stay visible when collapsed — they're in the header
+    if (this.hasCollapseIconTarget) {
+      this.collapseIconTarget.style.transform = collapsed ? "rotate(-90deg)" : "rotate(0deg)"
+    }
+  }
+
+  _storageKey() {
+    return `satis-card-${this.identifierValue}-collapsed`
+  }
+
+  _saveState() {
+    if (this.identifierValue) {
+      sessionStorage.setItem(this._storageKey(), this.collapsedValue)
+    }
+  }
+
+  _restoreState() {
+    if (this.identifierValue) {
+      const stored = sessionStorage.getItem(this._storageKey())
+      if (stored !== null) {
+        this.collapsedValue = stored === "true"
+      }
+    }
+  }
+}

data/app/components/satis/dropdown/component.html.slim

@@ -9,10 +9,10 @@ div.satis-dropdown data-action="keydown->satis-dropdown#dispatch" data-controlle
     div.hidden.py-1 data-satis-dropdown-target="pills"
     .flex.flex-col.items-center
       .w-full.sts-dropdown class=input_class
-        .h-12.p-1.flex.rounded
+        div class=input_wrapper_classes
           .flex.flex-auto.flex-wrap.sts-dropdown-input
             / Input where you can search
-            input.focus:ring-0.border-none.p-1.px-2.appearance-none.w-full.sts-dropdown-input.text-gray-800.dark:text-gray-300 data-action="input->satis-dropdown#search" data-satis-dropdown-target="searchInput" placeholder=placeholder autofocus=options[:autofocus]
+            input class=search_input_classes data-action="input->satis-dropdown#search" data-satis-dropdown-target="searchInput" placeholder=placeholder autofocus=options[:autofocus]
           div
             / Reset button
             - unless @reset_button == false
@@ -28,7 +28,7 @@ div.satis-dropdown data-action="keydown->satis-dropdown#dispatch" data-controlle
     template data-satis-dropdown-target="selectedItemsTemplate"
 
     / Container for results
-    .hidden.container.sts-dropdown-results.shadow.dark:text-gray-300.z-10.rounded.max-h-select.overflow-y-auto.w-full data-satis-dropdown-target="results" data-action="scroll->satis-dropdown#scroll" tabindex="-1"
+    div class=results_classes style=results_style data-satis-dropdown-target="results" data-action="scroll->satis-dropdown#scroll" tabindex="-1"
       .flex.flex-col.w-full data-satis-dropdown-target="items"
         - options[:collection]&.each do |item|
           - data_attrs = item.try(:third) ? item.third : {}

data/app/components/satis/dropdown/component.rb

@@ -3,7 +3,7 @@
 module Satis
   module Dropdown
     class Component < ViewComponent::Base
-      attr_reader :url, :form, :attribute, :title, :options
+      attr_reader :url, :form, :attribute, :title, :options, :dropdown_max_height, :dropdown_min_height, :dropdown_width, :dropdown_height, :compact
 
       def initialize(form:, attribute:, **options, &block)
         super
@@ -18,6 +18,11 @@ module Satis
         @needs_exact_match = options[:needs_exact_match]
         @reset_button = options[:reset_button] || options[:include_blank]
         @toggle_button = options[:toggle_button] != false
+        @dropdown_max_height = options[:max_height]
+        @dropdown_min_height = options[:min_height]
+        @dropdown_width = options[:width]
+        @dropdown_height = options[:height]
+        @compact = options[:compact] || false
 
         options[:input_html] ||= {}
 
@@ -113,6 +118,31 @@ module Satis
       def input_class
         [@options.fetch(:input_html, {}).fetch(:class, ""), form.has_error?(attribute) ? "is-invalid" : ""].join(" ")
       end
+
+      def results_style
+        styles = []
+        styles << "max-height: #{dropdown_max_height}" if dropdown_max_height
+        styles << "min-height: #{dropdown_min_height}" if dropdown_min_height
+        styles << "width: #{dropdown_width}" if dropdown_width
+        styles << "height: #{dropdown_height}" if dropdown_height
+        styles.join('; ')
+      end
+
+      def results_classes
+        classes = "hidden container sts-dropdown-results shadow dark:text-gray-300 z-10 rounded overflow-y-auto w-full"
+        classes += " max-h-select" unless dropdown_max_height
+        classes
+      end
+
+      def input_wrapper_classes
+        compact ? 'h-9 p-1 flex rounded' : 'h-12 p-1 flex rounded'
+      end
+
+      def search_input_classes
+        base = 'focus:ring-0 border-none p-1 px-2 appearance-none w-full sts-dropdown-input text-gray-800 dark:text-gray-300'
+        base += ' text-sm' if compact
+        base
+      end
     end
   end
 end

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

@@ -355,6 +355,9 @@ export default class DropdownComponentController extends ApplicationController {
   }
 
   setHiddenSelect() {
+    if (this.element.querySelector('select[name*="[TEMPLATE]"]')) {
+        return
+    } 
     if (this.hiddenSelectTarget.options.length === 0) {
       this.searchInputTarget.value = ""
       this.pillsTarget.innerHTML = ""
@@ -542,7 +545,7 @@ export default class DropdownComponentController extends ApplicationController {
     // auto select if there is only one match and we are not in freetext mode
     if (!this.freeTextValue) {
       if (matches.length === 1) {
-        if (this.filteredSearchQuery.length >= this.minSearchQueryLengthValue &&
+        if (this.filteredSearchQuery?.length >= this.minSearchQueryLengthValue &&
           matches[0].getAttribute("data-satis-dropdown-item-text").toLowerCase().indexOf(this.lastSearch.toLowerCase()) >= 0) {
           const dataDiv = matches[0].closest('[data-satis-dropdown-target="item"]')
           this.selectItem(dataDiv)
@@ -601,15 +604,14 @@ export default class DropdownComponentController extends ApplicationController {
       this.fetchResultsWith(ourUrl).then((itemCount) => {
         if (this.hasResults) {
           this.filterResultsChainTo()
-
-          if (!this.resultsShown && !this.chainToValue) {
+          if (!this.resultsShown) {
             this.showResultsList()
           }
 
           // auto select when there is only 1 value
-          if (this.filteredSearchQuery.length >= this.minSearchQueryLengthValue && this.nrOfItems === 1 && !this.freeTextValue) {
+          if (this.filteredSearchQuery?.length >= this.minSearchQueryLengthValue && this.nrOfItems === 1 && !this.freeTextValue) {
             const dataDiv = this.itemTargets[0].closest('[data-satis-dropdown-target="item"]')
-            this.selectItem(dataDiv)
+            this.selectItem(dataDiv, true)
             this.setSelectedItem(dataDiv.getAttribute("data-satis-dropdown-item-value"))
             this.searchQueryValue = ""
           } else if (this.searchQueryValue?.length > 0) {

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

@@ -1,3 +1,4 @@
+/* ── Sidebar container ── */
 .h-screen.flex .sidebar {
   @apply dark:bg-gray-700 bg-white;
   width: 260px;
@@ -6,77 +7,44 @@
   left: 0;
   margin-top: 4rem;
   position: absolute;
-  overflow: visible;
-  overflow-y: scroll;
+  overflow-x: hidden;
+  overflow-y: auto;
   scrollbar-width: none;
   z-index: 999;
-  transition: backdrop-filter 0.3s ease-in-out, transform 0.3s ease-in-out;
-
-}
-
-.h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item{
-  z-index: 1100;
-  position: relative;
-  opacity: 0.99;
-  margin-left: 10px;
-  transition: backdrop-filter 0.3s ease-in-out, transform 0.3s ease-in-out;
+  transition: width 0.3s ease-in-out;
 }
 
-
 .h-screen.flex .sidebar.close {
-  position: absolute;
-  overflow: visible;
-  top: 0;
-  left: 0;
-  height: calc(100% - 4rem);
-  margin-top: 4rem;
   width: 60px;
-  z-index: 999;
-  scrollbar-width: none;
+  overflow: visible;
 }
 
 .sidebar::-webkit-scrollbar {
   display: none;
 }
 
+.dark .h-screen.flex .sidebar {
+  @apply bg-gray-800;
+}
 
+/* ── Topbar ── */
 .h-screen.flex .topbar {
   @apply bg-white dark:bg-gray-800;
   height: 4rem;
   display: flex;
   max-width: 100%;
-  left:0;
-  margin-left: 0;
   position: relative;
-  z-index: 10000;
-  transition: backdrop-filter 0.3s ease-in-out, transform 0.3s ease-in-out;
+  z-index: 1000;
 }
 
+/* ── Page body ── */
 .page_body.close {
-  margin-left: 50px;
-  max-width: 97%;
-}
-
-.h-screen.flex .sidebar .boxture-logo{
-  margin-top: 30px;
-}
-
-.sidebar.close .boxture-logo {
-  opacity: 0;
-}
-
-.h-screen.flex .sidebar.close .icon-link {
-  margin-top: 0;
-  transition: 0.3s ease;
-  transition-delay: 0.1s;
+  margin-left: 60px;
+  max-width: calc(100% - 60px);
 }
 
-
-.sidebar.close .sts-sidebar-menu-item{
-  margin-left: 2px;
-}
-
-.sidebar .boxture-logo {
+/* ── Logo ── */
+.h-screen.flex .sidebar .boxture-logo {
   height: 52px;
   width: 52px;
   opacity: 0.5;
@@ -84,66 +52,76 @@
   border-radius: 16px;
   font-size: 30px;
   color: #fff;
-  margin-top: 80px;
+  margin-top: 30px;
   mix-blend-mode: multiply;
+  transition: opacity 0.3s ease-in-out;
 }
 
 .dark .sidebar .boxture-logo {
   mix-blend-mode: normal;
 }
 
-.sidebar.close .profile-logo {
-  display: none;
+.sidebar.close .boxture-logo {
+  opacity: 0;
+  pointer-events: none;
 }
 
-.sidebar .arrow:hover {
-  color: #555555;
-  cursor: pointer;
+.sidebar .logo_name {
+  font-size: 10px;
+  opacity: 0.5;
+  text-align: center;
+  display: block;
 }
 
-.dark .sidebar .arrow:hover {
-  color: #c0c0c0;
+.sidebar.close .logo_name {
+  display: none;
 }
 
-.dark .sidebar .arrow {
-  color: #ffffff;
-  opacity: 1;
-  margin-top: 20px;
+.dark .sidebar .logo_name {
+  color: #edecec;
+}
+
+.sidebar.close .profile-logo {
+  display: none;
 }
 
+/* ── Collapse arrow ── */
 .h-screen.flex .sidebar .arrow {
   margin-top: 20px;
   font-size: 20px;
   opacity: 0.5;
-  left: 0;
   margin-left: 10px;
   margin-right: 10px;
   transform: scaleX(-1);
-  transition: backdrop-filter 0.3s ease-in-out, transform 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out;
 }
 
-.h-screen.flex .sidebar.close .arrow{
+.h-screen.flex .sidebar.close .arrow {
   margin-left: 15px;
-  left: 0;
   transform: scaleX(1);
 }
 
-.sidebar .logo_name {
-  font-size: 10px;
-  opacity: 0.5;
-  text-align: center;
-  display: block;
+.sidebar .arrow:hover {
+  color: #555555;
+  cursor: pointer;
 }
 
-.sidebar.close .logo_name {
-  display: none;
+.dark .sidebar .arrow {
+  color: #ffffff;
+  opacity: 1;
+  margin-top: 20px;
 }
 
-.dark .h-screen.flex .sidebar {
-  @apply bg-gray-800;
+.dark .sidebar .arrow:hover {
+  color: #c0c0c0;
 }
 
-.dark .sidebar .logo_name {
-  color: #edecec;
+.h-screen.flex .sidebar.close .icon-link {
+  margin-top: 0;
+  transition: 0.3s ease;
+  transition-delay: 0.1s;
 }
 
+.sidebar.close .sts-sidebar-menu-item {
+  margin-left: 2px;
+}