@bagelink/vue 0.0.600 → 0.0.605

package/dist/style.css

@@ -640,19 +640,19 @@ a[data-v-59ea4a90] {
 }
 }
 
-.selected[data-v-73d79ea6] {
+.selected[data-v-84e79d8d] {
 	background: var(--bgl-primary-tint);
 }
-tbody tr.selected[data-v-73d79ea6]:hover {
+tbody tr.selected[data-v-84e79d8d]:hover {
 	background: var(--bgl-primary-light);
 }
-.loading-table[data-v-73d79ea6] {
+.loading-table[data-v-84e79d8d] {
 	position: relative;
 }
-.inset[data-v-73d79ea6] {
+.inset[data-v-84e79d8d] {
 	inset: 0;
 }
-.loading-table-animation[data-v-73d79ea6] {
+.loading-table-animation[data-v-84e79d8d] {
 	--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-84e79d8d 1s linear infinite;
 }
-@keyframes loading-table-73d79ea6 {
+@keyframes loading-table-84e79d8d {
 0% {
 		transform: translate(-50%, -50%) rotate(0deg);
 }
@@ -670,51 +670,51 @@ tbody tr.selected[data-v-73d79ea6]:hover {
 		transform: translate(-50%, -50%) rotate(360deg);
 }
 }
-.list-arrows[data-v-73d79ea6] {
+.list-arrows[data-v-84e79d8d] {
 	opacity: 0;
 }
-.list-arrows .bgl_icon-font[data-v-73d79ea6] {
+.list-arrows .bgl_icon-font[data-v-84e79d8d] {
 	transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-73d79ea6] {
+.list-arrows.sorted[data-v-84e79d8d] {
 	opacity: 1;
 }
-.col img[data-v-73d79ea6] {
+.col img[data-v-84e79d8d] {
 	height: 35px;
 	margin-top: -14px;
 	margin-bottom: -14px;
 	border-radius: 5px;
 }
-.list-arrows.sorted .desc[data-v-73d79ea6] {
+.list-arrows.sorted .desc[data-v-84e79d8d] {
 	transform: rotate(180deg);
 }
-table[data-v-73d79ea6] {
+table[data-v-84e79d8d] {
 	border-collapse: separate;
 	border-spacing: 0 15px;
 	border-collapse: collapse;
 	width: 100%;
 }
-th[data-v-73d79ea6] {
+th[data-v-84e79d8d] {
 	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(--2438e78c);
 	vertical-align: bottom;
 	font-weight: 400;
 	text-align: start;
 }
-.embedded-field[data-v-73d79ea6] {
+.embedded-field[data-v-84e79d8d] {
 	margin-bottom: -0.2rem;
 	margin-top: -0.2rem;
 }
-.row[data-v-73d79ea6] {
+.row[data-v-84e79d8d] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 }
-.row.first-row[data-v-73d79ea6] {
+.row.first-row[data-v-84e79d8d] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
@@ -723,7 +723,7 @@ th[data-v-73d79ea6] {
 	background: var(--bgl-white);
 	vertical-align: bottom;
 }
-.row.first-row[data-v-73d79ea6]::after {
+.row.first-row[data-v-84e79d8d]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -731,30 +731,30 @@ th[data-v-73d79ea6] {
 	right: 0;
 	bottom: -1px;
 }
-.first-row .col[data-v-73d79ea6] {
+.first-row .col[data-v-84e79d8d] {
 	cursor: pointer;
 	background: var(--bgl-white);
 }
-.col[data-v-73d79ea6] {
+.col[data-v-84e79d8d] {
 	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-84e79d8d]:has(.bagel-input) {
 	padding: 0rem 0.25rem;
 }
-.col>div[data-v-73d79ea6] {
+.col > div[data-v-84e79d8d] {
 	display: flex;
 	gap: 0.5rem;
 }
-.max-col-width[data-v-73d79ea6] {
+.max-col-width[data-v-84e79d8d] {
 	max-width: 30vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.col.check .bgl_icon-font[data-v-73d79ea6] {
+.col.check .bgl_icon-font[data-v-84e79d8d] {
 	border-radius: 100%;
 	background: var(--bgl-blue-20);
 	color: var(--bgl-primary);
@@ -765,35 +765,35 @@ th[data-v-73d79ea6] {
 	justify-content: center;
 	margin-top: -2px;
 }
-.rows[data-v-73d79ea6] {
+.rows[data-v-84e79d8d] {
 	font-size: 0.88em;
 }
-.table-list[data-v-73d79ea6] {
+.table-list[data-v-84e79d8d] {
 	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-84e79d8d] {
 	overflow: unset;
 }
-.row-item[data-v-73d79ea6] {
-	height: var(--59d71ad2);
+.row-item[data-v-84e79d8d] {
+	height: var(--2438e78c);
 	transition: all 200ms ease;
 }
-.row-item[data-v-73d79ea6]:hover {
+.row-item[data-v-84e79d8d]:hover {
 	background: var(--bgl-gray-light);
 }
-.row-item input[type='checkbox'][data-v-73d79ea6] {
+.row-item input[type='checkbox'][data-v-84e79d8d] {
 	margin-top: 0.45rem !important;
 	accent-color: var(--bgl-primary);
 }
-.infinite-wrapper[data-v-73d79ea6] {
+.infinite-wrapper[data-v-84e79d8d] {
 	overflow-y: auto;
 	width: 100%;
 }
-input[type='checkbox'][data-v-73d79ea6] {
+input[type='checkbox'][data-v-84e79d8d] {
 	margin-top: 0.3rem !important;
 	accent-color: var(--bgl-primary);
 	transform: scale(1.2);
@@ -805,7 +805,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-84e79d8d]::before {
 	content: '';
 	height: 0.85rem;
 	width: 0.85rem;
@@ -818,18 +818,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-84e79d8d]:hover::before {
 	opacity: 0.2;
 	transform: scale(2);
 }
-[lang='he'] [dir='ltr'][data-v-73d79ea6] {
+[lang='he'] [dir='ltr'][data-v-84e79d8d] {
 	text-align: right;
 }
-th input[type='checkbox'][data-v-73d79ea6] {
+th input[type='checkbox'][data-v-84e79d8d] {
 	transform: translateY(0.2rem) scale(1.2);
 	accent-color: var(--bgl-primary);
 }
-th[data-v-73d79ea6]::after {
+th[data-v-84e79d8d]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -837,49 +837,49 @@ th[data-v-73d79ea6]::after {
 	right: 0;
 	bottom: -1px;
 }
-tr[data-v-73d79ea6] {
+tr[data-v-84e79d8d] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 	align-items: center;
 }
-td[data-v-73d79ea6],
-th[data-v-73d79ea6] {
+td[data-v-84e79d8d],
+th[data-v-84e79d8d] {
 	white-space: nowrap;
 	padding: 0.75rem 0.65rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 }
-tbody tr[data-v-73d79ea6] {
+tbody tr[data-v-84e79d8d] {
 	font-size: 0.88em;
-	height: var(--59d71ad2);
+	height: var(--2438e78c);
 	transition: all 200ms ease;
 }
-tbody tr[data-v-73d79ea6]:hover {
+tbody tr[data-v-84e79d8d]:hover {
 	background: var(--bgl-gray-light);
 }
 
-[data-v-792f7ec0]{
+[data-v-d1cbc45f] {
 	/* outline: rebeccapurple 1px solid; */
 }
-.data[data-v-792f7ec0] {
+.data[data-v-d1cbc45f] {
 	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-d1cbc45f] {
 	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-d1cbc45f],
+.data-row .bagel-input.shrink input[data-v-d1cbc45f] {
 	min-width: 140px !important;
 	/* margin-top: -0.45rem !important; */
 }
-.data-link[data-v-792f7ec0] {
+.data-link[data-v-d1cbc45f] {
 	display: block;
 	font-size: var(--input-font-size);
 	margin-bottom: 2px;
@@ -887,7 +887,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-d1cbc45f] {
 		display: block;
 		/* min-height: 80px; */
 		padding-bottom: 1rem;
@@ -2360,7 +2360,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 +2373,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 +2383,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 +2404,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 +2424,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 +2432,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 +2450,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.600",
+  "version": "0.0.605",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -54,7 +54,7 @@
     "@types/leaflet": "^1.9.12",
     "@types/signature_pad": "^2.3.6",
     "@vue-macros/reactivity-transform": "^0.4.6",
-    "vue": "^3.4.32"
+    "vue": "^3.4.33"
   },
   "peerDependencies": {
     "@bagelink/sdk": "*",

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,25 +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 {
@@ -91,7 +123,6 @@ const computedSchema = $computed(
 }
 </style>
 
-
 <style>
 .data-row .bagel-input,
 .data-row .bagel-input input {
@@ -99,4 +130,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">
@@ -376,7 +377,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/composables/index.ts

@@ -1,4 +1,6 @@
 import { type BglFormSchemaFnT, type BglFormSchemaT, getFallbackSchema } from '@bagelink/vue'
+import type { Ref, UnwrapRef } from 'vue'
+import { ref, watch } from 'vue'
 
 interface useBglSchemaParamsT {
 	schema?: BglFormSchemaFnT
@@ -22,3 +24,15 @@ export function useBglSchema(
 	}
 	return getFallbackSchema(data, showFields)
 }
+
+export function useLocalStorage<T>(key: string, initialValue: T): Ref<UnwrapRef<T>> {
+	const storedValue = localStorage.getItem(key)
+	const initial = storedValue ? JSON.parse(storedValue) : initialValue
+	const value = ref<T>(initial)
+
+	watch(() => value.value, (val) => {
+		localStorage.setItem(key, JSON.stringify(val))
+	}, { immediate: true, deep: true })
+
+	return value
+}

package/src/utils/index.ts

@@ -7,7 +7,8 @@ export function debounce(fn: () => void, delay = 500) {
 }
 
 export function keyToLabel(key?: string): string | undefined {
-	return key?.split('_')
+	if (key === undefined) return key
+	return key.split('_')
 		.map(k => k.charAt(0).toUpperCase() + k.slice(1))
 		.join(' ') || key
 }

package/tsconfig.json

@@ -1,4 +1,5 @@
 {
+	"extends": "@vue/tsconfig/tsconfig.dom.json",
 	"compilerOptions": {
 		"target": "ESNext",
 		"baseUrl": ".",
@@ -41,6 +42,7 @@
 		},
 	},
 	"include": [
+		"env.d.ts",
 		"**/**/*.ts",
 		"**/**/*.vue",
 		"**/**/*.d.ts",

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

@@ -1,10 +0,0 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
-    trigger?(_: {}): any;
-}>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-//# sourceMappingURL=Popover.vue.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Popover.vue.d.ts","sourceRoot":"","sources":["../../src/components/Popover.vue"],"names":[],"mappings":"AAoBA;AAEA,OAAO,6BAA6B,CAAC;;;;AAmHrC,wBAAwG;AACxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}