feat: add getThumbnail method

docs/content/en/usage/useDirectusFiles.md

@@ -0,0 +1,35 @@
+---
+title: "useDirectusFiles"
+description: "Learn how to use Nuxt & Directus"
+position: 11
+category: "Usage"
+---
+
+> Check out the Directus [Files](https://docs.directus.io/reference/files/) documentation.
+
+### `getThumbnail`
+
+Generate image url from file id  
+Directus will generate the image with the given [`parameters`](https://github.com/Intevel/nuxt-directus/blob/master/src/runtime/types/index.d.ts#L61) on the server and deliver you an optimized image
+
+- **Arguments:**
+
+  - fileId: `String`
+  - options: [`DirectusThumbnailOptions`](https://github.com/Intevel/nuxt-directus/blob/master/src/runtime/types/index.d.ts#L61)
+
+- **Returns:** `String`
+
+```vue
+<template>
+  <div>
+    <img :src="img(fileId)" alt="original" />
+    <img :src="img(fileId, { width: 300, height: 300, fit: 'cover' })" alt="square"/>
+    <img :src="img(fileId, { width: 300, format: 'webp' })" alt="webp" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const fileId = "5e47b7e6-fd78-400c-821f-0dca4a176f4f";
+const { getThumbnail: img } = useDirectus();
+</script>
+```

playground/app.vue

@@ -14,6 +14,10 @@
       Delete Articles
     </button>
     <button style="margin-top: 25px" @click="logUser">Log User</button>
+    <div style="margin-top: 25px">
+        <img :src="img(fileId, { width: 300, height: 300, fit: 'cover' })" alt="square thumbnail" />
+        <img :src="img(fileId, { width: 300, format: 'webp' })" alt="webp" />
+    </div>
   </div>
 </template>
 
@@ -22,6 +26,8 @@ const { login } = useDirectusAuth();
 const user = useDirectusUser();
 const { getItems, getItemById, createItems, deleteItems } = useDirectusItems();
 const router = useRouter();
+const fileId = 'da8e7c7b-d115-40cd-a88c-d4aedd7eea6c'
+const { getThumbnail: img } = useDirectusFiles();
 
 const onSubmit = async () => {
   try {

src/runtime/composables/useDirectusFiles.ts

@@ -0,0 +1,28 @@
+import { useDirectusUrl } from "./useDirectusUrl";
+import { DirectusThumbnailOptions } from "../types";
+
+export const useDirectusFiles = () => {
+  const directusUrl = useDirectusUrl();
+
+  const getThumbnail = (
+    fileId: string,
+    options?: DirectusThumbnailOptions
+  ): string => {
+    const url = new URL(`${directusUrl}assets/${fileId}`);
+    if (options) {
+      if (options.width)
+        url.searchParams.append("width", options.width.toFixed(0));
+      if (options.height)
+        url.searchParams.append("height", options.height.toFixed(0));
+      if (options.quality)
+        url.searchParams.append("quality", options.quality.toFixed(0));
+      if (options.withoutEnlargement)
+        url.searchParams.append("withoutEnlargement", "true");
+      if (options.fit) url.searchParams.append("fit", options.fit);
+      if (options.format) url.searchParams.append("format", options.format);
+    }
+    return url.href;
+  };
+
+  return { getThumbnail };
+};

src/runtime/types/index.d.ts

@@ -53,3 +53,16 @@ export interface DirectusQueryParams {
   page?: number;
   alias?: string | Array<string>;
 }
+
+export type DirectusThumbnailFormat = "jpg" | "png" | "webp" | "tiff";
+
+export type DirectusThumbnailFit = "cover" | "contain" | "inside" | "outside";
+
+export interface DirectusThumbnailOptions {
+  width?: number;
+  height?: number;
+  quality?: number;
+  fit?: DirectusThumbnailFit;
+  format?: DirectusThumbnailFormat;
+  withoutEnlargement?: boolean;
+}