@bagelink/vue 0.0.1043 → 0.0.1048

package/dist/index.mjs

@@ -59,7 +59,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$T = ["aria-expanded", "aria-controls"];
+const _hoisted_1$U = ["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$T),
+        ], 8, _hoisted_1$U),
         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$S = { class: "relative" };
+const _hoisted_1$T = { 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$S, [
+      return openBlock(), createElementBlock("div", _hoisted_1$T, [
         createVNode(unref(_sfc_main$W), {
           ref_key: "suggestion",
           ref: suggestion,
@@ -221,7 +221,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$R = {
+const _hoisted_1$S = {
   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$R, [
+          })) : (openBlock(), createElementBlock("div", _hoisted_1$S, [
             _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$Q = ["dismissable"];
+const _hoisted_1$R = ["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$Q)) : createCommentVNode("", true);
+      ], 10, _hoisted_1$R)) : createCommentVNode("", true);
     };
   }
 });
 const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["__scopeId", "data-v-57141c32"]]);
-const _hoisted_1$P = ["src", "alt"];
+const _hoisted_1$Q = ["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$P)) : (openBlock(), createElementBlock("p", {
+        }, null, 8, _hoisted_1$Q)) : (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))
@@ -559,7 +559,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$O = ["src"];
+const _hoisted_1$P = ["src"];
 const _hoisted_2$z = ["autoplay", "muted", "loop", "controls", "playsinline"];
 const _hoisted_3$r = ["src", "type"];
 const _sfc_main$$ = /* @__PURE__ */ defineComponent({
@@ -639,7 +639,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
           allowfullscreen: "",
           title: "Video",
           allow: "autoplay"
-        }, null, 12, _hoisted_1$O)) : _ctx.src ? (openBlock(), createElementBlock("video", {
+        }, null, 12, _hoisted_1$P)) : _ctx.src ? (openBlock(), createElementBlock("video", {
           key: 1,
           ref_key: "video",
           ref: video,
@@ -660,7 +660,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   }
 });
 const BglVideo = /* @__PURE__ */ _export_sfc(_sfc_main$$, [["__scopeId", "data-v-006552f6"]]);
-const _hoisted_1$N = {
+const _hoisted_1$O = {
   key: 0,
   class: "card_label"
 };
@@ -693,7 +693,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
         }])
       }, {
         default: withCtx(() => [
-          _ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1$N, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
+          _ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1$O, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
@@ -703,7 +703,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$M = ["dir"];
+const _hoisted_1$N = ["dir"];
 const _hoisted_2$y = {
   key: 0,
   class: "blocker"
@@ -916,7 +916,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
             }, void 0, true)
           ])
         ])
-      ], 14, _hoisted_1$M);
+      ], 14, _hoisted_1$N);
     };
   }
 });
@@ -6864,13 +6864,13 @@ var script = defineComponent({
     return { bar, canvas, direction, mouse };
   }
 });
-const _hoisted_1$L = {
+const _hoisted_1$M = {
   key: 0,
   class: "layer-hover-bar"
 };
 const _hoisted_2$x = ["x", "y", "width", "height"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return _ctx.mouse.hover ? (openBlock(), createElementBlock("g", _hoisted_1$L, [
+  return _ctx.mouse.hover ? (openBlock(), createElementBlock("g", _hoisted_1$M, [
     createElementVNode("rect", mergeProps({ class: "hover-bar" }, _ctx.barStyle, {
       x: _ctx.bar.x,
       y: _ctx.bar.y,
@@ -7022,7 +7022,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$K = {
+const _hoisted_1$L = {
   key: 0,
   class: "data"
 };
@@ -7079,7 +7079,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     const computedSchema = computed(() => getFallbackSchema([itemData.value], props2.showFields));
     return (_ctx, _cache) => {
       var _a2;
-      return __props.data ? (openBlock(), createElementBlock("div", _hoisted_1$K, [
+      return __props.data ? (openBlock(), createElementBlock("div", _hoisted_1$L, [
         _ctx.title ? (openBlock(), createBlock(unref(_sfc_main$4), {
           key: 0,
           label: _ctx.title
@@ -9735,7 +9735,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$J = { class: "px-1 pt-025 pb-1" };
+const _hoisted_1$K = { class: "px-1 pt-025 pb-1" };
 const _hoisted_2$v = { class: "ms-1" };
 const _sfc_main$V = /* @__PURE__ */ defineComponent({
   __name: "FieldSetVue",
@@ -9745,7 +9745,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("fieldset", _hoisted_1$J, [
+      return openBlock(), createElementBlock("fieldset", _hoisted_1$K, [
         createElementVNode("legend", _hoisted_2$v, toDisplayString(_ctx.legend || _ctx.label), 1),
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
       ]);
@@ -9797,7 +9797,7 @@ function useTabs(group) {
   });
   return { currentTab };
 }
-const _hoisted_1$I = ["onClick"];
+const _hoisted_1$J = ["onClick"];
 const _sfc_main$T = /* @__PURE__ */ defineComponent({
   __name: "TabsNav",
   props: {
@@ -9880,7 +9880,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
                 icon: tab.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
               createTextVNode(" " + toDisplayString(tabLabel(tab)), 1)
-            ], 10, _hoisted_1$I);
+            ], 10, _hoisted_1$J);
           }), 128))
         ], true)
       ], 2);
@@ -9949,11 +9949,12 @@ function useBagelFormState() {
   if (!state2) throw new Error("BagelFormState must be provided");
   return state2;
 }
+const _hoisted_1$I = { key: 1 };
 const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "BglField",
   props: {
     field: {},
-    id: {},
+    fieldID: {},
     modelValue: {},
     parentPath: {}
   },
@@ -9979,25 +9980,25 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
       if (props2.field.$el === "file") return FileUpload;
       if (props2.field.$el === "date") return _sfc_main$K;
       if (props2.field.$el === "tabs") return TabsNav;
-      if (props2.field.$el === "form") return _sfc_main$R;
+      if (props2.field.$el === "bglform") return _sfc_main$R;
       return props2.field.$el ?? "div";
     });
     const fieldData = computed({
       get: () => {
-        if (!props2.id) return props2.field.defaultValue ?? (props2.field.$el === "form" ? {} : "");
-        const value = formState == null ? void 0 : formState.getFieldData(props2.id);
+        if (!props2.fieldID) return props2.field.defaultValue ?? (props2.field.$el === "form" ? {} : "");
+        const value = formState == null ? void 0 : formState.getFieldData(props2.fieldID);
         if (props2.field.$el === "form" && !value) return {};
         return value ?? "";
       },
       set: (val) => {
-        if (!props2.id) return;
-        const currentValue = formState == null ? void 0 : formState.getFieldData(props2.id);
+        if (!props2.fieldID) return;
+        const currentValue = formState == null ? void 0 : formState.getFieldData(props2.fieldID);
         if (JSON.stringify(val) === JSON.stringify(currentValue)) return;
         emit2("update:modelValue", val);
         if (props2.field.onUpdate) {
           props2.field.onUpdate(val, currentValue);
         }
-        formState == null ? void 0 : formState.updateField(props2.id, val);
+        formState == null ? void 0 : formState.updateField(props2.fieldID, val);
       }
     });
     const vIf = computed(() => {
@@ -10019,6 +10020,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     );
     const computedAttrs = computed(() => {
       const attrs = { ...customAttrs.value, ...props2.field.attrs };
+      delete attrs.schema;
       return bindAttrs(attrs, fieldData.value, formState == null ? void 0 : formState.data.value);
     });
     const computedClass = computed(
@@ -10031,9 +10033,9 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
       var _a2;
       const _component_BglField = resolveComponent("BglField", true);
       return vIf.value ? (openBlock(), createBlock(resolveDynamicComponent(is4.value), mergeProps({ key: 0 }, computedAttrs.value, {
-        id: props2.id,
         modelValue: fieldData.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => fieldData.value = $event),
+        fieldID: props2.fieldID,
         required: _ctx.field.required,
         class: computedClass.value,
         label: _ctx.field.label,
@@ -10045,17 +10047,19 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
         schema: ((_a2 = _ctx.field.attrs) == null ? void 0 : _a2.schema) ?? void 0
       }), {
         default: withCtx(() => [
-          _ctx.field.$el === "form" ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.field.children, (child, ii) => {
-            return openBlock(), createBlock(_component_BglField, {
-              id: [props2.id, child.id].filter(Boolean).join("."),
-              key: child.id || ii,
-              field: child,
-              "parent-path": props2.id
-            }, null, 8, ["id", "field", "parent-path"]);
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.field.children, (child, ii) => {
+            return openBlock(), createElementBlock(Fragment, { key: ii }, [
+              typeof child !== "string" ? (openBlock(), createBlock(_component_BglField, {
+                key: 0,
+                fieldID: [props2.fieldID, child.id].filter(Boolean).join("."),
+                field: child,
+                "parent-path": props2.fieldID
+              }, null, 8, ["fieldID", "field", "parent-path"])) : (openBlock(), createElementBlock("span", _hoisted_1$I, toDisplayString(child), 1))
+            ], 64);
           }), 128))
         ]),
-        _: 3
-      }, 16, ["id", "modelValue", "required", "class", "label", "placeholder", "defaultValue", "disabled", "options", "helptext", "schema"])) : createCommentVNode("", true);
+        _: 1
+      }, 16, ["modelValue", "fieldID", "required", "class", "label", "placeholder", "defaultValue", "disabled", "options", "helptext", "schema"])) : createCommentVNode("", true);
     };
   }
 });
@@ -10063,12 +10067,13 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "BglForm",
   props: {
     label: {},
-    id: {},
+    fieldID: {},
     schema: {},
     modelValue: { default: () => ({}) },
     onDelete: {},
     onSubmit: {},
-    status: {}
+    status: {},
+    tag: { default: "form" }
   },
   emits: ["update:modelValue", "submit", "dirty"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -10079,7 +10084,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     const instAt = /* @__PURE__ */ new Date();
     const timeSinceInst = () => Date.now() - instAt.getTime();
     const existingFormState = inject(FORM_STATE_KEY);
-    const isNested = Boolean(existingFormState && props2.id);
+    const isNested = Boolean(existingFormState && props2.fieldID);
     const { data: data2, isDirty } = isNested ? existingFormState : provideBagelFormState(props2.modelValue);
     if (!isNested) {
       watch(() => props2.modelValue, (newVal) => {
@@ -10157,13 +10162,13 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        _ctx.id ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        _ctx.tag === "template" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(computedSchema.value, (field, i2) => {
             return openBlock(), createBlock(unref(_sfc_main$S), {
-              id: [_ctx.id, field.id].filter(Boolean).join("."),
               key: field.id || `${i2}p`,
+              fieldID: field.id,
               field
-            }, null, 8, ["id", "field"]);
+            }, null, 8, ["fieldID", "field"]);
           }), 128)),
           renderSlot(_ctx.$slots, "submit", {
             submit: runSubmit,
@@ -10183,10 +10188,10 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
           }, null, 8, ["label"])) : createCommentVNode("", true),
           (openBlock(true), createElementBlock(Fragment, null, renderList(computedSchema.value, (field, i2) => {
             return openBlock(), createBlock(unref(_sfc_main$S), {
-              id: field.id,
               key: field.id || `${i2}p`,
+              fieldID: field.id,
               field
-            }, null, 8, ["id", "field"]);
+            }, null, 8, ["fieldID", "field"]);
           }), 128)),
           renderSlot(_ctx.$slots, "submit", {
             submit: runSubmit,
@@ -20545,22 +20550,65 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
             key: 1,
             class: "txt-center txt-12 range-slider-position-txt absolute line-height-1 opacity-0",
             style: normalizeStyle({ "--progress": `${fromPercentage.value}` })
-          }, toDisplayString(displayFrom.value), 5)) : createCommentVNode("", true),
+          }, [
+            !unref(multiRange) ? renderSlot(_ctx.$slots, "progress", {
+              key: 0,
+              progress: displayFrom.value,
+              min: unref(formatValue)(unref(min2)),
+              max: unref(formatValue)(unref(max2))
+            }, () => [
+              createTextVNode(toDisplayString(displayFrom.value), 1)
+            ], true) : createCommentVNode("", true),
+            unref(multiRange) ? renderSlot(_ctx.$slots, "from", {
+              key: 1,
+              from: displayFrom.value,
+              to: displayTo.value,
+              min: unref(formatValue)(unref(min2)),
+              max: unref(formatValue)(unref(max2))
+            }, () => [
+              createTextVNode(toDisplayString(displayFrom.value), 1)
+            ], true) : createCommentVNode("", true)
+          ], 4)) : createCommentVNode("", true),
           unref(multiRange) && validTo.value !== unref(max2) ? (openBlock(), createElementBlock("p", {
             key: 2,
             class: "txt-center txt-12 range-slider-position-txt opacity-0 line-height-1 absolute",
             style: normalizeStyle({ "--progress": `${toPercentage.value}` })
-          }, toDisplayString(displayTo.value), 5)) : createCommentVNode("", true)
+          }, [
+            renderSlot(_ctx.$slots, "to", {
+              to: displayTo.value,
+              from: displayFrom.value,
+              min: unref(formatValue)(unref(min2)),
+              max: unref(formatValue)(unref(max2))
+            }, () => [
+              createTextVNode(toDisplayString(displayTo.value), 1)
+            ], true)
+          ], 4)) : createCommentVNode("", true)
         ], 8, _hoisted_2$i),
         createElementVNode("p", _hoisted_6$8, [
-          createElementVNode("span", null, toDisplayString(unref(formatValue)(unref(min2))), 1),
-          createElementVNode("span", null, toDisplayString(unref(formatValue)(unref(max2))), 1)
+          renderSlot(_ctx.$slots, "min", {
+            max: unref(formatValue)(unref(max2)),
+            min: unref(formatValue)(unref(min2)),
+            from: displayFrom.value,
+            to: displayTo.value,
+            progress: displayFrom.value
+          }, () => [
+            createElementVNode("span", null, toDisplayString(unref(formatValue)(unref(min2))), 1)
+          ], true),
+          renderSlot(_ctx.$slots, "max", {
+            max: unref(formatValue)(unref(max2)),
+            min: unref(formatValue)(unref(min2)),
+            from: displayFrom.value,
+            to: displayTo.value,
+            progress: displayFrom.value
+          }, () => [
+            createElementVNode("span", null, toDisplayString(unref(formatValue)(unref(max2))), 1)
+          ], true)
         ])
       ]);
     };
   }
 });
-const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-3616fbd2"]]);
+const RangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-c427a28c"]]);
 const tableTools = [
   "mergeCells",
   "splitCells",
@@ -34348,7 +34396,7 @@ function findBglFieldById(id, _schema) {
   for (const field of _schema) {
     if (field.id === id) return field;
     if (field.children && Number(field.children.length) > 0) {
-      const child = findBglFieldById(id, field.children);
+      const child = findBglFieldById(id, field.children.filter((c2) => typeof c2 !== "string"));
       if (child) return child;
     }
   }

package/dist/style.css

@@ -1180,28 +1180,28 @@ pre code.hljs{
 	color: var(--bgl-light-text);
 }
 
-.range-slider-position-txt[data-v-3616fbd2]{
+.range-slider-position-txt[data-v-c427a28c]{
 	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-3616fbd2]{
+.range-slider:hover .range-slider-position-txt[data-v-c427a28c]{
 	opacity: 1;
 	transform: scale(1);
 	top: calc(var(--bgl-range-thumb-size) / 1) ;
 }
-.range-slider[data-v-3616fbd2] {
+.range-slider[data-v-c427a28c] {
 	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-3616fbd2]{
+.range-slider-txt[data-v-c427a28c]{
 	margin-top: calc(var(--bgl-range-thumb-size) / 2) !important;
 }
-input[type="range"][data-v-3616fbd2] {
+input[type="range"][data-v-c427a28c] {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -1211,7 +1211,7 @@ input[type="range"][data-v-3616fbd2] {
   appearance: none;
   margin: 0;
 }
-input[type="range"][data-v-3616fbd2]::-webkit-slider-thumb {
+input[type="range"][data-v-c427a28c]::-webkit-slider-thumb {
   pointer-events: all;
   appearance: none;
   width: var(--bgl-range-thumb-size);
@@ -1224,18 +1224,18 @@ input[type="range"][data-v-3616fbd2]::-webkit-slider-thumb {
   cursor: grab;
   transition: var(--bgl-transition);
 }
-input[type="range"][data-v-3616fbd2]::-webkit-slider-thumb:hover {
+input[type="range"][data-v-c427a28c]::-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-3616fbd2]:focus::-webkit-slider-thumb {
+input[type="range"][data-v-c427a28c]: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-3616fbd2]:active::-webkit-slider-thumb {
+input[type="range"][data-v-c427a28c]:active::-webkit-slider-thumb {
 	cursor: grabbing;
 }
-.track[data-v-3616fbd2] {
+.track[data-v-c427a28c] {
   height: var(--bgl-range-track-height);
   background: var(--bgl-bg);
   margin-inline-start: calc(var(--bgl-range-thumb-size) / 2);

package/dist/types/BagelForm.d.ts

@@ -24,7 +24,7 @@ export interface BaseBagelField<T = {
     'id'?: string;
     'label'?: string;
     'placeholder'?: string;
-    'children'?: Field<T>[];
+    'children'?: (Field<T> | string)[];
     'class'?: AttributeValue | AttributeFn<T>;
     'attrs'?: Attributes<T>;
     'required'?: boolean;

package/dist/types/BagelForm.d.ts.map

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

package/dist/utils/BagelFormUtils.d.ts

@@ -70,7 +70,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
     $el: import('vue').Raw<{
         new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
             label?: string;
-            id?: string;
+            fieldID?: string;
             schema: import('..').BglFormSchemaFnT<any>;
             modelValue?: {
                 [key: string]: any;
@@ -78,6 +78,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             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;
@@ -93,6 +94,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             "update:modelValue": (...args: any[]) => void;
             dirty: (...args: any[]) => void;
         }, import('vue').PublicProps, {
+            tag: "template" | "form";
             modelValue: {
                 [key: string]: any;
             };
@@ -105,7 +107,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             Defaults: {};
         }, Readonly<{
             label?: string;
-            id?: string;
+            fieldID?: string;
             schema: import('..').BglFormSchemaFnT<any>;
             modelValue?: {
                 [key: string]: any;
@@ -113,6 +115,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             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;
@@ -124,6 +127,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             isDirty: import('vue').Ref<boolean, boolean>;
             clearForm: () => void;
         }, {}, {}, {}, {
+            tag: "template" | "form";
             modelValue: {
                 [key: string]: any;
             };
@@ -133,7 +137,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
         __isSuspense?: never;
     } & import('vue').ComponentOptionsBase<Readonly<{
         label?: string;
-        id?: string;
+        fieldID?: string;
         schema: import('..').BglFormSchemaFnT<any>;
         modelValue?: {
             [key: string]: any;
@@ -141,6 +145,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
         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;
@@ -156,6 +161,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
         "update:modelValue": (...args: any[]) => void;
         dirty: (...args: any[]) => void;
     }, string, {
+        tag: "template" | "form";
         modelValue: {
             [key: string]: any;
         };
@@ -185,7 +191,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
     $el: import('vue').Raw<{
         new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
             label?: string;
-            id?: string;
+            fieldID?: string;
             schema: import('..').BglFormSchemaFnT<any>;
             modelValue?: {
                 [key: string]: any;
@@ -193,6 +199,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             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;
@@ -208,6 +215,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             "update:modelValue": (...args: any[]) => void;
             dirty: (...args: any[]) => void;
         }, import('vue').PublicProps, {
+            tag: "template" | "form";
             modelValue: {
                 [key: string]: any;
             };
@@ -220,7 +228,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             Defaults: {};
         }, Readonly<{
             label?: string;
-            id?: string;
+            fieldID?: string;
             schema: import('..').BglFormSchemaFnT<any>;
             modelValue?: {
                 [key: string]: any;
@@ -228,6 +236,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             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;
@@ -239,6 +248,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
             isDirty: import('vue').Ref<boolean, boolean>;
             clearForm: () => void;
         }, {}, {}, {}, {
+            tag: "template" | "form";
             modelValue: {
                 [key: string]: any;
             };
@@ -248,7 +258,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
         __isSuspense?: never;
     } & import('vue').ComponentOptionsBase<Readonly<{
         label?: string;
-        id?: string;
+        fieldID?: string;
         schema: import('..').BglFormSchemaFnT<any>;
         modelValue?: {
             [key: string]: any;
@@ -256,6 +266,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
         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;
@@ -271,6 +282,7 @@ export declare function bglForm(idOrField?: string | Field, ...schema: Field[]):
         "update:modelValue": (...args: any[]) => void;
         dirty: (...args: any[]) => void;
     }, string, {
+        tag: "template" | "form";
         modelValue: {
             [key: string]: any;
         };