feat: add options hideWhenPrint

docs/.vuepress/config.ts

@@ -52,6 +52,7 @@ export default defineUserConfig({
       twitterUser: 'ntnyq',
       fallbackImage: '/hero.png',
       useCustomStyle: false,
+      hideWhenPrint: true,
       extendsNetworks,
     }),
   ],

docs/guide/README.md

@@ -184,6 +184,13 @@ Then you can write styles that suit your theme.
 
 You can take [built-in style](https://github.com/ntnyq/vuepress-plugin-social-share/blob/next/src/client/style.css) as a reference.
 
+### hideWhenPrint
+
+- **type:** `boolean`
+- **default** `false`
+
+Hide all SocialShare (global as well) when print.
+
 ### qrcodeOptions
 
 - **type:** `object`

src/client/components/GlobalSocialShare.ts

@@ -3,15 +3,18 @@ import { usePageFrontmatter } from '@vuepress/client'
 import { socialShareOptions } from '@vuepress/plugin-social-share/options'
 import { SVG_ICON_CLOSE, SVG_ICON_SHARE } from '../utils.js'
 import { SocialShare } from './SocialShare.js'
-import type { SocialShareFrontmatter } from '../../shared/index.js'
+import type {
+  SocialShareFrontmatter,
+  SocialSharePluginOptionsWithDefaults,
+} from '../../shared/index.js'
 
 export const GlobalSocialShare = defineComponent({
   name: 'GlobalSocialShare',
 
   inheritAttrs: true,
 
   setup() {
-    const options = socialShareOptions
+    const options = socialShareOptions as SocialSharePluginOptionsWithDefaults
     const isActive = ref(false)
     const globalRef = ref<HTMLElement>()
     const frontmatter = usePageFrontmatter<SocialShareFrontmatter>()
@@ -74,10 +77,17 @@ export const GlobalSocialShare = defineComponent({
 
     return () =>
       visible.value
-        ? h('div', { class: 'social-share-global', ref: globalRef }, [
-            renderSocialShare(),
-            renderGlobalButton(),
-          ])
+        ? h(
+            'div',
+            {
+              class: [
+                'social-share-global',
+                options.hideWhenPrint && 'social-share-hide-when-print',
+              ],
+              ref: globalRef,
+            },
+            [renderSocialShare(), renderGlobalButton()],
+          )
         : null
   },
 })

src/client/components/SocialShare.ts

@@ -19,7 +19,7 @@ export const SocialShare = defineComponent({
 
   props: {
     networks: {
-      type: Array,
+      type: Array as PropType<string[]>,
       default: () => ['twitter', 'facebook', 'reddit'],
     },
 
@@ -46,6 +46,11 @@ export const SocialShare = defineComponent({
       default: true,
     },
 
+    hideWhenPrint: {
+      type: Boolean,
+      default: false,
+    },
+
     qrcodeOptions: {
       type: Object as PropType<QRCodeOptions>,
       default: () => ({}),
@@ -288,7 +293,11 @@ export const SocialShare = defineComponent({
 
     return () =>
       visible.value
-        ? h('div', { class: 'social-share' }, [renderNetworkList(networkList.value)])
+        ? h(
+            'div',
+            { class: ['social-share', props.hideWhenPrint && 'social-share-hide-when-print'] },
+            [renderNetworkList(networkList.value)],
+          )
         : null
   },
 })

src/client/config.ts

@@ -2,6 +2,7 @@ import { h } from 'vue'
 import { defineClientConfig } from '@vuepress/client'
 import { socialShareOptions } from '@vuepress/plugin-social-share/options'
 import { GlobalSocialShare, SocialShare } from './components/index.js'
+import type { PropType } from 'vue'
 
 declare const __SOCIAL_SHARE_COMPONENT_NAME__: string
 declare const __SOCIAL_SHARE_USE_CUSTOM_STYLE__: boolean
@@ -17,11 +18,11 @@ export default defineClientConfig({
     app.component(__SOCIAL_SHARE_COMPONENT_NAME__, {
       props: {
         tags: {
-          type: Array,
+          type: Array as PropType<string[]>,
         },
 
         networks: {
-          type: Array,
+          type: Array as PropType<string[]>,
         },
 
         isPlain: {

src/client/style.css

@@ -145,3 +145,9 @@
     border-radius: 0.2rem;
   }
 }
+
+@media print {
+  .social-share-hide-when-print {
+    display: none !important;
+  }
+}

src/shared/types.ts

@@ -57,6 +57,7 @@ export interface SocialSharePluginOptions {
   noGlobalSocialShare?: boolean
   qrcodeOptions?: QRCodeToDataURLOptions
   extendsNetworks?: Record<string, SocialShareNetwork>
+  hideWhenPrint?: boolean
 }
 
 export interface SocialSharePluginOptionsWithDefaults