@mframework/ui 0.1.0-beta.0 → 0.1.0-beta.1

package/dist/modules/ui/src/runtime/plugins/theme-switcher.js

@@ -0,0 +1,27 @@
+import { defineNuxtPlugin } from 'nuxt/app';
+import { useTheme } from 'vuetify';
+export default defineNuxtPlugin((nuxtApp) => {
+    if (process.server)
+        return;
+    const theme = useTheme();
+    const setTheme = (mode) => {
+        theme.global.name.value = mode;
+        document.documentElement.classList.toggle('dark', mode === 'dark');
+        localStorage.setItem('mframework-theme', mode);
+    };
+    const toggleTheme = () => {
+        const current = theme.global.name.value === 'light' ? 'dark' : 'light';
+        setTheme(current);
+    };
+    // Load saved theme
+    const saved = localStorage.getItem('mframework-theme');
+    if (saved === 'light' || saved === 'dark') {
+        setTheme(saved);
+    }
+    // Expose composable
+    nuxtApp.provide('mTheme', {
+        setTheme,
+        toggleTheme,
+        current: () => theme.global.name.value
+    });
+});

package/dist/modules/ui/src/runtime/plugins/theme.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/modules/ui/src/runtime/plugins/theme.js

@@ -0,0 +1,44 @@
+import { defineNuxtPlugin, useRuntimeConfig } from 'nuxt/app';
+import { useTheme } from 'vuetify';
+export default defineNuxtPlugin(() => {
+    if (process.server)
+        return;
+    const theme = useTheme();
+    const config = useRuntimeConfig();
+    const baseColors = {
+        primary: 'var(--m-primary)',
+        secondary: 'var(--m-secondary)',
+        accent: 'var(--m-accent)',
+        surface: 'var(--m-surface)',
+        background: 'var(--m-muted)',
+        border: 'var(--m-border)',
+        // Required Vuetify system colors
+        success: '#22c55e',
+        warning: '#f59e0b',
+        error: '#ef4444',
+        info: '#3b82f6',
+        // Vuetify internal required fields
+        'on-primary': '#ffffff',
+        'on-secondary': '#ffffff',
+        'on-surface': '#ffffff',
+        'on-background': '#ffffff',
+        'on-success': '#ffffff',
+        'on-warning': '#ffffff',
+        'on-error': '#ffffff',
+        'on-info': '#ffffff'
+    };
+    const defaultTheme = config.public.mframeworkUi?.theme || 'light';
+    theme.global.name.value = defaultTheme;
+    theme.themes.value = {
+        light: {
+            dark: false,
+            colors: baseColors,
+            variables: {}
+        },
+        dark: {
+            dark: true,
+            colors: baseColors,
+            variables: {}
+        }
+    };
+});

package/dist/modules/ui/src/runtime/plugins/vuetify.d.ts

@@ -0,0 +1,3 @@
+import 'vuetify/styles';
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/modules/ui/src/runtime/plugins/vuetify.js

@@ -0,0 +1,33 @@
+import { defineNuxtPlugin, useRuntimeConfig } from 'nuxt/app';
+import { createVuetify } from 'vuetify';
+import * as components from 'vuetify/components';
+import * as directives from 'vuetify/directives';
+import 'vuetify/styles';
+export default defineNuxtPlugin((nuxtApp) => {
+    const config = useRuntimeConfig();
+    const theme = config.public.mframeworkUi?.theme || 'light';
+    const vuetify = createVuetify({
+        components,
+        directives,
+        theme: {
+            defaultTheme: theme,
+            themes: {
+                light: {
+                    dark: false,
+                    colors: {
+                        primary: '#3b82f6',
+                        secondary: '#64748b'
+                    }
+                },
+                dark: {
+                    dark: true,
+                    colors: {
+                        primary: '#3b82f6',
+                        secondary: '#64748b'
+                    }
+                }
+            }
+        }
+    });
+    nuxtApp.vueApp.use(vuetify);
+});

package/dist/modules/ui/src/runtime/search/client.d.ts

@@ -0,0 +1,2 @@
+import type { SearchClient } from 'instantsearch.js';
+export declare function getSearchClient(): SearchClient | null;

package/dist/modules/ui/src/runtime/search/client.js

@@ -0,0 +1,21 @@
+export function getSearchClient() {
+    let mod;
+    try {
+        mod = require('@searchkit/instantsearch-client');
+    }
+    catch {
+        console.warn('[mframework-ui] Searchkit client missing');
+        return null;
+    }
+    const candidate = mod?.default?.default ||
+        mod?.default?.createClient ||
+        mod?.default ||
+        mod?.createClient ||
+        mod;
+    if (typeof candidate !== 'function')
+        return null;
+    const host = process.env.NUXT_PUBLIC_SEARCHKIT_HOST;
+    if (!host)
+        return null;
+    return candidate({ host });
+}

package/dist/modules/ui/src/runtime/search/plugin.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (nuxtApp: any) => void;
+export default _default;

package/dist/modules/ui/src/runtime/search/plugin.js

@@ -0,0 +1,7 @@
+import { getSearchClient } from './client';
+export default (nuxtApp) => {
+    const client = getSearchClient();
+    const indexName = process.env.NUXT_PUBLIC_SEARCH_INDEX || 'default';
+    nuxtApp.provide('mSearchClient', client);
+    nuxtApp.provide('mSearchIndex', indexName);
+};

package/dist/modules/ui/src/utils/color.d.ts

@@ -0,0 +1,2 @@
+declare function getContrastColor(hexColor: string): "#ffffff" | "#000000";
+export { getContrastColor };

package/dist/modules/ui/src/utils/color.js

@@ -0,0 +1,11 @@
+function getContrastColor(hexColor) {
+    // Convert hex color to RGB format
+    const red = parseInt(hexColor.slice(1, 3), 16);
+    const green = parseInt(hexColor.slice(3, 5), 16);
+    const blue = parseInt(hexColor.slice(5, 7), 16);
+    // Calculate relative luminance of the color
+    const luminance = (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255;
+    // Return black or white depending on the luminance value
+    return luminance > 0.5 ? '#000000' : '#ffffff';
+}
+export { getContrastColor };

package/dist/modules/ui/src/utils/fonts.d.ts

@@ -0,0 +1,5 @@
+type FontFamilies = {
+    [font: string]: boolean | number[];
+};
+export declare const formatFonts: (families: FontFamilies, defaultWeights?: number[]) => string[];
+export {};

package/dist/modules/ui/src/utils/fonts.js

@@ -0,0 +1,18 @@
+export const formatFonts = (families, defaultWeights = [400]) => {
+    const formatted = [];
+    for (const font in families) {
+        const formattedFont = font.replace(/ /g, '+'); // Replace spaces with '+'
+        const weights = families[font];
+        if (weights === true) {
+            for (const weight of defaultWeights) {
+                formatted.push(`${formattedFont}:${weight}`);
+            }
+        }
+        else if (Array.isArray(weights)) {
+            for (const weight of weights) {
+                formatted.push(`${formattedFont}:${weight}`);
+            }
+        }
+    }
+    return formatted;
+};

package/dist/modules/ui/src/utils/formkit.d.ts

@@ -0,0 +1,12 @@
+export interface Condition {
+    field: string;
+    action: 'show' | 'hide';
+    condition: 'is_empty' | 'is_filled' | 'contains' | 'not_contains' | 'equals' | 'not_equal';
+    value: string;
+}
+export declare function mapConditions(conditions: Condition[]): void;
+export declare function transformSchema(schema: Array<object>): {
+    $cmp: any;
+    children: any;
+    props: any;
+}[];

package/dist/modules/ui/src/utils/formkit.js

@@ -0,0 +1,59 @@
+import { unref } from 'vue';
+function convertBoolean(value) {
+    if (value === 'true' || value === 'false') {
+        return value === 'true';
+    }
+    else {
+        return value;
+    }
+}
+function mapCondition(condition, target) {
+    switch (condition) {
+        case 'is_empty':
+            return `!$get(${target}).value)`;
+        case 'is_filled':
+            return `$get(${target}).value)`;
+        default:
+            return undefined;
+    }
+}
+export function mapConditions(conditions) {
+    // Both $el and $cmp schema nodes can leverage an if property that roughly equates to a v-if in Vue. If the expression assigned to the if property is truthy, the node is rendered, otherwise it is not:
+}
+export function transformSchema(schema) {
+    // Loop through the form schema from Directus
+    // This is required for FormKit to work
+    const items = unref(schema);
+    return items.map((item) => {
+        const { conditions, field, name, children, ...props } = item;
+        // console.log('conditions', conditions);
+        // console.log('mapCondition', mapCondition(conditions[0].condition, field));
+        const cmpSchema = {
+            $cmp: item.$el ? item.$el : 'FormKit',
+            children: children,
+            // if: conditions ? mapCondition(conditions[0].condition, field) : undefined,
+            props: {
+                id: name,
+                ...props,
+            },
+        };
+        // Switch statement to handle item widths
+        switch (item.width) {
+            case '33':
+                cmpSchema.props.outerClass = 'md:col-span-2';
+                break;
+            case '50':
+                cmpSchema.props.outerClass = 'md:col-span-3';
+                break;
+            case '67':
+                cmpSchema.props.outerClass = 'md:col-span-4';
+                break;
+            case '100':
+                cmpSchema.props.outerClass = 'md:col-span-6';
+                break;
+            default:
+                cmpSchema.props.outerClass = 'md:col-span-6';
+        }
+        return cmpSchema;
+    });
+}

package/dist/modules/ui/src/utils/icons.d.ts

@@ -0,0 +1,4 @@
+type FileType = 'folder' | 'image/jpeg' | 'image/png' | 'image/gif' | 'image/svg+xml' | 'image/webp' | 'video/mp4' | 'video/quicktime' | 'audio/mp3' | 'audio/aac' | 'audio/wav' | 'audio/ogg' | 'text/csv' | 'text/plain' | 'application/pdf' | 'application/vnd.ms-excel' | 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' | 'application/msword' | 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' | 'application/vnd.ms-powerpoint' | 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
+export declare const fileIconMap: Record<FileType, string>;
+export declare function getFileIcon(filetype: FileType | string | null | undefined): string;
+export {};

package/dist/modules/ui/src/utils/icons.js

@@ -0,0 +1,36 @@
+export const fileIconMap = {
+    folder: 'material-symbols:folder',
+    // Images
+    'image/jpeg': 'material-symbols:image',
+    'image/png': 'material-symbols:image',
+    'image/gif': 'material-symbols:image',
+    'image/svg+xml': 'material-symbols:image',
+    'image/webp': 'material-symbols:image',
+    // Videos
+    'video/mp4': 'material-symbols:smart-display',
+    'video/quicktime': 'material-symbols:smart-display',
+    // Audio
+    'audio/mp3': 'material-symbols:audio-file',
+    'audio/aac': 'material-symbols:audio-file',
+    'audio/wav': 'material-symbols:audio-file',
+    'audio/ogg': 'material-symbols:audio-file',
+    // Text
+    'text/csv': 'material-symbols:csv',
+    'text/plain': 'material-symbols:text-snippet',
+    // Files
+    'application/pdf': 'material-symbols:picture-as-pdf-sharp',
+    'application/vnd.ms-excel': 'material-symbols:sheets',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'material-symbols:sheets',
+    'application/msword': 'material-symbols:docs',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'material-symbols:docs',
+    'application/vnd.ms-powerpoint': 'material-symbols:slides',
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'material-symbols:slides',
+};
+export function getFileIcon(filetype) {
+    if (!filetype)
+        return 'material-symbols:attachment';
+    if (typeof filetype === 'string' && !(filetype in fileIconMap)) {
+        return 'material-symbols:attachment';
+    }
+    return fileIconMap[filetype];
+}

package/dist/runtime/assets/config/tailwind.conifg.js

@@ -0,0 +1,11 @@
+const { tokens } = require('../../design/tokens')
+
+module.exports = {
+  theme: {
+    extend: {
+      colors: tokens.colors,
+      borderRadius: tokens.radius,
+      spacing: tokens.spacing
+    }
+  }
+}

package/dist/runtime/components/MButton.vue

@@ -0,0 +1,15 @@
+<template>
+    <v-btn :color="color" class="m-btn" v-bind="$attrs">
+        <slot />
+    </v-btn>
+</template>
+
+<script setup>
+defineProps({
+  color: { type: String, required: false }
+});
+</script>
+
+<style scoped>
+.m-btn{@apply px-4 py-2 rounded-md}
+</style>

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

@@ -0,0 +1,5 @@
+import 'izitoast/dist/css/iziToast.min.css';
+export declare const useMToast: () => {
+    success: (message: string, title?: string) => void;
+    error: (message: string, title?: string) => void;
+};

package/dist/runtime/composables/useMToast.js

@@ -0,0 +1,11 @@
+import iziToast from 'izitoast';
+import 'izitoast/dist/css/iziToast.min.css';
+export const useMToast = () => {
+    const success = (message, title = 'Success') => {
+        iziToast.success({ title, message });
+    };
+    const error = (message, title = 'Error') => {
+        iziToast.error({ title, message });
+    };
+    return { success, error };
+};

package/dist/runtime/plugins/builder.d.ts

@@ -0,0 +1,3 @@
+import 'grapesjs/dist/css/grapes.min.css';
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;