niuma-ui 2.0.2 → 2.0.3

package/CHANGELOG.md

@@ -6,6 +6,29 @@
 
 ## [Unreleased]
 
+## [2.0.3] - 2026-09-21
+
+### 新增
+
+- 文档站接入 vue-i18n（`site/locales`）。顶栏切语言同步 `RsConfigProvider.locale` 与 vue-i18n，并记住上次选择。只用于 site，不进组件库依赖。
+- `RsBadge`：补 `name` 与公开类型 `RsBadgeVariant`。只写 `variant` + 默认插槽时仍是原来的状态芯片。可选 `count` / `max` / `dot` / `showZero`：有插槽时为角标，无插槽时只渲染数字或点。文档站按 site README 补全 events / methods / tokens / FAQ。
+
+### 变更
+
+- 文档站演示与壳层不再用 `isEn` 二分。文案按 locale 表选取（`useSiteDemo` / `pickSitePair`），缺语言回退 en-US → zh-CN；顶栏语言按 `SITE_LOCALES` 轮换。主题仍走 `resolvedTheme` / `data-rs-theme` / token。
+- `RsTag`：补 `name`；关闭钮改用 `RsButton`（仍是 `.rs-tag__close`，props / `close` 语义与原来相同）。文档站按 site README 补全 events / methods / tokens（中英）。
+- `RsDivider`：补 `name` 与公开类型 `RsDividerOrientation`。仍是 `div[role=separator]`，`orientation` / `dashed` / 默认插槽语义不变。文档站按 site README 补全 events / methods / tokens / FAQ（中英）。
+- 文档站基础组 Avatar / Card / Container / Scrollbar：按 site README 补全中英演示、events / methods / tokens / FAQ。Scrollbar 演示可点 `scrollTop` / `getViewport`。
+- `RsIcon`：补 `name`；尺寸档位与 `RS_COMPONENT_SIZE_ICON_PX` 对齐（lg 现为 18）；抽 `icon-utils`；`spin` 尊重减少动态。文档站 Icon 用法与 Button 对齐（中英）。
+- 文档站基础组：Button 补 `iconSize` / 原生 `click` / 事件演示；Badge–Scrollbar 按源码补全 props、事件、插槽、方法（中英）。
+- `RsLink`：去掉 Reka `Primitive`，改为原生 `<a>`；补 `name`、`tone`、`icon`；样式改 scoped，并尊重减少动态。默认 `inline`（有图标才 `inline-flex`）。文档站按 site README 补 events / methods / tokens、跟正文与可感知 click。公开类型 `RsLinkTone` / `RsLinkUnderline`；helper 保持内部。不设 size / theme prop。
+
+### 修复
+
+- `RsButton`：补 `name`，loading 时拦住点击；内置 tip 用自研定位，不再提 Reka。图标在按钮内为装饰，可访问名称只走 `aria-label`。
+- `RsButton` 内置 tip 回到 `calc(var(--rs-z-modal) + 2)`，与 `RsTooltip` / Dialog 内浮层同一档，避免在对话框里被盖住。
+- `RsButton` 幽灵：未传 `bordered` 时不再被 Vue 收成 false（与 text 撞车）；hover 改为 `--rs-surface-hover` 实底，语义色再叠 14% 色相。
+
 ## [2.0.2] - 2026-09-21
 
 ### 变更

package/README.md

@@ -82,12 +82,14 @@ Component APIs live on the docs site. The architecture contract is for maintaine
 
 - **Component site:** [https://blair-shang.github.io/niuma-ui/](https://blair-shang.github.io/niuma-ui/) (source: `site/`)
 - Local docs: `pnpm dev:site` → http://127.0.0.1:5181
+- **How to write demos and APIs:** [site/README.en.md](./site/README.en.md) ([中文](./site/README.md)) — catalog must list props / events / slots / methods; demos are bilingual and events must be visible
 - `playground/` is internal smoke / visual regression only (`pnpm dev` → :5180). It is not usage documentation.
 
 | Doc | Audience |
 |-----|----------|
 | [docs/consumers.en.md](./docs/consumers.en.md) | People installing the library ([中文](./docs/consumers.md)) |
 | [docs/locales.en.md](./docs/locales.en.md) | Registering extra languages ([中文](./docs/locales.md)) |
+| [site/README.en.md](./site/README.en.md) | How to write site demos and API tables ([中文](./site/README.md)) |
 | [docs/components.en.md](./docs/components.en.md) | People changing this repository ([中文](./docs/components.md)) |
 | [CONTRIBUTING.en.md](./CONTRIBUTING.en.md) | PRs, tests, releases ([中文](./CONTRIBUTING.md)) |
 | [CHANGELOG.md](./CHANGELOG.md) | Release notes |

package/README.zh-CN.md

@@ -82,12 +82,14 @@ import { RsConfigProvider, RsButton } from 'niuma-ui'
 
 - **组件文档（官网）**：[https://blair-shang.github.io/niuma-ui/](https://blair-shang.github.io/niuma-ui/)（源码 `site/`）
 - 本地文档站：`pnpm dev:site` → http://127.0.0.1:5181
+- **演示与 API 写法**：[site/README.md](./site/README.md)（[English](./site/README.en.md)）— catalog 必须写清 props / events / slots / methods，演示要中英对照且事件可感知
 - `playground/` 仅内部冒烟与像素回归（`pnpm dev` → :5180），不提供对外用法
 
 | 文档 | 给谁看 |
 |------|--------|
 | [docs/consumers.md](./docs/consumers.md) | 把库装进产品的人（[English](./docs/consumers.en.md)） |
 | [docs/locales.md](./docs/locales.md) | 登记第三方语言（[English](./docs/locales.en.md)） |
+| [site/README.md](./site/README.md) | 文档站演示与 API 表怎么写（[English](./site/README.en.md)） |
 | [docs/components.md](./docs/components.md) | 改本仓库的人（[English](./docs/components.en.md)） |
 | [CONTRIBUTING.md](./CONTRIBUTING.md) | PR、测试、发版（[English](./CONTRIBUTING.en.md)） |
 | [CHANGELOG.md](./CHANGELOG.md) | 版本记录 |

package/dist/components/badge/index.d.ts

@@ -1 +1,2 @@
 export { default as RsBadge } from './src/RsBadge.js';
+export type { RsBadgeVariant } from './src/badge-utils';

package/dist/components/badge/src/RsBadge.css

@@ -1,41 +1,94 @@
 
-.rs-badge[data-v-90af0872] {
+.rs-badge[data-v-f91a65a7] {
+  --rs-badge-padding-y: 0.125rem;
+  --rs-badge-padding-x: 0.625rem;
+  --rs-badge-dot-size: var(--rs-space-sm);
+  --rs-badge-count-min: 1.125rem;
+  --rs-badge-ring: var(--rs-surface);
   display: inline-flex;
   align-items: center;
-  padding: 0.125rem 0.625rem;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: var(--rs-badge-padding-y) var(--rs-badge-padding-x);
   border-radius: var(--rs-radius-full);
   font-size: var(--rs-font-size-xs);
   font-weight: var(--rs-font-weight-medium);
   line-height: var(--rs-line-height-tight);
   letter-spacing: 0.02em;
+  white-space: nowrap;
+  vertical-align: middle;
 }
-.rs-badge--default[data-v-90af0872] {
+.rs-badge-wrap[data-v-f91a65a7] {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+.rs-badge-wrap .rs-badge--mark[data-v-f91a65a7] {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  z-index: 1;
+  transform: translate(50%, -50%);
+  box-shadow: 0 0 0 2px var(--rs-badge-ring);
+}
+:dir(rtl) .rs-badge-wrap .rs-badge--mark[data-v-f91a65a7] {
+  transform: translate(-50%, -50%);
+}
+.rs-badge--mark[data-v-f91a65a7]:not(.rs-badge--dot) {
+  min-width: var(--rs-badge-count-min);
+  min-height: var(--rs-badge-count-min);
+  padding: 0 0.375rem;
+  letter-spacing: 0;
+  line-height: 1;
+}
+.rs-badge--dot[data-v-f91a65a7] {
+  width: var(--rs-badge-dot-size);
+  height: var(--rs-badge-dot-size);
+  min-width: var(--rs-badge-dot-size);
+  padding: 0;
+  border-radius: var(--rs-radius-full);
+}
+.rs-badge--default[data-v-f91a65a7] {
   background: var(--rs-surface-hover);
   color: var(--rs-text);
   border: 1px solid var(--rs-border);
 }
-.rs-badge--primary[data-v-90af0872] {
+.rs-badge--primary[data-v-f91a65a7] {
   background: var(--rs-primary-container);
   color: var(--rs-on-primary-container);
   border: 1px solid color-mix(in srgb, var(--rs-primary) 40%, transparent);
 }
-.rs-badge--success[data-v-90af0872] {
+.rs-badge--success[data-v-f91a65a7] {
   background: var(--rs-success-container);
   color: var(--rs-on-success-container);
   border: 1px solid color-mix(in srgb, var(--rs-success) 40%, transparent);
 }
-.rs-badge--warning[data-v-90af0872] {
+.rs-badge--warning[data-v-f91a65a7] {
   background: var(--rs-warning-container);
   color: var(--rs-on-warning-container);
   border: 1px solid color-mix(in srgb, var(--rs-warning) 40%, transparent);
 }
-.rs-badge--danger[data-v-90af0872] {
+.rs-badge--danger[data-v-f91a65a7] {
   background: var(--rs-danger-container);
   color: var(--rs-on-danger-container);
   border: 1px solid color-mix(in srgb, var(--rs-danger) 40%, transparent);
 }
-.rs-badge--info[data-v-90af0872] {
+.rs-badge--info[data-v-f91a65a7] {
   background: var(--rs-info-container);
   color: var(--rs-on-info-container);
   border: 1px solid color-mix(in srgb, var(--rs-info) 40%, transparent);
 }
+.rs-badge--dot.rs-badge--default[data-v-f91a65a7],
+.rs-badge--dot.rs-badge--primary[data-v-f91a65a7],
+.rs-badge--dot.rs-badge--success[data-v-f91a65a7],
+.rs-badge--dot.rs-badge--warning[data-v-f91a65a7],
+.rs-badge--dot.rs-badge--danger[data-v-f91a65a7],
+.rs-badge--dot.rs-badge--info[data-v-f91a65a7] {
+  color: transparent;
+}
+@media (forced-colors: active) {
+.rs-badge[data-v-f91a65a7] {
+    border: 1px solid CanvasText;
+    forced-color-adjust: none;
+}
+}

package/dist/components/badge/src/RsBadge.d.ts

@@ -1,12 +1,28 @@
+import { type RsBadgeVariant } from './badge-utils';
+export type { RsBadgeVariant };
 type __VLS_Props = {
-    variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    variant?: RsBadgeVariant;
+    /** 角标数字。与默认插槽同时出现时，插槽是宿主，数字挂在角上。 */
+    count?: number;
+    /** 超过后显示 `{max}+`。 */
+    max?: number;
+    /** 小圆点，不计数字。与 count 同时出现时只显示点。 */
+    dot?: boolean;
+    /** count 为 0 时仍显示。 */
+    showZero?: boolean;
 };
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    variant: "default" | "primary" | "success" | "warning" | "danger" | "info";
+    variant: RsBadgeVariant;
+    count: number;
+    max: number;
+    dot: boolean;
+    showZero: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/badge/src/RsBadge.impl.js

@@ -1,11 +1,54 @@
-import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot } from "vue";
+import { formatRsBadgeCount, resolveRsBadgeVariant } from "./badge-utils.js";
+import { computed, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, useSlots } from "vue";
 //#region src/components/badge/src/RsBadge.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "rs-badge-wrap"
+};
+var _hoisted_2 = ["aria-hidden", "aria-label"];
+var _hoisted_3 = ["aria-hidden", "aria-label"];
 var RsBadge_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsBadge",
 	__name: "RsBadge",
-	props: { variant: { default: "default" } },
+	props: {
+		variant: { default: "default" },
+		count: { default: void 0 },
+		max: { default: 99 },
+		dot: {
+			type: Boolean,
+			default: false
+		},
+		showZero: {
+			type: Boolean,
+			default: false
+		}
+	},
 	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const resolvedVariant = computed(() => resolveRsBadgeVariant(props.variant));
+		const variantClass = computed(() => `rs-badge--${resolvedVariant.value}`);
+		const isMarkMode = computed(() => props.dot || props.count !== void 0);
+		const countText = computed(() => formatRsBadgeCount(props.count, props.max, props.showZero));
+		const showMark = computed(() => props.dot || countText.value != null);
+		const hasHost = computed(() => Boolean(slots.default));
+		const overlay = computed(() => isMarkMode.value && hasHost.value);
+		const markLabel = computed(() => props.dot ? void 0 : countText.value ?? void 0);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", { class: normalizeClass(["rs-badge", `rs-badge--${__props.variant}`]) }, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 2);
+			return overlay.value ? (openBlock(), createElementBlock("span", _hoisted_1, [renderSlot(_ctx.$slots, "default", {}, void 0, true), showMark.value ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: normalizeClass(["rs-badge rs-badge--mark", [variantClass.value, { "rs-badge--dot": __props.dot }]]),
+				"aria-hidden": __props.dot ? "true" : void 0,
+				"aria-label": markLabel.value
+			}, toDisplayString(__props.dot ? "" : countText.value), 11, _hoisted_2)) : createCommentVNode("", true)])) : showMark.value ? (openBlock(), createElementBlock("span", {
+				key: 1,
+				class: normalizeClass(["rs-badge rs-badge--mark", [variantClass.value, { "rs-badge--dot": __props.dot }]]),
+				"aria-hidden": __props.dot ? "true" : void 0,
+				"aria-label": markLabel.value
+			}, toDisplayString(__props.dot ? "" : countText.value), 11, _hoisted_3)) : !isMarkMode.value ? (openBlock(), createElementBlock("span", {
+				key: 2,
+				class: normalizeClass(["rs-badge", variantClass.value])
+			}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 2)) : createCommentVNode("", true);
 		};
 	}
 });

package/dist/components/badge/src/RsBadge.js

@@ -3,6 +3,6 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import RsBadge_vue_vue_type_script_setup_true_lang_default from "./RsBadge.impl.js";
 
 //#region src/components/badge/src/RsBadge.vue
-var RsBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsBadge_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-90af0872"]]);
+var RsBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsBadge_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f91a65a7"]]);
 //#endregion
 export { RsBadge_default as default };

package/dist/components/badge/src/badge-utils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * RsBadge 语义色。芯片与角标共用同一套 variant，不另开 tone 轴。
+ * 可关闭的筛选请用 RsTag，不要用本组件冒充标签。
+ */
+export declare const RS_BADGE_VARIANTS: readonly ["default", "primary", "success", "warning", "danger", "info"];
+export type RsBadgeVariant = (typeof RS_BADGE_VARIANTS)[number];
+export declare const RS_BADGE_COUNT_MAX_DEFAULT = 99;
+export declare function isRsBadgeVariant(value: unknown): value is RsBadgeVariant;
+export declare function resolveRsBadgeVariant(variant?: RsBadgeVariant | null): RsBadgeVariant;
+/** 未传 count、非有限数字、负数、或 0 且未 showZero 时不展示数字。 */
+export declare function formatRsBadgeCount(count: number | string | null | undefined, max?: number, showZero?: boolean): string | null;

package/dist/components/badge/src/badge-utils.js

@@ -0,0 +1,32 @@
+//#region src/components/badge/src/badge-utils.ts
+/**
+* RsBadge 语义色。芯片与角标共用同一套 variant，不另开 tone 轴。
+* 可关闭的筛选请用 RsTag，不要用本组件冒充标签。
+*/
+var RS_BADGE_VARIANTS = [
+	"default",
+	"primary",
+	"success",
+	"warning",
+	"danger",
+	"info"
+];
+function isRsBadgeVariant(value) {
+	return typeof value === "string" && RS_BADGE_VARIANTS.includes(value);
+}
+function resolveRsBadgeVariant(variant) {
+	return isRsBadgeVariant(variant) ? variant : "default";
+}
+/** 未传 count、非有限数字、负数、或 0 且未 showZero 时不展示数字。 */
+function formatRsBadgeCount(count, max = 99, showZero = false) {
+	if (count == null || count === "") return null;
+	const n = typeof count === "number" ? count : Number(count);
+	if (!Number.isFinite(n) || n < 0) return null;
+	if (n === 0 && !showZero) return null;
+	const cap = Number.isFinite(max) && max > 0 ? Math.floor(max) : 99;
+	const value = Math.floor(n);
+	if (value > cap) return `${cap}+`;
+	return String(value);
+}
+//#endregion
+export { RS_BADGE_VARIANTS, formatRsBadgeCount, isRsBadgeVariant, resolveRsBadgeVariant };