@zeedhi/vuetify 3.0.6 → 3.0.8

package/dist/components/tek-grid/columns-button/TekGridColumnsOptionsModal.js

@@ -0,0 +1,501 @@
+import { ModalService } from '@zeedhi/common';
+import { Loader } from '@zeedhi/core';
+import TekGridColumnsOptionsController from './TekGridColumnsOptionsController';
+export default class TekGridColumnsOptionsModal {
+    static controllerName = `TekGridColumnsOptionsController_${new Date().getTime()}`;
+    static modalDef = {
+        name: 'tekGridColumnsOptionsModal',
+        title: '',
+        persistent: true,
+        grid: {
+            sm: 11,
+            md: 9,
+        },
+        children: [
+            {
+                name: 'tekGridColumnsOptionsCloseButtonContainer',
+                component: 'ZdContainer',
+                cssClass: 'zd-pa-0 zd-mb-6 zd-display-flex',
+                children: [
+                    {
+                        name: 'tekGridColumnsOptionsTitleText',
+                        component: 'ZdText',
+                        text: 'TEKGRID_COLUMNS_OPTIONS',
+                        cssClass: 'zd-theme-font-title',
+                    },
+                    {
+                        name: 'tekGridColumnsOptionsFilterSpacer',
+                        component: 'VSpacer',
+                    },
+                    {
+                        name: 'tekGridColumnsOptionsCloseModalButton',
+                        component: 'ZdModalCloseButton',
+                        small: true,
+                        modalName: 'tekGridColumnsOptionsModal',
+                    },
+                ],
+            },
+            {
+                name: 'tekGridColumnsOptionsSearchRow',
+                component: 'ZdRow',
+                children: [
+                    {
+                        name: 'tekGridColumnsOptionsSearchCol',
+                        component: 'ZdCol',
+                        cols: 12,
+                        children: [
+                            {
+                                name: 'tekGridColumnsOptionsSearchInput',
+                                component: 'ZdTextInput',
+                                showLabel: false,
+                                showHelper: false,
+                                placeholder: 'SEARCH',
+                                appendIcon: 'magnify',
+                                value: `{{${TekGridColumnsOptionsModal.controllerName}.searchValue}}`,
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                name: 'tekGridColumnsOptionsFixedRow',
+                component: 'ZdRow',
+                children: [
+                    {
+                        name: 'tekGridColumnsOptionsFixedCol',
+                        component: 'ZdCol',
+                        cols: 12,
+                        cssClass: 'tek-grid-column-option-container-col',
+                        children: [
+                            {
+                                name: 'tekGridColumnsOptionsFixedLabel',
+                                component: 'ZdText',
+                                text: 'TEKGRID_FIXED_COLUMNS',
+                                cssClass: 'tek-grid-column-option-label',
+                            },
+                            {
+                                name: 'tekGridColumnsOptionsFixedSelectAll',
+                                component: 'ZdText',
+                                text: 'TEKGRID_SELECT_ALL',
+                                cssClass: 'tek-grid-column-option-select-all',
+                                events: {
+                                    click: `{{${TekGridColumnsOptionsModal.controllerName}.selectAll}}`,
+                                },
+                            },
+                            {
+                                name: 'tekGridColumnsOptionsFixedDropHere',
+                                component: 'ZdText',
+                                text: 'TEKGRID_DROP_COLUMNS',
+                                cssClass: 'tek-grid-column-option-drop-here',
+                                isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoFixedColumns}}`,
+                            },
+                            {
+                                name: 'tekGridColumnsOptionsFixedColumns',
+                                component: 'TekIterableComponentRender',
+                                id: 'tekGridColumnsOptionsFixedColumns',
+                                cssClass: 'tek-grid-column-option-container',
+                                datasource: {
+                                    uniqueKey: 'name',
+                                    data: `{{${TekGridColumnsOptionsModal.controllerName}.fixedColumnData}}`,
+                                },
+                                noDataSlot: [],
+                                events: {
+                                    onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.columnContainerMounted}}`,
+                                },
+                                componentMetadata: {
+                                    name: 'tekGridColumnsOptionsFixedColumn_<<row.name>>',
+                                    component: 'ZdTag',
+                                    columnName: '<<row.name>>',
+                                    cssClass: 'tek-grid-column-option-box zd-elevation-1 ' + 'tek-grid-column-option-selected-<<row.selected>>',
+                                    tag: 'div',
+                                    children: [
+                                        {
+                                            name: 'tekGridColumnsOptionsFixedColumnText_<<row.name>>',
+                                            columnName: '<<row.name>>',
+                                            component: 'ZdText',
+                                            text: '<<row.label>><<row.aggregationText>>',
+                                        },
+                                        {
+                                            name: 'tekGridColumnsOptionsFixedColumnRemove_<<row.name>>',
+                                            columnName: '<<row.name>>',
+                                            component: 'ZdIcon',
+                                            iconName: 'close',
+                                            events: {
+                                                click: `{{${TekGridColumnsOptionsModal.controllerName}.columnFixedRemoveClick}}`,
+                                            },
+                                        },
+                                    ],
+                                    events: {
+                                        click: `{{${TekGridColumnsOptionsModal.controllerName}.columnClick}}`,
+                                    },
+                                },
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                name: 'tekGridColumnsOptionsVisibleRow',
+                component: 'ZdRow',
+                children: [
+                    {
+                        name: 'tekGridColumnsOptionsVisibleCol',
+                        component: 'ZdCol',
+                        cols: 12,
+                        cssClass: 'tek-grid-column-option-container-col',
+                        children: [
+                            {
+                                name: 'tekGridColumnsOptionsVisibleLabel',
+                                component: 'ZdText',
+                                text: 'TEKGRID_VISIBLE_COLUMNS',
+                                cssClass: 'tek-grid-column-option-label',
+                            },
+                            {
+                                name: 'tekGridColumnsOptionsVisibleSelectAll',
+                                component: 'ZdText',
+                                text: 'TEKGRID_SELECT_ALL',
+                                cssClass: 'tek-grid-column-option-select-all',
+                                events: {
+                                    click: `{{${TekGridColumnsOptionsModal.controllerName}.selectAll}}`,
+                                },
+                            },
+                            {
+                                name: 'tekGridColumnsOptionsVisibleDropHere',
+                                component: 'ZdText',
+                                text: 'TEKGRID_DROP_COLUMNS',
+                                cssClass: 'tek-grid-column-option-drop-here',
+                                isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoVisibleColumns}}`,
+                            },
+                            {
+                                name: 'tekGridColumnsOptionsVisibleColumns',
+                                component: 'TekIterableComponentRender',
+                                id: 'tekGridColumnsOptionsVisibleColumns',
+                                cssClass: 'tek-grid-column-option-container',
+                                datasource: {
+                                    uniqueKey: 'name',
+                                    data: `{{${TekGridColumnsOptionsModal.controllerName}.visibleColumnData}}`,
+                                },
+                                noDataSlot: [],
+                                events: {
+                                    onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.columnContainerMounted}}`,
+                                },
+                                componentMetadata: {
+                                    name: 'tekGridColumnsOptionsVisibleColumn_<<row.name>>',
+                                    component: 'ZdTag',
+                                    columnName: '<<row.name>>',
+                                    cssClass: 'tek-grid-column-option-box zd-elevation-1 ' + 'tek-grid-column-option-selected-<<row.selected>>',
+                                    tag: 'div',
+                                    children: [
+                                        {
+                                            name: 'tekGridColumnsOptionsVisibleColumnText_<<row.name>>',
+                                            columnName: '<<row.name>>',
+                                            component: 'ZdText',
+                                            text: '<<row.label>><<row.aggregationText>>',
+                                        },
+                                        {
+                                            name: 'tekGridColumnsOptionsVisibleColumnRemove_<<row.name>>',
+                                            columnName: '<<row.name>>',
+                                            component: 'ZdIcon',
+                                            iconName: 'close',
+                                            events: {
+                                                click: `{{${TekGridColumnsOptionsModal.controllerName}.columnVisibleRemoveClick}}`,
+                                            },
+                                        },
+                                    ],
+                                    events: {
+                                        click: `{{${TekGridColumnsOptionsModal.controllerName}.columnClick}}`,
+                                    },
+                                },
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                name: 'tekGridColumnsOptionsGroupedRow',
+                component: 'ZdRow',
+                isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.showGroups}}`,
+                children: [
+                    {
+                        name: 'tekGridColumnsOptionsGroupedCol',
+                        component: 'ZdCol',
+                        cssClass: 'tek-grid-column-option-container-col',
+                        cols: 12,
+                        children: [
+                            {
+                                name: 'tekGridColumnsOptionsGroupedLabel',
+                                component: 'ZdText',
+                                text: 'TEKGRID_GROUPED_COLUMNS',
+                                cssClass: 'tek-grid-column-option-label',
+                            },
+                            {
+                                name: 'tekGridColumnsOptionsGroupedSelectAll',
+                                component: 'ZdText',
+                                text: 'TEKGRID_SELECT_ALL',
+                                cssClass: 'tek-grid-column-option-select-all',
+                                events: {
+                                    click: `{{${TekGridColumnsOptionsModal.controllerName}.selectAll}}`,
+                                },
+                            },
+                            {
+                                name: 'tekGridColumnsOptionsGroupedDropHere',
+                                component: 'ZdText',
+                                text: 'TEKGRID_DROP_COLUMNS',
+                                cssClass: 'tek-grid-column-option-drop-here',
+                                isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoGroupedColumns}}`,
+                            },
+                            {
+                                name: 'tekGridColumnsOptionsGroupedColumns',
+                                component: 'TekIterableComponentRender',
+                                id: 'tekGridColumnsOptionsGroupedColumns',
+                                cssClass: 'tek-grid-column-option-container',
+                                datasource: {
+                                    uniqueKey: 'name',
+                                    data: `{{${TekGridColumnsOptionsModal.controllerName}.groupedColumnData}}`,
+                                },
+                                noDataSlot: [],
+                                events: {
+                                    onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.columnContainerMounted}}`,
+                                },
+                                componentMetadata: {
+                                    name: 'tekGridColumnsOptionsGroupedColumn_<<row.name>>',
+                                    component: 'ZdTag',
+                                    columnName: '<<row.name>>',
+                                    cssClass: 'tek-grid-column-option-box zd-elevation-1 ' + 'tek-grid-column-option-selected-<<row.selected>>',
+                                    tag: 'div',
+                                    children: [
+                                        {
+                                            name: 'tekGridColumnsOptionsGroupedColumnText_<<row.name>>',
+                                            columnName: '<<row.name>>',
+                                            component: 'ZdText',
+                                            text: '<<row.label>><<row.aggregationText>>',
+                                        },
+                                        {
+                                            name: 'tekGridColumnsOptionsGroupedColumnRemove_<<row.name>>',
+                                            columnName: '<<row.name>>',
+                                            component: 'ZdIcon',
+                                            iconName: 'close',
+                                            events: {
+                                                click: `{{${TekGridColumnsOptionsModal.controllerName}.columnGroupedRemoveClick}}`,
+                                            },
+                                        },
+                                    ],
+                                    events: {
+                                        click: `{{${TekGridColumnsOptionsModal.controllerName}.columnClick}}`,
+                                    },
+                                },
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                name: 'tekGridColumnsOptionsOtherRow',
+                component: 'ZdRow',
+                children: [
+                    {
+                        name: 'tekGridColumnsOptionsOtherCol',
+                        component: 'ZdCol',
+                        cssClass: 'tek-grid-column-option-container-col',
+                        cols: 12,
+                        children: [
+                            {
+                                name: 'tekGridColumnsOptionsOtherLabel',
+                                component: 'ZdText',
+                                text: 'TEKGRID_OTHER_COLUMNS',
+                                cssClass: 'tek-grid-column-option-label',
+                            },
+                            {
+                                name: 'tekGridColumnsOptionsOtherSelectAll',
+                                component: 'ZdText',
+                                text: 'TEKGRID_SELECT_ALL',
+                                cssClass: 'tek-grid-column-option-select-all',
+                                events: {
+                                    click: `{{${TekGridColumnsOptionsModal.controllerName}.selectAll}}`,
+                                },
+                            },
+                            {
+                                name: 'tekGridColumnsOptionsOtherDropHere',
+                                component: 'ZdText',
+                                text: 'TEKGRID_DROP_COLUMNS',
+                                cssClass: 'tek-grid-column-option-drop-here',
+                                isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoOtherColumns}}`,
+                            },
+                            {
+                                name: 'tekGridColumnsOptionsOtherColumns',
+                                component: 'TekIterableComponentRender',
+                                id: 'tekGridColumnsOptionsOtherColumns',
+                                cssClass: 'tek-grid-column-option-container',
+                                datasource: {
+                                    uniqueKey: 'name',
+                                    data: `{{${TekGridColumnsOptionsModal.controllerName}.otherColumnData}}`,
+                                },
+                                noDataSlot: [],
+                                events: {
+                                    onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.columnContainerMounted}}`,
+                                },
+                                componentMetadata: {
+                                    name: 'tekGridColumnsOptionsOtherColumn_<<row.name>>',
+                                    component: 'ZdText',
+                                    columnName: '<<row.name>>',
+                                    text: '<<row.label>><<row.aggregationText>>',
+                                    cssClass: 'tek-grid-column-option-box zd-elevation-1 ' + 'tek-grid-column-option-selected-<<row.selected>>',
+                                    events: {
+                                        click: `{{${TekGridColumnsOptionsModal.controllerName}.columnClick}}`,
+                                    },
+                                },
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                name: 'tekGridColumnsOptionsDetailColumnName',
+                component: 'ZdText',
+                cssClass: 'tek-grid-column-option-detail-name',
+                text: `{{${TekGridColumnsOptionsModal.controllerName}.detailColumnName}}`,
+                grid: {
+                    xs: 12,
+                },
+            },
+            {
+                name: 'tekGridColumnsOptionsDetailRow',
+                component: 'ZdRow',
+                children: [
+                    {
+                        name: 'tekGridColumnsOptionsDetailCol',
+                        component: 'ZdCol',
+                        cols: 12,
+                        children: [
+                            {
+                                name: 'tekGridColumnsOptionsDetailForm',
+                                component: 'ZdForm',
+                                cssClass: 'tek-grid-column-option-detail-form',
+                                children: [
+                                    {
+                                        name: 'tekGridColumnsOptionsColumnLabel',
+                                        component: 'ZdTextInput',
+                                        label: 'TEKGRID_COLUMN_LABEL',
+                                        showHelper: false,
+                                        clearable: false,
+                                        disabled: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoSingleSelection}}`,
+                                        value: `{{${TekGridColumnsOptionsModal.controllerName}.selectedColumnLabel}}`,
+                                        grid: {
+                                            xs: 12,
+                                            md: 5,
+                                        },
+                                    },
+                                    {
+                                        name: 'tekGridColumnsOptionsColumnAlignment',
+                                        component: 'ZdSelect',
+                                        autocomplete: false,
+                                        label: 'TEKGRID_COLUMN_ALIGNMENT',
+                                        disabled: `{{${TekGridColumnsOptionsModal.controllerName}.hasNoSelectedColumn}}`,
+                                        showHelper: false,
+                                        clearable: false,
+                                        grid: {
+                                            xs: 6,
+                                            md: 2,
+                                        },
+                                        dataText: 'text',
+                                        dataValue: 'value',
+                                        datasource: {
+                                            data: [
+                                                { text: 'TEKGRID_LEFT', value: 'left' },
+                                                { text: 'TEKGRID_CENTER', value: 'center' },
+                                                { text: 'TEKGRID_RIGHT', value: 'right' },
+                                            ],
+                                            translate: 'text',
+                                        },
+                                        events: {
+                                            change: `{{${TekGridColumnsOptionsModal.controllerName}.selectChange}}`,
+                                            onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.selectMounted}}`,
+                                        },
+                                    },
+                                    {
+                                        name: 'tekGridColumnsOptionsColumnAggregation',
+                                        component: 'ZdSelect',
+                                        isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.showGroups}}`,
+                                        autocomplete: false,
+                                        label: 'TEKGRID_COLUMN_AGGREGATION',
+                                        showHelper: false,
+                                        disabled: `{{${TekGridColumnsOptionsModal.controllerName}.groupInSelection}}`,
+                                        dataText: 'text',
+                                        dataValue: 'value',
+                                        grid: {
+                                            xs: 6,
+                                            md: 2,
+                                        },
+                                        datasource: {
+                                            data: `{{${TekGridColumnsOptionsModal.controllerName}.aggregationData}}`,
+                                        },
+                                        events: {
+                                            change: `{{${TekGridColumnsOptionsModal.controllerName}.selectChange}}`,
+                                            onMounted: `{{${TekGridColumnsOptionsModal.controllerName}.selectMounted}}`,
+                                        },
+                                    },
+                                    {
+                                        name: 'tekGridColumnsOptionsColumnGroupOpened',
+                                        component: 'ZdCheckbox',
+                                        isVisible: `{{${TekGridColumnsOptionsModal.controllerName}.showGroups}}`,
+                                        cssClass: 'zd-form-input-align',
+                                        disabled: `{{${TekGridColumnsOptionsModal.controllerName}.notGroupInSelection}}`,
+                                        label: 'TEKGRID_COLUMN_GROUP_OPENED',
+                                        value: `{{${TekGridColumnsOptionsModal.controllerName}.selectedColumnGroupOpened}}`,
+                                        grid: {
+                                            xs: 6,
+                                            md: 3,
+                                        },
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                name: 'tekGridColumnsOptionsDetailFooter',
+                component: 'ZdFooter',
+                padless: true,
+                color: 'transparent',
+                cssClass: 'zd-mt-6',
+                rightSlot: [
+                    {
+                        name: 'tekGridColumnsOptionsDetailCancel',
+                        component: 'ZdButton',
+                        outline: true,
+                        label: 'TEKGRID_CANCEL',
+                        events: {
+                            click: `{{${TekGridColumnsOptionsModal.controllerName}.cancelChanges}}`,
+                        },
+                    },
+                    {
+                        name: 'tekGridColumnsOptionsDetailApply',
+                        component: 'ZdButton',
+                        label: 'TEKGRID_APPLY',
+                        events: {
+                            click: `{{${TekGridColumnsOptionsModal.controllerName}.applyChanges}}`,
+                        },
+                    },
+                ],
+            },
+        ],
+    };
+    static modal;
+    static show(instance) {
+        if (!TekGridColumnsOptionsModal.modal) {
+            TekGridColumnsOptionsModal.modal = ModalService.create(TekGridColumnsOptionsModal.modalDef);
+            Loader.addController(TekGridColumnsOptionsModal.controllerName, TekGridColumnsOptionsController, [
+                TekGridColumnsOptionsModal.modal,
+            ]);
+        }
+        const controller = Loader.getInstance(TekGridColumnsOptionsModal.controllerName);
+        controller.instance = instance;
+        TekGridColumnsOptionsModal.modal.show();
+    }
+    static hide() {
+        if (TekGridColumnsOptionsModal.modal) {
+            TekGridColumnsOptionsModal.modal.hide();
+        }
+    }
+}

package/dist/components/tek-grid/filter-button/TekGridFilterButton.js

@@ -0,0 +1,36 @@
+import { TekGridFilterButton } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { ZdButtonProps, useButtonInstance, useCreateInstance } from '../..';
+export const TekGridFilterButtonProps = {
+    ...ZdButtonProps,
+    gridName: {
+        type: String,
+        default: '',
+    },
+    grid: {
+        type: [Object, String],
+        default: () => { },
+    },
+    showCheckboxAll: {
+        type: [Boolean, String],
+        default: false,
+    },
+};
+const tekGridFilterButtonComponent = defineComponent({
+    props: TekGridFilterButtonProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, TekGridFilterButton);
+        const buttonScope = useButtonInstance({ instance, root });
+        const filterClick = ({ event }) => {
+            instance.click(event);
+        };
+        return {
+            ...buttonScope,
+            instance,
+            root,
+            filterClick,
+        };
+    },
+});
+export default tekGridFilterButtonComponent;

package/dist/components/tek-grid/indentation/TekGridIndentation.js

@@ -0,0 +1,20 @@
+import { defineComponent } from 'vue';
+export default defineComponent({
+    props: {
+        showDivider: {
+            type: Boolean,
+            default: true,
+        },
+        level: {
+            type: Number,
+            default: 0,
+        },
+        footer: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    setup() {
+        return {};
+    },
+});

package/dist/components/tek-grid/layout-options/TekGridLayoutOptions.js

@@ -0,0 +1,101 @@
+import { TekGridLayoutOptions, TekRestDatasource } from '@zeedhi/common';
+import { defineComponent, mergeProps, onMounted, ref } from 'vue';
+import { ZdComponentRenderProps, useCreateInstance, useTableLayout } from '../../..';
+export const TekGridLayoutOptionsProps = {
+    ...ZdComponentRenderProps,
+    // Zeedhi 3.0
+};
+const layoutOptionsComponent = defineComponent({
+    props: TekGridLayoutOptionsProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, TekGridLayoutOptions);
+        const { applyLayout: applyTekGridLayout, getColumnElements, getTableWidth } = useTableLayout();
+        onMounted(() => {
+            instance.viewApplyLayout = applyLayout;
+            instance.viewGetCurrentLayout = getCurrentLayout;
+        });
+        const confirmLayoutClick = ({ component }) => {
+            const layoutName = component.value;
+            if (layoutName) {
+                const newLayout = getCurrentLayout(layoutName);
+                instance.newLayout(newLayout);
+            }
+            menuActive.value = false;
+            component.value = '';
+        };
+        const datasourceDynamicFilter = () => {
+            const datasource = instance.grid.datasource;
+            if (datasource instanceof TekRestDatasource)
+                return datasource.dynamicFilter;
+            return {};
+        };
+        const changeLayout = (layout) => {
+            instance.updateLayout(layout.name, getCurrentLayout(layout.name));
+        };
+        const applyLayout = (layout) => {
+            const defaultLayout = {
+                originalDatasourceOrder: instance.originalDatasourceOrder,
+                originalDatasourceFilter: instance.originalDatasourceFilter,
+                originalColumnProps: instance.originalColumnProps,
+                originalDatasourceDynamicFilter: instance.originalDatasourceDynamicFilter,
+            };
+            applyTekGridLayout({ layout, defaultLayout, changeLayoutCallback: changeLayout });
+            menuActive.value = false;
+        };
+        const getCurrentLayout = (layoutName) => {
+            const { grid } = instance;
+            const gridWidth = getTableWidth();
+            const columnElementsDict = getColumnElements();
+            return {
+                name: layoutName,
+                gridWidth,
+                order: grid.datasource.order,
+                filter: grid.datasource.filter,
+                dynamicFilter: datasourceDynamicFilter(),
+                columns: grid.columns.map((column, index) => {
+                    const columnElement = columnElementsDict[index];
+                    return {
+                        name: column.name,
+                        label: column.label,
+                        align: column.align,
+                        width: columnElement ? window.getComputedStyle(columnElement).width : 'unset',
+                        minWidth: column.minWidth,
+                        maxWidth: column.maxWidth,
+                        isVisible: column.isVisible,
+                        fixed: column.fixed,
+                        grouped: column.grouped,
+                        groupOpened: column.groupOpened,
+                        aggregation: column.aggregation,
+                        filterHelperValue: instance.getHelperValue(column),
+                    };
+                }),
+            };
+        };
+        const menuActive = ref(false);
+        const applyOrUpdateLayout = (event, layoutName) => {
+            if (instance.layoutEdited) {
+                instance.updateLayout(layoutName, getCurrentLayout(layoutName));
+                event.stopImmediatePropagation();
+                menuActive.value = false;
+            }
+            else {
+                instance.applyLayout(layoutName);
+            }
+        };
+        const deleteLayout = (event, layoutName) => {
+            instance.deleteLayout(layoutName);
+            event.stopImmediatePropagation();
+        };
+        return {
+            instance,
+            root,
+            menuActive,
+            confirmLayoutClick,
+            applyOrUpdateLayout,
+            deleteLayout,
+            mergeProps,
+        };
+    },
+});
+export default layoutOptionsComponent;