devextreme-vue
Version:
DevExtreme Vue UI and Visualization Components
759 lines (757 loc) • 23.5 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 LinearGauge from "devextreme/viz/linear_gauge";
import { prepareConfigurationComponentConfig } from "./core/index";
const componentConfig = {
props: {
animation: Object,
containerBackgroundColor: String,
disabled: Boolean,
elementAttr: Object,
export: Object,
geometry: Object,
loadingIndicator: Object,
margin: Object,
onDisposing: Function,
onDrawn: Function,
onExported: Function,
onExporting: Function,
onFileSaving: Function,
onIncidentOccurred: Function,
onInitialized: Function,
onOptionChanged: Function,
onTooltipHidden: Function,
onTooltipShown: Function,
pathModified: Boolean,
rangeContainer: Object,
redrawOnResize: Boolean,
rtlEnabled: Boolean,
scale: Object,
size: Object,
subvalueIndicator: Object,
subvalues: Array,
theme: String,
title: [Object, String],
tooltip: Object,
value: Number,
valueIndicator: Object
},
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:animation": null,
"update:containerBackgroundColor": null,
"update:disabled": null,
"update:elementAttr": null,
"update:export": null,
"update:geometry": null,
"update:loadingIndicator": null,
"update:margin": null,
"update:onDisposing": null,
"update:onDrawn": null,
"update:onExported": null,
"update:onExporting": null,
"update:onFileSaving": null,
"update:onIncidentOccurred": null,
"update:onInitialized": null,
"update:onOptionChanged": null,
"update:onTooltipHidden": null,
"update:onTooltipShown": null,
"update:pathModified": null,
"update:rangeContainer": null,
"update:redrawOnResize": null,
"update:rtlEnabled": null,
"update:scale": null,
"update:size": null,
"update:subvalueIndicator": null,
"update:subvalues": null,
"update:theme": null,
"update:title": null,
"update:tooltip": null,
"update:value": null,
"update:valueIndicator": null,
},
computed: {
instance() {
return this.$_instance;
}
},
beforeCreate() {
this.$_WidgetClass = LinearGauge;
this.$_hasAsyncTemplate = true;
this.$_expectedChildren = {
animation: { isCollectionItem: false, optionName: "animation" },
export: { isCollectionItem: false, optionName: "export" },
geometry: { isCollectionItem: false, optionName: "geometry" },
loadingIndicator: { isCollectionItem: false, optionName: "loadingIndicator" },
margin: { isCollectionItem: false, optionName: "margin" },
rangeContainer: { isCollectionItem: false, optionName: "rangeContainer" },
scale: { isCollectionItem: false, optionName: "scale" },
size: { isCollectionItem: false, optionName: "size" },
subvalueIndicator: { isCollectionItem: false, optionName: "subvalueIndicator" },
title: { isCollectionItem: false, optionName: "title" },
tooltip: { isCollectionItem: false, optionName: "tooltip" },
valueIndicator: { isCollectionItem: false, optionName: "valueIndicator" }
};
}
};
prepareComponentConfig(componentConfig);
const DxLinearGauge = defineComponent(componentConfig);
const DxAnimationConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:duration": null,
"update:easing": null,
"update:enabled": null,
},
props: {
duration: Number,
easing: String,
enabled: Boolean
}
};
prepareConfigurationComponentConfig(DxAnimationConfig);
const DxAnimation = defineComponent(DxAnimationConfig);
DxAnimation.$_optionName = "animation";
const DxBackgroundColorConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:base": null,
"update:fillId": null,
},
props: {
base: String,
fillId: String
}
};
prepareConfigurationComponentConfig(DxBackgroundColorConfig);
const DxBackgroundColor = defineComponent(DxBackgroundColorConfig);
DxBackgroundColor.$_optionName = "backgroundColor";
const DxBorderConfig = {
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(DxBorderConfig);
const DxBorder = defineComponent(DxBorderConfig);
DxBorder.$_optionName = "border";
const DxColorConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:base": null,
"update:fillId": null,
},
props: {
base: String,
fillId: String
}
};
prepareConfigurationComponentConfig(DxColorConfig);
const DxColor = defineComponent(DxColorConfig);
DxColor.$_optionName = "color";
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 DxGeometryConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:orientation": null,
},
props: {
orientation: String
}
};
prepareConfigurationComponentConfig(DxGeometryConfig);
const DxGeometry = defineComponent(DxGeometryConfig);
DxGeometry.$_optionName = "geometry";
const DxLabelConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:customizeText": null,
"update:font": null,
"update:format": null,
"update:indentFromTick": null,
"update:overlappingBehavior": null,
"update:useRangeColors": null,
"update:visible": null,
},
props: {
customizeText: Function,
font: Object,
format: [Object, String, Function],
indentFromTick: Number,
overlappingBehavior: String,
useRangeColors: Boolean,
visible: Boolean
}
};
prepareConfigurationComponentConfig(DxLabelConfig);
const DxLabel = defineComponent(DxLabelConfig);
DxLabel.$_optionName = "label";
DxLabel.$_expectedChildren = {
font: { isCollectionItem: false, optionName: "font" },
format: { isCollectionItem: false, optionName: "format" }
};
const DxLoadingIndicatorConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:backgroundColor": null,
"update:font": null,
"update:show": null,
"update:text": null,
},
props: {
backgroundColor: String,
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 DxMinorTickConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:color": null,
"update:length": null,
"update:opacity": null,
"update:visible": null,
"update:width": null,
},
props: {
color: String,
length: Number,
opacity: Number,
visible: Boolean,
width: Number
}
};
prepareConfigurationComponentConfig(DxMinorTickConfig);
const DxMinorTick = defineComponent(DxMinorTickConfig);
DxMinorTick.$_optionName = "minorTick";
const DxRangeConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:color": null,
"update:endValue": null,
"update:startValue": null,
},
props: {
color: [Object, String],
endValue: Number,
startValue: Number
}
};
prepareConfigurationComponentConfig(DxRangeConfig);
const DxRange = defineComponent(DxRangeConfig);
DxRange.$_optionName = "ranges";
DxRange.$_isCollectionItem = true;
DxRange.$_expectedChildren = {
color: { isCollectionItem: false, optionName: "color" }
};
const DxRangeContainerConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:backgroundColor": null,
"update:horizontalOrientation": null,
"update:offset": null,
"update:palette": null,
"update:paletteExtensionMode": null,
"update:ranges": null,
"update:verticalOrientation": null,
"update:width": null,
},
props: {
backgroundColor: [Object, String],
horizontalOrientation: String,
offset: Number,
palette: [Array, String],
paletteExtensionMode: String,
ranges: Array,
verticalOrientation: String,
width: [Number, Object]
}
};
prepareConfigurationComponentConfig(DxRangeContainerConfig);
const DxRangeContainer = defineComponent(DxRangeContainerConfig);
DxRangeContainer.$_optionName = "rangeContainer";
DxRangeContainer.$_expectedChildren = {
backgroundColor: { isCollectionItem: false, optionName: "backgroundColor" },
range: { isCollectionItem: true, optionName: "ranges" },
width: { isCollectionItem: false, optionName: "width" }
};
const DxScaleConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:allowDecimals": null,
"update:customMinorTicks": null,
"update:customTicks": null,
"update:endValue": null,
"update:horizontalOrientation": null,
"update:label": null,
"update:minorTick": null,
"update:minorTickInterval": null,
"update:scaleDivisionFactor": null,
"update:startValue": null,
"update:tick": null,
"update:tickInterval": null,
"update:verticalOrientation": null,
},
props: {
allowDecimals: Boolean,
customMinorTicks: Array,
customTicks: Array,
endValue: Number,
horizontalOrientation: String,
label: Object,
minorTick: Object,
minorTickInterval: Number,
scaleDivisionFactor: Number,
startValue: Number,
tick: Object,
tickInterval: Number,
verticalOrientation: String
}
};
prepareConfigurationComponentConfig(DxScaleConfig);
const DxScale = defineComponent(DxScaleConfig);
DxScale.$_optionName = "scale";
DxScale.$_expectedChildren = {
label: { isCollectionItem: false, optionName: "label" },
minorTick: { isCollectionItem: false, optionName: "minorTick" },
tick: { isCollectionItem: false, optionName: "tick" }
};
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 DxSubvalueIndicatorConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:arrowLength": null,
"update:backgroundColor": null,
"update:baseValue": null,
"update:beginAdaptingAtRadius": null,
"update:color": null,
"update:horizontalOrientation": null,
"update:indentFromCenter": null,
"update:length": null,
"update:offset": null,
"update:palette": null,
"update:secondColor": null,
"update:secondFraction": null,
"update:size": null,
"update:spindleGapSize": null,
"update:spindleSize": null,
"update:text": null,
"update:type": null,
"update:verticalOrientation": null,
"update:width": null,
},
props: {
arrowLength: Number,
backgroundColor: String,
baseValue: Number,
beginAdaptingAtRadius: Number,
color: [Object, String],
horizontalOrientation: String,
indentFromCenter: Number,
length: Number,
offset: Number,
palette: [Array, String],
secondColor: String,
secondFraction: Number,
size: Number,
spindleGapSize: Number,
spindleSize: Number,
text: Object,
type: String,
verticalOrientation: String,
width: Number
}
};
prepareConfigurationComponentConfig(DxSubvalueIndicatorConfig);
const DxSubvalueIndicator = defineComponent(DxSubvalueIndicatorConfig);
DxSubvalueIndicator.$_optionName = "subvalueIndicator";
DxSubvalueIndicator.$_expectedChildren = {
color: { isCollectionItem: false, optionName: "color" },
text: { isCollectionItem: false, optionName: "text" }
};
const DxTextConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:customizeText": null,
"update:font": null,
"update:format": null,
"update:indent": null,
},
props: {
customizeText: Function,
font: Object,
format: [Object, String, Function],
indent: Number
}
};
prepareConfigurationComponentConfig(DxTextConfig);
const DxText = defineComponent(DxTextConfig);
DxText.$_optionName = "text";
DxText.$_expectedChildren = {
font: { isCollectionItem: false, optionName: "font" },
format: { isCollectionItem: false, optionName: "format" }
};
const DxTickConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:color": null,
"update:length": null,
"update:opacity": null,
"update:visible": null,
"update:width": null,
},
props: {
color: String,
length: Number,
opacity: Number,
visible: Boolean,
width: Number
}
};
prepareConfigurationComponentConfig(DxTickConfig);
const DxTick = defineComponent(DxTickConfig);
DxTick.$_optionName = "tick";
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: [Number, Object],
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" },
margin: { isCollectionItem: false, optionName: "margin" },
subtitle: { isCollectionItem: false, optionName: "subtitle" }
};
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:interactive": 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],
interactive: Boolean,
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" }
};
const DxValueIndicatorConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:arrowLength": null,
"update:backgroundColor": null,
"update:baseValue": null,
"update:beginAdaptingAtRadius": null,
"update:color": null,
"update:horizontalOrientation": null,
"update:indentFromCenter": null,
"update:length": null,
"update:offset": null,
"update:palette": null,
"update:secondColor": null,
"update:secondFraction": null,
"update:size": null,
"update:spindleGapSize": null,
"update:spindleSize": null,
"update:text": null,
"update:type": null,
"update:verticalOrientation": null,
"update:width": null,
},
props: {
arrowLength: Number,
backgroundColor: String,
baseValue: Number,
beginAdaptingAtRadius: Number,
color: [Object, String],
horizontalOrientation: String,
indentFromCenter: Number,
length: Number,
offset: Number,
palette: [Array, String],
secondColor: String,
secondFraction: Number,
size: Number,
spindleGapSize: Number,
spindleSize: Number,
text: Object,
type: String,
verticalOrientation: String,
width: Number
}
};
prepareConfigurationComponentConfig(DxValueIndicatorConfig);
const DxValueIndicator = defineComponent(DxValueIndicatorConfig);
DxValueIndicator.$_optionName = "valueIndicator";
DxValueIndicator.$_expectedChildren = {
color: { isCollectionItem: false, optionName: "color" },
text: { isCollectionItem: false, optionName: "text" }
};
const DxWidthConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:end": null,
"update:start": null,
},
props: {
end: Number,
start: Number
}
};
prepareConfigurationComponentConfig(DxWidthConfig);
const DxWidth = defineComponent(DxWidthConfig);
DxWidth.$_optionName = "width";
export default DxLinearGauge;
export { DxLinearGauge, DxAnimation, DxBackgroundColor, DxBorder, DxColor, DxExport, DxFont, DxFormat, DxGeometry, DxLabel, DxLoadingIndicator, DxMargin, DxMinorTick, DxRange, DxRangeContainer, DxScale, DxShadow, DxSize, DxSubtitle, DxSubvalueIndicator, DxText, DxTick, DxTitle, DxTooltip, DxValueIndicator, DxWidth };