nuxt-ui-tools 1.13.0 → 1.14.0

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/runtime/form/fields/matrix/component.vue

@@ -7,6 +7,7 @@ import { useFormUi } from "../../composables/use-form-ui";
 import { isNumber } from "../../utils/predicate";
 import { resolveFormText } from "../../utils/text";
 import { mergeFormUiClass } from "../../utils/ui";
+import { groupMatrixEntries } from "./utils";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
@@ -20,6 +21,7 @@ const matrixInstanceId = useId();
 const visibleFields = computed(
   () => props.field.fields.filter((field) => field.type !== "hidden" && field.ignore !== true)
 );
+const groups = computed(() => groupMatrixEntries(props.field.rows));
 const matrixId = computed(() => `${matrixInstanceId}-${props.path.join("-")}`);
 const minWidth = computed(
   () => isNumber(fieldProps.value.minWidth) ? `${fieldProps.value.minWidth}px` : fieldProps.value.minWidth ?? "40rem"
@@ -31,6 +33,7 @@ const bordered = computed(() => fieldProps.value.bordered !== false);
 const hoverable = computed(() => fieldProps.value.hoverable !== false);
 const rowPadding = computed(() => fieldProps.value.compact ? "px-3 py-2" : "px-4 py-3");
 const cellPadding = computed(() => fieldProps.value.compact ? "px-2 py-1.5" : "px-3 py-2.5");
+const sectionPadding = computed(() => fieldProps.value.compact ? "px-3 py-1.5" : "px-4 py-2");
 function rowPath(row) {
   return [...props.path, row.key];
 }
@@ -40,9 +43,19 @@ function fieldLabel(field) {
 function rowLabelId(row) {
   return `${matrixId.value}-row-${row.key}`;
 }
+function sectionId(index) {
+  return `${matrixId.value}-section-${index}`;
+}
 function columnLabelId(field) {
   return `${matrixId.value}-column-${field.key}`;
 }
+function cellHeaders(options) {
+  return [
+    options.section === null ? null : sectionId(options.section),
+    rowLabelId(options.row),
+    columnLabelId(options.column)
+  ].filter(Boolean).join(" ");
+}
 function controlClass(field) {
   const compact = field.type === "checkbox" || field.type === "switch" || field.type === "rating" || field.type === "color-picker";
   return mergeFormUiClass(
@@ -105,9 +118,58 @@ function controlClass(field) {
             </th>
           </tr>
         </thead>
-        <tbody :class="formUi.ui.value.matrix?.ui?.body">
+        <tbody
+          v-for="(group, groupIndex) in groups"
+          :key="group.section ? `section-${groupIndex}` : `rows-${groupIndex}`"
+          :class="
+  mergeFormUiClass(
+    '[&:not(:last-child)>tr:last-child>*]:border-b [&:not(:last-child)>tr:last-child>*]:border-default',
+    formUi.ui.value.matrix?.ui?.body
+  )
+"
+          data-matrix-group
+        >
           <tr
-            v-for="row in field.rows"
+            v-if="group.section"
+            :class="mergeFormUiClass('bg-elevated/50', formUi.ui.value.matrix?.ui?.section)"
+            data-matrix-section
+          >
+            <th
+              :id="sectionId(groupIndex)"
+              scope="rowgroup"
+              :colspan="visibleFields.length + 1"
+              :class="
+  mergeFormUiClass(
+    [sectionPadding, 'border-b border-default text-left font-normal'].join(' '),
+    formUi.ui.value.matrix?.ui?.sectionHeader
+  )
+"
+            >
+              <span
+                :class="
+  mergeFormUiClass(
+    'block text-xs font-semibold text-highlighted',
+    formUi.ui.value.matrix?.ui?.sectionLabel
+  )
+"
+              >
+                {{ resolveFormText(group.section.label) }}
+              </span>
+              <span
+                v-if="group.section.description"
+                :class="
+  mergeFormUiClass(
+    'mt-0.5 block text-xs text-muted',
+    formUi.ui.value.matrix?.ui?.sectionDescription
+  )
+"
+              >
+                {{ resolveFormText(group.section.description) }}
+              </span>
+            </th>
+          </tr>
+          <tr
+            v-for="row in group.rows"
             :key="row.key"
             :class="
   mergeFormUiClass(
@@ -136,12 +198,25 @@ function controlClass(field) {
 "
               :style="{ width: rowHeaderWidth, minWidth: rowHeaderWidth }"
             >
-              {{ resolveFormText(row.label) ?? row.key }}
+              <span :class="mergeFormUiClass('block', formUi.ui.value.matrix?.ui?.rowLabel)">
+                {{ resolveFormText(row.label) ?? row.key }}
+              </span>
+              <span
+                v-if="row.description"
+                :class="
+  mergeFormUiClass(
+    'mt-0.5 block text-xs font-normal text-muted',
+    formUi.ui.value.matrix?.ui?.rowDescription
+  )
+"
+              >
+                {{ resolveFormText(row.description) }}
+              </span>
             </th>
             <td
               v-for="column in visibleFields"
               :key="column.key"
-              :headers="`${rowLabelId(row)} ${columnLabelId(column)}`"
+              :headers="cellHeaders({ row, column, section: group.section ? groupIndex : null })"
               :class="
   mergeFormUiClass(
     [

package/dist/runtime/form/fields/matrix/types.d.ts

@@ -4,7 +4,16 @@ import type { FormText } from '../../types/utils.js';
 export interface FormMatrixRow<TKey extends string = string> {
     key: TKey;
     label: FormText;
+    /** Supporting copy rendered under the row label. */
+    description?: FormText;
 }
+/** Full-width row that opens a group of matrix rows. It holds no value. */
+export interface FormMatrixSection {
+    type: 'section';
+    label: FormText;
+    description?: FormText;
+}
+export type FormMatrixEntry = FormMatrixRow | FormMatrixSection;
 export interface FormMatrixProps {
     minWidth?: number | string;
     rowHeaderWidth?: number | string;
@@ -14,9 +23,12 @@ export interface FormMatrixProps {
     compact?: boolean;
 }
 export interface FormMatrixField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends FormStatefulFieldBase<'matrix', object, TContext, TDeps, FormMatrixProps> {
-    rows: readonly FormMatrixRow[];
+    /** Value rows, optionally grouped by section entries placed before the rows they head. */
+    rows: readonly FormMatrixEntry[];
     fields: readonly FormField<TContext, TDeps>[];
 }
-export type MatrixFieldOutput<TRows extends readonly FormMatrixRow[], TChildren> = {
-    [TRow in TRows[number] as TRow['key']]: TChildren;
+export type MatrixFieldOutput<TRows extends readonly object[], TChildren> = {
+    [TRow in Extract<TRows[number], {
+        key: string;
+    }> as TRow['key']]: TChildren;
 };

package/dist/runtime/form/fields/matrix/utils.d.ts

@@ -0,0 +1,10 @@
+import type { FormMatrixEntry, FormMatrixRow, FormMatrixSection } from './types.js';
+export declare function isMatrixSection(entry: FormMatrixEntry): entry is FormMatrixSection;
+/**
+ * Splits matrix entries into table bodies: each section opens a group, and rows placed before
+ * the first section form a group without a header.
+ */
+export declare function groupMatrixEntries(entries: readonly FormMatrixEntry[]): {
+    section: FormMatrixSection | null;
+    rows: FormMatrixRow[];
+}[];

package/dist/runtime/form/fields/matrix/utils.js

@@ -0,0 +1,19 @@
+export function isMatrixSection(entry) {
+  return "type" in entry && entry.type === "section";
+}
+export function groupMatrixEntries(entries) {
+  const groups = [];
+  for (const entry of entries) {
+    if (isMatrixSection(entry)) {
+      groups.push({ section: entry, rows: [] });
+      continue;
+    }
+    const current = groups.at(-1);
+    if (current) {
+      current.rows.push(entry);
+    } else {
+      groups.push({ section: null, rows: [entry] });
+    }
+  }
+  return groups;
+}

package/dist/runtime/form/fields/password/component.vue

@@ -204,3 +204,7 @@ const model = computed({
     </UPopover>
   </FormFieldShell>
 </template>
+
+<style>
+[data-reka-popper-content-wrapper]:has([data-form-password-requirements]),[data-reka-popper-content-wrapper]:has([data-form-password-requirements])>*{pointer-events:none}
+</style>

package/dist/runtime/form/types/field.d.ts

@@ -69,7 +69,7 @@ export type { FormGroupField } from '../fields/group/types.js';
 export type { FormCascaderField, FormHierarchyField, FormHierarchyOption, FormTreeField, FormTreeSelectField, } from '../fields/hierarchy/types.js';
 export type { FormInfoField } from '../fields/info/types.js';
 export type { FormInputGroupField } from '../fields/input-group/types.js';
-export type { FormMatrixField, FormMatrixRow } from '../fields/matrix/types.js';
+export type { FormMatrixEntry, FormMatrixField, FormMatrixRow, FormMatrixSection, } from '../fields/matrix/types.js';
 export type { FormNumberField } from '../fields/number/types.js';
 export type { FormOneTimeCodeField } from '../fields/one-time-code/types.js';
 export type { FormObjectField } from '../fields/object/types.js';

package/dist/runtime/form/types/output.d.ts

@@ -55,9 +55,7 @@ type ModeFieldValueObject<TField, TMode extends FormStateMode, TValue> = TMode e
 type ObjectFieldValue<TField, TMode extends FormStateMode> = ApplyOutputMode<TField, TMode, ObjectFieldOutput<FieldsValue<ChildFields<TField>, TMode>>>;
 type MatrixRows<TField> = TField extends {
     readonly rows: infer TRows;
-} ? TRows extends readonly {
-    key: string;
-}[] ? TRows : readonly [] : readonly [];
+} ? TRows extends readonly object[] ? TRows : readonly [] : readonly [];
 type MatrixFieldValue<TField, TMode extends FormStateMode> = ApplyOutputMode<TField, TMode, MatrixFieldOutput<MatrixRows<TField>, FieldsValue<ChildFields<TField>, TMode>>>;
 type StatefulFieldObject<TField, TMode extends FormStateMode> = TMode extends 'input' ? OptionalFieldValueObject<TField, ApplyOutputMode<TField, TMode, ResolveFormFieldValue<TField>>> : TMode extends 'output' ? TField extends {
     submit: {

package/dist/runtime/form/types/ui.d.ts

@@ -106,6 +106,12 @@ export interface FormMatrixUi {
     body?: FormUiClass;
     row?: FormUiClass;
     rowHeader?: FormUiClass;
+    rowLabel?: FormUiClass;
+    rowDescription?: FormUiClass;
+    section?: FormUiClass;
+    sectionHeader?: FormUiClass;
+    sectionLabel?: FormUiClass;
+    sectionDescription?: FormUiClass;
     cell?: FormUiClass;
     control?: FormUiClass;
 }

package/dist/runtime/form/utils/state.js

@@ -434,7 +434,7 @@ export function getMatrixRows(field) {
     return [];
   }
   return rows.flatMap((row) => {
-    if (!isRecord(row) || !isString(row.key)) {
+    if (!isRecord(row) || row.type === "section" || !isString(row.key)) {
       return [];
     }
     return row.key;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "Nuxt module and runtime toolkit for UI-heavy Nuxt applications",
   "homepage": "https://github.com/ChronicStone/nuxt-ui-tools#readme",
   "bugs": "https://github.com/ChronicStone/nuxt-ui-tools/issues",