@bagelink/vue 0.0.236-beta.0 → 0.0.237

package/src/components/form/BglField.vue

@@ -1,15 +1,17 @@
 <template>
 	<component :required="field.required" v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
-		:class="classify(fieldData, modelValue, field.class, field.attrs?.class)" v-if="vIf" :is="is" :label="field.label"
-		:id="field.id" :placeholder="field.placeholder || field.label" v-model="fieldData"
-		:defaultValue="field.defaultValue" :options="field.options" :hint="field.hint">
+		:class="classify(fieldData, modelValue, field.class, field.attrs?.class)" v-if="iffer(field, fieldData)" :is="is"
+		:label="field.label" :id="field.id" :placeholder="field.placeholder || field.label" v-model="fieldData"
+		:defaultValue="field.defaultValue" :options="field.options" :hint="field.hint"
+		@update:modelValue="($event: any) => field?.onUpdate?.($event, denullify(fieldData, field.id), formData)">
+		{{ field.transform?.(fieldData, modelValue) || fieldData || '' }}
 		<BglField v-model="formData" v-for="(child, ii) in field.children" :key="child.id || ii" :field="child" />
 	</component>
 </template>
 
 <script lang="ts" setup>
 import {
-	type Field, bindAttrs, classify, SelectInput, TextInput, ToggleInput, CheckInput,
+	type Field, bindAttrs, classify, SelectInput, TextInput, ToggleInput, CheckInput, iffer, denullify,
 } from '@bagelink/vue';
 
 const props = withDefaults(defineProps<{
@@ -43,12 +45,4 @@ const fieldData = $computed({
 	},
 	get: () => (props.field.id ? props.modelValue[props.field.id] : ''),
 });
-
-const vIf = $computed(() => {
-	if (props.field['v-if'] === undefined) return true;
-	if (typeof props.field['v-if'] === 'boolean') return props.field['v-if'];
-	if (typeof props.field['v-if'] === 'string') return !!props.modelValue.value[props.field['v-if']];
-	if (typeof props.field['v-if'] === 'function') return props.field['v-if']!(fieldData.value, props.modelValue);
-	return true;
-});
 </script>

package/src/components/form/BglForm.vue

@@ -23,7 +23,7 @@ const props = withDefaults(
 	defineProps<{
 		label?: string;
 		id?: string;
-		schema: BglFormSchemaT;
+		schema: BglFormSchemaT<any>;
 		modelValue?: Record<string, any>;
 		onDelete?: ((id: string) => void);
 		onSubmit?: ((data: any) => void);

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

@@ -3,7 +3,7 @@
 		<label v-if="label">
 			{{ label }}
 		</label>
-		<VDatepicker ref="datePicker" :auto-apply="true" v-model="date" :enable-time-picker="enableTime"/>
+		<VDatepicker ref="datePicker" :auto-apply="true" v-model="date" :enable-time-picker="enableTime" />
 	</div>
 </template>
 
@@ -45,7 +45,7 @@ let date = $computed<string | Date>({
 });
 
 onMounted(() => {
-	if (props.defaultValue)	date = props.defaultValue;
+	if (props.defaultValue) date = props.defaultValue;
 });
 </script>
 
@@ -53,4 +53,8 @@ onMounted(() => {
 .dp__input_wrap input {
 	padding-inline-start: 2rem !important;
 }
+
+.dp__calendar_row>div:last-child {
+	pointer-events: auto !important;
+}
 </style>

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

@@ -20,8 +20,8 @@ type RawOption = Option | string | number;
 
 const props = defineProps<{
 	required?: boolean,
-	label: string,
-	id: string,
+	label?: string,
+	id?: string,
 	modelValue?: string | number,
 	placeholder?: string,
 	defaultValue?: string | number,

package/src/components/index.ts

@@ -4,14 +4,13 @@ export { default as MaterialIcon } from './MaterialIcon.vue';
 export { default as NavBar } from './NavBar.vue';
 export { default as Btn } from './Btn.vue';
 export { default as Modal } from './Modal.vue';
-export { default as ModalBglForm } from './ModalBglForm.vue';
+export { default as ModalForm } from './ModalForm.vue';
 export { default as AccordionItem } from './AccordionItem.vue';
 export { default as ListView } from './ListView.vue';
 export { default as ListItem } from './ListItem.vue';
 export { default as TabbedLayout } from './TabbedLayout.vue';
 export { default as Comments } from './Comments.vue';
 export { default as PageTitle } from './PageTitle.vue';
-export { default as FormSchema } from './FormSchema.vue';
 export { default as TableSchema } from './TableSchema.vue';
 export { default as TopBar } from './TopBar.vue';
 export { default as RouterWrapper } from './RouterWrapper.vue';

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

@@ -4,16 +4,9 @@
 		<div class="view-wrapper card thin">
 			<div class="whatsapp-wrap">
 				<div class="create-template-form">
-					<FormSchema
-						:schema="whatsappTemplateSchema()"
-						v-model="localWhatsappData"
-						@submit="upsertTemplate"
-					/>
+					<BagelForm :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' }">
 					{{ previewLabel }}
 					<div class="whatsapp-msg">
 						<b>{{
@@ -35,9 +28,10 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 
-import type { FormKitSchemaDefinition } from '@formkit/core';
 import type { RouteLocationNormalizedLoaded, Router } from 'vue-router';
-import { useBagel, PageTitle, FormSchema } from '@bagelink/vue';
+import {
+	useBagel, PageTitle, BagelForm, BglFormSchemaT,
+} from '@bagelink/vue';
 import {
 	BodyComponent,
 	HeaderComponent,
@@ -48,7 +42,7 @@ import {
 
 const props = withDefaults(
 	defineProps<{
-		whatsappTemplateSchema: () => FormKitSchemaDefinition;
+		whatsappTemplateSchema: BglFormSchemaT<LocalTemplateData>;
 		router: Router;
 		route: RouteLocationNormalizedLoaded;
 		previewLabel?: string;

package/src/plugins/modal.ts

@@ -3,7 +3,7 @@ import {
 } from 'vue';
 import type { Plugin } from 'vue';
 import type { BglFormSchemaT, BtnOptions } from '@bagelink/vue';
-import { Modal, ModalBglForm } from '@bagelink/vue';
+import { Modal, ModalForm } from '@bagelink/vue';
 
 interface ModalOptions {
 	title?: string;
@@ -84,12 +84,9 @@ export const ModalPlugin: Plugin = {
 			},
 			render() {
 				return modalStack.map((modal, index) => {
-					let renderComponent;
-					if (modal.modalType === 'modalForm') renderComponent = ModalBglForm;
-					else renderComponent = Modal;
-
+					const renderComponent = modal.modalType === 'modalForm' ? ModalForm : Modal;
 					return h(
-						renderComponent,
+						renderComponent as any,
 						{
 							...modal.modalOptions,
 							'onUpdate:isModalVisible': () => hideModal(index),

package/src/styles/theme.css

@@ -97,6 +97,7 @@
   gap: 1rem;
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 
 * {

package/src/utils/index.ts

@@ -39,7 +39,7 @@ export function classify(fieldVal?: any, row?: any, ...classes: any[]) {
 
 export function bindAttrs<T = Record<string, any>>(attrs?: Attributes, fieldVal?: any, row?: T) {
 	if (!attrs) return {};
-	const exclude = ['class', 'style'];
+	const exclude = ['class'];
 	const arr = Object.entries(attrs).filter(([key]) => !exclude.includes(key)).map(([key, value]) => [
 		key,
 		typeof value === 'function' ? value(fieldVal, row) : value,
@@ -49,10 +49,11 @@ export function bindAttrs<T = Record<string, any>>(attrs?: Attributes, fieldVal?
 }
 
 export const iffer = (field: any, itemData: any) => {
-	if (field['v-if'] && typeof field['v-if'] === 'function') {
-		return field['v-if'](field.id ? itemData[field.id] : '', itemData);
-	}
-	return field['v-if'] || true;
+	if (field['v-if'] === undefined) return true;
+	if (typeof field['v-if'] === 'boolean') return field['v-if'];
+	if (typeof field['v-if'] === 'string') return !!itemData.value[field['v-if']];
+	if (typeof field['v-if'] === 'function') return field['v-if']!(itemData?.[field.id], itemData);
+	return true;
 };
 
 export const denullify = (itemData?: Record<string, any>, fieldID?: string) => (fieldID && itemData ? itemData[fieldID] : null);

package/dist/components/Drop.vue.d.ts

@@ -1,34 +0,0 @@
-type Option = {
-    label: string;
-    value: string;
-} | string | number;
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    modelValue: string | number;
-    options: Option[];
-    placeholder?: string | undefined;
-    label?: string | undefined;
-    id: string;
-    required: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    modelValue: string | number;
-    options: Option[];
-    placeholder?: string | undefined;
-    label?: string | undefined;
-    id: string;
-    required: boolean;
-}>>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {}, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-//# sourceMappingURL=Drop.vue.d.ts.map

package/dist/components/Drop.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Drop.vue.d.ts","sourceRoot":"","sources":["../../src/components/Drop.vue"],"names":[],"mappings":"AAcA;AAMA,KAAK,MAAM,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,MAAM,GAAG,MAAM,CAAC;;gBA8KN,MAAM,GAAG,MAAM;aAClB,MAAM,EAAE;;;QAGb,MAAM;cACA,OAAO;;;;gBALL,MAAM,GAAG,MAAM;aAClB,MAAM,EAAE;;;QAGb,MAAM;cACA,OAAO;;;;AAXnB,wBAcG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}

package/dist/components/FileUploader.vue.d.ts

@@ -1,60 +0,0 @@
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    id?: string | undefined;
-    private?: 0 | 1 | undefined;
-    singleFile?: boolean | undefined;
-    beforeUpload?: (() => Promise<any>) | undefined;
-    dragDropLabel?: string | undefined;
-    browseLabel?: string | undefined;
-}>, {
-    private: number;
-    entity: string;
-    id: string;
-    beforeUpload: () => Promise<void>;
-    dragDropLabel: string;
-    browseLabel: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    done: (...args: any[]) => void;
-    complete: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    id?: string | undefined;
-    private?: 0 | 1 | undefined;
-    singleFile?: boolean | undefined;
-    beforeUpload?: (() => Promise<any>) | undefined;
-    dragDropLabel?: string | undefined;
-    browseLabel?: string | undefined;
-}>, {
-    private: number;
-    entity: string;
-    id: string;
-    beforeUpload: () => Promise<void>;
-    dragDropLabel: string;
-    browseLabel: string;
-}>>> & {
-    onDone?: ((...args: any[]) => any) | undefined;
-    onComplete?: ((...args: any[]) => any) | undefined;
-}, {
-    id: string;
-    private: 1 | 0;
-    beforeUpload: () => Promise<any>;
-    dragDropLabel: string;
-    browseLabel: string;
-}, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-//# sourceMappingURL=FileUploader.vue.d.ts.map

package/dist/components/FileUploader.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FileUploader.vue.d.ts","sourceRoot":"","sources":["../../src/components/FileUploader.vue"],"names":[],"mappings":"AAiDA;;;;;0BA6YuB,QAAQ,GAAG,CAAC;;;;;;;;;;;;;;;;;0BAAZ,QAAQ,GAAG,CAAC;;;;;;;;;;;;;;QAJ5B,MAAM;aAED,CAAC,GAAG,CAAC;kBAEA,MAAM,QAAQ,GAAG,CAAC;mBACjB,MAAM;iBACR,MAAM;;AARtB,wBAeG;AAGH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/src/components/FormKitTable.vue

@@ -1,280 +0,0 @@
-<template>
-	<div class="table-list-wrap h-100">
-		<!-- <Transition name="fade">  -->
-		<div class="table-list">
-			<table class="infinite-wrapper">
-				<thead class="row first-row">
-					<th
-						class="col"
-						v-for="field in columns"
-						:key="field.id"
-						@click="sort(field.id)"
-					>
-						<div class="flex">
-							{{ field?.label || field.id }}
-							<div
-								class="list-arrows"
-								:class="{ sorted: sortField === field.id }"
-							>
-								<MaterialIcon
-									:class="{ desc: sortDirection === 'DESC' }"
-									icon="keyboard_arrow_up"
-								/>
-							</div>
-						</div>
-					</th>
-				</thead>
-				<tbody ref="infinite" class="rows infinite" :class="{ loading }">
-					<tr
-						@click="selectElement(row)"
-						class="row row-item position-relative"
-						v-for="row in data"
-						:key="row.id"
-					>
-						<td
-							class="col"
-							v-for="field in columns"
-							:key="`${field.id}-${row.id}`"
-						>
-							<slot
-								v-if="slots[field.id]"
-								:name="field.id"
-								:row="row"
-								:field="field"
-							/>
-							<div v-else>
-								<div v-if="field.inputType === 'DateInput'">
-									{{ new Date(row[field.id]).toLocaleDateString() }}
-								</div>
-								<div v-else-if="field.inputType === 'CheckInput'">
-									<MaterialIcon
-										icon="check"
-										class="pill green"
-										v-if="row[field.id]"
-									/>
-									<MaterialIcon icon="close" class="pill" v-else />
-								</div>
-								<div v-else-if="field.inputType === 'ItemRef' && row[field.id]">
-									<Btn
-										v-if="field.refCollection"
-										color="gray"
-										class="thin"
-										@click="
-											$router.push(
-												`/${field.refCollection}/${row[field.id].id}`
-											)
-										"
-									>
-										{{
-											field.refFields?.map((k) => row[field.id][k]).join(" ") ||
-												row[field.id].id
-										}}
-										<MaterialIcon icon="arrow_forward" />
-									</Btn>
-									<Btn
-										icon="receipt"
-										is="a"
-										thin
-										v-else-if="field.link"
-										:href="row[field.id][field.link]"
-										target="_blank"
-									>
-										{{
-											field.refFields?.map((k) => row[field.id][k]).join(" ") ||
-												row[field.id].id
-										}}
-									</Btn>
-									<div class="pill" v-else :class="getPillClass(row, field)">
-										{{
-											field.refFields?.map((k) => row[field.id][k]).join(" ") ||
-												row[field.id].id
-										}}
-									</div>
-								</div>
-								<div class="max-col-width" v-else>
-									{{ row[field.id] }}
-								</div>
-							</div>
-						</td>
-					</tr>
-				</tbody>
-			</table>
-		</div>
-		<!-- </Transition> -->
-	</div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, useSlots } from 'vue';
-import { BagelField, Btn, MaterialIcon } from '@bagelink/vue';
-
-const slots = useSlots();
-const loading = ref(true);
-
-const props = defineProps<{
-  data: any[];
-  schema?: BagelField[];
-}>();
-
-const emit = defineEmits(['selectElement']);
-
-const selectElement = (data: Record<string, any>) => {
-	emit('selectElement', data);
-};
-
-// const sortList = () => {};
-const sortDirection = ref('');
-const sortField = ref('');
-
-const sort = (fieldname: string) => {
-	if (sortField.value === fieldname) {
-		if (sortDirection.value === 'ASC') sortDirection.value = 'DESC';
-		else sortField.value = '';
-	} else {
-		sortField.value = fieldname;
-		sortDirection.value = 'ASC';
-	}
-};
-
-const columns = computed<BagelField[]>(
-	(): BagelField[] => props.schema ||
-    Object.keys(props.data[0]).map((k: string) => ({ id: k, inputType: 'PlainText' })),
-);
-
-function getPillClass(row: Record<string, any>, field: BagelField) {
-	return (
-		field.refFields?.map((k) => row[field.id][k]).join(' ') || row[field.id].id
-	);
-}
-</script>
-
-<style scoped>
-.Paid {
-  background-color: var(--bgl-green);
-  color: white;
-}
-
-.Error {
-  background-color: var(--bgl-red-tint);
-  color: var(--bgl-red);
-}
-
-.list-arrows {
-  opacity: 0;
-}
-
-.list-arrows .icon-font {
-  transition: all ease-in-out 0.2s;
-}
-
-.list-arrows.sorted {
-  opacity: 1;
-}
-
-.list-arrows.sorted .desc {
-  transform: rotate(180deg);
-}
-
-table {
-  border-collapse: separate;
-  border-spacing: 0 15px;
-  border-collapse: collapse;
-}
-
-th {
-  font-weight: 400;
-}
-
-.row {
-  border-bottom: 1px solid var(--border-color);
-  cursor: pointer;
-}
-
-.row.first-row {
-  font-size: 0.8rem;
-  color: var(--bgl-black-tint);
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  background: var(--bgl-white);
-  height: 50px;
-  vertical-align: bottom;
-}
-
-.row.first-row::after {
-  content: "";
-  border-bottom: 1px solid var(--border-color);
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -1px;
-}
-
-.first-row .col {
-  cursor: pointer;
-  background: var(--bgl-white);
-}
-
-.col {
-  white-space: nowrap;
-  padding: 14px;
-  transition: var(--bgl-transition);
-  line-height: 1;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  align-items: center;
-}
-
-.col > div {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.max-col-width {
-  max-width: 30vw;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.col.check .icon-font {
-  border-radius: 100%;
-  background: var(--bgl-blue-20);
-  color: var(--bgl-primary);
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: -2px;
-}
-
-.rows {
-  font-size: 0.8125em;
-}
-
-.table-list {
-  height: 100%;
-  position: relative;
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-  overflow: auto;
-}
-
-.BagelTable .table-list {
-  overflow: unset;
-}
-
-.row-item {
-  height: 50px;
-  transition: all 200ms ease;
-}
-
-.row-item:hover {
-  background: var(--bgl-gray-light);
-}
-
-.infinite-wrapper {
-  overflow-y: auto;
-  width: 100%;
-}
-</style>

package/src/components/FormSchema.vue

@@ -1,76 +0,0 @@
-<template>
-	<div>
-		<FormKit
-			type="form"
-			:modelValue="modelValue"
-			@update:modelValue="handleEmit"
-			@submit="runSubmit"
-			:submitLabel="i18nT('save')"
-		>
-			<FormKitSchema
-				:schema="schema"
-				:data="data"
-			/>
-		</FormKit>
-		<Btn
-			class="del-top"
-			v-if="modelValue?.id && onDelete"
-			@click="runDelete"
-			value="Delete"
-			flat
-			icon="delete"
-			color="red"
-			thin
-		/>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { reactive } from 'vue';
-import { type FormKitSchemaDefinition } from '@formkit/core';
-
-import { Btn } from '@bagelink/vue';
-import { useModal, useI18nT } from '..';
-
-const { showModal } = useModal();
-const i18nT = useI18nT();
-const emits = defineEmits(['update:modelValue', 'submit']);
-const handleEmit = (val: any) => emits('update:modelValue', val);
-const runSubmit = (val: any) => emits('submit', val);
-
-const props = defineProps<{
-	modelValue?: any;
-	schema: FormKitSchemaDefinition;
-	// eslint-disable-next-line no-unused-vars
-	onDelete?: ((id: string) => void);
-}>();
-
-const data = reactive({
-	...props.modelValue,
-	t: (val: string) => i18nT?.(val) || val,
-});
-
-const runDelete = () => {
-	showModal(
-		{
-			class: 'small-modal',
-			title: i18nT('Are you sure?'),
-			actions: [
-				{
-					value: 'Confirm',
-					color: 'red',
-					onClick: () => props.onDelete?.(data.id),
-				},
-				{ value: 'Cancel', color: 'gray' },
-			],
-		},
-		{ default: i18nT('form.deleteMessage') },
-	);
-};
-</script>
-
-<style>
-.del-top {
-	transform: translateY(-2.6rem);
-}
-</style>