feat(use-disclosure): add playground examples

Author: TylerAPfledderer

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

@@ -0,0 +1,20 @@
+<template>
+  <c-button @click="onOpen">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-body>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </c-drawer-body>
+    </c-drawer-content>
+  </c-drawer>
+</template>
+<script setup>
+import { useDisclosure } from "../src/use-disclosure"
+
+const { onOpen, onClose, isOpen } = useDisclosure()
+</script>

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

@@ -0,0 +1,13 @@
+<template>
+  <c-v-stack gap="4">
+    <c-button v-bind="buttonProps">This is a button</c-button>
+    <c-center h="4">
+      <c-box v-bind="disclosureProps">Toggled On with Props!</c-box>
+    </c-center>
+  </c-v-stack>
+</template>
+<script setup lang="ts">
+import { useDisclosure } from "../src/use-disclosure"
+
+const { buttonProps, disclosureProps } = useDisclosure()
+</script>

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

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