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

package/src/module.ts

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

@@ -1,42 +0,0 @@
-/** @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/MButton.vue

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

@@ -1,14 +0,0 @@
-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/design/tokens.ts

@@ -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/src/runtime/plugins/builder.ts

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

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

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

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

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

@@ -1,32 +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: '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
-  })
-})

package/src/runtime/plugins/theme.ts

@@ -1,57 +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: {}
-    }
-  }
-})