Skip to content

v1.2.2 - Core upgrade, Svelte support, Vue sync, UI overhaul

Latest
Latest

Choose a tag to compare

View all tags
@tombcato tombcato released this 05 Jan 18:09
· 3 commits to main since this release
v1.2.2
6474a8a

[1.2.2] - 2026-01-08

✨ New Features

  • Svelte Framework Support
    • Native Component: First-class support for Svelte! Import via standard path: import { Ticker } from '@tombcato/smart-ticker/svelte'.
    • Demo Project: Added examples/svelte-demo, providing a complete integration reference.
    • Official Site Upgrade: The official demo now fully supports real-time preview and generation of Svelte code.
  • Core Functionality Upgrade (Core)
    • Intl Support: Added numberFormat prop for value (number type), leveraging Intl.NumberFormat for internationalized formatting.
    • autoScale: Automatically scales content to fit container (requires parent container with defined dimensions).
    • fadingEdge: Added top/bottom fading edge effects.
    • disableAnimation: Option to disable animation entirely (disabled prop). Useful for static displays.
    • Easing Enhancements: Added more built-in easing options (e.g., easeOutBack) and optimized type support for custom easing functions ((t: number) => number).
    • Prefix/Suffix Refinement: Improved prefix and suffix props to ensure static text stays stable during layout changes and is excluded from column scrolling logic.
    • A11y & Reduced Motion: automatically respects system prefers-reduced-motion preferences with ARIA support.
    • animateOnMount: Control initial render animation (default false).
    • onAnimationEnd / @animation-end: Callback when animation completes.
  • Vue Component Sync
    • Prop Alignment: Synced prefix, suffix, autoScale, fadingEdge, and numberFormat props to the Vue version.
    • Intl Support: Optimized reactive logic for :number-format to support real-time updates for international formatting.
  • Official Site Overhaul — UI adjustments, more control options in Demo, real-time React/Vue code preview, 100% bilingual (EN/ZH) support, and one-click StackBlitz export.
  • Character Presets — Replaced TickerUtils with Presets constants (NUMBER, ALPHABET, CURRENCY) for easier configuration.

✨ 新功能

  • Svelte 框架支持

    • 原生组件: 正式支持 Svelte！可通过标准方式引入：import { Ticker } from '@tombcato/smart-ticker/svelte'。
    • 示例工程: 新增 examples/svelte-demo，提供完整的集成参考。
    • 官网升级: 官方演示现已全面支持 Svelte 代码的实时预览与生成。

  • 核心功能升级 (Core)

    • Intl 支持：value传数字时，支持numberFormat属性，配合Intl.NumberFormat使用, 支持国际化格式化。
    • autoScale 自动大小缩放适配容器，注意需要父控件给定宽高。
    • fadingEdge 上下边缘模糊效果。
    • disableAnimation 禁用动画（disabled 属性）。直接显示最终值，适合无需动画的场景。
    • 缓动函数增强：增加了更多的内置缓动选项（如 easeOutBack），并优化了自定义 Easing 函数 ((t: number) => number) 的类型支持。
    • 前后缀完善: 完善了 prefix / suffix 属性，确保静态文本不参与列滚动逻辑，且在布局切换时保持稳定。
    • 无障碍优化 (A11y): ARIA + Screen Reader 支持。自动检测系统 prefers-reduced-motion 设置，尊重用户减弱动画的偏好。
    • animateOnMount — 控制首次加载是否播放动画（默认 false）。
    • onAnimationEnd / @animation-end — 动画结束回调。

  • Vue 组件同步

    • 属性对齐：为 Vue 版本同步增加了 prefix、suffix、autoScale、fadingEdge 和 numberFormat等 Props。
    • Intl 支持：优化了 :number-format 属性的响应式逻辑，使其能配合国际化格式实时更新。

  • 官网改造升级 — UI调整，Demo增加更多控制选项，支持 React/Vue 代码实时预览，100% 适配中英双语切换，集成 StackBlitz 一键导出在线运行。

  • 预设字符集 — 提供 Presets 常量 (NUMBER, ALPHABET, CURRENCY) 替换旧的通过工具类生成方式。

Assets 2
Loading