satis 1.0.75 → 2.0.8

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

@@ -0,0 +1,3 @@
+.sts-editor {
+    @apply bg-white h-full sm:rounded-lg sm:shadow dark:bg-gray-800 overflow-hidden;
+}

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

@@ -0,0 +1,5 @@
+.sts-editor data-controller="satis-editor" data-satis-editor-read-only-value=readonly? data-satis-editor-lang-value=lang
+  - if form
+    = form.hidden(attribute, input_html: { value: value, data: { 'satis-editor-target' => 'input' } })
+  - else
+    input type="hidden" value=value data-satis-editor-target="input"

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

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Satis
+  module Editor
+    class Component < ApplicationComponent
+      attr_reader :form, :attribute, :options
+      def initialize(form: nil, attribute: nil, **options)
+        @form = form
+        @attribute = attribute
+        @options = options
+      end
+
+      def readonly?
+        (@options[:readonly].is_a?(TrueClass) || @options[:readonly].is_a?(FalseClass)) ? @options[:readonly] : content?
+      end
+
+      def lang
+        # Mode is there for older code, it's deprecated
+        if @options[:lang]
+          @options[:lang]
+        elsif @options[:mode]
+          case @options[:mode]
+          when 'application/yaml'
+            'yaml'
+          when 'application/json'
+            'json'
+          when 'text/x-ruby'
+            ''
+
+          end
+        end
+      end
+
+      def value
+        if content?
+          html_escape_once(content)
+        elsif options[:input_html]&.[](:value)
+          options[:input_html][:value]
+        elsif form
+          form.object.send(attribute)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,90 @@
+import ApplicationController from 'satis/controllers/application_controller'
+
+import { basicSetup, EditorView } from 'codemirror'
+import { EditorState, Compartment } from '@codemirror/state'
+
+import { json } from '@codemirror/lang-json'
+import { yaml } from '@codemirror/lang-yaml'
+import { liquid } from '@codemirror/lang-liquid'
+import { markdown } from '@codemirror/lang-markdown'
+import { javascript } from '@codemirror/lang-javascript'
+import { html } from '@codemirror/lang-html'
+import { css } from '@codemirror/lang-css'
+import { StateEffect } from '@codemirror/state'
+
+/***
+ * IDE - Editor controller
+ *
+ * Control codemirror
+ */
+export default class EditorComponentController extends ApplicationController {
+  static targets = ['input']
+  static values = {
+    readOnly: { type: Boolean },
+    lang: { type: String },
+    height: { type: String, default: "8rem" },
+    colorScheme: { type: String },
+    colorSchemeDark: { type: String }
+  }
+
+  setTheme (theme) {
+  }
+
+  connect () {
+    super.connect()
+    const self = this
+
+    const fixedHeightEditor = EditorView.theme({
+      '&': { height: this.heightValue, maxHeight: this.heightValue },
+      '.cm-gutter,.cm-content': { minHeight: this.heightValue },
+      '.cm-scroller': { overflow: 'auto' },
+      '&.cm-focused': {
+        outline: 'none',
+      },
+    })
+
+    let language = new Compartment
+
+    this.editor = new EditorView({
+      doc: this.inputTarget.value,
+      extensions: [
+        basicSetup,
+        EditorView.lineWrapping,
+        fixedHeightEditor,
+        EditorState.readOnly.of(this.readOnlyValue),
+        EditorView.updateListener.of((view) => {
+          if (view.docChanged) { this.sync() }
+        })
+      ],
+      parent: this.element,
+    })
+    this.editor.dispatch({
+      effects: StateEffect.appendConfig.of(language.of(this._getLanguage(this.langValue || 'html')))
+    })
+
+    const colorSchemeDark = this.colorSchemeDarkValue
+    const colorScheme = this.colorSchemeValue
+  }
+
+  sync () {
+    this.inputTarget.value = this.editor.state.doc.toString()
+  }
+
+  disconnect () {
+    this.editor.destroy()
+  }
+
+  _getLanguage (lang) {
+    const languageMapping = {
+      'yaml': yaml(),
+      'json': json(),
+      'liquid': liquid(),
+      'markdown': markdown(),
+      'javascript': javascript(),
+      'html': html(),
+      'css': css(),
+    }
+    return languageMapping[lang]
+  }
+
+}

data/app/components/satis/flash_messages/{component.scss → component.css}

@@ -1,7 +1,8 @@
-// Have these here for purging
-// .bg-red-500
-// .bg-green-500
-// .bg-yellow-500
+/* Have these here for purging
+  .bg-red-500
+  .bg-green-500
+  .bg-yellow-500
+*/
 
 .sts-flash-messages {
   &__message_container {

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

@@ -1,6 +1,6 @@
 - if content.present? || options[:content].present? || options[:show_always]
-  div class=options[:class]
-    dt.text-xs.uppercase.text-gray-400 = ct(".#{name}", default: name.to_s.humanize, scope: group)
+  div class=class_name
+    dt.text-xs.uppercase.text-gray-400 = ct(".#{name}", scope: group)
     dd.text-sm.text-gray-900.dark:text-gray-300
       - if options[:icon]
         i.mr-1 class=options[:icon]

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

@@ -28,14 +28,22 @@ module Satis
           @content.to_s.humanize
         when ActiveSupport::SafeBuffer
           @content
-        when String
-          @content.humanize
         when nil
           @placeholder
         else
           @content
         end
       end
+
+      def class_name
+        "satis-info-item #{group}-info-item #{css_class_for_name}-info-item #{options[:class]}"
+      end
+
+      private
+
+      def css_class_for_name
+        name.to_s.dasherize
+      end
     end
   end
 end

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

@@ -0,0 +1,20 @@
+import ApplicationController from "satis/controllers/application_controller"
+
+export default class InputComponentController extends ApplicationController {
+  static targets = ["input"]
+  static values = {}
+
+  connect() {
+    super.connect()
+
+    if (this.hasInputTarget) {
+      document.addEventListener("wheel", function (event) {
+        if (document.activeElement.type === "number" && document.activeElement.classList.contains("noscroll")) {
+          document.activeElement.blur()
+        }
+      })
+    }
+  }
+
+  disconnect() {}
+}

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

@@ -0,0 +1,3 @@
+.satis-input-array {
+
+}

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

@@ -0,0 +1,33 @@
+div.satis-input-array data-controller="satis-input-array" data-satis-input-array-input-name-value="#{options[:value_method].present? ? "#{form.object_name}[#{attribute.to_s}][][#{options[:value_method]}]" : "#{form.object_name}[#{attribute.to_s}][]"}"
+    template data-satis-input-array-target="rowTemplate"
+        .flex data-satis-input-array-target="inputRow"
+            div.flex-auto
+                = text_field_tag  nil, nil, class: 'form-control mt-1', data: { action: "input->satis-input-array#input" }
+            div.flex-none.shrink-0
+                button.w-10.h-full.items-center.hidden.crossButton data-action="click->satis-input-array#removeRow" tabindex="-1"
+                    i.fas.fa-xmark
+                button.w-10.h-full.items-center.plusButton data-action="click->satis-input-array#addRow" tabindex="-1"
+                            i.fas.fa-plus
+
+    div data-satis-input-array-target="rowsContainer"
+        - if options[:value_method].present? 
+            - options[:collection]&.each do |field|
+                .flex data-satis-input-array-target="inputRow"
+                    div.flex-auto
+                        = fields_for "#{form.object_name}[#{attribute.to_s}][]", field do | attr_form |
+                            = attr_form.text_field options[:value_method], class: 'form-control mt-1', data: { action: "input->satis-input-array#input" }
+                    div.flex-none.shrink-0
+                        button.w-10.h-full.items-center.crossButton data-action="click->satis-input-array#removeRow" tabindex="-1"
+                            i.fas.fa-xmark
+                        button.w-10.h-full.items-center.plusButton data-action="click->satis-input-array#addRow" tabindex="-1"
+                            i.fas.fa-plus
+        - else
+            - options[:collection]&.each do |field|
+                .flex data-satis-input-array-target="inputRow"
+                    div.flex-auto
+                        = text_field_tag  "#{form.object_name}[#{attribute.to_s}][]", field, class: 'form-control mt-1'
+                    div.flex-none.shrink-0
+                        button.w-10.h-full.items-center.crossButton data-action="click->satis-input-array#removeRow" tabindex="-1"
+                            i.fas.fa-xmark
+                        button.w-10.h-full.items-center.plusButton data-action="click->satis-input-array#addRow" tabindex="-1"
+                            i.fas.fa-plus            

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Satis
+  module InputArray
+    class Component < Satis::ApplicationComponent
+      attr_reader :form, :attribute, :options
+
+      def initialize(form:, attribute:, **options)
+        super
+
+        @form = form
+        @attribute = attribute
+        @options = options
+        options[:input_html] ||= {}
+      end
+    end
+  end
+end

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

@@ -0,0 +1,54 @@
+import ApplicationController from "satis/controllers/application_controller"
+
+export default class InputArrayComponentController extends ApplicationController {
+  static targets = ["rowsContainer", "inputRow", "rowTemplate", "crossButton", "plusButton"]
+  static values = { inputName: String }
+
+  connect() {
+    super.connect()
+
+    this.updateAddRemoveButtons()
+  }
+
+  disconnect() {}
+
+  removeRow(event) {
+    event.preventDefault()
+    event.currentTarget.parentElement.parentElement.remove()
+
+    this.updateAddRemoveButtons()
+  }
+
+  addRow(event) {
+    event.preventDefault()
+
+    const rowTemplate = this.rowTemplateTarget.content.firstElementChild.cloneNode(true)
+    const inputControl = rowTemplate.querySelector("input")
+    inputControl.setAttribute("name", this.inputNameValue)
+
+    this.rowsContainerTarget.appendChild(rowTemplate)
+
+    this.updateAddRemoveButtons()
+  }
+
+  input(event) {
+    if (
+      Array.from(this.rowsContainerTarget.children).indexOf(event.currentTarget.parentElement.parentElement) + 1 ==
+      this.inputRowTargets.length
+    ) {
+      this.addRow(event)
+    }
+  }
+
+  updateAddRemoveButtons() {
+    this.inputRowTargets.forEach((inputRow, i) => {
+      if (i + 1 == this.inputRowTargets.length) {
+        inputRow.querySelector(".crossButton").classList.add("hidden")
+        inputRow.querySelector(".plusButton").classList.remove("hidden")
+      } else {
+        inputRow.querySelector(".crossButton").classList.remove("hidden")
+        inputRow.querySelector(".plusButton").classList.add("hidden")
+      }
+    })
+  }
+}

data/app/components/satis/map/{component.scss → component.css}

@@ -1,4 +1,4 @@
-@import "leaflet/dist/leaflet";
+@import "../../../assets/stylesheets/satis/components/leaflet.css";
 
 .sts-map {
   margin-bottom: 1rem;

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

@@ -1,2 +1,2 @@
-.satis-map data-controller="satis-map" data-satis-map-urls-value=@urls data-satis-map-longitude-value=@longitude data-satis-map-latitude-value=@latitude data-satis-map-zoom-level-value=@zoom_level data-satis-map-geo-json-url-value=@geo_json_url
+.sts-map data-controller="satis-map" data-satis-map-urls-value=@urls data-satis-map-longitude-value=@longitude data-satis-map-latitude-value=@latitude data-satis-map-zoom-level-value=@zoom_level data-satis-map-geo-json-url-value=@geo_json_url
   .sts-map__map data-satis-map-target="container"

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

@@ -1,8 +1,8 @@
 // map_controller.js
-import ApplicationController from "../../../../frontend/controllers/application_controller"
+import ApplicationController from "satis/controllers/application_controller"
 import L from "leaflet"
 
-export default class extends ApplicationController {
+export default class MapComponentController extends ApplicationController {
   static targets = ["container"]
   static values = { urls: String, latitude: Number, longitude: Number, zoomLevel: Number, geoJsonUrl: String }
 
@@ -17,16 +17,18 @@ export default class extends ApplicationController {
 
     // this.map.setView() etc... as normal.
 
-    // Load layers and setup event handlers, for example:
-    fetch(this.geoJsonUrlValue)
-      .then((response) => response.json())
-      .then((data) => {
-        L.geoJSON(data, {
-          onEachFeature: (feature, layer) => {
-            layer.on("click", () => this.onClick(layer))
-          },
-        }).addTo(this.map)
-      })
+    if(this.geoJsonUrlValue) {
+      // Load layers and setup event handlers, for example:
+      fetch(this.geoJsonUrlValue)
+        .then((response) => response.json())
+        .then((data) => {
+          L.geoJSON(data, {
+            onEachFeature: (feature, layer) => {
+              layer.on("click", () => this.onClick(layer))
+            },
+          }).addTo(this.map)
+        })
+    }
   }
 
   disconnect() {

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

@@ -1,4 +1,4 @@
-div.sts-menu 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"
   - if content
     = content
   - else
@@ -7,7 +7,6 @@ div.sts-menu data-controller="satis-menu" data-action="#{menu.event}->satis-menu
         i class=icon
 
   - if menu.items.present?
-    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))
-
+    - menu_items_class = menu.show_scroll ? 'sts-menu__items hidden max-h-96 overflow-y-auto' : 'sts-menu__items hidden'
+    ul class=menu_items_class data-satis-menu-target="submenu" data-satis-menu-submenu-placement="bottom" data-satis-menu-submenu-strategy="#{strategy}"
+      = render(Satis::MenuItem::Component.with_collection(menu.items))

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

@@ -4,13 +4,18 @@ module Satis
   module Menu
     class Component < Satis::ApplicationComponent
       # renders_many :tabs, Tab::Component
-      attr_reader :menu, :icon, :icon_id
+      attr_reader :menu, :icon, :icon_id, :strategy
 
-      def initialize(menu, icon: nil, icon_id: nil)
+      def initialize(menu, icon: nil, icon_id: nil, strategy: "fixed")
         super
         @menu = menu
-        @icon = icon || 'fa-solid fa-ellipsis-vertical'
+        @icon = icon || "fa-solid fa-ellipsis"
         @icon_id = icon_id
+        @strategy = strategy
+      end
+
+      def render?
+        menu.items.present?
       end
     end
   end

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

@@ -1,64 +1,186 @@
-import ApplicationController from "../../../../frontend/controllers/application_controller"
-// FIXME: Is this full path really needed?
-import { debounce } from "../../../../frontend/utils"
-import { createPopper } from "@popperjs/core"
+import ApplicationController from "satis/controllers/application_controller"
+import {createPopper} from "@popperjs/core"
 
-export default class extends ApplicationController {
-  static targets = ["submenu", "toggle"]
+
+export default class MenuComponentController extends ApplicationController {
+  static targets = ["submenu", "toggle", "clear"]
 
   connect() {
     super.connect()
 
     if (this.hasSubmenuTarget) {
+      window.process = {
+        env: {
+          NODE_ENV: "production"
+        }
+      }
       this.popperInstance = createPopper(this.element, this.submenuTarget, {
-        offset: [-20, 2],
         placement: this.submenuTarget.getAttribute("data-satis-menu-submenu-placement") || "auto",
+        strategy: this.submenuTarget.getAttribute("data-satis-menu-submenu-strategy") || "fixed",
         modifiers: [
+          { name: "offset", options: { offset: [0, 0] } },
           {
             name: "flip",
             enabled: true,
             options: {
-              boundary: this.element.closest(".satis-card"),
+              fallbackPlacements: ["bottom"],
+              boundary: this.element.closest(".table-wrp") || this.element.closest(".sts-card"),
             },
           },
           {
             name: "preventOverflow",
+            options: {
+              boundary: this.element.closest(".table-wrp") || this.element.closest(".sts-card"),
+              tetherOffset: ({ popper, reference, placement }) => {
+                // always touch full side of the boundary
+                switch (placement) {
+                  case 'left':
+                  case 'right':
+                    return reference.height
+                  case 'top':
+                  case 'bottom':
+                    return reference.width
+                  default:
+                    return 0;
+                }
+              }
+            },
           },
         ],
       })
+      this.popperInstance.state.elements.popper.popperInstance = () => this.popperInstance
+
+      this.mutationObserver = new MutationObserver((mutationsList, observer) => {
+        this.updateBoundary()
+      });
+      this.mutationObserver?.observe(this.popperInstance.state.elements.popper, {
+        childList: true,
+        subtree: true,
+        attributes: true
+      });
+
+    }
+
+    if (this.hasClearTarget) {
+      if (this.clearTarget.id == this.clearTarget.dataset.clear_id) {
+        this.clearTarget.classList.toggle("hidden")
+      }
+    }
+
+    this.boundClickOutside = this.clickOutside.bind(this)
+
+    this.boundMouseleave = this.hide.bind(this)
+    this.element.addEventListener("mouseleave", this.boundMouseleave)
+  }
+
+  disconnect() {
+    super.disconnect()
+    if (this.hasSubmenuTarget) {
+      this.popperInstance.destroy()
+      document.removeEventListener("click", this.boundClickOutside)
+      this.element.removeEventListener("mouseleave", this.boundMouseleave)
     }
+    this.mutationObserver?.disconnect()
   }
 
   show(event) {
-    if (this.hasSubmenuTarget && (!this.hasToggleTarget || (this.hasToggleTarget && this.toggledOn))) {
-      this.submenuTarget.classList.remove("hidden")
-      this.submenuTarget.setAttribute("data-show", "")
-      this.popperInstance.update()
-    }
+    if (this.hasSubmenuTarget && !this.submenuTarget.hasAttribute("data-show") && (!this.hasToggleTarget || (this.hasToggleTarget && this.toggledOn))) {
+        this.submenuTarget.classList.remove("hidden")
+        this.submenuTarget.setAttribute("data-show", "")
+        this.popperInstance.update()
+        this.element.querySelectorAll("[data-popper-reference-hidden]").forEach(element => {
+          if (element.hasOwnProperty("popperInstance")) {
+            element.popperInstance().update()
+          }
+        })
+
+        const firstInputElement = this.popperInstance.state.elements.popper.querySelector('form input:not([type="hidden"])')
+        const length = firstInputElement?.value.length;
+        firstInputElement?.setSelectionRange(length, length);
+        firstInputElement?.focus()
+
+        document.addEventListener("click", this.boundClickOutside)
+      }
     event.stopPropagation()
   }
 
   hide(event) {
-    if (this.hasSubmenuTarget) {
+    if(event && event.type === "mouseleave" &&
+      (event.target?.getAttribute("data-act-table-target") === "loadingOverlay" ||
+      event.relatedTarget?.getAttribute("data-act-table-target") === "loadingOverlay")){
+      return
+    }
+
+    if (this.hasSubmenuTarget && this.submenuTarget.hasAttribute("data-show")) {
       this.submenuTarget.classList.add("hidden")
       this.submenuTarget.removeAttribute("data-show")
+
+      const boundary = this.element.closest(".table-wrp")
+      if (boundary) {
+        boundary.style.minHeight = null;
+      }
+
+      document.removeEventListener("click", this.boundClickOutside)
     }
-    event.stopPropagation()
+    //event?.stopPropagation()
   }
 
   toggle(event) {
     if (this.hasToggleTarget) {
       this.toggleTarget.classList.toggle("hidden")
-      this.triggerEvent(this.toggleTarget, "toggle", { toggled: !this.toggleTarget.classList.contains("hidden"), id: this.toggleTarget.getAttribute("id") })
+      this.triggerEvent(this.toggleTarget, "toggle", {
+        toggled: !this.toggleTarget.classList.contains("hidden"),
+        id: this.toggleTarget.getAttribute("id"),
+      })
       if (this.toggleTarget.classList.contains("hidden")) {
         this.hide(event)
       } else {
         this.show(event)
       }
     }
+
+    if (this.hasClearTarget) {
+      let elements = document.getElementsByClassName('clear-icon')
+      Array.from(elements).forEach(function (element) {
+        element.classList.add('hidden')
+      });
+
+      if ((event.currentTarget != this.clearTarget && this.clearTarget.classList.contains("hidden")) ||
+        (event.currentTarget == this.clearTarget && !this.clearTarget.classList.contains("hidden"))) {
+        this.clearTarget.classList.toggle("hidden")
+      }
+    }
+  }
+
+
+  updateBoundary() {
+    const boundary = this.element.closest(".table-wrp")
+    if (!boundary) return
+    const maxHeight = parseInt(window.getComputedStyle(boundary).maxHeight.replace("px", ""))
+    const popperElement = this.popperInstance.state.elements.popper
+    if (!popperElement || popperElement.hasAttribute("data-popper-reference-hidden")) return
+
+    // ensure the boundary fits the popper by changing its min-height
+    const popperHeight = popperElement.scrollHeight
+    const popperTopRelativeToBoundary = popperElement.getBoundingClientRect().top - boundary.getBoundingClientRect().top
+    const scrollTop = popperElement.scrollTop
+    const newHeight = scrollTop + popperTopRelativeToBoundary + popperHeight + 20
+    const minimumHeight = Math.min(newHeight, maxHeight)
+    if (boundary.offsetHeight < minimumHeight) {
+      boundary.style.minHeight = `${minimumHeight}px`
+      setTimeout(() => {
+        boundary.scrollIntoView( { behavior: "instant", block: "nearest", inline: "nearest" })
+      }, 100)
+    }
   }
 
   get toggledOn() {
     return !this.toggleTarget.classList.contains("hidden")
   }
-}
+
+  clickOutside(event) {
+    if (!this.element.contains(event.target)) {
+      this.hide(event)
+    }
+  }
+}

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

@@ -1,20 +1,25 @@
-li.rounded-sm.px-3.py-1.hover:bg-gray-100.dark:hover:bg-gray-200.flex.items-center data-controller="satis-menu" data-action="mouseover->satis-menu#show mouseleave->satis-menu#hide"
+li.rounded-sm.px-3.py-1.hover:bg-gray-100.flex.items-center.dark:bg-gray-900.dark:border-gray-700.dark:hover:bg-gray-700 data-controller="satis-menu" data-action="mouseover->satis-menu#show mouseleave->satis-menu#hide"
   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.text-gray-500
+    span.pr-1.flex-shrink-0.w-6.text-gray-500.dark:text-gray-300
       - if item.icon.present?
-        i class=item.icon
-    span.pr-1.flex-1.text-gray-500
+        - if item.icon.respond_to?(:keys)
+          span class=item.icon.keys.first
+            - item.icon[item.icon.keys.first].each do |si|
+              i class=si
+        - else
+          i class=item.icon
+    span.pr-1.flex-1.text-gray-500.dark:text-gray-300
       - unless item.type == :custom
         = item.label
     span.pr-1.flex-shrink-0.w-6
       - if item.type == :toggle
         i.fal.fa-check.hidden data-satis-menu-target="toggle" id="#{item.id}"
+  - if item.type == :group
+    a.clear-icon.cursor-pointer.text-gray-400.hidden data-satis-menu-target="clear" data-clear="true" id="#{item.type}_#{item.link_attributes[:data][:view_id]}_#{item.link_attributes[:data][:column]}" data=item.link_attributes[:data]
+      i.fas.fa-xmark
 
   - if item.menu
     ul.hidden.bg-white.border.rounded-md.shadow-lg data-satis-menu-target="submenu" data-satis-menu-submenu-placement="left"
-      - item.menu.items.each do |sub_item|
-        = render(Satis::MenuItem::Component.new(item: sub_item))
-
-
+      = render(Satis::MenuItem::Component.with_collection(item.menu.items))