feat: refactor type

Author: CCherry07

src/components/PlaceholderWithTracking.tsx

@@ -1,12 +1,12 @@
 import { defineComponent } from 'vue';
 import { trackWindowScroll } from './trackWindowScroll.tsx';
 import PlaceholderWithoutTracking from './PlaceholderWithoutTracking';
-import { PlaceholderWithTrackingPropsFunc } from './interface.ts';
+import { LazyLoadComponentPropsFunc } from './interface.ts';
 const PlaceholderWithTracking = defineComponent({
  compatConfig: { MODE: 3 },
  name: 'PlaceholderWithTracking',
  inheritAttrs: false,
- props: PlaceholderWithTrackingPropsFunc(),
+ props: LazyLoadComponentPropsFunc(),
  setup(props) {
  return () => <PlaceholderWithoutTracking {...props} />;
  },

src/components/PlaceholderWithoutTracking.tsx

@@ -3,12 +3,12 @@ import { computed, onMounted, shallowRef, defineComponent } from 'vue';
 
 import isIntersectionObserverAvailable from '../utils/intersection-observer';
 import { getObserver } from '../utils';
-import { PlaceholderWithoutTrackingPropsFunc } from './interface';
+import { LazyLoadComponentPropsFunc } from './interface';
 
 export default defineComponent({
  name: 'PlaceholderWithoutTracking',
  inheritAttrs: false,
- props: PlaceholderWithoutTrackingPropsFunc(),
+ props: LazyLoadComponentPropsFunc(),
  setup(props, { emit }) {
  const placeholder = shallowRef<HTMLElement>();
  const supportsObserver = computed(
@@ -86,4 +86,4 @@ export default defineComponent({
  );
  };
  },
-}) as DefineComponent<ReturnType<typeof PlaceholderWithoutTrackingPropsFunc>>;
+}) as DefineComponent<ReturnType<typeof LazyLoadComponentPropsFunc>>;

src/components/interface.ts

@@ -68,6 +68,10 @@ export type Effect = 'blur' | 'black-and-white' | 'opacity';
 export const LazyLoadImagePropsFunc = () => {
  return {
  ...LazyLoadComponentPropsFunc(),
+ placeholderSrc: {
+ type: String,
+ default: '',
+ },
  onImageError: {
  type: Function as PropType<(payload: Event) => void>,
  default: () => {},
@@ -76,10 +80,6 @@ export const LazyLoadImagePropsFunc = () => {
  type: String as PropType<Effect>,
  default: '',
  },
- placeholderSrc: {
- type: String,
- default: '',
- },
  wrapperClassName: {
  type: String,
  default: '',
@@ -94,73 +94,3 @@ export const LazyLoadImagePropsFunc = () => {
  },
  };
 };
-
-export const PlaceholderWithoutTrackingPropsFunc = () => ({
- style: {
- type: Object as PropType<Partial<CSSProperties>>,
- default: () => {},
- },
- class: {
- type: String,
- default: '',
- },
- scrollPosition: {
- type: Object as PropType<ScrollPosition>,
- default: null,
- },
- useIntersectionObserver: {
- type: Boolean,
- default: true,
- },
- threshold: {
- type: Number,
- default: 300,
- },
- onVisible: {
- type: Function as PropType<(entry: IntersectionObserverEntry) => void>,
- default: () => {},
- },
- height: {
- type: Number,
- default: 100,
- },
- width: {
- type: Number,
- default: 100,
- },
- placeholder: {
- type: Object as PropType<VueNode>,
- default: () => {},
- },
-});
-
-export const PlaceholderWithTrackingPropsFunc = () => ({
- scrollPosition: {
- type: Object as PropType<ScrollPosition>,
- default: null,
- },
- useIntersectionObserver: {
- type: Boolean,
- default: true,
- },
- threshold: {
- type: Number,
- default: 300,
- },
- onVisible: {
- type: Function as PropType<(entry: IntersectionObserverEntry) => void>,
- default: () => {},
- },
- height: {
- type: Number,
- default: 0,
- },
- width: {
- type: Number,
- default: 0,
- },
- placeholder: {
- type: Object as PropType<VueNode>,
- default: () => {},
- },
-});