@meeovi/directus-client 1.0.0 → 1.0.2

package/dist/utils/useDirectusField.d.ts

@@ -0,0 +1,10 @@
+export declare function useDirectusField(field: any, modelValue: any, emit: any, formContext?: any): {
+    internalValue: import("vue").WritableComputedRef<any, any>;
+    internalAuto: import("vue").ComputedRef<boolean>;
+    label: import("vue").ComputedRef<string>;
+    fieldLookup: import("vue").ComputedRef<any>;
+    required: import("vue").ComputedRef<boolean>;
+    safeOptions: import("vue").ComputedRef<any>;
+    defaultValue: import("vue").ComputedRef<any>;
+    isMultiple: import("vue").ComputedRef<boolean>;
+};

package/dist/utils/useDirectusField.js

@@ -0,0 +1,119 @@
+import { ref, computed, watch } from "vue";
+import Input from "~/components/ui/forms/TextInput.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 TiptapEditor from "~/components/ui/forms/TiptapEditor.vue";
+export function useDirectusField(field, modelValue, emit, formContext) {
+    const internalValue = computed({
+        get: () => modelValue,
+        set: (v) => emit("update:modelValue", v),
+    });
+    const previousAuto = ref(null);
+    const internalAuto = computed(() => {
+        return previousAuto.value != null && internalValue.value === previousAuto.value;
+    });
+    const slugify = (val) => 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 = meta?.options?.source ?? meta?.options?.from ?? null;
+        if (!sourceField && formContext.fields) {
+            const candidates = ["name", "title"];
+            sourceField =
+                candidates.find((c) => formContext.fields.value.some((f) => f.field === c)) ?? null;
+        }
+        if (sourceField) {
+            watch(() => formContext.form.value?.[sourceField], (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] ?? "";
+                    const regenerated = slugify(String(sourceVal));
+                    if (regenerated) {
+                        formContext.form.value[field.field] = regenerated;
+                        internalValue.value = regenerated;
+                        previousAuto.value = regenerated;
+                    }
+                }
+            });
+        }
+    }
+    // --- Label prettifier ---
+    const prettify = (s) => 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/dist/utils/useDirectusRequest.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Centralized safe wrapper around `$directus.request`.
+ * Shows a toast error when the Directus client or `.request` is not available.
+ */
+export default function useDirectusRequest(): {
+    request: (config: any) => Promise<any>;
+};

package/dist/utils/useDirectusRequest.js

@@ -0,0 +1,33 @@
+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();
+    async function request(config) {
+        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/dist/utils/useLivePreview.d.ts

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

package/dist/utils/useLivePreview.js

@@ -0,0 +1,16 @@
+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/dist/utils/useVisualEditing.d.ts

@@ -0,0 +1,18 @@
+import { 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(): {
+    isVisualEditingEnabled: any;
+    apply: (options: Pick<ApplyOptions, "elements" | "onSaved" | "customClass">) => void;
+    setAttr: typeof setAttr;
+};
+export {};

package/dist/utils/useVisualEditing.js

@@ -0,0 +1,27 @@
+import { apply as applyVisualEditing, setAttr } from '@directus/visual-editing';
+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) => {
+        if (!isVisualEditingEnabled.value)
+            return;
+        applyVisualEditing({
+            ...options,
+            directusUrl,
+        });
+    };
+    return {
+        isVisualEditingEnabled,
+        apply,
+        setAttr,
+    };
+}

package/dist/utils/visualEditing.d.ts

@@ -0,0 +1,21 @@
+import { 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 declare function createVisualEditing(options: VisualEditingOptions): {
+    isEnabled: boolean;
+    apply: (opts: ApplyOptions) => void;
+    setAttr: typeof setAttr;
+};

package/dist/utils/visualEditing.js

@@ -0,0 +1,25 @@
+import { apply as applyVisualEditing, setAttr } from '@directus/visual-editing';
+export function createVisualEditing(options) {
+    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) => {
+        if (!isEnabled)
+            return;
+        applyVisualEditing({
+            ...opts,
+            directusUrl,
+        });
+    };
+    return {
+        isEnabled,
+        apply,
+        setAttr,
+    };
+}

package/dist/vue/DirectusProvider.d.ts

@@ -0,0 +1,15 @@
+export declare const DirectusKey: unique symbol;
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    client: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    client: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/vue/DirectusProvider.js

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

package/dist/vue/useDirectus.d.ts

@@ -0,0 +1,2 @@
+import type { MeeoviDirectusClient } from '../client/createClient';
+export declare function useVueDirectus<Schema>(): MeeoviDirectusClient<Schema>;

package/dist/vue/useDirectus.js

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

package/package.json

@@ -1,20 +1,31 @@
 {
   "name": "@meeovi/directus-client",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
+  "version": "1.0.2",
+  "description": "Directus Client Library with auto generating forms and tables, Directus SDK and Types, and vue/react components for Directus Visual Editing.",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc -p tsconfig.json"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "type": "commonjs",
+  "type": "module",
   "dependencies": {
     "@directus/sdk": "^18.0.3",
     "@directus/types": "^14.0.0",
     "@directus/visual-editing": "^1.1.0",
     "react": "^19.2.3",
+    "tsc": "^2.0.4",
+    "typescript": "^5.9.3",
     "vue": "^3.5.24"
   },
   "devDependencies": {

package/src/client/createClient.ts

@@ -1,5 +1,3 @@
-// src/client/createClient.ts
-
 import {
   createDirectus,
   rest,
@@ -11,11 +9,13 @@ import {
   deleteItem,
   uploadFiles,
   readSingleton,
-  readFieldsByCollection
+  readFieldsByCollection,
+  type DirectusClient
 } from '@directus/sdk';
 
 export interface MeeoviDirectusClient<Schema> {
-  client: ReturnType<typeof createDirectus<Schema>>;
+  client: DirectusClient<Schema>;
+  request: any;
   readItem: typeof readItem;
   readItems: typeof readItems;
   createItem: typeof createItem;
@@ -33,6 +33,7 @@ export function createMeeoviDirectusClient<Schema>(url: string): MeeoviDirectusC
 
   return {
     client,
+    request: client.request,
     readItem,
     readItems,
     createItem,

package/src/generators/form-engine.ts

@@ -1,89 +1,39 @@
 import type { DirectusField } from '../schema/types';
-
-export interface FormEngineOptions {
-  clearOnSuccess?: boolean;
-  onSuccess?: () => void;
-  onError?: (msg: string) => void;
+import { widgetRegistry } from './widget-registry';
+
+export interface GeneratedFormField {
+  key: string;
+  widget: string;
+  type: string;
+  options?: Record<string, any>;
+  fields?: GeneratedFormField[];
+  isRepeatable?: boolean;
+  isFile?: boolean;
+  isRelational?: boolean;
 }
 
-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;
+export function generateFormField(field: DirectusField): GeneratedFormField {
+  const widget = widgetRegistry[field.interface || 'input'];
+
+  const base: GeneratedFormField = {
+    key: field.field,
+    widget: widget.component,
+    type: field.type,
+    options: field.options || {},
+    isRepeatable: widget.isRepeatable,
+    isFile: widget.isFile,
+    isRelational: widget.isRelational
   };
 
-  const submit = async () => {
-    if (!validate()) return { error, success };
+  if ((field.interface === 'repeater' || field.interface === 'group') && field.options?.fields) {
+    base.fields = field.options.fields.map((sub: any) => generateFormField(sub));
+  }
 
-    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 base;
+}
 
-  return {
-    form,
-    submit,
-    get error() {
-      return error;
-    },
-    get success() {
-      return success;
-    }
-  };
+export function generateFormSchema(fields: DirectusField[]): GeneratedFormField[] {
+  return fields
+    .filter(f => f.interface !== 'presentation' && f.interface !== 'divider')
+    .map(generateFormField);
 }

package/src/generators/widget-registry.ts

@@ -1,7 +1,74 @@
-export const widgetRegistry = {
-  text: { component: 'TextInput' },
-  number: { component: 'NumberInput' },
+import { readItems } from "@directus/sdk";
+
+export interface WidgetDefinition {
+  component: string;
+  props?: Record<string, any>;
+  isRepeatable?: boolean;
+  isRelational?: boolean;
+  isFile?: boolean;
+}
+
+export const widgetRegistry: Record<string, WidgetDefinition> = {
+  // Basic inputs
+  input: { component: 'TextInput' },
+  textarea: { component: 'TextareaInput' },
+  boolean: { component: 'ToggleInput' },
+  slider: { component: 'SliderInput' },
+  color: { component: 'ColorPicker' },
+  rating: { component: 'RatingInput' },
+
+  // Selects
+  'select-dropdown': { component: 'SelectInput' },
+  'select-multiple-dropdown': { component: 'MultiSelectInput' },
+  tags: { component: 'TagInput' },
   checkbox: { component: 'CheckboxInput' },
+  radio: { component: 'RadioInput' },
+
+  // Date/time
+  datetime: { component: 'DateTimeInput' },
   date: { component: 'DateInput' },
-  json: { component: 'JsonEditor' }
+  time: { component: 'TimeInput' },
+
+  // Files
+  file: { component: 'FileInput', isFile: true },
+  files: { component: 'FilesInput', isFile: true },
+  image: { component: 'ImageInput', isFile: true },
+  images: { component: 'ImagesInput', isFile: true },
+
+  // Complex
+  repeater: { component: 'RepeaterInput', isRepeatable: true },
+  group: { component: 'GroupInput' },
+  json: { component: 'JsonEditor' },
+  code: { component: 'CodeEditor' },
+  wysiwyg: { component: 'WysiwygEditor' },
+  markdown: { component: 'MarkdownEditor' },
+
+  // Directus-specific
+  icon: { component: 'IconPicker' },
+  user: { component: 'UserSelect' },
+  role: { component: 'RoleSelect' },
+  translation: { component: 'TranslationInput' },
+
+  // Presentation (ignored in forms)
+  presentation: { component: 'PresentationBlock' },
+  divider: { component: 'DividerBlock' }
 };
+
+export async function extendWidgetRegistryFromDirectus(client: any) {
+  const extensions = await client.request(
+    readItems<any, any, any>('directus_extensions')
+  );
+
+  for (const ext of extensions) {
+    if (ext.type !== 'interface') continue;
+
+    const name = ext.name;
+
+    if (!widgetRegistry[name]) {
+      widgetRegistry[name] = {
+        component: 'CustomInterfaceRenderer',
+        props: { interfaceName: name }
+      };
+    }
+  }
+}

package/src/react/useDirectus.ts

@@ -2,7 +2,7 @@ import { useContext } from 'react';
 import { DirectusContext } from './DirectusProvider';
 import type { MeeoviDirectusClient } from '../client/createClient';
 
-export function useRDirectus<Schema>() {
+export function useReactDirectus<Schema>() {
   const client = useContext(DirectusContext) as MeeoviDirectusClient<Schema> | null;
 
   if (!client) {

package/src/utils/livePreview.ts

@@ -0,0 +1,24 @@
+export interface LivePreviewState {
+  token?: string;
+}
+
+export interface LivePreviewOptions {
+  query?: Record<string, string | undefined>;
+  initialState?: LivePreviewState;
+}
+
+export function createLivePreview(options: LivePreviewOptions) {
+  const { query = {}, initialState = {} } = options;
+
+  const shouldEnable =
+    Boolean(query.preview) && Boolean(query.token);
+
+  const state: LivePreviewState = {
+    token: query.token || initialState.token,
+  };
+
+  return {
+    enabled: shouldEnable,
+    state,
+  };
+}