@meeovi/layer-shared 1.0.0

package/app/types/system/file.ts

@@ -0,0 +1,46 @@
+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/app/types/system/folder.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/app/types/system/index.ts

@@ -0,0 +1,4 @@
+export type * from './file.js';
+export type * from './folder.js';
+export type * from './role.js';
+export type * from './user.js';

package/app/types/system/role.ts

@@ -0,0 +1,21 @@
+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/app/types/system/user.ts

@@ -0,0 +1,56 @@
+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/app/utils/Timer.js

@@ -0,0 +1,44 @@
+const ONE_SECONDS = 1000;
+
+export default class Timer {
+  constructor() {
+    this.currentInSeconds = 0;
+    this.timer = null
+  }
+
+  static convertToMillisecs(d = "0") {
+    return d.split(":").reverse().map((e) => +e).map((e, i) => (i === 0 ? e : e * Math.pow(60, i)) * 1000).reduce((p, c) => p + c, 0);
+  }
+
+  static toTimeString(timeInMillisecs) {
+    const c = new Date(timeInMillisecs);
+
+    const t = [
+      c.getHours() - 1,
+      c.getMinutes(),
+      c.getSeconds()
+    ]
+    return t.map((e) => ("" + e).padStart(2, "0")).join(":")
+  }
+
+  start(_at = 0, cb = (time) => {}) {
+    let _atInMillisecs = _at
+    if (typeof _at === "string") {
+      _atInMillisecs = Timer.convertToMillisecs(_at)
+    };
+    this.currentInSeconds = _atInMillisecs;
+
+    this.timer = setInterval(() => {
+      this.currentInSeconds += ONE_SECONDS;
+      cb(this.currentInSeconds)
+    }, ONE_SECONDS)
+  }
+
+  stop() {
+    clearInterval(this.timer)
+  }
+
+  reset () {
+    this.currentInSeconds = 0;
+  }
+}

package/app/utils/billing-address.ts

@@ -0,0 +1,24 @@
+import type { Organization, OrganizationAddress } from '../types';
+
+export function getPrimaryBillingAddress(organization: Organization): OrganizationAddress | null {
+	if (!organization || !organization.addresses || !Array.isArray(organization.addresses)) {
+		return null;
+	}
+
+	if (organization.addresses.length === 1) {
+		const address = organization.addresses[0];
+		return typeof address === 'string' ? null : address;
+	}
+
+	for (const address of organization.addresses) {
+		if (typeof address === 'string') {
+			continue;
+		}
+
+		if (address.is_primary_billing) {
+			return address;
+		}
+	}
+
+	return null;
+}

package/app/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/app/utils/currency.ts

@@ -0,0 +1,29 @@
+const formatCurrency = (
+	number: number,
+	options?: {
+		hideZeros?: boolean;
+	},
+) => {
+	const formatter = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD',
+		// These options are needed to round to whole numbers if that's what you want.
+		...(options &&
+			options.hideZeros && {
+				minimumFractionDigits: 0, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
+				maximumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501))
+			}),
+	});
+
+	return formatter.format(number);
+};
+
+function centsToDollars(cents: number) {
+	return Number((cents / 100).toFixed(2));
+}
+
+function dollarsToCents(dollars: number) {
+	return Math.round(dollars * 100);
+}
+
+export { formatCurrency, centsToDollars, dollarsToCents };

package/app/utils/embed.ts

@@ -0,0 +1,57 @@
+type UrlTransformation = {
+	pattern: RegExp;
+	replacement: string;
+};
+
+const transformations: UrlTransformation[] = [
+	// Video Players
+	{
+		pattern: /https:\/\/www\.youtube\.com\/watch\?v=(.+)/,
+		replacement: 'https://www.youtube.com/embed/$1',
+	},
+	{
+		pattern: /https:\/\/vimeo\.com\/(.+)/,
+		replacement: 'https://player.vimeo.com/video/$1',
+	},
+	{
+		pattern: /https:\/\/www\.loom\.com\/share\/(.+)/,
+		replacement: 'https://www.loom.com/embed/$1',
+	},
+	// File Services
+	{
+		pattern: /https:\/\/drive\.google\.com\/file\/d\/(.*?)\/view/,
+		replacement: 'https://drive.google.com/file/d/$1/preview',
+	},
+	// Calendar Tools
+	// Calendly: Remains unchanged
+	// SavvyCal: Remains unchanged
+	// Hubspot: @TODO
+];
+
+export function transformUrlToIframeSrc(url: string): string {
+	for (const transformation of transformations) {
+		if (transformation.pattern.test(url)) {
+			return url.replace(transformation.pattern, transformation.replacement);
+		}
+	}
+
+	// If no transformation matches, return the original URL.
+	return url;
+}
+
+//Generate the Youtube, Vimeo, or Loom embed URL based on an URL from the user
+export function generateVideoEmbed(url: string) {
+	if (url.includes('youtube.com')) {
+		return `https://www.youtube.com/embed/${url.split('v=')[1]}`;
+	}
+	// Handle youtu.be links
+	else if (url.includes('youtu.be')) {
+		return `https://www.youtube.com/embed/${url.split('be/')[1]}`;
+	} else if (url.includes('vimeo.com')) {
+		return `https://player.vimeo.com/video/${url.split('vimeo.com/')[1]}`;
+	} else if (url.includes('loom.com')) {
+		return `https://www.loom.com/embed/${url.split('loom.com/share/')[1]}`;
+	} else {
+		return url;
+	}
+}

package/app/utils/errors.ts

@@ -0,0 +1,9 @@
+import { ZodError } from 'zod'
+import { isNuxtError, type NuxtError } from '#imports'
+
+export function isNuxtZodError(err: unknown): err is NuxtError<{ data: ZodError }> {
+  return (
+    isNuxtError(err)
+    && (err.data as { data?: unknown })?.data instanceof ZodError
+  )
+}

package/app/utils/fieldRegistry.js

@@ -0,0 +1,89 @@
+import { defineAsyncComponent, markRaw } from 'vue'
+import TextInput from '~/components/blocks/forms/TextInput.vue'
+import TextArea from '~/components/blocks/forms/TextArea.vue'
+import SelectInput from '~/components/blocks/forms/SelectInput.vue'
+import BooleanInput from '~/components/blocks/forms/BooleanInput.vue'
+import DateTime from '~/components/blocks/forms/DateTime.vue'
+import FileInput from '~/components/blocks/forms/FileInput.vue'
+
+// Registry keyed by Directus schema.type (fallback)
+export const fieldRegistry = {
+    string: TextInput,
+    text: TextArea,
+    datetime: DateTime,
+    file: FileInput,
+    image: FileInput,
+    video: FileInput,
+    audio: FileInput,
+    document: FileInput,
+    archive: FileInput,
+    enum: SelectInput,
+    boolean: BooleanInput
+}
+
+// Registry keyed by Directus field.meta.interface (preferred)
+export const interfaceRegistry = {
+    // basic inputs
+    'input': TextInput,
+    'input-text': TextInput,
+    'input-rich-text': TextArea,
+    'input-rich-text-md': TextArea,
+    'textarea': TextArea,
+
+    // selects
+    'select-dropdown': SelectInput,
+    'select-multiple': SelectInput,
+    'select-list': SelectInput,
+
+    // boolean / switches
+    'boolean': BooleanInput,
+    'toggle': BooleanInput,
+
+    // files
+    'file': FileInput,
+    'file-image': FileInput,
+    'file-upload': FileInput,
+    'file-input': FileInput,
+
+    // dates
+    'datetime': DateTime,
+    'date': DateTime,
+    'time': DateTime,
+
+    // tags / relational-ish
+    'tags': SelectInput,
+
+    // fallback placeholders for other common interfaces (lazy-loaded if custom components are added)
+    'gallery': markRaw(defineAsyncComponent(() => import('~/components/blocks/forms/FileInput.vue'))),
+    'color': TextInput,
+    'rating': TextInput,
+    'url': TextInput,
+    'email': TextInput,
+    'password': TextInput,
+    'markdown': TextArea,
+}
+
+/**
+ * Resolve the component to render for a Directus field.
+ * Priority:
+ *  1. field.meta.interface -> interfaceRegistry
+ *  2. field.type -> fieldRegistry
+ *  3. fallback to TextInput
+ */
+export function resolveFieldComponent(field = {}) {
+    // prefer interface from meta
+    const iface = field?.meta?.interface
+    if (iface && interfaceRegistry[iface]) return interfaceRegistry[iface]
+
+    // some interfaces include variants or capitalization differences, try normalized lookup
+    if (iface) {
+        const normalized = String(iface).toLowerCase()
+        if (interfaceRegistry[normalized]) return interfaceRegistry[normalized]
+    }
+
+    // fallback to type mapping
+    if (field?.type && fieldRegistry[field.type]) return fieldRegistry[field.type]
+
+    // last-resort: use TextInput
+    return TextInput
+}

package/app/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/app/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/app/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/app/utils/links.ts

@@ -0,0 +1,28 @@
+// Function to easily format a mailto link. Encodes the subject and body to preserve formatting.
+export function createMailto(
+	to: string,
+	{ subject, body, cc, bcc }: { subject?: string; body?: string; cc?: string; bcc?: string } = {},
+): string {
+	const params = [
+		subject && `subject=${encodeURIComponent(subject)}`,
+		body && `body=${encodeURIComponent(body)}`,
+		cc && `cc=${encodeURIComponent(cc)}`,
+		bcc && `bcc=${encodeURIComponent(bcc)}`,
+	]
+		.filter(Boolean)
+		.join('&');
+
+	return `mailto:${to}?${params}`;
+}
+
+export function createTel(phoneNumber: string) {
+	// Remove all non-numeric characters
+	const cleanedNumber = phoneNumber.replace(/\D+/g, '');
+
+	// Check if the number has a country code (e.g., +1 for the US)
+	if (cleanedNumber.length > 10 && cleanedNumber.startsWith('1')) {
+		return `tel:+${cleanedNumber}`;
+	}
+
+	return `tel:${cleanedNumber}`;
+}

package/app/utils/lodash.ts

@@ -0,0 +1,33 @@
+export function omit<T extends Record<string, any>, K extends keyof T>(
+	object: T,
+	keysToOmit: K[] | any[],
+): Pick<T, Exclude<keyof T, K>> {
+	const result = { ...object };
+
+	for (const key of keysToOmit) {
+		delete result[key];
+	}
+
+	return result;
+}
+
+export function get(object: Record<string, any>, path: (string | number)[] | string, defaultValue?: any): any {
+	if (typeof path === 'string') {
+		path = path.split('.').map((key) => {
+			const numKey = Number(key);
+			return isNaN(numKey) ? key : numKey;
+		});
+	}
+
+	let result: any = object;
+
+	for (const key of path) {
+		if (result === undefined || result === null) {
+			return defaultValue;
+		}
+
+		result = result[key];
+	}
+
+	return result !== undefined ? result : defaultValue;
+}

package/app/utils/markdown.ts

@@ -0,0 +1,9 @@
+import { micromark } from 'micromark';
+import { gfm, gfmHtml } from 'micromark-extension-gfm';
+
+export function markdownToHtml(markdown: string) {
+	return micromark(markdown, {
+		extensions: [gfm()],
+		htmlExtensions: [gfmHtml()],
+	});
+}

package/app/utils/math.ts

@@ -0,0 +1,25 @@
+function formatPercent(number: number) {
+	return Number((number * 100).toFixed(1)) + '%';
+}
+
+function percentChange(num1: number, num2: number) {
+	if (num1 === 0 || num2 === 0) return 0;
+	return (num1 - num2) / num1;
+}
+
+function roundToDecimal(value: number | string, decimals: number | string) {
+	const val = typeof value === 'string' ? parseFloat(value) : value;
+	const dec = typeof decimals === 'string' ? parseInt(decimals, 10) : decimals;
+	// @ts-ignore
+	return Number(Math.round(val + 'e' + dec) + 'e-' + dec);
+}
+
+function isEven(n: number) {
+	return n % 2 === 0;
+}
+
+function isOdd(n: number) {
+	return Math.abs(n % 2) === 1;
+}
+
+export { formatPercent, percentChange, roundToDecimal, isEven, isOdd };