@mframework/ui 0.1.0-beta.2 → 0.1.0-beta.4

package/src/runtime/plugins/vuetify.ts

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

@@ -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/src/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/src/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/src/runtime/styles/index.scss

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

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

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

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

package/src/utils/color.js

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

@@ -1,14 +0,0 @@
-function getContrastColor(hexColor: string) {
-	// 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

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

@@ -1,24 +0,0 @@
-type FontFamilies = {
-	[font: string]: boolean | number[];
-};
-
-export const formatFonts = (families: FontFamilies, defaultWeights: number[] = [400]): string[] => {
-	const formatted: string[] = [];
-
-	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

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

@@ -1,75 +0,0 @@
-import { unref } from 'vue';
-
-export interface Condition {
-	field: string;
-	action: 'show' | 'hide';
-	condition: 'is_empty' | 'is_filled' | 'contains' | 'not_contains' | 'equals' | 'not_equal';
-	value: string;
-}
-
-function convertBoolean(value: string) {
-	if (value === 'true' || value === 'false') {
-		return value === 'true';
-	} else {
-		return value;
-	}
-}
-
-function mapCondition(condition: Condition['condition'], target: string) {
-	switch (condition) {
-		case 'is_empty':
-			return `!$get(${target}).value)`;
-		case 'is_filled':
-			return `$get(${target}).value)`;
-		default:
-			return undefined;
-	}
-}
-
-export function mapConditions(conditions: Condition[]) {
-	// 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: Array<object>) {
-	// Loop through the form schema from Directus
-	// This is required for FormKit to work
-	const items = unref(schema);
-	return items.map((item: any) => {
-		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

@@ -1,36 +0,0 @@
-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/src/utils/icons.ts

@@ -1,62 +0,0 @@
-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 const fileIconMap: Record<FileType, string> = {
-	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: FileType | string | null | undefined) {
-	if (!filetype) return 'material-symbols:attachment';
-
-	if (typeof filetype === 'string' && !(filetype in fileIconMap)) {
-		return 'material-symbols:attachment';
-	}
-
-	return fileIconMap[filetype as FileType];
-}