Merge pull request #139 from nuxt-modules/feat/upload-widget

Feat/upload widget
nuxt-modules · Jul 29, 2023 · 272b9a3 · 272b9a3
2 parents 0b493e0 + c135546
commit 272b9a3
Show file tree

Hide file tree

Showing 21 changed files with 846 additions and 80 deletions.
diff --git a/.stackblitz/app.vue b/.stackblitz/app.vue
@@ -17,6 +17,24 @@ console.log(url)
     height="1080"
     src="videos/mountain-stars"
   />
+  <!-- Usage of `CldUploadWidget.vue` component -->
+  <CldUploadWidget
+    v-slot="{ open }"
+    upload-preset="nuxt-cloudinary-unsigned"
+  >
+    <button
+      type="button"
+      @click="open"
+    >
+      Upload an Image
+    </button>
+  </CldUploadWidget>
+  <!-- Usage of `CldUploadButton.vue` component -->
+  <CldUploadButton
+    upload-preset="nuxt-cloudinary-unsigned"
+  >
+    Upload
+  </CldUploadButton>
   <p>CldOgImage is here. Inspect the html meta to see the result</p>
   <CldOgImage
     src="cld-sample-2"

diff --git a/.stackblitz/package.json b/.stackblitz/package.json
@@ -11,6 +11,6 @@
     "nuxt": "^3.6.2"
   },
   "dependencies": {
-    "@nuxtjs/cloudinary": "^2.2.0"
+    "@nuxtjs/cloudinary": "^2.3.1"
   }
 }
diff --git a/.stackblitz/yarn.lock b/.stackblitz/yarn.lock
@@ -287,18 +287,18 @@
   dependencies:
     mime "^3.0.0"
 
-"@cloudinary-util/url-loader@^3.8.1":
-  version "3.8.1"
-  resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-3.8.1.tgz#c819e6c305293333ba4bb5b72b640d1f386d821b"
-  integrity sha512-cBAPiAulWIG5M6HkFDvHhWVo0BJfWnZrr3jz7mIvdVrhKJl3CgK6p9kzSWKC62Ib9SUHMzKBC9R2B8jn+ZCBKA==
+"@cloudinary-util/url-loader@^3.10.0":
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-3.10.0.tgz#30dbed4d60968687c9161a60b246da62d42c3e33"
+  integrity sha512-RNp6WayU6e5ikA7yCRqNhp0lOwLl82vLco9EwpES2si6Hb+g9yEaeTYvobD44ISQeJUnPl6e1c/AEYVSjfzwrg==
   dependencies:
-    "@cloudinary-util/util" "2.0.1"
-    "@cloudinary/url-gen" "^1.10.1"
+    "@cloudinary-util/util" "2.2.1"
+    "@cloudinary/url-gen" "^1.10.2"
 
-"@cloudinary-util/util@2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@cloudinary-util/util/-/util-2.0.1.tgz#0797d2dd96f91971184b2f94da768c15922ea33d"
-  integrity sha512-d2imgUjYTLjv8ZhZPMAts/uPbMvIE71X4I/5hwdY/7vM4BuFQoJMSyq+h2pW1z1MyGG9BOWBm70vp082lSrbEQ==
+"@cloudinary-util/util@2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@cloudinary-util/util/-/util-2.2.1.tgz#c482d9321d37d921b347858a121c161b68782bd3"
+  integrity sha512-MEIqn5WtPP3mxSMTNNfpqlGS1UquAXcjmVdY/t/edD/ZWVjI85viBiOMIuF0W6n6UF5gTstLymfQNYx0YO/GZg==
 
 "@cloudinary/transformation-builder-sdk@^1.2.7":
   version "1.2.9"
@@ -307,7 +307,21 @@
   dependencies:
     "@cloudinary/url-gen" "^1.7.0"
 
-"@cloudinary/url-gen@^1.10.1", "@cloudinary/url-gen@^1.7.0":
+"@cloudinary/transformation-builder-sdk@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@cloudinary/transformation-builder-sdk/-/transformation-builder-sdk-1.4.0.tgz#5ae4332bd0384ed55ca34ebab064bc9626c0b294"
+  integrity sha512-atU25SFAmR4aXlPHDs7fERmcl0OSnwQl80b5Fy3unvwHSj10fnqHBdLeeOEBNaOXdF3WQLmNSGMkOV8IlDPfMA==
+  dependencies:
+    "@cloudinary/url-gen" "^1.7.0"
+
+"@cloudinary/url-gen@^1.10.2":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@cloudinary/url-gen/-/url-gen-1.11.0.tgz#0c149f43925f93faa3f669dbad8b56db4eeb5bb7"
+  integrity sha512-jShJoh+5JQfsMnh/NUqe8Z2EzZo/++BQ/CuF/VND4hA7zNpXn6vYi5JMIZ4YvLGRrqHuMtqCFahaTe1RBsLJJQ==
+  dependencies:
+    "@cloudinary/transformation-builder-sdk" "^1.4.0"
+
+"@cloudinary/url-gen@^1.7.0":
   version "1.10.1"
   resolved "https://registry.yarnpkg.com/@cloudinary/url-gen/-/url-gen-1.10.1.tgz#b5b49e03252a90bba17038024f206328482eac96"
   integrity sha512-6pBmapnL7G231NbNWhKbi+08HcpNASci7M3OmZWaUCQWUfdmo3au27HT3Zqg9NMsisfyer3t7o0RXzPQ4XlmMg==
@@ -746,12 +760,12 @@
     vite-plugin-checker "^0.6.1"
     vue-bundle-renderer "^1.0.3"
 
-"@nuxtjs/cloudinary@^2.2.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-2.2.0.tgz#5a6e5eb10a2696f9691e147c058cf4c017d55dd0"
-  integrity sha512-Uy8XLmWJ0mj3FOPxZqCTcNNOTlbgc/90aIxtWJ3H/xQrH8kU8bPu51F4ZLW1ONEL8dcG6QqI0MMjaxmk9jYi6Q==
+"@nuxtjs/cloudinary@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-2.3.1.tgz#4c2a86f70d00b4c75a3889c23b75f389ecffa56f"
+  integrity sha512-gVURxdLzAOPpcw/daopVkD+0rymwauKN1S+X4/dsQOMr/cq6vPUOCBJ0MnfXzk+PJ/WVoO41sLNFESWOFVaK/g==
   dependencies:
-    "@cloudinary-util/url-loader" "^3.8.1"
+    "@cloudinary-util/url-loader" "^3.10.0"
     "@nuxt/kit" "^3.5.0"
     "@unpic/vue" "^0.0.23"
     defu "^6.1.2"

diff --git a/docs/components/content/ColoredVideoPlayer.vue b/docs/components/content/ColoredVideoPlayer.vue
@@ -4,14 +4,14 @@
     height="1080"
     src="videos/mountain-stars"
     :colors="colors"
-    fontFace="Source Serif Pro"
+    font-face="Source Serif Pro"
   />
 </template>
 
 <script setup lang="ts">
 const colors = {
-    accent: '#ff0000',
-    base: '#00ff00',
-    text: '#0000ff'
-  }
+  accent: "#ff0000",
+  base: "#00ff00",
+  text: "#0000ff",
+};
 </script>
diff --git a/docs/components/content/ImageWithEffects.vue b/docs/components/content/ImageWithEffects.vue
@@ -0,0 +1,20 @@
+<template>
+  <CldImage
+    src="cld-sample-5"
+    width="900"
+    height="900"
+    alt="Sample Product"
+    crop="fill"
+    :effects="[
+      {
+        background: 'green',
+      },
+      {
+        gradientFade: true,
+      },
+      {
+        gradientFade: 'symetric,x_0.5',
+      },
+    ]"
+  />
+</template>
diff --git a/docs/components/content/ImageWithOverlays.vue b/docs/components/content/ImageWithOverlays.vue
@@ -9,7 +9,7 @@
       {
         position: {
           gravity: 'north',
-          y: 60
+          y: 60,
         },
         text: {
           color: 'rgb:52a4ff80',
@@ -21,12 +21,12 @@
           lineSpacing: -100,
           stroke: true,
           border: '20px_solid_rgb:2d0eff99',
-        }
+        },
       },
       {
         position: {
           gravity: 'south',
-          y: 60
+          y: 60,
         },
         text: {
           color: 'rgb:52a4ff80',
@@ -38,8 +38,8 @@
           lineSpacing: -100,
           stroke: true,
           border: '20px_solid_rgb:2d0eff99',
-        }
-      }
+        },
+      },
     ]"
   />
 </template>
diff --git a/docs/components/content/UploadButton.vue b/docs/components/content/UploadButton.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const resource = ref();
+</script>
+
+<template>
+  <div>
+    <CldUploadButton
+      upload-preset="nuxt-cloudinary-unsigned"
+      :on-upload="
+        (result, widget) => {
+          resource.value = result?.info;
+          widget.close();
+        }
+      "
+    >
+      Upload
+    </CldUploadButton>
+    <p>URL: {{ resource?.secure_url }}</p>
+  </div>
+</template>
diff --git a/docs/components/content/VideoPlayerWithEvents.vue b/docs/components/content/VideoPlayerWithEvents.vue
@@ -3,7 +3,7 @@
     width="1620"
     height="1080"
     src="videos/mountain-stars"
-    fontFace="Source Serif Pro"
-    :onPause="({ player }) => console.log(`current time: ${player.currentTime()}`)"
+    font-face="Source Serif Pro"
+    :on-pause="({ player }) => console.log(`current time: ${player.currentTime()}`)"
   />
 </template>
diff --git a/docs/content/2.components/CldImage.md b/docs/content/2.components/CldImage.md
@@ -145,7 +145,7 @@ All effect props are disabled by default.
 
 [View the Cloudinary docs](https://cloudinary.com/documentation/transformation_reference#e_effect) to see learn more about using effects.
 
-### Overlay Props
+## Overlay Props
 
 The `overlays` prop is an array of objects with the following configuration options:
 
@@ -190,3 +190,97 @@ The text property can include:
 | lineSpacing    | number | `"14"`                                     |
 | stroke         | bool   | `true` in coordination with Border         |
 | textDecoration | string | `"underline"`                              |
+
+## Examples
+
+Below, you can see examples of usage of various effects that you can use from Cloudinary:
+
+### Zoompan
+
+```html
+zoompan="loop"
+```
+
+:cld-image{src="cld-sample-5" width="900" zoompan="loop" height="900" alt="test" style="text-align: center; margin: 0 auto"}
+
+<!-- TODO: not working yet -->
+### Blur
+
+```html
+blur="1200"
+```
+
+:cld-image{src="cld-sample-5" width="900" blur="1200" height="900" alt="test" style="text-align: center; margin: 0 auto"}
+
+<!-- TODO: not working yet -->
+### Pixelate
+
+```html
+pixelate
+```
+
+:cld-image{src="cld-sample-5" width="900" pixelate height="900" alt="test" style="text-align: center; margin: 0 auto"}
+
+<!-- TODO: not working yet -->
+### Grayscale
+
+```html
+grayscale
+```
+
+:cld-image{src="cld-sample-5" width="900" grayscale height="900" alt="test" style="text-align: center; margin: 0 auto"}
+
+<!-- TODO: not working yet -->
+### Tint
+
+```html
+tint="equalize:80:blue:blueviolet"
+```
+
+:cld-image{src="cld-sample-5" width="900" tint="equalize:80:blue:blueviolet" height="900" alt="test" style="text-align: center; margin: 0 auto"}
+
+<!-- TODO: not working yet -->
+### Opacity
+
+```html
+opacity="50"
+```
+
+:cld-image{src="cld-sample-5" width="900" opacity="50" height="900" alt="test" style="text-align: center; margin: 0 auto"}
+
+<!-- TODO: not working yet -->
+### Shear
+
+```html
+shear="40:0"
+```
+
+:cld-image{src="cld-sample-5" width="900" shear="40:0" height="900" alt="test" style="text-align: center; margin: 0 auto"}
+
+<!-- TODO: not working yet -->
+### Border
+
+```html
+border="40px_solid_purple"
+```
+
+:cld-image{src="cld-sample-5" width="900" border="40px_solid_purple" height="900" alt="test" style="text-align: center; margin: 0 auto"}
+
+<!-- TODO: not working yet -->
+### Multiple Effects
+
+```html
+:effects="[
+  {
+    background: 'green'
+  },
+  {
+    gradientFade: true
+  },
+  {
+    gradientFade: 'symetric,x_0.5'
+  }
+]"
+```
+
+:image-with-effects{style="text-align: center; margin: 0 auto"}
diff --git a/docs/content/2.components/CldUploadButton.md b/docs/content/2.components/CldUploadButton.md
@@ -0,0 +1,17 @@
+# CldUploadButton.vue
+
+---
+
+# Getting Started with CldUploadButton
+
+The CldUploadButton creates a button element that uses an instance of the [Cloudinary Upload Widget](https://cloudinary.com/documentation/upload_widget) to give you an easy way to add upload capabilities to your Next.js app.
+
+The CldUploadButton component wraps the [CldUploadWidget](/clduploadwidget) component providing a pre-defined UI (a button). The same concepts apply, including having the option of using Signed or Unsigned uploads.
+
+## Basic Usage
+
+```html
+<CldUploadButton uploadPreset="<Upload Preset>">Upload</CldUploadButton>
+```
+
+:upload-button