@mframework/ui 0.0.6-beta5 → 0.1.0-beta.0

package/package.json

@@ -1,24 +1,29 @@
 {
   "name": "@mframework/ui",
-  "version": "0.0.6-beta5",
-  "description": "Official opinionated UI module for the M Framework.",
+  "version": "0.1.0-beta.0",
+  "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",
     "ui",
-    "vuetify",
-    "fontawesome",
-    "m-framework",
+    "components",
+    "mframework",
     "meeovi"
   ],
-  "license": "MIT",
-  "author": "M Framework",
-  "type": "module",
-  "main": "module.ts",
-  "exports": {
-    "./module": "./module.ts"
-  },
-  "types": "./types.d.ts",
   "scripts": {
-    "build": "tsc -p tsconfig.json"
+    "build": "nuxt-module-build",
+    "dev": "nuxt-module-dev"
+  },
+  "peerDependencies": {
+    "nuxt": "^3.13.0",
+    "vue": "^3.5.0"
   },
   "dependencies": {
     "@formkit/nuxt": "^1.7.2",
@@ -26,17 +31,22 @@
     "@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/fonts": "^0.13.0",
-    "@nuxt/kit": "^4.3.1",
+    "@nuxt/image": "^2.0.0",
     "@vueuse/motion": "^3.0.3",
+    "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": "^3.5.28",
-    "vuetify": "^3.11.8",
-    "vuetify-nuxt-module": "^0.19.5"
+    "vuetify": "^3.7.0",
+    "vuetify-nuxt-module": "^0.18.8"
   },
   "devDependencies": {
     "sass": "^1.94.2",
-    "sass-embedded": "^1.93.3"
+    "sass-embedded": "^1.93.3",
+    "typescript": "^5.7.0"
   }
-}
+}

package/module.ts

@@ -1,138 +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
-
-    //
-    // 3. Install @nuxt/fonts
-    //
-    await installModule('@nuxt/fonts', options.fonts || {})
-
-    //
-    // 4. 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 vuetifyInstalled = false
-    try {
-      // Use Node resolution from this project's root to detect installed package
-      // without triggering Nuxt's module loader.
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      const {
-        createRequire
-      } = await import('module')
-      const req = createRequire(import.meta.url)
-      try {
-        req.resolve('vuetify')
-        // Vuetify is present in the project's node_modules. We won't call
-        // `installModule` here to avoid forcing Nuxt to load the module
-        // during `nuxt prepare` (which can fail in some install environments).
-        vuetifyInstalled = true
-      } catch (e) {
-        // Vuetify not found — skip installing the module
-        // eslint-disable-next-line no-console
-        console.warn('@mframework/ui: Vuetify not found in project dependencies; skipping Vuetify integration.')
-      }
-    } catch (err) {
-      // If resolution itself fails for any reason, avoid breaking the setup.
-      // eslint-disable-next-line no-console
-      console.warn('@mframework/ui: Failed to detect Vuetify availability; skipping Vuetify integration.')
-      vuetifyInstalled = false
-    }
-
-    //
-    // 5. Tailwind + Vuetify coexistence
-    //
-    if (options.tailwind?.enable !== false) {
-      nuxt.options.css = nuxt.options.css || []
-      nuxt.options.css.push(resolve('./runtime/assets/css/tailwind.css'))
-
-      nuxt.options.postcss = nuxt.options.postcss || {
-        plugins: {},
-        order: []
-      }
-      nuxt.options.postcss.plugins = nuxt.options.postcss.plugins || {}
-      // Use the new PostCSS adapter package name so Nuxt doesn't try to
-      // use the old `tailwindcss` package as a PostCSS plugin.
-      nuxt.options.postcss.plugins['@tailwindcss/postcss'] = {}
-      nuxt.options.postcss.plugins['autoprefixer'] = {}
-
-      nuxt.options.tailwindcss = {
-        configPath: resolve('./runtime/assets/config/tailwind.config.cjs')
-      }
-    }
-
-    //
-    // 6. Register plugins (icons, theme, icon switching, search).
-    //    Only register plugins that require Vuetify when Vuetify is available.
-    //
-    // Install Vuetify first
-    await installModule(resolveModule('vuetify-nuxt-module'), {
-      vuetifyOptions: options.vuetify?.vuetifyOptions || {}
-    })
-
-    // THEN load plugins that depend on Vuetify
-    addPlugin(resolve('./runtime/plugins/theme'))
-    addPlugin(resolve('./runtime/plugins/icon-switcher'))
-
-    //
-    // 7. Auto-import components from this module
-    //
-    addComponentsDir({
-      path: resolve('./runtime/components'),
-      pathPrefix: false,
-      prefix: 'M'
-    })
-
-    addComponentsDir({
-      path: resolve('./runtime/search/components'),
-      prefix: 'M'
-    })
-  }
-})

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

@@ -1,11 +0,0 @@
-const { tokens } = require('../../design/tokens')
-
-module.exports = {
-  theme: {
-    extend: {
-      colors: tokens.colors,
-      borderRadius: tokens.radius,
-      spacing: tokens.spacing
-    }
-  }
-}

package/runtime/assets/css/tailwind.css

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

package/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/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/runtime/search/client.ts

@@ -1,25 +0,0 @@
-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/runtime/search/components/MSearch.vue

@@ -1,19 +0,0 @@
-<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/runtime/search/plugin.ts

@@ -1,9 +0,0 @@
-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/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 {};

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

@@ -1,20 +0,0 @@
-import type { File } from '../system';
-import type { BlockButtonGroup } from '.';
-
-export interface BlockColumn {
-	headline?: string | null;
-	id?: string;
-	title?: string | null;
-	rows?: (number | BlockColumnRow)[];
-}
-
-export interface BlockColumnRow {
-	block_columns?: (string | BlockColumn) | null;
-	content?: string | null;
-	headline?: string | null;
-	id?: string;
-	image?: (string | File) | null;
-	image_position?: string | null;
-	title?: string | null;
-	button_group?: (string | BlockButtonGroup) | null;
-}

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

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

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

@@ -1,10 +0,0 @@
-import type { BlockButtonGroup } from '.';
-
-export interface BlockCta {
-	buttons?: { [key: string]: any } | null;
-	content?: string | null;
-	headline?: string | null;
-	id?: string;
-	title?: string | null;
-	button_group?: (string | BlockButtonGroup) | null;
-}

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

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

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

@@ -1,4 +0,0 @@
-export interface BlockDivider {
-	id?: string;
-	title?: string | null;
-}

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

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

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

@@ -1,12 +0,0 @@
-export interface BlockFaq {
-	faqs?: BlockFaqQuestion[] | null;
-	headline?: string | null;
-	id?: string;
-	title?: string | null;
-	alignment?: 'left' | 'center' | null;
-}
-
-export interface BlockFaqQuestion {
-	title: string | null;
-	answer: string | null;
-}

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

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

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

@@ -1,8 +0,0 @@
-import type { Form } from '../content';
-
-export interface BlockForm {
-	form?: (string | Form) | null;
-	headline?: string | null;
-	id?: string;
-	title?: string | null;
-}

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

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

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

@@ -1,14 +0,0 @@
-import type { File } from '../system';
-
-export interface BlockGallery {
-	headline?: string | null;
-	id?: string;
-	title?: string | null;
-	gallery_items?: BlockGalleryFile[] | null;
-}
-export interface BlockGalleryFile {
-	block_gallery?: (string | BlockGallery) | null;
-	directus_files_id?: (string | File) | null;
-	id?: number;
-	sort?: number | null;
-}

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

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

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

@@ -1,12 +0,0 @@
-import type { File } from '../system';
-import type { BlockButtonGroup } from '.';
-
-export interface BlockHero {
-	id?: string;
-	title?: string | null;
-	headline?: string | null;
-	content?: string | null;
-	image?: (string | File) | null;
-	image_position?: 'left' | 'right' | null;
-	button_group?: (string | BlockButtonGroup) | null;
-}

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

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

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

@@ -1,4 +0,0 @@
-export interface BlockHtml {
-	id?: string;
-	raw_html?: string | null;
-}

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

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

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

@@ -1,14 +0,0 @@
-import type { File } from '../system';
-
-export interface BlockLogocloud {
-	headline?: string | null;
-	id?: string;
-	title?: string | null;
-	logos?: (string | BlockLogocloudFile)[];
-}
-export interface BlockLogocloudFile {
-	id?: string;
-	sort?: number | null;
-	block_logocloud_id?: (string | BlockLogocloud) | null;
-	directus_files_id?: (string | File) | null;
-}