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

package/dist/adapters/adapter-directus/src/types/ui.d.ts

@@ -0,0 +1,21 @@
+export interface Image {
+    url: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+    [key: string]: any;
+}
+export interface Product {
+    id: string;
+    name?: string;
+    price?: number;
+    images?: Image[];
+    [key: string]: any;
+}
+export interface Category {
+    id: string;
+    name?: string;
+    slug?: string;
+    image?: string;
+    [key: string]: any;
+}

package/dist/adapters/adapter-directus/src/types/ui.js

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

package/dist/module.d.mts

@@ -0,0 +1,9 @@
+import * as nuxt_schema from 'nuxt/schema';
+
+interface MFrameworkUiOptions {
+    theme?: 'light' | 'dark';
+}
+declare const _default: nuxt_schema.NuxtModule<MFrameworkUiOptions, MFrameworkUiOptions, false>;
+
+export { _default as default };
+export type { MFrameworkUiOptions };

package/dist/module.d.ts

@@ -0,0 +1,6 @@
+export interface MFrameworkUiOptions {
+    theme?: 'light' | 'dark';
+    builder?: boolean;
+}
+declare const _default: import("nuxt/schema").NuxtModule<MFrameworkUiOptions, MFrameworkUiOptions, false>;
+export default _default;

package/dist/module.js

@@ -0,0 +1,68 @@
+import { defineNuxtModule, addPlugin, createResolver, addComponentsDir, addImportsDir } from 'nuxt/kit';
+export default defineNuxtModule({
+    meta: {
+        name: '@mframework/ui',
+        configKey: 'mframeworkUi'
+    },
+    defaults: {
+        theme: 'light',
+        builder: true
+    },
+    setup(options, nuxt) {
+        const resolver = createResolver(import.meta.url);
+        //
+        // 1. Ensure Vuetify loads FIRST
+        //
+        addPlugin({
+            src: resolver.resolve('./runtime/plugins/vuetify'),
+            mode: 'all'
+        });
+        //
+        // 2. Global styles (Tailwind, Vuetify overrides, tokens)
+        //
+        nuxt.options.css = nuxt.options.css || [];
+        nuxt.options.css.push(resolver.resolve('./runtime/styles/index.scss'));
+        //
+        // 3. Register core UI plugins
+        //
+        const plugins = [
+            'formkit',
+            'fontawesome',
+            'lightgallery',
+            'motion',
+            'theme'
+        ];
+        plugins.forEach((name) => {
+            addPlugin({
+                src: resolver.resolve(`./runtime/plugins/${name}`),
+                mode: 'all'
+            });
+        });
+        //
+        // 4. Register GrapesJS builder (client‑only)
+        //
+        if (options.builder) {
+            addPlugin({
+                src: resolver.resolve('./runtime/plugins/builder'),
+                mode: 'client'
+            });
+        }
+        //
+        // 5. Auto‑import components & composables
+        //
+        addComponentsDir({
+            path: resolver.resolve('./runtime/components'),
+            prefix: 'M'
+        });
+        addImportsDir(resolver.resolve('./runtime/composables'));
+        //
+        // 6. Expose runtime config
+        //
+        nuxt.options.runtimeConfig.public.mframeworkUi = {
+            ...(nuxt.options.runtimeConfig.public.mframeworkUi || {}),
+            ...options
+        };
+        nuxt.options.tailwindcss = nuxt.options.tailwindcss || {};
+        nuxt.options.tailwindcss.configPath = resolver.resolve('./runtime/assets/config/tailwind.config.js');
+    }
+});

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@mframework/ui",
+  "configKey": "mframeworkUi",
+  "version": "0.1.0-beta.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,38 @@
+import { defineNuxtModule, createResolver, addPlugin, addComponentsDir, addImportsDir } from 'nuxt/kit';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@mframework/ui",
+    configKey: "mframeworkUi"
+  },
+  defaults: {
+    theme: "light"
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    addPlugin(resolver.resolve("./runtime/plugins/vuetify"));
+    nuxt.options.css = nuxt.options.css || [];
+    nuxt.options.css.push(resolver.resolve("./runtime/styles/index.scss"));
+    const plugins = [
+      "formkit",
+      "fontawesome",
+      "lightgallery",
+      "motion",
+      "grapes"
+    ];
+    plugins.forEach((name) => {
+      addPlugin(resolver.resolve(`./runtime/plugins/${name}`));
+    });
+    addComponentsDir({
+      path: resolver.resolve("./runtime/components"),
+      prefix: "M"
+    });
+    addImportsDir(resolver.resolve("./runtime/composables"));
+    nuxt.options.runtimeConfig.public.mframeworkUi = {
+      ...nuxt.options.runtimeConfig.public.mframeworkUi || {},
+      ...options
+    };
+  }
+});
+
+export { module$1 as default };

package/dist/modules/ui/src/module.d.ts

@@ -0,0 +1,8 @@
+export interface MFrameworkUiOptions {
+    theme?: 'light' | 'dark';
+    builder?: boolean | {
+        enabled?: boolean;
+    };
+}
+declare const _default: import("nuxt/schema").NuxtModule<MFrameworkUiOptions, MFrameworkUiOptions, false>;
+export default _default;

package/dist/modules/ui/src/module.js

@@ -0,0 +1,75 @@
+import { defineNuxtModule, addPlugin, createResolver, addComponentsDir, addImportsDir } from 'nuxt/kit';
+export default defineNuxtModule({
+    meta: {
+        name: '@mframework/ui',
+        configKey: 'mframeworkUi'
+    },
+    defaults: {
+        theme: 'light',
+        builder: true
+    },
+    setup(options, nuxt) {
+        const resolver = createResolver(import.meta.url);
+        //
+        // 1. Ensure Vuetify loads FIRST
+        //
+        addPlugin({
+            src: resolver.resolve('./runtime/plugins/vuetify'),
+            mode: 'all'
+        });
+        //
+        // 2. Global styles (Tailwind, Vuetify overrides, tokens)
+        //
+        nuxt.options.css = nuxt.options.css || [];
+        nuxt.options.css.push(resolver.resolve('./runtime/styles/index.scss'));
+        //
+        // 3. Register core UI plugins
+        //
+        const plugins = [
+            'formkit',
+            'fontawesome',
+            'lightgallery',
+            'motion',
+            'theme'
+        ];
+        plugins.forEach((name) => {
+            addPlugin({
+                src: resolver.resolve(`./runtime/plugins/${name}`),
+                mode: 'all'
+            });
+        });
+        //
+        // 4. Register GrapesJS builder (client‑only)
+        //
+        if (options.builder) {
+            addPlugin({
+                src: resolver.resolve('./runtime/plugins/builder'),
+                mode: 'client'
+            });
+        }
+        //
+        // 5. Auto‑import components & composables
+        //
+        addComponentsDir({
+            path: resolver.resolve('./runtime/components'),
+            prefix: 'M'
+        });
+        addImportsDir(resolver.resolve('./runtime/composables'));
+        //
+        // 6. Expose runtime config
+        //
+        // Normalize builder option
+        const normalizedBuilder = typeof options.builder === 'boolean' ? {
+            enabled: options.builder
+        } :
+            options.builder || {
+                enabled: true
+            };
+        nuxt.options.runtimeConfig.public.mframeworkUi = {
+            theme: options.theme,
+            builder: normalizedBuilder
+        };
+        nuxt.options.tailwindcss = nuxt.options.tailwindcss || {};
+        nuxt.options.tailwindcss.configPath = resolver.resolve('./runtime/assets/config/tailwind.config.js');
+    }
+});

package/dist/modules/ui/src/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/modules/ui/src/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/modules/ui/src/runtime/design/tokens.d.ts

@@ -0,0 +1,22 @@
+export declare const tokens: {
+    colors: {
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        error: string;
+        surface: string;
+        background: string;
+    };
+    radius: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+};

package/dist/modules/ui/src/runtime/design/tokens.js

@@ -0,0 +1,22 @@
+export const tokens = {
+    colors: {
+        primary: '#4f46e5',
+        secondary: '#64748b',
+        success: '#22c55e',
+        warning: '#f59e0b',
+        error: '#ef4444',
+        surface: '#ffffff',
+        background: '#f8fafc'
+    },
+    radius: {
+        sm: '4px',
+        md: '8px',
+        lg: '12px'
+    },
+    spacing: {
+        xs: '4px',
+        sm: '8px',
+        md: '16px',
+        lg: '24px'
+    }
+};

package/dist/modules/ui/src/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;

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

@@ -0,0 +1,311 @@
+import { defineNuxtPlugin } from 'nuxt/app';
+import 'grapesjs/dist/css/grapes.min.css';
+import grapesjs from 'grapesjs';
+export default defineNuxtPlugin((nuxtApp) => {
+    if (process.server)
+        return;
+    const mount = () => {
+        const el = document.querySelector('#gjs');
+        if (!el)
+            return null;
+        const editor = grapesjs.init({
+            container: `${el}`,
+            fromElement: true,
+            height: '100%',
+            width: 'auto',
+            storageManager: {
+                type: 'local',
+                autosave: true,
+                autoload: true,
+                stepsBeforeSave: 1,
+                options: {
+                    local: {
+                        key: 'gjsProject'
+                    }
+                }
+            },
+            // Avoid any default panel
+            layerManager: {
+                appendTo: '.layers-container',
+            },
+            mediaCondition: 'min-width', // default is `max-width`
+            deviceManager: {
+                devices: [{
+                        name: 'Desktop',
+                        width: '', // default size
+                        widthMedia: '1024px', // this value will be used in CSS @media
+                    },
+                    {
+                        name: 'Mobile',
+                        width: '320px', // this value will be used on canvas width
+                        widthMedia: '480px', // this value will be used in CSS @media
+                    },
+                ],
+            },
+            blockManager: {
+                appendTo: '#blocks',
+                blocks: [{
+                        id: 'section', // id is mandatory
+                        label: '<b>Section</b>', // You can use HTML/SVG inside labels
+                        category: 'Basic',
+                        attributes: {
+                            class: 'gjs-block-section'
+                        },
+                        content: {
+                            tagName: 'div',
+                            draggable: false,
+                            attributes: {
+                                'some-attribute': 'some-value'
+                            },
+                            components: [{
+                                    tagName: 'span',
+                                    content: '<b>Some static content</b>',
+                                },
+                                {
+                                    tagName: 'div',
+                                    // use `content` for static strings, `components` string will be parsed
+                                    // and transformed in Components
+                                    components: '<span>HTML at some point</span>',
+                                },
+                            ],
+                        },
+                    },
+                    {
+                        id: 'text',
+                        label: 'Text',
+                        content: '<div data-gjs-type="text">Insert your text here</div>',
+                    },
+                    {
+                        id: 'image',
+                        label: 'Image',
+                        // Select the component once it's dropped
+                        select: true,
+                        // You can pass components as a JSON instead of a simple HTML string,
+                        // in this case we also use a defined component type `image`
+                        content: {
+                            type: 'image'
+                        },
+                        // This triggers `active` event on dropped components and the `image`
+                        // reacts by opening the AssetManager
+                        activate: true,
+                    },
+                ],
+            },
+            panels: {
+                defaults: [{
+                        id: 'layers',
+                        el: '.panel__right',
+                        // Make the panel resizable
+                        resizable: {
+                            maxDim: 350,
+                            minDim: 200,
+                            tc: false, // Top handler
+                            cl: true, // Left handler
+                            cr: false, // Right handler
+                            bc: false, // Bottom handler
+                            // Being a flex child we need to change `flex-basis` property
+                            // instead of the `width` (default)
+                            keyWidth: 'flex-basis',
+                        },
+                    },
+                    {
+                        id: 'panel-switcher',
+                        el: '.panel__switcher',
+                        buttons: [{
+                                id: 'show-layers',
+                                active: true,
+                                label: 'Layers',
+                                command: 'show-layers',
+                                // Once activated disable the possibility to turn it off
+                                togglable: false,
+                            },
+                            {
+                                id: 'show-style',
+                                active: true,
+                                label: 'Styles',
+                                command: 'show-styles',
+                                togglable: false,
+                            },
+                            {
+                                id: 'show-traits',
+                                active: true,
+                                label: 'Traits',
+                                command: 'show-traits',
+                                togglable: false,
+                            },
+                        ],
+                    },
+                    {
+                        id: 'panel-devices',
+                        el: '.panel__devices',
+                        buttons: [{
+                                id: 'device-desktop',
+                                label: 'D',
+                                command: 'set-device-desktop',
+                                active: true,
+                                togglable: false,
+                            },
+                            {
+                                id: 'device-mobile',
+                                label: 'M',
+                                command: 'set-device-mobile',
+                                togglable: false,
+                            },
+                        ],
+                    },
+                ],
+            },
+            // The Selector Manager allows to assign classes and
+            // different states (eg. :hover) on components.
+            // Generally, it's used in conjunction with Style Manager
+            // but it's not mandatory
+            selectorManager: {
+                appendTo: '.styles-container',
+            },
+            styleManager: {
+                appendTo: '.styles-container',
+                sectors: [{
+                        name: 'Dimension',
+                        open: false,
+                        // Use built-in properties
+                        buildProps: ['width', 'min-height', 'padding'],
+                        // Use `properties` to define/override single property
+                        properties: [{
+                                // Type of the input,
+                                // options: integer | radio | select | color | slider | file | composite | stack
+                                type: 'integer',
+                                name: 'The width', // Label for the property
+                                property: 'width', // CSS property (if buildProps contains it will be extended)
+                                units: ['px', '%'], // Units, available only for 'integer' types
+                                defaults: 'auto', // Default value
+                                min: 0, // Min value, available only for 'integer' types
+                            },],
+                    },
+                    {
+                        name: 'Extra',
+                        open: false,
+                        buildProps: ['background-color', 'box-shadow', 'custom-prop'],
+                        properties: [{
+                                id: 'custom-prop',
+                                name: 'Custom Label',
+                                property: 'font-size',
+                                type: 'select',
+                                defaults: '32px',
+                                // List of options, available only for 'select' and 'radio'  types
+                                options: [{
+                                        id: 'tiny',
+                                        value: '12px',
+                                        name: 'Tiny'
+                                    },
+                                    {
+                                        id: 'medium',
+                                        value: '18px',
+                                        name: 'Medium'
+                                    },
+                                    {
+                                        id: 'big',
+                                        value: '32px',
+                                        name: 'Big'
+                                    },
+                                ],
+                            },],
+                    },
+                ],
+            },
+        });
+        // Define commands
+        editor.Commands.add('show-layers', {
+            getRowEl(editor) {
+                return editor.getContainer().closest('.editor-row');
+            },
+            getLayersEl(row) {
+                return row.querySelector('.layers-container');
+            },
+            run(editor, sender) {
+                const lmEl = this.getLayersEl(this.getRowEl(editor));
+                lmEl.style.display = '';
+            },
+            stop(editor, sender) {
+                const lmEl = this.getLayersEl(this.getRowEl(editor));
+                lmEl.style.display = 'none';
+            },
+        });
+        editor.Commands.add('show-styles', {
+            getRowEl(editor) {
+                return editor.getContainer().closest('.editor-row');
+            },
+            getStyleEl(row) {
+                return row.querySelector('.styles-container');
+            },
+            run(editor, sender) {
+                const smEl = this.getStyleEl(this.getRowEl(editor));
+                smEl.style.display = '';
+            },
+            stop(editor, sender) {
+                const smEl = this.getStyleEl(this.getRowEl(editor));
+                smEl.style.display = 'none';
+            },
+        });
+        editor.Commands.add('show-traits', {
+            getTraitsEl(editor) {
+                const row = editor.getContainer().closest('.editor-row');
+                return row.querySelector('.traits-container');
+            },
+            run(editor, sender) {
+                this.getTraitsEl(editor).style.display = '';
+            },
+            stop(editor, sender) {
+                this.getTraitsEl(editor).style.display = 'none';
+            },
+        });
+        editor.Panels.addPanel({
+            id: 'panel-top',
+            el: '.panel__top',
+        });
+        editor.Panels.addPanel({
+            id: 'basic-actions',
+            el: '.panel__basic-actions',
+            buttons: [{
+                    id: 'visibility',
+                    active: true, // active by default
+                    className: 'btn-toggle-borders',
+                    label: '<u>B</u>',
+                    command: 'sw-visibility', // Built-in command
+                },
+                {
+                    id: 'export',
+                    className: 'btn-open-export',
+                    label: 'Exp',
+                    command: 'export-template',
+                    context: 'export-template', // For grouping context of buttons from the same panel
+                },
+                {
+                    id: 'show-json',
+                    className: 'btn-show-json',
+                    label: 'JSON',
+                    context: 'show-json',
+                    command(editor) {
+                        editor.Modal.setTitle('Components JSON')
+                            .setContent(`<textarea style="width:100%; height: 250px;">
+            ${JSON.stringify(editor.getComponents())}
+          </textarea>`)
+                            .open();
+                    },
+                },
+            ],
+        });
+        editor.Commands.add('set-device-desktop', {
+            run: (editor) => editor.setDevice('Desktop'),
+        });
+        editor.Commands.add('set-device-mobile', {
+            run: (editor) => editor.setDevice('Mobile'),
+        });
+        editor.on('change:device', () => console.log('Current device: ', editor.getDevice()));
+        // Set initial device as Mobile
+        editor.setDevice('Mobile');
+        nuxtApp.provide('grapesStudio', editor);
+        return editor;
+    };
+    // Auto‑mount when page loads
+    window.addEventListener('DOMContentLoaded', mount);
+});

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

@@ -0,0 +1,3 @@
+import '@fortawesome/fontawesome-free/css/all.min.css';
+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/fontawesome.js

@@ -0,0 +1,9 @@
+import { defineNuxtPlugin } from 'nuxt/app';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import '@fortawesome/fontawesome-free/css/all.min.css';
+export default defineNuxtPlugin((nuxtApp) => {
+    library.add(fas);
+    nuxtApp.vueApp.component('Fa', FontAwesomeIcon);
+});

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

@@ -0,0 +1,3 @@
+import '@formkit/themes/genesis';
+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/formkit.js

@@ -0,0 +1,8 @@
+import { defineNuxtPlugin } from 'nuxt/app';
+import { plugin as formKitPlugin, defaultConfig } from '@formkit/vue';
+import '@formkit/themes/genesis';
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.use(formKitPlugin, defaultConfig({
+    // You can inject your own inputs, locales, etc. here
+    }));
+});

package/dist/modules/ui/src/runtime/plugins/motion.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/motion.js

@@ -0,0 +1,5 @@
+import { defineNuxtPlugin } from 'nuxt/app';
+import { MotionPlugin } from '@vueuse/motion';
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.use(MotionPlugin);
+});

package/dist/modules/ui/src/runtime/plugins/theme-switcher.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;