@bagelink/vue 0.0.1048 → 0.0.1054

package/dist/components/BglComponent.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BglComponent.vue.d.ts","sourceRoot":"","sources":["../../src/components/BglComponent.vue"],"names":[],"mappings":"AAAA,OAgLO,EAIN,KAAK,KAAK,EAYV,MAAM,eAAe,CAAA;yBAGL,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eAChC,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;WAiNxD,mBAAmB,CAAC;;;eA7MtB,KAAK,CAAC,CAAC,CAAC;aACV,MAAM;qBACE,GAAG;qBACH,MAAM;KA0MmG,CAAC,4BAA2B;oBAChI,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;yBAhCgB,GAAG;;;OAqCpB,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AA3NzE,wBA2N4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"BglComponent.vue.d.ts","sourceRoot":"","sources":["../../src/components/BglComponent.vue"],"names":[],"mappings":"AAyLA,OAAO,EAIN,KAAK,KAAK,EAYV,MAAM,eAAe,CAAA;yBAGL,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eAChC,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;WA6NxD,mBAAmB,CAAC;;;eAzNtB,KAAK,CAAC,CAAC,CAAC;aACV,MAAM;qBACE,GAAG;qBACH,MAAM;KAsNmG,CAAC,4BAA2B;oBAChI,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;yBAjCgB,GAAG;;;OAsCpB,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAvOzE,wBAuO4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/components/TableSchema.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableSchema.vue.d.ts","sourceRoot":"","sources":["../../src/components/TableSchema.vue"],"names":[],"mappings":"AA4iBA,OAAO,EAEN,KAAK,cAAc,EAKnB,MAAM,eAAe,CAAA;AAQtB,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,MAAM,CAAA;AAC5C,MAAM,MAAM,UAAU,GAAG,GAAG,MAAM,IAAI,eAAe,EAAE,CAAA;yBAGtC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eAChC,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;WA8ZxD,mBAAmB,CAAC;;;;;;;;;;wBArNZ,MAAM,EAAE;;cArMnB,CAAC,EAAE;iBACA,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,cAAc,CAAC,CAAC,CAAC,CAAC;qBACzC,MAAM,EAAE;wBACL,OAAO;qBACV,OAAO;4BACA,MAAM,IAAI;MAqZwF,CAAC,4BAA2B;oBAChI,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;;;;UAjDuE,GAAG;UAmD9E,uXAAoC;OAGjC,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAxazE,wBAwa4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"TableSchema.vue.d.ts","sourceRoot":"","sources":["../../src/components/TableSchema.vue"],"names":[],"mappings":"AA2iBA,OAAO,EAEN,KAAK,cAAc,EAKnB,MAAM,eAAe,CAAA;AAQtB,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,MAAM,CAAA;AAC5C,MAAM,MAAM,UAAU,GAAG,GAAG,MAAM,IAAI,eAAe,EAAE,CAAA;yBAGtC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eAChC,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;WA6ZxD,mBAAmB,CAAC;;;;;;;;;;wBArNZ,MAAM,EAAE;;cApMnB,CAAC,EAAE;iBACA,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,cAAc,CAAC,CAAC,CAAC,CAAC;qBACzC,MAAM,EAAE;wBACL,OAAO;qBACV,OAAO;4BACA,MAAM,IAAI;MAoZwF,CAAC,4BAA2B;oBAChI,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;;;;UAjDuE,GAAG;UAmD9E,uXAAoC;OAGjC,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAvazE,wBAua4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"BglField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/BglField.vue"],"names":[],"mappings":"AAAA,OAuIO,EAIN,KAAK,KAAK,EAYV,MAAM,eAAe,CAAA;yBAML,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eAChC,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;WAwKxD,mBAAmB,CAAC;;;eApKtB,KAAK,CAAC,CAAC,CAAC;kBACL,MAAM;qBACH,GAAG;qBACH,MAAM;KAiKmG,CAAC,4BAA2B;oBAChI,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;OAKD,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAlLzE,wBAkL4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"BglField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/BglField.vue"],"names":[],"mappings":"AAAA,OAwIO,EAIN,KAAK,KAAK,EAYV,MAAM,eAAe,CAAA;yBAML,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eAChC,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;WA0KxD,mBAAmB,CAAC;;;eAtKtB,KAAK,CAAC,CAAC,CAAC;kBACL,MAAM;qBACH,GAAG;qBACH,MAAM;KAmKmG,CAAC,4BAA2B;oBAChI,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;OAKD,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AApLzE,wBAoL4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/index.cjs

@@ -61,7 +61,7 @@ const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$U = ["aria-expanded", "aria-controls"];
+const _hoisted_1$V = ["aria-expanded", "aria-controls"];
 const _hoisted_2$B = { class: "accordion-label" };
 const _hoisted_3$s = ["id", "aria-hidden"];
 const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
@@ -138,7 +138,7 @@ const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
           }, [
             vue.createVNode(vue.unref(_sfc_main$d), { icon: computedIcon.value }, null, 8, ["icon"])
           ], 2)) : vue.createCommentVNode("", true)
-        ], 8, _hoisted_1$U),
+        ], 8, _hoisted_1$V),
         vue.createVNode(vue.Transition, { name: "expand" }, {
           default: vue.withCtx(() => [
             vue.unref(isOpen) ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -164,7 +164,7 @@ const _export_sfc = (sfc, props2) => {
   return target;
 };
 const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["__scopeId", "data-v-1e73ca3e"]]);
-const _hoisted_1$T = { class: "relative" };
+const _hoisted_1$U = { class: "relative" };
 const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
   __name: "AddressSearch",
   emits: ["addressSelected"],
@@ -187,7 +187,7 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
       (_a2 = suggestion.value) == null ? void 0 : _a2.show();
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$T, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$U, [
         vue.createVNode(vue.unref(_sfc_main$W), {
           ref_key: "suggestion",
           ref: suggestion,
@@ -223,7 +223,7 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$S = {
+const _hoisted_1$T = {
   key: 1,
   class: "bgl_btn-flex"
 };
@@ -292,7 +292,7 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
           _ctx.loading ? (vue.openBlock(), vue.createBlock(vue.unref(Loading), {
             key: 0,
             size: "15"
-          })) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$S, [
+          })) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$T, [
             _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$d), {
               key: 0,
               icon: _ctx.icon
@@ -315,7 +315,7 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-c23a3626"]]);
-const _hoisted_1$R = ["dismissable"];
+const _hoisted_1$S = ["dismissable"];
 const _hoisted_2$A = { class: "m-0" };
 const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
   __name: "Alert",
@@ -353,12 +353,12 @@ const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
           icon: "close",
           onClick: _cache[0] || (_cache[0] = ($event) => isDismissed.value = true)
         })
-      ], 10, _hoisted_1$R)) : vue.createCommentVNode("", true);
+      ], 10, _hoisted_1$S)) : vue.createCommentVNode("", true);
     };
   }
 });
 const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["__scopeId", "data-v-57141c32"]]);
-const _hoisted_1$Q = ["src", "alt"];
+const _hoisted_1$R = ["src", "alt"];
 const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
   __name: "Avatar",
   props: {
@@ -377,7 +377,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
           key: 0,
           src: _ctx.src,
           alt: _ctx.name
-        }, null, 8, _hoisted_1$Q)) : (vue.openBlock(), vue.createElementBlock("p", {
+        }, null, 8, _hoisted_1$R)) : (vue.openBlock(), vue.createElementBlock("p", {
           key: 1,
           style: vue.normalizeStyle({ "line-height": `${_ctx.size}px`, "font-size": `calc(1.5rem * ${_ctx.size} / 50)` })
         }, vue.toDisplayString((_ctx.fallback || vue.unref(initials)(_ctx.name || "")).toUpperCase()), 5))
@@ -416,6 +416,7 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-2f3caf93"]]);
+const _hoisted_1$Q = { key: 1 };
 const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
   __name: "BglComponent",
   props: {
@@ -505,6 +506,12 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
         updateField(props2.id, val);
       }
     });
+    const computedFieldData = vue.computed(
+      () => {
+        var _a2, _b;
+        return ((_b = (_a2 = props2.field).transform) == null ? void 0 : _b.call(_a2, fieldData.value, props2.modelValue)) ?? fieldData.value;
+      }
+    );
     const vIf = vue.computed(() => {
       if (props2.field["v-if"] === void 0 && props2.field.vIf === void 0) return true;
       if (typeof props2.field["v-if"] === "boolean" || typeof props2.field.vIf === "boolean") return props2.field["v-if"];
@@ -545,14 +552,16 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
       }), {
         default: vue.withCtx(() => [
           _ctx.field.$el === "form" ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createTextVNode(vue.toDisplayString(fieldData.value) + " ", 1),
+            vue.createTextVNode(vue.toDisplayString(computedFieldData.value) + " ", 1),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.field.children, (child, ii) => {
-              return vue.openBlock(), vue.createBlock(_component_BglComponent, {
-                id: [props2.id, child.id].filter(Boolean).join("."),
-                key: child.id || ii,
-                field: child,
-                "parent-path": props2.id
-              }, null, 8, ["id", "field", "parent-path"]);
+              return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: ii }, [
+                typeof child !== "string" ? (vue.openBlock(), vue.createBlock(_component_BglComponent, {
+                  key: 0,
+                  id: [props2.id, child.id].filter(Boolean).join("."),
+                  field: child,
+                  "parent-path": props2.id
+                }, null, 8, ["id", "field", "parent-path"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$Q, vue.toDisplayString(child), 1))
+              ], 64);
             }), 128))
           ], 64))
         ]),
@@ -10011,7 +10020,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
       if (typeof props2.field.vIf === "function") return props2.field.vIf(fieldData.value, formState == null ? void 0 : formState.data.value);
       return true;
     });
-    vue.computed(
+    const computedFieldData = vue.computed(
       () => {
         var _a2, _b;
         return ((_b = (_a2 = props2.field).transform) == null ? void 0 : _b.call(_a2, fieldData.value, formState == null ? void 0 : formState.data.value)) ?? fieldData.value;
@@ -10049,6 +10058,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
         schema: ((_a2 = _ctx.field.attrs) == null ? void 0 : _a2.schema) ?? void 0
       }), {
         default: vue.withCtx(() => [
+          vue.createTextVNode(vue.toDisplayString(computedFieldData.value) + " ", 1),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.field.children, (child, ii) => {
             return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: ii }, [
               typeof child !== "string" ? (vue.openBlock(), vue.createBlock(_component_BglField, {
@@ -20483,8 +20493,8 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     const toPercentage = vue.computed(() => (validTo.value - min2) / (max2 - min2) * 100);
     vue.watch(() => props2.modelValue, (newVal) => {
       if (Array.isArray(newVal) && multiRange) {
-        from.value = newVal[0];
-        to2.value = newVal[1];
+        from.value = newVal[0] ?? min2;
+        to2.value = newVal[1] ?? max2;
       } else if (!Array.isArray(newVal)) {
         from.value = newVal ?? min2;
         to2.value = max2;
@@ -20522,7 +20532,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
             class: "from",
             type: "range",
             min: vue.unref(min2),
-            max: vue.unref(multiRange) ? validTo.value : vue.unref(max2),
+            max: vue.unref(max2),
             step: vue.unref(step),
             required: _ctx.required,
             disabled: vue.unref(disabled),
@@ -20534,7 +20544,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
             value: validTo.value,
             class: "to",
             type: "range",
-            min: validFrom.value,
+            min: vue.unref(min2),
             max: vue.unref(max2),
             step: vue.unref(step),
             required: _ctx.required,
@@ -20610,7 +20620,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-c427a28c"]]);
+const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-36a4519c"]]);
 const tableTools = [
   "mergeCells",
   "splitCells",
@@ -32793,7 +32803,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   emits: /* @__PURE__ */ vue.mergeModels(["update:selectedItems", "orderBy", "select", "lastItemVisible"], ["update:loading", "update:itemHeight", "update:selectedItems"]),
   setup(__props, { emit: __emit }) {
     vue.useCssVars((_ctx) => ({
-      "19ae1fec": vue.unref(computedItemHeight)
+      "f80ef6d8": vue.unref(computedItemHeight)
     }));
     const emit2 = __emit;
     const NON_DIGIT_REGEX = /[^\d.-]/g;
@@ -33020,7 +33030,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-248ceeff"]]);
+const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-4c462da5"]]);
 const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "Title",
   props: {
@@ -34371,7 +34381,7 @@ function uploadField(id, label, options) {
 function bglForm(idOrField, ...schema) {
   if (typeof idOrField === "string") {
     return {
-      $el: vue.markRaw(_sfc_main$R),
+      $el: "bagelform",
       id: idOrField,
       attrs: {
         schema: [idOrField, ...schema]
@@ -34379,7 +34389,7 @@ function bglForm(idOrField, ...schema) {
     };
   }
   return {
-    $el: vue.markRaw(_sfc_main$R),
+    $el: "bagelform",
     attrs: {
       schema: [idOrField, ...schema]
     }

package/dist/index.mjs

@@ -59,7 +59,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$U = ["aria-expanded", "aria-controls"];
+const _hoisted_1$V = ["aria-expanded", "aria-controls"];
 const _hoisted_2$B = { class: "accordion-label" };
 const _hoisted_3$s = ["id", "aria-hidden"];
 const _sfc_main$16 = /* @__PURE__ */ defineComponent({
@@ -136,7 +136,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
           }, [
             createVNode(unref(_sfc_main$d), { icon: computedIcon.value }, null, 8, ["icon"])
           ], 2)) : createCommentVNode("", true)
-        ], 8, _hoisted_1$U),
+        ], 8, _hoisted_1$V),
         createVNode(Transition, { name: "expand" }, {
           default: withCtx(() => [
             unref(isOpen) ? (openBlock(), createElementBlock("div", {
@@ -162,7 +162,7 @@ const _export_sfc = (sfc, props2) => {
   return target;
 };
 const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$16, [["__scopeId", "data-v-1e73ca3e"]]);
-const _hoisted_1$T = { class: "relative" };
+const _hoisted_1$U = { class: "relative" };
 const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   __name: "AddressSearch",
   emits: ["addressSelected"],
@@ -185,7 +185,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
       (_a2 = suggestion.value) == null ? void 0 : _a2.show();
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$T, [
+      return openBlock(), createElementBlock("div", _hoisted_1$U, [
         createVNode(unref(_sfc_main$W), {
           ref_key: "suggestion",
           ref: suggestion,
@@ -221,7 +221,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$S = {
+const _hoisted_1$T = {
   key: 1,
   class: "bgl_btn-flex"
 };
@@ -290,7 +290,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
           _ctx.loading ? (openBlock(), createBlock(unref(Loading), {
             key: 0,
             size: "15"
-          })) : (openBlock(), createElementBlock("div", _hoisted_1$S, [
+          })) : (openBlock(), createElementBlock("div", _hoisted_1$T, [
             _ctx.icon ? (openBlock(), createBlock(unref(_sfc_main$d), {
               key: 0,
               icon: _ctx.icon
@@ -313,7 +313,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   }
 });
 const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-c23a3626"]]);
-const _hoisted_1$R = ["dismissable"];
+const _hoisted_1$S = ["dismissable"];
 const _hoisted_2$A = { class: "m-0" };
 const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   __name: "Alert",
@@ -351,12 +351,12 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
           icon: "close",
           onClick: _cache[0] || (_cache[0] = ($event) => isDismissed.value = true)
         })
-      ], 10, _hoisted_1$R)) : createCommentVNode("", true);
+      ], 10, _hoisted_1$S)) : createCommentVNode("", true);
     };
   }
 });
 const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["__scopeId", "data-v-57141c32"]]);
-const _hoisted_1$Q = ["src", "alt"];
+const _hoisted_1$R = ["src", "alt"];
 const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   __name: "Avatar",
   props: {
@@ -375,7 +375,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
           key: 0,
           src: _ctx.src,
           alt: _ctx.name
-        }, null, 8, _hoisted_1$Q)) : (openBlock(), createElementBlock("p", {
+        }, null, 8, _hoisted_1$R)) : (openBlock(), createElementBlock("p", {
           key: 1,
           style: normalizeStyle({ "line-height": `${_ctx.size}px`, "font-size": `calc(1.5rem * ${_ctx.size} / 50)` })
         }, toDisplayString((_ctx.fallback || unref(initials)(_ctx.name || "")).toUpperCase()), 5))
@@ -414,6 +414,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   }
 });
 const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-2f3caf93"]]);
+const _hoisted_1$Q = { key: 1 };
 const _sfc_main$10 = /* @__PURE__ */ defineComponent({
   __name: "BglComponent",
   props: {
@@ -503,6 +504,12 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
         updateField(props2.id, val);
       }
     });
+    const computedFieldData = computed(
+      () => {
+        var _a2, _b;
+        return ((_b = (_a2 = props2.field).transform) == null ? void 0 : _b.call(_a2, fieldData.value, props2.modelValue)) ?? fieldData.value;
+      }
+    );
     const vIf = computed(() => {
       if (props2.field["v-if"] === void 0 && props2.field.vIf === void 0) return true;
       if (typeof props2.field["v-if"] === "boolean" || typeof props2.field.vIf === "boolean") return props2.field["v-if"];
@@ -543,14 +550,16 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
       }), {
         default: withCtx(() => [
           _ctx.field.$el === "form" ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-            createTextVNode(toDisplayString(fieldData.value) + " ", 1),
+            createTextVNode(toDisplayString(computedFieldData.value) + " ", 1),
             (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.field.children, (child, ii) => {
-              return openBlock(), createBlock(_component_BglComponent, {
-                id: [props2.id, child.id].filter(Boolean).join("."),
-                key: child.id || ii,
-                field: child,
-                "parent-path": props2.id
-              }, null, 8, ["id", "field", "parent-path"]);
+              return openBlock(), createElementBlock(Fragment, { key: ii }, [
+                typeof child !== "string" ? (openBlock(), createBlock(_component_BglComponent, {
+                  key: 0,
+                  id: [props2.id, child.id].filter(Boolean).join("."),
+                  field: child,
+                  "parent-path": props2.id
+                }, null, 8, ["id", "field", "parent-path"])) : (openBlock(), createElementBlock("span", _hoisted_1$Q, toDisplayString(child), 1))
+              ], 64);
             }), 128))
           ], 64))
         ]),
@@ -10009,7 +10018,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
       if (typeof props2.field.vIf === "function") return props2.field.vIf(fieldData.value, formState == null ? void 0 : formState.data.value);
       return true;
     });
-    computed(
+    const computedFieldData = computed(
       () => {
         var _a2, _b;
         return ((_b = (_a2 = props2.field).transform) == null ? void 0 : _b.call(_a2, fieldData.value, formState == null ? void 0 : formState.data.value)) ?? fieldData.value;
@@ -10047,6 +10056,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
         schema: ((_a2 = _ctx.field.attrs) == null ? void 0 : _a2.schema) ?? void 0
       }), {
         default: withCtx(() => [
+          createTextVNode(toDisplayString(computedFieldData.value) + " ", 1),
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.field.children, (child, ii) => {
             return openBlock(), createElementBlock(Fragment, { key: ii }, [
               typeof child !== "string" ? (openBlock(), createBlock(_component_BglField, {
@@ -20481,8 +20491,8 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     const toPercentage = computed(() => (validTo.value - min2) / (max2 - min2) * 100);
     watch(() => props2.modelValue, (newVal) => {
       if (Array.isArray(newVal) && multiRange) {
-        from.value = newVal[0];
-        to2.value = newVal[1];
+        from.value = newVal[0] ?? min2;
+        to2.value = newVal[1] ?? max2;
       } else if (!Array.isArray(newVal)) {
         from.value = newVal ?? min2;
         to2.value = max2;
@@ -20520,7 +20530,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
             class: "from",
             type: "range",
             min: unref(min2),
-            max: unref(multiRange) ? validTo.value : unref(max2),
+            max: unref(max2),
             step: unref(step),
             required: _ctx.required,
             disabled: unref(disabled),
@@ -20532,7 +20542,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
             value: validTo.value,
             class: "to",
             type: "range",
-            min: validFrom.value,
+            min: unref(min2),
             max: unref(max2),
             step: unref(step),
             required: _ctx.required,
@@ -20608,7 +20618,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-c427a28c"]]);
+const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-36a4519c"]]);
 const tableTools = [
   "mergeCells",
   "splitCells",
@@ -32791,7 +32801,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   emits: /* @__PURE__ */ mergeModels(["update:selectedItems", "orderBy", "select", "lastItemVisible"], ["update:loading", "update:itemHeight", "update:selectedItems"]),
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "19ae1fec": unref(computedItemHeight)
+      "f80ef6d8": unref(computedItemHeight)
     }));
     const emit2 = __emit;
     const NON_DIGIT_REGEX = /[^\d.-]/g;
@@ -33018,7 +33028,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-248ceeff"]]);
+const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-4c462da5"]]);
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "Title",
   props: {
@@ -34369,7 +34379,7 @@ function uploadField(id, label, options) {
 function bglForm(idOrField, ...schema) {
   if (typeof idOrField === "string") {
     return {
-      $el: markRaw(_sfc_main$R),
+      $el: "bagelform",
       id: idOrField,
       attrs: {
         schema: [idOrField, ...schema]
@@ -34377,7 +34387,7 @@ function bglForm(idOrField, ...schema) {
     };
   }
   return {
-    $el: markRaw(_sfc_main$R),
+    $el: "bagelform",
     attrs: {
       schema: [idOrField, ...schema]
     }

package/dist/style.css

@@ -1180,28 +1180,28 @@ pre code.hljs{
 	color: var(--bgl-light-text);
 }
 
-.range-slider-position-txt[data-v-c427a28c]{
+.range-slider-position-txt[data-v-36a4519c]{
 	margin-inline-start:  calc((var(--progress) * 1%) - (var(--bgl-range-thumb-size) * var(--progress) / 100));
 	top: calc(var(--bgl-range-thumb-size) / 2 ) ;
 	transition: transform 0.1s, opacity 0.5s, top 0.5s;
 	transform: scale(0.5);
 	width: var(--bgl-range-thumb-size);
 }
-.range-slider:hover .range-slider-position-txt[data-v-c427a28c]{
+.range-slider:hover .range-slider-position-txt[data-v-36a4519c]{
 	opacity: 1;
 	transform: scale(1);
 	top: calc(var(--bgl-range-thumb-size) / 1) ;
 }
-.range-slider[data-v-c427a28c] {
+.range-slider[data-v-36a4519c] {
 	height: var(--bgl-range-track-size);
 	display: flex;
 	align-items: center;
 	margin-top: calc(var(--bgl-range-thumb-size) / 2 + 0.5rem) ;
 }
-.range-slider-txt[data-v-c427a28c]{
+.range-slider-txt[data-v-36a4519c]{
 	margin-top: calc(var(--bgl-range-thumb-size) / 2) !important;
 }
-input[type="range"][data-v-c427a28c] {
+input[type="range"][data-v-36a4519c] {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -1211,7 +1211,7 @@ input[type="range"][data-v-c427a28c] {
   appearance: none;
   margin: 0;
 }
-input[type="range"][data-v-c427a28c]::-webkit-slider-thumb {
+input[type="range"][data-v-36a4519c]::-webkit-slider-thumb {
   pointer-events: all;
   appearance: none;
   width: var(--bgl-range-thumb-size);
@@ -1224,18 +1224,18 @@ input[type="range"][data-v-c427a28c]::-webkit-slider-thumb {
   cursor: grab;
   transition: var(--bgl-transition);
 }
-input[type="range"][data-v-c427a28c]::-webkit-slider-thumb:hover {
+input[type="range"][data-v-36a4519c]::-webkit-slider-thumb:hover {
 	box-shadow: 0 0 0 calc(var(--bgl-range-thumb-size) / 2) var(--bgl-primary-tint);
 	filter: brightness(90%);
 }
-input[type="range"][data-v-c427a28c]:focus::-webkit-slider-thumb {
+input[type="range"][data-v-36a4519c]:focus::-webkit-slider-thumb {
   outline: none;
   box-shadow: 0 0 0 calc(var(--bgl-range-thumb-size) / 2.2) var(--bgl-primary-tint);
 }
-input[type="range"][data-v-c427a28c]:active::-webkit-slider-thumb {
+input[type="range"][data-v-36a4519c]:active::-webkit-slider-thumb {
 	cursor: grabbing;
 }
-.track[data-v-c427a28c] {
+.track[data-v-36a4519c] {
   height: var(--bgl-range-track-height);
   background: var(--bgl-bg);
   margin-inline-start: calc(var(--bgl-range-thumb-size) / 2);
@@ -3488,22 +3488,22 @@ body:has(.bg-dark.is-active) {
   background: transparent;
 }
 
-.table-list-wrap[data-v-248ceeff] {
+.table-list-wrap[data-v-4c462da5] {
 	min-height: 150px;
 }
-.selected[data-v-248ceeff] {
+.selected[data-v-4c462da5] {
 	background: var(--bgl-primary-tint);
 }
-tbody tr.selected[data-v-248ceeff]:hover {
+tbody tr.selected[data-v-4c462da5]:hover {
 	background: var(--bgl-primary-light);
 }
-.loading-table[data-v-248ceeff] {
+.loading-table[data-v-4c462da5] {
 	position: relative;
 }
-.inset[data-v-248ceeff] {
+.inset[data-v-4c462da5] {
 	inset: 0;
 }
-.loading-table-animation[data-v-248ceeff] {
+.loading-table-animation[data-v-4c462da5] {
 	--size: 60px;
 	top: 30vh;
 	inset-inline-start: calc(50% - var(--size));
@@ -3511,9 +3511,9 @@ tbody tr.selected[data-v-248ceeff]:hover {
 	border-top: 4px solid var(--bgl-primary);
 	width: var(--size);
 	height: var(--size);
-	animation: loading-table-248ceeff 1s linear infinite;
+	animation: loading-table-4c462da5 1s linear infinite;
 }
-@keyframes loading-table-248ceeff {
+@keyframes loading-table-4c462da5 {
 0% {
 		transform: translate(-50%, -50%) rotate(0deg);
 }
@@ -3521,51 +3521,51 @@ tbody tr.selected[data-v-248ceeff]:hover {
 		transform: translate(-50%, -50%) rotate(360deg);
 }
 }
-.list-arrows[data-v-248ceeff] {
+.list-arrows[data-v-4c462da5] {
 	opacity: 0;
 }
-.list-arrows .bgl_icon-font[data-v-248ceeff] {
+.list-arrows .bgl_icon-font[data-v-4c462da5] {
 	transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-248ceeff] {
+.list-arrows.sorted[data-v-4c462da5] {
 	opacity: 1;
 }
-.col img[data-v-248ceeff] {
+.col img[data-v-4c462da5] {
 	height: 35px;
 	margin-top: -14px;
 	margin-bottom: -14px;
 	border-radius: 5px;
 }
-.list-arrows.sorted .desc[data-v-248ceeff] {
+.list-arrows.sorted .desc[data-v-4c462da5] {
 	transform: rotate(180deg);
 	display: inline-block;
 }
-table[data-v-248ceeff] {
+table[data-v-4c462da5] {
 	border-spacing: 0 15px;
 	border-collapse: collapse;
 	width: 100%;
 }
-th[data-v-248ceeff] {
+th[data-v-4c462da5] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
 	top: 0;
 	z-index: 2;
 	background: var(--bgl-box-bg);
-	height: var(--19ae1fec);
+	height: var(--f80ef6d8);
 	vertical-align: bottom;
 	font-weight: 400;
 	text-align: start;
 }
-.embedded-field[data-v-248ceeff] {
+.embedded-field[data-v-4c462da5] {
 	margin-bottom: -0.2rem;
 	margin-top: -0.2rem;
 }
-.row[data-v-248ceeff] {
+.row[data-v-4c462da5] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 }
-.row.first-row[data-v-248ceeff] {
+.row.first-row[data-v-4c462da5] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
@@ -3574,7 +3574,7 @@ th[data-v-248ceeff] {
 	background: var(--bgl-box-bg);
 	vertical-align: bottom;
 }
-.row.first-row[data-v-248ceeff]::after {
+.row.first-row[data-v-4c462da5]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -3582,30 +3582,30 @@ th[data-v-248ceeff] {
 	right: 0;
 	bottom: -1px;
 }
-.first-row .col[data-v-248ceeff] {
+.first-row .col[data-v-4c462da5] {
 	cursor: pointer;
 	background: var(--bgl-box-bg);
 }
-.col[data-v-248ceeff] {
+.col[data-v-4c462da5] {
 	white-space: nowrap;
 	padding: 0.75rem 1rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 	align-items: center;
 }
-.col[data-v-248ceeff]:has(.bagel-input) {
+.col[data-v-4c462da5]:has(.bagel-input) {
 	padding: 0rem 0.25rem;
 }
-.col > div[data-v-248ceeff] {
+.col > div[data-v-4c462da5] {
 	display: flex;
 	gap: 0.5rem;
 }
-.max-col-width[data-v-248ceeff] {
+.max-col-width[data-v-4c462da5] {
 	max-width: 30vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.col.check .bgl_icon-font[data-v-248ceeff] {
+.col.check .bgl_icon-font[data-v-4c462da5] {
 	border-radius: 100%;
 	background: var(--bgl-blue-20);
 	color: var(--bgl-primary);
@@ -3616,35 +3616,35 @@ th[data-v-248ceeff] {
 	justify-content: center;
 	margin-top: -2px;
 }
-.rows[data-v-248ceeff] {
+.rows[data-v-4c462da5] {
 	font-size: 0.88em;
 }
-.table-list[data-v-248ceeff] {
+.table-list[data-v-4c462da5] {
 	height: 100%;
 	position: relative;
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	overflow: auto;
 }
-.BagelTable .table-list[data-v-248ceeff] {
+.BagelTable .table-list[data-v-4c462da5] {
 	overflow: unset;
 }
-.row-item[data-v-248ceeff] {
-	height: var(--19ae1fec);
+.row-item[data-v-4c462da5] {
+	height: var(--f80ef6d8);
 	transition: all 200ms ease;
 }
-.row-item[data-v-248ceeff]:hover {
+.row-item[data-v-4c462da5]:hover {
 	background: var(--bgl-gray-light);
 }
-.row-item input[type='checkbox'][data-v-248ceeff] {
+.row-item input[type='checkbox'][data-v-4c462da5] {
 	margin-top: 0.45rem !important;
 	accent-color: var(--bgl-accent-color);
 }
-.infinite-wrapper[data-v-248ceeff] {
+.infinite-wrapper[data-v-4c462da5] {
 	overflow-y: auto;
 	width: 100%;
 }
-input[type='checkbox'][data-v-248ceeff] {
+input[type='checkbox'][data-v-4c462da5] {
 	margin-top: 0.3rem !important;
 	accent-color: var(--bgl-accent-color);
 	transform: scale(1.2);
@@ -3656,7 +3656,7 @@ input[type='checkbox'][data-v-248ceeff] {
 	height: 0.85rem;
 	width: 0.85rem;
 }
-input[type='checkbox'][data-v-248ceeff]::before {
+input[type='checkbox'][data-v-4c462da5]::before {
 	content: '';
 	height: 0.85rem;
 	width: 0.85rem;
@@ -3669,18 +3669,18 @@ input[type='checkbox'][data-v-248ceeff]::before {
 	transform: scale(1);
 	position: absolute;
 }
-input[type='checkbox'][data-v-248ceeff]:hover::before {
+input[type='checkbox'][data-v-4c462da5]:hover::before {
 	opacity: 0.2;
 	transform: scale(2);
 }
-[lang='he'] [dir='ltr'][data-v-248ceeff] {
+[lang='he'] [dir='ltr'][data-v-4c462da5] {
 	text-align: right;
 }
-th input[type='checkbox'][data-v-248ceeff] {
+th input[type='checkbox'][data-v-4c462da5] {
 	transform: translateY(0.2rem) scale(1.2);
 	accent-color: var(--bgl-accent-color);
 }
-th[data-v-248ceeff]::after {
+th[data-v-4c462da5]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -3688,24 +3688,24 @@ th[data-v-248ceeff]::after {
 	right: 0;
 	bottom: -1px;
 }
-tr[data-v-248ceeff] {
+tr[data-v-4c462da5] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 	align-items: center;
 }
-td[data-v-248ceeff],
-th[data-v-248ceeff] {
+td[data-v-4c462da5],
+th[data-v-4c462da5] {
 	white-space: nowrap;
 	padding: 0.75rem 0.65rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 }
-tbody tr[data-v-248ceeff] {
+tbody tr[data-v-4c462da5] {
 	font-size: 0.88em;
-	height: var(--19ae1fec);
+	height: var(--f80ef6d8);
 	transition: all 200ms ease;
 }
-tbody tr[data-v-248ceeff]:hover {
+tbody tr[data-v-4c462da5]:hover {
 	background: var(--bgl-gray-light);
 }
 

package/dist/utils/BagelFormUtils.d.ts

@@ -67,120 +67,7 @@ export declare function uploadField(id: string, label?: string, options?: Upload
     };
 };
 export declare function bglForm(idOrField?: string | Field, ...schema: Field[]): {
-    $el: import('vue').Raw<{
-        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
-            label?: string;
-            fieldID?: string;
-            schema: import('..').BglFormSchemaFnT<any>;
-            modelValue?: {
-                [key: string]: any;
-            };
-            onDelete?: (id: string) => void;
-            onSubmit?: (data: any) => void;
-            status?: import('../components/form/BglForm.vue').FormStatus;
-            tag?: "template" | "form";
-        }> & Readonly<{
-            onSubmit?: ((...args: any[]) => any) | undefined;
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-            onDirty?: ((...args: any[]) => any) | undefined;
-        }>, {
-            submit: () => void;
-            validateForm: () => boolean;
-            deleteItem: () => void;
-            isDirty: import('vue').Ref<boolean, boolean>;
-            clearForm: () => void;
-        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-            submit: (...args: any[]) => void;
-            "update:modelValue": (...args: any[]) => void;
-            dirty: (...args: any[]) => void;
-        }, import('vue').PublicProps, {
-            tag: "template" | "form";
-            modelValue: {
-                [key: string]: any;
-            };
-        }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<{
-            label?: string;
-            fieldID?: string;
-            schema: import('..').BglFormSchemaFnT<any>;
-            modelValue?: {
-                [key: string]: any;
-            };
-            onDelete?: (id: string) => void;
-            onSubmit?: (data: any) => void;
-            status?: import('../components/form/BglForm.vue').FormStatus;
-            tag?: "template" | "form";
-        }> & Readonly<{
-            onSubmit?: ((...args: any[]) => any) | undefined;
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-            onDirty?: ((...args: any[]) => any) | undefined;
-        }>, {
-            submit: () => void;
-            validateForm: () => boolean;
-            deleteItem: () => void;
-            isDirty: import('vue').Ref<boolean, boolean>;
-            clearForm: () => void;
-        }, {}, {}, {}, {
-            tag: "template" | "form";
-            modelValue: {
-                [key: string]: any;
-            };
-        }>;
-        __isFragment?: never;
-        __isTeleport?: never;
-        __isSuspense?: never;
-    } & import('vue').ComponentOptionsBase<Readonly<{
-        label?: string;
-        fieldID?: string;
-        schema: import('..').BglFormSchemaFnT<any>;
-        modelValue?: {
-            [key: string]: any;
-        };
-        onDelete?: (id: string) => void;
-        onSubmit?: (data: any) => void;
-        status?: import('../components/form/BglForm.vue').FormStatus;
-        tag?: "template" | "form";
-    }> & Readonly<{
-        onSubmit?: ((...args: any[]) => any) | undefined;
-        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-        onDirty?: ((...args: any[]) => any) | undefined;
-    }>, {
-        submit: () => void;
-        validateForm: () => boolean;
-        deleteItem: () => void;
-        isDirty: import('vue').Ref<boolean, boolean>;
-        clearForm: () => void;
-    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-        submit: (...args: any[]) => void;
-        "update:modelValue": (...args: any[]) => void;
-        dirty: (...args: any[]) => void;
-    }, string, {
-        tag: "template" | "form";
-        modelValue: {
-            [key: string]: any;
-        };
-    }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
-        $slots: {
-            submit?(_: {
-                submit: () => void;
-                isDirty: boolean;
-                validateForm: () => boolean;
-            }): any;
-            submit?(_: {
-                submit: () => void;
-                isDirty: boolean;
-                validateForm: () => boolean;
-            }): any;
-            success?(_: {}): any;
-            error?(_: {}): any;
-        };
-    })>;
+    $el: string;
     id: string;
     attrs: {
         schema: (string | import('..').BaseBagelField<{
@@ -188,120 +75,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
         }>)[];
     };
 } | {
-    $el: import('vue').Raw<{
-        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
-            label?: string;
-            fieldID?: string;
-            schema: import('..').BglFormSchemaFnT<any>;
-            modelValue?: {
-                [key: string]: any;
-            };
-            onDelete?: (id: string) => void;
-            onSubmit?: (data: any) => void;
-            status?: import('../components/form/BglForm.vue').FormStatus;
-            tag?: "template" | "form";
-        }> & Readonly<{
-            onSubmit?: ((...args: any[]) => any) | undefined;
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-            onDirty?: ((...args: any[]) => any) | undefined;
-        }>, {
-            submit: () => void;
-            validateForm: () => boolean;
-            deleteItem: () => void;
-            isDirty: import('vue').Ref<boolean, boolean>;
-            clearForm: () => void;
-        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-            submit: (...args: any[]) => void;
-            "update:modelValue": (...args: any[]) => void;
-            dirty: (...args: any[]) => void;
-        }, import('vue').PublicProps, {
-            tag: "template" | "form";
-            modelValue: {
-                [key: string]: any;
-            };
-        }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<{
-            label?: string;
-            fieldID?: string;
-            schema: import('..').BglFormSchemaFnT<any>;
-            modelValue?: {
-                [key: string]: any;
-            };
-            onDelete?: (id: string) => void;
-            onSubmit?: (data: any) => void;
-            status?: import('../components/form/BglForm.vue').FormStatus;
-            tag?: "template" | "form";
-        }> & Readonly<{
-            onSubmit?: ((...args: any[]) => any) | undefined;
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-            onDirty?: ((...args: any[]) => any) | undefined;
-        }>, {
-            submit: () => void;
-            validateForm: () => boolean;
-            deleteItem: () => void;
-            isDirty: import('vue').Ref<boolean, boolean>;
-            clearForm: () => void;
-        }, {}, {}, {}, {
-            tag: "template" | "form";
-            modelValue: {
-                [key: string]: any;
-            };
-        }>;
-        __isFragment?: never;
-        __isTeleport?: never;
-        __isSuspense?: never;
-    } & import('vue').ComponentOptionsBase<Readonly<{
-        label?: string;
-        fieldID?: string;
-        schema: import('..').BglFormSchemaFnT<any>;
-        modelValue?: {
-            [key: string]: any;
-        };
-        onDelete?: (id: string) => void;
-        onSubmit?: (data: any) => void;
-        status?: import('../components/form/BglForm.vue').FormStatus;
-        tag?: "template" | "form";
-    }> & Readonly<{
-        onSubmit?: ((...args: any[]) => any) | undefined;
-        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-        onDirty?: ((...args: any[]) => any) | undefined;
-    }>, {
-        submit: () => void;
-        validateForm: () => boolean;
-        deleteItem: () => void;
-        isDirty: import('vue').Ref<boolean, boolean>;
-        clearForm: () => void;
-    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-        submit: (...args: any[]) => void;
-        "update:modelValue": (...args: any[]) => void;
-        dirty: (...args: any[]) => void;
-    }, string, {
-        tag: "template" | "form";
-        modelValue: {
-            [key: string]: any;
-        };
-    }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
-        $slots: {
-            submit?(_: {
-                submit: () => void;
-                isDirty: boolean;
-                validateForm: () => boolean;
-            }): any;
-            submit?(_: {
-                submit: () => void;
-                isDirty: boolean;
-                validateForm: () => boolean;
-            }): any;
-            success?(_: {}): any;
-            error?(_: {}): any;
-        };
-    })>;
+    $el: string;
     attrs: {
         schema: (import('..').BaseBagelField<{
             [key: string]: any;

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.1048",
+  "version": "0.0.1054",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/BglComponent.vue

@@ -117,6 +117,10 @@ const fieldData = $computed({
 	}
 })
 
+const computedFieldData = $computed(
+	() => props.field.transform?.(fieldData, props.modelValue as T) ?? fieldData
+)
+
 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']
@@ -161,14 +165,19 @@ const computedClass = $computed(
 			<slot />
 		</template>
 		<template v-else>
-			{{ fieldData }}
-			<BglComponent
+			{{ computedFieldData }}
+			<template
 				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"
-			/>
+				:key="ii"
+			>
+				<BglComponent
+					v-if="(typeof child !== 'string')"
+					:id="[props.id, child.id].filter(Boolean).join('.')"
+					:field="child"
+					:parent-path="props.id"
+				/>
+				<span v-else>{{ child }}</span>
+			</template>
 		</template>
 	</component>
 </template>

package/src/components/TableSchema.vue

@@ -113,7 +113,6 @@ function transform(rowData: any) {
 
 	for (const field of schemaFields) {
 		const fieldData = rowData[`${field.id}`]
-
 		const newFieldVal = field.transform?.(fieldData, rowData)
 
 		Object.assign(obj, {

package/src/components/form/BglField.vue

@@ -120,6 +120,7 @@ const computedClass = $computed(
 		:helptext="field.helptext"
 		:schema="field.attrs?.schema ?? undefined"
 	>
+		{{ computedFieldData }}
 		<template v-for="(child, ii) in field.children" :key="ii">
 			<BglField
 				v-if="(typeof child !== 'string')"

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

@@ -41,8 +41,8 @@ const toPercentage = $computed(() => ((validTo - min) / (max - min)) * 100)
 
 watch(() => props.modelValue, (newVal) => {
 	if (Array.isArray(newVal) && multiRange) {
-		from = newVal[0]
-		to = newVal[1]
+		from = newVal[0] ?? min
+		to = newVal[1] ?? max
 	} else if (!Array.isArray(newVal)) {
 		from = newVal ?? min
 		to = max
@@ -84,7 +84,7 @@ const displayTo = $computed(() => formatValue(validTo))
 				class="from"
 				type="range"
 				:min="min"
-				:max="multiRange ? validTo : max"
+				:max="max"
 				:step="step"
 				:required="required"
 				:disabled="disabled"
@@ -96,7 +96,7 @@ const displayTo = $computed(() => formatValue(validTo))
 				:value="validTo"
 				class="to"
 				type="range"
-				:min="validFrom"
+				:min="min"
 				:max="max"
 				:step="step"
 				:required="required"

package/src/utils/BagelFormUtils.ts

@@ -1,4 +1,4 @@
-import { BagelForm, type BglFormSchemaT, type Field, type Option, TelInput } from '@bagelink/vue'
+import { type BglFormSchemaT, type Field, type Option, TelInput } from '@bagelink/vue'
 import { markRaw } from 'vue'
 
 interface InputOptions {
@@ -192,7 +192,7 @@ export function uploadField(id: string, label?: string, options?: UploadOptions)
 export function bglForm(idOrField?: string | Field, ...schema: Field[]) {
 	if (typeof idOrField === 'string') {
 		return {
-			$el: markRaw(BagelForm),
+			$el: 'bagelform',
 			id: idOrField,
 			attrs: {
 				schema: [idOrField, ...schema],
@@ -200,7 +200,7 @@ export function bglForm(idOrField?: string | Field, ...schema: Field[]) {
 		}
 	}
 	return {
-		$el: markRaw(BagelForm),
+		$el: 'bagelform',
 		attrs: {
 			schema: [idOrField, ...schema]
 		},