satis 2.1.40 → 2.1.41

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6ddd69c85158a1f192490265d8123601aa127be531b934d424c4fdbd86cc70f6
-  data.tar.gz: d697b3310fa323edc711d67a59a4a88e7d693199958852574da3bbd3bf5a6628
+  metadata.gz: 3eec0a994c04e1229ba122c0c5b8443e24405834a7fa461a4606edd1d21fcc46
+  data.tar.gz: 38216df0a8fbaa32b085a04386b0cb50703ff191f4e25a20ec92f09505756256
 SHA512:
-  metadata.gz: 928bd7eaf9e0cf2ca7a6da48bb8026a2d4a0aac27c758dd9539f04ce9de74cbedd9922ca8e80fd8d0500a8297d177582bda4233bc99815d3b53714d30b850be7
-  data.tar.gz: 216e3e5b8ade1af565de6307ec7d581259fae456658d2e48fdbaab3223e8f32d727dc6e04cc550edcc4822d1b0c9e3dce311f340be7ff0e5d805e3920d7e1f15
+  metadata.gz: 9de946bcc30083902717763eaa4be4ddad6cd2103486c3fa94680ceff2ff07d4a0a0be3e913c5060d6c16f25e82b856749d46c9f659164010075ed95f28f44f1
+  data.tar.gz: 395f70551a7b09aa4f9eaadcebcba2e2fcdd11eb4a586142cfb4e51c8ac153637fe012c6558f6dc49aecc246a0e053724ea87a166e6c36e0630ffd0f4310fc62

data/.gitignore

@@ -12,4 +12,4 @@
 /node_modules/
 .ruby-version
 .npmrc
-Gemfile.lock
+Gemfile.lock

data/app/assets/stylesheets/satis/application.css

@@ -1,6 +1,7 @@
 @import '../../../components/satis/appearance_switcher/component.css';
 @import '../../../components/satis/breadcrumbs/component.css';
 @import '../../../components/satis/card/component.css';
+@import '../../../components/satis/call_to_action/component.css';
 @import '../../../components/satis/color_picker/component.css';
 @import '../../../components/satis/date_time_picker/component.css';
 @import '../../../components/satis/dialog/component.css';
@@ -9,6 +10,7 @@
 @import '../../../components/satis/flash_messages/component.css';
 @import '../../../components/satis/input/component.css';
 @import '../../../components/satis/input_array/component.css';
+@import '../../../components/satis/link_button/component.css';
 @import '../../../components/satis/map/component.css';
 @import '../../../components/satis/menu/component.css';
 @import '../../../components/satis/page/component.css';

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

@@ -0,0 +1,11 @@
+.sts-call-to-action {
+  @apply rounded-md border-gray-100 border-solid border dark:border-gray-700 mb-2 
+}
+
+.sts-call-to-action.regular {
+  @apply bg-white dark:bg-gray-900;
+}
+
+.sts-call-to-action.primary {
+  @apply bg-primary-600;
+}

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

@@ -0,0 +1,25 @@
+.sts-call-to-action class=style
+  .px-6.py-12.sm:px-6.sm:py-16.lg:px-8
+    .mx-auto.max-w-2xl.text-center
+      h2.text-balance.text-4xl.font-semibold.tracking-tight.text-gray-900.sm:text-5xl.dark:text-white
+        = title
+      p.mx-auto.mt-6.max-w-xl.text-pretty.text-lg/8.text-gray-600
+        = description
+      .mt-10.flex.items-center.justify-center.gap-x-6
+        - actions.each do |action|
+          = action
+
+/.bg-primary-600.rounded-md
+  .px-6.py-24.sm:px-6.sm:py-32.lg:px-8
+    .mx-auto.max-w-2xl.text-center
+      h2.text-balance.text-4xl.font-semibold.tracking-tight.text-white.sm:text-5xl
+        | Boost your productivity. Start using our app today.
+      p.mx-auto.mt-6.max-w-xl.text-pretty.text-lg/8.text-primary-200
+        | Incididunt sint fugiat pariatur cupidatat consectetur sit cillum anim id veniam aliqua proident excepteur commodo do ea.
+      .mt-10.flex.items-center.justify-center.gap-x-6
+        a.rounded-md.bg-white.px-3.5.py-2.5.text-sm.font-semibold.text-primary-600.shadow-sm.hover:bg-primary-50.focus-visible:outline.focus-visible:outline-2.focus-visible:outline-offset-2.focus-visible:outline-white[href="#"]
+          | Get started
+        a.text-sm.font-semibold.leading-6.text-white[href="#"]
+          | Learn more 
+          span[aria-hidden="true"]
+            | →

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Satis
+  module CallToAction
+    class Component < Satis::ApplicationComponent
+      renders_many :actions, LinkButton::Component
+
+      attr_reader :identifier, :title, :description, :style
+
+      def initialize(identifier = nil,
+        icon: nil,
+        title: nil,
+        description: nil,
+        style: :regular)
+        super
+
+        @identifier = identifier
+        @title = title
+        @description = description
+        @style = style
+      end
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+a.sts-link-button.button {
+  @apply rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600;
+}
+
+a.sts-link-button.primary {
+  @apply bg-primary-600 hover:bg-primary-500 dark:bg-white dark:text-primary-600;
+}
+
+a.sts-link-button.link {
+  @apply mt-1 text-sm font-semibold leading-6 text-gray-600;
+}

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

@@ -0,0 +1,11 @@
+- if type == :primary
+  a.sts-link-button.button.primary href=url
+    = title
+- if type == :button
+  a.sts-link-button.button href=url
+    = title
+- if type == :link
+  a.sts-link-button.link href=url
+    = title
+    - if icon
+      i.ml-2 aria-hidden="true" class=icon

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

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Satis
+  module LinkButton
+    class Component < Satis::ApplicationComponent
+      attr_reader :title, :url, :icon, :type, :class_names
+      # renders_many :items
+      def initialize(type, title: nil, icon: nil, url: nil)
+        @type = type.to_sym
+        @title = title
+        @icon = icon
+        @url = url
+        @class_names = class_names
+      end
+    end
+  end
+end

data/app/javascript/satis/controllers/fields_for_controller.js

@@ -7,6 +7,7 @@ export default class FieldsForController extends ApplicationController {
     super.connect()
 
     this.boundMonitorChanges = this.monitorChanges.bind(this)
+    this.boundMouseMove = this.mouseMove.bind(this)
     this.addNewLine()
   }
 
@@ -20,30 +21,81 @@ export default class FieldsForController extends ApplicationController {
     })
 
     let tmpNode = event.target.closest(".nested-fields")
+    this.setupNewChild(tmpNode)
+
+    this.addNewLine()
+
+    window.scrollBy(0, this.element.querySelector(".nested-fields").clientHeight)
+  }
+
+  setupNewChild(tmpNode) {
     tmpNode.classList.remove("template")
     tmpNode.querySelectorAll(".association").forEach((item) => {
       if (item.classList.contains("hidden")) {
-        item.classList.remove("hidden")
+        if (!item.querySelector("a[data-action='click->satis-fields-for#cloneAssociation']")) {
+          item.classList.remove("hidden")
+        }
       } else {
-        item.remove()
+        if (!item.querySelector("a[data-action='click->satis-fields-for#cloneAssociation']")) {
+          item.remove()
+        } else {
+          item.classList.add("hidden")
+        }
       }
     })
 
     // Simply replace every child node's attributes value, replacing TEMPLATE
-    let id = new Date().valueOf()
+    let templateId = new Date().valueOf()
+    let templateName = tmpNode.querySelector("span.temp-name").getAttribute("temp_name")
+    tmpNode.querySelector("span.temp-id").setAttribute("temp_id", templateId)
     tmpNode.querySelectorAll("*").forEach((node) => {
       for (let attribute of node.attributes) {
-        attribute.value = attribute.value.replace(/TEMPLATE/g, id)
+        attribute.value = attribute.value.replace(/TEMPLATE-NAME/g, `[${templateName}][${templateId}]`)
+        attribute.value = attribute.value.replace(/TEMPLATE-ID/g, `${templateName}_${templateId}`)
+
+        attribute.value = attribute.value.replace(/TEMPLATE/g, templateId)
       }
     })
 
     tmpNode.querySelectorAll("template").forEach((node) => {
-      node.innerHTML = node.innerHTML.replace(/TEMPLATE/g, id)
+      node.innerHTML = node.innerHTML.replace(/TEMPLATE-NANE/g, `[${templateName}][${templateId}]`)
+      node.innerHTML = node.innerHTML.replace(/TEMPLATE-ID/g, `${templateName}_${templateId}`)
+
+      node.innerHTML = node.innerHTML.replace(/TEMPLATE/g, templateId)
     })
 
-    this.addNewLine()
+    tmpNode.addEventListener("mousemove", this.boundMouseMove)
+  }
 
-    window.scrollBy(0, this.element.querySelector(".nested-fields").clientHeight)
+  cloneAssociation(event) {
+    event.preventDefault()
+
+    let item = event.target.closest(".nested-fields")
+    let templateId = item.querySelector("span.temp-id").getAttribute("temp_id")
+    let templateName = item.querySelector("span.temp-name").getAttribute("temp_name")
+
+    let clonedItem = item.cloneNode(true)
+
+    clonedItem.querySelectorAll("*").forEach((node) => {
+      for (let attribute of node.attributes) {
+        attribute.value = attribute.value.replaceAll(`[${templateName}][${templateId}]`, "TEMPLATE-NAME")
+        attribute.value = attribute.value.replaceAll(`${templateName}_${templateId}`, "TEMPLATE-ID")
+      }
+    })
+
+    //this.insertionPointTarget.appendChild(clonedItem)
+    this.insertionPointTarget.insertBefore(
+        clonedItem,
+        this.insertionPointTarget.childNodes[this.insertionPointTarget.childNodes.length - 1]
+    )
+
+    clonedItem
+        .querySelector("a[data-action='click->satis-fields-for#removeAssociation']")
+        ?.parentElement.classList.remove("hidden")
+    clonedItem
+        .querySelector("a[data-action='click->satis-fields-for#cloneAssociation']")
+        ?.parentElement.classList.add("hidden")
+    this.setupNewChild(clonedItem)
   }
 
   addNewLine() {
@@ -59,6 +111,26 @@ export default class FieldsForController extends ApplicationController {
     }, 500)
   }
 
+  mouseMove(event) {
+    let item = event.target.closest(".nested-fields")
+
+    if (event.altKey) {
+      item
+          .querySelector("a[data-action='click->satis-fields-for#removeAssociation']")
+          ?.parentElement.classList.add("hidden")
+      item
+          .querySelector("a[data-action='click->satis-fields-for#cloneAssociation']")
+          ?.parentElement.classList.remove("hidden")
+    } else {
+      item
+          .querySelector("a[data-action='click->satis-fields-for#removeAssociation']")
+          ?.parentElement.classList.remove("hidden")
+      item
+          .querySelector("a[data-action='click->satis-fields-for#cloneAssociation']")
+          ?.parentElement.classList.add("hidden")
+    }
+  }
+
   monitorChanges(event) {
     if (event?.detail?.src == "satis-dropdown") {
       // Skip events caused by the initial load of a satis-dropdown

data/app/views/shared/_fields_for.html.slim

@@ -5,9 +5,12 @@
 - if template_object
   template data-satis-fields-for-target='template'
     = form.rails_fields_for collection, template_object, child_index: 'TEMPLATE' do |nested_form|
+      - items_name_parts = nested_form.object_name.split(']').map{|x| x.gsub('[', '')}
       .nested-fields.template.py-2.field-for-bg
         = nested_form.input :id, as: :hidden
         = nested_form.input :_destroy, as: :hidden
+        span.hidden.temp-id temp_id=items_name_parts[-1]
+        span.hidden.temp-name temp_name=items_name_parts[-2]
         .grid.grid-cols-12.gap-4
           .col-span-11.fields
             = yield(nested_form)
@@ -15,18 +18,29 @@
             .h-full.w-1.border-r.border-dashed.dark:border-gray-700
             a.text-primary-600.nested-fields_action href="#" data-action='click->satis-fields-for#addAssociation'
               i.fal.fa-plus
+          .hidden.col-span-1.flex.justify-center.items-center.association
+            .h-full.w-1.border-r.border-dashed
+            a.text-primary-600.nested-fields_action href="#" data-action='click->satis-fields-for#cloneAssociation'
+              i.fa-light.fa-copy
           .hidden.col-span-1.flex.justify-center.items-center.association
             .h-full.w-1.border-r.border-dashed.dark:border-gray-700
             a.text-primary-600.nested-fields_action href="#" data-action='click->satis-fields-for#removeAssociation'
               i.fal.fa-trash
 
-= form.rails_fields_for collection do |nested_form|
-  .nested-fields.field-for-bg.py-2
+= form.fields_for collection do |nested_form|
+  - items_name_parts = nested_form.object_name.split(']').map{|x| x.gsub('[', '')}
+  .nested-fields.field-for-bg.py-2 data-action='mousemove->satis-fields-for#mouseMove'
     = nested_form.input :id, as: :hidden
     = nested_form.input :_destroy, as: :hidden
+    span.hidden.temp-id temp_id=items_name_parts[-1]
+    span.hidden.temp-name temp_name=items_name_parts[-2]
     .grid.grid-cols-12.gap-4
       .col-span-11
         = yield(nested_form)
+      .hidden.col-span-1.flex.justify-center.items-center.association
+        .h-full.w-1.border-r.border-dashed
+        a.text-primary-600.nested-fields_action href="#" data-action='click->satis-fields-for#cloneAssociation'
+          i.fa-light.fa-copy
       .col-span-1.flex.justify-center.items-center
         .h-full.w-1.border-r.border-dashed.dark:border-gray-700
         a.text-primary-600.nested-fields_action href="#" data-action='click->satis-fields-for#removeAssociation'

data/lib/satis/helpers/container.rb

@@ -12,6 +12,7 @@ module Satis
         add_helper :avatar, Satis::Avatar::Component
         add_helper :breadcrumbs, Satis::Breadcrumbs::Component
         add_helper :card, Satis::Card::Component
+        add_helper :call_to_action, Satis::CallToAction::Component
         add_helper :editor, Satis::Editor::Component
         add_helper :flash_messages, Satis::FlashMessages::Component
         add_helper :info, Satis::Info::Component
@@ -35,19 +36,19 @@ module Satis
         @browser ||= Browser.new(action_view.request.user_agent)
       end
 
-      def form_for(name, *args, &block)
-        options = args.extract_options!.deep_merge!(html: { data: {} })
+      def form_for(name, *args, &)
+        options = args.extract_options!.deep_merge!(html: {data: {}})
         form_options_defaults!(options)
         update_form_data_options!(options[:html][:data], options)
         args << options.merge(builder: Satis::Forms::Builder)
-        action_view.form_for(name, *args, &block)
+        action_view.form_for(name, *args, &)
       end
 
-      def form_with(model: nil, scope: nil, url: nil, format: nil, **options, &block)
+      def form_with(model: nil, scope: nil, url: nil, format: nil, **options, &)
         options = options.reverse_merge(builder: Satis::Forms::Builder, class: "").deep_merge!(data: {})
         form_options_defaults!(options)
         update_form_data_options!(options[:data], options)
-        action_view.form_with(model: model, scope: scope, url: url, format: format, **options, &block)
+        action_view.form_with(model: model, scope: scope, url: url, format: format, **options, &)
       end
 
       def form_options_defaults!(options)
@@ -71,11 +72,11 @@ module Satis
           original_args = args.dup
           options = args.extract_options!
           instance = if options.key? :variant
-                       variant_component = component.to_s.sub(/::Component$/, "::#{options[:variant].to_s.camelize}::Component").safe_constantize
-                       (variant_component || component).new(*original_args, **kwargs)
-                     else
-                       component.new(*original_args, **kwargs)
-                     end
+            variant_component = component.to_s.sub(/::Component$/, "::#{options[:variant].to_s.camelize}::Component").safe_constantize
+            (variant_component || component).new(*original_args, **kwargs)
+          else
+            component.new(*original_args, **kwargs)
+          end
           instance.original_view_context = action_view
           action_view.render(instance, &block)
         end

data/lib/satis/version.rb

@@ -1,3 +1,3 @@
 module Satis
-  VERSION = "2.1.40"
+  VERSION = "2.1.41"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: satis
 version: !ruby/object:Gem::Version
-  version: 2.1.40
+  version: 2.1.41
 platform: ruby
 authors:
 - Tom de Grunt
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-11-13 00:00:00.000000000 Z
+date: 2024-11-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: browser
@@ -759,6 +759,9 @@ files:
 - app/components/satis/breadcrumbs/crumb.slim
 - app/components/satis/calendar_month/component.html.slim
 - app/components/satis/calendar_month/component.rb
+- app/components/satis/call_to_action/component.css
+- app/components/satis/call_to_action/component.html.slim
+- app/components/satis/call_to_action/component.rb
 - app/components/satis/card/component.css
 - app/components/satis/card/component.html.slim
 - app/components/satis/card/component.rb
@@ -804,6 +807,9 @@ files:
 - app/components/satis/input_array/component.html.slim
 - app/components/satis/input_array/component.rb
 - app/components/satis/input_array/component_controller.js
+- app/components/satis/link_button/component.css
+- app/components/satis/link_button/component.html.slim
+- app/components/satis/link_button/component.rb
 - app/components/satis/map/component.css
 - app/components/satis/map/component.html.slim
 - app/components/satis/map/component.rb