Merge remote-tracking branch 'origin/main' into v1

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: [zernonia]

.histoire/package.json

@@ -24,7 +24,7 @@
     "autoprefixer": "^10.4.14",
     "eslint": "^8.43.0",
     "histoire": "^0.16.2",
-    "postcss": "^8.4.26",
+    "postcss": "^8.4.31",
     "tailwindcss": "^3.3.3",
     "vite": "^4.3.9",
     "vue": "^3.3.4"

docs/.vitepress/contributors.ts

@@ -50,6 +50,7 @@ const plainTeamMembers: CoreTeam[] = [
     github: 'zernonia',
     twitter: 'zernonia',
     desc: 'Core team member of Radix Vue',
+    sponsor: 'https://github.com/sponsors/zernonia',
   },
   {
     avatar: contributorsAvatars.khairulhaaziq,

docs/content/components/dialog.md

@@ -226,7 +226,29 @@ Contains content to be rendered in the open dialog
           Event handler called when the escape key is down. It can be prevented by calling <Code>event.preventDefault</Code>.
         </span>
       `,
-    }
+    },
+    {
+      name: '@pointerDownOutside',
+      type: '(event: PointerDownOutsideEvent) => void',
+      typeSimple: 'function',
+      description: `
+        <span>
+          Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling <code>event.preventDefault</code>.
+        </span>
+      `,
+    },
+    {
+      name: '@interactOutside',
+      type: '(event: FocusEvent | MouseEvent | TouchEvent) => void',
+      typeSimple: 'function',
+      description: `
+        <span>
+          Event handler called when an interaction (pointer or focus event)
+          happens outside the bounds of the component. It can be prevented by
+          calling <code>event.preventDefault</code>.
+        </span>
+      `,
+    },
   ]"
 />
 

packages/radix-vue/src/Accordion/AccordionContent.vue

@@ -1,29 +1,28 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import { CollapsibleContent } from '../Collapsible'
-import { ACCORDION_ITEM_INJECTION_KEY } from './AccordionItem.vue'
-import { ACCORDION_INJECTION_KEY } from './AccordionRoot.vue'
+import { injectAccordionItemContext } from './AccordionItem.vue'
+import { injectAccordionRootContext } from './AccordionRoot.vue'
 import type { PrimitiveProps } from '@/Primitive'
 
 export interface AccordionContentProps extends PrimitiveProps {}
 
 const props = defineProps<AccordionContentProps>()
 
-const injectedRoot = inject(ACCORDION_INJECTION_KEY)
-const injectedItem = inject(ACCORDION_ITEM_INJECTION_KEY)
+const rootContext = injectAccordionRootContext()
+const itemContext = injectAccordionItemContext()
 </script>
 
 <template>
   <CollapsibleContent
-    :id="injectedItem?.triggerId"
+    :id="itemContext.triggerId"
     role="region"
-    :open="injectedItem?.open.value"
-    :hidden="!injectedItem?.open.value"
+    :open="itemContext.open.value"
+    :hidden="!itemContext.open.value"
     :as-child="props.asChild"
-    :aria-labelledby="injectedItem?.triggerId"
-    :data-state="injectedItem?.dataState.value"
-    :data-disabled="injectedItem?.dataDisabled.value"
-    :data-orientation="injectedRoot?.orientation"
+    :aria-labelledby="itemContext.triggerId"
+    :data-state="itemContext.dataState.value"
+    :data-disabled="itemContext.dataDisabled.value"
+    :data-orientation="rootContext.orientation"
     style="
       --radix-accordion-content-width: var(--radix-collapsible-content-width);
       --radix-accordion-content-height: var(--radix-collapsible-content-height);

packages/radix-vue/src/Accordion/AccordionHeader.vue

@@ -1,24 +1,23 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { ACCORDION_ITEM_INJECTION_KEY } from './AccordionItem.vue'
-import { ACCORDION_INJECTION_KEY } from './AccordionRoot.vue'
+import { injectAccordionItemContext } from './AccordionItem.vue'
+import { injectAccordionRootContext } from './AccordionRoot.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 export interface AccordionHeaderProps extends PrimitiveProps {}
 
 const props = defineProps<AccordionHeaderProps>()
 
-const injectedRoot = inject(ACCORDION_INJECTION_KEY)
-const injectedItem = inject(ACCORDION_ITEM_INJECTION_KEY)
+const rootContext = injectAccordionRootContext()
+const itemContext = injectAccordionItemContext()
 </script>
 
 <template>
   <Primitive
     :as="props.as || 'h3'"
     :as-child="props.asChild"
-    :data-orientation="injectedRoot?.orientation"
-    :data-state="injectedItem?.dataState.value"
-    :data-disabled="injectedItem?.dataDisabled.value"
+    :data-orientation="rootContext.orientation"
+    :data-state="itemContext.dataState.value"
+    :data-disabled="itemContext.dataDisabled.value"
   >
     <slot />
   </Primitive>

packages/radix-vue/src/Accordion/AccordionItem.vue

@@ -1,7 +1,8 @@
 <script lang="ts" context="module">
-import type { ComputedRef, InjectionKey, VNodeRef } from 'vue'
+import type { ComputedRef, VNodeRef } from 'vue'
 import type { CollapsibleRootProps } from '../Collapsible'
-import { ACCORDION_INJECTION_KEY } from './AccordionRoot.vue'
+import { injectAccordionRootContext } from './AccordionRoot.vue'
+import { createContext, useArrowNavigation, useId } from '@/shared'
 
 enum AccordionItemState {
   Open = 'open',
@@ -23,7 +24,7 @@ export interface AccordionItemProps
   value: string
 }
 
-interface AccordionItemProvideValue {
+interface AccordionItemContext {
   open: ComputedRef<boolean>
   dataState: ComputedRef<AccordionItemState>
   disabled: ComputedRef<boolean>
@@ -34,32 +35,31 @@ interface AccordionItemProvideValue {
   value: ComputedRef<string>
 }
 
-export const ACCORDION_ITEM_INJECTION_KEY
-  = Symbol() as InjectionKey<AccordionItemProvideValue>
+export const [injectAccordionItemContext, provideAccordionItemContext]
+  = createContext<AccordionItemContext>('AccordionItem')
 </script>
 
 <script setup lang="ts">
 import { CollapsibleRoot } from '@/Collapsible'
 import { usePrimitiveElement } from '@/Primitive'
-import { useArrowNavigation, useId } from '@/shared'
-import { computed, inject, provide } from 'vue'
+import { computed } from 'vue'
 
 const props = defineProps<AccordionItemProps>()
 
-const injectedRoot = inject(ACCORDION_INJECTION_KEY)
+const rootContext = injectAccordionRootContext()
 
 const open = computed(() =>
-  injectedRoot?.isSingle.value
-    ? props.value === injectedRoot.modelValue.value
-    : Array.isArray(injectedRoot?.modelValue.value)
-      && !!injectedRoot?.modelValue.value.includes(props.value),
+  rootContext.isSingle.value
+    ? props.value === rootContext.modelValue.value
+    : Array.isArray(rootContext.modelValue.value)
+      && rootContext.modelValue.value.includes(props.value),
 )
 
 const disabled = computed(() => {
   return (
-    injectedRoot?.disabled?.value
+    rootContext.disabled.value
     || props.disabled
-    || (!!injectedRoot?.isSingle.value && open.value && !injectedRoot?.collapsible)
+    || (rootContext.isSingle.value && open.value && !rootContext.collapsible)
   )
 })
 
@@ -71,7 +71,7 @@ const dataState = computed(() =>
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
-provide(ACCORDION_ITEM_INJECTION_KEY, {
+provideAccordionItemContext({
   open,
   dataState,
   disabled,
@@ -85,11 +85,11 @@ provide(ACCORDION_ITEM_INJECTION_KEY, {
 function handleArrowKey(e: KeyboardEvent) {
   useArrowNavigation(
     e,
-    currentElement.value!,
-    injectedRoot?.parentElement.value!,
+    currentElement.value,
+    rootContext.parentElement.value!,
     {
-      arrowKeyOptions: injectedRoot?.orientation,
-      dir: injectedRoot?.direction.value,
+      arrowKeyOptions: rootContext.orientation,
+      dir: rootContext.direction.value,
       focus: true,
     },
   )
@@ -100,7 +100,7 @@ defineExpose({ open })
 
 <template>
   <CollapsibleRoot
-    :data-orientation="injectedRoot?.orientation"
+    :data-orientation="rootContext.orientation"
     :data-disabled="dataDisabled"
     :data-state="dataState"
     :disabled="disabled"

packages/radix-vue/src/Accordion/AccordionRoot.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
-import type { ComputedRef, InjectionKey, Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 import type { DataOrientation, Direction, Type } from '@/shared/types'
-import { useDirection } from '@/shared'
+import { createContext, useDirection } from '@/shared'
 
 export interface AccordionRootProps extends PrimitiveProps {
   /**
@@ -54,11 +54,8 @@ export type AccordionRootEmits = {
   'update:modelValue': [value: string | string[] | undefined]
 }
 
-export const ACCORDION_INJECTION_KEY
-  = Symbol() as InjectionKey<AccordionProvideValue>
-
-export interface AccordionProvideValue {
-  disabled?: Ref<AccordionRootProps['disabled']>
+export type AccordionRootContext = {
+  disabled: Ref<AccordionRootProps['disabled']>
   direction: Ref<AccordionRootProps['dir']>
   orientation: AccordionRootProps['orientation']
   parentElement: Ref<HTMLElement | undefined>
@@ -67,6 +64,9 @@ export interface AccordionProvideValue {
   modelValue: Ref<string | undefined | string[]>
   collapsible: boolean
 }
+
+export const [injectAccordionRootContext, provideAccordionRootContext]
+  = createContext<AccordionRootContext>('AccordionRoot')
 </script>
 
 <script setup lang="ts">
@@ -76,7 +76,7 @@ import {
   usePrimitiveElement,
 } from '@/Primitive'
 import { useSingleOrMultipleValue } from '@/shared/useSingleOrMultipleValue'
-import { computed, provide, toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
 
 const props = withDefaults(defineProps<AccordionRootProps>(), {
   asChild: false,
@@ -93,7 +93,7 @@ const { modelValue, changeModelValue } = useSingleOrMultipleValue(props, emits)
 const { primitiveElement, currentElement: parentElement }
   = usePrimitiveElement()
 
-provide<AccordionProvideValue>(ACCORDION_INJECTION_KEY, {
+provideAccordionRootContext({
   disabled,
   direction,
   orientation: props.orientation,

packages/radix-vue/src/Accordion/AccordionTrigger.vue

@@ -1,38 +1,37 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { ACCORDION_ITEM_INJECTION_KEY } from './AccordionItem.vue'
-import { ACCORDION_INJECTION_KEY } from './AccordionRoot.vue'
+import { injectAccordionItemContext } from './AccordionItem.vue'
+import { injectAccordionRootContext } from './AccordionRoot.vue'
 import { type PrimitiveProps } from '@/Primitive'
 import { CollapsibleTrigger } from '@/Collapsible'
 
 export interface AccordionTriggerProps extends PrimitiveProps {}
 
 const props = defineProps<AccordionTriggerProps>()
 
-const injectedRoot = inject(ACCORDION_INJECTION_KEY)
-const injectedItem = inject(ACCORDION_ITEM_INJECTION_KEY)
+const rootContext = injectAccordionRootContext()
+const itemContext = injectAccordionItemContext()
 
 function changeItem() {
-  if (injectedItem?.disabled.value)
+  if (itemContext.disabled.value)
     return
-  injectedItem && injectedRoot?.changeModelValue(injectedItem.value.value)
+  rootContext.changeModelValue(itemContext.value.value)
 }
 </script>
 
 <template>
   <CollapsibleTrigger
-    :id="injectedItem?.triggerId"
-    :ref="injectedItem?.primitiveElement"
+    :id="itemContext.triggerId"
+    :ref="itemContext.primitiveElement"
     data-radix-vue-collection-item
     :as="props.as"
     :as-child="props.asChild"
-    :aria-controls="injectedItem?.triggerId"
-    :aria-disabled="injectedItem?.disabled.value || undefined"
-    :aria-expanded="injectedItem?.open.value || false"
-    :data-disabled="injectedItem?.dataDisabled.value"
-    :data-orientation="injectedRoot?.orientation"
-    :data-state="injectedItem?.dataState.value"
-    :disabled="injectedItem?.disabled?.value"
+    :aria-controls="itemContext.triggerId"
+    :aria-disabled="itemContext.disabled.value || undefined"
+    :aria-expanded="itemContext.open.value || false"
+    :data-disabled="itemContext.dataDisabled.value"
+    :data-orientation="rootContext.orientation"
+    :data-state="itemContext.dataState.value"
+    :disabled="itemContext.disabled.value"
     @click="changeItem"
   >
     <slot />

packages/radix-vue/src/AlertDialog/AlertDialogCancel.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { inject, onMounted } from 'vue'
-import { ALERT_DIALOG_CONTENT_INJECTION_KEY } from './AlertDialogContent.vue'
+import { onMounted } from 'vue'
+import { injectAlertDialogContentContext } from './AlertDialogContent.vue'
 import { DialogClose, type DialogCloseProps } from '@/Dialog'
 import { usePrimitiveElement } from '@/Primitive'
 
 export interface AlertDialogCancelProps extends DialogCloseProps {}
 
 const props = defineProps<AlertDialogCancelProps>()
-const contentContext = inject(ALERT_DIALOG_CONTENT_INJECTION_KEY)
+const contentContext = injectAlertDialogContentContext()
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
 onMounted(() => {
-  contentContext!.onCancelElementChange(currentElement.value)
+  contentContext.onCancelElementChange(currentElement.value)
 })
 </script>
 

packages/radix-vue/src/AlertDialog/AlertDialogContent.vue

@@ -1,23 +1,24 @@
 <script lang="ts">
-interface AlertDialogContentContextValue {
+import { createContext, useEmitAsProps } from '@/shared'
+
+interface AlertDialogContentContext {
   onCancelElementChange(el: HTMLElement | undefined): void
 }
 
-export const ALERT_DIALOG_CONTENT_INJECTION_KEY
-  = Symbol() as InjectionKey<AlertDialogContentContextValue>
+export const [injectAlertDialogContentContext, provideAlertDialogContentContext]
+  = createContext<AlertDialogContentContext>('AlertDialogContent')
 
 export interface AlertDialogContentProps extends DialogContentProps {}
 export type AlertDialogContentEmits = DialogContentEmits
 </script>
 
 <script setup lang="ts">
-import { type InjectionKey, nextTick, provide, ref } from 'vue'
+import { nextTick, ref } from 'vue'
 import {
   DialogContent,
   type DialogContentEmits,
   type DialogContentProps,
 } from '@/Dialog'
-import { useEmitAsProps } from '@/shared'
 
 const props = defineProps<AlertDialogContentProps>()
 const emits = defineEmits<AlertDialogContentEmits>()
@@ -26,7 +27,7 @@ const emitsAsProps = useEmitAsProps(emits)
 
 const cancelElement = ref<HTMLElement | undefined>()
 
-provide(ALERT_DIALOG_CONTENT_INJECTION_KEY, {
+provideAlertDialogContentContext({
   onCancelElementChange: (el) => {
     cancelElement.value = el
   },