feat(Splitter): expose collapse, expand, and resize on SplitterPanel slot (#1888)

dan-hale · web-flow · commit 9e06b346aee9 · 2025-05-19T13:48:49.000+08:00
diff --git a/packages/core/src/Splitter/SplitterPanel.vue b/packages/core/src/Splitter/SplitterPanel.vue
@@ -74,6 +74,12 @@ defineSlots<{
     isCollapsed: typeof isCollapsed.value
     /** Is the panel expanded */
     isExpanded: typeof isExpanded.value
+    /** If panel is `collapsible`, collapse it fully. */
+    collapse: typeof collapse
+    /** If panel is currently collapsed, expand it to its most recent size. */
+    expand: typeof expand
+    /** Resize panel to the specified percentage (1 - 100). */
+    resize: typeof resize
   }) => any
 }>()
 
@@ -134,23 +140,29 @@ const style = computed(() => getPanelStyle(panelDataRef.value, props.defaultSize
 const isCollapsed = computed(() => isPanelCollapsed(panelDataRef.value))
 const isExpanded = computed(() => !isCollapsed.value)
 
+function collapse() {
+  collapsePanel(panelDataRef.value)
+}
+
+function expand() {
+  expandPanel(panelDataRef.value)
+}
+
+function resize(size: number) {
+  resizePanel(panelDataRef.value, size)
+}
+
 defineExpose({
   /** If panel is `collapsible`, collapse it fully. */
-  collapse: () => {
-    collapsePanel(panelDataRef.value)
-  },
+  collapse,
   /** If panel is currently collapsed, expand it to its most recent size. */
-  expand: () => {
-    expandPanel(panelDataRef.value)
-  },
+  expand,
   /** Gets the current size of the panel as a percentage (1 - 100). */
   getSize() {
     return getPanelSize(panelDataRef.value)
   },
   /** Resize panel to the specified percentage (1 - 100). */
-  resize: (size: number) => {
-    resizePanel(panelDataRef.value, size)
-  },
+  resize,
   /** Returns `true` if the panel is currently collapsed */
   isCollapsed,
   /** Returns `true` if the panel is currently not collapsed */
@@ -174,6 +186,9 @@ defineExpose({
     <slot
       :is-collapsed="isCollapsed"
       :is-expanded="isExpanded"
+      :expand="expand"
+      :collapse="collapse"
+      :resize="resize"
     />
   </Primitive>
 </template>
