feat: run lint

Author: Baroshem

playground/app.vue

@@ -33,21 +33,19 @@ const cldVideoRef = ref()
     cloud-name="demo"
     :button-id="buttonId"
   />
-  <!-- Usage of `CldOgImage.vue` component -->
   <CldOgImage
     src="cld-sample-2"
     twitter-title="test"
   />
-  <!-- Usage of `CldVideoPlayer.vue` component -->
   <CldVideoPlayer
     ref="cldVideoRef"
     width="1620"
     height="1080"
-    src="videos/mountain-stars"
+    src="videos/dog-running-snow"
+    chapters
     :config="{ url: { cname: 'test' } }"
     picture-in-picture-toggle
   />
-  <!-- Usage of `CldUploadWidget.vue` component -->
   <CldUploadWidget
     v-slot="{ open }"
     upload-preset="nuxt-cloudinary-unsigned"
@@ -59,11 +57,9 @@ const cldVideoRef = ref()
       Upload an Image
     </button>
   </CldUploadWidget>
-  <!-- Usage of `CldUploadButton.vue` component -->
   <CldUploadButton upload-preset="nuxt-cloudinary-unsigned">
     Upload
   </CldUploadButton>
-  <!-- Usage of `CldImage.vue` component -->
   <CldImage
     src="cld-sample-5"
     width="987"

src/runtime/components/CldImage.vue

@@ -3,189 +3,191 @@
 // Come back to this after https://github.com/nuxt/nuxt/issues/20936 is fixed
 // import type { AssetOptions } from "@cloudinary-util/url-loader";
 // import type { ConfigOptions } from "@cloudinary-util/url-loader";
-import { ref } from "vue";
-import { Image } from "@unpic/vue";
-import type { ConstructUrlProps } from "@cloudinary-util/url-loader";
-import { useCldImageUrl } from "../composables/useCldImageUrl";
+import { ref } from 'vue'
+import { Image } from '@unpic/vue'
+import type { ConstructUrlProps } from '@cloudinary-util/url-loader'
+import { useCldImageUrl } from '../composables/useCldImageUrl'
 
 interface AssetOptionsResize {
-  crop?: string;
-  width?: number | string;
+  crop?: string
+  width?: number | string
 }
 
 interface ImageOptionsFillBackground {
-  crop?: string;
-  gravity?: string;
-  prompt?: string;
+  crop?: string
+  gravity?: string
+  prompt?: string
 }
 
 interface AssetOptions {
-  assetType?: string;
-  crop?: string;
-  deliveryType?: string;
-  effects?: Array<any>;
-  flags?: Array<string> | object;
-  format?: string;
-  gravity?: string;
-  height?: string | number;
-  overlays?: Array<any>;
-  quality?: number | string;
-  rawTransformations?: string[];
-  removeBackground?: boolean;
-  sanitize?: boolean;
-  resize?: AssetOptionsResize;
-  seoSuffix?: string;
-  src: string;
-  text?: any;
-  namedTransformations?: Array<string>;
-  underlay?: string;
-  underlays?: Array<any>;
-  version?: number | string;
-  width?: string | number;
-  widthResize?: string | number;
-  zoom?: string;
+  assetType?: string
+  crop?: string
+  deliveryType?: string
+  effects?: Array<any>
+  flags?: Array<string> | object
+  format?: string
+  gravity?: string
+  height?: string | number
+  overlays?: Array<any>
+  quality?: number | string
+  rawTransformations?: string[]
+  removeBackground?: boolean
+  sanitize?: boolean
+  resize?: AssetOptionsResize
+  seoSuffix?: string
+  src: string
+  text?: any
+  namedTransformations?: Array<string>
+  underlay?: string
+  underlays?: Array<any>
+  version?: number | string
+  width?: string | number
+  widthResize?: string | number
+  zoom?: string
 }
 
-type ImageOptionsRecolorPrompt = string | Array<string>;
+type ImageOptionsRecolorPrompt = string | Array<string>
 
 interface ImageOptionsRecolor {
-  prompt?: ImageOptionsRecolorPrompt;
-  to?: string;
-  multiple?: boolean;
+  prompt?: ImageOptionsRecolorPrompt
+  to?: string
+  multiple?: boolean
 }
 
 interface ImageOptionsZoomPan {
-  loop: string | boolean;
-  options: string;
+  loop: string | boolean
+  options: string
 }
 
-type ImageOptionsRemovePrompt = string | Array<string>;
+type ImageOptionsRemovePrompt = string | Array<string>
 
 interface ImageOptionsRemove {
-  prompt?: ImageOptionsRemovePrompt;
-  region?: [300, 200, 1900, 3500];
-  multiple?: boolean;
-  removeShadow?: boolean;
+  prompt?: ImageOptionsRemovePrompt
+  region?: [300, 200, 1900, 3500]
+  multiple?: boolean
+  removeShadow?: boolean
 }
 
 interface ImageOptionsGenerativeReplace {
-  to: string;
-  from: string;
-  preserveGeometry?: boolean;
+  to: string
+  from: string
+  preserveGeometry?: boolean
 }
 interface ImageOptions extends AssetOptions {
-  zoompan?: string | boolean | ImageOptionsZoomPan;
-  fillBackground?: boolean | ImageOptionsFillBackground;
-  recolor?: ImageOptionsRecolorPrompt | ImageOptionsRecolor;
-  remove?: ImageOptionsRemovePrompt | ImageOptionsRemove;
-  replace?: Array<string | boolean> | ImageOptionsGenerativeReplace;
-  restore?: boolean;
+  zoompan?: string | boolean | ImageOptionsZoomPan
+  fillBackground?: boolean | ImageOptionsFillBackground
+  recolor?: ImageOptionsRecolorPrompt | ImageOptionsRecolor
+  remove?: ImageOptionsRemovePrompt | ImageOptionsRemove
+  replace?: Array<string | boolean> | ImageOptionsGenerativeReplace
+  restore?: boolean
 }
 
 export interface CldImageProps extends ImageOptions {
-  loading?: "eager" | "lazy";
-  fetchPriority?: "high" | "low" | "auto";
+  loading?: 'eager' | 'lazy'
+  fetchPriority?: 'high' | 'low' | 'auto'
   // Adding below as required props to promote good patterns in developing images
-  alt: string;
-  width: string | number;
-  height: string | number;
+  alt: string
+  width: string | number
+  height: string | number
   // Cloudinary URL Loader props
   // Cannot use `ConfigOptions` due to the same issue as mentioned at the top
-  config?: any;
+  config?: any
   // Unpic props
-  layout?: "constrained" | "fullWidth" | "fixed";
-  priority?: boolean;
-  background?: "auto" | string;
+  layout?: 'constrained' | 'fullWidth' | 'fixed'
+  priority?: boolean
+  background?: 'auto' | string
   // Cloudinary missing effect props
-  blur?: string | number;
-  pixelate?: boolean;
-  grayscale?: boolean;
-  tint?: string | number;
-  opacity?: string | number;
-  shear?: string;
-  border?: string;
+  blur?: string | number
+  pixelate?: boolean
+  grayscale?: boolean
+  tint?: string | number
+  opacity?: string | number
+  shear?: string
+  border?: string
   loaderOptions?: {
-    width: number | string;
-  };
+    width: number | string
+  }
 }
 
-const props = defineProps<CldImageProps>();
+const props = defineProps<CldImageProps>()
 
-const { config, loaderOptions, ...options } = props;
+const { config, loaderOptions, ...options } = props
 
-const { url } = useCldImageUrl({ options, config } as ConstructUrlProps);
+const { url } = useCldImageUrl({ options, config } as ConstructUrlProps)
 
 const transformUrl = () => {
   const options = {
     ...props,
-  };
+  }
 
-  options.width =
-    typeof options.width === "string"
+  options.width
+    = typeof options.width === 'string'
       ? Number.parseInt(options.width)
-      : options.width;
-  options.height =
-    typeof options.height === "string"
+      : options.width
+  options.height
+    = typeof options.height === 'string'
       ? Number.parseInt(options.height)
-      : options.height;
+      : options.height
 
-  let widthResize;
+  let widthResize
 
   if (
-    typeof loaderOptions?.width === "number" &&
-    typeof options.width === "number" &&
-    loaderOptions.width !== options.width
+    typeof loaderOptions?.width === 'number'
+    && typeof options.width === 'number'
+    && loaderOptions.width !== options.width
   ) {
-    widthResize = loaderOptions.width;
-  } else if (
-    typeof loaderOptions?.width === "number" &&
-    typeof options?.width !== "number"
+    widthResize = loaderOptions.width
+  }
+  else if (
+    typeof loaderOptions?.width === 'number'
+    && typeof options?.width !== 'number'
   ) {
-    widthResize = loaderOptions.width;
-    options.width = widthResize;
+    widthResize = loaderOptions.width
+    options.width = widthResize
   }
 
   // If we have a resize width that's smaller than the user-defined width, we want to give the
   // ability to perform a final resize on the image without impacting any of the effects like text
   // overlays that may depend on the size to work properly
 
   if (options.width && widthResize && widthResize < options.width) {
-    options.widthResize = loaderOptions?.width;
+    options.widthResize = loaderOptions?.width
   }
 
-  const { url } = useCldImageUrl({ options, config } as ConstructUrlProps);
+  const { url } = useCldImageUrl({ options, config } as ConstructUrlProps)
 
-  return url;
-};
+  return url
+}
 
-const imgKey = ref("image-key");
+const imgKey = ref('image-key')
 
 const handleError = async (payload: Event) => {
-  const result = await pollForProcessingImage(payload);
+  const result = await pollForProcessingImage(payload)
 
-  if (result) imgKey.value = `${imgKey.value}-${Math.random()}`;
-};
+  if (result) imgKey.value = `${imgKey.value}-${Math.random()}`
+}
 
 const pollForProcessingImage = async (options: Event): Promise<boolean> => {
-  const { src } = options.target as EventTarget & { src: string };
+  const { src } = options.target as EventTarget & { src: string }
   try {
     await new Promise((resolve, reject) => {
       fetch(src).then((res) => {
         if (!res.ok) {
-          reject(res);
-          return;
+          reject(res)
+          return
         }
-        resolve(res);
-      });
-    });
-  } catch (e: any) {
+        resolve(res)
+      })
+    })
+  }
+  catch (e: any) {
     if (e.status === 423) {
-      return await pollForProcessingImage(options);
+      return await pollForProcessingImage(options)
     }
-    return false;
+    return false
   }
-  return true;
-};
+  return true
+}
 </script>
 
 <template>