Ding~ You received a Vexip UI 2.0 Development Interim Report

It has been two months since the first beta version of Vexip UI 2.0 was released, and it is currently the 19th beta version 2.0.0-beta.18 , I think it is necessary to write an interim report to summarize so far Do some functional development.

Refactored from configuring Sass variables to CSS variables

The first change in 2.0 is to refactor the style. The previous method of modifying the style of the component library through Sass variable configuration is changed to native CSS variables, so that the style preprocessor is separated from the style customization.

On the homepage of the official website , you can quickly switch the theme color to view the effect.

Gifs are compressed a bit too much and are mushy. . .

At the same time, a built-in dark theme has been made, and combined with CSS variables, the theme can be dynamically switched.

Support to modify the default value of component properties through configuration

In all components, except value and options or properties of this nature, the default values of all other properties are configurable.

For example, the ---5cd8e136e6ee5b9625d2f93da5d173b6--- of the button component is 'default' type by default, but in use, most of the buttons may have type 'primary' , then when initializing the component library, you can pass in the configuration to modify:

 import { createApp } from 'vue'
import { install } from 'vexip-ui'
import App from './App.vue'

createApp(App).use(install, {
  props: {
    button: {
      type: 'primary'
    }
  }
})

This can reduce a lot of repetitive attribute input.

Once, in a form with dozens of controls, I wanted to change the size to a large one, and the writing style felt a little too much, so I had this function.

If local modification is required, it can also be implemented with the help of ConfigProvider:

 <template>
  <ConfigProvider :props="providedProps">
    <Button></Button>
  </ConfigProvider>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const providedProps = ref({
  button: {
    type: 'primary'
  }
})
</script>

Full support for virtual scrolling

In order to support massive data rendering scenarios, all components with list features have built-in virtual scrolling, including: Select, Table, Cascader, Transfer, etc.

At the same time, the virtual scroll (list) is separated into a separate component VirtualList to provide reuse. For examples, see the documentation .

Internationalized multi-language support

Currently, Vexip UI has built-in Chinese and English languages.

At the same time, in order to adapt to multiple languages, you can pass in a custom internationalization configuration during initialization:

 import { createApp } from 'vue'
import { install } from 'vexip-ui'
import App from './App.vue'

createApp(App).use(install, {
  locale: {
    locale: 'zh-CN', // 可以指定一个内置的语言作为基础
    input: {
      placeholder: '随便输入点什么...'
    }
  }
})

If local modification is required, it can still be implemented with the help of ConfigProvider:

 <template>
  <ConfigProvider :locale="locale">
    <Input></Input>
  </ConfigProvider>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const locale = ref({
  input: {
    placeholder: '随便输入点什么...'
  }
})
</script>

If there is further demand, features of rtl may continue to be developed to support internationalization of certain languages.

Configurable namespace

For namespaces, two scenarios are supported.

The first is the namespace for the class name, which needs to be modified at the same time sass to modify the namespace in the style:

 createApp(App).use(install, { namespace: 'vxp' })

 @use 'vexip-ui/style' with (
  $namespace: 'vxp'
);

The second is the namespace for component names, because component names are unprefixed by default, and sometimes there may be conflicts:

 createApp(App).use(install, { prefix: 'V' })

 <template>
  <VButton></VButton>
  <VInput></VInput>
</template>

property design

In the design of component properties, Vexip UI follows the principle of being as concise as possible.

Based on this, for more than 97.812% of Boolean type attributes, the design follows the default value of false , when it needs to be set to true , it can be done directly by adding attributes, No need to assign any more.

For example, the modal box Modal has a Footer by default, and the attribute that controls whether the Footer appears will be used in the design no-footer , instead of :footer="false" :

 <Modal no-footer></Modal>

There is also an attribute, which has only two states, such as controlling whether a component is horizontal or vertical. For the design of these attributes, the previous type="horizontal/vertical" will not be used, but one of the states will be used. As the default state (like in this example it's more of the default state of the component), another state is opened via a Boolean property (in this example the property would be vertical ):

 <template>
  <CheckboxGroup vertical :options="options"></CheckboxGroup>
</template>

In this way, for these two-sided attributes, one is to keep it as clean as possible, and the other is to have a more assembled feeling during the development process.

Supports direct on-demand introduction

All components support direct on-demand import, only the components used will be packaged:

 <template>
  <Button>Button</Button>
</template>

<script setup lang="ts">
import 'vexip-ui/css/preset.css'
import 'vexip-ui/css/button.css'

import { Button } from 'vexip-ui'
</script>

However, this requires manual introduction of styles. You can use plugins such as vite-plugin-style-import or unplugin-vue-components to automatically import styles. For details, see the documentation .

In the follow-up plan, the Resolver of several mainstream plug-ins will be built directly in the component library.

Accessibility of components

All components have relatively complete accessibility support.

In Vexip UI, almost every interactive component that can be done with the mouse can be done with the keyboard alone.

However, regarding the aria series attributes, I am also learning and selling them now, so I can't say how I did it~

brand new components

The following components have been added so far:

• Grid grid layout ( display: grid implemented)
• Layout layout
• Space spacing
• Cascader Cascade Selector
• Transfer shuttle box
• Avatar Avatar
• Viewer Viewer
• Skeleton Skeleton Screen
• ConfigProvider configuration injection
• overflow
• ResizeObserver scale observation
• VirtualList virtual list

In addition, a large number of components have been optimized, upgraded, and bug fixed~

Details can be found in the documentation .

Usability improvements for form-related components

For the most frequently used form series components, some specific optimizations have been made in the recent update.

In the past, when we used form components, after binding the properties of FormItem prop once, the control components under it had to be bound again with v-model .

In Vexip UI, we agree that there is only one form control series component (Input, Select) under a FormItem, so that FormItem will automatically pass the value to this component, no need to bind again v-model .

 <template>
  <Form :model="model">
    <FormItem required label="Input" prop="input">
      <Input></Input>
    </FormItem>
    <FormItem required label="Select" prop="select">
      <Select :options="options"></Select>
    </FormItem>
  </Form>
</template>

Can reduce some repetitive code in normal cases.

However, there are also disadvantages. For example, if you want to split the field fullName into two parts firstName and lastName and then use two Inputs to input,表单的model里firstName lastName FormItem 中，提交的时候再自行合并成fullName .

In the follow-up plan, in addition to continuous optimization of ease of use, it should support the built-in grid layout function of the form, as well as the JSON Schema form.

Newly updated documentation

The documentation of the previous version was a separate project, which was integrated into the docs directory of the component library in 2.0, and was fully upgraded:

• Improve the documentation of all components, each component basically covers the use cases used by general functions
• Comprehensive English document translation, although large-scale machine translation plus small-scale corrections (one person did his best to translate, although I know you don't read English)
• Mobile reading experience optimization (except for some examples that do not support mobile scenarios)
• Playground is implemented based on @vue/repl , all examples in the document can be opened and played in Playground

follow-up work plan

At present, the most important unfinished work of Vexip UI is unit testing. The focus of subsequent development work will be migrated to unit test writing. When the test cases for the basic functions of each component are similar, the official version should be released 2.0.0 .

Then another aspect is that there is currently a lack of a sample (template) project (or an admin project?), and the plan is to develop it after the official release of 2.0.0 , or if there are small partners who are interested in trying it out If you try, I'd be more than willing to help~

In terms of component functions, we should continue to focus on the optimization of the usability of the form and the enhancement of functions.

Finally, let's go to Vexip-UI - GitHub for Amway, I hope you can support it, and give a reward by the way 🌟~