@bagelink/vue 0.0.32 → 0.0.37

package/src/components/form/inputs/TextArea.vue

@@ -1,9 +1,16 @@
 <template>
-	<div class="bagel-input" :title="description" :class="{ small: small }">
+	<div
+		class="bagel-input"
+		:title="description"
+		:class="{ small: small }"
+	>
 		<label v-if="label">
 			<LangText :input="label" />
 		</label>
-		<span class="character-limit" v-if="showCharacterLimit">
+		<span
+			class="character-limit"
+			v-if="showCharacterLimit"
+		>
 			{{ modelValue?.length }}
 			{{ nativeInputAttrs?.maxlength ? `/${nativeInputAttrs.maxlength}` : '' }}
 		</span>
@@ -54,12 +61,14 @@ const handleInput = (e: Event) => {
 .bagel-input label {
 	margin-bottom: 0;
 }
+
 .bagel-input textarea {
 	height: 100%;
 	resize: none;
 	background: var(--input-bg);
 	margin-bottom: 0.5rem;
 }
+
 .character-limit {
 	font-size: 0.6rem;
 	color: var(--input-color);

package/src/components/form/inputs/TextInput.vue

@@ -1,10 +1,20 @@
 <template>
-	<div class="bagel-input" :class="{ small }" :title="title">
+	<div
+		class="bagel-input"
+		:class="{ small }"
+		:title="title"
+	>
 		<label :for="id">
 			{{ label }}
 			<input
-				:id="id" v-model="inputVal" type="text" :placeholder="placeholder || label"
-				:class="{ 'no-edit': !editMode }" :required="required" :pattern="pattern" v-bind="nativeInputAttrs"
+				:id="id"
+				v-model="inputVal"
+				type="text"
+				:placeholder="placeholder || label"
+				:class="{ 'no-edit': !editMode }"
+				:required="required"
+				:pattern="pattern"
+				v-bind="nativeInputAttrs"
 			>
 		</label>
 	</div>

package/src/components/form/inputs/index.ts

@@ -11,7 +11,6 @@ export * from './PasswordInput.vue';
 export * from './ReadOnlyInput.vue';
 export * from './SelectField.vue';
 export * from './TextInput.vue';
-export * from './ImageField.vue';
 export * from './RichTextEditor.vue';
 export * from './TableField.vue';
 export * from './DurationInput.vue';

package/src/components/formkit/AddressArray.vue

@@ -87,9 +87,9 @@
 <script setup lang="ts">
 import { watch } from 'vue';
 // import type { BagelField } from '@/types/BagelField';
+import { useBagel } from 'src/plugins/bagel';
 import { Btn } from '@/components';
 import Checkbox from '../form/inputs/Checkbox.vue';
-import { useBagel } from 'src/plugins/bagel';
 
 const bagel = useBagel();
 const props = defineProps<{

package/src/components/formkit/BankDetailsArray.vue

@@ -36,27 +36,27 @@
 					v-model="bank_account.label"
 					type="text"
 					:placeholder="form.label"
-				/>
+				>
 				<div class="bglform-contact-address">
 					<input
 						v-model="bank_account.bank_name"
 						:placeholder="form.bankName"
 						type="text"
 						required
-					/>
+					>
 					<div class="bglform-contact-address-flex">
 						<input
 							v-model="bank_account.branch"
 							:placeholder="form.bankBranch"
 							type="text"
 							required
-						/>
+						>
 						<input
 							v-model="bank_account.account_number"
 							:placeholder="form.bankAccount"
 							type="text"
 							required
-						/>
+						>
 					</div>
 					<div class="grid gap-2">
 						<input
@@ -64,27 +64,27 @@
 							:placeholder="form.bankAccountHolder"
 							type="text"
 							required
-						/>
+						>
 						<input
 							v-model="bank_account.bank_account_holder_id"
 							:placeholder="form.bankAccountHolderID"
 							type="text"
-						/>
+						>
 						<input
 							v-model="bank_account.iban"
 							placeholder="IBAN"
 							type="text"
-						/>
+						>
 						<input
 							v-model="bank_account.swift"
 							placeholder="SWIFT"
 							type="text"
-						/>
+						>
 						<input
 							v-model="bank_account.bank_address"
 							:placeholder="form.bankAddress"
 							type="text"
-						/>
+						>
 					</div>
 				</div>
 				<div class="bglform-address-del">
@@ -113,9 +113,9 @@
 import { watch } from 'vue';
 // import type { BagelField } from '@/types/BagelField';
 
+import { useBagel } from 'src/plugins/bagel';
 import { Btn } from '@/components';
 import Checkbox from '../form/inputs/Checkbox.vue';
-import { useBagel } from 'src/plugins/bagel';
 
 const bagel = useBagel();
 

package/src/components/formkit/ContactArrayFormKit.vue

@@ -1,30 +1,72 @@
 <template>
 	<div class="bagel-input">
 		<div class="mt-1">
-			<div class="bglform-contact mb-2" v-for="(contact, i) in val" :key="i">
-				<div class="bglform-contact-confirm" v-if="deleteCandidate === i">
+			<div
+				class="bglform-contact mb-2"
+				v-for="(contact, i) in val"
+				:key="i"
+			>
+				<div
+					class="bglform-contact-confirm"
+					v-if="deleteCandidate === i"
+				>
 					<p class="txt14">
-						{{ form.sure}}
+						{{ form.sure }}
 					</p>
-					<Btn thin color="red" @click="deleteContact(contact.id)">
-						{{ form.delete}}
+					<Btn
+						thin
+						color="red"
+						@click="deleteContact(contact.id)"
+					>
+						{{ form.delete }}
 					</Btn>
-					<Btn thin @click="deleteCandidate = -1">
-						{{ form.cancel}}
+					<Btn
+						thin
+						@click="deleteCandidate = -1"
+					>
+						{{ form.cancel }}
 					</Btn>
 				</div>
-				<Checkbox v-model="contact.primary" @update:model-value="($event) => primaryHandler(i, $event)" />
-				<input class="bglform-contact-label" v-model="contact.label" type="text" :placeholder="form.label">
-
-				<input v-model="contact.email" :placeholder="form.email" v-if="context?.id === 'email'" type="email">
-				<input v-model="contact.phone" :placeholder="form.phone" v-if="context?.id === 'phone'" type="tel">
+				<Checkbox
+					v-model="contact.primary"
+					@update:model-value="($event) => primaryHandler(i, $event)"
+				/>
+				<input
+					class="bglform-contact-label"
+					v-model="contact.label"
+					type="text"
+					:placeholder="form.label"
+				>
+
+				<input
+					v-model="contact.email"
+					:placeholder="form.email"
+					v-if="context?.id === 'email'"
+					type="email"
+				>
+				<input
+					v-model="contact.phone"
+					:placeholder="form.phone"
+					v-if="context?.id === 'phone'"
+					type="tel"
+				>
 				<!-- <MaterialIcon @click="del(i)" icon="delete" class="btn-float" /> -->
 				<Btn
-					thin @click="deleteCandidate = i" icon="delete" color="gray" :disabled="contact.primary || val.length === 1 || deleteCandidate !== -1
-					"
+					thin
+					@click="deleteCandidate = i"
+					icon="delete"
+					color="gray"
+					:disabled="contact.primary || val.length === 1 || deleteCandidate !== -1
+						"
 				/>
 			</div>
-			<Btn class="add-btn" color="blue" flat thin @click="val.push({})">
+			<Btn
+				class="add-btn"
+				color="blue"
+				flat
+				thin
+				@click="val.push({})"
+			>
 				{{ form.add }} {{ context?.label }}
 			</Btn>
 		</div>
@@ -34,13 +76,12 @@
 <script setup lang="ts">
 import { watch } from 'vue';
 // import type { BagelField } from '@/types/BagelField';
+import { useBagel } from 'src/plugins/bagel';
 import { Btn } from '@/components';
 import Checkbox from '../form/inputs/Checkbox.vue';
-import { useBagel } from 'src/plugins/bagel';
 
 const bagel = useBagel();
 
-
 const props = defineProps<{
 	context: Record<string, any>;
 	form: {

package/src/components/formkit/FileUploader.vue

@@ -92,8 +92,8 @@ interface UploadFile {
 }
 
 import { onMounted, onUnmounted } from 'vue';
-import { MaterialIcon, Btn } from '@/components';
 import { useBagel } from 'src/plugins/bagel';
+import { MaterialIcon, Btn } from '@/components';
 
 const bagel = useBagel();
 
@@ -134,14 +134,14 @@ function animateCircle(e: DragEvent) {
 function emitValue() {
 	// const fileValues = files.map((f) => f.serverFile?.id);
 	// console.log({ files });
-	if (!props.context?.attrs.multiple) { props.context?.node.input(files[0].serverFile); }
+	if (!props.context?.attrs.multiple) props.context?.node.input(files[0].serverFile);
 	// eslint-disable-next-line no-alert
 	else alert('not implemented');
 }
 
-const isImg = (file: UploadFile) => file.file?.type.includes('image')
-	|| file.serverFile?.mimetype?.match(/image\/|jpg|png|gif|bmp|jpeg/i)
-	|| file.serverFile.extension?.match(/jpg|png|gif|bmp|jpeg/i);
+const isImg = (file: UploadFile) => file.file?.type.includes('image') ||
+	file.serverFile?.mimetype?.match(/image\/|jpg|png|gif|bmp|jpeg/i) ||
+	file.serverFile.extension?.match(/jpg|png|gif|bmp|jpeg/i);
 
 function uploadFiles() {
 	files.forEach(async (file) => {
@@ -208,14 +208,14 @@ onUnmounted(() => dropZoneEl?.removeEventListener('dragover', animateCircle));
 
 function handleFileInput(e: Event) {
 	const filesToAdd: FileList = (e.target as any).files;
-	addFiles(filesToAdd);
+	void addFiles(filesToAdd); // TODO: Nati: should be awaited?
 }
 
 function onDrop(e: DragEvent) {
 	draggingOver = false;
 	e.preventDefault();
 	const filesToAdd = e.dataTransfer?.files;
-	if (filesToAdd) addFiles(filesToAdd);
+	if (filesToAdd) void addFiles(filesToAdd); // TODO: Nati: should be awaited?
 }
 </script>
 <style>

package/src/components/formkit/MiscFields.vue

@@ -18,9 +18,10 @@
 
 <script lang="ts" setup>
 import { Btn } from '@/components';
+
 const props = defineProps<{
 	context: Record<string, any>;
-			addBtnLabel: string
+	addBtnLabel: string
 }>();
 
 const fields = $computed(() => props.context?.node?.parent?.children || []);
@@ -39,6 +40,7 @@ const addToField = (field: any) => {
 	padding-top: 0.5rem;
 	margin-bottom: auto;
 }
+
 .gray.thin.btn-txt.btn.add-btn {
 	display: flex;
 	gap: 0.5rem;
@@ -47,9 +49,11 @@ const addToField = (field: any) => {
 	padding-right: 0;
 	transition: var(--bgl-transition);
 }
+
 .add-btn:active {
 	background: none !important;
 }
+
 .add-btn::before {
 	content: '+';
 	font-size: 10px;
@@ -62,6 +66,7 @@ const addToField = (field: any) => {
 	justify-content: center;
 	color: var(--bgl-gray);
 }
+
 .add-btn:hover::before {
 	background: var(--bgl-blue);
 	color: var(--bgl-white);

package/src/components/formkit/Toggle.vue

@@ -78,7 +78,7 @@ watch(
 	display: none;
 }
 
-.radio-wrap input:checked:checked + label {
+.radio-wrap input:checked:checked+label {
 	background: var(--bgl-blue);
 	color: var(--bgl-white);
 }
@@ -100,14 +100,17 @@ watch(
 	width: 0;
 	height: 0;
 }
+
 .bagel-input.checkbox.check {
 	margin: 0;
 }
+
 .bagel-input.checkbox.check .switch {
 	width: calc(var(--input-height) / 2);
 	height: calc(var(--input-height) / 2);
 	transition: 0.2s;
 }
+
 .bagel-input.checkbox.check .slider:before {
 	position: absolute;
 	font-family: 'Material Symbols Outlined', serif;
@@ -118,7 +121,8 @@ watch(
 	align-items: center;
 	justify-content: center;
 }
-.bagel-input.checkbox.check input:checked + .slider:before {
+
+.bagel-input.checkbox.check input:checked+.slider:before {
 	transform: none;
 	content: 'check';
 }
@@ -150,11 +154,11 @@ watch(
 	transition: 0.4s;
 }
 
-input:checked + .slider {
+input:checked+.slider {
 	background: var(--bgl-blue);
 }
 
-input:checked + .slider:before {
+input:checked+.slider:before {
 	transform: translateX(calc(var(--input-height) / 2));
 }
 </style>

package/src/components/whatsapp/form/MsgTemplate.vue

@@ -4,9 +4,16 @@
 		<div class="view-wrapper card thin">
 			<div class="whatsapp-wrap">
 				<div class="create-template-form">
-					<FormSchema :schema="whatsappTemplateSchema()" v-model="localWhatsappData" @submit="upsertTemplate" />
+					<FormSchema
+						:schema="whatsappTemplateSchema()"
+						v-model="localWhatsappData"
+						@submit="upsertTemplate"
+					/>
 				</div>
-				<div class="whatsapp-preview" :class="{ whatsappHebrew: localWhatsappData?.language === 'he' }">
+				<div
+					class="whatsapp-preview"
+					:class="{ whatsappHebrew: localWhatsappData?.language === 'he' }"
+				>
 					Preview
 					<div class="whatsapp-msg">
 						<b>{{
@@ -27,8 +34,10 @@
 
 <script setup lang="ts">
 import { onMounted } from 'vue';
-import { PageTitle, FormSchema } from '@/components';
 
+import { useBagel } from 'src/plugins/bagel';
+import type { FormKitSchemaDefinition } from '@formkit/core';
+import type { RouteLocationNormalizedLoaded, Router } from 'vue-router';
 import {
 	BodyComponent,
 	HeaderComponent,
@@ -36,15 +45,13 @@ import {
 	ServerTemplateData,
 	FooterComponent,
 } from '../interfaces';
-import { useBagel } from 'src/plugins/bagel';
-import type { FormKitSchemaDefinition } from '@formkit/core';
-import type { RouteLocationNormalizedLoaded, Router } from 'vue-router';
+import { PageTitle, FormSchema } from '@/components';
 
 const props = defineProps<{
 	whatsappTemplateSchema: () => FormKitSchemaDefinition;
 	router: Router;
 	route: RouteLocationNormalizedLoaded;
-}>()
+}>();
 
 const bagel = useBagel();
 
@@ -126,7 +133,7 @@ const upsertTemplate = async () => {
 		);
 	} else {
 		await bagel.post('communication/whatsapp/create_template', payload);
-		props.router.push(`/whatsapp/template/${payload.name}`);
+		void props.router.push(`/whatsapp/template/${payload.name}`);
 	}
 };
 

package/src/components/whatsapp/form/TextVariableExamples.vue

@@ -1,7 +1,12 @@
 <template>
 	<div ref="exampleEl">
-		<TextInput v-for="v in variables" :key="v" :placeholder="`Variable ${v}`" :modelValue="val?.[v - 1]"
-			@update:modelValue="($event: string) => handleUpdate($event, v)" />
+		<TextInput
+			v-for="v in variables"
+			:key="v"
+			:placeholder="`Variable ${v}`"
+			:modelValue="val?.[v - 1]"
+			@update:modelValue="($event: string) => handleUpdate($event, v)"
+		/>
 	</div>
 </template>
 
@@ -47,7 +52,7 @@ const variables = $computed(() => {
 	if (nonSequentialDigits?.length) {
 		const regex = new RegExp(nonSequentialDigits.map((d: number) => `\\{\\{${d}\\}\\}`).join('|'), 'g');
 		const newVal = `${boundValue}`.replace(regex, '');
-		boundNode?.input(newVal);
+		void boundNode?.input(newVal); // TODO: Nati - should be awaited?
 		vars = extractVariables(boundValue);
 	}
 	const parentEl = exampleEl?.closest('.formkit-outer');

package/src/utils/index.ts

@@ -25,8 +25,8 @@ export function computeFields(modelValue: Record<string, any>): BagelField[] {
 		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]))
+			modelValue[key] instanceof Date ||
+			!Number.isNaN(Date.parse(modelValue[key]))
 		) field.inputType = 'DateInput';
 
 		fields.push(field);
@@ -34,7 +34,11 @@ export function computeFields(modelValue: Record<string, any>): BagelField[] {
 	return fields;
 }
 
-const copyText = async (text: string, cb?: (msg: string) => void) => {
+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');
 };
@@ -46,7 +50,8 @@ export const useFormkit = () => {
 
 export const initials = (...strArr: string[]) => strArr.map((str) => str?.charAt(0)).join('');
 
-export const parseLocale = (str: string, $t = (str: string) => str) => {
+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);

package/src/utils/modal.ts

@@ -3,7 +3,7 @@ import {
 } from 'vue';
 import type { Plugin } from 'vue';
 import { Modal, ModalForm } from '@/components';
-import { BtnOptions } from '../types/BtnOptions';
+import type { BtnOptions } from '@/types/BtnOptions';
 
 interface ModalOptions {
 	title?: string;
@@ -15,15 +15,21 @@ interface ModalOptions {
 
 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>;
 }

package/src/utils/strings.ts

@@ -1,7 +1,14 @@
 export function formatString(
 	str: string,
-	format: 'pascal' | 'camel' | 'snake',
+	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('_')