feat(tabs): render all tabs when printing. (#50)

see: #49

---------

Co-authored-by: sapphi-red <49056869+sapphi-red@users.noreply.github.com>

.changeset/hungry-eyes-sin.md

@@ -0,0 +1,5 @@
+---
+'vitepress-plugin-tabs': minor
+---
+
+render all tabs when printing

packages/vitepress-plugin-tabs/src/client/PluginTabs.vue

@@ -5,9 +5,12 @@ import { useTabsSelectedState } from './useTabsSelectedState'
 import { useUid } from './useUid'
 import { useTabLabels } from './useTabLabels'
 import { provideTabsSingleState } from './useTabsSingleState'
+import { useIsPrint } from './useIsPrint'
 
 const props = defineProps<{ sharedStateKey?: string }>()
 
+const isPrint = useIsPrint()
+
 const tabLabels = useTabLabels()
 
 const { selected, select } = useTabsSelectedState(
@@ -59,7 +62,7 @@ provideTabsSingleState({ uid, selected })
         :key="tabLabel"
         role="tab"
         class="plugin-tabs--tab"
-        :aria-selected="tabLabel === selected"
+        :aria-selected="tabLabel === selected && !isPrint"
         :aria-controls="`panel-${tabLabel}-${uid}`"
         :tabindex="tabLabel === selected ? 0 : -1"
         @click="() => selectStable(tabLabel)"

packages/vitepress-plugin-tabs/src/client/PluginTabsTab.vue

@@ -1,19 +1,23 @@
 <script setup lang="ts">
 import { useTabsSingleState } from './useTabsSingleState'
+import { useIsPrint } from './useIsPrint'
 
 defineProps<{ label: string }>()
 
 const { uid, selected } = useTabsSingleState()
+
+const isPrint = useIsPrint()
 </script>
 
 <template>
   <div
-    v-if="selected === label"
+    v-if="selected === label || isPrint"
     :id="`panel-${label}-${uid}`"
     class="plugin-tabs--content"
     role="tabpanel"
     tabindex="0"
     :aria-labelledby="`tab-${label}-${uid}`"
+    :data-is-print="isPrint"
   >
     <slot />
   </div>
@@ -24,6 +28,10 @@ const { uid, selected } = useTabsSingleState()
   padding: 16px;
 }
 
+.plugin-tabs--content[data-is-print='true']:not(:last-child) {
+  border-bottom: 2px solid var(--vp-plugin-tabs-tab-divider);
+}
+
 .plugin-tabs--content > :first-child:first-child {
   margin-top: 0;
 }

packages/vitepress-plugin-tabs/src/client/useIsPrint.ts

@@ -0,0 +1,19 @@
+import { onBeforeMount, onUnmounted, ref } from 'vue'
+
+export const useIsPrint = () => {
+  const matchMedia =
+    typeof window !== 'undefined' ? window.matchMedia('print') : undefined
+  const value = ref(matchMedia?.matches)
+
+  const listener = () => {
+    value.value = matchMedia?.matches
+  }
+  onBeforeMount(() => {
+    matchMedia?.addEventListener('change', listener)
+  })
+  onUnmounted(() => {
+    matchMedia?.removeEventListener('change', listener)
+  })
+
+  return value
+}