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

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/color.ts

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

@@ -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/fonts.ts

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

@@ -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/formkit.ts

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

@@ -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/src/utils/icons.ts

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

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);
-});