jamis/lib/r-grid/types.d.ts

一种支持通过JSON配置方式生成页面的组件库

import type { GridSizeUnit } from 'jamis-core';
import type { BaseSchema, FormHorizontal, SchemaClassName, SchemaCollection, SchemaObject } from '../types';
export type GridDevice = 
/**
 * 屏幕 < 768
 * @deprecated 用`m`替代
 */
'xs'
/**
 * 屏幕 < 768
 * @deprecated 用`m`替代
 */
 | 'sm' | 'm'
/**
 * 屏幕 >= 768
 *
 * @deprecated 用`pc`替代
 */
 | 'md'
/**
 * 屏幕 >= 768
 */
 | 'pc' | 'lg' | 'xl';
export interface GridColumnObject extends Partial<Record<GridDevice, GridSizeUnit | 'auto'>> {
    /**
     * 垂直对齐方式
     */
    valign?: 'top' | 'middle' | 'bottom' | 'between';
    /**
     * 配置子表单项默认的展示方式。
     */
    mode?: 'normal' | 'inline' | 'horizontal';
    /**
     * 如果是水平排版，这个属性可以细化水平排版的左右宽度占比。
     */
    horizontal?: FormHorizontal;
    body?: SchemaCollection;
    /**
     * 列类名
     */
    columnClassName?: SchemaClassName;
}
export type GridColumn = (SchemaObject & GridColumnObject) | GridColumnObject;
/**
 * Grid 格子布局渲染器。
 *
 */
export interface GridSchema extends BaseSchema {
    /**
     * 指定为 Grid 格子布局渲染器。
     */
    type: 'grid';
    /**
     * 列集合
     */
    columns: Array<GridColumn>;
    /**
     * 水平间距
     */
    gap?: 'xs' | 'sm' | 'base' | 'none' | 'md' | 'lg';
    /**
     * 垂直对齐方式
     */
    valign?: 'top' | 'middle' | 'bottom' | 'between';
    /**
     * 水平对齐方式
     */
    align?: 'left' | 'right' | 'between' | 'center';
}
/**
 * 二维布局渲染器。
 *
 */
export interface Grid2DSchema extends BaseSchema {
    /**
     * 指定为 grid-2d 展示类型
     */
    type: 'grid-2d';
    /**
     * 列数量，默认是 12
     */
    cols?: number;
    /**
     * grid 2d 容器宽度，默认是 auto
     */
    width?: number | string | 'auto';
    /**
     * 格子间距，默认 0，包含行和列
     */
    gap?: number | string;
    /**
     * 格子行级别的间距，如果不设置就和 gap 一样
     */
    gapRow?: number | string;
    /**
     * 单位行高度，默认 50 px
     */
    rowHeight?: number | string;
    /**
     * 每个格子的配置
     */
    grids: Array<Grid2DItem>;
}
export interface Grid2DObject {
    /**
     * 起始横坐标位置，以 1 为起点
     */
    x: number;
    /**
     * 起始纵坐标位置，以 1 为起点
     */
    y: number;
    /**
     * 宽度，跨几列
     */
    w: number;
    /**
     * 高度，跨几行
     */
    h: number;
    /**
     * 宽度，会影响起始位置对应那一列的宽度
     */
    width?: number | string;
    /**
     * 高度，会影响起始位置那一行的高度，设置为 auto 就会自适应
     */
    height?: number | string;
    /**
     * 水平展示方式，用于内容宽度比 grid 小的情况，默认是 auto 自动撑满
     */
    align?: 'left' | 'right' | 'center' | 'auto';
    /**
     * 垂直展示方式，用于内容高度比 grid 小的情况，默认是 auto 自动撑满
     */
    valign?: 'top' | 'bottom' | 'middle' | 'auto';
    /**
     * 每个格子最外层容器的 className
     */
    gridClassName?: string;
}
export type Grid2DItem = Grid2DObject & SchemaObject;