fix: fix close prop

packages/ui-stencil-vue/lib/components.ts

@@ -139,7 +139,7 @@ export const OramaSearchResults = /*@__PURE__*/ defineContainer<JSX.OramaSearchR
 
 export const OramaSlidingPanel = /*@__PURE__*/ defineContainer<JSX.OramaSlidingPanel>('orama-sliding-panel', undefined, [
   'open',
-  'onClosed'
+  'closed'
 ]);
 
 

packages/ui-stencil/src/components.d.ts

@@ -114,7 +114,7 @@ export namespace Components {
         "sections": SearchResultBySection[];
     }
     interface OramaSlidingPanel {
-        "onClosed": () => void;
+        "closed": () => void;
         "open": boolean;
     }
     interface OramaText {
@@ -447,7 +447,7 @@ declare namespace LocalJSX {
         "sections"?: SearchResultBySection[];
     }
     interface OramaSlidingPanel {
-        "onClosed"?: () => void;
+        "closed"?: () => void;
         "open"?: boolean;
     }
     interface OramaText {

packages/ui-stencil/src/components/internal/orama-sliding-panel/orama-sliding-panel.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop, State, h, Element, Watch } from '@stencil/core'
+import { Component, Prop, State, h, Element, Watch, Event } from '@stencil/core'
 import '@phosphor-icons/webcomponents/dist/icons/PhX.mjs'
 
 @Component({
@@ -9,20 +9,17 @@ import '@phosphor-icons/webcomponents/dist/icons/PhX.mjs'
 export class SlideInPanel {
   @Element() el: HTMLElement
   @Prop() open = false
-  @Prop() onClosed: () => void
+  @Prop() closed: () => void
   @State() isOpen: boolean = this.open
 
-  panelRef: HTMLElement
-  buttonRef: HTMLElement
-
   @Watch('open')
   openChanged() {
     this.isOpen = this.open
   }
 
   closePanel() {
-    if (this.onClosed) {
-      this.onClosed()
+    if (this.closed) {
+      this.closed()
     }
     this.isOpen = false
   }
@@ -32,7 +29,6 @@ export class SlideInPanel {
       <div class={{ 'slide-container': true, 'slide-up': this.isOpen }}>
         <div class="slide-container-header">
           <button
-            ref={(el) => (this.buttonRef = el as HTMLElement)}
             onClick={() => this.closePanel()}
             aria-expanded={this.isOpen ? 'true' : 'false'}
             aria-label="Close panel"
@@ -43,14 +39,7 @@ export class SlideInPanel {
             <ph-x size="18" />
           </button>
         </div>
-        <div
-          id="panel"
-          role="region"
-          aria-hidden={!this.isOpen}
-          tabindex="-1"
-          ref={(el) => (this.panelRef = el as HTMLElement)}
-          class="slide-container-inner"
-        >
+        <div id="panel" role="region" aria-hidden={!this.isOpen} tabindex="-1" class="slide-container-inner">
           <slot />
         </div>
       </div>

packages/ui-stencil/src/components/internal/orama-sliding-panel/readme.md

@@ -7,10 +7,10 @@
 
 ## Properties
 
-| Property   | Attribute | Description | Type         | Default     |
-| ---------- | --------- | ----------- | ------------ | ----------- |
-| `onClosed` | --        |             | `() => void` | `undefined` |
-| `open`     | `open`    |             | `boolean`    | `false`     |
+| Property | Attribute | Description | Type         | Default     |
+| -------- | --------- | ----------- | ------------ | ----------- |
+| `closed` | --        |             | `() => void` | `undefined` |
+| `open`   | `open`    |             | `boolean`    | `false`     |
 
 
 ## Dependencies

packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx

@@ -169,7 +169,7 @@ export class SearchBox {
         {this.windowWidth > 1024 && (
           <orama-sliding-panel
             open={globalContext.currentTask === 'chat'}
-            onClose={() => {
+            closed={() => {
               globalContext.currentTask = 'search'
             }}
           >