@bagelink/vue 0.0.556 → 0.0.560

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

@@ -2,56 +2,7 @@ import { BglFormSchemaT } from '..';
 
 declare function __VLS_template(): Partial<Record<string, (_: {
     row: Record<string, any>;
-    field: {
-        transform: undefined;
-        $el?: any;
-        id?: string;
-        label?: string;
-        placeholder?: string;
-        children?: import('..').Field<Record<string, any>>[] | undefined;
-        class?: import('..').AttributeValue | import('..').AttributeFn<Record<string, any>>;
-        attrs?: import('..').Attributes<Record<string, any>> | undefined;
-        required?: boolean;
-        disabled?: boolean;
-        helptext?: string;
-        options?: import('..').BagelFieldOptions;
-        defaultValue?: any;
-        onUpdate?: (val: any, rowData?: Record<string, any>) => void;
-        'v-if'?: string | boolean | ((val: any, row: Record<string, any>) => boolean) | undefined;
-    } | {
-        transform: undefined;
-        $el: "text" | typeof import('..').TextInput;
-        id: string;
-        type?: string;
-        label?: string;
-        placeholder?: string;
-        children?: import('..').Field<Record<string, any>>[] | undefined;
-        class?: import('..').AttributeValue | import('..').AttributeFn<Record<string, any>>;
-        attrs?: import('..').Attributes<Record<string, any>> | undefined;
-        required?: boolean;
-        disabled?: boolean;
-        helptext?: string;
-        options?: import('..').BagelFieldOptions;
-        defaultValue?: any;
-        onUpdate?: (val: any, rowData?: Record<string, any>) => void;
-        'v-if'?: string | boolean | ((val: any, row: Record<string, any>) => boolean) | undefined;
-    } | {
-        transform: undefined;
-        $el: "select" | typeof import('..').SelectInput;
-        id: string;
-        label?: string;
-        placeholder?: string;
-        children?: import('..').Field<Record<string, any>>[] | undefined;
-        class?: import('..').AttributeValue | import('..').AttributeFn<Record<string, any>>;
-        attrs?: import('..').Attributes<Record<string, any>> | undefined;
-        required?: boolean;
-        disabled?: boolean;
-        helptext?: string;
-        options?: import('..').BagelFieldOptions;
-        defaultValue?: any;
-        onUpdate?: (val: any, rowData?: Record<string, any>) => void;
-        'v-if'?: string | boolean | ((val: any, row: Record<string, any>) => boolean) | undefined;
-    };
+    field: import('..').Field<Record<string, any>>;
 }) => any>>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
     selectedItems?: string[];

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":"AAEA,OAAO,EAEN,KAAK,cAAc,EAGnB,MAAM,eAAe,CAAA;AAqHtB,iBAAS,cAAc;;;;;;;;;;;;;;;;qCAtFkB,CAAC;;;;;;;;;;;;;;;;;qCAAD,CAAC;;;;;;;;;;;;;;;;qCAAD,CAAC;;;MAsU4C,GAAG,GAIxF;AAyBD,QAAA,MAAM,eAAe;oBAMJ,MAAM,EAAE;UAClB,GAAG,EAAE;aACF,cAAc,GAAG,CAAC,MAAM,cAAc,CAAC;iBACnC,MAAM,EAAE;;;;;;oBAHL,MAAM,EAAE;UAClB,GAAG,EAAE;aACF,cAAc,GAAG,CAAC,MAAM,cAAc,CAAC;iBACnC,MAAM,EAAE;;;;;UAGpB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"TableSchema.vue.d.ts","sourceRoot":"","sources":["../../src/components/TableSchema.vue"],"names":[],"mappings":"AAEA,OAAO,EAEN,KAAK,cAAc,EAGnB,MAAM,eAAe,CAAA;AAwHtB,iBAAS,cAAc;;;MA6O+D,GAAG,GAIxF;AAyBD,QAAA,MAAM,eAAe;oBAMJ,MAAM,EAAE;UAClB,GAAG,EAAE;aACF,cAAc,GAAG,CAAC,MAAM,cAAc,CAAC;iBACnC,MAAM,EAAE;;;;;;oBAHL,MAAM,EAAE;UAClB,GAAG,EAAE;aACF,cAAc,GAAG,CAAC,MAAM,cAAc,CAAC;iBACnC,MAAM,EAAE;;;;;UAGpB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,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":"AAEA,OAAO,EAGN,KAAK,KAAK,EAOV,MAAM,eAAe,CAAA;;WAkKb,KAAK;gBACA,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;;;;;;WADxB,KAAK;gBACA,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;;;;;;gBAAnB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;;AAPjC,wBAUG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,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":"AAEA,OAAO,EAGN,KAAK,KAAK,EAOV,MAAM,eAAe,CAAA;;WA4Jb,KAAK;gBACA,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;;;;;;WADxB,KAAK;gBACA,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;;;;;;gBAAnB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;;AAPjC,wBAUG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/components/form/inputs/RichText2/Toolbar.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/inputs/RichText2/Toolbar.vue"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAuB,MAAM,kBAAkB,CAAA;;YAyKrB,aAAa;;;;YAAb,aAAa;;;;AALlE,wBAOG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}
+{"version":3,"file":"Toolbar.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/inputs/RichText2/Toolbar.vue"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAuB,MAAM,kBAAkB,CAAA;;YA0KrB,aAAa;;;;YAAb,aAAa;;;;AALlE,wBAOG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}

package/dist/components/form/inputs/RichText2/formatting.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formatting.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/inputs/RichText2/formatting.ts"],"names":[],"mappings":"AAAA,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,GAAE,MAAW,QAyFlE;AAoDD,wBAAgB,UAAU,SAWzB;AAED,wBAAgB,WAAW,SAY1B;AAED,wBAAgB,WAAW,SAyB1B"}
+{"version":3,"file":"formatting.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/inputs/RichText2/formatting.ts"],"names":[],"mappings":"AAEA,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,GAAE,MAAW,QAyFlE;AAoDD,wBAAgB,UAAU,SAWzB;AAED,wBAAgB,WAAW,SAgB1B;AAED,wBAAgB,WAAW,SAyB1B"}

package/dist/index.cjs

@@ -5516,8 +5516,8 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     vue.useCssVars((_ctx) => ({
-      "54b736fd": computedBackgroundColor.value,
-      "5c3a40d0": cumputedTextColor.value
+      "5113a6cf": computedBackgroundColor.value,
+      "ae07d62c": cumputedTextColor.value
     }));
     const props2 = __props;
     const isComponent = vue.computed(() => {
@@ -5559,13 +5559,13 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     const cumputedTextColor = vue.computed(
       () => {
         var _a2;
-        return ((_a2 = themes[computedTheme.value]) == null ? void 0 : _a2.color) || computedDefaultColors.value.color;
+        return ((_a2 = themes[computedTheme.value]) == null ? void 0 : _a2.color) ?? computedDefaultColors.value.color;
       }
     );
     const computedBackgroundColor = vue.computed(
       () => {
         var _a2;
-        return ((_a2 = themes[computedTheme.value]) == null ? void 0 : _a2.backgroundColor) || computedDefaultColors.value.backgroundColor;
+        return ((_a2 = themes[computedTheme.value]) == null ? void 0 : _a2.backgroundColor) ?? computedDefaultColors.value.backgroundColor;
       }
     );
     return (_ctx, _cache) => {
@@ -5606,7 +5606,7 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-7f505d62"]]);
+const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-65a6e961"]]);
 const _hoisted_1$H = {
   key: 0,
   class: "tool-bar"
@@ -6023,6 +6023,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     }
     let sortDirection = vue.ref("ASC");
     let sortField = vue.ref("");
+    const computedSortField = vue.computed(() => `_transformed_${sortField.value}`);
     function getFallbackSchema() {
       const keys4 = [
         ...new Set((props2.data || []).map(Object.keys).flat())
@@ -6033,7 +6034,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
       }));
       return props2.showFields ? schema.filter((f2) => {
         var _a2;
-        return ((_a2 = props2.showFields) == null ? void 0 : _a2.includes(f2.id)) || !f2.id;
+        return ((_a2 = props2.showFields) == null ? void 0 : _a2.includes(f2.id)) ?? !f2.id;
       }) : schema;
     }
     const computedSchema = vue.computed(() => {
@@ -6055,9 +6056,10 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
       const fields = computedSchema.value.filter((f2) => f2.id);
       for (const field of fields) {
         const fieldData = rowData[`${field.id}`];
-        const newFieldVal = ((_a2 = field.transform) == null ? void 0 : _a2.call(field, fieldData, rowData)) || fieldData || "";
+        const newFieldVal = (_a2 = field.transform) == null ? void 0 : _a2.call(field, fieldData, rowData);
         Object.assign(obj, {
-          [`${field.id}`]: newFieldVal
+          [`${field.id}`]: fieldData,
+          [`_transformed_${field.id}`]: newFieldVal
         });
       }
       return obj;
@@ -6066,8 +6068,8 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
       const dta = [...props2.data].map(transform);
       if (sortField.value) {
         return dta.sort((a2, b2) => {
-          const aValue = a2[sortField.value];
-          const bValue = b2[sortField.value];
+          const aValue = a2[computedSortField.value] ?? "";
+          const bValue = b2[computedSortField.value] ?? "";
           const numAValue = Number.parseInt(aValue, 10);
           const numBValue = Number.parseInt(bValue, 10);
           if (!Number.isNaN(numAValue) && !Number.isNaN(numBValue)) {
@@ -6128,10 +6130,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
                 class: "row row-item position-relative",
                 onClick: ($event) => selectElement(row)
               }, [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(computedSchema.value.map((c2) => ({
-                  ...c2,
-                  transform: void 0
-                })), (field) => {
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(computedSchema.value, (field) => {
                   return vue.openBlock(), vue.createElementBlock("td", {
                     key: `${field.id}-${row.id}`,
                     class: "col"
@@ -6158,7 +6157,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-9bf1b6df"]]);
+const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-9d32d080"]]);
 const _sfc_main$E = {};
 const _hoisted_1$B = { class: "flex space-between" };
 function _sfc_render$1(_ctx, _cache) {
@@ -16524,7 +16523,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
       if (props2.field.$el === "check") return CheckInput;
       if (props2.field.$el === "richtext") return _sfc_main$c;
       if (props2.field.$el === "date") return _sfc_main$n;
-      return props2.field.$el || "div";
+      return props2.field.$el ?? "div";
     });
     const formData = vue.computed({
       get: () => props2.modelValue,
@@ -16553,35 +16552,43 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
       }
       return true;
     });
-    const badTransform = /undefined|NaN|Invalid Date/;
     const computedFieldData = vue.computed(
       () => {
         var _a2, _b;
-        const transformedData = (_b = (_a2 = props2.field).transform) == null ? void 0 : _b.call(_a2, fieldData.value, props2.modelValue);
-        if (badTransform.test(String(transformedData))) return fieldData.value;
-        return transformedData;
+        return ((_b = (_a2 = props2.field).transform) == null ? void 0 : _b.call(_a2, fieldData.value, props2.modelValue)) ?? fieldData.value;
+      }
+    );
+    const computedOptions = vue.computed(
+      () => bindAttrs({ options: props2.field.options }, fieldData.value, props2.modelValue).options
+    );
+    const computedAttrs = vue.computed(
+      () => bindAttrs(props2.field.attrs || {}, fieldData.value, props2.modelValue)
+    );
+    const computedClass = vue.computed(
+      () => {
+        var _a2;
+        return classify(fieldData.value, props2.modelValue, props2.field.class, (_a2 = props2.field.attrs) == null ? void 0 : _a2.class);
       }
     );
     return (_ctx, _cache) => {
-      var _a2, _b;
       const _component_BglField = vue.resolveComponent("BglField", true);
-      return vIf.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(is4.value), vue.mergeProps({ key: 0 }, vue.unref(bindAttrs)(((_a2 = _ctx.field) == null ? void 0 : _a2.attrs) || {}, fieldData.value, _ctx.modelValue), {
+      return vIf.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(is4.value), vue.mergeProps({ key: 0 }, computedAttrs.value, {
         id: _ctx.field.id,
         modelValue: fieldData.value,
         "onUpdate:modelValue": [
           _cache[1] || (_cache[1] = ($event) => fieldData.value = $event),
           _cache[2] || (_cache[2] = ($event) => {
-            var _a3, _b2;
-            return (_b2 = (_a3 = _ctx.field) == null ? void 0 : _a3.onUpdate) == null ? void 0 : _b2.call(_a3, $event, formData.value);
+            var _a2, _b;
+            return (_b = (_a2 = _ctx.field) == null ? void 0 : _a2.onUpdate) == null ? void 0 : _b.call(_a2, $event, formData.value);
           })
         ],
         required: _ctx.field.required,
-        class: vue.unref(classify)(fieldData.value, _ctx.modelValue, _ctx.field.class, (_b = _ctx.field.attrs) == null ? void 0 : _b.class),
+        class: computedClass.value,
         label: _ctx.field.label,
         placeholder: _ctx.field.placeholder || _ctx.field.label,
         defaultValue: _ctx.field.defaultValue,
         disabled: _ctx.field.disabled,
-        options: vue.unref(bindAttrs)({ options: _ctx.field.options }, fieldData.value, _ctx.modelValue).options,
+        options: computedOptions.value,
         helptext: _ctx.field.helptext
       }), {
         default: vue.withCtx(() => [
@@ -55695,7 +55702,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-ace0040e"]]);
+const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-4c741194"]]);
 function applyFormatting(command2, value = "") {
   const selection = window.getSelection();
   if (selection && selection.rangeCount > 0) {
@@ -55770,7 +55777,7 @@ function applyFormatting(command2, value = "") {
       case "insertLink":
         insertLink();
         break;
-      case "insertImage":
+      case "image":
         insertImage();
         break;
       case "createTable":
@@ -55838,17 +55845,11 @@ function insertLink() {
   }
 }
 function insertImage() {
-  const url = prompt("Enter the image URL:");
-  if (url) {
-    const selection = window.getSelection();
-    if (selection && selection.rangeCount > 0) {
-      const range2 = selection.getRangeAt(0);
-      const img = document.createElement("img");
-      img.src = url;
-      range2.deleteContents();
-      range2.insertNode(img);
-    }
-  }
+  console.log("image");
+  const { showModalForm } = useModal();
+  console.log(showModalForm);
+  showModalForm({ title: "Upload Image", schema: [{ id: "image", type: "file" }], onSubmit: (data2) => {
+  } });
 }
 function createTable() {
   const rows = prompt("Enter the number of rows:");

package/dist/index.mjs

@@ -5514,8 +5514,8 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "54b736fd": computedBackgroundColor.value,
-      "5c3a40d0": cumputedTextColor.value
+      "5113a6cf": computedBackgroundColor.value,
+      "ae07d62c": cumputedTextColor.value
     }));
     const props2 = __props;
     const isComponent = computed(() => {
@@ -5557,13 +5557,13 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     const cumputedTextColor = computed(
       () => {
         var _a2;
-        return ((_a2 = themes[computedTheme.value]) == null ? void 0 : _a2.color) || computedDefaultColors.value.color;
+        return ((_a2 = themes[computedTheme.value]) == null ? void 0 : _a2.color) ?? computedDefaultColors.value.color;
       }
     );
     const computedBackgroundColor = computed(
       () => {
         var _a2;
-        return ((_a2 = themes[computedTheme.value]) == null ? void 0 : _a2.backgroundColor) || computedDefaultColors.value.backgroundColor;
+        return ((_a2 = themes[computedTheme.value]) == null ? void 0 : _a2.backgroundColor) ?? computedDefaultColors.value.backgroundColor;
       }
     );
     return (_ctx, _cache) => {
@@ -5604,7 +5604,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-7f505d62"]]);
+const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-65a6e961"]]);
 const _hoisted_1$H = {
   key: 0,
   class: "tool-bar"
@@ -6021,6 +6021,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     }
     let sortDirection = ref("ASC");
     let sortField = ref("");
+    const computedSortField = computed(() => `_transformed_${sortField.value}`);
     function getFallbackSchema() {
       const keys4 = [
         ...new Set((props2.data || []).map(Object.keys).flat())
@@ -6031,7 +6032,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
       }));
       return props2.showFields ? schema.filter((f2) => {
         var _a2;
-        return ((_a2 = props2.showFields) == null ? void 0 : _a2.includes(f2.id)) || !f2.id;
+        return ((_a2 = props2.showFields) == null ? void 0 : _a2.includes(f2.id)) ?? !f2.id;
       }) : schema;
     }
     const computedSchema = computed(() => {
@@ -6053,9 +6054,10 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
       const fields = computedSchema.value.filter((f2) => f2.id);
       for (const field of fields) {
         const fieldData = rowData[`${field.id}`];
-        const newFieldVal = ((_a2 = field.transform) == null ? void 0 : _a2.call(field, fieldData, rowData)) || fieldData || "";
+        const newFieldVal = (_a2 = field.transform) == null ? void 0 : _a2.call(field, fieldData, rowData);
         Object.assign(obj, {
-          [`${field.id}`]: newFieldVal
+          [`${field.id}`]: fieldData,
+          [`_transformed_${field.id}`]: newFieldVal
         });
       }
       return obj;
@@ -6064,8 +6066,8 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
       const dta = [...props2.data].map(transform);
       if (sortField.value) {
         return dta.sort((a2, b2) => {
-          const aValue = a2[sortField.value];
-          const bValue = b2[sortField.value];
+          const aValue = a2[computedSortField.value] ?? "";
+          const bValue = b2[computedSortField.value] ?? "";
           const numAValue = Number.parseInt(aValue, 10);
           const numBValue = Number.parseInt(bValue, 10);
           if (!Number.isNaN(numAValue) && !Number.isNaN(numBValue)) {
@@ -6126,10 +6128,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
                 class: "row row-item position-relative",
                 onClick: ($event) => selectElement(row)
               }, [
-                (openBlock(true), createElementBlock(Fragment$1, null, renderList(computedSchema.value.map((c2) => ({
-                  ...c2,
-                  transform: void 0
-                })), (field) => {
+                (openBlock(true), createElementBlock(Fragment$1, null, renderList(computedSchema.value, (field) => {
                   return openBlock(), createElementBlock("td", {
                     key: `${field.id}-${row.id}`,
                     class: "col"
@@ -6156,7 +6155,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-9bf1b6df"]]);
+const TableSchema = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-9d32d080"]]);
 const _sfc_main$E = {};
 const _hoisted_1$B = { class: "flex space-between" };
 function _sfc_render$1(_ctx, _cache) {
@@ -16522,7 +16521,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       if (props2.field.$el === "check") return CheckInput;
       if (props2.field.$el === "richtext") return _sfc_main$c;
       if (props2.field.$el === "date") return _sfc_main$n;
-      return props2.field.$el || "div";
+      return props2.field.$el ?? "div";
     });
     const formData = computed({
       get: () => props2.modelValue,
@@ -16551,35 +16550,43 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       }
       return true;
     });
-    const badTransform = /undefined|NaN|Invalid Date/;
     const computedFieldData = computed(
       () => {
         var _a2, _b;
-        const transformedData = (_b = (_a2 = props2.field).transform) == null ? void 0 : _b.call(_a2, fieldData.value, props2.modelValue);
-        if (badTransform.test(String(transformedData))) return fieldData.value;
-        return transformedData;
+        return ((_b = (_a2 = props2.field).transform) == null ? void 0 : _b.call(_a2, fieldData.value, props2.modelValue)) ?? fieldData.value;
+      }
+    );
+    const computedOptions = computed(
+      () => bindAttrs({ options: props2.field.options }, fieldData.value, props2.modelValue).options
+    );
+    const computedAttrs = computed(
+      () => bindAttrs(props2.field.attrs || {}, fieldData.value, props2.modelValue)
+    );
+    const computedClass = computed(
+      () => {
+        var _a2;
+        return classify(fieldData.value, props2.modelValue, props2.field.class, (_a2 = props2.field.attrs) == null ? void 0 : _a2.class);
       }
     );
     return (_ctx, _cache) => {
-      var _a2, _b;
       const _component_BglField = resolveComponent("BglField", true);
-      return vIf.value ? (openBlock(), createBlock(resolveDynamicComponent(is4.value), mergeProps({ key: 0 }, unref(bindAttrs)(((_a2 = _ctx.field) == null ? void 0 : _a2.attrs) || {}, fieldData.value, _ctx.modelValue), {
+      return vIf.value ? (openBlock(), createBlock(resolveDynamicComponent(is4.value), mergeProps({ key: 0 }, computedAttrs.value, {
         id: _ctx.field.id,
         modelValue: fieldData.value,
         "onUpdate:modelValue": [
           _cache[1] || (_cache[1] = ($event) => fieldData.value = $event),
           _cache[2] || (_cache[2] = ($event) => {
-            var _a3, _b2;
-            return (_b2 = (_a3 = _ctx.field) == null ? void 0 : _a3.onUpdate) == null ? void 0 : _b2.call(_a3, $event, formData.value);
+            var _a2, _b;
+            return (_b = (_a2 = _ctx.field) == null ? void 0 : _a2.onUpdate) == null ? void 0 : _b.call(_a2, $event, formData.value);
           })
         ],
         required: _ctx.field.required,
-        class: unref(classify)(fieldData.value, _ctx.modelValue, _ctx.field.class, (_b = _ctx.field.attrs) == null ? void 0 : _b.class),
+        class: computedClass.value,
         label: _ctx.field.label,
         placeholder: _ctx.field.placeholder || _ctx.field.label,
         defaultValue: _ctx.field.defaultValue,
         disabled: _ctx.field.disabled,
-        options: unref(bindAttrs)({ options: _ctx.field.options }, fieldData.value, _ctx.modelValue).options,
+        options: computedOptions.value,
         helptext: _ctx.field.helptext
       }), {
         default: withCtx(() => [
@@ -55693,7 +55700,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-ace0040e"]]);
+const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-4c741194"]]);
 function applyFormatting(command2, value = "") {
   const selection = window.getSelection();
   if (selection && selection.rangeCount > 0) {
@@ -55768,7 +55775,7 @@ function applyFormatting(command2, value = "") {
       case "insertLink":
         insertLink();
         break;
-      case "insertImage":
+      case "image":
         insertImage();
         break;
       case "createTable":
@@ -55836,17 +55843,11 @@ function insertLink() {
   }
 }
 function insertImage() {
-  const url = prompt("Enter the image URL:");
-  if (url) {
-    const selection = window.getSelection();
-    if (selection && selection.rangeCount > 0) {
-      const range2 = selection.getRangeAt(0);
-      const img = document.createElement("img");
-      img.src = url;
-      range2.deleteContents();
-      range2.insertNode(img);
-    }
-  }
+  console.log("image");
+  const { showModalForm } = useModal();
+  console.log(showModalForm);
+  showModalForm({ title: "Upload Image", schema: [{ id: "image", type: "file" }], onSubmit: (data2) => {
+  } });
 }
 function createTable() {
   const rows = prompt("Enter the number of rows:");