@bagelink/vue 0.0.546 → 0.0.556

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(String(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"

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

@@ -85,4 +85,8 @@ onMounted(() => {
 .dp__time_input {
 	direction: ltr;
 }
+
+.ltrDateInput input {
+ direction: ltr;
+}
 </style>

package/src/components/form/inputs/RichText2/Toolbar.vue

@@ -1,39 +1,40 @@
 <script lang="ts" setup>
+import { Btn, type MaterialIcons } from '@bagelink/vue'
 import type { ToolbarConfig, ToolbarConfigOption } from './richtext-types'
-import {Btn, type MaterialIcons} from '@bagelink/vue'
+
 defineProps<{ config: ToolbarConfig }>()
 const emit = defineEmits(['action'])
 
 const colorPicker = $ref<HTMLInputElement | null>(null)
 const fontSizeInput = $ref<HTMLInputElement | null>(null)
 
-type toolbarOption = {
+interface toolbarOption {
 	name: ToolbarConfigOption
 	icon: MaterialIcons
 }
-const toolbarOptions:toolbarOption[] = [
-	{name: 'bold', icon: 'format_bold' },
-	{name: 'italic', icon: 'format_italic' },
-	{name: 'underline', icon: 'format_underlined' },
-	{name: 'fontSize', icon: 'format_size' },
-	{name: 'fontFamily', icon: 'font_download' },
-	{name: 'textColor', icon: 'text_format' },
-	{name: 'backgroundColor', icon: 'format_color_fill' },
-	{name: 'alignLeft', icon: 'format_align_left' },
-	{name: 'alignCenter', icon: 'format_align_center' },
-	{name: 'alignRight', icon: 'format_align_right' },
-	{name: 'alignJustify', icon: 'format_align_justify' },
-	{name: 'orderedList', icon: 'format_list_numbered' },
-	{name: 'unorderedList', icon: 'format_list_bulleted' },
-	{name: 'indent', icon: 'format_indent_increase' },
-	{name: 'outdent', icon: 'format_indent_decrease' },
-	{name: 'link', icon: 'link' },
-	{name: 'image', icon: 'image' },
-	{name: 'table', icon: 'table_chart' },
-	{name: 'blockquote', icon: 'format_quote' },
-	{name: 'codeBlock', icon: 'code' },
-	{name: 'splitView', icon: 'splitscreen_right' },
-	{name: 'codeView', icon: 'code' },
+const toolbarOptions: toolbarOption[] = [
+	{ name: 'bold', icon: 'format_bold' },
+	{ name: 'italic', icon: 'format_italic' },
+	{ name: 'underline', icon: 'format_underlined' },
+	{ name: 'fontSize', icon: 'format_size' },
+	{ name: 'fontFamily', icon: 'font_download' },
+	{ name: 'textColor', icon: 'text_format' },
+	{ name: 'backgroundColor', icon: 'format_color_fill' },
+	{ name: 'alignLeft', icon: 'format_align_left' },
+	{ name: 'alignCenter', icon: 'format_align_center' },
+	{ name: 'alignRight', icon: 'format_align_right' },
+	{ name: 'alignJustify', icon: 'format_align_justify' },
+	{ name: 'orderedList', icon: 'format_list_numbered' },
+	{ name: 'unorderedList', icon: 'format_list_bulleted' },
+	{ name: 'indent', icon: 'format_indent_increase' },
+	{ name: 'outdent', icon: 'format_indent_decrease' },
+	{ name: 'link', icon: 'link' },
+	{ name: 'image', icon: 'image' },
+	{ name: 'table', icon: 'table_chart' },
+	{ name: 'blockquote', icon: 'format_quote' },
+	{ name: 'codeBlock', icon: 'code' },
+	{ name: 'splitView', icon: 'splitscreen_right' },
+	{ name: 'codeView', icon: 'code' },
 ]
 
 function handleColorPick(type: 'textColor' | 'backgroundColor') {
@@ -54,16 +55,15 @@ function handleFontSizeChange() {
 <template>
 	<div class="toolbar" role="toolbar">
 		<Btn
-		thin
-			color="light"
-			v-for="action in toolbarOptions.filter(t=>config.includes(t.name))"
+			v-for="action in toolbarOptions.filter(t => config.includes(t.name))"
 			:key="action.name"
-			:aria-label="action.name"
 			v-tooltip="action.name"
-			@click="emit('action', action.name)"
+			thin
+			color="light"
+			:aria-label="action.name"
 			:icon="action.icon"
-		>
-		</Btn>
+			@click="emit('action', action.name)"
+		/>
 		<input
 			v-if="config.includes('textColor') || config.includes('backgroundColor')"
 			ref="colorPicker"

package/src/components/formkit/FileUploader.vue

@@ -62,7 +62,7 @@ function emitValue() {
 	// const fileValues = files.map((f) => f.serverFile?.id);
 	const relationshipObjKey = props.context.attrs?.relationshipObjKey
 	if (!computedMultiple) return props.context.node.input(relationshipObjKey ? files[0].serverFile.id : files[0].serverFile)
-	// eslint-disable-next-line no-alert
+
 	alert('not implemented')
 }
 

package/src/styles/appearance.css

@@ -464,35 +464,35 @@
 }
 
 .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
 }
 
 
@@ -960,34 +960,34 @@
     }
 
     .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
     }
 }

package/src/styles/layout.css

@@ -203,8 +203,6 @@
     bottom: 4rem;
 }
 
-
-
 .auto-flow-rows {
     grid-auto-flow: row;
 }
@@ -1873,6 +1871,30 @@
     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;
 }

package/src/styles/mobilLayout.css

@@ -77,7 +77,7 @@
     }
 
     .m_align-items-center {
-        align-items: center;
+        align-items: center !important;
     }
 
     .m_align-items-end {
@@ -1729,6 +1729,29 @@
     .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;
@@ -1742,15 +1765,15 @@
         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;
     }
 

package/src/styles/text.css

@@ -164,10 +164,18 @@
     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,
@@ -176,6 +184,12 @@
     font-weight: 400;
 }
 
+.medium,
+.txt-medium,
+.font-medium {
+    font-weight: 500;
+}
+
 .semi,
 .semibold,
 .txt-semi,
@@ -186,18 +200,25 @@
     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;
@@ -521,10 +542,18 @@
         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,
@@ -533,6 +562,12 @@
         font-weight: 400;
     }
 
+    .m_medium,
+    .m_txt-medium,
+    .m_font-medium {
+        font-weight: 500;
+    }
+
     .m_semi,
     .m_semibold,
     .m_txt-semi,
@@ -543,18 +578,25 @@
         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;

package/src/types/BagelForm.ts

@@ -8,6 +8,20 @@ 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
@@ -19,7 +33,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/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"}