feat-#221: tags in CldUploadWidget

Author: Baroshem

docs/content/2.components/CldUploadWidget.md

@@ -1,5 +1,5 @@
 ---
-description: 
+description:
 ---
 
 The CldUploadWidget creates a new instance of the [Cloudinary Upload Widget](https://cloudinary.com/documentation/upload_widget) giving you an easy way to add upload capabilities to your Nuxt app.
@@ -68,12 +68,13 @@ To use the above, create a Node-based API route, add the snippet, and use that e
 
 ## General Props
 
-| Prop Name         | Type     | Example                            |
-| ----------------- | -------- | ---------------------------------- |
-| children          | function | `{ (options) => {} }`              |
-| options           | object   | `{ encryption: {...} }`            |
-| signatureEndpoint | string   | `"/api/sign-cloudinary-params.js"` |
-| uploadPreset      | string   | `"my-upload-preset"`               |
+| Prop Name         | Type   | Example                            |
+| ----------------- | ------ | ---------------------------------- |
+| options           | object | `{ encryption: {...} }`            |
+| signatureEndpoint | string | `"/api/sign-cloudinary-params.js"` |
+| uploadPreset      | string | `"my-upload-preset"`               |
+| config            | object | `{ cloud: {}, url: {} }`           |
+| tags              | array  | `['music', 'sad']`                 |
 
 ## Event Props
 

playground/app.vue

@@ -1,40 +1,38 @@
 <script lang="ts" setup>
 // Usage of `useCldImageUrl` composable
-const { url } = useCldImageUrl({ options: { src: '/cld-sample-5.jpg' } })
-console.log(url)
+const { url } = useCldImageUrl({ options: { src: "/cld-sample-5.jpg" } });
+console.log(url);
 
 const { url: videoUrl } = useCldVideoUrl({
-  options: { src: 'videos/mountain-stars' },
-})
-console.log(videoUrl)
+  options: { src: "videos/mountain-stars" },
+});
+console.log(videoUrl);
 
 const mediaAssets = [
-  { tag: 'electric_car_product_gallery_demo' }, // by default mediaType: "image"
-  { tag: 'electric_car_product_gallery_demo', mediaType: 'video' },
-  { tag: 'electric_car_360_product_gallery_demo', mediaType: 'spin' },
-]
+  { tag: "electric_car_product_gallery_demo" }, // by default mediaType: "image"
+  { tag: "electric_car_product_gallery_demo", mediaType: "video" },
+  { tag: "electric_car_360_product_gallery_demo", mediaType: "spin" },
+];
 
-const buttonId = 'open-btn'
+const buttonId = "open-btn";
 
-const cldVideoRef = ref()
+const cldVideoRef = ref();
 
 const chapters = {
-  0: 'Chapter 1',
-  6: 'Chapter 2',
-  9: 'Chapter 3',
-}
+  0: "Chapter 1",
+  6: "Chapter 2",
+  9: "Chapter 3",
+};
 
 const colors = {
-  accent: '#ff0000',
-  base: '#00ff00',
-  text: '#0000ff',
-}
+  accent: "#ff0000",
+  base: "#00ff00",
+  text: "#0000ff",
+};
 </script>
 
 <template>
-  <button :id="buttonId">
-    Select Image or Video
-  </button>
+  <button :id="buttonId">Select Image or Video</button>
   <CldMediaLibrary
     api-key="12345"
     :button-id="buttonId"
@@ -45,10 +43,7 @@ const colors = {
     cloud-name="demo"
     :button-id="buttonId"
   />
-  <CldOgImage
-    src="cld-sample-2"
-    twitter-title="test"
-  />
+  <CldOgImage src="cld-sample-2" twitter-title="test" />
   <CldVideoPlayer
     ref="cldVideoRef"
     width="1620"
@@ -63,13 +58,9 @@ const colors = {
   <CldUploadWidget
     v-slot="{ open }"
     upload-preset="nuxt-cloudinary-unsigned"
+    :tags="['sad', 'music']"
   >
-    <button
-      type="button"
-      @click="open"
-    >
-      Upload an Image
-    </button>
+    <button type="button" @click="open">Upload an Image</button>
   </CldUploadWidget>
   <CldUploadButton upload-preset="nuxt-cloudinary-unsigned">
     Upload

src/runtime/components/CldUploadWidget.vue

@@ -41,6 +41,7 @@ export interface CldUploadWidgetProps {
   signatureEndpoint?: URL | RequestInfo
   uploadPreset?: string
   config?: ConfigOptions
+  tags?: Array<string>
 }
 
 // Parameters sourced from:
@@ -250,6 +251,14 @@ if (signed) {
   }
 }
 
+if (props.tags?.length) {
+  uploadOptions.showAdvancedOptions = true
+
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  uploadOptions.getTags = (cb: Function, prefix: string) =>
+    cb(prefix ? props.tags?.filter(t => !t.indexOf(prefix)) : props.tags)
+}
+
 // Handle result states and callbacks
 
 watch(results, () => {