• By DanranVm

@IDux is an open source component library based on Vue 3.x and TypeScript with the following features:

  • Monorepo management mode:cdk.components.pro
  • High quality components out of the box
  • Fully embrace the Composition API, from source code to documentation
  • Developed entirely in TypeScript, it provides complete type definitions
  • Flexible global configuration
  • The ability to customize themes in deep detail
  • Internationalization language support

Related links:

  • Github: IDuxFE/idux
  • Official document: idux.site

features

Monorepo mode

@IDux is divided into 3 packages:

  • @idux/cdk
    • It is a set of development suites for building libraries of UI components
    • It mainly contains uI-independent or UI-light features
    • It was inspired by @angular/ CDK
  • @idux/components
    • It is a basic component library in the traditional sense, containing dozens of common UI components
    • We have carefully designed the API for each component to ensure API consistency
    • Component design references ANTD and NG-Zorro
  • @idux/pro
    • It is to@idux/componentsFurther encapsulation and composition, using less code to accomplish business development
    • It comes from refining what we do
    • It is currently limited and will be replenished gradually

Out of the box

The package, built entirely on ESM, supports Tree Shaking out of the box and loading on demand, as well as automatic import plug-ins to make your coding more efficient

import { IxButton } from "@idux/components/button";
Copy the code

For more information, see Getting Started

We have 80+ coverage unit tests and a well-developed CI process to ensure the quality of our components

Composition API

An important feature of Vue 3.x is the Composition API, which is used for all of our source code and sample code

It’s a new code organization paradigm that allows developers to better organize code, and the more complex the component, the more elegant it becomes

TypeScript

All of our source code is written in TypeScript + TSX, and we work hard to provide the best possible experience for our users

Whether users are using TSX or SFC (with the Vue Language Features plug-in), they can enjoy complete type hints and protection

internationalization

We have built-in i18N support for static copywriting for some components, but currently only in Chinese and English

PR Welcome, we are also eager to enlist the support and help of the community to make @IDux more complete

See Internationalization for more information

Global configuration

We’ve added global configuration to many of our components, and it’s probably one of the most globally configured libraries you’ve ever seen

Users can define the default behavior of components through global configuration, reducing the amount of code that needs to be written in templates

Global configuration items can be modified at run time and can be partially overwritten

For more information, see Global Configuration

Theme customization

We do our best to provide a wide variety of theme variables, both global and component-level, so that users can customize the theme they want

Note: this feature is not stable at the moment, we are considering using CSS variables to replace less variables. When the solution is complete, we will declare supported theme variables in the documentation of each component

More features

Reactive form system

Reactive forms systems provide a model-driven way to handle form input, referencing the @Angular/Forms implementation

  • Explicit form model:FormGroup.FormArray.FormControl
  • Reactive form state:value.status
  • Unified and easily extensible form validation:Validators

If you’ve ever used @Angular/Forms, the following code should feel familiar

More controlled components

We added controlled mode for all components that support the V-model, see Issue #510

Most of the other Props were also controlled, and this was a requirement from our internal, low-code platform that required completely controlled components.

API design for data-driven concepts

For complex components such as table, tree, and Menu, we recommend using a dateSource rather than using child components directly in a template.

In real development, data sources are often dynamic, and manipulating data directly is more straightforward and maintainable than using V-if and V-for in templates.

- <IxMenu>
- 
      
- 
      
- 
      
- 
- </IxMenu>

+ <IxMenu :dataSource="dataSource"></IxMenu>
Copy the code

More features are waiting for you to discover, come to the hands-on experience.

Next step

This is just the beginning of @IDux, and there are still a lot of imperfections in it. We will improve it in continuous iterations, and this is our next step:

  • Improvement and supplement of component documentation
  • Visual optimization and design guide improvement and supplement
  • Improvement and supplement of unit testing
  • Improvement of the subject variable scheme

In addition, we are also preparing a background management system template for you to quickly build the project prototype, please look forward to it.

Finally, open source is not easy. I hope @IDux can be liked and supported by everyone. We will not forget the origin of open source, actively embrace the community, rely on the strength of the community to let @IDux get better growth. We sincerely welcome friends who love open source to participate in @IDux project. No matter it is star, issue or PR, they will help and support us. Thank you.

About IDuxFE

We are the front-end team from deep Convinced technology. @IDux has been launched in cloud computing and security scenarios, and will achieve full product coverage within the group in the future, so there is no need to worry that we will abandon the pit and give up maintenance.

If you are interested in us, you are welcome to join us. You can send your resume to [email protected] or write to me directly.