devextreme-vue/esm/responsive-box.js

DevExtreme Vue UI and Visualization Components

/*!
 * devextreme-vue
 * Version: 25.1.3
 * Build date: Wed Jun 25 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 ResponsiveBox from "devextreme/ui/responsive_box";
import { prepareConfigurationComponentConfig } from "./core/index";
const componentConfig = {
    props: {
        cols: Array,
        dataSource: [Array, Object, String],
        disabled: Boolean,
        elementAttr: Object,
        height: [Number, String],
        hoverStateEnabled: Boolean,
        itemHoldTimeout: Number,
        items: Array,
        itemTemplate: {},
        onContentReady: Function,
        onDisposing: Function,
        onInitialized: Function,
        onItemClick: Function,
        onItemContextMenu: Function,
        onItemHold: Function,
        onItemRendered: Function,
        onOptionChanged: Function,
        rows: Array,
        rtlEnabled: Boolean,
        screenByWidth: Function,
        singleColumnScreen: String,
        visible: Boolean,
        width: [Number, String]
    },
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:cols": null,
        "update:dataSource": null,
        "update:disabled": null,
        "update:elementAttr": null,
        "update:height": null,
        "update:hoverStateEnabled": null,
        "update:itemHoldTimeout": null,
        "update:items": null,
        "update:itemTemplate": null,
        "update:onContentReady": null,
        "update:onDisposing": null,
        "update:onInitialized": null,
        "update:onItemClick": null,
        "update:onItemContextMenu": null,
        "update:onItemHold": null,
        "update:onItemRendered": null,
        "update:onOptionChanged": null,
        "update:rows": null,
        "update:rtlEnabled": null,
        "update:screenByWidth": null,
        "update:singleColumnScreen": null,
        "update:visible": null,
        "update:width": null,
    },
    computed: {
        instance() {
            return this.$_instance;
        }
    },
    beforeCreate() {
        this.$_WidgetClass = ResponsiveBox;
        this.$_hasAsyncTemplate = true;
        this.$_expectedChildren = {
            col: { isCollectionItem: true, optionName: "cols" },
            item: { isCollectionItem: true, optionName: "items" },
            row: { isCollectionItem: true, optionName: "rows" }
        };
    }
};
prepareComponentConfig(componentConfig);
const DxResponsiveBox = defineComponent(componentConfig);
const DxColConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:baseSize": null,
        "update:ratio": null,
        "update:screen": null,
        "update:shrink": null,
    },
    props: {
        baseSize: [Number, String],
        ratio: Number,
        screen: String,
        shrink: Number
    }
};
prepareConfigurationComponentConfig(DxColConfig);
const DxCol = defineComponent(DxColConfig);
DxCol.$_optionName = "cols";
DxCol.$_isCollectionItem = true;
const DxItemConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:disabled": null,
        "update:html": null,
        "update:location": null,
        "update:template": null,
        "update:text": null,
        "update:visible": null,
    },
    props: {
        disabled: Boolean,
        html: String,
        location: [Array, Object],
        template: {},
        text: String,
        visible: Boolean
    }
};
prepareConfigurationComponentConfig(DxItemConfig);
const DxItem = defineComponent(DxItemConfig);
DxItem.$_optionName = "items";
DxItem.$_isCollectionItem = true;
DxItem.$_expectedChildren = {
    location: { isCollectionItem: true, optionName: "location" }
};
const DxLocationConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:col": null,
        "update:colspan": null,
        "update:row": null,
        "update:rowspan": null,
        "update:screen": null,
    },
    props: {
        col: Number,
        colspan: Number,
        row: Number,
        rowspan: Number,
        screen: String
    }
};
prepareConfigurationComponentConfig(DxLocationConfig);
const DxLocation = defineComponent(DxLocationConfig);
DxLocation.$_optionName = "location";
DxLocation.$_isCollectionItem = true;
const DxRowConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:baseSize": null,
        "update:ratio": null,
        "update:screen": null,
        "update:shrink": null,
    },
    props: {
        baseSize: [Number, String],
        ratio: Number,
        screen: String,
        shrink: Number
    }
};
prepareConfigurationComponentConfig(DxRowConfig);
const DxRow = defineComponent(DxRowConfig);
DxRow.$_optionName = "rows";
DxRow.$_isCollectionItem = true;
export default DxResponsiveBox;
export { DxResponsiveBox, DxCol, DxItem, DxLocation, DxRow };