@bagelink/vue 1.2.111 → 1.2.119

package/dist/index.mjs

@@ -14188,6 +14188,59 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
   }
 });
 const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-722373de"]]);
+function useHighlight() {
+  const hljs = ref(null);
+  const loaded = ref(false);
+  const loadHighlight = async () => {
+    if (loaded.value) return;
+    try {
+      await appendScript("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/highlight.min.js", { id: "hljs-cdn" });
+      await appendStyle("https://cdn.jsdelivr.net/npm/highlight.js/styles/atom-one-dark.min.css");
+      if (window.hljs) {
+        hljs.value = window.hljs;
+        loaded.value = true;
+      } else {
+        console.error("Failed to load highlight.js");
+      }
+    } catch (error) {
+      console.error("Error loading highlight.js:", error);
+    }
+  };
+  const escapeHtml = (unsafe) => {
+    return unsafe.replace(/[&<>"']/g, (m2) => {
+      const replacements = {
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': "&quot;",
+        "'": "&#039;"
+      };
+      return replacements[m2] || "";
+    });
+  };
+  const highlightCode = (code, language, autodetect = true, ignoreIllegals = true) => {
+    if (!hljs.value) return escapeHtml(code);
+    try {
+      const lang = language || "";
+      if (lang && !autodetect && !hljs.value.getLanguage(lang)) {
+        console.warn(`The language "${lang}" is not available.`);
+        return escapeHtml(code);
+      }
+      const result2 = autodetect ? hljs.value.highlightAuto(code) : hljs.value.highlight(code, { language: lang, ignoreIllegals });
+      return result2.value || escapeHtml(code);
+    } catch (error) {
+      console.error("Highlighting error:", error);
+      return escapeHtml(code);
+    }
+  };
+  return {
+    hljs,
+    loaded,
+    loadHighlight,
+    escapeHtml,
+    highlightCode
+  };
+}
 const _hoisted_1$L = {
   key: 0,
   class: "label"
@@ -14216,39 +14269,19 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     const emit2 = __emit;
     const code = ref(props2.modelValue || "");
     const editorRef = ref();
-    const loaded = ref(false);
-    const hljs = ref(null);
+    const { loaded, loadHighlight, highlightCode } = useHighlight();
     const maxHeight = computed(() => {
       const h2 = props2.height ?? "240px";
       return h2.match(/^\d+$/) ? `${h2}px` : h2;
     });
     const formattedCode = computed(() => {
-      if (!hljs.value) return escapeHtml(code.value);
-      try {
-        const lang = props2.language || "";
-        if (lang && !props2.autodetect && !hljs.value.getLanguage(lang)) {
-          console.warn(`The language "${lang}" is not available.`);
-          return escapeHtml(code.value);
-        }
-        const result2 = props2.autodetect ? hljs.value.highlightAuto(code.value) : hljs.value.highlight(code.value, { language: lang, ignoreIllegals: props2.ignoreIllegals });
-        return result2.value || escapeHtml(code.value);
-      } catch (error) {
-        console.error("Highlighting error:", error);
-        return escapeHtml(code.value);
-      }
-    });
-    function escapeHtml(unsafe) {
-      return unsafe.replace(/[&<>"']/g, (m2) => {
-        const replacements = {
-          "&": "&amp;",
-          "<": "&lt;",
-          ">": "&gt;",
-          '"': "&quot;",
-          "'": "&#039;"
-        };
-        return replacements[m2] || "";
-      });
-    }
+      return highlightCode(
+        code.value,
+        props2.language,
+        props2.autodetect,
+        props2.ignoreIllegals
+      );
+    });
     function handleInput(e) {
       const target = e.target;
       code.value = target.value;
@@ -14268,18 +14301,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
       }, 0);
     }
     onMounted(async () => {
-      try {
-        await appendScript("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/highlight.min.js", { id: "hljs-cdn" });
-        await appendStyle("https://cdn.jsdelivr.net/npm/highlight.js/styles/atom-one-dark.min.css");
-        if (window.hljs) {
-          hljs.value = window.hljs;
-          loaded.value = true;
-        } else {
-          console.error("Failed to load highlight.js");
-        }
-      } catch (error) {
-        console.error("Error loading highlight.js:", error);
-      }
+      await loadHighlight();
     });
     watch(() => props2.modelValue, (newVal) => {
       if (newVal !== void 0 && newVal !== code.value) {
@@ -14292,7 +14314,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
         style: normalizeStyle({ maxHeight: maxHeight.value })
       }, [
         _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_1$L, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
-        loaded.value ? (openBlock(), createElementBlock("div", {
+        unref(loaded) ? (openBlock(), createElementBlock("div", {
           key: 1,
           ref_key: "editorRef",
           ref: editorRef,
@@ -14319,7 +14341,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-6ab9613f"]]);
+const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-de01e351"]]);
 const _hoisted_1$K = ["title"];
 const _hoisted_2$y = { class: "flex bg-input rounded px-025 colorInputPickWrap" };
 const _hoisted_3$t = ["id", "placeholder", "required"];
@@ -32846,53 +32868,65 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
 const Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-2f5e271c"]]);
 const _hoisted_1$m = ["textContent"];
 const _hoisted_2$d = {
+  key: 0,
+  class: "h-100p flex column justify-content-center"
+};
+const _hoisted_3$a = {
   key: 1,
   class: "loading-container"
 };
-const _hoisted_3$a = { class: "overflow h-100p" };
-const _hoisted_4$6 = {
+const _hoisted_4$6 = { class: "overflow h-100p" };
+const _hoisted_5$6 = {
   key: 0,
-  class: "config-section flex gap-05 pb-2"
+  class: "config-section flex gap-05 pb-2 m_flex-wrap"
 };
-const _hoisted_5$6 = { key: 1 };
-const _hoisted_6$5 = { class: "mapping-table" };
-const _hoisted_7$4 = { class: "field-label" };
-const _hoisted_8$3 = { key: 0 };
-const _hoisted_9$2 = { key: 2 };
-const _hoisted_10$2 = { key: 3 };
-const _hoisted_11$2 = {
+const _hoisted_6$5 = { key: 1 };
+const _hoisted_7$4 = { class: "mapping-table" };
+const _hoisted_8$3 = { class: "field-label" };
+const _hoisted_9$2 = { class: "grid-span-2 input-size line-height-1 inline-block" };
+const _hoisted_10$2 = { key: 0 };
+const _hoisted_11$2 = { key: 2 };
+const _hoisted_12$2 = { key: 3 };
+const _hoisted_13$1 = {
   key: 0,
   class: "field-disabled-reason"
 };
-const _hoisted_12$2 = { key: 1 };
-const _hoisted_13$1 = { class: "fileColSelect" };
-const _hoisted_14$1 = { class: "default-value-container hideLabel" };
-const _hoisted_15 = { class: "flex gap-05" };
-const _hoisted_16 = {
+const _hoisted_14$1 = { key: 1 };
+const _hoisted_15 = { class: "fileColSelect" };
+const _hoisted_16 = { class: "default-value-container hideLabel" };
+const _hoisted_17 = { class: "flex gap-05 my-05" };
+const _hoisted_18 = {
   key: 0,
   class: "action-buttons"
 };
-const _hoisted_17 = {
+const _hoisted_19 = {
   key: 1,
   class: "action-buttons"
 };
-const _hoisted_18 = { key: 0 };
-const _hoisted_19 = { class: "flex space-between gap-1 mb-1" };
-const _hoisted_20 = { class: "flex pt-05" };
-const _hoisted_21 = { key: 0 };
-const _hoisted_22 = { class: "pb-05" };
-const _hoisted_23 = {
+const _hoisted_20 = { key: 0 };
+const _hoisted_21 = { class: "flex space-between gap-1 mb-1 border-bottom pb-05 m_flex-wrap" };
+const _hoisted_22 = { class: "grid-span-2 input-size line-height-1" };
+const _hoisted_23 = { class: "grid-span-4 input-size line-height-1 ellipsis-1" };
+const _hoisted_24 = { class: "grid grid-wrap-7 gap-1 align-items-center m_gap-025 m_pb-1-5" };
+const _hoisted_25 = { class: "grid-span-2" };
+const _hoisted_26 = { class: "grid-span-4" };
+const _hoisted_27 = { class: "flex pt-05" };
+const _hoisted_28 = { key: 0 };
+const _hoisted_29 = { class: "pb-05" };
+const _hoisted_30 = {
   key: 0,
   class: "mb-05"
 };
-const _hoisted_24 = { key: 1 };
-const _hoisted_25 = { class: "mb-1" };
-const _hoisted_26 = { key: 0 };
-const _hoisted_27 = { class: "flex gap-1" };
-const _hoisted_28 = { class: "default-value-container" };
-const _hoisted_29 = { class: "action-buttons-cell" };
-const _hoisted_30 = { class: "flex pt-05" };
-const _hoisted_31 = { key: 0 };
+const _hoisted_31 = { key: 1 };
+const _hoisted_32 = { class: "mb-1" };
+const _hoisted_33 = { key: 0 };
+const _hoisted_34 = { class: "flex gap-1" };
+const _hoisted_35 = { class: "default-value-container" };
+const _hoisted_36 = { class: "action-buttons-cell" };
+const _hoisted_37 = { class: "flex pt-05" };
+const _hoisted_38 = { class: "mt-1" };
+const _hoisted_39 = { class: "flex gap-1 mt-1 space-between" };
+const _hoisted_40 = { key: 0 };
 const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "ImportData",
   props: {
@@ -33918,41 +33952,51 @@ ${unmatchedValues.length} values could not be automatically matched.`);
             class: "line-height-1 m-0 pb-2 txt-center",
             textContent: toDisplayString(props2.title || "Upload and Map Data")
           }, null, 8, _hoisted_1$m),
-          !file.value ? (openBlock(), createBlock(unref(DragOver), {
-            key: 0,
-            accept: ".csv,.xls,.xlsx",
-            onAddFiles: unref(addFile),
-            onClick: _cache[0] || (_cache[0] = ($event) => unref(browse)(false))
-          }, {
-            default: withCtx(() => [
-              createVNode(unref(_sfc_main$15), { class: "flex flex-column items-center justify-center outline-dashed outline-3 bg-input hover h-100p justify-content-center" }, {
+          !file.value ? (openBlock(), createElementBlock("div", _hoisted_2$d, [
+            createVNode(unref(DragOver), {
+              accept: ".csv,.xls,.xlsx",
+              class: "max-h300px w-500px",
+              onAddFiles: unref(addFile),
+              onClick: _cache[0] || (_cache[0] = ($event) => unref(browse)(false))
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(_sfc_main$15), { class: "flex flex-column items-center justify-center outline-dashed outline-3 bg-input hover h-100p justify-content-center txt-center" }, {
+                  default: withCtx(() => [
+                    createVNode(unref(_sfc_main$v), {
+                      name: "upload",
+                      size: "5"
+                    }),
+                    _cache[30] || (_cache[30] = createElementVNode("p", null, "Drag and drop an Excel or CSV file here", -1)),
+                    _cache[31] || (_cache[31] = createElementVNode("u", null, "or click to select a file", -1)),
+                    _cache[32] || (_cache[32] = createElementVNode("p", { class: "txt-12 color-gray" }, " Accepts .xlsx, .xls, and .csv files ", -1))
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["onAddFiles"])
+          ])) : createCommentVNode("", true),
+          isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_3$a, _cache[33] || (_cache[33] = [
+            createElementVNode("div", { class: "spinner" }, null, -1),
+            createElementVNode("p", null, "Processing your file...", -1)
+          ]))) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_4$6, [
+            file.value && !isLoading.value && sheetNames.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_5$6, [
+              withDirectives((openBlock(), createBlock(unref(Btn), {
+                class: "px-1",
+                color: "gray",
+                onClick: _cache[1] || (_cache[1] = ($event) => file.value = null)
+              }, {
                 default: withCtx(() => [
                   createVNode(unref(_sfc_main$v), {
-                    name: "upload",
-                    size: "5"
+                    icon: "draft",
+                    size: "1.5",
+                    weight: "300"
                   }),
-                  _cache[30] || (_cache[30] = createElementVNode("p", null, "Drag and drop an Excel or CSV file here", -1)),
-                  _cache[31] || (_cache[31] = createElementVNode("p", null, "or click to select a file", -1)),
-                  _cache[32] || (_cache[32] = createElementVNode("p", { class: "txt-12 color-gray" }, " Accepts .xlsx, .xls, and .csv files ", -1))
+                  createElementVNode("p", null, toDisplayString(file.value.name), 1)
                 ]),
                 _: 1
-              })
-            ]),
-            _: 1
-          }, 8, ["onAddFiles"])) : createCommentVNode("", true),
-          isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_2$d, _cache[33] || (_cache[33] = [
-            createElementVNode("div", { class: "spinner" }, null, -1),
-            createElementVNode("p", null, "Processing your file...", -1)
-          ]))) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_3$a, [
-            file.value && !isLoading.value && sheetNames.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_4$6, [
-              withDirectives(createVNode(unref(Btn), {
-                value: file.value.name,
-                thin: "",
-                round: "",
-                iconEnd: "edit",
-                onClick: _cache[1] || (_cache[1] = ($event) => file.value = null)
-              }, null, 8, ["value"]), [
+              })), [
                 [_directive_tooltip, "Change File"]
               ]),
               sheetNames.value.length > 1 ? (openBlock(), createBlock(unref(SelectInput), {
@@ -33966,13 +34010,14 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                 modelValue: hasHeaders.value,
                 "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => hasHeaders.value = $event),
                 label: "Mark this if file has a header row",
-                class: "m-0"
+                class: "m-0",
+                style: { "--bgl-accent-color": "var(--bgl-black)", "--bgl-primary": "var(--bgl-black)" }
               }, null, 8, ["modelValue"])
             ])) : createCommentVNode("", true),
-            file.value && !isLoading.value && fileHeaders.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_5$6, [
+            file.value && !isLoading.value && fileHeaders.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_6$5, [
               _cache[37] || (_cache[37] = createElementVNode("p", { class: "label pb-1 border-bottom mb-1" }, " Match each required field to a column from your file, set default values, or configure transformations ", -1)),
-              createElementVNode("div", _hoisted_6$5, [
-                _cache[34] || (_cache[34] = createElementVNode("div", { class: "grid grid-wrap-5 gap-1 bold pb-1" }, [
+              createElementVNode("div", _hoisted_7$4, [
+                _cache[34] || (_cache[34] = createElementVNode("div", { class: "grid grid-wrap-5 gap-1 bold pb-1 m_none" }, [
                   createElementVNode("p", null, "Schema Field"),
                   createElementVNode("p", null, "Column from File"),
                   createElementVNode("p", null, "Default Value"),
@@ -33982,12 +34027,12 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                 (openBlock(true), createElementBlock(Fragment, null, renderList(schemaFields.value, (field) => {
                   return openBlock(), createElementBlock("div", {
                     key: field.id,
-                    class: normalizeClass(["grid grid-wrap-5 gap-1", { "array-field-row": field.isArrayField || field.$el === "array" }])
+                    class: normalizeClass(["grid grid-wrap-5 gap-1 m_gap-025 m_pb-1-5", { "array-field-row": field.isArrayField || field.$el === "array" }])
                   }, [
                     createElementVNode("div", null, [
-                      createElementVNode("div", _hoisted_7$4, [
-                        createTextVNode(toDisplayString(field.label) + " ", 1),
-                        field.isArrayField ? (openBlock(), createElementBlock("span", _hoisted_8$3, "↳")) : createCommentVNode("", true),
+                      createElementVNode("div", _hoisted_8$3, [
+                        createElementVNode("p", _hoisted_9$2, toDisplayString(field.label), 1),
+                        field.isArrayField ? (openBlock(), createElementBlock("span", _hoisted_10$2, "↳")) : createCommentVNode("", true),
                         field.$el === "array" ? (openBlock(), createBlock(unref(Pill), {
                           key: 1,
                           class: "txt10 ms-05",
@@ -33995,13 +34040,13 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                           thin: "",
                           value: "Array"
                         })) : createCommentVNode("", true),
-                        isFieldRequired(field) ? (openBlock(), createElementBlock("span", _hoisted_9$2, "*")) : createCommentVNode("", true),
-                        getFieldDescription(field).isConditional ? (openBlock(), createElementBlock("span", _hoisted_10$2, "†")) : createCommentVNode("", true)
+                        isFieldRequired(field) ? (openBlock(), createElementBlock("span", _hoisted_11$2, "*")) : createCommentVNode("", true),
+                        getFieldDescription(field).isConditional ? (openBlock(), createElementBlock("span", _hoisted_12$2, "†")) : createCommentVNode("", true)
                       ]),
-                      field.disabled ? (openBlock(), createElementBlock("div", _hoisted_11$2, toDisplayString(field.disabledReason), 1)) : createCommentVNode("", true),
-                      getFieldDescription(field).isConditional ? (openBlock(), createElementBlock("div", _hoisted_12$2, toDisplayString(getFieldDescription(field).description), 1)) : createCommentVNode("", true)
+                      field.disabled ? (openBlock(), createElementBlock("div", _hoisted_13$1, toDisplayString(field.disabledReason), 1)) : createCommentVNode("", true),
+                      getFieldDescription(field).isConditional ? (openBlock(), createElementBlock("div", _hoisted_14$1, toDisplayString(getFieldDescription(field).description), 1)) : createCommentVNode("", true)
                     ]),
-                    createElementVNode("td", _hoisted_13$1, [
+                    createElementVNode("div", _hoisted_15, [
                       createVNode(unref(SelectInput), {
                         modelValue: fieldMapping[field.id],
                         "onUpdate:modelValue": ($event) => fieldMapping[field.id] = $event,
@@ -34013,7 +34058,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                       }, null, 8, ["modelValue", "onUpdate:modelValue", "options", "required", "disabled", "onChange"])
                     ]),
                     createElementVNode("div", null, [
-                      createElementVNode("div", _hoisted_14$1, [
+                      createElementVNode("div", _hoisted_16, [
                         createTextVNode(toDisplayString(initDefaultValue(field.id)) + " ", 1),
                         (openBlock(), createBlock(resolveDynamicComponent(unref(renderField)(getFieldWithDefaults(field)))))
                       ])
@@ -34027,7 +34072,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                       }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"])
                     ]),
                     createElementVNode("div", null, [
-                      createElementVNode("div", _hoisted_15, [
+                      createElementVNode("div", _hoisted_17, [
                         withDirectives(createVNode(unref(Btn), {
                           thin: "",
                           disabled: field.disabled,
@@ -34050,14 +34095,14 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                   ], 2);
                 }), 128))
               ]),
-              mappingComplete.value ? (openBlock(), createElementBlock("div", _hoisted_16, [
+              mappingComplete.value ? (openBlock(), createElementBlock("div", _hoisted_18, [
                 createVNode(unref(Btn), { onClick: showPreview }, {
                   default: withCtx(() => _cache[35] || (_cache[35] = [
                     createTextVNode(" Preview Data ")
                   ])),
                   _: 1
                 })
-              ])) : (openBlock(), createElementBlock("div", _hoisted_17, _cache[36] || (_cache[36] = [
+              ])) : (openBlock(), createElementBlock("div", _hoisted_19, _cache[36] || (_cache[36] = [
                 createElementVNode("div", { class: "mapping-incomplete-message" }, " Please map the required fields to continue ", -1)
               ])))
             ])) : createCommentVNode("", true)
@@ -34069,8 +34114,8 @@ ${unmatchedValues.length} values could not be automatically matched.`);
             width: "800"
           }, {
             default: withCtx(() => [
-              selectedTransformField.value ? (openBlock(), createElementBlock("div", _hoisted_18, [
-                createElementVNode("div", _hoisted_19, [
+              selectedTransformField.value ? (openBlock(), createElementBlock("div", _hoisted_20, [
+                createElementVNode("div", _hoisted_21, [
                   createElementVNode("p", null, [
                     _cache[38] || (_cache[38] = createTextVNode("Create transformations for ")),
                     createElementVNode("strong", null, toDisplayString(selectedTransformField.value.label), 1)
@@ -34082,33 +34127,33 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                     onClick: _cache[4] || (_cache[4] = ($event) => autoPopulateTransformations(selectedTransformField.value.id))
                   })
                 ]),
-                createElementVNode("table", null, [
-                  _cache[39] || (_cache[39] = createElementVNode("thead", null, [
-                    createElementVNode("tr", null, [
-                      createElementVNode("th", null, "Source Value"),
-                      createElementVNode("th", null, "Target Value"),
-                      createElementVNode("th", null, "Action")
-                    ])
+                createElementVNode("div", null, [
+                  _cache[39] || (_cache[39] = createElementVNode("div", { class: "grid grid-wrap-7 gap-1 bold pb-05 m_none" }, [
+                    createElementVNode("p", { class: "grid-span-2" }, " Source Value "),
+                    createElementVNode("p", { class: "grid-span-4" }, " Target Value "),
+                    createElementVNode("p", null, "Action")
                   ], -1)),
-                  createElementVNode("tbody", null, [
+                  createElementVNode("div", null, [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(transformations[selectedTransformField.value.id] || [], (transform, index2) => {
-                      return openBlock(), createElementBlock("tr", { key: index2 }, [
-                        createElementVNode("td", null, toDisplayString(transform.sourceValue), 1),
-                        createElementVNode("td", null, toDisplayString(transform.targetValue), 1),
-                        createElementVNode("td", null, [
-                          withDirectives(createVNode(unref(Btn), {
-                            thin: "",
-                            icon: "delete",
-                            color: "red",
-                            onClick: ($event) => removeTransformation(selectedTransformField.value.id, index2)
-                          }, null, 8, ["onClick"]), [
-                            [_directive_tooltip, "Remove"]
-                          ])
+                      return openBlock(), createElementBlock("div", {
+                        key: index2,
+                        class: "grid grid-wrap-7 gap-1 align-items-center m_gap-025 m_pb-1-5"
+                      }, [
+                        createElementVNode("p", _hoisted_22, toDisplayString(transform.sourceValue), 1),
+                        createElementVNode("p", _hoisted_23, toDisplayString(transform.targetValue), 1),
+                        withDirectives(createVNode(unref(Btn), {
+                          class: "mb-05",
+                          thin: "",
+                          icon: "delete",
+                          color: "red",
+                          onClick: ($event) => removeTransformation(selectedTransformField.value.id, index2)
+                        }, null, 8, ["onClick"]), [
+                          [_directive_tooltip, "Remove"]
                         ])
                       ]);
                     }), 128)),
-                    createElementVNode("tr", null, [
-                      createElementVNode("td", null, [
+                    createElementVNode("div", _hoisted_24, [
+                      createElementVNode("div", _hoisted_25, [
                         fieldMapping[selectedTransformField.value.id] ? (openBlock(), createBlock(unref(SelectInput), {
                           key: 0,
                           modelValue: selectedSourceValue.value,
@@ -34116,16 +34161,15 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                           searchable: "",
                           options: sourceValueOptions.value,
                           placeholder: "Select source value"
-                        }, null, 8, ["modelValue", "options"])) : withDirectives((openBlock(), createElementBlock("input", {
+                        }, null, 8, ["modelValue", "options"])) : (openBlock(), createBlock(TextInput, {
                           key: 1,
+                          modelValue: selectedSourceValue.value,
                           "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => selectedSourceValue.value = $event),
                           type: "text",
                           placeholder: "Source value"
-                        }, null, 512)), [
-                          [vModelText, selectedSourceValue.value]
-                        ])
+                        }, null, 8, ["modelValue"]))
                       ]),
-                      createElementVNode("td", null, [
+                      createElementVNode("div", _hoisted_26, [
                         selectedTransformField.value.options && selectedTransformField.value.options.length > 0 ? (openBlock(), createBlock(unref(SelectInput), {
                           key: 0,
                           modelValue: selectedTargetValue.value,
@@ -34133,29 +34177,27 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                           searchable: "",
                           options: selectedTransformField.value.options,
                           placeholder: "Select target value"
-                        }, null, 8, ["modelValue", "options"])) : withDirectives((openBlock(), createElementBlock("input", {
+                        }, null, 8, ["modelValue", "options"])) : (openBlock(), createBlock(TextInput, {
                           key: 1,
+                          modelValue: selectedTargetValue.value,
                           "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => selectedTargetValue.value = $event),
                           type: "text",
                           placeholder: "Target value"
-                        }, null, 512)), [
-                          [vModelText, selectedTargetValue.value]
-                        ])
+                        }, null, 8, ["modelValue"]))
                       ]),
-                      createElementVNode("td", null, [
-                        withDirectives(createVNode(unref(Btn), {
-                          thin: "",
-                          icon: "add",
-                          color: "primary",
-                          onClick: _cache[9] || (_cache[9] = ($event) => addTransformation(selectedTransformField.value.id))
-                        }, null, 512), [
-                          [_directive_tooltip, "Add"]
-                        ])
+                      withDirectives(createVNode(unref(Btn), {
+                        class: "mb-05",
+                        thin: "",
+                        icon: "add",
+                        color: "primary",
+                        onClick: _cache[9] || (_cache[9] = ($event) => addTransformation(selectedTransformField.value.id))
+                      }, null, 512), [
+                        [_directive_tooltip, "Add"]
                       ])
                     ])
                   ])
                 ]),
-                createElementVNode("div", _hoisted_20, [
+                createElementVNode("div", _hoisted_27, [
                   createVNode(unref(Btn), {
                     class: "ms-auto",
                     value: "Close",
@@ -34175,9 +34217,9 @@ ${unmatchedValues.length} values could not be automatically matched.`);
             default: withCtx(() => {
               var _a;
               return [
-                selectedRelationField.value ? (openBlock(), createElementBlock("div", _hoisted_21, [
-                  createElementVNode("p", _hoisted_22, " Upload a file with related data for " + toDisplayString(selectedRelationField.value.label), 1),
-                  !relatedFiles[selectedRelationField.value.id] ? (openBlock(), createElementBlock("div", _hoisted_23, [
+                selectedRelationField.value ? (openBlock(), createElementBlock("div", _hoisted_28, [
+                  createElementVNode("p", _hoisted_29, " Upload a file with related data for " + toDisplayString(selectedRelationField.value.label), 1),
+                  !relatedFiles[selectedRelationField.value.id] ? (openBlock(), createElementBlock("div", _hoisted_30, [
                     createVNode(unref(DragOver), {
                       accept: ".csv,.xls,.xlsx",
                       onAddFiles: _cache[12] || (_cache[12] = (files2) => {
@@ -34200,8 +34242,8 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                       ]),
                       _: 1
                     })
-                  ])) : (openBlock(), createElementBlock("div", _hoisted_24, [
-                    createElementVNode("div", _hoisted_25, [
+                  ])) : (openBlock(), createElementBlock("div", _hoisted_31, [
+                    createElementVNode("div", _hoisted_32, [
                       createVNode(unref(Pill), null, {
                         default: withCtx(() => [
                           createTextVNode(toDisplayString(relatedFiles[selectedRelationField.value.id].name), 1)
@@ -34215,9 +34257,9 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                         onClick: _cache[13] || (_cache[13] = ($event) => relatedFiles[selectedRelationField.value.id] = null)
                       })
                     ]),
-                    relatedFileData[selectedRelationField.value.id] ? (openBlock(), createElementBlock("div", _hoisted_26, [
+                    relatedFileData[selectedRelationField.value.id] ? (openBlock(), createElementBlock("div", _hoisted_33, [
                       _cache[45] || (_cache[45] = createElementVNode("h4", null, "Configure Relationship", -1)),
-                      createElementVNode("div", _hoisted_27, [
+                      createElementVNode("div", _hoisted_34, [
                         createVNode(unref(SelectInput), {
                           modelValue: parentKeyField[selectedRelationField.value.id],
                           "onUpdate:modelValue": _cache[14] || (_cache[14] = ($event) => parentKeyField[selectedRelationField.value.id] = $event),
@@ -34258,7 +34300,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                                 }, null, 8, ["modelValue", "onUpdate:modelValue", "options"])
                               ]),
                               createElementVNode("td", null, [
-                                createElementVNode("div", _hoisted_28, [
+                                createElementVNode("div", _hoisted_35, [
                                   createTextVNode(toDisplayString(initRelatedDefaultValue(selectedRelationField.value.id, schemaItem.id)) + " ", 1),
                                   (openBlock(), createBlock(resolveDynamicComponent(unref(renderField)(getRelatedFieldWithDefaults(selectedRelationField.value.id, schemaItem)))))
                                 ])
@@ -34272,7 +34314,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                                 }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"])
                               ]),
                               createElementVNode("td", null, [
-                                createElementVNode("div", _hoisted_29, [
+                                createElementVNode("div", _hoisted_36, [
                                   createVNode(unref(Btn), {
                                     thin: "",
                                     icon: "transform",
@@ -34291,7 +34333,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
                       ])
                     ])) : createCommentVNode("", true)
                   ])),
-                  createElementVNode("div", _hoisted_30, [
+                  createElementVNode("div", _hoisted_37, [
                     createVNode(unref(Btn), {
                       class: "ms-auto",
                       value: "Close",
@@ -34307,21 +34349,24 @@ ${unmatchedValues.length} values could not be automatically matched.`);
             visible: showPreviewModal.value,
             "onUpdate:visible": _cache[21] || (_cache[21] = ($event) => showPreviewModal.value = $event),
             title: "Data Preview & Edit",
-            width: "1200"
+            width: "90vw"
           }, {
             default: withCtx(() => [
               createElementVNode("div", null, [
                 createVNode(unref(Spreadsheet), {
                   modelValue: previewData.value,
                   "onUpdate:modelValue": _cache[18] || (_cache[18] = ($event) => previewData.value = $event),
+                  class: "popupPreviewSpreadsheet",
                   "column-config": spreadsheetColumns.value,
                   "allow-add-row": ""
                 }, null, 8, ["modelValue", "column-config"])
               ]),
               createElementVNode("div", null, [
-                createElementVNode("div", null, " Showing all " + toDisplayString(previewData.value.length) + " records. You can edit values directly. ", 1),
-                createElementVNode("div", null, [
+                createElementVNode("p", _hoisted_38, " Showing all " + toDisplayString(previewData.value.length) + " records. You can edit values directly. ", 1),
+                createElementVNode("div", _hoisted_39, [
                   createVNode(unref(Btn), {
+                    flat: "",
+                    thin: "",
                     value: "Cancel",
                     onClick: _cache[19] || (_cache[19] = ($event) => showPreviewModal.value = false)
                   }),
@@ -34343,7 +34388,7 @@ ${unmatchedValues.length} values could not be automatically matched.`);
             default: withCtx(() => {
               var _a, _b, _c;
               return [
-                selectedRelatedTransformField.value ? (openBlock(), createElementBlock("div", _hoisted_31, [
+                selectedRelatedTransformField.value ? (openBlock(), createElementBlock("div", _hoisted_40, [
                   createElementVNode("p", null, [
                     _cache[47] || (_cache[47] = createTextVNode("Create transformations for ")),
                     createElementVNode("strong", null, toDisplayString(selectedRelatedTransformField.value.field.label), 1),