@mframework/layer-shared 0.0.1

package/dist/app/composables/globals/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/app/composables/globals/useDirectusForm.d.ts

@@ -0,0 +1,10 @@
+import type { Ref } from 'vue';
+export declare function useDirectusForm(collectionName: string, fieldsRef: Ref<any[]>, opts?: {
+    clearOnSuccess?: boolean;
+    closeDialogRef?: Ref<boolean>;
+}): {
+    form: Ref<Record<string, any>, Record<string, any>>;
+    formError: Ref<string | null, string | null>;
+    formSuccess: Ref<string | null, string | null>;
+    submitForm: () => Promise<void>;
+};

package/dist/app/composables/globals/useDirectusForm.js

@@ -0,0 +1,66 @@
+import { ref, provide } from 'vue';
+export function useDirectusForm(collectionName, fieldsRef, opts) {
+    const form = ref({});
+    const formError = ref(null);
+    const formSuccess = ref(null);
+    // provide form context for DirectusFormElement children
+    provide('directusForm', {
+        form,
+        fields: fieldsRef,
+    });
+    const submitForm = async () => {
+        formError.value = null;
+        formSuccess.value = null;
+        // Validate form data against field validation rules
+        for (const field of fieldsRef.value) {
+            if (field.meta?.validation) {
+                try {
+                    const validation = field.meta.validation;
+                    if (validation._and) {
+                        for (const rule of validation._and) {
+                            const fieldName = Object.keys(rule)[0];
+                            if (!fieldName)
+                                continue;
+                            const ruleDef = rule[fieldName];
+                            if (ruleDef && ruleDef._regex) {
+                                const regex = new RegExp(ruleDef._regex);
+                                const valueToTest = String(form.value[field.field] ?? '');
+                                if (!regex.test(valueToTest)) {
+                                    formError.value = field.meta.validation_message || field.meta.field + ' failed validation';
+                                    console.error(`Validation failed for ${field.field}: ${field.meta.validation_message || 'Invalid format'}`);
+                                    return; // Stop submission if validation fails
+                                }
+                            }
+                        }
+                    }
+                }
+                catch (err) {
+                    console.error(`Error parsing validation for ${field.field}:`, err);
+                }
+            }
+        }
+        const { $directus, $createItem } = useNuxtApp();
+        const result = await $directus.request($createItem(collectionName, form.value));
+        if (result.error) {
+            formError.value = result.error.message;
+            console.error(`Error creating ${collectionName}:`, result.error);
+            return; // Stop submission if error occurs
+        }
+        formSuccess.value = `${collectionName} created successfully`;
+        if (opts?.clearOnSuccess) {
+            form.value = {};
+        }
+        if (opts?.closeDialogRef) {
+            try {
+                opts.closeDialogRef.value = false;
+            }
+            catch (e) { }
+        }
+    };
+    return {
+        form,
+        formError,
+        formSuccess,
+        submitForm,
+    };
+}

package/dist/app/composables/globals/useFileManager.d.ts

@@ -0,0 +1,14 @@
+export interface FileManagerConfig {
+    maxSize?: number;
+    allowedTypes?: string[];
+    onProgress?: (progress: number) => void;
+    onSuccess?: (file: any) => void;
+    onError?: (error: Error) => void;
+}
+export declare function useFileManager(config?: FileManagerConfig): {
+    uploading: any;
+    progress: any;
+    error: any;
+    uploadToServer: (file: File) => Promise<any>;
+    uploadMultipleFiles: (files: FileList | File[]) => Promise<any[]>;
+};

package/dist/app/composables/globals/useFileManager.js

@@ -0,0 +1,62 @@
+export function useFileManager(config = {}) {
+    const uploading = ref(false);
+    const progress = ref(0);
+    const error = ref(null);
+    const uploadToServer = async (file) => {
+        if (config.maxSize && file.size > config.maxSize) {
+            const errorMsg = `File size exceeds ${formatFileSize(config.maxSize)}`;
+            error.value = errorMsg;
+            config.onError?.(new Error(errorMsg));
+            throw new Error(errorMsg);
+        }
+        if (config.allowedTypes && !config.allowedTypes.includes(file.type)) {
+            const errorMsg = 'File type not allowed';
+            error.value = errorMsg;
+            config.onError?.(new Error(errorMsg));
+            throw new Error(errorMsg);
+        }
+        const formData = new FormData();
+        formData.append('file', file);
+        uploading.value = true;
+        progress.value = 0;
+        error.value = null;
+        try {
+            const response = await $fetch('/api/file/upload', {
+                method: 'POST',
+                body: formData
+            });
+            config.onSuccess?.(response.file);
+            return response.file;
+        }
+        catch (err) {
+            const errorMsg = err.data?.message || 'Upload failed';
+            error.value = errorMsg;
+            config.onError?.(new Error(errorMsg));
+            throw err;
+        }
+        finally {
+            uploading.value = false;
+        }
+    };
+    const uploadMultipleFiles = async (files) => {
+        const fileArray = Array.from(files);
+        const results = [];
+        for (const file of fileArray) {
+            try {
+                const result = await uploadToServer(file);
+                results.push(result);
+            }
+            catch (err) {
+                results.push({ error: err.message });
+            }
+        }
+        return results;
+    };
+    return {
+        uploading: readonly(uploading),
+        progress: readonly(progress),
+        error: readonly(error),
+        uploadToServer,
+        uploadMultipleFiles
+    };
+}

package/dist/app/composables/globals/useLivePreview.d.ts

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

package/dist/app/composables/globals/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/app/composables/globals/useLoading.d.ts

@@ -0,0 +1,6 @@
+export declare const useLoading: () => {
+    loading: any;
+    loadingText: any;
+    startLoading: (text?: string) => void;
+    stopLoading: () => void;
+};

package/dist/app/composables/globals/useLoading.js

@@ -0,0 +1,19 @@
+// composables/useLoading.ts
+export const useLoading = () => {
+    const loading = ref(false);
+    const loadingText = ref('');
+    const startLoading = (text = 'Loading...') => {
+        loading.value = true;
+        loadingText.value = text;
+    };
+    const stopLoading = () => {
+        loading.value = false;
+        loadingText.value = '';
+    };
+    return {
+        loading,
+        loadingText,
+        startLoading,
+        stopLoading
+    };
+};

package/dist/app/composables/globals/useNotifications.d.ts

@@ -0,0 +1,35 @@
+export interface Notification {
+    id: string;
+    title: string;
+    content: string;
+    date: string;
+    type: 'order' | 'account' | 'social' | 'system';
+    isRead: boolean;
+    source: 'magento' | 'directus';
+    payload?: any;
+}
+export declare function useNotifications(): {
+    notifications: import("vue").Ref<{
+        id: string;
+        title: string;
+        content: string;
+        date: string;
+        type: "order" | "account" | "social" | "system";
+        isRead: boolean;
+        source: "magento" | "directus";
+        payload?: any;
+    }[], Notification[] | {
+        id: string;
+        title: string;
+        content: string;
+        date: string;
+        type: "order" | "account" | "social" | "system";
+        isRead: boolean;
+        source: "magento" | "directus";
+        payload?: any;
+    }[]>;
+    unreadCount: import("vue").Ref<number, number>;
+    markAsRead: (notificationId: string, source: "magento" | "directus") => Promise<void>;
+    markAllAsRead: () => Promise<void>;
+    updateUnreadCount: () => void;
+};

package/dist/app/composables/globals/useNotifications.js

@@ -0,0 +1,133 @@
+import { ref, onMounted } from 'vue';
+import { useAsyncData, useNuxtApp } from '#imports';
+export function useNotifications() {
+    const notifications = ref([]);
+    const unreadCount = ref(0);
+    const { $directus, $readItems, $updateItem } = useNuxtApp();
+    // Fetch notifications from Directus
+    const fetchDirectusNotifications = async () => {
+        try {
+            const { data } = await useAsyncData('directusNotifications', () => {
+                return $directus.request($readItems('notifications', {
+                    filter: {
+                        recipient: { _eq: 'current_user' }
+                    },
+                    sort: ['-date_created']
+                }));
+            });
+            if (data.value) {
+                const formattedNotifications = data.value.map((notification) => ({
+                    id: String(notification.id),
+                    title: String(notification.subject),
+                    content: String(notification.message),
+                    date: String(notification.timestamp),
+                    type: (['order', 'account', 'social', 'system'].includes(notification.collection) ? notification.collection : 'system'),
+                    isRead: notification.status === 'read',
+                    source: 'directus',
+                    payload: notification.item
+                }));
+                notifications.value = [...notifications.value, ...formattedNotifications];
+            }
+        }
+        catch (error) {
+            console.error('Error fetching Directus notifications:', error);
+        }
+    };
+    // Fetch notifications from Magento
+    const fetchMagentoNotifications = async () => {
+        try {
+            // Replace with your Magento API endpoint
+            const response = await fetch('/api/magento/notifications');
+            if (!response.ok) {
+                const text = await response.text().catch(() => '');
+                console.error('Magento notifications fetch failed', { status: response.status, body: text });
+                return;
+            }
+            const data = await response.json();
+            const formattedNotifications = data.map((notification) => ({
+                id: String(notification.id),
+                title: String(notification.title),
+                content: String(notification.message),
+                date: String(notification.created_at),
+                type: (['order', 'account', 'social', 'system'].includes(notification.type) ? notification.type : 'system'),
+                isRead: Boolean(notification.is_read),
+                source: 'magento',
+                payload: notification.payload
+            }));
+            notifications.value = [...notifications.value, ...formattedNotifications];
+        }
+        catch (error) {
+            console.error('Error fetching Magento notifications:', error?.message ?? String(error));
+        }
+    };
+    // Mark notification as read
+    const markAsRead = async (notificationId, source) => {
+        try {
+            if (source === 'directus') {
+                await $directus.request($updateItem('notifications', notificationId, {
+                    status: 'read'
+                }));
+            }
+            else {
+                // Update Magento notification
+                await fetch(`/api/magento/notifications/${notificationId}/read`, {
+                    method: 'POST'
+                });
+            }
+            // Update local state
+            const notification = notifications.value.find(n => n.id === notificationId);
+            if (notification) {
+                notification.isRead = true;
+                unreadCount.value = Math.max(0, unreadCount.value - 1);
+            }
+        }
+        catch (error) {
+            console.error('Error marking notification as read:', error);
+        }
+    };
+    // Mark all notifications as read
+    const markAllAsRead = async () => {
+        try {
+            // Update Directus notifications
+            await $directus.request($updateItem('notifications', {
+                filter: {
+                    recipient: { _eq: 'current_user' },
+                    status: { _eq: 'inbox' }
+                },
+                data: {
+                    status: 'read'
+                }
+            }));
+            // Update Magento notifications
+            await fetch('/api/magento/notifications/read-all', {
+                method: 'POST'
+            });
+            // Update local state
+            notifications.value.forEach(notification => {
+                notification.isRead = true;
+            });
+            unreadCount.value = 0;
+        }
+        catch (error) {
+            console.error('Error marking all notifications as read:', error);
+        }
+    };
+    // Calculate unread count
+    const updateUnreadCount = () => {
+        unreadCount.value = notifications.value.filter(n => !n.isRead).length;
+    };
+    onMounted(async () => {
+        await Promise.all([
+            fetchDirectusNotifications(),
+            fetchMagentoNotifications()
+        ]);
+        updateUnreadCount();
+    });
+    return {
+        notifications,
+        unreadCount,
+        markAsRead,
+        markAllAsRead,
+        updateUnreadCount
+    };
+}

package/dist/app/composables/globals/useRichText.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/app/composables/globals/useRichText.js

@@ -0,0 +1,32 @@
+import { RichText } from '@atproto/api';
+// creating richtext
+const rt = new RichText({
+    text: 'Hello @alice.com, check out this link: https://example.com',
+});
+await rt.detectFacets(agent); // automatically detects mentions and links
+const postRecord = {
+    $type: 'app.bsky.feed.post',
+    text: rt.text,
+    facets: rt.facets,
+    createdAt: new Date().toISOString(),
+};
+// rendering as markdown
+let markdown = '';
+for (const segment of rt.segments()) {
+    if (segment.isLink()) {
+        markdown += `[${segment.text}](${segment.link?.uri})`;
+    }
+    else if (segment.isMention()) {
+        markdown += `[${segment.text}](https://my-bsky-app.com/user/${segment.mention?.did})`;
+    }
+    else {
+        markdown += segment.text;
+    }
+}
+// calculating string lengths
+const rt2 = new RichText({ text: 'Hello' });
+console.log(rt2.length); // => 5
+console.log(rt2.graphemeLength); // => 5
+const rt3 = new RichText({ text: '👨‍👩‍👧‍👧' });
+console.log(rt3.length); // => 25
+console.log(rt3.graphemeLength); // => 1

package/dist/app/composables/globals/useServerRootMixin.d.ts

@@ -0,0 +1,3 @@
+export default function useServerRootMixin(indexName: string): {
+    instantsearch: any;
+};

package/dist/app/composables/globals/useServerRootMixin.js

@@ -0,0 +1,15 @@
+import { createServerRootMixin } from 'vue-instantsearch/vue3/es';
+export default function useServerRootMixin(indexName) {
+    const nuxtApp = useNuxtApp();
+    const searchClient = useMeilisearch();
+    const serverRootMixin = ref(createServerRootMixin({
+        searchClient,
+        indexName
+    }));
+    // Install SSR mixin
+    nuxtApp.vueApp.mixin(serverRootMixin.value);
+    // TODO: ensure mixin is only installed once
+    return {
+        instantsearch: serverRootMixin.value.data().instantsearch
+    };
+}

package/dist/app/composables/globals/useVisualEditing.d.ts

@@ -0,0 +1,17 @@
+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: any;
+};
+export {};

package/dist/app/composables/globals/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/app/composables/mappers/createMapper.d.ts

@@ -0,0 +1,2 @@
+import { MapperDefinition, MapperFn } from './types';
+export declare function createMapper<TInput, TOutput>(name: string, fn: MapperFn<TInput, TOutput>): MapperDefinition<TInput, TOutput>;

package/dist/app/composables/mappers/createMapper.js

@@ -0,0 +1,6 @@
+export function createMapper(name, fn) {
+    return {
+        name,
+        map: fn
+    };
+}

package/dist/app/composables/mappers/errors.d.ts

@@ -0,0 +1,6 @@
+export declare class MapperError extends Error {
+    constructor(message: string);
+}
+export declare class MapperNotFoundError extends MapperError {
+    constructor(name: string);
+}

package/dist/app/composables/mappers/errors.js

@@ -0,0 +1,12 @@
+export class MapperError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'MapperError';
+    }
+}
+export class MapperNotFoundError extends MapperError {
+    constructor(name) {
+        super(`Mapper "${name}" was not found`);
+        this.name = 'MapperNotFoundError';
+    }
+}

package/dist/app/composables/mappers/index.d.ts

@@ -0,0 +1,6 @@
+export * from './types';
+export * from './errors';
+export * from './createMapper';
+export * from './registry';
+export * from './zodMapper';
+export * from './testHarness';

package/dist/app/composables/mappers/index.js

@@ -0,0 +1,7 @@
+// /packages/mapper-core/index.ts
+export * from './types';
+export * from './errors';
+export * from './createMapper';
+export * from './registry';
+export * from './zodMapper';
+export * from './testHarness';

package/dist/app/composables/mappers/registry.d.ts

@@ -0,0 +1,5 @@
+import { MapperDefinition } from './types';
+export declare function registerMapper<TInput, TOutput>(mapper: MapperDefinition<TInput, TOutput>): void;
+export declare function getMapper<TInput, TOutput>(name: string): MapperDefinition<TInput, TOutput>;
+export declare function hasMapper(name: string): boolean;
+export declare function listMappers(): string[];