niuma-ui 2.0.2 → 2.0.4

package/dist/components/breadcrumb/src/RsBreadcrumb.css

@@ -1,37 +1,70 @@
 
-.rs-breadcrumb__list {
+.rs-breadcrumb__list[data-v-8913d929] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--rs-breadcrumb-gap);
   margin: 0;
   padding: 0;
   list-style: none;
 }
-.rs-breadcrumb__item {
+.rs-breadcrumb__item[data-v-8913d929] {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--rs-breadcrumb-item-gap);
 }
-.rs-breadcrumb__link {
-  font-size: var(--rs-font-size-sm);
-  color: var(--rs-muted);
+.rs-breadcrumb__link[data-v-8913d929],
+.rs-breadcrumb__more[data-v-8913d929] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rs-breadcrumb-item-gap);
+  font-size: var(--rs-breadcrumb-font-size);
+  line-height: var(--rs-line-height-normal);
+  color: var(--rs-breadcrumb-link);
   text-decoration: none;
-  padding: 0.125rem 0.25rem;
+  padding-block: var(--rs-breadcrumb-link-pad-block);
+  padding-inline: var(--rs-breadcrumb-link-pad-inline);
+  border: 0;
   border-radius: var(--rs-radius-xs);
+  background: transparent;
+  cursor: pointer;
   transition:
     color var(--rs-transition-fast),
-    background var(--rs-transition-fast);
+    background-color var(--rs-transition-fast);
 }
-.rs-breadcrumb__link:hover:not(.rs-breadcrumb__link--current) {
-  color: var(--rs-primary);
-  background: var(--rs-surface-hover);
+.rs-breadcrumb__link[data-v-8913d929]:hover:not(.rs-breadcrumb__link--current):not(.rs-breadcrumb__link--disabled),
+.rs-breadcrumb__more[data-v-8913d929]:hover {
+  color: var(--rs-breadcrumb-link-hover);
+  background: var(--rs-breadcrumb-link-hover-bg);
 }
-.rs-breadcrumb__link--current {
-  color: var(--rs-text);
-  font-weight: var(--rs-font-weight-medium);
+.rs-breadcrumb__link[data-v-8913d929]:focus-visible,
+.rs-breadcrumb__more[data-v-8913d929]:focus-visible {
+  outline: var(--rs-focus-ring-width) solid var(--rs-focus-ring);
+  outline-offset: 2px;
+}
+.rs-breadcrumb__link--current[data-v-8913d929] {
+  color: var(--rs-breadcrumb-current);
+  font-weight: var(--rs-breadcrumb-current-weight);
   pointer-events: none;
+  cursor: default;
+}
+.rs-breadcrumb__link--disabled[data-v-8913d929] {
+  opacity: var(--rs-breadcrumb-disabled-opacity);
+  cursor: not-allowed;
+}
+.rs-breadcrumb__sep[data-v-8913d929] {
+  color: var(--rs-breadcrumb-sep);
+  flex-shrink: 0;
+}
+.rs-breadcrumb__icon[data-v-8913d929] {
+  color: inherit;
+}
+.rs-breadcrumb__sep[data-v-8913d929]:dir(rtl) {
+  transform: scaleX(-1);
+}
+@media (prefers-reduced-motion: reduce) {
+.rs-breadcrumb__link[data-v-8913d929],
+  .rs-breadcrumb__more[data-v-8913d929] {
+    transition: none;
 }
-.rs-breadcrumb__sep {
-  color: var(--rs-muted);
 }

package/dist/components/breadcrumb/src/RsBreadcrumb.d.ts

@@ -1,11 +1,50 @@
-export interface RsBreadcrumbItem {
-    label: string;
-    to?: string;
-    href?: string;
-}
+import { type RsBreadcrumbItem } from './breadcrumb-utils';
 type __VLS_Props = {
     items: RsBreadcrumbItem[];
+    /** 文字分隔符。未传时用 separatorIcon。 */
+    separator?: string;
+    /** Lucide kebab-case。有 separator 文字时不渲染图标。 */
+    separatorIcon?: string;
+    /** 超过该数量时中间收成省略号。省略号算一项。 */
+    maxItems?: number;
+    itemsBeforeCollapse?: number;
+    itemsAfterCollapse?: number;
+    ariaLabel?: string;
+    id?: string;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare function expand(): void;
+declare var __VLS_1: {
+    hiddenItems: RsBreadcrumbItem[];
+    expand: typeof expand;
+}, __VLS_16: {
+    item: RsBreadcrumbItem;
+    index: number;
+    isCurrent: boolean;
+    href: string | undefined;
+}, __VLS_23: {
+    index: number;
+};
+type __VLS_Slots = {} & {
+    more?: (props: typeof __VLS_1) => any;
+} & {
+    item?: (props: typeof __VLS_16) => any;
+} & {
+    separator?: (props: typeof __VLS_23) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (item: RsBreadcrumbItem, event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((item: RsBreadcrumbItem, event: MouseEvent) => any) | undefined;
+}>, {
+    separatorIcon: string;
+    itemsBeforeCollapse: number;
+    itemsAfterCollapse: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/breadcrumb/src/RsBreadcrumb.impl.js

@@ -1,24 +1,123 @@
 import { useRsI18n } from "../../../composables/useRsI18n.js";
+import RsIcon_default from "../../icon/src/RsIcon.js";
 import { buildBreadcrumbRenderItems } from "./breadcrumb-utils.js";
-import RsBreadcrumbItems_default from "./RsBreadcrumbItems.js";
-import { computed, createElementBlock, createVNode, defineComponent, openBlock, unref } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, watch, withCtx } from "vue";
 //#region src/components/breadcrumb/src/RsBreadcrumb.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-label"];
+var _hoisted_1 = ["id", "aria-label"];
+var _hoisted_2 = { class: "rs-breadcrumb__list" };
+var _hoisted_3 = ["aria-label"];
+var _hoisted_4 = { class: "rs-breadcrumb__label" };
+var _hoisted_5 = {
+	key: 0,
+	class: "rs-breadcrumb__sep",
+	"aria-hidden": "true"
+};
 var RsBreadcrumb_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsBreadcrumb",
 	__name: "RsBreadcrumb",
-	props: { items: {} },
-	setup(__props) {
-		const { t } = useRsI18n();
+	props: {
+		items: {},
+		separator: {},
+		separatorIcon: { default: "chevron-right" },
+		maxItems: {},
+		itemsBeforeCollapse: { default: 1 },
+		itemsAfterCollapse: { default: 1 },
+		ariaLabel: {},
+		id: {}
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
 		const props = __props;
-		const renderItems = computed(() => buildBreadcrumbRenderItems(props.items));
+		const emit = __emit;
+		const { t } = useRsI18n();
+		const expanded = ref(false);
+		watch(() => [
+			props.maxItems ?? "",
+			props.itemsBeforeCollapse,
+			props.itemsAfterCollapse,
+			props.items.length,
+			props.items.map((item, index) => item.key ?? item.label ?? index).join("\0")
+		].join("\n"), () => {
+			expanded.value = false;
+		});
+		const renderItems = computed(() => buildBreadcrumbRenderItems(props.items, {
+			maxItems: props.maxItems,
+			itemsBeforeCollapse: props.itemsBeforeCollapse,
+			itemsAfterCollapse: props.itemsAfterCollapse,
+			expanded: expanded.value
+		}));
+		const navLabel = computed(() => props.ariaLabel || t("breadcrumb.label"));
+		const separatorLabel = computed(() => t("breadcrumb.separator"));
+		const moreLabel = computed(() => t("breadcrumb.more"));
+		function expand() {
+			expanded.value = true;
+		}
+		function onItemClick(item, event, disabled) {
+			emit("click", item, event);
+			if (disabled) event.preventDefault();
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("nav", {
+				id: __props.id,
 				class: "rs-breadcrumb",
-				"aria-label": unref(t)("breadcrumb.label")
-			}, [createVNode(RsBreadcrumbItems_default, {
-				items: renderItems.value,
-				"separator-label": unref(t)("breadcrumb.separator")
-			}, null, 8, ["items", "separator-label"])], 8, _hoisted_1);
+				"aria-label": navLabel.value
+			}, [createElementVNode("ol", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(renderItems.value, (item, index) => {
+				return openBlock(), createElementBlock("li", {
+					key: item.key,
+					class: normalizeClass(["rs-breadcrumb__item", { "rs-breadcrumb__item--ellipsis": item.isEllipsis }])
+				}, [item.isEllipsis ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					type: "button",
+					class: "rs-breadcrumb__more",
+					"aria-label": moreLabel.value,
+					onClick: expand
+				}, [renderSlot(_ctx.$slots, "more", {
+					hiddenItems: item.hiddenItems ?? [],
+					expand
+				}, () => [createVNode(RsIcon_default, {
+					name: "ellipsis",
+					size: "sm"
+				})], true)], 8, _hoisted_3)) : (openBlock(), createBlock(resolveDynamicComponent(item.isLink ? "a" : "span"), {
+					key: 1,
+					href: item.isLink ? item.href : void 0,
+					target: item.isLink ? item.target : void 0,
+					rel: item.isLink ? item.rel : void 0,
+					class: normalizeClass(["rs-breadcrumb__link", {
+						"rs-breadcrumb__link--current": item.isCurrent,
+						"rs-breadcrumb__link--disabled": item.isDisabled
+					}]),
+					"aria-current": item.isCurrent ? "page" : void 0,
+					"aria-disabled": item.isDisabled ? "true" : void 0,
+					onClick: ($event) => item.source ? onItemClick(item.source, $event, item.isDisabled) : void 0
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+						item: item.source,
+						index: item.sourceIndex,
+						isCurrent: item.isCurrent,
+						href: item.href
+					}, () => [item.icon ? (openBlock(), createBlock(RsIcon_default, {
+						key: 0,
+						name: item.icon,
+						size: "sm",
+						class: "rs-breadcrumb__icon"
+					}, null, 8, ["name"])) : createCommentVNode("", true), createElementVNode("span", _hoisted_4, toDisplayString(item.label), 1)], true)]),
+					_: 2
+				}, 1032, [
+					"href",
+					"target",
+					"rel",
+					"class",
+					"aria-current",
+					"aria-disabled",
+					"onClick"
+				])), index < renderItems.value.length - 1 ? renderSlot(_ctx.$slots, "separator", { index }, () => [__props.separator ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(__props.separator), 1)) : (openBlock(), createBlock(RsIcon_default, {
+					key: 1,
+					name: __props.separatorIcon,
+					size: "sm",
+					class: "rs-breadcrumb__sep",
+					label: separatorLabel.value
+				}, null, 8, ["name", "label"]))], true, 2) : createCommentVNode("", true)], 2);
+			}), 128))])], 8, _hoisted_1);
 		};
 	}
 });

package/dist/components/breadcrumb/src/RsBreadcrumb.js

@@ -1,7 +1,8 @@
 import './RsBreadcrumb.css'
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
 import RsBreadcrumb_vue_vue_type_script_setup_true_lang_default from "./RsBreadcrumb.impl.js";
 
 //#region src/components/breadcrumb/src/RsBreadcrumb.vue
-var RsBreadcrumb_default = RsBreadcrumb_vue_vue_type_script_setup_true_lang_default;
+var RsBreadcrumb_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsBreadcrumb_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8913d929"]]);
 //#endregion
 export { RsBreadcrumb_default as default };

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

@@ -1,12 +1,44 @@
+export interface RsBreadcrumbItem {
+    key?: string;
+    label: string;
+    /** SPA 路径。未传 href 时写到 a[href]。Vue Router 请在 click 里 preventDefault 后 push，或用 #item。 */
+    to?: string;
+    /** 外链或完整地址。与 to 同时存在时以 href 为准。 */
+    href?: string;
+    /** Lucide kebab-case，写在文案前。 */
+    icon?: string;
+    disabled?: boolean;
+    target?: '_self' | '_blank' | '_parent' | '_top' | (string & {});
+    rel?: string;
+}
 export interface RsBreadcrumbRenderItem {
     key: string;
+    sourceIndex: number;
+    source?: RsBreadcrumbItem;
     label: string;
     href?: string;
+    icon?: string;
+    target?: string;
+    rel?: string;
     isLink: boolean;
     isCurrent: boolean;
+    isDisabled: boolean;
+    isEllipsis: boolean;
+    hiddenItems?: RsBreadcrumbItem[];
 }
-export declare function buildBreadcrumbRenderItems(items: Array<{
-    label: string;
-    to?: string;
-    href?: string;
-}>): RsBreadcrumbRenderItem[];
+export interface RsBreadcrumbCollapseOptions {
+    maxItems?: number;
+    itemsBeforeCollapse?: number;
+    itemsAfterCollapse?: number;
+    expanded?: boolean;
+}
+/** href 优先；没有 href 时用 to，保证只传 to 的项仍是带地址的 a。 */
+export declare function resolveBreadcrumbHref(item: Pick<RsBreadcrumbItem, 'href' | 'to'>): string | undefined;
+/** `_blank` 时补 noopener / noreferrer，并保留调用方已有 rel。 */
+export declare function mergeBreadcrumbLinkRel(rel: string | undefined, target: string | undefined): string | undefined;
+export declare function pickCollapsedBreadcrumbIndexes(length: number, maxItems: number | undefined, itemsBeforeCollapse?: number, itemsAfterCollapse?: number, expanded?: boolean): {
+    visible: number[];
+    hidden: number[];
+    insertEllipsisAt: number;
+} | null;
+export declare function buildBreadcrumbRenderItems(items: RsBreadcrumbItem[], options?: RsBreadcrumbCollapseOptions): RsBreadcrumbRenderItem[];

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

@@ -1,12 +1,73 @@
 //#region src/components/breadcrumb/src/breadcrumb-utils.ts
-function buildBreadcrumbRenderItems(items) {
-	return items.map((item, index) => ({
-		key: `${item.label}-${index}`,
-		label: item.label,
-		href: item.href,
-		isLink: Boolean(item.to || item.href),
-		isCurrent: index === items.length - 1
-	}));
+/** href 优先；没有 href 时用 to，保证只传 to 的项仍是带地址的 a。 */
+function resolveBreadcrumbHref(item) {
+	if (item.href) return item.href;
+	if (item.to) return item.to;
+}
+/** `_blank` 时补 noopener / noreferrer，并保留调用方已有 rel。 */
+function mergeBreadcrumbLinkRel(rel, target) {
+	const parts = (rel ?? "").split(/\s+/).map((item) => item.trim()).filter(Boolean);
+	if (target === "_blank") {
+		if (!parts.includes("noopener")) parts.push("noopener");
+		if (!parts.includes("noreferrer")) parts.push("noreferrer");
+	}
+	return parts.length > 0 ? parts.join(" ") : void 0;
+}
+function pickCollapsedBreadcrumbIndexes(length, maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, expanded = false) {
+	if (expanded || maxItems == null || maxItems < 2 || length <= maxItems) return null;
+	const before = Math.max(0, Math.floor(itemsBeforeCollapse));
+	const after = Math.max(1, Math.floor(itemsAfterCollapse));
+	if (before + after >= length) return null;
+	const hiddenStart = before;
+	const hiddenEnd = length - after;
+	if (hiddenStart >= hiddenEnd) return null;
+	const visible = [];
+	const hidden = [];
+	for (let index = 0; index < length; index += 1) if (index >= hiddenStart && index < hiddenEnd) hidden.push(index);
+	else visible.push(index);
+	return {
+		visible,
+		hidden,
+		insertEllipsisAt: before
+	};
+}
+function buildBreadcrumbRenderItems(items, options = {}) {
+	const lastIndex = items.length - 1;
+	const mapped = items.map((item, index) => {
+		const href = resolveBreadcrumbHref(item);
+		const disabled = Boolean(item.disabled);
+		return {
+			key: item.key ?? String(index),
+			sourceIndex: index,
+			source: item,
+			label: item.label,
+			href,
+			icon: item.icon,
+			target: item.target,
+			rel: mergeBreadcrumbLinkRel(item.rel, item.target),
+			isLink: Boolean(href) && !disabled && index !== lastIndex,
+			isCurrent: index === lastIndex,
+			isDisabled: disabled,
+			isEllipsis: false
+		};
+	});
+	const collapsed = pickCollapsedBreadcrumbIndexes(mapped.length, options.maxItems, options.itemsBeforeCollapse ?? 1, options.itemsAfterCollapse ?? 1, options.expanded ?? false);
+	if (!collapsed) return mapped;
+	const result = [];
+	collapsed.visible.forEach((index, visibleIndex) => {
+		if (visibleIndex === collapsed.insertEllipsisAt) result.push({
+			key: "ellipsis",
+			sourceIndex: -1,
+			label: "",
+			isLink: false,
+			isCurrent: false,
+			isDisabled: false,
+			isEllipsis: true,
+			hiddenItems: collapsed.hidden.map((hiddenIndex) => items[hiddenIndex])
+		});
+		result.push(mapped[index]);
+	});
+	return result;
 }
 //#endregion
-export { buildBreadcrumbRenderItems };
+export { buildBreadcrumbRenderItems, mergeBreadcrumbLinkRel, pickCollapsedBreadcrumbIndexes, resolveBreadcrumbHref };