@jskit-ai/crud-ui-generator 0.1.49 → 0.1.50

package/package.descriptor.mjs

@@ -1,7 +1,9 @@
+import { GENERATED_UI_NAVIGATION_ROLE_OPTION } from "@jskit-ai/kernel/shared/support/generatedUiContract";
+
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/crud-ui-generator",
-  version: "0.1.49",
+  version: "0.1.50",
   kind: "generator",
   description: "Generate CRUD route trees from resource validators at an explicit route root relative to src/pages/.",
   options: {
@@ -66,6 +68,7 @@ export default Object.freeze({
       promptLabel: "Link placement",
       promptHint: "Optional semantic target override for the generated list-page link placement (format: area.slot)."
     },
+    "navigation-role": GENERATED_UI_NAVIGATION_ROLE_OPTION,
     namespace: {
       required: false,
       inputType: "text",
@@ -110,6 +113,7 @@ export default Object.freeze({
           "display-fields",
           "id-param",
           "parent-title",
+          "navigation-role",
           "link-placement",
           "namespace",
           "force"
@@ -171,7 +175,7 @@ export default Object.freeze({
   mutations: {
     dependencies: {
       runtime: {
-        "@jskit-ai/users-web": "0.1.81"
+        "@jskit-ai/users-web": "0.1.82"
       },
       dev: {}
     },
@@ -195,6 +199,28 @@ export default Object.freeze({
           in: ["list"]
         }
       },
+      {
+        from: "templates/src/pages/admin/ui-generator/listFilters.js",
+        to: "src/pages/${option:target-root|trim}/listFilters.js",
+        reason: "Install generated client-side list filter definitions.",
+        category: "crud-ui-generator",
+        id: "crud-ui-page-list-filters-${option:target-root|snake}",
+        when: {
+          option: "operations",
+          in: ["list"]
+        }
+      },
+      {
+        from: "templates/src/pages/admin/ui-generator/listBulkActions.js",
+        to: "src/pages/${option:target-root|trim}/listBulkActions.js",
+        reason: "Install generated client-side list bulk action definitions.",
+        category: "crud-ui-generator",
+        id: "crud-ui-page-list-bulk-actions-${option:target-root|snake}",
+        when: {
+          option: "operations",
+          in: ["list"]
+        }
+      },
       {
         from: "templates/src/pages/admin/ui-generator/ViewElement.vue",
         to: "src/pages/${option:target-root|trim}/[${option:id-param|trim}]/index.vue",
@@ -355,8 +381,7 @@ export default Object.freeze({
         file: "src/placement.js",
         position: "bottom",
         skipIfContains: "__JSKIT_UI_MENU_MARKER__",
-        value:
-          "\n// __JSKIT_UI_MENU_MARKER__\n{\n  addPlacement({\n    id: \"__JSKIT_UI_MENU_PLACEMENT_ID__\",\n    target: \"__JSKIT_UI_MENU_PLACEMENT_TARGET__\",\n__JSKIT_UI_MENU_OWNER_LINE__    kind: \"link\",\n    surfaces: [\"__JSKIT_UI_SURFACE_ID__\"],\n    order: 155,\n    props: {\n      label: \"__JSKIT_UI_MENU_LABEL__\",\n      icon: \"__JSKIT_UI_MENU_ICON__\",\n      surface: \"__JSKIT_UI_SURFACE_ID__\",\n      scopedSuffix: \"__JSKIT_UI_MENU_WORKSPACE_SUFFIX__\",\n      unscopedSuffix: \"__JSKIT_UI_MENU_NON_WORKSPACE_SUFFIX__\",\n__JSKIT_UI_MENU_TO_PROP_LINE__    },\n__JSKIT_UI_MENU_WHEN_LINE__  });\n}\n",
+        value: "__JSKIT_UI_MENU_APPEND_BLOCK__",
         reason: "Append generated CRUD list-page placement.",
         category: "crud-ui-generator",
         id: "crud-ui-placement-menu",

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@jskit-ai/crud-ui-generator",
-  "version": "0.1.49",
+  "version": "0.1.50",
   "type": "module",
   "scripts": {
     "test": "node --test"
   },
   "dependencies": {
-    "@jskit-ai/crud-core": "0.1.74",
-    "@jskit-ai/kernel": "0.1.66",
-    "@jskit-ai/resource-crud-core": "0.1.11"
+    "@jskit-ai/crud-core": "0.1.75",
+    "@jskit-ai/kernel": "0.1.67",
+    "@jskit-ai/resource-crud-core": "0.1.12"
   },
   "exports": {
     "./server/buildTemplateContext": "./src/server/buildTemplateContext.js"

package/src/server/buildTemplateContext.js

@@ -7,6 +7,10 @@ import {
   resolvePageTargetDetails
 } from "@jskit-ai/kernel/server/support";
 import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
+import {
+  resolveGeneratedUiNavigationRoleLinkPlacement,
+  shouldCreateGeneratedUiNavigationLink
+} from "@jskit-ai/kernel/shared/support/generatedUiContract";
 import {
   loadResourceDefinition,
   requireOperation,
@@ -22,6 +26,7 @@ import {
   resolveNearestParentRouteParamKey,
   buildListHeaderColumns,
   buildListRowColumns,
+  buildListCardFields,
   buildViewColumns,
   buildFormColumns,
   resolveRecordIdFieldKey,
@@ -157,6 +162,18 @@ function toTitleFromKebab(value = "", fallback = "") {
   return wordsToTitle(words);
 }
 
+function buildCrudListCopy(resourceLabels = {}) {
+  const pluralTitle = normalizeText(resourceLabels.pluralTitle) || "Records";
+  const singularTitle = normalizeText(resourceLabels.singularTitle) || "Record";
+  return Object.freeze({
+    loadErrorTitle: `Unable to load ${pluralTitle}`,
+    loadErrorBody: "Check the connection and try again.",
+    emptyTitle: `No ${pluralTitle} yet`,
+    emptyBody: `Create the first ${singularTitle} to start using this workflow.`,
+    createLabel: `New ${singularTitle}`
+  });
+}
+
 function normalizeRelativeAppPath(value = "") {
   return String(value || "")
     .replaceAll("\\", "/")
@@ -242,6 +259,20 @@ function parseParentTitleOption(options) {
   return parentTitleMode;
 }
 
+function shouldCreateNavigationLink(options = {}, inferenceContext = {}) {
+  return shouldCreateGeneratedUiNavigationLink(options, {
+    dynamicRoutePolicy: "any",
+    routePath: inferenceContext?.routePath
+  });
+}
+
+function resolveNavigationRoleLinkPlacement(options = {}, inferenceContext = {}) {
+  return resolveGeneratedUiNavigationRoleLinkPlacement(options, {
+    dynamicRoutePolicy: "any",
+    routePath: inferenceContext?.routePath
+  });
+}
+
 function validateDisplayFieldsForOperation(selectedFieldKeys, fields, operationName) {
   const selectedFields = Array.isArray(selectedFieldKeys) ? selectedFieldKeys : [];
   if (selectedFields.length < 1) {
@@ -303,6 +334,58 @@ function hasLookupFormFields(fields = []) {
   return (Array.isArray(fields) ? fields : []).some((field) => normalizeText(field?.component).toLowerCase() === "lookup");
 }
 
+function hasLookupDisplayFields(fields = []) {
+  return (Array.isArray(fields) ? fields : []).some((field) => normalizeText(field?.relation?.kind).toLowerCase() === "lookup");
+}
+
+function buildListCardSlotProps(fields = []) {
+  const normalizedFields = Array.isArray(fields) ? fields : [];
+  if (normalizedFields.length < 1) {
+    return "{}";
+  }
+
+  const props = ["record"];
+  if (hasLookupDisplayFields(normalizedFields)) {
+    props.push("records");
+  }
+  props.push("formatListCardValue");
+  return `{ ${props.join(", ")} }`;
+}
+
+function buildListRowSlotProps(fields = []) {
+  const normalizedFields = Array.isArray(fields) ? fields : [];
+  if (normalizedFields.length < 1) {
+    return "{}";
+  }
+
+  const props = ["record"];
+  if (hasLookupDisplayFields(normalizedFields)) {
+    props.push("records");
+  }
+  return `{ ${props.join(", ")} }`;
+}
+
+function buildCrudFieldsSlotProps(fields = [], { includeMode = false } = {}) {
+  const props = [];
+  if (includeMode) {
+    props.push("mode");
+  }
+
+  props.push("formState", "addEdit", "resolveFieldErrors");
+  if (hasLookupFormFields(fields)) {
+    props.push(
+      "resolveLookupItems: fieldLookupItems",
+      "resolveLookupLoading: fieldLookupLoading",
+      "resolveLookupSearch: fieldLookupSearch",
+      "setLookupSearch: setFieldLookupSearch"
+    );
+  }
+
+  return `{
+        ${props.join(",\n        ")}
+      }`;
+}
+
 function buildLookupImportLine(fields = []) {
   return hasLookupFormFields(fields)
     ? 'import { createCrudLookupFieldRuntime } from "@jskit-ai/users-web/client/composables/crudLookupFieldRuntime";'
@@ -339,16 +422,17 @@ const {
 `;
 }
 
-function buildLookupFormProps(fields = []) {
+function buildLookupFormProps(fields = [], { sourcePrefix = "" } = {}) {
   if (!hasLookupFormFields(fields)) {
     return "";
   }
 
+  const prefix = String(sourcePrefix || "");
   return `
-    :resolve-lookup-items="resolveLookupItems"
-    :resolve-lookup-loading="resolveLookupLoading"
-    :resolve-lookup-search="resolveLookupSearch"
-    :set-lookup-search="setLookupSearch"`;
+    :resolve-lookup-items="${prefix}resolveLookupItems"
+    :resolve-lookup-loading="${prefix}resolveLookupLoading"
+    :resolve-lookup-search="${prefix}resolveLookupSearch"
+    :set-lookup-search="${prefix}setLookupSearch"`;
 }
 
 function buildLookupFormPropDefinitions({ createFields = [], editFields = [] } = {}) {
@@ -468,6 +552,16 @@ function resolveTargetRootRelativeRoutePath(pageTarget = {}) {
   return visibleRouteSegments.length > 0 ? `/${visibleRouteSegments.join("/")}` : "/";
 }
 
+function resolveNavigationInferenceRoutePath(pageTarget = {}) {
+  const visibleRouteSegments = Array.isArray(pageTarget?.visibleRouteSegments)
+    ? pageTarget.visibleRouteSegments.map((entry) => normalizeText(entry)).filter(Boolean)
+    : [];
+  if (visibleRouteSegments.length > 0) {
+    return `/${visibleRouteSegments.join("/")}`;
+  }
+  return String(pageTarget?.routeUrlSuffix || "");
+}
+
 function resolveMenuToPropLine(linkTo = "") {
   if (!linkTo) {
     return "";
@@ -483,6 +577,44 @@ function resolveMenuOwnerLine(owner = "") {
   return `    owner: ${JSON.stringify(normalizedOwner)},\n`;
 }
 
+function buildMenuAppendBlock({
+  hasListOperation = false,
+  menuMarker = "",
+  pageLinkTarget = null,
+  pageTarget = {}
+} = {}) {
+  const placementId = String(pageLinkTarget?.pageTarget?.placementId || "");
+  const placementTarget = String(pageLinkTarget?.placementTarget?.id || "");
+  if (!hasListOperation || !placementId || !placementTarget) {
+    return "";
+  }
+
+  const surfaceId = String(pageTarget?.surfaceId || "");
+  const routeUrlSuffix = String(pageLinkTarget?.pageTarget?.routeUrlSuffix || "");
+  const menuToPropLine = resolveMenuToPropLine(pageLinkTarget?.linkTo || "");
+  const whenLine = String(pageLinkTarget?.whenLine || "");
+
+  return `
+// ${menuMarker}
+{
+  addPlacement({
+    id: ${JSON.stringify(placementId)},
+    target: ${JSON.stringify(placementTarget)},
+${resolveMenuOwnerLine(pageLinkTarget?.placementTarget?.owner || "")}    kind: "link",
+    surfaces: [${JSON.stringify(surfaceId)}],
+    order: 155,
+    props: {
+      label: ${JSON.stringify(pageTarget?.defaultName || "")},
+      icon: ${JSON.stringify(DEFAULT_GENERATED_LINK_ICON)},
+      surface: ${JSON.stringify(surfaceId)},
+      scopedSuffix: ${JSON.stringify(routeUrlSuffix)},
+      unscopedSuffix: ${JSON.stringify(routeUrlSuffix)},
+${menuToPropLine}    },
+${whenLine}  });
+}
+`;
+}
+
 function resolveCrudRelativePath(namespace = "") {
   return `/${requireCrudNamespace(namespace, {
     context: "crud-ui-generator resource namespace"
@@ -509,7 +641,7 @@ function buildListHeadingTitleSetup({
   }
 
   return `const parentTitle = useCrudListParentTitle({
-  listRuntime: records,
+  listRuntime,
   resource: uiResource,
   adapter: UI_OPERATION_ADAPTER || undefined,
   recordIdParam: UI_RECORD_ID_PARAM,
@@ -651,13 +783,20 @@ async function buildUiTemplateContext({ appRoot, options } = {}) {
   const viewTitleFallbackFieldKey = hasViewOperation
     ? resolveViewTitleFallbackFieldKey(viewFieldsAll, { recordIdFieldKey })
     : "";
+  const listTitleFallbackFieldKey = hasListOperation
+    ? resolveViewTitleFallbackFieldKey(listFieldsAll, { recordIdFieldKey: listRecordIdFieldKey })
+    : "";
 
-  const pageLinkTarget = hasListOperation
+  const pageLinkTarget = hasListOperation && shouldCreateNavigationLink(options, {
+    routePath: resolveNavigationInferenceRoutePath(pageTarget)
+  })
     ? await resolvePageLinkTargetDetails({
       appRoot,
       pageTarget,
       targetFile: listTargetFile,
-      placement: options?.["link-placement"],
+      placement: resolveNavigationRoleLinkPlacement(options, {
+        routePath: resolveNavigationInferenceRoutePath(pageTarget)
+      }),
       context: "crud-ui-generator"
     })
     : null;
@@ -666,6 +805,8 @@ async function buildUiTemplateContext({ appRoot, options } = {}) {
     : "";
   const createFormColumns = buildFormColumns(createFields);
   const editFormColumns = buildFormColumns(editFields);
+  const sharedFormFields = Object.freeze([...createFields, ...editFields]);
+  const listCopy = buildCrudListCopy(resourceLabels);
 
   return {
     __JSKIT_UI_RESOURCE_IMPORT_PATH__: `/${normalizeRelativeAppPath(options?.["resource-file"])}`,
@@ -674,6 +815,11 @@ async function buildUiTemplateContext({ appRoot, options } = {}) {
     __JSKIT_UI_RESOURCE_NAMESPACE__: resourceNamespace,
     __JSKIT_UI_RESOURCE_SINGULAR_TITLE__: resourceLabels.singularTitle,
     __JSKIT_UI_RESOURCE_PLURAL_TITLE__: resourceLabels.pluralTitle,
+    __JSKIT_UI_LIST_LOAD_ERROR_TITLE__: listCopy.loadErrorTitle,
+    __JSKIT_UI_LIST_LOAD_ERROR_BODY__: listCopy.loadErrorBody,
+    __JSKIT_UI_LIST_EMPTY_TITLE__: listCopy.emptyTitle,
+    __JSKIT_UI_LIST_EMPTY_BODY__: listCopy.emptyBody,
+    __JSKIT_UI_LIST_CREATE_LABEL__: listCopy.createLabel,
     __JSKIT_UI_ROUTE_TITLE__: pageTarget.defaultName,
     __JSKIT_UI_PARENT_TITLE_MODE__: parentTitleMode,
     __JSKIT_UI_LIST_PARENT_TITLE_IMPORT_LINE__: buildListParentTitleImportLine(parentTitleMode),
@@ -687,6 +833,10 @@ async function buildUiTemplateContext({ appRoot, options } = {}) {
     __JSKIT_UI_SURFACE_ID__: pageTarget.surfaceId,
     __JSKIT_UI_LIST_HEADER_COLUMNS__: buildListHeaderColumns(listFields),
     __JSKIT_UI_LIST_ROW_COLUMNS__: buildListRowColumns(listFields),
+    __JSKIT_UI_LIST_CARD_FIELDS__: buildListCardFields(listFields),
+    __JSKIT_UI_LIST_CARD_SLOT_PROPS__: buildListCardSlotProps(listFields),
+    __JSKIT_UI_LIST_ROW_SLOT_PROPS__: buildListRowSlotProps(listFields),
+    __JSKIT_UI_LIST_TITLE_FALLBACK_FIELD_KEY__: JSON.stringify(listTitleFallbackFieldKey),
     __JSKIT_UI_LIST_REALTIME_EVENTS__: JSON.stringify(listRealtimeEvents),
     __JSKIT_UI_LIST_RECORD_ID_EXPR__: resolveRecordIdExpression(recordIdFields),
     __JSKIT_UI_VIEW_COLUMNS__: buildViewColumns(viewFields),
@@ -709,6 +859,9 @@ async function buildUiTemplateContext({ appRoot, options } = {}) {
     __JSKIT_UI_EDIT_FORM_COLUMNS__: editFormColumns,
     __JSKIT_UI_CREATE_FORM_COLUMNS_DIRECT__: rewriteGeneratedBlockIndent(createFormColumns, { trimPrefix: "  " }),
     __JSKIT_UI_EDIT_FORM_COLUMNS_DIRECT__: rewriteGeneratedBlockIndent(editFormColumns, { trimPrefix: "  " }),
+    __JSKIT_UI_CREATE_FORM_SLOT_PROPS__: buildCrudFieldsSlotProps(createFields),
+    __JSKIT_UI_EDIT_FORM_SLOT_PROPS__: buildCrudFieldsSlotProps(editFields),
+    __JSKIT_UI_SHARED_FORM_SLOT_PROPS__: buildCrudFieldsSlotProps(sharedFormFields, { includeMode: true }),
     __JSKIT_UI_CREATE_FORM_FIELDS__: JSON.stringify(createFields),
     __JSKIT_UI_EDIT_FORM_FIELDS__: JSON.stringify(editFields),
     __JSKIT_UI_CREATE_FORM_FIELD_PUSH_LINES__: renderObjectPushLines("UI_CREATE_FORM_FIELDS", createFields),
@@ -727,6 +880,7 @@ async function buildUiTemplateContext({ appRoot, options } = {}) {
     }),
     __JSKIT_UI_CREATE_LOOKUP_FORM_PROPS__: buildLookupFormProps(createFields),
     __JSKIT_UI_EDIT_LOOKUP_FORM_PROPS__: buildLookupFormProps(editFields),
+    __JSKIT_UI_SHARED_LOOKUP_FORM_PROPS__: buildLookupFormProps(sharedFormFields, { sourcePrefix: "props." }),
     __JSKIT_UI_FORM_LOOKUP_PROP_DEFS__: buildLookupFormPropDefinitions({
       createFields,
       editFields
@@ -740,7 +894,13 @@ async function buildUiTemplateContext({ appRoot, options } = {}) {
     __JSKIT_UI_MENU_NON_WORKSPACE_SUFFIX__: String(pageLinkTarget?.pageTarget?.routeUrlSuffix || ""),
     __JSKIT_UI_MENU_WHEN_LINE__: String(pageLinkTarget?.whenLine || ""),
     __JSKIT_UI_MENU_TO_PROP_LINE__: resolveMenuToPropLine(pageLinkTarget?.linkTo || ""),
-    __JSKIT_UI_MENU_LABEL__: pageTarget.defaultName
+    __JSKIT_UI_MENU_LABEL__: pageTarget.defaultName,
+    __JSKIT_UI_MENU_APPEND_BLOCK__: buildMenuAppendBlock({
+      hasListOperation,
+      menuMarker,
+      pageLinkTarget,
+      pageTarget
+    })
   };
 }
 

package/src/server/resourceSupport.js

@@ -835,7 +835,7 @@ function renderTemplateJsStringLiteral(value) {
 
 function buildListHeaderColumns(fields = []) {
   return (Array.isArray(fields) ? fields : [])
-    .map((field) => `                <th>${escapeHtml(field.label)}</th>`)
+    .map((field) => `      <th>${escapeHtml(field.label)}</th>`)
     .join("\n");
 }
 
@@ -888,10 +888,25 @@ function buildListRowColumns(fields = []) {
   return (Array.isArray(fields) ? fields : [])
     .map((field) => {
       if (isLookupField(field)) {
-        return `                <td>{{ records.resolveFieldDisplay(record, ${toLookupDisplayFieldExpression(field)}) }}</td>`;
+        return `      <td>{{ records.resolveFieldDisplay(record, ${toLookupDisplayFieldExpression(field)}) }}</td>`;
       }
 
-      return `                <td>{{ ${toAccessorExpression("record", field.key)} }}</td>`;
+      return `      <td>{{ ${toAccessorExpression("record", field.key)} }}</td>`;
+    })
+    .join("\n");
+}
+
+function buildListCardFields(fields = []) {
+  return (Array.isArray(fields) ? fields : [])
+    .map((field) => {
+      const valueExpression = isLookupField(field)
+        ? `records.resolveFieldDisplay(record, ${toLookupDisplayFieldExpression(field)})`
+        : toAccessorExpression("record", field.key);
+
+      return `      <div class="ui-generator-list-card__field">
+        <span class="ui-generator-list-card__field-label">${escapeHtml(field.label)}</span>
+        <span class="ui-generator-list-card__field-value">{{ formatListCardValue(${valueExpression}) }}</span>
+      </div>`;
     })
     .join("\n");
 }
@@ -903,10 +918,10 @@ function buildViewColumns(fields = []) {
         ? `view.resolveFieldDisplay(view.record, ${toLookupDisplayFieldExpression(field)})`
         : toOptionalAccessorExpression("view.record", field.key);
 
-      return `            <v-col cols="12" md="6">
-              <div class="text-caption text-medium-emphasis">${escapeHtml(field.label)}</div>
-              <div class="text-body-1">{{ ${valueExpression} }}</div>
-            </v-col>`;
+      return `      <v-col cols="12" md="6">
+        <div class="text-caption text-medium-emphasis">${escapeHtml(field.label)}</div>
+        <div class="text-body-1">{{ ${valueExpression} }}</div>
+      </v-col>`;
     })
     .join("\n");
 }
@@ -929,34 +944,34 @@ function buildFormColumns(fields = []) {
       const fieldErrorExpression = `resolveFieldErrors(${fieldKeyLiteral})`;
       const component = normalizeText(field?.component).toLowerCase();
       if (component === "switch") {
-        return `              <v-col cols="12" md="6">
-                <v-switch
-                  v-model="${formAccessor}"
-                  label="${label}"
-                  color="primary"
-                  hide-details="auto"
-                  :disabled="addEdit.isFieldLocked"
-                  :error-messages="${fieldErrorExpression}"
-                />
-              </v-col>`;
+        return `        <v-col cols="12" md="6">
+          <v-switch
+            v-model="${formAccessor}"
+            label="${label}"
+            color="primary"
+            hide-details="auto"
+            :disabled="addEdit.isFieldLocked"
+            :error-messages="${fieldErrorExpression}"
+          />
+        </v-col>`;
       }
 
       if (component === "select") {
         const selectOptions = Array.isArray(field?.options) ? field.options : [];
-        return `              <v-col cols="12" md="6">
-                <v-select
-                  v-model="${formAccessor}"
-                  label="${label}"
-                  variant="outlined"
-                  density="comfortable"
-                  :items="${serializeTemplateBindingValue(selectOptions)}"
-                  item-title="label"
-                  item-value="value"
-                  :disabled="addEdit.isFieldLocked"
-                  :clearable="${field.nullable === true ? "true" : "false"}"
-                  :error-messages="${fieldErrorExpression}"
-                />
-              </v-col>`;
+        return `        <v-col cols="12" md="6">
+          <v-select
+            v-model="${formAccessor}"
+            label="${label}"
+            variant="outlined"
+            density="comfortable"
+            :items="${serializeTemplateBindingValue(selectOptions)}"
+            item-title="label"
+            item-value="value"
+            :disabled="addEdit.isFieldLocked"
+            :clearable="${field.nullable === true ? "true" : "false"}"
+            :error-messages="${fieldErrorExpression}"
+          />
+        </v-col>`;
       }
 
       if (component === "lookup") {
@@ -964,53 +979,53 @@ function buildFormColumns(fields = []) {
         const useAutocomplete = lookupFormControl !== "select";
         const lookupComponentTag = useAutocomplete ? "v-autocomplete" : "v-select";
         const lookupAttributeLines = [
-          `                  :items="resolveLookupItems(${fieldKeyLiteral}, { selectedValue: ${formAccessor}, selectedRecord: addEdit.resource.data })"`
+          `            :items="fieldLookupItems(${fieldKeyLiteral}, { selectedValue: ${formAccessor}, selectedRecord: addEdit.resource.data })"`
         ];
         if (useAutocomplete) {
           lookupAttributeLines.push(
-            `                  :search="resolveLookupSearch(${fieldKeyLiteral})"`,
-            `                  @update:search="setLookupSearch(${fieldKeyLiteral}, $event)"`
+            `            :search="fieldLookupSearch(${fieldKeyLiteral})"`,
+            `            @update:search="setFieldLookupSearch(${fieldKeyLiteral}, $event)"`
           );
         }
         lookupAttributeLines.push(
-          `                  item-title="label"`,
-          `                  item-value="value"`
+          `            item-title="label"`,
+          `            item-value="value"`
         );
         if (useAutocomplete) {
-          lookupAttributeLines.push("                  no-filter");
+          lookupAttributeLines.push("            no-filter");
         }
-        return `              <v-col cols="12" md="6">
-                <${lookupComponentTag}
-                  v-model="${formAccessor}"
-                  label="${label}"
-                  variant="outlined"
-                  density="comfortable"
-                  autocomplete="off"
+        return `        <v-col cols="12" md="6">
+          <${lookupComponentTag}
+            v-model="${formAccessor}"
+            label="${label}"
+            variant="outlined"
+            density="comfortable"
+            autocomplete="off"
 ${lookupAttributeLines.join("\n")}
-                  :loading="resolveLookupLoading(${fieldKeyLiteral})"
-                  :disabled="addEdit.isFieldLocked"
-                  :clearable="${field.nullable === true ? "true" : "false"}"
-                  :error-messages="${fieldErrorExpression}"
-                />
-              </v-col>`;
+            :loading="fieldLookupLoading(${fieldKeyLiteral})"
+            :disabled="addEdit.isFieldLocked"
+            :clearable="${field.nullable === true ? "true" : "false"}"
+            :error-messages="${fieldErrorExpression}"
+          />
+        </v-col>`;
       }
 
       const inputType = normalizeText(field?.inputType) || "text";
       const maxLength = Number.isInteger(field?.maxLength) && field.maxLength > 0
         ? String(field.maxLength)
         : "undefined";
-      return `              <v-col cols="12" md="6">
-                <v-text-field
-                  v-model="${formAccessor}"
-                  label="${label}"
-                  type="${escapeHtml(inputType)}"
-                  variant="outlined"
-                  density="comfortable"
-                  :maxlength="${maxLength}"
-                  :readonly="addEdit.isFieldLocked"
-                  :error-messages="${fieldErrorExpression}"
-                />
-              </v-col>`;
+      return `        <v-col cols="12" md="6">
+          <v-text-field
+            v-model="${formAccessor}"
+            label="${label}"
+            type="${escapeHtml(inputType)}"
+            variant="outlined"
+            density="comfortable"
+            :maxlength="${maxLength}"
+            :readonly="addEdit.isFieldLocked"
+            :error-messages="${fieldErrorExpression}"
+          />
+        </v-col>`;
     })
     .filter(Boolean)
     .join("\n");
@@ -1069,6 +1084,7 @@ export {
   resolveNearestParentRouteParamKey,
   buildListHeaderColumns,
   buildListRowColumns,
+  buildListCardFields,
   buildViewColumns,
   buildFormColumns,
   resolveRecordIdFieldKey,