@bagelink/vue 0.0.556 → 0.0.558

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,MAAM,UAAU,CAAA;AAG1C,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,OAS7F;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAM9C;AAED,eAAO,MAAM,SAAS,cAAe,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,YAAY,MAAM,QAAqD,CAAA;AAE/H,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAG1C,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,eAAO,MAAM,SAAS,cAAe,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,YAAY,MAAM,QAAqD,CAAA;AAE/H,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA"}

package/package.json

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

package/src/components/Btn.vue

@@ -83,11 +83,11 @@ const themes: Partial<{ [key in ThemeType]: typeof computedDefaultColors }> = {
 }
 
 const cumputedTextColor = $computed(
-	() => (themes[computedTheme as ThemeType]?.color || computedDefaultColors.color),
+	() => (themes[computedTheme as ThemeType]?.color ?? computedDefaultColors.color),
 )
 
 const computedBackgroundColor = $computed(
-	() => (themes[computedTheme as ThemeType]?.backgroundColor || computedDefaultColors.backgroundColor),
+	() => (themes[computedTheme as ThemeType]?.backgroundColor ?? computedDefaultColors.backgroundColor),
 )
 </script>
 

package/src/components/TableSchema.vue

@@ -31,6 +31,8 @@ function selectElement(item: Record<string, any>) { emit('select', item) }
 let sortDirection = $ref('ASC')
 let sortField = $ref('')
 
+const computedSortField = $computed(() => `_transformed_${sortField}`)
+
 function getFallbackSchema() {
 	const keys = [
 		...new Set((props.data || []).map(Object.keys).flat()),
@@ -40,7 +42,7 @@ function getFallbackSchema() {
 		label: keyToLabel(id),
 	}))
 	return props.showFields
-		? schema.filter(f => props.showFields?.includes(f.id as string) || !f.id)
+		? schema.filter(f => props.showFields?.includes(f.id as string) ?? !f.id)
 		: schema
 }
 
@@ -64,10 +66,11 @@ function transform(rowData: any) {
 	for (const field of fields) {
 		const fieldData = rowData[`${field.id}`]
 
-		const newFieldVal = field.transform?.(fieldData, rowData) || fieldData || ''
+		const newFieldVal = field.transform?.(fieldData, rowData)
 
 		Object.assign(obj, {
-			[`${field.id}`]: newFieldVal
+			[`${field.id}`]: fieldData,
+			[`_transformed_${field.id}`]: newFieldVal
 		})
 	}
 	return obj
@@ -77,8 +80,8 @@ const computedData = $computed(() => {
 	const dta = [...props.data].map(transform)
 	if (sortField as string) {
 		return dta.sort((a, b) => {
-			const aValue = a[sortField]
-			const bValue = b[sortField]
+			const aValue = a[computedSortField] ?? ''
+			const bValue = b[computedSortField] ?? ''
 			const numAValue = Number.parseInt(aValue, 10)
 			const numBValue = Number.parseInt(bValue, 10)
 			if (!Number.isNaN(numAValue) && !Number.isNaN(numBValue)) {
@@ -150,10 +153,7 @@ function sort(fieldname: string) {
 					@click="selectElement(row)"
 				>
 					<td
-						v-for="field in computedSchema.map((c) => ({
-							...c,
-							transform: undefined,
-						}))"
+						v-for="field in computedSchema"
 						:key="`${field.id}-${row.id}`"
 						class="col"
 					>

package/src/components/form/BglField.vue

@@ -30,7 +30,7 @@ const is = $computed(() => {
 	if (props.field.$el === 'check') return CheckInput
 	if (props.field.$el === 'richtext') return RichText
 	if (props.field.$el === 'date') return DateInput
-	return props.field.$el || 'div'
+	return props.field.$el ?? 'div'
 })
 
 const formData = $computed({
@@ -63,40 +63,37 @@ 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
+	() => props.field.transform?.(fieldData, props.modelValue) ?? fieldData
+)
 
-		// 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
-	}
+const computedOptions = $computed(
+	() => bindAttrs({ options: props.field.options }, fieldData, props.modelValue).options
+)
+
+const computedAttrs = $computed(
+	() => bindAttrs(props.field.attrs || {}, fieldData, props.modelValue)
+)
+
+const computedClass = $computed(
+	() => classify(fieldData, props.modelValue, props.field.class, props.field.attrs?.class)
 )
 </script>
 
 <template>
 	<component
-		v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
+		v-bind="computedAttrs"
 		:is="is"
 		v-if="vIf"
 		:id="field.id"
 		v-model="fieldData"
 		:required="field.required"
-		:class="classify(fieldData, modelValue, field.class, field.attrs?.class)"
+		:class="computedClass"
 		:label="field.label"
 		:placeholder="field.placeholder || field.label"
 		:defaultValue="field.defaultValue"
 		:disabled="field.disabled"
-		:options="
-			bindAttrs({ options: field.options }, fieldData, modelValue).options
-		"
+		:options="computedOptions"
 		:helptext="field.helptext"
 		@update:modelValue="($event: any) => field?.onUpdate?.($event, formData)"
 	>

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

@@ -12,6 +12,7 @@ interface toolbarOption {
 	name: ToolbarConfigOption
 	icon: MaterialIcons
 }
+
 const toolbarOptions: toolbarOption[] = [
 	{ name: 'bold', icon: 'format_bold' },
 	{ name: 'italic', icon: 'format_italic' },

package/src/components/form/inputs/RichText2/formatting.ts

@@ -1,3 +1,5 @@
+import { useModal } from '@bagelink/vue'
+
 export function applyFormatting(command: string, value: string = '') {
 	const selection = window.getSelection()
 	if (selection && selection.rangeCount > 0) {
@@ -74,7 +76,7 @@ export function applyFormatting(command: string, value: string = '') {
 			case 'insertLink':
 				insertLink()
 				break
-			case 'insertImage':
+			case 'image':
 				insertImage()
 				break
 			case 'createTable':
@@ -153,17 +155,21 @@ export function insertLink() {
 }
 
 export function insertImage() {
-	const url = prompt('Enter the image URL:')
-	if (url) {
-		const selection = window.getSelection()
-		if (selection && selection.rangeCount > 0) {
-			const range = selection.getRangeAt(0)
-			const img = document.createElement('img')
-			img.src = url
-			range.deleteContents()
-			range.insertNode(img)
-		}
-	}
+	console.log('image')
+	const { showModalForm } = useModal()
+	console.log(showModalForm)
+	showModalForm({ title: 'Upload Image', schema: [{ id: 'image', type: 'file' }], onSubmit: (data) => {} })
+	// const url = prompt('Enter the image URL:')
+	// if (url) {
+	// 	const selection = window.getSelection()
+	// 	if (selection && selection.rangeCount > 0) {
+	// 		const range = selection.getRangeAt(0)
+	// 		const img = document.createElement('img')
+	// 		img.src = url
+	// 		range.deleteContents()
+	// 		range.insertNode(img)
+	// 	}
+	// }
 }
 
 export function createTable() {

package/src/styles/layout.css

@@ -26,6 +26,10 @@
     border-radius: 0 ;
 }
 
+.oval{
+    border-radius: 100% ;
+}
+
 .flex-center {
     justify-content: center;
     align-items: center;
@@ -155,14 +159,142 @@
     inset-inline-start: 0;
     inset-inline-end: 0;
 }
-
 .inset-inline-start, .start{
     inset-inline-start: 0;
 }
 
+.start-1{
+    inset-inline-start: 1rem;
+}
+
+.start-2{
+    inset-inline-start: 2rem;
+}
+
+.start-3{
+    inset-inline-start: 3rem;
+}
+
+.start-4{
+    inset-inline-start: 4rem;
+}
+
+.start-5{
+    inset-inline-start: 5rem;
+}
+
+.start-6{
+    inset-inline-start: 6rem;
+}
+
+.start-7{
+    inset-inline-start: 7rem;
+}
+
+.start-8{
+    inset-inline-start: 8rem;
+}
+
+.-start-1{
+    inset-inline-start: -1rem;
+}
+
+.-start-2{
+    inset-inline-start: -2rem;
+}
+
+.-start-3{
+    inset-inline-start: -3rem;
+}
+
+.-start-4{
+    inset-inline-start: -4rem;
+}
+
+.-start-5{
+    inset-inline-start: -5rem;
+}
+
+.-start-6{
+    inset-inline-start: -6rem;
+}
+
+.-start-7{
+    inset-inline-start: -7rem;
+}
+
+.-start-8{
+    inset-inline-start: -8rem;
+}
+
 .inset-inline-end, .end{
     inset-inline-end: 0;
 }
+
+.end-1{
+    inset-inline-end: 1rem;
+}
+
+.end-2{
+    inset-inline-end: 2rem;
+}
+
+.end-3{
+    inset-inline-end: 3rem;
+}
+
+.end-4{
+    inset-inline-end: 4rem;
+}
+
+.end-5{
+    inset-inline-end: 5rem;
+}
+
+.end-6{
+    inset-inline-end: 6rem;
+}
+
+.end-7{
+    inset-inline-end: 7rem;
+}
+
+.end-8{
+    inset-inline-end: 8rem;
+}
+
+.-end-1{
+    inset-inline-end: -1rem;
+}
+
+.-end-2{
+    inset-inline-end: -2rem;
+}
+
+.-end-3{
+    inset-inline-end: -3rem;
+}
+
+.-end-4{
+    inset-inline-end: -4rem;
+}
+
+.-end-5{
+    inset-inline-end: -5rem;
+}
+
+.-end-6{
+    inset-inline-end: -6rem;
+}
+
+.-end-7{
+    inset-inline-end: -7rem;
+}
+
+.-end-8{
+    inset-inline-end: -8rem;
+}
+
 .top, .top-0{
     top: 0;
 }
@@ -183,6 +315,54 @@
     top: 4rem;
 }
 
+.top-5{
+    top: 5rem;
+}
+
+.top-6{
+    top: 6rem;
+}
+
+.top-7{
+    top: 7rem;
+}
+
+.top-8{
+    top: 8rem;
+}
+
+.-top-1{
+    top: -1rem;
+}
+
+.-top-2{
+    top: -2rem;
+}
+
+.-top-3{
+    top: -3rem;
+}
+
+.-top-4{
+    top: -4rem;
+}
+
+.-top-5{
+    top: -5rem;
+}
+
+.-top-6{
+    top: -6rem;
+}
+
+.-top-7{
+    top: -7rem;
+}
+
+.-top-8{
+    top: -8rem;
+}
+
 .bottom, .bottom-0{
     bottom: 0;
 }
@@ -203,6 +383,55 @@
     bottom: 4rem;
 }
 
+.bottom-5{
+    bottom: 5rem;
+}
+
+.bottom-6{
+    bottom: 6rem;
+}
+
+.bottom-7{
+    bottom: 7rem;
+}
+
+.bottom-8{
+    bottom: 8rem;
+}
+
+.-bottom-1{
+    bottom: -1rem;
+}
+
+.-bottom-2{
+    bottom: -2rem;
+}
+
+.-bottom-3{
+    bottom: -3rem;
+}
+
+.-bottom-4{
+    bottom: -4rem;
+}
+
+.-bottom-5{
+    bottom: -5rem;
+}
+
+.-bottom-6{
+    bottom: -6rem;
+}
+
+.-bottom-7{
+    bottom: -7rem;
+}
+
+.-bottom-8{
+    bottom: -8rem;
+}
+
+
 .auto-flow-rows {
     grid-auto-flow: row;
 }