@bagelink/vue 1.4.87 → 1.4.91

package/src/styles/buttons.css

@@ -1,144 +1,140 @@
 .bgl_btn,
 .bgl_flatBtn,
 .bgl_btn-icon {
-	font-family: inherit;
-	white-space: nowrap;
-	cursor: pointer;
-	box-sizing: border-box;
-	user-select: none;
-	border: none;
-	transition: var(--bgl-transition);
-	border-radius: var(--btn-border-radius);
-	line-height: var(--btn-height);
-	font-size: var(--input-font-size);
-	display: inline-block;
-	height: var(--btn-height);
-	padding: 0;
+    font-family: inherit;
+    white-space: nowrap;
+    cursor: pointer;
+    box-sizing: border-box;
+    user-select: none;
+    border: none;
+    transition: var(--bgl-transition);
+    border-radius: var(--btn-border-radius);
+    line-height: var(--btn-height);
+    font-size: var(--input-font-size);
+    display: inline-block;
+    height: var(--btn-height);
+    padding: 0;
 }
 
 .btn-close {
-	margin-top: -20px;
-	margin-inline-end: -20px;
-	margin-inline-start: auto;
-	margin-bottom: 15px;
-	transition: var(--bgl-transition);
-	height: 30px;
-	width: 30px;
-	opacity: 0.6;
-	cursor: pointer;
-	border-radius: 100%;
-	outline: 2px solid transparent;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+    margin-top: -20px;
+    margin-inline-end: -20px;
+    margin-inline-start: auto;
+    margin-bottom: 15px;
+    transition: var(--bgl-transition);
+    height: 30px;
+    width: 30px;
+    opacity: 0.6;
+    cursor: pointer;
+    border-radius: 100%;
+    outline: 2px solid transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .btn-close:hover {
-	background: var(--bgl-gray-light);
-	opacity: 1;
+    background: var(--bgl-gray-light);
+    opacity: 1;
 }
 
 .btn-close:active {
-	background: var(--bgl-gray);
+    background: var(--bgl-gray);
 }
 
 .btn-close::before {
-	content: 'close';
-	font-family: 'Material Symbols Outlined', serif;
+    content: 'close';
+    font-family: 'Material Symbols Outlined', serif;
 }
 
-.bgl_btn.thin {
-	height: calc(var(--btn-height) * 0.7);
-	line-height: calc(var(--btn-height) * 0.7);
-}
 
 .hover {
-	cursor: pointer;
-	transition: all 400ms ease;
+    cursor: pointer;
+    transition: all 400ms ease;
 }
 
 .hover:hover {
-	filter: brightness(90%);
+    filter: brightness(90%);
 }
 
 .hover:active {
-	filter: brightness(80%);
+    filter: brightness(80%);
 }
 
 .border {
-	border: 1px solid var(--border-color);
+    border: 1px solid var(--border-color);
 }
 
 .border-primary {
-	border: 1px solid var(--bgl-primary);
+    border: 1px solid var(--bgl-primary);
 }
 
 .outline {
-	outline: 1px solid var(--border-color);
+    outline: 1px solid var(--border-color);
 }
 
 .outline-dashed {
-	outline: 2px dashed var(--border-color);
+    outline: 2px dashed var(--border-color);
 }
 
 .outline-primary {
-	outline: 1px solid var(--bgl-primary);
+    outline: 1px solid var(--bgl-primary);
 }
 
 .rotate-270 {
-	transform: rotate(270deg);
+    transform: rotate(270deg);
 }
 
 .rotate-180 {
-	transform: rotate(180deg);
+    transform: rotate(180deg);
 }
 
 .rotate-90 {
-	transform: rotate(90deg);
+    transform: rotate(90deg);
 }
 
 .rotate-0 {
-	transform: rotate(0deg) !important;
+    transform: rotate(0deg) !important;
 }
 
 @media screen and (max-width: 910px) {
-	.bgl_btn {
-		padding: 0 20px;
-	}
+    .bgl_btn {
+        padding: 0 20px;
+    }
 
-	.m_border {
-		border: 1px solid var(--border-color);
-	}
+    .m_border {
+        border: 1px solid var(--border-color);
+    }
 
-	.m_rotate-270 {
-		transform: rotate(270deg);
-	}
+    .m_rotate-270 {
+        transform: rotate(270deg);
+    }
 
-	.m_rotate-180 {
-		transform: rotate(180deg);
-	}
+    .m_rotate-180 {
+        transform: rotate(180deg);
+    }
 
-	.m_rotate-90 {
-		transform: rotate(90deg);
-	}
+    .m_rotate-90 {
+        transform: rotate(90deg);
+    }
 
-	.m_rotate-0 {
-		transform: rotate(0deg) !important;
-	}
+    .m_rotate-0 {
+        transform: rotate(0deg) !important;
+    }
 }
 
 .ripple {
-	position: absolute;
-	border-radius: 50%;
-	transform: scale(0);
-	background: rgba(0, 0, 0, 0.3);
-	pointer-events: none;
-	animation: rippleEffect 0.6s ease-out;
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    background: rgba(0, 0, 0, 0.3);
+    pointer-events: none;
+    animation: rippleEffect 0.6s ease-out;
 }
 
 @keyframes rippleEffect {
-	to {
-		transform: scale(4);
-		opacity: 0;
-	}
-}
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}

package/src/types/BagelForm.ts

@@ -84,6 +84,7 @@ export interface ElementField<
 	style?: Record<string, any>
 	attrs?: Record<string, any>
 	onClick?: () => void
+	transform?: (val?: any, rowData?: T) => any
 	children?: ElementField<T, PO>[]
 }
 
@@ -108,8 +109,8 @@ export interface BaseBagelField<
 	'disabled'?: boolean
 	'helptext'?: string
 	'options'?: BagelFieldOptions<T, P>
-	'children'?: SchemaChild<T, P, PO>[]
-	'slots'?: { [key: string]: SchemaChild<T, P, PO>[] }
+	'children'?: SchemaChild<T, Path<T, PO>, PO>[]
+	'slots'?: { [key: string]: SchemaChild<T, Path<T, PO>, PO>[] }
 	'defaultValue'?: any
 	'vIf'?: VIfType<T, P>
 	'v-if'?: VIfType<T, P>
@@ -147,15 +148,20 @@ export type BglFieldT<
 	PO extends PathsOptions = DefaultPathsOptions,
 > = Field<T, PO>
 
+export type SchemaField<
+	T,
+	PO extends PathsOptions = DefaultPathsOptions,
+> = Field<T, PO> | ElementField<T, PO>
+
 export type BglFormSchemaT<
 	T,
 	PO extends PathsOptions = DefaultPathsOptions,
-> = Field<T, PO>[]
+> = SchemaField<T, PO>[]
 
 export type ShallowBglFormSchemaT<
 	T,
 	PO extends PathsOptions = ShallowPathsOptions,
-> = Field<T, PO>[]
+> = SchemaField<T, PO>[]
 
 export interface InputBagelField<
 	T,

package/src/utils/BagelFormUtils.ts

@@ -74,6 +74,7 @@ export function richText<
 		id,
 		label,
 		vIf: options?.vIf,
+		transform: options?.transform,
 		placeholder: options?.placeholder,
 		attrs: {
 			height: options?.height,
@@ -103,6 +104,8 @@ export function txtField<
 		defaultValue: options?.defaultValue,
 		validate: options?.validate,
 		onUpdate: options?.onUpdate,
+		helptext: options?.helptext,
+		transform: options?.transform,
 		attrs: {
 			type: options?.type,
 			pattern: options?.pattern,
@@ -137,6 +140,9 @@ export function selectField<
 		label,
 		defaultValue: config?.defaultValue,
 		vIf: config?.vIf,
+		validate: config?.validate,
+		onUpdate: config?.onUpdate,
+		transform: config?.transform,
 		attrs: {
 			disabled: config?.disabled,
 			searchable: config?.searchable,
@@ -169,6 +175,7 @@ export function checkField<
 		required: options?.required,
 		id,
 		label,
+		transform: options?.transform,
 		attrs: {
 			value: options?.value,
 		},
@@ -197,6 +204,7 @@ export function emailField<
 		class: options?.class,
 		required: options?.required,
 		vIf: options?.vIf,
+		transform: options?.transform,
 		attrs: {
 			autocorrect: options?.autocorrect,
 			serverValidate: options?.serverValidate,
@@ -224,6 +232,7 @@ export function dateField<
 		label,
 		defaultValue: options?.defaultValue,
 		vIf: options?.vIf,
+		transform: options?.transform,
 		attrs: {
 			disabled: options?.disabled,
 			autocomplete: options?.autocomplete,
@@ -255,6 +264,7 @@ export function numField<
 		placeholder: options?.placeholder,
 		helptext: options?.helptext,
 		vIf: options?.vIf,
+		transform: options?.transform,
 		attrs: {
 			autocomplete: options?.autocomplete,
 			step: options?.step,
@@ -298,6 +308,7 @@ export function uploadField<
 		id,
 		label,
 		vIf: options?.vIf,
+		transform: options?.transform,
 		attrs: {
 			...options,
 		},
@@ -327,6 +338,7 @@ export function rangeField<
 		id,
 		label,
 		vIf: options?.vIf,
+		transform: options?.transform,
 		attrs: {
 			autocomplete: options?.autocomplete,
 			min: options?.min,
@@ -373,6 +385,7 @@ export function telField<
 		vIf: options?.vIf,
 		attrs: options,
 		class: options?.class,
+		transform: options?.transform,
 	}
 }
 
@@ -392,6 +405,7 @@ export function colorField<
 		vIf: options?.vIf,
 		attrs: options,
 		class: options?.class,
+		transform: options?.transform,
 	}
 }
 
@@ -449,6 +463,7 @@ export function arrField<
 		class: options?.class,
 		$el: 'array',
 		vIf: options?.vIf,
+		transform: options?.transform,
 		attrs,
 	}
 }

package/src/utils/elementUtils.ts

@@ -30,6 +30,7 @@ export interface TxtElementOptions<
 	weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold'
 	color?: string
 	align?: 'left' | 'center' | 'right' | 'justify'
+	transform?: (val?: any, rowData?: T) => any
 }
 
 export interface ImgElementOptions<
@@ -302,6 +303,7 @@ export function txt<
 			color: finalOptions.color,
 			align: finalOptions.align,
 		},
+		transform: finalOptions.transform,
 	}
 }