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

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
+  })
+})

package/src/runtime/plugins/theme.ts

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

@@ -0,0 +1,36 @@
+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/src/runtime/search/client.ts

@@ -0,0 +1,25 @@
+import type { SearchClient } from 'instantsearch.js'
+
+export function getSearchClient(): SearchClient | null {
+  let mod: any
+  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/src/runtime/search/components/MSearch.vue

@@ -0,0 +1,19 @@
+<template>
+  <ais-instant-search :search-client="client" :index-name="index">
+    <ais-search-box />
+    <ais-hits>
+      <template #item="{ item }">
+        <slot name="hit" :item="item">
+          <div class="p-2 border rounded">
+            <ais-highlight attribute="title" :hit="item" />
+          </div>
+        </slot>
+      </template>
+    </ais-hits>
+  </ais-instant-search>
+</template>
+
+<script setup lang="ts">
+const client = inject('mSearchClient')
+const index = inject('mSearchIndex')
+</script>

package/src/runtime/search/plugin.ts

@@ -0,0 +1,9 @@
+import { getSearchClient } from './client'
+
+export default (nuxtApp: any) => {
+  const client = getSearchClient()
+  const indexName = process.env.NUXT_PUBLIC_SEARCH_INDEX || 'default'
+
+  nuxtApp.provide('mSearchClient', client)
+  nuxtApp.provide('mSearchIndex', indexName)
+}

package/src/runtime/styles/index.scss

@@ -0,0 +1,101 @@
+@import './tailwind.css';
+
+// Your design tokens, utilities, etc.
+:root {
+  --m-primary: #3b82f6;
+  --m-secondary: #64748b;
+  --m-accent: #10b981;
+  --m-muted: #f3f4f6;
+  --m-surface: #ffffff;
+  --m-border: #e5e7eb;
+}
+
+.dark {
+  --m-primary: #60a5fa;
+  --m-secondary: #94a3b8;
+  --m-accent: #34d399;
+  --m-muted: #1f2937;
+  --m-surface: #111827;
+  --m-border: #374151;
+}
+
+// GrapesJS canvas and editor styling
+/* Let's highlight canvas boundaries */
+#gjs {
+  border: 3px solid #444;
+}
+
+/* Theming */
+
+/* Primary color for the background */
+.gjs-one-bg {
+  background-color: #78366a;
+}
+
+/* Secondary color for the text color */
+.gjs-two-color {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* Tertiary color for the background */
+.gjs-three-bg {
+  background-color: #ec5896;
+  color: white;
+}
+
+/* Quaternary color for the text color */
+.gjs-four-color,
+.gjs-four-color-h:hover {
+  color: #ec5896;
+}
+
+/* Reset some default styling */
+.gjs-cv-canvas {
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.gjs-block {
+  width: auto;
+  height: auto;
+  min-height: auto;
+}
+
+.panel__top {
+  padding: 0;
+  width: 100%;
+  display: flex;
+  position: initial;
+  justify-content: center;
+  justify-content: space-between;
+}
+.panel__basic-actions {
+  position: initial;
+}
+
+.editor-row {
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+  flex-wrap: nowrap;
+  height: 300px;
+}
+
+.editor-canvas {
+  flex-grow: 1;
+}
+
+.panel__right {
+  flex-basis: 230px;
+  position: relative;
+  overflow-y: auto;
+}
+
+.panel__switcher {
+  position: initial;
+}
+
+.panel__devices {
+  position: initial;
+}

package/src/runtime/styles/tailwind.css

@@ -0,0 +1,9 @@
+/* @mframework/ui/runtime/assets/css/tailwind.css */
+
+/* Tailwind base (if using Tailwind 3 style) */
+@import "tailwindcss/preflight";
+
+/* Vuetify + Tailwind coexistence tips:
+   - Avoid global resets that fight Vuetify
+   - Prefer utility classes for layout, spacing, etc.
+*/

package/src/runtime/styles/vuetify.scss

@@ -0,0 +1,5 @@
+// Override Vuetify variables or add global Vuetify-related styles here.
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}

package/src/types/runtime-config.d.ts

@@ -0,0 +1,12 @@
+declare module 'nuxt/schema' {
+  interface PublicRuntimeConfig {
+    mframeworkUi?: {
+      theme?: 'light' | 'dark'
+      builder?: {
+        enabled?: boolean
+      }
+    }
+  }
+}
+
+export {}