跪拜 Guibai
← Back to the summary

Wot UI 2.3 Ships a Full-Featured QRCode Component and Whole-Form Disabling

Hello everyone, I'm Burumoyuqu, the main maintainer of wot-ui.

Wot UI 2.3.0 has been officially released.

The protagonist of this update is clear: the brand new QRCode component. Beyond generating a scannable QR code, it also supports logos, gradient colors, different dot styles, background images, and image export. When building pages for event codes, sharing codes, or payment codes, you no longer need to find a separate QR code solution.

At the same time, we've continued to round out the capabilities of Form, Collapse, Cell, and icon-related components. More importantly, the two ecosystems surrounding Wot UI have also kept pace: Open Wot has released 1.0.6, synchronously incorporating the component knowledge from 2.3.0; wot-starter v2 has also been upgraded to Wot UI 2.3.0.

The component library, AI knowledge base, and starter template are updated together. This time, you don't have to upgrade the components and then wait for the other two teammates to slowly catch up.

New QRCode Component

Let's look at the most intuitive new feature this time: wd-qr-code.

The most basic usage only requires passing in text:

<wd-qr-code text="https://wot-ui.cn" />

If that were all, it certainly wouldn't be enough. After all, QR codes in business today have long moved beyond "black and white squares, as long as it scans."

The QRCode in 2.3.0 supports:

For example, to create a QR code with a logo and gradient colors, you can write it directly like this:

<wd-qr-code
  text="https://wot-ui.cn"
  logo="https://img.yzcdn.cn/vant/cat.jpeg"
  dot-type="rounded"
  enable-gradient
  :gradient-direction="45"
  :gradient-colors="['#4f46e5', '#06b6d4', '#10b981']"
/>

When you need to save or share the QR code, you can export the image through the component instance:

<template>
  <wd-qr-code ref="qrCodeRef" text="https://wot-ui.cn" />
  <wd-button @click="handleExport">Export QR Code</wd-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { QrCodeInstance } from '@/uni_modules/wot-ui/components/wd-qr-code/types'

const qrCodeRef = ref<QrCodeInstance>()

async function handleExport() {
  const tempFilePath = await qrCodeRef.value?.exportImage()
  console.log(tempFilePath)
}
</script>

The component is rendered based on Canvas and has been adapted for rendering, export, and performance issues on Alipay Mini Programs. However, note that logos and background images are still subject to the image loading rules of each platform. When using remote images, remember to configure the download domain and ensure the image can be parsed normally by uni.getImageInfo.

Form Supports Whole-Form Disabling

Form pages often have "view mode" and "edit mode." Previously, to switch an entire form to a disabled state, you had to pass disabled to each input component individually. With many fields, the code looked like you were copying and pasting the same multiple-choice question.

2.3.0 adds disabled to wd-form:

<wd-form :model="model" :disabled="disabled" border>
  <wd-form-item title="Username" prop="username">
    <wd-input v-model="model.username" placeholder="Please enter username" />
  </wd-form-item>

  <wd-form-item title="Notifications" prop="notice" value-align="left">
    <wd-switch v-model="model.notice" />
  </wd-form-item>
</wd-form>

When enabled, components within the form that support a disabled state, such as Input, Textarea, InputNumber, Switch, Radio, Checkbox, Rate, Slider, and Upload, will uniformly enter a disabled state.

wd-form-item also supports setting disabled individually. For popup layer components like Picker, Calendar, and Cascader, which are typically opened by clicking a form item, disabling will intercept the click entry point of the FormItem, preventing a situation where the page looks uneditable but a selector still pops up on click.

disabled does not affect form methods like validate or reset, nor does it automatically disable regular buttons outside the form or in slots.

This update also fixes an issue where error messages would overwrite each other when multiple validation errors were returned for the same field. Now, the first valid prompt for that field is stably retained, making form validation results more predictable.

Collapse Supports Uncontrolled Mode

Previously, when using Collapse, even if the business logic didn't care which item was currently expanded, you still needed to prepare a v-model.

2.3.0 supports uncontrolled mode. When v-model is not passed, the component maintains the expansion state internally:

<wd-collapse>
  <wd-collapse-item title="FAQ" name="question">
    Here is the answer to the question.
  </wd-collapse-item>
  <wd-collapse-item title="Instructions" name="guide">
    Here are the instructions.
  </wd-collapse-item>
</wd-collapse>

If the business needs to get the expanded value, just continue using v-model; if it's just for an FAQ, instruction area, or simple content folding, you can now accomplish it with one less piece of state to write.

This kind of update might seem like it just saves two lines of code, but state that the component should handle itself doesn't need to be delegated to the business page every time. The less you have to write, the better—the time saved can certainly be used for slacking off.

Custom Icon Coverage is More Complete

Wot UI v2 already supports integrating custom icons or UnoCSS icons via iconPrefix and cssIcon, but previously some components that internally used wd-icon did not fully pass through these two configurations.

2.3.0 continues to round out this capability, covering components like Avatar, Cell, Empty, FormItem, GridItem, Input, Rate, SidebarItem, SlideVerify, TabbarItem, Tag, and Textarea.

For example, using UnoCSS icons in Rate:

<wd-rate
  v-model="score"
  css-icon
  icon="i-carbon-star"
  active-icon="i-carbon-star-filled"
/>

Now, custom icons are no longer limited to standalone wd-icon usage; prefix icons, status icons, and action icons inside components can also maintain the same visual language.

Cell's Label Slot Control is Clearer

Cell also adds an enabling configuration for the label slot this time. FormItem, which is implemented based on Cell, will also correctly pass down its own state of whether it provides a label slot.

By default, use-label-slot is true, allowing you to continue customizing the description area below the title via the slot:

<wd-cell title="Membership Plan">
  <template #label>
    <view>Valid until 2027-08-03</view>
  </template>
</wd-cell>

If a specific scenario does not want to use the slot, you can explicitly set :use-label-slot="false", in which case the component falls back to the label property. There is now a clear switch for whether the slot participates in rendering, making it easier to control across different mini-program platforms.

Open Wot 1.0.6 Synchronized Update

image.png

After the component API is updated, the AI knowledge base must also keep up in time. Otherwise, if you ask the AI "help me generate a gradient QR code," and it searches through old data and tells you "it is recommended to install a third-party plugin," that scene is a bit awkward.

In coordination with Wot UI 2.3.0, Open Wot 1.0.6 has been released synchronously, mainly completing these tasks:

If you have already globally installed @wot-ui/cli, you can update to the latest version:

npm install -g @wot-ui/[email protected]

Then directly query the QR code component newly added in 2.3.0:

wot info QRCode --version 2.3.0

Projects using MCP and Agent Skills are also recommended to update synchronously, so that the AI can look up the real API of 2.3.0 before generating code, rather than continuing to rely on training data memory.

wot-starter v2 Upgraded to 2.3.0

In addition to Open Wot, the v2 branch of wot-starter has also upgraded @wot-ui/ui to ^2.3.0, and synchronously updated related dependencies.

Recently, wot-starter also fixed issues with theme state management and system theme listening. If you are about to start a new uni-app project, you can directly use the latest template:

pnpm create uni my-app -t wot-starter-v2

If you are already using wot-starter, you don't need to recreate the project; just update the existing dependencies:

pnpm add @wot-ui/[email protected]

A note on version relationships: Wot UI's version this time is 2.3.0, and Open Wot's corresponding version is 1.0.6; wot-starter is synchronously upgrading the component library dependency, not publishing the template's own version number as 2.3.0.

How to Upgrade to Wot UI 2.3.0

If your project uses Wot UI via npm dependencies, you can directly execute:

pnpm add @wot-ui/[email protected]

Using npm:

npm install @wot-ui/[email protected]

You can also manually modify package.json:

{
  "dependencies": {
    "@wot-ui/ui": "2.3.0"
  }
}

Then reinstall dependencies:

pnpm install

This is a forward-compatible feature update; existing projects can upgrade directly. After upgrading, if you use custom icons, complex forms, or remote images for QR codes, it is recommended to focus on regression testing the rendering and interaction effects on the platforms your project actually runs on.

Finally

Wot UI 2.3.0 is not just about adding a QR code component.

This update pushes several usage chains forward a step together:

From the component library, to the knowledge that AI can query, to the out-of-the-box project template, these three pieces will continue to be maintained together. If you encounter problems after upgrading, feel free to raise an Issue on GitHub, and you're also welcome to tell us about your real business scenarios.

After all, the best new features of a component library are often not conceived in a meeting room, but patched together by everyone after stepping into pitfalls in real projects.

Comments

Top 2 from juejin.cn, machine-translated. The original thread is authoritative.

用户1673672135426

Awesome, I just installed a QR code plugin two days ago, I can get rid of it now! When are you adding a barcode component too, so I can ditch my barcode plugin as well [smirk]

吃瓜群众_混子

Very strong