nuxt-directus-sdk 2.1.2 → 2.1.3

package/dist/module.mjs

@@ -1,10 +1,10 @@
 import { useLogger, defineNuxtModule, createResolver, installModule, addPlugin, addImportsDir, addComponentsDir, addImportsSources, addTypeTemplate } from '@nuxt/kit';
 import { defu } from 'defu';
 import { generateTypes } from '../dist/runtime/types/index.js';
-import { useUrl } from '../dist/runtime/utils.js';
+import { useUrl } from '../dist/runtime/utils/index.js';
 
 const name = "nuxt-directus-sdk";
-const version = "2.1.2";
+const version = "2.1.3";
 
 const configKey = "directus";
 const logger = useLogger("nuxt-directus-sdk");
@@ -127,6 +127,7 @@ const module = defineNuxtModule({
         from: resolver.resolve("./runtime/server/services"),
         imports: [
           "useDirectus",
+          "useUserDirectus",
           "useAdminDirectus",
           "useDirectusUrl",
           "useDirectusAccessToken"

package/dist/runtime/components/directus-visual-editor.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts" generic="T extends keyof DirectusSchema">
+import type { PrimaryKey } from '@directus/types'
+import { setAttr } from '@directus/visual-editing'
+import { isVisualEditorPage } from '../composables/preview'
+import { Slot } from '../utils'
+
+type SingleDirectusCollection = DirectusSchema[T][0]
+type FieldKey = keyof SingleDirectusCollection
+
+const props = defineProps<{
+  collection: T
+  item: PrimaryKey
+  fields?: FieldKey | FieldKey[]
+  mode?: 'drawer' | 'modal' | 'popover'
+}>()
+
+const directusAttr = computed(() => {
+  const data: Record<any, any> = {}
+
+  Object.entries(props).forEach(([key, value]) => {
+    if (value !== undefined) {
+      data[key] = value
+    }
+  })
+
+  return setAttr(data as any)
+})
+
+const attributes = computed(() => {
+  if (!isVisualEditorPage()) {
+    return null
+  }
+
+  return {
+    'data-directus': directusAttr.value,
+  }
+})
+</script>
+
+<template>
+  <Slot v-bind="attributes">
+    <slot />
+  </Slot>
+</template>

package/dist/runtime/composables/directus.js

@@ -1,6 +1,6 @@
 import { useRuntimeConfig } from "#app";
 import { authentication, createDirectus, realtime, rest } from "@directus/sdk";
-import { useUrl } from "../utils.js";
+import { useUrl } from "../utils/index.js";
 import { useDirectusTokens } from "./tokens.js";
 export function useDirectusUrl(path = "") {
   return useUrl(useRuntimeConfig().public.directus.url, path);

package/dist/runtime/composables/preview.d.ts

@@ -0,0 +1 @@
+export declare function isVisualEditorPage(): any;

package/dist/runtime/composables/preview.js

@@ -0,0 +1,4 @@
+export function isVisualEditorPage() {
+  const route = useRoute();
+  return route.query["visual-editor"] && route.query["visual-editor"] === "true";
+}

package/dist/runtime/plugin.js

@@ -1,11 +1,14 @@
 import { addRouteMiddleware, defineNuxtPlugin, refreshNuxtData, useRoute, useRuntimeConfig } from "#app";
+import { apply, remove } from "@directus/visual-editing";
 import { useDirectusAuth } from "./composables/auth.js";
 import { useDirectus } from "./composables/directus.js";
+import { isVisualEditorPage } from "./composables/preview.js";
 import auth from "./middleware/auth.js";
 export default defineNuxtPlugin(async (nuxtApp) => {
   const route = useRoute();
   const config = useRuntimeConfig();
   const preview = route.query.preview && route.query.preview === "true";
+  const livePreview = isVisualEditorPage();
   const token = route.query.token;
   if (preview && token) {
     useDirectus().setToken(token);
@@ -13,14 +16,29 @@ export default defineNuxtPlugin(async (nuxtApp) => {
       refreshNuxtData();
     });
   }
+  if (livePreview) {
+    nuxtApp.hook("page:start", async () => {
+      if (import.meta.client) {
+        remove();
+      }
+    });
+    nuxtApp.hook("page:finish", () => {
+      if (import.meta.client) {
+        apply({ directusUrl: config.public.directus.url });
+      }
+    });
+  }
   async function fetchUser() {
     if (config.public.directus.fetchUser)
       await useDirectusAuth().readMe();
   }
   await fetchUser();
+  let loadedUser = false;
   nuxtApp.hook("page:start", async () => {
-    if (import.meta.client)
+    if (import.meta.client && !loadedUser) {
       await fetchUser();
+      loadedUser = true;
+    }
   });
   addRouteMiddleware("auth", auth);
 });

package/dist/runtime/server/services/directus.d.ts

@@ -2,4 +2,5 @@ import type { H3Event } from 'h3';
 export declare function useDirectusAccessToken(event: H3Event): string | undefined;
 export declare function useDirectusUrl(path?: string): string;
 export declare function useDirectus(token?: string): import("@directus/sdk").DirectusClient<DirectusSchema> & import("@directus/sdk").AuthenticationClient<DirectusSchema> & import("@directus/sdk").RestClient<DirectusSchema>;
+export declare function useUserDirectus(event: H3Event): import("@directus/sdk").DirectusClient<DirectusSchema> & import("@directus/sdk").AuthenticationClient<DirectusSchema> & import("@directus/sdk").RestClient<DirectusSchema>;
 export declare function useAdminDirectus(): import("@directus/sdk").DirectusClient<DirectusSchema> & import("@directus/sdk").AuthenticationClient<DirectusSchema> & import("@directus/sdk").RestClient<DirectusSchema>;

package/dist/runtime/server/services/directus.js

@@ -1,7 +1,7 @@
 import { useRuntimeConfig } from "#imports";
 import { authentication, createDirectus, rest } from "@directus/sdk";
 import { getCookie } from "h3";
-import { useUrl } from "../../utils.js";
+import { useUrl } from "../../utils/index.js";
 export function useDirectusAccessToken(event) {
   return getCookie(event, useRuntimeConfig().public.directus.cookieNameAccessToken);
 }
@@ -14,6 +14,9 @@ export function useDirectus(token) {
     directus.setToken(token);
   return directus;
 }
+export function useUserDirectus(event) {
+  return useDirectus(useDirectusAccessToken(event));
+}
 export function useAdminDirectus() {
   const config = useRuntimeConfig().directus;
   if (!config.adminToken)

package/dist/runtime/server/services/index.d.ts

@@ -1 +1 @@
-export { useAdminDirectus, useDirectus, useDirectusAccessToken, useDirectusUrl } from './directus.js';
+export { useAdminDirectus, useDirectus, useDirectusAccessToken, useDirectusUrl, useUserDirectus } from './directus.js';

package/dist/runtime/server/services/index.js

@@ -1 +1 @@
-export { useAdminDirectus, useDirectus, useDirectusAccessToken, useDirectusUrl } from "./directus.js";
+export { useAdminDirectus, useDirectus, useDirectusAccessToken, useDirectusUrl, useUserDirectus } from "./directus.js";

package/dist/runtime/{utils.d.ts → utils/index.d.ts}

@@ -1 +1,2 @@
+export { Slot } from './slot.js';
 export declare function useUrl(base: string, ...paths: string[]): string;

package/dist/runtime/{utils.js → utils/index.js}

@@ -1,4 +1,5 @@
 import { cleanDoubleSlashes, joinURL, withTrailingSlash } from "ufo";
+export { Slot } from "./slot.js";
 export function useUrl(base, ...paths) {
   return cleanDoubleSlashes(withTrailingSlash(joinURL(base, "/", ...paths)));
 }

package/dist/runtime/utils/slot.d.ts

@@ -0,0 +1,7 @@
+import type { VNode } from 'vue';
+export declare function renderSlotFragments(children?: VNode[]): VNode[];
+export declare const Slot: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/utils/slot.js

@@ -0,0 +1,40 @@
+import { cloneVNode, Comment, defineComponent, Fragment, mergeProps } from "vue";
+export function renderSlotFragments(children) {
+  if (!children)
+    return [];
+  return children.flatMap((child) => {
+    if (child.type === Fragment)
+      return renderSlotFragments(child.children);
+    return [child];
+  });
+}
+export const Slot = defineComponent({
+  name: "PrimitiveSlot",
+  inheritAttrs: false,
+  setup(_, { attrs, slots }) {
+    return () => {
+      if (!slots.default)
+        return null;
+      const childrens = renderSlotFragments(slots.default());
+      const firstNonCommentChildrenIndex = childrens.findIndex((child) => child.type !== Comment);
+      if (firstNonCommentChildrenIndex === -1)
+        return childrens;
+      const firstNonCommentChildren = childrens[firstNonCommentChildrenIndex];
+      delete firstNonCommentChildren.props?.ref;
+      const mergedProps = firstNonCommentChildren.props ? mergeProps(attrs, firstNonCommentChildren.props) : attrs;
+      if (attrs.class && firstNonCommentChildren.props?.class)
+        delete firstNonCommentChildren.props.class;
+      const cloned = cloneVNode(firstNonCommentChildren, mergedProps);
+      for (const prop in mergedProps) {
+        if (prop.startsWith("on")) {
+          cloned.props ||= {};
+          cloned.props[prop] = mergedProps[prop];
+        }
+      }
+      if (childrens.length === 1)
+        return cloned;
+      childrens[firstNonCommentChildrenIndex] = cloned;
+      return childrens;
+    };
+  }
+});

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nuxt-directus-sdk",
   "type": "module",
-  "version": "2.1.2",
-  "description": "A nuxt module that uses the directus SDK",
+  "version": "2.1.3",
+  "description": "A Directus nuxt module that uses the Directus SDK",
   "author": "Matthew Rollinson <matt@rolley.io>",
   "license": "MIT",
   "exports": {
@@ -33,6 +33,7 @@
   "dependencies": {
     "@directus/sdk": "^19.0.1",
     "@directus/types": "^13.0.0",
+    "@directus/visual-editing": "^1.0.1",
     "@nuxt/image": "^1.9.0",
     "@nuxt/kit": "^3.16.0",
     "change-case": "^4.1.2",