@meeovi/directus-client 1.0.0

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@meeovi/directus-client",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "dependencies": {
+    "@directus/sdk": "^18.0.3",
+    "@directus/types": "^14.0.0",
+    "@directus/visual-editing": "^1.1.0",
+    "react": "^19.2.3",
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.9"
+  }
+}

package/src/client/createClient.ts

@@ -0,0 +1,45 @@
+// src/client/createClient.ts
+
+import {
+  createDirectus,
+  rest,
+  authentication,
+  readItem,
+  readItems,
+  createItem,
+  updateItem,
+  deleteItem,
+  uploadFiles,
+  readSingleton,
+  readFieldsByCollection
+} from '@directus/sdk';
+
+export interface MeeoviDirectusClient<Schema> {
+  client: ReturnType<typeof createDirectus<Schema>>;
+  readItem: typeof readItem;
+  readItems: typeof readItems;
+  createItem: typeof createItem;
+  updateItem: typeof updateItem;
+  deleteItem: typeof deleteItem;
+  uploadFiles: typeof uploadFiles;
+  readSingleton: typeof readSingleton;
+  readFieldsByCollection: typeof readFieldsByCollection;
+}
+
+export function createMeeoviDirectusClient<Schema>(url: string): MeeoviDirectusClient<Schema> {
+  const client = createDirectus<Schema>(url)
+    .with(rest())
+    .with(authentication());
+
+  return {
+    client,
+    readItem,
+    readItems,
+    createItem,
+    updateItem,
+    deleteItem,
+    uploadFiles,
+    readSingleton,
+    readFieldsByCollection
+  };
+}

package/src/generators/form-engine.ts

@@ -0,0 +1,89 @@
+import type { DirectusField } from '../schema/types';
+
+export interface FormEngineOptions {
+  clearOnSuccess?: boolean;
+  onSuccess?: () => void;
+  onError?: (msg: string) => void;
+}
+
+export function createFormEngine(
+  collectionName: string,
+  fields: DirectusField[],
+  directusClient: any,
+  opts?: FormEngineOptions
+) {
+  const form: Record<string, any> = {};
+  let error: string | null = null;
+  let success: string | null = null;
+
+  const validate = () => {
+    error = null;
+
+    for (const field of fields) {
+      const meta = field;
+      if (!meta?.validation) continue;
+
+      try {
+        const validation = meta.validation;
+
+        if (validation._and) {
+          for (const rule of validation._and) {
+            const fieldName = Object.keys(rule)[0];
+            if (!fieldName) continue;
+
+            const ruleDef = (rule as any)[fieldName];
+
+            if (ruleDef?._regex) {
+              const regex = new RegExp(ruleDef._regex);
+              const value = String(form[field.field] ?? '');
+
+              if (!regex.test(value)) {
+                error = meta.validation_message || `${field.field} failed validation`;
+                return false;
+              }
+            }
+          }
+        }
+      } catch {
+        error = `Validation error for ${field.field}`;
+        return false;
+      }
+    }
+
+    return true;
+  };
+
+  const submit = async () => {
+    if (!validate()) return { error, success };
+
+    const result = await directusClient.request(
+      directusClient.createItem(collectionName, form)
+    );
+
+    if (result?.error) {
+      error = result.error.message;
+      return { error, success };
+    }
+
+    success = `${collectionName} created successfully`;
+
+    if (opts?.clearOnSuccess) {
+      for (const key of Object.keys(form)) delete form[key];
+    }
+
+    opts?.onSuccess?.();
+
+    return { error, success };
+  };
+
+  return {
+    form,
+    submit,
+    get error() {
+      return error;
+    },
+    get success() {
+      return success;
+    }
+  };
+}

package/src/generators/table-engine.ts

@@ -0,0 +1,11 @@
+import type { DirectusField } from '../schema/types';
+
+export function generateTableSchema(fields: DirectusField[]) {
+  return fields
+    .filter(f => !f.hidden)
+    .map(f => ({
+      key: f.field,
+      label: f.field.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase()),
+      type: f.type
+    }));
+}

package/src/generators/validation-engine.ts

@@ -0,0 +1,29 @@
+import type { DirectusField } from '../schema/types';
+
+export function validateField(field: DirectusField, value: any): string | null {
+  if (!field.validation) return null;
+
+  try {
+    const validation = field.validation;
+
+    if (validation._and) {
+      for (const rule of validation._and) {
+        const fieldName = Object.keys(rule)[0];
+        if (!fieldName) continue;
+
+        const ruleDef = (rule as any)[fieldName];
+
+        if (ruleDef?._regex) {
+          const regex = new RegExp(ruleDef._regex);
+          if (!regex.test(String(value ?? ''))) {
+            return field.validation_message || `${field.field} failed validation`;
+          }
+        }
+      }
+    }
+  } catch {
+    return `Validation error for ${field.field}`;
+  }
+
+  return null;
+}

package/src/generators/widget-registry.ts

@@ -0,0 +1,7 @@
+export const widgetRegistry = {
+  text: { component: 'TextInput' },
+  number: { component: 'NumberInput' },
+  checkbox: { component: 'CheckboxInput' },
+  date: { component: 'DateInput' },
+  json: { component: 'JsonEditor' }
+};

package/src/index.ts

@@ -0,0 +1,21 @@
+// src/index.ts
+
+export * from './client/createClient';
+
+// Vue bindings
+export { default as DirectusVueProvider } from './vue/DirectusProvider';
+export * from './vue/useDirectus';
+
+// React bindings
+export { DirectusProvider as DirectusReactProvider } from './react/DirectusProvider';
+export * from './react/useDirectus';
+
+// Schema + generators + utils
+export * from './schema/types';
+export * from './schema/introspect';
+export * from './utils/collections';
+export * from './utils/fields';
+export * from './generators/form-engine';
+export * from './generators/table-engine';
+export * from './generators/validation-engine';
+export * from './generators/widget-registry';

package/src/react/DirectusProvider.tsx

@@ -0,0 +1,18 @@
+import React, { createContext } from 'react';
+import type { MeeoviDirectusClient } from '../client/createClient';
+
+export const DirectusContext = createContext<MeeoviDirectusClient<any> | null>(null);
+
+export function DirectusProvider({
+  client,
+  children
+}: {
+  client: MeeoviDirectusClient<any>;
+  children: React.ReactNode;
+}) {
+  return (
+    <DirectusContext.Provider value={client}>
+      {children}
+    </DirectusContext.Provider>
+  );
+}

package/src/react/useDirectus.ts

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { DirectusContext } from './DirectusProvider';
+import type { MeeoviDirectusClient } from '../client/createClient';
+
+export function useRDirectus<Schema>() {
+  const client = useContext(DirectusContext) as MeeoviDirectusClient<Schema> | null;
+
+  if (!client) {
+    throw new Error('Directus client not provided. Wrap your app in <DirectusProvider>.');
+  }
+
+  return client;
+}

package/src/schema/introspect.ts

@@ -0,0 +1,47 @@
+// schema/introspect.ts
+
+import {
+  readFieldsByCollection,
+  readItems
+} from '@directus/sdk';
+import type {
+  DirectusSchema,
+  DirectusField,
+  DirectusCollection,
+  DirectusRelation,
+} from './types';
+
+export async function introspectCollections(client: any): Promise<DirectusCollection[]> {
+  return await client.request((readItems as any)('directus_collection'));
+}
+
+export async function introspectFields(client: any, collection: string): Promise<DirectusField[]> {
+  return await client.request((readFieldsByCollection as any)(collection));
+}
+
+export async function introspectRelations(client: any): Promise<DirectusRelation[]> {
+  return await client.request((readItems as any)('directus_relations'));
+}
+
+export async function introspectSchema(client: any): Promise<DirectusSchema> {
+  const [collections, relations] = await Promise.all([
+    introspectCollections(client),
+    introspectRelations(client),
+  ]);
+
+  const fields: DirectusField[] = [];
+
+  for (const col of collections) {
+    const colFields = await introspectFields(client, col.collection);
+    fields.push(...colFields);
+  }
+
+  return {
+    collections,
+    fields,
+    relations,
+    directus_collections: collections,
+    directus_fields: fields,
+    directus_relations: relations,
+  };
+}

package/src/schema/types.ts

@@ -0,0 +1,59 @@
+export interface DirectusField {
+    collection: string;
+    field: string;
+    type: string;
+    interface ? : string;
+    options ? : Record < string,
+    any > ;
+    required ? : boolean;
+    readonly ? : boolean;
+    hidden ? : boolean;
+    sort ? : number;
+    special ? : string[];
+    validation ? : Record < string,
+    any > ;
+    validation_message ? : string;
+}
+
+export interface DirectusRelation {
+    collection: string;
+    field: string;
+    related_collection: string | null;
+    meta ? : Record < string,
+    any > ;
+}
+
+export interface DirectusCollection {
+    collection: string;
+    meta ? : Record < string,
+    any > ;
+    schema ? : Record < string,
+    any > ;
+}
+
+export interface DirectusSchema {
+    directus_collections: DirectusCollection[];
+    directus_relations: DirectusRelation[];
+    directus_fields: DirectusField[];
+    collections: DirectusCollection[];
+    fields: DirectusField[];
+    relations: DirectusRelation[];
+}
+
+export interface GeneratedFieldSchema {
+    key: string;
+    type: string;
+    widget: string;
+    required: boolean;
+    readonly: boolean;
+    hidden: boolean;
+    options ? : Record < string,
+    any > ;
+    validation ? : Record < string,
+    any > ;
+}
+
+export interface GeneratedCollectionSchema {
+    collection: string;
+    fields: GeneratedFieldSchema[];
+}

package/src/utils/collections.ts

@@ -0,0 +1,18 @@
+import type { DirectusSchema, DirectusCollection, DirectusField } from '../schema/types';
+
+export function getCollection(schema: DirectusSchema, name: string): DirectusCollection | undefined {
+  return schema.collections.find(c => c.collection === name);
+}
+
+export function getCollectionFields(schema: DirectusSchema, name: string): DirectusField[] {
+  return schema.fields.filter(f => f.collection === name);
+}
+
+export function listCollections(schema: DirectusSchema): string[] {
+  return schema.collections.map(c => c.collection);
+}
+
+export function isSingleton(schema: DirectusSchema, name: string): boolean {
+  const col = getCollection(schema, name);
+  return col?.meta?.singleton === true;
+}

package/src/utils/fields.ts

@@ -0,0 +1,52 @@
+import type {
+  DirectusField,
+  GeneratedFieldSchema,
+} from '../schema/types';
+
+export function mapFieldToWidget(field: DirectusField): string {
+  if (field.interface) return field.interface;
+
+  switch (field.type) {
+    case 'string':
+    case 'text':
+      return 'text';
+
+    case 'integer':
+    case 'bigInteger':
+    case 'float':
+    case 'decimal':
+      return 'number';
+
+    case 'boolean':
+      return 'checkbox';
+
+    case 'date':
+    case 'dateTime':
+      return 'date';
+
+    case 'json':
+      return 'json';
+
+    default:
+      return 'text';
+  }
+}
+
+export function generateFieldSchema(field: DirectusField): GeneratedFieldSchema {
+  return {
+    key: field.field,
+    type: field.type,
+    widget: mapFieldToWidget(field),
+    required: field.required ?? false,
+    readonly: field.readonly ?? false,
+    hidden: field.hidden ?? false,
+    options: field.options ?? {},
+    validation: field.validation ?? {},
+  };
+}
+
+export function generateFieldsSchema(fields: DirectusField[]): GeneratedFieldSchema[] {
+  return fields
+    .sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0))
+    .map(generateFieldSchema);
+}

package/src/utils/useDirectusField.ts

@@ -0,0 +1,144 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,38 @@
+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,
+	};
+}

package/src/vue/DirectusProvider.ts

@@ -0,0 +1,15 @@
+import { defineComponent, provide } from 'vue';
+import type { MeeoviDirectusClient } from '../client/createClient';
+
+export const DirectusKey = Symbol('DirectusClient');
+
+export default defineComponent({
+  name: 'DirectusProvider',
+  props: {
+    client: { type: Object, required: true }
+  },
+  setup(props, { slots }) {
+    provide(DirectusKey, props.client as MeeoviDirectusClient<any>);
+    return () => slots.default?.();
+  }
+});

package/src/vue/useDirectus.ts

@@ -0,0 +1,13 @@
+import { inject } from 'vue';
+import { DirectusKey } from './DirectusProvider';
+import type { MeeoviDirectusClient } from '../client/createClient';
+
+export function useVDirectus<Schema>() {
+  const client = inject<MeeoviDirectusClient<Schema>>(DirectusKey);
+
+  if (!client) {
+    throw new Error('Directus client not provided. Wrap your app in <DirectusProvider>.');
+  }
+
+  return client;
+}