chore: update vue

README.md

@@ -35,7 +35,6 @@ yarn add vue-ari
 import { Popover, PopoverDisclosure, usePopoverState } from 'vue-ari'
 
 export default {
-  name: 'AppButton',
   components: {
     Popover,
     PopoverDisclosure,
@@ -76,7 +75,6 @@ Ari components don't include styling by default. This gives you the ability to a
 import { Popover, PopoverDisclosure, usePopoverState } from 'vue-ari'
 
 export default {
-  name: 'App',
   components: {
     Popover,
     PopoverDisclosure,

examples/src/PopoverContent.vue

@@ -1,18 +1,18 @@
 <template>
-  <Popover v-bind="popover" :as="AppCard" class="max-w-xs">
+  <APopover v-bind="popover" :as="AppCard" class="max-w-xs">
     <slot />
-  </Popover>
+  </APopover>
 </template>
 
 <script>
 import { inject, markRaw } from 'vue'
-import { Popover } from 'vue-ari'
+import { Popover as APopover } from 'vue-ari'
 import AppCard from './AppCard.vue'
 
 export default {
   name: 'PopoverContent',
   components: {
-    Popover,
+    APopover,
   },
   setup() {
     const popover = inject('popoverState')

examples/src/PopoverDisclosure.vue

@@ -1,18 +1,18 @@
 <template>
-  <PopoverDisclosure v-bind="popover" :as="AppButton">
+  <APopoverDisclosure v-bind="popover" :as="AppButton">
     <slot />
-  </PopoverDisclosure>
+  </APopoverDisclosure>
 </template>
 
 <script>
 import { inject, markRaw } from 'vue'
-import { PopoverDisclosure } from 'vue-ari'
+import { PopoverDisclosure as APopoverDisclosure } from 'vue-ari'
 import AppButton from './AppButton.vue'
 
 export default {
   name: 'PopoverDisclosure',
   components: {
-    PopoverDisclosure,
+    APopoverDisclosure,
   },
   setup() {
     const popover = inject('popoverState')

package.json

@@ -15,7 +15,7 @@
     "build": "rollup -c"
   },
   "peerDependencies": {
-    "vue": "^3.0.0-rc.3"
+    "vue": "^3.0.0-rc.5"
   },
   "devDependencies": {
     "@ant-design-vue/babel-plugin-jsx": "^1.0.0-beta.3",

src/Dialog/Dialog.ts

@@ -35,7 +35,7 @@ function useHideOnClickOutside(props: DialogProps, ref: Ref<HTMLElement>) {
       `[aria-controls="${baseId}"]`
     )
     if (
-      props.visible &&
+      props.visible.value &&
       !elementIsWithin(getElementFromRef(ref), event.target as HTMLElement) &&
       !elementIsWithin(disclosure, event.target as HTMLElement)
     ) {
@@ -44,7 +44,7 @@ function useHideOnClickOutside(props: DialogProps, ref: Ref<HTMLElement>) {
   }
 
   watch(
-    () => props.visible,
+    () => props.visible.value,
     (visible) => {
       if (visible) {
         document.addEventListener('click', hideOnClickOutside)
@@ -67,7 +67,7 @@ function useHideOnFocusOutside(props: DialogProps, ref: Ref<HTMLElement>) {
       `[aria-controls="${baseId}"]`
     )
     if (
-      props.visible &&
+      props.visible.value &&
       !elementIsWithin(getElementFromRef(ref), event.target as HTMLElement) &&
       !elementIsWithin(disclosure, event.target as HTMLElement)
     ) {
@@ -76,7 +76,7 @@ function useHideOnFocusOutside(props: DialogProps, ref: Ref<HTMLElement>) {
   }
 
   watch(
-    () => props.visible,
+    () => props.visible.value,
     (visible) => {
       if (visible) {
         document.addEventListener('focusin', hideOnFocusOutside)
@@ -98,7 +98,7 @@ function focusFirstFocusable(element: HTMLElement) {
 
 function useHandleToggleFocus(props: DialogProps, ref: Ref<HTMLElement>) {
   watch(
-    () => props.visible,
+    () => props.visible.value,
     (visible) => {
       if (visible) {
         focusFirstFocusable(getElementFromRef(ref))
@@ -108,7 +108,7 @@ function useHandleToggleFocus(props: DialogProps, ref: Ref<HTMLElement>) {
   // Needs to be a 'sync' watcher, so we can check
   // if focus was within the dialog before it is closed
   watch(
-    () => props.visible,
+    () => props.visible.value,
     (visible) => {
       if (!visible && focusIsWithin(getElementFromRef(ref))) {
         const disclosure: HTMLElement = document.querySelector(

src/Dialog/DialogDisclosure.ts

@@ -12,7 +12,7 @@ export function useDialogDisclosure(props: DialogDisclosureProps) {
   const Disclosure = useDisclosure(props)
 
   function handleKeydown(event: KeyboardEvent) {
-    if (event.key === 'Tab' && !event.shiftKey && props.visible) {
+    if (event.key === 'Tab' && !event.shiftKey && props.visible.value) {
       const dialog = document.getElementById(props.baseId)
       const tabbableElements = getTabbableElements(dialog)
       if (tabbableElements.length) {

src/Dialog/__tests__/Dialog.spec.tsx

@@ -1,10 +1,11 @@
+import { ref } from 'vue'
 import { Dialog } from '..'
 import { renderJsx, getByText } from '../../../test/utils'
 
 describe('Dialog', () => {
   it('renders correctly', async () => {
     const { nextTick } = renderJsx(
-      <Dialog baseId="id" visible={false}>
+      <Dialog baseId="id" visible={ref(false)}>
         foo
       </Dialog>
     )
@@ -26,7 +27,7 @@ describe('Dialog', () => {
     const { nextTick } = renderJsx(
       <div>
         container
-        <Dialog baseId="id" visible={false}>
+        <Dialog baseId="id" visible={ref(false)}>
           foo
         </Dialog>
       </div>
@@ -37,7 +38,7 @@ describe('Dialog', () => {
 
   it('renders native attributes', async () => {
     const { nextTick } = renderJsx(
-      <Dialog baseId="id" visible={false} aria-label="bar">
+      <Dialog baseId="id" visible={ref(false)} aria-label="bar">
         foo
       </Dialog>
     )
@@ -49,7 +50,7 @@ describe('Dialog', () => {
     const warn = console.warn
     console.warn = jest.fn()
     renderJsx(
-      <Dialog baseId="id" visible={false} aria-label="bar">
+      <Dialog baseId="id" visible={ref(false)} aria-label="bar">
         foo
       </Dialog>
     )
@@ -59,7 +60,7 @@ describe('Dialog', () => {
 
   it('can overwrite default tabindex', async () => {
     const { nextTick } = renderJsx(
-      <Dialog baseId="id" visible={false} tabindex="0">
+      <Dialog baseId="id" visible={ref(false)} tabindex="0">
         foo
       </Dialog>
     )

src/Dialog/__tests__/DialogDisclosure.spec.tsx

@@ -1,10 +1,11 @@
+import { ref } from 'vue'
 import { DialogDisclosure } from '..'
 import { renderJsx, getByText } from '../../../test/utils'
 
 describe('DialogDisclosure', () => {
   it('renders correctly', async () => {
     const { nextTick } = renderJsx(
-      <DialogDisclosure baseId="id" visible={false}>
+      <DialogDisclosure baseId="id" visible={ref(false)}>
         foo
       </DialogDisclosure>
     )

src/Disclosure/Disclosure.ts

@@ -15,7 +15,7 @@ export function useDisclosure(props: DisclosureProps) {
 
   return {
     ...button,
-    'aria-expanded': computed(() => (props.visible ? 'true' : 'false')),
+    'aria-expanded': computed(() => (props.visible.value ? 'true' : 'false')),
     'aria-controls': props.baseId,
     onClick: props.toggle,
   }

src/Disclosure/DisclosureContent.ts

@@ -18,8 +18,8 @@ export function useDisclosureContent(props: DisclosureContentProps) {
   return {
     ...Box,
     id: props.baseId,
-    style: computed(() => (props.visible ? null : 'display: none;')),
-    hidden: computed(() => (props.visible ? null : true)),
+    style: computed(() => (props.visible.value ? null : 'display: none;')),
+    hidden: computed(() => (props.visible.value ? null : true)),
   }
 }
 

src/Disclosure/__tests__/Disclosure.spec.tsx

@@ -1,10 +1,11 @@
+import { ref } from 'vue'
 import { Disclosure } from '..'
 import { renderJsx, getByText } from '../../../test/utils'
 
 describe('Disclosure', () => {
   it('renders correctly', async () => {
     const { nextTick } = renderJsx(
-      <Disclosure visible={false} baseId="id">
+      <Disclosure visible={ref(false)} baseId="id">
         foo
       </Disclosure>
     )
@@ -22,7 +23,7 @@ describe('Disclosure', () => {
 
   it('renders visible state correctly', async () => {
     const { nextTick } = renderJsx(
-      <Disclosure visible={true} baseId="id">
+      <Disclosure visible={ref(true)} baseId="id">
         foo
       </Disclosure>
     )

src/Disclosure/__tests__/DisclosureContent.spec.tsx

@@ -1,10 +1,11 @@
+import { ref } from 'vue'
 import { DisclosureContent } from '..'
 import { renderJsx, getByText } from '../../../test/utils'
 
 describe('DisclosureContent', () => {
   it('renders correctly', async () => {
     const { nextTick } = renderJsx(
-      <DisclosureContent baseId="id" visible={false}>
+      <DisclosureContent baseId="id" visible={ref(false)}>
         foo
       </DisclosureContent>
     )
@@ -22,7 +23,7 @@ describe('DisclosureContent', () => {
 
   it('renders visible state correctly', async () => {
     const { nextTick } = renderJsx(
-      <DisclosureContent baseId="id" visible={true}>
+      <DisclosureContent baseId="id" visible={ref(true)}>
         foo
       </DisclosureContent>
     )

src/Popover/Popover.ts

@@ -16,7 +16,7 @@ export function usePopover(props: PopoverProps) {
 
   let popper
   watch(
-    () => props.visible,
+    () => props.visible.value,
     (visible) => {
       const disclosureElement = document.querySelector(
         `[aria-controls="${baseId}"]`

src/Popover/README.md

@@ -30,7 +30,6 @@ yarn add vue-ari
 import { Popover, PopoverDisclosure, usePopoverState } from 'vue-ari'
 
 export default {
-  name: 'AppButton',
   components: {
     Popover,
     PopoverDisclosure,
@@ -71,7 +70,6 @@ Ari components don't include styling by default. This gives you the ability to a
 import { Popover, PopoverDisclosure, usePopoverState } from 'vue-ari'
 
 export default {
-  name: 'App',
   components: {
     Popover,
     PopoverDisclosure,

src/Popover/__tests__/Popover.spec.tsx

@@ -1,10 +1,11 @@
+import { ref } from 'vue'
 import { Popover } from '..'
 import { renderJsx, getByText } from '../../../test/utils'
 
 describe('Popover', () => {
   it('renders correctly', async () => {
     const { nextTick } = renderJsx(
-      <Popover baseId="id" visible={false}>
+      <Popover baseId="id" visible={ref(false)}>
         foo
       </Popover>
     )

src/Popover/__tests__/PopoverDisclosure.spec.tsx

@@ -1,10 +1,11 @@
+import { ref } from 'vue'
 import { PopoverDisclosure } from '..'
 import { renderJsx, getByText } from '../../../test/utils'
 
 describe('PopoverDisclosure', () => {
   it('renders correctly', async () => {
     const { nextTick } = renderJsx(
-      <PopoverDisclosure baseId="id" visible={false}>
+      <PopoverDisclosure baseId="id" visible={ref(false)}>
         foo
       </PopoverDisclosure>
     )