@sfxcode/nuxt-ui-mongocamp 1.1.1 → 1.1.2

package/README.md

@@ -292,14 +292,14 @@ pnpm run docs:preview
 [MIT](./LICENSE)
 
 <!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/nuxt-ui-mongocamp/latest.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-version-href]: https://npmjs.com/package/nuxt-ui-mongocamp
+[npm-version-src]: https://img.shields.io/npm/v/@sfxcode/nuxt-ui-mongocamp/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/@sfxcode/nuxt-ui-mongocamp
 
-[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-ui-mongocamp.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-downloads-href]: https://npm.chart.dev/nuxt-ui-mongocamp
+[npm-downloads-src]: https://img.shields.io/npm/dm/@sfxcode/nuxt-ui-mongocamp.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/@sfxcode/nuxt-ui-mongocamp
 
-[license-src]: https://img.shields.io/npm/l/nuxt-ui-mongocamp.svg?style=flat&colorA=020420&colorB=00DC82
-[license-href]: https://npmjs.com/package/nuxt-ui-mongocamp
+[license-src]: https://img.shields.io/npm/l/@sfxcode/nuxt-ui-mongocamp.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/@sfxcode/nuxt-ui-mongocamp
 
 [nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt
 [nuxt-href]: https://nuxt.com

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "1.1.1",
+  "version": "1.1.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/MongocampCollectionData.vue

@@ -3,8 +3,7 @@ import { h, ref, resolveComponent, watch } from "vue";
 import { useMongocampApi } from "#imports";
 import useMongocampCollection from "../composables/useMongocampCollection";
 import { useMongocampBucket } from "../composables/useMongocampBucket";
-import { useMongocampSchema } from "../composables/useMongocampSchema";
-import { columnsToFormKitSchema, documentToFormData, formDataToDocument } from "../composables/useMongocampDynamicForm";
+import { unwrapExtendedJson, wrapExtendedJson } from "../composables/useMongocampExtendedJson";
 import useMongocampDocument from "../composables/useMongocampDocument";
 import { useMongocampQuery } from "../composables/useMongocampQuery";
 const props = defineProps({
@@ -13,7 +12,6 @@ const props = defineProps({
 const { documentApi } = useMongocampApi();
 const { pagination, total } = useMongocampCollection();
 const { isBucketCollection, fileIdForRow, downloadingFileIds, uploading, downloadFile, uploadFile } = useMongocampBucket();
-const { schemaFromSamples } = useMongocampSchema();
 const { ensureMetaData } = useMongocampDocument();
 const { like, or } = useMongocampQuery();
 const fileInputRef = ref(null);
@@ -41,10 +39,14 @@ const editJson = ref("{}");
 const editError = ref("");
 const docToDelete = ref(void 0);
 const deleteError = ref("");
-const editColumns = ref([]);
-const editSchema = ref([]);
+const editSamples = ref([]);
 const editFormData = ref({});
 const originalRow = ref(void 0);
+function omitId(row) {
+  const rest = { ...row };
+  delete rest._id;
+  return rest;
+}
 function getDocId(row) {
   const id = row._id;
   if (typeof id === "string") return id;
@@ -57,9 +59,8 @@ function openInsert() {
   editDocId.value = void 0;
   editError.value = "";
   originalRow.value = void 0;
-  editColumns.value = schemaFromSamples(documents.value);
-  if (editColumns.value.length > 0) {
-    editSchema.value = columnsToFormKitSchema(editColumns.value);
+  editSamples.value = documents.value.map((row) => omitId(unwrapExtendedJson(row)));
+  if (editSamples.value.length > 0) {
     editFormData.value = {};
   } else {
     editJson.value = "{}";
@@ -71,10 +72,9 @@ function openEdit(row) {
   editDocId.value = getDocId(row);
   editError.value = "";
   originalRow.value = row;
-  editColumns.value = schemaFromSamples(documents.value);
-  if (editColumns.value.length > 0) {
-    editSchema.value = columnsToFormKitSchema(editColumns.value);
-    editFormData.value = documentToFormData(row, editColumns.value);
+  editSamples.value = documents.value.map((r) => omitId(unwrapExtendedJson(r)));
+  if (editSamples.value.length > 0) {
+    editFormData.value = omitId(unwrapExtendedJson(row));
   } else {
     editJson.value = JSON.stringify(row, null, 2);
   }
@@ -88,8 +88,8 @@ function confirmDelete(row) {
 async function handleSave() {
   editError.value = "";
   let payload;
-  if (editColumns.value.length > 0) {
-    payload = formDataToDocument(editFormData.value, editColumns.value, editMode.value === "update" ? originalRow.value : void 0);
+  if (editSamples.value.length > 0) {
+    payload = wrapExtendedJson(editFormData.value, editMode.value === "update" ? originalRow.value : void 0);
   } else {
     try {
       payload = JSON.parse(editJson.value);
@@ -439,10 +439,10 @@ watch(() => props.collectionName, init, { immediate: true });
       :ui="{ footer: 'justify-end' }"
     >
       <template #body>
-        <FUDataEdit
-          v-if="editColumns.length > 0"
-          :data="editFormData"
-          :schema="editSchema"
+        <FUAutoForm
+          v-if="editSamples.length > 0"
+          v-model="editFormData"
+          :data="editSamples"
           :submit-label="editMode === 'insert' ? 'Insert' : 'Save'"
           :submit-icon="editMode === 'insert' ? 'i-lucide-plus' : 'i-lucide-save'"
           @data-saved="handleSave"
@@ -461,7 +461,7 @@ watch(() => props.collectionName, init, { immediate: true });
         </p>
       </template>
       <template
-        v-if="editColumns.length === 0"
+        v-if="editSamples.length === 0"
         #footer
       >
         <UButton

package/dist/runtime/composables/useMongocampExtendedJson.d.ts

@@ -0,0 +1,2 @@
+export declare function unwrapExtendedJson(value: unknown): unknown;
+export declare function wrapExtendedJson(formData: Record<string, unknown>, originalDoc?: Record<string, unknown>): Record<string, unknown>;

package/dist/runtime/composables/useMongocampExtendedJson.js

@@ -0,0 +1,62 @@
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+const NUMBER_WRAPPER_KEYS = ["$numberInt", "$numberLong", "$numberDouble", "$numberDecimal"];
+const ISO_DATE_TIME_REGEX = /^\d{4}-\d{2}-\d{2}(?:[T ]\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?(?:Z|[+-]\d{2}:?\d{2})?)?$/;
+function isIsoDateTimeString(value) {
+  return ISO_DATE_TIME_REGEX.test(value) && !Number.isNaN(Date.parse(value));
+}
+function unwrapDateTime(raw) {
+  const inner = raw.$date;
+  if (typeof inner === "string" || typeof inner === "number") return new Date(inner).toISOString();
+  if (isPlainObject(inner) && typeof inner.$numberLong === "string") return new Date(Number(inner.$numberLong)).toISOString();
+  return raw;
+}
+function unwrapNumber(raw) {
+  for (const key of NUMBER_WRAPPER_KEYS) {
+    const wrapped = raw[key];
+    if (typeof wrapped === "string" || typeof wrapped === "number") {
+      const parsed = Number(wrapped);
+      if (!Number.isNaN(parsed)) return parsed;
+    }
+  }
+  return void 0;
+}
+export function unwrapExtendedJson(value) {
+  if (Array.isArray(value)) return value.map(unwrapExtendedJson);
+  if (!isPlainObject(value)) return value;
+  if (typeof value.$oid === "string") return value.$oid;
+  if ("$date" in value) return unwrapDateTime(value);
+  const number = unwrapNumber(value);
+  if (number !== void 0) return number;
+  const result = {};
+  for (const [key, v] of Object.entries(value)) result[key] = unwrapExtendedJson(v);
+  return result;
+}
+function rewrapValue(value, originalValue) {
+  if (typeof value === "string" && isIsoDateTimeString(value)) {
+    return { $date: value };
+  }
+  if (typeof value === "string" && isPlainObject(originalValue) && typeof originalValue.$oid === "string") {
+    return { $oid: value };
+  }
+  if (Array.isArray(value)) {
+    const originalArray = Array.isArray(originalValue) ? originalValue : [];
+    return value.map((item, index) => rewrapValue(item, originalArray[index]));
+  }
+  if (isPlainObject(value)) {
+    const originalObject = isPlainObject(originalValue) ? originalValue : void 0;
+    const nested = {};
+    for (const [key, v] of Object.entries(value)) nested[key] = rewrapValue(v, originalObject?.[key]);
+    return nested;
+  }
+  return value;
+}
+export function wrapExtendedJson(formData, originalDoc) {
+  const result = originalDoc ? { ...originalDoc } : {};
+  for (const [key, value] of Object.entries(formData)) {
+    result[key] = rewrapValue(value, originalDoc?.[key]);
+  }
+  delete result._id;
+  return result;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sfxcode/nuxt-ui-mongocamp",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "A Nuxt module that wraps @sfxcode/nuxt-mongocamp-server with ready-made UI components, composables, and a runtime plugin",
   "repository": "sfxcode/nuxt-ui-mongocamp",
   "homepage": "https://sfxcode.github.io/nuxt-ui-mongocamp/",
@@ -58,8 +58,8 @@
     "@nuxt/kit": "^4.4.8",
     "@nuxt/ui": "4.9.0",
     "@sfxcode/nuxt-mongocamp-server": "^1.4.4",
-    "@sfxcode/nuxt-ui-formkit": "^1.2.1",
-    "unocss-nuxt-ui": "1.2.1"
+    "@sfxcode/nuxt-ui-formkit": "^1.2.6",
+    "unocss-nuxt-ui": "^1.2.2"
   },
   "devDependencies": {
     "@nuxt/devtools": "4.0.0-alpha.7",
@@ -69,13 +69,13 @@
     "@nuxt/test-utils": "^4.0.3",
     "@types/node": "latest",
     "changelogen": "^0.6.2",
-    "eslint": "^10.6.0",
+    "eslint": "^10.7.0",
     "nuxt": "^4.4.8",
     "tailwindcss": "^4.3.2",
     "typescript": "~6.0.3",
     "vitepress": "2.0.0-alpha.18",
     "vitest": "^4.1.10",
-    "vue-tsc": "^3.3.6"
+    "vue-tsc": "^3.3.7"
   },
   "packageManager": "pnpm@11.10.0+sha512.0b7f8b98060031904c017e3a41eb187a16d40eeb829b95c4f8cb03681761fc4ab53dd219115b9b447f4dce1a05a214764461e7d3703392a9f32f9511ce8c86c8"
 }

package/dist/runtime/composables/useMongocampDynamicForm.d.ts

@@ -1,14 +0,0 @@
-import type { ColumnDefinition } from './useMongocampSchema.js';
-export interface FormKitSchemaNode {
-    $formkit?: string;
-    $el?: string;
-    name?: string;
-    label?: string;
-    validation?: string;
-    attrs?: Record<string, unknown>;
-    children?: FormKitSchemaNode[];
-    [key: string]: unknown;
-}
-export declare function columnsToFormKitSchema(columns: ColumnDefinition[]): FormKitSchemaNode[];
-export declare function documentToFormData(doc: Record<string, unknown>, columns: ColumnDefinition[]): Record<string, unknown>;
-export declare function formDataToDocument(formData: Record<string, unknown>, columns: ColumnDefinition[], originalDoc?: Record<string, unknown>): Record<string, unknown>;

package/dist/runtime/composables/useMongocampDynamicForm.js

@@ -1,231 +0,0 @@
-import { parseAbsoluteToLocal } from "@internationalized/date";
-const SCALAR_FORMKIT_TYPES = {
-  "string": "nuxtUIInput",
-  "number": "nuxtUIInputNumber",
-  "boolean": "nuxtUISwitch",
-  "date-time": "nuxtUIInputDate"
-};
-function scalarNode(column, formkitType) {
-  const node = {
-    $formkit: formkitType,
-    name: column.columnKey,
-    label: column.columnName
-  };
-  if (column.required) {
-    node.validation = "required";
-  }
-  return node;
-}
-function groupNode(column) {
-  return {
-    $formkit: "group",
-    name: column.columnKey,
-    label: column.columnName,
-    children: columnsToFormKitSchema(column.children ?? [])
-  };
-}
-function wrapGroup(node) {
-  return {
-    $el: "div",
-    attrs: { class: "pt-4 flex flex-col gap-3" },
-    children: [node]
-  };
-}
-function scalarArrayNode(column) {
-  const node = {
-    $formkit: "nuxtUIInputTags",
-    name: column.columnKey,
-    label: column.columnName
-  };
-  if (column.required) {
-    node.validation = "required";
-  }
-  return node;
-}
-function defaultScalarValue(formkitType) {
-  if (formkitType === "nuxtUIInputNumber") return 0;
-  if (formkitType === "nuxtUISwitch") return false;
-  return "";
-}
-function defaultValueForColumn(column) {
-  if (column.columnType === "object") return defaultObjectValue(column.children ?? []);
-  if (column.columnType === "array") return [];
-  const formkitType = SCALAR_FORMKIT_TYPES[column.columnType];
-  return formkitType ? defaultScalarValue(formkitType) : "";
-}
-function defaultObjectValue(children) {
-  const value = {};
-  children.forEach((child) => {
-    value[child.columnKey] = defaultValueForColumn(child);
-  });
-  return value;
-}
-const REPEATER_BUTTON_PROPS = {
-  alwaysDisplayInsertButton: true,
-  displayAddButton: true,
-  displayCloneButton: true,
-  displayDeleteButton: true
-};
-const REPEATER_LAYOUT_PROPS = {
-  listClass: "flex flex-col gap-3",
-  listItemClass: "flex flex-wrap items-end gap-3 p-3 border border-gray-100 dark:border-gray-800 rounded-lg shadow-sm",
-  buttonGroupClass: "flex items-center gap-1 ml-auto",
-  displayDragHandle: true,
-  draggable: true,
-  hideMoveButtons: true,
-  dragHandleClass: "cursor-grab active:cursor-grabbing text-dimmed"
-};
-function repeaterArrayNode(column, itemFormkitType) {
-  const node = {
-    $formkit: "nuxtUIRepeater",
-    name: column.columnKey,
-    label: column.columnName,
-    newItem: { value: defaultScalarValue(itemFormkitType) },
-    ...REPEATER_BUTTON_PROPS,
-    ...REPEATER_LAYOUT_PROPS,
-    children: [
-      { $formkit: itemFormkitType, name: "value", label: "Value" }
-    ]
-  };
-  if (column.required) {
-    node.validation = "required";
-  }
-  return node;
-}
-function objectArrayNode(column) {
-  const node = {
-    $formkit: "nuxtUIRepeater",
-    name: column.columnKey,
-    label: column.columnName,
-    newItem: defaultObjectValue(column.children ?? []),
-    ...REPEATER_BUTTON_PROPS,
-    ...REPEATER_LAYOUT_PROPS,
-    children: columnsToFormKitSchema(column.children ?? [])
-  };
-  if (column.required) {
-    node.validation = "required";
-  }
-  return node;
-}
-function arrayNode(column) {
-  if (column.arrayItemType === "object") {
-    return objectArrayNode(column);
-  }
-  if (column.arrayItemType === "string" || column.arrayItemType === "unknown") {
-    return scalarArrayNode(column);
-  }
-  const itemFormkitType = column.arrayItemType ? SCALAR_FORMKIT_TYPES[column.arrayItemType] : void 0;
-  if (itemFormkitType) {
-    return repeaterArrayNode(column, itemFormkitType);
-  }
-  return void 0;
-}
-export function columnsToFormKitSchema(columns) {
-  const schema = [];
-  columns.forEach((column) => {
-    if (column.columnType === "object") {
-      schema.push(wrapGroup(groupNode(column)));
-      return;
-    }
-    if (column.columnType === "array") {
-      const node = arrayNode(column);
-      if (node) schema.push(node);
-      return;
-    }
-    const formkitType = SCALAR_FORMKIT_TYPES[column.columnType];
-    if (formkitType) {
-      schema.push(scalarNode(column, formkitType));
-    }
-  });
-  return schema;
-}
-function isPlainObject(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function unwrapOid(raw) {
-  if (isPlainObject(raw) && typeof raw.$oid === "string") return raw.$oid;
-  return raw;
-}
-const NUMBER_WRAPPER_KEYS = ["$numberInt", "$numberLong", "$numberDouble", "$numberDecimal"];
-function unwrapNumber(raw) {
-  if (!isPlainObject(raw)) return raw;
-  for (const key of NUMBER_WRAPPER_KEYS) {
-    const wrapped = raw[key];
-    if (typeof wrapped === "string" || typeof wrapped === "number") {
-      const parsed = Number(wrapped);
-      if (!Number.isNaN(parsed)) return parsed;
-    }
-  }
-  return raw;
-}
-function unwrapDateTime(raw) {
-  if (!isPlainObject(raw) || !("$date" in raw)) return raw;
-  const inner = raw.$date;
-  if (typeof inner === "string" || typeof inner === "number") {
-    return new Date(inner).toISOString();
-  }
-  if (isPlainObject(inner) && typeof inner.$numberLong === "string") {
-    return new Date(Number(inner.$numberLong)).toISOString();
-  }
-  return raw;
-}
-function toZonedDateTime(value) {
-  if (typeof value !== "string") return value;
-  try {
-    return parseAbsoluteToLocal(value);
-  } catch {
-    return value;
-  }
-}
-function isZonedDateTimeLike(value) {
-  return typeof value === "object" && value !== null && typeof value.toAbsoluteString === "function";
-}
-export function documentToFormData(doc, columns) {
-  const formData = {};
-  columns.forEach((column) => {
-    if (!(column.columnKey in doc)) return;
-    const raw = doc[column.columnKey];
-    if (column.columnType === "object") {
-      if (isPlainObject(raw)) {
-        formData[column.columnKey] = documentToFormData(raw, column.children ?? []);
-      }
-      return;
-    }
-    if (column.columnType === "array") {
-      if (!Array.isArray(raw)) return;
-      formData[column.columnKey] = column.arrayItemType === "object" ? raw.map((item) => isPlainObject(item) ? documentToFormData(item, column.children ?? []) : item) : raw;
-      return;
-    }
-    if (column.columnType === "date-time") {
-      formData[column.columnKey] = toZonedDateTime(unwrapDateTime(raw));
-    } else if (column.columnType === "string") {
-      formData[column.columnKey] = unwrapOid(raw);
-    } else if (column.columnType === "number") {
-      formData[column.columnKey] = unwrapNumber(raw);
-    } else {
-      formData[column.columnKey] = raw;
-    }
-  });
-  return formData;
-}
-function wasOriginallyOid(originalValue) {
-  return isPlainObject(originalValue) && typeof originalValue.$oid === "string";
-}
-export function formDataToDocument(formData, columns, originalDoc) {
-  const result = originalDoc ? { ...originalDoc } : {};
-  columns.forEach((column) => {
-    if (!(column.columnKey in formData)) return;
-    const value = formData[column.columnKey];
-    if (column.columnType === "date-time" && isZonedDateTimeLike(value)) {
-      result[column.columnKey] = { $date: value.toAbsoluteString() };
-    } else if (column.columnType === "date-time" && typeof value === "string") {
-      result[column.columnKey] = { $date: value };
-    } else if (column.columnType === "string" && wasOriginallyOid(originalDoc?.[column.columnKey])) {
-      result[column.columnKey] = { $oid: value };
-    } else {
-      result[column.columnKey] = value;
-    }
-  });
-  delete result._id;
-  return result;
-}