satis 2.2.2 → 2.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0a216f52695555dd93f0a81cd4bccbfd12a2a35e4c66d27ecb9b9d47a13230ab
-  data.tar.gz: 2c91093bfbdf423497d7be8cd3f369a7532576b2df54fcacd1819db96c1b24f0
+  metadata.gz: e7f45a02909e964bdabe71e07a24befe60acff498e89e92c3ed053e87809cf6b
+  data.tar.gz: 68ef0cb6049da0bf0888fb15ee66c330cb8b0c227f48d350baf56f69ff726ae7
 SHA512:
-  metadata.gz: 5e5993a3ddbad93c31e40f16020d5fa449414124c8eb2cdd8340d171798a36591d348bd58e431667771e085b7e7163e362840eeb566fa6e40b0fa2a7bd8562ad
-  data.tar.gz: faf38d6365356096841ac530334082d83bd1088190da0c1560800c174af553fc5ffe8591dfee14d2c3f81c35cd5cd96e10150c538fc44286bcb6030d2f2ebeb9
+  metadata.gz: 1c0f3259673f67d0c7fa473f28c2b3c717dc94d297a0541e4c8964638e2ddf468693a8e69171c590f39ed512d8461d8f201819f896e19392bad47d16029173cf
+  data.tar.gz: bed89434515a53c1c853d04bc9ead18aa6fc53be3b73d270e00110978cf8717da1dea8b9ebdf05079ef5d64455dfb3a6e442300643d1772ecb50bec106a859e2

data/README.md

@@ -12,7 +12,7 @@ We use:
 
 ## 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.
+* From 2.3.0 onwards, we will no longer ship Fontawesome free. It conflicts with Fontawesome Pro. You can add easily add the javascript files, you can download them from here: https://fontawesome.com/download. Use the files from the `js` folder. 
 
 ## Installation
 

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

@@ -5,14 +5,6 @@
     @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,45 +1,38 @@
-.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
+.sts-card data-controller="satis-tabs" data-satis-tabs-persist-value=persist data-satis-tabs-key-value=key id=identifier
   - if header?
-    .sts-card__header class=header_classes data-action="#{collapsible ? 'click->satis-card#toggle' : ''}"
+    .sts-card__header class="#{tabs? ? '' : 'border-b border-gray-200'}"
       .-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 class=title_classes
+          h3.text-lg.leading-6.font-medium.text-gray-900.dark:text-white
             = 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 data-satis-card-target="actions"
+          .ml-4.mt-4.flex-shrink-0
             .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))
 
-  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
+  - 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_classes style=content_style
-        = content
+  - else
+    div class="#{content_padding ? 'px-6 py-6' : ''}"
+      = content
 
   - if footer
-    div data-satis-card-target="footer"
-      = footer
+    = footer

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

@@ -7,8 +7,7 @@ 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,
-                  :collapsible, :collapsed, :height, :min_height, :max_height, :padding, :compact
+      attr_reader :identifier, :icon, :description, :menu, :content_padding, :header_background_color, :initial_actions, :persist, :key
       attr_writer :scope
 
       def initialize(identifier = nil,
@@ -24,14 +23,7 @@ module Satis
                      scope: [],
                      actions: [],
                      key: nil,
-                     persist: true,
-                     collapsible: false,
-                     collapsed: false,
-                     height: nil,
-                     min_height: nil,
-                     max_height: nil,
-                     padding: nil,
-                     compact: false)
+                     persist: true)
         super
 
         if identifier.blank?
@@ -51,13 +43,6 @@ 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
@@ -85,38 +70,6 @@ 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/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
-        div class=input_wrapper_classes
+        .h-12.p-1.flex.rounded
           .flex.flex-auto.flex-wrap.sts-dropdown-input
             / Input where you can search
-            input class=search_input_classes data-action="input->satis-dropdown#search" data-satis-dropdown-target="searchInput" placeholder=placeholder autofocus=options[:autofocus]
+            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]
           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
-    div class=results_classes style=results_style data-satis-dropdown-target="results" data-action="scroll->satis-dropdown#scroll" tabindex="-1"
+    .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"
       .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, :dropdown_max_height, :dropdown_min_height, :dropdown_width, :dropdown_height, :compact
+      attr_reader :url, :form, :attribute, :title, :options
 
       def initialize(form:, attribute:, **options, &block)
         super
@@ -18,11 +18,6 @@ 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] ||= {}
 
@@ -118,31 +113,6 @@ 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

@@ -20,14 +20,14 @@ export default class DropdownComponentController extends ApplicationController {
   ]
 
   static values = {
-    chainTo: String,
-    freeText: Boolean,
-    needsExactMatch: Boolean,
-    pageSize: Number,
-    url: String,
-    urlParams: Object,
-    isMultiple: Boolean,
-    minSearchQueryLength: Number
+      chainTo: String,
+      freeText: Boolean,
+      needsExactMatch: Boolean,
+      pageSize: Number,
+      url: String,
+      urlParams: Object,
+      isMultiple: Boolean,
+      minSearchQueryLength: Number
   }
 
   connect() {
@@ -355,9 +355,6 @@ 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 = ""
@@ -545,7 +542,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)
@@ -604,14 +601,15 @@ export default class DropdownComponentController extends ApplicationController {
       this.fetchResultsWith(ourUrl).then((itemCount) => {
         if (this.hasResults) {
           this.filterResultsChainTo()
-          if (!this.resultsShown) {
+
+          if (!this.resultsShown && !this.chainToValue) {
             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, true)
+            this.selectItem(dataDiv)
             this.setSelectedItem(dataDiv.getAttribute("data-satis-dropdown-item-value"))
             this.searchQueryValue = ""
           } else if (this.searchQueryValue?.length > 0) {
@@ -620,12 +618,8 @@ export default class DropdownComponentController extends ApplicationController {
             let matches = []
             this.itemTargets.forEach((item) => {
               const text = item.getAttribute("data-satis-dropdown-item-text")
-              let matched
-              if (this.needsExactMatchValue) {
-                matched = searchValue.localeCompare(text, undefined, { sensitivity: "base" }) === 0
-              } else {
-                matched = searchValue.split(" ").every((term) => { return text?.toLowerCase().includes(term.toLowerCase()) })
-              }
+              const matched = this.needsExactMatchValue
+                ? searchValue.localeCompare(text, undefined, { sensitivity: "base" }) === 0 : text?.toLowerCase().includes(searchValue.toLowerCase())
 
               const isHidden = item.classList.contains("hidden")
               if (!isHidden) {

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

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