@bagelink/vue 1.0.41 → 1.0.47

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);
@@ -15129,13 +15156,16 @@ function findBglFieldById(id, _schema) {
   }
   return void 0;
 }
-function arrField(id, label, schema, options) {
+function arrField(id, label, schemaOrType, options) {
+  const attrs = { delete: true, add: true, ...options };
+  if (typeof schemaOrType === "string") attrs.type = schemaOrType;
+  else attrs.schema = schemaOrType;
   return {
     label,
     id,
     $el: "array",
     vIf: options == null ? void 0 : options.vIf,
-    attrs: { schema, delete: true, add: true, ...options }
+    attrs
   };
 }
 const bagelFormUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -15514,18 +15544,18 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$L = { class: "label mb-05" };
-const _hoisted_2$y = {
+const _hoisted_1$L = {
   key: 0,
-  class: "ps-025 border-start mb-05"
+  class: "label mb-05"
 };
+const _hoisted_2$y = { class: "ps-025 border-start mb-05" };
 const _hoisted_3$t = {
   key: 0,
   class: "flex-center h-300px"
 };
 const _hoisted_4$j = {
   key: 1,
-  class: "flex-center h-300px txt-red"
+  class: "py-1"
 };
 const _hoisted_5$i = {
   key: 0,
@@ -15551,7 +15581,8 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     delete: { type: Boolean, default: true },
     transform: {},
     schema: {},
-    modelValue: {}
+    modelValue: {},
+    type: { default: "object" }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -15561,7 +15592,23 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     const internalData = ref(props2.modelValue || []);
     const schemaState = ref("loaded");
     const resolvedSchemaData = ref([]);
+    watch(() => props2.modelValue, (newValue) => {
+      internalData.value = newValue || [];
+    }, { deep: true });
+    const primitiveSchema = computed(() => {
+      if (props2.type === "text") {
+        return [{ id: "value", type: "text", label: "" }];
+      } else if (props2.type === "number") {
+        return [{ id: "value", type: "number", label: "" }];
+      }
+      return [];
+    });
     async function resolveSchema() {
+      if (props2.type !== "object") {
+        resolvedSchemaData.value = primitiveSchema.value;
+        schemaState.value = "loaded";
+        return;
+      }
       if (!props2.schema) {
         resolvedSchemaData.value = [];
         schemaState.value = "loaded";
@@ -15585,9 +15632,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
         resolvedSchemaData.value = [];
       }
     }
-    onMounted(() => {
-      resolveSchema();
-    });
+    onMounted(resolveSchema);
     function emitValue() {
       emit2("update:modelValue", internalData.value);
     }
@@ -15596,25 +15641,46 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
       emitValue();
     }
     function addItem() {
-      internalData.value.push({});
+      const defaultValues = {
+        text: "",
+        number: 0,
+        object: {}
+      };
+      internalData.value.push(defaultValues[props2.type]);
       emitValue();
     }
     function toggleMinimized(index2) {
       minimizedItems.value[index2] = !minimizedItems.value[index2];
     }
     function updateItem(index2, value) {
-      internalData.value[index2] = value;
+      if (props2.type === "text" || props2.type === "number") {
+        internalData.value[index2] = props2.type === "number" ? Number(value.value) : value.value;
+      } else {
+        internalData.value[index2] = value;
+      }
       emitValue();
     }
+    const isPrimitiveType = computed(() => props2.type === "text" || props2.type === "number");
+    const canRenderItems = computed(
+      () => isPrimitiveType.value || props2.type === "object" && resolvedSchemaData.value.length > 0
+    );
+    const showMinimizeButton = computed(() => resolvedSchemaData.value.length > 4);
     return (_ctx, _cache) => {
+      const _component_Icon = resolveComponent("Icon");
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(props2.class)
       }, [
-        createElementVNode("p", _hoisted_1$L, toDisplayString(_ctx.label), 1),
-        resolvedSchemaData.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$y, [
-          schemaState.value === "loading" ? (openBlock(), createElementBlock("div", _hoisted_3$t, [
-            createVNode(unref(Loading))
-          ])) : schemaState.value === "error" ? (openBlock(), createElementBlock("div", _hoisted_4$j, " Error ")) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        _ctx.label ? (openBlock(), createElementBlock("p", _hoisted_1$L, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2$y, [
+          schemaState.value !== "loaded" ? (openBlock(), createElementBlock("div", _hoisted_3$t, [
+            schemaState.value === "loading" ? (openBlock(), createBlock(unref(Loading), { key: 0 })) : schemaState.value === "error" ? (openBlock(), createBlock(_component_Icon, {
+              key: 1,
+              icon: "error",
+              color: "red"
+            })) : createCommentVNode("", true)
+          ])) : !canRenderItems.value ? (openBlock(), createElementBlock("div", _hoisted_4$j, _cache[0] || (_cache[0] = [
+            createElementVNode("p", { class: "opacity-7" }, " No schema available ", -1)
+          ]))) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(internalData.value, (item, i2) => {
               return openBlock(), createElementBlock("div", {
                 key: i2,
@@ -15624,12 +15690,12 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
               }, [
                 minimizedItems.value[i2] ? (openBlock(), createElementBlock("p", _hoisted_5$i, toDisplayString(_ctx.label) + " " + toDisplayString(i2 + 1), 1)) : (openBlock(), createBlock(unref(_sfc_main$T), {
                   key: 1,
-                  "model-value": item,
+                  "model-value": isPrimitiveType.value ? { value: item } : item,
                   schema: resolvedSchemaData.value,
                   "onUpdate:modelValue": (val) => updateItem(i2, val)
                 }, null, 8, ["model-value", "schema", "onUpdate:modelValue"])),
                 createElementVNode("div", _hoisted_6$f, [
-                  resolvedSchemaData.value.length > 4 ? (openBlock(), createBlock(unref(Btn), {
+                  showMinimizeButton.value ? (openBlock(), createBlock(unref(Btn), {
                     key: 0,
                     class: "block rotate-180 txt10 opacity-7 p-025",
                     flat: "",
@@ -15662,11 +15728,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
               _: 1
             })) : createCommentVNode("", true)
           ], 64))
-        ])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(internalData.value, (_2, i2) => {
-          return openBlock(), createElementBlock("div", { key: i2 }, _cache[0] || (_cache[0] = [
-            createElementVNode("p", null, "No schema available", -1)
-          ]));
-        }), 128))
+        ])
       ], 2);
     };
   }