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

package/src/module.ts

@@ -0,0 +1,105 @@
+import {
+  defineNuxtModule,
+  addPlugin,
+  createResolver,
+  addComponentsDir,
+  addImportsDir
+} from 'nuxt/kit'
+
+export interface MFrameworkUiOptions {
+  theme ? : 'light' | 'dark'
+  builder ? : boolean | {
+    enabled ? : boolean
+  }
+}
+
+export default defineNuxtModule < MFrameworkUiOptions > ({
+  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
+    }
+
+    // Safe assignment without TS errors
+    ;(nuxt.options as any).tailwindcss = (nuxt.options as any).tailwindcss || {}
+    ;(nuxt.options as any).tailwindcss.configPath = resolver.resolve(
+      './runtime/assets/config/tailwind.config.js'
+    )
+  }
+})

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

@@ -0,0 +1,42 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [], // Nuxt will inject its own paths
+
+  theme: {
+    extend: {
+      colors: {
+        primary: 'var(--m-primary)',
+        secondary: 'var(--m-secondary)',
+        accent: 'var(--m-accent)',
+        muted: 'var(--m-muted)',
+        surface: 'var(--m-surface)',
+        border: 'var(--m-border)'
+      },
+
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        heading: ['Inter', 'system-ui', 'sans-serif']
+      },
+
+      borderRadius: {
+        sm: '4px',
+        DEFAULT: '8px',
+        lg: '12px',
+        xl: '16px'
+      },
+
+      spacing: {
+        '1/2': '50%',
+        'full': '100%'
+      },
+
+      boxShadow: {
+        soft: '0 2px 8px rgba(0,0,0,0.06)',
+        medium: '0 4px 16px rgba(0,0,0,0.08)',
+        strong: '0 8px 24px rgba(0,0,0,0.12)'
+      }
+    }
+  },
+
+  plugins: []
+}

package/src/runtime/components/Gallery.vue

@@ -0,0 +1,66 @@
+<template>
+    <lightgallery :settings="{ speed: 500, plugins: plugins }" :onInit="onInit" :onBeforeSlide="onBeforeSlide">
+        <a data-lg-size="1406-1390" class="gallery-item"
+            data-src="https://images.unsplash.com/photo-1581894158358-5ecd2c518883?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1406&q=80"
+            data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@entrycube' >Diego Guzmán </a></h4> <p> Location - <a href='https://unsplash.com/s/photos/fushimi-inari-taisha-shrine-senbontorii%2C-68%E7%95%AA%E5%9C%B0-fukakusa-yabunouchicho%2C-fushimi-ward%2C-kyoto%2C-japan'>Fushimi Ward, Kyoto, Japan</a></p>">
+            <img class="img-responsive"
+                src="https://images.unsplash.com/photo-1581894158358-5ecd2c518883?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80" />
+        </a>
+        <a data-lg-size="1400-1400" class="gallery-item"
+            data-src="https://images.unsplash.com/photo-1544550285-f813152fb2fd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80"
+            data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@asoshiation' >Shah </a></h4><p> Location - <a href='https://unsplash.com/s/photos/shinimamiya%2C-osaka%2C-japan'>Shinimamiya, Osaka, Japan</a></p>">
+            <img class="img-responsive"
+                src="https://images.unsplash.com/photo-1544550285-f813152fb2fd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80" />
+        </a>
+        <a data-lg-size="1400-1400" class="gallery-item"
+            data-src="https://images.unsplash.com/photo-1584592740039-cddf0671f3d4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80"
+            data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@katherine_xx11' >Katherine Gu </a></h4><p> For all those years we were alone and helpless.</p>">
+            <img style="width: 200px" class="img-responsive"
+                src="https://images.unsplash.com/photo-1584592740039-cddf0671f3d4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80" />
+        </a>
+        <a class="gallery-item"
+            data-video='{"source": [{"src":"https://www.lightgalleryjs.com/videos/video1.mp4", "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}}'
+            data-poster=""
+            data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@katherine_xx11' >Katherine Gu </a></h4><p> For all those years we were alone and helpless.</p>">
+            <img width="200" class="img-responsive"
+                src="https://www.lightgalleryjs.com/images/demo/html5-video-poster.jpg" />
+        </a>
+    </lightgallery>
+</template>
+
+<script>
+    import Lightgallery from 'lightgallery/vue';
+    import lgZoom from 'lightgallery/plugins/zoom';
+    import lgVideo from 'lightgallery/plugins/video';
+
+    export default {
+        name: 'App',
+        components: {
+            Lightgallery,
+        },
+        data: () => ({
+            plugins: [lgZoom, lgVideo],
+        }),
+        methods: {
+            onInit: () => {
+                console.log('lightGallery has been initialized');
+            },
+            onBeforeSlide: () => {
+                console.log('calling before slide');
+            },
+        },
+    };
+</script>
+<style lang="css">
+    @import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lightgallery.css');
+    @import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-zoom.css');
+    @import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-video.css');
+
+    body {
+        margin: 0;
+    }
+
+    .gallery-item {
+        margin: 5px;
+    }
+</style>

package/src/runtime/components/MButton.vue

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

package/src/runtime/composables/useMToast.ts

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

package/src/runtime/plugins/builder.ts

@@ -0,0 +1,326 @@
+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: any) {
+        return editor.getContainer().closest('.editor-row');
+      },
+      getLayersEl(row: any) {
+        return row.querySelector('.layers-container');
+      },
+
+      run(editor: any, sender: any) {
+        const lmEl = this.getLayersEl(this.getRowEl(editor));
+        lmEl.style.display = '';
+      },
+      stop(editor: any, sender: any) {
+        const lmEl = this.getLayersEl(this.getRowEl(editor));
+        lmEl.style.display = 'none';
+      },
+    });
+    editor.Commands.add('show-styles', {
+      getRowEl(editor: any) {
+        return editor.getContainer().closest('.editor-row');
+      },
+      getStyleEl(row: any) {
+        return row.querySelector('.styles-container');
+      },
+
+      run(editor: any, sender: any) {
+        const smEl = this.getStyleEl(this.getRowEl(editor));
+        smEl.style.display = '';
+      },
+      stop(editor: any, sender: any) {
+        const smEl = this.getStyleEl(this.getRowEl(editor));
+        smEl.style.display = 'none';
+      },
+    });
+
+    editor.Commands.add('show-traits', {
+      getTraitsEl(editor: any) {
+        const row = editor.getContainer().closest('.editor-row');
+        return row.querySelector('.traits-container');
+      },
+      run(editor: any, sender: any) {
+        this.getTraitsEl(editor).style.display = '';
+      },
+      stop(editor: any, sender: any) {
+        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: any) {
+            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/src/runtime/plugins/fontawesome.ts

@@ -0,0 +1,11 @@
+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/src/runtime/plugins/formkit.ts

@@ -0,0 +1,9 @@
+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/src/runtime/plugins/lightgallery.js

@@ -0,0 +1,21 @@
+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.
+  document.querySelectorAll('.lightgallery').forEach((element) => {
+    lightGallery(element as HTMLElement, {
+      plugins: [lgZoom, lgVideo, lgThumbnail],
+      speed: 500,
+    })
+  })
+})

package/src/runtime/plugins/motion.ts

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

package/src/runtime/plugins/theme-switcher.ts

@@ -0,0 +1,32 @@
+import { defineNuxtPlugin } from 'nuxt/app'
+import { useTheme } from 'vuetify'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  if (process.server) return
+
+  const theme = useTheme()
+
+  const setTheme = (mode: 'light' | 'dark') => {
+    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
+  })
+})