Lime Web Components API Documentation - v7.4.0
    Preparing search index...

    Interface ViewLayoutConfigurationComponent<T>Beta

    Interface for components that render a configuration UI for a ViewLayout

    This interface defines the contract for layout configuration components, which allow users to customize how a view displays data. A configuration component receives the current layout, shows controls for the settings it supports, and emits changeLayout with the whole updated layout when the user changes something. The parent replaces its layout state with what the event carries.

    import {
        ViewLayout,
        ViewLayoutConfigurationComponent,
    } from '@limetech/lime-web-components';

    type ListDisplayOptions = {
        displayMode: 'list' | 'grid' | 'compact';
        groupBy?: string;
        showThumbnails: boolean;
    };

    class DisplayConfiguration
        implements ViewLayoutConfigurationComponent<ListDisplayOptions>
    {
        public layout: ViewLayout<ListDisplayOptions>;
        public changeLayout: ViewLayoutConfigurationComponent<ListDisplayOptions>['changeLayout'];

        private setDisplayMode(displayMode: ListDisplayOptions['displayMode']) {
            this.changeLayout.emit({ ...this.layout, displayMode });
        }

        private toggleThumbnails() {
            this.changeLayout.emit({
                ...this.layout,
                showThumbnails: !this.layout.showThumbnails,
            });
        }

        private groupBy(field: string | undefined) {
            this.changeLayout.emit({ ...this.layout, groupBy: field });
        }
    }

    import { ViewLayout } from '@limetech/lime-web-components';

    type ListDisplayOptions = {
        displayMode: 'list' | 'grid';
    };

    let layout: ViewLayout<ListDisplayOptions> = {
        order: [{ name: 'name', direction: 'ASC' }],
        displayMode: 'list',
    };

    // The configuration component hands the whole updated layout back on
    // `detail`, so the view replaces its state rather than patching it.
    const handleChangeLayout = (
        event: CustomEvent<ViewLayout<ListDisplayOptions>>
    ) => {
        layout = event.detail;
    };
    interface ViewLayoutConfigurationComponent<
        T extends Record<string, unknown> = Record<string, unknown>,
    > {
        changeLayout: {
            emit: (data?: ViewLayout<T>) => CustomEvent<ViewLayout<T>>;
        };
        layout: ViewLayout<T>;
    }

    Type Parameters

    • T extends Record<string, unknown> = Record<string, unknown>
    Index

    Properties

    changeLayout layout

    Properties

    changeLayout: { emit: (data?: ViewLayout<T>) => CustomEvent<ViewLayout<T>> }

    Event emitter to emit layout change events

    When the user modifies layout settings, emit a new layout object through this event emitter. The parent component will listen for these events and update its layout state accordingly.

    The emitter's emit() method returns a CustomEvent that can be cancelled by the parent if needed.

    import {
        ViewLayout,
        ViewLayoutConfigurationComponent,
    } from '@limetech/lime-web-components';

    class SortConfiguration implements ViewLayoutConfigurationComponent {
        // The parent supplies the current layout and listens for the event.
        public layout: ViewLayout;
        public changeLayout: ViewLayoutConfigurationComponent['changeLayout'];

        private sortBy(name: string, direction: 'ASC' | 'DESC') {
            this.changeLayout.emit({
                ...this.layout,
                order: [{ name, direction }],
            });
        }
    }
    layout: ViewLayout<T>

    The current layout configuration

    This property receives the current layout state from the parent component. The configuration UI should reflect these values and allow users to modify them.

    Settings

    Member Visibility

    On This Page

    Properties