devextreme-vue/esm/card-view.js

DevExtreme Vue UI and Visualization Components

/*!
 * devextreme-vue
 * Version: 25.1.5
 * Build date: Wed Sep 03 2025
 *
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 *
 * This software may be modified and distributed under the terms
 * of the MIT license. See the LICENSE file in the root of the project for details.
 *
 * https://github.com/DevExpress/devextreme-vue
 */

import { defineComponent } from "vue";
import { prepareComponentConfig } from "./core/index";
import CardView from "devextreme/ui/card_view";
import { prepareConfigurationComponentConfig } from "./core/index";
const componentConfig = {
    props: {
        accessKey: String,
        activeStateEnabled: Boolean,
        allowColumnReordering: Boolean,
        cardContentTemplate: {},
        cardCover: Object,
        cardFooterTemplate: {},
        cardHeader: Object,
        cardMaxWidth: Number,
        cardMinWidth: Number,
        cardsPerRow: [String, Number],
        cardTemplate: {},
        columnChooser: Object,
        columns: Array,
        dataSource: [Array, Object, String],
        disabled: Boolean,
        editing: Object,
        elementAttr: Object,
        errorRowEnabled: Boolean,
        fieldHintEnabled: Boolean,
        filterBuilder: Object,
        filterBuilderPopup: Object,
        filterPanel: Object,
        filterValue: [Array, Function, String],
        focusStateEnabled: Boolean,
        headerFilter: Object,
        headerPanel: Object,
        height: [Number, String],
        hint: String,
        hoverStateEnabled: Boolean,
        keyExpr: [Array, String],
        loadPanel: Object,
        noDataTemplate: {},
        noDataText: String,
        onCardClick: Function,
        onCardDblClick: Function,
        onCardHoverChanged: Function,
        onCardInserted: Function,
        onCardInserting: Function,
        onCardPrepared: Function,
        onCardRemoved: Function,
        onCardRemoving: Function,
        onCardSaved: Function,
        onCardSaving: Function,
        onCardUpdated: Function,
        onCardUpdating: Function,
        onContentReady: Function,
        onContextMenuPreparing: Function,
        onDataErrorOccurred: Function,
        onDisposing: Function,
        onEditCanceled: Function,
        onEditCanceling: Function,
        onEditingStart: Function,
        onFieldCaptionClick: Function,
        onFieldCaptionDblClick: Function,
        onFieldCaptionPrepared: Function,
        onFieldValueClick: Function,
        onFieldValueDblClick: Function,
        onFieldValuePrepared: Function,
        onFocusedCardChanged: Function,
        onInitialized: Function,
        onInitNewCard: Function,
        onOptionChanged: Function,
        onSelectionChanged: Function,
        pager: Object,
        paging: Object,
        remoteOperations: [Boolean, String, Object],
        rtlEnabled: Boolean,
        scrolling: Object,
        searchPanel: Object,
        selectedCardKeys: Array,
        selection: Object,
        sorting: Object,
        tabIndex: Number,
        toolbar: Object,
        visible: Boolean,
        width: [Number, String],
        wordWrapEnabled: Boolean
    },
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:accessKey": null,
        "update:activeStateEnabled": null,
        "update:allowColumnReordering": null,
        "update:cardContentTemplate": null,
        "update:cardCover": null,
        "update:cardFooterTemplate": null,
        "update:cardHeader": null,
        "update:cardMaxWidth": null,
        "update:cardMinWidth": null,
        "update:cardsPerRow": null,
        "update:cardTemplate": null,
        "update:columnChooser": null,
        "update:columns": null,
        "update:dataSource": null,
        "update:disabled": null,
        "update:editing": null,
        "update:elementAttr": null,
        "update:errorRowEnabled": null,
        "update:fieldHintEnabled": null,
        "update:filterBuilder": null,
        "update:filterBuilderPopup": null,
        "update:filterPanel": null,
        "update:filterValue": null,
        "update:focusStateEnabled": null,
        "update:headerFilter": null,
        "update:headerPanel": null,
        "update:height": null,
        "update:hint": null,
        "update:hoverStateEnabled": null,
        "update:keyExpr": null,
        "update:loadPanel": null,
        "update:noDataTemplate": null,
        "update:noDataText": null,
        "update:onCardClick": null,
        "update:onCardDblClick": null,
        "update:onCardHoverChanged": null,
        "update:onCardInserted": null,
        "update:onCardInserting": null,
        "update:onCardPrepared": null,
        "update:onCardRemoved": null,
        "update:onCardRemoving": null,
        "update:onCardSaved": null,
        "update:onCardSaving": null,
        "update:onCardUpdated": null,
        "update:onCardUpdating": null,
        "update:onContentReady": null,
        "update:onContextMenuPreparing": null,
        "update:onDataErrorOccurred": null,
        "update:onDisposing": null,
        "update:onEditCanceled": null,
        "update:onEditCanceling": null,
        "update:onEditingStart": null,
        "update:onFieldCaptionClick": null,
        "update:onFieldCaptionDblClick": null,
        "update:onFieldCaptionPrepared": null,
        "update:onFieldValueClick": null,
        "update:onFieldValueDblClick": null,
        "update:onFieldValuePrepared": null,
        "update:onFocusedCardChanged": null,
        "update:onInitialized": null,
        "update:onInitNewCard": null,
        "update:onOptionChanged": null,
        "update:onSelectionChanged": null,
        "update:pager": null,
        "update:paging": null,
        "update:remoteOperations": null,
        "update:rtlEnabled": null,
        "update:scrolling": null,
        "update:searchPanel": null,
        "update:selectedCardKeys": null,
        "update:selection": null,
        "update:sorting": null,
        "update:tabIndex": null,
        "update:toolbar": null,
        "update:visible": null,
        "update:width": null,
        "update:wordWrapEnabled": null,
    },
    computed: {
        instance() {
            return this.$_instance;
        }
    },
    beforeCreate() {
        this.$_WidgetClass = CardView;
        this.$_hasAsyncTemplate = true;
        this.$_expectedChildren = {
            cardCover: { isCollectionItem: false, optionName: "cardCover" },
            cardHeader: { isCollectionItem: false, optionName: "cardHeader" },
            cardViewHeaderFilter: { isCollectionItem: false, optionName: "headerFilter" },
            cardViewSelection: { isCollectionItem: false, optionName: "selection" },
            column: { isCollectionItem: true, optionName: "columns" },
            columnChooser: { isCollectionItem: false, optionName: "columnChooser" },
            editing: { isCollectionItem: false, optionName: "editing" },
            filterBuilder: { isCollectionItem: false, optionName: "filterBuilder" },
            filterPanel: { isCollectionItem: false, optionName: "filterPanel" },
            headerFilter: { isCollectionItem: false, optionName: "headerFilter" },
            headerPanel: { isCollectionItem: false, optionName: "headerPanel" },
            loadPanel: { isCollectionItem: false, optionName: "loadPanel" },
            pager: { isCollectionItem: false, optionName: "pager" },
            paging: { isCollectionItem: false, optionName: "paging" },
            remoteOperations: { isCollectionItem: false, optionName: "remoteOperations" },
            scrolling: { isCollectionItem: false, optionName: "scrolling" },
            searchPanel: { isCollectionItem: false, optionName: "searchPanel" },
            selection: { isCollectionItem: false, optionName: "selection" },
            sorting: { isCollectionItem: false, optionName: "sorting" },
            toolbar: { isCollectionItem: false, optionName: "toolbar" }
        };
    }
};
prepareComponentConfig(componentConfig);
const DxCardView = defineComponent(componentConfig);
const DxAnimationConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:hide": null,
        "update:show": null,
    },
    props: {
        hide: [Object, Number, String],
        show: [Object, Number, String]
    }
};
prepareConfigurationComponentConfig(DxAnimationConfig);
const DxAnimation = defineComponent(DxAnimationConfig);
DxAnimation.$_optionName = "animation";
DxAnimation.$_expectedChildren = {
    hide: { isCollectionItem: false, optionName: "hide" },
    show: { isCollectionItem: false, optionName: "show" }
};
const DxAsyncRuleConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:ignoreEmptyValue": null,
        "update:message": null,
        "update:reevaluate": null,
        "update:type": null,
        "update:validationCallback": null,
    },
    props: {
        ignoreEmptyValue: Boolean,
        message: String,
        reevaluate: Boolean,
        type: String,
        validationCallback: Function
    }
};
prepareConfigurationComponentConfig(DxAsyncRuleConfig);
const DxAsyncRule = defineComponent(DxAsyncRuleConfig);
DxAsyncRule.$_optionName = "validationRules";
DxAsyncRule.$_isCollectionItem = true;
DxAsyncRule.$_predefinedProps = {
    type: "async"
};
const DxAtConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:x": null,
        "update:y": null,
    },
    props: {
        x: String,
        y: String
    }
};
prepareConfigurationComponentConfig(DxAtConfig);
const DxAt = defineComponent(DxAtConfig);
DxAt.$_optionName = "at";
const DxBoundaryOffsetConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:x": null,
        "update:y": null,
    },
    props: {
        x: Number,
        y: Number
    }
};
prepareConfigurationComponentConfig(DxBoundaryOffsetConfig);
const DxBoundaryOffset = defineComponent(DxBoundaryOffsetConfig);
DxBoundaryOffset.$_optionName = "boundaryOffset";
const DxButtonItemConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:buttonOptions": null,
        "update:colSpan": null,
        "update:cssClass": null,
        "update:horizontalAlignment": null,
        "update:itemType": null,
        "update:name": null,
        "update:verticalAlignment": null,
        "update:visible": null,
        "update:visibleIndex": null,
    },
    props: {
        buttonOptions: Object,
        colSpan: Number,
        cssClass: String,
        horizontalAlignment: String,
        itemType: String,
        name: String,
        verticalAlignment: String,
        visible: Boolean,
        visibleIndex: Number
    }
};
prepareConfigurationComponentConfig(DxButtonItemConfig);
const DxButtonItem = defineComponent(DxButtonItemConfig);
DxButtonItem.$_optionName = "items";
DxButtonItem.$_isCollectionItem = true;
DxButtonItem.$_predefinedProps = {
    itemType: "button"
};
DxButtonItem.$_expectedChildren = {
    buttonOptions: { isCollectionItem: false, optionName: "buttonOptions" }
};
const DxButtonOptionsConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:accessKey": null,
        "update:activeStateEnabled": null,
        "update:disabled": null,
        "update:elementAttr": null,
        "update:focusStateEnabled": null,
        "update:height": null,
        "update:hint": null,
        "update:hoverStateEnabled": null,
        "update:icon": null,
        "update:onClick": null,
        "update:onContentReady": null,
        "update:onDisposing": null,
        "update:onInitialized": null,
        "update:onOptionChanged": null,
        "update:rtlEnabled": null,
        "update:stylingMode": null,
        "update:tabIndex": null,
        "update:template": null,
        "update:text": null,
        "update:type": null,
        "update:useSubmitBehavior": null,
        "update:validationGroup": null,
        "update:visible": null,
        "update:width": null,
    },
    props: {
        accessKey: String,
        activeStateEnabled: Boolean,
        disabled: Boolean,
        elementAttr: Object,
        focusStateEnabled: Boolean,
        height: [Number, String],
        hint: String,
        hoverStateEnabled: Boolean,
        icon: String,
        onClick: Function,
        onContentReady: Function,
        onDisposing: Function,
        onInitialized: Function,
        onOptionChanged: Function,
        rtlEnabled: Boolean,
        stylingMode: String,
        tabIndex: Number,
        template: {},
        text: String,
        type: String,
        useSubmitBehavior: Boolean,
        validationGroup: String,
        visible: Boolean,
        width: [Number, String]
    }
};
prepareConfigurationComponentConfig(DxButtonOptionsConfig);
const DxButtonOptions = defineComponent(DxButtonOptionsConfig);
DxButtonOptions.$_optionName = "buttonOptions";
const DxCardCoverConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:altExpr": null,
        "update:aspectRatio": null,
        "update:imageExpr": null,
        "update:maxHeight": null,
        "update:template": null,
    },
    props: {
        altExpr: [Function, String],
        aspectRatio: String,
        imageExpr: [Function, String],
        maxHeight: Number,
        template: {}
    }
};
prepareConfigurationComponentConfig(DxCardCoverConfig);
const DxCardCover = defineComponent(DxCardCoverConfig);
DxCardCover.$_optionName = "cardCover";
const DxCardHeaderConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:items": null,
        "update:template": null,
        "update:visible": null,
    },
    props: {
        items: Array,
        template: {},
        visible: Boolean
    }
};
prepareConfigurationComponentConfig(DxCardHeaderConfig);
const DxCardHeader = defineComponent(DxCardHeaderConfig);
DxCardHeader.$_optionName = "cardHeader";
DxCardHeader.$_expectedChildren = {
    cardHeaderItem: { isCollectionItem: true, optionName: "items" },
    item: { isCollectionItem: true, optionName: "items" }
};
const DxCardHeaderItemConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:cssClass": null,
        "update:disabled": null,
        "update:html": null,
        "update:locateInMenu": null,
        "update:location": null,
        "update:menuItemTemplate": null,
        "update:name": null,
        "update:options": null,
        "update:showText": null,
        "update:template": null,
        "update:text": null,
        "update:visible": null,
        "update:widget": null,
    },
    props: {
        cssClass: String,
        disabled: Boolean,
        html: String,
        locateInMenu: String,
        location: String,
        menuItemTemplate: {},
        name: String,
        options: {},
        showText: String,
        template: {},
        text: String,
        visible: Boolean,
        widget: String
    }
};
prepareConfigurationComponentConfig(DxCardHeaderItemConfig);
const DxCardHeaderItem = defineComponent(DxCardHeaderItemConfig);
DxCardHeaderItem.$_optionName = "items";
DxCardHeaderItem.$_isCollectionItem = true;
const DxCardViewHeaderFilterConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:allowSearch": null,
        "update:allowSelectAll": null,
        "update:height": null,
        "update:search": null,
        "update:searchTimeout": null,
        "update:texts": null,
        "update:visible": null,
        "update:width": null,
    },
    props: {
        allowSearch: Boolean,
        allowSelectAll: Boolean,
        height: [Number, String],
        search: Object,
        searchTimeout: Number,
        texts: Object,
        visible: Boolean,
        width: [Number, String]
    }
};
prepareConfigurationComponentConfig(DxCardViewHeaderFilterConfig);
const DxCardViewHeaderFilter = defineComponent(DxCardViewHeaderFilterConfig);
DxCardViewHeaderFilter.$_optionName = "headerFilter";
DxCardViewHeaderFilter.$_expectedChildren = {
    cardViewHeaderFilterSearch: { isCollectionItem: false, optionName: "search" },
    cardViewHeaderFilterTexts: { isCollectionItem: false, optionName: "texts" },
    search: { isCollectionItem: false, optionName: "search" },
    texts: { isCollectionItem: false, optionName: "texts" }
};
const DxCardViewHeaderFilterSearchConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:editorOptions": null,
        "update:enabled": null,
        "update:mode": null,
        "update:timeout": null,
    },
    props: {
        editorOptions: {},
        enabled: Boolean,
        mode: String,
        timeout: Number
    }
};
prepareConfigurationComponentConfig(DxCardViewHeaderFilterSearchConfig);
const DxCardViewHeaderFilterSearch = defineComponent(DxCardViewHeaderFilterSearchConfig);
DxCardViewHeaderFilterSearch.$_optionName = "search";
const DxCardViewHeaderFilterTextsConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:cancel": null,
        "update:emptyValue": null,
        "update:ok": null,
    },
    props: {
        cancel: String,
        emptyValue: String,
        ok: String
    }
};
prepareConfigurationComponentConfig(DxCardViewHeaderFilterTextsConfig);
const DxCardViewHeaderFilterTexts = defineComponent(DxCardViewHeaderFilterTextsConfig);
DxCardViewHeaderFilterTexts.$_optionName = "texts";
const DxCardViewSelectionConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:allowSelectAll": null,
        "update:mode": null,
        "update:selectAllMode": null,
        "update:showCheckBoxesMode": null,
    },
    props: {
        allowSelectAll: Boolean,
        mode: String,
        selectAllMode: String,
        showCheckBoxesMode: String
    }
};
prepareConfigurationComponentConfig(DxCardViewSelectionConfig);
const DxCardViewSelection = defineComponent(DxCardViewSelectionConfig);
DxCardViewSelection.$_optionName = "selection";
const DxChangeConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:data": null,
        "update:insertAfterKey": null,
        "update:insertBeforeKey": null,
        "update:type": null,
    },
    props: {
        data: {},
        insertAfterKey: {},
        insertBeforeKey: {},
        type: String
    }
};
prepareConfigurationComponentConfig(DxChangeConfig);
const DxChange = defineComponent(DxChangeConfig);
DxChange.$_optionName = "changes";
DxChange.$_isCollectionItem = true;
const DxColCountByScreenConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:lg": null,
        "update:md": null,
        "update:sm": null,
        "update:xs": null,
    },
    props: {
        lg: Number,
        md: Number,
        sm: Number,
        xs: Number
    }
};
prepareConfigurationComponentConfig(DxColCountByScreenConfig);
const DxColCountByScreen = defineComponent(DxColCountByScreenConfig);
DxColCountByScreen.$_optionName = "colCountByScreen";
const DxCollisionConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:x": null,
        "update:y": null,
    },
    props: {
        x: String,
        y: String
    }
};
prepareConfigurationComponentConfig(DxCollisionConfig);
const DxCollision = defineComponent(DxCollisionConfig);
DxCollision.$_optionName = "collision";
const DxColumnConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:alignment": null,
        "update:allowEditing": null,
        "update:allowFiltering": null,
        "update:allowHeaderFiltering": null,
        "update:allowHiding": null,
        "update:allowReordering": null,
        "update:allowSearch": null,
        "update:allowSorting": null,
        "update:calculateDisplayValue": null,
        "update:calculateFieldValue": null,
        "update:calculateFilterExpression": null,
        "update:calculateSortValue": null,
        "update:caption": null,
        "update:customizeText": null,
        "update:dataField": null,
        "update:dataType": null,
        "update:editorOptions": null,
        "update:falseText": null,
        "update:fieldCaptionTemplate": null,
        "update:fieldTemplate": null,
        "update:fieldValueTemplate": null,
        "update:filterType": null,
        "update:filterValue": null,
        "update:filterValues": null,
        "update:format": null,
        "update:formItem": null,
        "update:headerFilter": null,
        "update:headerItemCssClass": null,
        "update:headerItemTemplate": null,
        "update:name": null,
        "update:setFieldValue": null,
        "update:showInColumnChooser": null,
        "update:sortIndex": null,
        "update:sortingMethod": null,
        "update:sortOrder": null,
        "update:trueText": null,
        "update:validationRules": null,
        "update:visible": null,
        "update:visibleIndex": null,
    },
    props: {
        alignment: String,
        allowEditing: Boolean,
        allowFiltering: Boolean,
        allowHeaderFiltering: Boolean,
        allowHiding: Boolean,
        allowReordering: Boolean,
        allowSearch: Boolean,
        allowSorting: Boolean,
        calculateDisplayValue: Function,
        calculateFieldValue: Function,
        calculateFilterExpression: Function,
        calculateSortValue: [Function, String],
        caption: String,
        customizeText: Function,
        dataField: String,
        dataType: String,
        editorOptions: {},
        falseText: String,
        fieldCaptionTemplate: {},
        fieldTemplate: {},
        fieldValueTemplate: {},
        filterType: String,
        filterValue: {},
        filterValues: Array,
        format: [Object, String, Function],
        formItem: Object,
        headerFilter: Object,
        headerItemCssClass: String,
        headerItemTemplate: {},
        name: String,
        setFieldValue: Function,
        showInColumnChooser: Boolean,
        sortIndex: Number,
        sortingMethod: Function,
        sortOrder: String,
        trueText: String,
        validationRules: Array,
        visible: Boolean,
        visibleIndex: Number
    }
};
prepareConfigurationComponentConfig(DxColumnConfig);
const DxColumn = defineComponent(DxColumnConfig);
DxColumn.$_optionName = "columns";
DxColumn.$_isCollectionItem = true;
DxColumn.$_expectedChildren = {
    AsyncRule: { isCollectionItem: true, optionName: "validationRules" },
    columnHeaderFilter: { isCollectionItem: false, optionName: "headerFilter" },
    CompareRule: { isCollectionItem: true, optionName: "validationRules" },
    CustomRule: { isCollectionItem: true, optionName: "validationRules" },
    EmailRule: { isCollectionItem: true, optionName: "validationRules" },
    format: { isCollectionItem: false, optionName: "format" },
    formItem: { isCollectionItem: false, optionName: "formItem" },
    headerFilter: { isCollectionItem: false, optionName: "headerFilter" },
    NumericRule: { isCollectionItem: true, optionName: "validationRules" },
    PatternRule: { isCollectionItem: true, optionName: "validationRules" },
    RangeRule: { isCollectionItem: true, optionName: "validationRules" },
    RequiredRule: { isCollectionItem: true, optionName: "validationRules" },
    StringLengthRule: { isCollectionItem: true, optionName: "validationRules" },
    validationRule: { isCollectionItem: true, optionName: "validationRules" }
};
const DxColumnChooserConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:allowSearch": null,
        "update:container": null,
        "update:emptyPanelText": null,
        "update:enabled": null,
        "update:height": null,
        "update:mode": null,
        "update:position": null,
        "update:search": null,
        "update:searchTimeout": null,
        "update:selection": null,
        "update:sortOrder": null,
        "update:title": null,
        "update:width": null,
    },
    props: {
        allowSearch: Boolean,
        container: {},
        emptyPanelText: String,
        enabled: Boolean,
        height: [Number, String],
        mode: String,
        position: Object,
        search: Object,
        searchTimeout: Number,
        selection: Object,
        sortOrder: String,
        title: String,
        width: [Number, String]
    }
};
prepareConfigurationComponentConfig(DxColumnChooserConfig);
const DxColumnChooser = defineComponent(DxColumnChooserConfig);
DxColumnChooser.$_optionName = "columnChooser";
DxColumnChooser.$_expectedChildren = {
    columnChooserSearch: { isCollectionItem: false, optionName: "search" },
    columnChooserSelection: { isCollectionItem: false, optionName: "selection" },
    position: { isCollectionItem: false, optionName: "position" },
    search: { isCollectionItem: false, optionName: "search" },
    selection: { isCollectionItem: false, optionName: "selection" }
};
const DxColumnChooserSearchConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:editorOptions": null,
        "update:enabled": null,
        "update:timeout": null,
    },
    props: {
        editorOptions: {},
        enabled: Boolean,
        timeout: Number
    }
};
prepareConfigurationComponentConfig(DxColumnChooserSearchConfig);
const DxColumnChooserSearch = defineComponent(DxColumnChooserSearchConfig);
DxColumnChooserSearch.$_optionName = "search";
const DxColumnChooserSelectionConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:allowSelectAll": null,
        "update:recursive": null,
        "update:selectByClick": null,
    },
    props: {
        allowSelectAll: Boolean,
        recursive: Boolean,
        selectByClick: Boolean
    }
};
prepareConfigurationComponentConfig(DxColumnChooserSelectionConfig);
const DxColumnChooserSelection = defineComponent(DxColumnChooserSelectionConfig);
DxColumnChooserSelection.$_optionName = "selection";
const DxColumnHeaderFilterConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:allowSearch": null,
        "update:allowSelectAll": null,
        "update:dataSource": null,
        "update:groupInterval": null,
        "update:height": null,
        "update:search": null,
        "update:searchMode": null,
        "update:width": null,
    },
    props: {
        allowSearch: Boolean,
        allowSelectAll: Boolean,
        dataSource: [Array, Object, Function],
        groupInterval: [String, Number],
        height: [Number, String],
        search: Object,
        searchMode: String,
        width: [Number, String]
    }
};
prepareConfigurationComponentConfig(DxColumnHeaderFilterConfig);
const DxColumnHeaderFilter = defineComponent(DxColumnHeaderFilterConfig);
DxColumnHeaderFilter.$_optionName = "headerFilter";
DxColumnHeaderFilter.$_expectedChildren = {
    columnHeaderFilterSearch: { isCollectionItem: false, optionName: "search" },
    search: { isCollectionItem: false, optionName: "search" }
};
const DxColumnHeaderFilterSearchConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:editorOptions": null,
        "update:enabled": null,
        "update:mode": null,
        "update:searchExpr": null,
        "update:timeout": null,
    },
    props: {
        editorOptions: {},
        enabled: Boolean,
        mode: String,
        searchExpr: [Array, Function, String],
        timeout: Number
    }
};
prepareConfigurationComponentConfig(DxColumnHeaderFilterSearchConfig);
const DxColumnHeaderFilterSearch = defineComponent(DxColumnHeaderFilterSearchConfig);
DxColumnHeaderFilterSearch.$_optionName = "search";
const DxCompareRuleConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:comparisonTarget": null,
        "update:comparisonType": null,
        "update:ignoreEmptyValue": null,
        "update:message": null,
        "update:type": null,
    },
    props: {
        comparisonTarget: Function,
        comparisonType: String,
        ignoreEmptyValue: Boolean,
        message: String,
        type: String
    }
};
prepareConfigurationComponentConfig(DxCompareRuleConfig);
const DxCompareRule = defineComponent(DxCompareRuleConfig);
DxCompareRule.$_optionName = "validationRules";
DxCompareRule.$_isCollectionItem = true;
DxCompareRule.$_predefinedProps = {
    type: "compare"
};
const DxCustomOperationConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:calculateFilterExpression": null,
        "update:caption": null,
        "update:customizeText": null,
        "update:dataTypes": null,
        "update:editorTemplate": null,
        "update:hasValue": null,
        "update:icon": null,
        "update:name": null,
    },
    props: {
        calculateFilterExpression: Function,
        caption: String,
        customizeText: Function,
        dataTypes: Array,
        editorTemplate: {},
        hasValue: Boolean,
        icon: String,
        name: String
    }
};
prepareConfigurationComponentConfig(DxCustomOperationConfig);
const DxCustomOperation = defineComponent(DxCustomOperationConfig);
DxCustomOperation.$_optionName = "customOperations";
DxCustomOperation.$_isCollectionItem = true;
const DxCustomRuleConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:ignoreEmptyValue": null,
        "update:message": null,
        "update:reevaluate": null,
        "update:type": null,
        "update:validationCallback": null,
    },
    props: {
        ignoreEmptyValue: Boolean,
        message: String,
        reevaluate: Boolean,
        type: String,
        validationCallback: Function
    }
};
prepareConfigurationComponentConfig(DxCustomRuleConfig);
const DxCustomRule = defineComponent(DxCustomRuleConfig);
DxCustomRule.$_optionName = "validationRules";
DxCustomRule.$_isCollectionItem = true;
DxCustomRule.$_predefinedProps = {
    type: "custom"
};
const DxDraggingConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:dropFeedbackMode": null,
        "update:onDragChange": null,
        "update:onDragEnd": null,
        "update:onDragMove": null,
        "update:onDragStart": null,
        "update:onRemove": null,
        "update:onReorder": null,
        "update:scrollSensitivity": null,
        "update:scrollSpeed": null,
    },
    props: {
        dropFeedbackMode: String,
        onDragChange: Function,
        onDragEnd: Function,
        onDragMove: Function,
        onDragStart: Function,
        onRemove: Function,
        onReorder: Function,
        scrollSensitivity: Number,
        scrollSpeed: Number
    }
};
prepareConfigurationComponentConfig(DxDraggingConfig);
const DxDragging = defineComponent(DxDraggingConfig);
DxDragging.$_optionName = "dragging";
const DxEditingConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:allowAdding": null,
        "update:allowDeleting": null,
        "update:allowUpdating": null,
        "update:changes": null,
        "update:confirmDelete": null,
        "update:editCardKey": null,
        "update:form": null,
        "update:popup": null,
        "update:texts": null,
    },
    props: {
        allowAdding: Boolean,
        allowDeleting: Boolean,
        allowUpdating: Boolean,
        changes: Array,
        confirmDelete: Boolean,
        editCardKey: {},
        form: Object,
        popup: Object,
        texts: Object
    }
};
prepareConfigurationComponentConfig(DxEditingConfig);
const DxEditing = defineComponent(DxEditingConfig);
DxEditing.$_optionName = "editing";
DxEditing.$_expectedChildren = {
    change: { isCollectionItem: true, optionName: "changes" },
    editingTexts: { isCollectionItem: false, optionName: "texts" },
    form: { isCollectionItem: false, optionName: "form" },
    texts: { isCollectionItem: false, optionName: "texts" }
};
const DxEditingTextsConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:addCard": null,
        "update:confirmDeleteMessage": null,
        "update:confirmDeleteTitle": null,
        "update:deleteCard": null,
        "update:editCard": null,
        "update:saveCard": null,
    },
    props: {
        addCard: String,
        confirmDeleteMessage: String,
        confirmDeleteTitle: String,
        deleteCard: String,
        editCard: String,
        saveCard: String
    }
};
prepareConfigurationComponentConfig(DxEditingTextsConfig);
const DxEditingTexts = defineComponent(DxEditingTextsConfig);
DxEditingTexts.$_optionName = "texts";
const DxEmailRuleConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:ignoreEmptyValue": null,
        "update:message": null,
        "update:type": null,
    },
    props: {
        ignoreEmptyValue: Boolean,
        message: String,
        type: String
    }
};
prepareConfigurationComponentConfig(DxEmailRuleConfig);
const DxEmailRule = defineComponent(DxEmailRuleConfig);
DxEmailRule.$_optionName = "validationRules";
DxEmailRule.$_isCollectionItem = true;
DxEmailRule.$_predefinedProps = {
    type: "email"
};
const DxEmptyItemConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:colSpan": null,
        "update:cssClass": null,
        "update:itemType": null,
        "update:name": null,
        "update:visible": null,
        "update:visibleIndex": null,
    },
    props: {
        colSpan: Number,
        cssClass: String,
        itemType: String,
        name: String,
        visible: Boolean,
        visibleIndex: Number
    }
};
prepareConfigurationComponentConfig(DxEmptyItemConfig);
const DxEmptyItem = defineComponent(DxEmptyItemConfig);
DxEmptyItem.$_optionName = "items";
DxEmptyItem.$_isCollectionItem = true;
DxEmptyItem.$_predefinedProps = {
    itemType: "empty"
};
const DxFieldConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:calculateFilterExpression": null,
        "update:caption": null,
        "update:customizeText": null,
        "update:dataField": null,
        "update:dataType": null,
        "update:editorOptions": null,
        "update:editorTemplate": null,
        "update:falseText": null,
        "update:filterOperations": null,
        "update:format": null,
        "update:lookup": null,
        "update:name": null,
        "update:trueText": null,
    },
    props: {
        calculateFilterExpression: Function,
        caption: String,
        customizeText: Function,
        dataField: String,
        dataType: String,
        editorOptions: {},
        editorTemplate: {},
        falseText: String,
        filterOperations: Array,
        format: [Object, String, Function],
        lookup: Object,
        name: String,
        trueText: String
    }
};
prepareConfigurationComponentConfig(DxFieldConfig);
const DxField = defineComponent(DxFieldConfig);
DxField.$_optionName = "fields";
DxField.$_isCollectionItem = true;
DxField.$_expectedChildren = {
    format: { isCollectionItem: false, optionName: "format" },
    lookup: { isCollectionItem: false, optionName: "lookup" }
};
const DxFilterBuilderConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:accessKey": null,
        "update:activeStateEnabled": null,
        "update:allowHierarchicalFields": null,
        "update:customOperations": null,
        "update:disabled": null,
        "update:elementAttr": null,
        "update:fields": null,
        "update:filterOperationDescriptions": null,
        "update:focusStateEnabled": null,
        "update:groupOperationDescriptions": null,
        "update:groupOperations": null,
        "update:height": null,
        "update:hint": null,
        "update:hoverStateEnabled": null,
        "update:maxGroupLevel": null,
        "update:onContentReady": null,
        "update:onDisposing": null,
        "update:onEditorPrepared": null,
        "update:onEditorPreparing": null,
        "update:onInitialized": null,
        "update:onOptionChanged": null,
        "update:onValueChanged": null,
        "update:rtlEnabled": null,
        "update:tabIndex": null,
        "update:value": null,
        "update:visible": null,
        "update:width": null,
    },
    props: {
        accessKey: String,
        activeStateEnabled: Boolean,
        allowHierarchicalFields: Boolean,
        customOperations: Array,
        disabled: Boolean,
        elementAttr: Object,
        fields: Array,
        filterOperationDescriptions: Object,
        focusStateEnabled: Boolean,
        groupOperationDescriptions: Object,
        groupOperations: Array,
        height: [Number, String],
        hint: String,
        hoverStateEnabled: Boolean,
        maxGroupLevel: Number,
        onContentReady: Function,
        onDisposing: Function,
        onEditorPrepared: Function,
        onEditorPreparing: Function,
        onInitialized: Function,
        onOptionChanged: Function,
        onValueChanged: Function,
        rtlEnabled: Boolean,
        tabIndex: Number,
        value: [Array, Function, String],
        visible: Boolean,
        width: [Number, String]
    }
};
prepareConfigurationComponentConfig(DxFilterBuilderConfig);
const DxFilterBuilder = defineComponent(DxFilterBuilderConfig);
DxFilterBuilder.$_optionName = "filterBuilder";
DxFilterBuilder.$_expectedChildren = {
    customOperation: { isCollectionItem: true, optionName: "customOperations" },
    field: { isCollectionItem: true, optionName: "fields" },
    filterOperationDescriptions: { isCollectionItem: false, optionName: "filterOperationDescriptions" },
    groupOperationDescriptions: { isCollectionItem: false, optionName: "groupOperationDescriptions" }
};
const DxFilterOperationDescriptionsConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:between": null,
        "update:contains": null,
        "update:endsWith": null,
        "update:equal": null,
        "update:greaterThan": null,
        "update:greaterThanOrEqual": null,
        "update:isBlank": null,
        "update:isNotBlank": null,
        "update:lessThan": null,
        "update:lessThanOrEqual": null,
        "update:notContains": null,
        "update:notEqual": null,
        "update:startsWith": null,
    },
    props: {
        between: String,
        contains: String,
        endsWith: String,
        equal: String,
        greaterThan: String,
        greaterThanOrEqual: String,
        isBlank: String,
        isNotBlank: String,
        lessThan: String,
        lessThanOrEqual: String,
        notContains: String,
        notEqual: String,
        startsWith: String
    }
};
prepareConfigurationComponentConfig(DxFilterOperationDescriptionsConfig);
const DxFilterOperationDescriptions = defineComponent(DxFilterOperationDescriptionsConfig);
DxFilterOperationDescriptions.$_optionName = "filterOperationDescriptions";
const DxFilterPanelConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:customizeText": null,
        "update:filterEnabled": null,
        "update:texts": null,
        "update:visible": null,
    },
    props: {
        customizeText: Function,
        filterEnabled: Boolean,
        texts: Object,
        visible: Boolean
    }
};
prepareConfigurationComponentConfig(DxFilterPanelConfig);
const DxFilterPanel = defineComponent(DxFilterPanelConfig);
DxFilterPanel.$_optionName = "filterPanel";
DxFilterPanel.$_expectedChildren = {
    filterPanelTexts: { isCollectionItem: false, optionName: "texts" },
    texts: { isCollectionItem: false, optionName: "texts" }
};
const DxFilterPanelTextsConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:clearFilter": null,
        "update:createFilter": null,
        "update:filterEnabledHint": null,
    },
    props: {
        clearFilter: String,
        createFilter: String,
        filterEnabledHint: String
    }
};
prepareConfigurationComponentConfig(DxFilterPanelTextsConfig);
const DxFilterPanelTexts = defineComponent(DxFilterPanelTextsConfig);
DxFilterPanelTexts.$_optionName = "texts";
const DxFormConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:accessKey": null,
        "update:activeStateEnabled": null,
        "update:alignItemLabels": null,
        "update:alignItemLabelsInAllGroups": null,
        "update:colCount": null,
        "update:colCountByScreen": null,
        "update:customizeItem": null,
        "update:disabled": null,
        "update:elementAttr": null,
        "update:focusStateEnabled": null,
        "update:formData": null,
        "update:height": null,
        "update:hint": null,
        "update:hoverStateEnabled": null,
        "update:isDirty": null,
        "update:items": null,
        "update:labelLocation": null,
        "update:labelMode": null,
        "update:minColWidth": null,
        "update:onContentReady": null,
        "update:onDisposing": null,
        "update:onEditorEnterKey": null,
        "update:onFieldDataChanged": null,
        "update:onInitialized": null,
        "update:onOptionChanged": null,
        "update:optionalMark": null,
        "update:readOnly": null,
        "update:requiredMark": null,
        "update:requiredMessage": null,
        "update:rtlEnabled": null,
        "update:screenByWidth": null,
        "update:scrollingEnabled": null,
        "update:showColonAfterLabel": null,
        "update:showOptionalMark": null,
        "update:showRequiredMark": null,
        "update:showValidationSummary": null,
        "update:tabIndex": null,
        "update:validationGroup": null,
        "update:visible": null,
        "update:width": null,
    },
    props: {
        accessKey: String,
        activeStateEnabled: Boolean,
        alignItemLabels: Boolean,
        alignItemLabelsInAllGroups: Boolean,
        colCount: [String, Number],
        colCountByScreen: Object,
        customizeItem: Function,
        disabled: Boolean,
        elementAttr: Object,
        focusStateEnabled: Boolean,
        formData: {},
        height: [Number, String],
        hint: String,
        hoverStateEnabled: Boolean,
        isDirty: Boolean,
        items: Array,
        labelLocation: String,
        labelMode: String,
        minColWidth: Number,
        onContentReady: Function,
        onDisposing: Function,
        onEditorEnterKey: Function,
        onFieldDataChanged: Function,
        onInitialized: Function,
        onOptionChanged: Function,
        optionalMark: String,
        readOnly: Boolean,
        requiredMark: String,
        requiredMessage: String,
        rtlEnabled: Boolean,
        screenByWidth: Function,
        scrollingEnabled: Boolean,
        showColonAfterLabel: Boolean,
        showOptionalMark: Boolean,
        showRequiredMark: Boolean,
        showValidationSummary: Boolean,
        tabIndex: Number,
        validationGroup: String,
        visible: Boolean,
        width: [Number, String]
    }
};
prepareConfigurationComponentConfig(DxFormConfig);
const DxForm = defineComponent(DxFormConfig);
DxForm.$_optionName = "form";
DxForm.$_expectedChildren = {
    ButtonItem: { isCollectionItem: true, optionName: "items" },
    colCountByScreen: { isCollectionItem: false, optionName: "colCountByScreen" },
    EmptyItem: { isCollectionItem: true, optionName: "items" },
    GroupItem: { isCollectionItem: true, optionName: "items" },
    item: { isCollectionItem: true, optionName: "items" },
    SimpleItem: { isCollectionItem: true, optionName: "items" },
    TabbedItem: { isCollectionItem: true, optionName: "items" }
};
const DxFormatConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:currency": null,
        "update:formatter": null,
        "update:parser": null,
        "update:precision": null,
        "update:type": null,
        "update:useCurrencyAccountingStyle": null,
    },
    props: {
        currency: String,
        formatter: Function,
        parser: Function,
        precision: Number,
        type: String,
        useCurrencyAccountingStyle: Boolean
    }
};
prepareConfigurationComponentConfig(DxFormatConfig);
const DxFormat = defineComponent(DxFormatConfig);
DxFormat.$_optionName = "format";
const DxFormItemConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:colSpan": null,
        "update:cssClass": null,
        "update:dataField": null,
        "update:editorOptions": null,
        "update:editorType": null,
        "update:helpText": null,
        "update:isRequired": null,
        "update:itemType": null,
        "update:label": null,
        "update:name": null,
        "update:template": null,
        "update:validationRules": null,
        "update:visible": null,
        "update:visibleIndex": null,
    },
    props: {
        colSpan: Number,
        cssClass: String,
        dataField: String,
        editorOptions: {},
        editorType: String,
        helpText: String,
        isRequired: Boolean,
        itemType: String,
        label: Object,
        name: String,
        template: {},
        validationRules: Array,
        visible: Boolean,
        visibleIndex: Number
    }
};
prepareConfigurationComponentConfig(DxFormItemConfig);
const DxFormItem = defineComponent(DxFormItemConfig);
DxFormItem.$_optionName = "formItem";
DxFormItem.$_expectedChildren = {
    AsyncRule: { isCollectionItem: true, optionName: "validationRules" },
    CompareRule: { isCollectionItem: true, optionName: "validationRules" },
    CustomRule: { isCollectionItem: true, optionName: "validationRules" },
    EmailRule: { isCollectionItem: true, optionName: "validationRules" },
    label: { isCollectionItem: false, optionName: "label" },
    NumericRule: { isCollectionItem: true, optionName: "validationRules" },
    PatternRule: { isCollectionItem: true, optionName: "validationRules" },
    RangeRule: { isCollectionItem: true, optionName: "validationRules" },
    RequiredRule: { isCollectionItem: true, optionName: "validationRules" },
    StringLengthRule: { isCollectionItem: true, optionName: "validationRules" },
    validationRule: { isCollectionItem: true, optionName: "validationRules" }
};
const DxFromConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:left": null,
        "update:opacity": null,
        "update:position": null,
        "update:scale": null,
        "update:top": null,
    },
    props: {
        left: Number,
        opacity: Number,
        position: Object,
        scale: Number,
        top: Number
    }
};
prepareConfigurationComponentConfig(DxFromConfig);
const DxFrom = defineComponent(DxFromConfig);
DxFrom.$_optionName = "from";
DxFrom.$_expectedChildren = {
    position: { isCollectionItem: false, optionName: "position" }
};
const DxGroupItemConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:alignItemLabels": null,
        "update:caption": null,
        "update:captionTemplate": null,
        "update:colCount": null,
        "update:colCountByScreen": null,
        "update:colSpan": null,
        "update:cssClass": null,
        "update:items": null,
        "update:itemType": null,
        "update:name": null,
        "update:template": null,
        "update:visible": null,
        "update:visibleIndex": null,
    },
    props: {
        alignItemLabels: Boolean,
        caption: String,
        captionTemplate: {},
        colCount: Number,
        colCountByScreen: Object,
        colSpan: Number,
        cssClass: String,
        items: Array,
        itemType: String,
        name: String,
        template: {},
        visible: Boolean,
        visibleIndex: Number
    }
};
prepareConfigurationComponentConfig(DxGroupItemConfig);
const DxGroupItem = defineComponent(DxGroupItemConfig);
DxGroupItem.$_optionName = "items";
DxGroupItem.$_isCollectionItem = true;
DxGroupItem.$_predefinedProps = {
    itemType: "group"
};
DxGroupItem.$_expectedChildren = {
    colCountByScreen: { isCollectionItem: false, optionName: "colCountByScreen" }
};
const DxGroupOperationDescriptionsConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:and": null,
        "update:notAnd": null,
        "update:notOr": null,
        "update:or": null,
    },
    props: {
        and: String,
        notAnd: String,
        notOr: String,
        or: String
    }
};
prepareConfigurationComponentConfig(DxGroupOperationDescriptionsConfig);
const DxGroupOperationDescriptions = defineComponent(DxGroupOperationDescriptionsConfig);
DxGroupOperationDescriptions.$_optionName = "groupOperationDescriptions";
const DxHeaderFilterConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:allowSearch": null,
        "update:allowSelectAll": null,
        "update: