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

package/dist/runtime/plugins/vuetify.js

@@ -1,60 +1,33 @@
-// plugins/vuetify.ts
-import '@mdi/font/css/materialdesignicons.css';
-import 'vuetify/styles';
+import { defineNuxtPlugin, useRuntimeConfig } from 'nuxt/app';
 import { createVuetify } from 'vuetify';
-import { aliases, fa } from 'vuetify/iconsets/fa-svg';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { fas } from '@fortawesome/free-solid-svg-icons';
 import * as components from 'vuetify/components';
-import * as labsComponents from 'vuetify/labs/components';
 import * as directives from 'vuetify/directives';
-import { mdi } from 'vuetify/iconsets/mdi';
-// Register fontawesome icons at module scope
-library.add(fas);
-// Create Vuetify instance at module scope so other runtime plugins can import it
-export const vuetify = createVuetify({
-    ssr: true,
-    directives,
-    icons: {
-        defaultSet: 'fa',
-        aliases,
-        sets: {
-            fa,
-            mdi,
-        },
-    },
-    components: {
-        ...components,
-        ...labsComponents,
-    },
-    theme: {
-        defaultTheme: 'light',
-        themes: {
-            light: {
-                dark: false,
-                variables: {}, // required to avoid Vuetify crash
-                colors: {
-                    primary: '#6200EE',
-                    'primary-darken-1': '#3700B3',
-                    secondary: '#03DAC6',
-                    'secondary-darken-1': '#018786',
-                    error: '#B00020',
-                    info: '#2196F3',
-                    success: '#4CAF50',
-                    warning: '#FB8C00',
+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,
-                variables: {},
-                colors: {},
-            },
-        },
-    },
-});
-export default (nuxtApp) => {
-    // Register FontAwesome component on the actual Vue app instance
-    nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon);
+                dark: {
+                    dark: true,
+                    colors: {
+                        primary: '#3b82f6',
+                        secondary: '#64748b'
+                    }
+                }
+            }
+        }
+    });
     nuxtApp.vueApp.use(vuetify);
-};
+});

package/dist/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>
+const client = inject("mSearchClient");
+const index = inject("mSearchIndex");
+</script>

package/dist/runtime/styles/index.css

@@ -0,0 +1,5 @@
+@import './tailwind.css';
+:root {
+  --m-primary: #3b82f6;
+  --m-secondary: #64748b;
+}

package/dist/runtime/styles/tailwind.css

@@ -0,0 +1 @@
+@tailwind base;@tailwind components;@tailwind utilities;

package/dist/runtime/styles/vuetify.css

@@ -0,0 +1,3 @@
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}

package/dist/types.d.mts

@@ -0,0 +1,9 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.mjs'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.mjs'
+
+export { type MFrameworkUiOptions } from './module.mjs'

package/dist/utils/color.d.ts

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

package/dist/utils/color.js

@@ -0,0 +1,11 @@
+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/utils/fonts.d.ts

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

package/dist/utils/fonts.js

@@ -0,0 +1,18 @@
+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/utils/formkit.d.ts

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

package/dist/utils/formkit.js

@@ -0,0 +1,59 @@
+import { unref } from 'vue';
+function convertBoolean(value) {
+    if (value === 'true' || value === 'false') {
+        return value === 'true';
+    }
+    else {
+        return value;
+    }
+}
+function mapCondition(condition, target) {
+    switch (condition) {
+        case 'is_empty':
+            return `!$get(${target}).value)`;
+        case 'is_filled':
+            return `$get(${target}).value)`;
+        default:
+            return undefined;
+    }
+}
+export function mapConditions(conditions) {
+    // Both $el and $cmp schema nodes can leverage an if property that roughly equates to a v-if in Vue. If the expression assigned to the if property is truthy, the node is rendered, otherwise it is not:
+}
+export function transformSchema(schema) {
+    // Loop through the form schema from Directus
+    // This is required for FormKit to work
+    const items = unref(schema);
+    return items.map((item) => {
+        const { conditions, field, name, children, ...props } = item;
+        // console.log('conditions', conditions);
+        // console.log('mapCondition', mapCondition(conditions[0].condition, field));
+        const cmpSchema = {
+            $cmp: item.$el ? item.$el : 'FormKit',
+            children: children,
+            // if: conditions ? mapCondition(conditions[0].condition, field) : undefined,
+            props: {
+                id: name,
+                ...props,
+            },
+        };
+        // Switch statement to handle item widths
+        switch (item.width) {
+            case '33':
+                cmpSchema.props.outerClass = 'md:col-span-2';
+                break;
+            case '50':
+                cmpSchema.props.outerClass = 'md:col-span-3';
+                break;
+            case '67':
+                cmpSchema.props.outerClass = 'md:col-span-4';
+                break;
+            case '100':
+                cmpSchema.props.outerClass = 'md:col-span-6';
+                break;
+            default:
+                cmpSchema.props.outerClass = 'md:col-span-6';
+        }
+        return cmpSchema;
+    });
+}

package/dist/utils/icons.d.ts

@@ -0,0 +1,4 @@
+type FileType = 'folder' | 'image/jpeg' | 'image/png' | 'image/gif' | 'image/svg+xml' | 'image/webp' | 'video/mp4' | 'video/quicktime' | 'audio/mp3' | 'audio/aac' | 'audio/wav' | 'audio/ogg' | 'text/csv' | 'text/plain' | 'application/pdf' | 'application/vnd.ms-excel' | 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' | 'application/msword' | 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' | 'application/vnd.ms-powerpoint' | 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
+export declare const fileIconMap: Record<FileType, string>;
+export declare function getFileIcon(filetype: FileType | string | null | undefined): string;
+export {};

package/dist/utils/icons.js

@@ -0,0 +1,36 @@
+export const fileIconMap = {
+    folder: 'material-symbols:folder',
+    // Images
+    'image/jpeg': 'material-symbols:image',
+    'image/png': 'material-symbols:image',
+    'image/gif': 'material-symbols:image',
+    'image/svg+xml': 'material-symbols:image',
+    'image/webp': 'material-symbols:image',
+    // Videos
+    'video/mp4': 'material-symbols:smart-display',
+    'video/quicktime': 'material-symbols:smart-display',
+    // Audio
+    'audio/mp3': 'material-symbols:audio-file',
+    'audio/aac': 'material-symbols:audio-file',
+    'audio/wav': 'material-symbols:audio-file',
+    'audio/ogg': 'material-symbols:audio-file',
+    // Text
+    'text/csv': 'material-symbols:csv',
+    'text/plain': 'material-symbols:text-snippet',
+    // Files
+    'application/pdf': 'material-symbols:picture-as-pdf-sharp',
+    'application/vnd.ms-excel': 'material-symbols:sheets',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'material-symbols:sheets',
+    'application/msword': 'material-symbols:docs',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'material-symbols:docs',
+    'application/vnd.ms-powerpoint': 'material-symbols:slides',
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'material-symbols:slides',
+};
+export function getFileIcon(filetype) {
+    if (!filetype)
+        return 'material-symbols:attachment';
+    if (typeof filetype === 'string' && !(filetype in fileIconMap)) {
+        return 'material-symbols:attachment';
+    }
+    return fileIconMap[filetype];
+}

package/package.json

@@ -1,14 +1,8 @@
 {
   "name": "@mframework/ui",
-  "version": "0.1.0-beta.0",
+  "version": "0.1.0-beta.1",
   "type": "module",
   "description": "Opiniated UI module for the M Framework.",
-  "main": "dist/module.cjs",
-  "module": "dist/module.mjs",
-  "types": "dist/module.d.ts",
-  "files": [
-    "dist"
-  ],
   "keywords": [
     "vue",
     "nuxt",
@@ -17,8 +11,14 @@
     "mframework",
     "meeovi"
   ],
+  "main": "dist/src/module.cjs",
+  "module": "dist/src/module.mjs",
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
-    "build": "nuxt-module-build",
+    "build": "tsc -p tsconfig.json",
     "dev": "nuxt-module-dev"
   },
   "peerDependencies": {
@@ -31,22 +31,24 @@
     "@fortawesome/fontawesome-svg-core": "^7.1.0",
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@fortawesome/vue-fontawesome": "^3.1.2",
-    "@grapesjs/studio-sdk": "^1.0.57",
     "@mdi/font": "^7.4.47",
     "@nuxt/image": "^2.0.0",
     "@vueuse/motion": "^3.0.3",
+    "grapesjs": "^0.22.14",
     "izitoast": "^1.4.0",
     "lg-thumbnail": "^1.2.1",
     "lg-video": "^1.4.0",
     "lg-zoom": "^1.3.0",
     "lightgallery": "^2.9.0",
     "tailwindcss": "^4.1.18",
+    "vue-tsc": "^3.2.4",
     "vuetify": "^3.7.0",
     "vuetify-nuxt-module": "^0.18.8"
   },
   "devDependencies": {
+    "@nuxt/module-builder": "^1.0.2",
     "sass": "^1.94.2",
     "sass-embedded": "^1.93.3",
     "typescript": "^5.7.0"
   }
-}
+}

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/design/tokens.ts

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