@mframework/ui 0.0.1 → 0.0.4

package/dist/types/ui/os/os-settings.d.ts

@@ -0,0 +1,17 @@
+import type { User } from '../system';
+export interface OsSettings {
+    id?: string;
+    next_invoice_number?: number | null;
+    next_proposal_number?: number | null;
+}
+export interface OsEmailTemplate {
+    id?: string;
+    sort?: number | null;
+    user_created?: (string | User) | null;
+    date_created?: string | null;
+    user_updated?: (string | User) | null;
+    date_updated?: string | null;
+    subject?: string | null;
+    body?: string | null;
+    name?: string | null;
+}

package/dist/types/ui/os/os-subscription.d.ts

@@ -0,0 +1,12 @@
+export interface OsSubscription {
+    id?: string;
+    quantity?: number | null;
+    cancel_at_period_end?: boolean | null;
+    created?: string | null;
+    ended_at?: string | null;
+    status?: string | null;
+    cancel_at?: string | null;
+    canceled_at?: string | null;
+    trial_start?: string | null;
+    trial_end?: string | null;
+}

package/dist/types/ui/os/os-task.d.ts

@@ -0,0 +1,32 @@
+import type { User } from '../system';
+import type { Form } from '../content';
+import type { OsProject } from '.';
+export interface OsTaskFile {
+    id?: string;
+    os_tasks_id?: (string | OsTask) | null;
+    directus_files_id?: (string | File) | null;
+    sort?: number | null;
+}
+export interface OsTask {
+    id?: string;
+    status?: string;
+    sort?: number | null;
+    user_created?: (string | User) | null;
+    date_created?: string | null;
+    user_updated?: (string | User) | null;
+    date_updated?: string | null;
+    project?: (string | OsProject) | null;
+    name?: string | null;
+    description?: string | null;
+    assigned_to?: (string | User) | null;
+    due_date?: string | null;
+    is_visible_to_client?: boolean;
+    type?: string;
+    date_completed?: string | null;
+    responsibility?: string | null;
+    start_date?: string | null;
+    embed_url?: string | null;
+    form?: (string | Form) | null;
+    files?: (string | OsTaskFile)[];
+    client_task_details?: string;
+}

package/dist/types/ui/os/os-tax-rate.d.ts

@@ -0,0 +1,12 @@
+import type { User } from '../system';
+export interface OsTaxRate {
+    id?: string;
+    status?: string;
+    sort?: number | null;
+    user_created?: (string | User) | null;
+    date_created?: string | null;
+    user_updated?: (string | User) | null;
+    date_updated?: string | null;
+    name?: string | null;
+    rate?: number | null;
+}

package/dist/types/ui/pageComponentMap.d.ts

@@ -0,0 +1,2 @@
+export declare const pageComponentMap: {};
+export default pageComponentMap;

package/dist/types/ui/pagination.d.ts

@@ -0,0 +1,6 @@
+export interface PaginationState {
+    page: number;
+    pageSize: number;
+    total: number;
+    totalPages: number;
+}

package/dist/types/ui/schema.d.ts

@@ -0,0 +1,78 @@
+import type { BlockColumn, BlockCta, BlockFaq, BlockForm, BlockGallery, BlockHero, BlockHtml, BlockLogocloud, BlockQuote, BlockRichtext, BlockStep, BlockTeam, BlockTestimonial, BlockVideo } from './blocks';
+import type { Globals, Navigation, Redirect, SEO, ProjectsSettings, PageSettings, ChatConfig, Event, Metric } from './meta';
+import type { Page, PageBlock, Category, Form, Post, Team, Testimonial, PagesProjects, PagesBlog } from './content';
+import type { Inbox, HelpArticle, HelpCollection, HelpFeedback } from './help';
+import type { File, User } from './system';
+import type { Conversation, Message, Contact, Organization, OrganizationAddress, OrganizationContact, OsActivity, OsActivityContact, OsDealContact, OsDeal, OsDealStage, OsEmailTemplate, OsExpense, OsInvoiceItem, OsInvoice, OsItem, OsPayment, OsPaymentTerm, OsProjectContact, OsProjectFile, OsProject, OsProjectTemplate, OsProposalApproval, OsProposalBlock, OsProposalContact, OsProposal, OsSettings, OsSubscription, OsTaskFile, OsTask, OsTaxRate } from './os';
+/** Directus Schema for SDK */
+export interface Schema {
+    pages: Page[];
+    pages_blocks: PageBlock[];
+    categories: Category[];
+    forms: Form[];
+    posts: Post[];
+    team: Team[];
+    testimonials: Testimonial[];
+    pages_projects: PagesProjects;
+    pages_blog: PagesBlog;
+    block_columns: BlockColumn[];
+    block_cta: BlockCta[];
+    block_faq: BlockFaq[];
+    block_form: BlockForm[];
+    block_gallery: BlockGallery[];
+    block_hero: BlockHero[];
+    block_html: BlockHtml[];
+    block_logocloud: BlockLogocloud[];
+    block_quote: BlockQuote[];
+    block_richtext: BlockRichtext[];
+    block_steps: BlockStep[];
+    block_team: BlockTeam[];
+    block_testimonial: BlockTestimonial[];
+    block_video: BlockVideo[];
+    contacts: Contact[];
+    organizations: Organization[];
+    organization_addresses: OrganizationAddress[];
+    organizations_contacts: OrganizationContact[];
+    os_activities: OsActivity[];
+    os_activity_contacts: OsActivityContact[];
+    os_deal_contacts: OsDealContact[];
+    os_deals: OsDeal[];
+    os_deal_stages: OsDealStage[];
+    os_email_templates: OsEmailTemplate[];
+    os_expenses: OsExpense[];
+    os_invoice_items: OsInvoiceItem[];
+    os_invoices: OsInvoice[];
+    os_items: OsItem[];
+    os_payments: OsPayment[];
+    os_payment_terms: OsPaymentTerm[];
+    os_project_contacts: OsProjectContact[];
+    os_project_files: OsProjectFile[];
+    os_projects: OsProject[];
+    os_project_templates: OsProjectTemplate[];
+    os_proposal_approvals: OsProposalApproval[];
+    os_proposal_blocks: OsProposalBlock[];
+    os_proposal_contacts: OsProposalContact[];
+    os_proposals: OsProposal[];
+    os_settings: OsSettings;
+    os_subscriptions: OsSubscription[];
+    os_task_files: OsTaskFile[];
+    os_tasks: OsTask[];
+    os_tax_rates: OsTaxRate[];
+    help_collections: HelpCollection[];
+    help_articles: HelpArticle[];
+    help_feedback: HelpFeedback[];
+    inbox: Inbox[];
+    conversations: Conversation[];
+    messages: Message[];
+    globals: Globals;
+    navigation: Navigation[];
+    redirects: Redirect[];
+    seo: SEO[];
+    projects_settings: ProjectsSettings;
+    page_settings: PageSettings;
+    chat_config: ChatConfig;
+    metrics: Metric[];
+    events: Event[];
+    directus_files: File[];
+    directus_users: User[];
+}

package/dist/types/ui/state.d.ts

@@ -0,0 +1,5 @@
+export interface FormState {
+    loading: boolean;
+    error?: string;
+    success?: string;
+}

package/dist/types/ui/system/file.d.ts

@@ -0,0 +1,47 @@
+import type { Folder } from './folder.js';
+import type { User } from './user.js';
+export interface File {
+    /** Unique identifier for the file. */
+    id: string;
+    /** Where the file is stored. Either `local` for the local filesystem or the name of the storage adapter (for example `s3`). */
+    storage: string;
+    /** Name of the file on disk. By default, Directus uses a random hash for the filename. */
+    filename_disk: string;
+    /** How you want to the file to be named when it's being downloaded. */
+    filename_download: string;
+    /** Title for the file. Is extracted from the filename on upload, but can be edited by the user. */
+    title: string;
+    /** MIME type of the file. */
+    type: string;
+    /** Virtual folder where this file resides in. */
+    folder: string | Folder | null;
+    /** Who uploaded the file. */
+    uploaded_by: string | User;
+    /** When the file was uploaded. */
+    uploaded_on: string;
+    modified_by: string | User | null;
+    modified_on: string;
+    /** Character set of the file. */
+    charset: string | null;
+    /** Size of the file in bytes. */
+    filesize: number;
+    /** Width of the file in pixels. Only applies to images. */
+    width: number | null;
+    /** Height of the file in pixels. Only applies to images. */
+    height: number | null;
+    /** Duration of the file in seconds. Only applies to audio and video. */
+    duration: number | null;
+    /** Where the file was embedded from. */
+    embed: string | null;
+    /** Description for the file. */
+    description: string | null;
+    /** Where the file was created. Is automatically populated based on EXIF data for images. */
+    location: string | null;
+    /** Tags for the file. Is automatically populated based on EXIF data for images. */
+    tags: string[] | null;
+    /** IPTC, EXIF, and ICC metadata extracted from file */
+    metadata: {
+        [key: string]: any;
+    } | null;
+    storage_divider: string;
+}

package/dist/types/ui/system/folder.d.ts

@@ -0,0 +1,8 @@
+export interface Folder {
+    /** Unique identifier for the folder. */
+    id: string;
+    /** Name of the folder. */
+    name: string;
+    /** Unique identifier of the parent folder. This allows for nested folders. */
+    parent: string | Folder | null;
+}

package/dist/types/ui/system/role.d.ts

@@ -0,0 +1,20 @@
+import type { User } from './user.js';
+export interface Role {
+    /** Unique identifier for the role. */
+    id: string;
+    /** Name of the role. */
+    name: string;
+    /** The role's icon. */
+    icon: string;
+    /** Description of the role. */
+    description: string | null;
+    /** Array of IP addresses that are allowed to connect to the API as a user of this role. */
+    ip_access: string[];
+    /** Whether or not this role enforces the use of 2FA. */
+    enforce_tfa: boolean;
+    /** Admin role. If true, skips all permission checks. */
+    admin_access: boolean;
+    /** The users in the role are allowed to use the app. */
+    app_access: boolean;
+    users: string | User[];
+}

package/dist/types/ui/system/user.d.ts

@@ -0,0 +1,57 @@
+import type { Role } from './role.js';
+export interface User {
+    /** Unique identifier for the user. */
+    id: string;
+    /** First name of the user. */
+    first_name: string;
+    /** Last name of the user. */
+    last_name: string;
+    /** Unique email address for the user. */
+    email: string;
+    /** Password of the user. */
+    password: string;
+    /** The user's location. */
+    location: string | null;
+    /** The user's title. */
+    title: string | null;
+    /** The user's description. */
+    description: string | null;
+    /** The user's tags. */
+    tags: string[] | null;
+    /** The user's avatar. */
+    avatar: string | File | null;
+    /** The user's language used in Directus. */
+    language: string;
+    /** What theme the user is using. */
+    theme: 'light' | 'dark' | 'auto';
+    /** The 2FA secret string that's used to generate one time passwords. */
+    tfa_secret: string | null;
+    /** Status of the user. */
+    status: 'active' | 'invited' | 'draft' | 'suspended' | 'deleted';
+    /** Unique identifier of the role of this user. */
+    role: string | Role;
+    /** Static token for the user. */
+    token: string | null;
+    last_access: string | null;
+    /** Last page that the user was on. */
+    last_page: string | null;
+    provider: string;
+    external_identifier: string | null;
+    auth_data: {
+        [key: string]: any;
+    } | null;
+    github: string | null;
+    linkedin: string | null;
+    start_date: string | null;
+    pronouns: string | null;
+    nickname: string | null;
+    birthday: string | null;
+    personal_email: string | null;
+    classification: string | null;
+    timezone: string | null;
+    phone: string | null;
+    email_notifications: boolean | null;
+    company_info: string;
+    preferences_divider: string;
+    admin_divider: string;
+}

package/dist/types/ui.d.ts

@@ -0,0 +1,21 @@
+export interface Image {
+    url: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+    [key: string]: any;
+}
+export interface Product {
+    id: string;
+    name?: string;
+    price?: number;
+    images?: Image[];
+    [key: string]: any;
+}
+export interface Category {
+    id: string;
+    name?: string;
+    slug?: string;
+    image?: string;
+    [key: string]: any;
+}

package/module.ts

@@ -0,0 +1,104 @@
+// @mframework/ui/module.ts
+import {
+  defineNuxtModule,
+  addPlugin,
+  addComponentsDir,
+  createResolver,
+  installModule
+} 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/image
+    //
+    await installModule('@nuxt/image', options.image || {})
+
+    //
+    // 3. Install @nuxt/fonts
+    //
+    await installModule('@nuxt/fonts', options.fonts || {})
+
+    //
+    // 4. Install Vuetify via vuetify-nuxt-module
+    //
+    await installModule('vuetify-nuxt-module', {
+      vuetifyOptions: options.vuetify?.vuetifyOptions || {}
+    })
+
+    //
+    // 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 || {}
+      nuxt.options.postcss.plugins['tailwindcss'] = {}
+      nuxt.options.postcss.plugins['autoprefixer'] = {}
+
+      nuxt.options.tailwindcss = {
+        configPath: resolve('./runtime/assets/config/tailwind.config.cjs')
+      }
+    }
+
+    //
+    // 6. Register plugins (icons, theme, icon switching, search)
+    //
+    addPlugin(resolve('./runtime/plugins/icons'))
+    addPlugin(resolve('./runtime/plugins/theme'))
+    addPlugin(resolve('./runtime/plugins/icon-switcher'))
+    addPlugin(resolve('./runtime/search/plugin'))
+
+    //
+    // 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mframework/ui",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "description": "Official opinionated UI module for the M Framework.",
   "keywords": [
     "ui",
@@ -12,9 +12,12 @@
   "license": "MIT",
   "author": "M Framework",
   "type": "module",
-  "main": "index.ts",
+  "main": "module.ts",
+  "exports": {
+    "./module": "./module.ts"
+  },
+  "types": "./types.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc -p tsconfig.json"
   },
   "dependencies": {
@@ -23,18 +26,14 @@
     "@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/image": "^2.0.0",
+    "@nuxt/kit": "^4.3.1",
     "@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-component-type-helpers": "^3.2.4",
-    "vuetify-nuxt-module": "^0.18.8"
+    "vue": "^3.5.28",
+    "vuetify": "^3.11.8"
   },
   "devDependencies": {
     "sass": "^1.94.2",

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

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

package/runtime/assets/css/tailwind.css

@@ -0,0 +1,11 @@
+/* @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

@@ -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'
+  }
+}

package/runtime/plugins/icon-switcher.ts

@@ -0,0 +1,21 @@
+import { vuetify } from './vuetify'
+
+export default (nuxtApp: any) => {
+  const stored = typeof localStorage !== 'undefined' ? localStorage.getItem('mframework-icon-set') : null
+  const initial = stored || 'mdi'
+
+  // `vuetify` typing differs between versions; treat as any here
+  ;(vuetify as any).framework = (vuetify as any).framework || {}
+  ;(vuetify as any).framework.icons = (vuetify as any).framework.icons || {}
+  ;(vuetify as any).framework.icons.defaultSet = initial
+
+  const setIconSet = (name: string) => {
+    ;(vuetify as any).framework.icons.defaultSet = name
+    if (typeof localStorage !== 'undefined') localStorage.setItem('mframework-icon-set', name)
+  }
+
+  nuxtApp.provide('mIcons', {
+    setIconSet,
+    current: () => (vuetify as any).framework.icons.defaultSet,
+  })
+}

package/runtime/plugins/theme.ts

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

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

@@ -0,0 +1,64 @@
+// 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)
+}