@bagelink/vue 0.0.602 → 0.0.610

package/dist/style.css

@@ -640,19 +640,19 @@ a[data-v-59ea4a90] {
 }
 }
 
-.selected[data-v-73d79ea6] {
+.selected[data-v-d01cb754] {
 	background: var(--bgl-primary-tint);
 }
-tbody tr.selected[data-v-73d79ea6]:hover {
+tbody tr.selected[data-v-d01cb754]:hover {
 	background: var(--bgl-primary-light);
 }
-.loading-table[data-v-73d79ea6] {
+.loading-table[data-v-d01cb754] {
 	position: relative;
 }
-.inset[data-v-73d79ea6] {
+.inset[data-v-d01cb754] {
 	inset: 0;
 }
-.loading-table-animation[data-v-73d79ea6] {
+.loading-table-animation[data-v-d01cb754] {
 	--size: 60px;
 	top: 30vh;
 	inset-inline-start: calc(50% - var(--size));
@@ -660,9 +660,9 @@ tbody tr.selected[data-v-73d79ea6]:hover {
 	border-top: 4px solid var(--bgl-primary);
 	width: var(--size);
 	height: var(--size);
-	animation: loading-table-73d79ea6 1s linear infinite;
+	animation: loading-table-d01cb754 1s linear infinite;
 }
-@keyframes loading-table-73d79ea6 {
+@keyframes loading-table-d01cb754 {
 0% {
 		transform: translate(-50%, -50%) rotate(0deg);
 }
@@ -670,51 +670,52 @@ tbody tr.selected[data-v-73d79ea6]:hover {
 		transform: translate(-50%, -50%) rotate(360deg);
 }
 }
-.list-arrows[data-v-73d79ea6] {
+.list-arrows[data-v-d01cb754] {
 	opacity: 0;
 }
-.list-arrows .bgl_icon-font[data-v-73d79ea6] {
+.list-arrows .bgl_icon-font[data-v-d01cb754] {
 	transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-73d79ea6] {
+.list-arrows.sorted[data-v-d01cb754] {
 	opacity: 1;
 }
-.col img[data-v-73d79ea6] {
+.col img[data-v-d01cb754] {
 	height: 35px;
 	margin-top: -14px;
 	margin-bottom: -14px;
 	border-radius: 5px;
 }
-.list-arrows.sorted .desc[data-v-73d79ea6] {
+.list-arrows.sorted .desc[data-v-d01cb754] {
 	transform: rotate(180deg);
+	display: inline-block;
 }
-table[data-v-73d79ea6] {
+table[data-v-d01cb754] {
 	border-collapse: separate;
 	border-spacing: 0 15px;
 	border-collapse: collapse;
 	width: 100%;
 }
-th[data-v-73d79ea6] {
+th[data-v-d01cb754] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
 	top: 0;
 	z-index: 2;
 	background: var(--bgl-white);
-	height: var(--59d71ad2);
+	height: var(--02b73339);
 	vertical-align: bottom;
 	font-weight: 400;
 	text-align: start;
 }
-.embedded-field[data-v-73d79ea6] {
+.embedded-field[data-v-d01cb754] {
 	margin-bottom: -0.2rem;
 	margin-top: -0.2rem;
 }
-.row[data-v-73d79ea6] {
+.row[data-v-d01cb754] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 }
-.row.first-row[data-v-73d79ea6] {
+.row.first-row[data-v-d01cb754] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
@@ -723,7 +724,7 @@ th[data-v-73d79ea6] {
 	background: var(--bgl-white);
 	vertical-align: bottom;
 }
-.row.first-row[data-v-73d79ea6]::after {
+.row.first-row[data-v-d01cb754]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -731,30 +732,30 @@ th[data-v-73d79ea6] {
 	right: 0;
 	bottom: -1px;
 }
-.first-row .col[data-v-73d79ea6] {
+.first-row .col[data-v-d01cb754] {
 	cursor: pointer;
 	background: var(--bgl-white);
 }
-.col[data-v-73d79ea6] {
+.col[data-v-d01cb754] {
 	white-space: nowrap;
 	padding: 0.75rem 1rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 	align-items: center;
 }
-.col[data-v-73d79ea6]:has(.bagel-input) {
+.col[data-v-d01cb754]:has(.bagel-input) {
 	padding: 0rem 0.25rem;
 }
-.col>div[data-v-73d79ea6] {
+.col > div[data-v-d01cb754] {
 	display: flex;
 	gap: 0.5rem;
 }
-.max-col-width[data-v-73d79ea6] {
+.max-col-width[data-v-d01cb754] {
 	max-width: 30vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.col.check .bgl_icon-font[data-v-73d79ea6] {
+.col.check .bgl_icon-font[data-v-d01cb754] {
 	border-radius: 100%;
 	background: var(--bgl-blue-20);
 	color: var(--bgl-primary);
@@ -765,35 +766,35 @@ th[data-v-73d79ea6] {
 	justify-content: center;
 	margin-top: -2px;
 }
-.rows[data-v-73d79ea6] {
+.rows[data-v-d01cb754] {
 	font-size: 0.88em;
 }
-.table-list[data-v-73d79ea6] {
+.table-list[data-v-d01cb754] {
 	height: 100%;
 	position: relative;
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	overflow: auto;
 }
-.BagelTable .table-list[data-v-73d79ea6] {
+.BagelTable .table-list[data-v-d01cb754] {
 	overflow: unset;
 }
-.row-item[data-v-73d79ea6] {
-	height: var(--59d71ad2);
+.row-item[data-v-d01cb754] {
+	height: var(--02b73339);
 	transition: all 200ms ease;
 }
-.row-item[data-v-73d79ea6]:hover {
+.row-item[data-v-d01cb754]:hover {
 	background: var(--bgl-gray-light);
 }
-.row-item input[type='checkbox'][data-v-73d79ea6] {
+.row-item input[type='checkbox'][data-v-d01cb754] {
 	margin-top: 0.45rem !important;
 	accent-color: var(--bgl-primary);
 }
-.infinite-wrapper[data-v-73d79ea6] {
+.infinite-wrapper[data-v-d01cb754] {
 	overflow-y: auto;
 	width: 100%;
 }
-input[type='checkbox'][data-v-73d79ea6] {
+input[type='checkbox'][data-v-d01cb754] {
 	margin-top: 0.3rem !important;
 	accent-color: var(--bgl-primary);
 	transform: scale(1.2);
@@ -805,7 +806,7 @@ input[type='checkbox'][data-v-73d79ea6] {
 	height: 0.85rem;
 	width: 0.85rem;
 }
-input[type='checkbox'][data-v-73d79ea6]::before {
+input[type='checkbox'][data-v-d01cb754]::before {
 	content: '';
 	height: 0.85rem;
 	width: 0.85rem;
@@ -818,18 +819,18 @@ input[type='checkbox'][data-v-73d79ea6]::before {
 	transform: scale(1);
 	position: absolute;
 }
-input[type='checkbox'][data-v-73d79ea6]:hover::before {
+input[type='checkbox'][data-v-d01cb754]:hover::before {
 	opacity: 0.2;
 	transform: scale(2);
 }
-[lang='he'] [dir='ltr'][data-v-73d79ea6] {
+[lang='he'] [dir='ltr'][data-v-d01cb754] {
 	text-align: right;
 }
-th input[type='checkbox'][data-v-73d79ea6] {
+th input[type='checkbox'][data-v-d01cb754] {
 	transform: translateY(0.2rem) scale(1.2);
 	accent-color: var(--bgl-primary);
 }
-th[data-v-73d79ea6]::after {
+th[data-v-d01cb754]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -837,49 +838,46 @@ th[data-v-73d79ea6]::after {
 	right: 0;
 	bottom: -1px;
 }
-tr[data-v-73d79ea6] {
+tr[data-v-d01cb754] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 	align-items: center;
 }
-td[data-v-73d79ea6],
-th[data-v-73d79ea6] {
+td[data-v-d01cb754],
+th[data-v-d01cb754] {
 	white-space: nowrap;
 	padding: 0.75rem 0.65rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 }
-tbody tr[data-v-73d79ea6] {
+tbody tr[data-v-d01cb754] {
 	font-size: 0.88em;
-	height: var(--59d71ad2);
+	height: var(--02b73339);
 	transition: all 200ms ease;
 }
-tbody tr[data-v-73d79ea6]:hover {
+tbody tr[data-v-d01cb754]:hover {
 	background: var(--bgl-gray-light);
 }
 
-[data-v-792f7ec0]{
-	/* outline: rebeccapurple 1px solid; */
-}
-.data[data-v-792f7ec0] {
+data[data-v-0ffde6c7] {
 	font-size: var(--input-font-size);
 	border: 1.1px solid var(--border-color);
 	padding: 20px;
 	border-radius: var(--input-border-radius);
 }
-.data-row[data-v-792f7ec0] {
+.data-row[data-v-0ffde6c7] {
 	display: flex;
 	justify-content: space-between;
 	border-bottom: 1px solid var(--border-color);
 	align-items: center;
 	min-height: 50px;
 }
-.data-row .bagel-input.shrink[data-v-792f7ec0],
-.data-row .bagel-input.shrink input[data-v-792f7ec0] {
+.data-row .bagel-input.shrink[data-v-0ffde6c7],
+.data-row .bagel-input.shrink input[data-v-0ffde6c7] {
 	min-width: 140px !important;
 	/* margin-top: -0.45rem !important; */
 }
-.data-link[data-v-792f7ec0] {
+.data-link[data-v-0ffde6c7] {
 	display: block;
 	font-size: var(--input-font-size);
 	margin-bottom: 2px;
@@ -887,7 +885,7 @@ tbody tr[data-v-73d79ea6]:hover {
 	color: var(--input-color);
 }
 @media screen and (max-width: 910px) {
-.data-row[data-v-792f7ec0] {
+.data-row[data-v-0ffde6c7] {
 		display: block;
 		/* min-height: 80px; */
 		padding-bottom: 1rem;
@@ -2360,7 +2358,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	color: var(--bgl-white);
 }
 
-.bagel-input .fileUploadWrap[data-v-5409803c] {
+.bagel-input .fileUploadWrap[data-v-6716fd45] {
 	--width: 320px;
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
@@ -2373,7 +2371,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	overflow-y: auto;
 	background: var(--input-bg);
 }
-.previewName[data-v-5409803c] {
+.previewName[data-v-6716fd45] {
 	padding: 0.5rem;
 	text-align: start;
 	color: var(--input-color);
@@ -2383,18 +2381,18 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	align-items: center;
 	padding-inline: 14px;
 }
-.previewName p[data-v-5409803c] {
+.previewName p[data-v-6716fd45] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.imagePreviewWrap[data-v-5409803c] {
+.imagePreviewWrap[data-v-6716fd45] {
 	background: var(--input-bg);
 	border-radius: var(--input-border-radius);
 	padding: 5px;
 	min-height: 90px;
 }
-img.preview[data-v-5409803c] {
+img.preview[data-v-6716fd45] {
 	/* max-height: calc(var(--width) / 2); */
 	/* max-width: calc(var(--width) * 2); */
 	width: 40px;
@@ -2404,19 +2402,19 @@ img.preview[data-v-5409803c] {
 	background: var(--bgl-gray-light);
 	box-shadow: 0 0 10px #00000012;
 }
-img.preview.single[data-v-5409803c] {
+img.preview.single[data-v-6716fd45] {
 	max-width: var(--width);
-	width: auto;
+	width: calc(100% - 2.75rem);
 	object-fit: contain;
 	height: auto;
 	max-height: calc(var(--width) / 2);
 	margin: 1rem;
 }
-.fileUploadWrap.dragover[data-v-5409803c],
-.fileUploadWrap[data-v-5409803c]:hover {
+.fileUploadWrap.dragover[data-v-6716fd45],
+.fileUploadWrap[data-v-6716fd45]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-5409803c] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-6716fd45] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
@@ -2424,7 +2422,7 @@ img.preview.single[data-v-5409803c] {
 	color: var(--bgl-gray);
 	flex-direction: column;
 }
-.pie[data-v-5409803c] {
+.pie[data-v-6716fd45] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -2432,7 +2430,7 @@ img.preview.single[data-v-5409803c] {
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-5409803c]:before {
+.pie[data-v-6716fd45]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -2450,26 +2448,26 @@ img.preview.single[data-v-5409803c] {
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-5409803c] {
+.pie .success[data-v-6716fd45] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-5409803c] {
+.pie .progress[data-v-6716fd45] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-5409803c] {
+.pie.complete .progress[data-v-6716fd45] {
 	display: none;
 }
-.pie.complete .success[data-v-5409803c] {
+.pie.complete .success[data-v-6716fd45] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-5409803c]:before {
+.pie.complete[data-v-6716fd45]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-5409803c] {
+.pie.complete[data-v-6716fd45] {
 	color: var(--bgl-green);
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAG/D,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,KAAK,SAAM,QAGnD;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAI3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,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,OAU7F;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAM9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,CAAC,EAAE,MAAM,OAGzE;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,wBAAgB,iBAAiB,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,cAAc,CAerF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAG/D,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,KAAK,SAAM,QAGnD;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAK3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,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,OAU7F;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAM9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,CAAC,EAAE,MAAM,OAGzE;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,wBAAgB,iBAAiB,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,cAAc,CAerF"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.602",
+  "version": "0.0.610",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -53,8 +53,8 @@
   "devDependencies": {
     "@types/leaflet": "^1.9.12",
     "@types/signature_pad": "^2.3.6",
-    "@vue-macros/reactivity-transform": "^0.4.6",
-    "vue": "^3.4.32"
+    "@vue-macros/reactivity-transform": "^0.4.7",
+    "vue": "^3.4.33"
   },
   "peerDependencies": {
     "@bagelink/sdk": "*",
@@ -105,15 +105,15 @@
     "access": "public"
   },
   "dependencies": {
-    "@tiptap/extension-image": "^2.5.4",
-    "@tiptap/extension-table": "^2.5.4",
-    "@tiptap/extension-table-cell": "^2.5.4",
-    "@tiptap/extension-table-header": "^2.5.4",
-    "@tiptap/extension-table-row": "^2.5.4",
-    "@tiptap/extension-youtube": "^2.5.4",
-    "@tiptap/pm": "^2.5.4",
-    "@tiptap/starter-kit": "^2.5.4",
-    "@tiptap/vue-3": "^2.5.4",
+    "@tiptap/extension-image": "^2.5.5",
+    "@tiptap/extension-table": "^2.5.5",
+    "@tiptap/extension-table-cell": "^2.5.5",
+    "@tiptap/extension-table-header": "^2.5.5",
+    "@tiptap/extension-table-row": "^2.5.5",
+    "@tiptap/extension-youtube": "^2.5.5",
+    "@tiptap/pm": "^2.5.5",
+    "@tiptap/starter-kit": "^2.5.5",
+    "@tiptap/vue-3": "^2.5.5",
     "@vuepic/vue-datepicker": "^8.8.1",
     "@vueuse/core": "^10.11.0",
     "axios": "^1.7.2",
@@ -121,7 +121,7 @@
     "leaflet": "^1.9.4",
     "libphonenumber-js": "1.11.4",
     "signature_pad": "^5.0.2",
-    "type-fest": "^4.22.1"
+    "type-fest": "^4.23.0"
   },
   "scripts": {
     "dev": "tsx watch src/index.ts",

package/src/components/DataPreview.vue

@@ -5,23 +5,44 @@ import {
 	Title,
 	getFallbackSchema,
 	iffer,
-	keyToLabel
+	keyToLabel,
 } from '@bagelink/vue'
 
 const props = defineProps<{
 	showFields?: string[]
 	schema?: BglFormSchemaT
 	title?: string
+	excludeUnset?: boolean
 }>()
 
 const itemData = defineModel<Record<string, any>>('data', { default: {} })
 
-const computedSchema = $computed(
-	() => getFallbackSchema(
-		[itemData.value],
-		props.showFields
-	),
-)
+function dataTransform(dataValue: any): any {
+	if (!dataValue) return dataValue
+	if (Array.isArray(dataValue)) return dataValue.map(dataTransform)
+	if (typeof dataValue === 'object') {
+		Object.keys(dataValue).forEach((key) => {
+			dataValue[key] = dataTransform(dataValue[key])
+		})
+	}
+	if (
+		typeof dataValue === 'string'
+		&& /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/.test(dataValue)
+	) {
+		const date = new Date(dataValue)
+		return date.toDateString()
+	}
+	return dataValue
+}
+
+function isUnset(value: any) {
+	if (!props.excludeUnset) return false
+	return (
+		value === undefined || value === null || value === '' || value.length === 0
+	)
+}
+
+const computedSchema = $computed(() => getFallbackSchema([itemData.value], props.showFields))
 </script>
 
 <template>
@@ -34,28 +55,36 @@ const computedSchema = $computed(
 						{{ field?.label || keyToLabel(field.id) }}
 					</p>
 				</div>
-				<BglField v-model="itemData" label="" style="width: min-content; min-width: 140px" :field />
+				<BglField
+					v-model="itemData"
+					label=""
+					style="width: min-content; min-width: 140px"
+					:field
+				/>
 			</div>
 		</template>
 		<div v-if="!schema?.length">
-			<div v-for="({ id, label }) in computedSchema" :key="id" class="data-row">
-				<div class="key">
-					<p class="m-0">{{ label }}</p>
-				</div>
-				<div class="vlue">
-					<p class="m-0">{{ itemData[id ?? ''] }}</p>
+			<template v-for="{ id, label } in computedSchema" :key="id">
+				<div v-if="!isUnset(itemData[id as any])" class="data-row">
+					<div class="key">
+						<p class="m-0">
+							{{ label }}
+						</p>
+					</div>
+					<div>
+						<p v-if="id" class="m-0">
+							{{ dataTransform(itemData[id]) }}
+						</p>
+					</div>
 				</div>
-			</div>
+			</template>
 		</div>
 		<slot name="footer" />
 	</div>
 </template>
 
 <style scoped>
-*{
-	/* outline: rebeccapurple 1px solid; */
-}
-.data {
+data {
 	font-size: var(--input-font-size);
 	border: 1.1px solid var(--border-color);
 	padding: 20px;
@@ -91,7 +120,6 @@ const computedSchema = $computed(
 }
 </style>
 
-
 <style>
 .data-row .bagel-input,
 .data-row .bagel-input input {
@@ -99,4 +127,4 @@ const computedSchema = $computed(
 	/* margin-top: 0.5rem !important; */
 	height: calc(var(--input-height) - 0.25rem) !important;
 }
-</style>
+</style>

package/src/components/TableSchema.vue

@@ -32,12 +32,11 @@ const isSelectable = $computed(() => Array.isArray(props.selectedItems))
 
 const computedSortField = $computed(() => `_transformed_${sortField}`)
 
-const computedSchema = $computed(
-	() => useBglSchema({
-		schema: props.schema,
-		showFields: props.showFields,
-		data: props.data,
-	})
+const computedSchema = $computed(() => useBglSchema({
+	schema: props.schema,
+	showFields: props.showFields,
+	data: props.data,
+})
 )
 
 function transform(rowData: any) {
@@ -141,7 +140,12 @@ function updateAllSelectorState() {
 
 function toggleSelectItem(item: Record<string, any>) {
 	if (!computedSelectedItems.length) {
-		emit('select', item)
+		const obj = { ...item }
+		Object.keys(obj).forEach((key) => {
+			if (key.startsWith('_transformed_')) delete obj[key]
+		})
+
+		emit('select', obj)
 		return
 	}
 	const index = computedSelectedItems.indexOf(item.id)
@@ -171,10 +175,7 @@ function toggleSelectAll(event: Event) {
 		>
 			<div class="loading-table-animation absolute oval" />
 		</div>
-		<div
-			v-else
-			v-bind="wrapperProps"
-		>
+		<div v-else v-bind="wrapperProps">
 			<table class="infinite-wrapper">
 				<thead class="row first-row">
 					<th v-if="isSelectable">
@@ -308,6 +309,7 @@ tbody tr.selected:hover {
 
 .list-arrows.sorted .desc {
 	transform: rotate(180deg);
+	display: inline-block;
 }
 
 table {
@@ -376,7 +378,7 @@ th {
 	padding: 0rem 0.25rem;
 }
 
-.col>div {
+.col > div {
 	display: flex;
 	gap: 0.5rem;
 }

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

@@ -293,7 +293,7 @@ img.preview {
 
 img.preview.single {
 	max-width: var(--width);
-	width: auto;
+	width: calc(100% - 2.75rem);
 	object-fit: contain;
 	height: auto;
 	max-height: calc(var(--width) / 2);

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import SignaturePad from 'signature_pad'
 import type { Options as SignaturePadOptions } from 'signature_pad'
-
+import { Btn } from '@bagelink/vue'
 import { onMounted, watch } from 'vue'
 
 interface WaterMark {
@@ -127,7 +127,8 @@ defineExpose({
 </script>
 
 <template>
-	<div class="bgl_input signature-pad" @touchmove.prevent>
+	<div class="bgl_input signature-pad relative" @touchmove.prevent>
+		<Btn v-if="!disabled" flat thin icon="refresh" class="position-bottom-end" @click="clear" />
 		<canvas ref="vCanvas" class="canvas" :disabled="disabled" />
 	</div>
 </template>