feat: lint

nuxt-modules · Aug 9, 2024 · 660d106 · 660d106
1 parent 100ccea
commit 660d106
Show file tree

Hide file tree

Showing 2 changed files with 130 additions and 119 deletions.
diff --git a/playground/app.vue b/playground/app.vue
@@ -1,38 +1,40 @@
 <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"
@@ -43,7 +45,10 @@ 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"
@@ -60,7 +65,12 @@ const colors = {
     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
@@ -74,7 +84,7 @@ const colors = {
     priority
     sizes="(max-width: 600px) 480px,
          800px"
-    :replaceBackground="{ prompt: 'fish tank', seed: 3 }"
+    :replace-background="{ prompt: 'fish tank', seed: 3 }"
   />
   <CldImage
     src="cld-sample-5"

diff --git a/src/runtime/components/CldImage.vue b/src/runtime/components/CldImage.vue
@@ -3,159 +3,160 @@
 // 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 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;
-  seoSuffix?: string;
-  src: string;
-  text?: any;
-  namedTransformations?: Array<string>;
-  underlay?: string;
-  underlays?: Array<any>;
-  version?: number | string;
-  width?: 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
+  seoSuffix?: string
+  src: string
+  text?: any
+  namedTransformations?: Array<string>
+  underlay?: string
+  underlays?: Array<any>
+  version?: number | string
+  width?: 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;
-  replaceBackground?: boolean | string | { prompt: string; seed: number };
+  zoompan?: string | boolean | ImageOptionsZoomPan
+  fillBackground?: boolean | ImageOptionsFillBackground
+  recolor?: ImageOptionsRecolorPrompt | ImageOptionsRecolor
+  remove?: ImageOptionsRemovePrompt | ImageOptionsRemove
+  replace?: Array<string | boolean> | ImageOptionsGenerativeReplace
+  restore?: boolean
+  replaceBackground?: boolean | string | { prompt: string, seed: number }
 }
 
 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
 
-  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>