youzan/vant-weapp

This system is the Vant Weapp component library, a collection of UI components specifically designed for the WeChat Mini Program platform. It provides a comprehensive suite of interface elements, including form inputs, data display widgets, navigation aids, and layout structures, all built to integrate with WeChat's native APIs and ecosystem. The repository also includes a dedicated example application that demonstrates these components in action and serves as a live documentation environment.

80 changes.

This period marks the initialization of the Vant Weapp component library, involving a complete repository restructuring and the implementation of a modern build pipeline using TypeScript and Less. The work focused on developing a comprehensive suite of UI components for WeChat Mini Programs, including layout, form, navigation, and feedback elements, while simultaneously establishing a robust example application to demonstrate their usage.

52 changes.

This period focused on the initial release and expansion of the Vant Weapp component library for WeChat Mini Programs. The work involved implementing a comprehensive suite of UI components, including layout systems, form controls, navigation elements, and interactive widgets, alongside foundational utilities and TypeScript definitions.

34 changes.

This period focused on introducing several new UI components, including Calendar, Empty, ShareSheet, ConfigProvider, and Cascader, to the WeChat Mini Program library. The work also involved creating comprehensive demo pages and snapshot tests for these new features, alongside existing components, to ensure visual consistency and provide usage examples.

The ActionSheet component is now available in the \packages/action-sheet\ directory, providing a bottom-up modal panel for displaying menu options. It supports configurable actions with names, subnames, colors, and loading/disabled states, along with props for controlling visibility (\show\), z-index, overlay behavior, and safe-area insets. The component integrates with WeChat mini-program open capabilities (such as \getUserInfo\, \getPhoneNumber\, and \agreePrivacyAuthorization\) via the \openType\ property on action items. Styling is handled through LESS with CSS variable support for theming, and the component relies on \van-popup\, \van-icon\, and \van-loading\ as internal dependencies. Documentation and API definitions are included in the new \README.md\.

packages/action-sheet · high confidence

The ActionSheet component is now available in the library, providing a bottom-sheet UI pattern for displaying a list of actions. It supports configuration via props such as title, description, and a list of actions, and includes features like overlay interaction, safe area insets, and loading states. The component integrates with WeChat-specific capabilities, allowing actions to trigger user profile retrieval, phone number collection, and other mini-program open types.

lib/action-sheet · high confidence

The example application now includes a dedicated page for the ActionSheet component, allowing users to view and interact with the component's demo directly within the app.

example/pages/action-sheet · high confidence

A new demo page has been added for the Button component, showcasing its various features and configurations. Users can now view examples of different button types (default, primary, info, danger, warning), plain and hairline styles, disabled and loading states, shapes (square, round), icons, sizes (large, small, mini), block layout, and custom colors including gradients.

(repo-wide) · high confidence

A new demo page has been added to the Calendar package, providing a comprehensive showcase of the component's capabilities. The demo includes sections for basic usage (single, multiple, and range selection), quick selection modes, and various customization options such as custom colors, date ranges, button text, day text formatting, and popup positioning. It also demonstrates a tiled calendar view and exposes all relevant events (confirm, select, unselect, open, close) for developers to reference.

packages/calendar/demo · high confidence

The Card demo page now includes a 'Advanced Usage' example that demonstrates rendering tags and action buttons within the card footer. This change adds the necessary component registrations (van-tag, van-button) and styles to support these features in the demo environment, resolving the previous missing tag button definition.

packages/card/demo · high confidence

Introduces a new Card component that displays a thumbnail image, title, description, price (with integer and decimal parts), original price, and quantity. The component supports customization via slots for the thumb, tag, title, desc, price, origin-price, num, and footer areas, and allows linking from the thumbnail via the thumbLink prop.

lib/card · high confidence

A new demo page for the Card component has been added to the example application. The page displays the 'Card product card' title and renders the \\<van-card-demo /\>\ component, providing a dedicated view to showcase the card's styling and features.

example/pages/card · high confidence

The Circle component is now available in the WeChat Mini Program library, providing a ring-shaped progress bar with support for animated progress transitions. Users can customize the progress value, ring diameter, stroke width, and colors (including gradient support via the \color\ prop). The component allows configuring the drawing direction (clockwise or counter-clockwise) and displays text or custom slot content in the center. It leverages the Canvas API for rendering and includes a demo page showcasing various usage patterns.

packages/circle · high confidence

Introduced the ConfigProvider component in the Vant Weapp library, enabling users to customize and dynamically switch component themes by passing a \theme-vars\ object. This component wraps child elements and uses WXS to map the provided theme variables into CSS custom properties, allowing for global style overrides without manual CSS editing.

packages/config-provider · high confidence

A new demo page has been added to the ConfigProvider package that illustrates how to apply custom theme variables. It presents two side-by-side scenarios: a default theme and a customized theme where specific style properties (such as icon colors and slider dimensions) are overridden via the \theme-vars\ prop, allowing users to see the visual impact of theming on Rate, Slider, and Button components.

packages/config-provider/demo · high confidence

An example page for the ConfigProvider component has been added to the application. This new page, titled 'ConfigProvider Global Configuration', serves as a demo entry point that renders the \van-config-provider-demo\ component, allowing users to view and interact with the component's usage examples.

example/pages/config-provider · high confidence

The new CountDown component allows you to display a real-time countdown with millisecond precision. It supports customizable time formats (e.g., DD days, HH hours, mm minutes, ss seconds, SSS milliseconds) and can render updates every second or every millisecond via the \millisecond\ prop. Users can choose between the default display or a custom layout using the \use-slot\ prop, which emits a \change\ event with the current time breakdown. The component automatically starts on load but can be manually controlled via \start\, \pause\, and \reset\ methods, and triggers a \finish\ event when the time reaches zero. Additionally, the timer is properly cleaned up when the component is destroyed to prevent memory leaks.

packages/count-down · high confidence

The example application now includes a dedicated page for the CountDown component. This change adds the necessary JavaScript, JSON configuration, and WXML template files to render the \van-count-down-demo\ component, allowing users to view and interact with the countdown functionality within the example app.

example/pages/count-down · high confidence

A new example page for the DatetimePicker component has been added to the documentation site. This page serves as a demo entry point, rendering the \van-datetime-picker-demo\ component and setting the navigation bar title to 'DatetimePicker 时间选择'.

example/pages/datetime-picker · high confidence

A new example page for the Dialog component has been added, providing a dedicated view to demonstrate its usage. The page is configured with the title 'Dialog 弹出框' and renders the \\<van-dialog-demo /\>\ component to showcase the dialog's functionality.

example/pages/dialog, example/pages/stepper, example/pages/tab · high confidence

The new Divider component allows users to visually separate content into distinct regions. It supports basic solid lines, thin lines (hairline), and dashed styles. Users can position text content to the left, center, or right, and customize the text color, border color, and font size. The component is implemented using WXS for performance and includes a demo page and snapshot tests to verify rendering.

packages/divider · high confidence

An example page for the Dropdown Menu component has been added to the application. This new page, titled "Dropdown Menu" in the navigation bar, renders the \van-dropdown-menu-demo\ component, allowing users to view and interact with the dropdown menu functionality within the example environment.

(repo-wide) · high confidence

Introduces the DropdownItem component, allowing users to define individual selectable options within a dropdown menu. This component supports configuration via props such as title, value, disabled state, and custom styling, and integrates with the parent DropdownMenu to handle selection changes, popup display, and active item highlighting.

lib/dropdown-item · high confidence

Introduces the DropdownMenu component, providing a dropdown menu interface with configurable options such as active color, overlay visibility, z-index, animation duration, and display direction (up or down). The component supports closing on overlay or outside clicks, manages child item states, and includes styling for titles and disabled states.

lib/dropdown-menu · high confidence

Introduced the Empty component to provide placeholder prompts for empty states. The component supports built-in image types (error, network, search) via the image prop, allows custom image URLs, and includes slots for customizing the image, description, and bottom content.

packages/empty · high confidence

Introduces a new Goods Action Button component designed to sit within a goods action bar. The button supports standard styling options such as type (defaulting to danger), size, color, and plain mode, along with loading and disabled states. It automatically adjusts its appearance based on its position within the parent container, applying rounded corners to the first and last buttons in the group. The component integrates with the parent goods action to manage layout and exposes click events for interaction.

(repo-wide) · high confidence

A new demo page has been added for the GoodsAction component, showcasing various usage patterns including basic usage, information badges, custom button colors, and plain button styles.

packages/goods-action/demo · high confidence

A new example page for the GoodsAction component has been added, providing a dedicated view to demonstrate the component's usage within the application.

example/pages/goods-action · high confidence

The example application now includes a dedicated demo page for the Image component. This change adds the necessary JavaScript, JSON configuration, and WXML template files to render the \\<van-image-demo /\>\ component, allowing users to view and interact with the Image component's features within the example app.

(repo-wide) · high confidence

The lib/image directory now includes a new Image component that supports configurable sizing, aspect-fit modes, and lazy loading. Users can display custom loading and error placeholders via slots or default icons, and the component exposes events for load, error, and click interactions.

lib/image · high confidence

Introduced the IndexAnchor component, which serves as the anchor marker within an IndexBar. It displays the index label (or a custom slot), manages active styling via CSS variables, and handles scrolling to its position by calculating offsets relative to the sticky header.

packages/index-anchor · high confidence

Introduced the IndexBar component, which provides an alphabetical sidebar for categorizing and quickly locating items in a list. The component supports custom index lists, sticky anchor headers that highlight as the user scrolls, and automatic scrolling to the selected anchor. It is designed for page-level scrolling and includes props for configuring the index list, z-index, sticky offset, and highlight color.

packages/index-bar · high confidence

The IndexBar demo page now includes two tabbed examples: a basic usage scenario and a custom index list scenario. Users can view how the index bar integrates with tabs and how to provide custom index lists using slots.

packages/index-bar/demo · high confidence

An example page for the IndexBar component has been added to the application. This includes the necessary JavaScript, JSON configuration, and WXML template files to render the IndexBar demo, allowing users to view and interact with the component within the example environment.

example/pages/index-bar · high confidence

Introduced the Info component, which renders a badge or dot indicator. It supports a 'dot' prop to display a circular dot without text, and an 'info' prop for custom badge content. The component is styled with CSS variables for theming and handles visibility based on whether the info value is empty or the dot is active.

packages/info · high confidence

A new demo page for the NavBar component has been added to the example application, allowing users to view and interact with the navigation bar in a standalone context.

example/pages/nav-bar · high confidence

Added a new example page for the NoticeBar component, including the necessary JavaScript, JSON configuration, and WXML template files to demonstrate its usage.

example/pages/notice-bar · high confidence

A new demo entry point for the Panel component has been added to the packages/panel/demo directory. This includes the necessary configuration (index.json), styles (index.less), logic (index.ts), and template (index.wxml) to render two usage examples: a basic panel and an advanced panel featuring a footer slot with action buttons.

packages/panel/demo · high confidence

The new \Progress\ component allows users to display operation progress with a default blue bar, supporting customization of the bar's thickness via the \stroke-width\ prop (default 4px), color via \color\, track background via \track-color\, and inactive/grayed-out state via the \inactive\ prop. It also includes a pivot label (percentage or custom \pivot-text\) with configurable text and background colors, and supports linear gradients for the progress bar color.

packages/progress · high confidence

Introduced the Row component, which provides a flex-based layout container for arranging child columns. It supports a 'gutter' prop to define spacing between columns, automatically applying negative margins via WXS to ensure proper alignment. The component establishes a parent-child relationship with 'col' components, propagating gutter settings to children and ensuring consistent layout behavior.

packages/row · high confidence

Introduces the ShareSheet component, a bottom-popup panel that displays share channel buttons without handling the actual sharing logic. Users can define options via the \options\ prop (supporting single or multi-row layouts), customize icons (including custom URLs), and add descriptions. The component supports a \root-portal\ prop (v1.11.3) to resolve fixed positioning issues on WeChat, defaults to a z-index of 100, and exposes events for selection, closing, and overlay clicks.

packages/share-sheet · high confidence

This change introduces the Sidebar component, a vertical navigation bar for switching between content areas, along with the SidebarItem component for individual navigation items. Users can control the active item via the \activeKey\ prop on the sidebar, and sidebar items support \dot\ and \badge\ properties to display notification indicators. The component also supports disabling items and emits a \change\ event when the selected item switches, allowing for custom handling of navigation state.

packages/sidebar · high confidence

Introduces the new Skeleton component, which displays placeholder graphics during content loading. Users can configure title and avatar placeholders, set the number and width of content rows, and toggle between the skeleton view and actual child content using the \loading\ prop. The component supports external CSS classes for customizing the row, avatar, and title styles, and includes an optional animation effect.

packages/skeleton · high confidence

The example application now includes a dedicated page for the Skeleton component. This change adds the necessary JavaScript, JSON configuration, and WXML template files to render the \van-skeleton-demo\ component, allowing users to view and test the skeleton UI pattern within the example environment.

example/pages/skeleton · high confidence

A new demo page for the Stepper component has been added, showcasing various usage patterns including basic usage, step size configuration, input range limits, integer-only input, disabled states, async change handling, custom sizing, and rounded themes. The demo includes a test case for async changes that displays a loading toast while simulating a delayed update.

packages/cascader/demo, packages/stepper/demo · high confidence

Introduces the Sticky component, which keeps content fixed to the top of the screen (or a specified container) when scrolling out of view, mimicking CSS \position: sticky\. Users can configure the offset distance via \offset-top\, define a custom container via the \container\ prop, and handle nested scrolling in \scroll-view\ using the \scroll-top\ prop. The component exposes a \scroll\ event to track fixed state and scroll position, with a default z-index of 99.

packages/sticky · high confidence

The lib/submit-bar directory now includes a new SubmitBar component, providing a fixed bottom bar for displaying order totals, custom tips, and a submit button. This component supports configurable currency, price formatting, and styling via CSS variables, and integrates with existing Button and Icon components to facilitate the final step of a checkout flow.

lib/submit-bar · high confidence

A new example page for the SubmitBar component has been added to the documentation site. This page renders the \van-submit-bar-demo\ component, allowing users to view and interact with the SubmitBar in a live demo environment.

example/pages/submit-bar · high confidence

The lib/swipe-cell directory now includes the compiled source files (index.js, index.wxml, index.wxss) for a new SwipeCell component. This component allows users to swipe horizontally to reveal action buttons on either the left or right side of a cell. It supports configuration via props such as leftWidth, rightWidth, disabled, and asyncClose, and exposes events for opening, closing, and clicking the revealed actions.

lib/swipe-cell · high confidence

A new example page for the SwipeCell component has been added to the application. This page displays the swipe-cell demo using the \<van-swipe-cell-demo /\> component and sets the navigation bar title to 'SwipeCell 滑动单元格'.

example/pages/swipe-cell · high confidence

Introduces a new Toast component for WeChat Mini Programs, providing a user-facing API to display temporary feedback messages. The implementation includes a component supporting text, HTML, icon, and loading states, with configurable positioning, masking, and z-index. The JavaScript API exposes convenience methods for common scenarios (loading, success, fail) alongside a general show method, allowing developers to easily integrate toast notifications into their applications.

lib/toast · high confidence

The new Transition component allows elements to smoothly transition between styles (such as fading or sliding) when shown or hidden. It supports built-in animation types like fade, fade-up, slide-down, and others via the name prop, and allows custom durations and CSS classes for fine-grained control. The component exposes lifecycle events (before-enter, enter, after-enter, before-leave, leave, after-leave) to hook into the animation process, and includes a demo page and snapshot tests to verify rendering.

packages/transition · high confidence

A new example page for the TreeSelect component has been added under example/pages/tree-select. The page renders the van-tree-select-demo component and sets the navigation bar title to 'TreeSelect 分类选择' (TreeSelect Category Selection).

example/pages/tree-select · high confidence

New WXS helper files have been added to the library to support component logic in WeChat Mini Programs. These include \add-unit\ for appending 'px' to numeric values, \style\ for converting style objects and arrays into CSS strings, \bem\ for generating BEM-style class names, \memoize\ for caching function results, and supporting utilities for array and object handling. These modules are exported via \utils.wxs\ to provide standardized formatting and class management capabilities for UI components.

lib/wxs · high confidence

Introduces the grid-item component for the WeChat Mini Program platform, enabling individual items within a grid layout. This component supports configuration via props such as icon, text, badge, and dot indicators, and handles layout calculations (including square aspect ratios and gutters) through WXS scripts. It integrates with the parent grid component for structural alignment and provides clickable behavior with optional navigation via the link mixin.

(repo-wide) · high confidence

A new example page for the Uploader component has been added to the WeChat Mini Program environment. This page serves as a demo entry point, importing the \van-uploader-demo\ component and configuring the navigation bar title as 'Uploader 文件上传'.

example/pages/popup, example/pages/uploader · high confidence

The dist folder now includes the compiled WeChat Mini Program source files (JS, WXML, WXSS, JSON, and TypeScript definitions) for the ActionSheet, Area, Button, Calendar, and Card components. This makes these components available for direct consumption in the mini program environment, including support for features like the ActionSheet's user profile retrieval, the Area's multi-column region selection, the Button's form and loading states, and the Calendar's single/range/multiple date selection modes.

dist · high confidence

A new demo page has been added to the NoticeBar package, providing interactive examples for users to see the component in action. The demo showcases various usage patterns including basic usage, scrolling modes, multi-line display, closeable/link modes, and custom styling options.

packages/notice-bar/demo · high confidence

The Field component now supports aligning error messages via the new \errorMessageAlign\ prop, allowing users to control whether error text is displayed left, center, or right. This change also introduces the Field component itself as a new export in \lib/field\, integrating with \van-cell\ and \van-icon\ to provide a configurable input/textarea wrapper with features like clear buttons, word limits, and icon slots.

lib/field · high confidence

The calendar now renders individual months using a dedicated \month\ component. This component handles the layout and styling of days within a single month, supporting single, multiple, and range selection modes. It respects configuration props such as \minDate\, \maxDate\, \firstDayOfWeek\, and \formatter\ to correctly position days and apply visual styles for selected or disabled states.

lib/calendar/components/month · high confidence

A new example page for the Area component has been added to the demo application, providing a dedicated interface to showcase province, city, and district selection functionality.

example/pages/area · high confidence

A new Area component has been introduced to allow users to select geographic regions (province, city, and county) via a picker interface. This component integrates with the existing van-picker, supports configurable column counts (1 to 3), and handles hierarchical data binding through the \areaList\ prop, enabling seamless region selection in forms.

lib/area · high confidence

A new example page for the Col component has been added to the application. This page, titled 'Layout 布局', renders the \van-col-demo\ component, allowing users to view and interact with the Col layout examples directly within the app.

example/pages/col · high confidence

Introduced a new Dialog component for WeChat Mini Programs, providing both a programmatic API (Dialog.alert, Dialog.confirm, Dialog.close) and a reusable Vant component. The component supports customizable titles, messages, themes (including a round-button style), and overlay behavior, with options to handle confirm/cancel actions, show loading states, and define custom close logic via beforeClose.

lib/dialog · high confidence

Introduced a new 'Empty' UI component for WeChat Mini Programs, providing a standardized view for displaying empty states. The component supports customizable images (including preset types like 'error', 'search', 'default', and 'network') and descriptions via props, with flexible slot-based content for bottom actions.

lib/empty · high confidence

A new example page for the Empty component has been added under example/pages/empty. This includes the page entry point (index.js), configuration (index.json) setting the navigation bar title to 'Empty 空状态', and the template (index.wxml) which renders the van-empty-demo component, allowing users to view the Empty component in action.

example/pages/empty · high confidence

Introduced the IndexBar component, enabling users to display a scrollable list with a sticky sidebar for quick navigation. The component supports configuration options such as sticky positioning, z-index, highlight color, and sticky offset top, and automatically manages the active anchor state based on scroll position.

lib/index-bar · high confidence

Introduced a new Overlay component that renders a fixed, semi-transparent background layer. Users can control its visibility via the \show\ prop, adjust its stacking order with \zIndex\, and configure animation duration. The component supports locking scroll interactions when active and offers a \rootPortal\ option to render the overlay in a portal root, which is useful for avoiding z-index stacking context issues in complex layouts.

(repo-wide) · high confidence

The example application now includes a dedicated page for the Overlay component. This change adds the necessary JavaScript, JSON configuration, and WXML template files to render the \van-overlay-demo\ component, allowing users to view and interact with the overlay functionality within the example app.

example/pages/overlay · high confidence

A new example page for the Panel component has been added to the application. This page serves as a demo interface, displaying the \<van-panel-demo\> component and setting the navigation bar title to 'Panel 面板'.

example/pages/panel · high confidence

A new Popup component has been introduced, providing a modal overlay that supports configurable positions (center, top, right, bottom, left) and transition animations (scale, fade, slide). Users can control visibility via an overlay, enable closing by tapping the overlay or a custom close icon, and utilize safe-area insets for bottom and top margins to ensure content remains visible on devices with notches or home bars. The component also supports z-index management and custom styling for both the popup container and the overlay.

lib/popup · high confidence

Introduced a new Skeleton component that displays animated placeholder content while data is loading. Users can configure the layout by specifying the number of rows, toggling the display of an avatar and title, and customizing sizes and shapes. The component supports CSS variables for styling and includes a blinking animation effect to indicate activity.

lib/skeleton · high confidence

Introduced a new Sticky component that allows elements to remain fixed at the top of the viewport during scrolling. The component supports configuration via props such as \offsetTop\ for the distance from the top, \zIndex\ for stacking order, and \disabled\ to toggle behavior. It automatically detects scroll events and can optionally respect a custom container element to determine when to stop sticking. The implementation includes necessary styles and WXS logic to handle positioning and transitions within the WeChat Mini Program environment.

(repo-wide) · high confidence

Introduced a new TypeScript declaration file (index.d.ts) in the lib/definitions directory that exports the VantComponentOptions type. This type provides structured type definitions for Vant component configuration, including data, props, methods, lifecycle hooks, and relations, leveraging WechatMiniprogram typings to improve type safety and developer experience when defining Vant components.

lib/definitions · high confidence

This change introduces the \lib/notify\ module for WeChat Mini Programs, providing a toast-style notification overlay. It includes the \van-notify\ component (defined in \index.wxml\/\.js\/\.wxss\) which supports configurable message text, type (primary, success, danger, warning), duration, and styling, along with a \notify.js\ API that exposes \Notify()\, \Notify.clear()\, \setDefaultOptions()\, and \resetDefaultOptions()\ to programmatically control the notification from JavaScript.

lib/notify · high confidence

Introduced a new circle component for WeChat Mini Programs that renders a circular progress indicator using the Canvas API. The component supports configurable properties including value, size, color (with gradient support), stroke width, line cap, and clockwise direction, and features an animated transition effect controlled by a speed prop. It includes a canvas adaptor to normalize context methods and handles both legacy canvas contexts and the newer Canvas 2D API based on environment capabilities.

lib/circle · high confidence

This change introduces the \collapse-item\ component for WeChat Mini Programs, enabling collapsible content sections with smooth height animations. The component integrates with a parent \collapse\ container to manage expanded states (supporting both accordion and multi-select modes), renders its content using a \van-cell\ for the header, and applies CSS transitions for the right-icon rotation and content visibility.

lib/collapse-item · high confidence

Introduced a new countdown component for WeChat Mini Programs that supports millisecond-precision timing, automatic starting, and customizable time formatting (e.g., HH:mm:ss). The component allows users to display the remaining time either through a default formatted string or via a slot for custom rendering, and emits events when the countdown changes or finishes.

lib/count-down · high confidence

Introduced a new navigation bar component for WeChat Mini Programs, providing a fixed header with configurable title, left/right text or icons, and support for safe area insets and custom styling. The component handles status bar height calculation and offers slots for custom left and right content, along with click events for navigation actions.

lib/nav-bar · high confidence

A new example page for the Sidebar component has been added to the WeChat Mini Program environment. This includes the necessary page configuration files (JSON, WXML, WXSS) and entry script to render the sidebar demo, allowing users to view and test the component within a WeChat Mini Program context.

example/pages/sidebar · high confidence

The lib/slider directory now contains the compiled source files for a new slider component tailored for WeChat Mini Programs. This includes the JavaScript logic for handling touch interactions (drag, click, range selection), the WXML template for rendering the slider bar and buttons, WXSS styles for visual appearance (including vertical mode and disabled states), and WXS modules for efficient style calculations. Users can now utilize this component to add interactive range or single-value sliders to their mini programs.

(repo-wide) · high confidence

A new \demo-block\ component has been introduced in the example directory to structure demonstration content. It supports optional title and padding configurations, allows wrapping content in a card-style container with rounded corners, and exposes a custom class for external styling.

example/components/demo-block · high confidence

The example directory now contains a complete WeChat Mini Program application structure, including \app.js\, \app.json\, and \app.wxss\. The app initializes WeChat Cloud development (\wx.cloud.init\) pointing to the 'production-7dtfw' environment and registers a comprehensive list of component demo pages (such as Button, Calendar, Cascader, and ConfigProvider) along with their corresponding demo components in the global \usingComponents\ configuration. It also includes a \database\_area.json\ file for province/city data, a \config.js\ for navigation grouping, and a test cloud function.

example · high confidence

This update introduces the Vant Weapp component library, providing a comprehensive set of UI elements for WeChat Mini Programs. The release includes foundational common utilities such as color definitions, validation helpers, and version compatibility checks, alongside core layout components like the Row and Col system for responsive grid designs. It also establishes the component architecture through a custom VantComponent wrapper that standardizes data, props, and lifecycle mapping to the WeChat Mini Program API.

lib/common · high confidence

This update introduces the initial implementation of several core UI components for WeChat Mini Programs, including Button, ConfigProvider, Divider, Panel, and Transition. The Button component supports various styles (plain, round, square, block), loading states, and WeChat-specific interactions like user profile retrieval and phone number collection. The ConfigProvider enables global theme customization via CSS variables, while the Transition component provides animation support for enter/leave states. These components are built using the VantComponent framework and include necessary mixins, styles, and WXS utilities.

lib/button · high confidence

The GridItem component is now available, allowing users to define individual items within a Grid layout. It supports configuration for icons (including color, size, and prefix), text content, and badges/dots. The component automatically adapts to parent Grid settings such as column count, square aspect ratio, gutter spacing, and layout direction (including reverse order). It also provides custom classes for styling the content, icon, and text areas, and handles click events for navigation.

packages/grid-item · high confidence

This change introduces the new \SidebarItem\ component, which serves as the individual selectable item within a sidebar navigation. It supports displaying a title (via text or a slot), and visual indicators such as a dot, badge, or info icon. The component handles click events to trigger selection changes within its parent sidebar, manages active/disabled states with corresponding CSS classes, and relies on the \van-info\ component for rendering badges.

packages/sidebar-item · high confidence

Introduces the new \tabbar-item\ component, which serves as an individual tab within a tab bar. It supports configuration via props for icons, active states, and custom colors, and allows navigation to external URLs through the \url\ and \linkType\ properties. The component integrates with a parent tabbar for state management and renders icons and info badges using the \van-icon\ and \van-info\ sub-components.

packages/tabbar-item · high confidence

The Tabs component is now available in the library, providing a tabbed navigation interface with support for line and card styles, sticky positioning, swipeable scrolling, and animated transitions. Users can customize active/inactive colors, line dimensions, and ellipsis behavior, while the component handles dynamic tab updates and integrates with the Sticky and Info components for enhanced layout and badge display.

lib/tab, lib/tabs · high confidence

The Area component is now available in the \packages/area\ directory, providing a province, city, and district selection interface built on top of the Picker component. It supports configurable column counts (province only, province/city, or full hierarchy), custom column placeholders, and integration with WeChat Cloud Development for asynchronous data loading. The component exposes props for controlling the toolbar, item height, and visible item count, and emits events for selection changes, confirmations, and cancellations. A demo page and corresponding snapshot tests are included to demonstrate basic usage and verify rendering.

packages/area · high confidence

Adds a new Calendar component to the WeChat Mini Program library, enabling users to select single dates, date ranges, or multiple dates. The component supports customization of the date range via min-date and max-date props, allows selecting the same day for a range with the allow-same-day prop, and lets users configure the first day of the week. It includes a popup interface with a confirm button, supports custom colors and text, and handles safe area insets for modern devices.

packages/calendar · high confidence

The Card component is now available in the \packages/card\ directory, providing a product card layout for displaying images, prices, and descriptions. It supports props for controlling image mode (\thumbMode\), lazy loading, centering content, and displaying tags, along with extensive slot support for customizing titles, descriptions, prices, and footers.

packages/card · high confidence

The Cascader component is now available, enabling users to select values from hierarchical data structures (such as province-city-district trees). It supports configurable option fields via the \field-names\ prop, custom highlight colors with \active-color\, and asynchronous loading of child options through the \change\ event. The component integrates with \van-tabs\ for navigation, allows title customization via a slot or \title\ prop, and includes an \ellipsis\ prop to control tab text truncation.

packages/cascader · high confidence

Adds the Checkbox and CheckboxGroup components, enabling users to select multiple options from a set. The Checkbox supports customization of shape (round or square), checked color, icon size, and icon slot, as well as disabling the label click area. The CheckboxGroup manages multi-select state, supports a horizontal layout direction, and allows limiting the maximum number of selectable items. A demo page and snapshot tests are included to showcase these features.

packages/checkbox · high confidence

The Col component is now available as part of the Layout system, allowing users to define column widths within a row using the \span\ and \offset\ props. It supports a 24-column grid system and handles spacing between columns via the \gutter\ prop inherited from the parent Row. The implementation uses WXS for performance optimization and Less for generating utility classes, with a demo and snapshot tests included to verify rendering.

packages/col · high confidence

The new Collapse component allows users to group content into expandable panels, supporting both multi-select and accordion modes. It exposes props for controlling the active state (value), enabling accordion behavior, and toggling borders. The component emits change, open, and close events to notify parent components of state transitions. The accompanying CollapseItem component provides individual panel configuration, including title, icon, disabled state, and a new clickable prop to control click feedback. Demo files and snapshot tests are included to demonstrate basic usage, event handling, and custom title content.

packages/collapse · high confidence

The collapse-item component is now available, providing the individual item structure for the collapse group. It includes an animation module that handles smooth height transitions for expanding and collapsing content, ensuring performance by avoiding animations when height is zero. The component supports props for size, name, title, icon, label, disabled state, clickable behavior, and border visibility. Styling is handled via Less variables for content padding, text color, font size, and line height, with CSS transitions for the arrow icon rotation. The item integrates with a parent collapse component via relations to manage expanded state and border inheritance.

packages/collapse-item · high confidence

The Dialog component is now available for use in mini-programs, supporting both functional calls (Dialog.alert/confirm) and component-based usage. Users can customize the appearance using the new theme prop (including a round-button style), adjust message alignment, and apply custom classes or styles. The component supports asynchronous closing via the beforeClose callback, allows embedding custom content through slots (title, confirm-button, cancel-button), and integrates with WeChat-specific features like open-type events and privacy authorization. Default z-index is set to 2000, and the overlay click behavior can be controlled via closeOnClickOverlay.

packages/dialog · high confidence

The new DropdownItem component allows users to define individual dropdown options with title, value, and icon. It supports a root-portal prop to render the popup in a portal for better z-index handling, and exposes open, opened, close, and closed events for lifecycle tracking. The component also includes a useBeforeToggle prop to allow asynchronous control over popup visibility changes.

packages/dropdown-item · high confidence

Adds the DropdownMenu and DropdownItem components for WeChat Mini Programs, enabling users to display downward or upward expanding menu lists with customizable content, active colors, and overlay behavior. The implementation includes a \before-toggle\ event to support asynchronous open/close logic, a \safe-area-tab-bar\ prop to handle bottom tab bar spacing, and CSS variables (such as \--dropdown-menu-box-shadow\) for styling customization. Demo pages and snapshot tests are included to demonstrate basic usage, custom slots, and disabled states.

packages/dropdown-menu · high confidence

The Field component is now available in the \packages/field\ directory, providing a customizable input control for WeChat Mini Programs. It supports various input types (text, password, textarea), features like clearable buttons, word count limits, and error message display. The component integrates with the existing Cell component for consistent styling and offers extensive customization through props and CSS variables.

packages/field · high confidence

Added the GoodsAction component, a fixed-bottom navigation bar designed for product-related actions. It supports safe-area-inset-bottom for iPhone X compatibility and manages child components (GoodsActionIcon, GoodsActionButton) to distribute styles and handle interactions.

packages/goods-action · high confidence

Added a new GoodsActionButton component that wraps the existing van-button to provide specialized styling and layout behavior within a GoodsAction container. The component supports props for text, color, size, loading, disabled, plain, and type states, and automatically applies rounded border styles to the first and last buttons in the action group. It also exposes standard button events and custom style/class overrides.

packages/goods-action-button · high confidence

A new GoodsActionIcon component is added to the library, providing a styled icon button designed for use within a GoodsAction bar. It wraps a van-button with a van-icon, supporting props for customization such as icon name, size, color, text label, and loading/disabled states. The component also exposes external style classes (icon-class, text-class, info-class) and a class-prefix prop to allow flexible styling and integration with existing icon sets.

packages/goods-action-icon · high confidence

Adds the Grid and GridItem components, enabling users to create responsive grid layouts with configurable column counts, spacing (gutter), square aspect ratios, and horizontal/vertical content direction. The Grid component supports click feedback, URL-based navigation, and custom slots, while GridItem allows for icons, text, badges, and dot indicators. Styling is handled via LESS and WXS for performance, with props like \icon-size\, \reverse\, and external classes (\custom-class\, \content-class\, \icon-class\, \text-class\) providing extensive customization options.

packages/grid · high confidence

The Icon component is now available in the \packages/icon\ directory, allowing users to display font-based or image icons. It supports props for \name\ (accepting icon names or image URLs), \dot\ and \info\ for badges, \color\, \size\, and \custom-style\. The implementation uses WXS for performance optimization to compute classes and styles, and includes a \class-prefix\ prop to enable integration with third-party icon fonts. The component also exposes a \click\ event and allows styling via \custom-class\ and \info-class\.

packages/icon · high confidence

The NavBar component is now available in the @vant/weapp library, providing a navigational bar for page headers. It supports customizable left and right text or icons, a central title, and a left arrow. Key features include fixed positioning at the top of the page with an optional placeholder to prevent layout shifts, a configurable bottom border, and safe-area-inset-top support to respect device status bars. The component exposes click events for left and right actions and allows slot-based customization for both side areas and the title.

packages/nav-bar · high confidence

Adds the NoticeBar component, which displays a scrolling text message that automatically activates when content overflows. Users can configure scrolling speed, enable multi-line wrapping, and choose between closeable or link modes. The component supports custom colors, background styling, and left/right icon slots.

packages/notice-bar · high confidence

Adds the Notify component, enabling message alerts via both a functional API (Notify()) and a declarative component (\<van-notify\>). The component supports four types (primary, success, warning, danger), customizable styling (color, background, top offset, z-index), callbacks (onClick, onOpened, onClose), and safe-area handling. It also provides methods to set or reset default options globally.

packages/notify · high confidence

Adds the Picker component to the library, enabling users to select values from single or multi-column lists, with support for cascading columns, default index selection, loading states, and customizable toolbars. The component includes a mask overlay for visual focus, uses WXS for performance optimization, and exposes methods for dynamic column updates.

packages/picker · high confidence

Added a new PickerColumn component that renders a scrollable list of options with touch support, allowing users to select a single item from a column. The component supports configuration via props such as defaultIndex, initialOptions, itemHeight, and visibleItemCount, and exposes an active-class for styling the selected item. It handles touch interactions to scroll through options and emits a change event when the selection updates, serving as the underlying column logic for multi-column picker interfaces.

packages/picker-column · high confidence

The new \packages/radio\ component provides a single-selection control for WeChat Mini Programs. Users can arrange options horizontally via the \direction\ prop, customize the icon shape (\round\ or \square\), size (\icon-size\), and selected color (\checked-color\). It supports disabling individual items or the entire group, toggling label position (\left\/\right\), disabling text click-through (\label-disabled\), and using custom icons via a slot. The component integrates with \van-radio-group\ for value management and relies on LESS for styling and WXS for computed styles.

packages/radio · high confidence

The new Rate component allows users to rate items via tap or touch-move gestures (controlled by the new \touchable\ prop) and supports half-star selection via the \allow-half\ prop. It includes props for custom icons (\icon\, \void-icon\), sizing, gutter spacing, and colors, and integrates with the Icon component for visual rendering.

packages/rate · high confidence

Adds the Search component, a wrapper around the Field component designed for search input scenarios. It supports props for controlling value, label, shape (square/round), background color, and action button text, as well as slots for customizing the action button and icons. The component emits events for search, cancel, change, focus, blur, clear, and click-input interactions.

packages/search · high confidence

The new Slider component allows users to select a value within a given range, supporting both single and dual-thumb (range) modes via the \range\ prop. It features a \vertical\ prop for vertical orientation, customizable \active-color\ and \inactive-color\ for styling, and a \use-button-slot\ prop that enables custom button content via \button\, \left-button\, and \right-button\ slots. The component exposes \drag\, \drag-start\, and \drag-end\ events for real-time interaction feedback, and includes demo pages and snapshot tests to verify rendering.

packages/slider · high confidence

The new \van-steps\ component allows users to visualize multi-step processes with horizontal or vertical layouts. It supports customizing the active and inactive colors, setting specific icons for each step via \activeIcon\ and \inactiveIcon\ properties, and triggers a \click-step\ event when a step is tapped. The component includes a demo page and snapshot tests to verify rendering.

packages/steps · high confidence

The new SubmitBar component provides a fixed bottom bar for displaying order totals and submitting orders. It supports dynamic price formatting with configurable decimal places, custom labels, and suffix text. Users can display a tip section with an optional icon and custom content via slots, and the button can be disabled or shown in a loading state. The component respects the iPhone X bottom safe area by default and allows styling customization through external CSS classes.

packages/submit-bar · high confidence

The new \SwipeCell\ component allows users to reveal action buttons by swiping left or right on a cell. It supports configurable left and right slide areas via \left-width\ and \right-width\ props, and enables programmatic control through \open\ and \close\ methods. For scenarios requiring confirmation before closing, the \async-close\ prop triggers a \close\ event that must be handled manually, while the \open\ event notifies when the cell is opened. The component also supports mutual exclusion, ensuring that opening one cell closes any other currently open swipe cells in the same context.

packages/swipe-cell · high confidence

The Tab component now supports lazy rendering via the \lazyRender\ prop, which defers content rendering until a tab is activated or animation is enabled, improving initial load performance. It also introduces new props for visual customization: \dot\ and \info\ to display status indicators, \titleStyle\ for inline title styling, and \disabled\ to prevent interaction. The component integrates with the parent Tabs via \useParent\ relation and exposes \update\ and \updateRender\ methods to sync state, while the demo and tests confirm these features are available for immediate use.

packages/tab · high confidence

This change adds the Tabbar (bottom navigation bar) and TabbarItem components, enabling users to switch between different pages. The Tabbar supports props for controlling the active state (by index or name), custom active/inactive colors, fixed positioning with a placeholder option, border visibility, z-index, and safe-area-inset-bottom for iPhone X compatibility. It also exposes a change event to handle tab switching logic. The package includes documentation, demo pages, and snapshot tests to verify rendering.

packages/tabbar · high confidence

Adds the Tabs component, which manages a set of Tab panels with support for swipe navigation, sticky positioning, and animated transitions. The component exposes props for styling (type, color, border, lineWidth, lineHeight, zIndex, ellipsis, swipeThreshold, offsetTop, lazyRender) and behavior (sticky, swipeable, animated, active, useBeforeChange), and integrates with the van-sticky and van-info components to handle scroll anchoring and tab badges.

packages/tabs · high confidence

The Tag component is now available for use in WeChat Mini Programs, allowing users to display labels with various visual styles including primary, success, danger, and warning types, as well as plain, round, and mark variants. Users can customize colors via the \color\ and \text-color\ props, adjust sizes with \medium\ or \large\, and enable a closeable state that triggers a \close\ event when the icon is clicked. The component relies on WXS for performance optimization and CSS variables for theming, and includes a demo page and snapshot tests to verify rendering.

packages/tag · high confidence

This change adds the Toast component to the library, providing a lightweight notification overlay for message, loading, and operation result prompts. The implementation includes a JavaScript API (\Toast\, \Toast.loading\, \Toast.success\, \Toast.fail\) for programmatic control, a WXML template utilizing \van-overlay\ and \van-transition\ for rendering, and LESS styles supporting CSS variables for theming. The component supports features such as custom messages, loading spinners, success/fail icons, click prevention, z-index configuration, and an \onClose\ callback. A demo page and corresponding snapshot tests are also included to demonstrate usage and verify rendering.

packages/image, packages/toast · high confidence

The TreeSelect component is now available in the @vant/weapp library, enabling users to select items from a set of related data categories. It supports both single and multi-selection modes, allowing developers to control selection via the active-id prop (accepting strings, numbers, or arrays). The component features a left-side navigation bar for categories and a right-side content area for options, with support for disabling specific categories or options, customizing the selected icon, and adding badges or dots to category headers. Users can also inject custom content into the right-side area via the content slot and style the component using external CSS classes.

packages/tree-select · high confidence

Adds the Uploader component to the library, enabling users to select and preview local images, videos, and files for upload. The component supports multiple file selection, configurable acceptance types (image, video, media, or generic files), and provides visual feedback for upload states such as uploading and failure. It integrates with WeChat Mini Program APIs (including the newer chooseMedia API) and includes demo pages and tests to illustrate basic usage, cloud storage uploads, and custom validation.

packages/uploader · high confidence

A new \packages/definitions/index.ts\ file has been added, exporting the \VantComponentOptions\ generic type. This type defines the structure for Vant component options within the WeChat Mini Program environment, specifying supported properties such as \data\, \props\, \methods\, \watch\, \relation\, and lifecycle hooks like \created\ and \mounted\. It also includes the \VantComponentInstance\ interface to describe the component instance shape, providing a standardized type definition for component configuration.

packages/definitions · high confidence

Added a new uploader component for WeChat Mini Programs that enables users to select and preview images, videos, and files. The component supports multiple file selection, size limits, and customizable upload triggers, while providing hooks for pre-upload validation and post-upload processing via beforeRead and afterRead callbacks.

lib/uploader · high confidence

Added a new month-view component to the calendar package, providing the underlying UI and logic for rendering individual months within the calendar interface. This component handles day generation, range selection styling (start, end, middle, multiple), custom colors, and row height adjustments, serving as the visual building block for the calendar's monthly display.

packages/calendar/components/month · high confidence

The new \packages/button\ component provides a versatile button for triggering actions, supporting five types (default, primary, info, warning, danger) and four sizes (large, normal, small, mini). Users can customize the appearance with solid or gradient colors, round or square shapes, and a hairline border mode. The component includes a loading state with configurable text and icon types, icon support, and extensive WeChat Mini Program integration via \open-type\ (e.g., getPhoneNumber, getUserInfo, chooseAvatar, agreePrivacyAuthorization). It also supports form submission, custom styles, and external style classes for hover and loading states.

packages/button · high confidence

The radio-group component is now available in the library, providing a container for radio buttons that supports horizontal layout via the 'direction' prop and allows disabling all child radios via the 'disabled' prop. This addition enables users to manage mutually exclusive selections within a group in WeChat Mini Program applications.

lib/radio-group · high confidence

The style package now includes a centralized \var.less\ file defining design tokens (colors, spacing, typography, border radii) and component-specific variables for UI elements like Buttons, Cells, and ActionSheets. Additionally, new utility mixins and classes have been added for common styling needs: \hairline.less\ provides thin border utilities, \ellipsis.less\ handles text truncation, and \clearfix.less\ manages float clearing.

packages/common/style · high confidence

This change introduces the foundational \packages/common\ module for the Vant Weapp library, providing the core building blocks used across all components. It includes a component factory (\component.ts\) that maps Vant's internal options to WeChat Mini Program APIs, standardizes external classes and behaviors, and handles parent-child component relations (\relation.ts\). The package also supplies essential utility functions for DOM queries, animation fallbacks, and data handling (\utils.ts\), version detection helpers to ensure compatibility with different WeChat SDK versions (\version.ts\), type validators (\validator.ts\), and a set of base color constants (\color.ts\). Additionally, it bundles common CSS styles for text ellipsis, 1px borders, and clearfixes, along with documentation on how to import these global styles and set recommended font families.

packages/common · high confidence

A new CellGroup component has been added to the library, allowing users to wrap multiple cells within a bordered container. This component supports an optional title display, customizable borders (top and bottom), and an 'inset' mode that applies specific padding and rounded corners for a distinct visual style.

packages/cell-group · high confidence

The Grid component is now available in the library, providing a layout structure for displaying items in a configurable number of columns. Users can control the grid's appearance and behavior through props such as \columnNum\ (defaulting to 4), \gutter\ for spacing between items, \square\ for aspect ratio, \border\ for visual dividers, and \clickable\ for interaction handling. The component automatically updates its child items when these properties change.

(repo-wide) · high confidence

The Loading component is introduced to display loading transition states. It supports two visual types: 'circular' (default) and 'spinner', allowing users to customize the icon style. The component accepts props for color, size (string or number), and text size, and supports a vertical layout mode where the icon and text are stacked. Users can also pass custom loading text via the default slot. The implementation uses WXS for performance optimization and LESS for styling, with a demo page and snapshot tests included to verify rendering.

packages/loading · high confidence

The style library now includes three new Less mixins to standardize common UI patterns. The \clearfix\ mixin handles float clearing using a pseudo-element. The \ellipsis\ mixin provides both single-line and multi-line text truncation, with the multi-line variant explicitly ignoring autoprefixer to preserve the \-webkit-box-orient\ property required for line clamping. The \hairline\ mixin family (\hairline\, \hairline-top\, \hairline-bottom\) implements high-DPI border rendering by scaling a pseudo-element, addressing visual artifacts on devices with high pixel density.

packages/common/style/mixins · high confidence

Introduces the DatetimePicker component, which allows users to select dates, times, or both. It supports multiple modes (datetime, date, year-month, time) and includes props for filtering options (filter), formatting display text (formatter), and setting valid date ranges (min-date, max-date, min-hour, max-hour, etc.). The component is built on top of the existing Picker component and includes demo pages and snapshot tests to verify its rendering.

packages/datetime-picker · high confidence

Added the Overlay component, which creates a mask layer to emphasize specific page elements and prevent user interaction with the background. It supports controlling visibility via the \show\ prop, customizing appearance with \z-index\, \duration\, \custom-style\, and \class-name\, and embedding content via a default slot. The component includes a \lock-scroll\ prop (defaulting to true) to disable background scrolling and a \root-portal\ prop (defaulting to false) to portal the overlay outside the page context, addressing fixed positioning issues on WeChat base library \>= 2.25.2.

packages/overlay · high confidence

The packages/wxs directory now includes a set of new WXS (WeiXin Script) utility modules: add-unit, array, bem, memoize, object, style, and utils. These modules provide functions for adding CSS units, checking array types, generating BEM class names, memoizing functions, extracting object keys, converting camelCase to kebab-case for styles, and combining these utilities. This change introduces new internal capabilities for performance optimization and style assembly within the WeChat Mini Program environment, rather than modifying existing component behavior directly.

packages/wxs · high confidence

This change introduces two new UI components for WeChat Mini Programs: a Search bar and a Cell Group. The Search component provides a customizable input field with support for labels, icons, clear actions, and custom slots, emitting events for search, change, focus, blur, clear, and a new click-input event. The Cell Group component allows grouping cells with an optional title and inset styling. Both components are built using the Vant component system and include necessary styles and configuration files.

lib/search · high confidence

Added a set of new mixins in lib/mixins to support component behavior in WeChat Mini Programs. The basic mixin provides utility methods for emitting events and optimized data updates. The button mixin adds support for various button interactions, including user info, contact, phone number retrieval, and privacy authorization events, with compatibility checks for newer API versions. The link mixin enables navigation with a fallback to redirect when the page stack is full. The page-scroll mixin allows components to hook into page scroll events without overwriting existing handlers. The touch mixin handles touch gesture detection (horizontal/vertical) and delta calculations. The transition mixin provides animated enter/leave behavior with customizable durations and CSS class names.

lib/mixins · high confidence

The \packages/mixins\ directory now provides a set of reusable behaviors to simplify component development. The \basic\ mixin adds a \setView\ method for optimized \setData\ calls that skip updates when values haven't changed. The \button\ mixin centralizes support for various \openType\ events (such as \getphonenumber\, \launchapp\, \chooseavatar\, and \agreeprivacyauthorization\) and properties like \ariaLabel\ and \buttonId\. The \transition\ mixin manages CSS-based animation states (enter/leave) with lifecycle events, while \page-scroll\ handles aggregating scroll events across multiple components on a single page. Additional utilities include \link\ for navigation logic and \touch\ for gesture direction detection.

packages/mixins · high confidence

A new \demo-home-nav\ component has been added to the example application. This component renders a list of navigation items grouped by category, displaying titles with arrow icons. It utilizes the Vant \van-icon\ component for the visual indicator and implements navigation logic that switches between \wx.navigateTo\ and \wx.redirectTo\ based on the current page stack depth to prevent exceeding WeChat's page limit.

example/components/demo-home-nav · high confidence

The Popup component is introduced as a new overlay container for displaying dialogs, prompts, and other content, supporting multiple stacked popups. It allows positioning at the center, top, bottom, left, or right, and features a \round\ prop for rounded corners. The component includes a customizable close icon (\closeable\, \close-icon\, \close-icon-position\), scroll locking (\lock-scroll\), and safe-area insets for iPhone X and modern devices (\safe-area-inset-top\, \safe-area-inset-bottom\, \safe-area-tab-bar\). It also supports a \root-portal\ prop to render outside the page container for better fixed-position handling, and integrates with the \van-overlay\ for background masking.

packages/popup · high confidence

The \zui\ directory has been restructured by deleting the legacy styling and template files for multiple UI components, including buttons, badges, dialogs, forms, cells, tabs, and loadmore indicators. This change removes the visual definitions and WXML templates for these elements, effectively stripping the \zui\ package of its component library assets.

zui · high confidence

The demo pages for several UI components (badge, button, cell, dashboard, label, loadmore, panel, and tab) have been deleted from the application. This removes the standalone example views that previously showcased these components, likely as part of a directory restructuring or migration to a different documentation or demonstration approach.

pages · high confidence

The repository has been initialized with a new structure, adding essential configuration files for development and build processes, including ESLint, Prettier, Stylelint, Babel, PostCSS, and TypeScript configurations. A new MIT license file and an updated README.md documenting the Vant Weapp component library are included. The old WeChat mini-program entry files (app.js, app.json, app.wxss) have been removed, indicating a shift away from the previous monolithic app structure towards a component library distribution model.

(repo-wide) · high confidence

The Field demo page now includes a 'Insert Button' example that demonstrates using the \use-button-slot\ feature to embed a \van-button\ inside the input field. This required adding the \van-button\ component to the demo's local dependencies and applying specific styling to ensure the button aligns correctly within the field layout.

packages/field/demo · high confidence

The build pipeline has been completely rewritten: CSS compilation now uses Less (via gulp-less) instead of the previous preprocessor, and TypeScript is compiled using gulp-typescript with dedicated tsconfig files for library, ES, and example targets. The build process now generates .wxss files from .less sources, handles icon path resolution for the example mini-program, and automatically generates example page scaffolding. A new dev mode (build/dev.mjs) integrates with @vant/cli and runs the gulp build in watch mode, while release.sh automates versioning and publishing, and upload.js uses miniprogram-ci to upload the example mini-program.

build · high confidence

The Cell component has been rewritten to improve performance by using WXS for style computations (specifically title width and style). This update introduces several new props: \arrow-direction\ to control the arrow icon's orientation, \size\ to support a 'large' variant, \use-label-slot\ to enable custom label content, and \title-style\ for direct inline styling. The component now supports external CSS classes for the title, label, value, and right-icon areas, and utilizes \hover-class\ for click-state styling. A demo page and corresponding snapshot tests have been added to verify the rendering of these features.

packages/cell · high confidence

The development workflow now automatically validates commit messages and staged changes before they are accepted. A new pre-commit hook runs lint-staged to check code quality, while a commit-msg hook uses vant-cli to enforce conventional commit message standards, ensuring consistent history and code hygiene.

.husky · high confidence

The Loading example page has been refactored to replace its previous implementation with a dedicated \<van-loading-demo /\> component. This change simplifies the page structure by delegating the visual demonstration to a reusable component, while retaining the standard page configuration for the navigation bar title.

example/pages/loading · high confidence

The Stepper component has been rewritten, introducing several new configuration options and behavioral changes. Users can now control the input field width and button size via the \input-width\ and \button-size\ props, and toggle the visibility of the plus/minus buttons using \show-plus\ and \show-minus\. The component supports fixed decimal places with the \decimal-length\ prop and allows disabling long-press gestures via \long-press\. A new \async-change\ prop enables asynchronous value updates, and the \always-embed\ prop ensures the input remains in the same layer on iOS. Styling has been updated to support a \round\ theme via the \theme\ prop, and the component now emits \focus\ and \blur\ events.

packages/stepper · high confidence

The Steps example page has been refactored to replace its previous implementation with a custom demo component. The page now consists of a minimal JavaScript entry point, a JSON configuration setting the navigation bar title to 'Steps 步骤条', and a WXML template that simply renders the \<van-steps-demo /\> component, centralizing the demo logic within that custom component.

example/pages/steps, example/pages/switch · high confidence

The Switch component in packages/switch has been updated to support the active-value and inactive-value props, allowing users to define custom values for the checked and unchecked states instead of the default true/false. This change also includes a rewrite of the component logic to use WXS for performance optimization, updates the animation timing function for smoother transitions, and adds support for form-field integration. Users can now customize the switch's appearance with active-color, inactive-color, and size props, and handle state changes via the change event which emits the configured active or inactive value.

packages/switch · high confidence

The Icon example page now delegates its rendering to a shared \\<van-icon-demo /\>\ component instead of defining its own layout. This change aligns the Icon example with the Vant framework's unified demo structure, simplifying the page implementation to a single component call.

example/pages/icon · high confidence

The calendar component's footer now applies the \safeAreaInsetBottom\ prop to the confirm button view, ensuring the button respects the device's bottom safe area (e.g., on iPhones with a home indicator). This fixes an issue where the safe area parameter was not being passed through to the popup/footer, potentially causing the button to overlap with system UI elements.

lib/calendar · high confidence

Add snapshot test for ConfigProvider demo; Add snapshot test for Search component demo; Add snapshot tests for the Empty component demo; Added snapshot test for Action Sheet demo; Added snapshot test for Card component demo; Added snapshot test for GoodsAction demo; Added snapshot test for ShareSheet demo; Added snapshot test for the Dialog demo page; Added snapshot tests for Calendar demo component; Added snapshot tests for NoticeBar demo; Added snapshot tests for the Cascader demo; Added unit tests for the Button component.

This change introduces the foundational build configuration for the project. It adds a root package.json defining the project as @vant/weapp version 1.11.7, including scripts for development, linting, and release, along with a comprehensive list of devDependencies such as Vue 3.2.30, TypeScript 4.4.4, Jest 27.3.1, and various Babel and Gulp plugins. It also generates the corresponding yarn.lock file to lock dependency versions and adds a new example function package (example/functions/foo) that depends on the latest version of wx-server-sdk.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 44 → 47 (+2.9)
• Rubric changed (rubric-2026.09.11 → rubric-2026.09.18) — scores are not directly comparable.

• Code Health 67 → 67 (+0.0)
• Architecture 97 → 87 (-10.4)
• Maturity 48 → 48 (+0.0)
• Readiness 53 → 39 (-14.0)
• Security 32 → 45 (+13.7)
• Performance 100 (new)

• Dependency hygiene PARTLY measured — npm pinning read, dependency currency not (no pnpm-resolved versions to grade)
• Documentation: no architecture or design documentation (packages/rate/README.md)
• Documentation: no architecture or design documentation (packages/sticky/README.md)
• Documentation: no architecture or design documentation (packages/swipe-cell/README.md)
• Documentation: no project overview (README.md)
• High CVE: [GHSA redacted] (yarn.lock)
• Medium CVE: [GHSA redacted] (yarn.lock)

• Circular dependency
• Dependency hygiene PARTLY measured — npm pinning read, dependency currency not (the committed lockfile resolved no direct production dependency)
• Documentation: no licence statement (README.md)
• High CVE: [CVE redacted] (yarn.lock)
• Medium CVE: [GHSA redacted] (yarn.lock)
• Medium vulnerability: [GHSA redacted] (yarn.lock)
• Off the main sequence: packages/common
• Off the main sequence: packages/mixins
• Projects may be oversized for their cohesion

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

youzan/vant-weapp was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.