devextreme-vue
Version:
DevExtreme Vue UI and Visualization Components
792 lines (790 loc) • 25.1 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 DateRangeBox from "devextreme/ui/date_range_box";
import { prepareConfigurationComponentConfig } from "./core/index";
const componentConfig = {
props: {
acceptCustomValue: Boolean,
accessKey: String,
activeStateEnabled: Boolean,
applyButtonText: String,
applyValueMode: String,
buttons: Array,
calendarOptions: Object,
cancelButtonText: String,
dateSerializationFormat: String,
deferRendering: Boolean,
disabled: Boolean,
disableOutOfRangeSelection: Boolean,
displayFormat: [Object, String, Function],
dropDownButtonTemplate: {},
dropDownOptions: Object,
elementAttr: Object,
endDate: [Date, Number, String],
endDateInputAttr: {},
endDateLabel: String,
endDateName: String,
endDateOutOfRangeMessage: String,
endDatePlaceholder: String,
endDateText: String,
focusStateEnabled: Boolean,
height: [Number, String],
hint: String,
hoverStateEnabled: Boolean,
invalidEndDateMessage: String,
invalidStartDateMessage: String,
isDirty: Boolean,
isValid: Boolean,
labelMode: String,
max: [Date, Number, String],
min: [Date, Number, String],
multiView: Boolean,
onChange: Function,
onClosed: Function,
onContentReady: Function,
onCopy: Function,
onCut: Function,
onDisposing: Function,
onEnterKey: Function,
onFocusIn: Function,
onFocusOut: Function,
onInitialized: Function,
onInput: Function,
onKeyDown: Function,
onKeyUp: Function,
onOpened: Function,
onOptionChanged: Function,
onPaste: Function,
onValueChanged: Function,
opened: Boolean,
openOnFieldClick: Boolean,
readOnly: Boolean,
rtlEnabled: Boolean,
showClearButton: Boolean,
showDropDownButton: Boolean,
spellcheck: Boolean,
startDate: [Date, Number, String],
startDateInputAttr: {},
startDateLabel: String,
startDateName: String,
startDateOutOfRangeMessage: String,
startDatePlaceholder: String,
startDateText: String,
stylingMode: String,
tabIndex: Number,
todayButtonText: String,
useMaskBehavior: Boolean,
validationError: {},
validationErrors: Array,
validationMessageMode: String,
validationMessagePosition: String,
validationStatus: String,
value: Array,
valueChangeEvent: String,
visible: Boolean,
width: [Number, String]
},
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:acceptCustomValue": null,
"update:accessKey": null,
"update:activeStateEnabled": null,
"update:applyButtonText": null,
"update:applyValueMode": null,
"update:buttons": null,
"update:calendarOptions": null,
"update:cancelButtonText": null,
"update:dateSerializationFormat": null,
"update:deferRendering": null,
"update:disabled": null,
"update:disableOutOfRangeSelection": null,
"update:displayFormat": null,
"update:dropDownButtonTemplate": null,
"update:dropDownOptions": null,
"update:elementAttr": null,
"update:endDate": null,
"update:endDateInputAttr": null,
"update:endDateLabel": null,
"update:endDateName": null,
"update:endDateOutOfRangeMessage": null,
"update:endDatePlaceholder": null,
"update:endDateText": null,
"update:focusStateEnabled": null,
"update:height": null,
"update:hint": null,
"update:hoverStateEnabled": null,
"update:invalidEndDateMessage": null,
"update:invalidStartDateMessage": null,
"update:isDirty": null,
"update:isValid": null,
"update:labelMode": null,
"update:max": null,
"update:min": null,
"update:multiView": null,
"update:onChange": null,
"update:onClosed": null,
"update:onContentReady": null,
"update:onCopy": null,
"update:onCut": null,
"update:onDisposing": null,
"update:onEnterKey": null,
"update:onFocusIn": null,
"update:onFocusOut": null,
"update:onInitialized": null,
"update:onInput": null,
"update:onKeyDown": null,
"update:onKeyUp": null,
"update:onOpened": null,
"update:onOptionChanged": null,
"update:onPaste": null,
"update:onValueChanged": null,
"update:opened": null,
"update:openOnFieldClick": null,
"update:readOnly": null,
"update:rtlEnabled": null,
"update:showClearButton": null,
"update:showDropDownButton": null,
"update:spellcheck": null,
"update:startDate": null,
"update:startDateInputAttr": null,
"update:startDateLabel": null,
"update:startDateName": null,
"update:startDateOutOfRangeMessage": null,
"update:startDatePlaceholder": null,
"update:startDateText": null,
"update:stylingMode": null,
"update:tabIndex": null,
"update:todayButtonText": null,
"update:useMaskBehavior": null,
"update:validationError": null,
"update:validationErrors": null,
"update:validationMessageMode": null,
"update:validationMessagePosition": null,
"update:validationStatus": null,
"update:value": null,
"update:valueChangeEvent": null,
"update:visible": null,
"update:width": null,
},
model: { prop: "value", event: "update:value" },
computed: {
instance() {
return this.$_instance;
}
},
beforeCreate() {
this.$_WidgetClass = DateRangeBox;
this.$_hasAsyncTemplate = true;
this.$_expectedChildren = {
button: { isCollectionItem: true, optionName: "buttons" },
calendarOptions: { isCollectionItem: false, optionName: "calendarOptions" },
displayFormat: { isCollectionItem: false, optionName: "displayFormat" },
dropDownOptions: { isCollectionItem: false, optionName: "dropDownOptions" }
};
}
};
prepareComponentConfig(componentConfig);
const DxDateRangeBox = 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 DxButtonConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:location": null,
"update:name": null,
"update:options": null,
},
props: {
location: String,
name: String,
options: Object
}
};
prepareConfigurationComponentConfig(DxButtonConfig);
const DxButton = defineComponent(DxButtonConfig);
DxButton.$_optionName = "buttons";
DxButton.$_isCollectionItem = true;
DxButton.$_expectedChildren = {
options: { isCollectionItem: false, optionName: "options" }
};
const DxCalendarOptionsConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:accessKey": null,
"update:activeStateEnabled": null,
"update:cellTemplate": null,
"update:dateSerializationFormat": null,
"update:disabled": null,
"update:disabledDates": null,
"update:elementAttr": null,
"update:firstDayOfWeek": null,
"update:focusStateEnabled": null,
"update:height": null,
"update:hint": null,
"update:hoverStateEnabled": null,
"update:isDirty": null,
"update:isValid": null,
"update:max": null,
"update:maxZoomLevel": null,
"update:min": null,
"update:minZoomLevel": null,
"update:name": null,
"update:onDisposing": null,
"update:onInitialized": null,
"update:onOptionChanged": null,
"update:onValueChanged": null,
"update:readOnly": null,
"update:rtlEnabled": null,
"update:selectionMode": null,
"update:selectWeekOnClick": null,
"update:showTodayButton": null,
"update:showWeekNumbers": null,
"update:tabIndex": null,
"update:validationError": null,
"update:validationErrors": null,
"update:validationMessageMode": null,
"update:validationMessagePosition": null,
"update:validationStatus": null,
"update:value": null,
"update:visible": null,
"update:weekNumberRule": null,
"update:width": null,
"update:zoomLevel": null,
},
props: {
accessKey: String,
activeStateEnabled: Boolean,
cellTemplate: {},
dateSerializationFormat: String,
disabled: Boolean,
disabledDates: [Array, Function],
elementAttr: Object,
firstDayOfWeek: Number,
focusStateEnabled: Boolean,
height: [Number, String],
hint: String,
hoverStateEnabled: Boolean,
isDirty: Boolean,
isValid: Boolean,
max: [Date, Number, String],
maxZoomLevel: String,
min: [Date, Number, String],
minZoomLevel: String,
name: String,
onDisposing: Function,
onInitialized: Function,
onOptionChanged: Function,
onValueChanged: Function,
readOnly: Boolean,
rtlEnabled: Boolean,
selectionMode: String,
selectWeekOnClick: Boolean,
showTodayButton: Boolean,
showWeekNumbers: Boolean,
tabIndex: Number,
validationError: {},
validationErrors: Array,
validationMessageMode: String,
validationMessagePosition: String,
validationStatus: String,
value: [Array, Date, Number, String],
visible: Boolean,
weekNumberRule: String,
width: [Number, String],
zoomLevel: String
}
};
prepareConfigurationComponentConfig(DxCalendarOptionsConfig);
const DxCalendarOptions = defineComponent(DxCalendarOptionsConfig);
DxCalendarOptions.$_optionName = "calendarOptions";
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 DxDisplayFormatConfig = {
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(DxDisplayFormatConfig);
const DxDisplayFormat = defineComponent(DxDisplayFormatConfig);
DxDisplayFormat.$_optionName = "displayFormat";
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 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 DxOptionsConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:accessKey": null,
"update:activeStateEnabled": null,
"update:disabled": null,
"update:elementAttr": null,
"update:focusStateEnabled": null,
"update:height": null,
"update:hint": null,
"update:hoverStateEnabled": null,
"update:icon": null,
"update:onClick": null,
"update:onContentReady": null,
"update:onDisposing": null,
"update:onInitialized": null,
"update:onOptionChanged": null,
"update:rtlEnabled": null,
"update:stylingMode": null,
"update:tabIndex": null,
"update:template": null,
"update:text": null,
"update:type": null,
"update:useSubmitBehavior": null,
"update:validationGroup": null,
"update:visible": null,
"update:width": null,
},
props: {
accessKey: String,
activeStateEnabled: Boolean,
disabled: Boolean,
elementAttr: Object,
focusStateEnabled: Boolean,
height: [Number, String],
hint: String,
hoverStateEnabled: Boolean,
icon: String,
onClick: Function,
onContentReady: Function,
onDisposing: Function,
onInitialized: Function,
onOptionChanged: Function,
rtlEnabled: Boolean,
stylingMode: String,
tabIndex: Number,
template: {},
text: String,
type: String,
useSubmitBehavior: Boolean,
validationGroup: String,
visible: Boolean,
width: [Number, String]
}
};
prepareConfigurationComponentConfig(DxOptionsConfig);
const DxOptions = defineComponent(DxOptionsConfig);
DxOptions.$_optionName = "options";
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 DxDateRangeBox;
export { DxDateRangeBox, DxAnimation, DxAt, DxBoundaryOffset, DxButton, DxCalendarOptions, DxCollision, DxDisplayFormat, DxDropDownOptions, DxFrom, DxHide, DxMy, DxOffset, DxOptions, DxPosition, DxShow, DxTo, DxToolbarItem };