@bagelink/vue 0.0.25 → 0.0.35

package/src/utils/index.ts

@@ -0,0 +1,62 @@
+import { inject } from 'vue';
+import { useModal } from './modal';
+import type { BagelField } from '@/types/BagelField';
+
+let timeout: any;
+const debounce = (fn: () => void, delay = 500) => {
+	clearTimeout(timeout);
+	timeout = setTimeout(fn, delay);
+};
+
+export const keyToLabel = (key: string) => key
+	.split('_')
+	.map((k) => k.charAt(0).toUpperCase() + k.slice(1))
+	.join(' ');
+
+export function computeFields(modelValue: Record<string, any>): BagelField[] {
+	const fields = [];
+	for (const key of Object.keys(modelValue)) {
+		const field: BagelField = {
+			label: keyToLabel(key),
+			id: key,
+			inputType: 'PlainText',
+		};
+		if (typeof modelValue[key] === 'string') field.inputType = 'PlainText';
+		if (typeof modelValue[key] === 'number') field.inputType = 'NumberInput';
+		if (modelValue[key] === true || modelValue[key] === false) field.inputType = 'CheckInput';
+		if (
+			modelValue[key] instanceof Date ||
+			!Number.isNaN(Date.parse(modelValue[key]))
+		) field.inputType = 'DateInput';
+
+		fields.push(field);
+	}
+	return fields;
+}
+
+const copyText = async (
+	text: string,
+	// eslint-disable-next-line no-unused-vars
+	cb?: (msg: string) => void,
+) => {
+	await navigator.clipboard.writeText(text);
+	if (cb) cb('Copied to clipboard');
+};
+
+export const useFormkit = () => {
+	const formkit = inject('FormKitConfig');
+	return formkit;
+};
+
+export const initials = (...strArr: string[]) => strArr.map((str) => str?.charAt(0)).join('');
+
+export const parseLocale = (str: string, $t = (_str: string) => _str) => {
+	// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+	const [_, w] = str.split(/\$t\('?"?|'?"?\)/);
+	if (!w) return str;
+	return $t(w);
+};
+
+export {
+	debounce, copyText, useModal,
+};

package/src/utils/modal.ts

@@ -0,0 +1,101 @@
+import {
+	h, InjectionKey, ref, inject, defineComponent,
+} from 'vue';
+import type { Plugin } from 'vue';
+import { Modal, ModalForm } from '@/components';
+import type { BtnOptions } from '@/types/BtnOptions';
+
+interface ModalOptions {
+	title?: string;
+	dismissable?: boolean;
+	side?: boolean;
+	actions?: BtnOptions[];
+	class?: string;
+}
+
+interface ModalFormOptions extends ModalOptions {
+	modelValue?: any;
+	// eslint-disable-next-line no-unused-vars
+	'onUpdate:modelValue'?: (val: any) => void;
+	// eslint-disable-next-line no-unused-vars
+	onSubmit: (val: any) => void;
+	// eslint-disable-next-line no-unused-vars
+	onDelete?: (id: string) => void;
+	schema: any;
+}
+
+interface ModalApi {
+	// eslint-disable-next-line no-unused-vars
+	showModal: (options: ModalOptions, slots?: Record<string, any>) => void;
+	// eslint-disable-next-line no-unused-vars
+	modalForm: (options: ModalFormOptions, slots?: Record<string, any>) => void;
+	// eslint-disable-next-line no-unused-vars
+	hideModal: (index?: number) => void;
+	// modalOptions: Ref<ModalOptions | ModalFormOptions>;
+}
+
+const ModalSymbol: InjectionKey<ModalApi> = Symbol('modal');
+
+export const useModal = (): ModalApi => {
+	const modalApi = inject(ModalSymbol);
+	if (!modalApi) throw new Error('Modal API not provided');
+	return modalApi;
+};
+
+interface ModalComponentProps {
+	componentSlots: Record<string, any>,
+	isModalForm: boolean,
+	modalOptions: ModalOptions | ModalFormOptions
+}
+
+export const ModalPlugin: Plugin = {
+	install: (app) => {
+		const modalStack = ref<ModalComponentProps[]>([]);
+		const showModal = (
+			isForm: boolean,
+			options: ModalOptions | ModalFormOptions,
+			slots: Record<string, any> = {},
+		) => {
+			modalStack.value.push({
+				modalOptions: options,
+				isModalForm: isForm,
+				componentSlots: slots,
+			});
+		};
+
+		const hideModal = (index: number) => {
+			// console.log('hideModal', index);
+			modalStack.value.splice(index, 1);
+		};
+
+		app.provide(ModalSymbol, {
+			modalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal(true, options, slots),
+			showModal: (options: ModalOptions, slots?: Record<string, any>) => showModal(false, options, slots),
+			hideModal: (index = modalStack.value.length - 1) => hideModal(index),
+			// modalOptions,
+		});
+		const ModalComponent = defineComponent({
+			data() {
+				return {
+					modalStack,
+				};
+			},
+			render() {
+				return modalStack.value.map((modal, index) => {
+					const renderComponent = modal.isModalForm ? ModalForm : Modal;
+					return h(
+						renderComponent,
+						{
+							...modal.modalOptions,
+							'onUpdate:isModalVisible': () => hideModal(index),
+						},
+						modal.componentSlots,
+					);
+				});
+			},
+		});
+		app.component('ModalContainer', ModalComponent);
+	},
+};
+
+export default ModalPlugin;

package/src/utils/objects.ts

@@ -0,0 +1,81 @@
+import { BagelField } from '@/types';
+
+function returnTypes(bagelField?: BagelField) {
+	if (bagelField?.is_array) return [];
+	if (bagelField?.inputType === 'BagelForm') return {};
+	if (bagelField?.inputType === 'CheckInput') return false;
+	return '';
+}
+
+export function getPropByPath(
+	obj: Record<string, any>,
+	propPath?: string,
+	bagelField?: BagelField,
+) {
+	// Return the object if the path is empty or the object is not an 'object' type
+	if (!propPath || typeof obj !== 'object') return obj;
+
+	const props = propPath.split(/\.|\[(\d+)\]/).filter(Boolean);
+	let result = obj;
+	for (const prop of props) {
+		if (result !== null && typeof result === 'object' && prop in result) {
+			result = result[prop];
+		} else {
+			return bagelField ? returnTypes(bagelField) : '';
+		}
+	}
+	return result;
+}
+
+export function setPropByPath(
+	obj: Record<string, any>,
+	path?: string,
+	value?: any,
+) {
+	const keys = path?.split(/\.|\[(\d+)\]/)?.filter(Boolean) || [];
+	let current = obj;
+
+	for (let i = 0; i < keys.length - 1; i++) {
+		const key = keys[i];
+		const nextKey = keys[i + 1];
+
+		const nextIsArrayIndex = !Number.isNaN(parseInt(nextKey, 10));
+
+		if (!current[key]) {
+			current[key] = nextIsArrayIndex ? [] : {};
+		} else if (typeof current[key] !== 'object') {
+			throw new Error(
+				`Cannot set property '${keys
+					.slice(i)
+					.join('.')}', object or array expected`,
+			);
+		}
+		current = current[key];
+	}
+	current[keys[keys.length - 1]] = value;
+}
+
+// export function setPropByPath(
+// 	obj: Record<string, any>,
+// 	propPath: string,
+// 	value: any,
+// ) {
+// 	// console.log('getPropByPath', obj, { propPath });
+// 	if (!propPath || typeof obj !== 'object') return obj;
+
+// 	const props = propPath.split(/\.|\[(\d+)\]/).filter(Boolean);
+// 	let result = obj;
+// 	console.log(props);
+// 	for (let i = 0; i < props.length; i++) {
+// 		const prop = props[i];
+// 		if (i === props.length - 1) {
+// 			result[prop] = value;
+// 		} else if (result && prop in result) {
+// 			result = result[prop];
+// 		} else {
+// 			return undefined;
+// 		}
+// 	}
+
+// 	return result;
+// }

package/src/utils/strings.ts

@@ -0,0 +1,36 @@
+export function formatString(
+	str: string,
+	format: 'pascal' | 'camel' | 'snake' | 'titleCase',
+): string {
+	if (format === 'titleCase') {
+		return str
+			.split('_')
+			.map((word) => word[0].toUpperCase() + word.slice(1).toLocaleLowerCase())
+			.join(' ');
+	}
+
+	if (format === 'pascal') {
+		return str
+			.split('_')
+			.map((word) => word[0].toUpperCase() + word.slice(1).toLocaleLowerCase())
+			.join('');
+	}
+	if (format === 'camel') {
+		return str
+			.split('_')
+			.map((word, index) => (index === 0 ? word : word[0].toUpperCase() + word.slice(1)))
+			.join('');
+	}
+	if (format === 'snake') {
+		return str
+			.split('')
+			.map((letter) => {
+				if (letter === letter.toUpperCase()) {
+					return `_${letter.toLowerCase()}`;
+				}
+				return letter;
+			})
+			.join('');
+	}
+	return str;
+}

package/dist/index.cjs

@@ -1,23 +0,0 @@
-'use strict';
-
-const vue = require('vue');
-const sdk = require('@bagelink/sdk');
-
-const bagelInjectionKey = Symbol("bagel");
-function useBagel() {
-  const bagel = vue.inject(bagelInjectionKey);
-  if (!bagel)
-    throw new Error("No bagel provided");
-  return bagel;
-}
-const BagelVue = {
-  install: (app, options) => {
-    const bagel = new sdk.Bagel({ host: options.host, onError: options.onError });
-    app.config.globalProperties.$bagel = bagel;
-    app.provide(bagelInjectionKey, bagel);
-  }
-};
-
-exports.BagelVue = BagelVue;
-exports.bagelInjectionKey = bagelInjectionKey;
-exports.useBagel = useBagel;

package/dist/index.d.cts

@@ -1,12 +0,0 @@
-import { InjectionKey, Plugin } from 'vue';
-import { Bagel } from '@bagelink/sdk';
-
-declare const bagelInjectionKey: InjectionKey<Bagel>;
-declare function useBagel(): Bagel;
-interface BagelOptions {
-    host: string;
-    onError?: (err: Error) => void;
-}
-declare const BagelVue: Plugin;
-
-export { type BagelOptions, BagelVue, bagelInjectionKey, useBagel };

package/dist/index.d.mts

@@ -1,12 +0,0 @@
-import { InjectionKey, Plugin } from 'vue';
-import { Bagel } from '@bagelink/sdk';
-
-declare const bagelInjectionKey: InjectionKey<Bagel>;
-declare function useBagel(): Bagel;
-interface BagelOptions {
-    host: string;
-    onError?: (err: Error) => void;
-}
-declare const BagelVue: Plugin;
-
-export { type BagelOptions, BagelVue, bagelInjectionKey, useBagel };

package/dist/index.d.ts

@@ -1,12 +0,0 @@
-import { InjectionKey, Plugin } from 'vue';
-import { Bagel } from '@bagelink/sdk';
-
-declare const bagelInjectionKey: InjectionKey<Bagel>;
-declare function useBagel(): Bagel;
-interface BagelOptions {
-    host: string;
-    onError?: (err: Error) => void;
-}
-declare const BagelVue: Plugin;
-
-export { type BagelOptions, BagelVue, bagelInjectionKey, useBagel };

package/dist/index.mjs

@@ -1,19 +0,0 @@
-import { inject } from 'vue';
-import { Bagel } from '@bagelink/sdk';
-
-const bagelInjectionKey = Symbol("bagel");
-function useBagel() {
-  const bagel = inject(bagelInjectionKey);
-  if (!bagel)
-    throw new Error("No bagel provided");
-  return bagel;
-}
-const BagelVue = {
-  install: (app, options) => {
-    const bagel = new Bagel({ host: options.host, onError: options.onError });
-    app.config.globalProperties.$bagel = bagel;
-    app.provide(bagelInjectionKey, bagel);
-  }
-};
-
-export { BagelVue, bagelInjectionKey, useBagel };