ariadne_view_components 0.0.18 → 0.0.19

data/app/assets/javascripts/rich-text-area-component.d.ts

@@ -1,4 +1,6 @@
 import { Controller } from '@hotwired/stimulus';
 export default class RichTextArea extends Controller {
+    static targets: string[];
+    readonly editorTargets: [HTMLDivElement];
     connect(): void;
 }

data/app/components/ariadne/ariadne-form-with.d.ts

@@ -0,0 +1,20 @@
+import { Controller } from '@hotwired/stimulus';
+import { TemplateResult } from 'lit-html';
+declare type HTMLFormField = HTMLInputElement | HTMLButtonElement | HTMLSelectElement | HTMLTextAreaElement;
+export default class AriadneFormWith extends Controller {
+    connect(): void;
+    disconnect(): void;
+    onBlur: (event: Event) => void;
+    onSubmit: (event: Event) => void;
+    validateForm(): boolean;
+    validateField(field: HTMLFormField): boolean;
+    shouldValidateField(field: HTMLFormField): boolean;
+    refreshErrorForInvalidField(field: HTMLFormField, isValid: boolean): void;
+    removeExistingErrorMessage(field: HTMLFormField): void;
+    showErrorForInvalidField(field: HTMLFormField): void;
+    buildFieldErrorHtml(field: HTMLFormField): string;
+    get formFields(): HTMLFormField[];
+    get firstInvalidField(): HTMLFormField | undefined;
+    getRenderString: (data: TemplateResult) => string;
+}
+export {};

data/app/components/ariadne/ariadne-form-with.js

@@ -0,0 +1,85 @@
+import { Controller } from '@hotwired/stimulus';
+import { html } from 'lit-html';
+export default class AriadneFormWith extends Controller {
+    constructor() {
+        super(...arguments);
+        this.onBlur = (event) => {
+            this.validateField(event.target);
+        };
+        this.onSubmit = (event) => {
+            var _a;
+            if (!this.validateForm()) {
+                event.preventDefault();
+                (_a = this.firstInvalidField) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
+        this.getRenderString = (data) => {
+            const { strings, values } = data;
+            const v = [...values, ''].map(e => (typeof e === 'object' ? this.getRenderString(e) : e));
+            return strings.reduce((acc, s, i) => acc + s + v[i], '');
+        };
+    }
+    connect() {
+        this.element.setAttribute('novalidate', 'true');
+        this.element.addEventListener('blur', this.onBlur, true);
+        this.element.addEventListener('submit', this.onSubmit);
+        this.element.addEventListener('ajax:beforeSend', this.onSubmit);
+    }
+    disconnect() {
+        this.element.removeEventListener('blur', this.onBlur);
+        this.element.removeEventListener('submit', this.onSubmit);
+        this.element.removeEventListener('ajax:beforeSend', this.onSubmit);
+    }
+    validateForm() {
+        let isValid = true;
+        // Not using `find` because we want to validate all the fields
+        for (const field of this.formFields) {
+            if (this.shouldValidateField(field) && !this.validateField(field))
+                isValid = false;
+        }
+        return isValid;
+    }
+    validateField(field) {
+        if (!this.shouldValidateField(field))
+            return true;
+        const isValid = field.checkValidity();
+        field.classList.toggle('invalid', !isValid);
+        this.refreshErrorForInvalidField(field, isValid);
+        return isValid;
+    }
+    shouldValidateField(field) {
+        return !field.disabled && !['file', 'reset', 'submit', 'button'].includes(field.type);
+    }
+    refreshErrorForInvalidField(field, isValid) {
+        this.removeExistingErrorMessage(field);
+        if (!isValid)
+            this.showErrorForInvalidField(field);
+    }
+    removeExistingErrorMessage(field) {
+        var _a;
+        const fieldContainer = field.closest('.field');
+        if (!fieldContainer)
+            return;
+        const existingErrorMessageElement = fieldContainer.querySelector('.error');
+        if (existingErrorMessageElement) {
+            (_a = existingErrorMessageElement === null || existingErrorMessageElement === void 0 ? void 0 : existingErrorMessageElement.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(existingErrorMessageElement);
+        }
+    }
+    showErrorForInvalidField(field) {
+        field.insertAdjacentHTML('afterend', this.buildFieldErrorHtml(field));
+    }
+    buildFieldErrorHtml(field) {
+        const data = html `<p class="error">${field.validationMessage}</p>`;
+        return this.getRenderString(data);
+    }
+    get formFields() {
+        return Array.from(this.element.children).filter(node => {
+            const data = node.attributes.getNamedItem('data-ariadne-form-field');
+            if ((data === null || data === void 0 ? void 0 : data.value) === 'true')
+                return true;
+        });
+    }
+    get firstInvalidField() {
+        return this.formFields.find(field => !field.checkValidity());
+    }
+}

data/app/components/ariadne/ariadne-form.d.ts

@@ -0,0 +1,22 @@
+import { Controller } from '@hotwired/stimulus';
+import type { TemplateResult } from 'lit-html';
+declare type HTMLFormField = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+export default class AriadneFormWith extends Controller {
+    static targets: string[];
+    readonly formFieldTargets: [HTMLFormField];
+    connect(): void;
+    disconnect(): void;
+    onBlur: (event: Event) => void;
+    onSubmit: (event: Event) => void;
+    validateForm(): boolean;
+    validateField(field: HTMLFormField): boolean;
+    shouldValidateField(field: HTMLFormField): boolean;
+    refreshErrorForInvalidField(field: HTMLFormField, isValid: boolean): void;
+    removeExistingErrorMessage(field: HTMLFormField): void;
+    showErrorForInvalidField(field: HTMLFormField): void;
+    buildFieldErrorHtml(field: HTMLFormField): string;
+    get formFields(): HTMLFormField[];
+    get firstInvalidField(): HTMLFormField | undefined;
+    getRenderString: (data: TemplateResult) => string;
+}
+export {};

data/app/components/ariadne/ariadne-form.js

@@ -0,0 +1,84 @@
+import { Controller } from '@hotwired/stimulus';
+import { html } from 'lit-html';
+export default class AriadneFormWith extends Controller {
+    constructor() {
+        super(...arguments);
+        this.onBlur = (event) => {
+            this.validateField(event.target);
+        };
+        this.onSubmit = (event) => {
+            var _a;
+            if (!this.validateForm()) {
+                event.preventDefault();
+                (_a = this.firstInvalidField) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
+        this.getRenderString = (data) => {
+            const { strings, values } = data;
+            const v = [...values, ''].map(e => (typeof e === 'object' ? this.getRenderString(e) : e));
+            return strings.reduce((acc, s, i) => acc + s + v[i], '');
+        };
+    }
+    connect() {
+        this.element.setAttribute('novalidate', 'true');
+        this.element.addEventListener('blur', this.onBlur, true);
+        this.element.addEventListener('submit', this.onSubmit);
+        this.element.addEventListener('ajax:beforeSend', this.onSubmit);
+    }
+    disconnect() {
+        this.element.removeEventListener('blur', this.onBlur);
+        this.element.removeEventListener('submit', this.onSubmit);
+        this.element.removeEventListener('ajax:beforeSend', this.onSubmit);
+    }
+    validateForm() {
+        let isValid = true;
+        // Not using `find` because we want to validate all the fields
+        for (const field of this.formFields) {
+            if (this.shouldValidateField(field) && !this.validateField(field))
+                isValid = false;
+        }
+        return isValid;
+    }
+    validateField(field) {
+        if (!this.shouldValidateField(field))
+            return true;
+        const isValid = field.checkValidity();
+        field.classList.toggle('invalid', !isValid);
+        this.refreshErrorForInvalidField(field, isValid);
+        return isValid;
+    }
+    shouldValidateField(field) {
+        return (!field.disabled &&
+            !field.classList.contains('ProseMirror') &&
+            !['file', 'reset', 'submit', 'button'].includes(field.type));
+    }
+    refreshErrorForInvalidField(field, isValid) {
+        this.removeExistingErrorMessage(field);
+        if (!isValid)
+            this.showErrorForInvalidField(field);
+    }
+    removeExistingErrorMessage(field) {
+        var _a;
+        const fieldContainer = field.closest('.field');
+        if (!fieldContainer)
+            return;
+        const existingErrorMessageElement = fieldContainer.querySelector('.error');
+        if (existingErrorMessageElement) {
+            (_a = existingErrorMessageElement === null || existingErrorMessageElement === void 0 ? void 0 : existingErrorMessageElement.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(existingErrorMessageElement);
+        }
+    }
+    showErrorForInvalidField(field) {
+        field.insertAdjacentHTML('afterend', this.buildFieldErrorHtml(field));
+    }
+    buildFieldErrorHtml(field) {
+        const data = html `<p class="error">${field.validationMessage}</p>`;
+        return this.getRenderString(data);
+    }
+    get formFields() {
+        return Array.from(this.formFieldTargets);
+    }
+    get firstInvalidField() {
+        return this.formFields.find(field => !field.checkValidity());
+    }
+}
+AriadneFormWith.targets = ['formField'];

data/app/components/ariadne/ariadne.d.ts

@@ -0,0 +1,2 @@
+import './tab-container-component';
+import './time-ago-component';

data/app/components/ariadne/ariadne.js

@@ -0,0 +1,16 @@
+import { Application } from '@hotwired/stimulus';
+import AriadneForm from './ariadne-form';
+import ClipboardCopyComponent from './clipboard-copy-component';
+import RichTextAreaComponent from './rich-text-area-component';
+import SlideoverComponent from './slideover-component';
+import TabNavComponent from './tab-nav-component';
+import TooltipComponent from './tooltip-component';
+import './tab-container-component';
+import './time-ago-component';
+const application = Application.start();
+application.register('clipboard-copy-component', ClipboardCopyComponent);
+application.register('ariadne-form', AriadneForm);
+application.register('rich-text-area-component', RichTextAreaComponent);
+application.register('slideover-component', SlideoverComponent);
+application.register('tab-nav-component', TabNavComponent);
+application.register('tooltip-component', TooltipComponent);

data/app/components/ariadne/base_button.rb

@@ -19,8 +19,8 @@ module Ariadne
     }.freeze
     VALID_SIZES = SIZE_CLASS_MAPPINGS.keys.freeze
 
-    DEFAULT_CLASSES = "ariadne-inline-flex ariadne-items-center ariadne-border ariadne-shadow-sm focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
-    DEFAULT_NUDE_CLASSES = "ariadne-inline-flex focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
+    DEFAULT_CLASSES = "ariadne-items-center ariadne-border ariadne-shadow-sm focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
+    DEFAULT_NUDE_CLASSES = "focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
 
     DEFAULT_SIZE = :md
 

data/app/components/ariadne/clipboard-copy-component.d.ts

@@ -0,0 +1,4 @@
+import { Controller } from '@hotwired/stimulus';
+export default class ClipboardCopyComponent extends Controller {
+    copy(): void;
+}

data/app/components/ariadne/clipboard-copy-component.js

@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus';
+export default class ClipboardCopyComponent extends Controller {
+    copy() {
+        const value = this.element.attributes.getNamedItem('value');
+        const forNode = this.element.attributes.getNamedItem('for');
+        if (value) {
+            navigator.clipboard.writeText(value.value);
+        }
+        else if (forNode) {
+            const node = document.getElementById(forNode.value);
+            navigator.clipboard.writeText((node === null || node === void 0 ? void 0 : node.textContent) || '');
+        }
+        else {
+            // just copy inner text
+            navigator.clipboard.writeText(this.element.textContent || '');
+        }
+    }
+}

data/app/components/ariadne/clipboard_copy_component.d.ts

@@ -0,0 +1,4 @@
+import { Controller } from '@hotwired/stimulus';
+export default class ClipboardCopyComponent extends Controller {
+    copy(): void;
+}

data/app/components/ariadne/clipboard_copy_component.js

@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus';
+export default class ClipboardCopyComponent extends Controller {
+    copy() {
+        const value = this.element.attributes.getNamedItem('value');
+        const forNode = this.element.attributes.getNamedItem('for');
+        if (value) {
+            navigator.clipboard.writeText(value.value);
+        }
+        else if (forNode) {
+            const node = document.getElementById(forNode.value);
+            navigator.clipboard.writeText((node === null || node === void 0 ? void 0 : node.textContent) || '');
+        }
+        else {
+            // just copy inner text
+            navigator.clipboard.writeText(this.element.textContent || '');
+        }
+    }
+}

data/app/components/ariadne/comment_component.html.erb

@@ -4,7 +4,7 @@
       <% tab.text { @public_tab_text } %>
       <% tab.panel(attributes: {:"data-public" => true}) do %>
         <%= ariadne_form_with(url: @url, method: @method, classes: @classes, attributes: @attributes) do |comment_box| %>
-          <div class="ariadne-overflow-hidden ariadne-border ariadne-border-gray-300 ariadne-shadow-sm focus-within:ariadne-border-indigo-500 focus-within:ariadne-ring-1 focus-within:ariadne-ring-indigo-500">
+          <div class="ariadne-overflow-hidden ariadne-border ariadne-border-gray-300 ariadne-shadow-sm">
             <%= hidden_field_tag 'message_public', true %>
             <%= render(Ariadne::RichTextAreaComponent.new(name: :public_bodytext, sr_label: "Select reply type", attributes: { required: true})) %>
             <% comment_box.submit { @submit } %>
@@ -19,7 +19,7 @@
       <% tab.text { @internal_tab_text } %>
       <% tab.panel do %>
         <%= ariadne_form_with(url: @url, method: @method, classes: @classes, attributes: @attributes) do |comment_box| %>
-          <div class="ariadne-overflow-hidden ariadne-border ariadne-border-gray-300 ariadne-shadow-sm focus-within:ariadne-border-indigo-500 focus-within:ariadne-ring-1 focus-within:ariadne-ring-indigo-500">
+          <div class="ariadne-overflow-hidden ariadne-border ariadne-border-gray-300 ariadne-shadow-sm">
             <%= hidden_field_tag 'message_public', false %>
             <%= render(Ariadne::RichTextAreaComponent.new(name: :internal_bodytext, sr_label: "Select reply type", attributes: { required: true})) %>
             <% comment_box.submit { @submit } %>

data/app/components/ariadne/component.rb

@@ -19,6 +19,10 @@ module Ariadne
     BASE_WRAPPER_CLASSES = "ariadne-flex ariadne-flex-col ariadne-h-screen ariadne-justify-between"
     BASE_MAIN_CLASSES = "ariadne-flex-auto"
 
+    # this is defined here for the Tailwind parser to pick up; it can be useful
+    # in situations where hiddenness is defined by a kwarg, eg `selected: false`
+    BASE_HIDDEN_CLASS = "ariadne-hidden"
+
     INVALID_ARIA_LABEL_TAGS = [:div, :span, :p].freeze
 
     private def raise_on_invalid_options?

data/app/components/ariadne/inline_flex_component.rb

@@ -26,7 +26,7 @@ module Ariadne
 
     DEFAULT_TEXT_OPEN_CLASSES = "ariadne-text-state-open"
     DEFAULT_TEXT_CLOSED_CLASSES = "ariadne-text-state-closed"
-    DEFAULT_TEXT_CLASSES = "ariadne-pl-2 ariadne-text-sm ariadne-font-medium ariadne-text-gray-900"
+    DEFAULT_TEXT_CLASSES = "ariadne-pl-2 ariadne-text-sm ariadne-font-medium"
     renders_one :icon, lambda { |tag: :svg, icon:, variant:, size: Ariadne::HeroiconComponent::SIZE_DEFAULT, classes: "", attributes: {}, text_classes: "", text_attributes: {}|
       actual_text_classes = class_names(DEFAULT_TEXT_CLASSES, text_classes)
       Ariadne::HeroiconComponent.new(tag: tag, icon: icon, variant: variant, size: size, classes: classes, attributes: attributes, text_classes: actual_text_classes, text_attributes: text_attributes) { content }
@@ -36,7 +36,7 @@ module Ariadne
       Ariadne::BaseComponent.new(tag: :span, classes: classes, attributes: attributes) { content }
     }
 
-    DEFAULT_LABEL_CLASSES = "ariadne-pl-2 ariadne-text-sm ariadne-font-medium ariadne-text-gray-900"
+    DEFAULT_LABEL_CLASSES = "ariadne-pl-2 ariadne-text-sm ariadne-font-medium"
     renders_one :text, lambda { |classes: "", attributes: {}|
       actual_classes = class_names(DEFAULT_LABEL_CLASSES, classes)
       Ariadne::BaseComponent.new(tag: :span, classes: actual_classes, attributes: attributes) { content }

data/app/components/ariadne/panel_bar_component.html.erb

@@ -5,7 +5,7 @@
         <span class="ariadne-px-6 ariadne-py-4 ariadne-flex ariadne-items-center ariadne-text-sm ariadne-font-medium">
           <%= panel.icon %>
           <span class="ariadne-ml-4 ariadne-text-sm ariadne-font-medium ariadne-text-gray-900"><%= panel.label %></span>
-          <!-- Arrow separator for lg screens and up -->
+          <!-- TODO: fix this -->
           <% if idx + 1 < panels.size %>
             <div class="md:ariadne-block ariadne-hidden ariadne-absolute ariadne-top-0 ariadne-right-0 ariadne-h-full ariadne-w-5" aria-hidden="true">
               <svg class="ariadne-h-full ariadne-w-full ariadne-text-gray-300" viewBox="0 0 22 80" fill="none" preserveAspectRatio="none">

data/app/components/ariadne/panel_bar_component.rb

@@ -40,6 +40,7 @@ module Ariadne
       DEFAULT_ITEM_CLASSES = "ariadne-relative md:ariadne-flex-1 md:ariadne-flex"
       DEFAULT_WRAPPER_CLASSES = "group ariadne-flex ariadne-items-center ariadne-w-full"
 
+      # TODO: fix this
       renders_one :icon, lambda { |static_content = nil, &block|
         next static_content if static_content.present?
 

data/app/components/ariadne/rich-text-area-component.d.ts

@@ -0,0 +1,6 @@
+import { Controller } from '@hotwired/stimulus';
+export default class RichTextArea extends Controller {
+    static targets: string[];
+    readonly editorTargets: [HTMLDivElement];
+    connect(): void;
+}

data/app/components/ariadne/rich-text-area-component.js

@@ -0,0 +1,36 @@
+import { Controller } from '@hotwired/stimulus';
+import { Editor } from '@tiptap/core';
+import { Document } from '@tiptap/extension-document';
+import { Paragraph } from '@tiptap/extension-paragraph';
+import { Text } from '@tiptap/extension-text';
+import DropCursor from '@tiptap/extension-dropcursor';
+import GapCursor from '@tiptap/extension-gapcursor';
+import { History } from '@tiptap/extension-history';
+export default class RichTextArea extends Controller {
+    connect() {
+        for (const editorElement of this.editorTargets) {
+            const pmEditor = new Editor({
+                extensions: [DropCursor, GapCursor, History, Document, Paragraph, Text],
+                content: '',
+                injectCSS: false,
+                element: editorElement,
+                editorProps: {
+                    attributes: {
+                        class: 'ariadne-p-3'
+                    }
+                },
+                parseOptions: {
+                    preserveWhitespace: true
+                }
+            });
+            const tiptapValueContainer = editorElement.previousElementSibling;
+            if (tiptapValueContainer) {
+                const parentForm = editorElement.closest('form');
+                parentForm === null || parentForm === void 0 ? void 0 : parentForm.addEventListener('submit', () => {
+                    tiptapValueContainer.setAttribute('value', pmEditor.getText() || '');
+                });
+            }
+        }
+    }
+}
+RichTextArea.targets = ['editor'];

data/app/components/ariadne/rich-text-area-component.ts

@@ -1,21 +1,34 @@
 import {Controller} from '@hotwired/stimulus'
 
 import {Editor} from '@tiptap/core'
-import {StarterKit} from '@tiptap/starter-kit'
+
+import {Document} from '@tiptap/extension-document'
+import {Paragraph} from '@tiptap/extension-paragraph'
+import {Text} from '@tiptap/extension-text'
+
+import DropCursor from '@tiptap/extension-dropcursor'
+import GapCursor from '@tiptap/extension-gapcursor'
+import {History} from '@tiptap/extension-history'
 
 export default class RichTextArea extends Controller {
+  static targets = ['editor']
+
+  declare readonly editorTargets: [HTMLDivElement]
+
   connect() {
-    const editorElements = document.getElementsByClassName('tiptap-editor')
-    for (const editorElement of editorElements) {
-      new Editor({
-        element: editorElement,
-        extensions: [StarterKit],
+    for (const editorElement of this.editorTargets) {
+      const pmEditor = new Editor({
+        extensions: [DropCursor, GapCursor, History, Document, Paragraph, Text],
         content: '',
+        injectCSS: false,
+        element: editorElement,
         editorProps: {
           attributes: {
-            class:
-              'focus:ariadne-outline-none ariadne-block ariadne-w-full ariadne-resize-none ariadne-p-0 ariadne-pb-2 ariadne-border-none focus:ariadne-ring-0 sm:ariadne-text-sm'
+            class: 'ariadne-p-3'
           }
+        },
+        parseOptions: {
+          preserveWhitespace: true
         }
       })
 
@@ -24,7 +37,7 @@ export default class RichTextArea extends Controller {
         const parentForm = editorElement.closest('form')
 
         parentForm?.addEventListener('submit', () => {
-          tiptapValueContainer.setAttribute('value', editorElement.textContent || '')
+          tiptapValueContainer.setAttribute('value', pmEditor.getText() || '')
         })
       }
     }

data/app/components/ariadne/rich_text_area_component.html.erb

@@ -2,5 +2,5 @@
   <% if @has_form %>
     <input type="hidden" data-tiptap-value-container=true name="<%= @name %>" id="<%= @name %>">
   <% end %>
-  <div class="tiptap-editor"></div>
+  <div class="tiptap-editor" data-rich-text-area-component-target="editor"></div>
 <% end %>

data/app/components/ariadne/slideover-component.d.ts

@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus';
+export default class SlideoverComponent extends Controller {
+    static targets: string[];
+    readonly expandableTarget: HTMLDivElement;
+    readonly expandWrapperTarget: HTMLDivElement;
+    readonly slidePanelTargets: [HTMLDivElement];
+    readonly buttonWrapperTarget: HTMLDivElement;
+    toggle(): void;
+}

data/app/components/ariadne/slideover-component.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus';
+export default class SlideoverComponent extends Controller {
+    toggle() {
+        this.expandableTarget.classList.toggle('ariadne-hidden');
+        for (const slidePanel of this.slidePanelTargets) {
+            slidePanel.classList.toggle('ariadne-hidden');
+        }
+    }
+}
+SlideoverComponent.targets = ['expandable', 'expandWrapper', 'slidePanel', 'buttonWrapper'];

data/app/components/ariadne/slideover-component.ts

@@ -10,17 +10,8 @@ export default class SlideoverComponent extends Controller {
 
   toggle() {
     this.expandableTarget.classList.toggle('ariadne-hidden')
-    this.expandWrapperTarget.classList.toggle('bg-filter-panel')
     for (const slidePanel of this.slidePanelTargets) {
       slidePanel.classList.toggle('ariadne-hidden')
     }
-    this.buttonWrapperTarget.classList.toggle('bg-filter-panel')
-    if (document.getElementById('btnClose')?.classList.contains('ariadne-hidden')) {
-      const formID = this.buttonWrapperTarget.getAttribute('data-slideover-component-form-id')
-      if (formID) {
-        const form = <HTMLFormElement>document.getElementById(formID)
-        form?.submit()
-      }
-    }
   }
 }

data/app/components/ariadne/slideover_component.d.ts

@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus';
+export default class SlideoverComponent extends Controller {
+    static targets: string[];
+    readonly expandableTarget: HTMLDivElement;
+    readonly expandWrapperTarget: HTMLDivElement;
+    readonly slidePanelTargets: [HTMLDivElement];
+    readonly buttonWrapperTarget: HTMLDivElement;
+    toggle(): void;
+}

data/app/components/ariadne/slideover_component.html.erb

@@ -1,11 +1,9 @@
 <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |slideover| %>
-  <div data-slideover-component-target="expandWrapper" class="ariadne-flex ariadne-flex-col ariadne-z-10">
-    <div data-slideover-component-target="expandable" class="ariadne-hidden ariadne-px-3 ariadne-pb-4">
-      <%= content %>
-    </div>
-    <div data-slideover-component-target="buttonWrapper" data-slideover-component-form-id="<%= @form_id %>" class="ariadne-relative ariadne-flex ariadne-justify-center">
-      <%= open_button %>
-      <%= close_button %>
-    </div>
+  <div data-slideover-component-target="expandable" class="ariadne-hidden ariadne-px-3">
+    <%= content %>
+  </div>
+  <div data-slideover-component-target="buttonWrapper" class="ariadne-relative ariadne-flex ariadne-justify-center">
+    <%= open_button %>
+    <%= close_button %>
   </div>
 <% end %>

data/app/components/ariadne/slideover_component.js

@@ -0,0 +1,19 @@
+import { Controller } from '@hotwired/stimulus';
+export default class SlideoverComponent extends Controller {
+    toggle() {
+        var _a;
+        // eslint-disable-next-line no-debugger
+        debugger;
+        this.expandableTarget.classList.toggle('hidden');
+        this.expandWrapperTarget.classList.toggle('bg-filter-panel');
+        for (const slidePanel of this.slidePanelTargets) {
+            slidePanel.classList.toggle('hidden');
+        }
+        this.buttonWrapperTarget.classList.toggle('bg-filter-panel');
+        if ((_a = document.getElementById('btnClose')) === null || _a === void 0 ? void 0 : _a.classList.contains('hidden')) {
+            const form = this.buttonWrapperTarget.closest('form');
+            form === null || form === void 0 ? void 0 : form.submit();
+        }
+    }
+}
+SlideoverComponent.targets = ['expandable', 'expandWrapper', 'slidePanel', 'buttonWrapper'];