@mframework/ui 0.0.6-beta6 → 0.1.0-beta.1

package/dist/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/runtime/plugins/theme.d.ts

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

package/dist/runtime/plugins/theme.js

@@ -1,28 +1,34 @@
+import { defineNuxtPlugin, useRuntimeConfig } from 'nuxt/app';
 import { useTheme } from 'vuetify';
-export default (nuxtApp) => {
+export default defineNuxtPlugin(() => {
+    if (process.server)
+        return;
     const theme = useTheme();
-    // Attempt to read runtime config from nuxtApp (fallbacks to undefined)
-    const config = (nuxtApp && nuxtApp.$config && nuxtApp.$config.public && nuxtApp.$config.public.mframeworkUi) || {};
-    // 1. Load persisted theme
-    const stored = typeof localStorage !== 'undefined' ? localStorage.getItem('mframework-theme') : null;
-    const initial = stored || config?.theme?.default || 'light';
-    theme.global.name.value = initial;
-    // 2. Expose a global toggle
-    const toggleTheme = () => {
-        const newTheme = theme.global.current.value.dark ? 'light' : 'dark';
-        theme.global.name.value = newTheme;
-        if (typeof localStorage !== 'undefined')
-            localStorage.setItem('mframework-theme', newTheme);
-    };
-    // 3. Expose to app
-    nuxtApp.provide('mTheme', {
-        theme,
-        toggleTheme,
-        setTheme: (name) => {
-            ;
-            theme.global.name.value = name;
-            if (typeof localStorage !== 'undefined')
-                localStorage.setItem('mframework-theme', name);
+    const config = useRuntimeConfig();
+    const defaultTheme = config.public.mframeworkUi?.theme || 'light';
+    theme.global.name.value = defaultTheme;
+    theme.themes.value = {
+        light: {
+            dark: false,
+            colors: {
+                primary: 'var(--m-primary)',
+                secondary: 'var(--m-secondary)',
+                accent: 'var(--m-accent)',
+                surface: 'var(--m-surface)',
+                background: 'var(--m-muted)',
+                border: 'var(--m-border)'
+            }
+        },
+        dark: {
+            dark: true,
+            colors: {
+                primary: 'var(--m-primary)',
+                secondary: 'var(--m-secondary)',
+                accent: 'var(--m-accent)',
+                surface: 'var(--m-surface)',
+                background: 'var(--m-muted)',
+                border: 'var(--m-border)'
+            }
         }
-    });
-};
+    };
+});

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

@@ -1,88 +1,3 @@
-import '@mdi/font/css/materialdesignicons.css';
 import 'vuetify/styles';
-export declare const vuetify: {
-    install: (app: import("vue").App<any>) => void;
-    unmount: () => void;
-    defaults: import("vue").Ref<import("vuetify").DefaultsInstance, import("vuetify").DefaultsInstance>;
-    display: import("vuetify").DisplayInstance;
-    theme: import("vuetify").ThemeInstance & {
-        install: (app: import("vue").App<any>) => void;
-    };
-    icons: {
-        defaultSet: string;
-        aliases: Partial<import("vuetify").IconAliases>;
-        sets: Record<string, import("vuetify").IconSet>;
-    };
-    locale: {
-        name: string;
-        decimalSeparator: import("vue").ShallowRef<string>;
-        messages: import("vue").Ref<import("vuetify").LocaleMessages, import("vuetify").LocaleMessages>;
-        current: import("vue").Ref<string, string>;
-        fallback: import("vue").Ref<string, string>;
-        t: (key: string, ...params: unknown[]) => string;
-        n: (value: number) => string;
-        provide: (props: import("vuetify").LocaleOptions) => import("vuetify").LocaleInstance;
-        isRtl: import("vue").Ref<boolean, boolean>;
-        rtl: import("vue").Ref<Record<string, boolean>, Record<string, boolean>>;
-        rtlClasses: import("vue").Ref<string, string>;
-    };
-    date: {
-        options: {
-            adapter: (new (options: {
-                locale: any;
-                formats?: any;
-            }) => import("vuetify").DateInstance) | import("vuetify").DateInstance;
-            formats?: Record<string, any>;
-            locale: Record<string, any>;
-        };
-        instance: {
-            date: (value?: any) => unknown;
-            format: (date: unknown, formatString: string) => string;
-            toJsDate: (value: unknown) => Date;
-            parseISO: (date: string) => unknown;
-            toISO: (date: unknown) => string;
-            startOfDay: (date: unknown) => unknown;
-            endOfDay: (date: unknown) => unknown;
-            startOfWeek: (date: unknown, firstDayOfWeek?: string | number | undefined) => unknown;
-            endOfWeek: (date: unknown) => unknown;
-            startOfMonth: (date: unknown) => unknown;
-            endOfMonth: (date: unknown) => unknown;
-            startOfYear: (date: unknown) => unknown;
-            endOfYear: (date: unknown) => unknown;
-            isAfter: (date: unknown, comparing: unknown) => boolean;
-            isAfterDay: (date: unknown, comparing: unknown) => boolean;
-            isSameDay: (date: unknown, comparing: unknown) => boolean;
-            isSameMonth: (date: unknown, comparing: unknown) => boolean;
-            isSameYear: (date: unknown, comparing: unknown) => boolean;
-            isBefore: (date: unknown, comparing: unknown) => boolean;
-            isEqual: (date: unknown, comparing: unknown) => boolean;
-            isValid: (date: any) => boolean;
-            isWithinRange: (date: unknown, range: [unknown, unknown]) => boolean;
-            addMinutes: (date: unknown, amount: number) => unknown;
-            addHours: (date: unknown, amount: number) => unknown;
-            addDays: (date: unknown, amount: number) => unknown;
-            addWeeks: (date: unknown, amount: number) => unknown;
-            addMonths: (date: unknown, amount: number) => unknown;
-            getYear: (date: unknown) => number;
-            setYear: (date: unknown, year: number) => unknown;
-            getDiff: (date: unknown, comparing: unknown, unit?: string | undefined) => number;
-            getWeekArray: (date: unknown, firstDayOfWeek?: string | number | undefined) => unknown[][];
-            getWeekdays: (firstDayOfWeek?: string | number | undefined, weekdayFormat?: "long" | "narrow" | "short" | undefined) => string[];
-            getWeek: (date: unknown, firstDayOfWeek?: string | number | undefined, firstDayOfYear?: string | number | undefined) => number;
-            getMonth: (date: unknown) => number;
-            setMonth: (date: unknown, month: number) => unknown;
-            getDate: (date: unknown) => number;
-            setDate: (date: unknown, day: number) => unknown;
-            getNextMonth: (date: unknown) => unknown;
-            getPreviousMonth: (date: unknown) => unknown;
-            getHours: (date: unknown) => number;
-            setHours: (date: unknown, hours: number) => unknown;
-            getMinutes: (date: unknown) => number;
-            setMinutes: (date: unknown, minutes: number) => unknown;
-            locale?: any;
-        };
-    };
-    goTo: import("vuetify").GoToInstance;
-};
-declare const _default: (nuxtApp: any) => void;
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

package/dist/runtime/plugins/vuetify.js

@@ -1,60 +1,33 @@
-// plugins/vuetify.ts
-import '@mdi/font/css/materialdesignicons.css';
-import 'vuetify/styles';
+import { defineNuxtPlugin, useRuntimeConfig } from 'nuxt/app';
 import { createVuetify } from 'vuetify';
-import { aliases, fa } from 'vuetify/iconsets/fa-svg';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { fas } from '@fortawesome/free-solid-svg-icons';
 import * as components from 'vuetify/components';
-import * as labsComponents from 'vuetify/labs/components';
 import * as directives from 'vuetify/directives';
-import { mdi } from 'vuetify/iconsets/mdi';
-// Register fontawesome icons at module scope
-library.add(fas);
-// Create Vuetify instance at module scope so other runtime plugins can import it
-export const vuetify = createVuetify({
-    ssr: true,
-    directives,
-    icons: {
-        defaultSet: 'fa',
-        aliases,
-        sets: {
-            fa,
-            mdi,
-        },
-    },
-    components: {
-        ...components,
-        ...labsComponents,
-    },
-    theme: {
-        defaultTheme: 'light',
-        themes: {
-            light: {
-                dark: false,
-                variables: {}, // required to avoid Vuetify crash
-                colors: {
-                    primary: '#6200EE',
-                    'primary-darken-1': '#3700B3',
-                    secondary: '#03DAC6',
-                    'secondary-darken-1': '#018786',
-                    error: '#B00020',
-                    info: '#2196F3',
-                    success: '#4CAF50',
-                    warning: '#FB8C00',
+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,
-                variables: {},
-                colors: {},
-            },
-        },
-    },
-});
-export default (nuxtApp) => {
-    // Register FontAwesome component on the actual Vue app instance
-    nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon);
+                dark: {
+                    dark: true,
+                    colors: {
+                        primary: '#3b82f6',
+                        secondary: '#64748b'
+                    }
+                }
+            }
+        }
+    });
     nuxtApp.vueApp.use(vuetify);
-};
+});

package/dist/runtime/search/components/MSearch.vue

@@ -0,0 +1,19 @@
+<template>
+  <ais-instant-search :search-client="client" :index-name="index">
+    <ais-search-box />
+    <ais-hits>
+      <template #item="{ item }">
+        <slot name="hit" :item="item">
+          <div class="p-2 border rounded">
+            <ais-highlight attribute="title" :hit="item" />
+          </div>
+        </slot>
+      </template>
+    </ais-hits>
+  </ais-instant-search>
+</template>
+
+<script setup>
+const client = inject("mSearchClient");
+const index = inject("mSearchIndex");
+</script>

package/dist/runtime/styles/index.css

@@ -0,0 +1,5 @@
+@import './tailwind.css';
+:root {
+  --m-primary: #3b82f6;
+  --m-secondary: #64748b;
+}

package/dist/runtime/styles/tailwind.css

@@ -0,0 +1 @@
+@tailwind base;@tailwind components;@tailwind utilities;

package/dist/runtime/styles/vuetify.css

@@ -0,0 +1,3 @@
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}

package/dist/types.d.mts

@@ -0,0 +1,9 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.mjs'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.mjs'
+
+export { type MFrameworkUiOptions } from './module.mjs'

package/dist/utils/color.d.ts

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

package/dist/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/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/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/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/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/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/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/package.json

@@ -1,24 +1,29 @@
 {
   "name": "@mframework/ui",
-  "version": "0.0.6-beta6",
-  "description": "Official opinionated UI module for the M Framework.",
+  "version": "0.1.0-beta.1",
+  "type": "module",
+  "description": "Opiniated UI module for the M Framework.",
   "keywords": [
+    "vue",
+    "nuxt",
     "ui",
-    "vuetify",
-    "fontawesome",
-    "m-framework",
+    "components",
+    "mframework",
     "meeovi"
   ],
-  "license": "MIT",
-  "author": "M Framework",
-  "type": "module",
-  "main": "module.ts",
-  "exports": {
-    "./module": "./module.ts"
-  },
-  "types": "./types.d.ts",
+  "main": "dist/src/module.cjs",
+  "module": "dist/src/module.mjs",
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
-    "build": "tsc -p tsconfig.json"
+    "build": "tsc -p tsconfig.json",
+    "dev": "nuxt-module-dev"
+  },
+  "peerDependencies": {
+    "nuxt": "^3.13.0",
+    "vue": "^3.5.0"
   },
   "dependencies": {
     "@formkit/nuxt": "^1.7.2",
@@ -27,16 +32,23 @@
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@fortawesome/vue-fontawesome": "^3.1.2",
     "@mdi/font": "^7.4.47",
-    "@nuxt/fonts": "^0.13.0",
-    "@nuxt/kit": "^4.3.1",
+    "@nuxt/image": "^2.0.0",
     "@vueuse/motion": "^3.0.3",
+    "grapesjs": "^0.22.14",
+    "izitoast": "^1.4.0",
+    "lg-thumbnail": "^1.2.1",
+    "lg-video": "^1.4.0",
+    "lg-zoom": "^1.3.0",
+    "lightgallery": "^2.9.0",
     "tailwindcss": "^4.1.18",
-    "vue": "^3.5.28",
-    "vuetify": "^3.11.8",
-    "vuetify-nuxt-module": "^0.19.5"
+    "vue-tsc": "^3.2.4",
+    "vuetify": "^3.7.0",
+    "vuetify-nuxt-module": "^0.18.8"
   },
   "devDependencies": {
+    "@nuxt/module-builder": "^1.0.2",
     "sass": "^1.94.2",
-    "sass-embedded": "^1.93.3"
+    "sass-embedded": "^1.93.3",
+    "typescript": "^5.7.0"
   }
 }