feat: conditional image placeholder

Author: vis97c

packages/common-types/src/plugin.ts

@@ -51,6 +51,10 @@ export interface iPluginOptions<ComponentType = unknown> {
 	 * Optional image optimization component
 	 */
 	imageComponent?: ComponentType | string;
+	/**
+	 * Url to an image to be used as placeholder for images that failed to load
+	 */
+	imagePlaceholder?: string;
 	/**
 	 * Host that contain images
 	 * Treat the url within them as images

packages/common-types/src/values.ts

@@ -50,6 +50,11 @@ export interface iProperty<
 	 * Render using this component instead
 	 */
 	component?: ComponentType;
+	/**
+	 * Url to an image to be used as placeholder for images that failed to load
+	 * Overrides the plugin's imagePlaceholder
+	 */
+	imagePlaceholder?: string;
 }
 
 export type tPropertyOrderFn = (a: [string, any], b: [string, any]) => -1 | 0 | 1;

packages/components-vue/src/components/base/Img.vue

@@ -1,13 +1,15 @@
 <template>
-	<component :is="imageComponent" v-bind="{ ...$attrs, ...props }" />
+	<component
+		:is="imageComponent"
+		v-bind="{ ...$attrs, ...props }"
+		:placeholder="placeholder || imagePlaceholder"
+	/>
 </template>
 
 <script setup lang="ts">
 	import { type PropType, inject } from "vue";
 
-	import type { iPluginOptions } from "@open-xamu-co/ui-common-types";
-
-	import type { vComponent } from "../../types/plugin";
+	import type { iVuePluginOptions } from "../../types/plugin";
 
 	/**
 	 * Img Prototype
@@ -39,7 +41,15 @@
 			type: String as PropType<"eager" | "lazy">,
 			default: "lazy",
 		},
+		/**
+		 * Url to an image to be used as placeholder for images that failed to load
+		 * Overrides the plugin's imagePlaceholder
+		 */
+		placeholder: {
+			type: String,
+			default: null,
+		},
 	});
 
-	const { imageComponent = "img" } = inject<iPluginOptions<vComponent>>("xamu") || {};
+	const { imageComponent = "img", imagePlaceholder } = inject<iVuePluginOptions>("xamu") || {};
 </script>

packages/components-vue/src/components/box/Action.vue

@@ -12,6 +12,7 @@
 				class="--bgColor-light --width-100 --height-100"
 				:src="src"
 				:alt="label"
+				:placeholder="imagePlaceholder"
 			/>
 		</div>
 		<p>
@@ -62,6 +63,11 @@
 		 * @required true
 		 */
 		label: string;
+		/**
+		 * Url to an image to be used as placeholder for images that failed to load
+		 * Overrides the plugin's imagePlaceholder
+		 */
+		imagePlaceholder?: string;
 	}
 
 	/**

packages/components-vue/src/components/value/Simple.vue

@@ -45,7 +45,13 @@
 			:href="value"
 			target="_blank"
 		>
-			<BaseImg preset="avatar" :src="value" :alt="value" class="--bgColor-none" />
+			<BaseImg
+				preset="avatar"
+				:src="value"
+				:alt="value"
+				:placeholder="property?.imagePlaceholder"
+				class="--bgColor-none"
+			/>
 		</BaseAction>
 		<!-- String, URL -->
 		<ActionLink