@meeovi/directus-client 1.0.0 → 1.0.2

package/src/utils/visualEditing.ts

@@ -0,0 +1,46 @@
+import { apply as applyVisualEditing, setAttr } from '@directus/visual-editing';
+import type { PrimaryKey } from '@directus/types';
+
+export interface VisualEditingOptions {
+  enableVisualEditing?: boolean;
+  directusUrl: string;
+  query?: Record<string, string | undefined>;
+}
+
+export interface ApplyOptions {
+  elements?: HTMLElement[] | HTMLElement;
+  onSaved?: (data: {
+    collection?: string;
+    item?: PrimaryKey | null;
+    payload?: Record<string, any>;
+  }) => void;
+  customClass?: string;
+}
+
+export function createVisualEditing(options: VisualEditingOptions) {
+  const { enableVisualEditing = false, directusUrl, query = {} } = options;
+
+  let isEnabled = false;
+
+  // Determine if visual editing should be active
+  if (query['visual-editing'] === 'true' && enableVisualEditing) {
+    isEnabled = true;
+  } else if (query['visual-editing'] === 'false') {
+    isEnabled = false;
+  }
+
+  const apply = (opts: ApplyOptions) => {
+    if (!isEnabled) return;
+
+    applyVisualEditing({
+      ...opts,
+      directusUrl,
+    });
+  };
+
+  return {
+    isEnabled,
+    apply,
+    setAttr,
+  };
+}

package/src/vue/useDirectus.ts

@@ -2,7 +2,7 @@ import { inject } from 'vue';
 import { DirectusKey } from './DirectusProvider';
 import type { MeeoviDirectusClient } from '../client/createClient';
 
-export function useVDirectus<Schema>() {
+export function useVueDirectus<Schema>() {
   const client = inject<MeeoviDirectusClient<Schema>>(DirectusKey);
 
   if (!client) {

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": false,
+    "outDir": "dist",
+    "moduleResolution": "bundler",
+    "module": "ESNext",
+    "target": "ESNext",
+    "strict": true,
+    "jsx": "react-jsx",
+    "skipLibCheck": true, 
+    "noEmitOnError": false
+  },
+  "include": ["src"]
+}

package/src/utils/useDirectusField.ts

@@ -1,144 +0,0 @@
-import { ref, computed, watch } from "vue"
-import Input from "~/components/ui/forms/TextInput.vue"
-import TextArea from "~/components/ui/forms/TextArea.vue"
-import Select from "~/components/ui/forms/SelectInput.vue"
-import DateTime from "~/components/ui/forms/DateTime.vue"
-import FileInput from "~/components/ui/forms/FileInput.vue"
-import BooleanInput from "~/components/ui/forms/BooleanInput.vue"
-import RelationSelect from "~/components/ui/forms/RelationSelect.vue"
-import RepeaterInput from "~/components/ui/forms/RepeaterInput.vue"
-import TiptapEditor from "~/components/ui/forms/TiptapEditor.vue"
-
-export function useDirectusField(field: any, modelValue: any, emit: any, formContext?: any) {
-  const internalValue = computed({
-    get: () => modelValue,
-    set: (v) => emit("update:modelValue", v),
-  })
-
-  const previousAuto = ref<string | null>(null)
-  const internalAuto = computed(() => {
-    return previousAuto.value != null && internalValue.value === previousAuto.value
-  })
-
-  const slugify = (val: string) =>
-    String(val || "")
-      .toLowerCase()
-      .normalize("NFKD")
-      .replace(/\s+/g, "-")
-      .replace(/[^a-z0-9\-]/g, "")
-      .replace(/-+/g, "-")
-      .replace(/^-|-$/g, "")
-
-  const isAliasField = computed(() => {
-    const meta = field?.meta ?? {}
-    return (
-      meta.interface === "alias" ||
-      (meta.options && (meta.options.source || meta.options.from))
-    )
-  })
-
-  if (isAliasField.value && formContext && formContext.form) {
-    const meta = field?.meta ?? {}
-    let sourceField: string | null = meta?.options?.source ?? meta?.options?.from ?? null
-
-    if (!sourceField && formContext.fields) {
-      const candidates = ["name", "title"]
-      sourceField =
-        candidates.find((c: string) =>
-          formContext.fields.value.some((f: any) => f.field === c)
-        ) ?? null
-    }
-
-    if (sourceField) {
-      watch(
-        () => formContext.form.value?.[sourceField as string],
-        (newVal) => {
-          const target = field.field
-          const current = formContext.form.value?.[target] ?? ""
-          const generated = slugify(String(newVal ?? ""))
-
-          if (!generated) return
-
-          // Case 1: Empty or previously auto‑generated → regenerate
-          if (!current || current === previousAuto.value) {
-            formContext.form.value[target] = generated
-            internalValue.value = generated
-            previousAuto.value = generated
-          }
-        },
-        { immediate: true }
-      )
-
-      // Watch the target itself: if cleared, regenerate
-      watch(
-        () => formContext.form.value?.[field.field],
-        (newVal) => {
-          if (!newVal) {
-            const sourceVal = formContext.form.value?.[sourceField as string] ?? ""
-            const regenerated = slugify(String(sourceVal))
-            if (regenerated) {
-              formContext.form.value[field.field] = regenerated
-              internalValue.value = regenerated
-              previousAuto.value = regenerated
-            }
-          }
-        }
-      )
-    }
-  }
-
-  // --- Label prettifier ---
-  const prettify = (s: string) =>
-    s.replace(/_/g, " ")
-      .split(" ")
-      .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
-      .join(" ")
-
-  const label = computed(() => {
-    const raw = field?.meta?.field ?? field?.field ?? ""
-    return prettify(raw)
-  })
-
-  // --- Field lookup ---
-  const fieldLookup = computed(() => {
-    const iface = field?.meta?.interface
-    const name = String(iface ?? "").toLowerCase()
-
-    if (["input", "string"].includes(name)) return Input
-    if (
-      ["textarea", "wysiwyg", "rich-text", "input-multiline", "input-rich-text", "input-rich-text-md"].includes(name)
-    )
-      return TiptapEditor
-    if (["select", "select-dropdown", "select-multiple"].includes(name)) return Select
-    if (name === "datetime") return DateTime
-    if (["file", "files", "file-image"].includes(name)) return FileInput
-    if (name === "boolean") return BooleanInput
-    if (name.includes("many") || name.includes("one") || name.includes("to")) return RelationSelect
-    return Input
-  })
-
-  const required = computed(() => {
-    const meta = field?.meta ?? {}
-    return Boolean(meta?.validation?.required ?? meta?.required ?? false)
-  })
-
-  const safeOptions = computed(() => field?.meta?.options ?? null)
-  const defaultValue = computed(() => field?.schema?.default_value ?? null)
-  const isMultiple = computed(() => {
-    const name = String(field?.meta?.interface ?? "").toLowerCase()
-    if (name === "select-multiple") return true
-    if (name.includes("many")) return true
-    return Boolean(field?.meta?.options?.multiple || false)
-  })
-
-  return {
-    internalValue,
-    internalAuto,
-    label,
-    fieldLookup,
-    required,
-    safeOptions,
-    defaultValue,
-    isMultiple,
-  }
-}

package/src/utils/useDirectusRequest.ts

@@ -1,32 +0,0 @@
-import { useNuxtApp } from '#imports'
-
-/**
- * Centralized safe wrapper around `$directus.request`.
- * Shows a toast error when the Directus client or `.request` is not available.
- */
-export default function useDirectusRequest() {
-  const nuxt = useNuxtApp() as any
-
-  async function request(config: any) {
-    try {
-      const client = nuxt?.$directus
-      if (!client || typeof client.request !== 'function') {
-        try {
-          const toast = nuxt?.$toast
-          if (toast && typeof toast.error === 'function') toast.error('Directus client unavailable')
-        } catch (_) {}
-        throw new Error('Directus client.request is not available')
-      }
-
-      return await client.request(config)
-    } catch (e) {
-      try {
-        const toast = nuxt?.$toast
-        if (toast && typeof toast.error === 'function') toast.error('Request failed')
-      } catch (_) {}
-      throw e
-    }
-  }
-
-  return { request }
-}

package/src/utils/useDirectusSchema.js

@@ -1,9 +0,0 @@
-export async function useDirectusSchema(collection) {
-    const config = useRuntimeConfig()
-
-    return await $fetch(`${config.public.directus.url}/fields/${collection}`, {
-        headers: {
-            Authorization: `Bearer ${config.public.directus.auth.token}`
-        }
-    })
-}

package/src/utils/useLivePreview.ts

@@ -1,17 +0,0 @@
-export function useLivePreview() {
-	return usePreviewMode({
-		// Enable preview mode when both preview and token params exist in URL
-		shouldEnable: () => {
-			const route = useRoute();
-			return !!route.query.preview && !!route.query.token;
-		},
-
-		// Store the token from the URL for use in API calls
-		getState: (currentState) => {
-			const route = useRoute();
-			return {
-				token: route.query.token || currentState.token,
-			};
-		},
-	});
-}

package/src/utils/useVisualEditing.ts

@@ -1,38 +0,0 @@
-import { apply as applyVisualEditing, setAttr } from '@directus/visual-editing';
-import type { PrimaryKey } from '@directus/types';
-
-interface ApplyOptions {
-	directusUrl: string;
-	elements?: HTMLElement[] | HTMLElement;
-	onSaved?: (data: { collection?: string; item?: PrimaryKey | null; payload?: Record<string, any> }) => void;
-	customClass?: string;
-}
-export default function useVisualEditing() {
-	// Use useState for state that persists across navigation
-	const isVisualEditingEnabled = useState('visual-editing-enabled', () => false);
-	const route = useRoute();
-	const {
-		public: { enableVisualEditing, directusUrl },
-	} = useRuntimeConfig();
-
-	// Check query param on composable initialization.
-	if (route.query['visual-editing'] === 'true' && enableVisualEditing) {
-		isVisualEditingEnabled.value = true;
-	} else if (route.query['visual-editing'] === 'false') {
-		isVisualEditingEnabled.value = false;
-	}
-
-	const apply = (options: Pick<ApplyOptions, 'elements' | 'onSaved' | 'customClass'>) => {
-		if (!isVisualEditingEnabled.value) return;
-		applyVisualEditing({
-			...options,
-			directusUrl,
-		});
-	};
-
-	return {
-		isVisualEditingEnabled,
-		apply,
-		setAttr,
-	};
-}