UNPKG

devextreme-vue

Version:

DevExtreme Vue UI and Visualization Components

862 lines (860 loc) • 28.3 kB
/*! * devextreme-vue * Version: 25.1.6 * Build date: Mon Oct 13 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 */ "use strict"; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); exports.DxTooltipBorder = exports.DxTooltip = exports.DxTitle = exports.DxSubtitle = exports.DxSize = exports.DxShadow = exports.DxSelectionStyle = exports.DxMargin = exports.DxLoadingIndicator = exports.DxLegendTitleSubtitle = exports.DxLegendTitle = exports.DxLegendBorder = exports.DxLegend = exports.DxLabelBorder = exports.DxLabel = exports.DxItemBorder = exports.DxItem = exports.DxHoverStyle = exports.DxHatching = exports.DxFunnelTitleSubtitle = exports.DxFunnelTitle = exports.DxFormat = exports.DxFont = exports.DxExport = exports.DxConnector = exports.DxBorder = exports.DxAdaptiveLayout = exports.DxFunnel = void 0; const vue_1 = require("vue"); const index_1 = require("./core/index"); const funnel_1 = __importDefault(require("devextreme/viz/funnel")); const index_2 = require("./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_1.default; 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" } }; } }; (0, index_1.prepareComponentConfig)(componentConfig); const DxFunnel = (0, vue_1.defineComponent)(componentConfig); exports.DxFunnel = DxFunnel; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxAdaptiveLayoutConfig); const DxAdaptiveLayout = (0, vue_1.defineComponent)(DxAdaptiveLayoutConfig); exports.DxAdaptiveLayout = DxAdaptiveLayout; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxBorderConfig); const DxBorder = (0, vue_1.defineComponent)(DxBorderConfig); exports.DxBorder = DxBorder; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxConnectorConfig); const DxConnector = (0, vue_1.defineComponent)(DxConnectorConfig); exports.DxConnector = DxConnector; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxExportConfig); const DxExport = (0, vue_1.defineComponent)(DxExportConfig); exports.DxExport = DxExport; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxFontConfig); const DxFont = (0, vue_1.defineComponent)(DxFontConfig); exports.DxFont = DxFont; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxFormatConfig); const DxFormat = (0, vue_1.defineComponent)(DxFormatConfig); exports.DxFormat = DxFormat; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxFunnelTitleConfig); const DxFunnelTitle = (0, vue_1.defineComponent)(DxFunnelTitleConfig); exports.DxFunnelTitle = DxFunnelTitle; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxFunnelTitleSubtitleConfig); const DxFunnelTitleSubtitle = (0, vue_1.defineComponent)(DxFunnelTitleSubtitleConfig); exports.DxFunnelTitleSubtitle = DxFunnelTitleSubtitle; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxHatchingConfig); const DxHatching = (0, vue_1.defineComponent)(DxHatchingConfig); exports.DxHatching = DxHatching; DxHatching.$_optionName = "hatching"; const DxHoverStyleConfig = { emits: { "update:isActive": null, "update:hoveredElement": null, "update:border": null, "update:hatching": null, }, props: { border: Object, hatching: Object } }; (0, index_2.prepareConfigurationComponentConfig)(DxHoverStyleConfig); const DxHoverStyle = (0, vue_1.defineComponent)(DxHoverStyleConfig); exports.DxHoverStyle = DxHoverStyle; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxItemConfig); const DxItem = (0, vue_1.defineComponent)(DxItemConfig); exports.DxItem = DxItem; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxItemBorderConfig); const DxItemBorder = (0, vue_1.defineComponent)(DxItemBorderConfig); exports.DxItemBorder = DxItemBorder; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxLabelConfig); const DxLabel = (0, vue_1.defineComponent)(DxLabelConfig); exports.DxLabel = DxLabel; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxLabelBorderConfig); const DxLabelBorder = (0, vue_1.defineComponent)(DxLabelBorderConfig); exports.DxLabelBorder = DxLabelBorder; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxLegendConfig); const DxLegend = (0, vue_1.defineComponent)(DxLegendConfig); exports.DxLegend = DxLegend; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxLegendBorderConfig); const DxLegendBorder = (0, vue_1.defineComponent)(DxLegendBorderConfig); exports.DxLegendBorder = DxLegendBorder; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxLegendTitleConfig); const DxLegendTitle = (0, vue_1.defineComponent)(DxLegendTitleConfig); exports.DxLegendTitle = DxLegendTitle; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxLegendTitleSubtitleConfig); const DxLegendTitleSubtitle = (0, vue_1.defineComponent)(DxLegendTitleSubtitleConfig); exports.DxLegendTitleSubtitle = DxLegendTitleSubtitle; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxLoadingIndicatorConfig); const DxLoadingIndicator = (0, vue_1.defineComponent)(DxLoadingIndicatorConfig); exports.DxLoadingIndicator = DxLoadingIndicator; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxMarginConfig); const DxMargin = (0, vue_1.defineComponent)(DxMarginConfig); exports.DxMargin = DxMargin; DxMargin.$_optionName = "margin"; const DxSelectionStyleConfig = { emits: { "update:isActive": null, "update:hoveredElement": null, "update:border": null, "update:hatching": null, }, props: { border: Object, hatching: Object } }; (0, index_2.prepareConfigurationComponentConfig)(DxSelectionStyleConfig); const DxSelectionStyle = (0, vue_1.defineComponent)(DxSelectionStyleConfig); exports.DxSelectionStyle = DxSelectionStyle; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxShadowConfig); const DxShadow = (0, vue_1.defineComponent)(DxShadowConfig); exports.DxShadow = DxShadow; DxShadow.$_optionName = "shadow"; const DxSizeConfig = { emits: { "update:isActive": null, "update:hoveredElement": null, "update:height": null, "update:width": null, }, props: { height: Number, width: Number } }; (0, index_2.prepareConfigurationComponentConfig)(DxSizeConfig); const DxSize = (0, vue_1.defineComponent)(DxSizeConfig); exports.DxSize = DxSize; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxSubtitleConfig); const DxSubtitle = (0, vue_1.defineComponent)(DxSubtitleConfig); exports.DxSubtitle = DxSubtitle; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxTitleConfig); const DxTitle = (0, vue_1.defineComponent)(DxTitleConfig); exports.DxTitle = DxTitle; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxTooltipConfig); const DxTooltip = (0, vue_1.defineComponent)(DxTooltipConfig); exports.DxTooltip = DxTooltip; 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 } }; (0, index_2.prepareConfigurationComponentConfig)(DxTooltipBorderConfig); const DxTooltipBorder = (0, vue_1.defineComponent)(DxTooltipBorderConfig); exports.DxTooltipBorder = DxTooltipBorder; DxTooltipBorder.$_optionName = "border"; exports.default = DxFunnel;