refactor(Collapsible, Accordion)!: add unmount prop to help SEO for…

… hidden content
unovue · Jun 19, 2024 · a14f52d · a14f52d
1 parent 8ddcab5
commit a14f52d
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/packages/radix-vue/src/Accordion/AccordionItem.vue b/packages/radix-vue/src/Accordion/AccordionItem.vue
@@ -112,6 +112,7 @@ function handleArrowKey(e: KeyboardEvent) {
     :open="open"
     :as="props.as"
     :as-child="props.asChild"
+    :unmount="rootContext.unmount.value"
     @keydown.up.down.left.right.home.end="handleArrowKey"
   >
     <slot :open="open" />

diff --git a/packages/radix-vue/src/Accordion/AccordionRoot.vue b/packages/radix-vue/src/Accordion/AccordionRoot.vue
@@ -34,6 +34,13 @@ export interface AccordionRootProps<ValidValue = string | string[], ExplicitType
    * @defaultValue "vertical"
    */
   orientation?: DataOrientation
+
+  /**
+   * When `true`, the element will be unmounted on closed state.
+   *
+   * @defaultValue `true`
+   */
+  unmount?: boolean
 }
 
 export type AccordionRootEmits<T extends SingleOrMultipleType = SingleOrMultipleType> = {
@@ -52,6 +59,7 @@ export type AccordionRootContext<P extends AccordionRootProps> = {
   isSingle: ComputedRef<boolean>
   modelValue: Ref<string | undefined | string[]>
   collapsible: boolean
+  unmount: Ref<boolean>
 }
 
 export const [injectAccordionRootContext, provideAccordionRootContext]
@@ -67,6 +75,7 @@ const props = withDefaults(defineProps<AccordionRootProps<ValidValue, ExplicitTy
   disabled: false,
   orientation: 'vertical',
   collapsible: false,
+  unmount: true,
 })
 
 const emits = defineEmits<AccordionRootEmits<ExplicitType>>()
@@ -78,7 +87,7 @@ defineSlots<{
   }) => any
 }>()
 
-const { dir, disabled } = toRefs(props)
+const { dir, disabled, unmount } = toRefs(props)
 const direction = useDirection(dir)
 
 const { modelValue, changeModelValue, isSingle } = useSingleOrMultipleValue(props, emits)
@@ -94,6 +103,7 @@ provideAccordionRootContext({
   collapsible: props.collapsible,
   modelValue,
   changeModelValue,
+  unmount,
 })
 </script>
 

diff --git a/packages/radix-vue/src/Collapsible/CollapsibleContent.vue b/packages/radix-vue/src/Collapsible/CollapsibleContent.vue
@@ -101,7 +101,7 @@ onMounted(() => {
         [`--radix-collapsible-content-width`]: `${width}px`,
       }"
     >
-      <slot v-if="present.value" />
+      <slot v-if="rootContext.unmount.value ? present.value : true" />
     </Primitive>
   </Presence>
 </template>
diff --git a/packages/radix-vue/src/Collapsible/CollapsibleRoot.vue b/packages/radix-vue/src/Collapsible/CollapsibleRoot.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { PrimitiveProps } from '@/Primitive'
-import type { Ref } from 'vue'
+import { type Ref, toRefs } from 'vue'
 import { createContext, useForwardExpose } from '@/shared'
 
 export interface CollapsibleRootProps extends PrimitiveProps {
@@ -10,6 +10,8 @@ export interface CollapsibleRootProps extends PrimitiveProps {
   open?: boolean
   /** When `true`, prevents the user from interacting with the collapsible. */
   disabled?: boolean
+  /** When `true`, the element will be unmounted on closed state. */
+  unmount?: boolean
 }
 
 export type CollapsibleRootEmits = {
@@ -21,6 +23,7 @@ interface CollapsibleRootContext {
   contentId: string
   disabled?: Ref<boolean>
   open: Ref<boolean>
+  unmount: Ref<boolean>
   onOpenToggle: () => void
 }
 
@@ -35,6 +38,7 @@ import { useVModel } from '@vueuse/core'
 const props = withDefaults(defineProps<CollapsibleRootProps>(), {
   open: undefined,
   defaultOpen: false,
+  unmount: true,
 })
 
 const emit = defineEmits<CollapsibleRootEmits>()
@@ -51,12 +55,13 @@ const open = useVModel(props, 'open', emit, {
   passive: (props.open === undefined) as false,
 }) as Ref<boolean>
 
-const disabled = useVModel(props, 'disabled')
+const { disabled, unmount } = toRefs(props)
 
 provideCollapsibleRootContext({
   contentId: '',
   disabled,
   open,
+  unmount,
   onOpenToggle: () => {
     open.value = !open.value
   },