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

package/dist/modules/ui/src/runtime/composables/useMToast.js

@@ -1,11 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,311 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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-switcher.js

@@ -1,27 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

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

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

@@ -1,21 +0,0 @@
-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

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

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

@@ -1,7 +0,0 @@
-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

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

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

@@ -1,11 +0,0 @@
-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

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

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

@@ -1,18 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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;
-}[];