satis 1.0.70 → 1.0.75

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 03c106e3c85f9b929d8857c93d5b3453f306f0c9557d1cc084dd763dd2bd849b
-  data.tar.gz: e0e8799e598ac7e0f8825a88194125df5ff140c425c751438f7971f1bb7857d9
+  metadata.gz: e8bb27aace7817e26b12e3dc2d45f998cc8115681e7ae457988bdf417da6a237
+  data.tar.gz: 444726850e8e2d89b7cd4dc36eee15be4f92a49b24af5128a7b2e86996790309
 SHA512:
-  metadata.gz: 73c6b212d40768e612fba5f20870fc99fdb0c544095d8aee622ae76ea0addb833ce361404e2be1c2bd74e288afd50ca8f1f9318cb0ce3bef992c90c7004975e3
-  data.tar.gz: '08a42c0b640f4f6fe1223d7e1ec046b91ae0cdae1fcf98146efbf6e82b0e180e011c0962d617ace24162cd46225a671ab06e955e6eb062eb47092a3b7eb5480d'
+  metadata.gz: 5395dd96507833c0f3100f1851d3d75375d45fab2c2fb3d37cbc1d40f26f177b25db14dc376a98b60a85d1533cc58b46ea72def4f3e27e2bea77233c3d1b259b
+  data.tar.gz: 6c4116e85019189aad9f18ddc3bb61e04122328217b80bbeccf688ad3fe3886b66047633af3c4e741d6574f6059316fe79a1f1c117187933ee353035479a46a1

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

@@ -32,21 +32,21 @@
           - tabs.each do |tab|
             option selected=tab.selected? = t(tab.name, scope: [:tabs])
       .hidden.sm:block
-        nav.-mb-px.flex.space-x-8.overflow-x-auto aria-label="Tabs"
+        nav.-mb-px.flex.space-x-4.overflow-x-auto aria-label="Tabs"
           - tabs.each_with_index do |tab, index|
             - id = tab.id.present? ? tab.id : tab.name
-            .flex
-              a.tab id="#{id}" class="#{index == (tab.selected_tab_index) ? 'selected' : ''}" href="#" aria-current="#{tab.selected? ? "page" : ''}" data-satis-tabs-target="tab" data-action="click->satis-tabs#select"
+            .flex.tab class="#{index == (tab.selected_tab_index) ? 'selected' : ''}" data-satis-tabs-target="tab" data-action="click->satis-tabs#select" id="#{id}" href="#" aria-current="#{tab.selected? ? "page" : ''}"
+              a
                 - if tab.icon
                   i.mr-2 class=tab.icon
-                span id="tab_label_#{tab.id}"
+                span id="tab_label_#{tab.id}" class="#{tab.dirty? ? 'italic' : ''}"
                   = t(tab.name, scope: [:tabs], default: tab.title || tab.name)
                 i.fal.fa-triangle-exclamation.ml-2.hidden
                 - if tab.badge
                   span.badge id="tab_badge_#{tab.id}"
                     = tab.badge
-              - if tab.tab_menu
-                = render(Satis::Menu::Component.new(tab.tab_menu, icon: 'fa-thin fa-square-chevron-down'))
+                - if tab.tab_menu
+                  = render(Satis::Menu::Component.new(tab.tab_menu, icon: 'fa-thin fa-chevron-down'))
           - if custom_tabs_link_html.present?
             = custom_tabs_link_html
 

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

@@ -1,13 +1,13 @@
-div data-controller="satis-menu" data-action="#{menu.event}->satis-menu#show mouseleave->satis-menu#hide"
+div.sts-menu data-controller="satis-menu" data-action="#{menu.event}->satis-menu#show mouseleave->satis-menu#hide"
   - if content
     = content
   - else
-    button.inline-flex.items-center.justify-center.h-8.w-8.rounded-full.focus:outline-none.focus:ring-2.focus:ring-offset-2.focus:ring-primary-500.dark:text-gray-500 aria-expanded="false" aria-haspopup="true" type="button"
+    button.sts-menu__button aria-expanded="false" aria-haspopup="true" type="button"
       span.font-semibold.flex-1 id="#{icon_id}" class="#{menu.items.present? ? '' : 'text-gray-200'}"
         i class=icon
 
   - if menu.items.present?
-    ul.hidden.z-10.bg-white.dark:bg-gray-400.border.dark:border-gray-800.rounded-md.shadow-lg.min-w-max data-satis-menu-target="submenu" data-satis-menu-submenu-placement="bottom"
+    ul.sts-menu__items.hidden data-satis-menu-target="submenu" data-satis-menu-submenu-placement="bottom"
       - menu.items.each do |item|
         = render(Satis::MenuItem::Component.new(item: item))
 

data/app/components/satis/menu/component.scss

@@ -0,0 +1,9 @@
+.sts-menu {
+  &__button {
+    @apply h-8 w-8 inline-flex items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:text-gray-500;
+  }
+
+  &__items {
+    @apply z-10 bg-white dark:bg-gray-400 border dark:border-gray-800 rounded-md shadow-lg min-w-max;
+  }
+}

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

@@ -35,6 +35,7 @@ export default class extends ApplicationController {
       this.submenuTarget.setAttribute("data-show", "")
       this.popperInstance.update()
     }
+    event.stopPropagation()
   }
 
   hide(event) {
@@ -42,6 +43,7 @@ export default class extends ApplicationController {
       this.submenuTarget.classList.add("hidden")
       this.submenuTarget.removeAttribute("data-show")
     }
+    event.stopPropagation()
   }
 
   toggle(event) {

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

@@ -2,10 +2,10 @@ li.rounded-sm.px-3.py-1.hover:bg-gray-100.dark:hover:bg-gray-200.flex.items-cent
   a.cursor-pointer.py-1.w-full.text-left.flex.items-center.outline-none.focus:outline-none href=item.link *item.link_attributes
     - if item.type == :custom
       = render(partial: item.link_attributes[:data][:path], locals: item.link_attributes[:data][:parameters])
-    span.pr-1.flex-shrink-0.w-6
+    span.pr-1.flex-shrink-0.w-6.text-gray-500
       - if item.icon.present?
         i class=item.icon
-    span.pr-1.flex-1
+    span.pr-1.flex-1.text-gray-500
       - unless item.type == :custom
         = item.label
     span.pr-1.flex-shrink-0.w-6

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

@@ -3,7 +3,7 @@
 module Satis
   module Tab
     class Component < Satis::ApplicationComponent
-      attr_reader :options, :name, :icon, :badge, :id, :tab_menu, :selected_tab_index
+      attr_reader :options, :name, :icon, :badge, :id, :tab_menu, :selected_tab_index, :dirty
 
       def initialize(name, *args, &block)
         super
@@ -16,6 +16,7 @@ module Satis
         @tab_menu = options[:tab_menu]
         @block = block
         @selected_tab_index = options[:selected_tab_index]
+        @dirty = options[:dirty]
       end
 
       def responsive?
@@ -26,6 +27,10 @@ module Satis
         options[:selected] == true
       end
 
+      def dirty?
+        options[:dirty] == true
+      end
+
       def title
         options[:title]
       end

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

@@ -6,7 +6,7 @@
         option selected=tab.selected? = ct(".#{tab.name}", scope: [group.to_sym], default: tab.name.to_s.humanize)
   .hidden.sm:block
     .border-b.border-gray-200
-      nav.-mb-px.flex.space-x-8.overflow-x-auto aria-label="Tabs"
+      nav.sts-tabs__nav aria-label="Tabs"
         - tabs.each do |tab|
             a.tab id="#{tab.name}" href="#" aria-current="#{tab.selected? ? "page" : ''}" data-satis-tabs-target="tab" data-action="click->satis-tabs#select"
               - if tab.icon
@@ -20,4 +20,4 @@
   div
     - tabs.each do |tab|
       div id="#{tab.name}-content" class="tab-content #{tab.options[:padding] == false ? '' : 'mt-4'}" data-satis-tabs-target="content"
-        = tab.to_s
+        = tab.to_s

data/app/components/satis/tabs/component.scss

@@ -1,6 +1,14 @@
 .sts-tabs {
+  &__nav {
+    @apply -mb-px flex space-x-4 overflow-x-auto;
+  }
+
   .tab {
-    @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300;
+    @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap px-1 pb-4 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 cursor-pointer;
+
+    a {
+      @apply no-underline text-gray-500 hover:text-gray-700;
+    }
 
     .badge {
       @apply bg-gray-100 text-gray-600 hidden ml-3 rounded-full text-xs font-medium md:inline-block py-0.5 px-2.5;
@@ -12,6 +20,16 @@
       .badge {
         @apply bg-primary-100 text-primary-600;
       }
+
+      a {
+        @apply text-primary-600;
+      }
+    }
+
+    .sts-menu {
+      &__button {
+        @apply h-0 w-0 pl-4;
+      }
     }
 
     &.is-invalid {

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

@@ -48,7 +48,7 @@ export default class extends ApplicationController {
     if (event.srcElement.tagName == "SELECT") {
       index = event.srcElement.selectedIndex
     } else {
-      let clickedTab = event.srcElement.closest("a")
+      let clickedTab = event.srcElement.closest(".tab")
       index = this.tabTargets.findIndex((el) => {
         return el.attributes["id"] === clickedTab.attributes["id"]
       })

data/lib/satis/version.rb

@@ -1,3 +1,3 @@
 module Satis
-  VERSION = "1.0.70"
+  VERSION = "1.0.75"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: satis
 version: !ruby/object:Gem::Version
-  version: 1.0.70
+  version: 1.0.75
 platform: ruby
 authors:
 - Tom de Grunt
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-01-06 00:00:00.000000000 Z
+date: 2023-01-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: browser
@@ -150,6 +150,7 @@ files:
 - app/components/satis/menu/component.html.slim
 - app/components/satis/menu/component.md
 - app/components/satis/menu/component.rb
+- app/components/satis/menu/component.scss
 - app/components/satis/menu/component_controller.js
 - app/components/satis/menu_item/component.html.slim
 - app/components/satis/menu_item/component.rb