@bagelink/vue 1.0.41 → 1.0.43

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.vue"],"names":[],"mappings":"AA2dA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAY/D,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,MAAM,CAAA;AAC5C,MAAM,MAAM,UAAU,GAAG,GAAG,MAAM,IAAI,eAAe,EAAE,CAAA;yBAEtC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eAChC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WAwU1D,mBAAmB,CAAC;;;;;;;;;;wBArNV,MAAM,EAAE;0CAqNoE,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;;UAnD0E,GAAG;UAqDjF,2TAAoC;OAG/B,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAlVzE,wBAkV4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"DataTable.vue.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.vue"],"names":[],"mappings":"AA+dA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAY/D,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,MAAM,CAAA;AAC5C,MAAM,MAAM,UAAU,GAAG,GAAG,MAAM,IAAI,eAAe,EAAE,CAAA;yBAEtC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eAChC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WAiV1D,mBAAmB,CAAC;;;;;;;;;;wBA7NV,MAAM,EAAE;0CA6NoE,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;;UApD0E,GAAG;UAsDjF,2TAAoC;OAG/B,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AA3VzE,wBA2V4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/components/DataTable/useTableData.d.ts

@@ -22,6 +22,7 @@ export declare function useTableData<T extends Record<string, any>>(options: Use
     sortDirection: ComputedRef<SortDirectionsT>;
     toggleSort: (fieldname: string) => void;
     cleanTransformedData: <T_1 extends Record<string, any>>(data: TransformedData<T_1>) => T_1;
+    schemaState: ComputedRef<"error" | "loading" | "loaded">;
 };
 export {};
 //# sourceMappingURL=useTableData.d.ts.map

package/dist/components/DataTable/useTableData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableData.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/useTableData.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAahF,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACrC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;IACjC,MAAM,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;IACnF,OAAO,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,GAAG,MAAM,EAAE,CAAA;IACtD,aAAa,CAAC,EAAE,WAAW,CAAC,OAAO,GAAG,SAAS,CAAC,GAAG,OAAO,GAAG,SAAS,CAAA;IACtE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,KAAK,IAAI,CAAA;CAC5D;AAED,UAAU,mBAAmB;IAC5B,CAAC,GAAG,EAAE,gBAAgB,MAAM,EAAE,GAAG,GAAG,CAAA;IACpC,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,OAAO,CAAA;IACjC,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAA;IAChC,CAAC,GAAG,EAAE,aAAa,MAAM,EAAE,GAAG,GAAG,CAAA;CACjC;AAED,KAAK,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG,mBAAmB,CAAA;AAEjD,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAC;;;yBAgE9D,CAAC,KAAG,eAAe,CAAC,CAAC,CAAC;;;4BA2FnB,MAAM;uCAzDG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,eAAe,CAAC,GAAC,CAAC,KAAG,GAAC;EAgFzF"}
+{"version":3,"file":"useTableData.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/useTableData.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAahF,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACrC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;IACjC,MAAM,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;IACnF,OAAO,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,GAAG,MAAM,EAAE,CAAA;IACtD,aAAa,CAAC,EAAE,WAAW,CAAC,OAAO,GAAG,SAAS,CAAC,GAAG,OAAO,GAAG,SAAS,CAAA;IACtE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,KAAK,IAAI,CAAA;CAC5D;AAED,UAAU,mBAAmB;IAC5B,CAAC,GAAG,EAAE,gBAAgB,MAAM,EAAE,GAAG,GAAG,CAAA;IACpC,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,OAAO,CAAA;IACjC,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAA;IAChC,CAAC,GAAG,EAAE,aAAa,MAAM,EAAE,GAAG,GAAG,CAAA;CACjC;AAED,KAAK,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG,mBAAmB,CAAA;AAEjD,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAC;;;yBA6F9D,CAAC,KAAG,eAAe,CAAC,CAAC,CAAC;;;4BA2FnB,MAAM;uCAzDG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,eAAe,CAAC,GAAC,CAAC,KAAG,GAAC;;EAiFzF"}

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

@@ -1 +1 @@
-{"version":3,"file":"FieldArray.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/FieldArray.vue"],"names":[],"mappings":"AAAA,OAiOO,KAAK,EACX,WAAW,EACX,cAAc,EACd,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAChB,KAAK,EACL,MAAM,eAAe,CAAA;yBAKL,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eAChC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WAoV1D,mBAAmB,CAAC;;;aAjVrB,GAAG;YACJ,MAAM;gBACF,MAAM;sBACA,MAAM;mBACT,KAAK,CAAC,CAAC,CAAC,EAAE;gBACb,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC;gBAC/B,UAAU,CAAC,CAAC,CAAC;mBACV,OAAO;mBACP,OAAO;mBACP,MAAM;kBACP,iBAAiB,CAAC,CAAC,CAAC;uBACf,GAAG;cACZ,OAAO;iBACJ,OAAO;oBACJ,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC;gBACnB,gBAAgB;oBACZ,CAAC,EAAE;mBAiU6E,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;OAKC,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AA9VzE,wBA8V4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"FieldArray.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/FieldArray.vue"],"names":[],"mappings":"AAgOA,OAAO,KAAK,EACX,WAAW,EACX,cAAc,EACd,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAChB,KAAK,EACL,MAAM,eAAe,CAAA;yBAIL,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eAChC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WAoV1D,mBAAmB,CAAC;;;aAjVrB,GAAG;YACJ,MAAM;gBACF,MAAM;sBACA,MAAM;mBACT,KAAK,CAAC,CAAC,CAAC,EAAE;gBACb,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC;gBAC/B,UAAU,CAAC,CAAC,CAAC;mBACV,OAAO;mBACP,OAAO;mBACP,MAAM;kBACP,iBAAiB,CAAC,CAAC,CAAC;uBACf,GAAG;cACZ,OAAO;iBACJ,OAAO;oBACJ,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC;gBACnB,gBAAgB;oBACZ,CAAC,EAAE;mBAiU6E,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;OAKC,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AA9VzE,wBA8V4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/index.cjs

@@ -1628,7 +1628,7 @@ const _hoisted_10$7 = {
   key: 4,
   class: "event-flyout__row is-topic"
 };
-const _hoisted_11$6 = {
+const _hoisted_11$7 = {
   key: 5,
   class: "event-flyout__row is-description"
 };
@@ -1855,7 +1855,7 @@ const _sfc_main$1c = /* @__PURE__ */ vue.defineComponent({
               }, null, 8, ["icon"]),
               vue.createTextVNode(" " + vue.toDisplayString(calendarEvent.value.topic), 1)
             ])) : vue.createCommentVNode("", true),
-            calendarEvent.value.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$6, [
+            calendarEvent.value.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$7, [
               vue.createVNode(vue.unref(_sfc_main$s), {
                 icon: icons.description
               }, null, 8, ["icon"]),
@@ -10688,6 +10688,8 @@ const SRC_VALUE_COMPONENTS = /* @__PURE__ */ new Set(["img", "iframe"]);
 function useTableData(options) {
   const sortField = vue.ref("");
   const sortDirection = vue.ref("ASC");
+  const schemaState = vue.ref("loading");
+  const resolvedSchema = vue.ref([]);
   function getValue(value) {
     if (value === void 0 || value === null) {
       return void 0;
@@ -10702,31 +10704,50 @@ function useTableData(options) {
       return void 0;
     }
   }
-  const computedSchema = vue.computed(() => {
-    const dataValue = options.data.value || [];
-    const schema = useBglSchema({
-      schema: getValue(options.schema),
-      columns: getValue(options.columns),
-      data: dataValue
-    });
-    if (Array.isArray(schema) && schema.length > 0) {
-      return schema.filter((field) => field && field.id);
-    }
-    if (Array.isArray(dataValue) && dataValue.length > 0) {
-      const firstItem = dataValue[0];
-      return Object.keys(firstItem || {}).filter((key) => key !== "id" && !key.startsWith("_")).map((key) => ({
-        id: key,
-        label: keyToLabel(key),
-        $el: "div",
-        transform: (val) => {
-          const dateFields = ["created_at", "updated_at"];
-          if (dateFields.includes(key)) return val ? new Date(val).toLocaleString() : val;
-          return val;
-        }
-      }));
+  async function resolveSchemaAsync() {
+    try {
+      schemaState.value = "loading";
+      const dataValue = options.data.value || [];
+      const schema = await useBglSchema({
+        schema: getValue(options.schema),
+        columns: getValue(options.columns),
+        data: dataValue
+      });
+      if (Array.isArray(schema) && schema.length > 0) {
+        resolvedSchema.value = schema.filter((field) => field && field.id);
+      } else if (Array.isArray(dataValue) && dataValue.length > 0) {
+        const firstItem = dataValue[0];
+        resolvedSchema.value = Object.keys(firstItem || {}).filter((key) => key !== "id" && !key.startsWith("_")).map((key) => ({
+          id: key,
+          label: keyToLabel(key),
+          $el: "div",
+          transform: (val) => {
+            const dateFields = ["created_at", "updated_at"];
+            if (dateFields.includes(key)) return val ? new Date(val).toLocaleString() : val;
+            return val;
+          }
+        }));
+      } else {
+        resolvedSchema.value = [];
+      }
+      schemaState.value = "loaded";
+    } catch (error) {
+      console.error("Error resolving schema:", error);
+      schemaState.value = "error";
+      resolvedSchema.value = [];
     }
-    return [];
+  }
+  vue.watch([
+    () => getValue(options.schema),
+    () => getValue(options.columns),
+    () => options.data.value
+  ], () => {
+    resolveSchemaAsync();
+  }, { immediate: true });
+  vue.onMounted(() => {
+    resolveSchemaAsync();
   });
+  const computedSchema = vue.computed(() => resolvedSchema.value);
   function transform(rowData) {
     const transformed = { ...rowData };
     const schemaFields = computedSchema.value.filter((f2) => f2.id);
@@ -10808,7 +10829,8 @@ function useTableData(options) {
     sortField: vue.computed(() => sortField.value),
     sortDirection: vue.computed(() => sortDirection.value),
     toggleSort,
-    cleanTransformedData
+    cleanTransformedData,
+    schemaState: vue.computed(() => schemaState.value)
   };
 }
 const _hoisted_1$P = { class: "data-preview" };
@@ -11512,15 +11534,19 @@ const _hoisted_1$O = {
   key: 0,
   class: "loading-table-wrapper z-99 h-100 w-100 absolute inset"
 };
-const _hoisted_2$A = { class: "infinite-wrapper" };
-const _hoisted_3$u = { class: "row first-row" };
-const _hoisted_4$k = { key: 0 };
-const _hoisted_5$j = ["onClick"];
-const _hoisted_6$g = { class: "flex" };
-const _hoisted_7$c = ["onClick"];
-const _hoisted_8$7 = { key: 0 };
-const _hoisted_9$6 = ["value"];
-const _hoisted_10$6 = { key: 1 };
+const _hoisted_2$A = {
+  key: 1,
+  class: "flex-center h-300px txt-red"
+};
+const _hoisted_3$u = { class: "infinite-wrapper" };
+const _hoisted_4$k = { class: "row first-row" };
+const _hoisted_5$j = { key: 0 };
+const _hoisted_6$g = ["onClick"];
+const _hoisted_7$c = { class: "flex" };
+const _hoisted_8$7 = ["onClick"];
+const _hoisted_9$6 = { key: 0 };
+const _hoisted_10$6 = ["value"];
+const _hoisted_11$6 = { key: 1 };
 const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
   __name: "DataTable",
   props: /* @__PURE__ */ vue.mergeModels({
@@ -11541,7 +11567,7 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
   emits: /* @__PURE__ */ vue.mergeModels(["orderBy", "select", "lastItemVisible"], ["update:loading", "update:itemHeight", "update:selectedItems"]),
   setup(__props, { emit: __emit }) {
     vue.useCssVars((_ctx) => ({
-      "31aad8d2": vue.unref(computedItemHeight)
+      "03db8ce0": vue.unref(computedItemHeight)
     }));
     const props2 = __props;
     const emit2 = __emit;
@@ -11559,7 +11585,8 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
       sortField,
       sortDirection,
       toggleSort,
-      cleanTransformedData
+      cleanTransformedData,
+      schemaState
     } = useTableData({ data: data2, schema, columns, useServerSort, onSort: (field, direction) => {
       emit2("orderBy", `${field} ${direction}`.trim());
     } });
@@ -11630,14 +11657,14 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
     );
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: "table-list-wrap h-100" }, vue.unref(containerProps), {
-        class: { "loading-table": loading.value }
+        class: { "loading-table": loading.value || vue.unref(schemaState) === "loading" }
       }), [
-        loading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$O, _cache[4] || (_cache[4] = [
+        loading.value || vue.unref(schemaState) === "loading" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$O, _cache[4] || (_cache[4] = [
           vue.createElementVNode("div", { class: "loading-table-animation absolute oval" }, null, -1)
-        ]))) : (vue.openBlock(), vue.createElementBlock("div", vue.normalizeProps(vue.mergeProps({ key: 1 }, vue.unref(wrapperProps))), [
-          vue.createElementVNode("table", _hoisted_2$A, [
-            vue.createElementVNode("thead", _hoisted_3$u, [
-              vue.unref(isSelectable) ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_4$k, [
+        ]))) : vue.unref(schemaState) === "error" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$A, " Error loading table schema ")) : (vue.openBlock(), vue.createElementBlock("div", vue.normalizeProps(vue.mergeProps({ key: 2 }, vue.unref(wrapperProps))), [
+          vue.createElementVNode("table", _hoisted_3$u, [
+            vue.createElementVNode("thead", _hoisted_4$k, [
+              vue.unref(isSelectable) ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_5$j, [
                 vue.createElementVNode("input", {
                   ref_key: "allSelectorEl",
                   ref: allSelectorEl,
@@ -11654,7 +11681,7 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
                   class: "col",
                   onClick: ($event) => vue.unref(toggleSort)((field == null ? void 0 : field.id) || "")
                 }, [
-                  vue.createElementVNode("div", _hoisted_6$g, [
+                  vue.createElementVNode("div", _hoisted_7$c, [
                     vue.createTextVNode(vue.toDisplayString(field.label || vue.unref(keyToLabel)(field == null ? void 0 : field.id)) + " ", 1),
                     vue.createElementVNode("div", {
                       class: vue.normalizeClass(["list-arrows", { sorted: vue.unref(sortField) === (field == null ? void 0 : field.id) }])
@@ -11665,7 +11692,7 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
                       }, null, 8, ["class"])
                     ], 2)
                   ])
-                ], 8, _hoisted_5$j);
+                ], 8, _hoisted_6$g);
               }), 128))
             ]),
             vue.createElementVNode("tbody", null, [
@@ -11675,7 +11702,7 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
                   class: vue.normalizeClass(["row row-item position-relative", { selected: (row == null ? void 0 : row.id) && vue.unref(computedSelectedItems).includes(row.id) }]),
                   onClick: ($event) => vue.unref(toggleSelectItem)(row)
                 }, [
-                  vue.unref(isSelectable) ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_8$7, [
+                  vue.unref(isSelectable) ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_9$6, [
                     vue.createElementVNode("div", {
                       onClick: _cache[3] || (_cache[3] = vue.withModifiers(() => {
                       }, ["stop"]))
@@ -11684,7 +11711,7 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
                         "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => selectedItems.value = $event),
                         type: "checkbox",
                         value: (row == null ? void 0 : row.id) || ""
-                      }, null, 8, _hoisted_9$6), [
+                      }, null, 8, _hoisted_10$6), [
                         [vue.vModelCheckbox, selectedItems.value]
                       ])
                     ])
@@ -11698,12 +11725,12 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
                         key: 0,
                         row,
                         field
-                      }, void 0, true) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$6, [
+                      }, void 0, true) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$6, [
                         (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderFieldForRow(field, row))))
                       ]))
                     ]);
                   }), 128))
-                ], 10, _hoisted_7$c);
+                ], 10, _hoisted_8$7);
               }), 128)),
               props2.onLastItemVisible !== void 0 ? (vue.openBlock(), vue.createElementBlock("tr", {
                 key: 0,
@@ -11718,7 +11745,7 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const DataTable = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-43f28baa"]]);
+const DataTable = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-30ec790f"]]);
 function useDraggable(options = {}) {
   const isDragging = vue.ref(false);
   const dragElement = vue.ref(null);

package/dist/index.mjs

@@ -1626,7 +1626,7 @@ const _hoisted_10$7 = {
   key: 4,
   class: "event-flyout__row is-topic"
 };
-const _hoisted_11$6 = {
+const _hoisted_11$7 = {
   key: 5,
   class: "event-flyout__row is-description"
 };
@@ -1853,7 +1853,7 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
               }, null, 8, ["icon"]),
               createTextVNode(" " + toDisplayString(calendarEvent.value.topic), 1)
             ])) : createCommentVNode("", true),
-            calendarEvent.value.description ? (openBlock(), createElementBlock("div", _hoisted_11$6, [
+            calendarEvent.value.description ? (openBlock(), createElementBlock("div", _hoisted_11$7, [
               createVNode(unref(_sfc_main$s), {
                 icon: icons.description
               }, null, 8, ["icon"]),
@@ -10686,6 +10686,8 @@ const SRC_VALUE_COMPONENTS = /* @__PURE__ */ new Set(["img", "iframe"]);
 function useTableData(options) {
   const sortField = ref("");
   const sortDirection = ref("ASC");
+  const schemaState = ref("loading");
+  const resolvedSchema = ref([]);
   function getValue(value) {
     if (value === void 0 || value === null) {
       return void 0;
@@ -10700,31 +10702,50 @@ function useTableData(options) {
       return void 0;
     }
   }
-  const computedSchema = computed(() => {
-    const dataValue = options.data.value || [];
-    const schema = useBglSchema({
-      schema: getValue(options.schema),
-      columns: getValue(options.columns),
-      data: dataValue
-    });
-    if (Array.isArray(schema) && schema.length > 0) {
-      return schema.filter((field) => field && field.id);
-    }
-    if (Array.isArray(dataValue) && dataValue.length > 0) {
-      const firstItem = dataValue[0];
-      return Object.keys(firstItem || {}).filter((key) => key !== "id" && !key.startsWith("_")).map((key) => ({
-        id: key,
-        label: keyToLabel(key),
-        $el: "div",
-        transform: (val) => {
-          const dateFields = ["created_at", "updated_at"];
-          if (dateFields.includes(key)) return val ? new Date(val).toLocaleString() : val;
-          return val;
-        }
-      }));
+  async function resolveSchemaAsync() {
+    try {
+      schemaState.value = "loading";
+      const dataValue = options.data.value || [];
+      const schema = await useBglSchema({
+        schema: getValue(options.schema),
+        columns: getValue(options.columns),
+        data: dataValue
+      });
+      if (Array.isArray(schema) && schema.length > 0) {
+        resolvedSchema.value = schema.filter((field) => field && field.id);
+      } else if (Array.isArray(dataValue) && dataValue.length > 0) {
+        const firstItem = dataValue[0];
+        resolvedSchema.value = Object.keys(firstItem || {}).filter((key) => key !== "id" && !key.startsWith("_")).map((key) => ({
+          id: key,
+          label: keyToLabel(key),
+          $el: "div",
+          transform: (val) => {
+            const dateFields = ["created_at", "updated_at"];
+            if (dateFields.includes(key)) return val ? new Date(val).toLocaleString() : val;
+            return val;
+          }
+        }));
+      } else {
+        resolvedSchema.value = [];
+      }
+      schemaState.value = "loaded";
+    } catch (error) {
+      console.error("Error resolving schema:", error);
+      schemaState.value = "error";
+      resolvedSchema.value = [];
     }
-    return [];
+  }
+  watch([
+    () => getValue(options.schema),
+    () => getValue(options.columns),
+    () => options.data.value
+  ], () => {
+    resolveSchemaAsync();
+  }, { immediate: true });
+  onMounted(() => {
+    resolveSchemaAsync();
   });
+  const computedSchema = computed(() => resolvedSchema.value);
   function transform(rowData) {
     const transformed = { ...rowData };
     const schemaFields = computedSchema.value.filter((f2) => f2.id);
@@ -10806,7 +10827,8 @@ function useTableData(options) {
     sortField: computed(() => sortField.value),
     sortDirection: computed(() => sortDirection.value),
     toggleSort,
-    cleanTransformedData
+    cleanTransformedData,
+    schemaState: computed(() => schemaState.value)
   };
 }
 const _hoisted_1$P = { class: "data-preview" };
@@ -11510,15 +11532,19 @@ const _hoisted_1$O = {
   key: 0,
   class: "loading-table-wrapper z-99 h-100 w-100 absolute inset"
 };
-const _hoisted_2$A = { class: "infinite-wrapper" };
-const _hoisted_3$u = { class: "row first-row" };
-const _hoisted_4$k = { key: 0 };
-const _hoisted_5$j = ["onClick"];
-const _hoisted_6$g = { class: "flex" };
-const _hoisted_7$c = ["onClick"];
-const _hoisted_8$7 = { key: 0 };
-const _hoisted_9$6 = ["value"];
-const _hoisted_10$6 = { key: 1 };
+const _hoisted_2$A = {
+  key: 1,
+  class: "flex-center h-300px txt-red"
+};
+const _hoisted_3$u = { class: "infinite-wrapper" };
+const _hoisted_4$k = { class: "row first-row" };
+const _hoisted_5$j = { key: 0 };
+const _hoisted_6$g = ["onClick"];
+const _hoisted_7$c = { class: "flex" };
+const _hoisted_8$7 = ["onClick"];
+const _hoisted_9$6 = { key: 0 };
+const _hoisted_10$6 = ["value"];
+const _hoisted_11$6 = { key: 1 };
 const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "DataTable",
   props: /* @__PURE__ */ mergeModels({
@@ -11539,7 +11565,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   emits: /* @__PURE__ */ mergeModels(["orderBy", "select", "lastItemVisible"], ["update:loading", "update:itemHeight", "update:selectedItems"]),
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "31aad8d2": unref(computedItemHeight)
+      "03db8ce0": unref(computedItemHeight)
     }));
     const props2 = __props;
     const emit2 = __emit;
@@ -11557,7 +11583,8 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
       sortField,
       sortDirection,
       toggleSort,
-      cleanTransformedData
+      cleanTransformedData,
+      schemaState
     } = useTableData({ data: data2, schema, columns, useServerSort, onSort: (field, direction) => {
       emit2("orderBy", `${field} ${direction}`.trim());
     } });
@@ -11628,14 +11655,14 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({ class: "table-list-wrap h-100" }, unref(containerProps), {
-        class: { "loading-table": loading.value }
+        class: { "loading-table": loading.value || unref(schemaState) === "loading" }
       }), [
-        loading.value ? (openBlock(), createElementBlock("div", _hoisted_1$O, _cache[4] || (_cache[4] = [
+        loading.value || unref(schemaState) === "loading" ? (openBlock(), createElementBlock("div", _hoisted_1$O, _cache[4] || (_cache[4] = [
           createElementVNode("div", { class: "loading-table-animation absolute oval" }, null, -1)
-        ]))) : (openBlock(), createElementBlock("div", normalizeProps(mergeProps({ key: 1 }, unref(wrapperProps))), [
-          createElementVNode("table", _hoisted_2$A, [
-            createElementVNode("thead", _hoisted_3$u, [
-              unref(isSelectable) ? (openBlock(), createElementBlock("th", _hoisted_4$k, [
+        ]))) : unref(schemaState) === "error" ? (openBlock(), createElementBlock("div", _hoisted_2$A, " Error loading table schema ")) : (openBlock(), createElementBlock("div", normalizeProps(mergeProps({ key: 2 }, unref(wrapperProps))), [
+          createElementVNode("table", _hoisted_3$u, [
+            createElementVNode("thead", _hoisted_4$k, [
+              unref(isSelectable) ? (openBlock(), createElementBlock("th", _hoisted_5$j, [
                 createElementVNode("input", {
                   ref_key: "allSelectorEl",
                   ref: allSelectorEl,
@@ -11652,7 +11679,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
                   class: "col",
                   onClick: ($event) => unref(toggleSort)((field == null ? void 0 : field.id) || "")
                 }, [
-                  createElementVNode("div", _hoisted_6$g, [
+                  createElementVNode("div", _hoisted_7$c, [
                     createTextVNode(toDisplayString(field.label || unref(keyToLabel)(field == null ? void 0 : field.id)) + " ", 1),
                     createElementVNode("div", {
                       class: normalizeClass(["list-arrows", { sorted: unref(sortField) === (field == null ? void 0 : field.id) }])
@@ -11663,7 +11690,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
                       }, null, 8, ["class"])
                     ], 2)
                   ])
-                ], 8, _hoisted_5$j);
+                ], 8, _hoisted_6$g);
               }), 128))
             ]),
             createElementVNode("tbody", null, [
@@ -11673,7 +11700,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
                   class: normalizeClass(["row row-item position-relative", { selected: (row == null ? void 0 : row.id) && unref(computedSelectedItems).includes(row.id) }]),
                   onClick: ($event) => unref(toggleSelectItem)(row)
                 }, [
-                  unref(isSelectable) ? (openBlock(), createElementBlock("td", _hoisted_8$7, [
+                  unref(isSelectable) ? (openBlock(), createElementBlock("td", _hoisted_9$6, [
                     createElementVNode("div", {
                       onClick: _cache[3] || (_cache[3] = withModifiers(() => {
                       }, ["stop"]))
@@ -11682,7 +11709,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
                         "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => selectedItems.value = $event),
                         type: "checkbox",
                         value: (row == null ? void 0 : row.id) || ""
-                      }, null, 8, _hoisted_9$6), [
+                      }, null, 8, _hoisted_10$6), [
                         [vModelCheckbox, selectedItems.value]
                       ])
                     ])
@@ -11696,12 +11723,12 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
                         key: 0,
                         row,
                         field
-                      }, void 0, true) : (openBlock(), createElementBlock("div", _hoisted_10$6, [
+                      }, void 0, true) : (openBlock(), createElementBlock("div", _hoisted_11$6, [
                         (openBlock(), createBlock(resolveDynamicComponent(renderFieldForRow(field, row))))
                       ]))
                     ]);
                   }), 128))
-                ], 10, _hoisted_7$c);
+                ], 10, _hoisted_8$7);
               }), 128)),
               props2.onLastItemVisible !== void 0 ? (openBlock(), createElementBlock("tr", {
                 key: 0,
@@ -11716,7 +11743,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DataTable = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-43f28baa"]]);
+const DataTable = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-30ec790f"]]);
 function useDraggable(options = {}) {
   const isDragging = ref(false);
   const dragElement = ref(null);

package/dist/style.css

@@ -1021,22 +1021,22 @@ display: block;
 	text-align: center;
 }
 
-.table-list-wrap[data-v-43f28baa] {
+.table-list-wrap[data-v-30ec790f] {
 	min-height: 150px;
 }
-.selected[data-v-43f28baa] {
+.selected[data-v-30ec790f] {
 	background: var(--bgl-primary-tint);
 }
-tbody tr.selected[data-v-43f28baa]:hover {
+tbody tr.selected[data-v-30ec790f]:hover {
 	background: var(--bgl-primary-light);
 }
-.loading-table[data-v-43f28baa] {
+.loading-table[data-v-30ec790f] {
 	position: relative;
 }
-.inset[data-v-43f28baa] {
+.inset[data-v-30ec790f] {
 	inset: 0;
 }
-.loading-table-animation[data-v-43f28baa] {
+.loading-table-animation[data-v-30ec790f] {
 	--size: 60px;
 	top: 30vh;
 	inset-inline-start: calc(50% - var(--size));
@@ -1044,9 +1044,9 @@ tbody tr.selected[data-v-43f28baa]:hover {
 	border-top: 4px solid var(--bgl-primary);
 	width: var(--size);
 	height: var(--size);
-	animation: loading-table-43f28baa 1s linear infinite;
+	animation: loading-table-30ec790f 1s linear infinite;
 }
-@keyframes loading-table-43f28baa {
+@keyframes loading-table-30ec790f {
 0% {
 		transform: translate(-50%, -50%) rotate(0deg);
 }
@@ -1054,55 +1054,55 @@ tbody tr.selected[data-v-43f28baa]:hover {
 		transform: translate(-50%, -50%) rotate(360deg);
 }
 }
-.list-arrows[data-v-43f28baa] {
+.list-arrows[data-v-30ec790f] {
 	opacity: 0;
 }
-.list-arrows .bgl_icon-font[data-v-43f28baa] {
+.list-arrows .bgl_icon-font[data-v-30ec790f] {
 	transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-43f28baa] {
+.list-arrows.sorted[data-v-30ec790f] {
 	opacity: 1;
 }
-.col img[data-v-43f28baa] {
+.col img[data-v-30ec790f] {
 	height: 35px;
 	margin-top: -14px;
 	margin-bottom: -14px;
 	border-radius: 5px;
 	object-fit: cover;
 }
-.col[data-v-43f28baa]:has(img) {
+.col[data-v-30ec790f]:has(img) {
 	padding-inline-end: 0.5rem;
 }
-.list-arrows.sorted .desc[data-v-43f28baa] {
+.list-arrows.sorted .desc[data-v-30ec790f] {
 	transform: rotate(180deg);
 	display: inline-block;
 }
-table[data-v-43f28baa] {
+table[data-v-30ec790f] {
 	border-spacing: 0 15px;
 	border-collapse: collapse;
 	width: 100%;
 }
-th[data-v-43f28baa] {
+th[data-v-30ec790f] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
 	top: 0;
 	z-index: 2;
 	background: var(--bgl-box-bg);
-	height: var(--31aad8d2);
+	height: var(--03db8ce0);
 	vertical-align: bottom;
 	font-weight: 400;
 	text-align: start;
 }
-.embedded-field[data-v-43f28baa] {
+.embedded-field[data-v-30ec790f] {
 	margin-bottom: -0.2rem;
 	margin-top: -0.2rem;
 }
-.row[data-v-43f28baa] {
+.row[data-v-30ec790f] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 }
-.row.first-row[data-v-43f28baa] {
+.row.first-row[data-v-30ec790f] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
@@ -1111,7 +1111,7 @@ th[data-v-43f28baa] {
 	background: var(--bgl-box-bg);
 	vertical-align: bottom;
 }
-.row.first-row[data-v-43f28baa]::after {
+.row.first-row[data-v-30ec790f]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -1119,11 +1119,11 @@ th[data-v-43f28baa] {
 	right: 0;
 	bottom: -1px;
 }
-.first-row .col[data-v-43f28baa] {
+.first-row .col[data-v-30ec790f] {
 	cursor: pointer;
 	background: var(--bgl-box-bg);
 }
-.col[data-v-43f28baa] {
+.col[data-v-30ec790f] {
 	white-space: nowrap;
 	padding: 0.75rem 1rem;
 	transition: var(--bgl-transition);
@@ -1133,19 +1133,19 @@ th[data-v-43f28baa] {
 	overflow: hidden;
 	max-width: 30vw;
 }
-.col[data-v-43f28baa]:has(.bagel-input) {
+.col[data-v-30ec790f]:has(.bagel-input) {
 	padding: 0rem 0.25rem;
 }
-.col > div[data-v-43f28baa] {
+.col > div[data-v-30ec790f] {
 	display: flex;
 	gap: 0.5rem;
 }
-.max-col-width[data-v-43f28baa] {
+.max-col-width[data-v-30ec790f] {
 	max-width: 30vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.col.check .bgl_icon-font[data-v-43f28baa] {
+.col.check .bgl_icon-font[data-v-30ec790f] {
 	border-radius: 100%;
 	background: var(--bgl-blue-20);
 	color: var(--bgl-primary);
@@ -1156,35 +1156,35 @@ th[data-v-43f28baa] {
 	justify-content: center;
 	margin-top: -2px;
 }
-.rows[data-v-43f28baa] {
+.rows[data-v-30ec790f] {
 	font-size: 0.88em;
 }
-.table-list[data-v-43f28baa] {
+.table-list[data-v-30ec790f] {
 	height: 100%;
 	position: relative;
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	overflow: auto;
 }
-.BagelTable .table-list[data-v-43f28baa] {
+.BagelTable .table-list[data-v-30ec790f] {
 	overflow: unset;
 }
-.row-item[data-v-43f28baa] {
-	height: var(--31aad8d2);
+.row-item[data-v-30ec790f] {
+	height: var(--03db8ce0);
 	transition: all 200ms ease;
 }
-.row-item[data-v-43f28baa]:hover {
+.row-item[data-v-30ec790f]:hover {
 	background: var(--bgl-gray-light);
 }
-.row-item input[type='checkbox'][data-v-43f28baa] {
+.row-item input[type='checkbox'][data-v-30ec790f] {
 	margin-top: 0.45rem !important;
 	accent-color: var(--bgl-accent-color);
 }
-.infinite-wrapper[data-v-43f28baa] {
+.infinite-wrapper[data-v-30ec790f] {
 	overflow-y: auto;
 	width: 100%;
 }
-input[type='checkbox'][data-v-43f28baa] {
+input[type='checkbox'][data-v-30ec790f] {
 	margin-top: 0.3rem !important;
 	accent-color: var(--bgl-accent-color);
 	transform: scale(1.2);
@@ -1196,7 +1196,7 @@ input[type='checkbox'][data-v-43f28baa] {
 	height: 0.85rem;
 	width: 0.85rem;
 }
-input[type='checkbox'][data-v-43f28baa]::before {
+input[type='checkbox'][data-v-30ec790f]::before {
 	content: '';
 	height: 0.85rem;
 	width: 0.85rem;
@@ -1209,18 +1209,18 @@ input[type='checkbox'][data-v-43f28baa]::before {
 	transform: scale(1);
 	position: absolute;
 }
-input[type='checkbox'][data-v-43f28baa]:hover::before {
+input[type='checkbox'][data-v-30ec790f]:hover::before {
 	opacity: 0.2;
 	transform: scale(2);
 }
-[lang='he'] [dir='ltr'][data-v-43f28baa] {
+[lang='he'] [dir='ltr'][data-v-30ec790f] {
 	text-align: right;
 }
-th input[type='checkbox'][data-v-43f28baa] {
+th input[type='checkbox'][data-v-30ec790f] {
 	transform: translateY(0.2rem) scale(1.2);
 	accent-color: var(--bgl-accent-color);
 }
-th[data-v-43f28baa]::after {
+th[data-v-30ec790f]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -1228,24 +1228,24 @@ th[data-v-43f28baa]::after {
 	right: 0;
 	bottom: -1px;
 }
-tr[data-v-43f28baa] {
+tr[data-v-30ec790f] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 	align-items: center;
 }
-td[data-v-43f28baa],
-th[data-v-43f28baa] {
+td[data-v-30ec790f],
+th[data-v-30ec790f] {
 	white-space: nowrap;
 	padding: 0.75rem 0.65rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 }
-tbody tr[data-v-43f28baa] {
+tbody tr[data-v-30ec790f] {
 	font-size: 0.88em;
-	height: var(--31aad8d2);
+	height: var(--03db8ce0);
 	transition: all 200ms ease;
 }
-tbody tr[data-v-43f28baa]:hover {
+tbody tr[data-v-30ec790f]:hover {
 	background: var(--bgl-gray-light);
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.0.41",
+  "version": "1.0.43",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/DataTable/DataTable.vue

@@ -41,7 +41,8 @@ const {
 	sortField,
 	sortDirection,
 	toggleSort,
-	cleanTransformedData
+	cleanTransformedData,
+	schemaState
 } = useTableData<T>({ data, schema, columns, useServerSort, onSort: (field, direction) => {
 	emit('orderBy', `${field} ${direction}`.trim() as EmitOrderT)
 } })
@@ -118,14 +119,17 @@ watch(
 	<div
 		class="table-list-wrap h-100"
 		v-bind="containerProps"
-		:class="{ 'loading-table': loading }"
+		:class="{ 'loading-table': loading || schemaState === 'loading' }"
 	>
 		<div
-			v-if="loading"
+			v-if="loading || schemaState === 'loading'"
 			class="loading-table-wrapper z-99 h-100 w-100 absolute inset"
 		>
 			<div class="loading-table-animation absolute oval" />
 		</div>
+		<div v-else-if="schemaState === 'error'" class="flex-center h-300px txt-red">
+			Error loading table schema
+		</div>
 		<div v-else v-bind="wrapperProps">
 			<table class="infinite-wrapper">
 				<thead class="row first-row">

package/src/components/DataTable/useTableData.ts

@@ -1,7 +1,7 @@
 import type { ComputedRef } from 'vue'
 import type { TableDataOptions, SortDirectionsT } from '../../types/TableSchema'
 import { useBglSchema, isDate, keyToLabel } from '@bagelink/vue'
-import { computed, ref } from 'vue'
+import { computed, ref, onMounted, watch } from 'vue'
 
 const NON_DIGIT_REGEX = /[^\d.-]/g
 
@@ -33,6 +33,10 @@ export function useTableData<T extends Record<string, any>>(options: UseTableDat
 	// Sorting state
 	const sortField = ref('')
 	const sortDirection = ref<SortDirectionsT>('ASC')
+	// Schema loading state
+	const schemaState = ref<'loading' | 'loaded' | 'error'>('loading')
+	const resolvedSchema = ref<any[]>([])
+
 	// Helper function to get the value from a possibly computed ref
 	function getValue<V>(value: ComputedRef<V> | V | undefined): V | undefined {
 		if (value === undefined || value === null) {
@@ -52,47 +56,72 @@ export function useTableData<T extends Record<string, any>>(options: UseTableDat
 		}
 	}
 
-	// Create a computed property for the schema that will react to changes in options.columns
-	const computedSchema = computed(() => {
-		// Get the data safely
-		const dataValue = options.data.value || []
+	// Function to resolve schema asynchronously
+	async function resolveSchemaAsync() {
+		try {
+			schemaState.value = 'loading'
 
-		// Get the schema from useBglSchema
-		const schema = useBglSchema<T>({
-			schema: getValue(options.schema),
-			columns: getValue(options.columns),
-			data: dataValue,
-		})
+			// Get the data safely
+			const dataValue = options.data.value || []
 
-		// If we have a valid schema with fields, filter out fields without an ID
-		if (Array.isArray(schema) && schema.length > 0) {
-			return schema.filter(field => field && field.id)
-		}
+			// Get the schema from useBglSchema (now async)
+			const schema = await useBglSchema<T>({
+				schema: getValue(options.schema),
+				columns: getValue(options.columns),
+				data: dataValue,
+			})
 
-		// If no schema is provided or it's empty, generate a default schema from the data
-		if (Array.isArray(dataValue) && dataValue.length > 0) {
-			const firstItem = dataValue[0]
-
-			// Create a schema based on the keys of the first item
-			return Object.keys(firstItem || {})
-				.filter(key => key !== 'id' && !key.startsWith('_')) // Exclude id and internal fields
-				.map(key => ({
-					id: key,
-					label: keyToLabel(key),
-					$el: 'div',
-					transform: (val?: any) => {
-						// Handle date fields
-						const dateFields = ['created_at', 'updated_at']
-						if (dateFields.includes(key)) return val ? new Date(val).toLocaleString() : val
-						return val
-					}
-				}))
+			// If we have a valid schema with fields, filter out fields without an ID
+			if (Array.isArray(schema) && schema.length > 0) {
+				resolvedSchema.value = schema.filter(field => field && field.id)
+			} else if (Array.isArray(dataValue) && dataValue.length > 0) {
+				// If no schema is provided or it's empty, generate a default schema from the data
+				const firstItem = dataValue[0]
+
+				// Create a schema based on the keys of the first item
+				resolvedSchema.value = Object.keys(firstItem || {})
+					.filter(key => key !== 'id' && !key.startsWith('_')) // Exclude id and internal fields
+					.map(key => ({
+						id: key,
+						label: keyToLabel(key),
+						$el: 'div',
+						transform: (val?: any) => {
+							// Handle date fields
+							const dateFields = ['created_at', 'updated_at']
+							if (dateFields.includes(key)) return val ? new Date(val).toLocaleString() : val
+							return val
+						}
+					}))
+			} else {
+				// Return an empty array if no data or schema
+				resolvedSchema.value = []
+			}
+
+			schemaState.value = 'loaded'
+		} catch (error) {
+			console.error('Error resolving schema:', error)
+			schemaState.value = 'error'
+			resolvedSchema.value = []
 		}
+	}
 
-		// Return an empty array if no data or schema
-		return []
+	// Watch for changes in schema or columns and resolve schema
+	watch([
+		() => getValue(options.schema),
+		() => getValue(options.columns),
+		() => options.data.value
+	], () => {
+		resolveSchemaAsync()
+	}, { immediate: true })
+
+	// Initialize schema on mount
+	onMounted(() => {
+		resolveSchemaAsync()
 	})
 
+	// Create a computed property for the schema
+	const computedSchema = computed(() => resolvedSchema.value)
+
 	function transform(rowData: T): TransformedData<T> {
 		const transformed = { ...rowData } as TransformedData<T>
 		const schemaFields = computedSchema.value.filter((f: any) => f.id)
@@ -205,6 +234,7 @@ export function useTableData<T extends Record<string, any>>(options: UseTableDat
 		sortField: computed(() => sortField.value),
 		sortDirection: computed(() => sortDirection.value),
 		toggleSort,
-		cleanTransformedData
+		cleanTransformedData,
+		schemaState: computed(() => schemaState.value)
 	}
 }

package/src/components/form/FieldArray.vue

@@ -9,7 +9,6 @@ import type {
 } from '@bagelink/vue'
 import { BagelForm, Btn, Loading } from '@bagelink/vue'
 import { ref, onMounted } from 'vue'
-import { useSchemaField } from '../../composables/useSchemaField'
 
 const props = withDefaults(
 	defineProps<{