refactor(use-disclosure): update naming to emit methods

Author: TylerAPfledderer

packages/vue-composables/examples/use-disclosure-drawer.vue

@@ -1,10 +1,10 @@
 <template>
-  <c-button @click="onOpen">Open Drawer</c-button>
+  <c-button @click="open">Open Drawer</c-button>
   <c-drawer placement="right" v-model="isOpen">
     <c-drawer-overlay />
     <c-drawer-content>
       <c-drawer-header borderBottomWidth="1px">Basic Drawer</c-drawer-header>
-      <c-drawer-close-button @click="onClose" />
+      <c-drawer-close-button @click="close" />
       <c-drawer-body>
         <p>Some contents...</p>
         <p>Some contents...</p>
@@ -16,5 +16,5 @@
 <script lang="ts" setup>
 import { useDisclosure } from "../src/use-disclosure"
 
-const { onOpen, onClose, isOpen } = useDisclosure()
+const { open, close, isOpen } = useDisclosure()
 </script>

packages/vue-composables/examples/use-disclosure-toggle.vue

@@ -1,6 +1,6 @@
 <template>
   <c-v-stack gap="4">
-    <c-button @click="onToggle">This is a button</c-button>
+    <c-button @click="toggle">This is a button</c-button>
     <c-center h="4">
       <c-box :hidden="!isOpen">Toggled On with onToggle!</c-box>
     </c-center>
@@ -9,5 +9,5 @@
 <script setup lang="ts">
 import { useDisclosure } from "../src/use-disclosure"
 
-const { onToggle, isOpen } = useDisclosure()
+const { toggle, isOpen } = useDisclosure()
 </script>

packages/vue-composables/src/use-disclosure.ts

@@ -33,21 +33,21 @@ export function useDisclosure(props: UseDisclosureProps = {}) {
   const uid = useId()
   const id = computed(() => idProp ?? `disclosure-${uid.value}`)
 
-  const onClose = () => {
+  const close = () => {
     if (!isControlled) {
       isOpenState.value = false
     }
     handleClose?.()
   }
 
-  const onOpen = () => {
+  const open = () => {
     if (!isControlled) {
       isOpenState.value = true
     }
     handleOpen?.()
   }
 
-  const onToggle = () => (isOpen.value ? onClose() : onOpen())
+  const toggle = () => (isOpen.value ? close() : open())
 
   /**
    * Computed object containing the HTML attributes for the button that
@@ -62,7 +62,7 @@ export function useDisclosure(props: UseDisclosureProps = {}) {
     "aria-expanded": isOpen.value,
     "aria-controls": id.value,
     onClick() {
-      onToggle()
+      toggle()
     },
   }))
 
@@ -85,9 +85,9 @@ export function useDisclosure(props: UseDisclosureProps = {}) {
 
   return {
     isOpen,
-    onOpen,
-    onClose,
-    onToggle,
+    open,
+    close,
+    toggle,
     isControlled,
     buttonProps,
     disclosureProps,