@mframework/ui 0.0.1

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/tailwind.conifg.js

@@ -0,0 +1 @@
+export const content = ['components/**/*.{vue,js}', 'pages/**/*.vue'];

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "lib": ["ES2020", "DOM"],
+    "resolveJsonModule": true
+  },
+  "include": ["**/*.ts", "**/*.d.ts"]
+}