@jskit-ai/crud-ui-generator 0.1.5 → 0.1.7

package/package.descriptor.mjs

@@ -1,7 +1,7 @@
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/crud-ui-generator",
-  version: "0.1.5",
+  version: "0.1.7",
   kind: "generator",
   description: "Generate app-local CRUD UI scaffolds from resource validators.",
   options: {
@@ -81,6 +81,22 @@ export default Object.freeze({
       defaultValue: "",
       promptLabel: "Menu placement",
       promptHint: "Optional host:position target (defaults to ShellLayout default outlet)."
+    },
+    "placement-component-token": {
+      required: false,
+      inputType: "text",
+      defaultValue: "",
+      promptLabel: "Placement component token",
+      promptHint:
+        "Optional component token override for generated menu placement. Use local.main.ui.tab-link-item for routed tab links (auto-provisions src/components/TabLinkItem.vue + MainClientProvider registration)."
+    },
+    "placement-to": {
+      required: false,
+      inputType: "text",
+      defaultValue: "",
+      promptLabel: "Placement to",
+      promptHint:
+        "Optional explicit props.to value for generated menu placement (example: ./pets). Required when adding placement for dynamic directory-prefix/route-path values."
     }
   },
   dependsOn: [],
@@ -120,7 +136,7 @@ export default Object.freeze({
   mutations: {
     dependencies: {
       runtime: {
-        "@jskit-ai/users-web": "0.1.36"
+        "@jskit-ai/users-web": "0.1.38"
       },
       dev: {}
     },
@@ -163,7 +179,7 @@ export default Object.freeze({
         }
       },
       {
-        from: "templates/src/pages/admin/ui-generator/NewElement.vue",
+        from: "templates/src/pages/admin/ui-generator/NewWrapperElement.vue",
         toSurface: "${option:surface|lower}",
         toSurfacePath: "${option:directory-prefix|pathprefix}${option:container|pathprefix}${option:route-path|path}/new.vue",
         reason: "Install generated new page.",
@@ -174,12 +190,20 @@ export default Object.freeze({
           export: "buildUiTemplateContext"
         },
         when: {
-          option: "operations",
-          in: ["new"]
+          all: [
+            {
+              option: "operations",
+              in: ["new"]
+            },
+            {
+              option: "operations",
+              in: ["edit"]
+            }
+          ]
         }
       },
       {
-        from: "templates/src/pages/admin/ui-generator/EditElement.vue",
+        from: "templates/src/pages/admin/ui-generator/EditWrapperElement.vue",
         toSurface: "${option:surface|lower}",
         toSurfacePath:
           "${option:directory-prefix|pathprefix}${option:container|pathprefix}${option:route-path|path}/[${option:id-param|trim}]/edit.vue",
@@ -191,8 +215,115 @@ export default Object.freeze({
           export: "buildUiTemplateContext"
         },
         when: {
-          option: "operations",
-          in: ["edit"]
+          all: [
+            {
+              option: "operations",
+              in: ["new"]
+            },
+            {
+              option: "operations",
+              in: ["edit"]
+            }
+          ]
+        }
+      },
+      {
+        from: "templates/src/pages/admin/ui-generator/AddEditForm.vue",
+        toSurface: "${option:surface|lower}",
+        toSurfacePath:
+          "${option:directory-prefix|pathprefix}${option:container|pathprefix}${option:route-path|path}/_components/${option:namespace|singular|pascal|default(Record)}AddEditForm.vue",
+        reason: "Install generated shared add/edit form component.",
+        category: "ui-generator",
+        id: "ui-generator-page-add-edit-form-${option:namespace|snake}",
+        templateContext: {
+          entrypoint: "src/server/buildTemplateContext.js",
+          export: "buildUiTemplateContext"
+        },
+        when: {
+          all: [
+            {
+              option: "operations",
+              in: ["new"]
+            },
+            {
+              option: "operations",
+              in: ["edit"]
+            }
+          ]
+        }
+      },
+      {
+        from: "templates/src/pages/admin/ui-generator/AddEditFormFields.js",
+        toSurface: "${option:surface|lower}",
+        toSurfacePath:
+          "${option:directory-prefix|pathprefix}${option:container|pathprefix}${option:route-path|path}/_components/${option:namespace|singular|pascal|default(Record)}AddEditFormFields.js",
+        reason: "Install generated shared add/edit form field definitions.",
+        category: "ui-generator",
+        id: "ui-generator-page-add-edit-form-fields-${option:namespace|snake}",
+        templateContext: {
+          entrypoint: "src/server/buildTemplateContext.js",
+          export: "buildUiTemplateContext"
+        },
+        when: {
+          all: [
+            {
+              option: "operations",
+              in: ["new"]
+            },
+            {
+              option: "operations",
+              in: ["edit"]
+            }
+          ]
+        }
+      },
+      {
+        from: "templates/src/pages/admin/ui-generator/NewElement.vue",
+        toSurface: "${option:surface|lower}",
+        toSurfacePath: "${option:directory-prefix|pathprefix}${option:container|pathprefix}${option:route-path|path}/new.vue",
+        reason: "Install generated new page.",
+        category: "ui-generator",
+        id: "ui-generator-page-new-standalone-${option:namespace|snake}",
+        templateContext: {
+          entrypoint: "src/server/buildTemplateContext.js",
+          export: "buildUiTemplateContext"
+        },
+        when: {
+          all: [
+            {
+              option: "operations",
+              in: ["new"]
+            },
+            {
+              option: "operations",
+              notIn: ["edit"]
+            }
+          ]
+        }
+      },
+      {
+        from: "templates/src/pages/admin/ui-generator/EditElement.vue",
+        toSurface: "${option:surface|lower}",
+        toSurfacePath:
+          "${option:directory-prefix|pathprefix}${option:container|pathprefix}${option:route-path|path}/[${option:id-param|trim}]/edit.vue",
+        reason: "Install generated edit page.",
+        category: "ui-generator",
+        id: "ui-generator-page-edit-standalone-${option:namespace|snake}",
+        templateContext: {
+          entrypoint: "src/server/buildTemplateContext.js",
+          export: "buildUiTemplateContext"
+        },
+        when: {
+          all: [
+            {
+              option: "operations",
+              in: ["edit"]
+            },
+            {
+              option: "operations",
+              notIn: ["new"]
+            }
+          ]
         }
       }
     ],
@@ -204,7 +335,7 @@ export default Object.freeze({
         skipIfContains:
           "jskit:ui-generator.menu:${option:namespace|kebab}:${option:directory-prefix|path}:${option:container|path}:${option:route-path|path}",
         value:
-          "\n// jskit:ui-generator.menu:${option:namespace|kebab}:${option:directory-prefix|path}:${option:container|path}:${option:route-path|path}\n{\n  addPlacement({\n    id: \"ui-generator.${option:namespace|kebab}.menu\",\n    host: \"__JSKIT_UI_MENU_PLACEMENT_HOST__\",\n    position: \"__JSKIT_UI_MENU_PLACEMENT_POSITION__\",\n    surfaces: [\"${option:surface|lower}\"],\n    order: 155,\n    componentToken: \"__JSKIT_UI_MENU_COMPONENT_TOKEN__\",\n    props: {\n      label: \"${option:namespace|plural|pascal}\",\n      surface: \"${option:surface|lower}\",\n      workspaceSuffix: \"/${option:directory-prefix|pathprefix}${option:container|pathprefix}${option:route-path|path}\",\n      nonWorkspaceSuffix: \"/${option:directory-prefix|pathprefix}${option:container|pathprefix}${option:route-path|path}\"\n    },\n    when: ({ auth }) => Boolean(auth?.authenticated)\n  });\n}\n",
+          "\n// jskit:ui-generator.menu:${option:namespace|kebab}:${option:directory-prefix|path}:${option:container|path}:${option:route-path|path}\n{\n  addPlacement({\n    id: \"ui-generator.${option:namespace|kebab}.menu\",\n    host: \"__JSKIT_UI_MENU_PLACEMENT_HOST__\",\n    position: \"__JSKIT_UI_MENU_PLACEMENT_POSITION__\",\n    surfaces: [\"${option:surface|lower}\"],\n    order: 155,\n    componentToken: \"__JSKIT_UI_MENU_COMPONENT_TOKEN__\",\n    props: {\n      label: \"${option:namespace|plural|pascal}\",\n      surface: \"${option:surface|lower}\",\n      workspaceSuffix: \"__JSKIT_UI_MENU_WORKSPACE_SUFFIX__\",\n      nonWorkspaceSuffix: \"__JSKIT_UI_MENU_NON_WORKSPACE_SUFFIX__\",\n__JSKIT_UI_MENU_TO_PROP_LINE__    },\n    when: ({ auth }) => Boolean(auth?.authenticated)\n  });\n}\n",
         reason: "Append generated UI menu placement.",
         category: "ui-generator",
         id: "ui-generator-placement-menu",
@@ -219,8 +350,32 @@ export default Object.freeze({
               in: ["list"]
             },
             {
-              option: "route-path",
-              notContains: "["
+              any: [
+                {
+                  all: [
+                    {
+                      option: "route-path",
+                      notContains: "["
+                    },
+                    {
+                      option: "directory-prefix",
+                      notContains: "["
+                    }
+                  ]
+                },
+                {
+                  all: [
+                    {
+                      option: "placement",
+                      contains: ":"
+                    },
+                    {
+                      option: "placement-to",
+                      notEquals: ""
+                    }
+                  ]
+                }
+              ]
             }
           ]
         }

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@jskit-ai/crud-ui-generator",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "type": "module",
   "scripts": {
     "test": "node --test"
   },
   "dependencies": {
-    "@jskit-ai/crud-core": "0.1.30",
-    "@jskit-ai/kernel": "0.1.22"
+    "@jskit-ai/crud-core": "0.1.32",
+    "@jskit-ai/kernel": "0.1.24"
   },
   "exports": {
     "./server/buildTemplateContext": "./src/server/buildTemplateContext.js"

package/src/server/buildTemplateContext.js

@@ -27,7 +27,24 @@ const ALLOWED_OPERATIONS = new Set(["list", "view", "new", "edit"]);
 const DEFAULT_LIST_HIDDEN_FIELD_KEYS = new Set(["createdAt", "updatedAt"]);
 const CONTAINER_TOKEN_PATTERN = /^[a-z0-9]+(?:[._-][a-z0-9]+)*$/;
 const DEFAULT_MENU_COMPONENT_TOKEN = "users.web.shell.surface-aware-menu-link-item";
-const CONTAINER_MENU_COMPONENT_TOKEN = "local.main.ui.section-shell.tab-link-item";
+const CONTAINER_MENU_COMPONENT_TOKEN = "local.main.ui.tab-link-item";
+
+function splitPathSegments(value = "") {
+  return normalizeText(value)
+    .replaceAll("\\", "/")
+    .split("/")
+    .map((entry) => normalizeText(entry))
+    .filter(Boolean);
+}
+
+function isRouteGroupSegment(value = "") {
+  const source = normalizeText(value);
+  return source.startsWith("(") && source.endsWith(")");
+}
+
+function joinPathSegments(segments = []) {
+  return (Array.isArray(segments) ? segments : []).join("/");
+}
 
 function resolveContainerOption(options = {}) {
   const container = normalizeText(options?.container).toLowerCase();
@@ -45,31 +62,50 @@ function resolveContainerOption(options = {}) {
 }
 
 function resolveRoutePathWithContainer(options = {}) {
-  const routePath = normalizeText(options?.["route-path"]);
-  if (!routePath) {
-    return "";
-  }
-
   const container = resolveContainerOption(options);
-  if (!container) {
-    return routePath;
-  }
+  const routeSegments = [
+    ...splitPathSegments(options?.["directory-prefix"]),
+    ...splitPathSegments(container),
+    ...splitPathSegments(options?.["route-path"])
+  ];
+  return joinPathSegments(routeSegments);
+}
 
-  return `${container}/${routePath}`;
+function resolvePlacementUrlSuffix(options = {}) {
+  const routeSegments = splitPathSegments(resolveRoutePathWithContainer(options))
+    .filter((segment) => !isRouteGroupSegment(segment));
+  if (routeSegments.length < 1) {
+    return "/";
+  }
+  return `/${joinPathSegments(routeSegments)}`;
 }
 
 function resolveMenuComponentToken(options = {}) {
+  const explicitToken = normalizeText(options?.["placement-component-token"]);
+  if (explicitToken) {
+    return explicitToken;
+  }
+
   const container = resolveContainerOption(options);
   return container ? CONTAINER_MENU_COMPONENT_TOKEN : DEFAULT_MENU_COMPONENT_TOKEN;
 }
 
+function resolveMenuToPropLine(options = {}) {
+  const placementTo = normalizeText(options?.["placement-to"]);
+  if (!placementTo) {
+    return "";
+  }
+
+  return `      to: ${JSON.stringify(placementTo)},\n`;
+}
+
 async function resolveMenuPlacementTarget({ appRoot, options, hasListOperation } = {}) {
   if (hasListOperation !== true) {
     return null;
   }
 
   const routePath = resolveRoutePathWithContainer(options);
-  if (!routePath || routePath.includes("[")) {
+  if (!routePath) {
     return null;
   }
 
@@ -209,6 +245,22 @@ function ensureFields(fields, fallbackFields = createFieldDefinitions({})) {
   return fallbackFields;
 }
 
+function resolveViewTitleFallbackFieldKey(fields = []) {
+  const sourceFields = Array.isArray(fields) ? fields : [];
+  for (const field of sourceFields) {
+    if (normalizeText(field?.type).toLowerCase() !== "string") {
+      continue;
+    }
+
+    const key = normalizeText(field?.key);
+    if (key) {
+      return key;
+    }
+  }
+
+  return "";
+}
+
 async function buildUiTemplateContext({ appRoot, options } = {}) {
   const selectedOperations = parseOperationsOption(options);
   const selectedDisplayFields = parseDisplayFieldsOption(options);
@@ -298,6 +350,9 @@ async function buildUiTemplateContext({ appRoot, options } = {}) {
   const viewFields = hasViewOperation
     ? filterDisplayFields(selectedDisplayFields, ensureFields(viewFieldsAll))
     : createFieldDefinitions({});
+  const viewTitleFallbackFieldKey = hasViewOperation
+    ? resolveViewTitleFallbackFieldKey(viewFieldsAll)
+    : "";
   const createFields = hasNewOperation
     ? filterDisplayFields(selectedDisplayFields, createFieldsAll)
     : [];
@@ -325,6 +380,7 @@ async function buildUiTemplateContext({ appRoot, options } = {}) {
     __JSKIT_UI_LIST_REALTIME_EVENTS__: JSON.stringify(listRealtimeEvents),
     __JSKIT_UI_LIST_RECORD_ID_EXPR__: resolveRecordIdExpression(recordIdFields),
     __JSKIT_UI_VIEW_COLUMNS__: buildViewColumns(viewFields),
+    __JSKIT_UI_VIEW_TITLE_FALLBACK_FIELD_KEY__: JSON.stringify(viewTitleFallbackFieldKey),
     __JSKIT_UI_RECORD_CHANGED_EVENT__: JSON.stringify(defaultRecordChangedEvent),
     __JSKIT_UI_HAS_LIST_ROUTE__: hasListOperation ? "true" : "false",
     __JSKIT_UI_HAS_VIEW_ROUTE__: hasViewOperation ? "true" : "false",
@@ -338,7 +394,10 @@ async function buildUiTemplateContext({ appRoot, options } = {}) {
     __JSKIT_UI_EDIT_FORM_FIELD_PUSH_LINES__: renderObjectPushLines("UI_EDIT_FORM_FIELDS", editFields),
     __JSKIT_UI_MENU_PLACEMENT_HOST__: normalizeText(menuPlacementTarget?.host),
     __JSKIT_UI_MENU_PLACEMENT_POSITION__: normalizeText(menuPlacementTarget?.position),
-    __JSKIT_UI_MENU_COMPONENT_TOKEN__: resolveMenuComponentToken(options)
+    __JSKIT_UI_MENU_COMPONENT_TOKEN__: resolveMenuComponentToken(options),
+    __JSKIT_UI_MENU_WORKSPACE_SUFFIX__: resolvePlacementUrlSuffix(options),
+    __JSKIT_UI_MENU_NON_WORKSPACE_SUFFIX__: resolvePlacementUrlSuffix(options),
+    __JSKIT_UI_MENU_TO_PROP_LINE__: resolveMenuToPropLine(options)
   };
 }
 

package/src/server/resourceSupport.js

@@ -12,6 +12,7 @@ import {
   resolveCrudLookupApiPathFromNamespace,
   resolveCrudLookupContainerKey
 } from "@jskit-ai/kernel/shared/support/crudLookup";
+import { normalizeSurfaceId } from "@jskit-ai/kernel/shared/surface/registry";
 import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
 
 const JS_IDENTIFIER_PATTERN = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
@@ -281,6 +282,62 @@ function toFieldLabel(key) {
     .join(" ");
 }
 
+function isSupportedSelectOptionValue(value) {
+  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+}
+
+function toSelectOptionLabel(value) {
+  if (typeof value === "string") {
+    const normalizedValue = normalizeText(value);
+    return normalizedValue ? toFieldLabel(normalizedValue) : "";
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  return "";
+}
+
+function toSelectOptionIdentity(value) {
+  return `${typeof value}:${String(value)}`;
+}
+
+function normalizeFieldUiOptions(rawOptions, { context = "resource fieldMeta ui.options" } = {}) {
+  if (rawOptions === undefined || rawOptions === null) {
+    return [];
+  }
+  if (!Array.isArray(rawOptions)) {
+    throw new Error(`${context} must be an array of { value, label? } entries.`);
+  }
+
+  const options = [];
+  const seenValues = new Set();
+  for (const [index, rawEntry] of rawOptions.entries()) {
+    if (!rawEntry || typeof rawEntry !== "object" || Array.isArray(rawEntry)) {
+      throw new Error(`${context}[${index}] must be an object.`);
+    }
+
+    const value = rawEntry.value;
+    if (!isSupportedSelectOptionValue(value)) {
+      throw new Error(`${context}[${index}].value must be a string, number, or boolean.`);
+    }
+
+    const identity = toSelectOptionIdentity(value);
+    if (seenValues.has(identity)) {
+      continue;
+    }
+    seenValues.add(identity);
+
+    const explicitLabel = normalizeText(rawEntry.label);
+    const fallbackLabel = toSelectOptionLabel(value);
+    options.push({
+      value,
+      label: explicitLabel || fallbackLabel || String(value)
+    });
+  }
+
+  return options;
+}
+
 function stripLookupIdSuffix(key = "") {
   const normalizedKey = normalizeText(key);
   if (!normalizedKey) {
@@ -400,6 +457,10 @@ function normalizeLookupRelation(relation = {}) {
       normalized.containerKey = containerKey;
     }
   }
+  const surfaceId = normalizeSurfaceId(relation.surfaceId);
+  if (surfaceId) {
+    normalized.surfaceId = surfaceId;
+  }
   return normalized;
 }
 
@@ -425,6 +486,9 @@ function buildResourceFieldMetaMap(resource = {}) {
     }
 
     const relation = normalizeLookupRelation(rawEntry.relation);
+    const fieldUiOptions = normalizeFieldUiOptions(rawEntry?.ui?.options, {
+      context: `resource.fieldMeta["${key}"].ui.options`
+    });
     if (relation) {
       nextEntry.relation = relation;
       const formControl = checkCrudLookupFormControl(rawEntry?.ui?.formControl, {
@@ -437,6 +501,12 @@ function buildResourceFieldMetaMap(resource = {}) {
         };
       }
     }
+    if (fieldUiOptions.length > 0) {
+      nextEntry.ui = {
+        ...(nextEntry.ui || {}),
+        options: fieldUiOptions
+      };
+    }
 
     map[key] = nextEntry;
   }
@@ -559,6 +629,16 @@ function createFormFieldDefinitions(
 
     const schemaType = resolveSchemaType(schema);
     const relation = toLookupRelation(fieldMetaMap, key, { lookupContainerKey });
+    const fieldUiOptions = Array.isArray(fieldMetaMap?.[key]?.ui?.options)
+      ? fieldMetaMap[key].ui.options
+      : [];
+    const schemaEnumValues = Array.isArray(schemaType.schema?.enum) ? schemaType.schema.enum : [];
+    if (!relation && schemaEnumValues.length > 0 && fieldUiOptions.length < 1) {
+      throw new Error(
+        `resource form field "${key}" defines schema enum values but is missing resource.fieldMeta["${key}"].ui.options.`
+      );
+    }
+    const selectOptions = relation ? [] : fieldUiOptions;
     const lookupFormControl = relation
       ? checkCrudLookupFormControl(fieldMetaMap?.[key]?.ui?.formControl, {
           context: `resource.fieldMeta["${key}"].ui.formControl`,
@@ -573,9 +653,14 @@ function createFormFieldDefinitions(
       nullable: schemaType.nullable,
       relation,
       inputType: resolveFormInputType(schemaType.type, schemaType.format),
-      component: resolveFormFieldComponent(schemaType.type, relation),
+      component: selectOptions.length > 0
+        ? "select"
+        : resolveFormFieldComponent(schemaType.type, relation),
       maxLength: toPositiveInteger(schemaType.schema?.maxLength)
     };
+    if (selectOptions.length > 0) {
+      fieldDefinition.options = selectOptions;
+    }
     if (normalizedParentRouteParamKey && key === normalizedParentRouteParamKey) {
       fieldDefinition.hidden = true;
       fieldDefinition.routeParamKey = normalizedParentRouteParamKey;
@@ -622,6 +707,10 @@ function escapeHtml(value) {
     .replaceAll("'", "&#39;");
 }
 
+function serializeTemplateBindingValue(value) {
+  return JSON.stringify(value).replaceAll("'", "\\u0027");
+}
+
 function buildListHeaderColumns(fields = []) {
   return (Array.isArray(fields) ? fields : [])
     .map((field) => `                <th>${escapeHtml(field.label)}</th>`)
@@ -723,11 +812,25 @@ function buildFormColumns(fields = []) {
                 label="${label}"
                 color="primary"
                 hide-details="auto"
-                :disabled="
-                  !formRuntime.addEdit.canSave ||
-                  formRuntime.addEdit.isSaving ||
-                  formRuntime.addEdit.isRefetching
-                "
+                :disabled="formRuntime.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="formRuntime.addEdit.isFieldLocked"
+                :clearable="${field.nullable === true ? "true" : "false"}"
                 :error-messages='${fieldErrorExpression}'
               />
             </v-col>`;
@@ -747,17 +850,14 @@ function buildFormColumns(fields = []) {
                 label="${label}"
                 variant="outlined"
                 density="comfortable"
+                autocomplete="off"
                 :items='resolveLookupItems(${JSON.stringify(key)}, { selectedValue: ${formAccessor}, selectedRecord: formRuntime.addEdit.resource.data })'
                 ${lookupSearchBindings}
                 item-title="label"
                 item-value="value"
                 ${lookupNoFilterLine}
                 :loading='resolveLookupLoading(${JSON.stringify(key)})'
-                :disabled="
-                  !formRuntime.addEdit.canSave ||
-                  formRuntime.addEdit.isSaving ||
-                  formRuntime.addEdit.isRefetching
-                "
+                :disabled="formRuntime.addEdit.isFieldLocked"
                 :clearable="${field.nullable === true ? "true" : "false"}"
                 :error-messages='${fieldErrorExpression}'
               />
@@ -776,11 +876,7 @@ function buildFormColumns(fields = []) {
                 variant="outlined"
                 density="comfortable"
                 :maxlength="${maxLength}"
-                :readonly="
-                  !formRuntime.addEdit.canSave ||
-                  formRuntime.addEdit.isSaving ||
-                  formRuntime.addEdit.isRefetching
-                "
+                :readonly="formRuntime.addEdit.isFieldLocked"
                 :error-messages='${fieldErrorExpression}'
               />
             </v-col>`;