@bagelink/vue 0.0.546 → 0.0.552

package/dist/style.css

@@ -637,41 +637,41 @@ a[data-v-7f505d62] {
 }
 }
 
-.list-arrows[data-v-8113163b] {
+.list-arrows[data-v-9bf1b6df] {
 	opacity: 0;
 }
-.list-arrows .bgl_icon-font[data-v-8113163b] {
+.list-arrows .bgl_icon-font[data-v-9bf1b6df] {
 	transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-8113163b] {
+.list-arrows.sorted[data-v-9bf1b6df] {
 	opacity: 1;
 }
-.col img[data-v-8113163b] {
+.col img[data-v-9bf1b6df] {
 	height: 35px;
 	margin-top: -14px;
 	margin-bottom: -14px;
 	border-radius: 5px;
 }
-.list-arrows.sorted .desc[data-v-8113163b] {
+.list-arrows.sorted .desc[data-v-9bf1b6df] {
 	transform: rotate(180deg);
 }
-table[data-v-8113163b] {
+table[data-v-9bf1b6df] {
 	border-collapse: separate;
 	border-spacing: 0 15px;
 	border-collapse: collapse;
 }
-th[data-v-8113163b] {
+th[data-v-9bf1b6df] {
 	font-weight: 400;
 }
-.embedded-field[data-v-8113163b] {
+.embedded-field[data-v-9bf1b6df] {
 	margin-bottom: -0.2rem;
 	margin-top: -0.2rem;
 }
-.row[data-v-8113163b] {
+.row[data-v-9bf1b6df] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 }
-.row.first-row[data-v-8113163b] {
+.row.first-row[data-v-9bf1b6df] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
@@ -681,10 +681,10 @@ th[data-v-8113163b] {
 	/* height: 50px; */
 	vertical-align: bottom;
 }
-.row.first-row input[type=checkbox][data-v-8113163b]{
+.row.first-row input[type=checkbox][data-v-9bf1b6df]{
 	margin-bottom: 0.7rem;
 }
-.row.first-row[data-v-8113163b]::after {
+.row.first-row[data-v-9bf1b6df]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -692,30 +692,30 @@ th[data-v-8113163b] {
 	right: 0;
 	bottom: -1px;
 }
-.first-row .col[data-v-8113163b] {
+.first-row .col[data-v-9bf1b6df] {
 	cursor: pointer;
 	background: var(--bgl-white);
 }
-.col[data-v-8113163b] {
+.col[data-v-9bf1b6df] {
 	white-space: nowrap;
 	padding: 0.75rem 1rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 	align-items: center;
 }
-.col[data-v-8113163b]:has(.bagel-input) {
+.col[data-v-9bf1b6df]:has(.bagel-input) {
 	padding: 0rem 0.25rem;
 }
-.col > div[data-v-8113163b] {
+.col > div[data-v-9bf1b6df] {
 	display: flex;
 	gap: 0.5rem;
 }
-.max-col-width[data-v-8113163b] {
+.max-col-width[data-v-9bf1b6df] {
 	max-width: 30vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.col.check .bgl_icon-font[data-v-8113163b] {
+.col.check .bgl_icon-font[data-v-9bf1b6df] {
 	border-radius: 100%;
 	background: var(--bgl-blue-20);
 	color: var(--bgl-primary);
@@ -726,48 +726,48 @@ th[data-v-8113163b] {
 	justify-content: center;
 	margin-top: -2px;
 }
-.rows[data-v-8113163b] {
+.rows[data-v-9bf1b6df] {
 	font-size: 0.88em;
 }
-.table-list[data-v-8113163b] {
+.table-list[data-v-9bf1b6df] {
 	height: 100%;
 	position: relative;
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	overflow: auto;
 }
-.BagelTable .table-list[data-v-8113163b] {
+.BagelTable .table-list[data-v-9bf1b6df] {
 	overflow: unset;
 }
-.row-item[data-v-8113163b] {
+.row-item[data-v-9bf1b6df] {
 	height: 50px;
 	transition: all 200ms ease;
 }
-.row-item[data-v-8113163b]:hover {
+.row-item[data-v-9bf1b6df]:hover {
 	background: var(--bgl-gray-light);
 }
-.row-item input[type=checkbox][data-v-8113163b]{
+.row-item input[type=checkbox][data-v-9bf1b6df]{
 	margin-top: 0.45rem !important;
 	accent-color: var(--bgl-primary);
 }
-.infinite-wrapper[data-v-8113163b] {
+.infinite-wrapper[data-v-9bf1b6df] {
 	overflow-y: auto;
 	width: 100%;
 }
 
-.data[data-v-eb1d3474] {
+.data[data-v-078d6853] {
 	border: 1.1px solid var(--border-color);
 	padding: 20px;
 	border-radius: var(--input-border-radius);
 }
-.data-row[data-v-eb1d3474] {
+.data-row[data-v-078d6853] {
 	display: flex;
 	justify-content: space-between;
 	padding-bottom: 0.5rem;
 	margin-bottom: 0.5rem;
 	border-bottom: 1px solid var(--border-color);
 }
-.data-link[data-v-eb1d3474] {
+.data-link[data-v-078d6853] {
 	display: block;
 	font-size: var(--input-font-size);
 	margin-bottom: 2px;
@@ -2618,7 +2618,7 @@ p {
 	background: var(--input-disabled-bg);
 }
 
-.toolbar[data-v-6538d377] {
+.toolbar[data-v-ace0040e] {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
@@ -2626,11 +2626,11 @@ p {
   background-color: #f0f0f0;
   border-bottom: 1px solid #ccc;
 }
-button[data-v-6538d377]:hover {
+button[data-v-ace0040e]:hover {
   background-color: #e0e0e0;
 }
-input[type="color"][data-v-6538d377],
-input[type="number"][data-v-6538d377] {
+input[type="color"][data-v-ace0040e],
+input[type="number"][data-v-ace0040e] {
   width: 40px;
   height: 30px;
   padding: 0;
@@ -4340,6 +4340,24 @@ input[type="number"][data-v-6538d377] {
 .grid-span-6 {
     grid-column: span 6;
 }
+.grid-span-row-1 {
+    grid-row: span 1;
+}
+.grid-span-row-2 {
+    grid-row: span 2;
+}
+.grid-span-row-3 {
+    grid-row: span 3;
+}
+.grid-span-row-4 {
+    grid-row: span 4;
+}
+.grid-span-row-5 {
+    grid-row: span 5;
+}
+.grid-span-row-6 {
+    grid-row: span 6;
+}
 .overflow-hidden {
     overflow: hidden;
 }
@@ -4496,7 +4514,7 @@ input[type="number"][data-v-6538d377] {
     }
 
     .m_align-items-center {
-        align-items: center;
+        align-items: center !important;
     }
 
     .m_align-items-end {
@@ -6148,6 +6166,29 @@ input[type="number"][data-v-6538d377] {
     .m_grid-span-6 {
         grid-column: span 6;
     }
+    .m_grid-span-row-1 {
+        grid-row: span 1;
+    }
+    
+    .m_grid-span-row-2 {
+        grid-row: span 2;
+    }
+    
+    .m_grid-span-row-3 {
+        grid-row: span 3;
+    }
+    
+    .m_grid-span-row-4 {
+        grid-row: span 4;
+    }
+    
+    .m_grid-span-row-5 {
+        grid-row: span 5;
+    }
+    
+    .m_grid-span-row-6 {
+        grid-row: span 6;
+    }
 
     .m_overflow-hidden {
         overflow: hidden;
@@ -6161,15 +6202,15 @@ input[type="number"][data-v-6538d377] {
         overflow: unset;
     }
 
-    .overflow-scroll {
+    .m_overflow-scroll {
         overflow: scroll;
     }
 
-    .overflow-x-scroll {
+    .m_overflow-x-scroll {
         overflow-x: scroll;
     }
 
-    .overflow-y-scroll {
+    .m_overflow-y-scroll {
         overflow-y: scroll;
     }
 
@@ -6658,16 +6699,28 @@ select {
 .txt-thin {
     font-weight: 100;
 }
-.bold,
-.txt-bold,
-.font-bold {
-    font-weight: 700;
+.extra-light,
+.font-extra-light,
+.txt-extra-light,
+.font-ultra-light,
+.txt-ultra-light {
+    font-weight: 200;
+}
+.light,
+.txt-light,
+.font-light {
+    font-weight: 300;
 }
 .regular,
 .txt-regular,
 .font-regular {
     font-weight: 400;
 }
+.medium,
+.txt-medium,
+.font-medium {
+    font-weight: 500;
+}
 .semi,
 .semibold,
 .txt-semi,
@@ -6677,15 +6730,22 @@ select {
 .font-semibold {
     font-weight: 600;
 }
-.light,
-.txt-light,
-.font-light {
-    font-weight: 300;
+.bold,
+.txt-bold,
+.font-bold {
+    font-weight: 700;
 }
-.medium,
-.txt-medium,
-.font-medium {
-    font-weight: 500;
+.extra-bold,
+.font-extra-bold,
+.txt-extra-bold,
+.font-ultra-bold,
+.txt-ultra-bold {
+    font-weight: 800;
+}
+.black,
+.txt-black,
+.font-black {
+    font-weight: 900;
 }
 .line-height-1 {
     line-height: 1;
@@ -6977,10 +7037,18 @@ select {
         font-weight: 100;
     }
 
-    .m_bold,
-    .m_txt-bold,
-    .m_font-bold {
-        font-weight: 700;
+    .m_extra-light,
+    .m_font-extra-light,
+    .m_txt-extra-light,
+    .m_font-ultra-light,
+    .m_txt-ultra-light {
+        font-weight: 200;
+    }
+
+    .m_light,
+    .m_txt-light,
+    .m_font-light {
+        font-weight: 300;
     }
 
     .m_regular,
@@ -6989,6 +7057,12 @@ select {
         font-weight: 400;
     }
 
+    .m_medium,
+    .m_txt-medium,
+    .m_font-medium {
+        font-weight: 500;
+    }
+
     .m_semi,
     .m_semibold,
     .m_txt-semi,
@@ -6999,18 +7073,25 @@ select {
         font-weight: 600;
     }
 
-    .light,
-    .txt-light,
-    .font-light {
-        font-weight: 300;
+    .m_bold,
+    .m_txt-bold,
+    .m_font-bold {
+        font-weight: 700;
     }
 
-    .medium,
-    .txt-medium,
-    .font-medium {
-        font-weight: 500;
+    .m_extra-bold,
+    .m_font-extra-bold,
+    .m_txt-extra-bold,
+    .m_font-ultra-bold,
+    .m_txt-ultra-bold {
+        font-weight: 800;
     }
 
+    .m_black,
+    .m_txt-black,
+    .m_font-black {
+        font-weight: 900;
+    }
 
     .m_line-height-1 {
         line-height: 1;
@@ -7618,28 +7699,28 @@ select {
     border-inline-end: 1px solid var(--border-color)
 }
 .border-bottom-none {
-    border-bottom: none
+    border-bottom: none !important;
 }
 .border-top-none {
-    border-top: none
+    border-top: none !important
 }
 .border-start-none {
-    border-inline-start: none
+    border-inline-start: none !important
 }
 .border-end-none {
-    border-inline-end: none
+    border-inline-end: none !important
 }
 .border-inner-bottom-none>* {
-    border-bottom: none
+    border-bottom: none !important
 }
 .border-inner-top-none>* {
-    border-top: none
+    border-top: none !important
 }
 .border-inner-start-none>* {
-    border-inline-start: none
+    border-inline-start: none !important
 }
 .border-inner-end-none>* {
-    border-inline-end: none
+    border-inline-end: none !important
 }
 @media screen and (max-width: 910px) {
     .m_opacity-0 {
@@ -8104,35 +8185,35 @@ select {
     }
 
     .m_border-bottom-none {
-        border-bottom: none
+        border-bottom: none !important
     }
 
     .m_border-top-none {
-        border-top: none
+        border-top: none !important
     }
 
     .m_border-start-none {
-        border-inline-start: none
+        border-inline-start: none !important
     }
 
     .m_border-end-none {
-        border-inline-end: none
+        border-inline-end: none !important
     }
 
     .m_border-inner-bottom-none>* {
-        border-bottom: none
+        border-bottom: none !important
     }
 
     .m_border-inner-top-none>* {
-        border-top: none
+        border-top: none !important
     }
 
     .m_border-inner-start-none>* {
-        border-inline-start: none
+        border-inline-start: none !important
     }
 
     .m_border-inner-end-none>* {
-        border-inline-end: none
+        border-inline-end: none !important
     }
 }
 /* @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;400;500;600;700&display=swap"); */

package/dist/types/BagelForm.d.ts

@@ -5,6 +5,10 @@ export type AttributeFn<T = Record<string, any>> = (field: any, row: T) => Attri
 export interface Attributes<T = any> {
     [key: string]: AttributeValue | AttributeFn<T>;
 }
+export type BagelFieldOptions = (string | ({
+    label?: string;
+    value: string | number;
+} | string | number | Record<string, any>)[] | ((val: any, rowData?: Record<string, any>) => void));
 export interface BaseBagelField<T = Record<string, any>> {
     '$el'?: any;
     'id'?: string;
@@ -16,10 +20,7 @@ export interface BaseBagelField<T = Record<string, any>> {
     'required'?: boolean;
     'disabled'?: boolean;
     'helptext'?: string;
-    'options'?: string | ({
-        label?: string;
-        value: string | number;
-    } | string | number | Record<string, any>)[] | ((val: any, rowData?: Record<string, any>) => void);
+    'options'?: BagelFieldOptions;
     'defaultValue'?: any;
     'transform'?: (val?: any, rowData?: Record<string, any>) => any;
     'onUpdate'?: (val: any, rowData?: Record<string, any>) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.546",
+  "version": "0.0.552",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/DataPreview.vue

@@ -15,12 +15,12 @@ const props = defineProps<{
 
 const itemData = defineModel<Record<string, any>>('data', { default: {} })
 const computedSchema = $computed(() => {
-	console.log(itemData.value)
+	// console.log(itemData.value)
 	const schema = Object.keys(itemData.value)
 	if (props.showFields && props.showFields.length) {
 		return schema.filter((field: any) => props.showFields?.includes(field))
 	}
-	console.log(schema)
+	// console.log(schema)
 	return schema
 })
 </script>
@@ -33,7 +33,7 @@ const computedSchema = $computed(() => {
 				<div class="key">
 					{{ field?.label || keyToLabel(field.id) }}
 				</div>
-				<BglField v-model="itemData" label="" style="width: min-content; min-width: 140px" :field="field" />
+				<BglField v-model="itemData" label="" style="width: min-content; min-width: 140px" :field />
 			</div>
 		</template>
 		<div v-if="!schema?.length">

package/src/components/TableSchema.vue

@@ -1,28 +1,28 @@
 <script setup lang="ts">
-import { useSlots } from 'vue'
 import {
 	BglField,
 	type BglFormSchemaT,
 	MaterialIcon,
 	keyToLabel,
 } from '@bagelink/vue'
+import { useSlots } from 'vue'
 
 const props = defineProps<{
-	selecteItems?: string[]
+	selectedItems?: string[]
 	data: any[]
 	schema?: BglFormSchemaT | (() => BglFormSchemaT)
 	showFields?: string[]
 }>()
-const emit = defineEmits(['update:selecteItems', 'orderBy', 'select'])
+const emit = defineEmits(['update:selectedItems', 'orderBy', 'select'])
 const slots = useSlots()
 const loading = $ref(true)
 
-let selecteItems = $ref<string[]>(props.selecteItems || [])
+let selectedItems = $ref<string[]>(props.selectedItems || [])
 let selected = $computed({
-	get: () => selecteItems,
+	get: () => selectedItems,
 	set: (value: string[]) => {
-		selecteItems = value
-		emit('update:selecteItems', value)
+		selectedItems = value
+		emit('update:selectedItems', value)
 	},
 })
 
@@ -160,13 +160,13 @@ function sort(fieldname: string) {
 						<slot
 							v-if="field.id && slots[field.id]"
 							:name="field.id"
-							:row="row"
-							:field="field"
+							:row
+							:field
 						/>
 						<div v-else>
 							<BglField
 								class="embedded-field"
-								:field="field"
+								:field
 								:modelValue="row"
 								label=""
 							/>

package/src/components/form/BglField.vue

@@ -49,7 +49,7 @@ const fieldData = $computed({
 	},
 	get: () => {
 		if (props.field.id) return props.modelValue[props.field.id]
-		return props.field.defaultValue || ''
+		return props.field.defaultValue ?? ''
 	},
 })
 
@@ -62,6 +62,23 @@ const vIf = $computed(() => {
 	}
 	return true
 })
+
+const badTransform = /undefined|NaN|Invalid Date/
+const computedFieldData = $computed(
+	() => {
+		// region AVOID_TRANSFORMING_DATA_MULTIPLE_TIMES
+		// const alreadyTransformed = props.modelValue[props.field.id ?? ''] === fieldData
+		// if (alreadyTransformed) return fieldData
+		// return props.field.transform?.(fieldData, props.modelValue)
+		// endregion AVOID_TRANSFORMING_DATA_MULTIPLE_TIMES
+
+		// region CHECK_FOR_BAD_TRANSFORMS
+		const transformedData = props.field.transform?.(fieldData, props.modelValue)
+		if (badTransform.test(transformedData)) return fieldData
+		return transformedData
+		// endregion CHECK_FOR_BAD_TRANSFORMS
+	}
+)
 </script>
 
 <template>
@@ -83,7 +100,7 @@ const vIf = $computed(() => {
 		:helptext="field.helptext"
 		@update:modelValue="($event: any) => field?.onUpdate?.($event, formData)"
 	>
-		{{ field.transform?.(fieldData, modelValue) || fieldData || '' }}
+		{{ computedFieldData }}
 		<BglField
 			v-for="(child, ii) in field.children"
 			:key="child.id || ii"