refactor: enhanced WebPreview loading slot functionality

Author: zhouLion

packages/elements/__tests__/web-preview.spec.tsx

@@ -148,10 +148,14 @@ describe('webPreviewBody', () => {
     expect(iframe).toHaveAttribute('sandbox')
   })
 
-  it('renders loading component', () => {
+  it('renders loading slot', () => {
     const screen = render(
       <WebPreview>
-        <WebPreviewBody loading={<div>Loading...</div>} />
+        <WebPreviewBody>
+          {{
+            loading: () => <div>Loading...</div>,
+          }}
+        </WebPreviewBody>
       </WebPreview>,
     )
     expect(screen.getByText('Loading...')).toBeInTheDocument()

packages/elements/src/web-preview/WebPreview.vue

@@ -6,11 +6,9 @@ import {
   provideWebPreviewContext,
 } from './context'
 
-interface Props {
+interface Props extends /* @vue-ignore */ HTMLAttributes {
   class?: HTMLAttributes['class']
   defaultUrl?: string
-  url?: string
-  consoleOpen?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -25,7 +23,7 @@ const emit = defineEmits<{
 }>()
 
 const url = ref(props.defaultUrl)
-const consoleOpen = ref(props.consoleOpen ?? false)
+const consoleOpen = ref(false)
 
 function setUrl(value: string) {
   url.value = value
@@ -46,13 +44,17 @@ provideWebPreviewContext({
   setConsoleOpen,
 })
 
-const classes = computed(() =>
-  cn('flex size-full flex-col rounded-lg border bg-card', props.class),
-)
+const vBind = computed(() => {
+  const { class: _, ...rest } = props
+  return {
+    class: cn('flex size-full flex-col rounded-lg border bg-card', props.class),
+    ...rest,
+  }
+})
 </script>
 
 <template>
-  <div :class="classes" v-bind="$attrs">
+  <div v-bind="vBind">
     <slot />
   </div>
 </template>

packages/elements/src/web-preview/WebPreviewBody.vue

@@ -1,18 +1,21 @@
 <script setup lang="ts">
-import type { HTMLAttributes, VNodeChild } from 'vue'
+import type { IframeHTMLAttributes, VNodeChild } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { computed, useAttrs } from 'vue'
 import { useWebPreviewContext } from './context'
 
-interface Props {
-  class?: HTMLAttributes['class']
+interface Props extends /* @vue-ignore */ IframeHTMLAttributes {
+  class?: IframeHTMLAttributes['class']
   src?: string
-  loading?: VNodeChild
 }
 
 const props = defineProps<Props>()
-const attrs = useAttrs()
 
+defineSlots<{
+  loading: () => VNodeChild
+}>()
+
+const attrs = useAttrs()
 const { url } = useWebPreviewContext()
 
 const frameSrc = computed(() => (props.src ?? url.value) || undefined)
@@ -27,8 +30,6 @@ const frameSrc = computed(() => (props.src ?? url.value) || undefined)
       title="Preview"
       v-bind="attrs"
     />
-    <slot name="loading">
-      <component :is="props.loading" v-if="props.loading" />
-    </slot>
+    <slot name="loading" />
   </div>
 </template>

packages/elements/src/web-preview/WebPreviewNavigation.vue

@@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 
-interface Props {
+interface Props extends /* @vue-ignore */ HTMLAttributes {
   class?: HTMLAttributes['class']
 }