@bagelink/vue 0.0.130 → 0.0.134

package/src/components/FileUploader.vue

@@ -16,7 +16,7 @@
 			</Transition>
 			<div class="img-label">
 				<p>
-					{{ form.dragDrop }} <span>{{ form.browse }}</span>
+					{{ dragDropLabel }} <span>{{ browseLabel }}</span>
 				</p>
 			</div>
 			<div class="uploading-wrap">
@@ -75,16 +75,16 @@ const props = withDefaults(
 		private?: 1 | 0;
 		singleFile?: boolean;
 		beforeUpload?: () => Promise<any>;
-		form: {
-			dragDrop: string
-			browse: string
-		}
+		dragDropLabel?: string;
+		browseLabel?: string;
 	}>(),
 	{
 		private: 0,
 		entity: '',
 		id: '',
 		beforeUpload: async () => { },
+		dragDropLabel: 'Drag and drop your files here',
+		browseLabel: 'Browse',
 	},
 );
 

package/src/components/FormKitTable.vue

@@ -11,7 +11,7 @@
 						@click="sort(field.id)"
 					>
 						<div class="flex">
-							{{ field.label || field.id }}
+							{{ field?.label || field.id }}
 							<div
 								class="list-arrows"
 								:class="{ sorted: sortField === field.id }"

package/src/components/TableSchema.vue

@@ -1,6 +1,5 @@
 <template>
 	<div class="table-list-wrap h-100">
-		<!-- <div v-for="field in schema" :key="field.id">{{ parseLocale(field.label) }}</div> -->
 		<table class="infinite-wrapper">
 			<thead class="row first-row">
 				<th
@@ -10,7 +9,7 @@
 					@click="sort(field.id)"
 				>
 					<div class="flex">
-						{{ parseLocale(field.label || field.id) }}
+						{{ field?.label || field?.id }}
 						<div
 							class="list-arrows"
 							:class="{ sorted: sortField === field.id }"
@@ -65,7 +64,7 @@
 
 <script setup lang="ts">
 import { useSlots } from 'vue';
-import { MaterialIcon, parseLocale } from '@bagelink/vue';
+import { MaterialIcon } from '@bagelink/vue';
 
 const slots = useSlots();
 const loading = $ref(true);

package/src/components/form/ItemRef.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		{{ field.label || field.id }}
+		{{ field?.label || field.id }}
 
 		<Btn
 			color="gray"

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

@@ -11,7 +11,7 @@
 				:id="field.id"
 				v-model="inputVal"
 				type="color"
-				:placeholder="field.placeholder || field.label"
+				:placeholder="field?.placeholder || field.label"
 				:class="{ 'no-edit': !editMode }"
 				:required="required"
 				v-bind="nativeInputAttrs"

package/src/components/formkit/AddressArray.vue

@@ -11,20 +11,20 @@
 					v-if="deleteCandidate === i"
 				>
 					<p class="txt14">
-						{{ form.sure }}
+						{{ context?.formPlaceholders?.sure }}
 					</p>
 					<Btn
 						thin
 						color="red"
 						@click="deleteContact(address.id)"
 					>
-						{{ form.delete }}
+						{{ context?.formPlaceholders?.delete }}
 					</Btn>
 					<Btn
 						thin
 						@click="deleteCandidate = -1"
 					>
-						{{ form.cancel }}
+						{{ context?.formPlaceholders?.cancel }}
 					</Btn>
 				</div>
 				<Checkbox
@@ -35,29 +35,29 @@
 					class="bglform-contact-label"
 					v-model="address.label"
 					type="text"
-					:placeholder="form.label"
+					:placeholder="context?.formPlaceholders?.label"
 				>
 				<div class="bglform-contact-address">
 					<input
 						v-model="address.street"
-						:placeholder="form.street"
+						:placeholder="context?.formPlaceholders?.street"
 						type="text"
 					>
 					<div class="bglform-contact-address-flex">
 						<input
 							v-model="address.city"
-							:placeholder="form.city"
+							:placeholder="context?.formPlaceholders?.city"
 							type="text"
 						>
 						<input
 							v-model="address.postal_code"
-							:placeholder="form.zip"
+							:placeholder="context?.formPlaceholders?.zip"
 							type="text"
 						>
 					</div>
 					<input
 						v-model="address.country"
-						:placeholder="form.country"
+						:placeholder="context?.formPlaceholders?.country"
 						type="text"
 					>
 				</div>
@@ -77,7 +77,7 @@
 				thin
 				@click="addNew"
 			>
-				{{ form.add }}
+				{{ context?.formPlaceholders?.add }}
 				{{ context?.label }}
 			</Btn>
 		</div>
@@ -91,20 +91,26 @@ import { watch } from 'vue';
 import { Btn, useBagel } from '@bagelink/vue';
 import Checkbox from '../form/inputs/Checkbox.vue';
 
+export interface AddressArrContext {
+
+	label?: string;
+	formPlaceholders?: {
+		add?: string;
+		cancel?: string;
+		city?: string;
+		country?: string;
+		delete?: string;
+		label?: string;
+		sure?: string;
+		zip?: string;
+		street?: string;
+	};
+	[key: string]: any;
+
+}
 const bagel = useBagel();
 const props = defineProps<{
-	context: Record<string, any>;
-	form: {
-		add: string;
-		cancel: string;
-		city: string;
-		country: string;
-		delete: string;
-		label: string;
-		sure: string;
-		zip: string;
-		street: string;
-	};
+	context: AddressArrContext
 }>();
 
 let val = $ref<any[]>([]);

package/src/components/formkit/BankDetailsArray.vue

@@ -11,20 +11,20 @@
 					v-if="deleteCandidate === i"
 				>
 					<p class="txt14">
-						{{ form.sure }}
+						{{ context?.formPlaceholders?.sure }}
 					</p>
 					<Btn
 						thin
 						color="red"
 						@click="deleteContact(bank_account.id)"
 					>
-						{{ form.delete }}
+						{{ context?.formPlaceholders?.delete }}
 					</Btn>
 					<Btn
 						thin
 						@click="deleteCandidate = -1"
 					>
-						{{ form.cancel }}
+						{{ context?.formPlaceholders?.cancel }}
 					</Btn>
 				</div>
 				<Checkbox
@@ -35,25 +35,25 @@
 					class="bglform-contact-label"
 					v-model="bank_account.label"
 					type="text"
-					:placeholder="form.label"
+					:placeholder="context?.formPlaceholders?.label"
 				>
 				<div class="bglform-contact-address">
 					<input
 						v-model="bank_account.bank_name"
-						:placeholder="form.bankName"
+						:placeholder="context?.formPlaceholders?.bankName"
 						type="text"
 						required
 					>
 					<div class="bglform-contact-address-flex">
 						<input
 							v-model="bank_account.branch"
-							:placeholder="form.bankBranch"
+							:placeholder="context?.formPlaceholders?.bankBranch"
 							type="text"
 							required
 						>
 						<input
 							v-model="bank_account.account_number"
-							:placeholder="form.bankAccount"
+							:placeholder="context?.formPlaceholders?.bankAccount"
 							type="text"
 							required
 						>
@@ -61,13 +61,13 @@
 					<div class="grid gap-2">
 						<input
 							v-model="bank_account.bank_account_holder"
-							:placeholder="form.bankAccountHolder"
+							:placeholder="context?.formPlaceholders?.bankAccountHolder"
 							type="text"
 							required
 						>
 						<input
 							v-model="bank_account.bank_account_holder_id"
-							:placeholder="form.bankAccountHolderID"
+							:placeholder="context?.formPlaceholders?.bankAccountHolderID"
 							type="text"
 						>
 						<input
@@ -82,7 +82,7 @@
 						>
 						<input
 							v-model="bank_account.bank_address"
-							:placeholder="form.bankAddress"
+							:placeholder="context?.formPlaceholders?.bankAddress"
 							type="text"
 						>
 					</div>
@@ -103,7 +103,7 @@
 				thin
 				@click="val.push({})"
 			>
-				{{ form.add }} {{ context?.label }}
+				{{ context?.formPlaceholders?.add }} {{ context?.label }}
 			</Btn>
 		</div>
 	</div>
@@ -116,23 +116,27 @@ import { watch } from 'vue';
 import { Btn, useBagel } from '@bagelink/vue';
 import Checkbox from '../form/inputs/Checkbox.vue';
 
+export interface BankDetailsContext {
+	label?: string;
+	formPlaceholders?: {
+		sure?: string;
+		delete?: string;
+		cancel?: string;
+		label?: string;
+		bankName?: string;
+		bankBranch?: string;
+		bankAccount?: string;
+		bankAccountHolder?: string;
+		bankAccountHolderID?: string;
+		bankAddress?: string;
+		add?: string;
+	};
+	[key: string]: any;
+}
 const bagel = useBagel();
 
 const props = defineProps<{
-	context: Record<string, any>;
-	form: {
-		sure: string
-		delete: string
-		cancel: string
-		label: string
-		bankName: string
-		bankBranch: string
-		bankAccount: string
-		bankAccountHolder: string
-		bankAccountHolderID: string
-		bankAddress: string
-		add: string
-	}
+	context: BankDetailsContext;
 }>();
 
 let val = $ref<any[]>([]);

package/src/components/formkit/index.ts

@@ -27,3 +27,6 @@ export {
 	ToggleSwitchInput,
 	FileUploadInput,
 };
+
+export type{ BankDetailsContext } from './BankDetailsArray.vue';
+export type{ AddressArrContext } from './AddressArray.vue';

package/src/utils/index.ts

@@ -50,11 +50,4 @@ export const useFormkit = () => {
 
 export const initials = (...strArr: string[]) => strArr.map((str) => str?.charAt(0)).join('');
 
-export const parseLocale = (str: string, i18nT = (_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 i18nT(w);
-};
-
 export { formatString } from './strings';