feat: add inheritAttrs option to components that include ClientOnly (#697)

plugins/plugin-md-power/src/client/components/CodeSandbox.vue

@@ -2,6 +2,10 @@
 import type { CodeSandboxTokenMeta } from '../../shared/index.js'
 import { computed } from 'vue'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = defineProps<CodeSandboxTokenMeta>()
 
 const EMBED_LINK = 'https://codesandbox.io/embed/'
@@ -37,9 +41,10 @@ const source = computed(() => {
     <iframe
       :src="source" class="code-sandbox-iframe" :title="title || 'CodeSandbox'" :allow="ALLOW" :sandbox="SANDBOX"
       :style="{ width, height }"
+      v-bind="$attrs"
     />
   </ClientOnly>
-  <p v-else>
+  <p v-else v-bind="$attrs">
     <a class="code-sandbox-link no-icon" :href="source" target="_blank" rel="noopener noreferrer" :aria-label="title || 'CodeSandbox'">
       <svg xmlns="http://www.w3.org/2000/svg" width="165" height="32" viewBox="0 0 165 32" fill="none">
         <rect width="165" height="32" rx="4" fill="#E3FF73" />

plugins/plugin-md-power/src/client/components/Replit.vue

@@ -4,6 +4,10 @@ import { useDarkMode } from '@vuepress/helper/client'
 import { computed, ref } from 'vue'
 import Loading from './icons/Loading.vue'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = defineProps<ReplitTokenMeta>()
 
 // magic height
@@ -37,6 +41,7 @@ function onload() {
       :src="link"
       :title="title || 'Replit'"
       :style="{ width, height }"
+      v-bind="$attrs"
       allowtransparency="true"
       allowfullscree="true"
       @load="onload"

plugins/plugin-md-power/src/client/components/VPVideoEmbed.vue

@@ -2,6 +2,10 @@
 import { toRefs } from 'vue'
 import { useSize } from '../composables/size.js'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = defineProps<{
   src: string
   title: string
@@ -26,6 +30,7 @@ const { el, width, height, resize } = useSize(options)
       :src="src"
       :title="title || type"
       :style="{ width, height }"
+      v-bind="$attrs"
       :allow="IFRAME_ALLOW"
       @load="resize"
     />

theme/src/client/components/VPEncryptGlobal.vue

@@ -4,6 +4,10 @@ import VPFooter from '@theme/VPFooter.vue'
 import { computed } from 'vue'
 import { useData } from '../composables/index.js'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const { theme, site } = useData()
 
 const profile = computed(() => theme.value.profile)
@@ -12,7 +16,7 @@ const title = computed(() => profile.value?.name || site.value.title)
 
 <template>
   <ClientOnly>
-    <div class="vp-global-encrypt">
+    <div class="vp-global-encrypt" v-bind="$attrs">
       <div class="global-encrypt-container">
         <div v-if="profile || title" class="profile">
           <p v-if="profile" class="avatar" :class="{ circle: profile.circle }">

theme/src/client/components/VPEncryptPage.vue

@@ -2,12 +2,16 @@
 import VPEncryptForm from '@theme/VPEncryptForm.vue'
 import { useData } from '../composables/index.js'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const { theme, frontmatter } = useData<'post'>()
 </script>
 
 <template>
   <ClientOnly>
-    <div class="vp-page-encrypt">
+    <div class="vp-page-encrypt" v-bind="$attrs">
       <div class="logo">
         <span class="vpi-lock icon-lock-head" />
       </div>

theme/src/client/components/VPIconify.vue

@@ -5,6 +5,10 @@ import { Icon as OfflineIcon } from '@iconify/vue/offline'
 import { computed, ref, watch } from 'vue'
 import { useIconsData } from '../composables/index.js'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = defineProps<{
   name: string
   size?: { width?: string, height?: string }
@@ -49,9 +53,10 @@ if (!__VUEPRESS_SSR__)
     :style="{ color, ...size }"
     aria-hidden
     data-provider="iconify"
+    v-bind="$attrs"
   />
   <ClientOnly v-else>
-    <span v-if="!loaded" class="vp-icon iconify" :style="{ color, ...size }" />
+    <span v-if="!loaded" class="vp-icon iconify" :style="{ color, ...size }" v-bind="$attrs" />
     <OfflineIcon
       v-else-if="icon"
       class="vp-icon iconify"

theme/src/client/features/components/RepoCard.vue

@@ -3,6 +3,10 @@ import { toRef } from 'vue'
 import { ClientOnly } from 'vuepress/client'
 import { useGithubRepo } from '../composables/repo.js'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<{
   repo: string
   fullname?: boolean
@@ -13,7 +17,7 @@ const { loaded, data } = useGithubRepo(toRef(props, 'repo'), toRef(props, 'provi
 
 <template>
   <ClientOnly>
-    <div v-if="loaded && data?.name" class="vp-repo-card">
+    <div v-if="loaded && data?.name" class="vp-repo-card" v-bind="$attrs">
       <p class="repo-name">
         <span :class="`vpi-${provider}-repo`" />
         <span class="repo-link">

theme/src/client/features/components/Swiper.vue

@@ -53,6 +53,10 @@ interface Props {
   swipe?: boolean // 是否可以鼠标拖动
 }
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<Props>(), {
   width: '100%',
   height: '100%',