@bagelink/vue 0.0.1035 → 0.0.1041

package/dist/utils/BagelFormUtils.d.ts

@@ -6,6 +6,7 @@ interface InputOptions {
     defaultValue?: string;
     disabled?: boolean;
     helptext?: string;
+    vIf?: boolean | ((item: any, row: any) => boolean);
 }
 type DateOptions = InputOptions;
 interface TextInputOptions extends InputOptions {
@@ -32,6 +33,7 @@ export declare function richText(id: string, label?: string, options?: RichTextO
     required: boolean | undefined;
     id: string;
     label: string | undefined;
+    vIf: boolean | ((item: any, row: any) => boolean) | undefined;
     placeholder: string | undefined;
     attrs: {};
 };
@@ -52,7 +54,17 @@ export declare function uploadField(id: string, label?: string, options?: Upload
     $el: string;
     id: string;
     label: string | undefined;
-    attrs: UploadOptions | undefined;
+    vIf: boolean | ((item: any, row: any) => boolean) | undefined;
+    attrs: {
+        multiple?: boolean;
+        required?: boolean;
+        placeholder?: string;
+        class?: string;
+        defaultValue?: string;
+        disabled?: boolean;
+        helptext?: string;
+        vIf?: boolean | ((item: any, row: any) => boolean);
+    };
 };
 export declare function bglForm(idOrField?: string | Field, ...schema: Field[]): {
     $el: import('vue').Raw<{
@@ -74,8 +86,8 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             submit: () => void;
             validateForm: () => boolean;
             deleteItem: () => void;
-            isDirty: import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<false> | import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<true>;
-            clearForm: () => {};
+            isDirty: import('vue').Ref<boolean, boolean>;
+            clearForm: () => void;
         }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
             submit: (...args: any[]) => void;
             "update:modelValue": (...args: any[]) => void;
@@ -109,8 +121,8 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             submit: () => void;
             validateForm: () => boolean;
             deleteItem: () => void;
-            isDirty: import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<false> | import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<true>;
-            clearForm: () => {};
+            isDirty: import('vue').Ref<boolean, boolean>;
+            clearForm: () => void;
         }, {}, {}, {}, {
             modelValue: {
                 [key: string]: any;
@@ -137,8 +149,8 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
         submit: () => void;
         validateForm: () => boolean;
         deleteItem: () => void;
-        isDirty: import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<false> | import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<true>;
-        clearForm: () => {};
+        isDirty: import('vue').Ref<boolean, boolean>;
+        clearForm: () => void;
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
         submit: (...args: any[]) => void;
         "update:modelValue": (...args: any[]) => void;
@@ -151,12 +163,12 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
         $slots: {
             submit?(_: {
                 submit: () => void;
-                isDirty: import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<false> | import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<true>;
+                isDirty: boolean;
                 validateForm: () => boolean;
             }): any;
             submit?(_: {
                 submit: () => void;
-                isDirty: import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<false> | import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<true>;
+                isDirty: boolean;
                 validateForm: () => boolean;
             }): any;
             success?(_: {}): any;
@@ -189,8 +201,8 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             submit: () => void;
             validateForm: () => boolean;
             deleteItem: () => void;
-            isDirty: import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<false> | import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<true>;
-            clearForm: () => {};
+            isDirty: import('vue').Ref<boolean, boolean>;
+            clearForm: () => void;
         }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
             submit: (...args: any[]) => void;
             "update:modelValue": (...args: any[]) => void;
@@ -224,8 +236,8 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             submit: () => void;
             validateForm: () => boolean;
             deleteItem: () => void;
-            isDirty: import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<false> | import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<true>;
-            clearForm: () => {};
+            isDirty: import('vue').Ref<boolean, boolean>;
+            clearForm: () => void;
         }, {}, {}, {}, {
             modelValue: {
                 [key: string]: any;
@@ -252,8 +264,8 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
         submit: () => void;
         validateForm: () => boolean;
         deleteItem: () => void;
-        isDirty: import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<false> | import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<true>;
-        clearForm: () => {};
+        isDirty: import('vue').Ref<boolean, boolean>;
+        clearForm: () => void;
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
         submit: (...args: any[]) => void;
         "update:modelValue": (...args: any[]) => void;
@@ -266,12 +278,12 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
         $slots: {
             submit?(_: {
                 submit: () => void;
-                isDirty: import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<false> | import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<true>;
+                isDirty: boolean;
                 validateForm: () => boolean;
             }): any;
             submit?(_: {
                 submit: () => void;
-                isDirty: import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<false> | import('@vue-macros/reactivity-transform/macros.js').ReactiveVariable<true>;
+                isDirty: boolean;
                 validateForm: () => boolean;
             }): any;
             success?(_: {}): any;
@@ -297,6 +309,7 @@ export declare function arrField(id: string, label: string, schema: BglFormSchem
     label: string;
     id: string;
     $el: string;
+    vIf: boolean | ((item: any, row: any) => boolean) | undefined;
     attrs: {
         delete: boolean;
         add: boolean;
@@ -306,6 +319,7 @@ export declare function arrField(id: string, label: string, schema: BglFormSchem
         defaultValue?: string;
         disabled?: boolean;
         helptext?: string;
+        vIf?: boolean | ((item: any, row: any) => boolean);
         schema: BglFormSchemaT;
     };
 };

package/dist/utils/BagelFormUtils.d.ts.map

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

package/package.json

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

package/src/components/BglComponent.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import {
+	CheckInput,
+	DateInput,
+	FieldArray,
+	type Field,
+	FileUpload,
+	RichText,
+	SelectInput,
+	TextInput,
+	ToggleInput,
+	bindAttrs,
+	classify,
+	NumberInput,
+	UploadInput,
+	BglForm,
+	TabsNav,
+} from '@bagelink/vue'
+
+const props = defineProps<{
+	field: Field<T>
+	id?: string
+	modelValue?: any
+	parentPath?: string
+}>()
+
+const emit = defineEmits<{
+	'update:modelValue': [value: any]
+}>()
+
+const customAttrs = $ref<{ [key: string]: any }>({})
+
+const is = $computed(() => {
+	if (props.field.$el === 'text') return TextInput
+	if (props.field.$el === 'textarea') {
+		customAttrs.multiline = true
+		return TextInput
+	}
+	if (props.field.$el === 'number') return NumberInput
+	if (props.field.$el === 'array') return FieldArray
+	if (props.field.$el === 'select') return SelectInput
+	if (props.field.$el === 'toggle') return ToggleInput
+	if (props.field.$el === 'check') return CheckInput
+	if (props.field.$el === 'richtext') return RichText
+	if (props.field.$el === 'upload') return UploadInput
+	if (props.field.$el === 'file') return FileUpload
+	if (props.field.$el === 'date') return DateInput
+	if (props.field.$el === 'tabs') return TabsNav
+	if (props.field.$el === 'form') return BglForm
+	return props.field.$el ?? 'div'
+})
+
+function getFieldData(path?: string) {
+	if (!path) return ''
+	const keys = path.split(/[.[]/)
+	let current = props.modelValue as any
+
+	for (let i = 0; i < keys.length; i++) {
+		const key = keys[i]
+		if (!current || typeof current !== 'object' || !(key in current)) {
+			return ''
+		}
+		current = current[key]
+	}
+	return current ?? ''
+}
+function safeClone(obj: any): any {
+	if (obj === null || typeof obj !== 'object') return obj
+
+	const seen = new WeakSet()
+	return JSON.parse(JSON.stringify(obj, (key, value) => {
+		if (typeof value === 'object' && value !== null) {
+			if (seen.has(value)) {
+				return undefined // Remove circular reference
+			}
+			seen.add(value)
+		}
+		return value
+	}))
+}
+function updateField(path: string, value: any) {
+	const keys = path.split(/[.[]/)
+
+	let current = props.modelValue ?? {} as any
+
+	// Build the path, ensuring each level is an object
+	for (let i = 0; i < keys.length - 1; i++) {
+		const key = keys[i]
+		if (!(key in current) || typeof current[key] !== 'object' || current[key] === null) {
+			current[key] = {}
+		}
+		current = current[key]
+	}
+
+	// Safely clone the value to remove circular references
+	const safeValue = safeClone(value)
+	current[keys[keys.length - 1]] = safeValue
+}
+
+const fieldData = $computed({
+	get: () => {
+		if (!props.id) return props.modelValue ?? props.field.defaultValue ?? (props.field.$el === 'form' ? {} : '')
+		const value = getFieldData(props.id)
+		if (props.field.$el === 'form' && !value) return {}
+		return value ?? ''
+	},
+	set: (val: any) => {
+		if (!props.id) return
+		const currentValue = getFieldData(props.id)
+		if (JSON.stringify(val) === JSON.stringify(currentValue)) return
+
+		emit('update:modelValue', val)
+		if (props.field.onUpdate) {
+			props.field.onUpdate(val, currentValue)
+		}
+		updateField(props.id, val)
+	}
+})
+
+const vIf = $computed(() => {
+	if (props.field['v-if'] === undefined && props.field.vIf === undefined) return true
+	if (typeof props.field['v-if'] === 'boolean' || typeof props.field.vIf === 'boolean') return props.field['v-if']
+	if (typeof props.field['v-if'] === 'string' || typeof props.field.vIf === 'string') return true
+	if (typeof props.field['v-if'] === 'function') return props.field['v-if'](fieldData, props.modelValue as T)
+	if (typeof props.field.vIf === 'function') return props.field.vIf(fieldData, props.modelValue as T)
+	return true
+})
+
+const computedOptions = $computed(
+	() => bindAttrs({ options: props.field.options }, fieldData, props.modelValue).options
+)
+
+const computedAttrs = $computed(() => {
+	const attrs = { ...customAttrs, ...props.field.attrs }
+	return bindAttrs(attrs, fieldData, props.modelValue)
+})
+
+const computedClass = $computed(
+	() => classify(fieldData, props.modelValue, props.field.class, props.field.attrs?.class)
+)
+</script>
+
+<template>
+	<component
+		v-bind="computedAttrs"
+		:is="is"
+		v-if="vIf"
+		:id="props.id"
+		v-model="fieldData"
+		:required="field.required"
+		:class="computedClass"
+		:label="field.label"
+		:placeholder="field.placeholder || field.label"
+		:defaultValue="field.defaultValue"
+		:disabled="field.disabled"
+		:options="computedOptions"
+		:helptext="field.helptext"
+		:schema="field.attrs?.schema ?? undefined"
+	>
+		<template v-if="field.$el === 'form'">
+			<slot />
+		</template>
+		<template v-else>
+			{{ fieldData }}
+			<BglComponent
+				v-for="(child, ii) in field.children"
+				:id="[props.id, child.id].filter(Boolean).join('.')"
+				:key="child.id || ii"
+				:field="child"
+				:parent-path="props.id"
+			/>
+		</template>
+	</component>
+</template>

package/src/components/FieldSetVue.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+defineProps<{
+	label?: string
+	legend?: string
+}>()
+</script>
+
+<template>
+	<fieldset class="px-1 pt-025 pb-1">
+		<legend class="ms-1">
+			{{ legend || label }}
+		</legend>
+		<slot />
+	</fieldset>
+</template>
+
+<style scoped>
+	fieldset {
+		border: 1px solid var(--border-color);
+		border-radius: var(--card-border-radius);
+		padding: var(--space-md);
+	}
+</style>

package/src/components/ModalForm.vue

@@ -48,7 +48,7 @@ let submitting = $ref(false)
 
 async function runSubmit() {
 	if (submitting) return
-	if (form?.validateForm?.() === false) return
+	if (form?.validateForm() === false) return
 	submitting = true
 	try {
 		await props.onSubmit?.(formData.value)

package/src/components/Pill.vue

@@ -20,6 +20,7 @@ const props = defineProps<{
 	outline?: boolean
 	loading?: boolean
 	value?: string
+	modelValue?: string
 	round?: boolean
 	btn?: BtnProp
 	btnEnd?: BtnProp
@@ -91,8 +92,8 @@ const computedBackgroundColor = $computed(
 			</div>
 			<MaterialIcon v-if="icon" :icon="icon" />
 			<slot />
-			<template v-if="!slots.default && value">
-				{{ value }}
+			<template v-if="!slots.default && (value)">
+				{{ value || modelValue }}
 			</template>
 			<MaterialIcon v-if="iconEnd" :icon="iconEnd" />
 			<div v-if="loading" class="loading" />

package/src/components/TableSchema.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import {
-	BglField,
+	BglComponent,
 	type BglFormSchemaT,
 	MaterialIcon,
 	isDate,
@@ -272,7 +272,8 @@ watch(
 								:field
 							/>
 							<div v-else>
-								<BglField
+								<BglComponent
+									:id="field.id"
 									class="embedded-field"
 									:field
 									:modelValue="row"

package/src/components/form/BglField.vue

@@ -11,23 +11,27 @@ import {
 	ToggleInput,
 	bindAttrs,
 	classify,
-	BagelForm,
 	NumberInput,
 	UploadInput,
+	type BagelFormState,
+	BglForm
 } from '@bagelink/vue'
+import { inject } from 'vue'
 import TabsNav from '../layout/TabsNav.vue'
+import { FORM_STATE_KEY } from './useBagelFormState'
 
-const props = withDefaults(
-	defineProps<{
-		field: Field<T>
-		modelValue: { [key: string]: any }
-	}>(),
-	{
-		modelValue: () => ({}),
-	}
-)
+const props = defineProps<{
+	field: Field<T>
+	id?: string
+	modelValue?: any
+	parentPath?: string
+}>()
+
+const emit = defineEmits<{
+	'update:modelValue': [value: any]
+}>()
 
-const emit = defineEmits(['update:modelValue'])
+const formState = inject<BagelFormState<T>>(FORM_STATE_KEY)
 
 const customAttrs = $ref<{ [key: string]: any }>({})
 
@@ -47,90 +51,54 @@ const is = $computed(() => {
 	if (props.field.$el === 'file') return FileUpload
 	if (props.field.$el === 'date') return DateInput
 	if (props.field.$el === 'tabs') return TabsNav
-	if (props.field.$el === 'form') return BagelForm
+	if (props.field.$el === 'form') return BglForm
 	return props.field.$el ?? 'div'
 })
 
-const formData = $computed({
-	get: () => props.modelValue,
-	set: (val: any) => {
-		emit('update:modelValue', val)
+const fieldData = $computed({
+	get: () => {
+		if (!props.id) return props.field.defaultValue ?? (props.field.$el === 'form' ? {} : '')
+		const value = formState?.getFieldData(props.id)
+		if (props.field.$el === 'form' && !value) return {}
+		return value ?? ''
 	},
-})
-
-const objPathRegex = /[.\][]/
-
-function setFieldData(key: string, val: any) {
-	const data = { ...props.modelValue }
-	const keys = key.split(objPathRegex)
-	let temp = data
-	for (let i = 0; i < keys.length - 1; i++) {
-		if (!temp[keys[i]]) {
-			temp[keys[i]] = {}
-		}
-		temp = temp[keys[i]]
-	}
-	temp[keys[keys.length - 1]] = val
-	return data
-}
-
-const isForm = $computed(() => props.field.$el === 'form' || props.field.$el === BagelForm)
+	set: (val: any) => {
+		if (!props.id) return
+		const currentValue = formState?.getFieldData(props.id)
+		if (JSON.stringify(val) === JSON.stringify(currentValue)) return
 
-function getFieldData(obj: any, key: string) {
-	if (typeof obj !== 'object' || obj === null) return obj
-	const keys = key.split(objPathRegex)
-	let result = obj
-	for (const k of keys) {
-		if (result && k in result) {
-			result = result[k]
-		} else {
-			return undefined
+		emit('update:modelValue', val)
+		if (props.field.onUpdate) {
+			props.field.onUpdate(val, currentValue)
 		}
+		formState?.updateField(props.id, val)
 	}
-	return result
-}
-
-const fieldData = $computed({
-	set: (val: any) => {
-		if (isForm) {
-			emit('update:modelValue', val)
-			return
-		}
-		if (!props.field.id) return
-		const data = setFieldData(props.field.id, val)
-		emit('update:modelValue', data)
-	},
-	get: () => {
-		if (props.field.id) return getFieldData(props.modelValue, props.field.id)
-		if (isForm) return props.modelValue
-		return props.field.defaultValue ?? ''
-	},
 })
 
 const vIf = $computed(() => {
 	if (props.field['v-if'] === undefined && props.field.vIf === undefined) return true
 	if (typeof props.field['v-if'] === 'boolean' || typeof props.field.vIf === 'boolean') return props.field['v-if']
 	if (typeof props.field['v-if'] === 'string' || typeof props.field.vIf === 'string') return true
-	if (typeof props.field['v-if'] === 'function') return props.field['v-if'](fieldData, formData as T)
-	if (typeof props.field.vIf === 'function') return props.field.vIf(fieldData, formData as T)
+	if (typeof props.field['v-if'] === 'function') return props.field['v-if'](fieldData, formState?.data.value as T)
+	if (typeof props.field.vIf === 'function') return props.field.vIf(fieldData, formState?.data.value as T)
 	return true
 })
 
 const computedFieldData = $computed(
-	() => props.field.transform?.(fieldData, props.modelValue as T) ?? fieldData
+	() => props.field.transform?.(fieldData, formState?.data.value as T) ?? fieldData
 )
 
 const computedOptions = $computed(
-	() => bindAttrs({ options: props.field.options }, fieldData, props.modelValue).options
+	() => bindAttrs({ options: props.field.options }, fieldData, formState?.data.value).options
 )
 
 const computedAttrs = $computed(() => {
 	const attrs = { ...customAttrs, ...props.field.attrs }
-	return bindAttrs(attrs, fieldData, props.modelValue)
+	return bindAttrs(attrs, fieldData, formState?.data.value)
 })
 
 const computedClass = $computed(
-	() => classify(fieldData, props.modelValue, props.field.class, props.field.attrs?.class)
+	() => classify(fieldData, formState?.data.value, props.field.class, props.field.attrs?.class)
 )
 </script>
 
@@ -139,7 +107,7 @@ const computedClass = $computed(
 		v-bind="computedAttrs"
 		:is="is"
 		v-if="vIf"
-		:id="field.id"
+		:id="props.id"
 		v-model="fieldData"
 		:required="field.required"
 		:class="computedClass"
@@ -149,14 +117,19 @@ const computedClass = $computed(
 		:disabled="field.disabled"
 		:options="computedOptions"
 		:helptext="field.helptext"
-		@update:modelValue="($event: any) => field?.onUpdate?.($event, formData as T)"
+		:schema="field.attrs?.schema ?? undefined"
 	>
-		{{ computedFieldData }}
-		<BglField
-			v-for="(child, ii) in field.children"
-			:key="child.id || ii"
-			v-model="formData"
-			:field="child"
-		/>
+		<template v-if="field.$el === 'form'">
+			<slot />
+		</template>
+		<template v-else>
+			<BglField
+				v-for="(child, ii) in field.children"
+				:id="[props.id, child.id].filter(Boolean).join('.')"
+				:key="child.id || ii"
+				:field="child"
+				:parent-path="props.id"
+			/>
+		</template>
 	</component>
 </template>