devextreme-vue/esm/drop-down-button.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 DropDownButton from "devextreme/ui/drop_down_button";
import { prepareConfigurationComponentConfig } from "./core/index";
const componentConfig = {
    props: {
        accessKey: String,
        activeStateEnabled: Boolean,
        dataSource: [Array, Object, String],
        deferRendering: Boolean,
        disabled: Boolean,
        displayExpr: [Function, String],
        dropDownContentTemplate: {},
        dropDownOptions: Object,
        elementAttr: Object,
        focusStateEnabled: Boolean,
        height: [Number, String],
        hint: String,
        hoverStateEnabled: Boolean,
        icon: String,
        items: Array,
        itemTemplate: {},
        keyExpr: String,
        noDataText: String,
        onButtonClick: Function,
        onContentReady: Function,
        onDisposing: Function,
        onInitialized: Function,
        onItemClick: Function,
        onOptionChanged: Function,
        onSelectionChanged: Function,
        opened: Boolean,
        rtlEnabled: Boolean,
        selectedItem: {},
        selectedItemKey: [Number, String],
        showArrowIcon: Boolean,
        splitButton: Boolean,
        stylingMode: String,
        tabIndex: Number,
        template: {},
        text: String,
        type: String,
        useItemTextAsTitle: Boolean,
        useSelectMode: Boolean,
        visible: Boolean,
        width: [Number, String],
        wrapItemText: Boolean
    },
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:accessKey": null,
        "update:activeStateEnabled": null,
        "update:dataSource": null,
        "update:deferRendering": null,
        "update:disabled": null,
        "update:displayExpr": null,
        "update:dropDownContentTemplate": null,
        "update:dropDownOptions": null,
        "update:elementAttr": null,
        "update:focusStateEnabled": null,
        "update:height": null,
        "update:hint": null,
        "update:hoverStateEnabled": null,
        "update:icon": null,
        "update:items": null,
        "update:itemTemplate": null,
        "update:keyExpr": null,
        "update:noDataText": null,
        "update:onButtonClick": null,
        "update:onContentReady": null,
        "update:onDisposing": null,
        "update:onInitialized": null,
        "update:onItemClick": null,
        "update:onOptionChanged": null,
        "update:onSelectionChanged": null,
        "update:opened": null,
        "update:rtlEnabled": null,
        "update:selectedItem": null,
        "update:selectedItemKey": null,
        "update:showArrowIcon": null,
        "update:splitButton": null,
        "update:stylingMode": null,
        "update:tabIndex": null,
        "update:template": null,
        "update:text": null,
        "update:type": null,
        "update:useItemTextAsTitle": null,
        "update:useSelectMode": null,
        "update:visible": null,
        "update:width": null,
        "update:wrapItemText": null,
    },
    computed: {
        instance() {
            return this.$_instance;
        }
    },
    beforeCreate() {
        this.$_WidgetClass = DropDownButton;
        this.$_hasAsyncTemplate = true;
        this.$_expectedChildren = {
            dropDownOptions: { isCollectionItem: false, optionName: "dropDownOptions" },
            item: { isCollectionItem: true, optionName: "items" }
        };
    }
};
prepareComponentConfig(componentConfig);
const DxDropDownButton = 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 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 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 DxDropDownOptionsConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:accessKey": null,
        "update:animation": null,
        "update:container": null,
        "update:contentTemplate": null,
        "update:deferRendering": null,
        "update:disabled": null,
        "update:dragAndResizeArea": null,
        "update:dragEnabled": null,
        "update:dragOutsideBoundary": null,
        "update:enableBodyScroll": null,
        "update:focusStateEnabled": null,
        "update:fullScreen": null,
        "update:height": null,
        "update:hideOnOutsideClick": null,
        "update:hideOnParentScroll": null,
        "update:hint": null,
        "update:hoverStateEnabled": null,
        "update:maxHeight": null,
        "update:maxWidth": null,
        "update:minHeight": null,
        "update:minWidth": null,
        "update:onContentReady": null,
        "update:onDisposing": null,
        "update:onHidden": null,
        "update:onHiding": null,
        "update:onInitialized": null,
        "update:onOptionChanged": null,
        "update:onResize": null,
        "update:onResizeEnd": null,
        "update:onResizeStart": null,
        "update:onShowing": null,
        "update:onShown": null,
        "update:onTitleRendered": null,
        "update:position": null,
        "update:resizeEnabled": null,
        "update:restorePosition": null,
        "update:rtlEnabled": null,
        "update:shading": null,
        "update:shadingColor": null,
        "update:showCloseButton": null,
        "update:showTitle": null,
        "update:tabIndex": null,
        "update:title": null,
        "update:titleTemplate": null,
        "update:toolbarItems": null,
        "update:visible": null,
        "update:width": null,
        "update:wrapperAttr": null,
    },
    props: {
        accessKey: String,
        animation: Object,
        container: {},
        contentTemplate: {},
        deferRendering: Boolean,
        disabled: Boolean,
        dragAndResizeArea: {},
        dragEnabled: Boolean,
        dragOutsideBoundary: Boolean,
        enableBodyScroll: Boolean,
        focusStateEnabled: Boolean,
        fullScreen: Boolean,
        height: [Number, String],
        hideOnOutsideClick: [Boolean, Function],
        hideOnParentScroll: Boolean,
        hint: String,
        hoverStateEnabled: Boolean,
        maxHeight: [Number, String],
        maxWidth: [Number, String],
        minHeight: [Number, String],
        minWidth: [Number, String],
        onContentReady: Function,
        onDisposing: Function,
        onHidden: Function,
        onHiding: Function,
        onInitialized: Function,
        onOptionChanged: Function,
        onResize: Function,
        onResizeEnd: Function,
        onResizeStart: Function,
        onShowing: Function,
        onShown: Function,
        onTitleRendered: Function,
        position: [Function, String, Object],
        resizeEnabled: Boolean,
        restorePosition: Boolean,
        rtlEnabled: Boolean,
        shading: Boolean,
        shadingColor: String,
        showCloseButton: Boolean,
        showTitle: Boolean,
        tabIndex: Number,
        title: String,
        titleTemplate: {},
        toolbarItems: Array,
        visible: Boolean,
        width: [Number, String],
        wrapperAttr: {}
    }
};
prepareConfigurationComponentConfig(DxDropDownOptionsConfig);
const DxDropDownOptions = defineComponent(DxDropDownOptionsConfig);
DxDropDownOptions.$_optionName = "dropDownOptions";
DxDropDownOptions.$_expectedChildren = {
    animation: { isCollectionItem: false, optionName: "animation" },
    position: { isCollectionItem: false, optionName: "position" },
    toolbarItem: { isCollectionItem: true, optionName: "toolbarItems" }
};
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 DxHideConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:complete": null,
        "update:delay": null,
        "update:direction": null,
        "update:duration": null,
        "update:easing": null,
        "update:from": null,
        "update:staggerDelay": null,
        "update:start": null,
        "update:to": null,
        "update:type": null,
    },
    props: {
        complete: Function,
        delay: Number,
        direction: String,
        duration: Number,
        easing: String,
        from: Object,
        staggerDelay: Number,
        start: Function,
        to: Object,
        type: String
    }
};
prepareConfigurationComponentConfig(DxHideConfig);
const DxHide = defineComponent(DxHideConfig);
DxHide.$_optionName = "hide";
DxHide.$_expectedChildren = {
    from: { isCollectionItem: false, optionName: "from" },
    to: { isCollectionItem: false, optionName: "to" }
};
const DxItemConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:badge": null,
        "update:disabled": null,
        "update:html": null,
        "update:icon": null,
        "update:onClick": null,
        "update:template": null,
        "update:text": null,
        "update:visible": null,
    },
    props: {
        badge: String,
        disabled: Boolean,
        html: String,
        icon: String,
        onClick: Function,
        template: {},
        text: String,
        visible: Boolean
    }
};
prepareConfigurationComponentConfig(DxItemConfig);
const DxItem = defineComponent(DxItemConfig);
DxItem.$_optionName = "items";
DxItem.$_isCollectionItem = true;
const DxMyConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:x": null,
        "update:y": null,
    },
    props: {
        x: String,
        y: String
    }
};
prepareConfigurationComponentConfig(DxMyConfig);
const DxMy = defineComponent(DxMyConfig);
DxMy.$_optionName = "my";
const DxOffsetConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:x": null,
        "update:y": null,
    },
    props: {
        x: Number,
        y: Number
    }
};
prepareConfigurationComponentConfig(DxOffsetConfig);
const DxOffset = defineComponent(DxOffsetConfig);
DxOffset.$_optionName = "offset";
const DxPositionConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:at": null,
        "update:boundary": null,
        "update:boundaryOffset": null,
        "update:collision": null,
        "update:my": null,
        "update:of": null,
        "update:offset": null,
    },
    props: {
        at: [Object, String],
        boundary: {},
        boundaryOffset: [Object, String],
        collision: [String, Object],
        my: [Object, String],
        of: {},
        offset: [Object, String]
    }
};
prepareConfigurationComponentConfig(DxPositionConfig);
const DxPosition = defineComponent(DxPositionConfig);
DxPosition.$_optionName = "position";
DxPosition.$_expectedChildren = {
    at: { isCollectionItem: false, optionName: "at" },
    boundaryOffset: { isCollectionItem: false, optionName: "boundaryOffset" },
    collision: { isCollectionItem: false, optionName: "collision" },
    my: { isCollectionItem: false, optionName: "my" },
    offset: { isCollectionItem: false, optionName: "offset" }
};
const DxShowConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:complete": null,
        "update:delay": null,
        "update:direction": null,
        "update:duration": null,
        "update:easing": null,
        "update:from": null,
        "update:staggerDelay": null,
        "update:start": null,
        "update:to": null,
        "update:type": null,
    },
    props: {
        complete: Function,
        delay: Number,
        direction: String,
        duration: Number,
        easing: String,
        from: Object,
        staggerDelay: Number,
        start: Function,
        to: Object,
        type: String
    }
};
prepareConfigurationComponentConfig(DxShowConfig);
const DxShow = defineComponent(DxShowConfig);
DxShow.$_optionName = "show";
DxShow.$_expectedChildren = {
    from: { isCollectionItem: false, optionName: "from" },
    to: { isCollectionItem: false, optionName: "to" }
};
const DxToConfig = {
    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(DxToConfig);
const DxTo = defineComponent(DxToConfig);
DxTo.$_optionName = "to";
DxTo.$_expectedChildren = {
    position: { isCollectionItem: false, optionName: "position" }
};
const DxToolbarItemConfig = {
    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:options": null,
        "update:showText": null,
        "update:template": null,
        "update:text": null,
        "update:toolbar": null,
        "update:visible": null,
        "update:widget": null,
    },
    props: {
        cssClass: String,
        disabled: Boolean,
        html: String,
        locateInMenu: String,
        location: String,
        menuItemTemplate: {},
        options: {},
        showText: String,
        template: {},
        text: String,
        toolbar: String,
        visible: Boolean,
        widget: String
    }
};
prepareConfigurationComponentConfig(DxToolbarItemConfig);
const DxToolbarItem = defineComponent(DxToolbarItemConfig);
DxToolbarItem.$_optionName = "toolbarItems";
DxToolbarItem.$_isCollectionItem = true;
export default DxDropDownButton;
export { DxDropDownButton, DxAnimation, DxAt, DxBoundaryOffset, DxCollision, DxDropDownOptions, DxFrom, DxHide, DxItem, DxMy, DxOffset, DxPosition, DxShow, DxTo, DxToolbarItem };