@bagelink/vue 0.0.218 → 0.0.226-beta.0

package/dist/types/BagelForm.d.ts

@@ -9,9 +9,17 @@ export type Field<T = Record<string, any>> = {
     label?: string;
     placeholder?: string;
     children?: Field<T>[];
+    class?: AttributeValue | AttributeFn<T>;
+    options?: string | ({
+        label: string;
+        value: string | number;
+    } | string | number)[];
     attrs?: Attributes<T>;
     required?: boolean;
     hint?: string;
+    defaultValue?: any;
+    transform?: (val?: any, rowData?: Record<string, any>) => any;
+    onUpdate?: (val: any, fieldData?: any, rowData?: Record<string, any>) => void;
     'v-if'?: string | boolean | ((val: any, row: T) => boolean);
 };
 export interface SelectBagelField {

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

@@ -1 +1 @@
-{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAEhG,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,cAAc,CAAC;AAE1F,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,GAAG;IACjC,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,CAAA;CAC/C;AAED,MAAM,MAAM,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC;CAC7D,CAAA;AAED,MAAM,WAAW,gBAAgB;IAChC,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;CAC9D;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC"}
+{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAEhG,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,cAAc,CAAC;AAE1F,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,GAAG;IACjC,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,CAAA;CAC/C;AAED,MAAM,MAAM,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;IACxC,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAC,MAAM,GAAC,MAAM,CAAC,EAAE,CAAC;IAC/E,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,CAAC,EAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,GAAG,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,SAAS,CAAC,EAAC,GAAG,EAAE,OAAO,CAAC,EAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAC5E,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC;CAC7D,CAAA;AAED,MAAM,WAAW,gBAAgB;IAChC,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;CAC9D;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC"}

package/dist/types/index.d.ts

@@ -1,7 +1,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,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

@@ -1,10 +1,13 @@
 import { Attributes } from '../types';
 export declare const debounce: (fn: () => void, delay?: number) => void;
-export declare const keyToLabel: (key: string) => string;
+export declare const keyToLabel: (key?: string) => string | undefined;
 export declare const copyText: (text: string, cb?: ((msg: string) => void) | undefined) => Promise<void>;
 export declare const useFormkit: () => unknown;
 export declare const initials: (...strArr: string[]) => string;
 export declare function useEscape(event: KeyboardEvent, closeModel: () => void): void;
-export declare function bindAttrs<T = Record<string, any>>(attrs: Attributes, fieldVal: any, row: T): any;
+export declare function classify(fieldVal?: any, row?: any, ...classes: any[]): string;
+export declare function bindAttrs<T = Record<string, any>>(attrs?: Attributes, fieldVal?: any, row?: T): any;
+export declare const iffer: (field: any, itemData: any) => any;
+export declare const denullify: (itemData?: Record<string, any>, fieldID?: string) => any;
 export { formatString } from './strings';
 //# sourceMappingURL=index.d.ts.map

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,SAAU,MAAM,KAAG,MAAM,GAAG,SAEjC,CAAC;AAEnB,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,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAKpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,OAS7F;AAED,eAAO,MAAM,KAAK,UAAW,GAAG,YAAY,GAAG,QAK9C,CAAC;AAEF,eAAO,MAAM,SAAS,cAAe,OAAO,MAAM,EAAE,GAAG,CAAC,YAAY,MAAM,QAAqD,CAAC;AAEhI,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.226-beta.0",
   "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": {
@@ -113,6 +112,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "vue-multiselect": "3.0.0-beta.3"
+  },
   "scripts": {
     "dev": "tsx watch src/index.ts",
     "build": "vite build",

package/src/components/AccordionItem.vue

@@ -0,0 +1,100 @@
+<template>
+	<div class="accordion-item">
+		<div class="accordion-title" @click="toggle()">
+			{{ label }}
+			<div class="accordion-icon" :class="{open}" >
+				<MaterialIcon icon="keyboard_arrow_down" />
+			</div>
+		</div>
+		<div v-if="open" class="accordion-content" >
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { MaterialIcon } from '@bagelink/vue';
+
+defineProps<{
+    label: string,
+}>();
+
+let open = $ref(false);
+
+function toggle() {
+	open = !open;
+	console.log('toggle', open);
+}
+</script>
+
+<style scoped>
+.accordion-item {
+  border-top: 1px solid var(--bgl-gray);
+  border-bottom: 1px solid var(--bgl-gray);
+  width: 100%;
+  max-width: 100%;
+  margin: -1 auto 0;
+  border-radius: 0;
+  background: transparent;
+  color: #000;
+  font-size: 1rem;
+  font-weight: 400;
+  text-align: left;
+  transition: all 0.2s ease;
+  overflow: hidden;
+}
+
+.accordion-title {
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: #000;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: left;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  height: var( --input-height);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.accordion-icon {
+  transition: all 0.2s ease;
+}
+.accordion-icon.open {
+  transform: rotate(180deg);
+}
+
+.accordion-content {
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: #000;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: left;
+  transition: all 0.2s ease;
+  max-height: 0;
+  animation: expand 1s ease forwards;
+}
+@keyframes expand {
+  0% {
+    max-height: 0;
+  }
+  100% {
+    max-height: 100vh;
+  }
+}
+</style>

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/Comments.vue

@@ -1,63 +1,63 @@
 <template>
-  <div class="comments-wrap">
-    <div class="comment-list">
-      <div
-        :class="{
-          editable: editComment?.id === comment.id,
-          me: comment.sender.id === bagel.auth.user?.id,
-        }"
-        class="comment"
-        v-for="comment in comments"
-        :key="comment.id"
-      >
-        <div class="comment-top">
-          <div class="comment-owner">
-            {{ comment.sender.first_name }} {{ comment.sender.last_name }}
-          </div>
-          <div class="comment-time">
-            {{ comment.updated_at.split("T")[0] }}
-          </div>
-          <div class="comment-actions">
-            <MaterialIcon
-              :size="1"
-              class="edit"
-              icon="edit"
-              @click="editComment = comment"
-            />
-            <MaterialIcon
-              :size="1.2"
-              class="delete"
-              icon="delete"
-              @click="deleteComment(comment.id)"
-            />
-            <MaterialIcon :size="1.2" class="save" icon="save" @click="save" />
-          </div>
-        </div>
-        <RTXEditor
-          v-model="editComment.body_html"
-          @keydown.meta.enter="save"
-          v-if="editComment !== null && editComment?.id === comment.id"
-        />
-        <div class="editor-wrapper" v-html="comment.body_html" v-else />
-      </div>
-    </div>
-    <div class="new-comment">
-      <RTXEditor
-        class="comment-input"
-        v-model="bodyHtml"
-        @keydown.meta.enter="newComment"
-      />
-      <Btn icon="send" @click="newComment">
-        {{ sendBtnLabel }}
-      </Btn>
-    </div>
-  </div>
+	<div class="comments-wrap">
+		<div class="comment-list">
+			<div
+				:class="{
+					editable: editComment?.id === comment.id,
+					me: comment.sender.id === bagel.auth.user?.id,
+				}"
+				class="comment"
+				v-for="comment in comments"
+				:key="comment.id"
+			>
+				<div class="comment-top">
+					<div class="comment-owner">
+						{{ comment.sender.first_name }} {{ comment.sender.last_name }}
+					</div>
+					<div class="comment-time">
+						{{ comment.updated_at.split("T")[0] }}
+					</div>
+					<div class="comment-actions">
+						<MaterialIcon
+							:size="1"
+							class="edit"
+							icon="edit"
+							@click="editComment = comment"
+						/>
+						<MaterialIcon
+							:size="1.2"
+							class="delete"
+							icon="delete"
+							@click="deleteComment(comment.id)"
+						/>
+						<MaterialIcon :size="1.2" class="save" icon="save" @click="save" />
+					</div>
+				</div>
+				<RTXEditor
+					v-model="editComment.body_html"
+					@keydown.meta.enter="save"
+					v-if="editComment !== null && editComment?.id === comment.id"
+				/>
+				<div class="editor-wrapper" v-html="comment.body_html" v-else />
+			</div>
+		</div>
+		<div class="new-comment">
+			<RTXEditor
+				class="comment-input"
+				v-model="bodyHtml"
+				@keydown.meta.enter="newComment"
+			/>
+			<Btn icon="send" @click="newComment">
+				{{ sendBtnLabel }}
+			</Btn>
+		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, watch } from "vue";
-import { Btn, MaterialIcon, RTXEditor } from "@bagelink/vue";
-import { useBagel } from "..";
+import { onMounted, watch } from 'vue';
+import { Btn, MaterialIcon, RTXEditor } from '@bagelink/vue';
+import { useBagel } from '..';
 
 const bagel = useBagel();
 let comments = $ref<Record<string, any>>([]);
@@ -67,7 +67,7 @@ interface Comment {
   ref_table: string;
   ref_id: string;
   body_html: string;
-  type: "Comment";
+  type: 'Comment';
   created_at: string;
   updated_at: string;
 }
@@ -80,37 +80,37 @@ const props = defineProps<{
 }>();
 
 const fetchData = async () => {
-  comments = [];
-  comments = await bagel.get(`comments/${props.ref_table}/${props.ref_id}`);
+	comments = [];
+	comments = await bagel.get(`comments/${props.ref_table}/${props.ref_id}`);
 };
 
 onMounted(fetchData);
 watch(() => props.ref_id, fetchData);
 
 const save = async () => {
-  if (!editComment) return;
-  await bagel.put(`comments/${editComment.id}`, editComment);
-  void fetchData(); // TODO: Nati: should be awaited?
-  editComment = null;
+	if (!editComment) return;
+	await bagel.put(`comments/${editComment.id}`, editComment);
+	void fetchData(); // TODO: Nati: should be awaited?
+	editComment = null;
 };
 
-let bodyHtml = $ref("");
+let bodyHtml = $ref('');
 
 const deleteComment = async (id: string) => {
-  await bagel.delete(`comments/${id}`);
-  void fetchData(); // TODO: Nati: should be awaited?
+	await bagel.delete(`comments/${id}`);
+	void fetchData(); // TODO: Nati: should be awaited?
 };
 
 const newComment = async () => {
-  if (!bodyHtml) return;
-  await bagel.post("comments", {
-    ref_table: props.ref_table,
-    ref_id: props.ref_id,
-    body_html: bodyHtml,
-    type: "Comment",
-  });
-  bodyHtml = "";
-  void fetchData(); // TODO: Nati: should be awaited?
+	if (!bodyHtml) return;
+	await bagel.post('comments', {
+		ref_table: props.ref_table,
+		ref_id: props.ref_id,
+		body_html: bodyHtml,
+		type: 'Comment',
+	});
+	bodyHtml = '';
+	void fetchData(); // TODO: Nati: should be awaited?
 };
 </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/DataPreview.vue

@@ -1,48 +1,29 @@
 <template>
-	<div
-		v-if="data"
-		class="data"
-	>
-		<h3
-			class="mb-3 mt-0"
-			v-if="title"
-		>
+	<div v-if="data" class="data">
+		<h3 class="mb-3 mt-0" v-if="title">
 			{{ title }}
 		</h3>
-		<template
-			v-for="field in schema || []"
-			:key="field.id"
-		>
-			<div 	class="data-row" v-if="field['v-if'] ? field['v-if'](itemData[field.id], itemData) : true">
+		<template v-for="field in schema" :key="field.id">
+			<div class="data-row" v-if="iffer(field, itemData)">
 				<div class="key">
 					{{ field?.label || keyToLabel(field.id) }}
 				</div>
-				<component
-					:is="field.$el || 'div'"
-					class="vlue"
-					v-model="itemData[field.id]"
-					@update:modelValue="($event:any)=>field?.onUpdate?.($event, data[field.id], itemData)"
-					v-bind="bindAttrs(field.attrs, itemData[field.id], itemData)"
-				>
+				<component :is="field.$el || 'div'" class="value" :modelValue="denullify(itemData, field.id)"
+					@update:modelValue="($event: any) => field?.onUpdate?.($event, denullify(data, field.id), itemData)"
+					v-bind="bindAttrs(field.attrs, field.id ? itemData[field.id] : null, itemData)">
 					{{
-						field?.transform?.(itemData[field.id]
+						field?.transform?.(denullify(itemData, field.id)
 							|| field.defaultValue, itemData)
-							|| itemData[field.id]
-							|| ''
+						|| denullify(itemData, field.id)
+						|| ''
 					}}
 				</component>
 			</div>
 		</template>
 		<div v-if="!schema?.length">
-			<div
-				class="data-row"
-				v-for="[key, value] in Object.entries(itemData).filter(
-					([key]) => !keysToIgnore.includes(key),
-				)"
-				:key="key"
-			>
+			<div class="data-row" v-for="[key, value] in Object.entries(itemData)" :key="key">
 				<div class="key">
-					{{ i18nT(keyToLabel(key)) }}
+					{{ keyToLabel(key) }}
 				</div>
 				<div class="vlue">
 					{{ value }}
@@ -54,28 +35,20 @@
 </template>
 
 <script lang="ts" setup>
-import { keyToLabel, useI18nT } from '@bagelink/vue';
+import {
+	type BglFormSchemaT,
+	keyToLabel,
+	bindAttrs,
+	iffer,
+	denullify,
+} from '@bagelink/vue';
 
-const i18nT = useI18nT();
-
-const keysToIgnore = ['id', 'person_id', 'person', 'created_at', 'updated_at'];
-
-const props = defineProps<{
-	data: Record<string, any>,
-	schema?: Record<string, any>[],
+defineProps<{
+	schema?: BglFormSchemaT,
 	title?: string,
 }>();
 
-const itemData = $ref<Record<string, any>>(props.data);
-
-const bindAttrs = (attrs: Record<string, any>, field: any, row: any) => {
-	const arr = Object.entries(attrs || {}).map(([key, value]) => [
-		key,
-		typeof value === 'function' ? value(field, row) : value,
-	]);
-	const resolvedAttrs = Object.fromEntries(arr);
-	return resolvedAttrs;
-};
+const itemData = defineModel<Record<string, any>>('data', { default: {} });
 </script>
 
 <style scoped>