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

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/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/{runtime/assets/css → src/runtime/styles}/tailwind.css

@@ -1,9 +1,7 @@
 /* @mframework/ui/runtime/assets/css/tailwind.css */
 
 /* Tailwind base (if using Tailwind 3 style) */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss/preflight";
 
 /* Vuetify + Tailwind coexistence tips:
    - Avoid global resets that fight Vuetify

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 {}

package/src/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/src/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/src/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/src/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/dist/runtime/plugins/icons.d.ts

@@ -1,4 +0,0 @@
-import '@fortawesome/fontawesome-free/css/all.css';
-import '@mdi/font/css/materialdesignicons.css';
-declare const _default: any;
-export default _default;

package/dist/runtime/plugins/icons.js

@@ -1,13 +0,0 @@
-// @mframework/ui/runtime/plugins/icons.ts
-import { defineNuxtPlugin } from '#imports';
-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.css';
-import '@mdi/font/css/materialdesignicons.css';
-export default defineNuxtPlugin((nuxtApp) => {
-    // Add all solid icons (you can be more selective if you want)
-    library.add(fas);
-    // Register global FA component
-    nuxtApp.vueApp.component('FaIcon', FontAwesomeIcon);
-});

package/module.ts

@@ -1,72 +0,0 @@
-// @mframework/ui/module.ts
-import {
-  defineNuxtModule,
-  addPlugin,
-  addComponentsDir,
-  createResolver,
-  installModule,
-  resolveModule
-} from '@nuxt/kit'
-
-export interface MFrameworkUiOptions {
-  image?: Record<string, any>
-  fonts?: Record<string, any>
-  vuetify?: {
-    vuetifyOptions?: Record<string, any>
-  }
-  tailwind?: {
-    enable?: boolean
-  }
-}
-
-export default defineNuxtModule<MFrameworkUiOptions>({
-  meta: {
-    name: '@mframework/ui',
-    configKey: 'mframeworkUi'
-  },
-  defaults: {
-    image: {},
-    fonts: {},
-    vuetify: {
-      vuetifyOptions: {
-        icons: {
-          defaultSet: 'mdi'
-        }
-      }
-    },
-    tailwind: {
-      enable: true
-    }
-  },
-
-  async setup(options, nuxt) {
-    const { resolve } = createResolver(import.meta.url)
-
-    //
-    // 1. Expose options to runtime
-    //
-    nuxt.options.runtimeConfig.public.mframeworkUi = options
-
-    //
-    // 2. Install @nuxt/fonts
-    //
-    await installModule('@nuxt/fonts', options.fonts || {})
-
-    //
-    // 3. Install Vuetify via vuetify-nuxt-module (optional).
-    //    First check whether the consuming project actually has `vuetify`
-    //    installed to avoid Nuxt failing during module resolution.
-    //
-    let vuetifyModulePath: string | null = null
-    try {
-      vuetifyModulePath = resolveModule('vuetify-nuxt-module', { paths: [nuxt.options.modulesDir] })
-    } catch (err) {
-      // Module not found, skip Vuetify installation
-      console.warn('[mframework-ui] Vuetify not found, skipping Vuetify setup.')
-    }
-
-    if (vuetifyModulePath) {
-      await installModule(vuetifyModulePath, options.vuetify || {})
-    }
-  }
-})

package/runtime/plugins/icon-switcher.ts

@@ -1,32 +0,0 @@
-import { defineNuxtPlugin } from '#app'
-import { useVuetify } from 'vuetify-nuxt-module/runtime'
-
-export default defineNuxtPlugin((nuxtApp) => {
-  const vuetify = useVuetify()
-
-  // If Vuetify isn't ready yet, skip plugin initialization
-  if (!vuetify || !vuetify.framework) {
-    console.warn('[mframework-ui] Vuetify not ready for icon-switcher plugin')
-    return
-  }
-
-  const stored =
-    typeof localStorage !== 'undefined'
-      ? localStorage.getItem('mframework-icon-set')
-      : null
-
-  const initial = stored || 'mdi'
-
-  vuetify.framework.icons = vuetify.framework.icons || {}
-  vuetify.framework.icons.defaultSet = initial
-
-  const setIconSet = (name: string) => {
-    vuetify.framework.icons.defaultSet = name
-    localStorage.setItem('mframework-icon-set', name)
-  }
-
-  nuxtApp.provide('mIcons', {
-    setIconSet,
-    current: () => vuetify.framework.icons.defaultSet
-  })
-})

package/runtime/plugins/theme.ts

@@ -1,29 +0,0 @@
-import { useTheme } from 'vuetify'
-
-export default (nuxtApp: any) => {
-  const theme = useTheme()
-  // Attempt to read runtime config from nuxtApp (fallbacks to undefined)
-  const config: any = (nuxtApp && (nuxtApp as any).$config && (nuxtApp as any).$config.public && (nuxtApp as any).$config.public.mframeworkUi) || {}
-
-  // 1. Load persisted theme
-  const stored = typeof localStorage !== 'undefined' ? localStorage.getItem('mframework-theme') : null
-  const initial = stored || config?.theme?.default || 'light'
-  ;(theme as any).global.name.value = initial
-
-  // 2. Expose a global toggle
-  const toggleTheme = () => {
-    const newTheme = (theme as any).global.current.value.dark ? 'light' : 'dark'
-    ;(theme as any).global.name.value = newTheme
-    if (typeof localStorage !== 'undefined') localStorage.setItem('mframework-theme', newTheme)
-  }
-
-  // 3. Expose to app
-  nuxtApp.provide('mTheme', {
-    theme,
-    toggleTheme,
-    setTheme: (name: string) => {
-      ;(theme as any).global.name.value = name
-      if (typeof localStorage !== 'undefined') localStorage.setItem('mframework-theme', name)
-    }
-  })
-}

package/runtime/plugins/vuetify.js

@@ -1,12 +0,0 @@
-import { createVuetify } from 'vuetify';
-import * as components from 'vuetify/components';
-import * as directives from 'vuetify/directives';
-import 'vuetify/styles';
-import { defineNuxtPlugin } from '#app';
-export default defineNuxtPlugin((nuxtApp) => {
-    const vuetify = createVuetify({
-        components,
-        directives
-    });
-    nuxtApp.vueApp.use(vuetify);
-});

package/runtime/plugins/vuetify.ts

@@ -1,64 +0,0 @@
-// plugins/vuetify.ts
-import '@mdi/font/css/materialdesignicons.css'
-
-import 'vuetify/styles'
-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',
-        },
-      },
-      dark: {
-        dark: true,
-        variables: {},
-        colors: {},
-      },
-    },
-  },
-})
-
-export default (nuxtApp: any) => {
-  // Register FontAwesome component on the actual Vue app instance
-  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
-  nuxtApp.vueApp.use(vuetify)
-}

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "declaration": true,
-    "emitDeclarationOnly": false,
-    "outDir": "dist",
-    "moduleResolution": "bundler",
-    "module": "ESNext",
-    "target": "ESNext",
-    "strict": true,
-    "jsx": "react-jsx",
-    "skipLibCheck": true, 
-    "noEmitOnError": false
-  },
-  "include": ["runtime/**/*", "src/**/*", "types/**/*"],
-  "exclude": ["node_modules", "dist"]
-}

package/type.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="nuxt/app" />
-/// <reference types="nuxt/schema" />
-/// <reference types="nuxt" />
-
-export {}

package/types/ui/api/global-search.js

@@ -1 +0,0 @@
-export {};

package/types/ui/api/global-search.ts

@@ -1,8 +0,0 @@
-export interface GlobalSearchResult {
-	id?: string;
-	title?: string;
-	type?: string;
-	description?: string;
-	image?: string;
-	url?: string;
-}

package/types/ui/blocks/block-button-group.js

@@ -1 +0,0 @@
-export {};

package/types/ui/blocks/block-button-group.ts

@@ -1,7 +0,0 @@
-import type { BlockButton } from './block-button';
-
-export interface BlockButtonGroup {
-	id: string;
-	buttons: (string | BlockButton)[] | null;
-	alignment: 'left' | 'center' | null;
-}

package/types/ui/blocks/block-button.js

@@ -1 +0,0 @@
-export {};

package/types/ui/blocks/block-button.ts

@@ -1,14 +0,0 @@
-import type { Post, Page } from '../content';
-
-export interface BlockButton {
-	id: string;
-	sort: number | null;
-	type: ('pages' | 'posts' | 'external') | null;
-	label: string | null;
-	color: 'primary' | 'white' | 'gray' | 'white' | 'black';
-	variant: 'solid' | 'outline' | 'ghost' | 'link' | 'soft';
-	page: string | Page | null;
-	post: string | Post | null;
-	external_url: string | null;
-	icon: string | null;
-}

package/types/ui/blocks/block-column.js

@@ -1 +0,0 @@
-export {};