devextreme-vue
Version:
DevExtreme Vue UI and Visualization Components
829 lines (827 loc) • 26.2 kB
JavaScript
/*!
* 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 Funnel from "devextreme/viz/funnel";
import { prepareConfigurationComponentConfig } from "./core/index";
const componentConfig = {
props: {
adaptiveLayout: Object,
algorithm: String,
argumentField: String,
colorField: String,
dataSource: [Array, Object, String],
disabled: Boolean,
elementAttr: Object,
export: Object,
hoverEnabled: Boolean,
inverted: Boolean,
item: Object,
label: Object,
legend: Object,
loadingIndicator: Object,
margin: Object,
neckHeight: Number,
neckWidth: Number,
onDisposing: Function,
onDrawn: Function,
onExported: Function,
onExporting: Function,
onFileSaving: Function,
onHoverChanged: Function,
onIncidentOccurred: Function,
onInitialized: Function,
onItemClick: Function,
onLegendClick: Function,
onOptionChanged: Function,
onSelectionChanged: Function,
palette: [Array, String],
paletteExtensionMode: String,
pathModified: Boolean,
redrawOnResize: Boolean,
resolveLabelOverlapping: String,
rtlEnabled: Boolean,
selectionMode: String,
size: Object,
sortData: Boolean,
theme: String,
title: [Object, String],
tooltip: Object,
valueField: String
},
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:adaptiveLayout": null,
"update:algorithm": null,
"update:argumentField": null,
"update:colorField": null,
"update:dataSource": null,
"update:disabled": null,
"update:elementAttr": null,
"update:export": null,
"update:hoverEnabled": null,
"update:inverted": null,
"update:item": null,
"update:label": null,
"update:legend": null,
"update:loadingIndicator": null,
"update:margin": null,
"update:neckHeight": null,
"update:neckWidth": null,
"update:onDisposing": null,
"update:onDrawn": null,
"update:onExported": null,
"update:onExporting": null,
"update:onFileSaving": null,
"update:onHoverChanged": null,
"update:onIncidentOccurred": null,
"update:onInitialized": null,
"update:onItemClick": null,
"update:onLegendClick": null,
"update:onOptionChanged": null,
"update:onSelectionChanged": null,
"update:palette": null,
"update:paletteExtensionMode": null,
"update:pathModified": null,
"update:redrawOnResize": null,
"update:resolveLabelOverlapping": null,
"update:rtlEnabled": null,
"update:selectionMode": null,
"update:size": null,
"update:sortData": null,
"update:theme": null,
"update:title": null,
"update:tooltip": null,
"update:valueField": null,
},
computed: {
instance() {
return this.$_instance;
}
},
beforeCreate() {
this.$_WidgetClass = Funnel;
this.$_hasAsyncTemplate = true;
this.$_expectedChildren = {
adaptiveLayout: { isCollectionItem: false, optionName: "adaptiveLayout" },
export: { isCollectionItem: false, optionName: "export" },
funnelTitle: { isCollectionItem: false, optionName: "title" },
item: { isCollectionItem: false, optionName: "item" },
label: { isCollectionItem: false, optionName: "label" },
legend: { isCollectionItem: false, optionName: "legend" },
loadingIndicator: { isCollectionItem: false, optionName: "loadingIndicator" },
margin: { isCollectionItem: false, optionName: "margin" },
size: { isCollectionItem: false, optionName: "size" },
title: { isCollectionItem: false, optionName: "title" },
tooltip: { isCollectionItem: false, optionName: "tooltip" }
};
}
};
prepareComponentConfig(componentConfig);
const DxFunnel = defineComponent(componentConfig);
const DxAdaptiveLayoutConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:height": null,
"update:keepLabels": null,
"update:width": null,
},
props: {
height: Number,
keepLabels: Boolean,
width: Number
}
};
prepareConfigurationComponentConfig(DxAdaptiveLayoutConfig);
const DxAdaptiveLayout = defineComponent(DxAdaptiveLayoutConfig);
DxAdaptiveLayout.$_optionName = "adaptiveLayout";
const DxBorderConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:color": null,
"update:cornerRadius": null,
"update:dashStyle": null,
"update:opacity": null,
"update:visible": null,
"update:width": null,
},
props: {
color: String,
cornerRadius: Number,
dashStyle: String,
opacity: Number,
visible: Boolean,
width: Number
}
};
prepareConfigurationComponentConfig(DxBorderConfig);
const DxBorder = defineComponent(DxBorderConfig);
DxBorder.$_optionName = "border";
const DxConnectorConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:color": null,
"update:opacity": null,
"update:visible": null,
"update:width": null,
},
props: {
color: String,
opacity: Number,
visible: Boolean,
width: Number
}
};
prepareConfigurationComponentConfig(DxConnectorConfig);
const DxConnector = defineComponent(DxConnectorConfig);
DxConnector.$_optionName = "connector";
const DxExportConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:backgroundColor": null,
"update:enabled": null,
"update:fileName": null,
"update:formats": null,
"update:margin": null,
"update:printingEnabled": null,
"update:svgToCanvas": null,
},
props: {
backgroundColor: String,
enabled: Boolean,
fileName: String,
formats: Array,
margin: Number,
printingEnabled: Boolean,
svgToCanvas: Function
}
};
prepareConfigurationComponentConfig(DxExportConfig);
const DxExport = defineComponent(DxExportConfig);
DxExport.$_optionName = "export";
const DxFontConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:color": null,
"update:family": null,
"update:opacity": null,
"update:size": null,
"update:weight": null,
},
props: {
color: String,
family: String,
opacity: Number,
size: [Number, String],
weight: Number
}
};
prepareConfigurationComponentConfig(DxFontConfig);
const DxFont = defineComponent(DxFontConfig);
DxFont.$_optionName = "font";
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 DxFunnelTitleConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:font": null,
"update:horizontalAlignment": null,
"update:margin": null,
"update:placeholderSize": null,
"update:subtitle": null,
"update:text": null,
"update:textOverflow": null,
"update:verticalAlignment": null,
"update:wordWrap": null,
},
props: {
font: Object,
horizontalAlignment: String,
margin: [Number, Object],
placeholderSize: Number,
subtitle: [Object, String],
text: String,
textOverflow: String,
verticalAlignment: String,
wordWrap: String
}
};
prepareConfigurationComponentConfig(DxFunnelTitleConfig);
const DxFunnelTitle = defineComponent(DxFunnelTitleConfig);
DxFunnelTitle.$_optionName = "title";
DxFunnelTitle.$_expectedChildren = {
font: { isCollectionItem: false, optionName: "font" },
funnelTitleSubtitle: { isCollectionItem: false, optionName: "subtitle" },
margin: { isCollectionItem: false, optionName: "margin" },
subtitle: { isCollectionItem: false, optionName: "subtitle" }
};
const DxFunnelTitleSubtitleConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:font": null,
"update:offset": null,
"update:text": null,
"update:textOverflow": null,
"update:wordWrap": null,
},
props: {
font: Object,
offset: Number,
text: String,
textOverflow: String,
wordWrap: String
}
};
prepareConfigurationComponentConfig(DxFunnelTitleSubtitleConfig);
const DxFunnelTitleSubtitle = defineComponent(DxFunnelTitleSubtitleConfig);
DxFunnelTitleSubtitle.$_optionName = "subtitle";
DxFunnelTitleSubtitle.$_expectedChildren = {
font: { isCollectionItem: false, optionName: "font" }
};
const DxHatchingConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:direction": null,
"update:opacity": null,
"update:step": null,
"update:width": null,
},
props: {
direction: String,
opacity: Number,
step: Number,
width: Number
}
};
prepareConfigurationComponentConfig(DxHatchingConfig);
const DxHatching = defineComponent(DxHatchingConfig);
DxHatching.$_optionName = "hatching";
const DxHoverStyleConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:border": null,
"update:hatching": null,
},
props: {
border: Object,
hatching: Object
}
};
prepareConfigurationComponentConfig(DxHoverStyleConfig);
const DxHoverStyle = defineComponent(DxHoverStyleConfig);
DxHoverStyle.$_optionName = "hoverStyle";
DxHoverStyle.$_expectedChildren = {
border: { isCollectionItem: false, optionName: "border" },
hatching: { isCollectionItem: false, optionName: "hatching" },
itemBorder: { isCollectionItem: false, optionName: "border" }
};
const DxItemConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:border": null,
"update:hoverStyle": null,
"update:selectionStyle": null,
},
props: {
border: Object,
hoverStyle: Object,
selectionStyle: Object
}
};
prepareConfigurationComponentConfig(DxItemConfig);
const DxItem = defineComponent(DxItemConfig);
DxItem.$_optionName = "item";
DxItem.$_expectedChildren = {
border: { isCollectionItem: false, optionName: "border" },
hoverStyle: { isCollectionItem: false, optionName: "hoverStyle" },
itemBorder: { isCollectionItem: false, optionName: "border" },
selectionStyle: { isCollectionItem: false, optionName: "selectionStyle" }
};
const DxItemBorderConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:color": null,
"update:visible": null,
"update:width": null,
},
props: {
color: String,
visible: Boolean,
width: Number
}
};
prepareConfigurationComponentConfig(DxItemBorderConfig);
const DxItemBorder = defineComponent(DxItemBorderConfig);
DxItemBorder.$_optionName = "border";
const DxLabelConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:backgroundColor": null,
"update:border": null,
"update:connector": null,
"update:customizeText": null,
"update:font": null,
"update:format": null,
"update:horizontalAlignment": null,
"update:horizontalOffset": null,
"update:position": null,
"update:showForZeroValues": null,
"update:textOverflow": null,
"update:visible": null,
"update:wordWrap": null,
},
props: {
backgroundColor: String,
border: Object,
connector: Object,
customizeText: Function,
font: Object,
format: [Object, String, Function],
horizontalAlignment: String,
horizontalOffset: Number,
position: String,
showForZeroValues: Boolean,
textOverflow: String,
visible: Boolean,
wordWrap: String
}
};
prepareConfigurationComponentConfig(DxLabelConfig);
const DxLabel = defineComponent(DxLabelConfig);
DxLabel.$_optionName = "label";
DxLabel.$_expectedChildren = {
border: { isCollectionItem: false, optionName: "border" },
connector: { isCollectionItem: false, optionName: "connector" },
font: { isCollectionItem: false, optionName: "font" },
format: { isCollectionItem: false, optionName: "format" },
labelBorder: { isCollectionItem: false, optionName: "border" }
};
const DxLabelBorderConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:color": null,
"update:dashStyle": null,
"update:visible": null,
"update:width": null,
},
props: {
color: String,
dashStyle: String,
visible: Boolean,
width: Number
}
};
prepareConfigurationComponentConfig(DxLabelBorderConfig);
const DxLabelBorder = defineComponent(DxLabelBorderConfig);
DxLabelBorder.$_optionName = "border";
const DxLegendConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:backgroundColor": null,
"update:border": null,
"update:columnCount": null,
"update:columnItemSpacing": null,
"update:customizeHint": null,
"update:customizeItems": null,
"update:customizeText": null,
"update:font": null,
"update:horizontalAlignment": null,
"update:itemsAlignment": null,
"update:itemTextPosition": null,
"update:margin": null,
"update:markerSize": null,
"update:markerTemplate": null,
"update:orientation": null,
"update:paddingLeftRight": null,
"update:paddingTopBottom": null,
"update:rowCount": null,
"update:rowItemSpacing": null,
"update:title": null,
"update:verticalAlignment": null,
"update:visible": null,
},
props: {
backgroundColor: String,
border: Object,
columnCount: Number,
columnItemSpacing: Number,
customizeHint: Function,
customizeItems: Function,
customizeText: Function,
font: Object,
horizontalAlignment: String,
itemsAlignment: String,
itemTextPosition: String,
margin: [Number, Object],
markerSize: Number,
markerTemplate: {},
orientation: String,
paddingLeftRight: Number,
paddingTopBottom: Number,
rowCount: Number,
rowItemSpacing: Number,
title: [Object, String],
verticalAlignment: String,
visible: Boolean
}
};
prepareConfigurationComponentConfig(DxLegendConfig);
const DxLegend = defineComponent(DxLegendConfig);
DxLegend.$_optionName = "legend";
DxLegend.$_expectedChildren = {
border: { isCollectionItem: false, optionName: "border" },
font: { isCollectionItem: false, optionName: "font" },
legendBorder: { isCollectionItem: false, optionName: "border" },
legendTitle: { isCollectionItem: false, optionName: "title" },
margin: { isCollectionItem: false, optionName: "margin" },
title: { isCollectionItem: false, optionName: "title" }
};
const DxLegendBorderConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:color": null,
"update:cornerRadius": null,
"update:dashStyle": null,
"update:opacity": null,
"update:visible": null,
"update:width": null,
},
props: {
color: String,
cornerRadius: Number,
dashStyle: String,
opacity: Number,
visible: Boolean,
width: Number
}
};
prepareConfigurationComponentConfig(DxLegendBorderConfig);
const DxLegendBorder = defineComponent(DxLegendBorderConfig);
DxLegendBorder.$_optionName = "border";
const DxLegendTitleConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:font": null,
"update:horizontalAlignment": null,
"update:margin": null,
"update:placeholderSize": null,
"update:subtitle": null,
"update:text": null,
"update:verticalAlignment": null,
},
props: {
font: Object,
horizontalAlignment: String,
margin: Object,
placeholderSize: Number,
subtitle: [Object, String],
text: String,
verticalAlignment: String
}
};
prepareConfigurationComponentConfig(DxLegendTitleConfig);
const DxLegendTitle = defineComponent(DxLegendTitleConfig);
DxLegendTitle.$_optionName = "title";
DxLegendTitle.$_expectedChildren = {
font: { isCollectionItem: false, optionName: "font" },
legendTitleSubtitle: { isCollectionItem: false, optionName: "subtitle" },
margin: { isCollectionItem: false, optionName: "margin" },
subtitle: { isCollectionItem: false, optionName: "subtitle" }
};
const DxLegendTitleSubtitleConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:font": null,
"update:offset": null,
"update:text": null,
},
props: {
font: Object,
offset: Number,
text: String
}
};
prepareConfigurationComponentConfig(DxLegendTitleSubtitleConfig);
const DxLegendTitleSubtitle = defineComponent(DxLegendTitleSubtitleConfig);
DxLegendTitleSubtitle.$_optionName = "subtitle";
DxLegendTitleSubtitle.$_expectedChildren = {
font: { isCollectionItem: false, optionName: "font" }
};
const DxLoadingIndicatorConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:backgroundColor": null,
"update:enabled": null,
"update:font": null,
"update:show": null,
"update:text": null,
},
props: {
backgroundColor: String,
enabled: Boolean,
font: Object,
show: Boolean,
text: String
}
};
prepareConfigurationComponentConfig(DxLoadingIndicatorConfig);
const DxLoadingIndicator = defineComponent(DxLoadingIndicatorConfig);
DxLoadingIndicator.$_optionName = "loadingIndicator";
DxLoadingIndicator.$_expectedChildren = {
font: { isCollectionItem: false, optionName: "font" }
};
const DxMarginConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:bottom": null,
"update:left": null,
"update:right": null,
"update:top": null,
},
props: {
bottom: Number,
left: Number,
right: Number,
top: Number
}
};
prepareConfigurationComponentConfig(DxMarginConfig);
const DxMargin = defineComponent(DxMarginConfig);
DxMargin.$_optionName = "margin";
const DxSelectionStyleConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:border": null,
"update:hatching": null,
},
props: {
border: Object,
hatching: Object
}
};
prepareConfigurationComponentConfig(DxSelectionStyleConfig);
const DxSelectionStyle = defineComponent(DxSelectionStyleConfig);
DxSelectionStyle.$_optionName = "selectionStyle";
DxSelectionStyle.$_expectedChildren = {
border: { isCollectionItem: false, optionName: "border" },
hatching: { isCollectionItem: false, optionName: "hatching" },
itemBorder: { isCollectionItem: false, optionName: "border" }
};
const DxShadowConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:blur": null,
"update:color": null,
"update:offsetX": null,
"update:offsetY": null,
"update:opacity": null,
},
props: {
blur: Number,
color: String,
offsetX: Number,
offsetY: Number,
opacity: Number
}
};
prepareConfigurationComponentConfig(DxShadowConfig);
const DxShadow = defineComponent(DxShadowConfig);
DxShadow.$_optionName = "shadow";
const DxSizeConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:height": null,
"update:width": null,
},
props: {
height: Number,
width: Number
}
};
prepareConfigurationComponentConfig(DxSizeConfig);
const DxSize = defineComponent(DxSizeConfig);
DxSize.$_optionName = "size";
const DxSubtitleConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:font": null,
"update:offset": null,
"update:text": null,
"update:textOverflow": null,
"update:wordWrap": null,
},
props: {
font: Object,
offset: Number,
text: String,
textOverflow: String,
wordWrap: String
}
};
prepareConfigurationComponentConfig(DxSubtitleConfig);
const DxSubtitle = defineComponent(DxSubtitleConfig);
DxSubtitle.$_optionName = "subtitle";
DxSubtitle.$_expectedChildren = {
font: { isCollectionItem: false, optionName: "font" }
};
const DxTitleConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:font": null,
"update:horizontalAlignment": null,
"update:margin": null,
"update:placeholderSize": null,
"update:subtitle": null,
"update:text": null,
"update:textOverflow": null,
"update:verticalAlignment": null,
"update:wordWrap": null,
},
props: {
font: Object,
horizontalAlignment: String,
margin: [Object, Number],
placeholderSize: Number,
subtitle: [Object, String],
text: String,
textOverflow: String,
verticalAlignment: String,
wordWrap: String
}
};
prepareConfigurationComponentConfig(DxTitleConfig);
const DxTitle = defineComponent(DxTitleConfig);
DxTitle.$_optionName = "title";
DxTitle.$_expectedChildren = {
font: { isCollectionItem: false, optionName: "font" },
funnelTitleSubtitle: { isCollectionItem: false, optionName: "subtitle" },
legendTitleSubtitle: { isCollectionItem: false, optionName: "subtitle" },
margin: { isCollectionItem: false, optionName: "margin" }
};
const DxTooltipConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:arrowLength": null,
"update:border": null,
"update:color": null,
"update:container": null,
"update:contentTemplate": null,
"update:cornerRadius": null,
"update:customizeTooltip": null,
"update:enabled": null,
"update:font": null,
"update:format": null,
"update:opacity": null,
"update:paddingLeftRight": null,
"update:paddingTopBottom": null,
"update:shadow": null,
"update:zIndex": null,
},
props: {
arrowLength: Number,
border: Object,
color: String,
container: {},
contentTemplate: {},
cornerRadius: Number,
customizeTooltip: Function,
enabled: Boolean,
font: Object,
format: [Object, String, Function],
opacity: Number,
paddingLeftRight: Number,
paddingTopBottom: Number,
shadow: Object,
zIndex: Number
}
};
prepareConfigurationComponentConfig(DxTooltipConfig);
const DxTooltip = defineComponent(DxTooltipConfig);
DxTooltip.$_optionName = "tooltip";
DxTooltip.$_expectedChildren = {
border: { isCollectionItem: false, optionName: "border" },
font: { isCollectionItem: false, optionName: "font" },
format: { isCollectionItem: false, optionName: "format" },
shadow: { isCollectionItem: false, optionName: "shadow" },
tooltipBorder: { isCollectionItem: false, optionName: "border" }
};
const DxTooltipBorderConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:color": null,
"update:dashStyle": null,
"update:opacity": null,
"update:visible": null,
"update:width": null,
},
props: {
color: String,
dashStyle: String,
opacity: Number,
visible: Boolean,
width: Number
}
};
prepareConfigurationComponentConfig(DxTooltipBorderConfig);
const DxTooltipBorder = defineComponent(DxTooltipBorderConfig);
DxTooltipBorder.$_optionName = "border";
export default DxFunnel;
export { DxFunnel, DxAdaptiveLayout, DxBorder, DxConnector, DxExport, DxFont, DxFormat, DxFunnelTitle, DxFunnelTitleSubtitle, DxHatching, DxHoverStyle, DxItem, DxItemBorder, DxLabel, DxLabelBorder, DxLegend, DxLegendBorder, DxLegendTitle, DxLegendTitleSubtitle, DxLoadingIndicator, DxMargin, DxSelectionStyle, DxShadow, DxSize, DxSubtitle, DxTitle, DxTooltip, DxTooltipBorder };