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

package/dist/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/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/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/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/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/runtime/plugins/icon-switcher.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/icon-switcher.js

@@ -1,18 +1,24 @@
-import { vuetify } from './vuetify';
-export default (nuxtApp) => {
-    const stored = typeof localStorage !== 'undefined' ? localStorage.getItem('mframework-icon-set') : null;
+import { defineNuxtPlugin } from 'nuxt/app';
+import { useVuetify } from 'vuetify-nuxt-module/runtime';
+export default defineNuxtPlugin((nuxtApp) => {
+    const vuetify = useVuetify();
+    // If Vuetify isn't ready yet, skip plugin initialization
+    if (!vuetify || !vuetify.framework) {
+        console.warn('[mframework-ui] Vuetify not ready for icon-switcher plugin');
+        return;
+    }
+    const stored = typeof localStorage !== 'undefined'
+        ? localStorage.getItem('mframework-icon-set')
+        : null;
     const initial = stored || 'mdi';
-    vuetify.framework = vuetify.framework || {};
     vuetify.framework.icons = vuetify.framework.icons || {};
     vuetify.framework.icons.defaultSet = initial;
     const setIconSet = (name) => {
-        ;
         vuetify.framework.icons.defaultSet = name;
-        if (typeof localStorage !== 'undefined')
-            localStorage.setItem('mframework-icon-set', name);
+        localStorage.setItem('mframework-icon-set', name);
     };
     nuxtApp.provide('mIcons', {
         setIconSet,
-        current: () => vuetify.framework.icons.defaultSet,
+        current: () => vuetify.framework.icons.defaultSet
     });
-};
+});

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

@@ -0,0 +1,6 @@
+import 'lightgallery/css/lightgallery.css';
+import 'lightgallery/css/lg-zoom.css';
+import 'lightgallery/css/lg-thumbnail.css';
+import 'lightgallery/css/lg-video.css';
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/lightgallery.js

@@ -0,0 +1,15 @@
+import { defineNuxtPlugin } from 'nuxt/app';
+import lightGallery from 'lightgallery';
+import lgZoom from 'lg-zoom';
+import lgVideo from 'lg-video';
+import lgThumbnail from 'lg-thumbnail';
+import 'lightgallery/css/lightgallery.css';
+import 'lightgallery/css/lg-zoom.css';
+import 'lightgallery/css/lg-thumbnail.css';
+import 'lightgallery/css/lg-video.css';
+export default defineNuxtPlugin(() => {
+    // You can expose a composable or directive later if you want.
+    // For now, this ensures CSS + plugins are bundled.
+    // Example directive could be added here if needed.
+    lightGallery([lgZoom, lgVideo, lgThumbnail]);
+});

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

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;