18.2.2-beta.1

Requires DevExtreme v18.2.2-pre-beta

Improvements

• Add TS interfaces for Components Props

<template>
  <dx-button :text='text' icon='plus' ref='button' @click='click'/>
</template>

import { DxButton } from "devextreme-vue/button";
import { Vue, Component, Prop } from "vue-property-decorator";

@Component({
  components: {
    DxButton
  }
})
export default class ButtomExample extends Vue {
  public $refs: Vue["$refs"] & {
    button?: DxButton
  } = {};

  click() {
    const button = this.$refs.button;
    if(button) {
      button.icon = button.height === "plus" ? "box" : "plus";
    }
  };
}

• Support .sync modifyer in nested components

<dx-data-grid :dataSource="sales">
  <dx-column
    dataField="city"
  />
  <dx-column
    dataField="country"
    :sortOrder.sync="countrySortOrder"
  />
</dx-data-grid>

• Add advanced nested components for Form Items and Validation Rules

<dx-text-box value="[email protected]">
  <dx-validator>
    <dx-required-rule message="Email is required." />
    <dx-email-rule message="Email is invalid." />
  </dx-validator>
</dx-text-box>

<dx-form :colCount="2" :formData="employee" >
  <dx-simple-item dataField="ID" />
  <dx-simple-item dataField="FirstName" :editorOptions="{ disabled: true }" />
</dx-form>

Bug Fixes

• Fix firing of widget-initialization events

Other Changes

• Move all components to the root namespace

- import DxButton from "devextreme-vue/ui/button";
+ import DxButton from "devextreme-vue/button";

• Ignore attributes that do not match widget options