@bagelink/vue 1.0.50 → 1.0.54

package/dist/index.mjs

@@ -10530,6 +10530,24 @@ const SLOT_VALUE_COMPONENTS$1 = /* @__PURE__ */ new Set(["div", "span", "p"]);
 const SRC_VALUE_COMPONENTS$1 = /* @__PURE__ */ new Set(["img", "iframe"]);
 function useSchemaField(optns) {
   const { mode = "form", getRowData, onUpdate, includeUnset = false } = optns;
+  function renderObject(obj, depth = 0) {
+    if (obj === null || obj === void 0) return "";
+    if (typeof obj !== "object") return String(obj);
+    if (Array.isArray(obj)) return obj.map((item) => renderObject(item, depth + 1)).join(", ");
+    const indent = depth > 0 ? "  ".repeat(depth) : "";
+    const nextIndent = "  ".repeat(depth + 1);
+    const entries = Object.entries(obj);
+    if (entries.length === 0) return "{}";
+    if (depth > 0) {
+      return `{
+${entries.map(([key, value]) => `${nextIndent}${key}: ${renderObject(value, depth + 1)}`).join(",\n")}
+${indent}}`;
+    }
+    return entries.map(([key, value]) => {
+      const valueStr = typeof value === "object" && value !== null ? renderObject(value, depth + 1) : String(value);
+      return `${key}: ${valueStr}`;
+    }).join("\n");
+  }
   function getComponent(field) {
     var _a;
     const componentMap = {
@@ -10669,7 +10687,7 @@ function useSchemaField(optns) {
       return h$2("div", { class: "preview-field" }, [
         h$2("div", { class: "field-label" }, `${field.label || keyToLabel(field.id || "")}:`),
         h$2("div", { class: "field-value" }, [
-          slotContent || (typeof field.$el === "object" ? h$2(Component, props2, componentSlots) : (transformedValue == null ? void 0 : transformedValue.toString()) || "")
+          slotContent || (typeof field.$el === "object" ? h$2(Component, props2, componentSlots) : typeof transformedValue === "object" && transformedValue !== null ? h$2("pre", { style: "margin: 0; white-space: pre-wrap; font-family: inherit; font-size: inherit;" }, renderObject(transformedValue)) : (transformedValue == null ? void 0 : transformedValue.toString()) || "")
         ])
       ]);
     }
@@ -14985,7 +15003,9 @@ function richText(id, label, options) {
     label,
     vIf: options == null ? void 0 : options.vIf,
     placeholder: options == null ? void 0 : options.placeholder,
-    attrs: {}
+    attrs: {
+      autocomplete: options == null ? void 0 : options.autocomplete
+    }
   };
 }
 function txtField(id, label, options) {
@@ -15002,7 +15022,8 @@ function txtField(id, label, options) {
     attrs: {
       type: options == null ? void 0 : options.type,
       pattern: options == null ? void 0 : options.pattern,
-      multiline: options == null ? void 0 : options.multiline
+      multiline: options == null ? void 0 : options.multiline,
+      autocomplete: options == null ? void 0 : options.autocomplete
     }
   };
 }
@@ -15022,7 +15043,8 @@ function selectField(id, label, options, config) {
       searchable: config == null ? void 0 : config.searchable,
       multiselect: config == null ? void 0 : config.multiselect,
       onSearch: config == null ? void 0 : config.onSearch,
-      clearable: config == null ? void 0 : config.clearable
+      clearable: config == null ? void 0 : config.clearable,
+      autocomplete: config == null ? void 0 : config.autocomplete
     }
   };
 }
@@ -15047,7 +15069,8 @@ function dateField(id, label, options) {
     defaultValue: options == null ? void 0 : options.defaultValue,
     vIf: options == null ? void 0 : options.vIf,
     attrs: {
-      disabled: options == null ? void 0 : options.disabled
+      disabled: options == null ? void 0 : options.disabled,
+      autocomplete: options == null ? void 0 : options.autocomplete
     }
   };
 }
@@ -15064,6 +15087,7 @@ function numField$1(id, label, options) {
     helptext: options == null ? void 0 : options.helptext,
     vIf: options == null ? void 0 : options.vIf,
     attrs: {
+      autocomplete: options == null ? void 0 : options.autocomplete,
       step: options == null ? void 0 : options.step,
       min: options == null ? void 0 : options.min,
       max: options == null ? void 0 : options.max,
@@ -15099,6 +15123,7 @@ function rangeField(id, label, options) {
     label,
     vIf: options == null ? void 0 : options.vIf,
     attrs: {
+      autocomplete: options == null ? void 0 : options.autocomplete,
       min: options == null ? void 0 : options.min,
       max: options == null ? void 0 : options.max,
       step: options == null ? void 0 : options.step,
@@ -15463,9 +15488,16 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
       formData.value = newData;
       emit2("update:modelValue", formData.value);
     }
+    const validateForm = () => {
+      var _a;
+      return ((_a = form.value) == null ? void 0 : _a.reportValidity()) ?? false;
+    };
+    let formError = ref();
     async function handleSubmit() {
       var _a;
       try {
+        const valid = validateForm();
+        if (!valid) return;
         if (formState.value === "submitting") return;
         formState.value = "submitting";
         await ((_a = props2.onSubmit) == null ? void 0 : _a.call(props2, formData.value));
@@ -15473,14 +15505,11 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
         formState.value = "success";
         window.parent.postMessage({ type: "BAGEL_FORM_SUCCESS", data: JSON.stringify(formData.value) }, "*");
       } catch (error) {
-        console.error("Submit error:", error);
         formState.value = "error";
+        formError.value = error;
+        console.error("Submit error:", formError.value);
       }
     }
-    const validateForm = () => {
-      var _a;
-      return ((_a = form.value) == null ? void 0 : _a.reportValidity()) ?? false;
-    };
     const { renderField } = useSchemaField({
       mode: "form",
       getRowData: () => ({
@@ -15496,6 +15525,13 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
       }
     });
     const renderSchemaField = (field) => renderField(field);
+    function handleSlotInputChange(event) {
+      const input = event.target;
+      if (input.name) {
+        const value = input.type === "checkbox" ? input.checked : input.value;
+        updateFormData(input.name, value);
+      }
+    }
     __expose({ form, isDirty, validateForm, resolveSchema, refreshSchema });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
@@ -15505,7 +15541,8 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
             ref_key: "form",
             ref: form,
             class: normalizeClass(props2.class),
-            onSubmit: withModifiers(handleSubmit, ["prevent"])
+            onSubmit: withModifiers(handleSubmit, ["prevent"]),
+            onInput: handleSlotInputChange
           }, [
             schemaState.value === "loading" ? renderSlot(_ctx.$slots, "loading", { key: 0 }, () => [
               createElementVNode("div", _hoisted_1$M, [
@@ -15539,7 +15576,10 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
           ], 64))
         ], 64)) : createCommentVNode("", true),
         formState.value === "success" ? renderSlot(_ctx.$slots, "success", { key: 1 }) : createCommentVNode("", true),
-        formState.value === "error" ? renderSlot(_ctx.$slots, "error", { key: 2 }) : createCommentVNode("", true)
+        formState.value === "error" ? renderSlot(_ctx.$slots, "error", {
+          key: 2,
+          error: unref(formError)
+        }) : createCommentVNode("", true)
       ], 64);
     };
   }
@@ -15665,7 +15705,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
       () => isPrimitiveType.value || props2.type === "object" && resolvedSchemaData.value.length > 0
     );
     const showMinimizeButton = computed(() => {
-      return resolvedSchemaData.value.length > 3 || resolvedSchemaData.value.some((schema) => schema.$el === "richtext");
+      return resolvedSchemaData.value.length > 2 || resolvedSchemaData.value.some((schema) => schema.$el === "richtext");
     });
     return (_ctx, _cache) => {
       const _component_Icon = resolveComponent("Icon");
@@ -15721,7 +15761,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
               thin: "",
               icon: "add",
               color: "gray",
-              class: "txt12",
+              class: "txt12 arrayAddButton",
               onClick: addItem
             }, {
               default: withCtx(() => [
@@ -17497,7 +17537,10 @@ const _hoisted_2$p = {
   class: "block"
 };
 const _hoisted_3$k = ["id", "placeholder", "disabled", "required", "readonly", "pattern", "onKeydown"];
-const _hoisted_4$d = { key: 1 };
+const _hoisted_4$d = {
+  key: 1,
+  class: "opacity-7 light"
+};
 const _hoisted_5$d = {
   key: 5,
   class: "flex column spinner"
@@ -17700,7 +17743,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-af266bf2"]]);
+const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-01b5487f"]]);
 const _hoisted_1$A = ["value", "autofocus", "onKeydown", "onPaste"];
 const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "OTP",
@@ -17822,6 +17865,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     pattern: {},
     shrink: { type: Boolean },
     disabled: { type: Boolean },
+    name: {},
     nativeInputAttrs: {},
     icon: {},
     iconStart: {},
@@ -17853,8 +17897,9 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => password.value = $event)
         }, props2, {
           type: inputType.value,
-          class: "mb-0"
-        }), null, 16, ["modelValue", "type"]),
+          class: "mb-0",
+          name: props2.name
+        }), null, 16, ["modelValue", "type", "name"]),
         createElementVNode("div", _hoisted_2$o, [
           createVNode(unref(Btn), {
             flat: "",
@@ -28356,15 +28401,19 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
 const TableField = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-e9632f79"]]);
 const _hoisted_1$o = ["title"];
 const _hoisted_2$e = ["for"];
-const _hoisted_3$b = ["id", "title", "autocomplete", "type", "placeholder", "disabled", "required", "pattern"];
-const _hoisted_4$6 = ["id", "title", "type", "rows", "placeholder", "disabled", "required", "pattern"];
-const _hoisted_5$6 = { key: 2 };
+const _hoisted_3$b = ["id", "name", "title", "autocomplete", "type", "placeholder", "disabled", "required", "pattern"];
+const _hoisted_4$6 = ["id", "name", "title", "type", "rows", "placeholder", "disabled", "required", "pattern"];
+const _hoisted_5$6 = {
+  key: 2,
+  class: "opacity-7 light"
+};
 const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "TextInput",
   props: {
     id: {},
     title: {},
     helptext: {},
+    name: {},
     placeholder: {},
     modelValue: { default: "" },
     label: {},
@@ -28448,6 +28497,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             ref_key: "input",
             ref: input,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(inputVal) ? inputVal.value = $event : inputVal = $event),
+            name: _ctx.name,
             title: _ctx.title,
             autocomplete: _ctx.autocomplete,
             type: _ctx.type,
@@ -28475,6 +28525,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             ref_key: "input",
             ref: input,
             "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isRef(inputVal) ? inputVal.value = $event : inputVal = $event),
+            name: _ctx.name,
             title: _ctx.title,
             type: _ctx.type,
             rows: inputRows.value,
@@ -28504,7 +28555,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-99e3ea36"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-dbcf2010"]]);
 const _hoisted_1$n = ["title"];
 const _hoisted_2$d = ["id", "required"];
 const _hoisted_3$a = ["for"];
@@ -34364,6 +34415,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                   class: "position-start",
                   icon: "close",
                   thin: "",
+                  round: "",
                   color: "white",
                   onClick: closeModal
                 })