@univerjs-pro/bases-ui 0.25.0-insiders.20260608-e4336f7

package/lib/types/components/BaseIcons.d.ts

@@ -0,0 +1,19 @@
+import type { FieldType, ViewType } from '@univerjs/core';
+import type { ReactElement } from 'react';
+export type BaseRowHeightPreset = 'short' | 'medium' | 'tall' | 'extraTall';
+export declare function BasePlusIcon(): ReactElement;
+export declare function BaseChevronDownIcon(): ReactElement;
+export declare function BaseCloseIcon(): ReactElement;
+export declare function BaseViewIcon(props: {
+    type: ViewType;
+}): ReactElement;
+export declare function BaseToolbarIcon(props: {
+    name: 'record' | 'fields' | 'settings' | 'filter' | 'group' | 'sort' | 'rowHeight' | 'color' | 'undo' | 'redo';
+}): ReactElement;
+export declare function BaseConditionalColorIcon(): ReactElement;
+export declare function BaseRowHeightOptionIcon(props: {
+    value: BaseRowHeightPreset;
+}): ReactElement;
+export declare function BaseFieldTypeIcon(props: {
+    type: FieldType;
+}): ReactElement;

package/lib/types/components/BaseMenus.d.ts

@@ -0,0 +1,593 @@
+import type { FieldType, FilterConfig, GroupConfig, IViewSnapshot, Rect, SortConfig, ViewType } from '@univerjs/core';
+import type { CSSProperties, MouseEvent, ReactElement, ReactNode, PointerEvent as ReactPointerEvent } from 'react';
+export declare const BASE_CONDITIONAL_COLORING_MENU_MIN_WIDTH = 640;
+export declare const BASE_CONDITIONAL_COLORING_MENU_MAX_WIDTH = 860;
+export declare const BASE_FIELD_CONFIG_PANEL_WIDTH = 360;
+export interface IBaseMenuLabels {
+    addRecordTitle: string;
+    addBlankRecord: string;
+    addFiveBlankRecords: string;
+    createViewTitle: string;
+    createViewDescription: string;
+    viewSettingsTitle: string;
+    viewName: string;
+    duplicateView: string;
+    deleteView: string;
+    filterTitle: string;
+    value: string;
+    newCondition: string;
+    groupTitle: string;
+    chooseField: string;
+    sortTitle: string;
+    rowHeightTitle: string;
+    rowHeightShort: string;
+    rowHeightMedium: string;
+    rowHeightTall: string;
+    rowHeightExtraTall: string;
+    conditionalColoringTitle: string;
+    conditionalColoringHelp: string;
+    conditionalColoringNew: string;
+    conditionalColoringSmart: string;
+    conditionalColorTitle: string;
+    conditionalCustomColor: string;
+    conditionalTargetCell: string;
+    conditionalTargetRow: string;
+    conditionalTargetColumn: string;
+    conditionalEnterValue: string;
+    conditionalExactDate: string;
+    conditionalToday: string;
+    conditionalTomorrow: string;
+    conditionalYesterday: string;
+    conditionalThisWeek: string;
+    conditionalLastWeek: string;
+    conditionalThisMonth: string;
+    conditionalLastMonth: string;
+    conditionalPast7: string;
+    conditionalNext7: string;
+    conditionalPast30: string;
+    conditionalNext30: string;
+    conditionalChecked: string;
+    conditionalUnchecked: string;
+    statusDoneTitle: string;
+    statusDoneDescription: string;
+    statusBlockedTitle: string;
+    statusBlockedDescription: string;
+    search: string;
+    newField: string;
+    newBadge: string;
+    fieldTitle: string;
+    fieldTitlePlaceholder: string;
+    fieldType: string;
+    fieldTypeSectionBasic: string;
+    fieldTypeSectionBusiness: string;
+    fieldTypeSectionAdvanced: string;
+    defaultValue: string;
+    defaultSettingsReady: string;
+    numberFormat: string;
+    currencyFormat: string;
+    dateFormat: string;
+    dateMonthNameExample: string;
+    decimalPlaces: string;
+    example: string;
+    icon: string;
+    scale: string;
+    options: string;
+    referenceOptions: string;
+    referenceOptionsHelp: string;
+    addOption: string;
+    addOptionPlaceholder: string;
+    removeOption: string;
+    selectOption: string;
+    option: string;
+    numberingType: string;
+    autoIncrement: string;
+    custom: string;
+    customizeNumbering: string;
+    preview: string;
+    incremental: string;
+    digits: string;
+    start: string;
+    step: string;
+    dateCreated: string;
+    customText: string;
+    showField: string;
+    hideField: string;
+    lockedField: string;
+    moreFieldActions: string;
+    edit: string;
+    addFieldToGroup: string;
+    delete: string;
+    editField: string;
+    editFieldDescription: string;
+    duplicateField: string;
+    insertLeft: string;
+    insertRight: string;
+    freezeToField: string;
+    sortAsc: string;
+    sortDesc: string;
+    groupByField: (fieldName: string) => string;
+    filterByField: (fieldName: string) => string;
+    createKanbanWithField: (fieldName: string) => string;
+    deleteField: string;
+    cancel: string;
+    clear: string;
+    confirm: string;
+    apply: string;
+    save: string;
+    formulaLocale: string;
+    currencySymbol: string;
+    thousandsSeparator: string;
+    showThousandsSeparator: string;
+    largeNumberAbbreviation: string;
+    allowNegativeNumbers: string;
+    includeTime: string;
+    timeFormat: string;
+    hour24: string;
+    hour12: string;
+    none: string;
+    recordCreationTime: string;
+    selectSpecificDate: string;
+    percent: string;
+    number: string;
+    color: string;
+    style: string;
+    progressColor: (color: string) => string;
+    customProgressBar: string;
+    startValue: string;
+    targetValue: string;
+    allowMultipleMembers: string;
+    allowMultipleGroups: string;
+    defaultProviderMock: (count: number, entity: string) => string;
+    defaultProviderExternal: (entity: string) => string;
+    linkPlaceholder: string;
+    phonePlaceholder: string;
+    searchGroups: string;
+    selectGroups: string;
+    noProviderGroupData: string;
+    noMatchingGroups: string;
+    searchMembers: string;
+    selectMembers: string;
+    noProviderData: string;
+    noMatchingMembers: string;
+    noFormulaConfigured: string;
+    editFormula: string;
+    closeFormulaEditor: string;
+    formulaHint: string;
+    formulaReferenceError: string;
+    formulaTables: string;
+    formulaFields: string;
+    formulaFunctions: string;
+    formulaFunction: string;
+    formulaParameters: string;
+    formulaOptional: string;
+    formulaRepeat: string;
+    formulaExample: string;
+    currentTable: string;
+    currentTableField: string;
+    fieldFromTable: (tableName: string) => string;
+    referenceCurrentField: (fieldName: string) => string;
+    referenceTableField: (fieldName: string, tableName: string) => string;
+    fieldNameColumn: string;
+    fieldTypeColumn: string;
+    insertColumn: string;
+    insert: string;
+    gridContextInsert: string;
+    gridContextAbove: string;
+    gridContextBelow: string;
+    gridContextOpenRecord: string;
+    gridContextClearContent: string;
+    gridContextDeleteRecord: string;
+    gridContextDeleteRecords: string;
+    formulaNumberFormatSheetPattern: string;
+    formulaFormatType: string;
+    formulaCustomPattern: string;
+    formulaFormatGeneral: string;
+    formulaFormatNumber: string;
+    formulaFormatCurrency: string;
+    formulaFormatAccounting: string;
+    formulaFormatPercent: string;
+    formulaFormatDateTime: string;
+    customizeKanban: string;
+    customizeCard: string;
+    eventSettings: string;
+    calendarViewSettings: string;
+    calendarViewSettingsTitle: string;
+    ganttViewSettings: string;
+    fieldsCount: (count: number) => string;
+    cover: string;
+    cardLayout: string;
+    normal: string;
+    normalDescription: string;
+    compose: string;
+    composeDescription: string;
+    cardSize: string;
+    small: string;
+    medium: string;
+    large: string;
+    showFieldNames: string;
+    startDate: string;
+    endDate: string;
+    title: string;
+    timeslotSize: string;
+    timeslotShort: string;
+    timeslotMedium: string;
+    timeslotLong: string;
+    displayColor: string;
+    customizeColor: string;
+    alignWithRecords: string;
+    timeZone: string;
+    localTimeZone: (timeZone: string) => string;
+    conditionalColor: string;
+    conditionsApplied: (count: number) => string;
+    addCondition: string;
+    calculateWorkingDaysOnly: string;
+    customWorkingDays: string;
+    customWorkingDaysHelp: string;
+    notSet: string;
+    settings: string;
+    setWorkingDays: string;
+    setWorkingDaysDescription: string;
+    closeWorkingDaysSettings: string;
+    addWorkingDays: string;
+    holidayName: string;
+    dayOff: string;
+    working: string;
+    add: string;
+    removeWorkingDayException: string;
+    legalWorkingDays: string;
+    legalWorkingDaysHelp: string;
+    mon: string;
+    tue: string;
+    wed: string;
+    thu: string;
+    fri: string;
+    sat: string;
+    sun: string;
+    monFri: string;
+    days: (count: number) => string;
+    workingDaysSummary: (days: string, exceptionCount: number) => string;
+    calendarColor: string;
+    editGroupTitle: string;
+    groupByFieldFallback: string;
+    operatorIs: string;
+    operatorIsNot: string;
+    operatorContains: string;
+    operatorNotContains: string;
+    operatorIsEmpty: string;
+    operatorIsNotEmpty: string;
+    operatorGreaterThan: string;
+    operatorLessThan: string;
+    operatorBefore: string;
+    operatorAfter: string;
+    addDescriptionPlaceholder: string;
+    numberingDescription: string;
+    kanbanGroup: string;
+    required: string;
+    kanbanGroupHelp: string;
+    optionColor: string;
+    separatorLocal: string;
+    separatorCommaPeriod: string;
+    separatorPeriodComma: string;
+    separatorSpaceComma: string;
+    separatorSpacePeriod: string;
+    direction: string;
+    groupFirstToLast: string;
+    groupLastToFirst: string;
+    checkboxIconCheck: string;
+    checkboxIconCross: string;
+    checkboxIconStar: string;
+    checkboxIconHeart: string;
+    checkboxIconThumb: string;
+    checkboxIconFlag: string;
+    checkboxIconDot: string;
+    ratingIconStar: string;
+    ratingIconHeart: string;
+    ratingIconThumb: string;
+    ratingIconFire: string;
+    ratingIconSmile: string;
+    ratingIconLightning: string;
+    ratingIconMedal: string;
+    increment: string;
+    decrement: string;
+}
+export declare const BASE_MENU_DEFAULT_LABELS: IBaseMenuLabels;
+export type BaseFloatingOverlayAnchor = HTMLElement | {
+    getBoundingClientRect: () => DOMRect | Rect;
+    contains?: (target: Node | null) => boolean;
+};
+export interface IBaseFloatingOverlayOptions {
+    width?: number;
+    height?: number;
+    gap?: number;
+    margin?: number;
+    dispose?: (element: HTMLElement) => void;
+}
+export interface IBaseFloatingPositionOptions {
+    width: number;
+    height?: number;
+    gap?: number;
+    margin?: number;
+    minHeight?: number;
+    viewportWidth?: number;
+    viewportHeight?: number;
+}
+export interface IBaseFloatingPosition {
+    left: number;
+    top: number;
+    width: number;
+    maxHeight: number;
+    placementY: 'top' | 'bottom';
+    placementX: 'left' | 'right' | 'clamped';
+}
+export declare class BaseFloatingOverlayController {
+    private readonly _root;
+    private _panel;
+    private _outsideHandler;
+    private _disposePanel;
+    constructor(_root: HTMLElement);
+    openAnchored(anchor: BaseFloatingOverlayAnchor, mount: (root: HTMLElement) => HTMLElement, options?: IBaseFloatingOverlayOptions): HTMLElement;
+    close(): void;
+}
+export declare function getBaseFloatingPosition(anchor: Pick<DOMRect, 'left' | 'top' | 'width' | 'height'> & {
+    right?: number;
+    bottom?: number;
+}, options: IBaseFloatingPositionOptions): IBaseFloatingPosition;
+export interface IBaseMenuFieldItem {
+    id: string;
+    name: string;
+    type: FieldType;
+    config?: Record<string, unknown>;
+    hidden?: boolean;
+    readonly?: boolean;
+    system?: boolean;
+    primary?: boolean;
+}
+export interface IBaseFormulaTableItem {
+    id: string;
+    name: string;
+    current?: boolean;
+    fields: IBaseMenuFieldItem[];
+}
+export type BaseConditionalColorTarget = 'cell' | 'row' | 'column';
+export type BaseConditionalColorOperator = 'is' | 'isNot' | 'contains' | 'notContains' | 'isEmpty' | 'isNotEmpty' | 'greaterThan' | 'lessThan' | 'before' | 'after';
+export type BaseConditionalDateMode = 'exact' | 'today' | 'tomorrow' | 'yesterday' | 'thisWeek' | 'lastWeek' | 'thisMonth' | 'lastMonth' | 'past7' | 'next7' | 'past30' | 'next30';
+export interface IBaseConditionalColorRule {
+    id: string;
+    color: string;
+    target: BaseConditionalColorTarget;
+    fieldId: string;
+    operator: BaseConditionalColorOperator;
+    operand?: unknown;
+    dateMode?: BaseConditionalDateMode;
+}
+export interface IBaseMenuOption {
+    value: string;
+    label: string;
+    field?: IBaseMenuFieldItem;
+}
+interface BaseSelectOption {
+    id: string;
+    name: string;
+    color: string;
+}
+export interface IBaseMenuViewItem {
+    type: ViewType;
+    label: string;
+    description: string;
+}
+export interface IBaseFieldTypeCatalogItem {
+    type: FieldType;
+    name: string;
+    section: 'Basic' | 'Business' | 'Advanced';
+    isNew?: boolean;
+    enabled?: boolean;
+}
+export interface IBaseFieldConfigSubmitInput {
+    name: string;
+    type: FieldType;
+    config: Record<string, unknown>;
+    defaultValue: unknown;
+}
+export interface IBasePeopleOption {
+    id: string;
+    name: string;
+    avatar?: string;
+}
+export interface IBaseFloatingMenuProps {
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+    ['data-u-comp']?: string;
+    onMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
+    onPointerDown?: (event: ReactPointerEvent<HTMLDivElement>) => void;
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+}
+export declare function BaseFloatingMenu(props: IBaseFloatingMenuProps): ReactElement;
+export declare function BaseFieldConfigPanel(props: {
+    catalog: IBaseFieldTypeCatalogItem[];
+    fields?: IBaseMenuFieldItem[];
+    formulaTables?: IBaseFormulaTableItem[];
+    personOptions?: IBasePeopleOption[];
+    groupOptions?: IBasePeopleOption[];
+    existingField?: {
+        id?: string;
+        name: string;
+        type: FieldType;
+        config?: Record<string, unknown>;
+        defaultValue?: unknown;
+    } | null;
+    initialName?: string;
+    insertLabel?: string;
+    labels?: Partial<IBaseMenuLabels>;
+    maxHeight?: CSSProperties['maxHeight'];
+    onSubmit: (input: IBaseFieldConfigSubmitInput) => void;
+    onCancel: () => void;
+}): ReactElement;
+export declare function createDefaultBaseFieldConfig(type: FieldType): Record<string, unknown>;
+export declare function getDefaultBaseFieldValue(type: FieldType, config: Record<string, unknown>): unknown;
+export declare function supportsBaseFieldDefaultValue(type: FieldType): boolean;
+export declare function normalizeBaseMenuOptions(options: unknown, type: FieldType, useFallback?: boolean): BaseSelectOption[];
+export declare function AddRecordMenu(props: {
+    labels?: Partial<IBaseMenuLabels>;
+    onAdd: (count: number) => void;
+}): ReactElement;
+export declare function AddViewMenu(props: {
+    labels?: Partial<IBaseMenuLabels>;
+    views: IBaseMenuViewItem[];
+    onCreate: (type: ViewType) => void;
+}): ReactElement;
+export declare function ViewSettingsMenu(props: {
+    labels?: Partial<IBaseMenuLabels>;
+    view: IViewSnapshot;
+    onRename: (name: string) => void;
+    onDuplicate: () => void;
+    onDelete: () => void;
+    onCancel: () => void;
+}): ReactElement;
+export declare function FilterMenu(props: {
+    labels?: Partial<IBaseMenuLabels>;
+    fields: IBaseMenuFieldItem[];
+    filter?: FilterConfig | null;
+    onApply: (filter: FilterConfig) => void;
+    onClear: () => void;
+}): ReactElement;
+export declare function GroupMenu(props: {
+    labels?: Partial<IBaseMenuLabels>;
+    fields: IBaseMenuFieldItem[];
+    groups?: GroupConfig[];
+    isGroupable: (field: IBaseMenuFieldItem) => boolean;
+    onApply: (groups: GroupConfig[]) => void;
+    onClear: () => void;
+}): ReactElement;
+export declare function KanbanGroupMenu(props: {
+    labels?: Partial<IBaseMenuLabels>;
+    fields: IBaseMenuFieldItem[];
+    groupFieldId: string;
+    onApply: (fieldId: string) => void;
+}): ReactElement;
+export declare function CustomizeKanbanMenu(props: {
+    labels?: Partial<IBaseMenuLabels>;
+    fields: IBaseMenuFieldItem[];
+    view: IViewSnapshot;
+    onUpdate: (patch: Record<string, unknown>) => void;
+    onEditField: (fieldId: string) => void;
+    onNewField?: () => void;
+    title?: string;
+    rootClassName?: string;
+    showCardSize?: boolean;
+}): ReactElement;
+export declare function CustomizeGalleryMenu(props: {
+    labels?: Partial<IBaseMenuLabels>;
+    fields: IBaseMenuFieldItem[];
+    view: IViewSnapshot;
+    onUpdate: (patch: Record<string, unknown>) => void;
+    onEditField: (fieldId: string) => void;
+    onNewField: () => void;
+}): ReactElement;
+export declare function CalendarEventSettingsMenu(props: {
+    labels?: Partial<IBaseMenuLabels>;
+    fields: IBaseMenuFieldItem[];
+    view: IViewSnapshot;
+    onUpdate: (patch: Record<string, unknown>) => void;
+    onEditField: (fieldId: string) => void;
+    onNewField: () => void;
+}): ReactElement;
+export declare function CalendarViewSettingsMenu(props: {
+    labels?: Partial<IBaseMenuLabels>;
+    fields: IBaseMenuFieldItem[];
+    view: IViewSnapshot;
+    onUpdate: (patch: Record<string, unknown>) => void;
+}): ReactElement;
+export declare function GanttViewSettingsMenu(props: {
+    fields: IBaseMenuFieldItem[];
+    view: IViewSnapshot;
+    labels?: Partial<IBaseMenuLabels>;
+    onUpdate: (patch: Record<string, unknown>) => void;
+}): ReactElement;
+export declare function KanbanColumnColorMenu(props: {
+    labels?: Partial<IBaseMenuLabels>;
+    color?: string;
+    onChange: (color: string) => void;
+}): ReactElement;
+export declare function KanbanColumnTitleMenu(props: {
+    labels?: Partial<IBaseMenuLabels>;
+    title: string;
+    onSave: (title: string) => void;
+    onCancel: () => void;
+}): ReactElement;
+export declare function SortMenu(props: {
+    labels?: Partial<IBaseMenuLabels>;
+    fields: IBaseMenuFieldItem[];
+    sort?: SortConfig[];
+    onApply: (sort: SortConfig[]) => void;
+    onClear: () => void;
+}): ReactElement;
+export declare function RowHeightMenu(props: {
+    labels?: Partial<IBaseMenuLabels>;
+    current?: string;
+    onChange: (value: 'short' | 'medium' | 'tall' | 'extraTall') => void;
+}): ReactElement;
+export declare function ConditionalColoringMenu(props: {
+    labels?: Partial<IBaseMenuLabels>;
+    fields?: IBaseMenuFieldItem[];
+    rules?: IBaseConditionalColorRule[];
+    activeValue?: string;
+    onApply?: (value: string) => void;
+    onApplyRules?: (rules: IBaseConditionalColorRule[]) => void;
+    onClear: () => void;
+}): ReactElement;
+export declare function FieldStatsMenu(props: {
+    options: Array<{
+        type: string;
+        label: string;
+    }>;
+    currentType: string;
+    onSelect: (type: string) => void;
+}): ReactElement;
+export declare function GridContextMenu(props: {
+    labels?: Partial<IBaseMenuLabels>;
+    mode?: 'cell' | 'range';
+    recordId?: string;
+    recordIds?: string[];
+    onInsertAbove?: (count: number) => void;
+    onInsertBelow?: (count: number) => void;
+    onOpenRecord?: (recordId: string) => void;
+    onClearContent?: () => void;
+    onDeleteRecords?: (recordIds: string[]) => void;
+}): ReactElement;
+export declare function CustomizeFieldMenu(props: {
+    labels?: Partial<IBaseMenuLabels>;
+    fields: IBaseMenuFieldItem[];
+    showDragHandles?: boolean;
+    onToggleVisible: (fieldId: string) => void;
+    onEdit: (fieldId: string) => void;
+    onMore?: (fieldId: string, anchor: HTMLElement) => void;
+    onMoveField?: (fieldId: string, target: {
+        beforeFieldId?: string;
+        afterFieldId?: string;
+    }) => void;
+    onAddFieldToGroup?: (fieldId: string) => void;
+    onDelete?: (fieldId: string) => void;
+    onNewField: () => void;
+}): ReactElement;
+export declare function FieldRowActionMenu(props: {
+    labels?: Partial<IBaseMenuLabels>;
+    onEdit: () => void;
+    onGroup: () => void;
+    onDelete: () => void;
+}): ReactElement;
+export type FieldHeaderMenuAction = 'edit' | 'description' | 'conditional' | 'duplicate' | 'hide' | 'insert-left' | 'insert-right' | 'freeze' | 'sort-asc' | 'sort-desc' | 'group' | 'filter' | 'kanban' | 'delete';
+export declare function BaseFieldDescriptionPanel(props: {
+    labels?: Partial<IBaseMenuLabels>;
+    fieldName: string;
+    value?: string;
+    onSave: (value: string) => void;
+    onCancel: () => void;
+}): ReactElement;
+export declare function FieldHeaderMenu(props: {
+    labels?: Partial<IBaseMenuLabels>;
+    fieldName: string;
+    primary?: boolean;
+    onAction: (action: FieldHeaderMenuAction) => void;
+}): ReactElement;
+export {};

package/lib/types/components/BaseNumberInput.d.ts

@@ -0,0 +1,14 @@
+export interface IBaseNumberInputProps {
+    value: number | null;
+    min?: number;
+    max?: number;
+    step?: number;
+    allowEmpty?: boolean;
+    showControls?: boolean;
+    className?: string;
+    inputClassName?: string;
+    incrementLabel?: string;
+    decrementLabel?: string;
+    onChange: (value: number | null) => void;
+}
+export declare const BaseNumberInput: import("react").ForwardRefExoticComponent<IBaseNumberInputProps & import("react").RefAttributes<HTMLInputElement>>;