@bagelink/vue 0.0.218 → 0.0.223

package/dist/types/index.d.ts

@@ -2,6 +2,7 @@ export type { MaterialIcons } from './materialIcons';
 export type { BankDetailsInterface, NewPerson, Person } from './Person';
 export type { Tables, TableToTypeMapping } from '@bagelink/sdk';
 export type { StorageFile } from './file';
+export type { NavLink } from '../components/NavBar.vue';
 export * from './BtnOptions';
 export * from './BagelForm';
 export type ThemeType = 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'green' | 'primary' | 'blue';

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACxE,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAE5B,MAAM,MAAM,SAAS,GACpB,OAAO,GACL,KAAK,GACL,MAAM,GACN,YAAY,GACZ,OAAO,GACP,OAAO,GACP,SAAS,GACT,MAAM,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACxE,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,YAAY,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAExD,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAE5B,MAAM,MAAM,SAAS,GACpB,OAAO,GACL,KAAK,GACL,MAAM,GACN,YAAY,GACZ,OAAO,GACP,OAAO,GACP,SAAS,GACT,MAAM,CAAA"}

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,eAAO,MAAM,QAAQ,OAAQ,MAAM,IAAI,yBAGtC,CAAC;AAEF,eAAO,MAAM,UAAU,QAAS,MAAM,WAG3B,CAAC;AAEZ,eAAO,MAAM,QAAQ,SACd,MAAM,cAED,MAAM,KAAK,IAAI,+BAI1B,CAAC;AAEF,eAAO,MAAM,UAAU,eAGtB,CAAC;AAEF,eAAO,MAAM,QAAQ,cAAe,MAAM,EAAE,WAAiD,CAAC;AAE9F,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,OAO1F;AAED,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,eAAO,MAAM,QAAQ,OAAQ,MAAM,IAAI,yBAGtC,CAAC;AAEF,eAAO,MAAM,UAAU,QAAS,MAAM,WAG3B,CAAC;AAEZ,eAAO,MAAM,QAAQ,SACd,MAAM,cAED,MAAM,KAAK,IAAI,+BAI1B,CAAC;AAEF,eAAO,MAAM,UAAU,eAGtB,CAAC;AAEF,eAAO,MAAM,QAAQ,cAAe,MAAM,EAAE,WAG3C,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,OAO1F;AAED,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.218",
+  "version": "0.0.223",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -50,19 +50,15 @@
     "./tsconfig.json",
     "./vite.config.ts"
   ],
-  "dependencies": {},
   "devDependencies": {
-    "vue": "^3.4.3",
-    "@vue-macros/reactivity-transform": "^0.4.1"
+    "@vue-macros/reactivity-transform": "^0.4.1",
+    "vue": "^3.4.3"
   },
   "peerDependencies": {
     "@bagelink/sdk": "*",
-    "vue-router": "*",
-    "vue": "*",
-    "vue3-charts": "^1.1.33",
-    "@formkit/vue": "^1.3.0",
     "@formkit/core": "1.3.0",
-    "vue-draggable-next": "^2.2.1",
+    "@formkit/vue": "^1.3.0",
+    "@vuepic/vue-datepicker": "^7.4.0",
     "prosemirror-commands": "^1.5.2",
     "prosemirror-history": "^1.3.2",
     "prosemirror-keymap": "^1.2.2",
@@ -70,7 +66,10 @@
     "prosemirror-schema-basic": "^1.2.2",
     "prosemirror-state": "^1.4.3",
     "prosemirror-view": "^1.32.4",
-    "@vuepic/vue-datepicker": "^7.4.0"
+    "vue": "*",
+    "vue-draggable-next": "^2.2.1",
+    "vue-router": "*",
+    "vue3-charts": "^1.1.33"
   },
   "peerDependenciesMeta": {
     "@vuepic/vue-datepicker": {

package/src/components/Avatar.vue

@@ -0,0 +1,47 @@
+<template>
+	<div class="avatar">
+		<img
+			v-if="src"
+			:src="src"
+			:alt="name"
+		>
+		<p v-else>
+			{{ fallback || initials(name || '') }}
+		</p>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { initials } from '@bagelink/vue';
+
+defineProps<{
+  fallback?: string;
+  src?: string;
+  name?: string;
+}>();
+</script>
+
+<style scoped>
+.avatar{
+	border-radius: 100%;
+	width: 50px;
+	height: 50px;
+	background-color: var(--bgl-primary-tint);
+	overflow: hidden;
+	text-align: center;
+	padding: none;
+}
+
+.avatar p {
+	font-size: 1.5rem;
+	line-height: 50px;
+	margin: 0;
+	font-weight: 200;
+}
+
+.avatar img{
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+</style>

package/src/components/Card.vue

@@ -0,0 +1,13 @@
+<template>
+	<div class="card" :class="{thin, border, 'h-100':h100}">
+		<slot/>
+	</div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  thin?: boolean;
+  border?: boolean;
+  h100?: boolean;
+}>();
+</script>

package/src/components/ContactArray.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="bagel-input mt-2">
-		{{ field.label }}
+		{{ label }}
 		<div class="mb-2 mt-1">
 			<div
 				class="bglform-contact"
@@ -11,13 +11,13 @@
 					v-model="contact.email"
 					:placeholder="placeholders.email"
 					type="email"
-					v-if="field.id === 'email'"
+					v-if="id === 'email'"
 				>
 				<input
 					v-model="contact.phone"
 					:placeholder="placeholders.phone"
 					type="tel"
-					v-if="field.id === 'phone'"
+					v-if="id === 'phone'"
 				>
 				<input
 					v-if="contact.email || contact.phone"
@@ -28,15 +28,11 @@
 				<div class="bglform-contact-opt">
 					<!-- <input v-model="contact.primary" id="primary" type="checkbox" > -->
 					<CheckInput
-						:field="{
-							id: 'primary',
-							inputType: 'CheckInput',
-							label: 'primary',
-						}"
+						label = "Primary"
 						v-model="contact.primary"
 					/>
 					<MaterialIcon
-						@click="del(i)"
+						@click="val.splice(i, 1)"
 						icon="delete"
 						class="btn-float"
 					/>
@@ -55,20 +51,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
-import type { BagelField } from '@bagelink/vue';
-import MaterialIcon from './MaterialIcon.vue';
-import Btn from './Btn.vue';
-import CheckInput from './form/inputs/CheckInput.vue';
+import { MaterialIcon, Btn, CheckInput } from '.';
 
-const props = withDefaults(
+withDefaults(
 	defineProps<{
-		field: BagelField;
+		label?: string;
 		modelValue: any;
 		editMode?: boolean;
 		small?: boolean;
+		id: string;
 		placeholders: {
-
 			email: string
 			phone: string
 			label: string
@@ -80,28 +72,7 @@ const props = withDefaults(
 	},
 );
 
-const val = ref<any[]>([]);
-
-const del = (i: number) => {
-	val.value.splice(i, 1);
-};
-
-const emit = defineEmits(['update:modelValue']);
-
-watch(
-	() => props.modelValue,
-	() => {
-		val.value = [...props.modelValue];
-	},
-	{ immediate: true },
-);
-
-watch(
-	() => val,
-	() => {
-		emit('update:modelValue', val.value);
-	},
-);
+const val = defineModel<any[]>('modelValue', { default: [] });
 </script>
 <!--
 <style>

package/src/components/ModalBglForm.vue

@@ -23,8 +23,7 @@
 			</header>
 			<BagelForm
 				:onDelete="onDelete ? runDelete : undefined"
-				:modelValue="modelValue"
-				@update:modelValue="handleEmit"
+				v-model="formData"
 				@submit="runSubmit"
 				:schema="computedFormSchema"
 			/>
@@ -33,7 +32,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted, watch } from 'vue';
 import {
 	Btn, BtnOptions, useEscape, BagelForm, type BglFormSchemaT,
 } from '@bagelink/vue';
@@ -45,7 +44,6 @@ const props = defineProps<{
 	dismissable?: boolean;
 	actions?: BtnOptions[];
 	schema: BglFormSchemaT | (() => BglFormSchemaT);
-	modelValue?: Record<string, any>;
 	// eslint-disable-next-line no-unused-vars
 	onSubmit?: ((formData: any) => Promise<void>);
 	// eslint-disable-next-line no-unused-vars
@@ -61,10 +59,9 @@ const computedFormSchema = $computed(() => {
 
 let isActive = $ref<boolean>(false);
 
-const emit = defineEmits(['update:isModalVisible', 'update:modelValue']);
-const handleEmit = (value: any) => {
-	emit('update:modelValue', value);
-};
+const formData = defineModel<Record<string, any>>('modelValue', { default: {} });
+
+const emit = defineEmits(['update:isModalVisible']);
 
 const closeModal = () => {
 	isActive = false;
@@ -73,9 +70,11 @@ const closeModal = () => {
 	}, 200);
 };
 
-const runSubmit = async (formData: any) => {
+watch(formData.value, (v) => { console.log(v); });
+
+const runSubmit = async () => {
 	try {
-		await props.onSubmit?.(formData);
+		await props.onSubmit?.(formData.value);
 		closeModal();
 	} catch (err) {
 		console.error(err);
@@ -83,28 +82,17 @@ const runSubmit = async (formData: any) => {
 };
 
 const runDelete = () => {
-	props.onDelete?.(props.modelValue?.id);
+	props.onDelete?.(formData.value?.id);
 	closeModal();
 };
 
 const escapeKeyClose = (e: KeyboardEvent) => props?.dismissable && useEscape(e, () => closeModal());
 
 onMounted(() => {
-	setTimeout(() => {
-		isActive = true;
-	}, 1);
-
-	document.addEventListener(
-		'keydown',
-		escapeKeyClose,
-	);
-});
-onUnmounted(() => {
-	document.removeEventListener(
-		'keydown',
-		escapeKeyClose,
-	);
+	setTimeout(() => isActive = true, 1);
+	document.addEventListener('keydown', escapeKeyClose);
 });
+onUnmounted(() => document.removeEventListener('keydown', escapeKeyClose));
 </script>
 
 <style scoped>

package/src/components/NavBar.vue

@@ -18,7 +18,7 @@
 			<div class="nav-scroll">
 				<div class="nav-links-wrapper">
 					<RouterLink
-						v-for="link in links?.()"
+						v-for="link in links"
 						class="nav-button"
 						:to="link.to"
 						:key="link.label"
@@ -27,13 +27,26 @@
 							{{ link.materialIcon }}
 						</div>
 						<div class="tooltip">
-							{{ link.localized ? link.localized : link.label }}
+							{{ link.label }}
 						</div>
 					</RouterLink>
 				</div>
 			</div>
 
 			<div class="bot-buttons-wrapper">
+				<RouterLink
+					v-for="link in footerLinks"
+					class="nav-button"
+					:to="link.to"
+					:key="link.label"
+				>
+					<div class="icon-font">
+						{{ link.materialIcon }}
+					</div>
+					<div class="tooltip">
+						{{ link.label }}
+					</div>
+				</RouterLink>
 				<slot name="floor" />
 			</div>
 		</div>
@@ -41,19 +54,20 @@
 </template>
 
 <script lang="ts" setup>
-// import LangText from "../translation/LangText.vue"s
 import type { MaterialIcons } from '@bagelink/vue';
 
 const isOpen = $ref(true);
+export type NavLink = {
+  label: string;
+  to: string;
+  materialIcon: MaterialIcons;
+  localized?: string;
+}
 
 withDefaults(
 	defineProps<{
-    links?: () => {
-      label: string;
-      to: string;
-      materialIcon: MaterialIcons;
-      localized?: string;
-    }[];
+    footerLinks: NavLink[];
+    links:NavLink[];
     homeIcon?: MaterialIcons;
     homeLabel?: string;
     homeTo?: string;
@@ -62,6 +76,8 @@ withDefaults(
 		homeIcon: 'home',
 		homeLabel: 'Home',
 		homeTo: '/',
+		links: () => [],
+		footerLinks: () => [],
 	},
 );
 </script>

package/src/components/PersonPreview.vue

@@ -107,7 +107,7 @@ const showEditForm = () => {
 .person-card {
 	border: 1.1px solid var(--border-color);
 	/* background: var(--input-bg); */
-	border-radius: var(--card-border-radius);
+border-radius: var(--card-border-radius);
 	padding: 1rem;
 	margin-bottom: 0.5rem;
 	font-size: 1rem;

package/src/components/RTXEditor.vue

@@ -1,105 +1,105 @@
 <template>
-  <!-- :class="{ editable: editable }" -->
-  <div
-    @click="focusEditor"
-    :id="`canvas-${elementId}`"
-    @keydown.meta.enter="$emit('keydown.meta.enter')"
-  />
+	<!-- :class="{ editable: editable }" -->
+	<div
+		@click="focusEditor"
+		:id="`canvas-${elementId}`"
+		@keydown.meta.enter="$emit('keydown.meta.enter')"
+	/>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import { DOMParser, DOMSerializer } from "prosemirror-model";
-import { EditorState } from "prosemirror-state";
-import { EditorView } from "prosemirror-view";
-import { keymap } from "prosemirror-keymap";
-import { baseKeymap } from "prosemirror-commands";
-import { undo, redo, history } from "prosemirror-history";
-import { schema } from "prosemirror-schema-basic";
+import { ref, onMounted, watch } from 'vue';
+import { DOMParser, DOMSerializer } from 'prosemirror-model';
+import { EditorState } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { keymap } from 'prosemirror-keymap';
+import { baseKeymap } from 'prosemirror-commands';
+import { undo, redo, history } from 'prosemirror-history';
+import { schema } from 'prosemirror-schema-basic';
 
 const props = withDefaults(
-  defineProps<{
+	defineProps<{
     elementId?: string;
     modelValue: string;
   }>(),
-  {
-    elementId: Math.random().toString(36).substr(2, 9),
-    modelValue: "",
-  }
+	{
+		elementId: Math.random().toString(36).substr(2, 9),
+		modelValue: '',
+	},
 );
 
-const emit = defineEmits(["update:modelValue", "keydown.meta.enter"]);
+const emit = defineEmits(['update:modelValue', 'keydown.meta.enter']);
 
 const html = ref<string>(props.modelValue);
 let view: EditorView;
 
 const createEditorStateFromHTML = (htmlContent: string) => {
-  let content = { type: "doc", content: [] };
-  try {
-    const dom = document.createElement("div");
-    dom.innerHTML = htmlContent || "";
-    content = DOMParser.fromSchema(schema)
-      .parse(dom, { preserveWhitespace: true })
-      .toJSON();
-  } catch (err) {
-    content = { type: "doc", content: [] };
-  }
-
-  const state = EditorState.create({
-    doc: DOMParser.fromSchema(schema).schema.nodeFromJSON(content),
-    plugins: [
-      history(),
-      keymap({ "Mod-z": undo, "Mod-y": redo }),
-      keymap(baseKeymap),
-    ],
-  });
-
-  return state;
+	let content = { type: 'doc', content: [] };
+	try {
+		const dom = document.createElement('div');
+		dom.innerHTML = htmlContent || '';
+		content = DOMParser.fromSchema(schema)
+			.parse(dom, { preserveWhitespace: true })
+			.toJSON();
+	} catch (err) {
+		content = { type: 'doc', content: [] };
+	}
+
+	const state = EditorState.create({
+		doc: DOMParser.fromSchema(schema).schema.nodeFromJSON(content),
+		plugins: [
+			history(),
+			keymap({ 'Mod-z': undo, 'Mod-y': redo }),
+			keymap(baseKeymap),
+		],
+	});
+
+	return state;
 };
 
 function handleChange(newState: any) {
-  const dom = document.createElement("div");
-  const node = DOMSerializer.fromSchema(schema).serializeFragment(newState);
-  dom.appendChild(node);
-  html.value = dom?.innerHTML || "";
-  emit("update:modelValue", html.value);
+	const dom = document.createElement('div');
+	const node = DOMSerializer.fromSchema(schema).serializeFragment(newState);
+	dom.appendChild(node);
+	html.value = dom?.innerHTML || '';
+	emit('update:modelValue', html.value);
 }
 
 const createEditorView = (state: EditorState) => {
-  const editorDiv = document.getElementById(`canvas-${props.elementId}`);
-  view = new EditorView(editorDiv, {
-    state,
-    // editable: () => props.editable,
-    dispatchTransaction(transaction) {
-      const newState = view.state.apply(transaction);
-      handleChange(newState.doc);
-      view.updateState(newState);
-    },
-  });
-  view.setProps({
-    // editable: () => props.editable,
-  });
+	const editorDiv = document.getElementById(`canvas-${props.elementId}`);
+	view = new EditorView(editorDiv, {
+		state,
+		// editable: () => props.editable,
+		dispatchTransaction(transaction) {
+			const newState = view.state.apply(transaction);
+			handleChange(newState.doc);
+			view.updateState(newState);
+		},
+	});
+	view.setProps({
+		// editable: () => props.editable,
+	});
 };
 
 function loadContent() {
-  const state = createEditorStateFromHTML(props.modelValue);
-  createEditorView(state);
+	const state = createEditorStateFromHTML(props.modelValue);
+	createEditorView(state);
 }
 
 watch(
-  () => props.modelValue,
-  (val: string) => {
-    if (val === html.value) return;
-    const el = document.getElementById(`canvas-${props.elementId}`);
-    if (el) el.innerHTML = "";
-    loadContent();
-  }
+	() => props.modelValue,
+	(val: string) => {
+		if (val === html.value) return;
+		const el = document.getElementById(`canvas-${props.elementId}`);
+		if (el) el.innerHTML = '';
+		loadContent();
+	},
 );
 
 onMounted(loadContent);
 
 function focusEditor() {
-  view.focus();
+	view.focus();
 }
 </script>
 

package/src/components/form/BglField.vue

@@ -1,18 +1,17 @@
 <template>
 	<component
 		:required="field.required"
-		v-bind="bindAttrs(field?.attrs||{}, props.modelValue[field.id || ''], props.modelValue,)"
+		v-bind="bindAttrs(field?.attrs||{}, field.id?data[field.id]:'', data)"
 		v-if="vIf"
 		:is="field.$el || 'div'"
 		:label="field.label"
 		:id="field.id"
 		:placeholder="field.placeholder || field.label"
-		:modelValue="props.modelValue[field.id || '']"
-		@update:modelValue="($event:any)=>emits('update:modelValue', $event)"
+		:modelValue="field.id?data[field.id]:''"
+		@update:modelValue="($event:any)=>updateField($event, field?.id)"
 	>
 		<BglField
-			:modelValue="modelValue"
-			@update:modelValue="($event:any)=>emits('update:modelValue', $event)"
+			v-model="data"
 			v-for="(child,ii) in field.children" :key="child.id||ii"
 			:field="child"
 		/>
@@ -23,17 +22,21 @@
 import { type Field, bindAttrs } from '@bagelink/vue';
 
 const props = defineProps<{
-    modelValue: Record<string, any>;
     field: Field
   }>();
 
+const data = defineModel<Record<string, any>>('modelValue', { default: {} });
+
+function updateField(val: any, fieldID?: string) {
+	if (!fieldID || !data.value) return;
+	data.value[fieldID] = val;
+}
+
 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[props.field['v-if']];
-	if (typeof props.field['v-if'] === 'function') return props.field['v-if']!(props.modelValue[props.field.id || ''], props.modelValue);
+	if (typeof props.field['v-if'] === 'string') return !!data.value[props.field['v-if']];
+	if (typeof props.field['v-if'] === 'function') return props.field['v-if']!(data.value[props.field.id || ''], data.value);
 	return true;
 });
-
-const emits = defineEmits(['update:modelValue']);
 </script>

package/src/components/form/BglForm.vue

@@ -1,8 +1,7 @@
 <template>
 	<form ref="form" @submit.prevent="runSubmit">
 		<BglField
-			v-for="(field, i) in schema" :key="field.id || `${i  }p`" :field="field" :modelValue="data"
-			@update:modelValue="($event)=>updateModelValue($event, field?.id || '')"
+			v-for="(field, i) in schema" :key="field.id || `${i  }p`" :field="field" v-model="data"
 		/>
 		<Btn
 			class="del-top" v-if="data?.id && onDelete" @click="runDelete" value="Delete" flat icon="delete"
@@ -33,19 +32,14 @@ const form = $ref<HTMLFormElement>();
 
 const validateForm = () => form?.reportValidity?.();
 
-const updateModelValue = (val: any, fieldID: string) => {
-	if (!fieldID || !data.value) return;
-	data.value[fieldID] = val;
-};
-
 defineExpose({ validateForm });
 
-const clearForm = () => Object.assign(data, {});
+const clearForm = () => Object.assign(data.value, {});
 const emits = defineEmits(['submit']);
 
 const runSubmit = () => {
 	validateForm();
-	emits('submit', data);
+	emits('submit', data.value);
 	clearForm();
 };
 

package/src/components/form/index.ts

@@ -1,6 +1,3 @@
-export { default as ItemRef } from './ItemRef.vue';
-export { default as MaterialIcon } from './MaterialIcon.vue';
-export { default as PlainInputField } from './PlainInputField.vue';
 export { default as BglForm } from './BglForm.vue';
 export { default as BagelForm } from './BglForm.vue';
 export { default as BglField } from './BglField.vue';