跪拜 Guibai
← Back to the summary

Wot UI 2.2.0 Lands a Subtle Button Variant and Full-Screen Video Previews

Wot UI 2.2.0 Released: Button Adds Subtle Variant, VideoPreview Experience Further Enhanced

Hello everyone, I'm Buru Moyu Qu, the main maintainer of Wot UI.

Wot UI 2.2.0 is officially released.

This update is still not a major version that "overhauls the entire component library," but it is very suitable for direct upgrades in daily projects. It mainly supplements two types of content: one is the continued advancement of component capabilities, such as the Button adding a subtle variant and VideoPreview supporting full-screen preview; the other is some detail issues encountered in real-world scenarios, such as hidden form item validation, Alipay Mini Program Tabs rendering order, and Toast icon line-height anomalies.

If you are already using Wot UI v2, this version is worth following.

Button Adds Subtle Type Variant

Let's start with a very intuitive update: Button now has a subtle variant.

Previously, buttons already supported several presentation forms like base, plain, dashed, soft, and text. But in some scenarios, what people wanted was a visual effect that is "a bit more restrained than soft, yet softer than a pure outline."

2.2.0 fills this gap.

Now you can write it directly like this:

<wd-button variant="subtle">Primary Button</wd-button>

This variant is more suitable for these scenarios:

If you previously relied on custom styles to achieve this effect, you can now use the official variant directly, and the component semantics will be more unified.

VideoPreview Supports Full-Screen Preview

Another update I personally focused on this time is the enhanced preview experience of VideoPreview.

Starting from 2.2.0, both wd-video-preview and useVideoPreview support full-screen preview capability. For vertical videos, display-oriented video content, or when you simply want users to view immersively after clicking, this capability will be much more convenient.

For example, when calling functionally, you can directly pass in fullScreen:

import { useVideoPreview } from '@/uni_modules/wot-ui'

const { previewVideo } = useVideoPreview()

function openPreview() {
  previewVideo({
    url: 'https://unpkg.com/[email protected]/VID_115503.mp4',
    title: 'Full-Screen Video',
    fullScreen: true,
    closePosition: 'right-top'
  })
}

If you prefer the component-based writing style, you can also declare it directly on the component:

<wd-video-preview full-screen />

This update is not just as simple as "adding one more parameter." For native video full-screen playback scenarios on the App side, an internal layer of processing logic has been added to try to avoid occlusion issues caused by native video same-layer rendering. For users, the most direct feeling is: video preview finally feels more like a "video preview," rather than just a video stuffed into an ordinary popup layer.

Hidden Form Fields No Longer Trigger Validation Incorrectly

There is also a very practical fix this time, coming from form scenarios.

Previously, if a wd-form-item was controlled to show/hide via v-if, even if it was no longer rendered, as long as the validation schema still retained this field, it could still affect the result of validate().

This was quite uncomfortable in dynamic forms. Clearly, the user couldn't see that field and couldn't fill it in, but they might be blocked by it when submitting.

2.2.0 fixes this issue.

The current behavior is more intuitive:

Form items uninstalled via v-if no longer participate in the current validation result
After being displayed again, they re-participate in validation

That is to say, the experience of dynamically adding or removing form items will be more stable, and it is also easier to control in business logic. Especially for pages that "decide whether to display fields based on switches, identities, or configuration items," this fix will save a lot of extra judgment.

Other Issues Also Fixed

In addition to the few more noticeable changes above, 2.2.0 also conveniently fixed a batch of user experience issues:

These updates may not seem like "big news" individually, but they are all problems encountered in real projects, and they are quite annoying when encountered. After fixing them one by one, the overall experience will be much smoother.

Documentation Also Synchronously Updated

In conjunction with this version, the documentation side has also supplemented several pieces of content:

If you happen to be working on dynamic forms, video previews, or unifying page interaction styles, it is recommended to check out the latest documentation.

How to Upgrade to 2.2.0

If you are already using Wot UI in your project, you can update the @wot-ui/ui version in package.json to 2.2.0:

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

Then reinstall dependencies:

pnpm install

If you wish to update directly, you can also execute:

pnpm add @wot-ui/[email protected]

Projects using npm can execute:

npm install @wot-ui/[email protected]

For existing projects, the key is not to reinstall the component library, but to upgrade the @wot-ui/ui version in the current project to 2.2.0.

Finally

Wot UI 2.2.0 is a very typical version that "doesn't look exaggerated, but feels more handy after upgrading."

It mainly brings a few things:

If your project is already using Wot UI v2, you can directly upgrade to 2.2.0 to try it out.

You are also welcome to continue providing feedback on real usage scenarios and issues. We will continue to fill in these "small but critical" experiences bit by bit.

Related Resources