cabloy 5.1.158 → 5.1.159

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"
   },