Migration from v0.4.0 to v0.5.0

v0.5.0 turns AnyUI into a multi-framework library — Vue, React and Svelte now ship from one package with framework-scoped entrypoints — and adds a large batch of new components. The Vue API you already use is preserved; most apps only need to adjust install commands and import paths.

Install & import paths

The package name is unchanged — it’s still @any-design/anyui — but it now exposes framework-scoped subpaths.

Before (v0.4.0)

// everything lived at the package root, Vue-only
import { Button, message } from '@any-design/anyui';
import AnyUI from '@any-design/anyui';

After (v0.5.0)

// Vue — the root path still works, but the explicit subpath is recommended
import { Button, message } from '@any-design/anyui/vue';
// React
import { Button, message } from '@any-design/anyui/react';
// Svelte
import { Button, message } from '@any-design/anyui/svelte';
// Resolver (unplugin-vue-components)
import { AnyUIResolver } from '@any-design/anyui/vue/resolver';

The bare @any-design/anyui root still resolves to the Vue build, so existing Vue apps keep working without changes. Switching to the explicit /vue subpath is recommended for clarity.

Shared stylesheet

The stylesheet import is unchanged:

import '@any-design/anyui/styles/index.css';

The build output moved from lib/ to dist/, but you consume it through the styles/* export, which is unchanged. If you imported internal lib/... paths directly, switch to the styles/* or dist/* exports.

Peer dependencies

AnyUI now declares Vue, React, Svelte and their Iconify adapters as optional peer dependencies. Install only the ones for the framework(s) you target:

# Vue only
pnpm add @any-design/anyui vue @iconify/vue
# React only
pnpm add @any-design/anyui react react-dom @iconify/react
# Svelte only
pnpm add @any-design/anyui svelte @iconify/svelte

In v0.4.0 Vue was a hard dependency; it is now an optional peer so the other frameworks can be installed without pulling Vue.

New components

v0.5.0 adds these components (all three frameworks): Alert, ConfirmModal (+ confirmModal() helper), Dialog, DropdownMenu, Item, Kbd, LoadingMask (+ loadingMask() helper), OtpInput, Popup, Progress, ProgressButton, QrCode, ScrollArea, Slider, Switch, Table, Toast (+ toast() helper), Tooltip, and the new Tabs / Tab / TabPanel and Accordion / AccordionItem.

No existing component was removed or renamed. The message() imperative helper is still exported from the package root of every framework entry.

Behavioural changes

ASelect now supports multiple (multi-select renders selected values as closable tags). The ASelectItem.value type is still string | number; single-select behaviour is unchanged.
AInput / ATextarea were refactored for shared form-control internals. The public props (modelValue, size, round, borderless, prefix/postfix slots, prefixPadding/postfixPadding) and events (update:modelValue, input, change, blur, submit) are preserved.
AAvatar gained name (renders initials) and a fallback slot. The AvatarSize enum and PREDEFINED_SIZE map are unchanged.
ARadioButtonGroup gained a size prop (small / default / large). Existing usages default to default.
AVirtualList props (enableDeepWatch, ignoreInvisibleItems, estimatedSize, etc.) are unchanged from v0.4.0; the v0.3.3→v0.4.0 migration notes still apply.
Surfaces & design tokens: every surface component now indirections through --a-surface* and --a-shadow* tokens so the liquid glass style (<html data-anyui-style="glass">) cascades automatically. If you overrode component backgrounds with hardcoded var(--bg-bright), prefer var(--a-surface, var(--bg-bright)) so glass mode picks it up.

Liquid glass

New in v0.5.0: add one attribute for a frosted, translucent look across all surfaces:

<html data-anyui-style="glass">

Or scope it with .a-glass. This is additive — no existing markup needs to change.

Registry

The shadcn-compatible registry now has three adapters:

pnpm dlx shadcn@latest add any-design/anyui/vue
pnpm dlx shadcn@latest add any-design/anyui/react
pnpm dlx shadcn@latest add any-design/anyui/svelte

Quick checklist

Update the package: pnpm add @any-design/anyui@^0.5.0.
Add the optional peer deps for the framework(s) you use (Vue/React/Svelte + their @iconify/*).
(Recommended) switch imports to the explicit subpath: @any-design/anyui/vue (and /react, /svelte).
If you imported lib/... paths directly, move to dist/* or the styles/* export.
Skim the behavioural notes above if you use ASelect, AInput, AAvatar, or ARadioButtonGroup.

No codemod is required for Vue apps — the root import path and the component APIs are backward compatible.

从 v0.4.0 升级到 v0.5.0

v0.5.0 将 AnyUI 升级为跨框架库 —— Vue、React 与 Svelte 现在由同一个包通过按框架划分的入口提供 —— 并新增了大批组件。你正在使用的 Vue API 保持不变；大多数应用只需调整安装命令与引入路径。

安装与引入路径

包名不变 —— 仍然是 @any-design/anyui —— 但新增了按框架划分的子路径。

升级前（v0.4.0）

// 所有内容都在包根，仅 Vue
import { Button, message } from '@any-design/anyui';
import AnyUI from '@any-design/anyui';

升级后（v0.5.0）

// Vue —— 根路径仍然可用，但建议使用明确的子路径
import { Button, message } from '@any-design/anyui/vue';
// React
import { Button, message } from '@any-design/anyui/react';
// Svelte
import { Button, message } from '@any-design/anyui/svelte';
// Resolver（unplugin-vue-components）
import { AnyUIResolver } from '@any-design/anyui/vue/resolver';

裸包名 @any-design/anyui 的根路径仍然指向 Vue 构建，因此现有 Vue 应用无需改动即可继续运行。建议改用明确的 /vue 子路径以便于辨识。

共享样式表

样式引入方式不变：

import '@any-design/anyui/styles/index.css';

构建产物从 lib/ 迁移到了 dist/，但你通过 styles/* 导出消费，该导出未变。如果你此前直接引用了 lib/... 内部路径，请改用 styles/* 或 dist/* 导出。

Peer 依赖

AnyUI 现在将 Vue、React、Svelte 及其 Iconify 适配器声明为可选 peer 依赖。只需安装你实际使用的框架对应的依赖：

# 仅 Vue
pnpm add @any-design/anyui vue @iconify/vue
# 仅 React
pnpm add @any-design/anyui react react-dom @iconify/react
# 仅 Svelte
pnpm add @any-design/anyui svelte @iconify/svelte

v0.4.0 中 Vue 是硬性 dependency；现在改为可选 peer，这样安装其他框架时不会被强制拉入 Vue。

新增组件

v0.5.0 新增以下组件（三端均有）：Alert、ConfirmModal（含 confirmModal() 命令式方法）、Dialog、DropdownMenu、Item、Kbd、LoadingMask（含 loadingMask() 方法）、OtpInput、Popup、Progress、ProgressButton、QrCode、ScrollArea、Slider、Switch、Table、Toast（含 toast() 方法）、Tooltip，以及新的 Tabs / Tab / TabPanel 与 Accordion / AccordionItem。

没有移除或重命名任何现有组件。message() 命令式方法仍从每个框架入口的包根导出。

行为变更

ASelect 新增 multiple（多选时将已选值渲染为可关闭的标签）。ASelectItem.value 类型仍为 string | number；单选行为不变。
AInput / ATextarea 重构了共享的表单控件内部实现。公开 props（modelValue、size、round、borderless、prefix/postfix 插槽、prefixPadding/postfixPadding）与事件（update:modelValue、input、change、blur、submit）保持不变。
AAvatar 新增 name（渲染首字母）与 fallback 插槽。AvatarSize 枚举与 PREDEFINED_SIZE 映射不变。
ARadioButtonGroup 新增 size prop（small / default / large）。现有用法默认为 default。
AVirtualList 的 props（enableDeepWatch、ignoreInvisibleItems、estimatedSize 等）相较 v0.4.0 未变；v0.3.3→v0.4.0 的迁移说明仍然适用。
表面与设计令牌：所有表面组件现在通过 --a-surface* 与 --a-shadow* 令牌做了一层间接，使 liquid glass 风格（<html data-anyui-style="glass">）能自动级联生效。如果你曾用硬编码 var(--bg-bright) 覆盖组件背景，建议改用 var(--a-surface, var(--bg-bright))，这样 glass 模式才能接管。

Liquid glass

v0.5.0 新增：添加一个属性即可让所有表面变为带磨砂质感的半透明形态：

<html data-anyui-style="glass">

或使用 .a-glass 局部启用。此特性为增量添加 —— 无需改动任何现有标记。

Registry

兼容 shadcn 的 registry 现有三个 adapter：

pnpm dlx shadcn@latest add any-design/anyui/vue
pnpm dlx shadcn@latest add any-design/anyui/react
pnpm dlx shadcn@latest add any-design/anyui/svelte

快速清单

更新包：pnpm add @any-design/anyui@^0.5.0。
为你使用的框架添加可选 peer 依赖（Vue / React / Svelte 及对应的 @iconify/*）。
（建议）将引入切换为明确的子路径：@any-design/anyui/vue（以及 /react、/svelte）。
若曾直接引用 lib/... 路径，请改用 dist/* 或 styles/* 导出。
若使用了 ASelect、AInput、AAvatar 或 ARadioButtonGroup，请过一眼上面的行为变更说明。

Vue 应用无需 codemod —— 根引入路径与组件 API 均向后兼容。