cabloy 5.1.157 → 5.1.159

package/zova/src/suite/cabloy-basic/modules/basic-table/src/component/table/render.tsx

@@ -1,3 +1,5 @@
+import type { AriaAttributes, CSSProperties } from 'vue';
+
 import { FlexRender } from '@tanstack/vue-table';
 import { BeanRenderBase } from 'zova';
 import { Render } from 'zova-module-a-bean';
@@ -8,7 +10,14 @@ export class RenderTable<TData extends {} = {}> extends BeanRenderBase {
   public render() {
     return (
       <ZTable
-        {...this.$props}
+        data={this.$props.data}
+        schema={this.$props.schema}
+        schemaOrder={this.$props.schemaOrder}
+        sorting={this.$props.sorting}
+        onSortingChange={this.$props.onSortingChange}
+        tableScope={this.$props.tableScope}
+        getColumns={this.$props.getColumns}
+        getRowId={this.$props.getRowId}
         controllerRef={ref => {
           this.$props?.tableRef?.(ref);
         }}
@@ -19,6 +28,21 @@ export class RenderTable<TData extends {} = {}> extends BeanRenderBase {
     );
   }
 
+  private _getColumnStyle(column: any): CSSProperties {
+    const rest = (column.columnDef.meta as any)?.rest;
+    const fixed = column.getIsPinned();
+    const width = rest?.width ? `${rest.width}px` : undefined;
+    return {
+      width,
+      minWidth: width,
+      textAlign: rest?.align,
+      position: fixed ? ('sticky' as const) : undefined,
+      left: fixed === 'left' ? `${column.getStart('left')}px` : undefined,
+      right: fixed === 'right' ? `${column.getAfter('right')}px` : undefined,
+      zIndex: fixed ? 1 : undefined,
+    };
+  }
+
   public _renderTable($$table: ControllerTable<TData>) {
     const table = $$table.table;
     return (
@@ -26,12 +50,43 @@ export class RenderTable<TData extends {} = {}> extends BeanRenderBase {
         <thead>
           <tr>
             {table.getFlatHeaders().map(header => {
+              const column = header.column;
+              const canSort = column.getCanSort();
+              const sorted = column.getIsSorted();
+              const fixed = column.getIsPinned();
+              const headerDefinition = column.columnDef.header;
+              const headerContent = (
+                <FlexRender render={headerDefinition} props={header.getContext()}></FlexRender>
+              );
+              let sortAria: AriaAttributes['aria-sort'] = 'none';
+              let sortIcon: '▲' | '▼' | '↕' = '↕';
+              if (sorted === 'asc') {
+                sortAria = 'ascending';
+                sortIcon = '▲';
+              } else if (sorted === 'desc') {
+                sortAria = 'descending';
+                sortIcon = '▼';
+              }
               return (
-                <th key={header.id}>
-                  <FlexRender
-                    render={header.column.columnDef.header}
-                    props={header.getContext()}
-                  ></FlexRender>
+                <th
+                  key={header.id}
+                  class={fixed ? 'bg-base-100' : undefined}
+                  style={this._getColumnStyle(column)}
+                  aria-sort={sortAria}
+                >
+                  {canSort ? (
+                    <button
+                      type="button"
+                      class="inline-flex w-full items-center gap-1"
+                      onClick={column.getToggleSortingHandler()}
+                      aria-label={`Sort by ${column.id}`}
+                    >
+                      {headerContent}
+                      <span aria-hidden="true">{sortIcon}</span>
+                    </button>
+                  ) : (
+                    headerContent
+                  )}
                 </th>
               );
             })}
@@ -42,10 +97,15 @@ export class RenderTable<TData extends {} = {}> extends BeanRenderBase {
             return (
               <tr key={row.id}>
                 {row.getVisibleCells().map(cell => {
+                  const column = cell.column;
                   return (
-                    <td key={cell.id}>
+                    <td
+                      key={cell.id}
+                      class={column.getIsPinned() ? 'bg-base-100' : undefined}
+                      style={this._getColumnStyle(column)}
+                    >
                       <FlexRender
-                        render={cell.column.columnDef.cell}
+                        render={column.columnDef.cell}
                         props={cell.getContext()}
                       ></FlexRender>
                     </td>

package/zova/src/suite-vendor/a-cabloy/modules/rest-resource/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zova-module-rest-resource",
-  "version": "5.1.49",
+  "version": "5.1.50",
   "gitHead": "4dece229b6d3f4735930e833afcb4b95ec51bf86",
   "description": "",
   "keywords": [

package/zova/src/suite-vendor/a-cabloy/modules/rest-resource/src/model/resource.ts

@@ -57,6 +57,7 @@ export class ModelResource<
   public schemaCreate?: ISchemaObjectExtensionField;
   public schemaUpdate?: ISchemaObjectExtensionField;
   public schemaFilter?: ISchemaObjectExtensionField;
+  public schemaOrder?: ISchemaObjectExtensionField;
   public schemaRow?: ISchemaObjectExtensionField;
   public schemaPages?: ISchemaObjectExtensionField;
 
@@ -87,6 +88,9 @@ export class ModelResource<
     this.schemaFilter = this.$computed(() => {
       return this.apiSchemasSelect.filter;
     });
+    this.schemaOrder = this.$computed(() => {
+      return this.apiSchemasSelect.order;
+    });
     this.schemaRow = this.$computed(() => {
       return this.apiSchemasSelect.row;
     });

package/zova/src/suite-vendor/a-cabloy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zova-suite-a-cabloy",
-  "version": "5.1.50",
+  "version": "5.1.51",
   "gitHead": "4dece229b6d3f4735930e833afcb4b95ec51bf86",
   "description": "",
   "author": "",
@@ -8,7 +8,7 @@
   "type": "module",
   "dependencies": {
     "zova-module-a-rbac": "^5.0.1",
-    "zova-module-rest-resource": "^5.1.49"
+    "zova-module-rest-resource": "^5.1.50"
   },
   "title": "a-cabloy"
 }

package/zova/src/suite-vendor/a-zova/modules/a-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zova-module-a-form",
-  "version": "5.1.50",
+  "version": "5.1.51",
   "gitHead": "09d901d17140a80ee0764211b441cda72fd94663",
   "description": "",
   "keywords": [

package/zova/src/suite-vendor/a-zova/modules/a-form/src/lib/formLayout.ts

@@ -58,12 +58,6 @@ export function resolveFormLayout(
       ),
     )
     .filter(Boolean) as IResolvedFormLayoutNode[];
-  for (const property of properties ?? []) {
-    const name = property.key;
-    if (!name || !propertyNames.has(name) || fieldNames.has(name)) continue;
-    fieldNames.add(name);
-    children.push({ type: 'field', name });
-  }
   return { children, fieldTabPaths, diagnostics };
 }
 

package/zova/src/suite-vendor/a-zova/modules/a-form/test/lib/formLayout.test.ts

@@ -76,6 +76,19 @@ test('Form Layout accepts every preserved alias for the same canonical source',
   assert.deepEqual(resolved.diagnostics, []);
 });
 
+test('Form Layout renders only explicitly declared visible fields', () => {
+  const resolved = resolveFormLayout(
+    createTabsLayout('name'),
+    createProperties({ key: 'name', type: 'string' }, { key: 'level', type: 'string' }),
+  );
+
+  assert.deepEqual(getTabFieldNames(resolved), ['name']);
+  assert.deepEqual(resolved.fieldTabPaths, {
+    name: [{ tabsId: 'tabs-0', tabId: 'tab-0-0' }],
+  });
+  assert.deepEqual(resolved.diagnostics, []);
+});
+
 test('Form Layout prefers an exact canonical field over a colliding alias', () => {
   const resolved = resolveFormLayout(
     { children: [{ type: 'field', name: 'content' }] },
@@ -89,10 +102,7 @@ test('Form Layout prefers an exact canonical field over a colliding alias', () =
     ),
   );
 
-  assert.deepEqual(resolved.children, [
-    { type: 'field', name: 'content' },
-    { type: 'field', name: 'content.descriptionMarkdown' },
-  ]);
+  assert.deepEqual(resolved.children, [{ type: 'field', name: 'content' }]);
   assert.deepEqual(resolved.diagnostics, []);
 });
 
@@ -131,17 +141,14 @@ test('Form Layout keeps ambiguous aliases and relation prefixes unknown', () =>
     ),
   );
 
-  assert.deepEqual(resolved.children, [
-    { type: 'field', name: 'content.descriptionMarkdown' },
-    { type: 'field', name: 'content.descriptionHtml' },
-  ]);
+  assert.deepEqual(resolved.children, []);
   assert.deepEqual(resolved.diagnostics, [
     { type: 'unknownField', value: '_content' },
     { type: 'unknownField', value: 'content' },
   ]);
 });
 
-test('Form Layout does not resolve or append invisible aliases', () => {
+test('Form Layout does not resolve invisible aliases', () => {
   const resolved = resolveFormLayout(
     { children: [{ type: 'field', name: '_descriptionMarkdown' }] },
     createProperties({

package/zova/src/suite-vendor/a-zova/modules/a-openapi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zova-module-a-openapi",
-  "version": "5.1.51",
+  "version": "5.1.52",
   "gitHead": "09d901d17140a80ee0764211b441cda72fd94663",
   "description": "",
   "keywords": [

package/zova/src/suite-vendor/a-zova/modules/a-openapi/src/model/sdk.ts

@@ -183,6 +183,10 @@ export class ModelSdk extends BeanModelBase {
         const operationObject = sdk.data?.operationObject;
         return getSchemaOfRequestQueryFilter(operationObject, { where: true });
       },
+      get order() {
+        const operationObject = sdk.data?.operationObject;
+        return getSchemaOfRequestQueryFilter(operationObject, { order: true });
+      },
       get requestBody() {
         const operationObject = sdk.data?.operationObject;
         const schemaBody = getSchemaOfRequestBody(operationObject);

package/zova/src/suite-vendor/a-zova/modules/a-openapi/src/types/rest.ts

@@ -15,13 +15,24 @@ export type TypeFormFieldOnEffect = (value: any) => void;
 
 export interface ISchemaRenderComponentPresetRecord extends IResourceFormFieldRecord {}
 
-export interface ISchemaObjectExtensionFieldRest {
+export type TypeTableColumnAlign = 'left' | 'center' | 'right';
+export type TypeTableColumnFixed = 'left' | 'right';
+
+export interface ITableColumnOptions {
+  order?: number;
+  align?: TypeTableColumnAlign;
+  width?: number;
+  fixed?: TypeTableColumnFixed;
+  enableSorting?: boolean;
+  sortDescFirst?: boolean;
+}
+
+export interface ISchemaObjectExtensionFieldRest extends ITableColumnOptions {
   'blocks'?: IResourceRenderBlockOptionsBlock[];
   'schemaScene'?: TypeSchemaScene;
   //
   'fieldSource'?: string;
   'visible'?: boolean;
-  'order'?: number;
   'disableNotifyChanged'?: boolean;
   'readonly'?: boolean;
   'onEffect'?: TypeFormFieldOnEffect;

package/zova/src/suite-vendor/a-zova/modules/a-openapi/src/types/schema.ts

@@ -16,6 +16,7 @@ export interface IOpenapiSchemas {
   sdk: TypeOpenapiSchemasSdk;
   query?: SchemaObject;
   filter?: SchemaObject;
+  order?: SchemaObject;
   requestBody?: SchemaObject;
   responseBody?: SchemaObject;
   paged?: SchemaObject;

package/zova/src/suite-vendor/a-zova/modules/a-table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zova-module-a-table",
-  "version": "5.1.38",
+  "version": "5.1.39",
   "gitHead": "09d901d17140a80ee0764211b441cda72fd94663",
   "description": "",
   "keywords": [

package/zova/src/suite-vendor/a-zova/modules/a-table/src/component/table/controller.tsx

@@ -10,8 +10,11 @@ import { celEnvBase, isNilOrEmptyString } from '@cabloy/utils';
 import {
   CellContext,
   createColumnHelper,
+  functionalUpdate,
   getCoreRowModel,
+  OnChangeFn,
   Row,
+  SortingState,
   TableOptionsWithReactiveData,
 } from '@tanstack/vue-table';
 import { SchemaObject } from 'openapi3-ts/oas31';
@@ -48,6 +51,9 @@ import { ITableCellRenderColumnOptions } from '../../types/tableColumn.js';
 export interface ControllerTableProps<TData extends {} = {}> {
   data?: TData[];
   schema?: SchemaObject;
+  schemaOrder?: SchemaObject;
+  sorting?: SortingState;
+  onSortingChange?: OnChangeFn<SortingState>;
   tableScope?: ITableScope;
   getColumns?: TypeTableGetColumns<TData>;
   slotDefault?: (table: ControllerTable<TData>) => VNode;
@@ -95,9 +101,14 @@ export class ControllerTable<TData extends {} = {}> extends BeanControllerTableB
     return this.$props.data;
   }
 
+  public get sorting() {
+    return this.$props.sorting ?? [];
+  }
+
   public async refreshMeta() {
     this.tableMeta = await this._createTableMeta();
     this.columns = await this._createColumns();
+    this.table?.setColumnPinning(this._getColumnPinning());
   }
 
   private _createTable() {
@@ -108,6 +119,22 @@ export class ControllerTable<TData extends {} = {}> extends BeanControllerTableB
       getCoreRowModel: getCoreRowModel(),
       renderFallbackValue: this.scope.config.renderFallbackValue,
       manualPagination: true,
+      manualSorting: true,
+      enableMultiSort: false,
+      enableSortingRemoval: false,
+      state: {
+        get sorting() {
+          return self.sorting;
+        },
+      },
+      onSortingChange: updater => {
+        const sorting = functionalUpdate(updater, self.sorting).slice(0, 1);
+        self.$props.onSortingChange?.(sorting);
+      },
+      get initialState() {
+        const columnPinning = self._getColumnPinning();
+        return { columnPinning };
+      },
       get data() {
         return self.data || [];
       },
@@ -116,6 +143,7 @@ export class ControllerTable<TData extends {} = {}> extends BeanControllerTableB
       },
     };
     this.table = this.$useTable(tableOptions);
+    this.table.setColumnPinning(this._getColumnPinning());
   }
 
   private async _createColumns() {
@@ -162,12 +190,34 @@ export class ControllerTable<TData extends {} = {}> extends BeanControllerTableB
             return property?.title || key;
           },
           cell: props => tableMeta.renders[key](props),
+          size: property.rest?.width,
+          enableSorting: property.rest?.enableSorting === true && this._isOrderable(property),
+          sortDescFirst: property.rest?.sortDescFirst === true,
+          meta: { rest: property.rest },
         }),
       );
     }
     return columns;
   }
 
+  private _getColumnPinning() {
+    const left: string[] = [];
+    const right: string[] = [];
+    for (const property of this.tableMeta?.properties ?? []) {
+      const fixed = property.rest?.fixed;
+      if (fixed === 'left') left.push(property.key!);
+      if (fixed === 'right') right.push(property.key!);
+    }
+    return { left, right };
+  }
+
+  private _isOrderable(property: ISchemaObjectExtensionField) {
+    const properties = this.$props.schemaOrder?.properties;
+    if (!properties) return false;
+    const keys = [property.key, property.schemaKey, ...(property.schemaKeys ?? [])];
+    return keys.some(key => key && Object.prototype.hasOwnProperty.call(properties, key));
+  }
+
   private _createProperties() {
     this.properties = this.$computed(() => {
       return this.$sdk.loadSchemaProperties(this.schema, 'table');

package/zova/src/suite-vendor/a-zova/modules/a-table/src/component/table/render.tsx

@@ -1,9 +1,26 @@
+import type { AriaAttributes, CSSProperties } from 'vue';
+
 import { FlexRender } from '@tanstack/vue-table';
 import { BeanRenderBase } from 'zova';
 import { Render } from 'zova-module-a-bean';
 
 @Render()
 export class RenderTable extends BeanRenderBase {
+  private _getColumnStyle(column: any): CSSProperties {
+    const rest = (column.columnDef.meta as any)?.rest;
+    const fixed = column.getIsPinned();
+    const width = rest?.width ? `${rest.width}px` : undefined;
+    return {
+      width,
+      minWidth: width,
+      textAlign: rest?.align,
+      position: fixed ? ('sticky' as const) : undefined,
+      left: fixed === 'left' ? `${column.getStart('left')}px` : undefined,
+      right: fixed === 'right' ? `${column.getAfter('right')}px` : undefined,
+      zIndex: fixed ? 1 : undefined,
+    };
+  }
+
   private _renderTableDefault() {
     const table = this.table;
     return (
@@ -11,12 +28,43 @@ export class RenderTable extends BeanRenderBase {
         <thead>
           <tr>
             {table.getFlatHeaders().map(header => {
+              const column = header.column;
+              const canSort = column.getCanSort();
+              const sorted = column.getIsSorted();
+              const fixed = column.getIsPinned();
+              const headerDefinition = column.columnDef.header;
+              const headerContent = (
+                <FlexRender render={headerDefinition} props={header.getContext()}></FlexRender>
+              );
+              let sortAria: AriaAttributes['aria-sort'] = 'none';
+              let sortIcon: '▲' | '▼' | '↕' = '↕';
+              if (sorted === 'asc') {
+                sortAria = 'ascending';
+                sortIcon = '▲';
+              } else if (sorted === 'desc') {
+                sortAria = 'descending';
+                sortIcon = '▼';
+              }
               return (
-                <th key={header.id}>
-                  <FlexRender
-                    render={header.column.columnDef.header}
-                    props={header.getContext()}
-                  ></FlexRender>
+                <th
+                  key={header.id}
+                  class={fixed ? 'bg-base-100' : undefined}
+                  style={this._getColumnStyle(column)}
+                  aria-sort={sortAria}
+                >
+                  {canSort ? (
+                    <button
+                      type="button"
+                      class="inline-flex w-full items-center gap-1"
+                      onClick={column.getToggleSortingHandler()}
+                      aria-label={`Sort by ${column.id}`}
+                    >
+                      {headerContent}
+                      <span aria-hidden="true">{sortIcon}</span>
+                    </button>
+                  ) : (
+                    headerContent
+                  )}
                 </th>
               );
             })}
@@ -27,10 +75,15 @@ export class RenderTable extends BeanRenderBase {
             return (
               <tr key={row.id}>
                 {row.getVisibleCells().map(cell => {
+                  const column = cell.column;
                   return (
-                    <td key={cell.id}>
+                    <td
+                      key={cell.id}
+                      class={column.getIsPinned() ? 'bg-base-100' : undefined}
+                      style={this._getColumnStyle(column)}
+                    >
                       <FlexRender
-                        render={cell.column.columnDef.cell}
+                        render={column.columnDef.cell}
                         props={cell.getContext()}
                       ></FlexRender>
                     </td>

package/zova/src/suite-vendor/a-zova/modules/a-table/src/types/table.ts

@@ -1,6 +1,8 @@
 import type { ColumnDef, useVueTable } from '@tanstack/vue-table';
-import type { SchemaObject } from 'openapi3-ts/oas31';
-import type { TypeTableCellRenderComponent } from 'zova-module-a-openapi';
+import type {
+  ISchemaObjectExtensionField,
+  TypeTableCellRenderComponent,
+} from 'zova-module-a-openapi';
 
 import type { ControllerTable } from '../component/table/controller.jsx';
 import type { TypeTableCellRender } from './tableColumn.js';
@@ -10,12 +12,12 @@ export type TypeTable<TData extends {} = {}> = ReturnType<typeof useVueTable<TDa
 export type TypeColumn<TData extends {} = {}> = ColumnDef<TData, any>;
 
 export interface ITableMeta<TData extends {} = {}> {
-  properties: SchemaObject[];
+  properties: ISchemaObjectExtensionField[];
   renders: Record<string, TypeTableCellRender<TData>>;
 }
 
 export type TypeTableGetColumnsNext<TData extends {} = {}> = (
-  properties?: SchemaObject[],
+  properties?: ISchemaObjectExtensionField[],
 ) => Promise<TypeColumn<TData>[]>;
 
 export type TypeTableCreateColumnRender<TData extends {} = {}> = (

package/zova/src/suite-vendor/a-zova/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zova-suite-a-zova",
-  "version": "5.1.154",
+  "version": "5.1.155",
   "gitHead": "2c5c19284bab738e492856189acb6fad74b8a7b7",
   "description": "zova",
   "license": "MIT",
@@ -16,13 +16,13 @@
     "zova-module-a-boundary": "^5.1.22",
     "zova-module-a-command": "^5.1.34",
     "zova-module-a-fetch": "^5.1.25",
-    "zova-module-a-form": "^5.1.50",
+    "zova-module-a-form": "^5.1.51",
     "zova-module-a-icon": "^5.1.27",
     "zova-module-a-interceptor": "^5.1.31",
     "zova-module-a-logger": "^5.1.28",
     "zova-module-a-meta": "^5.1.22",
     "zova-module-a-model": "^5.1.36",
-    "zova-module-a-openapi": "^5.1.51",
+    "zova-module-a-openapi": "^5.1.52",
     "zova-module-a-router": "^5.1.34",
     "zova-module-a-routerstack": "^5.1.27",
     "zova-module-a-routertabs": "^5.1.34",
@@ -30,7 +30,7 @@
     "zova-module-a-ssrhmr": "^5.1.23",
     "zova-module-a-ssrserver": "^5.1.26",
     "zova-module-a-style": "^5.1.35",
-    "zova-module-a-table": "^5.1.38",
+    "zova-module-a-table": "^5.1.39",
     "zova-module-a-zod": "^5.1.37",
     "zova-module-a-zova": "^5.1.103"
   },