TinyVue v3.31 Released: New Components & Optimized Documentation With Multiple Practical Feature Upgrades

Release Overview

TinyVue v3.31.0 is officially launched, bringing the following updates:

New Component: SliderButtonGroup (1 new component)
New Features & Prop Enhancements (6 items): Modal before-close, Drawer destroyOnClose, SVG URL encoding for Image, Tag round, resizable Alert sizes, Switch display-only
Docs & Demos: Complete API docs and examples for Flowchart component
Bug Fixes: 52 bug fixes for improved overall stability

Full detailed Release Notes: TinyVue v3.31.0 Release Notes

New Contributors

We have 3 first-time contributors for this release: @Malusnow, @xuxiao1797, @cfljue. They contributed fixes for dialog-select multi-selection sync, wildcard support for file-upload, and fluent-editor line height formatting respectively. A big welcome to our new partners, and sincere thanks to all new & existing contributors for their hard work on TinyVue 👏

Feature Breakdown

1. New Component: SliderButtonGroup

SliderButtonGroup is a brand-new component introduced in v3.31.0. Similar to ButtonGroup, it contains multiple SliderButton items. An animated white background slider indicates the active option. When users switch selections, the highlight block slides smoothly between buttons. It supports text & icon variants, plus small / medium / large size options, ideal for page mode switching scenarios.

<template>
  <tiny-slider-button-group v-model="value">
    <tiny-slider-button label="1">Today</tiny-slider-button>
    <tiny-slider-button label="2">This Week</tiny-slider-button>
    <tiny-slider-button label="3">This Month</tiny-slider-button>
  </tiny-slider-button-group>
</template>

<script>
import { TinySliderButton, TinySliderButtonGroup } from "@opentiny/vue";
export default {
  components: { TinySliderButton, TinySliderButtonGroup },
  data() {
    return { value: "1" };
  },
};
</script>

2. Flowchart Component Docs & Examples Completed

We have fully supplemented API documentation and demo cases for the Flowchart component.
Flowchart enables custom workflow diagram creation without third-party libraries. It supports stateful nodes & links, click events on nodes/links/blank canvas areas, and custom node templates via slots. Link styles can be configured through dedicated settings.

<template>
  <tiny-flowchart :data="data" :config="config" />
</template>

<script setup>
import { TinyFlowchart } from "@opentiny/vue";
import { reactive } from "vue";
const { createNode, createLink, createConfig } = TinyFlowchart;

const config = createConfig();
config.width = 960;
config.height = 260;

const data = reactive({
  nodes: [
    createNode("1", 1, "Submit Application", "2024-01-01", null, 1, 1),
    createNode("2", 2, "Supervisor Approval", "2024-01-02", null, 1, 3),
    createNode("3", 3, "Process Completed", "", null, 1, 5),
  ],
  links: [
    createLink("1", "2", "0 r2", 2, "solid"),
    createLink("2", "3", "0 r2", 3, "solid")
  ],
});
</script>

Unlike traditional DOM-based components, Flowchart renders via Canvas and provides multiple static helper methods:

createNode: Quickly generate node objects
createLink: Generate connection line objects
createConfig: Set canvas width, height and global configurations

Structured array data can be directly mapped from backend responses without manual coordinate maintenance on the presentation layer.
Supported use cases include basic workflows, card-style branch diagrams, grid route charts, dynamic approval progress updates, click event handling, approver roster display with createItem, and fully customized node slots.

3. Existing Component Enhancements

This release delivers multiple practical prop upgrades. The most noteworthy improvement is modal close interception logic: Previously, un-saved form validation logic needed to be handled in outer parent components. Now Modal provides a native before-close callback to centralize close confirmation workflows.

Component	New Prop	Usage Scenario
Modal	`before-close`	Intercept close actions to prompt users about unsaved edits
Drawer	`destroyOnClose`	Destroy internal content on close to retain no residual form state
Image	SVG URL encoding	Directly render SVG images with special characters in URLs
Tag	`round`	Fully rounded tag style
Alert	size (small / medium)	Compact alert banner variants
Switch	`display-only`	Read-only static display of switch status

These upgrades require no changes to your business data structures; you can adopt them per component on a page-by-page basis during version upgrade.

Key Bug Fixes

Fixed issue where size prop failed to take effect for buttons inside form-item (PR #4206); adjusted padding-top of inline form-item to 12px
DatePicker: Fixed blank panel after half-selection clearing; resolved one-day date offset bug across multi-timezone environments for DatePicker / DatePanel
FileUpload: Added wildcard support for video/* and audio/* MIME types to align with HTTP standards; fixed errors triggered when webkitGetAsEntry() returns null (PR #4226)

About OpenTiny NEXT

OpenTiny NEXT is an enterprise-grade intelligent frontend solution built on Generative UI and WebMCP core technologies. It delivers intelligent upgrades for legacy products including the TinyVue component library and TinyEngine low-code engine, while launching Agent-native products such as front-end NEXT-SDKs, AI Extension, TinyRobot AI Assistant and GenUI. The suite empowers AI to interpret user intentions and complete tasks autonomously, accelerating intelligent transformation for enterprise applications.

Join the OpenTiny Open Source Community

WeChat Assistant: opentiny-official

Official Website: https://opentiny.design
TinyVue Repository: https://github.com/opentiny/vue (Star ⭐ appreciated)

If you wish to contribute, locate issues tagged good first issue in the repository. Feel free to leave comments with any questions or feedback!

DEV Community