@bagelink/vue 0.0.1202 → 0.0.1206

package/dist/components/form/BagelForm.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BagelForm.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/BagelForm.vue"],"names":[],"mappings":"AAiJA,OAAO,KAAK,EAAE,gBAAgB,EAAS,MAAM,eAAe,CAAA;AAK5D,MAAM,WAAW,cAAc,CAAC,EAAE;IACjC,UAAU,CAAC,EAAE,EAAE,CAAA;IACf,MAAM,CAAC,EAAE,gBAAgB,CAAC,EAAE,CAAC,CAAA;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IACzB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CACtC;yBAEgB,CAAC,SAAS;IAAC,CAAC,GAAG,EAAC,MAAM,GAAE,GAAG,CAAA;CAAC,eAC/B,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WA2N1D,mBAAmB,CAAC;;6KAAkE,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB;;;;MAAsB,GAAG,IAAI;WACpE,GAAG;;yBAxCkB,GAAG;;;;;YACJ,GAAG;yBACF,GAAG;uBACL,GAAG;;cA9KzB,mBAAmB,SAAS,CAAC,KAAG,IAAI;OAwN7B,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AArOzE,wBAqO4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"BagelForm.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/BagelForm.vue"],"names":[],"mappings":"AAgHA,OAAO,KAAK,EAAE,gBAAgB,EAAS,MAAM,eAAe,CAAA;AAK5D,MAAM,WAAW,cAAc,CAAC,EAAE;IACjC,UAAU,CAAC,EAAE,EAAE,CAAA;IACf,MAAM,CAAC,EAAE,gBAAgB,CAAC,EAAE,CAAC,CAAA;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IACzB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CACtC;yBAEgB,CAAC,SAAS;IAAC,CAAC,GAAG,EAAC,MAAM,GAAE,GAAG,CAAA;CAAC,eAC/B,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WA0L1D,mBAAmB,CAAC;;6KAAkE,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB;;;;MAAsB,GAAG,IAAI;WACpE,GAAG;;yBAxCkB,GAAG;;;;;YACJ,GAAG;yBACF,GAAG;uBACL,GAAG;;cA7IzB,mBAAmB,SAAS,CAAC,KAAG,IAAI;OAuL7B,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AApMzE,wBAoM4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/composables/useSchemaField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSchemaField.d.ts","sourceRoot":"","sources":["../../src/composables/useSchemaField.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,CAAA;AAChC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAwBxD,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACvC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;IACzD,YAAY,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC;yBA4BzF,cAAc,CAAC,CAAC,CAAC,UAChB,MAAM,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,CAAA;KAAE,KAAK,GAAG,CAAC,KAC1E,KAAK,GAAG,IAAI;0BA3Bc,cAAc,CAAC,CAAC,CAAC;EAuK9C"}
+{"version":3,"file":"useSchemaField.d.ts","sourceRoot":"","sources":["../../src/composables/useSchemaField.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,CAAA;AAChC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAwBxD,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACvC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;IACzD,YAAY,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC;yBA4BzF,cAAc,CAAC,CAAC,CAAC,UAChB,MAAM,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,CAAA;KAAE,KAAK,GAAG,CAAC,KAC1E,KAAK,GAAG,IAAI;0BA3Bc,cAAc,CAAC,CAAC,CAAC;EAyL9C"}

package/dist/index.cjs

@@ -748,8 +748,8 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
     const emit2 = __emit;
     const ANIMATION_TIMINGS = {
       TOUCH: 150,
-      MOBILE: 300,
-      DESKTOP: 400,
+      MOBILE: 420,
+      DESKTOP: 840,
       MAX_DURATION: 300,
       BASE_DURATION: 150,
       DURATION_PER_PANEL: 50
@@ -1182,7 +1182,7 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-3a1530dc"]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-d0b0c027"]]);
 function _isPlaceholder(a2) {
   return a2 != null && typeof a2 === "object" && a2["@@functional/placeholder"] === true;
 }
@@ -7314,6 +7314,20 @@ function useSchemaField(options) {
     const Component = getComponent(field);
     if (!Component) return null;
     const rowData = (getRowData == null ? void 0 : getRowData()) || {};
+    const condition = field.vIf ?? field["v-if"];
+    if (condition !== void 0) {
+      if (typeof condition === "function") {
+        if (!condition(field.id ? rowData[field.id] : void 0, rowData)) {
+          return null;
+        }
+      } else if (typeof condition === "string") {
+        if (!rowData[condition]) {
+          return null;
+        }
+      } else if (!condition) {
+        return null;
+      }
+    }
     const {
       $el,
       children: children2,
@@ -7378,7 +7392,7 @@ function useSchemaField(options) {
       componentSlots.default = () => children2.map((child) => {
         if (typeof child === "string") return child;
         return renderField(child, slots);
-      });
+      }).filter(Boolean);
     }
     if (isSlotValueComponent && transformedValue !== void 0) {
       componentSlots.default = () => (transformedValue == null ? void 0 : transformedValue.toString()) || "";
@@ -11631,18 +11645,6 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
         formState.value = "error";
       }
     }
-    function shouldRenderField(field) {
-      const condition = field.vIf ?? field["v-if"];
-      if (condition === void 0) return true;
-      if (typeof condition === "function") {
-        console.log("shouldRenderField", field.id, condition(formData.value[field.id], formData.value));
-        return condition(formData.value[field.id], formData.value);
-      }
-      if (typeof condition === "string") {
-        return !!formData.value[condition];
-      }
-      return !!condition;
-    }
     function validateForm() {
       if (!form.value) return false;
       return form.value.reportValidity();
@@ -11657,23 +11659,8 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
         (_a2 = field.onUpdate) == null ? void 0 : _a2.call(field, value, formData.value);
       }
     });
-    function parseChildren(children2) {
-      if (!children2) return void 0;
-      return children2.map((child) => {
-        if (typeof child === "string") return child;
-        if (!shouldRenderField(child)) return null;
-        if (!child.children) return child;
-        const parsedChildren = parseChildren(child.children);
-        return (parsedChildren == null ? void 0 : parsedChildren.length) ? { ...child, children: parsedChildren } : null;
-      }).filter((child) => child !== null);
-    }
     function renderSchemaField(field) {
-      const shouldRender = shouldRenderField(field);
-      if (!shouldRender) return null;
-      return renderField({
-        ...field,
-        children: parseChildren(field.children)
-      });
+      return renderField(field);
     }
     __expose({ form, isDirty: isDirty.value, validateForm });
     return (_ctx, _cache) => {

package/dist/index.mjs

@@ -746,8 +746,8 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     const emit2 = __emit;
     const ANIMATION_TIMINGS = {
       TOUCH: 150,
-      MOBILE: 300,
-      DESKTOP: 400,
+      MOBILE: 420,
+      DESKTOP: 840,
       MAX_DURATION: 300,
       BASE_DURATION: 150,
       DURATION_PER_PANEL: 50
@@ -1180,7 +1180,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-3a1530dc"]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Z, [["__scopeId", "data-v-d0b0c027"]]);
 function _isPlaceholder(a2) {
   return a2 != null && typeof a2 === "object" && a2["@@functional/placeholder"] === true;
 }
@@ -7312,6 +7312,20 @@ function useSchemaField(options) {
     const Component = getComponent(field);
     if (!Component) return null;
     const rowData = (getRowData == null ? void 0 : getRowData()) || {};
+    const condition = field.vIf ?? field["v-if"];
+    if (condition !== void 0) {
+      if (typeof condition === "function") {
+        if (!condition(field.id ? rowData[field.id] : void 0, rowData)) {
+          return null;
+        }
+      } else if (typeof condition === "string") {
+        if (!rowData[condition]) {
+          return null;
+        }
+      } else if (!condition) {
+        return null;
+      }
+    }
     const {
       $el,
       children: children2,
@@ -7376,7 +7390,7 @@ function useSchemaField(options) {
       componentSlots.default = () => children2.map((child) => {
         if (typeof child === "string") return child;
         return renderField(child, slots);
-      });
+      }).filter(Boolean);
     }
     if (isSlotValueComponent && transformedValue !== void 0) {
       componentSlots.default = () => (transformedValue == null ? void 0 : transformedValue.toString()) || "";
@@ -11629,18 +11643,6 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
         formState.value = "error";
       }
     }
-    function shouldRenderField(field) {
-      const condition = field.vIf ?? field["v-if"];
-      if (condition === void 0) return true;
-      if (typeof condition === "function") {
-        console.log("shouldRenderField", field.id, condition(formData.value[field.id], formData.value));
-        return condition(formData.value[field.id], formData.value);
-      }
-      if (typeof condition === "string") {
-        return !!formData.value[condition];
-      }
-      return !!condition;
-    }
     function validateForm() {
       if (!form.value) return false;
       return form.value.reportValidity();
@@ -11655,23 +11657,8 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
         (_a2 = field.onUpdate) == null ? void 0 : _a2.call(field, value, formData.value);
       }
     });
-    function parseChildren(children2) {
-      if (!children2) return void 0;
-      return children2.map((child) => {
-        if (typeof child === "string") return child;
-        if (!shouldRenderField(child)) return null;
-        if (!child.children) return child;
-        const parsedChildren = parseChildren(child.children);
-        return (parsedChildren == null ? void 0 : parsedChildren.length) ? { ...child, children: parsedChildren } : null;
-      }).filter((child) => child !== null);
-    }
     function renderSchemaField(field) {
-      const shouldRender = shouldRenderField(field);
-      if (!shouldRender) return null;
-      return renderField({
-        ...field,
-        children: parseChildren(field.children)
-      });
+      return renderField(field);
     }
     __expose({ form, isDirty: isDirty.value, validateForm });
     return (_ctx, _cache) => {

package/dist/style.css

@@ -356,13 +356,13 @@ display: block;
 	padding: 0;
 }
 
-.BglCarousel[data-v-3a1530dc] {
+.BglCarousel[data-v-d0b0c027] {
 	position: relative;
 	width: 100%;
 	overflow: hidden;
 	touch-action: pan-y pinch-zoom; /* Allow vertical scrolling */
 }
-.bgl-slider[data-v-3a1530dc] {
+.bgl-slider[data-v-d0b0c027] {
 	display: flex;
 	position: relative;
 	width: 100%;
@@ -375,26 +375,26 @@ display: block;
 	-webkit-user-select: none;
 	user-select: none;
 }
-.bgl-slider[data-v-3a1530dc] > * {
+.bgl-slider[data-v-d0b0c027] > * {
 	flex: 0 0 calc((100% - (var(--item-count) - 1) * 1%) / var(--item-count));
 	width: calc((100% - (var(--item-count) - 1) * 1%) / var(--item-count));
 	min-width: calc((100% - (var(--item-count) - 1) * 1%) / var(--item-count));
 	position: relative;
 	overflow: hidden;
 }
-.bgl-slider.slides-1[data-v-3a1530dc] > * {
+.bgl-slider.slides-1[data-v-d0b0c027] > * {
 	flex: 0 0 100%;
 	width: 100%;
 	min-width: 100%;
 }
-.dragging .bgl-slider[data-v-3a1530dc] > * {
+.dragging .bgl-slider[data-v-d0b0c027] > * {
 	pointer-events: none;
 	user-select: none;
 }
-.autoHeight[data-v-3a1530dc] {
+.autoHeight[data-v-d0b0c027] {
 	transition: height ease 0.7s;
 }
-.dots[data-v-3a1530dc] {
+.dots[data-v-d0b0c027] {
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -402,7 +402,7 @@ display: block;
 	margin-top: 1rem;
 	gap: 8px;
 }
-.dot[data-v-3a1530dc] {
+.dot[data-v-d0b0c027] {
 	height: 10px;
 	width: 10px;
 	border-radius: 50%;
@@ -411,10 +411,10 @@ display: block;
 	transition: opacity 0.3s ease;
 	cursor: pointer;
 }
-.dot[data-v-3a1530dc]:hover {
+.dot[data-v-d0b0c027]:hover {
 	opacity: 0.6;
 }
-.dot.current[data-v-3a1530dc] {
+.dot.current[data-v-d0b0c027] {
 	opacity: 0.8;
 }
 

package/package.json

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

package/src/components/Carousel.vue

@@ -18,8 +18,8 @@ const emit = defineEmits(['update:index'])
 // Constants
 const ANIMATION_TIMINGS = {
 	TOUCH: 150,
-	MOBILE: 300,
-	DESKTOP: 400,
+	MOBILE: 420,
+	DESKTOP: 840,
 	MAX_DURATION: 300,
 	BASE_DURATION: 150,
 	DURATION_PER_PANEL: 50,

package/src/components/form/BagelForm.vue

@@ -68,22 +68,6 @@ async function handleSubmit() {
 	}
 }
 
-function shouldRenderField(field: Field): boolean {
-	const condition = field.vIf ?? field['v-if']
-	if (condition === undefined) return true
-
-	if (typeof condition === 'function') {
-		console.log('shouldRenderField', field.id, condition(formData.value[field.id as keyof T], formData.value))
-		return condition(formData.value[field.id as keyof T], formData.value)
-	}
-
-	if (typeof condition === 'string') {
-		return !!formData.value[condition as keyof T]
-	}
-
-	return !!condition
-}
-
 function validateForm() {
 	if (!form.value) return false
 	return form.value.reportValidity()
@@ -98,26 +82,9 @@ const { renderField } = useSchemaField<T>({
 		field.onUpdate?.(value, formData.value)
 	}
 })
-function parseChildren(children?: (string | Field)[]): (string | Field)[] | undefined {
-	if (!children) return undefined
-	return children
-		.map((child) => {
-			if (typeof child === 'string') return child
-			if (!shouldRenderField(child)) return null
-			if (!child.children) return child
-			const parsedChildren = parseChildren(child.children)
-			return parsedChildren?.length ? { ...child, children: parsedChildren } : null
-		})
-		.filter((child): child is string | Field => child !== null)
-}
 
 function renderSchemaField(field: Field): VNode | null {
-	const shouldRender = shouldRenderField(field)
-	if (!shouldRender) return null
-	return renderField({
-		...field,
-		children: parseChildren(field.children)
-	})
+	return renderField(field)
 }
 
 defineExpose({ form, isDirty, validateForm })

package/src/composables/useSchemaField.ts

@@ -66,6 +66,22 @@ export function useSchemaField<T extends { [key: string]: any }>(options: UseSch
 
 		const rowData = getRowData?.() || {} as T
 
+		// Check vIf condition first
+		const condition = field.vIf ?? field['v-if']
+		if (condition !== undefined) {
+			if (typeof condition === 'function') {
+				if (!condition(field.id ? rowData[field.id as keyof T] : undefined, rowData)) {
+					return null
+				}
+			} else if (typeof condition === 'string') {
+				if (!rowData[condition as keyof T]) {
+					return null
+				}
+			} else if (!condition) {
+				return null
+			}
+		}
+
 		const {
 			$el,
 			children,
@@ -147,15 +163,17 @@ export function useSchemaField<T extends { [key: string]: any }>(options: UseSch
 		// Handle class binding last to ensure all transformations are applied
 		props.class = classify(currentValue, rowData, fieldClass, props.class)
 
-		// Handle component slots
+		// Handle component slots with vIf aware child rendering
 		const componentSlots: Record<string, any> = {}
 
 		// Add default slot if there are children
 		if (children?.length) {
-			componentSlots.default = () => children.map((child) => {
-				if (typeof child === 'string') return child
-				return renderField(child, slots)
-			})
+			componentSlots.default = () => children
+				.map((child) => {
+					if (typeof child === 'string') return child
+					return renderField(child, slots)
+				})
+				.filter(Boolean) // Filter out null results from vIf
 		}
 
 		// For slot value components, add the transformed value as default slot content