@bagelink/vue 0.0.1104 → 0.0.1111

package/dist/style.css

@@ -1036,14 +1036,7 @@ pre code.hljs{
 }
 }
 
-.img-web-kit[data-v-29509e85] {
-	max-width: 100%;
-	vertical-align: middle;
-	border: 0;
-	width: 100%;
-}
-
-.fileUploadWrap[data-v-438b09e8] {
+.fileUploadWrap[data-v-133a8c7a] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
@@ -1055,7 +1048,7 @@ pre code.hljs{
 	background: var(--input-bg);
 	height: 215px;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-438b09e8] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-133a8c7a] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
@@ -1063,14 +1056,14 @@ pre code.hljs{
 	color: var(--bgl-gray);
 	flex-direction: column;
 }
-.fileUploadWrap.dragover[data-v-438b09e8],
-.fileUploadWrap[data-v-438b09e8]:hover {
+.fileUploadWrap.dragover[data-v-133a8c7a],
+.fileUploadWrap[data-v-133a8c7a]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.fileUploadWrap[style*='height: auto;'][data-v-438b09e8] {
+.fileUploadWrap[style*='height: auto;'][data-v-133a8c7a] {
 	min-height: 215px;
 }
-.multi-image-item-preview[data-v-438b09e8] {
+.multi-image-item-preview[data-v-133a8c7a] {
 	border: 1px solid var(--border-color) !important;
 	border-radius: var(--input-border-radius);
 	margin: 0.5rem !important;
@@ -1084,12 +1077,12 @@ pre code.hljs{
 	gap: 1rem;
 	align-items: center;
 }
-.multi-image-item-preview p[data-v-438b09e8] {
+.multi-image-item-preview p[data-v-133a8c7a] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.multi-preview[data-v-438b09e8] {
+.multi-preview[data-v-133a8c7a] {
 	width: 40px;
 	height: 40px;
 	border-radius: var(--input-border-radius);
@@ -1100,17 +1093,17 @@ pre code.hljs{
 	align-items: center;
 	display: flex;
 }
-.bgl-single-preview[data-v-438b09e8] {
+.bgl-single-preview[data-v-133a8c7a] {
 	height: 100%;
 	position: relative;
 }
-.bgl-single-preview + .fileUploadPlaceHolder[data-v-438b09e8] {
+.bgl-single-preview + .fileUploadPlaceHolder[data-v-133a8c7a] {
 	position: absolute;
 	inset: 0;
 	margin: auto;
 	top: calc(50% - 2rem);
 }
-.single-image-item-preview[data-v-438b09e8] {
+.single-image-item-preview[data-v-133a8c7a] {
 	height: 100%;
 	min-height: 100%;
 	position: relative;
@@ -1118,13 +1111,13 @@ pre code.hljs{
 	align-items: center;
 	justify-content: center;
 }
-.fileUploadWrap[style*='height: auto'] .single-image-item-preview[data-v-438b09e8] {
+.fileUploadWrap[style*='height: auto'] .single-image-item-preview[data-v-133a8c7a] {
 	min-height: 215px;
 }
-.fileUploadWrap[style*='height: auto'] .single-preview[data-v-438b09e8] {
+.fileUploadWrap[style*='height: auto'] .single-preview[data-v-133a8c7a] {
 	margin: 0rem !important;
 }
-.single-preview[data-v-438b09e8] {
+.single-preview[data-v-133a8c7a] {
 	border-radius: var(--input-border-radius);
 	margin: 1rem;
 	padding: 0px;
@@ -1134,7 +1127,7 @@ pre code.hljs{
 	background: var(--bgl-gray-light);
 	width: 90%;
 }
-.single-image-item-preview[data-v-438b09e8]:hover::after {
+.single-image-item-preview[data-v-133a8c7a]:hover::after {
 	content: 'zoom_in';
 	font-size: 32px;
 	font-family: 'Material Symbols Outlined', serif;
@@ -1144,20 +1137,20 @@ pre code.hljs{
 	z-index: 9;
 	pointer-events: none;
 }
-.single-image-item-preview:hover img[data-v-438b09e8] {
+.single-image-item-preview:hover img[data-v-133a8c7a] {
 	filter: brightness(70%);
 }
-.bgl_fill-image.single-image-item-preview[data-v-438b09e8] {
+.bgl_fill-image.single-image-item-preview[data-v-133a8c7a] {
 	height: 100%;
 }
-.bgl_fill-image.single-image-item-preview .single-preview[data-v-438b09e8] {
+.bgl_fill-image.single-image-item-preview .single-preview[data-v-133a8c7a] {
 	border-radius: unset;
 	object-fit: cover;
 	box-shadow: unset;
 	width: 100%;
 	height: auto;
 }
-.single-image-item-preview .pie[data-v-438b09e8] {
+.single-image-item-preview .pie[data-v-133a8c7a] {
 	transform-origin: top;
 	transform: scale(1.4);
 	position: absolute;
@@ -1171,31 +1164,31 @@ pre code.hljs{
 	border: none !important;
 	padding: 0 !important;
 }
-.bgl_oval-upload[data-v-438b09e8] {
+.bgl_oval-upload[data-v-133a8c7a] {
 	border-radius: 100% !important;
 	overflow: hidden;
 }
-.bgl_oval-upload p[data-v-438b09e8] {
+.bgl_oval-upload p[data-v-133a8c7a] {
 	padding: 0.75rem !important;
 	font-size: 12px;
 }
-.bgl_oval-upload .fileUploadPlaceHolder[data-v-438b09e8] {
+.bgl_oval-upload .fileUploadPlaceHolder[data-v-133a8c7a] {
 	top: 0;
 }
-.bgl_oval-upload .pie[data-v-438b09e8] {
+.bgl_oval-upload .pie[data-v-133a8c7a] {
 	transform: scale(1);
 }
-.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-438b09e8] {
+.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-133a8c7a] {
 	transform: scale(0.4) !important;
 }
-.bgl_oval-upload .single-image-item-preview[data-v-438b09e8] {
+.bgl_oval-upload .single-image-item-preview[data-v-133a8c7a] {
 	height: 100%;
 }
-.bgl_oval-upload .single-preview[data-v-438b09e8] {
+.bgl_oval-upload .single-preview[data-v-133a8c7a] {
 	margin: 0;
 	height: 100% !important;
 }
-.pie[data-v-438b09e8] {
+.pie[data-v-133a8c7a] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -1203,7 +1196,7 @@ pre code.hljs{
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-438b09e8]:before {
+.pie[data-v-133a8c7a]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -1221,26 +1214,26 @@ pre code.hljs{
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-438b09e8] {
+.pie .success[data-v-133a8c7a] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-438b09e8] {
+.pie .progress[data-v-133a8c7a] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-438b09e8] {
+.pie.complete .progress[data-v-133a8c7a] {
 	display: none;
 }
-.pie.complete .success[data-v-438b09e8] {
+.pie.complete .success[data-v-133a8c7a] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-438b09e8]:before {
+.pie.complete[data-v-133a8c7a]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-438b09e8] {
+.pie.complete[data-v-133a8c7a] {
 	color: var(--bgl-green);
 }
 
@@ -1251,14 +1244,14 @@ pre code.hljs{
 	direction: ltr;
 }
 
-.txtInputIconStart .iconStart[data-v-3a20cf4a] {
+.txtInputIconStart .iconStart[data-v-f265687e] {
 	color: var(--input-color);
 	position: absolute;
     inset-inline-start:calc(var(--input-height) / 3 - 0.25rem);
 	margin-top: calc(var(--input-height) / 2 );
 	line-height: 0;
 }
-.textInputSpinnerWrap .spinner[data-v-3a20cf4a] {
+.textInputSpinnerWrap .spinner[data-v-f265687e] {
 	color: var(--input-color);
 	position: absolute;
 	inset-inline-end: 0;
@@ -1268,18 +1261,18 @@ pre code.hljs{
 	flex-direction: column;
 	gap: 0;
 }
-.top-bgl-ctrl-num-btn[data-v-3a20cf4a]{
+.top-bgl-ctrl-num-btn[data-v-f265687e]{
 	margin-top: calc(var(--input-height) / 10) !important;
 }
-.bgl-ctrl-num-btn[data-v-3a20cf4a]{
+.bgl-ctrl-num-btn[data-v-f265687e]{
 	height: calc(var(--input-height) / 2.5) !important;
 	isolation: isolate;
 }
-.bgl-big-ctrl-num-btn[data-v-3a20cf4a]{
+.bgl-big-ctrl-num-btn[data-v-f265687e]{
 	width: 100% !important;
 	isolation: isolate;
 }
-.bgl-number-input[data-v-3a20cf4a]{
+.bgl-number-input[data-v-f265687e]{
 	padding-inline-end: 1.75rem !important;
 }
 
@@ -2130,6 +2123,13 @@ line-height: 1.65;
 	color: var(--bgl-green);
 }
 
+.img-web-kit[data-v-29509e85] {
+	max-width: 100%;
+	vertical-align: middle;
+	border: 0;
+	width: 100%;
+}
+
 .bgl_bottombar .bgl_btn-flex{
   flex-direction: column;
   height: 60px;

package/package.json

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

package/src/components/form/BglField.vue

@@ -13,10 +13,12 @@ import {
 	classify,
 	NumberInput,
 	UploadInput,
+	type BagelFormState,
 	BglForm
 } from '@bagelink/vue'
-import { useFormField } from '../../composables/useFormField'
+import { inject } from 'vue'
 import TabsNav from '../layout/TabsNav.vue'
+import { FORM_STATE_KEY, provideBagelFormState } from './useBagelFormState'
 
 const props = defineProps<{
 	field: Field<T>
@@ -29,7 +31,7 @@ const emit = defineEmits<{
 	'update:modelValue': [value: any]
 }>()
 
-const { fieldData } = useFormField(props)
+const formState = inject<BagelFormState<T>>(FORM_STATE_KEY) ?? provideBagelFormState(props.modelValue)
 
 const customAttrs = $ref<{ [key: string]: any }>({})
 
@@ -53,17 +55,50 @@ const is = $computed(() => {
 	return props.field.$el ?? 'div'
 })
 
+const fieldData = $computed({
+	get: () => {
+		if (!props.fieldID) return props.field.defaultValue ?? (props.field.$el === 'form' ? {} : '')
+		const value = formState.getFieldData(props.fieldID)
+		if (props.field.$el === 'form' && !value) return {}
+		return value ?? ''
+	},
+	set: (val: any) => {
+		if (!props.fieldID) return
+		const currentValue = formState.getFieldData(props.fieldID)
+		if (JSON.stringify(val) === JSON.stringify(currentValue)) return
+
+		emit('update:modelValue', val)
+		if (props.field.onUpdate) {
+			props.field.onUpdate(val, currentValue)
+		}
+		formState.updateField(props.fieldID, 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, 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, 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>
 
@@ -71,7 +106,7 @@ const computedClass = $computed(
 	<component
 		v-bind="computedAttrs"
 		:is="is"
-		v-if="field.vIf === undefined || field.vIf"
+		v-if="vIf"
 		v-model="fieldData"
 		:fieldID="props.fieldID"
 		:required="field.required"

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

@@ -6,14 +6,12 @@ import {
 	type StorageFile,
 	useBagel,
 	Card,
+	Image,
 } from '@bagelink/vue'
 import { onMounted, watch } from 'vue'
-import Image from '../../Image.vue'
 
 type StrKey = keyof StorageFile
 
-type FSValue = string[] | string
-
 const {
 	label,
 	multiple,
@@ -34,7 +32,7 @@ const {
 	multiple?: boolean
 	files?: StorageFile | StorageFile[]
 	bindkey?: StrKey
-	modelValue?: FSValue
+	modelValue?: string[] | string
 	width?: string
 	height?: string | 'auto'
 	topic?: string
@@ -62,8 +60,8 @@ interface QueueFile {
 
 const isImage = (str: string) => IMAGE_FORMATS_REGEXP.test(str)
 
-const file_bindkeys = defineModel('modelValue', {
-	default: () => [] as FSValue,
+const file_bindkeys = defineModel<string[] | string>('modelValue', {
+	default: () => [],
 })
 const storageFiles = $ref<StorageFile[]>([])
 
@@ -147,9 +145,9 @@ function compareLists(a: any, b: any) {
 }
 
 function updateModelValue() {
-	let idValue: FSValue
+	let idValue: string | string[]
 	if (multiple) {
-		idValue = storageFiles.map(f => f[bindKey]) as FSValue
+		idValue = storageFiles.map(f => f[bindKey]) as string[]
 	} else {
 		idValue = (storageFiles[0][bindKey] as string) || ''
 	}

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

@@ -104,7 +104,7 @@ watch(() => modelValue, (newVal) => {
 		<label :for="id">
 			{{ label }}
 			<div class="gap-025" :class="{ 'column flex': layout === 'vertical', 'flex': layout === 'horizontal' }">
-				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="add" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" @click="increment" />
+				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="add" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="increment" />
 
 				<input
 					:id
@@ -138,10 +138,10 @@ watch(() => modelValue, (newVal) => {
 					v-if="icon"
 					:icon
 				/>
-				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="remove" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" @click="decrement" />
+				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="remove" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="decrement" />
 				<div v-if="spinner && (!layout || !btnLayouts.includes(layout))" class="flex column spinner">
-					<Btn icon="add" flat thin class="bgl-ctrl-num-btn ctrl-add color-gray top-bgl-ctrl-num-btn" :disabled="!canAdd" @click="increment" />
-					<Btn icon="remove" flat thin class="bgl-ctrl-num-btn ctrl-remove color-gray" :disabled="!canDecrement" @click="decrement" />
+					<Btn icon="add" flat thin class="bgl-ctrl-num-btn ctrl-add color-gray top-bgl-ctrl-num-btn" :disabled="!canAdd" tabindex="-1" @click="increment" />
+					<Btn icon="remove" flat thin class="bgl-ctrl-num-btn ctrl-remove color-gray" :disabled="!canDecrement" tabindex="-1" @click="decrement" />
 				</div>
 			</div>
 		</label>