devextreme-vue
Version:
DevExtreme Vue UI and Visualization Components
969 lines (967 loc) • 32 kB
JavaScript
/*!
* devextreme-vue
* Version: 25.2.3
* Build date: Fri Dec 12 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 Form from "devextreme/ui/form";
import { prepareConfigurationComponentConfig } from "./core/index";
const componentConfig = {
props: {
accessKey: String,
activeStateEnabled: Boolean,
aiIntegration: Object,
alignItemLabels: Boolean,
alignItemLabelsInAllGroups: Boolean,
colCount: [String, Number],
colCountByScreen: Object,
customizeItem: Function,
disabled: Boolean,
elementAttr: Object,
focusStateEnabled: Boolean,
formData: {},
height: [Number, String],
hint: String,
hoverStateEnabled: Boolean,
isDirty: Boolean,
items: Array,
labelLocation: String,
labelMode: String,
minColWidth: Number,
onContentReady: Function,
onDisposing: Function,
onEditorEnterKey: Function,
onFieldDataChanged: Function,
onInitialized: Function,
onOptionChanged: Function,
onSmartPasted: Function,
onSmartPasting: Function,
optionalMark: String,
readOnly: Boolean,
requiredMark: String,
requiredMessage: String,
rtlEnabled: Boolean,
screenByWidth: Function,
scrollingEnabled: Boolean,
showColonAfterLabel: Boolean,
showOptionalMark: Boolean,
showRequiredMark: Boolean,
showValidationSummary: Boolean,
tabIndex: Number,
validationGroup: String,
visible: Boolean,
width: [Number, String]
},
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:accessKey": null,
"update:activeStateEnabled": null,
"update:aiIntegration": null,
"update:alignItemLabels": null,
"update:alignItemLabelsInAllGroups": null,
"update:colCount": null,
"update:colCountByScreen": null,
"update:customizeItem": null,
"update:disabled": null,
"update:elementAttr": null,
"update:focusStateEnabled": null,
"update:formData": null,
"update:height": null,
"update:hint": null,
"update:hoverStateEnabled": null,
"update:isDirty": null,
"update:items": null,
"update:labelLocation": null,
"update:labelMode": null,
"update:minColWidth": null,
"update:onContentReady": null,
"update:onDisposing": null,
"update:onEditorEnterKey": null,
"update:onFieldDataChanged": null,
"update:onInitialized": null,
"update:onOptionChanged": null,
"update:onSmartPasted": null,
"update:onSmartPasting": null,
"update:optionalMark": null,
"update:readOnly": null,
"update:requiredMark": null,
"update:requiredMessage": null,
"update:rtlEnabled": null,
"update:screenByWidth": null,
"update:scrollingEnabled": null,
"update:showColonAfterLabel": null,
"update:showOptionalMark": null,
"update:showRequiredMark": null,
"update:showValidationSummary": null,
"update:tabIndex": null,
"update:validationGroup": null,
"update:visible": null,
"update:width": null,
},
computed: {
instance() {
return this.$_instance;
}
},
beforeCreate() {
this.$_WidgetClass = Form;
this.$_hasAsyncTemplate = true;
this.$_expectedChildren = {
ButtonItem: { isCollectionItem: true, optionName: "items" },
colCountByScreen: { isCollectionItem: false, optionName: "colCountByScreen" },
EmptyItem: { isCollectionItem: true, optionName: "items" },
GroupItem: { isCollectionItem: true, optionName: "items" },
item: { isCollectionItem: true, optionName: "items" },
SimpleItem: { isCollectionItem: true, optionName: "items" },
TabbedItem: { isCollectionItem: true, optionName: "items" }
};
}
};
prepareComponentConfig(componentConfig);
const DxForm = defineComponent(componentConfig);
const DxAIOptionsConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:disabled": null,
"update:instruction": null,
},
props: {
disabled: Boolean,
instruction: String
}
};
prepareConfigurationComponentConfig(DxAIOptionsConfig);
const DxAIOptions = defineComponent(DxAIOptionsConfig);
DxAIOptions.$_optionName = "aiOptions";
const DxAsyncRuleConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:ignoreEmptyValue": null,
"update:message": null,
"update:reevaluate": null,
"update:type": null,
"update:validationCallback": null,
},
props: {
ignoreEmptyValue: Boolean,
message: String,
reevaluate: Boolean,
type: String,
validationCallback: Function
}
};
prepareConfigurationComponentConfig(DxAsyncRuleConfig);
const DxAsyncRule = defineComponent(DxAsyncRuleConfig);
DxAsyncRule.$_optionName = "validationRules";
DxAsyncRule.$_isCollectionItem = true;
DxAsyncRule.$_predefinedProps = {
type: "async"
};
const DxButtonItemConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:buttonOptions": null,
"update:colSpan": null,
"update:cssClass": null,
"update:horizontalAlignment": null,
"update:itemType": null,
"update:name": null,
"update:verticalAlignment": null,
"update:visible": null,
"update:visibleIndex": null,
},
props: {
buttonOptions: Object,
colSpan: Number,
cssClass: String,
horizontalAlignment: String,
itemType: String,
name: String,
verticalAlignment: String,
visible: Boolean,
visibleIndex: Number
}
};
prepareConfigurationComponentConfig(DxButtonItemConfig);
const DxButtonItem = defineComponent(DxButtonItemConfig);
DxButtonItem.$_optionName = "items";
DxButtonItem.$_isCollectionItem = true;
DxButtonItem.$_predefinedProps = {
itemType: "button"
};
DxButtonItem.$_expectedChildren = {
buttonOptions: { isCollectionItem: false, optionName: "buttonOptions" }
};
const DxButtonOptionsConfig = {
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(DxButtonOptionsConfig);
const DxButtonOptions = defineComponent(DxButtonOptionsConfig);
DxButtonOptions.$_optionName = "buttonOptions";
const DxColCountByScreenConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:lg": null,
"update:md": null,
"update:sm": null,
"update:xs": null,
},
props: {
lg: Number,
md: Number,
sm: Number,
xs: Number
}
};
prepareConfigurationComponentConfig(DxColCountByScreenConfig);
const DxColCountByScreen = defineComponent(DxColCountByScreenConfig);
DxColCountByScreen.$_optionName = "colCountByScreen";
const DxCompareRuleConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:comparisonTarget": null,
"update:comparisonType": null,
"update:ignoreEmptyValue": null,
"update:message": null,
"update:type": null,
},
props: {
comparisonTarget: Function,
comparisonType: String,
ignoreEmptyValue: Boolean,
message: String,
type: String
}
};
prepareConfigurationComponentConfig(DxCompareRuleConfig);
const DxCompareRule = defineComponent(DxCompareRuleConfig);
DxCompareRule.$_optionName = "validationRules";
DxCompareRule.$_isCollectionItem = true;
DxCompareRule.$_predefinedProps = {
type: "compare"
};
const DxCustomRuleConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:ignoreEmptyValue": null,
"update:message": null,
"update:reevaluate": null,
"update:type": null,
"update:validationCallback": null,
},
props: {
ignoreEmptyValue: Boolean,
message: String,
reevaluate: Boolean,
type: String,
validationCallback: Function
}
};
prepareConfigurationComponentConfig(DxCustomRuleConfig);
const DxCustomRule = defineComponent(DxCustomRuleConfig);
DxCustomRule.$_optionName = "validationRules";
DxCustomRule.$_isCollectionItem = true;
DxCustomRule.$_predefinedProps = {
type: "custom"
};
const DxEmailRuleConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:ignoreEmptyValue": null,
"update:message": null,
"update:type": null,
},
props: {
ignoreEmptyValue: Boolean,
message: String,
type: String
}
};
prepareConfigurationComponentConfig(DxEmailRuleConfig);
const DxEmailRule = defineComponent(DxEmailRuleConfig);
DxEmailRule.$_optionName = "validationRules";
DxEmailRule.$_isCollectionItem = true;
DxEmailRule.$_predefinedProps = {
type: "email"
};
const DxEmptyItemConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:colSpan": null,
"update:cssClass": null,
"update:itemType": null,
"update:name": null,
"update:visible": null,
"update:visibleIndex": null,
},
props: {
colSpan: Number,
cssClass: String,
itemType: String,
name: String,
visible: Boolean,
visibleIndex: Number
}
};
prepareConfigurationComponentConfig(DxEmptyItemConfig);
const DxEmptyItem = defineComponent(DxEmptyItemConfig);
DxEmptyItem.$_optionName = "items";
DxEmptyItem.$_isCollectionItem = true;
DxEmptyItem.$_predefinedProps = {
itemType: "empty"
};
const DxGroupItemConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:alignItemLabels": null,
"update:caption": null,
"update:captionTemplate": null,
"update:colCount": null,
"update:colCountByScreen": null,
"update:colSpan": null,
"update:cssClass": null,
"update:items": null,
"update:itemType": null,
"update:name": null,
"update:template": null,
"update:visible": null,
"update:visibleIndex": null,
},
props: {
alignItemLabels: Boolean,
caption: String,
captionTemplate: {},
colCount: Number,
colCountByScreen: Object,
colSpan: Number,
cssClass: String,
items: Array,
itemType: String,
name: String,
template: {},
visible: Boolean,
visibleIndex: Number
}
};
prepareConfigurationComponentConfig(DxGroupItemConfig);
const DxGroupItem = defineComponent(DxGroupItemConfig);
DxGroupItem.$_optionName = "items";
DxGroupItem.$_isCollectionItem = true;
DxGroupItem.$_predefinedProps = {
itemType: "group"
};
DxGroupItem.$_expectedChildren = {
colCountByScreen: { isCollectionItem: false, optionName: "colCountByScreen" }
};
const DxItemConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:aiOptions": null,
"update:alignItemLabels": null,
"update:badge": null,
"update:buttonOptions": null,
"update:caption": null,
"update:captionTemplate": null,
"update:colCount": null,
"update:colCountByScreen": null,
"update:colSpan": null,
"update:cssClass": null,
"update:dataField": null,
"update:disabled": null,
"update:editorOptions": null,
"update:editorType": null,
"update:helpText": null,
"update:horizontalAlignment": null,
"update:html": null,
"update:icon": null,
"update:isRequired": null,
"update:items": null,
"update:itemType": null,
"update:label": null,
"update:name": null,
"update:tabPanelOptions": null,
"update:tabs": null,
"update:tabTemplate": null,
"update:template": null,
"update:text": null,
"update:title": null,
"update:validationRules": null,
"update:verticalAlignment": null,
"update:visible": null,
"update:visibleIndex": null,
},
props: {
aiOptions: Object,
alignItemLabels: Boolean,
badge: String,
buttonOptions: Object,
caption: String,
captionTemplate: {},
colCount: Number,
colCountByScreen: Object,
colSpan: Number,
cssClass: String,
dataField: String,
disabled: Boolean,
editorOptions: {},
editorType: String,
helpText: String,
horizontalAlignment: String,
html: String,
icon: String,
isRequired: Boolean,
items: Array,
itemType: String,
label: Object,
name: String,
tabPanelOptions: Object,
tabs: Array,
tabTemplate: {},
template: {},
text: String,
title: String,
validationRules: Array,
verticalAlignment: String,
visible: Boolean,
visibleIndex: Number
}
};
prepareConfigurationComponentConfig(DxItemConfig);
const DxItem = defineComponent(DxItemConfig);
DxItem.$_optionName = "items";
DxItem.$_isCollectionItem = true;
DxItem.$_expectedChildren = {
aiOptions: { isCollectionItem: false, optionName: "aiOptions" },
AsyncRule: { isCollectionItem: true, optionName: "validationRules" },
buttonOptions: { isCollectionItem: false, optionName: "buttonOptions" },
colCountByScreen: { isCollectionItem: false, optionName: "colCountByScreen" },
CompareRule: { isCollectionItem: true, optionName: "validationRules" },
CustomRule: { isCollectionItem: true, optionName: "validationRules" },
EmailRule: { isCollectionItem: true, optionName: "validationRules" },
label: { isCollectionItem: false, optionName: "label" },
NumericRule: { isCollectionItem: true, optionName: "validationRules" },
PatternRule: { isCollectionItem: true, optionName: "validationRules" },
RangeRule: { isCollectionItem: true, optionName: "validationRules" },
RequiredRule: { isCollectionItem: true, optionName: "validationRules" },
StringLengthRule: { isCollectionItem: true, optionName: "validationRules" },
tab: { isCollectionItem: true, optionName: "tabs" },
tabPanelOptions: { isCollectionItem: false, optionName: "tabPanelOptions" },
validationRule: { isCollectionItem: true, optionName: "validationRules" }
};
const DxLabelConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:alignment": null,
"update:location": null,
"update:showColon": null,
"update:template": null,
"update:text": null,
"update:visible": null,
},
props: {
alignment: String,
location: String,
showColon: Boolean,
template: {},
text: String,
visible: Boolean
}
};
prepareConfigurationComponentConfig(DxLabelConfig);
const DxLabel = defineComponent(DxLabelConfig);
DxLabel.$_optionName = "label";
const DxNumericRuleConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:ignoreEmptyValue": null,
"update:message": null,
"update:type": null,
},
props: {
ignoreEmptyValue: Boolean,
message: String,
type: String
}
};
prepareConfigurationComponentConfig(DxNumericRuleConfig);
const DxNumericRule = defineComponent(DxNumericRuleConfig);
DxNumericRule.$_optionName = "validationRules";
DxNumericRule.$_isCollectionItem = true;
DxNumericRule.$_predefinedProps = {
type: "numeric"
};
const DxPatternRuleConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:ignoreEmptyValue": null,
"update:message": null,
"update:pattern": null,
"update:type": null,
},
props: {
ignoreEmptyValue: Boolean,
message: String,
pattern: [RegExp, String],
type: String
}
};
prepareConfigurationComponentConfig(DxPatternRuleConfig);
const DxPatternRule = defineComponent(DxPatternRuleConfig);
DxPatternRule.$_optionName = "validationRules";
DxPatternRule.$_isCollectionItem = true;
DxPatternRule.$_predefinedProps = {
type: "pattern"
};
const DxRangeRuleConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:ignoreEmptyValue": null,
"update:max": null,
"update:message": null,
"update:min": null,
"update:reevaluate": null,
"update:type": null,
},
props: {
ignoreEmptyValue: Boolean,
max: [Date, Number, String],
message: String,
min: [Date, Number, String],
reevaluate: Boolean,
type: String
}
};
prepareConfigurationComponentConfig(DxRangeRuleConfig);
const DxRangeRule = defineComponent(DxRangeRuleConfig);
DxRangeRule.$_optionName = "validationRules";
DxRangeRule.$_isCollectionItem = true;
DxRangeRule.$_predefinedProps = {
type: "range"
};
const DxRequiredRuleConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:message": null,
"update:trim": null,
"update:type": null,
},
props: {
message: String,
trim: Boolean,
type: String
}
};
prepareConfigurationComponentConfig(DxRequiredRuleConfig);
const DxRequiredRule = defineComponent(DxRequiredRuleConfig);
DxRequiredRule.$_optionName = "validationRules";
DxRequiredRule.$_isCollectionItem = true;
DxRequiredRule.$_predefinedProps = {
type: "required"
};
const DxSimpleItemConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:aiOptions": null,
"update:colSpan": null,
"update:cssClass": null,
"update:dataField": null,
"update:editorOptions": null,
"update:editorType": null,
"update:helpText": null,
"update:isRequired": null,
"update:itemType": null,
"update:label": null,
"update:name": null,
"update:template": null,
"update:validationRules": null,
"update:visible": null,
"update:visibleIndex": null,
},
props: {
aiOptions: Object,
colSpan: Number,
cssClass: String,
dataField: String,
editorOptions: {},
editorType: String,
helpText: String,
isRequired: Boolean,
itemType: String,
label: Object,
name: String,
template: {},
validationRules: Array,
visible: Boolean,
visibleIndex: Number
}
};
prepareConfigurationComponentConfig(DxSimpleItemConfig);
const DxSimpleItem = defineComponent(DxSimpleItemConfig);
DxSimpleItem.$_optionName = "items";
DxSimpleItem.$_isCollectionItem = true;
DxSimpleItem.$_predefinedProps = {
itemType: "simple"
};
DxSimpleItem.$_expectedChildren = {
aiOptions: { isCollectionItem: false, optionName: "aiOptions" },
AsyncRule: { isCollectionItem: true, optionName: "validationRules" },
CompareRule: { isCollectionItem: true, optionName: "validationRules" },
CustomRule: { isCollectionItem: true, optionName: "validationRules" },
EmailRule: { isCollectionItem: true, optionName: "validationRules" },
label: { isCollectionItem: false, optionName: "label" },
NumericRule: { isCollectionItem: true, optionName: "validationRules" },
PatternRule: { isCollectionItem: true, optionName: "validationRules" },
RangeRule: { isCollectionItem: true, optionName: "validationRules" },
RequiredRule: { isCollectionItem: true, optionName: "validationRules" },
StringLengthRule: { isCollectionItem: true, optionName: "validationRules" },
validationRule: { isCollectionItem: true, optionName: "validationRules" }
};
const DxStringLengthRuleConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:ignoreEmptyValue": null,
"update:max": null,
"update:message": null,
"update:min": null,
"update:trim": null,
"update:type": null,
},
props: {
ignoreEmptyValue: Boolean,
max: Number,
message: String,
min: Number,
trim: Boolean,
type: String
}
};
prepareConfigurationComponentConfig(DxStringLengthRuleConfig);
const DxStringLengthRule = defineComponent(DxStringLengthRuleConfig);
DxStringLengthRule.$_optionName = "validationRules";
DxStringLengthRule.$_isCollectionItem = true;
DxStringLengthRule.$_predefinedProps = {
type: "stringLength"
};
const DxTabConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:alignItemLabels": null,
"update:badge": null,
"update:colCount": null,
"update:colCountByScreen": null,
"update:disabled": null,
"update:icon": null,
"update:items": null,
"update:tabTemplate": null,
"update:template": null,
"update:title": null,
},
props: {
alignItemLabels: Boolean,
badge: String,
colCount: Number,
colCountByScreen: Object,
disabled: Boolean,
icon: String,
items: Array,
tabTemplate: {},
template: {},
title: String
}
};
prepareConfigurationComponentConfig(DxTabConfig);
const DxTab = defineComponent(DxTabConfig);
DxTab.$_optionName = "tabs";
DxTab.$_isCollectionItem = true;
DxTab.$_expectedChildren = {
colCountByScreen: { isCollectionItem: false, optionName: "colCountByScreen" }
};
const DxTabbedItemConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:colSpan": null,
"update:cssClass": null,
"update:itemType": null,
"update:name": null,
"update:tabPanelOptions": null,
"update:tabs": null,
"update:visible": null,
"update:visibleIndex": null,
},
props: {
colSpan: Number,
cssClass: String,
itemType: String,
name: String,
tabPanelOptions: Object,
tabs: Array,
visible: Boolean,
visibleIndex: Number
}
};
prepareConfigurationComponentConfig(DxTabbedItemConfig);
const DxTabbedItem = defineComponent(DxTabbedItemConfig);
DxTabbedItem.$_optionName = "items";
DxTabbedItem.$_isCollectionItem = true;
DxTabbedItem.$_predefinedProps = {
itemType: "tabbed"
};
DxTabbedItem.$_expectedChildren = {
tab: { isCollectionItem: true, optionName: "tabs" },
tabPanelOptions: { isCollectionItem: false, optionName: "tabPanelOptions" }
};
const DxTabPanelOptionsConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:accessKey": null,
"update:activeStateEnabled": null,
"update:animationEnabled": null,
"update:dataSource": null,
"update:deferRendering": null,
"update:disabled": null,
"update:elementAttr": null,
"update:focusStateEnabled": null,
"update:height": null,
"update:hint": null,
"update:hoverStateEnabled": null,
"update:iconPosition": null,
"update:itemHoldTimeout": null,
"update:items": null,
"update:itemTemplate": null,
"update:itemTitleTemplate": null,
"update:keyExpr": null,
"update:loop": null,
"update:noDataText": 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:onSelectionChanged": null,
"update:onSelectionChanging": null,
"update:onTitleClick": null,
"update:onTitleHold": null,
"update:onTitleRendered": null,
"update:repaintChangesOnly": null,
"update:rtlEnabled": null,
"update:scrollByContent": null,
"update:scrollingEnabled": null,
"update:selectedIndex": null,
"update:selectedItem": null,
"update:showNavButtons": null,
"update:stylingMode": null,
"update:swipeEnabled": null,
"update:tabIndex": null,
"update:tabsPosition": null,
"update:visible": null,
"update:width": null,
},
props: {
accessKey: String,
activeStateEnabled: Boolean,
animationEnabled: Boolean,
dataSource: [Array, Object, String],
deferRendering: Boolean,
disabled: Boolean,
elementAttr: Object,
focusStateEnabled: Boolean,
height: [Number, String],
hint: String,
hoverStateEnabled: Boolean,
iconPosition: String,
itemHoldTimeout: Number,
items: Array,
itemTemplate: {},
itemTitleTemplate: {},
keyExpr: [Function, String],
loop: Boolean,
noDataText: String,
onContentReady: Function,
onDisposing: Function,
onInitialized: Function,
onItemClick: Function,
onItemContextMenu: Function,
onItemHold: Function,
onItemRendered: Function,
onOptionChanged: Function,
onSelectionChanged: Function,
onSelectionChanging: Function,
onTitleClick: Function,
onTitleHold: Function,
onTitleRendered: Function,
repaintChangesOnly: Boolean,
rtlEnabled: Boolean,
scrollByContent: Boolean,
scrollingEnabled: Boolean,
selectedIndex: Number,
selectedItem: {},
showNavButtons: Boolean,
stylingMode: String,
swipeEnabled: Boolean,
tabIndex: Number,
tabsPosition: String,
visible: Boolean,
width: [Number, String]
}
};
prepareConfigurationComponentConfig(DxTabPanelOptionsConfig);
const DxTabPanelOptions = defineComponent(DxTabPanelOptionsConfig);
DxTabPanelOptions.$_optionName = "tabPanelOptions";
DxTabPanelOptions.$_expectedChildren = {
item: { isCollectionItem: true, optionName: "items" },
tabPanelOptionsItem: { isCollectionItem: true, optionName: "items" }
};
const DxTabPanelOptionsItemConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:badge": null,
"update:disabled": null,
"update:html": null,
"update:icon": null,
"update:tabTemplate": null,
"update:template": null,
"update:text": null,
"update:title": null,
"update:visible": null,
},
props: {
badge: String,
disabled: Boolean,
html: String,
icon: String,
tabTemplate: {},
template: {},
text: String,
title: String,
visible: Boolean
}
};
prepareConfigurationComponentConfig(DxTabPanelOptionsItemConfig);
const DxTabPanelOptionsItem = defineComponent(DxTabPanelOptionsItemConfig);
DxTabPanelOptionsItem.$_optionName = "items";
DxTabPanelOptionsItem.$_isCollectionItem = true;
const DxValidationRuleConfig = {
emits: {
"update:isActive": null,
"update:hoveredElement": null,
"update:comparisonTarget": null,
"update:comparisonType": null,
"update:ignoreEmptyValue": null,
"update:max": null,
"update:message": null,
"update:min": null,
"update:pattern": null,
"update:reevaluate": null,
"update:trim": null,
"update:type": null,
"update:validationCallback": null,
},
props: {
comparisonTarget: Function,
comparisonType: String,
ignoreEmptyValue: Boolean,
max: [Date, Number, String],
message: String,
min: [Date, Number, String],
pattern: [RegExp, String],
reevaluate: Boolean,
trim: Boolean,
type: String,
validationCallback: Function
}
};
prepareConfigurationComponentConfig(DxValidationRuleConfig);
const DxValidationRule = defineComponent(DxValidationRuleConfig);
DxValidationRule.$_optionName = "validationRules";
DxValidationRule.$_isCollectionItem = true;
DxValidationRule.$_predefinedProps = {
type: "required"
};
export default DxForm;
export { DxForm, DxAIOptions, DxAsyncRule, DxButtonItem, DxButtonOptions, DxColCountByScreen, DxCompareRule, DxCustomRule, DxEmailRule, DxEmptyItem, DxGroupItem, DxItem, DxLabel, DxNumericRule, DxPatternRule, DxRangeRule, DxRequiredRule, DxSimpleItem, DxStringLengthRule, DxTab, DxTabbedItem, DxTabPanelOptions, DxTabPanelOptionsItem, DxValidationRule };