Add fruit to API

src/components/Form/ImageUnsplash/ImageUnsplash.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="image-unsplash">
+  <div :class="containerClass" class="image-unsplash">
     <label for="search-unsplash">{{ label }}</label>
     <!-- Loading placeholder -->
     <ImageSkeleton v-if="loading" />
@@ -17,7 +17,13 @@
 
     <!-- Search input -->
     <div class="search-box">
-      <input id="search-unsplash" type="search" :placeholder="placeholder" @change="handleSearch" />
+      <input
+        id="search-unsplash"
+        type="search"
+        :placeholder="placeholder"
+        @change="handleSearch"
+        :required="required"
+      />
     </div>
   </div>
 </template>
@@ -32,6 +38,10 @@ export default {
     ImageSkeleton
   },
   props: {
+    containerClass: {
+      type: String,
+      default: null
+    },
     label: {
       type: String,
       default: "Image (from Unsplash)"
@@ -39,6 +49,10 @@ export default {
     placeholder: {
       type: String,
       default: "Type anything !"
+    },
+    required: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -69,12 +83,6 @@ export default {
 
 <style scoped lang="less">
 .image-unsplash {
-  label {
-    display: block;
-    font-weight: bold;
-    margin-bottom: 0.5rem;
-  }
-
   .preview,
   .skeleton {
     margin-bottom: 1rem;
@@ -104,7 +112,7 @@ export default {
       position: absolute;
       z-index: 1;
       top: 50%;
-      right: 0.3rem;
+      right: 0.5rem;
       width: 24px;
       height: 24px;
       transform: translateY(-50%);